@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Orbitron:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');
:root { --ink:#07070d; --paper:#f5f7ff; --muted:#a4a8bd; --line:rgba(255,255,255,.16); --acid:#ff00ff; --teal:#00f2ea; --orange:#0077ff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--paper); background:var(--ink); font-family:'Space Grotesk',sans-serif; overflow-x:hidden; } a { color:inherit; text-decoration:none; } .noise { position:fixed; inset:0; opacity:.06; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(88,214,194,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(88,214,194,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.site-nav { position:absolute; top:0; left:0; right:0; z-index:2; width:min(1240px,calc(100% - 64px)); margin:auto; padding:30px 0; display:flex; align-items:center; justify-content:space-between; font:500 .72rem 'DM Mono',monospace; letter-spacing:.06em; } .brand { display:flex; align-items:center; gap:10px; } .brand-mark { display:grid; place-items:center; width:27px; height:27px; color:var(--ink); background:var(--acid); font:700 1rem 'Space Grotesk',sans-serif; } .brand-muted { color:var(--muted); } .nav-back { color:var(--muted); transition:color .2s; } .nav-back:hover { color:var(--acid); }
.hero { position:relative; min-height:900px; width:min(1240px,calc(100% - 64px)); margin:auto; padding:220px 0 150px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:4vw; } .hero-copy { position:relative; z-index:1; } .eyebrow { margin:0 0 24px; color:var(--teal); font:500 .72rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } .pulse { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 5px rgba(214,250,106,.12); animation:pulse 2s infinite; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:26px; font-size:clamp(4.5rem,10vw,9.5rem); letter-spacing:-.09em; line-height:.8; font-weight:600; } h1 em,h2 em { color:var(--acid); font-style:normal; } .hero-deck { color:var(--paper); font-size:clamp(1.35rem,2.7vw,2rem); letter-spacing:-.04em; margin-bottom:18px; } .hero-body { max-width:470px; color:var(--muted); line-height:1.65; font-size:1rem; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:35px; } .button { display:inline-flex; align-items:center; gap:22px; padding:17px 20px; font:500 .77rem 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; transition:transform .25s,background .25s,color .25s; } .button:hover { transform:translateY(-3px); } .button-primary { color:var(--ink); background:var(--acid); } .button-primary:hover { background:#e6ff92; } .button-quiet { border:1px solid var(--line); color:var(--muted); } .button-quiet:hover { border-color:var(--teal); color:var(--paper); }
.hero-art { width:min(40vw,500px); aspect-ratio:1; margin:auto; position:relative; display:grid; place-items:center; } .hero-art::after { content:''; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,rgba(88,214,194,.13),transparent 65%); animation:breathe 4s ease-in-out infinite; } .orbit { position:absolute; border:1px solid rgba(88,214,194,.4); border-radius:50%; transform:rotate(-22deg); } .orbit-one { width:100%; height:42%; animation:spin 18s linear infinite; } .orbit-two { width:75%; height:75%; border-color:rgba(214,250,106,.5); animation:spin 14s linear infinite reverse; } .orbit-three { width:44%; height:100%; animation:spin 10s linear infinite; } .core { position:relative; z-index:1; width:145px; height:145px; display:grid; place-content:center; text-align:center; border:1px solid var(--acid); border-radius:50%; background:rgba(7,16,15,.85); box-shadow:0 0 70px rgba(214,250,106,.12); } .core span { color:var(--acid); font-size:3.2rem; font-weight:600; letter-spacing:-.08em; line-height:1; } .core small { margin-top:8px; color:var(--muted); font:500 .52rem 'DM Mono',monospace; letter-spacing:.18em; } .orbit-label { position:absolute; z-index:2; padding:7px 9px; color:var(--ink); background:var(--paper); font:500 .6rem 'DM Mono',monospace; letter-spacing:.08em; } .label-one { top:14%; left:3%; } .label-two { top:47%; right:-3%; color:var(--ink); background:var(--acid); } .label-three { bottom:12%; left:12%; color:var(--ink); background:var(--teal); } .scroll-note { position:absolute; bottom:42px; left:0; color:var(--muted); font:500 .65rem 'DM Mono',monospace; letter-spacing:.1em; } .scroll-note span { color:var(--acid); margin-left:13px; }
.signal-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); width:100%; padding:26px max(32px,calc((100% - 1240px)/2)); gap:24px; } .signal-strip div { display:flex; flex-direction:column; gap:12px; } .signal-strip span,.step-kicker { color:var(--teal); font:500 .68rem 'DM Mono',monospace; letter-spacing:.08em; } .signal-strip strong { font-size:.9rem; font-weight:500; }
.content-section,.timeline-section,.deadline-section,.final-cta { width:min(1000px,calc(100% - 64px)); margin:0 auto; } .content-section { padding:160px 0 130px; display:grid; grid-template-columns:1fr 1fr; gap:100px; } .section-heading h2,.final-cta h2 { font-size:clamp(2.8rem,6vw,5.8rem); line-height:.9; letter-spacing:-.08em; font-weight:500; } .large-copy { color:var(--paper); font-size:clamp(1.35rem,2.3vw,1.8rem); line-height:1.35; letter-spacing:-.04em; } .large-copy strong { color:var(--acid); font-weight:500; } .idea-list { margin-top:45px; border-top:1px solid var(--line); } .idea-list p { margin:0; padding:15px 0; border-bottom:1px solid var(--line); color:var(--muted); font:500 .78rem 'DM Mono',monospace; } .idea-list span { color:var(--teal); margin-right:24px; }
.timeline-section { padding:60px 0 150px; } .timeline { border-left:1px solid var(--teal); margin:65px 0 0 14px; } .timeline-step { display:grid; grid-template-columns:100px 1fr; gap:35px; position:relative; padding:0 0 75px 35px; } .timeline-step:last-child { padding-bottom:0; } .step-number { position:absolute; left:-15px; top:0; width:29px; height:29px; display:grid; place-items:center; color:var(--ink); background:var(--acid); font:500 .65rem 'DM Mono',monospace; } .step-kicker { margin-bottom:15px; } .timeline h3 { margin-bottom:15px; font-size:clamp(1.7rem,3vw,2.7rem); letter-spacing:-.06em; font-weight:500; } .timeline p:not(.step-kicker) { color:var(--muted); line-height:1.7; max-width:560px; }
.deadline-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:65px 0; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; } .deadline-section h2 { margin-bottom:14px; font-size:clamp(3.4rem,8vw,7.5rem); letter-spacing:-.09em; line-height:.8; font-weight:500; } .deadline-section h2 em { color:var(--muted); font-size:.43em; font-style:normal; letter-spacing:-.03em; } .deadline-meta { margin:0; color:var(--muted); font:500 .73rem 'DM Mono',monospace; } .deadline-meta span { color:var(--acid); padding:0 7px; } .countdown { display:flex; gap:35px; } .countdown div { display:flex; flex-direction:column; gap:5px; } .countdown strong { color:var(--acid); font-size:2.3rem; line-height:1; font-weight:500; } .countdown span { color:var(--muted); font:500 .6rem 'DM Mono',monospace; }
.final-cta { padding:170px 0 180px; text-align:center; } .final-cta .eyebrow { color:var(--orange); } .final-cta h2 { margin-bottom:45px; } footer { width:min(1240px,calc(100% - 64px)); margin:auto; padding:25px 0 35px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font:500 .66rem 'DM Mono',monospace; letter-spacing:.08em; } footer a:hover { color:var(--acid); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; } .reveal.visible { opacity:1; transform:none; } @keyframes spin { to { transform:rotate(360deg); } } @keyframes breathe { 0%,100% { transform:scale(.92); opacity:.7; } 50% { transform:scale(1.08); opacity:1; } } @keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(214,250,106,0); } }
@media (max-width:720px) { .site-nav,.hero,.content-section,.timeline-section,.deadline-section,footer { width:calc(100% - 32px); } .brand-muted { display:none; } .nav-back { font-size:.62rem; } .hero { min-height:auto; padding:150px 0 110px; grid-template-columns:1fr; gap:70px; } h1 { font-size:clamp(4rem,20vw,7rem); } .hero-art { width:min(86vw,430px); } .scroll-note { display:none; } .signal-strip { grid-template-columns:repeat(2,1fr); padding:24px 16px; gap:25px 12px; } .content-section { padding:100px 0 80px; grid-template-columns:1fr; gap:30px; } .timeline-section { padding:30px 0 100px; } .timeline-step { grid-template-columns:1fr; gap:0; padding-left:25px; } .deadline-section { align-items:flex-start; flex-direction:column; padding:50px 0; } .countdown { gap:24px; } .countdown strong { font-size:1.8rem; } .final-cta { padding:120px 0; } footer { flex-direction:column; gap:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Netrinix main-site theme accents */
body { font-family:'Roboto',sans-serif; background:linear-gradient(-45deg,#07070d,#100817,#071329,#07070d); background-size:400% 400%; animation:themeShift 18s ease infinite; }
body::before { background-image:linear-gradient(rgba(0,242,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,255,.055) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.08; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.12) 4px); }
.brand,.hero h1,.section-heading h2,.timeline h3,.deadline-section h2,.final-cta h2 { font-family:'Orbitron',sans-serif; }
.brand-mark { color:#fff; background:linear-gradient(135deg,var(--acid),var(--orange)); box-shadow:0 0 22px rgba(255,0,255,.55); }
.brand-muted { color:var(--teal); }
.nav-back:hover,footer a:hover { color:var(--acid); text-shadow:0 0 12px rgba(255,0,255,.65); }
.hero h1 { text-shadow:0 0 36px rgba(0,119,255,.18); }
h1 em,h2 em { background:linear-gradient(90deg,var(--acid),var(--orange),var(--teal)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:gradientText 5s linear infinite; }
.hero-art::after { background:radial-gradient(circle,rgba(255,0,255,.24),rgba(0,119,255,.12) 42%,transparent 70%); }
.orbit-one,.orbit-three { border-color:rgba(0,242,234,.58); box-shadow:0 0 16px rgba(0,242,234,.18); }
.orbit-two { border-color:rgba(255,0,255,.62); box-shadow:0 0 16px rgba(255,0,255,.2); }
.core { border-color:var(--teal); box-shadow:0 0 28px rgba(0,242,234,.3),0 0 90px rgba(255,0,255,.2); }
.core span { color:var(--teal); text-shadow:0 0 22px rgba(0,242,234,.75); font-family:'Orbitron',sans-serif; }
.orbit-label { color:#fff; background:linear-gradient(135deg,var(--acid),var(--orange)); box-shadow:0 0 18px rgba(255,0,255,.35); }
.label-two { color:#fff; background:linear-gradient(135deg,var(--orange),var(--teal)); }
.label-three { color:#fff; background:linear-gradient(135deg,var(--teal),var(--orange)); }
.button { border-radius:999px; }
.button-primary { color:#fff; background:linear-gradient(90deg,var(--acid),var(--orange),var(--teal)); background-size:200% auto; box-shadow:0 0 24px rgba(255,0,255,.22); animation:gradientButton 5s ease infinite; }
.button-primary:hover { color:#fff; background-position:100% center; box-shadow:0 0 34px rgba(0,242,234,.32); }
.button-quiet:hover { border-color:var(--teal); box-shadow:0 0 18px rgba(0,242,234,.15); }
.signal-strip { background:linear-gradient(90deg,rgba(255,0,255,.05),transparent 45%,rgba(0,242,234,.05)); }
.signal-strip span,.step-kicker { color:var(--teal); }
.step-number { color:#fff; background:linear-gradient(135deg,var(--acid),var(--orange)); box-shadow:0 0 18px rgba(255,0,255,.45); }
.timeline { border-left-color:var(--orange); }
.deadline-section { background:linear-gradient(90deg,rgba(255,0,255,.06),transparent 55%); }
.countdown strong { color:var(--teal); text-shadow:0 0 14px rgba(0,242,234,.5); font-family:'Orbitron',sans-serif; }
.final-cta .eyebrow { color:var(--teal); }
@keyframes themeShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes gradientText { to { background-position:200% center; } }
@keyframes gradientButton { 0%,100% { background-position:0% center; } 50% { background-position:100% center; } }

.rewards-section { width:min(1000px,calc(100% - 64px)); margin:0 auto; padding:30px 0 145px; }
.rewards-grid { display:grid; grid-template-columns:1.15fr 1.15fr .8fr; gap:16px; margin-top:62px; }
.reward-card { min-height:390px; padding:28px; border:1px solid var(--line); background:rgba(10,10,24,.62); position:relative; overflow:hidden; transition:transform .3s ease,border-color .3s ease; }
.reward-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal),var(--orange),var(--acid)); }
.reward-card:hover { transform:translateY(-7px); border-color:var(--teal); }
.reward-winner { border-color:rgba(255,0,255,.6); background:linear-gradient(145deg,rgba(255,0,255,.15),rgba(0,119,255,.06)); }
.reward-winner::before { background:linear-gradient(90deg,var(--acid),var(--orange)); }
.reward-runner::before { background:linear-gradient(90deg,var(--orange),var(--teal)); }
.reward-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reward-rank { color:var(--teal); font:500 .75rem 'DM Mono',monospace; }
.reward-badge { color:var(--muted); font:500 .58rem 'DM Mono',monospace; letter-spacing:.08em; text-align:right; }
.reward-card h3 { margin:68px 0 28px; font:500 clamp(1.45rem,2.8vw,2.2rem)/1.05 'Orbitron',sans-serif; letter-spacing:-.06em; }
.reward-card ul { list-style:none; margin:0; padding:0; }
.reward-card li { color:var(--muted); border-top:1px solid var(--line); padding:11px 0 11px 18px; font-size:.87rem; line-height:1.4; position:relative; }
.reward-card li::before { content:'+'; position:absolute; left:0; color:var(--teal); font:500 .9rem 'DM Mono',monospace; }
.rewards-note { margin:20px 0 0; color:var(--muted); font:500 .68rem 'DM Mono',monospace; }
@media (max-width:720px) { .rewards-section { width:calc(100% - 32px); padding:20px 0 100px; } .rewards-grid { grid-template-columns:1fr; margin-top:42px; } .reward-card { min-height:0; } .reward-card h3 { margin-top:44px; } }