:root {
      --font-display: 'Epilogue', sans-serif;
      --font-body: 'Space Grotesk', sans-serif;
      --color-text: #f7eeff;
      --color-muted: #dbc8ff;
      --color-pink: rgba(255,72,196,0.35);
      --color-card: rgba(255,255,255,0.04);
      --radius: 1rem;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100vh;
      background: #06030b;
      color: var(--color-text);
      font-family: var(--font-body);
      overflow-x: hidden;
    }
    body::after {
      content: '';
      position: fixed;
      top: -20vh; left: 50%;
      transform: translateX(-50%);
      width: 80vw; height: 60vh;
      background: radial-gradient(ellipse, rgba(180,40,255,0.12) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* NAV */
    nav {
      position: sticky; top: 0; z-index: 50;
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      background: rgba(6,3,11,0.82);
      border-bottom: 1px solid var(--color-pink);
      backdrop-filter: blur(12px);
    }
    nav a {
      color: var(--color-muted); text-decoration: none;
      font-size: 0.9rem; font-weight: 500;
      padding: 0.35rem 0.75rem; border-radius: 999px;
      transition: color 0.2s, background 0.2s;
    }
    nav a:hover { color: var(--color-text); background: rgba(255,255,255,0.07); }
    nav a.home { color: var(--color-text); font-weight: 700; }
    nav .sep { color: rgba(255,255,255,0.2); font-size: 0.85rem; }

    /* MAIN */
    main {
      position: relative; z-index: 1;
      max-width: 860px; margin: 0 auto;
      padding: 4rem 1.5rem 6rem;
    }
    .eyebrow {
      font-size: 0.75rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--color-muted);
      margin-bottom: 0.75rem;
    }
    h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      font-weight: 900; line-height: 1.1; margin-bottom: 1rem;
      background: linear-gradient(135deg, #f7eeff 30%, #d48cff 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .intro {
      color: var(--color-muted); font-size: 1.05rem;
      max-width: 540px; line-height: 1.65; margin-bottom: 3.5rem;
    }

    /* CARDS */
    .card-list { display: flex; flex-direction: column; gap: 1rem; }

    .card {
      background: var(--color-card);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color 0.25s, box-shadow 0.25s;
    }
    .card:hover { border-color: var(--color-pink); }
    .card.open { border-color: rgba(255,72,196,0.6); box-shadow: 0 12px 40px rgba(180,40,255,0.15); }

    .card-header {
      display: flex; align-items: center; gap: 1rem;
      padding: 1.4rem 1.5rem; cursor: pointer;
      user-select: none;
    }
    .card-icon { font-size: 1.6rem; flex-shrink: 0; }
    .card-header-text { flex: 1; }
    .card-header-text h2 {
      font-family: var(--font-display);
      font-size: 1.15rem; font-weight: 700;
      color: var(--color-text); margin-bottom: 0.25rem;
    }
    .card-header-text p { font-size: 0.88rem; color: var(--color-muted); }
    .card-chevron {
      font-size: 0.9rem; color: var(--color-muted);
      transition: transform 0.3s; flex-shrink: 0;
    }
    .card.open .card-chevron { transform: rotate(180deg); }
    .tag {
      display: inline-block; margin-top: 0.5rem;
      font-size: 0.7rem; letter-spacing: 0.08em;
      text-transform: uppercase; padding: 0.2rem 0.6rem;
      border-radius: 999px; border: 1px solid rgba(255,72,196,0.3);
      color: #d48cff;
    }

    /* EXPAND BODY */
    .card-body {
      max-height: 0; overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
    }
    .card.open .card-body { max-height: 1200px; }
    .card-body-inner {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 1.5rem;
    }
    .card-body-inner p {
      font-size: 0.95rem; color: var(--color-muted);
      line-height: 1.7; margin-bottom: 1rem;
    }
    .card-body-inner p:last-child { margin-bottom: 0; }

    /* DRIFT SPECIFIC */
    .drift-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
    }
    @media (max-width: 600px) { .drift-layout { grid-template-columns: 1fr; } }

    .cat-portrait {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      border-radius: 0.75rem;
      border: 1px solid rgba(255,72,196,0.2);
      display: block;
    }

    .play-box {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 1rem;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,72,196,0.2);
      border-radius: 0.75rem; padding: 1.5rem;
      text-align: center;
    }
    .play-box p { font-size: 0.85rem; color: var(--color-muted); margin: 0; }
    .play-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: linear-gradient(135deg, rgba(180,40,255,0.3), rgba(255,72,196,0.3));
      border: 1px solid rgba(255,72,196,0.5);
      color: var(--color-text); font-family: var(--font-body);
      font-size: 0.9rem; font-weight: 600;
      padding: 0.65rem 1.4rem; border-radius: 999px;
      cursor: pointer; transition: background 0.2s, transform 0.15s;
      text-decoration: none;
    }
    .play-btn:hover {
      background: linear-gradient(135deg, rgba(180,40,255,0.5), rgba(255,72,196,0.5));
      transform: scale(1.04);
    }

    .drift-iframe-wrap {
      width: 100%; border-radius: 0.75rem; overflow: hidden;
      border: 1px solid rgba(255,72,196,0.2);
      position: relative;
    }
    .drift-iframe-wrap iframe {
      width: 100%; height: 480px; border: none; display: block;
    }
    .iframe-label {
      font-size: 0.72rem; color: var(--color-muted);
      text-align: center; margin-top: 0.5rem;
      letter-spacing: 0.05em; text-transform: uppercase;
    }

    /* UPLOAD SPECIFIC */
    .steps {
      display: flex; flex-direction: column; gap: 0.6rem;
      margin: 1rem 0;
    }
    .step {
      display: flex; align-items: flex-start; gap: 0.75rem;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 0.6rem; padding: 0.75rem 1rem;
    }
    .step-num {
      font-family: var(--font-display); font-weight: 900;
      font-size: 1rem; color: #d48cff; flex-shrink: 0; width: 1.2rem;
    }
    .step p { font-size: 0.88rem; color: var(--color-muted); margin: 0; line-height: 1.5; }

    footer {
      position: relative; z-index: 1;
      text-align: center; padding: 2rem;
      font-size: 0.78rem; color: rgba(219,200,255,0.4);
    }
      /* generative drift mini-demo — matches the hero's look & soul */
    .drift-demo { --lvl: 0; --bass: 0; max-width: 420px; margin: 0 auto; text-align: center; }
    .drift-stage {
      position: relative; aspect-ratio: 1/1; border-radius: 1rem; overflow: hidden;
      border: 1px solid rgba(255,72,196,0.25);
      background: radial-gradient(circle at 50% 40%, #1a0a2e, #06030b 70%);
      display: flex; align-items: center; justify-content: center;
    }
    /* psychedelic backdrop, reacts to overall level */
    .drift-bg {
      position: absolute; inset: -20%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,72,196,0.5), transparent 55%),
        radial-gradient(circle at 72% 38%, rgba(93,253,255,0.4), transparent 52%),
        radial-gradient(circle at 50% 78%, rgba(155,91,255,0.5), transparent 55%);
      filter: saturate(2.2) blur(14px) hue-rotate(calc(var(--lvl) * 220deg));
      opacity: calc(0.32 + var(--lvl) * 0.6);
      transform: scale(calc(1 + var(--bass) * 0.18));
      animation: driftHue 16s linear infinite;
      transition: opacity 0.08s linear, transform 0.08s linear;
    }
    @keyframes driftHue { to { filter: saturate(2.2) blur(14px) hue-rotate(360deg); } }
    /* the floating circular portrait */
    .drift-portrait {
      position: relative; z-index: 2; width: 62%; aspect-ratio: 1/1;
      animation: heroFloat 7s ease-in-out infinite;
    }
    @keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }
    .drift-frame {
      position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
      border: 4px solid rgba(255,255,255,0.16);
      box-shadow: 0 0 0 calc(8px + var(--bass) * 26px) rgba(255,72,196,calc(0.05 + var(--bass) * 0.4)), 0 20px 50px rgba(0,0,0,0.5);
      filter: brightness(calc(1 + var(--lvl) * 0.18)) saturate(calc(1 + var(--lvl) * 0.4));
      transition: box-shadow 0.07s linear, filter 0.07s linear;
    }
    /* spinning conic color field — the signature overlay from the hero */
    .drift-frame::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(255,72,196,0.22), rgba(93,253,255,0.08), rgba(123,255,183,0.16), rgba(255,72,196,0.22));
      mix-blend-mode: screen; animation: spinField 6s linear infinite;
      opacity: calc(0.5 + var(--lvl) * 0.5);
    }
    @keyframes spinField { to { transform: rotate(360deg); } }
    .drift-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); filter: url(#catWarp) hue-rotate(calc(var(--lvl) * 220deg)) saturate(calc(1 + var(--bass) * 0.9)); will-change: filter, transform; }
    .drift-play {
      position: absolute; z-index: 3; width: 62px; height: 62px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.6); background: rgba(6,3,11,0.45);
      backdrop-filter: blur(4px); color: #fff; font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.15s, background 0.2s, opacity 0.25s;
    }
    .drift-play:hover { transform: scale(1.08); background: rgba(255,72,196,0.5); }
    .drift-demo.playing .drift-play { opacity: 0.18; }
    .drift-demo.playing .drift-play:hover { opacity: 1; }
    .drift-status { font-size: 0.82rem; color: var(--color-muted); margin-top: 0.9rem; line-height: 1.5; }
    .drift-fulllink {
      display: inline-block; margin-top: 0.6rem; font-size: 0.8rem; color: #d48cff;
      text-decoration: none; border-bottom: 1px solid rgba(212,140,255,0.4);
    }
    .drift-fulllink:hover { color: #fff; }

    /* security list + stats + facts (upload & website cards) */
    .sec-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
    .sec-item { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; color: var(--color-muted); }
    .sec-ico { flex: 0 0 auto; font-size: 1rem; }
    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 1rem 0 0.5rem; }
    .stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.7rem; padding: 0.7rem 0.4rem; text-align: center; }
    .stat-num { font-size: 1.05rem; font-weight: 700; color: var(--color-text); white-space: nowrap; }
    .stat-unit { font-size: 0.7rem; opacity: 0.7; margin-left: 1px; }
    .stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-top: 0.2rem; }
    .stat-foot { font-size: 0.74rem; color: var(--color-muted); opacity: 0.8; margin-bottom: 0.5rem; }
    .mini-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #d48cff; margin: 1.1rem 0 0.2rem; }
    .fact-list { margin: 0.4rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .fact-list li { font-size: 0.86rem; line-height: 1.5; color: var(--color-muted); }
    code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 0.05em 0.35em; font-size: 0.85em; color: #ffd65e; }
    @media (max-width: 540px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
  
.txt-bright{color:var(--color-text)}
.card-launch{display:inline-block;margin-top:1.1rem;padding:0.6rem 1.3rem;border-radius:999px;background:linear-gradient(135deg,rgba(255,72,196,0.9),rgba(155,91,255,0.9));color:#fff;text-decoration:none;font-weight:700;font-size:0.88rem;transition:transform 0.15s,filter 0.2s}
.card-launch:hover{transform:translateY(-2px);filter:brightness(1.1)}