/* ============================================================================
   LOXA — Obsidian Cinematic
   Award-level dark studio design system · RTL Hebrew · mobile-first
   One matte-black stage. The lock is LIT out of darkness. Gold is metal.
   Cyan only ever means "the lock is alive".
   ============================================================================ */

/* ---- registered custom props (smoothly interpolatable) ---- */
@property --angle    { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --light-x  { syntax: '<number>'; inherits: false; initial-value: 0;    }

:root {
  /* ============================================================
     CANONICAL DESIGN TOKENS — single source of truth
     (LOXA_design_tokens.md · Obsidian Cinematic)
     ============================================================ */
  /* ── צבעים ── */
  --ink:          #0C0C0D;
  --ink-2:        #121214;
  --surface:      #17171A;
  --surface-2:    #202024;
  --cream:        #F2EDE1;
  --gold:         #C6A664;
  --gold-soft:    #D9C290;
  --gold-deep:    #8E7239;
  --gold-metal:   linear-gradient(135deg, #E7D6AB 0%, #C6A664 45%, #9A7C42 100%);
  --live:         #36CFC2;
  --text:         #ECE7DD;
  --text-muted:   #A29C90;
  --text-dim:     #6E695F;
  --on-cream:     #1A1A1C;
  --on-cream-muted:#5A564E;
  --line:         #2A2A2E;
  --line-gold:    rgba(198,166,100,0.22);
  --line-cream:   #D9D3C6;

  /* ── טיפוגרפיה ── */
  --font-display: "Assistant", system-ui, sans-serif;
  --font-body:    "Heebo", "Assistant", system-ui, sans-serif;
  --font-latin:   "Jost", system-ui, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, monospace;

  --fs-display:   clamp(2.75rem, 6.5vw, 5rem);
  --fs-h1:        clamp(2.1rem, 4.8vw, 3.4rem);
  --fs-h2:        clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-h3:        clamp(1.3rem, 2.2vw, 1.6rem);
  --fs-body-lg:   1.15rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-micro:     0.72rem;

  --lh-tight:     1.1;
  --lh-snug:      1.35;
  --lh-body:      1.75;
  --tracking-micro: 0.2em;
  --tracking-wide:  0.04em;

  /* ── מרווחים ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 10vw, 8rem);
  --maxw:      1200px;
  --maxw-text: 68ch;

  /* ── פינות ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ── צללים וזוהר ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 10px 30px rgba(0,0,0,.45);
  --shadow-3: 0 30px 70px rgba(0,0,0,.5);
  --shadow-physical: 0 1px 2px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);
  --glow-gold: 0 0 48px rgba(198,166,100,.22);
  --glow-live: 0 0 16px rgba(54,207,194,.55);

  /* ── תנועה ── */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.76,0,.24,1);
  --dur-fast: 180ms;
  --dur:      380ms;
  --dur-slow: 720ms;

  /* ── derived — אפקטים/פריסה שאינם בסט הקנוני, בנויים מערכיו ── */
  --stage-top:   radial-gradient(120% 90% at 50% -10%, #2a2622, #1b1916 38%, #100f0d 100%);
  --gold-leaf:   conic-gradient(from var(--angle,0deg), var(--gold-deep), var(--gold-soft), var(--gold), var(--gold-soft), var(--gold-deep));
  --line-gold-2: rgba(198,166,100,.42);
  --gutter:      clamp(20px,6vw,80px);
  color-scheme: dark;
}

/* ---- reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--text); background:var(--ink); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3{ font-weight:500; line-height:var(--lh-tight); }
::selection{ background:var(--gold); color:#1a140a; }
:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--live); border-radius:var(--radius-sm); }

/* ---- layout utils ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.dark-stage{ background:var(--ink); position:relative; }
.dark-stage::before{ content:""; position:absolute; inset:0; background:var(--stage-top); opacity:.7; pointer-events:none; }
.dark-stage > *{ position:relative; z-index:1; }

/* Latin micro-label */
.eyebrow{
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-micro);
  letter-spacing:var(--tracking-micro); text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.9em; direction:ltr; unicode-bidi:isolate;
}
.eyebrow::before{ content:""; inline-size:26px; block-size:1px; background:var(--line-gold-2); }
.section-head{ max-width:62ch; margin-block-end:clamp(36px,5vw,64px); }
.section-head h2{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2); margin-block:.4em .3em; color:var(--text); }
.section-head .lead{ font-size:var(--fs-body-lg); color:var(--text-muted); font-weight:300; max-width:54ch; }
.lead{ font-size:var(--fs-body-lg); color:var(--text-muted); font-weight:300; }
.gold-word{ background:var(--gold-metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---- film grain overlay (one tiny SVG, fixed) ---- */
.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================ WORDMARK (gold-leaf, keyhole-O) ============================ */
.wordmark{
  display:inline-flex; align-items:center; gap:.04em; direction:ltr; unicode-bidi:isolate;
  font-family:var(--font-latin); font-weight:400; letter-spacing:.34em; font-size:1.4rem; line-height:1;
  background:var(--gold-leaf); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; user-select:none;
}
.wordmark__o{ inline-size:.82em; block-size:.82em; margin-inline:.1em .34em; translate:0 .02em; }
.wordmark__o circle{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.wordmark__o rect{ fill:var(--gold-soft); }
.wordmark--lg{ font-size:clamp(2rem,6vw,3.4rem); letter-spacing:.3em; }
/* original brand logo (image) — used in header/footer */
.brandmark{ display:block; block-size:26px; inline-size:auto; }
.wordmark--lg .brandmark{ block-size:clamp(34px,6vw,52px); }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:90;
  transition:background var(--dur-slow) var(--ease-out), border-color var(--dur-slow);
  border-block-end:1px solid transparent; padding-block-start:env(safe-area-inset-top);
}
.site-header__in{ display:flex; align-items:center; justify-content:space-between; block-size:78px; }
.site-header.scrolled{ background:rgba(14,13,11,.82); backdrop-filter:blur(14px) saturate(1.1); border-block-end-color:var(--line-gold); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,36px); }
.nav a{ font-size:.95rem; color:var(--text-muted); position:relative; padding-block:6px; transition:color var(--dur-fast); }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--text); }
.nav a[aria-current="page"]::after{ content:""; position:absolute; inset-block-end:0; inset-inline:0; block-size:1px; background:var(--gold); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; inline-size:44px; block-size:44px; position:relative; }
.nav-toggle span{ position:absolute; inset-inline:11px; block-size:1.5px; background:var(--text); transition:.35s var(--ease-out); }
.nav-toggle span:nth-child(1){ inset-block-start:17px; } .nav-toggle span:nth-child(2){ inset-block-start:50%; } .nav-toggle span:nth-child(3){ inset-block-end:17px; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-weight:500; font-size:.96rem; padding:.85em 1.7em; border-radius:var(--radius-pill); transition:all var(--dur-fast) var(--ease-out); min-block-size:44px; }
.btn--gold{ background:var(--gold-metal); color:#1c150a; box-shadow:var(--glow-gold); }
.btn--gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn--ghost{ border:1px solid var(--line-gold-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--gold); color:#fff; box-shadow:var(--glow-gold); }
.btn--text{ padding-inline:0; color:var(--text); gap:.5em; }
.btn--text .ar{ transition:transform var(--dur-fast); }
.btn--text:hover .ar{ transform:translateX(-5px); } /* RTL forward = leftwards */

/* ---- touch / press feedback (no hover on mobile) ---- */
.btn:active{ transform:scale(.97); }
.btn--gold:active{ filter:brightness(.96); transform:translateY(0) scale(.97); }
.teaser:active, .card:active{ transform:scale(.985); border-color:var(--line-gold-2); }
.chip:active{ transform:scale(.95); }
.nav-toggle:active span{ background:var(--gold); }
.nav a:active, .fcols a:active, .quick-actions .btn:active{ color:var(--gold); }

/* ---- mobile drawer ---- */
.drawer{ position:fixed; inset:0; z-index:95; background:rgba(16,15,13,.96); backdrop-filter:blur(16px);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); display:grid; align-content:center; gap:6px;
  padding:env(safe-area-inset-top) var(--gutter) env(safe-area-inset-bottom); }
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--font-display); font-weight:500; font-size:2rem; color:var(--text); padding-block:14px; border-block-end:1px solid var(--line-gold); }
.drawer a:last-of-type{ border:none; }
.drawer .btn{ margin-block-start:18px; justify-content:center; }
.drawer .btn--gold{ color:#1c150a; font-family:var(--font-body); font-weight:500; border:none; }
.drawer__close{ position:absolute; inset-block-start:max(20px,env(safe-area-inset-top)); inset-inline-start:var(--gutter); inline-size:44px; block-size:44px; color:var(--text); font-size:1.6rem; }

/* ============================ HERO (spotlight reveal) ============================ */
.hero{ position:relative; min-block-size:100svh; display:flex; align-items:center; overflow:hidden; background:var(--ink); padding-block-start:78px; }
.hero__vignette{ position:absolute; inset:0; background:var(--stage-top); z-index:0; }
.hero__cone{ position:absolute; inset-block-start:-6%; inset-inline-start:50%; translate:-50% 0; inline-size:min(80vw,720px); block-size:120%;
  background:radial-gradient(60% 70% at 50% 0%, rgba(231,211,164,.14), rgba(194,163,107,.05) 40%, transparent 70%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); z-index:0; opacity:0; animation:coneIn var(--dur-slow) var(--ease-out) .25s forwards; }
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:var(--space-6); width:100%; align-items:center; }
.hero__copy{ text-align:start; }
.hero__eyebrow{ margin-block-end:var(--space-5); opacity:0; animation:fadeUp var(--dur-slow) var(--ease-out) .9s forwards; }
.hero h1{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-display); line-height:var(--lh-tight); color:var(--text); }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; transform:translateY(102%); animation:wordRise var(--dur-slow) var(--ease-out) forwards; }
.hero h1 .line:nth-child(1) > span{ animation-delay:1s; }
.hero h1 .line:nth-child(2) > span{ animation-delay:1.12s; }
.hero__tag{ font-family:var(--font-latin); font-weight:300; font-size:1.05rem; color:var(--text-muted); letter-spacing:var(--tracking-wide); margin-block-start:var(--space-5); direction:ltr; unicode-bidi:isolate; opacity:0; animation:fadeUp var(--dur-slow) var(--ease-out) 1.35s forwards; }
.hero__cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-block-start:var(--space-7); opacity:0; animation:fadeUp var(--dur-slow) var(--ease-out) 1.5s forwards; }

