/* hikashop.com homepage — Direction A (+ C numbers swap)
 * Site asset, NOT Vessel template code. Loaded by the hero module.
 * Palette/fonts come from the design's shared.css (horizon).
 * Section rules are the ported direction-a.jsx <style> block with
 * `.dir-a` → `.hk-home`; A's "Powering shops" marquee and A's
 * `.stats` block are intentionally omitted (replaced by C's
 * `.numbers` band per the locked REBUILD_PLAN.md composition).
 */

/* ── Design tokens (from design/shared.css) ───────────────────── */
:root {
  --hk-navy: #1F6094; /* darkened from #297EBA for WCAG AA: 4.5:1 as text on light + white text on it as a panel bg */
  --hk-navy-700: #1F6094;
  --hk-navy-500: #154770;
  --hk-navy-300: #7AB0D8;
  --hk-navy-ink: #0E2A40;
  --hk-orange: #E8843A;
  --hk-orange-600: #C96B23; /* large display accents (≥3:1) + icon glyphs */
  --hk-orange-700: #A35313; /* small orange TEXT — AA 4.5:1 on light */
  --hk-orange-100: #FBE8D4;
  --hk-bg: #F8F7F2;
  --hk-bg-alt: #ECEAE0;
  --hk-card: #FFFFFF;
  --hk-line: #E2DFD3;
  --hk-ink: #0E2A40;
  --hk-ink-soft: #3F5870;
  --hk-ink-mute: #57697E; /* darkened from #7C90A6 for AA 4.5:1 meta text (incl. on bone) */
  --hk-on-navy: #F4EFE2;
  --hk-on-navy-soft: #C7DDED;
  --hk-cream: #F6E8C8;
  --hk-radius: 14px;
  --hk-radius-lg: 22px;
  --hk-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hk-display: "Fraunces", "Times New Roman", Georgia, serif;
  --hk-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Primitives (global, hk- prefixed) ────────────────────────── */
.hk-home * { box-sizing: border-box; }
.hk-home img { max-width: 100%; display: block; }
.hk-home h1,.hk-home h2,.hk-home h3,.hk-home h4 { letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
.hk-home h1 { font-weight: 600; }
.hk-home p { margin: 0; }

.hk-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hk-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--hk-navy); text-decoration: none; }
.hk-logo .mark { width: 28px; height: 28px; display: inline-block; }
.hk-logo--light { color: #fff; }

.hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-family: var(--hk-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.hk-btn:hover { transform: translateY(-1px); }
/* WCAG AA: white on #E8843A is only 2.69:1. Dark navy-ink label on the
   bright brand orange is ~5.1:1, so keep the orange and darken the text.
   Hover keeps the same orange (lift + shadow only) so it stays compliant. */
.hk-btn--primary { background: var(--hk-orange); color: var(--hk-navy-ink); }
.hk-btn--primary:hover { background: var(--hk-orange); color: var(--hk-navy-ink); box-shadow: 0 8px 24px -10px rgba(232,132,58,.55); }
.hk-btn--navy { background: var(--hk-navy-500); color: #fff; }
.hk-btn--navy:hover { background: var(--hk-navy-700); color: #fff; }
.hk-btn--ghost { background: transparent; color: var(--hk-navy); border-color: var(--hk-navy); }
.hk-btn--ghost:hover { background: var(--hk-navy); color: #fff; }
.hk-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.hk-btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.hk-btn--lg { padding: 16px 26px; font-size: 16px; }

.hk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hk-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hk-orange-700); font-weight: 500; }
.hk-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; }

.hk-container { width: min(1240px, 100% - 64px); margin: 0 auto; }

/* Progressive enhancement: .hk-reveal only hides once home.js has
 * confirmed JS by adding .hk-js to <html>. Without JS the content
 * is fully visible (no animation) — the page is never blank. */
.hk-js .hk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.hk-js .hk-reveal.is-in { opacity: 1; transform: none; }

/* Vessel wraps every module in its own .vessel-reveal--up
 * (opacity:0 until Vessel's own reveal JS runs). That JS doesn't
 * fire on the module-only homepage, so neutralize it for our
 * sections — site-asset override, Vessel template untouched. */
.vessel-reveal:has(.hk-home) { opacity: 1 !important; transform: none !important; }

.hk-frame { background: #fff; border-radius: 14px; border: 1px solid var(--hk-line); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(14,27,58,0.25), 0 8px 20px -10px rgba(14,27,58,0.12); }
.hk-frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F4F1EA; border-bottom: 1px solid var(--hk-line); }
.hk-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3cfc3; display: inline-block; }
.hk-frame__bar i:nth-child(1) { background: #f08a8a; }
.hk-frame__bar i:nth-child(2) { background: #f3c97b; }
.hk-frame__bar i:nth-child(3) { background: #9bd4a4; }
.hk-frame__bar span { margin-left: 12px; font-family: var(--hk-mono); font-size: 11px; color: var(--hk-ink-mute); }

/* Admin mock (from primitives.jsx, static) */
.hk-admin { display:grid; grid-template-columns:180px 1fr; background:#F8F6F1; min-height:360px; font-family:var(--hk-sans); }
.hk-admin aside { background:var(--hk-navy); color:#fff; padding:18px 14px; font-size:12px; }
.hk-admin aside .brand { display:flex; align-items:center; gap:8px; margin-bottom:22px; font-weight:700; font-size:13px; }
.hk-admin aside .brand i { width:16px; height:16px; background:var(--hk-orange); border-radius:4px; display:inline-block; }
.hk-admin aside .nav-i { padding:8px 10px; border-radius:6px; color:rgba(255,255,255,.85); margin-bottom:2px; }
.hk-admin aside .nav-i.on { background:rgba(255,255,255,.08); color:#fff; }
.hk-admin main { padding:20px 22px; }
.hk-admin .a-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.hk-admin .a-title { font-weight:700; font-size:16px; color:var(--hk-navy); }
.hk-admin .a-pill { padding:6px 12px; border:1px solid #DCD7C9; border-radius:999px; font-size:11px; color:#5C6E84; }
.hk-admin .a-pill.act { background:var(--hk-orange); color:var(--hk-navy-ink); border:0; font-weight:600; }
.hk-admin .a-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.hk-admin .a-card { background:#fff; padding:12px; border-radius:8px; border:1px solid #ECE7DA; }
.hk-admin .a-card .k { font-size:10px; color:#5C6E84; text-transform:uppercase; letter-spacing:.08em; }
.hk-admin .a-card .v { font-size:18px; font-weight:700; color:var(--hk-navy); margin-top:4px; }
.hk-admin .a-card .d { font-size:11px; color:#2E7D32; margin-top:2px; }
.hk-admin .a-chart { background:#fff; border-radius:8px; border:1px solid #ECE7DA; padding:14px; height:160px; overflow:hidden; }
.hk-admin .a-chart .k { font-size:11px; color:#5C6E84; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }

/* Storefront mock (hero). The dashboard answers "how do I run it";
   this answers "what do my customers see", so the two mocks on the
   page stop being the same picture twice. */
.hk-shop { background:#fff; height:100%; display:flex; flex-direction:column; font-family:var(--hk-sans); min-height:340px; }
.hk-shop .s-head { display:flex; align-items:center; gap:26px; padding:13px 22px; border-bottom:1px solid #ECE7DA; flex:0 0 auto; }
.hk-shop .s-brand { font-family:var(--hk-display); font-size:19px; font-weight:500; letter-spacing:-.015em; color:var(--hk-navy); white-space:nowrap; }
.hk-shop .s-nav { display:flex; gap:18px; font-size:12px; color:#5C6E84; }
.hk-shop .s-nav .on { color:var(--hk-navy); font-weight:600; border-bottom:2px solid var(--hk-orange); padding-bottom:2px; }
.hk-shop .s-tools { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hk-shop .s-search { display:flex; align-items:center; gap:7px; border:1px solid #E4DFD2; border-radius:999px; padding:5px 12px; font-size:11px; color:#8A93A2; }
.hk-shop .s-search svg { width:12px; height:12px; flex:0 0 auto; }
.hk-shop .s-cart { display:inline-flex; align-items:center; gap:7px; background:var(--hk-orange); color:var(--hk-navy-ink); border-radius:999px; padding:6px 13px; font-size:11px; font-weight:700; white-space:nowrap; }
.hk-shop .s-cart svg { width:13px; height:13px; }

.hk-shop .s-strip { display:flex; align-items:baseline; gap:10px; padding:14px 22px 0; flex:0 0 auto; }
.hk-shop .s-strip h4 { font-family:var(--hk-display); font-weight:500; font-size:17px; color:var(--hk-navy); margin:0; letter-spacing:-.01em; }
.hk-shop .s-strip span { font-family:var(--hk-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8A93A2; }
.hk-shop .s-strip em { margin-left:auto; font-style:normal; font-size:11px; color:#5C6E84; border:1px solid #E4DFD2; border-radius:6px; padding:4px 9px; }

.hk-shop .s-body { display:grid; grid-template-columns:126px 1fr; gap:18px; padding:14px 22px 20px; flex:1 1 auto; min-height:0; }
.hk-shop .s-facets { font-size:11px; color:#5C6E84; border-right:1px solid #F0ECE1; padding-right:16px; }
.hk-shop .s-facets .f-k { font-family:var(--hk-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#98A6B5; margin-bottom:9px; }
.hk-shop .s-facets .f-i { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.hk-shop .s-facets .f-i i { width:11px; height:11px; border:1px solid #D6CFBE; border-radius:3px; display:inline-block; flex:0 0 auto; }
.hk-shop .s-facets .f-i.on i { background:var(--hk-navy); border-color:var(--hk-navy); }
.hk-shop .s-facets .f-i.on { color:var(--hk-navy); font-weight:600; }
.hk-shop .s-facets .f-bar { margin-top:14px; height:3px; border-radius:2px; background:#EDE8DC; position:relative; }
.hk-shop .s-facets .f-bar i { position:absolute; left:12%; right:32%; top:0; bottom:0; border-radius:2px; background:var(--hk-orange); }

.hk-shop .s-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-content:start; min-width:0; }
.hk-shop .s-card { border:1px solid #ECE7DA; border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-width:0; }
.hk-shop .s-photo { position:relative; aspect-ratio:7/4; flex:0 0 auto; overflow:hidden; }
.hk-shop .s-photo svg { width:100%; height:100%; display:block; }
.hk-shop .s-badge { position:absolute; top:8px; left:8px; background:var(--hk-navy); color:#fff; border-radius:999px; padding:3px 9px; font-family:var(--hk-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.hk-shop .s-badge.sale { background:var(--hk-orange); color:var(--hk-navy-ink); font-weight:700; }
.hk-shop .s-meta { padding:10px 11px 12px; }
.hk-shop .s-name { font-size:12px; font-weight:600; color:var(--hk-navy); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hk-shop .s-stars { margin-top:5px; font-size:10px; color:var(--hk-orange-600); letter-spacing:1px; }
.hk-shop .s-stars b { color:#98A6B5; font-weight:400; letter-spacing:0; margin-left:4px; }
.hk-shop .s-price { margin-top:7px; font-size:14px; font-weight:700; color:var(--hk-navy); }
.hk-shop .s-price s { font-size:11px; font-weight:400; color:#98A6B5; margin-left:6px; }

.hk-shop .s-foot { display:flex; align-items:center; gap:12px; padding:0 22px 16px; margin-top:auto; flex:0 0 auto; font-size:11px; color:#8A93A2; }
.hk-shop .s-pager { margin-left:auto; display:flex; gap:5px; }
.hk-shop .s-pager i { font-style:normal; width:20px; height:20px; border:1px solid #E4DFD2; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#5C6E84; }
.hk-shop .s-pager i.on { background:var(--hk-navy); border-color:var(--hk-navy); color:#fff; font-weight:600; }

@media (max-width: 600px) {
  .hk-shop { min-height:0; }
  .hk-shop .s-foot { display:none; }
  .hk-shop .s-nav, .hk-shop .s-search, .hk-shop .s-facets, .hk-shop .s-strip em { display:none; }
  .hk-shop .s-body { grid-template-columns:1fr; }
  .hk-shop .s-grid { grid-template-columns:1fr 1fr; }
}

/* ── Sectional layout (ported from direction-a.jsx) ───────────── */
.hk-home { background: var(--hk-bg); color: var(--hk-ink); font-family: var(--hk-sans); }

.hk-home .hero { padding: 56px 0 64px; position: relative; overflow: hidden; }
.hk-home .hero h1 { font-family: var(--hk-display); font-weight: 400; font-size: clamp(32px, 5vw, 76px); letter-spacing: -0.03em; line-height: 1.02; max-width: none; color: var(--hk-navy); white-space: nowrap; }
@media (max-width: 760px) { .hk-home .hero h1 { white-space: normal; } }
.hk-home .hero h1 em { font-style: italic; color: var(--hk-orange-600); }
.hk-home .hero p.sub { margin-top: 28px; font-size: 19px; line-height: 1.5; color: var(--hk-ink-soft); max-width: none; }
.hk-home .hero .cta-row { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hk-home .hero .meta { margin-top: 22px; font-family: var(--hk-mono); font-size: 12px; color: var(--hk-ink-mute); display: flex; gap: 18px; flex-wrap: wrap; }
.hk-home .hero .meta b { color: var(--hk-navy); font-weight: 600; }
.hk-home .hero-stage { margin-top: 64px; position: relative; height: 480px; border-radius: 24px; background: linear-gradient(180deg, var(--hk-navy) 0%, #07112B 100%); overflow: hidden; }
.hk-home .hero-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(232,132,58,0.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(43,63,115,0.6), transparent 50%); }
.hk-home .hero-stage .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; }
.hk-home .hero-stage .screen { position: absolute; inset: 40px 60px; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4); transition: transform .2s ease-out; }
.hk-home .float-card { background:#fff; border-radius:12px; box-shadow:0 18px 50px -20px rgba(14,27,58,0.35), 0 4px 12px -6px rgba(14,27,58,0.15); padding:14px; font-size:12px; position:absolute; transition: transform .2s ease-out; }
.hk-home .float-card .fc-k { font-family:var(--hk-mono); font-size:10px; letter-spacing:.12em; color:#5C6E84; text-transform:uppercase; }

.hk-home .numbers { padding: 64px 0; background: var(--hk-navy-500); color: #F4EFE2; }
.hk-home .numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin-top: 30px; }
.hk-home .num-cell { background: var(--hk-navy-500); padding: 50px 40px; }
.hk-home .num-cell .v { font-family: var(--hk-display); font-weight: 400; font-size: clamp(64px, 8vw, 128px); letter-spacing: -0.04em; line-height: 0.95; color: #fff; }
.hk-home .num-cell .v em { font-style: italic; color: var(--hk-orange); }
.hk-home .num-cell .l { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.7); max-width: 22ch; line-height: 1.5; }

.hk-home .features { padding: 64px 0; border-top: 1px solid rgba(14,27,58,0.08); }
.hk-home .features h2 { font-family: var(--hk-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.025em; color: var(--hk-navy); max-width: 18ch; }
.hk-home .features-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; margin-bottom: 64px; }
.hk-home .features-head p { color: var(--hk-ink-soft); font-size: 17px; line-height: 1.55; }
.hk-home .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(14,27,58,0.08); border: 1px solid rgba(14,27,58,0.08); border-radius: 18px; overflow: hidden; }
/* Icon + title on one row, description spanning below.
   `display:contents` on the wrapper div promotes h3/p to grid
   items so this works without changing the module HTML. */
.hk-home .feat-card { background: var(--hk-bg); padding: 34px 28px; transition: background .3s ease; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 16px; align-items: center; }
.hk-home .feat-card > div:not(.feat-icon) { display: contents; }
.hk-home .feat-card:hover { background: #fff; }
.hk-home .feat-icon { width: 60px; height: 60px; border-radius: 14px; background: var(--hk-orange-100); display: flex; align-items: center; justify-content: center; color: var(--hk-orange-600); grid-column: 1; grid-row: 1; }
.hk-home .feat-icon svg { width: 32px; height: 32px; }
.hk-home .feat-card h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--hk-navy); margin: 0; }
.hk-home .feat-card p { grid-column: 1 / -1; grid-row: 2; color: var(--hk-ink-soft); font-size: 14px; line-height: 1.55; }

.hk-home .scroll-tour { padding: 88px 0; background: var(--hk-navy-ink); color: var(--hk-on-navy); position: relative; overflow: hidden; }
.hk-home .scroll-tour-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.hk-home .scroll-tour-sticky { position: sticky; top: 100px; }
.hk-home .scroll-tour h2 { font-family: var(--hk-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); color: #fff; letter-spacing: -0.025em; margin-bottom: 22px; }
.hk-home .scroll-tour p.lead { color: var(--hk-on-navy-soft); font-size: 17px; max-width: 44ch; line-height: 1.5; }
.hk-home .scroll-tour .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.1); }
.hk-home .scroll-tour .progress > i { display:block; height: 100%; width: 0%; background: var(--hk-orange); transition: width .1s linear; }
.hk-home .step { padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.hk-home .step h4 { font-size: 22px; font-weight: 500; color: #fff; margin-bottom: 10px; letter-spacing: -0.015em; }
.hk-home .step p { color: var(--hk-on-navy-soft); font-size: 15px; line-height: 1.55; }
.hk-home .step-num { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .15em; color: var(--hk-orange); margin-bottom: 8px; }

.hk-home .integrations { padding: 70px 0; }
.hk-home .integrations h2 { font-family: var(--hk-display); font-size: clamp(32px, 4vw, 50px); color: var(--hk-navy); font-weight: 400; margin-bottom: 12px; }
.hk-home .integrations p.lead { color: var(--hk-ink-soft); font-size: 17px; max-width: 60ch; }
/* Single infinite logo marquee (right → left). The track holds the
   logo set twice; translating it -50% loops seamlessly. Edges fade
   via a mask. Pauses on hover. */
.hk-home .int-marquee { margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* No flex `gap` here: spacing is per-item margin-right so the track
   is exactly 2× one set (including the trailing space after the
   last item). translateX(-50%) then lands precisely where the
   duplicate begins, so the loop is seamless with no restart jump. */
.hk-home .int-track { display: flex; align-items: center; width: max-content; animation: hk-int-marquee 60s linear infinite; }
.hk-home .int-marquee:hover .int-track { animation-play-state: paused; }
.hk-home .int-logo { height: 90px; width: auto; flex: 0 0 auto; margin-right: 80px; opacity: 1; filter: none; transition: transform .2s ease; }
.hk-home .int-logo:hover { transform: scale(1.04); }
@keyframes hk-int-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hk-home .int-track { animation: none; flex-wrap: wrap; justify-content: center; } }

.hk-home .editions { padding: 76px 0; }
.hk-home .editions h2 { font-family: var(--hk-display); font-size: clamp(36px, 4.4vw, 56px); color: var(--hk-navy); font-weight: 400; margin-bottom: 14px; }
.hk-home .editions p.lead { color: var(--hk-ink-soft); font-size: 17px; max-width: 56ch; }
.hk-home .ed-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hk-home .ed-card { background: #fff; border: 1px solid rgba(14,27,58,0.1); border-radius: 18px; padding: 32px 28px; position: relative; display: flex; flex-direction: column; }
.hk-home .ed-card.featured { background: var(--hk-navy); color: #fff; border-color: var(--hk-navy); }
.hk-home .ed-card .name { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--hk-orange-700); margin-bottom: 18px; }
.hk-home .ed-card .price { font-family: var(--hk-display); font-weight: 400; font-size: 56px; letter-spacing: -0.025em; color: var(--hk-navy); line-height: 1; }
.hk-home .ed-card.featured .price { color: #fff; }
.hk-home .ed-card .price small { font-size: 14px; font-family: var(--hk-sans); color: var(--hk-ink-mute); margin-left: 6px; }
.hk-home .ed-card.featured .price small { color: var(--hk-on-navy-soft); }
.hk-home .ed-card .desc { margin-top: 10px; font-size: 15px; color: var(--hk-ink-soft); }
.hk-home .ed-card.featured .desc { color: var(--hk-on-navy-soft); }
.hk-home .ed-card ul { list-style: none; padding: 0; margin: 28px 0; flex: 1; }
.hk-home .ed-card li { padding: 8px 0; font-size: 14px; color: var(--hk-ink-soft); border-top: 1px solid rgba(14,27,58,0.06); display: flex; gap: 8px; align-items: flex-start; }
.hk-home .ed-card.featured li { color: var(--hk-on-navy-soft); border-color: rgba(255,255,255,0.1); }
.hk-home .ed-card li::before { content: "→"; color: var(--hk-orange); }
.hk-home .pop-badge { position: absolute; top: -10px; right: 24px; background: var(--hk-orange); color: var(--hk-navy-ink); font-family: var(--hk-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.hk-home .ed-note { margin-top: 32px; font-family: var(--hk-mono); font-size: 12px; color: var(--hk-ink-mute); text-align: center; }
.hk-home .ed-note a { color: var(--hk-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.hk-home .ed-note a:hover { color: var(--hk-orange-700); }
/* A second way into the comparison table, beside the cards it compares. */
.hk-home .ed-compare { margin-top: 36px; text-align: center; }

.hk-home .quotes { padding: 76px 0; }
.hk-home .quotes h2 { font-family: var(--hk-display); font-size: clamp(36px, 4.4vw, 56px); color: var(--hk-navy); font-weight: 400; margin-top: 14px; letter-spacing: -0.025em; }
.hk-home .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.hk-home .q-card { background: var(--hk-bg-alt); border-radius: 18px; padding: 28px; }
.hk-home .q-card blockquote { font-family: var(--hk-display); font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; color: var(--hk-navy); margin: 0; }
.hk-home .q-card blockquote::before { content: "\201C"; font-size: 64px; line-height: 0; vertical-align: -28px; color: var(--hk-orange); margin-right: 6px; }
.hk-home .q-meta { margin-top: 22px; display: flex; gap: 12px; align-items: center; }
.hk-home .q-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hk-orange-100); border: 1px solid rgba(14,27,58,0.1); }
.hk-home .q-name { font-size: 14px; font-weight: 600; color: var(--hk-navy); }
.hk-home .q-role { font-size: 12px; color: var(--hk-ink-mute); }

.hk-home .cta-final { padding: 80px 0; background: var(--hk-navy-ink); color: #fff; text-align: center; position: relative; overflow: hidden; }
.hk-home .cta-final h2 { font-family: var(--hk-display); font-size: clamp(48px, 6vw, 84px); font-weight: 400; color: #fff; letter-spacing: -0.03em; line-height: 1; max-width: 18ch; margin: 0 auto; }
.hk-home .cta-final h2 em { color: var(--hk-orange); font-style: italic; }
.hk-home .cta-final p { margin-top: 24px; color: var(--hk-on-navy-soft); font-size: 18px; }
.hk-home .cta-final .cta-row { margin-top: 40px; display: flex; gap: 12px; justify-content: center; }

@media (max-width: 980px) {
  .hk-home .features-head, .hk-home .scroll-tour-grid { grid-template-columns: 1fr; gap: 32px; }
  .hk-home .feature-grid { grid-template-columns: 1fr 1fr; }
  .hk-home .integration-grid { grid-template-columns: repeat(3, 1fr); }
  .hk-home .ed-grid, .hk-home .q-grid, .hk-home .numbers-grid { grid-template-columns: 1fr; }
}

/* Phones: 2-up feature cards overflow, and the dashboard mock keeps a
   fixed 180px sidebar that pushes it past the viewport. Go single
   column, unstick the tour panel, and let the mock shrink to fit. */
@media (max-width: 600px) {
  .hk-home .feature-grid { grid-template-columns: 1fr; }
  .hk-home .scroll-tour { padding: 56px 0; }
  .hk-home .scroll-tour-sticky { position: static; }
  .hk-admin { grid-template-columns: 1fr; min-height: 0; }
  .hk-admin aside { display: none; }
  .hk-admin main { min-width: 0; }
  .hk-admin .a-cards { gap: 8px; }
}

/* ── Hero stage and dashboard mock: a bit of life ────────────────────
   The hero and the scroll-tour show a mock HikaShop dashboard. These
   rules animate it: the glow drifts, the screen catches a slow sheen,
   the floating cards breathe, the sidebar and the figures settle in.
   Everything is off under prefers-reduced-motion (bottom of this block),
   and the mouse parallax in home.js still applies on top. */
@keyframes hk-glow-drift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(0,0,0) scale(1); opacity: .9; }
}
.hk-home .hero-stage::before { animation: hk-glow-drift 18s ease-in-out infinite; }

@keyframes hk-sheen {
  0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  8%   { opacity: .5; }
  40%  { opacity: 0; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}
.hk-home .hero-stage .screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: hk-sheen 9s ease-in-out 2s infinite;
}

@keyframes hk-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hk-home .float-card { animation: hk-breathe 7s ease-in-out infinite; }
.hk-home .float-card:nth-of-type(even) { animation-duration: 9s; animation-delay: -3s; }

/* Sidebar rows and cards settle in once the stage is on screen. */
@keyframes hk-slide-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes hk-rise     { from { opacity: 0; transform: translateY(10px); }  to { opacity: 1; transform: none; } }
.hk-admin.is-live aside .nav-i { animation: hk-slide-in .45s ease-out both; }
.hk-admin.is-live aside .nav-i:nth-child(2)  { animation-delay: .05s; }
.hk-admin.is-live aside .nav-i:nth-child(3)  { animation-delay: .10s; }
.hk-admin.is-live aside .nav-i:nth-child(4)  { animation-delay: .15s; }
.hk-admin.is-live aside .nav-i:nth-child(5)  { animation-delay: .20s; }
.hk-admin.is-live aside .nav-i:nth-child(6)  { animation-delay: .25s; }
.hk-admin.is-live aside .nav-i:nth-child(7)  { animation-delay: .30s; }
.hk-admin.is-live aside .nav-i:nth-child(8)  { animation-delay: .35s; }
.hk-admin.is-live aside .nav-i:nth-child(9)  { animation-delay: .40s; }
.hk-admin.is-live .a-card { animation: hk-rise .5s ease-out both; }
.hk-admin.is-live .a-card:nth-child(2) { animation-delay: .08s; }
.hk-admin.is-live .a-card:nth-child(3) { animation-delay: .16s; }
.hk-admin .a-card { transition: transform .18s ease, box-shadow .18s ease; }
.hk-admin .a-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(14,27,58,.55); }
/* The active row keeps a soft orange marker. */
.hk-admin aside .nav-i.on { position: relative; }
.hk-admin aside .nav-i.on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--hk-orange);
}
/* The sales line draws itself; the area under it fades in behind. */
.hk-admin.is-live .a-chart path[stroke] { animation: hk-draw 1.6s ease-out both; }
.hk-admin.is-live .a-chart path[fill^="url"] { animation: hk-fade-in .9s ease-out .7s both; }
@keyframes hk-draw { from { stroke-dashoffset: var(--hk-len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes hk-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hk-home .hero-stage::before,
  .hk-home .hero-stage .screen::after,
  .hk-home .float-card,
  .hk-admin.is-live aside .nav-i,
  .hk-admin.is-live .a-card,
  .hk-admin.is-live .a-chart path { animation: none; }
  .hk-home .hero-stage .screen::after { display: none; }
}
