/* =========================================================================
   Clear Pages Studios — PREMIUM skin + effects layer
   Loaded AFTER styles.css. Dark-default cinematic theme, neutral-cream light
   mode, aurora background, glassmorphism, scroll-reveal, spotlight cards,
   marquee, count-up stats, refined buttons. Respects reduced-motion.
   ========================================================================= */

/* ---------- palette: DARK is the default ---------- */
:root,:root[data-theme="dark"]{
  --bg:#0E0F13;
  --canvas:#0E0F13;
  --canvas-2:#14161C;
  --card:rgba(28,31,40,.66);          /* glass panel */
  --card-solid:#181B22;
  --card-2:#1F232C;
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);
  --ink:#F3F1EC;
  --muted:#A6AAB4;
  --faint:#71757F;

  --primary:#E3A85C;                   /* warm honey gold */
  --primary-hover:#EFB873;
  --primary-ink:#1A1308;
  --accent:#C3A2E6;                    /* soft violet (decorative) */
  --accent-2:#6FD6C2;                  /* teal (decorative) */
  --accent-text:#E9C691;
  --save-text:#7FE0BE;

  --ring:rgba(227,168,92,.6);
  --glow:rgba(227,168,92,.45);
  --header-bg:rgba(14,15,19,.6);
  --announce-bg:#08090C;
  --newsletter-bg:linear-gradient(135deg,#16181F,#0E0F13);
  --newsletter-border:1px solid var(--border);

  /* aurora blobs */
  --au1:rgba(227,168,92,.20);
  --au2:rgba(150,110,210,.22);
  --au3:rgba(120,90,200,.15);

  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --grad-soft:linear-gradient(135deg,rgba(227,168,92,.16),rgba(150,110,210,.16));
}

/* ---------- palette: neutral CREAM light mode (not bright) ---------- */
:root[data-theme="light"]{
  --bg:#E7E0D2;
  --canvas:#E7E0D2;
  --canvas-2:#EDE7DA;
  --card:rgba(250,246,238,.72);
  --card-solid:#F5F0E5;
  --card-2:#FBF7EE;
  --border:rgba(42,39,34,.12);
  --border-2:rgba(42,39,34,.22);
  --ink:#2A2722;
  --faint:#9A9184;

  --primary:#A86020;                   /* deepened amber — AA on cream + with ink label */
  --primary-hover:#9C591C;
  --primary-ink:#FFF8EE;
  --accent:#7A57A6;
  --accent-2:#2C8C7A;
  --accent-text:#87571C;
  --muted:#655F54;
  --save-text:#2F7D5F;

  --ring:rgba(178,106,38,.5);
  --glow:rgba(178,106,38,.3);
  --header-bg:rgba(231,224,210,.7);
  --announce-bg:#2A2722;
  --newsletter-bg:linear-gradient(135deg,#26221C,#1C1813);
  --newsletter-border:1px solid transparent;

  --au1:rgba(178,106,38,.12);
  --au2:rgba(122,87,166,.10);
  --au3:rgba(44,140,122,.10);

  --shadow:0 1px 2px rgba(45,41,38,.06),0 16px 40px rgba(45,41,38,.10);
  --shadow-lg:0 28px 70px rgba(45,41,38,.16);
  --grad-soft:linear-gradient(135deg,rgba(178,106,38,.12),rgba(122,87,166,.12));
}

/* ---------- animated aurora + grain background (global) ---------- */
html{overflow-x:clip}
body{position:relative;background:var(--bg);overflow-x:clip}
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%,var(--au1),transparent 60%),
    radial-gradient(34vmax 34vmax at 85% 18%,var(--au2),transparent 60%),
    radial-gradient(40vmax 40vmax at 70% 88%,var(--au3),transparent 62%);
  filter:blur(8px);
  will-change:transform;contain:layout paint;
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
body::after{ /* fine grain for premium texture */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2vmax,-2vmax,0) scale(1.08)}
  100%{transform:translate3d(-2vmax,1vmax,0) scale(1.04)}
}

/* ---------- glass header ---------- */
.site-header{background:var(--header-bg);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px)}
.nav-links a[aria-current="page"]{background:var(--grad-soft);color:var(--ink)}

/* theme toggle: DARK default shows sun (click → light) */
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}

