/* ============================================================ FONTS — to swap fonts: 1. In index.html , replace the Google Fonts tag (it is marked with a comment so you can find it fast) 2. In this file, find + replace every font-family value: Body text -> font-family: 'Inter', sans-serif Headings -> font-family: 'DM Serif Display', serif ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:#0B1220;color:#0A0A0A;overflow-x:hidden} .hero-spacer{height:100vh;display:block} /* NAV */ .nav{position:fixed;top:28px;left:50%;transform:translateX(-50%);z-index:1000;background:rgba(10,10,10,0.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:100px;padding:10px 20px;display:flex;align-items:center;gap:24px;white-space:nowrap} .nav-logo{font-family:'DM Serif Display',serif;font-size:15px;font-weight:900;color:#1E3A8A;letter-spacing:-0.5px;text-decoration:none} .nav-logo span{color:#3B82F6} .nav-links{display:flex;gap:24px;align-items:center} .nav-links a{font-size:11px;font-weight:400;color:rgba(255,255,255,0.65);text-decoration:none;letter-spacing:0.5px;transition:color 0.2s} .nav-links a:hover{color:#FFFFFF} .nav-cta{background:#FFFFFF;color:#1E3A8A !important;font-size:11px;font-weight:600;letter-spacing:0.5px;padding:8px 20px;border-radius:100px;text-decoration:none;transition:background 0.2s,color 0.2s} .nav-cta:hover{background:#F0E0E0} /* TICKER */ .ticker{position:fixed;bottom:0;left:0;right:0;z-index:500;background:#1E3A8A;padding:9px 0;overflow:hidden;white-space:nowrap} .ticker-inner{display:inline-flex;gap:48px;animation:tickerScroll 35s linear infinite} .tick{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#FFDDDD;display:flex;align-items:center;gap:10px} .tdot{width:3px;height:3px;background:#FFFFFF;border-radius:50%;opacity:0.5;flex-shrink:0} @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* SECTION 1: HERO full viewport, normal */ .hero{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1} .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transform: scale(1.08); transition: transform 12s ease; filter: brightness(0.9) contrast(1.05) saturate(1.05); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10, 15, 30, 0.55) 0%, rgba(10, 15, 30, 0.35) 40%, rgba(10, 15, 30, 0.15) 70%, rgba(10, 15, 30, 0.05) 100% ); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 40%, rgba(59, 130, 246, 0.15), transparent 60% ); pointer-events: none; } .hero-content{position:relative;z-index:2;text-align:center;padding:0 40px;max-width:800px} .hero-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#E88080;margin-bottom:28px} .hero-h1{ font-family:'EB Garamond',serif; font-size:clamp(72px,10vw,120px); font-weight:500; line-height:0.95; color:#FFFFFF; letter-spacing:-2px; margin-bottom:32px;} .hero-h1 em{font-style:italic;color:#3B82F6} .hero-sub{font-size:15px;font-weight:300;color:rgba(255,255,255,0.55);margin-bottom:48px;line-height:1.8;max-width:460px;margin-left:auto;margin-right:auto} .hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn-white{background:#FFFFFF;color:#1E3A8A;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:14px 36px;border-radius:100px;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.2s} .btn-white:hover{background:#F0E0E0} .btn-ghost{background:transparent;color:#FFFFFF;font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;padding:14px 36px;border-radius:100px;border:1px solid rgba(255,255,255,0.3);cursor:pointer;font-family:'Inter',sans-serif;transition:border-color 0.2s} .btn-ghost:hover{border-color:rgba(255,255,255,0.7)} /* SECTION 2: PROBLEM white, normal scroll */ .problem{background:#FAFAF8;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;position:relative;z-index:10;border-radius:24px 24px 0 0;overflow:hidden;margin-top:100vh} .prob-img{overflow:hidden;position:sticky;top:0;height:100vh} .prob-img img{width:100%;height:100%;object-fit:cover;display:block} .prob-text{padding:10vh 72px;display:flex;flex-direction:column;justify-content:center} .sec-label{font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:#1D4ED8;margin-bottom:20px} .sec-h2{font-family:'DM Serif Display',serif;font-size:clamp(40px,4vw,56px);font-weight:900;line-height:1.0;color:#0A0A0A;letter-spacing:-2px;margin-bottom:48px} .sec-h2 em{font-style:italic;color:#1E3A8A} .pain-item{padding:24px 0;border-bottom:1px solid #E8E8E8} .pain-item:last-child{border-bottom:none;padding-bottom:0} .pain-n{font-family:'DM Serif Display',serif;font-size:11px;font-weight:900;color:#3B82F6;letter-spacing:2px;margin-bottom:8px} .pain-t{font-family:'DM Serif Display',serif;font-size:20px;font-weight:700;color:#0A0A0A;margin-bottom:6px} .pain-b{font-size:14px;font-weight:300;line-height:1.75;color:#444440} /* SECTION 3: HOW IT WORKS — fixed starry-night background, EB Garamond, all white */ .process-outer{position:relative;background-color:#050a18;background-image:url('/stary-night.jpg');background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:11} .process-sticky{position:sticky;top:0;height:100vh;overflow:hidden} .process-track{display:flex;height:100%;will-change:transform} .process-panel{flex:0 0 100vw;height:100%;display:flex;align-items:center;justify-content:center;padding:0 10vw;position:relative} .process-label{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#FFFFFF;margin-bottom:20px} .process-h2{font-family:'EB Garamond',serif;font-size:clamp(44px,5.5vw,72px);font-weight:900;color:#FFFFFF;letter-spacing:-3px;line-height:0.95;margin-bottom:28px} .process-h2 em{font-style:italic;color:#FFFFFF} .process-body{font-family:'EB Garamond',serif;font-size:15px;font-weight:300;color:rgba(255,255,255,0.9);line-height:1.85;max-width:560px;margin-bottom:32px} .process-tag{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#FFFFFF;padding:8px 16px;border:1px solid rgba(255,255,255,0.5);display:inline-block} .process-bg-num{position:absolute;right:8vw;top:50%;transform:translateY(-50%);font-family:'EB Garamond',serif;font-size:clamp(160px,20vw,260px);font-weight:900;color:#FFFFFF;opacity:0.18;line-height:1;pointer-events:none;user-select:none} .process-progress{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center} .prog-line{width:40px;height:2px;background:rgba(255,255,255,0.15);transition:background 0.4s,width 0.4s} .prog-line.active{background:#FFFFFF;width:60px} /* SECTION 4: WHO IT'S FOR */ .wif-sec{background-image:url('public/snow-print.jpg');background-size:cover;background-position:center;padding:16vh 0;position:relative;z-index:12} .wif-inner{max-width:1200px;margin:0 auto;padding:0 10vw} .wif-eyebrow{font-family:'EB Garamond',serif;font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#FFFFFF;margin-bottom:20px} .wif-h{font-family:'EB Garamond',serif;font-size:clamp(36px,4.5vw,60px);font-weight:700;color:#FFFFFF;letter-spacing:-2px;line-height:1.0;margin-bottom:64px} .wif-h em{font-style:italic;color:#FFFFFF} .wif-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid rgba(255,255,255,0.1)} .wif-col{padding:48px 40px;border-right:1px solid rgba(255,255,255,0.1)} .wif-col:last-child{border-right:none} .wif-icon{width:44px;height:44px;margin-bottom:28px} .wif-icon svg{width:100%;height:100%} .wif-col-h{font-family:'EB Garamond',serif;font-size:24px;font-weight:700;color:#FFFFFF;letter-spacing:-0.5px;margin-bottom:10px} .wif-col-sub{font-family:'EB Garamond',serif;font-size:13px;font-weight:700;color:#FFFFFF;line-height:1.7;margin-bottom:28px;font-style:italic} .wif-list{list-style:none;display:flex;flex-direction:column;gap:12px} .wif-list li{font-family:'EB Garamond',serif;font-size:13px;font-weight:700;color:#FFFFFF;line-height:1.65;padding-left:18px;position:relative} .wif-list li::before{content:'•';position:absolute;left:0;color:#FFFFFF;font-weight:700} /* SECTION 5: KILL white */ .kill{background-image:url('public/sunrise-cave.png');background-size:cover;background-position:center;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;position:relative;z-index:14} .kill-left{padding:12vh 72px;display:flex;flex-direction:column;justify-content:center;border-right:2px solid rgba(255,255,255,0.2)} .kill-badge{background:rgba(255,255,255,0.15);color:#FFFFFF;font-family:'EB Garamond',serif;font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:6px 14px;display:inline-block;margin-bottom:28px} .kill-h{font-family:'EB Garamond',serif;font-size:clamp(32px,3.5vw,48px);font-weight:700;color:#FFFFFF;letter-spacing:-1.5px;line-height:1.05;margin-bottom:24px} .kill-h em{font-style:italic;color:#FFFFFF} .kill-body{font-family:'EB Garamond',serif;font-size:14px;font-weight:700;color:#FFFFFF;line-height:1.8;margin-bottom:36px;max-width:420px} .kill-right{padding:12vh 72px;display:flex;flex-direction:column;justify-content:center;gap:0} .kill-stat{padding:28px 0;border-bottom:1px solid rgba(255,255,255,0.15);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start} .kill-stat:last-child{border-bottom:none} .kill-num{font-family:'EB Garamond',serif;font-size:52px;font-weight:700;color:#FFFFFF;line-height:1} .kill-stat-inner .kill-label{font-family:'EB Garamond',serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#FFFFFF;margin-bottom:4px} .kill-stat-inner p{font-family:'EB Garamond',serif;font-size:13px;font-weight:700;color:#FFFFFF;line-height:1.65} /* SECTION 6: FAQ */ .faq-sec{background-image:url('public/look-up.jpg');background-size:cover;background-position:center;padding:16vh 0 14vh;position:relative;z-index:15} .faq-sec .sec-label{color:#FFFFFF} .faq-inner{max-width:840px;margin:0 auto;padding:0 10vw} .faq-h{font-family:'EB Garamond',serif;font-size:clamp(40px,5vw,60px);font-weight:700;color:#FFFFFF;letter-spacing:-2px;margin-bottom:12px} .faq-sub{font-family:'EB Garamond',serif;font-size:14px;font-weight:700;color:#FFFFFF;margin-bottom:56px;font-style:italic} .faq-item{border-bottom:1px solid rgba(255,255,255,0.2)} .faq-q{font-family:'EB Garamond',serif;font-size:18px;font-weight:700;color:#FFFFFF;padding:22px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color 0.2s;list-style:none} .faq-q:hover{color:rgba(255,255,255,0.75)} .faq-icon{font-size:22px;color:#FFFFFF;flex-shrink:0;transition:transform 0.3s;line-height:1} .faq-icon.open{transform:rotate(45deg)} .faq-a{font-family:'EB Garamond',serif;font-size:14px;font-weight:700;color:#FFFFFF;line-height:1.85;max-height:0;overflow:hidden;transition:max-height 0.45s ease,padding-bottom 0.3s} .faq-a.open{max-height:500px;padding-bottom:24px} .faq-a strong{color:#FFFFFF;font-weight:700} /* SECTION 7: CTA */ .cta-sec{background-color:#0B1220;background-image:url('public/cta-image.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;min-height:80vh;display:flex;align-items:flex-start;justify-content:center;text-align:center;padding:8vh 40px 0;position:relative;z-index:16;filter:contrast(1.0) brightness(1.2)} .cta-sec::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,25,60,0.35) 0%,rgba(10,25,60,0.2) 55%,rgba(255,255,255,1) 100%);z-index:0} .cta-inner{max-width:700px;position:relative;z-index:1} .cta-h{font-family:'DM Serif Display',serif;font-size:clamp(38px,5vw,64px);font-weight:900;color:#FFFFFF;letter-spacing:-3px;line-height:0.95;margin-bottom:16px} .cta-sub{font-size:13px;font-weight:300;color:#FFFFFF;opacity:0.8;margin-bottom:40px;line-height:1.75} /* FOOTER */ .footer{background:#FFFFFF;padding:22px 56px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:17} .f-logo{font-family:'DM Serif Display',serif;font-size:16px;font-weight:900;color:#1E3A8A} .f-links{display:flex;gap:28px} .f-links a{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#888880;text-decoration:none} .f-copy{font-size:10px;color:#888880} /* REVEAL ON SCROLL */ .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1)} .reveal.visible{opacity:1;transform:none} .reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)} .reveal-left.visible{opacity:1;transform:none} .reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)} .reveal-right.visible{opacity:1;transform:none} .d1{transition-delay:0.1s}.d2{transition-delay:0.2s}.d3{transition-delay:0.3s}