/* ==========================================================================
   FORA — tanıtım sitesi
   Tasarım tokenları (renk, tipografi, hareket) referans tasarımla birebir.
   ========================================================================== */

/* ---------- yazı tipleri (sitenin kendisinden; SIL OFL 1.1 — assets/fonts/OFL-*.txt) ----------
   Google Fonts css2 (display=swap) çıktısıyla aynı @font-face kuralları; yalnız latin + latin-ext.
   Dosya adındaki sürüm (v17/v38/v5) değişirse adı da değiştirin: fontlar 1 yıl önbelleklenir. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-v38-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-v38-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-v5-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-v5-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-v5-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-v5-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/geist-v5-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/geist-v5-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-text: "Geist", "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  --blue-300: #7acaff;
  --blue-500: #0099ff;
  --blue-700: #0068ad;
  --amber: #ffb840;

  --text-h3: 2.25rem;
  --text-lead: 1.125rem;
  --text-body: .9375rem;
  --text-body-s: .8125rem;
  --text-caption: .75rem;
  --tracking-h1: -.03em;
  --tracking-h2: -.026em;
  --tracking-h3: -.022em;
  --ease-brand: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  color-scheme: dark;
}

:root, [data-theme="dark"] {
  --bg: #000;
  --bg-elevated: #111;
  --card: transparent;
  --panel-filter: none;
  --card-line: #ffffff8c;
  --card-lift: #ffffff1a;
  --card-lift-mid: #ffffff08;
  --card-rule: #ffffff24;
  --card-border: #fff3;
  --surface: #141414;
  --surface-2: #181818;
  --surface-strong: #1f1f1f;
  --line: #ffffff17;
  --line-strong: #ffffff29;
  --fg: #fff;
  --fg-strong: #d8d8d8;
  --fg-muted: #9a9a9a;
  --fg-subtle: #7d7d7d;
  --fg-dim: #757575;
  --nav-bg: #000000b8;
  --section-shadow: 0 44px 90px -24px #000000f2, 0 18px 44px -18px #000c;
  --footer-veil: #0009;
  --future-wash: linear-gradient(158deg, #262626, #171717 34%, #0b0b0b 68%, #000);
  --hairline: #fff3;
  --tint-weak: #ffffff14;
  --tint: #fff2;
  --tint-strong: #ffffff30;
  --field: #fff2;
  --icon: #ffffff8c;
  --raise-shadow: transparent;
  --pop-shadow: 0 18px 40px -12px #0009;
  --glass-card: color-mix(in srgb, var(--bg) 60%, transparent);
}

[data-theme="light"] {
  --bg: #fff;
  --bg-elevated: #fafafa;
  --card: #f0f0f0;
  --panel-filter: invert(1);
  --card-line: #00000073;
  --card-lift: #00000012;
  --card-lift-mid: #00000006;
  --card-rule: #00000024;
  --card-border: #0003;
  --surface: #f6f6f6;
  --surface-2: #f1f1f1;
  --surface-strong: #f0f0f0;
  --line: #0000001a;
  --line-strong: #0000002e;
  --fg: #000;
  --fg-strong: #363636;
  --fg-muted: #5a5a5a;
  --fg-subtle: #767676;
  --fg-dim: #898989;
  --nav-bg: #fffc;
  --section-shadow: 0 40px 72px -28px #00000029, 0 14px 32px -18px #0000001a;
  --footer-veil: #f6f6f6bf;
  --future-wash: linear-gradient(158deg, #fafafa, #f1f1f1 34%, #e6e6e6 68%, #d7d7d7);
  --hairline: #00000029;
  --tint-weak: #0000000b;
  --tint: #fff;
  --tint-strong: #fff;
  --field: #0000000d;
  --icon: #00000047;
  --raise-shadow: #0000001a;
  --pop-shadow: 0 10px 24px -14px #00000029;
  --glass-card: color-mix(in srgb, var(--bg) 84%, transparent);
  color-scheme: light;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  transition: background .28s var(--ease-brand), color .28s var(--ease-brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 14; line-height: 1.06; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
img, svg, canvas, video { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--blue-500); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.wrap { max-width: 1380px; margin-inline: auto; padding-inline: 24px; }
.wrap-1440 { max-width: 1440px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px) { .wrap, .wrap-1440 { padding-inline: 32px; } }

.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 300; transform: translateY(-80px); border-radius: 999px; background: var(--fg); color: var(--bg); padding: 8px 20px; font-size: 14px; font-weight: 500; transition: transform .3s var(--ease-brand); }
.skip:focus { transform: none; }

/* ---------- accent serif ---------- */
.acc, .acc *, .acc-roman, .acc-roman * {
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 120, "wght" 300, "SOFT" 20, "WONK" 0;
  letter-spacing: -.04em;
  font-weight: 300;
}
.acc, .acc-roman { margin-left: -.07em; }
.acc, .acc * { font-style: italic; }
.acc-roman, .acc-roman * { font-style: normal; }

/* ---------- buttons + roll text ---------- */
.btn { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid transparent; padding: 9px 15px; font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap; transition: background-color .22s var(--ease-brand), border-color .22s var(--ease-brand), color .22s var(--ease-brand); }
.btn.r12 { border-radius: 12px; }
.btn-fg { background: var(--fg); color: var(--bg); }
.btn-fg:hover { background: var(--fg-strong); }
.btn-line { border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--fg-subtle); background: var(--surface); }
.btn-soft { background: color-mix(in oklab, var(--fg) 15%, transparent); }
.btn-soft:hover { background: color-mix(in oklab, var(--fg) 25%, transparent); }

.roll { --bleed: .2em; height: calc(1lh + var(--bleed) * 2); margin-block: calc(var(--bleed) * -1); padding-inline: var(--bleed); margin-inline: calc(var(--bleed) * -1); vertical-align: bottom; align-items: flex-start; display: inline-flex; overflow: hidden; }
.roll-c { white-space: pre; transition: translate .52s var(--ease-brand); transition-delay: calc(var(--i) * 18ms); flex-direction: column; display: inline-flex; translate: 0; }
.roll-c > span { box-sizing: content-box; height: 1lh; padding-block: var(--bleed); flex: none; }
:is(a, button):hover .roll-c, :is(a, button):focus-visible .roll-c { translate: 0 -50%; }
@media (pointer: coarse) { .roll { display: none; } .roll-sr { position: static !important; width: auto !important; height: auto !important; clip: auto !important; } }
@media (prefers-reduced-motion: reduce) { .roll-c { transition: none; } :is(a, button):hover .roll-c { translate: 0; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr { position: fixed; inset: 0 0 auto; top: 0; z-index: 200; border-bottom: 1px solid transparent; transition: padding .5s var(--ease-brand), background-color .5s var(--ease-brand), border-color .5s var(--ease-brand), backdrop-filter .5s var(--ease-brand); }
.hdr.is-scrolled { border-color: var(--line); background: var(--nav-bg); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.hdr-in { margin-inline: auto; display: grid; max-width: 1380px; grid-template-columns: auto 1fr; align-items: center; gap: 20px; padding: 16px 24px; transition: max-width .5s var(--ease-brand), padding .5s var(--ease-brand), background-color .5s var(--ease-brand), border-radius .5s var(--ease-brand), box-shadow .5s var(--ease-brand), backdrop-filter .5s var(--ease-brand); }
@media (min-width: 768px) { .hdr-in { padding-inline: 32px; } }
.hdr-logo { display: flex; align-items: center; justify-self: start; transition: padding .5s var(--ease-brand); }
.hdr-logo .logo { height: 20px; width: auto; }
.logo text { font-family: var(--font-display); }
.hdr-nav { display: none; align-items: center; gap: 28px; }
.hdr-nav a { font-size: 15px; letter-spacing: -.01em; color: var(--fg-muted); transition: color .22s var(--ease-brand); }
.hdr-nav a:hover, .hdr-nav a.is-active { color: var(--fg); }
.hdr-nav a.is-active { font-weight: 500; }
.hdr-right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.lang-sw { display: inline-flex; height: 24px; min-width: 36px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-strong); padding: 0 9px; font-size: 11.5px; line-height: 1; font-weight: 600; letter-spacing: .06em; color: var(--fg-muted); transition: color .22s var(--ease-brand), border-color .22s var(--ease-brand), background-color .22s var(--ease-brand); }
.lang-sw:hover { color: var(--fg); border-color: var(--fg-subtle); background: var(--surface); }
.theme-sw { position: relative; height: 24px; width: 46px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-strong); transition: background-color .22s; }
.theme-sw span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .3s, background-color .3s; }
[data-theme="light"] .theme-sw span { transform: translateX(22px); background: var(--blue-500); }
.hdr-cta { display: inline-flex; height: 38px; flex-shrink: 0; align-items: center; border-radius: 999px; background: var(--fg); color: var(--bg); padding: 0 16px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background-color .22s var(--ease-brand); }
.hdr-cta:hover { background: var(--fg-strong); }
.hdr-cta .d-only { display: none; }
.hdr-login { display: none; height: 36px; flex-shrink: 0; align-items: center; border-radius: 999px; border: 1px solid var(--line-strong); padding: 0 16px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--fg); transition: border-color .22s var(--ease-brand), background-color .22s var(--ease-brand); }
.hdr-login:hover { border-color: var(--fg-subtle); background: var(--surface); }
.burger { display: grid; width: 42px; height: 42px; flex-shrink: 0; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); transition: background-color .3s var(--ease-brand), border-color .3s var(--ease-brand); }
.burger span { position: absolute; display: block; height: 1.5px; width: 16px; background: var(--fg); transition: rotate .38s var(--ease-brand), translate .38s var(--ease-brand), background-color .38s var(--ease-brand); }
.burger span:first-child { translate: 0 -4.25px; }
.burger span:last-child { translate: 0 4.25px; }
.burger { position: relative; }
.burger[aria-expanded="true"] { border-color: var(--fg); background: var(--fg); }
.burger[aria-expanded="true"] span { background: var(--bg); translate: 0 0; }
.burger[aria-expanded="true"] span:first-child { rotate: 45deg; }
.burger[aria-expanded="true"] span:last-child { rotate: -45deg; }

