/* Splizix Tweaks — neon cyberpunk. Deliberately unlike any sibling site.
   Boxes use HUD corner-brackets; buttons keep the corner-cut from the hero. */

:root {
  --pink: #FF2C8D;
  --pink-soft: #FF5CAA;
  --pink-deep: #DB1C74;
  --black: #0B090B;
  --panel: #141016;
  --panel-2: #1B1420;
  --edge: rgba(255, 44, 141, 0.22);
  --edge-hot: rgba(255, 44, 141, 0.6);
  --ink: #F4EFF4;
  --dim: #A99AA8;
  --mono: "Chakra Petch", monospace;
  --body: "Space Grotesk", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  /* Short pages (download, success, legal) otherwise leave the footer
     floating mid-screen with dead space beneath it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* CRT scanlines over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Nebula: pink/violet clouds + star specks, anchored to the top of the page,
   dissolving as you scroll into the dark */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1600px;
  /* Absolutely positioned children still expand the scrollable area, so on
     short pages an unclamped 1600px layer adds dead scroll below the footer. */
  max-height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* star specks */
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 22%, rgba(255, 92, 170, 0.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 6%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 18%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 11%, rgba(255, 92, 170, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 24%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 7%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 33%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 31%, rgba(255, 92, 170, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 37% 27%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    /* nebula clouds */
    radial-gradient(ellipse 900px 560px at 72% 4%, rgba(255, 44, 141, 0.26), transparent 62%),
    radial-gradient(ellipse 760px 520px at 18% 10%, rgba(147, 51, 234, 0.24), transparent 65%),
    radial-gradient(ellipse 540px 420px at 46% 24%, rgba(219, 28, 116, 0.18), transparent 65%),
    radial-gradient(ellipse 820px 480px at 85% 34%, rgba(147, 51, 234, 0.14), transparent 65%),
    radial-gradient(ellipse 700px 460px at 10% 42%, rgba(255, 44, 141, 0.12), transparent 65%),
    radial-gradient(ellipse 1200px 760px at 50% -8%, rgba(88, 28, 135, 0.30), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

::selection { background: var(--pink); color: var(--black); }

a { color: inherit; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar: solid, hard-edged ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 9, 11, 0.92);
  border-bottom: 2px solid var(--pink);
  box-shadow: 0 0 24px rgba(255, 44, 141, 0.25);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.wordmark img { width: 34px; height: 34px; }
.wordmark span {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255, 44, 141, 0.8);
}
nav { display: flex; gap: 26px; }
nav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.15s, text-shadow 0.15s;
}
nav a:hover, nav a.on {
  color: var(--pink-soft);
  text-shadow: 0 0 10px rgba(255, 92, 170, 0.7);
}
@media (max-width: 720px) { nav { gap: 14px; } nav a { font-size: 0.66rem; } }

/* Below ~620px the wordmark plus five nav links no longer fit on one 60px
   row, and the nav was running off-screen on every page. Stack the bar and
   let the links wrap instead. */
@media (max-width: 620px) {
  .bar {
    height: auto;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }
  /* 0.62rem rendered under 10px - too small to read or tap. There is room
     to spare once the bar stacks, so size back up and pad for touch. */
  nav a { font-size: 0.72rem; letter-spacing: 0.1em; padding: 4px 0; }
}

/* Single-section pages (download, success, legal) have far less content than
   the viewport, which left the heading crammed under the nav with all the
   slack dumped below. Absorb the slack around the content instead.
   On a page taller than the viewport there is no free space, so this has no
   effect and nothing can be clipped. */
.page-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* .wrap cancels the 84px section padding (class beats element), which is why
     the heading sat flush against the nav. Guarantee breathing room even when
     the page is too tall to have any slack to centre. */
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Nothing should ever be able to push the page sideways. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* ---------- buttons: sharp corner-cut (hero-approved) ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 14px 28px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-hot {
  background: linear-gradient(120deg, var(--pink), var(--pink-deep));
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 44, 141, 0.55);
}
.btn-ghost {
  background: var(--panel-2);
  color: var(--pink-soft);
  border: 1px solid var(--edge);
}

/* ---------- hero: left-aligned, glitch wordmark (unchanged) ---------- */
.hero { padding: 90px 0 70px; position: relative; }
.hero .tag {
  font-family: var(--mono);
  color: var(--pink-soft);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 18px;
}
.glitch {
  font-family: var(--mono);
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.glitch em {
  font-style: normal;
  color: var(--pink);
  text-shadow:
    0 0 18px rgba(255, 44, 141, 0.9),
    0 0 60px rgba(255, 44, 141, 0.5);
  animation: neon-flicker 4s infinite;
}
@keyframes neon-flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  93%, 95% { opacity: 0.55; }
}
.hero p.sub {
  max-width: 520px;
  color: var(--dim);
  font-size: 1.12rem;
  margin: 22px 0 34px;
}
.hero .ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .strip {
  margin-top: 46px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}
.hero .strip b { color: var(--pink-soft); font-weight: 700; }

/* ---------- HUD bracket boxes (the new shape) ---------- */
.box {
  position: relative;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  padding: 26px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.box::before,
.box::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  transition: width 0.2s, height 0.2s;
  pointer-events: none;
}
.box::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid var(--pink);
  border-left: 2px solid var(--pink);
}
.box::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid var(--pink);
  border-right: 2px solid var(--pink);
}
.box:hover {
  border-color: var(--edge-hot);
  box-shadow: 0 0 26px rgba(255, 44, 141, 0.22);
  transform: translateY(-3px);
}
.box:hover::before,
.box:hover::after { width: 28px; height: 28px; }

