@charset "UTF-8";

/* Fonts — self-hosted, same faces the app ships with. */
@font-face {
  font-family: "Rubik Mono One";
  src: url("../../assets/fonts/RubikMonoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../../assets/fonts/Karla-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../../assets/fonts/Karla-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Copperplate Gothic Bold — the wordmark face from the store artwork.
   Renders lowercase as small caps, which is what gives "MillionTracker"
   its engraved look. */
@font-face {
  font-family: "Copperplate Gothic";
  src: url("../../assets/fonts/COPRGTB.TTF") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Bebas Neue ships a single 400 weight; headings ask for 900 so the browser
   synthesises the extra heft (see the h1/h2/h3 rule). */
@font-face {
  font-family: "Bebas Neue";
  src: url("../../assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --gold: #FFCC00;
  --ferrari: #FF0000;
  --blue: #3C91E6;
  --red-deep: #DA2C38;
  --ink-900: #081217;
  --ink-800: #0D1A24;
  --ink-700: #11202D;
  --ink-600: #162A3C;
  --ink-500: #1C354A;
  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.45);
  --font-logo: "Copperplate Gothic", "Copperplate", Georgia, serif;
  --font-display: "Bebas Neue", system-ui, sans-serif;
  --font-mono: "Rubik Mono One", monospace;
  --font-body: "Karla", system-ui, sans-serif;
  --wrap: 1120px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--ink-700);
  background-image: radial-gradient(circle at 50% 35%, rgba(22, 42, 60, 0.85) 0%, rgba(8, 18, 23, 0.94) 70%), url("../../assets/img/diamond-bg.png");
  background-repeat: no-repeat, repeat;
  background-attachment: fixed;
  background-size: cover, auto;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
a { color: var(--gold); }
/* Bebas Neue has exactly one weight, and because the @font-face declares it as
   400 the browser matches it exactly and never synthesises bold — measured:
   weight 400 and 900 render identical advance widths. Stroking the glyph in
   currentColor is what actually adds heft, and it costs no layout width. The
   stroke is in em so it stays proportional from a 3rem h2 down to a 1.2rem h3. */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 850;
  line-height: 1.05; margin: 0 0 0.5em; letter-spacing: 0.1em;
}
h2, h3 { -webkit-text-stroke: 0.019em currentColor; paint-order: stroke fill; }
.stripe {
  position: fixed; top: -20vh; width: 30vw; height: 140vh;
  background-color: var(--ferrari); transform: rotate(14deg);
  pointer-events: none; z-index: 0; opacity: 0.55;

}
.stripe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/diamond-bg.png");
  background-size: 26px;
  opacity: 0.24;
}
.stripe--left { left: -26vw; }
.stripe--right { right: -26vw; }
.sticky-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background-color: rgba(8, 18, 23, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-500); display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px; transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0;
  transform: translateY(-100%); pointer-events: none; z-index: 1000;
}
.sticky-header.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-header .logo { width: 40px; height: auto; display: block; }
.sticky-header nav { display: flex; gap: 28px; align-items: center; }
.sticky-header nav a { color: var(--text-soft); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; transition: color 0.2s ease; }
.sticky-header nav a:hover { color: var(--gold); }
.sticky-header nav a.nav-cta { background: var(--gold); color: var(--ink-900); padding: 8px 18px; border-radius: 999px; }
.sticky-header nav a.nav-cta:hover { background: #ffd633; color: var(--ink-900); }
header.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; padding: 80px 24px 60px; }
.logo-large { width: 190px; height: auto; margin-bottom: 28px; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.6)); }
h1 { font-family: var(--font-logo); font-weight: 700; font-size: clamp(1.9rem, 7vw, 4.4rem);
     letter-spacing: 0.06em; margin: 0 0 0.2em; color: var(--gold);
     text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55); }