.hero__stage{ position:relative; display:grid; place-items:center; }
.hero__stage::before{ content:""; position:absolute; inline-size:86%; aspect-ratio:.82; border-radius:50%; background:radial-gradient(circle, rgba(231,211,164,.14), rgba(150,162,184,.04) 44%, transparent 66%); filter:blur(30px); z-index:0; }
.hero__pool{ position:absolute; inset-block-end:2%; inline-size:70%; block-size:24%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(231,211,164,.32), rgba(194,163,107,.10) 55%, transparent 75%); filter:blur(8px); z-index:0; }
.hero__lock{ position:relative; z-index:2; inline-size:auto; max-block-size:84svh;
  filter:drop-shadow(0 34px 55px rgba(0,0,0,.55));
  opacity:0; animation:lockRise var(--dur-slow) var(--ease-out) .35s forwards; }
/* long cast shadow (3rd layer) */
.hero__cast{ position:absolute; inset-block-end:4%; inset-inline-start:50%; z-index:1; inline-size:46%; block-size:58%;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent 70%); transform:translateX(-50%) skewX(-18deg) scaleY(.5); filter:blur(14px); opacity:.7; }
.hero__scroll{ position:absolute; inset-block-end:24px; inset-inline-start:var(--gutter); display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text-dim); z-index:3; direction:ltr; }
.hero__scroll i{ inline-size:1px; block-size:40px; background:linear-gradient(var(--gold), transparent); animation:scrollPulse 2.4s ease-in-out infinite; transform-origin:top; }

