@import url("../fonts/fonts.css");

:root{
  --ink:#0F1B2D;
  --paper:#F3F6FB;
  --paper-raised:#FFFFFF;
  --paper-sunken:#E9EFF7;
  --line:#DCE4EF;
  --muted:#5B6B84;
  --muted-soft:#8493AA;
  --brand-blue:#0091D6;
  --brand-indigo:#1F4FBF;
  --brand-mint:#16C9A8;
  --brand-blue-rgb:0,145,214;
  --on-brand:#FFFFFF;

  /* glass surfaces */
  --glass-bg:rgba(255,255,255,.5);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 1px 1px rgba(15,27,45,.04);
  --shadow-2:0 12px 32px -12px rgba(15,27,45,.18);
  --shadow-glass:0 20px 44px -20px rgba(15,27,45,.28), inset 0 1px 0 rgba(255,255,255,.65);

  --radius-card:20px;
  --radius-lg:28px;
  --radius-pill:999px;

  --font-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#EAF1FA;
    --paper:#070D17;
    --paper-raised:#101B2C;
    --paper-sunken:#0B1420;
    --line:#22314A;
    --muted:#93A6C2;
    --muted-soft:#6C81A0;
    --brand-blue:#2FB1F2;
    --brand-indigo:#7C9BFF;
    --brand-mint:#2FE3C4;
    --on-brand:#04101C;
    --glass-bg:rgba(16,27,44,.55);
    --glass-bg-strong:rgba(9,15,25,.78);
    --glass-border:rgba(255,255,255,.09);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 18px 40px -16px rgba(0,0,0,.6);
    --shadow-glass:0 24px 50px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"]{
  --ink:#EAF1FA; --paper:#070D17; --paper-raised:#101B2C; --paper-sunken:#0B1420;
  --line:#22314A; --muted:#93A6C2; --muted-soft:#6C81A0;
  --brand-blue:#2FB1F2; --brand-indigo:#7C9BFF; --brand-mint:#2FE3C4; --on-brand:#04101C;
  --glass-bg:rgba(16,27,44,.55); --glass-bg-strong:rgba(9,15,25,.78); --glass-border:rgba(255,255,255,.09);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 18px 40px -16px rgba(0,0,0,.6);
  --shadow-glass:0 24px 50px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
}
:root[data-theme="light"]{
  --ink:#0F1B2D; --paper:#F3F6FB; --paper-raised:#FFFFFF; --paper-sunken:#E9EFF7;
  --line:#DCE4EF; --muted:#5B6B84; --muted-soft:#8493AA;
  --brand-blue:#0091D6; --brand-indigo:#1F4FBF; --brand-mint:#16C9A8; --on-brand:#FFFFFF;
  --glass-bg:rgba(255,255,255,.5); --glass-bg-strong:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.65);
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 1px 1px rgba(15,27,45,.04);
  --shadow-2:0 12px 32px -12px rgba(15,27,45,.18);
  --shadow-glass:0 20px 44px -20px rgba(15,27,45,.28), inset 0 1px 0 rgba(255,255,255,.65);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,p{margin:0;}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;font-weight:800;letter-spacing:-0.02em;}
.container{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
section{padding:80px 0;position:relative;z-index:1;}
@media (max-width:760px){ section{padding:52px 0;} }

:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:4px;}

/* ================= Gradient mesh backdrop ================= */
.mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;}
.mesh-blob.b1{
  width:640px;height:640px;top:-220px;left:-160px;
  background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--brand-blue) 65%, transparent), transparent 70%);
  animation:drift1 28s ease-in-out infinite alternate;
}
.mesh-blob.b2{
  width:560px;height:560px;top:8%;right:-200px;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--brand-mint) 60%, transparent), transparent 70%);
  animation:drift2 34s ease-in-out infinite alternate;
}
.mesh-blob.b3{
  width:520px;height:520px;bottom:-220px;left:28%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-indigo) 60%, transparent), transparent 70%);
  animation:drift3 24s ease-in-out infinite alternate;
}
@keyframes drift1{ from{transform:translate(0,0) scale(1);} to{transform:translate(70px,50px) scale(1.1);} }
@keyframes drift2{ from{transform:translate(0,0) scale(1);} to{transform:translate(-60px,70px) scale(.94);} }
@keyframes drift3{ from{transform:translate(0,0) scale(1);} to{transform:translate(50px,-60px) scale(1.06);} }

/* ================= Glass surfaces ================= */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow-glass);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-blue);
}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--brand-blue);border-radius:2px;}
.lede{color:var(--muted);font-size:1.05rem;max-width:52ch;}
.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-pill);
  font-weight:700;font-size:.95rem;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));
  color:#fff; box-shadow:var(--shadow-1);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(var(--brand-blue-rgb),.55);}
.btn-ghost{background:var(--glass-bg);backdrop-filter:blur(12px);border-color:var(--glass-border);color:var(--ink);}
.btn-ghost:hover{border-color:var(--brand-blue);color:var(--brand-blue);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px;font-size:.85rem;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.01em;}
.brand .word{color:var(--ink);}
nav.primary{display:flex;align-items:center;gap:4px;}
nav.primary > ul{display:flex;align-items:center;gap:2px;}
.nav-link{
  position:relative;padding:10px 14px;border-radius:10px;font-weight:600;font-size:.92rem;color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.nav-link:hover{color:var(--ink);background:var(--paper-sunken);}
.has-menu{position:relative;}
.has-menu > .nav-link{display:flex;align-items:center;gap:6px;}
.chev{width:10px;height:10px;transition:transform .15s ease;}
.has-menu:hover .chev, .has-menu:focus-within .chev, .has-menu.menu-open .chev{transform:rotate(180deg);}

/* Mega-menu: solid, full-width panel anchored under the header (Liferay-style) */
.megamenu{
  position:fixed;top:76px;left:0;right:0;
  background:var(--paper-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-2);display:none;z-index:49;
}
/* .menu-open is added/removed with a short delay by js/main.js so the menu
   stays open long enough for the cursor to travel from the link down into
   the panel. :hover/:focus-within stay as a no-JS/keyboard fallback. */
.has-menu:hover .megamenu, .has-menu:focus-within .megamenu, .has-menu.menu-open .megamenu{display:block;}
.megamenu-inner{max-width:1400px;margin:0 auto;padding:36px 24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;}
.mega-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-soft);margin-bottom:14px;font-weight:700;}
.mega-item{display:flex;align-items:flex-start;gap:14px;padding:10px 10px;border-radius:12px;transition:background .15s ease;}
.mega-item:hover{background:var(--paper-sunken);}
.mega-item .icon-tile{width:38px;height:38px;margin-bottom:0;flex:none;}
.mega-item .icon-tile svg{width:19px;height:19px;}
.mega-item strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:2px;}
.mega-item small{display:block;font-size:.78rem;color:var(--muted);line-height:1.4;font-weight:400;}
.mega-item:hover strong{color:var(--brand-blue);}
.nav-cta{display:flex;align-items:center;gap:10px;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:42px;align-items:center;justify-content:center;}

/* Auth state toggling: [data-guest-only]/[data-user-only] get their `hidden`
   property flipped by renderAuthState() in js/main.js. .btn/.user-chip set
   their own `display`, which otherwise wins the cascade over the UA
   [hidden]{display:none} rule (same origin, equal specificity, later rule).
   These two attribute selectors have higher specificity, so they win instead. */
[data-guest-only][hidden],
[data-user-only][hidden]{display:none!important;}

/* ---------- Authenticated user chip ---------- */
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:var(--radius-pill);background:var(--paper-sunken);border:1px solid var(--line);}
.user-chip-avatar{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-mint));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;text-transform:uppercase;
}
.user-chip-email{font-size:.82rem;font-weight:700;color:var(--ink);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-chip-logout{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--muted-soft);display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s ease,color .15s ease;}
.user-chip-logout:hover{background:var(--line);color:var(--ink);}
.user-chip-logout svg{width:15px;height:15px;}
.user-chip-block{width:100%;justify-content:space-between;padding:10px 12px;}
@media (max-width:920px){
  nav.primary, .nav-cta .btn-ghost{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Logo mark ---------- */
.mark{width:30px;height:30px;flex:none;}

/* ================= Hero bento ================= */
.hero{padding:56px 0 90px;}
.hero-bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;position:relative;
}
.bento-tile{border-radius:var(--radius-lg);padding:28px;transition:transform .25s ease, box-shadow .25s ease;}

.tile-headline{grid-column:1/8;display:flex;flex-direction:column;justify-content:center;}
.tile-headline h1{font-size:clamp(2.1rem,3.6vw,3.15rem);line-height:1.06;}
.tile-headline h1 .accent{background:linear-gradient(100deg,var(--brand-blue),var(--brand-mint));-webkit-background-clip:text;background-clip:text;color:transparent;}
.tile-headline .lede{margin:20px 0 28px;font-size:1.05rem;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{margin-top:24px;display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted-soft);}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-mint);flex:none;}

