/* KILIZ TIPS — PUBLIC WEBSITE (v2, 1 Sep 2026)
   ===========================================================================
   A sibling of kiliz.ng. Same tokens, same type, same rhythm — kiliz.ng's
   palette IS Apple's (#1d1d1f / #6e6e73 / #d2d2d7 / #f5f5f7 / #0071e3), so
   "apple.com as inspiration" and "kiliz.ng as inspiration" are one brief.
   Where kiliz.ng carries a red accent for the wholesale business, Tips
   carries blue — the colour of the app itself — and keeps the night sky he
   chose as its one dark ground.

   The rules of the idiom, kept on purpose:
     · alternating white / grey bands, content centred, headline in the
       first viewport of every band — nothing scrolls into dead air
     · no card borders around prose; cards only for PRODUCTS (the two plans)
       and for STAT TILES (the record), exactly as kiliz.ng uses them
     · big type does the work; few words per band
     · one theme, deliberately, like kiliz.ng — a public page, not the app
   ========================================================================= */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --ground: #f5f5f7;
  --white: #ffffff;
  --blue: #0071e3;
  --blue-deep: #0058b0;
  /* kiliz.ng's brand red — reserved here for ONE action, opening the app,
     the way kiliz.ng reserves it for Order. Blue stays the colour of
     links, eyebrows and the record; red means "go". */
  --go: #e8442f;
  --go-deep: #c5341f;
  --night: #06122b;
  --night-2: #0b1d43;
  --won: #1d8f4e;
  --lost: #d7322b;
  --void: #8e8e93;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shell: 1080px;
  --narrow: 720px;
  --radius: 18px;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* An anchor jump must land the heading below the sticky bar, not under it. */
[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--white);
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.shell { width: min(var(--shell), 100% - 40px); margin: 0 auto; }
.shell-narrow { width: min(var(--narrow), 100% - 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- type scale ---------- */
.eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--blue); letter-spacing: 0; }
.eyebrow-light { color: #7cc0ff; }
.eyebrow-muted { color: var(--ink-3); }
h1 { font-size: clamp(40px, 10.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
h1 em { font-style: normal; color: #7cc0ff; }
h2 { font-size: clamp(32px, 7.5vw, 52px); line-height: 1.08; }
.h2-small { font-size: clamp(26px, 6vw, 32px); }
h3 { font-size: 20px; line-height: 1.25; }
.lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.lead-light { color: rgba(255,255,255,.78); }

.text-link { font-weight: 500; font-size: 17px; white-space: nowrap; }
.text-link span { display: inline-block; margin-left: 2px; transition: transform .2s var(--ease); }
.text-link:hover span { transform: translateX(2px); }
.text-link-light { color: #7cc0ff; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px;
  text-decoration: none; transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.button:hover { text-decoration: none; }
.button:active { transform: scale(.985); }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-deep); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #000; }
.button-white { background: #fff; color: var(--ink); }

/* THE GO BUTTON — kiliz.ng's Order button, verbatim in the parts that matter
   (1 Sep 2026: «the open app and Open Kiliz Tips should be highlighted, same
   as kiliz.ng order button»). Brand red, white text, and the same slow ring
   that swells out and fades, so the one thing the page wants you to do is the
   one thing on it that moves. Off under reduced-motion, as on kiliz.ng. */
.button-go, .nav-cta.button-go {
  background: var(--go); color: #fff;
  box-shadow: 0 0 0 0 rgba(232,68,47,.55);
  animation: goPulse 1.8s ease-out infinite;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.button-go:hover, .nav-cta.button-go:hover { background: var(--go-deep); transform: translateY(-1px); text-decoration: none; }
.button-go:active { transform: scale(.985); }
@keyframes goPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,68,47,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(232,68,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,68,47,0); }
}
@media (prefers-reduced-motion: reduce) { .button-go, .nav-cta.button-go { animation: none; } }
.button-wide { width: 100%; }

/* ---------- nav: kiliz.ng's bar ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 52px; }
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled { background: rgba(255,255,255,.92); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 28px; }
.site-nav a { color: var(--ink); font-size: 14px; font-weight: 500; opacity: .86; }
.site-nav a:hover { opacity: 1; text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
.nav-cta:hover { background: var(--blue-deep); text-decoration: none; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 52px 0 auto; padding: 8px 20px 22px; display: grid; gap: 0;
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .2s ease;
  }
  .site-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .site-nav a:last-child { border-bottom: 0; }
}

/* ---------- hero: his sky, one thought, no dead air ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night); color: #fff;
  min-height: min(88svh, 720px); display: grid; align-items: center;
  padding: clamp(56px, 10vh, 96px) 0 clamp(64px, 11vh, 110px);
}
.hero-sky {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(6,18,43,.55) 0%, rgba(6,18,43,.15) 45%, rgba(6,18,43,.92) 100%),
    url('/sky-night.jpg');
  background-size: cover; background-position: center 30%;
  /* JS drifts this a few pixels against the scroll; the overscan keeps the
     edges covered while it moves. */
  inset: -60px 0; will-change: transform;
}
.hero-inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; }
/* The moon in his sky lands mid-frame on a phone, right where the lead
   paragraph sits. A soft radial darkening behind the copy keeps the picture
   whole and the words legible — the scrim, not a text-shadow. */
.hero-inner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 140%; height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(6,18,43,.82) 0%, rgba(6,18,43,.55) 45%, rgba(6,18,43,0) 75%);
  pointer-events: none;
}
.hero-inner .lead { max-width: 38ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 8px; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 18px; }
.trust-row li {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.86);
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
}

