@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a0a0f;--paper:#12121a;--card:#1a1a28;--line:#2a2a3e;
  --coral:#ff6b4a;--cyan:#22d3ee;--muted:#8b8ba3;--white:#f4f4f8;
  --font:'Outfit',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--ink);color:var(--white);line-height:1.65;min-height:100vh}
a{color:var(--coral);text-decoration:none;transition:color .2s}
a:hover{color:var(--cyan)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.strip{background:linear-gradient(90deg,var(--coral),#9333ea);padding:10px 0;text-align:center;font-size:.85rem;font-weight:600}
.strip a{color:#fff;margin-left:8px;text-decoration:underline}

.masthead{padding:48px 0 32px;position:relative;overflow:hidden}
.masthead::before{content:'';position:absolute;top:-40%;right:-10%;width:55%;height:140%;background:radial-gradient(ellipse,var(--coral) 0%,transparent 65%);opacity:.12;pointer-events:none}
.masthead-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.masthead h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.masthead h1 em{font-style:normal;color:var(--coral)}
.masthead .lead{color:var(--muted);font-size:1.1rem;margin:20px 0 28px;max-width:520px}
.masthead-visual{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(255,107,74,.15)}
.masthead-visual img{width:100%;aspect-ratio:16/9;object-fit:cover}
#canvas-live{position:absolute;inset:0;width:100%;height:100%;opacity:.35;pointer-events:none;z-index:0}
.masthead .wrap{position:relative;z-index:1}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-coral{display:inline-flex;align-items:center;padding:14px 28px;background:var(--coral);color:#fff!important;font-weight:700;border-radius:999px;border:none;cursor:pointer}
.btn-coral:hover{background:#ff8566;color:#fff!important}
.btn-ghost{display:inline-flex;padding:14px 28px;border:2px solid var(--line);color:var(--white)!important;border-radius:999px;font-weight:600}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)!important}

.pill-nav{position:sticky;top:0;z-index:100;background:rgba(10,10,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 0}
.pill-nav ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;align-items:center;justify-content:center}
.pill-nav a{display:block;padding:10px 20px;border-radius:999px;color:var(--muted);font-weight:600;font-size:.92rem}
.pill-nav a:hover,.pill-nav a.active{background:var(--card);color:var(--coral)}
.pill-nav .logo-pill{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;background:var(--card);border-radius:999px;margin-right:12px}
.pill-nav .logo-pill img{width:32px;height:32px;border-radius:50%}
.pill-nav .logo-pill span{color:var(--white);font-weight:700}

.bento{padding:64px 0}
.bento-head{margin-bottom:36px}
.bento-head h2{font-size:2rem;font-weight:800}
.bento-head p{color:var(--muted);margin-top:8px}
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.bento-cell{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;transition:transform .25s,border-color .25s}
.bento-cell:hover{transform:translateY(-4px);border-color:var(--coral)}
.bento-cell.span-8{grid-column:span 8}
.bento-cell.span-4{grid-column:span 4}
.bento-cell.span-6{grid-column:span 6}
.bento-cell.span-12{grid-column:span 12}
.bento-cell h3{font-size:1.15rem;margin-bottom:10px;color:var(--cyan)}
.bento-cell p{color:var(--muted);font-size:.95rem}
.bento-cell .tag{display:inline-block;margin-top:14px;padding:4px 12px;background:rgba(255,107,74,.15);color:var(--coral);border-radius:6px;font-size:.75rem;font-weight:700}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{text-align:center}
.stat strong{display:block;font-size:2rem;color:var(--coral);font-weight:800}
.stat span{color:var(--muted);font-size:.85rem}

.masonry-news{padding:64px 0}
.masonry-news h2{font-size:2rem;margin-bottom:28px;font-weight:800}
.news-masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:var(--card);border-radius:18px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.news-card.featured{grid-column:span 2;flex-direction:row}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.news-card.featured img{width:45%;aspect-ratio:auto;min-height:220px}
.news-card-body{padding:22px;flex:1}
.news-card time{color:var(--cyan);font-size:.8rem;font-weight:600}
.news-card h3{margin:10px 0;font-size:1.05rem;line-height:1.4}
.news-card h3 a{color:var(--white)}
.news-card h3 a:hover{color:var(--coral)}
.news-card p{color:var(--muted);font-size:.9rem}

.cta-band{margin:48px 0;padding:56px;border-radius:24px;background:linear-gradient(135deg,#1a1035,#2d1b69 50%,#1a1035);text-align:center;border:1px solid #4338ca}
.cta-band h2{font-size:1.8rem;margin-bottom:12px}
.cta-band p{color:#c4b5fd;margin-bottom:24px}

.page-hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:2.4rem;font-weight:800}
.page-hero p{color:var(--muted);margin-top:12px;max-width:640px}

.content-block{padding:48px 0}
.content-block h2{font-size:1.5rem;margin:32px 0 16px;color:var(--cyan)}
.content-block p,.content-block li{color:var(--muted);margin-bottom:12px}
.content-block ul{padding-left:22px}
.content-block ol{padding-left:22px}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.dl-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;text-align:center}
.dl-card h3{margin:16px 0 8px}
.dl-card .ver{color:var(--cyan);font-size:.85rem;margin-bottom:20px}

.article{padding:48px 0;max-width:760px;margin:0 auto}
.article h1{font-size:2rem;margin-bottom:8px}
.article .meta{color:var(--muted);margin-bottom:28px;font-size:.9rem}
.article h2{font-size:1.3rem;margin:28px 0 12px;color:var(--coral)}
.article p{color:var(--muted);margin-bottom:16px;line-height:1.8}
.article img{border-radius:12px;margin:24px 0;border:1px solid var(--line)}

.site-foot{padding:40px 0;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.85rem}
.site-foot nav{margin-bottom:12px}
.site-foot nav a{margin:0 12px;color:var(--muted)}
.site-foot nav a:hover{color:var(--coral)}
.footer-friends{margin-bottom:12px}
.footer-friends a{color:var(--muted);margin:0 8px}
.footer-friends a:hover{color:var(--coral)}

@media(max-width:900px){
  .masthead-inner{grid-template-columns:1fr}
  .bento-cell.span-8,.bento-cell.span-4,.bento-cell.span-6,.bento-cell.span-12{grid-column:span 12}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .news-masonry,.news-card.featured{grid-template-columns:1fr;flex-direction:column}
  .news-card.featured img{width:100%}
  .dl-grid{grid-template-columns:1fr}
}