/* ============================================================================
   HAKEEMIFY — single source of design truth   [build: v3 namespaced+armour]
   ----------------------------------------------------------------------------
   Load this file ONCE, globally (Elementor → Site Settings → Custom CSS,
   a code-snippet plugin, or the child theme). Section files contain markup only.

   To restyle the whole site, edit the tokens in :root below. Nothing else in
   this file — and nothing in any section file — hardcodes a brand colour.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Layout primitives (section bands, wrap)
     04  Typography (section heads, eyebrows)
     05  Buttons
     06  Card system + corner ticks (signature motif)
     07  Motion utilities (reveal, stagger)
     08  Header / nav / mobile drawer
     09  Hero
     10  Trust strip + marquee
     11  Product sections (bento, spec grid)
     12  AI Lab panel
     13  Chrome extension mock
     14  Developer tools terminal
     15  Automation flow
     16  Gallery + lightbox
     17  Video facade
     18  Services (optional block)
     19  How it works
     20  Company & security
     21  Testimonials
     22  Final CTA
     23  Footer
     24  Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS  — edit here, everything downstream follows
   ========================================================================== */

:root{

  /* ---- Brand colour ---- */
  --hk-ink:#0A0F1C;            /* primary dark surface + body text            */
  --hk-ink-2:#111830;          /* raised dark surface                          */
  --hk-ink-3:#18203C;          /* dark surface, one step lighter again         */
  --hk-slate:#5A6377;          /* muted text on light  (5.9:1 on white — AA)   */
  --hk-slate-2:#A7B0C4;        /* muted text on dark   (9.0:1 on ink  — AAA)   */
  --hk-line:#E4E8EF;           /* hairline on light                            */
  --hk-line-dark:#232E4A;      /* hairline on dark                             */
  --hk-paper:#F6F8FB;          /* page background                              */
  --hk-card:#FFFFFF;           /* card / light section surface                 */

  --hk-primary:#3D3BF3;        /* 6.6:1 on white — safe for text and buttons   */
  --hk-primary-ink:#2825C7;    /* pressed / hover                              */
  --hk-primary-lift:#6E6BFF;   /* gradient partner, on-dark accents            */
  --hk-primary-wash:#EEEEFF;   /* tint fill                                    */

  --hk-accent:#FF6A3D;         /* 2.9:1 on white — NEVER white text on this.   */
  --hk-accent-ink:#C4491C;     /* use for accent-coloured TEXT on light (5.1:1)*/
  --hk-accent-wash:#FFF1EC;

  --hk-verify:#0E9E82;         /* icons, dots, borders, text on dark           */
  --hk-verify-ink:#0A7A65;     /* verify-coloured TEXT on light  (5.3:1)       */
  --hk-verify-wash:#E7F6F2;

  /* ---- Type ---- */
  --hk-font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --hk-font-body:'Inter','Hind Siliguri', system-ui, -apple-system, sans-serif;
  --hk-font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --hk-fs-display:clamp(2.45rem, 1.55rem + 3.5vw, 4rem);   /* hero h1          */
  --hk-fs-h2:clamp(1.8rem, 1.3rem + 1.85vw, 2.7rem);
  --hk-fs-h3:clamp(1.15rem, 1.02rem + .48vw, 1.4rem);
  --hk-fs-lead:clamp(1.03rem, .98rem + .32vw, 1.19rem);
  --hk-fs-body:1rem;
  --hk-fs-sm:.9375rem;
  --hk-fs-xs:.8125rem;
  --hk-fs-mono:.75rem;

  /* ---- Space (density: standard) ---- */
  --hk-space-1:4px;   --hk-space-2:8px;   --hk-space-3:12px;  --hk-space-4:16px;
  --hk-space-5:24px;  --hk-space-6:32px;  --hk-space-7:48px;  --hk-space-8:64px;
  --hk-section-y:clamp(64px, 7.5vw, 112px);
  --hk-gutter:clamp(20px, 4vw, 32px);
  --hk-maxw:1200px;

  /* ---- Shape ---- */
  --hk-r-xs:6px; --hk-r-sm:10px; --hk-r:14px; --hk-r-lg:20px; --hk-r-xl:28px; --hk-r-pill:999px;

  /* ---- Elevation ---- */
  --hk-shadow-1:0 1px 2px rgba(10,15,28,.04), 0 2px 8px -2px rgba(10,15,28,.06);
  --hk-shadow-2:0 4px 12px -4px rgba(10,15,28,.08), 0 12px 32px -12px rgba(10,15,28,.12);
  --hk-shadow-3:0 24px 60px -28px rgba(10,15,28,.42);
  --hk-shadow-dark:0 32px 70px -34px rgba(0,0,0,.75);

  /* ---- Motion ---- */
  --hk-dur-1:150ms;  --hk-dur-2:220ms;  --hk-dur-3:420ms;
  --hk-ease:cubic-bezier(.22,.7,.28,1);
  --hk-ease-back:cubic-bezier(.34,1.32,.64,1);

  /* ---- Per-band semantic tokens (flipped by .hk-section--ink) ---- */
  --hk-fg:var(--hk-ink);
  --hk-fg-muted:var(--hk-slate);
  --hk-surface:var(--hk-card);
  --hk-surface-2:var(--hk-paper);
  --hk-hairline:var(--hk-line);
  --hk-eyebrow-color:var(--hk-primary);

  --hk-focus:0 0 0 3px rgba(61,59,243,.35);
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;               /* clears the sticky header */
}

body{
  margin:0;
  font-family:var(--hk-font-body);
  font-size:var(--hk-fs-body);
  line-height:1.6;
  color:var(--hk-ink);
  background:var(--hk-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img, svg, video{ display:block; max-width:100%; height:auto }
img{ background:var(--hk-paper) }                 /* avoids flash before load */

/* NOTE: this is specificity 0,0,1 and loses to theme rules like `footer a`.
   It is a convenience only — every component that shows links states its own
   colour explicitly. Don't rely on inheritance for a new component. */
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer }

h1,h2,h3,h4{
  font-family:var(--hk-font-display);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0;
  font-weight:700;
  text-wrap:balance;
}

p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

/* Bangla copy — opt in with class="bn" */
.hk-bn{ font-family:'Hind Siliguri', var(--hk-font-body); line-height:1.75 }

/* Visible focus everywhere. Never remove this. */
:focus-visible{
  outline:2px solid var(--hk-primary);
  outline-offset:3px;
  border-radius:var(--hk-r-xs);
}
.hk-section--ink :focus-visible{ outline-color:var(--hk-primary-lift) }

/* Screen-reader-only text */
.hk-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link */
.hk-skip-link{
  position:absolute; left:var(--hk-space-4); top:-100px; z-index:200;
  background:var(--hk-primary); color:#fff; padding:12px 18px;
  border-radius:var(--hk-r-sm); font-weight:600; font-family:var(--hk-font-display);
  transition:top var(--hk-dur-1) var(--hk-ease);
}
.hk-skip-link:focus{ top:var(--hk-space-4) }


/* ==========================================================================
   02b  THEME ARMOUR — read this before changing it
   --------------------------------------------------------------------------
   This markup gets pasted into a WordPress theme we do not control.

   The trap: an INHERITED value loses to ANY directly-matching rule, however
   low its specificity. Our dark bands set `color:#fff` on .hk-section--ink and
   let headings inherit it — but a theme's plain `h2{color:#111}` is a direct
   declaration on the element, so it wins, and headings go black-on-black.
   Specificity never enters into it; inheritance simply ranks below matching.

   So: restate on the headings themselves what they would otherwise inherit.
   The doubled class gives specificity 0,2,0, which beats the realistic theme
   selectors (`h2`, `body h2`, `.entry-content h2`, `.elementor-widget-container
   h2`) without resorting to !important. :where() keeps the element part at
   zero so our own component rules below can still override with 0,2,0.

   Scoped to hk- roots, so nothing here leaks into the rest of the site.
   ========================================================================== */

/* (A) Colour and family — these are what the theme actually breaks.
       Specificity 0,2,0, so it beats `h2`, `body h2`, `.entry-content h2`.
       Only two of our own rules override these, and both are bumped past it:
       `.hk-section .hk-hl` and `.hk-site-footer .hk-footer__cols h4`. */
.hk-section.hk-section :where(h1,h2,h3,h4,h5,h6),
.hk-site-footer.hk-site-footer :where(h1,h2,h3,h4,h5,h6),
.hk-drawer.hk-drawer :where(h1,h2,h3,h4,h5,h6),
.hk-lightbox.hk-lightbox :where(h1,h2,h3,h4,h5,h6){
  color:var(--hk-fg);
  font-family:var(--hk-font-display);
}

/* (B) Box resets — deliberately ONE class (0,1,0): strong enough to beat a
       theme's `h2{margin:0 0 20px}` (0,0,1), weak enough that our own
       component rules further down still win. Do not add a second class
       here, or every `.hk-card__title{margin-bottom}` stops working. */
.hk-section :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dd,dl,blockquote,figure){ margin:0 }
.hk-section :where(ul,ol){ padding:0; list-style:none }
.hk-site-footer :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li){ margin:0 }
.hk-site-footer :where(ul,ol){ padding:0; list-style:none }

