/* ========================================
   Smart-AI — Dark Blog Theme
   Primary: #3461EB  Accent: #2EBD8E
   Surface: #1e1e2e  Card: #2a2a3d
   ======================================== */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#e2e8f0;line-height:1.6;background:#1e1e2e}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* --- Container --- */
.sa-container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ===========================
   HEADER — floating rounded bar
   =========================== */
.header-wrap{position:sticky;top:0;z-index:100;background:#1e1e2e;padding:12px 24px}
.main-header{background:#2a2a3d;border-radius:16px;padding:0 28px;max-width:1140px;margin:0 auto;border:1px solid rgba(255,255,255,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.main-header .logo img{height:30px;width:auto}
.header-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2.25rem}
.header-inner{position:relative}
.header-nav a{color:#94a3b8;font-size:.85rem;font-weight:500;transition:color .2s}
.header-nav a:hover,.header-nav a.active{color:#fff}
.header-actions{display:flex;align-items:center;gap:.75rem}
.nav-cta{background:#3461EB;color:#fff;padding:.45rem 1.1rem;border-radius:8px;font-weight:600;font-size:.8rem;transition:all .2s;white-space:nowrap}
.nav-cta:hover{background:#2a51d4;box-shadow:0 4px 12px rgba(52,97,235,0.3)}

/* ===========================
   HERO — Centered Text
   =========================== */
.hero-section{background:#1e1e2e;padding:80px 0 50px;text-align:center}
.hero-section .sa-container{max-width:780px}
.hero-section h1{font-size:2.85rem;font-weight:800;line-height:1.2;color:#fff;margin-bottom:1.25rem;letter-spacing:-.02em}
.hero-section h1 span{color:#3461EB}
.hero-section .hero-sub{font-size:1rem;color:#8892a8;max-width:620px;margin:0 auto 2.5rem;line-height:1.75}

/* ===========================
   CATEGORY PILLS
   =========================== */
.cat-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;padding:0 0 3rem}
.cat-pill{display:inline-flex;align-items:center;gap:6px;background:#2a2a3d;border:1px solid rgba(255,255,255,0.06);color:#c8cdd8;font-size:.78rem;font-weight:500;padding:.45rem 1rem;border-radius:100px;transition:all .2s;cursor:default}
.cat-pill:hover{border-color:rgba(52,97,235,0.35);color:#fff}
.cat-pill .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-blue{background:#3461EB}
.dot-green{background:#2EBD8E}
.dot-purple{background:#8b5cf6}
.dot-orange{background:#f97316}
.dot-red{background:#ef4444}
.dot-teal{background:#14b8a6}
.dot-pink{background:#ec4899}
.dot-yellow{background:#eab308}

/* ===========================
   POSTS LAYOUT — 2 cols + sidebar
   =========================== */
.posts-layout{display:grid;grid-template-columns:1fr 1fr 300px;gap:1.5rem;padding-bottom:4rem}

/* --- Post Card --- */
.post-card{background:#2a2a3d;border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.25)}
.post-card__img{position:relative;height:240px;overflow:hidden}
.post-card__img-bg{width:100%;height:100%;object-fit:cover}
.post-card__badge{position:absolute;top:14px;left:14px;background:#2EBD8E;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .7rem;border-radius:6px}
.post-card__time{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);color:#fff;font-size:.7rem;font-weight:500;padding:.3rem .65rem;border-radius:100px}
.post-card__time svg{width:12px;height:12px;fill:none;stroke:#2EBD8E;stroke-width:2}
.post-card__body{padding:1.25rem 1.25rem 1.5rem}
.post-card__tag{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem;display:inline-block}
.post-card__tag.tag-blue{color:#7da2ff}
.post-card__tag.tag-green{color:#2EBD8E}
.post-card__tag.tag-purple{color:#a78bfa}
.post-card__tag.tag-orange{color:#fb923c}
.post-card h3{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.4;margin-bottom:.5rem}
.post-card p{font-size:.85rem;color:#8892a8;line-height:1.65}

/* Locked post */
.post-card--locked .post-card__img::after{content:'';position:absolute;inset:0;background:rgba(30,30,46,0.6);backdrop-filter:blur(2px)}
.post-card--locked .lock-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.post-card--locked .lock-center svg{width:28px;height:28px;fill:#94a3b8}
.post-card--locked .lock-center span{font-size:.72rem;color:#94a3b8;font-weight:600}

/* --- About Sidebar --- */
.sidebar-about{background:#2a2a3d;border-radius:16px;padding:2rem;height:fit-content;position:sticky;top:80px}
.sidebar-about__label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#64748b;margin-bottom:1.25rem}
.sidebar-about__avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#3461EB,#2EBD8E);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.sidebar-about__avatar span{font-size:1.1rem;font-weight:800;color:#fff}
.sidebar-about h4{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.15rem}
.sidebar-about__role{font-size:.78rem;color:#3461EB;font-weight:600;margin-bottom:1rem}
.sidebar-about p{font-size:.85rem;color:#8892a8;line-height:1.7;margin-bottom:1.25rem}
.sidebar-about__social{display:flex;gap:.75rem}
.sidebar-about__social a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border-radius:8px;transition:background .2s}
.sidebar-about__social a:hover{background:rgba(52,97,235,0.2)}
.sidebar-about__social svg{width:16px;height:16px;fill:#94a3b8}

/* ===========================
   ALL ARTICLES GRID — 3 cols
   =========================== */
.articles-section{padding:0 0 4rem}
.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:.75rem}
.section-top h2{font-size:1.35rem;font-weight:700;color:#fff}
.section-top__pill{font-size:.78rem;color:#8892a8;background:rgba(255,255,255,0.05);padding:.35rem .9rem;border-radius:100px;font-weight:500}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

.article-card{background:#2a2a3d;border:1px solid rgba(255,255,255,0.04);border-radius:14px;padding:1.5rem;transition:all .25s;display:flex;flex-direction:column}
.article-card:hover{border-color:rgba(52,97,235,0.25);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.article-card__tag{display:inline-block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .55rem;border-radius:5px;margin-bottom:.6rem;width:fit-content}
.tag-blue{background:rgba(52,97,235,0.15);color:#7da2ff}
.tag-green{background:rgba(46,189,142,0.15);color:#2EBD8E}
.tag-purple{background:rgba(139,92,246,0.15);color:#a78bfa}
.tag-orange{background:rgba(249,115,22,0.15);color:#fb923c}
.article-card__date{font-size:.72rem;color:#64748b;margin-bottom:.35rem}
.article-card h3{font-size:.95rem;font-weight:700;color:#e2e8f0;margin-bottom:.45rem;line-height:1.4}
.article-card p{font-size:.82rem;color:#8892a8;line-height:1.65;flex:1}

/* Locked article card */
.article-card--locked{position:relative;overflow:hidden;min-height:190px}
.article-card--locked .lock-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,42,61,0) 10%,rgba(42,42,61,.95) 55%,#2a2a3d 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.25rem}
.lock-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:#8892a8}
.lock-badge svg{width:13px;height:13px;fill:#64748b}

/* ===========================
   INSPIRE SECTION
   =========================== */
.inspire-section{background:#252538;padding:70px 0;text-align:center;border-top:1px solid rgba(255,255,255,0.04)}
.inspire-section h2{font-size:1.85rem;font-weight:800;color:#fff;margin-bottom:.75rem}
.inspire-section h2 span{color:#2EBD8E}
.inspire-section .sa-container>p{font-size:1rem;color:#8892a8;max-width:560px;margin:0 auto 2.5rem;line-height:1.7}
.inspire-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.inspire-card{background:#2a2a3d;border:1px solid rgba(255,255,255,0.04);border-radius:14px;padding:1.75rem;text-align:left;transition:border-color .2s}
.inspire-card:hover{border-color:rgba(52,97,235,0.3)}
.inspire-card__num{font-size:1.75rem;font-weight:800;color:#3461EB;margin-bottom:.5rem}
.inspire-card h4{font-size:.95rem;font-weight:700;color:#e2e8f0;margin-bottom:.45rem}
.inspire-card p{font-size:.82rem;color:#8892a8;line-height:1.65;margin:0}

/* ===========================
   CONTACT CTA SECTION
   =========================== */
.contact-cta{background:#1e1e2e;padding:70px 0;border-top:1px solid rgba(255,255,255,0.04)}
.contact-cta__inner{max-width:640px;margin:0 auto;text-align:center}
.contact-cta h2{font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:.75rem}
.contact-cta p{font-size:.95rem;color:#8892a8;margin-bottom:2rem;line-height:1.7}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}
.contact-item{background:#2a2a3d;border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:1.5rem 1rem;text-align:center}
.contact-item__icon{width:40px;height:40px;background:rgba(52,97,235,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}
.contact-item__icon svg{width:20px;height:20px;stroke:#3461EB;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-item dt{font-size:.7rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.25rem}
.contact-item dd{font-size:.85rem;color:#e2e8f0;font-weight:600;margin:0}
.contact-item dd a{color:#7da2ff}

.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:#3461EB;color:#fff;font-size:.9rem;font-weight:600;padding:.75rem 1.6rem;border-radius:10px;transition:all .2s;border:none;cursor:pointer}
.btn-primary:hover{background:#2a51d4;transform:translateY(-1px);box-shadow:0 8px 20px rgba(52,97,235,0.3)}

/* ===========================
   FOOTER
   =========================== */
.sa-footer{background:#252538;padding:50px 0 0;color:#8892a8;border-top:1px solid rgba(255,255,255,0.04)}
.sa-footer__top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.05);flex-wrap:wrap;gap:2rem}
.sa-footer__brand img{height:28px;margin-bottom:.75rem}
.sa-footer__brand p{font-size:.82rem;color:#64748b;max-width:260px;line-height:1.6}
.sa-footer__links{display:flex;gap:3rem}
.sa-footer__links-col h4{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.75rem}
.sa-footer__links-col a{display:block;font-size:.85rem;color:#8892a8;padding:.3rem 0;transition:color .2s}
.sa-footer__links-col a:hover{color:#fff}
.sa-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;flex-wrap:wrap;gap:.5rem}
.sa-footer__copy{font-size:.78rem;color:#4b5563}
.sa-footer__bottom-links{display:flex;gap:1.5rem}
.sa-footer__bottom-links a{font-size:.78rem;color:#64748b;transition:color .2s}
.sa-footer__bottom-links a:hover{color:#fff}

/* ===========================
   CONTACT PAGE
   =========================== */
.contact-page{max-width:860px;margin:0 auto;padding:70px 24px 90px}
.contact-page__hero{text-align:center;margin-bottom:3rem}
.contact-page__hero h1{font-size:2.35rem;font-weight:800;color:#fff;margin-bottom:.75rem}
.contact-page__hero p{font-size:1rem;color:#8892a8;max-width:540px;margin:0 auto;line-height:1.75}
.contact-page__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.contact-page__card{background:#2a2a3d;border:1px solid rgba(255,255,255,0.04);border-radius:16px;padding:2rem 1.5rem;text-align:center;transition:border-color .25s,transform .25s}
.contact-page__card:hover{border-color:rgba(52,97,235,0.25);transform:translateY(-3px)}
.contact-page__card-icon{width:48px;height:48px;background:rgba(52,97,235,0.12);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:#3461EB}
.contact-page__card-icon svg{width:22px;height:22px}
.contact-page__card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.3rem}
.contact-page__card>p{font-size:.78rem;color:#64748b;margin-bottom:1rem}
.contact-page__link{font-size:.88rem;font-weight:600;color:#7da2ff;word-break:break-all}
a.contact-page__link:hover{color:#fff}

/* ===========================
   LEGAL PAGES
   =========================== */
.legal-page{max-width:800px;margin:0 auto;padding:60px 20px 80px;line-height:1.8}
.legal-page h1{font-size:2.25rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.legal-page .effective-date,.legal-page .last-updated{font-size:.95rem;color:#64748b;margin-bottom:2.5rem}
.legal-page h2{font-size:1.25rem;font-weight:700;margin-top:2.5rem;margin-bottom:.75rem;color:#e2e8f0}
.legal-page p{margin-bottom:1rem;font-size:.975rem;color:#8892a8}
.legal-page ul{margin:.5rem 0 1rem 1.5rem;list-style:disc}
.legal-page ul li{margin-bottom:.5rem;font-size:.975rem;color:#8892a8}
.legal-page strong{color:#e2e8f0}
.legal-page a{color:#7da2ff}

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:960px){
  .posts-layout{grid-template-columns:1fr 1fr;gap:1.25rem}
  .sidebar-about{grid-column:1/-1}
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .inspire-cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-page__cards{grid-template-columns:1fr}
  .sa-footer__top{flex-direction:column;align-items:center;text-align:center}
  .sa-footer__brand p{margin-left:auto;margin-right:auto}
  .sa-footer__links{gap:2rem}
}
@media(max-width:640px){
  .hero-section{padding:50px 0 35px}
  .hero-section h1{font-size:1.85rem}
  .posts-layout{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .cat-pills{gap:.4rem}
  .cat-pill{font-size:.72rem;padding:.35rem .75rem}
  .header-wrap{padding:8px 12px}
  .main-header{padding:0 16px;border-radius:12px}
  .header-nav{position:static;transform:none;gap:.85rem}
  .header-nav a{font-size:.75rem}
  .nav-cta{padding:.35rem .75rem;font-size:.72rem}
  .header-inner{gap:.75rem}
  .sa-footer__links{flex-direction:column;gap:1.5rem}
  .sa-footer__bottom{flex-direction:column;text-align:center}
}