/* ═══ VibeCode It, Bro - Clean Modern Theme ═══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}

:root{
  --bg:#0a0a0d;--bg-2:#0f0f13;--bg-3:#16161c;
  --surface:#131318;--surface-2:#1a1a21;
  --border:#22222b;--border-2:#2e2e3a;
  --text:#e8e8ee;--text-dim:#9090a0;--text-mute:#5a5a6a;
  --accent:#c41230;--accent-2:#e01e3c;--accent-soft:rgba(196,18,48,.1);
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --max:1080px;--pad:clamp(16px,4vw,32px);
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.2s;
}

[data-theme="light"]{
  --bg:#fafafa;--bg-2:#f0f0f4;--bg-3:#e8e8ee;
  --surface:#fff;--surface-2:#f6f6fa;
  --border:#e0e0e8;--border-2:#d0d0da;
  --text:#14141a;--text-dim:#50505a;--text-mute:#90909a;
  --accent:#c41230;--accent-2:#e01e3c;--accent-soft:rgba(196,18,48,.06);
}

body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}

a{color:var(--accent);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent-2)}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.skip-link{position:fixed;left:-9999px;top:0;z-index:1000;padding:12px 16px;background:var(--accent);color:#fff;border-radius:8px}
.skip-link:focus{left:16px;top:16px}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(56px,8vw,88px) 0}
.section--alt{background:var(--bg-2)}
.section__head{max-width:680px;margin:0 auto clamp(32px,5vw,48px);text-align:center}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:99px;margin-bottom:12px}
.section__title{font-size:clamp(1.5rem,2.8vw+.6rem,2.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.section__lead{color:var(--text-dim);font-size:1.05rem}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border-radius:99px;font-weight:600;font-size:.9rem;transition:all var(--dur) var(--ease);white-space:nowrap;cursor:pointer}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(196,18,48,.25)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border-2)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--block{width:100%}

/* ═══ Nav ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,13,.8);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav.is-scrolled{border-bottom-color:var(--border);background:rgba(10,10,13,.92)}
.nav__inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px var(--pad)}
.nav__brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;color:var(--text);text-decoration:none;transition:opacity var(--dur)}
.nav__brand:hover{opacity:.8}
.nav__logo{flex-shrink:0}
.nav__brand-text{white-space:nowrap}
.nav__links{display:flex;gap:2px;margin-left:auto;margin-right:8px}
.nav__links a{color:var(--text-dim);padding:8px 12px;border-radius:8px;font-size:.85rem;font-weight:600;transition:color var(--dur),background var(--dur)}
.nav__links a:hover{color:var(--text);background:var(--surface)}
.nav__links a.is-active{color:var(--accent)}
.nav__tools{display:flex;align-items:center;gap:6px}
.lang{display:flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--border);border-radius:99px;font-size:.8rem}
.lang__select{background:none;border:none;color:var(--text);font:inherit;font-size:.78rem;cursor:pointer;outline:none}
.lang__select option{background:var(--surface);color:var(--text)}
.theme-toggle{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:99px;transition:border-color var(--dur),transform var(--dur)}
.theme-toggle:hover{border-color:var(--accent);transform:rotate(15deg)}
.theme-toggle__icon{font-size:1rem}
.nav__burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid var(--border);border-radius:99px}
.nav__burger span{width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--dur),opacity var(--dur)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav__progress{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--accent);transition:width .1s linear}

@media(max-width:900px){
  .nav__links{position:fixed;top:56px;left:0;right:0;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--border);padding:12px var(--pad);gap:2px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform var(--dur),opacity var(--dur)}
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:12px;border-radius:8px}
  .nav__burger{display:flex}
}

/* ═══ Hero ═══ */
.hero{position:relative;padding:clamp(120px,16vw,160px) 0 clamp(64px,8vw,90px);overflow:hidden;text-align:center}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 50% at 50% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 30%,#000,transparent 75%);opacity:.4}
.hero__orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15}
.hero__orb--1{width:320px;height:320px;background:var(--accent);top:-60px;left:10%;animation:float 18s ease-in-out infinite}
.hero__orb--2{width:260px;height:260px;background:var(--accent-2);bottom:-80px;right:5%;animation:float 22s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-16px)}}

