/* ============================================================
   LauraDianaX — design system
   Dark navy + gold. No build step, no framework.
   ============================================================ */

:root{
  --navy-900:#060B18;
  --navy-850:#080E1F;
  --navy-800:#0B1224;
  --navy-750:#0E1730;
  --navy-700:#111C39;
  --navy-600:#17244A;
  --line:rgba(201,162,39,.16);
  --line-soft:rgba(255,255,255,.07);

  --gold:#D4AF37;
  --gold-2:#F0D67A;
  --gold-3:#8C6F1B;
  --gold-grad:linear-gradient(135deg,#F0D67A 0%,#D4AF37 45%,#A9821E 100%);

  --text:#E9EDF7;
  --muted:#93A0BC;
  --dim:#6C7A99;

  --green:#2ECC8F;
  --red:#F0596B;
  --blue:#4C8DFF;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --shadow-gold:0 18px 44px -18px rgba(212,175,55,.45);
  --wrap:1200px;
  --ff:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy-900);color:var(--text);
  font-family:var(--ff);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.55rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem)}
p{margin:0 0 1rem}
ul{margin:0;padding:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}
.mono{font-family:var(--fm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#0a0a0a;padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.ic{flex:none}

/* ---------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:700;font-size:.94rem;cursor:pointer;transition:.22s ease;white-space:nowrap;
}
.btn-gold{background:var(--gold-grad);color:#150F00;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{background:var(--navy-700);border-color:var(--line-soft);color:var(--text)}
.btn-dark:hover{border-color:var(--gold)}
.btn-block{width:100%}
.btn-sm{padding:.55rem 1rem;font-size:.83rem}
.btn-lg{padding:1rem 2rem;font-size:1rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------------------------------------------------- topbar / header */
.topbar{background:var(--navy-850);border-bottom:1px solid var(--line-soft);font-size:.8rem;color:var(--dim)}
.topbar-in{display:flex;align-items:center;gap:1rem;padding-block:.5rem}
.tb-right{margin-inline-start:auto}
.topbar-in span{display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--gold)}
/* Its own segment at the far end of the strip, behind a hairline rule, so it
   reads as a control rather than as a fourth contact link. Logical
   properties, so the whole arrangement mirrors under dir="rtl". */
.topbar-in>.lang{padding-inline-start:1rem;border-inline-start:1px solid var(--line-soft)}

@media(max-width:720px){
  /* Selector matches .topbar-in span above rather than being a bare .tb-right:
     at equal specificity the later rule wins, and a bare .tb-right (0,1,0)
     loses to .topbar-in span (0,1,1), which is why the contact links used to
     stay on screen here and wrap out of the strip. */
  .topbar-in>.tb-right{display:none}
  /* With the contact links gone the switcher has to claim the space itself,
     and with no neighbour left there is nothing to divide it from. */
  .topbar-in>.lang{margin-inline-start:auto;padding-inline-start:0;border-inline-start:0}
}

.site-head{position:sticky;top:0;z-index:100;background:rgba(6,11,24,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);transition:.25s}
.site-head.scrolled{background:rgba(6,11,24,.97);box-shadow:0 10px 30px -18px #000}
.head-in{display:flex;align-items:center;gap:1.25rem;padding-block:.85rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.18rem;letter-spacing:-.03em}
.logo-mark{width:38px;height:38px;border-radius:11px;background:var(--gold-grad);color:#120C00;
  display:grid;place-items:center;font-size:.88rem;font-weight:800;box-shadow:var(--shadow-gold)}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:.35rem;list-style:none}
.main-nav a{display:block;padding:.5rem .8rem;border-radius:var(--r-pill);font-size:.9rem;
  font-weight:600;color:var(--muted);transition:.18s}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.main-nav a.active{color:var(--gold);background:rgba(212,175,55,.1)}
.head-cta{display:flex;gap:.6rem;align-items:center}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1060px){
  .burger{display:flex;margin-left:auto}
  .head-cta{display:none}
  .main-nav{position:fixed;inset:100px 0 auto;margin:0;background:var(--navy-800);
    border-block:1px solid var(--line-soft);padding:1rem 20px 1.5rem;
    transform:translateY(-140%);transition:.3s;max-height:80vh;overflow:auto}
  .main-nav.open{transform:none}
  .main-nav ul{flex-direction:column;gap:.15rem}
  .main-nav a{padding:.85rem 1rem;font-size:1rem}
  .main-nav::after{content:'';display:block}
}

/* ---------------------------------------------------- sections */
section{padding-block:clamp(3.5rem,7vw,6rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);background:rgba(212,175,55,.07);
  padding:.4rem .9rem;border-radius:var(--r-pill);margin-bottom:1rem}
.sec-head{max-width:720px;margin-bottom:2.75rem}
.sec-head.center{margin-inline:auto}
.sec-head p{color:var(--muted);font-size:1.03rem;margin:0}
.lead{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--muted);max-width:60ch}

/* ---------------------------------------------------- hero */
.hero{position:relative;padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{content:'';position:absolute;width:900px;height:900px;top:-460px;right:-260px;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 62%);pointer-events:none}
.hero::after{content:'';position:absolute;width:700px;height:700px;bottom:-420px;left:-240px;
  background:radial-gradient(circle,rgba(76,141,255,.12),transparent 65%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:3.5rem;align-items:center}
.hero h1 span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-trust{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.6rem;
  border-top:1px solid var(--line-soft);list-style:none}
.hero-trust li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--muted)}
.hero-trust svg{color:var(--gold)}
@media(max-width:940px){.hero-in{grid-template-columns:1fr;gap:2.5rem}}

/* ---------------------------------------------------- cards / glass */
.card{background:linear-gradient(160deg,var(--navy-800),var(--navy-850));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.6rem}
.card-hi{border-color:var(--line);box-shadow:var(--shadow)}
.grid{display:grid;gap:1.25rem}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.feature{transition:.25s}
.feature:hover{transform:translateY(-4px);border-color:var(--line)}
.feature .fi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(212,175,55,.1);color:var(--gold);border:1px solid var(--line);margin-bottom:1rem}
.feature h3{font-size:1.06rem;margin-bottom:.4rem}
.feature p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------------------------------------------------- stats + ticker */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--navy-850);padding:1.6rem 1.2rem;text-align:center}
.stat b{display:block;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.82rem;color:var(--muted)}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}

.ticker{border-block:1px solid var(--line-soft);background:var(--navy-850);overflow:hidden;padding-block:.7rem}
.ticker-track{display:flex;gap:2.4rem;width:max-content;animation:slide 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:.55rem;font-size:.85rem;font-family:var(--fm)}
.tick b{font-weight:600;color:var(--text)}
.up{color:var(--green)}.down{color:var(--red)}

/* ---------------------------------------------------- plans */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;align-items:start}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:linear-gradient(170deg,var(--navy-800),var(--navy-850));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.75rem;transition:.25s;display:flex;flex-direction:column}
.plan:hover{transform:translateY(-5px);border-color:var(--line)}
.plan.pop{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--gold-grad);color:#150F00;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:.28rem .8rem;border-radius:var(--r-pill);white-space:nowrap}
.plan h3{font-size:1.15rem;margin-bottom:.1rem}
.plan .roi{font-size:2.5rem;font-weight:800;line-height:1.1;margin:.6rem 0 .1rem;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .roi small{font-size:.85rem;font-weight:600;color:var(--muted);
  -webkit-text-fill-color:var(--muted)}
.plan ul{list-style:none;margin:1.2rem 0;display:grid;gap:.65rem}
.plan li{display:flex;gap:.6rem;font-size:.9rem;color:var(--muted);align-items:flex-start}
.plan li::before{content:'✓';color:var(--gold);font-weight:800;flex:none}
.plan .btn{margin-top:auto}

/* ---------------------------------------------------- steps */
.steps{counter-reset:s;display:grid;gap:1.25rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.6rem;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--navy-850)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--fm);font-size:1.5rem;font-weight:600;color:var(--gold);opacity:.55;display:block;margin-bottom:.6rem}
.step h3{font-size:1.02rem;margin-bottom:.35rem}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* ---------------------------------------------------- testimonials */
.quote{background:var(--navy-850);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.6rem}
.quote p{font-size:.95rem;color:var(--muted);font-style:italic}
.qwho{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.av{width:42px;height:42px;border-radius:50%;background:var(--gold-grad);color:#150F00;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.qwho b{display:block;font-size:.9rem}
.qwho span{font-size:.78rem;color:var(--dim)}
.stars{color:var(--gold);letter-spacing:2px;font-size:.85rem;margin-bottom:.6rem}

/* ---------------------------------------------------- accordion */
.acc{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--navy-850);margin-bottom:.75rem;overflow:hidden}
.acc summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;font-size:.98rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';color:var(--gold);font-size:1.3rem;font-weight:400;flex:none;transition:.2s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.93rem}

/* ---------------------------------------------------- cta band */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--navy-700),var(--navy-850));
  border:1px solid var(--line);padding:clamp(2rem,5vw,3.5rem);text-align:center}
