/* ============================================
   SoftExclusive — Premium IT Landing
   ============================================ */

:root {
  /* --- Neutral near-black base (warmth comes from the accent only) --- */
  --bg-0: #0A0A0A;
  --bg-1: #0F0F0F;
  --bg-2: #141414;
  --surface: rgba(255, 255, 255, 0.026);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-hairline: rgba(255, 255, 255, 0.06);
  --fg: #FFFFFF;
  --fg-dim: #A1A1AA;
  --fg-muted: #8B8B94;
  --fg-faint: #6B6B73;

  /* --- Warm peach accent ramp --- */
  --accent: #F9A474;
  --accent-soft: #F7B38E;
  --accent-bright: #FCD2B7;
  --accent-deep: #F39A67;
  --accent-2: #F7B38E;
  --accent-2-bright: #FCD2B7;

  /* text that sits on top of the peach gradient */
  --on-accent: #1A120D;

  --grad-primary: linear-gradient(135deg, #F9A474 0%, #F7B38E 55%, #FCD2B7 100%);
  --grad-soft: linear-gradient(135deg, rgba(249,164,116,0.14) 0%, rgba(252,210,183,0.10) 100%);
  --grad-text: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #A1A1AA 100%);
  /* logo gold — measured off logo-se.png, shared by the wordmark and the nav CTA */
  --grad-gold: linear-gradient(180deg,
    #F3E0BB 0%, #D3BA8E 11%, #C3A87C 33%, #B79C6F 57%, #AB9167 86%, #C6A97A 100%);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --font-display: 'Inter Tight', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* refined button lift: soft drop + inset top highlight, not a big glow */
  --shadow-btn:
    0 2px 10px rgba(0, 0, 0, 0.22),
    inset 0 6px 0 -5px rgba(252, 210, 183, 0.9),
    0 4px 10px -5px rgba(243, 154, 103, 0.6);
  --shadow-btn-hover:
    0 6px 18px rgba(0, 0, 0, 0.3),
    inset 0 6px 0 -5px rgba(255, 255, 255, 0.95),
    0 10px 24px -10px rgba(243, 154, 103, 0.85);
  --shadow-glow-accent: 0 0 24px rgba(249, 164, 116, 0.18);
  --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.7);

  --gap-grid: 20px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Phones paint their own translucent box over anything tappable — on Android
     it flashed light blue over the pill buttons on every tap. Switching it off
     leaves the press with no feedback at all (the site styles :hover only, and
     touch reports that unreliably), so pressed states follow below. */
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--fg);
  line-height: 1.55;
  font-size: 16px;
  /* the body is the scroller: pinned below the fixed nav, so its scrollbar
     begins under the header rule instead of running the full window height */
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* the scrollbar gutter clipped full-width rules (footer top line) 10px short
     of the window edge; hiding the bar removes the gutter entirely while
     wheel/keyboard/touch scrolling keeps working */
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================
   Page background — layered glow + grid
   ============================================ */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-0);
}
.bg-layer::before {
  /* subtle grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 26%, black 20%, transparent 72%);
}
.bg-layer::after {
  /* aurora glow */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(249, 164, 116, 0.10), transparent 60%),
    radial-gradient(700px 460px at 88% 8%, rgba(247, 179, 142, 0.05), transparent 62%);
}

/* ============================================
   Layout helpers
   ============================================ */
/* keyboard users jump straight to the content. Clipped rather than moved
   off-screen: body is the fixed scroller, so a negative top stayed visible */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
}
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
section {
  position: relative;
  /* adjacent sections stack their paddings: 64 + 64 = 128px between blocks,
     matching the hero -> about seam */
  padding: 64px 0;
}
@media (max-width: 768px) {
  section { padding: 50px 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(249, 164, 116, 0.08);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-bright);
  box-shadow: 0 0 12px var(--accent-bright);
}
/* only the hero badge pulses: it is a live availability status, same as the
   footer indicator. Section eyebrows are plain labels and stay still. */
