/* ======================================================================
 * Карьероуправление — специализированный застройщик, Томск
 * 1. Токены и базовые стили дизайн-системы.
 * 2. Собственные стили страницы.
 * 3. Классы .uN — бывшие инлайновые стили макета.
 * 4. Рукописные правки и адаптив — в custom.css и responsive.css.
 * ==================================================================== */

/* Карьероуправление — Color tokens
   Adapted from the Apple photography-first language: a single accent carries
   every interactive element. Here that accent is the brand red (#D94641),
   pulled directly from the logo; the dark surfaces are navy-tinted (#1A2233,
   also from the logo) rather than Apple's neutral near-black. */

:root {
  /* ---- Brand / Accent (the single interactive color) ---- */
  --brand-red: #d94641;          /* logo red — every link, pill CTA, focus root */
  --brand-red-focus: #e2564f;    /* brighter sibling for the focus ring */
  --brand-red-on-dark: #f2635d;  /* used on dark surfaces where base red dims */
  --brand-red-press: #c23a35;    /* pressed / darker shade */

  /* ---- Ink / Text ---- */
  --ink: #1a2233;                /* logo navy — headlines, body, dark-util fill */
  --body: #1a2233;               /* same tone for all light-surface text */
  --ink-muted-80: #33384a;       /* softer body on pearl surfaces */
  --ink-muted-48: #7a7f8c;       /* disabled text, legal fine-print */
  --on-dark: #ffffff;            /* text on dark tiles + nav */
  --on-dark-muted: #c7ccd6;      /* secondary copy on dark tiles */
  --on-primary: #ffffff;         /* text on the red pill */

  /* ---- Surface ---- */
  --canvas: #ffffff;             /* dominant page canvas */
  --canvas-parchment: #f5f6f8;   /* signature off-white, alternating light tiles */
  --surface-pearl: #fafbfc;      /* ghost-button fill, lighter than parchment */
  --surface-dark-1: #1a2233;     /* primary dark tile (brand navy) */
  --surface-dark-2: #212b40;     /* micro-step lighter dark tile */
  --surface-dark-3: #151b29;     /* micro-step darker, bottom of stack / players */
  --surface-black: #000000;      /* true void — video, global nav bar */
  --surface-chip-translucent: rgba(255, 255, 255, 0.64); /* control chip over photo */

  /* ---- App palette (from product screenshots) ---- */
  /* Warm gold family — the app's premium accent gradient (cream -> gold). */
  --gold-100: #ffebb8;   /* pale warm cream (gradient top) */
  --gold-300: #ffdca6;   /* mid gold */
  --gold-500: #ffd094;   /* deep gold / apricot (gradient bottom) */
  --gold-700: #e6a94f;   /* saturated gold for text/icons on light */
  --gold-ink: #7a5a1e;   /* readable brown-gold text on a gold surface */
  /* Warm charcoal family — the app's dark splash gradient. */
  --charcoal-top: #42404a;  /* gradient top (lifted) */
  --charcoal: #302f37;      /* core dark charcoal-purple */
  --charcoal-deep: #232228; /* deepest step */

  /* ---- Hairlines & borders ---- */
  --divider-soft: #eef0f3;       /* soft ring on secondary buttons */
  --hairline: #e2e5ea;           /* 1px card / chip border */

  /* ---- Semantic aliases (prefer these in components) ---- */
  --accent: var(--brand-red);
  --accent-on-dark: var(--brand-red-on-dark);
  --accent-focus: var(--brand-red-focus);
  --accent-press: var(--brand-red-press);

  --text-heading: var(--ink);
  --text-body: var(--body);
  --text-muted: var(--ink-muted-48);
  --text-on-dark: var(--on-dark);
  --text-on-dark-muted: var(--on-dark-muted);
  --text-link: var(--brand-red);
  --text-link-on-dark: var(--brand-red-on-dark);

  --surface-page: var(--canvas);
  --surface-alt: var(--canvas-parchment);
  --surface-card: var(--canvas);
  --surface-inverse: var(--surface-dark-1);

  --border-hairline: var(--hairline);
  --border-divider: var(--divider-soft);
}

/* Webfonts — Карьероуправление
   The brand's product surfaces are documented in the SF Pro idiom (Apple language).
   SF Pro is proprietary and has no full Cyrillic web license, and this brand is
   Russian-language first, so we ship Inter — the closest open-source SF Pro
   equivalent with complete Cyrillic coverage. On Apple platforms the system stack
   still resolves to the real SF Pro (see --font-display / --font-text stacks).
   >>> SUBSTITUTION FLAGGED: swap in licensed SF Pro binaries if available. */



/* Gradient tokens — Карьероуправление
   Two gradients lifted from the product app screenshots. These are the ONLY
   sanctioned decorative gradients in the system; use them deliberately (premium
   award / mortgage callouts on gold, atmospheric splash/hero on charcoal), not
   as default section fills. Core section rhythm still comes from flat
   light <-> navy tiles. */

:root {
  /* Warm gold splash — cream at top, gold at bottom (app news/awards surface). */
  --grad-gold: linear-gradient(180deg, #ffebb8 0%, #ffdca6 55%, #ffd094 100%);           /* @kind other */
  /* Radial gold glow — for a soft spotlight behind a premium block. */
  --grad-gold-glow: radial-gradient(120% 100% at 50% 0%, #ffebb8 0%, #ffdca6 45%, #ffcf92 100%); /* @kind other */

  /* Warm charcoal splash — the app's dark screen (charcoal to a soft white foot). */
  --grad-charcoal: linear-gradient(180deg, #42404a 0%, #302f37 45%, #232228 100%);        /* @kind other */
  /* The literal app splash: charcoal fading into white at the base. */
  --grad-charcoal-fade: linear-gradient(180deg, #42404a 0%, #302f37 55%, #6b6a72 82%, #ffffff 100%); /* @kind other */

  /* Photo scrim — charcoal veil for text legibility over imagery (not brand navy). */
  --grad-photo-scrim: linear-gradient(180deg, rgba(35,34,40,0.05) 0%, rgba(35,34,40,0.72) 100%); /* @kind other */
}

/* Radius & elevation tokens — Карьероуправление
   Do not mix radii grammars: sm for compact utility, lg for cards, pill for
   actions. Elevation is austere — exactly one drop-shadow, reserved for
   photographic renders resting on a surface. UI depth comes from surface-color
   change (light tile <-> navy tile) and backdrop blur, never card shadows. */

:root {
  /* Corner radius */
  --radius-none: 0px;      /* full-bleed tiles — edges touch, color is the divider */
  --radius-xs: 5px;        /* inline chip (rare) */
  --radius-sm: 8px;        /* dark utility buttons, inline image radius */
  --radius-md: 11px;       /* pearl capsule buttons */
  --radius-lg: 18px;       /* utility / catalog cards */
  --radius-pill: 9999px;   /* primary CTA, search input, chips — the action signal */
  --radius-full: 9999px;   /* circular control chips */

  /* Elevation */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;  /* the only shadow — on imagery */
  --shadow-none: none;

  /* Backdrop blur for sticky / frosted bars */
  --blur-frosted: saturate(180%) blur(20px);  /* @kind other */

  /* Motion — quiet fades + the system press micro-interaction */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 240ms;   /* @kind other */
  --press-scale: 0.96; /* @kind other */  /* transform: scale() on active */
}

/* Spacing tokens — Карьероуправление
   Base unit 8px; sub-base values (4/5) for tight typographic nudges.
   Structural layout snaps to 8/12/17/24/32/48; sections breathe at 80px. */

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* Layout containers */
  --container-text: 980px;   /* text-heavy editorial sections */
  --container-wide: 1440px;  /* product / catalog grids */
  --gutter: 24px;            /* grid gutter between cards */
}

/* Typography tokens — Карьероуправление
   Ladder is 300 / 400 / 500 / 600 / 700. Display sizes carry negative tracking
   for the "tight" headline cadence; body runs at 17px, not 16px. Inter needs a
   touch tighter leading than SF Pro, already baked into the values below. */

:root {
  /* Families — system SF Pro first (real thing on Apple platforms), Inter next */
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Weights */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* Type scale — size / line-height / letter-spacing per role */
  --fs-hero: 56px; /* @kind font */      --lh-hero: 1.07; /* @kind font */     --ls-hero: -0.03em; /* @kind font */
  --fs-display: 40px; /* @kind font */   --lh-display: 1.1; /* @kind font */   --ls-display: -0.022em; /* @kind font */
  --fs-title: 34px; /* @kind font */     --lh-title: 1.12; /* @kind font */    --ls-title: -0.02em; /* @kind font */
  --fs-lead: 28px; /* @kind font */      --lh-lead: 1.18; /* @kind font */     --ls-lead: -0.01em; /* @kind font */
  --fs-lead-airy: 24px; /* @kind font */ --lh-lead-airy: 1.5; /* @kind font */ --ls-lead-airy: 0; /* @kind font */
  --fs-tagline: 21px; /* @kind font */   --lh-tagline: 1.19; /* @kind font */  --ls-tagline: -0.01em; /* @kind font */
  --fs-body-lg: 19px; /* @kind font */   --lh-body-lg: 1.45; /* @kind font */  --ls-body-lg: -0.01em; /* @kind font */
  --fs-body: 17px; /* @kind font */      --lh-body: 1.47; /* @kind font */     --ls-body: -0.014em; /* @kind font */
  --fs-caption: 14px; /* @kind font */   --lh-caption: 1.43; /* @kind font */  --ls-caption: -0.012em; /* @kind font */
  --fs-button: 14px; /* @kind font */    --lh-button: 1.29; /* @kind font */   --ls-button: -0.012em; /* @kind font */
  --fs-fine: 12px; /* @kind font */      --lh-fine: 1.3; /* @kind font */      --ls-fine: -0.006em; /* @kind font */
  --fs-micro: 10px; /* @kind font */     --lh-micro: 1.3; /* @kind font */     --ls-micro: -0.004em; /* @kind font */
}

/* Карьероуправление Design System — global stylesheet entry point.
   Consumers link THIS one file. It is a list of @import lines only:
   the token layer + webfonts. Everything reachable from here ships to
   consuming projects. */









/* --- Стили страницы --- */
* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-text); }
  a { color: var(--brand-red); text-decoration: none; }
  a:hover { color: var(--brand-red-press); }
  @keyframes kb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .kb-marquee-track { animation: none !important; } }
  .kb-burger { display: none; }
  .kb-mobile-menu { display: none; }
  @media (max-width: 1140px) {
    .kb-nav { display: none !important; }
    .kb-burger { display: inline-flex !important; }
  }
  .kb-slider { scrollbar-width: none; -ms-overflow-style: none; }
  .kb-slider::-webkit-scrollbar { display: none; }
  @keyframes kb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
  @media (prefers-reduced-motion: reduce) { .kb-bounce { animation: none !important; } }
  /* Fill-CTA hover must beat the global a:hover so text stays white on the red fill */
  a.kb-cta-solid:hover { background: var(--brand-red-press); color: var(--on-primary); }
  a.kb-cta-ghost { color: var(--accent); background: transparent; border: 1px solid var(--accent); }
  a.kb-cta-ghost:hover { background: var(--accent); color: var(--on-primary); border-color: var(--accent); }