.hero__content{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.hero__pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:var(--accent-soft);border:1px solid var(--accent-soft);font-size:.82rem;color:var(--text-dim);margin-bottom:24px}
.hero__dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero__title{font-size:clamp(2.4rem,7vw+.6rem,5rem);font-weight:900;letter-spacing:-.04em;line-height:.95;margin-bottom:20px}
.hero__title-accent{color:var(--accent)}
.hero__glitch{position:relative}
.hero__glitch::before,.hero__glitch::after{content:attr(data-text);position:absolute;inset:0}
.hero__glitch::before{color:var(--accent);opacity:.3;animation:glitchA 5s infinite}
.hero__glitch::after{color:var(--accent-2);opacity:.2;animation:glitchB 5s infinite}
@keyframes glitchA{0%,96%,100%{transform:translate(0,0);clip-path:inset(0)}97%{transform:translate(2px,-1px);clip-path:inset(10% 0 60% 0)}98%{transform:translate(-1px,1px);clip-path:inset(60% 0 10% 0)}}
@keyframes glitchB{0%,96%,100%{transform:translate(0,0);clip-path:inset(0)}97%{transform:translate(-2px,1px);clip-path:inset(60% 0 10% 0)}98%{transform:translate(1px,-1px);clip-path:inset(10% 0 60% 0)}}
.hero__sub{max-width:560px;margin:0 auto 28px;color:var(--text-dim);font-size:clamp(1rem,.4vw+.9rem,1.15rem)}

/* ═══ Grid & Cards ═══ */
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform var(--dur) var(--ease),border-color var(--dur)}
.card:hover{transform:translateY(-2px);border-color:var(--border-2)}
.card__icon{font-size:1.4rem;margin-bottom:10px}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.card p{color:var(--text-dim);font-size:.92rem}
.card--numbered{position:relative}
.card__num{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:.7rem;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:99px}
.card__link{display:inline-block;margin-top:12px;font-weight:600;font-size:.85rem;font-family:var(--mono)}

/* ═══ VPS Cards ═══ */
.vps-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:760px){.vps-grid{grid-template-columns:1fr}}
.vps-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform var(--dur),border-color var(--dur)}
.vps-card:hover{transform:translateY(-2px);border-color:var(--border-2)}
.vps-card--featured{border-color:rgba(196,18,48,.25)}
.vps-card__badge{position:absolute;top:-12px;left:20px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:99px;text-transform:uppercase}
.vps-card__logo{height:36px;width:auto;opacity:.8;transition:opacity var(--dur)}
.vps-card:hover .vps-card__logo{opacity:1}
.vps-card__tag{color:var(--text-dim);font-size:.85rem}
.vps-card__list{list-style:none;display:grid;gap:8px}
.vps-card__list li{padding:10px 12px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.88rem}
.vps-card__price{display:flex;align-items:baseline;gap:6px;padding:10px 14px;background:var(--accent-soft);border-radius:var(--radius-sm)}
.vps-card__from{color:var(--text-mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.vps-card__amt{font-size:1.5rem;font-weight:800}

/* ═══ Steps ═══ */
.steps{display:flex;flex-direction:column;gap:28px;max-width:760px;margin:0 auto}
.step{display:grid;grid-template-columns:48px 1fr;gap:16px}
@media(max-width:600px){.step{grid-template-columns:1fr;gap:6px}}
.step__num{width:40px;height:40px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-weight:700;font-size:.9rem;border-radius:10px;border:1px solid rgba(196,18,48,.15)}
.step__body h3{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.step__body p{color:var(--text-dim);margin-bottom:8px}
.step__hint{font-size:.85rem;color:var(--text-dim)}

/* ═══ Command blocks ═══ */
.cmd{display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-family:var(--mono);font-size:.86rem;margin:6px 0;overflow-x:auto}
.cmd code{color:var(--text);background:none;padding:0}
.cmd__copy{margin-left:auto;padding:4px 10px;background:var(--accent-soft);color:var(--accent);border-radius:6px;font-size:.72rem;font-weight:600;font-family:var(--sans);transition:background var(--dur),color var(--dur)}
.cmd__copy:hover{background:var(--accent);color:#fff}
.cmd__copy.is-copied{background:var(--accent);color:#fff}
kbd{font-family:var(--mono);font-size:.8em;padding:2px 6px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg-3);color:var(--accent)}
code{font-family:var(--mono);font-size:.88em;padding:1px 5px;border-radius:4px;background:var(--bg-3);color:var(--text)}

/* ═══ Screenshot placeholders ═══ */
.shot-placeholder{display:grid;place-items:center;border:1px dashed var(--border-2);border-radius:var(--radius-sm);background:var(--bg-3);min-height:140px;margin-top:10px;color:var(--text-mute);font-family:var(--mono);font-size:.75rem;transition:border-color var(--dur)}
.shot-placeholder:hover{border-color:var(--accent)}
.shot-placeholder img{border-radius:var(--radius-sm);width:100%}
.shot-placeholder:has(img){border-style:solid;padding:0;min-height:0;background:none}

/* ═══ Models ═══ */
.models{margin-top:12px}
.models__loading{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-family:var(--mono);font-size:.85rem;padding:12px 0}
.spinner{width:16px;height:16px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.models__grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.model{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;transition:transform var(--dur),border-color var(--dur)}
.model:hover{transform:translateY(-1px);border-color:var(--border-2)}
.model__name{font-weight:600;font-size:.88rem;font-family:var(--mono)}
.model__provider{font-size:.72rem;color:var(--text-mute);font-family:var(--mono);margin-top:2px}
.model__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.model__tag{font-family:var(--mono);font-size:.62rem;padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.models__fallback{color:var(--text-dim);font-size:.82rem;font-family:var(--mono);margin-top:10px}

/* ═══ Modes ═══ */
.mode-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;border-top:3px solid var(--accent)}
.mode-card--build{border-top-color:var(--accent-2)}
.mode-card__label{display:inline-block;font-family:var(--mono);font-size:.72rem;padding:4px 10px;background:var(--bg-3);border:1px solid var(--border);border-radius:99px;margin-bottom:10px}
.mode-card h3{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.mode-card p{color:var(--text-dim);font-size:.92rem}

.tip-box{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:16px 20px;margin-top:20px}
.tip-box__icon{font-size:1.2rem;flex-shrink:0}
.tip-box h4{font-size:.95rem;font-weight:700;margin-bottom:2px}
.tip-box p{color:var(--text-dim);font-size:.9rem}

/* ═══ FAQ ═══ */
.faq-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-list details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;transition:border-color var(--dur)}
.faq-list details[open]{border-color:var(--border-2)}
.faq-list summary{font-weight:600;font-size:.95rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--accent);font-size:1.1rem;transition:transform var(--dur)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{color:var(--text-dim);font-size:.9rem;margin-top:10px}

/* ═══ CTA ═══ */
.cta{padding:clamp(48px,7vw,80px) 0;text-align:center}
.cta__title{font-size:clamp(1.4rem,2.4vw+.6rem,2rem);font-weight:800;margin-bottom:20px}
.cta__buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══ Footer ═══ */
.footer{background:var(--bg-2);border-top:1px solid var(--border);padding:28px 0 20px}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer__brand{font-weight:800;font-size:.9rem;color:var(--text-dim)}
.footer__logos{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center}
.footer__logo{display:inline-flex;align-items:center;opacity:.45;filter:grayscale(1) brightness(.85);transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
.footer__logo img{height:30px;width:auto}
.footer__logo:hover{opacity:1;transform:translateY(-2px)}
.footer__logo--kamatera:hover{filter:grayscale(0) brightness(1.1) drop-shadow(0 0 8px rgba(33,150,243,.4))}
.footer__logo--contabo:hover{filter:grayscale(0) brightness(1.1) drop-shadow(0 0 8px rgba(0,153,204,.4))}
.footer__logo--opencode:hover{filter:grayscale(0) brightness(1.1) drop-shadow(0 0 8px rgba(124,247,200,.4))}
.footer__logo--websplaining:hover{filter:grayscale(0) brightness(1.1) drop-shadow(0 0 8px rgba(196,18,48,.4))}
.footer__copy{color:var(--text-mute);font-size:.72rem;font-family:var(--mono)}

/* ═══ To top ═══ */
.to-top{position:fixed;right:16px;bottom:16px;width:40px;height:40px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:99px;color:var(--accent);font-size:1.1rem;font-weight:700;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity var(--dur),transform var(--dur),border-color var(--dur);z-index:90}
.to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{border-color:var(--accent)}

/* ═══ Toast ═══ */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--surface);border:1px solid var(--accent);color:var(--text);padding:8px 16px;border-radius:99px;font-size:.82rem;font-family:var(--mono);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur);z-index:100}
.toast.is-visible{opacity:1;transform:translateX(-50%)}

/* ═══ RTL ═══ */
[dir="rtl"] .nav__links{margin-left:8px;margin-right:auto}
[dir="rtl"] .step{grid-template-columns:1fr 48px}
[dir="rtl"] .step__num{order:2}
@media(max-width:600px){[dir="rtl"] .step{grid-template-columns:1fr}}
[dir="rtl"] .faq-list summary::after{transform:scaleX(-1)}
[dir="rtl"] .faq-list details[open] summary::after{transform:scaleX(-1) rotate(45deg)}

/* ═══ Reduced motion ═══ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media print{.nav,.to-top,.toast,.hero__bg,.cta{display:none!important}body{background:#fff;color:#000}}