/* logo swap: DARK default shows the white wordmark */
.logo-light{display:none}
.logo-dark{display:block}
:root[data-theme="light"] .logo-light{display:block}
:root[data-theme="light"] .logo-dark{display:none}

/* ---------- refined buttons (solid + sheen + soft glow, no rainbow) ---------- */
.btn{position:relative;overflow:hidden;border-radius:14px;font-weight:600;letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,border-color .2s}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 6px 22px var(--glow)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 12px 34px var(--glow)}
/* moving sheen */
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:var(--card);border-color:var(--border-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}

/* pills / chips glass */
.pill,.hero-chip{background:var(--grad-soft);border-color:var(--border-2);backdrop-filter:blur(6px)}
.chip{background:var(--card);border-color:var(--border-2);backdrop-filter:blur(6px)}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);box-shadow:0 4px 16px var(--glow)}

/* ---------- hero flourishes ---------- */
.hero{overflow:visible}
.hero h1{color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(100deg,var(--ink) 30%,var(--primary) 60%,var(--ink) 90%);
    background-size:220% auto;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:shineText 9s linear infinite;
  }
}
@keyframes shineText{to{background-position:220% center}}
.hero-covers{perspective:1200px}
.hc-frame{transition:transform .25s ease,box-shadow .3s ease;will-change:transform;box-shadow:var(--shadow-lg)}
.hero-covers:hover .hc-frame{box-shadow:var(--shadow-lg)}
.hc-a{animation:floaty 7s ease-in-out infinite}
.hc-b{animation:floaty 7s ease-in-out infinite .8s}
.hc-c{animation:floaty 7s ease-in-out infinite 1.6s}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* ---------- glass cards + cursor spotlight ---------- */
.card,.tier,.bundle-card,.step,.info-card,.builder,.faq details{
  background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:var(--border)}
.card{position:relative}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(227,168,92,.22),transparent 60%);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--primary) 22%,transparent),transparent 60%)}
.card:hover::after{opacity:1}
.card:hover{border-color:var(--border-2);box-shadow:var(--shadow-lg)}
.cat-tile{background:var(--card);backdrop-filter:blur(8px)}
.cat-tile:hover{border-color:var(--primary)}

/* premium tier highlight */
.tier.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset,0 20px 50px var(--glow)}
.tier.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--grad-soft);opacity:.5}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- stats strip (count-up) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{text-align:center;padding:26px 16px;border:1px solid var(--border);border-radius:18px;
  background:var(--card);backdrop-filter:blur(10px)}
.stat .n{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--primary)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat .n{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.stat .l{color:var(--muted);font-size:.92rem;margin-top:.2em}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--border);padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scrollX 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:1.5rem;color:var(--muted);display:flex;align-items:center;gap:48px;white-space:nowrap}
.marquee span::after{content:"✦";color:var(--primary);font-size:.9rem}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- misc premium polish ---------- */
::selection{background:var(--primary);color:var(--primary-ink)}
html{scrollbar-color:var(--primary) transparent}
.section-head h2{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.5em}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--primary);display:inline-block}
.announce{letter-spacing:.02em}
.announce b{color:var(--primary)}
.newsletter{position:relative;overflow:hidden}
.newsletter::before{content:"";position:absolute;inset:0;background:
  radial-gradient(40vmax 30vmax at 80% -20%,var(--au1),transparent 60%);pointer-events:none}
.newsletter>*{position:relative}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .hero h1{animation:none;background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
  .hc-a,.hc-b,.hc-c{animation:none}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .card::after{transition:none}
  .marquee-track{animation:none}
  .btn-primary::after{display:none}
}

