/* ============================================================
   GemBoss homepage: the AI Conversion Engine.
   Shared tokens, buttons, nav, footer and FAQ come from /assets/styles.css (which points at the
   dashboard's tokens). Everything here is page-local and prefixed hm- so it cannot leak.
   Two dark bands (the hero and the engine) are the only night surfaces; the rest is the
   dashboard's white, hairline-separated world, so the product mock-ups look like the product.
   ============================================================ */
:root{
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,"Cascadia Code",monospace;
  --hm-night:#090a16;
  --hm-night-2:#11132a;
  --hm-glow:#6c75ff;
  --hm-on-night:#f2f3f7;
  --hm-on-night-2:rgba(242,243,247,.66);
  --hm-on-night-line:rgba(255,255,255,.12);
  --hm-funnel:#5661f5;      /* the funnel builder's colour, as Intercom gives Fin its own */
  --hm-store:#1fcf9f;       /* the storefront builder's colour */
  --shadow-3d:0 24px 64px -24px rgba(9,10,22,.55);
  --shadow-card:0 1px 0 rgba(26,26,26,.07);
}
[id]{scroll-margin-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--sans);margin:0;text-wrap:balance}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
/* line-height 1.02 let the descenders of line one touch the caps of line two (owner 15/10: "hơi rít") */
.hm-h1{font-size:clamp(40px,5.4vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hm-h2{font-size:clamp(32px,3.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.06}
.hm-h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hm-dim{color:var(--muted)}
.hm-lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:58ch;margin:20px 0 0}
.hm-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.hm-label::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink)}
.hm-label.is-funnel::before{background:var(--hm-funnel)}
.hm-label.is-store::before{background:var(--hm-store)}
.hm-label.is-both::before{background:linear-gradient(90deg,var(--hm-funnel) 50%,var(--hm-store) 50%)}
.hm-mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.hm-head{max-width:760px}
.hm-head.center{margin-inline:auto;text-align:center}
.hm-head.center .hm-lead{margin-inline:auto}
.hm-sec{padding:var(--space-section) 0}
.hm-sec.tint{background:var(--bg-soft)}
.hm-link{color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.hm-link:hover{border-color:var(--ink)}
.hm-pill{display:inline-flex;align-items:center;gap:6px;height:auto;min-height:28px;line-height:16px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:500;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);white-space:nowrap}
.hm-pill.live{background:var(--emerald-soft);color:var(--emerald-ink)}
/* one accent (owner 15/10/2026: "màu sắc chưa hài hoà"): status pills are iris or neutral, the homepage's rule made
   site-wide. A test is iris; "Early access" is neutral with an iris dot; Live keeps its soft green. Tokens flip in dark. */
.hm-pill.test{background:var(--brand-soft);color:var(--brand-strong)}
.hm-pill.early{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
.hm-pill.early .d{background:var(--brand)}
.hm-pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- buttons on night ---------- */
.hm-night .btn-primary{background:#fff;color:#0b0c14}
.hm-night .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.hm-night .btn-ghost:hover{border-color:#fff}

/* ======================= HERO ======================= */
.hm-hero{position:relative;overflow:hidden;color:var(--hm-on-night);isolation:isolate;
  background:
    radial-gradient(900px 520px at 50% 92%,color-mix(in srgb,var(--hm-glow) 46%,transparent),transparent 70%),
    radial-gradient(1200px 600px at 50% -10%,#1b1f4a,transparent 70%),
    linear-gradient(180deg,var(--hm-night) 0%,var(--hm-night-2) 100%);
  padding:64px 0 0}
.hm-hero__copy{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center}
.hm-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--hm-on-night-2);text-decoration:none;border:1px solid var(--hm-on-night-line);background:rgba(255,255,255,.04);transition:border-color .15s,color .15s}
.hm-badge:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.hm-badge{white-space:nowrap;gap:0}
.hm-badge > span[aria-hidden]{margin-left:8px}
.hm-badge b{color:#fff;font-weight:600}
.hm-hero .hm-h1{margin-top:24px;color:#fff;max-width:none;font-size:clamp(40px,4.6vw,68px)}
.hm-hero .hm-h1 .hm-dim{color:rgba(242,243,247,.5);display:block}
.hm-hero .hm-lead{color:var(--hm-on-night-2);text-align:center;max-width:64ch;margin-top:16px}
/* the brief composer, re-dressed for night; markup and behaviour are site.js's */
.hm-hero .brief{width:min(100%,600px);margin:24px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 8px 8px 20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-align:left;transition:border-color .15s,background .15s}
.hm-hero .brief:focus-within{border-color:rgba(160,168,255,.7);background:rgba(255,255,255,.08)}
.hm-hero .brief textarea{flex:1 1 240px;display:block;border:0;outline:0;resize:none;background:transparent;color:#fff;font:inherit;font-size:16px;
  line-height:24px;padding:8px 0;min-height:0}
.hm-hero .brief textarea::placeholder{color:rgba(242,243,247,.45)}
.hm-hero .brief .btn-primary{background:#fff;color:#0b0c14;flex:0 0 auto}
.hm-hero .brief-error{flex:1 0 100%;margin:0;padding:0 0 4px;font-size:13px;color:#ffb4a8}
.hm-hero__alt{margin:12px 0 0;font-size:14px;color:rgba(242,243,247,.55)}
.hm-hero__alt a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.hm-hero__alt .sep{margin:0 8px;opacity:.5}

/* --- the stage: one agent, a field of pages, glowing strings between them --- */
.hm-stage{position:relative;height:clamp(400px,42vw,580px);margin-top:16px;pointer-events:none}
.hm-plane{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 10%;overflow:hidden;
  -webkit-mask-image:radial-gradient(110% 120% at 50% 100%,#000 50%,transparent 82%);mask-image:radial-gradient(110% 120% at 50% 100%,#000 50%,transparent 82%)}
.hm-grid{position:absolute;left:50%;bottom:-12%;width:min(1640px,150vw);display:grid;grid-template-columns:repeat(8,1fr);gap:16px;
  transform:translateX(-50%) rotateX(58deg);transform-origin:50% 100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.hm-card{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#1a1d3a;
  border:1px solid rgba(160,168,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.2);opacity:0;animation:hmIn .9s cubic-bezier(.2,.8,.3,1) forwards}
.hm-card::before{content:"";position:absolute;inset:0 0 auto 0;height:12px;background:rgba(255,255,255,.9);z-index:1;
  background-image:radial-gradient(circle at 8px 6px,#d5d8dd 2px,transparent 2.5px),radial-gradient(circle at 16px 6px,#d5d8dd 2px,transparent 2.5px),radial-gradient(circle at 24px 6px,#d5d8dd 2px,transparent 2.5px)}
.hm-card img{position:absolute;inset:12px 0 0 0;width:100%;height:calc(100% - 12px);object-fit:cover;object-position:top center;display:block;transition:opacity .35s}
.hm-card .sheen{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(196,201,255,.6) 50%,transparent 70%)}
.hm-card.gen{border-color:rgba(180,186,255,.85)}
.hm-card.gen .sheen{animation:hmSheen 1.1s cubic-bezier(.4,0,.2,1)}
.hm-card.swap img{opacity:.15}
@keyframes hmSheen{to{transform:translateX(120%)}}
.hm-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(9,10,22,.55));pointer-events:none}
.hm-card.is-live{border-color:rgba(180,186,255,.9);box-shadow:0 0 24px rgba(124,132,255,.75),0 0 2px rgba(220,224,255,.9);animation:hmIn .9s cubic-bezier(.2,.8,.3,1) forwards,hmPulse 3.2s ease-in-out infinite}
.hm-card.is-live::after{background:linear-gradient(180deg,transparent 60%,rgba(86,97,245,.35))}
@keyframes hmIn{from{opacity:0;transform:translateZ(-60px)}to{opacity:1;transform:none}}
@keyframes hmPulse{0%,100%{box-shadow:0 0 16px rgba(124,132,255,.55),0 0 2px rgba(220,224,255,.8)}50%{box-shadow:0 0 40px rgba(124,132,255,.95),0 0 2px rgba(220,224,255,1)}}
.hm-agent-wrap{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform}
.hm-agent{position:absolute;left:50%;top:-8px;width:clamp(170px,18vw,260px);height:auto;transform:translateX(-50%);
  filter:drop-shadow(0 24px 40px rgba(9,10,22,.6)) drop-shadow(0 0 48px rgba(108,117,255,.35));animation:hmFloat 6s ease-in-out infinite}
@keyframes hmFloat{0%,100%{transform:translate(-50%,0) rotate(-1.4deg)}50%{transform:translate(-50%,-10px) rotate(1.4deg)}}
.hm-strings{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.hm-strings path{fill:none;stroke-linecap:round}
.hm-strings .s-halo{stroke:#7c84ff;stroke-width:10;opacity:.26}
.hm-strings .s-base{stroke:url(#hmStr);stroke-width:2;opacity:1}
.hm-strings .s-pulse{stroke:#fff;stroke-width:2.5;stroke-dasharray:16 600;stroke-dashoffset:616;opacity:.95;animation:hmRun 3.2s cubic-bezier(.5,0,.3,1) infinite}
.hm-strings .s-pulse-halo{stroke:#a5abff;stroke-width:10;stroke-dasharray:24 600;stroke-dashoffset:620;opacity:.35;animation:hmRun2 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes hmRun2{from{stroke-dashoffset:620}to{stroke-dashoffset:0}}
.hm-paused .hm-strings path,.hm-paused .hm-card,.hm-paused .hm-agent{animation-play-state:paused}
@keyframes hmRun{from{stroke-dashoffset:616}to{stroke-dashoffset:0}}
.hm-tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:500;
  color:#fff;background:rgba(17,19,42,.82);border:1px solid rgba(160,168,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;opacity:0;transform:translate(-50%,-100%);transition:opacity .4s,border-color .4s}
.hm-tag.on{opacity:1}
.hm-tag i{width:6px;height:6px;border-radius:50%;background:var(--hm-store);font-style:normal}
.hm-tag.test i{background:#e0b341}
.hm-tag.draft i{background:#a5abff}
.hm-tag i{transition:background .4s}
@media(max-width:860px){
  .hm-grid{grid-template-columns:repeat(5,1fr);gap:12px;width:170vw}
  .hm-grid .hm-card:nth-child(n+36){display:none}
  .hm-tag.opt{display:none}
}
@media(max-width:560px){
  .hm-hero{padding-top:32px}
  .hm-badge__x{display:none}
  .hm-hero .hm-h1{font-size:36px;margin-top:16px}
  .hm-hero .hm-lead{font-size:16px;margin-top:12px}
  .hm-lead__more{display:none}
  .hm-hero__alt{font-size:13px}
  .hm-hero .brief{padding:8px}
  .hm-hero .brief textarea{padding:8px 12px}
  .hm-hero .brief .btn{flex:1 0 100%;justify-content:center}
  .hm-stage{height:380px;margin-top:16px}
  .hm-grid{width:220vw}
}
@media(prefers-reduced-motion:reduce){
  .hm-card,.hm-card.is-live{animation:none;opacity:1}
  .hm-agent{animation:none}
  .hm-card .sheen{display:none}
  .hm-strings .s-pulse,.hm-strings .s-pulse-halo{display:none}
}

/* ======================= PROOF STRIP ======================= */
.hm-proof{border-bottom:1px solid var(--line);padding:48px 0}
.hm-proof__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-proof__cell{padding:4px 24px;border-left:1px solid var(--line)}
.hm-proof__cell:first-child{border-left:0;padding-left:0}
.hm-proof__n{font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.hm-proof__l{font-size:14px;color:var(--muted);margin-top:4px;max-width:24ch}
.hm-proof__src{margin:24px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:860px){
  .hm-proof__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .hm-proof__cell:nth-child(3){border-left:0;padding-left:0}
}

/* ======================= TWO BUILDERS (tabs) ======================= */
.hm-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;overflow:hidden}
.hm-tab{appearance:none;border:0;background:var(--bg-soft);color:var(--muted);font:inherit;font-size:16px;font-weight:500;text-align:left;
  padding:16px 24px;cursor:pointer;display:flex;align-items:center;gap:12px;border-left:1px solid var(--line);transition:background .15s,color .15s}
.hm-tab:first-child{border-left:0}
.hm-tab::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.6}
.hm-tab[data-k="funnel"]::before{background:var(--hm-funnel);opacity:1}
.hm-tab[data-k="store"]::before{background:var(--hm-store);opacity:1}
.hm-tab[aria-selected="true"]{background:var(--surface);color:var(--ink)}
.hm-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hm-panels{border:1px solid var(--line);border-radius:0 0 12px 12px;background:var(--surface)}
.hm-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:40px;align-items:center}
.hm-panel[hidden]{display:none}
.hm-panel .hm-h3{margin-top:12px}
.hm-panel p{color:var(--muted);margin:12px 0 0}
.hm-checks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:12px}
.hm-checks li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:14px;line-height:1.5}
.hm-checks li::before{content:"";width:16px;height:16px;margin-top:4px;border-radius:4px;background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%235661f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hm-art{position:relative;border-radius:12px;padding:32px;overflow:hidden;min-height:400px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(420px 260px at 18% 12%,color-mix(in srgb,var(--hm-funnel) 30%,transparent),transparent 70%),
    radial-gradient(420px 300px at 92% 96%,color-mix(in srgb,var(--hm-store) 26%,transparent),transparent 70%),
    var(--bg-soft)}
.hm-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;opacity:.5;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
@media(max-width:960px){
  .hm-panel{grid-template-columns:minmax(0,1fr);padding:24px;gap:24px}
  .hm-art{min-height:0;padding:16px}
}
@media(max-width:560px){.hm-tab{font-size:14px;padding:12px 16px}}

/* --- the product, drawn with the dashboard's own grammar (white card, hairline, 13px) --- */
.ui{position:relative;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-raised);
  font-size:13px;line-height:20px;color:var(--ink);overflow:hidden}
.ui-top{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--line)}
.ui-top .dots{display:flex;gap:6px}.ui-top .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.ui-crumb{color:var(--muted);font-size:12px;margin-left:8px;white-space:nowrap;overflow:hidden;min-width:0}
.ui-crumb b{color:var(--ink);font-weight:600}
.ui-body{padding:16px}
.ui-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.ui-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:8px;padding:8px 8px 12px;background:var(--surface);min-width:0}
.ui-node .k{font-size:12px;color:var(--muted);margin-top:4px}
.ui-node .t{font-weight:600;line-height:18px;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-node .hm-pill{margin-top:4px}
.ui-node .thumb{align-self:stretch;height:72px;border-radius:4px;background:var(--bg-soft) center top/cover no-repeat;border:1px solid var(--line)}
.ui-node .var{display:flex;gap:4px;margin-top:8px}
.ui-node .var span{flex:1;height:20px;border-radius:4px;border:1px solid var(--line);font-size:11px;line-height:18px;text-align:center;color:var(--muted)}
.ui-node .var span.on{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-soft)}
.ui-node:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:1px;background:var(--line-strong)}
.ui-sub{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;font-size:12px;color:var(--muted)}
.ui-angles{display:grid;gap:8px}
.ui-angle{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.ui-angle .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ui-angle b{font-weight:600}
.ui-angle small{display:block;color:var(--muted);font-size:12px;line-height:16px}
.ui-store{position:relative}
.ui-store .shot{display:block;width:100%;height:auto;aspect-ratio:1100/726;object-fit:cover;object-position:top}
.ui-float{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-raised);padding:12px 16px;font-size:13px}
.ui-cwv{right:-8px;bottom:-24px;width:min(300px,78%)}
.ui-cwv .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.ui-cwv .m{font-size:12px;color:var(--muted)}
.ui-cwv .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ui-cwv .g{font-size:11px;color:var(--emerald-ink);font-weight:600}
.ui-badge-float{left:16px;top:56px;display:flex;align-items:center;gap:8px;padding:8px 12px}
.ui-badge-float i{width:8px;height:8px;border-radius:2px;background:var(--hm-store)}
@media(max-width:560px){.ui-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-node:nth-child(2)::after{display:none}.ui-cwv{position:relative;right:auto;bottom:auto;width:auto;margin:12px}}

/* ======================= ENGINE (night) ======================= */
.hm-engine{position:relative;overflow:hidden;color:var(--hm-on-night);
  background:radial-gradient(800px 360px at 50% 0%,color-mix(in srgb,var(--hm-glow) 34%,transparent),transparent 72%),var(--hm-night)}
.hm-engine .hm-label{color:var(--hm-on-night-2)}
.hm-engine .hm-h2{color:#fff}
.hm-engine .hm-lead{color:var(--hm-on-night-2)}
.hm-stages{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--hm-on-night-line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.hm-stage-t{padding:32px;border-right:1px solid var(--hm-on-night-line);border-bottom:1px solid var(--hm-on-night-line);position:relative}
.hm-stage-t:nth-child(3n){border-right:0}
.hm-stage-t:nth-child(n+4){border-bottom:0}
.hm-stage-t .no{font-family:var(--mono);font-size:12px;color:#a5abff;display:flex;align-items:center;gap:8px}
.hm-stage-t .no::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(165,171,255,.5),transparent)}
.hm-stage-t h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:16px;color:#fff}
.hm-stage-t .why{margin:8px 0 0;color:var(--hm-on-night);font-size:16px;line-height:1.5}
.hm-stage-t ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.hm-stage-t li{font-size:14px;line-height:1.5;color:var(--hm-on-night-2);padding-left:16px;position:relative}
.hm-stage-t li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:rgba(165,171,255,.6)}
.hm-always{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.hm-always div{display:flex;gap:16px;align-items:flex-start;padding:20px 24px;border-radius:12px;border:1px solid var(--hm-on-night-line);background:rgba(255,255,255,.03)}
.hm-always b{display:block;color:#fff;font-weight:600}
.hm-always span{color:var(--hm-on-night-2);font-size:14px}
.hm-always .ic{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:rgba(124,132,255,.16);color:#c4c9ff}
.hm-engine__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
@media(max-width:960px){
  .hm-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-stage-t{border-right:1px solid var(--hm-on-night-line)!important;border-bottom:1px solid var(--hm-on-night-line)!important}
  .hm-stage-t:nth-child(2n){border-right:0!important}
  .hm-stage-t:nth-child(n+5){border-bottom:0!important}
}
@media(max-width:620px){
  .hm-stages{grid-template-columns:minmax(0,1fr)}
  .hm-stage-t{padding:24px;border-right:0!important;border-bottom:1px solid var(--hm-on-night-line)!important}
  .hm-stage-t:last-child{border-bottom:0!important}
  .hm-always{grid-template-columns:minmax(0,1fr)}
}

/* ======================= FORMATS ======================= */
.hm-formats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:48px}
.hm-fmt{display:block;text-decoration:none;color:inherit}
.hm-fmt__frame{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);box-shadow:var(--shadow)}
.hm-fmt__frame img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
.hm-fmt:hover .hm-fmt__frame img,.hm-fmt:focus-visible .hm-fmt__frame img{transform:translateY(calc(-100% + 100cqh))}
.hm-fmt__frame{container-type:size}
.hm-fmt b{display:block;margin-top:12px;font-size:16px;font-weight:600}
.hm-fmt span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.hm-note{margin:24px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:960px){
  .hm-formats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin-inline:-22px;padding-inline:22px}
  .hm-fmt{flex:0 0 44%;scroll-snap-align:start}
}
@media(max-width:560px){.hm-fmt{flex-basis:64%}}
@media(prefers-reduced-motion:reduce){.hm-fmt__frame img{transition:none}}

/* ======================= CHANNELS ======================= */
.hm-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.hm-ch{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
a.hm-ch:hover{border-color:var(--ink)}
.hm-ch__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hm-ch__ic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--bg-soft);color:var(--ink)}
.hm-ch h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.hm-ch p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.hm-ch .more{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:960px){.hm-channels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hm-channels{grid-template-columns:minmax(0,1fr)}}

/* ======================= MARKET ======================= */
.hm-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.hm-split .hm-checks{margin-bottom:32px}
.hm-split .hm-h2{font-size:clamp(30px,2.8vw,40px)}
.ui-table{width:100%;border-collapse:collapse;font-size:13px}
.ui-table th{font-weight:450;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.ui-table td{padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.ui-table tr:last-child td{border-bottom:0}
.ui-table td.num,.ui-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.ui-table .you td{background:var(--brand-soft)}
.ui-table .you td:first-child{font-weight:600}
.spark{width:64px;height:20px;vertical-align:middle}
.spark polyline{fill:none;stroke:var(--muted);stroke-width:1.5}
.spark circle{fill:var(--brand)}
.ui-move{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px}
.ui-move b{font-weight:600}
.ui-move small{display:block;color:var(--muted);font-size:12px}
.ui-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:550;background:var(--primary);color:var(--bg);white-space:nowrap}
.hm-illus{margin:12px 0 0;font-size:12px;color:var(--muted);text-align:right}
@media(max-width:960px){.hm-split{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:560px){.ui-table .opt{display:none}}

/* ======================= SCALE (enterprise) ======================= */
.hm-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line)}
.hm-scale > div{padding:32px 24px 0 0}
.hm-scale > div + div{padding-left:24px;border-left:1px solid var(--line)}
.hm-scale h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:16px}
.hm-scale p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.hm-scale .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--bg-soft)}
.hm-scale small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.hm-scale__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
@media(max-width:960px){
  .hm-scale{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .hm-scale > div:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:560px){.hm-scale{grid-template-columns:minmax(0,1fr)}.hm-scale > div + div{padding-left:0;border-left:0}}

/* ======================= STACK + PRICE ======================= */
.hm-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.hm-box{border:1px solid var(--line);border-radius:16px;padding:40px;background:var(--surface)}
.hm-box .hm-h3{margin-top:12px}
.hm-box p{color:var(--muted);margin:12px 0 0}
.hm-stack{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 32px}
.hm-stack span{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:500;background:var(--surface)}
.hm-price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 32px}
.hm-price > div{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg-soft)}
.hm-price .v{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hm-price .v small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.hm-price .l{font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:960px){.hm-duo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.hm-box{padding:24px}.hm-price{grid-template-columns:minmax(0,1fr)}}

/* ======================= FAQ + FINAL ======================= */
.hm-faq .faq{max-width:820px;margin-inline:auto}
.hm-final{position:relative;overflow:hidden;text-align:center;color:#fff;padding:96px 0;
  background:radial-gradient(700px 360px at 50% 100%,color-mix(in srgb,var(--hm-glow) 44%,transparent),transparent 72%),var(--hm-night)}
.hm-final img{width:160px;height:auto;display:block;margin:0 auto 24px;filter:drop-shadow(0 0 32px rgba(108,117,255,.45))}
.hm-final .hm-h2{color:#fff}
.hm-final .hm-lead{color:var(--hm-on-night-2);margin-inline:auto}
.hm-final__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hm-card:nth-child(n+9){animation-delay:.1s}.hm-card:nth-child(n+17){animation-delay:.2s}.hm-card:nth-child(n+25){animation-delay:.3s}.hm-card:nth-child(n+33){animation-delay:.4s}

/* ======================= /enterprise ======================= */
.ent-hero{padding-bottom:96px}
.ent-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.ent-from{margin:0;text-align:center;font-size:16px;color:var(--muted)}
.ent-from b{color:var(--ink)}
.ent-q{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.ent-q .hm-box{display:flex;flex-direction:column;padding:32px}
.ent-q .hm-box p{flex:1;margin-bottom:24px}
.ent-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.ent-steps li{padding:24px 24px 0 0;position:relative}
.ent-steps li + li{padding-left:24px;border-left:1px solid var(--line)}
.ent-steps .no{color:var(--brand-strong)}
.ent-steps h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:12px}
.ent-steps p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.ent-checks{margin:0}
.ent-checks li{font-size:16px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:960px){
  .ent-q{grid-template-columns:minmax(0,1fr)}
  .ent-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .ent-steps li:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:560px){.ent-steps{grid-template-columns:minmax(0,1fr)}.ent-steps li + li{padding-left:0;border-left:0}}

/* ======================= Motion kit for every page (2026-10-15) =======================
   Shared so subpages move the way the homepage does. Only transform and opacity animate.
   assets/engine.js adds the pointer tilt, the draw-on and the off-screen pause. */
.hm-tilt-wrap{perspective:1200px}
.hm-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1);will-change:transform}
.hm-sway{animation:hmSway 9s ease-in-out infinite}
@keyframes hmSway{0%,100%{transform:rotateX(2deg) rotateY(-4deg)}50%{transform:rotateX(-1deg) rotateY(4deg)}}
.hm-float{animation:hmFloatY 6s ease-in-out infinite}
@keyframes hmFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* a product frame that glows on night, as github.com frames its UI */
.hm-glowframe{position:relative;border-radius:16px;padding:8px;background:linear-gradient(180deg,rgba(124,132,255,.4),rgba(124,132,255,.06));
  box-shadow:0 0 64px rgba(108,117,255,.35)}
.hm-glowframe > .ui{box-shadow:none}
/* a small tilted field of pages: the hero's idea at section size */
.hm-field{position:relative;height:320px;perspective:900px;overflow:hidden;
  -webkit-mask-image:radial-gradient(110% 120% at 50% 100%,#000 50%,transparent 85%);mask-image:radial-gradient(110% 120% at 50% 100%,#000 50%,transparent 85%)}
.hm-field__grid{position:absolute;left:50%;bottom:-16%;width:150%;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  transform:translateX(-50%) rotateX(58deg);transform-origin:50% 100%;animation:hmFieldSway 14s ease-in-out infinite}
.hm-field__grid > *{aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid rgba(160,168,255,.25);background:#1a1d3a}
.hm-field__grid img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@keyframes hmFieldSway{0%,100%{transform:translateX(-50%) rotateX(58deg) rotateZ(-1.2deg)}50%{transform:translateX(-50%) rotateX(56deg) rotateZ(1.2deg)}}
/* connectors with a light running along them: <svg class="hm-flow"><path class="line" d=…/><path class="pulse" d=…/></svg> */
.hm-flow path{fill:none;stroke-linecap:round}
.hm-flow .line{stroke:var(--line-strong);stroke-width:1.5}
.hm-flow .pulse{stroke:var(--brand);stroke-width:2.5;stroke-dasharray:14 420;stroke-dashoffset:434;animation:hmPulse2 2.8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes hmPulse2{to{stroke-dashoffset:0}}
/* charts that draw themselves when they scroll into view: <svg class="hm-draw"><polyline …/></svg> */
.hm-draw polyline,.hm-draw path{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.hm-draw.in polyline,.hm-draw.in path{stroke-dashoffset:0}
.hm-paused,.hm-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .hm-sway,.hm-float,.hm-field__grid,.hm-flow .pulse{animation:none}
  .hm-tilt{transform:none!important}
  .hm-draw polyline,.hm-draw path{stroke-dashoffset:0;transition:none}
}

/* Shopify, said clearly: the word underlined in Shopify's green, and a plain shopping-bag glyph of our
   own. Not Shopify's bag logo: their trademark rules want written permission for the mark. */
.shp{text-decoration:underline;text-decoration-color:#95bf47;text-decoration-thickness:.1em;text-underline-offset:.18em;text-decoration-skip-ink:none}
.shp-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:#95bf47;color:#fff;margin-right:8px;vertical-align:-4px}
.hm-stack .shp-chip{border-color:color-mix(in srgb,#95bf47 60%,var(--line));gap:8px}

/* ======================= Personalization: the chameleon =======================
   One page, one face per shopper. Each variant sets four colours; the registered properties let the
   section's glow and the page's colours slide from one face to the next instead of snapping. */
@property --cm-bg{syntax:"<color>";inherits:true;initial-value:#fbf1ea}
@property --cm-accent{syntax:"<color>";inherits:true;initial-value:#c2532f}
@property --cm-ink{syntax:"<color>";inherits:true;initial-value:#2a1a14}
@property --cm-glow{syntax:"<color>";inherits:true;initial-value:#f0a37f}
.cham{--cm-bg:#fbf1ea;--cm-accent:#c2532f;--cm-ink:#2a1a14;--cm-glow:#f0a37f;position:relative;overflow:hidden;
  transition:--cm-bg .9s ease,--cm-accent .9s ease,--cm-ink .9s ease,--cm-glow .9s ease}
.cham[data-v="google"]{--cm-bg:#eef4fb;--cm-accent:#2563c9;--cm-ink:#0f1d33;--cm-glow:#7aa7ff}
.cham[data-v="klaviyo"]{--cm-bg:#eaf7f1;--cm-accent:#0f8a63;--cm-ink:#0c2a20;--cm-glow:#5fd6a8}
.cham[data-v="tiktok"]{--cm-bg:#fdf0f6;--cm-accent:#c22f72;--cm-ink:#2d0f1e;--cm-glow:#ff86bd}
.cham[data-v="gift"]{--cm-bg:#f6f0fb;--cm-accent:#6b3fb8;--cm-ink:#1f1433;--cm-glow:#ad8cff}
.cham::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(640px 420px at 78% 50%,color-mix(in srgb,var(--cm-glow) 34%,transparent),transparent 70%),
             radial-gradient(420px 300px at 8% 100%,color-mix(in srgb,var(--cm-glow) 16%,transparent),transparent 70%)}
.cham__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.cham__who{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 24px}
.cham__chip{appearance:none;font:inherit;font-size:14px;font-weight:500;height:36px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);transition:background .3s,color .3s,border-color .3s}
.cham__chip:hover{border-color:var(--ink)}
.cham__chip[aria-selected="true"]{background:var(--cm-accent);border-color:var(--cm-accent);color:#fff}
.cham__chip:focus-visible{outline:2px solid var(--cm-accent);outline-offset:2px}
.cham__rule .ui-body{display:flex;flex-direction:column;gap:4px}
.cham__k{font-size:12px;color:var(--muted)}
.cham__cond{font-weight:600;color:var(--ink)}
.cham__page{background:var(--cm-bg);color:var(--cm-ink);border-color:color-mix(in srgb,var(--cm-accent) 18%,var(--line))}
.cham__url{font-family:var(--mono);font-size:12px}
.cham__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:400px}
.cham__media{position:relative;overflow:hidden}
.cham__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.3,1)}
.cham[data-v="google"] .cham__media img{transform:scale(1.5) translate(4%,-14%)}
.cham[data-v="klaviyo"] .cham__media img{transform:scale(1.12)}
.cham[data-v="tiktok"] .cham__media img{transform:scale(1.3) translate(-4%,6%) rotate(-2deg)}
.cham[data-v="gift"] .cham__media img{transform:scale(1.2) translate(2%,-6%)}
.cham__tint{position:absolute;inset:0;background:var(--cm-accent);opacity:.14;mix-blend-mode:multiply}
.cham__info{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:32px;transition:opacity .22s ease,transform .22s ease}
.cham__page.is-swapping .cham__info{opacity:0;transform:translateY(6px)}
.cham__angle{font-size:12px;font-weight:600;color:var(--cm-accent)}
.cham__h{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.12;color:var(--cm-ink)}
.cham__p{margin:0;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--cm-ink) 72%,transparent)}
.cham__tags{display:flex;flex-wrap:wrap;gap:8px}
.cham__tags span{font-size:12px;font-weight:600;padding:4px 8px;border-radius:8px;color:var(--cm-accent);background:color-mix(in srgb,var(--cm-accent) 12%,transparent)}
.cham__buy{font-size:14px;font-weight:600;padding:12px 16px;border-radius:8px;width:100%;border:1px solid color-mix(in srgb,var(--cm-accent) 40%,transparent);background:color-mix(in srgb,#fff 55%,transparent)}
.cham__cta{display:block;width:100%;text-align:center;font-size:14px;font-weight:600;padding:12px 16px;border-radius:8px;background:var(--cm-ink);color:var(--cm-bg)}
@media(max-width:960px){.cham__grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:560px){
  .cham__body{grid-template-columns:minmax(0,1fr);min-height:0}
  .cham__media{height:220px}
  .cham__info{padding:20px}
  .cham__h{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.cham,.cham__media img,.cham__info,.cham__chip{transition:none}}

/* the hero's light shifts colour very slowly: iris, then teal, then violet */
.hm-hero::before,.hm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0}
.hm-hero::before{background:radial-gradient(900px 520px at 22% 88%,rgba(31,207,159,.24),transparent 70%);animation:hmTint 22s ease-in-out infinite}
.hm-hero::after{background:radial-gradient(900px 520px at 80% 86%,rgba(173,140,255,.28),transparent 70%);animation:hmTint 22s ease-in-out -11s infinite}
@keyframes hmTint{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hm-hero::before,.hm-hero::after{animation:none}}
/* homepage: stage tiles carry a name and one line; the specifics live on /engine */
.hm-engine .hm-stage-t{padding:32px 32px 40px}

/* ======================= Phone fixes from the visual gate (2026-10-15) =======================
   Tap targets are 44px tall up to 768px; mock-ups never cut or squeeze their text at 320px. */
@media(max-width:768px){
  .hm-badge,.cham__chip,.theme-btn,.foot-bottom .theme-btn{min-height:44px;min-width:44px}
  .hm-hero .brief textarea{min-height:44px}
  .hm-tab{min-height:44px}
}
@media(max-width:560px){
  .ui-top{height:auto;min-height:40px;padding:8px 12px;align-items:flex-start}
  .ui-crumb{white-space:normal;overflow:visible}
  .ui-table th,.ui-table td{white-space:normal}
  .ui-flow{grid-template-columns:minmax(0,1fr)}
  .ui-node{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:start}
  .ui-node .thumb{grid-row:1 / span 3;height:56px;width:56px}
  .ui-node .k{margin-top:0}
  .ui-node .t{min-height:0}
  .ui-node::after{display:none}
  .ui-angle{grid-template-columns:24px minmax(0,1fr)}
  .ui-angle > .hm-pill{grid-column:2;justify-self:start}
}
@media(max-width:560px){
  .hm-proof__n{font-size:clamp(24px,7vw,30px)}
  .hm-proof__cell{padding:4px 12px}
  .hm-proof__cell:first-child,.hm-proof__cell:nth-child(3){padding-left:0}
}

/* ======================= The living mascot (2026-10-15) =======================
   The agent is two layers: agent-body.webp (rendered without eyes) and two drawn eyes on top, placed
   from the coordinates render.py prints. The eyes blink on an irregular rhythm, look toward the
   pointer (wander slowly on touch screens), squint when a primary button nearby is hovered, and the
   antenna gem breathes. Transform and opacity only; nothing moves under reduced motion. */
.hm-mascot{position:relative;display:block}
.hm-mascot > img{display:block;width:100%;height:auto}
.hm-eye{position:absolute;left:calc(var(--x) - var(--w) / 2);top:var(--y);width:var(--w);aspect-ratio:40/22;
  transform:translateY(-82%);pointer-events:none}
.hm-eye svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 82%;
  transform:translate(var(--lx,0px),var(--ly,0px)) scaleY(var(--open,1));transition:transform .14s cubic-bezier(.3,.7,.4,1)}
.hm-eye path{fill:none;stroke:#cfd3ff;stroke-width:6.5;stroke-linecap:round;filter:drop-shadow(0 0 3px #8f97ff) drop-shadow(0 0 8px rgba(124,132,255,.7))}
.hm-mascot.is-blink .hm-eye svg{--open:.12;transition-duration:.07s}
.hm-mascot.is-happy .hm-eye svg{--open:.72}
.hm-gemglow{position:absolute;left:var(--x);top:var(--y);width:14%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(165,171,255,.9),rgba(124,132,255,.35) 45%,transparent 72%);mix-blend-mode:screen;animation:hmGem 4.2s ease-in-out infinite}
@keyframes hmGem{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.85)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.hm-agent-box{position:absolute;left:50%;top:-8px;width:clamp(170px,18vw,260px);z-index:2;transform:translateX(-50%);animation:hmBreathe 5s ease-in-out infinite,hmTilt 7.3s ease-in-out infinite;
  filter:drop-shadow(0 24px 40px rgba(9,10,22,.6)) drop-shadow(0 0 48px rgba(108,117,255,.35))}
.hm-agent-box .hm-agent{position:static;width:100%;transform:none;animation:none;filter:none}
.hm-final .hm-mascot{width:180px;margin:0 auto 24px;filter:drop-shadow(0 0 32px rgba(108,117,255,.45));animation:hmBreathe 5s ease-in-out infinite,hmTilt 7.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hm-gemglow,.hm-agent-box,.hm-final .hm-mascot{animation:none}.hm-eye svg{transition:none}}
.hm-final .hm-mascot > img{width:100%;margin:0;filter:none}

/* breathing: 3px over 5s, and a 0.6 degree sway on a 7.3s period so the two never line up
   (individual translate/rotate, so they compose with the box's own translateX) */
@keyframes hmBreathe{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes hmTilt{0%,100%{rotate:-.6deg}50%{rotate:.6deg}}
/* an iris spotlight that follows the pointer inside cards on the night bands */
@media (hover:hover) and (pointer:fine){
  .hm-stage-t,.hm-always > div{position:relative;isolation:isolate}
  .hm-stage-t::before,.hm-always > div::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .25s;pointer-events:none;
    background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(124,132,255,.18),transparent 70%)}
  .hm-stage-t:hover::before,.hm-always > div:hover::before{opacity:1}
}

/* ======================= ONE BORDER DEEP (owner 15/10/2026: "nhiều đường viền lồng nhau quá, không clean") =======================
   A frame may hold things; what sits inside it is separated by fill, space or one divider, never by a second border. */
.ui .ui-node{border:0;background:var(--bg-soft)}
.ui .ui-node .thumb{border:0}
.ui .ui-node .var span{border:0;background:var(--surface)}
.ui .ui-node .var span.on{background:var(--brand-soft)}
.ui .ui-angles{gap:0}
.ui .ui-angle{border:0;border-radius:0;border-top:1px solid var(--line);padding:12px 4px}
.ui .ui-angle:first-child{border-top:0}
.ui .ui-move{border:0;background:var(--bg-soft)}
/* two builders: a segmented switch over an open panel, not a box with tabs on its lid */
.hm-tabs{grid-template-columns:1fr 1fr;gap:4px;width:min(560px,100%);padding:4px;border:0;border-radius:12px;background:var(--bg-soft);overflow:visible}
.hm-tab,.hm-tab:first-child{border:0;border-radius:8px;background:transparent;padding:12px 16px;min-height:44px}
.hm-tab[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow)}
.hm-panels{border:0;border-radius:0;background:none}
.hm-panel{padding:40px 0 0}
@media(max-width:960px){.hm-panel{padding:24px 0 0}}
/* integrations + pricing: soft surfaces; chips and price cells are fills */
.hm-box{border:0;background:var(--bg-soft)}
.tint .hm-box,.hm-sec.tint .hm-box{background:var(--surface)}
.hm-box .hm-stack span{border:0;background:var(--surface)}
.tint .hm-box .hm-stack span{background:var(--bg-soft)}
.hm-box .hm-price > div{border:0;background:var(--surface)}
.tint .hm-box .hm-price > div{background:var(--bg-soft)}
/* the Shopify mark inside its chip: the chip rules above match nested spans too, which painted it surface-on-surface */
.hm-stack span.shp-ic{width:20px;height:20px;padding:0;margin:0;border:0;border-radius:6px;background:#95bf47;color:#fff}
.hm-stack span.shp-chip,.hm-box .hm-stack span.shp-chip{background:color-mix(in srgb,#95bf47 14%,var(--surface))}

/* ======================= Phones: calm 3D (owner 15/10/2026: "hình 3D có vẻ rối trên mobile") =======================
   On a 390px screen the tilted fields filled the hero edge to edge with large, cut-off cards and glowing
   strings, and the tilted product windows read as askew. Phones get one focal point and flat frames. */
@media(max-width:640px){
  /* homepage hero: the robot leads; a small, softly faded field sits behind it, no strings or tags */
  .hm-stage{height:300px}
  .hm-plane{perspective:900px;
    -webkit-mask-image:radial-gradient(66% 58% at 50% 46%,#000 40%,transparent 96%);mask-image:radial-gradient(66% 58% at 50% 46%,#000 40%,transparent 96%)}
  .hm-grid{width:128vw;gap:8px;bottom:2%;transform:translateX(-50%) rotateX(60deg)}
  .hm-grid .hm-card:nth-child(n+21){display:none}
  .hm-card{opacity:.85}
  .hm-strings,.hm-tag{display:none}
  .hm-agent-box{width:180px}
  /* section-sized fields (solutions hero): fewer cards, faded sides, still */
  .hm-field{-webkit-mask-image:radial-gradient(60% 100% at 50% 100%,#000 35%,transparent 80%);mask-image:radial-gradient(60% 100% at 50% 100%,#000 35%,transparent 80%)}
  .hm-field__grid{width:120%;animation:none;transform:translateX(-50%) rotateX(56deg)}
  .hm-field__grid > :nth-child(n+13){display:none}
  /* tilted product windows: flat on a phone, no sway, softer glow */
  .hm-tilt-wrap{perspective:none}
  .hm-tilt,.hm-sway{transform:none!important;animation:none!important}
  .hm-glowframe{box-shadow:0 0 32px rgba(108,117,255,.22)}
}