@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ==========================================================================
   CLIPAI-LONG — Design System
   1  Tokens
   2  Reset & base
   3  Layout primitives (breakout grid, section rhythm)
   4  Typography primitives
   5  Components
   6  Motion & focus
   7  Breakpoints — mobile first, single set: 650 / 900 / 1100
   ========================================================================== */

/* ==========================================================================
   1  TOKENS
   ========================================================================== */
:root{
  /* --- Brand ------------------------------------------------------------ */
  --ink:#101512;
  --paper:#f1f0e9;
  --lime:#d8ff43;
  --lime-hover:#e7ff7a;
  --cyan:#8fe6e0;

  /* --- Surfaces --------------------------------------------------------- */
  --surface-page:var(--ink);
  --surface-band:#182019;        /* full-bleed band on page */
  --surface-card:#121a15;        /* card inside a band */
  --surface-card-raised:#1c291d; /* card directly on page */
  --surface-inset:#101811;
  --surface-overlay:#17221a;
  --surface-footer:#0b100d;
  --surface-header:rgba(16,21,18,.82);
  --surface-scrim:rgba(3,7,5,.76);

  /* --- Text (contrast measured against --ink #101512) ------------------- */
  --text-primary:#f1f0e9;        /* 16.1:1 */
  --text-secondary:#b9c4b8;      /* 10.2:1 */
  --text-tertiary:#9aa89a;       /*  7.4:1 */
  --text-muted:#7d8b7f;          /*  5.2:1 — lowest tier, still AA at body size */
  --text-accent:var(--lime);     /* 16.1:1 */

  /* --- Lines ------------------------------------------------------------ */
  --line:rgba(230,240,222,.16);
  --line-soft:rgba(230,240,222,.10);
  --line-lime:rgba(216,255,67,.45);
  --line-lime-soft:rgba(216,255,67,.25);
  --line-lime-strong:rgba(216,255,67,.6);
  --line-ink:rgba(16,21,18,.35);

  /* --- Spacing — 8pt grid ----------------------------------------------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;
  --space-32:128px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max:1240px;
  --gutter:clamp(var(--space-4),3vw,var(--space-6));           /* 16 → 24 */
  --container-pad:max(var(--gutter),calc((100% - var(--container-max)) / 2));
  --layout-cols:
    [full-start] minmax(var(--gutter),1fr)
    [content-start] min(100% - (var(--gutter) * 2),var(--container-max)) [content-end]
    minmax(var(--gutter),1fr) [full-end];
  --header-h:var(--space-16);                                  /* 64 → 80 at md */
  --section-py:clamp(var(--space-16),5.5vw,var(--space-24));   /* 64 → 96 */
  --stack-title:clamp(var(--space-8),4vw,var(--space-16));     /* title → content */
  --gap-card:var(--space-3);
  --gap-column:clamp(var(--space-8),5vw,var(--space-16));      /* 2-col section split */

  /* --- Sizes ------------------------------------------------------------ */
  --size-tap:44px;               /* minimum touch target */
  --size-icon-sm:var(--space-6);
  --size-icon-md:40px;
  --size-icon-lg:var(--space-12);
  --card-h:20rem;                                              /* 320px */
  --card-h-tall:calc(var(--card-h) * 2 + var(--gap-card));     /* 652px */
  --ratio-media:16 / 9;

  /* --- Type ------------------------------------------------------------- */
  /* Pretendard renders small for its em size, so Korean body copy needs 17px
     (KRDS sets its standard body at 17px and stops the scale at 13px — nothing
     smaller is used anywhere). Tight ~1.13 steps through the reading sizes,
     wider ~1.26 steps for display, keeping each level 1.25–1.5x the one below. */
  --font-size-xs:0.8125rem;      /* 13 — micro labels; hard floor */
  --font-size-sm:0.9375rem;      /* 15 — UI, meta, card body */
  --font-size-md:1.0625rem;      /* 17 — body default */
  --font-size-lg:1.1875rem;      /* 19 — lead, small card title */
  --font-size-xl:1.5rem;         /* 24 — card title */
  --font-size-2xl:1.875rem;      /* 30 */
  --font-size-3xl:2.375rem;      /* 38 */
  --font-size-4xl:3rem;          /* 48 */
  --font-size-5xl:4rem;          /* 64 */
  /* fluid display steps: scale step at 390px → scale step at 1440px */
  --font-size-display-1:clamp(var(--font-size-3xl),1.771rem + 2.48vw,var(--font-size-5xl)); /* 38 → 64 */
  --font-size-display-2:clamp(var(--font-size-2xl),1.457rem + 1.71vw,var(--font-size-4xl)); /* 30 → 48 */
  --font-size-display-3:clamp(var(--font-size-xl),1.361rem + 0.57vw,var(--font-size-2xl));  /* 24 → 30 */

  --leading-tight:1.1;           /* display */
  --leading-snug:1.2;            /* headings */
  --leading-normal:1.5;          /* ui */
  --leading-relaxed:1.6;         /* body */
  --leading-loose:1.7;           /* long body */

  --tracking-tighter:-.06em;
  --tracking-tight:-.04em;
  --tracking-normal:.06em;
  --tracking-wide:.1em;
  --tracking-wider:.16em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  --measure:62ch;                /* long-form body, ~45–75 chars */
  --measure-narrow:44ch;         /* card & caption copy */

  /* --- Radius ----------------------------------------------------------- */
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;
  --radius-round:50%;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm:0 4px 12px rgba(0,0,0,.24);
  --shadow-md:0 12px 32px rgba(0,0,0,.28);
  --shadow-lg:0 24px 64px rgba(0,0,0,.45);
  --shadow-offset:var(--space-6) var(--space-6) 0 rgba(216,255,67,.07);
  --glow-lime:0 0 var(--space-3) rgba(216,255,67,.55);

  /* --- Z-index ---------------------------------------------------------- */
  --z-base:1;
  --z-raised:2;
  --z-header:100;
  --z-modal:200;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --duration-fast:.2s;
  --duration-slow:.55s;
  --duration-reveal:.7s;

  /* --- Breakpoints (reference; media queries use the literals) ---------- */
  --bp-sm:650px;
  --bp-md:900px;
  --bp-lg:1100px;
}

/* ==========================================================================
   2  RESET & BASE
   ========================================================================== */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:clip;                                   /* guards any breakout overshoot */
  scroll-padding-top:var(--header-h);                /* clears the fixed header */
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:Pretendard,system-ui,sans-serif;
  font-size:var(--font-size-md);
  line-height:var(--leading-normal);
  word-break:keep-all;                               /* Korean line breaking */
}

img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
/* scroll-padding-top above already clears the header; this only adds breathing
   room, so the two must not both carry the header height or they stack. */
:where([id]){scroll-margin-top:var(--space-4)}

/* ==========================================================================
   3  LAYOUT PRIMITIVES
   Single container rule. `main` and the footer are breakout grids: every child
   sits in the centred `content` column by default, `.band`/`.bleed` opt into
   the `full` column. No 100vw, no negative margins, no scrollbar overflow.
   ========================================================================== */
main,
.site-footer{
  display:grid;
  grid-template-columns:var(--layout-cols);
}
main > *,
.site-footer > *{grid-column:content;min-width:0}

/* full-bleed background, content re-centred on the same axis */
.band{
  grid-column:full;
  display:grid;
  grid-template-columns:var(--layout-cols);
}
.band > *{grid-column:content;min-width:0}

/* full-bleed, edge to edge */
.bleed{grid-column:full}

/* vertical rhythm */
main > section{padding-block:var(--section-py)}

/* ==========================================================================
   4  TYPOGRAPHY PRIMITIVES
   ========================================================================== */
h1,h2,h3{margin:0;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal;color:var(--text-accent)}   /* accent phrase inside headings */

.hero h1,
.final-cta h2{
  font-size:var(--font-size-display-1);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tighter);
  font-weight:var(--weight-semibold);
}

.section-title h2,
.showcase-stills-heading h3,
.platform-card h2{
  font-size:var(--font-size-display-2);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tighter);
  font-weight:var(--weight-semibold);
}

.purchase-dialog h2{
  font-size:var(--font-size-display-3);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tighter);
  font-weight:var(--weight-semibold);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin:0 0 var(--space-6);
  color:var(--text-accent);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-black);
  letter-spacing:var(--tracking-wider);
}
.eyebrow i{display:inline-block;width:var(--space-6);height:1px;background:currentColor}

/* ==========================================================================
   5  COMPONENTS
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header{
  position:fixed;
  z-index:var(--z-header);
  inset:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  height:var(--header-h);
  padding-inline:var(--container-pad);   /* same axis as the content column */
  background:var(--surface-header);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}

