/* ============================================================
   Nami Film — draft3 · "Apple แท้"
   Authentic Apple web-design DNA (design-md: apple):
   photography-first calm, single blue accent (#0071e3), Apple
   neutrals (#fff / #f5f5f7 / #1d1d1f / #6e6e73), solid text
   (no gradient-fill), flat pill CTAs, no decorative gradients,
   one product-shadow only, edge-to-edge light↔dark tile rhythm.
   Thai fonts kept (Prompt / Sarabun). Vanilla — no build.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --canvas:    #ffffff;   /* pure white — dominant canvas */
  --parchment: #f5f5f7;   /* Apple off-white — alternating light tile / footer */
  --pearl:     #fafafc;   /* near-white ghost-button fill */
  --tile:      #1d1d1f;   /* near-black dark tile */
  --tile-2:    #000000;   /* true black — hero void moments */

  /* Text */
  --ink:       #1d1d1f;   /* headlines + body on light */
  --muted:     #5f5f64;   /* secondary copy — 6.3:1 on white */
  --faint:     #6e6e73;   /* captions / legal — 5.1:1 on white (WCAG AA) */
  --on-dark:   #f5f5f7;   /* text on dark tile */
  --on-dark-muted: #a1a1a6;

  /* Single accent — Action Blue. Nothing else is interactive-colored. */
  --blue:      #0071e3;
  --blue-press:#0077ed;
  --blue-dark: #2997ff;   /* link/accent on dark surfaces only */
  /* Filled buttons keep the deep blue on BOTH surfaces — deliberately not
     remapped in the dark scope, where the lighter blue drops white label
     text to 3.0:1. Same choice Apple makes on its dark sections. */
  --blue-fill: #0071e3;

  /* Hairlines */
  --hair:      #d2d2d7;
  --hair-soft: #e8e8ed;

  /* The single Apple shadow — product/imagery resting on a surface */
  --shadow-product: 0 3px 30px rgba(0,0,0,.14);

  /* Scoped values reused by dark tiles (remapped below) */
  --line-strong: var(--hair);

  --radius:    18px;   /* utility cards */
  --radius-sm: 12px;   /* inline media */
  --radius-xs: 8px;
  --max:       1024px; /* Apple text column max ~980–1024 */
  --max-wide:  1200px;

  --font-head: 'Prompt', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Sarabun', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --z-scene: 1;
  --z-float: 60;
  --z-nav:   100;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Legacy aliases: map old gold/copper token names (still referenced by
     inline styles in the HTML) onto the Apple palette so nothing breaks and
     nothing renders gold. All resolve at use-site, so they flip inside the
     dark-tile scope too. ---- */
  --white: var(--ink);   --smoke: var(--ink);   --ash: var(--muted);   --steel: var(--faint);
  --iron: var(--canvas); --charcoal: var(--parchment); --panel: var(--canvas); --panel-2: var(--parchment);
  --black: var(--tile);
  --gold: var(--blue);   --gold-bright: var(--blue-dark); --gold-deep: var(--blue);
  --copper: #c7c7cc; --copper-lt: #d2d2d7; --copper-dk: #aeaeb2;
  --d-panel: #26262a; --d-charcoal: #1d1d1f; --d-smoke: #a1a1a6; --d-steel: #a1a1a6; --d-ash: #a1a1a6; --d-white: #f5f5f7;

  /* motion */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --rise:      28px;
  --dur:       .8s;
  --scene-hero-h:   240vh;
  --scene-grade-h:  320vh;
  --scene-layers-h: 260vh;
  --type-xl:   clamp(2.6rem, 7vw, 5rem);
}

/* ===== Dark tile scope — remap surface/text tokens to the near-black tile
   so inner rules (which read the same token names) flip automatically.
   The color change IS the section divider — the Apple rhythm. ===== */
.hero-scene, .scene[data-scene], .section--dark, .stat-band, .cta-band, .darktile {
  --canvas: var(--tile);
  --parchment: var(--tile);
  --pearl: #2a2a2c;
  --ink: var(--on-dark);
  --muted: var(--on-dark-muted);
  --faint: var(--on-dark-muted);
  --blue: var(--blue-dark);
  --hair: rgba(255,255,255,.16);
  --hair-soft: rgba(255,255,255,.10);
  color: var(--on-dark);

  /* Legacy aliases must be re-declared here, not only in :root. A custom
     property whose value is var(--other) resolves where it is DECLARED, so the
     :root copies keep the light values and never follow the remap above. */
  --white: var(--on-dark);  --smoke: var(--on-dark);
  --ash: var(--on-dark-muted); --steel: var(--on-dark-muted);
  --iron: var(--tile); --charcoal: var(--tile); --panel: var(--tile); --panel-2: #26262a;
  --black: var(--tile);
  --gold: var(--blue-dark); --gold-bright: var(--blue-dark); --gold-deep: var(--blue-dark);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.47;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  line-height: 1.07; margin: 0 0 .4em; letter-spacing: -.022em;
  overflow-wrap: anywhere; min-width: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.028em; }
