/* About section animation */
.about-animated {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.about-animated.visible {
  opacity: 1;
  transform: translateY(0);
}
#generator select {
  background: rgba(30, 34, 54, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  transition: background 0.2s;
}
#generator select:focus {
  background: rgba(30, 34, 54, 0.65) !important;
}
#generator select option {
  background: rgba(30, 34, 54, 0.85) !important;
  color: var(--text);
}
/* Make only the category select in the generator transparent */
#generator select {
  background: transparent !important;
}
    :root{
    html {
      scroll-behavior: smooth;
    }
      --bg: #0b1220;            /* page bg */
      --card: #121a2b;          /* surface */
      --muted: #7c8aa6;         /* secondary text */
      --text: #e7edf8;          /* main text */
      --brand: #4f7cff;         /* primary */
      --brand-2:#7a5cff;        /* gradient partner */
      --ok:#22c55e;
      --warn:#f59e0b;
      --danger:#ef4444;
      --ring: rgba(79,124,255,.35);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1000px 500px at 20% 0%, rgba(127,111,255,.15), transparent 60%),
                  radial-gradient(1000px 500px at 80% 10%, rgba(79,124,255,.15), transparent 60%),
                  var(--bg);
      color:var(--text);
    }

    /* Container */
    .container{width:100%; max-width:1100px; margin:0 auto; padding:0 20px}

    /* Header */
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:rgba(11,18,32,.6); border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
    .logo{width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:conic-gradient(from 120deg, var(--brand), var(--brand-2)); box-shadow:0 6px 14px rgba(79,124,255,.4)}
    .brand span{font-weight:800; letter-spacing:.3px}
    nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
    nav a{color:var(--muted); text-decoration:none; font-weight:600}
    nav a{
      transition: color 0.2s, transform 0.18s;
    }
    nav a:hover{
      color:var(--text);
      transform: translateY(-2px) scale(1.08);
    }
    .cta{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:white; text-decoration:none; font-weight:700; box-shadow:0 8px 20px rgba(79,124,255,.35);
      transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    }
    .cta:hover{
      background:linear-gradient(90deg, var(--brand-2), var(--brand));
      box-shadow:0 12px 28px rgba(79,124,255,.45);
      transform: translateY(-2px) scale(1.06);
    }
    .ghost{
      transition: background 0.18s, color 0.18s, transform 0.18s;
    }
    .ghost:hover{
      background:rgba(255,255,255,.08);
      color:var(--brand);
      transform: translateY(-2px) scale(1.06);
    }
    .btn{
      transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
    }
    .btn:hover{
      background:linear-gradient(90deg, var(--brand-2), var(--brand));
      color:#fff;
      box-shadow:0 12px 28px rgba(79,124,255,.45);
      transform: translateY(-2px) scale(1.06);
    }
    .btn.secondary:hover{
      background:rgba(255,255,255,.08);
      color:var(--brand);
    }
    .feature, .card, .step {
      transition: box-shadow 0.18s, transform 0.18s;
    }
    .feature:hover, .card:hover, .step:hover {
      box-shadow:0 16px 36px rgba(79,124,255,.18);
      transform: translateY(-4px) scale(1.02);
    }

    /* Mobile nav */
    .menu-btn{display:none; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text); padding:8px 10px; border-radius:12px}
    @media (max-width: 860px){
      nav ul{display:none}
      .menu-btn{display:inline-flex}
      .mobile-menu{display:none; position:absolute; left:0; right:0; top:64px; background:rgba(11,18,32,.95); border-bottom:1px solid rgba(255,255,255,.06)}
      .mobile-menu.open{display:block}
      .mobile-menu a{display:block; padding:14px 20px; color:var(--muted); text-decoration:none}
      .mobile-menu a:hover{background:rgba(255,255,255,.04); color:var(--text)}
    }

    /* Hero */
    .hero{padding:64px 0 32px}
    .hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
    .hero h1{font-size:42px; line-height:1.1; margin:0 0 12px}
    .hero p{color:var(--muted); font-size:18px; margin:0 0 22px}
    .hero .actions{display:flex; gap:12px; flex-wrap:wrap}
    .ghost{border:1px solid rgba(255,255,255,.18); padding:10px 14px; border-radius:12px; color:var(--text); text-decoration:none; font-weight:700}
    .card-visual{border-radius:20px; background:linear-gradient(160deg, rgba(79,124,255,.35), rgba(122,92,255,.25)); border:1px solid rgba(255,255,255,.2); box-shadow: var(--shadow); padding:18px}
    .visual-inner{height:260px; border-radius:14px; background:radial-gradient(600px 260px at 50% -20%, rgba(255,255,255,.2), transparent 50%),
                                  linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
      display:grid; grid-template-rows:auto 1fr auto; padding:16px}
    .visual-header{display:flex; gap:8px}
    .dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25)}
    .visual-line{height:10px; background:rgba(255,255,255,.08); border-radius:6px; margin:8px 0}

    @media (max-width: 900px){
      .hero-inner{grid-template-columns:1fr}
    }

    /* Features */
    .section{padding:30px 0}
    .section h2{font-size:26px; margin:0 0 12px}
    .muted{color:var(--muted)}

    .grid{display:grid; gap:16px; grid-template-columns:repeat(4,1fr)}
    @media (max-width: 1000px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 560px){.grid{grid-template-columns:1fr}}

    .feature{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
    .feature h3{margin:0 0 6px}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(79,124,255,.15); border:1px solid rgba(79,124,255,.35); font-weight:700; font-size:12px}

    /* Generator card */
    .card{margin-top:18px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
    label{display:block; margin:8px 0 6px; font-weight:700}
    select, input[type="text"]{
      width:100%;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:transparent;
      color:var(--text);
    }
    .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    @media (max-width:700px){.row{grid-template-columns:1fr}}
    .btn{display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:white; border:0; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(79,124,255,.35)}
    .btn.secondary{background:transparent; border:1px solid rgba(255,255,255,.16); box-shadow:none}

    .result{display:flex; gap:8px; align-items:center; margin-top:14px}
    .result input{flex:1}

    .toast{position:fixed; right:16px; bottom:16px; background:#08101f; color:var(--text); padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:all .25s ease}
    .toast.show{opacity:1; transform:translateY(0)}

    /* Steps */
    .steps{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
    @media (max-width: 900px){.steps{grid-template-columns:1fr}}
    .step{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px}

    /* Footer */
    footer{margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding:26px 0; color:var(--muted)}
    .foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
    .foot a{color:var(--muted); text-decoration:none}
    .foot a:hover{color:var(--text)}