@keyframes coneIn{ to{ opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes wordRise{ to{ transform:none; } }
@keyframes lockRise{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.5); opacity:.5;} 50%{ transform:scaleY(1); opacity:1;} }

/* ============================ TRUST STRIP ============================ */
.trust{ border-block:1px solid var(--line-gold); background:var(--surface); }
.trust__row{ display:flex; align-items:center; gap:clamp(1.6rem,4vw,3.4rem); flex-wrap:wrap; justify-content:center; padding-block:22px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); direction:ltr; }
.trust__row span{ display:inline-flex; align-items:center; gap:.7em; }
.trust__row .dot{ inline-size:4px; block-size:4px; border-radius:50%; background:var(--gold); }

/* ============================ PRODUCT FILM (sticky, desktop) ============================ */
.film{ position:relative; }
.film__stage{ position:sticky; inset-block-start:0; min-block-size:100svh; display:grid; place-items:center; overflow:hidden; }
.film__light{ position:absolute; inset:0; background:radial-gradient(50% 50% at var(--lx,50%) 30%, rgba(231,211,164,.16), transparent 60%); z-index:0; }
.film__lock{ position:relative; z-index:2; max-block-size:92svh; inline-size:auto; filter:drop-shadow(0 36px 60px rgba(0,0,0,.55)); }
.film__callout{ position:absolute; z-index:3; max-inline-size:230px; opacity:0; transform:translateY(14px); }
.film__callout .eyebrow{ margin-block-end:8px; }
.film__callout h3{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--text); }
/* brand pillar line-icon (gold) */
.pillar-ico{ display:flex; color:var(--gold); margin-block-end:14px; }
.pillar-ico svg{ inline-size:30px; block-size:30px; }
.film__callout p{ font-size:.92rem; color:var(--text-muted); margin-block-start:4px; }
.film__callout.on{ opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.film__lines{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.film__lines line{ stroke:var(--line-gold-2); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; }

/* ============================ FEATURE ROWS (Product) ============================ */
.feature{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.feature + .feature{ margin-block-start:clamp(56px,9vw,120px); }
.feature__media{ position:relative; display:flex; align-items:center; justify-content:center; block-size:clamp(400px,52vw,580px); border-radius:var(--radius-lg);
  background:radial-gradient(64% 58% at 50% 42%, #3b352b, var(--surface) 56%, var(--ink)); border:1px solid var(--line-gold); overflow:hidden; padding:7%; }
.feature__media img{ max-block-size:100%; max-inline-size:100%; inline-size:auto; block-size:auto; filter:brightness(1.04) contrast(1.02) drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.feature__media--jewel{ background:var(--ink); }
.feature h3{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--text); margin-block:.4em .4em; }
.f-list{ margin-block-start:1.4em; display:grid; gap:1em; }
.f-list li{ display:grid; grid-template-columns:auto 1fr; gap:14px; color:var(--text-muted); }
.f-list .tk{ color:var(--gold); }
.f-list b{ color:var(--text); font-weight:500; }

/* live activity log (faux device) */
.applog{ inline-size:min(84%,300px); background:var(--surface); border:1px solid var(--line-gold); border-radius:26px; padding:22px 18px; box-shadow:var(--shadow-3); }
.applog__top{ display:flex; align-items:center; justify-content:space-between; }
.applog__brand{ font-family:var(--font-latin); letter-spacing:.3em; font-size:.7rem; color:var(--text); direction:ltr; }
.applog__live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); direction:ltr; }
.applog__live::before{ content:""; inline-size:6px; block-size:6px; border-radius:50%; background:var(--live); box-shadow:var(--glow-live); animation:blink 3.4s infinite; }
.applog__ring{ inline-size:84px; block-size:84px; margin:22px auto 8px; border-radius:50%; border:1.5px solid var(--live); box-shadow:var(--glow-live); display:grid; place-items:center; color:var(--live); }
.applog__ring svg{ inline-size:30px; block-size:30px; }
.applog__title{ text-align:center; color:var(--text); font-weight:500; }
.applog__sub{ text-align:center; color:var(--text-dim); font-size:.74rem; margin-block-end:14px; }
.applog__log{ border-block-start:1px solid var(--line-gold); padding-block-start:12px; display:grid; gap:11px; }
.applog__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--text); opacity:0; transform:translateY(6px); }
.applog__row.on{ opacity:1; transform:none; transition:.5s var(--ease-out); }
.applog__row .t{ font-family:var(--font-mono); font-size:.7rem; color:var(--live); direction:ltr; }
@keyframes blink{ 0%,92%,100%{ opacity:1;} 95%{ opacity:.25;} }

/* ============================ TEASERS (Home → Product) ============================ */
.teasers{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.teaser{ position:relative; padding:clamp(26px,4vw,40px); border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line-gold); overflow:hidden; transition:border-color var(--dur-fast); }
.teaser:hover{ border-color:var(--line-gold-2); }
.teaser h3{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--text); margin-block:.5em .3em; }
.teaser p{ color:var(--text-muted); font-size:.96rem; margin-block-end:1.1em; }

