/* ==========================================================================
   Nana's — nanas.pro
   Apple / MacPaw-style, dark. SF Pro, deep navy→violet, grandma mascot.
   Spacious, immersive, premium. Colours sampled from the mascot render.
   ========================================================================== */

:root {
  /* Deep navy-indigo, matched to the mascot's background */
  --bg:        #0d0a1a;
  --bg-2:      #120e24;
  --bg-3:      #171130;
  --surface:   #18122e;
  --surface-2: #1f1740;
  --card:      rgba(255,255,255,0.035);
  --card-2:    rgba(255,255,255,0.06);

  /* Text */
  --ink:      #f4f1ff;
  --ink-soft: #c3bce0;
  --ink-dim:  #8d86b0;
  --ink-faint:#635d85;

  /* Brand — violet/indigo with a blue + soft magenta for iridescence */
  --violet:   #a98bff;
  --violet-2: #8b6cf0;
  --indigo:   #6b5cf0;
  --blue:     #6ea8ff;
  --magenta:  #d98cf0;

  --line:   rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.16);

  --grad-cta:   linear-gradient(120deg, #9a7bff, #6b5cf0);
  --grad-iris:  linear-gradient(120deg, #6ea8ff, #a98bff 50%, #d98cf0);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1180px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Immersive atmosphere — deep, soft, matched to the mascot (not a neon blob) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(120,90,240,0.35), transparent 60%),
    radial-gradient(50% 40% at 85% 8%, rgba(110,168,255,0.14), transparent 60%),
    radial-gradient(60% 50% at 12% 30%, rgba(217,140,240,0.10), transparent 60%),
    var(--bg);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(169,139,255,0.32); }

.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.sprite { position: absolute; width: 0; height: 0; }

/* ---- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 820px; }
.section { padding: 130px 0; }
.section-sm { padding: 80px 0; }

h1, h2, h3 { font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-soft); line-height: 1.55; font-weight: 400; }
.muted { color: var(--ink-dim); }

.eyebrow {
  display: inline-block; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet);
  margin-bottom: 18px;
}
.iris-text { background: var(--grad-iris); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section-head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { margin-bottom: 18px; }

/* ---- Buttons — pills, MacPaw-style --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.2s;
}
.btn .ic { width: 1.1em; height: 1.1em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-cta); color: #fff; box-shadow: 0 12px 34px -10px rgba(120,90,240,0.7); }
.btn-primary:hover { box-shadow: 0 18px 46px -10px rgba(120,90,240,0.85); }
.btn-ghost { background: rgba(255,255,255,0.05); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--violet); }
.btn-lg { padding: 17px 36px; font-size: 1.06rem; }

.textlink { color: var(--violet); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.textlink .ic { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.textlink:hover .ic { transform: translateX(3px); }

/* ---- Floating pill header ------------------------------------------------ */
.site-header { position: sticky; top: 18px; z-index: 50; padding: 0 20px; }
.nav {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding: 0 12px 0 16px;
  background: rgba(24,18,46,0.6);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.8);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand b { font-weight: 700; font-size: 1.14rem; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 8px 15px; border-radius: 999px; color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; transition: color 0.18s, background 0.18s; }
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.nav-links a.cta { color: #fff; background: var(--grad-cta); font-weight: 600; margin-left: 8px; padding: 9px 20px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px; cursor: pointer; color: var(--ink); }
.nav-toggle .ic { width: 20px; height: 20px; }

/* ---- Apps dropdown ------------------------------------------------------- */
.has-drop { position: relative; }
.drop-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  color: var(--ink-soft); font-weight: 500; font-size: 0.95rem;
  transition: color 0.18s, background 0.18s;
}
.drop-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.drop-toggle .ic { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.has-drop.open .drop-toggle { color: var(--ink); background: rgba(255,255,255,0.06); }
.has-drop.open .drop-toggle .ic { transform: rotate(180deg); }

.drop-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 300px; padding: 8px;
  background: rgba(28,22,54,0.92);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
/* invisible bridge across the gap so the cursor can travel button → menu
   without losing hover (this is what made it snap shut too early) */
.drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

/* opening is driven by JS (.open) so we control the close delay */
.has-drop.open .drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.drop-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); transition: background 0.18s; }
.drop-item:hover { background: rgba(255,255,255,0.06); }
.drop-item img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.drop-item b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.drop-item small { display: block; font-size: 0.82rem; color: var(--ink-dim); }
.drop-soon { display: flex; align-items: center; gap: 8px; padding: 11px 10px 7px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-faint); }
.drop-soon .ic { width: 15px; height: 15px; }
/* The line under a group heading that says what the group promises. Only the
   free shelf carries one — see the admission rule at the shelf in site.js.
   It takes the row colour, not the heading colour: a heading is furniture and
   may sit quietly at 3.4:1, but this line is the claim itself, and a claim
   nobody can comfortably read is a claim not made. --ink-dim measures 6.2:1. */
.shelf-note { display: block; padding: 0 10px 9px; font-size: 0.78rem; line-height: 1.45; color: var(--ink-dim); text-wrap: pretty; }
/* The platform glyph riding on a row whose heading is not a platform. */
.ic-meta { width: 1em; height: 1em; margin-right: 5px; vertical-align: -0.14em; }

/* ---- Hero (centered, CleanMyMac-style) ----------------------------------- */
.hero { text-align: center; padding: 70px 0 60px; }
.hero-icon { width: 180px; height: 180px; margin: 0 auto 8px; position: relative; }
.hero-icon img { width: 100%; height: 100%; border-radius: 40px; }
/* cut-out mascot: no tile, she just floats on the background */
.hero-icon.cutout { width: 260px; height: 260px; margin-bottom: 0; }
.hero-icon.cutout img { border-radius: 0; }