.hero-tagline { font-family: var(--font-display); font-size: clamp(1.95rem, 2.6vw, 1.35rem); color: var(--text); letter-spacing: 0.04em; margin: 0 0 20px; }
.hero-sub { max-width: 620px; color: var(--text-soft); font-size: 1.1rem; margin: 0 auto 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; padding: 15px 30px; border-radius: 999px; border: 2px solid transparent; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--ink-900); }
.btn--gold:hover { background: #ffd633; }
.btn--ghost { border-color: var(--ink-500); color: var(--text); background: rgba(22, 42, 60, 0.55); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.hero-note { margin-top: 26px; font-size: 0.9rem; color: var(--text-faint); }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--text-faint); font-size: 1.5rem; text-decoration: none; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
section { position: relative; z-index: 1; padding: 110px 0; scroll-margin-top: var(--nav-h); }
section:nth-of-type(even) { background-color: rgba(13, 26, 36, 0.82); }
section:nth-of-type(odd) { background-color: rgba(8, 18, 23, 0.7); }
.section-kicker { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 0.4em; }
.section-intro { max-width: 660px; color: var(--text-soft); font-size: 1.08rem; margin-bottom: 56px; }
.center { text-align: center; }
.center .section-intro { margin-left: auto; margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.feature-grid { margin-top: 64px; }
.card { background: rgba(22, 42, 60, 0.78); border: 1px solid var(--ink-500); border-radius: 14px; padding: 30px 28px; }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5em; color: var(--text); }
.card p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }
.card-icon { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 16px; }
.store-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.store-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink-600); border: 1px solid var(--ink-500); border-radius: 12px; padding: 13px 26px; text-decoration: none; color: var(--text); transition: border-color 0.2s ease, transform 0.18s ease; text-align: left; }
.store-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
.store-btn small { display: block; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); line-height: 1.4; }
.store-btn strong { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.store-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.version-line { font-size: 0.88rem; color: var(--text-faint); margin: 0; }
/* Five 1:2 store panels will not fit in a row, and shrinking them to fit makes
   their headlines unreadable. Snap-scrolling strip keeps each one large. */
.shots-wrap { position: relative; margin-top: 64px; }
/* Pagination dots, mirroring the indicator the app itself uses under its
   chart card. Desktop has the arrows, so these are for touch only — without
   them nothing signals that the strip scrolls once the arrows are hidden. */
.shots-dots { display: none; }
.shots-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
  background: var(--ink-500); cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}
.shots-dot[aria-current="true"] { background: var(--gold); width: 22px; }
.shots-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shots-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ink-500); background: rgba(8, 18, 23, 0.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gold); font-size: 2rem; line-height: 1; padding: 0 0 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.shots-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
.shots-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shots-nav--prev { left: -10px; }
.shots-nav--next { right: -10px; }
/* At an end there is nothing to scroll to, so the button goes away entirely
   rather than sitting there inert. */
.shots-nav[disabled] { opacity: 0; pointer-events: none; }
.shots {
  display: flex; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;   /* momentum swipe on iOS < 13 */
  cursor: grab;
  scroll-snap-type: x mandatory; scroll-padding: 0 24px;
  padding-bottom: 18px; text-align: left;
  scrollbar-color: var(--ink-500) transparent;
}
/* While a mouse drag is in flight, snapping is turned off so it cannot fight
   the pointer; removing the class restores mandatory snap, which then settles
   on the nearest panel. */
