/* Couchy — one static stylesheet. Brand tokens straight from the app icon. */

@font-face {
  font-family: "Cookie";
  src: url("assets/cookie.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* App-icon sky gradient (deep at top, light at bottom — matches app_icon.xml) */
  --sky-deep: #1E3A5F;
  --sky-mid:  #3E78AE;
  --sky-light:#9BD0F0;
  /* Couch */
  --green:    #5D9040;
  --green-dk: #3F7123;
  --green-lt: #78B159;
  /* Lamp */
  --gold:     #FCAB40;
  --gold-dk:  #E08A22;
  /* Neutrals (day) */
  --grey:     #CCD6DD;
  --ink:      #101216;
  --paper:    #F6F9FC;   /* page background */
  --paper-2:  #ECF2F8;   /* alternating section */
  --surface:  #FFFFFF;   /* cards & panels */
  --text:     #17222E;
  --muted:    #566472;
  --line:     #DBE4EC;
  --nav-frost: rgba(246,249,252,.82);
  --hero-halo: rgba(255,255,255,.35);

  --font-script: "Cookie", "Segoe Script", cursive;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1140px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(16,18,22,.06);
  --shadow: 0 18px 40px -18px rgba(16,18,22,.28);
  --shadow-lg: 0 40px 80px -30px rgba(16,32,54,.55);

  /* Glass tiles — the app's grid-mode signature. Flips per theme below. */
  --tile-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7));
  --tile-brd: rgba(20,40,66,.12);   /* cool ink edge so tiles read on light bg */
  --tile-hi: rgba(255,255,255,1);
  --tile-shadow: 0 18px 38px -20px rgba(16,32,54,.3), 0 1px 3px rgba(16,32,54,.08);
}

/* ---------- Night: a movie on the sofa, lights down ---------- */
body.night {
  --paper:   #0B0F15;   /* the dim room */
  --paper-2: #0F141C;
  --surface: #161C25;   /* cards lift out of the dark */
  --text:    #E8EEF4;
  --muted:   #9FB0C0;
  --line:    rgba(255,255,255,.10);
  --nav-frost: rgba(11,15,21,.72);
  --hero-halo: rgba(150,190,240,.12);
  /* night sky over the couch — near-black navy; the gold lamp does the lighting */
  --sky-deep:  #05080E;
  --sky-mid:   #0C1A2B;
  --sky-light: #17324C;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --shadow:    0 20px 44px -18px rgba(0,0,0,.65);
  --shadow-lg: 0 44px 90px -30px rgba(0,0,0,.8);
  /* dark glass tiles at night */
  --tile-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  --tile-brd: rgba(255,255,255,.10);
  --tile-hi: rgba(255,255,255,.14);
  --tile-shadow: 0 26px 50px -24px rgba(0,0,0,.75);
}
body { transition: background .35s ease, color .35s ease; }
/* Day/night cross-fade (View Transitions API) — the whole page dissolves, gradients too. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .5px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img {
  width: 34px; height: 34px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: transform .28s cubic-bezier(.34,1.56,.64,1); /* slight overshoot = playful */
}
.brand:hover img { animation: couchHop .6s ease; } /* couch bounces up, lamp tips */
@keyframes couchHop {
  0%   { transform: none; }
  30%  { transform: translateY(-9px) rotate(-10deg); }
  55%  { transform: translateY(0)    rotate(6deg); }
  78%  { transform: translateY(-3px) rotate(-3deg); }
  100% { transform: none; }
}
.brand .wordmark { font-size: 2rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: #3a2708;
  box-shadow: 0 10px 24px -8px rgba(252,171,64,.7);
}
.btn-primary:hover { background: #ffb851; transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(252,171,64,.85); }
/* Night: gold CTAs turn moonlight-silver to match the moonlit theme. */
body.night .btn-primary { background: linear-gradient(180deg, #e2e9fb, #bccbee); color: #16213b; box-shadow: 0 10px 26px -8px rgba(150,180,255,.55); }
body.night .btn-primary:hover { background: linear-gradient(180deg, #eef2ff, #cbd6f4); box-shadow: 0 16px 32px -10px rgba(150,180,255,.75); }
.btn-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; border-color: rgba(255,255,255,.14); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-line { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-line:hover { transform: translateY(-2px); border-color: var(--green); color: var(--green); box-shadow: var(--shadow-sm); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Nav (floating glass pill) ---------- */
.nav {
  /* Fixed, not sticky: out of flow so the pill's top margin can't collapse onto
     <body> and reveal a paper band, and the hero fills from y=0 behind it. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 0 16px;
}
/* Fixed nav offset for in-page anchor jumps. */
#top, section[id] { scroll-margin-top: 96px; }

/* right-side cluster + day/night toggle + language picker */
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-select {
  /* Icon-only globe button (matches the theme toggle). The native option list still
     opens on click, showing every language's native name. */
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 40px; padding: 0;
  color: transparent;                          /* hide the selected language name on the face */
  cursor: pointer; overflow: hidden; white-space: nowrap;
  background-color: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eef4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9z'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 20px;
  transition: border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.lang-select:hover { border-color: var(--gold); transform: translateY(-2px); background-color: rgba(255,255,255,.16); }
.lang-select option { color: #17222E; background: #fff; }  /* native menu, force readable */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  color: #fff; cursor: pointer; font-size: 1.05rem; line-height: 1;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(-20deg); background: rgba(255,255,255,.2); }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .i-sun { color: var(--gold); }                       /* day: gold sun */
.theme-toggle .i-moon { display: none; color: #d3ddf4;             /* night: pale luna... */
  filter: drop-shadow(0 0 5px rgba(175,205,255,.9)); }             /* ...with moonlight */
body.night .theme-toggle .i-sun { display: none; }
body.night .theme-toggle .i-moon { display: block; }
body.night .theme-toggle { border-color: rgba(185,208,255,.5); box-shadow: 0 0 16px -3px rgba(150,185,255,.6); }
body.night .theme-toggle:hover { box-shadow: 0 0 20px -2px rgba(150,185,255,.85); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px 9px 22px;
  max-width: var(--container);
  margin: 18px auto 0;           /* floats away from the top edge at rest */
  background: rgba(14,20,28,.5);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
  transition: margin-top .3s ease, background .3s ease, box-shadow .3s ease;
}
/* On scroll the pill settles toward the top and frosts more, so it reads as
   "docked" over content instead of just floating. */
.nav.scrolled .nav-inner {
  margin-top: 8px;
  background: rgba(11,16,23,.72);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav .brand .wordmark { color: var(--nav-fg, #fff); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--nav-fg, rgba(255,255,255,.9)); /* flips to ink when the bar frosts */
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav .btn { padding: 9px 18px; font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: 0;             /* fixed nav floats over it; gradient fills from y=0 */
  padding: 150px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(252,171,64,.42), transparent 55%),
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-mid) 52%, var(--sky-light) 100%);
  color: #fff;
}
/* soft star/vignette texture */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 120%, var(--hero-halo), transparent 60%);
  pointer-events: none;
}

/* ---------- Night sky: stars + a moon, no daytime sun-orb ---------- */
body.night .hero {
  background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-mid) 55%, var(--sky-light) 100%);
}
.nightsky { display: none; }
body.night .nightsky {
  display: block; position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none;
}
body.night .nightsky::before {   /* one dot, scattered into a starfield with box-shadow */
  content: ""; position: absolute; top: 7%; left: 5%;
  width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow:
    20px 12px #fff, 96px 44px rgba(255,255,255,.6), 168px 18px #fff, 244px 58px rgba(255,255,255,.7),
    318px 28px rgba(255,255,255,.5), 392px 64px #fff, 470px 22px rgba(255,255,255,.6), 556px 52px #fff,
    636px 26px rgba(255,255,255,.55), 716px 62px #fff, 800px 32px rgba(255,255,255,.6), 884px 56px #fff,
    968px 20px rgba(255,255,255,.5), 1052px 60px #fff, 60px 132px rgba(255,255,255,.6), 184px 162px #fff,
    300px 140px rgba(255,255,255,.55), 432px 176px #fff, 560px 150px rgba(255,255,255,.6), 690px 182px #fff,
    820px 146px rgba(255,255,255,.5), 952px 176px #fff, 1060px 150px rgba(255,255,255,.6), 44px 262px #fff,
    204px 292px rgba(255,255,255,.55), 360px 250px #fff, 520px 300px rgba(255,255,255,.5), 1040px 262px #fff;
}
.moon {
  position: absolute; top: 92px; right: 11%;
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 37% 35%, #fefeff 0%, #dde5f7 55%, #bdcaeb 100%);
  box-shadow: 0 0 46px 10px rgba(200,220,255,.35), inset -11px -9px 22px rgba(120,140,190,.4);
}
/* Night: cool the warm hero accents so they match the moonlight (day stays gold). */
body.night .eyebrow { color: #c3d1ef; }
body.night .eyebrow::before { background: #c3d1ef; }
body.night .hero h1 .script { color: #e2e9f8; text-shadow: 0 4px 22px rgba(170,200,255,.42); }
.hero .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}
/* Hero copy sits on a frosted glass panel — the signature, in the hero too. */
.hero-copy {
  padding: 34px 38px 30px;
  border-radius: 28px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; }
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0 0 20px;
}
.hero h1 .script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.28em;
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 4px 20px rgba(252,171,64,.35);
  display: inline-block;
  transform-origin: 50% 100%;
  animation: sway 3.6s ease-in-out infinite;   /* the couch word gently wobbles */
}
@keyframes sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.hero p.lede {
  font-size: 1.2rem;
  color: rgba(255,255,255,.9);
  max-width: 30ch;
  margin: 0 0 14px;
}
.hero .promise {
  font-weight: 600;
  color: #fff;
  margin: 0 0 30px;
  letter-spacing: .01em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 16px; font-size: .85rem; color: rgba(255,255,255,.72); }

/* TV mockup — glass frame, kept square to the grid. The whole media group
   (TV + floating dock) drifts together so they never separate. */
.hero-media { position: relative; animation: floatTV 4.5s ease-in-out infinite; }
.hero-media:hover { animation-play-state: paused; }
@keyframes floatTV { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tv {
  background: rgba(18,26,24,.42);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  padding: 12px;
  border-radius: 22px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.16);
}
.tv img {
  width: 100%;
  aspect-ratio: 16 / 8;          /* shorter than the 16/9 source... */
  object-fit: cover;
  object-position: 50% 100%;     /* ...bottom-aligned, so the crop takes the top status bar off */
  border-radius: 12px;
}

/* signature floating glass dock — floats in front of the TV, covering the
   screenshot's own dock so there's one dock, not two. */
.app-dock {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(14,20,28,.5);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.2);
}
.app-tile {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 14px -5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.app-tile.nflx { background: #fff; color: #E50914; font-weight: 900; }
.app-tile.strm { background: linear-gradient(160deg, #1b1c3c, #0c0d21); color: #8a7cff; }
.app-tile.sky  { background: linear-gradient(160deg, #ef2b2b, #cf1414); }
.app-tile.tivi { background: #fff; color: #1f6fb2; }
.app-tile.vlc  { background: linear-gradient(160deg, #f7911e, #e8801a); }
.app-tile.live { background: linear-gradient(160deg, #3ab6f0, #1f9be0); }

/* wave divider into the paper section */
.hero-fade {
  height: 90px;
  margin-top: -90px;
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, transparent, var(--paper));
}

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 92px 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 640px; margin: 0 auto 54px; text-align: center; }
.section-head .kicker {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--green);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  font-weight: 800;
}
.section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }

/* ---------- Value prop ---------- */
.value {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.value h2 {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 22px;
}
.value h2 em { font-style: normal; color: var(--green); }
.value p { font-size: 1.18rem; color: var(--muted); margin: 0; }
.value .mono {
  display: inline-block;
  margin-top: 26px;
  font-weight: 700;
  color: var(--green-dk);
  background: rgba(93,144,64,.12);
  border: 1px solid rgba(93,144,64,.25);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .95rem;
}
body.night .value .mono { color: var(--green-lt); background: rgba(120,177,89,.14); border-color: rgba(120,177,89,.32); }

/* ---------- Feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  /* Frosted glass tile — the app's grid-mode look: rounded, floating, top-lit. */
  background: var(--tile-bg);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--tile-brd);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: var(--tile-shadow), inset 0 1px 0 var(--tile-hi);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--tile-hi); }
.card:hover .ico { animation: wiggle .5s ease; }   /* emoji does a little jig */
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
.card .ico {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 13px;
  font-size: 1.5rem;
  margin-bottom: 16px;
  background: linear-gradient(150deg, rgba(93,144,64,.16), rgba(120,177,89,.10));
  border: 1px solid rgba(93,144,64,.22);
}
.card:nth-child(3n+2) .ico { background: linear-gradient(150deg, rgba(252,171,64,.2), rgba(252,171,64,.08)); border-color: rgba(252,171,64,.3); }
.card:nth-child(3n) .ico  { background: linear-gradient(150deg, rgba(62,120,174,.18), rgba(155,208,240,.12)); border-color: rgba(62,120,174,.28); }
.card h3 { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ---------- Screenshots ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.shot {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
  border: 1px solid rgba(16,18,22,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .45s ease; }
.shot:hover img { transform: scale(1.045); }   /* slight push-in on hover */
.shot .cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.shot .cap span { color: var(--grey); font-weight: 500; font-size: .82rem; }

/* ---------- Screenshot lightbox (native <dialog>) ---------- */
.lightbox {
  border: none; margin: 0; padding: 24px;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  background: rgba(5,8,14,.86);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(5,8,14,.5); backdrop-filter: blur(4px); }
.lb-inner { position: relative; max-width: min(94vw, 1360px); }
.lb-inner img {
  width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block;
  border-radius: 14px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.85);
}
.lb-cap { color: #E8EEF4; text-align: center; margin: 14px 0 0; font-weight: 600; }
.lb-close {
  position: absolute; top: -16px; right: -16px;
  width: 42px; height: 42px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--gold); color: #3a2708; font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.6); transition: transform .2s ease;
}
.lb-close:hover { transform: scale(1.08) rotate(90deg); }
.lightbox[open] .lb-inner { animation: lbin .32s cubic-bezier(.2,1.25,.35,1); }
@keyframes lbin { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .lb-close { top: 4px; right: 4px; } }

/* ---------- Install ---------- */
.install-wrap {
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  gap: 44px;
  align-items: start;
}
/* let tracks shrink below the long <pre> command's width so it scrolls (no page overflow) */
.install-wrap > * { min-width: 0; }
.steps { counter-reset: step; display: grid; gap: 20px; min-width: 0; }
.step {
  position: relative;
  padding-left: 62px;
  min-width: 0;              /* grid item: allow the <pre> to scroll instead of stretching */
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 8px 18px -6px rgba(63,113,35,.6);
}
.step h3 { margin: 6px 0 6px; font-size: 1.12rem; }
.step p { margin: 0 0 10px; color: var(--muted); font-size: .97rem; }
code, pre {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: .86rem;
}
pre {
  background: var(--ink);
  color: #d7e2ee;
  padding: 12px 15px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 6px;
  border: 1px solid rgba(255,255,255,.08);
}
pre .c { color: var(--gold); }
.install-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 90px;
}
.install-side img { width: 168px; margin: 0 auto 14px; border-radius: 12px; }
.install-side h3 { margin: 0 0 4px; font-size: 1.05rem; }
.install-side p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }

/* ---------- Privacy strip ---------- */
.privacy {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(252,171,64,.18), transparent 60%),
    linear-gradient(120deg, var(--green-dk), var(--green));
  color: #fff;
}
.privacy .container { padding-top: 70px; padding-bottom: 70px; text-align: center; }
.privacy .kicker { font-family: var(--font-script); font-size: 1.9rem; color: var(--gold); display: block; }
.privacy h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 4px 0 14px; letter-spacing: -.02em; }
.privacy p { max-width: 60ch; margin: 0 auto; color: rgba(255,255,255,.9); font-size: 1.08rem; }
.privacy .tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.privacy .tags span {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: .88rem;
}
/* Night: mute the privacy band so it settles into the dark page instead of glaring. */
body.night .privacy {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(190,215,255,.06), transparent 60%),
    linear-gradient(120deg, #123019, #1d4529);
}

/* ---------- More projects ---------- */
.more { text-align: center; }
.more .placeholder {
  max-width: 460px;
  margin: 0 auto;
  border: 2px dashed var(--grey);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  color: var(--muted);
  background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(203,214,221,.10) 12px, rgba(203,214,221,.10) 24px);
}
.more .placeholder .big { font-family: var(--font-script); font-size: 2rem; color: var(--green); display: block; margin-bottom: 4px; }

/* ---------- Community ---------- */
.community { text-align: center; }
.community .kicker { font-family: var(--font-script); font-size: 1.9rem; color: var(--green); display: block; margin-bottom: 6px; }
.community h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.02em; margin: 0 0 12px; font-weight: 800; }
.community p { color: var(--muted); font-size: 1.1rem; margin: 0 auto 28px; max-width: 48ch; }
.community-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #aeb9c4;
  padding: 64px 0 34px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer .brand .wordmark { color: #fff; }
.footer .about { max-width: 30ch; margin: 16px 0 0; font-size: .92rem; }
.footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer a { color: #aeb9c4; text-decoration: none; font-size: .94rem; transition: color .15s ease; }
.footer a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: .85rem; color: #7f8b97;
}
.footer-bottom .heart { color: var(--gold); }

/* ---------- Scroll reveal (classes added by JS; with JS off, nothing hides) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  will-change: opacity, transform;
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,1.3,.35,1); /* bouncy pop-up */
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] .step { padding-left: 0; padding-right: 62px; }
[dir="rtl"] .step::before { left: auto; right: 0; }
[dir="rtl"] pre { direction: ltr; text-align: left; }        /* commands stay LTR */
[dir="rtl"] .eyebrow { letter-spacing: normal; }             /* uppercase spacing is odd in Arabic */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero p.lede { max-width: none; margin-left: auto; margin-right: auto; }
  .eyebrow, .hero-cta { justify-content: center; }
  .hero-media { max-width: 560px; margin: 0 auto; }   /* keep TV + dock aligned */
  .features { grid-template-columns: repeat(2, 1fr); }
  .install-wrap { grid-template-columns: 1fr; }
  .install-side { position: static; max-width: 340px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-copy { padding: 30px 30px 26px; }
  .moon { display: none; }            /* can't sit cleanly beside a full-width copy panel */
}
@media (max-width: 640px) {
  .nav-links { display: none; }          /* scroll-driven page: drop links + the redundant CTA */
  .nav .btn { display: none; }           /* the hero's F-Droid button sits right below */
  .nav { padding: 0 8px; }
  .nav-inner { gap: 10px; padding: 8px 10px 8px 16px; }
  .brand .wordmark { font-size: 1.5rem; }
  .hero { padding: 116px 0 70px; }
  .hero-copy { padding: 24px 22px 22px; border-radius: 22px; }
  .section { padding: 70px 0; }
  .features, .shots { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .shot .cap [data-i18n="shots.enlarge"] { display: none; }   /* tap opens it; no hover hint on touch */
  .shot .cap { justify-content: center; }                     /* center the remaining caption title */
}
@media (max-width: 500px) {
  /* Dock: keep the recognizable tiles, drop the two longest labels so nothing truncates. */
  .app-tile.tivi, .app-tile.live { display: none; }
  .app-dock { gap: 8px; padding: 8px; }
  .app-tile { font-size: .64rem; height: 42px; }
}