/* AktivKTV — website
   ------------------------------------------------------------------
   The palette and type come from the app itself, so the site and the
   product read as one thing. Bungee is the display face because it is
   already the app's wordmark; it is used sparingly, at large sizes, and
   never for anything a person has to read at length.
*/

:root {
  --navy-900: #010B22;
  --navy:     #012461;
  --navy-mid: #0D3160;
  --red:      #F00816;
  --gold:     #FCAB01;
  --text:     #F2F6FF;
  --muted:    #8FA9CC;
  --line:     #1B4A80;

  --wrap: 1120px;
  --r: 14px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  background:
    radial-gradient(1200px 700px at 82% -10%, #123A6B 0%, transparent 60%),
    var(--navy-900);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; }

/* ── header ───────────────────────────────────────────────────────── */
.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { border-radius: 9px; }
.wordmark {
  font-family: 'Bungee', system-ui;
  font-size: 21px; letter-spacing: 1px; line-height: 1;
}
.wordmark em { color: var(--red); font-style: normal; }
.wordmark.small { font-size: 16px; }

.top nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--text); }
.nav-cta {
  background: var(--red); color: #fff !important;
  padding: 9px 16px; border-radius: 9px; font-weight: 500;
}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px 22px 72px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.eyebrow {
  font-family: 'Bungee', system-ui;
  font-size: 11px; letter-spacing: 3px; color: var(--gold);
  margin-bottom: 18px;
}
h1 {
  font-family: 'Bungee', system-ui;
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
}
.lede { font-size: 17.5px; color: #C9D9F0; max-width: 44ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.btn {
  display: inline-block; text-decoration: none;
  padding: 13px 26px; border-radius: 10px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
}
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: #ff2130; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--muted); }
.btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

.micro { font-size: 13px; color: var(--muted); }
.micro.centred { text-align: center; margin-top: 22px; }

/* signature: the phone-to-stage moment */
.hero-copy { min-width: 0; }
.hero-demo { position: relative; }
.stage {
  background: #04122E; border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 20px 16px;
  box-shadow: 0 26px 60px -30px #000;
}
.stage-head {
  font-family: 'Bungee', system-ui; font-size: 10px;
  letter-spacing: 2.4px; color: var(--gold);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.stage-title { font-size: 30px; font-weight: 500; line-height: 1.15; }
.stage-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.stage-queue {
  list-style: none; padding: 14px 0 0; margin: 0;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.stage-queue li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; color: #C9D9F0;
}
.stage-queue span {
  width: 21px; height: 21px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--navy-mid); border-radius: 6px;
  font-size: 11px; color: var(--gold);
}

.phone {
  position: absolute; right: 4px; bottom: -30px; width: 216px;
  background: #fff; color: #10203A;
  border-radius: 13px; padding: 13px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.75);
}
.phone-head {
  font-family: 'Bungee', system-ui; font-size: 9px;
  letter-spacing: 2px; color: #6B7FA0; margin-bottom: 9px;
}
/* The song slides up and out when it is sent. Without something to clip it,
   it travelled over the label above instead of disappearing. */
.phone-slot {
  height: 22px; overflow: hidden; margin-bottom: 11px;
}
.phone-row {
  font-size: 13.5px; font-weight: 400; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .45s ease, opacity .45s ease;
}
.phone-row.sent { transform: translateY(-26px); opacity: 0; }
.phone-btn {
  background: var(--red); color: #fff; text-align: center;
  padding: 9px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  transition: transform .18s ease, filter .18s ease;
}
.phone-btn.pressed { transform: scale(.94); filter: brightness(.85); }

/* ── sections ─────────────────────────────────────────────────────── */
section { max-width: var(--wrap); margin: 0 auto; padding: 72px 22px; }
.band {
  max-width: none;
  background: rgba(255,255,255,.022);
  border-top: 1px solid rgba(27,74,128,.5);
  border-bottom: 1px solid rgba(27,74,128,.5);
}
.band > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.section-title {
  font-family: 'Bungee', system-ui;
  font-size: clamp(22px, 3vw, 31px);
  margin-bottom: 12px;
}
.section-lede { color: var(--muted); max-width: 58ch; margin-bottom: 30px; }

