/* ═══════════════════════════════════════════════════════════════════════
   variant-07/style.css  —  CHRONOS: Kinetic Type Magazine
   Light Theme · Warm Ivory + Saffron Amber + Forest Sage
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────────────── */
:root {
  /* Palette */
  --bg:       #FEFCF7;   /* Warm ivory */
  --bg-linen: #F4EFE6;   /* Warm linen */
  --text:     #111118;   /* Near-black blue-tint */
  --muted:    #6B6868;   /* Warm gray */
  --border:   rgba(17,17,24,.09);

  --amber:      #E5830A;
  --amber-dk:   #B8640A;
  --amber-lt:   rgba(229,131,10,.09);
  --sage:       #2C5F4A;
  --sage-lt:    rgba(44,95,74,.09);

  /* Typography */
  --sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:  Georgia, Cambria, "Times New Roman", Times, serif;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  clamp(12px,1.5vw,20px);
  --sp-md:  clamp(24px,3vw,40px);
  --sp-lg:  clamp(48px,6vw,80px);
  --sp-xl:  clamp(80px,10vw,128px);

  /* Radii */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-pill: 9999px;

  /* Shadows */
  --sh-sm:  0 2px 10px rgba(17,17,24,.06);
  --sh-md:  0 8px 28px rgba(17,17,24,.09);
  --sh-lg:  0 20px 52px rgba(17,17,24,.12);

  /* Transitions */
  --ease:   cubic-bezier(.16,1,.3,1);
  --t-fast: 200ms var(--ease);
  --t-base: 400ms var(--ease);
  --t-slow: 700ms var(--ease);

  /* Diagonal angle */
  --diag-skew: 4deg;
}

/* ── Reset & Base ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--bg); overflow-x:clip; }
body {
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.menu-open { overflow:hidden; }

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:1000;
  padding:10px 14px;
  border-radius:8px;
  background:var(--text);
  color:#fff;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus-visible { transform:translateY(0); }

:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline:3px solid var(--amber);
  outline-offset:3px;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--sans); cursor:pointer; }
::selection { background:var(--amber); color:#fff; }

/* ── Typography ─────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5 { line-height:1.1; letter-spacing:-0.03em; }
.serif { font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap {
  max-width:1480px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,48px);
}
.grid-halves { display:grid; grid-template-columns:1fr 1fr; }
.gap-xl { gap:var(--sp-lg); }
.items-center { align-items:center; }
.text-c { text-align:center; }
.flex-center { display:flex; justify-content:center; }
.mx-auto { margin-left:auto; margin-right:auto; display:block; }
.section-pad { padding:var(--sp-lg) 0; }

/* ── Shared Section Typography ──────────────────────────────────────── */
.section-eyebrow {
  display:inline-block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--amber);
  margin-bottom:12px;
}
.section-h2 {
  font-size:clamp(32px,4.5vw,60px);
  margin-bottom:16px;
}
.section-body {
  font-size:clamp(15px,1.5vw,18px);
  color:var(--muted);
  line-height:1.7;
}
.section-header { margin-bottom:var(--sp-md); }

/* ── Image Fallback Wrapper ─────────────────────────────────────────── */
.img-fw {
  position:relative;
  width:100%;
  height:100%;
  background:var(--bg-linen);
  overflow:hidden;
}
.img-fw img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.img-fw picture,
.kinetic-frame picture {
  display:block;
  width:100%;
  height:100%;
}
.img-fallback {
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg-linen);
  color:var(--muted);
  border:1px dashed var(--border);
  padding:16px;
  text-align:center;
}
.img-fallback span { font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.img-fallback small { font-size:10px; opacity:.65; margin-top:4px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:var(--r-pill);
  font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em;
  transition:var(--t-base);
  border:1.5px solid transparent;
}
.btn-pill.btn-lg { padding:16px 36px; font-size:15px; }

.btn-amber {
  background:var(--amber); color:#fff; border-color:var(--amber);
}
.btn-amber:hover { background:var(--amber-dk); border-color:var(--amber-dk); transform:translateY(-2px); box-shadow:0 8px 24px rgba(229,131,10,.25); }

.btn-outline {
  background:transparent; color:var(--text); border-color:currentColor;
}
.btn-outline:hover { background:var(--text); color:var(--bg); transform:translateY(-2px); }

.btn-ghost-text {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted);
  transition:var(--t-fast);
}
.btn-ghost-text:hover { color:var(--amber); }
.btn-ghost-text:hover svg { transform:translateX(4px); }
.btn-ghost-text svg { transition:transform var(--t-fast); }