h3 { font-size: 1.35rem; letter-spacing: -.018em; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue); text-decoration: none; transition: color .18s; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
b, strong { color: var(--ink); font-weight: 600; }

.container { width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 22px; }
.container.narrow { max-width: var(--max); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--soft { background: var(--parchment); }
.section--dark { background: var(--tile); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }

/* eyebrows are removed structurally in draft3; keep a quiet fallback in case
   any survives — plain muted caption, NOT the tracked-uppercase AI kicker. */
.eyebrow { display: block; font-size: .95rem; color: var(--muted); margin: 0 0 .4em; letter-spacing: 0; text-transform: none; font-weight: 400; }
.eyebrow::before { display: none; }

.lead { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.35; color: var(--muted); max-width: 34ch; font-weight: 400; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.muted { color: var(--faint); }

/* ---------- Buttons — flat blue pill + text-link grammar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: 1.02rem;
  padding: 11px 22px; border-radius: 980px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s, transform .12s, color .2s; white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--blue-fill); color: #fff; }
.btn-primary:hover { background: var(--blue-press); color: #fff; text-decoration: none; }
.btn-primary:active { transform: scale(.97); }
.btn-outline, .btn-ghost { background: transparent; color: var(--blue); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-outline:hover, .btn-ghost:hover { text-decoration: underline; color: var(--blue); }
.btn-outline::after, .btn-ghost::after { content: "›"; font-size: 1.15em; line-height: 0; }
.btn-line { background: #06c755; color: #fff; }
.btn-line:hover { background: #05b64d; color: #fff; text-decoration: none; }
.btn-line:active { transform: scale(.97); }
/* pill-shaped secondary (used where a solid ghost pill reads better) */
.btn-pill { background: var(--pearl); color: var(--ink); border: 1px solid var(--hair); border-radius: 980px; }
.btn-pill:hover { background: #f0f0f2; text-decoration: none; color: var(--ink); }

/* ---------- Header / global nav (Apple thin bar) ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.gnav { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); height: 52px; }
.brand { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; line-height: 1; }
.brand:hover { text-decoration: none; }
.wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.32rem; letter-spacing: .01em; color: var(--ink); }
.wordmark .ac { color: var(--blue); }
.brand-sub { font-family: var(--font-head); font-weight: 400; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.nav-links { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-head); font-weight: 400; font-size: .86rem; color: var(--ink); padding: 8px 2px; border-radius: 8px; opacity: .82; white-space: nowrap; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-links a.active { opacity: 1; color: var(--blue); }
.nav-util { font-family: var(--font-head); font-weight: 400; font-size: .86rem; color: var(--blue); margin-left: 8px; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ---------- Interior page hero (varied per page via modifiers) ---------- */
.page-hero { background: var(--parchment); color: var(--ink); padding: clamp(72px,11vw,132px) 0 clamp(48px,7vw,80px); position: relative; overflow: hidden; }
.page-hero.on-dark, .page-hero--dark { background: var(--tile); color: var(--on-dark); }
.page-hero.on-dark h1, .page-hero--dark h1 { color: var(--on-dark); }
.page-hero h1 { max-width: 16ch; }
.page-hero p { color: var(--muted); max-width: 40ch; font-size: clamp(1.15rem,2vw,1.4rem); line-height: 1.4; }
.page-hero--dark p { color: var(--on-dark-muted); }
.breadcrumb { font-size: .82rem; letter-spacing: 0; color: var(--faint); margin-bottom: 20px; }
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--blue); }
/* right-aligned interior hero variant (breaks the single centered axis) */
.page-hero--end .container { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.page-hero--end p { margin-left: auto; }

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

/* ---------- Cards — flat, hairline, radius 18, no shadow ---------- */
.card {
  background: var(--canvas); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: var(--space-6); position: relative;
}
.section--soft .card { background: var(--canvas); }
.card .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: transparent; color: var(--blue); margin-bottom: 18px; border: 0; padding: 0;
}
.card .ico svg { width: 30px; height: 30px; }
.card h3 { margin-bottom: .35em; color: var(--ink); }
.card p { color: var(--muted); margin: 0; font-size: 1rem; }

/* ---------- Benefit points — typography-led, hairline-topped, no icon tile.
   Two densities so pages that both list benefits don't read as the same block:
   points-3 = compact triplet, points-2 = larger pair. ---------- */
.points { display: grid; gap: var(--space-6) var(--space-7); }
.points-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.points-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.point { border-top: 1px solid var(--hair); padding-top: 20px; }
.point h3 { color: var(--ink); margin-bottom: .4em; }
.point p { color: var(--muted); margin: 0; font-size: 1rem; }
.points-2 .point { padding-top: 26px; }
.points-2 .point h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -.024em; }
.points-2 .point p { font-size: 1.05rem; max-width: 46ch; }