.hero .eyebrow .dot {
  animation: pulse 1.5s ease-in-out infinite;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  /* line-height 1.05 is tighter than the font's own content area, so descenders
     (g, p, y) hang ~4px below the element box. background-clip: text paints the
     gradient only inside that box, so the tails came out cut off — most visible
     on the English page, where headings carry more descenders. The padding gives
     the background the missing room; the margin gives the same amount back so
     the vertical rhythm does not change. */
  padding-bottom: 0.08em;
  margin-bottom: calc(18px - 0.08em);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head p {
  color: var(--fg-dim);
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
  text-wrap: pretty;
}

.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* same descender room as .section-head h2 — inline padding costs no layout */
  padding-bottom: 0.08em;
}
.text-accent {
  background: linear-gradient(135deg, #FFDCBE, #F08A45);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* same descender room as .section-head h2 — inline padding costs no layout */
  padding-bottom: 0.08em;
}

/* ============================================
   Hero heading — extruded depth
   ============================================ */
/* An element paints its own background before any child, so the depth cannot
   sit behind a background-clipped fill. The span therefore IS the extruded
   body, and ::before paints the coloured face on top of it.
   Every step has 0 blur and a downward offset only — blur was what smeared
   grey above and beside the letters.
   The side wall starts light and fades to near-black: on a #0A0A0A page a
   dark extrusion is invisible, so the top of the wall has to catch light. */
.hero .hero-title {
  background: none;
  color: transparent;
}
.hero .hero-title .d3 {
  position: relative;
  display: inline-block;
}
.hero .hero-title .d3::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  text-shadow: none;
  pointer-events: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* "Soft" — neutral steel wall under a white -> zinc face.
   One flat colour for the whole wall: identical copies merge into a solid
   shape with a clean outline. Graded steps made the antialiased edges of
   round letters stagger, which read as blur. */
.hero .hero-title .d3:not(.accent) {
  color: #5E5E68;
  text-shadow:
    0 1px 0 #5E5E68,
    0 2px 0 #5E5E68,
    0 3px 0 #5E5E68,
    0 4px 0 #5E5E68,
    0 5px 0 #5E5E68,
    0 6px 0 #5E5E68,
    0 7px 0 #5E5E68;
}
.hero .hero-title .d3:not(.accent)::before {
  background-image: var(--grad-text);
}
/* "Exclusive" — warm copper wall under the peach face */
.hero .hero-title .accent.d3 {
  color: #8A5533;
  text-shadow:
    0 1px 0 #8A5533,
    0 2px 0 #8A5533,
    0 3px 0 #8A5533,
    0 4px 0 #8A5533,
    0 5px 0 #8A5533,
    0 6px 0 #8A5533,
    0 7px 0 #8A5533;
}
.hero .hero-title .dot-i {
  text-shadow:
    0 1px 0 #8A5533,
    0 2px 0 #8A5533,
    0 3px 0 #8A5533,
    0 4px 0 #8A5533;
}
.hero .hero-title .accent.d3::before {
  background-image: linear-gradient(135deg, #FCD2B7 0%, #F7B38E 50%, #F9A474 100%);
}
/* 980px matches the hero's single-column breakpoint: as soon as the layout
   goes mobile, the shallower wall applies too */
@media (max-width: 980px) {
  .hero .hero-title .d3:not(.accent) {
    text-shadow: 0 1px 0 #5E5E68, 0 2px 0 #5E5E68, 0 3px 0 #5E5E68;
  }
  .hero .hero-title .accent.d3 {
    text-shadow: 0 1px 0 #8A5533, 0 2px 0 #8A5533, 0 3px 0 #8A5533;
  }
  .hero .hero-title .dot-i { text-shadow: 0 1px 0 #8A5533, 0 2px 0 #8A5533; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  transition: all 0.3s var(--ease);
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-primary);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.btn-primary:hover {
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary:hover::after { opacity: 1; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--fg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.25);
}

.btn .arrow {
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Pressed state, replacing the browser tap highlight turned off on <html>.
   Scale is safe only where the element itself carries no transform: .to-top
   uses one to slide in and .lightbox-figma to centre itself, so those two get
   a background flash instead. The short duration is for the press; releasing
   springs back over the element's own (slower) transition. */
.btn:active,
.price-link:active,
.cases-arrow:active,
.lang-btn:active,
.nav-toggle:active,
.svc-info:active,
.lightbox-close:active,
.lightbox-zoom button:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.to-top:active,
.lightbox-figma:active {
  background: var(--surface-2);
  transition-duration: 0.08s;
}

/* ============================================
   Navigation
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px max(28px, calc((100% - 1320px) / 2));
  display: flex;
  align-items: center;
  gap: 24px;
  transition: border-color 0.3s var(--ease);
}
/* The frosted background lives on ::before, NOT on .nav itself: iOS Safari has a
   known bug where children of an element with backdrop-filter can fail to paint
   (the header rendered as an empty band on iPhones). With the filter on its own
   layer the logo/menu/lang switch are no longer inside the filtered group. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 9, 8, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.3s var(--ease);
}
.nav.scrolled { border-bottom-color: rgba(255, 255, 255, 0.1); }
.nav.scrolled::before { background: rgba(10, 9, 8, 0.94); }
/* iOS only (-webkit-touch-callout exists nowhere else): Safari clips
   position:fixed descendants by the border box of their scrolling ancestor
   (WebKit bug 160953). The nav strip (0..68px) lies entirely ABOVE the body
   scroller box (top: 68px), so on iPhones the whole header vanished. Moving
   the offset inside as padding keeps the same visual geometry while the nav
   now sits within the scroller box, so there is nothing to clip. Desktop
   browsers keep the original scheme untouched. */
@supports (-webkit-touch-callout: none) {
  body {
    top: 0;
    padding-top: var(--nav-h);
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
/* brand mark — supplied SE logo, background knocked out to transparent */
.brand-mark {
  width: auto;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Wordmark metal, traced from logo-se.png rather than eyeballed.
   Measured profile of every element in the mark:
     1. a hard specular line on the top edge  (silver peaks at #FFFFFF)
     2. a long smooth falloff to the darkest point near the base
     3. a bevel lift on the very bottom edge  (gold #AB9167 -> #BA9E71)
   Stop positions stretch 1 and 3 so both survive at 18px. */
.brand-text { display: inline-flex; }
.brand-text .bt-soft,
.brand-text .bt-exc {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* silver: #FFFFFF -> #C3C3C3 -> #868584, bevel lift back to #C9C8C8 */
.brand-text .bt-soft {
  background-image: linear-gradient(180deg,
    #FFFFFF 0%,
    #E6E5E5 9%,
    #D5D5D5 28%,
    #C3C3C3 50%,
    #A3A2A2 76%,
    #8E8D8C 92%,
    #C9C8C8 100%);
}
/* gold: #E9D3A6 -> #C3A87C -> #AB9167, bevel lift back to #C6A97A */
.brand-text .bt-exc {
  background-image: var(--grad-gold);
}

/* centred in the bar itself, so the offset never depends on how wide
   the brand or the CTA happen to be */
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  /* multi-word items must not fold onto two lines when flex shrinks them */
  white-space: nowrap;
  font-size: 14.5px;
  color: var(--fg-dim);
  transition: color 0.2s;
  font-weight: 500;
  position: relative;
}
/* Grows by width, not by scaleX: a scaled hairline gets rasterised on a
   composited layer and reads thicker mid-animation than at rest.
   Height is a whole 2px for the same reason — 1.5px lands between device pixels. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-primary);
  transition: width 0.25s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  padding: 10px 20px;
  font-size: 14px;
  margin-left: 14px;
}
/* language dropdown: the switch now carries the auto margin that pushes the
   right-hand nav group (lang → CTA → burger) to the edge */
.lang-switch { position: relative; margin-left: auto; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}
.lang-caret { width: 9px; height: 6px; transition: transform 0.2s var(--ease); }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
/* unfolds like the burger panel: height from 0, same curve and duration */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 76px;
  background: var(--bg-0);
  border: 0 solid var(--border);
  border-radius: var(--radius);
  max-height: 0;
  overflow: hidden;
  padding: 0 6px;
  list-style: none;
  z-index: 110;
  transition: max-height 0.5s cubic-bezier(0.45, 0, 0.25, 1),
              padding 0.5s cubic-bezier(0.45, 0, 0.25, 1),
              border-width 0.5s cubic-bezier(0.45, 0, 0.25, 1);
}
.lang-switch.open .lang-menu {
  /* three items are ~112px tall; a close cap keeps the fold-up tight */
  max-height: 130px;
  padding: 6px;
  border-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu { transition: none; }
}
.lang-item {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  color: var(--fg-dim);
}
a.lang-item:hover { background: var(--surface-2); color: var(--fg); }
.lang-item.active { color: var(--accent); }
.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--fg);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0; width: 16px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
/* open state: the middle bar fades out, the outer bars fold into an X */
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-5px) rotate(-45deg); }

/* with the lang switch in the row, the centred links hit the right-hand
   group below ~1200 — drop the CTA there first (Контакти + hero buttons
   cover it); the burger still takes over at 990 */
@media (max-width: 1199px) {
  .nav-cta { display: none; }
}
/* 990, not 900: eight items + the lang switch collide below that */
@media (max-width: 990px) {
  /* the burger panel slides out from under the nav like a drawer: the height
     unfolds from 0 (overflow clips the items), closing folds it back up.
     display:none would kill the transition */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    background: rgba(10, 9, 8, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0 solid rgba(255, 255, 255, 0.08);
    /* the desktop rule centres the list with translateX(-50%) */
    transform: none;
    /* symmetric ease-in-out: --ease launches too fast for a drawer — the
       panel needs a soft start AND a soft stop in both directions */
    transition: max-height 0.5s cubic-bezier(0.45, 0, 0.25, 1),
                padding 0.5s cubic-bezier(0.45, 0, 0.25, 1),
                border-bottom-width 0.5s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .nav-links.open {
    /* content is ~320px tall; a close cap keeps the fold-up animation tight */
    max-height: 360px;
    padding: 18px 28px 22px;
    border-bottom-width: 1px;
  }
  /* the lang switch keeps the auto margin, the burger just follows it */
  .nav-toggle { display: flex; margin-left: 14px; }
  .nav-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  padding-top: 50px;
  padding-bottom: 64px;
  /* height comes from the content itself: any min-height surplus would be
     redistributed by the centring and reopen the gap below the checks */
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-left .eyebrow { margin-bottom: 28px; }

.hero .hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 24px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .hero-title .accent {
  background: linear-gradient(135deg, #FCD2B7 0%, #F7B38E 50%, #F9A474 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  /* it is the page h1 now (SEO) — neutralise the UA heading defaults so it
     keeps looking like the tagline it always was */
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  margin: 0 0 18px;
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--fg-dim);
  line-height: 1.45;
  max-width: 560px;
  text-wrap: pretty;
}
.hero-desc {
  color: var(--fg-muted);
  font-size: 16px;
  margin-bottom: 36px;
  max-width: 540px;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hero-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  max-width: 520px;
}
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-dim);
  font-size: 14.5px;
}
.check-icon {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--grad-primary);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(240, 138, 69, 0.35);
}
.check-icon svg { width: 11px; height: 11px; }
.check-icon svg path { stroke: var(--on-accent); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero { padding-top: 40px; padding-bottom: 50px; min-height: auto; }
  .hero-checks { grid-template-columns: 1fr; }
}
/* phones: full-width stacked CTAs read as centered and are easier to tap
   than two left-hugging pills of different widths */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Hero illustration — code window + floating cards */
.hero-illu {
  position: relative;
  aspect-ratio: 1 / 0.95;
  min-height: 520px;
}
/* The code window is decorative (aria-hidden) and on narrow screens it cost
   a full screen of scrolling while its lines got clipped anyway — so below the
   single-column breakpoint it is dropped entirely. */
@media (max-width: 980px) {
  .hero-illu { display: none; }
}
.illu-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  animation: drift 20s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0; }
  to { background-position: 40px 40px; }
}
.illu-glow {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
}
.illu-glow.blue { background: var(--accent); top: 5%; left: 0; }
.illu-glow.violet { background: var(--accent-2); bottom: 5%; right: 0; }

.code-window {
  position: absolute;
  inset: 9% 4% 9% 4%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.code-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.code-titlebar .dots {
  display: flex; gap: 6px;
}
.code-titlebar .dots span {
  width: 11px; height: 11px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
}
.code-titlebar .dots span:nth-child(1) { background: #FF5F57; }
.code-titlebar .dots span:nth-child(2) { background: #FEBC2E; }
.code-titlebar .dots span:nth-child(3) { background: #28C840; }
.code-titlebar .filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  margin-left: 12px;
}
.code-body {
  flex: 1;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
  position: relative;
}
.code-line {
  display: flex;
  gap: 14px;
  white-space: nowrap;
}
.code-line .num {
  color: var(--fg-faint);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}
.tk-key { color: #FF9E64; }
.tk-fn { color: #FFD08A; }
.tk-str { color: #C3E88D; }
.tk-num { color: #F5D07A; }
.tk-com { color: var(--fg-faint); }
.tk-var { color: #E8E2DA; }
.tk-tag { color: #F472B6; }

.code-cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: #FFD08A;
  vertical-align: middle;
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* status dot pulse — footer indicator + hero availability badge */
@keyframes pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow .dot,
  .footer-bottom .pulse::before { animation: none; }
}

/* ============================================
   STATS
   ============================================ */
.about-text {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.about-text h2 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 24px;
}
.about-text p {
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  text-wrap: pretty;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}
/* below ~1230px the 4-col cards get too narrow for one-line titles */
@media (max-width: 1230px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
}
/* icon and title share the first grid row; the description spans below.
   Sizes are tuned so the longest titles stay on ONE line in the 4-col grid —
   don't enlarge the icon/font or shrink the card padding budget blindly */
.stat-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.stat-card .v-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--border);
}
.stat-card .v-ico svg { width: 18px; height: 18px; stroke: var(--accent); }
/* the brand card — same warm "featured" treatment as the pricing/niche highlights */
.stat-card.featured {
  background:
    linear-gradient(135deg, rgba(249, 164, 116, 0.07), rgba(252, 210, 183, 0.03)),
    var(--bg-0);
  border-color: rgba(249, 164, 116, 0.28);
}
.stat-card.featured .v-ico {
  background: var(--grad-primary);
  border-color: transparent;
}
.stat-card.featured .v-ico svg { stroke: var(--on-accent); }
.stat-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-card p {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  grid-column: 1 / -1;
  margin-top: 14px;
}


/* ============================================
   SERVICES
   ============================================ */
.services-grid {
  display: grid;
  /* 2x2: four cards, and 4-in-a-row would squeeze titles and item labels */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}
.service-card {
  position: relative;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all 0.4s var(--ease);
  /* icon and title share the first row; the list spans below (same idea as
     .stat-card) */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: 16px;
}
.service-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 180, 90, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-soft);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  position: relative;
}
.service-icon svg { width: 24px; height: 24px; stroke: var(--accent-bright); }
.service-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 0;
  /* two lines are reserved in every card so the lists below start at the same
     height across the row (one title wraps, the others do not) */
  min-height: 2.5em;
  display: flex;
  align-items: center;
}
.service-list { grid-column: 1 / -1; margin-top: 26px; }
.service-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--fg-dim);
}
.service-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--accent-bright);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-bright);
}

/* ---- per-item info popover ---- */
.svc-label {
  flex: 1;
  transition: color 0.2s var(--ease);
}
.service-list li:hover .svc-label,
.service-list li.open .svc-label { color: var(--fg); }
.svc-info {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.svc-info:hover,
.service-list li.open .svc-info {
  background: var(--grad-primary);
  border-color: transparent;
  color: var(--on-accent);
}
.svc-info:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 164, 116, 0.25);
}
.svc-tip {
  position: absolute;
  cursor: auto;
  z-index: 30;
  top: calc(100% + 8px);
  left: -6px;
  right: -6px;
  padding: 12px 14px;
  padding-right: 36px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim);
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.service-list li.open .svc-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.svc-tip-close {
  position: absolute;
  cursor: pointer;
  top: 6px;
  right: 6px;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: none;
  color: var(--fg-muted);
  display: grid;
  place-items: center;
  padding: 0;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.svc-tip-close svg {
  display: block;
  width: 11px;
  height: 11px;
}
.svc-tip-close:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.svc-tip-close:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--fg);
}
/* the last two items open upwards so the hint never hangs off the card */
.service-list li:nth-last-child(-n+2) .svc-tip {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
}
.service-list li:nth-last-child(-n+2).open .svc-tip { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .svc-tip,
  .service-list li:nth-last-child(-n+2) .svc-tip { transform: none; transition: opacity 0.15s linear, visibility 0.15s; }
}

@media (max-width: 980px) {
  .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Phones keep the icon and the title on one row, like every wider screen.
     This used to stack: back then one card was titled "Тестування сайтів і
     мобільних застосунків" and the icon column broke it into 4 lines. That card
     has since been split in two, so the titles fit again next to a slightly
     smaller icon at 18px — longest one wraps to 2 lines, the rest to one.
     Cards sit one under another here, so there is no cross-card alignment to
     preserve and min-height is switched off. */
  .service-card { column-gap: 14px; }
  .service-icon { width: 46px; height: 46px; border-radius: 12px; }
  .service-icon svg { width: 22px; height: 22px; }
  .service-card h3 { font-size: 18px; min-height: 0; }
}

/* ============================================
   PROCESS — Timeline
   ============================================ */
.process-timeline {
  position: relative;
  margin-top: 40px;
}
.process-line {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 60px; bottom: 60px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 10%, var(--accent-2) 90%, transparent);
  opacity: 0.4;
}
.process-step {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  min-height: 110px;
}
.process-step:last-child { margin-bottom: 0; }
.process-step .content {
  background: var(--bg-0);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s var(--ease);
}
.process-step .content:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
/* connector line tying each card to its numbered marker. Sides mirror the
   grid-column rules below (do NOT reason about DOM parity here — the
   .process-line sibling shifts nth-child, see the memo). */
.process-step .content { position: relative; }
.process-step .content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -38px;
  width: 37px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(270deg, rgba(249, 164, 116, 0.5), var(--accent));
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.process-step:nth-child(even) .content::after {
  left: auto;
  right: -38px;
  background: linear-gradient(90deg, rgba(249, 164, 116, 0.5), var(--accent));
}
.process-step:hover .content::after { opacity: 1; }
.process-step:nth-child(even) .content { grid-column: 3; }
.process-step:nth-child(even) > :nth-child(1) { grid-column: 1; }
.process-step .marker {
  grid-column: 2;
  width: 54px; height: 54px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.process-step .marker::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: var(--accent);
  z-index: -1;
  opacity: 0;
  filter: blur(18px);
  transition: opacity 0.35s var(--ease);
}
.process-step:hover .marker::before { opacity: 0.28; }
.process-step .marker.active {
  background: var(--grad-primary);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 0 30px -6px rgba(240, 138, 69, 0.65);
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
}
.process-step p {
  color: var(--fg-muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .process-line { left: 27px; transform: none; }
  .process-step { grid-template-columns: 54px 1fr; gap: 18px; }
  .process-step:nth-child(odd) .content,
  .process-step:nth-child(even) .content { text-align: left; grid-column: 2; }
  .process-step .marker { grid-column: 1; margin: 0; }
  .process-step:nth-child(even) > :nth-child(1) { grid-column: 2; }
  /* content-first steps: sparse auto-placement cannot step back to column 1
     after the content lands in column 2, so the marker fell to row 2 */
  .process-step > * { grid-row: 1; }
  /* marker is left of every card on mobile — one short connector for all */
  .process-step .content::after,
  .process-step:nth-child(even) .content::after {
    right: auto;
    left: -19px;
    width: 18px;
    background: linear-gradient(270deg, rgba(249, 164, 116, 0.5), var(--accent));
  }
}

/* ============================================
   TECH STACK — marquee
   ============================================ */
.tech-marquee-wrap {
  position: relative;
  margin: 40px -28px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.tech-marquee {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.tech-marquee.reverse {
  animation-direction: reverse;
  animation-duration: 85s;
  margin-top: 16px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.tech-pill:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--fg);
}
.tech-pill svg, .tech-pill img {
  width: 26px; height: 26px;
}
.tech-pill .ico {
  width: 28px; height: 28px;
  display: grid; place-items: center;
}

/* ============================================
   ADVANTAGES — Bento
   ============================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap-grid);
}
.bento-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bento-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.bento-card p {
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.bento-card .b-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.bento-card .b-ico svg { width: 20px; height: 20px; stroke: var(--accent-bright); }
.bento-card.featured {
  background:
    linear-gradient(135deg, rgba(249,164,116,0.14), rgba(252,210,183,0.07)),
    var(--bg-0);
  border-color: rgba(249, 164, 116, 0.28);
}
.bento-card.featured .b-ico {
  background: var(--grad-primary);
  border-color: transparent;
}
.bento-card.featured .b-ico svg { stroke: var(--on-accent); }
.bento-deco {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(320px 220px at 104% 110%, rgba(249, 164, 116, 0.10), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.bento-card:hover .bento-deco { opacity: 1; }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-card.span-3, .bento-card.span-2, .bento-card.span-4 { grid-column: span 1; }
  .bento-card.span-6 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  /* span rules from wider breakpoints would force phantom implicit tracks
     in a 1-column grid, so every card collapses to auto here */
  .bento-card.span-2,
  .bento-card.span-3,
  .bento-card.span-4,
  .bento-card.span-6 { grid-column: auto; }
}

/* ============================================
   CASES
   ============================================ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}
.case-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.case-thumb {
  aspect-ratio: 16 / 11;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.case-body {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.case-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.case-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.case-card .desc {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: 18px;
  flex: 1;
}
.case-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.case-tech span {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-dim);
}
.case-result {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.case-result strong {
  color: var(--accent-bright);
  font-weight: 500;
  font-family: var(--font-mono);
}

/* mock thumb styles */
.mock {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mock-1 { background: linear-gradient(135deg, #3B1D0C, #8A4A16); }
.mock-2 { background: linear-gradient(135deg, #46280B, #9C5A12); }
.mock-3 { background: linear-gradient(135deg, #5A3410, #35200F); }
.mock-4 { background: linear-gradient(135deg, #3E2A10, #7C4E0C); }
.mock-5 { background: linear-gradient(135deg, #8A4110, #3A1E0C); }
.mock-6 { background: linear-gradient(135deg, #2E251C, #14100C); }

.mock-window {
  width: 88%;
  height: 78%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mock-bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mock-bar span {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.3);
}
.mock-content {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-bar-h {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15));
}
.mock-bar-h.w-60 { width: 60%; }
.mock-bar-h.w-40 { width: 40%; }
.mock-bar-h.w-80 { width: 80%; }
.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.mock-grid > div {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}
.mock-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-top: 10px;
}
.mock-chart span {
  flex: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
  border-radius: 2px 2px 0 0;
}

@media (max-width: 980px) {
  .cases-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cases-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Cases slider + lightbox
   ============================================ */
/* graceful fallback: before Swiper initialises (or if the CDN is down)
   the slides lay out as the old three-column grid */
.cases-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}
.cases-swiper:not(.swiper-initialized) .cases-controls { display: none; }
@media (max-width: 980px) {
  .cases-swiper:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: 1fr; }
}

/* soft deceleration instead of Swiper's default linear-ish ease */
.cases-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
.cases-swiper .swiper-slide {
  height: auto;
  display: flex;
}
/* image-only slides: the thumb carries the card chrome itself */
.cases-swiper .case-thumb {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.3s var(--ease);
}
/* no hover lift: the swiper viewport clips overflow, the raised slide lost its top edge */
.cases-swiper .case-thumb:hover {
  border-color: var(--border-strong);
}
/* real project screenshots are tall full-page captures: show their top
   in the 16/11 thumb; the lightbox clones the img and shows it whole */
.cases-swiper .case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* the mobile capture leads with a text hero; the thumb is aimed at the pizza
   photo (y820-1042 of 3719, bounds MEASURED per-row by brightness — eyeballing
   scaled screenshots was off by 30px) and zoomed 1.25x to fill the frame */
/* NEXAVA: same idea - frame the hero (nav + car photo + white filter bar,
   y0-780 of 3519) and stop before the "Why Choose NEXAVA" heading at y840.
   Top-left origin keeps the left-aligned headline uncropped. */
.cases-swiper .case-thumb img[src*="NEXAVA"] {
  transform: scale(1.27);
  transform-origin: 0 0;
}
/* web capture: frame ONLY the hero (nav + photo, y0-798 of 3658) and stop
   right at the hero bottom edge, hiding the dark menu band below. Top-left
   origin keeps the headline (starts at x70) uncropped; only the right side
   of the hero photo bleeds off, which reads naturally. */
.cases-swiper .case-thumb img[src*="Gusto-web"] {
  transform: scale(1.25);
  transform-origin: 0 0;
}
.cases-swiper .case-thumb img[src*="Gusto-mobile"] {
  object-position: 50% 23.2%;
  transform: scale(1.25);
}

.cases-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.cases-arrow {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cases-arrow:hover { background: var(--surface-2); border-color: var(--accent); }
.cases-arrow svg { width: 16px; height: 16px; }
.cases-pagination {
  display: flex;
  gap: 8px;
}
.cases-swiper .cases-pagination {
  position: static;
  width: auto;
  left: auto;
  bottom: auto;
}
/* the gradient is a background-image and cannot cross-fade with the flat
   inactive color (the deactivating bullet flashed dark while background-color
   caught up) — so the flat color stays put and the gradient fades on top */
.cases-pagination .swiper-pagination-bullet {
  position: relative;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  opacity: 1;
  overflow: hidden;
}
.cases-pagination .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.cases-pagination .swiper-pagination-bullet-active::before {
  opacity: 1;
}
/* narrow phones: arrows + 6 bullets outgrew the content column and the
   centred flex row bled past both screen edges — shrink the parts */
@media (max-width: 640px) {
  .cases-controls { gap: 12px; }
  .cases-arrow { flex: 0 0 40px; width: 40px; height: 40px; }
  /* Swiper adds bullet margins via a 3-class rule that outranks ours;
     it reads them from this variable, so zero it and let gap rule spacing */
  .cases-pagination { gap: 6px; --swiper-pagination-bullet-horizontal-gap: 0px; }
  .cases-pagination .swiper-pagination-bullet { width: 18px; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* hands two-finger gestures to the script: the browser's own pinch scales the
     whole overlay, so the close button and the zoom pill grew with the photo.
     Only this overlay is affected — the page itself still zooms natively. */
  touch-action: none;
}
.lightbox[hidden] { display: none; }
.lightbox-stage .case-thumb {
  width: min(1200px, 92vw);
  max-height: 88vh;
  aspect-ratio: 16 / 11;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
}
.lightbox-stage img {
  /* width/height attributes on the slide <img> (they reserve space and keep the
     CLS score) reach the clone as fixed CSS width/height. max-width and
     max-height then clamp each axis on its own, which squashed the tall
     captures flat. auto hands sizing back to the file, so max-* scale the
     picture down whole and the capture opens fit-to-height. */
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
}
.lightbox-close {
  z-index: 2;
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  /* opaque dark + logo-gold hairline: --surface-2 dissolved on white mockups,
     this stays visible on any background and matches the zoom pill */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    var(--grad-gold) border-box;
  display: grid;
  place-items: center;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox-close:hover {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
.lightbox-close svg { width: 15px; height: 15px; }
/* "view the Figma mockup" pill: same glass style as the zoom cluster,
   docked to the top edge; shown only for slides with data-figma */
.lightbox-figma {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  z-index: 2;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-figma:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-figma svg { width: 11px; height: 11px; }
/* narrow screens: centred pill collided with the close button — dock it left,
   the close keeps the right corner */
@media (max-width: 640px) {
  .lightbox-figma {
    left: 16px;
    transform: none;
    top: 26px;
    padding: 9px 14px;
    font-size: 13px;
    gap: 6px;
  }
}

.lightbox-zoom {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius-pill);
  /* logo-gold hairline (same padding-box/border-box trick as .price-link);
     the inner fill is opaque so the gold doesn't bleed through the glass */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    var(--grad-gold) border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
}
.lightbox-zoom button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.lightbox-zoom button:hover:not(:disabled) { background: var(--surface-2); color: var(--accent); }
.lightbox-zoom button:disabled { opacity: 0.35; cursor: default; }
.lightbox-zoom svg { width: 15px; height: 15px; }
/* the zoomed preview scales from the center, smoothly */
.lightbox-stage > * { transition: transform 0.35s var(--ease); }
/* zoomed in: the photo can be dragged around */
.lightbox-stage .pannable { cursor: grab; touch-action: none; user-select: none; }
.lightbox-stage .panning { cursor: grabbing; transition: none; }

/* ============================================
   NICHES ("for whom we build sites")
   Exclusive card treatment used NOWHERE else on the page: gradient hairline
   border (amber running around the frame via the padding-box/border-box
   two-background trick), a corner glow that breathes on hover, and numbers
   set in the metallic gold gradient taken from the logo (--grad-gold, same
   as the word Exclusive in the header).
   ============================================ */
.niches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}
.niche-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    linear-gradient(155deg,
      rgba(249, 164, 116, 0.5),
      rgba(255, 255, 255, 0.12) 38%,
      rgba(255, 255, 255, 0.05) 72%,
      rgba(249, 164, 116, 0.22)) border-box;
}
.niche-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 100% 0%, rgba(249, 164, 116, 0.10), transparent 55%);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.niche-card:hover::before { opacity: 1; }
.niche-card > * { position: relative; z-index: 1; }
.niche-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 14px;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.niche-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.niche-card p {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.55;
}
/* the catch-all: full-row centred flagship card. Solid accent frame -
   the same "featured" signal as the highlighted pricing card */
.niche-card.featured {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 24px 30px;
  border-color: var(--accent);
  background: var(--surface);
}
.niche-card.featured::before {
  background: radial-gradient(70% 130% at 50% 0%, rgba(249, 164, 116, 0.12), transparent 60%);
}
/* the flagship card wears a gold crown set in a medallion: a gold
   gradient rim, warm inner glow and a thin outer halo ring - permanent
   framing, no animation */
.niche-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 30%, rgba(214, 178, 120, 0.16), rgba(214, 178, 120, 0.03) 62%, transparent 75%) padding-box,
    linear-gradient(180deg,
      rgba(243, 224, 187, 0.6),
      rgba(195, 168, 124, 0.28) 45%,
      rgba(171, 145, 103, 0.2) 70%,
      rgba(198, 169, 122, 0.55)) border-box;
}
.niche-ico::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(214, 178, 120, 0.18);
  pointer-events: none;
}
.niche-ico svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 10px rgba(230, 198, 145, 0.55));
}
.niche-card.featured h3 { margin-bottom: 8px; }
.niche-card.featured p {
  /* 720px keeps each of the three <br>-separated sentences on its own line */
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
}
@media (max-width: 980px) {
  .niches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .niches-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PRICING
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.price-card:hover { border-color: var(--border-strong); }
.price-card.featured { border-color: var(--accent); background: var(--surface); }
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  /* white-to-silver titles — same treatment as the big section headings */
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-desc {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.price-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-dim);
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.price-value span {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--fg);
  margin-left: 4px;
}
/* Card with no «От/Від» prefix (price "by agreement"): that 4px sits on the
   inline box START, so it indents only the FIRST line — a two-line value came
   out 4px off from its own second line. No selector distinguishes the cases
   (:first-child/:only-child ignore the text node), hence the .no-prefix flag. */
.price-value.no-prefix span {
  margin-left: 0;
}
/* secondary price condition (e.g. hourly rate for ongoing work) */
.price-value em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
}
.price-card.featured .price-value span {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 26px;
  padding: 0;
  flex: 1;
}
.price-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.45;
}
.price-feats svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}
.price-card .btn {
  width: 100%;
  justify-content: center;
}
/* group dividers: mono label with hairlines on both sides */
.pricing-group-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0 22px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pricing-group-title:first-of-type { margin-top: 0; }
.pricing-group-title::before,
.pricing-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.pricing-group-title span {
  /* the label sits centred between the two rules, but its OWN lines inherit
     text-align: start — on phones the long testing label wraps and the short
     second line hung against the left edge of the label box */
  text-align: center;
}
@media (max-width: 640px) {
  /* "Тестування програмного забезпечення" is long: without a cap the label eats
     the row and the flanking rules collapse to zero width */
  .pricing-group-title { font-size: 13px; letter-spacing: 0.06em; }
  .pricing-group-title span { max-width: 70%; }
}

/* per-site-type grid: compact cards, 3x2 */
.price-card.compact { padding: 24px 22px; }
.price-card.compact h3 { font-size: 20px; }
.price-card.compact .price-desc {
  font-size: 13px;
  margin-bottom: 14px;
  flex: 1;
}
.price-card.compact .price-value {
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 13px;
}
.price-card.compact .price-value span { font-size: 26px; }
/* per-card footnote under the price: domain/hosting billed separately */
.price-addon {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -8px 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
}
.price-addon svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.8;
}

/* gold hairline pill — logo-gold gradient border via the same
   padding-box/border-box trick as the niche-card frames */
.price-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    var(--grad-gold) border-box;
  transition: background 0.3s var(--ease);
}
.price-link:hover {
  background:
    linear-gradient(rgba(249, 164, 116, 0.10), rgba(249, 164, 116, 0.10)) padding-box,
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    var(--grad-gold) border-box;
}
.price-link svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s var(--ease);
}
.price-link:hover svg { transform: translateX(3px); }

/* svc modifier: compact card that KEEPS its feature list (flex goes to the
   list, not the description) */
.price-card.compact.svc .price-desc { flex: 0 0 auto; }
.price-card.compact.svc .price-feats {
  flex: 1;
  gap: 9px;
  margin-bottom: 18px;
}
.price-card.compact.svc .price-feats li { font-size: 13px; }

/* second row: standalone services (QA, design) */
.pricing-grid.pricing-services {
  grid-template-columns: repeat(2, 1fr);
  max-width: 840px;
  margin: 0 auto;
}
.pricing-note {
  text-align: center;
  margin-top: 28px;
  color: var(--fg-muted);
  font-size: 14px;
}
.pricing-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 980px) {
  .pricing-grid,
  .pricing-grid.pricing-services {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .pricing-grid.pricing-services { margin-top: var(--gap-grid); }
  /* compact site-type cards still fit two abreast on tablets */
  .pricing-grid.pricing-sites {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
  }
}
@media (max-width: 640px) {
  .pricing-grid.pricing-sites {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ============================================
   FAQ
   ============================================ */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.faq-item.open {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--accent-bright); }
.faq-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease), background 0.3s;
  font-size: 16px;
  line-height: 0;
}
/* The two bars of the "+" are stacked in the same grid cell and centred by
   place-items — no absolute positioning. The old version absolutely-positioned
   the vertical bar while .faq-icon itself had no position: Chrome still centred
   it (static position of abspos grid children honours alignment), but iOS
   Safari dropped it at the container corner and the plus fell apart. */
.faq-icon::before {
  content: '';
  grid-area: 1 / 1;
  width: 10px; height: 1.5px;
  background: var(--fg);
}
.faq-icon::after {
  content: '';
  grid-area: 1 / 1;
  width: 1.5px; height: 10px;
  background: var(--fg);
  transition: transform 0.3s;
}
.faq-item.open .faq-icon {
  background: var(--grad-primary);
  border-color: transparent;
}
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: var(--on-accent); }
.faq-item.open .faq-icon::after { transform: scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a-inner {
  padding: 0 26px 24px;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 680px;
}

/* ============================================
   CTA Banner
   ============================================ */
.cta-banner {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 92px 60px;
  text-align: center;
  overflow: hidden;
  /* panel sits a step above the page, lit from the top edge */
  background: linear-gradient(180deg, #161411 0%, #100F0E 55%, #0D0C0B 100%);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
/* luminous hairline along the top edge — bright in the middle, gone at the corners */
.cta-banner::before {
  content: '';
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(252, 210, 183, 0.75) 50%,
    transparent);
}
/* one honest light source above the badge, instead of stains in the corners */
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(540px 150px at 50% -8%, rgba(249, 164, 116, 0.14), transparent 62%);
}
/* On phones the 540px ellipse spans the whole narrow panel; on wider screens
   the same 540px covers less than half of it and the light looks stingy.
   A percentage width keeps the mobile proportion at any panel size, while the
   vertical reach still dies out (~65px) well above the badge (~92px). */
@media (min-width: 641px) {
  .cta-banner::after {
    background: radial-gradient(90% 165px at 50% -8%, rgba(249, 164, 116, 0.14), transparent 62%);
  }
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: 22px;
  max-width: 860px;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.cta-banner .btn { padding: 18px 32px; font-size: 16px; }
.cta-banner p {
  color: var(--fg-dim);
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .cta-banner { padding: 56px 24px; }
}

/* contact head: centred like every other section head; only the width cap
   is lifted so the long heading keeps to one line where it fits */
/* the contact heading is one notch smaller than the other section heads */
.contact-head h2 { font-size: clamp(32px, 4vw, 50px); }
.contact-head {
  max-width: none;
  margin-bottom: 48px;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Grid items default to min-width: auto, so a column refuses to shrink below its
   content. One attached file with a long name was enough to push the whole form
   (and with it the page) past the right edge on phones — the name truncates, but
   only once the form is actually allowed to be narrower than it. */
.contact-wrap > * {
  min-width: 0;
}
/* animated "sending" dots: each one fades in and out in turn.
   The negative margin cancels most of the button's own flex gap (10px),
   pulling the dots back next to the word. */
.btn .send-dots { margin-left: -7px; }
.btn .send-dots span {
  display: inline-block;
  opacity: 0;
  animation: dot-blink 1.2s infinite;
}
.btn .send-dots span:nth-child(2) { animation-delay: 0.2s; }
.btn .send-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink {
  0%, 70%, 100% { opacity: 0; }
  20%, 50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn .send-dots span { animation: none; opacity: 1; }
}
.form-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent);
  text-align: center;
}
/* honeypot: off-screen for people, a plain input for bots */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-submit { width: 100%; justify-content: center; padding: 16px; }
/* consent checkbox above the submit button */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  cursor: pointer;
}
/* custom checkbox: accent hairline when empty, gradient fill + dark tick when
   checked (accent-color can't paint the unchecked outline) */
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(249, 164, 116, 0.5);
  outline-offset: 2px;
}
.form-consent input[type="checkbox"]:checked {
  background: var(--grad-primary);
  border-color: transparent;
}
.form-consent input[type="checkbox"]:checked::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--on-accent);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 84% 4%, 40% 66%);
}
.form-consent a { color: var(--fg-muted); text-decoration: underline; }
.form-consent a:hover { color: var(--accent); }
.footer-privacy { color: inherit; text-decoration: underline; }
.footer-privacy:hover { color: var(--accent); }
/* the reason tail of a note — same red as invalid fields, so the cause
   registers before the note auto-hides */