.btn-danger { color:var(--danger)!important; border-color:var(--danger)!important; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(254,252,247,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  transition:box-shadow var(--t-fast);
}
.site-header.scrolled { box-shadow:var(--sh-sm); }
.hdr-wrap { display:flex; align-items:center; gap:24px; }

.brand {
  font-weight:900; font-size:22px; letter-spacing:-.05em;
  color:var(--text); flex-shrink:0;
}
.brand-slash { color:var(--amber); }
.brand-ai { color:var(--amber); }

.site-header .brand.brand-lockup {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  white-space:nowrap;
  line-height:1;
}
.site-header .brand-symbol {
  display:block;
  width:28px;
  height:28px;
  flex:0 0 28px;
}
.site-header .brand-wordmark {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  line-height:1;
}
.site-header .brand-name { color:var(--text); }
.site-header .brand-slash,
.site-header .brand-ai { color:var(--amber); }

.primary-nav { display:flex; gap:clamp(16px,2.5vw,36px); margin-left:auto; }
.nav-a {
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); transition:color var(--t-fast);
}
.nav-a:hover { color:var(--amber); }

.hdr-actions { display:flex; align-items:center; gap:12px; }

.lang-pill {
  background:none; border:1.5px solid var(--border);
  border-radius:var(--r-pill); padding:6px 14px;
  font-size:12px; font-weight:800;
  transition:var(--t-fast);
}
.lang-pill:hover { border-color:var(--text); }

.hamburger { display:none; background:none; border:none; color:var(--text); padding:4px; }
.hide-sm {}

/* ── Mobile Nav ─────────────────────────────────────────────────────── */
.mobile-nav-panel {
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  display:flex; flex-direction:column;
  justify-content:center; padding:48px;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.mobile-nav-panel[hidden] { display:none; }
.mobile-nav-panel.open { opacity:1; pointer-events:auto; }
.mn-close { position:absolute; top:24px; right:24px; background:none; border:none; color:var(--text); }
.mn-links { display:flex; flex-direction:column; gap:20px; margin-bottom:32px; }
.mn-a { font-size:clamp(28px,7vw,40px); font-weight:800; color:var(--text); font-family:var(--serif); }
.mn-a:hover { color:var(--amber); }
.mn-cta { display:grid; gap:12px; }

/* ── Hero Stage ─────────────────────────────────────────────────────── */
.hero-stage {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:var(--sp-lg);
  min-height:auto;
  padding:24px clamp(16px,3vw,48px) 40px;
  max-width:1480px; margin:0 auto;
}

.hero-eyebrow {
  display:inline-block;
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--amber);
  margin-bottom:20px;
}

.hero-h1 {
  font-size:clamp(52px,7vw,108px);
  line-height:1.0;
  margin-bottom:24px;
}
.h1-line { display:block; }
.h1-serif { font-family:var(--serif); font-weight:400; color:var(--amber); }

@media (min-width:1101px) {
  .hero-h1 {
    font-size:calc(clamp(52px,7vw,108px) - 19px);
  }
}

.hero-sub { font-size:clamp(16px,1.4vw,20px); color:var(--muted); max-width:480px; margin-bottom:36px; }

.hero-btns { display:flex; align-items:center; gap:16px; margin-bottom:48px; flex-wrap:wrap; }