/* secondary items under a points set — deliberately quieter than .point */
.minor-row {
  list-style: none; padding: var(--space-6) 0 0; margin: var(--space-7) 0 0;
  border-top: 1px solid var(--hair-soft);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5);
}
.minor-row li { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.minor-row li b { font-family: var(--font-head); font-weight: 600; color: var(--ink); display: block; font-size: 1rem; margin-bottom: 3px; }

/* ---------- Spec rows — term left, copy right. Reads like a document. ---------- */
.rows { margin: 0; }
.rows .row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr);
  gap: clamp(18px,4vw,64px); padding: 28px 0; border-top: 1px solid var(--hair); align-items: baseline;
}
.rows .row:last-child { border-bottom: 1px solid var(--hair); }
.rows dt { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem,1.8vw,1.45rem); color: var(--ink); letter-spacing: -.024em; line-height: 1.15; }
.rows dd { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.split.reverse .split-media { order: 2; }
.media-frame { border-radius: var(--radius); overflow: hidden; background: var(--parchment); }
.checklist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.checklist li b { color: var(--ink); }
.checklist li svg { flex: none; margin-top: 4px; color: var(--blue); }

/* ---------- Grade cards ---------- */
.grade-card { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.grade-card .tier { font-family: var(--font-head); font-size: .95rem; color: var(--muted); font-weight: 400; margin-bottom: 2px; }
.grade-card.feature { border-color: var(--ink); }
.grade-card .badge-top { position: absolute; top: 16px; right: 16px; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 500; font-size: .74rem; letter-spacing: .01em; padding: 5px 12px; border-radius: 980px; }
.grade-card .price { font-family: var(--font-head); font-size: 1.05rem; color: var(--muted); margin: 4px 0 14px; font-weight: 400; }
.grade-spec { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--hair-soft); display: grid; gap: 12px; font-size: .98rem; }
.grade-spec li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.grade-spec li b { font-family: var(--font-head); color: var(--ink); font-weight: 600; }
.grade-card .btn { margin-top: 24px; align-self: flex-start; }
.grade-card .btn-primary { align-self: stretch; justify-content: center; }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: transparent; }
table.compare th, table.compare td { padding: 18px 20px; text-align: center; border-bottom: 1px solid var(--hair-soft); }
table.compare thead th { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.05rem; border-bottom: 1px solid var(--hair); letter-spacing: -.01em; }
table.compare thead th:first-child { text-align: left; color: var(--muted); font-weight: 400; }
table.compare tbody td { color: var(--muted); }
table.compare tbody td:first-child { text-align: left; font-family: var(--font-body); color: var(--ink); }
table.compare .hi { color: var(--ink); font-weight: 600; }

/* ---------- Pills / trust chips ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 24px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 980px; background: transparent; border: 1px solid var(--hair); font-size: .92rem; font-family: var(--font-head); color: var(--ink); }
.pill svg { color: var(--blue); }

.warranty-badge { display: inline-flex; align-items: center; gap: 14px; padding: 0; background: none; border: 0; color: var(--ink); font-family: var(--font-head); }
.warranty-badge svg { color: var(--blue); }
.warranty-badge b { font-size: 2.4rem; display: block; line-height: 1; color: var(--ink); letter-spacing: -.03em; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-6); }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .n { counter-increment: step; flex: none; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--hair); color: var(--ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.step .n::before { content: counter(step); }
.step h3 { color: var(--ink); font-size: 1.2rem; }

/* ---------- Portfolio ---------- */
.folio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.folio { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4/3; background: var(--parchment); }
.folio img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Legal document (privacy policy etc.) ---------- */
.legal-doc h2 { font-size: 1.2rem; margin: 32px 0 8px; }
.legal-doc p { color: var(--muted); line-height: 1.75; margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { color: var(--muted); line-height: 1.7; margin-bottom: 6px; }
.legal-doc b { color: var(--ink); }

/* ---------- Language switch ---------- */
.nav-lang { align-self: center; flex: 0 0 auto; white-space: nowrap; font-family: var(--font-head); font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid var(--hair); border-radius: 980px; padding: 5px 13px; margin-left: 6px; transition: color .18s, border-color .18s; }
.nav-lang:hover { color: var(--ink); border-color: var(--muted); }
.folio .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--faint); font-size: .85rem; padding: 16px; }
.folio .tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.9); color: var(--ink); font-family: var(--font-head); font-size: .76rem; letter-spacing: 0; padding: 4px 12px; border-radius: 980px; }

