/* Layout: left-aligned editorial grid on a quiet violet-tinted paper; the one loud element is the live workflow console in the hero. */
:root{
  --paper:#FBFAFD; --surface:#F3F1F9; --raised:#FFFFFF; --line:#E6E2F1; --line-strong:#D2CCE6;
  --ink:#16122B; --muted:#5A5674; --faint:#88849F;
  --violet:#40328E; --violet-ink:#40328E; --violet-soft:#EEEAFB;
  --teal:#25BBB5; --teal-ink:#0B7A75; --teal-soft:#E2F5F4;
  --btn-bg:#40328E; --btn-hover:#32277A; --btn-fg:#FFFFFF;
  --logo-a:#8367AC; --logo-b:#25BBB5; --logo-c:#3E2F8F; --logo-d:#BA96C5; --logo-e:#429FB9; --logo-f:#40328E;
  --console-bg:#14102B; --console-raised:#1D1838; --console-line:#2F2952; --console-ink:#F2EFFF; --console-muted:#A19BC4; --console-violet:#AE9FF7; --console-teal:#42D6CF;
  --deep:#1D1644; --deep-raised:#271F57; --deep-line:#3A3170; --deep-ink:#F5F2FF; --deep-muted:#BEB6E2;
  --plate:#FFFFFF; --logo-chip:transparent; --logo-chip-pad:0px;
  --shadow:0 1px 0 rgba(22,18,43,.04), 0 18px 40px -24px rgba(45,32,120,.35);
  --font:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-lg:22px; --r:16px; --r-sm:10px;
  --gutter:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D0B19; --surface:#131026; --raised:#18152E; --line:#262141; --line-strong:#383159;
    --ink:#F2F0FA; --muted:#A8A3C2; --faint:#7B7697;
    --violet:#A797F4; --violet-ink:#BDB1F8; --violet-soft:#1F1942;
    --teal:#3FD0C9; --teal-ink:#62DAD4; --teal-soft:#0F2A2E;
    --btn-bg:#6252D2; --btn-hover:#7262DE; --btn-fg:#FFFFFF;
    --logo-c:#7C6CD9; --logo-f:#8173DC;
    --console-bg:#0A0815; --console-raised:#13102A; --console-line:#262144;
    --deep:#151034; --deep-raised:#1E1847; --deep-line:#332A66;
    --plate:#F7F6FB; --logo-chip:#F4F2FB; --logo-chip-pad:5px 10px;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 18px 40px -24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D0B19; --surface:#131026; --raised:#18152E; --line:#262141; --line-strong:#383159;
  --ink:#F2F0FA; --muted:#A8A3C2; --faint:#7B7697;
  --violet:#A797F4; --violet-ink:#BDB1F8; --violet-soft:#1F1942;
  --teal:#3FD0C9; --teal-ink:#62DAD4; --teal-soft:#0F2A2E;
  --btn-bg:#6252D2; --btn-hover:#7262DE; --btn-fg:#FFFFFF;
  --logo-c:#7C6CD9; --logo-f:#8173DC;
  --console-bg:#0A0815; --console-raised:#13102A; --console-line:#262144;
  --deep:#151034; --deep-raised:#1E1847; --deep-line:#332A66;
  --plate:#F7F6FB; --logo-chip:#F4F2FB; --logo-chip-pad:5px 10px;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 18px 40px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance; letter-spacing:-0.03em; line-height:1.08; font-weight:600}
p{text-wrap:pretty}
svg{flex:none}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1200px; margin-inline:auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.mono{font-family:var(--mono); font-size:.8125rem; letter-spacing:0}
.hero-grid,.about-grid,.results-grid,.quotes,.cta-panel,.foot-grid,.bento{grid-template-columns:minmax(0,1fr)}
@media (max-width:520px){ .actions .btn{flex:1 1 100%} }
.icon{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* Preview ribbon */
.ribbon{background:var(--surface); border-bottom:1px solid var(--line); font-size:.8125rem; color:var(--muted)}
.ribbon .wrap{display:flex; gap:8px; align-items:center; padding-block:8px}
.ribbon b{color:var(--ink); font-weight:600}

/* Header */
.site-head{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-row{display:flex; align-items:center; gap:24px; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:650; font-size:1.1875rem; letter-spacing:-0.02em}
.brand svg{width:30px; height:30px}
.brand{background:var(--logo-chip); padding:var(--logo-chip-pad); border-radius:12px; line-height:0}
.logo-img{display:block; height:44px; width:auto; max-width:none}
.foot .logo-img{height:64px}
@media (max-width:599px){ .site-head .logo-img{height:38px} }
.nav{display:none; gap:4px; margin-left:12px}
.nav a{text-decoration:none; font-size:.9375rem; color:var(--muted); padding:8px 12px; border-radius:8px; transition:color .15s, background-color .15s}
.nav a:hover{color:var(--ink); background:var(--surface)}
.head-actions{margin-left:auto; display:flex; gap:10px; align-items:center}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--raised); color:var(--ink); cursor:pointer}
.mobile-nav{border-top:1px solid var(--line); background:var(--paper)}
.mobile-nav ul{list-style:none; margin:0; padding:8px 0 16px}
.mobile-nav a{display:block; padding:12px 0; text-decoration:none; font-size:1.0625rem; border-bottom:1px solid var(--line)}
@media (min-width:900px){ .nav{display:flex} .menu-btn,.mobile-nav{display:none !important} }

/* Buttons */
.btn{--h:46px; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:var(--h); padding:0 20px; border-radius:12px; font:inherit; font-size:.9375rem; font-weight:600; letter-spacing:-0.01em; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background-color .18s, border-color .18s, color .18s, transform .18s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -10px rgba(64,50,142,.7)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-wa{background:var(--raised); color:var(--ink); border-color:var(--line-strong)}
.btn-wa .wa-dot{color:var(--teal-ink)}
.btn-wa:hover{border-color:var(--teal); background:var(--teal-soft)}
.btn-sm{--h:38px; padding:0 14px; font-size:.875rem; border-radius:10px}
.btn-lg{--h:52px; padding:0 24px; font-size:1rem}
.head-actions .btn-wa{display:none}
@media (min-width:640px){ .head-actions .btn-wa{display:inline-flex} }

/* Hero */
.hero{padding-block:56px 72px; position:relative; overflow:hidden}
.hero::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:56px 56px; opacity:.55; -webkit-mask-image:radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%); mask-image:radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%); pointer-events:none}
.hero-grid{position:relative; display:grid; gap:48px; align-items:center}
@media (min-width:1000px){ .hero{padding-block:88px 104px} .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:64px} }
.hero h1{font-size:clamp(2.75rem, 7.2vw, 5rem); letter-spacing:-0.045em; line-height:.98; font-weight:600}
.hero h1 .l2{display:block; color:var(--violet-ink)}
.lead{margin-top:24px; font-size:clamp(1.0625rem, 1.6vw, 1.25rem); line-height:1.55; color:var(--muted); max-width:34em}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.traits{list-style:none; padding:0; margin:36px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:.9375rem}
.traits li{display:flex; align-items:center; gap:8px}
.traits svg{width:18px; height:18px; color:var(--teal-ink)}

.hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}
.console-wrap{animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* Console */
.console{margin:0; background:var(--console-bg); color:var(--console-ink); border-radius:var(--r-lg); border:1px solid var(--console-line); box-shadow:0 40px 80px -40px rgba(30,20,90,.55), 0 0 0 6px color-mix(in srgb, var(--violet) 7%, transparent); overflow:hidden; position:relative}
.console::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 40% at 85% 0%, rgba(66,214,207,.14), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(174,159,247,.12), transparent 70%)}
.console-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--console-line); position:relative; z-index:1}
.console-title{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.9375rem}
.live{width:8px; height:8px; border-radius:50%; background:var(--console-teal); box-shadow:0 0 0 4px rgba(66,214,207,.15)}
.seg{display:flex; gap:2px; padding:3px; background:var(--console-raised); border:1px solid var(--console-line); border-radius:11px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{font:inherit; font-size:.8125rem; font-weight:500; color:var(--console-muted); background:transparent; border:0; padding:7px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:color .15s, background-color .15s}
.seg button:hover{color:var(--console-ink)}
.seg button[aria-selected="true"]{background:var(--console-line); color:var(--console-ink)}
.flow{list-style:none; margin:0; padding:22px 18px 10px; position:relative; z-index:1; display:grid; gap:6px}
.rail{position:absolute; left:calc(18px + 19px); top:40px; bottom:40px; width:2px; background:var(--console-line); border-radius:2px}
.rail-fill{position:absolute; left:0; top:0; width:100%; height:var(--fill,100%); background:linear-gradient(var(--console-violet), var(--console-teal)); border-radius:2px; transition:height .55s cubic-bezier(.4,.1,.2,1)}
.step{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 0; transition:opacity .35s}
.node{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--console-raised); border:1px solid var(--console-line); color:var(--console-muted); position:relative; transition:background-color .3s, border-color .3s, color .3s}
.node .icon{width:19px; height:19px}
.step-app{font-family:var(--mono); font-size:.6875rem; color:var(--console-muted); letter-spacing:.02em}
.step-title{font-size:.9688rem; font-weight:600; line-height:1.3; margin-top:2px}
.step-detail{font-size:.8438rem; color:var(--console-muted); line-height:1.4; margin-top:2px}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.6875rem; padding:4px 9px 4px 8px; border-radius:999px; border:1px solid var(--console-line); color:var(--console-muted); white-space:nowrap}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor}
.step[data-state="queued"] .step-main{opacity:.45}
.step[data-state="running"] .node{border-color:var(--console-teal); color:var(--console-teal)}
.step[data-state="running"] .node::after{content:""; position:absolute; inset:-5px; border-radius:15px; border:1px solid var(--console-teal); animation:ping 1.1s ease-out infinite}
.step[data-state="running"] .pill{color:var(--console-teal); border-color:rgba(66,214,207,.4)}
.step[data-state="done"] .node{background:rgba(66,214,207,.12); border-color:rgba(66,214,207,.35); color:var(--console-teal)}
.step[data-state="done"] .pill{color:var(--console-ink); border-color:var(--console-line); background:var(--console-raised)}
.step[data-state="done"] .pill i{background:var(--console-teal)}
@keyframes ping{from{opacity:.9; transform:scale(.92)} to{opacity:0; transform:scale(1.2)}}
.console-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid var(--console-line); position:relative; z-index:1; color:var(--console-muted)}
.replay{white-space:nowrap; display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.8125rem; font-weight:600; color:var(--console-ink); background:var(--console-raised); border:1px solid var(--console-line); border-radius:9px; padding:7px 12px; cursor:pointer; transition:border-color .15s}
.replay:hover{border-color:var(--console-violet)}
.replay .icon{width:15px; height:15px}
.console-note{margin-top:14px; font-size:.8125rem; color:var(--faint)}
@media (max-width:420px){ .step{grid-template-columns:40px minmax(0,1fr)} .pill{display:none} }