/* steps: a real sequence, so numbering is information not decoration */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.step h3 { font-size: 18px; font-weight: 500; margin: 12px 0 7px; }
.step p { color: var(--muted); font-size: 14.5px; }
.step-n {
  font-family: 'Bungee', system-ui; font-size: 13px;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
}

/* products */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.product {
  background: #04122E; border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px;
}
.tag {
  font-family: 'Bungee', system-ui; font-size: 10px;
  letter-spacing: 2.2px; color: var(--gold); margin-bottom: 10px;
}
.product h3 { font-family: 'Bungee', system-ui; font-size: 26px; margin-bottom: 12px; }
.product-lede { color: #C9D9F0; font-size: 15.5px; margin-bottom: 18px; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; }
.ticks li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--muted);
}
.ticks li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--gold);
}

/* four points */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.cell h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--gold); }
.cell p { font-size: 14.5px; color: var(--muted); }

/* price */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.price-card {
  background: #04122E; border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; display: flex; flex-direction: column;
}
.price-card.feature { border-color: var(--red); }
.amount { font-family: 'Bungee', system-ui; font-size: 33px; margin-bottom: 12px; }
.amount span { font-family: 'Outfit'; font-size: 14px; color: var(--muted); font-weight: 300; }
.price-note { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; flex: 1; }

/* the request number: quoted when paying, so a payment can be matched */
.ref-box {
  background: #04122E; border: 1px solid var(--gold);
  border-radius: var(--r); padding: 18px 22px;
  margin-top: 28px; max-width: 420px;
}
.ref-lab {
  font-family: 'Bungee', system-ui; font-size: 10px;
  letter-spacing: 2.2px; color: var(--gold); margin-bottom: 6px;
}
.ref {
  font-family: 'Bungee', system-ui; font-size: 26px;
  letter-spacing: 1px; margin-bottom: 8px;
}

.pay-steps { color: var(--muted); font-size: 14.5px; padding-left: 20px; margin-bottom: 12px; }
.pay-steps li { margin-bottom: 7px; }

/* licence form */
.licence {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 30px; max-width: 760px;
}
.licence label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--muted); }
.licence .wide { grid-column: 1 / -1; }
.licence input, .licence select, .licence textarea {
  background: #04122E; border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 11px 13px;
  font-family: inherit; font-size: 15px; font-weight: 300;
}
.licence textarea { resize: vertical; }
.opt { color: #5E799F; font-size: 12.5px; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pay { margin-top: 40px; max-width: 62ch; }
.pay h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; color: var(--gold); }
.pay p { color: var(--muted); font-size: 14.5px; }

/* faq */
.faq { margin-top: 30px; max-width: 78ch; }
.faq details {
  border-bottom: 1px solid rgba(27,74,128,.55);
  padding: 16px 0;
}
.faq summary {
  cursor: pointer; font-size: 16.5px; font-weight: 400;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--muted); font-size: 14.5px; margin-top: 10px; max-width: 68ch; }

/* footer */
footer {
  max-width: var(--wrap); margin: 0 auto;
  padding: 40px 22px 60px;
  border-top: 1px solid rgba(27,74,128,.5);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* ── narrow screens ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; }
  /* Sat over the queue at this width, hiding the thing it is pointing at.
     Placed under the stage it reads as a sequence: request, then queue. */
  .phone {
    position: static; width: 100%; max-width: 300px;
    margin: 16px auto 0; box-shadow: 0 14px 34px -16px rgba(0,0,0,.7);
  }
  .steps, .products, .grid-4, .prices { grid-template-columns: 1fr; }
  .grid-4 { gap: 20px; }
  .licence { grid-template-columns: 1fr; }
  .top nav a:not(.nav-cta) { display: none; }
}