/* Nightling marketing + legal site.
   The palette is the app's night theme exactly (design/nightling-design.html,
   section 2): true black so the page does not light a dark room either. */
:root {
  --bg: #000000;
  --surface: #12100d;
  --surface-2: #1a1712;
  --border: #262119;
  --hairline: #1e1b16;
  --ink: #f2ede4;
  --muted: #a79e90;
  --faint: #8f867a;
  --ember: #f5a623;
  --on-ember: #1a1206;
  --sleep: #a99ec6;
  --bottle: #8fb5a6;
  --pump: #c48fa5;
  --radius: 16px;
  --radius-lg: 26px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 50% -8%, #17130c 0%, rgba(0, 0, 0, 0) 62%),
    var(--bg);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
p { margin: 0 0 16px; }
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono {
  font-family: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Show only the active language, keeping the author's display value. */
html[data-lang="tr"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="tr"] { display: none; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- top bar */
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.74);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

.lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-toggle button {
  background: transparent; color: var(--faint); border: 0; cursor: pointer;
  font: 700 12px/1 "Figtree", sans-serif; padding: 8px 12px; letter-spacing: 0.06em;
}
.lang-toggle button[aria-pressed="true"] { background: rgba(245, 166, 35, 0.14); color: var(--ember); }

/* ------------------------------------------------------------------- hero */
.hero { padding: 76px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero .halo { width: 96px; height: 96px; border-radius: 26px; display: block; margin-bottom: 26px; box-shadow: 0 22px 60px -26px rgba(245, 166, 35, 0.55), 0 0 0 1px var(--border); }
.hero h1 { font-size: clamp(38px, 5.4vw, 60px); margin-bottom: 14px; }
.hero .tagline { color: var(--ember); font-size: clamp(19px, 2.3vw, 24px); font-weight: 700; margin-bottom: 18px; letter-spacing: -0.01em; }
.hero .lede { color: var(--muted); font-size: 17.5px; max-width: 30em; }

.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 14px; padding: 11px 18px; color: var(--ink);
}
.badge small { display: block; color: var(--faint); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.badge span > span { font-weight: 700; font-size: 15px; }
.link-ghost { color: var(--muted); font-size: 15px; font-weight: 600; }
.link-ghost:hover { color: var(--ember); }

/* ------------------------------------------------- the phone, drawn in CSS */
.device {
  width: 300px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 42px; padding: 14px;
  background: linear-gradient(180deg, #0d0b08 0%, #000 60%);
  box-shadow: 0 40px 90px -40px rgba(245, 166, 35, 0.28), 0 0 0 1px rgba(38, 33, 25, 0.6);
}
.screen { background: #000; border-radius: 30px; padding: 26px 20px 22px; }

.answer-label { color: var(--muted); font-size: 12.5px; letter-spacing: 0.02em; }
.answer { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 2px; }
.answer-sub { color: var(--faint); font-size: 12.5px; }

.next-side { display: flex; align-items: center; gap: 9px; margin: 20px 0 18px; color: var(--muted); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); flex: none; }
.dot.breath { animation: breath 5s ease-in-out infinite; }
@keyframes breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; }
.tile b { display: block; font-size: 19px; letter-spacing: -0.02em; }
.tile span { color: var(--faint); font-size: 11.5px; }

.primary-action {
  margin-top: 16px; height: 56px; border-radius: 16px;
  background: var(--ember); color: var(--on-ember);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15.5px;
}

/* Lock-screen card, floated over the device */
.lockcard {
  margin: 18px auto 0; width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.lockcard .grow { flex: 1; }
.lockcard .title { font-size: 13.5px; font-weight: 700; }
.lockcard .time { font-size: 20px; letter-spacing: -0.02em; }
.lockcard .keys { display: flex; gap: 8px; }
.lockcard .key {
  border: 1px solid var(--border); border-radius: 11px; padding: 7px 11px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}

/* --------------------------------------------------------------- sections */
section { padding: 66px 0; border-top: 1px solid var(--hairline); }
.eyebrow { color: var(--ember); font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.section-title { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.section-lede { color: var(--muted); max-width: 40em; font-size: 17px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 24px;
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.65; }
.card .mark { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 14px; background: rgba(245, 166, 35, 0.14); }
.card .mark i { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); display: block; }
.card .mark.sleep { background: rgba(169, 158, 198, 0.16); } .card .mark.sleep i { background: var(--sleep); }
.card .mark.bottle { background: rgba(143, 181, 166, 0.16); } .card .mark.bottle i { background: var(--bottle); }
.card .mark.pump { background: rgba(196, 143, 165, 0.16); } .card .mark.pump i { background: var(--pump); }

/* Promise band */
.promise { text-align: center; }
.promise h2 { font-size: clamp(28px, 4.2vw, 44px); max-width: 16em; margin: 0 auto 18px; }
.promise p { color: var(--muted); max-width: 34em; margin: 0 auto 14px; }
.promise .facts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.fact { border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.plan.lead { border-color: rgba(245, 166, 35, 0.45); }
.plan h3 { font-size: 20px; margin-bottom: 6px; }
.plan .price { font-size: 15px; color: var(--ember); font-weight: 700; margin-bottom: 16px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { color: var(--muted); font-size: 14.5px; padding: 7px 0 7px 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); opacity: 0.75; }
.plan .note { color: var(--faint); font-size: 12.5px; margin-top: 16px; }

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 0 72px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 12px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 16px; }
.legal b, .legal strong { color: var(--ink); font-weight: 700; }
.legal .meta { color: var(--faint); font-size: 13.5px; margin-bottom: 26px; }
.legal .back { color: var(--muted); font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 22px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal .callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin: 24px 0; }
.legal .callout p:last-child { margin-bottom: 0; }

/* Footer */
footer { border-top: 1px solid var(--hairline); padding: 34px 0 52px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.f-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.f-brand img { width: 24px; height: 24px; border-radius: 7px; }
.f-links { display: flex; gap: 20px; margin-left: auto; }
.f-links a { color: var(--muted); font-size: 14px; font-weight: 600; }
footer small { color: var(--faint); font-size: 12.5px; width: 100%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* On a phone the brand and the section links crowd each other and push the
     language toggle off the edge. Those links only jump to sections this page
     scrolls through anyway, so the toggle keeps the room. */
  .nav-links a { display: none; }
  .nav .wrap { gap: 12px; }
  .brand { font-size: 17px; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .f-links { margin-left: 0; flex-wrap: wrap; gap: 14px; }
  .device, .lockcard { width: 100%; max-width: 320px; }
}

/* The app's own rule: with Reduce Motion on, the ember does not move. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}