/* Novece — one stylesheet for the whole site.
   Dark glow system: fixed atmosphere behind the page, glass surfaces on top,
   one coloured call to action (WhatsApp green) and one accent (blue→violet)
   used only for emphasis. Motion is decorative and switches off entirely under
   prefers-reduced-motion. */

/* ---------------------------------------------------------------- fonts
   Self-hosted, so no page makes a third-party request. Inter is a variable
   font, so one file per subset covers 400–600. latin-ext is what carries
   ğ ş ı İ — without it the Turkish pages break mid-word. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-400-600-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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-400-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-600-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;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --bg: #07070c;
  --glass: rgba(255, 255, 255, .045);
  --glass-strong: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .09);
  --border-hi: rgba(133, 158, 255, .45);
  --text: #f2f3f7;
  --muted: #a7abbd;
  /* 4.8:1 against --bg. The older, dimmer #666b80 sat at 3.81:1 and failed
     WCAG AA for the footer, the "/ 01" card numbers and the language switch,
     all of which are set below 14px. */
  --faint: #767b91;
  --blue: #4f7dff;
  --violet: #8f6bff;
  --wa: #22c15e;
  --wa-hi: #2bd66c;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
main { flex: 1; }

/* ------------------------------------------------- atmosphere: glow, beam, grid */

.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
/* No filter: blur() here. The gradient already fades to transparent well
   inside its own box, so a 20px blur on an 1100px shape was invisible — but it
   forced Chrome to re-raster the whole surface on every frame of the scale
   animation below, which is expensive on a mid-range phone. will-change keeps
   both layers on the compositor so the animations cost no main-thread work. */
.sky::before {
  content: ""; position: absolute; top: -320px; left: 50%; transform: translateX(-58%);
  width: 1100px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79, 125, 255, .28), rgba(143, 107, 255, .12) 55%, transparent 75%);
  will-change: transform, opacity;
  animation: breathe 9s ease-in-out infinite alternate;
}
.sky::after {
  content: ""; position: absolute; top: -30%; left: 58%;
  width: 220px; height: 170%;
  background: linear-gradient(90deg, transparent, rgba(120, 150, 255, .10), transparent);
  transform: rotate(38deg);
  will-change: opacity;
  animation: beam 12s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { opacity: .75; transform: translateX(-58%) scale(1); }
  to { opacity: 1; transform: translateX(-52%) scale(1.06); }
}
@keyframes beam { from { opacity: .5; } to { opacity: 1; } }

