/* ============================================================
   ZYULYAL ISMAILOVA — LUXURY CINEMATIC PORTFOLIO
   ============================================================ */

:root{
  --bg:            #0a0b0d;
  --bg-alt:        #0f1113;
  --ink:           #f3efe7;
  --ink-dim:       #b9b3a7;
  --gold:          #cfa25e;
  --gold-soft:     #e8caa0;
  --gold-dim:      rgba(207,162,94,0.35);
  --line:          rgba(243,239,231,0.12);
  --serif:         'Fraunces', 'Georgia', serif;
  --sans:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:          cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  cursor:none;
}
::selection{ background:var(--gold-dim); color:var(--ink); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }

@media (hover:none){
  body{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-monogram{ width:70px; height:70px; color:var(--gold); }
.pm-ring{ stroke-dasharray:326; stroke-dashoffset:326; animation:pmDraw 1.6s var(--ease) forwards; }
.pm-z-frame{ stroke-dasharray:170; stroke-dashoffset:170; animation:pmDraw 1s var(--ease) .3s forwards; }
.pm-z-path{ stroke-dasharray:90; stroke-dashoffset:90; opacity:0; animation:pmDrawIn 0.9s var(--ease) .6s forwards; }
@keyframes pmDraw{ to{ stroke-dashoffset:0; } }
@keyframes pmDrawIn{ 0%{ stroke-dashoffset:60; opacity:0; } 1%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }
.preloader-bar{ width:160px; height:1px; background:var(--line); overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background:var(--gold); animation:pbLoad 1.8s var(--ease) forwards; }
@keyframes pbLoad{ to{ width:100%; } }

/* ============ CUSTOM CURSOR ============ */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--gold); transition:opacity .2s; }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--gold-dim); transition:width .25s var(--ease),height .25s var(--ease),border-color .25s; }
.cursor-ring.hover{ width:56px; height:56px; border-color:var(--gold); }

/* ============ NAV ============ */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw;
  mix-blend-mode:difference;
}
.nav-mark{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; margin:-14px 0; line-height:0;
}
.nav-mark svg{
  position:relative; z-index:1;
  width:64px; height:64px; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.nav-mark-glow{
  position:absolute; inset:-10px; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(207,162,94,.4), transparent 68%);
  filter:blur(10px); opacity:.7;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.nav-mark:hover svg{ transform:rotate(8deg) scale(1.08); filter:drop-shadow(0 2px 16px rgba(207,162,94,.55)); }
.nav-mark:hover .nav-mark-glow{ opacity:1; transform:scale(1.25); }
.nav-links{ display:flex; gap:34px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.nav-links a{ opacity:.75; transition:opacity .3s; position:relative; }
.nav-links a:hover{ opacity:1; }
.lang-toggle{ font-size:12px; letter-spacing:.08em; display:flex; align-items:center; gap:6px; }
.lang-toggle .lang-sep{ opacity:.4; }
.lang-toggle span{ opacity:.45; transition:opacity .25s; }
.lang-toggle span.active{ opacity:1; color:var(--gold-soft); }
.menu-btn{ display:none; flex-direction:column; gap:5px; width:26px; }
.menu-btn span{ height:1px; width:100%; background:var(--ink); }

#mobileMenu{
  position:fixed; inset:0; background:var(--bg); z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
#mobileMenu.open{ transform:translateY(0); }
#mobileMenu a{ font-family:var(--serif); font-size:28px; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
}

/* ============ HERO ============ */
#hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(10,11,13,0.55) 78%, var(--bg) 100%);
}

/* asymmetric masked editorial portrait — sits between the particle field and copy */
.hero-portrait{
  position:absolute; top:0; right:0; height:100%; width:38%; z-index:1;
  overflow:hidden; pointer-events:none;
  clip-path:polygon(34% 0%, 100% 0%, 100% 100%, 6% 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 48%);
  mask-image:linear-gradient(90deg, transparent 0%, black 48%);
  opacity:.9;
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(12%) contrast(1.06) brightness(.88) saturate(1.05);
}
.hero-portrait.no-photo{ display:none; }
@media (max-width:960px){ .hero-portrait{ display:none; } }
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 24px;
}
.eyebrow{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:22px; opacity:0;
}
.hero-title{ font-size:clamp(48px,9vw,128px); line-height:.98; letter-spacing:-.01em; }
.hero-title span{ display:inline-block; opacity:0; }
.hero-subtitle{
  margin-top:22px; font-size:clamp(15px,1.6vw,20px); color:var(--ink-dim); font-weight:300;
  max-width:640px; opacity:0;
}
.hero-tags{
  margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); opacity:0;
}
.hero-tags .dot{ color:var(--gold); opacity:.7; }
.scroll-cue{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-dim);
  opacity:0;
}
.scroll-line{ width:1px; height:46px; background:var(--line); overflow:hidden; }
.scroll-line i{ display:block; width:100%; height:40%; background:var(--gold); animation:scrollDrop 2.4s ease-in-out infinite; }
@keyframes scrollDrop{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(250%);} }

