/* ============================================================
   Xavana — front page styles
   Built on the Xavana design-system tokens (../../styles.css)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-base);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--link-hover)}
button{font-family:inherit}
h1,h2,h3{margin:0;font-weight:var(--weight-bold);line-height:var(--lh-tight);color:var(--text-strong)}
p{margin:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}

/* ---------- Buttons ---------- */
.btn{--btn-bg:var(--gold-500);display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--fs-body-sm);letter-spacing:0.02em;padding:14px 26px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),background var(--dur-mid) var(--ease-out),color var(--dur-mid) var(--ease-out);will-change:transform}
.btn:active{transform:translateY(1px) scale(0.985)}
.btn-primary{background:linear-gradient(135deg,var(--gold-400),var(--amber-500) 62%,var(--ember-500));color:#2A1706;box-shadow:0 10px 30px -10px rgba(215,90,27,0.6),inset 0 1px 0 rgba(255,255,255,0.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(240,138,34,0.7),inset 0 1px 0 rgba(255,255,255,0.45)}
.btn-ghost{background:rgba(255,255,255,0.05);color:var(--text-strong);border-color:var(--border-strong);backdrop-filter:var(--blur-soft)}
.btn-ghost:hover{background:rgba(255,255,255,0.11);border-color:var(--sand-300);transform:translateY(-2px)}
.btn-vcr{background:linear-gradient(135deg,var(--vcr-cyan),var(--vcr-blue));color:#04121F;box-shadow:0 10px 30px -10px rgba(30,110,210,0.7),var(--glow-cyan)}
.btn-vcr:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-arrow{transition:transform var(--dur-mid) var(--ease-out)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;padding:clamp(14px,2.4vw,26px) 0;transition:background var(--dur-mid) var(--ease-out),backdrop-filter var(--dur-mid) var(--ease-out),padding var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(15,11,7,0.72);backdrop-filter:var(--blur-glass);border-bottom-color:var(--border-soft);padding-top:10px;padding-bottom:10px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand-logo{order:2;height:clamp(46px,6.2vw,76px);width:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.55));transition:height var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out)}
.brand-logo:hover{transform:scale(1.03)}
.site-header.scrolled .brand-logo{height:clamp(40px,5vw,58px)}
.brand-link{display:inline-flex;order:2}

/* Hamburger */
.hamburger{order:1;position:relative;display:inline-flex;align-items:center;gap:12px;background:rgba(20,15,10,0.32);border:1px solid var(--border-soft);backdrop-filter:var(--blur-soft);color:var(--text-strong);border-radius:var(--radius-pill);padding:11px 18px 11px 15px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.hamburger:hover{background:rgba(40,28,18,0.5);border-color:var(--border-strong)}
.hamburger:active{transform:scale(0.97)}
.hamburger .bars{position:relative;width:22px;height:14px;flex:0 0 auto}
.hamburger .bars span{position:absolute;left:0;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast) var(--ease-out),width var(--dur-mid) var(--ease-out)}
.hamburger .bars span:nth-child(1){top:0}
.hamburger .bars span:nth-child(2){top:6px;width:70%}
.hamburger .bars span:nth-child(3){top:12px}
.hamburger:hover .bars span:nth-child(2){width:100%}
.hamburger .menu-label{font-size:0.78rem;font-weight:var(--weight-bold);letter-spacing:0.22em;text-transform:uppercase}
@media (max-width:560px){.hamburger .menu-label{display:none}.hamburger{padding:12px}}

/* ---------- Nav overlay ---------- */
.nav-overlay{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:1fr;pointer-events:none;visibility:hidden}
.nav-overlay.open{pointer-events:auto;visibility:visible}
.nav-scrim{position:absolute;inset:0;background:radial-gradient(120% 120% at 80% 0%,rgba(58,26,10,0.86),rgba(10,7,4,0.94) 60%);opacity:0;transition:opacity var(--dur-mid) var(--ease-out);backdrop-filter:blur(6px)}
.nav-overlay.open .nav-scrim{opacity:1}
.nav-panel{position:relative;z-index:1;margin-left:auto;height:100%;width:min(460px,100%);background:linear-gradient(180deg,rgba(26,18,12,0.6),rgba(14,10,7,0.72));border-left:1px solid var(--border-soft);backdrop-filter:var(--blur-glass);display:flex;flex-direction:column;padding:clamp(22px,4vw,40px);transform:translateX(102%);transition:transform var(--dur-slow) var(--ease-out)}
.nav-overlay.open .nav-panel{transform:translateX(0)}
.nav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(28px,6vh,64px)}
.nav-brand{font-family:var(--font-display);letter-spacing:0.16em;font-size:0.9rem;color:var(--sand-300);text-transform:uppercase}
.nav-close{width:46px;height:46px;border-radius:var(--radius-pill);border:1px solid var(--border-soft);background:rgba(255,255,255,0.04);color:var(--text-strong);cursor:pointer;position:relative;transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.nav-close:hover{background:rgba(255,255,255,0.1);transform:rotate(90deg)}
.nav-close::before,.nav-close::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;background:currentColor;border-radius:2px}
.nav-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-item{overflow:hidden}
.nav-link{--i:0;display:flex;align-items:baseline;gap:16px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(2rem,7vw,2.9rem);color:var(--text-strong);padding:12px 0;border-bottom:1px solid var(--hairline);transform:translateY(115%);opacity:0;transition:color var(--dur-fast) var(--ease-out),transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i) * 60ms)}
.nav-overlay.open .nav-link{transform:translateY(0);opacity:1}
.nav-link .num{font-family:var(--font-body);font-size:0.8rem;font-weight:var(--weight-bold);letter-spacing:0.1em;color:var(--accent);opacity:0.85;transform:translateY(-6px)}
.nav-link:hover{color:var(--gold-400)}
.nav-link:hover .num{color:var(--gold-300)}
.nav-foot{margin-top:auto;padding-top:28px;color:var(--text-muted);font-size:var(--fs-body-sm);display:flex;flex-direction:column;gap:6px}
.nav-foot a{color:var(--sand-300)}
.nav-foot .nav-foot-brand{color:var(--text-faint);font-size:0.8rem;letter-spacing:0.04em}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;padding:clamp(100px,15vh,148px) 0 clamp(60px,9vh,92px)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:#0c0906 center/cover no-repeat;background-image:url("../assets/images/savanna-sunset.webp");transform:scale(1.02);animation:kenburns 40s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.07) translate(-1%,-0.8%)}}
.hero-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(10,7,4,0.62) 0%,rgba(12,8,5,0.14) 26%,rgba(12,8,5,0.16) 52%,rgba(9,6,3,0.72) 88%,rgba(8,5,3,0.92) 100%)}
.hero-vignette{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(8,5,3,0.55) 100%);mix-blend-mode:multiply}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,2.2vh,24px);max-width:960px}

/* VCR stage */
.vcr-stage{position:relative;display:grid;place-items:center;width:min(440px,74vw);margin-bottom:clamp(2px,1vh,10px)}
.vcr-glow{position:absolute;inset:6% 6% 10% 6%;z-index:0;background:radial-gradient(circle at 50% 46%,rgba(60,201,255,0.55),rgba(30,110,210,0.28) 34%,rgba(215,90,27,0.16) 58%,transparent 72%);filter:blur(14px);animation:portalPulse 5.5s var(--ease-in-out) infinite;border-radius:50%}
@keyframes portalPulse{0%,100%{opacity:0.72;transform:scale(0.96)}50%{opacity:1;transform:scale(1.05)}}
.vcr-logo{position:relative;z-index:2;width:100%;height:auto;filter:drop-shadow(0 26px 46px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(60,201,255,0.28));animation:vcrFloat 6.5s var(--ease-in-out) infinite}
@keyframes vcrFloat{0%,100%{transform:translateY(0) rotate(-0.3deg)}50%{transform:translateY(-14px) rotate(0.3deg)}}
.vcr-shine{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,0.42) 48%,transparent 60%);mask-image:radial-gradient(circle at 50% 46%,#000 60%,transparent 74%);-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 60%,transparent 74%);background-size:250% 250%;background-position:180% 0;opacity:0;mix-blend-mode:screen}
.vcr-stage.shine .vcr-shine{animation:shineSweep 1.5s var(--ease-out)}
@keyframes shineSweep{0%{background-position:180% 0;opacity:0}20%{opacity:0.9}100%{background-position:-80% 0;opacity:0}}
/* entrance */
.vcr-stage{opacity:0;transform:translateY(28px) scale(0.9);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-spring)}
.vcr-stage.in{opacity:1;transform:none}

