/* ==========================================================================
Textify Africa — white-label bulk SMS rail
Palette: footer navy (#0e1a30) with gold, starry "space" sections, moon orbits
========================================================================== */
:root{
--night:#0e1a30; --night-2:#16263f; --night-3:#1e3452; --ink:#0e1a30; --ink-2:#22345a;
--gold:#d4a537; --gold-light:#f0c75e; --gold-deep:#8a6514; --gold-tint:#faf1dc; --gold-line:#ecd9a8;
--paper:#f4f6fa; --white:#ffffff; --line:#e2e6ee; --muted:#5a6479;
--ok:#1f9d55; --warn:#d98e04; --danger:#d9443a; --info:#2f6fe4;
--radius-lg:28px; --radius:18px; --radius-sm:10px;
--shadow:0 18px 40px -22px rgba(14,26,48,.5);
--nav-h:78px;
--font-display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%230e1a30' stroke-opacity='.045' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30h44a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H38l-12 10v-10h-6a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z'/%3E%3Cpath d='M28 46h28M28 54h18'/%3E%3Crect x='150' y='20' width='34' height='58' rx='7'/%3E%3Cpath d='M162 70h10'/%3E%3Ccircle cx='60' cy='160' r='20'/%3E%3Cpath d='M60 150v20M54 155h9a4 4 0 0 1 0 8h-6a4 4 0 0 0 0 8h9'/%3E%3Cpath d='M130 140l14 14 26-30'/%3E%3Crect x='150' y='160' width='48' height='34' rx='5'/%3E%3Cpath d='M150 166l24 16 24-16'/%3E%3C/svg%3E");
--stars:radial-gradient(1.2px 1.2px at 20px 30px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.8) 50%,transparent 60%),radial-gradient(1.6px 1.6px at 170px 160px,rgba(240,199,94,.9) 50%,transparent 60%),radial-gradient(1px 1px at 60px 190px,rgba(255,255,255,.6) 50%,transparent 60%),radial-gradient(1.3px 1.3px at 90px 120px,rgba(255,255,255,.7) 50%,transparent 60%);
}
*,*::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;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:6px}
.container{width:min(1200px,100% - 40px);margin-inline:auto}
.narrow{max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center .narrow{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.doodle{background-color:var(--paper);background-image:var(--doodle)}
.section{padding:clamp(64px,9vw,120px) 0}
.section-head{margin-bottom:clamp(32px,5vw,56px)}
.section-head p{font-size:1.1rem;color:var(--muted)}
.on-dark{color:#e8ecf5}
.on-dark .section-head p,.on-dark .muted{color:#a9b3c9}
/* ---------- Buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.85em 1.5em;border-radius:999px;font:600 1rem/1 var(--font-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--night)}
.btn-primary:hover{background:var(--gold-light)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-outline-gold{background:transparent;border-color:var(--gold);color:var(--gold-light)}
.btn-outline-gold:hover{background:var(--gold);color:var(--night)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-wa{background:#25d366;color:#08331a}
.btn-wa:hover{background:#1fb959}
.btn-sm{padding:.55em 1em;font-size:.9rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:999px;background:var(--gold-tint);color:var(--gold-deep);font-weight:600;font-size:.92rem;border:1px solid var(--gold-line)}
.pill-dark{background:rgba(240,199,94,.12);border-color:rgba(240,199,94,.35);color:var(--gold-light)}
.link-arrow{font-weight:600;color:var(--gold-deep);text-decoration:none;border-bottom:2px solid var(--gold-light)}
/* ---------- Navbar (same navy as footer, starts at the very top) ---------- */
.navbar{position:sticky;top:0;z-index:100;background:var(--night);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);transition:box-shadow .2s}
.navbar.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.navbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.45rem/1 var(--font-display);color:inherit;flex:none}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav-links a{display:block;padding:.55em .8em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.96rem;color:#d7deeb;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a.active{background:var(--gold);color:var(--night);font-weight:700}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;white-space:nowrap;color:#fff}
.nav-phone i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(240,199,94,.14);color:var(--gold-light)}
.nav-toggle{display:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:1.25rem}
@media (max-width:1180px){.nav-phone span{display:none}.nav-links a{padding:.5em .6em;font-size:.93rem}}
@media (max-width:1020px){.nav-links,.nav-cta{display:none}.nav-toggle{display:grid;place-items:center}}
/* ---------- Mobile menu (full-height panel, outside the header) ---------- */
.mnav{position:fixed;inset:0;z-index:1000;background:rgba(5,10,22,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mnav.open{opacity:1;visibility:visible}
.mnav-panel{width:min(420px,100%);height:100%;height:100dvh;background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow-y:auto;overscroll-behavior:contain;padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.mnav.open .mnav-panel{transform:none}
.mnav-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);background:var(--night);border-bottom:1px solid rgba(255,255,255,.08);margin:0 -20px 14px;padding:0 20px}
.mnav-close{width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:1.3rem;cursor:pointer}
.mnav-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mnav-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;text-decoration:none;color:#e6ebf4;font-size:1.08rem;font-weight:600;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.mnav-links a i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(240,199,94,.12);color:var(--gold-light);font-size:.95rem}
.mnav-links a::after{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:.75rem;color:#6f7d98}
.mnav-links a.active{background:var(--gold);color:var(--night);border-color:var(--gold)}
.mnav-links a.active i{background:rgba(14,26,48,.12);color:var(--night)}
.mnav-links a.active::after{color:var(--night)}
.mnav-cta{display:grid;gap:10px;margin-top:20px}
.mnav-info{margin-top:auto;padding-top:22px;display:grid;gap:8px;font-size:.9rem;color:#a9b3c9}
.mnav-info a{color:#fff;text-decoration:none}
.mnav-flags{display:flex;gap:8px;align-items:center}
.mnav-flags img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
body.menu-open{overflow:hidden}
@media (min-width:1021px){.mnav{display:none}}
/* ---------- Hero (dark, starry, gold moon behind the photo) ---------- */
.space{background-color:var(--night);background-image:var(--stars);background-size:220px 220px;color:#e8ecf5;position:relative}
.hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.12),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;position:relative}
.hero-copy{padding-bottom:0}
.hero h1{margin:.45em 0 .35em;color:#fff;font-size:clamp(2.3rem,4.4vw,3.8rem)}
.hero h1 .line{display:block}
.hero h1 .line.gold{color:var(--gold-light)}
.hero-sub{font-size:1.12rem;color:#b9c2d6;max-width:56ch}
.typer{display:inline-flex;align-items:center;gap:.5em;margin:6px 0 26px;padding:.6em 1.1em;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(240,199,94,.4);font-weight:600;color:var(--gold-light);min-height:2.7em;max-width:100%}
.typer .spark{color:var(--gold)}
.typer .caret{width:2px;height:1.1em;background:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.hero-signin{margin-top:18px;font-size:.95rem;color:#a9b3c9}
.hero-signin a{color:#fff;font-weight:700}
.hero-visual{position:relative;align-self:start;min-height:420px;padding-top:4px}
.hero-visual .blob{position:absolute;left:50%;top:6%;width:min(440px,94%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf 0,#f0c75e 38%,#c7952a 70%,#8a6514 100%);box-shadow:0 0 90px rgba(240,199,94,.35),inset -20px -24px 50px rgba(0,0,0,.25)}
.hero-visual .blob::before,.hero-visual .blob::after{content:"";position:absolute;border-radius:50%;background:rgba(138,101,20,.25)}
.hero-visual .blob::before{width:16%;height:16%;left:18%;top:22%}
.hero-visual .blob::after{width:10%;height:10%;right:22%;top:48%}
.hero-visual > img{position:relative;z-index:1;width:min(470px,100%);margin:0 0 0 auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:14px;max-width:210px;line-height:1.25;
font-size:.78rem;font-weight:700;color:#fff;
background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.32);
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 14px 30px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.35);
animation:chip-bob 5.5s ease-in-out infinite}
.float-chip i{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font-size:.8rem;background:rgba(240,199,94,.22);color:var(--gold-light);border:1px solid rgba(240,199,94,.35)}
/* The five cards ride one ring around the photo, evenly spaced 72° apart on an
ellipse centred on her (50%, 46%), starting at the top and going clockwise.
Each is anchored by its own centre, so the ring stays even whatever the card
is wide — the centring lives in the keyframes too, or the bob would undo it. */
.float-chip{left:var(--x);top:var(--y);right:auto;transform:translate(-50%,-50%)}
.chip-1{--x:50.0%;--y:5.6%; animation-delay:0s} /* top */
.chip-2{--x:91.5%;--y:33.5%; animation-delay:-1.1s} /* upper right */
.chip-5{--x:75.7%;--y:78.7%; animation-delay:-2.2s;max-width:250px} /* lower right */
.chip-4{--x:24.3%;--y:78.7%; animation-delay:-3.3s; /* lower left */
background:linear-gradient(135deg,rgba(240,199,94,.55),rgba(212,165,55,.25));border-color:rgba(240,199,94,.7)}
.chip-3{--x:8.5%;--y:33.5%; animation-delay:-4.4s} /* upper left */
.chip-4 i{background:rgba(14,26,48,.35);color:#fff}
.chip-flags{flex:none;display:flex;gap:3px}
/* an absolutely-positioned chip shrinks to fit, which was breaking this label
onto four lines; nowrap lets the
decide where it breaks */
.chip-5 span:not(.chip-flags){white-space:nowrap}
.chip-flags img{width:20px;height:14px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
/* the ring cards are anchored by their centre, so their bob has to carry the
centring with it; everything else just bobs where it sits */
@keyframes chip-bob{
0%,100%{transform:translate(-50%,-50%) translateY(0)}
50% {transform:translate(-50%,-50%) translateY(-11px)}}
@keyframes float-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-chip{animation:none;transform:translate(-50%,-50%)}}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr}
.hero-copy{padding-bottom:10px}
/* headroom above the photograph, so the top card of the ring has somewhere to
sit without landing on her head */
.hero-visual{min-height:360px;max-width:460px;margin:0 auto;width:100%;padding-top:70px}
.hero-visual > img{margin:0 auto}
/* Same ring, recomputed for the narrower box: a phone's hero is much taller
than it is wide, so equal percentages would squash the circle into an oval
and the spacing would stop being even. */
/* on a phone the card wraps again, so it keeps to the narrow 180px cap and
stops shouldering the card beside it */
.chip-5{max-width:180px}
.chip-5 span:not(.chip-flags){white-space:normal}
/* The photo is scaled back on a phone so there is headroom above her, and the
ring is lifted to match — the top card has to clear her head, which starts
22.5% of the way down the photograph. */
/* height:auto matters — the ![]()
carries a height attribute, which otherwise
acts as a presentational hint and stretches her vertically */
.hero-visual > img{width:min(300px,82%);height:auto}
.chip-1{--x:50.0%;--y:23.8%}
.chip-2{--x:80.4%;--y:42.2%}
.chip-5{--x:68.8%;--y:71.9%}
.chip-4{--x:31.2%;--y:71.9%}
.chip-3{--x:19.6%;--y:42.2%}
/* narrower cards on a phone: the ring is small there, and wide cards would
reach in over her face */
.float-chip{font-size:.72rem;padding:7px 9px;max-width:128px;gap:6px}
.float-chip i{width:24px;height:24px;font-size:.72rem}
.chip-5{max-width:128px}
}
/* ---------- Stats band (dark) ---------- */
.stats-band{background:var(--night);color:#fff;padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.06)}
.networks{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.88rem;color:#a9b3c9}
.networks .net{padding:6px 14px;border-radius:10px;background:#fff;color:var(--ink);font-weight:700;font-size:.85rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(135deg,#1b3350,#16263f);box-shadow:inset 0 0 0 1px rgba(240,199,94,.18);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius)}
.stat{padding:22px 26px;border-left:1px solid rgba(255,255,255,.08)}
.stat:first-child{border-left:0}
.stat b{display:block;font:800 clamp(1.8rem,3vw,2.4rem)/1 var(--font-display);letter-spacing:-.02em}
.stat b em{font-style:normal;color:var(--gold-light)}
.stat b{color:#fff}
.stat span{font-size:.88rem;color:#a9b3c9}
@media (max-width:760px){
.stats{grid-template-columns:1fr 1fr}
.stat:nth-child(3){border-left:0}
.stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
.stat{padding:18px}
}
/* ---------- Trust strip ---------- */
.trust{padding:56px 0 64px;border-bottom:1px solid var(--line)}
.trust h2{font-size:clamp(1.4rem,2.4vw,1.9rem);max-width:30ch;margin-inline:auto}
.industries{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:30px}
.industry{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border-radius:var(--radius);background:var(--paper);font-weight:600;font-size:.9rem;text-align:center}
.industry i{font-size:1.4rem;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--gold-deep);box-shadow:0 6px 16px -10px rgba(14,26,48,.5)}
@media (max-width:900px){.industries{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.industries{grid-template-columns:repeat(2,1fr)}}
/* ---------- Founder / persona block ---------- */
.persona{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,64px);align-items:center}
.persona-quote{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow);position:relative}
.persona-quote::before{content:"\201C";position:absolute;top:-28px;left:26px;font:800 7rem/1 var(--font-display);color:var(--gold)}
.persona-quote p{font-size:1.12rem;font-style:italic;color:#2b3551}
.persona-quote .who{font-style:normal;margin-top:18px;font-size:.95rem}
.persona-quote .who b{display:block}
.persona-photo{width:min(320px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:#d4d9e6;border:10px solid #fff;box-shadow:var(--shadow)}
.persona-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:800px){.persona{grid-template-columns:1fr}.persona-photo{order:-1;width:220px}}
/* ---------- Control cards (dark glass) ---------- */
.control{background-color:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;position:relative}
.control::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,48,.7),rgba(14,26,48,.95));pointer-events:none}
.control > *{position:relative;z-index:1}
.control .section-head p{color:#c3c8e6}
.glass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column}
.glass .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;background:rgba(240,199,94,.16);color:var(--gold-light);margin-bottom:18px}
.glass h3{color:#fff;font-size:1.15rem}
.glass p{color:#c9cee8;font-size:.97rem;margin:0}
.glass-money{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.glass.money{background:linear-gradient(135deg,rgba(212,165,55,.26),rgba(212,165,55,.06));border:1.5px solid var(--gold);padding:34px}
.glass.money h3{font-size:1.5rem}
.glass.money .ic{background:var(--gold);color:var(--night)}
.glass .tag{margin-top:auto;padding-top:18px;font-size:.85rem;color:var(--gold-light);font-weight:600}
@media (max-width:1000px){.glass-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.glass-grid,.glass-money{grid-template-columns:1fr}}
/* ---------- Browser mockup (dashboard preview) ---------- */
.browser{border-radius:22px;background:#fff;box-shadow:0 40px 80px -40px rgba(14,26,48,.55);border:1px solid var(--line);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#eef1f6;border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#e36a5c}
.browser-bar i:nth-child(2){background:#e8b93b}.browser-bar i:nth-child(3){background:#56c25c}
.browser-bar .url{margin-left:12px;flex:1;max-width:360px;background:#fff;border-radius:8px;padding:5px 12px;font-size:.8rem;color:var(--muted)}
.mock{display:grid;grid-template-columns:190px 1fr;min-height:420px;background:#f1f3f8;font-size:.8rem}
.mock-side{background:#fff;padding:16px 10px;border-right:1px solid var(--line)}
.mock-side div{padding:8px 10px;border-radius:10px;color:#4a5068;display:flex;gap:10px;align-items:center}
.mock-side div.on{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.mock-main{padding:14px;display:grid;gap:12px;grid-template-columns:1fr 1.6fr;grid-auto-rows:min-content}
.mock-top{grid-column:1/-1;padding:12px 16px;border-radius:14px;color:#fff;background:linear-gradient(90deg,var(--mock-brand,var(--gold)),var(--night));font-weight:700;text-align:center;transition:background .4s}
.mock-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 18px -14px rgba(14,26,48,.5)}
.mock-send{background:linear-gradient(120deg,var(--mock-brand,var(--gold)),var(--night));display:grid;place-items:center;min-height:90px}
.mock-send span{background:var(--mock-brand,var(--gold));color:var(--night);padding:8px 18px;border-radius:999px;font-weight:700;border:2px solid rgba(255,255,255,.4)}
.mock-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-tile{display:flex;align-items:center;gap:10px}
.mock-tile i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.mock-tile b{display:block;font-size:.95rem}
.brand-swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--night)}
@media (max-width:760px){
.mock{grid-template-columns:1fr}
.mock-side{display:flex;overflow-x:auto;gap:4px;border-right:0;border-bottom:1px solid var(--line);padding:10px}
.mock-side div{white-space:nowrap}
.mock-main{grid-template-columns:1fr}
.mock-tiles{grid-template-columns:1fr 1fr}
}
/* ---------- Stacking cards (the signature moment) ---------- */
.stack{position:relative;display:grid;gap:28px;padding-bottom:20px}
.stack-card{position:sticky;top:calc(var(--nav-h) + 24px + var(--i,0) * 22px);border-radius:var(--radius-lg);padding:clamp(24px,4vw,48px);background:#fff;border:1px solid var(--line);box-shadow:0 -12px 40px -24px rgba(14,26,48,.45);display:grid;grid-template-columns:auto 1fr .9fr;gap:clamp(18px,3vw,40px);align-items:center;min-height:320px;transform-origin:center top;will-change:transform}
.step-no{font:800 clamp(3rem,6vw,5rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--gold);align-self:start}
.stack-card h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.stack-card p{color:var(--muted);font-size:1.05rem}
.stack-visual{background:var(--paper);background-image:var(--doodle);border-radius:var(--radius);padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.stack-visual .big-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--night);color:var(--gold-light);box-shadow:0 0 0 6px var(--gold-tint);font-size:1.5rem;margin:0 auto 6px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{padding:.4em .85em;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.85rem;font-weight:600}
.chip.ok::before{content:"\2713";color:var(--gold-deep);margin-right:6px;font-weight:800}
.stack-done{text-align:center;padding:40px 0 0}
.stack-done h3{font-size:clamp(1.6rem,3vw,2.4rem)}
/* Who-it's-for variant: coloured cards */
.stack.who .stack-card{color:#fff;border:0;background:var(--c,#1c2150);grid-template-columns:1.1fr .9fr}
.stack.who .stack-card p{color:rgba(255,255,255,.82)}
.who-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:1.5rem;color:var(--gold-light);margin-bottom:18px}
.who-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px;display:grid;gap:10px}
.who-panel .row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;font-weight:600}
.who-panel .row i{color:var(--gold-light)}
@media (max-width:860px){
.stack-card{grid-template-columns:1fr;top:calc(var(--nav-h) + 12px + var(--i,0) * 14px);min-height:auto}
.stack.who .stack-card{grid-template-columns:1fr}
.step-no{font-size:3rem}
}
@media (prefers-reduced-motion:reduce){
.stack-card{position:relative;top:auto !important;transform:none !important}
html{scroll-behavior:auto}
.typer .caret{animation:none}
}
/* ---------- Revenue ---------- */
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.mini{padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.mini i{color:var(--gold);font-size:1.3rem;margin-bottom:12px;display:block}
.mini h3{font-size:1.1rem;margin-bottom:.35em}
.mini p{margin:0;color:var(--muted);font-size:.96rem}
@media (max-width:760px){.mini-cards{grid-template-columns:1fr}}
.calc{margin-top:40px;display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.calc-in{background:#fff;padding:clamp(22px,4vw,40px);display:grid;gap:22px}
.calc-out{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:clamp(22px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.calc-out .amount{font:800 clamp(2.2rem,4.5vw,3.6rem)/1 var(--font-display);color:var(--gold-light);margin:8px 0 12px;word-break:break-word}
.calc-out small{color:#b8bfdc}
.field-range label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.field-range output{color:var(--gold-deep);font-weight:800}
input[type=range]{width:100%;accent-color:var(--gold)}
.seg{display:inline-flex;background:var(--paper);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:.5em 1em;border-radius:999px;font:600 .92rem var(--font-body);cursor:pointer;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (max-width:800px){.calc{grid-template-columns:1fr}}
/* ---------- Customer features (Vastcom dark) ---------- */
.night{background:var(--night);color:#e8ecf5}
.night h2,.night h3{color:#fff}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:start}
.feature-list{display:grid;gap:4px;counter-reset:f}
.feature{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.feature i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#1e3452;color:var(--gold-light)}
.feature h3{font-size:1.1rem;margin-bottom:.25em}
.feature p{margin:0;color:#a9b3c9;font-size:.97rem}
.campaign{background:var(--night-2);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;position:sticky;top:calc(var(--nav-h) + 24px)}
.campaign .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.campaign .lbl{font-size:.72rem;color:#8391ad;margin:12px 0 6px}
.campaign .box{background:#0e1a30;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 14px;font-size:.9rem;display:flex;justify-content:space-between;gap:10px}
.campaign .var{background:rgba(240,199,94,.18);color:var(--gold-light);padding:0 6px;border-radius:5px}
.badge-live{font-size:.7rem;font-weight:800;color:var(--gold-light);background:rgba(240,199,94,.14);padding:4px 10px;border-radius:999px}
.bar{height:8px;border-radius:99px;background:#243a5a;overflow:hidden;margin:10px 0 14px}
.bar span{display:block;height:100%;width:98.5%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.net-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.net-row div{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;font-size:.7rem;color:#8391ad}
.net-row b{display:block;color:#fff;font-size:.85rem}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr}.campaign{position:relative;top:auto}.net-row{grid-template-columns:repeat(3,1fr)}}
/* ---------- Countries ---------- */
.countries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.country{border-radius:var(--radius-lg);padding:30px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.country .flag{font-size:2.6rem;line-height:1}
.country h3{margin:14px 0 8px}
.country p{color:var(--muted);margin:0}
.country .live{position:absolute;top:22px;right:22px;display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--gold-deep)}
.country .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--gold-tint)}
@media (max-width:860px){.countries{grid-template-columns:1fr}}
/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start}
.faq-list{display:grid;gap:12px}
.faq{border-radius:var(--radius);background:#fff;border:1px solid var(--line);overflow:hidden}
.faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:none;border:0;padding:20px 22px;font:600 1.03rem var(--font-body);color:var(--ink);cursor:pointer}
.faq button i{transition:transform .25s;color:var(--gold)}
.faq[data-open] button i{transform:rotate(45deg)}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq[data-open] .ans{grid-template-rows:1fr}
.faq .ans > div{overflow:hidden}
.faq .ans p{padding:0 22px 20px;margin:0;color:var(--muted)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}
/* ---------- CTA band & direct note ---------- */
.cta-band{background:linear-gradient(135deg,#f0c75e,#d4a537 55%,#b8891f);color:var(--night);border-radius:var(--radius-lg);padding:clamp(34px,6vw,70px);display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.cta-band h2{color:var(--night)}
.cta-band p{color:#3a2d0c;font-size:1.1rem}
.cta-band .actions{display:flex;flex-direction:column;gap:12px}
.cta-band .small{font-size:.88rem;color:#3a2d0c;text-align:center}
@media (max-width:800px){.cta-band{grid-template-columns:1fr}}
.direct{margin-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;padding:22px 26px;border-radius:var(--radius);border:1.5px dashed #c3c9d6;background:var(--paper)}
.direct p{margin:0;max-width:70ch}
/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:20ch}
.page-hero p{font-size:1.15rem;color:var(--muted);max-width:60ch}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.crumbs a{text-decoration:none;font-weight:600;color:var(--gold-deep)}
/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:.85em 1em;border-radius:12px;border:1.5px solid var(--line);font:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:5px}
.alert{padding:12px 16px;border-radius:12px;font-size:.95rem;display:none}
.alert.show{display:block}
.alert.err{background:#fdecea;color:#8c231b;border:1px solid #f5c2bd}
.alert.ok{background:var(--gold-tint);color:var(--gold-deep);border:1px solid var(--gold-line)}
/* ---------- Auth pages ---------- */
.auth{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(240,199,94,.18),transparent 45%)}
.auth-side > *{position:relative;z-index:1}
.auth-side h2{color:#fff;max-width:16ch}
.auth-side ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.auth-side li{display:flex;gap:12px;align-items:center;color:#d3d7ee}
.auth-side li i{color:var(--gold-light)}
.auth-main{display:grid;place-items:center;padding:clamp(28px,5vw,64px) 20px;background:var(--paper)}
.auth-card{width:min(440px,100%);background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.auth-card h1{font-size:2rem;margin-bottom:.2em}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:6px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-google:hover{border-color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;padding:8px}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth-side{display:none}}
/* ==========================================================================
API DOCUMENTATION
A reference page, not a marketing page: a sticky contents rail on the left,
one section per endpoint, and every field in a table you can scan.
========================================================================== */
.docs-page{background:var(--white)}
.docs-hero{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:44px 0 40px}
.docs-hero .crumbs{color:#8fa0bd;font-size:.9rem;margin-bottom:10px}
.docs-hero .crumbs a{color:var(--gold-light);text-decoration:none}
.docs-hero h1{font-size:clamp(2rem,4vw,2.9rem);margin:0 0 .35em;color:#fff}
.docs-hero p{color:#b9c6dc;max-width:62ch;font-size:1.06rem;margin:0}
.docs-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.docs-hero-meta span{display:inline-flex;align-items:center;gap:8px;padding:.42em 1em;border-radius:999px;
background:rgba(240,199,94,.12);border:1px solid rgba(240,199,94,.3);color:var(--gold-light);font:600 .86rem var(--font-body)}
.docs-hero-meta code{background:none;padding:0;color:#fff;font:600 .84rem ui-monospace,Menlo,Consolas,monospace;
overflow-wrap:anywhere}
.docs-shell{display:grid;grid-template-columns:252px minmax(0,1fr);gap:clamp(28px,4vw,56px);padding:40px 0 90px;align-items:start}
/* contents rail */
.docs-side{position:sticky;top:calc(var(--nav-h) + 18px);align-self:start}
.docs-side-toggle{display:none;width:100%;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
border:1.5px solid var(--line);background:#fff;font:700 .95rem var(--font-body);color:var(--night);cursor:pointer}
.docs-side-toggle .cv{margin-left:auto;transition:transform .2s}
.docs-side-toggle[aria-expanded="true"] .cv{transform:rotate(180deg)}
.docs-side-inner{display:grid;gap:2px;max-height:calc(100vh - var(--nav-h) - 50px);overflow-y:auto;padding-right:6px}
.docs-side-h{margin:16px 0 4px;padding:0 12px;font:700 .72rem var(--font-body);letter-spacing:.11em;
text-transform:uppercase;color:var(--muted)}
.docs-side-h:first-child{margin-top:0}
.docs-side a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;
font-size:.94rem;color:var(--muted);font-weight:500;border-left:2px solid transparent}
.docs-side a:hover{background:var(--paper);color:var(--night)}
.docs-side a.active{background:var(--gold-tint);color:var(--gold-deep);font-weight:700;border-left-color:var(--gold)}
/* the endpoints belonging to the section above, indented under it */
.docs-side-eps{display:grid;gap:1px;margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid var(--line)}
.docs-side-eps .ep-link{gap:7px;padding:5px 8px;font:500 .8rem ui-monospace,Menlo,Consolas,monospace;
color:var(--muted);border-left:0;border-radius:8px}
.docs-side-eps .ep-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-side-eps .ep-link:hover{background:var(--paper);color:var(--night)}
.docs-side-eps .m{font-size:.58rem;padding:2px 5px;letter-spacing:.02em}
/* an endpoint jumped to from the rail should not hide under the sticky header */
.ep-line{scroll-margin-top:calc(var(--nav-h) + 22px)}
/* method chip */
.m{display:inline-block;padding:2px 7px;border-radius:5px;font:700 .68rem/1.5 ui-monospace,Menlo,Consolas,monospace;
letter-spacing:.04em;background:var(--night);color:#fff;font-style:normal;flex:none}
.m-post{background:#1f7a4d}.m-get{background:#1f5fb0}.m-put{background:#a06a10}.m-delete{background:#a32a2a}
/* the body */
.docs-body{min-width:0}
.docs-body section{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 20px)}
.docs-body h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .5em}
.docs-body h3{font-size:1.06rem;margin:26px 0 10px}
.docs-body p{color:var(--muted);font-size:1.02rem}
.docs-body > section > p:first-of-type{color:#37425c}
.docs-base{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;margin:18px 0;padding:14px 16px;
border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.docs-base > span{font:700 .72rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.docs-base code{font:600 1rem ui-monospace,Menlo,Consolas,monospace;background:none;padding:0;color:var(--night);word-break:break-all}
.docs-base .copy-btn{position:static;margin-left:auto;background:var(--night)}
/* Callouts. Not a flex container: the loose text and inline inside must
stay one flowing paragraph, so the icon is positioned instead. */
.docs-note{position:relative;margin:18px 0;padding:15px 18px 15px 48px;border-radius:12px;
border:1px solid #d7e2f2;background:#f2f6fc;font-size:.95rem;color:#37425c;line-height:1.65}
.docs-note > i{position:absolute;left:17px;top:18px;color:#3b6fb5;font-size:.95rem}
.docs-note b{display:block;color:var(--night);font-size:.97rem;margin-bottom:3px}
.docs-note p{margin:0;color:inherit;font-size:.95rem}
.docs-note.warn{background:#fff8e6;border-color:#f3d98f;color:#6b5312}
.docs-note.warn > i{color:var(--gold-deep)}
.docs-note.warn b{color:#5c4610}
.docs-note.spark{background:var(--gold-tint);border-color:var(--gold-line);color:#5c4610}
.docs-note.spark > i{color:var(--gold-deep)}
.docs-note.spark b{color:#4a3a0d}
.docs-steps{counter-reset:ds;list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.docs-steps li{counter-increment:ds;position:relative;padding-left:40px;color:#37425c}
.docs-steps li::before{content:counter(ds);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;background:var(--gold);color:var(--night);font:800 .8rem var(--font-body)}
.docs-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.docs-points li{display:flex;gap:10px;align-items:flex-start;color:#37425c;font-size:.98rem;line-height:1.6}
.docs-points i{color:#1f7a4d;margin-top:5px;font-size:.82rem;flex:none}
.docs-points b{color:var(--night)}
.docs-points a{color:var(--gold-deep);font-weight:600}
/* one endpoint */
.ep-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
border-radius:12px;background:var(--night);color:#fff}
.ep-line .m{font-size:.74rem;padding:4px 9px}
.ep-path{font:600 1rem ui-monospace,Menlo,Consolas,monospace;background:none;color:#fff;padding:0;word-break:break-all}
.ep-line .copy-btn{position:static;margin-left:auto}
.ep-public{padding:3px 9px;border-radius:999px;background:rgba(62,207,31,.16);color:#7ee787;
border:1px solid rgba(126,231,135,.35);font:700 .7rem var(--font-body)}
/* field tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--paper);font-weight:700;white-space:nowrap}
.tbl tbody th{background:var(--paper);font-weight:700;white-space:nowrap;width:150px}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl td{color:#37425c}
.tbl code,.docs-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--paper);
padding:2px 6px;border-radius:5px;color:var(--ink-2);overflow-wrap:anywhere}
.tbl a{color:var(--gold-deep)}
.ty{font:600 .78rem ui-monospace,Menlo,Consolas,monospace;color:var(--muted);white-space:nowrap}
/* a field name is one token: let the column widen rather than break the name */
.tbl-fields td:first-child{white-space:nowrap}
.tbl-fields td:first-child code{overflow-wrap:normal;word-break:normal}
.req{display:inline-block;padding:2px 8px;border-radius:999px;font:700 .72rem var(--font-body);white-space:nowrap}
.req.yes{background:#e7f4ec;color:#1f7a4d;border:1px solid #bfe0cd}
.req.no{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.st{font-weight:700}
.st-2{background:#e7f4ec;color:#1f7a4d}
.st-4{background:#fdeceb;color:#a32a2a}
.st-5{background:#fff3e0;color:#8a5a10}
/* code blocks */
.code{position:relative;background:#0e1a30;color:#dfe6f3;border-radius:14px;overflow:hidden;margin:14px 0}
.code-tabs{display:flex;gap:2px;background:#16263f;padding:6px;padding-right:86px;overflow-x:auto}
.code-tabs button{border:0;background:transparent;color:#8a97b3;padding:6px 12px;border-radius:8px;
font:600 .82rem var(--font-body);cursor:pointer;white-space:nowrap}
.code-tabs button:hover{color:#fff}
.code-tabs button[aria-selected="true"]{background:#0e1a30;color:#fff}
.code pre{margin:0;padding:18px;overflow-x:auto;font:.85rem/1.65 ui-monospace,Menlo,Consolas,monospace;
-webkit-overflow-scrolling:touch}
.copy-btn{position:absolute;top:8px;right:8px;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;
padding:6px 11px;font:600 .78rem var(--font-body);cursor:pointer;transition:background .15s}
.copy-btn:hover{background:var(--gold);color:var(--night)}
.docs-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.docs-help a{display:flex;align-items:center;gap:13px;padding:16px;border-radius:14px;border:1px solid var(--line);
background:#fff;text-decoration:none;color:var(--night);transition:border-color .16s,transform .16s}
.docs-help a:hover{border-color:var(--gold);transform:translateY(-2px)}
.docs-help i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--gold-tint);
color:var(--gold-deep);flex:none}
.docs-help b{display:block;font-size:.95rem}
.docs-help span{font-size:.86rem;color:var(--muted);word-break:break-word}
@media (max-width:980px){
.docs-shell{grid-template-columns:1fr;padding-top:22px}
.docs-side{position:static;margin-bottom:18px}
.docs-side-toggle{display:flex}
.docs-side-inner{display:none;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:14px;
max-height:60vh;background:#fff}
.docs-side.open .docs-side-inner{display:grid}
}
/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.price-card{border-radius:var(--radius-lg);padding:clamp(24px,4vw,44px);background:#fff;border:1px solid var(--line)}
.price-card.dark{background:var(--night);color:#fff;border:0}
.price-card.dark p,.price-card.dark li{color:#c9cee8}
.price-card ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:10px}
.price-card li{display:flex;gap:10px}
.price-card li i{color:var(--gold);margin-top:5px}
.price-card.dark li i{color:var(--gold-light)}
.price-big{font:800 3.2rem/1 var(--font-display);margin:10px 0}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}
/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.office{padding:24px;border-radius:var(--radius);background:var(--paper);margin-bottom:14px}
.office h3{font-size:1.1rem;display:flex;gap:10px;align-items:center}
.office p{margin:.2em 0;color:var(--muted)}
.office a{font-weight:700;text-decoration:none;color:var(--ink)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
/* ---------- Error pages ---------- */
.error-page{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 20px}
.error-code{font:800 clamp(6rem,20vw,12rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:3px var(--ink);letter-spacing:-.04em}
.error-code span{color:var(--gold);-webkit-text-stroke:0}
/* ---------- Footer ---------- */
.footer{background:var(--night);color:#a9b3c9;padding:72px 0 28px;margin-top:0}
.footer a{color:#dfe5f1;text-decoration:none}
.footer a:hover{color:var(--gold-light)}
.footer h4{position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.foot-about .brand{color:#fff;margin-bottom:16px}
.footer{border-top:2px solid var(--gold)}
.foot-about p{font-size:.95rem;max-width:40ch}
.footer h4{color:#fff;font-size:1rem;margin-bottom:14px;font-family:var(--font-body)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.95rem}
.foot-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.foot-contact div{font-size:.93rem}
.foot-contact b{color:#fff;display:block;margin-bottom:4px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.88rem}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}
@media (max-width:640px){.foot-contact{grid-template-columns:1fr}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);text-decoration:none}
/* ==========================================================================
Dashboards (user tu.html + admin ta.html)
========================================================================== */
.dash{--side-w:250px;display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;background:#eef1f6;font-size:15px}
.dash-side{position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;z-index:60}
.dash-side .brand{padding:6px 10px 16px;font-size:1.3rem}
.dash-side .who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--paper);margin-bottom:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-weight:800;flex:none}
.who small{display:block;color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.who b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.side-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#3f4563;font-weight:500;border:0;background:none;font:inherit;cursor:pointer;text-align:left;width:100%}
.side-link i{width:20px;text-align:center;color:#7a819b}
.side-link:hover{background:var(--paper)}
.side-link.active{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.side-link.active i{color:var(--gold-deep)}
.side-link .count{margin-left:auto;background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;border-radius:99px;padding:1px 8px}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.dash-main{min-width:0;display:flex;flex-direction:column}
.dash-top{position:sticky;top:0;z-index:50;margin:14px 18px 0;padding:12px 18px;border-radius:16px;background:linear-gradient(90deg,#b8891f,var(--night-2) 45%,var(--night));box-shadow:inset 0 -2px 0 var(--gold);color:#fff;display:flex;align-items:center;gap:14px}
.dash-top h1{font-size:1.15rem;margin:0;flex:1;text-align:center;font-family:var(--font-body)}
.dash-top .icon-btn{background:rgba(255,255,255,.15);border:0;color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.dash-top .bal{background:rgba(0,0,0,.2);padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap}
.dash-body{padding:18px;display:grid;gap:18px;align-content:start}
.menu-btn{display:none !important}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
.g-side{grid-template-columns:1fr 1.7fr}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 8px 24px -20px rgba(14,26,48,.55);min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:1.05rem;margin:0;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.tile{display:flex;align-items:center;gap:14px}
.tile .ti{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.05rem;flex:none}
.tile small{color:var(--muted);display:block}
.tile b{font-size:1.35rem;font-family:var(--font-display)}
.send-hero{background:linear-gradient(120deg,#c7952a,var(--night) 70%);display:grid;place-items:center;min-height:130px;color:#fff;text-align:center}
.send-hero .btn{background:var(--gold);color:var(--night);border:2px solid rgba(255,255,255,.45)}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:230px}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.b-sent,.b-approved,.b-active,.b-answered{background:#e3f5ea;color:#16703d}
.b-queued,.b-pending,.b-open,.b-scheduled{background:#fff4dc;color:#8a5a00}
.b-failed,.b-rejected,.b-suspended{background:#fdecea;color:#8c231b}
.b-closed,.b-new{background:#e9edf8;color:#34407a}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty i{font-size:2rem;color:#c3c9d6;display:block;margin-bottom:10px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:.6em .9em;border-radius:10px;border:1.5px solid var(--line);font:inherit;background:#fff;min-width:0}
.counter{font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:6px}
.key-box{display:flex;gap:10px;align-items:center;background:var(--paper);border-radius:12px;padding:12px 14px;font:600 .92rem ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.thread{display:grid;gap:10px;margin:12px 0}
.msg{padding:12px 14px;border-radius:14px;background:var(--paper);max-width:85%}
.msg.support{background:var(--gold-tint);margin-left:auto}
.msg small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:4px}
.modal{position:fixed;inset:0;background:rgba(14,26,48,.55);display:none;place-items:center;z-index:200;padding:20px}
.modal.show{display:grid}
.modal-box{background:#fff;border-radius:20px;padding:24px;width:min(560px,100%);max-height:90vh;overflow-y:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;z-index:300;transition:transform .3s;max-width:calc(100% - 32px);font-weight:500}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}
.phone-preview{background:#1d2238;border-radius:28px;padding:16px;max-width:280px;margin:0 auto}
.phone-preview .screen{background:#eef1f6;border-radius:18px;padding:14px;min-height:220px}
.bubble{background:#fff;border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:.88rem;white-space:pre-wrap;word-break:break-word;box-shadow:0 4px 10px -8px rgba(0,0,0,.4)}
.bubble.wa{background:#dcf8c6}
.sender-lbl{font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:6px;text-align:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--line);background:#fff;padding:.5em 1em;border-radius:999px;font:600 .88rem var(--font-body);cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.admin-view{display:none}
.admin-view.show{display:grid}
.scrim{display:none}
@media (max-width:1100px){.g-4{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
.dash{grid-template-columns:1fr}
.dash-side{position:fixed;left:0;top:0;bottom:0;width:270px;transform:translateX(-100%);transition:transform .3s;box-shadow:20px 0 40px -30px rgba(0,0,0,.5)}
.dash.side-open .dash-side{transform:none}
.dash.side-open .scrim{display:block;position:fixed;inset:0;background:rgba(14,26,48,.4);z-index:55}
.menu-btn{display:grid !important}
.g-2,.g-side{grid-template-columns:1fr}
.dash-top{margin:10px 10px 0}
.dash-body{padding:12px}
.dash-top .bal span{display:none}
}
@media (max-width:520px){.g-4,.g-3{grid-template-columns:1fr}.dash-top h1{font-size:1rem}}
/* ==========================================================================
Orbit systems: countries and team circling a gold moon
========================================================================== */
.orbit-section{overflow:hidden}
.space h2,.space h3{color:#fff}
.space .section-head p{color:#b1bbcf}
.orbit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.orbit-grid.flip > .orbit{order:2}
.orbit{--size:min(520px,86vw);position:relative;width:var(--size);height:var(--size);margin-inline:auto;flex:none}
.orbit::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.10),transparent 65%)}
.moon{position:absolute;top:50%;left:50%;width:calc(var(--size) * .32);height:calc(var(--size) * .32);transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle at 34% 30%,#fff6d8 0,#f0c75e 36%,#c7952a 72%,#7a5a12 100%);
box-shadow:0 0 70px rgba(240,199,94,.45),0 0 0 10px rgba(240,199,94,.06),inset -14px -16px 34px rgba(0,0,0,.28);
display:grid;place-items:center;text-align:center;color:var(--night);z-index:1;padding:5%}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:rgba(122,90,18,.22)}
.moon::before{width:18%;height:18%;left:20%;top:22%}
.moon::after{width:11%;height:11%;right:22%;bottom:26%}
.moon b{position:relative;z-index:1;font:800 calc(var(--size) * .036)/1.1 var(--font-display);display:block}
.moon small{position:relative;z-index:1;display:block;font-size:calc(var(--size) * .024);font-weight:600;opacity:.8;margin-top:4px}
.moon img{position:relative;z-index:1;width:46%;margin:0 auto 6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.ring{position:absolute;top:50%;left:50%;width:calc(var(--size) * var(--f));height:calc(var(--size) * var(--f));
margin:calc(var(--size) * var(--f) / -2) 0 0 calc(var(--size) * var(--f) / -2);
border:1.5px dashed rgba(240,199,94,.32);border-radius:50%;z-index:2;animation:orbit-spin var(--dur,40s) linear infinite}
.ring.rev{animation-direction:reverse}
.ring.faint{border-style:solid;border-color:rgba(255,255,255,.06)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.planet{--p:calc(var(--size) * .17);position:absolute;top:50%;left:50%;width:var(--p);height:var(--p);
margin:calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
transform:rotate(var(--a)) translateX(calc(var(--size) * var(--f) / 2)) rotate(calc(var(--a) * -1))}
.planet .body{position:relative;width:100%;height:100%;animation:orbit-spin var(--dur,40s) linear infinite reverse}
.ring.rev .planet .body{animation-direction:normal}
.planet button{all:unset;cursor:pointer;display:block;width:100%;height:100%;border-radius:50%}
.planet img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--gold);background:var(--night-2);
box-shadow:0 0 0 5px rgba(240,199,94,.12),0 10px 26px -8px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
.planet button:hover img,.planet button:focus-visible img,.planet.is-active img{transform:scale(1.12);box-shadow:0 0 0 6px rgba(240,199,94,.35),0 0 30px rgba(240,199,94,.55)}
.planet .tag{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(.66rem,1.8vw,.8rem);font-weight:700;color:#fff;
background:rgba(14,26,48,.9);border:1px solid rgba(240,199,94,.45);padding:3px 10px;border-radius:99px}
.satellite{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold-light);
box-shadow:0 0 12px var(--gold-light);transform:rotate(var(--a)) translateX(calc(var(--size) * var(--f) / 2))}
.satellite.msg{width:28px;height:28px;margin:-14px 0 0 -14px;background:var(--night-2);border:1.5px solid var(--gold);box-shadow:none;display:grid;place-items:center;color:var(--gold-light);font-size:.72rem}
.orbit:hover .ring,.orbit:hover .planet .body,.orbit:focus-within .ring,.orbit:focus-within .planet .body{animation-play-state:paused}
/* Cards beside the orbit */
.orbit-cards{display:grid;gap:14px}
.o-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:border-color .25s,background .25s}
.o-card.is-active{border-color:var(--gold);background:rgba(240,199,94,.08)}
.o-card img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.o-card h3{font-size:1.1rem;color:#fff;margin:0 0 .25em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.o-card p{margin:0;color:#b1bbcf;font-size:.95rem}
.o-card .meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.o-card .meta span{font-size:.78rem;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:#d6dcea}
.live-dot{font-size:.74rem;font-weight:700;color:#8fe0ae;display:inline-flex;align-items:center;gap:6px}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#34c46e;box-shadow:0 0 0 4px rgba(52,196,110,.18)}
/* flags inline */
.flag-img{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:-5px;border:1.5px solid var(--gold)}
.country .flag img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}
@media (max-width:900px){
.orbit-grid,.orbit-grid.flip{grid-template-columns:1fr}
.orbit-grid.flip > .orbit{order:-1}
.orbit{--size:min(460px,88vw)}
}
@media (max-width:420px){
.planet{--p:calc(var(--size) * .19)}
.o-card{grid-template-columns:1fr;text-align:left}
}
@media (prefers-reduced-motion:reduce){
.ring,.planet .body{animation:none}
}
/* ==========================================================================
Expert modal (opens like a page, closes with ✕ / Esc / back button)
========================================================================== */
.xmodal{position:fixed;inset:0;z-index:1100;background:rgba(5,10,22,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.xmodal.open{opacity:1;visibility:visible}
.xmodal-box{position:relative;width:min(760px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;border-radius:28px;
background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#e8ecf5;border:1px solid rgba(240,199,94,.3);
box-shadow:0 40px 90px -30px rgba(0,0,0,.8);transform:translateY(30px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.xmodal.open .xmodal-box{transform:none}
.xm-head{padding:30px 84px 20px 30px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.xm-head h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.4em 0 .3em}
.xm-head p{color:#b1bbcf;margin:0;max-width:52ch}
.xm-avatars{display:flex}
.xm-avatars img{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;margin-left:-10px;background:var(--night-2)}
.xm-avatars img:first-child{margin-left:0}
.xm-online{display:inline-flex;align-items:center;gap:8px;margin-left:14px;font-size:.85rem;color:#8fe0ae;font-weight:700}
.xm-online::before{content:"";width:9px;height:9px;border-radius:50%;background:#34c46e;box-shadow:0 0 0 4px rgba(52,196,110,.2)}
.xm-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:1.25rem;cursor:pointer}
.xm-close:hover{background:var(--gold);color:var(--night)}
.xm-body{padding:24px 30px 30px;display:grid;gap:22px}
.xm-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xm-opt{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;text-decoration:none;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s,transform .2s}
.xm-opt:hover{border-color:var(--gold);background:rgba(240,199,94,.08);transform:translateY(-2px)}
.xm-opt i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;background:rgba(240,199,94,.15);color:var(--gold-light)}
.xm-opt.wa i{background:#25d366;color:#fff}
.xm-opt b{display:block}
.xm-opt small{color:#a9b3c9}
.xm-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-light);margin:0 0 12px;font-weight:700}
.xm-social{display:flex;flex-wrap:wrap;gap:10px}
.xm-social a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;text-decoration:none;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:600;font-size:.92rem}
.xm-social a:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.xm-hours{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:.9rem}
.xm-hours div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);color:#b1bbcf}
.xm-hours b{display:block;color:#fff}
body.modal-open{overflow:hidden}
@media (max-width:640px){
.xmodal{padding:0;place-items:stretch}
.xmodal-box{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}
.xm-options,.xm-hours{grid-template-columns:1fr}
.xm-head{padding:24px 76px 18px 20px}.xm-body{padding-left:20px;padding-right:20px}
.xm-head > div{flex-wrap:wrap;gap:8px}.xm-online{margin-left:0}
}
/* ==========================================================================
Mobile network operators (MNO) coverage
========================================================================== */
.mno-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.mno-group{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.mno-group .cty{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:.9rem;width:100%;margin-bottom:2px}
.mno{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--night);font-weight:700;font-size:.8rem;white-space:nowrap}
.mno::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot,#999);box-shadow:0 0 0 2px rgba(0,0,0,.06)}
.mno-title{font-size:.88rem;color:#a9b3c9;margin-bottom:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mno-title b{color:var(--gold-light)}
.o-card .mnos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.o-card .mnos .mno{font-size:.74rem;padding:4px 9px}
@media (max-width:900px){.mno-strip{grid-template-columns:1fr}}
/* ==========================================================================
Key message card: phone mockup (left) + copy (right)
========================================================================== */
.msg-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center;background:#fff;border-radius:34px;padding:clamp(22px,4vw,48px);box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden}
.msg-card::before{content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.22),transparent 65%)}
.msg-visual{position:relative;display:grid;place-items:center;min-height:540px;border-radius:26px;background:var(--night);background-image:var(--stars);background-size:220px 220px;padding:28px 10px}
.msg-visual::after{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;top:12%;left:19%;background:radial-gradient(circle at 35% 30%,#fff3cf,#f0c75e 40%,#b8891f 80%);opacity:.22;filter:blur(2px)}
.phone{position:relative;z-index:1;width:min(290px,100%);aspect-ratio:9/18.5;border-radius:44px;background:#0b0f19;padding:11px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 2px #2a3242}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#eef1f6;display:flex;flex-direction:column}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:14px;background:#0b0f19;z-index:3}
.phone-status{display:flex;justify-content:space-between;padding:10px 20px 4px;font-size:.7rem;font-weight:700;color:var(--night)}
.phone-app{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.phone-app .av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.phone-app > div{min-width:0}
.phone-app b{display:block;font-size:.88rem;line-height:1.2}
.phone-app small{display:block;color:var(--muted);font-size:.68rem;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-app > i{flex:none}
.phone-chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden}
.sms{align-self:flex-start;max-width:88%;background:#fff;border-radius:16px 16px 16px 4px;padding:9px 11px;font-size:.78rem;line-height:1.35;box-shadow:0 4px 12px -8px rgba(0,0,0,.4);animation:sms-in .45s cubic-bezier(.2,.8,.2,1) both}
.sms .from{display:block;font-size:.64rem;font-weight:800;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.sms .time{display:block;text-align:right;font-size:.6rem;color:var(--muted);margin-top:3px}
.typing{align-self:flex-start;background:#fff;border-radius:16px;padding:10px 14px;display:flex;gap:4px;animation:sms-in .3s both}
.typing span{width:6px;height:6px;border-radius:50%;background:#9aa3b5;animation:dot 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes sms-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.phone-input{display:flex;align-items:center;gap:8px;margin:8px 10px 14px;padding:8px 8px 8px 14px;border-radius:999px;background:#fff;font-size:.74rem;color:var(--muted)}
.phone-input span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-input i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-size:.7rem}
.msg-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.msg-copy .lead{font-size:1.15rem;font-weight:600;color:var(--night)}
.msg-copy p{color:var(--muted);font-size:1.05rem}
/* same square edge and same gold quotation mark as the revenue card */
.msg-copy blockquote{position:relative;margin:20px 0;padding:34px 20px 18px 20px;border-left:4px solid var(--gold);
background:var(--gold-tint);border-radius:0;color:#2b3551}
.msg-copy blockquote .quote-mark{position:absolute;top:-.04em;left:.1em;font:900 4.6rem/1 Georgia,"Times New Roman",serif;
color:var(--gold);opacity:.38;pointer-events:none;user-select:none}
.msg-copy blockquote{padding-bottom:44px}
.msg-copy blockquote .quote-mark.close{top:auto;left:auto;right:.18em;bottom:-.26em}
.msg-copy blockquote p{color:#2b3551;margin:0 0 .7em}
.msg-copy blockquote p:last-child{margin:0}
.msg-sign{display:flex;align-items:center;gap:12px;margin-top:18px}
.msg-sign img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.msg-sign b{display:block}
.msg-sign span{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.msg-card{grid-template-columns:1fr}.msg-visual{min-height:480px}}
/* ==========================================================================
Step cards: colour changes per card, rail progress on top, thank-you finale
========================================================================== */
.steps-section{transition:background-color .6s ease}
.step-stack{position:relative;display:grid;gap:30px;padding-bottom:10px}
.step-card{position:sticky;top:calc(var(--nav-h) + 20px + var(--i,0) * 16px);border-radius:30px;padding:clamp(22px,3.6vw,40px);color:#fff;background:var(--bg,#0e1a30);
background-image:var(--stars);background-size:220px 220px;box-shadow:0 -14px 44px -22px rgba(0,0,0,.55);min-height:380px;display:flex;flex-direction:column;gap:26px;transform-origin:center top;will-change:transform;overflow:hidden}
.step-card::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.18),transparent 65%);pointer-events:none}
.rail{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.rail::before{content:"";position:absolute;left:22px;right:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 10px,transparent 10px 16px)}
.rail .track{position:absolute;left:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));width:calc((100% - 44px) * var(--progress,0))}
.rail .stop{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);color:#cdd5e4}
.rail .stop.done{background:var(--gold);border-color:var(--gold);color:var(--night)}
.rail .stop.now{width:56px;height:56px;background:#fff;color:var(--night);border:3px solid var(--gold);box-shadow:0 0 0 6px rgba(240,199,94,.25),0 0 26px rgba(240,199,94,.5);font-size:1.15rem}
.rail .stop.now::before{content:"\f239";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:1rem;color:var(--gold-light)}
.step-body{display:grid;grid-template-columns:auto 1fr .9fr;gap:clamp(18px,3vw,40px);align-items:center;flex:1}
.step-no{font:900 clamp(3.2rem,7vw,5.6rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--gold-light);align-self:start}
.step-body h3{color:#fff;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.step-body p{color:rgba(255,255,255,.8);font-size:1.05rem;margin:0}
.step-label{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.step-visual{border-radius:22px;padding:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px;align-items:center}
.step-visual .big-ic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-size:1.5rem;box-shadow:0 0 0 8px rgba(240,199,94,.18)}
.step-visual .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.step-visual .chip.ok::before{color:var(--gold-light)}
/* finale */
.step-card.finale{background:linear-gradient(135deg,#f6d98a,#d4a537 50%,#a97e1c);color:var(--night)}
.step-card.finale::after{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%)}
.step-card.finale .rail::before{background:repeating-linear-gradient(90deg,rgba(14,26,48,.25) 0 10px,transparent 10px 16px)}
.step-card.finale .rail .track{background:var(--night)}
.step-card.finale .rail .stop.done{background:var(--night);border-color:var(--night);color:var(--gold-light)}
.step-card.finale .rail .stop.now{background:var(--night);color:var(--gold-light);border-color:#fff}
.step-card.finale .rail .stop.now::before{color:var(--night)}
.finale-body{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.finale-body h3{color:var(--night);font-size:clamp(1.8rem,3.6vw,3rem)}
.finale-body p{color:#3a2d0c;font-size:1.1rem}
.finale-medal{justify-self:center;width:min(230px,70%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--night);color:var(--gold-light);box-shadow:0 0 0 12px rgba(14,26,48,.12),0 26px 50px -20px rgba(0,0,0,.6)}
.finale-medal i{font-size:3rem;display:block;margin-bottom:8px}
.finale-medal b{font-size:1.05rem;color:#fff}
@media (max-width:860px){
.step-card{top:calc(var(--nav-h) + 10px + var(--i,0) * 10px);min-height:auto}
.step-body,.finale-body{grid-template-columns:1fr}
.step-no{font-size:3rem}
.rail .stop{width:34px;height:34px;font-size:.78rem}
.rail .stop.now{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.step-card{position:relative;top:auto!important;transform:none!important}}
/* ==========================================================================
Homepage dashboard mockup (matches the real customer dashboard)
========================================================================== */
.dmock{--mock-brand:#d4a537;display:grid;grid-template-columns:230px 1fr;gap:16px;padding:16px;background:#f3f3f3;font-size:.84rem;color:#333}
.dm-side{background:#fff;border-radius:18px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25);padding:8px 10px 14px;align-self:start}
.dm-user{display:flex;align-items:center;gap:14px;padding:14px 12px;border-bottom:1px solid #eee;margin:0 -10px 8px;color:var(--mock-brand);font-weight:600;transition:color .3s}
.dm-item{display:flex;align-items:center;gap:16px;padding:12px 12px;border-radius:14px;color:#333}
.dm-item i:first-child{width:18px;text-align:center;color:#333}
.dm-item .chev{margin-left:auto;font-size:.65rem;color:#777}
.dm-item.on{background:#f4f4f4;color:var(--mock-brand);transition:color .3s}
.dm-item.on i:first-child{color:var(--mock-brand)}
.dm-main{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-content:start;min-width:0}
.dm-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:16px;color:#fff;font-size:1.25rem;background:linear-gradient(90deg,var(--mock-brand),#1e2a44);transition:background .4s;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.dm-top span{font-weight:600}
.dm-card{background:#fff;border-radius:16px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25);min-width:0}
.dm-send{display:grid;place-items:center;min-height:100px;background:linear-gradient(120deg,var(--mock-brand),#1e2a44);transition:background .4s}
.dm-send span{background:var(--mock-brand);color:#fff;font-weight:700;padding:10px 24px;border-radius:999px;border:2px solid rgba(255,255,255,.35);filter:brightness(1.05)}
.dm-daily{text-align:center;padding-bottom:14px}
.dm-daily h4{font-weight:500;font-size:.95rem;margin:0;padding:14px;border-bottom:1px solid #eee;color:#333;font-family:var(--font-body)}
.dm-daily p{margin:14px 0 8px}
.dm-daily p b{color:var(--mock-brand);transition:color .3s}
.dm-pie{width:130px;height:130px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 40% 40%,#8ee68e,#2ecc40 70%);position:relative;transition:background .5s ease}
.dm-pie::after{content:"";position:absolute;left:50%;top:0;height:50%;width:2px;background:#fff}
.dm-legend{font-size:.72rem;margin-top:10px}
.dm-legend::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot,#2ecc40);margin-right:6px}
.dm-annual{grid-row:span 2;padding:12px}
.dm-annual h4{margin:4px 6px 6px;font-size:.95rem;font-family:var(--font-body);font-weight:600}
.dm-chart{width:100%;height:auto;display:block}
.dm-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dm-tile{display:flex;align-items:center;gap:12px;padding:14px}
.dm-tile i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;
background:var(--tile,#5b5bd6);transition:background .5s ease}
/* the figure carries the same colour, darkened towards the ink so it stays
readable on white whichever brand is showing (worst case 4.9:1) */
.dm-tile b{display:block;font-size:1rem;color:var(--tile,inherit);transition:color .5s ease}
.dm-tile b{color:color-mix(in srgb,var(--tile,#5b5bd6) 60%,var(--night))}
.swatch-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:22px}
.swatch-row .lbl{font-weight:700;margin-right:4px}
.swatch{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font:600 .88rem var(--font-body);color:var(--night);width:auto;height:auto;box-shadow:none;transition:transform .16s,border-color .16s,box-shadow .16s}
.swatch::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--c);transition:transform .16s}
.swatch:hover{transform:translateY(-2px);border-color:var(--c)}
.swatch:hover::before{transform:scale(1.08)}
.swatch[aria-pressed="true"]{border-color:var(--night);box-shadow:0 0 0 3px rgba(14,26,48,.12);color:var(--c-text,var(--night))}
/* a tick inside the colour itself marks the one being previewed */
.swatch[aria-pressed="true"]::after{content:"";position:absolute;left:14px;top:50%;width:6px;height:11px;margin-top:-7px;
border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);pointer-events:none}
/* the pointer that sits on the colour being previewed */
.swatch .tip{position:absolute;left:19px;top:100%;margin-top:9px;transform:translateX(-50%);display:none;
background:var(--night);color:#fff;font:700 .7rem var(--font-body);padding:3px 9px;border-radius:999px;white-space:nowrap;z-index:3}
.swatch .tip::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;background:var(--night);transform:rotate(45deg)}
.swatch[aria-pressed="true"] .tip{display:block}
@media (max-width:860px){
.dmock{grid-template-columns:1fr}
.dm-side{display:flex;overflow-x:auto;gap:4px;padding:8px}
.dm-user{border:0;margin:0;padding:10px;white-space:nowrap}
.dm-item{white-space:nowrap;padding:10px}
.dm-item .chev{display:none}
.dm-main{grid-template-columns:1fr}
.dm-annual{grid-row:auto}
.dm-tiles{grid-template-columns:1fr 1fr}
}
/* ==========================================================================
Customer dashboard (tu.html) — match the real portal look
========================================================================== */
.side-user{display:flex;align-items:center;gap:14px;padding:16px 14px;margin:-4px -14px 10px;border-bottom:1px solid var(--line);color:var(--gold-deep);font-weight:700;text-decoration:none}
.side-user i{color:var(--gold)}
.dash.side-collapsed{grid-template-columns:0 1fr}
.dash.side-collapsed .dash-side{visibility:hidden;padding:0;border:0}
.menu-btn{display:grid!important}
.orbit .planet .tag small{display:block;font-size:.66em;font-weight:600;color:var(--gold-light);text-align:center}
/* ==========================================================================
Hero: sky-blue ice drops falling across the whole hero, image fits the screen
========================================================================== */
.hero-ice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .container{position:relative;z-index:1}
@media (min-width:901px){
.hero-visual{min-height:0}
.hero-visual{--ih:min(560px,calc(100vh - var(--nav-h) - 120px))}
.hero-visual > img{height:var(--ih);width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.hero-visual .blob{width:min(430px,86%,calc(var(--ih) * .8));top:5%}
}
/* ==========================================================================
Moon logo (country + team orbits)
========================================================================== */
.moon > div{width:100%}
.moon img{width:92%;max-width:none;margin:0 auto 6px;filter:drop-shadow(0 2px 3px rgba(255,255,255,.35))}
.moon small{font-weight:800;white-space:nowrap}
/* ==========================================================================
iPhone-style frame
========================================================================== */
.iphone{position:relative;z-index:1;width:min(300px,100%);aspect-ratio:9/19.5;border-radius:56px;padding:5px;
background:linear-gradient(145deg,#b9b4ab 0%,#6d6962 12%,#2e2d2b 40%,#2e2d2b 60%,#6d6962 88%,#c2bdb4 100%);
box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4),inset 0 0 2px rgba(255,255,255,.5)}
.iphone::before{content:"";position:absolute;inset:5px;border-radius:51px;background:#050505;z-index:0}
.ip-btn{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#3a3936,#8e8a84)}
.ip-action{left:-3px;top:17%;height:5%}
.ip-vol-up{left:-3px;top:25%;height:9%}
.ip-vol-down{left:-3px;top:36%;height:9%}
.ip-power{right:-3px;top:28%;height:14%;background:linear-gradient(270deg,#3a3936,#8e8a84)}
.iphone-screen{position:relative;z-index:1;height:100%;margin:6px;border-radius:46px;overflow:hidden;background:#eef1f6;display:flex;flex-direction:column;color:var(--night)}
.iphone-screen.dark{background:#0b1426;color:#e8ecf5}
.ip-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:27px;border-radius:20px;background:#000;z-index:5;display:flex;align-items:center;justify-content:flex-end;padding-right:9px}
.ip-island span{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4b6b,#0a0f1c 70%)}
.ios-status{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 6px 30px;font-size:.78rem;font-weight:700;flex:none}
.ios-status .i{display:flex;align-items:center;gap:5px;font-size:.66rem}
.ios-status .bat{width:22px;height:11px;border-radius:3px;border:1.5px solid currentColor;padding:1px;position:relative;opacity:.9}
.ios-status .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:1px;background:currentColor}
.ios-status .bat span{display:block;height:100%;width:78%;border-radius:1px;background:currentColor}
.ip-home{flex:none;width:36%;height:5px;border-radius:5px;margin:6px auto 8px;background:currentColor;opacity:.75}
/* message card phone uses the iPhone frame */
.msg-visual .iphone{width:min(292px,100%)}
.msg-visual .phone-app{margin-top:4px}
/* ==========================================================================
"What your customers get": campaign app inside the iPhone
========================================================================== */
.campaign-stage{position:relative;display:grid;place-items:center;padding:30px 0;position:sticky;top:calc(var(--nav-h) + 20px)}
.campaign-stage::before{content:"";position:absolute;width:min(440px,90%);aspect-ratio:1;border-radius:50%;top:8%;
background:radial-gradient(circle at 35% 30%,#fff3cf,#f0c75e 40%,#b8891f 80%);opacity:.28;filter:blur(1px)}
.campaign-stage .iphone{width:min(310px,88%)}
.capp{flex:1;display:flex;flex-direction:column;gap:5px;padding:4px 14px 0;font-size:.72rem;overflow:hidden}
.capp-head{display:flex;align-items:center;gap:9px;padding:6px 0 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.capp-head .av{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:.7rem;flex:none}
.capp-head b{display:block;font-size:.8rem}
.capp-head small{color:#8391ad;font-size:.62rem}
.capp-head i{margin-left:auto;color:var(--gold-light)}
.capp-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.capp-row b{font-size:.84rem}
.capp-row.sm{color:#8391ad;margin-top:4px}
.capp-row.sm b{color:#fff;font-size:.74rem}
.capp .badge-live{font-size:.58rem;padding:3px 8px}
.capp-lbl{font-size:.6rem;color:#8391ad;margin-top:3px}
.capp-box{display:flex;justify-content:space-between;gap:8px;background:#0e1a30;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 10px}
.capp-box em{font-style:normal;color:#8fe0ae;font-size:.64rem}
.capp-box.msg{display:block;line-height:1.4}
.capp .var{background:rgba(240,199,94,.18);color:var(--gold-light);padding:0 4px;border-radius:4px}
.capp-send{text-align:center;padding:8px;border-radius:10px;background:var(--gold);color:var(--night);font-weight:800;margin-top:2px}
.capp .bar{margin:4px 0 6px;height:6px}
.capp-nets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.capp-nets div{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 3px;font-size:.52rem;color:#8391ad;text-align:center}
.capp-nets b{display:block;color:#fff;font-size:.68rem}
.capp-toast{display:flex;gap:8px;align-items:center;margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);animation:float-bob 5s ease-in-out infinite}
.capp-toast i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--gold);color:var(--night);flex:none}
.capp-toast b{display:block;font-size:.72rem}
.capp-toast small{color:#8391ad;font-size:.6rem}
@media (max-width:860px){.campaign-stage{position:relative;top:auto}}
/* ==========================================================================
Who it's for: heading + numbered steps aligned with the stacking cards
========================================================================== */
.who-section{background-image:var(--doodle);transition:background-color .7s ease}
.steps-section{transition:background-color .7s ease}
.who-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,4vw,56px);align-items:start}
.who-grid > *{min-width:0}
.who-aside{position:sticky;top:calc(var(--nav-h) + 28px)}
/* The order of emphasis is deliberately flipped here: "Who it's for" is the
headline of this section, and the sentence under it is the supporting line.
The stays the semantic heading, so screen readers are unaffected. */
.who-aside h2{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.35;letter-spacing:-.005em;
font-weight:600;color:var(--ink-2);margin-top:.7em;max-width:30ch}
/* the heading face, a step up from the other pills on the page, but still a
label above the headline rather than a second headline */
/* the label is the headline: display face, headline scale, no pill chrome */
.who-aside .pill{display:inline-flex;font-family:var(--font-display);
font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.032em;line-height:1.04;
padding:0;gap:.3em;background:none;border:0;color:var(--night)}
.who-aside .pill i{font-size:.42em;color:var(--gold-deep);align-self:center}
.who-aside > p.muted{font-size:.98rem;margin-top:.5em}
.who-section .stack-card h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.who-steps{list-style:none;margin:22px 0 26px;padding:0;position:relative;display:grid;gap:6px}
.who-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:3px;border-radius:3px;background:rgba(14,26,48,.12)}
.who-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 0;border-radius:14px;color:var(--muted);font-weight:600;transition:color .3s}
.who-steps .n{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#fff;border:2px solid rgba(14,26,48,.15);color:var(--muted);transition:all .35s}
.who-steps li.done .n{background:var(--gold);border-color:var(--gold);color:var(--night)}
.who-steps li.active{color:var(--night)}
.who-steps li.active .n{background:var(--night);border-color:var(--night);color:var(--gold-light);transform:scale(1.12);box-shadow:0 0 0 6px rgba(212,165,55,.25)}
.who-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.who-num{flex:none;white-space:nowrap;font:900 clamp(2.2rem,4vw,3.2rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:1.5px var(--gold-light)}
.who-num small{font-size:.4em;-webkit-text-stroke:0;color:rgba(255,255,255,.55);font-weight:700}
.stack.who .stack-card{grid-template-columns:1.2fr .8fr}
@media (max-width:980px){
.who-grid{grid-template-columns:1fr}
.who-aside{position:relative;top:auto}
.who-steps{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px}
.who-steps::before{display:none}
.who-steps li{flex:none;padding:6px 14px 6px 6px;background:#fff;border-radius:999px;font-size:.85rem}
.who-steps li:not(.active) .t{display:none}
.who-steps li:not(.active){padding:6px}
.who-steps .n{width:34px;height:34px;font-size:.85rem}
.stack.who .stack-card{grid-template-columns:1fr}
}
/* ==========================================================================
Ice drops in every "space" section + animated stat counters
========================================================================== */
.space-ice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stats-band{position:relative;overflow:hidden}
.stats-band > .container,.space > .container{position:relative;z-index:1}
.stat b span[data-count]{display:inline-block;min-width:1ch;font:inherit;color:inherit;font-variant-numeric:tabular-nums}
.stat > span{display:block;margin-top:6px}
.stat{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.stats[data-counters]:not(.counted) .stat{opacity:.35;transform:translateY(12px)}
.stats.counted .stat:nth-child(2){transition-delay:.12s}
.stats.counted .stat:nth-child(3){transition-delay:.24s}
.stats.counted .stat:nth-child(4){transition-delay:.36s}
.stat.pop b{animation:stat-pop .5s ease}
.stat::after{content:"";position:absolute;left:26px;right:26px;bottom:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s ease .2s}
.stats.counted .stat::after{transform:scaleX(1)}
@keyframes stat-pop{0%{transform:scale(1)}40%{transform:scale(1.12);text-shadow:0 0 22px rgba(240,199,94,.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.stats[data-counters]:not(.counted) .stat{opacity:1;transform:none}.stat.pop b{animation:none}}
/* Live date + clock on the dashboard "Daily Analysis" card */
.dm-clock{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--mock-brand,var(--gold-deep));font-variant-numeric:tabular-nums;transition:color .3s}
.dm-clock i{font-size:.85em}
.dm-daily h4 [data-today],.card-h h2 [data-today]{display:block;margin-top:4px;font-size:.82rem;font-weight:600;color:#555}
/* ==========================================================================
Hero finishing touches: spacing and curved bottom edge
========================================================================== */
.hero .typer{margin:14px 0 40px}
.hero .hero-actions{gap:18px 28px}
.hero{padding-bottom:clamp(110px,11vw,170px)}
/* curved bottom: the hero bows gently into the stats band, traced by a glowing gold line */
.hero-curve{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(56px,7.5vw,118px);z-index:1;pointer-events:none;display:block}
.hero-curve .curve-fill{fill:#0a1426}
.hero-curve .curve-line{fill:none;stroke:url(#curveGold);stroke-width:2;vector-effect:non-scaling-stroke}
.hero-curve .curve-glow{fill:none;stroke:url(#curveGold);stroke-width:10;opacity:.25;vector-effect:non-scaling-stroke;filter:blur(4px)}
.stats-band{background:#0a1426;border-top:0}
@media (max-width:900px){.hero{padding-bottom:90px}.hero .typer{margin:10px 0 30px}}
/* Hero buttons: wide gap with a gold curve between them on large screens; two rows on phones */
.hero-cta{display:flex;align-items:center;flex-wrap:nowrap;gap:0}
.hero-cta .btn{padding:.95em 1.7em;font-size:1.02rem}
.hero .hero-cta{gap:0}
.btn-curve{display:inline-grid;place-items:center;width:110px;height:44px;margin:0 16px;flex:none}
.btn-curve svg{width:100%;height:100%;overflow:visible}
.btn-curve path{fill:none;stroke:var(--gold-light);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;filter:drop-shadow(0 0 5px rgba(240,199,94,.6));animation:curve-flow 1.6s linear infinite}
.btn-curve circle{fill:var(--gold-light);filter:drop-shadow(0 0 6px rgba(240,199,94,.9))}
@keyframes curve-flow{to{stroke-dashoffset:-22}}
@media (max-width:600px){
.hero .hero-cta{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:14px}
.hero-cta .btn{flex:1 1 0;min-width:0;padding:.8em .6em;font-size:.86rem;white-space:nowrap}
.hero-cta .btn i{font-size:.9em}
.btn-curve{display:none}
}
@media (prefers-reduced-motion:reduce){.btn-curve path{animation:none}}
/* ==========================================================================
Recurring revenue: CEO photo (left) + text (right) in one card
========================================================================== */
/* ==========================================================================
Recurring revenue card — all white, no gold. Title across the top, portrait
on the left, the quotation on the right.
========================================================================== */
.ceo-card{display:grid;grid-template-columns:.72fr 1.5fr;
grid-template-areas:"title title" "side copy";
border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
/* the title runs the full width of the card, so it can carry real size and still
sit on one line (measured: 1,048px of the 1,102px available at 1400px) */
.ceo-title{grid-area:title;margin:0;padding:clamp(26px,3.6vw,44px) clamp(24px,3.6vw,48px) 0;
font-size:clamp(1.6rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.028em;color:var(--night)}
.ceo-side{grid-area:side;position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:flex-start;text-align:center;gap:6px;
padding:clamp(20px,2.6vw,30px) 24px clamp(26px,3.6vw,44px);background:#fff;color:var(--night)}
/* A true circle. `flex:none` stops the column squeezing or stretching it, and the
image carries its own 1:1 ratio so it can never drive the frame taller. */
.ceo-photo{position:relative;z-index:1;flex:none;width:min(210px,74%);aspect-ratio:1;border-radius:50%;
padding:10px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 34px -22px rgba(14,26,48,.35)}
.ceo-photo img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
border:0;background:#fff}
.ceo-name{position:relative;z-index:1;margin-top:16px;font-size:1.15rem;color:var(--night)}
.ceo-role{position:relative;z-index:1;color:var(--muted);font-weight:600;font-size:.9rem}
.ceo-copy{grid-area:copy;position:relative;min-width:0;align-self:center;
padding:clamp(6px,1.4vw,14px) clamp(24px,3.6vw,48px) clamp(26px,3.6vw,44px) clamp(8px,1.6vw,22px)}
.ceo-copy p{color:#2b3551;font-size:1.05rem;font-style:italic}
/* the quotation marks stay, in a quiet neutral rather than gold */
.ceo-copy .quote-mark{position:absolute;top:-.30em;left:-.16em;font:900 5.2rem/1 Georgia,"Times New Roman",serif;
color:var(--ink-2);opacity:.16;pointer-events:none;user-select:none}
.ceo-copy .quote-mark.close{top:auto;left:auto;right:.02em;bottom:-.20em}
/* the point the card makes, set underneath it like any other section note */
.route-note{margin-top:clamp(22px,3vw,34px);max-width:70ch}
.route-note h3{font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 .35em;color:var(--night)}
.route-note p{color:var(--muted);font-size:1.05rem;margin:0}
@media (max-width:860px){
.ceo-card{grid-template-columns:1fr;grid-template-areas:"title" "side" "copy"}
.ceo-title{padding:26px 22px 0}
.ceo-side{padding:18px 22px 6px}
.ceo-copy{padding:8px 22px 30px}
.ceo-copy .quote-mark{font-size:3.6rem;left:-.06em}
.ceo-copy .quote-mark.close{bottom:-.14em}
}
#revenue .mini-cards{margin-top:28px}
@media (max-width:860px){
.ceo-card{grid-template-columns:1fr}
.ceo-side::after{right:0;top:auto;bottom:0;width:100%;height:4px}
.ceo-side{padding-bottom:34px}
.ceo-copy{padding:10px 22px 28px}
}
/* Official Textify Africa logos */
.dash-side .brand img{height:44px}
.moon img{width:56%!important;margin:0 auto 4px}
.footer .brand img{height:54px}
.ceo-side{gap:8px}
.ceo-name{margin-top:18px}
@media (max-width:420px){
.hero-cta .btn{font-size:.78rem;padding:.78em .5em}
.msg-copy blockquote .quote-mark{font-size:3.6rem}
.msg-copy blockquote .quote-mark.close{bottom:-.22em}
}
/* keep the floating badges clear of the phone screen */
.msg-visual{padding-left:6px;padding-right:6px}
.msg-visual .iphone{width:min(258px,82%)}
/* badges: compact chips tucked beside the phone, never over the screen */
.msg-visual .iphone{width:min(238px,74%)}
/* LinkedIn on the team cards and orbit photos */
.o-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 14px;border-radius:999px;text-decoration:none;
font-size:.84rem;font-weight:700;color:#fff;background:#0a66c2;border:1px solid rgba(255,255,255,.18);transition:background .2s,transform .2s}
.o-link:hover{background:#0b79e3;transform:translateY(-1px)}
.o-link i{font-size:.95em}
.planet-li{position:absolute;right:-4%;bottom:-4%;z-index:3;width:34%;max-width:40px;aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;background:#0a66c2;color:#fff;font-size:.8rem;text-decoration:none;
border:2px solid var(--night);box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.planet-li:hover{background:#0b79e3}
@media (max-width:420px){.o-link{font-size:.78rem;padding:5px 12px}}
/* ==========================================================================
PLUG IN OUR API — a curved monitor typing a live call, copy beside it
The screen curves with a wide border-radius plus a shallow 3D rotation, so
it reads as a physical monitor rather than a flat card.
========================================================================== */
.api-section{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;overflow:hidden}
.api-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,68px);align-items:center}
.monitor-wrap{perspective:1600px;display:flex;flex-direction:column;align-items:center}
/* A big elliptical radius — small across, large down — bows the left and right
sides outward, which is what makes the bezel read as a curved panel. */
/* --mon is the monitor's own colour; it cycles, and everything that should
pick up the colour is written in terms of it */
/* the glow used to cycle through five colours; the monitor is meant to stand
still, so it keeps one steady gold */
.monitor-wrap{--mon:#d4a537}
@keyframes mon-hue{
0% {--mon:#d4a537}
20% {--mon:#3ecf1f}
40% {--mon:#2f6fe4}
60% {--mon:#e5484d}
80% {--mon:#9b51e0}
100% {--mon:#d4a537}
}
@property --mon{syntax:"";inherits:true;initial-value:#d4a537}
.monitor{position:relative;width:100%;padding:18px 20px 26px;
border-radius:40px 40px 40px 40px / 92px 92px 74px 74px;
background:linear-gradient(170deg,#28364f,#111c30 46%,#0a1221);
border:1px solid rgba(255,255,255,.14);
/* plain shadow first, so a browser without color-mix keeps it */
box-shadow:0 44px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14);
box-shadow:0 44px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14),
0 0 0 2px color-mix(in srgb,var(--mon) 55%,transparent),
0 26px 70px -34px color-mix(in srgb,var(--mon) 60%,transparent);
transform:rotateX(5deg);transform-style:preserve-3d}
.monitor-screen{position:relative;overflow:hidden;background:#070d18;
border-radius:30px 30px 30px 30px / 74px 74px 58px 58px;
border:1px solid rgba(255,255,255,.09);min-height:352px;display:flex;flex-direction:column;
box-shadow:inset 0 0 70px rgba(0,0,0,.95),inset 0 0 0 1px rgba(240,199,94,.07);
box-shadow:inset 0 0 70px rgba(0,0,0,.95),
inset 0 0 0 1px color-mix(in srgb,var(--mon) 30%,transparent),
inset 0 0 44px -10px color-mix(in srgb,var(--mon) 26%,transparent)}
/* barrel shading: the glass falls away towards both edges */
.monitor-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:
linear-gradient(90deg,rgba(0,0,0,.62),transparent 14%,transparent 86%,rgba(0,0,0,.62)),
radial-gradient(135% 105% at 50% 46%,transparent 50%,rgba(0,0,0,.5) 100%)}
.monitor-glare{position:absolute;left:9%;right:9%;top:14px;height:46%;pointer-events:none;z-index:1;
border-radius:50% 50% 46% 46% / 62% 62% 100% 100%;
background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 72%)}
.monitor-neck{width:88px;height:26px;background:linear-gradient(180deg,#22314a,#131f33);
border-radius:0 0 8px 8px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px -6px color-mix(in srgb,var(--mon) 55%,transparent)}
.monitor-foot{width:min(300px,62%);height:12px;border-radius:999px;
background:linear-gradient(180deg,#26364f,#0e1728);box-shadow:0 22px 34px -18px rgba(0,0,0,.9)}
.mon-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#0c1524;
border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.mon-bar i{width:10px;height:10px;border-radius:50%;background:#2b3a55}
.mon-bar i:first-child{background:#e5484d}.mon-bar i:nth-child(2){background:#e8b339}.mon-bar i:nth-child(3){background:#3ecf1f}
.mon-file{margin-left:10px;font:600 .78rem var(--font-body);color:#93a3bd}
.mon-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 .72rem var(--font-body);
color:var(--gold-light);color:color-mix(in srgb,var(--mon) 70%,#fff);
text-transform:uppercase;letter-spacing:.09em}
.mon-live b{width:7px;height:7px;border-radius:50%;background:#3ecf1f;box-shadow:0 0 0 0 rgba(62,207,31,.7);animation:mon-pulse 1.8s infinite}
@keyframes mon-pulse{70%{box-shadow:0 0 0 7px rgba(62,207,31,0)}100%{box-shadow:0 0 0 0 rgba(62,207,31,0)}}
.mon-code{flex:1;margin:0;padding:16px 18px;overflow:hidden;white-space:pre-wrap;word-break:break-word;
font:500 clamp(.72rem,1.05vw,.84rem)/1.75 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:#c8d6ee}
.mon-code .k{color:#f0c75e}.mon-code .s{color:#7ee787}.mon-code .c{color:#6b7c99;font-style:italic}
.mon-code .p{color:#79b8ff}.mon-code .n{color:#ffab70}
.mon-caret{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;background:var(--mon);animation:mon-blink 1s steps(1) infinite}
@keyframes mon-blink{50%{opacity:0}}
.mon-out{flex:none;border-top:1px solid rgba(255,255,255,.07);background:#08101c;padding:0 18px;max-height:0;
overflow:hidden;transition:max-height .5s ease,padding .5s ease;
font:600 .76rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7ee787}
.mon-out.show{max-height:160px;padding:12px 18px}
.mon-out .ok{color:#3ecf1f}.mon-out .dim{color:#6b7c99}
.api-copy h2{font-size:clamp(1.9rem,3.5vw,2.7rem);margin-top:.5em;color:#fff}
.api-copy .lead{font-size:1.16rem;font-weight:700;color:var(--gold-light);margin-bottom:.8em}
.api-copy p{color:#b9c6dc;font-size:1.04rem}
.api-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.api-points li{display:flex;gap:13px;align-items:flex-start}
.api-points i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
background:rgba(240,199,94,.13);color:var(--gold-light);font-size:.9rem}
.api-points b{display:block;color:#fff;font-size:.98rem;margin-bottom:2px}
.api-points div{color:#93a3bd;font-size:.92rem;line-height:1.55}
.api-points code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;color:var(--gold-light);
background:rgba(240,199,94,.12);padding:1px 6px;border-radius:5px}
@media (max-width:980px){
.api-grid{grid-template-columns:1fr}
/* a narrow box needs a gentler curve, or the bezel reads as a blob */
.monitor{transform:none;padding:12px 12px 18px;border-radius:26px 26px 26px 26px / 44px 44px 36px 36px}
.monitor-screen{min-height:290px;border-radius:19px 19px 19px 19px / 34px 34px 28px 28px}
.monitor-screen::after{background:radial-gradient(140% 110% at 50% 46%,transparent 56%,rgba(0,0,0,.45) 100%)}
.mon-code{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
.mon-caret,.mon-live b,.monitor-wrap{animation:none}
.mon-out{transition:none}
}
/* the value pills fade in behind the lines as the chart is redrawn */
.dm-tag{animation:dm-tag-in .5s .5s both}
@keyframes dm-tag-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dm-tag{animation:none}}
/* ==========================================================================
Competition — "Build with Textify Bulk SMS API. Win TZS 5,000,000."
1 to 30 October 2026. Every word of this page comes from
content.json -> "competition"; nothing here is hard-coded text.
========================================================================== */
/* ---------- The strip above the navbar, on every page ---------- */
.promo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;
padding:9px 20px;text-decoration:none;color:var(--night);font-size:.92rem;
background:linear-gradient(90deg,var(--gold-light),var(--gold) 55%,var(--gold-light));
border-bottom:1px solid rgba(14,26,48,.12)}
.promo b{font-weight:700}
.promo-tag{font:800 .68rem/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;
padding:5px 9px;border-radius:999px;background:var(--night);color:var(--gold-light)}
.promo-when{color:var(--gold-deep);font-weight:600}
.promo-go{font-weight:700;white-space:nowrap;border-bottom:2px solid rgba(14,26,48,.35)}
.promo-go i{font-size:.8em;transition:transform .2s}
.promo:hover .promo-go i{transform:translateX(4px)}
@media (max-width:760px){.promo-when{display:none}.promo{font-size:.85rem;padding:8px 14px}}
@media (max-width:520px){.promo b{flex:1 0 100%;text-align:center;order:2}.promo-go{order:3}}
.mnav-promo{background:var(--gold)!important;color:var(--night)!important;border-color:var(--gold)!important}
.mnav-promo i{background:rgba(14,26,48,.12)!important;color:var(--night)!important}
.mnav-promo::after{color:var(--night)!important}
.mnav-promo em{margin-left:auto;margin-right:10px;font:800 .78rem/1 var(--font-display);font-style:normal;
padding:5px 9px;border-radius:999px;background:var(--night);color:var(--gold-light)}
/* ---------- Hero ---------- */
.comp-hero{padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,96px);overflow:hidden;position:relative}
.comp-hero::before{content:"";position:absolute;inset:-30% -20% auto auto;width:70vw;height:70vw;border-radius:50%;
background:radial-gradient(circle,rgba(240,199,94,.16),transparent 62%);pointer-events:none}
.comp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative}
.comp-hero h1{color:#fff;margin:.5em 0 .4em;font-size:clamp(2.1rem,4.3vw,3.7rem)}
.comp-hero h1 .line{display:block}
.comp-hero h1 .line.gold{color:var(--gold-light)}
.comp-hero .hero-sub{margin-bottom:26px}
.comp-free{margin:22px 0 0;display:flex;align-items:center;gap:10px;font-size:.96rem;color:#b9c2d6}
.comp-free i{color:var(--gold-light)}
/* The purse: one gold-edged card holding the money and the clock */
.purse{border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,.055);
border:1px solid rgba(240,199,94,.42);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);backdrop-filter:blur(3px)}
.purse-top{padding:clamp(22px,3vw,34px);text-align:center;position:relative}
.purse-top::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(240,199,94,.55),transparent)}
.purse-label{font:700 .8rem/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.purse-amount{display:flex;align-items:baseline;justify-content:center;gap:.35em;margin:14px 0 6px;color:#fff}
.purse-amount em{font:700 1.15rem/1 var(--font-display);font-style:normal;color:var(--gold-light)}
.purse-amount b{font:800 clamp(2.4rem,5.2vw,3.6rem)/1 var(--font-display);letter-spacing:-.035em;
font-variant-numeric:tabular-nums}
.purse-note{margin:0;color:#a9b3c9;font-size:.95rem}
.purse-clock{padding:clamp(18px,2.4vw,26px);text-align:center;background:rgba(14,26,48,.45)}
.cd-label{font:700 .78rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#a9b3c9}
.cd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 12px}
.cd-unit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 4px}
.cd-unit b{display:block;font:800 clamp(1.3rem,2.6vw,1.8rem)/1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.cd-unit span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8fa0bd}
.cd-foot{font-size:.82rem;color:#8fa0bd}
@media (max-width:900px){.comp-hero-grid{grid-template-columns:1fr}.purse{max-width:520px;margin-inline:auto;width:100%}}
/* ---------- Prizes ---------- */
.podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(14px,2vw,24px);align-items:end}
.podium-card{position:relative;border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px) 22px 28px;
text-align:center;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.podium-rank{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;
display:grid;place-items:center;border-radius:50%;font:800 1.2rem/1 var(--font-display);
background:var(--night);color:var(--gold-light);border:3px solid #fff}
.podium-place{display:block;margin-top:10px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.podium-amount{display:block;margin-top:8px;font:800 clamp(1.3rem,2.5vw,1.9rem)/1.1 var(--font-display);
letter-spacing:-.03em;color:var(--night);font-variant-numeric:tabular-nums}
.podium-card.p1{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(34px,4vw,48px);
background:linear-gradient(170deg,var(--gold-light),var(--gold));border-color:var(--gold);
box-shadow:0 26px 60px -30px rgba(212,165,55,.8)}
.podium-card.p1 .podium-place{color:var(--gold-deep)}
.podium-card.p1 .podium-amount{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.podium-card.p1 .podium-rank{background:var(--night);color:var(--gold-light);border-color:var(--gold-light)}
.podium-card.p2{background:var(--paper)}
@media (max-width:760px){.podium{grid-template-columns:1fr;gap:34px}.podium-card{padding-top:34px}}
/* ---------- What to build ---------- */
.build-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.comp-build .lead{font-size:1.2rem;font-weight:700;color:var(--night)}
.build-open{margin-top:30px;padding:26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.build-open h3{margin-bottom:.35em}
.build-open p{margin-bottom:16px;color:var(--muted)}
.sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sectors li{padding:.4em .9em;border-radius:999px;background:var(--gold-tint);border:1px solid var(--gold-line);
color:var(--gold-deep);font-size:.9rem;font-weight:600}
.build-bubbles{display:grid;gap:14px;justify-items:start}
.bubble{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:14px 20px;
border-radius:20px 20px 20px 6px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
font-weight:600;color:var(--night);animation:bubble-in .6s both;animation-delay:calc(var(--i) * .12s)}
.bubble:nth-child(even){justify-self:end;border-radius:20px 20px 6px 20px;
background:var(--night);color:#fff;border-color:var(--night)}
.bubble i{color:var(--gold);flex:none}
.bubble:nth-child(even) i{color:var(--gold-light)}
@keyframes bubble-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}
@media (max-width:900px){.build-grid{grid-template-columns:1fr}.build-bubbles{order:-1}}
.breadth{margin-top:clamp(32px,4vw,52px);display:flex;align-items:center;gap:clamp(18px,3vw,32px);
padding:clamp(24px,3vw,36px);border-radius:var(--radius-lg);background:var(--night);color:#e8ecf5}
.breadth h3{color:#fff;margin-bottom:.4em}
.breadth p{margin:0;color:#a9b3c9}
.breadth-mark{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;
background:linear-gradient(160deg,var(--gold-light),var(--gold));color:var(--night)}
.breadth-mark b{font:800 2.2rem/1 var(--font-display)}
.breadth-mark span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
@media (max-width:640px){.breadth{flex-direction:column;text-align:center}}
/* ---------- How to enter ---------- */
.enter-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:step}
.enter-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.5vw,30px);align-items:start;
padding:clamp(22px,3vw,32px);border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);
box-shadow:var(--shadow);position:relative}
.enter-n{position:relative;width:74px;height:74px;flex:none;border-radius:22px;display:grid;place-items:center;
background:var(--night);color:#fff}
.enter-n span{font:800 1.35rem/1 var(--font-display);color:var(--gold-light)}
.enter-n i{position:absolute;right:-12px;bottom:-12px;width:38px;height:38px;border-radius:50%;display:grid;
place-items:center;background:var(--gold);color:var(--night);font-size:.95rem;border:3px solid #fff}
.enter-body h3{margin-bottom:.35em}
.enter-body p{color:var(--muted);margin-bottom:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.facts div{padding:10px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.facts dt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.facts dd{margin:3px 0 0;font-weight:700;color:var(--night)}
@media (max-width:620px){.enter-step{grid-template-columns:1fr}.enter-n{width:64px;height:64px}}
.warn-note{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:clamp(22px,3vw,30px);
border-radius:var(--radius-lg);background:var(--gold-tint);border:1px solid var(--gold-line)}
.warn-note i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--gold);color:var(--night);font-size:1.1rem}
.warn-note h3{margin-bottom:.35em;color:var(--gold-deep)}
.warn-note p{margin:0;color:var(--ink-2)}
/* ---------- Judging ---------- */
.score-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.score-ring-wrap{display:grid;place-items:center}
.score-ring{width:min(280px,72vw);aspect-ratio:1;border-radius:50%;background:var(--pie);display:grid;place-items:center;
box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.score-hole{width:62%;aspect-ratio:1;border-radius:50%;background:var(--night);display:grid;place-content:center;
text-align:center;border:1px solid rgba(255,255,255,.1)}
.score-hole b{font:800 2.8rem/1 var(--font-display);color:#fff}
.score-hole small{display:block;margin-top:6px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#8fa0bd}
.score-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.score-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 16px;
padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.score-row > i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
background:var(--tone);color:#fff;font-size:.95rem}
.score-text b{display:block;color:#fff;font-family:var(--font-display);font-size:1.02rem;line-height:1.25}
.score-text span{display:block;margin-top:3px;font-size:.9rem;color:#a9b3c9}
.score-pts{font:800 1.5rem/1 var(--font-display);color:var(--gold-light);font-variant-numeric:tabular-nums}
.score-bar{grid-column:1/-1;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.score-fill{display:block;height:100%;border-radius:999px;background:var(--tone);width:0;
transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
[data-scores].run .score-fill{width:calc(var(--pts) * 1%)}
@media (prefers-reduced-motion:reduce){.score-fill{transition:none}}
@media (max-width:860px){.score-grid{grid-template-columns:1fr}.score-ring-wrap{order:-1}}
@media (max-width:520px){.score-row{grid-template-columns:auto 1fr}.score-pts{grid-column:2;justify-self:start;font-size:1.2rem}}
.bonus{display:flex;align-items:center;gap:20px;margin-top:clamp(26px,3vw,40px);padding:clamp(22px,3vw,30px);
border-radius:var(--radius-lg);background:rgba(240,199,94,.09);border:1px solid rgba(240,199,94,.34)}
.bonus h3{color:var(--gold-light);margin-bottom:.35em}
.bonus p{margin:0;color:#c3ccdd}
.bonus-chip{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;gap:2px;
grid-auto-flow:column;background:var(--gold);color:var(--night);font:800 1.5rem/1 var(--font-display)}
.bonus-chip i{font-size:.85rem}
@media (max-width:560px){.bonus{flex-direction:column;text-align:center}}
/* ---------- Entering ---------- */
.entering-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);align-items:stretch}
.enter-card{padding:clamp(24px,3vw,34px);border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);
box-shadow:var(--shadow);display:flex;flex-direction:column}
.enter-when{font:700 .76rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.enter-card > i{width:52px;height:52px;margin:18px 0 16px;border-radius:16px;display:grid;place-items:center;
background:var(--gold-tint);border:1px solid var(--gold-line);color:var(--gold-deep);font-size:1.15rem}
.enter-card h3{margin-bottom:.4em}
.enter-card p{color:var(--muted)}
.enter-card .link-arrow{margin-top:auto;align-self:flex-start}
.coupon{position:relative;padding:clamp(24px,3vw,34px);border-radius:var(--radius-lg);color:#e8ecf5;
background:var(--night);background-image:var(--stars);background-size:220px 220px;
border:1px dashed rgba(240,199,94,.5);display:flex;flex-direction:column;justify-content:center}
.coupon-label{font:700 .76rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light)}
.coupon-code{display:block;margin:14px 0 12px;padding:14px 18px;border-radius:14px;text-align:center;
background:rgba(240,199,94,.1);border:1px solid rgba(240,199,94,.4);color:var(--gold-light);
font:800 1.25rem/1.2 var(--font-display);letter-spacing:.04em;word-break:break-word}
/* the link that takes you to the site where the credits are issued */
.coupon-copy{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:11px 20px;
border-radius:999px;background:var(--gold,#d4a537);color:#12203a;font-weight:800;font-size:.92rem;
text-decoration:none;border:0;cursor:pointer;transition:transform .18s,filter .18s}
.coupon-copy:hover{filter:brightness(1.08);transform:translateY(-1px)}
.coupon p{margin:0;font-size:.95rem;color:#a9b3c9}
@media (max-width:980px){.entering-grid{grid-template-columns:1fr 1fr}.coupon{grid-column:1/-1}}
@media (max-width:640px){.entering-grid{grid-template-columns:1fr}}
/* ---------- Rules ---------- */
.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
@media (max-width:980px){.rule-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rule-grid{grid-template-columns:1fr}}
.rule-card{padding:clamp(22px,2.8vw,30px);border-radius:var(--radius-lg);background:var(--paper);
border:1px solid var(--line)}
.rule-card i{width:48px;height:48px;margin-bottom:16px;border-radius:14px;display:grid;place-items:center;
background:var(--night);color:var(--gold-light);font-size:1.05rem}
.rule-card h3{margin-bottom:.4em;font-size:1.15rem}
.rule-card p{margin:0;color:var(--muted)}
/* ---------- Closing band ---------- */
.close-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,40px);
padding:clamp(28px,4vw,44px);border-radius:var(--radius-lg);background:rgba(255,255,255,.05);
border:1px solid rgba(240,199,94,.32)}
.close-brand{font:800 clamp(1.6rem,3vw,2.2rem)/1.1 var(--font-display);color:#fff;letter-spacing:-.02em}
.close-line{margin:.45em 0 .6em;color:#b9c2d6;font-size:1.08rem}
.close-dates{display:inline-block;padding:.35em .9em;border-radius:999px;background:rgba(240,199,94,.12);
border:1px solid rgba(240,199,94,.36);color:var(--gold-light);font-weight:700;font-size:.9rem}
.close-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.close-domain{font-weight:700;color:var(--gold-light);text-decoration:none;border-bottom:2px solid rgba(240,199,94,.5)}
.fine-print{max-width:80ch;margin:26px auto 0;text-align:center;font-size:.88rem;color:#8fa0bd}
/* ==========================================================================
Competition site — the pieces the main website has no equivalent for.
Everything else on this page reuses the styles above, unchanged.
========================================================================== */
/* The clock, sitting in the stats band under the hero */
.comp-clock{max-width:660px;margin:0 auto clamp(28px,4vw,44px);padding:clamp(20px,3vw,28px);
text-align:center;border-radius:var(--radius-lg);background:rgba(255,255,255,.05);
border:1px solid rgba(240,199,94,.35);box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.comp-clock .cd-row{max-width:520px;margin-inline:auto}
.stats-band .comp-clock + .stats{border-top:1px solid rgba(255,255,255,.08);padding-top:clamp(24px,3vw,36px)}
.band-note{margin:clamp(20px,2.6vw,30px) 0 0;text-align:center;color:#a9b3c9;font-size:.98rem}
/* The competition headline carries a long third line ("Win TZS 5,000,000."),
so it is set a shade smaller than the site's own h1 to keep it on one line
from 390px upwards. */
body.comp .hero h1{font-size:clamp(2.05rem,4.05vw,3.5rem)}
body.comp .hero-signin i{color:var(--gold-light);margin-right:6px}
/* The clock in the header and the bar that follows you on a phone */
.nav-clock{display:inline-flex;align-items:center;gap:7px;padding:.42em .9em;border-radius:999px;
background:rgba(240,199,94,.12);border:1px solid rgba(240,199,94,.32);color:#d7deeb;
font-size:.88rem;white-space:nowrap}
.nav-clock i{color:var(--gold-light)}
.nav-clock i.w{font-style:normal;color:inherit}
.nav-clock b{color:var(--gold-light);font-weight:800;font-variant-numeric:tabular-nums}
.nav-clock b:empty,.dock b:empty{display:none}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;align-items:center;
justify-content:space-between;gap:14px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
background:rgba(14,26,48,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-top:1px solid rgba(255,255,255,.1);color:#d7deeb;font-size:.9rem}
.dock b{color:var(--gold-light);font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.dock i.w{font-style:normal}
@media (max-width:700px){
.dock{display:flex}
body{padding-bottom:74px}
.wa-float{bottom:86px}
}
@media (max-width:1180px){.nav-clock{display:none}}
/* The note that keeps the team and the judging panel apart */
.team-note{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 18px;
border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
font-size:.94rem;color:#a9b3c9}
.team-note i{color:var(--gold-light);margin-top:.25em}
/* The finale card of the step rail carries the purse rather than a handshake */
.finale-medal b{font-size:1.15rem;letter-spacing:-.02em}
/* Below about 380px the hero ring is squeezed, so the cards shrink and the top
card sits a little higher, which keeps their corners apart. */
@media (max-width:380px){
.float-chip,.chip-5{max-width:110px}
.float-chip{font-size:.67rem;padding:6px 8px;gap:5px}
.float-chip i{width:21px;height:21px;font-size:.66rem}
.chip-1{--y:20%}
.chip-2,.chip-3{--y:46%}
}
/* The three flags in the closing band (the site styles its own flag rows
elsewhere, so this one needs its own rule or the SVGs render full size). */
.close-band .flags{display:flex;gap:10px;align-items:center;margin-top:4px}
.close-band .flags img{width:30px;height:30px;border-radius:50%;object-fit:cover;
border:2px solid var(--gold);flex:none}
/* ---------- Prizes, in orbit -------------------------------------------- */
/* The planets carry a medal rather than a photograph, so they need the same
ring, shadow and hover the orbit gives .planet img. */
.planet .medal{display:grid;place-content:center;width:100%;height:100%;border-radius:50%;
border:3px solid var(--gold);background:radial-gradient(circle at 34% 30%,#fff6d8,#f0c75e 42%,#c7952a 100%);
color:var(--night);text-align:center;line-height:1;
box-shadow:0 0 0 5px rgba(240,199,94,.12),0 10px 26px -8px rgba(0,0,0,.6);
transition:transform .25s,box-shadow .25s}
.planet .medal b{font:800 calc(var(--size) * .052)/1 var(--font-display);display:block}
.planet .medal small{font:700 calc(var(--size) * .022)/1 var(--font-display);opacity:.72}
.planet .medal.m2{background:radial-gradient(circle at 34% 30%,#fdfdfd,#dfe4ee 42%,#9aa5b8 100%);border-color:#c6cede}
.planet .medal.m3{background:radial-gradient(circle at 34% 30%,#f6ddc4,#e0ab77 42%,#a9713c 100%);border-color:#d7a273}
.planet button:hover .medal,.planet button:focus-visible .medal,.planet.is-active .medal{
transform:scale(1.12);box-shadow:0 0 0 6px rgba(240,199,94,.35),0 0 30px rgba(240,199,94,.55)}
.prize-orbit .moon b{font-size:calc(var(--size) * .058);letter-spacing:-.03em}
.prize-orbit .moon small{font-size:calc(var(--size) * .026)}
.o-medal{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;
font:800 1.5rem/1 var(--font-display);color:var(--night);border:2px solid var(--gold);
background:radial-gradient(circle at 34% 30%,#fff6d8,#f0c75e 42%,#c7952a 100%)}
.o-medal.m2{background:radial-gradient(circle at 34% 30%,#fdfdfd,#dfe4ee 42%,#9aa5b8 100%);border-color:#c6cede}
.o-medal.m3{background:radial-gradient(circle at 34% 30%,#f6ddc4,#e0ab77 42%,#a9713c 100%);border-color:#d7a273}
.o-amount{font:800 1.05rem/1 var(--font-display);color:var(--gold-light);letter-spacing:-.02em}
.prize-card.is-active .o-amount{color:var(--gold-light)}
.orbit-note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.93rem;color:#a9b3c9}
.orbit-note i{color:var(--gold-light);margin-top:.25em}
/* ---------- Your brand on the phone -------------------------------------- */
.phone-app .via{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:rgba(14,26,48,.06);border:1px solid var(--line);flex:none}
.phone-app .via img{width:16px;height:16px;object-fit:contain}
.brand-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:26px 0 18px;
padding:16px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.brand-flow .bf{display:grid;justify-items:center;gap:2px;text-align:center;flex:1 1 90px;min-width:90px}
.brand-flow .bf i,.brand-flow .bf img{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:var(--gold-tint);border:1px solid var(--gold-line);color:var(--gold-deep);font-size:.95rem;
object-fit:contain;padding:8px}
.brand-flow .bf b{font-family:var(--font-display);font-size:.98rem;color:var(--night)}
.brand-flow .bf small{font-size:.8rem;color:var(--muted)}
.brand-flow .bf-mid i,.brand-flow .bf-mid img{background:var(--night);border-color:var(--night)}
.brand-flow .bf-arrow{color:var(--gold);flex:none;font-size:.9rem}
.brand-note{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.95rem;color:var(--muted)}
.brand-note i{color:var(--gold-deep);margin-top:.28em}
@media (max-width:560px){
.brand-flow{gap:6px;padding:14px}
.brand-flow .bf{flex:1 1 72px;min-width:72px}
.brand-flow .bf b{font-size:.88rem}
.brand-flow .bf small{font-size:.72rem}
}
/* ---------- What to build ------------------------------------------------
The label is the headline and the sentence sits under it small: the eye
lands on "What to build" first and reads the explanation second.
------------------------------------------------------------------------ */
.build-head{margin-bottom:clamp(18px,2.4vw,26px)}
.build-kicker{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1;color:var(--night)}
.build-sub{margin:.45em 0 0;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.35;font-weight:600;
color:var(--muted);letter-spacing:0}
.build-intro{max-width:70ch;margin-bottom:clamp(30px,4vw,48px)}
.comp-build .lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.35;font-weight:800;color:var(--night)}
.comp-build .build-intro p:not(.lead){font-size:clamp(1rem,1.4vw,1.14rem)}
/* the integration: screen on the left, what the API does on the right */
.code-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;
margin-bottom:clamp(30px,4vw,48px)}
.code-copy h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:.6em 0 .35em;letter-spacing:-.025em}
.code-copy .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:700;color:var(--gold-deep)}
.code-copy > p:not(.lead){color:var(--muted);font-size:clamp(.99rem,1.3vw,1.08rem)}
@media (max-width:980px){.code-grid{grid-template-columns:1fr}}
/* the messages that come out of it, as one row */
.bubbles-intro{margin:0 0 16px;font-weight:700;color:var(--night);font-size:clamp(1rem,1.4vw,1.15rem)}
.build-bubbles.row{list-style:none;margin:0 0 clamp(30px,4vw,48px);padding:0;display:flex;flex-wrap:wrap;gap:12px}
.build-bubbles.row .bubble{justify-self:auto;margin:0;font-size:clamp(.95rem,1.25vw,1.06rem);padding:13px 20px}
.build-bubbles.row .bubble:nth-child(even){background:var(--night);color:#fff;border-color:var(--night)}
.build-bubbles.row .bubble:nth-child(even) i{color:var(--gold-light)}
.comp-build .build-open h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.comp-build .build-open p{font-size:clamp(1rem,1.35vw,1.1rem)}
.comp-build .sectors li{font-size:clamp(.95rem,1.2vw,1.04rem);padding:.48em 1.05em}
.comp-build .breadth h3{font-size:clamp(1.25rem,2vw,1.65rem)}
.comp-build .breadth p{font-size:clamp(1rem,1.3vw,1.08rem)}
/* ---------- The purse inside the gold moon -------------------------------
The figure has to sit inside the circle, not run over its edge. The moon is
a little wider here than the site's, "TZS" goes on its own line above the
number, and the number is sized from the moon's own width so it can never
outgrow it.
------------------------------------------------------------------------ */
.prize-orbit .moon{width:calc(var(--size) * .40);height:calc(var(--size) * .40);padding:0}
.prize-moon > div{width:78%;margin-inline:auto;text-align:center;position:relative;z-index:1}
.prize-moon em{display:block;font:800 calc(var(--size) * .026)/1 var(--font-display);font-style:normal;
letter-spacing:.16em;text-transform:uppercase;color:rgba(14,26,48,.72)}
.prize-moon b{display:block;margin:.1em 0 .12em;font:800 calc(var(--size) * .062)/1 var(--font-display);
letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--night)}
.prize-moon small{display:block;margin:0;font:600 calc(var(--size) * .0225)/1.2 var(--font-display);
color:rgba(14,26,48,.66);opacity:1}
/* The API points were written for the dark "plug in our API" section on the
main site. Here they sit on paper, so they need ink colours. */
.comp-build .api-points b{color:var(--night)}
.comp-build .api-points div{color:var(--muted)}
.comp-build .api-points i{background:var(--gold-tint);border:1px solid var(--gold-line);color:var(--gold-deep)}
.comp-build .api-points code{color:var(--gold-deep);background:var(--gold-tint);border:1px solid var(--gold-line);
padding:.1em .4em;border-radius:6px}
/* ==========================================================================
Key dates — the deck
Each date is a ticket that pins under the one before it, leaving a stub
showing. By the last date the whole month is stacked up and readable at a
glance. A rail of pips above fills as you pass each one.
========================================================================== */
.tl-section{--stub:56px;--gap:14px;--rail:96px;background:var(--paper);overflow:visible}
/* the rail — it pins under the navbar and fills while the deck builds under it */
.tl-rail{position:sticky;top:var(--nav-h);z-index:4;max-width:900px;margin:0 auto clamp(20px,3vw,34px);
padding:14px 0 10px;background:var(--paper)}
.tl-rail::before{content:"";position:absolute;inset:0 -20px;background:var(--paper);z-index:-1}
.tl-track{position:absolute;left:5%;right:5%;top:33px;height:3px;border-radius:3px;background:var(--line)}
.tl-fill{display:block;height:100%;width:0;border-radius:3px;
background:linear-gradient(90deg,var(--gold),var(--gold-deep));transition:width .5s ease}
.tl-pips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.tl-pip{display:grid;justify-items:center;gap:8px;text-align:center}
.tl-pip b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
font:800 .95rem/1 var(--font-display);background:#fff;border:2px solid var(--line);color:var(--muted);
transition:background .3s,border-color .3s,color .3s,transform .3s}
.tl-pip span{font-size:.8rem;font-weight:700;color:var(--muted);transition:color .3s}
.tl-pip.is-done b{background:var(--gold);border-color:var(--gold);color:var(--night)}
.tl-pip.is-done span{color:var(--gold-deep)}
.tl-pip.is-now b{background:var(--night);border-color:var(--gold);color:var(--gold-light);transform:scale(1.14);
box-shadow:0 0 0 5px rgba(240,199,94,.22)}
.tl-pip.is-now span{color:var(--night)}
@media (max-width:640px){
.tl-pips{grid-template-columns:repeat(5,1fr)}
.tl-pip b{width:30px;height:30px;font-size:.8rem}
.tl-pip span{font-size:.62rem;line-height:1.2}
.tl-track{top:28px}
}
/* the deck */
.tl-deck{list-style:none;margin:0;padding:0}
.tl-card{position:sticky;
top:calc(var(--nav-h) + var(--rail) + var(--i) * (var(--stub) + 4px));
margin-bottom:var(--gap);border-radius:var(--radius-lg);overflow:hidden;
background:#fff;border:1px solid var(--line);
box-shadow:0 -1px 0 rgba(14,26,48,.04),0 24px 50px -34px rgba(14,26,48,.55);
transition:box-shadow .35s}
.tl-card:last-child{margin-bottom:0}
.tl-card.is-now{box-shadow:0 -1px 0 rgba(14,26,48,.04),0 30px 60px -30px rgba(14,26,48,.6)}
/* the stub — the strip that stays visible once the next ticket pins over it */
.tl-stub{display:flex;align-items:center;gap:14px;height:var(--stub);padding:0 clamp(16px,2.4vw,26px);
background:var(--tone);color:#fff}
.tl-no{font:800 1.05rem/1 var(--font-display);opacity:.72;flex:none;font-variant-numeric:tabular-nums}
.tl-stub-date{font:800 1.02rem/1 var(--font-display);flex:none;letter-spacing:-.01em}
.tl-stub-date em{font-style:normal;font-weight:600;opacity:.72;font-size:.86em}
.tl-stub-title{font-weight:600;font-size:.95rem;opacity:.9;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.tl-stub i{margin-left:auto;flex:none;opacity:.85}
/* the face */
.tl-face{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,34px);
padding:clamp(22px,3vw,34px)}
.tl-ticket{position:relative;flex:none;padding:clamp(16px,2vw,22px) clamp(20px,2.6vw,30px);
border-radius:var(--radius);text-align:center;color:#fff;background:var(--tone);min-width:clamp(130px,14vw,180px)}
.tl-big{display:block;font:800 clamp(1.5rem,2.8vw,2.3rem)/1 var(--font-display);letter-spacing:-.035em;
white-space:nowrap}
.tl-small{display:block;margin-top:6px;font:700 .82rem/1 var(--font-display);letter-spacing:.14em;
text-transform:uppercase;opacity:.75}
/* the perforation down the right edge of the ticket */
.tl-perf{position:absolute;top:10px;bottom:10px;right:-1px;width:2px;
background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 5px,transparent 5px 11px)}
.tl-step{display:block;font:700 .74rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;
color:var(--gold-deep);margin-bottom:10px}
.tl-body h3{margin:0 0 .3em;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em}
.tl-lead{margin:0 0 .5em;font-size:clamp(1rem,1.35vw,1.12rem);font-weight:700;color:var(--night)}
.tl-note{margin:0;color:var(--muted);font-size:.97rem}
.tl-mark{flex:none;width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);border-radius:50%;
display:grid;place-items:center;font-size:clamp(1.1rem,1.8vw,1.5rem);color:#fff;background:var(--tone);
box-shadow:0 12px 30px -16px var(--tone)}
@media (max-width:820px){
.tl-section{--stub:48px;--rail:92px}
.tl-face{grid-template-columns:auto 1fr;gap:16px}
.tl-mark{display:none}
.tl-stub-title{display:none}
}
@media (max-width:560px){
.tl-section{--stub:44px;--rail:84px}
.tl-face{grid-template-columns:1fr;padding:18px}
.tl-ticket{min-width:0;display:flex;align-items:baseline;gap:10px;justify-content:flex-start;text-align:left;
padding:12px 16px}
.tl-small{margin-top:0}
.tl-perf{display:none}
.tl-stub{gap:10px}
}
/* Sticky stacking needs room to work; if the browser cannot do it the cards
simply sit one after another, which reads perfectly well. */
@media (prefers-reduced-motion:reduce){
.tl-card{position:static;margin-bottom:16px}
.tl-fill{transition:none}
}
/* =====================================================================
MORNING IN THE HERO
The sun coming up behind the headline, and three bands of wind crossing
it. Each band is two identical wavelengths wide and travels exactly one,
so the loop closes on itself with no seam. All of it sits behind the
copy and takes no pointer events.
===================================================================== */
.sunrise{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* the disc itself, low on the horizon and breathing */
.sun-disc{position:absolute;left:50%;bottom:-26%;width:min(1100px,116vw);aspect-ratio:1;
transform:translateX(-50%);border-radius:50%;
background:radial-gradient(circle at 50% 50%,
rgba(255,244,214,.34) 0%,
rgba(240,199,94,.26) 22%,
rgba(255,159,67,.16) 42%,
rgba(212,110,60,.07) 60%,
transparent 72%);
animation:sun-rise 12s ease-in-out infinite alternate}
@keyframes sun-rise{
from{transform:translateX(-50%) translateY(14px) scale(.98);opacity:.85}
to {transform:translateX(-50%) translateY(-10px) scale(1.03);opacity:1}}
/* the first light spilling upward off it */
.sun-rays{position:absolute;left:50%;bottom:-8%;width:min(1500px,150vw);height:70%;
transform:translateX(-50%);
background:
conic-gradient(from 200deg at 50% 100%,
transparent 0deg, rgba(255,214,140,.10) 12deg, transparent 24deg,
transparent 40deg, rgba(255,214,140,.07) 52deg, transparent 64deg,
transparent 96deg, rgba(255,214,140,.09) 108deg, transparent 120deg,
transparent 140deg);
mask-image:linear-gradient(to top,#000 0%,transparent 88%);
-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 88%);
animation:ray-turn 26s linear infinite}
@keyframes ray-turn{to{transform:translateX(-50%) rotate(6deg)}}
/* the wind */
.wind{position:absolute;left:0;bottom:0;width:100%;height:78%;overflow:visible}
.wind path{fill:none;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.wind-g{will-change:transform}
.g1 path{stroke:url(#windA);stroke-width:3}
.g2 path{stroke:url(#windB)}
.g3 path{stroke:url(#windC);stroke-width:1.6}
/* one wavelength is 1440 user units, so travelling 1440 lands on the next one */
.g1{animation:wind-run 19s linear infinite}
.g2{animation:wind-run 27s linear infinite}
.g3{animation:wind-run 14s linear infinite}
@keyframes wind-run{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
/* everything the visitor actually reads sits above the weather */
.hero-grid,.hero-copy,.hero-visual,.hero-curve{position:relative;z-index:2}
.hero-ice{position:absolute;inset:0;z-index:1}
/* =====================================================================
WHY COMPETE
===================================================================== */
.comp-why{position:relative;overflow:hidden}
.why-glow{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(48vw 40vw at 82% 18%,rgba(240,199,94,.16),transparent 62%),
radial-gradient(42vw 36vw at 8% 86%,rgba(47,111,228,.14),transparent 64%)}
.why-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(32px,4vw,64px);align-items:center}
/* the question is the headline, set large the way "What to build" is, with the
promise under it small — the section announces itself at a glance */
.why-head{margin-bottom:clamp(14px,2vw,22px)}
.why-big{display:block;margin:0;color:#fff;font-family:var(--font-display);font-weight:800;
letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.2rem,4.6vw,4rem)}
.why-sub{margin:.5em 0 0;font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.35;font-weight:600;
color:#b9c2d6;letter-spacing:0;max-width:44ch}
.why-copy .lead{color:var(--gold-light);font-weight:600;font-size:1.04rem;max-width:52ch;margin-top:14px}
.why-points{margin-top:clamp(22px,3vw,34px)}
.why-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.why-points li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius);
background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid rgba(240,199,94,.22);
transition:border-color .25s,transform .25s,background .25s}
.why-points li:hover{border-color:rgba(240,199,94,.6);transform:translateY(-2px);
background:linear-gradient(135deg,rgba(240,199,94,.12),rgba(255,255,255,.04))}
.why-num{flex:none;font:800 1.05rem/1 var(--font-display);color:var(--gold);
background:rgba(240,199,94,.14);border:1px solid rgba(240,199,94,.35);
width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.why-points b{display:block;color:#fff;font-size:1.04rem;margin-bottom:5px}
.why-points b i{color:var(--gold-light);margin-right:.5em}
.why-points p{margin:0;color:#b9c2d6;font-size:.95rem;line-height:1.65}
/* ---- the cube of code, turning ---- */
.why-visual{position:relative;display:grid;place-items:center;min-height:clamp(340px,34vw,460px);
perspective:1200px}
.cube-stage{position:relative;transform-style:preserve-3d;transform:rotateX(-16deg)}
.cube{--s:clamp(190px,20vw,260px);position:relative;width:var(--s);height:var(--s);
transform-style:preserve-3d;animation:cube-spin 26s linear infinite}
@keyframes cube-spin{to{transform:rotateY(360deg)}}
.cube .face{position:absolute;inset:0;border-radius:14px;overflow:hidden;
background:linear-gradient(160deg,#101d36,#0a1426);
border:1px solid rgba(240,199,94,.35);
box-shadow:0 0 34px rgba(240,199,94,.14),inset 0 0 40px rgba(0,0,0,.5)}
.f-front {transform:translateZ(calc(var(--s) / 2))}
.f-right {transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.f-back {transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.f-left {transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
/* .cube .face sets the dark background, so the gold lid needs the same weight */
.cube .f-top {transform:rotateX(90deg) translateZ(calc(var(--s) / 2));
background:linear-gradient(135deg,#ffe6a8,#f0c75e 45%,#d4a537 100%);
box-shadow:0 0 44px rgba(240,199,94,.4)}
.cube .f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));
background:linear-gradient(135deg,#8a6514,#d4a537)}
.face-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;
background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.face-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.face-bar i:first-child{background:#ff5f57}
.face-bar i:nth-child(2){background:#febc2e}
.face-bar i:nth-child(3){background:#28c840}
.face-bar em{margin-left:auto;font-style:normal;color:#8fa0bd;font-size:.62rem;letter-spacing:.05em}
.cube pre{margin:0;padding:11px 12px;color:#d8e2f5;white-space:pre;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.56rem;line-height:1.75}
.cube pre span{display:block;opacity:0;animation:code-in .5s ease forwards;
animation-delay:calc(var(--l) * .36s + .4s)}
@keyframes code-in{from{opacity:0;transform:translateX(-6px)}to{opacity:.92;transform:none}}
.cube-shadow{position:absolute;left:50%;bottom:calc(var(--s, 220px) * -.62);width:clamp(160px,18vw,230px);
height:26px;transform:translateX(-50%) rotateX(80deg);border-radius:50%;
background:radial-gradient(ellipse,rgba(240,199,94,.28),transparent 70%);filter:blur(7px);
animation:shadow-pulse 26s ease-in-out infinite}
@keyframes shadow-pulse{0%,100%{opacity:.75;width:clamp(160px,18vw,230px)}
50%{opacity:.45;width:clamp(120px,14vw,180px)}}
/* what the API says back, drifting around the cube */
.orb-token{position:absolute;padding:.42em .85em;border-radius:999px;
font:700 .74rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
background:rgba(10,20,38,.85);border:1px solid rgba(240,199,94,.4);color:var(--gold-light);
box-shadow:0 10px 26px -14px rgba(0,0,0,.9);white-space:nowrap;
animation:token-float 7s ease-in-out infinite}
.orb-token.t1{top:12%;right:4%;color:#7ee2a8;border-color:rgba(126,226,168,.45)}
.orb-token.t2{bottom:18%;left:2%;animation-delay:-2.4s}
.orb-token.t3{bottom:8%;right:10%;animation-delay:-4.8s;color:#8fc4ff;border-color:rgba(143,196,255,.45)}
@keyframes token-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:980px){
.why-grid{grid-template-columns:1fr}
.why-visual{order:-1;min-height:300px}
}
@media (max-width:480px){
.cube{--s:clamp(150px,44vw,190px)}
.orb-token{font-size:.66rem}
}
/* a still frame for anyone who asked for less motion */
@media (prefers-reduced-motion:reduce){
.sun-disc,.sun-rays,.wind-g,.cube,.cube-shadow,.orb-token{animation:none!important}
.cube{transform:rotateY(-24deg)}
.cube pre span{opacity:.92;animation:none!important}
}
/* =====================================================================
MORE COLOUR THROUGH THE PAGE
The palette does not change — the same navy and gold — but the flat
fills become gradients and the accents carry a little warmth, so the
page feels awake rather than printed.
===================================================================== */
/* the sun keeps rising behind the numbers band, so hero and band read as one sky */
.stats-band{position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(70vw 40vw at 50% -10%,rgba(255,180,90,.16),transparent 62%),
radial-gradient(44vw 30vw at 88% 120%,rgba(240,199,94,.12),transparent 64%)}
/* the ice canvas is absolutely positioned — only the content is lifted */
.stats-band>.container{position:relative;z-index:1}
/* the kicker pills pick up the gold */
.pill{background:linear-gradient(135deg,var(--gold-tint),#fff6e2);border-color:var(--gold-line)}
.pill-dark{background:linear-gradient(135deg,rgba(240,199,94,.16),rgba(255,255,255,.05));
border-color:rgba(240,199,94,.42);color:var(--gold-light)}
/* the main button gets depth and a light that passes over it */
.btn-primary{position:relative;overflow:hidden;
background:linear-gradient(135deg,#f0c75e 0%,#d4a537 52%,#c08f22 100%);
box-shadow:0 14px 34px -16px rgba(212,165,55,.85)}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);animation:btn-shine 4.6s ease-in-out infinite}
@keyframes btn-shine{0%{left:-60%}55%,100%{left:130%}}
.btn-primary:hover{box-shadow:0 18px 40px -14px rgba(212,165,55,.95);transform:translateY(-1px)}
/* the doodled sections warm up from the top corner */
.doodle{position:relative}
.doodle::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(38vw 26vw at 4% 0%,rgba(240,199,94,.16),transparent 60%),
radial-gradient(34vw 24vw at 98% 96%,rgba(47,111,228,.10),transparent 62%)}
.doodle>.container{position:relative;z-index:1}
/* every section heading carries a short gold rule under it */
.section-head.center h2{position:relative;padding-bottom:.42em}
.section-head.center h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:78px;height:4px;border-radius:999px;
background:linear-gradient(90deg,transparent,var(--gold),#ff9f43,var(--gold),transparent);
animation:rule-breathe 5s ease-in-out infinite}
@keyframes rule-breathe{0%,100%{width:78px;opacity:.85}50%{width:118px;opacity:1}}
/* the rule and the scoring bars glow rather than sit flat */
.score-fill{box-shadow:0 0 14px rgba(240,199,94,.5)}
.rule-card,.enter-card{transition:transform .25s,box-shadow .25s,border-color .25s}
.rule-card:hover,.enter-card:hover{transform:translateY(-3px);
box-shadow:0 22px 44px -26px rgba(14,26,48,.55);border-color:var(--gold-line)}
@media (prefers-reduced-motion:reduce){
.btn-primary::after,.section-head.center h2::after{animation:none!important}
}
/* =====================================================================
HERO PHOTOGRAPH — landscape
The picture is a wide desk scene rather than a standing figure, so the
gold moon steps back into a glow behind it and the photograph takes the
full width of its column.
===================================================================== */
/* an older rule sized the portrait photograph by its height; this one is
landscape, so width leads and the height follows the picture */
.hero-visual > img{width:min(620px,100%);height:auto;max-width:100%;margin-inline:auto;
object-fit:contain;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
@media (min-width:901px){
.hero-visual > img{height:auto;width:min(620px,100%)}
}
.hero-visual .blob{width:min(360px,74%);top:2%;left:52%;
opacity:.9;filter:blur(2px)}
.hero-visual{min-height:clamp(330px,30vw,430px)}
@media (max-width:1100px){
.hero-visual > img{width:min(560px,100%)}
.hero-visual .blob{width:min(320px,70%)}
}
@media (max-width:900px){
.hero-visual{min-height:0;padding-top:34px;max-width:620px}
.hero-visual > img{width:min(560px,100%);height:auto}
.hero-visual .blob{width:min(300px,64%);top:0}
}
@media (max-width:480px){
.hero-visual > img{width:100%}
.hero-visual .blob{width:min(230px,60%)}
}
/* the five facts, now a row under the hero copy rather than chips over the photo */
.hero-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero-facts li{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:14px;
line-height:1.25;font-size:.8rem;font-weight:700;color:#fff;
background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
border:1px solid rgba(240,199,94,.3);backdrop-filter:blur(6px);
transition:border-color .25s,transform .25s,background .25s}
.hero-facts li:hover{border-color:rgba(240,199,94,.7);transform:translateY(-2px);
background:linear-gradient(135deg,rgba(240,199,94,.18),rgba(255,255,255,.06))}
.hero-facts i{color:var(--gold-light);font-size:.95rem;flex:none}
.hero-facts b{display:block;color:#fff;font-size:.86rem}
.hero-facts span{display:block;color:#c3cbdc;font-weight:600;font-size:.76rem}
.hero-facts b + *,.hero-facts span b{color:#fff}
.hero-facts .chip-flags{display:flex;gap:4px;flex:none}
.hero-facts .chip-flags img{width:20px;height:14px;border-radius:2px}
@media (max-width:480px){
.hero-facts{gap:8px}
.hero-facts li{padding:8px 11px;font-size:.74rem}
}
/* =====================================================================
THE MONITOR STANDS STILL
It used to grow as the call was typed and again when the response
appeared, which pushed everything under it up and down the page. The
screen now has a fixed height: the code clips inside it and the
response sits in space that is always reserved, so the monitor is the
same size from the first character to the last.
===================================================================== */
.monitor-screen{height:462px;min-height:0}
.mon-code{flex:1;min-height:0;overflow:hidden}
.mon-out{flex:none;height:46px;max-height:none;padding:10px 18px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
opacity:0;transition:opacity .35s ease}
.mon-out.show{max-height:none;padding:10px 18px;opacity:1}
/* the one note a developer needs, set as the card's whole message */
.sender-note{display:flex;gap:13px;align-items:flex-start;margin:18px 0 0;padding:20px 22px;
border-radius:var(--radius);font-size:1.02rem;line-height:1.65;color:var(--ink-2);font-weight:600;
background:linear-gradient(135deg,var(--gold-tint),#fffaf0);
border:1px solid var(--gold-line)}
.sender-note i{flex:none;margin-top:.24em;color:var(--gold-deep);font-size:1.05rem}
@media (max-width:900px){
.monitor-screen{height:430px}
.sender-note{font-size:.98rem;padding:17px 18px}
}
@media (max-width:480px){
/* the lines wrap on a narrow screen, so the code is set smaller to fit whole */
.monitor-screen{height:444px}
.mon-code{font-size:.64rem;padding:12px 12px}
/* the response wraps to two lines at this width, so it is given both */
.mon-out{height:70px;font-size:.66rem}
}
/* the typing pill keeps the height of its longest phrase, so nothing below it
jumps as the shorter ones are typed */
.typer-slot{display:grid;min-width:0}
.typer-slot > *{grid-area:1/1;min-width:0}
.typer-ghost{visibility:hidden;pointer-events:none;user-select:none}
.typer{align-items:flex-start}
.typer .spark,.typer .caret{margin-top:.15em}
/* the code and its hidden twin share one cell, so the block is the size of the
finished snippet from the first frame and nothing inside the monitor moves */
.mon-stack{display:grid;min-width:0}
.mon-stack > *{grid-area:1/1;min-width:0}
.mon-ghost{visibility:hidden;pointer-events:none;user-select:none;
white-space:pre-wrap;word-break:break-word}
.mon-typed{white-space:pre-wrap;word-break:break-word}