/* Sections */
.section{padding-block:88px}
@media (min-width:1000px){ .section{padding-block:120px} }
.sec-head{display:grid; gap:16px; max-width:760px}
.sec-head h2, .h2{font-size:clamp(2rem, 4.4vw, 3.25rem); letter-spacing:-0.04em}
.sec-head p{color:var(--muted); font-size:1.125rem; max-width:40em}
.sub{font-size:.9375rem; font-weight:600; color:var(--teal-ink); letter-spacing:-0.005em}

/* Clients strip */
.clients{padding-block:8px 72px}
.clients-label{color:var(--muted); font-size:.9375rem; margin-bottom:22px}
.marquee{position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.track{display:flex; gap:14px; width:max-content; animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.plate{width:168px; height:76px; flex:none; display:grid; place-items:center; background:var(--plate); border:1px solid var(--line); border-radius:14px; padding:12px 16px}
.plate img{max-height:48px; max-width:132px; width:auto; object-fit:contain}
@keyframes slide{to{transform:translateX(calc(-50% - 7px))}}

/* About statement */
.about{border-top:1px solid var(--line)}
.about-grid{display:grid; gap:32px}
@media (min-width:900px){ .about-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:64px; align-items:end} }
.about-grid p{color:var(--muted); font-size:1.125rem}
.text-link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:600; font-size:.9375rem; color:var(--violet-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--violet-ink) 30%, transparent); padding-bottom:2px; transition:border-color .15s}
.text-link:hover{border-bottom-color:var(--violet-ink)}
.text-link .icon{width:16px; height:16px}

