/* Last Generation Tech — design system
   Futuristic dark theme: deep graphite/black base, electric blue accent
   (matched to the brand mark), glass panels, soft glow. */

:root{
  --bg:#040509;
  --bg-alt:#090b14;
  --panel:#0e1320;
  --panel-2:#121828;
  --border:rgba(148,163,184,.14);
  --border-strong:rgba(148,163,184,.28);
  --text:#f1f4fb;
  --muted:#8b95ab;
  --muted-2:#5b6478;
  --blue:#3b82f6;
  --blue-light:#60a5fa;
  --blue-dark:#1d4ed8;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --magenta:#e879f9;
  --pink:#fb7185;
  --green:#22c55e;
  --red:#f87171;
  --gold:#fbbf24;
  --radius:16px;
  --radius-sm:10px;
  --shadow-glow:0 0 0 1px rgba(59,130,246,.3), 0 20px 60px -20px rgba(59,130,246,.45);
  --grad-brand: linear-gradient(120deg, var(--blue-light) 0%, var(--violet) 45%, var(--magenta) 75%, var(--cyan) 100%);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(1000px 650px at 105% 0%, rgba(232,121,249,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(139,92,246,.14), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* subtle animated grid — the "high-tech" texture */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 100% 60% at 50% 0%, #000 10%, transparent 70%);
}
.glow-orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; z-index:0;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-24px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-26px,20px);}}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes pulseGlow{0%,100%{opacity:.5;}50%{opacity:1;}}
a{color:inherit; text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
::selection{background:rgba(59,130,246,.35);}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.container-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,7,13,.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .row{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:.2px; flex-shrink:0;}
.brand img{height:34px; width:auto;}
.brand-mark{filter:drop-shadow(0 2px 10px rgba(59,130,246,.55)); transition:filter .25s, transform .25s;}
.brand:hover .brand-mark{filter:drop-shadow(0 2px 16px rgba(59,130,246,.85)); transform:translateY(-1px);}

/* ---------- manager dashboard ---------- */
.social-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px;}
.social-card{padding:20px; text-align:center;}
.social-card .ico{font-size:26px; margin-bottom:8px;}
.social-card b{display:block; font-size:14px; margin-bottom:2px;}
.social-card .handle{font-size:12.5px; color:var(--muted); margin-bottom:4px; word-break:break-all;}
.chk-pill{display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--border-strong); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;}
.chk-pill input{accent-color:var(--blue);}
.export-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;}
.export-item{background:var(--panel); border:1px solid var(--border-strong); border-radius:12px; overflow:hidden; padding:10px;}
.export-item img{width:100%; aspect-ratio:1; object-fit:contain; background:#05070d; border-radius:8px; margin-bottom:8px;}
.export-item .meta{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted); margin-bottom:8px;}
.export-item .meta b{color:#fff; font-size:12px;}

.online-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.8); margin-right:6px;}
.online-dot.offline{background:#475569; box-shadow:none;}

.ceo-avatar{
  width:120px; height:120px; border-radius:50%; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(59,130,246,.5), inset 0 0 30px rgba(255,255,255,.2);
  transition:box-shadow .3s;
}
.ceo-avatar.speaking{ animation:avatarPulse 0.6s ease-in-out infinite; }
@keyframes avatarPulse{ 0%,100%{ box-shadow:0 0 40px rgba(59,130,246,.5), inset 0 0 30px rgba(255,255,255,.2);} 50%{ box-shadow:0 0 70px rgba(59,130,246,.9), inset 0 0 40px rgba(255,255,255,.35);} }
.ceo-avatar-face{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.85); }

