/* ==========================================================================
   OcttoApps Technologies — Design System
   White base · Orange accents · Navy typography · Premium, clean, fast
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root {
  /* Brand */
  --orange: #FF6A1A;
  --orange-600: #EC5B0C;
  --orange-700: #C2470A;
  --orange-soft: #FFF2E9;
  --orange-tint: #FFF8F3;

  /* Ink / neutrals */
  --ink: #0A1B2E;
  --ink-2: #2C3E50;
  --muted: #5F7386;
  --muted-2: #8496A6;
  --line: #E7ECF2;
  --line-2: #EEF2F7;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-soft: #F6F8FB;
  --bg-panel: #FBFCFE;
  --navy: #081726;
  --navy-2: #0C2137;
  --navy-3: #123049;

  /* Accents */
  --wa: #25D366;
  --ok: #16A34A;
  --blue: #2563EB;

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(10,27,46,.06);
  --sh-sm: 0 4px 14px rgba(10,27,46,.07);
  --sh: 0 12px 30px rgba(10,27,46,.09);
  --sh-lg: 0 26px 60px rgba(10,27,46,.14);
  --sh-orange: 0 18px 40px rgba(255,106,26,.28);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1200px;
  --gutter: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
:focus-visible { outline: 3px solid rgba(255,106,26,.5); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------ Layout ---------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 118px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--orange-tint), #fff); }
.grid { display: grid; gap: 24px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 18px; }

/* ------------------------------ Type helpers ---------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-700);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow--center { justify-content: center; }
h1, .h1 { font-size: clamp(2.15rem, 4.4vw, 3.55rem); }
h2, .h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--muted); line-height: 1.7; }
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: 14px; }
.section-head p { margin-top: 16px; }
.text-orange { color: var(--orange-700); }
.muted { color: var(--muted); }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  --btn-bg: var(--orange); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--pill);
  font-weight: 650; font-size: .98rem; letter-spacing: -0.01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { box-shadow: var(--sh-orange); }
.btn-primary:hover { background: var(--orange-600); transform: translateY(-2px); box-shadow: 0 22px 46px rgba(255,106,26,.34); }
/* Secondary CTA → clean white with navy outline (navy as an accent, no dark fill); fills on hover */
.btn-dark { background: #fff !important; color: var(--ink) !important; border: 1.6px solid var(--ink) !important; box-shadow: var(--sh-xs); }
.btn-dark:hover { background: var(--ink) !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--sh); }
.btn-dark svg { color: currentColor; }
.btn-ghost { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--line); box-shadow: var(--sh-xs); }
.btn-ghost:hover { --btn-bd: var(--orange); --btn-fg: var(--orange-700); transform: translateY(-2px); }
.btn-wa { --btn-bg: #fff; --btn-fg: #0A1B2E; --btn-bd: var(--line); box-shadow: var(--sh-xs); }
.btn-wa svg { color: var(--wa); }
.btn-wa:hover { --btn-bd: var(--wa); transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn-link { color: var(--orange-700); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.btn-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------ Header / Nav (floating pill) ------------ */
.site-header { position: sticky; top: 0; z-index: 100; background: transparent; padding-block: 14px; transition: padding .25s var(--ease); }
.site-header .nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 62px; padding: 0 10px 0 20px;
  background: rgba(13,31,50,.86);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pill);
  box-shadow: 0 16px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .25s, background .25s;
}
.site-header.scrolled { padding-block: 8px; }
.site-header.scrolled .nav { box-shadow: 0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); background: rgba(11,26,43,.94); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.03em; color: #fff; }
.brand-octo { height: 36px; width: 36px; object-fit: contain; display: block; flex: none; }
.brand-logo { height: 34px; width: auto; display: block; }
.site-footer .brand-logo { filter: brightness(0) invert(1); opacity: .95; }
.brand span { color: #fff; }
.brand b { color: var(--orange); font-weight: 800; }
.brand small { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #7C93A8; font-weight: 700; margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 9px 14px; border-radius: var(--pill); font-size: .92rem; font-weight: 550; color: #C6D4E1; transition: color .18s, background .18s; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links a.active { color: #fff; background: rgba(255,106,26,.18); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.16); background: transparent; font-size: .82rem; font-weight: 650; color: #C6D4E1; transition: .18s; }
.lang:hover { border-color: var(--orange); color: #fff; }
.lang svg { width: 15px; height: 15px; }
.nav-right .btn-primary { padding: 11px 18px; box-shadow: 0 10px 24px rgba(255,106,26,.34); }
.nav-links > .btn { display: none; }
@media (min-width: 861px) { .nav-links > .btn { display: none; } }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.16); background: transparent; align-items: center; justify-content: center; color: #fff; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ic-close { display: none; }
body.nav-open .nav-toggle .ic-open { display: none; }
body.nav-open .nav-toggle .ic-close { display: block; }

/* ------------------------------ Hero ------------------------------------ */
.hero { position: relative; padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 460px at 88% -6%, rgba(255,106,26,.14), transparent 60%),
    radial-gradient(700px 500px at -8% 8%, rgba(37,99,235,.06), transparent 55%),
    linear-gradient(180deg, #fff, #fff);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero h1 { margin-top: 18px; }
.hero .lead { margin-top: 20px; max-width: 560px; }
.hero .btn-row { margin-top: 30px; }
.hero-trust { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--muted); font-size: .9rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 17px; height: 17px; color: var(--ok); }

.pill-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--sh-xs);
  font-size: .84rem; font-weight: 600; color: var(--ink-2);
}
.pill-badge b { color: var(--orange-700); }
.pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22,163,74,.14); }