.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand > span:last-child{min-width:0}
.brand-mark{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:var(--size-icon-md);
  height:var(--size-icon-md);
  border:1px solid var(--lime);
  border-radius:var(--radius-round);
  color:var(--text-accent);
  font-size:var(--font-size-lg);
  font-weight:var(--weight-black);
}
.brand b,
.brand small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.brand b{font-size:var(--font-size-sm);letter-spacing:var(--tracking-wide)}
.brand small{
  margin-top:var(--space-1);
  color:var(--text-muted);
  font-size:var(--font-size-xs);
  letter-spacing:var(--tracking-normal);
}
/* 13px is the scale floor, and at that size the tagline no longer fits beside
   the CTA and the menu button on a phone. Drop it in the header, keep it in
   the footer where there is room. */
.site-header .brand small{display:none}

.site-header nav{display:none}
.site-header nav.open{
  position:absolute;
  display:flex;
  left:var(--gutter);
  right:var(--gutter);
  top:100%;
  flex-direction:column;
  align-items:stretch;
  padding:var(--space-2);
  background:var(--surface-band);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.site-header nav a{
  display:flex;
  align-items:center;
  min-height:var(--size-tap);
  padding-inline:var(--space-3);
  color:var(--text-secondary);
  font-size:var(--font-size-sm);
  transition:color var(--duration-fast);
}
.site-header nav a:hover{color:var(--text-accent)}

.menu-toggle{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:var(--size-tap);
  height:var(--size-tap);
  margin-left:auto;
  background:none;
  border:0;
  font-size:var(--font-size-xl);
  cursor:pointer;
}

/* --- Buttons ------------------------------------------------------------ */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--space-12);
  padding-inline:var(--space-6);
  border-radius:var(--radius-xs);
  font-size:var(--font-size-md);   /* CTA sits a step above UI text */
  font-weight:var(--weight-bold);
  transition:transform var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);
}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--lime);color:var(--ink)}
.button-primary:hover{background:var(--lime-hover)}
.button-light{background:var(--paper);color:var(--ink)}

/* --- Hero --------------------------------------------------------------- */
.hero{
  display:grid;
  gap:var(--gap-column);
  align-items:center;
  padding-block:calc(var(--header-h) + var(--space-12)) var(--section-py);
}
.hero-lead{
  max-width:var(--measure);
  margin:var(--space-6) 0 0;
  color:var(--text-secondary);
  font-size:var(--font-size-lg);
  line-height:var(--leading-loose);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

.hero-visual{position:relative;min-height:calc(var(--space-32) * 3)}
.hero-image{
  position:absolute;
  inset:var(--space-8) 0 var(--space-6);
  width:100%;
  height:calc(100% - var(--space-8) - var(--space-6));
  object-fit:cover;
  border:1px solid var(--line-lime);
  box-shadow:var(--shadow-offset);
  transform:rotate(-2deg);
  filter:saturate(.82) contrast(1.05);
}

.float-card{
  position:absolute;
  z-index:var(--z-raised);
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:rgba(15,24,19,.9);
  border:1px solid var(--line-lime);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(14px);
}
.float-card small{color:var(--text-muted);font-size:var(--font-size-xs);letter-spacing:var(--tracking-wide)}
.float-card strong{font-size:var(--font-size-md);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
.float-card em{font-size:var(--font-size-xs)}
.card-script{left:0;top:13%}
.card-lock{display:none;right:0;top:36%}
.card-output{right:var(--space-4);bottom:6%}

/* --- Marquee ------------------------------------------------------------ */
.marquee{
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:var(--space-4);
  overflow:hidden;
  padding-block:var(--space-6);
  padding-inline:var(--gutter);
  border-block:1px solid var(--line);
  color:var(--text-muted);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);
}
.marquee i{color:var(--text-accent);font-style:normal;font-size:var(--font-size-md)}

/* --- Vision ------------------------------------------------------------- */
.vision{border-bottom:1px solid var(--line)}
.vision-grid{display:grid;gap:var(--gap-column);margin-top:var(--stack-title)}
.big-copy{
  max-width:var(--measure);
  margin:0;
  color:var(--text-tertiary);
  font-size:var(--font-size-md);
  line-height:var(--leading-loose);
  letter-spacing:var(--tracking-tight);
}
.big-copy strong{color:var(--text-primary);font-weight:var(--weight-medium)}

.stats{display:flex;flex-direction:column}
.stats div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
  padding-block:var(--space-6);
  border-top:1px solid var(--line);
  color:var(--text-tertiary);
  font-size:var(--font-size-sm);
}
.stats div:last-child{border-bottom:1px solid var(--line)}
.stats b{color:var(--text-accent);font-size:var(--font-size-xl);font-weight:var(--weight-medium)}

