/* Glass Lattice: deep ink, one lattice blue, motion with a purpose. */
@font-face{font-family:"Sora";src:url('/assets/sora-latin.woff2?v=dd0e8ffd98c6') format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Manrope";src:url('/assets/manrope-latin.woff2?v=dd0e8ffd98c6') format("woff2");font-weight:200 800;font-display:swap}

:root{
  --ink-950:#070b1a;--ink-900:#0b1124;--ink-800:#151c34;--ink-700:#232b47;
  --paper:#f4f5f8;--white:#fff;--line:#e3e6ee;
  --text:#0b1020;--text-2:#4a5068;--text-3:#737990;
  --on-dark:#f2f4fa;--on-dark-2:#a9b0c5;--on-dark-3:#7b8299;
  --accent:#3355ff;--accent-soft:#eef1ff;--accent-on-dark:#9cb0ff;
  --present:#16a36f;--absent:#e5484d;--live:#20b07a;
  --ring:0 0 0 1px rgb(11 16 32/.07);
  --ring-dark:0 0 0 1px rgb(255 255 255/.09);
  --shadow-sm:var(--ring),0 1px 2px rgb(11 16 32/.04);
  --shadow-md:var(--ring),0 1px 2px rgb(11 16 32/.04),0 14px 34px -18px rgb(11 16 32/.18);
  --radius-xl:1.75rem;
  --wrap:75rem;--gutter:4rem;--stage:70rem;
  /* Easing curves: strong ease-out for responses, ease-in-out for movement, drawer for sheets */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --font-display:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  interpolate-size:allow-keywords;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--ink-950);
  font-synthesis:none;
}

