/* ==========================================================================

          +-------+
          | CSS   |__
          | IS    |  \
          | AWESOME   |       overflow: visible;
          |       |__/        (every front-end dev owns this mug)
          +-------+

   Micca Dev -- production stylesheet
   Rebuilt from the ".dc.html" design prototype. Every color, spacing,
   shadow, breakpoint and transition value below is carried over verbatim
   from the prototype's inline styles / <style> block.

   You'll meet cubic-bezier(.22,.61,.36,1) a lot. It's the house easing
   curve. It's friendly. Say hi.
   ========================================================================== */

/* Design tokens. Change a color here and it changes everywhere. Change a
   hard-coded hex further down and it changes... somewhere. Good luck. */
:root {
  --color-bg: #FFFFFF;
  --color-ink: #2B1C12;
  --color-legal-heading: #241609;
  --color-link: #C2410C;
  --color-link-hover: #EA580C;
  --color-cta-bg: #E4570F;
  --color-cta-hover: #FB923C;
  --color-accent-orange: #F97316;
  --color-accent-orange-2: #EA580C;
  --color-lime: #A3E635;
  --color-lime-glow: #BEF264;
  --color-placeholder: #B09A88;
  --color-body-2: #6B5443;
  --color-body-3: #4A3527;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --radius-menu: 6px;
  --font-body: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-poppins: 'Poppins', Helvetica, Arial, sans-serif;
}

/* Russian pages move into the RU wing of Hotel WOFF2 (see fonts.css):
   neither default font has basic Cyrillic, so the whole page switches, and
   Latin words like "Cintra" or "GDPR" match the Cyrillic around them.
   Keyed off <html lang="ru">, set in the ru/ pages' own HTML so it applies
   before any JS runs. */
:root:lang(ru) {
  --font-body: 'Manrope', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
}

/* border-box everything: a width now means what it says, which is more
   than most of us can claim. */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 170px;
  overflow-anchor: none;
}
@media (max-width: 760px) {
  html { scroll-padding-top: 140px; }
}

/* Keyboard users can hop over the header straight to the page. It hides
   above the viewport until it gets focus, then drops in over everything. */
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--color-link); color: #FFFFFF;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* prefers-reduced-motion: no smooth glides, no looping glitches, no
   transitions. scroll-fx.js and rewind.js read the same query and drop the
   parallax and the tape effect. */
@media (prefers-reduced-motion: reduce) {
  html, .cintra__shots { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-anchor: none;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--color-placeholder); }
img { max-width: 100%; }

/* Spam trap: never shown to humans, present for scrapers */
/* Parked 9999px off-screen. Bots, help yourselves. The buffet is free. */
.spam-trap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.page {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(14px, 4vw, 20px);
  box-sizing: border-box;
  /* The bouncer for anything that tries to widen the page. Looking at you,
     full-bleed sections. */
  overflow-x: clip;
}

#contact, #pricing, #services, #works, #about {
  scroll-margin-top: clamp(60px, 9vh, 120px);
}

.divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: #F3E2D0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-link);
}
.eyebrow--light { color: #6EE7B7; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow--sky { color: #7DD3FC; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; }

.section-head { display: flex; flex-direction: column; gap: 12px; }
.section-title {
  margin: 0;
  font-size: clamp(26px, 4.6vw, 46px);
  letter-spacing: -0.035em;
  color: var(--color-legal-heading);
}

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn--cta {
  padding: 10px clamp(12px, 3vw, 19px);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  background-color: var(--color-cta-bg);
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  /* The orange glow underneath: not radioactive, just enthusiastic. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 26px -12px rgba(234,88,12,0.8);
  transition: background-color .5s cubic-bezier(.22,.61,.36,1);
}
.btn--cta:hover { background-color: var(--color-cta-hover); color: #FFFFFF; }
.btn--mint {
  padding: 15px 28px;
  border: 1px solid #6EE7B7;
  background-color: #6EE7B7;
  color: #04120D;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  transition: background-color .5s cubic-bezier(.22,.61,.36,1), border-color .5s ease;
}
.btn--mint:hover { background-color: #A7F3D0; border-color: #A7F3D0; color: #04120D; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px clamp(10px, 2.4vw, 28px);
  padding: 2px clamp(16px, 4vw, 56px);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255,237,213,0.14);
  background: linear-gradient(180deg, rgba(16,9,4,0.62), rgba(16,9,4,0.28));
  /* Frosted glass. The -webkit- twin is for Safari, which likes to be
     asked separately. */
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-light {
  border-bottom-color: rgba(255,237,213,0.16);
  background: linear-gradient(180deg, rgba(43,28,18,0.86), rgba(43,28,18,0.78));
  box-shadow: 0 20px 44px -34px rgba(70,38,16,0.8);
}

.site-header__logo-link { display: inline-flex; align-items: center; min-width: 0; }
.site-header__logo {
  display: block;
  /* Same size scroll-fx.js gives the unscrolled logo, so the first paint
     and the script agree and nothing grows into place on load. */
  height: clamp(62px, 7vw, 96px);
  max-width: 56vw;
  width: auto;
  margin-top: 8px;
  /* No CSS transition on the size: scroll-fx.js already eases it every
     frame, and easing an easing only makes it late. */
}
@media (max-width: 759px) { .site-header__logo { height: 61px; } }
.site-header.is-shrunk .site-header__logo { height: 48px; margin-top: 2px; }
/* Set by scroll-fx.js for its first frame: the header simply is where it
   should be. Entrances are for the scroll, not the page load. */
.site-header.is-settling,
.site-header.is-settling * { transition: none !important; }

.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(190,242,100,0.4);
  background: rgba(63,107,36,0.32);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: #ECFCCB;
  transition: color .35s ease, background .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.header-pill:hover { color: #FFFFFF; border-color: var(--color-lime); }
.header-pill strong { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.header-pill__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  box-shadow: 0 0 9px var(--color-lime-glow);
  animation: mPulse 2.4s ease-in-out infinite;
}
/* Below 1320px the "taking new projects" pill takes a break. It'll be back. */
@media (max-width: 1320px) {
  .site-header > .header-pill { display: none !important; }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px clamp(10px, 2vw, 26px);
  margin-left: auto;
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 1;
  font-size: clamp(11.5px, 1.2vw, 15px);
}
.site-nav__link {
  color: rgba(255,240,224,0.88);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color .35s ease;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--color-link-hover); }
.site-nav__cta { white-space: nowrap; }
@media (max-width: 560px) {
  .site-nav__cta { padding: 9px 12px !important; font-size: 12px !important; }
}

/* Language dropdown */
.lang-switch { position: relative; display: flex; align-items: center; flex: none; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 13px;
  border: 1px solid rgba(190,242,100,0.4);
  border-radius: var(--radius-pill);
  background-color: rgba(63,107,36,0.32);
  color: rgba(255,240,224,0.88);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.lang-switch__caret {
  display: block;
  width: 8px; height: 5px;
  background-color: currentColor;
  /* An 8x5px triangle cut out with clip-path. An icon file for this would
     have been overkill. */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotate(0deg);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  min-width: 148px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-menu);
  background: linear-gradient(180deg, rgba(10,7,4,0.97), rgba(6,4,2,0.98));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 26px 46px -24px rgba(0,0,0,0.9);
}
.lang-switch.is-open .lang-switch__menu { display: flex; }
.lang-switch__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: none;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease;
}
.lang-switch__option:hover { background-color: rgba(255,255,255,0.1); }
.lang-switch__option[aria-current="true"] { background-color: var(--color-cta-bg); color: #FFFFFF; }
.lang-switch__code { font-size: 11px; letter-spacing: 0.1em; opacity: 0.68; }
@media (min-width: 961px) {
  .mobile-menu-wrap { display: none !important; }
}
@media (max-width: 960px) {
  .site-header { overflow: visible !important; }
  .site-nav__link { display: none !important; }
  .site-nav .lang-switch { display: none !important; }
  .burger { display: inline-flex !important; }
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: none;
  background-color: rgba(0,0,0,0);
  cursor: pointer;
  flex: none;
}
/* Three 2px lines: the world's most minimal hamburger. Hold the pickles. */
.burger__bars { display: flex; flex-direction: column; gap: 6px; width: 24px; }
.burger__bars span { display: block; height: 2px; border-radius: 2px; background: rgba(255,240,224,0.88); }

.mobile-menu-wrap {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 29;
  overflow: hidden;
  padding-bottom: 34px;
  pointer-events: none;
}
.mobile-menu {
  display: flex;
  pointer-events: none;
  /* -101%, not -100%, so not even a hairline peeks out. That extra 1% is
     load-bearing. */
  transform: translate3d(0,-101%,0);
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  flex-direction: column;
  gap: 2px;
  padding: 12px clamp(12px, 4vw, 32px) 18px clamp(12px, 4vw, 32px);
  background: linear-gradient(180deg, rgba(6,4,2,0.93), rgba(6,4,2,0.97));
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 40px -14px rgba(0,0,0,0.75), 0 8px 18px -8px rgba(0,0,0,0.6);
}
.mobile-menu.is-open { pointer-events: auto; transform: translate3d(0,0,0); }
.mobile-menu__cta {
  margin-bottom: 10px;
  padding: 15px 20px;
  border-radius: var(--radius-sm);
  background-color: var(--color-cta-bg);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.mobile-menu__link {
  padding: 14px 4px;
  text-align: center;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu__link--last { border-bottom: none; }
.mobile-menu__lang { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.mobile-menu__lang-btn {
  flex: 1 1 0;
  padding: 12px 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  background-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mobile-menu__lang-btn[aria-pressed="true"] { background-color: var(--color-cta-bg); color: #FFFFFF; }

/* The header pill's heartbeat: still alive, still taking projects. */
@keyframes mPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   Main / Hero
   ========================================================================== */
main#top {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 120px);
  padding: 0;
}

.hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Full-bleed maths: 100vw minus the scrollbar, re-centred with negative
   margins. Geometry teachers, look away. */
.hero-band {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  height: 100svh;
  min-height: 480px;
  max-height: 1100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 132px clamp(18px, 6vw, 96px) clamp(64px, 12vh, 120px) clamp(18px, 6vw, 96px);
  box-sizing: border-box;
  overflow: hidden;
  background: #140A04;
}
.hero-band__media {
  position: absolute;
  inset: -3%;
  filter: blur(0px) brightness(1);
  transform: scale(1.04);
  will-change: filter;
}
.hero-band__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-stack {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 6vh, 64px);
  align-items: flex-start;
  text-align: left;
}
@media (max-width: 760px) {
  .hero-stack { gap: 22px !important; }
  .hero-stack .hero-cta { padding: 17px 24px !important; font-size: 14.5px !important; }
}
/* 320px phones: a size smaller and a little less tracking, so even the RU
   label stays on one line (it may still wrap as a last resort). */
@media (max-width: 359px) {
  .hero-stack .hero-cta { padding: 16px 18px !important; font-size: 13px !important; letter-spacing: 0.06em; }
}
.hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(34px, 8.4vw, 104px);
  line-height: 1.04;
  letter-spacing: -0.042em;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9);
  text-wrap: pretty;
}
.hero-title__line { display: block; height: 1.04em; overflow: visible; }
/* Russian's first two lines are each ~9.3em wide, and the lines have a fixed
   height, so a wrap draws one line on top of the other. Below ~400px the RU
   headline shrinks just enough to stay on one line apiece; everywhere else
   min() leaves the normal size alone. */
:lang(ru) .hero-title { font-size: min(clamp(34px, 8.4vw, 104px), calc((100vw - 56px) / 9.6)); }
/* The fancy italic word. 1.32em, because it does the heavy lifting in the
   headline. */
.hero-title__accent {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.32em;
  line-height: 1.04;
  display: inline-block;
  padding: 0 0.04em;
  vertical-align: baseline;
  color: #FFC65C;
  text-shadow: 0 3px 24px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95);
}
.hero-cta {
  margin-top: 20px;
  padding: 17px clamp(22px, 5vw, 34px);
  font-size: 15.5px;
  letter-spacing: 0.08em;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,0.7);
  /* Unlike the header's .btn--cta, this one may take two lines: on a 320px
     phone the RU label is wider than the screen. */
  white-space: normal;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
}

/* ==========================================================================
   Services
   ========================================================================== */
.services { display: flex; flex-direction: column; gap: 34px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--card-border, #F3E2D0);
  border-radius: var(--radius-sm);
  background: var(--card-bg, #FFFFFF);
  box-shadow: 0 30px 56px -46px rgba(120,72,40,0.6);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .5s ease, background-color .35s ease, color .35s ease;
}
/* Lifts 4px on hover: enough to feel special, not enough to need a ladder. */
.service-card:hover { border-color: var(--card-btn, #FBBF24); transform: translateY(-4px); }
.service-card__num {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--card-num-bg, linear-gradient(145deg, #FFEDD5, #FEF3C7));
  border: 1px solid var(--card-border, #FBDCC2);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: var(--card-accent, var(--color-link));
}
.service-card__title { margin: 0; font-size: 20px; letter-spacing: -0.025em; color: var(--color-legal-heading); line-height: 1.3; }
.service-card__plain { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-body-2); }
.service-card__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--color-body-3);
}
.service-card__list li { display: flex; gap: 10px; }
.service-card__check { color: var(--card-check, var(--color-accent-orange)); flex: none; }

/* Each card wears its own colour; everything inside reads these. The
   orange button is the owner's bright orange (white text ~3.2:1, like the
   header CTA, see AUDIT.md S10); the others keep 4.5:1 or better. */
.service-card--mint {
  --card-bg: #F0FDF7; --card-border: #BDEFD8; --card-accent: #047857; --card-check: #059669;
  --card-num-bg: linear-gradient(145deg, #D1FAE5, #ECFDF5);
  --card-btn: #6EE7B7; --card-btn-hover: #A7F3D0; --card-btn-ink: #04120D;
}
.service-card--orange {
  --card-bg: #FFF1E3; --card-border: #FDC99B; --card-accent: #EA580C; --card-check: #F97316;
  --card-num-bg: linear-gradient(145deg, #FFDDB8, #FFEDD5);
  --card-btn: #F06A12; --card-btn-hover: #EA580C; --card-btn-ink: #FFFFFF;
}
.service-card--violet {
  --card-bg: #F6F3FF; --card-border: #DDD6FE; --card-accent: #6D28D9; --card-check: #7C3AED;
  --card-num-bg: linear-gradient(145deg, #EDE9FE, #F5F3FF);
  --card-btn: #6D28D9; --card-btn-hover: #5B21B6; --card-btn-ink: #FFFFFF;
}
.service-card--red {
  --card-bg: #FFF1F2; --card-border: #FBCFD6; --card-accent: #BE123C; --card-check: #E11D48;
  --card-num-bg: linear-gradient(145deg, #FFE4E6, #FFF1F2);
  --card-btn: #BE123C; --card-btn-hover: #9F1239; --card-btn-ink: #FFFFFF;
}
/* margin-top: auto parks the button on the card's floor, so in a row of
   equal-height cards the buttons line up however long each list is. */
.service-card__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 18px;
  background-color: var(--card-btn, var(--color-cta-bg));
  color: var(--card-btn-ink, #FFFFFF);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  transition: background-color .35s ease;
}
.service-card__cta:hover { background-color: var(--card-btn-hover, var(--color-cta-hover)); color: var(--card-btn-ink, #FFFFFF); }

/* ==========================================================================
   Micro band ("Small budgets welcome")
   ========================================================================== */
.micro {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  padding: clamp(66px, 9vw, 120px) clamp(20px, 6vw, 96px);
  box-sizing: border-box;
  overflow: hidden;
  background: #04120D;
  display: flex;
  justify-content: center;
}
.micro__bg {
  position: absolute;
  top: 0; bottom: 0; left: -6%;
  width: 142%;
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0);
  will-change: transform;
  pointer-events: none;
}
.micro__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,14,10,0.84) 0%, rgba(3,14,10,0.74) 45%, rgba(3,14,10,0.88) 100%);
}
.micro__hairline {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110,231,183,0.55), transparent);
}
.micro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.micro__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transform: translate3d(0,26px,0);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.micro__copy.is-seen { opacity: 1; transform: translate3d(0,0,0); }
.micro__title { margin: 0; display: block; }
.micro__title-img { display: block; width: 100%; max-width: min(440px, 78vw); height: auto; aspect-ratio: 1000 / 772; }
.micro__text { margin: 0; max-width: 42ch; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.7; color: #FFFFFF; text-wrap: pretty; }
.micro__copy .btn--mint { align-self: flex-start; margin-top: 8px; }

/* The list items slide in from 110px to the right. scroll-fx.js drives the
   show; CSS just holds its coat. */
.micro__list { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.micro-item {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(14px, 1.9vw, 22px) clamp(6px, 1vw, 12px);
  border-top: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
  transform: translate3d(110px,0,0);
  transition: opacity .14s linear, transform .14s linear;
  will-change: transform, opacity;
}
.micro-item__n {
  flex: none; min-width: 1.4em;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6EE7B7;
}
.micro-item__label {
  min-width: 0;
  font-size: clamp(16px, 1.9vw, 25px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 46px;
  padding: 0;
}
/* On desktop the form jumps the queue (order: -1) to sit on the left. Rude,
   but effective. */
@media (min-width: 761px) {
  .contact-form { order: -1; }
}
.contact__intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact__lede { margin: 16px 0 0 0; font-size: 16.5px; line-height: 1.65; color: var(--color-body-2); max-width: 44ch; text-wrap: pretty; }
.contact__meta { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; font-size: 15px; color: var(--color-body-3); }
.contact__meta-strong { font-weight: 700; }
.contact__action-title { display: block; width: min(100%, 400px); height: auto; aspect-ratio: 987.2 / 711.3; margin-top: 20px; }
@media (max-width: 760px) {
  .contact__action-title { width: min(80%, 320px) !important; margin-left: auto !important; margin-right: auto !important; }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #F3E2D0;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  box-shadow: 0 50px 90px -64px rgba(120,72,40,0.65);
}
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body-3);
}
.field__input {
  box-shadow: none;
  padding: 13px 15px;
  border: 1px solid #EFDFCC;
  border-radius: var(--radius-sm);
  background: #FFFCF8;
  color: var(--color-legal-heading);
  font-size: 15px;
  font-weight: 400;
  outline: none;
  min-width: 0;
  transition: border-color .3s ease, background-color .3s ease;
}
.field__input:focus { border-color: var(--color-accent-orange); background: #FFFFFF; }
/* The orange border alone is only 2.8:1; keyboard users get a proper ring. */
.field__input:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.field__input--textarea { line-height: 1.6; resize: vertical; }
/* A red ring for fields that need some love. contact-form.js also sets
   aria-invalid, so screen readers get the hint too. */
.field__input.is-invalid { box-shadow: 0 0 0 2px #DC2626 inset; }

.contact-form__submit { padding: 16px 24px; border: none; font-size: 16px; box-shadow: none; }
/* Sent: the same button, now green and labelled "click for a new message".
   The longer label may wrap on narrow screens, so nowrap is lifted. */
.contact-form__submit.is-sent { background-color: #16A34A; white-space: normal; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 26px -12px rgba(22,163,74,0.8); }
.contact-form__submit.is-sent:hover { background-color: #15803D; }
.contact-form__note { margin: 0; font-size: 13px; line-height: 1.6; color: #80695A; } /* 5.1:1 on white */
.contact-form__note.is-error { color: #DC2626; }
/* Honeypot: parked off-screen rather than display:none, because the better
   bots skip fields they can see are hidden. People never meet it. */
.contact-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Statement band (sky)
   ========================================================================== */
.statement {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  padding: clamp(80px, 11vw, 150px) clamp(20px, 6vw, 96px);
  box-sizing: border-box;
  overflow: hidden;
  background: #0A0A0C;
  display: flex;
  justify-content: center;
}
.statement__bg {
  position: absolute;
  /* 164% tall, so the parallax never runs out of sky. */
  top: -32%; left: 0; right: 0; height: 164%;
  background-size: cover;
  background-position: center;
  transform: translate3d(0,-150px,0);
  will-change: transform;
  pointer-events: none;
}
.statement__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,4,8,0.82) 0%, rgba(4,4,8,0.7) 45%, rgba(4,4,8,0.84) 100%);
}
.statement__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: center;
  width: min(100%, 1240px);
}
.statement__line {
  margin: 0;
  font-size: clamp(24px, 4.4vw, 58px);
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  max-width: 100%;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
  text-wrap: pretty;
}
.statement__sub {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.65vw, 21px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: #FDBA74;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
  text-wrap: pretty;
}

/* ==========================================================================
   Works
   ========================================================================== */
.works { display: flex; flex-direction: column; gap: 34px; }
.works__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 680px) {
  .works__grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.work-card {
  display: block;
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #23252B, #14161A);
  box-shadow: 0 46px 80px -56px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #FFFFFF;
  transition: box-shadow .5s ease;
}
.work-card:hover { box-shadow: 0 54px 90px -50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(110,231,183,0.35); color: #FFFFFF; }
.work-card__shot {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1200;
  border-radius: 2px;
  overflow: hidden;
  background: #05070A;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 60px rgba(0,0,0,0.8);
}
.work-card__img { display: block; width: 100%; height: 100%; object-fit: fill; }
/* For a shot that isn't 16:10: letterbox it instead of stretching. Pixel art holds grudges. */
.work-card__img--contain { object-fit: contain; }
.work-card__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,10,0) 0%, rgba(4,6,10,0.3) 28%, rgba(4,6,10,0.88) 56%, rgba(4,6,10,0.97) 100%);
}
.work-card__caption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 7px;
  padding: clamp(16px, 2vw, 26px);
}
.work-card__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FDBA74; }
.work-card__title { margin: 0; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.03em; color: #FFFFFF; text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.work-card__desc { margin: 0; max-width: 44ch; font-size: clamp(13.5px, 1.25vw, 15.5px); line-height: 1.55; color: rgba(255,255,255,0.86); text-shadow: 0 1px 10px rgba(0,0,0,0.85); text-wrap: pretty; }
.work-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px 3px 4px; }
.work-card__bar { width: 44px; height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.14); }
.work-card__status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.work-card__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: #6EE7B7; box-shadow: 0 0 8px #6EE7B7; }
.work-card__shot--placeholder { display: flex; align-items: center; justify-content: center; }
.work-card__placeholder-label {
  position: relative; z-index: 1;
  max-width: 70%;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.35);
  padding: 16px;
}
/* After the base rules on purpose, or they win. Up to 1100px a shot is too
   short to share with a caption laid over it (in the two-column layout the
   caption is taller than the shot): the card grows instead, the screenshot
   shows whole at its own ratio and the caption moves underneath it. */
