
:root {
  --bg: #020617;
  --panel: #0f172a;
  --panel-2: #111827;
  --text: #e5eef8;
  --muted: #98a8bc;
  --border: #263244;
  --primary: #10b981;
  --primary-2: #0ea5e9;
  --purple: #8b5cf6;
  --gold: #f59e0b;
  --danger: #ef4444;
  --radius: 22px;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#020617 0%, #081222 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
.hero{padding:56px 0 28px;background:radial-gradient(circle at top left, rgba(16,185,129,.18), transparent 35%), radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 28%)}
.hero__inner{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(15,23,42,.92) 36%, rgba(2,6,23,.96));border:1px solid rgba(80,100,140,.26);border-radius:32px;padding:40px;box-shadow:var(--shadow)}
.eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(16,185,129,.16);color:#b6f3d5;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(2.25rem,4vw,4.6rem);line-height:1.02;margin:16px 0 0;max-width:900px}
.lede{font-size:1.08rem;line-height:1.6;color:var(--muted);max-width:780px;margin:14px 0 0}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:18px;border:1px solid var(--border);cursor:pointer;transition:.2s ease;background:#162234;color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#04140f;border-color:transparent;font-weight:700}
.btn--secondary{background:rgba(255,255,255,.03)}
.mini-grid,.grid-2,.grid-3,.grid-4,.pricing-grid,.template-grid,.stats-grid,.pipeline-grid,.main-grid{display:grid;gap:18px}
.mini-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.main-grid{grid-template-columns:340px minmax(0,1fr);align-items:start;padding:24px 0 50px}
.card,.mini-card,.price-card,.pipe-item,.stat{background:rgba(15,23,42,.84);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:24px}
.sidebar{position:sticky;top:16px}
.sidebar h2, .card h2{margin:0 0 8px;font-size:1.35rem}
.muted{color:var(--muted)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(80,100,140,.22)}
.toggle-row:last-of-type{border-bottom:0}
.switch{position:relative;display:inline-block;width:54px;height:30px}
.switch input{display:none}
.switch span{position:absolute;inset:0;background:#1f2937;border:1px solid var(--border);border-radius:999px}
.switch span::after{content:'';position:absolute;width:22px;height:22px;left:4px;top:3px;background:#fff;border-radius:50%;transition:.2s ease}
.switch input:checked+span{background:rgba(16,185,129,.5)}
.switch input:checked+span::after{left:26px;background:#042415}
.score-block{margin:18px 0}
.score-block__head{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:8px}
.progress{height:12px;background:#111827;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress div{height:100%;width:80%;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .2s ease}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.stats-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:16px}
.stat span{color:var(--muted);font-size:.92rem}
.stat strong{display:block;font-size:1.65rem;margin-top:6px}
.note{margin-top:16px;padding:14px;border-radius:18px;background:rgba(2,6,23,.8);border:1px dashed rgba(80,100,140,.3);color:var(--muted);font-size:.95rem;line-height:1.55}
.tabs{display:flex;flex-wrap:wrap;gap:8px;background:rgba(15,23,42,.84);border:1px solid var(--border);padding:7px;border-radius:20px}
.tab{padding:11px 14px;border-radius:14px;background:transparent;border:0;color:var(--muted);cursor:pointer}
.tab.active{background:rgba(255,255,255,.06);color:var(--text)}
.tab-panel{display:none;margin-top:18px;gap:18px}
.tab-panel.active{display:block}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chart{height:250px;border-radius:16px;background:rgba(2,6,23,.8);border:1px solid rgba(80,100,140,.22);position:relative;overflow:hidden}
.chart--line::before{content:'';position:absolute;inset:auto 18px 18px 18px;height:4px;background:linear-gradient(90deg, rgba(16,185,129,.8), rgba(14,165,233,.8), rgba(245,158,11,.7));border-radius:999px}
.chart--line::after{content:'';position:absolute;left:10%;right:10%;top:18%;bottom:18%;background:linear-gradient(180deg,rgba(16,185,129,.08),transparent);clip-path:polygon(0 75%,10% 68%,20% 55%,30% 58%,40% 45%,50% 35%,60% 40%,70% 30%,80% 42%,90% 25%,100% 18%,100% 100%,0 100%)}
.pie-list{display:grid;gap:10px;margin-top:10px}
.pie-list div{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:14px;background:rgba(2,6,23,.72)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.dot--green{background:var(--primary)}.dot--blue{background:var(--primary-2)}.dot--purple{background:var(--purple)}.dot--gold{background:var(--gold)}
.donut{margin:20px auto 8px;width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--primary) 0 48%,var(--primary-2) 48% 70%,var(--purple) 70% 85%,var(--gold) 85% 100%);display:grid;place-items:center}
.donut::after{content:'';width:100px;height:100px;border-radius:50%;background:#081120;border:1px solid var(--border)}
.donut__center{position:absolute;font-weight:700;color:#dce6f3}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px}
.price-card{padding:22px;position:relative}
.price-card .price{font-size:2rem;font-weight:800;margin:12px 0}
.price-card ul{padding-left:18px;color:var(--muted);line-height:1.7}
.price-card.featured{outline:2px solid rgba(16,185,129,.35);background:linear-gradient(180deg,rgba(16,185,129,.1),rgba(15,23,42,.92))}
.badge{position:absolute;top:16px;right:16px;padding:6px 10px;border-radius:999px;background:var(--primary);color:#03130d;font-weight:700;font-size:.82rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
label{display:grid;gap:8px;color:var(--muted);font-size:.95rem}
input,select,textarea{background:#07101d;border:1px solid var(--border);color:var(--text);padding:13px 14px;border-radius:16px;outline:none}
textarea{min-height:132px;resize:vertical}
.tone-group{display:flex;gap:10px;margin:16px 0}
.chip{border:1px solid var(--border);background:#101b2b;color:var(--text);padding:10px 14px;border-radius:999px;cursor:pointer}
.chip.active{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.34)}
.chat-window{height:320px;background:#050d18;border:1px solid var(--border);border-radius:18px;padding:16px;overflow:auto;display:grid;gap:12px}
.chat-bubble{max-width:82%;padding:12px 14px;border-radius:16px;background:#152235;line-height:1.5}
.chat-bubble--user{margin-left:auto;background:var(--primary);color:#03140d;font-weight:600}
.chat-entry{display:flex;gap:10px;margin-top:14px}
.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.template-grid .mini-card,.grid-3 .mini-card,.grid-4 .mini-card,.stack-list .mini-card,.mini-grid .mini-card{padding:16px}
.mini-card strong{display:block;font-size:1rem;color:var(--text)}
.mini-card span{display:block;color:var(--muted);margin-top:6px;line-height:1.5}
.stack-form{display:grid;gap:12px;margin-top:10px}
.pipeline-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.pipe-col{padding:14px;border-radius:20px;background:rgba(2,6,23,.58);border:1px solid rgba(80,100,140,.22)}
.pipe-col h3{margin:0 0 10px}
.pipe-item{padding:14px}
.pipe-item strong{display:block}
.pipe-item span{display:block;color:var(--muted);margin-top:6px}
.stack-list{display:grid;gap:12px}
.bar-chart{height:220px;border-radius:16px;background:rgba(2,6,23,.8);border:1px solid rgba(80,100,140,.22);display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:18px}
.bar{width:48px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-2));position:relative}
.bar::after{content:attr(data-label);position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font-size:.85rem;color:var(--muted)}
.footer{padding:14px 20px 46px;color:var(--muted)}
@media (max-width: 1080px){.main-grid{grid-template-columns:1fr}.sidebar{position:static}.mini-grid,.pricing-grid,.grid-3,.grid-4,.template-grid,.pipeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){h1{font-size:2.5rem}.hero__inner{padding:28px}.grid-2,.grid-3,.grid-4,.mini-grid,.pricing-grid,.template-grid,.stats-grid,.stats-grid.three,.pipeline-grid,.form-grid,.compact{grid-template-columns:1fr}.chat-entry{flex-direction:column}.tabs{position:sticky;top:0;z-index:2;background:rgba(2,6,23,.92);backdrop-filter:blur(10px)}}