/* Base */
*{box-sizing:border-box}
html{scroll-padding-top:6rem;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;font-size:1.0625rem;line-height:1.7;background:var(--paper);overflow-x:clip}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a{touch-action:manipulation}
button{border:0;background:none;cursor:pointer;padding:0}
button,.button{user-select:none;-webkit-user-select:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#ccd5ff;color:var(--text)}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
[tabindex="-1"]:focus{outline:none}
.tone-dark{background:var(--ink-950);color:var(--on-dark)}
.tone-dark :focus-visible{outline-color:var(--accent-on-dark)}

.container{width:min(var(--wrap),calc(100% - var(--gutter)));margin-inline:auto}
.section{padding-block:clamp(6rem,12vw,10.5rem)}
.icon{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:100;background:var(--accent);color:#fff;padding:.75rem 1rem;border-radius:.75rem;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Buttons: instant press feedback */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.8rem 1.6rem;border-radius:999px;font-size:1rem;font-weight:650;line-height:1.3;border:0;transition:transform 160ms var(--ease-out),background-color 150ms ease,box-shadow 150ms ease}
.button .icon{width:1.05rem;height:1.05rem;transition:transform 200ms var(--ease-out)}
.button:active,.icon-button:active,.screen-trigger:active,.hero-chip:active,.contact-links a:active,.mark:active,.story-rail button:active{transform:scale(.97)}
.button-light{background:#fff;color:var(--ink-950);box-shadow:0 10px 24px -12px rgb(0 0 0/.6)}
.button-glass{background:rgb(255 255 255/.06);color:var(--on-dark);box-shadow:var(--ring-dark),inset 0 1px 0 rgb(255 255 255/.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.button-dark{background:var(--ink-950);color:#fff}
.button-small{min-height:2.5rem;padding:.5rem 1.15rem;font-size:.9rem}
.icon-button{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:transform 160ms var(--ease-out),background-color 150ms ease}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:calc(env(safe-area-inset-top,0px) + .75rem);pointer-events:none}
.nav-shell{pointer-events:auto;width:min(calc(var(--wrap) + 1rem),calc(100% - 1.5rem));margin-inline:auto;height:3.75rem;display:flex;align-items:center;gap:1rem;padding:0 .5rem 0 1.1rem;border-radius:999px;background:rgb(9 13 30/.72);box-shadow:var(--ring-dark),inset 0 1px 0 rgb(255 255 255/.07),0 18px 40px -18px rgb(3 6 20/.6);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);color:var(--on-dark)}
.nav-shell{transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease}
.site-header.on-light .nav-shell{background:rgb(255 255 255/.72);color:var(--text);box-shadow:0 0 0 1px rgb(11 16 32/.08),inset 0 1px 0 #fff,0 18px 40px -22px rgb(11 16 32/.35)}
.site-header.on-light .desktop-nav a{color:var(--text-2)}
.site-header.on-light .nav-cta{background:var(--ink-950);color:#fff;box-shadow:none}
.site-header.on-light .menu-toggle{color:var(--text)}
.desktop-nav a,.nav-cta{transition:color 150ms ease,background-color 300ms ease}
.brand{display:inline-flex;align-items:center;gap:.65rem;flex-shrink:0}
.brand img{width:1.875rem;height:1.875rem}
.brand span{font-family:var(--font-display);font-size:1.125rem;font-weight:600;letter-spacing:-.02em}
.desktop-nav{display:flex;gap:.15rem;margin-inline:auto}
.desktop-nav a{padding:.5rem .9rem;border-radius:999px;font-size:.9375rem;font-weight:550;color:var(--on-dark-2);transition:color 150ms ease,background-color 150ms ease}
.menu-toggle{display:none;color:var(--on-dark)}
.mobile-nav{pointer-events:auto;width:min(calc(var(--wrap) + 1rem),calc(100% - 1.5rem));margin:.5rem auto 0;padding:.75rem;border-radius:1.5rem;background:rgb(9 13 30/.95);box-shadow:var(--ring-dark),0 30px 60px -24px rgb(3 6 20/.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--on-dark);display:grid;gap:.15rem;transform-origin:top right;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{.mobile-nav{opacity:0;transform:translateY(-6px) scale(.98)}}
.mobile-nav[hidden]{display:none}
.mobile-nav>a:not(.button){padding:.85rem 1rem;border-radius:1rem;font-family:var(--font-display);font-size:1.125rem;font-weight:550}
.mobile-nav .button{margin-top:.5rem}
.mobile-contacts{display:grid;gap:.25rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgb(255 255 255/.08)}
.mobile-contacts a{display:flex;align-items:center;gap:.65rem;padding:.6rem 1rem;color:var(--on-dark-2);font-size:.9375rem;overflow-wrap:anywhere}
.mobile-contacts .icon{width:1.05rem;height:1.05rem}

/* Hero: centred statement, the product rises and flattens as you scroll */
.hero{position:relative;overflow:clip;padding-top:clamp(7.5rem,17vh,10.5rem);isolation:isolate}
.hero-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lattice-field{position:absolute;inset:0;opacity:.07;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%)}
.hero-light{position:absolute;left:50%;top:-20rem;width:calc(var(--stage) + 10rem);height:52rem;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255/.09),rgb(255 255 255/0))}
.hero-copy{display:grid;justify-items:center;text-align:center}
.hero-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .4rem;border-radius:999px;background:rgb(255 255 255/.06);box-shadow:var(--ring-dark);font-size:.875rem;font-weight:600;color:var(--on-dark);transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.hero-chip img{width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;padding:1px}
.hero-chip .icon{width:.95rem;height:.95rem;color:var(--on-dark-2);transition:transform 200ms var(--ease-out)}
.hero h1{margin-top:2rem;font-size:clamp(3.2rem,8.2vw,7.5rem);line-height:.96;letter-spacing:-.055em;color:#fff}
.hero h1 .line{display:block}
.hero h1 .word{display:inline-block}
.hero-lead{margin-top:1.75rem;max-width:30rem;font-size:clamp(1.125rem,1.6vw,1.35rem);line-height:1.55;color:var(--on-dark-2)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem;margin-top:2.5rem}

.hero-stage{position:relative;width:min(var(--stage),calc(100% - var(--gutter)));margin:clamp(3.5rem,8vh,5rem) auto 0;perspective:1800px}
.stage-tilt{position:relative;transform-origin:50% 0;transform:rotateX(22deg) scale(.9);will-change:transform}
.stage-device{display:block;width:100%;border-radius:1.1rem;overflow:hidden;background:#fff;text-align:left;box-shadow:0 0 0 1px rgb(255 255 255/.16),0 2px 0 rgb(255 255 255/.25) inset,0 50px 120px -40px rgb(0 0 0/.9),0 0 160px -60px rgb(255 255 255/.35)}
.device-bar{display:flex;align-items:center;gap:1rem;height:2.25rem;padding:0 1rem;background:#f1f2f6;border-bottom:1px solid #e3e5ec;color:#4a5068;font-size:.75rem;font-weight:600}
.window-dots{display:flex;gap:.35rem}
.window-dots i{width:.6rem;height:.6rem;border-radius:50%;background:#d3d6df}
.device-title{display:flex;align-items:center;gap:.45rem;margin-inline:auto;transform:translateX(-1.6rem)}
.device-title img{width:1rem;height:1rem}
.stage-device>img{width:100%;height:auto}
.stage-phone-wrap{position:absolute;z-index:3;right:-1.5%;bottom:-8%;width:clamp(8.5rem,16%,13rem);will-change:transform}
.stage-phone{display:block;width:100%;border-radius:2rem;padding:.4rem;background:#0f1530;box-shadow:0 0 0 1px rgb(255 255 255/.18),0 40px 80px -24px rgb(0 0 0/.85)}
.stage-phone img{border-radius:1.65rem;width:100%;height:auto;aspect-ratio:391/720;object-fit:cover;object-position:top}
.callout{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1.1rem .65rem .95rem;border-radius:999px;background:rgb(255 255 255/.4);color:var(--text);font-size:.875rem;font-weight:650;white-space:nowrap;box-shadow:inset 0 0 0 1px rgb(255 255 255/.75),inset 0 1px 0 #fff,0 0 0 1px rgb(7 11 26/.08),0 18px 40px -16px rgb(7 11 26/.5);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%)}
.callout .icon{width:1rem;height:1rem;stroke-width:1.8}
.callout-overview{top:14%;left:-2.5%}
.callout-mobile{bottom:18%;right:82%}

.proof{display:flex;align-items:center;justify-content:center;gap:1rem;padding:clamp(4.5rem,9vw,7rem) 0 clamp(1rem,3vw,2rem);text-align:left}
.proof img{width:3rem;height:3rem;border-radius:50%;background:#fff;padding:2px;flex-shrink:0}
.proof p{color:var(--on-dark-2);font-size:1rem;line-height:1.5}
.proof strong{display:block;color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.0625rem}
.ticker{font-variant-numeric:tabular-nums;color:#fff;font-weight:700}

/* NCE Connect story: sticky device, chapters scroll past */
.story{padding:clamp(5rem,9vw,8rem) 0 clamp(4rem,7vw,6rem)}
.story-head{max-width:46rem;text-align:center}
.story-head h2,.section-head h2,.faq-intro h2,.ethos-copy h2,.contact-copy h2,.demo-copy h2{font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.04;letter-spacing:-.045em}
.story-head p{margin:1.25rem auto 0;max-width:30rem;color:var(--on-dark-2);font-size:1.125rem}
.story-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:clamp(2.5rem,5vw,5rem);margin-top:clamp(3rem,7vw,6rem)}
.chapters{display:grid}
.chapter{min-height:64vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity 450ms var(--ease-out)}
.chapter:first-child{min-height:60vh}
.chapter.is-active{opacity:1}
.chapter-role{display:inline-flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:650;color:var(--accent-on-dark)}
.chapter-role .icon{width:1.1rem;height:1.1rem}
.chapter h3{margin-top:1rem;font-size:clamp(1.65rem,2.6vw,2.35rem);line-height:1.08;letter-spacing:-.035em;color:#fff}
.chapter>p:not(.chapter-role){margin-top:.9rem;max-width:25rem;color:var(--on-dark-2);font-size:1.0625rem;line-height:1.6}
.chapter-shot{display:none}
.story-sticky{position:sticky;top:max(6.5rem,calc(50svh - 17rem));align-self:start;display:grid;gap:1.75rem}
.story-window{position:relative;display:block;width:100%;max-width:calc((100svh - 12rem) * 1.6);margin-inline:auto;border-radius:1.1rem;overflow:hidden;background:#fff;text-align:left;box-shadow:0 0 0 1px rgb(255 255 255/.14),0 50px 110px -40px rgb(0 0 0/.85),0 0 140px -70px rgb(255 255 255/.3)}
.story-screens{position:relative;display:block;aspect-ratio:1920/1200;overflow:hidden}
.story-screens img{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:blur(8px);transform:scale(1.02);transition:opacity 520ms var(--ease-out),filter 520ms var(--ease-out),transform 760ms var(--ease-out)}
.story-screens img.is-active{opacity:1;filter:blur(0);transform:none}
.stage-expand{position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;background:rgb(9 13 30/.86);color:#fff;font-size:.8125rem;font-weight:650;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color 150ms ease}
.stage-expand .icon{width:.95rem;height:.95rem}
.story-rail{position:relative;display:flex;justify-content:space-between;align-items:center;width:min(22rem,100%);margin-inline:auto}
.story-rail::before{content:"";position:absolute;left:.45rem;right:.45rem;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgb(255 255 255/.12)}
.rail-fill{position:absolute;left:.45rem;right:.45rem;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--accent-on-dark);transform-origin:left;transform:scaleX(0);transition:transform 450ms var(--ease-out)}
.story-rail button{position:relative;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%}
.story-rail button::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--ink-700);box-shadow:0 0 0 3px var(--ink-950);transition:background-color 250ms ease,transform 250ms var(--ease-out)}
.story-rail button.is-done::before{background:var(--accent-on-dark)}
.story-rail button.is-active::before{background:#fff;transform:scale(1.45)}
.showcase-note{margin-top:clamp(2.5rem,5vw,4rem);font-size:.8125rem;color:var(--on-dark-3);text-align:center}

/* Swipe demo */
.demo{background:var(--ink-900);padding-block:clamp(6rem,11vw,9.5rem);box-shadow:inset 0 1px 0 rgb(255 255 255/.05)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,7vw,7rem);align-items:center}
.demo-copy h2{color:#fff}
.demo-copy>p{margin-top:1.4rem;max-width:28rem;color:var(--on-dark-2);font-size:1.125rem}
.tally{display:flex;gap:2.5rem;margin-top:2.75rem}
.tally dt{font-size:.875rem;font-weight:650;color:var(--on-dark-3)}
.tally dd{margin-top:.2rem;font-family:var(--font-display);font-weight:600;font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.tally div:first-child dd{color:#5fd6a6}
.tally div:nth-child(2) dd{color:#ff8a8d}
.tally dd.tick{animation:tick 380ms var(--ease-out)}
@keyframes tick{from{opacity:.2;transform:translateY(35%)}}
.demo-note{margin-top:2rem;font-size:.8125rem;color:var(--on-dark-3)}
.demo-device{position:relative;width:min(24rem,100%);margin-inline:auto;padding:1.5rem 1.25rem 1.25rem;border-radius:2.25rem;background:#fff;color:var(--text);box-shadow:0 0 0 .45rem #141b36,0 0 0 calc(.45rem + 1px) rgb(255 255 255/.14),0 60px 120px -40px rgb(0 0 0/.9)}
.demo-head{display:grid;gap:.15rem;padding:0 .35rem}
.demo-head strong{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.015em}
.demo-head span{font-size:.8125rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.demo-progress{display:block;height:.35rem;margin-top:.85rem;border-radius:99px;background:#eceef4;overflow:hidden}
.demo-progress i{display:block;height:100%;border-radius:99px;background:var(--present);transform-origin:left;transform:scaleX(0);transition:transform 450ms var(--ease-out)}
.deck{position:relative;height:18.5rem;margin-top:1.25rem;touch-action:pan-y;user-select:none;-webkit-user-select:none;border-radius:1.4rem}
.deck:focus-visible{outline-offset:6px}
.card{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.6rem;padding:1.5rem;border-radius:1.4rem;background:#fff;box-shadow:inset 0 0 0 1px #e6e9f1,0 18px 40px -26px rgb(11 16 32/.35);cursor:grab;will-change:transform;text-align:center}
.card.is-dragging{cursor:grabbing}
.card-avatar{width:4.25rem;height:4.25rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--text)}
.card-name{font-family:var(--font-display);font-weight:600;font-size:1.45rem;letter-spacing:-.025em}
.card-roll{font-size:.875rem;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.card-rate{margin-top:.3rem;padding:.3rem .8rem;border-radius:999px;background:var(--paper);font-size:.8125rem;font-weight:650;font-variant-numeric:tabular-nums}
.card-stamp{position:absolute;top:1.1rem;padding:.3rem .75rem;border-radius:.6rem;font-size:.8125rem;font-weight:800;letter-spacing:.04em;opacity:0;pointer-events:none}
.stamp-present{left:1.1rem;color:var(--present);box-shadow:inset 0 0 0 2px var(--present);transform:rotate(-8deg)}
.stamp-absent{right:1.1rem;color:var(--absent);box-shadow:inset 0 0 0 2px var(--absent);transform:rotate(8deg)}
.deck-done{display:grid;justify-items:center;align-content:center;gap:.85rem;height:18.5rem;margin-top:1.25rem;text-align:center}
.deck-done[hidden]{display:none}
.deck-done strong{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.deck-done .button{background:var(--ink-950);color:#fff;box-shadow:none}
.done-icon{width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center;background:var(--present);color:#fff}
.done-icon .icon{width:1.5rem;height:1.5rem;stroke-width:2.4}
.deck-done:not([hidden]){animation:rise 420ms var(--ease-out)}
.deck-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.25rem}
.mark{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;border-radius:1.1rem;font-weight:700;transition:transform 160ms var(--ease-out),background-color 150ms ease,opacity 150ms ease}
.mark .icon{width:1.1rem;height:1.1rem;stroke-width:2.2}
.mark-absent{color:var(--absent);box-shadow:inset 0 0 0 1.5px #f5c2c4}
.mark-present{background:var(--present);color:#fff}
.mark:disabled{opacity:.4;cursor:default}

/* Section heads */
.section-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem 5rem;align-items:end;margin-bottom:clamp(3.5rem,6vw,5.5rem)}
.section-head p{color:var(--text-2);font-size:1.0625rem;max-width:30rem}

/* Platform */
.platform-section{background:var(--paper)}
.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 4rem}
.platform-grid li{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:.4rem 1.15rem;padding:2.25rem 0 2.5rem;border-top:1px solid #dde1ea}
.platform-icon{grid-row:1/3;align-self:start;width:2.75rem;height:2.75rem;border-radius:.85rem;display:grid;place-items:center;color:var(--accent);background:#fff;box-shadow:var(--shadow-sm)}
.platform-icon .icon{width:1.25rem;height:1.25rem}
.platform-grid h3{font-size:1.125rem;letter-spacing:-.015em;margin-top:.2rem}
.platform-grid p{color:var(--text-2);font-size:.975rem;line-height:1.6}
.work-cta{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;margin-top:clamp(4rem,7vw,6rem);padding:clamp(2rem,4vw,3rem) clamp(2rem,4vw,3.25rem);border-radius:var(--radius-xl);background:var(--ink-950);color:var(--on-dark);box-shadow:0 30px 60px -30px rgb(7 11 26/.45)}
.work-cta h3{font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.03em;color:#fff}
.work-cta p{margin-top:.6rem;color:var(--on-dark-2);font-size:.9375rem;max-width:40rem}
.work-cta .button{flex-shrink:0}

/* Services bento */
.services{background:#fff}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.75rem}
.tile{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-md);overflow:hidden;transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.tile-erp{grid-column:span 7}.tile-mobile{grid-column:span 5}.tile-desktop{grid-column:span 5}.tile-integrations{grid-column:span 7}
.tile-copy{padding:2.75rem 2.75rem 0;position:relative;z-index:1}
.tile-icon{width:2.75rem;height:2.75rem;border-radius:.85rem;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:1.75rem}
.tile h3{font-size:1.6rem;letter-spacing:-.03em}
.tile-copy p{margin-top:.9rem;color:var(--text-2);font-size:1rem;max-width:32rem}
.tile-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.5rem;color:var(--accent);font-weight:700;font-size:.9375rem}
.tile-link .icon{width:1rem;height:1rem;transition:transform 200ms var(--ease-out)}
.tile-art{margin-top:auto;padding:2rem 2rem 0;min-height:15rem;display:grid;place-items:center}
.erp-art svg,.integrations-art svg{width:100%;height:auto}
.erp-art{padding-bottom:1.5rem}
.integrations-art{padding-bottom:1.75rem}
.erp-chips rect,.int-nodes rect{fill:#fff;stroke:#d8dce7;stroke-width:1}
.erp-chips circle{fill:var(--accent)}
.erp-chips text,.int-nodes text{fill:var(--text);font-family:var(--font-body)}
.int-nodes text{font-size:13px;font-weight:650}
.int-nodes use{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mobile-art{position:relative;flex:1;min-height:17rem;padding:0}
.mini-phone{position:absolute;bottom:-4rem;width:11rem;height:23rem;border-radius:1.75rem;padding:.4rem;background:var(--ink-900);box-shadow:0 30px 50px -24px rgb(11 16 32/.5);transition:transform 500ms var(--ease-out)}
.mini-phone::before{content:"";position:absolute;inset:.4rem;border-radius:1.4rem;background:#fff}
.mini-phone>span{position:relative;display:block}
.mini-phone-back{left:calc(50% - .75rem);transform:rotate(9deg) translateY(1.5rem);background:var(--accent)}
.mini-phone-back::before{background:#f6f7fb}
.mini-phone-front{left:calc(50% - 9.25rem);transform:rotate(-4deg)}
.mp-card{margin:1.6rem .9rem .9rem;height:5rem;border-radius:.9rem;background:var(--ink-900)}
.mp-row{height:.55rem;margin:.65rem .9rem 0;border-radius:99px;background:#e2e5ee}
.mp-row.short{width:55%}
.mp-top{display:flex !important;justify-content:space-between;align-items:center;margin:1.1rem .9rem 0}
.mp-top b{width:2.2rem;height:.5rem;border-radius:99px;background:#d0d5e2}
.mp-top i{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--accent)}
.mp-hello{height:.8rem;width:60%;margin:1rem .9rem 0;border-radius:99px;background:var(--ink-900)}
.mp-stats{display:grid !important;grid-template-columns:1fr 1fr;gap:.45rem;margin:.9rem .9rem 0}
.mp-stats i{height:3.4rem;border-radius:.7rem;background:#f3f4f8;box-shadow:inset 0 0 0 1px #e4e7ef}
.mp-stats i:first-child{background:var(--accent-soft);box-shadow:inset 0 0 0 1px #d9e0ff}
.mp-list{display:grid !important;gap:.45rem;margin:.9rem .9rem 0}
.mp-list i{height:1.75rem;border-radius:.5rem;background:#f3f4f8}
.mp-tabbar{display:flex !important;justify-content:space-around;position:absolute !important;left:.4rem;right:.4rem;bottom:.4rem;padding:.6rem 0 .9rem;border-top:1px solid #eceef4}
.mp-tabbar i{width:.9rem;height:.9rem;border-radius:.3rem;background:#d0d5e2}
.mp-tabbar i:first-child{background:var(--accent)}
.desktop-art{padding:1.5rem 2.25rem 0;place-items:end center}
.mini-window{width:100%;max-width:26rem;border-radius:1rem 1rem 0 0;background:#fff;box-shadow:0 0 0 1px #dfe2ea,0 -10px 40px -20px rgb(11 16 32/.25);overflow:hidden}
.mw-bar{display:flex;gap:.3rem;padding:.6rem .75rem;background:#f4f5f8;border-bottom:1px solid var(--line)}
.mw-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#d3d6df}
.mw-body{display:grid;grid-template-columns:5rem 1fr}
.mw-side{display:grid;align-content:start;gap:.5rem;padding:.9rem .75rem;border-right:1px solid var(--line);background:#fafbfc}
.mw-side i{height:.45rem;border-radius:99px;background:#e0e3ec}
.mw-side i:first-child{background:var(--accent);width:80%}
.mw-main{display:grid;gap:.75rem;padding:.9rem}
.mw-kpis{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mw-kpis i{height:2.6rem;border-radius:.6rem;background:#f4f5f8;box-shadow:inset 0 0 0 1px var(--line)}
.mw-chart{display:flex;align-items:flex-end;gap:.4rem;height:7rem;padding:.6rem;border-radius:.6rem;box-shadow:inset 0 0 0 1px var(--line)}
.mw-chart i{flex:1;height:var(--h);border-radius:.3rem .3rem .15rem .15rem;background:#c9d2ff;transform-origin:bottom}
.mw-chart i:nth-child(6){background:var(--accent)}

/* Process */
.process{background:var(--paper)}
.steps-wrap{position:relative}
.steps-track{position:absolute;left:1.5rem;right:1.5rem;top:1.5rem;height:2px;border-radius:2px;background:#d3d8e4;overflow:hidden}
.steps-fill{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem}
.step-node{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm),0 0 0 8px var(--paper);font-family:var(--font-display);font-weight:600;font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--accent)}
.steps h3{margin-top:2rem;font-size:1.35rem;letter-spacing:-.025em}
.steps p{margin-top:.75rem;color:var(--text-2);font-size:1rem}

/* Ethos: a glass lattice cube that turns as you scroll */
.ethos{padding-block:clamp(6rem,12vw,10rem);overflow:clip}
.ethos-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(3rem,7vw,7rem);align-items:center}
.cube-scene{position:relative;display:grid;place-items:center;height:clamp(22rem,38vw,32rem);perspective:1100px}
.cube3d{--size:clamp(10rem,17vw,15rem);position:relative;width:var(--size);height:var(--size);transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(38deg);will-change:transform}
.face{position:absolute;inset:0;border-radius:.6rem;background-color:rgb(74 104 255/.2);background-image:linear-gradient(rgb(255 255 255/.5),rgb(255 255 255/.5)),linear-gradient(rgb(255 255 255/.5),rgb(255 255 255/.5));background-size:1px 100%,100% 1px;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgb(190 204 255/.75),inset 0 0 60px rgb(74 104 255/.4)}
.face-front{transform:translateZ(calc(var(--size)/2))}
.face-back{transform:rotateY(180deg) translateZ(calc(var(--size)/2))}
.face-right{transform:rotateY(90deg) translateZ(calc(var(--size)/2));background-color:rgb(40 64 200/.28)}
.face-left{transform:rotateY(-90deg) translateZ(calc(var(--size)/2));background-color:rgb(40 64 200/.28)}
.face-top{transform:rotateX(90deg) translateZ(calc(var(--size)/2));background-color:rgb(183 197 255/.26)}
.face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2));background-color:rgb(20 30 90/.4)}
.cube-shadow{position:absolute;bottom:8%;left:50%;width:60%;height:2.5rem;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(74 104 255/.35),rgb(74 104 255/0));filter:blur(6px)}
.ethos-copy h2{color:#fff}
.ethos-copy>p{margin-top:1.5rem;color:var(--on-dark-2);font-size:1.125rem;max-width:32rem}
.principles{display:grid;gap:1.5rem;margin-top:2.75rem}
.principles li{display:flex;gap:1rem;align-items:flex-start}
.principle-icon{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;background:var(--accent)}
.principle-icon .icon{width:1rem;height:1rem;stroke-width:2.2}
.principles strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;color:#fff}
.principles div>span{display:block;color:var(--on-dark-2);font-size:.9875rem;margin-top:.15rem}

/* FAQ */
.faq{background:#fff}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:2.5rem clamp(3rem,7vw,6rem);align-items:start}
.faq-intro p{margin-top:1.5rem;color:var(--text-2);max-width:22rem}
.faq-intro a{color:var(--accent);font-weight:700}
.faq-list{border-top:1px solid #d6dae5}
.faq-list details{border-bottom:1px solid #d6dae5}
.faq-list details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size 280ms var(--ease-out),opacity 220ms ease,content-visibility 280ms allow-discrete}
.faq-list details[open]::details-content{block-size:auto;opacity:1}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.85rem 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-.015em;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-toggle{position:relative;width:2rem;height:2rem;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);flex-shrink:0;transition:transform 260ms var(--ease-out),background-color 150ms ease}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:1.6px;border-radius:2px;background:var(--text);transform:translate(-50%,-50%)}
.faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .faq-toggle{transform:rotate(45deg)}
.faq-answer p{padding:0 3.5rem 1.9rem 0;color:var(--text-2);max-width:40rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.contact-copy h2{color:#fff}
.contact-copy>p{margin-top:1.5rem;color:var(--on-dark-2);font-size:1.125rem;max-width:30rem}
.contact-links{display:grid;gap:1rem;margin-top:3rem;max-width:28rem}
.contact-links a{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem 1rem 1rem;border-radius:1.15rem;background:rgb(255 255 255/.04);box-shadow:var(--ring-dark);transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.contact-links a>span:nth-child(2){flex:1;min-width:0;font-weight:650;font-size:1.0625rem;line-height:1.35;overflow-wrap:anywhere}
.contact-links small{display:block;font-size:.8125rem;font-weight:600;color:var(--on-dark-3)}
.contact-links a>.icon{width:1.1rem;height:1.1rem;color:var(--on-dark-3)}
.contact-icon{width:2.75rem;height:2.75rem;border-radius:.85rem;display:grid;place-items:center;background:var(--accent);color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgb(255 255 255/.18)}
.contact-icon .icon{width:1.3rem;height:1.3rem;stroke-width:1.8}
.contact-icon-whatsapp{background:#25d366}
.contact-icon-whatsapp .icon{width:1.45rem;height:1.45rem}
.project-form{background:#fff;color:var(--text);border-radius:var(--radius-xl);padding:clamp(1.75rem,4vw,3rem);box-shadow:0 40px 90px -40px rgb(0 0 0/.75),0 0 0 1px rgb(255 255 255/.1)}
.project-form h3{font-size:1.6rem;letter-spacing:-.03em}
.project-form>p{color:var(--text-2);margin-top:.35rem}
.project-form fieldset{border:0;margin:2rem 0 0;padding:0;display:grid;gap:1.35rem;min-width:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.project-form label{display:grid;gap:.45rem;font-size:.875rem;font-weight:700;color:var(--text);min-width:0}
.label-text{display:block}
.optional{font-weight:500;color:var(--text-3)}
.project-form input,.project-form select,.project-form textarea{width:100%;min-height:3.25rem;padding:.8rem 1rem;border-radius:.85rem;border:0;box-shadow:inset 0 0 0 1px #d3d8e4;background:#f8f9fb;font-size:1rem;font-weight:500;transition:box-shadow 150ms ease,background-color 150ms ease}
.project-form textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.project-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5068' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem;padding-right:2.75rem}
.project-form input::placeholder,.project-form textarea::placeholder{color:#9aa0b4}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{background-color:#fff;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgb(51 85 255/.12)}
.project-form .button{width:100%;margin-top:.35rem}
.email-brief{justify-self:center;color:var(--accent);font-weight:700;font-size:.9375rem;padding:.5rem}
.form-note{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--text-3);font-size:.8125rem;line-height:1.55}
.form-note button{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.form-feedback:not(:empty){margin-top:1rem;padding:.9rem 1rem;border-radius:.85rem;background:var(--accent-soft);color:var(--text);font-size:.9375rem}
.form-feedback a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Footer */
.site-footer{padding:0 0 calc(2rem + env(safe-area-inset-bottom,0px))}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding:4.5rem 0 3.5rem;border-top:1px solid rgb(255 255 255/.08)}
.footer-brand p{margin-top:.9rem;color:var(--on-dark-3);font-size:.9375rem}
.site-footer nav,.footer-contact{display:grid;align-content:start;gap:.65rem;font-size:.9375rem;color:var(--on-dark-2)}
.footer-contact span{color:var(--on-dark-3)}
.footer-contact a,.footer-contact span{display:inline-flex;align-items:center;gap:.6rem;overflow-wrap:anywhere}
.footer-contact .icon{width:1rem;height:1rem;color:var(--on-dark-3);transition:color 150ms ease}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255/.07);font-size:.8125rem;color:var(--on-dark-3)}
.footer-bottom>div{display:flex;gap:1.5rem}
.gstin{margin-left:1.25rem;padding-left:1.25rem;border-left:1px solid rgb(255 255 255/.12);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* Dialogs: centred, scale from .96, exit faster than enter */
dialog{border:0;padding:0;color:var(--text);background:#fff;box-shadow:0 40px 120px -30px rgb(3 6 20/.6);opacity:0;transform:scale(.97);transition:opacity 150ms ease,transform 150ms var(--ease-out),overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog[open]{opacity:1;transform:none;transition-duration:240ms}
@starting-style{dialog[open]{opacity:0;transform:scale(.96)}}
dialog::backdrop{background:rgb(6 10 25/0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background-color 200ms ease,backdrop-filter 200ms ease,overlay 200ms allow-discrete,display 200ms allow-discrete}
dialog[open]::backdrop{background:rgb(6 10 25/.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@starting-style{dialog[open]::backdrop{background:rgb(6 10 25/0);backdrop-filter:blur(0)}}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.dialog-heading p{font-size:.875rem;font-weight:700;color:var(--text-3)}
.dialog-heading .icon-button{background:var(--paper)}
.lightbox{width:min(calc(var(--wrap) + 15rem),calc(100% - 2rem));max-height:calc(100dvh - 2rem);border-radius:1.5rem;padding:1.25rem 1.25rem 1rem}
.lightbox .dialog-heading{padding:0 .25rem 1rem}
.lightbox h2{font-size:1.35rem;letter-spacing:-.025em}
.lightbox-actions{display:flex;align-items:center;gap:.75rem}
.lightbox-actions a{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-weight:700;font-size:.9375rem}
.lightbox-actions a .icon{width:1rem;height:1rem}
.lightbox-image{border-radius:1rem;overflow:hidden;box-shadow:var(--ring);background:var(--paper)}
.lightbox-image img{width:100%;height:auto;max-height:calc(100dvh - 12rem);object-fit:contain}
.lightbox.mobile-preview{width:min(26rem,calc(100% - 2rem))}
.lightbox-note{padding:.9rem .25rem 0;font-size:.8125rem;color:var(--text-3)}
.privacy-dialog{width:min(40rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);border-radius:1.5rem;padding:1.75rem 2rem 2rem}
.privacy-dialog h2{margin:.75rem 0 1rem;font-size:1.75rem;letter-spacing:-.03em}
.privacy-dialog h3{margin:1.5rem 0 .4rem;font-size:1.05rem}
.privacy-dialog p{color:var(--text-2);font-size:.975rem}
.privacy-dialog a{color:var(--accent);font-weight:700}
.privacy-date{margin-top:1.5rem;font-size:.8125rem !important;color:var(--text-3) !important}

/* Motion: one orchestrated hero entrance, then reveals that play once */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade{from{opacity:0}}
@keyframes word-in{from{opacity:0;transform:translateY(.38em);filter:blur(10px)}}
@keyframes stage-in{from{opacity:0;transform:translateY(90px)}}
.hero-chip{animation:rise 700ms var(--ease-out) both}
.hero h1 .word{animation:word-in 950ms var(--ease-out) both}
.hero h1 .line:first-child .word:first-child{animation-delay:80ms}
.hero h1 .line:first-child .word:last-child{animation-delay:160ms}
.hero h1 .line:last-child .word:first-child{animation-delay:240ms}
.hero h1 .line:last-child .word:last-child{animation-delay:320ms}
.hero-lead{animation:rise 800ms var(--ease-out) 440ms both}
.hero-actions{animation:rise 800ms var(--ease-out) 520ms both}
.hero-stage{animation:stage-in 1400ms var(--ease-out) 380ms both}
.callout{animation:rise 700ms var(--ease-out) 1300ms both}
.callout-mobile{animation-delay:1450ms}
.lattice-field{animation:fade 1600ms ease both}

.js .reveal,.js .stagger>*{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 800ms var(--ease-out),transform 1000ms var(--ease-out),filter 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.is-visible,.js .stagger.is-visible>*{opacity:1;transform:none;filter:none}
.js .draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1300ms var(--ease-in-out)}
.js .is-visible .draw path{stroke-dashoffset:0}
.js .is-visible .draw path:nth-child(2){transition-delay:90ms}.js .is-visible .draw path:nth-child(3){transition-delay:180ms}.js .is-visible .draw path:nth-child(4){transition-delay:270ms}.js .is-visible .draw path:nth-child(5){transition-delay:360ms}.js .is-visible .draw path:nth-child(6){transition-delay:450ms}
.js .pop>g{opacity:0;transition:opacity 600ms var(--ease-out)}
.js .is-visible .pop>g{opacity:1;transition-delay:calc(500ms + var(--i,0) * 90ms)}
.js .grow i{transform:scaleY(.08);transition:transform 900ms var(--ease-out)}
.js .is-visible .grow i{transform:none;transition-delay:calc(300ms + var(--i,0) * 70ms)}

/* Pointer hover */
@media(hover:hover) and (pointer:fine){
  .desktop-nav a:hover{color:#fff;background:rgb(255 255 255/.07)}
  .site-header.on-light .desktop-nav a:hover{color:var(--text);background:rgb(11 16 32/.05)}
  .button-light:hover{background:#eef0f6}
  .button-glass:hover{background:rgb(255 255 255/.11)}
  .button-dark:hover{background:var(--ink-800)}
  .button:hover .icon{transform:translateX(2px)}
  .hero-chip:hover{background:rgb(255 255 255/.1)}
  .hero-chip:hover .icon{transform:translateX(2px)}
  .tile:hover{transform:translateY(-4px);box-shadow:var(--ring),0 2px 4px rgb(11 16 32/.04),0 30px 50px -26px rgb(11 16 32/.28)}
  .tile:hover .tile-link .icon{transform:translateX(3px)}
  .tile-mobile:hover .mini-phone-front{transform:rotate(-6deg) translateY(-.5rem)}
  .tile-mobile:hover .mini-phone-back{transform:rotate(11deg) translateY(1rem)}
  .story-window:hover .stage-expand{background:var(--accent)}
  .story-rail button:hover::before{background:#fff}
  .contact-links a:hover{background:rgb(255 255 255/.08)}
  .faq-list summary:hover .faq-toggle{background:var(--paper)}
  .site-footer a:hover,.footer-bottom button:hover{color:#fff}
  .footer-contact a:hover .icon{color:#fff}
  .icon-button:hover{background:rgb(255 255 255/.08)}
  .dialog-heading .icon-button:hover{background:var(--line)}
  .mark-present:hover{background:#13915f}
  .mark-absent:hover{background:#fff4f4}
}

/* Large screens (24- and 27-inch monitors) */
@media(min-width:1600px){
  :root{--wrap:84rem;--gutter:8rem;--stage:76rem}
}
@media(min-width:1900px){
  html{font-size:106.25%}
  :root{--wrap:88rem;--gutter:10rem;--stage:80rem}
  .story-head{max-width:52rem}
}
@media(min-width:2400px){
  html{font-size:112.5%}
  :root{--wrap:100rem;--gutter:14rem;--stage:90rem}
}

/* Responsive */
@media(max-width:1100px){
  .desktop-nav a{padding:.5rem .65rem}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  /* Phones and tablets: the window pins under the navigation and the chapters scroll up beneath it */
  .story-grid{display:flex;flex-direction:column;gap:0;margin-top:clamp(2.5rem,7vw,4rem)}
  .story-sticky{order:-1;align-self:stretch;position:sticky;top:calc(env(safe-area-inset-top,0px) + 4.75rem);z-index:2;gap:1rem;padding:.25rem 0 1rem;background:var(--ink-950)}
  .story-sticky::after{content:"";position:absolute;left:0;right:0;top:100%;height:2.75rem;background:linear-gradient(rgb(7 11 26/1),rgb(7 11 26/0));pointer-events:none}
  .story-window{width:min(100%,calc((100svh - 14rem) * 1.6));margin-inline:auto;border-radius:.9rem}
  .story-rail{width:min(20rem,100%)}
  .chapter,.chapter:first-child{min-height:calc(var(--story-region,45svh) * .55);justify-content:flex-start;padding:1.5rem 0}
  .chapter:last-child{min-height:calc(var(--story-region,45svh) * .62)}
  .chapter h3{margin-top:.75rem}
  .chapter>p:not(.chapter-role){max-width:34rem}
  .demo-grid{grid-template-columns:1fr}
  .demo-copy{text-align:center}
  .demo-copy>p{margin-inline:auto}
  .tally{justify-content:center}
}
@media(max-width:1000px) and (max-height:560px){
  /* Phones held sideways: too short to pin the window, so each chapter shows its own screen */
  .story-sticky{display:none}
  .chapter,.chapter:first-child,.chapter:last-child{min-height:0;opacity:1;padding:2.5rem 0;border-top:1px solid rgb(255 255 255/.08)}
  .chapter-shot{display:block;width:min(100%,32rem);margin-top:1.5rem;border-radius:.9rem;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.14),0 30px 60px -30px rgb(0 0 0/.8)}
  .chapter-shot img{width:100%;height:auto}
}
@media(max-width:900px){
  .desktop-nav,.nav-cta{display:none}
  .menu-toggle{display:grid;margin-left:auto}
  .section-head,.faq-grid,.contact-grid,.ethos-grid{grid-template-columns:1fr}
  .bento>.tile{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}
  .steps-track{display:none}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .cube-scene{height:18rem}
}
@media(max-width:640px){
  .container{width:calc(100% - 2.5rem)}
  .nav-shell{width:calc(100% - 1rem);height:3.5rem}
  .mobile-nav{width:calc(100% - 1rem)}
  .hero{padding-top:7rem}
  .hero h1{font-size:clamp(2.9rem,14vw,3.75rem);margin-top:1.75rem}
  .hero-actions{width:100%}
  .hero-actions .button{flex:1 1 auto}
  .hero-stage{width:calc(100% - 2.5rem);margin-top:3rem}
  .stage-phone-wrap{width:28%;bottom:-14%}
  .callout{font-size:.75rem;padding:.45rem .75rem .45rem .65rem;gap:.4rem}
  .callout .icon{width:.85rem;height:.85rem}
  .callout-overview{top:auto;bottom:-14%;left:0}
  .callout-mobile{display:none}
  .proof{flex-direction:column;text-align:center;padding-top:6rem}
  .tile-copy{padding:1.75rem 1.5rem 0}
  .tile-art{padding:1.25rem 1rem 0;min-height:12rem}
  .erp-art{padding-bottom:1rem}
  .desktop-art{padding:1.25rem 1.5rem 0}
  .mobile-art{min-height:19rem}
  .mini-phone{height:18rem;width:9.5rem}
  .mini-phone-front{left:calc(50% - 8rem)}
  .platform-grid{grid-template-columns:1fr}
  .work-cta{flex-direction:column;align-items:stretch;padding:1.6rem}
  .steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .faq-answer p{padding-right:0}
  .footer-main{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .gstin{display:block;margin:.5rem 0 0;padding:0;border:0}
  .privacy-dialog{padding:1.5rem}
  .lightbox{padding:1rem .75rem .75rem}
  .lightbox-actions a{font-size:0;gap:0}
  .lightbox-actions a .icon{width:1.1rem;height:1.1rem}
  .tally{gap:1.75rem}
  .tally dd{font-size:2.1rem}
}
@media(max-width:380px){
  .brand span{font-size:1rem}
  .hero-actions{flex-direction:column}
}

/* Accessibility preferences: reduced motion keeps gentle fades, drops movement */
@media(prefers-reduced-motion:reduce){
  .hero h1 .word,.hero-chip,.hero-lead,.hero-actions,.hero-stage,.callout,.deck-done:not([hidden]){animation-name:fade;animation-duration:400ms}
  .stage-tilt{transform:none !important}
  .stage-phone-wrap{transform:none !important}
  .js .reveal,.js .stagger>*{transform:none;filter:none;transition-property:opacity;transition-duration:400ms}
  .js .draw path{transition-duration:1ms}
  .js .grow i{transition-duration:1ms}
  .story-screens img{filter:none;transform:none;transition-property:opacity}
  .tally dd.tick{animation:none}
  .button:active,.icon-button:active,.screen-trigger:active,.hero-chip:active,.contact-links a:active,.mark:active{transform:none}
  .tile,.tile:hover,.mini-phone{transform:none;transition-property:box-shadow}
  dialog,dialog[open]{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .nav-shell,.mobile-nav,.stage-expand{background:var(--ink-900);backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header.on-light .nav-shell{background:#fff}
  .callout{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .button-glass{background:var(--ink-800);backdrop-filter:none;-webkit-backdrop-filter:none}
  dialog[open]::backdrop{background:rgb(6 10 25/.9);backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root{--text-2:#272d45;--text-3:#3b4260;--on-dark-2:#dfe3f3;--on-dark-3:#c3c9e0;--line:#a9b0c4;--ring:0 0 0 1px #5b6380;--ring-dark:0 0 0 1px rgb(255 255 255/.5)}
  .lattice-field,.hero-light{display:none}
  .chapter{opacity:.6}
}