@media (max-width: 1100px) {
  .work-card__shot { aspect-ratio: auto; }
  .work-card__img { height: auto; }
  /* The 16:9 Smashoid shot gets the same 16:10 frame (its black background
     hides the bars), so side-by-side captions start at the same height. */
  .work-card__img--contain { aspect-ratio: 1920 / 1200; }
  .work-card__shade { display: none; }
  .work-card__caption { position: static; padding: 16px 16px 18px; }
}
/* Phones: a slimmer caption on top of that. */
@media (max-width: 680px) {
  .work-card__caption { gap: 4px; padding: 14px 14px 16px; }
  .work-card__kicker { font-size: 10px; letter-spacing: 0.12em; }
  .work-card__title { font-size: 17px; }
  .work-card__desc { font-size: 12px; line-height: 1.45; }
}

/* ==========================================================================
   Cintra
   ========================================================================== */
.cintra {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  background: #05070C;
}
.cintra__pane {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.4vw, 38px);
  padding: clamp(64px, 9vw, 110px) clamp(16px, 4vw, 48px) clamp(58px, 8vw, 96px) clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .cintra { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
  .cintra__pane { height: auto !important; min-height: 0 !important; overflow: visible !important; padding-bottom: 28px !important; }
}
.cintra__bg {
  position: absolute; inset: -6%; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(0px) saturate(1) brightness(1);
  transform: scale(1.08);
  will-change: filter;
  backface-visibility: hidden;
}
.cintra__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,12,0.78) 0%, rgba(5,7,12,0.6) 45%, rgba(5,7,12,0.86) 100%);
}
.cintra__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cintra__title { margin: 0; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 700; color: #FFFFFF; text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
@media (max-width: 560px) { #cintra .cintra__title { font-size: 20px !important; } }
.cintra__desc { margin: 22px 0 0 0; max-width: 64ch; font-size: clamp(14.5px, 1.3vw, 17px); line-height: 1.65; color: rgba(255,255,255,0.86); text-shadow: 0 1px 12px rgba(0,0,0,0.7); text-wrap: pretty; }
/* Small print: the demo data is made up, so nobody goes looking for Lumi Coffee Roasters. */
.cintra__note { margin: 4px 0 0 0; max-width: 72ch; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.62); text-shadow: 0 1px 10px rgba(0,0,0,0.7); text-wrap: pretty; }

.cintra__carousel {
  position: relative;
  z-index: 2;
  align-self: stretch;
  margin-left: calc(-1 * clamp(16px, 4vw, 48px));
  margin-right: calc(-1 * clamp(16px, 4vw, 48px));
}
.cintra__shots {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 calc(50vw - min(590px, 41vw)) 2px calc(50vw - min(590px, 41vw));
}
/* Two ways to hide one scrollbar: the standard way (above) and the WebKit
   way (below). Browsers, eh. */
.cintra__shots::-webkit-scrollbar { display: none; }
/* Neighbouring shots are blurred and dimmed so the active one gets all the
   attention. Middle-child energy. */
.cintra__shot {
  flex: 0 0 min(1180px, 82vw);
  min-width: 0;
  scroll-snap-align: center;
  filter: blur(5px) brightness(0.4) saturate(0.75);
  opacity: 1;
  transform: scale(0.93);
  transition: filter .55s ease, opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: filter, transform;
}
.cintra__shot.is-active { filter: blur(0px) brightness(1); transform: scale(1); }
.cintra__shot-img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1080; background-color: #05070C; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.95); }
@media (max-width: 760px) {
  .cintra__shot-img { height: auto !important; width: 100% !important; object-fit: contain !important; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.9) !important; }
  .cintra .btn--cta { position: static !important; transform: none !important; align-self: center; }
  [data-card] { opacity: 0 !important; transform: translate3d(0, 34px, 0) scale(0.98) !important; transition: opacity .55s ease, transform .75s cubic-bezier(.22,.61,.36,1) !important; }
  [data-card][data-inview] { opacity: 1 !important; transform: none !important; }
}

