/* SONIC V30 Studio Edition — visual theme only; Supabase & pricing logic untouched */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');
:root{--studio-ink:#0a0a0a;--studio-orange:#b15f2c;--studio-surface:#f1f0ee;--studio-border:#e6e5e2;font-family:'Onest',sans-serif!important;color:#111!important;background:#fff!important;color-scheme:light!important}
html{scroll-behavior:smooth}body{font-family:'Onest',sans-serif!important;background:#fff!important;color:#111!important;overflow-x:hidden}
a{color:inherit}button,input,select,textarea{font-family:'Onest',sans-serif!important}
:focus-visible{outline:2px solid #b15f2c!important;outline-offset:3px}
.nav{max-width:1440px!important;height:auto!important;min-height:94px!important;padding:18px clamp(20px,4vw,64px)!important;gap:18px!important;position:relative;z-index:20}
.brand{font-size:15px!important;color:#111!important;letter-spacing:-.025em!important;font-weight:800!important}.brand small,.form-brand small{color:#b15f2c!important;letter-spacing:.12em!important}.logo{background:#0a0a0a!important;color:#fff!important;border-radius:14px!important;box-shadow:none!important}
.nav nav{gap:clamp(8px,1.1vw,19px)!important;flex-wrap:wrap}.nav nav a{color:#333!important;font-size:12px!important;font-weight:600}.nav nav a:hover{color:#b15f2c!important}
.nav-actions{gap:8px!important}.nav-actions select{background:#f1f0ee!important;color:#111!important;border:1px solid #e6e5e2!important;border-radius:13px!important}
.primary,.ghost,.outline,.secondary,.sonic-v27-cta{border-radius:999px!important;box-shadow:none!important;transition:transform .2s,background .2s,color .2s!important}
.primary,.sonic-v27-cta{background:#0a0a0a!important;color:#fff!important;border-color:#0a0a0a!important}.primary:hover,.sonic-v27-cta:hover{background:#b15f2c!important;transform:translateY(-2px)}
.ghost{background:#f1f0ee!important;color:#111!important}.outline,.secondary{background:transparent!important;color:#111!important;border:1px solid #bbb!important}
.hero{position:relative!important;isolation:isolate;max-width:none!important;margin:0!important;padding:clamp(85px,10vw,155px) clamp(24px,7vw,110px) clamp(75px,9vw,125px)!important;min-height:650px!important;background:radial-gradient(ellipse at 76% 48%,#d9c7b7 0,transparent 38%),linear-gradient(135deg,#f7f6f3,#d6d4cf)!important;text-align:left!important;overflow:hidden;border-radius:0 0 34px 34px!important}
.hero:before{content:'SONIC';position:absolute;z-index:-1;bottom:-.14em;right:0;left:0;text-align:center;font-size:clamp(105px,19vw,330px);line-height:1;letter-spacing:-.08em;font-weight:800;color:#ffffff80;pointer-events:none}
.hero:after{content:'';position:absolute;z-index:-1;right:clamp(24px,8vw,160px);top:23%;width:clamp(220px,29vw,430px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c47e4c 0 15%,#0c0c0c 15.3% 18%,transparent 18.5%),repeating-radial-gradient(circle,#111 0 4px,#292929 5px,#101010 9px);box-shadow:15px 25px 45px #0003;animation:studio-vinyl 30s linear infinite;pointer-events:none}
@keyframes studio-vinyl{to{transform:rotate(360deg)}}
.hero>.eyebrow,.hero>h1,.hero>p,.hero>.hero-buttons,.hero>.hero-meta,.hero>.sonic-v27-offer{position:relative;z-index:2;max-width:min(58%,750px)!important}
.hero .eyebrow{color:#97501f!important;font-size:12px!important;letter-spacing:.13em!important}.hero h1{font-size:clamp(50px,6.5vw,104px)!important;line-height:1.01!important;letter-spacing:-.07em!important;font-weight:700!important;margin:25px 0!important}
.hero h1 em{background:none!important;color:#b15f2c!important;-webkit-text-fill-color:#b15f2c!important}
.hero>p{font-size:16px!important;line-height:1.75!important;color:#5b5b5b!important}
.hero .hero-buttons{justify-content:flex-start!important}.hero .hero-meta{display:flex;flex-wrap:wrap;gap:9px!important}.hero .hero-meta span{background:#ffffffb5!important;border:1px solid #e5e3de!important;border-radius:999px!important;padding:9px 13px!important;color:#333!important;font-size:12px!important}
.sonic-v27-offer{background:#ffffffdc!important;border:1px solid #e6e5e2!important;border-radius:25px!important;box-shadow:none!important;padding:24px!important;backdrop-filter:blur(8px)}
.sonic-v27-price{color:#111!important}.sonic-v27-kicker{color:#b15f2c!important}
.section,.preview,.security,.v5-hero-detail,.v5-royalty,.v5-explain,.v5-faq{background:#fff!important;color:#111!important}
.section h2,.section h3,.preview h2,.final-cta h2{font-family:'Onest',sans-serif!important;letter-spacing:-.045em!important}
.section h2{font-size:clamp(31px,4vw,62px)!important;line-height:1.1!important}
.section p,.section li,.preview p{color:#5b5b5b}
.card,.feature,.panel,.faq-item,.metric,.solution-card,.comparison-card,.platform-card,.benefit-card,.step-card,.pricing-card,.stat-card{border-radius:25px!important;box-shadow:none!important;border-color:#e6e5e2!important}
.section:nth-of-type(even){background:#f8f7f5!important}
.final-cta{background:#0a0a0a!important;color:#fff!important;border-radius:32px!important;margin:20px!important}
.final-cta p{color:#ddd!important}
footer{background:#0a0a0a!important;color:#fff!important}
footer a{color:#ddd!important}
@media(max-width:1150px){.nav nav{gap:8px!important}.nav nav a{font-size:11px!important}.hero:after{right:4vw;top:30%;width:29vw}.hero>.eyebrow,.hero>h1,.hero>p,.hero>.hero-buttons,.hero>.hero-meta,.hero>.sonic-v27-offer{max-width:65%!important}}
@media(max-width:800px){.hero{padding:70px 22px 60px!important;min-height:0!important}.hero:after{position:relative;display:block;width:240px;height:240px;top:auto;right:auto;margin:30px auto 0;z-index:0}.hero>.eyebrow,.hero>h1,.hero>p,.hero>.hero-buttons,.hero>.hero-meta,.hero>.sonic-v27-offer{max-width:100%!important}.hero h1{font-size:clamp(45px,9vw,75px)!important}.nav{min-height:70px!important}.nav nav{display:none!important}.nav-actions{margin-left:auto}.nav-actions .ghost{display:none!important}}
@media(max-width:460px){.hero h1{font-size:45px!important}.nav{padding:12px 16px!important}.brand{font-size:12px!important}.nav-actions select{max-width:65px!important}.nav-actions .primary{padding:10px 12px!important;font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.hero:after{animation:none!important}}