:root {
  --bg: #080b0d;
  --panel: #0e1315;
  --panel-2: #11181a;
  --text: #f1f4f2;
  --muted: #8c9694;
  --line: rgba(255,255,255,.10);
  --green: #17bd70;
  --green-soft: rgba(23,189,112,.14);
  --green-bright: #35e58d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 20;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nav {
  height: 82px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.brand { display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.14em; font-weight:700; }
.brand b { color: var(--green); }

.nav-link { font-size:11px; letter-spacing:.15em; color:var(--muted); transition:.2s; }
.nav-link:hover { color:var(--green-bright); }
.nav-link span { color:var(--green); margin-left:8px; }

.hero {
  min-height: calc(100vh - 82px); padding: 12vh 9vw 6vh; position:relative; display:flex; flex-direction:column; justify-content:center;
  isolation:isolate;
}
.hero-grid, .cta-grid {
  position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero:after {
  content:""; position:absolute; width:500px; height:500px; right:-180px; top:8%; z-index:-1;
  background:var(--green); opacity:.10; filter:blur(120px); border-radius:50%;
}
.eyebrow, .section-label, .feature-tag {
  color:var(--green); font-size:10px; font-weight:800; letter-spacing:.18em;
}
.eyebrow { display:flex; align-items:center; gap:10px; animation:fadeUp .8s ease both; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(23,189,112,.6); animation:pulse 1.8s infinite; }
h1 {
  font-size:clamp(58px, 9.5vw, 150px); line-height:.88; letter-spacing:-.07em; margin:24px 0 30px;
  max-width:1050px; font-weight:800; animation:fadeUp .9s .08s ease both;
}
h1 em, h2 em { color:var(--green); font-style:normal; }
.hero-copy { max-width:590px; color:var(--muted); font-size:17px; line-height:1.65; animation:fadeUp .9s .16s ease both; }
.hero-actions { display:flex; gap:12px; margin-top:30px; animation:fadeUp .9s .24s ease both; }
.button {
  display:inline-flex; align-items:center; gap:30px; padding:16px 20px; border:1px solid var(--line);
  font-size:10px; letter-spacing:.16em; font-weight:800; transition:.25s;
}
.button.primary { background:var(--green); color:#06100b; border-color:var(--green); }
.button.primary:hover { background:var(--green-bright); transform:translateY(-2px); box-shadow:0 12px 40px rgba(23,189,112,.2); }
.button.ghost:hover { border-color:var(--green); color:var(--green); }
.hero-meta { margin-top:auto; padding-top:80px; display:flex; justify-content:space-between; color:#4f5957; font-size:9px; letter-spacing:.18em; }

.migration { padding:130px 9vw; display:grid; grid-template-columns:1fr 1fr; gap:10vw; border-top:1px solid var(--line); position:relative; }
.migration-line { position:absolute; top:0; left:9vw; width:80px; height:2px; background:var(--green); }
h2 { font-size:clamp(42px, 6vw, 88px); line-height:.94; letter-spacing:-.055em; margin:16px 0 0; }
.migration-text { max-width:500px; padding-top:34px; color:var(--muted); font-size:16px; line-height:1.7; }
.text-link { display:inline-flex; gap:24px; margin-top:20px; color:var(--text); font-size:10px; letter-spacing:.16em; font-weight:800; border-bottom:1px solid var(--green); padding-bottom:8px; }
.text-link span { color:var(--green); }

.features { padding:120px 5vw 150px; background:#0a0e10; border-top:1px solid var(--line); }
.section-heading { padding:0 4vw 60px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.feature-card { background:var(--panel); padding:28px; min-height:510px; position:relative; overflow:hidden; transition:.35s; }
.feature-card:hover, .feature-card.active { background:var(--panel-2); }
.feature-number { color:#45504d; font-size:10px; letter-spacing:.15em; }
.feature-card h3 { margin:28px 0 12px; font-size:18px; letter-spacing:.08em; }
.feature-card p { color:var(--muted); line-height:1.65; font-size:14px; max-width:340px; }
.feature-tag { position:absolute; bottom:28px; left:28px; color:#58615f; font-size:8px; }

.feature-visual { height:235px; margin-top:18px; position:relative; overflow:hidden; background:#090d0f; border:1px solid var(--line); }
.gallery-visual { display:flex; gap:8px; padding:18px; align-items:center; justify-content:center; }
.mini-photo { width:30%; height:175px; background:linear-gradient(135deg,#26302f,#111719); border:1px solid #303a38; transform:skewY(-5deg); position:relative; overflow:hidden; }
.mini-photo:before { content:""; position:absolute; width:120%; height:45%; bottom:-10%; left:-10%; background:#17211f; border-radius:50% 50% 0 0; }
.photo-a { transform:translateY(16px) rotate(-4deg); }
.photo-b { height:200px; border-color:var(--green); box-shadow:0 0 35px rgba(23,189,112,.10); }
.photo-c { transform:translateY(10px) rotate(4deg); }
.scan { position:absolute; left:0; right:0; height:1px; background:var(--green); opacity:.7; animation:scan 3s linear infinite; }

.commerce-visual { padding:20px; display:grid; place-items:center; }
.commerce-window { width:90%; border:1px solid #26302e; background:#0c1113; padding:12px; box-shadow:0 20px 50px #0008; }
.window-top { display:flex; gap:5px; margin-bottom:14px; }
.window-top span { width:5px; height:5px; border-radius:50%; background:#3b4542; }
.commerce-row { display:grid; grid-template-columns:12px 1fr auto; gap:8px; align-items:center; padding:11px 0; border-top:1px solid var(--line); font-size:8px; letter-spacing:.08em; }
.commerce-row i { width:10px; height:10px; border:1px solid var(--green); }
.commerce-row strong { color:var(--green); }
.commerce-button { margin-top:12px; padding:10px; background:var(--green); color:#06100b; text-align:center; font-size:8px; font-weight:900; letter-spacing:.12em; }

.creator-visual { display:grid; place-items:center; }
.creator-core { width:65px; height:65px; display:grid; place-items:center; border:1px solid var(--green); color:var(--green); font-size:12px; font-weight:800; position:relative; z-index:2; box-shadow:0 0 35px rgba(23,189,112,.15); }
.orbit { position:absolute; border:1px solid rgba(23,189,112,.28); border-radius:50%; animation:rotate 12s linear infinite; }
.orbit-1 { width:130px; height:130px; }
.orbit-2 { width:200px; height:200px; animation-direction:reverse; animation-duration:18s; }
.creator-dot { position:absolute; width:6px; height:6px; background:var(--green); border-radius:50%; }
.dot-1 { transform:translate(97px,-48px); }.dot-2 { transform:translate(-100px,20px); }.dot-3 { transform:translate(20px,97px); }

.cta { min-height:600px; padding:120px 9vw; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; overflow:hidden; }
.cta:after { content:""; position:absolute; width:600px; height:600px; right:-250px; bottom:-300px; background:var(--green); opacity:.08; filter:blur(100px); border-radius:50%; }
.cta .button { margin-top:35px; }
footer { padding:25px 5vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#505a57; font-size:8px; letter-spacing:.16em; }

@keyframes fadeUp { from {opacity:0; transform:translateY(25px)} to {opacity:1; transform:none} }
@keyframes pulse { 70% { box-shadow:0 0 0 7px transparent } 100% { box-shadow:0 0 0 0 transparent } }
@keyframes scan { from { top:0 } to { top:100% } }
@keyframes rotate { to { transform:rotate(360deg) } }

@media (max-width: 800px) {
  .nav { height:70px; padding:0 5vw; }
  .hero { min-height:calc(100vh - 70px); padding:70px 7vw 35px; }
  .hero-meta { padding-top:55px; gap:20px; }
  .hero-meta span:last-child { display:none; }
  .migration { grid-template-columns:1fr; padding:90px 7vw; gap:30px; }
  .migration-line { left:7vw; }
  .features { padding:90px 5vw; }
  .section-heading { padding:0 2vw 45px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:470px; }
  .cta { min-height:500px; padding:90px 7vw; }
  footer { flex-wrap:wrap; gap:15px; }
}