.hero-stats { display:flex; gap:36px; }
.hstat {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
}
.hstat-n {
  display:inline;
  font-size:clamp(28px,3vw,44px);
  font-weight:900;
  font-family:var(--serif);
  color:var(--text);
  line-height:1;
}
.hstat-u {
  display:inline;
  font-size:clamp(16px,2vw,28px);
  font-weight:900;
  color:var(--amber);
  line-height:1;
}
.hstat-l {
  flex:0 0 100%;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:4px;
}

/* ── 3D Perspective Frames ──────────────────────────────────────────── */
.hero-visual-col { position:relative; height:clamp(500px,65vh,750px); }

.perspective-stage {
  position:relative;
  width:100%; height:100%;
  perspective:1200px;
  transform-style:preserve-3d;
}

.pf {
  position:absolute;
  overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  transition:transform .12s linear;
  will-change:transform;
}
.pf .img-fw { border-radius:0; }

/* Stack positions */
.pf-back {
  width:55%; height:60%;
  top:20%; left:0;
  border-radius:var(--r-lg);
  transform:translateZ(-40px) rotate(-3deg);
  filter:brightness(.92);
}
.pf-mid {
  width:50%; height:55%;
  bottom:5%; right:5%;
  transform:translateZ(-20px) rotate(2deg);
  filter:brightness(.96);
}
.pf-front {
  width:65%; height:80%;
  top:5%; right:8%;
  transform:translateZ(0);
  z-index:10;
}

.float-badge {
  position:absolute; bottom:20px; left:-16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:8px 16px;
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800;
  box-shadow:var(--sh-md);
  white-space:nowrap;
}

/* ── Marquee Ticker ─────────────────────────────────────────────────── */
.ticker-rail {
  --ticker-cut: 12px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--text);
  padding: 14px 0 20px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--ticker-cut)),
    0 100%
  );
}

.ticker-rail::before,
.ticker-rail::after {
  content: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: ticker-scroll 28s linear infinite;
}

.ticker-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 24px;
  padding-right: 24px;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.tick-item {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(254,252,247,.75);
}
.tick-item svg { color:var(--amber); flex-shrink:0; }
.tick-sep { color:rgba(254,252,247,.25); }

/* ── Diagonal Section Dividers ──────────────────────────────────────── */
.diagonal-section {
  position:relative;
  padding:var(--sp-lg) 0;
  clip-path:polygon(0 var(--diag-skew), 100% 0, 100% calc(100% - var(--diag-skew)), 0 100%);
  margin:calc(-1 * var(--diag-skew)) 0;
}
/* Convert deg to px estimate (approx 70px at 1440) */
.diagonal-section {
  --diag-skew: clamp(40px,3vw,70px);
  padding-top:calc(var(--sp-lg) + var(--diag-skew));
  padding-bottom:calc(var(--sp-lg) + var(--diag-skew));
  clip-path:polygon(0 var(--diag-skew), 100% 0, 100% calc(100% - var(--diag-skew)), 0 100%);
}
.ds-linen { background:var(--bg-linen); }
.ds-amber { background:var(--amber); }

.ticker-rail + .diagonal-section {
  margin-top: -12px;
  clip-path: polygon(
    0 12px,
    100% 0,
    100% calc(100% - var(--diag-skew)),
    0 100%
  );
  padding-top: calc(var(--sp-lg) + 12px);
}

