/* ==========================================================================
   iViRTH — Design tokens
   Subject: a digital boardroom at night — brass seal, teal telemetry glow.
   ========================================================================== */
:root{
  --ink:        #0E1420;
  --ink-2:      #0B1019;
  --panel:      #161D2C;
  --panel-2:    #1D2740;
  --border:     #26314A;
  --border-soft:#1F2A40;
  --gold:       #C9A24B;
  --gold-soft:  #E2C168;
  --teal:       #3FD0C9;
  --coral:      #E2664D;
  --violet:     #9B8CE0;
  --text:       #EDEFF4;
  --muted:      #8B93A7;
  --muted-2:    #5D6780;

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 14px;
  --radius-sm: 8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 800px at 15% -10%, #182238 0%, var(--ink) 55%) fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; margin:0}
p{margin:0}
button{font-family:inherit}
::selection{background: rgba(201,162,75,.35)}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}
code, .mono{font-family:var(--font-mono)}

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

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 20px; border-radius:999px; font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#241a05;}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-teal{background:transparent; border-color:rgba(63,208,201,.5); color:var(--teal)}
.btn-teal:hover{background:rgba(63,208,201,.1)}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:8px}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ── Seal glyph (signature element) ─────────────────────────────────── */
.seal{
  --sz: 64px;
  width:var(--sz); height:var(--sz); position:relative; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; color:var(--gold-soft);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 45%),
    conic-gradient(from 90deg, #23304a, #1a2338 25%, #23304a 50%, #1a2338 75%, #23304a);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 0 0 1px rgba(201,162,75,.35), 0 0 24px rgba(201,162,75,.18);
  font-size: calc(var(--sz) * 0.34);
}
.seal.sm{--sz:40px}
.seal.pulse::after{
  content:''; position:absolute; inset:-6px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border:1px solid rgba(63,208,201,.5);
  animation: sealpulse 2.6s ease-in-out infinite;
}
@keyframes sealpulse{
  0%{opacity:.9; transform:scale(1)}
  70%{opacity:0; transform:scale(1.18)}
  100%{opacity:0; transform:scale(1.18)}
}
@media (prefers-reduced-motion: reduce){ .seal.pulse::after{animation:none} }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(14,20,32,.92), rgba(14,20,32,.75));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:18px; font-weight:600}
.brand small{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:22px; font-size:14px; color:var(--muted)}
.nav-links a:hover{color:var(--text)}

/* ── Landing hero ────────────────────────────────────────────────────── */
.hero{padding:76px 0 60px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); border:1px solid rgba(63,208,201,.35); padding:6px 12px; border-radius:999px; margin-bottom:20px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal); box-shadow:0 0 8px var(--teal)}
.hero h1{font-size:52px; line-height:1.04; letter-spacing:-0.02em; max-width:640px}
.hero h1 em{font-style:italic; color:var(--gold-soft)}
.hero p.lede{margin-top:20px; font-size:17px; color:var(--muted); max-width:520px}
.hero-actions{display:flex; gap:12px; margin-top:32px}
.domain-pill{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2)}
.domain-pill span{color:var(--teal)}

.hero-panel{
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius: var(--radius); padding:22px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.hero-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.hero-panel-head .label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.roster-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border-soft)}
.roster-row:first-of-type{border-top:none}
.roster-avatar{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none}
.roster-name{font-weight:600; font-size:13.5px}
.roster-blurb{color:var(--muted); font-size:12px; margin-top:1px}
.roster-tier{margin-left:auto; font-size:10.5px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em}

/* ── Sections ────────────────────────────────────────────────────────── */
.section{padding:64px 0}
.section-head{max-width:640px; margin-bottom:36px}
.section-head .kicker{color:var(--gold-soft); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; display:block}
.section-head h2{font-size:32px}
.section-head p{color:var(--muted); margin-top:12px}

.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr} .hero-grid{grid-template-columns:1fr}}

.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.card h3{font-size:17px; margin-bottom:8px}
.card p{color:var(--muted); font-size:13.5px}
.card .num{font-family:var(--font-display); font-size:15px; color:var(--gold-soft)}

.problem-list{display:grid; gap:10px; margin-top:8px}
.problem-list li{list-style:none; display:flex; gap:10px; color:var(--muted); font-size:14.5px}
.problem-list li::before{content:'—'; color:var(--coral); flex:none}

/* ── Pricing / licensing ─────────────────────────────────────────────── */
.tier-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; position:relative}
.tier-card.featured{border-color: rgba(201,162,75,.55); box-shadow:0 0 0 1px rgba(201,162,75,.15), 0 20px 50px -30px rgba(201,162,75,.3)}
.tier-card .tag{position:absolute; top:-11px; right:20px; background:var(--gold); color:#241a05; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px}
.tier-name{font-family:var(--font-display); font-size:20px}
.tier-price{font-size:28px; font-weight:700}
.tier-price small{font-size:13px; color:var(--muted); font-weight:500}
.tier-agents{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0}
.chip{font-size:11.5px; padding:4px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.tier-list{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:13.5px; color:var(--muted)}
.tier-list li::before{content:'✓ '; color:var(--teal)}

footer{border-top:1px solid var(--border-soft); padding:28px 0; color:var(--muted-2); font-size:13px}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}

/* ── Forms (onboarding + auth) ───────────────────────────────────────── */
.form-shell{max-width:640px; margin:0 auto; padding:60px 24px}
label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; letter-spacing:.02em}
input[type=text], input[type=email], input[type=number], input[type=url], select, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--ink-2); color:var(--text);
  font-family:var(--font-body); font-size:14px; margin-bottom:16px;
}
input:focus, select:focus, textarea:focus{border-color:var(--teal)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:13.5px; color:var(--muted)}
.checkbox-row input{width:auto; margin:3px 0 0}

