/* AI Girlfriend 3D — website styles
   Look and feel follows the game UI: sky gradients, bubbly pink buttons,
   deep indigo Premium panels, rounded type. */

:root {
  --ink: #26235a;
  --ink-soft: #4a4783;
  --muted: #6a6798;
  --bg: #fbf9ff;
  --card: #ffffff;
  --line: #e7e2fb;

  --pink: #ff5c9d;
  --pink-deep: #dc2f74;
  --purple: #6a3fd8;
  --purple-deep: #4a25a8;
  --sky: #a9cdff;
  --lav: #cdbcff;
  --blush: #ffd3ea;
  --gold: #ffc933;
  --cyan: #21c7f5;
  --navy: #2a2a5e;
  --navy-deep: #1a1940;

  --radius: 28px;
  --radius-sm: 18px;
  --shadow: 0 18px 50px -18px rgba(74, 37, 168, 0.35);
  --shadow-sm: 0 8px 24px -12px rgba(74, 37, 168, 0.3);
  --wrap: 1160px;
  --head: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink-deep); }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }

.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 1.05rem/1 var(--head); letter-spacing: 0.01em;
  padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; color: #fff; position: relative;
  background: linear-gradient(180deg, #f24886, var(--pink-deep));
  box-shadow: 0 6px 0 #a91f57, 0 14px 24px -8px rgba(220, 47, 116, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 0 #a91f57, 0 18px 28px -8px rgba(220, 47, 116, 0.6); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a91f57, 0 6px 12px -6px rgba(220, 47, 116, 0.6); }
.btn-sm { padding: 11px 20px; font-size: 0.95rem; box-shadow: 0 4px 0 #a91f57, 0 10px 18px -8px rgba(220, 47, 116, 0.55); }
.btn-sm:hover { box-shadow: 0 6px 0 #a91f57, 0 12px 20px -8px rgba(220, 47, 116, 0.55); }
.btn-ghost {
  background: #fff; color: var(--purple-deep);
  box-shadow: 0 6px 0 var(--line), 0 12px 22px -10px rgba(74, 37, 168, 0.35);
}
.btn-ghost:hover { color: var(--purple-deep); box-shadow: 0 8px 0 var(--line), 0 16px 26px -10px rgba(74, 37, 168, 0.35); }
.btn-ghost:active { box-shadow: 0 2px 0 var(--line); }
.badge-link { display: inline-block; transition: transform 0.15s ease; }
.badge-link:hover { transform: translateY(-3px) scale(1.02); }
.badge-link img { height: 62px; width: auto; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 14px 0 auto 0; z-index: 50; pointer-events: none; }
.nav-bar {
  pointer-events: auto; width: min(var(--wrap), 100% - 28px); margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-sm);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.2rem/1 var(--head); color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 4px 10px -3px rgba(106, 63, 216, 0.6); }
.brand-mark .ic { width: 18px; height: 18px; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: #efeaff; color: var(--purple-deep); }
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #efeaff; color: var(--purple-deep); cursor: pointer; place-items: center; }
.nav-toggle .ic { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav.open .nav-bar { border-radius: 28px; flex-wrap: wrap; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; order: 5; width: 100%;
    padding: 8px 0 6px; border-top: 1px solid var(--line); margin-top: 8px;
  }
  .nav.open .nav-links a { padding: 13px 14px; }
  .nav-cta { margin-left: 0; }
}
@media (max-width: 420px) { .nav-cta .btn { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 150px 0 130px;
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(45% 45% at 5% 90%, rgba(255, 211, 234, 0.9), transparent 70%),
    linear-gradient(180deg, var(--sky) 0%, var(--lav) 58%, var(--blush) 100%);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.hero-grid > * { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; max-width: 100%; text-align: left;
  background: rgba(255, 255, 255, 0.75); color: var(--purple-deep);
  font: 600 0.92rem/1 var(--head); letter-spacing: 0.02em; box-shadow: var(--shadow-sm);
}
.eyebrow .ic { color: var(--pink-deep); width: 1.1em; height: 1.1em; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 700; margin: 22px 0 20px; color: var(--navy-deep); }
.hero h1 em {
  font-style: normal; color: var(--pink-deep);
  background: linear-gradient(transparent 68%, rgba(255, 255, 255, 0.9) 68% 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.08em;
}
.hero .lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 34ch; margin-bottom: 30px; font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.chips .ic { width: 1em; height: 1em; color: var(--purple); }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; z-index: 1; }
.hero-wave path { fill: var(--bg); }

/* floating hearts */
.float { position: absolute; z-index: -1; color: #fff; opacity: 0.85; animation: bob 7s ease-in-out infinite; }
.float.pink { color: var(--pink); opacity: 0.8; }
.float.gold { color: var(--gold); opacity: 0.9; }
.float .ic { width: 100%; height: 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(8deg); } }

/* ---------- Phone mock ---------- */
.stage { position: relative; }
.phone {
  position: relative; padding: 11px 16px; border-radius: 40px;
  background: linear-gradient(145deg, #34336e, #17163a);
  box-shadow: 0 40px 70px -24px rgba(38, 35, 90, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.phone::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 44px; margin-top: -22px; border-radius: 4px; background: #08072a; }
.phone::after { content: ""; position: absolute; right: -3px; top: 26%; width: 4px; height: 56px; border-radius: 3px; background: #24235a; }
.phone .screen { border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #b9a8ff; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-tilt { transform: rotate(-3deg); animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } }

.pop {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 20px; background: #fff; box-shadow: var(--shadow);
  font: 600 0.95rem/1.25 var(--head); color: var(--ink);
}
.pop .dot { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.pop .dot .ic { width: 18px; height: 18px; }
.pop small { display: block; font: 600 0.75rem/1.2 var(--body); color: var(--muted); }
.pop-a { left: -4%; bottom: 10%; animation: bob 6s ease-in-out infinite; }
.pop-b { right: -3%; top: -6%; animation: bob 8s ease-in-out -2s infinite; }
.dot.pink { background: linear-gradient(135deg, var(--pink), var(--pink-deep)); }
.dot.gold { background: linear-gradient(135deg, #ffd85a, #f5a800); }
.dot.blue { background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.dot.green { background: linear-gradient(135deg, #46d68c, #1ea968); }

@media (max-width: 960px) {
  .hero { padding: 128px 0 110px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .cta-row, .chips { justify-content: center; }
  .pop-a { left: 0; } .pop-b { right: 0; }
}
@media (max-width: 520px) {
  .pop { padding: 9px 12px; font-size: 0.82rem; border-radius: 16px; }
  .pop .dot { width: 28px; height: 28px; border-radius: 10px; }
  .pop small { display: none; }
  .phone { padding: 7px 10px; border-radius: 28px; }
  .phone .screen { border-radius: 20px; }
  .badge-link img { height: 56px; }
}

/* ---------- Sections ---------- */
section { position: relative; }
.sec { padding: 96px 0; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.kicker { display: inline-block; font: 700 0.95rem/1 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 14px; }
.sec-head h2, .split h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy-deep); }
.sec-head p { color: var(--muted); font-size: 1.15rem; margin: 16px 0 0; font-weight: 600; }

/* reveal on scroll (only hides content when JS is running) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Feature bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.tile {
  position: relative; overflow: hidden; padding: 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.span-3 { grid-column: span 3; } .span-2 { grid-column: span 2; }
.tile h3 { font-size: 1.45rem; margin: 18px 0 8px; color: var(--navy-deep); }
.tile p { color: var(--muted); margin: 0; font-weight: 600; }
.icon-sq { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 16px -8px currentColor; }
.icon-sq .ic { width: 28px; height: 28px; }
.g-pink { background: linear-gradient(135deg, #ff7db3, var(--pink-deep)); color: #fff; }
.g-purple { background: linear-gradient(135deg, #9a72ff, var(--purple-deep)); color: #fff; }
.g-blue { background: linear-gradient(135deg, #5bd6ff, #3a7bf0); color: #fff; }
.g-gold { background: linear-gradient(135deg, #ffd85a, #f29d00); color: #fff; }
.g-green { background: linear-gradient(135deg, #52e0a0, #17a566); color: #fff; }
.icon-sq.g-pink { box-shadow: 0 10px 18px -8px rgba(220, 47, 116, 0.7); }
.icon-sq.g-purple { box-shadow: 0 10px 18px -8px rgba(106, 63, 216, 0.7); }
.icon-sq.g-blue { box-shadow: 0 10px 18px -8px rgba(58, 123, 240, 0.7); }
.icon-sq.g-gold { box-shadow: 0 10px 18px -8px rgba(242, 157, 0, 0.7); }
.icon-sq.g-green { box-shadow: 0 10px 18px -8px rgba(23, 165, 102, 0.7); }

.tile-chat { background: linear-gradient(160deg, #fff 40%, #f3edff); }
.chat { display: grid; gap: 10px; margin-top: 22px; }
.bubble { max-width: 88%; padding: 11px 16px; border-radius: 20px; font-weight: 700; font-size: 0.98rem; line-height: 1.4; }
.bubble.her { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--ink); box-shadow: 0 6px 14px -10px rgba(38, 35, 90, 0.5); }
.bubble.you { justify-self: end; background: linear-gradient(135deg, #7d55ee, var(--purple-deep)); color: #fff; border-bottom-right-radius: 6px; }
.bubble.her b { display: block; font: 700 0.75rem/1 var(--head); color: var(--pink-deep); margin-bottom: 4px; letter-spacing: 0.03em; }
.action-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #e6fbf1; color: #12704a; font: 700 0.85rem/1 var(--head); }
.action-chip .ic { width: 1em; height: 1em; }
.typing { justify-self: start; display: inline-flex; gap: 5px; padding: 13px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--lav); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); background: var(--pink); } }

.tile-shot { display: flex; flex-direction: column; }
.tile-shot .shot { margin: 22px -30px -30px; border-top: 1px solid var(--line); flex: 1; min-height: 190px; overflow: hidden; }
.tile-shot .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.mini-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.mini-list li { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); }
.mini-list .ic { color: var(--purple); width: 1.1em; height: 1.1em; }

@media (max-width: 960px) { .span-3, .span-2 { grid-column: span 6; } }
@media (min-width: 641px) and (max-width: 960px) { .span-2 { grid-column: span 3; } .span-2:last-child { grid-column: span 6; } }

/* ---------- Showcase rows ---------- */
.showcase { background: linear-gradient(180deg, var(--bg), #f1ecff 20%, #f1ecff 80%, var(--bg)); }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.split + .split { margin-top: 110px; }
.split.flip .split-media { order: 2; }
.split p.lead { font-size: 1.15rem; color: var(--muted); font-weight: 600; margin: 16px 0 22px; }
.split h2 { margin-top: 14px; }
.tick { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tick li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; color: var(--ink-soft); }
.tick li::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.frame { position: relative; border-radius: 30px; padding: 12px; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.frame img { border-radius: 20px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.frame-glow::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; border-radius: 50px; background: radial-gradient(closest-side, rgba(255, 92, 157, 0.35), transparent); filter: blur(30px); }
.trait-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.trait-cloud li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 600 0.95rem/1 var(--head); color: var(--ink-soft); }
.trait-cloud li.on { background: linear-gradient(135deg, #7d55ee, var(--purple-deep)); border-color: transparent; color: #fff; }
.trait-cloud li.hot { background: linear-gradient(135deg, #ff7db3, var(--pink-deep)); border-color: transparent; color: #fff; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .split-media { order: 0; }
  .split + .split { margin-top: 80px; }
}

/* ---------- Journey ---------- */
.journey { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; height: 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--lav) 0 14px, transparent 14px 24px); z-index: 0; }
.stage-card { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.stage-node {
  width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.5rem/1 var(--head); color: #fff; box-shadow: 0 10px 20px -8px rgba(106, 63, 216, 0.6), 0 0 0 6px var(--bg);
  background: linear-gradient(135deg, #9a72ff, var(--purple-deep));
}
.stage-card:nth-child(2) .stage-node { background: linear-gradient(135deg, #6f8bff, #3a55d8); }
.stage-card:nth-child(3) .stage-node { background: linear-gradient(135deg, #c86bf0, #8b2fc9); }
.stage-card:nth-child(4) .stage-node { background: linear-gradient(135deg, #ff8fc2, #e6357a); }
.stage-card:nth-child(5) .stage-node { background: linear-gradient(135deg, #ffd85a, #f29d00); }
.stage-node .ic { width: 30px; height: 30px; }
.stage-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.stage-card p { color: var(--muted); font-weight: 600; font-size: 0.97rem; margin: 0; }
.tasks {
  max-width: 520px; margin: 56px auto 0; padding: 26px 28px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.tasks-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 1.1rem/1 var(--head); margin-bottom: 14px; }
.tasks-head span { color: var(--pink-deep); font-size: 0.95rem; }
.meter { height: 14px; border-radius: 99px; background: #eee9ff; overflow: hidden; margin-bottom: 18px; }
.meter i { display: block; height: 100%; width: 42%; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #ff8fc2); }
.task { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-weight: 700; color: var(--ink-soft); border-top: 1px dashed var(--line); }
.task:first-of-type { border-top: 0; }
.task .box { width: 26px; height: 26px; border-radius: 9px; flex: none; border: 2.5px solid var(--lav); display: grid; place-items: center; color: #fff; }
.task.done .box { background: #2fc784; border-color: #2fc784; }
.task.done { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(106, 103, 152, 0.4); }
.task .box .ic { width: 15px; height: 15px; stroke-width: 3.5; }
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; gap: 6px; max-width: 460px; margin-inline: auto; }
  .journey::before { left: 35px; right: auto; top: 30px; bottom: 30px; width: 6px; height: auto; background: repeating-linear-gradient(180deg, var(--lav) 0 14px, transparent 14px 24px); }
  .stage-card { display: grid; grid-template-columns: 70px 1fr; column-gap: 20px; text-align: left; align-items: center; padding: 10px 0; }
  .stage-node { margin: 0; grid-row: span 2; }
  .stage-card h3 { align-self: end; } .stage-card p { align-self: start; }
}

/* ---------- Gameplay band ---------- */
.band {
  color: #fff; padding: 100px 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 60% at 15% 0%, rgba(154, 114, 255, 0.5), transparent 70%),
    radial-gradient(45% 55% at 100% 100%, rgba(255, 92, 157, 0.4), transparent 70%),
    linear-gradient(180deg, var(--navy), var(--navy-deep));
}
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.07;
  background-image: radial-gradient(#fff 2px, transparent 2.5px); background-size: 34px 34px;
}
.band .kicker { color: var(--gold); }
.band .sec-head h2 { color: #fff; }
.band .sec-head p { color: #cfc8f5; }
.gp-hero, .gp-card {
  border-radius: 34px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gp-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; padding: 40px; }
.gp-text h3 { color: #fff; font-size: 2rem; margin: 18px 0 10px; }
.gp-text p, .gp-card p { color: #d8d0f7; font-weight: 600; }
.band .tick li { color: #efe8ff; }
.band .frame { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6); }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.gp-card { padding: 30px; transition: transform 0.25s ease, background 0.25s ease; }
.gp-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.12); }
.gp-card h3 { color: #fff; font-size: 1.5rem; margin: 18px 0 10px; }
.gp-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.gp-tags li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font: 600 0.85rem/1 var(--head); color: #f3edff; }
@media (max-width: 960px) {
  .gp-hero { grid-template-columns: 1fr; padding: 26px; gap: 28px; }
  .gp-grid { grid-template-columns: 1fr; }
}

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.about h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy-deep); }
.about-text p { color: var(--ink-soft); font-weight: 600; font-size: 1.1rem; }
.about-text b { color: var(--navy-deep); }
.about-text .fit { margin: 26px 0 12px; font: 600 1.15rem/1.3 var(--head); color: var(--navy-deep); }
.fit-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.fit-list li { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 600 0.95rem/1 var(--head); color: var(--purple-deep); box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; }
.faq details[open] { box-shadow: var(--shadow); border-color: var(--lav); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font: 600 1.15rem/1.3 var(--head); color: var(--navy-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 1.5rem/1 var(--head); color: var(--purple-deep); background: #efeaff; transition: transform 0.25s, background 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--blush); color: var(--pink-deep); }
.faq .answer { padding: 0 24px 22px; color: var(--muted); font-weight: 600; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.cta { padding: 20px 0 100px; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 74px 26px; border-radius: 44px; color: var(--navy-deep);
  background:
    radial-gradient(50% 70% at 10% 100%, rgba(255, 211, 234, 0.95), transparent 70%),
    radial-gradient(50% 70% at 95% 0%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(135deg, var(--sky), var(--lav));
  box-shadow: var(--shadow);
}
.cta-card h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 14px; }
.cta-card p { font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 30px; }
.cta-card .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: #c9c3ee; padding: 64px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer p { font-weight: 600; font-size: 0.98rem; max-width: 34ch; }
.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; letter-spacing: 0.02em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a, .footer button.link { color: #c9c3ee; text-decoration: none; font: 700 0.98rem/1.3 var(--body); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer a:hover, .footer button.link:hover { color: #fff; text-decoration: underline; }
.foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.9rem; color: #9993cc; font-weight: 600; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: span 2; } }

/* ---------- Feedback dialog ---------- */
dialog.fb { width: min(520px, 100% - 28px); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -20px rgba(26, 25, 64, 0.6); overflow: auto; }
dialog.fb::backdrop { background: rgba(26, 25, 64, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.fb[open] { animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(0.96); } }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 26px; color: #fff; background: linear-gradient(135deg, #8d63f5, var(--purple-deep) 55%, var(--pink-deep)); }
.fb-head h2 { font-size: 1.5rem; }
.fb-head p { margin: 2px 0 0; font-size: 0.95rem; font-weight: 600; opacity: 0.9; }
.fb-close { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.22); }
.fb-close:hover { background: rgba(255, 255, 255, 0.36); }
.fb-close .ic { width: 20px; height: 20px; }
.fb-body { padding: 24px 26px 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font: 600 0.95rem/1 var(--head); margin-bottom: 8px; color: var(--ink-soft); }
.field label small { font: 600 0.8rem var(--body); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 600 1rem/1.4 var(--body); color: var(--ink); padding: 13px 16px; border-radius: 16px; border: 2px solid var(--line); background: #faf8ff; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px rgba(106, 63, 216, 0.14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.fb-note { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin: 4px 0 18px; }
.fb-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 16px; font-weight: 700; font-size: 0.95rem; }
.fb-status.show { display: block; }
.fb-status.ok { background: #e6fbf1; color: #12704a; }
.fb-status.err { background: #ffe9ee; color: #b3193f; }
.fb-body .btn { width: 100%; }
.fb-body .btn[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Document pages (privacy, data deletion) ---------- */
.doc-hero { padding: 140px 0 70px; text-align: center; background: linear-gradient(180deg, var(--sky), var(--lav) 65%, var(--bg)); }
.doc-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--navy-deep); margin: 16px 0 10px; }
.doc-hero p { color: var(--ink-soft); font-weight: 700; margin: 0 auto; max-width: 52ch; }
.doc-wrap { padding: 0 0 90px; margin-top: -10px; }
.doc { width: min(820px, 100% - 32px); margin-inline: auto; padding: 46px 52px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.doc h2 { font-size: 1.55rem; color: var(--navy-deep); margin: 42px 0 12px; padding-top: 6px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.15rem; margin: 26px 0 8px; color: var(--purple-deep); }
.doc p, .doc li { color: var(--ink-soft); font-weight: 600; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1rem; display: grid; gap: 8px; }
.doc li::marker { color: var(--pink); }
.doc .meta { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #efeaff; color: var(--purple-deep); font: 600 0.92rem/1 var(--head); margin-bottom: 26px; }
.doc .contact-box { margin: 20px 0 0; padding: 22px 26px; border-radius: 22px; background: #f5f0ff; border: 1px solid var(--line); font-weight: 700; }
.doc .contact-box a { font-weight: 800; }
.doc .callout { padding: 18px 22px; border-radius: 20px; background: #fff4f9; border: 1px solid #ffd0e6; margin: 0 0 1.4rem; }
.doc .callout p:last-child { margin: 0; }
.doc .steps { counter-reset: s; list-style: none; padding: 0; gap: 14px; }
.doc .steps li { counter-increment: s; position: relative; padding: 16px 18px 16px 68px; border-radius: 20px; background: #faf8ff; border: 1px solid var(--line); }
.doc .steps li::before { content: counter(s); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 1.15rem/1 var(--head); color: #fff; background: linear-gradient(135deg, var(--pink), var(--purple)); }
.doc .steps b { display: block; font-family: var(--head); color: var(--navy-deep); font-size: 1.05rem; }
.doc .btn { margin-top: 8px; }
@media (max-width: 640px) { .doc { padding: 30px 22px; border-radius: 26px; } .doc .steps li { padding-left: 62px; } }

/* 404 */
.lost { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 30px; background: linear-gradient(180deg, var(--sky), var(--lav) 60%, var(--blush)); }
.lost h1 { font-size: clamp(4rem, 14vw, 8rem); color: var(--pink-deep); }
.lost p { font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); margin: 10px 0 28px; }

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

/* ---------- Cookie consent banner (only used when analytics is switched on) ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; padding: 20px 22px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px -16px rgba(26, 25, 64, 0.5); border: 1px solid var(--line); animation: pop 0.3s ease; }
.consent p { margin: 0 0 14px; font-weight: 600; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.consent b { color: var(--navy-deep); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 640px) { .consent { right: auto; left: 24px; bottom: 24px; } }