/* ── Compare Strip ──────────────────────────────────────────────────── */
.compare-strip {
  display:flex; align-items:center; gap:16px; margin-top:var(--sp-md);
  flex-wrap:wrap;
}
.cs-item {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px 24px;
  min-width:150px;
  box-shadow:var(--sh-sm);
}
.cs-bad .cs-value { color:#C0392B; }
.cs-good .cs-value { color:var(--sage); }
.cs-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
.cs-value { font-size:32px; font-weight:900; font-family:var(--serif); line-height:1; margin-bottom:4px; }
.cs-unit {
  display:inline-block;
  font-size:.55em;
  line-height:1;
  letter-spacing:0;
  vertical-align:baseline;
}
.cs-note  { font-size:12px; color:var(--muted); }
.cs-arrow { color:var(--muted); flex-shrink:0; }

/* Editorial Quote Card */
.editorial-quote-card {
  background:#fff;
  border-radius:var(--r-lg);
  padding:40px 36px 36px;
  position:relative;
  box-shadow:var(--sh-md);
  overflow:hidden;
}
.eq-accent-bar {
  position:absolute; top:0; left:0; right:0;
  height:4px;
  background:var(--amber);
}
.eq-quote {
  font-family:var(--serif);
  font-size:clamp(18px,2vw,24px);
  line-height:1.5;
  font-style:italic;
  color:var(--text);
  margin-bottom:20px;
}
.product-statement-card .eq-quote {
  font-family:var(--sans);
  font-style:normal;
  margin-bottom:0;
}
.cs-value-flow {
  font-family:var(--sans);
  font-size:clamp(18px,2vw,24px);
  line-height:1.15;
}
.eq-source { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

@media (min-width: 1101px) {
  .eq-quote {
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.45;
  }
}

/* ── 3D Tilt Mode Cards ─────────────────────────────────────────────── */
.tilt-cards-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-sm);
}
.tilt-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t-base), transform var(--t-base);
  transform-style:preserve-3d;
  will-change:transform;
  cursor:default;
}
.tilt-card:hover { box-shadow:var(--sh-lg); }

.tc-img-wrap { height:340px; }
.tc-img-wrap .img-fw { border-radius:0; }
.tc-img-wrap .img-fw img { transition:transform .8s var(--ease); }
.tilt-card:hover .tc-img-wrap .img-fw img { transform:scale(1.06); }

.tc-body { padding:24px; }
.tc-num {
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--amber); margin-bottom:8px;
}
.tc-title { font-size:22px; margin-bottom:8px; }
.tc-desc  { font-size:14px; color:var(--muted); line-height:1.6; }

/* ── Workflow Steps ─────────────────────────────────────────────────── */
.wf-steps-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--sp-sm);
  margin-top:var(--sp-md);
}
.wf-step {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-lg);
  padding:24px 16px;
  text-align:center;
  color:#fff;
  transition:var(--t-base);
  animation-delay:var(--delay,0s);
}
.wf-step:hover {
  background:rgba(255,255,255,.25);
  transform:translateY(-4px);
}
.wf-n {
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; font-family:var(--serif);
  margin:0 auto 16px;
}
.wf-title { font-size:15px; font-weight:800; margin-bottom:8px; }
.wf-desc  { font-size:12px; opacity:.8; line-height:1.5; }

/* ── Feature Accordion & Visual Panel ──────────────────────────────── */
.feat-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-lg);
  align-items:start;
}
.feat-acc-col { position:sticky; top:100px; }

.acc-list { margin-top:var(--sp-md); display:flex; flex-direction:column; gap:8px; }
.acc-item {
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:#fff;
  transition:border-color var(--t-fast);
}
.acc-item.active { border-color:var(--amber); }

.acc-hd {
  display:flex; align-items:center; gap:12px;
  padding:18px 20px;
  cursor:pointer;
}
.acc-icon { color:var(--muted); flex-shrink:0; transition:color var(--t-fast); }
.acc-item.active .acc-icon { color:var(--amber); }
.acc-label { flex:1; font-weight:700; font-size:15px; }
.acc-chev  { color:var(--muted); transition:transform var(--t-fast); flex-shrink:0; }
.acc-item.active .acc-chev { transform:rotate(180deg); color:var(--amber); }

.acc-body { padding:0 20px; max-height:0; overflow:hidden; opacity:0; transition:all .35s var(--ease); }
.acc-item.active .acc-body { max-height:200px; opacity:1; padding:0 20px 18px; }
.acc-body p { font-size:14px; color:var(--muted); line-height:1.65; }