/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

.hk-wrap{
  width:100%;
  max-width:var(--hk-maxw);
  margin-inline:auto;
  padding-inline:var(--hk-gutter);
}
.hk-wrap--narrow{ max-width:860px }

/* A section band. Add a modifier to change its surface; every child reads the
   semantic tokens, so no section file ever needs to know a hex value. */
.hk-section{
  position:relative;
  padding-block:var(--hk-section-y);
  background:var(--hk-surface);
  color:var(--hk-fg);
}
.hk-section--paper{ --hk-surface:var(--hk-paper); --hk-surface-2:var(--hk-card) }

.hk-section--ink{
  --hk-fg:#FFFFFF;
  --hk-fg-muted:var(--hk-slate-2);
  --hk-surface:var(--hk-ink);
  --hk-surface-2:var(--hk-ink-2);
  --hk-hairline:var(--hk-line-dark);
  --hk-eyebrow-color:var(--hk-primary-lift);
  --hk-focus:0 0 0 3px rgba(110,107,255,.45);
}

/* Hairline grid backdrop — the signature texture. Masked so it fades out. */
.hk-has-grid{ overflow:hidden }
.hk-has-grid::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--hk-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hk-hairline) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 72% 0%, #000 22%, transparent 76%);
          mask-image:radial-gradient(ellipse 78% 66% at 72% 0%, #000 22%, transparent 76%);
  pointer-events:none;
}
.hk-has-grid > *{ position:relative; z-index:1 }

/* Generic responsive grids */
.hk-grid{ display:grid; gap:var(--hk-space-5) }
.hk-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.hk-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.hk-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)) }

/* Split layout: copy on one side, a visual on the other */
.hk-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
.hk-split--reverse > :first-child{ order:2 }

@media (max-width:940px){
  .hk-grid--3, .hk-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .hk-split{ grid-template-columns:1fr; gap:var(--hk-space-7) }
  .hk-split--reverse > :first-child{ order:0 }
}
@media (max-width:600px){
  .hk-grid--2, .hk-grid--3, .hk-grid--4{ grid-template-columns:1fr }
}


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

/* Mono eyebrow with an index number and a rule that runs to the edge.
   This "spec sheet" treatment is the page's recurring signature. */
.hk-eyebrow{
  display:flex; align-items:center; gap:var(--hk-space-3); flex-wrap:wrap;
  font-family:var(--hk-font-mono);
  font-size:var(--hk-fs-mono);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hk-eyebrow-color);
  margin-bottom:var(--hk-space-4);
}
.hk-eyebrow__idx{
  display:inline-grid; place-items:center;
  min-width:26px; height:22px; padding-inline:6px;
  border:1px solid currentColor; border-radius:var(--hk-r-xs);
  font-size:.6875rem; letter-spacing:.06em; opacity:.85;
}
.hk-eyebrow__rule{
  flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.35;
}
.hk-eyebrow--center{ justify-content:center }
.hk-eyebrow--center .hk-eyebrow__rule{ display:none }

/* On narrow screens the label is one unbreakable flex item, so it drops below
   the index chip. Switch to normal inline flow: the chip sits inline and the
   label wraps mid-phrase like ordinary text. */
@media (max-width:560px){
  .hk-eyebrow{ display:block; letter-spacing:.11em }
  .hk-eyebrow__idx{ vertical-align:middle; margin-right:9px }
  .hk-eyebrow__rule{ display:none }
  .hk-eyebrow--center{ text-align:center }
}

/* Live status dot */
.hk-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--hk-verify); flex:none;
  box-shadow:0 0 0 0 rgba(14,158,130,.55);
}
@media (prefers-reduced-motion:no-preference){
  .hk-dot--pulse{ animation:dot-pulse 2.4s var(--hk-ease) infinite }
}
@keyframes dot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(14,158,130,.5) }
  50%    { box-shadow:0 0 0 6px rgba(14,158,130,0) }
}

.hk-sec-head{ max-width:640px; margin-bottom:clamp(36px, 4.5vw, 60px) }
.hk-sec-head--center{ margin-inline:auto; text-align:center }
.hk-sec-head h2{ font-size:var(--hk-fs-h2) }
.hk-sec-head .hk-lead{
  margin-top:var(--hk-space-4);
  font-size:var(--hk-fs-lead);
  color:var(--hk-fg-muted);
  text-wrap:pretty;
}
.hk-sec-head--split{
  max-width:none; display:flex; align-items:flex-end;
  justify-content:space-between; gap:var(--hk-space-6); flex-wrap:wrap;
}
.hk-sec-head--split > div{ max-width:640px }

.hk-lead{ font-size:var(--hk-fs-lead); color:var(--hk-fg-muted); text-wrap:pretty }
.hk-muted{ color:var(--hk-fg-muted) }
.hk-section .hk-hl{ color:var(--hk-primary) }              /* 0,2,0 — must beat the armour above */
.hk-section--ink .hk-hl{ color:var(--hk-primary-lift) }
.hk-mono{ font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); letter-spacing:.06em }

/* Small pill label */
.hk-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--hk-font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--hk-r-pill);
  background:var(--hk-primary-wash); color:var(--hk-primary-ink);
  border:1px solid rgba(61,59,243,.16);
}
.hk-tag--accent{ background:var(--hk-accent-wash); color:var(--hk-accent-ink); border-color:rgba(255,106,61,.24) }
.hk-tag--verify{ background:var(--hk-verify-wash); color:var(--hk-verify-ink); border-color:rgba(14,158,130,.22) }
.hk-section--ink .hk-tag{ background:rgba(110,107,255,.14); color:#C9C8FF; border-color:rgba(110,107,255,.3) }


/* ==========================================================================
   05  BUTTONS
   ========================================================================== */

.hk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--hk-font-display); font-weight:600; font-size:var(--hk-fs-sm);
  line-height:1;
  padding:14px 22px;
  min-height:48px;                       /* ≥44px touch target */
  border:1.5px solid transparent;
  border-radius:var(--hk-r-sm);
  background:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--hk-dur-1) var(--hk-ease),
             border-color var(--hk-dur-1) var(--hk-ease),
             color var(--hk-dur-1) var(--hk-ease),
             transform var(--hk-dur-1) var(--hk-ease),
             box-shadow var(--hk-dur-1) var(--hk-ease);
}
.hk-btn svg{ flex:none }
.hk-btn:active{ transform:translateY(0) scale(.985) }

.hk-btn--primary{ background:var(--hk-primary); color:#fff; box-shadow:0 6px 18px -8px rgba(61,59,243,.7) }
.hk-btn--primary:hover{ background:var(--hk-primary-ink); transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(61,59,243,.75) }

/* Accent surfaces carry INK text — white on #FF6A3D is only 2.9:1. */
.hk-btn--accent{ background:var(--hk-accent); color:var(--hk-ink); box-shadow:0 6px 18px -8px rgba(255,106,61,.7) }
.hk-btn--accent:hover{ background:#FF7C54; transform:translateY(-2px) }

.hk-btn--ghost{ border-color:var(--hk-hairline); color:var(--hk-fg); background:var(--hk-surface) }
.hk-btn--ghost:hover{ border-color:var(--hk-primary); color:var(--hk-primary) }
.hk-section--ink .hk-btn--ghost{ background:transparent; color:#fff }
.hk-section--ink .hk-btn--ghost:hover{ border-color:var(--hk-primary-lift); color:#C9C8FF }

.hk-btn--light{ background:#fff; color:var(--hk-ink) }
.hk-btn--light:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(0,0,0,.5) }

.hk-btn--sm{ padding:10px 15px; min-height:40px; font-size:var(--hk-fs-xs) }
.hk-btn--block{ width:100% }

/* Inline text link with a sliding arrow */
.hk-link-arrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--hk-font-display); font-weight:600; font-size:var(--hk-fs-sm);
  color:var(--hk-primary);
  transition:gap var(--hk-dur-1) var(--hk-ease), color var(--hk-dur-1) var(--hk-ease);
}
.hk-link-arrow:hover{ gap:12px; color:var(--hk-primary-ink) }
.hk-section--ink .hk-link-arrow{ color:var(--hk-primary-lift) }
.hk-section--ink .hk-link-arrow:hover{ color:#C9C8FF }


/* ==========================================================================
   06  CARD SYSTEM + CORNER TICKS  (signature motif)
   ========================================================================== */

.hk-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--hk-surface);
  border:1px solid var(--hk-hairline);
  border-radius:var(--hk-r-lg);
  padding:clamp(20px, 2.4vw, 28px);
  transition:transform var(--hk-dur-2) var(--hk-ease),
             border-color var(--hk-dur-2) var(--hk-ease),
             box-shadow var(--hk-dur-2) var(--hk-ease);
}
.hk-section:not(.hk-section--ink) .hk-card{ background:var(--hk-card) }
.hk-section--paper .hk-card{ background:var(--hk-card) }
.hk-section--ink .hk-card{ background:var(--hk-ink-2); border-color:var(--hk-line-dark) }

/* L-shaped hairline ticks that grow on hover — cheap, precise, not gradient soup */
.hk-card--tick::before,
.hk-card--tick::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border:1.5px solid var(--hk-primary);
  opacity:0;
  transition:opacity var(--hk-dur-2) var(--hk-ease), width var(--hk-dur-2) var(--hk-ease), height var(--hk-dur-2) var(--hk-ease);
  pointer-events:none;
}
.hk-card--tick::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-radius:var(--hk-r-lg) 0 0 0 }
.hk-card--tick::after { bottom:-1px; right:-1px; border-left:0;  border-top:0;    border-radius:0 0 var(--hk-r-lg) 0 }

.hk-card--tick:hover,
.hk-card--tick:focus-within{
  transform:translateY(-4px);
  border-color:rgba(61,59,243,.35);
  box-shadow:var(--hk-shadow-2);
}
.hk-card--tick:hover::before, .hk-card--tick:hover::after,
.hk-card--tick:focus-within::before, .hk-card--tick:focus-within::after{
  opacity:1; width:22px; height:22px;
}
.hk-section--ink .hk-card--tick::before,
.hk-section--ink .hk-card--tick::after{ border-color:var(--hk-primary-lift) }
.hk-section--ink .hk-card--tick:hover{ border-color:rgba(110,107,255,.45); box-shadow:var(--hk-shadow-dark) }

/* Card internals */
.hk-card__code{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hk-fg-muted); opacity:.85;
  margin-bottom:var(--hk-space-3);
}
.hk-card__title{ font-size:var(--hk-fs-h3); margin-bottom:var(--hk-space-3) }
.hk-card__desc{ color:var(--hk-fg-muted); font-size:var(--hk-fs-sm); flex:1 1 auto }
.hk-card__status{
  display:flex; align-items:center; gap:8px;
  margin-top:var(--hk-space-4);
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hk-fg-muted);
}
.hk-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); flex-wrap:wrap;
  margin-top:var(--hk-space-5); padding-top:var(--hk-space-4);
  border-top:1px solid var(--hk-hairline);
}
.hk-card__price{ font-family:var(--hk-font-display); font-weight:700; font-size:1.2rem }
.hk-card__price small{ font-family:var(--hk-font-body); font-weight:400; font-size:var(--hk-fs-xs); color:var(--hk-fg-muted) }

/* Icon chip */
.hk-icon-chip{
  display:grid; place-items:center;
  width:44px; height:44px; flex:none;
  border-radius:var(--hk-r-sm);
  background:var(--hk-primary-wash); color:var(--hk-primary);
  border:1px solid rgba(61,59,243,.14);
  margin-bottom:var(--hk-space-4);
}
.hk-icon-chip svg{ width:22px; height:22px }
.hk-section--ink .hk-icon-chip{ background:rgba(110,107,255,.14); color:var(--hk-primary-lift); border-color:rgba(110,107,255,.28) }
.hk-icon-chip--verify{ background:var(--hk-verify-wash); color:var(--hk-verify-ink); border-color:rgba(14,158,130,.2) }
.hk-icon-chip--accent{ background:var(--hk-accent-wash); color:var(--hk-accent-ink); border-color:rgba(255,106,61,.22) }


/* ==========================================================================
   07  MOTION UTILITIES
   ========================================================================== */

/* Scroll reveal. app.js adds .hk-is-in via one shared IntersectionObserver.
   Content is never hidden for reduced-motion users or if JS is unavailable
   (index.html carries a <noscript> override). */
.hk-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--hk-dur-3) var(--hk-ease), transform var(--hk-dur-3) var(--hk-ease);
}
.hk-reveal.hk-is-in{ opacity:1; transform:none }

/* Stagger children of a container: app.js sets --hk-i on each child */
.hk-stagger > *{ transition-delay:calc(var(--hk-i, 0) * 60ms) }

/* Count-up numbers reserve their space so there is no layout shift */
.hk-counter{ font-variant-numeric:tabular-nums }


/* ==========================================================================
   08  HEADER / NAV / MOBILE DRAWER
   ========================================================================== */

