@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,800&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;color:#1a1a2e;background:#FAFAF8;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;transition:opacity .2s}a:hover{opacity:.92}
img{max-width:100%}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.fu{animation:fadeUp .7s ease-out both}.si{animation:slideIn .5s ease-out both}.sci{animation:scaleIn .4s ease-out both}

/* Typography */
h1,h2,h3{font-family:'Fraunces',serif;color:#1a1a2e;line-height:1.15}
h1{font-size:48px;font-weight:800}
h2{font-size:40px;font-weight:700}
h3{font-size:22px;font-weight:700}

/* Buttons */
.btn{background:#2563EB;color:#fff;padding:16px 36px;border-radius:10px;font-weight:600;font-size:16px;box-shadow:0 4px 24px rgba(37,99,235,.25);display:inline-block;border:none;cursor:pointer;font-family:inherit}
.btn-dark{background:#1a1a2e;color:#fff;padding:14px 28px;border-radius:10px;font-weight:600;font-size:15px;display:inline-block;border:none;cursor:pointer;font-family:inherit}
.btn-outline{background:transparent;color:#2563EB;padding:14px 28px;border-radius:10px;font-weight:600;font-size:15px;display:inline-block;border:2px solid #2563EB;cursor:pointer;font-family:inherit}
.btn-gold{background:#D97706;color:#fff;padding:14px 28px;border-radius:10px;font-weight:600;font-size:15px;display:inline-block;border:none;cursor:pointer}
.btn-purple{background:#7C3AED;color:#fff;padding:16px 36px;border-radius:10px;font-weight:600;font-size:16px;box-shadow:0 4px 20px rgba(124,58,237,.25);display:inline-block;border:none;cursor:pointer}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s;padding:14px 40px;display:flex;justify-content:space-between;align-items:center}
.nav.scrolled{background:rgba(250,250,248,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-logo{font-family:'Fraunces',serif;font-size:22px;font-weight:700;color:#1a1a2e}
.nav-logo span{color:#2563EB}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:500}
.nav-links a{color:#555}
.nav-links .nav-cta{background:#1a1a2e;color:#fff;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:600}

/* Sections */
.section{padding:100px 40px;max-width:1100px;margin:0 auto}
.section-bg{padding:100px 40px}
.section-center{text-align:center}
.sub{font-size:17px;color:#777;line-height:1.6}

/* Cards */
.card{padding:28px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Badge */
.badge{display:inline-block;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:600;margin-bottom:20px}
.badge-blue{background:#EEF2FF;color:#2563EB}
.badge-gold{background:#FEF3C7;color:#D97706}
.badge-purple{background:#F3E8FF;color:#7C3AED}
.badge-green{background:#DCFCE7;color:#16A34A}

/* Footer */
.footer{padding:32px 40px;border-top:1px solid rgba(0,0,0,.06);display:flex;justify-content:space-between;align-items:center}
.footer-logo{font-family:'Fraunces',serif;font-size:18px;font-weight:700}
.footer-logo span{color:#2563EB}
.footer-sub{font-size:12px;color:#999;margin-top:4px}
.footer-langs{font-size:12px;color:#BBB}

/* Blog/Content pages */
.content-page{max-width:780px;margin:0 auto;padding:120px 40px 80px}
.content-page h1{font-size:36px;margin-bottom:8px}
.content-page .meta{font-size:14px;color:#888;margin-bottom:32px}
.content-page h2{font-size:28px;margin-top:40px;margin-bottom:16px}
.content-page h3{font-size:20px;margin-top:32px;margin-bottom:12px}
.content-page p{font-size:16px;line-height:1.8;color:#444;margin-bottom:16px}
.content-page ul,.content-page ol{margin:16px 0;padding-left:24px}
.content-page li{font-size:16px;line-height:1.8;color:#444;margin-bottom:8px}
.content-page blockquote{border-left:4px solid #2563EB;padding:12px 20px;margin:24px 0;background:#F8F9FA;border-radius:0 8px 8px 0;font-style:italic;color:#555}
.content-page strong{color:#1a1a2e}
.content-page em{color:#555}
.content-page hr{border:none;height:1px;background:#E5E5E5;margin:40px 0}
.content-page a{color:#2563EB;font-weight:500}
.content-page table{width:100%;border-collapse:collapse;margin:24px 0}
.content-page th,.content-page td{padding:10px 14px;border:1px solid #E5E5E5;font-size:14px;text-align:left}
.content-page th{background:#F5F5F3;font-weight:600}

/* CTA Block */
.cta-block{background:#F5F5F3;border-radius:16px;padding:32px;text-align:center;margin-top:48px}
.cta-block h3{font-size:22px;margin-bottom:8px}
.cta-block p{color:#777;margin-bottom:20px}

/* Blog Index */
.blog-grid{display:grid;gap:24px;margin-top:40px}
.blog-card{display:block;padding:24px 28px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.blog-card h3{font-size:18px;margin-bottom:6px;color:#1a1a2e}
.blog-card .excerpt{font-size:14px;color:#777;line-height:1.6}
.blog-card .date{font-size:12px;color:#AAA;margin-bottom:8px}

/* Responsive */
@media(max-width:768px){
  h1{font-size:32px}h2{font-size:28px}h3{font-size:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav-links a:not(.nav-cta){display:none}
  .section,.section-bg,.content-page{padding-left:20px;padding-right:20px}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-showcase{display:none}
  .footer{flex-direction:column;gap:12px;text-align:center}
  .affiliate-grid{grid-template-columns:1fr!important}
}