/* ---------- Optimus Grind: the AI's floating, glowing chrome-mark avatar ---------- */
.optimus-avatar{
  width:36px; height:36px; object-fit:contain; flex-shrink:0; display:block;
  animation: optimusFloat 3s ease-in-out infinite, optimusGlow 1.7s ease-in-out infinite;
}
.optimus-avatar.optimus-lg{ width:52px; height:52px; }
.optimus-avatar.optimus-xl{ width:80px; height:80px; }
@keyframes optimusFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-5px) rotate(-5deg); }
}
@keyframes optimusGlow{
  0%,100%{ filter:drop-shadow(0 0 5px rgba(59,130,246,.85)) drop-shadow(0 0 14px rgba(37,99,235,.55)) drop-shadow(0 0 0 rgba(96,165,250,0)); }
  50%{ filter:drop-shadow(0 0 12px rgba(96,165,250,1)) drop-shadow(0 0 30px rgba(59,130,246,.95)) drop-shadow(0 0 46px rgba(37,99,235,.5)); }
}
.optimus-name{
  background:linear-gradient(90deg,#60a5fa,#93c5fd,#60a5fa); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:optimusNameShine 2.6s linear infinite;
}
@keyframes optimusNameShine{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }

.msg-row{ display:flex; align-items:flex-end; gap:9px; align-self:flex-start; max-width:92%; }
.msg-row .msg{ margin:0; max-width:100%; align-self:auto; }
.msg-row .optimus-avatar{ margin-bottom:2px; }

.sheet-grid{ border-collapse:collapse; width:100%; }
.sheet-cell{ border:1px solid var(--border-strong); background:transparent; color:#fff; padding:8px 10px; font-size:13px; width:130px; }
.sheet-header{ font-weight:800; background:rgba(59,130,246,.08); }

@keyframes markFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(1.5deg); }
}

/* ---------- cinematic logo reveal ---------- */
.logo-reveal{ display:flex; justify-content:center; margin:0 auto 4px; cursor:pointer; }
.hero-mark-wrap{ position:relative; display:inline-block; margin:0 auto 14px; }
.hero-mark-float{
  position:relative; z-index:2; height:110px; width:auto; display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(59,130,246,0));
  opacity:0; transform:scale(.5) rotateY(-55deg) translateY(8px);
}
.logo-reveal.playing .hero-mark-float,
.logo-reveal.settled .hero-mark-float{
  animation: markAssemble 1s cubic-bezier(.16,1.15,.4,1) forwards, markFloat 5.5s ease-in-out 1s infinite;
}
@keyframes markAssemble{
  0%{ opacity:0; transform:scale(.5) rotateY(-55deg) translateY(8px); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(59,130,246,0)); }
  55%{ opacity:1; transform:scale(1.1) rotateY(10deg) translateY(-5px); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 60px rgba(59,130,246,1)); }
  100%{ opacity:1; transform:scale(1) rotateY(0deg) translateY(0); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(59,130,246,.55)); }
}
.logo-particles{ position:absolute; z-index:1; top:50%; left:50%; width:340px; height:340px; margin:-170px 0 0 -170px; pointer-events:none; }
.logo-reveal-ring{
  position:absolute; z-index:1; top:50%; left:50%; width:120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%; border:1.5px solid rgba(59,130,246,.5); opacity:0; pointer-events:none;
}
.logo-reveal.playing .logo-reveal-ring{ animation: ringPulse 1.15s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes ringPulse{
  0%{ opacity:.95; transform:scale(.25); border-color:rgba(232,121,249,.9); }
  55%{ opacity:.55; border-color:rgba(59,130,246,.6); }
  100%{ opacity:0; transform:scale(2.8); border-color:rgba(59,130,246,.15); }
}
.logo-sheen{
  position:absolute; z-index:3; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%);
  background-size:300% 100%; background-position:150% 0;
  -webkit-mask-image:url('/static/img/logos/mark-chrome-3d.png'); -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-image:url('/static/img/logos/mark-chrome-3d.png'); mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  mix-blend-mode:overlay;
}
.logo-reveal.playing .logo-sheen{ animation: sheenSweep 1.2s ease .6s 1; }
@keyframes sheenSweep{
  0%{ opacity:0; background-position:150% 0; }
  18%{ opacity:1; }
  75%{ opacity:1; }
  100%{ opacity:0; background-position:-60% 0; }
}