/* ------------------------------ Mockup toolkit -------------------------- */
/* Reusable pure-CSS UI so pages never rely on stock images */
.mockups { position: relative; min-height: 460px; }
.mk { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); }
.mk-window { overflow: hidden; }
.mk-topbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: var(--bg-panel); }
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; display: block; }
.mk-dots i:nth-child(1){ background:#FF6058;} .mk-dots i:nth-child(2){ background:#FFBD2E;} .mk-dots i:nth-child(3){ background:#28C840;}
.mk-url { flex: 1; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding-inline: 10px; font-size: 11px; color: var(--muted); }
.mk-url svg { width: 12px; height: 12px; color: var(--ok); }
.mk-body { padding: 16px; }

/* generic UI bits */
.ui-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ui-logo { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; color: var(--ink); }
.ui-logo i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg,var(--orange),var(--orange-700)); display: block; }
.ui-menu { display: flex; gap: 10px; }
.ui-menu i { width: 26px; height: 7px; border-radius: 4px; background: #EEF2F7; display: block; }
.ui-hero-line { height: 12px; border-radius: 6px; background: #E9EEF4; margin-bottom: 8px; }
.ui-hero-line.w80{width:80%} .ui-hero-line.w60{width:60%} .ui-hero-line.w40{width:40%} .ui-hero-line.big{height:16px}
.ui-cta { margin-top: 12px; height: 30px; width: 118px; border-radius: 8px; background: linear-gradient(135deg,var(--orange),var(--orange-700)); box-shadow: var(--sh-orange); }
.ui-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.ui-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; background: #fff; }
.ui-card i { display: block; width: 22px; height: 22px; border-radius: 7px; background: var(--orange-soft); margin-bottom: 8px; }
.ui-card .l { height: 6px; border-radius: 4px; background: #E9EEF4; margin-top: 5px; }
.ui-card .l.s { width: 60%; }

/* stat tiles */
.mk-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stat-tile { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; background: #fff; }
.stat-tile .k { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing:.03em; text-transform: uppercase; }
.stat-tile .v { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-top: 3px; }
.stat-tile .v small { font-size: 11px; color: var(--ok); font-weight: 700; margin-left: 4px; }

/* bar chart */
.mk-chart { display: flex; align-items: flex-end; gap: 9px; height: 92px; padding-top: 8px; }
.mk-chart .bar { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg,#FFD9C2,#FFB68A); }
.mk-chart .bar.hi { background: linear-gradient(180deg,var(--orange),var(--orange-700)); }

/* list rows */
.mk-list { display: grid; gap: 8px; }
.mk-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.mk-avatar { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg,#DCE6F2,#C7D6EA); flex: none; display:grid; place-items:center; color:#5B7387; }
.mk-avatar.o { background: var(--orange-soft); }
.mk-row .g { flex: 1; }
.mk-row .g .l { height: 7px; border-radius: 4px; background: #E9EEF4; }
.mk-row .g .l:first-child { width: 65%; margin-bottom: 6px; background:#DCE4EC; }
.mk-row .g .l:last-child { width: 40%; }
.mk-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.mk-tag.ok { background: #E7F7EE; color: var(--ok); }
.mk-tag.warn { background: #FFF3E0; color: #B45309; }
.mk-tag.blue { background: #E8F0FE; color: var(--blue); }

/* mini calendar */
.mk-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.mk-cal i { aspect-ratio: 1; border-radius: 6px; background: #F1F5F9; display:block; }
.mk-cal i.on { background: var(--orange-soft); }
.mk-cal i.sel { background: linear-gradient(135deg,var(--orange),var(--orange-700)); }

/* fake button in mockups */
.mk-btn { height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg,var(--orange),var(--orange-700)); box-shadow: var(--sh-orange); }
.mk-btn.pay { background: var(--navy); box-shadow: var(--sh-sm); }
.mk-btn.pay svg { width:14px;height:14px; margin-right: 6px; }
.mk-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing:.04em; text-transform: uppercase; margin-bottom: 9px; }

/* phone */
.mk-phone { width: 210px; border-radius: 34px; border: 8px solid #0C1A29; background: #0C1A29; box-shadow: var(--sh-lg); overflow: hidden; }
.mk-phone .screen { background: #fff; border-radius: 26px; overflow: hidden; }
.mk-notch { height: 22px; position: relative; background:#fff; }
.mk-notch::after { content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:64px; height:6px; border-radius:6px; background:#0C1A29; }
.mk-app-head { padding: 4px 14px 12px; }
.mk-app-head .t { font-size: 13px; font-weight: 800; color: var(--ink); }
.mk-app-head .s { font-size: 10px; color: var(--muted); }
.mk-app-body { padding: 0 12px 14px; display: grid; gap: 9px; }

/* floating placement (desktop) */
.mk-float { position: absolute; }

/* generic feature/detail cards */
.pay-card { padding: 16px; width: 230px; }
.pay-card .amt { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pay-card .amt small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pay-card .rowline { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin-top:10px; }
.pay-ok { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--ok); font-weight:700; font-size:12px; }
.pay-ok span { width:20px;height:20px;border-radius:50%; background:#E7F7EE; display:grid;place-items:center; }
.pay-ok svg { width:12px;height:12px; }

/* ------------------------------ Cards ----------------------------------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s; height: 100%; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: #DCE4EC; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .98rem; }
.icon-badge { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange-700); margin-bottom: 18px; }
.icon-badge svg { width: 25px; height: 25px; }
.icon-badge.navy { background: #EAF0F6; color: var(--navy-2); }

.card-link { display: block; }
.card-link .go { margin-top: 16px; color: var(--orange-700); font-weight: 650; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.card-link .go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.card-link:hover .go svg { transform: translateX(4px); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* feature checklist */
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: .98rem; }
.check-list li svg { width: 20px; height: 20px; color: var(--orange); flex: none; margin-top: 2px; }
.check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 26px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { font-size: .85rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 14px; }
.chip.solid { background: var(--navy); color: #fff; border-color: transparent; }
.chip.orange { background: var(--orange-soft); color: var(--orange-700); border-color: transparent; }

/* stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-strip .n { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.stat-strip .n b { color: var(--orange); }
.stat-strip .t { color: var(--muted); font-size: .95rem; margin-top: 4px; }

/* ------------------------------ Split feature --------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { position: relative; }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding-top: 20px; }
.step::before { counter-increment: step; content: "0" counter(step); font-size: 2.4rem; font-weight: 800; color: var(--orange); opacity: .22; letter-spacing: -0.03em; }
.step h3 { font-size: 1.15rem; margin: 6px 0 8px; }
.step p { color: var(--muted); font-size: .95rem; }
.step-line { height: 2px; background: linear-gradient(90deg,var(--orange),rgba(255,106,26,.12)); border-radius: 2px; margin-top: 14px; }

/* ------------------------------ Dark band ------------------------------- */
.dark { background: radial-gradient(1000px 500px at 80% -20%, rgba(255,106,26,.22), transparent 55%), linear-gradient(180deg,var(--navy),#050F1A); color: #DCE6F0; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .lead, .dark p { color: #9FB2C4; }
.dark .eyebrow { color: #FFB68A; }
.dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow: none; }
.dark .card:hover { border-color: rgba(255,106,26,.5); background: rgba(255,255,255,.06); }
.dark .card p { color: #9FB2C4; }
.dark .icon-badge { background: rgba(255,106,26,.16); color: #FFB68A; }
.dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #DCE6F0; }

/* logo/integration row */
.logo-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.logo-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 650; color: var(--ink-2); box-shadow: var(--sh-xs); font-size: .95rem; }
.logo-chip svg { width: 20px; height: 20px; color: var(--muted); }
.dark .logo-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #DCE6F0; }
.dark .logo-chip svg { color: #7C93A8; }

/* ------------------------------ CTA band -------------------------------- */
.cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(36px,5vw,64px); background: radial-gradient(700px 400px at 85% 0%, rgba(255,106,26,.9), transparent 60%), linear-gradient(135deg,var(--navy-2),var(--navy)); color: #fff; overflow: hidden; box-shadow: var(--sh-lg); }
.cta-band h2 { color: #fff; max-width: 640px; }
.cta-band p { color: #C6D4E1; margin-top: 14px; max-width: 560px; }
.cta-band .btn-row { margin-top: 28px; }
.cta-band .btn-ghost { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.cta-band .btn-ghost:hover { --btn-bg: rgba(255,255,255,.16); --btn-bd: #fff; --btn-fg:#fff; }

/* ------------------------------ Footer ---------------------------------- */
.site-footer { background: var(--navy); color: #9FB2C4; padding-block: 64px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: #6E melon; }
.footer-about { margin-top: 16px; max-width: 320px; font-size: .95rem; line-height: 1.7; color: #8FA3B6; }
.footer-contact { margin-top: 18px; display: grid; gap: 9px; font-size: .93rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 10px; color: #B9C7D6; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 17px; height: 17px; color: var(--orange); flex: none; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: #93A6B9; font-size: .95rem; }
.footer-col a:hover { color: var(--orange); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; color: #B9C7D6; transition: .2s; }
.footer-social a:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-connect-label { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 22px; margin-bottom: 12px; font-weight: 700; }
.footer-social .soc-soon { width: 40px; height: 40px; border-radius: 11px; border: 1px dashed rgba(255,255,255,.18); display: grid; place-items: center; color: #6E819A; }
.footer-social .soc-soon svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: .88rem; color: #7C melon; }
.footer-bottom a { color: #93A6B9; } .footer-bottom a:hover { color: #fff; }

/* ------------------------------ Forms ----------------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,36px); box-shadow: var(--sh-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.field label .req { color: var(--orange-700); }
.input, .textarea, .select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--bg-panel); border: 1.5px solid var(--line); border-radius: var(--r-sm); transition: border-color .18s, box-shadow .18s, background .18s;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255,106,26,.12); }
.textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-size: .95rem; font-weight: 600; }
.form-status.ok { display: block; background: #E7F7EE; color: var(--ok); border: 1px solid #BBE9CC; }
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }

/* contact info tiles */
.info-tile { display: flex; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-xs); transition: .2s; }
.info-tile:hover { border-color: #DCE4EC; box-shadow: var(--sh-sm); transform: translateY(-2px); }
.info-tile .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-700); display: grid; place-items: center; flex: none; }
.info-tile .ic svg { width: 22px; height: 22px; }
.info-tile > span:not(.ic) { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.info-tile .k { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.info-tile .v { display: block; font-weight: 700; color: var(--ink); margin-top: 3px; word-break: break-word; }

/* ------------------------------ Page hero (inner) ----------------------- */
.page-hero { position: relative; padding-top: clamp(40px,5vw,66px); padding-bottom: clamp(40px,5vw,60px); overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(760px 380px at 92% -20%, rgba(255,106,26,.12), transparent 60%), var(--bg); }
.page-hero .lead { max-width: 640px; margin-top: 16px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--orange-700); }
.breadcrumb svg { width: 14px; height: 14px; opacity: .6; }

/* industry / demo cards */
.demo-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s, border-color .25s; height: 100%; }
.demo-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: #DCE4EC; }
.demo-card .top { padding: 22px 22px 0; display: flex; align-items: center; gap: 13px; }
.demo-card .top .icon-badge { margin-bottom: 0; }
.demo-card .cat { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.demo-card .top h3 { font-size: 1.28rem; }
.demo-card .bd { padding: 18px 22px 0; }
.demo-card .bd .prob { color: var(--muted); font-size: .96rem; }
.demo-card .bd .build { margin-top: 12px; font-size: .96rem; color: var(--ink-2); }
.demo-card .bd .build b { color: var(--ink); }
.demo-card .mods { padding: 16px 22px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.demo-card .mods .chip { font-size: .78rem; padding: 5px 11px; }
.demo-card .foot { margin-top: auto; padding: 20px 22px; display: flex; gap: 10px; }
.demo-card .foot .btn { flex: 1; padding: 11px 14px; font-size: .9rem; }

/* filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-btn { padding: 10px 18px; border-radius: var(--pill); border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: .92rem; color: var(--ink-2); transition: .18s; }
.filter-btn:hover { border-color: var(--orange); color: var(--orange-700); }
.filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.is-hidden { display: none !important; }

/* journey timeline */
.journey { display: grid; gap: 0; }
.journey .j { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; position: relative; }
.journey .j:not(:last-child)::before { content:""; position:absolute; left: 21px; top: 44px; bottom: -2px; width: 2px; background: linear-gradient(var(--orange),var(--line)); }
.journey .num { width: 44px; height: 44px; border-radius: 13px; background: var(--orange-soft); color: var(--orange-700); font-weight: 800; display: grid; place-items: center; }
.journey .j h4 { font-size: 1.06rem; margin-bottom: 5px; }
.journey .j p { color: var(--muted); font-size: .96rem; }

/* pill list of modules with icon */
.mod-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.mod { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-xs); }
.mod .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--orange-soft); color: var(--orange-700); display: grid; place-items: center; flex: none; }
.mod .ic svg { width: 20px; height: 20px; }
.mod h4 { font-size: 1rem; margin-bottom: 4px; }
.mod p { color: var(--muted); font-size: .9rem; }

/* faq / accordion-ish (static, no js needed) */
.qa { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; background: #fff; }
.qa h4 { font-size: 1.05rem; margin-bottom: 8px; }
.qa p { color: var(--muted); font-size: .96rem; }

/* value comparison */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs-col { border-radius: var(--r-lg); padding: 28px; }
.vs-col.them { background: var(--bg-soft); border: 1px solid var(--line); }
.vs-col.us { background: linear-gradient(160deg,#0C2137,#081726); color: #fff; box-shadow: var(--sh-lg); }
.vs-col h3 { margin-bottom: 16px; }
.vs-col.us h3 { color: #fff; }
.vs-list { display: grid; gap: 12px; }
.vs-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; }
.vs-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.vs-col.them .vs-list svg { color: var(--muted-2); }
.vs-col.them .vs-list li { color: var(--ink-2); }
.vs-col.us .vs-list svg { color: #FFB68A; }
.vs-col.us .vs-list li { color: #DCE6F0; }

/* ------------------------------ Flow (industry) ------------------------- */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 14px; box-shadow: var(--sh-xs); min-width: 130px; flex: 1; max-width: 170px; font-weight: 650; font-size: .92rem; color: var(--ink); }
.flow-step .fs-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange-700); }
.flow-step .fs-ic svg { width: 22px; height: 22px; }
.flow-arrow { display: grid; place-items: center; color: var(--muted-2); }
.flow-arrow svg { width: 22px; height: 22px; }

/* ------------------------------ Case studies ---------------------------- */
.cs-note { display: flex; gap: 13px; align-items: center; padding: 16px 20px; border: 1px solid #FCE3D2; background: var(--orange-tint); border-radius: var(--r); color: var(--ink-2); font-size: .96rem; }
.cs-note svg { width: 22px; height: 22px; color: var(--orange-700); flex: none; }
.cs-list { display: grid; gap: 56px; }
.cs-row { align-items: center; }
.cs-visual { max-width: 460px; margin-inline: auto; }
.cs-block { margin-top: 18px; }
.cs-k { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: .95rem; }
.cs-k svg { width: 18px; height: 18px; color: var(--orange); }
.cs-block p { color: var(--muted); margin-top: 6px; }
.footer-contact .fc-loc { display: inline-flex; align-items: center; gap: 10px; color: #8FA3B6; }

/* ------------------------------ Prepared-for chips ---------------------- */
.prep-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.prep-chip { display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; box-shadow: var(--sh-xs); font-weight: 650; color: var(--ink); transition: .2s; }
.prep-chip:hover { border-color: #DCE4EC; transform: translateY(-2px); box-shadow: var(--sh-sm); }
.prep-chip .icon-badge { width: 40px; height: 40px; margin-bottom: 0; border-radius: 11px; }
.prep-chip .icon-badge svg { width: 21px; height: 21px; }

/* ------------------------------ Live demo portfolio --------------------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.portfolio-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.portfolio-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: #DCE4EC; }
.pf-cover { display: block; }
.pf-cover .mk-topbar { border-radius: 0; }
.pf-cover-body { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #0C2137, #081726); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #fff; overflow: hidden; }
.pf-cover-body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 72% 8%, rgba(255,106,26,.32), transparent 62%); }
.pf-octo { position: relative; filter: drop-shadow(0 10px 20px rgba(0,0,0,.32)); }
.pf-cover-name { position: relative; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.pf-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; transition: transform .35s var(--ease); }
.pf-cover:hover .pf-shot-img { transform: scale(1.04); }
.pf-cover-cta { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: .8rem; color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; background: rgba(8,23,38,.82); padding: 7px 13px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-cover-cta svg { width: 15px; height: 15px; }
.pf-cover:hover .pf-cover-cta { background: var(--orange); }

/* on-page live-demo band (industry pages) */
.live-shot { display: block; max-width: 940px; margin-inline: auto; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--line); background: #fff; transition: transform .25s var(--ease); }
.live-shot:hover { transform: translateY(-4px); }
.live-shot .mk-topbar { border-radius: 0; }
.live-shot-img { display: block; width: 100%; height: auto; }
.live-shot.noimg::after { content: "See the case study →"; display: block; padding: 48px 24px; text-align: center; color: var(--orange-700); font-weight: 700; }
.pf-meta { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pf-head { display: flex; align-items: center; gap: 12px; }
.pf-head .icon-badge { margin-bottom: 0; width: 44px; height: 44px; }
.pf-head .cat { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pf-head h3 { font-size: 1.2rem; }
.pf-status { margin-left: auto; align-self: flex-start; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.pf-status.concept { background: var(--orange-soft); color: var(--orange-700); }
.pf-status.client { background: #E8F0FE; color: var(--blue); }
.pf-status.product { background: #E7F7EE; color: var(--ok); }
.portfolio-card .mods { padding: 15px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.portfolio-card .mods .chip { font-size: .78rem; padding: 5px 11px; }
.portfolio-card .btn-block { margin-top: auto; }

/* ------------------------------ Behind OcttoApps ------------------------ */
.behind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 100%; }
.behind-tile { margin: 0; min-width: 0; }
.behind-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, #F1F5F9, #E4EAF1); box-shadow: var(--sh-xs); }
.behind-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.behind-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted-2); font-weight: 650; font-size: .9rem; }
.behind-ph svg { width: 30px; height: 30px; opacity: .55; }
.behind-tile figcaption { margin-top: 12px; text-align: center; font-weight: 650; color: var(--ink); font-size: .98rem; }

/* ------------------------------ Trust band ------------------------------ */
.trust-band { border-block: 1px solid var(--line); background: var(--bg-panel); padding-block: 22px; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.trust-cell { display: flex; gap: 12px; align-items: center; }
.trust-cell .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-700); display: grid; place-items: center; flex: none; }
.trust-cell .ic svg { width: 21px; height: 21px; }
.trust-cell b { display: block; font-size: .95rem; color: var(--ink); font-weight: 700; line-height: 1.25; }
.trust-cell div span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* app-screen mock extras */
.mk-tabs { display: flex; gap: 6px; padding: 2px 12px 6px; }
.mk-tabs span { font-size: 10px; font-weight: 700; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: #F1F5F9; }
.mk-tabs span.on { background: var(--orange-soft); color: var(--orange-700); }
.mk-tabbar { display: flex; justify-content: space-around; padding: 11px 24px 13px; border-top: 1px solid var(--line-2); margin-top: 4px; }
.mk-tabbar i { width: 22px; height: 6px; border-radius: 4px; background: #E2E8F0; }
.mk-tabbar i.on { background: var(--orange); }

/* ==========================================================================
   HOMEPAGE v2 — cinematic / enterprise
   ========================================================================== */
.btn-glass { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-glass:hover { --btn-bg: rgba(255,255,255,.16); --btn-bd: #fff; transform: translateY(-2px); }
.grad { background: linear-gradient(100deg, #FF9A4D, #FF6A1A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grid-bg { position: relative; }
/* Clean premium background — soft orange radial glow, NO grid/graph lines */
.grid-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(920px 500px at 50% -6%, rgba(255,106,26,.055), transparent 62%); }
.grid-bg > .container { position: relative; z-index: 1; }

/* ---- Cinematic dark hero ---- */
.xhero { position: relative; overflow: hidden; background: #06121F; color: #fff; padding-top: clamp(120px, 16vh, 200px); padding-bottom: clamp(90px, 14vh, 180px); }
.xhero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(255,106,26,.30), transparent 60%),
    radial-gradient(700px 500px at 8% 90%, rgba(37,99,235,.14), transparent 55%),
    linear-gradient(180deg, #071523, #06121F); }
.xhero-bg::after { content: none; }
@keyframes gridpan { from { background-position: 0 0; } to { background-position: 54px 54px; } }
.xhero-inner { position: relative; z-index: 2; max-width: 960px; }
.xbadge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--pill); background: rgba(255,255,255,.05); font-size: .84rem; font-weight: 600; color: #C6D4E1; }
.xhero-h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; color: #fff; margin-top: 22px; }
.xhero-sub { font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: #9FB2C4; line-height: 1.6; margin-top: 22px; max-width: 680px; }
.xhero .btn-row { margin-top: 32px; }
.xhero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.xhero-chips span { font-size: .82rem; font-weight: 600; color: #C6D4E1; padding: 7px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--pill); background: rgba(255,255,255,.04); }
.xhero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; background: linear-gradient(180deg, transparent, #fff); }

/* ---- Cinematic scroll media ---- */
.cine { position: relative; background: #fff; }
.cine-track { height: 280vh; position: relative; }
.cine-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cine-frame { position: relative; width: min(1240px, 94vw); aspect-ratio: 16 / 9; border-radius: 44px; overflow: hidden; box-shadow: var(--sh-lg); will-change: transform, border-radius; transform: scale(.7); }
.cine-media { position: absolute; inset: 0; }
.cine-img, .cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-img { z-index: 0; animation: kenburns 26s ease-in-out infinite alternate; }
.cine-video { z-index: 1; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-2%, -2%, 0); } }
.cine-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(6,18,31,.10) 30%, rgba(6,18,31,.55) 70%, rgba(6,18,31,.86)); }
.cine-parallax { position: absolute; inset: 0; z-index: 3; }
.cine-float { position: absolute; margin: 0; width: clamp(150px, 20vw, 260px); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18); background: #0C1A29; will-change: transform; }
.cine-float img { display: block; width: 100%; height: auto; }
.cine-float-bar { display: flex; gap: 4px; padding: 7px 9px; background: #0C1A29; }
.cine-float-bar i { width: 7px; height: 7px; border-radius: 50%; background: #33475B; }
.cine-float.pa { top: 12%; left: 5%; } .cine-float.pb { bottom: 12%; left: 12%; } .cine-float.pc { top: 20%; right: 6%; }
.cine-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 5vw, 60px); z-index: 4; }
.cine-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFB68A; }
.cine-h2 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); color: #fff; font-weight: 800; letter-spacing: -0.03em; margin-top: 12px; }
.cine-p { color: #C6D4E1; font-size: clamp(1rem, 1.5vw, 1.25rem); margin-top: 12px; max-width: 620px; }

/* ---- System Builder ---- */
.sysb-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 4vw, 60px); margin-top: 50px; }
.sysb-col { display: grid; gap: 16px; }
.sysb-mod { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 650; }
.sysb-col:last-child .sysb-mod { flex-direction: row-reverse; text-align: right; }
.sysb-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,106,26,.16); color: #FFB68A; display: grid; place-items: center; flex: none; }
.sysb-ic svg { width: 20px; height: 20px; }
.sysb-hub { position: relative; display: grid; place-items: center; width: 190px; height: 190px; }
.sysb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,106,26,.3); animation: pulsering 3.4s ease-out infinite; }
.sysb-ring.r2 { inset: 26px; border-color: rgba(255,106,26,.18); animation-delay: 1.2s; }
@keyframes pulsering { 0% { transform: scale(.82); opacity: .8; } 100% { transform: scale(1.15); opacity: 0; } }
.sysb-core { position: relative; z-index: 2; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #14314c, #0A1B2E); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; gap: 4px; text-align: center; color: #fff; font-weight: 800; font-size: .82rem; line-height: 1.2; box-shadow: 0 0 60px rgba(255,106,26,.28); }
.sysb-core img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }

/* ---- Services big media cards ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .24s var(--ease), box-shadow .28s, border-color .25s; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: #DCE4EC; }
.svc-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #10263C, #081726); color: #FFB68A; overflow: hidden; }
.svc-media::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; }
.svc-glow { position: absolute; inset: 0; background: radial-gradient(280px 150px at 72% 22%, rgba(255,106,26,.42), transparent 62%); }
.svc-media svg { position: relative; z-index: 1; width: 56px; height: 56px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); transition: transform .3s var(--ease); }
.svc-card:hover .svc-media svg { transform: scale(1.14) translateY(-2px); }
.svc-txt { display: block; padding: 22px 24px 26px; }
.svc-txt h3 { font-size: 1.22rem; margin-bottom: 8px; }
.svc-txt p { color: var(--muted); font-size: .97rem; }
.svc-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--orange-700); font-weight: 650; font-size: .92rem; }
.svc-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.svc-card:hover .svc-more svg { transform: translateX(4px); }

/* ---- Proof big cards ---- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proof-card { background: linear-gradient(165deg, #fff, #F7F9FC); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s; }
.proof-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.proof-ic { width: 54px; height: 54px; border-radius: 15px; background: var(--navy); color: #FFB68A; display: grid; place-items: center; margin-bottom: 18px; }
.proof-ic svg { width: 26px; height: 26px; }
.proof-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.proof-card p { color: var(--muted); }

/* ---- Live demo wall (horizontal) ---- */
.demo-wall-sec { padding-block: clamp(64px, 9vw, 118px); }
.wall-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px calc((100vw - min(1200px, 100vw - 48px)) / 2) 26px; margin-top: 40px; scrollbar-width: thin; }
.wall-track { display: flex; gap: 24px; width: max-content; }
.wall-card { scroll-snap-align: start; width: 380px; max-width: 84vw; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.wall-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--orange); }
.wall-card .pf-cover-body { aspect-ratio: 16 / 10; }
.wall-card:hover .pf-shot-img { transform: scale(1.06); }
.wall-meta { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.wall-top { display: flex; align-items: center; gap: 11px; }
.wall-top .icon-badge { margin-bottom: 0; width: 42px; height: 42px; }
.wall-top .cat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wall-top h3 { font-size: 1.15rem; }
.wall-card .mods { padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.wall-card .mods .chip { font-size: .76rem; padding: 5px 10px; }
.wall-btn { margin-top: 16px; max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transition: max-height .3s var(--ease), opacity .25s, padding .3s; }
.wall-card:hover .wall-btn, .wall-card:focus-within .wall-btn { max-height: 60px; opacity: 1; padding-top: 13px; padding-bottom: 13px; }

/* ---- Industry transform cards ---- */
.itc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.itc-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: #DCE4EC; }
.itc-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, #0C2137, #081726); }
.itc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s var(--ease); }
.itc-card:hover .itc-cover img { transform: scale(1.06); }
.itc-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #FFB68A; }
.itc-ph svg { width: 46px; height: 46px; opacity: .85; }
.itc-cover.noimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(300px 160px at 70% 15%, rgba(255,106,26,.28), transparent 60%); }
.itc-live { position: absolute; bottom: 10px; right: 10px; z-index: 2; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(8,23,38,.82); padding: 6px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.itc-live svg { width: 13px; height: 13px; }
.itc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.itc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.itc-head .icon-badge { margin-bottom: 0; width: 44px; height: 44px; }
.itc-head h3 { font-size: 1.18rem; }
.itc-body p { color: var(--muted); font-size: .96rem; flex: 1; }
.itc-body .btn-link { margin-top: 14px; }

/* ---- Before / After ---- */
.ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin-top: 46px; }
.ba-col { border-radius: var(--r-lg); padding: 30px; }
.ba-before { background: var(--bg-soft); border: 1px solid var(--line); }
.ba-after { background: linear-gradient(160deg, #0C2137, #081726); box-shadow: var(--sh-lg); }
.ba-tag { display: inline-block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }
.ba-before .ba-tag { background: #EAF0F6; color: var(--muted); }
.ba-after .ba-tag { background: rgba(255,106,26,.18); color: #FFB68A; }
.ba-list { display: grid; gap: 13px; }
.ba-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 1.02rem; }
.ba-list svg { width: 21px; height: 21px; flex: none; margin-top: 1px; }
.ba-before .ba-list li { color: var(--muted); } .ba-before .ba-list svg { color: var(--muted-2); }
.ba-after .ba-list li { color: #fff; } .ba-after .ba-list svg { color: #FFB68A; }
.ba-arrow { display: grid; place-items: center; color: var(--orange); }
.ba-arrow svg { width: 34px; height: 34px; }

/* ---- Home case study cards ---- */
.csx-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s; display: flex; flex-direction: column; }
.csx-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.csx-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, #0C2137, #081726); }
.csx-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s var(--ease); }
.csx-card:hover .csx-cover img { transform: scale(1.05); }
.csx-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #FFB68A; }
.csx-ph svg { width: 44px; height: 44px; }
.csx-badge { position: absolute; bottom: 10px; left: 10px; z-index: 2; font-size: .74rem; font-weight: 700; color: #fff; background: rgba(8,23,38,.82); padding: 6px 11px; border-radius: 999px; }
.csx-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.csx-body h3 { font-size: 1.12rem; line-height: 1.35; }
.csx-body p { color: var(--muted); font-size: .95rem; margin-top: 10px; flex: 1; }
.csx-body .mods { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.csx-body .mods .chip { font-size: .76rem; padding: 5px 10px; }

/* ---- Insights ---- */
.ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.insight-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s, border-color .25s; }
.insight-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: #DCE4EC; }
.insight-cover { display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #10263C, #081726); position: relative; overflow: hidden; }
.insight-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px 140px at 70% 20%, rgba(255,106,26,.30), transparent 60%); }
.insight-ic { position: relative; width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.08); color: #FFB68A; display: grid; place-items: center; }
.insight-ic svg { width: 28px; height: 28px; }
.insight-body { padding: 20px; }
.insight-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-700); }
.insight-body h3 { font-size: 1.06rem; line-height: 1.35; margin: 8px 0 12px; }

/* insights page articles */
.ia-wrap { max-width: 820px; display: grid; gap: 30px; }
.insight-article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh-xs); }
.ia-head { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 16px; }
.ia-head .icon-badge { margin-bottom: 0; }
.ia-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 4px; }
.ia-body p { color: var(--ink-2); margin-bottom: 14px; line-height: 1.75; }
.ia-cta { margin-top: 6px; }

/* ---- Final CTA ---- */
.cta-final { text-align: center; }
.cta-final .eyebrow, .cta-final .btn-row { justify-content: center; }
.cta-final h2, .cta-final p { margin-inline: auto; }
.cta-octo { margin: 0 auto 18px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
.cta-meta { margin-top: 26px; color: #9FB2C4; font-size: .95rem; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.cta-meta svg { width: 16px; height: 16px; color: var(--orange); vertical-align: middle; }

/* ---- Homepage responsive ---- */
@media (max-width: 1024px) {
  .svc-grid, .proof-grid, .insight-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cine-track { height: auto; }
  .cine-sticky { position: relative; height: auto; padding: 40px 0; }
  .cine-frame { transform: none !important; aspect-ratio: 4 / 3; border-radius: 22px; }
  .cine-float { display: none; }
  .sysb-stage { grid-template-columns: 1fr; gap: 14px; }
  .sysb-col:last-child .sysb-mod { flex-direction: row; text-align: left; }
  .sysb-hub { margin: 6px auto; }
  .svc-grid, .proof-grid, .insight-grid { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); }
}

/* ------------------------------ Reveal animation ------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } .reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; }
.reveal[style*="--d"] { transition-delay: calc(var(--d) * 70ms); }

/* ------------------------------ Utilities ------------------------------- */
.hide { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0{margin-top:0}.mt-s{margin-top:10px}.mt-m{margin-top:22px}.mt-l{margin-top:40px}
.maxw-720{max-width:720px}.maxw-640{max-width:640px}

/* skip link */
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 12px; }

/* ------------------------------ Responsive ------------------------------ */
@media (min-width: 1025px) { .mockups { min-height: 500px; } }
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mockups { min-height: 0; margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .mockups .mk-window { width: 100%; max-width: 560px; }
  .mk-float { position: relative !important; inset: auto !important; width: auto !important; max-width: 340px; }
  .mockups .dash-float, .mockups .pay-card { width: 300px !important; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .stat-strip { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .trust-row { grid-template-columns: repeat(2,1fr); gap: 18px 24px; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 84px 14px auto 14px; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(8,23,38,.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-shadow: 0 24px 60px rgba(8,23,38,.42); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s var(--ease); }
  body.nav-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 14px; font-size: 1.02rem; border-radius: 12px; color: #DCE6F0; }
  .nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.08); color: #fff; }
  .nav-links > .btn { display: inline-flex; margin-top: 10px; }
  .nav-toggle { display: inline-flex; }
  .nav-right .btn:not(.nav-toggle) { display: none; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .vs { grid-template-columns: 1fr; }
  .mod-grid, .check-grid { grid-template-columns: 1fr; }
  .demo-card .foot { flex-direction: column; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .behind-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .hero .btn-row { gap: 10px; }
  .mk-float { position: relative !important; inset: auto !important; margin: 0 auto; }
  .flow { flex-direction: column; align-items: stretch; }
  .flow-step { max-width: none; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* RTL scaffold — future Arabic support */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .eyebrow::before { }
[dir="rtl"] .btn-link svg, [dir="rtl"] .card-link .go svg, [dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }
[dir="rtl"] .journey .j:not(:last-child)::before { left: auto; right: 21px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card:hover, .demo-card:hover { transform: none !important; }
}

/* ==========================================================================
   WHITE-FIRST THEME OVERRIDES — white backgrounds, orange accents, dark text
   (Appended last so it wins. Keeps only media/screenshots dark.)
   ========================================================================== */
/* Clean white header BAR (Apple/Amazon feel — no dark pill) */
.site-header { background: rgba(255,255,255,.90); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); padding-block: 0; }
.site-header .nav { background: transparent; border: 0; border-radius: 0; box-shadow: none; height: 74px; padding: 0; }
.site-header.scrolled { box-shadow: 0 4px 22px rgba(10,27,46,.07); }
.site-header.scrolled .nav { background: transparent; box-shadow: none; }
.brand, .brand span { color: var(--ink); }
.brand small { color: var(--muted-2); }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--orange-700); background: var(--orange-soft); }
.nav-links a.active { color: var(--orange-700); background: var(--orange-soft); }
.lang { border-color: var(--line); color: var(--ink-2); background: #fff; }
.lang:hover { border-color: var(--orange); color: var(--orange-700); }
.nav-toggle { border-color: var(--line); color: var(--ink); background: #fff; }
@media (max-width: 860px) {
  .nav-links { inset: 74px 0 auto 0; background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: var(--sh); padding: 12px var(--gutter) 22px; }
  .nav-links a { color: var(--ink-2); }
  .nav-links a:hover, .nav-links a.active { background: var(--orange-soft); color: var(--orange-700); }
}

/* Hero → white */
.xhero { background: #fff; color: var(--ink); }
.xhero-bg { background: radial-gradient(880px 520px at 84% 6%, rgba(255,106,26,.12), transparent 60%), radial-gradient(620px 460px at -6% 10%, rgba(37,99,235,.05), transparent 55%), #fff; }
.xhero-bg::after { background-image: linear-gradient(rgba(10,27,46,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,27,46,.045) 1px, transparent 1px); }
.xbadge { border-color: var(--line); background: #fff; color: var(--ink-2); box-shadow: var(--sh-xs); }
.xhero-h1 { color: var(--ink); }
.xhero-sub { color: var(--muted); }
.xhero-chips span { border-color: var(--line); background: #fff; color: var(--ink-2); }

/* Any remaining dark section → white (safety net incl. Arabic comparison) */
.section.dark, .dark { background: #fff; }
.dark h1, .dark h2, .dark h3 { color: var(--ink); }
.dark .lead, .dark p { color: var(--muted); }
.dark .eyebrow { color: var(--orange-700); }
.dark .card { background: #fff; border-color: var(--line); }
.dark .card p { color: var(--muted); }
.dark .logo-chip { background: #fff; border-color: var(--line); color: var(--ink-2); }
.vs-col.us { background: linear-gradient(160deg, var(--orange-tint), #FFFDFB); color: var(--ink); border: 1px solid #F6E0D0; box-shadow: var(--sh); }
.vs-col.us h3 { color: var(--ink); }
.vs-col.us .vs-list li { color: var(--ink-2); }
.vs-col.us .vs-list svg { color: var(--orange); }

/* System Builder → white */
.sysb.dark, .section.dark.sysb { background: #fff; }
.sysb-mod { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-xs); }
.sysb-ic { background: var(--orange-soft); color: var(--orange-700); }
.sysb-core { background: #fff; border: 2px solid var(--orange); color: var(--ink); box-shadow: 0 12px 34px rgba(255,106,26,.20); }
.sysb-core img { filter: none; }

/* CTA bands → white with orange accents */
.cta-band { background: linear-gradient(160deg, var(--orange-tint), #FFFDFB); border: 1px solid #F6E0D0; color: var(--ink); box-shadow: var(--sh); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--muted); }
.cta-band .eyebrow { color: var(--orange-700); }
.cta-band .btn-ghost { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--line); }
.cta-band .btn-ghost:hover { --btn-bd: var(--orange); --btn-fg: var(--orange-700); }
.cta-meta { color: var(--muted); }
.cta-octo { filter: none; }

/* Before / After → light (orange accent for the After panel) */
.ba-after { background: #fff; border: 1.5px solid var(--orange); box-shadow: var(--sh); }
.ba-after .ba-tag { background: var(--orange-soft); color: var(--orange-700); }
.ba-after .ba-list li { color: var(--ink); }
.ba-after .ba-list svg { color: var(--orange); }

/* Footer → white */
.site-footer { background: #fff; color: var(--muted); border-top: 1px solid var(--line); }
.site-footer .brand, .site-footer .brand span { color: var(--ink); }
.site-footer .brand small { color: var(--muted-2); }
.footer-about { color: var(--muted); }
.footer-contact a, .footer-contact .fc-loc { color: var(--ink-2); }
.footer-contact a:hover { color: var(--orange-700); }
.footer-col h4 { color: var(--ink); }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--orange-700); }
.footer-connect-label { color: var(--ink); }
.footer-social a { border-color: var(--line); color: var(--ink-2); }
.footer-social a:hover { border-color: var(--orange); color: var(--orange-700); }
.footer-social .soc-soon { border-color: var(--line); color: var(--muted-2); }
.footer-bottom { border-top-color: var(--line); color: var(--muted); }
.site-footer .brand-logo { filter: none; opacity: 1; }

/* Card media placeholders → light (screenshots still fill the ones that have them) */
.pf-cover-body { background: linear-gradient(150deg, var(--orange-tint), #fff); }
.pf-cover-name { color: var(--ink); }
.insight-cover { background: linear-gradient(150deg, #FFF3EA, #fff); }
.insight-cover::before { background: radial-gradient(240px 140px at 70% 20%, rgba(255,106,26,.16), transparent 62%); }
.insight-ic { background: var(--orange-soft); color: var(--orange-700); }
.itc-cover, .csx-cover { background: linear-gradient(150deg, var(--orange-tint), #fff); }
.itc-ph, .csx-ph { color: var(--orange-700); }
.itc-cover.noimg::after { background: radial-gradient(300px 160px at 70% 15%, rgba(255,106,26,.16), transparent 60%); }

/* Company Profile card */
.behind-grid { align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .behind-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.behind-ph small { display: block; font-size: .76rem; color: var(--muted-2); font-weight: 500; margin-top: 4px; }
.bp-card { min-width: 0; max-width: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s; }
.bp-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.bp-card .behind-media { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.bp-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.bp-body h3 { font-size: 1.14rem; margin-bottom: 8px; }
.bp-body p { color: var(--muted); font-size: .93rem; margin-bottom: 16px; flex: 1; }
.bp-body .btn { margin-top: auto; }

/* Cinematic section → clean white (media fades into the page, dark text) */
.cine-scrim { background: linear-gradient(180deg, transparent 38%, rgba(255,255,255,.72) 76%, #fff) !important; }
.cine-h2 { color: var(--ink) !important; text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.cine-p { color: var(--ink-2) !important; }
.cine-eyebrow { color: var(--orange-700) !important; }
.cine { background: #fff; }
section[id] { scroll-margin-top: 96px; }
.anchor { position: absolute; }

/* Navy only for text — recolour prominent navy badge backgrounds to orange accents */
.proof-ic { background: var(--orange-soft); color: var(--orange-700); }
.icon-badge.navy { background: var(--orange-soft); color: var(--orange-700); }
.pf-cover-cta { background: var(--orange); }
.csx-badge, .itc-live { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: var(--sh-xs); }
.demo-card .icon-badge, .card .icon-badge { }

/* ===== Real logo sizing — clean transparent HORIZONTAL lockup (no badge/box) ===== */
.brand-logo { height: 40px; width: auto; display: block; background: none; border: 0; border-radius: 0; box-shadow: none; }
.site-footer .brand-logo { height: 44px; filter: none; opacity: 1; background: none; border: 0; box-shadow: none; }
.brand { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ===== Cine hero: clean, text LEFT · demos RIGHT · no overlap · light overlay ===== */
.cine-media { background: linear-gradient(160deg, #EEF3F9, #ffffff); }
.cine-scrim { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 34%, rgba(255,255,255,.20) 60%, transparent 82%) !important; }
.cine-overlay { left: 0; right: auto; top: 0; bottom: 0; width: 54%; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(28px, 5vw, 64px); }
.cine-h2 { text-shadow: none; }
.cine-float.pa { top: 11%; right: 5%; left: auto; bottom: auto; }
.cine-float.pb { top: 39%; right: 28%; left: auto; bottom: auto; }
.cine-float.pc { bottom: 11%; right: 6%; left: auto; top: auto; }
.cine-float { box-shadow: 0 24px 60px rgba(10,27,46,.22); border-color: var(--line); }
@media (max-width: 860px) {
  .cine-overlay { position: static; width: 100%; padding: 24px; }
  .cine-scrim { background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.85)) !important; }
}

/* ===== Insights knowledge hub ===== */
.featured-insight { display: grid; grid-template-columns: 1.05fr 1fr; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-xs); transition: transform .22s var(--ease), box-shadow .25s; }
.featured-insight:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.fi-cover { position: relative; min-height: 300px; display: grid; place-items: center; background: linear-gradient(150deg, #FFF3EA, #fff); }
.fi-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px 200px at 68% 22%, rgba(255,106,26,.20), transparent 62%); }
.fi-cover .insight-ic { position: relative; width: 78px; height: 78px; border-radius: 20px; background: var(--orange-soft); color: var(--orange-700); display: grid; place-items: center; }
.fi-cover .insight-ic svg { width: 38px; height: 38px; }
.fi-badge { position: absolute; top: 16px; left: 16px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-700); background: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: var(--sh-xs); }
.fi-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.fi-body h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin: 8px 0 12px; }
.fi-body p { color: var(--muted); margin-bottom: 20px; }
.fi-body .btn { align-self: flex-start; }
.insight-card .ins-sum { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.insight-card .btn-link { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-700); font-weight: 650; font-size: .9rem; }
@media (max-width: 860px) { .featured-insight { grid-template-columns: 1fr; } .fi-cover { min-height: 190px; } }

/* ===== JobMe device frames (clean iPhone mockup holding REAL screenshots) ===== */
.jobme-phone { width: 220px; }
.jobme-phone .screen { position: relative; aspect-ratio: 9 / 19; }
.jobme-phone .mk-notch { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.phone-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.jobme-shot { margin: 0; }
.jobme-shot figcaption { margin-top: 14px; text-align: center; font-weight: 650; color: var(--ink); }
.jobme-panel { aspect-ratio: 16 / 11; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(150deg, #FFF3EA, #fff); color: var(--muted); font-weight: 650; }

/* ===== Premium footer (v15) ===== */
.site-footer { position: relative; padding-block: 60px 30px; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, #FF9A4D 42%, transparent 82%); }
.footer-brandcol { max-width: 430px; }
.footer-brandcol .brand { margin-bottom: 4px; }
.site-footer .footer-about { font-size: .97rem; line-height: 1.64; color: var(--ink-2); margin: 18px 0 0; letter-spacing: -0.004em; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.footer-badges span { font-size: .72rem; font-weight: 700; letter-spacing: .012em; color: var(--orange-700);
  background: var(--orange-soft); border: 1px solid rgba(255,106,26,.22); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.footer-tagline { font-size: .92rem; font-weight: 600; color: var(--muted); margin: 15px 0 22px; letter-spacing: -0.006em; }
.footer-tagline span { color: var(--orange-700); font-weight: 700; }
.footer-grid { gap: 40px 48px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ===== JobMe branded cover (honest — no fake screenshot) ===== */
.jobme-cover { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(150deg, #FFF3EA, #fff); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; box-shadow: var(--sh-xs);
  transition: transform .22s var(--ease), box-shadow .25s; text-align: center; padding: 26px; }
.jobme-cover:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.jc-title { font-weight: 800; font-size: 1.55rem; color: var(--ink); letter-spacing: -0.02em; }
.jc-sub { font-size: .86rem; color: var(--muted); font-weight: 600; max-width: 250px; line-height: 1.45; }

/* ===== Demo-card premium mockup layer (never a bare icon; survives hotlink failure) ===== */
.itc-mock { position: absolute; inset: 0; padding: 18px 18px 0; display: flex; align-items: flex-start;
  justify-content: center; background: linear-gradient(150deg, var(--orange-tint), #fff); }
.itc-mock .mk { width: 100%; box-shadow: var(--sh); }
.itc-cover img { z-index: 1; }
.itc-card:hover .itc-mock .mk { transform: translateY(-2px); transition: transform .3s var(--ease); }

/* ===== White-premium: convert remaining dark section decor to light (v15) ===== */
/* Services media header (homepage) → light with subtle grid + orange glow */
.svc-media { background: linear-gradient(150deg, #FFF3EA, #ffffff) !important; color: var(--orange-700) !important; }
.svc-media::before { opacity: .5 !important;
  background-image: linear-gradient(rgba(10,27,46,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,27,46,.05) 1px, transparent 1px) !important; }
.svc-media::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(280px 150px at 72% 18%, rgba(255,106,26,.16), transparent 62%); }
/* Cine floating demo frames → white frame + light bar */
.cine-float { background: #fff !important; border-color: var(--line) !important; box-shadow: 0 22px 54px rgba(10,27,46,.18) !important; }
.cine-float-bar { background: #F1F5F9 !important; }
.cine-float-bar i { background: #C9D6E2 !important; }

/* ===== Insights covers → premium editorial/analytics motif (no bare icon box) ===== */
.insight-cover, .fi-cover { position: relative; overflow: hidden; }
.ins-motif { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20120'%20preserveAspectRatio='none'%3E%3Cpolyline%20points='0,96%2043,74%2086,84%20129,46%20172,60%20215,28%20258,40%20300,14'%20fill='none'%20stroke='%23FF6A1A'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='129'%20cy='46'%20r='4.5'%20fill='%23FF6A1A'/%3E%3Ccircle%20cx='215'%20cy='28'%20r='4.5'%20fill='%23FF6A1A'/%3E%3C/svg%3E") no-repeat center bottom / 94% 90%; }
.ins-motif::before { content: ""; position: absolute; left: 9%; top: 20%; width: 38%; height: 6px; border-radius: 4px;
  background: rgba(10,27,46,.12); box-shadow: 0 15px 0 rgba(10,27,46,.08), 0 30px 0 rgba(10,27,46,.055); }
.insight-cover .insight-ic, .fi-cover .insight-ic, .fi-badge { position: relative; z-index: 1; }

/* ===== v16: REAL local app screenshots shown in clean device frames ===== */
/* Homepage hero — floating phones over clean white (drop the browser frame) */
.cine-float.cine-phone { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; width: clamp(120px, 14vw, 178px); }
.cine-float.cine-phone .cine-float-bar { display: none !important; }
.cine-float.cine-phone .jobme-phone { width: 100%; box-shadow: 0 26px 60px rgba(10,27,46,.30); }
.cine-float.cine-phone .jobme-phone .screen { aspect-ratio: 9 / 19; position: relative; }

/* Industry card cover — real app screen in a phone on a tinted stage */
.itc-phonewrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 20px; background: linear-gradient(150deg, var(--orange-tint), #fff); overflow: hidden; }
.itc-phonewrap .jobme-phone { width: min(52%, 168px); }
.itc-card:hover .itc-phonewrap .jobme-phone { transform: translateY(-3px); transition: transform .3s var(--ease); }

/* Portrait screenshots inside landscape browser covers → align to the app header */
.pf-shot-img, .live-shot-img { object-position: top !important; }

/* Branded live-demo preview (used when no local screenshot; still links to the live site) */
.live-brand { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: linear-gradient(150deg, var(--orange-tint), #fff); text-align: center; padding: 22px; }
.live-brand .lb-name { font-weight: 800; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.02em; }
.live-brand small { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* v17: octopus-free decorative spots → clean typographic */
.sysb-core span { font-size: .98rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.01em; color: var(--ink); }
.pf-cover-name { font-size: 1.55rem; }
.pf-cover-body { gap: 14px; }

/* v17: Case Studies — honest spec card (replaces repeated fake metrics) + JobMe product highlight */
.spec-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--sh-xs); max-width: 440px; margin-inline: auto; }
.spec-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 6px; }
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-2); }
.spec-tag + .spec-row { border-top: 0; }
.spec-k { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.spec-k svg { width: 17px; height: 17px; color: var(--orange-700); flex: none; }
.spec-v { color: var(--ink); font-weight: 700; font-size: .94rem; text-align: right; }
.cs-product-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: .74rem; font-weight: 700;
  color: #0F7B3E; background: #E7F6EC; border: 1px solid #BFE6CC; padding: 4px 11px; border-radius: 999px; vertical-align: middle; }
.cs-product-badge svg { width: 13px; height: 13px; }
.cs-row--product { border: 1px solid #E6EDF4; border-radius: var(--r-xl); padding: clamp(20px, 3vw, 36px);
  background: linear-gradient(180deg, #FCFDFF, #F5F9FE); box-shadow: var(--sh); }
.cs-phone-link { display: block; }

/* ============ v16: clean white hero (no skyline/grid), full phones, branding, gradient buttons ============ */
/* Hero background → pure clean white premium. No photo, no fake skyline, no grid pattern. */
.cine-img { display: none !important; }
.cine-media { background: radial-gradient(760px 460px at 80% 14%, rgba(255,106,26,.05), transparent 62%), linear-gradient(180deg, #FFFFFF, #F8FAFC 60%, #FFFFFF) !important; }
.cine-media::before, .cine-media::after { display: none !important; }
.cine-scrim { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.7) 40%, rgba(255,255,255,.18) 66%, transparent 86%) !important; }

/* Phone frames: show the FULL app screen (no crop, no forced device notch) */
.jobme-phone .screen { aspect-ratio: auto !important; overflow: hidden; }
.jobme-phone .mk-notch { display: none !important; }
.jobme-phone .phone-shot-img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; display: block; }
.jobme-phone picture, .mk-phone picture { display: contents; }

/* Hero phones → balanced, aligned trio on the right */
.cine-float.cine-phone { width: clamp(132px, 13.5vw, 172px) !important; }
.cine-float.cine-phone.pa { top: 15% !important; right: 33% !important; left: auto !important; bottom: auto !important; z-index: 1; }
.cine-float.cine-phone.pb { top: 7% !important; right: 17% !important; left: auto !important; bottom: auto !important; z-index: 3; }
.cine-float.cine-phone.pc { top: 21% !important; right: 2% !important; left: auto !important; bottom: auto !important; z-index: 2; }
.cine-brandtag { position: absolute; bottom: 13%; right: 9%; z-index: 6; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 7px; box-shadow: var(--sh);
  font-weight: 700; font-size: .82rem; color: var(--ink); }
.cine-brandtag img { border-radius: 6px; }
@media (max-width: 880px) { .cine-brandtag { display: none; } }

/* System Builder core → clean corporate wordmark (no cartoon mark) */
.sysb-core { gap: 3px; }
.sysb-core-mark { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.sysb-core-sub { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-700); }

/* Services teaser media → remove graph-paper grid + AI glow, keep clean premium */
.svc-media::before, .svc-media::after { display: none !important; }
.svc-media { background: linear-gradient(150deg, #FFF6EF, #ffffff) !important; }

/* Premium orange-gradient primary buttons */
.btn-primary { background-image: linear-gradient(180deg, #FF7C30, #F0600B) !important; border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(255,106,26,.30) !important; }
.btn-primary:hover { background-image: linear-gradient(180deg, #FF8B45, #FF6A1A) !important; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* About office/meeting photos use <picture> for WebP — img still fills the media box */
.behind-media picture { display: contents; }
.behind-tile .behind-media { aspect-ratio: 4 / 3; }

/* Featured service card → spans 2 columns, real product preview + outcome copy */
.svc-featured { grid-column: span 2; display: grid; grid-template-columns: 1.12fr 1fr; align-items: stretch; }
.svc-feat-media { position: relative; background: linear-gradient(150deg, var(--orange-tint), #fff); padding: 26px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.svc-feat-media .mk { width: 100%; box-shadow: var(--sh-lg); transition: transform .35s var(--ease); }
.svc-featured:hover .svc-feat-media .mk { transform: translateY(-4px) scale(1.02); }
.svc-feat-txt { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
.svc-feat-txt h3 { font-size: 1.7rem; letter-spacing: -0.02em; margin: 12px 0 12px; }
.svc-feat-txt p { color: var(--muted); font-size: 1.02rem; line-height: 1.62; }
.svc-feat-tag { display: inline-flex; align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-soft); padding: 6px 12px; border-radius: 999px; }
.svc-feat-txt .svc-more { margin-top: 22px; font-size: 1.02rem; }
@media (max-width: 860px) { .svc-featured { grid-column: span 1; grid-template-columns: 1fr; } .svc-feat-txt { padding: 24px; } }
/* Stronger, more premium hover on every service card */
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(10,27,46,.16); border-color: #FFD9C2; }
.svc-card:hover .svc-glow { opacity: 1; }
.svc-glow { transition: opacity .3s var(--ease); }

/* Company Profile card → the WHOLE card links to the PDF; cover thumbnail + hover zoom + shadow */
.bp-card--link { text-decoration: none; color: inherit; cursor: pointer; }
.bp-media { overflow: hidden; position: relative; }
.bp-media img { transition: transform .45s var(--ease); }
.bp-card--link:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.bp-card--link:hover .bp-media img { transform: scale(1.06); }
.bp-badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; box-shadow: var(--sh-sm); }
.bp-badge svg { width: 12px; height: 12px; }
.bp-card--link .btn { pointer-events: none; }

/* ===== v16: Custom dropdown — premium, no native <select> ===== */
.cdrop { position: relative; width: 100%; }
.cdrop-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 15px 18px; text-align: left;
  font-size: 1rem; color: var(--ink); cursor: pointer; transition: border-color .18s, box-shadow .18s; box-shadow: var(--sh-xs); }
.cdrop-btn:hover { border-color: #FFC49E; }
.cdrop.open .cdrop-btn { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,26,.15); }
.cdrop-val { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdrop-val.is-placeholder { color: var(--muted-2); font-weight: 500; }
.cdrop-chev { color: var(--orange-700); transition: transform .22s var(--ease); flex: none; }
.cdrop.open .cdrop-chev { transform: rotate(180deg); }
.cdrop-menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 70;
  background: #fff; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 26px 64px rgba(10,27,46,.20);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: top center;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.cdrop.open .cdrop-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.cdrop-scroll { max-height: 322px; overflow-y: auto; padding: 8px; }
.cdrop-opt { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-radius: 12px;
  padding: 11px 12px; text-align: left; font-size: .98rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.cdrop-opt:hover { background: #F6F8FB; }
.cdrop-opt.selected { background: var(--orange-soft); color: var(--orange-700); }
.cdrop-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-700);
  display: grid; place-items: center; flex: none; }
.cdrop-ic svg { width: 18px; height: 18px; }
.cdrop-opt.selected .cdrop-ic { background: var(--orange); color: #fff; }
.cdrop-optlabel { flex: 1; }
.cdrop-check { color: var(--orange); opacity: 0; flex: none; transition: opacity .15s; }
.cdrop-opt.selected .cdrop-check { opacity: 1; }

/* ===== Premium contact section — 5 cards + trust + social ===== */
.contact-final { padding-block: clamp(72px, 10vw, 120px); }
.cc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.cc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 18px; box-shadow: var(--sh-xs);
  text-decoration: none; color: inherit; transition: transform .24s var(--ease), box-shadow .28s, border-color .25s; }
.cc-card:hover { transform: translateY(-7px); box-shadow: 0 26px 54px rgba(255,106,26,.16); border-color: #FFD9C2; }
.cc-ic { width: 54px; height: 54px; border-radius: 15px; background: var(--orange-soft); color: var(--orange-700);
  display: grid; place-items: center; margin-bottom: 10px; transition: background .25s, color .25s, transform .25s; }
.cc-ic svg { width: 24px; height: 24px; }
.cc-card:hover .cc-ic { background: var(--orange); color: #fff; transform: scale(1.06); }
.cc-k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cc-v { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; word-break: break-word; }
.cc-sub { font-size: .78rem; color: var(--muted-2); margin-top: 2px; }
.cc-trust { margin-top: 40px; font-size: .95rem; font-weight: 700; color: var(--ink-2); }
.cc-social { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.cc-social a { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center;
  color: var(--ink-2); transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s; }
.cc-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-3px) scale(1.08); }
.cc-social svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .cc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cc-grid { grid-template-columns: 1fr; } }

/* ===== About: 2-photo grid, standalone Company Profile panel, Our Location ===== */
.behind-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 920px; margin-inline: auto; }
@media (max-width: 720px) { .behind-grid--2 { grid-template-columns: 1fr; max-width: 480px; } }
.cp-panel { display: grid; grid-template-columns: 0.92fr 1.08fr; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--sh); }
.cp-cover { position: relative; display: block; overflow: hidden; background: linear-gradient(150deg, var(--orange-tint), #fff); min-height: 240px; }
.cp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.cp-cover:hover img { transform: scale(1.04); }
.cp-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 820px) { .cp-panel { grid-template-columns: 1fr; } .cp-cover { aspect-ratio: 16/10; min-height: 0; } }
.loc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.loc-map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-xs); min-height: 360px; }
.loc-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; filter: grayscale(.12); }
.loc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; }
.loc-card .cc-ic { width: 56px; height: 56px; }
.loc-addr { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-top: 6px; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } }

/* ===== Portfolio "complete platform" section ===== */
.eco-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.eco-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 20px; box-shadow: var(--sh-xs); transition: transform .24s var(--ease), box-shadow .28s; }
.eco-card:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.eco-card h3 { font-size: 1.05rem; margin: 12px 0 6px; }
.eco-card p { color: var(--muted); font-size: .9rem; }
@media (max-width: 980px) { .eco-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .eco-grid { grid-template-columns: 1fr; } }
.laptop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
.laptop { margin: 0; }
.laptop-screen { background: #0C1A29; border-radius: 14px 14px 0 0; padding: 12px 12px 0; border: 1px solid var(--line); border-bottom: 0; }
.laptop-screen .mk { border-radius: 8px; box-shadow: none; }
.laptop-base { height: 16px; background: linear-gradient(#E7EDF4, #CBD6E2); border-radius: 0 0 16px 16px; position: relative; box-shadow: var(--sh); }
.laptop-base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 84px; height: 6px; border-radius: 0 0 8px 8px; background: #AEBDCC; }
.laptop figcaption { margin-top: 16px; text-align: center; font-weight: 700; color: var(--ink); }
@media (max-width: 720px) { .laptop-grid { grid-template-columns: 1fr; } }
.arch-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin-inline: auto; }
.arch-node { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; font-weight: 700; color: var(--ink); box-shadow: var(--sh-xs); transition: transform .2s var(--ease), border-color .2s; }
.arch-node:hover { transform: translateY(-3px); border-color: var(--orange); }
.arch-node svg { width: 15px; height: 15px; color: var(--orange-700); }
.impact-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin-inline: auto; text-align: left; }
.impact-list li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; font-weight: 650; color: var(--ink); box-shadow: var(--sh-xs); }
.impact-list svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
@media (max-width: 820px) { .impact-list { grid-template-columns: 1fr; } }
/* Case-study rows: tighter premium browser, spacing, soft glows */
.mk-topbar { padding-block: 9px !important; }
.mk-body { padding: 13px !important; }
.cs-row { align-items: start; gap: clamp(32px, 5vw, 56px); }
.cs-row .split-media { position: relative; }
.cs-row .split-media::before { content: ""; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none; background: radial-gradient(58% 58% at 50% 42%, rgba(255,106,26,.12), transparent 70%); }
.cs-row .cs-block { margin-top: 22px; }
.cs-row .mk { box-shadow: 0 34px 70px rgba(10,27,46,.18); border-radius: 16px; }

/* ===== Top utility bar (enterprise trust strip) ===== */
.topbar { background: #fff; border-bottom: 1px solid var(--line-2); font-size: .82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 26px; height: 38px; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; font-weight: 600; transition: color .2s; }
.tb-item:hover { color: var(--orange-700); }
.tb-item svg { width: 15px; height: 15px; color: var(--orange-700); }
.tb-loc { color: var(--ink-2); }
@media (max-width: 640px) { .topbar-inner { justify-content: center; gap: 16px; } .tb-item span { display: none; } .tb-loc span { display: inline; } }

/* ===== Footer premium contact band ===== */
.footer-cta { text-align: center; padding-bottom: 48px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-cta-h { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; color: var(--ink); }
.footer-cta-sub { max-width: 620px; margin: 14px auto 0; color: var(--muted); }
.footer-cta .cc-grid { margin-top: 40px; }
.footer-cta .cc-trust { margin-top: 34px; }

/* ===== Portfolio card: monogram badge + case-study tag + hover explore ===== */
.pf-cover { transition: transform .25s var(--ease), box-shadow .3s; }
.pf-cover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.pf-mono { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--orange); color: var(--ink); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; box-shadow: var(--sh-sm); transition: transform .35s var(--ease); }
.pf-cover:hover .pf-mono { transform: scale(1.06); }
.pf-shot-img { transition: transform .35s var(--ease); }
.pf-cover:hover .pf-shot-img { transform: scale(1.04); }
.pf-cover-tag { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(255,255,255,.92); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; box-shadow: var(--sh-xs); transition: opacity .2s; }
.pf-cover-explore { position: absolute; bottom: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 700; color: #fff; background: var(--orange); padding: 6px 13px; border-radius: 999px; box-shadow: var(--sh-sm);
  opacity: 0; transform: translateY(4px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.pf-cover-explore svg { width: 13px; height: 13px; }
.pf-cover:hover .pf-cover-tag { opacity: 0; }
.pf-cover:hover .pf-cover-explore { opacity: 1; transform: translateY(0); }

/* Homepage project card: subtle explore link (no button box) */
.dc-explore { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-700); font-weight: 700; font-size: .92rem; }
.dc-explore svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.demo-card:hover .dc-explore svg { transform: translateX(4px); }

/* ===== Visit Our Office — info card ===== */
.loc-card--info { text-align: left; align-items: stretch; position: relative; }
.loc-card--info .cc-ic { align-self: flex-start; }
.loc-info { list-style: none; margin: 16px 0 0; display: flex; flex-direction: column; }
.loc-info li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.loc-info li:first-child { border-top: 0; }
.li-k { color: var(--muted); font-weight: 600; font-size: .9rem; }
.li-v { color: var(--ink); font-weight: 700; font-size: .95rem; text-align: right; text-decoration: none; word-break: break-word; }
a.li-v:hover { color: var(--orange-700); }

/* Portfolio/wall cards are now <a> — keep them as clean block cards */
a.portfolio-card, a.wall-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.portfolio-card:hover, a.wall-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

/* ===== Hero trust strip + mobile hero polish ===== */
.xhero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px; }
.xhero-trust span { font-size: .8rem; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; box-shadow: var(--sh-xs); }
.xhero-visual { display: none; }
.xhero-visual .jobme-phone { width: 100%; box-shadow: 0 30px 60px rgba(10,27,46,.22); }
.xhero-visual .jobme-phone .screen { position: relative; }
@media (max-width: 768px) {
  .xhero { padding-top: clamp(70px, 11vh, 94px) !important; padding-bottom: 36px !important; }
  .xhero-h1 { font-size: clamp(2.45rem, 9vw, 2.9rem) !important; line-height: 1.08 !important; }
  .xhero-sub { font-size: 1rem !important; margin-top: 14px !important; }
  .xhero .btn-row { gap: 10px; margin-top: 22px; }
  .xhero .btn-lg { padding: 13px 18px; font-size: .96rem; border-radius: 12px; }
  .xhero-trust { margin-top: 18px; gap: 7px; }
  .xhero-trust span { font-size: .74rem; padding: 6px 11px; }
  .xhero-visual { display: block; width: 190px; margin: 32px auto 0; }
}

/* ===== Portfolio card hero: dashboard mockup base + drop-in branded hero image ===== */
.pf-cover-body.pf-hero { position: relative; padding: 0; aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.pf-hero-mock { position: absolute; inset: 0; z-index: 0; background: #fff; overflow: hidden; }
.pf-hero-mock .mk-body { width: 100%; padding: 16px 16px 4px; }
.pf-hero-mock .mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .35s var(--ease); }
.pf-cover:hover .pf-hero-img, a.portfolio-card:hover .pf-hero-img, a.wall-card:hover .pf-hero-img { transform: scale(1.04); }
.pf-cover-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(10,27,46,.16), transparent 44%); }
.pf-cover-body.pf-hero .pf-cover-tag, .pf-cover-body.pf-hero .pf-cover-explore { z-index: 3; }

/* ============================================================================
   CODED HERO SCENES + DEVICE UI KIT + PREMIUM CASE STUDIES
   The Linear / Stripe / Vercel technique — cinematic device scenes in pure
   CSS, themed per brand via --acc / --acc2 / --sbg. No photography required.
   ============================================================================ */

/* ---------- device shells ---------- */
.dv{position:relative}
.dv-laptop{width:100%}
.dv-lid{background:linear-gradient(#23272f,#14171c);border-radius:12px;padding:6px;box-shadow:0 30px 60px rgba(6,12,24,.42),0 2px 0 rgba(255,255,255,.05) inset}
.dv-scr{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#fff;container-type:size}
.dv-foot{position:relative;left:-9%;width:118%;height:10px;background:linear-gradient(#d6dae1,#a7aeb9);border-radius:2px 2px 10px 10px;box-shadow:0 12px 20px rgba(6,12,24,.22)}
.dv-foot::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:3px;background:rgba(0,0,0,.18);border-radius:0 0 6px 6px}
.dv-phone{position:relative;width:100%;background:#0b0c0f;border-radius:26px;padding:5px;box-shadow:0 26px 54px rgba(6,12,24,.5),0 0 0 1px rgba(255,255,255,.06) inset}
.dv-phone .dv-scr{aspect-ratio:9/19.2;border-radius:21px}
.dv-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:32%;height:7px;background:#0b0c0f;border-radius:0 0 9px 9px;z-index:6}

/* ---------- UI screen base + theme tokens (scale with device via container queries) ---------- */
.ui{position:absolute;inset:0;overflow:hidden;font-weight:600;-webkit-font-smoothing:antialiased}
.ui.ui--light{--pg:#ffffff;--pan:#f3f6fa;--ink:#0f1a2a;--mut:#8492a6;--line:#e6ecf3}
.ui.ui--dark{--pg:#0e1218;--pan:#171d27;--ink:#eef2f8;--mut:#8c99ab;--line:#232c3a}
.ui{background:var(--pg);color:var(--ink)}
.ui-wm{display:inline-flex;align-items:center;font-weight:800;letter-spacing:.2px;color:var(--ink);min-width:0;overflow:hidden}
.ui-wm-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-wm-mark{flex:none;border-radius:24%;background:linear-gradient(135deg,var(--acc),var(--acc2))}

/* website screen — scales to laptop width */
.ui-site{display:flex;flex-direction:column}
.ui-topnav{display:flex;align-items:center;gap:1.3cqw;padding:1.4cqw 1.9cqw;border-bottom:1px solid var(--line)}
.ui-site .ui-wm{font-size:1.55cqw;gap:.7cqw}
.ui-site .ui-wm-mark{width:2.5cqw;height:2.5cqw}
.ui-menu{display:flex;gap:1cqw;margin-left:1cqw}
.ui-menu i{width:2.6cqw;height:.5cqw;border-radius:1px;background:var(--mut);opacity:.5}
.ui-pill{margin-left:auto;background:var(--acc);color:#fff;font-size:1.1cqw;font-weight:800;padding:.7cqw 1.5cqw;border-radius:3cqw;white-space:nowrap}
.ui-hero{flex:1;display:flex;gap:1.6cqw;padding:2cqw 1.9cqw 1.3cqw}
.ui-hero-l{flex:1.15;display:flex;flex-direction:column;justify-content:center;gap:1cqw;min-width:0}
.ui-eyebrow{font-size:.95cqw;letter-spacing:.15em;text-transform:uppercase;color:var(--acc);font-weight:800}
.ui-h{font-size:2.5cqw;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.ui-p{font-size:1.1cqw;line-height:1.4;color:var(--mut);max-width:94%}
.ui-btns{display:flex;gap:.8cqw;margin-top:.7cqw}
.ui-btn{font-size:1.05cqw;font-weight:800;padding:.8cqw 1.5cqw;border-radius:1.1cqw}
.ui-btn-primary{background:var(--acc);color:#fff}
.ui-btn-ghost{border:1px solid var(--line);color:var(--ink)}
.ui-hero-r{flex:.85;display:flex;align-items:center;justify-content:center}
.ui-glass{width:100%;aspect-ratio:4/5;border-radius:1.6cqw;background:linear-gradient(155deg,var(--acc),var(--acc2));position:relative;overflow:hidden}
.ui-glass .ui-badge{position:absolute;top:1.3cqw;left:1.3cqw;width:2.9cqw;height:2.9cqw;border-radius:1cqw;background:rgba(255,255,255,.28)}
.ui-glass b{position:absolute;left:1.3cqw;right:1.3cqw;bottom:2.9cqw;height:1cqw;border-radius:.5cqw;background:rgba(255,255,255,.78)}
.ui-glass i{position:absolute;left:1.3cqw;bottom:1.6cqw;height:.65cqw;width:60%;border-radius:.3cqw;background:rgba(255,255,255,.5)}
.ui-glass i.sm{width:34%;bottom:.8cqw}
.ui-cards{display:flex;gap:1.1cqw;padding:0 1.9cqw 1.9cqw}
.ui-card{flex:1;height:4.8cqw;border-radius:1.1cqw;background:var(--pan);border:1px solid var(--line);position:relative}
.ui-card-ic{position:absolute;top:1cqw;left:1cqw;width:1.9cqw;height:1.9cqw;border-radius:.6cqw;background:var(--acc);opacity:.85}

/* app screen — scales to phone width */
.ui-app{display:flex;flex-direction:column}
.ui-statusbar{display:flex;justify-content:space-between;align-items:center;padding:3.3cqw 5.5cqw 1cqw;font-size:3.6cqw;font-weight:800;color:var(--ink)}
.ui-sig{display:flex;gap:1cqw;align-items:flex-end}
.ui-sig i{width:1.4cqw;height:3.3cqw;background:var(--ink);border-radius:.5cqw;opacity:.7}
.ui-appbar{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1cqw 6cqw 4.4cqw}
.ui-app .ui-wm.sm{font-size:6cqw;gap:2.4cqw;min-width:0}
.ui-app .ui-wm-mark{width:8cqw;height:8cqw;border-radius:2.4cqw}
.ui-ava{width:8.3cqw;height:8.3cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));flex:none}
.ui-appwrap{flex:1;display:flex;flex-direction:column;gap:4.4cqw;padding:0 6cqw}
.ui-search{height:10cqw;border-radius:5cqw;background:var(--pan);border:1px solid var(--line)}
.ui-hcard{border-radius:6.7cqw;padding:6cqw;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;display:flex;flex-direction:column;gap:1.7cqw}
.ui-hcard-k{font-size:3.6cqw;opacity:.9;font-weight:700}
.ui-hcard-v{font-size:9.4cqw;font-weight:800;letter-spacing:-.02em}
.ui-applist{display:flex;flex-direction:column;gap:3.3cqw}
.ui-arow{display:flex;align-items:center;gap:4.4cqw;padding:3.9cqw;border-radius:5.5cqw;background:var(--pan);border:1px solid var(--line)}
.ui-athumb{width:11cqw;height:11cqw;border-radius:3.3cqw;background:linear-gradient(135deg,var(--acc),var(--acc2));opacity:.9;flex:none}
.ui-alines{flex:1;display:flex;flex-direction:column;gap:2.2cqw;min-width:0}
.ui-alines b{height:2.8cqw;width:72%;background:var(--ink);opacity:.72;border-radius:1.4cqw}
.ui-alines i{height:2.2cqw;width:46%;background:var(--mut);opacity:.55;border-radius:1.1cqw}
.ui-atag{width:10cqw;height:5.5cqw;border-radius:2.8cqw;background:var(--acc);opacity:.32;flex:none}
.ui-tabbar{display:flex;justify-content:space-around;align-items:center;padding:4.4cqw 6.7cqw;margin-top:3.3cqw;border-top:1px solid var(--line)}
.ui-tab{width:9.4cqw;height:9.4cqw;border-radius:3.3cqw;background:var(--mut);opacity:.4}
.ui-tab.on{background:var(--acc);opacity:1}

/* dashboard screen — scales to laptop width */
.ui-dash{display:flex}
.ui-side{width:4.8cqw;background:var(--pan);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:1.45cqw;padding:1.6cqw 0;flex:none}
.ui-side .ui-wm.logo{width:2.6cqw;height:2.6cqw;border-radius:1cqw;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.ui-nav{width:2.3cqw;height:.65cqw;border-radius:.3cqw;background:var(--mut);opacity:.4}
.ui-nav.on{background:var(--acc);opacity:1;width:2.6cqw}
.ui-main{flex:1;display:flex;flex-direction:column;gap:1.3cqw;padding:1.6cqw 1.9cqw;min-width:0}
.ui-mhead{display:flex;align-items:center;justify-content:space-between}
.ui-mtitle{font-size:1.5cqw;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-dash .ui-pill.sm{font-size:1cqw;padding:.6cqw 1.2cqw;border-radius:3cqw}
.ui-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.ui-kpi{background:var(--pan);border:1px solid var(--line);border-radius:1.3cqw;padding:1.1cqw;display:flex;flex-direction:column;gap:.8cqw}
.ui-kpi i{width:58%;height:.65cqw;border-radius:.3cqw;background:var(--mut);opacity:.5}
.ui-kpi b{width:78%;height:1.3cqw;border-radius:.5cqw;background:var(--acc)}
.ui-kpi:nth-child(2) b{background:var(--acc2)}
.ui-panel{background:var(--pan);border:1px solid var(--line);border-radius:1.6cqw;padding:1.45cqw}
.ui-chart{display:flex;align-items:flex-end;gap:1cqw;height:7.7cqw}
.ui-bar{flex:1;background:var(--acc);opacity:.32;border-radius:.5cqw .5cqw 0 0}
.ui-bar.hi{opacity:1}
.ui-table{display:flex;flex-direction:column;gap:.8cqw}
.ui-trow{display:flex;align-items:center;gap:1.1cqw;padding:.8cqw 1.1cqw;border-radius:1.1cqw;background:var(--pan);border:1px solid var(--line)}
.ui-tav{width:2.1cqw;height:2.1cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));opacity:.85;flex:none}
.ui-tl{height:.8cqw;width:34%;border-radius:.4cqw;background:var(--ink);opacity:.6}
.ui-tl.sm{width:18%;opacity:.35}
.ui-ttag{margin-left:auto;width:3.2cqw;height:1.45cqw;border-radius:.7cqw;flex:none}
.ui-ttag.ok{background:#16a34a;opacity:.55}
.ui-ttag.blue{background:var(--acc);opacity:.55}
.ui-ttag.warn{background:#f59e0b;opacity:.55}

/* ---------- the cinematic scene ---------- */
.scene{position:relative;width:100%;height:100%;overflow:hidden;background:var(--sbg,linear-gradient(150deg,#0e1622,#16233a))}
.scene--card{aspect-ratio:16/9}
.scene-glow{position:absolute;width:60%;height:80%;left:-8%;top:-24%;background:radial-gradient(circle at 35% 40%,var(--acc),transparent 62%);opacity:.30;filter:blur(6px);pointer-events:none}
.scene-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 70% 60%,#000,transparent 75%);opacity:.5;pointer-events:none}
.scene-wm{position:absolute;right:4%;bottom:3%;font-size:clamp(30px,7vw,74px);font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--acc2);opacity:.12;white-space:nowrap;pointer-events:none}
.scene-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scene-laptop{position:relative;z-index:1;width:80%}
.scene-phone{position:absolute;z-index:2;right:7%;bottom:8%;width:19%}

/* portfolio card: scene fills the browser body */
.pf-hero-scene{position:absolute;inset:0;z-index:0}
.pf-cover-body.pf-hero .pf-cover-tag,.pf-cover-body.pf-hero .pf-cover-explore{z-index:4}
.pf-cover-scrim{z-index:3}

/* ============================================================================
   CASE STUDY PAGE
   ============================================================================ */
.cs-hero{position:relative;padding:26px 0 0;background:linear-gradient(180deg,var(--orange-tint),#fff 62%)}
.cs-hero .breadcrumb{margin-bottom:18px}
.cs-hero-head{max-width:900px}
.cs-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--orange-700);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:var(--pill);box-shadow:var(--sh-xs)}
.cs-badge.product{color:#0f7d3b}
.cs-hero-head h1{margin:16px 0 10px;font-size:clamp(2.4rem,5.5vw,3.7rem);letter-spacing:-.02em}
.cs-oneline{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink-2);max-width:760px;line-height:1.4}
.cs-hero-stage{margin-top:34px;position:relative}
.cs-hero-stage .scene--hero{min-height:min(66vh,640px);border-radius:var(--r-xl);box-shadow:0 50px 100px rgba(8,20,40,.28),0 0 0 1px rgba(255,255,255,.5);overflow:hidden}
.cs-hero-stage .scene--hero .scene-laptop{width:62%}
.cs-hero-stage .scene--hero .scene-phone{width:15%;right:13%;bottom:11%}
.cs-hero-stage::after{content:"";position:absolute;left:8%;right:8%;bottom:-22px;height:44px;background:radial-gradient(ellipse at center,rgba(255,106,26,.22),transparent 70%);filter:blur(8px);z-index:-1}

.cs-block{padding:clamp(64px,9vw,110px) 0}
.cs-block--tint{background:linear-gradient(180deg,#fff,var(--orange-tint))}
.container.narrow{max-width:820px}
.cs-block .narrow h2,.cs-block h2{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;margin:10px 0 18px}
.cs-block .narrow p{font-size:1.06rem;line-height:1.75;color:var(--ink-2);margin:0 0 16px}

/* solution grid */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px}
.sol-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sol-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.sol-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--orange-soft);color:var(--orange-700);margin-bottom:14px}
.sol-ic svg{width:23px;height:23px}
.sol-card h4{font-size:1.08rem;margin:0 0 7px}
.sol-card p{font-size:.95rem;color:var(--muted);line-height:1.6;margin:0}

/* platform showcase — BIG alternating device sections */
.cs-showcase{padding:clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px)}
.plat{padding:clamp(48px,7vw,86px) 0}
.plat-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,72px);align-items:center}
.plat--flip .plat-dev{order:2}
.plat-dev{position:relative;border-radius:var(--r-xl);padding:clamp(28px,4vw,52px);background:var(--sbg);overflow:hidden;box-shadow:0 40px 80px rgba(8,20,40,.26)}
.plat-dev--phone{display:flex;justify-content:center}
.plat-dev--phone .dv-phone{width:44%;min-width:150px}
.plat-glow{position:absolute;width:70%;height:80%;left:-10%;top:-20%;background:radial-gradient(circle,var(--acc),transparent 60%);opacity:.28;filter:blur(8px);pointer-events:none}
.plat-copy .eyebrow,.plat-fullcopy .eyebrow{color:var(--orange-700)}
.plat-copy h3,.plat-fullcopy h3{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.02em;margin:10px 0 14px}
.plat-copy p,.plat-fullcopy p{font-size:1.05rem;line-height:1.7;color:var(--ink-2);margin:0 0 18px}
.plat-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.plat-ul li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.plat-ul li svg{width:20px;height:20px;color:var(--orange);flex:none;margin-top:2px}
/* full-width platform row */
.plat--full .container{display:grid;grid-template-columns:1fr;gap:26px}
.plat-fullcopy{max-width:720px}
.plat-fullmedia .plat-dev{padding:clamp(34px,5vw,72px)}
.plat-fullmedia .scene,.plat-fullmedia .dv-laptop{max-width:1040px;margin:0 auto}
.plat-fullbul{max-width:900px}
.plat-fullbul .plat-ul{flex-direction:row;flex-wrap:wrap;gap:14px 30px}
.plat-fullbul .plat-ul li{flex:1 1 240px}

/* core features */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:36px}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.feat-ic{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;background:linear-gradient(140deg,var(--orange),var(--orange-700));color:#fff;margin-bottom:16px;box-shadow:0 10px 22px rgba(255,106,26,.28)}
.feat-ic svg{width:25px;height:25px}
.feat-card h4{font-size:1.14rem;margin:0 0 8px}
.feat-card p{font-size:.98rem;color:var(--muted);line-height:1.62;margin:0}

/* business impact */
.imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:34px}
.imp-card{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-xs)}
.imp-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--orange-soft);color:var(--orange-700);flex:none}
.imp-ic svg{width:22px;height:22px}
.imp-card h4{font-size:1.05rem;margin:0 0 6px}
.imp-card p{font-size:.95rem;color:var(--muted);line-height:1.6;margin:0}

/* technology */
.tech-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tech-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:11px 18px;font-weight:700;font-size:.95rem;box-shadow:var(--sh-xs)}
.tech-pill svg{width:18px;height:18px;color:var(--orange-700)}

/* case-study CTA */
.cs-cta{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-xl);padding:clamp(44px,6vw,74px) clamp(24px,5vw,60px);color:#fff;background:linear-gradient(150deg,#0b1626,#122238)}
.cs-cta::before{content:"";position:absolute;width:60%;height:120%;right:-10%;top:-20%;background:radial-gradient(circle,var(--acc),transparent 60%);opacity:.35;pointer-events:none}
.cs-cta .eyebrow{color:var(--acc2);position:relative}
.cs-cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:10px 0 12px;position:relative;color:#fff}
.cs-cta p{max-width:640px;margin:0 auto 26px;color:rgba(255,255,255,.82);font-size:1.08rem;line-height:1.6;position:relative}
.cs-cta .btn-row{justify-content:center;position:relative}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .plat-grid{grid-template-columns:1fr;gap:30px}
  .plat--flip .plat-dev{order:0}
  .plat-dev--phone .dv-phone{width:200px}
  .cs-hero-stage .scene--hero{min-height:auto;aspect-ratio:16/11}
  .cs-hero-stage .scene--hero .scene-laptop{width:72%}
}
@media (max-width:560px){
  .cs-hero-stage .scene--hero{aspect-ratio:4/3}
  .cs-hero-stage .scene--hero .scene-laptop{width:84%}
  .cs-hero-stage .scene--hero .scene-phone{width:20%;right:6%}
  .plat-dev{padding:22px}
  .ui-h{font-size:13px}
}

/* ---------- real client logos (drop-in): shown in place of the text wordmark ---------- */
.ui-wm--logo{display:inline-flex;align-items:center;min-width:0}
.ui-logo{display:block;object-fit:contain;object-position:left center;max-width:100%}
.ui-site .ui-logo{height:3.4cqw;max-width:26cqw}
.ui-app .ui-logo{height:9cqw;max-width:56cqw}
.cs-logo{display:block;height:46px;max-width:220px;object-fit:contain;object-position:left center;margin:0 0 18px}
@media (max-width:560px){.cs-logo{height:38px}}

/* ===== brand emblem in wordmark + hero ===== */
.ui-wm-mark{display:grid;place-items:center}
.ui-wm-mark svg{width:64%;height:64%;color:#fff;stroke:#fff}
.cs-brandmark{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:17px;background:linear-gradient(140deg,var(--acc),var(--acc2));margin:0 0 18px;box-shadow:0 14px 30px rgba(8,20,40,.20)}
.cs-brandmark svg{width:31px;height:31px;color:#fff;stroke:#fff}
@media (max-width:560px){.cs-brandmark{width:52px;height:52px;border-radius:15px}.cs-brandmark svg{width:26px;height:26px}}

/* ===== rich industry dashboard ===== */
.ui-rail{width:16cqw;flex:none;background:var(--pan);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1.3cqw;padding:1.6cqw 1.2cqw}
.ui-rail-logo{width:3.6cqw;height:3.6cqw;border-radius:1.1cqw;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.ui-rail-logo svg{width:2.2cqw;height:2.2cqw;color:#fff;stroke:#fff}
.ui-navs{display:flex;flex-direction:column;gap:.4cqw}
.ui-navi{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1cqw;border-radius:1.2cqw;color:var(--mut);font-size:1.45cqw;font-weight:700;white-space:nowrap;overflow:hidden}
.ui-navi svg{width:1.9cqw;height:1.9cqw;flex:none}
.ui-navi.on{background:var(--pg);color:var(--acc)}
.ui-work{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4cqw;padding:1.6cqw 1.8cqw}
.ui-top{display:flex;align-items:center;gap:1.2cqw}
.ui-top-t{font-size:2cqw;font-weight:800;letter-spacing:-.02em}
.ui-top-s{margin-left:auto;width:24cqw;height:3cqw;border-radius:1.5cqw;background:var(--pan);border:1px solid var(--line)}
.ui-top-a{width:3cqw;height:3cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));flex:none}
.ui-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.ui-kpi{background:var(--pan);border:1px solid var(--line);border-radius:1.6cqw;padding:1.4cqw;display:block}
.ui-kl{font-size:1.3cqw;color:var(--mut);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-kr{display:flex;align-items:baseline;gap:.7cqw;margin-top:.7cqw}
.ui-kv{font-size:2.5cqw;font-weight:800;letter-spacing:-.03em}
.ui-kd{font-size:1.25cqw;font-weight:800}
.ui-kd.up{color:#12a150}.ui-kd.down{color:#e0533d}
.ui-grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:1.1cqw}
.ui-panel{background:var(--pan);border:1px solid var(--line);border-radius:1.8cqw;padding:1.5cqw}
.ui-panel-h{font-size:1.45cqw;font-weight:800;margin-bottom:1.1cqw}
.ui-chart{display:flex;align-items:flex-end;gap:1.3cqw;height:10.5cqw}
.ui-xl{display:flex;gap:1.3cqw;margin-top:.6cqw}
.ui-xl span{flex:1;text-align:center;font-size:1.05cqw;color:var(--mut);font-weight:700}
.ui-lps{display:flex;flex-direction:column;gap:1cqw}
.ui-lp{display:grid;grid-template-columns:1fr 1.3fr auto;align-items:center;gap:.9cqw}
.ui-lpl{font-size:1.3cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-lpbar{height:1.2cqw;background:var(--line);border-radius:1cqw;overflow:hidden}
.ui-lpbar span{display:block;height:100%;border-radius:1cqw;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.ui-lpv{font-size:1.25cqw;font-weight:800;color:var(--mut)}
.ui-tblwrap .ui-th,.ui-tblwrap .ui-tr{display:grid;gap:1cqw;padding:.9cqw 1cqw;align-items:center}
.ui-th{font-size:1.15cqw;color:var(--mut);font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.ui-th span,.ui-tr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-tb{display:flex;flex-direction:column}
.ui-tr{font-size:1.35cqw;font-weight:600;border-top:1px solid var(--line)}
.ui-tr span:first-child{font-weight:800;color:var(--ink)}

/* ===== dashboard readability + breathing room (polish only) ===== */
.plat-grid{grid-template-columns:1.25fr .75fr}
.plat--flip .plat-grid{grid-template-columns:.75fr 1.25fr}
.plat-dev{padding:clamp(22px,3.2vw,44px)}
.ui-navi{font-size:1.7cqw;padding:1cqw}
.ui-navi svg{width:2.1cqw;height:2.1cqw}
.ui-top-t{font-size:2.35cqw}
.ui-kpi{padding:1.5cqw}
.ui-kl{font-size:1.55cqw}
.ui-kv{font-size:2.7cqw}
.ui-kd{font-size:1.45cqw}
.ui-panel-h{font-size:1.7cqw;margin-bottom:1cqw}
.ui-chart{height:9cqw;gap:1.5cqw}
.ui-xl span{font-size:1.25cqw}
.ui-lps{gap:1.15cqw}
.ui-lpl{font-size:1.55cqw}
.ui-lpv{font-size:1.5cqw}
.ui-lpbar{height:1.35cqw}
.ui-tblwrap .ui-th,.ui-tblwrap .ui-tr{padding:1cqw 1.1cqw}
.ui-th{font-size:1.35cqw}
.ui-tr{font-size:1.7cqw}
/* keep platform rows stacked + contained on tablet/mobile (no horizontal overflow) */
@media (max-width:900px){
  .plat-grid,.plat--flip .plat-grid{grid-template-columns:1fr}
  .plat--flip .plat-dev{order:0}
  .plat-dev{max-width:100%;overflow:hidden}
}

/* ===== SIGNATURE dashboard widgets (per-industry, structurally different) ===== */
.sg-catg{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.sg-cat{background:var(--pg);border:1px solid var(--line);border-radius:1.4cqw;overflow:hidden;display:flex;flex-direction:column}
.sg-cat-img{height:5cqw;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.sg-cat-img svg{width:2.6cqw;height:2.6cqw;color:#fff;stroke:#fff;opacity:.92}
.sg-cat-t{font-size:1.5cqw;font-weight:800;padding:.9cqw 1cqw 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-cat-s{font-size:1.2cqw;color:var(--mut);padding:.2cqw 1cqw}
.sg-cat-p{font-size:1.6cqw;font-weight:800;color:var(--acc);padding:.3cqw 1cqw .9cqw}
.sg-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:.9cqw}
.sg-col{background:var(--pg);border:1px solid var(--line);border-radius:1.2cqw;padding:.9cqw;display:flex;flex-direction:column;gap:.7cqw;min-width:0}
.sg-col-h{display:flex;justify-content:space-between;font-size:1.2cqw;font-weight:800;color:var(--mut)}
.sg-col-h b{color:var(--acc)}
.sg-chip{display:flex;align-items:center;gap:.7cqw;background:var(--pan);border-radius:1cqw;padding:.7cqw}
.sg-chip-a{width:2.6cqw;height:2.6cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));flex:none}
.sg-chip-n{font-size:1.2cqw;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-chip-m{font-size:1.15cqw;font-weight:800;color:var(--acc)}
.sg-gantt{display:flex;flex-direction:column;gap:.9cqw}
.sg-grow{display:grid;grid-template-columns:13cqw 1fr;align-items:center;gap:1cqw}
.sg-grow-l{font-size:1.3cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-track{height:2cqw;background:var(--pan);border-radius:1cqw;position:relative;overflow:hidden}
.sg-bar{position:absolute;top:0;height:100%;border-radius:1cqw;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sg-map{position:relative;height:13cqw;border-radius:1.4cqw;overflow:hidden;background:var(--pan);border:1px solid var(--line)}
.sg-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4cqw 4cqw;opacity:.7}
.sg-route{position:absolute;left:10%;top:62%;width:74%;height:.7cqw;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:1cqw;transform:rotate(-13deg)}
.sg-pin{position:absolute;width:2cqw;height:2cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sg-legend{display:flex;gap:2cqw;margin-top:1cqw}
.sg-leg{display:flex;align-items:center;gap:.7cqw;font-size:1.2cqw;font-weight:700;color:var(--mut)}
.sg-dot{width:1.3cqw;height:1.3cqw;border-radius:50%}
.sg-dot.acc{background:var(--acc)}.sg-dot.ok{background:#16a34a}.sg-dot.warn{background:#f59e0b}
.sg-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:.8cqw}
.sg-day{display:flex;flex-direction:column;gap:.6cqw}
.sg-day-h{font-size:1.15cqw;font-weight:800;color:var(--mut);text-align:center}
.sg-slot{border-radius:1cqw;padding:.8cqw;font-size:1.2cqw;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));line-height:1.15}
.sg-slot small{display:block;font-weight:600;opacity:.85;font-size:1cqw}
.sg-slot.alt{background:var(--pan);color:var(--ink);border:1px solid var(--line)}
.sg-slot.alt small{color:var(--mut)}
/* ===== phone app: real per-project rows ===== */
.ui-athumb{display:grid;place-items:center}
.ui-athumb svg{width:52%;height:52%;color:#fff;stroke:#fff}
.ui-al-t{font-size:3.4cqw;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ui-al-s{font-size:2.9cqw;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:.5cqw}
.ui-atag--f{margin-left:auto;flex:none;padding:1.3cqw 2.4cqw;border-radius:3cqw;background:var(--acc);color:#fff;font-size:2.5cqw;font-weight:800;white-space:nowrap;display:flex;align-items:center}

/* ===== recreated SVG client logos ===== */
.ui-wm--svg{display:inline-flex;align-items:center;gap:.5em;min-width:0}
.ui-logo-svg{height:1.7em;width:auto;flex:none}
.ui-app .ui-wm--svg{gap:.45em}
.cs-logo-lockup{display:inline-flex;align-items:center;gap:13px;margin:0 0 18px}
.cs-logo-mark{width:54px;height:54px;flex:none}
.cs-logo-words{display:flex;flex-direction:column;line-height:1.02}
.cs-logo-words b{font-size:31px;font-weight:800;letter-spacing:.4px;color:#1B3A9E}
.cs-logo-words i{font-size:11px;font-style:normal;font-weight:700;letter-spacing:3.2px;color:#E0662A}
@media (max-width:560px){.cs-logo-mark{width:46px;height:46px}.cs-logo-words b{font-size:26px}.cs-logo-words i{font-size:9.5px;letter-spacing:2.4px}}

/* ===== PASS Logistics wordmark (pass / LOGISTICS, no icon) ===== */
.pass-lw{display:inline-flex;flex-direction:column;line-height:.82;justify-content:center}
.pass-lw b{font-size:1em;font-weight:800;letter-spacing:-.02em}
.pass-lw i{font-size:.42em;font-style:normal;font-weight:800;letter-spacing:.28em}
.cs-pass b{font-size:46px;letter-spacing:-1px}
.cs-pass i{font-size:15px}

/* ===== Products page ===== */
.prod-flag{border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,4vw,44px);box-shadow:var(--sh);background:#fff}
.prod-flag-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.prod-flag-badge{display:inline-flex;align-items:center;gap:8px;background:var(--orange-soft);color:var(--orange-700);font-weight:800;font-size:.82rem;padding:9px 16px;border-radius:var(--pill);letter-spacing:.2px}
.prod-flag-badge svg{width:16px;height:16px}
.prod-flag-scene{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.prod-flag-scene .scene--hero{min-height:min(56vh,520px)}
.rm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-top:36px}
.rm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rm-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rm-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--orange-soft);color:var(--orange-700)}
.rm-ic svg{width:23px;height:23px}
.rm-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#8a7358;background:#f3ede4;padding:6px 11px;border-radius:var(--pill)}
.rm-card h4{font-size:1.12rem;margin:0 0 8px}
.rm-card p{font-size:.96rem;color:var(--muted);line-height:1.62;margin:0}

/* real company logo in dashboard sidebar rail (white badge so brand colours show) */
.ui-rail-logo--real{background:#ffffff;border:1px solid var(--line)}
.ui-rail-logo--real .ui-rail-svg{width:82%;height:82%}

/* ============================================================================
   HOMEPAGE HERO v3 (matches approved reference)
   ============================================================================ */
.hh{position:relative;overflow:hidden;padding:clamp(26px,4vw,58px) 0 clamp(34px,5vw,70px)}
.hh-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(24px,4vw,54px);align-items:center}
.hh-left{max-width:580px}
.hh-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:8px 16px;font-weight:700;font-size:.9rem;color:var(--ink);box-shadow:var(--sh-xs)}
.hh-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.hh-title{font-size:clamp(2.6rem,5.3vw,4.4rem);line-height:1.03;letter-spacing:-.03em;font-weight:800;margin:22px 0 0;color:var(--ink)}
.hh-orange{color:var(--orange)}
.hh-sub{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-2);line-height:1.6;margin:20px 0 0;max-width:31em}
.hh-btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn-outline{background:#fff;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:#fff}
.hh-trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:30px}
.hh-ti{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.hh-ti svg{width:18px;height:18px;color:var(--orange-700)}
/* right visual */
.hh-right{position:relative;min-height:clamp(320px,34vw,460px)}
.hh-skyline{position:absolute;right:-6%;top:0;width:56%;height:88%;background:url(/assets/img/cine-westbay.jpg) center right/cover;opacity:.10;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%);pointer-events:none;border-radius:20px}
.hh-glow{position:absolute;right:6%;top:6%;width:60%;height:70%;background:radial-gradient(circle,rgba(255,106,26,.18),transparent 60%);filter:blur(8px);pointer-events:none}
.hh-stage{position:relative;padding:0 2% 8%}
.hh-dash{container-type:inline-size;position:relative;z-index:2;width:min(100%,580px);margin-left:auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 44px 90px rgba(8,20,40,.22)}
.hh-phone{container-type:inline-size;position:absolute;right:-1%;bottom:-6%;width:23%;min-width:132px;z-index:3}
.hh-ai{position:absolute;left:2%;bottom:-3%;z-index:4}
/* dashboard (cqw scales with .hh-dash width) */
.hd{display:flex;background:#fff}
.hd-side{width:22cqw;flex:none;background:#0f1a2b;color:#fff;padding:3cqw 2.2cqw;display:flex;flex-direction:column;gap:2.6cqw}
.hd-brand{display:flex;align-items:center;gap:1.4cqw;font-weight:800;font-size:2.5cqw}
.hd-side-octo{width:3.4cqw;height:3.4cqw;border-radius:1cqw}
.hd-nav{display:flex;flex-direction:column;gap:.5cqw}
.hd-navi{display:flex;align-items:center;gap:1.6cqw;padding:1.5cqw 1.8cqw;border-radius:2cqw;font-size:1.95cqw;font-weight:600;color:#9fb0c4;white-space:nowrap;overflow:hidden}
.hd-navi svg{width:2.4cqw;height:2.4cqw;flex:none}
.hd-navi.on{background:var(--orange);color:#fff}
.hd-main{flex:1;min-width:0;padding:2.8cqw 3cqw 3cqw}
.hd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.2cqw}
.hd-top h4{font-size:2.8cqw;font-weight:800;margin:0}
.hd-topr{display:flex;align-items:center;gap:1.2cqw;font-size:1.9cqw;font-weight:700}
.hd-top-octo{width:3cqw;height:3cqw;border-radius:.8cqw}
.hd-topr svg{width:2.4cqw;height:2.4cqw;color:var(--muted)}
.hd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.hd-kpi{background:#f7f9fc;border:1px solid var(--line);border-radius:2cqw;padding:1.8cqw}
.hd-kl{font-size:1.5cqw;color:var(--muted);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-kv{font-size:3cqw;font-weight:800;display:block;margin:.6cqw 0 .3cqw;letter-spacing:-.02em}
.hd-kd{font-size:1.5cqw;font-weight:800;font-style:normal}
.hd-kd.up{color:#12a150}
.hd-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:2cqw;margin-top:2.2cqw}
.hd-panel{background:#fff;border:1px solid var(--line);border-radius:2cqw;padding:2cqw}
.hd-ph{display:flex;align-items:center;justify-content:space-between;font-size:1.95cqw;font-weight:800;margin-bottom:1.4cqw}
.hd-pill{font-size:1.4cqw;font-weight:600;color:var(--muted);background:#f2f5f9;padding:.6cqw 1.4cqw;border-radius:3cqw}
.hd-chart{width:100%;height:15cqw;display:block}
.hd-months{display:flex;justify-content:space-between;font-size:1.35cqw;color:var(--muted);margin-top:.8cqw}
.hd-serv{display:flex;flex-direction:column;gap:1.7cqw}
.hd-srow{display:flex;align-items:center;gap:1.2cqw;font-size:1.6cqw}
.hd-sl{flex:none;width:40%;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sbar{flex:1;height:1.3cqw;background:#eef2f7;border-radius:2cqw;overflow:hidden}
.hd-sbar i{display:block;height:100%;border-radius:2cqw}
.hd-sp{flex:none;font-weight:800;font-size:1.5cqw;color:var(--muted)}
/* phone (cqw scales with .hh-phone width) */
.hp{background:#fff;border:1px solid var(--line);border-radius:9cqw;padding:5cqw 4.5cqw 6cqw;box-shadow:0 30px 60px rgba(8,20,40,.3)}
.hp-status{display:flex;justify-content:space-between;align-items:center;font-size:3.1cqw;font-weight:800;margin-bottom:3cqw}
.hp-sig{display:flex;gap:1cqw}
.hp-sig i{width:1.4cqw;height:3cqw;background:var(--ink);border-radius:.6cqw;opacity:.7}
.hp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4cqw}
.hp-top b{font-size:5.4cqw;font-weight:800}
.hp-new{background:var(--orange);color:#fff;font-size:3.2cqw;font-weight:800;padding:1.6cqw 3cqw;border-radius:5cqw}
.hp-list{display:flex;flex-direction:column;gap:3.6cqw}
.hp-h{display:flex;align-items:center;justify-content:space-between}
.hp-t{font-size:3.5cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-pct{font-size:3cqw;font-weight:800;color:var(--muted);flex:none;margin-left:2cqw}
.hp-st{display:inline-block;font-size:2.8cqw;font-weight:800;font-style:normal;margin:1cqw 0 1.6cqw}
.hp-st--prog{color:#2563EB}.hp-st--rev{color:#E0902A}.hp-st--done{color:#12a150}
.hp-bar{height:2.2cqw;background:#eef2f7;border-radius:3cqw;overflow:hidden}
.hp-bar i{display:block;height:100%;border-radius:3cqw;background:var(--orange)}
.hp-item--prog .hp-bar i{background:#2563EB}.hp-item--rev .hp-bar i{background:#E0902A}.hp-item--done .hp-bar i{background:#12a150}
/* AI card */
.hac{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:0 24px 50px rgba(8,20,40,.2);max-width:min(46cqw,250px)}
.hac-ic{width:42px;height:42px;border-radius:12px;background:var(--orange-soft);color:var(--orange-700);display:grid;place-items:center;flex:none}
.hac-ic svg{width:22px;height:22px}
.hac-tx b{font-size:1rem;display:block;margin-bottom:3px}
.hac-tx p{font-size:.8rem;color:var(--muted);line-height:1.45;margin:0}
/* trust band */
.trust-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:22px 0;margin-top:clamp(24px,4vw,44px)}
.trust-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.trust-label{font-weight:800;font-size:.92rem;color:var(--ink);line-height:1.3;border-right:1px solid var(--line);padding-right:26px;flex:none}
.trust-logos{display:flex;align-items:center;gap:clamp(16px,3vw,42px);flex-wrap:wrap;flex:1;justify-content:space-around}
.tl{display:inline-flex;align-items:center;gap:9px;opacity:.92}
.tl-m{height:30px;width:auto;flex:none}
.tl-w{font-size:1.14rem;font-weight:800;letter-spacing:.2px;white-space:nowrap}
/* service cards */
.hsc-section{padding-top:clamp(26px,4vw,46px)}
.hsc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hsc{position:relative;display:block;border:1px solid var(--line);border-radius:20px;padding:26px 24px 54px;box-shadow:var(--sh-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
.hsc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.hsc--orange{background:linear-gradient(180deg,#fff6ef,#fff)}
.hsc--purple{background:linear-gradient(180deg,#f6f3ff,#fff)}
.hsc--blue{background:linear-gradient(180deg,#eef5ff,#fff)}
.hsc-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:18px}
.hsc-ic svg{width:26px;height:26px;color:#fff}
.hsc--orange .hsc-ic{background:linear-gradient(140deg,#ff8a3d,#f2740f)}
.hsc--purple .hsc-ic{background:linear-gradient(140deg,#a78bfa,#7c3aed)}
.hsc--blue .hsc-ic{background:linear-gradient(140deg,#60a5fa,#2563eb)}
.hsc-t{font-size:1.12rem;margin:0 0 8px}
.hsc-p{font-size:.94rem;color:var(--muted);line-height:1.55;margin:0}
.hsc-arrow{position:absolute;right:22px;bottom:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.hsc-arrow svg{width:17px;height:17px}
.hsc--orange .hsc-arrow{background:#f2740f}.hsc--purple .hsc-arrow{background:#7c3aed}.hsc--blue .hsc-arrow{background:#2563eb}
/* responsive */
@media (max-width:1024px){.hsc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .hh-grid{grid-template-columns:1fr}
  .hh-right{order:2;margin-top:8px;min-height:0}
  .hh-left{max-width:none}
  .hh-dash{margin:0 auto}
  .trust-inner{justify-content:center;text-align:center}
  .trust-label{border-right:none;border-bottom:1px solid var(--line);padding:0 0 14px;width:100%;text-align:center}
  .trust-logos{justify-content:center;gap:22px 30px}
}
@media (max-width:560px){
  .hsc-grid{grid-template-columns:1fr}
  .hh-phone{width:32%;right:0}
  .hh-ai{left:0}
  .hac{max-width:200px;padding:12px 14px}
}

/* coded mockup inside the services/industry browser frame (replaces raw screenshots) */
.live-shot{height:auto}
.live-mockbody{background:#fff}
.live-mockbody .mk-body{padding:16px 18px 20px}
.live-shot .live-mockbody{max-width:100%;overflow:hidden}

/* ===== QA guard: never allow horizontal page scroll on any device ===== */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,svg,video,canvas{max-width:100%}
.hh,.trust-band,.hsc-section,section{max-width:100vw}
@media (max-width:768px){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a{min-height:46px;display:flex;align-items:center}
  .hh-btns .btn{width:auto}
}

/* ================= DEEP RESPONSIVE HARDENING — every page ================= */
/* utility topbar wraps instead of overflowing on phones */
@media (max-width:560px){
  .topbar-inner{flex-wrap:wrap;gap:4px 16px;height:auto;padding:6px 0;font-size:.76rem}
}
/* two-column page sections -> single column on tablet-portrait + phones */
@media (max-width:820px){
  .split,.contact-grid,.cp-panel,.loc-grid,.featured-insight,.svc-featured,.laptop-grid,.grid-2,.field-row,.vs{grid-template-columns:1fr!important}
  .grid-3,.svc-grid,.proof-grid,.behind-grid,.impact-list,.mod-grid,.check-grid,.eco-grid,.cc-grid,.portfolio-grid,.insight-grid,.grid-4,.steps,.stat-strip,.trust-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  .grid-3,.svc-grid,.proof-grid,.behind-grid,.behind-grid--2,.impact-list,.mod-grid,.check-grid,.eco-grid,.cc-grid,.portfolio-grid,.insight-grid,.grid-4,.steps,.stat-strip,.trust-row,.footer-grid,.hsc-grid{grid-template-columns:1fr!important}
}
/* homepage hero: declutter floating overlays on phones, no overlap with trust band */
@media (max-width:900px){ .hh-right{margin-bottom:30px} }
@media (max-width:560px){
  .hh-ai{display:none}
  .hh-phone{width:38%;right:2%;bottom:-2%}
  .hh-stage{padding-bottom:16%}
  .hh-title{font-size:clamp(2.3rem,10.5vw,3rem)}
}
/* recreated-logo lockup in case-study hero: shrink cleanly on phones */
@media (max-width:560px){
  .cs-logo-mark{width:42px;height:42px}
  .cs-logo-words b{font-size:23px}
  .cs-logo-words i{font-size:9px;letter-spacing:1.6px}
  .cs-pass b{font-size:34px}
  .cs-logo-lockup{gap:10px;flex-wrap:wrap}
}

/* premium hero kicker (replaces the green-dot pill) */
.hh-kicker{display:block;font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:700;letter-spacing:.1px;color:var(--ink-2);margin-bottom:6px}
.hh-kicker-o{color:var(--orange)}

/* ============ PREMIUM NAV REDESIGN — Apple × Stripe × Linear × Vercel ============ */
.site-header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(15,26,42,.07)}
.site-header.scrolled{background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(15,26,42,.05)}
.site-header .nav{height:76px}
.brand{gap:11px}
.nav-right{display:flex;align-items:center;gap:12px}
@media (min-width:861px){
  .nav-links{gap:clamp(6px,1.7vw,22px)}
  .nav-links a{position:relative;padding:8px 2px;border-radius:0;font-weight:500;font-size:.95rem;color:var(--ink-2);background:transparent!important;transition:color .2s var(--ease)}
  .nav-links a:hover{color:var(--ink);background:transparent!important}
  .nav-links a.active{color:var(--orange-700);font-weight:600;background:transparent!important}
  .nav-links a.active::after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#FF6A00,#FF8C24)}
}
/* clean globe + AR language button (no big pill) */
.site-header .lang{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;border:1px solid rgba(15,26,42,.10);background:transparent;color:var(--ink-2);font-weight:600;font-size:.85rem;letter-spacing:.3px;transition:color .2s,border-color .2s,background .2s}
.site-header .lang:hover{color:var(--ink);border-color:rgba(15,26,42,.20);background:rgba(15,26,42,.03)}
.site-header .lang svg{width:16px;height:16px}
/* exclusive gradient Book a Meeting button */
.site-header .nav-right .btn{flex:none;background:linear-gradient(135deg,#FF6A00,#FF8C24);color:#fff;border:0;border-radius:15px;padding:10px 20px;font-size:.92rem;font-weight:600;box-shadow:none;transition:transform .2s var(--ease),box-shadow .25s var(--ease)}
.site-header .nav-right .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,106,0,.34)}
.site-header .nav-right .btn:active{transform:translateY(0)}