/* ===========================================================
   Home screen theme — loaded only by index.html.

   A landing-page layer on top of the shared design system: centred
   spotlight hero, glow behind the fold, gradient display type, tonal
   cards and alternating showcase rows. Everything here is scoped to
   body.home so no tool page is affected.

   Identity stays violet + teal (the site's own), with amber as the
   third tone — the layout language is the borrowed part, not the palette.
=========================================================== */

body.home{
  --h-glow:rgba(109,74,255,.22);
  --h-glow-2:rgba(0,179,164,.16);
  --h-ring:rgba(109,74,255,.22);
  --h-card:var(--panel);
  --h-ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] body.home{
  --h-glow:rgba(157,134,255,.20);
  --h-glow-2:rgba(46,224,198,.12);
  --h-ring:rgba(157,134,255,.28);
}

body.home h1, body.home h2, body.home h3, body.home .hx-num{
  font-family:'Outfit','Inter',system-ui,sans-serif;
}
body.home .grad{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

@keyframes hx-up{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }
@keyframes hx-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@media (prefers-reduced-motion:reduce){
  body.home *{animation:none !important;transition:none !important;}
}

/* ---------------- hero ---------------- */
.hx-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:84px 0 56px;
}
.hx-hero::before{
  content:'';position:absolute;top:-420px;left:50%;transform:translateX(-50%);
  width:1100px;height:1000px;max-width:190vw;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--h-glow) 0%,transparent 62%);
}
.hx-hero::after{
  content:'';position:absolute;top:120px;right:-160px;width:520px;height:520px;
  pointer-events:none;
  background:radial-gradient(circle,var(--h-glow-2) 0%,transparent 68%);
}
.hx-hero > *{position:relative;z-index:1;}

.hx-mark{
  width:84px;height:84px;border-radius:24px;margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--ink));
  box-shadow:0 0 70px rgba(109,74,255,.30), 0 0 0 1px var(--h-ring);
  animation:hx-float 6s ease-in-out infinite;
}
html[data-theme="dark"] .hx-mark{background:linear-gradient(135deg,var(--brand),#3a2a7d);}

.hx-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:7px 15px;border-radius:999px;
  border:1px solid var(--h-ring);background:var(--brand-tint);color:var(--brand);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  animation:hx-up .8s var(--h-ease) both;
}
.hx-hero h1{
  font-size:clamp(38px,6.4vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  margin:0 0 20px;animation:hx-up .8s var(--h-ease) .05s both;
}
.hx-sub{
  font-size:clamp(16px,2.2vw,19.5px);color:var(--text-dim);line-height:1.65;
  max-width:660px;margin:0 auto 34px;
  animation:hx-up .8s var(--h-ease) .12s both;
}
.hx-actions{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  animation:hx-up .8s var(--h-ease) .2s both;
}
.hx-actions .btn-primary{
  padding:14px 30px;font-size:15.5px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 4px 24px rgba(109,74,255,.32);
}
.hx-actions .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(109,74,255,.42);}
/* dark mode's --brand is a light violet; keep the fill dark enough for white label text */
html[data-theme="dark"] .hx-actions .btn-primary{background:linear-gradient(135deg,#6d4aff,#8e74ff);}
html[data-theme="dark"] .hx-actions .btn-primary:hover{background:linear-gradient(135deg,#7d5cff,#9d86ff);}
.hx-actions .btn-secondary{padding:14px 30px;font-size:15.5px;border-radius:14px;background:var(--panel-2);}
.hx-actions .btn-secondary:hover{transform:translateY(-3px);}

/* keyboard hint card, in the slot a download command would sit in */
.hx-hint{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  max-width:min(100%,520px);margin:26px auto 0;
  padding:12px 12px 12px 18px;border-radius:14px;text-align:left;
  border:1px solid var(--h-ring);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:0 18px 48px -26px rgba(30,20,70,.45), inset 0 1px 0 rgba(255,255,255,.05);
  animation:hx-up .8s var(--h-ease) .28s both;
}
.hx-hint code{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-dim);
}
.hx-hint code b{color:var(--brand);font-weight:700;}
.hx-hint .hx-hint-keys{display:flex;gap:5px;flex-shrink:0;}

.hx-trust{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  animation:hx-up .8s var(--h-ease) .34s both;
}
.hx-trust span{
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);border-radius:999px;padding:6px 14px;background:var(--panel);
}
.hx-trust span::before{content:'✓';color:var(--accent);font-weight:700;margin-right:6px;}

/* ---------------- stats ---------------- */
.hx-stats{padding:8px 0 56px;}
.hx-stats-grid{display:flex;justify-content:center;gap:clamp(30px,7vw,72px);flex-wrap:wrap;text-align:center;}
.hx-num{
  font-size:clamp(30px,4.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.hx-stat-label{font-size:13.5px;color:var(--text-faint);margin-top:6px;font-weight:500;}

/* ---------------- the peek (hero visual, full width) ---------------- */
.hx-peek{padding:0 0 84px;}
.hx-peek-box{
  position:relative;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 40px 90px -40px rgba(30,20,70,.55);
  transform:perspective(1400px) rotateX(3deg) scale(.985);
  transition:transform .6s var(--h-ease);
}
.hx-peek-box:hover{transform:perspective(1400px) rotateX(0) scale(1);}
html[data-theme="dark"] .hx-peek-box{box-shadow:0 40px 90px -40px rgba(0,0,0,.85);}
.hx-peek-bar{
  display:flex;align-items:center;gap:7px;padding:13px 18px;
  border-bottom:1px solid var(--border);background:var(--panel-2);
}
.hx-peek-bar i{width:11px;height:11px;border-radius:50%;background:var(--border-strong);}
.hx-peek-bar i:nth-child(1){background:#ff6b5b;}
.hx-peek-bar i:nth-child(2){background:#ffc44d;}
.hx-peek-bar i:nth-child(3){background:#3ed6ab;}
.hx-peek-bar em{
  margin-left:auto;font-style:normal;font-size:11.5px;color:var(--text-faint);
  font-family:'JetBrains Mono',monospace;
}
.hx-peek-panes{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:820px){ .hx-peek-panes{grid-template-columns:1fr auto 1fr;align-items:center;} }
.hx-peek-panes pre{
  margin:0;padding:26px 28px;overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;color:var(--text-dim);
}
.hx-peek-panes pre + .hx-peek-sep + pre{border-top:1px solid var(--border);}
@media(min-width:820px){ .hx-peek-panes pre + .hx-peek-sep + pre{border-top:0;border-left:1px solid var(--border);} }
.hx-peek-sep{
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);font-size:18px;padding:0 6px 10px;
}
@media(min-width:820px){ .hx-peek-sep{padding:0 14px;} }
.hx-peek-sep::after{content:'↓';}
@media(min-width:820px){ .hx-peek-sep::after{content:'→';} }

/* ---------------- sections ---------------- */
body.home .section{padding:84px 0;}
body.home .section.band{background:var(--panel-2);}
.hx-head{text-align:center;max-width:760px;margin:0 auto 52px;}
.hx-head .kicker{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-tint);border:1px solid var(--h-ring);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.hx-head h2{font-size:clamp(27px,4vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.18;margin:0 0 14px;}
.hx-head p{color:var(--text-dim);font-size:16.5px;line-height:1.7;margin:0;}

/* ---------------- tool cards ---------------- */
body.home .group-head{
  margin:44px 0 20px;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:4px;
}
body.home .group-head h3{font-size:19px;}
body.home .group-head p{font-size:14px;}

body.home .card-grid{gap:16px;}
body.home .tool-card{
  --tone:var(--brand);--tone-soft:rgba(109,74,255,.09);
  position:relative;overflow:hidden;z-index:1;
  border-radius:20px;padding:26px;background:var(--h-card);
  box-shadow:0 4px 20px -12px rgba(30,20,70,.35);
  transition:transform .4s var(--h-ease), border-color .4s var(--h-ease), box-shadow .4s var(--h-ease);
}
body.home .tool-card::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(135deg,var(--tone-soft) 0%,transparent 100%);
}
body.home .tool-card::after{
  content:'';position:absolute;right:-24px;top:-24px;width:130px;height:130px;border-radius:50%;
  background:var(--tone);filter:blur(60px);opacity:.10;pointer-events:none;z-index:-1;
  transition:opacity .4s ease;
}
body.home .tool-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--tone) 45%,var(--border));
  box-shadow:0 22px 44px -24px rgba(30,20,70,.5);
}
body.home .tool-card:hover::before{opacity:1;}
body.home .tool-card:hover::after{opacity:.22;}
body.home .tool-card .icon{
  width:44px;height:44px;border-radius:13px;
  background:var(--tone-soft);color:var(--tone);
  border:1px solid color-mix(in srgb,var(--tone) 25%,transparent);
}
body.home .tool-card h3{font-size:17px;font-weight:700;}
body.home .tool-card .link-row{color:var(--tone);}

body.home .tool-card.t-teal  {--tone:var(--accent);--tone-soft:rgba(0,179,164,.10);}
body.home .tool-card.t-amber {--tone:var(--amber); --tone-soft:rgba(255,159,28,.12);}
body.home .tool-card.t-pink  {--tone:#e0407f;      --tone-soft:rgba(224,64,127,.10);}
body.home .tool-card.t-blue  {--tone:#3b82f6;      --tone-soft:rgba(59,130,246,.10);}
html[data-theme="dark"] body.home .tool-card.t-pink{--tone:#ff7aa8;}
html[data-theme="dark"] body.home .tool-card.t-blue{--tone:#7cb0ff;}

/* ---------------- showcase rows ---------------- */
body.home .split{gap:48px;align-items:center;}
@media(min-width:900px){
  body.home .split{grid-template-columns:1fr 1fr;gap:64px;}
  body.home .split.flip > *:first-child{order:2;}
}
body.home .split h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;}
body.home .split .kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
body.home .check-list li{font-size:14.5px;}
body.home .check-list li::before{background:var(--accent-tint);color:var(--accent);}
body.home .present-preview{border-radius:20px;}

/* ---------------- comparison ---------------- */
.hx-compare{
  max-width:880px;margin:0 auto;background:var(--panel);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 20px 50px -34px rgba(30,20,70,.5);
}
.hx-compare table{width:100%;border-collapse:collapse;}
.hx-compare th,.hx-compare td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--border);font-size:14.5px;}
.hx-compare tbody tr:last-child td{border-bottom:0;}
.hx-compare th{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-faint);background:var(--panel-2);
}
.hx-compare thead th:last-child{color:var(--brand);}
.hx-compare td:first-child{font-weight:600;color:var(--text);}
.hx-compare td{color:var(--text-dim);}
.hx-compare .col-us{background:var(--brand-tint);}
.hx-compare .yes{color:var(--accent);font-weight:700;}
.hx-compare .no{color:var(--text-faint);}
.hx-compare tbody tr:hover td{background:var(--panel-2);}
.hx-compare tbody tr:hover td.col-us{background:var(--brand-tint);}
.hx-scroll{overflow-x:auto;}

/* ---------------- workflow ---------------- */
.hx-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;position:relative;}
@media(min-width:900px){ .hx-flow{grid-template-columns:repeat(4,1fr);} }
@media(min-width:900px){
  .hx-flow::before{
    content:'';position:absolute;top:31px;left:12%;right:12%;height:2px;
    background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent);
  }
}
.hx-step{text-align:center;position:relative;}
.hx-step .n{
  width:62px;height:62px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;
  background:var(--panel);border:2px solid var(--border);color:var(--text-dim);
  position:relative;z-index:1;transition:all .3s var(--h-ease);
}
.hx-step:nth-child(1) .n{background:var(--brand-tint);border-color:var(--h-ring);color:var(--brand);}
.hx-step:nth-child(2) .n{background:rgba(255,159,28,.12);border-color:rgba(255,159,28,.32);color:var(--amber);}
.hx-step:nth-child(3) .n{background:var(--accent-tint);border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent);}
.hx-step:nth-child(4) .n{background:var(--brand-tint);border-color:var(--h-ring);color:var(--brand);}
.hx-step:hover .n{transform:translateY(-4px);box-shadow:0 0 26px var(--h-glow);}
.hx-step h4{margin:0 0 6px;font-size:15.5px;font-weight:700;}
.hx-step p{margin:0;font-size:13.5px;color:var(--text-dim);line-height:1.6;}

/* ---------------- feature grid ---------------- */
body.home .feature{border-radius:18px;padding:26px;transition:all .35s var(--h-ease);}
body.home .feature:hover{transform:translateY(-4px);border-color:var(--h-ring);box-shadow:0 18px 38px -24px rgba(30,20,70,.5);}
body.home .feature .f-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);border:1px solid var(--h-ring);font-size:19px;margin-bottom:14px;
}
body.home .feature h4{font-size:16px;font-weight:700;}

/* ---------------- FAQ ---------------- */
body.home .faq details{border-radius:16px;background:var(--panel);}
body.home .faq summary{padding:18px 22px;font-size:15px;}

/* ---------------- closing band ---------------- */
body.home .cta-band{
  position:relative;overflow:hidden;padding:88px 0;
  background:linear-gradient(135deg,var(--ink),var(--brand-dark));
}
body.home .cta-band::before{
  content:'';position:absolute;inset:auto 0 -60% 0;height:420px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,rgba(46,224,198,.28) 0%,transparent 62%);
}
body.home .cta-band > *{position:relative;z-index:1;}
body.home .cta-band h2{font-size:clamp(28px,4.4vw,44px);}
body.home .cta-band p{font-size:16.5px;}