/* Thin utility bar above the header */
.hk-topbar{
  background:var(--hk-ink); color:var(--hk-slate-2);
  font-size:var(--hk-fs-xs);
  border-bottom:1px solid var(--hk-line-dark);
}
.hk-topbar .hk-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); min-height:40px; flex-wrap:wrap;
}
.hk-topbar a{ display:inline-flex; align-items:center; gap:7px; padding-block:8px; color:var(--hk-slate-2) }
.hk-topbar a:hover{ color:#fff }
.hk-topbar__right{ display:flex; align-items:center; gap:var(--hk-space-5) }
.hk-topbar__badge{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.06em;
  color:#fff; border:1px solid var(--hk-line-dark);
  border-radius:var(--hk-r-pill); padding:3px 11px;
}

.hk-site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,248,251,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
          backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--hk-dur-2) var(--hk-ease),
             box-shadow var(--hk-dur-2) var(--hk-ease),
             background var(--hk-dur-2) var(--hk-ease);
}
.hk-site-header .hk-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-5);
  height:76px;
  transition:height var(--hk-dur-2) var(--hk-ease);
}
/* Condensed state — app.js toggles .hk-is-stuck past 24px of scroll */
.hk-site-header.hk-is-stuck{
  background:rgba(246,248,251,.94);
  border-bottom-color:var(--hk-line);
  box-shadow:0 6px 24px -18px rgba(10,15,28,.5);
}
.hk-site-header.hk-is-stuck .hk-wrap{ height:60px }

.hk-logo{
  display:inline-flex; align-items:center; gap:10px; color:var(--hk-ink);
  font-family:var(--hk-font-display); font-weight:700;
  font-size:1.3rem; letter-spacing:-.035em;
  flex:none;
}
.hk-logo__mark{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--hk-primary), var(--hk-primary-lift));
  color:#fff; font-size:.95rem; font-weight:700;
  box-shadow:0 4px 12px -4px rgba(61,59,243,.7);
}

.hk-nav{ display:flex; align-items:center; gap:var(--hk-space-2) }
.hk-nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:var(--hk-r-sm);
  font-size:var(--hk-fs-sm); font-weight:500; color:var(--hk-slate);
  transition:color var(--hk-dur-1) var(--hk-ease), background var(--hk-dur-1) var(--hk-ease);
}
.hk-nav__link:hover{ color:var(--hk-ink); background:rgba(10,15,28,.045) }

/* Products dropdown */
.hk-nav__item{ position:relative }
.hk-nav__toggle{
  border:0; background:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:var(--hk-r-sm);
  font-family:var(--hk-font-body); font-size:var(--hk-fs-sm); font-weight:500;
  color:var(--hk-slate);
  transition:color var(--hk-dur-1) var(--hk-ease), background var(--hk-dur-1) var(--hk-ease);
}
.hk-nav__toggle:hover{ color:var(--hk-ink); background:rgba(10,15,28,.045) }
.hk-nav__toggle svg{ transition:transform var(--hk-dur-2) var(--hk-ease) }
.hk-nav__item.hk-is-open .hk-nav__toggle{ color:var(--hk-ink) }
.hk-nav__item.hk-is-open .hk-nav__toggle svg{ transform:rotate(180deg) }

.hk-nav__menu{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:320px; padding:var(--hk-space-3);
  background:var(--hk-card);
  border:1px solid var(--hk-line);
  border-radius:var(--hk-r);
  box-shadow:var(--hk-shadow-2);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  /* visibility is a DISCRETE property: transitioning it would flip it halfway
     through, so an element focused on open is still unfocusable. Delay it to
     the end when closing, apply it instantly when opening. */
  transition:opacity var(--hk-dur-2) var(--hk-ease), transform var(--hk-dur-2) var(--hk-ease),
             visibility 0s linear var(--hk-dur-2);
}
.hk-nav__item.hk-is-open .hk-nav__menu{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--hk-dur-2) var(--hk-ease), transform var(--hk-dur-2) var(--hk-ease), visibility 0s;
}
.hk-nav__menu a{
  display:flex; gap:12px; align-items:flex-start; color:var(--hk-ink);
  padding:11px 12px; border-radius:var(--hk-r-sm);
  transition:background var(--hk-dur-1) var(--hk-ease);
}
.hk-nav__menu a:hover{ background:var(--hk-paper) }
.hk-nav__menu strong{ display:block; font-family:var(--hk-font-display); font-size:var(--hk-fs-sm); font-weight:600 }
.hk-nav__menu span{ display:block; font-size:var(--hk-fs-xs); color:var(--hk-slate) }
.hk-nav__menu svg{ width:18px; height:18px; margin-top:2px; color:var(--hk-primary); flex:none }

.hk-header__cta{ display:flex; align-items:center; gap:10px; flex:none }

.hk-menu-btn{
  display:none; color:var(--hk-ink);
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--hk-line); border-radius:var(--hk-r-sm);
  background:var(--hk-card);
}
.hk-menu-btn svg{ width:20px; height:20px }
.hk-menu-btn .hk-icon-close{ display:none }
.hk-menu-btn[aria-expanded="true"] .hk-icon-open{ display:none }
.hk-menu-btn[aria-expanded="true"] .hk-icon-close{ display:block }

/* Mobile drawer */
.hk-drawer{
  --hk-fg:var(--hk-ink);
  position:fixed; inset:0 0 0 auto; z-index:110;
  width:min(88vw, 380px);
  background:var(--hk-card);
  border-left:1px solid var(--hk-line);
  padding:var(--hk-space-6) var(--hk-space-5) var(--hk-space-7);
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  /* See the note on .hk-nav__menu — visibility must flip instantly on open,
     otherwise the first focusable element is not yet focusable. */
  transition:transform var(--hk-dur-3) var(--hk-ease), visibility 0s linear var(--hk-dur-3);
}
.hk-drawer.hk-is-open{
  transform:none; visibility:visible;
  transition:transform var(--hk-dur-3) var(--hk-ease), visibility 0s;
}
.hk-drawer__scrim{
  position:fixed; inset:0; z-index:105;
  background:rgba(10,15,28,.5);
  opacity:0; visibility:hidden;
  transition:opacity var(--hk-dur-3) var(--hk-ease), visibility 0s linear var(--hk-dur-3);
}
.hk-drawer__scrim.hk-is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--hk-dur-3) var(--hk-ease), visibility 0s;
}
.hk-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--hk-space-6) }
.hk-drawer__group{ border-top:1px solid var(--hk-line); padding-top:var(--hk-space-4); margin-top:var(--hk-space-4) }
.hk-drawer__group:first-of-type{ border-top:0; margin-top:0; padding-top:0 }
.hk-drawer__label{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-slate); margin-bottom:var(--hk-space-2);
}
.hk-drawer a.hk-drawer__link{
  display:block; padding:12px 0; color:var(--hk-ink);
  font-family:var(--hk-font-display); font-weight:600; font-size:1.05rem;
}
.hk-drawer a.hk-drawer__link:hover{ color:var(--hk-primary) }
.hk-drawer__sub a{ display:block; padding:9px 0; font-size:var(--hk-fs-sm); color:var(--hk-slate) }
.hk-drawer__sub a:hover{ color:var(--hk-primary) }
.hk-drawer__cta{ display:grid; gap:10px; margin-top:var(--hk-space-6) }

body.hk-no-scroll{ overflow:hidden }

@media (max-width:1040px){
  .hk-nav, .hk-header__cta .hk-btn{ display:none }
  .hk-menu-btn{ display:inline-flex }
}
@media (max-width:560px){
  .hk-topbar__right .hk-topbar__badge{ display:none }
}


/* ==========================================================================
   09  HERO
   ========================================================================== */