.cintra__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  background-color: #0A0704;
  color: #FDBA74;
  cursor: pointer;
  box-shadow: 0 18px 34px -16px rgba(0,0,0,0.8);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.cintra__nav-btn:hover { background-color: var(--color-cta-bg); color: #FFFFFF; border-color: var(--color-cta-bg); }
.cintra__nav-btn--prev { left: clamp(10px, 2.4vw, 34px); }
.cintra__nav-btn--next { right: clamp(10px, 2.4vw, 34px); }

.cintra__dots { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; }
.cintra__dot {
  width: 6px; height: 6px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background-color: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: width .4s cubic-bezier(.22,.61,.36,1), background-color .4s ease;
}
.cintra__dot.is-active { width: 30px; background-color: #7DD3FC; }

.cintra__cta-wrap { position: relative; z-index: 3; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { display: flex; flex-direction: column; gap: 32px; }
.pricing__lede { margin: 20px 0 0 0; font-size: 17px; line-height: 1.6; color: var(--color-body-2); max-width: 62ch; text-wrap: pretty; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 22px;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.pricing-card {
  padding: 28px;
  border: 1px solid #F3E2D0;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  min-width: 0;
  box-shadow: 0 30px 56px -48px rgba(120,72,40,0.6);
}
/* The "ALWAYS" card wears a warmer gradient. It knows it's the best deal. */
.pricing-card--highlight {
  border-color: #FBDCC2;
  background: linear-gradient(180deg, #FFF7ED, #FFF1E4);
}
.pricing-card__tag { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-link); }
.pricing-card__title { margin: 14px 0 10px 0; font-size: 19px; letter-spacing: -0.02em; color: var(--color-legal-heading); }
.pricing-card__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-body-2); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: flex; flex-direction: column; gap: 32px; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 46px;
  align-items: start;
}
.about__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.about__p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-body-2); max-width: 62ch; text-wrap: pretty; }
.about__p--last { font-size: 16.5px; line-height: 1.7; max-width: 55ch; }
.about__cta { align-self: flex-start; }
.about__h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-legal-heading); }
.about__rows { display: flex; flex-direction: column; gap: 20px; }
.about__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  margin-left: 50px;
  padding-left: 14px;
  border-left: 2px solid #F3E2D0;
}
.about__row-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
.about__row-text { font-size: 15.5px; line-height: 1.6; color: var(--color-body-2); text-wrap: pretty; }
/* The RU "software" label needs ~119px: three pixels more than the column
   has. So close, yet so wrapped. The RU page gets a slightly wider label
   column; phones stack label over text anyway (see the 760px block below).
   The ET "Tarkvaraarendus" is one 147px word with nowhere to break, so ET
   gets an even wider one. Estonian: compound nouns by the metre.
   Between 761 and 1023px the photo column leaves the text too little room
   beside any label column, so there the label sits on top, as on phones. */
@media (min-width: 761px) and (max-width: 1023px) {
  .about__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (min-width: 1024px) {
  :lang(ru) .about__row { grid-template-columns: 130px minmax(0, 1fr); }
  :lang(et) .about__row { grid-template-columns: 150px minmax(0, 1fr); }
}

.about__photo-wrap {
  min-width: 0;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  justify-self: start;
  position: relative;
  border: 1px solid #F0E0CF;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  padding: 12px;
  box-shadow: 0 50px 90px -64px rgba(120,72,40,0.65);
}
.about__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #FFF7ED, #FFF1E4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mobile: display: contents dissolves .about__copy so its children can be
   shuffled around the photo with order. Flexbox Tetris. */
@media (max-width: 760px) {
  .about__row { margin-left: 0 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .about__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 26px !important; }
  .about__grid > .about__copy { display: contents !important; }
  .about__grid > .about__copy > .about__p:first-child { order: 1; }
  .about__grid > .about__copy > .about__p--last { order: 4; }
  .about__grid > .about__copy > .about__cta { order: 5; justify-self: start; }
  .about__grid > .about__photo-wrap { order: 2; }
  .about__grid > .about__copy > .about__h3,
  .about__grid > .about__copy > .about__rows { order: 3; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-spacer { height: clamp(48px, 7vw, 96px); }

.site-footer {
  position: relative;
  align-self: stretch;
  width: auto;
  margin-left: calc(-1 * clamp(14px, 4vw, 20px));
  margin-right: calc(-1 * clamp(14px, 4vw, 20px));
  background: #0A0704;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.72);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 34px clamp(24px, 4vw, 56px);
  padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 56px) clamp(34px, 4vw, 48px) clamp(16px, 4vw, 56px);
}
@media (min-width: 761px) {
  .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 28px clamp(16px, 2.2vw, 40px) !important; }
}
@media (max-width: 760px) {
  .footer-cols > .footer-col { padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12); }
  /* The brand column goes last on mobile. Humble. */
  .footer-cols > .footer-col--brand { order: 9; }
  .footer-cols > .footer-col:nth-child(2) { padding-top: 0; border-top: none; }
}
.footer-col { min-width: 0; }
.footer-col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-logo { display: block; flex: none; height: 48px; width: auto; aspect-ratio: 1200 / 655; }
.footer-copyright { font-size: 12.5px; line-height: 2; color: rgba(255,255,255,0.55); white-space: nowrap; }
.footer-social { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.footer-lang-links { gap: 2px; padding-top: 8px; }
/* Hero photo credit. Pixabay's licence doesn't require it; good manners do. */
.footer-credit { margin: 0; padding-top: 10px; font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.footer-credit__link { color: rgba(255,255,255,0.55); transition: color .3s ease; }
.footer-credit__link:hover { color: var(--color-cta-hover); }
.footer-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.72);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.footer-social__link:hover { color: #0A0704; background-color: var(--color-cta-hover); border-color: var(--color-cta-hover); }

.footer-col__heading { margin: 0 0 12px 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FDBA74; }
/* RU words like "СОТРУДНИЧЕСТВО" and "конфиденциальности" are wider than a
   five-column footer's 125px on small tablets: let them hyphenate. */
:lang(ru) .footer-col { hyphens: auto; overflow-wrap: break-word; }
.footer-col__lines { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.footer-col__line--strong { color: #FFFFFF; font-weight: 600; }
.footer-col__links { display: flex; flex-direction: column; }
.footer-col__link { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 2; transition: color .3s ease; }
.footer-col__link:hover { color: var(--color-cta-hover); }
.footer-col__link--legal { color: rgba(255,255,255,0.55); font-size: 12.5px; }
.footer-col__link--legal:hover { color: var(--color-cta-hover); }

/* ==========================================================================
   Rewind button + CRT glitch overlay
   Scanlines, Betacam stripes, a rolling bar and an RGB flicker: four
   layers of authentic 1990s hardware failure, lovingly recreated.
   ========================================================================== */
.crt-overlay {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.crt-overlay.is-on { opacity: 1; }
.crt-overlay__scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 1px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px);
}
.crt-overlay__beta {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(196,201,205,0.30) 0px, rgba(196,201,205,0.30) 11px, rgba(120,126,132,0.16) 11px, rgba(120,126,132,0.16) 26px, rgba(238,241,244,0.22) 26px, rgba(238,241,244,0.22) 33px, rgba(0,0,0,0) 33px, rgba(0,0,0,0) 62px);
  mix-blend-mode: screen;
  animation: betaDrift 0.45s linear infinite;
}
.crt-overlay__roll {
  position: absolute; left: 0; right: 0; height: 18%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(190,240,255,0.2) 45%, rgba(255,255,255,0) 100%);
  animation: crtRoll .85s linear infinite;
}
.crt-overlay__flicker {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,0,80,0.1), rgba(0,255,190,0.08) 50%, rgba(80,120,255,0.1));
  mix-blend-mode: screen;
  animation: crtFlicker .45s steps(3) infinite;
}