/* Feature Visual Panes */
.feat-vis-col { position:relative; min-height:380px; }
.fv-pane { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.fv-pane.active { opacity:1; pointer-events:auto; position:relative; }

.fv-win {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-md);
  height:100%;
}
.fv-win-bar {
  display:flex; gap:6px; align-items:center;
  padding:12px 16px;
  background:var(--bg-linen);
  border-bottom:1px solid var(--border);
}
.fv-win-bar span {
  width:10px; height:10px; border-radius:50%;
  background:var(--border);
}
.fv-win-bar span:nth-child(1) { background:#FF5F57; }
.fv-win-bar span:nth-child(2) { background:#FFBD2E; }
.fv-win-bar span:nth-child(3) { background:#28CA41; }

.fv-content { position:relative; height:calc(100% - 42px); }

#features .acc-list {
  display:grid;
  gap:10px;
}

#features .acc-item {
  overflow:hidden;
}

#features .acc-hd {
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 18px;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

#features .acc-hd:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:-3px;
}

#features .acc-chev {
  display:block;
  width:18px;
  height:18px;
  min-width:18px;
  justify-self:end;
  overflow:visible;
}

#features .acc-hd {
  width:100%;
  min-width:0;
}

#features .acc-label {
  min-width:0;
}

#features .acc-body {
  padding-left:58px;
  padding-right:20px;
  max-height:none;
  overflow:visible;
  opacity:1;
}

#features .acc-item.active .acc-body {
  padding-bottom:20px;
}

#features .acc-body[hidden],
#features .fv-pane[hidden] {
  display:none !important;
}

#features .fv-pane {
  position:relative;
  inset:auto;
  opacity:1;
  pointer-events:auto;
}

#features .fv-win {
  overflow:hidden;
}

#features .fv-feature-image {
  width:100%;
  aspect-ratio:4 / 3;
  margin:0;
  overflow:hidden;
  background:var(--bg-linen);
}

#features .fv-feature-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  user-select:none;
  pointer-events:none;
}

#features .fv-poses-board,
#features .fv-cabinet-board,
#features .fv-export-board {
  width:100%;
  aspect-ratio:4 / 3;
  min-width:0;
  overflow:hidden;
}

#features .fv-poses-board {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:16px;
  background:var(--bg-linen);
}

#features .fv-pose-frame {
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}

#features .fv-pose-frame img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

#features .fv-cabinet-board {
  display:grid;
  place-items:center;
  padding:10px;
  background:#f5f7fa;
}

#features .fv-cabinet-board img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

#features .fv-export-board {
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,0.9fr) minmax(0,1.25fr);
  align-items:center;
  gap:14px;
  padding:22px;
  background:var(--bg-linen);
}

#features .fv-export-frame {
  min-width:0;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(17,17,24,0.08);
}

#features .fv-export-frame--square {
  aspect-ratio:1 / 1;
}

#features .fv-export-frame--portrait {
  aspect-ratio:4 / 5;
}

#features .fv-export-frame--landscape {
  aspect-ratio:16 / 9;
}

#features .fv-export-frame img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

#features .fv-export-frame--portrait img {
  object-position:center top;
}

@media (max-width:768px) {
  #features .fv-poses-board {
    gap:6px;
    padding:10px;
  }

  #features .fv-export-board {
    gap:8px;
    padding:12px;
  }
}

/* ── Editorial Gallery ──────────────────────────────────────────────── */
.mg-item {
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--border);
}
.mg-item .img-fw { border-radius:0; }
#gallery .gallery-composition {
  display:grid;
  gap:16px;
}
#gallery .gallery-composition__top {
  display:grid;
  grid-template-columns:minmax(0,43.0882fr) minmax(0,56.9118fr);
  gap:16px;
  align-items:start;
}
#gallery .gallery-composition__right {
  display:grid;
  gap:16px;
  align-content:start;
}
#gallery .gallery-composition__right-top {
  display:grid;
  grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  gap:16px;
  align-items:start;
}
#gallery .gallery-composition__bottom {
  display:grid;
  grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  gap:16px;
  align-items:start;
}
#gallery .mg-item {
  min-width:0;
  align-self:start;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-linen);
  transition:border-color .3s ease, box-shadow .3s ease;
}
#gallery .mg-item:hover {
  border-color:var(--sage);
  box-shadow:var(--sh-sm);
}
#gallery .mg-item .img-fw {
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
  background:transparent;
}
#gallery .mg-item .img-fw img {
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  object-fit:initial;
  object-position:initial;
  transform:none;
}
#gallery .mg-item:hover .img-fw img { transform:none; }
.mg-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 14px;
  background:linear-gradient(transparent,rgba(17,17,24,.65));
  color:#fff;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  opacity:0; transition:opacity .3s ease;
}
.mg-item:hover .mg-caption { opacity:1; }

