/* ============================================================
   Ticaga — shared design system (Direction D: Technical × Warm)
   Manrope + JetBrains Mono + Instrument Serif · lime on charcoal/cream
   Used by: index.html, careers.html, about.html
   ============================================================ */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}

/* ===== Tokens ===== */
.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.container-narrow{max-width:920px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* ===== Logo ===== */
.logo{display:inline-flex;align-items:center;gap:8px}
.logo-img{height:28px; width:auto;}
.logo[data-variant="full"] .logo-img{content:var(--logo-src)}
.logo[data-variant="dot"] .logo-img{content:var(--logo-src)}
.logo[data-variant="dot"]::after{
  content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); align-self:flex-end; margin-bottom:6px;
}
.logo[data-variant="sticker"]{background:var(--accent); padding:7px 12px; border-radius:8px; gap:0;}
.logo[data-variant="sticker"] .logo-img{height:18px; filter:brightness(0); content:url('../img/ticaga-logo.svg');}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* ===== Nav ===== */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500}
.nav-links{align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}

/* Nav dropdown */
.nav-dd{position:relative}
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger{color:var(--text)}
.nav-dd-chev{font-size:10px; opacity:0.7; transition:transform .15s ease}
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{transform:rotate(180deg)}
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s; z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{box-shadow:0 16px 40px rgba(0,0,0,0.4)}
.nav-dd::before{content:''; position:absolute; left:0; right:0; top:100%; height:14px}
.nav-dd:hover > .nav-dd-panel, .nav-dd.is-open > .nav-dd-panel, .nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px; text-decoration:none;
  color:var(--text) !important; font-weight:500;
}
.nav-dd-item:hover{background:var(--surface-2)}
.nav-dd-all{background:color-mix(in oklch, var(--accent) 8%, var(--surface)); margin-bottom:4px}
.nav-dd-all .nav-dd-lbl{color:var(--accent) !important; font-weight:700}
.nav-dd-lbl{font-size:14px}
.nav-dd-sub{font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em}
.nav-right{display:flex; align-items:center; gap:12px}
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* ===== Home hero ===== */
.hero{padding:88px 0 60px}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 6px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:12px; margin-bottom:32px;
  color:inherit; text-decoration:none;
}
.hero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
h1.hero-title{
  font-weight:700; font-size:96px; line-height:0.95;
  letter-spacing:-0.045em; margin:0 0 24px; max-width:1100px;
}
h1.hero-title em{color:var(--muted)}
.hero-lede{font-size:19px; line-height:1.5; color:var(--muted); max-width:600px; margin:0 0 36px}
.hero-actions{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.hero-meta{
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted);
  display:flex; gap:20px; flex-wrap:wrap;
}