.shots.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.shots.is-dragging .shot { user-select: none; }
.shots::-webkit-scrollbar { height: 8px; }
.shots::-webkit-scrollbar-track { background: transparent; }
.shots::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 999px; }
.shots::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.shots:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.shot {
  flex: 0 0 auto; width: clamp(230px, 74vw, 300px); height: auto; display: block;
  border-radius: 22px; border: 1px solid var(--ink-500);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); scroll-snap-align: center;
}
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-copy p { color: var(--text-soft); }
.about-copy p strong { color: var(--text); }
.counter-demo { background: rgba(17, 32, 45, 0.9); border: 1px solid var(--ink-500); border-radius: 22px; padding: 52px 30px; text-align: center; }
.counter-value { font-family: var(--font-mono); font-size: clamp(2.6rem, 7vw, 4rem); color: var(--text); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.counter-time { font-size: 0.88rem; color: var(--text-faint); margin-bottom: 30px; }
.counter-controls { display: flex; gap: 26px; justify-content: center; align-items: center; }
.counter-controls [hidden] { display: none; }
.round-btn { width: 74px; height: 74px; border-radius: 50%; border: none; background: var(--gold); color: #fff; font-size: 2.1rem; font-family: var(--font-body); font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 6px 0 #c9a200; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.round-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9a200; }
.demo-hint { margin: 26px 0 0; font-size: 0.85rem; color: var(--text-faint); }
.privacy-band { background: rgba(22, 42, 60, 0.85); border: 1px solid var(--ink-500); border-radius: 18px; padding: 46px 40px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; margin-top: 64px; }
.privacy-band img { width: 104px; height: auto; border-radius: 12px; }
.privacy-band h3 { margin-bottom: 0.3em; }
.privacy-band-copy { color: var(--text-soft); margin: 0; }
.privacy-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 24px; }
.privacy-list li { color: var(--text-soft); font-size: 0.97rem; padding-left: 26px; position: relative; }
.privacy-list li::before { content: "✕"; position: absolute; left: 0; color: var(--ferrari); font-weight: 700; }
.faq-list { max-width: 800px; }
details.faq { border-bottom: 1px solid var(--ink-500); padding: 4px 0; }
details.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--text); position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.6rem; line-height: 1; transition: transform 0.2s ease; }
details.faq[open] summary::after { content: "–"; }
details.faq summary:hover { color: var(--gold); }
details.faq p { margin: 0 0 22px; color: var(--text-soft); max-width: 68ch; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 12px; }
.contact-card { background: rgba(22, 42, 60, 0.78); border: 1px solid var(--ink-500); border-radius: 14px; padding: 30px 28px; text-align: left; }
.contact-card h3 { font-size: 1.1rem; }
.contact-card p { color: var(--text-soft); font-size: 0.97rem; margin: 0 0 14px; }
.contact-card a { font-weight: 700; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
footer { position: relative; z-index: 1; text-align: center; font-size: 0.9rem; color: var(--text-faint); padding: 52px 24px; background: var(--ink-900); border-top: 1px solid var(--ink-500); }
footer a { color: var(--text-soft); text-decoration: none; }
footer a:hover { color: var(--gold); }
.footer-logo { width: 34px; height: auto; opacity: 0.75; margin-bottom: 14px; }
.footer-baa { color: var(--gold); font-family: var(--font-display); font-weight: 500; }
.footer-links { margin: 0 0 6px; }
.footer-copyright { margin: 0; }
@media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: 44px; } .privacy-band { grid-template-columns: 1fr; text-align: center; justify-items: center; } .privacy-list { text-align: left; } }
@media (max-width: 640px) {
  section { padding: 80px 0; }
  .sticky-header { padding: 0 16px; }
  .sticky-header nav { gap: 16px; }
  .sticky-header nav a { font-size: 0.85rem; }
  .sticky-header nav a:not(.nav-cta) { display: none; }
  .wrap { padding: 0 20px; }
  /* Phones get the bold treatment from the store artwork: wide red bands
     dominating the screen, same geometry as desktop. Opacity stays a little
     under the desktop 0.55 so the hero copy that crosses the band keeps
     enough contrast. */
  .shots-nav { display: none; }
  .shots-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 6px; }
  .stripe { width: 46vw; opacity: 0.5; }
  /* Pushed further off-canvas than desktop: the bands stay wide, but the dark
     diagonal channel they leave down the middle opens up for the hero copy. */
  .stripe--left { left: -48vw; }
  .stripe--right { right: -48vw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

/* ---- Consent banner ---- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: rgba(8, 18, 23, 0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--ink-500);
  padding: 20px 24px;
}
.consent[hidden] { display: none; }
.consent-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.consent-text {
  margin: 0; flex: 1 1 380px; min-width: 0;
  font-size: 0.92rem; line-height: 1.55; color: var(--text-soft);
}
.consent-text strong { color: var(--text); }
.consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.consent-btn { padding: 11px 26px; font-size: 0.92rem; cursor: pointer; }
@media (max-width: 640px) {
  .consent { padding: 16px 20px; }
  .consent-inner { gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; justify-content: center; }
}
.consent-actions[hidden] { display: none; }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; width: 50px; height: 28px; flex: 0 0 auto;
  border-radius: 999px; background: var(--ink-500);
  transition: background 0.22s ease;
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--text);
  transition: transform 0.22s ease;
}
.switch-input:checked + .switch-track { background: var(--gold); }
.switch-input:checked + .switch-track .switch-thumb {
  transform: translateX(22px); background: var(--ink-900);
}
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 3px; }
.switch-text { font-size: 0.92rem; font-weight: 700; color: var(--text); white-space: nowrap; }