/* ---------- Reviews ---------- */
.quote-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.quote-card .stars { color: var(--blue); letter-spacing: 2px; margin-bottom: 14px; font-size: .9rem; }
.quote-card p { font-size: 1.3rem; line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.quote-card .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote-card .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--parchment); border: 1px solid var(--hair); color: var(--muted); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; }
.quote-card .who b { color: var(--ink); display: block; }
.quote-card .who small { color: var(--faint); }

/* ---------- CTA band (dark tile, centered statement) ---------- */
/* dark tile sitting on a light section — its text is on-dark, so it needs the
   dark surface under it, not the page's light background */
.cta-band { position: relative; background: var(--tile); border: 0; border-radius: var(--radius); padding: clamp(48px, 7vw, 76px) 24px; text-align: center; }
.cta-band h2 { color: var(--on-dark); }
.cta-band .lead { color: var(--on-dark-muted); margin: 0 auto 28px; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Forms ---------- */
.form-card { background: var(--canvas); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(26px,4vw,40px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--hair); border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem; background: var(--canvas); color: var(--ink); transition: .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Contact info list ---------- */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.info-list li { display: flex; gap: 16px; }
.info-list .ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--parchment); border: 1px solid var(--hair); color: var(--blue); display: grid; place-items: center; }
.info-list b { font-family: var(--font-head); display: block; color: var(--ink); }
.info-list a { color: var(--blue); }
.info-list span { color: var(--muted); }

/* ---------- Placeholder marker (fill real data) — quiet, non-brand ---------- */
.fill { background: rgba(0,113,227,.08); color: var(--blue); border-bottom: 1px dashed var(--blue); padding: 0 4px; border-radius: 4px; font-style: normal; }
.section--dark .fill, .hero-scene .fill, .scene[data-scene] .fill, .cta-band .fill, .stat-band .fill { color: var(--blue-dark); background: rgba(41,151,255,.12); border-color: var(--blue-dark); }

/* ---------- Footer — Apple directory + legal, small type ---------- */
.site-footer { background: var(--parchment); color: var(--faint); padding: 44px 0 28px; }
.site-footer .container { max-width: var(--max-wide); }
.foot-note { font-size: .78rem; line-height: 1.5; color: var(--faint); max-width: 88ch; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hair); }
.foot-dir { display: flex; flex-wrap: wrap; gap: 20px 64px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.foot-dir section { min-width: 130px; }
.foot-dir h4 { font-size: .78rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: 0; }
.foot-dir ul { list-style: none; padding: 0; margin: 0; }
.foot-dir li { line-height: 1.9; }
.foot-dir a { color: var(--faint); font-size: .78rem; }
.foot-dir a:hover { color: var(--ink); text-decoration: none; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; }
.foot-legal p { font-size: .74rem; color: var(--faint); margin: 0; }
.foot-legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0; }
.foot-legal-links li { font-size: .74rem; color: var(--faint); }
.foot-legal-links a { color: var(--faint); font-size: .74rem; }

