:root {
      --bg:#0d0c13;
      --surface:#17151f;
      --surface-2:#211e2b;
      --text:#ffffff;
      --muted:#aaa5b5;
      --brand:#ff2f74;
      --brand-2:#9b5cff;
      --line:rgba(255,255,255,.1);
      --shadow:0 20px 50px rgba(0,0,0,.32);
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 75% -10%, rgba(155,92,255,.2), transparent 32rem),
        radial-gradient(circle at -10% 15%, rgba(255,47,116,.15), transparent 28rem),
        var(--bg);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    button,a { -webkit-tap-highlight-color:transparent; }
    a { color:inherit; text-decoration:none; }
    img { display:block; width:100%; }
    .topbar {
      position:sticky; top:0; z-index:30;
      display:flex; align-items:center; justify-content:space-between;
      min-height:68px; padding:12px clamp(16px,4vw,56px);
      background:rgba(13,12,19,.82);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
    }
    .brand { display:flex; align-items:center; gap:11px; font-weight:900; letter-spacing:-.4px; }
    .brand-mark {
      width:42px; height:42px; border-radius:10px;
      display:block; overflow:hidden; flex:0 0 42px;
      background:#fff;
      box-shadow:0 10px 26px rgba(255,47,116,.22);
    }
    .brand-mark img { width:100%; height:100%; display:block; object-fit:cover; }
    .top-actions { display:flex; align-items:center; gap:10px; }
    .text-link { color:var(--muted); font-size:14px; }
    .button {
      border:0; cursor:pointer; color:white; font-weight:800;
      border-radius:12px; padding:13px 18px;
      display:inline-flex; align-items:center; justify-content:center; gap:9px;
      transition:.2s transform,.2s filter,.2s background;
    }
    .button:hover { transform:translateY(-1px); filter:brightness(1.05); }
    .button-primary { background:linear-gradient(135deg,var(--brand),#ff4d46); box-shadow:0 12px 30px rgba(255,47,116,.28); }
    .button-secondary { background:var(--surface-2); border:1px solid var(--line); }
    .hero {
      max-width:1280px; margin:auto;
      padding:clamp(48px,7vw,92px) clamp(16px,4vw,56px) 26px;
      display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:48px;
    }
    .eyebrow {
      display:inline-flex; gap:8px; align-items:center;
      color:#ffd4e1; background:rgba(255,47,116,.12); border:1px solid rgba(255,47,116,.3);
      padding:8px 12px; border-radius:999px; font-size:13px; font-weight:800;
    }
    .eyebrow i { width:8px; height:8px; border-radius:50%; background:#38e37f; box-shadow:0 0 0 5px rgba(56,227,127,.13); }
    h1 { font-size:clamp(42px,6.5vw,82px); line-height:.98; margin:24px 0 20px; letter-spacing:-3.5px; }
    .gradient-text {
      background:linear-gradient(90deg,#ff4e8c,#ff8b5e,#a874ff);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
      display:inline;
    }
    .hero-copy { max-width:660px; color:var(--muted); font-size:clamp(17px,2vw,20px); line-height:1.65; }
    .hero-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
    .hero-note { margin-top:15px; color:#86808f; font-size:12px; }
    .hero-visual {
      position:relative; min-height:520px; border-radius:32px; overflow:hidden;
      background:linear-gradient(145deg,#282038,#120f19);
      border:1px solid var(--line); box-shadow:var(--shadow);
    }
    .hero-visual::before {
      content:""; position:absolute; inset:-30%;
      background:conic-gradient(from 120deg,transparent,rgba(255,47,116,.55),transparent,rgba(155,92,255,.45),transparent);
      animation:spin 14s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .phone {
      position:absolute; width:min(72%,330px); aspect-ratio:9/18.5; left:50%; top:50%;
      transform:translate(-50%,-50%) rotate(5deg);
      padding:12px; border-radius:46px; background:#06060a; box-shadow:0 35px 90px rgba(0,0,0,.6);
      border:1px solid rgba(255,255,255,.18);
    }
    .phone-screen {
      height:100%; border-radius:35px; overflow:hidden;
      background:
        radial-gradient(circle at 50% 20%,rgba(255,255,255,.2),transparent 28%),
        linear-gradient(165deg,#ff5a92 0%,#8f43e7 46%,#21102c 100%);
      position:relative;
    }
    .phone-screen svg { position:absolute; inset:0; width:100%; height:100%; }
    .floating-chip {
      position:absolute; display:flex; align-items:center; gap:9px; z-index:2;
      padding:12px 15px; border-radius:16px; background:rgba(28,24,39,.85);
      border:1px solid var(--line); backdrop-filter:blur(12px); box-shadow:var(--shadow);
      font-size:13px; font-weight:800;
    }
    .chip-one { left:7%; top:17%; }
    .chip-two { right:5%; bottom:18%; }
    .dot { width:9px; height:9px; border-radius:50%; background:#38e37f; }
    .section { max-width:1280px; margin:auto; padding:46px clamp(16px,4vw,56px) 80px; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
    .section-head h2 { margin:0; font-size:clamp(28px,4vw,44px); letter-spacing:-1.5px; }
    .section-head p { margin:8px 0 0; color:var(--muted); }
    .filter-row { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
    .filter {
      padding:9px 14px; border-radius:999px; color:var(--muted); background:var(--surface);
      border:1px solid var(--line); font-size:13px; font-weight:750;
    }
    .filter.active { color:#fff; background:rgba(255,47,116,.15); border-color:rgba(255,47,116,.42); }
    .creator-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
    .creator-card {
      background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden;
      transition:.22s transform,.22s border-color,.22s box-shadow;
    }
    .creator-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.22); box-shadow:var(--shadow); }
    .media { position:relative; aspect-ratio:3/4; overflow:hidden; background:#211e2b; }
    .media img { height:100%; object-fit:cover; transition:.35s transform; }
    .creator-card:hover .media img { transform:scale(1.025); }
    .live-badge,.quality-badge {
      position:absolute; top:12px; border-radius:8px; padding:7px 9px; font-size:11px; font-weight:900;
      backdrop-filter:blur(10px);
    }
    .live-badge { left:12px; background:rgba(255,31,92,.9); display:flex; align-items:center; gap:6px; }
    .live-badge i { width:6px; height:6px; background:white; border-radius:50%; }
    .quality-badge { right:12px; background:rgba(13,12,19,.7); }
    .favorite {
      position:absolute; right:12px; bottom:12px; width:42px; height:42px; border:1px solid rgba(255,255,255,.26);
      border-radius:50%; color:white; background:rgba(13,12,19,.55); font-size:24px; cursor:pointer;
    }
    .creator-info { display:flex; align-items:center; justify-content:space-between; padding:15px 16px 17px; gap:12px; }
    .creator-info h3 { margin:0 0 4px; font-size:17px; }
    .creator-info p { margin:0; font-size:12px; color:var(--muted); }
    .viewers { color:#d9d3e2; font-size:12px; }
    .viewers::before { content:"●"; color:#38e37f; margin-right:6px; }
    .download-banner {
      max-width:1168px; margin:0 auto 90px; padding:clamp(26px,5vw,52px);
      border-radius:30px; border:1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 85% 20%,rgba(255,255,255,.16),transparent 22rem),
        linear-gradient(135deg,#ff2f74,#7f41e8);
      display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden;
      box-shadow:var(--shadow);
    }
    .download-banner h2 { margin:0 0 10px; font-size:clamp(28px,4vw,48px); letter-spacing:-1.5px; }
    .download-banner p { margin:0; color:rgba(255,255,255,.8); line-height:1.6; max-width:620px; }
    footer { border-top:1px solid var(--line); padding:30px clamp(16px,4vw,56px) 42px; color:#7f7988; text-align:center; font-size:12px; }
@media (max-width:900px) {
      .hero { grid-template-columns:1fr; }
      .hero-visual { min-height:440px; }
      .creator-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .download-banner { margin-left:16px; margin-right:16px; }
    }
    @media (max-width:620px) {
      .topbar { min-height:62px; }
      .text-link { display:none; }
      .top-actions .button { padding:11px 13px; font-size:13px; }
      h1 { letter-spacing:-2.2px; }
      .hero { padding-top:40px; gap:30px; }
      .hero-visual { min-height:390px; border-radius:24px; }
      .floating-chip { font-size:11px; padding:10px 12px; }
      .creator-grid { grid-template-columns:1fr 1fr; gap:10px; }
      .creator-card { border-radius:16px; }
      .creator-info { padding:11px 10px 13px; }
      .creator-info h3 { font-size:15px; }
      .creator-info p { display:none; }
      .live-badge,.quality-badge { top:8px; padding:6px 7px; }
      .live-badge { left:8px; }
      .quality-badge { right:8px; }
      .favorite { right:8px; bottom:8px; width:36px; height:36px; font-size:20px; }
      .download-banner { flex-direction:column; align-items:flex-start; border-radius:24px; }
      .download-banner .button { width:100%; }
      .section { padding-bottom:56px; }
    }