.hero-eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-wider);font-size:var(--fs-eyebrow);color:var(--gold-300);display:inline-flex;align-items:center;gap:14px}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-400))}
.hero-eyebrow::after{background:linear-gradient(90deg,var(--gold-400),transparent)}
.hero-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(1.9rem,4.6vw,3.4rem);color:var(--sand-50);text-shadow:0 2px 30px rgba(0,0,0,0.6);letter-spacing:0.01em;line-height:1.1}
.hero-title .accent{color:transparent;background:linear-gradient(120deg,var(--gold-400),var(--amber-500) 55%,var(--ember-500));-webkit-background-clip:text;background-clip:text;white-space:nowrap}
.hero-title .tm-mark{font-family:var(--font-body);font-size:0.34em;letter-spacing:0;vertical-align:super;margin-left:0.12em}
.hero-sub{max-width:600px;color:var(--text-body);font-size:var(--fs-body-lg);text-shadow:0 1px 16px rgba(0,0,0,0.55);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:6px}
/* stagger reveal for hero text */
.reveal-up{opacity:0;transform:translateY(20px);transition:opacity 0.85s var(--ease-out),transform 0.9s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal-up.in{opacity:1;transform:none}

.scroll-cue{position:absolute;left:50%;bottom:clamp(16px,3.4vh,34px);transform:translateX(-50%);z-index:2;display:inline-flex;flex-direction:column;align-items:center;gap:9px;color:var(--text-muted);font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;opacity:0.75;transition:opacity var(--dur-mid) var(--ease-out)}
.scroll-cue .mouse{width:24px;height:38px;border:1.5px solid var(--border-strong);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;background:var(--gold-400);border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.8s var(--ease-in-out) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- Sections ---------- */
.section{position:relative;padding:var(--section-pad-y) 0}
.section-head{max-width:760px;margin-bottom:clamp(36px,6vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:var(--fs-eyebrow);color:var(--accent);display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent)}
.section-title{font-family:var(--font-display);font-size:var(--fs-h1);letter-spacing:0.005em;color:var(--text-strong);text-wrap:balance}
.lead{margin-top:18px;color:var(--text-muted);font-size:var(--fs-body-lg);text-wrap:pretty}

/* Reader / VCR intro section */
.reader{background:linear-gradient(180deg,#0d0906,#150f0a 40%,#120c08)}
.reader-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,72px);align-items:center}
.reader-copy .feature-list{list-style:none;margin:26px 0 32px;padding:0;display:flex;flex-direction:column;gap:16px}
.feature-list li{display:flex;gap:14px;align-items:flex-start;color:var(--text-body)}
.feature-list .fi{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;background:linear-gradient(135deg,rgba(60,201,255,0.16),rgba(30,110,210,0.1));border:1px solid rgba(60,201,255,0.28);color:var(--vcr-cyan);box-shadow:inset 0 0 12px rgba(60,201,255,0.14)}
.feature-list .fi svg{width:18px;height:18px}
.feature-list b{color:var(--text-strong);font-weight:var(--weight-bold);display:block;margin-bottom:2px}
.feature-list span{font-size:var(--fs-body-sm);color:var(--text-muted)}
.reader-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:340px}
.reader-visual .halo{position:absolute;inset:8%;background:radial-gradient(circle,rgba(60,201,255,0.32),transparent 66%);filter:blur(10px)}
.reader-visual .vcr-badge{position:relative;width:min(360px,72%);filter:drop-shadow(0 22px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(60,201,255,0.25));animation:vcrFloat 7s var(--ease-in-out) infinite}
.reader-visual .device-tag{position:relative;white-space:nowrap;background:var(--surface-glass);border:1px solid var(--border-soft);backdrop-filter:var(--blur-glass);border-radius:var(--radius-pill);padding:9px 18px;font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--sand-200);font-weight:var(--weight-bold)}

