:root { --ink:#090b0b; --paper:#eef0ea; --lime:#c8ff19; --muted:#a2a69f; --line:rgba(255,255,255,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }

.hero { min-height:800px; color:white; background:radial-gradient(circle at 78% 28%,rgba(118,145,140,.34),transparent 30%),linear-gradient(112deg,#080a0a 0%,#101413 54%,#1b2321 100%); position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; width:720px; height:720px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-260px; top:80px; box-shadow:0 0 0 120px rgba(255,255,255,.018),0 0 0 280px rgba(255,255,255,.012); }
.noise { position:absolute; inset:0; opacity:.12; 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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); pointer-events:none; }
.nav { height:92px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:22px; font-weight:900; letter-spacing:-.05em; }
.brand>span:last-child>span { color:var(--lime); }
.brandMark { width:35px; height:35px; display:grid; place-items:center; color:var(--ink); background:var(--lime); transform:skew(-9deg); font-size:20px; }
.navStatus { font-size:11px; letter-spacing:.22em; font-weight:700; color:#c7cbc5; display:flex; align-items:center; gap:10px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(200,255,25,.12); }
.heroGrid { min-height:625px; display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:center; position:relative; z-index:2; padding-block:56px 80px; }
.heroCopy { position:relative; }
.kicker { display:flex; align-items:center; gap:14px; color:#b9bdb7; font-size:11px; letter-spacing:.22em; font-weight:700; margin:0 0 26px; }
.kicker span { color:var(--lime); border:1px solid rgba(200,255,25,.45); padding:7px 8px; }
h1 { font-size:clamp(58px,7.7vw,108px); line-height:.83; letter-spacing:-.075em; font-weight:950; margin:0; }
h1 em,.closing h2 em { color:var(--lime); font-style:normal; }
.lead { max-width:590px; color:#afb3ad; font-size:18px; line-height:1.55; margin:32px 0 0; }
.heroActions { display:flex; align-items:center; gap:28px; margin-top:38px; }
.primaryButton { display:flex; justify-content:space-between; align-items:center; width:282px; padding:20px 22px; color:#0b0c0b; background:var(--lime); font-size:12px; letter-spacing:.12em; font-weight:900; transition:transform .2s,background .2s; }
.primaryButton:hover { transform:translateY(-3px); background:#dcff67; }
.primaryButton span { font-size:18px; }
.launchNote { color:#858a84; font-size:11px; line-height:1.5; text-transform:uppercase; letter-spacing:.1em; }

.windPanel { background:rgba(14,18,17,.73); border:1px solid rgba(255,255,255,.18); padding:28px; backdrop-filter:blur(18px); box-shadow:0 35px 100px rgba(0,0,0,.28); position:relative; transform:rotate(1deg); }
.windPanel::before { content:""; position:absolute; inset:7px -7px -7px 7px; border:1px solid rgba(200,255,25,.25); z-index:-1; }
.weatherTop { display:flex; justify-content:space-between; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--line); }
.weatherTop p { margin:0 0 9px; color:#858b85; font-size:10px; letter-spacing:.17em; }
.weatherTop strong { font-size:18px; letter-spacing:-.02em; }
.liveChip { color:var(--lime); font-size:9px; letter-spacing:.18em; border:1px solid rgba(200,255,25,.4); padding:7px 8px; }
.windValue { display:flex; align-items:center; gap:14px; padding:26px 0 22px; }
.windValue>strong { font-size:94px; line-height:.8; letter-spacing:-.09em; }
.windValue>span { color:#d8dbd5; font-size:16px; line-height:1.25; }
.windValue small { color:#777d77; font-size:10px; text-transform:uppercase; }
.windValue i { margin-left:auto; width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--ink); font-size:36px; font-style:normal; }
.forecast { height:130px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:end; justify-content:space-between; padding:14px 8px 12px; }
.forecast div { display:flex; flex-direction:column; align-items:center; gap:7px; width:18%; }
.forecast span { color:#666c67; font-size:9px; }
.forecast b { width:3px; background:#5f6660; display:block; }
.forecast small { color:#9aa09a; font-size:10px; }
.forecast .active b { background:var(--lime); box-shadow:0 0 17px rgba(200,255,25,.5); }
.forecast .active small,.forecast .active span { color:var(--lime); }
.weatherBottom { display:flex; justify-content:space-between; gap:15px; padding-top:20px; color:#8d938d; font-size:9px; letter-spacing:.1em; }
.weatherBottom b { color:var(--lime); margin-right:7px; }
.ticker { position:relative; z-index:3; background:var(--lime); color:var(--ink); padding:14px 0; overflow:hidden; font-size:12px; letter-spacing:.18em; font-weight:900; white-space:nowrap; transform:rotate(-.8deg) scale(1.02); transform-origin:center; }
.ticker div { width:max-content; animation:move 22s linear infinite; }
.ticker span { margin-inline:30px; }
@keyframes move { to { transform:translateX(-35%); } }

.inside { padding-block:120px 130px; }
.sectionHead { display:grid; grid-template-columns:1fr 1.5fr .9fr; align-items:end; gap:40px; margin-bottom:68px; }
.sectionHead>p:first-child { align-self:start; font-size:10px; font-weight:800; letter-spacing:.18em; color:#6f746d; margin:12px 0 0; }
.sectionHead h2 { font-size:clamp(48px,6.3vw,90px); line-height:.86; letter-spacing:-.075em; margin:0; }
.sectionHead h2 span { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.sectionIntro { color:#666b64; line-height:1.65; font-size:14px; margin:0 0 4px; }
.featureGrid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #bfc2ba; border-left:1px solid #bfc2ba; }
.featureCard { min-height:330px; padding:26px 28px 32px; border-right:1px solid #bfc2ba; border-bottom:1px solid #bfc2ba; transition:background .25s,color .25s,transform .25s; }
.featureCard:hover { background:var(--ink); color:white; transform:translateY(-5px); }
.featureMeta { display:flex; justify-content:space-between; align-items:start; margin-bottom:76px; }
.featureMeta span { font-size:10px; color:#858981; }
.featureMeta i { width:42px; height:42px; display:grid; place-items:center; border:1px solid #bec1b9; font-style:normal; font-size:19px; }
.featureCard>p:not(.featureText) { font-size:9px; letter-spacing:.2em; color:#777b75; margin:0 0 12px; }
.featureCard h3 { font-size:24px; letter-spacing:-.04em; margin:0; }
.rule { width:36px; height:3px; background:var(--lime); margin:25px 0 18px; }
.featureText { font-size:14px; line-height:1.6; color:#6d716b; max-width:300px; margin:0; }
.featureCard:hover .featureText { color:#aeb3ad; }

.visualBreak { background:#101516; height:min(68vw,760px); min-height:430px; overflow:hidden; border-top:8px solid var(--lime); }
.visualBreak img { width:100%; height:100%; object-fit:cover; object-position:center 54%; display:block; filter:contrast(1.04); }

.closing { background:var(--ink); color:white; position:relative; overflow:hidden; }
.closing::after { content:"RIDE"; position:absolute; right:-2vw; bottom:-7vw; color:rgba(255,255,255,.025); font-size:30vw; line-height:.7; font-weight:950; letter-spacing:-.1em; }
.closingInner { min-height:560px; padding-block:100px; display:grid; grid-template-columns:1.35fr .65fr; gap:100px; align-items:center; position:relative; z-index:1; }
.closing h2 { margin:0; font-size:clamp(58px,7vw,98px); line-height:.84; letter-spacing:-.075em; }
.closingAside { border-left:1px solid var(--line); padding-left:42px; }
.closingAside p { color:#9ca19b; font-size:15px; line-height:1.7; margin:0 0 34px; }
.closingAside a { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--lime); padding:0 0 15px; color:var(--lime); font-size:11px; letter-spacing:.15em; font-weight:800; }
.closingAside a span { font-size:20px; }
.footer { height:100px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer p { color:#73776f; font-size:9px; letter-spacing:.16em; }
.footerBrand { font-size:17px; }
.footerBrand .brandMark { width:29px; height:29px; font-size:16px; }

@media (max-width:900px) {
  .shell { width:min(100% - 30px,680px); }
  .heroGrid { grid-template-columns:1fr; gap:54px; padding-top:70px; }
  .hero { min-height:unset; }
  .windPanel { max-width:560px; margin-left:auto; }
  .sectionHead { grid-template-columns:1fr; gap:22px; }
  .sectionHead>p:first-child { order:-1; }
  .featureGrid { grid-template-columns:1fr; }
  .featureCard { min-height:280px; }
  .featureMeta { margin-bottom:42px; }
  .closingInner { grid-template-columns:1fr; gap:64px; }
}
@media (max-width:560px) {
  .nav { height:76px; }
  .navStatus { font-size:8px; letter-spacing:.14em; }
  .brand { font-size:18px; }
  .brandMark { width:31px; height:31px; }
  .heroGrid { padding:62px 0 72px; }
  h1 { font-size:clamp(53px,17vw,78px); }
  .lead { font-size:15px; margin-top:26px; }
  .heroActions { align-items:start; flex-direction:column; gap:18px; }
  .primaryButton { width:100%; }
  .windPanel { padding:20px; width:calc(100% - 8px); }
  .windValue>strong { font-size:74px; }
  .windValue i { width:55px; height:55px; font-size:28px; }
  .weatherBottom { flex-direction:column; }
  .inside { padding-block:90px; }
  .sectionHead { margin-bottom:44px; }
  .sectionHead h2 { font-size:52px; }
  .featureCard { padding:24px; }
  .visualBreak { height:480px; min-height:0; }
  .visualBreak img { object-position:38% center; }
  .closingInner { min-height:540px; padding-block:82px; }
  .closingAside { padding-left:22px; }
  .footer { height:auto; padding-block:30px; flex-wrap:wrap; }
  .footer p:nth-child(2) { order:3; width:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ticker div { animation:none; } }