/* ---------- hover-to-play video affordance ---------- */
.hero-video-wrap{ position:relative; }
.video-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:rgba(5,7,13,.72); border:1px solid var(--border-strong); color:#fff;
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:20px; letter-spacing:.3px;
  pointer-events:none; opacity:1; transition:opacity .3s;
}
.hero-video-wrap:hover .video-hint{ opacity:0; }
.brand small{display:block; font-size:9.5px; font-weight:600; color:var(--muted); letter-spacing:1.5px; margin-top:1px;}

.main-nav{display:flex; align-items:center; gap:4px; flex:1; justify-content:center;}
.main-nav a{
  font-size:14px; font-weight:600; color:var(--muted); padding:9px 14px; border-radius:9px;
  transition:.15s;
}
.main-nav a:hover, .main-nav a.active{color:#fff; background:rgba(255,255,255,.06);}

.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.credit-pill{
  display:flex; align-items:center; gap:7px; background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.12));
  border:1px solid rgba(59,130,246,.35); padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700;
}
.credit-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulseGlow 1.8s infinite;}

button.hamburger{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:11px; font-weight:700; font-size:14.5px; border:1px solid transparent;
  transition:.15s; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--blue-light), var(--blue), var(--violet));
  background-size:200% 200%;
  color:#fff; box-shadow:0 8px 28px -8px rgba(59,130,246,.65);
  position:relative; overflow:hidden;
}
.btn-primary:hover{filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(139,92,246,.65); background-position:100% 0;}
.btn-primary::after{
  content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .7s;
}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{background:rgba(255,255,255,.09);}
.btn-outline{background:transparent; border-color:var(--border-strong); color:var(--text);}
.btn-outline:hover{border-color:var(--blue-light); color:var(--blue-light);}
.btn-sm{padding:7px 13px; font-size:13px; border-radius:9px;}
.btn-lg{padding:15px 28px; font-size:16px; border-radius:13px;}
.btn-block{width:100%;}
.btn-danger{background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.35);}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important;}

/* ---------- panels / cards ---------- */
.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:var(--radius);
}
.glow-border{border:1px solid rgba(59,130,246,.35); box-shadow:var(--shadow-glow);}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px;}
.card:hover{border-color:var(--border-strong);}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.3px;}
.pill-blue{background:rgba(59,130,246,.14); color:var(--blue-light); border:1px solid rgba(59,130,246,.3);}
.pill-green{background:rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.3);}
.pill-gold{background:rgba(251,191,36,.14); color:var(--gold); border:1px solid rgba(251,191,36,.3);}
.pill-muted{background:rgba(148,163,184,.1); color:var(--muted); border:1px solid var(--border);}
.pill-pink{background:rgba(232,121,249,.14); color:var(--magenta); border:1px solid rgba(232,121,249,.32);}

/* ---------- trust / safety / referral ---------- */
.trust-bar{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; padding:26px 0 6px;}
.trust-chip{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid var(--border-strong); font-size:13px; color:var(--muted); font-weight:600;}

.safety-band{padding:40px; border-radius:22px; background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(59,130,246,.06)); border:1px solid rgba(34,197,94,.25);}
.safety-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px;}
.safety-item{display:flex; gap:12px; align-items:flex-start;}
.safety-item .ico{font-size:20px; width:38px; height:38px; border-radius:10px; background:rgba(34,197,94,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.safety-item b{font-size:14px; display:block; margin-bottom:4px;}
.safety-item p{font-size:13px; color:var(--muted); margin:0; line-height:1.5;}

.low-balance-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 20px; border-radius:14px; margin-bottom:22px;
  background:linear-gradient(90deg, rgba(251,191,36,.14), rgba(251,113,133,.10));
  border:1px solid rgba(251,191,36,.35);
}
.low-balance-banner b{font-size:14px;}
.low-balance-banner span{font-size:13px; color:var(--muted);}

.referral-card{padding:30px; border-radius:20px; background:linear-gradient(135deg, rgba(139,92,246,.14), rgba(232,121,249,.10)); border:1px solid rgba(232,121,249,.3);}
.referral-code-box{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.3); border:1px dashed var(--border-strong); border-radius:12px; padding:12px 16px; font-family:monospace; font-size:15px; font-weight:700; margin:14px 0;}

.msg.blocked{background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.35); color:#fecaca;}

/* ---------- landing hero ---------- */
.hero{padding:96px 0 76px; text-align:center; position:relative; overflow:hidden;}
.hero .orb-a{width:420px; height:420px; background:radial-gradient(circle, rgba(59,130,246,.55), transparent 70%); top:-140px; left:-80px; animation:drift1 14s ease-in-out infinite;}
.hero .orb-b{width:380px; height:380px; background:radial-gradient(circle, rgba(232,121,249,.4), transparent 70%); top:-60px; right:-100px; animation:drift2 16s ease-in-out infinite;}
.hero .orb-c{width:340px; height:340px; background:radial-gradient(circle, rgba(139,92,246,.4), transparent 70%); bottom:-160px; left:40%; animation:drift1 18s ease-in-out infinite reverse;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; background:rgba(59,130,246,.1); border:1px solid rgba(96,165,250,.4); font-size:13px; font-weight:700; color:var(--blue-light); margin-bottom:28px; position:relative; z-index:1;}
.hero .eyebrow .liveDot{width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulseGlow 1.6s infinite;}
.hero h1{font-size:64px; line-height:1.06; font-weight:800; letter-spacing:-2px; margin:0 0 22px; position:relative; z-index:1;}
.hero h1 span{
  background:var(--grad-brand); background-size:300% 300%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientShift 6s ease infinite;
}
.hero p.lead{font-size:20px; color:var(--muted); max-width:660px; margin:0 auto 36px; line-height:1.65; position:relative; z-index:1;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px;}
.hero-note{font-size:13px; color:var(--muted-2);}
.hero-logo-big{display:flex; flex-direction:column; align-items:center; justify-content:center; margin:44px 0; position:relative; z-index:1;}
.hero-logo-big img{max-height:150px;}

.hero-video-wrap{max-width:920px; margin:56px auto 0; border-radius:20px; overflow:hidden; position:relative;
  border:1px solid var(--border-strong); box-shadow:0 40px 100px -30px rgba(59,130,246,.4);}
.hero-video-wrap video{width:100%; display:block;}

.section{padding:80px 0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 48px;}
.section-head h2{font-size:34px; font-weight:800; letter-spacing:-.5px; margin:0 0 12px;}
.section-head p{color:var(--muted); font-size:16px; line-height:1.6;}

.tool-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.tool-card{padding:26px 22px; text-align:left; transition:.25s; position:relative;}
.tool-card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 24px 60px -25px rgba(139,92,246,.55);}
.tool-card::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--radius); padding:1px;
  background:var(--grad-brand); opacity:0; transition:opacity .25s;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.tool-card:hover::before{opacity:1;}
.tool-card .icon{width:46px;height:46px;border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; transition:.25s;}
.tool-card:hover .icon{transform:scale(1.1) rotate(-4deg);}
.tool-card h3{font-size:16.5px; margin:0 0 8px; font-weight:800;}
.tool-card p{font-size:13.5px; color:var(--muted); line-height:1.5; margin:0 0 14px;}
.tool-card .go{font-size:13px; font-weight:700; color:var(--blue-light);}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.step{padding:26px 22px;}
.step .num{width:34px;height:34px;border-radius:10px; background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.3); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--blue-light); margin-bottom:14px;}
.step h4{font-size:15px; margin:0 0 6px;}
.step p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5;}