/* --- Features ----------------------------------------------------------- */
.features{background:var(--surface-band)}

.feature-heading{display:flex;flex-direction:column;gap:var(--space-6)}
.feature-heading > div{min-width:0}
.feature-heading > p{
  max-width:var(--measure-narrow);
  margin:0;
  color:var(--text-tertiary);
  font-size:var(--font-size-md);
  line-height:var(--leading-loose);
}
.feature-heading h2 span{white-space:nowrap}

.feature-grid{display:grid;gap:var(--gap-card);margin-top:var(--stack-title)}
.feature{
  position:relative;
  display:flex;
  min-height:var(--card-h);
  padding:var(--space-6);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-card);
  transition:border-color .25s,transform .25s;
}
.feature:hover{border-color:var(--line-lime-strong);transform:translateY(-4px)}
.feature-main{background:linear-gradient(150deg,#263b2c,#111a15 62%)}

.feature-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  filter:saturate(.95) contrast(1.04);
  transition:opacity .25s,transform .4s;
}
.feature:hover .feature-image{opacity:1;transform:scale(1.04)}
.feature-main .feature-image{opacity:.92}
.feature-main:hover .feature-image{opacity:1}

/* The card art is app screenshots full of their own small text, so the copy
   needs a base to sit on. Bottom-weighted, because the content is bottom-anchored. */
.feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(10,16,12,.96) 0%,rgba(10,16,12,.84) 32%,rgba(10,16,12,.38) 62%,rgba(10,16,12,.06) 100%);
  pointer-events:none;
}

.feature-content{
  position:relative;
  z-index:var(--z-base);
  display:flex;
  flex:1;
  flex-direction:column;
  gap:var(--space-3);
}
.index{
  position:absolute;
  right:var(--space-6);
  top:var(--space-6);
  color:var(--text-tertiary);
  font-size:var(--font-size-xs);
  letter-spacing:var(--tracking-wide);
}
.icon{
  display:grid;
  place-items:center;
  width:var(--size-icon-lg);
  height:var(--size-icon-lg);
  margin-bottom:auto;                 /* group gap > element gap (proximity) */
  border:1px solid var(--lime);
  border-radius:var(--radius-round);
  color:var(--text-accent);
  font-size:var(--font-size-xl);
}
.feature h3{font-size:var(--font-size-xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.feature p{
  max-width:var(--measure-narrow);
  margin:0;
  color:var(--text-tertiary);
  font-size:var(--font-size-sm);
  line-height:var(--leading-loose);
}
.feature a{margin-top:var(--space-3);color:var(--text-accent);font-size:var(--font-size-sm);font-weight:var(--weight-bold)}
.feature a span{margin-left:var(--space-2)}

.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.tags span{
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-lime-soft);
  color:var(--text-accent);
  font-size:var(--font-size-xs);
  letter-spacing:var(--tracking-wide);
}

/* --- App showcase ------------------------------------------------------- */
.showcase-intro{
  max-width:var(--measure);
  margin:var(--space-6) 0 0;
  color:var(--text-secondary);
  line-height:var(--leading-relaxed);
}
.product-demo{
  margin-top:var(--stack-title);
  overflow:hidden;
  border:1px solid var(--line-lime-soft);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
}
.demo-frame{position:relative;background:#07131a}
.demo-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:var(--size-tap);
  padding-inline:var(--space-4);
  border-bottom:1px solid var(--line);
  color:var(--text-muted);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);
}
.demo-topline span:first-child{display:flex;align-items:center;gap:var(--space-2)}
.demo-topline i{
  width:var(--space-2);
  height:var(--space-2);
  border-radius:var(--radius-round);
  background:var(--lime);
  box-shadow:var(--glow-lime);
}
.workflow-video{
  display:block;
  width:100%;
  aspect-ratio:var(--ratio-media);
  background:#07131a;
  object-fit:contain;
}
.demo-steps{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(10.5rem,55vw);
  margin:0;
  padding:0;
  overflow-x:auto;
  list-style:none;
  scrollbar-color:var(--lime) var(--surface-inset);
  scrollbar-width:thin;
}
.demo-steps li{min-width:0}
.demo-step{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-3);
  width:100%;
  min-height:5.75rem;
  padding:var(--space-4);
  text-align:left;
  border:0;
  border-right:1px solid var(--line-soft);
  background:transparent;
  cursor:pointer;
  transition:background var(--duration-fast),color var(--duration-fast);
}
.demo-step::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:transparent;
}
.demo-step > span:first-child{
  color:var(--text-muted);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);
}
.demo-step > span:last-child{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.demo-step strong{font-size:var(--font-size-sm);white-space:nowrap}
.demo-step small{color:var(--text-muted);font-size:var(--font-size-xs);line-height:var(--leading-normal)}
.demo-step:hover{background:rgba(216,255,67,.05)}
.demo-step.active{background:rgba(216,255,67,.08)}
.demo-step.active::before{background:var(--lime)}
.demo-step.active > span:first-child,
.demo-step.active strong{color:var(--text-accent)}

.showcase-stills{
  margin-top:var(--section-py);
  padding-top:var(--space-16);
  border-top:1px solid var(--line);
}
.showcase-stills-heading .eyebrow{margin-bottom:var(--space-4)}
.app-shot-grid{display:grid;gap:var(--gap-card);margin-top:var(--stack-title)}
.app-shot{
  display:flex;
  flex-direction:column;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-card);
}
.app-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--ratio-media);
  object-fit:cover;
  object-position:top;
}
.app-shot figcaption{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-4);
  color:var(--text-tertiary);
  font-size:var(--font-size-xs);
}
.app-shot figcaption b{
  color:var(--text-accent);
  font-size:var(--font-size-xs);
  letter-spacing:var(--tracking-wide);
  white-space:nowrap;
}
.app-shot figcaption span{text-align:right;white-space:nowrap}

/* --- Workflow rail ------------------------------------------------------ */
.workflow-viewport{overflow:hidden;margin-top:var(--stack-title)}
.workflow-track{
  display:flex;
  gap:var(--space-4);
  transition:transform var(--duration-slow) var(--ease-out);
  will-change:transform;
}
.workflow-card{
  flex:0 0 100%;
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-card-raised);
}
.workflow-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--ratio-media);
  object-fit:cover;
  object-position:top;
  filter:saturate(.82);
}
.workflow-card-copy{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.workflow-card-copy small{color:var(--text-accent);font-size:var(--font-size-xs);letter-spacing:var(--tracking-wider)}
.workflow-card-copy h3{font-size:var(--font-size-lg);line-height:var(--leading-snug)}
.workflow-card-copy p{
  max-width:var(--measure-narrow);
  margin:0;
  color:var(--text-tertiary);
  font-size:var(--font-size-sm);
  line-height:var(--leading-relaxed);
}

.workflow-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}
.workflow-arrow{
  display:grid;
  place-items:center;
  width:var(--size-tap);
  height:var(--size-tap);
  border:1px solid var(--line);
  border-radius:var(--radius-round);
  background:transparent;
  cursor:pointer;
  transition:border-color var(--duration-fast),color var(--duration-fast);
}
.workflow-arrow:hover:not(:disabled){border-color:var(--lime);color:var(--text-accent)}
.workflow-arrow:disabled{opacity:.35;cursor:default}

.workflow-dots{display:flex;align-items:center}
/* 44×44 hit area, 8px visual dot */
.workflow-dot{
  position:relative;
  width:var(--size-tap);
  height:var(--size-tap);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.workflow-dot::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--space-2);
  height:var(--space-2);
  transform:translate(-50%,-50%);
  border-radius:var(--radius-pill);
  background:#5d6a5c;                 /* 3.2:1 against page — non-text AA */
  transition:width var(--duration-fast),background var(--duration-fast);
}
.workflow-dot.active::before{width:var(--space-6);background:var(--lime)}

