/* ============================================================
   Inkstone — Landing Page
   Built on the Inkstone design system (paper/ink/red, serif+grotesk+mono)
   ============================================================ */

:root{
  --red:#E82511;
  --red-press:#cf1f0e;
  --ink:#0E0E0D;
  --paper:#FBFAF7;
  --panel:#F1EFE8;
  --line:#E4E1D8;
  --line2:#D7D3C8;
  --muted:#6E6A62;

  /* dark-section tokens */
  --d-bg:#0E0E0D;
  --d-elev:#161615;
  --d-line:#272725;
  --d-line2:#34332F;
  --d-text:#F4F2EC;
  --d-muted:#9C988E;

  --sans:'Schibsted Grotesk', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --r:9px;
  --r-lg:16px;
  --maxw:1200px;
  --gut:40px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--red); color:#fff; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ---------- shared atoms ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.eyebrow .dot{ width:7px; height:7px; background:var(--red); border-radius:50%; flex:none; }
.serif{ font-family:var(--serif); font-weight:400; }
em.s{ font-family:var(--serif); font-style:italic; }
.rule{ height:1px; background:var(--line); border:0; width:100%; margin:0; }

.section{ position:relative; padding:118px 0; }
.section-head{ max-width:680px; margin:0 0 58px; }
.section-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px, 5vw, 60px); line-height:1.02; letter-spacing:-.015em;
  margin:18px 0 0;
}
.section-head h2 em{ font-style:italic; }
.section-head .sub{ font-size:18px; line-height:1.55; color:var(--muted); margin:20px 0 0; max-width:540px; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  padding:13px 20px; border-radius:var(--r); cursor:pointer;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  transition:transform .45s var(--ease), background .25s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover{ box-shadow:0 10px 30px -12px rgba(14,14,13,.5); transform:translateY(-1px); }
.btn:hover .arw{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }
.btn-red{ --bg:var(--red); --fg:#fff; --bd:var(--red); }
.btn-red:hover{ --bg:var(--red-press); box-shadow:0 12px 34px -12px rgba(232,37,17,.6); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line2); }
.btn-ghost:hover{ --bd:var(--ink); box-shadow:none; }
.btn-lg{ padding:16px 26px; font-size:16.5px; }
/* on-dark variants */
.on-dark .btn-ghost{ --fg:var(--d-text); --bd:var(--d-line2); }
.on-dark .btn-ghost:hover{ --bd:var(--d-text); }
.btn-paper{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn-paper:hover{ box-shadow:0 12px 34px -12px rgba(0,0,0,.6); }

.textlink{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:15.5px;
  border-bottom:1px solid transparent; transition:border-color .25s, gap .35s var(--ease);
}
.textlink .arw{ color:var(--red); transition:transform .35s var(--ease); }
.textlink:hover{ gap:11px; }
.textlink:hover .arw{ transform:translateX(2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
.nav.scrolled{
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px -18px rgba(14,14,13,.28);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:25px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--muted); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
/* services dropdown */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.nav-drop-btn{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--muted); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0; transition:color .2s; }
.nav-drop-btn:hover, .nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn{ color:var(--ink); }
.nav-drop .caret{ font-size:9px; transition:transform .25s var(--ease); }
.nav-drop:hover .caret, .nav-drop:focus-within .caret{ transform:rotate(180deg); }
.nav-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(2px);
  background:var(--paper); border:1px solid var(--line2); border-radius:13px; padding:8px; min-width:236px;
  display:flex; flex-direction:column; gap:2px; box-shadow:0 20px 48px -24px rgba(14,14,13,.45);
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:120; }
.nav-menu::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(10px); }
.nav-menu a{ display:block; font-size:14.5px; font-weight:500; color:var(--ink); padding:11px 13px; border-radius:9px; transition:background .15s, color .15s; }
.nav-menu a:hover{ background:var(--panel); color:var(--red); }
.nav-menu .nm-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:8px 13px 4px; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-cta .signin{ font-size:15px; font-weight:500; color:var(--muted); transition:color .2s; }
.nav-cta .signin:hover{ color:var(--ink); }
.nav-burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:148px 0 96px; overflow:hidden; }
#flow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 130% at 104% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
  mask-image:radial-gradient(120% 130% at 104% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%); }
#hero-premium{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(135% 130% at 108% 6%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 84%);
  mask-image:radial-gradient(135% 130% at 108% 6%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 84%); }
#hero-flow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:none;
  -webkit-mask-image:radial-gradient(120% 130% at 104% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
  mask-image:radial-gradient(120% 130% at 104% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%); }
@media (max-width:760px){ #hero-premium{ display:none; } #hero-flow{ display:block; } #svc-hero{ display:none; } }
#svc-hero{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, #000 36%, rgba(0,0,0,.45) 62%, transparent 84%);
  mask-image:linear-gradient(to left, #000 36%, rgba(0,0,0,.45) 62%, transparent 84%); }
.hero-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--paper) 4%, transparent 42%),
    linear-gradient(0deg, var(--paper) 1%, transparent 16%);
}
.hero-inner{ position:relative; z-index:2; }
.hero-eyebrow{ margin-bottom:26px; }
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(50px, 7.1vw, 94px); line-height:1.0; letter-spacing:-.022em;
  margin:0; max-width:none; text-wrap:balance;
}
.hero h1 em{ font-style:italic; }
.hero h1 .ln{ display:block; }
.hero .lede{
  font-size:clamp(18px,2vw,21px); line-height:1.5; color:var(--muted);
  max-width:50ch; margin:30px 0 0;
}
.hero .lede b{ color:var(--ink); font-weight:600; }

.hero-form{
  display:flex; gap:10px; margin:38px 0 0; max-width:520px;
}
.field{
  flex:1; display:flex; align-items:center;
  background:#fff; border:1px solid var(--line2); border-radius:var(--r);
  padding:0 4px 0 16px; transition:border-color .2s, box-shadow .25s;
}
.field:focus-within{ border-color:var(--ink); box-shadow:0 0 0 4px rgba(14,14,13,.06); }
.field input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--sans); font-size:16px; color:var(--ink); height:52px;
}
.field input::placeholder{ color:#857f74; }
.field-phone{ padding-left:0; }
.cc{
  flex:none; width:122px; height:52px; border:0; outline:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  padding:0 17px 0 16px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6A62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.cc-div{ width:1px; height:26px; background:var(--line2); flex:none; }
.field-phone input{ padding-left:14px; }
.hero-form .btn{ height:54px; }
.form-note{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--muted);
  margin:14px 0 0; display:flex; align-items:center; gap:8px;
}
.form-note .ok{ color:var(--red); }

/* trust strip */
.trust{ margin-top:64px; }
.trust .tlabel{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.trust-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 38px; margin-top:18px; }
.trust-row .logo{
  font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--muted);
  display:flex; align-items:center; gap:7px; transition:color .25s;
}
.trust-row .logo:hover{ color:var(--ink); }
.trust-row .logo .g{ width:13px; height:13px; border-radius:3px; background:#cdc9bf; }
.trust-row.certs{ gap:14px 16px; }
.cert{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
  border:1px solid var(--line2); border-radius:999px; padding:9px 16px 9px 13px; background:#fff;
  transition:border-color .25s, box-shadow .25s; }
.cert:hover{ border-color:var(--line); box-shadow:0 8px 22px -14px rgba(0,0,0,.3); }
.cert .cdot{ width:13px; height:13px; border-radius:50%; flex:none;
  background:conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); }
.cert .cdot.meta{ background:#0A7CFF; }

/* ============================================================
   METRIC BAR
   ============================================================ */
.metrics{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.metric{ padding:42px 0; border-left:1px solid var(--line); padding-left:30px; }
.metric:first-child{ border-left:0; padding-left:0; }
.metric .num{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,4.4vw,58px); line-height:1; letter-spacing:-.02em; }
.metric .num .u{ color:var(--red); }
.metric .num.word{ font-style:italic; color:var(--red); }
.metric .lbl{ font-size:14px; color:var(--muted); margin-top:12px; max-width:20ch; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-list{ border-top:1px solid var(--line); }
a.svc{ color:inherit; text-decoration:none; }
a.svc .body h3{ transition:color .25s var(--ease); }
a.svc:hover .body h3{ color:var(--red); }
a.svc:hover .more .arw{ transform:translateX(4px); }
.svc{
  display:grid; grid-template-columns:88px 1fr 360px; gap:40px; align-items:start;
  padding:46px 0; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.svc:hover{ background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--panel) 60%, transparent)); }