.stat-row{display:flex; justify-content:center; gap:64px; flex-wrap:wrap; padding:50px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.stat{text-align:center;}
.stat b{display:block; font-size:32px; font-weight:800; background:linear-gradient(135deg,var(--blue-light),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat span{font-size:13px; color:var(--muted);}

.cta-band{text-align:center; padding:90px 24px; border-radius:24px; background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(139,92,246,.10)); border:1px solid rgba(59,130,246,.3); margin:0 24px;}
.cta-band h2{font-size:32px; font-weight:800; margin:0 0 14px;}
.cta-band p{color:var(--muted); margin:0 0 28px;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border); padding:56px 0 30px; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-grid h5{font-size:12.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted-2); margin:0 0 14px;}
.footer-grid a{display:block; font-size:14px; color:var(--muted); margin-bottom:10px;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border); font-size:13px; color:var(--muted-2); flex-wrap:wrap; gap:10px;}

/* ---------- forms ---------- */
.form-page{min-height:calc(100vh - 68px); display:flex; align-items:center; justify-content:center; padding:60px 20px;}
.form-card{width:100%; max-width:420px; padding:36px;}
.form-card h1{font-size:24px; margin:0 0 6px; font-weight:800;}
.form-card p.sub{color:var(--muted); font-size:14px; margin:0 0 28px;}
.field-group{margin-bottom:16px;}
.field-group label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--muted);}
.input, textarea.input, select.input{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border-strong); color:var(--text);
  padding:12px 14px; border-radius:10px; font-size:14.5px; outline:none; transition:.15s;
}
.input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.18);}
.form-error{background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#fca5a5; padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px; display:none;}
.form-foot{text-align:center; font-size:13.5px; color:var(--muted); margin-top:20px;}

/* ---------- app shell (dashboard/builder etc) ---------- */
.app-shell{max-width:1320px; margin:0 auto; padding:32px 24px 80px;}
.app-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; flex-wrap:wrap; gap:16px;}
.app-head h1{font-size:28px; font-weight:800; margin:0 0 6px;}
.app-head p{color:var(--muted); margin:0; font-size:14.5px;}

.balance-card{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; margin-bottom:26px;}
.balance-card .num{font-size:34px; font-weight:800;}
.balance-card .lbl{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px;}

.quick-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:36px;}
.quick-card{padding:20px; text-align:center;}
.quick-card .icon{font-size:26px; margin-bottom:10px;}
.quick-card b{font-size:13.5px; display:block;}

.section-title-row{display:flex; align-items:center; justify-content:space-between; margin:36px 0 16px;}
.section-title-row h2{font-size:18px; font-weight:800; margin:0;}

.project-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.project-card{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.project-thumb{height:120px; background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.1)); display:flex; align-items:center; justify-content:center; font-size:30px; position:relative;}
.project-thumb .type-tag{position:absolute; top:10px; left:10px; font-size:10px;}
.project-body{padding:16px;}
.project-body b{font-size:14px; display:block; margin-bottom:4px;}
.project-body .meta{font-size:12px; color:var(--muted-2);}
.project-body .status{margin-top:10px;}
.empty-state{padding:50px 24px; text-align:center; color:var(--muted);}

.table{width:100%; border-collapse:collapse; font-size:13.5px;}
.table th{text-align:left; color:var(--muted-2); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;}
.table td{padding:12px; border-bottom:1px solid var(--border);}
.table tr:last-child td{border-bottom:none;}

