/* ==========================================================================
   Сладкоман — Landing V1
   Visual system: BEHAVE Candy (input/BEHAVE Candy/*), applied verbatim where
   the source defines a value. No shadows, no third accent colour, no neutral
   text colour, no external font/asset/script requests.
   ========================================================================== */

/* --- BEHAVE Candy tokens (values copied from variables.css) --------------- */
:root {
  /* Colors */
  --color-cobalt-surge: #061fff;
  --color-sour-lime: #d3ff56;
  --color-blush-puck: #ffcfd1;
  --color-lavender-mist: #efe5ff;
  --color-lilac-bloom: #ceb3ff;
  --color-soft-lilac: #dfceff;
  --color-paper-white: #ffffff;

  /* Typography — Font Families.
     Good Sans was not supplied and is not bundled or downloaded. The
     substitutes named by the reference (Space Grotesk / DM Sans / Inter) are
     used only if already present on the visitor device; otherwise the system
     geometric sans stack applies. */
  --font-good-sans: 'Good Sans', 'Space Grotesk', 'DM Sans', 'Inter',
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;      --leading-caption: 2.5;      --tracking-caption: -0.18px;
  --text-body-sm: 14px;      --leading-body-sm: 2.14;     --tracking-body-sm: -0.21px;
  --text-body: 16px;         --leading-body: 1.5;         --tracking-body: -0.24px;
  --text-body-lg: 18px;      --leading-body-lg: 1.5;      --tracking-body-lg: -0.29px;
  --text-subheading: 24px;   --leading-subheading: 1.2;   --tracking-subheading: -0.48px;
  --text-heading-sm: 32px;   --leading-heading-sm: 1.15;  --tracking-heading-sm: -0.7px;
  --text-heading: 56px;      --leading-heading: 1.1;      --tracking-heading: -2.8px;
  --text-heading-lg: 72px;   --leading-heading-lg: 1;     --tracking-heading-lg: -3.6px;
  --text-display: 86px;      --leading-display: 1;        --tracking-display: -4.3px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-8: 8px;     --spacing-10: 10px;   --spacing-20: 20px;
  --spacing-25: 25px;   --spacing-29: 29px;   --spacing-30: 30px;
  --spacing-40: 40px;   --spacing-50: 50px;   --spacing-55: 55px;
  --spacing-58: 58px;   --spacing-100: 100px; --spacing-110: 110px;
  --spacing-120: 120px;

  /* Layout */
  --section-gap: 100px;
  --card-padding: 29px;

  /* Border Radius */
  --radius-cards: 20px;
  --radius-inputs: 6.95px;
  --radius-buttons: 6.95px;
  --radius-arrowbuttons: 25px;

  /* Surfaces */
  --surface-page-canvas: #efe5ff;
  --surface-product-card: #ffcfd1;
  --surface-input-field: #dfceff;
  --surface-elevated-card-hover: #ceb3ff;

  /* Project-local responsive helpers (no new colours) */
  --gutter: clamp(20px, 5vw, 120px);
  --band-gap: clamp(55px, 8vw, 100px);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page-canvas);
  color: var(--color-cobalt-surge);
  font-family: var(--font-good-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
  font-feature-settings: 'ss01' on, 'cv11' on;
}

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

svg { display: block; }

/* --- Focus and assistive -------------------------------------------------- */
/* The focus ring is drawn outside the element, so it must contrast with the
   surface the element SITS ON, not with the element's own text colour.
   currentColor fails that test: the lime hero CTA carries cobalt text and sits
   on the cobalt hero band, so a currentColor ring was cobalt on cobalt (1:1)
   and marked nothing. Each ring colour is therefore pinned to its surrounding
   surface. */
:focus-visible {
  outline: 3px solid var(--color-cobalt-surge);
  outline-offset: 3px;
}

/* Focused over the cobalt hero band: white reaches 7.93:1 there, where cobalt
   would reach 1:1. */
.hero :focus-visible {
  outline-color: var(--color-paper-white);
}

/* The skip link is absolutely positioned and straddles two surfaces: it
   overlaps the cobalt announcement bar while the lavender canvas shows beside
   and below it, and the bar changes height when its text wraps on narrow
   screens. No single palette colour clears 3:1 against both cobalt and
   lavender, so no outer ring can be safe at every width. A negative offset
   draws the ring inside the element instead, on the link's own Sour Lime
   fill, where cobalt reaches 6.88:1 no matter what lies behind it. */
.skip:focus-visible {
  outline-color: var(--color-cobalt-surge);
  outline-offset: -3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--spacing-20);
  top: -100px;
  z-index: 50;
  background: var(--color-sour-lime);
  color: var(--color-cobalt-surge);
  border: 1px solid var(--color-cobalt-surge);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-10) var(--spacing-20);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: top 120ms ease;
}

.skip:focus { top: var(--spacing-10); }