.cta-band::before{content:'';position:absolute;inset:-50% -20% auto;height:400px;
  background:radial-gradient(circle,rgba(212,175,55,.18),transparent 60%)}
.cta-band > *{position:relative}

/* ---------------------------------------------------- page hero */
.phero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-soft);background:
  radial-gradient(900px 340px at 78% -30%,rgba(212,175,55,.13),transparent 62%),var(--navy-850)}
.crumbs{display:flex;gap:.5rem;font-size:.8rem;color:var(--dim);list-style:none;flex-wrap:wrap;margin-bottom:.9rem}
.crumbs a:hover{color:var(--gold)}
.crumbs li+li::before{content:'/';margin-right:.5rem;color:var(--line)}

/* ---------------------------------------------------- tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--navy-850)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
thead th{text-align:left;padding:.95rem 1.1rem;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line-soft);font-weight:700;white-space:nowrap}
tbody td{padding:.95rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}
td b,td strong{color:var(--text)}

.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .65rem;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:700;letter-spacing:.02em}
.pill.ok{background:rgba(46,204,143,.13);color:var(--green)}
.pill.warn{background:rgba(212,175,55,.14);color:var(--gold)}
.pill.bad{background:rgba(240,89,107,.13);color:var(--red)}
.pill.info{background:rgba(76,141,255,.14);color:var(--blue)}

/* ---------------------------------------------------- forms */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:.42rem;color:var(--text)}
.field .hint{font-size:.76rem;color:var(--dim);margin-top:.35rem}
input,select,textarea{
  width:100%;padding:.85rem 1rem;background:var(--navy-900);color:var(--text);
  border:1px solid var(--line-soft);border-radius:var(--r);font-size:.94rem;font-family:inherit;transition:.18s}
input::placeholder,textarea::placeholder{color:#5A6784}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.13)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2393A0BC' stroke-width='2'><path d='M2 5l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
textarea{resize:vertical;min-height:130px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.row-2{grid-template-columns:1fr}}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.check input{width:auto;margin-top:.25rem;accent-color:var(--gold);flex:none}
.err{color:var(--red);font-size:.78rem;margin-top:.35rem;display:none}
.field.bad input,.field.bad select{border-color:var(--red)}
.field.bad .err{display:block}
.alert{padding:.85rem 1.1rem;border-radius:var(--r);font-size:.87rem;margin-bottom:1.1rem;display:none}
.alert.show{display:block}
.alert.ok{background:rgba(46,204,143,.1);border:1px solid rgba(46,204,143,.3);color:#8CF0C8}
.alert.bad{background:rgba(240,89,107,.1);border:1px solid rgba(240,89,107,.3);color:#FFB0BA}
.alert.info{background:rgba(76,141,255,.1);border:1px solid rgba(76,141,255,.3);color:#A9C8FF}

/* ---------------------------------------------------- auth layout */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-aside{display:none}}
.auth-aside{position:relative;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(700px 500px at 20% 10%,rgba(212,175,55,.15),transparent 60%),var(--navy-850);
  border-right:1px solid var(--line-soft)}
.auth-aside blockquote{margin:0;font-size:1.15rem;line-height:1.6;font-weight:600}
.auth-main{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.auth-box{width:100%;max-width:440px}
.auth-box h1{font-size:1.9rem;margin-bottom:.35rem}
.auth-box>p.sub{color:var(--muted);font-size:.93rem;margin-bottom:1.8rem}
.auth-alt{text-align:center;font-size:.87rem;color:var(--muted);margin-top:1.4rem}
.auth-alt a{color:var(--gold);font-weight:700}
.divider{display:flex;align-items:center;gap:1rem;color:var(--dim);font-size:.76rem;margin:1.4rem 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.otp{display:flex;gap:.6rem;justify-content:center;margin:1.5rem 0}
.otp input{width:54px;height:62px;text-align:center;font-size:1.5rem;font-weight:700;font-family:var(--fm)}
.pw-meter{height:5px;border-radius:3px;background:var(--navy-700);overflow:hidden;margin-top:.5rem}
.pw-meter i{display:block;height:100%;width:0;transition:.3s;background:var(--red)}

/* ---------------------------------------------------- dashboard */
.dash{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
.side{background:var(--navy-850);border-right:1px solid var(--line-soft);padding:1.25rem 1rem;
  display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-nav{list-style:none;display:grid;gap:.2rem}
.side-nav a{display:flex;align-items:center;gap:.75rem;padding:.72rem .85rem;border-radius:var(--r);
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.18s}
.side-nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.side-nav a.active{background:rgba(212,175,55,.12);color:var(--gold)}
.side-foot{margin-top:auto;display:grid;gap:.6rem;font-size:.85rem}
.side-bal{background:linear-gradient(140deg,var(--navy-700),var(--navy-800));border:1px solid var(--line);
  border-radius:var(--r);padding:1rem}
.side-bal span{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.side-bal b{display:block;font-size:1.4rem;font-family:var(--fm);color:var(--gold);margin-top:.2rem}

.dash-main{min-width:0;display:flex;flex-direction:column}
.dash-head{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.75rem;
  border-bottom:1px solid var(--line-soft);background:rgba(6,11,24,.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:40}
.dash-head h1{font-size:1.25rem;margin:0}
.dash-head .sub{font-size:.8rem;color:var(--dim)}
.dash-body{padding:1.75rem;display:grid;gap:1.5rem;align-content:start}
.dash-user{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.side-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:6px}
@media(max-width:980px){
  .dash{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:262px;z-index:120;transform:translateX(-100%);transition:.28s}
  .side.open{transform:none}
  .side-toggle{display:block}
  .dash-body{padding:1.15rem}
  .dash-head{padding:1rem 1.15rem}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:110;display:none}
  .scrim.on{display:block}
}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}}
.kpi{background:linear-gradient(160deg,var(--navy-800),var(--navy-850));border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:1.25rem;position:relative;overflow:hidden}
.kpi .lbl{font-size:.75rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;
  display:flex;align-items:center;gap:.45rem}
.kpi .val{font-size:1.75rem;font-weight:800;font-family:var(--fm);margin-top:.5rem;letter-spacing:-.02em}
.kpi .delta{font-size:.78rem;margin-top:.3rem}
.kpi.gold .val{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.panel{background:var(--navy-850);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.35rem;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-head h2{font-size:1.02rem;margin:0}
.panel-head .btn{margin-left:auto}
.panel-body{padding:1.35rem}
.panel-body.flush{padding:0}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

.chart-box{height:280px;position:relative}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.8rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.4rem}

.prog{height:8px;border-radius:5px;background:var(--navy-700);overflow:hidden;margin-top:.6rem}
.prog i{display:block;height:100%;background:var(--gold-grad);border-radius:5px}

.inv-card{border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.25rem;background:var(--navy-850)}
.inv-card .top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.inv-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.1rem;font-size:.83rem}
.inv-meta span{display:block;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.inv-meta b{font-family:var(--fm);font-weight:600}
@media(max-width:640px){.inv-meta{grid-template-columns:repeat(2,1fr)}}

.choice{display:grid;gap:.8rem}
.choice label{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:var(--r);
  border:1px solid var(--line-soft);cursor:pointer;transition:.18s;background:var(--navy-900)}
.choice label:hover{border-color:var(--line)}
.choice input{width:auto;margin-top:.28rem;accent-color:var(--gold);flex:none}
.choice input:checked ~ .cx{color:var(--text)}
.choice label:has(input:checked){border-color:var(--gold);background:rgba(212,175,55,.07)}
.cx b{display:block;font-size:.94rem}
.cx span{font-size:.82rem;color:var(--muted)}

.summary{display:grid;gap:.7rem;font-size:.9rem}
.summary div{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}
.summary div b{color:var(--text);font-family:var(--fm)}
.summary .tot{border-top:1px solid var(--line-soft);padding-top:.7rem;font-size:1.02rem}
.summary .tot b{color:var(--gold);font-size:1.15rem}

.copy-row{display:flex;gap:.6rem}
.copy-row input{font-family:var(--fm);font-size:.85rem}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.tabs button{padding:.5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line-soft);
  background:var(--navy-850);color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:.18s}
.tabs button.on{background:rgba(212,175,55,.12);border-color:var(--gold);color:var(--gold)}
.tab-pane{display:none}
.tab-pane.on{display:block}
.empty{text-align:center;padding:3rem 1rem;color:var(--dim)}
.empty h3{color:var(--muted);font-size:1rem}

/* ---------------------------------------------------- footer */
.site-foot{background:var(--navy-850);border-top:1px solid var(--line-soft);padding-block:3.5rem 1.75rem;margin-top:2rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.fbrand p{color:var(--muted);font-size:.88rem;margin-top:1rem;max-width:44ch}
.fcol h3{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.fcol ul{list-style:none;display:grid;gap:.6rem}
.fcol a{color:var(--muted);font-size:.89rem}
.fcol a:hover{color:var(--gold)}
.socials{display:flex;gap:.5rem;margin-top:1.2rem}
.socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-soft);
  display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--muted);transition:.2s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.risk-note{margin-top:2.5rem;padding:1.1rem 1.25rem;border:1px solid var(--line-soft);border-radius:var(--r);
  font-size:.8rem;color:var(--dim);background:var(--navy-900)}
.risk-note a{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line-soft);
  font-size:.8rem;color:var(--dim)}
.foot-bottom p{margin:0}

/* ---------------------------------------------------- prose */
.prose{max-width:78ch}
.prose h2{margin-top:2.5rem;font-size:1.45rem}
.prose h3{margin-top:1.75rem;font-size:1.1rem}
.prose p,.prose li{color:var(--muted);font-size:.96rem}
.prose ul,.prose ol{padding-left:1.2rem;margin-bottom:1rem;display:grid;gap:.5rem}
.prose li{list-style:disc}
.prose ol li{list-style:decimal}
.prose strong{color:var(--text)}

.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:.7s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   ADMIN PANEL
   Reuses the .dash shell (sidebar + head + body) from above.
   Only the pieces the investor dashboard never needed live here.
   ============================================================ */

/* ---------------------------------------------------- admin chrome */
.side-tag{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.2rem .6rem;
  border-radius:var(--r-pill);background:rgba(240,89,107,.13);color:var(--red);
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.env-bar{background:rgba(240,89,107,.1);border-bottom:1px solid rgba(240,89,107,.28);
  color:#FFB0BA;font-size:.78rem;padding:.55rem 1.75rem;display:flex;gap:.6rem;align-items:center}
.env-bar strong{color:#fff}
@media(max-width:900px){.env-bar{padding:.55rem 1.15rem}}

/* ---------------------------------------------------- toolbar */
.toolbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  padding:1rem 1.35rem;border-bottom:1px solid var(--line-soft)}
.toolbar .search{position:relative;flex:1 1 240px;min-width:0}
.toolbar .search input{padding-left:2.35rem;font-size:.87rem}
.toolbar .search .ic{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);
  color:var(--dim);pointer-events:none}
.toolbar select{width:auto;min-width:150px;font-size:.87rem;padding-block:.6rem}
.toolbar .spacer{margin-left:auto}

/* segmented filter */
.seg{display:inline-flex;background:var(--navy-800);border:1px solid var(--line-soft);
  border-radius:var(--r-pill);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:600;
  font-size:.8rem;padding:.42rem .95rem;border-radius:var(--r-pill);transition:.18s;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:rgba(212,175,55,.14);color:var(--gold)}
.seg button .n{opacity:.65;font-family:var(--fm);font-size:.75rem;margin-left:.3rem}

/* ---------------------------------------------------- tables */
.tbl-wrap table th{white-space:nowrap}
td .who{display:flex;align-items:center;gap:.65rem;min-width:180px}
td .who .av{width:32px;height:32px;font-size:.72rem;flex:none}
td .who b{display:block;font-size:.87rem;line-height:1.3}
td .who span{display:block;font-size:.76rem;color:var(--dim);line-height:1.3}
.rowact{display:flex;gap:.4rem;justify-content:flex-end}
.rowact .btn{padding:.4rem .75rem;font-size:.78rem}
.btn-ok{border-color:rgba(46,204,143,.4);color:var(--green);background:rgba(46,204,143,.08)}
.btn-ok:hover{border-color:var(--green);background:rgba(46,204,143,.16)}
.btn-no{border-color:rgba(240,89,107,.4);color:var(--red);background:rgba(240,89,107,.08)}
.btn-no:hover{border-color:var(--red);background:rgba(240,89,107,.16)}
tr.sel-on{background:rgba(212,175,55,.05)}
.cbx{width:auto;margin:0;accent-color:var(--gold);cursor:pointer}
.bulkbar{display:none;gap:.7rem;align-items:center;flex-wrap:wrap;
  padding:.8rem 1.35rem;background:rgba(212,175,55,.07);
  border-bottom:1px solid var(--line);font-size:.85rem}
.bulkbar.on{display:flex}
.pager{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;
  padding:.9rem 1.35rem;border-top:1px solid var(--line-soft);font-size:.83rem;color:var(--dim)}

/* ---------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(3,6,14,.74);backdrop-filter:blur(4px)}
.modal.on{display:flex}
.modal-card{background:var(--navy-850);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column}
.modal-card.wide{max-width:860px}
.modal-head{display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.35rem;
  border-bottom:1px solid var(--line-soft)}
.modal-head h2{font-size:1.05rem;margin:0}
.modal-head .sub{font-size:.79rem;color:var(--dim);margin-top:.15rem}
.modal-x{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:1.5rem;line-height:1;padding:0 .2rem}
.modal-x:hover{color:var(--text)}
.modal-body{padding:1.35rem;overflow-y:auto}
.modal-foot{display:flex;gap:.7rem;justify-content:flex-end;flex-wrap:wrap;
  padding:1.1rem 1.35rem;border-top:1px solid var(--line-soft)}
@media(max-width:560px){.modal-foot .btn{flex:1}}

/* ---------------------------------------------------- detail list */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;font-size:.87rem;margin:0}
.dl dt{color:var(--dim);white-space:nowrap}
.dl dd{margin:0;color:var(--text);text-align:right;word-break:break-word}
.dl dd.mono{font-family:var(--fm);font-size:.83rem}
.sub-head{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin:1.5rem 0 .7rem}
.sub-head:first-child{margin-top:0}
.docbox{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;background:var(--navy-800);
  border:1px solid var(--line-soft);border-radius:var(--r);font-size:.85rem}
.docbox .ic{color:var(--gold);flex:none}
.docbox b{display:block;font-size:.87rem}
.docbox span{font-size:.76rem;color:var(--dim)}

/* ---------------------------------------------------- audit feed */
.feed{list-style:none;display:grid;gap:0}
.feed li{display:flex;gap:.95rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.feed li:last-child{border-bottom:0}
.feed .dot{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--navy-700);color:var(--muted)}
.feed .dot.ok{background:rgba(46,204,143,.13);color:var(--green)}
.feed .dot.bad{background:rgba(240,89,107,.13);color:var(--red)}
.feed .dot.warn{background:rgba(212,175,55,.14);color:var(--gold)}
.feed .txt{min-width:0;flex:1}
.feed .txt b{font-size:.88rem;font-weight:700}
.feed .txt p{margin:.1rem 0 0;font-size:.82rem;color:var(--muted)}
.feed .when{font-size:.75rem;color:var(--dim);white-space:nowrap;margin-left:auto;text-align:right}

/* ---------------------------------------------------- toast */
.toasts{position:fixed;right:1.25rem;bottom:1.25rem;z-index:300;display:grid;gap:.6rem;
  width:min(340px,calc(100vw - 2.5rem))}
.toast{background:var(--navy-750);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:.85rem 1rem;font-size:.86rem;display:flex;gap:.65rem;
  align-items:flex-start;animation:toast-in .28s cubic-bezier(.16,1,.3,1)}
.toast.ok{border-color:rgba(46,204,143,.4)}
.toast.bad{border-color:rgba(240,89,107,.4)}
.toast .ic{flex:none;margin-top:.15rem}
.toast.ok .ic{color:var(--green)}
.toast.bad .ic{color:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* ---------------------------------------------------- misc */
.note{padding:.8rem 1rem;border-radius:var(--r);font-size:.81rem;color:var(--muted);
  background:var(--navy-800);border:1px solid var(--line-soft)}
.note strong{color:var(--text)}
.plan-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 1rem}

/* ============================================================
   HERO — 3D SCENE
   Pure CSS 3D transforms plus a small pointer-parallax script.
   No WebGL: one decorative section does not justify the payload,
   and everything here animates transform/opacity only so it stays
   on the compositor. All layers are decorative and inert.
   ============================================================ */
.hero{perspective:1200px;perspective-origin:64% 38%}
.hero::before,.hero::after{z-index:0}
.hero-in{position:relative;z-index:2}

.scene{position:absolute;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d}

/* ---- receding grid floor ---- */
.scene .floor{
  position:absolute;left:50%;bottom:-8%;width:240%;height:80%;
  transform:translateX(-50%) rotateX(76deg);transform-origin:50% 100%;
  background-image:
    linear-gradient(to right,rgba(212,175,55,.15) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(76,141,255,.12) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 52% 64% at 50% 100%,#000 10%,transparent 74%);
  mask-image:radial-gradient(ellipse 52% 64% at 50% 100%,#000 10%,transparent 74%);
  animation:floor-drift 8s linear infinite;
}
@keyframes floor-drift{from{background-position:0 0}to{background-position:0 74px}}

/* ---- orbiting rings ---- */
.scene .orbit{
  position:absolute;top:44%;right:4%;
  width:clamp(230px,29vw,430px);height:clamp(230px,29vw,430px);
  transform:translateY(-50%);transform-style:preserve-3d;
}
.scene .ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(212,175,55,.3);transform-style:preserve-3d;
}
/* the bead riding each ring — sells the rotation */
.scene .ring::after{
  content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 16px 4px rgba(212,175,55,.5);
}
.scene .r1{animation:ring-a 28s linear infinite}
.scene .r2{inset:13%;border-color:rgba(76,141,255,.28);animation:ring-b 36s linear infinite reverse}
.scene .r2::after{background:var(--blue);box-shadow:0 0 16px 4px rgba(76,141,255,.45)}
.scene .r3{inset:26%;border-color:rgba(212,175,55,.22);animation:ring-c 46s linear infinite}
@keyframes ring-a{from{transform:rotateX(70deg) rotateZ(0)}   to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes ring-b{from{transform:rotateX(54deg) rotateY(20deg) rotateZ(0)} to{transform:rotateX(54deg) rotateY(20deg) rotateZ(360deg)}}
@keyframes ring-c{from{transform:rotateX(80deg) rotateY(-14deg) rotateZ(0)} to{transform:rotateX(80deg) rotateY(-14deg) rotateZ(360deg)}}

/* ---- glass shards drifting at depth ---- */
.scene .shard{
  position:absolute;border-radius:14px;
  background:linear-gradient(150deg,rgba(212,175,55,.16),rgba(11,18,36,.66));
  border:1px solid rgba(212,175,55,.24);
  box-shadow:0 24px 56px -20px rgba(0,0,0,.8);
}
.scene .shard::before{
  content:'';position:absolute;inset:10px 12px auto 12px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(240,214,122,.75),transparent);
}
.scene .shard::after{
  content:'';position:absolute;inset:auto 12px 12px 12px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 70%);
  box-shadow:0 -7px 0 rgba(255,255,255,.09),0 -14px 0 rgba(255,255,255,.06);
}
.scene .s1{width:132px;height:86px;top:13%;right:31%;animation:drift-a 12s ease-in-out infinite}
.scene .s2{width:96px;height:64px;top:63%;right:44%;border-color:rgba(76,141,255,.26);
  background:linear-gradient(150deg,rgba(76,141,255,.16),rgba(11,18,36,.66));
  animation:drift-b 15s ease-in-out infinite}
.scene .s3{width:74px;height:52px;top:34%;right:2%;animation:drift-c 18s ease-in-out infinite}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,70px) rotateX(14deg) rotateY(-24deg)}
  50%    {transform:translate3d(0,-22px,110px) rotateX(6deg) rotateY(-14deg)}}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,-40px) rotateX(-10deg) rotateY(18deg)}
  50%    {transform:translate3d(14px,18px,10px) rotateX(-2deg) rotateY(9deg)}}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,30px) rotateX(20deg) rotateY(-34deg)}
  50%    {transform:translate3d(-10px,-16px,60px) rotateX(11deg) rotateY(-22deg)}}