.rewind-glyph {
  position: fixed;
  top: clamp(58px, 8vh, 96px);
  right: clamp(14px, 3vw, 40px);
  z-index: 71;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0; border: none; background: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.rewind-glyph.is-on { opacity: 1; }
.rewind-glyph__inner {
  display: inline-flex;
  animation: none;
  filter: drop-shadow(0 0 10px rgba(190,240,255,0.65));
}
.rewind-glyph.is-on .rewind-glyph__inner { animation: rewBlink 1s steps(2) infinite; }

.rewind-btn {
  position: fixed;
  right: clamp(10px, 2.4vw, 34px);
  bottom: clamp(10px, 2.4vw, 34px);
  z-index: 55;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  background-color: #0A0704;
  color: #FDBA74;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0,16px,0);
  pointer-events: none;
  box-shadow: 0 18px 34px -16px rgba(0,0,0,0.8);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), background-color .35s ease, color .35s ease;
}
.rewind-btn.is-visible { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
.rewind-btn:hover { background-color: var(--color-cta-bg); color: #FFFFFF; }

@keyframes rewBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes crtRoll { 0% { transform: translateY(-30%); } 100% { transform: translateY(130%); } }
@keyframes betaDrift { 0% { background-position: 0 0; } 100% { background-position: 0 -220px; } }
@keyframes crtFlicker { 0%,100% { opacity: .18; } 12% { opacity: .55; } 26% { opacity: .08; } 48% { opacity: .42; } 63% { opacity: .12; } 81% { opacity: .5; } }
/* crtJitter isn't used anywhere right now. It's on standby, in case the
   page ever needs to panic. */
@keyframes crtJitter { 0%,100% { transform: translate3d(0,0,0); } 15% { transform: translate3d(-6px,1px,0); } 30% { transform: translate3d(5px,-2px,0); } 45% { transform: translate3d(-3px,0,0); } 60% { transform: translate3d(4px,2px,0); } 80% { transform: translate3d(-2px,-1px,0); } }

/* ==========================================================================
   Cookie consent banner
   Small, bottom-right, asks once, then leaves you alone. The ideal guest.
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; justify-content: flex-end;
  padding: clamp(10px, 1.4vw, 16px);
  box-sizing: border-box;
  pointer-events: none;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__card {
  pointer-events: auto;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  background: rgba(6,18,13,0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
}
.cookie-banner__copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cookie-banner__title { font-size: 12.5px; font-weight: 700; color: #FFFFFF; }
.cookie-banner__text { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.72); text-wrap: pretty; }
.cookie-banner__link { color: #6EE7B7; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 7px; }
.cookie-banner__btn {
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s ease;
}
.cookie-banner__btn--ghost {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background-color: rgba(255,255,255,0);
  color: #FFFFFF;
}
.cookie-banner__btn--ghost:hover { background-color: rgba(255,255,255,0.1); }
.cookie-banner__btn--solid {
  padding: 8px 13px;
  border: none;
  background-color: #6EE7B7;
  color: #04120D;
}
.cookie-banner__btn--solid:hover { background-color: #A7F3D0; }

/* ==========================================================================
   Legal pages (Privacy policy / Terms of service)
   ========================================================================== */
body.legal-page, body.legal-page .page { background: #FFFCF8; }

.legal-main {
  align-self: stretch;
  width: auto;
  margin-left: calc(-1 * clamp(14px, 4vw, 20px));
  margin-right: calc(-1 * clamp(14px, 4vw, 20px));
}
.legal-main__inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(130px, 18vw, 200px) clamp(18px, 6vw, 40px) clamp(60px, 9vw, 110px) clamp(18px, 6vw, 40px);
  box-sizing: border-box;
}
.legal-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-link); }
.legal-title { margin: 12px 0 0 0; font-size: clamp(32px, 6vw, 56px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 700; color: var(--color-legal-heading); hyphens: auto; overflow-wrap: break-word; }
.legal-lede { margin: 18px 0 0 0; font-size: 16px; line-height: 1.7; color: var(--color-body-2); }

.legal-note { margin: 34px 0 0 0; padding: 20px 22px; border: 1px solid #F3E2D0; border-radius: var(--radius-sm); background: #FFF7ED; }
.legal-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--color-body-2); }
.legal-note strong { color: var(--color-legal-heading); }