.hk-hero{ position:relative; padding-block:clamp(56px, 7vw, 96px) clamp(56px, 7vw, 100px) }
.hk-hero .hk-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px, 5vw, 64px);
  align-items:center;
}
.hk-hero h1{ font-size:var(--hk-fs-display); margin-bottom:var(--hk-space-5) }
.hk-hero .hk-lead{ max-width:36ch }
.hk-hero__cta{ display:flex; gap:var(--hk-space-3); margin-top:var(--hk-space-6); flex-wrap:wrap }

.hk-hero__manifest{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:var(--hk-space-6); padding-top:var(--hk-space-5);
  border-top:1px solid var(--hk-line);
  font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono);
  letter-spacing:.04em; color:var(--hk-slate);
}
.hk-hero__manifest li{ display:inline-flex; align-items:center; gap:8px }

/* The signature panel — a live "product manifest" readout */
.hk-panel{
  position:relative;
  background:var(--hk-ink);
  border:1px solid var(--hk-line-dark);
  border-radius:var(--hk-r-xl);
  padding:var(--hk-space-5);
  box-shadow:var(--hk-shadow-3);
  color:#fff;
  transform-style:preserve-3d;
  will-change:transform;
}
.hk-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); padding-bottom:var(--hk-space-4);
  border-bottom:1px solid var(--hk-line-dark);
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-slate-2);
}
.hk-panel__head span{ display:inline-flex; align-items:center; gap:8px }
.hk-panel__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); padding:14px 0;
  border-bottom:1px solid rgba(35,46,74,.6);
  transition:background var(--hk-dur-1) var(--hk-ease), padding-inline var(--hk-dur-1) var(--hk-ease);
}
.hk-panel__row:last-of-type{ border-bottom:0 }
.hk-panel__row:hover{ background:rgba(110,107,255,.07); padding-inline:8px; border-radius:var(--hk-r-xs) }
.hk-panel__name{ font-family:var(--hk-font-display); font-weight:600; font-size:var(--hk-fs-sm) }
.hk-panel__cat{ font-family:var(--hk-font-mono); font-size:.6875rem; color:var(--hk-slate-2); letter-spacing:.05em; margin-top:3px }
.hk-panel__val{ font-family:var(--hk-font-mono); font-size:var(--hk-fs-xs); color:#fff; text-align:right; white-space:nowrap }
.hk-panel__val small{ color:var(--hk-slate-2) }
.hk-panel__foot{
  margin-top:var(--hk-space-4); padding-top:var(--hk-space-4);
  border-top:1px solid var(--hk-line-dark);
  display:flex; align-items:center; justify-content:space-between; gap:var(--hk-space-3);
  font-family:var(--hk-font-mono); font-size:.6875rem; color:var(--hk-slate-2); letter-spacing:.08em;
}

/* Entrance: panel rows arrive in sequence */
@media (prefers-reduced-motion:no-preference){
  .hk-panel__row{ animation:row-in .5s var(--hk-ease) backwards }
  .hk-panel__row:nth-child(2){ animation-delay:.22s }
  .hk-panel__row:nth-child(3){ animation-delay:.30s }
  .hk-panel__row:nth-child(4){ animation-delay:.38s }
  .hk-panel__row:nth-child(5){ animation-delay:.46s }
  .hk-panel__row:nth-child(6){ animation-delay:.54s }
}
@keyframes row-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

@media (max-width:940px){
  .hk-hero .hk-wrap{ grid-template-columns:1fr }
  .hk-hero .hk-lead{ max-width:52ch }
}


/* ==========================================================================
   10  TRUST STRIP + MARQUEE
   ========================================================================== */

.hk-trust{ padding-block:clamp(40px, 5vw, 64px) }
.hk-trust__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--hk-space-5);
}
.hk-trust__item{ display:flex; gap:12px; align-items:flex-start }
.hk-trust__item svg{ width:20px; height:20px; color:var(--hk-verify); flex:none; margin-top:2px }
.hk-trust__item b{ display:block; font-family:var(--hk-font-display); font-size:var(--hk-fs-sm); font-weight:600 }
.hk-trust__item span{ display:block; font-size:var(--hk-fs-xs); color:var(--hk-fg-muted); margin-top:2px }

.hk-marquee{
  margin-top:clamp(32px, 4vw, 48px);
  padding-top:var(--hk-space-6);
  border-top:1px solid var(--hk-hairline);
  position:relative;
}
.hk-marquee__label{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-fg-muted); margin-bottom:var(--hk-space-4);
}
/* Only the moving track is masked — the label must stay fully opaque, so it
   lives outside this element. */
.hk-marquee__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hk-marquee__track{
  display:flex; align-items:center; gap:var(--hk-space-7);
  width:max-content;
}
.hk-marquee__item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--hk-font-display); font-weight:600; font-size:1.02rem;
  color:var(--hk-fg-muted); white-space:nowrap;
  transition:color var(--hk-dur-1) var(--hk-ease);
}
.hk-marquee__item svg{ width:20px; height:20px; opacity:.8 }
.hk-marquee:hover .hk-marquee__item{ color:var(--hk-fg) }

@media (prefers-reduced-motion:no-preference){
  .hk-marquee__track{ animation:marquee 38s linear infinite }
  .hk-marquee:hover .hk-marquee__track,
  .hk-marquee:focus-within .hk-marquee__track{ animation-play-state:paused }
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (max-width:940px){ .hk-trust__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .hk-trust__grid{ grid-template-columns:1fr } }


/* ==========================================================================
   11  PRODUCT SECTIONS (bento + spec grid)
   ========================================================================== */

.hk-bento{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--hk-space-5);
}
.hk-bento__feature{ grid-column:span 2 }

.hk-product-feature{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px, 3vw, 40px);
  align-items:start;
}
.hk-product-feature__body{ display:flex; flex-direction:column; height:100% }

/* Spec grid — the "data sheet" block inside the flagship card */
.hk-specs{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.hk-spec{
  background:var(--hk-paper);
  border:1px solid var(--hk-hairline);
  border-radius:var(--hk-r-sm);
  padding:13px 14px;
}
.hk-section--ink .hk-spec{ background:var(--hk-ink-3); border-color:var(--hk-line-dark) }
.hk-spec__k{
  font-family:var(--hk-font-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hk-fg-muted);
}
.hk-spec__v{ font-family:var(--hk-font-display); font-weight:700; font-size:1.02rem; margin-top:4px }

/* Feature bullets */
.hk-feature-list{ display:grid; gap:12px; margin-top:var(--hk-space-5) }
.hk-feature-list li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--hk-fs-sm); color:var(--hk-fg-muted) }
.hk-feature-list svg{ width:17px; height:17px; color:var(--hk-verify); flex:none; margin-top:3px }
.hk-section--ink .hk-feature-list svg{ color:var(--hk-verify) }