/* ---- the portfolio card, tilted in 3D ----
   Wrapper rather than the card itself: .reveal.in sets transform:none
   and would win the cascade against a rule on .card-hi. */
.hero-card-3d{transform-style:preserve-3d;will-change:transform}
.hero-card-3d .card-hi{box-shadow:0 40px 90px -32px rgba(0,0,0,.85),var(--shadow-gold)}

@media(max-width:940px){
  /* The scene sits behind the copy once the grid stacks — pull it right back. */
  .scene .orbit{opacity:.4;right:-18%}
  .scene .shard{display:none}
}
@media(prefers-reduced-motion:reduce){
  /* The global reduce block already kills the keyframes; freeze the rings
     somewhere deliberate rather than at 0deg, and drop the parallax. */
  .scene .r1{transform:rotateX(70deg) rotateZ(40deg)}
  .scene .r2{transform:rotateX(54deg) rotateY(20deg) rotateZ(200deg)}
  .scene .r3{transform:rotateX(80deg) rotateY(-14deg) rotateZ(120deg)}
  .scene .s1{transform:translate3d(0,0,70px) rotateX(14deg) rotateY(-24deg)}
  .scene .s2{transform:translate3d(0,0,-40px) rotateX(-10deg) rotateY(18deg)}
  .scene .s3{transform:translate3d(0,0,30px) rotateX(20deg) rotateY(-34deg)}
}