/* ---------- small screens ---------- */
@media (max-width:680px){
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat .n{font-size:2rem}
  .showcase{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){
  .showcase{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .stat .n{font-size:1.7rem}
}

/* ---------- QA polish (focus, tap targets, prefixes, clip fallback) ---------- */
.btn:focus-visible,.btn-ghost:focus-visible,.btn-primary:focus-visible,.chip:focus-visible,
.pill:focus-visible,.hero-chip:focus-visible,.cat-tile:focus-visible,.pick:focus-visible,
.theme-toggle:focus-visible,.hamburger:focus-visible,.nav-links a:focus-visible{
  outline:3px solid var(--primary);outline-offset:3px}
.theme-toggle,.hamburger{min-width:44px;min-height:44px}
.btn-ghost,.pill,.hero-chip,.chip,.cat-tile,.stat{-webkit-backdrop-filter:blur(8px)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{background:none;color:var(--ink);animation:none}
  .stat .n{background:none;color:var(--primary)}
}

/* ---------- bento features grid ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bento-tile{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:26px;overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bento-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.bento-tile.big{grid-column:span 2;grid-row:span 2}
.bento-tile.big h3{font-size:1.3rem}
.bento-tile .tile-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--grad-soft);border:1px solid var(--border);color:var(--primary);flex-shrink:0}
.bento-tile h3{font-size:1.05rem;font-weight:650;color:var(--ink);margin:0;line-height:1.3}
.bento-tile p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.6}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-tile.big{grid-column:span 2;grid-row:span 1}
}
@media (max-width:540px){
  .bento{grid-template-columns:1fr}
  .bento-tile.big{grid-column:span 1}
}

/* ---------- premium how-it-works connector ---------- */
.premium-steps{position:relative}
.premium-steps::before{content:"";position:absolute;top:46px;left:16.6%;right:16.6%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--primary) 22%,var(--accent) 50%,var(--primary) 78%,transparent);
  opacity:.6;pointer-events:none}
.premium-steps .step{position:relative;z-index:1;background:var(--card)}
.premium-steps .num{position:relative;z-index:2;box-shadow:0 0 0 5px var(--card-solid)}
@media (max-width:680px){ .premium-steps::before{display:none} }

/* ===== brand lockup (icon + typography) ===== */
.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand .brand-ico{flex-shrink:0;width:40px;height:40px;border-radius:9px;display:block}
.brand.brand--footer .brand-ico{width:46px;height:46px;border-radius:11px}
.brand-txt{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-name{font-family:var(--serif);font-size:1.05rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand-tag{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media (max-width:480px){
  .brand-ico{width:34px;height:34px}
  .brand-name{font-size:.92rem}
  .brand-tag{display:none}
}

/* ===== edge spacing fixes ===== */
.pick .pk-body{padding:10px 14px 14px}
.pick .pk-title{padding-right:4px}
.pick .pk-price{margin-top:4px}
.card .body{padding:18px 18px 20px}
.card .row{margin-top:10px}
.stat{padding:28px 20px}
.tier{padding:32px}
.bundle-bar{padding:18px 24px}
@media (max-width:680px){ .bundle-bar{padding:16px 18px} .announce{padding:.55rem 20px} }

/* ===== scroll progress bar ===== */
#scroll-progress{position:fixed;top:0;left:0;z-index:9999;height:3px;width:calc(var(--sp,0)*100%);
  background:linear-gradient(90deg,var(--primary),var(--accent));pointer-events:none;box-shadow:0 0 8px var(--glow)}

/* ===== section heading underline draw on reveal ===== */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{content:"";position:absolute;left:50%;bottom:-6px;width:64px;height:3px;border-radius:3px;
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  background:linear-gradient(90deg,var(--primary),var(--accent));transition:transform .6s cubic-bezier(.2,.8,.2,1) .15s}
.section-head.left h2::after{left:0;transform:translateX(0) scaleX(0);transform-origin:left}
.section-head.in h2::after{transform:translateX(-50%) scaleX(1)}
.section-head.left.in h2::after{transform:translateX(0) scaleX(1)}

/* ===== hero covers: parallax headroom + smoothness ===== */
.hero-covers{padding-block:2rem}
.hc-frame{will-change:translate,rotate,scale}

/* ===== reduced motion: freeze scroll fx ===== */
@media (prefers-reduced-motion:reduce){
  #scroll-progress{display:none}
  #cps-bgshift{display:none}
  .section-head h2::after{transition:none;transform:translateX(-50%) scaleX(1)}
  .section-head.left h2::after{transform:translateX(0) scaleX(1)}
}

/* ===== uniform product thumbnails (3:4, contain, no crop, no parallax) ===== */
.card .thumb{aspect-ratio:3/4;background:var(--canvas-2);display:flex;align-items:center;justify-content:center;padding:10px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;overflow:visible}
.card .thumb img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:6px;will-change:auto;transform:none;transition:box-shadow .25s}
.card:hover .thumb img{box-shadow:0 6px 18px rgba(0,0,0,.22)}
.showcase a{aspect-ratio:3/4;background:var(--canvas-2);border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:10px;overflow:visible}
.showcase img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:4px;padding:0}
.pick img{aspect-ratio:3/4;object-fit:contain;object-position:center;width:100%;height:auto;background:var(--canvas-2);padding:10px;box-sizing:border-box;border-radius:8px 8px 0 0}