/* ---------- Floating LINE button ---------- */
.float-line {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px 13px 15px;
  background: #06c755; color: #fff; border-radius: 980px; font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(6,199,85,.34); transition: .2s;
}
.float-line:hover { color: #fff; transform: translateY(-2px); text-decoration: none; }

/* reveal on scroll — gated behind html.js (progressive enhancement) */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .grid-4 { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .grid-3, .folio-grid, .points-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .minor-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Nav breathing room — 7 links + 3 language pills + LINE button no longer fit
   the fixed 1200px container at the old sizes, so links wrapped mid-label.
   The container width is capped, so these apply at every desktop width; the
   hamburger then takes over at 980px. */
.gnav { gap: clamp(12px, 1.8vw, 26px); }
.nav-links { gap: clamp(6px, 1.1vw, 15px); }
.nav-links a { font-size: .8rem; }
.nav-util { font-size: .8rem; margin-left: 4px; }
.nav-lang { font-size: .78rem; padding: 4px 11px; margin-left: 4px; }

@media (max-width: 980px) {
  .nav-links {
    position: fixed; inset: 52px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hair); padding: 12px 22px 20px; gap: 0;
    transform: translateY(-160%); transition: .3s ease;
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 13px 4px; font-size: 1rem; opacity: 1; border-bottom: 1px solid var(--hair-soft); white-space: normal; }
  .nav-toggle { display: block; }
  .nav-util { display: none; }
}
@media (max-width: 720px) {
  .nav-links {
    position: fixed; inset: 52px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hair); padding: 12px 22px 20px; gap: 0;
    transform: translateY(-160%); transition: .3s ease;
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 13px 4px; font-size: 1rem; opacity: 1; border-bottom: 1px solid var(--hair-soft); }
  .nav-toggle { display: block; }
  .nav-util { display: none; }
  .gnav { gap: 8px; }
  .nav-lang { padding: 4px 10px; font-size: .76rem; margin-left: 0; }
  .grid-2, .grid-3, .field-row, .folio-grid { grid-template-columns: 1fr; }
  .points-2, .points-3, .minor-row { grid-template-columns: 1fr; }
  .rows .row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .page-hero--end .container { align-items: flex-start; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════
   SCROLL EXPERIENCE ENGINE  (kept from source, recolored to Apple)
   Pinned scenes / scrubbed reveals / big-type / parallax / counters /
   card choreography. Gated behind html.js + prefers-reduced-motion.
   Animates transform/opacity only. Dark tiles = #1d1d1f / #000.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0; transform: translateY(var(--rise));
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  html.js [data-reveal="fade"]  { transform: none; }
  html.js [data-reveal="scale"] { transform: scale(.96); }
  html.js [data-reveal].in      { opacity: 1; transform: none; }

  html.js [data-stagger] > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js [data-stagger].in > * { opacity: 1; transform: none; }
}

.scene { position: relative; }
html.js .scene[data-scene="hero"]   { height: var(--scene-hero-h); }
html.js .scene[data-scene="grade"]  { height: var(--scene-grade-h); }
html.js .scene[data-scene="layers"] { height: var(--scene-layers-h); }
html.js .scene-stage {
  --p: 0; position: sticky; top: 0; height: 100vh; min-height: 560px;
  display: grid; place-items: center; overflow: hidden; z-index: var(--z-scene);
}
@supports (height: 100svh) { html.js .scene-stage { height: 100svh; } }

/* ---------- HERO scene — near-black void, left-anchored statement ---------- */
.hero-scene { background: var(--tile-2); color: var(--on-dark); }
.hero-scene .scene-stage { background: radial-gradient(120% 90% at 50% 120%, #16181c 0%, #000 62%); }
.hero-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.hero-glow {
  background: radial-gradient(40% 40% at 62% 46%, rgba(41,151,255,.18), transparent 64%);
  opacity: .8;
  transform: translate3d(0, calc(var(--p) * 50px), 0) scale(calc(1 + var(--p) * .4));
}
.hero-gridlines { display: none; }
.hero-pane-layer {
  display: flex; align-items: center; justify-content: flex-end;
  padding-inline: max(22px, calc((100% - var(--max-wide)) / 2 + 22px));
}
.hero-pane {
  position: relative; inset: auto; margin: 0;
  width: min(500px, 44vw); height: min(340px, 46vh);
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 60%, transparent);
  box-shadow: var(--shadow-product);
  opacity: .55; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transform: translateY(calc(var(--p) * -40px)) scale(calc(1 + var(--p) * .12));
}
.hero-pane img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.hero-pane::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.08) 50%, transparent 58%);
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--max-wide); margin: auto; padding: 0 22px; text-align: left; }
.hero-content { will-change: transform, opacity; max-width: min(92vw, 660px);
  transform: translateY(calc(var(--p) * -60px)); opacity: calc(1 - var(--p) * 1.2); }
.hero-title { font-size: clamp(2.4rem, 6.4vw, 4.8rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; margin: 0 0 .32em; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.hero-title .hl { color: var(--blue-dark); background: none; -webkit-text-fill-color: currentColor; }
.hero-sub { color: var(--on-dark-muted); font-size: clamp(1.15rem,2vw,1.45rem); line-height: 1.4; max-width: 40ch; margin: 0 0 6px; }
.hero-inner .tagline-en { display: block; margin: 10px 0 4px; }
.hero-inner .hero-cta { justify-content: flex-start; margin-top: 28px; }
.tagline-en { font-family: var(--font-head); font-style: italic; font-weight: 400; color: var(--muted); font-size: 1rem; }
.hero-scene .tagline-en, .cta-band .tagline-en, .section--dark .tagline-en { color: var(--on-dark-muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 3; display: grid; place-items: center; gap: 6px;
  font-family: var(--font-head); font-size: .78rem; letter-spacing: 0; color: var(--on-dark-muted);
  opacity: calc(1 - var(--p) * 3);
}
.scroll-hint:hover { text-decoration: none; color: var(--blue-dark); }
.scroll-hint svg { animation: nudge 1.8s var(--ease-soft) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero-wave { display: none; }

/* ---------- Big-type statement — solid ink, key word solid blue ---------- */
.bigtype { max-width: min(94vw, 940px); margin: 0 auto; text-align: center; }
.bigtype .line { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--type-xl); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.bigtype .k { color: var(--blue); background: none; -webkit-text-fill-color: currentColor; }
.section--dark .bigtype .line { color: var(--on-dark); }
.section--dark .bigtype .k { color: var(--blue-dark); }

/* ---------- Alternating market tiles ---------- */
.tile { position: relative; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--canvas); }
.tile .tile-media { height: 240px; overflow: hidden; background: var(--parchment); }
.tile .tile-body { padding: var(--space-6); }
.tile .tile-body h3 { color: var(--ink); }
.tile .tile-body p { color: var(--muted); }

/* ---------- Counter stat band (dark tile, solid numerals) ---------- */
.stat-band { background: var(--tile); }
.stat-xl { text-align: center; padding: 8px 0; }
.stat-xl .num { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--on-dark); line-height: 1; display: inline-block; letter-spacing: -.03em; background: none; -webkit-text-fill-color: currentColor; }
.stat-xl .unit { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--on-dark); }
.stat-xl .lbl { display: block; margin-top: 12px; color: var(--on-dark-muted); font-size: .95rem; }

/* inline stat blocks (portfolio) */
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.stat { text-align: center; }
/* left-aligned variant — .stat's own text-align beats inheritance, so the
   whole block needs the override, not just the number */
.stat--start, .stat--start b, .stat--start span { text-align: left; }
.stat b { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.2rem,4vw,3rem); color: var(--ink); display: block; line-height: 1; letter-spacing: -.03em; }
.stat span { font-size: .92rem; color: var(--muted); }
.section--dark .stat b { color: var(--on-dark); }
.section--dark .stat span { color: var(--on-dark-muted); }