/* hover swaps the pose: one arm → both arms up */
.hero-icon.swap { cursor: pointer; }
.hero-icon.swap img {
  position: absolute; inset: 0;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.hero-icon.swap .pose-b { opacity: 0; transform: scale(0.97); }
.hero-icon.swap:hover .pose-a { opacity: 0; transform: scale(0.97); }
.hero-icon.swap:hover .pose-b { opacity: 1; transform: scale(1.03); }
.hero-icon::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,108,240,0.5), transparent 70%); z-index: -1; filter: blur(10px); }
.hero h1 { margin-bottom: 22px; }
.hero .lead { max-width: 620px; margin: 0 auto; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-trust { margin-top: 26px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--ink-dim); font-size: 0.9rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .ic { width: 15px; height: 15px; color: var(--violet); }

/* ---- Product window showcase --------------------------------------------- */
.showcase { position: relative; }
.showcase .glow { position: absolute; inset: -6% 8% 20%; background: var(--grad-iris); filter: blur(90px); opacity: 0.28; border-radius: 50%; z-index: -1; }

.mock {
  width: 100%; max-width: 960px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden;
  background: #100c22; border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.9);
  font-size: 15px;
}
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); }
.mock-dots { display: flex; gap: 8px; }
.mock-dots i { width: 12px; height: 12px; border-radius: 50%; }
.mock-dots i:nth-child(1){ background:#ff5f57 } .mock-dots i:nth-child(2){ background:#febc2e } .mock-dots i:nth-child(3){ background:#28c840 }
.mock-bar .mock-title { margin-left: 6px; color: var(--ink-dim); font-weight: 500; font-size: 13px; }
.mock-body { display: grid; grid-template-columns: 190px 1fr; min-height: 400px; }
.mock-side { padding: 18px 12px; border-right: 1px solid var(--line); background: rgba(0,0,0,0.2); }
.mock-side .mock-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 0 6px; }
.mock-side .mock-brand img { width: 26px; height: 26px; border-radius: 7px; }
.mock-side .mock-brand span { font-weight: 600; font-size: 14px; }
.mock-cap { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 8px 6px; font-weight: 600; }
.mock-nav { display: grid; gap: 2px; }
.mock-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink-dim); font-size: 13px; }
.mock-nav a .ic { width: 16px; height: 16px; }
.mock-nav a.active { background: rgba(139,108,240,0.16); color: var(--ink); }
.mock-nav a.active .ic { color: var(--violet); }
.mock-main { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.mock-gauge-row { display: flex; align-items: center; gap: 22px; }
.mock-gauge { --p: 91; position: relative; width: 132px; height: 132px; border-radius: 50%; flex: none;
  background: radial-gradient(closest-side, #100c22 78%, transparent 79%), conic-gradient(from 210deg, var(--violet), var(--magenta) calc(var(--p)*1%), rgba(255,255,255,0.07) 0);
  display: grid; place-items: center; }
.mock-gauge .g-inner b { display: block; font-size: 22px; font-weight: 700; text-align: center; }
.mock-gauge .g-inner small { display:block; text-align:center; font-size: 9px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; }
.mock-gauge-info { display: flex; flex-direction: column; gap: 8px; }
.mock-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #34d39a; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); padding: 4px 11px; border-radius: 999px; }
.mock-chip .ic { width: 12px; height: 12px; }
.mock-gauge-info .line { font-size: 12.5px; color: var(--ink-dim); }
.mock-gauge-info .line b { color: var(--ink-soft); }
.mock-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 2px; }
.mock-progress i { display: block; height: 100%; width: 91%; background: linear-gradient(90deg, var(--violet), var(--magenta)); }
.mock-smart { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--grad-cta); color: #fff; }
.mock-smart .s-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.22); display: grid; place-items: center; }
.mock-smart .s-ic .ic { width: 17px; height: 17px; stroke-width: 2; }
.mock-smart b { font-size: 14px; display: block; } .mock-smart small { font-size: 11.5px; opacity: 0.9; }
.mock-smart .arrow { margin-left: auto; } .mock-smart .arrow .ic { width: 18px; height: 18px; }
.mock-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-quick .q { padding: 14px 6px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); text-align: center; color: var(--ink-dim); }
.mock-quick .q .ic { width: 19px; height: 19px; } .mock-quick .q .ql { font-size: 10px; margin-top: 6px; }

/* ==========================================================================
   3D screenshot gallery — reusable across app pages.
   Markup: .gallery3d[data-gallery] > .g3-stage (big tilted image + arrows +
   caption) + .g3-thumbs (rail of .g3-thumb buttons carrying data-full/title/
   note). site.js wires switching, tilt and a shared click-to-enlarge lightbox.
   ========================================================================== */
.gallery3d { --g3-tilt: -11deg; position: relative; }

/* soft aura behind the whole stage */
.g3-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 60px 0 14px; }
.g3-stage::before {
  content: ""; position: absolute; inset: -4% 10% 24%;
  background: var(--grad-iris); filter: blur(90px); opacity: 0.3; border-radius: 50%; z-index: 0;
}

/* the tilted 3D frame */
.g3-frame {
  position: relative; z-index: 1; margin: 0; width: min(100%, 940px);
  border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; outline: none;
  border: none; background: var(--bg);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
  transform: perspective(1800px) rotateY(var(--g3-tilt)) rotateX(2deg);
  transform-origin: center bottom;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.g3-frame:hover, .g3-frame:focus-visible { transform: perspective(1600px) rotateY(0deg) rotateX(0deg) scale(1.012); box-shadow: 0 48px 110px -28px rgba(0,0,0,0.85); }

/* crossfade stack — every screen overlaps in one grid cell, active one fades in */
.g3-track { display: grid; }
.g3-track img { grid-area: 1 / 1; width: 100%; height: auto; display: block; user-select: none;
  opacity: 0; transition: opacity 0.5s var(--ease); }
.g3-track img.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .g3-track img { transition: none; } }

/* moving sheen that sells the glass */
.g3-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.12) 48%, transparent 58%);
  transform: translateX(-30%); opacity: 0; transition: opacity 0.4s; mix-blend-mode: screen; }
.g3-frame:hover .g3-shine { opacity: 1; animation: g3sheen 1.1s var(--ease); }
@keyframes g3sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* zoom hint pill */
.g3-zoom { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ink);
  background: rgba(13,10,26,0.6); border: 1px solid var(--line-2); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.g3-zoom .ic { width: 15px; height: 15px; }
.g3-frame:hover .g3-zoom, .g3-frame:focus-visible .g3-zoom { opacity: 1; transform: translateY(0); }

/* stage arrows */
.g3-arrow { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgba(24,18,46,0.72); border: 1px solid var(--line-2); backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.g3-arrow:hover { background: var(--surface-2); border-color: var(--violet); }
.g3-arrow .ic { width: 22px; height: 22px; }
.g3-prev { left: 2px; } .g3-prev .ic { transform: rotate(90deg); }
.g3-next { right: 2px; } .g3-next .ic { transform: rotate(-90deg); }

/* caption below the stage */
.g3-cap { text-align: center; margin-top: 18px; }
.g3-cap b { display: inline-block; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.g3-cap span { display: block; font-size: 0.88rem; color: var(--ink-dim); margin-top: 2px; }

/* thumbnail rail */
.g3-thumbs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 58px; }
.g3-thumb { padding: 0; width: 132px; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg);
  border: 2px solid transparent; opacity: 0.5; transition: opacity 0.25s, border-color 0.25s, transform 0.25s; }