.form-note .note-em {
  color: #E5484D;
  font-weight: 600;
}
/* file attachments: custom drop zone (the native input is hidden; the
   browser-localized "no file chosen" text never matched the site language) */
.files-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--fg-dim);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.files-drop:hover,
.files-drop:focus-visible,
.files-drop.dragover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.5);
  color: var(--fg);
  outline: none;
}
.files-drop svg { width: 17px; height: 17px; flex: 0 0 auto; }
.files-browse { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.files-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.files-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-dim);
}
.files-list .fname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-list .fsize {
  flex: 0 0 auto;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 12px;
}
.files-list .fdel {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.files-list .fdel:hover { color: #F87171; background: var(--surface-2); }
.files-list .fdel svg { width: 11px; height: 11px; }
.files-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
}
.char-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  text-align: right;
  margin-top: 6px;
}
.contact-form {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  transition: all 0.2s;
  font-family: var(--font-body);
}
/* Placeholders were left on the browser default, which is light enough on the
   dark inputs to read as an already-entered value — the phone example number
   especially. --fg-faint matches the country-search placeholder. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-faint);
  opacity: 1; /* Firefox dims placeholders by default */
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,0.5);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .field-row { grid-template-columns: 1fr; }
}

/* required fields: a visible mark on the label and a warm-red invalid state.
   :user-invalid fires only after the visitor interacted or tried to submit,
   so fields never open the page already highlighted. */
