/* HT-Beats production styles — DERIVED from htbeats-site/index.html
   by wordpress/build.py. Do not edit here; edit the source page and
   re-run the build. WP-structure tweaks live in wp.css. */

/* ═══ Design tokens (scoped) ══════════════════════════════════════════════ */
.htb{
  /* charcoal grounds — matched to the app tile (#262A32 → #121419) */
  --bg:#0B0D12; --bg2:#0E1117; --surface:#141922; --elevated:#1A2029; --tile:#20252E;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12); --line3:rgba(255,255,255,.20);
  --text:#F5F7FA; --text2:#A7B0BF; --muted:#6B7688;
  --accent:#3B9EFF; --accent2:#1E6EFF; --accent-ink:#04223f;
  /* the set-list slot colors — the app's signature palette */
  --c-yellow:#FEC433; --c-red:#F03842; --c-orange:#EE6C29; --c-green:#4F9E63;
  --c-blue:#3B9EFF; --c-indigo:#2766D0; --c-teal:#3E9FB0;
  --ok:#4FD69D; --warn:#FFCA68; --err:#FF667D;
  --glass:rgba(14,17,23,.66);
  --r:16px; --r-sm:11px; --r-lg:24px; --maxw:1180px;
  /* Apple system font: real SF Pro Display/Text on Apple devices; Inter is the
     high-quality cross-platform fallback (Windows/Android/older browsers). */
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  color:var(--text); background:var(--bg); font-family:var(--sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative; overflow-x:hidden;
}
.htb.htb-light{
  --bg:#F4F6FB; --bg2:#ECEFF5; --surface:#FFFFFF; --elevated:#FBFCFE; --tile:#EEF1F7;
  --line:rgba(12,22,42,.09); --line2:rgba(12,22,42,.15); --line3:rgba(12,22,42,.24);
  --text:#0C1220; --text2:#48566E; --muted:#7A889C; --glass:rgba(255,255,255,.72);
  --accent:#1E6EFF; --accent2:#1257e0; --accent-ink:#ffffff;
}
@media (prefers-color-scheme:light){ .htb:not(.htb-dark){
  --bg:#F4F6FB; --bg2:#ECEFF5; --surface:#FFFFFF; --elevated:#FBFCFE; --tile:#EEF1F7;
  --line:rgba(12,22,42,.09); --line2:rgba(12,22,42,.15); --line3:rgba(12,22,42,.24);
  --text:#0C1220; --text2:#48566E; --muted:#7A889C; --glass:rgba(255,255,255,.72);
  --accent:#1E6EFF; --accent2:#1257e0; --accent-ink:#ffffff;
} }
.htb *,.htb *::before,.htb *::after{ box-sizing:border-box; }
/* Form controls do not inherit the page font — the UA supplies its own, and
   that default has no Arabic-script coverage. It showed up as the workflow
   steps rendering their HEADING in Parastoo (which sets a font-family) and
   their BODY in whatever the browser gives a <button> (which does not). One
   rule rather than a font-family on every control as it is noticed. */
.htb button,.htb input,.htb select,.htb textarea{ font-family:inherit; }
.htb img,.htb svg{ max-width:100%; display:block; }
.htb a{ color:inherit; text-decoration:none; }
.htb h1,.htb h2,.htb h3,.htb h4{ font-family:var(--disp); font-weight:700; letter-spacing:-.026em; line-height:1.05; text-wrap:balance; margin:0; }
.htb p{ margin:0; color:var(--text2); }
.htb :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.htb ::selection{ background:rgba(59,158,255,.30); color:#fff; }

/* ═══ Layout helpers ══════════════════════════════════════════════════════ */
.htb-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }
/* Was clamp(72px,11vw,140px) top AND bottom, so adjacent sections could sit
   280px apart on a wide screen and the page read as disconnected fragments. */
.htb-section{ position:relative; padding:clamp(52px,6.5vw,96px) 0; }
.htb-content{ position:relative; z-index:1; }
.htb-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:9px; }
.htb-eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:.55; }
.htb-h2{ font-size:clamp(30px,4.6vw,52px); margin-top:16px; }
.htb-lead{ font-size:clamp(16px,1.7vw,19px); color:var(--text2); max-width:60ch; margin-top:18px; }
.htb-center{ text-align:center; } .htb-center .htb-eyebrow{ justify-content:center; }
.htb-center .htb-lead{ margin-left:auto; margin-right:auto; }

/* ═══ Ambient background ══════════════════════════════════════════════════ */
.htb-atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.htb-atmos .grid{ position:absolute; inset:-2px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(130% 90% at 50% -8%,#000 30%,transparent 76%); opacity:.55; }
.htb-atmos .glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.htb-atmos .g1{ width:640px; height:520px; top:-180px; right:-90px; background:radial-gradient(closest-side,rgba(59,158,255,.40),transparent); animation:htb-drift 24s ease-in-out infinite; }
.htb-atmos .g2{ width:520px; height:460px; top:280px; left:-160px; background:radial-gradient(closest-side,rgba(38,102,208,.30),transparent); animation:htb-drift 30s ease-in-out infinite reverse; }
@keyframes htb-drift{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(30px,34px,0);} }

/* ═══ Buttons ═════════════════════════════════════════════════════════════ */
.htb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans);
  font-weight:600; font-size:15px; padding:13px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.htb-btn:hover{ transform:translateY(-1px); } .htb-btn:active{ transform:translateY(0); }
.htb-btn-primary{ background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; font-weight:700; box-shadow:0 10px 30px rgba(59,158,255,.34); }
.htb-btn-primary:hover{ filter:brightness(1.07); box-shadow:0 14px 38px rgba(59,158,255,.42); }
.htb-btn-ghost{ background:rgba(255,255,255,.05); border-color:var(--line2); color:var(--text); }
.htb-light .htb-btn-ghost{ background:rgba(12,22,42,.04); }
.htb-btn-ghost:hover{ background:rgba(255,255,255,.10); border-color:var(--line3); }
.htb-light .htb-btn-ghost:hover{ background:rgba(12,22,42,.07); }
.htb-btn-lg{ padding:16px 28px; font-size:16px; }
.htb-btn-link{ background:none; color:var(--text2); padding:12px 4px; font-weight:600; }
.htb-btn-link:hover{ color:var(--text); }
.htb-btn .arw{ transition:transform .16s ease; } .htb-btn:hover .arw{ transform:translateX(3px); }

/* ═══ The set-list grid brand motif (matches the app icon) ═════════════════ */
.htb-glyph{ display:grid; grid-template-columns:repeat(4,1fr); gap:9%; aspect-ratio:1/1;
  background:linear-gradient(160deg,#262A32,#121419); border:1px solid var(--line2);
  border-radius:22.32%; padding:12%; box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.htb-glyph i{ display:block; border-radius:18%; aspect-ratio:1.5/1; align-self:center;
  transform:scale(0); animation:htb-cellpop .5s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes htb-cellpop{ to{ transform:scale(1); } }
/* small logo mark in the nav (static) */
/* The brand never gets squashed. As a flex item it would otherwise absorb all
   the shrinkage when the nav runs out of room, and the wordmark — an image
   with a fixed ratio, unlike the text it replaced — overflows its parent
   instead of compressing, straight over the top of the nav links. */
.htb-mark{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.htb-mark .m{ display:block; width:34px; height:34px; flex:none; }
.htb-mark .m .htb-glyph{ width:100%; height:100%; }
.htb-mark .m .htb-glyph{ padding:11%; gap:8%; border-radius:24%; box-shadow:none; }
.htb-mark .m .htb-glyph i{ animation:none; transform:scale(1); }
.htb-mark .t{ display:flex; flex-direction:column; line-height:1.05; }
.htb-mark .t b{ font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.02em; }
.htb-mark .t b em{ color:var(--accent); font-style:normal; }
.htb-mark .t span{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:var(--mono); }

/* ── Brand wordmark ──────────────────────────────────────────────────────
   The artwork arrived as 1254x1254 squares with the lettering in a band
   across the middle; sizing that square to 40px drew the wordmark about six
   pixels tall. tools/prepare-wordmark.py crops them and keys the flat ground
   to transparency, so the box laid out here IS the lettering (~4.99:1).
   No hard-coded aspect-ratio — the file's own ratio governs, with object-fit
   as the backstop so a mismatched file letterboxes instead of stretching. */
/* position:relative belongs to .htb-wordmark itself, NOT to the nav lockup.
   The --light image is absolutely positioned, so every consumer of this class
   has to be its own containing block. While this was scoped to `.htb-mark`,
   the front page's product card (.htb-product__mark.htb-wordmark) had no
   containing block: the light image escaped the card, took its height from an
   ancestor instead of the 100% it expects, and covered the product. Invisible
   in dark mode only because that image sits at opacity 0 there. */
.htb-wordmark{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
.htb-mark .htb-wordmark{ height:46px; }
.htb-wordmark__img{ height:100%; width:auto; object-fit:contain; display:block; }
.htb-wordmark__img--light{ position:absolute; inset-inline-start:0; top:0; }
/* Dark ground is the default: the -dark file carries white lettering. */
.htb-wordmark__img--light{ opacity:0; }
.htb-wordmark__img--dark{ opacity:1; }
.htb-light .htb-wordmark__img--light{ opacity:1; }
.htb-light .htb-wordmark__img--dark{ opacity:0; }
@media (max-width:1180px){ .htb-mark .htb-wordmark{ height:40px; } }
@media (max-width:600px){ .htb-mark .htb-wordmark{ height:34px; } }
@media (max-width:380px){ .htb-mark .htb-wordmark{ height:30px; } }

/* ── Document ground and native controls ─────────────────────────────────
   The theme class sits on a div inside <body>, so body never learns about
   light mode and shows a dark band on overscroll; :has() lets the parent
   follow the child. color-scheme covers everything the BROWSER draws rather
   than we do — scrollbars, the open list of a <select>, autofill, the caret —
   which otherwise render in light OS chrome on the dark page. The document
   scrollbar reads the ROOT's value, hence the rule on html as well. */
html{ color-scheme:dark; }
html:has(.htb-light){ color-scheme:light; }
body:has(.htb-light){ background:#F4F6FB; }
.htb{ color-scheme:dark; }
.htb-light{ color-scheme:light; }

/* ═══ Announcement + Nav ══════════════════════════════════════════════════ */
.htb-anno{ position:relative; z-index:40; background:linear-gradient(90deg,rgba(59,158,255,.16),rgba(38,102,208,.16));
  border-bottom:1px solid var(--line); font-size:13.5px; }
.htb-anno .in{ max-width:var(--maxw); margin:0 auto; padding:9px 26px; display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; }
.htb-anno .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line2); border-radius:20px; padding:2px 9px; }
.htb-anno b{ color:var(--text); } .htb-anno a{ color:var(--accent); font-weight:600; }
.htb-anno .x{ position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; }
.htb-anno[hidden]{ display:none; }

.htb-nav{ position:sticky; top:0; z-index:38; transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease; border-bottom:1px solid transparent; }
.htb-nav.scrolled{ background:var(--glass); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line); }
.htb-nav .in{ max-width:var(--maxw); margin:0 auto; padding:14px 26px; display:flex; align-items:center; gap:22px; }
.htb-nav .links{ display:flex; gap:6px; margin-left:14px; min-width:0; }
.htb-nav .links a{ padding:9px 13px; border-radius:9px; font-weight:500; font-size:14.5px; color:var(--text2); transition:color .15s,background .15s; }
.htb-nav .links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.htb-light .htb-nav .links a:hover{ background:rgba(12,22,42,.05); }
.htb-nav .sp{ flex:1; }
.htb-icon-btn{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line2);
  background:rgba(255,255,255,.04); color:var(--text2); cursor:pointer; transition:.15s; }
.htb-icon-btn:hover{ color:var(--text); border-color:var(--line3); }
.htb-burger{ display:none; }
/* Raised from 900px. The wordmark is ~230px where the typeset name was ~120,
   so the full nav no longer fits between 900 and ~1150 — show the burger
   there instead. The threshold has headroom for the longer translated
   menus (Spanish and Turkish run wider than English). */
@media(max-width:1180px){ .htb-nav .links,.htb-nav .nav-cta{ display:none; } .htb-burger{ display:grid; } }

/* ═══ Hero ════════════════════════════════════════════════════════════════ */
/* The hero keeps more room than the sections below it — it is the one place
   the space earns its keep. */
.htb-hero{ padding:clamp(64px,8vw,118px) 0; text-align:center; }
.htb-hero .pill{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--text2);
  border:1px solid var(--line2); border-radius:30px; padding:7px 15px; background:rgba(255,255,255,.03); }
.htb-hero .pill b{ color:var(--text); } .htb-hero .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(79,214,157,.18); }
.htb-hero h1{ font-size:clamp(38px,7vw,80px); letter-spacing:-.035em; margin:26px auto 0; max-width:15ch; }
.htb-hero h1 .g{ background:linear-gradient(120deg,var(--c-yellow),var(--c-red) 30%,var(--accent) 66%,var(--c-green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.htb-hero .sub{ font-size:clamp(17px,2vw,21px); color:var(--text2); max-width:56ch; margin:24px auto 0; }
.htb-hero .cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.htb-hero .micro{ margin-top:16px; font-size:13px; color:var(--muted); }

/* Hero product frame */
.htb-stage{ margin-top:clamp(40px,6vw,72px); position:relative; }
.htb-stage .halo{ position:absolute; inset:-6% -4% 8%; background:radial-gradient(60% 60% at 50% 30%,rgba(59,158,255,.28),transparent 70%); filter:blur(30px); z-index:0; }
.htb-window{ position:relative; z-index:1; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg2)); box-shadow:0 40px 120px rgba(0,0,0,.55); }
.htb-window .bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--elevated); }
.htb-window .bar .dots{ display:flex; gap:7px; } .htb-window .bar .dots i{ width:11px; height:11px; border-radius:50%; background:var(--line3); }
.htb-window .bar .ttl{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text2); font-weight:600; }
/* Every place the mark is used at a fixed small size must ALSO override its
   padding, and this is not optional.

   .htb-glyph is built for the hero at ~120px and uses padding:12% so the cells
   scale with it. But a percentage padding resolves against the CONTAINING
   BLOCK's width, never the element's own — so a mark handed width:16px inside a
   770px panel still claimed 12% of 770px, and with border-box sizing a box
   cannot be smaller than its own padding. It rendered as a 187px black square
   next to the panel title, with the width rule present, correct-looking and
   completely powerless.

   Absolute paddings below, sized to each instance. */
.htb-window .bar .ttl .mk{ width:18px; height:18px; padding:2px; gap:1.5px; border-radius:26%; box-shadow:none; }
.htb-window .bar .ttl .mk i{ animation:none; transform:scale(1); }
.htb-window .body{ display:grid; grid-template-columns:230px 1fr; min-height:360px; }
@media(max-width:720px){ .htb-window .body{ grid-template-columns:1fr; } .htb-window .side{ display:none; } }
.htb-window .side{ border-right:1px solid var(--line); padding:16px; background:rgba(255,255,255,.015); }
.htb-window .side .grp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 8px; }
.htb-window .side .it{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:13.5px; color:var(--text2); }
.htb-window .side .it.on{ background:rgba(59,158,255,.12); color:var(--text); }
.htb-window .side .it .sw{ width:9px; height:9px; border-radius:3px; }
.htb-window .main{ padding:20px; }
.htb-window .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.htb-window .hd h5{ font-family:var(--disp); font-size:16px; } .htb-window .hd .chip{ font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:20px; padding:3px 10px; }
.htb-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.htb-slot{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--tile); min-height:74px; position:relative; overflow:hidden; }
.htb-slot .bar4{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.htb-slot b{ display:block; font-size:12.5px; color:var(--text); font-weight:600; } .htb-slot span{ font-size:11px; color:var(--muted); }
.htb-shot-note{ text-align:center; margin-top:14px; font-size:12.5px; color:var(--muted); }

/* logos strip */
.htb-strip{ padding:26px 0 6px; }
.htb-strip .in{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,50px); flex-wrap:wrap; color:var(--muted); font-size:13px; }
.htb-strip .in b{ color:var(--text2); font-weight:600; } .htb-strip .in .sepd{ width:5px; height:5px; border-radius:50%; background:var(--line3); }

/* ═══ Feature cards ═══════════════════════════════════════════════════════ */
.htb-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
@media(max-width:900px){ .htb-grid3{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .htb-grid3{ grid-template-columns:1fr; } }
.htb-card{ border:1px solid var(--line); border-radius:var(--r); padding:24px; background:linear-gradient(180deg,var(--surface),var(--bg2)); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.htb-card:hover{ transform:translateY(-3px); border-color:var(--line3); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.htb-card.span2{ grid-column:span 2; } @media(max-width:600px){ .htb-card.span2{ grid-column:span 1; } }
.htb-card .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; margin-bottom:16px;
  background:linear-gradient(160deg,rgba(59,158,255,.22),rgba(38,102,208,.12)); border:1px solid var(--line2); color:var(--accent); }
.htb-card h3{ font-size:18px; } .htb-card p{ margin-top:9px; font-size:14.5px; }
.htb-card .soon{ display:inline-block; margin-top:11px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--warn); border:1px solid var(--line2); border-radius:20px; padding:2px 8px; }

/* ═══ Workflow (interactive stepper) ══════════════════════════════════════ */
.htb-flow{ display:grid; grid-template-columns:340px 1fr; gap:34px; margin-top:52px; align-items:start; }
@media(max-width:860px){ .htb-flow{ grid-template-columns:1fr; } }
.htb-steps{ display:flex; flex-direction:column; gap:8px; }
.htb-step{ display:flex; gap:14px; text-align:left; padding:15px; border-radius:14px; border:1px solid transparent; background:none; cursor:pointer; transition:.18s; color:inherit; }
.htb-step:hover{ background:rgba(255,255,255,.03); } .htb-light .htb-step:hover{ background:rgba(12,22,42,.03); }
.htb-step.active{ background:var(--surface); border-color:var(--line2); }
/* The step marker holds a line-art icon (see WF_ICONS in the script), and falls
   back to the step number if a step is ever added without one. It used to be a
   bare numbered square: correct, and completely mute — six identical grey boxes
   down the left of the section carrying no information the list order did not
   already give. The number moved to .k on the right, where it still numbers the
   sequence without being the only thing to look at. */
.htb-step .n{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:13px;
  background:var(--tile); color:var(--text2); border:1px solid var(--line2); transition:.18s; }
.htb-step .n svg{ width:20px; height:20px; display:block; }
.htb-step.active .n{ background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }
.htb-step.active .n svg{ stroke:#fff; }
.htb-step .k{ margin-inline-start:auto; align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); font-variant-numeric:tabular-nums; }
.htb-step.active .k{ color:var(--accent); }
.htb-step h4{ font-family:var(--sans); font-weight:700; font-size:15px; } .htb-step p{ font-size:13px; margin-top:3px; }
.htb-stagebox{ border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg2)); box-shadow:0 30px 80px rgba(0,0,0,.4); min-height:340px; }
.htb-stagebox .bar{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--elevated); font-size:13px; color:var(--text2); }
.htb-stagebox .bar .mk{ width:16px; height:16px; padding:2px; gap:1.5px; border-radius:26%; box-shadow:none; }
.htb-stagebox .bar .mk i{ animation:none; transform:scale(1); }
.htb-stagebox .in{ padding:24px; } .htb-stagebox h5{ font-family:var(--disp); font-size:19px; } .htb-stagebox .p{ font-size:14px; margin-top:8px; max-width:52ch; }
.htb-rows{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.htb-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--tile); font-size:13.5px; }
.htb-row .sw{ width:9px; height:9px; border-radius:3px; flex:none; } .htb-row .nm{ color:var(--text); font-weight:600; flex:1; } .htb-row .vl{ color:var(--muted); font-family:var(--mono); font-size:12px; }
.htb-fade{ animation:htb-fadein .4s ease; } @keyframes htb-fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ═══ Dependency visualizer ═══════════════════════════════════════════════ */
.htb-dep{ margin-top:52px; display:flex; flex-direction:column; gap:12px; max-width:840px; margin-left:auto; margin-right:auto; }
.htb-node{ display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--line2); border-radius:14px;
  background:linear-gradient(180deg,var(--surface),var(--bg2)); position:relative; }
.htb-node::after{ content:""; position:absolute; left:34px; bottom:-13px; width:1px; height:13px; background:var(--line3); }
.htb-node:last-child::after{ display:none; }
.htb-node .tier{ display:flex; align-items:center; gap:10px; } .htb-node .tier .d{ width:11px; height:11px; border-radius:4px; flex:none; }
.htb-node .tier b{ font-family:var(--disp); font-size:14px; }
.htb-node .lbl b{ display:block; font-size:14px; color:var(--text); } .htb-node .lbl span{ font-size:12.5px; color:var(--muted); }
.htb-node .cnt{ font-family:var(--mono); font-size:12px; color:var(--text2); border:1px solid var(--line2); border-radius:20px; padding:4px 11px; white-space:nowrap; }
@media(max-width:600px){ .htb-node{ grid-template-columns:1fr auto; } .htb-node .tier{ grid-column:1/-1; } }

/* ═══ Screenshot gallery (placeholders) ═══════════════════════════════════ */
.htb-gal{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-top:52px; }
@media(max-width:760px){ .htb-gal{ grid-template-columns:1fr; } }
.htb-ph{ border:1px solid var(--line2); border-radius:var(--r); background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px), linear-gradient(180deg,var(--surface),var(--bg2));
  min-height:230px; display:grid; place-items:center; text-align:center; padding:26px; position:relative; overflow:hidden; }
.htb-ph .badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line2); border-radius:20px; padding:4px 11px; }
.htb-ph h4{ font-family:var(--disp); font-size:17px; margin-top:14px; } .htb-ph p{ font-size:13px; margin-top:7px; max-width:34ch; }
.htb-ph .mk{ width:52px; height:52px; margin:0 auto 4px; opacity:.9; padding:6px; gap:3px; box-shadow:none; }

/* ═══ Demo video (placeholder) ════════════════════════════════════════════ */
.htb-video{ margin-top:48px; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg2)); }
.htb-video .poster{ aspect-ratio:16/9; display:grid; place-items:center; position:relative;
  background:radial-gradient(80% 80% at 50% 40%,rgba(59,158,255,.14),transparent), linear-gradient(160deg,var(--elevated),var(--bg2)); }
.htb-video .play{ width:78px; height:78px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent2)); box-shadow:0 16px 44px rgba(59,158,255,.4); transition:transform .16s; }
.htb-video .play:hover{ transform:scale(1.06); } .htb-video .play svg{ width:30px; height:30px; margin-left:4px; }
.htb-video .lbl{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); }
.htb-chaps{ display:flex; flex-wrap:wrap; gap:8px; padding:16px; border-top:1px solid var(--line); }
.htb-chap{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; }
.htb-chap .t{ font-family:var(--mono); color:var(--accent); font-size:11px; }

/* ═══ Compatibility ═══════════════════════════════════════════════════════ */
.htb-compat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:52px; }
@media(max-width:700px){ .htb-compat{ grid-template-columns:1fr; } }
.htb-ctab{ border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.htb-ctab .h{ display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--elevated); font-family:var(--disp); font-weight:700; font-size:16px; }
.htb-ctab .h .d{ width:10px; height:10px; border-radius:3px; background:var(--accent); }
.htb-ctab .r{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line); font-size:14px; }
.htb-ctab .r:last-child{ border-bottom:none; } .htb-ctab .r .k{ color:var(--text2); } .htb-ctab .r .v{ color:var(--text); font-weight:600; text-align:right; }
.htb-ctab .r .v.tbc{ color:var(--warn); font-family:var(--mono); font-size:12px; font-weight:500; }
.htb-honest{ text-align:center; margin-top:22px; font-size:13px; color:var(--muted); }

/* ═══ Pricing ═════════════════════════════════════════════════════════════ */
.htb-price{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:52px auto 0; max-width:760px; align-items:stretch; }
@media(max-width:820px){ .htb-price{ grid-template-columns:1fr; max-width:440px; } }
.htb-plan{ border:1px solid var(--line2); border-radius:var(--r-lg); padding:26px; background:linear-gradient(180deg,var(--surface),var(--bg2)); display:flex; flex-direction:column; position:relative; }
.htb-plan.feat{ border-color:rgba(59,158,255,.5); box-shadow:0 24px 60px rgba(59,158,255,.16); }
.htb-plan .flag{ position:absolute; top:-11px; left:26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:20px; padding:4px 12px; }
.htb-plan .nm{ font-family:var(--disp); font-weight:700; font-size:18px; } .htb-plan .note{ font-size:13px; color:var(--muted); margin-top:3px; }
.htb-plan .pr{ display:flex; align-items:baseline; gap:6px; margin:18px 0 6px; }
.htb-plan .pr .amt{ font-family:var(--disp); font-weight:700; font-size:34px; letter-spacing:-.02em; } .htb-plan .pr .amt.tbc{ font-size:22px; color:var(--warn); }
.htb-plan ul{ list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:11px; }
.htb-plan li{ display:flex; gap:10px; font-size:14px; color:var(--text2); } .htb-plan li svg{ width:17px; height:17px; flex:none; color:var(--ok); margin-top:2px; }
.htb-plan .htb-btn{ width:100%; margin-top:auto; }
.htb-vat{ text-align:center; margin-top:20px; font-size:12.5px; color:var(--muted); }

/* ═══ FAQ ═════════════════════════════════════════════════════════════════ */
.htb-faq{ max-width:820px; margin:52px auto 0; }
.htb-q{ border-bottom:1px solid var(--line); }
.htb-q button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; background:none; border:none; cursor:pointer; text-align:left; color:var(--text); font-family:var(--disp); font-weight:600; font-size:16.5px; }
.htb-q .a{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.htb-q .a p{ padding:0 4px 20px; font-size:14.5px; }
.htb-q .ic{ width:26px; height:26px; flex:none; border-radius:8px; border:1px solid var(--line2); display:grid; place-items:center; color:var(--text2); transition:.2s; }
.htb-q.open .ic{ transform:rotate(45deg); color:var(--accent); border-color:var(--accent); }

/* ═══ Final CTA ═══════════════════════════════════════════════════════════ */
.htb-final{ text-align:center; border:1px solid var(--line2); border-radius:var(--r-lg); padding:clamp(40px,7vw,80px) 26px; position:relative; overflow:hidden;
  background:radial-gradient(90% 120% at 50% -10%,rgba(59,158,255,.18),transparent), linear-gradient(180deg,var(--surface),var(--bg2)); }
.htb-final h2{ font-size:clamp(28px,4.5vw,46px); } .htb-final p{ margin:16px auto 0; max-width:50ch; }
.htb-final .cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ═══ Footer ══════════════════════════════════════════════════════════════ */
.htb-foot{ border-top:1px solid var(--line); padding:56px 0 40px; margin-top:20px; }
.htb-foot .top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; }
@media(max-width:760px){ .htb-foot .top{ grid-template-columns:1fr 1fr; } }
.htb-foot .col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.htb-foot .col a:not(.htb-mark){ display:block; font-size:14px; color:var(--text2); padding:5px 0; } .htb-foot .col a:not(.htb-mark):hover{ color:var(--text); }
.htb-foot .about p{ font-size:13.5px; margin-top:14px; max-width:34ch; }
.htb-foot .bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.htb-foot .bottom .tm{ max-width:70ch; }

/* ═══ Mobile sheet ════════════════════════════════════════════════════════ */
.htb-sheet{ position:fixed; inset:0; z-index:60; background:rgba(4,6,10,.6); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .2s; }
.htb-sheet.open{ opacity:1; pointer-events:auto; }
.htb-sheet .panel{ position:absolute; right:0; top:0; bottom:0; width:min(320px,86vw); background:var(--surface); border-left:1px solid var(--line2); padding:20px; transform:translateX(100%); transition:transform .24s ease; display:flex; flex-direction:column; gap:6px; }
.htb-sheet.open .panel{ transform:none; }
.htb-sheet .panel a{ padding:13px 12px; border-radius:10px; color:var(--text2); font-weight:500; } .htb-sheet .panel a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.htb-sheet .panel .x{ align-self:flex-end; margin-bottom:6px; }

/* ═══ Checkout modal ══════════════════════════════════════════════════════ */
.htb-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:rgba(4,6,10,.66); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .2s; }
.htb-modal.open{ opacity:1; pointer-events:auto; }
.htb-modal .box{ width:min(460px,100%); border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--surface); padding:28px; transform:scale(.96); transition:transform .2s; }
.htb-modal.open .box{ transform:none; }
.htb-modal h3{ font-size:20px; } .htb-modal .sum{ margin:18px 0; border:1px solid var(--line); border-radius:14px; padding:16px; }
.htb-modal .sum .l{ display:flex; justify-content:space-between; font-size:14px; padding:5px 0; } .htb-modal .sum .l b{ color:var(--text); }
.htb-modal .note{ font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center; }
.htb-modal .x{ float:right; }

/* ═══ Reveal-on-scroll ════════════════════════════════════════════════════ */
.htb-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
.htb-reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .htb *{ animation:none !important; transition:none !important; }
  .htb-reveal{ opacity:1; transform:none; } .htb-glyph i{ transform:scale(1); }
}

/* ═══ Mobile / touch optimizations ════════════════════════════════════════ */
/* Display is driven by CSS media queries (always correct); JS additionally adds
   .htb-touch / .htb-mobile to .htb and injects the sticky CTA element.
   Touch devices: kill hover-lift so a tap doesn't leave elements stuck :hover. */
@media(hover:none){
  .htb-btn:hover, .htb-card:hover, .htb-step:hover, .htb-video .play:hover{ transform:none; }
  .htb-card:hover{ box-shadow:none; border-color:var(--line); }
}

@media(max-width:600px){
  /* tighter rhythm — less endless scrolling on a phone. Logical properties so
     the .htb-section (vertical) and .htb-wrap (horizontal) paddings on the same
     element never clobber each other via the `padding` shorthand. */
  .htb-section{ padding-block:52px; }
  .htb-wrap{ padding-inline:18px; }
  .htb-hero{ padding-block:34px 40px; }
  .htb-hero h1{ font-size:clamp(30px,8.6vw,40px); letter-spacing:-.03em; }
  .htb-hero .sub{ font-size:16px; margin-top:18px; }
  .htb-hero .cta{ margin-top:26px; }
  .htb-hero .cta .htb-btn{ flex:1 1 auto; justify-content:center; }
  .htb-h2{ font-size:clamp(26px,7.5vw,34px); }
  /* lighten the ambient background (GPU/battery) */
  .htb-atmos .glow{ display:none; }
  .htb-atmos .grid{ opacity:.32; background-size:40px 40px; }
  /* product window: give the slots room, drop the min-height */
  .htb-window .body{ min-height:0; }
  .htb-window .main{ padding:16px; }
  .htb-slots{ gap:9px; }
  /* workflow: horizontal, swipeable step chips with the preview right below */
  .htb-flow{ gap:18px; }
  .htb-steps{ flex-direction:row; overflow-x:auto; gap:9px; padding:2px 2px 8px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .htb-steps::-webkit-scrollbar{ display:none; }
  .htb-step{ flex:0 0 82%; scroll-snap-align:start; }
  /* comfortable footer + room above the sticky bar */
  .htb-foot .top{ gap:22px; }
  .htb-foot{ padding-bottom:92px; }
}

/* Sticky mobile call-to-action (element injected by JS; shown by CSS on phones). */
.htb-mcta{ position:fixed; left:0; right:0; bottom:0; z-index:52; display:none;
  align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line2); transition:transform .28s ease; }
.htb-mcta.hide{ transform:translateY(130%); }
.htb-mcta .price{ font-size:12.5px; color:var(--text2); white-space:nowrap; }
.htb-mcta .price b{ color:var(--text); font-family:var(--disp); font-size:16px; letter-spacing:-.01em; }
.htb-mcta .htb-btn{ padding:12px 18px; }
@media(max-width:600px){ .htb-mcta{ display:flex; } }