/* photography — frame crops the image; aspect ratio owned by the container */
.tile .tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Grade scrub scene ---------- */
.grade-scrub { width: 100%; max-width: var(--max-wide); padding: 0 22px; margin: 0 auto; }
.grade-head { text-align: center; margin-bottom: 28px; }
.grade-head h2 { color: var(--on-dark); }
.grade-head .muted { color: var(--on-dark-muted); }
.grade-rail { display: inline-flex; gap: 8px; margin-top: 16px; }
.grade-rail span { width: 30px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.2); transition: background .35s var(--ease-out), transform .35s var(--ease-out); }
.grade-rail[data-active="0"] span:nth-child(1),
.grade-rail[data-active="1"] span:nth-child(2),
.grade-rail[data-active="2"] span:nth-child(3) { background: var(--blue-dark); transform: scaleX(1.3); }
.grade-viewport { position: relative; min-height: 460px; display: grid; place-items: center; }
.grade-scrub .grade-card { background: #26262a; border: 1px solid rgba(255,255,255,.14); color: var(--on-dark); width: 100%; max-width: 560px; margin: 0 auto; }
.grade-scrub .grade-card h3, .grade-scrub .grade-card .grade-spec li b { color: var(--on-dark); }
.grade-scrub .grade-card p, .grade-scrub .grade-card .tier, .grade-scrub .grade-card .grade-spec li { color: var(--on-dark-muted); }
.grade-scrub .grade-card.feature { border-color: var(--blue-dark); }
html.js .grade-slide {
  position: absolute; inset: 0; margin: auto; height: max-content;
  opacity: 0; transform: translateY(36px) scale(.97);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
html.js .grade-slide.is-active { opacity: 1; transform: none; }
.grade-slide .tier-line { display: flex; align-items: center; gap: 10px; justify-content: flex-start; margin-bottom: 6px; }
.grade-slide .idx { font-family: var(--font-head); font-weight: 600; color: var(--blue-dark); font-size: 1rem; }

/* ---------- Parallax accents (kept subtle / neutral; Apple = no decorative gradient) ---------- */
[data-parallax] { will-change: transform; }
.glow-accent { display: none; }

/* ---------- Nano Ceramic Multi-Layers scene ---------- */
.layers-scene {
  width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center;
}
.layers-copy h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.03em; color: var(--on-dark); overflow-wrap: anywhere; min-width: 0; }
.layers-copy .k { color: var(--blue-dark); background: none; -webkit-text-fill-color: currentColor; }
.layers-copy p { color: var(--on-dark-muted); max-width: 42ch; }
.layers-scale { display: flex; gap: 28px; margin-top: 26px; }
.layers-scale .ls { font-family: var(--font-head); color: var(--on-dark-muted); font-size: .85rem; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.layers-scale .ls b { font-size: 2rem; line-height: 1; color: var(--on-dark); letter-spacing: -.03em; }
.layers-scale .ls.hot b { color: var(--blue-dark); }
/* The stack and the legend share --row, so layer i and label i line up by
   construction — no magic numbers to re-sync when the type scale moves. */
.nano {
  --row: 44px;
  --fan: 6px;   /* per-layer horizontal offset; sheet width compensates for it */
  display: grid; grid-template-columns: minmax(88px, 1fr) auto; gap: 14px; align-items: start;
}
.nano-stack { position: relative; height: calc(var(--row) * 9 + 18px); }

/* Each sheet fades and settles as the scrub reaches it. --lp is layer-local
   progress; the var(--p, 1) fallback means no-JS shows the full stack. */
.nl {
  --lp: clamp(0, calc((var(--p, 1) * 10) - var(--i)), 1);
  position: absolute; left: 0; top: calc(var(--i) * var(--row));
  /* Width is reduced by the full fan travel (+ skew overhang) so that no sheet
     can ever reach past the stack box and slide under the legend. */
  width: calc(100% - var(--fan) * 8 - 14px);
  height: calc(var(--row) + 12px);
  border-radius: 3px 9px 3px 9px;
  background:
    linear-gradient(100deg,
      rgba(41,151,255, calc(.05 + var(--i) * .022)) 0%,
      rgba(255,255,255,.055) 46%,
      rgba(41,151,255,.03) 100%);
  border: 1px solid rgba(41,151,255, calc(.20 + (8 - var(--i)) * .028));
  box-shadow: 0 12px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
  /* top sheets sit further right — the fan opens toward the sun.
     The un-revealed offset is negative: sheets drift in from the left, away
     from the legend, so a mid-scrub sheet never crosses the labels. */
  transform:
    skewX(-24deg)
    translateX(calc((8 - var(--i)) * var(--fan) - (1 - var(--lp)) * 18px))
    translateY(calc((1 - var(--lp)) * -12px));
  opacity: var(--lp);
  will-change: opacity, transform;
}
/* specular sweep — brighter on the sun-facing top sheets */
.nl::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255, calc(.05 + (8 - var(--i)) * .016)) 50%, transparent 60%);
}
.nano-sun {
  position: absolute; top: -6%; right: -4%; width: 2px; height: 46%;
  background: linear-gradient(var(--blue-dark), transparent);
  transform: rotate(24deg); transform-origin: top center;
  opacity: calc(.2 + var(--p, 1) * .8);
  box-shadow: 0 0 14px 2px rgba(41,151,255,.5);
}

.nano-legend { list-style: none; margin: 0; padding: 0; }
.nano-legend li {
  --lp: clamp(0, calc((var(--p, 1) * 10) - var(--i)), 1);
  height: var(--row); padding-left: 26px; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  opacity: var(--lp);
  transform: translateX(calc((1 - var(--lp)) * 8px));
  will-change: opacity, transform;
}
/* hairline + dot pointing back at this label's own sheet */
.nano-legend li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px;
  background: rgba(255,255,255,.22);
}
.nano-legend li::after {
  content: ""; position: absolute; left: 16px; top: 50%; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: var(--blue-dark);
}
.nano-legend b {
  font-family: var(--font-head); font-weight: 600; font-size: .94rem;
  color: var(--on-dark); letter-spacing: -.01em; line-height: 1.2;
}
.nano-legend span { font-size: .8rem; color: var(--on-dark-muted); line-height: 1.25; }

@media (max-width: 860px) {
  .layers-scene { grid-template-columns: 1fr; gap: 20px; }
  .nano { --row: 38px; --fan: 4px; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px; }
  .nano-legend b { font-size: .86rem; }
  .nano-legend span { font-size: .74rem; }
  /* the ray needs room above the stack it can't have here — it lands on the copy */
  .nano-sun { display: none; }
}

