/* same theme as index.css */
:root{
  --bg-dark:#0a0e27;--bg-medium:#141b30;--bg-card:#1a2244;
  --primary:#3b82f6;--primary-light:#60a5fa;--primary-dark:#2563eb;--accent:#8b5cf6;
  --text-white:#fff;--text-light:#cbd5e1;--text-muted:#94a3b8;
  --border:rgba(59,130,246,.2);
  --gradient:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Roboto',sans-serif;background:var(--bg-dark);color:var(--text-white);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.08) 0%,transparent 50%);pointer-events:none;z-index:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:1}
h1,h2,h3{font-weight:900;line-height:1.15;letter-spacing:-.02em}
.gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.eyebrow{color:var(--primary-light);font-weight:700;font-size:.75rem;letter-spacing:.28em;text-transform:uppercase}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:50px;font-family:'Roboto',sans-serif;font-weight:700;font-size:.94rem;transition:all .25s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--gradient);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(59,130,246,.4)}
.btn-ghost{background:transparent;color:var(--text-white);border-color:rgba(59,130,246,.4)}
.btn-ghost:hover{border-color:var(--primary);background:rgba(59,130,246,.1)}

/* NAV */
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);background:rgba(10,14,39,.85);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 26px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:56px;width:auto;display:block}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--text-light);font-size:.95rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--primary-light)}
.nav-links a.active{color:#fff;position:relative}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--gradient)}
.nav-cta{display:flex;gap:14px;align-items:center}
.signin{display:inline-flex;align-items:center;padding:14px 26px;border-radius:50px;border:1px solid rgba(59,130,246,.5);color:#fff;font-size:.94rem;font-weight:700;transition:all .25s}
.signin:hover{border-color:var(--primary);background:rgba(59,130,246,.12)}
.nav-links .nav-login{display:none}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}

/* HERO */
.page-hero{position:relative;overflow:hidden;text-align:center;padding:96px 0 60px;border-bottom:1px solid var(--border)}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%,rgba(59,130,246,.15),transparent 60%),radial-gradient(50% 50% at 85% 20%,rgba(139,92,246,.10),transparent 70%)}
.page-hero h1{font-size:3.4rem;margin:18px 0}
.page-hero p{color:var(--text-light);max-width:620px;margin:0 auto;font-size:1.1rem;font-weight:300}

/* COMMUNITY HERO (text + illustration) */
.c-hero-sec{text-align:left;padding:72px 0 64px}
.c-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;position:relative;z-index:1}
.c-hero h1{text-wrap:balance}
.page-hero .c-hero p{margin:0;max-width:520px}
.c-hero .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.c-hero-illus{margin:0;min-width:0}
.c-illus svg{display:block;width:100%;height:auto}
.c-illus text,.post-media.illus text{font-family:'Roboto',sans-serif}
.float-a{animation:float 6s ease-in-out infinite}
.float-b{animation:float 7s ease-in-out -2s infinite}
.float-c{animation:float 8s ease-in-out -4s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.float-a,.float-b,.float-c,.pulse{animation:none}}

/* WHAT'S HERE */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:.3s}
.feature:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.feature-icon{width:46px;height:46px;border-radius:12px;background:var(--gradient);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:16px}
.feature h3{font-size:1.05rem;margin-bottom:6px}
.feature p{color:var(--text-muted);font-size:.88rem;line-height:1.55}

/* SECTIONS */
.section{padding:72px 0 0}
.section-head{margin-bottom:32px}
.section-head h2{font-size:2.2rem;margin-top:10px}