/* Services bento */
.bento{display:grid; gap:16px; margin-top:56px}
@media (min-width:760px){ .bento{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .bento{grid-template-columns:repeat(12, minmax(0,1fr))} .c-zoho{grid-column:span 7} .c-wa{grid-column:span 5} .c-tel{grid-column:span 5} .c-flow{grid-column:span 7} .c-gws{grid-column:span 12} }
@media (min-width:760px) and (max-width:1079px){ .c-gws{grid-column:span 2} }
.card{position:relative; display:flex; flex-direction:column; gap:20px; padding:28px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; color:inherit; overflow:hidden; transition:border-color .25s, box-shadow .25s, transform .25s}
.card:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.card h3{font-size:1.5rem; letter-spacing:-0.03em}
.card p{color:var(--muted); font-size:1rem; max-width:36em}
.card .more{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:600; color:var(--violet-ink)}
.card .more .icon{width:16px; height:16px; transition:transform .2s}
.card:hover .more .icon{transform:translate(2px,-2px)}
.card-kicker{display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:600; color:var(--muted)}
.badge-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet-ink)}
.badge-ic.t{background:var(--teal-soft); color:var(--teal-ink)}
.badge-ic .icon{width:18px; height:18px}
.viz{border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:16px}
.apps{display:flex; flex-wrap:wrap; gap:8px}
.apps span{font-size:.8125rem; font-weight:500; padding:6px 11px; border-radius:999px; background:var(--raised); border:1px solid var(--line); transition:border-color .2s, color .2s}
.card:hover .apps span:nth-child(3n+1){border-color:color-mix(in srgb, var(--violet) 40%, var(--line))}
.chat{display:grid; gap:10px}
.bubble{max-width:85%; font-size:.875rem; line-height:1.45; padding:10px 13px; border-radius:14px 14px 14px 4px; background:var(--raised); border:1px solid var(--line)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-size:.75rem; font-weight:600; padding:5px 10px; border-radius:8px; background:var(--teal-soft); color:var(--teal-ink)}
.rows{display:grid; gap:8px; list-style:none; margin:0; padding:0}
.rows li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; font-size:.875rem; line-height:1.4}
.rows li b{display:block; font-weight:600; color:var(--ink)}
.rows li span{color:var(--muted)}
.rows .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:1px}
.checks{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.checks div{display:flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; padding:10px 12px; border-radius:10px; background:var(--raised); border:1px solid var(--line)}
.checks .icon{width:16px; height:16px; color:var(--teal-ink)}
.c-gws{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding:22px 28px}
.c-gws .gws-text{display:grid; gap:4px; min-width:0}
.c-gws h3{font-size:1.25rem}
.c-gws .more{margin-top:0}
.kicker-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand-plate{display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 12px; background:#FFFFFF; border:1px solid var(--line); border-radius:10px}
.brand-plate img{height:34px; width:auto}
.brand-plate.zv img{height:28px}
.tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; justify-self:start; font-size:.75rem; font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--teal) 45%, var(--line)); color:var(--teal-ink); background:var(--teal-soft)}
.tag .icon{width:14px; height:14px}

/* Results */
.results{background:var(--surface); border-block:1px solid var(--line)}
.results-grid{display:grid; gap:40px}
@media (min-width:900px){ .results-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:center} }
.results-grid .sec-head p{font-size:1.0625rem}
.pillars{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pillars li{display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r); font-size:1.1875rem; font-weight:600; letter-spacing:-0.02em}
.pillars .badge-ic{width:42px; height:42px; border-radius:12px}

/* Process */
.process{list-style:none; margin:56px 0 0; padding:0; display:grid; gap:0; counter-reset:step}
@media (min-width:760px){ .process{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px} }
@media (min-width:1080px){ .process{grid-template-columns:repeat(3, minmax(0,1fr))} }
.process li{padding:24px 0 28px; border-top:1px solid var(--line); display:grid; gap:10px; align-content:start}
.process .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.process h3{font-size:1.25rem; letter-spacing:-0.025em}
.process p{color:var(--muted); font-size:.9688rem}

