:root{color-scheme:dark;--text:#e5f3ff;--muted:#9fb3c8;--cyan:#22d3ee;--blue:#60a5fa;--panel:rgba(15,23,42,.82);--line:rgba(125,211,252,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text);background:radial-gradient(circle at 15% 10%,rgba(34,211,238,.25),transparent 28%),radial-gradient(circle at 88% 5%,rgba(139,92,246,.25),transparent 30%),linear-gradient(135deg,#020617,#0f172a 55%,#020617)}a{color:#a5f3fc}.hero,.account{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:72px 0}.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(2,6,23,.9),var(--panel));border-radius:32px;padding:42px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.hero-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}.narrow{max-width:620px;margin:0 auto}.badge{display:inline-flex;border:1px solid rgba(34,211,238,.35);color:#a5f3fc;background:rgba(34,211,238,.1);padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px}h1{font-size:clamp(36px,5.6vw,66px);line-height:1.05;margin:22px 0 0}h2{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:14px 0}.lead{font-size:19px;line-height:1.8;color:var(--muted);max-width:850px}.lead.small{font-size:16px}.actions,.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}a.primary,a.secondary,a.ghost,button{border:0;border-radius:999px;padding:13px 20px;font-weight:800;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary,button{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#03101a}.secondary,.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12)}.browser-card{position:relative;border:1px solid rgba(125,211,252,.28);border-radius:28px;background:#020617;padding:24px;min-height:480px;box-shadow:0 24px 60px rgba(0,0,0,.38)}.dots{display:flex;gap:8px}.dots span{width:11px;height:11px;border-radius:50%;display:block}.dots span:nth-child(1){background:#fb7185}.dots span:nth-child(2){background:#fbbf24}.dots span:nth-child(3){background:#34d399}.mini-title{color:#67e8f9;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.comment-box,.translated-box{border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px;line-height:1.65;color:#dbeafe;background:rgba(15,23,42,.9)}.comment-box{margin-top:26px}.translated-box{margin-top:92px;background:rgba(8,51,68,.92);border-color:rgba(34,211,238,.38)}.bubble{position:absolute;right:38px;top:210px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.76);border:1px solid rgba(34,211,238,.55);box-shadow:0 0 36px rgba(34,211,238,.25);font-size:26px;font-weight:900}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.cards article,.steps article{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.7);border-radius:24px;padding:24px}.cards h2,.steps h3{margin:0 0 8px}.cards p,.steps p{color:var(--muted);line-height:1.7}.story-panel,.guide-panel{margin-top:24px}.section-heading{max-width:850px}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}.problem{border-radius:24px;padding:24px;border:1px solid rgba(255,255,255,.1);display:grid;gap:10px}.problem strong{font-size:20px}.problem span{color:var(--muted);line-height:1.7}.before{background:rgba(239,68,68,.09)}.after{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.26)}.workflow-image{width:100%;border-radius:28px;border:1px solid rgba(125,211,252,.24);margin:26px 0 22px;box-shadow:0 24px 70px rgba(0,0,0,.35);background:#020617}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps span{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:rgba(34,211,238,.15);color:#a5f3fc;font-weight:900;margin-bottom:14px}.steps code{background:#020617;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:2px 6px;color:#e0f2fe}.form{display:grid;gap:16px;margin-top:24px}.form label{display:grid;gap:8px;color:#cde7ff;font-weight:700}.form input{width:100%;border:1px solid rgba(255,255,255,.12);background:#020617;color:white;border-radius:14px;padding:14px;font-size:15px;outline:none}.form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}.hidden{display:none}.message,.status{margin-top:18px;color:#a5f3fc;line-height:1.6}.message.error{color:#fecaca}@media(max-width:900px){.hero-panel,.problem-grid,.steps{grid-template-columns:1fr}.browser-card{min-height:auto}.translated-box{margin-top:70px}}@media(max-width:760px){.cards{grid-template-columns:1fr}.panel{padding:26px}.hero,.account{padding:32px 0}h1{font-size:36px}.lead{font-size:17px}}
.product-case-panel,.architecture-panel{margin-top:24px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}.feature-grid article{border:1px solid rgba(125,211,252,.18);background:rgba(15,23,42,.72);border-radius:24px;padding:24px}.feature-grid h3{margin:0 0 8px;color:#fff}.feature-grid p{margin:0;color:var(--muted);line-height:1.7}.architecture-list{display:grid;gap:16px;margin-top:26px}.architecture-list div{display:grid;grid-template-columns:220px 1fr;gap:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:20px;padding:20px}.architecture-list strong{color:#a5f3fc}.architecture-list span{color:var(--muted);line-height:1.7}@media(max-width:900px){.feature-grid{grid-template-columns:1fr}.architecture-list div{grid-template-columns:1fr}}