@media (min-width: 981px) {
  .hdr-in { grid-template-columns: 1fr auto 1fr; }
  .hdr-nav { display: flex; }
  .hdr-right { gap: 14px; }
  .hdr-cta { height: 36px; padding: 0 18px; }
  .hdr-cta .m-only { display: none; }
  .hdr-cta .d-only { display: inline; }
  .hdr-login { display: inline-flex; }
  .burger { display: none; }
  .hdr.is-pill { border-color: transparent; background: transparent; padding-top: 20px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hdr.is-pill .hdr-in { max-width: 920px; border-radius: 8px; background: var(--nav-bg); padding: 12px; box-shadow: 0 0 0 1px #ffffff1a; backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
  [data-theme="light"] .hdr.is-pill .hdr-in { box-shadow: 0 0 0 1px #0000001a; }
  .hdr.is-pill .hdr-logo { padding-left: 12px; }
}

.mmenu { position: fixed; inset: 0; z-index: 190; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg); padding: 104px 24px 40px; clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .6s var(--ease-brand); }
.mmenu.is-open { clip-path: inset(0); pointer-events: auto; }
.mmenu-nav { display: flex; flex-direction: column; }
.mmenu-nav a { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding: 13px 0; opacity: 0; translate: 0 16px; transition: opacity .55s var(--ease-brand), translate .55s var(--ease-brand); }
.mmenu-nav a span { width: 24px; flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fg-subtle); }
.mmenu-nav a b { font-family: var(--font-display); font-size: 34px; line-height: 1.15; font-weight: 600; font-variation-settings: "opsz" 14; letter-spacing: var(--tracking-h2); color: var(--fg-muted); transition: translate .3s var(--ease-brand); }
.mmenu-nav a.is-active { border-color: color-mix(in oklab, var(--fg) 25%, transparent); }
.mmenu-nav a.is-active b, .mmenu-nav a.is-active span { color: var(--fg); }
.mmenu-nav a i { margin-left: auto; align-self: center; width: 6px; height: 6px; border-radius: 999px; background: var(--blue-500); }
.mmenu-nav a:hover b { translate: 4px 0; }
.mmenu.is-open .mmenu-nav a { opacity: 1; translate: 0 0; }
.mmenu-foot { display: flex; flex-direction: column; gap: 16px; opacity: 0; translate: 0 16px; transition: opacity .55s var(--ease-brand), translate .55s var(--ease-brand); }
.mmenu.is-open .mmenu-foot { opacity: 1; translate: 0 0; }
.mmenu-cta { display: inline-flex; height: 52px; width: 100%; align-items: center; justify-content: center; border-radius: 999px; background: var(--blue-500); font-size: 15px; font-weight: 500; color: #fff; }
.mmenu-login { display: inline-flex; height: 52px; width: 100%; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; color: var(--fg); }
.mmenu-mail { text-align: center; font-size: 13px; color: var(--fg-subtle); }
.mmenu-lang { display: inline-flex; height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(120px, 14vh, 168px); text-align: center; }
[data-intro="pending"] .hero { visibility: hidden; animation: introFallback 0s 1.2s forwards; }
@keyframes introFallback { to { visibility: visible; } }
.hero-bars { position: absolute; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; display: flex; }
.hero-bars i { flex: 1 0 calc(100% / 15); max-width: calc(100% / 15); height: 100%; background: linear-gradient(to top, #0099ff, transparent); transform: scaleY(var(--s)); transform-origin: bottom; animation: pulseBar 2s ease-in-out infinite alternate; animation-delay: var(--d); outline: 1px solid #0000; }
@keyframes pulseBar { from { transform: scaleY(var(--s)); } to { transform: scaleY(calc(var(--s) * .7)); } }
[data-theme="light"] .hero-bars i { background: linear-gradient(to top, #0099ff, transparent); }

.hero-badge { position: relative; isolation: isolate; margin-bottom: 20px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); padding: 8px 16px; font-size: var(--text-body-s); font-weight: 500; }
.hero-badge > span { position: absolute; pointer-events: none; }
.hb-glow { inset: -90px; z-index: -3; opacity: calc(var(--glow, 0) * .85); -webkit-mask-image: radial-gradient(var(--r, 46px) circle at calc(var(--mx, 50%) + 90px) calc(var(--my, 50%) + 90px), #000, rgba(0, 0, 0, .45) 35%, transparent 70%); mask-image: radial-gradient(var(--r, 46px) circle at calc(var(--mx, 50%) + 90px) calc(var(--my, 50%) + 90px), #000, rgba(0, 0, 0, .45) 35%, transparent 70%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hb-glow span { position: absolute; inset: 90px; border-radius: 999px; background: var(--blue-500); filter: blur(24px); }
.hb-bg { inset: 0; z-index: -2; border-radius: 999px; background: var(--bg); }
.hb-tint { inset: 0; z-index: -1; border-radius: 999px; opacity: var(--glow, 0); background: radial-gradient(var(--r, 46px) circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--blue-500) 22%, transparent), transparent 72%); }
.hb-ring { inset: 0; border-radius: 999px; opacity: var(--glow, 0); padding: 1px; background: radial-gradient(calc(var(--r, 46px) * 1.15) circle at var(--mx, 50%) var(--my, 50%), var(--blue-300), color-mix(in srgb, var(--blue-500) 55%, transparent) 45%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

.hero-title { margin-bottom: 24px; font-family: var(--font-display); font-size: clamp(48px, 6.4vw, 92px); line-height: 1; font-weight: 600; font-variation-settings: "opsz" 14; letter-spacing: -.047em; }
.hero-line { display: block; }
.hero-sub { margin-bottom: 36px; font-size: var(--text-lead); color: var(--fg-muted); }
.hero-ctas { margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-fade { position: absolute; inset: auto 0 0; z-index: 20; height: 200px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 0%, transparent), var(--bg)); }

/* ---------- editor mock ---------- */
.ed-wrap { position: relative; }
.ed { position: relative; height: 490px; width: 100%; border-radius: 18px 18px 0 0; border: 1px solid var(--hairline); border-bottom: 0; background: transparent; padding: 6px 6px 0; text-align: left; backdrop-filter: blur(14px) saturate(1.75) brightness(1.45); -webkit-backdrop-filter: blur(14px) saturate(1.75) brightness(1.45); color: var(--fg); }
@media (min-width: 640px) { .ed { height: 620px; } }
.ed-in { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 12px 12px 0 0; background: color-mix(in oklab, var(--bg) 80%, transparent); }
.ed-edge { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--bg); pointer-events: none; }
.ed-edge.l { left: 5px; } .ed-edge.r { right: 5px; }
.ed svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed svg.fill, .ed-tools svg.fill { fill: currentColor; stroke: none; }
.ed svg.mark { fill: currentColor; stroke: none; }
.ed-tools svg.st { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ed-top { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--hairline); background: var(--bg); padding: 12px 20px; }
.ed-collapse { display: flex; width: fit-content; align-items: center; gap: 4px; border-radius: 6px; background: var(--tint-weak); padding: 6px 8px; transition: background-color .22s; }
.ed-collapse:hover { background: var(--tint); }
.ed-collapse .mark { width: 18px; height: 18px; }
.ed-collapse .chev { width: 12px; height: 12px; transition: transform .3s; }
.ed-collapse[aria-expanded="false"] .chev { transform: rotate(180deg); }
.ed-center { display: flex; align-items: center; gap: 8px; }
.ed-dev { display: flex; height: 30px; width: 170px; gap: 2px; border-radius: 6px; background: var(--field); padding: 2px; }
.ed-dev button { display: grid; flex: 1; place-items: center; border-radius: 4px; color: var(--fg-subtle); transition: color .22s, background-color .22s; }
.ed-dev button:hover { color: var(--fg-muted); }
.ed-dev button.is-on { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px var(--raise-shadow); }
.ed-dev svg { width: 20px; height: 20px; }
.ed-dev svg.sm { width: 16px; height: 16px; }
.ed-meta { display: none; height: 30px; width: 170px; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid var(--hairline); padding: 4px; }
@media (min-width: 640px) { .ed-meta { display: flex; } }
.ed-meta > span { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2px; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.ed-meta i { font-style: normal; color: var(--fg-subtle); }
.ed-meta b { font-weight: 400; }
.ed-meta em { font-style: normal; font-size: 14px; line-height: 1; color: var(--fg-subtle); }
.ed-meta svg { width: 12px; height: 12px; color: var(--fg-subtle); }
.ed-avatars { display: flex; justify-self: end; }
.ed-avatars span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--c); color: #fff; font-size: 10px; font-weight: 600; }
.ed-avatars span + span { margin-left: -8px; }
.ed-body { position: relative; flex: 1; overflow: hidden; }
.ed-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; padding-top: 30px; transition: opacity .38s var(--ease-brand), translate .38s var(--ease-brand); }
.ed-stage.is-swap { opacity: 0; translate: 0 8px; transition-duration: .22s; transition-timing-function: ease-in; }
.ed-stage.tool-hand { cursor: grab; touch-action: pan-y; user-select: none; }
.ed-stage.tool-hand.is-drag { cursor: grabbing; }
.ed-track { display: flex; width: max-content; gap: 20px; will-change: transform; }
.ed-card { position: relative; flex-shrink: 0; width: 232px; height: 412px; border-radius: 8px; pointer-events: none; touch-action: pan-y; }
@media (min-width: 640px) { .ed-card { width: 700px; height: 700px; } .ed-card.mobile { width: 400px; height: 711px; } }
.ed-card.mobile { width: 232px; height: 412px; }
.ed-card img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
.ed-stage.tool-cursor .ed-card, .ed-stage.tool-zoom .ed-card { pointer-events: auto; }
.ed-stage.tool-cursor .ed-card { cursor: zoom-in; }
.ed-stage.tool-zoom .ed-card { cursor: pointer; }
.ed-card .hold { position: absolute; left: var(--bx, 50%); top: var(--by, 50%); translate: -50% 24px; border-radius: 999px; background: var(--blue-700); padding: 8px 14px; font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; color: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); pointer-events: none; opacity: 0; scale: .9; transition: opacity .2s var(--ease-brand), scale .2s var(--ease-brand); }
.ed-card.is-hover .hold { opacity: 1; scale: 1; }
.ed-card.is-hold .hold { opacity: 0; }

.ed-left, .ed-right { position: absolute; top: 0; bottom: 0; z-index: 10; background: var(--bg); will-change: transform; transition: transform .52s cubic-bezier(.22, .61, .36, 1); }
.ed-left { left: 0; display: flex; width: 300px; max-width: 85%; flex-direction: column; gap: 10px; border-right: 1px solid var(--hairline); padding: 12px 20px 0; transform: translateX(-100%); pointer-events: none; }
.ed-right { right: 0; display: none; width: 300px; overflow: hidden; border-left: 1px solid var(--hairline); }
@media (min-width: 640px) { .ed-left { transform: none; pointer-events: auto; } }
@media (min-width: 981px) { .ed-right { display: block; } }
.ed.is-collapsed .ed-left { transform: translateX(-100%); pointer-events: none; }
.ed.is-collapsed .ed-right { transform: translateX(100%); pointer-events: none; }
.ed-tabs-wrap { border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.ed-tabs { display: flex; gap: 2px; border-radius: 10px; background: var(--tint-weak); padding: 2px; }
.ed-tabs button { flex: 1; border-radius: 8px; padding: 6px 8px; text-align: center; font-size: var(--text-body-s); color: var(--fg-muted); transition: background-color .22s, color .22s; }
.ed-tabs button:hover { background: var(--tint); color: var(--fg-strong); }
.ed-tabs button.is-on { background: var(--tint); font-weight: 500; color: var(--fg-strong); box-shadow: 0 1px 2px var(--raise-shadow); }
.ed-pane { display: none; flex-direction: column; gap: 10px; min-height: 0; }
.ed-pane.is-on { display: flex; }
.ed-dd { border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.ed-dd-btn { display: flex; width: 100%; align-items: center; gap: 10px; border-radius: 8px; background: var(--tint-weak); padding: 8px; text-align: left; font-size: var(--text-body-s); color: var(--fg); transition: background-color .22s; }
.ed-dd-btn:hover { background: var(--tint); }
.ed-dd-btn > svg:first-child { width: 16px; height: 16px; color: var(--fg-muted); }
.ed-dd-btn .dd-chev { margin-left: auto; width: 12px; height: 12px; color: var(--fg-subtle); }
.ed-layers { margin-inline: -4px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 0 4px 12px; scrollbar-width: none; }
.ed-layers::-webkit-scrollbar { display: none; }
.ed-layers button { display: flex; width: 100%; align-items: center; gap: 10px; border-radius: 8px; padding: 8px; text-align: left; font-size: var(--text-body-s); white-space: nowrap; color: var(--fg-muted); transition: background-color .22s, color .22s; }
.ed-layers button:hover { background: var(--tint-weak); color: var(--fg); }
.ed-layers button.is-on { background: var(--blue-700); font-weight: 500; color: #fff; }
.ed-layers button.is-soft { background: var(--tint-weak); color: var(--fg); }
.ed-layers .chev { width: 10px; height: 10px; color: var(--fg-subtle); }
.ed-layers button.is-on .chev { color: #ffffffb3; }
.ed-layers .lyr { width: 16px; height: 16px; color: var(--fg-subtle); flex-shrink: 0; }
.ed-layers button.is-on .lyr { color: #fff; }
.ed-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto; padding-bottom: 12px; scrollbar-width: none; }
.ed-assets li { overflow: hidden; border-radius: 8px; border: 1px solid var(--hairline); }
.ed-assets img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; object-position: top; }

.ed-align { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding: 12px 15px; }
.ed-align button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--fg-muted); transition: background-color .22s, color .22s; }
.ed-align button:hover { background: var(--tint-weak); color: var(--fg); }
.ed-align svg { width: 18px; height: 18px; stroke-width: 1.6; }
.ed-sec { border-bottom: 1px solid var(--hairline); padding: 17px 15px 16px; }
.ed-sec header { display: flex; align-items: center; justify-content: space-between; }
.ed-sec h4 { font-family: var(--font-text); font-size: var(--text-body-s); font-weight: 600; line-height: 1.4; }
.ed-sec header i { font-style: normal; font-size: 16px; line-height: 1; color: var(--fg-subtle); }
.ed-sec.pad { padding-bottom: 17px; }
.ed-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-left: 15px; font-size: 12px; color: var(--fg-muted); }
.ed-row > span { flex: 1; }
.ed-row.dim { opacity: .45; }
.ed-field { display: inline-flex; align-items: center; height: 30px; min-width: 124px; border-radius: 6px; background: var(--field); padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--fg); }
.ed-field.sm { min-width: 0; width: 60px; }
.ed-field.dd { position: relative; padding-right: 20px; }
.ed-field.dd::after { content: ""; position: absolute; right: 8px; top: 12px; width: 5px; height: 5px; border-right: 1.5px solid var(--fg-subtle); border-bottom: 1.5px solid var(--fg-subtle); rotate: 45deg; }
.ed-field.fx { gap: 8px; padding-left: 4px; }
.ed-field.fx em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--blue-500); }
.ed-field.fx svg { width: 14px; height: 14px; fill: #fff; }
.ed-seg { display: inline-flex; height: 30px; width: 124px; gap: 2px; border-radius: 6px; background: var(--field); padding: 2px; }
.ed-seg i { display: grid; flex: 1; place-items: center; border-radius: 4px; font-style: normal; font-size: 12px; color: var(--fg-subtle); }
.ed-seg i.on { background: var(--tint-strong); color: var(--fg); }

.ed-tools-wrap { pointer-events: none; position: absolute; inset: auto 0 16px; z-index: 30; display: flex; justify-content: center; }
.ed-tools { pointer-events: auto; display: flex; gap: 4px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--bg); padding: 5px; }
.ed-tools button { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 6px; color: var(--fg); transition: background-color .22s, color .22s; }
.ed-tools button:hover { background: var(--tint); }
.ed-tools button.is-on { background: var(--blue-500); color: #fff; }
.ed-tools button.txt { font-size: 13px; line-height: 1; font-weight: 600; }
.ed-tools svg { width: 24px; height: 24px; }
#edTheme .sun { display: none; }
.ed[data-theme="light"] ~ .ed-tools-wrap #edTheme .sun, .ed-wrap.canvas-light #edTheme .sun { display: block; }
.ed-wrap.canvas-light #edTheme .moon { display: none; }
.tip-host { position: relative; display: grid; }
.tip { position: absolute; bottom: 100%; left: 50%; margin-bottom: 8px; translate: -50% 0; border-radius: 6px; border: 1px solid var(--hairline); background: var(--bg); padding: 5px 8px; font-size: 11px; line-height: 1; white-space: nowrap; color: var(--fg); pointer-events: none; opacity: 0; transition: opacity .15s var(--ease-brand); }
.tip-host:hover .tip, .tip-host:has(:focus-visible) .tip, .tip.is-open { opacity: 1; }

/* ---------- press & hold preview ---------- */
.pv { position: fixed; inset: 0; z-index: 250; overflow: hidden; pointer-events: none; }
.pv[hidden] { display: none; }
.pv-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.pv-img { position: absolute; inset: 0 0 auto; width: 100%; user-select: none; }
.pv-shade { position: absolute; inset: 0; box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, .55); }
.pv-glow { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==========================================================================
   TECH STACK
   ========================================================================== */
.tech { padding: clamp(40px, 5vw, 72px) 24px; }
@media (min-width: 768px) { .tech { padding-inline: 32px; } }
.tech-logo { display: inline-flex; align-items: center; gap: 9px; height: 22px; color: var(--fg); font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; user-select: none; }
.tech-logo svg { width: 19px; height: 19px; flex-shrink: 0; }
.tech-ticker-mask { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tech-ticker { display: flex; width: max-content; gap: 52px; animation: tsTicker 26s linear infinite; will-change: transform; }
.tech-ticker-set { display: flex; flex-shrink: 0; align-items: center; gap: 52px; }
@keyframes tsTicker { from { transform: translate(0); } to { transform: translate(calc(-50% - 26px)); } }
.tech-grid { display: none; margin-inline: auto; width: 100%; max-width: 580px; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; row-gap: 29px; }
.tech-grid .j0 { justify-self: start; } .tech-grid .j3 { justify-self: end; }
@media (min-width: 640px) { .tech-ticker-mask { display: none; } .tech-grid { display: grid; } }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { position: relative; isolation: isolate; z-index: 10; overflow-x: clip; background: var(--bg); box-shadow: var(--section-shadow); }
.intro-stage { position: relative; height: 820px; }
.intro-rows { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; }
.intro-row { display: flex; min-height: 0; flex: 1; }
.intro-track { display: flex; height: 100%; width: max-content; flex-shrink: 0; gap: 8px; will-change: transform; }
.intro-track img { height: 100%; width: auto; aspect-ratio: 4 / 3; flex-shrink: 0; border-radius: 6px; background: var(--surface-strong); object-fit: cover; object-position: top; }
.intro-veil-a { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; pointer-events: none;
  background: radial-gradient(120% 96% at 50% 0%, transparent 74%, color-mix(in srgb, var(--bg) 8%, transparent) 80.5%, color-mix(in srgb, var(--bg) 28%, transparent) 87%, color-mix(in srgb, var(--bg) 62%, transparent) 92.7%, color-mix(in srgb, var(--bg) 88%, transparent) 96.9%, var(--bg) 100%); }
.intro-veil-b, .intro-veil-m { position: absolute; top: 0; bottom: 0; left: -50vw; right: -50vw; pointer-events: none; }
.intro-veil-b { display: none; background: radial-gradient(700px circle at calc(50vw + var(--fx, 225px) - 50px) calc(var(--fy, 240px) - 40px), var(--bg) 0%, var(--bg) 41%, color-mix(in srgb, var(--bg) 72%, transparent) 58%, color-mix(in srgb, var(--bg) 38%, transparent) 74%, color-mix(in srgb, var(--bg) 12%, transparent) 88%, transparent 100%); }
.intro-veil-m { background: radial-gradient(430px circle at calc(50vw + var(--fx, 225px) - 50px) calc(var(--fy, 240px) - 40px), color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 30%, color-mix(in srgb, var(--bg) 56%, transparent) 56%, color-mix(in srgb, var(--bg) 26%, transparent) 76%, color-mix(in srgb, var(--bg) 8%, transparent) 90%, transparent 100%); }
@media (min-width: 768px) { .intro-veil-b { display: block; } .intro-veil-m { display: none; } }
.intro-copy-pos { pointer-events: none; position: absolute; inset: 0; display: flex; align-items: flex-start; padding-top: 120px; }
.intro-copy { pointer-events: auto; }
.intro-h { font-size: var(--text-h3); line-height: 1.1; letter-spacing: var(--tracking-h3); }
@media (min-width: 768px) { .intro-h { white-space: nowrap; } }
.intro-p { margin-top: 10px; max-width: 450px; font-size: var(--text-lead); color: var(--fg-muted); }
.intro-btns { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   WORKS (coil)
   ========================================================================== */
.works { position: relative; z-index: 0; color: var(--fg); margin-top: -820px; }
.works-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.works-bg { position: absolute; inset: 0; z-index: -10; pointer-events: none; }
.works-bg canvas, .works-canvas canvas { width: 100%; height: 100%; display: block; }
.works-title-wrap { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding-inline: 24px; }
.works-title { text-align: center; font-size: clamp(56px, 10vw, 150px); line-height: 1; letter-spacing: -.04em; transition: opacity .5s var(--ease-brand); }
.works-canvas { position: absolute; inset: 0; z-index: 10; }
.works-dim { position: absolute; inset: 0; z-index: 15; pointer-events: none; background: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .5s var(--ease-brand); }
[data-theme="light"] .works-dim { background: rgba(255, 255, 255, .75); }
.works-all-wrap { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding-inline: 24px; pointer-events: none; }
.works-all { display: inline-flex; font-family: var(--font-display); font-size: clamp(44px, 7vw, 104px); line-height: 1; letter-spacing: -.04em; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-brand); }
.works.is-end .works-title { opacity: 0; }
.works.is-end .works-dim { opacity: 1; }
.works.is-end .works-all-wrap, .works.is-end .works-all { pointer-events: auto; opacity: 1; }
.works-room { height: 420vh; }
@media (prefers-reduced-motion: reduce) { .works-room { height: 100vh !important; } }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { background: var(--bg); padding-block: clamp(80px, 10vw, 136px); position: relative; }
.svc-head { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .svc-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } }
.svc-h { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: var(--tracking-h1); }
.svc-btns { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 12px; }
.svc-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(5, 1fr); } }
.svc-card { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); padding-inline: 12px; text-align: center; transition: color .3s var(--ease-brand); }
.svc-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 21px; }
.svc-in svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--fg); }
.svc-l { font-size: 16px; line-height: 21px; color: var(--fg-dim); transition: color .3s var(--ease-brand); }
.svc-card:hover .svc-l { color: var(--fg); }