.grid-lines {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* The document pages keep the system but drop the show: a single quiet wash. */
.page-plain .sky::before {
  top: -420px; width: 900px; height: 520px; animation: none; opacity: .5;
  background: radial-gradient(closest-side, rgba(79, 125, 255, .16), transparent 72%);
}
.page-plain .sky::after { display: none; }
.page-plain .grid-lines { display: none; }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 7, 12, .65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; }
.brand .logo { height: 27px; width: auto; display: block; }
.brand:hover { opacity: .85; }
.head-nav { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
/* Menu items read as buttons: a hover pill and a persistent current-page state,
   so they never look like loose text. Direct children only — the lang switcher
   inside keeps its own pill. */
.head-nav > a {
  color: var(--muted); font-weight: 500;
  padding: 7px 13px; border-radius: 9px;
  transition: color .15s, background .15s;
}
.head-nav > a:hover { color: var(--text); background: var(--glass-strong); }
.head-nav > a[aria-current="page"] { color: var(--text); background: var(--glass); }

/* Hamburger — hidden on desktop, shown when the row would get tight. */
.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.lang { display: flex; border: 1px solid var(--border); border-radius: 99px; overflow: hidden; font-size: 12px; }
.lang a { padding: 5px 12px; color: var(--faint); }
.lang a:hover { color: var(--text); }
.lang a[aria-current] { background: rgba(255, 255, 255, .12); color: var(--text); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 120px 0 90px; text-align: center; position: relative; }
.hero.short { padding: 96px 0 56px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 7px 16px;
  background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 10px var(--blue); animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Wide enough that the line breaks come from the <br> in the markup, not from
   the measure — otherwise "apps," is orphaned on its own line. */
.hero h1 { font-size: clamp(42px, 6.6vw, 78px); line-height: 1.06; max-width: 26ch; margin: 0 auto; }
.hero.short h1 { max-width: 20ch; }
.grad {
  background: linear-gradient(92deg, var(--blue), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { margin: 28px auto 40px; max-width: 56ch; color: var(--muted); font-size: 18px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .mail { margin-top: 22px; font-size: 13.5px; color: var(--faint); }
.hero .mail a { color: var(--muted); border-bottom: 1px solid var(--border); }
.hero .mail a:hover { color: var(--text); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 12px;
  font-size: 15px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-wa {
  background: linear-gradient(180deg, var(--wa-hi), var(--wa)); color: #fff;
  box-shadow: 0 0 0 1px rgba(43, 214, 108, .35), 0 8px 28px -8px rgba(34, 193, 94, .55);
}
.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(43, 214, 108, .5), 0 14px 34px -8px rgba(34, 193, 94, .65);
}
.btn-glass {
  background: var(--glass); border-color: var(--border); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-glass:hover { background: var(--glass-strong); border-color: var(--border-hi); }

/* ---------------------------------------------------------------- stat strip */

.board { margin-top: -6px; padding-bottom: 20px; }
/* Named .stats, not .in: the reveal script adds an "in" class to each cell, and
   a `.board .in` rule would then turn every cell into a three-column grid and
   lay its own label out beside the number. */
.board .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cell {
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 22px 24px; text-align: center; position: relative; overflow: hidden;
}
.cell::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
}
.cell b {
  display: block; font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 26px; font-weight: 600;
  background: linear-gradient(92deg, #dfe6ff, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cell span { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- sections */

section { padding: 110px 0; }
section.tight { padding-top: 0; }
.eyebrow {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin-bottom: 14px;
}
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; max-width: 26ch; }
.section-lede { margin-top: 16px; color: var(--muted); max-width: 56ch; }
.center { text-align: center; }
.center h2, .center .section-lede { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- product panel */

.panel {
  margin-top: 48px; border-radius: 22px; padding: 44px;
  background: linear-gradient(160deg, rgba(79, 125, 255, .10), rgba(143, 107, 255, .05) 40%, var(--glass));
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  position: relative; overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; top: -60%; right: -15%; width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 107, 255, .22), transparent 70%);
}
.panel > * { position: relative; z-index: 1; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cdd6ff;
  border: 1px solid rgba(133, 158, 255, .4); background: rgba(79, 125, 255, .12);
  border-radius: 99px; padding: 6px 14px; margin-bottom: 18px;
}
.panel h3 { font-size: 26px; margin-bottom: 12px; }
.panel .desc { color: var(--muted); }
.panel .demo { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 14.5px; color: #b9c6ff; }
.panel .demo:hover { color: #fff; }

.spec { list-style: none; display: grid; gap: 10px; align-content: start; }
.spec li {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px; padding: 13px 16px; font-size: 14.5px; color: var(--muted);
  display: flex; gap: 10px; align-items: baseline;
}
.spec li::before { content: "✓"; color: var(--wa-hi); font-weight: 600; }

/* ---------------------------------------------------------- service cards */

.cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards-4 { grid-template-columns: repeat(2, 1fr); }
.card {
  position: relative; border-radius: 18px; padding: 30px 26px;
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s, background .2s;
  display: flex; flex-direction: column; text-align: left;
}
.card:hover { transform: translateY(-6px); border-color: var(--border-hi); background: var(--glass-strong); }
.card .num { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 16px; }
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.card .price {
  display: block; margin: 18px 0 16px;
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 20px; font-weight: 600;
  background: linear-gradient(92deg, #e8ecff, #9fb5ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card .price small {
  display: block; font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 400;
  color: var(--faint); -webkit-text-fill-color: var(--faint); margin-top: 4px;
}
.card .go { font-size: 14px; color: #b9c6ff; }
.card:hover .go { color: #fff; }

/* ---------------------------------------------------------- package cards
   The services pages: same glass card, but the included-work list sits in its
   own inset panel and the card ends with its own WhatsApp button. */

.packs { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.packs-4 { grid-template-columns: repeat(2, 1fr); }
.pack {
  border-radius: 18px; padding: 30px 26px; scroll-margin-top: 90px;
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  transition: border-color .2s, background .2s;
}
.pack:hover { border-color: var(--border-hi); background: var(--glass-strong); }
.pack h3 { font-size: 19px; margin-bottom: 14px; }
.pack .price {
  display: block; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 24px; font-weight: 600;
  background: linear-gradient(92deg, #e8ecff, #9fb5ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pack .price-note { font-size: 12.5px; color: var(--faint); margin: 6px 0 20px; }
.pack .spec { margin-bottom: 20px; }
.pack .meta { margin-top: auto; font-size: 12.5px; color: var(--faint); padding-top: 4px; }
.pack .btn { margin-top: 16px; }

/* ---------------------------------------------------------------- faq */

.faq { margin-top: 40px; display: grid; gap: 12px; }
.faq-row {
  background: var(--glass); border: 1px solid var(--border); border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 22px 24px; transition: border-color .2s, background .2s;
}
.faq-row:hover { border-color: var(--border-hi); background: var(--glass-strong); }
.faq-row h3 { font-size: 16.5px; margin-bottom: 8px; }
.faq-row p { color: var(--muted); font-size: 14.5px; max-width: 78ch; }

/* ---------------------------------------------------------- closing panel */

.close-panel {
  border-radius: 24px; padding: 64px 44px; text-align: center;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(79, 125, 255, .16), transparent 70%), var(--glass);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.close-panel h2 { margin: 0 auto; }
.close-panel .lede { margin: 18px auto 34px; color: var(--muted); max-width: 52ch; }
.close-panel .mail { margin-top: 20px; font-size: 13.5px; color: var(--faint); }
.close-panel .mail a { color: var(--muted); border-bottom: 1px solid var(--border); }

/* ---------------------------------------------------------- work cards
   Portfolio grid on /work and /tr/projeler: the same glass surface as .card,
   with a screenshot sitting full-bleed on top. No new tokens — border, radius
   and glass all come from the system above; the screenshot keeps the 1200×750
   ratio it is exported at, so the row never shifts while images load. */

.work { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.work-card {
  border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s, background .2s;
  display: flex; flex-direction: column;
}
.work-card:hover { transform: translateY(-6px); border-color: var(--border-hi); background: var(--glass-strong); }
.work-shot {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750;
  object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--border); background: #0d0f16;
}
.work-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.work-tag {
  align-self: flex-start; font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px; margin-bottom: 14px;
}
.work-card h3 { font-size: 18px; margin-bottom: 8px; }
.work-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.work-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 14px; }
.work-links a { color: #b9c6ff; display: inline-flex; align-items: center; gap: 6px; }
.work-links a:hover { color: #fff; }

/* A single quiet line under a section that points to another page. */
.more { margin-top: 30px; font-size: 15px; }
.more a { color: #b9c6ff; }
.more a:hover { color: #fff; }

/* ---------------------------------------------------------------- document
   privacy.html: one column of prose on the same surface. */

.doc { padding: 72px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; }
.doc .updated { color: var(--faint); font-size: 14px; margin-top: 12px; }
.doc h2 { font-size: 21px; margin: 44px 0 12px; max-width: none; }
.doc p, .doc li { color: var(--muted); font-size: 15.5px; }
.doc p { margin-bottom: 14px; }
.doc ul { margin: 0 0 14px 20px; display: grid; gap: 8px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc a { color: #b9c6ff; border-bottom: 1px solid var(--border); }
.doc a:hover { color: #fff; }
.doc code {
  font-family: var(--mono); font-size: 13px; color: #cdd6ff;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
.note {
  background: var(--glass); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; margin: 24px 0;
}
.note p:last-child { margin-bottom: 0; }
.scroll { overflow-x: auto; margin-bottom: 16px; }
.doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
.doc th, .doc td {
  text-align: left; vertical-align: top; padding: 12px 14px;
  border-bottom: 1px solid var(--border); color: var(--muted);
}
.doc th { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 1px solid rgba(255, 255, 255, .06); padding: 36px 0 48px; margin-top: auto; }
.foot-row { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; color: var(--faint); }
.foot-row a:hover { color: var(--muted); }
.foot-legal {
  margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--faint);
  max-width: 72ch; margin-left: auto; margin-right: auto; line-height: 1.7;
}

/* ---------------------------------------------------------------- motion */

/* Everything here is scoped to .js, which the page sets on <html> before the
   body renders. Without JavaScript nothing is hidden in the first place, so a
   failed script can never leave a section blank.

   .rise moves but never fades. Chrome refuses to treat an element painted at
   opacity 0 as a Largest Contentful Paint candidate, and the whole hero — h1
   included — used to start there, so the page reported no LCP at all and
   Lighthouse could not score it (NO_LCP). Animating transform alone keeps the
   entrance and leaves the heading paintable on the first frame. It also
   removes a failure mode: when a browser throttles animations in a background
   tab the old rule left the hero permanently invisible.

   .reveal keeps its fade. It sits below the fold, so it is not an LCP
   candidate, and its class is toggled by IntersectionObserver rather than by
   an animation, which throttling does not stall. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { transform: translateY(18px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .rise:nth-child(2) { animation-delay: .09s; }
  .js .rise:nth-child(3) { animation-delay: .18s; }
  .js .rise:nth-child(4) { animation-delay: .27s; }
  .js .rise:nth-child(5) { animation-delay: .36s; }
  @keyframes rise { to { transform: none; } }
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky::before, .sky::after, .pill .dot { animation: none; }
  .card:hover, .btn-wa:hover { transform: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .board .stats { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; padding: 30px; gap: 32px; }
  .cards, .cards-4, .packs, .packs-4, .work { grid-template-columns: 1fr; }
  .hero { padding: 84px 0 64px; }
  .hero.short { padding: 64px 0 40px; }
  section { padding: 76px 0; }
  .close-panel { padding: 44px 24px; }
  .doc { padding: 48px 0 72px; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .head-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px 24px 20px;
    background: rgba(7, 7, 12, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .head-nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .head-nav > a { padding: 12px 14px; font-size: 15px; border-radius: 10px; }
  .head-nav .lang { align-self: flex-start; margin-top: 8px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 18px; }
  .head-row { gap: 12px; }
  .brand .logo { height: 22px; }
  .cta-row .btn { width: 100%; }
  .pack, .card { padding: 26px 20px; }
}