.field:has([required]) > label::after {
  content: ' *';
  color: var(--accent);
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #E5484D;
}
.field input:user-invalid:focus,
.field textarea:user-invalid:focus {
  border-color: #E5484D;
}


/* ---- intl-tel-input: dark theme ---- */
.iti { width: 100%; }
.iti__selected-country {
  background: transparent;
  color: var(--fg);
}
.iti__selected-country-primary:hover,
.iti__selected-country:focus-visible .iti__selected-country-primary {
  background: var(--surface-2);
}
.iti__selected-dial-code { color: var(--fg-dim); }
.iti__arrow { border-top-color: var(--fg-muted); }
.iti__arrow--up { border-bottom-color: var(--fg-muted); }
/* doubled selector: the library styles this via .iti--inline-dropdown
   .iti__dropdown-content, which outranks a single class */
.iti .iti__dropdown-content {
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  color: var(--fg-dim);
}
.iti__search-input {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 11px 14px;
  color: var(--fg);
}
.iti__search-input::placeholder { color: var(--fg-faint); }
.iti__search-input:focus { outline: none; }
/* the search box sits inside .field, so the generic .field input:focus accent
   border reaches it; keep it neutral — the panel outline carries the accent */
.field .iti__search-input,
.field .iti__search-input:focus {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  /* magnifying glass in the shorthand: a bare color here would reset it.
     CSS vars do not work inside a data URI — the stroke is --fg-faint
     (#6B6B73) hardcoded, keep in sync with the token */
  background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") no-repeat 14px center / 15px 15px;
  padding: 11px 14px 11px 38px;
}
/* country-list scrollbar: the native one occupies a layout column, so the
   row highlight could never reach the dropdown edge. Hidden entirely; an
   overlay thumb (same pattern as the page scroller) floats above the rows. */
.iti .iti__country-list { scrollbar-width: none; }
.iti .iti__country-list::-webkit-scrollbar { display: none; }
.iti-scroll-thumb {
  position: absolute;
  right: 3px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #F09A64 0%, #D97B3E 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  touch-action: none;
}
.iti-scroll-thumb.visible { opacity: 0.9; pointer-events: auto; }
.iti-scroll-thumb.dragging { opacity: 1; }
/* widened invisible grab zone: 5px is a thin target for a fingertip/cursor */
.iti-scroll-thumb::before { content: ''; position: absolute; inset: -4px -6px; }
.iti__country { padding: 9px 12px; }
.iti__country.iti__highlight { background: var(--surface-2); }
.iti__dial-code { color: var(--fg-muted); }
.iti__divider { border-bottom: 1px solid var(--border); }

.contact-info {
  padding: 8px 0;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.contact-info > p {
  color: var(--fg-dim);
  margin-bottom: 32px;
  text-wrap: pretty;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
}
.contact-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateX(4px);
}
.contact-row .ico {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-row .ico svg { width: 18px; height: 18px; stroke: var(--accent-bright); }
.contact-row .meta {
  flex: 1;
}
.contact-row .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.contact-row .val {
  font-size: 15px;
  font-weight: 450;
}

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

/* Contact form submit — set in caps via CSS so the accessible name and the
   JS status messages stay normal-case in the DOM. */
#contact-form button[type="submit"] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 26px;
  /* the contact section above already contributes 90px of padding */
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-brand p:not(.footer-about) {
  color: var(--fg-muted);
  font-size: 14.5px;
  margin-top: 18px;
  max-width: 320px;
}
/* services as a short bulleted list; the dot matches .service-list markers */
.footer-services {
  list-style: none;
  margin-top: 16px;
  max-width: 340px;
}
.footer-services li {
  position: relative;
  padding-left: 16px;
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.footer-services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--accent);
}
/* plain-text blurb under the tagline: services and industries in prose
   (a keyword list here would read as footer spam) */
.footer-brand p.footer-about {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 340px;
  margin-top: 14px;
}
/* headings were --fg-muted — dimmer than the links under them, so the
   hierarchy read backwards. Accent colour echoes the section eyebrows. */
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 18px;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul a {
  color: var(--fg-dim);
  font-size: 14.5px;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--fg); }
/* contact links with small inline icons */
.footer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-contacts a svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.65;
  transition: opacity 0.2s var(--ease);
}
.footer-contacts a:hover svg { opacity: 1; }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
.footer-bottom .pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-bottom .pulse::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #34D399;
  box-shadow: 0 0 10px #34D399;
  animation: pulse 1.5s ease-in-out infinite;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}


/* ============================================
   Floating scroll indicator
   ============================================ */
/* Overlays the content instead of reserving a gutter, so full-width rules
   still reach the window edge. Travels only below the nav, mirroring the
   body scroller's real extent. */
/* the element is a 14px grab strip at the window edge (a 5px pill is too
   thin to hit with a mouse); the visible pill is drawn by ::before */
.scroll-thumb {
  position: fixed;
  top: 0;
  right: 0;
  width: 14px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  touch-action: none;
}
.scroll-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #F09A64 0%, #D97B3E 100%);
  box-shadow: 0 0 8px rgba(217, 123, 62, 0.3);
}
.scroll-thumb.visible {
  opacity: 0.9;
  pointer-events: auto;
}
.scroll-thumb.dragging {
  opacity: 1;
}

/* ============================================
   Back to top
   ============================================ */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  /* hidden until the page is scrolled past one viewport */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    visibility 0.35s,
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top svg {
  width: 18px; height: 18px;
  stroke: var(--accent);
}
.to-top:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}
.to-top:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.8), 0 0 0 4px rgba(249, 164, 116, 0.25);
}
@media (max-width: 640px) {
  .to-top { right: 18px; bottom: 18px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.2s linear, visibility 0.2s; transform: none; }
  .to-top.show { transform: none; }
}

/* ============================================
   Scroll reveal
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }
.reveal.delay-5 { transition-delay: 0.4s; }
.reveal.delay-6 { transition-delay: 0.48s; }

/* selection */
::selection {
  background: rgba(240, 138, 69, 0.35);
  color: #FFF3E7;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }