:root{
  --bg:#0F0F11; --card:#1A1A1F; --violet:#9B50FF; --violet-glow:#B47BFF;
  --ember:#F5A65B; --ember-glow:#FFC98A; --fg:#FAFAFB; --muted:#B7B7C2;
  --border:rgba(255,255,255,0.12); --destructive:#F0503A;
  --radius:0.75rem; --gradient: linear-gradient(135deg,var(--violet),var(--ember));
  --shadow-glass: 0 20px 60px -20px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 80px -10px rgba(155,80,255,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#0d0822; color:var(--fg); font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:15px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* App screens (auth + portal) drop the animated liquid background in favor
   of the same flat base color — keeps focus on dense data, same palette. */
body.app-mode #liquid-bg{ display:none; }
h1,h2,h3,h4{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; letter-spacing:-0.02em; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
::selection{background:var(--violet); color:#fff;}
:focus-visible{outline:2px solid var(--violet-glow); outline-offset:3px;}

.skip-link{
  position:absolute; top:-48px; left:8px; z-index:1000;
  background:var(--fg); color:#0F0F11; padding:10px 18px; border-radius:8px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px;
  transition:top .2s ease;
}
.skip-link:focus{ top:8px; }

.gradient-text{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16.5px; text-transform:uppercase;
  letter-spacing:0.32em; color:var(--ember); margin-bottom:16px; display:block;
}
@media (max-width:480px){ .section h2[style*="max-width"]{ max-width:100% !important; } }
.wrap{max-width:1152px; margin:0 auto; padding:0 24px;}
.section{padding:128px 0; position:relative;}
@media (max-width:768px){ .section{padding:80px 0;} }

.glass{
  background:rgba(26,26,31,0.72); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--border); border-radius:calc(var(--radius)*2);
}
.glass-strong{
  background:rgba(26,26,31,0.72); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--border); border-radius:calc(var(--radius)*2);
}
.grain{position:relative;}
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.15; mix-blend-mode:overlay; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pill{border-radius:999px;}
.btn{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; padding:13px 28px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; transition:transform .25s ease, box-shadow .25s ease; white-space:nowrap;
}
.btn-primary{background:var(--gradient); color:#0F0F11;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-glow);}
.btn-glass{background:rgba(255,255,255,0.06); border:1px solid var(--border); color:var(--fg);}
.btn-glass:hover{background:rgba(255,255,255,0.1); transform:translateY(-2px);}
.btn-outline{border:1px solid var(--border); color:var(--fg); background:transparent;}
.btn-outline:hover{border-color:var(--violet-glow); color:var(--violet-glow);}
.btn-sm{padding:9px 20px; font-size:13px;}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200; width:calc(100% - 32px); max-width:1100px;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px 10px 20px;
  background:rgba(15,15,17,0.65); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--border); border-radius:999px;
}
.logo-group{display:flex; align-items:center; gap:10px;}
.logo-mark{height:24px; width:auto; flex-shrink:0; display:flex; align-items:center; position:relative;}
.logo-mark img{height:100%; width:auto; display:block; position:relative; z-index:1;}
.wordmark-sm{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.06em;}
.nav-links{display:flex; gap:8px; align-items:center;}
.nav-link{padding:9px 16px; border-radius:999px; font-size:13.5px; color:var(--muted); transition:color .2s, background .2s;}
.nav-link:hover{color:var(--fg); background:rgba(255,255,255,0.06);}
.nav-right{display:flex; align-items:center; gap:8px;}
@media (max-width:860px){ .nav-links{display:none;} }
@media (max-width:560px){ .nav-right .btn span.full{display:none;} }

/* ---------- GLOBAL AMBIENT BACKGROUND (single continuous field, whole site) ---------- */
/* ---------- LIQUID BACKGROUND CANVAS (WebGL shader, replaces old CSS blobs) ---------- */
#liquid-bg{ position:fixed; inset:0; z-index:-10; display:block; pointer-events:none; }

/* ---------- SUB-NAV (scroll-spy) ---------- */
/* subnav removed — duplicated the main nav, no longer used */

/* ---------- SERVICES ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
.service-card{padding:30px 26px;}
.service-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(155,80,255,0.1); border:1px solid rgba(155,80,255,0.25); margin-bottom:20px; color:var(--violet-glow);
}
.service-card h3{font-size:16.5px; margin-bottom:8px;}
.service-card p{color:var(--muted); font-size:13.5px;}
.service-card .service-tag{
  display:inline-block; margin-top:14px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ember); border:1px solid rgba(245,166,91,0.3); padding:3px 10px; border-radius:999px;
}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }

/* ---------- HERO ---------- */
.hero{
  height:100vh; min-height:640px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
/* Hero-only gradient blobs removed — WebGL shader canvas now covers the whole site, see #liquid-bg */

.hero-content{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; will-change:transform,opacity;}
.hero-logo{height:64px; width:auto; margin-bottom:20px; position:relative;}
.hero-logo img{height:100%; width:auto; display:block; position:relative; z-index:1;}
.hero-wordmark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(2.8rem,12vw,10rem); letter-spacing:-0.02em;
  background:linear-gradient(90deg,var(--violet),var(--ember),var(--violet)); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:0.95;
  animation:wave 8s cubic-bezier(0.445,0.05,0.55,0.95) infinite;
  transform:translateZ(0); backface-visibility:hidden;
}
@keyframes wave{ 0%,100%{background-position:0% 50%; transform:scale(1) translateZ(0);} 50%{background-position:100% 50%; transform:scale(1.05) translateZ(0);} }
.hero-eyebrow{
  font-family:'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:0.5em; font-size:12px; color:var(--muted);
  margin-top:22px; margin-left:0.5em;
}
.hero-subline{
  font-size:14.5px; color:var(--muted); margin-top:18px; max-width:34ch; text-align:center;
}
.hero-ctas{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; justify-content:center;}
.scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  cursor:pointer; background:none; border:none; font-family:inherit;
  animation: scrollHintBreathe 2.6s ease-in-out infinite;
}
.scroll-hint:hover{ color:var(--fg); }
.scroll-hint svg{ display:block; }
@keyframes scrollHintBreathe{
  0%,100%{ opacity:0.55; transform:translateX(-50%) translateY(0); }
  50%{ opacity:1; transform:translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce){
  .hero-wordmark{ animation:none; background-position:0% 50%; }
  .scroll-hint{ animation:none; }
}

/* ---------- SPLIT TEXT REVEAL ---------- */
.split-line{overflow:hidden; display:inline-block; vertical-align:top;}
.split-word{display:inline-block; will-change:transform,opacity;}

/* ---------- PITCH ---------- */
.pitch-card{padding:64px; text-align:left;}
.pitch-card h2{font-size:clamp(1.9rem,4vw,3rem); margin-bottom:28px; max-width:16ch;}
.pitch-card p{color:var(--muted); max-width:64ch; margin-bottom:20px; font-size:16px;}
.pitch-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px;}
.tile{background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.tile .t-head{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:6px;}
.tile .t-body{color:var(--muted); font-size:13.5px;}
@media (max-width:768px){ .pitch-card{padding:32px 24px;} .pitch-tiles{grid-template-columns:1fr;} }

/* ---------- STATS ---------- */
.stats-band{display:grid; grid-template-columns:repeat(var(--stat-count, 4),1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:calc(var(--radius)*2); overflow:hidden;}
.stat{background:var(--bg); padding:36px 20px; text-align:center;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem); background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-label{color:var(--muted); font-size:12.5px; margin-top:8px; letter-spacing:0.02em;}
@media (max-width:768px){ .stats-band{grid-template-columns:repeat(2,1fr);} }

/* ---------- PROCESS ---------- */
.process-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px;}
.process-track::before{content:''; position:absolute; top:23px; left:6%; right:6%; height:1px; background:linear-gradient(90deg,var(--violet),var(--ember)); opacity:0.35; z-index:0;}
.proc-step{position:relative; z-index:1;}
.proc-num{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; background:var(--card); border:1px solid var(--border);
  margin-bottom:20px; background-image:var(--gradient); background-clip:text; -webkit-background-clip:text; color:transparent;
  border-color:rgba(155,80,255,0.4);
}
.proc-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; margin-bottom:8px;}
.proc-body{color:var(--muted); font-size:13.5px; max-width:26ch;}
@media (max-width:768px){ .process-track{grid-template-columns:1fr; gap:36px;} .process-track::before{display:none;} }

/* ---------- PORTFOLIO ---------- */
.folio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;}
.folio-card{
  padding:0; overflow:hidden; cursor:pointer; transition:box-shadow .3s ease; perspective:900px;
}
.folio-inner{padding:28px; transition:transform .1s ease-out;}
.browser-mock{
  border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#111114; margin-bottom:22px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.6);
}
.browser-bar{display:flex; gap:6px; padding:9px 12px; background:#17171b; border-bottom:1px solid var(--border);}
.browser-bar span{width:8px; height:8px; border-radius:50%; background:#3a3a42;}
.browser-body{height:140px; background:linear-gradient(135deg,rgba(155,80,255,0.18),rgba(245,166,91,0.12)); position:relative;}
.browser-body::after{content:''; position:absolute; inset:14px; border:1px dashed rgba(255,255,255,0.15); border-radius:6px;}
.folio-card h3{font-size:19px; margin-bottom:10px;}
.folio-card p{color:var(--muted); font-size:13.5px;}
@media (max-width:900px){ .folio-grid{grid-template-columns:1fr;} }

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; align-items:start;}
.price-card{padding:36px 28px; display:flex; flex-direction:column; height:100%;}
.price-card.popular{border-color:rgba(155,80,255,0.5); box-shadow:var(--shadow-glow); position:relative; transform:translateY(-10px);}
.popular-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gradient); color:#0F0F11;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; padding:5px 16px; border-radius:999px; letter-spacing:0.05em;
}
.price-tier{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted);}
.price-amount{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; margin:14px 0 4px;}
.price-amount span{font-size:14px; color:var(--muted); font-weight:500;}
.price-sla{color:var(--ember); font-size:12.5px; margin-bottom:24px;}
.price-features{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex-grow:1;}
.price-features li{display:flex; gap:10px; font-size:13.5px; color:var(--muted); align-items:flex-start;}
.price-features li svg{flex-shrink:0; margin-top:2px; color:var(--violet-glow);}
.price-card .btn{justify-content:center; width:100%;}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr;} .price-card.popular{transform:none;} }

