/* Kishi Notch site. Dark-first, no frameworks. */

:root {
  --bg: #050506;
  --bg-2: #0a0a0d;
  --surface: #0f0f13;
  --surface-2: #16161b;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --muted: #a5a5ae;
  --dim: #85858f;

  /* system-like colors (dark appearance) */
  --white: #ffffff;
  --green: #30d158;
  --brand: #35d88a;
  --brand-2: #00a47c;
  --pink: #ff375f;
  --music: #f2306d;
  --orange: #ff9f0a;
  --red: #ff453a;
  --blue: #0a84ff;
  --indigo: #6e6cf0;
  --teal: #40c8e0;
  --purple: #bf5af2;
  --yellow: #ffd60a;
  --accent: var(--brand);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Inter, Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Inter, Roboto, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Island only: a subtle spring (JS swaps in a generated linear() curve, ~2% overshoot). */
  --sp: cubic-bezier(0.3, 1.06, 0.4, 1);
  --sp-d: 0.6s;
  /* Everything else: smooth exponential ease-out, no overshoot. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-panel: var(--ease-out);
  --sp-panel-d: 0.45s;
  --sp-knob: var(--ease-out);
  --sp-knob-d: 0.35s;

  --radius: 22px;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.ic { width: 1em; height: 1em; flex: none; }

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

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: #fff; color: #000; border-radius: 10px; transform: translateY(-160%); transition: transform .2s; text-decoration: none; font-weight: 600; }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1240px; }
.wrap--narrow { max-width: 820px; }
.center { text-align: center; }

/* ---------- type ---------- */
h1 {
  font-size: clamp(46px, 8.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 700;
}
h2 {
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
}
h3 { font-size: 19px; letter-spacing: -0.015em; font-weight: 650; line-height: 1.25; }
.lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.fine { color: var(--dim); font-size: 14px; }
.grad { color: #86e8b8; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--sp-knob), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.97); }
.btn--lg { height: 54px; padding: 0 26px; font-size: 16.5px; }
.btn--small { height: 32px; padding: 0 14px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn--light { background: #f5f5f7; color: #0a0a0a; }
.btn--light:hover { background: #fff; }
.btn--ghost { background: rgba(255,255,255,.06); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn.is-soon { cursor: default; background: rgba(245,245,247,.92); }
.btn.is-soon:active { transform: none; }
.btn .ic { width: 18px; height: 18px; }
.soon-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: #0a0a0a; color: #f5f5f7;
}
.btn--small .soon-tag { display: none; }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: var(--text);
  font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform .3s var(--sp-knob), color .2s;
}
.chip:hover { background: rgba(255,255,255,.11); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"], .chip.is-on { background: #f5f5f7; color: #0a0a0a; border-color: #f5f5f7; }
.chip--icon { width: 36px; padding: 0; }
.chip .ic { width: 14px; height: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  font-size: 14px; color: #d8d8de; font-weight: 500; margin-bottom: 26px;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(53,216,138,.18); }

/* ---------- top notch nav ---------- */
.topnotch {
  position: fixed; top: 0; left: 50%; z-index: 50;
  transform: translateX(-50%);
  width: min(880px, calc(100% - 24px));
}
.topnotch__bar {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  height: 54px; padding: 0 10px 0 16px;
  background: #000;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.06);
  transition: border-radius .3s var(--ease-out);
}
.topnotch__bar::before, .topnotch__bar::after {
  content: ""; position: absolute; top: 0; width: 12px; height: 12px;
}
.topnotch__bar::before { left: -12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, #000 12px); }
.topnotch__bar::after { right: -12px; background: radial-gradient(circle at 100% 100%, transparent 11.5px, #000 12px); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap; }
.brand img { border-radius: 6px; }
.topnotch__links { display: flex; gap: 2px; margin: 0 auto; }
.topnotch__links a { padding: 7px 11px; border-radius: 999px; text-decoration: none; color: #c9c9d0; font-size: 14px; font-weight: 500; transition: color .2s, background-color .2s; }
.topnotch__links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topnotch__end { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.07); }
.lang button { border: 0; background: transparent; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: #b9b9c2; cursor: pointer; transition: background-color .2s, color .2s; }
.lang button[aria-pressed="true"] { background: #f5f5f7; color: #000; }
.menu-btn { display: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--sp-panel); }
.menu-btn span:first-child { top: 14px; }
.menu-btn span:last-child { top: 20px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.section--tight { padding: clamp(64px, 8vw, 110px) 0; }
.section__head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section__head .lead { margin: 18px auto 0; }
.section__head h2 { margin-top: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 132px 0 40px; overflow: hidden; isolation: isolate; }
.hero__glow {
  position: absolute; inset: -10% -20% auto; height: 1100px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 32% at 50% 62%, rgba(53, 216, 138, .16), transparent 70%),
    radial-gradient(34% 30% at 28% 70%, rgba(110, 108, 240, .2), transparent 70%),
    radial-gradient(34% 30% at 74% 66%, rgba(242, 48, 109, .14), transparent 70%);
  filter: blur(10px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(0, -40px, 0) scale(1.06); } }
.hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: 26px; max-width: 58ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.hero .fine { margin-top: 18px; }

.device { margin: 64px 0 0; }
.chapters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 18px; }
.chapters__list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chapters__tools { display: flex; gap: 6px; }
.chapter {
  position: relative; overflow: hidden;
  height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--muted); font-size: 13px; font-weight: 550; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.chapter:hover { color: #fff; }
.chapter[aria-current="true"] { color: #fff; border-color: var(--line-2); background: rgba(255,255,255,.08); }
.chapter__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.chapters__tools .chip { height: 32px; font-size: 13px; }
.chapters__tools .chip--icon { width: 32px; }

.works { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 56px; color: var(--dim); font-size: 15px; font-weight: 550; }
.works li:first-child { color: var(--muted); font-weight: 500; width: 100%; text-align: center; margin-bottom: 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- stage / screen ---------- */
.stage {
  --k: 1;
  position: relative; overflow: hidden;
  height: 280px;
  border-radius: var(--radius);
  background: var(--wall, #1b2238);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6);
  isolation: isolate;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.stage::after { /* soft glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.stage--hero {
  height: 410px; border-radius: 26px 26px 18px 18px;
  border: 10px solid #0d0d10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -40px rgba(0,0,0,.9), 0 0 120px -30px rgba(110,108,240,.35);
}
.stage--mini { height: 180px; border-radius: 18px; }
.stage--card { height: 220px; border-radius: 18px 18px 0 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.stage--panel { height: 380px; max-width: 980px; margin: 0 auto; }
.stage--final { position: absolute; top: 0; left: 0; right: 0; height: 260px; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.stage--final::after { display: none; }

[data-wall="dusk"] { --wall: radial-gradient(90% 70% at 20% 110%, rgba(255,140,170,.35), transparent 60%), radial-gradient(70% 60% at 85% 0%, rgba(120,150,255,.35), transparent 60%), linear-gradient(180deg, #2b375c 0%, #55588a 48%, #8a6784 100%); }
[data-wall="rose"] { --wall: radial-gradient(80% 80% at 15% 100%, rgba(255,70,130,.5), transparent 60%), radial-gradient(70% 70% at 90% 10%, rgba(140,80,255,.45), transparent 60%), linear-gradient(170deg, #1d1033 0%, #3b1a4b 50%, #67244f 100%); }
[data-wall="night"] { --wall: radial-gradient(80% 70% at 80% 100%, rgba(10,132,255,.45), transparent 60%), radial-gradient(60% 60% at 10% 0%, rgba(110,108,240,.4), transparent 60%), linear-gradient(180deg, #0c1530 0%, #18285a 55%, #23387a 100%); }
[data-wall="forest"] { --wall: radial-gradient(80% 80% at 85% 100%, rgba(53,216,138,.4), transparent 60%), radial-gradient(60% 60% at 10% 0%, rgba(64,200,224,.25), transparent 60%), linear-gradient(180deg, #08201b 0%, #0f3a2f 55%, #175a47 100%); }
[data-wall="ember"] { --wall: radial-gradient(80% 80% at 80% 100%, rgba(255,159,10,.45), transparent 60%), radial-gradient(60% 60% at 10% 0%, rgba(255,69,58,.3), transparent 60%), linear-gradient(180deg, #23110a 0%, #4c2412 55%, #7a3d17 100%); }
[data-wall="ocean"] { --wall: radial-gradient(80% 80% at 80% 100%, rgba(64,200,224,.4), transparent 60%), radial-gradient(60% 60% at 10% 0%, rgba(110,108,240,.35), transparent 60%), linear-gradient(180deg, #0a1b31 0%, #12365a 55%, #1d5d85 100%); }
[data-wall="aurora"] { --wall: radial-gradient(60% 70% at 20% 100%, rgba(53,216,138,.38), transparent 60%), radial-gradient(60% 70% at 85% 90%, rgba(191,90,242,.4), transparent 60%), radial-gradient(60% 60% at 50% 0%, rgba(10,132,255,.3), transparent 60%), linear-gradient(180deg, #0b1124 0%, #161a3c 55%, #241c4a 100%); }

.stage__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-size: 13px; color: rgba(255,255,255,.88);
}
.stage__hint .ic { width: 14px; height: 14px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } .stage__hint .ic { display: none; } }

/* simulated macOS menu bar */
.mbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  height: calc(32px * var(--k));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(12px * var(--k));
  font-size: calc(13px * var(--k)); color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.14);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Items that don't fit wrap onto a hidden second line instead of being cut mid-word. */
.mbar__left, .mbar__right { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: calc(16px * var(--k)); row-gap: 40px; height: calc(32px * var(--k)); white-space: nowrap; overflow: hidden; max-width: calc(50% - 214px * var(--k)); }
.mbar__left > *, .mbar__right > * { height: calc(32px * var(--k)); display: inline-flex; align-items: center; }
.mbar__right { flex-direction: row-reverse; column-gap: calc(13px * var(--k)); }
.mbar__left b { font-weight: 700; }
/* Only show menu bar items where the expanded island leaves room for them. */
.stage[data-side="none"] .mbar__left, .stage[data-side="none"] .mbar__right > * { display: none; }
.stage[data-side="tight"] .mbar__left > span, .stage[data-side="tight"] .mbar__right > .ic, .stage[data-side="tight"] .mb-clock { display: none; }
.mbar .ic { width: calc(15px * var(--k)); height: calc(15px * var(--k)); }
.mbar .mb-bat { display: inline-flex; align-items: center; }
.mbar .mb-bat svg { height: calc(14px * var(--k)); width: auto; }

/* ---------- island ---------- */
.isl-wrap {
  position: absolute; top: 0; left: 50%; z-index: 1;
  width: 460px; height: 250px; margin-left: -230px;
  transform: scale(var(--k)); transform-origin: 50% 0;
  pointer-events: none;
  font: 13px/1.2 var(--font); color: #fff;
  -webkit-font-smoothing: antialiased;
}
.notch { position: absolute; top: 0; left: 50%; width: 185px; height: 32px; margin-left: -92.5px; background: #000; border-radius: 0 0 11px 11px; }
.notch::before, .notch::after { content: ""; position: absolute; top: 0; width: 6px; height: 6px; }
.notch::before { left: -6px; background: radial-gradient(circle at 0 100%, transparent 5.5px, #000 6px); }
.notch::after { right: -6px; background: radial-gradient(circle at 100% 100%, transparent 5.5px, #000 6px); }
.notch i { position: absolute; left: 50%; top: 12px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #26304a, #0b0e18 60%); box-shadow: 0 0 0 1.5px #0c0c10; }
.no-notch .notch { display: none; }

.isl-goo { position: absolute; top: 0; left: 0; width: 460px; height: 32px; overflow: visible; }
.isl-goo path { fill: #000; }

.isl {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.isl:focus-visible { outline: none; }
/* Fixed box; the visible island is a clip-path that springs between sizes (no layout per frame). */
.isl-shape, .isl-content, .isl-ring {
  position: absolute; inset: 0;
  transition: clip-path var(--sp-d) var(--sp), -webkit-clip-path var(--sp-d) var(--sp);
}
.isl-shape { background: #000; pointer-events: auto; }
.isl-ring { background: var(--brand); opacity: 0; transition: clip-path var(--sp-d) var(--sp), opacity .2s; }
.isl:focus-visible .isl-ring { opacity: 1; }
.isl-content { pointer-events: none; }
.isl-content > .isl-c { pointer-events: auto; }
.isl-ear { position: absolute; top: 0; width: 8px; height: 8px; opacity: 0; transform: scale(0); transition: opacity .25s ease, transform var(--sp-d) var(--sp); }
.isl-ear--l { left: 0; transform-origin: 100% 0; background: radial-gradient(circle at 0 100%, transparent 7.5px, #000 8px); }
.isl-ear--r { right: 0; transform-origin: 0 0; background: radial-gradient(circle at 100% 100%, transparent 7.5px, #000 8px); }
.isl[data-pres="expanded"] .isl-ear { opacity: 1; transform: scale(1); }

.isl-c {
  position: absolute; top: 0; left: 50%;
  transform-origin: 50% 0;
  transition: opacity .34s cubic-bezier(.2,.7,.2,1), filter .34s cubic-bezier(.2,.7,.2,1), transform var(--sp-d) var(--sp);
}
.isl-c.is-enter, .isl-c.is-leave { opacity: 0; filter: blur(6px); transform: scale(.88); }
.isl-c.is-leave { transition-duration: .22s, .22s, .3s; pointer-events: none; }

.isl-hd { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 12px; }
.isl-c--expanded .isl-hd { padding: 0 22px; }
.isl-bd { position: relative; padding: 0 22px 6px; display: flex; flex-direction: column; justify-content: center; }
.isl-lead, .isl-trail { display: flex; align-items: center; gap: 5px; min-width: 0; }

.isl-bubble {
  position: absolute; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center;
  pointer-events: auto; cursor: pointer;
  opacity: 0; transition: opacity .2s ease-in;
}
.isl-bubble.is-on { opacity: 1; transition: opacity .35s ease-out .5s; }

/* panes inside expanded content (player / sources / audio) */
.pane-host { position: relative; width: 100%; height: 100%; }
.pane { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 0; transition: opacity .3s cubic-bezier(.2,.7,.2,1), filter .3s, transform var(--sp-panel-d) var(--sp-panel); }
.pane.is-enter, .pane.is-leave { opacity: 0; filter: blur(6px); transform: scale(.9); }
.pane.is-leave { pointer-events: none; transition-duration: .2s; }

/* island text */
.t13 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.t12 { font-size: 12px; font-weight: 600; }
.t11 { font-size: 11px; color: rgba(255,255,255,.6); }
.t10 { font-size: 10.5px; color: rgba(255,255,255,.6); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-family: var(--font-round); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.n14 { font-size: 14px; }
.n13 { font-size: 13px; }
.n26 { font-size: 26px; line-height: 1.05; }
.op6 { color: rgba(255,255,255,.6); }

.isl .ic { width: 13px; height: 13px; }

/* mini battery (island) */
.mbat { display: flex; align-items: center; gap: 1.5px; }
.mbat__body { position: relative; width: 27px; height: 13px; border-radius: 3.5px; background: rgba(255,255,255,.25); overflow: hidden; }
.mbat__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 27px; border-radius: 3.5px; transform: translateX(var(--off, 0)); transition: transform .6s var(--ease-out), background-color .3s; }
.mbat__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: #000; }
.mbat__glyph .ic { width: 9.5px; height: 9.5px; }
.mbat__nub { width: 2px; height: 5px; border-radius: 1px; background: rgba(255,255,255,.35); }

/* vinyl */
.vinyl { position: relative; flex: none; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.15); will-change: transform; }
.vinyl__art { position: absolute; inset: 0; background: var(--art); }
.vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; background: repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 1.4px, rgba(0,0,0,.07) 1.6px 1.8px); mix-blend-mode: multiply; }
.vinyl::after { content: ""; position: absolute; z-index: 2; left: 40%; top: 40%; width: 20%; height: 20%; border-radius: 50%; background: #000; box-shadow: 0 0 0 .5px rgba(255,255,255,.25); }

/* waveform */
.wave { display: flex; align-items: center; justify-content: center; gap: 2px; width: 18px; height: 14px; }
.wave i { width: 3px; border-radius: 2px; background: var(--wc, var(--music)); height: 4px; }
.wave-btn { padding: 6px; margin: -6px; border: 0; background: none; cursor: pointer; border-radius: 8px; }

/* glass slider */
.gs { position: relative; height: 18px; flex: 1; cursor: pointer; touch-action: none; }
.gs__track { position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.gs__fill { position: absolute; left: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: var(--gs-fill, #fff); }
.gs__knob {
  position: absolute; top: 50%; width: 20px; height: 12px; margin: -6px 0 0 -10px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: transform var(--sp-knob-d) var(--sp-knob), background-color .2s, box-shadow .2s;
  overflow: hidden;
}
.gs__lens { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.gs__lens::before, .gs__lens::after { content: ""; position: absolute; top: 50%; height: 7px; margin-top: -3.5px; }
.gs__lens::before { left: 0; width: 50%; background: var(--gs-fill, #fff); }
.gs__lens::after { left: 50%; right: 0; background: rgba(255,255,255,.2); }
.gs.is-drag .gs__knob {
  transform: scale(1.4);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(1.5px) saturate(1.6) brightness(1.15); -webkit-backdrop-filter: blur(1.5px) saturate(1.6) brightness(1.15);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.65), inset 0 1px 1.5px rgba(255,255,255,.7), inset 0 -1px 2px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35);
}
.gs.is-drag .gs__lens { opacity: 1; }
.gs.is-static { cursor: default; }
.gs.is-static .gs__knob { display: none; }

/* island buttons */
.ib { border: 0; background: none; padding: 0; cursor: pointer; color: #fff; display: grid; place-items: center; }
.ctrl { width: 28px; height: 22px; }
.ctrl .ic { width: 15px; height: 15px; }
.ctrl--big .ic { width: 20px; height: 20px; }
.cbtn { width: 34px; height: 34px; border-radius: 50%; }
.cbtn .ic { width: 13px; height: 13px; }
.capbtn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.capbtn--sm { height: 24px; padding: 0 12px; font-size: 11.5px; }
.join { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--green); font-size: 12px; font-weight: 600; color: #fff; }
.join .ic { width: 13px; height: 13px; }
.ib:active { transform: scale(.94); }

/* rings */
.ring { display: block; }
.ring circle { fill: none; }
.bring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bring__c { position: relative; width: 28px; height: 28px; }
.bring__c span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 var(--font-round); }
.bring__l { font-size: 9px; color: rgba(255,255,255,.6); }

/* rows */
.prow { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; border-radius: 8px; cursor: pointer; }
.prow.is-cur { background: rgba(255,255,255,.1); }
.arow { display: flex; align-items: center; gap: 8px; height: 26px; cursor: pointer; font-size: 12px; }
.arow .ic { width: 12px; height: 12px; }
.phead { display: flex; align-items: center; gap: 6px; height: 22px; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; }
.phead .ib { width: 16px; height: 18px; color: rgba(255,255,255,.8); }
.phead .ib .ic { width: 11px; height: 11px; }
.circ { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.circ .ic { width: 12px; height: 12px; }
.divider { height: 1px; background: rgba(255,255,255,.12); }

/* hub tiles */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 4px; }
.tile { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 7px; border-radius: 12px; background: rgba(255,255,255,.08); border: 0; cursor: pointer; text-align: left; min-width: 0; transition: background-color .2s; }
.tile:hover { background: rgba(255,255,255,.13); }
.tile__ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--tc) 20%, transparent); color: var(--tc); }
.tile__ic .ic { width: 12px; height: 12px; }
.tile__t { font-size: 11.5px; font-weight: 600; }
.tile__s { font-size: 10.5px; color: rgba(255,255,255,.6); }
.tile--wide { grid-column: span 2; }
.tile > div { min-width: 0; flex: 1; }
.presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.preset { height: 26px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 600; }
.fchip { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; text-align: left; }
.fchip.is-on { font-weight: 600; }

/* earbud case art: the app's own drawing, one frame per lid position (see caseArt in island.js) */
.case { width: 82px; height: 70px; flex: none; background: url(../assets/case-airpods-open-off.webp) 0 0 / 600% 600% no-repeat; }
.case.is-led { background-image: url(../assets/case-airpods-open.webp); }
.case-mini { width: 26.5px; height: 20px; background: url(../assets/case-airpods-mini.png) center / contain no-repeat; }

/* ---------- shapes ---------- */
.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shape-card h3 { margin-top: 20px; }
.shape-card p { color: var(--muted); margin-top: 6px; font-size: 15.5px; }

/* ---------- features ---------- */
.feature__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature--flip .feature__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.feature--flip .feature__copy { order: 2; }
.feature__copy .lead { margin-top: 18px; }
.feature::before {
  content: ""; position: absolute; inset: 10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 70% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.feature--flip::before { background: radial-gradient(40% 50% at 30% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.feature--center::before { background: radial-gradient(50% 50% at 50% 65%, rgba(110,108,240,.16), transparent 70%); }
.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: #d6d6dc; font-size: 16px; }
.ticks li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.demo-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.feature__demo .demo-controls { justify-content: center; }
.demo-note { color: var(--dim); font-size: 14px; margin-top: 12px; text-align: center; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.card--wide .stage--card { height: 100%; min-height: 240px; border-radius: 0; border-bottom: 0; border-right: 1px solid var(--line); }
.card__body { padding: 24px 24px 26px; }
.card--wide .card__body { align-self: center; padding: 32px; }
.card__body p { color: var(--muted); font-size: 15.5px; margin-top: 8px; }
.card .demo-controls { margin-top: 18px; }
.card .chip { height: 34px; font-size: 13.5px; }

/* ---------- battery studio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: start; }
.studio__preview { display: grid; gap: 14px; }
.studio__bars { display: grid; gap: 14px; }
.mb-strip { border-radius: 16px; height: 76px; display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; border: 1px solid var(--line); overflow: hidden; }
.mb-strip--light { background: linear-gradient(90deg, #d9dbe6, #eef0f6); color: #111; }
.mb-strip--dark { background: linear-gradient(90deg, #1c1d24, #2a2b33); color: #fff; }
.mb-strip__items { display: flex; align-items: center; gap: 22px; font-size: 19px; font-weight: 500; }
.mb-strip__items .ic { width: 21px; height: 21px; opacity: .85; }
.mb-slot { display: inline-flex; align-items: center; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; transition: background-color .2s; }
.mb-strip--light .mb-slot { background: rgba(0,0,0,.08); }
.mb-strip--dark .mb-slot { background: rgba(255,255,255,.14); }
.mb-slot { padding: 5px 10px; margin: 0 -10px; }
.mb-slot svg { height: calc(30px * var(--bs, 1)); width: auto; overflow: visible; }
.mb-clock { font-variant-numeric: tabular-nums; }

.bmenu {
  border-radius: 18px; padding: 22px;
  background: rgba(40, 40, 46, .92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 14px;
}
.bm-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bm-pct { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.bm-src { color: rgba(255,255,255,.6); font-size: 13.5px; margin-top: 6px; }
.bm-glyph svg { height: 34px; width: auto; }
.bm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.bm-card { border-radius: 12px; padding: 12px 13px; background: rgba(255,255,255,.07); min-height: 92px; }
.bm-card__h { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; }
.bm-card__h .ic { width: 13px; height: 13px; }
.bm-card__v { font-size: 21px; font-weight: 650; margin-top: 6px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bm-card__s { color: rgba(255,255,255,.6); font-size: 12.5px; margin-top: 2px; }
.bm-spark { display: block; width: 100%; height: 28px; margin-top: 4px; }
.bm-sec { margin-top: 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.6); }
.bm-rows { margin-top: 6px; display: grid; gap: 5px; font-size: 13px; }
.bm-rows div { display: flex; justify-content: space-between; gap: 12px; }
.bm-rows span:first-child { color: rgba(255,255,255,.7); }
.bm-rows span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.bm-apps { margin-top: 6px; display: grid; gap: 6px; font-size: 13px; }
.bm-app { display: flex; align-items: center; gap: 8px; }
.bm-app i { width: 18px; height: 18px; border-radius: 5px; background: var(--c); flex: none; }
.bm-app span:last-child { margin-left: auto; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }

.studio__controls {
  display: grid; gap: 18px;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.seg-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg-field legend, .range-field label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); }
.seg--wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: #c8c8cf; text-align: center; line-height: 1.1; transition: background-color .2s, color .2s; }
.seg input:checked + span { background: rgba(255,255,255,.16); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.range-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.range-field label { margin: 0; }
.range-field output { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; min-width: 4ch; text-align: right; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--brand) var(--fill, 28%), rgba(255,255,255,.18) var(--fill, 28%)); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--brand); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 14px; margin-top: -4.5px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.toggles { display: grid; gap: 4px; }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; font-size: 15px; color: #dedee4; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__ui { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); flex: none; transition: background-color .25s; }
.toggle__ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .4s var(--sp-knob); }
.toggle input:checked + .toggle__ui { background: var(--green); }
.toggle input:checked + .toggle__ui::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--brand); outline-offset: 2px; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.facts li { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.facts strong { display: block; font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.facts span { color: var(--muted); font-size: 14.5px; }

/* ---------- privacy ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar { display: grid; gap: 6px; padding: 24px; border-radius: 20px; background: rgba(53, 216, 138, .05); border: 1px solid rgba(53, 216, 138, .16); }
.pillar .ic { width: 26px; height: 26px; color: var(--brand); margin-bottom: 8px; }
.pillar strong { font-size: 17px; font-weight: 650; }
.pillar span { color: var(--muted); font-size: 15px; }
.perms { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perm { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.perm__icon { display: grid; place-items: center; height: 24px; color: var(--c); }
.perm__icon .ic { width: 24px; height: 24px; }
.perm h3 { font-size: 17px; }
.perm p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.perm__tag { font-size: 12px; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); white-space: nowrap; }
.note { margin: 28px auto 0; max-width: 760px; color: var(--muted); font-size: 15px; text-align: center; padding: 18px 22px; border-radius: 16px; border: 1px dashed var(--line-2); }

/* ---------- requirements ---------- */
.reqs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.reqs li { display: grid; gap: 6px; align-content: start; padding: 22px 20px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.reqs .ic { width: 24px; height: 24px; color: var(--text); opacity: .9; margin-bottom: 6px; }
.reqs strong { font-size: 16px; font-weight: 650; line-height: 1.3; }
.reqs span { color: var(--muted); font-size: 14.5px; }

/* ---------- pricing ---------- */
.price { display: flex; justify-content: center; }
.price__card {
  width: min(480px, 100%); padding: 32px; border-radius: 28px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(53,216,138,.14), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(53,216,138,.25);
  box-shadow: 0 40px 100px -40px rgba(53,216,138,.35);
  --accent: var(--brand);
}
.price__top { display: flex; align-items: center; gap: 16px; }
.price__top img { border-radius: 14px; }
.price__top h3 { font-size: 22px; }
.price__top p { color: var(--muted); font-size: 15px; }
.price__amount { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; }
.price__num { font-family: var(--font-display); font-size: 60px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price__per { color: var(--muted); font-size: 17px; }
.tbd { display: inline-block; border: 1.5px dashed var(--yellow); color: var(--yellow); border-radius: 8px; padding: 0 7px; font-weight: 650; font-size: .88em; }
.price__num.tbd { font-size: 54px; padding: 4px 14px; border-radius: 14px; }
.tbd-note { margin-top: 12px; color: var(--muted); font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price .ticks { margin: 22px 0 28px; }
.price .fine { margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: background-color .2s, border-color .2s; }
.faq details[open] { background: rgba(255,255,255,.04); border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .45s var(--sp-panel); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding: 0 22px 20px; color: var(--muted); }
.faq details[open] > div { animation: faq-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }

/* ---------- final ---------- */
.final { position: relative; padding: 230px 0 140px; overflow: hidden; border-top: 1px solid var(--line); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 0%, rgba(53,216,138,.14), transparent 70%), radial-gradient(40% 50% at 50% 100%, rgba(110,108,240,.12), transparent 70%); }
.final h2 { font-size: clamp(38px, 6vw, 76px); max-width: 14ch; margin: 0 auto; }
.final .lead { margin: 20px auto 0; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 14.5px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.footer__brand p { color: var(--muted); margin-top: 10px; max-width: 34ch; }
.footer__nav { display: grid; gap: 8px; align-content: start; }
.footer__nav a { color: var(--muted); text-decoration: none; width: fit-content; }
.footer__nav a:hover { color: #fff; }
.footer__nav a.placeholder::after { content: " · TBD"; color: var(--yellow); font-size: 12px; }
html.lang-tr .footer__nav a.placeholder::after { content: " · Belirlenecek"; }
.footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.footer__legal p { max-width: 80ch; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 140%); opacity: 0;
  padding: 10px 16px; border-radius: 999px; background: #f5f5f7; color: #000; font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .5s var(--sp-panel), opacity .3s;
  pointer-events: none; max-width: calc(100% - 32px); text-align: center;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .reqs { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature--flip .feature__copy { order: 0; }
  .feature--flip .feature__grid { grid-template-columns: 1fr; }
  .feature__copy { text-align: left; }
  .studio { grid-template-columns: 1fr; gap: 18px; }
  /* One column: the menu bar previews stay pinned under the header while the controls scroll past them,
     so every change shows right away. The details menu comes after the controls. */
  .studio__preview { display: contents; }
  .studio__bars {
    position: sticky; top: 60px; z-index: 5; gap: 8px;
    padding: 10px 0; margin: -10px 0;
    background: linear-gradient(var(--bg) 85%, transparent);
  }
  .studio__controls { order: 1; }
  .bmenu { order: 2; }
  .bento { grid-template-columns: 1fr; }
  .card--wide { grid-template-columns: 1fr; }
  .card--wide .stage--card { height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .perms { grid-template-columns: 1fr; }
  .shapes { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .mb-strip { height: 54px; padding: 0 12px; border-radius: 13px; }
  .mb-strip__items { gap: 14px; font-size: 15px; }
  .mb-strip__items .ic { width: 17px; height: 17px; }
  body { font-size: 16px; }
  .topnotch { width: calc(100% - 16px); }
  .topnotch__bar { height: 52px; gap: 8px; padding: 0 8px 0 14px; }
  .topnotch__end { margin-left: auto; gap: 6px; }
  .topnotch__end .btn--small { display: none; }
  /* The menu sits in the middle of the bar, where the notch is; the page list drops out of it like the island. */
  .menu-btn { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 32px; border-radius: 999px; }
  .menu-btn span { left: 19px; right: 19px; }
  .menu-btn span:first-child { top: 12px; }
  .menu-btn span:last-child { top: 18px; }
  .topnotch__links {
    position: absolute; top: calc(100% - 1px); left: 50%; width: min(260px, calc(100% - 48px)); transform: translateX(-50%);
    flex-direction: column; gap: 0; margin: 0; padding: 4px 10px 12px;
    background: #000; border-radius: 0 0 26px 26px;
    clip-path: inset(0 50% 100% 50% round 0 0 26px 26px);
    visibility: hidden;
    transition: clip-path .5s var(--ease-out), visibility 0s linear .5s;
  }
  /* Concave shoulders where the dropped panel meets the bar, like the notch meets the screen edge. */
  .topnotch__links::before, .topnotch__links::after { content: ""; position: absolute; top: 0; width: 14px; height: 14px; }
  .topnotch__links::before { left: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, #000 14px); }
  .topnotch__links::after { right: -14px; background: radial-gradient(circle at 100% 100%, transparent 13.5px, #000 14px); }
  .topnotch.is-open .topnotch__links { clip-path: inset(0 -14px 0 -14px round 0 0 26px 26px); visibility: visible; transition: clip-path .5s var(--ease-out), visibility 0s; }
  .topnotch__links a { padding: 12px 8px; font-size: 16px; border-radius: 12px; text-align: center; }
  .topnotch__links a:hover { background: rgba(255,255,255,.08); }
  .hero { padding-top: 112px; }
  .stage--hero { border-width: 6px; height: 270px; }
  .feature .stage { height: 210px; }
  .stage--card { height: 196px; }
  .stage--panel { height: 230px; }
  .stage__hint { font-size: 12px; bottom: 12px; white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; }
  .pillars { grid-template-columns: 1fr; }
  .reqs { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .perm { grid-template-columns: auto 1fr; }
  .perm__tag { grid-column: 2; justify-self: start; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .price__card { padding: 24px; }
  .final { padding-top: 200px; }
  .chapters__tools { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .btn--lg { height: 52px; padding: 0 20px; font-size: 16px; }
  .cta-row { width: 100%; }
  .cta-row .btn { width: 100%; }
  .seg span { font-size: 12.5px; padding: 0 4px; }
  .lang button { padding: 4px 7px; }
}
/* Very narrow phones: the logo alone, so the centred menu has room. */
@media (max-width: 360px) {
  .topnotch .brand span { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__glow { animation: none; }
  .js .reveal { transform: none; filter: none; transition: opacity .3s; }
  .isl-shape, .isl-content, .isl-ring, .isl-ear { transition-duration: .2s !important; transition-timing-function: ease !important; }
  .isl-c, .pane { transition: opacity .2s ease !important; }
  .isl-c.is-enter, .isl-c.is-leave, .pane.is-enter, .pane.is-leave { transform: none; filter: none; }
  .gs__knob, .toggle__ui::after, .btn, .chip { transition-duration: .01s !important; }
  .faq details[open] > div { animation: none; }
}

/* lid + bounce (appended) */
.bounce { animation: kn-pulse 1.4s ease-in-out infinite; }
@keyframes kn-pulse { 50% { opacity: .45; } }
html.lang-tr:not(.i18n-ready) body { opacity: 0; }
body { transition: opacity .2s; }


/* ?still: no motion at all (screenshots) */
.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
html.still { scroll-behavior: auto !important; }