/* ===== bento (6 equal tiles, no empty space) ===== */
.bento-tile.big{grid-column:auto;grid-row:auto}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.bento-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.bento-tile .icon-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--border);color:var(--accent);flex-shrink:0}
.bento-tile h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);margin:0;line-height:1.3}
.bento-tile p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.bento{grid-template-columns:1fr}}

/* ===== price / edge padding ===== */
.card .body{padding:20px 18px 22px}
.card .price{font-size:1.35rem;font-weight:700;color:var(--ink);margin-top:14px;letter-spacing:-.01em}
.card .row{margin-top:16px}
.preview-link{display:inline-block;margin-top:14px}
.pick .pk-body{padding:12px 14px 16px}
.pk-price{margin-top:10px}
.tier{padding:32px}
.tier .tier-price{margin-top:18px;margin-bottom:6px}

/* ===== back to top ===== */
#back-to-top{position:fixed;bottom:1.6rem;right:1.6rem;z-index:90;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--border-2);background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .35s ease,border-color .2s,box-shadow .2s,transform .2s}
#back-to-top.visible{opacity:1;pointer-events:auto}
#back-to-top:hover{border-color:var(--primary);box-shadow:0 0 14px var(--glow);transform:translateY(-2px)}

/* ===== refined content link underlines ===== */
.prose a:not(.btn),.info-card a:not(.btn),.faq .a a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1.5px;
  background-position:0 100%;background-repeat:no-repeat;text-decoration:none;padding-bottom:1px;transition:background-size .3s ease,color .2s}
.prose a:not(.btn):hover,.info-card a:not(.btn):hover,.faq .a a:hover{background-size:100% 1.5px;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.prose a,.info-card a,.faq .a a{transition:none}}
/* ===== REDESIGNED HERO (image bg + fanned covers) ===== */
.hero{position:relative;overflow:hidden;min-height:clamp(520px,88svh,800px);display:flex;align-items:stretch}
.hero::before{display:none}
.hero-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(105deg,rgba(8,8,14,.86) 0%,rgba(10,9,18,.72) 40%,rgba(12,10,20,.42) 64%,rgba(8,7,14,.58) 100%),
  radial-gradient(ellipse 110% 90% at 74% 50%,transparent 30%,rgba(4,4,10,.65) 100%),
  url("assets/brand/hero-bg.jpg") center/cover no-repeat}
:root[data-theme="light"] .hero-bg{background:
  linear-gradient(105deg,rgba(12,10,18,.74) 0%,rgba(14,11,20,.58) 42%,rgba(16,12,22,.34) 66%,rgba(10,8,16,.5) 100%),
  radial-gradient(ellipse 110% 90% at 74% 50%,transparent 30%,rgba(6,5,12,.55) 100%),
  url("assets/brand/hero-bg.jpg") center/cover no-repeat}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,60px);align-items:center;padding-block:clamp(56px,9vw,96px);width:100%}
