/* Digital Hero site styles. Brand Guidelines v1.0: Midnight with depth on dark sections, Cloud pages,
   Montserrat for headings and labels, Inter for body and buttons, Hero Amber only on the main button. */
:root{
  --midnight:#0A1F44; --abyss:#050F26; --silver:#C5CDD8; --steel:#5B6B85; --cloud:#F4F6FA; --amber:#FFB02E; --ink:#0D1626; --white:#FFFFFF;
  --line-dark:rgba(197,205,216,.18); --line-light:#DCE1EA; --glass:rgba(5,15,38,.64);
  --f-head:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --edge:max(var(--gr), calc((100% - 1200px) / 2));
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--midnight);color:var(--white);font:400 18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:500 13px/1.35 var(--f-head);letter-spacing:.3em;text-transform:uppercase;margin:0}
.ico{width:20px;height:20px;flex:none}

/* buttons: one amber main button per screen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--f-body);text-decoration:none;padding:15px 20px;border-radius:10px;white-space:nowrap;border:1px solid transparent}
.btn-main{background:var(--amber);color:var(--midnight)}
.btn-ghost{border-color:rgba(197,205,216,.5);color:var(--white)}
.btn-ghost:hover{border-color:var(--white)}
.light .btn-ghost{border-color:var(--midnight);color:var(--midnight)}

/* forward-slant tag: one side cut at about 56 degrees */
.slant-tag{display:inline-block;font:600 9.5px/1 var(--f-head);letter-spacing:.16em;text-transform:uppercase;padding:5px 15px 5px 8px;background:var(--silver);color:var(--midnight);clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%)}

/* ---------- header and menu ---------- */
.nav{position:absolute;z-index:8;top:calc(14px + env(safe-area-inset-top,0px));left:var(--gl);right:var(--gr);margin-inline:auto;max-width:1200px;display:flex;align-items:center;gap:14px;padding:9px 9px 9px 16px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line-dark)}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand img{display:block}
.brand .lockup{width:214px;height:32px}
.nav .brand .mark{display:none;width:46px;height:34px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links > a,.dd > button{font:500 14.5px/1 var(--f-body);color:var(--silver);text-decoration:none;padding:11px 11px;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-links > a:hover,.dd > button:hover,.nav-links > a[aria-current="page"]{color:var(--white)}
.dd{position:relative}
.dd > button svg{width:12px;height:12px}
.dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:260px;padding:8px;border-radius:12px;background:rgba(5,15,38,.97);border:1px solid var(--line-dark);display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.dd-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--white);font-size:15px}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:rgba(197,205,216,.09)}
.nav-cta{font:600 14.5px/1 var(--f-body);padding:12px 15px;border-radius:10px;text-decoration:none;white-space:nowrap;border:1px solid rgba(197,205,216,.5);color:var(--white);flex:none}
.nav-cta.is-main{background:var(--amber);border-color:var(--amber);color:var(--midnight)}
.menu-btn{all:unset;display:none;cursor:pointer;margin-left:auto;font:500 11px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--white);padding:12px 12px;border-radius:9px;border:1px solid var(--line-dark)}
.menu-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(70vh,560px);overflow:auto;display:flex;flex-direction:column;padding:10px;border-radius:14px;background:rgba(5,15,38,.98);border:1px solid var(--line-dark)}
.menu-panel p{font:500 11px/1 var(--f-head);letter-spacing:.24em;text-transform:uppercase;color:var(--silver);margin:14px 12px 6px}
.menu-panel a{padding:11px 12px;text-decoration:none;color:var(--white);font-size:16px;border-radius:8px}
.menu-panel a:hover{background:rgba(197,205,216,.08)}
@media (max-width:1040px){.nav-links{display:none}.menu-btn{display:inline-flex}}
@media (max-width:560px){.nav .brand .lockup{display:none}.nav .brand .mark{display:block}}
@media (max-width:420px){.nav-cta{padding:11px 11px;font-size:13.5px}.nav{gap:8px}}

/* ---------- hero film ---------- */
.film{position:relative;height:420vh;background:var(--midnight)}
.film.is-still{height:100vh;height:100svh}
@media (max-width:760px){.film{height:350vh}}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--midnight)}
#scene,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{z-index:1;pointer-events:none}
#scene text{font-family:var(--f-body)}
#scene .disp{font-family:var(--f-head)}
#scene .lbl{font-family:var(--f-head);font-weight:500}
/* Midnight with depth: soft light from the top right and a fine paper grain */
.depth{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(75% 60% at 92% -5%,rgba(197,205,216,.13),rgba(197,205,216,0) 62%)}
.depth::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hcopy{position:absolute;z-index:6;left:max(28px,5vw);top:54%;transform:translateY(-50%);width:min(560px,40vw)}
.hcopy .label{color:var(--silver);margin-bottom:18px;text-wrap:balance}
.hcopy h1,.hcopy .tagline{font:600 clamp(34px,3.9vw,56px)/1.1 var(--f-head);letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
.tagline span{display:block}
.tagline .t2{color:var(--silver)}
.hcopy .sub{font-size:18px;line-height:1.6;color:var(--silver);margin:0 0 26px;max-width:44ch}
.hcopy .note{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--silver)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.hcopy-end{opacity:0;visibility:hidden}
.scrim{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(5,15,38,.92) 0%,rgba(5,15,38,.7) 34%,rgba(5,15,38,0) 58%)}

.line{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:calc(7vh + env(safe-area-inset-bottom,0px));width:min(calc(100% - 32px),21em);margin:0;text-align:center;font:600 clamp(25px,3.1vw,46px)/1.12 var(--f-head);letter-spacing:-.01em;color:#E6EBF2;text-wrap:balance;text-shadow:0 2px 30px rgba(5,15,38,.75);pointer-events:none}
.line .w{white-space:nowrap}
.line .c{visibility:hidden}
.line .c.on{visibility:visible}
.line .c.hot{color:var(--white);text-shadow:0 0 18px rgba(255,255,255,.55)}

.cue{position:absolute;z-index:4;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:500 11px/1 var(--f-head);letter-spacing:.24em;text-transform:uppercase;color:var(--silver);white-space:nowrap;pointer-events:none}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--silver),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.rail{position:absolute;z-index:7;right:var(--edge);bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.rail-label{font:500 11px/1 var(--f-head);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.rail-label b{color:var(--white);font-weight:600}
.rail-row{display:flex;gap:6px;align-items:center}
.rail-row .seg{all:unset;cursor:pointer;width:34px;height:16px;display:flex;align-items:center}
.rail-row .seg span{display:block;width:100%;height:3px;border-radius:2px;background:rgba(197,205,216,.22);overflow:hidden}
.rail-row .seg span i{display:block;height:100%;width:100%;background:var(--silver);transform-origin:left;transform:scaleX(0)}
.rail-row .seg:focus-visible{outline:2px solid var(--amber)}
.skip{margin-left:8px;font:500 13px/1 var(--f-body);color:var(--white);text-decoration:none;padding:8px 11px;border-radius:8px;border:1px solid rgba(197,205,216,.4)}
/* Autoplay: above the rail on desktop, under the menu bar on phones */
.auto{all:unset;position:absolute;z-index:7;right:var(--edge);bottom:calc(84px + env(safe-area-inset-bottom,0px));cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(197,205,216,.45);font:600 13.5px/1 var(--f-body);color:var(--white);white-space:nowrap}
.auto .auto-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--silver);color:var(--midnight)}
.auto svg{width:10px;height:10px}
.auto:hover{box-shadow:inset 0 0 0 1px var(--white)}
.auto:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.is-still .rail,.is-still .cue,.is-still .auto{display:none}
.still-ui{position:absolute;z-index:7;right:var(--edge);bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.still-ui button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-body);color:var(--white);padding:11px 14px;border-radius:9px;border:1px solid rgba(197,205,216,.45)}
.still-ui svg{width:12px;height:12px}

.toasts{position:absolute;z-index:4;right:calc(var(--edge) + 1vw);top:20vh;width:min(330px,27vw);pointer-events:none}
.toast{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px 11px 11px;border-radius:12px;background:rgba(5,15,38,.86);border:1px solid var(--line-dark);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.toast .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(197,205,216,.1);color:var(--silver)}
.toast .ic svg{width:18px;height:18px}
.toast b{display:block;font:600 14px/1.3 var(--f-body);color:var(--white)}
.toast span{display:block;font-size:13px;line-height:1.4;color:var(--silver);margin-top:2px}

.xinfo,.chips-h{display:none}
.is-port .xinfo{display:block;position:absolute;z-index:4;top:calc(124px + env(safe-area-inset-top,0px));left:var(--gl);right:var(--gr);text-align:center;pointer-events:none}
.xinfo small{display:block;font:500 11px/1.2 var(--f-head);letter-spacing:.24em;color:var(--silver);margin-bottom:6px}
.xinfo b{font:500 16px/1.4 var(--f-body);color:var(--white)}
.is-port .chips-h{display:flex;position:absolute;z-index:4;top:calc(124px + env(safe-area-inset-top,0px));left:var(--gl);right:var(--gr);flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.chip-h{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:999px;background:rgba(5,15,38,.9);border:1px solid rgba(197,205,216,.4);font:600 13px/1 var(--f-body);color:var(--white)}
.chip-h i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(197,205,216,.12);color:var(--silver)}
.chip-h i svg{width:14px;height:14px}
.is-port .toasts{left:var(--gl);right:var(--gr);top:calc(124px + env(safe-area-inset-top,0px));width:auto;max-width:420px;margin-inline:auto}
.is-port .toast{padding:8px 12px 8px 8px}
.is-port .toast .ic{width:30px;height:30px}
.is-port .line{font-size:clamp(21px,5.9vw,32px);bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.is-port .hcopy{left:var(--gl);right:var(--gr);top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:none;width:auto;max-width:540px;margin-inline:auto;text-align:center}
.is-port .hcopy .label{font-size:11px;letter-spacing:.22em;margin-bottom:10px}
.is-port .hcopy h1,.is-port .hcopy .tagline{font-size:clamp(26px,7vw,40px);margin-bottom:10px}
.is-port .hcopy .sub{font-size:15px;line-height:1.5;margin:0 auto 14px}
.is-port .hcopy .note{font-size:12.5px;margin-top:10px}
.is-port .ctas{justify-content:center}
.is-port .btn{padding:13px 16px;font-size:14.5px}
.is-port .scrim{background:linear-gradient(180deg,rgba(5,15,38,0) 0,rgba(5,15,38,0) calc(var(--ct,55%) - 70px),rgba(5,15,38,.88) calc(var(--ct,55%) - 6px),rgba(5,15,38,.95) 100%)}
.is-port .rail{right:auto;left:var(--gl);align-items:flex-start;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.is-port .rail-label{display:none}
.is-port .rail-row .seg{width:26px}
.is-port .auto{top:calc(80px + env(safe-area-inset-top,0px));bottom:auto;right:var(--gr);font-size:13px;padding-right:12px}
.is-port .still-ui{right:auto;left:var(--gl);bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.is-port .cue{left:var(--gl);transform:none;align-items:flex-start;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.is-port .cue i{display:none}

/* mobile WhatsApp button */
.wa-fab{display:none}
@media (max-width:760px){
  .wa-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:50;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:12px 16px 12px 13px;border-radius:999px;background:var(--midnight);border:1px solid rgba(197,205,216,.45);color:var(--white);font:600 14.5px/1 var(--f-body);text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.35)}
  .wa-fab svg{width:20px;height:20px}
}

/* ---------- light sections ---------- */
.slant{height:44px;background:var(--cloud);position:relative}
.slant::before{content:"";position:absolute;inset:0 auto 0 0;width:42%;background:var(--midnight);clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}
.light{background:var(--cloud);color:var(--ink);outline:none}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.who{padding-block:52px 80px}
.who .label{color:var(--steel);margin-bottom:12px}
.who h2,.page-body h2{font:600 clamp(28px,3vw,36px)/1.2 var(--f-head);color:var(--midnight);margin:0 0 10px;text-wrap:balance}
.who .intro{font-size:18px;line-height:1.6;color:var(--ink);margin:0 0 30px;max-width:60ch}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:12px;background:var(--white);border:1px solid var(--line-light);text-decoration:none;color:var(--ink);min-width:0}
.tile:hover{border-color:var(--midnight)}
.tile[aria-current="page"]{border:2px solid var(--midnight);padding:19px 19px 21px}
.tile b{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 19px/1.25 var(--f-head);color:var(--midnight)}
.tile b svg{width:18px;height:18px;color:var(--steel)}
.tile span{font-size:15.5px;line-height:1.5;color:var(--steel)}
.who .more{margin:26px 0 0;font-size:16px;color:var(--ink)}
.who .more a{font-weight:600;color:var(--midnight)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}}

.foot{background:var(--midnight);color:var(--silver);padding-block:44px 104px;font-size:15px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px}
.foot .tagline{font:600 22px/1.3 var(--f-head);color:var(--white);margin:16px 0 8px}
.foot .tagline .t2{color:var(--silver)}
.foot p{margin:0;max-width:52ch}
.foot small{display:block;margin-top:18px;font-size:13px}
.foot a{color:var(--white)}

/* stub pages */
.page-head{position:relative;background:var(--midnight);padding:130px 0 64px;overflow:hidden}
.page-head .depth{z-index:0}
.page-head .wrap{position:relative;z-index:1}
.page-head .label{color:var(--silver);margin-bottom:16px}
.page-head h1{font:600 clamp(34px,4.4vw,56px)/1.1 var(--f-head);margin:0 0 16px;max-width:20ch;text-wrap:balance}
.page-head .sub{font-size:18px;color:var(--silver);margin:0 0 24px;max-width:56ch}
.page-body{padding-block:48px 72px}
.page-body ol,.page-body ul{margin:0;padding-left:22px;max-width:62ch}
.page-body li{margin:0 0 12px}
.page-body li b{color:var(--midnight)}
.page-body .proto{margin-top:28px;font-size:14px;color:var(--steel)}

.dbg{position:fixed;z-index:60;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:min(380px,calc(100% - 24px));padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.84);color:#dfe6ef;font:500 11px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;pointer-events:none}

@media (prefers-reduced-motion:reduce){.cue i{animation:none;transform:none}}