/* ============================================================
       CSS VARIABLES & RESET
    ============================================================ */
    :root {
      --bg: #0d0e14;
      --bg2: #13141d;
      --surface: #1a1b27;
      --surface2: #22243a;
      --border: rgba(255,255,255,0.07);
      --text: #f0f0f8;
      --text2: #9a9bb8;
      --text3: #5c5e80;
      --accent: #6c63ff;
      --accent2: #a78bfa;
      --accent3: #38bdf8;
      --green: #34d399;
      --red: #f87171;
      --radius: 16px;
      --radius-sm: 8px;
      --radius-lg: 24px;
      --shadow: 0 8px 32px rgba(0,0,0,0.4);
      --shadow-sm: 0 2px 12px rgba(0,0,0,0.25);
      --font-display: 'Syne', 'Segoe UI', sans-serif;
      --font-body: 'DM Sans', 'Segoe UI', sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
      --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    [data-theme="light"] {
      --bg: #f0f0f7;
      --bg2: #e8e8f2;
      --surface: #ffffff;
      --surface2: #f4f4fc;
      --border: rgba(0,0,0,0.08);
      --text: #1a1b2e;
      --text2: #5a5b7a;
      --text3: #9a9bb0;
      --shadow: 0 8px 32px rgba(108,99,255,0.12);
      --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }
    @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

    /* ============================================================
       SCROLLBAR
    ============================================================ */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

    /* ============================================================
       NAVBAR
    ============================================================ */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2rem;
      height: 64px;
      background: rgba(13,14,20,0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      transition: var(--transition);
    }
    [data-theme="light"] .navbar { background: rgba(240,240,247,0.85); }
    .nav-logo {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.15rem;
      letter-spacing: -0.5px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent3) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .nav-right { display: flex; align-items: center; gap: 0.75rem; }
    .theme-toggle {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      width: 40px; height: 40px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .theme-toggle:hover { background: var(--surface2); transform: scale(1.08); }
    .nav-btn {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      padding: 0.45rem 1.1rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
      transition: var(--transition);
    }
    .nav-btn:hover { opacity: 0.88; transform: translateY(-1px); }

    /* ============================================================
       HERO
    ============================================================ */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 5rem 1.5rem 4rem;
      position: relative;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
    }
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.18;
      animation: blobFloat 8s ease-in-out infinite alternate;
    }
    .blob1 { width: 500px; height: 500px; background: var(--accent); top: -100px; left: -100px; animation-delay: 0s; }
    .blob2 { width: 400px; height: 400px; background: var(--accent3); bottom: -80px; right: -80px; animation-delay: 2s; }
    .blob3 { width: 300px; height: 300px; background: #f472b6; top: 40%; left: 50%; transform: translate(-50%,-50%); animation-delay: 4s; }
    @keyframes blobFloat {
      0% { transform: scale(1) translate(0,0); }
      100% { transform: scale(1.15) translate(30px, -30px); }
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 0.35rem 1rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--accent2);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      position: relative; z-index: 1;
    }
    .hero-badge::before { content: '✦'; font-size: 0.7rem; }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 7vw, 5rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -2px;
      position: relative; z-index: 1;
      margin-bottom: 1.25rem;
    }
    .hero h1 span {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent3) 60%, var(--accent2) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-sub {
      max-width: 560px;
      font-size: 1.1rem;
      color: var(--text2);
      margin-bottom: 2.5rem;
      position: relative; z-index: 1;
      font-weight: 400;
    }
    .hero-ctas {
      display: flex; flex-wrap: wrap; gap: 1rem;
      justify-content: center;
      position: relative; z-index: 1;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      padding: 0.85rem 2rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 4px 20px rgba(108,99,255,0.35);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(108,99,255,0.5); }
    .btn-secondary {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      padding: 0.85rem 2rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
    }
    .btn-secondary:hover { background: var(--surface2); transform: translateY(-2px); }
    .hero-stats {
      display: flex; gap: 2.5rem;
      margin-top: 3.5rem;
      position: relative; z-index: 1;
      flex-wrap: wrap; justify-content: center;
    }
    .stat { text-align: center; }
    .stat-num {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent2), var(--accent3));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-label { font-size: 0.8rem; color: var(--text3); font-weight: 500; margin-top: 0.1rem; }

    /* ============================================================
       SECTION WRAPPER
    ============================================================ */
    .section { padding: 5rem 1.5rem; }
    .section-label {
      text-align: center;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.75rem;
    }
    .section-title {
      text-align: center;
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -1px;
      margin-bottom: 0.75rem;
    }
    .section-sub {
      text-align: center;
      color: var(--text2);
      font-size: 1rem;
      max-width: 500px;
      margin: 0 auto 3rem;
    }
    .container { max-width: 1280px; margin: 0 auto; }

    /* ============================================================
       GENERATOR SECTION
    ============================================================ */
    #generator { background: var(--bg2); }

    /* TABS */
    .tabs-wrap {
      display: flex; justify-content: center;
      margin-bottom: 2.5rem;
    }
    .tabs {
      display: inline-flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 4px;
      gap: 4px;
    }
    .tab-btn {
      background: transparent;
      border: none;
      color: var(--text2);
      padding: 0.6rem 1.6rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.92rem;
      cursor: pointer;
      transition: var(--transition);
    }
    .tab-btn.active {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 2px 12px rgba(108,99,255,0.35);
    }
    .tab-btn:not(.active):hover { color: var(--text); background: var(--surface2); }

    /* GENERATOR LAYOUT */
    .gen-grid {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 1.5rem;
      align-items: start;
    }
    @media (max-width: 900px) { .gen-grid { grid-template-columns: 1fr; } }

    /* CONTROLS PANEL */
    .controls-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
    }
    .controls-panel h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
      color: var(--text2);
      letter-spacing: 0.3px;
    }
    .control-group { margin-bottom: 1.1rem; }
    .control-label {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 0.45rem;
    }
    .control-val {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--accent2);
      background: var(--surface2);
      padding: 0.1rem 0.5rem;
      border-radius: 4px;
    }

    /* COLOR PICKER */
    .color-row { display: flex; align-items: center; gap: 0.6rem; }
    .color-picker-wrap {
      position: relative;
      width: 36px; height: 36px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
    }
    .color-picker-wrap input[type="color"] {
      position: absolute;
      width: 200%; height: 200%;
      top: -50%; left: -50%;
      border: none; cursor: pointer;
      padding: 0;
    }
    .color-hex {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--text2);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.3rem 0.6rem;
      flex: 1;
      outline: none;
    }
    .color-hex:focus { border-color: var(--accent); color: var(--text); }

    /* RANGE SLIDER */
    input[type="range"] {
      --webkit-appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 3px;
      background: var(--surface2);
      outline: none;
      cursor: pointer;
      accent-color: var(--accent);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      cursor: pointer;
      box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
      transition: box-shadow 0.2s;
    }
    input[type="range"]::-webkit-slider-thumb:hover {
      box-shadow: 0 0 0 5px rgba(108,99,255,0.3);
    }
    input[type="range"]::-moz-range-thumb {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      cursor: pointer;
      border: none;
    }

    /* TOGGLE */
    .toggle-row {
      display: flex; align-items: center; justify-content: space-between;
    }
    .toggle-label { font-size: 0.82rem; font-weight: 600; color: var(--text2); }
    .toggle {
      position: relative; width: 44px; height: 24px;
    }
    .toggle input { display: none; }
    .toggle-slider {
      position: absolute; inset: 0;
      background: var(--surface2);
      border-radius: 24px;
      cursor: pointer;
      transition: var(--transition);
      border: 1px solid var(--border);
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--text3);
      top: 2px; left: 2px;
      transition: var(--transition);
    }
    .toggle input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; }

    /* ACTION BUTTONS ROW */
    .action-btns {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0.6rem; margin-top: 1.25rem;
    }
    .action-btn {
      background: var(--surface2);
      color: var(--text2);
      border: 1px solid var(--border);
      padding: 0.6rem 0.5rem;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.8rem;
      cursor: pointer;
      transition: var(--transition);
      display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    }
    .action-btn:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
    .action-btn.export { grid-column: 1/-1; color: var(--accent); border-color: rgba(108,99,255,0.35); }
    .action-btn.export:hover { background: rgba(108,99,255,0.1); }

    /* RIGHT COLUMN */
    .preview-code-col { display: flex; flex-direction: column; gap: 1.5rem; }

    /* PREVIEW AREA */
    .preview-area {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 380px;
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .preview-bg {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: #1a1b27;
      overflow: hidden;
    }
    [data-theme="light"] .preview-bg { background: #dde0f5; }
    .preview-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(50px);
      opacity: 0.5;
    }
    .pb1 { width: 250px; height: 250px; background: #6c63ff; top: -60px; left: -60px; }
    .pb2 { width: 200px; height: 200px; background: #38bdf8; bottom: -40px; right: -40px; }
    .pb3 { width: 150px; height: 150px; background: #f472b6; top: 50%; left: 60%; transform: translate(-50%,-50%); }

    /* THE LIVE CARD */
    #live-card {
      position: relative; z-index: 1;
      transition: all 0.25s ease;
    }
    .card-icon {
      width: 46px; height: 46px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent3));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 1rem;
    }
    .card-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: inherit;
    }
    .card-body {
      font-size: 0.85rem;
      opacity: 0.75;
      line-height: 1.55;
      margin-bottom: 1.2rem;
    }
    .card-btn {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      color: inherit;
      border: 1px solid rgba(255,255,255,0.2);
      padding: 0.5rem 1.1rem;
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }
    .card-btn:hover { background: rgba(255,255,255,0.25); }

    /* CODE PANEL */
    .code-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .code-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.85rem 1.25rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .code-header-left {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 0.82rem; font-weight: 600; color: var(--text2);
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot-red { background: #f87171; }
    .dot-yellow { background: #fbbf24; }
    .dot-green { background: #34d399; }
    .copy-btn {
      background: rgba(108,99,255,0.15);
      color: var(--accent);
      border: 1px solid rgba(108,99,255,0.3);
      padding: 0.4rem 1rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.8rem;
      cursor: pointer;
      transition: var(--transition);
      display: flex; align-items: center; gap: 0.35rem;
    }
    .copy-btn:hover { background: rgba(108,99,255,0.25); }
    .copy-btn.copied { background: rgba(52,211,153,0.15); color: var(--green); border-color: rgba(52,211,153,0.3); }
    #css-output {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      line-height: 1.7;
      padding: 1.25rem;
      color: var(--text2);
      overflow-x: auto;
      white-space: pre;
      max-height: 280px;
      overflow-y: auto;
      background: transparent;
    }
    /* syntax-ish coloring */
    #css-output .prop { color: #93c5fd; }
    #css-output .val { color: #86efac; }
    #css-output .sel { color: var(--accent2); }
    #css-output .comment { color: var(--text3); }

    /* ============================================================
       FAQ SECTION
    ============================================================ */
    .faq-section { background: var(--bg); padding: 5rem 1.5rem; }
    .faq-grid { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: var(--transition);
    }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      text-align: left;
      padding: 1.15rem 1.25rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem;
    }
    .faq-q:hover { color: var(--accent2); }
    .faq-arrow { font-size: 0.9rem; color: var(--text3); transition: transform 0.3s; flex-shrink: 0; }
    .faq-item.open .faq-arrow { transform: rotate(180deg); }
    .faq-a {
      max-height: 0; overflow: hidden;
      font-size: 0.9rem; color: var(--text2); line-height: 1.65;
      transition: max-height 0.35s ease, padding 0.3s ease;
      padding: 0 1.25rem;
    }
    .faq-item.open .faq-a { max-height: 300px; padding: 0 1.25rem 1.25rem; }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: var(--bg2);
      border-top: 1px solid var(--border);
      text-align: center;
      padding: 2rem;
      color: var(--text3);
      font-size: 0.82rem;
    }
    footer a { color: var(--accent); text-decoration: none; }
    footer span { color: var(--accent2); }

    /* ============================================================
       SCROLLED NAV
    ============================================================ */
    .navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.35); }

    /* ============================================================
       RESPONSIVE TWEAKS
    ============================================================ */
    @media (max-width: 640px) {
      .hero h1 { letter-spacing: -1px; }
      .hero-stats { gap: 1.5rem; }
      .action-btns { grid-template-columns: 1fr; }
      .action-btn.export { grid-column: 1/-1; }
      .tabs { flex-wrap: wrap; border-radius: var(--radius); }
    }

    /* ============================================================
       SMOOTH REVEAL
    ============================================================ */
    .reveal {
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }