html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}


::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}


hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}


audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}


fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


textarea {
  resize: vertical;
}


:root{
  --bg:#0b0f14;
  --bg-soft:#0f1620;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --brand:#7C5CFF;
  --brand-2:#00E5A8;
  --surface:#111827;
  --border:#223046;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg, #0b0f14) 0%,#0b1220 100%);
  color:var(--text, #e6edf3);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{ width:min(1120px, 92%); margin-inline:auto; }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; }

/* Header */
.site-header{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(180deg,rgba(11,15,20,.8),rgba(11,15,20,.4)); border-bottom:1px solid rgba(255,255,255,.06); }
.header-inner{ display:flex; align-items:center; justify-content:center; gap:1rem;  }
.nav{ display:none; gap:1rem; }
.nav a{ color:var(--muted, #9fb0c3); text-decoration:none; font-weight:500; }
.nav a:hover{ color:#fff; }
.cta .btn{ margin-left:.5rem; }

@media (min-width: 768px){ .nav{ display:flex; } }

/* Buttons */
.btn{ background:var(--brand, #7C5CFF); color:#fff; border:none; padding:.9rem 1.1rem; border-radius:12px; font-weight:700; cursor:pointer; box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.35)); transition:.2s transform, .2s opacity; }
.btn:hover{ transform:translateY(-1px); }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.16); box-shadow:none; }
.btn.small{ padding:.55rem .8rem; border-radius:10px; font-size:.9rem; }

/* Hero */
.hero{ padding:clamp(32px, 6vw, 80px) 0; }
.hero-inner{ display:grid; grid-template-columns: 1fr; gap:28px; align-items:center; }
.hero-copy h1{ font-size: clamp(28px, 6vw, 54px); line-height:1.05; margin:.2rem 0 1rem; }
.grad{ background: linear-gradient(90deg, var(--brand, #7C5CFF), var(--brand-2, #00E5A8)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--muted, #9fb0c3); font-size: clamp(16px, 2.8vw, 18px); max-width: 58ch; }
.meta{ color:var(--muted, #9fb0c3); margin-top:.75rem; font-size:.95rem; }

.store-buttons{ display:flex; gap:.8rem; margin-top:1.25rem; flex-wrap:wrap; }
.store{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.12); border-radius:12px; text-decoration:none; color:#fff; background:rgba(255,255,255,.04); }
.store .store-icon{ font-size:1.3rem; line-height:1; }
.store .play-icon{ width:20px; height:20px; }
.store .store-text{ display:flex; flex-direction:column; line-height:1; }
.store .store-text small{ color:var(--muted); font-weight:500; }

/* Phone preview */
.hero-device{ display:flex; flex-direction:column; align-items:center; }
.phone-frame{ width:min(380px, 92vw); aspect-ratio:9/19.5; border-radius:36px; padding:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,#0e1420,#0a0f16); box-shadow: var(--shadow); position:relative; }
.status-bar{ height:18px; border-radius:12px; background:rgba(255,255,255,.06); margin-bottom:10px; }
.feed{ position:relative; height:calc(100% - 28px); overflow:hidden; border-radius:24px; background:#000; }
.card{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; padding:16px; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; will-change: transform, opacity; border-radius:24px; }
.card-media{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.9) saturate(1.1); }
.bg1{ background-image: radial-gradient(1200px 600px at 70% 120%, rgba(0,229,168,.6), transparent 40%); background-color:#1b2333; }
.bg2{ background-image: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.5), transparent 40%); background-color:#231b2f; }
.bg3{ background-image: radial-gradient(1200px 600px at 50% 20%, rgba(255,103,77,.45), transparent 40%); background-color:#2a1b1b; }
.card-info{ position:relative; z-index:2; backdrop-filter:saturate(120%) blur(6px); background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)); padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.12); }
.card h3{ margin:0 0 6px; font-size:1.2rem; }
.card p{ margin:0 0 10px; color:#e5e7eb; }

.hint{ color:var(--muted, #9fb0c3); font-size:.9rem; margin-top:.6rem; }

/* Features */
.features{ padding: clamp(32px, 6vw, 80px) 0; background: linear-gradient(180deg, #0a0f16, #0f1620); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.grid-3{ display:grid; grid-template-columns:1fr; gap:18px; }
.feat{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius, 14px); padding:18px; }
.feat-icon{ font-size:1.4rem; margin-bottom:.3rem; }

@media (min-width: 800px){ .hero-inner{ grid-template-columns: 1.1fr .9fr; gap:42px; }
  .grid-3{ grid-template-columns: repeat(3,1fr); gap:22px; }
}

/* How */
.how{ padding: clamp(32px, 6vw, 80px) 0; }
.how-inner{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
.how-copy h2{ margin:0 0 .6rem; font-size: clamp(22px, 4.6vw, 36px); }
.how-copy ol{ color:var(--muted, #9fb0c3); line-height:1.7; padding-left:1.3rem; }
.how-visual{ display:flex; justify-content:center; }
.stack{ position:relative; width:min(420px, 92vw); height:280px; }
.stack-card{ position:absolute; inset:0; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,229,168,.18)); box-shadow:var(--shadow);}
.stack-card.s1{ transform: rotate(-6deg) translate(-10px, 12px); }
.stack-card.s2{ transform: rotate(3deg) translate(8px, -4px); }
.stack-card.s3{ transform: rotate(0deg); }

@media (min-width: 900px){ .how-inner{ grid-template-columns:1fr 1fr; } }

/* FAQ */
.faq{ padding: clamp(32px, 6vw, 80px) 0; }
.faq details{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius, 14px); padding:14px 16px; margin:10px 0; }
.faq summary{ cursor:pointer; font-weight:600; }
.faq p{ color:var(--muted); }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); padding:18px 0 28px; color:var(--muted, #9fb0c3); }
.footer-inner{ display:flex; flex-direction:column; gap:.6rem; justify-content:space-between; align-items:flex-start; }
.footer-links{ display:flex; gap:1rem; }
.footer-links a{ color:var(--muted); text-decoration:none; }
@media (min-width: 700px){ .footer-inner{ flex-direction:row; align-items:center; } }

/* Feed interaction states handled by JS */
.card{ opacity:.2; transform: translateY(20px) scale(.96); }
.card.active{ opacity:1; transform: translateY(0) scale(1); }
.card.prev{ opacity:.6; transform: translateY(-8px) scale(.97); }
.card.next{ opacity:.8; transform: translateY(8px) scale(.98); }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


:root{
  --bg:#0b0f14;
  --bg-soft:#0f1620;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --brand:#7C5CFF;
  --brand-2:#00E5A8;
  --surface:#111827;
  --border:#223046;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* TikTok-like overlay and Tetris visuals */
/* Tetris background grid inside phone */
.bg-tetris{ position:absolute; inset:0; background:#0b0f14; }
.bg-tetris .tetris-grid{ position:absolute; inset:0; background-image:
  linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 10% 100%, 100% 5%;
  mix-blend-mode: screen;
}
.bg-tetris .tetris-blocks{ position:absolute; inset:0; }
.bg-tetris .block{ position:absolute; width:10%; height:5%; left: calc(var(--x) * 10%); top: calc(var(--y) * 5%); border-radius:4px; box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.bg-tetris .block.o{ background:#f5d94e; }
.bg-tetris .block.i{ background:#4ec6f5; }
.bg-tetris .block.i2{ background: #17c808; }
.bg-tetris .block.t{ background:#b76ef0; }
.bg-tetris .block.l{ background:#f59e0b; }

/* Right-side actions stack */
.actions{ position:absolute; right:10px; bottom:82px; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:3; }
.action-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); color:#fff; padding:8px; border-radius:16px; cursor:pointer; transition: transform .2s ease, background-color .2s ease; }
.action-btn:hover{ transform: translateY(-1px); background:rgba(0,0,0,.45); }
.action-btn .icon{ width:24px; height:24px; display:block; }
.action-label{ font-size:.75rem; color:#e5e7eb; }
.avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--brand, #7C5CFF), var(--brand-2, #00E5A8)); border:2px solid #fff2; box-shadow:0 2px 10px rgba(0,0,0,.4); }

/* Bottom music bar */
.music-bar{ position:absolute; left:12px; right:12px; bottom:14px; display:flex; align-items:center; gap:10px; z-index:3; padding:8px 10px; border-radius:14px; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.46)); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px) saturate(120%); }
.music-bar .disc{ width:22px; height:22px; border-radius:50%; background: conic-gradient(from 0deg, #e11d48, #22c55e, #3b82f6, #e11d48); animation: spin 6s linear infinite; box-shadow: inset 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,.4); }
.music-bar .track{ font-size:.85rem; color:#f3f4f6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@keyframes spin{ to{ transform: rotate(360deg); } }