/* ---------- sections (clipzz-style rhythm and flow) ---------- */
section { padding: 84px 0; }
section:nth-of-type(even) {
  background: rgba(255, 44, 141, 0.025);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.k {
  font-family: var(--mono);
  color: var(--pink);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
}
h2.head {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 44px;
  line-height: 1.15;
  text-align: center;
}
h2.head em {
  font-style: normal;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(255, 44, 141, 0.7);
}

/* why grid — 4-up like the flagship site */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
.why-grid .num {
  font-family: var(--mono);
  color: var(--pink);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 10px;
}
.why-grid h3 { font-size: 1.02rem; margin-bottom: 8px; }
.why-grid p { color: var(--dim); font-size: 0.9rem; }

/* app screenshot — capped, centered */
.shot {
  border: 2px solid var(--pink);
  box-shadow: 0 0 34px rgba(255, 44, 141, 0.35);
  background: var(--panel-2);
  aspect-ratio: 16 / 9;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8rem;
  overflow: hidden;
}
/* The empty slot keeps its 16/9 placeholder shape, but a real screenshot is
   not 16/9 - cover would crop the app's title bar and status bar off. Let the
   image set the height instead. */
.shot.filled { aspect-ratio: auto; }
.shot img { width: 100%; height: auto; object-fit: contain; display: block; }
.shot-stats {
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.shot-stats b { color: var(--pink-soft); }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier { display: flex; flex-direction: column; }
.tier.hot {
  border-color: var(--pink);
  box-shadow: 0 0 30px rgba(255, 44, 141, 0.28);
}
.tier .lvl {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
}
.tier h3 { font-family: var(--mono); font-size: 1.5rem; margin: 6px 0 2px; }
.tier .price {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(255, 44, 141, 0.7);
  margin: 12px 0 4px;
}
.tier .per { color: var(--dim); font-size: 0.8rem; margin-bottom: 18px; }
.tier ul { list-style: none; flex: 1; margin-bottom: 22px; }
.tier li {
  padding: 7px 0 7px 22px;
  position: relative;
  color: var(--dim);
  font-size: 0.92rem;
  border-bottom: 1px dashed rgba(255, 44, 141, 0.15);
}
.tier li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--pink);
  font-family: var(--mono);
  font-weight: 700;
}
.tier .btn { text-align: center; }

/* 3-step setup */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps .box { text-align: center; padding: 34px 26px; }
.steps .stepno {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255, 44, 141, 0.7);
  display: block;
  margin-bottom: 12px;
}
.steps h3 { font-family: var(--mono); font-size: 1.05rem; margin-bottom: 8px; }
.steps p { color: var(--dim); font-size: 0.92rem; }

/* faq */
details.box { padding: 0; margin-bottom: 14px; }
summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.95rem;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--pink); font-weight: 700; }
details[open] summary::before { content: "− "; }
details .a { padding: 0 22px 18px; color: var(--dim); font-size: 0.95rem; }
.faq-more { text-align: center; margin-top: 34px; color: var(--dim); font-size: 0.95rem; }

/* download page */
.dl-box { text-align: center; padding: 48px 26px; }
.dl-box .btn { font-size: 1rem; padding: 18px 42px; }
.note {
  font-size: 0.88rem;
  color: var(--dim);
  background: var(--panel-2);
  border-left: 3px solid var(--pink);
  padding: 14px 18px;
  margin-top: 26px;
  text-align: left;
}
.note b { color: var(--ink); }

/* legal */
.legal h1 { font-family: var(--mono); font-size: 2rem; margin-bottom: 6px; }
.legal .updated { color: var(--dim); font-size: 0.85rem; margin-bottom: 34px; font-family: var(--mono); }
.legal h2 { font-family: var(--mono); font-size: 1.1rem; color: var(--pink-soft); margin: 28px 0 10px; }
.legal p, .legal li { color: var(--dim); font-size: 0.95rem; }
.legal ul { padding-left: 22px; margin: 8px 0; }

/* final CTA strip */
.strip-cta {
  text-align: center;
  padding: 84px 24px;
  border-top: 1px solid var(--edge);
  background:
    repeating-linear-gradient(45deg, rgba(255, 44, 141, 0.04) 0 12px, transparent 12px 24px),
    var(--panel);
}
.strip-cta h2 {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 24px;
}
.strip-cta .fine-print {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

/* footer */
footer {
  padding: 44px 0 60px;
  color: var(--dim);
  font-size: 0.85rem;
  /* Absorbs the leftover height so the footer sits at the bottom of the
     viewport on short pages, and directly after content on long ones. */
  margin-top: auto;
}
footer .cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
footer a { color: var(--dim); text-decoration: none; margin-right: 18px; }
footer a:hover { color: var(--pink-soft); }
footer .fine { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.6s; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .glitch em { animation: none; }
}