/* ---------- COMPARISON TABLE ---------- */
.compare-table{ width:100%; border-collapse:collapse; margin-top:48px; overflow:hidden; border-radius:calc(var(--radius)*1.5); border:1px solid var(--border); }
.compare-table th, .compare-table td{ padding:16px 18px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--border); }
.compare-table th{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); background:rgba(255,255,255,0.03); }
.compare-table td:first-child, .compare-table th:first-child{ text-align:left; color:var(--fg); font-weight:500; }
.compare-table th:first-child{ color:var(--muted); }
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table td.us{ background:rgba(155,80,255,0.06); font-weight:600; }
.compare-table th.us{ background:rgba(155,80,255,0.14); color:var(--fg); }
.compare-table .yes{ color:var(--violet-glow); }
.compare-table .no{ color:var(--muted); }
.compare-table tr.savings-row td{ font-weight:600; }
.compare-table tr.savings-row td.us{ font-size:15px; }
.compare-table tr.savings-row .save-amt{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--ember-glow); }
.compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:640px){ .compare-table th, .compare-table td{ padding:12px 10px; font-size:12px; } }

/* ---------- FOUNDER ---------- */
.founder-card{ display:flex; align-items:center; gap:32px; padding:40px; }
.founder-avatar{
  width:88px; height:88px; border-radius:50%; flex-shrink:0; background:var(--gradient);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px; color:#0F0F11;
}
.founder-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; }
.founder-role{ color:var(--ember); font-size:12.5px; margin-bottom:10px; }
.founder-blurb{ color:var(--muted); font-size:14px; max-width:60ch; }
@media (max-width:640px){ .founder-card{ flex-direction:column; text-align:center; gap:18px; } }

/* ---------- FAQ ---------- */
.faq-list{margin-top:48px; display:flex; flex-direction:column; gap:12px;}
.faq-item{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,0.02);}
.faq-q{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:20px 24px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px;}
.faq-q .plus{transition:transform .3s ease; color:var(--ember); font-size:18px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a-inner{padding:0 24px 22px; color:var(--muted); font-size:13.5px; max-width:70ch;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; margin-top:56px; align-items:start;}
.contact-side h3{font-size:1.6rem; margin-bottom:16px;}
.contact-side p{color:var(--muted); font-size:14px; margin-bottom:24px;}
.form-card{padding:36px;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-family:'Space Grotesk',sans-serif; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:8px; padding:12px 14px;
  color:var(--fg); font-family:inherit; font-size:14px; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--violet-glow);}
.field textarea{resize:vertical; min-height:100px;}
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:rgba(255,255,255,0.04); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B7B7C2' stroke-width='1.6'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px; padding-right:38px; cursor:pointer;
}
.field select option{background:var(--card); color:var(--fg);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-msg{font-size:13px; margin-top:14px; padding:10px 14px; border-radius:8px; display:none;}
.form-msg.ok{display:block; background:rgba(155,80,255,0.12); color:var(--violet-glow); border:1px solid rgba(155,80,255,0.3);}
.form-msg.err{display:block; background:rgba(240,80,58,0.12); color:#ff8a78; border:1px solid rgba(240,80,58,0.3);}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .portal-preview-grid{grid-template-columns:1fr !important;} }

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border); padding:48px 0; margin-top:40px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-left{display:flex; align-items:center; gap:10px;}
.footer-tag{color:var(--muted); font-size:12.5px; margin-top:4px;}
.footer-links{display:flex; gap:24px; font-size:13px; color:var(--muted);}
.footer-links a:hover{color:var(--fg);}
.footer-copy{color:var(--muted); font-size:12px; margin-top:14px;}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(8,8,10,0.75); backdrop-filter:blur(6px); z-index:500; display:none; align-items:center; justify-content:center; padding:24px;}
.modal-overlay.show{display:flex;}
.modal-box{max-width:640px; width:100%; max-height:82vh; overflow-y:auto; padding:40px; position:relative;}
.modal-close{position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:16px;}
.modal-close:hover{background:rgba(255,255,255,0.12);}

/* ---------- FIRST-LOGIN TOUR ---------- */
.tour-overlay{position:fixed; inset:0; z-index:500; display:none; pointer-events:none;}
.tour-overlay.show{display:block;}
.tour-tooltip{
  position:fixed; z-index:502; width:280px; padding:20px; pointer-events:auto;
  /* Solid-ish background, not the usual .glass-strong 0.72 alpha — this box
     sits on top of the spotlight dimming layer (also a translucent dark
     fill), and two stacked translucent darks read as low-contrast/washed
     out. A near-opaque background keeps the tooltip legible regardless of
     what's dimmed behind it. */
  background:rgba(18,18,22,0.97);
  box-shadow:0 16px 44px rgba(0,0,0,0.5);
}
.tour-tooltip-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:8px;}
.tour-tooltip-text{color:#D6D6E0; font-size:13px; line-height:1.5; margin-bottom:16px;}
.tour-tooltip-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.tour-step-count{color:var(--muted); font-size:11.5px;}
.tour-actions{display:flex; align-items:center; gap:8px;}

/* ================= AUTH ================= */
.auth-screen{min-height:100vh; display:none; align-items:center; justify-content:center; position:relative; padding:24px;}
.auth-screen.show{display:flex;}
.auth-card{width:100%; max-width:400px; padding:44px 36px;}
.auth-logo{display:flex; flex-direction:column; align-items:center; margin-bottom:32px;}
.auth-logo .logo-mark{height:40px; width:auto; margin-bottom:14px;}
.auth-title{font-size:1.3rem; text-align:center; margin-bottom:6px;}
.auth-sub{color:var(--muted); font-size:13px; text-align:center; margin-bottom:28px;}
.auth-footer{text-align:center; margin-top:20px; font-size:13px; color:var(--muted);}
.auth-footer a{color:var(--violet-glow);}
.reset-account-row{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:20px; font-size:13.5px; color:var(--muted);}
.reset-account-row strong{color:var(--fg); font-weight:500; overflow:hidden; text-overflow:ellipsis;}
.pw-requirements{list-style:none; margin-top:-6px; margin-bottom:20px; display:flex; flex-direction:column; gap:6px;}
.pw-requirements li{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; transition:color .2s;}
.pw-requirements li::before{content:''; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; transition:all .2s;}
.pw-requirements li.met{color:#37D399;}
.pw-requirements li.met::before{border-color:#37D399; background:#37D399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F0F11' stroke-width='2.5'%3E%3Cpath d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E") center/9px no-repeat;}
.back-to-site{position:fixed; top:24px; left:24px; z-index:50; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.back-to-site:hover{color:var(--fg);}

/* ================= SIGNUP (invite flow) ================= */
.qr-box{ background:#fff; border-radius:12px; padding:16px; display:flex; align-items:center; justify-content:center; margin:18px 0; min-height:180px; }
.qr-box svg, .qr-box img{ width:180px; height:180px; }
.totp-secret{ font-family:monospace; font-size:12px; color:var(--muted); text-align:center; word-break:break-all; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:16px; }
.code-input{ text-align:center; font-size:22px; letter-spacing:0.5em; font-family:'Space Grotesk',monospace; padding:14px !important; }
.step-dots{ display:flex; justify-content:center; gap:8px; margin-bottom:24px; }
.step-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .3s; }
.step-dots span.active{ background:var(--gradient); }
.mfa-skip{ text-align:center; margin-top:14px; }
.mfa-skip a{ color:var(--muted); font-size:13px; text-decoration:underline; }

/* ================= PORTAL ================= */
.portal{min-height:100vh; display:none;}
.portal.show{display:block;}
.portal-header{
  position:sticky; top:0; z-index:100; background:rgba(15,15,17,0.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); padding:16px 0;
}
.portal-header-inner{display:flex; align-items:center; justify-content:space-between; max-width:1152px; margin:0 auto; padding:0 24px;}
.portal-brand{display:flex; align-items:center; gap:12px;}
.portal-brand-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.portal-brand-sub{color:var(--muted); font-size:11.5px;}
.portal-actions{display:flex; align-items:center; gap:10px;}
.portal-body{max-width:1152px; margin:0 auto; padding:48px 24px 100px;}
.portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;}
.account-card{padding:32px; display:flex; flex-direction:column;}
.account-company{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; margin:6px 0 4px; line-height:1.2;}
.account-plan{color:var(--muted); font-size:13px; margin-bottom:24px;}
.account-status-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); padding-top:16px; border-top:1px solid var(--border); margin-top:auto;}
.gauge-card{padding:32px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.gauge-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:20px; align-self:flex-start;}
.gauge-center{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem;}
.gauge-sub{color:var(--muted); font-size:12px; margin-top:4px;}
.stepper{padding:32px;}
.stepper-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:28px;}
.stepper-track{display:flex; align-items:center;}
.step-node{
  width:16px; height:16px; border-radius:50%; background:var(--card); border:2px solid var(--border); flex-shrink:0; position:relative; z-index:1;
}
.step-node.done{background:var(--gradient); border-color:transparent;}
.step-node.active{border-color:var(--violet); box-shadow:0 0 0 4px rgba(155,80,255,0.2); background:var(--violet);}
.step-line{flex-grow:1; height:2px; background:var(--border);}
.step-line.done{background:var(--gradient);}
.step-labels{display:flex; justify-content:space-between; margin-top:12px; font-size:11.5px; color:var(--muted);}
.step-labels span.active{color:var(--ember);}
.portal-section-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; margin:36px 0 16px;}
.ticket-form{padding:28px;}
.ticket-list{padding:8px 0;}
.ticket-row{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--border); font-size:13.5px;}
.ticket-row:last-child{border-bottom:none;}
.ticket-row .t-name{font-family:'Space Grotesk',sans-serif; font-weight:500;}
.ticket-row .t-meta{color:var(--muted); font-size:12px;}
.badge{font-size:11px; padding:3px 10px; border-radius:999px; background:rgba(155,80,255,0.15); color:var(--violet-glow); border:1px solid rgba(155,80,255,0.3);}
.analytics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px;}
.mini-stat{padding:20px;}
.mini-stat-label{color:var(--muted); font-size:11.5px; margin-bottom:8px;}
.mini-stat-val{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem;}
.chart-card{padding:24px; margin-top:16px;}
.hosting-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:16px;}
.hosting-card{padding:20px;}
.hosting-domain{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; margin-bottom:12px; word-break:break-all;}
.hosting-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); padding:7px 0; border-top:1px solid var(--border);}
.hosting-row:first-of-type{border-top:none; padding-top:0;}
.status-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex-shrink:0;}
.status-dot.ok{background:#37D399;}
.status-dot.warn{background:var(--ember);}
.status-dot.bad{background:var(--destructive);}
.activity-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:stretch; margin-bottom:16px;}
.activity-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.chart-card-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; margin-bottom:14px;}
@media (max-width:900px){ .portal-grid{grid-template-columns:1fr;} .analytics-grid{grid-template-columns:repeat(2,1fr);} .activity-grid{grid-template-columns:1fr;} }
@media (max-width:520px){ .activity-stats{grid-template-columns:1fr;} }