/* ---------- pricing ---------- */
.pricing-toggle{display:flex; justify-content:center; margin-bottom:44px;}
.toggle-group{display:inline-flex; background:var(--panel); border:1px solid var(--border-strong); border-radius:12px; padding:4px;}
.toggle-group button{border:none; background:none; color:var(--muted); padding:9px 20px; border-radius:9px; font-weight:700; font-size:13.5px;}
.toggle-group button.active{background:var(--blue); color:#fff;}

.pack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pack-card{padding:24px; text-align:center; position:relative;}
.pack-card.featured{border-color:rgba(59,130,246,.5); box-shadow:var(--shadow-glow);}
.pack-card .badge-top{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:10.5px;}
.pack-card .credits{font-size:30px; font-weight:800; margin:12px 0 2px;}
.pack-card .credits small{font-size:13px; color:var(--muted); font-weight:600;}
.pack-card .price{font-size:15px; color:var(--muted); margin-bottom:18px;}
.pack-card .per{font-size:11.5px; color:var(--muted-2); margin-top:10px;}

/* ---------- builder ---------- */
.builder-shell{display:grid; grid-template-columns:380px 1fr; height:calc(100vh - 68px);}
.chat-col{border-right:1px solid var(--border); display:flex; flex-direction:column; background:var(--bg-alt);}
.chat-head{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.chat-head b{font-size:14.5px;}
.mode-toggle{display:flex; background:rgba(255,255,255,.04); border:1px solid var(--border-strong); border-radius:9px; padding:3px;}
.mode-toggle button{border:none; background:none; color:var(--muted); font-size:12px; font-weight:700; padding:6px 12px; border-radius:7px;}
.mode-toggle button.active{background:var(--blue); color:#fff;}

.chat-scroll{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px;}
.msg{max-width:92%; padding:12px 14px; border-radius:14px; font-size:13.8px; line-height:1.55;}
.msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; border-bottom-right-radius:4px;}
.msg.assistant{align-self:flex-start; background:var(--panel-2); border:1px solid var(--border); border-bottom-left-radius:4px;}
.msg.system{align-self:center; background:none; color:var(--muted-2); font-size:12px;}
.typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px;}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted); animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

