*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0A0A10;color:#F5F5F0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0}
::selection{background:#C4F542;color:#0A0A10}

.font-display{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.italic-d{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}

.headline{letter-spacing:-0.04em;line-height:0.92;font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.headline em,.italic-em{font-style:italic;color:#C4F542;font-family:'Instrument Serif',serif;font-weight:400}

.grid-bg{background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:48px 48px}

.aurora{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora::before{content:'';position:absolute;width:60vw;height:60vw;left:-10vw;top:-15vw;background:radial-gradient(circle,rgba(139,92,246,0.45) 0%,rgba(139,92,246,0) 60%);filter:blur(40px);animation:float 18s ease-in-out infinite}
.aurora::after{content:'';position:absolute;width:50vw;height:50vw;right:-10vw;top:10vw;background:radial-gradient(circle,rgba(196,245,66,0.18) 0%,rgba(196,245,66,0) 60%);filter:blur(40px);animation:float 22s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,30px) scale(1.05)}}

.btn-primary{background:#C4F542;color:#0A0A10;padding:14px 28px;border-radius:999px;font-weight:600;transition:all .25s ease;display:inline-flex;align-items:center;gap:10px;border:1px solid #C4F542;cursor:pointer}
.btn-primary:hover{background:transparent;color:#C4F542;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #C4F542}

.btn-ghost{background:transparent;color:#F5F5F0;padding:13px 28px;border-radius:999px;font-weight:500;border:1px solid rgba(245,245,240,0.2);display:inline-flex;align-items:center;gap:10px;transition:all .25s ease;cursor:pointer}
.btn-ghost:hover{border-color:#C4F542;color:#C4F542;background:rgba(196,245,66,0.05)}

.btn-violet{background:#8B5CF6;color:#fff;padding:14px 28px;border-radius:999px;font-weight:600;transition:all .25s ease;display:inline-flex;align-items:center;gap:10px;border:1px solid #8B5CF6;cursor:pointer}
.btn-violet:hover{background:#7C3AED;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #C4F542}

.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(245,245,240,0.18);border-radius:999px;padding:6px 12px;font-size:11px;text-transform:uppercase;letter-spacing:0.18em;color:rgba(245,245,240,0.7);font-weight:500}
.chip.violet{color:#A78BFA;border-color:rgba(167,139,250,0.4);background:rgba(139,92,246,0.12)}
.chip.lime{color:#C4F542;border-color:rgba(196,245,66,0.4);background:rgba(196,245,66,0.08)}
.chip.dot::before{content:'';width:6px;height:6px;border-radius:999px;background:currentColor;display:inline-block}

.card{background:rgba(255,255,255,0.025);border:1px solid rgba(245,245,240,0.08);border-radius:24px;padding:28px;transition:all .35s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%}
.card:hover{border-color:rgba(196,245,66,0.45);transform:translateY(-4px);background:rgba(255,255,255,0.04)}
.card::before{content:'';position:absolute;inset:-1px;border-radius:24px;padding:1px;background:linear-gradient(135deg,transparent,rgba(196,245,66,0.4),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::before{opacity:1}

.tool-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:28px;color:#0A0A10;font-weight:400;flex-shrink:0;letter-spacing:-0.02em}

.gr-1{background:linear-gradient(135deg,#A78BFA 0%,#C4F542 100%)}
.gr-2{background:linear-gradient(135deg,#F472B6 0%,#FBBF24 100%)}
.gr-3{background:linear-gradient(135deg,#60A5FA 0%,#A78BFA 100%)}
.gr-4{background:linear-gradient(135deg,#FB923C 0%,#F472B6 100%)}
.gr-5{background:linear-gradient(135deg,#34D399 0%,#60A5FA 100%)}
.gr-6{background:linear-gradient(135deg,#C4F542 0%,#34D399 100%)}
.gr-7{background:linear-gradient(135deg,#F87171 0%,#FBBF24 100%)}
.gr-8{background:linear-gradient(135deg,#A78BFA 0%,#F472B6 100%)}

.price-tag{font-family:'Instrument Serif',serif;font-style:italic;font-size:2.5rem;line-height:1;color:#C4F542;font-weight:400;letter-spacing:-0.02em}
.price-violet{color:#A78BFA}

.marquee-track{animation:scroll 50s linear infinite;display:flex;width:max-content}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fade-up{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

a.nav-link{position:relative;color:rgba(245,245,240,0.7);transition:color .2s;text-decoration:none}
a.nav-link:hover{color:#C4F542}
a.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:#C4F542;transition:width .3s ease}
a.nav-link:hover::after,a.nav-link.active::after{width:100%}
a.nav-link.active{color:#F5F5F0}

.glow-violet{box-shadow:0 0 60px rgba(139,92,246,0.4)}
.glow-lime{box-shadow:0 0 60px rgba(196,245,66,0.3)}

.stat-num{font-family:'Instrument Serif',serif;font-size:5rem;line-height:0.95;font-weight:400;letter-spacing:-0.04em}

.filter-pill{padding:10px 18px;border-radius:999px;font-size:13px;border:1px solid rgba(245,245,240,0.15);cursor:pointer;transition:all .2s;background:transparent;color:rgba(245,245,240,0.7);font-family:inherit;font-weight:500}
.filter-pill:hover{border-color:rgba(196,245,66,0.5);color:#C4F542}
.filter-pill.active{background:#C4F542;color:#0A0A10;border-color:#C4F542}

.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(245,245,240,0.15),transparent)}

.input-base{background:rgba(255,255,255,0.04);border:1px solid rgba(245,245,240,0.12);border-radius:14px;padding:14px 18px;color:#F5F5F0;font-family:inherit;font-size:14px;width:100%;transition:all .2s}
.input-base::placeholder{color:rgba(245,245,240,0.4)}
.input-base:focus{outline:none;border-color:#C4F542;background:rgba(255,255,255,0.06)}

.code-pill{font-family:'JetBrains Mono',monospace;background:rgba(196,245,66,0.1);color:#C4F542;padding:2px 8px;border-radius:6px;font-size:0.85em;border:1px solid rgba(196,245,66,0.2)}

.bg-noir{background:#0A0A10}
.bg-ink{background:#13131C}
.bg-soft{background:#1B1B27}

.badge-best{position:absolute;top:-10px;left:24px;background:#C4F542;color:#0A0A10;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:0.15em}

.shine{position:relative;overflow:hidden}
.shine::after{content:'';position:absolute;top:0;left:-150%;width:120%;height:100%;background:linear-gradient(110deg,transparent,rgba(196,245,66,0.12),transparent);transition:left .8s ease;pointer-events:none}
.shine:hover::after{left:120%}

.dot-bg{background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:20px 20px}

@media (max-width:768px){
  .stat-num{font-size:3.2rem}
  .price-tag{font-size:2rem}
}