/* ============================ BRAND STATEMENT BAND ============================ */
.statement{ text-align:center; background:var(--ink); position:relative; overflow:hidden; }
.statement::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 50%, rgba(194,163,107,.10), transparent 70%); }
.statement__mark{ position:relative; font-family:var(--font-latin); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-size:.78rem; direction:ltr; unicode-bidi:isolate; }
.statement h2{ position:relative; font-family:var(--font-display); font-weight:500; font-size:var(--fs-display); line-height:1.04; margin-block:.4em auto; max-width:16ch; margin-inline:auto;
  background:var(--gold-leaf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.statement p{ position:relative; color:var(--text-muted); max-width:50ch; margin-inline:auto; font-weight:300; }
.statement .rule{ position:relative; inline-size:56px; block-size:1px; background:var(--gold); margin:28px auto; }

/* ============================ PAPER INSERT (cream relief) ============================ */
.paper{ background:linear-gradient(160deg,var(--cream),var(--cream)); color:var(--on-cream); }
.paper h2,.paper h3{ color:var(--on-cream); font-family:var(--font-display); }
.paper .lead,.paper p{ color:var(--on-cream-muted); }
.paper .eyebrow{ color:var(--gold-deep); }
.paper .eyebrow::before{ background:var(--gold-deep); }
.paper .gold-word{ background:var(--gold-metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.paper .spec{ width:100%; border-collapse:collapse; margin-block-start:var(--space-6); }
.paper .spec th,.paper .spec td{ text-align:start; padding:14px 4px; border-block-end:1px solid rgba(27,25,22,.14); font-size:.96rem; }
.paper .spec th{ color:var(--gold-deep); font-family:var(--font-mono); font-weight:500; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; width:42%; }
.paper .spec td [dir="ltr"], .spec-hero [dir="ltr"]{ white-space:nowrap; }
.paper .pullquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,4.5vw,3.2rem); line-height:1.2; max-width:18ch; }

/* ============================ CARDS / GRID (distributors) ============================ */
.cards{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.card{ padding:clamp(22px,3vw,32px); border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--line-gold); transition:border-color var(--dur-fast), transform var(--dur-fast); }
.card:hover{ border-color:var(--line-gold-2); transform:translateY(-3px); }
.card:focus-within{ box-shadow:0 0 0 2px var(--live); }
.card h3{ font-family:var(--font-display); font-size:1.25rem; color:var(--text); }
.card .meta{ color:var(--text-muted); font-size:.92rem; margin-block:.4em .8em; }
.card a[href^="tel"]{ color:var(--gold); direction:ltr; unicode-bidi:isolate; }
.filterbar{ display:flex; gap:10px; flex-wrap:wrap; margin-block-end:var(--space-6); }
.chip{ padding:.5em 1.1em; border-radius:var(--radius-pill); border:1px solid var(--line-gold); color:var(--text-muted); font-size:.9rem; min-block-size:40px; }
.chip[aria-pressed="true"]{ border-color:var(--gold); color:var(--text); }

/* ============================ FORM (contact) ============================ */
.form{ display:grid; gap:var(--space-6); max-width:560px; }
.field{ position:relative; }
.field label{ display:block; font-size:.85rem; color:var(--text-muted); margin-block-end:8px; }
.field input,.field textarea{ width:100%; font:inherit; font-size:1rem; color:var(--text); background:transparent;
  border:none; border-block-end:1px solid var(--line-gold-2); padding:.7em 0; transition:border-color var(--dur-fast); min-block-size:44px; }
.field input:focus,.field textarea:focus{ outline:none; border-block-end-color:var(--live); box-shadow:0 1px 0 var(--live); }
.field textarea{ resize:vertical; min-block-size:120px; }
.field input[dir="ltr"]{ text-align:start; }
.quick-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-block-start:var(--space-5); }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--ink); color:var(--text-muted); padding-block:clamp(52px,7vw,84px) calc(28px + env(safe-area-inset-bottom)); }
.site-footer__top{ display:grid; grid-template-columns:1fr; gap:var(--space-7); padding-block-end:var(--space-7); border-block-end:1px solid var(--line-gold); }
.site-footer__tag{ font-family:var(--font-mono); letter-spacing:.24em; text-transform:uppercase; font-size:.72rem; color:var(--text-dim); margin-block-start:16px; direction:ltr; }
.fcols{ display:flex; gap:clamp(32px,6vw,80px); flex-wrap:wrap; }
.fcols h5{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-block-end:14px; }
.fcols a{ display:block; color:var(--text-muted); padding-block:6px; font-size:.95rem; transition:color var(--dur-fast); }
.fcols a:hover{ color:var(--text); }
.site-footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block-start:24px; color:var(--text-dim); font-size:.84rem; }