.chat-input{padding:14px; border-top:1px solid var(--border);}
.chat-input .row{display:flex; gap:8px;}
.chat-input textarea{flex:1; resize:none; height:48px; padding-top:13px;}
.chat-suggest{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.chip{font-size:11.5px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--border-strong); color:var(--muted);}
.chip:hover{color:#fff; border-color:var(--blue-light);}

.preview-col{display:flex; flex-direction:column; background:#03050a;}
.preview-toolbar{padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.preview-toolbar .name-edit{background:none; border:none; color:#fff; font-weight:800; font-size:15px; max-width:260px;}
.preview-toolbar .right{display:flex; gap:8px; align-items:center;}
.device-toggle{display:flex; gap:4px; background:rgba(255,255,255,.04); border:1px solid var(--border-strong); border-radius:9px; padding:3px;}
.device-toggle button{border:none;background:none;color:var(--muted);padding:6px 10px;border-radius:7px;font-size:12px;}
.device-toggle button.active{background:rgba(59,130,246,.25); color:var(--blue-light);}
.preview-stage{flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:26px;}
.preview-frame-wrap{width:100%; max-width:1000px; height:100%; border-radius:14px; overflow:hidden; border:1px solid var(--border-strong); background:#fff; box-shadow:0 30px 80px -30px rgba(0,0,0,.6);}
.preview-frame-wrap.mobile{max-width:320px; background:none; border:none; box-shadow:none;}
.preview-stage iframe{width:100%; height:100%; border:none; min-height:640px;}

/* ---------- logos / video / marketing pages ---------- */
.gen-shell{display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start;}
.gen-sidebar{position:sticky; top:88px;}
.logo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.logo-tile{padding:18px; text-align:center; cursor:pointer; transition:.15s; position:relative;}
.logo-tile:hover{border-color:rgba(59,130,246,.5); transform:translateY(-2px);}
.logo-tile.selected{border-color:var(--blue); box-shadow:var(--shadow-glow);}
.logo-tile .swatch{background:#0b0f18; border-radius:10px; padding:14px; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.logo-tile svg{max-width:100%; max-height:100%;}
.logo-tile .pick{position:absolute; top:8px; right:8px; width:20px;height:20px;border-radius:50%; background:var(--blue); color:#fff; font-size:11px; display:none; align-items:center; justify-content:center;}
.logo-tile.selected .pick{display:flex;}

.demo-badge{position:absolute; bottom:8px; right:8px; font-size:9.5px; padding:2px 8px;}

.video-frame{border-radius:16px; overflow:hidden; border:1px solid var(--border-strong); background:#000; position:relative;}
.video-frame video{width:100%; display:block;}

.progress-wrap{padding:40px 24px; text-align:center;}
.progress-bar{height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; max-width:360px; margin:20px auto;}
.progress-bar .fill{height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .3s;}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .tool-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .pack-grid{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:repeat(2,1fr);}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .builder-shell{grid-template-columns:1fr; height:auto;}
  .chat-col{height:46vh;}
  .preview-stage{min-height:70vh;}
  .gen-shell{grid-template-columns:1fr;}
  .gen-sidebar{position:static;}
  .logo-grid{grid-template-columns:repeat(2,1fr);}
  .main-nav{display:none;}
  button.hamburger{display:inline-flex;}
  .hero h1{font-size:36px;}
  .hero p.lead{font-size:16px;}
}
@media (max-width: 640px){
  .quick-grid{grid-template-columns:repeat(2,1fr);}
  .project-grid{grid-template-columns:1fr;}
  .logo-grid{grid-template-columns:1fr 1fr;}
  .stat-row{gap:32px;}
  .header-actions .btn-sm span{display:none;}
}

/* ---------- header project switcher (Base44-style hover dropdown off the logo) ---------- */
.brand-switcher{position:relative; display:flex; align-items:center; gap:2px;}
.brand-caret{background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:6px 4px; line-height:1;}
.brand-caret:hover{color:#fff;}
.project-dropdown{
  position:absolute; top:calc(100% + 10px); left:0; width:300px; z-index:90;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(59,130,246,.08);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.brand-switcher:hover .project-dropdown, .brand-switcher.open .project-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.pd-head{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); padding:4px 6px 8px;}
.pd-list{max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-bottom:10px;}
.pd-empty{color:var(--muted-2); font-size:12.5px; padding:10px 6px;}
.pd-item{display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:9px; font-size:13px; font-weight:600;}
.pd-item:hover{background:rgba(59,130,246,.1);}
.pd-icon{font-size:15px; flex-shrink:0;}
.pd-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.pd-status{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.pd-status.pd-published{background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.8);}
.pd-newrow{display:flex; gap:6px; margin-bottom:8px;}
.pd-newrow .input{font-size:12.5px; padding:9px 10px;}
.pd-actions{border-top:1px solid var(--border); padding-top:10px;}

/* ---------- generic modal (Transfer Project, image crop selector) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(2,3,8,.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  width:100%; max-width:440px; background:var(--panel); border:1px solid var(--border-strong);
  border-radius:16px; padding:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:15px;}
.crop-modal-box{max-width:560px;}
.crop-stage{position:relative; width:100%; max-height:60vh; overflow:auto; border:1px solid var(--border); border-radius:10px; margin:12px 0; background:#000; user-select:none;}
.crop-stage img{display:block; max-width:100%; height:auto; cursor:crosshair; user-select:none; -webkit-user-drag:none;}
.crop-select{
  position:absolute; border:2px solid var(--blue-light); background:rgba(59,130,246,.18);
  box-shadow:0 0 0 2000px rgba(0,0,0,.35); pointer-events:none;
}
.crop-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}

/* ---------- Optimus Grind chat attachments ---------- */
.attach-btn{border:1px solid var(--border-strong); background:var(--panel-2); border-radius:10px; font-size:16px; padding:0 12px; align-self:stretch; flex-shrink:0;}
.attach-btn:hover{border-color:var(--blue-light);}
.pending-attach{display:none; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border-strong); border-radius:10px; padding:6px 10px; margin-bottom:8px; font-size:12.5px;}
.pending-attach img{width:28px; height:28px; object-fit:cover; border-radius:6px;}
.pending-attach .pa-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted);}
.pending-attach .pa-remove{background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px;}
.msg-attachment{display:block; margin-top:8px;}
.msg-attachment img{max-width:220px; max-height:220px; border-radius:10px; border:1px solid var(--border-strong);}
.msg-attachment .file-chip{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border:1px solid var(--border-strong); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--muted);}