/* ============================================================
   AUTH SCREENS — additions to the existing .auth/.auth-box layout
   ============================================================ */
/* .auth centres .auth-box with align-items:center. A form taller than the
   viewport would push its top above the scroll origin and become unreachable,
   so let the column scroll instead of centring once it overflows. */
.auth-main{align-items:safe center;overflow-y:auto}

/* the terms checkbox turns red when its rule fails */
.check.bad{color:var(--red)}
.check.bad input{outline:2px solid var(--red);outline-offset:2px}
.check a{color:var(--gold)}

/* an error rendered outside a .field wrapper */
.err.loose{display:block;margin:.15rem 0 1.1rem}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media(max-width:860px){.founder{grid-template-columns:1fr;gap:2rem}}

.founder-shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.founder-shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(6,11,24,.55));}
.founder-shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}

.founder-copy h2{margin-bottom:.2rem}
.founder-role{font-size:.9rem;font-weight:700;margin-bottom:1.1rem}
.founder-quote{margin:1.4rem 0;padding-left:1.1rem;border-left:2px solid var(--gold);
  font-size:1.06rem;line-height:1.6;font-weight:600;color:var(--text)}

.founder-gallery{display:flex;gap:.7rem;flex-wrap:wrap;list-style:none;margin-top:1.5rem}
.founder-gallery img{width:78px;height:78px;border-radius:var(--r);object-fit:cover;
  object-position:50% 20%;border:1px solid var(--line-soft);transition:.22s}