.g3-thumb img { display: block; width: 100%; height: auto; }
.g3-thumb:hover { opacity: 0.9; transform: translateY(-3px); }
.g3-thumb.is-active { opacity: 1; border-color: var(--violet); box-shadow: 0 8px 26px -12px rgba(139,108,240,0.8); }

/* ---- shared lightbox (injected once by site.js) ------------------------- */
.g3-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 4vmin; background: rgba(8,6,18,0.86); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; }
.g3-lightbox.open { opacity: 1; visibility: visible; }
.g3-lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r); border: none;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.9); transform: scale(0.96); transition: transform 0.32s var(--ease); }
.g3-lightbox.open img { transform: scale(1); }
.g3-lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); font-size: 20px; line-height: 1; }
.g3-lb-close:hover { background: rgba(255,255,255,0.12); border-color: var(--violet); }
.g3-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); }
.g3-lb-arrow:hover { background: rgba(255,255,255,0.12); border-color: var(--violet); }
.g3-lb-arrow .ic { width: 26px; height: 26px; }
.g3-lb-prev { left: 20px; } .g3-lb-prev .ic { transform: rotate(90deg); }
.g3-lb-next { right: 20px; } .g3-lb-next .ic { transform: rotate(-90deg); }
.g3-lb-cap { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .g3-frame { transform: none; } .g3-frame:hover, .g3-frame:focus-visible { transform: scale(1.01); }
  .g3-shine { display: none; }
}

/* ---- App cards ----------------------------------------------------------- */
/* Two across, not three. The registry holds four apps, and three columns leave
   the fourth alone on a row of its own, which reads as "and one more we forgot"
   rather than as a range. Two columns fill both rows evenly at four apps and
   still fill them at six. The day the count goes odd, the last card is on its
   own again — at which point the honest fix is another app, not another column. */
.apps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.app-card {
  position: relative; display: flex; flex-direction: column; padding: 30px;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
  min-height: 340px; overflow: hidden;
}
.app-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.app-card:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--card-2); }
.app-icon { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; }
.app-icon.grad { background: var(--grad-cta); color: #fff; box-shadow: 0 12px 30px -10px rgba(120,90,240,0.6); }
.app-icon.iris { background: var(--grad-iris); color: #fff; }
.app-icon img { width: 100%; height: 100%; border-radius: 16px; }
.app-icon .ic { width: 30px; height: 30px; }
.app-tag { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet); margin-bottom: 12px; }
.app-card h3 { margin-bottom: 10px; font-size: 1.5rem; }
.app-card p { color: var(--ink-dim); font-size: 0.98rem; flex: 1; }
.app-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.app-foot .price { font-weight: 700; font-size: 1.15rem; }
.app-foot .price small { color: var(--ink-faint); font-weight: 400; font-size: 0.82rem; }
.app-card.mystery { border-style: dashed; background: transparent; }
.app-card.mystery:hover { transform: none; }
.app-card.mystery .app-icon { background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); color: var(--ink-dim); font-size: 1.9rem; font-weight: 700; }
.badge-soon { position: absolute; top: 22px; right: 22px; width: max-content; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--line-2); padding: 4px 11px; border-radius: 999px; }
/* inline "Soon" tag next to app names in nav/footer */
.soon-tag { display: inline-block; margin-left: 7px; font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--line-2); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.drop-item.is-soon small { opacity: 0.85; }
/* inline device tag in the footer, for a row whose heading is not a platform.
   Quieter than "Soon": it answers a question rather than making an offer. */
.plat-tag { display: inline-block; margin-left: 6px; font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }

/* ---- "Nana knows best about everything" ---------------------------------- */
.knows-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.knows {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 30px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s;
}
.knows:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--card-2); }
.knows .k-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--violet); margin-bottom: 4px; transition: color 0.3s, transform 0.4s var(--ease); }
.knows:hover .k-ic { color: var(--magenta); transform: rotate(-6deg) scale(1.06); }
.knows .k-ic .ic { width: 21px; height: 21px; }
.knows b { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.knows span { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.55; }
.knows.hot { border-color: var(--line-plum, rgba(169,139,255,0.35)); background: rgba(139,108,240,0.08); }
.knows.hot .k-ic { background: var(--grad-cta); color: #fff; border-color: transparent; }

/* ---- Mascot story split -------------------------------------------------- */
.mascot { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mascot-media { position: relative; }
.mascot-media img {
  width: 100%;
  /* dissolve the render's own navy backdrop into the page — no visible box */
  -webkit-mask-image: radial-gradient(68% 70% at 50% 48%, #000 42%, rgba(0,0,0,0.45) 68%, transparent 94%);
  mask-image: radial-gradient(68% 70% at 50% 48%, #000 42%, rgba(0,0,0,0.45) 68%, transparent 94%);
}
.mascot-media::after { content: ""; position: absolute; inset: 6%; background: radial-gradient(closest-side, rgba(139,108,240,0.35), transparent 72%); filter: blur(50px); z-index: -1; }
.cooking-intro { margin-bottom: 72px; }
.cooking-intro .mascot-media { max-width: 520px; margin-left: auto; }
.story-list { list-style: none; display: grid; gap: 4px; margin-top: 30px; }
.story-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.story-list li:last-child { border-bottom: 1px solid var(--line); }
.story-list .li-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--violet); }
.story-list .li-ic .ic { width: 20px; height: 20px; }
.story-list b { display: block; font-weight: 600; font-size: 1.06rem; margin-bottom: 2px; }
.story-list span { color: var(--ink-dim); font-size: 0.96rem; }

/* ---- Tool grid (app pages) ----------------------------------------------- */
.tool-cat + .tool-cat { margin-top: 64px; }
.tool-cat-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.tool-cat-head .k { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }
.tool-cat-head h3 { font-size: 1.7rem; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool {
  display: flex; flex-direction: column;
  padding: 30px 28px 32px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.tool:hover { transform: translateY(-6px); border-color: var(--line-2); background: var(--card-2); box-shadow: 0 26px 50px -28px rgba(0,0,0,0.9); }
.tool .t-ic {
  position: relative; overflow: hidden;
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--grad-cta); color: #fff; display: grid; place-items: center; margin-bottom: 20px;
  box-shadow: 0 10px 24px -10px rgba(120,90,240,0.6);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.tool:hover .t-ic { transform: translateY(-2px) scale(1.06) rotate(-3deg); box-shadow: 0 16px 30px -12px rgba(120,90,240,0.8); }
.tool .t-ic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.55) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform 0.65s var(--ease);
}
.tool:hover .t-ic::after { transform: translateX(130%); }
.tool .t-ic .ic { width: 24px; height: 24px; position: relative; z-index: 1; }
.tool h4 { font-size: 1.16rem; font-weight: 600; margin-bottom: 9px; letter-spacing: -0.02em; }
.tool p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.6; }

/* ---- Screenshots --------------------------------------------------------- */
.shot-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--card); aspect-ratio: 16/10; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-placeholder { display: grid; place-items: center; text-align: center; height: 100%; padding: 24px; color: var(--ink-faint); gap: 10px; }
.img-placeholder .ic { width: 28px; height: 28px; opacity: 0.6; }
.img-placeholder strong { color: var(--ink-dim); font-weight: 600; font-size: 0.96rem; }
.img-placeholder code { font-size: 0.72rem; color: var(--ink-faint); }

/* ---- App page hero (centered like homepage) ------------------------------ */
.app-hero { text-align: center; padding: 56px 0 20px; }
.app-hero .hero-icon { width: 150px; height: 150px; margin-bottom: 20px; }
.app-hero .hero-icon img { border-radius: 34px; }
.app-hero .app-tag { display: inline-block; }
.app-hero h1 { margin-bottom: 20px; }
.app-hero .lead { max-width: 620px; margin: 0 auto; }
.app-hero .hero-cta { margin-top: 32px; }
.app-hero .stat-row { display: flex; gap: 48px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.stat .v { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; }
.stat .k { font-size: 0.84rem; color: var(--ink-dim); margin-top: 2px; }

/* Subnav */
.subnav { position: sticky; top: 92px; z-index: 40; margin: 40px auto 0; max-width: 620px; }
.subnav .wrap { display: flex; gap: 4px; justify-content: center; padding: 6px; background: rgba(24,18,46,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; }
.subnav a { padding: 9px 16px; border-radius: 999px; color: var(--ink-dim); font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: color 0.18s, background 0.18s; }
.subnav a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

/* ---- Changelog ----------------------------------------------------------- */
.changelog { max-width: 760px; margin: 0 auto; }
.release { display: grid; grid-template-columns: 140px 1fr; gap: 30px; padding: 32px 0; border-top: 1px solid var(--line); }
.release:last-child { border-bottom: 1px solid var(--line); }
.release-meta .ver { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.release-meta .date { display: block; color: var(--ink-faint); font-size: 0.82rem; margin-top: 4px; }
.release-meta .tag { display: inline-block; margin-top: 12px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 999px; }
.tag.new { color: #34d39a; border: 1px solid rgba(52,211,153,0.3); }
.tag.fix { color: var(--blue); border: 1px solid rgba(110,168,255,0.3); }
.tag.internal { color: var(--ink-dim); border: 1px solid var(--line-2); }
.release ul { list-style: none; display: grid; gap: 10px; }
.release li { color: var(--ink-soft); padding-left: 22px; position: relative; font-size: 0.98rem; }
.release li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* ---- Languages ----------------------------------------------------------- */
/* Flagi rysuje krój systemowy, więc trzymamy je w osobnym elemencie: własny
   font-family tylko dla emoji, żeby napis obok został w kroju strony. */
.lang-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.lang {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font-size: 0.94rem; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.lang:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); }
.lang-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.15rem; line-height: 1;
}
@media (max-width: 640px) {
  .lang { padding: 8px 13px 8px 10px; font-size: 0.88rem; gap: 7px; }
  .lang-row { gap: 8px; }
}

/* ---- Panel / form -------------------------------------------------------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 42px; }
.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  background: rgba(0,0,0,0.28); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 14px 16px; color: var(--ink); width: 100%; transition: border-color 0.18s, box-shadow 0.18s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(169,139,255,0.18); }
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a98bff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field select option { background: var(--bg-3); color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { border-radius: var(--r-xl); padding: 72px 48px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); }
.cta-band::before { content: ""; position: absolute; inset: -40% 10% auto; height: 80%; background: var(--grad-iris); filter: blur(90px); opacity: 0.25; z-index: 0; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lead { max-width: 560px; margin: 0 auto; }
.cta-band .hero-cta { justify-content: center; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 70px 0 48px; margin-top: 60px; }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font-size: 0.93rem; color: var(--ink-dim); }
.foot-cols { flex: 1; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 15px; font-weight: 700; }
.foot-col a { display: block; padding: 5px 0; color: var(--ink-dim); font-size: 0.94rem; transition: color 0.18s; }
.foot-col a:hover { color: var(--violet); }
.foot-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; color: var(--ink-faint); }

/* ==========================================================================
   Micro-interactions — cursor-follow border glow, sheen, float, stagger
   ========================================================================== */

/* Light that travels along the card border toward the cursor */
.spotlight { position: relative; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%),
              rgba(169,139,255,0.85), rgba(110,168,255,0.35) 42%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease); z-index: 2;
}
.spotlight:hover::after { opacity: 1; }
/* faint inner light following the cursor */
.spotlight > .glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(139,108,240,0.12), transparent 55%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.spotlight:hover > .glow { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
/* keep absolutely-placed children (e.g. the "Coming soon" pill) pinned, not stretched */
.spotlight > .badge-soon { position: absolute; z-index: 2; }

/* App-card: animated shimmer on the top hairline + icon shine */
.app-card::before { background: linear-gradient(90deg, transparent, var(--line-2) 30%, rgba(169,139,255,0.7) 50%, var(--line-2) 70%, transparent); background-size: 200% 100%; transition: background-position 0.6s var(--ease); background-position: 100% 0; }
.app-card:hover::before { background-position: 0 0; }
.app-icon { position: relative; overflow: hidden; transition: transform 0.4s var(--ease); }
.app-card:hover .app-icon { transform: translateY(-2px) scale(1.05) rotate(-3deg); }
.app-icon::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.5) 50%, transparent 68%); transform: translateX(-130%); transition: transform 0.65s var(--ease); }
.app-card:hover .app-icon::after { transform: translateX(130%); }
.app-icon > .ic, .app-icon > img { position: relative; z-index: 1; }

/* Buttons — sheen sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.7s var(--ease); }
.btn-primary:hover::after { transform: translateX(130%); }

/* Gentle idle float on the hero mascot icon */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-icon { animation: floaty 5.5s ease-in-out infinite; }

