/* AxoraLink public/marketing design system. Canonical source for all public-facing pages.
Extracted from templates/public/home.html. Apple-inspired: Plus Jakarta Sans + Schibsted Grotesk, accent #0071e3. */
/* ============ Design tokens — Apple-inspired ============ */
:root{
/* Typography — premium pairing (loads on all platforms, incl. Windows) */
--font:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-display:"Schibsted Grotesk", "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
--t-display:clamp(2.75rem, 5.5vw, 5.5rem); /* hero */
--t-h2:clamp(2.25rem, 4.2vw, 4rem); /* tile headlines */
--t-h3:clamp(1.625rem, 2.4vw, 2.25rem); /* sub-tile */
--t-h4:1.375rem;
--t-lead:clamp(1.125rem, 1.4vw, 1.5rem);
--t-body:1.0625rem; /* 17px — Apple body */
--t-sm:0.875rem;
--t-xs:0.75rem;
/* Spacing */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
--s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px; --s-13:120px; --s-14:160px;
/* Color */
--ink:#1d1d1f; /* Apple near-black for text */
--body:#6e6e73; /* Apple body gray, 4.7:1 on white */
--muted:#86868b; /* meta / captions */
--bg:#ffffff;
--bg-2:#f5f5f7; /* Apple section gray */
--bg-3:#fbfbfd;
--line:#d2d2d7; /* Apple hairline */
--line-soft:#e8e8ed;
--dark:#000000; /* product/dark sections */
--dark-text:#f5f5f7;
--dark-body:#86868b;
--dark-line:#1d1d1f;
--dark-line-soft:#2d2d2f;
--accent:#0071e3; /* Apple blue */
--accent-hover:#0077ed;
--accent-pressed:#006edb;
/* Radii — Apple uses very rounded pills (980px) and generous tile radii */
--r-sm:6px;
--r:12px;
--r-md:18px;
--r-lg:22px;
--r-xl:28px;
--r-pill:980px;
/* Elevation — Apple uses very soft, near-invisible shadows */
--el-1:0 1px 2px rgba(0,0,0,.04);
--el-2:0 18px 40px -24px rgba(0,0,0,.18);
/* Motion */
--ease:cubic-bezier(.4,0,.2,1);
--dur-1:200ms;
--dur-2:300ms;
--dur-3:480ms;
--wrap:1200px; /* content + nav width */
--wrap-wide:1320px;
--nav-h:48px;
}
/* ============ Reset & base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--t-body); font-weight:400; line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"liga" 1, "calt" 1; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
button{font:inherit; cursor:pointer;}
h1,h2,h3,h4{margin:0; color:var(--ink); font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.06; text-wrap:balance; font-feature-settings:"ss01" 1, "liga" 1;}
p{margin:0;}
/* Display face on every big numeric focal point */
.stats-row .stat b, .net-hub-stats b, .growth-large-value b, .growth-large-foot b,
.j-step .jn, .hero-meta b, .kpi-value, .live-pill b{font-family:var(--font-display); letter-spacing:-.03em;}
/* Focus */
:where(a, button, summary):focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:4px;
}
.on-dark :focus-visible{outline-color:#fff;}
.skip{position:fixed; left:var(--s-4); top:var(--s-4); z-index:10000; padding:10px 18px; background:var(--ink); color:#fff; font-weight:500; border-radius:var(--r-sm); transform:translateY(-200%); transition:transform var(--dur-2) var(--ease);}
.skip:focus{transform:translateY(0); color:#fff;}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--s-5); padding-right:var(--s-5);}
.wrap-wide{width:100%; max-width:var(--wrap-wide); margin:0 auto; padding-left:var(--s-5); padding-right:var(--s-5);}
/* ============ Apple-style top nav ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h); background:#000; transition:transform var(--dur-2) var(--ease);}
.nav.nav-hidden{transform:translateY(-100%);}
/* width:100% is required because .nav collides with Bootstrap's .nav class
(display:flex), which would otherwise shrink-wrap this grid to its content
and centre it — collapsing the 1fr columns and bunching the logo/controls. */
.nav-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; height:100%; gap:var(--s-3); max-width:var(--wrap); margin:0 auto; padding:0 var(--s-5);}
/* Pin each item to its column so hiding the menu on mobile (display:none)
doesn't let .nav-act slide into the middle auto column. */
.nav-in > .brand{justify-self:start; grid-column:1;}
.nav-in > .nav-menu{justify-self:center; grid-column:2;}
.nav-in > .nav-act{justify-self:end; grid-column:3;}
.nav-menu{display:flex; align-items:center; gap:0; justify-content:center;}
.nav-menu a{padding:0 30px; font-size:13px; color:#f5f5f7; opacity:.8; transition:opacity var(--dur-1);}
.nav-menu a:hover, .nav-menu a:focus-visible{opacity:1;}
.brand{display:inline-flex; align-items:center; gap:var(--s-2); color:#f5f5f7; font-weight:500; font-size:17px; letter-spacing:-.02em;}
/* logo sits on the black nav: invert a dark/monochrome logo so it reads white.
(Override per-deploy if a light logo is uploaded.) */
.brand img{height:28px; width:auto; filter:invert(1);}
.brand .mk{width:26px; height:26px; border-radius:6px; background:#f5f5f7; color:#000; display:inline-flex; align-items:center; justify-content:center; font-size:14px;}
.nav-act{display:flex; align-items:center; gap:var(--s-5);}
.nav-act a{display:inline-flex; align-items:center; justify-content:center; color:#f5f5f7; opacity:.85; transition:opacity var(--dur-1);}
.nav-act a:hover{opacity:1;}
.nav-act a i{font-size:19px;}
.lang{display:inline-flex; align-items:center; justify-content:center; color:#f5f5f7; opacity:.85; background:transparent; border:none; padding:0; cursor:pointer;}
.lang::after{display:none;}
.lang:hover{opacity:1;}
.lang > i{font-size:19px;}
.dropdown-menu{border:1px solid var(--line); border-radius:14px; padding:6px; font-size:13px; min-width:170px; box-shadow:0 18px 40px -16px rgba(0,0,0,.28);}
.dropdown-item{border-radius:9px; padding:8px 12px; color:var(--ink); font-weight:500;}
.dropdown-item:hover{background:var(--bg-2); color:var(--ink);}
.dropdown-item.active{background:var(--ink); color:#fff;}
.lang-flag{width:20px; height:14px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex-shrink:0;}
.burger{display:none; width:32px; height:32px; align-items:center; justify-content:center; border:none; background:transparent; color:#f5f5f7; font-size:18px;}
.burger[aria-expanded="true"] .icon-bars{display:none;}
.burger:not([aria-expanded="true"]) .icon-close{display:none;}
@media (max-width:833px){
.nav-menu, .nav-act .nav-login{display:none;}
.burger{display:inline-flex;}
}
.mobile{display:none; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:59; background:#000; padding:var(--s-7) var(--s-5); transform:translateY(-8px); opacity:0; transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); overflow-y:auto;}
.mobile.is-open{display:block; transform:translateY(0); opacity:1;}
.mobile a{display:block; padding:var(--s-5) var(--s-2); color:#f5f5f7; font-size:20px; font-weight:500; border-bottom:1px solid var(--dark-line);}
/* ============ Buttons — Apple style ============ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
min-height:46px; padding:12px 26px;
font-family:var(--font); font-weight:600; font-size:0.9375rem; letter-spacing:-.012em;
border:none; border-radius:var(--r-pill); white-space:nowrap;
transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:active{transform:scale(.98);}
.btn[disabled]{opacity:.4; pointer-events:none;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px -8px rgba(0,113,227,.6), 0 1px 1px rgba(255,255,255,.25) inset;}
.btn-primary:hover{background:var(--accent-hover); color:#fff; box-shadow:0 10px 26px -8px rgba(0,113,227,.7), 0 1px 1px rgba(255,255,255,.25) inset; transform:translateY(-1px);}
.btn-primary:active{background:var(--accent-pressed); transform:translateY(0);}
.btn-outline-accent{background:transparent; color:var(--accent); border:1.5px solid var(--accent);}
.btn-outline-accent:hover{background:rgba(0,113,227,.10); color:var(--accent);}
.btn-outline-accent:active{background:rgba(0,113,227,.16);}
.btn-on-dark{background:#fff; color:var(--ink);}
.btn-on-dark:hover{background:#f5f5f7; color:var(--ink);}
/* white outline — for the secondary CTA on the dark hero */
.btn-outline-white{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);}
.btn-outline-white:hover{background:#fff; color:var(--ink); border-color:#fff;}
.btn-outline-white:active{background:#f5f5f7;}
/* Apple "Learn more ›" chevron link */
.link{display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-size:0.9375rem; font-weight:600; letter-spacing:-.012em; transition:color var(--dur-1);}
.link::after{content:" ›"; transition:transform var(--dur-2) var(--ease);}
.link:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px;}
.link.on-dark{color:#2997ff;}
.link.on-dark:hover{color:#5eafff;}
/* ============ Hero (dark hyperspace) ============ */
.hero{position:relative; padding:calc(var(--nav-h) + var(--s-11)) 0 var(--s-9); background:#000; color:#fff; text-align:center; overflow:hidden;}
.hero > *:not(.hero-bg){position:relative; z-index:1;}
.hero-eyebrow{display:inline-block; font-size:var(--t-sm); color:#5eb1ff; font-weight:500; letter-spacing:-.005em; margin-bottom:var(--s-3);}
.hero h1{font-size:var(--t-display); font-weight:600; letter-spacing:-.025em; line-height:1.04; color:#fff;}
.hero-sub{margin:var(--s-5) auto 0; font-size:var(--t-lead); color:rgba(255,255,255,.78); font-weight:400; letter-spacing:-.005em; white-space:nowrap;}
@media (max-width:768px){ .hero-sub{white-space:normal; max-width:560px;} }
.hero-meta{margin-top:var(--s-3); font-size:var(--t-body); color:rgba(255,255,255,.5);}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s-7); justify-content:center; margin-top:var(--s-7);}
.hero-shot{margin:var(--s-11) auto 0; max-width:1100px; padding:0 var(--s-4);}
/* Product mockup (the dashboard, Apple-product-shot style) */
.shot{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--el-2); background:var(--bg-2); border:1px solid var(--line-soft);}
.shot-bar{display:flex; align-items:center; gap:var(--s-4); padding:13px 18px; background:#fbfbfd; border-bottom:1px solid var(--line-soft);}
.shot-dots{display:inline-flex; gap:6px;}
.shot-dots i{width:11px; height:11px; border-radius:50%; background:#e5e5ea;}
.shot-title{font-size:13px; font-weight:500; color:var(--body);}
.live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--body);}
.live .d{width:7px; height:7px; border-radius:50%; background:#30d158; animation:livepulse 2s ease-out infinite;}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.5);}70%{box-shadow:0 0 0 8px rgba(48,209,88,0);}100%{box-shadow:0 0 0 0 rgba(48,209,88,0);}}
.shot-body{display:grid; grid-template-columns:208px 1fr; min-height:380px; background:#fff;}
/* Sidebar — mirrors the real client portal */
.shot-side{padding:var(--s-4) 12px; border-right:1px solid var(--line-soft); background:#fff;}
.shot-brand{display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:-.01em; color:var(--ink); padding:2px 6px 12px;}
.shot-logo{width:20px; height:20px; border-radius:6px; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.shot-company{display:flex; align-items:center; gap:8px; padding:8px 9px; margin-bottom:8px; border-radius:9px; background:var(--bg-2);}
.shot-company-badge{width:24px; height:24px; border-radius:7px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.shot-company-txt b{display:block; font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.2;}
.shot-company-txt em{font-style:normal; font-size:10px; color:var(--body);}
.shot-navgroup{font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--body); opacity:.65; padding:10px 8px 4px;}
.shot-side .item{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:12.5px; font-weight:500; color:var(--body); margin-bottom:1px;}
.shot-side .item i{font-size:15px; opacity:.85;}
.shot-side .item.is-active{background:rgba(0,113,227,.09); color:var(--accent); font-weight:600;}
.shot-side .item.is-active i{opacity:1;}
/* Main — dashboard preview */
.shot-main{padding:var(--s-5) var(--s-5) var(--s-6); display:flex; flex-direction:column;}
.shot-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-4);}
.shot-head b{font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.shot-avatar{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;}
.kpi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:var(--s-4);}
.kpi{padding:12px; border-radius:11px; background:var(--bg-2);}
.kpi-label{font-size:10.5px; font-weight:500; color:var(--body); letter-spacing:.01em;}
.kpi-value{display:block; margin-top:4px; font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1;}
.kpi-delta{display:inline-block; margin-top:4px; font-size:10.5px; font-weight:500; color:#1a9c4a;}
.shot-panel{border:1px solid var(--line-soft); border-radius:13px; padding:14px 15px 6px; background:#fff; flex:1;}
.shot-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.shot-panel-head b{font-size:13px; font-weight:600; color:var(--ink);}
.shot-panel-head span{font-size:11px; color:var(--accent); font-weight:500;}
.shot-order{display:flex; align-items:center; gap:11px; padding:8px 0; border-top:1px solid var(--line-soft);}
.shot-order:first-of-type{border-top:none;}
.shot-oimg{width:30px; height:30px; border-radius:8px; background:var(--bg-2); color:var(--body); display:inline-flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.shot-oinfo{flex:1; min-width:0;}
.shot-oinfo b{display:block; font-size:12px; font-weight:600; color:var(--ink); line-height:1.25;}
.shot-oinfo em{font-style:normal; font-size:10.5px; color:var(--body);}
.opill{font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap;}
.opill.blue{background:rgba(0,113,227,.1); color:#0071e3;}
.opill.green{background:rgba(48,209,88,.16); color:#1a9c4a;}
.opill.violet{background:rgba(124,58,237,.12); color:#7c3aed;}
.opill.amber{background:rgba(245,158,11,.16); color:#b4790c;}
@media (max-width:760px){ .shot-body{grid-template-columns:1fr;} .shot-side{display:none;} }
/* ============ Tile (Apple feature panel) ============ */
.tile{padding:var(--s-13) 0; text-align:center; overflow:hidden; position:relative; isolation:isolate;}
.tile.dark{color:var(--dark-text);}
.tile.dark h2{color:var(--dark-text);}
.tile > *{position:relative; z-index:1;}
.tile h2{font-size:var(--t-h2); font-weight:600; letter-spacing:-.022em; line-height:1.05; color:var(--ink);}
.tile h2 em, .story-content h2 em{font-style:normal;
background:linear-gradient(120deg, #0071e3 0%, #5eb1ff 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.tile.dark h2 em, .story.dark .story-content h2 em{
background:linear-gradient(120deg, #5eb1ff 0%, #9ed4ff 100%); -webkit-background-clip:text; background-clip:text;}
/* Premium eyebrow — tracked uppercase with leading accent line */
.tile-eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--s-4);}
.tile-eyebrow::before{content:""; width:22px; height:1.5px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--accent)); opacity:.9;}
.tile.dark .tile-eyebrow, .story.dark .tile-eyebrow{color:#5eb1ff;}
.tile.dark .tile-eyebrow::before, .story.dark .tile-eyebrow::before{background:linear-gradient(90deg, transparent, #5eb1ff);}
.story.center .tile-eyebrow, .tile .tile-eyebrow{justify-content:center;}
.tile-eyebrow::after{content:""; width:22px; height:1.5px; border-radius:2px; background:linear-gradient(90deg, var(--accent), transparent); opacity:.9;}
.tile.dark .tile-eyebrow::after, .story.dark .tile-eyebrow::after{background:linear-gradient(90deg, #5eb1ff, transparent);}
.tile-sub{margin:var(--s-4) auto 0; max-width:760px; font-size:var(--t-lead); color:var(--body); letter-spacing:-.005em; text-wrap:balance;}
.tile-sub .sub-br{display:none;}
@media (min-width:769px){ .tile-sub .sub-br{display:inline;} }
.tile.dark .tile-sub{color:var(--dark-body);}
.tile-cta{display:flex; flex-wrap:wrap; gap:var(--s-7); justify-content:center; margin-top:var(--s-7);}
.tile-visual{margin:var(--s-12) auto 0; max-width:980px;}
@media (max-width:768px){ .tile{padding:var(--s-12) 0;} }
/* Premium capability strip (glossy pills under the bare intro tiles) */
/* Capability strip — borderless inline icons, light gray */
.cap-strip{display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-7); justify-content:center; max-width:1040px; margin:var(--s-10) auto 0;}
.cap{display:inline-flex; align-items:center; gap:9px; padding:0; background:none; border:none; box-shadow:none; font-size:15px; font-weight:500; letter-spacing:-.005em; color:var(--ink); white-space:nowrap;}
.cap i{font-size:24px; line-height:1; color:var(--muted); transition:color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);}
.cap:hover i{color:var(--accent); transform:translateY(-2px);}
.tile.dark .cap{color:var(--dark-text);}
.tile.dark .cap i{color:var(--dark-body);}
.tile.dark .cap:hover i{color:#5eb1ff;}
/* ============ Story sections (full-width, alternating split) ============ */
.story{padding:var(--s-13) 0; position:relative; overflow:hidden; isolation:isolate;}
.story.dark{color:var(--dark-text);}
.story > *{position:relative; z-index:1;}
/* ============ Premium section surfaces (no two adjacent alike) ============ */
/* Light / white sections — cool radial bloom from the top, never flat */
.tile:not(.dark):not(.alt), .story:not(.dark):not(.alt){
background:radial-gradient(1300px 620px at 50% -12%, #f1f6ff 0%, #ffffff 52%);}
/* Gray sections — soft vertical wash + faint glow */
.tile.alt, .story.alt{
background:linear-gradient(180deg, #f7f8fb 0%, #eceef3 100%);}
/* Dark sections — true black with a blue aurora glow + fine dot grid */
.tile.dark, .story.dark{background:#000;}
.tile.dark::before, .story.dark::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(1000px 540px at 50% -8%, rgba(0,113,227,.24), transparent 60%),
radial-gradient(700px 460px at 88% 12%, rgba(94,177,255,.12), transparent 60%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size:auto, auto, 26px 26px;}
/* Hairline transition between consecutive sections for crisp separation */
.tile + .tile, .tile + .story, .story + .tile, .story + .story{
box-shadow:0 -1px 0 rgba(0,0,0,.04);}
.tile.dark + .story, .story.dark + .tile, .story.dark + .story, .tile + .story.dark, .story + .story.dark{
box-shadow:none;}
.story-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-13); align-items:center;}
.story.right .story-content{order:2;}
.story.right .story-visual{order:1;}
.story-content{max-width:520px;}
/* Story-section typography — unified to the Outcome section's sizes:
medium heading + extra space below the eyebrow + 520px paragraph */
.story-content .tile-eyebrow{display:inline-flex; align-items:center; margin-bottom:28px;}
.story-content h2{font-size:clamp(2rem,3.3vw,3rem); font-weight:600; letter-spacing:-.022em; line-height:1.05; color:var(--ink); text-wrap:balance;}
.story.dark .story-content h2{color:var(--dark-text);}
.story-content h2 em{font-style:normal; color:var(--accent);}
.story.dark .story-content h2 em{color:#5eb1ff;}
.story-content .tile-sub{margin-top:var(--s-5); max-width:520px; text-align:left; font-size:var(--t-lead); color:var(--body); text-wrap:pretty;}
.story.dark .story-content .tile-sub{color:var(--dark-body);}
.story-cta{display:flex; flex-wrap:wrap; gap:var(--s-6); margin-top:var(--s-8);}
.story.center{text-align:center;}
.story.center .story-content{margin:0 auto; max-width:720px; text-align:center;}
.story.center .story-content h2{text-align:center;}
.story.center .story-content .tile-sub{margin-left:auto; margin-right:auto; max-width:560px; text-align:center;}
.story.center .story-cta{justify-content:center;}
.story.center .story-visual{margin-top:var(--s-10);}
@media (max-width:980px){
.story-grid{grid-template-columns:1fr; gap:var(--s-10);}
.story.right .story-content, .story.right .story-visual{order:0;}
.story-content{max-width:none;}
}
/* ===== Visual: Network hub stats + city cards ===== */
.net-hub-stats--below{display:flex; width:fit-content; margin:var(--s-7) auto 0;}
.net-hub-stats{display:inline-flex; align-items:center; gap:var(--s-6); padding:var(--s-4) var(--s-7); border-radius:var(--r-pill); font-variant-numeric:tabular-nums; margin-bottom:var(--s-7);
background:linear-gradient(180deg, #ffffff, #f4f6fa); border:1px solid var(--line-soft);
box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 2px 6px -2px rgba(15,25,45,.06), 0 16px 34px -22px rgba(15,25,45,.3);}
.story.dark .net-hub-stats{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset;}
.net-hub-stats > span{display:inline-flex; align-items:baseline; gap:8px; font-size:13px; color:var(--body); font-weight:500;}
.story.dark .net-hub-stats > span{color:var(--dark-body);}
.net-hub-stats b{font-size:24px; font-weight:600; letter-spacing:-.02em;
background:linear-gradient(180deg, #1d1d1f, #4a72b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.story.dark .net-hub-stats b{background:linear-gradient(180deg, #fff, #9ed4ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.net-hub-sep{width:1px; height:18px; background:var(--line); align-self:center;}
.story.dark .net-hub-sep{background:rgba(255,255,255,.16);}
.loc-grid{display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-4);}
.loc-card{display:inline-flex; flex-direction:column; align-items:center; gap:var(--s-4); width:60px; padding:0; background:none; border:none;}
/* Premium glass-orb flag chip: gradient ring frame + domed gloss */
.loc-chip{position:relative; width:60px; height:60px; border-radius:50%; padding:2px; display:block;
background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(190,200,215,.5) 45%, rgba(120,135,160,.55));
box-shadow:
0 1px 1px rgba(255,255,255,.7),
0 10px 22px -8px rgba(15,25,45,.45),
0 3px 8px -4px rgba(15,25,45,.35);
transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
animation:locFloat 6s ease-in-out infinite; will-change:transform;}
.story.dark .loc-chip{
background:linear-gradient(145deg, rgba(255,255,255,.55), rgba(120,135,165,.32) 45%, rgba(40,50,70,.5));
box-shadow:0 1px 1px rgba(255,255,255,.25), 0 12px 26px -8px rgba(0,0,0,.6), 0 3px 8px -4px rgba(0,0,0,.45);}
.loc-chip-inner{position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; display:block;}
.loc-flag{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);}
/* Domed glass gloss: specular highlight top + subtle darken bottom */
.loc-chip-inner::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
background:
radial-gradient(120% 80% at 30% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 26%, transparent 46%),
linear-gradient(180deg, transparent 55%, rgba(10,15,30,.22) 100%);}
/* Shimmer sweep (animates on hover) */
.loc-chip-inner::before{content:""; position:absolute; top:-60%; left:-120%; width:80%; height:220%; z-index:1; pointer-events:none;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
transform:rotate(8deg); transition:left .6s var(--ease);}
.loc-card:hover .loc-chip-inner::before{left:140%;}
.loc-name{font-size:12px; font-weight:600; letter-spacing:-.005em; color:var(--body); white-space:nowrap; opacity:0; transform:translateY(-4px); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.story.dark .loc-name{color:var(--dark-body);}
.loc-card:hover .loc-chip{transform:translateY(-6px) scale(1.08); animation-play-state:paused;
background:linear-gradient(145deg, #fff, rgba(94,177,255,.55) 50%, rgba(0,113,227,.7));
box-shadow:0 2px 2px rgba(255,255,255,.6), 0 18px 34px -10px rgba(0,113,227,.5), 0 6px 14px -6px rgba(0,113,227,.4);}
.loc-card:hover .loc-name{opacity:1; transform:translateY(0);}
/* Staggered float so they don't bob in unison */
.loc-card:nth-child(2) .loc-chip{animation-delay:-.8s;}
.loc-card:nth-child(3) .loc-chip{animation-delay:-1.6s;}
.loc-card:nth-child(4) .loc-chip{animation-delay:-2.4s;}
.loc-card:nth-child(5) .loc-chip{animation-delay:-3.2s;}
.loc-card:nth-child(6) .loc-chip{animation-delay:-.4s;}
.loc-card:nth-child(7) .loc-chip{animation-delay:-2s;}
.loc-card:nth-child(8) .loc-chip{animation-delay:-1.2s;}
.loc-card:nth-child(9) .loc-chip{animation-delay:-2.8s;}
.loc-card:nth-child(10) .loc-chip{animation-delay:-3.6s;}
.loc-card:nth-child(11) .loc-chip{animation-delay:-1.4s;}
.loc-card:nth-child(12) .loc-chip{animation-delay:-2.6s;}
.loc-card:nth-child(13) .loc-chip{animation-delay:-0.6s;}
.loc-card:nth-child(14) .loc-chip{animation-delay:-3.4s;}
@keyframes locFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
@media (prefers-reduced-motion: reduce){ .loc-chip{animation:none;} }
@media (max-width:560px){ .loc-card{width:auto;} .loc-chip{width:50px; height:50px;} .loc-name{white-space:normal; opacity:1; transform:none;} }
/* ===== Visual: Live operations feed (large, premium) ===== */
.feed-large{position:relative; width:100%; border-radius:var(--r-lg); padding:var(--s-5);
background:linear-gradient(180deg, #ffffff, #f7f9fc);
border:1px solid var(--line-soft);
box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 2px 8px -2px rgba(15,25,45,.06), 0 30px 60px -32px rgba(15,25,45,.34);}
.story.alt .feed-large{background:linear-gradient(180deg, #ffffff, #f3f5f9);}
.story.dark .feed-large{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.10); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 60px -32px rgba(0,0,0,.6);}
.feed-large-head{display:flex; align-items:center; justify-content:space-between; padding:0 var(--s-2) var(--s-4); margin-bottom:var(--s-3); border-bottom:1px solid var(--line-soft);}
.story.dark .feed-large-head{border-bottom-color:rgba(255,255,255,.08);}
.feed-large-title{font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.story.dark .feed-large-title{color:var(--dark-text);}
.feed-large-status{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--body); letter-spacing:.04em;
padding:5px 11px; border-radius:var(--r-pill); background:rgba(48,209,88,.12);}
.story.dark .feed-large-status{color:#30d158; background:rgba(48,209,88,.14);}
.story.alt .feed-large-status{color:#1d7a3f;}
.feed-large-status .dot-g{width:7px; height:7px; border-radius:50%; background:#30d158; box-shadow:0 0 8px rgba(48,209,88,.8); animation:livepulse 2s ease-out infinite;}
/* ===== Visual: Big stats row ===== */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); width:100%; max-width:980px; margin:0 auto;}
.stats-row .stat{position:relative; text-align:center;}
.stats-row .stat + .stat::before{content:""; position:absolute; left:calc(-1 * var(--s-5) / 2); top:50%; transform:translateY(-50%); width:1px; height:60%; background:rgba(255,255,255,.1);}
.story.alt .stats-row .stat + .stat::before{background:var(--line);}
.stats-row .stat b{display:block; font-size:clamp(3rem,6vw,5rem); font-weight:600; letter-spacing:-.04em; line-height:.92; font-variant-numeric:tabular-nums;
background:linear-gradient(180deg, #ffffff 0%, #b9d4ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.story.alt .stats-row .stat b{background:linear-gradient(180deg, #1d1d1f 0%, #5b6b85 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.stats-row .stat span{display:block; margin-top:var(--s-4); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--dark-body);}
.story.alt .stats-row .stat span{color:var(--body);}
@media (max-width:680px){ .stats-row{grid-template-columns:repeat(2,1fr); gap:var(--s-9) var(--s-5);} .stats-row .stat:nth-child(3)::before{display:none;} }
/* ===== Visual: Vertical timeline ===== */
.journey-vert{list-style:none; padding:0; margin:0; position:relative;}
.jv-step{position:relative; display:grid; grid-template-columns:64px 1fr; gap:var(--s-5); padding-bottom:var(--s-8);}
.jv-step:last-child{padding-bottom:0;}
/* connecting line down from each node to the next */
.jv-step:not(:last-child)::before{content:""; position:absolute; left:31px; top:60px; bottom:-2px; width:2px;
background:linear-gradient(180deg, var(--accent), rgba(0,113,227,.18)); z-index:0;}
.story.dark .jv-step:not(:last-child)::before{background:linear-gradient(180deg, #5eb1ff, rgba(94,177,255,.15));}
/* number node */
.jv-num{position:relative; z-index:1; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; color:#fff;
background:linear-gradient(150deg, #2b8cff, #0064e0);
box-shadow:0 10px 22px -8px rgba(0,113,227,.55), 0 0 0 6px rgba(0,113,227,.07), 0 1px 1px rgba(255,255,255,.4) inset;
transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);}
.jv-num::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:linear-gradient(160deg, rgba(255,255,255,.45), transparent 48%);}
.jv-step:hover .jv-num{transform:scale(1.06); box-shadow:0 14px 28px -8px rgba(0,113,227,.6), 0 0 0 8px rgba(0,113,227,.1), 0 1px 1px rgba(255,255,255,.4) inset;}
.jv-body{padding-top:var(--s-3);}
.jv-body h5{margin:0 0 6px; font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.story.dark .jv-body h5{color:var(--dark-text);}
.jv-body p{margin:0; font-size:14px; color:var(--body); line-height:1.55; max-width:42ch;}
.story.dark .jv-body p{color:var(--dark-body);}
@media (max-width:980px){ .journey-vert{max-width:560px;} }
/* ===== Visual: Services list — borderless inline icons, light gray ===== */
.srv-grid-large{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8) var(--s-7);}
.srv-item h4{display:flex; align-items:center; gap:12px; margin:0 0 6px; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.srv-item h4 i{flex-shrink:0; font-size:26px; line-height:1; color:var(--muted); transition:color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);}
.srv-item:hover h4 i{color:var(--accent); transform:translateY(-2px);}
.story.dark .srv-item h4{color:var(--dark-text);}
.story.dark .srv-item h4 i{color:var(--dark-body);}
.story.dark .srv-item:hover h4 i{color:#5eb1ff;}
.srv-item p{margin:0; font-size:13.5px; color:var(--body); line-height:1.5;}
.story.dark .srv-item p{color:var(--dark-body);}
@media (max-width:560px){ .srv-grid-large{grid-template-columns:1fr; gap:var(--s-6);} }
/* ===== Visual: Big growth metric ===== */
.growth-large{position:relative; overflow:hidden; width:100%; max-width:460px; padding:var(--s-8); border-radius:var(--r-lg);
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12);
box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 30px 70px -34px rgba(0,0,0,.7);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.growth-large::before{content:""; position:absolute; top:-40%; right:-30%; width:70%; aspect-ratio:1; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(0,113,227,.35), transparent 68%); filter:blur(10px);}
.growth-large > *{position:relative; z-index:1;}
.growth-large-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5);}
.growth-large-label{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dark-body);}
.growth-large-period{font-size:11px; font-weight:600; color:#5eb1ff; background:rgba(94,177,255,.15); padding:4px 10px; border-radius:var(--r-pill); letter-spacing:.04em;}
.growth-large-row{display:flex; align-items:flex-end; gap:var(--s-6); margin-bottom:var(--s-5);}
.growth-large-value{display:flex; align-items:baseline; color:var(--dark-text); font-variant-numeric:tabular-nums;}
.growth-large-value b{font-size:72px; font-weight:600; line-height:.92; letter-spacing:-.04em;
background:linear-gradient(180deg, #fff, #8fc3ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.growth-large-value em{font-size:34px; font-weight:500; font-style:normal; margin-left:4px; color:#5eb1ff;}
.growth-large-spark{flex:1; height:62px;}
.growth-large-foot{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.08);}
.growth-large-foot > span{display:flex; flex-direction:column;}
.growth-large-foot b{font-size:22px; font-weight:600; color:var(--dark-text); letter-spacing:-.018em; line-height:1; font-variant-numeric:tabular-nums;}
.growth-large-foot small{margin-top:6px; font-size:12px; color:var(--dark-body); font-weight:500; letter-spacing:.02em;}
/* ============ ELITE INTERACTIONS ============ */
/* Cursor spotlight — a soft light tracks the pointer across the surface */
.spotlight{position:relative;}
.spotlight > *{position:relative; z-index:1;}
.spotlight::after{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none; z-index:0; transition:opacity .4s var(--ease);
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,113,227,.16), transparent 60%);}
.story.dark .spotlight::after, .tile.dark .spotlight::after{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), rgba(94,177,255,.22), transparent 60%);}
.spotlight:hover::after{opacity:1;}
/* 3D tilt toward the cursor */
.tilt{transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); transform-style:preserve-3d; will-change:transform;}
@media (prefers-reduced-motion: no-preference){
/* Choreographed split reveal: content rises, visual glides in from its side */
.story-grid.reveal{opacity:1; transform:none;}
.story-grid.reveal .story-content{opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease) .05s, transform .85s var(--ease) .05s;}
.story-grid.reveal .story-visual{opacity:0; transform:translateX(52px); transition:opacity 1s var(--ease) .16s, transform 1s var(--ease) .16s;}
.story.right .story-grid.reveal .story-visual{transform:translateX(-52px);}
.story-grid.reveal.is-in .story-content, .story-grid.reveal.is-in .story-visual{opacity:1; transform:none;}
/* Staggered children (stats, journey steps, etc.) */
.rv-stagger.reveal{opacity:1; transform:none;}
.rv-stagger > *{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv-stagger.is-in > *{opacity:1; transform:none;}
.rv-stagger.is-in > *:nth-child(1){transition-delay:.06s;}
.rv-stagger.is-in > *:nth-child(2){transition-delay:.15s;}
.rv-stagger.is-in > *:nth-child(3){transition-delay:.24s;}
.rv-stagger.is-in > *:nth-child(4){transition-delay:.33s;}
.rv-stagger.is-in > *:nth-child(5){transition-delay:.42s;}
.rv-stagger.is-in > *:nth-child(6){transition-delay:.51s;}
}
/* ============ 2-up tile grid ============ */
.duo{padding:var(--s-3) 0;}
.duo-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:1280px; margin:0 auto; padding:0 14px;}
@media (max-width:880px){ .duo-grid{grid-template-columns:1fr;} }
.duo-tile{display:flex; flex-direction:column; gap:var(--s-5); padding:var(--s-10) var(--s-9) var(--s-9); border-radius:var(--r-xl); min-height:520px; position:relative; overflow:hidden; border:1px solid transparent;
transition:transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);}
.duo-tile.light{background:var(--bg-2); color:var(--ink);}
.duo-tile.dark{background:var(--dark); color:var(--dark-text);}
.duo-tile.dark h3{color:var(--dark-text);}
.duo-tile.dark .tile-sub{color:var(--dark-body);}
/* Soft accent glow in a corner of each card */
.duo-tile::before{content:""; position:absolute; pointer-events:none; width:65%; aspect-ratio:1; border-radius:50%; filter:blur(20px); opacity:.55;}
.duo-tile.light::before{bottom:-22%; right:-18%;
background:radial-gradient(circle, rgba(0,113,227,.13), transparent 70%);}
.duo-tile.dark::before{top:-22%; left:-18%;
background:radial-gradient(circle, rgba(0,113,227,.22), transparent 70%);}
/* Hover lift + glow */
.duo-tile:hover{transform:translateY(-4px);}
.duo-tile.light:hover{border-color:rgba(0,113,227,.25); box-shadow:0 28px 60px -28px rgba(0,113,227,.22);}
.duo-tile.dark:hover{border-color:rgba(94,177,255,.30); box-shadow:0 28px 60px -28px rgba(0,113,227,.40);}
.duo-tile > *{position:relative; z-index:1;}
.duo-tile h3{font-size:clamp(1.375rem, 2vw, 1.875rem); font-weight:600; letter-spacing:-.018em; line-height:1.08; text-wrap:balance; text-align:center;}
@media (min-width:769px){
.tile h2, .duo-tile h3{white-space:nowrap;}
}
.duo-tile h3 em{font-style:normal; color:var(--accent);}
.duo-tile.dark h3 em{color:#2997ff;}
.duo-tile .tile-sub{font-size:var(--t-body); margin-top:var(--s-4); text-align:center;}
.duo-tile .tile-cta{margin-top:var(--s-6); justify-content:center; gap:var(--s-6);}
.duo-tile-visual{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; padding-top:var(--s-6); margin-top:var(--s-5); border-top:1px solid var(--line-soft);}
.duo-tile.dark .duo-tile-visual{border-top-color:rgba(255,255,255,.08);}
.duo-tile .tile-cta{margin-top:0;}
@media (max-width:768px){ .duo-tile{padding:var(--s-11) var(--s-6) var(--s-9); min-height:460px;} }
/* Network stat row (sits above the location chips) */
.net-stats{display:inline-flex; align-items:center; gap:var(--s-5); margin-bottom:var(--s-6); padding:var(--s-3) var(--s-5); background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-pill); font-variant-numeric:tabular-nums;}
.net-stats > span{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; color:var(--body); font-weight:500;}
.net-stats b{font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.net-sep{width:1px; height:14px; background:var(--line); align-self:center;}
/* Growth card visual (Outcome card) */
.growth-card{width:100%; max-width:380px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:var(--r-md); padding:var(--s-5) var(--s-5) var(--s-4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin:0 auto;}
.growth-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-4);}
.growth-label{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dark-body);}
.growth-period{font-size:11px; font-weight:600; color:#5eb1ff; background:rgba(94,177,255,.12); padding:3px 8px; border-radius:var(--r-pill); letter-spacing:.04em;}
.growth-row{display:flex; align-items:flex-end; gap:var(--s-5); margin-bottom:var(--s-4);}
.growth-value{display:flex; align-items:baseline; color:var(--dark-text); font-variant-numeric:tabular-nums;}
.growth-value b{font-size:48px; font-weight:600; line-height:.95; letter-spacing:-.035em;}
.growth-value em{font-size:24px; font-weight:500; font-style:normal; margin-left:2px; color:#5eb1ff;}
.growth-spark{flex:1; height:40px; opacity:.95;}
.growth-foot{display:flex; align-items:center; gap:var(--s-4); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.08);}
.growth-foot > span{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; color:var(--dark-body);}
.growth-foot b{font-size:14px; font-weight:600; color:var(--dark-text);}
.growth-sep{width:1px; height:14px; background:rgba(255,255,255,.16); align-self:center;}
/* Locations visual — Apple-style location chips with reactive hover */
.locs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.loc{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink); background:#fff; border:1px solid var(--line-soft); padding:8px 14px; border-radius:var(--r-pill);
transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);}
.loc:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 16px -6px rgba(0,113,227,.45);}
.duo-tile.dark .loc{color:var(--dark-text); background:#1d1d1f; border-color:#2d2d2f;}
.duo-tile.dark .loc:hover{background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 6px 16px -6px rgba(255,255,255,.35);}
/* Stats grid (Apple-style big numbers) */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-9) var(--s-7); width:100%; max-width:560px; margin:0 auto;}
.stat{text-align:center;}
.stat b{display:block; font-size:clamp(3rem,5.6vw,4.5rem); font-weight:600; color:var(--dark-text); letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;}
.duo-tile.light .stat b{color:var(--ink);}
.stat span{display:block; margin-top:10px; font-size:12px; color:var(--dark-body); font-weight:500; letter-spacing:.02em; text-transform:uppercase;}
.duo-tile.light .stat span{color:var(--body);}
/* Journey list */
.journey{display:flex; flex-direction:column; gap:0; text-align:left; width:100%; max-width:440px; margin:0 auto;}
.jrow{display:grid; grid-template-columns:50px 1fr; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--line-soft); align-items:center;}
.duo-tile.dark .jrow{border-color:rgba(255,255,255,.08);}
.jrow:first-child{border-top:none;}
.jnum{font-size:13px; font-weight:600; color:var(--accent); letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.duo-tile.dark .jnum{color:#5eb1ff;}
.jrow h5{margin:0 0 2px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.005em;}
.duo-tile.dark .jrow h5{color:var(--dark-text);}
.jrow p{margin:0; font-size:12.5px; color:var(--body); line-height:1.45;}
.duo-tile.dark .jrow p{color:var(--dark-body);}
/* Services list */
.srv{display:flex; flex-direction:column; gap:0; text-align:left; width:100%; max-width:440px; margin:0 auto;}
.srv-row{display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--line-soft);}
.duo-tile.dark .srv-row{border-color:rgba(255,255,255,.08);}
.srv-row:first-child{border-top:none;}
.srv-row .ic{flex-shrink:0; width:40px; height:40px; border-radius:10px; background:#fff; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:17px; border:1px solid var(--line-soft);}
.duo-tile.dark .srv-row .ic{background:rgba(255,255,255,.06); color:var(--dark-text); border-color:rgba(255,255,255,.08);}
.srv-row b{display:block; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.005em;}
.duo-tile.dark .srv-row b{color:var(--dark-text);}
.srv-row p{margin:2px 0 0; font-size:12.5px; color:var(--body); line-height:1.4;}
.duo-tile.dark .srv-row p{color:var(--dark-body);}
/* Live order feed visual */
.feed{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); padding:6px; text-align:left; max-width:380px; margin:0 auto;}
.duo-tile.dark .feed{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.feed-row{display:grid; grid-template-columns:36px 1fr auto; gap:var(--s-3); align-items:center; padding:10px 10px; border-radius:8px;
transition:background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);}
.feed-row + .feed-row{margin-top:2px;}
.feed-row:hover{background:rgba(0,0,0,.03); transform:translateX(2px);}
.duo-tile.dark .feed-row:hover{background:rgba(255,255,255,.06);}
.feed-row .flag{width:32px; height:32px; border-radius:8px; background:var(--bg-2); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.02em;}
.duo-tile.dark .feed-row .flag{background:rgba(255,255,255,.08); color:var(--dark-text);}
.feed-row b{display:block; font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;}
.duo-tile.dark .feed-row b{color:var(--dark-text);}
.feed-row span{font-size:11px; color:var(--body);}
.duo-tile.dark .feed-row span{color:var(--dark-body);}
.feed-tag{font-size:11px; font-weight:500; padding:4px 11px; border-radius:var(--r-pill); background:var(--bg-2); color:var(--body); letter-spacing:.02em;}
.duo-tile.dark .feed-tag{background:rgba(255,255,255,.08); color:var(--dark-body);}
.feed-tag.ok{background:#e0f5e9; color:#1d7a3f;}
.duo-tile.dark .feed-tag.ok{background:rgba(48,209,88,.15); color:#30d158;}
/* ============ Footer — Apple-style ============ */
.foot{padding:var(--s-7) 0 var(--s-9); background:var(--bg-2); color:var(--body); font-size:12px; line-height:1.55;}
.foot a{color:var(--ink); transition:color var(--dur-1);}
.foot a:hover{text-decoration:underline; text-underline-offset:2px;}
.foot-note{display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) 0; color:var(--body); border-bottom:1px solid var(--line); margin-bottom:var(--s-7);}
.foot-note p{margin:0; flex:1; min-width:0;}
.foot-brand{flex:none; display:inline-flex; align-items:center;}
.foot-brand img{height:36px; width:auto; display:block;}
.foot-brand__word{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.02em;}
@media (max-width:600px){
.foot-note{flex-direction:column; align-items:flex-start; gap:12px;}
.foot-brand img{height:32px;}
}
.foot-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-6); padding-bottom:var(--s-7); border-bottom:1px solid var(--line); margin-bottom:var(--s-4);}
.foot-col h5{margin:0 0 var(--s-3); color:var(--ink); font-size:12px; font-weight:600;}
.foot-col a{display:block; margin-bottom:var(--s-2); color:var(--body); font-size:12px;}
.foot-col a:hover{color:var(--ink); text-decoration:underline;}
@media (max-width:960px){ .foot-cols{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .foot-cols{grid-template-columns:1fr;} }
/* contact column */
.foot-contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot-contact-list li{margin:0;}
.foot-contact-list a,
.foot-contact-list .foot-contact-static{display:block; margin:0; color:var(--body); font-size:12px; line-height:1.45;}
.foot-contact-list a{transition:color var(--dur-1);}
.foot-contact-list a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.foot-contact-list .foot-contact-name{color:var(--ink); font-weight:600;}
.foot-contact-list .foot-contact-static{color:var(--muted);}
.foot-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s-4); padding-top:var(--s-3); color:var(--body); font-size:12px;}
.foot-legal{display:flex; gap:var(--s-4); flex-wrap:wrap;}
.foot-lang{display:inline-flex; gap:6px;}
.foot-lang button{background:transparent; border:none; font-family:var(--font); font-size:12px; color:var(--body); padding:2px 6px; cursor:pointer; border-radius:4px;}
.foot-lang button:hover{color:var(--ink);}
.foot-lang button.is-active{color:var(--ink); font-weight:500;}
/* Reveal */
@media (prefers-reduced-motion: no-preference){
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-in{opacity:1; transform:none;}
}
/* ============ HERO MAGIC ============ */
/* 0. ===== EARTH-AT-NIGHT FROM SPACE (photo) ===== */
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#02040a;}
/* the actual photograph */
.earth-photo{position:absolute; inset:0;
background:url("../images/hero-earth.jpg") center 22% / cover no-repeat;
animation:earthDrift 40s ease-in-out infinite alternate; will-change:transform;}
@keyframes earthDrift{ from{transform:scale(1.04) translateY(0);} to{transform:scale(1.1) translateY(-1.5%);} }
/* tint: darken the top for text legibility + fade the bottom into the page */
.earth-tint{position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(2,5,12,.72) 0%, rgba(2,5,12,.34) 26%, rgba(2,5,12,0) 48%, rgba(2,5,12,.30) 86%, rgba(2,5,12,.65) 100%);}
@media (prefers-reduced-motion: reduce){ .earth-photo{animation:none;} }
/* 1. Thermal-print headline reveal — character by character */
.hero h1{position:relative;}
.hero h1 .word{display:inline-block; white-space:nowrap;}
.hero h1 .char{display:inline-block; opacity:0; transform:translateY(18px); animation:charIn .7s var(--ease) forwards; animation-delay:calc(var(--i, 0) * 22ms);}
@keyframes charIn{ to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
.hero h1 .char{opacity:1; transform:none; animation:none;}
}
/* Arabic / RTL: Latin negative tracking breaks the look of cursive script — reset it. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero h1, [dir="rtl"] .hero-sub, [dir="rtl"] .tile-sub, [dir="rtl"] body{letter-spacing:normal;}
/* 2. Floating "Live ops" status pill — frosted glass on dark */
.live-pill{display:inline-flex; align-items:center; gap:10px; margin:0 auto var(--s-5); font-size:13px; font-weight:500; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:8px 16px 8px 14px; border-radius:var(--r-pill); box-shadow:0 8px 28px -12px rgba(0,0,0,.6);}
.live-pill .dot{width:8px; height:8px; border-radius:50%; background:#30d158; box-shadow:0 0 0 0 rgba(48,209,88,.6); animation:pillpulse 2.2s ease-out infinite;}
.live-pill .sep{width:1px; height:14px; background:rgba(255,255,255,.18); margin:0 2px;}
.live-pill .ts{color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;}
@keyframes pillpulse{
0%{box-shadow:0 0 0 0 rgba(48,209,88,.55);}
70%{box-shadow:0 0 0 10px rgba(48,209,88,0);}
100%{box-shadow:0 0 0 0 rgba(48,209,88,0);}
}
.live-pill-wrap{text-align:center; margin-top:var(--s-9);}
/* 3. Rolling ops ticker — continuous live wire on dark */
.ticker{margin-top:var(--s-8); padding:var(--s-3) 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);}
.ticker-track{display:flex; gap:48px; width:max-content; white-space:nowrap; animation:tickerScroll 38s linear infinite; will-change:transform;}
.event{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; letter-spacing:-.005em;}
.event::before{content:""; width:6px; height:6px; border-radius:50%; background:#30d158; flex-shrink:0; box-shadow:0 0 6px rgba(48,209,88,.7);}
.event b{color:#fff; font-weight:600;}
.event em{font-style:normal; color:#5eb1ff;}
.event .arrow{color:rgba(255,255,255,.3); margin:0 4px;}
@keyframes tickerScroll{ to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }
/* 4. KPI count-up — JS-driven; CSS only ensures tabular numerals */
.kpi-value{font-variant-numeric:tabular-nums;}
/* 5. Breathing chart — bars oscillate independently */
@media (prefers-reduced-motion: no-preference){
.hero-shot .bars i{transform-origin:bottom; animation:barBreathe 4.4s ease-in-out infinite;}
.hero-shot .bars i:nth-child(1){animation-duration:4.2s; animation-delay:0s;}
.hero-shot .bars i:nth-child(2){animation-duration:5.1s; animation-delay:.4s;}
.hero-shot .bars i:nth-child(3){animation-duration:4.6s; animation-delay:.9s;}
.hero-shot .bars i:nth-child(4){animation-duration:5.4s; animation-delay:.2s;}
.hero-shot .bars i:nth-child(5){animation-duration:4.0s; animation-delay:.7s;}
.hero-shot .bars i:nth-child(6){animation-duration:5.8s; animation-delay:.1s;}
.hero-shot .bars i:nth-child(7){animation-duration:4.7s; animation-delay:.6s;}
.hero-shot .bars i:nth-child(8){animation-duration:5.2s; animation-delay:.3s;}
.hero-shot .bars i:nth-child(9){animation-duration:4.4s; animation-delay:.8s;}
.hero-shot .bars i:nth-child(10){animation-duration:5.6s; animation-delay:0s;}
.hero-shot .bars i:nth-child(11){animation-duration:4.3s; animation-delay:.5s;}
.hero-shot .bars i:nth-child(12){animation-duration:5.0s; animation-delay:1s;}
@keyframes barBreathe{
0%,100%{transform:scaleY(1);}
50%{transform:scaleY(1.03);}
}
}
/* ============================================================================
AUTH PAGES (admin login, portal login, portal register)
Split-screen: dark brand panel (left) + form panel (right). All selectors are
scoped under .auth-shell so they never affect the marketing pages. Re-skins the
shared form classes (.form-control, .input-affix, .reg-section…) to this system.
========================================================================== */
.auth-shell{height:100vh; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); background:var(--bg); color:var(--ink); font-family:var(--font); letter-spacing:-.005em;}
.auth-shell *,.auth-shell *::before,.auth-shell *::after{box-sizing:border-box;}
/* ---- Brand panel (left, dark) ---- */
.auth-brand{position:relative; height:100%; background:var(--dark); color:var(--dark-text); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(40px,5vw,72px);}
.auth-brand__photo{position:absolute; inset:0; background:url("../images/hero-earth.jpg") center 34% / cover no-repeat; opacity:.72; animation:authDrift 44s ease-in-out infinite alternate;}
.auth-brand__tint{position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.8) 100%);}
@keyframes authDrift{from{transform:scale(1.05);} to{transform:scale(1.12);}}
.auth-brand > :not(.auth-brand__photo):not(.auth-brand__tint){position:relative; z-index:1;}
.auth-brand__top{display:inline-flex; align-items:center; gap:10px;}
.auth-brand__logo{height:30px; width:auto; display:block; filter:invert(1);}
.auth-brand__word{font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff;}
.auth-brand__mid{margin:auto 0;}
.auth-brand__badge{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#9fd0ff; margin-bottom:18px;}
.auth-brand__badge::before{content:""; width:22px; height:1.5px; border-radius:2px; background:linear-gradient(90deg, transparent, #2997ff);}
.auth-brand__headline{font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,3.4vw,3rem); line-height:1.04; letter-spacing:-.03em; color:#fff; max-width:14ch;}
.auth-brand__headline em{font-style:normal; color:#2997ff;}
.auth-brand__sub{margin-top:18px; color:#c8c8cf; font-size:1.0625rem; line-height:1.5; max-width:36ch; text-wrap:pretty;}
.auth-brand__points{list-style:none; padding:0; margin:34px 0 0; display:flex; flex-direction:column; gap:15px;}
.auth-brand__points li{display:flex; align-items:center; gap:13px; color:#e7e7ec; font-size:.95rem;}
.auth-brand__points i{color:#2997ff; font-size:21px; flex:none;}
.auth-brand__foot{color:#86868b; font-size:.8125rem;}
.auth-brand__foot a{color:#c8c8cf;}
.auth-brand__foot a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
/* ---- Form panel (right) ---- */
.auth-form-panel{position:relative; display:flex; flex-direction:column; height:100%; overflow-y:auto; background:var(--bg);}
.auth-form-inner{width:100%; max-width:580px; margin:auto; padding:clamp(40px,5vw,64px) clamp(24px,4vw,52px);}
.auth-form-inner--wide{max-width:660px;}
.auth-head-logo{height:34px; margin-bottom:26px;}
.auth-title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,2.4vw,2.2rem); line-height:1.08; letter-spacing:-.025em; color:var(--ink);}
.auth-lead{margin-top:8px; color:var(--body); font-size:1.0625rem;}
.auth-form{margin-top:30px;}
.af-row{display:flex; flex-wrap:wrap; gap:16px;}
.af-row > .af-group{flex:1 1 0; min-width:0;}
.af-group{margin-bottom:18px;}
.af-group:last-of-type{margin-bottom:0;}
.auth-shell .form-label,.af-label{display:block; font-size:.8125rem; font-weight:600; color:var(--ink); margin-bottom:7px; letter-spacing:-.005em;}
.auth-shell .req{color:var(--accent); font-weight:700;}
.auth-shell .form-control,.auth-shell .form-select{
width:100%; min-height:48px; padding:11px 14px; margin:0;
font-family:var(--font); font-size:1rem; font-weight:400; color:var(--ink); line-height:1.4;
background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r);
transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); appearance:none; outline:none;
}
.auth-shell .form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%2386868b' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;}
.auth-shell .form-control::placeholder{color:var(--muted);}
.auth-shell .form-control:focus,.auth-shell .form-select:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,113,227,.12);}
.auth-shell .form-control.is-invalid{border-color:#e0322d;}
.auth-shell .form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(224,50,45,.12);}
/* icon-affixed inputs (reuses .input-affix markup from the templates) */
.auth-shell .input-affix{position:relative;}
.auth-shell .input-affix > i{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:18px; line-height:0; pointer-events:none;}
.auth-shell .input-affix > .form-control{padding-left:42px;}
.auth-shell .input-affix-toggle > .form-control{padding-right:44px;}
.auth-shell .affix-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); padding:9px; line-height:0; border-radius:8px; transition:color var(--dur-1);}
.auth-shell .affix-toggle:hover{color:var(--ink);}
.auth-shell .affix-toggle i{font-size:18px;}
.auth-shell .field-error{color:#e0322d; font-size:.8125rem; margin-top:6px;}
.auth-shell .field-hint{color:var(--muted); font-size:.8125rem; margin-top:6px;}
/* remember-me / checkboxes */
.auth-shell .form-check{display:flex; align-items:center; gap:9px; padding:0; margin:20px 0;}
.auth-shell .form-check-input{appearance:none; width:18px; height:18px; flex:none; margin:0; border:1.5px solid var(--line); border-radius:6px; background:var(--bg); cursor:pointer; transition:background var(--dur-1),border-color var(--dur-1);}
.auth-shell .form-check-input:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E") center/13px no-repeat; border-color:var(--accent);}
.auth-shell .form-check-input:focus-visible{box-shadow:0 0 0 4px rgba(0,113,227,.16);}
.auth-shell .form-check-label{font-size:.875rem; color:var(--body); cursor:pointer; margin:0;}
/* primary submit (reuse .btn .btn-primary; ensure full width here) */
.auth-shell .auth-submit{width:100%; margin-top:26px;}
.login-forgot{font-size:.8125rem; font-weight:600; color:var(--accent);}
.login-forgot:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px;}
/* register: section cards on the form panel */
.auth-shell .reg-section{background:var(--bg-3); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:0; margin-bottom:18px; overflow:hidden;}
.auth-shell .reg-section-head{display:flex; align-items:center; gap:13px; padding:18px 20px; border-bottom:1px solid var(--line-soft);}
.auth-shell .reg-section-icon{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb, var(--icon-color, var(--accent)) 12%, transparent); color:var(--icon-color, var(--accent)); font-size:18px;}
.auth-shell .reg-section-head h5{font-family:var(--font-display); font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0;}
.auth-shell .reg-section-head p{font-size:.8125rem; color:var(--muted); margin:2px 0 0;}
.auth-shell .reg-section-body{padding:20px;}
.auth-shell .reg-terms{display:flex; align-items:flex-start; gap:10px; font-size:.8125rem; color:var(--muted); line-height:1.5; margin:18px 0; padding:13px 15px; background:var(--bg-2); border-radius:var(--r); }
.auth-shell .reg-terms i{color:var(--accent); font-size:16px; flex:none; margin-top:1px;}
.auth-alert{display:flex; align-items:flex-start; gap:9px; padding:12px 15px; border-radius:var(--r); font-size:.875rem; margin-bottom:20px; background:#fdeceb; color:#a51b16; border:1px solid #f6cfcc;}
.auth-alert i{font-size:17px; flex:none; margin-top:1px;}
.auth-foot-link{margin-top:26px; font-size:.9375rem; color:var(--body); text-align:center;}
.auth-foot-link a{color:var(--accent); font-weight:600;}
.auth-foot-link a:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px;}
.auth-legal{margin-top:22px; color:var(--muted); font-size:.75rem; text-align:center; line-height:1.5;}
/* floating language picker */
.auth-lang{position:fixed; top:16px; right:18px; z-index:50;}
.auth-lang .auth-lang-btn{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.85); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-pill); padding:7px 14px; font-family:var(--font); font-size:13px; font-weight:600; backdrop-filter:blur(8px); cursor:pointer; transition:background var(--dur-1);}
.auth-lang .auth-lang-btn:hover{background:#fff;}
.auth-lang .dropdown-menu{border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--el-2); padding:6px; font-family:var(--font); margin-top:6px;}
.auth-lang .dropdown-header{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 10px;}
.auth-lang .dropdown-item{border-radius:8px; font-size:14px; padding:7px 10px; color:var(--ink);}
.auth-lang .dropdown-item.active,.auth-lang .dropdown-item:active{background:var(--accent); color:#fff;}
.auth-lang .dropdown-item:hover{background:var(--bg-2);}
/* ---- responsive: stack to a compact top banner ---- */
@media (max-width:900px){
.auth-shell{display:block; height:auto; overflow:visible;}
.auth-brand{position:static; height:auto; min-height:104px; padding:22px clamp(20px,5vw,32px); flex-direction:row; align-items:center; justify-content:space-between; gap:16px;}
.auth-brand__mid,.auth-brand__foot{display:none;}
.auth-form-panel{height:auto; overflow:visible;}
.auth-form-inner{margin:0 auto; padding:36px clamp(20px,6vw,32px) 56px;}
.auth-head-logo{display:none;}
}
@media (max-width:560px){
.af-row{gap:0;}
.af-row > .af-group{flex:1 1 100%;}
}
/* ============================================================================
LEGAL PAGES (privacy / terms / cookies) — public design system
========================================================================== */
.legal-hero{padding:calc(var(--nav-h) + var(--s-9)) 0 var(--s-7); background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); border-bottom:1px solid var(--line-soft);}
.legal-hero .tile-eyebrow{margin-bottom:var(--s-3);}
.legal-title{font-family:var(--font-display); font-size:clamp(2.25rem, 4.6vw, 3.5rem); font-weight:700; letter-spacing:-.025em; line-height:1.05; color:var(--ink); margin:0;}
.legal-lede{margin-top:var(--s-4); max-width:62ch; font-size:var(--t-lead); color:var(--body); text-wrap:pretty;}
.legal-updated{margin-top:var(--s-5); display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; color:var(--muted);}
.legal-updated i{font-size:16px;}
.legal-body{padding:var(--s-8) 0 var(--s-10);}
.legal-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--s-8);}
/* sticky table of contents */
.legal-toc{position:sticky; top:calc(var(--nav-h) + var(--s-5)); align-self:start; max-height:calc(100vh - var(--nav-h) - var(--s-7)); overflow-y:auto;}
.legal-toc-title{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--muted); margin-bottom:var(--s-3);}
.legal-toc nav{display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line-soft);}
.legal-toc a{padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:.875rem; color:var(--body); transition:color var(--dur-1), border-color var(--dur-1);}
.legal-toc a:hover{color:var(--ink);}
.legal-toc a.is-active{color:var(--accent); border-left-color:var(--accent); font-weight:600;}
/* prose column */
.legal-prose{min-width:0; max-width:72ch; font-size:1.0625rem; line-height:1.7; color:var(--body);}
.legal-prose section{padding-top:var(--s-2);}
.legal-prose section + section{margin-top:var(--s-7);}
.legal-prose h2{font-family:var(--font-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--ink); margin:0 0 var(--s-4); scroll-margin-top:calc(var(--nav-h) + var(--s-5));}
.legal-prose h3{font-size:1.125rem; font-weight:700; color:var(--ink); margin:var(--s-5) 0 var(--s-2);}
.legal-prose p{margin:0 0 var(--s-4);}
.legal-prose a{color:var(--accent); font-weight:500;}
.legal-prose a:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px;}
.legal-prose ul{margin:0 0 var(--s-4); padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.legal-prose ul li{position:relative; padding-left:30px;}
.legal-prose ul li::before{content:""; position:absolute; left:6px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.legal-prose strong{color:var(--ink); font-weight:600;}
.legal-prose section[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-5));}
/* highlighted note / disclaimer */
.legal-callout{display:flex; gap:12px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:16px 18px; font-size:.9375rem; color:var(--body); margin-top:var(--s-3) !important;}
.legal-callout i{flex:none; font-size:20px; color:var(--accent); margin-top:1px;}
/* cookie table */
.legal-table-wrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-md); margin:0 0 var(--s-4);}
.legal-table{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:480px;}
.legal-table th, .legal-table td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft);}
.legal-table thead th{background:var(--bg-2); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.legal-table tbody tr:last-child td{border-bottom:none;}
.legal-table td:first-child{white-space:nowrap;}
/* contact card at the end of the prose */
.legal-contact-card{display:flex; gap:18px; align-items:flex-start; margin-top:var(--s-8); padding:var(--s-6); background:var(--bg-3); border:1px solid var(--line-soft); border-radius:var(--r-lg);}
.legal-contact-ic{flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:22px;}
.legal-contact-card h3{margin:0 0 4px; font-size:1.0625rem;}
.legal-contact-card p{margin:0 0 10px; font-size:.9375rem;}
@media (max-width:860px){
.legal-grid{grid-template-columns:1fr; gap:var(--s-5);}
.legal-toc{position:static; max-height:none; overflow:visible; padding-bottom:var(--s-4); border-bottom:1px solid var(--line-soft);}
.legal-toc nav{flex-direction:row; flex-wrap:wrap; gap:4px 6px; border-left:none;}
.legal-toc a{border-left:none; border:1px solid var(--line-soft); border-radius:var(--r-pill); padding:6px 14px; margin:0;}
.legal-toc a.is-active{border-color:var(--accent); background:var(--accent); color:#fff;}
}
/* ============ CONTACT PAGE ============ */
.contact-body{padding:var(--s-9) 0 var(--s-12);}
.contact-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:var(--s-9); align-items:start;}
.contact-details{display:flex; flex-direction:column; gap:var(--s-3);}
.contact-card{display:flex; align-items:flex-start; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--line-soft); border-radius:18px; color:var(--ink); text-decoration:none; transition:border-color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1);}
a.contact-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,0,0,.25); color:var(--ink);}
.contact-card > span:last-child{display:flex; flex-direction:column; gap:2px; min-width:0;}
.contact-card b{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--body);}
.contact-card > span:last-child > span{font-size:15px; font-weight:500; word-break:break-word;}
.contact-ic{flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--bg-2); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:19px;}
.contact-form-panel{background:#fff; border:1px solid var(--line-soft); border-radius:24px; padding:var(--s-7);}
.contact-form-title{margin:0 0 var(--s-5); font-size:1.375rem; font-weight:600; letter-spacing:-.018em;}
.contact-form{display:flex; flex-direction:column; gap:var(--s-4);}
/* Topic-dependent field groups (fulfillment vs sourcing). JS toggles `hidden` +
disables the inactive group so its fields are neither validated nor posted. */
.contact-variant{display:flex; flex-direction:column; gap:var(--s-4);}
.contact-variant[hidden]{display:none;}
.contact-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4);}
.contact-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.contact-field label{font-size:.8125rem; font-weight:600; color:var(--ink);}
/* Text-like fields only: the :not() guards keep this off the checkboxes inside
the .contact-dd dropdown panels (a 100%-wide checkbox crushed their labels). */
.contact-field input:not([type="checkbox"]):not([type="radio"]), .contact-field textarea{width:100%; font:inherit; font-size:.9375rem; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); transition:border-color var(--dur-1), box-shadow var(--dur-1);}
.contact-field input:not([type="checkbox"]):not([type="radio"]):focus, .contact-field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,113,227,.12);}
.contact-field textarea{resize:vertical; min-height:120px;}
.contact-field select{width:100%; font:inherit; font-size:.9375rem; padding:12px 38px 12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center; color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer; transition:border-color var(--dur-1), box-shadow var(--dur-1);}
.contact-field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,113,227,.12);}
.contact-field.has-error select{border-color:#d13b3b;}
[dir="rtl"] .contact-field select{padding:12px 14px 12px 38px; background-position:left 14px center;}
.contact-group{margin-top:var(--s-2); padding-top:var(--s-4); border-top:1px solid var(--line-soft); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--body);}
.contact-hint{font-size:12px; color:var(--body); font-weight:400;}
/* Multi-select dropdowns: a styled like the