/* --- Стили макета --- */
.u1{font-family: var(--font-text); color: var(--ink); --accent: #0a6e6e; --accent-press: #075454; --accent-focus: #0c7e7e; --accent-on-dark: #2fa39b; --brand-red: #0a6e6e; --brand-red-press: #075454; --brand-red-focus: #0c7e7e; --brand-red-on-dark: #2fa39b; --text-link: #0a6e6e; --text-link-on-dark: #2fa39b;}
.u2{position: sticky; top: 0px; z-index: 50;}
.u3{background: var(--ink); color: var(--on-dark); height: 40px; display: none; align-items: center; font-size: 13px; letter-spacing: -0.006em;}
.u4{max-width: 1440px; margin: 0px auto; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0px 32px;}
.u5{opacity: 0.72;}
.u6{display: flex; gap: 24px; align-items: center;}
.u7{opacity: 0.6;}
.u8{color: var(--on-dark); font-weight: 600;}
.u9{background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline);}
.u10{max-width: 1440px; margin: 0px auto; height: 72px; display: flex; align-items: center; gap: 20px; padding: 0px 32px;}
.u11{display: flex; align-items: center; flex-shrink: 0;}
.u12{height: 36px; width: auto; display: block;}
.u13{display: flex; gap: 22px; flex: 1 1 0%; min-width: 0px; justify-content: center; align-items: center;}
.u14{position: relative; height: 72px; display: flex; align-items: center;}
.u15{font-size: 14px; letter-spacing: -0.012em; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 5px;}
.u16{font-size: 8px; opacity: 0.5;}
.u17{position: absolute; top: 100%; left: -16px; margin-top: -2px; min-width: 220px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 0px; display: none;}
.u18{display: block; padding: 9px 20px; font-size: 14px; color: var(--ink);}
.u18:hover{background:var(--canvas-parchment);}
.u19{position: absolute; top: 100%; left: -16px; margin-top: -2px; min-width: 210px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 0px; display: none;}
.u20{font-size: 14px; letter-spacing: -0.012em; color: var(--ink); font-weight: 500;}
.u21{font-size: 14px; letter-spacing: -0.012em; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 6px;}
.u21:hover{color:var(--brand-red-press);}
.u22{font-size: 15px; line-height: 1;}
.u23{background: var(--accent); color: var(--on-primary); border-radius: 9999px; padding: 11px 20px; font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0;}
.u24{align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 9999px; background: var(--canvas); color: var(--ink); flex-shrink: 0; cursor: pointer; padding: 0px;}
.u25{display: none; border-top: 1px solid var(--hairline); background: var(--canvas);}
.u26{max-width: 1440px; margin: 0px auto; padding: 6px 24px 12px; display: flex; flex-direction: column;}
.u27{padding: 13px 6px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--divider-soft);}
.u28{padding: 13px 6px; font-size: 16px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px;}
.u29{font-size: 15px;}
.u30{display: none; background: linear-gradient(90deg, rgba(26, 34, 51, 0.78) 0%, rgba(26, 34, 51, 0.45) 45%, rgba(26, 34, 51, 0.2) 100%) center center / cover, url("img/hero-bg.webp"); color: var(--on-dark); padding: 44px 32px 54px;}
.u31{max-width: 1440px; margin: 0px auto; display: flex; flex-direction: column; gap: 26px;}
.u32{display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;}
.u33{max-width: 820px;}
.u34{font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark);}
.u35{margin: 10px 0px 0px; font-family: var(--font-display); font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.04;}
.u36{margin: 12px 0px 0px; font-size: 19px; line-height: 1.42; color: var(--on-dark-muted); max-width: 70ch;}
.u37{display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;}
.u38{font-family: var(--font-display); font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; color: var(--on-dark);}
.u39{font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); font-weight: 600;}
.u40{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.u41{background: var(--surface-dark-1); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-height: 186px; color: var(--on-dark);}
.u41:hover{background:var(--surface-dark-2);}
.u42{height: 164px; overflow: hidden; flex-shrink: 0;}
.u43{width: 100%; height: 100%; object-fit: cover; display: block;}
.u44{padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 0%;}
.u45{flex: 1 1 0%;}
.u46{font-size: 17px; font-weight: 600; letter-spacing: -0.014em; color: var(--on-dark);}
.u47{font-size: 13px; color: var(--on-dark-muted); line-height: 1.4; margin-top: 6px;}
.u48{font-size: 14px; color: var(--accent-on-dark); font-weight: 600;}
.u49{height: 164px; overflow: hidden; flex-shrink: 0; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center;}
.u50{width: 100%; height: 100%; object-fit: contain; display: block;}
.u51{height: 164px; flex-shrink: 0; background: var(--canvas-parchment); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0px 16px;}
.u52{height: 40px; max-width: 100%; width: auto;}
.u53{display: block; background: var(--surface-dark-1); color: var(--on-dark); padding: 44px 32px 54px;}
.u54{font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-dark);}
.u55{font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-on-dark); font-weight: 600;}
.u56{background: var(--canvas); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-height: 186px; color: var(--ink);}
.u56:hover{background:var(--surface-pearl);}
.u57{font-size: 17px; font-weight: 600; letter-spacing: -0.014em;}
.u58{font-size: 13px; color: var(--ink-muted-48); line-height: 1.4; margin-top: 6px;}
.u59{font-size: 14px; color: var(--accent); font-weight: 600;}
.u60{background: var(--canvas-parchment); padding: 80px 32px;}
.u61{max-width: 1440px; margin: 0px auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;}
.u62{font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);}
.u63{margin: 10px 0px 0px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); max-width: 20ch;}
.u64{margin: 20px 0px 0px; font-size: 17px; line-height: 1.55; color: var(--ink-muted-80);}
.u65{margin: 16px 0px 0px; font-size: 17px; line-height: 1.55; color: var(--ink-muted-80);}
.u66{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px;}
.u67{background: var(--canvas); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px;}
.u68{color: var(--accent);}
.u69{font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1;}
.u70{font-size: 14px; color: var(--ink-muted-48); line-height: 1.4;}
.u71{display: inline-block; margin-top: 24px; color: var(--accent); font-weight: 600; font-size: 16px;}
.u72{display: flex; align-items: center; gap: 18px; margin-top: 28px; background: var(--grad-gold); border-radius: 18px; padding: 16px 20px;}
.u73{width: 60px; height: 60px; border-radius: 9999px; object-fit: cover; object-position: center top; flex-shrink: 0;}
.u74{font-size: 13px; color: var(--gold-ink); opacity: 0.9; letter-spacing: 0.02em;}
.u75{font-size: 18px; font-weight: 600; color: var(--gold-ink); margin-top: 2px;}
.u76{color: var(--gold-ink); font-weight: 700; font-size: 22px; flex-shrink: 0;}
.u77{display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px;}
.u78{margin: 6px 0px 0px; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);}
.u79{color: var(--accent); font-weight: 600; font-size: 15px; white-space: nowrap;}
.u80{position: relative;}
.u81{display: grid; gap: 20px; grid-auto-rows: max-content; max-height: 867px; overflow-y: auto; padding-bottom: 44px; scroll-behavior: smooth;}
.u82{border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink);}
.u82:hover{background:var(--surface-pearl);}
.u83{padding: 22px 24px 16px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;}
.u84{font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;}
.u85{margin: 0px; font-size: 22px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; color: var(--ink);}
.u86{margin: 0px; font-size: 14px; color: var(--ink-muted-48); line-height: 1.45;}
.u87{padding-top: 2px; color: var(--accent); font-weight: 600; font-size: 14px;}
.u88{overflow: hidden; flex-shrink: 0;}
.u89{width: 100%; height: auto; display: block;}
.u90{border: 1px solid var(--hairline); border-radius: 18px; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; color: var(--ink);}
.u90:hover{background:var(--surface-pearl);}
.u91{width: 92px; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; border-radius: 10px;}
.u92{display: flex; flex-direction: column; gap: 6px; min-width: 0px;}
.u93{font-size: 13px; color: var(--accent); font-weight: 600;}
.u94{margin: 0px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.26; color: var(--ink);}
.u95{width: 92px; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; border-radius: 10px; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center;}
.u96{margin-left: auto; flex-shrink: 0; color: var(--accent); display: flex; align-items: center;}
.u97{border: 1px solid var(--hairline); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink);}
.u97:hover{background:var(--surface-pearl);}
.u98{margin: 0px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.28; color: var(--ink);}
.u99{margin: 0px; font-size: 13px; color: var(--ink-muted-48); line-height: 1.42;}
.u100{border-radius: 9999px; padding: 13px 22px; font-weight: 600; font-size: 15px; text-align: center;}
.u101{position: absolute; left: 0px; right: 0px; bottom: 0px; height: 76px; background: linear-gradient(to bottom, rgba(245,246,248,0), var(--canvas-parchment)); pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;}
.u102{color: var(--accent); display: flex; animation: 1.6s ease-in-out 0s infinite normal none running kb-bounce;}
.u103{background: var(--canvas); padding: 80px 32px;}
.u104{max-width: 1440px; margin: 0px auto;}
.u105{display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;}
.u106{max-width: 760px;}
.u107{margin: 10px 0px 0px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);}
.u108{display: flex; gap: 12px; flex-shrink: 0;}
.u109{width: 48px; height: 48px; border-radius: 9999px; border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0px;}
.u109:hover{background:var(--canvas-parchment);}
.u110{display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 40px -4px 0px; padding: 4px 4px 8px;}
.u111{flex: 0 0 360px; scroll-snap-align: start; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; background: var(--canvas);}
.u112{aspect-ratio: 4 / 3; overflow: hidden; position: relative;}
.u113{position: absolute; top: 12px; left: 12px; background: rgba(10, 110, 110, 0.92); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 9999px;}
.u114{padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.u115{font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); line-height: 1.3;}
.u116{height: 18px; flex-shrink: 0;}
.u117{aspect-ratio: 4 / 3; overflow: hidden;}
.u118{padding: 18px;}
.u119{margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); line-height: 1.3;}
.u120{display: flex; justify-content: center; margin-top: 40px;}
.u121{border-radius: 9999px; padding: 12px 26px; font-size: 15px; font-weight: 600;}
.u122{background: var(--grad-charcoal); color: var(--on-dark); padding: 80px 32px;}
.u123{display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px;}
.u124{font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-on-dark);}
.u125{margin: 8px 0px 0px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--on-dark);}
.u126{color: var(--accent-on-dark); font-weight: 600; font-size: 15px; white-space: nowrap;}
.u127{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.u128{background: var(--canvas); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;}
.u129{aspect-ratio: 3 / 4; overflow: hidden; background: var(--canvas-parchment);}
.u130{width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;}
.u131{padding: 20px; color: var(--ink);}
.u132{margin-top: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink);}
.u133{background: var(--canvas-parchment); padding: 72px 0px;}
.u134{max-width: 1440px; margin: 0px auto; padding: 0px 32px; text-align: center;}
.u135{margin: 8px 0px 0px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);}
.u136{margin: 12px auto 0px; font-size: 16px; color: var(--ink-muted-48); max-width: 52ch;}
.u137{margin-top: 40px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent);}
.u138{display: flex; gap: 24px; width: max-content; animation: 42s linear 0s infinite normal none running kb-marquee;}
.u139{display: flex; gap: 24px; flex-shrink: 0;}
.u140{width: 190px; height: 96px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 0px 22px; flex-shrink: 0;}
.u141{max-width: 130px; max-height: 44px; width: auto; height: auto;}
.u142{max-width: 120px; max-height: 48px; width: auto; height: auto;}
.u143{max-width: 150px; max-height: 52px; width: auto; height: auto;}
.u144{max-width: 130px; max-height: 48px; width: auto; height: auto;}
.u145{max-width: 150px; max-height: 56px; width: auto; height: auto;}
.u146{max-width: 150px; max-height: 60px; width: auto; height: auto;}
.u147{background: var(--surface-dark-1); padding: 80px 32px;}
.u148{max-width: 1440px; margin: 0px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch;}
.u149{margin: 10px 0px 0px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--on-dark);}
.u150{margin-top: 28px; display: flex; flex-direction: column; gap: 22px;}
.u151{display: flex; gap: 14px;}
.u152{color: var(--accent-on-dark); flex-shrink: 0; margin-top: 2px;}
.u153{font-size: 14px; color: var(--on-dark-muted);}
.u154{font-size: 18px; color: var(--on-dark); font-weight: 500; margin-top: 2px;}
.u155{margin-top: 2px; display: flex; flex-direction: column; gap: 2px;}
.u156{font-size: 18px; color: var(--on-dark); font-weight: 600;}
.u157{font-size: 14px; color: var(--on-dark-muted); font-weight: 400;}
.u158{border-radius: 18px; overflow: hidden; background: var(--surface-dark-2); border: 1px solid rgba(255, 255, 255, 0.12); min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--on-dark-muted);}
.u159{font-size: 15px; font-weight: 600; color: var(--on-dark);}
.u160{font-size: 13px;}
.u161{background: var(--canvas-parchment); padding: 56px 32px 36px; border-top: 1px solid var(--hairline);}
.u162{display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between;}
.u163{min-width: 240px; display: flex; flex-direction: column; gap: 16px;}
.u164{height: 34px; width: auto; display: block; align-self: flex-start;}
.u165{font-size: 14px; color: var(--ink-muted-48);}
.u166{display: flex; flex-wrap: wrap; gap: 48px;}
.u167{display: flex; flex-direction: column; min-width: 150px;}
.u168{font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px;}
.u169{font-size: 15px; line-height: 2.1; color: var(--ink-muted-80);}
.u170{display: flex; flex-direction: column; min-width: 170px;}
.u171{font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px;}
.u171:hover{color:var(--brand-red-press);}
.u172{font-size: 14px;}
.u173{margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;}