/*
Theme Name: AI Website Builder (v6)
Theme URI: https://example.com
Author: You
Description: Plug-and-play one-page theme for Hostinger AI Website Builder affiliate landing. 10web-style, sticky header, mobile dropdown, Customizer controls, external images, trust logos pre-filled.
Version: 6.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aiwb-v6
*/

* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#0f172a; background:#fff; line-height:1.6; }
img { max-width:100%; display:block; }

:root {
  --primary:#4F46E5;
  --primary-end:#7C3AED;
  --bg-soft:#F6F7FB;
  --text:#0f172a;
  --muted:#475569;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.12);
  --btn-text:#ffffff;
}

.container { width:min(1120px,92%); margin:0 auto; }
.section { padding:96px 0; }
.section-soft { background:var(--bg-soft); }
.grid { display:grid; gap:28px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } }

/* Header */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid #eef2ff; }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.brand-badge{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-end)); }
nav.primary{ display:flex; align-items:center; gap:22px; }
.header-cta{ display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--primary-end)); color:var(--btn-text); font-weight:700; box-shadow:var(--shadow); border:0; }

/* Mobile */
.menu-toggle{ display:none; border:0; background:transparent; font-size:22px; }
@media (max-width:900px){
  nav.primary{ display:none; position:absolute; right:16px; top:64px; flex-direction:column; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--shadow); padding:12px; }
  nav.primary.open{ display:flex; }
  .menu-toggle{ display:inline-block; }
}

/* Hero */
.hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,#113800 0%,#206b00 50%,#288500 100%); color:#fff; }
.hero .container{ text-align:center; position:relative; z-index:2; }
.hero h1{ font-size:clamp(32px,5vw,56px); line-height:1.1; color:#fff; }
.hero p.lead{ font-size:clamp(16px,2.1vw,20px); color:#c7d2fe; }
.hero-cta{ display:inline-flex; align-items:center; gap:12px; padding:16px 28px; border-radius:999px; font-weight:600; background:linear-gradient(135deg,var(--primary),var(--primary-end)); color:#fff; box-shadow:var(--shadow); border:0; cursor:pointer; }
.hero-illus{ position:absolute; inset:0; opacity:.35; background:
  radial-gradient(800px 400px at 20% 20%, #46e54f 0%, transparent 60%),
  radial-gradient(800px 400px at 80% 30%, #3aed7c 0%, transparent 60%),
  radial-gradient(900px 500px at 50% 80%, #d3ee22 0%, transparent 65%)
}

/* Cards */
.card{ background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:1px solid #eef2ff; }

/* CTA buttons */
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; padding:14px 18px; font-weight:700; border:1px solid rgba(79,70,229,.35); color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-end)); }

/* Pricing */
.pricing{ display:grid; gap:28px; }
@media (min-width:900px){ .pricing{ grid-template-columns:repeat(3,1fr); } }
.price-card{ border-radius:var(--radius); background:#fff; border:1px solid #e5e7eb; box-shadow:var(--shadow); padding:28px; position:relative; }
.price{ font-size:40px; font-weight:800; color:var(--text); }
.month{ font-weight:600; color:var(--muted); font-size:14px; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(79,70,229,.08); font-size:12px; color:#4338CA; }

/* FAQ */
.faq{ width:min(900px,92%); margin:0 auto; }
.faq-item{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:12px; overflow:hidden; }
.faq-q{ padding:18px 20px; cursor:pointer; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.faq-a{ display:none; padding:0 20px 20px; color:var(--muted);}
.faq-item.open .faq-a{ display:block;}

/* Final CTA */
.final-cta{ background:linear-gradient(135deg,var(--primary),var(--primary-end)); color:#fff; text-align:center; }
.final-cta h2{ color:#fff; }
.trust-logos{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:16px; }
.trust-logos img{ height:36px; opacity:.9; }

/* Footer */
.site-footer{ background:#0b1020; color:#e5e7eb; padding:40px 0; margin-top:0; }
.site-footer a{ color:#cbd5e1; }
.small-note{ font-size:12px; color:#64748b; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:all .6s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }