/* ===========================================================================
   World Alumni Network — public multi-page skin (premium dark-luxury)
   Same luminous language as the portal: deep-space navy, aurora glows,
   radiant gold + emerald + royal violet, glass, Playfair & Poppins.
   Self-contained for marketing pages; mirrors theme.css vars so pages that
   also load theme/world stay consistent.
   =========================================================================== */
:root{
  --bg-0:#060a14; --bg-1:#0a1222; --bg-2:#0e1a30; --bg-3:#111f3a;
  --gold:#f4b942; --gold-2:#ffd98c; --gold-3:#ffe9b0; --gold-deep:#d99a1f;
  --emerald:#2ad8a6; --emerald-deep:#0ea97c;
  --royal:#9b7bff; --royal-2:#b9a0ff; --royal-deep:#5b33c9;
  --ruby:#ff5c78;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --muted:#9db1d6; --muted-2:#7187ad; --text:#f4f7ff;
  --serif:'Playfair Display',Georgia,serif; --sans:'Poppins',system-ui,sans-serif;
  --shadow:0 24px 60px -18px rgba(0,4,16,.75),0 6px 18px -8px rgba(0,0,0,.4);
  --glow-gold:0 0 0 1px rgba(240,185,62,.4),0 14px 44px rgba(240,185,62,.18);
  --grad-gold:linear-gradient(118deg,#ffe6ae 0%,#f4c148 42%,#d99a1f 100%);
  --grad-emerald:linear-gradient(120deg,#35e6b1,#10b585);
  --grad-royal:linear-gradient(135deg,#241540 0%,#4a2d78 48%,#8a5cf0 100%);
  --grad-ink:linear-gradient(160deg,rgba(20,32,58,.92),rgba(8,13,26,.96));
  --mesh:radial-gradient(1000px 680px at 88% -8%,rgba(138,92,240,.34),transparent 58%),
         radial-gradient(860px 620px at -8% 112%,rgba(42,216,166,.20),transparent 54%),
         radial-gradient(700px 420px at 50% 118%,rgba(240,185,62,.15),transparent 60%),
         radial-gradient(760px 500px at 12% 8%,rgba(122,80,255,.14),transparent 58%),
         radial-gradient(820px 540px at 96% 26%,rgba(42,216,166,.08),transparent 54%),
         linear-gradient(158deg,#060a14 0%,#0a1426 52%,#081722 100%);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body.site{
  font-family:var(--sans);color:var(--text);line-height:1.5;
  background:var(--mesh);overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:color .2s}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(240,185,62,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(240,185,62,.6);border:2px solid transparent;background-clip:padding-box}
.wrap{width:min(1200px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}

/* ---------- NAV ---------- */
.site-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(6,10,20,.72);border-bottom:1px solid rgba(240,185,62,.14)}
.site-nav .wrap{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:1.1rem;color:#fff;
  background:linear-gradient(140deg,#2b1a54 0%,#5b33c9 55%,#9b6bff 100%);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 24px rgba(120,70,255,.45),inset 0 1px 0 rgba(255,255,255,.3);
}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.04rem;letter-spacing:.2px;display:block;line-height:1.1;color:#fff}
.brand small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.nav-links{display:flex;gap:4px;margin-left:18px}
.nav-links a{padding:8px 13px;border-radius:999px;font-size:.84rem;font-weight:500;color:var(--muted);transition:all .2s}
.nav-links a:hover{background:rgba(240,185,62,.12);color:var(--gold-3)}
.nav-links a.active{background:rgba(240,185,62,.16);color:var(--gold-3);box-shadow:inset 0 0 0 1px rgba(240,185,62,.35)}
.nav-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);color:var(--text)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-weight:600;font-size:.9rem;letter-spacing:.2px;
  transition:transform .18s,box-shadow .18s,filter .18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--grad-gold);color:#3a2200;box-shadow:0 12px 30px -8px rgba(240,185,62,.55)}
.btn-gold:hover{box-shadow:0 16px 38px -8px rgba(240,185,62,.7)}
.btn-emerald{background:var(--grad-emerald);color:#02261a;box-shadow:0 12px 30px -10px rgba(42,216,166,.5)}
.btn-royal{background:var(--grad-royal);color:#fff;box-shadow:0 12px 30px -10px rgba(122,80,255,.55)}
.btn-royal:hover{box-shadow:0 16px 40px -10px rgba(122,80,255,.7)}
.btn-outline{background:rgba(255,255,255,.04);border:1.5px solid var(--line-2);color:var(--text)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(240,185,62,.1)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(240,185,62,.6);color:var(--gold-3);background:rgba(240,185,62,.1)}
.btn-block{width:100%}

/* ---------- HERO ---------- */
.hero{padding:76px 0 46px;position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(240,185,62,.35);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(240,185,62,.09);margin-bottom:20px;
}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(2.7rem,6vw,5.3rem);line-height:.98;
  letter-spacing:-.02em;color:#fff;
  background:linear-gradient(112deg,#ffffff 14%,#ffe9b8 42%,#f4c148 68%,#ffffff 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;animation:shine 8s linear infinite;
  filter:drop-shadow(0 6px 24px rgba(240,185,62,.16));
}
.hero h1 em{font-style:italic}
@keyframes shine{to{background-position:-200% 0}}
.hero p.lede{margin-top:24px;max-width:540px;font-size:1.08rem;color:var(--muted);line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-stats{display:flex;gap:34px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.hero-stats b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--gold-3);font-weight:500;text-shadow:0 0 24px rgba(240,185,62,.35)}
.hero-stats span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-stage{position:relative;width:min(540px,100%);margin-left:auto;aspect-ratio:1/1.04}
.hero-stage::before{
  content:'';position:absolute;inset:4%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(122,80,255,.16),rgba(42,216,166,.05) 52%,transparent 70%);
  filter:blur(16px);
}
.hero-stage::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 34% 24%,rgba(255,233,176,.05),transparent 30%),
             radial-gradient(circle at 78% 86%,rgba(255,255,255,.03),transparent 28%);
}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;border-block:1px solid rgba(240,185,62,.16);padding:15px 0;margin:22px 0 8px;position:relative;z-index:1;background:rgba(255,255,255,.015)}
.marquee-track{display:flex;gap:42px;width:max-content;animation:mq 34s linear infinite;color:var(--muted);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.marquee-track span{transition:color .2s}
.marquee-track span:hover{color:var(--gold-2)}
.marquee-track span::before{content:'✦ ';color:var(--gold);margin-right:10px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{padding:90px 0;position:relative;z-index:1}
.section.paper{
  background:linear-gradient(160deg,#0b0f28 0%,#151040 52%,#0a1f2c 100%);
  border-block:1px solid rgba(155,123,255,.2);margin-top:22px;
}
.section.paper::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 420px at 15% 0%,rgba(240,185,62,.08),transparent 60%),radial-gradient(760px 520px at 100% 100%,rgba(42,216,166,.1),transparent 55%);pointer-events:none}
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head .kicker{margin-bottom:14px}
.sec-head h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;font-weight:500;letter-spacing:-.02em;color:#fff}
.muted{color:var(--muted)}
.section.paper .muted{color:#b9c7e8}
.section.paper h2{color:#fff}

/* ---------- BENTO TILES ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{
  grid-column:span 4;border-radius:26px;padding:28px;min-height:220px;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 60%);
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.tile::after{content:'';position:absolute;top:-46px;right:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(155,123,255,.14),transparent 70%);pointer-events:none}
.tile:hover{transform:translateY(-5px);border-color:rgba(240,185,62,.55);box-shadow:0 26px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(240,185,62,.18)}
.tile.wide{grid-column:span 8}
.tile.tall{min-height:330px}
.tile.gold{background:linear-gradient(158deg,#ffe6ae 0%,#f4c148 58%,#d99a1f 100%);color:#3a2200;border:none}
.tile.gold::after{background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%)}
.tile.ink{background:linear-gradient(160deg,#161a42,#1c1050 60%,#241540);border:1px solid rgba(155,123,255,.35);color:#fff}
.tile.ink::after{background:radial-gradient(circle,rgba(155,123,255,.35),transparent 70%)}
.tile.em{background:linear-gradient(158deg,#0e3a30,#0e7c5e 70%);border:none;color:#f2fff9}
.tile.em::after{background:radial-gradient(circle,rgba(53,230,177,.35),transparent 70%)}
.tile .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.15rem;margin-bottom:18px;flex:none;background:rgba(240,185,62,.14);border:1px solid rgba(240,185,62,.35);color:var(--gold-2);box-shadow:0 8px 22px -10px rgba(240,185,62,.5)}
.tile.em .ic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none}
.tile.ink .ic{background:rgba(155,123,255,.18);border-color:rgba(155,123,255,.4);color:#d9ccff;box-shadow:0 8px 22px -10px rgba(122,80,255,.6)}
.tile.gold .ic{background:rgba(58,34,0,.1);border-color:rgba(58,34,0,.18);color:#3a2200;box-shadow:none}
.tile h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:9px}
.tile p{font-size:.92rem;opacity:.85;line-height:1.65}
.tile.gold p{opacity:.82;color:#3a2200}
.tile > span{font-size:.82rem;font-weight:600;margin-top:16px;display:inline-flex;align-items:center;gap:8px;color:var(--gold-2)}
.tile.gold > span{color:#3a2200}
.tile:hover > span{text-decoration:underline;text-underline-offset:4px}
.paper .tile{background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(255,255,255,.12);color:#fff}
.paper .tile p{color:#c6d3ec}

/* ---------- SPLIT / PHOTO ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.photo-frame{
  aspect-ratio:4/5;border-radius:36px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 30% 18%,#f0d08a 0%,transparent 30%),radial-gradient(circle at 85% 30%,rgba(53,230,177,.35),transparent 45%),linear-gradient(160deg,#241540,#0b2140 60%,#0a2f3a);
  border:1px solid rgba(240,185,62,.25);box-shadow:0 40px 100px -40px rgba(122,80,255,.55);
}
.photo-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,8,18,.82))}
.photo-frame .cap{position:absolute;left:24px;bottom:24px;right:24px;z-index:2}
.quote{font-family:var(--serif);font-size:1.8rem;line-height:1.28;font-weight:500;color:#fff}
.section.paper .quote{color:var(--gold-3)}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{
  padding:28px;border-radius:24px;border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.step:hover{transform:translateY(-4px);border-color:rgba(240,185,62,.4)}
.step n{font-family:var(--serif);font-size:2.4rem;display:block;margin-bottom:10px;color:transparent;-webkit-text-stroke:1px var(--gold);text-shadow:0 0 30px rgba(240,185,62,.2)}
.step h3{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:8px}
.step p{color:var(--muted);line-height:1.7;font-size:.94rem}
.step:hover n{color:var(--gold-2);-webkit-text-stroke:0}

/* ---------- CTA ---------- */
.cta-band{margin:22px 0 0;padding:72px 0;text-align:center;position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(240,185,62,.07))}
.cta-band::before{content:'';position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(122,80,255,.22),transparent 60%);pointer-events:none}
.cta-band h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.3rem);font-weight:500;position:relative}
.cta-band h2 em{color:var(--gold-2)}
.cta-band .btn{margin-top:10px;position:relative}

/* ---------- FOOT ---------- */
.site-foot{border-top:1px solid rgba(240,185,62,.14);padding:42px 0 30px;position:relative;z-index:1;color:var(--muted);font-size:.85rem;background:rgba(4,8,16,.35)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--gold-2)}

/* ---------- INNER PAGE HERO ---------- */
.page-hero{padding:76px 0 30px;position:relative;z-index:1}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.3rem);font-weight:500;line-height:1.02;color:#fff;background:linear-gradient(115deg,#fff 20%,#ffe9b8 55%,#f4c148 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.page-hero .kicker{margin-bottom:16px}

/* ---------- AUTH SPLIT (login) ---------- */
.auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative;z-index:1}
.auth-visual{position:relative;padding:40px 48px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(820px 580px at 14% 0%,rgba(138,92,240,.3),transparent 60%),radial-gradient(720px 500px at 104% 108%,rgba(42,216,166,.14),transparent 55%),linear-gradient(162deg,#0b0f26 0%,#131238 54%,#0a1f2c 100%)}
.auth-visual::after{content:'';position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;border:1px dashed rgba(240,185,62,.35);animation:spin 60s linear infinite;pointer-events:none}
.auth-visual .brand{margin-bottom:auto;position:relative;z-index:2}
.auth-visual h1{font-family:var(--serif);font-size:clamp(2.3rem,4vw,3.8rem);font-weight:500;line-height:1.06;max-width:540px;margin-top:90px;color:#fff;background:linear-gradient(115deg,#fff 25%,#ffe9b8 55%,#f4c148 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.auth-visual p{max-width:430px;color:#b9c4de;margin-top:18px;line-height:1.7}
.auth-visual a{color:var(--gold-2)}
.auth-panel{background:linear-gradient(180deg,#0a1222,#060a14);padding:36px 40px;overflow:auto;position:relative}
.auth-panel::before{content:'';position:fixed;top:0;right:0;width:420px;height:320px;background:radial-gradient(circle at 100% 0%,rgba(122,80,255,.18),transparent 62%);pointer-events:none}
.auth-panel .auth-shell{max-width:560px;margin:0 auto;position:relative}
.auth-panel a{color:var(--gold-2)}
.auth-panel .muted,.auth-panel .field-hint,.auth-panel .auth-alt{color:var(--muted)}
.auth-panel .glass{background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%);border-color:var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08)}
.auth-panel .role-switch{grid-template-columns:1fr 1fr 1fr}
.auth-card{position:relative}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1020px){
  .hero-grid,.split,.auth-page,.steps{grid-template-columns:1fr}
  .hero-stage{width:100%;max-width:560px;margin:0 auto}
  .tile,.tile.wide{grid-column:span 12}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;padding:12px 20px 18px;background:rgba(6,10,20,.97);border-bottom:1px solid rgba(240,185,62,.2)}
  .nav-toggle{display:grid;place-items:center;margin-left:auto}
  .nav-cta .btn-ghost{display:none}
  .auth-visual{display:none}
  .auth-panel{padding:26px 18px}
  .hero{padding-top:40px}
}
@media(max-width:560px){
  .section{padding:64px 0}
  .wrap{width:calc(100% - 28px)}
  .hero-stats{gap:20px}
  .site-foot .wrap{flex-direction:column}
}

/* ---------- FEATURE TOUR (features.html) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
.feat-group{
  border-radius:26px;padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 60%);
  border:1px solid var(--line);backdrop-filter:blur(14px);
}
.feat-group::after{content:'';position:absolute;top:-60px;right:-60px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(155,123,255,.13),transparent 70%);pointer-events:none}
.feat-group.royal{background:linear-gradient(165deg,rgba(36,21,64,.5),rgba(15,20,42,.75));border-color:rgba(155,123,255,.3)}
.feat-group.gold{background:linear-gradient(165deg,rgba(64,45,14,.28),rgba(15,20,42,.78));border-color:rgba(240,185,62,.28)}
.feat-group.emerald{background:linear-gradient(165deg,rgba(10,64,52,.3),rgba(15,20,42,.78));border-color:rgba(42,216,166,.28)}
.fg-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fg-head .fgh-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.05rem;flex:none;background:linear-gradient(135deg,rgba(240,185,62,.2),rgba(240,185,62,.06));border:1px solid rgba(240,185,62,.35);color:var(--gold-2)}
.feat-group.royal .fgh-ic{background:linear-gradient(135deg,rgba(155,123,255,.22),rgba(155,123,255,.06));border-color:rgba(155,123,255,.4);color:#d9ccff}
.feat-group.emerald .fgh-ic{background:linear-gradient(135deg,rgba(42,216,166,.22),rgba(42,216,166,.06));border-color:rgba(42,216,166,.4);color:#b8ffe9}
.fg-head h3{font-family:var(--serif);font-size:1.35rem;font-weight:500}
.fg-head p{font-size:.8rem;color:var(--muted);margin-top:1px}
.feat{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.feat:last-child{border-bottom:none}
.feat .f-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:.9rem;flex:none;background:rgba(240,185,62,.12);border:1px solid rgba(240,185,62,.28);color:var(--gold-2)}
.feat-group.royal .feat .f-ic{background:rgba(155,123,255,.14);border-color:rgba(155,123,255,.35);color:#d9ccff}
.feat-group.emerald .feat .f-ic{background:rgba(42,216,166,.13);border-color:rgba(42,216,166,.32);color:#b8ffe9}
.feat b{display:block;font-size:.92rem;color:#fff;font-weight:600}
.feat span{display:block;font-size:.82rem;color:var(--muted);line-height:1.5;margin-top:2px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================================================================
   CROSS-DEVICE POLISH (phones, phablets, tablets, laptops, short screens)
   Sits last so these win the cascade on every public page.
   =========================================================================== */
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.site{overflow-x:hidden}
img{height:auto}

/* stacked hero/editorial on tablets */
@media(max-width:900px){
  .hero-grid{gap:34px}
  .split{gap:44px}
  .hero h1{font-size:clamp(2.35rem,9.5vw,3.9rem)}
  .sec-head{margin-bottom:30px}
  .sec-head h2{font-size:clamp(1.8rem,5.6vw,2.6rem)}
}

/* two-up bento on large phones→tablets (vertical rhythm saved) */
@media(min-width:601px) and (max-width:1020px){
  .bento{gap:14px}
  .tile,.tile.wide{grid-column:span 6}
  .tile{min-height:240px;padding:24px;border-radius:22px}
  .tile.tall{min-height:300px}
  .feat-grid{gap:16px}
}

/* ---------- PHONES ---------- */
@media(max-width:640px){
  .section{padding:56px 0}
  .wrap{width:calc(100% - 30px)}
  .hero{padding:30px 0 30px}
  .hero h1{font-size:clamp(2.3rem,12.5vw,3.2rem)}
  .hero p.lede{font-size:1rem;margin-top:18px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;padding:13px 18px}
  .hero-stats{gap:10px 26px;flex-wrap:wrap;margin-top:28px;padding-top:18px}
  .hero-stats b{font-size:1.5rem}
  .hero-stats span{font-size:.64rem}
  .kicker{font-size:.62rem;padding:5px 11px;letter-spacing:.14em}
  .page-hero{padding:32px 0 6px}
  .page-hero h1{font-size:clamp(1.9rem,9vw,2.7rem)}
  .page-hero p.muted{font-size:1rem}
  .marquee{padding:12px 0;margin-top:8px}
  .marquee-track{font-size:.68rem;gap:30px;letter-spacing:.16em}
  .bento{gap:13px}
  .tile{min-height:auto;padding:22px 20px;border-radius:20px}
  .tile.wide{padding:22px 20px}
  .tile .ic{width:42px;height:42px;margin-bottom:14px}
  .tile h3{font-size:1.32rem}
  .tile p{font-size:.88rem}
  .photo-frame{border-radius:24px}
  .quote{font-size:1.45rem}
  .steps{gap:12px}
  .step{padding:20px;border-radius:18px}
  .step n{font-size:1.9rem}
  .cta-band{padding:54px 0}
  .cta-band h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .site-foot{padding:32px 0 26px;font-size:.82rem}
  .site-foot .foot-links{line-height:2.1;gap:0 16px}
  .feat-group{padding:20px 18px}
  .fg-head h3{font-size:1.22rem}
  .auth-panel{padding:24px 16px}
  .auth-panel .role-switch{grid-template-columns:1fr}
  .auth-panel .role-switch button{padding:12px;justify-content:center}
  .auth-tabs button{padding:10px 4px;font-size:.8rem}
  .reg-otp-row{grid-template-columns:1fr 1fr}
  .reg-otp-row input{grid-column:1/-1;text-align:center}
  .reg-otp-row .btn-sm{width:100%}
  .form-grid{grid-template-columns:1fr}
  .reg-nav{flex-wrap:wrap}
  .reg-nav .btn{flex:1 1 44%;min-width:130px}
  .modal-box{width:calc(100vw - 28px);padding:20px;max-height:84vh;overflow-y:auto}
  /* business atlas on small phones */
  .biz-hero{padding:18px;border-radius:18px}
  .biz-hero h2{font-size:1.5rem}
  .biz-search{flex-direction:column}
  .biz-search .biz-search-input{width:100%;min-width:0}
  .biz-filters-grid{grid-template-columns:1fr}
  .biz-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .biz-nav::-webkit-scrollbar{display:none}
  .biz-nav .biz-view-btn{white-space:nowrap}
  .biz-grid{grid-template-columns:1fr}
  .biz-hero-actions .btn{white-space:normal}
}

/* ---------- NARROW PHONES ---------- */
@media(max-width:430px){
  .site-nav .wrap{height:60px;gap:9px}
  .brand-mark{width:36px;height:36px;font-size:.96rem;border-radius:11px}
  .brand b{font-size:.9rem;letter-spacing:0}
  .brand small{font-size:.52rem;letter-spacing:.16em}
  .nav-cta .btn{padding:8px 11px;font-size:.76rem}
  .nav-toggle{width:36px;height:36px}
  .nav-links.open{top:60px}
  .nav-links.open a{padding:12px 6px;font-size:.95rem}
  .wrap{width:calc(100% - 22px)}
  .hero-actions .btn{font-size:.85rem}
}
@media(max-width:360px){
  .nav-cta{display:none}
  .brand small{display:none}
  .brand-mark{width:33px;height:33px}
}

/* ---------- SHORT / LANDSCAPE SCREENS ---------- */
@media(max-height:520px) and (orientation:landscape){
  .hero,.page-hero{padding-top:22px}
  .hero-stage{max-width:300px;margin:0 auto}
  .section{padding:44px 0}
  .auth-page{display:block}
  .auth-panel{min-height:100vh}
}

/* ---------- MID WINDOWS (1021–1300): stack & centre the hero ----------
   Between phone width and full desktop, the old left/right hero left the
   globe stranded on the right with big whitespace — it read like a shrunken
   desktop page. Up to 1300px we compose a centred single-column hero.
   The side-by-side hero only returns on genuinely wide screens (1301px+). */
@media(min-width:1021px) and (max-width:1300px){
  .hero{padding:60px 0 34px}
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero-grid>div:first-child{
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .hero p.lede{margin-left:auto;margin-right:auto;text-align:center}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center;gap:44px}
  .hero-stage{width:100%;max-width:min(600px,100%);margin:0 auto}
}

/* ---------- SCROLL/PERF HARDENING ----------
   Fixed full-viewport gradients + mix-blend overlays and the animated
   background-clip headline force the browser to re-raster huge layers on
   every scroll frame, which locks up scrolling on phones. The aurora that
   used to live in the fixed blend overlay is now baked into the normal
   (scrolling) body mesh, so we drop the overlay and the shine animation on
   touch/small screens and under reduced-motion. */
@media(hover:none){
  .hero h1{animation:none;filter:none;-webkit-filter:none}
  .marquee-track{animation:none}
}
@media(max-width:640px){
  .hero h1{animation:none;filter:none;-webkit-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.marquee-track,.site-nav a::after,.cta-band::before{animation:none}
  .hero-stage::before{filter:blur(8px)}
}

/* ---------- TOUCH DEVICES IN A WIDE PREVIEW ----------
   The online preview pane can render the page at desktop width even when it
   is being looked at on a phone, so width-based media queries think it is a
   desktop. A phone is always pointer:coarse / hover:none no matter how wide
   the preview is, so we force the centred, stacked hero (and larger touch
   targets) whenever the *device* is touch — killing the "shrunken desktop
   page you have to pinch-zoom" look. */
@media(pointer:coarse){
  .hero{padding:60px 0 34px}
  .hero-grid{grid-template-columns:1fr;gap:42px;text-align:center}
  .hero-grid>div:first-child{
    text-align:center;display:flex;flex-direction:column;align-items:center;
  }
  .hero p.lede{margin-left:auto;margin-right:auto;text-align:center}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center;gap:44px}
  .hero-stage{width:100%;max-width:min(600px,100%);margin:0 auto}
  .btn{padding-top:13px;padding-bottom:13px}
}