:root{--bg:#07060a;--ink:#f3ede2;--mute:#8d867a;--gold:#d8b47a;--gold2:#f6e2b3;--ruby:#b3262f;--serif:"Cormorant Garamond","Noto Serif SC",serif;--cn:"Noto Serif SC",serif;--sans:Inter,"PingFang SC",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.gold{background:linear-gradient(100deg,#a9844b 0%,var(--gold2) 40%,#b8925a 60%,var(--gold2) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.label{font:300 12px/1 var(--sans);letter-spacing:.35em;color:var(--gold);text-transform:uppercase;margin-bottom:28px}

/* chrome */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(216,180,122,.6);border-radius:50%;z-index:100;pointer-events:none;mix-blend-mode:difference;display:grid;place-items:center}
.cursor span{width:5px;height:5px;background:var(--gold2);border-radius:50%}
.glow{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(216,180,122,.13),transparent 60%)}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transform-origin:0 50%;transform:scaleX(0);z-index:95}
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:26px 5vw;z-index:80;mix-blend-mode:difference}
.brand{font:500 20px var(--serif);letter-spacing:.4em;display:flex;align-items:center;gap:10px}
.brand i{width:9px;height:9px;background:var(--ruby);transform:rotate(45deg);box-shadow:0 0 14px var(--ruby)}
.brand em{font:300 12px var(--cn);letter-spacing:.2em;font-style:normal;opacity:.7}
.nav nav{display:flex;gap:38px;font-size:12px;letter-spacing:.25em}
.nav nav a{opacity:.7;transition:opacity .3s}.nav nav a:hover{opacity:1}
.clock{font:300 13px var(--sans);letter-spacing:.2em;font-variant-numeric:tabular-nums}

/* hero */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;align-items:center;padding:0 7vw}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,10,.92) 0%,rgba(7,6,10,.55) 40%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero-copy{position:relative;z-index:2;max-width:760px}
.eyebrow{font:300 12px var(--sans);letter-spacing:.4em;color:var(--gold);margin-bottom:34px;text-transform:uppercase}
.hero-title{font:500 clamp(44px,6.4vw,104px)/1.08 var(--cn);letter-spacing:-.01em;margin-bottom:34px}
.hero-sub{font:300 17px/1.9 var(--cn);color:#c9c1b4;margin-bottom:48px}
.char{display:inline-block;will-change:transform,opacity,filter}
.line-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.cta{display:inline-flex;align-items:center;gap:18px;padding:18px 30px;border:1px solid rgba(216,180,122,.45);border-radius:999px;font:400 14px var(--cn);letter-spacing:.15em;position:relative;overflow:hidden;backdrop-filter:blur(8px);background:rgba(255,255,255,.03)}
.cta b{font-weight:300;color:var(--gold2)}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transform:translateY(101%);transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:-1}
.cta:hover{color:#111}.cta:hover b{color:#111}.cta:hover::before{transform:translateY(0)}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.5em;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}
.scroll-hint span{width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:drip 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* manifesto */
.manifesto{padding:22vh 7vw;max-width:1500px;margin:0 auto;position:relative;z-index:2}
.scrub{font:300 clamp(30px,4.2vw,66px)/1.45 var(--cn);letter-spacing:-.005em}
.scrub .w{opacity:.12;transition:none}
.scrub em{font-style:normal;color:var(--gold2)}

/* pain */
.pain{height:220vh;position:relative}
.pain-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.chaos{position:absolute;inset:0}
.bubble{position:absolute;padding:12px 18px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px);font:300 14px var(--cn);color:#bdb5a8;white-space:nowrap}
.pain-copy{position:relative;z-index:3;padding:60px 80px!important;background:radial-gradient(closest-side,rgba(7,6,10,.96) 55%,rgba(7,6,10,.7) 75%,transparent);text-align:center;max-width:820px;padding:0 24px}
.pain-copy h2{font:500 clamp(36px,5vw,78px)/1.25 var(--cn);margin-bottom:28px}
.pain-copy p:last-child{font:300 17px/1.9 var(--cn);color:#a9a193}
.strike{position:relative;display:inline-block;color:#e9e1d3}
.strike::after{content:"";position:absolute;left:-4%;top:52%;height:5px;width:108%;background:var(--ruby);transform:scaleX(var(--s,0));transform-origin:0 50%;box-shadow:0 0 18px rgba(179,38,47,.8);border-radius:4px}

/* 08:00 */
.eight{height:400vh;position:relative}
.eight-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:0 7vw;gap:4vw;overflow:hidden}
.big-clock{font:300 clamp(110px,15vw,240px)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.big-clock i{font-style:normal;color:var(--gold);animation:blink 1s steps(2) infinite;margin:0 .04em}
@keyframes blink{50%{opacity:.2}}
.eight-steps{margin-top:40px;border-left:1px solid rgba(216,180,122,.2);padding-left:28px}
.step{font:300 19px/1 var(--cn);color:#5d574f;padding:16px 0;position:relative;transition:color .5s}
.step::before{content:"";position:absolute;left:-33px;top:50%;width:9px;height:9px;border-radius:50%;background:#2a2620;transform:translateY(-50%);transition:.5s}
.step.on{color:var(--ink)}.step.on::before{background:var(--gold);box-shadow:0 0 16px var(--gold)}
.phone{justify-self:center;perspective:1400px}
.phone-frame{width:340px;height:690px;border-radius:54px;padding:12px;background:linear-gradient(145deg,#3a2f22,#0d0b09 40%,#2b2218);box-shadow:0 0 0 1.5px rgba(216,180,122,.55),0 60px 120px -30px rgba(0,0,0,.9),0 0 90px -20px rgba(216,180,122,.35);transform-style:preserve-3d}
.screen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#2a1f14 0%,#0b0a0d 60%)}
.notch{position:absolute;left:50%;top:22px;width:96px;height:28px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:5}
.lock{position:absolute;top:90px;width:100%;text-align:center}
.lock b{display:block;font:300 78px/1 var(--serif);letter-spacing:-.02em}
.lock span{font:300 13px var(--cn);color:#a89f90}
.notif{position:absolute;left:14px;right:14px;top:250px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:rgba(40,34,28,.75);backdrop-filter:blur(14px);border:1px solid rgba(216,180,122,.25);opacity:0}
.notif i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font:600 18px var(--serif);font-style:normal;color:#160f07;background:linear-gradient(135deg,var(--gold2),var(--gold))}
.notif b{display:block;font:500 13px var(--cn)}.notif span{font:300 12px var(--cn);color:#a89f90}
.list{position:absolute;left:14px;right:14px;top:330px;display:flex;flex-direction:column;gap:10px}
.card{display:flex;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);opacity:0}
.card em{font:300 22px var(--serif);font-style:normal;color:var(--gold)}
.card b{display:block;font:500 14px var(--cn);margin-bottom:4px}.card small{font:300 10px var(--cn);color:var(--gold);margin-left:6px;padding:2px 6px;border:1px solid rgba(216,180,122,.35);border-radius:6px}
.card span{font:300 12px/1.5 var(--cn);color:#a89f90}
.card.hot{border-color:rgba(216,180,122,.45);background:linear-gradient(135deg,rgba(216,180,122,.14),rgba(255,255,255,.02))}
.advice{padding:14px;border-radius:18px;background:rgba(179,38,47,.1);border:1px solid rgba(179,38,47,.35);opacity:0}
.advice p{font:300 12px/1.7 var(--cn);color:#d9cfc0}.advice b{color:var(--gold2);font-weight:500;margin-right:4px}

/* craft horizontal */
.craft{height:400vh;position:relative}
.craft-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.craft-label{padding-left:7vw}
.track{display:flex;gap:4vw;padding:0 7vw;width:max-content;will-change:transform}
.panel{flex:none;width:min(560px,78vw);height:66vh;position:relative}
.intro-panel{display:flex;align-items:center;width:min(520px,70vw)}
.intro-panel h2{font:500 clamp(44px,5vw,84px)/1.2 var(--cn)}
.tilt{border-radius:6px;overflow:hidden;transform-style:preserve-3d}
.tilt .ph{position:absolute;inset:0;overflow:hidden}
.tilt .ph img{transform:scale(1.25);will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,6,10,.95) 0%,rgba(7,6,10,.2) 55%,transparent)}
.meta{position:absolute;left:36px;right:36px;bottom:36px;z-index:2}
.meta em{font:300 italic 20px var(--serif);color:var(--gold)}
.meta h3{font:500 44px/1.2 var(--cn);margin:6px 0 12px}
.meta p{font:300 15px/1.8 var(--cn);color:#c9c1b4}

/* numbers */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);padding:18vh 7vw;gap:4vw;border-top:1px solid rgba(255,255,255,.06)}
.num b{font:300 clamp(90px,11vw,180px)/1 var(--serif);color:var(--gold2);font-variant-numeric:tabular-nums}
.num span{font:300 16px var(--cn);margin-left:10px;color:var(--gold)}
.num p{margin-top:18px;font:300 15px var(--cn);color:var(--mute)}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(216,180,122,.18);padding:34px 0}
.marquee-inner{display:flex;width:max-content}
.marquee-inner span{font:300 italic clamp(40px,6vw,92px)/1 var(--cn);white-space:nowrap;padding-right:.4em;-webkit-text-stroke:1px rgba(216,180,122,.6);color:transparent}

/* finale */
.finale{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 6vw}
.finale-bg{position:absolute;inset:0;opacity:.35}
.finale-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,var(--bg) 85%)}
.finale-title{position:relative;font:500 clamp(48px,7vw,120px)/1.15 var(--cn);margin-bottom:28px}
.finale-sub{position:relative;font:300 14px var(--sans);letter-spacing:.4em;color:var(--gold);margin-bottom:56px}
.finale footer{position:absolute;bottom:28px;font-size:11px;letter-spacing:.2em;color:#5a544c}

@media (max-width:900px){
  body{cursor:auto}.cursor,.glow{display:none}.nav nav{display:none}
  .eight-sticky{grid-template-columns:1fr;padding-top:80px;gap:0}.eight-left{display:none}
  .phone-frame{transform:scale(.85)}
  .numbers{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}