.stepper{display:flex; gap:8px; margin-bottom:32px}
.stepper .dot{flex:1; height:4px; border-radius:4px; background:var(--border)}
.stepper .dot.active{background:var(--gold)}
.stepper .dot.done{background:var(--teal)}
.step-label{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px}
.step-title{font-size:24px; margin-bottom:6px}
.step-desc{color:var(--muted); font-size:13.5px; margin-bottom:26px}

.agent-pick{display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer}
.agent-pick.selected{border-color:var(--teal); background:rgba(63,208,201,.06)}
.agent-pick input{width:auto; margin:0}
.agent-pick .roster-avatar{width:30px;height:30px;font-size:14px}

/* ==========================================================================
   Dashboard — "Chat+" boardroom console
   ========================================================================== */
.app-shell{display:flex; min-height:100vh}
.app-topbar{
  position:fixed; top:0; left:0; right:0; height:56px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:0 18px;
  background:var(--ink-2); border-bottom:1px solid var(--border-soft);
}
.app-body{display:flex; width:100%; padding-top:56px; height:100vh}

.console{
  width:400px; flex:none; border-right:1px solid var(--border-soft); background:var(--ink-2);
  display:flex; flex-direction:column; height:calc(100vh - 56px);
}
.console-agents{padding:14px; border-bottom:1px solid var(--border-soft); overflow-y:auto; max-height:230px}
.agent-btn{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--text); text-align:left; cursor:pointer; margin-bottom:4px; font-size:13.5px;
}
.agent-btn:hover{background:var(--panel)}
.agent-btn.active{background:var(--panel-2); border-color:var(--border)}
.agent-btn .roster-avatar{width:26px; height:26px; font-size:13px}
.agent-btn .locked{margin-left:auto; color:var(--muted-2); font-size:11px}
.agent-btn small{color:var(--muted-2); display:block; font-size:10.5px}

.mode-tabs{display:flex; gap:4px; padding:10px 14px; border-bottom:1px solid var(--border-soft)}
.mode-tab{flex:1; padding:8px 6px; border-radius:8px; text-align:center; font-size:12px; color:var(--muted); cursor:pointer; border:1px solid transparent}
.mode-tab.active{background:var(--panel-2); color:var(--teal); border-color:var(--border)}

.console-log{flex:1; overflow-y:auto; padding:16px}
.msg{margin-bottom:16px; display:flex; gap:10px}
.msg .roster-avatar{width:26px;height:26px;font-size:12px; flex:none}
.msg-body{background:var(--panel); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px; font-size:13.5px; max-width:280px; white-space:pre-wrap}
.msg.user{flex-direction:row-reverse}
.msg.user .msg-body{background:var(--panel-2); border-color:rgba(201,162,75,.25)}
.msg .meta{font-size:10px; color:var(--muted-2); margin-top:4px}

.console-input{padding:12px; border-top:1px solid var(--border-soft); display:flex; gap:8px}
.console-input textarea{margin:0; resize:none; min-height:44px; max-height:120px}
.console-input .send{flex:none}

.interrupt{
  margin:10px 14px; padding:12px; border:1px solid rgba(226,102,77,.4); background:rgba(226,102,77,.08); border-radius:10px; font-size:12.5px;
}
.interrupt .row{display:flex; gap:8px; margin-top:10px}

.canvas{flex:1; overflow-y:auto; padding:22px; background:
  radial-gradient(900px 500px at 100% 0%, rgba(63,208,201,.05), transparent 60%);
}
.canvas-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.canvas-head h2{font-size:20px; display:flex; align-items:center; gap:10px}
.canvas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:1100px){.canvas-grid{grid-template-columns:repeat(2,1fr)} .console{width:320px}}
.metric-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}
.metric-card .k{font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em}
.metric-card .v{font-family:var(--font-display); font-size:22px; margin-top:6px}
.metric-card .t{font-size:11.5px; color:var(--teal); margin-top:4px}

.report-block{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; margin-top:14px; white-space:pre-wrap; font-size:13.5px; line-height:1.6}
.task-card{background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:8px}
.task-card .owner{font-size:11px; color:var(--gold-soft); text-transform:uppercase; letter-spacing:.05em}

.badge-plan{font-family:var(--font-mono); font-size:11px; color:var(--gold-soft); border:1px solid rgba(201,162,75,.4); padding:3px 9px; border-radius:999px}
.small-muted{color:var(--muted-2); font-size:12px}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--teal);animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.empty-canvas{display:flex; flex-direction:column; align-items:center; justify-content:center; height:60%; text-align:center; color:var(--muted)}