/* shimmer dots (hover) */
@property --ring-mid { syntax: "<percentage>"; inherits: false; initial-value: 1%; }
@property --ring-peak { syntax: "<percentage>"; inherits: false; initial-value: 2%; }
@property --ring-soft { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --ring-full { syntax: "<number>"; inherits: false; initial-value: 0; }
.shimmer-mask { pointer-events: none; position: absolute; inset: 0; --ring-mid: 1%; --ring-peak: 2%; --ring-soft: 0; --ring-full: 0;
  -webkit-mask: radial-gradient(115% 150% at 50% 50%, #0000 0, rgba(0, 0, 0, var(--ring-soft)) var(--ring-mid), rgba(0, 0, 0, var(--ring-full)) var(--ring-peak), #0000 100%);
  mask: radial-gradient(115% 150% at 50% 50%, #0000 0, rgba(0, 0, 0, var(--ring-soft)) var(--ring-mid), rgba(0, 0, 0, var(--ring-full)) var(--ring-peak), #0000 100%);
  transition: --ring-mid .9s var(--ease-brand), --ring-peak .9s var(--ease-brand), --ring-soft .9s var(--ease-brand), --ring-full .9s var(--ease-brand); }
.svc-card:hover .shimmer-mask, .plat-cell:hover .shimmer-mask { --ring-mid: 22.29%; --ring-peak: 46.81%; --ring-soft: .4; --ring-full: 1; }
.shimmer { width: 100%; height: 100%; will-change: mask-position; animation: shimmerDrift 13.33s linear infinite paused; -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; mask-mode: luminance; }
.svc-card:hover .shimmer, .plat-cell:hover .shimmer { animation-play-state: running; }
@keyframes shimmerDrift { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -60% 0; mask-position: -60% 0; } }

/* border shine (hover) */
@property --shine-a { syntax: "<angle>"; inherits: false; initial-value: 135deg; }
@property --shine-b { syntax: "<angle>"; inherits: false; initial-value: 135deg; }
@property --shine-w { syntax: "<angle>"; inherits: false; initial-value: 24deg; }
@keyframes shineA { 0% { --shine-a: 135deg; --shine-w: 0deg; opacity: 1; } 10% { --shine-w: 24deg; } 86% { --shine-a: -45deg; --shine-w: 24deg; opacity: 1; } to { --shine-a: -45deg; --shine-w: 24deg; opacity: 0; } }
@keyframes shineB { 0% { --shine-b: 135deg; --shine-w: 0deg; opacity: 1; } 10% { --shine-w: 24deg; } 86% { --shine-b: 315deg; --shine-w: 24deg; opacity: 1; } to { --shine-b: 315deg; --shine-w: 24deg; opacity: 0; } }
.shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 60ms linear; padding: 1px; animation-duration: 2.8s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0); }
.shine-a { background-image: conic-gradient(from calc(var(--shine-a) - var(--shine-w, 24deg)), transparent 0deg, #0099ff calc(var(--shine-w, 24deg) / 2), #7acaff var(--shine-w, 24deg), transparent calc(var(--shine-w, 24deg) * 2), transparent 360deg); }
.shine-b { background-image: conic-gradient(from calc(var(--shine-b) - var(--shine-w, 24deg)), transparent 0deg, #0099ff calc(var(--shine-w, 24deg) / 2), #7acaff var(--shine-w, 24deg), transparent calc(var(--shine-w, 24deg) * 2), transparent 360deg); }
:is(.svc-card, .price-card):hover .shine-a, :is(.svc-card, .price-card):focus-visible .shine-a { animation-name: shineA; }
:is(.svc-card, .price-card):hover .shine-b, :is(.svc-card, .price-card):focus-visible .shine-b { animation-name: shineB; }
@media (pointer: coarse) { .shine { display: none; } }

/* platform card */
.plat { margin-top: 20px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .plat { grid-template-columns: 1fr 1fr; } }
.plat-card { position: relative; isolation: isolate; min-height: 294px; overflow: hidden; border-radius: 12px; padding: 32px; background: #02040a; color: #fff; }
@media (min-width: 768px) { .plat-card { padding: 45px; } }
.plat-stars { position: absolute; inset: 0; z-index: -10; width: 100%; height: 100%; }
.plat-card h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: var(--tracking-h2); }
.plat-card p { margin-top: 12px; max-width: 568px; font-size: var(--text-lead); line-height: 1.6; color: #ffffffbf; }
.plat-card p span { color: #fff; }
.plat-btn { margin-top: 20px; display: inline-flex; align-items: center; border-radius: 8px; background: #fff3; padding: 10px 15px; font-size: 14px; line-height: 1; font-weight: 500; color: #fff; transition: background-color .22s; }
.plat-btn:hover { background: #ffffff4d; }
.plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--line); }
@media (min-width: 640px) { .plat-grid { min-height: 294px; } }
.plat-cell { position: relative; display: grid; aspect-ratio: 1; place-items: center; background: var(--bg); }
@media (min-width: 640px) { .plat-cell { aspect-ratio: auto; } }
.plat-cell.has-badge { z-index: 10; overflow: visible; }
.plat-logo { position: relative; width: 34px; height: 34px; color: var(--fg); opacity: .62; transition: opacity .5s var(--ease-brand); }
@media (min-width: 640px) { .plat-logo { width: 44px; height: 44px; } }
.plat-cell:hover .plat-logo { opacity: 1; }
.plat-badge { position: absolute; right: 8px; bottom: 4px; width: 32px; height: 32px; rotate: 25deg; transition: scale .4s var(--ease-out), rotate .4s var(--ease-out); transform-origin: center; }
@media (min-width: 640px) { .plat-badge { right: 16px; bottom: 5px; width: 46px; height: 46px; } }
.plat-cell:hover .plat-badge { scale: 4; rotate: 0deg; }
.plat-badge svg { width: 100%; height: 100%; }

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker { position: relative; overflow: hidden; background: var(--surface); padding-block: 20px; }
.ticker-track { display: flex; width: max-content; align-items: center; gap: 26px; animation: tsTicker 40s linear infinite; will-change: transform; }
.tk-item { font-family: var(--font-display); font-size: 24px; font-weight: 500; font-variation-settings: "opsz" 14; letter-spacing: -.02em; white-space: nowrap; color: var(--fg-strong); }
.tk-dot { color: var(--fg-subtle); font-size: 16px; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing { position: relative; isolation: isolate; z-index: 10; background: var(--bg); padding-block: clamp(80px, 9vw, 120px); }
.big-h { text-align: center; font-size: clamp(46px, 9vw, 132px); line-height: 1; letter-spacing: -.04em; }
.pricing-grid { position: relative; margin-top: 28px; display: grid; gap: 20px; }
@media (min-width: 768px) { .pricing-grid { margin-top: clamp(-22px, -1.5vw, -10px); grid-template-columns: repeat(3, 1fr); } }
.price-card, .pc-all { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid var(--card-border); background: color-mix(in srgb, var(--bg) 42%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lift-line { position: absolute; top: 0; left: 50%; height: 1px; width: 240px; max-width: 80%; translate: -50% 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--card-line) 50%, transparent 100%); }
.pc-all .lift-line { width: 420px; }
.lift-glow { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(58% 46% at 50% 0%, color-mix(in srgb, var(--card-lift) 62%, transparent) 0%, color-mix(in srgb, var(--card-lift-mid) 62%, transparent) 45%, transparent 78%); }
.pc-in { position: relative; display: flex; flex: 1; flex-direction: column; padding: 32px; }
@media (min-width: 768px) { .pc-in { padding: 40px; } }
.pc-k { font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); }
.pc-v { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; }
.pc-v span { font-size: var(--text-body-s); color: var(--fg-muted); }
.pc-u { margin-top: 12px; font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--fg-strong); }
.pc-v b { font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 60px); line-height: .9; font-weight: 600; font-variation-settings: "opsz" 14; letter-spacing: -.035em; }
.pc-d { margin-top: 20px; font-size: var(--text-body-s); line-height: 1.65; color: var(--fg-muted); }
.price-card ul { margin-top: 32px; border-top: 1px solid var(--card-rule); }
.price-card li { border-bottom: 1px solid var(--card-rule); padding-block: 12px; font-size: 13.5px; line-height: 1.5; color: var(--fg-strong); }
.price-card li:last-child { border-bottom: 0; }
.pc-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 36px; }
.arr { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease-brand); }
.pc-foot .btn { width: 100%; justify-content: center; }
.pc-all { margin-top: 20px; }
.pc-all-in { position: relative; padding: 32px; }
@media (min-width: 768px) { .pc-all-in { padding: 40px; } }
.pc-all ul { margin-top: 24px; display: grid; border-top: 1px solid var(--card-rule); }
.pc-all li { border-bottom: 1px solid var(--card-rule); padding-block: 12px; font-size: 13.5px; line-height: 1.5; color: var(--fg-strong); }
.pc-all li:last-child { border-bottom: 0; }
@media (min-width: 768px) { .pc-all ul { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } .pc-all li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* ==========================================================================
   APPROACH
   ========================================================================== */
.approach { background: var(--bg); padding-block: clamp(80px, 9vw, 135px); }
.ap-h { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: var(--tracking-h1); }
.ap-rows { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.ap-row { display: grid; gap: 20px; }
@media (min-width: 751px) { .ap-row.a { grid-template-columns: 775fr 540fr; } .ap-row.b { grid-template-columns: 540fr 775fr; } }
@media (min-width: 1024px) { .ap-row.a { height: 593px; } .ap-row.b { height: 650px; } .ap-row.c { height: 560px; } }
.ap-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: var(--card); min-height: 380px; }
@media (min-width: 1024px) { .ap-card { min-height: 0; } }
.ap-copy { position: relative; z-index: 10; padding: 32px 20px; }
@media (min-width: 1024px) { .ap-copy { padding: 45px 36px 0; } }
.ap-copy h3 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: var(--tracking-h2); }
.ap-copy p { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--fg-muted); }
@media (min-width: 1024px) { .ap-copy p { margin-top: 12px; font-size: var(--text-lead); } }
.ap-copy p span { color: var(--fg); }
.ap-copy.on-dark h3 { color: #fff; }
.ap-copy.on-dark p { color: #ffffffb3; }
.ap-copy.on-dark p span { color: #fff; }
.ap-art { position: absolute; inset: 0; z-index: -10; overflow: hidden; }

/* 1 — browser strip */
.ap-strip-pos { pointer-events: none; position: absolute; top: 168px; left: -150px; transform-origin: top left; scale: .5; }
@media (min-width: 1024px) { .ap-strip-pos { top: 219px; left: -472px; scale: 1; } }
.ap-strip { display: flex; gap: 20px; will-change: transform; }
.bw { width: 524px; height: 524px; flex-shrink: 0; overflow: hidden; border-radius: 7px; background: #000; box-shadow: 0 6px 12px 6px rgba(0, 0, 0, .1); }
.bw .tl { display: flex; align-items: center; gap: 5px; padding-left: 10px; height: 18px; }
.bw .tl span { width: 7px; height: 7px; border-radius: 999px; }
.bw img { display: block; width: 100%; height: 506px; object-fit: cover; object-position: top; }

/* 2 — mobile / planet */
.art-mobile { --pa-top: 131px; --pb-top: 142px; background: #01030a; }
@media (min-width: 1024px) { .art-mobile { --pa-top: 170px; --pb-top: 214px; } }
.planet { position: absolute; left: 50%; top: 62%; width: 190%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 8%, #2f9bff 0%, #0b4fd1 9%, #062a7a 22%, #041235 40%, #01030a 62%);
  box-shadow: 0 -30px 90px -10px #1d7dffaa, inset 0 30px 60px -20px #8fd0ff; }
.planet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(#ffffff26 1px, transparent 1.4px) 0 0 / 7px 7px; -webkit-mask: radial-gradient(circle at 50% 10%, #000 0, transparent 40%); mask: radial-gradient(circle at 50% 10%, #000 0, transparent 40%); opacity: .6; }
[data-theme="light"] .art-mobile { background: #e9f2ff; }
[data-theme="light"] .planet { background: radial-gradient(circle at 50% 8%, #9fd2ff 0%, #4aa3ff 9%, #3d7ff0 22%, #bcd7ff 40%, #e9f2ff 62%); box-shadow: 0 -30px 90px -10px #4aa3ff88; }
[data-theme="light"] .art-mobile .ap-copy h3 { color: #000; }
[data-theme="light"] .art-mobile .ap-copy p { color: #000a; }
[data-theme="light"] .art-mobile .ap-copy p span { color: #000; }
.phone-f { position: absolute; pointer-events: none; aspect-ratio: 390 / 844; border-radius: 13% / 6%; padding: 2.4%; background: linear-gradient(145deg, #e7e7e7, #8a8a8a 30%, #5a5a5a 60%, #c8c8c8); box-shadow: 0 30px 60px -20px #000c, inset 0 0 0 1px #ffffff55; }
.phone-f::before { content: ""; position: absolute; left: 50%; top: 3.6%; width: 27%; height: 3.3%; translate: -50% 0; border-radius: 99px; background: #000; z-index: 2; }
.phone-f img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 11.4% / 5.3%; background: #000; }
.breathe { will-change: transform; animation: breathe var(--dur, 6s) cubic-bezier(.37, 0, .63, 1) infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(calc(var(--bd, 14px) / -2)); } 50% { transform: translateY(calc(var(--bd, 14px) / 2)); } }

/* 3 — conversion / laptop */
.art-conv { background: #020611; }
.beam { position: absolute; inset: -20%; background:
  linear-gradient(118deg, transparent 38%, #0d3fae 44%, #2d8bff 49%, #9fe0ff 50.3%, #2d8bff 51.6%, #0b2f86 57%, transparent 66%); filter: blur(.5px); }
.art-conv .beam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 47%, #ffffff55 50%, transparent 53%); filter: blur(14px); }
.grain-c, .stars-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain-c { mix-blend-mode: overlay; opacity: .5; }
[data-theme="light"] .art-conv { background: #eef4ff; }
[data-theme="light"] .art-conv .beam { opacity: .55; }
.laptop-scale { position: absolute; inset: 0; transform-origin: top left; translate: 24px 18px; scale: .584; }
@media (min-width: 1024px) { .laptop-scale { translate: 0 0; scale: 1; } }
.laptop { position: absolute; inset: 0; pointer-events: none; }
.laptop-lid { position: absolute; left: -9px; top: 201px; width: 719px; height: 421px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #d9d9dc, #b5b5ba); padding: 12px 12px 0; box-shadow: inset 0 0 0 1px #fff8; }
.laptop-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px 12px 0 0; background: #000; padding: 22px 20px 0 64px; }
.laptop-screen::before { content: ""; position: absolute; left: 50%; top: 0; width: 110px; height: 18px; translate: -50% 0; border-radius: 0 0 10px 10px; background: #000; z-index: 2; }
.laptop-img { position: absolute; top: 22px; left: -31px; width: 760px; max-width: none; height: auto; transition: translate .5s var(--ease-brand); }
.laptop:hover .laptop-img, .laptop.is-hover .laptop-img { translate: 95px 0; }
.laptop-base { position: absolute; left: -9px; top: 622px; width: 760px; height: 29px; border-radius: 0 0 26px 26px / 0 0 22px 22px; background: linear-gradient(180deg, #e3e3e6, #a9a9ae 60%, #77777c); }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 120px; height: 9px; translate: -50% 0; border-radius: 0 0 10px 10px; background: #9d9da2; }
.laptop-hit { position: absolute; left: -9px; top: 201px; width: 719px; height: 450px; pointer-events: auto; }

/* 4 — pixel / collab */
.art-pixel { background: #010208; }
.pixel-glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 100%, #0b3ea8aa, transparent 70%), radial-gradient(30% 50% at 0% 75%, #1167ff66, transparent 70%), radial-gradient(30% 50% at 100% 75%, #1167ff66, transparent 70%); }
[data-theme="light"] .art-pixel { background: #f3f6fb; }
[data-theme="light"] .pixel-glow { opacity: .35; }
.collab-scale { position: absolute; inset: 0; transform-origin: top left; translate: -4px 0; scale: .68; }
@media (min-width: 1024px) { .collab-scale { translate: 0 0; scale: 1; } }
.collab { position: absolute; inset: 0; pointer-events: none; --u: calc(671 / 780); }
.collab-win { position: absolute; left: 36px; top: 201px; width: 685px; height: 450px; overflow: hidden; border-radius: 13.5px 13.5px 0 0; border: 1px solid #ffffff1a; background: #ffffff05; backdrop-filter: blur(4px); box-shadow: 0 0 56px 9px rgba(0, 0, 0, .2); }
.collab-canvas { position: absolute; left: 7px; top: 7px; width: 671px; height: 455px; overflow: hidden; border-radius: 6.5px; background: #000; }
.collab-pan { position: absolute; inset: 0; will-change: transform; }
.cf { position: absolute; max-width: none; left: calc(var(--fx) * var(--u) * 1px); top: calc(var(--fy) * var(--u) * 1px); width: calc(var(--fw) * var(--u) * 1px); border-radius: 4px; }
.cf.sel { outline: 1.5px solid var(--blue-500); }
.cf-label { position: absolute; left: calc(var(--fx) * var(--u) * 1px); top: calc(var(--fy) * var(--u) * 1px); width: calc(var(--fw) * var(--u) * 1px); height: 15.5px; border-radius: 3.4px; background: #161618; display: flex; align-items: center; gap: 3px; padding-left: 3.4px; font-size: 6.9px; line-height: 1; color: #fff; font-family: var(--font-text); }
.cf-label span { display: grid; place-items: center; width: 6.9px; height: 6.9px; border-radius: 2px; background: #2f2f33; }
.collab-chrome { position: absolute; left: 7px; top: 7px; width: 671px; height: 455px; pointer-events: none; filter: var(--panel-filter); }
.cc-top { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; gap: 14px; padding: 0 10px; background: #0d0d0f; border-bottom: 1px solid #ffffff14; font-size: 9px; color: #d6d6d6; }
.cc-top .mark { width: 12px; height: 12px; color: #fff; }
.cc-chev { width: 8px; height: 8px; margin-left: -10px; fill: none; stroke: #888; stroke-width: 2.4; }
.cc-tool { display: inline-flex; align-items: center; gap: 4px; }
.cc-tool i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: #2a2a2e; font-style: normal; font-size: 8px; color: #fff; }
.cc-left { position: absolute; left: 0; top: 30px; bottom: 0; width: 134px; background: #0d0d0f; border-right: 1px solid #ffffff14; padding: 8px; font-size: 8px; color: #bdbdbd; }
.cc-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 5px; background: #ffffff10; }
.cc-tabs span { flex: 1; text-align: center; padding: 3px 0; border-radius: 4px; font-size: 7px; }
.cc-tabs span.on { background: #ffffff22; color: #fff; }
.cc-dd, .cc-search { margin-top: 7px; padding: 4px 6px; border-radius: 4px; background: #ffffff10; font-size: 7.5px; }
.cc-search { color: #777; }
.cc-left ul { margin-top: 8px; display: flex; flex-direction: column; gap: 4.5px; }
.cc-left li { display: flex; align-items: center; gap: 4px; padding-left: calc(var(--d) * 7px); font-size: 7.5px; }
.cc-left li i { width: 6px; height: 6px; border-radius: 1.5px; background: #8b8b8b; }
.cc-left li.b i { background: var(--blue-500); }
.cc-left li.p i { background: #9b6bff; rotate: 45deg; width: 5px; height: 5px; }
.cc-left li.open i { background: var(--blue-500); }
.cur { position: absolute; left: calc(36px + 7px + var(--x)); top: calc(201px + 7px + var(--y)); }
.cur > svg, .cur .breathe > svg { position: absolute; left: 0; top: 0; }
.cur span { position: absolute; left: 21px; top: 14px; border-radius: 999px; background: var(--blue-500); padding: 7px 18px; font-size: 12px; line-height: 14px; color: #fff; white-space: nowrap; }
.cur-b span { left: 16px; top: 9px; }

/* 5 — CMS */
.art-cms { background: #0c1116; }
.silk { position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 85% 10%, #c7d3dc 0%, #7f919e 18%, #2a3640 40%, transparent 60%),
  radial-gradient(90% 60% at 10% 95%, #6f828f 0%, #26313a 35%, transparent 60%),
  linear-gradient(160deg, #1b252d 0%, #0d1318 55%, #182129 100%); }
.silk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff30 46%, transparent 52%), linear-gradient(115deg, transparent 58%, #ffffff18 66%, transparent 72%); filter: blur(10px); }
[data-theme="light"] .art-cms { background: #e8eef3; }
[data-theme="light"] .silk { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
[data-theme="light"] .art-cms .ap-copy h3 { color: #000; }
[data-theme="light"] .art-cms .ap-copy p { color: #000a; }
[data-theme="light"] .art-cms .ap-copy p span { color: #000; }
.cms { position: absolute; top: 156px; right: 0; left: 20px; overflow: hidden; border-radius: 12px 0 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--bg); padding: 16px 0 0 16px; }
@media (min-width: 1024px) { .cms { top: 201px; left: 36px; } }
.cms-row { display: grid; grid-template-columns: 1fr 100px 46px; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 7px 16px; font-size: 10px; line-height: 1.4; color: var(--fg-strong); }
.cms-head { border-top: 0; padding-block: 10px; color: var(--fg-subtle); }
@media (min-width: 1024px) { .cms-row { grid-template-columns: 1fr 150px 110px; gap: 16px; padding: 15px 24px; font-size: var(--text-body-s); } .cms-head { padding-block: 16px; } }
.cms-t { display: flex; min-width: 0; align-items: center; gap: 10px; }
.cms-t svg { width: 16px; height: 16px; flex-shrink: 0; fill: var(--fg-subtle); }
.cms-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-d { color: var(--fg-muted); white-space: nowrap; }
.cms img { width: 36px; height: 22px; border-radius: 3px; object-fit: cover; object-position: top; }
@media (min-width: 1024px) { .cms img { width: 59px; height: 35px; } }

/* 6 — future / watch */
.art-future { display: flex; flex-direction: column; }
.art-future::before { content: ""; position: absolute; inset: 0; z-index: -10; background: var(--future-wash); }
.watch-pos { display: flex; min-height: 0; flex: 1; align-items: center; }
.watch { pointer-events: none; position: relative; aspect-ratio: 382 / 300; width: 100%; flex-shrink: 0; }
.watch > svg { position: absolute; left: 50%; top: 0; bottom: 18px; height: calc(100% - 18px); width: auto; aspect-ratio: 540 / 392; translate: -50% 0; max-width: calc(100% - 64px); }
.w-hand { transform-origin: 50% 58.16%; will-change: transform; animation: handSweep linear infinite; }
.h-sec { animation-duration: 60s; } .h-min { animation-duration: 3600s; } .h-hour { animation-duration: 86400s; }
@keyframes handSweep { to { transform: rotate(1turn); } }
[data-theme="light"] .w-dial { filter: invert(1) hue-rotate(180deg) contrast(.9); }
[data-theme="light"] .w-hand { filter: invert(1); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs { background: var(--bg); padding-block: clamp(80px, 9vw, 120px); }
.faq-h { text-align: center; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.04em; }
.faq-list { margin: 70px auto 0; display: flex; max-width: 880px; flex-direction: column; gap: 12px; }
.faq { border-radius: 12px; border: 1px solid var(--line); padding-inline: 16px; }
.faq button { display: flex; width: 100%; cursor: pointer; align-items: center; gap: 24px; padding-block: 13px; text-align: left; }
.faq button span { flex: 1; font-family: var(--font-text); font-size: 16px; line-height: 1.8; font-weight: 400; color: var(--fg-strong); transition: color .22s; }
.faq button:hover span { color: var(--fg); }
.faq button svg { width: 10px; height: 10px; flex-shrink: 0; fill: none; stroke: var(--fg-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s var(--ease-brand); }
.faq.is-open button svg { rotate: -180deg; }
.faq-p { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-brand), opacity .5s var(--ease-brand); }
.faq.is-open .faq-p { grid-template-rows: 1fr; opacity: 1; }
.faq-p > div { overflow: hidden; }
.faq-p p { padding: 0 40px 18px 0; font-size: 16px; line-height: 1.6; color: var(--fg-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding-top: 120px; }
.ftr-cta { text-align: center; padding-inline: 24px; }
.ftr-h { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -.04em; }
.ftr-btns { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ftr-mark { position: absolute; top: 292px; left: 50%; z-index: -10; width: 430px; pointer-events: none; opacity: 0; transform: translate(-50%) translateY(4px) scale(.985); transition: opacity 1.2s cubic-bezier(.5, 0, .6, 1), transform 1.2s cubic-bezier(.5, 0, .6, 1); }
.ftr-mark.is-shown { opacity: 1; transform: translate(-50%) translateY(0) scale(1); }
@media (min-width: 768px) { .ftr-mark { top: 374px; width: 924px; } }
.ftr-mark svg { width: 100%; height: auto; }
[data-theme="light"] .ftr-mark { filter: invert(1); }
.ftr-veil { position: absolute; inset: auto 0 0; height: 62%; z-index: -5; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--footer-veil) 30%, var(--footer-veil)); }
.ftr-grid { margin-top: 305px; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .ftr-grid { margin-top: 380px; } }
.ftr-social { margin-inline: auto; display: grid; max-width: 1388px; border-inline: 1px solid var(--line); }
.ftr-social a { display: flex; height: 52px; align-items: center; gap: 10px; padding-inline: 16px; font-size: 12px; color: var(--fg-strong); border-bottom: 1px solid var(--line); transition: background-color .22s, color .22s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 768px) { .ftr-social a { height: 62px; padding-inline: 24px; font-size: var(--text-body-s); } }
.ftr-social a:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); color: var(--fg); }
.ftr-social .soc { width: 16px; height: 16px; }
.ftr-social .arr { margin-left: auto; width: 13px; height: 13px; color: var(--fg-subtle); }
.ftr-social a:hover .arr { translate: 4px 0; }
.ftr-cols { margin-inline: auto; display: grid; max-width: 1388px; grid-template-columns: repeat(2, 1fr); border-inline: 1px solid var(--line); }
@media (min-width: 768px) { .ftr-cols { grid-template-columns: repeat(4, 1fr); } }
.ftr-cols > div { display: flex; flex-direction: column; padding: 32px 16px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .ftr-cols > div { padding: 48px 24px 40px; } .ftr-cols > div + div { border-left: 1px solid var(--line); } }
.ftr-cols > div:nth-child(even) { border-left: 1px solid var(--line); }
.ftr-cols h3 { font-family: var(--font-text); font-size: 12px; line-height: 12px; font-weight: 400; color: var(--fg-subtle); margin-bottom: 14px; }
@media (min-width: 768px) { .ftr-cols h3 { font-size: var(--text-body-s); color: var(--fg-dim); margin-bottom: 20px; } }
.ftr-cols a, .ftr-cols span { display: block; padding-block: 4px; font-size: 12px; line-height: 1.3; color: var(--fg-strong); transition: color .22s; }
@media (min-width: 768px) { .ftr-cols a, .ftr-cols span { font-size: var(--text-body-s); padding-block: 8px; } }
.ftr-cols a:hover { color: var(--fg); }
.ftr-copy { border-top: 1px solid var(--line); padding: 24px; text-align: center; font-size: 12px; color: var(--fg-subtle); }

/* ekran dışındaki bölümlerde sürekli CSS animasyonlarını duraklat (--play main.js tarafından ayarlanır) */
.hero-bars i, .tech-ticker, .ticker-track, .breathe { animation-play-state: var(--play, running); }

/* reveal helpers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .hero-bars i, .breathe, .w-hand, .tech-ticker, .ticker-track { animation: none !important; }
}

/* theme view-transition */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ==========================================================================
   Yasal sayfalar (gizlilik, kullanım koşulları, KVKK, çerez) — _build/legal.py
   ========================================================================== */
.legal-page { scroll-behavior: smooth; }
.lg { padding: 112px 16px 72px; }
@media (min-width: 768px) { .lg { padding: 152px 32px 112px; } }
.lg-doc { margin-inline: auto; max-width: 760px; }
.lg-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 32px; }
.lg-head h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: var(--tracking-h1); }
.lg-meta { margin-top: 16px; font-size: var(--text-body-s); color: var(--fg-subtle); }
.lg-toc { margin-bottom: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; background: var(--surface); }
.lg-toc-h { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); margin-bottom: 12px; }
.lg-toc ol { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: 32px; }
@media (min-width: 768px) { .lg-toc ol { columns: 2; } }
.lg-toc li { break-inside: avoid; }
.lg-toc a { display: block; padding: 4px 0; font-size: var(--text-body-s); line-height: 1.4; color: var(--fg-muted); transition: color .2s; }
.lg-toc a:hover { color: var(--fg); }
.lg-body { font-family: var(--font-text); font-size: 15.5px; line-height: 1.7; color: var(--fg-strong); overflow-wrap: anywhere; }
.lg-body h2, .lg-body h3, .lg-body h4 { position: relative; color: var(--fg); scroll-margin-top: 96px; }
.lg-body h2 { margin: 48px 0 16px; font-size: 24px; line-height: 1.25; letter-spacing: var(--tracking-h3); }
.lg-body h3 { margin: 32px 0 12px; font-size: 18px; line-height: 1.3; }
.lg-body h4 { margin: 24px 0 8px; font-size: 16px; }
.lg-anchor { position: absolute; left: -1.1em; width: 1em; color: var(--fg-dim); opacity: 0; text-decoration: none; transition: opacity .2s; }
.lg-body h2:hover .lg-anchor, .lg-body h3:hover .lg-anchor, .lg-anchor:focus { opacity: 1; }
@media (max-width: 860px) { .lg-anchor { display: none; } }
.lg-body p { margin: 0 0 14px; }
.lg-body ul, .lg-body ol { margin: 0 0 16px; padding-left: 22px; }
.lg-body ul { list-style: disc; }
.lg-body ol { list-style: decimal; }
.lg-body li { margin: 4px 0; }
.lg-body li > ul, .lg-body li > ol { margin: 6px 0 4px; }
.lg-body strong { color: var(--fg); font-weight: 600; }
.lg-body a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 2px; }
.lg-body code { font-size: .88em; padding: 1px 5px; border-radius: 4px; background: var(--tint-weak); color: var(--fg); overflow-wrap: anywhere; }
.lg-body blockquote { margin: 0 0 16px; border-left: 2px solid var(--line-strong); padding: 4px 0 4px 16px; color: var(--fg-muted); }
.lg-table { margin: 8px 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.lg-table th, .lg-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table th { font-weight: 600; color: var(--fg); background: var(--surface); }
@media (max-width: 600px) { .lg-table table { font-size: 13px; } .lg-table th, .lg-table td { padding: 8px 10px; min-width: 120px; } }
.lg-top { margin-top: 48px; font-size: var(--text-body-s); }
.lg-top a { color: var(--fg-muted); }
.lg-top a:hover { color: var(--fg); }
.ftr-compact { padding-top: 0; }
.ftr-compact .ftr-grid { margin-top: 0; }
.ftr-cols-legal a[aria-current="page"] { color: var(--fg); font-weight: 500; }