/* ============ MANIFESTO ============ */
#manifesto{
  position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:14vh 24px;
  background:radial-gradient(ellipse at 50% 40%, #0d0f12 0%, #08090b 55%, #050506 100%);
}
.manifesto-inner{ position:relative; z-index:1; max-width:900px; text-align:center; }
.manifesto-line{
  font-family:var(--serif); font-size:clamp(22px,4vw,40px); line-height:1.4;
  color:var(--ink-dim); opacity:.15; margin-bottom:6px;
}
.manifesto-accent{ color:var(--gold-soft); }
.kw{
  position:relative;
  transition:color .5s ease, text-shadow .6s ease;
}
.kw:hover{
  color:var(--gold-soft);
  text-shadow:
    0 0 6px rgba(243,217,164,.9),
    0 0 18px rgba(207,162,94,.65),
    0 0 42px rgba(207,162,94,.4),
    0 0 84px rgba(207,162,94,.22);
}
.corner{
  position:absolute; font-family:var(--serif); font-size:56px; line-height:1;
  color:var(--gold); opacity:.55; pointer-events:none;
}
.corner-tl{ top:-34px; left:-6px; }
.corner-br{ bottom:-64px; right:-6px; }
@media (max-width:640px){ .corner{ font-size:38px; } .corner-tl{ top:-22px; left:0; } .corner-br{ bottom:-42px; right:0; } }