/* ---- Legal / prose pages ------------------------------------------------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.6rem; margin: 48px 0 16px; scroll-margin-top: 100px; }
.prose h3 { font-size: 1.15rem; margin: 30px 0 10px; color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; display: grid; gap: 8px; }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-2); }
.prose td { color: var(--ink-soft); }
.legal-meta { color: var(--ink-faint); font-size: 0.88rem; margin-bottom: 8px; }
.legal-toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; margin: 32px 0 44px; }
.legal-toc h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 12px; font-weight: 700; }
.legal-toc ol { margin: 0 0 0 18px; display: grid; gap: 6px; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.legal-toc a:hover { color: var(--violet); }
.callout { border: 1px solid var(--line-plum, rgba(169,139,255,0.35)); background: rgba(139,108,240,0.08); border-radius: var(--r); padding: 20px 24px; margin: 24px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--violet); }

/* ---- Reveal (with stagger for grids) ------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* stagger tool cards in as their category reveals */
.tool-grid .tool { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.reveal.in .tool-grid .tool, .tool-cat.in .tool { opacity: 1; transform: none; }
.tool-grid .tool:nth-child(2) { transition-delay: 0.07s; }
.tool-grid .tool:nth-child(3) { transition-delay: 0.14s; }
.tool-grid .tool:nth-child(4) { transition-delay: 0.07s; }
.tool-grid .tool:nth-child(5) { transition-delay: 0.14s; }
.tool-grid .tool:nth-child(6) { transition-delay: 0.21s; }
/* keep hover lift working after entrance */
.tool-grid .tool:hover { transform: translateY(-6px); transition-delay: 0s; }

/* stagger app cards — reading order, two per row */
.apps-grid .app-card.reveal:nth-child(2) { transition-delay: 0.1s; }
.apps-grid .app-card.reveal:nth-child(3) { transition-delay: 0.2s; }
.apps-grid .app-card.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .apps-grid, .tool-grid, .knows-grid { grid-template-columns: 1fr 1fr; }
  .mascot { grid-template-columns: 1fr; gap: 36px; }
  .mascot-media { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .section { padding: 90px 0; }
  .apps-grid, .tool-grid, .knows-grid { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; gap: 12px; }
  /* dropdown expands inline inside the mobile menu */
  .has-drop { width: 100%; }
  .drop-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; }
  .drop-menu { position: static; transform: none; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto;
    background: rgba(0,0,0,0.25); box-shadow: none; margin-top: 6px; display: none; }
  .has-drop.open .drop-menu { display: block; transform: none; }
  .drop-menu::before { display: none; }
  .shot-row { grid-template-columns: 1fr; }
  .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a.cta { margin: 6px 0 0; text-align: center; }
  .nav-toggle { display: grid; place-items: center; }
  .field-row { grid-template-columns: 1fr; }
  .cta-band { padding: 48px 24px; }
  .panel { padding: 26px; }
  .hero-icon { width: 140px; height: 140px; }
  /* gallery: drop the tilt on small screens, shrink thumbs, hide stage arrows (swipe/thumbs remain) */
  .gallery3d { --g3-tilt: 0deg; }
  .g3-frame { transform: none; }
  .g3-arrow { display: none; }
  .g3-thumb { width: calc(33.33% - 8px); }
  .g3-cap { margin-top: 14px; }
  .g3-stage { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *{ animation: none !important; scroll-behavior: auto } .reveal{ opacity:1; transform:none; transition:none } }

/* ---------- Pricing tiers (1 / 2 / 5 Macs) ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.price-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 32px 24px 28px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.price-card:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--card-2); }
.price-card.featured { border-color: var(--violet); }
.price-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; background: var(--grad-cta); color: #fff; white-space: nowrap;
}
.price-macs { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet); }
.price-amount { font-size: 2.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; margin: 8px 0 2px; }
.price-note { font-size: 0.84rem; color: var(--ink-dim); margin: 0 0 22px; }
.price-card .btn { width: 100%; justify-content: center; }
@media (max-width: 820px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews — the giveaway form and the wall of quotes ---------- */

/* the rating picker: five buttons, filled up to the one you point at */
.stars-pick { display: flex; gap: 6px; justify-content: center; margin: 22px 0 6px; }
.star {
  background: none; border: none; cursor: pointer; padding: 6px; line-height: 0;
  color: var(--ink-faint); transition: color 0.18s, transform 0.25s var(--ease);
}
.star .ic { width: 40px; height: 40px; fill: none; }
.star:hover { transform: translateY(-3px) scale(1.06); }
.star.on { color: #ffc75c; }
.star.on .ic { fill: currentColor; stroke: currentColor; }
.star:focus-visible { outline: none; border-radius: 10px; box-shadow: 0 0 0 3px rgba(169,139,255,0.35); }
.stars-label { text-align: center; font-size: 0.95rem; min-height: 1.4em; margin-bottom: 4px; }
.rate-head { text-align: center; }

.review-form { margin-top: 8px; }
.field-hint { font-size: 0.83rem; line-height: 1.5; }

/* consent rows — a checkbox that is readable, not a 13px afterthought */
.check { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violet-2); flex: none; cursor: pointer; }
.check span { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.check em { font-style: normal; }

.photo-pick { display: flex; gap: 16px; align-items: center; }
.photo-preview {
  width: 74px; height: 74px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: var(--ink-faint);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .ic { width: 24px; height: 24px; }
.photo-pick-body { display: grid; gap: 7px; min-width: 0; }
.photo-pick input[type="file"] { font-size: 0.88rem; color: var(--ink-soft); }
.photo-pick input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.05); color: var(--ink);
  font: inherit; font-size: 0.88rem; font-weight: 600;
}
.photo-pick input[type="file"]::file-selector-button:hover { border-color: var(--violet); }

.form-error {
  margin: 0; padding: 12px 16px; border-radius: var(--r-sm); font-size: 0.92rem;
  background: rgba(255,110,110,0.1); border: 1px solid rgba(255,110,110,0.35); color: #ffb4b4;
}
.done-mark {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-cta); color: #fff;
}
.done-mark .ic { width: 30px; height: 30px; }