/* Testimonials */
.quotes{margin-top:56px; display:grid; gap:20px}
.q-tabs{display:none}
.quote{margin:0; padding:28px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:24px}
.quote blockquote{margin:0; font-size:clamp(1.1875rem, 2.2vw, 1.5rem); line-height:1.4; letter-spacing:-0.02em; font-weight:500}
.quote figcaption{display:flex; align-items:center; gap:14px}
.avatar{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:.9375rem; background:var(--violet-soft); color:var(--violet-ink); flex:none}
.who b{display:block; font-weight:600}
.who span{color:var(--muted); font-size:.9375rem}
@media (min-width:960px){
  .quotes{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:stretch}
  .q-tabs{display:grid; gap:8px; align-content:start}
  .q-tab{display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; color:inherit; background:transparent; border:1px solid transparent; border-radius:var(--r); padding:14px 16px; cursor:pointer; transition:background-color .2s, border-color .2s}
  .q-tab:hover{background:var(--surface)}
  .q-tab[aria-selected="true"]{background:var(--raised); border-color:var(--line); box-shadow:var(--shadow)}
  .q-tab .avatar{width:40px; height:40px}
  .q-stage{position:relative}
  .quote{padding:48px; height:100%; align-content:space-between}
  .quote blockquote{font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.3; letter-spacing:-0.03em}
  .quote blockquote::before{content:"\201C"; display:block; font-size:4rem; line-height:.6; height:.4em; color:var(--teal); font-weight:600; margin-bottom:12px}
  .quote:not(.on){display:none}
  .quote.on{animation:fade .45s ease both}
}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* CTA */
.cta{padding-block:24px 96px}
.cta-panel{background:var(--deep); color:var(--deep-ink); border-radius:28px; padding:40px 24px; display:grid; gap:40px; position:relative; overflow:hidden}
.cta-panel::before{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; background:radial-gradient(closest-side, rgba(66,214,207,.22), transparent); pointer-events:none}
@media (min-width:640px){ .cta-panel{padding:56px 48px} }
@media (min-width:1000px){ .cta-panel{grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:64px; padding:72px} }
.cta-copy{position:relative; display:grid; gap:20px; align-content:start}
.cta-copy h2{font-size:clamp(2rem, 4.4vw, 3.25rem); letter-spacing:-0.04em}
.cta-copy p{color:var(--deep-muted); font-size:1.125rem; max-width:32em}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.cta .btn-primary{background:#FFFFFF; color:#241B5C; box-shadow:none}
.cta .btn-primary:hover{background:#ECE8FF}
.cta .btn-ghost{background:transparent; color:var(--deep-ink); border-color:var(--deep-line)}
.cta .btn-ghost:hover{border-color:#42D6CF; background:rgba(66,214,207,.1)}
.note{font-size:.875rem; color:var(--deep-muted)}
.contact-list{list-style:none; margin:16px 0 0; padding:24px 0 0; border-top:1px solid var(--deep-line); display:grid; gap:14px; font-size:.9688rem}
.contact-list li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start}
.contact-list .icon{color:#42D6CF; margin-top:2px}
.contact-list small{display:block; color:var(--deep-muted); font-size:.8125rem}
.contact-list a{text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.form{position:relative; background:var(--deep-raised); border:1px solid var(--deep-line); border-radius:20px; padding:24px; display:grid; gap:14px; align-content:start}
@media (min-width:640px){ .form{padding:32px} }
.form h3{font-size:1.375rem}
.f-row{display:grid; gap:14px}
@media (min-width:520px){ .f-row{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:6px; min-width:0}
.field label{font-size:.8125rem; font-weight:500; color:var(--deep-muted)}
.field input,.field textarea{width:100%; font:inherit; font-size:1rem; color:var(--deep-ink); background:rgba(255,255,255,.04); border:1px solid var(--deep-line); border-radius:10px; padding:11px 13px; transition:border-color .15s, background-color .15s}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:#42D6CF; background:rgba(255,255,255,.07)}
.form .btn{width:100%}
.form-status{font-size:.875rem; color:#7CE6E0; min-height:1.3em}

/* Footer */
.foot{border-top:1px solid var(--line); padding-block:64px 32px; font-size:.9375rem}
.foot-grid{display:grid; gap:40px}
@media (min-width:760px){ .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr))} }
.foot-brand p{color:var(--muted); margin-top:12px; max-width:22em}
.foot h4{margin:0 0 14px; font-size:.875rem; font-weight:600; color:var(--ink)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot ul a{text-decoration:none; color:var(--muted); transition:color .15s}
.foot ul a:hover{color:var(--ink)}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--faint); font-size:.875rem}

/* Floating + mobile action bar */
.fab{position:fixed; right:max(24px, env(safe-area-inset-right, 0px)); bottom:24px; z-index:50; display:none; align-items:center; gap:10px; padding:0 18px 0 14px; height:50px; border-radius:999px; background:var(--console-bg); color:#fff; text-decoration:none; font-weight:600; font-size:.9375rem; box-shadow:0 12px 30px -10px rgba(20,16,43,.6); border:1px solid var(--console-line); opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s}
.fab .icon{color:#42D6CF; width:22px; height:22px}
.fab.show{opacity:1; transform:none}
@media (min-width:900px){ .fab{display:inline-flex} }
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; padding:10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.mbar a{display:flex; align-items:center; justify-content:center; gap:7px; height:46px; border-radius:12px; text-decoration:none; font-weight:600; font-size:.875rem; border:1px solid var(--line-strong); background:var(--raised)}
.mbar a.book{background:var(--btn-bg); color:var(--btn-fg); border-color:transparent}
.mbar .icon{width:18px; height:18px}
.mbar a.wa .icon{color:var(--teal-ink)}
@media (max-width:899px){ body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))} }
@media (min-width:900px){ .mbar{display:none} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .track{animation:none !important; flex-wrap:wrap; width:auto}
  .track [aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none; mask-image:none}
}

/* Launch simplifications (Step 4): layouts used while the enquiry forms are switched off */
@media (min-width:1000px){ .cta-panel.no-form{grid-template-columns:minmax(0,1fr)} .cta-panel.no-form .cta-copy{max-width:760px} }