/* UPDATES */
.update-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.update{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s}
.update:hover{border-color:var(--primary);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.update video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-medium)}
.update-media{position:relative;border-bottom:1px solid var(--border)}
.video-cover{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.video-cover>svg{display:block;width:100%;height:100%}
.video-cover text{font-family:'Roboto',sans-serif}
.video-cover:focus-visible{outline:2px solid var(--primary-light);outline-offset:-2px}
.video-play{position:absolute;left:6%;bottom:9%;display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:40px;background:var(--gradient);color:#fff;font-family:'Roboto',sans-serif;font-size:.9rem;font-weight:700;box-shadow:0 10px 24px rgba(59,130,246,.35);transition:transform .2s}
.video-play i{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.video-play i svg{margin-left:2px}
.video-cover:hover .video-play{transform:scale(1.05)}
.update-media.playing .video-cover{display:none}
.update-body{padding:24px}
.update-body h3{font-size:1.25rem;margin-bottom:10px;line-height:1.3}
.update-body p{color:var(--text-muted);font-size:.9rem}

/* POSTS */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 0 96px}
.post{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s}
.post:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.post-media{height:160px;background:var(--gradient);display:flex;align-items:flex-end;padding:20px}
.post-media.alt{background:linear-gradient(135deg,#8b5cf6 0%,#ef4444 100%)}
.post-media.alt2{background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%)}
.post-media.alt3{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)}
.post-media.illus{height:auto;padding:0;display:block;position:relative;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(59,130,246,.02))}
.post-media.illus.alt{background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(239,68,68,.03))}
.post-media.illus.alt2{background:linear-gradient(180deg,rgba(16,185,129,.16),rgba(59,130,246,.02))}
.post-media.illus svg{display:block;width:100%;height:auto;padding:14px 10px 6px}
.post-media.illus .post-cat{position:absolute;top:14px;left:14px;background:rgba(59,130,246,.18);border:1px solid var(--border);color:var(--primary-light)}
.post-cat{background:rgba(255,255,255,.2);backdrop-filter:blur(10px);color:#fff;padding:6px 14px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{color:var(--text-muted);font-size:.78rem;margin-bottom:10px;font-weight:500}
.post-body h3{font-size:1.15rem;margin-bottom:10px;line-height:1.3}
.post-body p{color:var(--text-muted);font-size:.9rem;margin-bottom:16px;flex:1}
.readmore{color:var(--primary-light);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.post:hover .readmore{gap:10px}

/* ARTICLE (blog/<post>.html) */
.article-hero{padding:72px 0 56px}
.article-hero h1{font-size:2.6rem;max-width:900px;margin:18px auto 16px}
.article-hero .post-cat{display:inline-block;position:relative;background:rgba(59,130,246,.15);border:1px solid var(--border);color:var(--primary-light)}
.back-link{display:table;margin:0 auto 26px;position:relative;color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .2s}
.back-link:hover{color:var(--primary-light)}
.article-meta{position:relative;color:var(--text-muted);font-size:.92rem}
.article{max-width:812px;padding-top:56px;padding-bottom:24px}
.article-cover{max-width:420px;margin:0 auto 44px}
.article-cover img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.article-cover.illus{max-width:none;padding:28px 24px 18px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(59,130,246,.02));box-shadow:0 20px 40px rgba(0,0,0,.25)}
.article-cover.illus.alt{background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(239,68,68,.03))}
.article-cover.illus svg{max-width:600px;margin:0 auto}
.article h2{font-size:1.7rem;margin:44px 0 16px}
.article h2:first-of-type{margin-top:0}
.article p,.article ul,.article ol{color:var(--text-light);font-size:1.05rem;margin-bottom:20px}
.article .lead{font-size:1.2rem;font-weight:300;color:var(--text-white);margin-bottom:36px}
.article ul,.article ol{padding-left:24px}
.article li{margin-bottom:12px;padding-left:4px}
.article li::marker{color:var(--primary-light);font-weight:700}
.article strong{color:var(--text-white);font-weight:700}
.article ol li strong{display:block;margin-bottom:4px}
.article-foot{margin-top:44px;padding-top:28px;border-top:1px solid var(--border)}
.article a{color:var(--primary-light);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:#fff}

/* LEGAL PAGES (terms, privacy, refunds, account deletion) */
.article.legal{padding-bottom:96px}
.article.legal h2{font-size:1.3rem;margin:36px 0 12px}
.article.legal h2:first-child{margin-top:0}
.article.legal h3{font-size:1.05rem;margin:24px 0 10px;color:var(--primary-light)}

/* CTA */
.cta{padding:0 0 96px}
.cta-box{background:var(--gradient);border-radius:24px;padding:70px 50px;text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%)}
.cta-box .eyebrow{color:rgba(255,255,255,.9);position:relative}
.cta-box h2{font-size:2.6rem;margin:12px 0;position:relative;color:#fff}
.cta-box .sub{color:rgba(255,255,255,.95);font-size:1.06rem;font-weight:300;position:relative}
.cta-box .btns{display:flex;gap:16px;justify-content:center;margin-top:30px;flex-wrap:wrap;position:relative}
.cta-box .btn-primary{background:#fff;color:var(--primary-dark)}
.cta-box .btn-primary:hover{background:rgba(255,255,255,.9)}
.cta-box .btn-ghost{border-color:rgba(255,255,255,.6)}
.cta-box .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.cta-box.split{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;text-align:left}
.cta-box.split .btns{justify-content:flex-start}
.cta-art{margin:0;position:relative}
.cta-art svg{max-width:360px;margin-left:auto}

/* FOOTER */
footer{padding:60px 0 30px;border-top:1px solid var(--border);background:var(--bg-medium);position:relative}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand p{color:var(--text-muted);font-size:.9rem;margin:18px 0;max-width:380px}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-light);transition:.2s}
.socials a:hover{background:var(--gradient);border-color:transparent;color:#fff}
.foot-col h5{font-size:.85rem;font-weight:700;color:var(--primary-light);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.foot-col a{display:block;color:var(--text-muted);font-size:.9rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--primary-light)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.85rem}

/* RESPONSIVE */
/* the full menu plus both header buttons need ~1120px: tighten it first, then switch to the ☰ menu */
@media(max-width:1240px){.nav-links{gap:22px}.signin{padding:14px 20px}.nav-cta .btn{padding:14px 22px}}
@media(max-width:1100px){.nav-links{display:none}.menu-btn{display:block}.nav-cta{margin-left:auto}}
@media(max-width:968px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .page-hero h1{font-size:2.6rem}
  .post-grid,.update-grid{grid-template-columns:1fr}
  .c-hero{grid-template-columns:1fr;gap:40px}
  .c-hero-text{text-align:center}
  .page-hero .c-hero p{margin:0 auto}
  .c-hero .btns{justify-content:center}
  .c-hero-illus{width:100%;max-width:560px;margin:0 auto}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .cta-box.split{grid-template-columns:1fr;text-align:center;gap:30px}
  .cta-box.split .btns{justify-content:center}
  .cta-art svg{max-width:300px;margin:0 auto}
  .article-hero h1{font-size:2.1rem}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  .nav{padding:14px 16px}
  .logo img{height:34px}
  .signin{display:none}
  .nav-links .nav-login{display:flex;align-self:stretch;justify-content:center;margin-top:8px;padding:14px 26px;border-radius:50px;border:1px solid rgba(59,130,246,.6);background:rgba(59,130,246,.12);color:#fff;font-size:1rem;font-weight:700}
  .nav-cta .btn{padding:10px 16px;font-size:.85rem}
  .page-hero{padding:60px 0 40px}
  .page-hero h1{font-size:2rem}
  .page-hero p{font-size:.98rem}
  .c-hero-sec{padding:48px 0 44px}
  .c-hero .btns{margin-top:26px;gap:10px}
  .c-hero .btn{padding:12px 20px;font-size:.88rem}
  .feature-grid{grid-template-columns:1fr;gap:14px}
  .feature{display:flex;gap:16px;align-items:flex-start;padding:18px}
  .feature-icon{margin-bottom:0}
  .section{padding-top:48px}
  .section-head{margin-bottom:24px}
  .section-head h2{font-size:1.7rem}
  .update-grid{gap:20px}
  .update-body{padding:22px 18px}
  .video-play{font-size:.78rem;gap:8px;padding:6px 14px 6px 6px}
  .video-play i{width:24px;height:24px}
  .post-grid{padding:0 0 60px;gap:20px}
  .article-hero{padding:48px 0 40px}
  .article-hero h1{font-size:1.6rem}
  .article{padding-top:36px}
  .article-cover{margin-bottom:32px}
  .article-cover.illus{padding:18px 12px 10px;border-radius:16px}
  .article h2{font-size:1.35rem;margin-top:34px}
  .article p,.article ul,.article ol{font-size:.98rem}
  .article .lead{font-size:1.06rem}
  .article.legal{padding-bottom:60px}
  .article.legal h2{font-size:1.15rem;margin-top:30px}
  .post-body{padding:22px 18px}
  .cta{padding-bottom:60px}
  .cta-box{padding:40px 24px}
  .cta-box h2{font-size:1.8rem}
}
@media(max-width:359px){
  .nav-cta{display:none}
}