.founder-gallery img:hover{border-color:var(--gold);transform:translateY(-3px)}

/* homepage strip */
.founder-strip{display:flex;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;flex-wrap:wrap}
.founder-avatar{width:clamp(96px,14vw,150px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  object-position:50% 40%;border:2px solid var(--gold);box-shadow:var(--shadow-gold);flex:none}
.founder-strip>div{flex:1 1 320px;min-width:0}
.founder-strip .founder-quote{margin-top:.5rem}
.founder-sig{font-size:.88rem;margin:0 0 1.1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}

/* -------------------------------------------------- language switcher */
/* Built on <details>, so the open/closed state is the browser's and needs
   no script. main.js only adds click-outside and Escape as conveniences. */
/* Above .site-head (z-index:100), which is sticky and would otherwise paint
   over a menu opened from the top strip above it. */
.lang{position:relative;display:inline-block;z-index:130}
.lang>summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  list-style:none;user-select:none;white-space:nowrap;transition:color .2s}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--gold)}
.lang>summary .ic{opacity:.8}
.lang-caret{transition:transform .2s;opacity:.7}
.lang[open]>summary .lang-caret{transform:rotate(180deg)}
.lang[open]>summary{color:var(--gold)}

.lang-menu{position:absolute;top:calc(100% + .55rem);inset-inline-end:0;
  min-width:190px;margin:0;padding:.35rem;list-style:none;
  background:var(--navy-750);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow)}
.lang-menu li{margin:0}
.lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
  border-radius:var(--r-sm);font-size:.875rem;color:var(--text);transition:.15s}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(212,175,55,.1);color:var(--gold)}
.lang-menu a.active{color:var(--gold)}
.lang-flag{font-size:1.05rem;line-height:1}
.lang-native{flex:1}
.lang-tick{flex:none;color:var(--gold)}

/* In the top strip the switcher inherits the strip's small, dim type. */
.lang-bar>summary{font-size:.8rem;color:var(--dim)}

/* On the auth and dashboard chrome it reads as a bordered control instead. */
.lang-panel{z-index:45}
.lang-panel>summary{font-size:.82rem;color:var(--muted);padding:.4rem .7rem;
  border:1px solid var(--line-soft);border-radius:var(--r-pill);
  background:rgba(255,255,255,.02)}
.lang-panel>summary:hover{border-color:var(--gold)}

/* Narrow screens: drop the language name and keep the globe, so the control
   stays compact. The menu still hangs from the trigger's end edge, which is
   the viewport edge here, so it opens inward and cannot overflow. */
@media (max-width:720px){
  .lang-bar .lang-label{display:none}
}