@media (max-width:900px) {
  #gallery .gallery-composition__top {
    grid-template-columns:1fr;
  }
}

@media (max-width:680px) {
  #gallery .gallery-composition__right-top,
  #gallery .gallery-composition__bottom {
    grid-template-columns:1fr;
  }
}

/* ── Marketplace Cards ──────────────────────────────────────────────── */
.market-cards-col { display:flex; flex-direction:column; gap:12px; }
.mkt-card {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:var(--t-fast);
}
.mkt-card:hover { border-color:var(--sage); transform:translateX(4px); }
.mkt-active { border-color:var(--sage); }
.mkt-name { font-weight:800; font-size:15px; flex:1; }
.mkt-spec { font-size:12px; color:var(--muted); flex:2; }

/* ── Use Cases Strip ────────────────────────────────────────────────── */
.usecase-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-sm);
}
.uc-tile {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  transition:var(--t-base);
  animation-delay:var(--delay,0s);
}
.uc-tile:hover { border-color:var(--amber); transform:translateY(-4px); box-shadow:var(--sh-md); }
.uc-badge {
  display:inline-block; padding:4px 10px;
  border-radius:var(--r-sm);
  background:var(--amber-lt); color:var(--amber);
  font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:14px;
}
.uc-title { font-size:18px; font-weight:800; margin-bottom:10px; }
.uc-desc  { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── Pricing ────────────────────────────────────────────────────────── */
#pricing .pricing-cards-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:var(--sp-md);
  align-items:stretch;
}
#pricing .price-card,
#pricing .pricing-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
  overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:
    box-shadow 400ms var(--ease),
    border-color 400ms var(--ease),
    background-color 400ms var(--ease);
}
#pricing .price-card:hover,
#pricing .pricing-card:hover,
#pricing .price-card:focus-within,
#pricing .pricing-card:focus-within {
  box-shadow:var(--sh-lg);
}
#pricing .pc-popular { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber), var(--sh-md); }
#pricing .pricing-badge {
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  margin:0;
  border-radius:999px;
  background:var(--amber);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
#pricing .pricing-card-head {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:95px;
}
#pricing .pc-popular .pc-plan { padding-right:112px; }
#pricing .pc-plan { font-size:20px; margin-bottom:8px; }
#pricing .pc-price { font-size:44px; font-weight:900; font-family:var(--serif); margin-bottom:0; line-height:1.05; }
#pricing .pc-amt { color:var(--text); display:block; }
#pricing .pc-vat {
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:700;
  font-family:var(--sans);
  color:var(--muted);
}
#pricing .pc-vat-spacer {
  visibility:hidden;
  user-select:none;
}
#pricing .pricing-meta {
  display:grid;
  gap:0;
  margin:20px 0 22px;
}
#pricing .pricing-meta-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
#pricing .pricing-meta-row:first-child { border-top:1px solid var(--border); }
#pricing .pricing-meta dt {
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
#pricing .pricing-meta dd {
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  text-align:right;
}
#pricing .pricing-capacity dd { max-width:58%; }
#pricing .pricing-cta {
  width:100%;
  justify-content:center;
  margin-top:auto;
}
#pricing .pricing-disclaimer-list {
  max-width:1040px;
  margin:22px auto 0;
  padding:16px 0 0 18px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  text-align:left;
}
#pricing .pricing-disclaimer-list li { padding-left:4px; }
#pricing .pricing-disclaimer-list li + li { margin-top:6px; }
.enterprise-lead-note {
  margin-top:auto;
  padding:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

@media (max-width:1100px) {
  #pricing .pricing-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:680px) {
  #pricing .pricing-cards-grid { grid-template-columns:1fr; gap:14px; }
  #pricing .pricing-disclaimer-list { margin-top:18px; padding-top:14px; font-size:11px; line-height:1.5; }
}

#pricing.diagonal-section { padding-bottom:28px; }
#faq.diagonal-section { padding-top:36px; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-col {
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; gap:8px;
}
.faq-row {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden; transition:border-color var(--t-fast);
}
.faq-row.open { border-color:var(--amber); }
.faq-q {
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:18px 20px;
  font-weight:700; font-size:15px;
  color:var(--text);
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
}
.faq-chev { color:var(--muted); transition:transform .3s ease; margin-left:auto; flex-shrink:0; }
.faq-row.open .faq-chev { transform:rotate(180deg); color:var(--amber); }
.faq-a { margin:0; padding:0 20px 18px; }
.faq-a[hidden] { display:none; }
.faq-a p { font-size:14px; color:var(--muted); line-height:1.65; }