/* ---------- Reduced motion / no-JS: show everything, unpin scenes ---------- */
@media (prefers-reduced-motion: reduce) {
  html [data-reveal], html [data-stagger] > *, html .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scene { height: auto !important; }
  html.js .scene-stage { position: static !important; height: auto !important; min-height: 0; padding: 96px 0; }
  html.js .grade-slide { position: relative !important; opacity: 1 !important; transform: none !important; margin-bottom: 20px; }
  .hero-content, .hero-glow, .hero-pane, .scroll-hint { transform: none !important; opacity: 1; }
  .hero-pane { opacity: .35; }
  .scroll-hint svg { animation: none; }
  .nl, .nano-legend li { opacity: 1 !important; }
  /* must read --fan, not a literal: the mobile block lowers it and the sheet
     width is derived from it — a hardcoded value here overflows the legend */
  .nl { transform: skewX(-24deg) translateX(calc((8 - var(--i)) * var(--fan))) !important; }
  .nano-legend li { transform: none !important; }
  .nano-sun { opacity: .6 !important; }
}

@media (max-width: 760px) {
  :root { --scene-hero-h: 200vh; --scene-grade-h: 280vh; --scene-layers-h: 200vh; }
  .grade-viewport { min-height: 500px; }
}

/* ════════════════════════════════════════════════════════════════════
   FEATURE 1 · Film-tint intensity selector (products.html)
   Segmented control (iOS-style) drives a CSS overlay over a clean mock
   "view through glass" scene. Single blue accent. Transition .4s ease.
   ════════════════════════════════════════════════════════════════════ */
.tint-demo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.tint-stage {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; min-height: 260px;
  border: 1px solid var(--hair); background: var(--parchment);
}
.tint-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* --glass: กรอบกระจกหน้าใน tint-view.jpg (4:3) — ไล่ตามเสา A ที่โค้งด้านซ้าย
   ฟิล์มมืดเฉพาะกระจก เสา/แดชบอร์ดไม่มืด. เปลี่ยนรูป = ต้องวัดพิกัดนี้ใหม่ */
.tint-stage { --glass: polygon(3% 0%, 100% 0%, 100% 76%, 57% 77.5%, 21% 78%, 14% 64%, 7% 27%); }
.tint-overlay { position: absolute; inset: 0; background: #0b1017; opacity: var(--t, .26); transition: opacity .4s var(--ease-out); clip-path: var(--glass); }
.tint-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 44%, rgba(255,255,255,.14) 50%, transparent 56%); clip-path: var(--glass); }
.tint-frame { position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); pointer-events: none; }
.tint-caption { position: absolute; left: 15px; bottom: 13px; font-family: var(--font-head); font-size: .82rem; color: #fff; opacity: .92; text-shadow: 0 1px 3px rgba(0,0,0,.45); transition: color .4s; }
.seg { display: flex; width: 100%; max-width: 440px; background: #e8e8ed; border-radius: 980px; padding: 4px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; font-family: var(--font-head); font-weight: 500; font-size: .92rem; color: var(--ink); padding: 12px 6px; border-radius: 980px; cursor: pointer; transition: background .25s var(--ease-out), box-shadow .25s; }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tint-read { margin-top: 26px; display: grid; gap: 16px; max-width: 440px; }
.tint-read .k { font-size: .88rem; color: var(--faint); display: flex; justify-content: space-between; margin-bottom: 8px; }
.tint-read .k b { color: var(--ink); font-family: var(--font-head); font-weight: 600; }
.tint-read .bar { height: 6px; border-radius: 999px; background: #e8e8ed; overflow: hidden; }
.tint-read .bar i { display: block; height: 100%; width: var(--v, 50%); background: var(--blue); border-radius: 999px; transition: width .4s var(--ease-out); }
@media (max-width: 900px) {
  .hero-pane-layer { justify-content: center; padding-inline: 22px; }
  .hero-pane { width: min(560px, 80vw); height: min(320px, 40vh); opacity: .3; }
}
@media (max-width: 760px) {
  .tint-demo { grid-template-columns: 1fr; gap: 26px; }
  .seg button { font-size: .86rem; padding: 12px 4px; }
}

/* ════════════════════════════════════════════════════════════════════
   FEATURE 2 · Cursor spotlight — index dark hero only, desktop pointer.
   Very subtle blue glow tracking the cursor. Off on mobile + reduced-motion
   (JS also skips init in those cases). Layer is pointer-events:none.
   ════════════════════════════════════════════════════════════════════ */
.hero-spotlight {
  z-index: 2;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 42%), rgba(41,151,255,.14), rgba(41,151,255,0) 60%);
  opacity: 0; transition: opacity .5s var(--ease-out); mix-blend-mode: screen;
}
.hero-spotlight.on { opacity: 1; }
@media (max-width: 720px) { .hero-spotlight { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-spotlight { display: none; } }