/* --- Platform ----------------------------------------------------------- */
.platform-card{
  display:grid;
  gap:var(--gap-column);
  align-items:center;
  padding:clamp(var(--space-8),5vw,var(--space-16));
  overflow:hidden;
  background:linear-gradient(130deg,#273b2e,#141d17 63%);
  border:1px solid var(--line-lime-soft);
}
.platform-card > div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.platform .eyebrow{margin:0}
.platform-card h2{line-height:var(--leading-tight)}
.platform-card p:not(.eyebrow){max-width:var(--measure);margin:0;color:var(--text-secondary);font-size:var(--font-size-md);line-height:var(--leading-relaxed)}

.orbit{position:relative;width:min(100%,22rem);aspect-ratio:6 / 5;margin-inline:auto}
.orbit img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid var(--line-lime);
  filter:saturate(.82);
  transform:rotate(3deg);
}
.orb-label{
  position:absolute;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--line-lime);
  border-radius:var(--radius-pill);
  background:rgba(15,24,19,.9);
  color:var(--lime);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-bold);
}
.orb-a{left:7%;top:22%}
.orb-b{right:3%;top:34%}
.orb-c{left:44%;bottom:2%}

/* --- Company ------------------------------------------------------------ */
.company{display:grid;gap:var(--gap-column)}
.company-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-6);
  max-width:var(--measure);
  color:var(--text-tertiary);
  font-size:var(--font-size-md);
  line-height:var(--leading-loose);
}
.company-copy p{margin:0}
.company-copy a{color:var(--text-accent);font-size:var(--font-size-sm);font-weight:var(--weight-bold)}

/* --- Final CTA ---------------------------------------------------------- */
.final-cta{text-align:center;background:linear-gradient(130deg,#273b2e,#141d17 63%)}
.final-cta .eyebrow{justify-content:center}
.final-cta h2{margin-bottom:var(--space-8)}
.final-cta .button{justify-self:center}   /* grid items are blockified */

/* --- Footer ------------------------------------------------------------- */
.site-footer{
  padding-block:var(--space-8) var(--space-6);
  background:var(--surface-footer);
  color:var(--text-tertiary);
}
.footer-brand{margin-bottom:var(--space-4)}

/* Single stack of business-info lines; on desktop the links and the copyright
   move into a second column aligned to rows 3 and 4. */
.footer-info{display:grid;gap:var(--space-2)}
.footer-line{
  margin:0;
  color:var(--text-tertiary);
  font-size:var(--font-size-xs);
  line-height:var(--leading-relaxed);
}
.footer-line .label{color:var(--text-secondary);font-weight:var(--weight-semibold)}
.footer-line .sep{margin-inline:var(--space-1);color:var(--text-muted)}
.footer-line a{transition:color var(--duration-fast)}
.footer-line a:hover{color:var(--text-accent)}

.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.footer-links a{
  color:var(--text-tertiary);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
  transition:color var(--duration-fast);
}
.footer-links a:hover{color:var(--text-accent)}

.footer-copyright{
  margin:0;
  color:var(--text-muted);
  font-size:var(--font-size-xs);
}

/* --- Purchase modal ----------------------------------------------------- */
.purchase-modal{
  position:fixed;
  z-index:var(--z-modal);
  inset:0;
  display:grid;
  place-items:center;
  padding:var(--space-6);
  overflow-y:auto;
  background:var(--surface-scrim);
  backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--duration-fast),visibility var(--duration-fast);
}
.purchase-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.purchase-dialog{
  position:relative;
  width:min(650px,100%);
  padding:var(--space-8);
  background:var(--surface-overlay);
  border:1px solid var(--line-lime);
  box-shadow:var(--shadow-lg);
  transform:translateY(var(--space-4));
  transition:transform var(--duration-fast);
}
.purchase-modal.open .purchase-dialog{transform:none}
.purchase-close{
  position:absolute;
  right:var(--space-2);
  top:var(--space-2);
  display:grid;
  place-items:center;
  width:var(--size-tap);
  height:var(--size-tap);
  border:0;
  background:none;
  color:var(--text-secondary);
  font-size:var(--font-size-xl);
  cursor:pointer;
}
.purchase-intro{
  max-width:var(--measure);
  margin:var(--space-4) 0 var(--space-8);
  color:var(--text-secondary);
  font-size:var(--font-size-md);
  line-height:var(--leading-loose);
}
.purchase-columns{display:grid;gap:var(--space-6);margin-bottom:var(--space-8)}
.purchase-columns > div{padding:var(--space-6);border:1px solid var(--line);background:var(--surface-inset)}
.purchase-columns h3{margin-bottom:var(--space-4);font-size:var(--font-size-lg)}
.purchase-columns ul{margin:0;padding-left:var(--space-4);color:var(--text-secondary);font-size:var(--font-size-sm);line-height:2}
.purchase-columns p{margin:0;color:var(--text-secondary);font-size:var(--font-size-sm);line-height:var(--leading-loose)}
.purchase-contact{display:block;margin-top:var(--space-3);color:var(--text-accent);font-size:var(--font-size-sm);font-weight:var(--weight-bold)}
.purchase-mail{width:100%;border:0;cursor:pointer}
.purchase-trigger{cursor:pointer}
.purchase-trigger.button,
.purchase-mail{background:var(--paper);color:var(--ink)}
.purchase-trigger.button:hover,
.purchase-mail:hover{background:var(--lime-hover)}

/* ==========================================================================
   6  MOTION & FOCUS
   ========================================================================== */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
/* reveal is opt-in: without motion preference the content is simply visible */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(var(--space-4));
    transition:opacity var(--duration-reveal) ease,transform var(--duration-reveal) ease;
  }
  .reveal.visible{opacity:1;transform:none}
  .delay-1{transition-delay:.12s}
  .delay-2{transition-delay:.22s}
  .delay-3{transition-delay:.32s}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .marquee,
  .marquee *{animation:none !important}   /* marquee never auto-scrolls */
  .workflow-track{transition:none}
  .button:hover,
  .feature:hover{transform:none}
  .feature:hover .feature-image{transform:none}
}