.tile-chart{grid-column:8/13;display:flex;flex-direction:column;position:relative;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px;}
.panel-head .t{font-weight:700;font-size:.95rem;}
.panel-head .s{font-size:.74rem;color:var(--muted-soft);}
.chart{display:flex;align-items:flex-end;gap:8px;height:130px;flex:1;}
.chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-mint));}
.chart-labels{display:flex;gap:8px;margin-top:10px;}
.chart-labels span{flex:1;text-align:center;font-size:.66rem;color:var(--muted-soft);}
.status-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(22,201,168,.14);color:var(--brand-mint);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-pill);}
.status-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-mint);display:inline-block;}

.tile-stat{grid-column:span 4;display:flex;flex-direction:column;gap:4px;padding:22px 24px;}
.tile-stat b{font-family:var(--font-mono);font-size:1.9rem;font-weight:700;color:var(--ink);}
.tile-stat span{color:var(--muted);font-size:.86rem;}

.float-card{
  position:absolute;right:6.5%;bottom:-30px;width:230px;z-index:2;border-radius:var(--radius-card);padding:16px;
}
.float-card .row{display:flex;justify-content:space-between;font-size:.78rem;padding:6px 0;border-bottom:1px dashed var(--line);}
.float-card .row:last-child{border-bottom:none;}
.float-card .row b{font-family:var(--font-mono);}

.bento-tile:hover{transform:translateY(-3px);}

@media (max-width:900px){
  .hero-bento{grid-template-columns:1fr;}
  .tile-headline,.tile-chart,.tile-stat{grid-column:1/-1;}
  .float-card{position:static;width:auto;margin-top:18px;}
}

/* ================= Section heads ================= */
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:14px;}
.section-head .lede{margin-top:14px;}

/* ================= Services bento ================= */
.services-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);gap:18px;}
.services-bento .card{border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease;}
.services-bento .card:hover{transform:translateY(-4px);}
.feat-flagship{grid-column:1/3;grid-row:1/3;justify-content:center;}
.feat-flagship h3{font-size:1.3rem;}
.feat-flagship p{font-size:.98rem;max-width:38ch;}
.feat-flagship .icon-tile{width:56px;height:56px;}
.feat-flagship .icon-tile svg{width:28px;height:28px;}
.feat-a{grid-column:3/4;grid-row:1/2;}
.feat-b{grid-column:4/5;grid-row:1/2;}
.feat-c{grid-column:3/4;grid-row:2/3;}
.feat-d{grid-column:4/5;grid-row:2/3;}
.feat-wide{grid-column:1/5;grid-row:3/4;flex-direction:row;align-items:center;gap:24px;}
.feat-wide .icon-tile{margin-bottom:0;}
.feat-wide p{max-width:60ch;}

.icon-tile{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 20%, transparent), color-mix(in srgb, var(--brand-mint) 20%, transparent));
  color:var(--brand-blue);margin-bottom:16px;flex:none;
}
.icon-tile svg{width:22px;height:22px;}
.card h3{font-size:1.02rem;margin-bottom:8px;}
.card p{color:var(--muted);font-size:.9rem;}

@media (max-width:900px){
  .services-bento{grid-template-columns:repeat(2,1fr);}
  .feat-flagship{grid-column:1/3;grid-row:auto;}
  .feat-a,.feat-b,.feat-c,.feat-d{grid-column:span 1;grid-row:auto;}
  .feat-wide{grid-column:1/3;grid-row:auto;flex-direction:column;}
}
@media (max-width:600px){
  .services-bento{grid-template-columns:1fr;}
  .feat-flagship,.feat-a,.feat-b,.feat-c,.feat-d,.feat-wide{grid-column:1/-1;}
}