@media (max-width:1040px){
  .hk-bento{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .hk-bento__feature{ grid-column:span 2 }
}
@media (max-width:820px){
  .hk-product-feature{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .hk-bento{ grid-template-columns:1fr }
  .hk-bento__feature{ grid-column:auto }
}


/* ==========================================================================
   12  AI LAB PANEL
   ========================================================================== */

.hk-lab{
  background:var(--hk-ink);
  border:1px solid var(--hk-line-dark);
  border-radius:var(--hk-r-xl);
  padding:var(--hk-space-5);
  box-shadow:var(--hk-shadow-3);
  color:#fff;
}
.hk-lab__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--hk-space-4);
  padding-bottom:var(--hk-space-4); border-bottom:1px solid var(--hk-line-dark);
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hk-slate-2);
}
.hk-lab__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:var(--hk-space-4) }
.hk-lab__tool{
  display:flex; align-items:center; gap:11px;
  background:var(--hk-ink-2); border:1px solid var(--hk-line-dark);
  border-radius:var(--hk-r-sm); padding:13px 14px;
  font-size:var(--hk-fs-xs); color:#D7DCE8;
  transition:border-color var(--hk-dur-1) var(--hk-ease), transform var(--hk-dur-1) var(--hk-ease), background var(--hk-dur-1) var(--hk-ease);
}
.hk-lab__tool:hover{ border-color:var(--hk-primary-lift); background:var(--hk-ink-3); transform:translateY(-2px); color:#fff }
.hk-lab__tool svg{ width:17px; height:17px; color:var(--hk-primary-lift); flex:none }
.hk-lab__foot{
  margin-top:var(--hk-space-4); padding-top:var(--hk-space-4);
  border-top:1px solid var(--hk-line-dark);
  font-family:var(--hk-font-mono); font-size:.6875rem; color:var(--hk-slate-2);
  text-align:center; letter-spacing:.06em;
}
@media (max-width:520px){ .hk-lab__grid{ grid-template-columns:1fr } }


/* ==========================================================================
   13  CHROME EXTENSION MOCK
   ========================================================================== */

.hk-browser{
  background:var(--hk-card);
  border:1px solid var(--hk-line);
  border-radius:var(--hk-r-lg);
  box-shadow:var(--hk-shadow-2);
  overflow:hidden;
}
.hk-browser__bar{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--hk-paper);
  border-bottom:1px solid var(--hk-line);
}
.hk-browser__dots{ display:flex; gap:6px; flex:none }
.hk-browser__dots i{ width:10px; height:10px; border-radius:50%; display:block }
.hk-browser__dots i:nth-child(1){ background:#FF6A5D }
.hk-browser__dots i:nth-child(2){ background:#FEBC2E }
.hk-browser__dots i:nth-child(3){ background:#28C840 }
.hk-browser__url{
  flex:1 1 auto;
  background:var(--hk-card); border:1px solid var(--hk-line); border-radius:var(--hk-r-pill);
  padding:6px 14px;
  font-family:var(--hk-font-mono); font-size:.6875rem; color:var(--hk-slate);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hk-browser__ext{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px; flex:none;
  background:linear-gradient(135deg, var(--hk-primary), var(--hk-primary-lift));
  color:#fff; font-family:var(--hk-font-display); font-weight:700; font-size:.75rem;
  box-shadow:0 0 0 3px rgba(61,59,243,.16);
}
.hk-browser__body{ position:relative; padding:var(--hk-space-5); min-height:230px; background:var(--hk-card) }
.hk-browser__skeleton{ display:grid; gap:10px; opacity:.5 }
.hk-browser__skeleton i{ display:block; height:11px; border-radius:var(--hk-r-pill); background:var(--hk-line) }
.hk-browser__skeleton i:nth-child(1){ width:52% }
.hk-browser__skeleton i:nth-child(2){ width:88% }
.hk-browser__skeleton i:nth-child(3){ width:74% }
.hk-browser__skeleton i:nth-child(4){ width:63% }
.hk-browser__skeleton i:nth-child(5){ width:80% }

/* The extension popover floating over the page */
.hk-popover{
  position:absolute; top:16px; right:16px;
  width:min(252px, 72%);
  background:var(--hk-card);
  border:1px solid var(--hk-line);
  border-radius:var(--hk-r);
  box-shadow:var(--hk-shadow-2);
  padding:var(--hk-space-4);
}
.hk-popover__head{
  display:flex; align-items:center; gap:9px;
  font-family:var(--hk-font-display); font-weight:700; font-size:var(--hk-fs-sm);
  padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--hk-line);
}
.hk-popover__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; font-size:var(--hk-fs-xs); color:var(--hk-slate);
}
.hk-popover__row b{ color:var(--hk-ink); font-weight:600 }
.hk-switch{
  width:34px; height:20px; border-radius:var(--hk-r-pill);
  background:var(--hk-verify); position:relative; flex:none;
}
.hk-switch::after{
  content:""; position:absolute; top:2px; right:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
}
.hk-switch--off{ background:var(--hk-line) }
.hk-switch--off::after{ right:auto; left:2px }

@media (prefers-reduced-motion:no-preference){
  .hk-popover{ animation:float 5.5s ease-in-out infinite }
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }


/* ==========================================================================
   14  DEVELOPER TOOLS TERMINAL
   ========================================================================== */

.hk-terminal{
  background:var(--hk-ink-2);
  border:1px solid var(--hk-line-dark);
  border-radius:var(--hk-r-lg);
  padding:var(--hk-space-5);
  box-shadow:var(--hk-shadow-dark);
}
.hk-terminal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--hk-space-4);
  padding-bottom:14px; border-bottom:1px solid var(--hk-line-dark);
}
.hk-terminal__url{ font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); color:var(--hk-slate-2) }
.hk-terminal__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:var(--hk-space-4) }
.hk-terminal__tool{
  display:flex; align-items:center; gap:10px;
  background:var(--hk-ink-3); border:1px solid var(--hk-line-dark);
  border-radius:9px; padding:11px 12px;
  font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); color:#D7DCE8;
  transition:border-color var(--hk-dur-1) var(--hk-ease), transform var(--hk-dur-1) var(--hk-ease), color var(--hk-dur-1) var(--hk-ease);
}
.hk-terminal__tool:hover{ border-color:var(--hk-primary-lift); color:#fff; transform:translateY(-2px) }
.hk-terminal__tool b{ color:var(--hk-primary-lift); font-weight:700; min-width:24px }
.hk-terminal__more{
  margin-top:14px; text-align:center;
  font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); color:var(--hk-slate-2);
}
@media (max-width:520px){ .hk-terminal__grid{ grid-template-columns:1fr } }


/* ==========================================================================
   15  AUTOMATION FLOW
   ========================================================================== */

.hk-flow{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--hk-space-5);
  position:relative;
}
.hk-flow__step{
  position:relative;
  background:var(--hk-card);
  border:1px solid var(--hk-line);
  border-radius:var(--hk-r-lg);
  padding:var(--hk-space-5);
}
/* Dashed connector between steps */
.hk-flow__step:not(:last-child)::after{
  content:"";
  position:absolute; top:50%; right:calc(var(--hk-space-5) * -1 - 1px);
  width:var(--hk-space-5); height:2px;
  background-image:linear-gradient(90deg, var(--hk-primary) 60%, transparent 0);
  background-size:8px 2px;
  opacity:.55;
}
.hk-flow__num{
  font-family:var(--hk-font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-primary); margin-bottom:var(--hk-space-3);
}
.hk-flow__step h3{ font-size:1.05rem; margin-bottom:9px }
.hk-flow__step p{ font-size:var(--hk-fs-sm); color:var(--hk-slate) }

@media (prefers-reduced-motion:no-preference){
  .hk-flow__step:not(:last-child)::after{ animation:dash 1.2s linear infinite }
}
@keyframes dash{ from{ background-position:0 0 } to{ background-position:8px 0 } }

@media (max-width:820px){
  .hk-flow{ grid-template-columns:1fr }
  .hk-flow__step:not(:last-child)::after{ display:none }
}


/* ==========================================================================
   16  GALLERY + LIGHTBOX
   ========================================================================== */