/* ---------- the record strip: stat tiles, kiliz.ng style ---------- */
.record-strip { background: var(--white); padding: clamp(44px, 7vw, 72px) 0 clamp(36px, 6vw, 56px); border-bottom: 1px solid var(--line); }
.record-head { text-align: center; display: grid; gap: 2px; margin-bottom: 26px; }
.record-line { color: var(--ink-2); font-size: 17px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 24px 12px 20px; border-radius: var(--radius); background: var(--ground);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.stat-num { font-size: clamp(30px, 5vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; min-width: 3ch; }
.stat-num.pos { color: var(--won); }
.stat-num.neg { color: var(--lost); }
.stat span { font-size: 13px; color: var(--ink-2); }
.skel { color: transparent !important; border-radius: 8px; background: linear-gradient(90deg, #e9e9ec 0%, #f4f4f6 50%, #e9e9ec 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; display: inline-block; width: 3.2ch; height: 1em; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.record-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 18px; }
.record-foot small { color: var(--ink-3); font-size: 13px; }
.recent-results { display: flex; gap: 6px; min-height: 12px; }
.result-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--void);
  animation: dotIn .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes dotIn { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.result-dot.won { background: var(--won); }
.result-dot.lost { background: var(--lost); }
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- bands ---------- */
.band { padding: clamp(64px, 10vw, 120px) 0; }
.band-white { background: var(--white); }
.band-grey { background: var(--ground); }
.band-night { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: #fff; }
.band-night h2 { color: #fff; }
.band-head { display: grid; gap: 12px; justify-items: center; text-align: center; margin: 0 auto clamp(36px, 6vw, 64px); max-width: 720px; }
.band-head .lead { margin: 0 auto; }
.band-head-light { margin-bottom: 0; }
.band-head-light .text-link { margin-top: 6px; }

/* steps — a numbered row on the ground */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; }
.step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; }
.steps p { color: var(--ink-2); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps li { grid-template-columns: 36px 1fr; column-gap: 16px; }
  .steps li .step-n { grid-row: 1 / span 2; }
}

/* three-up features — glyph, heading, one sentence */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.three-up article { display: grid; gap: 10px; align-content: start; }
.glyph { width: 30px; height: 30px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.three-up p { color: var(--ink-2); }
@media (max-width: 760px) { .three-up { grid-template-columns: 1fr; gap: 30px; } }

/* plans — products, so cards */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 0 auto; }
.plan {
  position: relative; display: grid; gap: 8px; align-content: start;
  padding: 30px 26px 26px; border-radius: 22px; background: var(--ground);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.08); }
.plan-featured:hover { box-shadow: 0 22px 56px rgba(0,113,227,.18); }
.plan-featured { background: var(--white); border: 2px solid var(--blue); box-shadow: 0 16px 48px rgba(0,113,227,.12); }
.plan-flag { position: absolute; top: -13px; left: 26px; padding: 4px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.plan h3 { font-size: 17px; color: var(--ink-2); font-weight: 600; }
.price { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.naira { font-size: 26px; vertical-align: 14px; margin-right: 2px; font-weight: 600; }
.price-note { color: var(--ink-2); font-size: 15px; }
.plan-list { display: grid; gap: 8px; margin: 14px 0 20px; }
.plan-list li { position: relative; padding-left: 26px; font-size: 16px; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--won); border-bottom: 2px solid var(--won); transform: rotate(-45deg); }
@media (max-width: 680px) { .plans { grid-template-columns: 1fr; } }

.pay-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1080px; margin: clamp(36px, 6vw, 56px) auto 0; padding-top: clamp(28px, 5vw, 40px); border-top: 1px solid var(--line); }
.pay-ways > div { display: grid; gap: 8px; align-content: start; }
.pay-tag { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--won); padding: 4px 10px; border-radius: 999px; background: rgba(29,143,78,.1); }
.pay-tag-direct { color: #6f4b00; background: rgba(196,139,0,.12); }
.pay-tag-card { color: var(--blue); background: rgba(0,113,227,.1); }
.pay-ways h3 { font-size: 19px; }
.direct-account strong { color: var(--ink); font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: .035em; white-space: nowrap; }
.pay-ways p:not(.pay-tag) { color: var(--ink-2); font-size: 16px; }
@media (max-width: 680px) { .pay-ways { grid-template-columns: 1fr; gap: 26px; } }

/* two-col is / is-not */
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.two-col > div { display: grid; gap: 14px; align-content: start; }
.plain-list { display: grid; gap: 10px; margin-top: 6px; }
.plain-list li { position: relative; padding-left: 22px; color: var(--ink); font-size: 16px; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.plain-list-not li::before { background: transparent; border: 2px solid var(--ink-3); width: 6px; height: 6px; top: 8px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--blue); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 0 22px; color: var(--ink-2); max-width: 60ch; }
.faq details[open] p { animation: faqIn .3s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* closing */
.closing { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; padding: clamp(72px, 12vw, 128px) 0; text-align: center; }
.closing-sky { position: absolute; inset: 0; z-index: -1; opacity: .45; background: url('/sky-night.jpg') center 65% / cover; }
.closing-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,18,43,.7), rgba(6,18,43,.35) 50%, rgba(6,18,43,.85)); }
.closing-inner { display: grid; justify-items: center; gap: 16px; }
.closing-inner img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.closing h2 { color: #fff; font-size: clamp(30px, 7vw, 44px); }
.closing .button { margin-top: 8px; }

/* footer — kiliz.ng's grey footer */
.site-footer { background: var(--ground); color: var(--ink-2); padding: 44px 0 28px; font-size: 13px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.footer-brand { display: grid; gap: 10px; align-content: start; }
.brand-dark { color: var(--ink); }
.footer-brand p { max-width: 42ch; }
.footer-warning { color: var(--ink-3); }
.site-footer h3 { font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.footer-grid > div:not(.footer-brand) { display: grid; gap: 8px; align-content: start; }
.footer-grid a { color: var(--ink-2); }
.footer-grid a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); }
.footer-bottom a { color: var(--ink-3); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ===== MOTION (1 Sep 2026 — «Animate. Smoother scroll and well polished.»)
   ===========================================================================
   Three rules, in order of importance:

   1. NOTHING IS HIDDEN UNLESS JAVASCRIPT IS RUNNING. Every hiding rule below
      is gated on html.js, a class only site.js adds. No script, no observer,
      a crawler, a reader mode, a reviewer's headless fetch — all of them get
      the whole page, exactly as before. The old site hid its sections behind
      a bare .reveal { opacity: 0 } and showed blank bands to anything that
      did not scroll; that is the mistake this gate exists to prevent.

   2. ONE ORCHESTRATED MOMENT, then quiet. The hero enters once, in five beats.
      After that, sections simply arrive as you reach them — a short lift,
      no bounce, no scale, no delay long enough to notice. Apple's rhythm.

   3. REDUCED MOTION MEANS NONE. The media query at the bottom turns every
      transform and animation off and shows everything, not "less".
   ======================================================================== */

/* the hero's entrance — five beats, 90ms apart, once */
.js .enter { opacity: 0; transform: translateY(14px);
  animation: enterUp .7s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
@keyframes enterUp { to { opacity: 1; transform: none; } }

/* sections arrive as you reach them */
.js .reveal, .js .reveal-group > * { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in, .js .reveal-group.in > * { opacity: 1; transform: none; }
/* siblings in a group follow one another, 70ms apart, six deep then together */
.js .reveal-group.in > :nth-child(2) { transition-delay: 70ms; }
.js .reveal-group.in > :nth-child(3) { transition-delay: 140ms; }
.js .reveal-group.in > :nth-child(4) { transition-delay: 210ms; }
.js .reveal-group.in > :nth-child(5) { transition-delay: 280ms; }
.js .reveal-group.in > :nth-child(6) { transition-delay: 350ms; }
.js .reveal-group.in > :nth-child(n+7) { transition-delay: 400ms; }

/* the record's numbers are counted up by JS; while they count, tabular digits
   stop the tile jittering as widths change */
.stat-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .enter, .js .reveal, .js .reveal-group > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .result-dot, .faq details[open] p { animation: none !important; }
  .stat, .plan, .site-header { transition: none !important; }
  .stat:hover, .plan:hover { transform: none; }
  .hero-sky { transform: none !important; }
}