.legal-h2 { margin: 42px 0 0 0; font-size: clamp(21px, 3vw, 28px); letter-spacing: -0.03em; color: var(--color-legal-heading); scroll-margin-top: clamp(60px, 9vh, 120px); }
.legal-h2--first { margin-top: 46px; }
.legal-h3 { margin: 30px 0 0 0; font-size: 18px; letter-spacing: -0.02em; color: var(--color-legal-heading); }
.legal-p { margin: 12px 0 0 0; font-size: 16px; line-height: 1.75; color: var(--color-body-3); }
.legal-p a { font-weight: 600; }

.legal-cards { margin: 22px 0 0 0; display: flex; flex-direction: column; gap: 16px; }
.legal-card { padding: 18px 20px; border: 1px solid #F3E2D0; border-radius: var(--radius-sm); background: #FFFFFF; }
.legal-card strong { display: block; font-size: 16px; color: var(--color-legal-heading); }
.legal-card p { margin: 8px 0 0 0; font-size: 15px; line-height: 1.7; color: var(--color-body-2); }

.legal-table-wrap { margin: 16px 0 0 0; overflow-x: auto; border: 1px solid #F3E2D0; border-radius: var(--radius-sm); background: #FFFFFF; }
/* The table refuses to squish below 620px; on phones it scrolls sideways
   instead. Legal text doesn't bend, and neither does its table. */
.legal-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table th { padding: 12px 16px; border-bottom: 1px solid #EBD6BE; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A6F5B; text-align: left; }
.legal-table td { padding: 14px 16px; border-bottom: 1px solid #F3E2D0; font-size: 15px; line-height: 1.6; color: var(--color-body-3); vertical-align: top; }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td strong { color: var(--color-legal-heading); }
.legal-table__sub { display: block; font-size: 13px; color: #8A6F5B; }

.legal-dl { margin: 18px 0 0 0; border: 1px solid #F3E2D0; border-radius: var(--radius-sm); background: #FFFFFF; overflow: hidden; }
.legal-dl__row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 12px 18px; border-top: 1px solid #F3E2D0; }
.legal-dl__row:first-child { border-top: none; }
.legal-dl__row dt { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A6F5B; }
.legal-dl__row dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-legal-heading); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .legal-dl__row { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); gap: 10px; padding: 10px 14px; }
  .legal-dl__row dt { font-size: 10.5px; }
  .legal-dl__row dd { font-size: 13.5px; line-height: 1.5; }
}
/* Russian labels run long (the VAT number one alone needs ~201px), so the
   RU page gets a wider label column to keep every label on one line.
   Phones keep the compact 100px column above. Bureaucracy takes up space
   in every language. */
@media (min-width: 481px) {
  :lang(ru) .legal-dl__row { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
  /* EN's "Contracts & invoices" is 180px; one line, as promised above. */
  :lang(en) .legal-dl__row { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
}
/* ...and on phones "РЕГИСТРАЦИОННЫЙ" alone outgrows the 100px column, so
   RU stacks each label over its value instead. */
@media (max-width: 480px) {
  :lang(ru) .legal-dl__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.legal-list { margin: 12px 0 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-list li { font-size: 16px; line-height: 1.7; color: var(--color-body-3); }
.legal-list li strong { color: var(--color-legal-heading); }

.legal-closing { margin: 54px 0 0 0; padding: 26px; border: 1px solid #F3E2D0; border-radius: var(--radius-sm); background: #FFF7ED; display: flex; flex-direction: column; gap: 10px; }
.legal-closing strong { font-size: 17px; color: var(--color-legal-heading); }
.legal-closing p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--color-body-2); }