/* ==========================================================================
   7  BREAKPOINTS — mobile first
   650  two-column card grids, hero float card, larger body copy
   900  persistent nav, two-column sections, three-column feature grid
   1100 three-up workflow rail (matches script.js workflowVisibleCount)
   ========================================================================== */
@media (min-width:650px){
  .card-lock{display:flex}

  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-main{grid-row:span 2;min-height:var(--card-h-tall)}
  .feature-wide{grid-column:span 2}

  .app-shot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shot-large{grid-column:1 / -1}

  .workflow-card{flex-basis:calc((100% - var(--space-4)) / 2)}

  .purchase-dialog{padding:var(--space-12)}
  .purchase-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:900px){
  :root{--header-h:80px}

  .brand small{letter-spacing:var(--tracking-wide)}
  .site-header .brand small{display:block}

  .site-header nav{
    display:flex;
    align-items:center;
    gap:var(--space-6);
    margin-left:auto;
  }
  /* neutralise the mobile dropdown if the menu was left open across a resize */
  .site-header nav.open{
    position:static;
    inset:auto;
    flex-direction:row;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
  }
  .site-header{gap:var(--space-4)}
  .site-header nav a{padding-inline:0}
  .menu-toggle{display:none}

  .hero{grid-template-columns:1fr 1.03fr}
  .hero-visual{min-height:calc(var(--space-32) * 4)}
  .card-script{left:calc(var(--space-3) * -1)}
  .card-lock{right:calc(var(--space-3) * -1)}

  .vision{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    column-gap:var(--gap-column);
  }
  .vision > .section-title{grid-column:1;grid-row:1}
  .vision-grid{display:contents}
  .vision .big-copy{grid-column:1;grid-row:2;margin-top:var(--stack-title)}
  .vision .stats{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:end;
    justify-self:end;
    width:min(100%,24rem);
  }
  .vision .stats div{
    gap:var(--space-3);
    padding-block:var(--space-2);
    font-size:var(--font-size-xs);
  }
  .vision .stats b{font-size:var(--font-size-lg)}
  .company{grid-template-columns:1.15fr .85fr}
  .feature-heading{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--gap-column)}
  .feature-heading > div{flex:1 1 auto}
  .feature-heading > p{flex:0 1 var(--measure-narrow);margin-bottom:var(--space-1)}
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-wide{grid-column:span 2}

  .app-shot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-shot-large{grid-column:auto}

  .demo-steps{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}
  .demo-step{min-height:6.5rem;padding:var(--space-3)}
  .demo-step small{font-size:.75rem}

  .platform-card{grid-template-columns:1fr 1fr}

  .site-footer{padding-block:var(--space-12) var(--space-6)}
  .footer-info{grid-template-columns:1fr auto;column-gap:var(--space-8)}
  .footer-line{grid-column:1}
  .footer-links{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin-top:0}
  .footer-copyright{grid-column:2;grid-row:4;justify-self:end;align-self:center}
}

@media (min-width:1100px){
  .workflow-card{flex-basis:calc((100% - var(--space-4) * 2) / 3)}
}