/* ============ EXECUTIVE HUB ============ */
#hub{ position:relative; background:var(--bg-alt); }
.pillar{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6vw;
  padding:12vh 6vw; border-top:1px solid var(--line);
}
.pillar.reverse{ direction:rtl; }
.pillar.reverse .pillar-text,.pillar.reverse .pillar-media{ direction:ltr; }
.pillar-index{
  font-family:var(--serif); font-size:14px; color:var(--gold); letter-spacing:.2em;
  display:block; margin-bottom:18px;
}
.pillar-text h2{ font-size:clamp(30px,4vw,52px); margin-bottom:10px; }
.pillar-text h3{
  font-size:clamp(15px,1.4vw,19px); font-weight:400; color:var(--gold-soft);
  font-family:var(--sans); letter-spacing:.02em; margin-bottom:22px;
}
.pillar-text p{ color:var(--ink-dim); line-height:1.75; font-size:15.5px; max-width:520px; }
.pillar-facts{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.pillar-facts li{
  font-size:13px; letter-spacing:.02em; color:var(--ink-dim);
  padding-left:20px; position:relative;
}
.pillar-facts li::before{
  content:''; position:absolute; left:0; top:8px; width:10px; height:1px; background:var(--gold);
}
.pillar-link{
  display:inline-block; margin-top:30px; font-size:13px; letter-spacing:.05em;
  color:var(--gold-soft); border-bottom:1px solid var(--gold-dim); padding-bottom:4px;
  transition:border-color .3s;
}
.pillar-link:hover{ border-color:var(--gold); }
.pillar-media{ display:flex; align-items:center; justify-content:center; height:100%; }

/* --- phone mock (Academic Developer) --- */
.phone-mock{
  width:min(280px,80%); aspect-ratio:9/18.5; border-radius:36px;
  background:linear-gradient(160deg,#17191c,#0c0d0f); border:1px solid var(--line);
  padding:14px; box-shadow:0 40px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative;
}
.phone-notch{
  width:66px; height:18px; border-radius:11px; background:#000;
  margin:0 auto 10px; position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-notch::before, .phone-notch::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%); border-radius:50%;
}
.phone-notch::before{
  left:13px; width:5px; height:5px;
  background:radial-gradient(circle at 35% 35%, #3a3a3a, #0a0a0a);
}
.phone-notch::after{
  right:13px; width:7px; height:7px;
  background:radial-gradient(circle at 35% 35%, #2a2a2a, #050505);
  box-shadow:0 0 3px rgba(207,162,94,.5) inset;
}
.phone-screen{
  height:calc(100% - 24px); border-radius:22px; background:radial-gradient(circle at 30% 20%, #1b1d20, #0a0b0d 70%);
  overflow:hidden; position:relative;
}
.phone-shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.phone-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,11,13,0) 30%, rgba(10,11,13,.88) 100%);
}
/* --- live AI scanning simulation --- */
.phone-scan-line{
  position:absolute; left:6%; right:6%; top:4%; height:2px; z-index:3;
  background:var(--gold);
  box-shadow:0 0 8px 2px var(--gold), 0 0 22px 4px rgba(207,162,94,.5);
  animation:phoneScan 3.4s linear infinite;
}
@keyframes phoneScan{
  0%{ top:4%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ top:94%; opacity:0; }
}
.matrix-rain{
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:.4;
  -webkit-mask-image:linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
  mask-image:linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
}
.matrix-col{
  position:absolute; top:-45%;
  font-family:'Inter',monospace; font-size:9px; line-height:1.7; letter-spacing:.05em;
  color:var(--gold); white-space:pre-line; text-align:center;
  animation:matrixFall 7s linear infinite;
}
@keyframes matrixFall{ from{ transform:translateY(0); } to{ transform:translateY(190%); } }

.jewel-silhouette{
  position:absolute; top:50%; left:50%; width:42%; z-index:2;
  transform:translate(-50%,-50%);
  animation:jewelPulse 4s ease-in-out infinite;
}
.jewel-silhouette svg{ width:100%; height:auto; display:block; }
@keyframes jewelPulse{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(207,162,94,.4)); }
  50%{ filter:drop-shadow(0 0 18px rgba(207,162,94,.8)); }
}
.reticle{
  position:absolute; width:16px; height:16px; opacity:.7;
  animation:reticlePulse 2.6s ease-in-out infinite;
}
.rt-tl{ top:-14%; left:-14%; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold); }
.rt-tr{ top:-14%; right:-14%; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); }
.rt-bl{ bottom:-14%; left:-14%; border-bottom:1.5px solid var(--gold); border-left:1.5px solid var(--gold); }
.rt-br{ bottom:-14%; right:-14%; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold); }
@keyframes reticlePulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.ai-chip{
  position:absolute; z-index:4; max-width:50%;
  padding:5px 0 5px 10px; border-left:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(207,162,94,.14), transparent);
  font-family:'Inter',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-soft); opacity:0; white-space:normal; line-height:1.4;
  animation:chipPulse 8s ease-in-out infinite;
}
.chip-1{ top:11%; left:6%; animation-delay:0s; }
.chip-2{ bottom:22%; right:5%; text-align:right; border-left:0; border-right:2px solid var(--gold); padding:5px 10px 5px 0; animation-delay:2.6s; }
.chip-3{ bottom:8%; left:6%; animation-delay:5.2s; }
@keyframes chipPulse{
  0%,100%{ opacity:0; transform:translateY(6px); }
  10%,30%{ opacity:1; transform:translateY(0); }
  40%{ opacity:0; }
}

/* --- book stack (Published Author) — real 3D CSS book objects ---
   Mechanic: the .book-3d container holds a STATIC presentation tilt
   only — it never transforms on hover. All motion lives on
   .book-cover-front alone, which carries transform-origin:left center
   (the spine edge), so it swings open exactly like a real hardcover
   hinging from its binding, instead of rotating as a rigid "door". */
.book-stack{
  display:flex; gap:100px; align-items:center; justify-content:center;
  perspective:1500px; padding:20px 40px;
}
.book-3d{
  position:relative; width:250px; height:368px;
  transform-style:preserve-3d;
}
.book-pos-1{ transform:rotateY(-30deg) rotateX(3deg) translateZ(0) translateY(8px); }
.book-pos-2{ transform:rotateY(-22deg) rotateX(2deg) translateZ(-70px) translateY(-16px); }
.book-3d:hover, .book-3d.is-open{ z-index:5; }