/* ---- page hero (inner pages) ---- */
.page-hero{ position:relative; padding-block:calc(78px + clamp(48px,9vw,110px)) clamp(40px,7vw,90px); overflow:hidden; background:var(--ink); }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-display); line-height:1.02; color:var(--text); margin-block:.3em .2em; max-width:18ch; }
.page-hero .lead{ max-width:52ch; }

/* ---- prose (blog post / legal) ---- */
.prose{ max-width:68ch; }
.prose h2{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--text); margin-block:1.7em .5em; }
.prose h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--text); margin-block:1.3em .4em; }
.prose p,.prose li{ color:var(--text-muted); margin-block-end:1em; }
.prose strong{ color:var(--text); font-weight:500; }
.prose ul{ padding-inline-start:1.2em; list-style:disc; }
.prose a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.prose .updated{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--text-dim); }
/* ---- blog list ---- */
.posts{ display:grid; gap:0; max-width:760px; }
.post-row{ display:grid; gap:6px; padding-block:clamp(22px,4vw,34px); border-block-end:1px solid var(--line-gold); }
.post-row .date{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); direction:ltr; }
.post-row h2{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); color:var(--text); transition:color var(--dur-fast); }
.post-row a:hover h2{ color:var(--gold-soft); }
.post-row p{ color:var(--text-muted); }