@media (min-width:860px){.hero-inner{grid-template-columns:53fr 47fr;gap:clamp(40px,5vw,72px);padding-block:clamp(72px,10vw,112px)}}
.hero-copy{min-width:0;order:1}
.hero-eyebrow{display:flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0 0 .9em}
.hero-eyebrow::before{content:none}
.hero-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--glow);flex-shrink:0;animation:heDot 2.4s ease-in-out infinite}
@keyframes heDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero h1{font-family:var(--serif);font-size:clamp(2.3rem,5.5vw,3.9rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;max-width:16ch;color:#F5F2EC;-webkit-text-fill-color:#F5F2EC}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{background:linear-gradient(112deg,#F5F2EC 0%,var(--primary) 44%,#F5F2EC 72%,var(--accent) 100%);background-size:240% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:heShine 11s linear infinite}
}
@keyframes heShine{to{background-position:240% center}}
:root[data-theme="light"] .hero h1{background:none;color:#FAF7F2;-webkit-text-fill-color:#FAF7F2;animation:none}
.hero .lead{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.65;color:rgba(245,240,230,.82);max-width:44ch;margin:0 0 1.8em}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-btn-primary{font-size:1rem;padding:.82em 1.8em;border-radius:14px;box-shadow:0 8px 28px var(--glow),0 2px 8px rgba(0,0,0,.5)}
.hero-btn-primary:hover{box-shadow:0 14px 40px var(--glow),0 4px 14px rgba(0,0,0,.55);transform:translateY(-3px)}
.btn-text-link{display:inline-flex;align-items:center;gap:.4em;font-size:.97rem;font-weight:650;color:rgba(245,240,230,.78);transition:color .2s,gap .2s;white-space:nowrap}
.btn-text-link svg{width:15px;height:15px;flex-shrink:0;transition:transform .2s}
.btn-text-link:hover{color:var(--primary);gap:.65em}
.btn-text-link:hover svg{transform:translateX(3px)}
.hero-chips{margin-top:1.8em;display:flex;gap:10px;flex-wrap:wrap}
.hero-chip{display:inline-flex;align-items:center;gap:.45em;font-size:.8rem;font-weight:650;padding:.38em .9em;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  color:rgba(245,240,228,.92);white-space:nowrap}
.hero-chip svg{width:13px;height:13px;flex-shrink:0;color:var(--primary)}
.hero-covers{position:relative;max-width:400px;margin-inline:auto;order:2;padding:40px 32px 24px;perspective:1200px}
@media (min-width:860px){.hero-covers{max-width:none;margin-inline:0;padding:48px 40px 32px}}
.hero-covers::before{content:"";display:block;aspect-ratio:3/4.2;width:100%;pointer-events:none}
.hc-frame{position:absolute;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);will-change:transform;transition:box-shadow .3s ease}
.hc-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.hc-a{width:60%;aspect-ratio:3/4;bottom:0;left:0;z-index:1;box-shadow:-8px 20px 50px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);animation:heFloatA 8s ease-in-out infinite}
.hc-b{width:66%;aspect-ratio:3/4;bottom:0;left:50%;z-index:3;box-shadow:0 24px 64px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1) inset;animation:heFloatB 8s ease-in-out infinite .6s}
.hc-c{width:60%;aspect-ratio:3/4;bottom:0;right:0;z-index:2;box-shadow:8px 20px 50px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);animation:heFloatC 8s ease-in-out infinite 1.4s}
@keyframes heFloatA{0%,100%{transform:rotate(-8deg) translateY(4%)}50%{transform:rotate(-8deg) translateY(-5%)}}
@keyframes heFloatB{0%,100%{transform:translateX(-50%) translateY(-5%)}50%{transform:translateX(-50%) translateY(-13%)}}
@keyframes heFloatC{0%,100%{transform:rotate(7deg) translateY(4%)}50%{transform:rotate(7deg) translateY(-4%)}}
.hc-glow{position:absolute;inset:20% 10%;background:radial-gradient(ellipse at 50% 80%,var(--glow),transparent 68%);opacity:.55;z-index:0;pointer-events:none;filter:blur(22px)}
.hero-fade-bottom{position:absolute;bottom:0;left:0;right:0;height:80px;z-index:3;background:linear-gradient(to bottom,transparent,var(--canvas));pointer-events:none}
@media (max-width:859px){.hero{min-height:auto}.hero-covers{max-width:340px;padding:30px 24px 20px}}
@media (max-width:520px){.hero h1{font-size:clamp(2rem,8vw,2.6rem)}.hero-covers{max-width:280px;padding:24px 20px 16px}.hc-c{display:none}.hc-b{width:72%}.hc-a{width:64%}.hero-chips{gap:7px}.hero-chip{font-size:.76rem;padding:.3em .75em}}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none}.hc-a,.hc-b,.hc-c{animation:none}.hero-eyebrow-dot{animation:none}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hero h1{background:none;color:#F5F2EC;-webkit-text-fill-color:#F5F2EC;animation:none}}