/* the inside page-block, revealed only once the cover swings open */
.book-pages-inner{
  position:absolute; inset:7px 4px 7px 3px; z-index:0; border-radius:1px 7px 7px 1px;
  transform:translateZ(4px);
  background:repeating-linear-gradient(180deg, #f5efe0 0px, #f5efe0 3px, #e5dac0 3px, #e5dac0 4px);
  box-shadow:inset 10px 0 22px rgba(0,0,0,.4), inset -3px 0 8px rgba(0,0,0,.15);
  opacity:0; filter:blur(.2px);
  transition:opacity .8s var(--ease) .1s;
}
.book-pages-inner::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, rgba(243,217,164,.6), transparent 55%);
  mix-blend-mode:screen;
}
.book-3d:hover .book-pages-inner, .book-3d.is-open .book-pages-inner{ opacity:1; }

.book-cover-front{
  position:absolute; inset:0; border-radius:2px 8px 8px 2px;
  background:linear-gradient(155deg,#15171b,#0a0b0d);
  border:1px solid var(--line);
  transform:translateZ(17px);
  transform-origin:left center;
  overflow:hidden;
  box-shadow:0 55px 110px -22px rgba(0,0,0,.8);
  transition:transform 1s var(--ease);
}
.book-3d:hover .book-cover-front, .book-3d.is-open .book-cover-front{ transform:translateZ(17px) rotateY(-35deg); }
.book-cover-front img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.book-cover-front::before{
  content:''; position:absolute; inset:11px; border:1px solid var(--gold-dim);
  pointer-events:none; z-index:2;
}
.book-gloss{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 47%, transparent 62%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
.book-3d:hover .book-gloss, .book-3d.is-open .book-gloss{ transform:translateX(130%); }

.book-fallback{
  position:absolute; inset:0; display:none; overflow:hidden;
}
.book-cover-front.no-image .book-fallback{ display:block; }

.book-fallback-navy{
  background:radial-gradient(ellipse at 30% 0%, #1a2a54 0%, #0c1330 45%, #060915 100%);
}
.book-fallback-marble{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 15px),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.045), transparent 45%),
    linear-gradient(160deg, #1c1c1e, #060607);
  background-blend-mode:overlay, normal, normal, normal;
}

.book-art{ position:absolute; inset:0; z-index:0; color:var(--gold); opacity:.7; }
.bridge-light{ animation:bridgeTwinkle 3.2s ease-in-out infinite; }
.bridge-light:nth-of-type(2){ animation-delay:.7s; }
.bridge-light:nth-of-type(3){ animation-delay:1.4s; }
@keyframes bridgeTwinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.book-text{
  position:relative; z-index:1; height:100%; padding:26px 20px;
  display:flex; flex-direction:column;
}
.book-eyebrow{ font-size:10px; letter-spacing:.2em; color:var(--gold); }
.book-text h4{ font-size:21px; margin-top:16px; line-height:1.2; font-family:var(--serif); }
.book-title-foil{
  background:linear-gradient(115deg, #8a6a34 10%, #f3d9a4 35%, #cfa25e 50%, #f3d9a4 65%, #8a6a34 90%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilShift 7s ease-in-out infinite;
}
@keyframes foilShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.book-text p{ font-size:11px; color:var(--ink-dim); margin-top:10px; line-height:1.5; }
.book-emblem{ margin-top:auto; color:var(--gold); font-size:18px; align-self:flex-end; }

.book-spine{
  position:absolute; left:0; top:0; width:34px; height:100%;
  background:linear-gradient(90deg,#0a0b0d,#1d1f23);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  transform-origin:left center;
  transform:rotateY(-90deg) translateZ(0) translateX(0) translateZ(-17px);
  box-shadow:inset -8px 0 16px rgba(0,0,0,.55);
}
.book-spine-navy{ background:linear-gradient(90deg,#060915,#1a2a54); }
.book-pages{
  position:absolute; right:0; top:2px; width:18px; height:calc(100% - 4px);
  background:repeating-linear-gradient(90deg, #ece3d2 0px, #d9cdb4 1.5px, #ece3d2 3px);
  transform-origin:right center;
  transform:rotateY(90deg) translateZ(-17px);
  box-shadow:inset 4px 0 8px rgba(0,0,0,.25);
}

/* --- gem mock (Entrepreneurship) --- */
.gem-mock{
  position:relative; width:min(340px,80%); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.gem-glow{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(207,162,94,.38), transparent 62%);
  filter:blur(34px);
  animation:gemGlowPulse 6s ease-in-out infinite;
}
@keyframes gemGlowPulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* --- The Jewelry Saturn Orb — pure CSS, no canvas/WebGL --- */
.saturn-orb{
  position:relative; z-index:1; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.saturn-sphere{
  position:relative; z-index:2; width:56%; height:56%; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,
    #fff8e6 0%, #f8e2ad 12%, #e8caa0 26%, #cfa25e 48%, #9c7638 74%, #4a3517 100%);
  background-size:180% 180%;
  box-shadow:
    inset -16px -16px 32px rgba(0,0,0,.5),
    inset 12px 12px 26px rgba(255,248,224,.4),
    0 0 44px rgba(207,162,94,.5);
  animation:saturnShimmer 9s ease-in-out infinite, saturnBreathe 6s ease-in-out infinite;
}
@keyframes saturnShimmer{
  0%,100%{ background-position:20% 20%; }
  50%{ background-position:60% 50%; }
}
@keyframes saturnBreathe{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.1); }
}

.saturn-ring{
  position:absolute; z-index:1; inset:0;
  transform:translateZ(0) rotateX(72deg) rotateZ(0deg);
  transform-style:preserve-3d;
  animation:ringSpin 46s linear infinite;
}
.saturn-ring-face{
  position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    #fff8e8 0deg 3deg, #cfa25e 3deg 7deg, #8a6a34 7deg 11deg, #f3d9a4 11deg 15deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 15px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 15px));
  filter:drop-shadow(0 0 10px rgba(207,162,94,.55));
}
@keyframes ringSpin{
  0%{ transform:rotateX(72deg) rotateZ(0deg); }
  100%{ transform:rotateX(72deg) rotateZ(360deg); }
}
.ring-glint{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#fff8e8; box-shadow:0 0 7px 2px rgba(255,255,255,.85);
  transform:translate(-50%,-50%);
  animation:glintTwinkle 3s ease-in-out infinite;
}
.ring-glint:nth-of-type(2){ animation-delay:.7s; }
.ring-glint:nth-of-type(3){ animation-delay:1.4s; }
.ring-glint:nth-of-type(4){ animation-delay:2.1s; }
@keyframes glintTwinkle{
  0%,100%{ opacity:.2; transform:translate(-50%,-50%) scale(0.7); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.3); }
}
@media (prefers-reduced-motion: reduce){
  .saturn-sphere, .saturn-ring{ animation:none; }
}

/* ============ IMPACT ============ */
#impact{ padding:16vh 6vw; text-align:center; background:var(--bg); border-top:1px solid var(--line); }
.impact-heading{ font-size:clamp(26px,3.4vw,44px); margin-bottom:10vh; color:var(--ink); }
.impact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.impact-number{ display:block; font-family:var(--serif); font-size:clamp(34px,4vw,58px); color:var(--gold-soft); }
.impact-stat p{ margin-top:14px; font-size:13px; color:var(--ink-dim); line-height:1.5; max-width:220px; margin-left:auto; margin-right:auto; }
@media (max-width:860px){ .impact-grid{ grid-template-columns:repeat(2,1fr); row-gap:60px; } }

/* ============ THOUGHT LEADERSHIP ============ */
#thought{ padding:16vh 6vw 14vh; background:var(--bg-alt); border-top:1px solid var(--line); }
.thought-header{ text-align:center; max-width:640px; margin:0 auto 8vh; }
.thought-header h2{ font-size:clamp(30px,4vw,52px); margin-bottom:14px; }
.thought-header p{ color:var(--ink-dim); font-size:15px; }
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.article-card{
  background:var(--bg-alt); padding:40px 32px; display:flex; flex-direction:column; gap:18px;
  transition:background .35s;
}
.article-card:hover{ background:#141619; }
.article-tag{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.article-card h3{ font-size:21px; line-height:1.3; }
.article-card p{ font-size:13.5px; color:var(--ink-dim); line-height:1.7; flex:1; }
.article-meta{ font-size:11px; color:var(--ink-dim); opacity:.6; letter-spacing:.04em; }

/* the trailing article, when it would otherwise leave a blank grid
   cell behind, is promoted into a full-width featured card instead */
.article-card.featured{
  grid-column:1 / -1;
  padding:52px 60px;
  border-left:3px solid var(--gold);
  background:linear-gradient(120deg, rgba(207,162,94,.08), var(--bg-alt) 45%);
}
.article-card.featured:hover{ background:linear-gradient(120deg, rgba(207,162,94,.12), #141619 45%); }
.article-card.featured h3{ font-size:clamp(24px,2.6vw,30px); max-width:680px; }
.article-card.featured p{ font-size:15px; max-width:680px; flex:none; }

@media (max-width:860px){
  .article-grid{ grid-template-columns:1fr; }
  .article-card.featured{ padding:40px 32px; border-left:none; border-top:3px solid var(--gold); }
}

/* ============ FOOTER ============ */
footer{ padding:14vh 6vw 8vh; text-align:center; background:var(--bg); border-top:1px solid var(--line); }
.footer-inner h2{ font-size:clamp(34px,5vw,72px); margin-bottom:6vh; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.footer-links a{ opacity:.75; transition:opacity .3s,color .3s; }
.footer-links a:hover{ opacity:1; color:var(--gold-soft); }
.footer-note{ margin-top:8vh; font-size:12px; color:var(--ink-dim); letter-spacing:.05em; }
.designer-credit{
  margin-top:5vh; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:12.5px; letter-spacing:.05em; color:var(--ink-dim); opacity:.42;
}

/* ============ RESPONSIVE: PILLARS STACK ============ */
@media (max-width:960px){
  .pillar,.pillar.reverse{ grid-template-columns:1fr; direction:ltr; text-align:left; gap:60px; padding:10vh 7vw; }
  .pillar-media{ order:-1; }

  #siteNav{ padding:22px 5vw; }
  .nav-mark{ width:52px; height:52px; margin:-10px 0; }
  .nav-mark svg{ width:52px; height:52px; }

  /* tablet-scale books */
  .book-stack{ gap:56px; perspective:1500px; padding:10px 20px; }
  .book-3d{ width:188px; height:277px; }
  .book-spine{ width:26px; }
  .book-pages{ width:14px; }
  .book-cover-front{ transform:translateZ(13px); }
  .book-3d:hover .book-cover-front, .book-3d.is-open .book-cover-front{ transform:translateZ(13px) rotateY(-35deg); }
  .book-pages-inner{ transform:translateZ(2px); }
  .book-spine{ transform:rotateY(-90deg) translateZ(0) translateX(0) translateZ(-13px); }
  .book-pages{ transform:rotateY(90deg) translateZ(-13px); }
  .book-pos-2{ transform:rotateY(-22deg) rotateX(2deg) translateZ(-52px) translateY(-12px); }
}

@media (max-width:520px){
  #siteNav{ padding:18px 5vw; }
  .nav-mark{ width:44px; height:44px; margin:-6px 0; }
  .nav-mark svg{ width:44px; height:44px; }

  .book-stack{ gap:22px; perspective:900px; padding:4px 4px; }
  .book-3d{ width:122px; height:180px; }
  .book-spine{ width:16px; }
  .book-pages{ width:8px; }
  .book-cover-front{ transform:translateZ(8px); border-radius:2px 5px 5px 2px; }
  .book-3d:hover .book-cover-front, .book-3d.is-open .book-cover-front{ transform:translateZ(8px) rotateY(-35deg); }
  .book-pages-inner{ transform:translateZ(1px); border-radius:1px 5px 5px 1px; inset:4px 3px 4px 2px; }
  .book-spine{ transform:rotateY(-90deg) translateZ(0) translateX(0) translateZ(-8px); }
  .book-pages{ transform:rotateY(90deg) translateZ(-8px); }
  .book-pos-1{ transform:rotateY(-26deg) rotateX(2deg) translateZ(0) translateY(4px); }
  .book-pos-2{ transform:rotateY(-20deg) rotateX(1deg) translateZ(-30px) translateY(-8px); }
  .book-text{ padding:14px 12px; }
  .book-text h4{ font-size:14px; margin-top:8px; }
  .book-text p{ font-size:8.5px; margin-top:5px; line-height:1.4; }
  .book-eyebrow{ font-size:8px; }
  .book-emblem{ font-size:13px; }
  .book-cover-front::before{ inset:6px; }

  .designer-credit{ font-size:11px; letter-spacing:.03em; margin-top:4vh; }
  .footer-links{ gap:20px; row-gap:14px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}