:root{--ink:#17161a;--ink-2:#2b2a30;--paper:#f7f6ff;--paper-2:#edeaff;--primary:#6e44ff;--primary-2:#4f2fe0;--accent:#ff7a59;--accent-2:#ff5c35;--ok:#22a06b;--warn:#f3b83a;--muted:#6b6a73;}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--primary);text-decoration:none;transition:.2s}
a:hover{color:var(--primary-2);opacity:.9}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}
.grid{display:grid;gap:1.25rem}
.btn{display:inline-block;padding:.85rem 1.2rem;border-radius:.75rem;font-weight:700;border:1px solid transparent}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:#fff}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--primary)}
.badge{display:inline-block;padding:.3rem .6rem;border-radius:.5rem;font-weight:700;font-size:.8rem}
.badge-ok{background:rgba(34,160,107,.12);color:var(--ok)}
.badge-warn{background:rgba(243,184,58,.16);color:#8a6115}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-weight:900;letter-spacing:.2px;color:var(--ink);font-size:1.1rem}
.nav ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.nav a{padding:.5rem .75rem;border-radius:.6rem;color:var(--ink)}
.nav a:hover{background:var(--paper-2)}
.hero{position:relative;isolation:isolate;padding:4.5rem 0;background:radial-gradient(1200px 600px at 10% 10%,rgba(110,68,255,.18),transparent),radial-gradient(900px 500px at 90% 0,rgba(255,122,89,.18),transparent),linear-gradient(180deg,#ffffff, #f5f3ff)}
.hero .lead{color:var(--ink-2);font-size:1.1rem;max-width:62ch}
.kicker{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.display{font-size:clamp(2rem,6vw,3.5rem);line-height:1.15;margin:.25rem 0 1rem;font-weight:900}
.hero-card{background:#111018;color:#fff;border-radius:1.1rem;padding:1.25rem;box-shadow:0 10px 35px rgba(0,0,0,.25)}
.hero-card .row{display:flex;gap:1rem;align-items:center}
.stack{display:grid;grid-template-columns:1fr;gap:2rem}
.section{padding:3.25rem 0}
.section.dark{background:#111018;color:#fff}
.section.paper{background:#fff}
.section.accent{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff}
.section h2{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.2;margin:0 0 .5rem}
.section p{margin:.25rem 0 1rem}
.card{background:#fff;border-radius:1rem;padding:1.25rem;border:1px solid #e6e3ff;box-shadow:0 4px 24px rgba(0,0,0,.04)}
.card.dark{background:#191824;color:#fff;border-color:#2b2740}
.icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:.8rem;background:rgba(110,68,255,.15);color:var(--primary)}
.icon.ok{background:rgba(34,160,107,.15);color:var(--ok)}
.icon.warn{background:rgba(243,184,58,.18);color:#b8841e}
.list{display:grid;gap:1rem}
.list li{display:flex;gap:.75rem;align-items:flex-start}
.figure{border-radius:1rem;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.split{display:grid;gap:2rem;grid-template-columns:1fr}
.form{display:grid;gap:1rem}
.input{width:100%;padding:.9rem 1rem;border-radius:.8rem;border:1px solid #d8d6f8;background:#fff;color:var(--ink)}
.input:focus{outline:3px solid rgba(110,68,255,.22);border-color:var(--primary)}
.checkbox{display:flex;gap:.6rem;align-items:flex-start}
.footer{background:#0f0e14;color:#fff;padding:2.5rem 0}
.footer a{color:#c8c6ff}
.footer small{color:#b3b1c7}
.figure.bg-grad{background:linear-gradient(135deg,rgba(110,68,255,.3),rgba(255,122,89,.35));padding:2px}
.figure.bg-grad img{display:block;border-radius:.9rem}
.note{font-size:.95rem;color:var(--muted)}
@media (min-width:768px){
    .split{grid-template-columns:1.2fr 1fr}
    .stack{grid-template-columns:repeat(12,1fr);gap:1.25rem}
    .span-7{grid-column:span 7}
    .span-5{grid-column:span 5}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-2{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width: 767px) {
    .nav nav{
        display: none;
    }
}