.svc .n{ font-family:var(--serif); font-size:30px; color:var(--red); line-height:1; }
.svc .body h3{ font-size:27px; font-weight:600; letter-spacing:-.018em; margin:0 0 12px; }
.svc .body p{ font-size:17px; line-height:1.55; color:var(--muted); margin:0; max-width:46ch; }
.svc .feat{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.svc .feat li{ font-family:var(--mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink); display:flex; gap:11px; align-items:baseline; }
.svc .feat li::before{ content:'+'; color:var(--red); font-weight:700; }
.svc .more{ margin-top:18px; }

/* ============================================================
   WHY INKSTONE
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.why-card{ background:var(--paper); padding:40px 38px; display:flex; flex-direction:column; gap:16px; transition:background .3s var(--ease); }
.why-card:hover{ background:color-mix(in srgb,var(--panel) 55%, var(--paper)); }
.why-ic{ width:46px; height:46px; border:1px solid var(--line2); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--red); }
.why-ic svg{ width:23px; height:23px; }
.why-card h3{ font-size:23px; font-weight:600; letter-spacing:-.015em; margin:0; }
.why-card p{ font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:42ch; }
.why-card .wn{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:-4px; }
.why-services{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center; }
.why-services .wsl{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-inline-end:6px; }
.why-services a{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line2); border-radius:999px; padding:9px 16px; transition:border-color .2s, color .2s; }
.why-services a:hover{ border-color:var(--ink); color:var(--red); }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; } }

/* ============================================================
   DARK SECTION — PROCESS
   ============================================================ */
.dark{ background:var(--d-bg); color:var(--d-text); }
.dark .section-head .sub{ color:var(--d-muted); }
.on-dark .eyebrow{ color:var(--d-muted); }
.dark .rule{ background:var(--d-line); }
.process{ position:relative; overflow:hidden; }
#flow-dark{ position:absolute; top:0; right:0; width:66%; height:100%; z-index:0; pointer-events:none; opacity:1;
  -webkit-mask-image:radial-gradient(120% 130% at 100% 0%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 82%);
  mask-image:radial-gradient(120% 130% at 100% 0%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 82%); }
.process .container{ position:relative; z-index:2; }
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--d-line); margin-top:8px; }
.proc-step{ padding:34px 26px 38px 0; border-right:1px solid var(--d-line); position:relative; display:flex; flex-direction:column; }
.proc-step:last-child{ border-right:0; }
.proc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.proc-ic{ width:42px; height:42px; border:1px solid var(--d-line); border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--paper); background:color-mix(in srgb, var(--paper) 5%, transparent); }
.proc-ic svg{ width:21px; height:21px; }
.proc-step .pn{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--red); }
.proc-step h3{ font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:-.01em; margin:0 0 12px; }
.proc-step p{ font-size:15px; line-height:1.55; color:var(--d-muted); margin:0; }
.proc-out{ display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:16px; border-top:1px solid var(--d-line);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); }
.proc-out .pk{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.proc-step p{ margin-bottom:20px; }
.proc-step .bar{ position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--red); transition:width 1.1s var(--ease); }
.process.in .proc-step .bar{ width:34px; }
.process.in .proc-step:nth-child(2) .bar{ transition-delay:.12s; }
.process.in .proc-step:nth-child(3) .bar{ transition-delay:.24s; }
.process.in .proc-step:nth-child(4) .bar{ transition-delay:.36s; }

/* ============================================================
   SELECTED WORK
   ============================================================ */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.case{
  display:block; color:inherit; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
a.case .meta h3{ transition:color .25s var(--ease); }
a.case:hover .meta h3{ color:var(--red); }
.case:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -30px rgba(14,14,13,.35); border-color:var(--line2); }
.case .thumb{
  height:296px; position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,#ECEAE2 0 9px,#F4F2EC 9px 18px);
  display:flex; align-items:flex-end; padding:22px;
}
.case .thumb .badge{
  position:absolute; top:18px; left:18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); background:var(--paper); border:1px solid var(--line); padding:6px 11px; border-radius:6px;
}
.case .thumb .shot{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#a29e94; }
.case .meta{ padding:26px 28px 30px; }
.case .meta h3{ font-family:var(--serif); font-weight:400; font-size:30px; letter-spacing:-.01em; margin:0; line-height:1.05; }
.case .meta p{ font-size:15.5px; line-height:1.55; color:var(--muted); margin:12px 0 22px; }
.case .stats{ display:flex; gap:32px; border-top:1px solid var(--line); padding-top:20px; }
.case .stats .st .v{ font-family:var(--serif); font-size:30px; line-height:1; letter-spacing:-.01em; }
.case .stats .st .v .u{ color:var(--red); }
.case .stats .st .k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.case .tags{ display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:20px; }
.case .tags span{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line2); padding:6px 11px; border-radius:6px; white-space:nowrap; }

/* ============================================================
   WORK MOCKUPS (in-card prototypes)
   ============================================================ */
