*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,sans-serif;background:#07101a;color:#ecf4ff;overflow-x:hidden}
#particles{position:fixed;inset:0;z-index:0;background:radial-gradient(70% 60% at 20% 10%,#10263f 0%,#07101a 45%,#050a12 100%)}
.wrap{width:min(1120px,92%);margin:0 auto;position:relative;z-index:2}
.topbar{position:sticky;top:0;background:rgba(6,11,18,.55);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.1);z-index:10}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo{font-weight:900;letter-spacing:.08em;font-size:.82rem;color:#9cc6ff}
.hero{min-height:66vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:22px;padding:20px 0 6px}
.hero-box{background:linear-gradient(165deg,rgba(24,40,64,.72),rgba(16,26,42,.62));border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:22px 22px 18px;box-shadow:0 20px 40px rgba(0,0,0,.28)}
.kicker{font-size:.78rem;color:#75b2ff;letter-spacing:.18em}
h1{font-size:clamp(2rem,6vw,4.8rem);line-height:.95;margin:8px 0 14px;text-shadow:0 6px 24px rgba(73,145,255,.2)}
.sub{color:#c2d1e5;max-width:560px}
.cta{display:inline-block;margin-top:14px;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,#7dd0ff,#72ffa2);color:#07101a;text-decoration:none;font-weight:800}
.card{background:linear-gradient(165deg,rgba(24,40,64,.75),rgba(16,26,42,.66));border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:14px;position:relative;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.card img{width:100%;height:100%;min-height:440px;object-fit:cover;border-radius:12px}
.panel{margin:0 auto 28px;padding:38px 28px;background:rgba(10,18,30,.72);border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden}
.panel h2{font-size:clamp(1.5rem,3.5vw,2.5rem);margin:0 0 10px}
.panel p{color:#c3d4ea}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:34px}
.tile{background:rgba(14,24,38,.8);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:20px;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tile h3{margin:0;color:#7de5ff}.tile h4{margin:2px 0 8px}.tile p{margin:0;color:#bfd0e6}
.small-note{opacity:.88;margin-top:-2px}
.channels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.chip{background:rgba(22,34,52,.75);border:1px solid rgba(133,190,255,.22);border-radius:12px;padding:11px 12px;color:#d9e7fb;font-weight:600;text-align:center}
.examples{padding-bottom:30px}
.examples h2{font-size:clamp(1.35rem,3vw,2.2rem);margin:0 0 10px}
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.ex-card{margin:0;background:rgba(16,27,43,.78);border:1px solid rgba(255,255,255,.13);border-radius:14px;overflow:hidden}
.ex-card img{width:100%;height:220px;object-fit:cover;display:block}
.ex-card figcaption{padding:10px 11px;color:#bcd0e8;font-size:.9rem}
.foot{padding:20px 0 34px;color:#8ea4c3}
@media(max-width:900px){.hero,.grid,.examples-grid,.channels-grid{grid-template-columns:1fr}.hero-box{padding:18px}.card img{min-height:320px}}