/* Worlds */
.worlds{background:radial-gradient(120% 80% at 50% -10%,#1a120b,#0e0a06 62%)}
.worlds-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(14px,1.8vw,22px);row-gap:38px}
.world-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border-soft);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.4vw,30px);isolation:isolate;transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.world-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.world-card .wc-tag{align-self:flex-start;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:var(--weight-bold);color:var(--sand-100);background:rgba(0,0,0,0.32);border:1px solid var(--border-soft);backdrop-filter:var(--blur-soft);padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:14px}
.world-card h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:8px}
.world-card p{color:var(--text-muted);font-size:var(--fs-body-sm);max-width:34ch}
.world-card.span-6{grid-column:span 6}
.world-card.span-4{grid-column:span 4}
.world-card.tall{min-height:360px}
.world-rotator{padding:0;background:#110d09}
.world-rotator .world-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.4vw,30px);opacity:0;visibility:hidden;transition:opacity 1s var(--ease-out),visibility 0s linear 1s;isolation:isolate}
.world-rotator .world-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.world-rotator.is-fading-to-black .world-slide.is-active{opacity:0;visibility:visible;transition:opacity 0.6s var(--ease-out)}
.world-slide-image{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:saturate(0.84) brightness(0.76);transition:transform var(--dur-slow) var(--ease-out)}
.world-slide-image-passthrough{object-position:82% center}
.world-slide::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(8,5,3,0.9) 0%,rgba(8,5,3,0.2) 14%,transparent 25%,transparent 75%,rgba(8,5,3,0.2) 86%,rgba(8,5,3,0.9) 100%),linear-gradient(180deg,rgba(8,5,3,0.72) 0%,transparent 23%,transparent 62%,rgba(8,5,3,0.94) 100%),radial-gradient(ellipse 72% 68% at 50% 44%,transparent 50%,rgba(8,5,3,0.78) 100%)}
.world-slide::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 30%,rgba(6,4,2,0.9) 100%)}
.world-rotator:hover .world-slide-image{transform:scale(1.06)}
.world-rotation-control{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;display:grid;place-items:center;appearance:none;line-height:0;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:rgba(17,12,8,0.92);box-shadow:0 6px 18px rgba(0,0,0,0.38);backdrop-filter:var(--blur-soft);color:var(--sand-100);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.world-rotation-control:hover,.world-rotation-control:focus-visible{color:#fff;background:rgba(39,27,17,0.98);border-color:var(--sand-200);transform:translate(-50%,-50%) scale(1.08)}
.world-rotation-control svg{display:block;width:15px;height:15px}
/* ---------- About ---------- */
.about{position:relative;background:linear-gradient(180deg,#120c08,#0e0a06)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.about-figure{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-soft);box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.about-figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.about-figure .af-scrim{position:absolute;inset:0;background:linear-gradient(200deg,transparent 40%,rgba(10,7,4,0.5))}
.about-figure .af-badge{position:absolute;left:22px;bottom:20px;font-family:var(--font-display);letter-spacing:0.1em;color:var(--sand-50);font-size:0.9rem;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,0.7)}
.stat-row{display:flex;gap:clamp(20px,4vw,48px);margin-top:32px;flex-wrap:wrap}
.stat .n{font-family:var(--font-display);font-size:2rem;color:var(--gold-400);line-height:1}
.stat .l{font-size:var(--fs-caption);color:var(--text-muted);letter-spacing:0.06em;margin-top:6px}

/* ---------- Contact ---------- */
.contact{background:radial-gradient(120% 80% at 50% 120%,#241207,#0e0a06 60%)}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(28px,5vw,64px)}
.contact-card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:clamp(24px,3vw,40px);backdrop-filter:var(--blur-glass);box-shadow:var(--shadow-lg)}
.contact-direct{display:flex;min-height:330px;flex-direction:column;align-items:flex-start;justify-content:center}
.contact-direct-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(251,180,23,0.2),rgba(215,90,27,0.15));border:1px solid var(--border-soft);color:var(--gold-400);margin-bottom:22px}
.contact-direct-icon svg{width:27px;height:27px}
.contact-direct h3{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px}
.contact-direct p{color:var(--text-muted);max-width:38ch;margin-bottom:26px}
.contact-direct small{display:block;color:var(--text-faint);font-size:var(--fs-caption);margin-top:18px}
.contact-side .ci{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.contact-side .ci .ic{flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;background:linear-gradient(135deg,rgba(251,180,23,0.16),rgba(215,90,27,0.12));border:1px solid var(--border-soft);color:var(--gold-400)}
.contact-side .ci .ic svg{width:20px;height:20px}
.contact-side .ci b{display:block;color:var(--text-strong);margin-bottom:2px}
.contact-side .ci span{color:var(--text-muted);font-size:var(--fs-body-sm)}

/* ---------- Footer ---------- */
.site-footer{background:#0b0805;border-top:1px solid var(--border-soft);padding:clamp(40px,6vw,64px) 0 34px}
.footer-inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.footer-logo{height:56px;width:auto;opacity:0.96}
.footer-cols{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}
.footer-col h4{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.16em;color:var(--sand-300);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{color:var(--text-muted);font-size:var(--fs-body-sm);line-height:1.35;display:inline-block}
.footer-col a:hover{color:var(--sand-100)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:clamp(32px,5vw,56px);padding-top:22px;border-top:1px solid var(--hairline);color:var(--text-faint);font-size:var(--fs-caption)}
.trademark-notice{margin-top:14px;color:var(--text-faint);font-size:var(--fs-caption);line-height:1.5}

/* ---------- Scroll reveal ---------- */
.r{opacity:0;transform:translateY(26px);transition:opacity 0.7s var(--ease-out),transform 0.8s var(--ease-out)}
.r.vis{opacity:1;transform:none}
.r.d1{transition-delay:0.08s}.r.d2{transition-delay:0.16s}.r.d3{transition-delay:0.24s}.r.d4{transition-delay:0.32s}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .reader-grid{grid-template-columns:1fr;gap:40px}
  .reader-visual{order:-1;min-height:280px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .about-figure{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .world-card.span-6,.world-card.span-4{grid-column:span 6}
}
@media (max-width:620px){
  .worlds-grid{grid-template-columns:repeat(6,1fr)}
  .world-card.span-6,.world-card.span-4{grid-column:span 6}
  .world-card{min-height:230px}
  .footer-inner{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none}
  .vcr-logo,.reader-visual .vcr-badge{animation:none}
  .vcr-glow{animation:none}
  .reveal-up,.scroll-cue{animation:none;opacity:1;transform:none}
  .r{transition:none}
  .world-rotator .world-slide,.world-slide-image{transition:none}
  .world-rotation-control{display:none}
}