/* ================= Modules ================= */
.modules-wrap{position:relative;}
.modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){ .modules-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .modules-grid{grid-template-columns:1fr;} }
.module{border-radius:var(--radius-card);padding:22px 20px;display:flex;gap:14px;align-items:flex-start;transition:transform .2s ease;}
.module:hover{transform:translateY(-3px);}
.module.wide{grid-column:span 2;}
@media (max-width:520px){ .module.wide{grid-column:span 1;} }
.module .icon-tile{width:36px;height:36px;margin-bottom:0;flex:none;}
.module .icon-tile svg{width:18px;height:18px;}
.module h4{font-size:.92rem;font-weight:700;margin-bottom:4px;}
.module p{font-size:.8rem;color:var(--muted);line-height:1.45;}
.module a{font-size:.78rem;font-weight:700;color:var(--brand-blue);display:inline-block;margin-top:6px;}

/* ================= Pricing ================= */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
@media (max-width:1000px){ .plans{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .plans{grid-template-columns:1fr;} }
.plan{
  border-radius:var(--radius-card);
  padding:26px 22px;display:flex;flex-direction:column;transition:transform .2s ease;
}
.plan:hover{transform:translateY(-3px);}
.plan.featured{border-color:var(--brand-blue);box-shadow:0 0 0 1px var(--brand-blue), var(--shadow-glass);position:relative;}
.badge-pop{
  position:absolute;top:-13px;left:22px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));
  color:#fff;font-size:.68rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);letter-spacing:.03em;
}
.plan h3{font-size:1.05rem;margin-bottom:6px;}
.plan .desc{font-size:.82rem;color:var(--muted);min-height:52px;}
.price{display:flex;align-items:baseline;gap:6px;margin:18px 0 20px;font-family:var(--font-mono);}
.price .num{font-size:1.9rem;font-weight:700;}
.price .per{font-size:.78rem;color:var(--muted-soft);}
.plan ul{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1;}
.plan li{display:flex;gap:9px;font-size:.82rem;color:var(--muted);line-height:1.4;}
.plan li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--brand-mint);}

/* ================= Testimonials bento ================= */
.testi-bento{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;}
.testi{border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;gap:20px;transition:transform .2s ease;}
.testi:hover{transform:translateY(-3px);}
.testi-feature{grid-column:1;grid-row:1/3;justify-content:center;}
.testi-feature .quote{font-size:1.15rem;line-height:1.5;}
.testi .quote{font-size:.95rem;line-height:1.55;color:var(--ink);}
.testi .who{display:flex;align-items:center;gap:12px;}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-mint));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;flex:none;}
.who .name{font-weight:700;font-size:.86rem;}
.who .role{font-size:.76rem;color:var(--muted-soft);}
@media (max-width:800px){
  .testi-bento{grid-template-columns:1fr;}
  .testi-feature{grid-column:1;grid-row:auto;}
}

/* ================= Newsletter ================= */
.newsletter{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:52px;
  background:linear-gradient(120deg,var(--brand-indigo),var(--brand-blue));color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
@media (max-width:760px){ .newsletter{flex-direction:column;text-align:center;padding:36px 24px;} }
.newsletter h2{font-size:1.6rem;color:#fff;max-width:26ch;}
.newsletter p{color:rgba(255,255,255,.85);margin-top:10px;max-width:48ch;font-size:.92rem;}
.newsletter-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
.newsletter .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff;}
.newsletter .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.22);}
.newsletter .btn-primary{background:#fff;color:var(--brand-indigo);}

/* ================= Footer ================= */
footer{border-top:1px solid var(--line);padding:60px 0 28px;background:var(--paper-sunken);position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.1fr .7fr .7fr 1.7fr;gap:40px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h5{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-soft);margin-bottom:16px;font-weight:700;}
.footer-grid ul{display:flex;flex-direction:column;gap:11px;}
.footer-grid a{font-size:.88rem;color:var(--muted);}
.footer-grid a:hover{color:var(--brand-blue);}
.footer-about p{color:var(--muted);font-size:.88rem;max-width:34ch;margin-top:14px;}
.footer-contact li{font-size:.86rem;color:var(--muted);display:flex;gap:9px;align-items:flex-start;}
.footer-contact svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--brand-blue);}
.phone-list{display:flex;flex-direction:column;gap:5px;}
.footer-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted-soft);}
.footer-bottom .tabular{font-size:inherit;}