/* the wall itself */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  display: flex; flex-direction: column; gap: 16px; padding: 28px 26px;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.review-card:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--card-2); }
.rv-stars { display: flex; gap: 2px; color: #ffc75c; }
.rv-stars .ic { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; }
.rv-text { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.62; flex: 1; }
.rv-who { display: flex; align-items: center; gap: 12px; }
.rv-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line-2); }
.rv-name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.rv-name a { color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.rv-name a:hover { color: var(--violet); }
.rv-role { font-size: 0.82rem; color: var(--ink-dim); }

@media (max-width: 980px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .star .ic { width: 34px; height: 34px; }
  .photo-pick { align-items: flex-start; }
}

/* ---------- Numbered steps (the review page's "how this goes") ----------
   Built on the same bones as .knows: same card, same 44px badge, same lift on
   hover — so it reads as part of the site rather than a component bolted on. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  display: grid; gap: 16px; align-content: start;
  padding: 34px 30px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.step:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--card-2); }
.step-n {
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: 1.06rem; font-weight: 700; font-style: normal; letter-spacing: 0;
  color: var(--violet);
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.step:hover .step-n { background: var(--grad-cta); color: #fff; border-color: transparent; transform: rotate(-6deg) scale(1.06); }
.step-k {
  display: block; margin-bottom: 5px;
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.step b { display: block; font-size: 1.14rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.step p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; line-height: 1.62; }
.step .textlink { font-size: 0.92rem; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 28px 24px; gap: 14px; }
}

/* ===================================================================
/* ---------- The other shop: same app, different licence ---------- */
.store-line {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 26px; padding: 22px 26px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.store-line > div { flex: 1 1 420px; display: grid; gap: 5px; }
.store-line b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.store-line span { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.55; }
.store-line .btn { flex: none; white-space: nowrap; }
@media (max-width: 720px) { .store-line { padding: 20px; gap: 16px; } .store-line .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   Nana's Focus — the app's green, kept on the app's own page
   --------------------------------------------------------------------------
   Colour belongs to the app, the character belongs to the brand. Focus is
   green; Nana's is not. So every colour rule below is scoped to
   `body.app-focus` and nothing above this line is touched — apps/cleaner.html
   and apps/teleprompter.html render exactly as they did before.

   Palette taken from the app's own day theme: accent #2F8259, paper #F0F4EA,
   surface #FAFCF5, ink #1E2B21, soft ink #6E7C6D, and the three background
   auras sage #CFE0C0, eucalyptus #C3DACE and moss #DEE9CC.

   The page keeps the site's dark architecture (same pill header, same footer,
   same grid, same type) and swaps navy-violet for forest green. The two paper
   colours are used where they belong: as the sheet the phones stand on, which
   is also what makes the light screenshots read as objects rather than holes.
   ========================================================================== */
body.app-focus {
  --bg:        #0b1410;
  --bg-2:      #0f1b15;
  --bg-3:      #13231b;
  --surface:   #1e2b21;  /* the app's ink is dark enough to be a surface here */
  --surface-2: #26382b;

  --ink:      #f0f4ea;   /* the app's paper, read as text on a dark page */
  --ink-soft: #cfe0c0;   /* sage */
  --ink-dim:  #9db09b;
  --ink-faint:#6e7c6d;   /* the app's soft ink */

  /* The brand hooks keep their names so every existing component picks the new
     colour up without a second selector. Accent text is a lighter green than
     #2F8259: the app puts its accent on paper, this page puts it on the dark,
     and #2F8259 on this background sits at 3.8:1, which is too thin to read. */
  --violet:   #9fd3b4;
  --violet-2: #4f9f74;
  --indigo:   #2f8259;   /* the app's accent, for solid fills under white text */
  --blue:     #c3dace;   /* eucalyptus */
  --magenta:  #dee9cc;   /* moss */

  --line:      rgba(228,240,220,0.10);
  --line-2:    rgba(228,240,220,0.18);
  --line-plum: rgba(159,211,180,0.35);

  --grad-cta:  linear-gradient(120deg, #3f9c6c, #2f8259);
  --grad-iris: linear-gradient(120deg, #c3dace, #9fd3b4 50%, #dee9cc);

  /* the app's paper, now only what shows behind a screenshot while it loads */
  --paper:     #f0f4ea;
  --paper-2:   #fafcf5;
  --paper-ink: #1e2b21;
  /* This was the app's soft ink darkened to hold 4.5:1 on paper, and it was
     right for as long as the phones stood on a light sheet. That sheet is
     gone, so the only thing this value still colours is the three captions,
     and they now sit on the dark page, where #46564A measures 2.4:1 and is
     effectively unreadable. #9DB09B is this page's own dim ink, made for this
     background, and it measures 8.1:1. */
  --paper-ink-2: #9db09b;
}

/* the three soft lights behind everything, in the app's greens */
body.app-focus::before {
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(47,130,89,0.38), transparent 60%),
    radial-gradient(50% 40% at 85% 8%, rgba(195,218,206,0.12), transparent 60%),
    radial-gradient(60% 50% at 12% 30%, rgba(222,233,204,0.09), transparent 60%),
    var(--bg);
}
body.app-focus ::selection { background: rgba(159,211,180,0.32); }

/* Tinted glass: the header pill, the Apps dropdown and the subnav carry literal
   colours rather than variables, so they have to be said again here. */
body.app-focus .nav          { background: rgba(20,34,25,0.62); }
body.app-focus .drop-menu    { background: rgba(23,38,28,0.93); }
body.app-focus .subnav .wrap { background: rgba(20,34,25,0.72); }

/* shadows carry the brand colour too */
body.app-focus .btn-primary        { box-shadow: 0 12px 34px -10px rgba(47,130,89,0.75); }
body.app-focus .btn-primary:hover  { box-shadow: 0 18px 46px -10px rgba(47,130,89,0.9); }
body.app-focus .tool .t-ic         { box-shadow: 0 10px 24px -10px rgba(47,130,89,0.65); }
body.app-focus .tool:hover .t-ic   { box-shadow: 0 16px 30px -12px rgba(47,130,89,0.85); }

/* cursor-follow glow on the cards (site.js adds .spotlight to every .tool) */
body.app-focus .spotlight::after {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%),
              rgba(159,211,180,0.8), rgba(195,218,206,0.32) 42%, transparent 62%);
}
body.app-focus .spotlight > .glow {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(47,130,89,0.16), transparent 55%);
}

/* the mode cards carry two sentences: what the mode does, then who it is for.
   The second one steps back so the first still reads as the answer. */
body.app-focus .tool p + p { margin-top: 11px; color: var(--ink-faint); }

/* ---- Three phones on a sheet of the app's paper --------------------------
   Replaces the .gallery3d carousel on this page. A carousel shows one screen
   and hides the rest behind a click; three phones side by side show the whole
   argument at once, which is what an app nobody can download yet needs most.
   The frame is drawn in CSS, so there is no device mockup image to keep in
   step with anything, and the capture is the screen alone (920x2000).
   -------------------------------------------------------------------------- */
/* No panel behind the phones. They stood on a light sheet with its own border
   and shadow, which read as one slab with three screens printed on it instead
   of three devices you could pick up. The page background is the background
   now; each phone carries its own shadow and nothing else frames them. */
.phone-sheet {
  position: relative;
  padding: 20px 0 8px;
}
.phone-sheet > * { position: relative; z-index: 1; }

/* The middle column is the wider one, so whichever screen stands second stands
   taller, the way the middle device does in an Apple line-up. The size comes
   from the column and not from a class, so reordering the three figures moves
   the emphasis with them and nothing else has to change.
   Each phone is its own two-row grid: the frame sits at the bottom of a
   stretching first row and the caption owns the second. That is what keeps all
   three frames on one baseline and all three captions starting on another,
   whatever the phones and the captions measure. */
.phone-row {
  display: grid; grid-template-columns: 1fr 1.12fr 1fr;
  gap: 30px; align-items: stretch;
}
.phone {
  --r-dev: 56px; margin: 0;
  display: grid; gap: 20px;
  /* The caption row is held at three lines rather than left on auto. Auto would
     size per phone, and one caption wrapping to a third line would drop that
     phone's frame a line below its neighbours. Three lines is what the longest
     of the three takes at the narrowest width; a longer one still fits, it just
     costs the alignment. */
  grid-template-rows: 1fr minmax(4.5em, auto);
}
.phone-frame { align-self: end; }

/* The rail is TITANIUM and it is neutral on every page on purpose. It used to be
   painted in each app's own colour — green here, brass on Level — and a phone
   whose body matches the app inside it does not read as an iPhone; it reads as
   some Android in a case. Apple sells one rail and it is grey, so the frame is
   grey, and the app's colour lives where it belongs: on the screen.

   Three things do the work, in this order of how much they matter:
   the neutral metal, the buttons on the sides, and the black glass edge between
   the metal and the screenshot. Take any one of them out and the silhouette
   goes generic again. */
/* Trzy warstwy, w kolejności od zewnątrz: metalowa szyna (padding), czarna
   krawędź szkła (cień na obrazku) i ekran. Wcześniej warstwa była jedna —
   szeroki szary pas — i telefon czytał się jak coś w etui, bo z przodu iPhone'a
   metalu widać ledwie kreskę, a resztę obwódki robi czarne szkło.

   PROMIENIE SĄ WSPÓŁŚRODKOWE i muszą takie zostać. Apple daje ekranowi promień
   równy mniej więcej 14% szerokości telefonu; przy 359 px w tej siatce to 50 px,
   a każda kolejna warstwa na zewnątrz dokłada swoją grubość. Stąd:
   ekran = --r-dev − 10, czerń = ekran + 7, szyna = --r-dev. Zmieniasz padding
   albo grubość czerni — przelicz wszystkie trzy, inaczej rogi się rozjadą. */
.phone-frame {
  position: relative; padding: 3px;
  border-radius: var(--r-dev);
  /* Róg iPhone'a NIE JEST łukiem koła — to superelipsa. Łuk wchodzi w prostą
     krawędź nagle i widać to nawet wtedy, gdy promień jest już właściwy; ten
     jeden brakujący fakt sprawiał, że sylwetka czytała się jak cudzy telefon.
     Przeglądarki, które `corner-shape` nie znają, rysują zwykłe zaokrąglenie —
     czyli dokładnie to, co było tu wcześniej. Nic nie psuje się starszym. */
  corner-shape: squircle;
  background: linear-gradient(155deg, #b6b1a8, #55524c 34%, #8d8880 58%, #423f3b);
  /* Shadows for a DARK backdrop. They were tuned for the light sheet that used
     to sit behind the phones; against the page they have to be black to read
     at all, and deeper, because nothing else lifts the device off the page.
     The two inset lines are the lit top edge and the shaded bottom edge of a
     metal rail — without them the gradient reads as flat paint. */
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 48px 90px -34px rgba(0,0,0,0.85),
    0 16px 34px -18px rgba(0,0,0,0.6);
}

/* The buttons. Percentages, not pixels, so they keep their places when --r-dev
   drops at the two breakpoints and the phone gets narrower. Each strip sits 2px
   proud of the rail and overlaps it by one, which is what makes it look milled
   into the metal rather than glued beside it.
   Left is the iPhone's side: the Action button, then volume up and volume down.
   The gaps in the gradient are the spaces between them. */
.phone-frame::before {
  content: ""; position: absolute;
  left: -2px; top: 14%; width: 3px; height: 25%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(to bottom,
    #9c978e 0 14%, transparent 14% 34%,
    #9c978e 34% 64%, transparent 64% 72%,
    #9c978e 72% 100%);
}
/* Right is the side button, alone and longer than any of them. */
.phone-frame::after {
  content: ""; position: absolute;
  right: -2px; top: 25%; width: 3px; height: 14%;
  border-radius: 0 2px 2px 0;
  background: #9c978e;
}

.phone-frame img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--r-dev) - 10px);
  /* Ekran musi mieć ten sam kształt rogu co obudowa, inaczej czarna obwódka
     robi się przy rogach raz szersza, raz węższa i całość wygląda na krzywą. */
  corner-shape: squircle;
  background: var(--paper, #f0f4ea);
  /* Czarna krawędź szkła. Malowana cieniem, a nie ramką, więc nie wchodzi do
     układu i zrzut zachowuje swój zmierzony rozmiar. */
  box-shadow: 0 0 0 7px #08090a;
}
.phone figcaption {
  margin: 0 auto; max-width: 32ch;
  text-align: center; font-size: 0.92rem; line-height: 1.5;
  color: var(--paper-ink-2, #46564a);
}

/* ---- Status pill: this app has not shipped -------------------------------
   No Buy button, no price, no download link, because there is no store page to
   send anyone to. The pill says where the app is and the line underneath says
   what that means. -------------------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); background: rgba(47,130,89,0.2);
  border: 1px solid rgba(159,211,180,0.4);
}
.status-pill .ic { width: 18px; height: 18px; color: var(--violet); }
.status-note { max-width: 500px; margin: 14px auto 0; font-size: 0.92rem; }

@media (max-width: 1080px) {
  .phone { --r-dev: 48px; }
  .phone-sheet { padding: 52px 30px 44px; }
  .phone-row { gap: 22px; }
}

/* Below the desktop width three phones side by side would shrink the type in
   the screenshots past reading, and stacking them would put roughly 1900px of
   picture between the reader and the first sentence about the app. So they
   become a rail that snaps, one phone at a time, with the next one peeking. */
@media (max-width: 980px) {
  .phone-sheet { padding: 44px 0 40px; }
  .phone-row {
    /* stretch, not flex-end: the two-row grid inside each phone is what keeps
       the frames on one baseline, and it only works if all three figures are
       the same height. With flex-end a caption that wraps to a third line drags
       its own phone down and the peeking neighbour sits crooked. */
    display: flex; gap: 22px; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 28px;
    padding: 6px 0 12px;
  }
  /* real gutters at both ends, so the first phone does not start on the fold
     and the last one does not end on it */
  .phone-row::before, .phone-row::after { content: ""; flex: 0 0 6px; }
  .phone { flex: 0 0 min(74%, 300px); scroll-snap-align: center; }
}
@media (max-width: 720px) {
  .phone { --r-dev: 46px; }
  .status-note { font-size: 0.88rem; }
}

/* ==========================================================================
   Nana's Level — the app's brass, kept on the app's own page
   --------------------------------------------------------------------------
   Same rule as Focus above: colour belongs to the app, the character belongs
   to the brand. Level is brass — ochre for workshop and wood, per the app's
   DESIGN.md — so this page keeps the site's dark architecture (same pill
   header, same footer, same grid, same type) and swaps navy-violet for it.
   Every rule is scoped to `body.app-level`, so cleaner.html, teleprompter.html
   and the Focus page render exactly as they did.

   The palette is the app's own, read off its three moods: the page background
   is the night theme (paper #110E09, surface #1B1710), the raised surfaces are
   the dusk theme (#2A241B, #352E23), and text is the dusk ink #F1EADC over the
   two soft inks. Accent text is the dusk accent #E0B45F rather than the day
   accent #C08A2E: the app puts its accent on paper, this page puts it on the
   dark, and #C08A2E there measures 3.0:1, which is too thin to read.

   The CTA is the one place that inverts. --grad-cta fills a button that the
   brand paints white-on-violet, and brass bright enough to look like the app
   cannot carry white text — #C08A2E under white is 3.0:1. Rather than darken
   the brass into bronze until white works, the button keeps the app's own
   colour and takes the app's ink, #1B1710, which measures 6.0:1 on the dark
   end of the gradient and 9.3:1 on the light one. That is also what the app
   does: accent behind, dark ink on top.

   --paper is the app's day paper, and it shows in exactly one place, behind
   the screenshot inside the frame, which is what a visitor sees for the moment
   before the JPEG arrives. Warm paper appearing and then warm paper arriving
   is one object loading. Green paper turning warm is a flicker.

   --paper-ink-2 is deliberately NOT the app's paper ink. It colours the
   captions under the phones and nothing else, and since the light sheet was
   taken out from behind them those captions sit on the dark page. The app's
   own soft ink, #7C7263, is meant for reading on paper and measures 3.5:1
   against this background. The dusk theme's soft ink, #A79B87, is the same
   colour warmed for a dark surface and measures 7.1:1, which is what a caption
   has to clear.

   The bezel used to need saying out loud here, because .phone-frame painted a
   hard-coded green and this page had to repaint it in brass. It doesn't any
   more: the rail is neutral titanium on every page, which is the whole reason
   the phones read as iPhones. Do not put an app colour back on it.

   ========================================================================== */
body.app-level {
  --bg:        #110e09;  /* the app's night paper */
  --bg-2:      #1b1710;  /* the app's night surface */
  --bg-3:      #241e15;
  --surface:   #2a241b;  /* the app's dusk paper */
  --surface-2: #352e23;  /* the app's dusk surface */

  --ink:      #f1eadc;   /* dusk ink */
  --ink-soft: #d9cdb6;
  --ink-dim:  #a79b87;   /* dusk soft ink */
  --ink-faint:#8d8271;   /* night soft ink */

  /* The brand hooks keep their names so every existing component picks the new
     colour up without a second selector. */
  --violet:   #e0b45f;   /* dusk accent — accent text, links, bullets */
  --violet-2: #d3a75a;   /* night accent */
  --indigo:   #c08a2e;   /* the app's day accent, for solid fills */
  --blue:     #e3d3ab;   /* pale brass, for the iridescent sweep */
  --magenta:  #d9a86a;

  --line:      rgba(241,234,220,0.10);
  --line-2:    rgba(241,234,220,0.18);
  --line-plum: rgba(224,180,95,0.35);

  --grad-cta:  linear-gradient(120deg, #e0b45f, #c08a2e);
  --grad-iris: linear-gradient(120deg, #e3d3ab, #e0b45f 50%, #c08a2e);

  --paper:       #f4f0e6;
  --paper-2:     #fcfaf3;
  --paper-ink:   #2b2519;
  --paper-ink-2: #a79b87;
}

/* the three soft lights behind everything, in the app's brass */
body.app-level::before {
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(192,138,46,0.34), transparent 60%),
    radial-gradient(50% 40% at 85% 8%, rgba(224,180,95,0.12), transparent 60%),
    radial-gradient(60% 50% at 12% 30%, rgba(211,167,90,0.09), transparent 60%),
    var(--bg);
}
body.app-level ::selection { background: rgba(224,180,95,0.30); }

/* Tinted glass: the header pill, the Apps dropdown and the subnav carry literal
   colours rather than variables, so they have to be said again here. */
body.app-level .nav          { background: rgba(32,26,18,0.62); }
body.app-level .drop-menu    { background: rgba(37,30,21,0.93); }
body.app-level .subnav .wrap { background: rgba(32,26,18,0.72); }

/* the CTA: the app's brass, with the app's ink on top (see the note above) */
body.app-level .btn-primary        { color: #1b1710; box-shadow: 0 12px 34px -10px rgba(192,138,46,0.75); }
body.app-level .btn-primary:hover  { box-shadow: 0 18px 46px -10px rgba(192,138,46,0.9); }
body.app-level .tool .t-ic         { box-shadow: 0 10px 24px -10px rgba(192,138,46,0.65); }
body.app-level .tool:hover .t-ic   { box-shadow: 0 16px 30px -12px rgba(192,138,46,0.85); }

/* cursor-follow glow on the cards (site.js adds .spotlight to every .tool) */
body.app-level .spotlight::after {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%),
              rgba(224,180,95,0.8), rgba(227,211,171,0.32) 42%, transparent 62%);
}
body.app-level .spotlight > .glow {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(192,138,46,0.16), transparent 55%);
}