.hk-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--hk-space-6) }
.hk-filter{
  border:1px solid var(--hk-hairline); background:var(--hk-surface);
  border-radius:var(--hk-r-pill);
  padding:9px 16px; min-height:40px;
  font-family:var(--hk-font-display); font-weight:600; font-size:var(--hk-fs-xs);
  color:var(--hk-fg-muted);
  transition:all var(--hk-dur-1) var(--hk-ease);
}
.hk-filter:hover{ border-color:var(--hk-primary); color:var(--hk-primary) }
.hk-filter[aria-pressed="true"]{ background:var(--hk-ink); border-color:var(--hk-ink); color:#fff }

.hk-gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--hk-space-4);
}
.hk-gallery__item{
  position:relative; display:block; color:var(--hk-fg);
  border:1px solid var(--hk-hairline);
  border-radius:var(--hk-r);
  overflow:hidden;
  background:var(--hk-card);
  padding:0;
  text-align:left;
  transition:transform var(--hk-dur-2) var(--hk-ease), box-shadow var(--hk-dur-2) var(--hk-ease), border-color var(--hk-dur-2) var(--hk-ease);
}
.hk-gallery__item[hidden]{ display:none }
.hk-gallery__item img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.hk-gallery__item:hover{ transform:translateY(-4px); box-shadow:var(--hk-shadow-2); border-color:rgba(61,59,243,.32) }
.hk-gallery__cap{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; border-top:1px solid var(--hk-hairline);
}
.hk-gallery__cap strong{ font-family:var(--hk-font-display); font-size:var(--hk-fs-sm); font-weight:600; display:block }
.hk-gallery__cap span{ font-family:var(--hk-font-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hk-fg-muted) }
.hk-gallery__zoom{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:8px; background:var(--hk-paper); color:var(--hk-primary);
}
.hk-gallery__zoom svg{ width:15px; height:15px }

/* Lightbox */
.hk-lightbox{
  --hk-fg:#FFFFFF;
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:var(--hk-gutter);
  background:rgba(10,15,28,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity var(--hk-dur-2) var(--hk-ease), visibility 0s linear var(--hk-dur-2);
}
.hk-lightbox.hk-is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--hk-dur-2) var(--hk-ease), visibility 0s;
}
.hk-lightbox__inner{
  position:relative;
  width:min(1000px, 100%);
  transform:scale(.96);
  transition:transform var(--hk-dur-3) var(--hk-ease-back);
}
.hk-lightbox.hk-is-open .hk-lightbox__inner{ transform:scale(1) }
.hk-lightbox__img{
  width:100%; border-radius:var(--hk-r-lg);
  border:1px solid var(--hk-line-dark);
  background:var(--hk-ink-2);
}
.hk-lightbox__meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); flex-wrap:wrap;
  margin-top:var(--hk-space-4); color:#fff;
}
.hk-lightbox__meta strong{ font-family:var(--hk-font-display); font-size:1.05rem }
.hk-lightbox__meta span{ font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); color:var(--hk-slate-2) }
.hk-lightbox__btn{
  display:grid; place-items:center;
  width:48px; height:48px;
  border:1px solid rgba(255,255,255,.22); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  transition:background var(--hk-dur-1) var(--hk-ease), border-color var(--hk-dur-1) var(--hk-ease);
}
.hk-lightbox__btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5) }
.hk-lightbox__btn svg{ width:20px; height:20px }
.hk-lightbox__close{ position:absolute; top:-60px; right:0 }
.hk-lightbox__prev{ position:absolute; top:50%; left:-64px; transform:translateY(-50%) }
.hk-lightbox__next{ position:absolute; top:50%; right:-64px; transform:translateY(-50%) }

@media (max-width:1140px){
  .hk-lightbox__prev{ left:8px }
  .hk-lightbox__next{ right:8px }
  .hk-lightbox__close{ top:-56px }
}
@media (max-width:940px){ .hk-gallery{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:600px){ .hk-gallery{ grid-template-columns:1fr } }


/* ==========================================================================
   17  VIDEO FACADE
   ========================================================================== */

.hk-video{
  position:relative;
  border-radius:var(--hk-r-xl);
  overflow:hidden;
  border:1px solid var(--hk-line-dark);
  background:var(--hk-ink-2);
  aspect-ratio:16/9;
  box-shadow:var(--hk-shadow-3);
}
.hk-video__facade{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:grid; place-items:center;
  border:0; padding:0; background:none;
}
.hk-video__poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--hk-dur-3) var(--hk-ease), filter var(--hk-dur-3) var(--hk-ease);
}
.hk-video__facade:hover .hk-video__poster{ transform:scale(1.03); filter:brightness(.88) }
.hk-video__play{
  position:relative;
  display:grid; place-items:center;
  width:84px; height:84px; border-radius:50%;
  background:var(--hk-card); color:var(--hk-primary);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
  transition:transform var(--hk-dur-2) var(--hk-ease-back);
}
.hk-video__facade:hover .hk-video__play{ transform:scale(1.08) }
.hk-video__play svg{ width:28px; height:28px; margin-left:4px }
.hk-video__label{
  position:absolute; left:var(--hk-space-5); bottom:var(--hk-space-5);
  display:flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:var(--hk-r-pill);
  background:rgba(10,15,28,.72); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--hk-font-mono); font-size:var(--hk-fs-mono); letter-spacing:.06em;
}
.hk-video iframe, .hk-video video{ position:absolute; inset:0; width:100%; height:100%; border:0 }

@media (prefers-reduced-motion:no-preference){
  .hk-video__play::before{
    content:""; position:absolute; inset:-6px;
    border-radius:50%; border:2px solid rgba(255,255,255,.5);
    animation:ripple 2.6s var(--hk-ease) infinite;
  }
}
@keyframes ripple{
  0%{ transform:scale(1); opacity:.7 }
  100%{ transform:scale(1.35); opacity:0 }
}


/* ==========================================================================
   18  SERVICES  (secondary block — see data-optional="services")
   ========================================================================== */

.hk-services{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hk-space-5) }
.hk-service{
  display:flex; gap:var(--hk-space-4);
  padding:var(--hk-space-5);
  border:1px dashed var(--hk-line);
  border-radius:var(--hk-r-lg);
  background:var(--hk-surface);
  transition:border-color var(--hk-dur-2) var(--hk-ease), background var(--hk-dur-2) var(--hk-ease);
}
.hk-service:hover{ border-color:var(--hk-primary); background:var(--hk-paper) }
.hk-service h3{ font-size:1.05rem; margin-bottom:8px }
.hk-service p{ font-size:var(--hk-fs-sm); color:var(--hk-slate) }
.hk-service svg.hk-service__icon{ width:22px; height:22px; color:var(--hk-slate); flex:none; margin-top:3px }

.hk-services-note{
  margin-top:var(--hk-space-5);
  padding:var(--hk-space-4) var(--hk-space-5);
  border-left:3px solid var(--hk-accent);
  background:var(--hk-accent-wash);
  border-radius:0 var(--hk-r-sm) var(--hk-r-sm) 0;
  font-size:var(--hk-fs-sm); color:var(--hk-ink);
}
@media (max-width:760px){ .hk-services{ grid-template-columns:1fr } }


/* ==========================================================================
   19  HOW IT WORKS
   ========================================================================== */

.hk-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--hk-space-5); position:relative }
.hk-step{ position:relative; padding-top:var(--hk-space-6) }
.hk-step::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--hk-hairline);
}
.hk-step::after{
  content:""; position:absolute; top:0; left:0;
  width:34%; height:2px; background:var(--hk-primary);
}
.hk-step__num{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-primary); margin-bottom:var(--hk-space-3);
}
.hk-step h3{ font-size:1.15rem; margin-bottom:10px }
.hk-step p{ font-size:var(--hk-fs-sm); color:var(--hk-fg-muted) }

.hk-stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--hk-space-5);
  margin-top:clamp(40px, 5vw, 64px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--hk-hairline);
}
.hk-stat__v{
  font-family:var(--hk-font-display); font-weight:700;
  font-size:clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  letter-spacing:-.03em; line-height:1;
}
.hk-stat__v .hk-u{ color:var(--hk-primary); }
.hk-stat__l{ margin-top:8px; font-size:var(--hk-fs-xs); color:var(--hk-fg-muted) }

@media (max-width:820px){ .hk-steps{ grid-template-columns:1fr } .hk-stats{ grid-template-columns:repeat(2, minmax(0,1fr)) } }


/* ==========================================================================
   20  COMPANY & SECURITY
   ========================================================================== */

.hk-compliance{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px, 4vw, 56px); align-items:start }
.hk-checklist{ display:grid; gap:var(--hk-space-4) }
.hk-checklist li{ display:flex; gap:13px; align-items:flex-start }
.hk-checklist svg{ width:20px; height:20px; color:var(--hk-verify); flex:none; margin-top:2px }
.hk-checklist b{ display:block; font-family:var(--hk-font-display); font-size:var(--hk-fs-sm); font-weight:600 }
.hk-checklist small{ display:block; font-size:var(--hk-fs-xs); color:var(--hk-fg-muted); margin-top:3px; line-height:1.6 }

.hk-entity{
  background:var(--hk-card);
  border:1px solid var(--hk-line);
  border-radius:var(--hk-r-lg);
  padding:var(--hk-space-5);
  box-shadow:var(--hk-shadow-1);
}
.hk-entity__label{
  font-family:var(--hk-font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hk-slate); margin-bottom:var(--hk-space-4);
}
.hk-entity__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--hk-space-4);
  padding:11px 0; border-bottom:1px solid var(--hk-line);
  font-size:var(--hk-fs-sm);
}
.hk-entity__row:last-of-type{ border-bottom:0 }
.hk-entity__row dt{ color:var(--hk-slate); flex:none }
.hk-entity__row dd{ margin:0; font-weight:600; text-align:right; font-family:var(--hk-font-mono); font-size:var(--hk-fs-xs) }
.hk-entity__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--hk-space-5) }

@media (max-width:900px){ .hk-compliance{ grid-template-columns:1fr } }


/* ==========================================================================
   21  TESTIMONIALS
   ========================================================================== */

.hk-quotes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--hk-space-5) }
.hk-quote{
  background:var(--hk-card); border:1px solid var(--hk-line);
  border-radius:var(--hk-r-lg); padding:var(--hk-space-5);
  display:flex; flex-direction:column; gap:var(--hk-space-4);
}
.hk-quote blockquote{ margin:0; font-size:var(--hk-fs-sm); color:var(--hk-ink); flex:1 1 auto }
.hk-quote figcaption{ display:flex; align-items:center; gap:12px; padding-top:var(--hk-space-4); border-top:1px solid var(--hk-line) }
.hk-quote__avatar{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:50%; background:var(--hk-primary-wash); color:var(--hk-primary);
  font-family:var(--hk-font-display); font-weight:700; font-size:var(--hk-fs-sm);
}
.hk-quote__who b{ display:block; font-size:var(--hk-fs-sm); font-family:var(--hk-font-display) }
.hk-quote__who span{ display:block; font-size:var(--hk-fs-xs); color:var(--hk-slate) }

/* Empty state shown until real quotes exist */
.hk-quotes-empty{
  border:1px dashed var(--hk-line); border-radius:var(--hk-r-lg);
  padding:clamp(32px, 5vw, 56px);
  text-align:center; background:var(--hk-card);
}
.hk-quotes-empty p{ color:var(--hk-slate); max-width:52ch; margin-inline:auto; font-size:var(--hk-fs-sm) }

@media (max-width:900px){ .hk-quotes{ grid-template-columns:1fr } }


/* ==========================================================================
   22  FINAL CTA
   ========================================================================== */

.hk-final{
  position:relative;
  border-radius:var(--hk-r-xl);
  padding:clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(ellipse 90% 130% at 12% 0%, rgba(110,107,255,.5), transparent 62%),
    radial-gradient(ellipse 70% 120% at 92% 100%, rgba(255,106,61,.34), transparent 60%),
    var(--hk-ink-2);
  border:1px solid var(--hk-line-dark);
  overflow:hidden;
  text-align:center;
  color:#fff;
}
.hk-final h2{ font-size:var(--hk-fs-h2); max-width:20ch; margin-inline:auto }
.hk-final p{ color:var(--hk-slate-2); max-width:56ch; margin:var(--hk-space-4) auto 0; font-size:var(--hk-fs-lead) }
.hk-final__cta{ display:flex; gap:var(--hk-space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--hk-space-6) }


/* ==========================================================================
   23  FOOTER
   ========================================================================== */

.hk-site-footer{
  --hk-fg:#FFFFFF; --hk-fg-muted:var(--hk-slate-2); --hk-hairline:var(--hk-line-dark);
  background:var(--hk-ink); color:var(--hk-slate-2);
  padding-block:clamp(56px, 6vw, 80px) var(--hk-space-6);
}
.hk-site-footer .hk-logo{ color:#fff }
.hk-footer__cols{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap:clamp(28px, 4vw, 56px);
}
.hk-footer__about{ margin-top:var(--hk-space-4); font-size:var(--hk-fs-sm); max-width:38ch }
.hk-footer__contact{ margin-top:var(--hk-space-5); display:grid; gap:9px; font-size:var(--hk-fs-sm) }
.hk-footer__contact a{ display:inline-flex; align-items:center; gap:9px; color:var(--hk-slate-2) }
.hk-footer__contact a:hover{ color:#fff }
.hk-footer__contact svg{ width:16px; height:16px; color:var(--hk-primary-lift); flex:none }
.hk-site-footer .hk-footer__cols h4{
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--hk-space-4); font-weight:500;
}
.hk-footer__cols ul{ display:grid; gap:11px; font-size:var(--hk-fs-sm) }
.hk-footer__cols ul a{ color:var(--hk-slate-2); transition:color var(--hk-dur-1) var(--hk-ease) }
.hk-footer__cols ul a:hover{ color:#fff }
.hk-footer__legal{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hk-space-4); flex-wrap:wrap;
  margin-top:clamp(40px, 5vw, 64px); padding-top:var(--hk-space-5);
  border-top:1px solid var(--hk-line-dark);
  font-family:var(--hk-font-mono); font-size:.6875rem; letter-spacing:.04em;
}
.hk-footer__addr{ font-style:normal }

@media (max-width:900px){ .hk-footer__cols{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .hk-footer__cols{ grid-template-columns:1fr } }


/* ==========================================================================
   24  REDUCED MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hk-reveal{ opacity:1 !important; transform:none !important }
  .hk-panel{ transform:none !important }
}

@media print{
  .hk-site-header, .hk-topbar, .hk-drawer, .hk-drawer__scrim, .hk-lightbox, .hk-video, .hk-marquee{ display:none !important }
  .hk-section{ padding-block:24px; break-inside:avoid }
  .hk-reveal{ opacity:1 !important; transform:none !important }
  a::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555 }
}