@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Bebas+Neue&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Court Kraken Ocean Palette ── */
  --bg:#07111F;--surf:#0D1E35;--surf2:#122842;--bdr:rgba(0,212,200,.1);
  --tx:#E8F4F8;--tx2:#8BAFC4;--tx3:#6B9EB8;
  /* Kraken Teal (primary accent) */
  --grn:#00D4B8;--grn-l:#ccfaf6;--grn-d:#00a896;
  /* Kraken Blue */
  --blu:#4FC3F7;--blu-l:#e1f5fe;--blu-d:#0288D1;
  /* Coral CTA */
  --amb:#FF5733;--amb-l:#ffe0d6;
  /* Danger */
  --red:#FF4757;--red-l:#ffe0e3;
  /* Kraken Purple (AI) */
  --pur:#9C27B0;--pur-l:#f3e5f5;
  /* Bioluminescent cyan */
  --cyn:#00E5FF;
  --r:10px;--rs:6px;
}
html,body{height:100%;font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:15px;overflow:hidden}
input,select,textarea,button{font-family:inherit;font-size:inherit}
button{cursor:pointer}
#root{height:100vh;width:100vw;overflow:hidden}
/* Landing page needs scrolling */
.landing{height:100vh;overflow-y:auto;overflow-x:hidden}
#app{display:flex;flex-direction:column;height:100vh;width:100vw}
#topbar{flex:0 0 48px;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:100}
#logo{font-size:15px;font-weight:900;color:var(--grn);letter-spacing:-.02em;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;background:rgba(0,212,200,.08);border:1px solid rgba(0,212,200,.25);cursor:pointer;padding:5px 10px;border-radius:var(--rs);transition:background .15s,box-shadow .15s,border-color .15s;position:relative}
#logo:hover{background:rgba(0,212,200,.16);border-color:rgba(0,212,200,.5);box-shadow:0 0 0 2px rgba(0,212,200,.12)}
#logo em{color:var(--amb);font-style:normal}
/* pulse ring on logo — fires once after app loads */
@keyframes kraken-pulse{0%{box-shadow:0 0 0 0 rgba(0,212,200,.55)}70%{box-shadow:0 0 0 8px rgba(0,212,200,0)}100%{box-shadow:0 0 0 0 rgba(0,212,200,0)}}
#logo.pulse{animation:kraken-pulse 1.2s ease-out 1}
.gsearch-wrap{position:relative;flex:1;max-width:360px;transition:max-width .2s}
.gsearch-wrap::before{content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none}
#gsearch{width:100%;padding:6px 10px 6px 28px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-size:12px}
#gsearch:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 2px rgba(0,212,200,.15)}
/* Mobile: collapse search to icon, expand on focus */
@media(max-width:600px){
  .gsearch-wrap{max-width:36px;overflow:hidden}
  .gsearch-wrap:focus-within{max-width:200px}
  .gsearch-wrap::before{left:8px}
  #gsearch{padding:6px 8px 6px 28px;min-width:0}
}
#status{font-size:11px;color:var(--tx3);white-space:nowrap;margin-left:auto;min-width:80px;text-align:right}
.tbtn{background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--tx2);padding:6px 12px;font-size:11px;font-weight:700;transition:all .15s;white-space:nowrap}
.tbtn:hover{color:var(--tx);background:var(--surf)}
.tbtn.green{background:var(--grn);border-color:var(--grn);color:#fff}
.tbtn.green:hover{background:var(--grn-d)}
.tbtn.amber{background:var(--amb);border-color:var(--amb);color:#000}
.tbtn.red{background:var(--red);border-color:var(--red);color:#fff}
.tbtn.red:hover{opacity:.85}
#nav{flex:0 0 44px;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
.ntab{flex-shrink:0;padding:0 14px;border:none;background:none;color:var(--tx2);font-size:12px;font-weight:600;height:100%;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap}
.ntab:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.ntab.on{color:var(--grn);border-bottom-color:var(--grn)}
#content{flex:1;overflow:hidden;position:relative}
.mod{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.mod.on{display:flex}
.mhd{flex:0 0 auto;padding:12px 18px 9px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mtitle{font-size:16px;font-weight:800}
.macts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.btn{padding:7px 14px;border-radius:var(--rs);border:none;font-size:12px;font-weight:700;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.btn.p{background:var(--grn);color:#fff}.btn.p:hover{background:var(--grn-d)}
.btn.s{background:var(--surf2);color:var(--tx2);border:1px solid var(--bdr)}.btn.s:hover{color:var(--tx)}
.btn.b{background:var(--blu);color:#fff}.btn.b:hover{background:var(--blu-d)}
.btn.a{background:var(--amb);color:#000}.btn.a:hover{opacity:.85}
.btn.r{background:var(--red);color:#fff}
.btn.sm{padding:5px 10px;font-size:11px}
.fbar{flex:0 0 auto;padding:8px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fi{padding:6px 10px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-size:12px;min-width:140px}
.fi:focus{outline:none;border-color:var(--blu)}
.fs{padding:6px 9px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-size:12px}
.pill{background:var(--surf2);border:1px solid var(--bdr);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--tx2)}
.pill strong{color:var(--tx)}
.tw{flex:1;overflow:auto}
.tw::-webkit-scrollbar{width:5px;height:5px}
.tw::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--surf);padding:8px 12px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--bdr);white-space:nowrap;position:sticky;top:0;z-index:2;cursor:pointer;user-select:none}
thead th:hover{color:var(--tx2)}
tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;cursor:pointer}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr.sel{background:rgba(59,130,246,.1)}
tbody td{padding:8px 12px;vertical-align:middle}
td.dim{color:var(--tx2)}
.nod{text-align:center;padding:40px;color:var(--tx3)}
.bd{display:inline-block;padding:2px 7px;border-radius:11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bd-g{background:rgba(16,185,129,.15);color:var(--grn)}
.bd-a{background:rgba(245,158,11,.15);color:var(--amb)}
.bd-r{background:rgba(239,68,68,.15);color:var(--red)}
.bd-b{background:rgba(59,130,246,.15);color:var(--blu)}
.bd-x{background:rgba(148,163,184,.1);color:var(--tx2)}
.dl{display:flex;flex:1;overflow:hidden}
.dlist{width:320px;flex-shrink:0;border-right:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden}
.dpanel{flex:1;overflow-y:auto;padding:16px 18px}
.dpanel::-webkit-scrollbar{width:5px}
.dpanel::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
.dsec{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 14px;margin-bottom:11px}
.dsh{font-size:10px;font-weight:800;color:var(--tx3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--bdr)}
.dr{display:flex;gap:7px;margin-bottom:6px;font-size:13px}
.dl2{color:var(--tx3);min-width:110px;flex-shrink:0;font-size:12px}
.dv{color:var(--tx);font-weight:500}
.dv a{color:var(--blu);text-decoration:none}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:11px;padding:16px}
.dc{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:14px 16px}
.dc-lbl{font-size:10px;font-weight:700;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.dc-val{font-size:28px;font-weight:900;color:var(--tx);line-height:1}
.dc-sub{font-size:11px;color:var(--tx2);margin-top:3px}
.dc.grn{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.06)}
.dc.amb{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06)}
.dc.blu{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06)}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;padding:12px}
#ov.on{display:flex}
.modal{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.mhdr{padding:15px 19px 11px;border-bottom:1px solid var(--bdr);display:flex;align-items:center}
.mtit{font-size:15px;font-weight:800;flex:1}
.mcls{background:none;border:none;color:var(--tx3);font-size:20px;line-height:1;padding:2px;cursor:pointer}
.mcls:hover{color:var(--tx)}
.mbody{flex:1;overflow-y:auto;padding:15px 19px}
.mfoot{padding:11px 19px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:7px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fg.one{grid-template-columns:1fr}
.fgrp{display:flex;flex-direction:column;gap:3px}
.fgrp.full{grid-column:1/-1}
.flbl{font-size:10px;font-weight:700;color:var(--tx2);letter-spacing:.05em;text-transform:uppercase}
.finp,.fsel,.ftxt{padding:8px 10px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-size:13px;width:100%}
.finp:focus,.fsel:focus,.ftxt:focus{outline:none;border-color:var(--blu)}
.ftxt{resize:vertical;min-height:60px}
.fsec{font-size:10px;font-weight:800;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;padding:9px 0 5px;border-bottom:1px solid var(--bdr);margin-bottom:9px;grid-column:1/-1}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px;padding:14px 16px}
.bill-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:13px 15px;cursor:pointer;transition:all .15s;border-left:4px solid transparent}
.bill-card:hover{border-color:rgba(59,130,246,.4)}
.bill-card.owed{border-left-color:var(--red)}
.bill-card.paid{border-left-color:var(--grn)}
.bill-bar{height:5px;background:var(--surf2);border-radius:3px;overflow:hidden;margin:8px 0 5px}
.bill-bar-fill{height:100%;background:var(--grn);transition:width .4s;border-radius:3px}
.stripe-btn{background:linear-gradient(135deg,#635bff,#7c73ff);color:#fff;border:none;border-radius:7px;padding:7px 13px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.stripe-btn:hover{opacity:.88}
/* ═══════════════════════════════════════════════════════════════
   CALENDAR – REDESIGNED VISUAL SYSTEM
   Dark navy base · Neon-bordered bubbles · Layered grid lines
═══════════════════════════════════════════════════════════════ */

/* ── Court header row ─────────────────────────────────────── */
.cal-rg-header{display:flex;background:#050f1c;border-bottom:1px solid rgba(0,212,184,.18);flex-shrink:0;position:sticky;top:0;z-index:20;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.cal-rh-time{width:58px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.06);padding:8px 4px;font-size:9px;font-weight:700;color:#3d5c72;text-align:center;letter-spacing:.04em;font-family:ui-monospace,monospace;text-transform:uppercase}
.cal-rh-col{flex:1;min-width:0;text-align:center;padding:0;border-right:1px solid rgba(255,255,255,.04);cursor:default;overflow:hidden}
.cal-rh-inner{display:flex;flex-direction:column;align-items:center;padding:6px 4px 5px;gap:3px}
.cal-rh-bar{width:100%;height:3px;border-radius:3px 3px 0 0;margin-bottom:2px;opacity:.9}
.cal-rh-name{font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-rh-surface{font-size:7.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.55;margin-top:1px}
.cal-rh-pct{font-size:9px;margin-top:2px;font-weight:700;letter-spacing:.02em}
.cal-rh-pct-bar{height:2px;border-radius:2px;margin-top:3px;width:70%;background:rgba(255,255,255,.07);overflow:hidden}
.cal-rh-pct-fill{height:100%;border-radius:2px;transition:width .4s}

/* ── Scroll & body ────────────────────────────────────────── */
.cal-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:rgba(0,212,184,.2) transparent}
.cal-scroll::-webkit-scrollbar{width:5px}
.cal-scroll::-webkit-scrollbar-track{background:transparent}
.cal-scroll::-webkit-scrollbar-thumb{background:rgba(0,212,184,.2);border-radius:3px}
.cal-rg-body{display:flex;position:relative;background:#060e1a}

/* ── Time gutter ──────────────────────────────────────────── */
.cal-time-col{width:58px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.06);background:#04090f}
/* Each slot is position:relative so the label can float to the top edge */
.cal-time-slot{position:relative;font-family:ui-monospace,monospace;text-align:right;white-space:nowrap;overflow:visible;padding:0}
/* Label anchored to TOP of its slot so it lines up with the border-top of the cell opposite */
.cal-time-slot.ts-hour .tsl-lbl{position:absolute;top:-1px;right:7px;font-size:9.5px;font-weight:700;color:#7aa5bf;letter-spacing:.02em;line-height:1;pointer-events:none}
.cal-time-slot.ts-half .tsl-lbl{position:absolute;top:-1px;right:7px;font-size:8px;font-weight:500;color:#3a5468;line-height:1;pointer-events:none}
.cal-time-slot.ts-quarter .tsl-lbl{display:none}

/* ── Resource (court) columns ─────────────────────────────── */
.cal-resource-col{flex:1;min-width:0;position:relative;border-right:1px solid rgba(255,255,255,.035)}
.cal-resource-col:last-child{border-right:none}

/* ── Grid cells with layered lines ───────────────────────── */
/* border-TOP so the line sits AT the start of the time slot,
   perfectly aligned with the label that floats to the top of its gutter cell */
.cal-hour-cell{cursor:pointer;transition:background .12s;position:relative}
.cal-hour-cell.ch-hour{border-top:1.5px solid rgba(255,255,255,.13)}
.cal-hour-cell.ch-half{border-top:1px dashed rgba(255,255,255,.058)}
.cal-hour-cell.ch-quarter{border-top:1px dotted rgba(255,255,255,.024)}
.cal-hour-cell:hover{background:rgba(0,212,184,.06)}

/* ── Event bubbles – base ─────────────────────────────────── */
.cal-event-block{
  position:absolute;left:3px;right:3px;
  border-radius:9px;
  padding:5px 7px 4px;
  cursor:pointer;overflow:hidden;z-index:5;
  border:1.5px solid transparent;
  transition:transform .15s,box-shadow .15s,z-index 0s;
  backdrop-filter:blur(4px);
}
.cal-event-block:hover{
  transform:scale(1.025) translateY(-1px);
  box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);
  z-index:15;
}
/* Title line */
.cal-event-block .ev-t{font-size:10.5px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e8f4ff;letter-spacing:.01em}
/* Sub line */
.cal-event-block .ev-s{font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;opacity:.72}
/* Badge row */
.ev-badges{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.ev-badge{font-size:7.5px;font-weight:800;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;line-height:1.5;border:1px solid transparent}
.ev-badge.paid{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.35);color:#6ee7b7}
.ev-badge.owed{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35);color:#fca5a5}
.ev-badge.full{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.35);color:#fcd34d}
.ev-badge.chk{background:rgba(34,211,238,.15);border-color:rgba(34,211,238,.3);color:#67e8f9}
.ev-badge.type{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#a0b8c8}

/* ── Event type colour palette ────────────────────────────── */
/* Private lesson – sky blue */
.ev-private{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.55);color:#93c5fd}
.ev-private .ev-s{color:#7aa5d0}
.ev-private:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(59,130,246,.35)!important}
/* Semi-private – purple */
.ev-semi{background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.55);color:#c4b5fd}
.ev-semi .ev-s{color:#a88fe0}
.ev-semi:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(139,92,246,.35)!important}
/* Clinic / group – teal */
.ev-clinic{background:rgba(20,184,166,.13);border-color:rgba(20,184,166,.55);color:#5eead4}
.ev-clinic .ev-s{color:#4bb8a8}
.ev-clinic:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(20,184,166,.35)!important}
/* League / match – coral-orange */
.ev-league{background:rgba(249,115,22,.13);border-color:rgba(249,115,22,.55);color:#fdba74}
.ev-league .ev-s{color:#dc8f54}
.ev-league:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(249,115,22,.35)!important}
/* Junior – emerald green */
.ev-junior{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.55);color:#6ee7b7}
.ev-junior .ev-s{color:#54c49a}
.ev-junior:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(52,211,153,.35)!important}
/* Adult social – gold */
.ev-adult{background:rgba(250,204,21,.13);border-color:rgba(250,204,21,.5);color:#fde68a}
.ev-adult .ev-s{color:#c9b554}
.ev-adult:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(250,204,21,.3)!important}
/* Fallback lesson = ev-lesson = same as private */
.ev-lesson{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.55);color:#93c5fd}
.ev-lesson .ev-s{color:#7aa5d0}
.ev-lesson:hover{box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 14px rgba(59,130,246,.35)!important}
/* Block / unavailable */
.ev-block{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45);color:#fcd34d}
.ev-block .ev-s{color:#c9a93a}

/* ── Drag states ──────────────────────────────────────────── */
.drag-mode .cal-event-block{cursor:grab}
.drag-mode .cal-event-block:active{cursor:grabbing;transform:scale(1.04);opacity:.9}
.drag-mode .cal-hour-cell.drag-over{background:rgba(0,212,184,.1);outline:2px dashed rgba(0,212,184,.45)}

/* ── Current-time line ────────────────────────────────────── */
#cal-timeline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),rgba(239,68,68,.2));z-index:25;pointer-events:none;box-shadow:0 0 10px rgba(239,68,68,.5)}
#cal-timeline::before{content:'';position:absolute;left:54px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(239,68,68,.9)}

/* ── View toggle / toolbar ────────────────────────────────── */
.view-on{background:var(--grn)!important;color:#000!important;border-color:var(--grn)!important;font-weight:800!important}
.drag-on{background:var(--amb)!important;color:#000!important;border-color:var(--amb)!important}
.avail-panel{width:240px;flex-shrink:0;border-left:1px solid var(--bdr);background:var(--surf);overflow:hidden;transition:width .25s;display:flex;flex-direction:column}
.avail-panel.closed{width:0}
.avail-slot{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .1s}
.avail-slot:hover{background:rgba(255,255,255,.03)}
.avail-time{font-size:11px;font-weight:700;color:var(--amb)}
.avail-detail{font-size:11px;color:var(--tx2);margin-top:1px}
.avail-pros{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.pro-tag{background:rgba(59,130,246,.15);color:var(--blu);border-radius:12px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;transition:all .12s}
.pro-tag:hover{background:var(--blu);color:#fff}
.commit-bar{position:fixed;bottom:0;left:0;right:0;height:50px;background:linear-gradient(90deg,#0f172a,#1e293b);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;padding:0 16px;gap:10px;z-index:300;transform:translateY(100%);transition:transform .3s}
.commit-bar.visible{transform:translateY(0)}
.chip{display:inline-block;padding:2px 7px;border-radius:16px;font-size:11px;background:var(--surf2);color:var(--tx2);margin:1px}
.pos{color:var(--grn);font-weight:700}
.neg{color:var(--red);font-weight:700}
.empty{text-align:center;padding:40px 20px;color:var(--tx3)}
#toast{position:fixed;bottom:70px;right:16px;z-index:999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.tm{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rs);padding:8px 13px;font-size:13px;font-weight:600;color:var(--tx);box-shadow:0 8px 24px rgba(0,0,0,.4);animation:si .25s ease}
.tm.ok{border-color:var(--grn);color:var(--grn)}
.tm.er{border-color:var(--red);color:var(--red)}
@keyframes si{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.tag-box{display:flex;flex-wrap:wrap;gap:4px;min-height:28px;padding:4px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rs);margin-bottom:4px}
.tag-item{display:inline-flex;align-items:center;gap:3px;background:var(--surf2);border:1px solid var(--bdr);border-radius:12px;padding:2px 8px;font-size:11px;color:var(--tx)}
.tag-item .tag-x{cursor:pointer;color:var(--red);font-weight:700;margin-left:2px}
.tag-item .tag-x:hover{color:#fff}
.chk-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--bdr);border-radius:var(--rs);margin-bottom:3px;cursor:pointer;transition:background .1s}
.chk-row:hover{background:rgba(255,255,255,.03)}
.chk-row.checked{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2)}
.chk-box{width:20px;height:20px;border-radius:5px;border:2px solid var(--tx3);display:flex;align-items:center;justify-content:font-size:12px;flex-shrink:0;transition:all .15s}
.chk-row.checked .chk-box{background:var(--grn);border-color:var(--grn);color:#fff}
.att-pct{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:800}
/* Auth screens */
.auth-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.auth-card{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:32px 36px;width:100%;max-width:400px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.auth-title{font-size:22px;font-weight:900;color:var(--grn);text-align:center;margin-bottom:4px}
.auth-sub{font-size:11px;color:var(--tx3);text-align:center;letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px}
.auth-input{width:100%;padding:11px 14px;background:var(--bg);border:2px solid var(--bdr);border-radius:8px;color:var(--tx);font-size:14px;outline:none;margin-bottom:12px;transition:border-color .15s}
.auth-input:focus{border-color:var(--blu)}
.auth-btn{width:100%;padding:12px;background:var(--grn);border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;margin-bottom:8px}
.auth-btn:hover{background:var(--grn-d)}
.auth-btn.secondary{background:var(--surf2);color:var(--tx);border:1px solid var(--bdr)}
.auth-btn.secondary:hover{color:var(--tx)}
.auth-btn.google{background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}
.auth-btn.google:hover{background:#f5f5f5}
.auth-err{display:none;color:var(--red);font-size:13px;font-weight:600;text-align:center;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:10px 14px;margin-bottom:12px;line-height:1.4}
.auth-link{color:var(--blu);font-size:12px;text-align:center;cursor:pointer;margin-top:8px}
.auth-link:hover{text-decoration:underline}
.divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--tx3);font-size:11px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--bdr)}
/* Onboarding */
.onboard-screen{position:fixed;inset:0;background:var(--bg);z-index:9990;display:flex;align-items:center;justify-content:center;padding:20px}
.onboard-card{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:32px 36px;width:100%;max-width:520px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
/* Settings panel */
.settings-panel{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:800;display:none;align-items:center;justify-content:center;padding:20px}
.settings-panel.on{display:flex}
/* Subscription banner */
.sub-banner{background:linear-gradient(90deg,rgba(0,212,200,.1),rgba(255,87,51,.08));border-bottom:1px solid rgba(0,212,200,.2);padding:7px 16px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--amb);flex-shrink:0}
.sub-banner.trial{color:var(--grn)}
.sub-banner.past_due{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:var(--red)}
.sub-banner button{margin-left:auto}
/* Loading spinner */
.spinner{width:32px;height:32px;border:3px solid var(--bdr);border-top-color:var(--grn);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Landing page base */
.landing{min-height:100vh;background:var(--bg)}
.landing-hero{padding:80px 20px 60px;text-align:center;background:linear-gradient(180deg,rgba(0,212,200,.06),transparent)}
.landing-hero h1{font-size:52px;font-weight:900;line-height:1.1;margin-bottom:16px}
.landing-hero h1 span{color:var(--grn)}
.landing-hero p{font-size:18px;color:var(--tx2);max-width:560px;margin:0 auto 32px;line-height:1.7}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:40px 20px;max-width:1100px;margin:0 auto}
.feature-card{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:20px 22px}
.feature-card h3{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:6px}
.feature-card p{font-size:12px;color:var(--tx2);line-height:1.6}
.pricing-section{padding:60px 20px;text-align:center;max-width:500px;margin:0 auto}
.price-card{background:var(--surf);border:2px solid var(--grn);border-radius:16px;padding:36px;margin-top:24px}
.price-card .price{font-size:56px;font-weight:900;color:var(--grn)}
.price-card .price sub{font-size:18px;font-weight:600;color:var(--tx2)}
.price-card ul{list-style:none;text-align:left;margin:20px 0;display:flex;flex-direction:column;gap:8px}
.price-card ul li::before{content:'✓ ';color:var(--grn);font-weight:700}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--grn);color:#fff;border:none;border-radius:10px;padding:16px 32px;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s;text-decoration:none}
.hero-cta:hover{background:var(--grn-d)}
/* ═══════════════════════════════════════════════
   LANDING PAGE — ENHANCED MARKETING DESIGN
   ═══════════════════════════════════════════════ */

/* Nav */
.landing-nav{display:flex;align-items:center;padding:14px 32px;border-bottom:1px solid var(--bdr);background:rgba(7,17,31,.96);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);gap:16px}
.landing-nav-logo{font-size:17px;font-weight:900;color:var(--grn);white-space:nowrap;flex-shrink:0}
.landing-nav-logo em{color:var(--amb);font-style:normal}
.landing-nav-links{display:flex;gap:20px;margin:0 auto}
.landing-nav-links a{color:var(--tx2);font-size:13px;font-weight:600;text-decoration:none;transition:color .15s}
.landing-nav-links a:hover{color:var(--tx)}
.landing-nav-actions{display:flex;gap:8px;flex-shrink:0}

/* Hero */
.landing-hero{padding:72px 20px 48px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(0,212,200,.12) 0%,rgba(10,22,50,.0) 60%);position:relative;overflow:hidden}
.landing-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300D4B8' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.landing-hero-badge{display:inline-block;background:rgba(0,212,200,.12);border:1px solid rgba(0,212,200,.35);color:var(--grn);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:20px;letter-spacing:.05em}
.landing-hero h1{font-size:56px;font-weight:900;line-height:1.08;margin-bottom:18px;letter-spacing:-.02em}
.landing-hero h1 span{color:var(--grn);text-shadow:0 0 60px rgba(0,212,200,.5)}
.landing-hero p{font-size:18px;color:var(--tx2);max-width:580px;margin:0 auto 32px;line-height:1.75}
.landing-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.hero-cta-sec{display:inline-flex;align-items:center;gap:6px;background:var(--surf2);color:var(--tx);border:1px solid var(--bdr);border-radius:10px;padding:16px 28px;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.hero-cta-sec:hover{border-color:var(--tx2);color:var(--tx)}
.landing-hero-trust{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--tx3);margin-bottom:48px}
.landing-hero-trust span{display:flex;align-items:center;gap:4px}

/* Dashboard preview mockup */
.landing-preview{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;max-width:820px;margin:0 auto;box-shadow:0 32px 80px rgba(0,0,0,.6);text-align:left}
.lp-topbar{background:var(--surf2);padding:10px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:6px}
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--bdr)}
.lp-stat{padding:14px 16px;border-right:1px solid var(--bdr)}
.lp-stat:last-child{border-right:none}
.lp-stat-val{font-size:22px;font-weight:900;color:var(--grn)}
.lp-stat-lbl{font-size:10px;color:var(--tx3);margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.lp-body{padding:12px 14px}
.lp-table{border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.lp-thead{display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;padding:7px 12px;background:var(--surf2);font-size:9px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--bdr)}
.lp-row{display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;padding:8px 12px;font-size:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.04)}
.lp-row:last-child{border-bottom:none}

.lp-row:last-child{border-bottom:none}

/* ════════════════════════════════════════════════════════════
   CALENDAR + AI MOCKUP  (replaces old .landing-preview table)
   ════════════════════════════════════════════════════════════ */

/* Intro label above mockup */
.cal-mock-label{text-align:center;margin:0 auto 20px;max-width:700px}
.cal-mock-label-pill{display:inline-block;background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.25);color:var(--grn);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:10px}
.cal-mock-label p{font-size:14px;color:var(--tx2);line-height:1.5;margin:0}

/* Outer wrapper */
.cal-mock-wrap{max-width:1100px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(0,212,200,.15);text-align:left;position:relative}

/* Chrome titlebar */
.cal-mock-chrome{background:#0a1628;border-bottom:1px solid rgba(0,212,200,.1);padding:9px 14px;display:flex;align-items:center;gap:10px}
.cal-mock-dots{display:flex;gap:5px}
.cal-mock-dots span{width:10px;height:10px;border-radius:50%;display:block}
.cal-mock-dots span:nth-child(1){background:#ff5f57}
.cal-mock-dots span:nth-child(2){background:#febc2e}
.cal-mock-dots span:nth-child(3){background:#28c840}
.cal-mock-url{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:5px;font-size:10px;color:var(--tx3);padding:3px 10px;text-align:center;font-family:monospace;max-width:280px;margin:0 auto}
.cal-mock-tabs{display:flex;gap:4px;margin-left:auto}
.cmt{font-size:9px;padding:3px 9px;border-radius:4px;background:rgba(255,255,255,.05);color:var(--tx3);cursor:default}
.cmt.active{background:rgba(0,212,200,.15);color:var(--grn);border:1px solid rgba(0,212,200,.3);font-weight:700}

/* Main body: left=calendar, right=AI */
.cal-mock-body{display:grid;grid-template-columns:1fr 290px;background:var(--bg);max-height:540px;overflow:hidden}

/* ── Left column ── */
.cal-mock-left{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(0,212,200,.1)}

.cal-mock-topbar{background:var(--surf);border-bottom:1px solid var(--bdr);padding:8px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.cal-mock-logo{font-size:12px;font-weight:900;color:var(--grn);white-space:nowrap}
.cal-mock-nav{display:flex;align-items:center;gap:6px;margin:0 auto}
.cm-navbtn{font-size:10px;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:2px 7px;color:var(--tx2);cursor:default}
.cm-date{font-size:11px;font-weight:700;color:var(--tx);white-space:nowrap}
.cm-today{font-size:9px;background:var(--grn);color:#fff;border-radius:4px;padding:2px 7px;font-weight:800;cursor:default}
.cal-mock-stats{display:flex;gap:10px;margin-left:auto;flex-shrink:0}
.cms{display:flex;flex-direction:column;align-items:flex-end}
.cms-v{font-size:13px;font-weight:900;color:var(--grn);line-height:1}
.cms-l{font-size:8px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

/* Time grid */
.cal-mock-grid{display:flex;flex:1;overflow:hidden;min-height:0}
.cal-mock-times{width:38px;flex-shrink:0;padding-top:32px;border-right:1px solid var(--bdr);background:rgba(0,0,0,.2)}
.cmt-label{height:var(--hr,42px);font-size:8px;color:var(--tx3);padding-right:5px;text-align:right;display:flex;align-items:flex-start;padding-top:3px;justify-content:flex-end}
.cal-mock-courts{flex:1;overflow:hidden;position:relative}

/* Court header row */
.cal-crt-headers{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--bdr);background:var(--surf);flex-shrink:0}
.cal-crt-hdr{padding:5px 6px;text-align:center;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:1px}
.cal-crt-hdr:last-child{border-right:none}

/* The chip grid */
.cal-chip-grid{display:grid;grid-template-columns:repeat(5,1fr);position:relative;height:calc(12 * var(--hr,42px));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,212,200,.2) transparent}
.cal-col{position:relative;border-right:1px solid rgba(0,212,200,.06);min-height:100%}
.cal-col:last-child{border-right:none}

/* Hour-line stripes */
.cal-chip-grid::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hr,42px) - 1px),rgba(0,212,200,.04) calc(var(--hr,42px) - 1px),rgba(0,212,200,.04) var(--hr,42px));z-index:0}

/* Lesson chips */
.cal-chip{position:absolute;left:3px;right:3px;border-radius:6px;border:1px solid rgba(0,212,200,.15);padding:5px 6px;overflow:hidden;cursor:default;z-index:1;transition:transform .15s,box-shadow .15s}
.cal-chip:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:10}
.cc-title{font-size:9.5px;font-weight:800;color:var(--tx);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-sub{font-size:8px;color:var(--tx2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-time{font-size:8px;color:var(--tx3);margin-top:2px}
.cc-badge{display:inline-block;font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;margin-top:3px}
.badge-enrolled{background:rgba(0,212,200,.15);color:var(--grn)}
.badge-paid{background:rgba(16,185,129,.15);color:#10b981}
.badge-owed{background:rgba(255,71,87,.15);color:var(--red)}
.cc-full{position:absolute;top:4px;right:4px;font-size:7px;font-weight:900;background:rgba(255,87,51,.2);color:#FF5733;border:1px solid rgba(255,87,51,.4);border-radius:3px;padding:1px 4px;letter-spacing:.06em}

/* AI-booked chips have a glow + pulse border */
.ai-added{animation:ai-pulse 3s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,200,0);border-color:rgba(0,212,200,.5)}50%{box-shadow:0 0 12px 2px rgba(0,212,200,.25);border-color:var(--grn)}}
.ai-tag{background:var(--grn);color:#000;font-size:7px;font-weight:900;padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:middle;letter-spacing:.04em}

/* Now-line */
.cal-now-line{position:absolute;left:0;right:0;top:calc(4.2 * var(--hr,42px));pointer-events:none;z-index:20;display:flex;align-items:center}
.cal-now-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);flex-shrink:0;margin-left:2px}
.cal-now-line::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--red),transparent);margin-left:-4px;opacity:.7}

/* ── AI right panel ── */
.cal-mock-ai{background:var(--surf);display:flex;flex-direction:column;max-height:540px}
.cal-ai-header{background:rgba(0,212,200,.08);border-bottom:1px solid rgba(0,212,200,.15);padding:10px 12px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.cal-ai-icon{font-size:20px;line-height:1}
.cal-ai-live{margin-left:auto;font-size:9px;font-weight:800;color:var(--grn);letter-spacing:.06em;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.cal-ai-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(0,212,200,.2) transparent}
.cal-ai-msg{font-size:11px;line-height:1.4;padding:8px 10px;border-radius:8px;max-width:90%}
.cal-ai-msg.user{background:rgba(79,195,247,.12);border:1px solid rgba(79,195,247,.2);color:var(--tx2);align-self:flex-end;text-align:right;font-style:italic}
.cal-ai-msg.bot{background:rgba(0,212,200,.07);border:1px solid rgba(0,212,200,.15);color:var(--tx);align-self:flex-start}

.cal-ai-thinking{font-size:10px;color:var(--tx3);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.cal-ai-list{margin:6px 0 6px 4px;padding-left:10px;font-size:10px;color:var(--tx2)}
.cal-ai-list li{margin:2px 0}
.cal-ai-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cal-ai-act{font-size:9px;font-weight:700;background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.2);color:var(--grn);padding:3px 8px;border-radius:4px;cursor:default}
.cal-ai-act:hover{background:rgba(0,212,200,.2)}

/* Typing dots */
.cal-ai-dots{display:inline-flex;gap:3px}
.cal-ai-dots span{width:5px;height:5px;border-radius:50%;background:var(--grn);display:inline-block;animation:dot-bounce .9s ease-in-out infinite}
.cal-ai-dots span:nth-child(2){animation-delay:.18s}
.cal-ai-dots span:nth-child(3){animation-delay:.36s}
@keyframes dot-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* AI typing message auto-fades to real message */
.cal-ai-typing{animation:fade-typing 3s ease-in-out forwards;animation-delay:1.5s}
@keyframes fade-typing{0%{opacity:1}90%{opacity:1}100%{opacity:0;height:0;padding:0;margin:0;overflow:hidden}}

.cal-ai-input-bar{border-top:1px solid rgba(0,212,200,.1);padding:8px 10px;display:flex;gap:6px;flex-shrink:0}
.cal-ai-input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(0,212,200,.2);border-radius:6px;color:var(--tx2);font-size:10px;padding:6px 10px;font-family:inherit}
.cal-ai-input::placeholder{color:var(--tx3);font-size:10px}
.cal-ai-send{background:var(--grn);border:none;border-radius:6px;padding:6px 10px;font-size:14px;cursor:default;flex-shrink:0}

/* CSS variable for hour row height */
.cal-chip-grid,.cal-mock-times{--hr:42px}

/* ── Responsive collapse ── */
@media(max-width:900px){
  .cal-mock-body{grid-template-columns:1fr}
  .cal-mock-ai{display:none}
}
@media(max-width:640px){
  .cal-crt-headers{grid-template-columns:repeat(3,1fr)}
  .cal-chip-grid{grid-template-columns:repeat(3,1fr)}
  .cal-col:nth-child(n+4){display:none}
  .cal-mock-topbar{flex-wrap:wrap;gap:6px}
  .cal-mock-stats{display:none}
  .cal-mock-nav{margin:0}
  .cal-mock-body{max-height:380px}
}

/* Proof bar */
.landing-proof-bar{background:var(--surf);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--tx2);font-weight:600;overflow:hidden}

/* Sections */
.landing-section{padding:72px 20px}
.landing-section-alt{background:rgba(30,41,59,.4)}
.landing-section-hd{text-align:center;margin-bottom:48px}
.landing-section-hd h2{font-size:38px;font-weight:900;margin-bottom:12px;letter-spacing:-.01em}
.landing-section-hd p{font-size:16px;color:var(--tx2);max-width:520px;margin:0 auto;line-height:1.6}

/* Feature cards enhanced */
.feature-card{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:22px 24px;transition:border-color .2s,transform .2s}
.feature-card:hover{border-color:rgba(16,185,129,.3);transform:translateY(-2px)}
.feature-icon{font-size:28px;margin-bottom:10px}
.feature-card h3{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:7px}
.feature-card p{font-size:12px;color:var(--tx2);line-height:1.65}

/* Steps */
.landing-steps{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;max-width:900px;margin:0 auto}
.landing-step{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:28px 30px;max-width:260px;text-align:center}
.landing-step-arrow{font-size:28px;color:var(--tx3)}
.step-num{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--grn),var(--grn-d));color:#fff;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.landing-step h3{font-size:16px;font-weight:800;margin-bottom:8px}
.landing-step p{font-size:13px;color:var(--tx2);line-height:1.6}

/* Klanker callout */
.landing-klanker{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto}
.klanker-badge,.kraken-badge{display:inline-block;background:rgba(0,212,200,.12);border:1px solid rgba(0,212,200,.35);color:var(--grn);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.landing-klanker-text h2{font-size:34px;font-weight:900;margin-bottom:14px;line-height:1.2}
.landing-klanker-text p{font-size:15px;color:var(--tx2);line-height:1.7;margin-bottom:12px}
.klanker-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.klanker-list li{font-size:14px;color:var(--tx);font-weight:600}
.landing-klanker-code{background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;font-family:'Fira Code','Consolas',monospace}
.code-header{padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:5px}
.code-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.code-dot.red{background:#ff5f57}
.code-dot.amb{background:#febc2e}
.code-dot.grn{background:#28c840}
.code-body{padding:16px;font-size:11px;line-height:1.7;color:#a9b1d6;overflow-x:auto;white-space:pre;margin:0}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.testimonial-card{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:24px 26px}
.testimonial-stars{color:var(--amb);font-size:16px;margin-bottom:12px;letter-spacing:2px}
.testimonial-quote{font-size:14px;color:var(--tx2);line-height:1.7;margin-bottom:18px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--grn),var(--blu));color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.testimonial-name{font-size:13px;font-weight:800;color:var(--tx)}
.testimonial-role{font-size:11px;color:var(--tx3)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;max-width:900px;margin:0 auto}
.price-card{background:var(--surf);border:2px solid var(--grn);border-radius:16px;padding:36px;position:relative}
.price-card.featured{background:linear-gradient(160deg,rgba(16,185,129,.08),rgba(30,41,59,1))}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grn);color:#fff;font-size:11px;font-weight:800;padding:4px 14px;border-radius:20px;white-space:nowrap;letter-spacing:.05em}
.price-name{font-size:14px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.price-amt{font-size:60px;font-weight:900;color:var(--grn);line-height:1}
.price-per{font-size:18px;font-weight:600;color:var(--tx2)}
.price-sub{color:var(--tx2);font-size:13px;margin-top:4px}
.price-divider{height:1px;background:var(--bdr);margin:20px 0}
.price-features{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px;font-size:13px;color:var(--tx)}
.price-compare{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:24px}
.compare-row{display:grid;grid-template-columns:1.2fr .8fr 2fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr);align-items:center;font-size:12px}
.compare-row:last-child{border-bottom:none}
.compare-name{font-weight:800}
.compare-price{color:var(--tx2);font-weight:700}
.compare-desc{color:var(--tx3)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:920px;margin:0 auto}
.faq-item{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:18px 20px}
.faq-q{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:8px}
.faq-a{font-size:13px;color:var(--tx2);line-height:1.65}

/* Final CTA */
.landing-cta-section{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(59,130,246,.08));padding:80px 20px;text-align:center;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.landing-cta-section h2{font-size:38px;font-weight:900;margin-bottom:14px;letter-spacing:-.01em}
.landing-cta-section p{font-size:16px;color:var(--tx2);max-width:520px;margin:0 auto 32px;line-height:1.7}

/* Footer */
.landing-footer{padding:28px 32px;border-top:1px solid var(--bdr);display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.footer-logo{font-size:15px;font-weight:900;color:var(--grn)}
.footer-links{display:flex;gap:16px;margin-left:auto}
.footer-links a{color:var(--tx3);font-size:12px;font-weight:600;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--tx2)}
.footer-copy{width:100%;text-align:center;color:var(--tx3);font-size:11px;margin-top:4px}

/* Responsive */
@media(max-width:900px){
  .landing-klanker{grid-template-columns:1fr}
  .landing-klanker-code{display:none}
  .pricing-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .fg{grid-template-columns:1fr}
  .dl{flex-direction:column}
  .dlist{width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--bdr)}
  .landing-hero h1{font-size:34px}
  .landing-nav-links{display:none}
  .landing-steps{flex-direction:column}
  .landing-step-arrow{transform:rotate(90deg)}
  .lp-stats{grid-template-columns:1fr 1fr}
  .landing-section-hd h2{font-size:28px}
  .landing-cta-section h2{font-size:28px}
}

/* ── Product Catalogue Cards ───────────────────────── */
#prd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
}
.prd-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-left: 4px solid #10b981;
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s, border-color .15s;
}
.prd-card:hover { box-shadow: 0 2px 16px rgba(16,185,129,.2); }
.prd-card.prd-archived { border-left-color: var(--tx3); opacity: .6; }
.prd-card-hd { display: flex; align-items: flex-start; gap: 10px; }
.prd-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.35;
}
.prd-price {
  font-size: 17px;
  font-weight: 900;
  color: #10b981;
  white-space: nowrap;
  flex-shrink: 0;
}
.prd-desc {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.5;
}
.prd-cat-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(124,58,237,.15);
  color: #a78bfa;
  padding: 2px 7px;
  border-radius: 10px;
}
.prd-arch-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(100,116,139,.2);
  color: var(--tx3);
  padding: 2px 7px;
  border-radius: 10px;
}
.prd-card-ft {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--bdr);
}
.prd-stripe-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #635bff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.prd-stripe-btn:hover { background: #4f46e5; transform: translateY(-1px); }

/* ── Email Draft Cards ─────────────────────────────── */
.eml-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-left: 4px solid #7c3aed;
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.eml-card:hover { box-shadow: 0 2px 12px rgba(124,58,237,.18); }
.eml-card.eml-sent { border-left-color: var(--grn); opacity: .7; }
.eml-card-hd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.eml-card-hd input[type="checkbox"] {
  margin-top: 3px;
  width: 14px;
  height: 14px;
  accent-color: #7c3aed;
  flex-shrink: 0;
  cursor: pointer;
}
.eml-to   { font-size: 13px; font-weight: 700; color: var(--tx); }
.eml-email { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.eml-subject {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: 5px;
  padding: 4px 8px;
  background: rgba(124,58,237,.08);
  border-radius: 4px;
}
.eml-body-preview {
  font-size: 12px;
  color: var(--tx3);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow: hidden;
}
.eml-edit-area {
  margin-top: 8px;
  border-top: 1px solid var(--bdr);
  padding-top: 8px;
}
/* Email card grid — 1 col on mobile, 2 on wider */
#eml-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
@media(min-width:900px) {
  #eml-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #eml-grid .eml-card { margin-bottom: 0; }
}

/* ── AI Chat Panel ─────────────────────────────────── */
#ai-panel { font-family: inherit; }
.ai-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
  word-break: break-word;
}
.ai-msg-user {
  align-self: flex-end;
  background: #7c3aed;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot {
  align-self: flex-start;
  background: var(--surf2, rgba(255,255,255,.06));
  color: var(--tx1);
  border: 1px solid var(--bdr);
  border-bottom-left-radius: 4px;
}

/* ── Navigation dropdown ─────────────────────────── */
.nav-sel {
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  color: var(--tx);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  min-width: 180px;
  max-width: 220px;
  flex-shrink: 0;
  transition: border-color .15s;
}
.nav-sel:focus {
  outline: none;
  border-color: var(--grn);
}
.nav-sel:hover {
  border-color: rgba(255,255,255,.2);
}
.nav-sel option, .nav-sel optgroup {
  background: #1e293b;
  color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════
   COURT KRAKEN — Brand Overrides & Hero Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar glow border ─────────────────────────────────────────── */
#topbar {
  border-bottom: 1px solid rgba(0,212,200,.2);
  background: linear-gradient(180deg, #0D1E35 0%, #07111F 100%);
}

/* ── Logo glow + AI tooltip hint ────────────────────────────────────────────────── */
#logo span { text-shadow: 0 0 16px rgba(0,212,200,.4); }
#logo::after {
  content: 'Open Kraken AI';
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,212,200,.92);
  color: #07111F;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 200;
}
#logo:hover::after { opacity: 1; }

/* ── Content area dark ocean feel ──────────────────────────────── */
#content, .mod { background: var(--bg); }

/* ── Landing nav ────────────────────────────────────────────────── */
.landing-nav {
  background: rgba(7,17,31,.96) !important;
  border-bottom: 1px solid rgba(0,212,200,.15) !important;
}
.landing-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--tx);
}
.landing-nav-logo em { color: var(--grn); font-style: normal; }

/* ── Hero section — deep ocean with teal radial glow ───────────── */
.landing-hero {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(0,212,200,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(0,69,120,.3) 0%, transparent 50%),
    linear-gradient(180deg, #07111F 0%, #0a1628 100%) !important;
  padding: 90px 20px 70px !important;
}
.landing-hero::before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300D4B8' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C%2Fg%3E%3C/svg%3E") !important;
}

/* ── Hero h1: RELEASE THE KRAKEN in Bebas Neue ─────────────────── */
.landing-hero h1 {
  font-family: 'Bebas Neue', 'Space Grotesk', sans-serif !important;
  font-size: 76px !important;
  font-weight: 400 !important; /* Bebas Neue is already bold */
  letter-spacing: .04em !important;
  line-height: 1.0 !important;
  color: var(--tx) !important;
}
.landing-hero h1 span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--grn) !important;
  text-shadow: 0 0 40px rgba(0,212,200,.5) !important;
  display: block;
  margin-top: 8px;
}
@media(max-width:640px) {
  .landing-hero h1 { font-size: 52px !important; }
  .landing-hero h1 span { font-size: 20px !important; }
}

/* ── Hero badge pill ────────────────────────────────────────────── */
.landing-hero-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── CTA buttons: coral → teal gradient ────────────────────────── */
.hero-cta {
  background: linear-gradient(135deg, #FF5733 0%, #FF7043 100%) !important;
  box-shadow: 0 4px 20px rgba(255,87,51,.35) !important;
  border-radius: 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  padding: 16px 36px !important;
  transition: all .2s !important;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,87,51,.5) !important;
}
.hero-cta-sec {
  background: transparent !important;
  border: 1px solid rgba(0,212,200,.4) !important;
  color: var(--grn) !important;
  border-radius: 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
}
.hero-cta-sec:hover {
  background: rgba(0,212,200,.08) !important;
}

/* ── Section headers ────────────────────────────────────────────── */
.landing-section-hd h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Feature cards ──────────────────────────────────────────────── */
.feature-card {
  background: linear-gradient(145deg, #0D1E35, #0a1628) !important;
  border: 1px solid rgba(0,212,200,.12) !important;
}
.feature-card:hover {
  border-color: rgba(0,212,200,.4) !important;
  box-shadow: 0 4px 24px rgba(0,212,200,.1) !important;
}
.feature-icon { font-size: 28px !important; }

/* ── Pricing card ────────────────────────────────────────────────── */
.price-card.featured {
  border-color: rgba(0,212,200,.5) !important;
  box-shadow: 0 0 40px rgba(0,212,200,.15) !important;
  background: linear-gradient(145deg, #0D1E35, #091525) !important;
}
.price-badge {
  background: var(--grn) !important;
  color: #07111F !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}
.price-amt { color: var(--grn) !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 64px !important; }
.price-name { font-family: 'Space Grotesk', sans-serif !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: .05em !important; text-transform: uppercase !important; }

/* ── Testimonial cards ──────────────────────────────────────────── */
.testimonial-card {
  background: linear-gradient(145deg, #0D1E35, #0a1628) !important;
  border: 1px solid rgba(0,212,200,.1) !important;
}
.testimonial-stars { color: var(--grn) !important; }

/* ── Headings in mtitle / module headers ────────────────────────── */
.mtitle { font-family: 'Space Grotesk', sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em; }

/* ── AI chat panel Kraken branding ──────────────────────────────── */
.ai-panel-hd, .ai-panel-hd * { font-family: 'Space Grotesk', sans-serif !important; }

/* ── Table header styling ───────────────────────────────────────── */
.tw table th {
  background: linear-gradient(180deg, #0D1E35, #091525) !important;
  color: var(--grn) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── Sub-banner trial ───────────────────────────────────────────── */
.sub-banner.trial { color: var(--grn) !important; font-family: 'Space Grotesk', sans-serif !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
.landing-footer { background: #030b14 !important; border-top: 1px solid rgba(0,212,200,.15) !important; }
.footer-copy { color: var(--tx3) !important; font-family: 'Space Grotesk', sans-serif !important; }

/* ── Scrollbar Kraken teal ──────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(0,212,200,.3) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,200,.5) !important; }

/* ── Input / select focus → teal ───────────────────────────────── */
.fi:focus, #gsearch:focus, .finp:focus, .fs:focus { border-color: var(--grn) !important; box-shadow: 0 0 0 2px rgba(0,212,200,.15) !important; }

/* ── Primary btn (green) now uses teal ─────────────────────────── */
.btn.p { background: var(--grn) !important; color: #07111F !important; font-weight: 800 !important; }
.btn.p:hover { background: var(--grn-d) !important; }

/* ── Nav dropdown kraken teal accent ───────────────────────────── */
.nav-sel:focus { border-color: var(--grn) !important; box-shadow: 0 0 0 2px rgba(0,212,200,.15) !important; }

/* ── Dashboard cards ────────────────────────────────────────────── */
.dsec { border: 1px solid rgba(0,212,200,.1) !important; background: linear-gradient(145deg,#0D1E35,#091525) !important; }
.dsec:hover { border-color: rgba(0,212,200,.35) !important; }
.dsh { color: var(--tx2) !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important; }

/* ── Proof bar ──────────────────────────────────────────────────── */
.landing-proof-bar { background: rgba(0,212,200,.06) !important; border-top: 1px solid rgba(0,212,200,.1) !important; border-bottom: 1px solid rgba(0,212,200,.1) !important; }

/* ═══════════════════════════════════════════════════════════════════
   NAV — download + cloud dual buttons
   ═══════════════════════════════════════════════════════════════════ */
.nav-dl-btn {
  background: linear-gradient(135deg, #FF5733 0%, #FF7043 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.nav-dl-btn:hover {
  background: linear-gradient(135deg, #e04e2d 0%, #e56038 100%) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — three-tier persona cards
   ═══════════════════════════════════════════════════════════════════ */
.hero-tiers {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 32px auto 28px;
  max-width: 860px;
}
.hero-tier {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  border-radius: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(0,212,200,.15);
  background: linear-gradient(145deg, #0D1E35, #091525);
  text-align: center;
  position: relative;
  transition: transform .2s, border-color .2s;
}
.hero-tier:hover { transform: translateY(-4px); }
.hero-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grn);
  color: #07111F;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.tier-squad { border-color: rgba(0,212,200,.4) !important; box-shadow: 0 0 24px rgba(0,212,200,.12); }
.tier-leviathan {
  border-color: rgba(79,195,247,.2) !important;
  background: linear-gradient(145deg, #071828, #04101e) !important;
  opacity: .85;
}
.hero-tier-icon { font-size: 32px; margin-bottom: 8px; }
.hero-tier-name { font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--tx); margin-bottom: 4px; }
.hero-tier-price { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--grn); line-height: 1; margin-bottom: 8px; }
.hero-tier-price span { font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--tx2); }
.hero-tier-desc { font-size: 11px; color: var(--tx2); line-height: 1.5; }
.lev-badge { background: linear-gradient(135deg, #004566, #0D2B45) !important; color: var(--blu) !important; border: 1px solid rgba(79,195,247,.3); }
.lev-name { color: var(--blu) !important; }
.lev-price { color: var(--blu) !important; opacity: .5; filter: blur(3px); }
.lev-icon { filter: grayscale(.4); }

/* Download CTA button style */
.hero-cta-dl {
  background: linear-gradient(135deg, #FF5733 0%, #FF7043 100%) !important;
  box-shadow: 0 4px 20px rgba(255,87,51,.35) !important;
  border-radius: 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  padding: 16px 32px !important;
  transition: all .2s !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.hero-cta-dl:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,87,51,.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LONE KRAKEN SECTION
   ═══════════════════════════════════════════════════════════════════ */
.lone-kraken-section {
  background: linear-gradient(180deg, #07111F 0%, #071828 50%, #07111F 100%) !important;
  padding: 80px 20px !important;
  position: relative;
  overflow: hidden;
}
.lk-glow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0,212,200,.06) 0%, transparent 70%);
  pointer-events: none;
}
.lk-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.lk-copy {
  flex: 1;
  min-width: 300px;
}
.lk-badge {
  display: inline-block;
  background: rgba(0,212,200,.12);
  border: 1px solid rgba(0,212,200,.3);
  color: var(--grn);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.lk-copy h2 {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--tx);
}
.lk-copy h2 em { color: var(--grn); font-style: normal; }
.lk-copy p { font-size: 15px; color: var(--tx2); line-height: 1.65; margin-bottom: 20px; }
.lk-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lk-checklist li {
  font-size: 14px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lk-checklist li::first-letter { color: var(--grn); font-weight: 900; }
.lk-upgrade-hint { font-size: 13px !important; color: var(--tx3) !important; }
.lk-upgrade-hint a { color: var(--grn); text-decoration: none; font-weight: 700; }
.lk-upgrade-hint a:hover { text-decoration: underline; }

.lk-downloads {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}
.lk-dl-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 14px;
}
.lk-dl-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px;
  background: linear-gradient(145deg, #0D1E35, #091525);
  border: 1px solid rgba(0,212,200,.15);
  border-radius: 14px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}
.lk-dl-tile:hover {
  border-color: rgba(0,212,200,.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,212,200,.1);
}
.lk-dl-os { font-size: 32px; line-height: 1; }
.lk-dl-platform { font-size: 16px; font-weight: 900; color: var(--tx); margin-top: 4px; }
.lk-dl-file { font-size: 10px; color: var(--tx3); font-family: monospace; }
.lk-dl-btn {
  margin-top: 10px;
  background: linear-gradient(135deg, #FF5733 0%, #FF7043 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 8px;
  letter-spacing: .02em;
  width: 100%;
  text-align: center;
}
.lk-dl-advanced {
  margin: 8px 0 16px;
  font-size: 11px;
  color: var(--tx3);
  text-align: center;
}
.lk-dl-advanced a { color: var(--grn); text-decoration: none; }
.lk-dl-advanced a:hover { text-decoration: underline; }
.lk-dl-install {
  background: rgba(0,212,200,.04);
  border: 1px solid rgba(0,212,200,.1);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lk-install-item { font-size: 12px; color: var(--tx2); line-height: 1.5; }
.lk-install-item strong { color: var(--tx); }
.lk-install-item code { background: rgba(0,212,200,.1); color: var(--grn); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.lk-dl-version {
  text-align: center;
  font-size: 10px;
  color: var(--tx3);
  letter-spacing: .08em;
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURES — tier badges
   ═══════════════════════════════════════════════════════════════════ */
.feature-tier-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 32px;
}
.ftl-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.ftl-free  { background: rgba(0,212,200,.1);  border: 1px solid rgba(0,212,200,.3); color: var(--grn); }
.ftl-squad { background: rgba(0,229,255,.1);  border: 1px solid rgba(0,229,255,.3); color: var(--cyn); }
.ftl-lev   { background: rgba(79,195,247,.1); border: 1px solid rgba(79,195,247,.3); color: var(--blu); }

.feature-card { position: relative; padding-top: 36px !important; }
.feature-card .feature-card-tier-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px !important;
  padding: 2px 8px !important;
  letter-spacing: .05em;
}
.feature-card-lev { border-color: rgba(79,195,247,.15) !important; opacity: .75; }
.feature-card-lev:hover { opacity: 1; border-color: rgba(79,195,247,.35) !important; }

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — dual tracks
   ═══════════════════════════════════════════════════════════════════ */
.how-it-works-dual {
  display: flex;
  gap: 0;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.hiw-track {
  flex: 1;
  min-width: 300px;
  padding: 28px;
  border-radius: 16px;
}
.hiw-track-free {
  background: rgba(0,212,200,.04);
  border: 1px solid rgba(0,212,200,.12);
}
.hiw-track-cloud {
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.1);
}
.hiw-track-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 20px;
  text-align: center;
}
.hiw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  font-size: 18px;
  font-weight: 900;
  color: var(--tx3);
  flex-shrink: 0;
  padding-top: 80px;
}
.step-num-free { background: linear-gradient(135deg, #FF5733, #FF7043) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PRICING — 3-card grid
   ═══════════════════════════════════════════════════════════════════ */
.pricing-grid-3 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.price-card-3 {
  flex: 1;
  min-width: 280px;
  max-width: 340px;
  border-radius: 18px;
  padding: 28px 24px;
  border: 1px solid rgba(0,212,200,.15);
  background: linear-gradient(145deg, #0D1E35, #091525);
  position: relative;
  transition: transform .2s;
}
.price-card-3.featured {
  border-color: rgba(0,212,200,.5) !important;
  box-shadow: 0 0 40px rgba(0,212,200,.15) !important;
  transform: translateY(-8px);
}
.price-card-3.featured:hover { transform: translateY(-12px); }
.price-card-3:not(.featured):hover { transform: translateY(-4px); }

.price3-icon { font-size: 36px; margin-bottom: 8px; }
.price3-name { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tx); margin-bottom: 8px; }
.price3-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.price3-amt { font-family: 'Bebas Neue', sans-serif; font-size: 56px; color: var(--grn); line-height: 1; }
.price3-per { font-size: 14px; color: var(--tx2); }
.price3-sub { font-size: 11px; color: var(--tx3); margin-bottom: 6px; }
.price3-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }

.price3-cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.price3-cta-free {
  background: rgba(255,87,51,.12);
  border: 1px solid rgba(255,87,51,.3);
  color: #FF7043;
}
.price3-cta-free:hover {
  background: rgba(255,87,51,.22);
  transform: translateY(-1px);
}
.price3-cta-squad {
  background: linear-gradient(135deg, #00D4B8 0%, #00a896 100%);
  color: #07111F;
  box-shadow: 0 4px 18px rgba(0,212,200,.3);
}
.price3-cta-squad:hover {
  box-shadow: 0 6px 26px rgba(0,212,200,.45);
  transform: translateY(-2px);
}

/* ── Lone Kraken pricing card ────────────────────────────── */
.price-card-lone { border-color: rgba(255,87,51,.2) !important; }
.price-card-lone .price3-amt { color: #FF7043 !important; }
.price-card-lone .price3-tag { color: #FF7043 !important; }

/* ═══════════════════════════════════════════════════════════════════
   LEVAITHAN CARD — lurking in the deep
   ═══════════════════════════════════════════════════════════════════ */
.price-card-lev {
  border-color: rgba(79,195,247,.2) !important;
  background: linear-gradient(145deg, #071828 0%, #040e1a 100%) !important;
  overflow: hidden;
  position: relative;
}
.lev-lurk-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lev-lurk-ripple {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(79,195,247,.12);
  animation: lev-ripple 4s ease-out infinite;
}
.lev-ripple-2 { animation-delay: 1.3s; }
.lev-ripple-3 { animation-delay: 2.6s; }
@keyframes lev-ripple {
  0%   { transform: translateX(-50%) scale(0.4); opacity: .6; }
  100% { transform: translateX(-50%) scale(2.8); opacity: 0; }
}
.lev-icon-pulse {
  animation: lev-pulse 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes lev-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(79,195,247,.3)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(79,195,247,.6)); }
}
.lev-name-glow {
  color: var(--blu) !important;
  text-shadow: 0 0 20px rgba(79,195,247,.4);
}
.lev-price-blur {
  color: var(--blu) !important;
  filter: blur(4px);
  opacity: .6;
  user-select: none;
}
.lev-sub {
  font-size: 12px !important;
  color: var(--blu) !important;
  opacity: .7;
  font-style: italic;
  letter-spacing: .03em;
}
.lev-coming-tag {
  color: var(--blu) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: lev-blink 2s ease-in-out infinite;
}
@keyframes lev-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.lev-features-blur li {
  color: var(--tx3) !important;
  filter: blur(1.5px);
  user-select: none;
  opacity: .7;
}
.lev-features-blur li:hover { filter: blur(0); opacity: 1; transition: all .4s; }
.lev-cta-lurk {
  margin-top: 16px;
  padding: 16px;
  background: rgba(79,195,247,.05);
  border: 1px solid rgba(79,195,247,.15);
  border-radius: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.lev-lurk-eye {
  font-size: 28px;
  animation: lev-eye 5s ease-in-out infinite;
  display: inline-block;
}
@keyframes lev-eye {
  0%, 90%, 100% { opacity: 1; transform: scale(1); }
  93%            { opacity: 0; transform: scale(.8); }
  96%            { opacity: 1; transform: scale(1); }
}
.lev-lurk-text {
  font-size: 12px;
  color: var(--blu);
  opacity: .8;
  margin-top: 8px;
  line-height: 1.6;
  font-style: italic;
}
.lev-lurk-text em { opacity: .6; font-size: 11px; display: block; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   FINAL DUAL-CTA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.landing-cta-dual {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}
.cta-dual-panel {
  flex: 1;
  min-width: 280px;
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-panel-free {
  background: linear-gradient(135deg, #0a1c2e 0%, #071525 100%);
  border-right: 1px solid rgba(0,212,200,.1);
}
.cta-panel-cloud {
  background: linear-gradient(135deg, rgba(0,212,200,.06) 0%, #07111F 100%);
}
.cta-dual-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  font-size: 14px;
  font-weight: 900;
  color: var(--tx3);
  background: var(--bg);
  border-left: 1px solid rgba(0,212,200,.08);
  border-right: 1px solid rgba(0,212,200,.08);
  flex-shrink: 0;
}
.cta-panel-icon { font-size: 40px; margin-bottom: 12px; }
.cta-dual-panel h3 { font-size: 20px; font-weight: 900; color: var(--tx); margin-bottom: 8px; }
.cta-dual-panel p { font-size: 14px; color: var(--tx2); max-width: 300px; line-height: 1.6; }

@media (max-width: 640px) {
  .hero-tiers { gap: 10px; }
  .hero-tier { min-width: 100%; max-width: 100%; }
  .lk-inner { gap: 32px; }
  .how-it-works-dual { flex-direction: column; }
  .how-it-works-triple { flex-direction: column; }
  .hiw-divider { width: 100%; height: 40px; padding-top: 0; }
  .pricing-grid-3 { flex-direction: column; align-items: center; }
  .pricing-grid-2 { flex-direction: column; align-items: center; }
  .price-card-3 { max-width: 100%; width: 100%; transform: none !important; }
  .landing-cta-dual { flex-direction: column; }
  .landing-cta-triple { flex-direction: column !important; }
  .cta-dual-divider { width: 100%; height: 40px; }
  .cta-panel-free { border-right: none; border-bottom: 1px solid rgba(0,212,200,.1); }
  .hero-tiers-5 { gap: 12px; }
  .hero-tiers-top, .hero-tiers-bottom { flex-direction: column; align-items: center; }
  .hero-tier { min-width: 100% !important; max-width: 100% !important; }
  .try-live-grid { flex-direction: column; }
  .try-live-card { min-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   5-CARD HERO TIER GRID
   ═══════════════════════════════════════════════════════════════════ */
.hero-tiers-5 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px auto 28px;
  max-width: 1060px;
  width: 100%;
}
.hero-tiers-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-tiers-top .hero-tier {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.hero-tiers-bottom .hero-tier {
  flex: 1;
  min-width: 220px;
  max-width: 440px;
}
.hero-tier-featured {
  border-color: rgba(0,212,200,.5) !important;
  box-shadow: 0 0 30px rgba(0,212,200,.15) !important;
  transform: translateY(-6px);
}
.hero-tier-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
/* Kraken Free tier card */
.tier-kraken-free {
  border-color: rgba(16,185,129,.4) !important;
  background: linear-gradient(145deg, #071e15, #04140e) !important;
}
.kf-badge {
  background: linear-gradient(135deg, rgba(16,185,129,.3), rgba(16,185,129,.15)) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16,185,129,.4) !important;
}
.tier-cta-kf {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 3px 14px rgba(16,185,129,.35);
}
.tier-cta-kf:hover { box-shadow: 0 5px 20px rgba(16,185,129,.5); transform: translateY(-1px); }
/* Lone Kraken tile */
.tier-lone {
  border-color: rgba(255,87,51,.25) !important;
  background: linear-gradient(145deg, #1e0d05, #130803) !important;
}
.tier-cta-dl {
  background: linear-gradient(135deg, #FF5733, #FF7043);
  color: #fff;
  box-shadow: 0 3px 14px rgba(255,87,51,.35);
}
.tier-cta-dl:hover { box-shadow: 0 5px 20px rgba(255,87,51,.5); transform: translateY(-1px); }
/* Demo tile */
.tier-demo {
  border-color: rgba(167,139,250,.3) !important;
  background: linear-gradient(145deg, #130d24, #0c0818) !important;
}
.demo-badge {
  background: linear-gradient(135deg, rgba(167,139,250,.25), rgba(167,139,250,.1)) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(167,139,250,.35) !important;
}
.tier-cta-demo {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  box-shadow: 0 3px 14px rgba(124,58,237,.4);
}
.tier-cta-demo:hover { box-shadow: 0 5px 20px rgba(124,58,237,.55); transform: translateY(-1px); }
.tier-cta-squad {
  background: linear-gradient(135deg, #00D4B8, #00a896);
  color: #07111F;
  box-shadow: 0 3px 14px rgba(0,212,200,.35);
}
.tier-cta-squad:hover { box-shadow: 0 5px 20px rgba(0,212,200,.5); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════
   NAV BUTTON — teal variant (Kraken Free)
   ═══════════════════════════════════════════════════════════════════ */
.tbtn.teal {
  background: rgba(16,185,129,.15) !important;
  border-color: rgba(16,185,129,.4) !important;
  color: #34d399 !important;
}
.tbtn.teal:hover {
  background: rgba(16,185,129,.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — triple CTA buttons
   ═══════════════════════════════════════════════════════════════════ */
.hero-cta-free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(16,185,129,.35);
}
.hero-cta-free:hover {
  box-shadow: 0 8px 28px rgba(16,185,129,.5);
  transform: translateY(-2px);
}
.hero-cta-demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.hero-cta-demo:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,.55);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   TRY LIVE / SEE IT LIVE SECTION
   ═══════════════════════════════════════════════════════════════════ */
.try-live-section {
  background: linear-gradient(180deg, #07111F 0%, #071520 50%, #07111F 100%) !important;
}
.try-live-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto 40px;
}
.try-live-card {
  flex: 1;
  min-width: 280px;
  max-width: 340px;
  border-radius: 18px;
  padding: 28px 24px;
  border: 1px solid rgba(0,212,200,.12);
  background: linear-gradient(145deg, #0D1E35, #091525);
  position: relative;
  overflow: hidden;
  transition: transform .2s;
}
.try-live-card:hover { transform: translateY(-5px); }
.tlc-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
}
.tlc-glow-demo { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.tlc-glow-free { background: linear-gradient(90deg, #10b981, #34d399); }
.tlc-glow-squad { background: linear-gradient(90deg, #00D4B8, #00a896); }
.try-live-demo { border-color: rgba(167,139,250,.25) !important; }
.try-live-free { border-color: rgba(16,185,129,.3) !important; box-shadow: 0 0 32px rgba(16,185,129,.1); }
.try-live-squad { border-color: rgba(0,212,200,.35) !important; }
.tlc-icon { font-size: 38px; margin-bottom: 8px; }
.tlc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.tlc-badge-demo { background: rgba(167,139,250,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.3); }
.tlc-badge-free { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.tlc-badge-squad { background: rgba(0,212,200,.12); color: var(--grn); border: 1px solid rgba(0,212,200,.3); }
.try-live-card h3 { font-size: 18px; font-weight: 900; color: var(--tx); margin-bottom: 10px; }
.try-live-card p { font-size: 12px; color: var(--tx2); line-height: 1.6; margin-bottom: 14px; }
.tlc-list { list-style: none; padding: 0; margin: 0 0 18px; }
.tlc-list li { font-size: 12px; color: var(--tx2); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.tlc-list li:last-child { border-bottom: none; }
.tlc-ai-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.tlc-ai-icon { font-size: 22px; flex-shrink: 0; }
.tlc-cta {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.tlc-cta-demo { background: linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; box-shadow: 0 4px 16px rgba(124,58,237,.4); }
.tlc-cta-demo:hover { box-shadow: 0 6px 22px rgba(124,58,237,.55); transform: translateY(-2px); }
.tlc-cta-free { background: linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow: 0 4px 16px rgba(16,185,129,.35); }
.tlc-cta-free:hover { box-shadow: 0 6px 22px rgba(16,185,129,.5); transform: translateY(-2px); }
.tlc-cta-squad { background: linear-gradient(135deg,#00D4B8,#00a896); color:#07111F; box-shadow: 0 4px 16px rgba(0,212,200,.35); }
.tlc-cta-squad:hover { box-shadow: 0 6px 22px rgba(0,212,200,.5); transform: translateY(-2px); }
.tlc-note { font-size: 10px; color: var(--tx3); text-align: center; margin-top: 8px; }

/* AI hype strip */
.ai-hype-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(0,212,200,.06) 100%);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 16px;
  padding: 20px 28px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.ai-hype-icon { font-size: 36px; flex-shrink: 0; }
.ai-hype-text { flex: 1; min-width: 220px; font-size: 13px; color: var(--tx2); line-height: 1.6; }
.ai-hype-text strong { color: var(--grn); }
.ai-hype-cta {
  flex-shrink: 0;
  padding: 12px 22px;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.ai-hype-cta:hover { box-shadow: 0 4px 16px rgba(16,185,129,.5); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — triple track
   ═══════════════════════════════════════════════════════════════════ */
.how-it-works-triple {
  display: flex;
  gap: 0;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.hiw-track-demo {
  border-left: 2px solid rgba(167,139,250,.3) !important;
  background: linear-gradient(135deg, rgba(167,139,250,.04) 0%, transparent 100%) !important;
}
.step-num-demo { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PRICING — bottom 2-card grid (Lone Kraken + Demo)
   ═══════════════════════════════════════════════════════════════════ */
.pricing-grid-2 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-grid-2 .price-card-3 {
  max-width: 480px;
}
/* Kraken Free pricing card */
.price-card-kfree {
  border-color: rgba(16,185,129,.35) !important;
  background: linear-gradient(145deg, #071e15, #04140e) !important;
  box-shadow: 0 0 30px rgba(16,185,129,.08);
}
.price-card-kfree .price3-amt { color: #34d399 !important; }
.price3-cta-kfree {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 18px rgba(16,185,129,.35);
}
.price3-cta-kfree:hover {
  box-shadow: 0 6px 26px rgba(16,185,129,.5);
  transform: translateY(-2px);
}
/* Demo pricing card */
.price-card-demo {
  border-color: rgba(167,139,250,.25) !important;
  background: linear-gradient(145deg, #130d24, #0c0818) !important;
}
.price-card-demo .price3-amt { color: #a78bfa !important; }
.price3-cta-demo {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  box-shadow: 0 4px 18px rgba(124,58,237,.4);
}
.price3-cta-demo:hover {
  box-shadow: 0 6px 26px rgba(124,58,237,.55);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL TRIPLE-CTA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.landing-cta-triple {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}
.cta-panel-demo {
  background: linear-gradient(135deg, rgba(124,58,237,.08) 0%, #07111F 100%);
  border-right: 1px solid rgba(167,139,250,.12);
  flex: 1;
  min-width: 260px;
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-panel-kfree {
  background: linear-gradient(135deg, rgba(16,185,129,.07) 0%, #07111F 100%);
  border-right: 1px solid rgba(16,185,129,.1);
  flex: 1;
  min-width: 260px;
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}