/* ========== RESET ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background:#0a0a14;color:#e8e8f0;line-height:1.7;overflow-x:hidden}
a{color:#a78bfa;text-decoration:none;transition:color .2s}
a:hover{color:#c4b5fd}
img{max-width:100%;display:block}

/* ========== LAYOUT ========== */
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.grid{display:grid;gap:24px}

/* ========== HEADER ========== */
header{position:sticky;top:0;z-index:100;background:rgba(10,10,20,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:22px;font-weight:700;color:#e8e8f0;letter-spacing:-.5px}
.logo span{color:#a78bfa}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:#9999b0;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#e8e8f0}
.nav-links a.active{color:#a78bfa}

/* ========== HERO ========== */
.hero{text-align:center;padding:100px 0 80px}
.hero h1{font-size:48px;font-weight:800;line-height:1.2;letter-spacing:-1px;margin-bottom:20px;background:linear-gradient(135deg,#e8e8f0,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:18px;color:#9999b0;max-width:600px;margin:0 auto 32px}
.hero-cta{display:inline-flex;gap:16px}
.btn{display:inline-block;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:600;transition:all .2s;cursor:pointer;border:none}
.btn-primary{background:#7c5cfc;color:#fff}
.btn-primary:hover{background:#6d4ff0;transform:translateY(-1px)}
.btn-outline{background:transparent;color:#e8e8f0;border:1px solid rgba(255,255,255,.15)}
.btn-outline:hover{border-color:#a78bfa;color:#a78bfa}

/* ========== SECTION TITLES ========== */
.section-title{text-align:center;margin-bottom:48px}
.section-title h2{font-size:32px;font-weight:700;margin-bottom:12px;letter-spacing:-.5px}
.section-title p{color:#9999b0;font-size:16px}

/* ========== ARTICLE CARDS ========== */
.articles-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:#14142b;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.3)}
.card-thumb{height:200px;overflow:hidden;position:relative}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card-thumb img{transform:scale(1.05)}
.card-thumb-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:linear-gradient(transparent,rgba(10,10,20,.8));font-size:28px}
.card-body{padding:24px}
.card-category{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#a78bfa;margin-bottom:12px}
.card-body h3{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.4}
.card-body h3 a{color:#e8e8f0}
.card-body h3 a:hover{color:#a78bfa}
.card-excerpt{color:#9999b0;font-size:14px;margin-bottom:16px}
.card-meta{display:flex;gap:16px;font-size:12px;color:#666680}
.card-meta span{display:flex;align-items:center;gap:4px}

/* ========== BENEFITS ========== */
.benefits-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.benefit{text-align:center;padding:32px 24px;background:#14142b;border:1px solid rgba(255,255,255,.06);border-radius:14px}
.benefit-icon{width:56px;height:56px;border-radius:14px;background:rgba(124,92,252,.12);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 20px}
.benefit h3{font-size:17px;font-weight:700;margin-bottom:10px}
.benefit p{color:#9999b0;font-size:14px}

/* ========== FAQ ========== */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);padding:0}
.faq-q{width:100%;text-align:left;background:none;border:none;color:#e8e8f0;font-size:16px;font-weight:600;padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q::after{content:'+';font-size:22px;color:#a78bfa;transition:transform .2s}
.faq-q.open::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a.open{max-height:300px}
.faq-a p{color:#9999b0;font-size:14px;padding:0 0 20px}

/* ========== ARTICLE PAGE ========== */
.article-hero-img{width:100%;height:320px;object-fit:cover;border-radius:14px;margin-bottom:32px}
.article-header{text-align:center;padding:60px 0 40px}
.article-header h1{font-size:36px;font-weight:800;margin-bottom:16px;letter-spacing:-.5px;line-height:1.3}
.article-meta{display:flex;justify-content:center;gap:20px;font-size:14px;color:#666680;margin-bottom:8px}
.article-body{max-width:760px;margin:0 auto;font-size:16px;color:#c8c8d8}
.article-body p{margin-bottom:20px}
.article-body h2{font-size:24px;font-weight:700;margin:32px 0 16px;color:#e8e8f0}
.article-body h3{font-size:19px;font-weight:600;margin:24px 0 12px;color:#e8e8f0}
.article-body ul,.article-body ol{margin-bottom:20px;padding-left:24px}
.article-body li{margin-bottom:8px;color:#c8c8d8}
.article-body blockquote{border-left:3px solid #7c5cfc;padding:16px 24px;margin:24px 0;background:rgba(124,92,252,.06);border-radius:0 10px 10px 0;color:#b8b8c8;font-style:italic}
.article-body strong{color:#e8e8f0}

/* ========== LEGAL PAGES ========== */
.legal-content{max-width:760px;margin:0 auto;padding:60px 0}
.legal-content h1{font-size:32px;font-weight:800;margin-bottom:8px}
.legal-content .updated{color:#666680;font-size:14px;margin-bottom:32px}
.legal-content h2{font-size:20px;font-weight:700;margin:32px 0 12px;color:#e8e8f0}
.legal-content p{color:#b8b8c8;margin-bottom:16px}
.legal-content ul{margin-bottom:16px;padding-left:24px}
.legal-content li{color:#b8b8c8;margin-bottom:8px}
.legal-content a{color:#a78bfa}

/* ========== CONTACT FORM ========== */
.contact-form{max-width:560px;margin:0 auto}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:#e8e8f0}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;background:#14142b;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#e8e8f0;font-size:15px;font-family:inherit}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#7c5cfc}
.form-group textarea{resize:vertical;min-height:120px}

/* ========== FOOTER ========== */
footer{background:#08080f;border-top:1px solid rgba(255,255,255,.06);padding:60px 0 30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p{color:#666680;font-size:14px;margin-top:12px;max-width:300px}
.footer-col h4{font-size:14px;font-weight:700;margin-bottom:16px;color:#e8e8f0}
.footer-col a{display:block;color:#666680;font-size:14px;margin-bottom:10px}
.footer-col a:hover{color:#a78bfa}
.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid rgba(255,255,255,.04);color:#4a4a5a;font-size:13px}

/* ========== RESPONSIVE ========== */
@media(max-width:768px){
  .hero h1{font-size:32px}
  .hero p{font-size:16px}
  .section{padding:56px 0}
  .section-title h2{font-size:24px}
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .article-header h1{font-size:26px}
  .article-body{font-size:15px}
}