.thumb.mock{ padding:0; display:block; }
.thumb.mock .badge{ white-space:nowrap; }
.thumb.mock-web{ background:linear-gradient(135deg,#F5F3EC,#E7E4DB); }
.thumb.mock-both{ background:linear-gradient(135deg,#1A1812,#0E0E0D); }
.thumb.mock-mobile{ background:linear-gradient(150deg,#F3F1EA,#E6E2D8); }
.thumb.mock-camp{ background:radial-gradient(130% 130% at 72% 8%, #1C1A14, #0C0C0B); }

/* browser */
.browser{ position:absolute; left:32px; right:32px; top:50px; bottom:-24px; background:#fff;
  border:1px solid var(--line); border-radius:11px 11px 0 0; overflow:hidden;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.mock-both .browser{ left:26px; right:128px; top:52px; bottom:-30px; }
.b-bar{ height:31px; flex:none; display:flex; align-items:center; gap:6px; padding:0 13px; background:var(--paper); border-bottom:1px solid var(--line); }
.b-bar .bd{ width:8px; height:8px; border-radius:50%; background:var(--line2); }
.b-bar .bd:first-child{ background:var(--red); }
.b-bar .url{ margin-left:9px; font-family:var(--mono); font-size:10px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 13px; }
.b-body{ flex:1; display:flex; min-height:0; }
.b-side{ width:66px; flex:none; border-right:1px solid var(--line); padding:13px 11px; display:flex; flex-direction:column; gap:9px; }
.b-side span{ height:7px; border-radius:3px; background:var(--line); }
.b-side span:first-child{ background:var(--red); width:74%; }
.b-main{ flex:1; padding:15px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.b-row{ display:flex; gap:12px; }
.kpi{ flex:1; border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
.kpi-n{ font-family:var(--serif); font-size:24px; line-height:1; }
.kpi-n .u{ color:var(--red); }
.kpi-l{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.b-chart{ flex:1; border:1px solid var(--line); border-radius:9px; padding:13px; display:flex; align-items:flex-end; gap:7px; min-height:58px; }
.b-chart i{ flex:1; background:var(--line2); border-radius:3px 3px 0 0; }
.b-chart i.r{ background:var(--red); }

/* richer web dashboard mock */
.mock-web .browser{ top:52px; bottom:14px; }
.mock-web .b-main{ padding:12px; gap:9px; }
.b-brand{ padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--line); }
.b-mk{ display:block; width:17px; height:17px;
  background:conic-gradient(from 0deg, var(--red) 0 25%, transparent 0 50%, var(--red) 0 75%, transparent 0); }
.b-nav{ display:flex; flex-direction:column; gap:10px; }
.ni{ display:flex; align-items:center; gap:7px; }
.ni i{ width:11px; height:11px; border-radius:3px; background:var(--line2); flex:none; }
.ni b{ height:6px; border-radius:3px; background:var(--line); flex:1; }
.ni.active i{ background:var(--red); }
.ni.active b{ background:var(--ink); opacity:.5; width:80%; flex:none; }
.b-head{ display:flex; align-items:center; justify-content:space-between; }
.b-title{ width:82px; height:11px; border-radius:4px; background:var(--ink); opacity:.78; }
.b-ava{ width:21px; height:21px; border-radius:50%; background:var(--panel); border:1px solid var(--line2); }
.mock-web .b-row{ gap:8px; }
.mock-web .kpi{ padding:8px 9px; }
.mock-web .kpi-l{ margin:0 0 4px; }
.mock-web .kpi-n{ font-size:18px; }
.kpi-t{ font-family:var(--mono); font-size:8px; letter-spacing:.02em; color:#2E9E6B; margin-top:4px; }
.mock-web .b-chart{ padding:0; overflow:hidden; position:relative; flex:1; min-height:44px; }
.mock-web .b-chart svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.led-main{ justify-content:center; gap:0; }
.led-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.led-row:last-child{ border-bottom:0; }
.led-row span{ height:7px; border-radius:3px; }
.led-k{ width:46%; background:var(--line); }
.led-v{ width:20%; background:var(--red); opacity:.55; }

/* landing page mock */
.mock-landing{ background:linear-gradient(135deg,#F5F3EC,#E7E4DB); }
.mock-landing .browser{ left:28px; right:28px; top:50px; bottom:-22px; }
.lp-body{ flex-direction:column; background:#fff; padding:0; overflow:hidden; }
.lp-nav{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line); }
.lp-logo{ width:20px; height:9px; border-radius:3px; background:var(--ink); }
.lp-menu{ display:flex; gap:10px; margin-left:8px; }
.lp-menu i{ width:24px; height:5px; border-radius:3px; background:var(--line2); }
.lp-cta{ width:40px; height:16px; border-radius:6px; background:var(--red); margin-left:auto; }
.lp-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:26px 20px 20px; }
.lp-eyebrow{ width:74px; height:9px; border-radius:5px; background:color-mix(in srgb,var(--red) 22%, transparent); }
.lp-h1{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.lp-h1 span{ height:13px; border-radius:5px; background:var(--ink); }
.lp-h1 span:nth-child(1){ width:188px; }
.lp-h1 span:nth-child(2){ width:128px; }
.lp-sub{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:2px; }
.lp-sub span{ height:6px; border-radius:3px; background:var(--line2); }
.lp-sub span:nth-child(1){ width:206px; }
.lp-sub span:nth-child(2){ width:166px; }
.lp-btns{ display:flex; gap:9px; margin-top:6px; }
.lp-b{ width:64px; height:22px; border-radius:7px; border:1px solid var(--line2); }
.lp-b.r{ background:var(--red); border-color:var(--red); }
.lp-logos{ display:flex; justify-content:center; gap:22px; padding:4px 20px 16px; }
.lp-logos i{ width:36px; height:9px; border-radius:4px; background:var(--line); }
.lp-feats{ display:flex; gap:12px; padding:0 18px; }
.lp-card{ flex:1; height:64px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }

/* e-commerce storefront mock */
.mock-shop{ background:linear-gradient(135deg,#F2EFE7,#E5E1D6); }
.mock-shop .browser{ left:28px; right:28px; top:50px; bottom:-22px; }
.shop-body{ flex-direction:column; background:#fff; }
.shop-top{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; border-bottom:1px solid var(--line); }
.shop-logo{ width:58px; height:11px; border-radius:4px; background:var(--ink); }
.shop-cart{ width:22px; height:22px; border-radius:7px; background:var(--red); }
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:15px; }
.prod{ display:flex; flex-direction:column; gap:7px; }
.prod-img{ height:70px; border-radius:9px; background:repeating-linear-gradient(135deg,#ECEAE2 0 8px,#F4F2EC 8px 16px); border:1px solid var(--line); }
.prod-line{ height:7px; width:80%; border-radius:3px; background:var(--line2); }
.prod-price{ height:7px; width:42%; border-radius:3px; background:var(--red); opacity:.7; }

/* code / API window mock */
.mock-code{ background:linear-gradient(135deg,#1A1812,#0E0E0D); }
.mock-code .browser{ left:28px; right:28px; top:50px; bottom:-22px; background:#15140f; border-color:#2a2820; }
.mock-code .b-bar{ background:#100f0b; border-bottom:1px solid #2a2820; }
.mock-code .b-bar .bd{ background:#3a382e; }
.mock-code .b-bar .bd:first-child{ background:var(--red); }
.mock-code .b-bar .url{ background:#1a1812; border-color:#2a2820; color:#6a665a; }
.code-body{ flex:1; display:flex; min-height:0; }
.code-gutter{ width:30px; flex:none; padding:14px 0; display:flex; flex-direction:column; gap:9px; align-items:center; border-right:1px solid #211f19; }
.code-gutter span{ width:8px; height:6px; border-radius:2px; background:#332f25; }
.code-main{ flex:1; padding:14px 14px; display:flex; flex-direction:column; gap:9px; }
.code-line{ display:flex; gap:6px; align-items:center; }
.code-line.i1{ padding-inline-start:16px; }
.code-line.i2{ padding-inline-start:32px; }
.code-line i{ height:7px; border-radius:3px; }
.cl-k{ background:#d2553f; }
.cl-v{ background:#5a7fb0; }
.cl-t{ background:#3a382e; }
.cl-g{ background:#4f7a52; }

/* Google search ad mock */
.mock-serp{ background:linear-gradient(135deg,#F5F3EC,#E7E4DB); }
.mock-serp .browser{ left:28px; right:28px; top:50px; bottom:-22px; }
.serp-body{ flex-direction:column; background:#fff; padding:15px 17px; gap:14px; }
.serp-search{ height:30px; border:1px solid var(--line2); border-radius:999px; display:flex; align-items:center; padding:0 15px; flex:none; }
.serp-search span{ height:7px; width:130px; border-radius:3px; background:var(--line2); }
.serp-ad{ display:flex; flex-direction:column; gap:6px; }
.serp-adtag{ font-family:var(--mono); font-size:9px; font-weight:700; color:#1a7f37; border:1px solid #cdebd4; background:#eafaef; padding:1px 7px; border-radius:4px; align-self:flex-start; }
.serp-title{ height:10px; width:72%; border-radius:3px; background:#1a4fc4; }
.serp-url{ height:6px; width:38%; border-radius:3px; background:#1a7f37; opacity:.65; }
.serp-desc{ height:6px; width:92%; border-radius:3px; background:var(--line2); }
.serp-desc.s{ width:74%; }
.serp-result{ display:flex; flex-direction:column; gap:6px; opacity:.8; }

/* phone */
.phone{ position:absolute; left:50%; bottom:-34px; transform:translateX(-50%) rotate(-3deg);
  width:152px; height:298px; background:#0E0E0D; border-radius:30px; padding:7px;
  box-shadow:0 30px 58px -24px rgba(0,0,0,.55); }
.phone::after{ content:''; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:44px; height:5px; border-radius:3px; background:#2c2b28; }
.p-screen{ height:100%; background:var(--paper); border-radius:23px; overflow:hidden; padding:25px 16px 16px; display:flex; flex-direction:column; gap:13px; }
.p-top{ display:flex; align-items:center; justify-content:space-between; }
.p-h{ font-family:var(--serif); font-size:20px; line-height:1; }
.p-pill{ width:28px; height:9px; border-radius:5px; background:var(--panel); border:1px solid var(--line); }
.ring{ position:relative; width:108px; height:108px; margin:6px auto 2px; border-radius:50%;
  background:conic-gradient(var(--red) 0 78%, var(--line) 0); display:flex; align-items:center; justify-content:center; }
.ring::before{ content:''; position:absolute; width:82px; height:82px; border-radius:50%; background:var(--paper); }
.ring-n{ position:relative; font-family:var(--serif); font-size:32px; }
.p-list{ display:flex; flex-direction:column; gap:9px; }
.p-list span{ height:29px; border-radius:8px; background:#fff; border:1px solid var(--line); }
.led-bal{ font-family:var(--serif); font-size:28px; line-height:1; }
.led-bal .u{ color:var(--red); }
.mock-both .phone{ left:auto; right:16px; bottom:-40px; transform:rotate(4deg); width:122px; height:240px; padding:6px; }
.mock-both .p-screen{ padding:20px 13px 14px; gap:11px; border-radius:19px; }
.mock-both .p-h{ font-size:16px; }

/* mobile app showcase — full device, complete app screen */
.mock-mobile .phone{ width:150px; height:310px; top:46px; bottom:auto; padding:7px; }
.mock-mobile .phone-front{ left:39%; transform:translateX(-50%) rotate(-4deg); z-index:2; }
.mock-mobile .phone-back{ left:62%; top:62px; transform:translateX(-50%) rotate(5deg) scale(.94); z-index:1; filter:brightness(.99); }
.mock-mobile .phone-back .p-screen{ opacity:.96; }
.mock-mobile .phone::after{ top:15px; width:42px; height:5px; }
.mock-mobile .p-screen{ padding:0; display:flex; flex-direction:column; background:var(--paper); border-radius:22px; }
.a-status{ display:flex; justify-content:space-between; align-items:center; padding:10px 15px 2px; }
.a-time{ font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--ink); }
.a-sig{ display:flex; gap:2px; align-items:flex-end; }
.a-sig i{ width:3px; background:var(--ink); border-radius:1px; }
.a-sig i:nth-child(1){ height:4px; }
.a-sig i:nth-child(2){ height:6px; }
.a-sig i:nth-child(3){ height:8px; }
.a-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 15px 11px; }
.a-hi{ font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.a-name{ font-family:var(--serif); font-size:21px; line-height:1; margin-top:3px; }
.a-ava{ width:27px; height:27px; border-radius:50%; background:var(--panel); border:1px solid var(--line2); flex:none; }
.a-hero{ margin:0 13px; background:linear-gradient(140deg,#ED3A23,#C11F0E); border-radius:16px; padding:13px 14px; color:#fff; box-shadow:0 14px 26px -14px rgba(232,37,17,.6); }
.a-hk{ font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.a-hnum{ font-family:var(--serif); font-size:34px; line-height:1; margin-top:5px; }
.a-hu{ font-size:14px; opacity:.7; margin-left:2px; }
.a-hbar{ height:5px; border-radius:3px; background:rgba(255,255,255,.28); margin-top:11px; overflow:hidden; }
.a-hbar i{ display:block; width:78%; height:100%; background:#fff; border-radius:3px; }
.a-hsub{ font-family:var(--mono); font-size:7.5px; letter-spacing:.04em; margin-top:9px; opacity:.92; }
.a-tiles{ display:flex; gap:9px; padding:11px 13px 0; }
.a-tile{ flex:1; border:1px solid var(--line); border-radius:11px; padding:9px 10px; background:#fff; }
.a-tk{ font-family:var(--mono); font-size:7px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; }
.a-tv{ font-family:var(--serif); font-size:16px; display:block; margin-top:4px; }
.a-tab{ margin-top:auto; display:flex; justify-content:space-around; align-items:center; padding:10px 16px; border-top:1px solid var(--line); }
.a-tab .td{ width:16px; height:16px; border-radius:5px; background:var(--line2); }
.a-tab .td.on{ background:var(--red); }
.a-chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:5px; height:74px; margin:4px 13px 0; padding:11px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.a-chart i{ flex:1; border-radius:3px 3px 0 0; background:var(--line2); }
.a-chart i.on{ background:var(--red); }
.a-rows{ display:flex; flex-direction:column; gap:9px; padding:11px 13px 0; }
.a-row{ display:flex; align-items:center; gap:9px; }
.a-row .a-ic{ width:24px; height:24px; border-radius:8px; background:var(--panel); border:1px solid var(--line); flex:none; }
.a-row .a-bar{ height:7px; border-radius:4px; background:var(--line); flex:1; }
.a-row .a-bar.s{ flex:none; width:30px; background:var(--line2); }

/* campaign */
/* campaign — live ads-manager results panel */
.mock-camp{ background:radial-gradient(130% 130% at 50% 0%, #1C1A14, #0C0C0B); }
.admgr{ position:absolute; inset:52px 32px 30px; border-radius:15px; padding:16px 17px; display:flex; flex-direction:column; gap:13px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); box-shadow:0 30px 60px -34px rgba(0,0,0,.7); backdrop-filter:blur(2px); }
.am-head{ display:flex; align-items:center; gap:9px; }
.am-title{ font-family:var(--sans); font-weight:600; font-size:14px; color:#FBFAF7; }
.am-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:#46d39a;
  border:1px solid rgba(70,211,154,.35); border-radius:999px; padding:4px 9px; }
.am-live i{ width:6px; height:6px; border-radius:50%; background:#46d39a; }
.am-kpis{ display:flex; gap:9px; }
.am-kpi{ flex:1; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:9px 10px; background:rgba(255,255,255,.02); }
.am-k{ font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,250,247,.5); display:block; }
.am-v{ font-family:var(--serif); font-size:21px; color:#FBFAF7; display:block; margin-top:5px; line-height:1; }
.am-v .x{ color:var(--red); font-size:14px; }
.am-v.down{ color:#46d39a; }
.am-chart{ position:relative; flex:1; min-height:60px; border:1px solid rgba(255,255,255,.07); border-radius:11px; overflow:hidden; background:rgba(255,255,255,.015); }
.am-chart svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.am-chart .grid{ stroke:rgba(255,255,255,.07); stroke-width:1; vector-effect:non-scaling-stroke; }
.am-area{ fill:url(#amg); opacity:0; }
.am-line{ fill:none; stroke:var(--red); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.am-dot{ position:absolute; right:6%; top:11%; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(232,37,17,.6); }

/* ---- branding board mock ---- */
.mock-brand{ background:linear-gradient(135deg,#F4F2EB,#E7E3D9); }
.brandboard{ position:absolute; inset:34px 30px 30px; background:var(--paper); border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:16px; padding:24px 26px; }
.brandboard{ position:absolute; inset:52px 30px 30px; background:var(--paper); border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:15px; padding:22px 24px; overflow:hidden; }
.bb-top{ display:flex; align-items:center; gap:14px; }
.bb-tile{ width:50px; height:50px; flex:none; border-radius:13px; background:var(--ink); display:flex; align-items:center; justify-content:center; position:relative; }
.bb-tile::after{ content:''; position:absolute; inset:-6px; border-radius:18px; border:1.5px solid rgba(232,37,17,.32); animation:bbpulse 2.8s ease-out infinite; }
@keyframes bbpulse{ 0%{ transform:scale(.88); opacity:.75; } 100%{ transform:scale(1.22); opacity:0; } }
.bb-spin{ width:26px; height:26px; fill:var(--red); transform-origin:50% 50%; animation:bbspin 9s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes bbspin{ 0%,18%{ transform:rotate(0deg); } 50%,68%{ transform:rotate(90deg); } 100%{ transform:rotate(180deg); } }
.bb-id{ min-width:0; }
.bb-word{ font-family:var(--sans); font-weight:700; font-size:27px; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.bb-word .dot{ color:var(--red); }
.bb-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.bb-swatches{ display:flex; gap:9px; }
.bb-swatches span{ flex:1; height:32px; border-radius:8px; background:var(--c); border:1px solid rgba(0,0,0,.06);
  transform-origin:center bottom; animation:bbsw 3.6s ease-in-out infinite; }
.bb-swatches span:nth-child(1){ animation-delay:0s; }
.bb-swatches span:nth-child(2){ animation-delay:.18s; }
.bb-swatches span:nth-child(3){ animation-delay:.36s; }
.bb-swatches span:nth-child(4){ animation-delay:.54s; }
.bb-swatches span:nth-child(5){ animation-delay:.72s; }
@keyframes bbsw{ 0%,72%,100%{ transform:scaleY(1); } 14%{ transform:scaleY(1.18); } }
.bb-type{ display:flex; gap:16px; align-items:baseline; border-top:1px solid var(--line); padding-top:13px; margin-top:auto; }
.bb-type span{ color:var(--ink); line-height:1; }
.bb-serif{ font-family:var(--serif); font-size:28px; }
.bb-sans{ font-family:var(--sans); font-weight:600; font-size:25px; }
.bb-mono{ font-family:var(--mono); font-size:21px; color:var(--muted); }
.bb-cursor{ width:2px; height:24px; background:var(--red); align-self:center; margin-left:-8px; animation:bbblink 1.1s steps(1) infinite; }
@keyframes bbblink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
.bb-sheen{ position:absolute; top:0; left:-40%; width:36%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-16deg);
  animation:bbsheen 5.5s ease-in-out infinite; }
@keyframes bbsheen{ 0%,28%{ left:-45%; } 56%,100%{ left:115%; } }
@media (prefers-reduced-motion: reduce){
  .bb-spin,.bb-swatches span,.bb-cursor,.bb-sheen,.bb-tile::after{ animation:none; }
  .bb-sheen{ display:none; }
}

/* ---- automation + AI agents: orchestration map ---- */
.mock-agent{ background:radial-gradient(120% 120% at 50% 32%, #F4F2EB, #E6E2D7); overflow:hidden; }
.agentmap{ position:absolute; inset:0; }
.ag-wires{ position:absolute; inset:0; width:100%; height:100%; }
.ag-wires path{ fill:none; stroke:var(--line2); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.ag-wires path.live{ stroke:var(--red); stroke-opacity:.55; stroke-dasharray:3 7; animation:agdash 1.1s linear infinite; }
@keyframes agdash{ to{ stroke-dashoffset:-20; } }
.ag-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:19px;
  background:linear-gradient(150deg,#ED3A23,#C11F0E); display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 38px -14px rgba(232,37,17,.65); z-index:3; }
.ag-core::before{ content:''; position:absolute; inset:-9px; border-radius:26px; border:1.5px solid rgba(232,37,17,.32); animation:agpulse 2.6s ease-out infinite; }
@keyframes agpulse{ 0%{ transform:scale(.86); opacity:.8; } 100%{ transform:scale(1.3); opacity:0; } }
.ag-core svg{ width:30px; height:30px; fill:#fff; }
.ag-sat{ position:absolute; transform:translate(-50%,-50%); background:var(--paper); border:1px solid var(--line2); border-radius:11px;
  padding:8px 11px; display:flex; align-items:center; gap:9px; box-shadow:0 14px 28px -18px rgba(0,0,0,.42); z-index:2; }
.ag-sat .si{ width:23px; height:23px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:12px; }
.ag-sat .sb{ display:flex; flex-direction:column; gap:5px; }
.ag-sat .sb i{ height:4px; border-radius:2px; background:var(--line2); display:block; }
.ag-sat .sb i:first-child{ width:36px; }
.ag-sat .sb i:last-child{ width:22px; background:var(--line); }
.ag-sat.s1{ left:22%; top:24%; } .ag-sat.s1 .si{ color:var(--red); }
.ag-sat.s2{ left:78%; top:24%; }
.ag-sat.s3{ left:22%; top:76%; }
.ag-sat.s4{ left:78%; top:76%; } .ag-sat.s4 .si{ color:#2E9E6B; }
@media (prefers-reduced-motion: reduce){ .ag-wires path.live{ animation:none; } .ag-core::before{ animation:none; opacity:.5; } }

/* ---- use-case: support chat ---- */
.mock-chat{ background:radial-gradient(120% 120% at 50% 0%, #F4F2EB, #E6E2D7); overflow:hidden; }
.chatui{ position:absolute; inset:30px 30px 0; background:var(--paper); border:1px solid var(--line2); border-radius:14px 14px 0 0;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.chat-bar{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--line); }
.chat-ava{ width:26px; height:26px; border-radius:8px; flex:none; background:linear-gradient(150deg,#ED3A23,#C11F0E); display:flex; align-items:center; justify-content:center; }
.chat-ava svg{ width:15px; height:15px; fill:#fff; }
.chat-who{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.1; }
.chat-stat{ font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#2E9E6B; margin-top:2px; display:flex; align-items:center; gap:5px; }
.chat-stat i{ width:5px; height:5px; border-radius:50%; background:#2E9E6B; }
.chat-pill{ margin-left:auto; font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); border:1px solid var(--line2); border-radius:999px; padding:4px 9px; }
.chat-body{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.bub{ max-width:78%; padding:9px 12px; border-radius:13px; font-size:12.5px; line-height:1.4; opacity:0; transform:translateY(6px); }
.bub.them{ align-self:flex-start; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; }
.bub.me{ align-self:flex-end; background:linear-gradient(150deg,#ED3A23,#C11F0E); color:#fff; border-bottom-right-radius:4px; }
.bub.typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:11px 13px; }
.bub.typing i{ width:5px; height:5px; border-radius:50%; background:var(--muted); display:block; }

/* ---- use-case: lead → CRM flow ---- */
.mock-flow{ background:radial-gradient(120% 120% at 50% 0%, #F4F2EB, #E6E2D7); overflow:hidden; }
.flowui{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:0; padding:34px 26px; }
.flow-step{ display:flex; align-items:center; gap:13px; padding:9px 13px; background:var(--paper); border:1px solid var(--line2); border-radius:12px;
  box-shadow:0 12px 26px -20px rgba(0,0,0,.4); position:relative; z-index:2; }
.flow-ic{ width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:14px; }
.flow-step.on .flow-ic{ background:linear-gradient(150deg,#ED3A23,#C11F0E); color:#fff; border-color:transparent; }
.flow-tx{ flex:1; min-width:0; }
.flow-t{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.1; }
.flow-s{ font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.flow-chk{ width:17px; height:17px; border-radius:50%; flex:none; border:1.5px solid var(--line2); display:flex; align-items:center; justify-content:center; color:transparent; font-size:9px; }
.flow-step.on .flow-chk{ border-color:#2E9E6B; color:#2E9E6B; }
.flow-link{ width:2px; height:14px; background:var(--line2); margin:0 0 0 27px; z-index:1; }

@media (prefers-reduced-motion: no-preference){
  .mock-chat .bub{ animation:chatin .5s ease forwards; }
  .mock-chat .bub.b1{ animation-delay:.3s; } .mock-chat .bub.b2{ animation-delay:1.1s; }
  .mock-chat .bub.b3{ animation-delay:1.9s; } .mock-chat .bub.b4{ animation-delay:2.7s; }
  @keyframes chatin{ to{ opacity:1; transform:translateY(0); } }
  .mock-chat .bub.typing i{ animation:chattype 1s ease-in-out infinite; }
  .mock-chat .bub.typing i:nth-child(2){ animation-delay:.15s; }
  .mock-chat .bub.typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes chattype{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-2px); } }
  .mock-flow .flow-ic{ animation:flowglow 4s ease-in-out infinite; }
  .mock-flow .flow-step:nth-child(1) .flow-ic{ animation-delay:0s; }
  .mock-flow .flow-step:nth-child(3) .flow-ic{ animation-delay:.7s; }
  .mock-flow .flow-step:nth-child(5) .flow-ic{ animation-delay:1.4s; }
  .mock-flow .flow-step:nth-child(7) .flow-ic{ animation-delay:2.1s; }
  @keyframes flowglow{ 0%,8%{ background:var(--panel); color:var(--muted); box-shadow:none; } 14%,30%{ background:linear-gradient(150deg,#ED3A23,#C11F0E); color:#fff; box-shadow:0 0 0 4px rgba(232,37,17,.14); } 44%,100%{ background:var(--panel); color:var(--muted); box-shadow:none; } }
  .mock-flow .flow-chk{ animation:flowchk 4s ease-in-out infinite; }
  .mock-flow .flow-step:nth-child(1) .flow-chk{ animation-delay:0s; }
  .mock-flow .flow-step:nth-child(3) .flow-chk{ animation-delay:.7s; }
  .mock-flow .flow-step:nth-child(5) .flow-chk{ animation-delay:1.4s; }
  .mock-flow .flow-step:nth-child(7) .flow-chk{ animation-delay:2.1s; }
  @keyframes flowchk{ 0%,20%{ border-color:var(--line2); color:transparent; } 30%,100%{ border-color:#2E9E6B; color:#2E9E6B; } }
}

/* ---- subtle "live" motion on the rest of the card mocks ---- */
@media (prefers-reduced-motion: no-preference){
  /* web dashboard: chart sweep + active nav pulse + KPI deltas */
  .mock-web .b-chart::after{ content:''; position:absolute; top:0; bottom:0; left:-45%; width:34%; z-index:2;
    background:linear-gradient(100deg,transparent,rgba(232,37,17,.12),transparent); transform:skewX(-14deg);
    animation:mwsweep 4.8s ease-in-out infinite; pointer-events:none; }
  @keyframes mwsweep{ 0%,30%{ left:-45%; } 60%,100%{ left:115%; } }
  .mock-web .ni.active i{ animation:mwpulse 2.4s ease-in-out infinite; }
  @keyframes mwpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
  .mock-web .kpi-t{ animation:mwblink 3s ease-in-out infinite; }
  .mock-web .kpi:nth-child(2) .kpi-t{ animation-delay:.4s; }
  .mock-web .kpi:nth-child(3) .kpi-t{ animation-delay:.8s; }
  @keyframes mwblink{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

  /* landing page: pulse primary CTA + sheen across the page */
  .mock-landing .lp-cta, .mock-landing .lp-b.r{ animation:lpcta 2.4s ease-in-out infinite; }
  @keyframes lpcta{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }
  .mock-landing .lp-body{ position:relative; }
  .mock-landing .lp-body::after{ content:''; position:absolute; top:0; bottom:0; left:-45%; width:32%; z-index:3;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-14deg);
    animation:lpsheen 6s ease-in-out infinite; pointer-events:none; }
  @keyframes lpsheen{ 0%,34%{ left:-45%; } 66%,100%{ left:120%; } }

  /* mobile app: progress fill + chart bars + status dot */
  .mock-mobile .a-hbar i{ animation:mahbar 4.2s ease-in-out infinite; }
  @keyframes mahbar{ 0%{ width:44%; } 55%{ width:86%; } 100%{ width:78%; } }
  .mock-mobile .a-chart i{ transform-origin:bottom; animation:machart 3.4s ease-in-out infinite; }
  .mock-mobile .a-chart i:nth-child(odd){ animation-delay:.3s; }
  .mock-mobile .a-chart i.on{ animation-delay:.15s; }
  @keyframes machart{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.78); } }

  /* ---- amped-up motion ---- */
  /* web: a red highlight travels down the sidebar nav like live navigation */
  .mock-web .b-nav .ni i{ animation:navcycle 5s ease-in-out infinite; }
  .mock-web .b-nav .ni:nth-child(1) i{ animation-delay:0s; }
  .mock-web .b-nav .ni:nth-child(2) i{ animation-delay:1s; }
  .mock-web .b-nav .ni:nth-child(3) i{ animation-delay:2s; }
  .mock-web .b-nav .ni:nth-child(4) i{ animation-delay:3s; }
  .mock-web .b-nav .ni:nth-child(5) i{ animation-delay:4s; }
  @keyframes navcycle{ 0%,10%{ background:var(--red); transform:scale(1.12); } 22%,100%{ background:var(--line2); transform:scale(1); } }
  .mock-web .kpi-n{ display:inline-block; animation:kpitick 3.4s ease-in-out infinite; }
  .mock-web .kpi:nth-child(2) .kpi-n{ animation-delay:.5s; }
  .mock-web .kpi:nth-child(3) .kpi-n{ animation-delay:1s; }
  @keyframes kpitick{ 0%,84%,100%{ transform:translateY(0); } 90%{ transform:translateY(-3px); } }
  .mock-web .b-chart svg path:last-of-type{ stroke-dasharray:7 5; animation:webflow 1.1s linear infinite; }
  @keyframes webflow{ to{ stroke-dashoffset:-24; } }

  /* paid campaign: rising results chart + live pill + KPI pops */
  .mock-camp .am-live i{ animation:amlive 1.6s ease-in-out infinite; }
  @keyframes amlive{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(70,211,154,.5); } 50%{ opacity:.5; box-shadow:0 0 0 4px rgba(70,211,154,0); } }
  .mock-camp .am-line{ stroke-dasharray:360; stroke-dashoffset:360; animation:amdraw 3.6s ease-in-out infinite; }
  @keyframes amdraw{ 0%{ stroke-dashoffset:360; } 55%,100%{ stroke-dashoffset:0; } }
  .mock-camp .am-area{ animation:amarea 3.6s ease-in-out infinite; }
  @keyframes amarea{ 0%,20%{ opacity:0; } 60%,100%{ opacity:1; } }
  .mock-camp .am-dot{ animation:amdot 3.6s ease-in-out infinite; }
  @keyframes amdot{ 0%,52%{ opacity:0; transform:scale(.4); } 60%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(232,37,17,.6); } 100%{ opacity:1; box-shadow:0 0 0 7px rgba(232,37,17,0); } }
  .mock-camp .am-v{ display:inline-block; animation:amv 3.6s ease-in-out infinite; }
  .mock-camp .am-kpi:nth-child(2) .am-v{ animation-delay:.25s; }
  .mock-camp .am-kpi:nth-child(3) .am-v{ animation-delay:.5s; }
  @keyframes amv{ 0%,70%,100%{ transform:translateY(0); } 80%{ transform:translateY(-3px); } }

  /* landing: feature cards rise in a loop + hero CTA bounce */
  .mock-landing .lp-card{ animation:lpcard 3.6s ease-in-out infinite; }
  .mock-landing .lp-feats .lp-card:nth-child(2){ animation-delay:.3s; }
  .mock-landing .lp-feats .lp-card:nth-child(3){ animation-delay:.6s; }
  @keyframes lpcard{ 0%,70%,100%{ transform:translateY(0); box-shadow:none; } 30%{ transform:translateY(-4px); box-shadow:0 8px 16px -10px rgba(0,0,0,.25); } }
  .mock-landing .lp-b.r{ animation:lpbtn 1.8s ease-in-out infinite; }
  @keyframes lpbtn{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

  /* mobile: dramatic chart wave + tab indicator slide + score pop */
  .mock-mobile .a-chart i{ animation:machart2 2.2s ease-in-out infinite; }
  .mock-mobile .a-chart i:nth-child(1){ animation-delay:0s; }
  .mock-mobile .a-chart i:nth-child(2){ animation-delay:.12s; }
  .mock-mobile .a-chart i:nth-child(3){ animation-delay:.24s; }
  .mock-mobile .a-chart i:nth-child(4){ animation-delay:.36s; }
  .mock-mobile .a-chart i:nth-child(5){ animation-delay:.48s; }
  .mock-mobile .a-chart i:nth-child(6){ animation-delay:.6s; }
  .mock-mobile .a-chart i:nth-child(7){ animation-delay:.72s; }
  @keyframes machart2{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.6); } }
  .mock-mobile .a-hnum{ display:inline-block; animation:scorepop 3s ease-in-out infinite; }
  @keyframes scorepop{ 0%,80%,100%{ transform:scale(1); } 88%{ transform:scale(1.08); } }
  .mock-mobile .phone-front .a-tab .td.on{ animation:tabglow 2.4s ease-in-out infinite; }
  @keyframes tabglow{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,37,17,.5); } 50%{ box-shadow:0 0 0 4px rgba(232,37,17,0); } }
}

@media (max-width:760px){
  .browser{ left:24px; right:24px; }
  .mock-both .browser{ right:108px; }
}

/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tier{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px 32px; background:#fff;
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.tier:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -30px rgba(14,14,13,.3); }
.tier.feature{ background:var(--ink); color:var(--d-text); border-color:var(--ink); }
.tier .tname{ display:flex; align-items:center; justify-content:space-between; }
.tier .tname h3{ font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0; }
.tier .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--red); padding:5px 9px; border-radius:5px; }
.tier .who{ font-size:14.5px; color:var(--muted); margin:10px 0 0; min-height:44px; }
.tier.feature .who{ color:var(--d-muted); }
.tier .price{ font-family:var(--serif); font-weight:400; font-size:42px; letter-spacing:-.015em; margin:22px 0 4px; line-height:1; }
.tier .price .per{ font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:500; }
.tier.feature .price .per{ color:var(--d-muted); }
.tier ul{ list-style:none; margin:24px 0 28px; padding:24px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:13px; flex:1; }
.tier.feature ul{ border-top-color:var(--d-line); }
.tier ul li{ font-size:15px; display:flex; gap:11px; align-items:baseline; color:var(--ink); }
.tier.feature ul li{ color:var(--d-text); }
.tier ul li::before{ content:''; width:7px; height:7px; flex:none; transform:translateY(5px); background:
  conic-gradient(from 0deg, var(--red) 0 25%, transparent 0 50%, var(--red) 0 75%, transparent 0); }
.tier .btn{ width:100%; justify-content:center; }

/* ============================================================
   BOOK / CTA  (dark)
   ============================================================ */
.book{ position:relative; overflow:hidden; }
#flow-book{ position:absolute; top:0; right:0; width:64%; height:100%; z-index:0; pointer-events:none; opacity:1;
  -webkit-mask-image:radial-gradient(120% 140% at 100% 100%, #000 0%, #000 38%, rgba(0,0,0,.4) 62%, transparent 80%);
  mask-image:radial-gradient(120% 140% at 100% 100%, #000 0%, #000 38%, rgba(0,0,0,.4) 62%, transparent 80%); }
.book .book-fade{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, var(--d-bg) 10%, transparent 56%); }
.book .container{ position:relative; z-index:2; }
.book-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.book h2, .book h1{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,5.6vw,74px); line-height:1; letter-spacing:-.02em; margin:20px 0 0; }
.book h2 em, .book h1 em{ font-style:italic; }
.book .lede{ font-size:19px; line-height:1.55; color:var(--d-muted); margin:22px 0 0; max-width:42ch; }
.book .assure{ display:flex; flex-direction:column; gap:14px; margin:34px 0 0; }
.book .assure .a{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--d-text); }
.book .assure .a .tick{ color:var(--red); font-weight:700; margin-top:1px; }
.book .contact-list{ list-style:none; margin:30px 0 0; padding:0; }
.book .contact-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding:13px 0; border-bottom:1px solid var(--d-line); }
.book .contact-row:first-child{ border-top:1px solid var(--d-line); }
.book .contact-label{ flex:0 0 88px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--d-muted); }
.book .contact-val{ color:var(--d-text); font-size:15.5px; line-height:1.5; text-decoration:none; }
.book a.contact-val:hover{ color:var(--red); }
.book-card{
  background:var(--d-elev); border:1px solid var(--d-line); border-radius:var(--r-lg);
  padding:34px 32px; box-shadow:0 40px 90px -50px rgba(0,0,0,.8);
}
.book-card .ch{ font-size:13px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--d-muted); margin-bottom:22px; }
.bf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bf{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.bf label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--d-muted); }
.bf input, .bf select, .bf textarea{
  font-family:var(--sans); font-size:15px; color:var(--d-text);
  background:#0c0c0b; border:1px solid var(--d-line2); border-radius:var(--r);
  padding:13px 14px; outline:0; transition:border-color .2s, box-shadow .25s; width:100%;
}
.bf textarea{ resize:vertical; min-height:84px; }
.bf input:focus, .bf select:focus, .bf textarea:focus{ border-color:var(--red); box-shadow:0 0 0 4px rgba(232,37,17,.14); }
.bf input::placeholder, .bf textarea::placeholder{ color:#8a857b; }
.bf-phone{ display:flex; align-items:center; background:#0c0c0b; border:1px solid var(--d-line2); border-radius:var(--r); transition:border-color .2s, box-shadow .25s; }
.bf-phone:focus-within{ border-color:var(--red); box-shadow:0 0 0 4px rgba(232,37,17,.14); }
.bf .bf-phone select{ flex:none; width:116px; border:0; background:transparent; border-radius:0;
  padding:13px 16px 13px 14px; -webkit-appearance:none; appearance:none; cursor:pointer;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a857b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; }
.bf .bf-phone select:focus{ box-shadow:none; }
.bf .bf-phone input{ flex:1; width:auto; border:0; border-left:1px solid var(--d-line2); background:transparent; border-radius:0; }
.bf .bf-phone input:focus{ box-shadow:none; }
.book-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.book-card .fine{ font-family:var(--mono); font-size:11px; color:var(--d-muted); text-align:center; margin:16px 0 0; }
.form-success{
  display:none; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 10px;
}
.form-success.show{ display:flex; }
.form-success .mk{ width:50px; height:50px; }
.form-success h4{ font-family:var(--serif); font-weight:400; font-size:30px; margin:0; }
.form-success p{ color:var(--d-muted); margin:0; font-size:15.5px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--d-bg); color:var(--d-text); border-top:1px solid var(--d-line); padding:74px 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid var(--d-line); }
.footer .fbrand img{ height:24px; margin-bottom:18px; }
.footer .fbrand p{ color:var(--d-muted); font-size:15px; max-width:30ch; margin:0; }
.footer .fcol h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-muted); margin:0 0 18px; font-weight:500; }
.footer .fcol a{ display:block; font-size:15px; color:var(--d-text); margin-bottom:12px; transition:color .2s; }
.footer .fcol a:hover{ color:var(--red); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; }
.footer-bottom .cp{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--d-muted); }
.footer-bottom .soc{ display:flex; gap:22px; }
.footer-bottom .soc a{ font-size:14px; color:var(--d-muted); transition:color .2s; }
.footer-bottom .soc a:hover{ color:var(--d-text); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:64px; align-items:start; }
.faq-list{ display:flex; flex-direction:column; }
.faq{ padding:24px 0; border-top:1px solid var(--line); }
.faq:first-child{ padding-top:0; border-top:0; }
.faq h3{ font-size:19px; font-weight:600; letter-spacing:-.012em; margin:0 0 9px; }
.faq p{ font-size:16px; line-height:1.6; color:var(--muted); margin:0; max-width:60ch; }
@media (max-width:1000px){
  .faq-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  :root{ --gut:28px; }
  .svc{ grid-template-columns:64px 1fr; }
  .svc .feat{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:10px 22px; margin-top:6px; }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(3){ border-left:0; padding-left:0; }
  .metric{ padding:30px 0; }
  .proc-grid{ grid-template-columns:repeat(2,1fr); }
  .proc-step{ border-bottom:1px solid var(--d-line); padding-right:22px; }
  .proc-step:nth-child(2){ border-right:0; }
  .book-grid{ grid-template-columns:1fr; gap:42px; }
  #flow-dark{ width:100%; opacity:.5; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav-links, .nav-cta .signin{ display:none; }
  .section{ padding:80px 0; }
  .hero{ padding:120px 0 72px; }
  .hero-form{ flex-direction:column; }
  .hero-form .btn{ width:100%; justify-content:center; }
  .work-grid, .tiers{ grid-template-columns:1fr; }
  .metrics-grid{ grid-template-columns:1fr 1fr; }
  .proc-grid{ grid-template-columns:1fr; }
  .proc-step{ border-right:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .bf-row{ grid-template-columns:1fr; }
  .case .thumb{ height:268px; }
}

.form-err{ font-family:var(--mono); font-size:12px; color:var(--red); margin:14px 0 0; line-height:1.5; }

/* ============================================================
   PRODUCTION HARDENING — a11y, mobile nav, contrast, tablet
   Appended; overrides above by source order. Keep at file end.
   ============================================================ */

/* --- visible keyboard focus (WCAG 2.4.7) --- */
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.dark :focus-visible, .on-dark :focus-visible{ outline-color:var(--paper); }
.field input:focus-visible, .cc:focus-visible,
.bf input:focus-visible, .bf select:focus-visible, .bf textarea:focus-visible,
.bk-consent input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.on-dark .bf input:focus-visible, .on-dark .bf select:focus-visible,
.on-dark .bf textarea:focus-visible{ outline-color:var(--paper); }

/* --- skip link (WCAG 2.4.1) --- */
.skip-link{ position:fixed; top:10px; left:10px; z-index:200; transform:translateY(-160%);
  background:var(--ink); color:var(--paper); font-family:var(--sans); font-weight:600; font-size:14px;
  padding:11px 16px; border-radius:9px; transition:transform .2s var(--ease); }
.skip-link:focus{ transform:none; outline:2px solid var(--paper); outline-offset:2px; }
[dir="rtl"] .skip-link{ left:auto; right:10px; }

/* --- small red text: use darker red for AA at <24px (WCAG 1.4.3) --- */
.form-err, .form-note .ok, .svc .feat li::before,
.why-services a:hover, .case .thumb .badge{ color:var(--red-press); }
.nav-menu a:hover{ color:var(--red-press); }
.case .thumb .shot{ color:#6E6A62; }

/* --- consent checkbox (book form) --- */
.bk-consent{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 2px;
  font-size:13px; line-height:1.5; color:var(--d-muted); }
.bk-consent input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--red); }
.bk-consent a{ color:var(--d-text); text-decoration:underline; text-underline-offset:2px; }

/* --- hamburger button --- */
.nav-burger{ width:44px; height:44px; flex:none; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line2); border-radius:10px; color:var(--ink); cursor:pointer; }
.nav-burger .bz{ position:relative; display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:background .15s, transform .25s var(--ease); }
.nav-burger .bz::before, .nav-burger .bz::after{ content:''; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; border-radius:2px; transition:transform .25s var(--ease); }
.nav-burger .bz::before{ top:-6px; } .nav-burger .bz::after{ top:6px; }
.nav.open .nav-burger .bz{ background:transparent; }
.nav.open .nav-burger .bz::before{ transform:translateY(6px) rotate(45deg); }
.nav.open .nav-burger .bz::after{ transform:translateY(-6px) rotate(-45deg); }

/* --- keyboard/click-toggled Services dropdown (desktop) --- */
.nav-drop.open .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(10px); }

/* --- tablet breakpoints (close the 760–1000px gaps) --- */
@media (max-width:1000px){
  .footer-top{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:900px){
  /* 3 pricing cards never tile evenly in 2 columns — stack to one equal-width column */
  .tiers{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
}

/* --- mobile nav panel (replaces the display:none collapse) --- */
@media (max-width:760px){
  .nav-inner{ flex-wrap:wrap; height:auto; min-height:72px; align-items:center; }
  .nav.open{ background:var(--paper); }
  .nav.open .nav-inner{ max-height:100svh; overflow-y:auto; }
  .nav-logo{ order:1; }
  .nav-burger{ display:inline-flex; order:2; margin-inline-start:auto; }
  .nav-links{ order:3; flex-basis:100%; display:none; }
  .nav-cta{ order:4; flex-basis:100%; display:none; }
  .nav.open .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:6px 0 4px; }
  .nav.open .nav-cta{ display:flex; flex-direction:column; align-items:stretch; gap:12px;
    padding:14px 0 18px; border-top:1px solid var(--line); }
  .nav.open .nav-cta .signin, .nav.open .nav-cta .lang-switch{ display:inline-flex; justify-content:center; padding:11px; }
  .nav.open .nav-cta .btn{ justify-content:center; }
  .nav-links > a, .nav-drop-btn{ width:100%; padding:13px 2px; font-size:16px; border-bottom:1px solid var(--line); }
  .nav-drop{ display:block; width:100%; }
  .nav-drop-btn{ display:flex; justify-content:space-between; align-items:center; }
  .nav-menu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0;
    min-width:0; padding:2px 0 8px 14px; display:none; }
  .nav-drop.open .nav-menu{ display:flex; transform:none; }
}

/* --- universal reduced-motion safety net (any perpetual keyframe) --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ============================================================
   PAID-SOCIAL AD CREATIVE MOCK  (Social ad campaigns card)
   Two stacked ad units on the dark campaign canvas — a 9:16 story
   ad + a feed post — built from the design system, lightly animated.
   ============================================================ */
.mock-camp .camp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.camp .ad-story, .camp .ad-feed{ background:var(--paper); border:1px solid rgba(255,255,255,.10);
  border-radius:15px; box-shadow:0 28px 52px -26px rgba(0,0,0,.75); overflow:hidden; position:relative; }

/* --- story (9:16) --- */
.camp .ad-story{ width:120px; height:208px; transform:rotate(-5deg) translateX(-22px); z-index:2;
  display:flex; flex-direction:column; }
.ad-story-img{ position:absolute; inset:0; background:linear-gradient(150deg,#ED3A23,#C11F0E); }
.ad-story-img::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.55)); }
/* story progress bar (the signature social-ad cue) */
.ad-story::before{ content:''; position:absolute; top:9px; left:9px; right:9px; height:2.5px;
  border-radius:2px; background:rgba(255,255,255,.32); z-index:3; }
.ad-story::after{ content:''; position:absolute; top:9px; left:9px; height:2.5px; border-radius:2px;
  background:#fff; z-index:4; width:0; animation:adprog 3.4s linear infinite; }
@keyframes adprog{ 0%{ width:0; } 90%,100%{ width:calc(100% - 18px); } }
.ad-story-cap{ position:relative; z-index:3; margin-top:auto; padding:13px; display:flex;
  flex-direction:column; gap:10px; align-items:flex-start; }
.ad-h{ font-family:var(--serif); font-size:21px; line-height:1.02; color:#fff; }

/* --- feed post (square) --- */
.camp .ad-feed{ width:188px; transform:rotate(4deg) translateX(38px); z-index:1;
  padding:11px; display:flex; flex-direction:column; gap:10px; }
.ad-head{ display:flex; align-items:center; gap:8px; }
.ad-ava{ width:27px; height:27px; border-radius:50%; flex:none; background:var(--ink); position:relative; overflow:hidden; }
.ad-ava::before{ content:''; position:absolute; inset:6px;
  background:conic-gradient(from 0deg, var(--red) 0 25%, transparent 0 50%, var(--red) 0 75%, transparent 0); }
.ad-name{ font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink); line-height:1.1; }
.ad-spon{ font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.ad-img{ height:98px; border-radius:9px; overflow:hidden; position:relative; border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#ECEAE2 0 9px,#F4F2EC 9px 18px); }
.ad-img::after{ content:''; position:absolute; top:0; left:-45%; width:36%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform:skewX(-16deg);
  animation:adsheen 4.6s ease-in-out infinite; }
@keyframes adsheen{ 0%,28%{ left:-45%; } 60%,100%{ left:120%; } }
.ad-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ad-copy{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink); }

/* shared red CTA pill (story + feed) */
.ad-btn{ font-family:var(--sans); font-weight:600; font-size:10.5px; color:#fff; background:var(--red);
  border-radius:999px; padding:6px 13px; white-space:nowrap; }

/* ============================================================
   BILINGUAL IDENTITY MOCK  (Branding → "Bilingual identities" card)
   One wordmark, two scripts: cross-fades EN "Inkstone." ↔ AR "إنكستون."
   with synced language chips. Distinct from the brand-system board.
   ============================================================ */
.mock-bilingual{ background:linear-gradient(135deg,#F4F2EB,#E7E3D9); overflow:hidden; }
.biling{ position:absolute; inset:52px 30px 30px; background:var(--paper); border:1px solid var(--line2);
  border-radius:14px; box-shadow:0 26px 50px -30px rgba(0,0,0,.4); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:22px; }
.bl-mark{ width:38px; height:38px; }
.bl-mark svg{ width:100%; height:100%; fill:var(--red); transform-origin:50% 50%; animation:blspin 10s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes blspin{ 0%,16%{ transform:rotate(0); } 50%,66%{ transform:rotate(90deg); } 100%{ transform:rotate(180deg); } }
.bl-stage{ position:relative; height:44px; width:100%; display:flex; align-items:center; justify-content:center; }
.bl-en, .bl-ar{ position:absolute; font-weight:700; font-size:34px; line-height:1; color:var(--ink); }
.bl-en .dot, .bl-ar .dot{ color:var(--red); }
.bl-en{ font-family:var(--sans); letter-spacing:-.03em; animation:blEN 6s ease-in-out infinite; }
.bl-ar{ font-family:'IBM Plex Sans Arabic', var(--sans); opacity:0; animation:blAR 6s ease-in-out infinite; }
@keyframes blEN{ 0%,38%{ opacity:1; transform:translateY(0); } 50%,88%{ opacity:0; transform:translateY(-7px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes blAR{ 0%,38%{ opacity:0; transform:translateY(7px); } 50%,88%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; transform:translateY(7px); } }
.bl-base{ width:62%; height:1px; background:var(--line); }
.bl-tags{ display:flex; gap:8px; }
.bl-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line2); border-radius:999px; padding:5px 12px; min-width:34px; text-align:center; }
.bl-tag.t-en{ animation:blTagEN 6s ease-in-out infinite; }
.bl-tag.t-ar{ animation:blTagAR 6s ease-in-out infinite; }
@keyframes blTagEN{ 0%,40%{ color:#fff; background:var(--red); border-color:var(--red); } 52%,100%{ color:var(--muted); background:transparent; border-color:var(--line2); } }
@keyframes blTagAR{ 0%,40%{ color:var(--muted); background:transparent; border-color:var(--line2); } 52%,90%{ color:#fff; background:var(--red); border-color:var(--red); } 100%{ color:var(--muted); background:transparent; border-color:var(--line2); } }

/* Solid white nav when a dark section is behind it (set by site.js .solid toggle) */
.nav.solid{
  background:var(--paper);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px -18px rgba(14,14,13,.28);
}