/* ===== Hero product split ===== */
.hero-product{margin-top:72px; display:grid; grid-template-columns: 380px 1fr; gap:16px; position:relative;}
.terminal{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  font-family:'JetBrains Mono', monospace; font-size:12px; line-height:1.75; padding:18px 20px;
}
.term-chrome{display:flex; gap:6px; margin-bottom:14px; align-items:center}
.term-chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-chrome i:nth-child(1){background:#FF5F57}
.term-chrome i:nth-child(2){background:#FEBC2E}
.term-chrome i:nth-child(3){background:#28C840}
.term-path{margin-left:auto; color:var(--faint); font-size:11px}
.term-prompt{color:var(--faint)}
.term-ok{color:#10B981}
.term-divider{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border)}
.term-callout-eyebrow{color:var(--accent); font-size:11px; letter-spacing:0.04em; margin-bottom:8px}
.term-callout{font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; color:var(--text); line-height:1.3}
.dash-frame{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); position:relative; box-shadow:var(--shadow);}
.dash-frame img{width:100%; display:block}
.hero-sticker{
  position:absolute; top:-22px; right:-14px;
  background:var(--accent); color:var(--accent-ink);
  border-radius:10px; padding:10px 14px; transform:rotate(4deg);
  font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; font-weight:400;
  box-shadow:0 12px 30px rgba(14,19,17,0.18); border:1.5px solid var(--accent-ink);
}

/* ===== Stats bar ===== */
.stats{padding:32px 0; border-block:1px solid var(--border); background:var(--surface)}
.stats-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px}
.stat{display:flex; align-items:baseline; gap:14px}
.stat .num{font-weight:700; font-size:38px; letter-spacing:-0.035em; line-height:1}
.stat .lbl{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase;}

/* ===== Sections ===== */
section.block{padding:96px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head.center{margin-inline:auto; text-align:center}
.block-head.center p{margin-inline:auto}
.block-head h2{font-weight:700; font-size:56px; line-height:1.02; letter-spacing:-0.04em; margin:14px 0 16px;}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* ===== Feature grid (home) ===== */
.feat-top{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px}
.feat-card{border-radius:16px; padding:32px; min-height:340px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}
.feat-big{background:var(--accent); color:var(--accent-ink); padding:36px}
.feat-big h3{font-weight:700; font-size:38px; letter-spacing:-0.035em; line-height:1.02; margin:0 0 14px}
.feat-big p{font-size:15px; line-height:1.55; margin:0; max-width:440px; opacity:0.85}
.feat-big .feat-eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; margin-bottom:14px; opacity:0.65}
.keys{display:inline-flex; gap:8px; align-items:center; font-family:'JetBrains Mono', monospace; font-size:11px; padding:10px 12px; background:rgba(14,19,17,0.08); border-radius:8px; max-width:fit-content; margin-top:24px;}
.keys .sep{opacity:0.5}
.keys .note{margin-left:8px; opacity:0.7}
.feat-code{background:var(--code-bg); color:var(--code-text); border:1px solid var(--border);}
.feat-code .feat-eyebrow{color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; margin-bottom:14px}
.feat-code h3{font-weight:600; font-size:24px; letter-spacing:-0.025em; line-height:1.1; margin:0 0 14px}
.codeblock{font-family:'JetBrains Mono', monospace; font-size:11.5px; line-height:1.75; color:#9BA39E; background:rgba(255,255,255,0.04); padding:14px 16px; border-radius:8px; border:1px solid rgba(199,244,98,0.1);}
.codeblock .tag{color:#8FB3FF}
.codeblock .attr{color:var(--accent)}
.codeblock .str{color:#FFE08F}
.feat-code a{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-decoration:none; letter-spacing:0.04em}
.feat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.feat-cell{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; display:flex; flex-direction:column; min-height:220px;}
.feat-cell .feat-eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.06em; margin-bottom:12px}
.feat-cell h3{font-weight:700; font-size:20px; letter-spacing:-0.02em; margin:0 0 8px}
.feat-cell p{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0}
.feat-cmd{margin-top:auto; padding-top:18px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.02em; display:flex; align-items:center; gap:8px;}
.feat-cmd .sigil{color:var(--faint)}

/* ===== Compare (home) ===== */
.compare-head{display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:end; margin-bottom:40px}
.compare-head h2{font-weight:700; font-size:48px; letter-spacing:-0.035em; line-height:1; margin:14px 0 0}
.compare-head p{font-size:16px; color:var(--muted); line-height:1.55; margin:0; max-width:520px; justify-self:end}
.diff{font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.85; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px 28px;}
.diff .hdr{color:var(--muted); padding-bottom:8px; margin-bottom:8px; border-bottom:1px dashed var(--border)}
.diff .row{display:flex; gap:14px; padding:2px 10px; margin:0 -10px; border-radius:4px}
.diff .row .sign{width:12px}
.diff .minus{background:color-mix(in oklch, #F87171 8%, transparent)} .diff .minus .sign{color:#F87171}
.diff .plus{background:color-mix(in oklch, #10B981 10%, transparent)} .diff .plus .sign{color:#10B981}
.diff .gap{height:8px}

/* ===== Quote (home) ===== */
.quote-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:56px 56px 48px; position:relative;}
.quote-watermark{position:absolute; top:24px; right:32px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em;}
.quote-card p.q{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:42px; line-height:1.15; letter-spacing:-0.02em; margin:0 0 28px; max-width:920px;}
.quote-attr{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-ink));}
.quote-attr .name{font-weight:700; font-size:14px}
.quote-attr .role{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.04em}
.logos{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.logos span{font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em; padding:4px 10px; border:1px solid var(--border); border-radius:99px;}

/* ===== Pricing (home) ===== */
.price-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.price{border:1px solid var(--border); border-radius:14px; padding:28px; background:var(--surface); position:relative;}
.price.hot{border-color:var(--accent); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);}
.price .badge-rec{position:absolute; top:-12px; left:24px; background:var(--accent); color:var(--accent-ink); font-family:'JetBrains Mono', monospace; font-size:10px; padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* ===== Big CTA ===== */
.cta-wrap{padding:40px 0 100px}
.cta{background:var(--code-bg); color:#F2EFE6; border-radius:24px; padding:72px 56px; position:relative; overflow:hidden; border:1px solid var(--border);}
.cta .sun{position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%; background:var(--accent); opacity:0.85;}
.cta .ready-tag{position:absolute; top:36px; right:36px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:64px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px;}
.cta p{font-size:17px; color:#9BA39E; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* ===== Footer ===== */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500;}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent);}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{border-top:1px solid var(--border); padding-top:20px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* ===== Theme toggle (FAB) ===== */
.theme-fab{position:fixed; bottom:24px; right:24px; z-index:50; display:flex; align-items:center; gap:4px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.theme-fab button{border:none; background:transparent; padding:8px 14px; border-radius:999px; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}
/* theme toggle docked in the navbar (matches site chrome) */
.nav .theme-fab{position:static; bottom:auto; right:auto; box-shadow:none; padding:3px}
.nav .theme-fab button{padding:6px 10px}

/* ============================================================
   PAGE COMPONENTS — careers + about
   ============================================================ */

/* ===== Page hero (charcoal banner) ===== */
.page-hero{
  background:var(--code-bg); color:#F2EFE6;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(199,244,98,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199,244,98,0.05) 1px, transparent 1px);
  background-size:56px 56px; pointer-events:none;
}
.page-hero .sun{
  position:absolute; top:-120px; right:-80px; width:340px; height:340px; border-radius:50%;
  background:var(--accent); opacity:0.16; filter:blur(8px); pointer-events:none;
}
.page-hero-inner{position:relative; z-index:1; padding:96px 0 88px}
.page-hero .eyebrow{color:var(--accent)}
.page-hero h1{
  font-weight:700; font-size:84px; line-height:0.96; letter-spacing:-0.045em;
  margin:16px 0 0; max-width:14ch;
}
.page-hero h1 .serif-it{color:var(--accent)}
.page-hero .lede{
  font-size:19px; line-height:1.5; color:#9BA39E; max-width:560px; margin:24px 0 0;
}
.page-hero .lede strong{color:#F2EFE6; font-weight:600}
.page-hero .hero-cmd{
  margin-top:36px; display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:#9BA39E;
  background:rgba(255,255,255,0.04); border:1px solid rgba(199,244,98,0.12);
  padding:10px 14px; border-radius:8px;
}
.page-hero .hero-cmd .sigil{color:var(--accent)}

/* ===== Two-column prose (mission) ===== */
.prose-split{display:grid; grid-template-columns:0.8fr 1.4fr; gap:64px; align-items:start}
.prose-split .lead-col h2{font-weight:700; font-size:40px; letter-spacing:-0.035em; line-height:1.04; margin:14px 0 0}
.prose-split .body-col p{font-size:17px; line-height:1.65; color:var(--text); margin:0 0 20px; max-width:62ch}
.prose-split .body-col p:last-child{margin-bottom:0}
.prose-split .body-col p.muted{color:var(--muted)}

/* ===== Vacancies empty-state (terminal) ===== */
.vacancy-term{
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.85;
  background:var(--code-bg); color:#9BA39E; border:1px solid var(--border);
  border-radius:12px; padding:24px 28px;
}
.vacancy-term .chrome{display:flex; gap:6px; margin-bottom:16px; align-items:center}
.vacancy-term .chrome i{width:9px;height:9px;border-radius:99px;display:inline-block}
.vacancy-term .chrome i:nth-child(1){background:#FF5F57}
.vacancy-term .chrome i:nth-child(2){background:#FEBC2E}
.vacancy-term .chrome i:nth-child(3){background:#28C840}
.vacancy-term .chrome .path{margin-left:auto; color:var(--faint); font-size:11px}
.vacancy-term .prompt{color:var(--faint)}
.vacancy-term .ok{color:#10B981}
.vacancy-term .out{color:#F2EFE6}
.vacancy-term .hint{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--border);
  font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; color:#F2EFE6; line-height:1.4;
}
.vacancy-term a{color:var(--accent); text-decoration:none}

/* ===== Benefits grid ===== */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.benefit{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:28px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.benefit:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.benefit .ico{
  width:44px; height:44px; border-radius:12px; background:var(--accent);
  display:grid; place-items:center; color:var(--accent-ink); flex:none;
}
.benefit .ico svg{width:22px; height:22px; display:block}
.benefit h3{font-weight:700; font-size:21px; letter-spacing:-0.02em; margin:0}
.benefit .sub{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.04em; margin-top:5px}
.benefit p{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0}
.benefit p strong{color:var(--text); font-weight:700}

/* ===== Accordion ===== */
.accordion{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface)}
.acc-item + .acc-item{border-top:1px solid var(--border)}
.acc-head{
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:inherit; color:var(--text);
}
.acc-head:hover{background:color-mix(in oklch, var(--accent) 6%, transparent)}
.acc-head .title{display:flex; align-items:center; gap:14px; font-weight:600; font-size:18px; letter-spacing:-0.01em}
.acc-head .num{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.04em}
.acc-icon{
  flex:none; width:24px; height:24px; position:relative; color:var(--muted);
  transition:transform .25s ease, color .15s ease;
}
.acc-icon::before, .acc-icon::after{
  content:''; position:absolute; background:currentColor; border-radius:2px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.acc-icon::before{width:14px; height:2px}
.acc-icon::after{width:2px; height:14px; transition:transform .25s ease, opacity .2s ease}
.acc-item[open] .acc-icon{color:var(--text)}
.acc-item[open] .acc-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.acc-body{max-height:0; overflow:hidden; transition:max-height .35s ease}
.acc-body-inner{padding:2px 28px 26px}
.acc-body p{font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 14px; max-width:80ch}
.acc-body p:last-child{margin-bottom:0}
.acc-body strong{color:var(--text); font-weight:700}

/* ===== Team grid (about) ===== */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.team-card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.team-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.team-portrait{aspect-ratio:1/1.05; position:relative; overflow:hidden; background:var(--surface-2)}
.team-portrait img{width:100%; height:100%; object-fit:cover; display:block}
/* branded placeholder portrait */
.team-portrait.brand{
  background:var(--code-bg);
  display:grid; place-items:center; position:relative;
}
.team-portrait.brand::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(199,244,98,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199,244,98,0.06) 1px, transparent 1px);
  background-size:28px 28px; opacity:0.7;
}
.team-portrait.brand .sun{
  position:absolute; top:-50px; right:-50px; width:160px; height:160px; border-radius:50%;
  background:var(--accent); opacity:0.14; filter:blur(6px);
}
.team-portrait .initials{
  font-weight:800; font-size:76px; letter-spacing:-0.04em; color:var(--accent); z-index:1;
  font-family:'Manrope', sans-serif;
}
.team-portrait .logo-tile{width:54%; z-index:1; opacity:0.95}
.team-portrait .glyph{position:absolute; bottom:18px; right:18px; width:40px; height:40px; opacity:0.4; z-index:1}
.team-portrait .glyph img{width:100%; height:100%; object-fit:contain}
.team-portrait .photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; display:block}
.team-body{padding:24px}
.team-body h3{font-weight:700; font-size:24px; letter-spacing:-0.025em; margin:0}
.team-body .role{
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent);
  letter-spacing:0.06em; text-transform:uppercase; margin:8px 0 14px;
}
.team-body p{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 18px}
.team-social{display:flex; gap:10px}
.team-social a{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  display:grid; place-items:center; color:var(--muted); transition:all .15s ease;
}
.team-social a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.team-social svg{width:16px; height:16px}
/* clickable card affordance */
.team-card{cursor:pointer; outline:none}
.team-card:focus-visible{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.team-view{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent);
  letter-spacing:0.04em; display:flex; align-items:center; gap:8px;
}
.team-extra{display:none}
.team-card .team-social{display:none}

/* ===== Team profile modal ===== */
.tm-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:color-mix(in oklch, var(--code-bg) 70%, transparent);
  backdrop-filter:blur(6px);
}
.tm-overlay.is-open{display:flex}
.tm-dialog{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  max-width:720px; width:100%; max-height:88vh; overflow:auto; position:relative;
  box-shadow:var(--shadow); display:grid; grid-template-columns:260px 1fr;
}
.tm-dialog .tm-portrait-wrap{position:relative; overflow:hidden; border-radius:20px 0 0 20px}
.tm-dialog .team-portrait{height:100%; width:100%; aspect-ratio:auto; border-radius:20px 0 0 20px}
.tm-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); display:grid; place-items:center;
  font-size:16px; line-height:1;
}
.tm-close:hover{border-color:var(--border-strong); color:var(--text)}
.tm-body{padding:32px 32px 30px}
.tm-eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.06em; margin-bottom:12px}
.tm-name{font-weight:700; font-size:28px; letter-spacing:-0.025em; margin:0}
.tm-name .muted{font-weight:600}
.tm-role{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; margin:8px 0 18px}
.tm-bio p{font-size:14.5px; line-height:1.65; color:var(--text); margin:0 0 14px}
.tm-bio p.muted{color:var(--muted)}
.tm-sect{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin:22px 0 12px}
.tm-focus{display:flex; flex-wrap:wrap; gap:8px}
.tm-focus span{font-family:'JetBrains Mono', monospace; font-size:11px; padding:5px 11px; border:1px solid var(--border); border-radius:99px; color:var(--muted); white-space:nowrap}
.tm-meta{margin-top:20px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px}
.tm-meta .dot{width:5px; height:5px; border-radius:99px; background:var(--accent)}
.tm-social{display:flex; gap:10px; margin-top:22px}
.tm-social a{width:36px; height:36px; border-radius:8px; border:1px solid var(--border); display:grid; place-items:center; color:var(--muted)}
.tm-social a:hover{border-color:var(--accent); color:var(--accent)}
.tm-social svg{width:16px; height:16px}
@media (max-width: 620px){
  .tm-dialog{grid-template-columns:1fr}
  .tm-dialog .team-portrait{border-radius:20px 20px 0 0; aspect-ratio:16/10}
  .tm-body{padding:24px}
}

/* ===== About company facts band ===== */
.about-facts{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface)}
.about-facts .fact{padding:24px 28px; border-right:1px solid var(--border)}
.about-facts .fact:last-child{border-right:none}
.about-facts .fact .v{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin-bottom:6px}
.about-facts .fact .k{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase}

/* ===== About values strip ===== */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.value{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px;
}
.value .k{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.06em; margin-bottom:12px}
.value h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 8px}
.value p{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  h1.hero-title{font-size:72px}
  .page-hero h1{font-size:60px}
  .hero-product{grid-template-columns:1fr;}
  .feat-top{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .compare-head{grid-template-columns:1fr; gap:16px}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:1fr}
  .about-facts{grid-template-columns:repeat(2,1fr)}
  .prose-split{grid-template-columns:1fr; gap:24px}
}
@media (max-width: 720px){
  .nav-links{display:none}
  h1.hero-title{font-size:48px}
  .page-hero h1{font-size:44px}
  .page-hero-inner{padding:64px 0 56px}
  .about-facts{grid-template-columns:1fr}
  .about-facts .fact{border-right:none; border-bottom:1px solid var(--border)}
  .about-facts .fact:last-child{border-bottom:none}
  .block-head h2, .compare-head h2{font-size:36px}
  .quote-card{padding:32px 24px}
  .quote-card p.q{font-size:28px}
  .cta{padding:48px 28px}
  .cta h2{font-size:40px}
  .cta .actions{flex-direction:column; align-items:stretch}
  .cta .actions .btn{width:100%; justify-content:center; text-align:center}
  section.block{padding:64px 0}
  .feat-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .container, .container-narrow{padding:0 20px}
  header.nav{padding:14px 20px}
}

/* ============================================================
   LEGAL PAGES — terms · privacy · eula
   ============================================================ */

/* compact hero variant */
.page-hero.legal-hero .page-hero-inner{padding:72px 0 64px}
.page-hero.legal-hero h1{font-size:64px; max-width:18ch}
.legal-hero .hero-cmds{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}

/* doc switcher pills in hero */
.legal-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; position:relative; z-index:1}
.legal-tabs a{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.02em;
  color:#9BA39E; text-decoration:none; padding:8px 14px; border-radius:8px;
  border:1px solid rgba(199,244,98,0.12); background:rgba(255,255,255,0.04);
  transition:color .15s ease, border-color .15s ease;
}
.legal-tabs a:hover{color:#F2EFE6; border-color:rgba(199,244,98,0.3)}
.legal-tabs a[aria-current="page"]{color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700}

/* layout: sticky TOC + prose */
.legal-layout{
  display:grid; grid-template-columns:248px 1fr; gap:64px;
  padding:96px 0 112px; align-items:start;
}
.legal-toc{position:sticky; top:96px}
.legal-toc .toc-title{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.legal-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px}
.legal-toc li{counter-increment:toc}
.legal-toc a{
  display:flex; gap:10px; align-items:baseline; text-decoration:none;
  padding:7px 12px; border-radius:8px; border-left:2px solid transparent;
  font-size:13.5px; line-height:1.35; color:var(--muted);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.legal-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--faint);
  flex:none; padding-top:1px;
}
.legal-toc a:hover{color:var(--text); background:var(--surface-2)}
.legal-toc a.is-active{color:var(--text); border-left-color:var(--accent); background:color-mix(in oklch, var(--accent) 7%, transparent)}
.legal-toc a.is-active::before{color:var(--accent)}

/* TL;DR summary card */
.legal-summary{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:28px 30px; margin-bottom:48px; position:relative; overflow:hidden;
}
.legal-summary .tldr-tag{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em;
  color:var(--accent); margin-bottom:14px;
}
.legal-summary h2{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 16px}
.legal-summary ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.legal-summary li{
  display:flex; gap:12px; font-size:14.5px; line-height:1.55; color:var(--text);
}
.legal-summary li::before{
  content:'→'; color:var(--accent); font-family:'JetBrains Mono', monospace;
  font-weight:700; flex:none;
}
.legal-summary .disclaimer{
  margin:20px 0 0; padding-top:18px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11.5px; line-height:1.6;
  color:var(--muted);
}

/* prose */
.legal-prose{max-width:760px}
.legal-section{padding:36px 0; border-top:1px solid var(--border); scroll-margin-top:96px}
.legal-section:first-of-type{border-top:none; padding-top:0}
.legal-section > .sec-num{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em;
  color:var(--accent); margin-bottom:10px;
}
.legal-section h2{font-weight:700; font-size:28px; letter-spacing:-0.025em; line-height:1.1; margin:0 0 18px}
.legal-section h3{font-weight:700; font-size:17px; letter-spacing:-0.01em; margin:26px 0 10px}
.legal-prose p{font-size:15.5px; line-height:1.7; color:var(--muted); margin:0 0 16px}
.legal-prose p:last-child{margin-bottom:0}
.legal-prose strong{color:var(--text); font-weight:700}
.legal-prose a:not(.btn){color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--accent) 40%, transparent)}
.legal-prose a:not(.btn):hover{border-bottom-color:var(--accent)}
.legal-prose ul, .legal-prose ol{margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.legal-prose li{position:relative; padding-left:24px; font-size:15.5px; line-height:1.6; color:var(--muted)}
.legal-prose ul li::before{content:'—'; color:var(--accent); font-family:'JetBrains Mono', monospace; position:absolute; left:0; top:0}
.legal-prose ol{counter-reset:li}
.legal-prose ol li{counter-increment:li}
.legal-prose ol li::before{content:counter(li); color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:12px; position:absolute; left:0; top:2px}
.legal-prose li strong{color:var(--text)}

/* definition rows (used in privacy / eula) */
.def-list{border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:0 0 16px}
.def-row{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:18px 22px; border-top:1px solid var(--border)}
.def-row:first-child{border-top:none}
.def-row .dt{font-weight:700; font-size:14px; color:var(--text)}
.def-row .dt .sub{display:block; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); letter-spacing:0.04em; margin-top:4px; font-weight:500}
.def-row .dd{font-size:14.5px; line-height:1.6; color:var(--muted)}

/* callout note inside prose */
.legal-note{
  background:var(--code-bg); color:#D7DACE; border:1px solid var(--border);
  border-radius:12px; padding:20px 24px; margin:0 0 16px;
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.7;
}
.legal-note .note-tag{color:var(--accent); display:block; margin-bottom:8px; font-size:11px; letter-spacing:0.06em}
.legal-note strong{color:#F2EFE6}

/* footer legal sub-row */
.foot-legal{
  display:flex; flex-wrap:wrap; gap:18px; margin-left:auto;
}
.foot-legal a{color:var(--muted); text-decoration:none}
.foot-legal a:hover, .foot-legal a[aria-current="page"]{color:var(--accent)}

@media (max-width: 1080px){
  .legal-layout{grid-template-columns:1fr; gap:0; padding:80px 0 96px}
  .legal-toc{position:static; margin-bottom:40px; padding-bottom:32px; border-bottom:1px solid var(--border)}
  .legal-toc ol{display:grid; grid-template-columns:1fr 1fr; gap:2px}
  .page-hero.legal-hero h1{font-size:48px}
}
@media (max-width: 720px){
  .legal-layout{padding:56px 0 72px}
  .page-hero.legal-hero h1{font-size:38px}
  .legal-toc ol{grid-template-columns:1fr}
  .legal-section h2{font-size:23px}
  .def-row{grid-template-columns:1fr; gap:6px}
  .foot-legal{margin-left:0}
}

/* ===== Extracted from Ticaga Homepage.html ===== */
:root[data-theme="light"]{
    --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
    --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
    --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
    --accent:#7C7AED; --accent-ink:#0E0E1F;
    --grid:rgba(19,19,38,0.025);
    --code-bg:#131326; --code-text:#ECEAF8;
    --shadow:0 30px 80px rgba(124,122,237,0.16);
    --logo-src:url('../img/ticaga-colour.svg');
  }
  :root[data-theme="dark"]{
    --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
    --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
    --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
    --accent:#A09EF5; --accent-ink:#0E0E1F;
    --grid:rgba(160,158,245,0.05);
    --code-bg:#0B0A14; --code-text:#ECEAF8;
    --shadow:0 30px 80px rgba(160,158,245,0.14);
    --logo-src:url('../img/ticaga-logo.svg');
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg); color:var(--text);
    font-family:'Manrope', system-ui, sans-serif;
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit}
  button{font-family:inherit}
  img{max-width:100%;display:block}

  /* ===== Tokens ===== */
  .mono{font-family:'JetBrains Mono', ui-monospace, monospace}
  .serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
  .container{max-width:1280px; margin:0 auto; padding:0 32px}
  .muted{color:var(--muted)}
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11px;
    color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
  }
  .eyebrow-accent{color:var(--accent)}

  /* ===== Logo ===== */
  .logo{display:inline-flex;align-items:center;gap:8px}
  .logo-img{
    height:28px; width:auto;
    /* swap colour vs white version via CSS variable masking trick */
  }
  .logo[data-variant="full"] .logo-img{content:var(--logo-src)}
  .logo[data-variant="dot"] .logo-img{content:var(--logo-src)}
  .logo[data-variant="dot"]::after{
    content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--accent); align-self:flex-end; margin-bottom:6px;
  }
  .logo[data-variant="sticker"] {
    background:var(--accent); padding:7px 12px; border-radius:8px; gap:0;
  }
  .logo[data-variant="sticker"] .logo-img{
    height:18px; filter:brightness(0); content:url('../img/ticaga-logo.svg');
  }
  /* Fallback for browsers without `content` on img (Firefox): replace src via JS */

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 20px; border-radius:8px; border:1px solid transparent;
    font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent); color:var(--accent-ink)}
  .btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
  .btn-ghost{
    background:transparent; color:var(--text); border-color:var(--border);
    font-family:'JetBrains Mono', monospace; font-weight:500;
  }
  .btn-ghost:hover{border-color:var(--border-strong)}
  .btn-sm{padding:9px 16px; font-size:13px}

  /* ===== Nav ===== */
  header.nav{
    position:sticky; top:0; z-index:20;
    padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--border);
    background: color-mix(in oklch, var(--bg) 85%, transparent);
    backdrop-filter:blur(12px);
  }
  .nav-left{display:flex; align-items:center; gap:36px}
  .nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
  .nav-links a{color:var(--muted); text-decoration:none}
  .nav-links a:hover{color:var(--text)}

  /* Nav dropdown */
  .nav-dd{ position:relative }
  .nav-dd-trigger{
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--muted); font:inherit; font-weight:500;
    display:inline-flex; align-items:center; gap:4px;
  }
  .nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger{ color:var(--text) }
  .nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
  .nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
  .nav-dd-panel{
    position:absolute; top:100%; left:-12px; margin-top:14px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:8px; min-width:280px;
    box-shadow:0 16px 40px rgba(19,19,38,0.10);
    opacity:0; visibility:hidden; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index:30;
  }
  :root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
  .nav-dd::before{
    content:''; position:absolute; left:0; right:0; top:100%; height:14px;
  }
  .nav-dd:hover > .nav-dd-panel,
  .nav-dd.is-open > .nav-dd-panel,
  .nav-dd:focus-within > .nav-dd-panel{
    opacity:1; visibility:visible; transform: translateY(0);
  }
  .nav-dd-item{
    display:flex !important; flex-direction:column; gap:2px;
    padding:10px 14px; border-radius:8px;
    text-decoration:none; color:var(--text) !important;
    font-weight:500;
  }
  .nav-dd-item:hover{ background:var(--surface-2) }
  .nav-dd-all{
    background: color-mix(in oklch, var(--accent) 8%, var(--surface));
    margin-bottom:4px;
  }
  .nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
  .nav-dd-lbl{ font-size:14px }
  .nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
  .nav-right{display:flex; align-items:center; gap:12px}
  .status-pill{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
    padding:4px 10px; border:1px solid var(--border); border-radius:6px;
    letter-spacing:0.04em;
  }
  .status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
  .signin{font-size:14px; color:var(--text); text-decoration:none}

  /* ===== Hero ===== */
  .hero{padding:88px 0 60px; position:relative}
  .hero-inner{position:relative}
  @keyframes terminalFadeIn{
    from{opacity:0; transform:translateY(12px)}
    to{opacity:1; transform:translateY(0)}
  }
  .hero-terminal{
    position:absolute; top:88px; right:0; width:380px; z-index:3;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    font-family:'JetBrains Mono', monospace; font-size:12px; line-height:1.75;
    padding:18px 20px; box-shadow:0 30px 80px rgba(19,19,38,0.14);
    animation: terminalFadeIn 1.1s cubic-bezier(.2,.7,.2,1) 0.35s both;
  }
  :root[data-theme="dark"] .hero-terminal{box-shadow:0 30px 80px rgba(0,0,0,0.5)}
  @media (max-width: 1180px){ .hero-terminal{display:none} }
  .hero-badge{
    display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 6px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
    font-size:12px; margin-bottom:32px;
  }
  .hero-badge .tag{
    background:var(--accent); color:var(--accent-ink);
    font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
    padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
  }
  h1.hero-title{
    font-weight:700; font-size:96px; line-height:0.95;
    letter-spacing:-0.045em; margin:0 0 24px; max-width:1100px;
  }
  h1.hero-title em{color:var(--muted)}
  .hero-lede{font-size:19px; line-height:1.5; color:var(--muted); max-width:600px; margin:0 0 36px}
  .hero-actions{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
  .hero-meta{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted);
    display:flex; gap:20px; flex-wrap:wrap;
  }

  /* ===== Hero product split ===== */
  .hero-product{
    margin-top:64px; position:relative;
    max-width:920px; margin-left:auto; margin-right:auto;
  }
  .dash-frame img{
    width:100%; display:block;
  }
  .term-chrome{display:flex; gap:6px; margin-bottom:14px; align-items:center}
  .term-chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
  .term-chrome i:nth-child(1){background:#FF5F57}
  .term-chrome i:nth-child(2){background:#FEBC2E}
  .term-chrome i:nth-child(3){background:#28C840}
  .term-path{margin-left:auto; color:var(--faint); font-size:11px}
  .term-prompt{color:var(--faint)}
  .term-ok{color:#10B981}
  .term-divider{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border)}
  .term-callout-eyebrow{color:var(--accent); font-size:11px; letter-spacing:0.04em; margin-bottom:8px}
  .term-callout{font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; color:var(--text); line-height:1.3}

  .dash-frame{
    border:1px solid var(--border-strong); border-radius:18px; overflow:hidden;
    background:var(--surface); position:relative; box-shadow:var(--shadow);
  }
  .dash-frame-bar{
    min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
    background:var(--surface-2); border-bottom:1px solid var(--border);
  }
  .dash-frame-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
  .dash-frame-dots i{display:block; width:10px; height:10px; border-radius:50%}
  .dash-frame-dots i:nth-child(1){background:#FF5F57}
  .dash-frame-dots i:nth-child(2){background:#FEBC2E}
  .dash-frame-dots i:nth-child(3){background:#28C840}
  .dash-frame-url{
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:min(360px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
    background:color-mix(in oklch, var(--bg) 65%, var(--surface));
    border:1px solid var(--border); border-radius:999px;
    color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .dash-frame-lock{color:#10B981; font-size:9px; flex-shrink:0}

  .hero-sticker{
    position:absolute; top:-22px; right:-14px;
    background:var(--accent); color:var(--accent-ink);
    border-radius:10px; padding:10px 14px; transform:rotate(4deg);
    font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; font-weight:400;
    box-shadow:0 12px 30px rgba(14,19,17,0.18);
    border:1.5px solid var(--accent-ink);
  }

  /* ===== Stats bar ===== */
  .stats{padding:32px 0; border-block:1px solid var(--border); background:var(--surface)}
  .stats-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px}
  .stat{display:flex; align-items:baseline; gap:14px}
  .stat .num{font-weight:700; font-size:38px; letter-spacing:-0.035em; line-height:1}
  .stat .lbl{
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
    letter-spacing:0.04em; text-transform:uppercase;
  }

  /* ===== Sections ===== */
  section.block{padding:96px 0}
  .block-head{max-width:780px; margin-bottom:56px}
  .block-head h2{
    font-weight:700; font-size:56px; line-height:1.02; letter-spacing:-0.04em;
    margin:14px 0 16px;
  }
  .block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

  /* ===== Product tour ===== */
  .tour-section{padding:96px 0 0}
  .tour-section + .tour-section{padding-top:72px}
  .tour-head{display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:28px}
  .tour-head-copy{max-width:720px}
  .tour-section[aria-labelledby="core-tour-title"] .tour-head-copy{max-width:980px}
  .tour-head h2{
    font-weight:700; font-size:48px; line-height:1.02; letter-spacing:-0.04em;
    margin:14px 0 12px;
  }
  .tour-head p{font-size:16px; color:var(--muted); line-height:1.55; margin:0; max-width:620px}
  .tour-section[aria-labelledby="core-tour-title"] .tour-head p{max-width:980px}
  .tour-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
  .tour-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:16px; overflow:hidden;
  }
  .tour-card-featured{max-width:1080px; margin-inline:auto}
  .tour-card-addon{
    border-style:dashed;
    background:color-mix(in oklch, var(--accent) 4%, var(--surface));
  }
  .tour-card-head{display:flex; justify-content:space-between; gap:16px; align-items:start; padding:5px 4px 15px}
  .tour-card h3{font-size:19px; letter-spacing:-0.02em; margin:0 0 5px}
  .tour-card p{font-size:13px; line-height:1.45; color:var(--muted); margin:0}
  .product-badge{
    flex-shrink:0; border-radius:99px; padding:5px 8px;
    font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:700; letter-spacing:0.06em;
  }
  .product-badge-core{background:var(--accent); color:var(--accent-ink)}
  .product-badge-included{color:#065F46; border:1px solid #10B981; background:#D1FAE5}
  .product-badge-paid{color:#92400E; border:1px solid #F59E0B; background:#FEF3C7}
  :root[data-theme="dark"] .product-badge-included{color:#D1FAE5; border-color:#10B981; background:#064E3B}
  :root[data-theme="dark"] .product-badge-paid{color:#FEF3C7; border-color:#F59E0B; background:#78350F}
  .shot-placeholder{
    min-height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:9px; padding:28px; border:1px dashed var(--border); border-radius:10px;
    background:color-mix(in oklch, var(--bg) 72%, var(--surface)); text-align:center;
  }
  .tour-card-featured .shot-placeholder{min-height:410px}
  .shot-placeholder .shot-command{
    font-family:'JetBrains Mono', monospace; color:var(--accent); font-size:11px; letter-spacing:0.04em;
  }
  .shot-placeholder strong{font-size:18px; letter-spacing:-0.02em}
  .shot-placeholder span:last-child{font-size:13px; line-height:1.5; color:var(--muted); max-width:570px}
  .tour-card-addon .shot-placeholder{border-color:color-mix(in oklch, var(--accent) 42%, var(--border))}
  .tour-shot{
    width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left;
    border:1px solid var(--border); border-radius:10px;
  }
  .dash-frame .tour-shot{border:0; border-radius:0}
  .tour-card-featured .tour-shot{height:auto; aspect-ratio:auto; object-fit:contain}

  /* ===== Feature grid ===== */
  .feat-top{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px}
  .feat-card{
    border-radius:16px; padding:32px; min-height:340px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
  }
  .feat-big{background:var(--accent); color:var(--accent-ink); padding:36px}
  .feat-big h3{font-weight:700; font-size:38px; letter-spacing:-0.035em; line-height:1.02; margin:0 0 14px}
  .feat-big p{font-size:15px; line-height:1.55; margin:0; max-width:440px; opacity:0.85}
  .feat-big .feat-eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; margin-bottom:14px; opacity:0.65}
  .keys{
    display:inline-flex; gap:8px; align-items:center; font-family:'JetBrains Mono', monospace;
    font-size:11px; padding:10px 12px; background:rgba(14,19,17,0.08); border-radius:8px;
    max-width:fit-content; margin-top:24px;
  }
  .keys .sep{opacity:0.5}
  .keys .note{margin-left:8px; opacity:0.7}

  .feat-code{
    background:var(--code-bg); color:var(--code-text);
    border:1px solid var(--border);
  }
  .feat-code .feat-eyebrow{color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; margin-bottom:14px}
  .feat-code h3{font-weight:600; font-size:24px; letter-spacing:-0.025em; line-height:1.1; margin:0 0 14px}
  .codeblock{
    font-family:'JetBrains Mono', monospace; font-size:11.5px; line-height:1.75; color:#9BA39E;
    background:rgba(255,255,255,0.04); padding:14px 16px; border-radius:8px;
    border:1px solid rgba(160,158,245,0.16);
  }
  .codeblock .tag{color:#8FB3FF}
  .codeblock .attr{color:var(--accent)}
  .codeblock .str{color:#FFE08F}
  .feat-code a{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-decoration:none; letter-spacing:0.04em}

  .feat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
  .feat-cell{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:24px; display:flex; flex-direction:column; min-height:220px;
  }
  .feat-cell .feat-eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.06em; margin-bottom:12px}
  .feat-cell h3{font-weight:700; font-size:20px; letter-spacing:-0.02em; margin:0 0 8px}
  .feat-cell p{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0}
  .feat-cmd{
    margin-top:auto; padding-top:18px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:0.02em;
    display:flex; align-items:center; gap:8px;
  }
  .feat-cmd .sigil{color:var(--faint)}

  /* ===== Compare ===== */
  .compare-head{display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:end; margin-bottom:40px}
  .compare-head h2{font-weight:700; font-size:48px; letter-spacing:-0.035em; line-height:1; margin:14px 0 0}
  .compare-head p{font-size:16px; color:var(--muted); line-height:1.55; margin:0; max-width:520px; justify-self:end}
  .diff{
    font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.85;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:24px 28px;
  }
  .diff .hdr{color:var(--muted); padding-bottom:8px; margin-bottom:8px; border-bottom:1px dashed var(--border)}
  .diff .row{display:flex; gap:14px; padding:2px 10px; margin:0 -10px; border-radius:4px}
  .diff .row .sign{width:12px}
  .diff .minus{background:color-mix(in oklch, #F87171 8%, transparent)} .diff .minus .sign{color:#F87171}
  .diff .plus{background:color-mix(in oklch, #10B981 10%, transparent)} .diff .plus .sign{color:#10B981}
  .diff .gap{height:8px}

  /* ===== Quote ===== */
  .quote-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:56px 56px 48px; position:relative;
  }
  .quote-watermark{
    position:absolute; top:24px; right:32px;
    font-family:'JetBrains Mono', monospace; font-size:11px;
    color:var(--muted); letter-spacing:0.08em;
  }
  .quote-card p.q{
    font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
    font-size:42px; line-height:1.15; letter-spacing:-0.02em; margin:0 0 28px; max-width:920px;
  }
  .quote-attr{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .avatar{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-ink));
  }
  .quote-attr .name{font-weight:700; font-size:14px}
  .quote-attr .role{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.04em}
  .logos{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
  .logos span{
    font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em;
    padding:4px 10px; border:1px solid var(--border); border-radius:99px;
  }

  /* ===== Pricing ===== */
  .price-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
  .price{
    border:1px solid var(--border); border-radius:14px; padding:28px;
    background:var(--surface); position:relative;
  }
  .price.hot{
    border-color:var(--accent);
    background: color-mix(in oklch, var(--accent) 6%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
  }
  .price .badge-rec{
    position:absolute; top:-12px; left:24px;
    background:var(--accent); color:var(--accent-ink);
    font-family:'JetBrains Mono', monospace; font-size:10px;
    padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
  }
  .price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
  .price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
  .price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
  .price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
  .price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
  .price .btn{width:100%; margin-bottom:22px; justify-content:space-between}
  .price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
  .price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
  .price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

  /* ===== Big CTA ===== */
  .cta-wrap{padding:40px 0 100px}
  .cta{
    background:var(--code-bg); color:#F2EFE6;
    border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
    border:1px solid var(--border);
  }
  .cta .sun{
    position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
    background:var(--accent); opacity:0.85;
  }
  .cta .ready-tag{
    position:absolute; top:36px; right:36px;
    font-family:'JetBrains Mono', monospace; font-size:11px;
    color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
  }
  .cta-body{position:relative; z-index:1; max-width:700px}
  .cta h2{
    font-weight:700; font-size:64px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px;
  }
  .cta p{font-size:17px; color:#9BA39E; margin:0 0 32px; max-width:500px}
  .cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

  /* ===== Footer ===== */
  footer.foot{padding:48px 0; border-top:1px solid var(--border)}
  .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
  .foot-col h4{
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
    color:var(--muted); margin:0 0 14px; font-weight:500;
  }
  .foot-col .links{display:flex; flex-direction:column; gap:8px}
  .foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
  .foot-col .links a:hover{color:var(--accent); }
  .foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
  .foot-bottom{
    border-top:1px solid var(--border); padding-top:20px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }

  /* ===== Theme toggle (navbar) ===== */
  .theme-fab{
    display:flex; align-items:center; gap:4px; padding:3px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
  }
  .theme-fab button{
    border:none; background:transparent; padding:6px 10px; border-radius:999px;
    color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
    font-family:inherit;
  }
  .theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

  /* ===== Responsive ===== */
  @media (max-width: 1080px){
    h1.hero-title{font-size:72px}
    .hero-product{grid-template-columns:1fr; }
    .feat-top{grid-template-columns:1fr}
    .feat-grid{grid-template-columns:repeat(2,1fr)}
    .tour-grid{grid-template-columns:1fr}
    .price-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .compare-head{grid-template-columns:1fr; gap:16px}
    .foot-grid{grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 720px){
    .nav-links{display:none}
    h1.hero-title{font-size:48px}
    .block-head h2, .compare-head h2{font-size:36px}
    .tour-head{display:block}
    .tour-head h2{font-size:36px}
    .tour-card-featured .shot-placeholder{min-height:300px}
    .quote-card{padding:32px 24px}
    .quote-card p.q{font-size:28px}
    .cta{padding:48px 28px}
    .cta h2{font-size:40px}
    section.block{padding:64px 0}
    .feat-grid{grid-template-columns:1fr}
    .container{padding:0 20px}
    header.nav{padding:14px 20px}
  }


/* ===== Extracted from compare.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}
@media (max-width: 720px){
  .cmp-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px}
  .cmp-table-scroll .cmp-table{border-radius:0; min-width:560px}
  body[data-page="compare"] .choose-list{columns:1 !important}
}
@media (max-width: 600px){
  .cmp-table-scroll .cmp-table{display:table}
  .cmp-table-scroll .cmp-table thead{display:table-header-group}
  .cmp-table-scroll .cmp-table tbody{display:table-row-group}
  .cmp-table-scroll .cmp-table tr{display:table-row}
  .cmp-table-scroll .cmp-table th,
  .cmp-table-scroll .cmp-table td{display:table-cell; padding:14px 16px; font-size:13px; border-bottom:1px solid var(--border)}
  .cmp-table-scroll .cmp-table td.feature{font-size:13px; padding:14px 16px; border-bottom:1px solid var(--border); margin-bottom:0}
  .cmp-table-scroll .cmp-table td:not(.feature){justify-content:unset}
  .cmp-table-scroll .cmp-table td:not(.feature)::before{display:none}
  .cmp-table-scroll .cmp-table tbody tr{border-bottom:none; padding:0}
}


/* ===== Extracted from extensions.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from extensions.html ===== */
.ext-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:16px;
  }
  .ext-card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:18px; padding:28px;
    display:flex; flex-direction:column; gap:14px;
    text-decoration:none; color:inherit;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
    grid-column: span 2;
    min-height:280px; position:relative; overflow:hidden;
  }
  .ext-card:hover{
    transform:translateY(-3px);
    border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
    box-shadow: 0 18px 40px rgba(124,122,237,0.10);
  }
  .ext-card.wide{ grid-column: span 3 }
  .ext-card.big{ grid-column: span 4; min-height:360px }

  .ext-card .ico{
    width:48px; height:48px; border-radius:12px;
    background: color-mix(in oklch, var(--accent) 14%, var(--surface));
    color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .ext-card .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
  .ext-card h3{
    margin:0; font-weight:700; font-size:22px; letter-spacing:-0.02em; line-height:1.15;
  }
  .ext-card .id{
    font-family:'JetBrains Mono', monospace; font-size:10px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  }
  .ext-card p{
    margin:0; font-size:14px; color:var(--muted); line-height:1.55;
    flex:1;
  }
  .ext-card .foot{
    padding-top:14px; border-top:1px dashed var(--border);
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  }
  .ext-card .arr{ color:var(--accent); font-weight:700 }
  .ext-card.big h3{ font-size:32px; letter-spacing:-0.03em }
  .ext-card.big{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 30%, var(--border)) }
  .ext-card.dark{ background:var(--code-bg); color:var(--code-text); border-color:var(--code-bg) }
  .ext-card.dark p{ color:#9594B5 }
  .ext-card.dark .foot{ border-top-color:rgba(255,255,255,0.10); color:#9594B5 }
  .ext-card.dark .ico{ background:rgba(160,158,245,0.14) }

  .ext-card .badge{
    font-family:'JetBrains Mono', monospace; font-size:10px;
    background:var(--accent); color:var(--accent-ink);
    padding:3px 10px; border-radius:99px; letter-spacing:0.06em; font-weight:700;
  }

  @media (max-width: 1080px){
    .ext-grid{ grid-template-columns: repeat(2, 1fr) }
    .ext-card, .ext-card.wide, .ext-card.big{ grid-column: span 2; min-height:auto }
  }
  @media (max-width: 720px){
    .ext-grid{ grid-template-columns: 1fr }
    .ext-card, .ext-card.wide, .ext-card.big{ grid-column: span 1 }
  }

  /* Build-your-own callout */
  .byo{
    margin-top:32px;
    background:var(--surface); border:1px dashed var(--border-strong); border-radius:16px;
    padding:32px;
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  .byo h3{ margin:0 0 8px; font-weight:700; font-size:28px; letter-spacing:-0.025em; line-height:1.1 }
  .byo p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55 }
  @media (max-width: 1080px){ .byo{ grid-template-columns:1fr; gap:24px } }


/* ===== Extracted from features.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}
.product-window{
  overflow:hidden; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:18px;
  box-shadow:var(--shadow);
}
.product-window-bar{
  min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.product-window-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
.product-window-dots i{display:block; width:10px; height:10px; border-radius:50%}
.product-window-dots i:nth-child(1){background:#FF5F57}
.product-window-dots i:nth-child(2){background:#FEBC2E}
.product-window-dots i:nth-child(3){background:#28C840}
.product-window-url{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:min(360px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.product-window-lock{color:#10B981; font-size:9px; flex-shrink:0}
.product-window-body{background:var(--surface)}
.product-shot{
  display:block; width:100%; aspect-ratio:1.42 / 1; object-fit:cover; object-position:top left;
}
.product-screen{min-height:318px; padding:24px; background:var(--surface)}
.product-screen .screen-label{
  color:var(--accent); font-family:'JetBrains Mono', monospace;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.kb-screen h3{font-size:21px; letter-spacing:-.02em; margin:15px 0 10px}
.kb-screen p{font-size:13.5px; max-width:none; margin:0 0 20px; line-height:1.55}
.kb-tags{display:flex; gap:7px; margin-bottom:20px}
.kb-tags span{
  padding:5px 9px; border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-size:11px;
}
.kb-feedback{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-top:1px solid var(--border); padding-top:16px;
  color:var(--muted); font-size:12px;
}
.kb-feedback span:last-child{color:var(--accent); font-family:'JetBrains Mono', monospace}
.import-screen{font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.85}
.import-screen .import-title{
  display:flex; justify-content:space-between; margin-bottom:16px;
  color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
}
.import-screen .step{color:var(--muted)}
.import-screen .path{color:var(--accent)}
.import-screen .success{color:#10B981}
.import-screen .import-summary{
  margin-top:18px; padding:12px 14px; border-radius:9px;
  background:var(--code-bg); color:var(--code-text);
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from gdpr.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}
@media (max-width: 600px){
  .cmp-table thead{display:none}
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td{display:block; width:100%}
  .cmp-table tbody tr{border-bottom:1px solid var(--border); padding:16px}
  .cmp-table tbody tr:last-child{border-bottom:none}
  .cmp-table td.feature{font-size:16px; font-weight:600; padding:0 0 10px 0; border-bottom:1px solid var(--border); margin-bottom:10px}
  .cmp-table td:not(.feature){display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border:none; font-size:13px}
  .cmp-table td:not(.feature)::before{content:attr(data-label); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); flex-shrink:0; margin-right:12px}
}


/* ===== Extracted from knowledge-base.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}
.product-window{
  overflow:hidden; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:18px;
  box-shadow:var(--shadow);
}
.product-window-bar{
  min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.product-window-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
.product-window-dots i{display:block; width:10px; height:10px; border-radius:50%}
.product-window-dots i:nth-child(1){background:#FF5F57}
.product-window-dots i:nth-child(2){background:#FEBC2E}
.product-window-dots i:nth-child(3){background:#28C840}
.product-window-url{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:min(380px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.product-window-lock{color:#10B981; font-size:9px; flex-shrink:0}
.product-window-body{background:var(--surface)}
.product-shot{
  display:block; width:100%; aspect-ratio:1.43 / 1; object-fit:cover; object-position:top left;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from licenses.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price .btn{width:100%; margin-bottom:22px; justify-content:space-between}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from live-chat.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}
.product-shot{
  background:#f8fafc; border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
:root[data-theme="dark"] .product-shot{
  background:#141322; border-color:rgba(160,158,245,0.18);
}
.product-shot-top{
  min-height:54px; display:flex; align-items:center; gap:12px;
  padding:0 18px; background:#fff; border-bottom:1px solid #e5e7eb;
}
:root[data-theme="dark"] .product-shot-top{
  background:#1a1928; border-bottom-color:rgba(160,158,245,0.18);
}
.product-shot-dot{width:10px; height:10px; border-radius:99px; background:#e5e7eb}
.product-shot-dot:nth-child(1){background:#ff5f57}
.product-shot-dot:nth-child(2){background:#febc2e}
.product-shot-dot:nth-child(3){background:#28c840}
.product-shot-url{
  margin-left:auto; max-width:320px; padding:7px 14px; border:1px solid #e5e7eb;
  border-radius:999px; color:#64748b; font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
:root[data-theme="dark"] .product-shot-url{
  background:#11101c; border-color:rgba(160,158,245,0.22); color:#a7a6c8;
}
.real-product-shot{
  width:100%; display:block; background:#f8fafc;
}
.real-product-shot.is-crop{
  aspect-ratio:16 / 9; object-fit:cover; object-position:left top;
}
.dash-frame{
  border:1px solid var(--border-strong); border-radius:18px; overflow:hidden;
  background:var(--surface); position:relative; box-shadow:var(--shadow);
}
.dash-frame img{width:100%; display:block}
.dash-frame-bar{
  min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.dash-frame-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
.dash-frame-dots i{display:block; width:10px; height:10px; border-radius:50%}
.dash-frame-dots i:nth-child(1){background:#FF5F57}
.dash-frame-dots i:nth-child(2){background:#FEBC2E}
.dash-frame-dots i:nth-child(3){background:#28C840}
.dash-frame-url{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:min(360px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-frame-lock{color:#10B981; font-size:9px; flex-shrink:0}
.inbox-shot-body{display:grid; grid-template-columns:190px 1fr 250px; min-height:430px}
.inbox-queue{background:#fff; border-right:1px solid #e5e7eb; padding:18px}
.inbox-title{font-weight:800; font-size:15px; color:#111827; margin-bottom:14px}
.queue-item{
  border:1px solid #e5e7eb; border-radius:12px; padding:13px; margin-bottom:10px;
  background:#fff;
}
.queue-item.is-active{border-color:#818cf8; background:#eef4ff}
.queue-line{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.queue-avatar{width:28px; height:28px; border-radius:99px; background:#2563eb}
.queue-name{font-weight:800; font-size:13px; color:#111827}
.queue-meta{font-size:11px; color:#64748b; line-height:1.35}
.queue-badge{display:inline-flex; margin-top:8px; padding:3px 7px; border-radius:999px; background:#d1fae5; color:#047857; font-size:10px; font-weight:800}
.inbox-chat{background:#f8fafc; display:flex; flex-direction:column}
.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; background:#fff; border-bottom:1px solid #e5e7eb;
}
.chat-person{display:flex; align-items:center; gap:12px}
.chat-icon{
  width:42px; height:42px; border-radius:99px; background:#0042aa; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.chat-name{font-size:22px; font-weight:800; color:#111827; line-height:1}
.chat-online{font-size:12px; color:#047857; font-weight:800; margin-top:4px}
.chat-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.mini-btn{border-radius:9px; padding:9px 12px; font-size:12px; font-weight:800; border:1px solid #d1d5db; background:#fff; color:#111827}
.mini-btn.primary{background:#2563eb; color:#fff; border-color:#2563eb}
.mini-btn.danger{background:#dc2626; color:#fff; border-color:#dc2626}
.chat-stream{padding:22px 22px 16px; display:flex; flex-direction:column; gap:14px; flex:1}
.bubble{
  max-width:76%; border-radius:13px; padding:12px 14px; font-size:13px; line-height:1.45;
  border:1px solid #e5e7eb; background:#fff; color:#111827;
}
.bubble.agent{align-self:flex-end; background:#2563eb; color:#fff; border-color:#2563eb}
.handoff{
  border:1px solid #818cf8; background:#eef2ff; color:#3730a3; border-radius:12px;
  padding:11px 13px; font-size:12px; line-height:1.45;
}
.chat-compose{display:flex; gap:8px; padding:14px 18px; background:#fff; border-top:1px solid #e5e7eb}
.compose-input{flex:1; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; color:#94a3b8; font-size:12px}
.compose-send{width:44px; border-radius:10px; background:#0042aa; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900}
.inbox-details{background:#fff; border-left:1px solid #e5e7eb; padding:18px}
.detail-kv{display:grid; grid-template-columns:76px 1fr; gap:8px; margin-bottom:13px; font-size:12px}
.detail-kv span:first-child{color:#94a3b8; font-weight:800; text-transform:uppercase}
.detail-kv span:last-child{color:#111827; font-weight:700; overflow:hidden; text-overflow:ellipsis}
.detail-panel{border-top:1px solid #e5e7eb; margin-top:16px; padding-top:16px}
.config-shot-body{display:grid; grid-template-columns:1fr 270px; gap:18px; padding:18px}
.settings-panel{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px}
.setting-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-label{display:block; color:#344054; font-size:12px; font-weight:800; margin-bottom:7px}
.fake-field{height:42px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#111827; display:flex; align-items:center; padding:0 12px; font-size:13px}
.fake-field.colour{background:linear-gradient(90deg,#0042aa 0,#0042aa 88%,#fff 88%)}
.check-row{display:flex; align-items:center; gap:10px; margin-top:14px; color:#111827; font-weight:700; font-size:13px}
.fake-check{width:18px; height:18px; border-radius:5px; background:#6366f1; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px}
.widget-preview{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:14px}
.preview-frame{height:235px; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc; position:relative; overflow:hidden}
.preview-card{position:absolute; left:18px; right:18px; top:18px; background:#0042aa; color:#fff; border-radius:10px; padding:14px}
.preview-card strong{display:block; font-size:20px; margin-bottom:6px}
.preview-card span{font-size:12px; opacity:.92}
.preview-bubble{position:absolute; right:20px; bottom:20px; width:62px; height:62px; border-radius:99px; background:#0042aa; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price .btn{width:100%; margin-bottom:22px; justify-content:space-between}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}
.extension-price-grid{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:16px; align-items:stretch}
.extension-price-note{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:28px; display:flex; flex-direction:column; justify-content:center;
}
.extension-price-note h3{font-size:28px; letter-spacing:-0.03em; margin:0 0 10px}
.extension-price-note p{font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 16px; max-width:620px}
.extension-price-note .mono{font-size:11px; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .extension-price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .inbox-shot-body{grid-template-columns:160px 1fr}
  .inbox-details{grid-column:1 / -1; border-left:none; border-top:1px solid #e5e7eb}
  .config-shot-body{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
  .product-shot-url{display:none}
  .inbox-shot-body{grid-template-columns:1fr}
  .inbox-queue{border-right:none; border-bottom:1px solid #e5e7eb}
  .chat-head{align-items:flex-start; flex-direction:column}
  .chat-actions{justify-content:flex-start}
  .bubble{max-width:100%}
  .setting-grid{grid-template-columns:1fr}
}


/* ===== Extracted from roadmap.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}
.dash-frame{
  border:1px solid var(--border-strong); border-radius:18px; overflow:hidden;
  background:var(--surface); position:relative; box-shadow:var(--shadow);
}
.dash-frame img{width:100%; display:block}
.dash-frame-bar{
  min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.dash-frame-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
.dash-frame-dots i{display:block; width:10px; height:10px; border-radius:50%}
.dash-frame-dots i:nth-child(1){background:#FF5F57}
.dash-frame-dots i:nth-child(2){background:#FEBC2E}
.dash-frame-dots i:nth-child(3){background:#28C840}
.dash-frame-url{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:min(360px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-frame-lock{color:#10B981; font-size:9px; flex-shrink:0}
.roadmap-board-mock{
  color:#111827; overflow:hidden;
}
.roadmap-admin-tabs{
  display:flex; gap:8px; align-items:center; border:1px solid #e5e7eb;
  background:#fff; border-radius:12px; padding:6px; margin-bottom:28px;
}
.roadmap-admin-tabs span{
  padding:10px 18px; border-radius:9px; color:#52525b; font-weight:700; font-size:15px;
}
.roadmap-admin-tabs span.is-active{background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.10); color:#111827}
.roadmap-board-head{
  display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px;
}
.roadmap-board-title{display:flex; align-items:center; gap:14px}
.roadmap-board-title h3{margin:0; font-size:28px; letter-spacing:-.03em}
.roadmap-kanban-pill{
  background:#d1fae5; color:#047857; border:1px solid #a7f3d0;
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:800;
}
.roadmap-board-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.roadmap-segmented{
  display:flex; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:4px; box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.roadmap-segmented span{
  padding:9px 13px; border-radius:7px; color:#4b5563; font-weight:700; font-size:13px;
}
.roadmap-segmented span.is-active{background:#6366f1; color:#fff}
.roadmap-action-btn{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px;
  color:#4b5563; font-weight:700; font-size:13px; box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.roadmap-columns{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:start;
}
.roadmap-column{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.08); overflow:hidden;
}
.roadmap-column-head{
  padding:18px 18px 0px; display:flex; align-items:flex-start; gap:12px;
}
.roadmap-column-dot{width:10px; height:10px; border-radius:99px; background:#64748b; margin-top:8px; flex:0 0 auto}
.roadmap-column-title-wrap{flex:1}
.roadmap-column-title{display:flex; align-items:center; gap:8px; color:#111827; font-size:16px; font-weight:800; letter-spacing:-.02em}
.roadmap-column-count{display:block; color:#64748b; font-size:12px; margin-top:2px}
.roadmap-done-pill{
  background:#ccfbf1; color:#047857; border-radius:8px; padding:4px 9px;
  font-size:11px; font-weight:800;
}
.roadmap-column-controls{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.roadmap-small-btn{
  background:#fff; border:1px solid #e5e7eb; border-radius:8px; color:#4b5563;
  font-weight:700; font-size:11px; padding:7px 9px;
}
.roadmap-add-row{
  margin:10px 18px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.roadmap-add-task{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #b7b9ff; color:#6366f1; background:#fff; border-radius:10px;
  padding:9px 13px; font-weight:800; font-size:12px;
}
.roadmap-add-row .roadmap-small-btn{
  border-radius:10px; padding:9px 13px; font-size:12px;
}
.roadmap-column-body{padding:14px 18px 18px; display:grid; gap:14px; border-top:1px solid #e5e7eb}
.roadmap-task{
  position:relative; background:#fff; border:1.5px solid #d8dee7;
  border-radius:12px; padding:16px; box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.roadmap-task::after{
  content:''; position:absolute; right:18px; top:24px; width:10px; height:10px;
  border-radius:99px; background:#6b7280;
}
.roadmap-task-code{
  display:block; font-family:'JetBrains Mono',monospace; color:#2563eb;
  font-size:11px; font-weight:800; margin-bottom:10px; text-transform:uppercase;
}
.roadmap-task-code.bug{color:#ef4444}
.roadmap-task-code.idea{color:#7c3aed}
.roadmap-task-code.improvement{color:#2563eb}
.roadmap-task h4{
  margin:0 28px 16px 0; color:#111827; font-size:14px; line-height:1.35; letter-spacing:-.02em;
}
.roadmap-task-foot{
  display:flex; justify-content:space-between; gap:10px; color:#64748b; font-size:11px;
}
.roadmap-task-meta{display:flex; gap:10px}
:root[data-theme="dark"] .roadmap-column{
  background:#111827; border-color:#3f3f46; box-shadow:none;
}
:root[data-theme="dark"] .roadmap-column-body{
  border-top-color:#3f3f46;
}
:root[data-theme="dark"] .roadmap-column-title{
  color:#f9fafb;
}
:root[data-theme="dark"] .roadmap-column-count{
  color:#9ca3af;
}
:root[data-theme="dark"] .roadmap-done-pill{
  background:#047857; color:#d1fae5;
}
:root[data-theme="dark"] .roadmap-small-btn{
  background:transparent; border-color:#3f3f46; color:#d1d5db; box-shadow:none;
}
:root[data-theme="dark"] .roadmap-small-btn:hover{
  border-color:#52525b; background:#1f2937;
}
:root[data-theme="dark"] .roadmap-add-task{
  background:transparent; border-color:#6366f1; color:#c4b5fd;
}
:root[data-theme="dark"] .roadmap-task{
  background:#1f2937; border-color:#3f3f46; box-shadow:none;
}
:root[data-theme="dark"] .roadmap-task::after{
  background:#6b7280;
}
:root[data-theme="dark"] .roadmap-task h4{
  color:#f9fafb;
}
:root[data-theme="dark"] .roadmap-task-foot{
  color:#9ca3af;
}
:root[data-theme="dark"] .roadmap-task-foot > span:last-child{
  color:#6b7280;
}
@media (max-width: 1080px){
  .roadmap-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .roadmap-columns{grid-template-columns:1fr}
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button,.price .btn{width:100%; margin-bottom:22px; justify-content:space-between}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}
.extension-price-grid{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:16px; align-items:stretch}
.extension-price-note{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:28px; display:flex; flex-direction:column; justify-content:center;
}
.extension-price-note h3{font-size:28px; letter-spacing:-0.03em; margin:0 0 10px}
.extension-price-note p{font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 16px; max-width:620px}
.extension-price-note .mono{font-size:11px; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:620px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .extension-price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from sla.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}
.product-proof{
  display:grid; grid-template-columns:0.82fr 1.18fr; gap:48px; align-items:center;
  padding:18px 0 42px;
}
.product-proof-copy h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:500px;
}
.product-proof-copy p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 18px; max-width:500px}
.proof-list{display:grid; gap:10px; margin-top:20px}
.proof-list div{
  display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-top:1px dashed var(--border);
  font-size:13.5px;
}
.proof-list span:first-child{color:var(--muted)}
.proof-list strong{color:var(--text); text-align:right}
.dash-frame{
  border:1px solid var(--border-strong); border-radius:18px; overflow:hidden;
  background:var(--surface); position:relative; box-shadow:var(--shadow);
}
.dash-frame img{width:100%; display:block}
.dash-frame-bar{
  min-height:48px; padding:0 16px; display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.dash-frame-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
.dash-frame-dots i{display:block; width:10px; height:10px; border-radius:50%}
.dash-frame-dots i:nth-child(1){background:#FF5F57}
.dash-frame-dots i:nth-child(2){background:#FEBC2E}
.dash-frame-dots i:nth-child(3){background:#28C840}
.dash-frame-url{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:min(360px, calc(100% - 70px)); margin:0 auto; padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-frame-lock{color:#10B981; font-size:9px; flex-shrink:0}
.sla-ticket-shot{
  aspect-ratio:16 / 9; object-fit:cover; object-position:50% 34%;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .product-proof{grid-template-columns:1fr; gap:32px; padding-top:0}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}


/* ===== Extracted from support.html ===== */
/* ===== Ticaga marketing site — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
  --logo-src:url('../img/ticaga-colour.svg');
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
  --logo-src:url('../img/ticaga-logo.svg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
.muted{color:var(--muted)}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.eyebrow-accent{color:var(--accent)}

/* Logo */
.logo{display:inline-flex; align-items:center; gap:8px}
.logo-img{height:28px; width:auto}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14px; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background: color-mix(in oklch, var(--accent), white 8%)}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  font-family:'JetBrains Mono', monospace; font-weight:500;
}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-sm{padding:9px 16px; font-size:13px}

/* Nav */
header.nav{
  position:sticky; top:0; z-index:20;
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
.nav-left{display:flex; align-items:center; gap:36px}
.nav-links{display:flex; gap:24px; font-size:14px; font-weight:500; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover, .nav-links a.is-on{color:var(--text)}
.nav-links a.is-on{color:var(--accent)}
.nav-right{display:flex; align-items:center; gap:12px}

/* Nav dropdown */
.nav-dd{ position:relative }
.nav-dd-trigger{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-dd-trigger:hover, .nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger.is-on{ color:var(--text) }
.nav-dd-chev{ font-size:10px; opacity:0.7; transition: transform .15s ease }
.nav-dd:hover .nav-dd-chev, .nav-dd.is-open .nav-dd-chev{ transform: rotate(180deg) }
.nav-dd-panel{
  position:absolute; top:100%; left:-12px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 16px 40px rgba(19,19,38,0.10);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
:root[data-theme="dark"] .nav-dd-panel{ box-shadow:0 16px 40px rgba(0,0,0,0.4) }
.nav-dd::before{
  /* invisible bridge so hover doesn't drop while moving cursor down */
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd.is-open > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dd-item{
  display:flex !important; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text) !important;
  font-weight:500;
}
.nav-dd-item:hover{ background:var(--surface-2) }
.nav-dd-item.is-on{ background: color-mix(in oklch, var(--accent) 10%, var(--surface)); color:var(--accent) !important }
.nav-dd-all{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  margin-bottom:4px;
}
.nav-dd-all .nav-dd-lbl{ color:var(--accent) !important; font-weight:700 }
.nav-dd-lbl{ font-size:14px }
.nav-dd-sub{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.02em }
.nav-dd-item.is-on .nav-dd-sub{ color:var(--accent); opacity:0.7 }

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  letter-spacing:0.04em;
}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:99px; background:#10B981}
.signin{font-size:14px; color:var(--text); text-decoration:none}

/* Page hero */
.phero{padding:80px 0 56px; position:relative}
.phero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 14px 5px 6px; font-size:12px; margin-bottom:28px;
}
.phero-badge .tag{
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:0.06em;
}
.phero h1{
  font-weight:700; font-size:80px; line-height:0.96;
  letter-spacing:-0.045em; margin:0 0 22px; max-width:980px;
}
.phero h1 em{color:var(--muted)}
.phero .lede{
  font-size:18px; line-height:1.5; color:var(--muted);
  max-width:600px; margin:0 0 32px;
}
.phero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.phero-meta{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}

/* Phero — dark variant for inner pages */
.phero-dark{
  background:var(--code-bg); color:#ECEAF8; border-radius:0;
  margin:0; padding:96px 0 64px;
  background-image:none;
}
.phero-dark h1{color:#ECEAF8}
.phero-dark h1 em{color:#9594B5}
.phero-dark .lede{color:#9594B5}
.phero-dark .phero-badge{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1)}

/* Block */
section.block{padding:96px 0}
section.block-tight{padding:72px 0}
.block-head{max-width:780px; margin-bottom:56px}
.block-head h2{
  font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-0.04em;
  margin:14px 0 16px;
}
.block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}

/* Feature-trio grid (3-up cards) */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.trio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; min-height:240px;
}
.trio-card .eyebrow{margin-bottom:14px; color:var(--accent)}
.trio-card h3{font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0 0 10px}
.trio-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0; flex:1}
.trio-card .ico{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.trio-card .foot{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* Detail-row (feature + image, alternating) */
.detail-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
  padding:48px 0;
}
.detail-row.flip{grid-template-columns:1.1fr 1fr}
.detail-row.flip .text-col{order:2}
.detail-row.flip .visual-col{order:1}
.detail-row + .detail-row{border-top:1px solid var(--border)}
.detail-row .eyebrow{margin-bottom:18px}
.detail-row h2{
  font-weight:700; font-size:42px; line-height:1.02; letter-spacing:-0.035em;
  margin:0 0 18px; max-width:480px;
}
.detail-row p{font-size:16px; color:var(--muted); line-height:1.55; margin:0 0 20px; max-width:480px}
.detail-row ul{padding:0 0 0 0; margin:0 0 20px; list-style:none}
.detail-row ul li{
  padding:8px 0; padding-left:24px; position:relative; font-size:14.5px; line-height:1.5;
  border-top:1px dashed var(--border);
}
.detail-row ul li:first-child{border-top:none}
.detail-row ul li::before{
  content:'+'; position:absolute; left:4px; top:8px;
  color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700;
}
.detail-row .visual{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow:var(--shadow); overflow:hidden;
  min-height:320px;
}

/* Comparison table */
.cmp-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:18px 24px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  background:var(--surface-2); font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cmp-table thead th.us{color:var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2))}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td.feature{font-weight:600}
.cmp-table .y{color:#10B981; font-weight:700}
.cmp-table .n{color:#C2334B; font-weight:700}
.cmp-table .us-col{background: color-mix(in oklch, var(--accent) 4%, var(--surface))}

/* Price grid */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price{
  border:1px solid var(--border); border-radius:14px; padding:28px;
  background:var(--surface); position:relative;
}
.price.hot{
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent);
}
.price .badge-rec{
  position:absolute; top:-12px; left:24px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  padding:4px 10px; border-radius:6px; letter-spacing:0.06em; font-weight:700;
}
.price .tier{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.08em; margin-bottom:14px}
.price .amount{display:flex; align-items:baseline; gap:6px; margin-bottom:4px}
.price .amount .num{font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1}
.price .amount .per{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted)}
.price .sub{font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; color:var(--muted); margin-bottom:22px}
.price button{width:100%; margin-bottom:22px}
.price .features{border-top:1px dashed var(--border); padding-top:18px; display:flex; flex-direction:column; gap:10px}
.price .features div{display:flex; gap:10px; font-size:13.5px; align-items:center}
.price .features div::before{content:'+'; color:var(--accent); font-family:'JetBrains Mono', monospace; font-weight:700}

/* Banner */
.banner{
  background:var(--accent); color:var(--accent-ink);
  border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.banner .body{flex:1; min-width:260px}
.banner h3{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; font-size:28px; margin:0 0 4px; letter-spacing:-0.01em}
.banner p{margin:0; font-size:14px; opacity:0.78}

/* Big CTA */
.cta-wrap{padding:40px 0 100px}
.cta{
  background:var(--code-bg); color:#F2EFE6;
  border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.cta .sun{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:var(--accent); opacity:0.85;
}
.cta .ready-tag{
  position:absolute; top:36px; right:36px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1;
}
.cta-body{position:relative; z-index:1; max-width:700px}
.cta h2{font-weight:700; font-size:56px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
.cta p{font-size:17px; color:#9594B5; margin:0 0 32px; max-width:500px}
.cta .actions{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}

/* Footer */
footer.foot{padding:48px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-col h4{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col .links{display:flex; flex-direction:column; gap:8px}
.foot-col .links a{font-size:13px; color:var(--text); text-decoration:none}
.foot-col .links a:hover{color:var(--accent)}
.foot-tag{font-size:13px; color:var(--muted); margin:14px 0; max-width:240px; line-height:1.55}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* Theme toggle (navbar) */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}

/* Hero side art (terminal-ish) */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  line-height:1.8; box-shadow:var(--shadow);
}
.term-card .chrome{display:flex; gap:6px; margin-bottom:14px}
.term-card .chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
.term-card .chrome i:nth-child(1){background:#FF5F57}
.term-card .chrome i:nth-child(2){background:#FEBC2E}
.term-card .chrome i:nth-child(3){background:#28C840}
.term-card .pp{color:var(--muted)}
.term-card .ok{color:#10B981}
.term-card .ac{color:var(--accent)}

/* Responsive */
@media (max-width: 1080px){
  .phero h1{font-size:60px}
  .trio{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .detail-row{grid-template-columns:1fr; gap:32px; padding:36px 0}
  .detail-row.flip .text-col{order:0}
  .detail-row.flip .visual-col{order:1}
  .hero-split{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .phero h1{font-size:44px}
  .block-head h2{font-size:34px}
  .cta{padding:48px 28px}
  .cta h2{font-size:38px}
  section.block{padding:64px 0}
  .container{padding:0 20px}
  header.nav{padding:14px 20px}
  .cmp-table th, .cmp-table td{padding:14px 16px; font-size:13px}
}
@media (max-width: 600px){
  .cmp-table thead{display:none}
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td{display:block; width:100%}
  .cmp-table tbody tr{border-bottom:1px solid var(--border); padding:16px}
  .cmp-table tbody tr:last-child{border-bottom:none}
  .cmp-table td.feature{font-size:16px; font-weight:600; padding:0 0 10px 0; border-bottom:1px solid var(--border); margin-bottom:10px}
  .cmp-table td:not(.feature){display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border:none; font-size:13px}
  .cmp-table td:not(.feature)::before{content:attr(data-label); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); flex-shrink:0; margin-right:12px}
}


/* ===== Extracted from app/customer.html ===== */
/* ===== Ticaga App — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#F7F5EE;
  --sidebar-bg:#F4F2EC; --topbar-bg:#FFFFFF;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-2:#6C6ADE; --accent-soft:rgba(124,122,237,0.10); --accent-ink:#0E0E1F;
  --row-hover:rgba(124,122,237,0.05);
  --grid:rgba(19,19,38,0.025);
  --logo-src:url('../img/ticaga-colour.svg');
  --shadow-sm: 0 1px 2px rgba(19,19,38,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,38,0.06);
  --priority-high-bg:#FCE3E6; --priority-high-fg:#C2334B;
  --priority-med-bg:#FFE9C9;  --priority-med-fg:#A55F0E;
  --priority-low-bg:#E1F2DD;  --priority-low-fg:#1F6F3A;
  --status-open-bg:#E5E2FE;   --status-open-fg:#3F3D9E;
  --status-closed-bg:#FCE3E6; --status-closed-fg:#C2334B;
  --status-prog-bg:#FFEFD0;   --status-prog-fg:#8A5300;
  --status-done-bg:#E1F2DD;   --status-done-fg:#1F6F3A;
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --sidebar-bg:#11101C; --topbar-bg:#1A1928;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-2:#7C7AED; --accent-soft:rgba(160,158,245,0.12); --accent-ink:#0E0E1F;
  --row-hover:rgba(160,158,245,0.06);
  --grid:rgba(160,158,245,0.04);
  --logo-src:url('../img/ticaga-logo.svg');
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --priority-high-bg:rgba(248,113,113,0.15); --priority-high-fg:#FCA5A5;
  --priority-med-bg:rgba(251,191,36,0.15);   --priority-med-fg:#FCD34D;
  --priority-low-bg:rgba(74,222,128,0.15);   --priority-low-fg:#86EFAC;
  --status-open-bg:rgba(160,158,245,0.18);   --status-open-fg:#C5C3FA;
  --status-closed-bg:rgba(248,113,113,0.15); --status-closed-fg:#FCA5A5;
  --status-prog-bg:rgba(251,191,36,0.15);    --status-prog-fg:#FCD34D;
  --status-done-bg:rgba(74,222,128,0.15);    --status-done-fg:#86EFAC;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ max-width:100%; display:block }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }
.serif-it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400 }

/* ===== Shell layout ===== */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px }

.sb-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 22px;
}
.sb-logo img{ height:24px; width:auto }

.sb-group{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  padding:14px 12px 6px;
}
.sb-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition: background .12s ease, color .12s ease;
}
.sb-link:hover{ color:var(--text); background:var(--row-hover) }
.sb-link.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.sb-link .ico{ width:18px; height:18px; flex:0 0 18px; opacity:0.7 }
.sb-link.is-active .ico{ opacity:1 }
.sb-link .lbl{ flex:1 }
.sb-link .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-2);
  padding:2px 8px; border-radius:6px; min-width:24px; text-align:center;
}
.sb-link.is-active .count{ background:var(--accent); color:var(--accent-ink) }

.sb-user{
  margin-top:auto; padding:12px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--surface);
}
.sb-user .ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, #8AA9E8, #6B7280);
  background-size:cover; background-position:center;
}
.sb-user .meta{ flex:1; min-width:0 }
.sb-user .nm{ font-size:13px; font-weight:600; line-height:1.2 }
.sb-user .rl{ font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.04em }
.sb-user .chev{ color:var(--faint) }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 32px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tb-admin{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tb-admin:hover{ background:var(--accent-2); color:#fff }
.tb-create{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-2); color:#fff;
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
}
.tb-create:hover{ filter:brightness(1.05) }

.tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  width:380px; max-width:46%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--muted); font-size:13.5px;
}
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tb-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:13.5px;
}
.tb-search svg{ color:var(--faint); flex:0 0 16px }
.tb-icons{ display:flex; gap:6px }
.tb-iconbtn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--border-strong) }

/* ===== Main area ===== */
.main{ padding:28px 32px 80px; min-width:0 }
.page-head{ margin-bottom:24px }
.page-head h1{
  font-weight:700; font-size:30px; letter-spacing:-0.025em; line-height:1.1;
  margin:0 0 6px;
}
.page-head p{ color:var(--muted); margin:0; font-size:14.5px }

/* ===== Cards ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}
.card-pad-lg{ padding:28px }
.card-row{ display:flex; align-items:center; gap:16px }

/* ===== Stat cards (dashboard top) ===== */
.stats-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:16px;
}
.stat-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.stat-meta .lbl{ font-size:13px; color:var(--muted); margin-bottom:2px }
.stat-meta .val{ font-weight:700; font-size:28px; letter-spacing:-0.02em; line-height:1 }
.stat-card .trend{
  margin-left:auto; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--muted);
}

/* ===== Filters bar ===== */
.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.filters .lbl{ font-size:13px; color:var(--muted); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text); font-weight:500;
}
.chip:hover{ border-color:var(--border-strong) }
.chip .ct{ color:var(--faint); font-family:'JetBrains Mono', monospace; font-size:11px }
.chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2) }
.chip.is-on .ct{ color:var(--accent-2) }

/* ===== Table-style list ===== */
.list-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.list-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.list-head h2{ font-size:18px; font-weight:700; margin:0 }
.list-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.list-search{
  flex:1; max-width:320px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; background:var(--surface);
  color:var(--muted); font-size:13px;
}
.list-search input{ flex:1; background:transparent; border:none; outline:none; font:inherit; color:var(--text) }
.list-filter-btn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.list-filter-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  padding:1px 5px; border-radius:99px; font-weight:700;
}

.list-thead{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:18px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--row-hover) }
.list-row .tk-title{
  display:flex; flex-direction:column; gap:4px;
}
.list-row .tk-title .id{
  font-size:14px; font-weight:600; color:var(--accent-2);
}
.list-row .tk-title .sub{
  font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center;
}
.list-row .tk-title .sub .meta-ico{
  display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono', monospace; font-size:11px;
}
.list-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; color:var(--muted); font-size:13px;
}
.cb{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; cursor:pointer; flex:0 0 18px;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.badge-high{ background:var(--priority-high-bg); color:var(--priority-high-fg) }
.badge-med{ background:var(--priority-med-bg); color:var(--priority-med-fg) }
.badge-low{ background:var(--priority-low-bg); color:var(--priority-low-fg) }
.badge-open{ background:var(--status-open-bg); color:var(--status-open-fg) }
.badge-closed{ background:var(--status-closed-bg); color:var(--status-closed-fg) }
.badge-prog{ background:var(--status-prog-bg); color:var(--status-prog-fg) }
.badge-done{ background:var(--status-done-bg); color:var(--status-done-fg) }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:none;
  transition: filter .15s, transform .08s, border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border) }
.btn-ghost:hover{ border-color:var(--border-strong) }
.btn-sm{ padding:7px 12px; font-size:12px }

/* ===== Two-column dashboard ===== */
.two-col{
  display:grid; grid-template-columns:1.2fr 1fr; gap:16px;
}
.note{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color:var(--accent-2); border:1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius:10px; padding:14px 16px; font-size:13.5px;
}
:root[data-theme="dark"] .note{ color:var(--text) }

/* ===== Empty state ===== */
.empty{
  padding:36px 22px; text-align:center; color:var(--muted);
  font-size:14px;
}

/* ===== Live chat floating ===== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(124,122,237,0.32);
  border:none; cursor:pointer;
}
.chat-fab:hover{ filter:brightness(1.05) }

/* ===== Theme toggle (topbar) ===== */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.theme-fab button.is-active{ background:var(--accent); color:var(--accent-ink) }

/* ===== Ticket detail layout ===== */
.detail-grid{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
}
.thread{ display:flex; flex-direction:column; gap:14px }
.msg{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
}
.msg.is-agent{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 22%, var(--border)) }
.msg-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.msg-head .ava{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
}
.msg-head .nm{ font-weight:700; font-size:14px }
.msg-head .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:6px }
.msg-head .time{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.msg-body{ font-size:14px; line-height:1.6; color:var(--text) }
.msg-body p{ margin:0 0 10px }
.msg-body p:last-child{ margin-bottom:0 }

.reply-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px;
}
.reply-tabs{ display:flex; gap:4px; margin-bottom:12px }
.reply-tab{
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none;
}
.reply-tab.is-on{ background:var(--accent-soft); color:var(--accent-2) }
.reply-area{
  min-height:120px; width:100%;
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; resize:vertical; font:inherit; font-size:14px;
  background:var(--bg); color:var(--text); outline:none;
}
.reply-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:12px }
.reply-actions .right{ margin-left:auto; display:flex; gap:8px }

.aside-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.aside-card h3{
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--border) }
.kv:first-of-type{ border-top:none }
.kv .k{ color:var(--muted) }
.kv .v{ font-weight:600 }
.kv .v.muted{ color:var(--muted); font-weight:400 }

/* ===== KB grid ===== */
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kb-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; min-height:160px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s, border-color .12s;
}
.kb-card:hover{ transform:translateY(-2px); border-color:var(--accent) }
.kb-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.kb-card h3{ font-size:16px; font-weight:700; margin:0 }
.kb-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; flex:1 }
.kb-card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--faint) }

/* ===== Roadmap board ===== */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; padding:14px;
  min-height:480px;
}
.col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:4px 4px 10px; border-bottom:1px dashed var(--border);
}
.col-head .dot{ width:8px; height:8px; border-radius:99px; background:var(--accent) }
.col-head h3{ margin:0; font-size:13px; font-weight:700 }
.col-head .ct{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

.rd-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-bottom:8px; display:flex; flex-direction:column; gap:8px;
}
.rd-card h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.3 }
.rd-card p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.rd-card .foot{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--faint) }
.rd-card .vote{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
  font-weight:700;
}

/* ===== Live chat list ===== */
.chat-shell{
  display:grid; grid-template-columns:320px 1fr; gap:16px; min-height:600px;
}
.chat-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.chat-list .hd{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.chat-list .hd h3{ margin:0; font-size:14px; font-weight:700 }
.chat-item{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-item:last-child{ border-bottom:none }
.chat-item:hover{ background:var(--row-hover) }
.chat-item.is-on{ background:var(--accent-soft) }
.chat-item .ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
.chat-item .body{ flex:1; min-width:0 }
.chat-item .nm{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between }
.chat-item .nm .tm{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:400 }
.chat-item .ms{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chat-window{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; min-height:600px;
}
.chat-window .hd{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px }
.chat-window .hd .ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.chat-window .hd .nm{ font-weight:700; font-size:14px; line-height:1.2 }
.chat-window .hd .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.chat-window .stream{ flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto }
.bubble{ max-width:65%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5 }
.bubble.in{ background:var(--surface-2); align-self:flex-start; border-top-left-radius:4px }
.bubble.out{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-top-right-radius:4px }
.bubble .tm{ display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:4px }
.bubble.out .tm{ color:rgba(14,14,31,0.55) }
.chat-window .composer{ border-top:1px solid var(--border); padding:14px 18px; display:flex; gap:10px; align-items:center }
.chat-window .composer input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:11px 14px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none }
.chat-window .composer input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ===== Customers table ===== */
.cust-thead{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cust-row{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.cust-row:last-child{ border-bottom:none }
.cust-row:hover{ background:var(--row-hover) }
.cust-row .who{ display:flex; align-items:center; gap:12px }
.cust-row .who .ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px }
.cust-row .who .nm{ font-size:13.5px; font-weight:600 }
.cust-row .who .em{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

/* ===== Departments cards ===== */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dept-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.dept-card .top{ display:flex; align-items:flex-start; gap:14px }
.dept-card .ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px;
}
.dept-card h3{ margin:0; font-size:16px; font-weight:700 }
.dept-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dept-stats{ display:flex; gap:18px; padding-top:14px; border-top:1px dashed var(--border) }
.dept-stats .sv{ font-weight:700; font-size:18px; letter-spacing:-0.02em }
.dept-stats .sl{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em }

/* ===== Announcements ===== */
.ann-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin-bottom:12px;
}
.ann-card .top{ display:flex; align-items:center; gap:14px; margin-bottom:8px }
.ann-card .tag{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
}
.ann-card .tm{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto }
.ann-card h3{ margin:0 0 6px; font-size:16px; font-weight:700 }
.ann-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55 }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stats-row{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr }
  .kb-grid{ grid-template-columns:1fr 1fr }
  .board{ grid-template-columns:1fr 1fr }
  .dept-grid{ grid-template-columns:1fr 1fr }
  .detail-grid{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .stats-row{ grid-template-columns:1fr }
  .kb-grid, .board, .dept-grid{ grid-template-columns:1fr }
  .chat-shell{ grid-template-columns:1fr }
  .tb-search{ display:none }
}


/* ===== Extracted from app/customer.html ===== */
/* ===== Customer profile page-specific ===== */
  .cust-banner{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; margin-bottom:16px;
  }
  .cust-banner .cover{
    height:140px; background: linear-gradient(115deg, #8C8AF0 0%, #7C7AED 55%, #6C6ADE 100%);
  }
  .cust-banner .body{
    padding:0 28px 24px;
  }
  .cust-banner .top{
    display:flex; align-items:flex-start; gap:18px;
    margin-top:-32px;
  }
  .cust-banner .ava{
    width:72px; height:72px; border-radius:14px;
    background:#7C7AED; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(19,19,38,0.18), 0 0 0 4px var(--surface);
    flex:0 0 72px; position:relative;
    margin-top:0;
  }
  .cust-banner .ava svg{ width:34px; height:34px }
  .cust-banner .ava .dot{
    position:absolute; bottom:-2px; right:-2px;
    width:14px; height:14px; border-radius:50%;
    background:#E53E5C; border:2.5px solid var(--surface);
  }
  .cust-banner .who{
    flex:1; padding-top:42px; min-width:0;
  }
  .cust-banner .name-row{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .cust-banner .name-row h1{
    margin:0; font-weight:700; font-size:24px; letter-spacing:-0.02em; line-height:1.1;
  }
  .cust-banner .name-row .pill{
    display:inline-flex; align-items:center; padding:3px 10px;
    background: color-mix(in oklch, var(--accent) 14%, transparent);
    color:var(--accent-2);
    border-radius:6px; font-size:12px; font-weight:600;
  }
  .cust-banner .email{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:13px; color:var(--muted); margin-top:4px;
  }
  .cust-banner .actions{
    margin-top:42px; margin-left:auto; flex:0 0 auto;
  }
  .cust-actions-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:9px 16px; border-radius:9px;
    background:var(--surface); border:1px solid var(--border);
    color:var(--text); font-weight:600; font-size:13.5px;
  }
  .cust-actions-btn:hover{ border-color:var(--border-strong) }

  .cust-info{
    margin-top:24px; padding-top:24px; border-top:1px solid var(--border);
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 28px;
  }
  .cust-info .lbl{
    font-family:'JetBrains Mono', monospace; font-size:10.5px;
    color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
    margin-bottom:4px;
  }
  .cust-info .val{ font-size:15px; font-weight:600 }
  .cust-info .val.muted{ color:var(--muted); font-weight:500 }
  .cust-info .badge-active{
    display:inline-flex; align-items:center; padding:3px 10px;
    background:var(--status-done-bg); color:var(--status-done-fg);
    border-radius:99px; font-size:12px; font-weight:600;
  }

  /* Stat cards — flat-style icons matching screenshots */
  .stat-card .stat-icon.violet-soft{ background: color-mix(in oklch, var(--accent) 12%, transparent); color:var(--accent-2) }
  .stat-card .stat-icon.green-soft{ background: color-mix(in oklch, #10B981 16%, transparent); color:#10B981 }

  /* Tickets empty state inside card */
  .ticket-block{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; margin-bottom:16px;
  }
  .ticket-block .hd{
    padding:20px 24px;
    display:flex; align-items:center; gap:14px;
  }
  .ticket-block .hd h2{ margin:0; font-size:18px; font-weight:700 }
  .ticket-block .hd .search{
    margin-left:auto;
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border:1px solid var(--border); border-radius:8px;
    color:var(--muted); font-size:13px;
    min-width:200px;
  }
  .ticket-block .empty-state{
    padding:48px 24px 36px; text-align:center;
    color:var(--text); font-weight:600; font-size:15.5px;
    border-top:1px solid var(--border);
  }
  .ticket-block .col-head{
    display:grid; grid-template-columns:120px 1fr 140px 100px 90px;
    gap:16px; padding:12px 24px;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
    color:var(--muted); font-weight:600; text-transform:uppercase;
    background:var(--surface-2); border-top:1px solid var(--border);
  }

  /* Services */
  .svc-block{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; margin-bottom:16px;
  }
  .svc-block .hd{
    padding:20px 24px; font-size:18px; font-weight:700; border-bottom:1px solid var(--border);
  }
  .svc-block .body{
    padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .svc-card{
    border:1px solid var(--border); border-radius:12px;
    padding:20px 22px;
    display:flex; flex-direction:column; gap:14px;
    background:var(--surface);
  }
  .svc-card .top{
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  }
  .svc-card h3{ margin:0; font-size:18px; font-weight:700; letter-spacing:-0.015em }
  .svc-card .svc-id{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted);
    margin-top:2px;
  }
  .svc-card .meta-row{
    display:flex; justify-content:space-between; gap:12px;
    font-size:13.5px;
  }
  .svc-card .meta-row strong{ color:var(--text); font-weight:600 }
  .svc-card .meta-row span.k{ color:var(--muted) }
  .svc-card .props{
    background:var(--surface-2); border-radius:8px; padding:14px 16px;
    font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.8;
  }
  .svc-card .props .k{ color:var(--text); font-weight:700 }
  .svc-card .props .v{ color:var(--muted) }
  .svc-card .ftr{
    display:flex; justify-content:flex-end;
    margin-top:auto;
  }
  .svc-card .manage{
    padding:7px 14px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--text);
    font-size:12.5px; font-weight:600;
  }
  .svc-card .manage:hover{ border-color:var(--border-strong) }
  .svc-empty{
    border:1.5px dashed var(--border-strong); border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:13.5px;
    min-height:200px;
  }

  /* Invoices */
  .inv-block{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    overflow:hidden;
  }
  .inv-block .hd{
    padding:18px 24px; display:flex; align-items:center;
    border-bottom:1px solid var(--border);
  }
  .inv-block .hd h2{ margin:0; font-size:18px; font-weight:700 }
  .inv-block .hd .new-inv{
    margin-left:auto; padding:7px 14px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--text);
    font-size:12.5px; font-weight:600;
    display:inline-flex; gap:8px; align-items:center;
  }
  .inv-block .hd .new-inv:hover{ border-color:var(--accent); color:var(--accent-2) }
  .inv-thead{
    display:grid; grid-template-columns:160px 1fr 1fr 1fr 80px;
    gap:16px; padding:12px 24px;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
    color:var(--muted); font-weight:600; text-transform:uppercase;
    background:var(--surface-2); border-bottom:1px solid var(--border);
  }
  .inv-row{
    display:grid; grid-template-columns:160px 1fr 1fr 1fr 80px;
    gap:16px; padding:18px 24px;
    align-items:center;
    border-bottom:1px solid var(--border);
    font-size:14px;
  }
  .inv-row:last-child{ border-bottom:none }
  .inv-row .num{ font-weight:600 }
  .inv-row .due{ font-size:12px; color:var(--muted); margin-top:2px }
  .inv-row .badge-void{
    display:inline-flex; padding:3px 12px; border-radius:99px;
    background:#FCE3E6; color:#C2334B;
    font-size:12px; font-weight:600;
  }
  :root[data-theme="dark"] .inv-row .badge-void{ background:rgba(248,113,113,0.15); color:#FCA5A5 }
  .inv-row .view-btn{
    padding:6px 12px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface); color:var(--text);
    font-size:12px; font-weight:600;
    justify-self:end;
  }

  @media (max-width: 1100px){
    .cust-info{ grid-template-columns:repeat(2, 1fr) }
    .svc-block .body{ grid-template-columns:1fr }
  }
  @media (max-width: 720px){
    .cust-banner .body{ padding:0 18px 20px }
    .cust-banner .actions{ margin-top:18px; width:100% }
    .cust-actions-btn{ width:100% }
    .cust-banner .top{ flex-wrap:wrap }
  }


/* ===== Extracted from app/dashboard.html ===== */
/* ===== Ticaga App — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#F7F5EE;
  --sidebar-bg:#F4F2EC; --topbar-bg:#FFFFFF;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-2:#6C6ADE; --accent-soft:rgba(124,122,237,0.10); --accent-ink:#0E0E1F;
  --row-hover:rgba(124,122,237,0.05);
  --grid:rgba(19,19,38,0.025);
  --logo-src:url('../img/ticaga-colour.svg');
  --shadow-sm: 0 1px 2px rgba(19,19,38,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,38,0.06);
  --priority-high-bg:#FCE3E6; --priority-high-fg:#C2334B;
  --priority-med-bg:#FFE9C9;  --priority-med-fg:#A55F0E;
  --priority-low-bg:#E1F2DD;  --priority-low-fg:#1F6F3A;
  --status-open-bg:#E5E2FE;   --status-open-fg:#3F3D9E;
  --status-closed-bg:#FCE3E6; --status-closed-fg:#C2334B;
  --status-prog-bg:#FFEFD0;   --status-prog-fg:#8A5300;
  --status-done-bg:#E1F2DD;   --status-done-fg:#1F6F3A;
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --sidebar-bg:#11101C; --topbar-bg:#1A1928;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-2:#7C7AED; --accent-soft:rgba(160,158,245,0.12); --accent-ink:#0E0E1F;
  --row-hover:rgba(160,158,245,0.06);
  --grid:rgba(160,158,245,0.04);
  --logo-src:url('../img/ticaga-logo.svg');
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --priority-high-bg:rgba(248,113,113,0.15); --priority-high-fg:#FCA5A5;
  --priority-med-bg:rgba(251,191,36,0.15);   --priority-med-fg:#FCD34D;
  --priority-low-bg:rgba(74,222,128,0.15);   --priority-low-fg:#86EFAC;
  --status-open-bg:rgba(160,158,245,0.18);   --status-open-fg:#C5C3FA;
  --status-closed-bg:rgba(248,113,113,0.15); --status-closed-fg:#FCA5A5;
  --status-prog-bg:rgba(251,191,36,0.15);    --status-prog-fg:#FCD34D;
  --status-done-bg:rgba(74,222,128,0.15);    --status-done-fg:#86EFAC;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ max-width:100%; display:block }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }
.serif-it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400 }

/* ===== Shell layout ===== */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px }

.sb-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 22px;
}
.sb-logo img{ height:24px; width:auto }

.sb-group{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  padding:14px 12px 6px;
}
.sb-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition: background .12s ease, color .12s ease;
}
.sb-link:hover{ color:var(--text); background:var(--row-hover) }
.sb-link.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.sb-link .ico{ width:18px; height:18px; flex:0 0 18px; opacity:0.7 }
.sb-link.is-active .ico{ opacity:1 }
.sb-link .lbl{ flex:1 }
.sb-link .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-2);
  padding:2px 8px; border-radius:6px; min-width:24px; text-align:center;
}
.sb-link.is-active .count{ background:var(--accent); color:var(--accent-ink) }

.sb-user{
  margin-top:auto; padding:12px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--surface);
}
.sb-user .ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, #8AA9E8, #6B7280);
  background-size:cover; background-position:center;
}
.sb-user .meta{ flex:1; min-width:0 }
.sb-user .nm{ font-size:13px; font-weight:600; line-height:1.2 }
.sb-user .rl{ font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.04em }
.sb-user .chev{ color:var(--faint) }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 32px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tb-admin{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tb-admin:hover{ background:var(--accent-2); color:#fff }
.tb-create{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-2); color:#fff;
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
}
.tb-create:hover{ filter:brightness(1.05) }

.tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  width:380px; max-width:46%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--muted); font-size:13.5px;
}
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tb-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:13.5px;
}
.tb-search svg{ color:var(--faint); flex:0 0 16px }
.tb-icons{ display:flex; gap:6px }
.tb-iconbtn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--border-strong) }

/* ===== Main area ===== */
.main{ padding:28px 32px 80px; min-width:0 }
.page-head{ margin-bottom:24px }
.page-head h1{
  font-weight:700; font-size:30px; letter-spacing:-0.025em; line-height:1.1;
  margin:0 0 6px;
}
.page-head p{ color:var(--muted); margin:0; font-size:14.5px }

/* ===== Cards ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}
.card-pad-lg{ padding:28px }
.card-row{ display:flex; align-items:center; gap:16px }

/* ===== Stat cards (dashboard top) ===== */
.stats-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:16px;
}
.stat-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.stat-meta .lbl{ font-size:13px; color:var(--muted); margin-bottom:2px }
.stat-meta .val{ font-weight:700; font-size:28px; letter-spacing:-0.02em; line-height:1 }
.stat-card .trend{
  margin-left:auto; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--muted);
}

/* ===== Filters bar ===== */
.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.filters .lbl{ font-size:13px; color:var(--muted); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text); font-weight:500;
}
.chip:hover{ border-color:var(--border-strong) }
.chip .ct{ color:var(--faint); font-family:'JetBrains Mono', monospace; font-size:11px }
.chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2) }
.chip.is-on .ct{ color:var(--accent-2) }

/* ===== Table-style list ===== */
.list-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.list-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.list-head h2{ font-size:18px; font-weight:700; margin:0 }
.list-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.list-search{
  flex:1; max-width:320px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; background:var(--surface);
  color:var(--muted); font-size:13px;
}
.list-search input{ flex:1; background:transparent; border:none; outline:none; font:inherit; color:var(--text) }
.list-filter-btn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.list-filter-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  padding:1px 5px; border-radius:99px; font-weight:700;
}

.list-thead{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:18px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--row-hover) }
.list-row .tk-title{
  display:flex; flex-direction:column; gap:4px;
}
.list-row .tk-title .id{
  font-size:14px; font-weight:600; color:var(--accent-2);
}
.list-row .tk-title .sub{
  font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center;
}
.list-row .tk-title .sub .meta-ico{
  display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono', monospace; font-size:11px;
}
.list-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; color:var(--muted); font-size:13px;
}
.cb{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; cursor:pointer; flex:0 0 18px;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.badge-high{ background:var(--priority-high-bg); color:var(--priority-high-fg) }
.badge-med{ background:var(--priority-med-bg); color:var(--priority-med-fg) }
.badge-low{ background:var(--priority-low-bg); color:var(--priority-low-fg) }
.badge-open{ background:var(--status-open-bg); color:var(--status-open-fg) }
.badge-closed{ background:var(--status-closed-bg); color:var(--status-closed-fg) }
.badge-prog{ background:var(--status-prog-bg); color:var(--status-prog-fg) }
.badge-done{ background:var(--status-done-bg); color:var(--status-done-fg) }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:none;
  transition: filter .15s, transform .08s, border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border) }
.btn-ghost:hover{ border-color:var(--border-strong) }
.btn-sm{ padding:7px 12px; font-size:12px }

/* ===== Two-column dashboard ===== */
.two-col{
  display:grid; grid-template-columns:1.2fr 1fr; gap:16px;
}
.note{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color:var(--accent-2); border:1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius:10px; padding:14px 16px; font-size:13.5px;
}
:root[data-theme="dark"] .note{ color:var(--text) }

/* ===== Empty state ===== */
.empty{
  padding:36px 22px; text-align:center; color:var(--muted);
  font-size:14px;
}

/* ===== Live chat floating ===== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(124,122,237,0.32);
  border:none; cursor:pointer;
}
.chat-fab:hover{ filter:brightness(1.05) }

/* ===== Theme toggle (topbar) ===== */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.theme-fab button.is-active{ background:var(--accent); color:var(--accent-ink) }

/* ===== Ticket detail layout ===== */
.detail-grid{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
}
.thread{ display:flex; flex-direction:column; gap:14px }
.msg{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
}
.msg.is-agent{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 22%, var(--border)) }
.msg-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.msg-head .ava{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
}
.msg-head .nm{ font-weight:700; font-size:14px }
.msg-head .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:6px }
.msg-head .time{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.msg-body{ font-size:14px; line-height:1.6; color:var(--text) }
.msg-body p{ margin:0 0 10px }
.msg-body p:last-child{ margin-bottom:0 }

.reply-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px;
}
.reply-tabs{ display:flex; gap:4px; margin-bottom:12px }
.reply-tab{
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none;
}
.reply-tab.is-on{ background:var(--accent-soft); color:var(--accent-2) }
.reply-area{
  min-height:120px; width:100%;
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; resize:vertical; font:inherit; font-size:14px;
  background:var(--bg); color:var(--text); outline:none;
}
.reply-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:12px }
.reply-actions .right{ margin-left:auto; display:flex; gap:8px }

.aside-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.aside-card h3{
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--border) }
.kv:first-of-type{ border-top:none }
.kv .k{ color:var(--muted) }
.kv .v{ font-weight:600 }
.kv .v.muted{ color:var(--muted); font-weight:400 }

/* ===== KB grid ===== */
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kb-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; min-height:160px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s, border-color .12s;
}
.kb-card:hover{ transform:translateY(-2px); border-color:var(--accent) }
.kb-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.kb-card h3{ font-size:16px; font-weight:700; margin:0 }
.kb-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; flex:1 }
.kb-card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--faint) }

/* ===== Roadmap board ===== */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; padding:14px;
  min-height:480px;
}
.col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:4px 4px 10px; border-bottom:1px dashed var(--border);
}
.col-head .dot{ width:8px; height:8px; border-radius:99px; background:var(--accent) }
.col-head h3{ margin:0; font-size:13px; font-weight:700 }
.col-head .ct{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

.rd-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-bottom:8px; display:flex; flex-direction:column; gap:8px;
}
.rd-card h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.3 }
.rd-card p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.rd-card .foot{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--faint) }
.rd-card .vote{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
  font-weight:700;
}

/* ===== Live chat list ===== */
.chat-shell{
  display:grid; grid-template-columns:320px 1fr; gap:16px; min-height:600px;
}
.chat-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.chat-list .hd{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.chat-list .hd h3{ margin:0; font-size:14px; font-weight:700 }
.chat-item{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-item:last-child{ border-bottom:none }
.chat-item:hover{ background:var(--row-hover) }
.chat-item.is-on{ background:var(--accent-soft) }
.chat-item .ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
.chat-item .body{ flex:1; min-width:0 }
.chat-item .nm{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between }
.chat-item .nm .tm{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:400 }
.chat-item .ms{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chat-window{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; min-height:600px;
}
.chat-window .hd{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px }
.chat-window .hd .ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.chat-window .hd .nm{ font-weight:700; font-size:14px; line-height:1.2 }
.chat-window .hd .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.chat-window .stream{ flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto }
.bubble{ max-width:65%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5 }
.bubble.in{ background:var(--surface-2); align-self:flex-start; border-top-left-radius:4px }
.bubble.out{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-top-right-radius:4px }
.bubble .tm{ display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:4px }
.bubble.out .tm{ color:rgba(14,14,31,0.55) }
.chat-window .composer{ border-top:1px solid var(--border); padding:14px 18px; display:flex; gap:10px; align-items:center }
.chat-window .composer input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:11px 14px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none }
.chat-window .composer input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ===== Customers table ===== */
.cust-thead{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cust-row{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.cust-row:last-child{ border-bottom:none }
.cust-row:hover{ background:var(--row-hover) }
.cust-row .who{ display:flex; align-items:center; gap:12px }
.cust-row .who .ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px }
.cust-row .who .nm{ font-size:13.5px; font-weight:600 }
.cust-row .who .em{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

/* ===== Departments cards ===== */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dept-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.dept-card .top{ display:flex; align-items:flex-start; gap:14px }
.dept-card .ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px;
}
.dept-card h3{ margin:0; font-size:16px; font-weight:700 }
.dept-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dept-stats{ display:flex; gap:18px; padding-top:14px; border-top:1px dashed var(--border) }
.dept-stats .sv{ font-weight:700; font-size:18px; letter-spacing:-0.02em }
.dept-stats .sl{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em }

/* ===== Announcements ===== */
.ann-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin-bottom:12px;
}
.ann-card .top{ display:flex; align-items:center; gap:14px; margin-bottom:8px }
.ann-card .tag{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
}
.ann-card .tm{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto }
.ann-card h3{ margin:0 0 6px; font-size:16px; font-weight:700 }
.ann-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55 }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stats-row{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr }
  .kb-grid{ grid-template-columns:1fr 1fr }
  .board{ grid-template-columns:1fr 1fr }
  .dept-grid{ grid-template-columns:1fr 1fr }
  .detail-grid{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .stats-row{ grid-template-columns:1fr }
  .kb-grid, .board, .dept-grid{ grid-template-columns:1fr }
  .chat-shell{ grid-template-columns:1fr }
  .tb-search{ display:none }
}


/* ===== Extracted from app/departments.html ===== */
/* ===== Ticaga App — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#F7F5EE;
  --sidebar-bg:#F4F2EC; --topbar-bg:#FFFFFF;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-2:#6C6ADE; --accent-soft:rgba(124,122,237,0.10); --accent-ink:#0E0E1F;
  --row-hover:rgba(124,122,237,0.05);
  --grid:rgba(19,19,38,0.025);
  --logo-src:url('../img/ticaga-colour.svg');
  --shadow-sm: 0 1px 2px rgba(19,19,38,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,38,0.06);
  --priority-high-bg:#FCE3E6; --priority-high-fg:#C2334B;
  --priority-med-bg:#FFE9C9;  --priority-med-fg:#A55F0E;
  --priority-low-bg:#E1F2DD;  --priority-low-fg:#1F6F3A;
  --status-open-bg:#E5E2FE;   --status-open-fg:#3F3D9E;
  --status-closed-bg:#FCE3E6; --status-closed-fg:#C2334B;
  --status-prog-bg:#FFEFD0;   --status-prog-fg:#8A5300;
  --status-done-bg:#E1F2DD;   --status-done-fg:#1F6F3A;
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --sidebar-bg:#11101C; --topbar-bg:#1A1928;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-2:#7C7AED; --accent-soft:rgba(160,158,245,0.12); --accent-ink:#0E0E1F;
  --row-hover:rgba(160,158,245,0.06);
  --grid:rgba(160,158,245,0.04);
  --logo-src:url('../img/ticaga-logo.svg');
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --priority-high-bg:rgba(248,113,113,0.15); --priority-high-fg:#FCA5A5;
  --priority-med-bg:rgba(251,191,36,0.15);   --priority-med-fg:#FCD34D;
  --priority-low-bg:rgba(74,222,128,0.15);   --priority-low-fg:#86EFAC;
  --status-open-bg:rgba(160,158,245,0.18);   --status-open-fg:#C5C3FA;
  --status-closed-bg:rgba(248,113,113,0.15); --status-closed-fg:#FCA5A5;
  --status-prog-bg:rgba(251,191,36,0.15);    --status-prog-fg:#FCD34D;
  --status-done-bg:rgba(74,222,128,0.15);    --status-done-fg:#86EFAC;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ max-width:100%; display:block }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }
.serif-it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400 }

/* ===== Shell layout ===== */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px }

.sb-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 22px;
}
.sb-logo img{ height:24px; width:auto }

.sb-group{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  padding:14px 12px 6px;
}
.sb-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition: background .12s ease, color .12s ease;
}
.sb-link:hover{ color:var(--text); background:var(--row-hover) }
.sb-link.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.sb-link .ico{ width:18px; height:18px; flex:0 0 18px; opacity:0.7 }
.sb-link.is-active .ico{ opacity:1 }
.sb-link .lbl{ flex:1 }
.sb-link .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-2);
  padding:2px 8px; border-radius:6px; min-width:24px; text-align:center;
}
.sb-link.is-active .count{ background:var(--accent); color:var(--accent-ink) }

.sb-user{
  margin-top:auto; padding:12px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--surface);
}
.sb-user .ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, #8AA9E8, #6B7280);
  background-size:cover; background-position:center;
}
.sb-user .meta{ flex:1; min-width:0 }
.sb-user .nm{ font-size:13px; font-weight:600; line-height:1.2 }
.sb-user .rl{ font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.04em }
.sb-user .chev{ color:var(--faint) }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 32px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tb-admin{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tb-admin:hover{ background:var(--accent-2); color:#fff }
.tb-create{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-2); color:#fff;
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
}
.tb-create:hover{ filter:brightness(1.05) }

.tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  width:380px; max-width:46%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--muted); font-size:13.5px;
}
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tb-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:13.5px;
}
.tb-search svg{ color:var(--faint); flex:0 0 16px }
.tb-icons{ display:flex; gap:6px }
.tb-iconbtn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--border-strong) }

/* ===== Main area ===== */
.main{ padding:28px 32px 80px; min-width:0 }
.page-head{ margin-bottom:24px }
.page-head h1{
  font-weight:700; font-size:30px; letter-spacing:-0.025em; line-height:1.1;
  margin:0 0 6px;
}
.page-head p{ color:var(--muted); margin:0; font-size:14.5px }

/* ===== Cards ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}
.card-pad-lg{ padding:28px }
.card-row{ display:flex; align-items:center; gap:16px }

/* ===== Stat cards (dashboard top) ===== */
.stats-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:16px;
}
.stat-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.stat-meta .lbl{ font-size:13px; color:var(--muted); margin-bottom:2px }
.stat-meta .val{ font-weight:700; font-size:28px; letter-spacing:-0.02em; line-height:1 }
.stat-card .trend{
  margin-left:auto; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--muted);
}

/* ===== Filters bar ===== */
.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.filters .lbl{ font-size:13px; color:var(--muted); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text); font-weight:500;
}
.chip:hover{ border-color:var(--border-strong) }
.chip .ct{ color:var(--faint); font-family:'JetBrains Mono', monospace; font-size:11px }
.chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2) }
.chip.is-on .ct{ color:var(--accent-2) }

/* ===== Table-style list ===== */
.list-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.list-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.list-head h2{ font-size:18px; font-weight:700; margin:0 }
.list-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.list-search{
  flex:1; max-width:320px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; background:var(--surface);
  color:var(--muted); font-size:13px;
}
.list-search input{ flex:1; background:transparent; border:none; outline:none; font:inherit; color:var(--text) }
.list-filter-btn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.list-filter-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  padding:1px 5px; border-radius:99px; font-weight:700;
}

.list-thead{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:18px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--row-hover) }
.list-row .tk-title{
  display:flex; flex-direction:column; gap:4px;
}
.list-row .tk-title .id{
  font-size:14px; font-weight:600; color:var(--accent-2);
}
.list-row .tk-title .sub{
  font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center;
}
.list-row .tk-title .sub .meta-ico{
  display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono', monospace; font-size:11px;
}
.list-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; color:var(--muted); font-size:13px;
}
.cb{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; cursor:pointer; flex:0 0 18px;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.badge-high{ background:var(--priority-high-bg); color:var(--priority-high-fg) }
.badge-med{ background:var(--priority-med-bg); color:var(--priority-med-fg) }
.badge-low{ background:var(--priority-low-bg); color:var(--priority-low-fg) }
.badge-open{ background:var(--status-open-bg); color:var(--status-open-fg) }
.badge-closed{ background:var(--status-closed-bg); color:var(--status-closed-fg) }
.badge-prog{ background:var(--status-prog-bg); color:var(--status-prog-fg) }
.badge-done{ background:var(--status-done-bg); color:var(--status-done-fg) }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:none;
  transition: filter .15s, transform .08s, border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border) }
.btn-ghost:hover{ border-color:var(--border-strong) }
.btn-sm{ padding:7px 12px; font-size:12px }

/* ===== Two-column dashboard ===== */
.two-col{
  display:grid; grid-template-columns:1.2fr 1fr; gap:16px;
}
.note{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color:var(--accent-2); border:1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius:10px; padding:14px 16px; font-size:13.5px;
}
:root[data-theme="dark"] .note{ color:var(--text) }

/* ===== Empty state ===== */
.empty{
  padding:36px 22px; text-align:center; color:var(--muted);
  font-size:14px;
}

/* ===== Live chat floating ===== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(124,122,237,0.32);
  border:none; cursor:pointer;
}
.chat-fab:hover{ filter:brightness(1.05) }

/* ===== Theme toggle (topbar) ===== */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.theme-fab button.is-active{ background:var(--accent); color:var(--accent-ink) }

/* ===== Ticket detail layout ===== */
.detail-grid{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
}
.thread{ display:flex; flex-direction:column; gap:14px }
.msg{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
}
.msg.is-agent{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 22%, var(--border)) }
.msg-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.msg-head .ava{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
}
.msg-head .nm{ font-weight:700; font-size:14px }
.msg-head .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:6px }
.msg-head .time{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.msg-body{ font-size:14px; line-height:1.6; color:var(--text) }
.msg-body p{ margin:0 0 10px }
.msg-body p:last-child{ margin-bottom:0 }

.reply-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px;
}
.reply-tabs{ display:flex; gap:4px; margin-bottom:12px }
.reply-tab{
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none;
}
.reply-tab.is-on{ background:var(--accent-soft); color:var(--accent-2) }
.reply-area{
  min-height:120px; width:100%;
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; resize:vertical; font:inherit; font-size:14px;
  background:var(--bg); color:var(--text); outline:none;
}
.reply-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:12px }
.reply-actions .right{ margin-left:auto; display:flex; gap:8px }

.aside-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.aside-card h3{
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--border) }
.kv:first-of-type{ border-top:none }
.kv .k{ color:var(--muted) }
.kv .v{ font-weight:600 }
.kv .v.muted{ color:var(--muted); font-weight:400 }

/* ===== KB grid ===== */
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kb-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; min-height:160px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s, border-color .12s;
}
.kb-card:hover{ transform:translateY(-2px); border-color:var(--accent) }
.kb-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.kb-card h3{ font-size:16px; font-weight:700; margin:0 }
.kb-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; flex:1 }
.kb-card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--faint) }

/* ===== Roadmap board ===== */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; padding:14px;
  min-height:480px;
}
.col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:4px 4px 10px; border-bottom:1px dashed var(--border);
}
.col-head .dot{ width:8px; height:8px; border-radius:99px; background:var(--accent) }
.col-head h3{ margin:0; font-size:13px; font-weight:700 }
.col-head .ct{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

.rd-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-bottom:8px; display:flex; flex-direction:column; gap:8px;
}
.rd-card h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.3 }
.rd-card p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.rd-card .foot{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--faint) }
.rd-card .vote{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
  font-weight:700;
}

/* ===== Live chat list ===== */
.chat-shell{
  display:grid; grid-template-columns:320px 1fr; gap:16px; min-height:600px;
}
.chat-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.chat-list .hd{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.chat-list .hd h3{ margin:0; font-size:14px; font-weight:700 }
.chat-item{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-item:last-child{ border-bottom:none }
.chat-item:hover{ background:var(--row-hover) }
.chat-item.is-on{ background:var(--accent-soft) }
.chat-item .ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
.chat-item .body{ flex:1; min-width:0 }
.chat-item .nm{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between }
.chat-item .nm .tm{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:400 }
.chat-item .ms{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chat-window{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; min-height:600px;
}
.chat-window .hd{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px }
.chat-window .hd .ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.chat-window .hd .nm{ font-weight:700; font-size:14px; line-height:1.2 }
.chat-window .hd .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.chat-window .stream{ flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto }
.bubble{ max-width:65%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5 }
.bubble.in{ background:var(--surface-2); align-self:flex-start; border-top-left-radius:4px }
.bubble.out{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-top-right-radius:4px }
.bubble .tm{ display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:4px }
.bubble.out .tm{ color:rgba(14,14,31,0.55) }
.chat-window .composer{ border-top:1px solid var(--border); padding:14px 18px; display:flex; gap:10px; align-items:center }
.chat-window .composer input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:11px 14px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none }
.chat-window .composer input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ===== Customers table ===== */
.cust-thead{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cust-row{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.cust-row:last-child{ border-bottom:none }
.cust-row:hover{ background:var(--row-hover) }
.cust-row .who{ display:flex; align-items:center; gap:12px }
.cust-row .who .ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px }
.cust-row .who .nm{ font-size:13.5px; font-weight:600 }
.cust-row .who .em{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

/* ===== Departments cards ===== */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dept-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.dept-card .top{ display:flex; align-items:flex-start; gap:14px }
.dept-card .ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px;
}
.dept-card h3{ margin:0; font-size:16px; font-weight:700 }
.dept-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dept-stats{ display:flex; gap:18px; padding-top:14px; border-top:1px dashed var(--border) }
.dept-stats .sv{ font-weight:700; font-size:18px; letter-spacing:-0.02em }
.dept-stats .sl{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em }

/* ===== Announcements ===== */
.ann-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin-bottom:12px;
}
.ann-card .top{ display:flex; align-items:center; gap:14px; margin-bottom:8px }
.ann-card .tag{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
}
.ann-card .tm{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto }
.ann-card h3{ margin:0 0 6px; font-size:16px; font-weight:700 }
.ann-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55 }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stats-row{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr }
  .kb-grid{ grid-template-columns:1fr 1fr }
  .board{ grid-template-columns:1fr 1fr }
  .dept-grid{ grid-template-columns:1fr 1fr }
  .detail-grid{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .stats-row{ grid-template-columns:1fr }
  .kb-grid, .board, .dept-grid{ grid-template-columns:1fr }
  .chat-shell{ grid-template-columns:1fr }
  .tb-search{ display:none }
}


/* ===== Extracted from app/ticket.html ===== */
/* ===== Ticaga App — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#F7F5EE;
  --sidebar-bg:#F4F2EC; --topbar-bg:#FFFFFF;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-2:#6C6ADE; --accent-soft:rgba(124,122,237,0.10); --accent-ink:#0E0E1F;
  --row-hover:rgba(124,122,237,0.05);
  --grid:rgba(19,19,38,0.025);
  --logo-src:url('../img/ticaga-colour.svg');
  --shadow-sm: 0 1px 2px rgba(19,19,38,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,38,0.06);
  --priority-high-bg:#FCE3E6; --priority-high-fg:#C2334B;
  --priority-med-bg:#FFE9C9;  --priority-med-fg:#A55F0E;
  --priority-low-bg:#E1F2DD;  --priority-low-fg:#1F6F3A;
  --status-open-bg:#E5E2FE;   --status-open-fg:#3F3D9E;
  --status-closed-bg:#FCE3E6; --status-closed-fg:#C2334B;
  --status-prog-bg:#FFEFD0;   --status-prog-fg:#8A5300;
  --status-done-bg:#E1F2DD;   --status-done-fg:#1F6F3A;
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --sidebar-bg:#11101C; --topbar-bg:#1A1928;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-2:#7C7AED; --accent-soft:rgba(160,158,245,0.12); --accent-ink:#0E0E1F;
  --row-hover:rgba(160,158,245,0.06);
  --grid:rgba(160,158,245,0.04);
  --logo-src:url('../img/ticaga-logo.svg');
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --priority-high-bg:rgba(248,113,113,0.15); --priority-high-fg:#FCA5A5;
  --priority-med-bg:rgba(251,191,36,0.15);   --priority-med-fg:#FCD34D;
  --priority-low-bg:rgba(74,222,128,0.15);   --priority-low-fg:#86EFAC;
  --status-open-bg:rgba(160,158,245,0.18);   --status-open-fg:#C5C3FA;
  --status-closed-bg:rgba(248,113,113,0.15); --status-closed-fg:#FCA5A5;
  --status-prog-bg:rgba(251,191,36,0.15);    --status-prog-fg:#FCD34D;
  --status-done-bg:rgba(74,222,128,0.15);    --status-done-fg:#86EFAC;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ max-width:100%; display:block }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }
.serif-it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400 }

/* ===== Shell layout ===== */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px }

.sb-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 22px;
}
.sb-logo img{ height:24px; width:auto }

.sb-group{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  padding:14px 12px 6px;
}
.sb-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition: background .12s ease, color .12s ease;
}
.sb-link:hover{ color:var(--text); background:var(--row-hover) }
.sb-link.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.sb-link .ico{ width:18px; height:18px; flex:0 0 18px; opacity:0.7 }
.sb-link.is-active .ico{ opacity:1 }
.sb-link .lbl{ flex:1 }
.sb-link .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-2);
  padding:2px 8px; border-radius:6px; min-width:24px; text-align:center;
}
.sb-link.is-active .count{ background:var(--accent); color:var(--accent-ink) }

.sb-user{
  margin-top:auto; padding:12px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--surface);
}
.sb-user .ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, #8AA9E8, #6B7280);
  background-size:cover; background-position:center;
}
.sb-user .meta{ flex:1; min-width:0 }
.sb-user .nm{ font-size:13px; font-weight:600; line-height:1.2 }
.sb-user .rl{ font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.04em }
.sb-user .chev{ color:var(--faint) }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 32px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tb-admin{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tb-admin:hover{ background:var(--accent-2); color:#fff }
.tb-create{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-2); color:#fff;
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
}
.tb-create:hover{ filter:brightness(1.05) }

.tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  width:380px; max-width:46%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--muted); font-size:13.5px;
}
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tb-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:13.5px;
}
.tb-search svg{ color:var(--faint); flex:0 0 16px }
.tb-icons{ display:flex; gap:6px }
.tb-iconbtn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--border-strong) }

/* ===== Main area ===== */
.main{ padding:28px 32px 80px; min-width:0 }
.page-head{ margin-bottom:24px }
.page-head h1{
  font-weight:700; font-size:30px; letter-spacing:-0.025em; line-height:1.1;
  margin:0 0 6px;
}
.page-head p{ color:var(--muted); margin:0; font-size:14.5px }

/* ===== Cards ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}
.card-pad-lg{ padding:28px }
.card-row{ display:flex; align-items:center; gap:16px }

/* ===== Stat cards (dashboard top) ===== */
.stats-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:16px;
}
.stat-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.stat-meta .lbl{ font-size:13px; color:var(--muted); margin-bottom:2px }
.stat-meta .val{ font-weight:700; font-size:28px; letter-spacing:-0.02em; line-height:1 }
.stat-card .trend{
  margin-left:auto; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--muted);
}

/* ===== Filters bar ===== */
.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.filters .lbl{ font-size:13px; color:var(--muted); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text); font-weight:500;
}
.chip:hover{ border-color:var(--border-strong) }
.chip .ct{ color:var(--faint); font-family:'JetBrains Mono', monospace; font-size:11px }
.chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2) }
.chip.is-on .ct{ color:var(--accent-2) }

/* ===== Table-style list ===== */
.list-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.list-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.list-head h2{ font-size:18px; font-weight:700; margin:0 }
.list-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.list-search{
  flex:1; max-width:320px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; background:var(--surface);
  color:var(--muted); font-size:13px;
}
.list-search input{ flex:1; background:transparent; border:none; outline:none; font:inherit; color:var(--text) }
.list-filter-btn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.list-filter-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  padding:1px 5px; border-radius:99px; font-weight:700;
}

.list-thead{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:18px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--row-hover) }
.list-row .tk-title{
  display:flex; flex-direction:column; gap:4px;
}
.list-row .tk-title .id{
  font-size:14px; font-weight:600; color:var(--accent-2);
}
.list-row .tk-title .sub{
  font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center;
}
.list-row .tk-title .sub .meta-ico{
  display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono', monospace; font-size:11px;
}
.list-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; color:var(--muted); font-size:13px;
}
.cb{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; cursor:pointer; flex:0 0 18px;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.badge-high{ background:var(--priority-high-bg); color:var(--priority-high-fg) }
.badge-med{ background:var(--priority-med-bg); color:var(--priority-med-fg) }
.badge-low{ background:var(--priority-low-bg); color:var(--priority-low-fg) }
.badge-open{ background:var(--status-open-bg); color:var(--status-open-fg) }
.badge-closed{ background:var(--status-closed-bg); color:var(--status-closed-fg) }
.badge-prog{ background:var(--status-prog-bg); color:var(--status-prog-fg) }
.badge-done{ background:var(--status-done-bg); color:var(--status-done-fg) }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:none;
  transition: filter .15s, transform .08s, border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border) }
.btn-ghost:hover{ border-color:var(--border-strong) }
.btn-sm{ padding:7px 12px; font-size:12px }

/* ===== Two-column dashboard ===== */
.two-col{
  display:grid; grid-template-columns:1.2fr 1fr; gap:16px;
}
.note{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color:var(--accent-2); border:1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius:10px; padding:14px 16px; font-size:13.5px;
}
:root[data-theme="dark"] .note{ color:var(--text) }

/* ===== Empty state ===== */
.empty{
  padding:36px 22px; text-align:center; color:var(--muted);
  font-size:14px;
}

/* ===== Live chat floating ===== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(124,122,237,0.32);
  border:none; cursor:pointer;
}
.chat-fab:hover{ filter:brightness(1.05) }

/* ===== Theme toggle (topbar) ===== */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.theme-fab button.is-active{ background:var(--accent); color:var(--accent-ink) }

/* ===== Ticket detail layout ===== */
.detail-grid{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
}
.thread{ display:flex; flex-direction:column; gap:14px }
.msg{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
}
.msg.is-agent{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 22%, var(--border)) }
.msg-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.msg-head .ava{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
}
.msg-head .nm{ font-weight:700; font-size:14px }
.msg-head .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:6px }
.msg-head .time{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.msg-body{ font-size:14px; line-height:1.6; color:var(--text) }
.msg-body p{ margin:0 0 10px }
.msg-body p:last-child{ margin-bottom:0 }

.reply-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px;
}
.reply-tabs{ display:flex; gap:4px; margin-bottom:12px }
.reply-tab{
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none;
}
.reply-tab.is-on{ background:var(--accent-soft); color:var(--accent-2) }
.reply-area{
  min-height:120px; width:100%;
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; resize:vertical; font:inherit; font-size:14px;
  background:var(--bg); color:var(--text); outline:none;
}
.reply-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:12px }
.reply-actions .right{ margin-left:auto; display:flex; gap:8px }

.aside-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.aside-card h3{
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--border) }
.kv:first-of-type{ border-top:none }
.kv .k{ color:var(--muted) }
.kv .v{ font-weight:600 }
.kv .v.muted{ color:var(--muted); font-weight:400 }

/* ===== KB grid ===== */
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kb-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; min-height:160px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s, border-color .12s;
}
.kb-card:hover{ transform:translateY(-2px); border-color:var(--accent) }
.kb-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.kb-card h3{ font-size:16px; font-weight:700; margin:0 }
.kb-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; flex:1 }
.kb-card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--faint) }

/* ===== Roadmap board ===== */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; padding:14px;
  min-height:480px;
}
.col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:4px 4px 10px; border-bottom:1px dashed var(--border);
}
.col-head .dot{ width:8px; height:8px; border-radius:99px; background:var(--accent) }
.col-head h3{ margin:0; font-size:13px; font-weight:700 }
.col-head .ct{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

.rd-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-bottom:8px; display:flex; flex-direction:column; gap:8px;
}
.rd-card h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.3 }
.rd-card p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.rd-card .foot{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--faint) }
.rd-card .vote{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
  font-weight:700;
}

/* ===== Live chat list ===== */
.chat-shell{
  display:grid; grid-template-columns:320px 1fr; gap:16px; min-height:600px;
}
.chat-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.chat-list .hd{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.chat-list .hd h3{ margin:0; font-size:14px; font-weight:700 }
.chat-item{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-item:last-child{ border-bottom:none }
.chat-item:hover{ background:var(--row-hover) }
.chat-item.is-on{ background:var(--accent-soft) }
.chat-item .ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
.chat-item .body{ flex:1; min-width:0 }
.chat-item .nm{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between }
.chat-item .nm .tm{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:400 }
.chat-item .ms{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chat-window{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; min-height:600px;
}
.chat-window .hd{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px }
.chat-window .hd .ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.chat-window .hd .nm{ font-weight:700; font-size:14px; line-height:1.2 }
.chat-window .hd .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.chat-window .stream{ flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto }
.bubble{ max-width:65%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5 }
.bubble.in{ background:var(--surface-2); align-self:flex-start; border-top-left-radius:4px }
.bubble.out{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-top-right-radius:4px }
.bubble .tm{ display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:4px }
.bubble.out .tm{ color:rgba(14,14,31,0.55) }
.chat-window .composer{ border-top:1px solid var(--border); padding:14px 18px; display:flex; gap:10px; align-items:center }
.chat-window .composer input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:11px 14px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none }
.chat-window .composer input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ===== Customers table ===== */
.cust-thead{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cust-row{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.cust-row:last-child{ border-bottom:none }
.cust-row:hover{ background:var(--row-hover) }
.cust-row .who{ display:flex; align-items:center; gap:12px }
.cust-row .who .ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px }
.cust-row .who .nm{ font-size:13.5px; font-weight:600 }
.cust-row .who .em{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

/* ===== Departments cards ===== */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dept-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.dept-card .top{ display:flex; align-items:flex-start; gap:14px }
.dept-card .ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px;
}
.dept-card h3{ margin:0; font-size:16px; font-weight:700 }
.dept-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dept-stats{ display:flex; gap:18px; padding-top:14px; border-top:1px dashed var(--border) }
.dept-stats .sv{ font-weight:700; font-size:18px; letter-spacing:-0.02em }
.dept-stats .sl{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em }

/* ===== Announcements ===== */
.ann-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin-bottom:12px;
}
.ann-card .top{ display:flex; align-items:center; gap:14px; margin-bottom:8px }
.ann-card .tag{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
}
.ann-card .tm{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto }
.ann-card h3{ margin:0 0 6px; font-size:16px; font-weight:700 }
.ann-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55 }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stats-row{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr }
  .kb-grid{ grid-template-columns:1fr 1fr }
  .board{ grid-template-columns:1fr 1fr }
  .dept-grid{ grid-template-columns:1fr 1fr }
  .detail-grid{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .stats-row{ grid-template-columns:1fr }
  .kb-grid, .board, .dept-grid{ grid-template-columns:1fr }
  .chat-shell{ grid-template-columns:1fr }
  .tb-search{ display:none }
}


/* ===== Extracted from app/tickets.html ===== */
/* ===== Ticaga App — shared chrome ===== */

:root[data-theme="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#F7F5EE;
  --sidebar-bg:#F4F2EC; --topbar-bg:#FFFFFF;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-2:#6C6ADE; --accent-soft:rgba(124,122,237,0.10); --accent-ink:#0E0E1F;
  --row-hover:rgba(124,122,237,0.05);
  --grid:rgba(19,19,38,0.025);
  --logo-src:url('../img/ticaga-colour.svg');
  --shadow-sm: 0 1px 2px rgba(19,19,38,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,38,0.06);
  --priority-high-bg:#FCE3E6; --priority-high-fg:#C2334B;
  --priority-med-bg:#FFE9C9;  --priority-med-fg:#A55F0E;
  --priority-low-bg:#E1F2DD;  --priority-low-fg:#1F6F3A;
  --status-open-bg:#E5E2FE;   --status-open-fg:#3F3D9E;
  --status-closed-bg:#FCE3E6; --status-closed-fg:#C2334B;
  --status-prog-bg:#FFEFD0;   --status-prog-fg:#8A5300;
  --status-done-bg:#E1F2DD;   --status-done-fg:#1F6F3A;
}
:root[data-theme="dark"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --sidebar-bg:#11101C; --topbar-bg:#1A1928;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-2:#7C7AED; --accent-soft:rgba(160,158,245,0.12); --accent-ink:#0E0E1F;
  --row-hover:rgba(160,158,245,0.06);
  --grid:rgba(160,158,245,0.04);
  --logo-src:url('../img/ticaga-logo.svg');
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --priority-high-bg:rgba(248,113,113,0.15); --priority-high-fg:#FCA5A5;
  --priority-med-bg:rgba(251,191,36,0.15);   --priority-med-fg:#FCD34D;
  --priority-low-bg:rgba(74,222,128,0.15);   --priority-low-fg:#86EFAC;
  --status-open-bg:rgba(160,158,245,0.18);   --status-open-fg:#C5C3FA;
  --status-closed-bg:rgba(248,113,113,0.15); --status-closed-fg:#FCA5A5;
  --status-prog-bg:rgba(251,191,36,0.15);    --status-prog-fg:#FCD34D;
  --status-done-bg:rgba(74,222,128,0.15);    --status-done-fg:#86EFAC;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ max-width:100%; display:block }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }
.serif-it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400 }

/* ===== Shell layout ===== */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px }

.sb-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 22px;
}
.sb-logo img{ height:24px; width:auto }

.sb-group{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  padding:14px 12px 6px;
}
.sb-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition: background .12s ease, color .12s ease;
}
.sb-link:hover{ color:var(--text); background:var(--row-hover) }
.sb-link.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.sb-link .ico{ width:18px; height:18px; flex:0 0 18px; opacity:0.7 }
.sb-link.is-active .ico{ opacity:1 }
.sb-link .lbl{ flex:1 }
.sb-link .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-2);
  padding:2px 8px; border-radius:6px; min-width:24px; text-align:center;
}
.sb-link.is-active .count{ background:var(--accent); color:var(--accent-ink) }

.sb-user{
  margin-top:auto; padding:12px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--surface);
}
.sb-user .ava{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, #8AA9E8, #6B7280);
  background-size:cover; background-position:center;
}
.sb-user .meta{ flex:1; min-width:0 }
.sb-user .nm{ font-size:13px; font-weight:600; line-height:1.2 }
.sb-user .rl{ font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:0.04em }
.sb-user .chev{ color:var(--faint) }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 32px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tb-admin{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tb-admin:hover{ background:var(--accent-2); color:#fff }
.tb-create{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-2); color:#fff;
  padding:11px 16px; border-radius:8px;
  border:none; font-weight:700; font-size:13.5px;
}
.tb-create:hover{ filter:brightness(1.05) }

.tb-search{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  width:380px; max-width:46%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--muted); font-size:13.5px;
}
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tb-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:13.5px;
}
.tb-search svg{ color:var(--faint); flex:0 0 16px }
.tb-icons{ display:flex; gap:6px }
.tb-iconbtn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--border-strong) }

/* ===== Main area ===== */
.main{ padding:28px 32px 80px; min-width:0 }
.page-head{ margin-bottom:24px }
.page-head h1{
  font-weight:700; font-size:30px; letter-spacing:-0.025em; line-height:1.1;
  margin:0 0 6px;
}
.page-head p{ color:var(--muted); margin:0; font-size:14.5px }

/* ===== Cards ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}
.card-pad-lg{ padding:28px }
.card-row{ display:flex; align-items:center; gap:16px }

/* ===== Stat cards (dashboard top) ===== */
.stats-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:16px;
}
.stat-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2);
}
.stat-meta .lbl{ font-size:13px; color:var(--muted); margin-bottom:2px }
.stat-meta .val{ font-weight:700; font-size:28px; letter-spacing:-0.02em; line-height:1 }
.stat-card .trend{
  margin-left:auto; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--muted);
}

/* ===== Filters bar ===== */
.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.filters .lbl{ font-size:13px; color:var(--muted); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; color:var(--text); font-weight:500;
}
.chip:hover{ border-color:var(--border-strong) }
.chip .ct{ color:var(--faint); font-family:'JetBrains Mono', monospace; font-size:11px }
.chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2) }
.chip.is-on .ct{ color:var(--accent-2) }

/* ===== Table-style list ===== */
.list-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.list-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.list-head h2{ font-size:18px; font-weight:700; margin:0 }
.list-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.list-search{
  flex:1; max-width:320px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; background:var(--surface);
  color:var(--muted); font-size:13px;
}
.list-search input{ flex:1; background:transparent; border:none; outline:none; font:inherit; color:var(--text) }
.list-filter-btn{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.list-filter-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  padding:1px 5px; border-radius:99px; font-weight:700;
}

.list-thead{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns:32px 1fr 120px 120px 90px;
  gap:16px; padding:18px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--row-hover) }
.list-row .tk-title{
  display:flex; flex-direction:column; gap:4px;
}
.list-row .tk-title .id{
  font-size:14px; font-weight:600; color:var(--accent-2);
}
.list-row .tk-title .sub{
  font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center;
}
.list-row .tk-title .sub .meta-ico{
  display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono', monospace; font-size:11px;
}
.list-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; color:var(--muted); font-size:13px;
}
.cb{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; cursor:pointer; flex:0 0 18px;
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.badge-high{ background:var(--priority-high-bg); color:var(--priority-high-fg) }
.badge-med{ background:var(--priority-med-bg); color:var(--priority-med-fg) }
.badge-low{ background:var(--priority-low-bg); color:var(--priority-low-fg) }
.badge-open{ background:var(--status-open-bg); color:var(--status-open-fg) }
.badge-closed{ background:var(--status-closed-bg); color:var(--status-closed-fg) }
.badge-prog{ background:var(--status-prog-bg); color:var(--status-prog-fg) }
.badge-done{ background:var(--status-done-bg); color:var(--status-done-fg) }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; text-decoration:none;
  transition: filter .15s, transform .08s, border-color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border) }
.btn-ghost:hover{ border-color:var(--border-strong) }
.btn-sm{ padding:7px 12px; font-size:12px }

/* ===== Two-column dashboard ===== */
.two-col{
  display:grid; grid-template-columns:1.2fr 1fr; gap:16px;
}
.note{
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color:var(--accent-2); border:1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius:10px; padding:14px 16px; font-size:13.5px;
}
:root[data-theme="dark"] .note{ color:var(--text) }

/* ===== Empty state ===== */
.empty{
  padding:36px 22px; text-align:center; color:var(--muted);
  font-size:14px;
}

/* ===== Live chat floating ===== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(124,122,237,0.32);
  border:none; cursor:pointer;
}
.chat-fab:hover{ filter:brightness(1.05) }

/* ===== Theme toggle (topbar) ===== */
.theme-fab{
  display:flex; align-items:center; gap:4px; padding:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
}
.theme-fab button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.theme-fab button.is-active{ background:var(--accent); color:var(--accent-ink) }

/* ===== Ticket detail layout ===== */
.detail-grid{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
}
.thread{ display:flex; flex-direction:column; gap:14px }
.msg{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
}
.msg.is-agent{ background: color-mix(in oklch, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 22%, var(--border)) }
.msg-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.msg-head .ava{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
}
.msg-head .nm{ font-weight:700; font-size:14px }
.msg-head .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:6px }
.msg-head .time{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.msg-body{ font-size:14px; line-height:1.6; color:var(--text) }
.msg-body p{ margin:0 0 10px }
.msg-body p:last-child{ margin-bottom:0 }

.reply-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px;
}
.reply-tabs{ display:flex; gap:4px; margin-bottom:12px }
.reply-tab{
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none;
}
.reply-tab.is-on{ background:var(--accent-soft); color:var(--accent-2) }
.reply-area{
  min-height:120px; width:100%;
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; resize:vertical; font:inherit; font-size:14px;
  background:var(--bg); color:var(--text); outline:none;
}
.reply-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:12px }
.reply-actions .right{ margin-left:auto; display:flex; gap:8px }

.aside-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.aside-card h3{
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.kv{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--border) }
.kv:first-of-type{ border-top:none }
.kv .k{ color:var(--muted) }
.kv .v{ font-weight:600 }
.kv .v.muted{ color:var(--muted); font-weight:400 }

/* ===== KB grid ===== */
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kb-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; min-height:160px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s, border-color .12s;
}
.kb-card:hover{ transform:translateY(-2px); border-color:var(--accent) }
.kb-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.kb-card h3{ font-size:16px; font-weight:700; margin:0 }
.kb-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; flex:1 }
.kb-card .meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--faint) }

/* ===== Roadmap board ===== */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.col{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; padding:14px;
  min-height:480px;
}
.col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:4px 4px 10px; border-bottom:1px dashed var(--border);
}
.col-head .dot{ width:8px; height:8px; border-radius:99px; background:var(--accent) }
.col-head h3{ margin:0; font-size:13px; font-weight:700 }
.col-head .ct{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

.rd-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-bottom:8px; display:flex; flex-direction:column; gap:8px;
}
.rd-card h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.3 }
.rd-card p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.rd-card .foot{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--faint) }
.rd-card .vote{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
  font-weight:700;
}

/* ===== Live chat list ===== */
.chat-shell{
  display:grid; grid-template-columns:320px 1fr; gap:16px; min-height:600px;
}
.chat-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.chat-list .hd{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.chat-list .hd h3{ margin:0; font-size:14px; font-weight:700 }
.chat-item{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.chat-item:last-child{ border-bottom:none }
.chat-item:hover{ background:var(--row-hover) }
.chat-item.is-on{ background:var(--accent-soft) }
.chat-item .ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
.chat-item .body{ flex:1; min-width:0 }
.chat-item .nm{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between }
.chat-item .nm .tm{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:400 }
.chat-item .ms{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.chat-window{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; min-height:600px;
}
.chat-window .hd{ padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px }
.chat-window .hd .ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #FFB489, #F47A6B); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.chat-window .hd .nm{ font-weight:700; font-size:14px; line-height:1.2 }
.chat-window .hd .rl{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }
.chat-window .stream{ flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto }
.bubble{ max-width:65%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5 }
.bubble.in{ background:var(--surface-2); align-self:flex-start; border-top-left-radius:4px }
.bubble.out{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-top-right-radius:4px }
.bubble .tm{ display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:4px }
.bubble.out .tm{ color:rgba(14,14,31,0.55) }
.chat-window .composer{ border-top:1px solid var(--border); padding:14px 18px; display:flex; gap:10px; align-items:center }
.chat-window .composer input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:11px 14px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none }
.chat-window .composer input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ===== Customers table ===== */
.cust-thead{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:12px 22px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  color:var(--muted); font-weight:600; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cust-row{
  display:grid; grid-template-columns:32px 1.6fr 1fr 1fr 90px 80px;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.cust-row:last-child{ border-bottom:none }
.cust-row:hover{ background:var(--row-hover) }
.cust-row .who{ display:flex; align-items:center; gap:12px }
.cust-row .who .ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px }
.cust-row .who .nm{ font-size:13.5px; font-weight:600 }
.cust-row .who .em{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted) }

/* ===== Departments cards ===== */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dept-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.dept-card .top{ display:flex; align-items:flex-start; gap:14px }
.dept-card .ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px;
}
.dept-card h3{ margin:0; font-size:16px; font-weight:700 }
.dept-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dept-stats{ display:flex; gap:18px; padding-top:14px; border-top:1px dashed var(--border) }
.dept-stats .sv{ font-weight:700; font-size:18px; letter-spacing:-0.02em }
.dept-stats .sl{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:0.06em }

/* ===== Announcements ===== */
.ann-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin-bottom:12px;
}
.ann-card .top{ display:flex; align-items:center; gap:14px; margin-bottom:8px }
.ann-card .tag{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; padding:3px 8px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-2);
}
.ann-card .tm{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto }
.ann-card h3{ margin:0 0 6px; font-size:16px; font-weight:700 }
.ann-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55 }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stats-row{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr }
  .kb-grid{ grid-template-columns:1fr 1fr }
  .board{ grid-template-columns:1fr 1fr }
  .dept-grid{ grid-template-columns:1fr 1fr }
  .detail-grid{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .stats-row{ grid-template-columns:1fr }
  .kb-grid, .board, .dept-grid{ grid-template-columns:1fr }
  .chat-shell{ grid-template-columns:1fr }
  .tb-search{ display:none }
}


/* ===== Global overrides ===== */
.cta p{max-width:620px}

/* Keep extracted app mock styles from bleeding into the marketing pages. */
:root[data-theme="light"] body:not([data-page="dashboard"]):not([data-page="tickets"]):not([data-page="departments"]):not([data-page="customers"]){
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#7C7AED; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
}
:root[data-theme="dark"] body:not([data-page="dashboard"]):not([data-page="tickets"]):not([data-page="departments"]):not([data-page="customers"]){
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
}
body:not([data-page="dashboard"]):not([data-page="tickets"]):not([data-page="departments"]):not([data-page="customers"]){
  min-height:auto;
  background:var(--bg);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
}
body[data-page="dashboard"],
body[data-page="tickets"],
body[data-page="departments"],
body[data-page="customers"]{
  background:var(--bg);
  background-image:none;
}

/* Homepage owns the marketing chrome when app mock styles are present later in the bundle. */
body[data-page="home"]{
  background:var(--bg) !important;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important;
  background-size:56px 56px !important;
  color:var(--text);
  min-height:auto;
}
body[data-page="home"] .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 20px;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
body[data-page="home"] .btn-primary{
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
  border-color:transparent !important;
}
body[data-page="home"] .btn-primary:hover{
  background:color-mix(in oklch, var(--accent), white 8%) !important;
  filter:none;
}
body[data-page="home"] .btn-ghost{
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}
body[data-page="home"] .btn-ghost:hover{border-color:var(--border-strong) !important}
body[data-page="home"] .btn-sm{padding:9px 16px; font-size:13px}
body[data-page="home"] .theme-fab{
  position:static !important;
  z-index:auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:none;
}
body[data-page="home"] .theme-fab button{
  border:none;
  background:transparent;
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
body[data-page="home"] .theme-fab button.is-active{
  background:var(--accent);
  color:var(--accent-ink);
}
body[data-page="home"] header.nav{
  position:sticky;
  top:0;
  z-index:20;
  padding:16px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
body[data-page="home"] .hero{padding:88px 0 60px; position:relative}
body[data-page="home"] .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px 6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  margin-bottom:32px;
  color:inherit;
  text-decoration:none;
}
body[data-page="home"] .hero-badge .tag{
  background:var(--accent);
  color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:99px;
  letter-spacing:0.06em;
}
body[data-page="home"] h1.hero-title{
  font-weight:700;
  font-size:96px;
  line-height:0.95;
  letter-spacing:-0.045em;
  margin:0 0 24px;
  max-width:1100px;
}
body[data-page="home"] h1.hero-title em{color:var(--muted)}
body[data-page="home"] .hero-lede{
  font-size:19px;
  line-height:1.5;
  color:var(--muted);
  max-width:600px;
  margin:0 0 36px;
}
body[data-page="home"] .hero-product{
  margin-top:64px;
  position:relative;
  max-width:1160px;
  margin-left:auto;
  margin-right:auto;
}
body[data-page="home"] .hero-product .dash-frame{
  border:1px solid var(--border-strong);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface);
  position:relative;
  box-shadow:var(--shadow);
}
body[data-page="home"] .hero-product .dash-frame img{
  width:100%;
  display:block;
}
body[data-page="home"] .container{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}
body[data-page="home"] .nav-left{
  display:flex;
  align-items:center;
  gap:36px;
}
body[data-page="home"] .nav-links{
  display:flex;
  gap:24px;
  font-size:14px;
  font-weight:500;
  align-items:center;
}
body[data-page="home"] .nav-links a{
  color:var(--muted);
  text-decoration:none;
}
body[data-page="home"] .nav-links a:hover{color:var(--text)}
body[data-page="home"] .nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}
body[data-page="home"] .logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body[data-page="home"] .logo-img{height:28px; width:auto}
body[data-page="home"] .hero-terminal{
  position:absolute;
  top:88px;
  right:0;
  width:380px;
  z-index:3;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  line-height:1.75;
  padding:18px 20px;
  box-shadow:0 30px 80px rgba(19,19,38,0.14);
}
:root[data-theme="dark"] body[data-page="home"] .hero-terminal{box-shadow:0 30px 80px rgba(0,0,0,0.5)}
body[data-page="home"] .term-chrome{
  display:flex;
  gap:6px;
  margin-bottom:14px;
  align-items:center;
}
body[data-page="home"] .term-chrome i{
  width:9px;
  height:9px;
  border-radius:99px;
  display:inline-block;
}
body[data-page="home"] .term-chrome i:nth-child(1){background:#FF5F57}
body[data-page="home"] .term-chrome i:nth-child(2){background:#FEBC2E}
body[data-page="home"] .term-chrome i:nth-child(3){background:#28C840}
body[data-page="home"] .term-path{
  margin-left:auto;
  color:var(--faint);
  font-size:11px;
}
body[data-page="home"] .term-prompt{color:var(--faint)}
body[data-page="home"] .term-ok{color:#10B981}
body[data-page="home"] .term-divider{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--border);
}
body[data-page="home"] .term-callout-eyebrow{
  color:var(--accent);
  font-size:11px;
  letter-spacing:0.04em;
  margin-bottom:8px;
}
body[data-page="home"] .term-callout{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:18px;
  color:var(--text);
  line-height:1.3;
}
body[data-page="home"] .hero-product .dash-frame-bar{
  min-height:48px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
body[data-page="home"] .hero-product .dash-frame-dots{
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}
body[data-page="home"] .hero-product .dash-frame-dots i{
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
}
body[data-page="home"] .hero-product .dash-frame-dots i:nth-child(1){background:#FF5F57}
body[data-page="home"] .hero-product .dash-frame-dots i:nth-child(2){background:#FEBC2E}
body[data-page="home"] .hero-product .dash-frame-dots i:nth-child(3){background:#28C840}
body[data-page="home"] .hero-product .dash-frame-url{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:min(360px, calc(100% - 70px));
  margin:0 auto;
  padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-page="home"] .hero-product .dash-frame-lock{
  color:#10B981;
  font-size:9px;
  flex-shrink:0;
}
body[data-page="home"] .hero-sticker{
  position:absolute;
  top:-22px;
  right:-14px;
  z-index:2;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:10px;
  padding:10px 14px;
  transform:rotate(4deg);
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:18px;
  font-weight:400;
  box-shadow:0 12px 30px rgba(14,19,17,0.18);
  border:1.5px solid var(--accent-ink);
}
body[data-page="home"] .stats{
  padding:32px 0;
  border-block:1px solid var(--border);
  background:var(--surface);
}
body[data-page="home"] .stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
body[data-page="home"] .stat{
  display:flex;
  align-items:baseline;
  gap:14px;
}
body[data-page="home"] .stat .num{
  font-weight:700;
  font-size:38px;
  letter-spacing:-0.035em;
  line-height:1;
}
body[data-page="home"] .stat .lbl{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
@media (max-width:1180px){
  body[data-page="home"] .hero-terminal{display:none}
}
@media (max-width:1080px){
  body[data-page="home"] h1.hero-title{font-size:72px}
  body[data-page="home"] .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body[data-page="home"] .nav-links{display:none}
  body[data-page="home"] h1.hero-title{font-size:48px}
  body[data-page="home"] .container{padding:0 20px}
  body[data-page="home"] header.nav{padding:14px 20px}
}


/* ===== Homepage final layout restore ===== */
:root[data-theme="light"] body[data-page="home"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --border:rgba(19,19,38,0.08); --border-strong:rgba(19,19,38,0.18);
  --text:#131326; --muted:#5F5F70; --faint:#ABABBC;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(19,19,38,0.025);
  --code-bg:#131326; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(124,122,237,0.16);
}
:root[data-theme="dark"] body[data-page="home"]{
  --bg:#11101C; --surface:#1A1928; --surface-2:#232234;
  --border:rgba(160,158,245,0.14); --border-strong:rgba(160,158,245,0.26);
  --text:#ECEAF8; --muted:#8E8DA8; --faint:#4F4E66;
  --accent:#A09EF5; --accent-ink:#0E0E1F;
  --grid:rgba(160,158,245,0.05);
  --code-bg:#0B0A14; --code-text:#ECEAF8;
  --shadow:0 30px 80px rgba(160,158,245,0.14);
}
body[data-page="home"],
body[data-page="home"] *{box-sizing:border-box}
body[data-page="home"]{
  margin:0;
  padding:0;
  background:var(--bg) !important;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important;
  background-size:56px 56px !important;
  color:var(--text);
  font-family:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height:auto;
}
body[data-page="home"] img{max-width:100%; display:block}
body[data-page="home"] a{color:inherit}
body[data-page="home"] .serif-it{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
body[data-page="home"] .muted{color:var(--muted)}
body[data-page="home"] .container{max-width:1280px; margin:0 auto; padding:0 32px}
body[data-page="home"] .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--muted);
  text-transform:uppercase;
}
body[data-page="home"] .eyebrow-accent{color:var(--accent)}
body[data-page="home"] .logo{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
body[data-page="home"] .logo-img{height:28px; width:auto}
body[data-page="home"] header.nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 32px;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
}
body[data-page="home"] .nav-left,
body[data-page="home"] .nav-right{display:flex; align-items:center}
body[data-page="home"] .nav-left{gap:36px}
body[data-page="home"] .nav-right{gap:12px}
body[data-page="home"] .nav-links{display:flex; align-items:center; gap:24px; font-size:14px; font-weight:500}
body[data-page="home"] .nav-links a{color:var(--muted); text-decoration:none}
body[data-page="home"] .nav-links a:hover{color:var(--text)}
body[data-page="home"] .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 20px;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
body[data-page="home"] .btn:active{transform:translateY(1px)}
body[data-page="home"] .btn-primary{background:var(--accent) !important; color:var(--accent-ink) !important; border-color:transparent !important}
body[data-page="home"] .btn-primary:hover{background:color-mix(in oklch, var(--accent), white 8%) !important; filter:none}
body[data-page="home"] .btn-ghost{
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}
body[data-page="home"] .btn-ghost:hover{border-color:var(--border-strong) !important}
body[data-page="home"] .btn-sm{padding:9px 16px; font-size:13px}
body[data-page="home"] .theme-fab{
  position:static !important;
  z-index:auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:none;
}
body[data-page="home"] .theme-fab button{
  border:none;
  background:transparent;
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
body[data-page="home"] .theme-fab button.is-active{background:var(--accent); color:var(--accent-ink)}
body[data-page="home"] .hero{
  position:relative;
  min-height:735px;
  padding:92px 32px 0;
}
body[data-page="home"] .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px 6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  margin-bottom:32px;
  color:inherit;
  text-decoration:none;
}
body[data-page="home"] .hero-badge .tag{
  background:var(--accent);
  color:var(--accent-ink);
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:99px;
  letter-spacing:0.06em;
}
body[data-page="home"] h1.hero-title{
  font-weight:800;
  font-size:96px;
  line-height:0.95;
  letter-spacing:-0.045em;
  margin:0 0 24px;
  max-width:1100px;
}
body[data-page="home"] h1.hero-title em{color:var(--muted)}
body[data-page="home"] .hero-lede{
  font-size:18px;
  line-height:1.5;
  color:var(--muted);
  max-width:670px;
  margin:0 0 32px;
}
body[data-page="home"] .hero-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
body[data-page="home"] .hero-meta{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
}
body[data-page="home"] .hero-terminal{
  position:absolute;
  top:112px;
  right:32px;
  width:380px;
  z-index:3;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  line-height:1.75;
  padding:18px 20px;
  box-shadow:0 30px 80px rgba(19,19,38,0.14);
}
:root[data-theme="dark"] body[data-page="home"] .hero-terminal{box-shadow:0 30px 80px rgba(0,0,0,0.5)}
body[data-page="home"] .term-chrome{display:flex; gap:6px; margin-bottom:14px; align-items:center}
body[data-page="home"] .term-chrome i{width:9px; height:9px; border-radius:99px; display:inline-block}
body[data-page="home"] .term-chrome i:nth-child(1){background:#FF5F57}
body[data-page="home"] .term-chrome i:nth-child(2){background:#FEBC2E}
body[data-page="home"] .term-chrome i:nth-child(3){background:#28C840}
body[data-page="home"] .term-path{margin-left:auto; color:var(--faint); font-size:11px}
body[data-page="home"] .term-prompt{color:var(--faint)}
body[data-page="home"] .term-ok{color:#10B981}
body[data-page="home"] .term-divider{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border)}
body[data-page="home"] .term-callout-eyebrow{color:var(--accent); font-size:11px; letter-spacing:0.04em; margin-bottom:8px}
body[data-page="home"] .term-callout{font-family:'Instrument Serif', serif; font-style:italic; font-size:18px; color:var(--text); line-height:1.3}
body[data-page="home"] .hero-product{
  position:relative;
  z-index:4;
  width:min(100%, 980px);
  margin:76px auto -34px;
}
body[data-page="home"] .dash-frame{
  border:1px solid var(--border-strong);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface);
  position:relative;
  box-shadow:var(--shadow);
}
body[data-page="home"] .dash-frame img{width:100%; display:block}
body[data-page="home"] .dash-frame-bar{
  min-height:48px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
body[data-page="home"] .dash-frame-dots{display:flex; align-items:center; gap:7px; flex-shrink:0}
body[data-page="home"] .dash-frame-dots i{display:block; width:10px; height:10px; border-radius:50%}
body[data-page="home"] .dash-frame-dots i:nth-child(1){background:#FF5F57}
body[data-page="home"] .dash-frame-dots i:nth-child(2){background:#FEBC2E}
body[data-page="home"] .dash-frame-dots i:nth-child(3){background:#28C840}
body[data-page="home"] .dash-frame-url{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:min(360px, calc(100% - 70px));
  margin:0 auto;
  padding:7px 12px;
  background:color-mix(in oklch, var(--bg) 65%, var(--surface));
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-page="home"] .dash-frame-lock{color:#10B981; font-size:9px; flex-shrink:0}
body[data-page="home"] .hero-sticker{
  position:absolute;
  top:-31px;
  right:-16px;
  z-index:5;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:10px;
  padding:10px 14px;
  transform:rotate(4deg);
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:18px;
  font-weight:400;
  box-shadow:0 12px 30px rgba(14,19,17,0.18);
  border:1.5px solid var(--accent-ink);
}
body[data-page="home"] .stats{
  padding:56px 0 34px;
  border-block:1px solid var(--border);
  background:var(--surface);
}
body[data-page="home"] .stats-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px}
body[data-page="home"] .stat{display:flex; align-items:baseline; gap:14px}
body[data-page="home"] .stat .num{font-weight:700; font-size:38px; letter-spacing:-0.035em; line-height:1}
body[data-page="home"] .stat .lbl{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
body[data-page="home"] .tour-section{padding:96px 32px 0}
body[data-page="home"] .tour-section + .tour-section{padding-top:72px}
body[data-page="home"] .tour-head{display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:28px}
body[data-page="home"] .tour-head-copy{max-width:720px}
body[data-page="home"] .tour-section[aria-labelledby="core-tour-title"] .tour-head-copy{max-width:980px}
body[data-page="home"] .tour-head h2{
  font-weight:700;
  font-size:48px;
  line-height:1.02;
  letter-spacing:-0.04em;
  margin:14px 0 12px;
}
body[data-page="home"] .tour-head p{font-size:16px; color:var(--muted); line-height:1.55; margin:0; max-width:620px}
body[data-page="home"] .tour-section[aria-labelledby="core-tour-title"] .tour-head p{max-width:980px}
body[data-page="home"] .tour-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
body[data-page="home"] .tour-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  overflow:hidden;
}
body[data-page="home"] .tour-card-featured{max-width:1080px; margin-inline:auto}
body[data-page="home"] .tour-card-addon{border-style:dashed; background:color-mix(in oklch, var(--accent) 4%, var(--surface))}
body[data-page="home"] .tour-card-head{display:flex; justify-content:space-between; gap:16px; align-items:start; padding:5px 4px 15px}
body[data-page="home"] .tour-card h3{font-size:19px; letter-spacing:-0.02em; margin:0 0 5px}
body[data-page="home"] .tour-card p{font-size:13px; line-height:1.45; color:var(--muted); margin:0}
body[data-page="home"] .product-badge{
  flex-shrink:0;
  border-radius:99px;
  padding:5px 8px;
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.06em;
}
body[data-page="home"] .product-badge-core{background:var(--accent); color:var(--accent-ink)}
body[data-page="home"] .product-badge-included{color:#065F46; border:1px solid #10B981; background:#D1FAE5}
body[data-page="home"] .product-badge-paid{color:#92400E; border:1px solid #F59E0B; background:#FEF3C7}
:root[data-theme="dark"] body[data-page="home"] .product-badge-included{color:#D1FAE5; border-color:#10B981; background:#064E3B}
:root[data-theme="dark"] body[data-page="home"] .product-badge-paid{color:#FEF3C7; border-color:#F59E0B; background:#78350F}
body[data-page="home"] .tour-shot{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:top left;
  border:1px solid var(--border);
  border-radius:10px;
}
body[data-page="home"] .dash-frame .tour-shot{border:0; border-radius:0}
body[data-page="home"] .tour-card-featured .tour-shot{height:auto; aspect-ratio:auto; object-fit:contain}
body[data-page="home"] section.block{padding:96px 32px}
body[data-page="home"] .block-head{max-width:780px; margin-bottom:56px}
body[data-page="home"] .block-head h2{font-weight:700; font-size:56px; line-height:1.02; letter-spacing:-0.04em; margin:14px 0 16px}
body[data-page="home"] .block-head p{font-size:17px; color:var(--muted); line-height:1.5; margin:0; max-width:560px}
body[data-page="home"] .feat-top{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px}
body[data-page="home"] .feat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
body[data-page="home"] .compare-head{display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:end; margin-bottom:40px}
body[data-page="home"] .quote-card,
body[data-page="home"] .price,
body[data-page="home"] .feat-cell,
body[data-page="home"] .tour-card{box-shadow:none}
body[data-page="home"] .cta-wrap{padding:40px 32px 100px}
body[data-page="home"] .cta{background:var(--code-bg); color:#F2EFE6; border-radius:24px; padding:72px 56px; position:relative; overflow:hidden; border:1px solid var(--border)}
body[data-page="home"] .cta .sun{position:absolute; top:-40px; right:-40px; width:240px; height:240px; border-radius:50%; background:var(--accent); opacity:0.85}
body[data-page="home"] .cta .ready-tag{position:absolute; top:36px; right:36px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent-ink); letter-spacing:0.08em; font-weight:700; z-index:1}
body[data-page="home"] .cta-body{position:relative; z-index:1; max-width:700px}
body[data-page="home"] .cta h2{font-weight:700; font-size:64px; letter-spacing:-0.04em; line-height:0.98; margin:0 0 18px}
body[data-page="home"] .cta p{font-size:17px; color:#9BA39E; margin:0 0 32px; max-width:620px}
body[data-page="home"] footer.foot{padding:48px 32px; border-top:1px solid var(--border)}
body[data-page="home"] .foot-grid{display:grid; grid-template-columns:minmax(220px,2fr) repeat(4,minmax(120px,1fr)); gap:32px; margin-bottom:32px}
body[data-page="home"] .foot-bottom{border-top:1px solid var(--border); padding-top:20px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
@media (max-width:1180px){
  body[data-page="home"] .hero-terminal{display:none}
  body[data-page="home"] .hero{min-height:auto; padding-top:72px}
  body[data-page="home"] .hero-product{margin-top:64px}
}
@media (max-width:1080px){
  body[data-page="home"] h1.hero-title{font-size:72px}
  body[data-page="home"] .feat-top{grid-template-columns:1fr}
  body[data-page="home"] .feat-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .tour-grid{grid-template-columns:1fr}
  body[data-page="home"] .price-grid{grid-template-columns:1fr}
  body[data-page="home"] .stats-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .compare-head{grid-template-columns:1fr; gap:16px}
}
@media (max-width:720px){
  body[data-page="home"] header.nav{padding:14px 20px}
  body[data-page="home"] .nav-links{display:none}
  body[data-page="home"] .nav-right{gap:8px}
  body[data-page="home"] .signin{display:none}
  body[data-page="home"] .container{padding-left:20px; padding-right:20px}
  body[data-page="home"] .hero{padding:56px 20px 0}
  body[data-page="home"] h1.hero-title{font-size:48px}
  body[data-page="home"] .hero-product{margin:48px auto -18px}
  body[data-page="home"] .hero-sticker{right:8px; top:-28px; font-size:16px}
  body[data-page="home"] .stats{padding-top:42px}
  body[data-page="home"] .tour-head{display:block}
  body[data-page="home"] .tour-head h2,
  body[data-page="home"] .block-head h2,
  body[data-page="home"] .compare-head h2{font-size:36px}
  body[data-page="home"] section.block,
  body[data-page="home"] .tour-section{padding-top:64px}
  body[data-page="home"] .feat-grid{grid-template-columns:1fr}
  body[data-page="home"] .cta{padding:48px 28px}
  body[data-page="home"] .cta h2{font-size:40px}
}

@media (min-width:1181px){
  body[data-page="home"] .hero-terminal{display:block !important}
}

/* Homepage dashboard preview size fix */
body[data-page="home"] .hero-product{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  width:min(calc(100vw - 96px), 980px) !important;
  max-width:980px !important;
  margin:76px auto -34px !important;
  position:relative !important;
}
body[data-page="home"] .hero-product > .dash-frame{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
body[data-page="home"] .hero-product > .dash-frame > img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
body[data-page="home"] .hero-product > .hero-sticker{
  top:-31px !important;
  right:-16px !important;
}
@media (max-width:720px){
  body[data-page="home"] .hero-product{
    width:calc(100vw - 40px) !important;
    margin:48px auto -18px !important;
  }
}

/* Homepage ticketing row one-line fix */
body[data-page="home"] .feat-big .keys{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  padding:14px 16px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}
body[data-page="home"] .feat-big .keys > span{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
body[data-page="home"] .feat-big .keys .sep{
  opacity:.55 !important;
}
body[data-page="home"] .feat-big .keys .note{
  margin-left:auto !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  background:rgba(14,14,31,.24) !important;
  color:rgba(14,14,31,.72) !important;
}
:root[data-theme="dark"] body[data-page="home"] .feat-big .keys .note{
  background:rgba(14,14,31,.34) !important;
}
@media (max-width:900px){
  body[data-page="home"] .feat-big .keys{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Features page mobile polish */
@media (max-width: 720px) {
  body[data-page="features"] .phero {
    padding: 52px 0 34px;
  }

  body[data-page="features"] .phero-dark {
    padding: 52px 0 36px;
  }

  body[data-page="features"] .phero-badge {
    max-width: 100%;
    gap: 8px;
    padding: 6px 8px;
    font-size: 11px;
  }

  body[data-page="features"] .phero-badge .muted {
    white-space: normal;
    font-size: 11px;
  }

  body[data-page="features"] .phero h1 {
    max-width: 12ch;
    font-size: clamp(34px, 11vw, 40px);
    line-height: 1;
    margin-bottom: 18px;
  }

  body[data-page="features"] .phero h1 em {
    display: block;
  }

  body[data-page="features"] .phero .lede {
    max-width: 31ch;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 22px;
  }

  body[data-page="features"] .phero-actions {
    gap: 10px;
  }

  body[data-page="features"] .phero-actions .btn {
    min-height: 42px;
    padding: 11px 14px;
    font-size: 13px;
  }

  body[data-page="features"] .block {
    padding-top: 52px;
    padding-bottom: 12px;
  }

  body[data-page="features"] .block-tight {
    padding-top: 42px;
  }

  body[data-page="features"] .block-head {
    margin-bottom: 20px;
  }

  body[data-page="features"] .block-head h2,
  body[data-page="features"] .text-col h2 {
    font-size: clamp(30px, 10vw, 38px);
    line-height: 1.02;
  }

  body[data-page="features"] .block-head p,
  body[data-page="features"] .text-col p {
    font-size: 14.5px;
    line-height: 1.55;
  }

  body[data-page="features"] .trio {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="features"] .trio-card {
    min-height: auto;
    padding: 18px;
    border-radius: 14px;
  }

  body[data-page="features"] .trio-card h3 {
    font-size: 18px;
  }

  body[data-page="features"] .trio-card p {
    font-size: 13px;
  }

  body[data-page="features"] .detail-row,
  body[data-page="features"] .detail-row.flip {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 42px 0;
  }

  body[data-page="features"] .detail-row.flip .text-col {
    order: 1;
  }

  body[data-page="features"] .detail-row.flip .visual-col {
    order: 2;
  }

  body[data-page="features"] .text-col {
    max-width: none;
  }

  body[data-page="features"] .text-col ul {
    margin-top: 18px;
    padding-left: 0;
  }

  body[data-page="features"] .text-col li {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 8px;
  }

  body[data-page="features"] .visual-col,
  body[data-page="features"] .product-window {
    width: 100%;
    min-width: 0;
  }

  body[data-page="features"] .product-window {
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="features"] .product-window-bar {
    min-height: 36px;
    padding: 0 10px;
  }

  body[data-page="features"] .product-window-url {
    max-width: 72%;
    font-size: 10px;
  }

  body[data-page="features"] .product-window-body {
    overflow: hidden;
  }

  body[data-page="features"] .product-shot {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  body[data-page="features"] .hero-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="features"] .hero-split li {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 14px !important;
  }

  body[data-page="features"] .hero-split li .mono {
    display: block;
    margin-bottom: 6px;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  body[data-page="features"] .term-card {
    padding: 18px;
    border-radius: 14px;
    overflow-x: auto;
    font-size: 12px;
  }

  /* section.block has specificity (0,1,1) which beats .container (0,1,0),
     zeroing out horizontal padding. Restore it here with higher specificity. */
  section.block,
  section.block-tight {
    padding-left: 20px;
    padding-right: 20px;
  }
  section.cta-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page="features"] .cta-wrap {
    padding-top: 30px;
    padding-bottom: 72px;
  }

  body[data-page="features"] .cta {
    padding: 28px 18px;
    overflow: hidden;
  }

  body[data-page="features"] .cta .sun {
    width: 128px;
    height: 128px;
    top: -42px;
    right: -52px;
    opacity: .75;
  }

  body[data-page="features"] .cta-body {
    position: relative;
    z-index: 1;
  }

  body[data-page="features"] .cta h2 {
    max-width: 10ch;
    font-size: 32px;
    line-height: 1.02;
  }

  body[data-page="features"] .cta p {
    max-width: 28ch;
    font-size: 14px;
  }

  body[data-page="features"] .cta .actions {
    align-items: stretch;
  }

  body[data-page="features"] .cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .container,
  section.block,
  section.block-tight,
  section.cta-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  body[data-page="features"] .phero h1 {
    font-size: 34px;
  }
}

/* ============================================================
   MOBILE NAV — hamburger + slide-down drawer
   ============================================================ */

/* Hamburger button — hidden on desktop, revealed on mobile */
.nav-hamburger{
  display:none; align-items:center; justify-content:center;
  background:none; border:1px solid var(--border); border-radius:8px;
  padding:7px; cursor:pointer; color:var(--text); line-height:0;
  transition:border-color .15s ease, color .15s ease;
}
.nav-hamburger:hover{border-color:var(--border-strong); color:var(--accent)}
.nav-hamburger .ham-icon{display:block}
.nav-hamburger .close-icon{display:none}
.nav-hamburger[aria-expanded="true"] .ham-icon{display:none}
.nav-hamburger[aria-expanded="true"] .close-icon{display:block}

/* Mobile nav drawer (absolute child of sticky <header>) */
.nav-mobile{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--surface); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:0 16px 40px rgba(0,0,0,0.14);
  z-index:19; max-height:calc(100svh - 60px); overflow-y:auto;
}
:root[data-theme="dark"] .nav-mobile{box-shadow:0 16px 40px rgba(0,0,0,0.45)}
.nav-mobile.is-open{display:block}
body.nav-open{overflow:hidden}

.nav-mobile-links{
  list-style:none; margin:0; padding:8px 20px 4px;
}
.nav-mobile-links > li{border-bottom:1px solid var(--border)}
.nav-mobile-links > li:last-child{border-bottom:none}
.nav-mobile-links a{
  display:block; padding:13px 0; font-size:15px; font-weight:500;
  color:var(--text); text-decoration:none;
}
.nav-mobile-links a:hover,.nav-mobile-links a.is-on{color:var(--accent)}

/* Extensions collapsible sub-section in mobile nav */
.nav-mobile-dd-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:13px 0; font:inherit;
  font-size:15px; font-weight:500; color:var(--text); cursor:pointer; text-align:left;
}
.nav-mobile-dd-trigger:hover,.nav-mobile-dd-trigger.is-on{color:var(--accent)}
.nav-mobile-chev{font-size:10px; opacity:0.6; transition:transform .18s ease}
.nav-mobile-dd-trigger.sub-open .nav-mobile-chev{transform:rotate(180deg)}
.nav-mobile-sub{
  display:none; padding:4px 0 12px 14px;
}
.nav-mobile-sub.is-open{display:block}
.nav-mobile-sub-link{
  display:block; padding:9px 0; font-size:14px; font-weight:500;
  color:var(--muted); text-decoration:none;
}
.nav-mobile-sub-link:hover{color:var(--text)}
.nav-mobile-sub-all{color:var(--accent) !important; font-weight:700}

/* Bottom CTA strip */
.nav-mobile-footer{padding:16px 20px 20px}

/* At ≤720px: show hamburger, hide desktop-only bar items */
@media (max-width:720px){
  header.nav{overflow:visible}
  .nav-hamburger{display:flex}
  .nav .signin{display:none}
  .nav-right > .btn-primary{display:none}
}

/* ============================================================
   GLOBAL MOBILE — detail-rows, previews, hero polish
   Mirrors the features-page fixes so ALL pages behave correctly
   ============================================================ */
@media (max-width:720px){
  /* Collapse detail-rows to flex column (all pages) */
  .detail-row,
  .detail-row.flip {
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:36px 0;
  }
  .detail-row.flip .text-col { order:1 }
  .detail-row.flip .visual-col { order:2 }

  /* Prevent grid-cell min-width blowout */
  .visual-col, .text-col { min-width:0; width:100% }

  /* Product preview frames */
  .dash-frame, .product-window { width:100%; min-width:0; border-radius:14px }
  .dash-frame-bar, .product-window-bar { min-height:36px; padding:0 10px }
  .dash-frame-url, .product-window-url { font-size:10px; max-width:72% }
  .real-product-shot, .product-shot { width:100% }

  /* Hero (light variant used on extension pages) */
  .phero { padding:52px 0 34px }
  .phero h1 { font-size:clamp(32px,10vw,42px); line-height:1.02 }
  .phero .lede { font-size:15px; line-height:1.5 }

  /* Extension trio cards — single column */
  .trio { grid-template-columns:1fr; gap:12px }
  .trio-card { padding:18px; border-radius:14px }

  /* Block-head headings */
  .block-head h2, .text-col h2 {
    font-size:clamp(28px,9vw,36px);
    line-height:1.04;
  }

  /* hero-split (extensions list + terminal card) */
  .hero-split { grid-template-columns:1fr; gap:20px }
}

/* ============================================================
   FOOTER — single column on small screens
   ============================================================ */
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   FEATURES PAGE — extra 480px polish
   ============================================================ */
@media (max-width:480px){
  body[data-page="features"] .phero-dark{padding:44px 0 28px}
  body[data-page="features"] .phero h1{font-size:30px}
  body[data-page="features"] .block{padding-top:40px; padding-bottom:8px}
  body[data-page="features"] .block-tight{padding-top:32px}
  body[data-page="features"] .detail-row,
  body[data-page="features"] .detail-row.flip{padding:28px 0; gap:14px}
  body[data-page="features"] .cta{padding:24px 16px}
  body[data-page="features"] .cta h2{font-size:28px}
  body[data-page="features"] .trio-card{padding:16px}
}


/* ============================================================
   BTN-GHOST IN DARK HERO SECTIONS
   In light mode, var(--text) is dark — invisible on dark bg.
   ============================================================ */
.phero-dark .btn-ghost{color:#ECEAF8; border-color:rgba(236,234,248,0.22)}
.phero-dark .btn-ghost .muted{color:#9594B5}

/* ============================================================
   CTA SECTION — mobile polish
   ============================================================ */
.cta .sun{background:#4338CA}
@media (max-width:720px){
  .cta .ready-tag{display:none}
  .cta .sun{display:none}
  .cta{padding:36px 24px}
  .cta h2{font-size:36px}
}

/* ===== Scroll-wrapper table: always stay as a real table (overrides card-layout rules above) ===== */
@media (max-width:600px){
  .cmp-table-scroll .cmp-table{display:table !important; min-width:560px !important}
  .cmp-table-scroll .cmp-table thead{display:table-header-group !important}
  .cmp-table-scroll .cmp-table tbody{display:table-row-group !important}
  .cmp-table-scroll .cmp-table tr{display:table-row !important; border-bottom:none !important; padding:0 !important}
  .cmp-table-scroll .cmp-table th,
  .cmp-table-scroll .cmp-table td{display:table-cell !important; width:auto !important; font-size:13px !important; border-bottom:1px solid var(--border) !important}
  .cmp-table-scroll .cmp-table th{padding:14px 16px !important}
  .cmp-table-scroll .cmp-table td{padding:14px 16px !important; margin-bottom:0 !important}
  .cmp-table-scroll .cmp-table td:not(.feature)::before{display:none !important}
}

/* ============================================================
   LEGAL PAGE SPACING — final overrides
   Keep legal prose clear of the hero and footer. This lives at
   the end of the file because ticaga.css contains repeated
   extracted footer/page rules below the original legal block.
   ============================================================ */
body.legal-page main > .legal-layout{
  padding-top:clamp(128px, 9vw, 176px) !important;
  padding-bottom:clamp(152px, 10vw, 208px) !important;
}

body.legal-page .legal-summary{
  margin-top:0 !important;
}

body.legal-page footer.foot{
  margin-top:0 !important;
}

@media (max-width:1080px){
  body.legal-page main > .legal-layout{
    padding-top:104px !important;
    padding-bottom:136px !important;
  }
}

@media (max-width:720px){
  body.legal-page main > .legal-layout{
    padding-top:72px !important;
    padding-bottom:96px !important;
  }
}

/* ============================================================
   LEGAL PAGES — mobile margin and reading-width polish
   ============================================================ */
@media (max-width:720px){
  body.legal-page .container{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  body.legal-page .page-hero.legal-hero .page-hero-inner{
    padding-top:56px !important;
    padding-bottom:44px !important;
  }

  body.legal-page .page-hero.legal-hero h1{
    font-size:clamp(34px, 11vw, 46px) !important;
    line-height:1.02;
    max-width:11ch;
  }

  body.legal-page .page-hero.legal-hero .lede{
    font-size:15px;
    line-height:1.55;
    max-width:100%;
  }

  body.legal-page .legal-tabs{
    gap:8px;
    margin-top:22px;
  }

  body.legal-page .legal-tabs a{
    padding:8px 11px;
    font-size:11px;
  }

  body.legal-page main > .legal-layout{
    padding-top:44px !important;
    padding-bottom:80px !important;
  }

  body.legal-page .legal-toc{
    margin-bottom:34px;
    padding-bottom:26px;
  }

  body.legal-page .legal-toc a{
    padding:8px 10px;
    font-size:13px;
  }

  body.legal-page .legal-prose{
    max-width:none;
  }

  body.legal-page .legal-summary{
    padding:22px !important;
    margin-bottom:34px !important;
    border-radius:14px;
  }

  body.legal-page .legal-summary li{
    font-size:14px;
    gap:10px;
  }

  body.legal-page .legal-section{
    padding:30px 0;
  }

  body.legal-page .legal-section h2{
    font-size:24px;
    line-height:1.12;
  }

  body.legal-page .legal-prose p,
  body.legal-page .legal-prose li,
  body.legal-page .def-row .dd{
    font-size:14.5px;
    line-height:1.68;
  }

  body.legal-page .def-row{
    padding:16px 18px;
  }

  body.legal-page .legal-note{
    padding:18px;
    font-size:12.5px;
  }
}

@media (max-width:380px){
  body.legal-page .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  body.legal-page .legal-summary{
    padding:20px !important;
  }
}

/* ============================================================
   MARKETING FOOTER — canonical company/legal placement
   ============================================================ */
footer.foot .foot-grid,
body[data-page="home"] footer.foot .foot-grid{
  display:grid !important;
  grid-template-columns:minmax(220px,2fr) repeat(4,minmax(120px,1fr)) !important;
  gap:32px !important;
}

footer.foot .foot-legal{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

footer.foot .foot-legal a{
  color:var(--muted);
  text-decoration:none;
}

footer.foot .foot-legal a:hover,
footer.foot .foot-legal a[aria-current="page"]{
  color:var(--accent);
}

footer.foot .links a[aria-current="page"]{
  color:var(--accent);
}

@media (max-width:860px){
  footer.foot .foot-grid,
  body[data-page="home"] footer.foot .foot-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

@media (max-width:720px){
  footer.foot .foot-grid,
  body[data-page="home"] footer.foot .foot-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media (max-width:520px){
  footer.foot .foot-grid,
  body[data-page="home"] footer.foot .foot-grid{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   COMPARE PAGE — mobile comparison cards
   Keep the desktop table intact, but make the dense comparison
   readable on phones without horizontal scrolling.
   ============================================================ */
@media (max-width: 600px){
  body[data-page="compare"] .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  body[data-page="compare"] .phero-dark{
    padding:72px 0 46px;
  }

  body[data-page="compare"] .phero h1{
    font-size:clamp(40px, 13vw, 54px);
    letter-spacing:-0.035em;
  }

  body[data-page="compare"] .phero .lede{
    font-size:15px;
    margin-bottom:18px;
  }

  body[data-page="compare"] section.block-tight{
    padding:44px 0;
  }

  body[data-page="compare"] .cmp-table-scroll{
    overflow:visible;
    border-radius:0;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table,
  body[data-page="compare"] .cmp-table-scroll .cmp-table tbody,
  body[data-page="compare"] .cmp-table-scroll .cmp-table tr,
  body[data-page="compare"] .cmp-table-scroll .cmp-table td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table thead{
    display:none !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table tbody tr{
    padding:18px !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--surface) !important;
    margin-bottom:16px !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td{
    padding:0 !important;
    border:0 !important;
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.45;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table .y,
  body[data-page="compare"] .cmp-table-scroll .cmp-table .n{
    white-space:nowrap;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td.feature{
    font-size:16px !important;
    font-weight:800;
    padding-bottom:12px !important;
    margin-bottom:12px !important;
    border-bottom:1px solid var(--border) !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td:not(.feature){
    display:grid !important;
    grid-template-columns:1fr;
    gap:5px;
    align-items:start;
    padding:9px 0 !important;
    border-bottom:1px dashed var(--border) !important;
    overflow-wrap:anywhere;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td:not(.feature):last-child{
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td:not(.feature)::before{
    display:block !important;
    content:"";
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:10.5px;
    line-height:1.35;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td:nth-child(2)::before{content:"Ticaga"}
  body[data-page="compare"] .cmp-table-scroll .cmp-table td:nth-child(3)::before{content:"SupportPal"}
  body[data-page="compare"] .cmp-table-scroll .cmp-table td:nth-child(4)::before{content:"Zendesk"}
  body[data-page="compare"] .cmp-table-scroll .cmp-table td:nth-child(5)::before{content:"Help Scout"}

  body[data-page="compare"] .cmp-table-scroll .cmp-table td.us-col{
    width:100% !important;
    border-radius:10px;
    background:color-mix(in oklch, var(--accent) 8%, var(--surface)) !important;
    padding:12px 20px 12px 16px !important;
    margin:2px 0 6px !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table td.us-col::before{
    color:var(--accent) !important;
    font-weight:700;
  }

  body[data-page="compare"] .compare-choose-card{
    padding:20px !important;
    border-radius:14px !important;
  }

  body[data-page="compare"] .choose-list li{
    line-height:1.45;
  }
}

@media (max-width: 380px){
  body[data-page="compare"] .container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body[data-page="compare"] .cmp-table-scroll .cmp-table tbody tr{
    padding:16px !important;
  }
}

/* ============================================================
   FEATURES PAGE — mobile product preview frame fit
   Match Live Chat previews by letting screenshots define height.
   ============================================================ */
@media (max-width:720px){
  body[data-page="features"] .product-window{
    background:var(--surface);
  }

  body[data-page="features"] .product-window-body{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    line-height:0;
    background:transparent !important;
  }

  body[data-page="features"] .product-window-body .product-shot{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:left top !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

/* ============================================================
   CAREERS PAGE — mobile margin and reading-width polish
   ============================================================ */
@media (max-width:720px){
  body[data-page="careers"] .container,
  body[data-page="careers"] .container-narrow{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  body[data-page="careers"] .page-hero-inner{
    padding-top:56px !important;
    padding-bottom:50px !important;
  }

  body[data-page="careers"] .page-hero h1{
    font-size:clamp(42px, 14vw, 58px) !important;
    line-height:0.98;
    letter-spacing:-0.035em;
    max-width:10ch;
  }

  body[data-page="careers"] .page-hero .lede{
    font-size:21px;
    line-height:1.42;
    max-width:100%;
  }

  body[data-page="careers"] .page-hero .hero-cmd{
    width:100%;
    max-width:100%;
    padding:15px 16px;
    font-size:13px;
    white-space:normal;
  }

  body[data-page="careers"] section.block{
    padding-top:52px;
    padding-bottom:52px;
  }

  body[data-page="careers"] #vacancies,
  body[data-page="careers"] #benefits,
  body[data-page="careers"] #detail{
    padding-top:28px !important;
  }

  body[data-page="careers"] .prose-split{
    gap:22px;
  }

  body[data-page="careers"] .lead-col h2,
  body[data-page="careers"] .block-head h2{
    font-size:clamp(40px, 12vw, 54px);
    line-height:1.02;
    letter-spacing:-0.035em;
  }

  body[data-page="careers"] .body-col p,
  body[data-page="careers"] .block-head p{
    font-size:18px;
    line-height:1.62;
  }

  body[data-page="careers"] .vacancy-term,
  body[data-page="careers"] .benefit,
  body[data-page="careers"] .accordion,
  body[data-page="careers"] .cta{
    border-radius:14px;
  }
}

@media (max-width:380px){
  body[data-page="careers"] .container,
  body[data-page="careers"] .container-narrow{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  body[data-page="careers"] .page-hero h1{
    font-size:40px !important;
  }

  body[data-page="careers"] .page-hero .lede{
    font-size:19px;
  }
}