/* ---------- Mobile nav ---------- */
.mobile-panel{
  display:none;position:fixed;inset:76px 0 0 0;z-index:49;background:var(--glass-bg-strong);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  padding:24px;overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel ul{display:flex;flex-direction:column;gap:4px;}
.mobile-panel a{display:block;padding:14px 6px;border-bottom:1px solid var(--line);font-weight:600;}
.mobile-panel .mobile-cta{display:flex;flex-direction:column;gap:12px;margin-top:24px;}

/* ================= Auth dialog ================= */
.auth-dialog{
  border:none;padding:0;background:transparent;color:inherit;
  width:min(440px,92vw);max-width:92vw;max-height:90vh;overflow:visible;
  border-radius:var(--radius-lg);
}
.auth-dialog::backdrop{background:rgba(6,12,22,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.auth-dialog[open]{animation:auth-fade .18s ease;}
@keyframes auth-fade{ from{opacity:0;} to{opacity:1;} }

.auth-card{
  position:relative;padding:36px 32px 32px;border-radius:var(--radius-lg);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:var(--shadow-glass);
  display:flex;flex-direction:column;gap:20px;max-height:90vh;overflow-y:auto;
  animation:auth-pop .28s cubic-bezier(.16,1,.3,1);
}
@keyframes auth-pop{ from{opacity:0;transform:translateY(10px) scale(.97);} to{opacity:1;transform:none;} }

.auth-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-sunken);border:1px solid var(--line);color:var(--muted);
  transition:background .15s ease,color .15s ease;flex:none;
}
.auth-close:hover{background:var(--line);color:var(--ink);}
.auth-close svg{width:16px;height:16px;}

.auth-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.auth-head .mark{width:36px;height:36px;}
.auth-head h3{font-size:1.3rem;}
.auth-head .auth-sub{color:var(--muted);font-size:.88rem;margin:0;}

.auth-form{display:flex;flex-direction:column;gap:16px;}
.auth-form[hidden]{display:none;}

.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700;color:var(--ink);}
.field input{
  font:inherit;font-family:var(--font-sans);font-weight:500;font-size:.92rem;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;width:100%;
}
.field input::placeholder{color:var(--muted-soft);}
.field input:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-blue) 22%, transparent);}

.field-input{position:relative;display:flex;align-items:center;}
.field-input input{padding-right:44px;}
.field-toggle{
  position:absolute;right:6px;width:32px;height:32px;border-radius:8px;border:none;background:transparent;
  color:var(--muted-soft);display:flex;align-items:center;justify-content:center;
}
.field-toggle:hover{color:var(--ink);background:var(--paper-sunken);}
.field-toggle svg{width:18px;height:18px;}
.field-toggle .i-eye-off{display:none;}
.field-toggle.is-showing .i-eye{display:none;}
.field-toggle.is-showing .i-eye-off{display:block;}

.auth-forgot{align-self:flex-end;font-size:.8rem;font-weight:700;color:var(--brand-blue);margin-top:-8px;}

.auth-error{
  display:flex;align-items:center;gap:8px;margin:0;
  background:color-mix(in srgb, #E5484D 12%, transparent);
  border:1px solid color-mix(in srgb, #E5484D 30%, transparent);
  color:#E5484D;border-radius:10px;padding:10px 12px;font-size:.82rem;font-weight:600;
}
.auth-error[hidden]{display:none;}

.btn .btn-spinner{display:none;}
.btn.is-loading{cursor:progress;}
.btn.is-loading .btn-text{visibility:hidden;}
.btn.is-loading .btn-spinner{
  display:block;position:absolute;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{transform:rotate(360deg);} }

.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted-soft);font-size:.75rem;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}

.btn-social{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--paper-raised);
  font:inherit;font-weight:700;font-size:.88rem;color:var(--ink);cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn-social:hover{background:var(--paper-sunken);transform:translateY(-1px);}
.btn-social svg{width:19px;height:19px;flex:none;}

@media (max-width:520px){ .auth-card{padding:30px 22px 26px;} }

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------- Conmutador de modo claro / oscuro ----------
   Pestaña fija en el margen derecho. Se inyecta desde main.js para no repetir
   el marcado en cada página. */
.theme-toggle{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:60;

  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:52px;
  padding:0;

  border:1px solid var(--glass-border);
  border-right:0;
  border-radius:var(--radius-card) 0 0 var(--radius-card);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--ink);
  box-shadow:var(--shadow-2);
  cursor:pointer;
  transition:width .18s ease, color .18s ease, background-color .18s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible{
  width:52px;
  color:var(--brand-blue);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--brand-blue);
  outline-offset:2px;
}
@media print{
  .theme-toggle{display:none;}
}