/* --- Announcement bar ----------------------------------------------------- */
.announce {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  background: var(--color-cobalt-surge);
  color: var(--color-paper-white);
  padding: var(--spacing-10) var(--gutter);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  text-align: center;
}

/* --- Navigation ----------------------------------------------------------- */
/* Not sticky on narrow screens: the wordmark and links wrap to two rows there
   and a pinned bar would take about 100px of an already short viewport. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-10) var(--spacing-25);
  background: var(--surface-page-canvas);
  padding: var(--spacing-20) var(--gutter);
}

.nav__mark {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-25);
}

.nav__links a {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.nav__links a:hover { border-bottom-color: var(--color-cobalt-surge); }

/* --- Hero ----------------------------------------------------------------- */
/* The reference hero is a full-bleed photograph. No product photography was
   supplied, so the full-bleed band is solid Cobalt Surge and the headline
   keeps the white display type the reference specifies for full-bleeds. */
.hero {
  background: var(--color-cobalt-surge);
  color: var(--color-paper-white);
  padding: clamp(58px, 9vw, 120px) var(--gutter) clamp(55px, 8vw, 110px);
}

.hero__eyebrow {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  margin-bottom: var(--spacing-20);
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(40px, 8.5vw, 86px);
  line-height: var(--leading-display);
  letter-spacing: -0.05em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--spacing-30);
}

.hero__lead {
  max-width: 46ch;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.35;
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-40);
}

.hero__cta { margin-top: var(--spacing-8); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: 44px;
  padding: var(--spacing-10) clamp(25px, 4vw, 55px);
  border: 1px solid var(--color-cobalt-surge);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}

/* Filled Lime CTA: Sour Lime fill, Cobalt Surge text.
   The repeated component and Do/Don't rules of the reference control here.
   Its single contradictory example prompt (white text, 9999px radius) is
   deliberately not applied. */
.btn--lime {
  background: var(--color-sour-lime);
  color: var(--color-cobalt-surge);
}

.btn--lime:hover { background: var(--color-paper-white); }

.btn__arrow {
  font-size: 1.1em;
  line-height: 1;
}

/* --- Content bands -------------------------------------------------------- */
.band {
  background: var(--surface-page-canvas);
  padding: var(--band-gap) var(--gutter);
}

.section__title {
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: var(--leading-heading);
  letter-spacing: -0.05em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--spacing-20);
}

.section__lead {
  max-width: 52ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  margin-bottom: var(--spacing-50);
}

/* --- Theme cards ---------------------------------------------------------- */
.themes {
  display: grid;
  gap: var(--spacing-20);
  grid-template-columns: minmax(0, 1fr);
}

.card {
  background: var(--surface-product-card);
  border: 1px solid var(--color-cobalt-surge);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.card__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-10);
}

.card__text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

/* --- Feature band --------------------------------------------------------- */
.feature {
  background: var(--surface-page-canvas);
  padding: 0 var(--gutter) var(--band-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-30);
  text-align: center;
}

.feature__shape {
  width: clamp(180px, 30vw, 320px);
  height: auto;
}

.feature__title {
  max-width: 22ch;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
}

/* --- Marketplace cards ---------------------------------------------------- */
.markets {
  display: grid;
  gap: var(--spacing-20);
  grid-template-columns: minmax(0, 1fr);
}

.market {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-10);
  border: 1px solid var(--color-cobalt-surge);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

/* Two surfaces across the three marketplace cards, chosen by the Owner.
   Only Blush Puck and Soft Lilac clear 4.5:1 behind small cobalt text, so an
   earlier three-tint pass left the third card on the canvas colour, where it
   read as unfinished beside the other two. Pairing the last two cards on Soft
   Lilac keeps the colour variety without that dead card.
   Lilac Bloom (#ceb3ff) measures 4.35:1 against Cobalt Surge and is therefore
   not used behind 12-16px text anywhere on this page. */
.market--ozon { background: var(--surface-product-card); }
.market--wb,
.market--ya   { background: var(--surface-input-field); }

.market__kicker {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.market__name {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.market__text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.market__cta {
  margin-top: var(--spacing-20);
  align-self: stretch;
}

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--surface-page-canvas);
  border-top: 1px solid var(--color-cobalt-surge);
  padding: var(--spacing-50) var(--gutter) var(--spacing-40);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-20) var(--spacing-30);
  padding-bottom: var(--spacing-25);
  border-bottom: 1px solid var(--color-cobalt-surge);
}

.footer__mark {
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20) var(--spacing-25);
}

.footer__links a {
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  font-weight: var(--font-weight-medium);
}

.footer__note {
  max-width: 62ch;
  margin-top: var(--spacing-25);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  letter-spacing: var(--tracking-body-sm);
}

.footer__copy {
  margin-top: var(--spacing-20);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 640px) {
  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market__cta { align-self: flex-start; }
}

@media (min-width: 1024px) {
  .markets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}