/* ======================================================
   DESIGN SYSTEM (AUTO DARK/LIGHT)
====================================================== */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;

  --brand:#ff5a5f;
  --brand-2:#ffb703;
  --grad:linear-gradient(135deg,#ff5a5f,#ffb703);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;

  --shadow:0 15px 40px rgba(0,0,0,.1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --bg-soft:#111827;
    --card:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
    --shadow:0 20px 50px rgba(0,0,0,.6);
  }
}

/* ======================================================
   RESET & BASE
====================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:auto;padding:1.2rem}
section{padding:4.5rem 0}

/* ======================================================
   HEADER
====================================================== */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  header{background:rgba(11,18,32,.85)}
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:1.45rem;font-weight:800;
}
.logo span{color:var(--brand)}
.nav-menu{
  display:flex;align-items:center;gap:2rem;
}
nav ul{
  display:flex;gap:1.4rem;list-style:none;margin:0;
}
nav ul a{font-size:.95rem;color:var(--muted)}
.nav-btn{
  background:var(--grad);
  color:#fff;padding:.6rem 1.1rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  white-space:nowrap;
}
.menu{
  display:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--text);
}

/* ======================================================
   HERO
====================================================== */
.hero{
  background:linear-gradient(135deg,#ffe4e5,#ffffff);
}
@media (prefers-color-scheme: dark){
  .hero{background:linear-gradient(135deg,#1f2937,#020617)}
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.5rem;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.3rem);
  line-height:1.15;
}
.hero h1 span{
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
}
.hero p{
  margin:1.2rem 0;
  max-width:520px;
  color:var(--muted);
}
.hero-actions{
  display:flex;gap:1rem;flex-wrap:wrap;
}
.btn{
  padding:.9rem 1.3rem;
  border-radius:var(--radius-md);
  font-weight:600;
}
.btn.primary{background:var(--grad);color:#fff}
.btn.secondary{
  background:var(--card);
  border:1px solid var(--border);
}

/* HERO SIDE CARD */
.hero-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow);
}
.hero-tags{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;
}
.tag{
  background:var(--bg-soft);
  padding:.45rem .9rem;
  border-radius:999px;
  font-size:.75rem;
}

/* ======================================================
   STATS STRIP
====================================================== */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;margin-top:2rem;
}
.stat{
  background:var(--bg-soft);
  padding:1.2rem;
  border-radius:var(--radius-md);
  text-align:center;
}
.stat h3{font-size:1.6rem}

/* ======================================================
   SECTION TITLES
====================================================== */
.section-title{
  text-align:center;
  max-width:760px;
  margin:0 auto 3rem;
}
.section-title h2{
  font-size:clamp(1.8rem,4vw,2.4rem);
}
.section-title span{color:var(--brand)}
.section-title p{color:var(--muted);margin-top:.5rem}

/* ======================================================
   TRENDING DARK STRIP
====================================================== */
.trending{
  background:#020617;color:#fff;
}
.trending .tags{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
}
.trending .tag{
  background:#111827;color:#e5e7eb;
}

/* ======================================================
   DOMAIN CARDS
====================================================== */
.grid{
  display:grid;gap:1.5rem;
}
.grid-4{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.domain{
  position:relative;
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  box-shadow:var(--shadow);
  transition:.3s;
}
.domain:hover{
  transform:translateY(-6px);
}
.domain i{
  font-size:2rem;
  color:var(--brand);
  margin-bottom:.8rem;
}
.badge{
  position:absolute;
  top:1rem;right:1rem;
  background:var(--grad);
  color:#fff;
  font-size:.65rem;
  padding:.25rem .6rem;
  border-radius:999px;
}

/* ======================================================
   BLOG
====================================================== */
.blog{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:1.5rem;
}
.blog .post{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  box-shadow:var(--shadow);
}

/* ======================================================
   FAQ
====================================================== */
.faq-item{
  border-bottom:1px solid var(--border);
  padding:1.2rem 0;
}
.faq-q{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:600;
}
.faq-a{
  display:none;
  margin-top:.6rem;
  color:var(--muted);
}

/* ======================================================
   FOOTER
====================================================== */
footer{
  background:#020617;color:#cbd5f5;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem;
}
footer a{color:#94a3b8;font-size:.9rem}
.copy{
  text-align:center;
  padding:1.2rem;
  border-top:1px solid #1f2937;
  font-size:.85rem;
}

/* ======================================================
   MOBILE MENU
====================================================== */
@media(max-width:900px){
  .nav-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--card);
    flex-direction:column;
    padding:1.5rem;
    border-top:1px solid var(--border);
    box-shadow:var(--shadow);
  }

  .nav-menu.active{
    display:flex;
  }

  .nav-menu ul{
    flex-direction:column;
    width:100%;
    gap:1.2rem;
    margin-bottom:1.5rem;
  }

  .nav-menu ul li a{
    font-size:1.1rem;
    display:block;
    padding:0.6rem 0;
  }

  .nav-menu .nav-btn{
    width:100%;
    text-align:center;
    padding:0.9rem;
  }

  .menu{
    display:block;
  }

  .hero-grid,
  .blog{
    grid-template-columns:1fr;
  }
}



html{scroll-behavior:smooth;}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hero{
  min-height:100vh;
}

.btn{
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

img{
  height:auto;
}

header{
  will-change:backdrop-filter;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;}
}