/* ============================ REVEAL (IntersectionObserver) ============================ */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal[data-d="1"].in{ transition-delay:.1s; } .reveal[data-d="2"].in{ transition-delay:.2s; } .reveal[data-d="3"].in{ transition-delay:.3s; }
.clip-rise{ clip-path:inset(100% 0 0 0); }
.clip-rise.in{ clip-path:inset(0 0 0 0); transition:clip-path var(--dur-slow) var(--ease-out); }

/* ============================ CUSTOM CURSOR (desktop only) ============================ */
.cursor{ position:fixed; inset-block-start:0; inset-inline-start:0; inline-size:26px; block-size:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(231,211,164,.5), transparent 70%); mix-blend-mode:screen; pointer-events:none; z-index:200; translate:-50% -50%; display:none; }

/* ============================ RESPONSIVE ============================ */
@media (min-width:768px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
  .hero__copy{ order:1; } .hero__stage{ order:2; }
  .feature{ grid-template-columns:1fr 1fr; }
  .feature--rev .feature__media{ order:2; }
  .teasers{ grid-template-columns:repeat(3,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .site-footer__top{ grid-template-columns:1fr auto; align-items:start; }
}
@media (min-width:1024px){
  .cards{ grid-template-columns:repeat(3,1fr); }
  .cursor{ display:block; }
}
/* mobile: nav -> hamburger */
@media (max-width:767px){
  .nav{ display:none; }
  .header-cta .btn--ghost{ display:none; }
  .nav-toggle{ display:block; }
  .hero__scroll{ display:none; }
  :root{ --tracking-micro:.26em; }

  /* ---- hero: centred, intentional, full-width CTA ---- */
  .hero{ min-block-size:auto; padding-block:clamp(104px,26vw,138px) clamp(40px,11vw,64px); }
  .hero__copy{ text-align:center; }
  .hero__eyebrow{ display:flex; justify-content:center; }
  .hero h1{ font-size:clamp(2.7rem,12.5vw,3.7rem); }
  .hero__tag{ text-align:center; }
  .hero__cta{ flex-direction:column; align-items:center; gap:14px; margin-block-start:var(--space-6); }
  .hero__cta > .btn--gold{ inline-size:100%; max-inline-size:340px; justify-content:center; padding-block:1.05em; }
  .hero__cta > .btn--text{ inline-size:auto; justify-content:center; }
  .hero__stage{ margin-block-start:clamp(26px,9vw,50px); }
  .hero__lock{ max-block-size:52svh; }

  /* ---- inner page-hero: tighter top, less dead space under the header ---- */
  .page-hero{ padding-block:calc(78px + clamp(28px,7vw,44px)) clamp(28px,7vw,52px); }
  .page-hero h1{ font-size:clamp(2.5rem,11vw,3.4rem); }

  /* ---- section rhythm: a touch tighter on small screens ---- */
  :root{ --section-y:clamp(3.25rem,11vw,5rem); }

  /* ---- comfortable touch targets in the footer ---- */
  .fcols a{ padding-block:9px; }
}

/* ---- product film layout (pinned desktop / stacked mobile) ---- */
.film{ min-block-size:auto; }
.film__pillars{ display:contents; }
/* ---- mobile/tablet: stacked cards (BASE — safe without JS / under reduced-motion) ---- */
@media (max-width:1023px){
  .film__stage{ position:static; min-block-size:auto; display:block; padding-block:var(--section-y); }
  .film__lock{ max-block-size:62svh; margin-inline:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
  .film__light{ display:none; }
  .film__pillars{ display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-block-start:var(--space-7); max-width:660px; margin-inline:auto; }
  .film__callout{ position:static; opacity:1; transform:none; max-inline-size:none; padding:20px 22px; border:1px solid var(--line-gold); border-radius:var(--radius-md); background:var(--surface); }
}
@media (min-width:560px) and (max-width:1023px){ .film:not(.film--cinematic) .film__pillars{ grid-template-columns:1fr 1fr; } }

/* ---- mobile/tablet CINEMATIC (enabled only by JS when motion is allowed): lock pins, one callout at a time ---- */
@media (max-width:1023px){
  .film--cinematic{ min-block-size:280vh; }
  .film--cinematic .film__stage{ position:sticky; inset-block-start:0; min-block-size:100svh; display:grid; place-items:center; overflow:hidden; padding-block:0; }
  .film--cinematic .film__lock{ max-block-size:56svh; }
  .film--cinematic .film__light{ display:block; }
  .film--cinematic .film__pillars{ position:absolute; inset-block-end:5%; inset-inline:var(--gutter); display:block; min-block-size:150px; margin:0; max-width:none; }
  .film--cinematic .film__callout{ position:absolute; inset-block-end:0; inset-inline:0; max-inline-size:none; text-align:center;
    opacity:0; transform:translateY(16px);
    background:rgba(16,15,13,.74); -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1); }
  .film--cinematic .film__callout.on{ opacity:1; transform:none; transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .film--cinematic .film__callout .pillar-ico, .film--cinematic .film__callout .eyebrow{ justify-content:center; }
}
@media (min-width:1024px){
  .film{ min-block-size:300vh; }
  .film__c1{ inset-block-start:20%; inset-inline-start:5%; }
  .film__c2{ inset-block-start:33%; inset-inline-end:5%; }
  .film__c3{ inset-block-end:28%; inset-inline-start:7%; }
  .film__c4{ inset-block-end:15%; inset-inline-end:7%; }
}

/* ============================ REDUCED MOTION (master switch) ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .hero__lock{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero h1 .line > span{ transform:none !important; }
  .hero__cone{ opacity:1 !important; }
  .grain{ display:none; }
  .reveal,.clip-rise{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .applog__row{ opacity:1 !important; transform:none !important; }
  .cursor{ display:none !important; }
}