/* ── Final CTA Band ─────────────────────────────────────────────────── */
.cta-band {
  background:var(--amber);
  padding:var(--sp-xl) 0;
  text-align:center;
}
.cta-h2 {
  font-size:clamp(36px,5vw,64px);
  color:#fff; margin-bottom:16px;
}
.cta-btns { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.btn-cta-amber { background:#fff; color:var(--amber); border-color:#fff; }
.btn-cta-amber:hover { background:var(--bg); color:var(--amber-dk); transform:translateY(-2px); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background:var(--text);
  padding:var(--sp-xl) 0 var(--sp-md);
}
.ft-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--sp-lg);
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-ft .brand-slash, .brand-ft .brand-ai { color:var(--amber); }

.site-footer .brand-ft.brand-lockup {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  white-space:nowrap;
  line-height:1;
}
.site-footer .brand-ft .brand-symbol {
  display:block;
  width:28px;
  height:28px;
  flex:0 0 28px;
}
.site-footer .brand-ft .brand-wordmark {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  line-height:1;
}
.site-footer .brand-ft .brand-name { color:#FFFFFF; }
.site-footer .brand-ft .brand-slash,
.site-footer .brand-ft .brand-ai { color:var(--amber); }

.ft-tagline { font-size:14px; color:rgba(255,255,255,.5); margin-top:12px; line-height:1.6; }
.ft-col { display:flex; flex-direction:column; gap:10px; }
.ft-col-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:4px; }
.ft-col a,
.ft-col > span:not(.ft-col-title) { font-size:14px; color:rgba(255,255,255,.65); transition:color var(--t-fast); }
.ft-col a:hover { color:#fff; }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp-md); font-size:12px; color:rgba(255,255,255,.35); }
.ft-socials { display:flex; gap:16px; }
.ft-socials a { color:rgba(255,255,255,.5); transition:color var(--t-fast); }
.ft-socials a:hover { color:#fff; transform:translateY(-2px); display:inline-block; }

/* ── Scroll Reveal Utility ──────────────────────────────────────────── */
.reveal-up {
  opacity:1; transform:none;
}
.js .reveal-up {
  opacity:0; transform:translateY(40px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--delay,0s);
}
.js .reveal-up.visible { opacity:1; transform:translateY(0); }

/* ── Reduced Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .ticker-track { animation:none !important; transform:none !important; }
  .js .reveal-up { opacity:1 !important; transform:none !important; }
  .js-tilt-card,
  .js-tilt-card:hover { transform:none !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .hero-stage { grid-template-columns:1fr; min-height:auto; }
  .hero-visual-col { height:50vw; min-height:300px; }
  .wf-steps-grid { grid-template-columns:repeat(3,1fr); }
  .feat-layout { grid-template-columns:1fr; }
  .feat-acc-col { position:static; }
  .fv-pane, .fv-pane.active { position:relative; }
  .ft-grid { grid-template-columns:1fr 1fr; gap:var(--sp-md); }
  #features .feat-vis-col {
    display:none;
    min-height:0;
  }

  #features .acc-item.active .acc-body {
    max-height:none;
  }

  #features .acc-body > .fv-pane {
    position:relative;
    inset:auto;
    width:100%;
    margin-top:16px;
    opacity:1;
    pointer-events:auto;
  }
  #features .acc-body > .fv-pane[hidden] {
    display:none;
  }
}
@media (max-width:768px) {
  .site-header .brand.brand-lockup {
    font-size:clamp(13px,3.6vw,16px);
    gap:6px;
    min-width:0;
  }
  .site-header .brand-symbol {
    width:22px;
    height:22px;
    flex-basis:22px;
  }
  .hdr-wrap { gap:8px; }
  .hdr-actions {
    gap:6px;
    margin-left:auto;
    min-width:0;
  }
  .header-cta {
    white-space:nowrap;
    flex-shrink:0;
    padding:9px 12px;
    font-size:10px;
    line-height:1;
    letter-spacing:.035em;
  }
  .lang-pill {
    flex-shrink:0;
    padding-left:10px;
    padding-right:10px;
  }
  .hamburger { flex-shrink:0; }
  .primary-nav, .hide-sm { display:none; }
  .hamburger { display:block; }
  .tilt-cards-grid { grid-template-columns:1fr; }
  .grid-halves { grid-template-columns:1fr; }
  .usecase-strip { grid-template-columns:1fr; }
  .wf-steps-grid { grid-template-columns:1fr 1fr; }
  #pricing.diagonal-section { padding-bottom:20px; }
  #faq.diagonal-section { padding-top:28px; }
  .compare-strip {
    display:grid;
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
    align-items:stretch;
    gap:8px;
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
  }
  .cs-item {
    width:100%;
    min-width:0;
    height:100%;
    padding:14px 10px;
  }
  .cs-arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    min-width:24px;
    color:var(--muted);
  }
  .cs-value {
    white-space:nowrap;
    font-size:clamp(18px,5.2vw,28px);
    line-height:1.05;
    letter-spacing:-0.02em;
  }
  .cs-unit {
    font-size:.42em;
  }
  .cs-label {
    font-size:9px;
    line-height:1.25;
  }
  .cs-note {
    font-size:10px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .hero-stats { gap:20px; }
  .ft-grid { grid-template-columns:1fr; }
  .ft-bottom { flex-direction:column; gap:12px; text-align:center; }
  .diagonal-section { clip-path:none; margin:0; }
  .ticker-rail {
    --ticker-cut: 8px;
    padding: 12px 0 16px;
  }
  .ticker-rail + .diagonal-section {
    margin-top: -8px;
    clip-path: polygon(
      0 8px,
      100% 0,
      100% 100%,
      0 100%
    );
    padding-top: calc(var(--sp-lg) + 8px);
  }
}
@media (max-width:480px) {
  .wf-steps-grid { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; align-items:flex-start; }
  .cta-btns { flex-direction:column; }
  .cs-value {
    font-size:clamp(16px,4.8vw,22px);
    letter-spacing:-0.03em;
  }
  .cs-unit {
    font-size:.38em;
  }
  .cs-item {
    padding:14px 8px;
  }
}
@media (max-width:380px) {
  .site-header .hdr-wrap {
    padding-left:12px;
    padding-right:12px;
    gap:4px;
  }

  .site-header .brand.brand-lockup {
    font-size:12px;
    gap:4px;
  }

  .site-header .brand-symbol {
    width:20px;
    height:20px;
    flex-basis:20px;
  }

  .site-header .hdr-actions {
    gap:4px;
  }

  .site-header .header-cta {
    padding:8px 9px;
    font-size:9px;
    letter-spacing:.02em;
  }

  .site-header .lang-pill {
    padding-left:8px;
    padding-right:8px;
  }
}
.fragment-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 96px;
}