#brx-content {
      --brand-blue: #0189d4;
      --brand-navy: #001442;
      --brand-white: #ffffff;
      --brand-ice: #eef7fc;
      --brand-sky-soft: #dff0fa;
      --brand-ink: #050d20;
      --brand-cyan: #74d4ff;
      --surface-paper: #f5f8fc;
      --surface-line: #e4ecf5;
      --color-background: rgb(0 20 66 / 2%);
      --color-foreground: var(--brand-ink);
      --color-muted: #566579;
      --color-accent: var(--brand-blue);
      --font-primary: "Outfit", Arial, sans-serif;
      --page-gutter: 10px;
      --section-gap: 10px;
      --gap-small: 5px;
      --gap-medium: 10px;
      --radius-small: 10px;
      --radius-medium: 18px;
      --radius-large: 24px;
      --radius-xlarge: 24px;
      --hero-content-x: 60px;
      --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
    }

    #brx-content * {
      box-sizing: border-box;
    }

    #brx-content {
      scroll-behavior: smooth;
    }

    #brx-content {
      margin: 0;
      min-height: 100vh;
      background: var(--color-background);
      color: var(--color-foreground);
      font-family: var(--font-primary);
      overflow-x: hidden;
    }

    #brx-content img, #brx-content svg, #brx-content video {
      display: block;
      max-width: 100%;
    }

    #brx-content a {
      color: inherit;
      text-decoration: none;
    }

    #brx-content button, #brx-content input, #brx-content textarea, #brx-content select {
      font: inherit;
    }

    #brx-content button {
      border: 0;
      cursor: pointer;
    }

    #brx-content .page {
      width: 100%;
      min-height: 100vh;
    }

    #brx-content .site-section {
      width: 100%;
      margin: 0;
      padding-right: var(--page-gutter);
      padding-left: var(--page-gutter);
    }

    #brx-content .bento-grid {
      display: grid;
      width: 100%;
      gap: var(--section-gap);
    }

    #brx-content .bento-box {
      width: 100%;
      overflow: hidden;
      background: #f5f5f5;
      border-radius: var(--radius-medium);
    }

    #brx-content .bento-box--small {
      border-radius: var(--radius-small);
    }

    #brx-content .bento-box--medium {
      border-radius: var(--radius-medium);
    }

    #brx-content .bento-box--large {
      border-radius: var(--radius-large);
    }

    #brx-content .bento-box--xlarge {
      border-radius: var(--radius-xlarge);
    }

    /* Smart sticky header: transparent over the hero, then a full-width white
       bar on scroll. Hides on scroll-down, reappears on scroll-up. */
    

    /* Smart-sticky mode: fixed to the viewport, past the 50vh threshold. */
    

    

    

    

    

    /* Compact sticky bar: smaller logo, tighter vertical padding. */
    

    

    

    /* On the white bar, swap to the dark logo + dark nav/contact. */
    
    
    
    
    
    /* On the white bar the glass reads navy-tinted instead of white. */
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    /* Tabbed mega-menu (Ürünler: markaya / endikasyona göre) */
    

    

    

    

    
    

    

    

    /* Mega-menu refined design lives after the later .mega-menu block (search
       "Mega-menu — refined, consistent design") so it wins the cascade. */

    

    

    

    /* Right cell: language switcher + contact CTA */
    

    

    

    

    
    

    

    

    /* Hover: frosted-glass treatment, echoing the hero's video play button. */
    

    #brx-content .hero-section {
      height: 85svh;
      min-height: 85svh;
      padding-top: var(--page-gutter);
      padding-bottom: var(--page-gutter);
    }

    #brx-content .hero-section .hero-shell, #brx-content .hero-section .hero-content {
      min-height: calc(85svh - var(--page-gutter) - var(--page-gutter));
    }

    #brx-content .vision-bottom {
      position: absolute;
      top: clamp(190px, 28vh, 280px);
      right: var(--hero-content-x);
      bottom: var(--hero-content-x);
      left: var(--hero-content-x);
      display: grid;
      grid-template-columns: minmax(340px, 420px) minmax(620px, 760px);
      justify-content: space-between;
      align-items: end;
      gap: var(--gap-medium);
    }

    #brx-content .vision-aside-copy {
      max-width: 420px;
      margin: 16px 0 24px;
      color: rgba(0, 20, 66, 0.56);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: -0.2px;
    }

    #brx-content .vision-copy {
      max-width: 680px;
      margin: 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: clamp(22px, 2.2vw, 32px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -1px;
      transform: translateY(-42px);
    }

    

    

    /* Editorial CTA row: statement headline left, copy + action right —
       matches the page's section language instead of a floating centre. */
    

    

    

    

    

    

    /* Glass-circle CTA — the footer sibling of the hero's video play button. */
    

    

    

    

    

    

    

    

    

    

    /* Everything sits above the giant watermark. */
    

    /* Giant clipped wordmark — the footer's signature. */
    

    /* Back-to-top — small glass sibling of the CTA circle. */
    

    

    

    #brx-content .hero-shell {
      --hero-progress: 0%;
      position: relative;
      min-height: calc(100svh - (var(--page-gutter) * 2));
      isolation: isolate;
      overflow: hidden;
      border-radius: var(--radius-xlarge);
      background:
        radial-gradient(circle at 78% 32%, rgba(238, 247, 252, 0.9) 0, rgba(1, 137, 212, 0.28) 24%, transparent 48%),
        radial-gradient(circle at 38% 20%, rgba(1, 137, 212, 0.72) 0, transparent 34%),
        linear-gradient(126deg, #001442 0%, #023a7b 42%, #0189d4 100%);
      color: var(--brand-white);
    }

    #brx-content .hero-title.is-compact {
      font-size: clamp(48px, 5.2vw, 72px);
      letter-spacing: -3.4px;
    }

    #brx-content .gallery-button:focus-visible, #brx-content .slider-button:focus-visible, #brx-content .modal-close:focus-visible {
      outline: 3px solid rgba(255, 255, 255, 0.42);
      outline-offset: 4px;
    }

    @keyframes galleryPlayRingSweep {
      to {
        transform: rotate(1turn);
      }
    }

    #brx-content .video-modal__stage {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(0, 20, 66, 0.8), rgba(1, 137, 212, 0.44)),
        url('/wp-content/uploads/kt-assets/assets/woman-bg.webp') center 32% / contain no-repeat;
    }

    @media (max-width: 860px) {

      

      

      

      #brx-content .vision-section, #brx-content .carousel-section {
        height: auto;
        min-height: auto;
        align-items: stretch;
      }

      #brx-content .vision-copy__body {
        text-align: left;
      }

      

      
    }

    /* ===================================================================
       HERO REDESIGN — premium blue / luxury-minimal + cinematic + GSAP
       =================================================================== */

    /* Ambient background video layer (subtle, behind the navy gradient). */
    #brx-content .hero-bg-video {
      position: absolute;
      inset: 0;
      z-index: -4;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.42;
      filter: saturate(116%) contrast(103%);
      transform: scale(1.04);
      pointer-events: none;
    }

    /* Calmer, more premium shell background (less competing noise). */
    #brx-content .hero-shell {
      background:
        radial-gradient(circle at 82% 26%, rgba(238, 247, 252, 0.5) 0, rgba(1, 137, 212, 0.16) 26%, transparent 52%),
        radial-gradient(circle at 30% 84%, rgba(1, 137, 212, 0.36) 0, transparent 46%),
        linear-gradient(122deg, #001033 0%, #012a5c 46%, #0180c6 100%);
    }

    /* Wider, softer readability veil for the copy column. */
    #brx-content .hero-shell::before {
      background:
        linear-gradient(96deg, rgba(0, 12, 40, 0.9) 0%, rgba(0, 16, 52, 0.46) 40%, rgba(0, 20, 66, 0.04) 74%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 12, 40, 0.36) 100%);
    }

    /* Small authority label above the headline. */
    #brx-content .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 24px;
      color: rgba(255, 255, 255, 0.74);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    #brx-content .hero-eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: rgba(116, 212, 255, 0.85);
    }

    /* Lighter weight + calmer tracking = luxury-minimal display. */
    #brx-content .hero-title {
      font-weight: 500;
      letter-spacing: -2.6px;
    }

    #brx-content .hero-title__line--muted {
      color: rgba(255, 255, 255, 0.55);
      font-weight: 300;
    }

    /* Masked line reveal: outer clips, inner slides up (padding guards the
       descenders of y/ç so overflow:hidden doesn't clip them). */
    #brx-content .hero-title__line {
      display: block;
      overflow: hidden;
      padding-bottom: 0.14em;
      margin-bottom: -0.12em;
    }

    #brx-content .hero-title__inner {
      display: block;
    }

    #brx-content .hero-actions {
      gap: 26px;
      margin-top: 40px;
    }

    /* Premium primary CTA — solid, confident (replaces underline-only). */
    #brx-content .hero-cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      padding: 0 26px;
      border-radius: 999px;
      background: var(--brand-white);
      color: var(--brand-navy);
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.1px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 44px rgba(1, 137, 212, 0.32);
      transition:
        transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
    }

    #brx-content .hero-cta-primary:hover, #brx-content .hero-cta-primary:focus-visible {
      transform: translateY(-2px);
      background: #eaf6ff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 24px 60px rgba(1, 137, 212, 0.46);
    }

    #brx-content .hero-cta-primary svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .hero-cta-primary:hover svg {
      transform: translateX(4px);
    }

    /* GSAP entrance guard — pieces stay hidden until the timeline reveals them.
       fromTo() sets explicit start/end so there is no flash and no dead tween. */
    .hero-anim-ready #brx-content .hero-eyebrow, .hero-anim-ready #brx-content .hero-subline, .hero-anim-ready #brx-content .hero-actions > *, .hero-anim-ready #brx-content .gallery-button, .hero-anim-ready #brx-content .hero-slider, .hero-anim-ready #brx-content .hero-scenes, .hero-anim-ready #brx-content .hero-title__inner {
      opacity: 0;
      will-change: transform, opacity;
    }

    /* ── Hero polish pass (typography rhythm, chrome, composition) ── */
    #brx-content .hero-eyebrow { margin-bottom: 28px; }
    #brx-content .hero-title { line-height: 0.98; }

    #brx-content .hero-subline {
      max-width: 468px;
      margin-top: 28px;
      color: rgba(255, 255, 255, 0.72);
      font-size: clamp(16px, 1.2vw, 18px);
      line-height: 1.6;
    }

    #brx-content .hero-actions { margin-top: 36px; }

    /* Secondary CTA — centered with the primary pill, arrow on hover. */
    #brx-content .hero-cta-secondary {
      align-items: center;
      gap: 9px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      font-weight: 500;
    }

    #brx-content .hero-cta-secondary svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .hero-cta-secondary:hover svg { transform: translateX(3px); }

    /* Refined slider timeline. */
    #brx-content .slider-index { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
    #brx-content .slider-track { height: 1px; }

    /* Play button (Tanıtım Videosu): keep the original draft styling — reverted
       per feedback (text position + backing shadow removed). */

    /* Composition: calmer imagery, crisper copy column, legible bottom edge. */

    /* Force the shell onto its own layer so filtered/transformed descendants
       (blurred bg video, drop-shadowed figure) are clipped by the border-radius
       instead of escaping into square corners. */
    #brx-content .hero-shell {
      transform: translateZ(0);
    }

    #brx-content .hero-bg-video {
      opacity: 0.32;
      filter: saturate(112%) contrast(102%);
      transform: none;
      border-radius: inherit;
    }

    #brx-content .hero-shell::before {
      background:
        linear-gradient(94deg, rgba(0, 10, 32, 0.94) 0%, rgba(0, 14, 46, 0.5) 42%, rgba(0, 20, 66, 0.04) 76%),
        linear-gradient(0deg, rgba(0, 8, 26, 0.55) 0%, rgba(0, 8, 26, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 44%, rgba(0, 12, 40, 0.2) 100%);
    }

    /* ── Per-slide hero scenes (each slide is a full scene, crossfaded) ── */
    #brx-content .hero-scenes {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    #brx-content .hero-scene {
      position: absolute;
      inset: 0;
      opacity: 0;
    }

    #brx-content .hero-scene.is-active {
      opacity: 1;
    }

    /* Full-bleed product/scene photography. */
    #brx-content .hero-scene__cover {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 68% center;
      transform-origin: center;
    }

    /* Ambient background video behind the figure on the human scene. */
    #brx-content .hero-scene__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.42;
      filter: saturate(112%) contrast(102%);
    }

    /* Mirror + reframe the reused human figure so slide 3 reads distinctly. */
    #brx-content .hero-scene--flip .hero-visual {
      transform: translateX(-50%) scaleX(-1);
      object-position: 42% top;
    }

    /* Legibility scrim above the scenes, below the copy/controls. */
    #brx-content .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        /* cinematic vignette for depth */
        radial-gradient(135% 130% at 50% 46%, transparent 52%, rgba(0, 6, 20, 0.5) 100%),
        /* top band keeps the header legible over light product scenes */
        linear-gradient(180deg, rgba(0, 10, 32, 0.72) 0%, rgba(0, 10, 32, 0) 20%),
        /* left band anchors the copy column */
        linear-gradient(94deg, rgba(0, 10, 32, 0.94) 0%, rgba(0, 14, 46, 0.52) 40%, rgba(0, 20, 66, 0.06) 74%),
        /* bottom band supports tags + slider */
        linear-gradient(0deg, rgba(0, 8, 26, 0.66) 0%, rgba(0, 8, 26, 0) 32%);
    }

    /* Fine film grain for premium depth (very subtle). */
    #brx-content .hero-grain {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.06;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 130px 130px;
    }

    /* Real video inside the modal (replaces the static placeholder stage). */
    #brx-content .video-modal__video {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #000;
    }

    @media (prefers-reduced-motion: reduce) {
    }

    /* ── Global scroll-reveal (elements marked [data-reveal] rise into view) ──
       Only hidden when JS + motion are available; no-JS / reduced-motion show
       everything. GSAP's ScrollTrigger reveals them on enter. */
    .js-motion #brx-content [data-reveal] {
      opacity: 0;
      will-change: transform, opacity;
    }

    /* Reusable section kicker. */
    #brx-content .section-kicker {
      display: block;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* ── Product portfolio section ─────────────────────────────────────── */
    #brx-content .products-section {
      padding: clamp(88px, 11vh, 150px) var(--hero-content-x);
      background: var(--surface-paper);
    }

    #brx-content .products-inner {
      width: min(1440px, 100%);
      margin: 0 auto;
    }

    #brx-content .products-head {
      display: grid;
      gap: 18px;
      margin-bottom: clamp(34px, 4vw, 58px);
    }

    #brx-content .products-title {
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(38px, 4.6vw, 62px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.4px;
    }

    #brx-content .products-bento {
      display: grid;
      grid-template-columns: 1.32fr 1fr 1fr;
      grid-template-rows: repeat(2, minmax(196px, 1fr));
      gap: var(--gap-medium);
    }

    #brx-content .product-card {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: space-between;
      padding: 26px;
      overflow: hidden;
      border: 1px solid var(--surface-line);
      border-radius: 20px;
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    }

    #brx-content .product-card:hover, #brx-content .product-card:focus-visible {
      transform: translateY(-4px);
      border-color: rgba(1, 137, 212, 0.4);
      box-shadow: 0 26px 60px rgba(0, 20, 66, 0.13);
      outline: none;
    }

    #brx-content .product-card__head { display: block; }

    #brx-content .product-card__tag {
      display: inline-block;
      color: var(--color-muted);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    #brx-content .product-card__foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin-top: auto;
    }

    #brx-content .product-card__name {
      max-width: 12ch;
      color: var(--brand-navy);
      font-size: clamp(20px, 1.7vw, 25px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.6px;
    }

    #brx-content .product-card__arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid var(--surface-line);
      color: var(--brand-blue);
      transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
    }

    #brx-content .product-card__arrow svg { width: 15px; height: 15px; fill: currentColor; }

    #brx-content .product-card:hover .product-card__arrow {
      background: var(--brand-blue);
      color: #fff;
      transform: translate(2px, -2px);
    }

    /* Feature card (Regenyal) — full-bleed image with overlaid label. */
    #brx-content .product-card--feature {
      grid-column: 1;
      grid-row: 1 / 3;
      padding: 0;
      border: 0;
      color: #fff;
    }

    #brx-content .product-card--feature .product-card__media {
      position: absolute;
      inset: 0;
    }

    #brx-content .product-card--feature img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .product-card--feature:hover img { transform: scale(1.05); }

    #brx-content .product-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(178deg, rgba(0, 12, 40, 0) 38%, rgba(0, 10, 34, 0.86) 100%);
    }

    #brx-content .product-card__content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: auto;
      padding: clamp(28px, 3vw, 40px);
    }

    #brx-content .product-card--feature .product-card__tag { color: rgba(255, 255, 255, 0.72); }

    #brx-content .product-card--feature .product-card__name {
      max-width: 16ch;
      color: #fff;
      font-size: clamp(26px, 2.4vw, 36px);
      font-weight: 600;
      letter-spacing: -1px;
    }

    #brx-content .product-card__cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }

    #brx-content .product-card__cta svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .product-card--feature:hover .product-card__cta svg { transform: translateX(4px); }

    @media (max-width: 900px) {
      #brx-content .products-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
      }
      #brx-content .product-card--feature {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 320px;
      }
      #brx-content .product-card { min-height: 180px; }
    }

    @media (max-width: 560px) {
      #brx-content .products-bento { grid-template-columns: 1fr; }
    }

    /* ── Trust / credibility band — light, spacious, intentional ───────── */
    #brx-content .trust-band {
      padding: clamp(64px, 9vh, 112px) var(--hero-content-x);
      background: var(--surface-paper);
      border-bottom: 1px solid var(--surface-line);
    }

    #brx-content .trust-inner {
      display: grid;
      justify-items: center;
      gap: clamp(30px, 3.6vw, 48px);
      width: min(1040px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    #brx-content .trust-eyebrow {
      margin: 0;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    #brx-content .trust-brands {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 3.4vw, 48px);
      flex-wrap: wrap;
      color: var(--brand-navy);
      font-size: clamp(21px, 2vw, 29px);
      font-weight: 500;
      letter-spacing: -0.6px;
    }

    #brx-content .trust-dot {
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: rgba(1, 137, 212, 0.55);
    }

    #brx-content .trust-chips {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    #brx-content .trust-chip {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 17px;
      border: 1px solid var(--surface-line);
      border-radius: 999px;
      background: #fff;
      color: var(--color-muted);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    /* ── Vision section refinement (copy hacks removed, metrics elevated) ── */
    #brx-content .vision-copy {
      transform: none;
      max-width: 640px;
      text-align: left;
      letter-spacing: -0.5px;
    }

    #brx-content .vision-copy__lead, #brx-content .vision-copy__body {
      display: inline;
      padding: 0;
      text-align: left;
      white-space: normal;
    }

    #brx-content .metrics-grid {
      border: 1px solid var(--surface-line);
      border-radius: 20px;
      box-shadow: 0 26px 64px rgba(0, 20, 66, 0.07);
    }

    #brx-content .metric-divider { background: var(--surface-line); }

    /* ── Pinned horizontal "Avantajlar" gallery ────────────────────────── */
    #brx-content .pinned-section {
      padding: 0;
      overflow: hidden;
      background: var(--surface-paper);
    }

    #brx-content .pinned-wrap {
      display: flex;
      flex-direction: column;
      height: 100svh;
      padding: clamp(96px, 13vh, 140px) 0 clamp(40px, 6vh, 64px);
    }

    #brx-content .pinned-head {
      flex: 0 0 auto;
      display: grid;
      gap: 16px;
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 0 var(--hero-content-x);
    }

    #brx-content .pinned-headline {
      max-width: 760px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 500;
      line-height: 1.02;
      letter-spacing: -2.2px;
    }

    #brx-content .pinned-headline__hl { color: var(--brand-blue); }

    #brx-content .pinned-viewport {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      min-height: 0;
      margin-top: clamp(30px, 5vh, 56px);
      overflow-x: auto;
      scrollbar-width: none;
    }

    #brx-content .pinned-viewport::-webkit-scrollbar { display: none; }
    .js-motion #brx-content .pinned-viewport { overflow: visible; }

    #brx-content .pinned-track {
      display: flex;
      gap: var(--gap-medium);
      align-items: center;
      height: 100%;
      /* First card's left edge lines up with the centred (max 1440) heading's
         left edge, not the raw viewport gutter, so 01 aligns with the title. */
      padding-left: max(var(--hero-content-x), calc((100vw - 1440px) / 2 + var(--hero-content-x)));
      padding-right: var(--hero-content-x);
      will-change: transform;
    }

    #brx-content .benefit-card {
      position: relative;
      display: flex;
      flex: 0 0 auto;
      width: clamp(288px, 30vw, 400px);
      height: min(56vh, 520px);
      flex-direction: column;
      justify-content: space-between;
      gap: 30px;
      padding: 40px 38px;
      border: 1px solid var(--surface-line);
      border-radius: 24px;
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.5s ease;
    }

    #brx-content .benefit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0, 20, 66, 0.12); }

    #brx-content .benefit-card__num {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.12em;
      color: var(--brand-blue);
      font-variant-numeric: tabular-nums;
    }

    #brx-content .benefit-card__body { display: grid; gap: 15px; margin-top: auto; }

    #brx-content .benefit-card__title {
      margin: 0;
      font-size: clamp(23px, 1.9vw, 29px);
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: -0.8px;
    }

    #brx-content .benefit-card__copy {
      margin: 0;
      color: var(--color-muted);
      font-size: 15.5px;
      line-height: 1.5;
      letter-spacing: -0.1px;
    }

    #brx-content .benefit-card--cta {
      background: linear-gradient(165deg, #012a5c, #001033);
      border-color: transparent;
      color: #fff;
      text-decoration: none;
    }

    #brx-content .benefit-card--cta .benefit-card__num {
      display: inline-flex;
      color: var(--brand-cyan);
      -webkit-text-stroke: 0;
      text-stroke: 0;
    }

    #brx-content .benefit-card--cta .benefit-card__num svg { width: 40px; height: 40px; fill: currentColor; }
    #brx-content .benefit-card--cta .benefit-card__title { color: #fff; }
    #brx-content .benefit-card--cta:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(1, 137, 212, 0.32); }

    /* Closing note — quiet editorial paragraph bridging Avantajlar → footer. */
    #brx-content .closing-section {
      padding-top: clamp(96px, 15vh, 200px);
      padding-bottom: clamp(96px, 15vh, 200px);
      background: var(--surface-paper);
    }

    #brx-content .closing-inner {
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 0 var(--hero-content-x);
    }

    #brx-content .closing-rule {
      display: block;
      width: 56px;
      height: 3px;
      margin-bottom: clamp(28px, 4vh, 44px);
      border-radius: 999px;
      background: var(--brand-blue);
    }

    #brx-content .closing-copy {
      max-width: 960px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(21px, 2.4vw, 34px);
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.7px;
    }

    #brx-content .closing-copy strong {
      font-weight: 500;
      color: var(--brand-blue);
    }

    /* ── Reveal footer: the whole page (content-inner) lifts near the bottom to
       reveal a fixed KuarkTek signature panel behind it. ─────────────────── */
    #brx-content .content-wrapper {
      position: relative;
      z-index: 10;
      margin-bottom: 50vh;               /* the gap the fixed panel shows through */
      transform-origin: bottom center;
    }

    #brx-content .content-inner {
      position: relative;
      z-index: 2;
      overflow: hidden;                  /* clips the lifting rounded corners */
      background: #fafbfc;               /* opaque: hides the panel until it lifts */
    }

    @media (max-width: 860px) {
      #brx-content .pinned-wrap { height: auto; padding: clamp(72px, 10vh, 104px) 0 60px; }
      .js-motion #brx-content .pinned-viewport { overflow-x: auto; }
      #brx-content .benefit-card { width: 76vw; }

      /* Let the hero headline wrap on phones (nowrap overflows the viewport). */
      #brx-content .hero-title__line { white-space: normal; }
    }

    /* ===================================================================
       TYPE SYSTEM — one deliberate scale (kicker / title / body / card).
       Overrides the ad-hoc per-section values so nothing feels random.
       =================================================================== */

    /* Eyebrows / kickers on light sections — identical everywhere. */
    #brx-content .section-kicker, #brx-content .vision-kicker, #brx-content .carousel-kicker {
      margin-bottom: 0;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* Section titles (H2) — one clamp, weight and tracking. */
    #brx-content .vision-title, #brx-content .products-title, #brx-content .pinned-headline {
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.025em;
      font-size: clamp(34px, 4.2vw, 56px);
    }

    /* Large statement copy (vision lead) — consistent body-display size. */
    #brx-content .vision-copy {
      font-size: clamp(21px, 2vw, 27px);
      font-weight: 400;
      line-height: 1.42;
      letter-spacing: -0.01em;
    }

    /* Card titles — consistent weight / tracking / rhythm. */
    #brx-content .product-card__name, #brx-content .benefit-card__title, #brx-content .expertise-card__title {
      font-weight: 600;
      line-height: 1.14;
      letter-spacing: -0.02em;
    }

    /* Body copy in cards — one size. */
    #brx-content .product-card__tag, #brx-content .benefit-card__copy, #brx-content .expertise-card__copy {
      letter-spacing: -0.01em;
    }

    /* ===================================================================
       WHITESPACE — more generous, deliberate vertical rhythm.
       =================================================================== */
    #brx-content .products-section { padding-block: clamp(112px, 14vh, 190px); }
    #brx-content .expertise-section { padding-block: clamp(104px, 13vh, 176px); }
    #brx-content .products-head { gap: 22px; margin-bottom: clamp(50px, 6vw, 88px); }
    #brx-content .products-bento { gap: 16px; }
    #brx-content .pinned-wrap { padding-top: clamp(112px, 15vh, 172px); }
    #brx-content .pinned-head { gap: 20px; }
    #brx-content .pinned-viewport { margin-top: clamp(44px, 6vh, 76px); }
    #brx-content .vision-kicker { margin-bottom: 28px; }
    #brx-content .expertise-bento { gap: 16px; }

    /* ── Scroll-scrubbed hero video ─────────────────────────────────────
       White background is keyed out with multiply (works over the light
       trust / vision / products sections). Its currentTime and z-index are
       driven by ScrollTrigger. Base z sits above section bg, below content;
       .svid--front lifts it above content (over "# NEDEN REGECORP"). */
    /* Full-screen with the hero's gutter (like .hero-shell). No fade — it just
       shows while it's in range. Above the hero, non-interactive. */
    /* Big (hero-scale) figure, centred on both axes. Height-based so the woman
       stays large; the keyed white around her reads as breathing room. Visible
       by default (no fade); .is-hidden drops it after the products section. */
    #brx-content .scroll-vid {
      /* Exactly overlaps the hero shell: viewport inset by the page gutter on
         all sides, same radius, object-fit cover. */
      position: fixed;
      top: var(--page-gutter);
      left: var(--page-gutter);
      /* 100% (not 100vw) so the width excludes the scrollbar — matching the
         hero shell's right gutter exactly (100vw sat under the scrollbar). */
      width: calc(100% - var(--page-gutter) * 2);
      height: calc(100svh - var(--page-gutter) * 2);
      z-index: 5;
      object-fit: cover;
      border-radius: var(--radius-xlarge);
      pointer-events: none;
      mix-blend-mode: multiply;
    }

    #brx-content .scroll-vid.svid--front { z-index: 40; }
    /* When it reaches the products section it stops being sticky: JS reparents
       it INTO .products-section, keeping the EXACT same size it had while fixed
       (height-based, centred) so there is no size jump — only fixed→absolute.
       Its taller-than-section figure (clipped by the section's overflow) covers
       the whole background and scrolls up with the page. `top` is set inline. */
    #brx-content .scroll-vid.is-landed {
      /* Same box as while fixed (size/left/radius inherited) — only the
         positioning switches to absolute; `top` set inline. No size jump. */
      position: absolute;
    }

    /* Keep the section copy above the "behind" video, above the section bg. */
    #brx-content .trust-inner, #brx-content .products-inner {
      position: relative;
      z-index: 10;
    }

    @media (max-width: 860px) {
      /* Scroll-scrub + pin is desktop-only; hide the overlay video on phones. */
      #brx-content .scroll-vid { display: none; }
    }

    #brx-content .manifesto-section {
      min-height: 100svh;
      padding-top: var(--page-gutter);
      padding-bottom: var(--page-gutter);
    }

    #brx-content .manifesto-shell {
      display: grid;
      grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
      gap: clamp(44px, 6vw, 126px);
      align-content: start;
      min-height: calc(100svh - (var(--page-gutter) * 2));
      padding: clamp(74px, 8vw, 128px) var(--hero-content-x);
      background: var(--brand-white);
      color: var(--brand-ink);
    }

    #brx-content .manifesto-kicker {
      display: block;
      margin-top: 8px;
      color: var(--brand-navy);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    #brx-content .manifesto-content {
      max-width: 1280px;
    }

    #brx-content .manifesto-statement {
      max-width: 980px;
      margin: 0;
      color: var(--brand-blue);
      font-size: clamp(42px, 5vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -3px;
    }

    #brx-content .manifesto-statement span {
      display: block;
      color: var(--brand-navy);
    }

    #brx-content .manifesto-statement em {
      color: var(--brand-blue);
      font-style: normal;
    }

    #brx-content .manifesto-copy {
      max-width: 1180px;
      margin: clamp(48px, 5vw, 78px) 0 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: clamp(22px, 2.2vw, 32px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -1px;
    }

    #brx-content .manifesto-copy strong, #brx-content .manifesto-copy a {
      color: var(--brand-navy);
      font-weight: 600;
      text-decoration: none;
    }

    #brx-content .vision-section {
      display: flex;
      align-items: center;
      min-height: 100svh;
      padding-top: 0;
    }

    #brx-content .vision-panel {
      position: relative;
      min-height: clamp(620px, 82svh, 820px);
      padding: var(--hero-content-x);
      overflow: hidden;
      border-radius: var(--radius-xlarge);
      background: transparent;
      color: var(--brand-navy);
      box-shadow: none;
    }

    #brx-content .vision-panel--manifesto {
      display: grid;
      grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
      gap: clamp(44px, 6vw, 126px);
      align-content: start;
      padding-top: clamp(92px, 9vw, 132px);
      padding-bottom: clamp(72px, 7vw, 112px);
      overflow: visible;
      border-radius: 0;
      background: transparent;
    }

    #brx-content .vision-kicker {
      display: block;
      margin-bottom: 20px;
      color: var(--brand-blue);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    #brx-content .vision-title {
      max-width: 660px;
      margin: 0;
      color: var(--brand-blue);
      font-size: clamp(42px, 5vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -3px;
    }

    #brx-content .vision-title span {
      display: block;
      color: var(--brand-navy);
    }

    #brx-content .vision-title--about {
      max-width: 1120px;
      color: var(--brand-navy);
    }

    #brx-content .vision-title--about span {
      color: var(--brand-blue);
    }

    #brx-content .vision-plus {
      position: absolute;
      top: 48%;
      color: rgba(0, 20, 66, 0.24);
      font-size: 32px;
      font-weight: 300;
      line-height: 1;
    }

    #brx-content .vision-plus--left {
      left: var(--hero-content-x);
    }

    #brx-content .vision-plus--center {
      left: 50%;
      transform: translateX(-50%);
    }

    #brx-content .vision-bottom {
      position: absolute;
      top: clamp(190px, 28vh, 280px);
      right: var(--hero-content-x);
      bottom: var(--hero-content-x);
      left: var(--hero-content-x);
      display: grid;
      grid-template-columns: minmax(520px, 650px) minmax(520px, 620px);
      justify-content: space-between;
      align-items: end;
      gap: var(--gap-medium);
    }

    #brx-content .vision-bottom--no-metrics {
      grid-template-columns: minmax(520px, 650px) minmax(520px, 620px);
    }

    #brx-content .vision-bottom--focus {
      grid-template-columns: minmax(620px, 760px);
      justify-content: end;
      align-items: start;
      top: clamp(280px, 35vh, 340px);
      bottom: auto;
    }

    #brx-content .vision-manifesto-content {
      display: grid;
      align-content: start;
      max-width: 1260px;
    }

    #brx-content .vision-panel--manifesto .vision-kicker {
      margin-top: 12px;
      margin-bottom: 0;
    }

    #brx-content .vision-main {
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: space-between;
      align-self: stretch;
      gap: var(--gap-medium);
    }

    #brx-content .vision-main--text {
      justify-content: center;
      align-self: center;
      gap: 0;
    }

    #brx-content .vision-panel--manifesto .vision-main--text {
      justify-content: start;
      align-self: auto;
      max-width: 1120px;
      margin-top: clamp(52px, 5vw, 78px);
    }

    #brx-content .vision-aside-title {
      margin: 0;
      color: var(--brand-navy);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -1px;
    }

    #brx-content .vision-aside-copy {
      max-width: 650px;
      margin: 0;
      color: rgba(0, 20, 66, 0.56);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: -0.2px;
    }

    #brx-content .vision-aside-copy-group {
      display: grid;
      gap: 16px;
      max-width: 650px;
      margin: 16px 0 24px;
    }

    #brx-content .vision-button {
      min-height: auto;
      padding-left: 0;
      font-size: 12px;
    }

    #brx-content .vision-button .button__icon {
      display: none;
    }

    #brx-content .vision-copy {
      max-width: 620px;
      margin: 0 0 0 auto;
      color: rgba(0, 20, 66, 0.48);
      font-size: 26px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.5px;
      transform: translateY(-42px);
    }

    #brx-content .vision-main--no-metrics .vision-copy {
      max-width: 620px;
      margin-left: auto;
      font-size: 26px;
    }

    #brx-content .vision-main--no-metrics .vision-button {
      display: inline-flex;
      margin-top: 24px;
    }

    #brx-content .vision-main--text .vision-copy {
      max-width: 1120px;
      transform: none;
    }

    #brx-content .vision-copy__lead {
      display: block;
      padding-left: 0;
      text-align: right;
      white-space: nowrap;
    }

    #brx-content .vision-copy__body {
      display: block;
      text-align: justify;
      text-align-last: left;
    }

    #brx-content .vision-main--no-metrics .vision-copy__body {
      margin-bottom: 24px;
    }

    #brx-content .vision-copy strong {
      color: var(--brand-navy);
      font-weight: 500;
    }

    #brx-content .vision-detail-copy {
      max-width: 680px;
      margin: 36px 0 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: clamp(24px, 2vw, 32px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.9px;
    }

    #brx-content .vision-detail-note {
      max-width: 520px;
      margin: 34px 0 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.2px;
    }

    #brx-content .metrics-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
      gap: var(--gap-medium);
      align-items: center;
      width: min(1280px, 100%);
      margin: 0 auto;
      padding: 30px;
      overflow: hidden;
      border-radius: var(--radius-small);
      background: #fff;
      box-shadow: none;
    }

    #brx-content .vision-main .metrics-grid {
      width: 100%;
      margin: 0;
    }

    #brx-content .metric-card {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 150px;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      background: transparent;
      color: var(--brand-navy);
      align-items: center;
    }

    #brx-content .metric-divider {
      align-self: stretch;
      justify-self: center;
      width: 1px;
      background: rgba(0, 20, 66, 0.05);
    }

    #brx-content .metric-value {
      display: flex;
      align-items: flex-start;
      gap: var(--gap-medium);
      margin: 0 0 20px;
      font-size: clamp(42px, 4.8vw, 52px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -2.6px;
      justify-content: center;
    }

    #brx-content .metric-unit {
      margin-top: 8px;
      color: rgba(0, 20, 66, 0.34);
      font-size: clamp(26px, 2.5vw, 32px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -1px;
    }

    #brx-content .metric-label {
      max-width: 150px;
      margin: 0;
      color: rgba(0, 20, 66, 0.54);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: -0.4px;
      text-align: center;
    }

    #brx-content .expertise-section {
      min-height: 80svh;
      padding: var(--page-gutter);
    }

    #brx-content .expertise-shell {
      position: relative;
      display: grid;
      width: 100%;
      height: calc(100svh - (var(--page-gutter) * 2));
      min-height: calc(100svh - (var(--page-gutter) * 2));
      padding: var(--hero-content-x);
      isolation: isolate;
      overflow: hidden;
      border-radius: var(--radius-xlarge);
      background:
        linear-gradient(135deg, rgba(1, 137, 212, 0.36) 0%, rgba(0, 20, 66, 0.02) 36%, rgba(0, 10, 34, 0.9) 100%),
        linear-gradient(180deg, var(--brand-navy) 0%, #00091f 100%);
      color: var(--brand-white);
    }

    #brx-content .expertise-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 92px 92px;
      opacity: 0.36;
    }

    #brx-content .expertise-shell::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      height: 42%;
      background: linear-gradient(0deg, rgba(1, 137, 212, 0.18), rgba(1, 137, 212, 0));
    }

    #brx-content .expertise-bento {
      display: grid;
      grid-template-columns: minmax(360px, 1.06fr) minmax(220px, 0.52fr) minmax(220px, 0.52fr);
      grid-template-rows: repeat(2, minmax(0, 1fr));
      align-self: stretch;
      justify-self: center;
      width: min(1440px, 100%);
      gap: var(--gap-medium);
      height: 100%;
      min-height: 0;
    }

    #brx-content .expertise-card {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(20px, 2vw, 32px);
      overflow: hidden;
      border-radius: var(--radius-medium);
      background:
        radial-gradient(circle at 50% 0%, rgba(38, 92, 255, 0.5) 0%, rgba(1, 137, 212, 0.24) 34%, rgba(1, 137, 212, 0) 68%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.024)),
        rgba(0, 9, 31, 0.72);
      color: var(--brand-white);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 70px rgba(0, 0, 0, 0.24);
    }

    #brx-content .expertise-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 54% 12%, rgba(62, 104, 255, 0.78) 0%, rgba(1, 137, 212, 0.34) 34%, rgba(1, 137, 212, 0) 68%),
        linear-gradient(120deg, rgba(1, 137, 212, 0.48), rgba(1, 137, 212, 0) 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 6, 22, 0.48) 100%);
      opacity: 0.92;
      pointer-events: none;
    }

    #brx-content .expertise-card > * {
      position: relative;
      z-index: 1;
    }

    #brx-content .expertise-card--primary {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      padding: clamp(28px, 3vw, 48px);
      background:
        radial-gradient(circle at 50% 8%, rgba(49, 91, 255, 0.95) 0%, rgba(1, 137, 212, 0.56) 34%, rgba(0, 20, 66, 0.18) 62%),
        linear-gradient(180deg, rgba(39, 82, 255, 0.72) 0%, rgba(0, 20, 66, 0.58) 52%, rgba(0, 5, 18, 0.94) 100%),
        var(--brand-navy);
    }

    #brx-content .expertise-card--primary::before {
      background:
        radial-gradient(circle at 48% 14%, rgba(87, 143, 255, 0.9) 0%, rgba(38, 92, 255, 0.48) 34%, rgba(0, 10, 34, 0) 66%),
        linear-gradient(155deg, rgba(84, 174, 255, 0.72), rgba(1, 137, 212, 0.16) 42%, rgba(0, 0, 0, 0.34) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: auto, auto, 78px 78px;
    }

    #brx-content .expertise-card--center {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    #brx-content .expertise-card--metric {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
    }

    #brx-content .expertise-card--chart {
      grid-column: 2 / 4;
      grid-row: 2 / 3;
      background:
        radial-gradient(circle at 74% 20%, rgba(60, 102, 255, 0.7) 0%, rgba(1, 137, 212, 0.3) 34%, rgba(1, 137, 212, 0) 62%),
        linear-gradient(135deg, rgba(0, 20, 66, 0.88), rgba(1, 137, 212, 0.38)),
        rgba(0, 7, 24, 0.84);
    }

    #brx-content .expertise-card__index {
      color: rgba(255, 255, 255, 0.46);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    #brx-content .expertise-card--primary .expertise-card__index {
      color: rgba(255, 255, 255, 0.68);
    }

    #brx-content .expertise-card__number {
      margin: auto 0 24px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 170px;
      font-weight: 900;
      line-height: 0.78;
      letter-spacing: 0;
      text-shadow: 0 18px 70px rgba(0, 0, 0, 0.26);
    }

    #brx-content .expertise-card__number span {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, 0.68);
      text-stroke: 1px rgba(255, 255, 255, 0.68);
    }

    #brx-content .expertise-card__content {
      display: grid;
      gap: 14px;
      max-width: 520px;
    }

    #brx-content .expertise-card--center .expertise-card__content {
      justify-items: center;
      max-width: 320px;
    }

    #brx-content .expertise-card__title {
      margin: 0;
      color: var(--brand-white);
      font-size: 34px;
      font-weight: 500;
      line-height: 1.03;
      letter-spacing: 0;
    }

    #brx-content .expertise-card:not(.expertise-card--primary) .expertise-card__title {
      font-size: 25px;
      max-width: 240px;
      letter-spacing: -1px;
      font-weight: 500;
      margin-bottom: 15px;
    }

    #brx-content .expertise-card__copy {
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.46;
      letter-spacing: 0;
    }

    #brx-content .expertise-card__copy strong {
      color: var(--brand-white);
      font-weight: 500;
    }

    #brx-content .expertise-visual {
      display: grid;
      gap: 8px;
      width: min(220px, 70%);
      margin-bottom: 24px;
    }

    #brx-content .expertise-visual span {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(1, 137, 212, 0.52));
      opacity: 0.9;
    }

    #brx-content .expertise-visual span:nth-child(2) {
      width: 72%;
    }

    #brx-content .expertise-visual span:nth-child(3) {
      width: 48%;
    }

    #brx-content .expertise-metric {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 24px;
      color: var(--brand-white);
      font-size: 74px;
      font-weight: 800;
      line-height: 0.88;
      letter-spacing: 0;
    }

    #brx-content .expertise-metric small {
      color: rgba(255, 255, 255, 0.58);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0;
    }

    #brx-content .expertise-chart {
      width: min(260px, 100%);
      margin-bottom: 24px;
      color: #75a7ff;
      opacity: 0.95;
    }

    #brx-content .expertise-chart path, #brx-content .expertise-chart line {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #brx-content .expertise-chart line {
      opacity: 0.36;
      stroke-dasharray: 6 8;
    }

    #brx-content .expertise-shell {
      height: calc(80svh - (var(--page-gutter) * 2));
      min-height: 720px;
      padding: 0;
      overflow: visible;
      background: transparent;
      color: var(--brand-navy);
    }

    #brx-content .expertise-shell::before, #brx-content .expertise-shell::after {
      display: none;
    }

    #brx-content .expertise-bento {
      width: 100%;
      height: 100%;
      grid-template-columns: minmax(460px, 1.18fr) repeat(2, minmax(220px, 0.56fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: var(--gap-medium);
    }

    #brx-content .expertise-card {
      border-radius: var(--radius-xlarge);
      box-shadow: none;
    }

    #brx-content .expertise-card::before {
      display: none;
    }

    #brx-content .expertise-card--primary {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      --expertise-image-blur: 12px;
      isolation: isolate;
      overflow: visible;
      padding: clamp(28px, 3vw, 52px);
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 10, 34, 0.94) 48%, rgba(0, 20, 66, 0.44) 100%),
        radial-gradient(circle at 72% 18%, rgba(1, 137, 212, 0.46), rgba(1, 137, 212, 0) 42%),
        #02050a;
      color: var(--brand-white);
    }

    #brx-content .expertise-card__media {
      position: absolute;
      top: -96px;
      left: 63%;
      right: auto;
      bottom: -1px;
      z-index: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: min(74%, 650px);
      opacity: 1;
      pointer-events: none;
      transform: translateX(-50%);
      mix-blend-mode: normal;
      filter:
        blur(var(--expertise-image-blur))
        saturate(0.86)
        contrast(1.08)
        drop-shadow(0 34px 70px rgba(0, 0, 0, 0.42));
      will-change: filter;
    }

    #brx-content .expertise-card__media img {
      position: relative;
      z-index: 1;
      width: auto;
      height: 100%;
      max-width: none;
    }

    #brx-content .expertise-card__hero-copy {
      position: absolute;
      top: 40%;
      left: clamp(28px, 3vw, 52px);
      max-width: 430px;
      margin: 0;
      color: rgba(255, 255, 255, 0.28);
      font-size: clamp(38px, 3.5vw, 56px);
      font-weight: 500;
      line-height: 0.96;
      letter-spacing: -2px;
      text-align: left;
      transform: translateY(-50%);
    }

    #brx-content .expertise-card__hero-copy > span {
      display: block;
    }

    #brx-content .expertise-card__hero-copy .expertise-word {
      display: inline-block;
    }

    #brx-content .expertise-card__hero-copy .expertise-char {
      color: rgba(255, 255, 255, 0.28);
    }

    #brx-content .expertise-card__footer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    #brx-content .expertise-card__note {
      position: absolute;
      bottom: clamp(28px, 3vw, 52px);
      left: clamp(28px, 3vw, 52px);
      margin: 0;
      color: rgba(255, 255, 255, 0.54);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.2;
    }

    #brx-content .expertise-card--feature {
      grid-column: auto;
      grid-row: auto;
      justify-content: space-between;
      gap: 28px;
      padding: clamp(22px, 2vw, 32px);
      border: 0;
      background: #f5f8fc;
      color: var(--brand-navy);
      transition:
        box-shadow 0.26s ease;
    }

    #brx-content .expertise-card--feature:hover {
      transform: none;
    }

    #brx-content .expertise-card--feature .expertise-card__index {
      color: rgba(0, 20, 66, 0.24);
      font-size: clamp(34px, 3.2vw, 54px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -2px;
      opacity: 0.25;
    }

    #brx-content .expertise-card__ghost-icon {
      position: absolute;
      top: -50px;
      right: -90px;
      width: 210px;
      height: 210px;
      color: rgba(0, 20, 66, 0.045);
      stroke: currentColor;
      fill: none;
      pointer-events: none;
      transform-origin: 58% 42%;
      transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #brx-content .expertise-card--feature:hover .expertise-card__ghost-icon {
      transform: translate(-12px, 10px) rotate(7deg) scale(1.04);
    }

    #brx-content .expertise-card--feature .expertise-card__title {
      max-width: 16ch;
      margin: 0 0 30px;
      color: var(--brand-navy);
      font-size: clamp(20px, 1.7vw, 25px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.6px;
    }

    #brx-content .expertise-card--feature .expertise-card__copy {
      margin: 0;
      color: rgba(0, 20, 66, 0.56);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.55;
      letter-spacing: -0.01em;
      max-width: 350px;
    }

    #brx-content .expertise-card--feature .expertise-card__copy strong {
      color: var(--brand-navy);
      font-weight: 600;
    }

    #brx-content .expertise-card--feature .expertise-card__content {
      gap: 0;
      max-width: 100%;
      margin-top: auto;
    }

    #brx-content .carousel-section {
      display: flex;
      align-items: center;
      min-height: auto;
      padding-top: 90px;
      padding-right: 0;
      padding-bottom: 90px;
    }

    #brx-content .carousel-shell {
      width: 100%;
      padding-right: 0;
      padding-left: var(--hero-content-x);
      color: var(--brand-navy);
    }

    #brx-content .carousel-header-container {
      margin-bottom: 90px;
      padding-right: var(--hero-content-x);
    }

    #brx-content .carousel-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--gap-medium);
    }

    #brx-content .carousel-heading {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

    #brx-content .carousel-kicker {
      display: block;
      margin-bottom: 20px;
      color: var(--brand-navy);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    #brx-content .carousel-headline {
      max-width: 680px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(40px, 4.4vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.8px;
    }

    #brx-content .carousel-headline__highlight {
      color: var(--brand-blue);
    }

    #brx-content .carousel-controls {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-small);
      flex: 0 0 auto;
    }

    #brx-content .carousel-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: var(--radius-small);
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
    }

    #brx-content .carousel-control:hover {
      background: var(--brand-blue);
      color: var(--brand-white);
      transform: translateY(-2px);
    }

    #brx-content .carousel-control:disabled {
      opacity: 0.36;
      pointer-events: none;
    }

    #brx-content .carousel-control svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    #brx-content .carousel-control--prev svg {
      transform: rotate(180deg);
    }

    #brx-content .carousel-control:focus-visible {
      outline: 3px solid rgba(1, 137, 212, 0.32);
      outline-offset: 4px;
    }

    #brx-content .carousel-viewport {
      overflow: visible;
    }

    #brx-content .carousel-track {
      display: flex;
      gap: var(--gap-medium);
      overflow-x: auto;
      padding: 2px 0 10px;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    #brx-content .carousel-track::-webkit-scrollbar {
      display: none;
    }

    #brx-content .carousel-card {
      display: flex;
      min-height: 420px;
      flex: 0 0 calc(28.571% - 14px);
      flex-direction: column;
      justify-content: space-between;
      padding: 14px;
      scroll-snap-align: start;
      overflow: hidden;
      border-radius: var(--radius-medium);
      background: var(--brand-white);
      color: var(--brand-navy);
    }

    #brx-content .carousel-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--gap-medium);
    }

    #brx-content .carousel-card__media {
      display: block;
      width: 82px;
      height: 82px;
      overflow: hidden;
      border-radius: var(--radius-small);
      background: rgba(0, 20, 66, 0.04);
      flex: 0 0 auto;
    }

    #brx-content .carousel-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.48s cubic-bezier(0.19, 1, 0.22, 1);
      will-change: transform;
    }

    #brx-content .carousel-card:nth-child(1) .carousel-card__media img {
      object-position: 38% 22%;
    }

    #brx-content .carousel-card:nth-child(4) .carousel-card__media img {
      object-position: 62% 18%;
    }

    #brx-content .carousel-card:nth-child(5) .carousel-card__media img {
      object-position: center;
    }

    #brx-content .carousel-card:hover .carousel-card__media img {
      transform: scale(1.12);
    }

    #brx-content .carousel-card__mark {
      display: inline-flex;
      width: 34px;
      height: 22px;
      color: var(--brand-navy);
      flex: 0 0 auto;
      opacity: 0.78;
      transform: translateY(1px);
    }

    #brx-content .carousel-card__mark svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #brx-content .carousel-card__mark path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #brx-content .carousel-card__body {
      display: grid;
      gap: 20px;
      margin-top: auto;
      padding: 10px;
    }

    #brx-content .carousel-card__title {
      max-width: 280px;
      margin: 0;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -1.5px;
    }

    #brx-content .carousel-card__copy {
      margin: 0;
      color: rgba(0, 20, 66, 0.58);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.2px;
      transition: color 0.32s ease;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    #brx-content .hero-shell {
      --hero-progress: 0%;
      position: relative;
      min-height: calc(100svh - (var(--page-gutter) * 2));
      isolation: isolate;
      overflow: hidden;
      border-radius: var(--radius-xlarge);
      background: radial-gradient(ellipse at center, #7a8d9e 0%, #657889 38%, #4a5c6d 100%);
      color: var(--brand-white);
    }

    #brx-content .hero-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(90deg, rgba(0, 20, 66, 0.78) 0%, rgba(0, 20, 66, 0.32) 42%, rgba(0, 20, 66, 0.08) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 20, 66, 0.24) 100%);
    }

    #brx-content .hero-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
      background-size: 92px 92px;
      opacity: 0.18;
      -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
      mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
    }

    #brx-content .hero-content {
      position: relative;
      z-index: 3;
      display: flex;
      min-height: inherit;
      flex-direction: column;
      justify-content: center;
      width: min(720px, 52vw);
      padding: var(--hero-content-x);
    }

    #brx-content .hero-title {
      max-width: 720px;
      margin: 0;
      font-size: clamp(52px, 5.7vw, 92px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -4px;
    }

    #brx-content .hero-title.is-compact {
      font-size: clamp(48px, 5.2vw, 84px);
      letter-spacing: -3.4px;
    }

    #brx-content .hero-title__line {
      display: block;
      white-space: nowrap;
      transition:
        opacity 0.34s ease,
        transform 0.34s ease;
    }

    #brx-content .hero-title__line--muted {
      color: rgba(255, 255, 255, 0.72);
      font-weight: 400;
    }

    #brx-content .hero-subline {
      max-width: 480px;
      margin: 30px 0 0;
      color: rgba(255, 255, 255, 0.65);
      font-size: clamp(16px, 1.25vw, 18px);
      font-weight: 300;
      line-height: 1.6;
      transition:
        opacity 0.34s ease,
        transform 0.34s ease;
    }

    #brx-content .hero-shell.is-slide-changing .hero-title__line, #brx-content .hero-shell.is-slide-changing .hero-subline {
      opacity: 0;
      transform: translateY(12px);
    }

    #brx-content .hero-actions {
      display: flex;
      align-items: center;
      gap: var(--gap-medium);
      margin-top: 32px;
      flex-wrap: wrap;
    }

    #brx-content .dark-button, #brx-content .light-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: auto;
      padding: 0 0 7px;
      border-radius: 0;
      background: transparent;
      color: var(--button-text);
      font-size: 15px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      overflow: visible;
    }

    #brx-content .dark-button {
      --button-text: var(--brand-navy);
      --button-underline: currentColor;
    }

    #brx-content .light-button {
      --button-text: var(--brand-white);
      --button-underline: currentColor;
    }

    #brx-content .dark-button::before, #brx-content .light-button::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      height: 1px;
      border-radius: 999px;
      background: var(--button-underline);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.24s ease;
      will-change: transform;
    }

    #brx-content .button__text {
      position: relative;
      z-index: 1;
      color: currentColor;
      white-space: nowrap;
    }

    #brx-content .button__icon {
      display: none;
    }

    #brx-content .dark-button:hover::before, #brx-content .light-button:hover::before, #brx-content .dark-button:focus-visible::before, #brx-content .light-button:focus-visible::before {
      transform: scaleX(1);
    }

    #brx-content .dark-button:focus-visible, #brx-content .light-button:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }

    #brx-content .gallery-button:focus-visible, #brx-content .scroll-indicator:focus-visible, #brx-content .slider-button:focus-visible, #brx-content .modal-close:focus-visible {
      outline: 3px solid rgba(255, 255, 255, 0.42);
      outline-offset: 4px;
    }

    #brx-content .about-hero .hero-content {
      width: min(780px, 54vw);
    }

    #brx-content .about-hero::before {
      background: none;
    }

    #brx-content .about-hero .hero-title {
      max-width: 780px;
      font-size: clamp(42px, 5.7vw, 64px);
      line-height: 1.1;
      letter-spacing: -2px;
    }

    #brx-content .about-hero .hero-title__line {
      white-space: normal;
    }

    #brx-content .about-hero .hero-subline {
      max-width: 520px;
      margin-top: 28px;
      color: rgba(255, 255, 255, 0.72);
      font-size: clamp(16px, 1.2vw, 18px);
      line-height: 1.6;
    }

    #brx-content .hero-visual {
      position: absolute;
      top: clamp(18px, 3.5vh, 44px);
      left: 50%;
      bottom: -22%;
      z-index: 1;
      width: auto;
      height: calc(100% + 12%);
      filter: drop-shadow(0 44px 90px rgba(0, 20, 66, 0.38));
      pointer-events: none;
      transform: translateX(-50%);
    }

    #brx-content .hero-visual img {
      width: auto;
      max-width: none;
      height: 100%;
      object-fit: contain;
      object-position: center top;
    }

    #brx-content .gallery-button {
      position: absolute;
      top: 38%;
      right: clamp(50px, 6vw, 116px);
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 30px;
      min-height: 116px;
      padding: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.88);
    }

    @keyframes galleryPlayRingSweep {
      to {
        transform: rotate(1turn);
      }
    }

    #brx-content .gallery-button__play {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 112px;
      height: 112px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      transform: scale(1);
      transform-origin: center;
      transition:
        background-color 0.32s ease,
        transform 0.32s ease;
    }

    #brx-content .gallery-button:hover .gallery-button__play {
      background: rgba(1, 137, 212, 0.12);
      transform: scale(1.02);
    }

    #brx-content .gallery-button__play::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from 220deg, rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.46) 88deg, rgba(255, 255, 255, 0.08) 182deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.54) 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 1;
      transform-origin: center;
      transition: background 0.32s ease;
      will-change: transform;
    }

    #brx-content .gallery-button:hover .gallery-button__play::before {
      background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
      animation: galleryPlayRingSweep 2.8s linear infinite;
    }

    #brx-content .gallery-button__play::after {
      content: "";
      position: absolute;
      right: 3px;
      bottom: -2px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(1, 137, 212, 0.24), rgba(1, 137, 212, 0) 68%);
      filter: blur(7px);
    }

    #brx-content .gallery-button__play svg {
      position: relative;
      z-index: 1;
      width: 32px;
      height: 32px;
      margin-left: 4px;
      fill: currentColor;
    }

    #brx-content .gallery-button__text {
      max-width: 105px;
      text-align: left;
      font-size: 20px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: 0;
      position: relative;
      left: -50px;
      bottom: -21px;
    }

    #brx-content .hero-slider {
      position: absolute;
      right: var(--hero-content-x);
      bottom: clamp(30px, 5vw, 66px);
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, 0.9);
    }

    #brx-content .hero-slider__timeline {
      display: grid;
      grid-template-columns: auto minmax(220px, 360px) auto;
      align-items: center;
      gap: var(--gap-small);
      min-width: 0;
    }

    #brx-content .hero-slider__nav {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-small);
      flex: 0 0 auto;
    }

    #brx-content .slider-index {
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }

    #brx-content .slider-index--muted {
      color: rgba(255, 255, 255, 0.28);
    }

    #brx-content .slider-track {
      position: relative;
      height: 2px;
      min-width: 0;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
      border-radius: var(--radius-medium);
    }

    #brx-content .slider-track::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--hero-progress);
      background: linear-gradient(90deg, rgba(1, 137, 212, 0.96) 0%, rgba(116, 212, 255, 0.95) 42%, rgba(255, 255, 255, 0.38) 58%, rgba(116, 212, 255, 0.9) 74%, var(--brand-blue) 100%);
      border-radius: inherit;
      transition: width 0.12s linear;
    }

    #brx-content .slider-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: var(--radius-small);
      background: rgba(255, 255, 255, 0.12);
      color: var(--brand-white);
      backdrop-filter: blur(18px);
      transition:
        background-color 0.24s ease,
        color 0.24s ease,
        transform 0.24s ease;
    }

    #brx-content .slider-button:not(:disabled):hover {
      background: var(--brand-white);
      color: var(--brand-blue);
      transform: translateY(-2px);
    }

    #brx-content .slider-button:disabled {
      opacity: 0.36;
      pointer-events: none;
    }

    #brx-content .slider-button svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    #brx-content .slider-button--prev svg {
      transform: rotate(180deg);
    }

    @keyframes scrollCuePulse {
      0%,
      100% {
        opacity: 0.48;
      }

      46% {
        opacity: 1;
      }

      72% {
        opacity: 0.72;
      }
    }

    @keyframes scrollLineTrace {
      0% {
        transform: translateY(-120%);
      }

      56% {
        transform: translateY(260%);
      }

      100% {
        transform: translateY(260%);
      }
    }

    #brx-content .scroll-indicator {
      position: absolute;
      right: var(--hero-content-x);
      bottom: clamp(30px, 5vw, 66px);
      z-index: 4;
      display: grid;
      justify-items: center;
      gap: 14px;
      min-width: 74px;
      color: rgba(255, 255, 255, 0.86);
      animation: scrollCuePulse 2.45s ease-in-out infinite;
      will-change: opacity;
    }

    #brx-content .scroll-indicator__text {
      color: currentColor;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    #brx-content .scroll-indicator__line {
      position: relative;
      display: block;
      width: 1px;
      height: 74px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
      border-radius: 999px;
    }

    #brx-content .scroll-indicator__line::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 36%;
      border-radius: inherit;
      background: var(--brand-white);
      box-shadow: 0 0 18px rgba(116, 212, 255, 0.72);
      animation: scrollLineTrace 2.45s ease-in-out infinite;
    }

    #brx-content .video-modal {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: var(--page-gutter);
      background: rgba(0, 20, 66, 0.74);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.24s ease;
      backdrop-filter: blur(14px);
    }

    #brx-content .video-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    #brx-content .video-modal__panel {
      position: relative;
      width: min(1040px, 100%);
      overflow: hidden;
      border-radius: var(--radius-large);
      background: var(--brand-navy);
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36);
    }

    #brx-content .video-modal__stage {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(0, 20, 66, 0.8), rgba(1, 137, 212, 0.44)),
        url("woman-bg.webp") center 32% / contain no-repeat;
    }

    #brx-content .video-modal__stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.16), transparent 34%);
    }

    #brx-content .video-modal__play {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: var(--brand-white);
      color: var(--brand-blue);
      transform: translate(-50%, -50%);
      box-shadow: 0 20px 60px rgba(0, 20, 66, 0.3);
    }

    #brx-content .video-modal__play svg {
      width: 28px;
      height: 28px;
      margin-left: 5px;
      fill: currentColor;
    }

    #brx-content .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      color: var(--brand-navy);
      font-size: 26px;
      line-height: 1;
    }

    html.modal-open #brx-content {
      overflow: hidden;
    }

    @media (min-width: 1500px) {
      #brx-content .carousel-card {
        flex-basis: calc(22.222% - 14px);
      }
    }

    @media (max-width: 1180px) {
      #brx-content .hero-content {
        width: min(650px, 58vw);
      }

      #brx-content .about-hero .hero-content {
        width: min(650px, 58vw);
      }

      #brx-content .manifesto-shell {
        grid-template-columns: minmax(140px, 240px) minmax(0, 1fr);
        gap: clamp(34px, 5vw, 72px);
      }

      #brx-content .manifesto-statement {
        font-size: clamp(42px, 5vw, 64px);
      }

      #brx-content .expertise-bento {
        grid-template-columns: minmax(340px, 1fr) repeat(2, minmax(180px, 0.58fr));
      }

      #brx-content .expertise-card__hero-copy {
        max-width: 390px;
        font-size: clamp(34px, 4.8vw, 48px);
      }

      

      

      

      

      #brx-content .vision-bottom {
        grid-template-columns: minmax(180px, 300px) minmax(500px, 1fr);
        gap: var(--gap-medium);
      }

      #brx-content .hero-visual {
        left: 50%;
        height: calc(100% + 8%);
      }

      #brx-content .gallery-button {
        right: 40px;
      }

      #brx-content .hero-slider__timeline {
        grid-template-columns: auto minmax(130px, 240px) auto;
      }

      #brx-content .scroll-indicator {
        right: 40px;
      }

      

      

      
    }

    @media (max-width: 860px) {
      #brx-content {
        --page-gutter: 10px;
        --section-gap: 10px;
        --hero-content-x: 45px;
        --radius-xlarge: 24px;
        --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
      }

      

      

      

      

      #brx-content .hero-shell, #brx-content .hero-content {
        min-height: calc(100svh - (var(--page-gutter) * 2));
      }

      #brx-content .vision-panel {
        min-height: auto;
        padding: var(--hero-content-x);
      }

      #brx-content .vision-panel--manifesto {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 82px var(--hero-content-x);
      }

      #brx-content .vision-panel--manifesto .vision-kicker {
        margin-top: 0;
      }

      #brx-content .manifesto-section, #brx-content .vision-section, #brx-content .expertise-section, #brx-content .carousel-section {
        height: auto;
        min-height: auto;
        align-items: stretch;
      }

      #brx-content .manifesto-shell {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: auto;
        padding: 82px var(--hero-content-x);
      }

      #brx-content .manifesto-kicker {
        margin-top: 0;
        font-size: 13px;
      }

      #brx-content .manifesto-statement {
        max-width: 560px;
        font-size: clamp(42px, 9vw, 64px);
      }

      #brx-content .manifesto-copy {
        margin-top: 34px;
        font-size: 17px;
      }

      #brx-content .vision-title {
        max-width: 560px;
      }

      #brx-content .vision-title--about {
        max-width: 680px;
      }

      #brx-content .vision-plus {
        display: none;
      }

      #brx-content .vision-bottom {
        position: static;
        grid-template-columns: 1fr;
        gap: var(--gap-medium);
        margin-top: 120px;
      }

      #brx-content .vision-bottom--focus {
        justify-content: stretch;
        margin-top: 86px;
      }

      #brx-content .vision-panel--manifesto .vision-main--text {
        margin-top: 42px;
      }

      #brx-content .vision-copy {
        max-width: 620px;
        font-size: clamp(22px, 5vw, 34px);
        transform: none;
      }

      #brx-content .vision-detail-copy {
        max-width: 620px;
        font-size: 20px;
        line-height: 1.28;
      }

      #brx-content .vision-detail-note {
        max-width: 620px;
        margin-top: 26px;
        font-size: 16px;
        line-height: 1.5;
      }

      #brx-content .vision-copy__lead {
        text-align: left;
        white-space: normal;
      }

      #brx-content .vision-copy__body {
        text-align: left;
        text-align-last: auto;
      }

      #brx-content .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-medium);
        padding: 32px;
      }

      #brx-content .metric-divider {
        align-self: center;
        justify-self: stretch;
        width: 100%;
        height: 1px;
        min-height: 0;
      }

      #brx-content .metric-card {
        min-height: 140px;
      }

      #brx-content .expertise-shell {
        height: auto;
        min-height: calc(100svh - (var(--page-gutter) * 2));
        padding: 0;
      }

      #brx-content .expertise-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        /* site.css'in ana sayfa mobil kurali (yatay flex carousel) bu sayfaya
           sizar: yan padding, overflow-x (scrollbar olugu acip genisligi yer)
           ve 10px gap. Prototipteki grid davranisina geri cek. Taban kuralin
           height: 100%'u satirlari gerdirir; aspect-ratio genisligi
           yukseklikten hesaplar (kart daralir) → yukseklik icerikten gelsin. */
        height: auto;
        padding-inline: 0;
        overflow: visible;
        gap: 16px;
      }

      #brx-content .expertise-card--primary, #brx-content .expertise-card--feature {
        grid-column: auto;
        grid-row: auto;
      }

      #brx-content .expertise-card--primary {
        grid-column: 1 / -1;
        min-height: 460px;
      }

      #brx-content .expertise-card--feature {
        min-height: 260px;
      }

      /* Mobil: kadin gorseli kartin icinde kalir (masaustunde bilerek tasar,
         dar kolonda sag kenardan tasip yuvarlak koseyi bozuyordu). */
      #brx-content .expertise-card--primary {
        overflow: hidden;
      }

      #brx-content .expertise-card__media {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: none;
        filter: none;
      }

      #brx-content .expertise-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 68% 22%;
      }

      /* Icerik paragraflari urunler sayfasiyla ayni ritimde (16px). */
      #brx-content .expertise-card__copy,
      #brx-content .expertise-card--feature .expertise-card__copy {
        font-size: 16px;
      }

      #brx-content .carousel-section {
        padding-top: 90px;
        padding-bottom: 90px;
      }

      #brx-content .carousel-shell {
        padding-right: 0;
        padding-left: var(--hero-content-x);
      }

      #brx-content .carousel-header-container {
        margin-bottom: 26px;
        padding-right: var(--hero-content-x);
      }

      #brx-content .carousel-header {
        align-items: flex-start;
      }

      #brx-content .carousel-kicker {
        font-size: 13px;
      }

      #brx-content .carousel-headline {
        max-width: 560px;
        font-size: clamp(34px, 7vw, 52px);
        letter-spacing: -2px;
      }

      #brx-content .carousel-card {
        min-height: 390px;
        flex-basis: calc(45.455% - 12px);
      }

      

      

      

      

      #brx-content .hero-content {
        width: 100%;
        justify-content: center;
        padding: var(--hero-content-x);
      }

      #brx-content .about-hero .hero-content {
        width: 100%;
      }

      #brx-content .hero-title {
        max-width: 580px;
      }

      #brx-content .hero-title.is-compact {
        font-size: clamp(40px, 8vw, 58px);
        letter-spacing: -2.4px;
      }

      #brx-content .hero-subline {
        max-width: 500px;
      }

      #brx-content .hero-visual {
        top: auto;
        left: 50%;
        bottom: -88px;
        width: 520px;
        height: auto;
        min-width: 0;
      }

      #brx-content .hero-visual img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }

      #brx-content .gallery-button {
        top: auto;
        right: 24px;
        bottom: 190px;
        min-height: 76px;
      }

      #brx-content .gallery-button__play {
        width: 74px;
        height: 74px;
      }

      #brx-content .gallery-button__play svg {
        width: 22px;
        height: 22px;
      }

      #brx-content .gallery-button__text {
        font-size: 17px;
      }

      #brx-content .hero-slider {
        right: 24px;
        bottom: 24px;
        left: 24px;
      }

      #brx-content .hero-slider__timeline {
        grid-template-columns: auto minmax(90px, 1fr) auto;
        flex: 1 1 auto;
      }

      #brx-content .scroll-indicator {
        right: 24px;
        bottom: 24px;
      }

      #brx-content .scroll-indicator__line {
        height: 62px;
      }

      #brx-content .slider-button {
        width: 46px;
        height: 46px;
      }
    }

    @media (max-width: 560px) {
      #brx-content {
        --hero-content-x: 30px;
        --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
      }

      #brx-content .vision-panel {
        padding: var(--hero-content-x);
      }

      #brx-content .vision-title {
        font-size: clamp(38px, 12vw, 52px);
        letter-spacing: -2.4px;
      }

      #brx-content .vision-bottom {
        margin-top: 86px;
      }

      #brx-content .vision-copy {
        font-size: 23px;
        line-height: 1.2;
        letter-spacing: -0.9px;
      }

      #brx-content .vision-copy__lead {
        padding-left: 0;
      }

      #brx-content .vision-button {
        width: auto;
      }

      #brx-content .metrics-grid {
        grid-template-columns: 1fr;
        padding: 28px;
        border-radius: var(--radius-medium);
      }

      #brx-content .metric-card {
        min-height: 126px;
      }

      #brx-content .metric-value {
        letter-spacing: -2px;
      }

      #brx-content .expertise-shell {
        padding: 0;
      }

      #brx-content .expertise-bento {
        grid-template-columns: 1fr;
        /* site.css'in ana sayfa mobil bento kuralindan sizan yan padding'i
           sifirla; kart kenarlari ustteki bolumle ayni hizaya (10px) oturur. */
        padding-inline: 0;
      }

      /* Mobil: kartlar 3:4 en boy oraninda (icerik tasarsa yukseklik buyur).
         height: auto sart: site.css ana sayfa carousel'inin sabit kart
         yuksekligi (min(56vh, 520px)) sizar ve oran genisligi o yukseklikten
         turetip karti daraltir. */
      #brx-content .expertise-card, #brx-content .expertise-card--primary, #brx-content .expertise-card--feature {
        grid-column: auto;
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 4;
      }

      #brx-content .expertise-card__hero-copy {
        max-width: min(360px, calc(100% - 48px));
        font-size: clamp(30px, 9vw, 38px);
        text-align: left;
      }

      #brx-content .carousel-shell {
        padding-right: 0;
        padding-left: var(--hero-content-x);
      }

      #brx-content .carousel-header {
        gap: var(--gap-medium);
      }

      #brx-content .carousel-kicker {
        font-size: 13px;
        letter-spacing: 0.14em;
      }

      #brx-content .carousel-headline {
        font-size: clamp(32px, 10vw, 46px);
        letter-spacing: -1.8px;
      }

      #brx-content .carousel-control {
        width: 46px;
        height: 46px;
      }

      #brx-content .carousel-card {
        min-height: 390px;
        flex-basis: 82%;
      }

      #brx-content .carousel-card__title {
        font-size: 32px;
      }

      #brx-content .carousel-card__copy {
        font-size: 16px;
      }

      

      

      

      

      

      

      

      

      

      #brx-content .hero-content {
        padding: var(--hero-content-x);
      }

      #brx-content .hero-title {
        font-size: clamp(42px, 14vw, 64px);
      }

      #brx-content .hero-title.is-compact {
        font-size: clamp(28px, 9vw, 44px);
        letter-spacing: -1.6px;
      }

      #brx-content .hero-subline {
        margin-top: 20px;
        font-size: 16px;
      }

      #brx-content .hero-actions {
        margin-top: 24px;
      }

      #brx-content .dark-button, #brx-content .light-button {
        width: fit-content;
        justify-content: flex-start;
        font-size: 14px;
      }

      #brx-content .hero-visual {
        left: 50%;
        bottom: -54px;
        width: 520px;
      }

      #brx-content .gallery-button {
        right: 18px;
        bottom: 204px;
        gap: var(--gap-medium);
      }

      #brx-content .gallery-button__text {
        max-width: 90px;
      }

      #brx-content .manifesto-shell {
        padding: 64px 30px;
      }

      #brx-content .manifesto-statement {
        font-size: clamp(38px, 12vw, 52px);
        letter-spacing: -2.4px;
      }

      #brx-content .manifesto-copy {
        font-size: 16px;
      }

      #brx-content .hero-slider {
        left: 18px;
        right: 18px;
      }

      #brx-content .scroll-indicator {
        right: 18px;
        bottom: 18px;
        gap: 10px;
        min-width: 62px;
      }

      #brx-content .scroll-indicator__text {
        font-size: 10px;
      }

      #brx-content .scroll-indicator__line {
        height: 54px;
      }

      #brx-content .slider-index {
        font-size: 19px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #brx-content *, #brx-content *::before, #brx-content *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    /* ── Mega menu: screen-centered, symmetric, generous whitespace ─────── */
    

    

    /* Invisible hover bridge covers the gap between header and the panel. */
    

    

    /* Symmetric 3-column layout, whitespace instead of dividers. */
    

    /* Simple menus (list + image) carry far less content — keep them compact. */
    

    

    

    

    /* Everything flush-left with the column; the hover pill breathes outward
       via negative margins so the text never gets an unnecessary indent. */
    /* Heading text and item text share the same 14px left inset, so links like
       "Regenyal Idea ve Super Idea" line up under their blue heading. The hover
       pill still fills from the column edge (item bg spans full width). */
    

    

    
    

    

    

    /* Left tabs — clean, hide the legacy chevron, active accent bar. */
    

    

    

    /* Middle panel — the content that opens for the hovered tab. */
    

    

    

    

    

    /* Right preview — larger, framed. */
    

    /* ═══════════════════════════════════════════════════════════════════════
       MEGA-MENU — single authoritative design system.
       This block is the LAST mega-menu CSS in the file, so it fully controls
       the look and overrides the earlier partial definitions above.
       ═══════════════════════════════════════════════════════════════════════ */

    /* Container — no outer padding; inner regions own every bit of spacing. */
    

    /* Kill the legacy full-width hover bridge: while a menu was open it sat
       over the NEIGHBOURING triggers and swallowed their mouseenter, so
       moving across the nav couldn't switch menus. Gap-crossing tolerance is
       handled in JS with a 200ms grace timer instead. */
    

    /* The parent trigger whose menu is open: emphasised text + flipped
       chevron, so it is always clear which item the dropdown belongs to. */
    
    
    
    

    /* Shared morphing sheet: with JS active the menus lose their own chrome —
       one fixed "sheet" carries the background/border/shadow, morphs between
       menus (width/height/x) and points at the parent item with a caret, so
       the dropdown reads as a speech bubble belonging to that trigger. */
    
    #brx-content .mega-sheet {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 29;
      border: 1px solid var(--surface-line);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        0 44px 110px rgba(0, 20, 66, 0.2),
        0 4px 14px rgba(0, 20, 66, 0.06);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      backdrop-filter: blur(24px) saturate(160%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    #brx-content .mega-sheet__caret {
      position: absolute;
      top: -7px;
      left: 0;
      width: 14px;
      height: 14px;
      border-top: 1px solid var(--surface-line);
      border-left: 1px solid var(--surface-line);
      border-radius: 3px 0 0 0;
      background: #fff;
      transform: rotate(45deg);
    }
    
    

    /* Column grids */
    
    

    /* Tabbed primary items: single line (the column is sized for the longest
       label); the hover arrow overlays on the right instead of taking space. */
    
    
    

    /* Column paddings */
    
    
    
    
    

    /* Tabs (Ürünler) — editorial underline tabs sitting on the head divider,
       consistent with the menu's kicker/divider language (no pill chrome). */
    
    
    
    
    
    

    /* Kicker + group titles — aligned with the item text column */
    
    

    /* Item list */
    

    /* Categories + panel links share one clean pill. Scoped under .header-nav
       so it outranks the nav's `.header-nav a { padding: 0 }` reset. */
    
    

    /* The nav bar itself is nowrap; menu items must wrap long labels instead
       of overflowing their column (e.g. "Dermal Dolgu & Biyorevitalizasyon"). */
    

    

    /* Auto-number every category (::before) — replaces the legacy accent bar */
    
    
    

    /* Reveal arrow on hover — categories and links alike */
    
    

    /* Panels (tabbed secondary) */
    
    

    /* Framed preview image — gradient veil + subtle zoom */
    
    
    
    

    /* Opening/switching choreography (container + child stagger) is driven
       entirely by GSAP in initMegaSwitcher — one system, no CSS/JS races.
       Without JS the CSS :hover fallback simply shows the finished state. */

    /* Ürünler head row: tabs + divider */
    
    
    

    /* Caption on the preview image (active item name) */
    

    @media (prefers-reduced-motion: reduce) {
      
    }

    #brx-content .second-section {
      padding-top: var(--page-gutter);
      padding-bottom: var(--page-gutter);
    }

    #brx-content .second-section__shell {
      position: relative;
      display: grid;
      align-content: center;
      padding: clamp(62px, 5.5vw, 92px) var(--hero-content-x);
      overflow: hidden;
      background: #f5f8fc;
      color: var(--brand-navy);
    }

    #brx-content .second-section__intro-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.72fr);
      gap: clamp(42px, 7vw, 118px);
    }

    #brx-content .second-section__intro-grid {
      align-items: end;
    }

    #brx-content .second-section__heading {
      max-width: 760px;
    }

    #brx-content .second-section__kicker {
      margin-bottom: 26px;
    }

    #brx-content .second-section__title {
      max-width: 780px;
      color: var(--brand-navy);
    }

    #brx-content .second-section__title span {
      color: var(--brand-blue);
    }

    #brx-content .second-section__lead {
      max-width: 100%;
      margin: 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: 20px;
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: -0.5px;
      text-align: left;
    }

    #brx-content .second-section__lead strong {
      color: var(--brand-ink);
      font-weight: 400;
    }

    @media (max-width: 860px) {
      #brx-content .second-section__shell {
        min-height: auto;
        padding: 64px var(--hero-content-x);
      }

      #brx-content .second-section__intro-grid {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      #brx-content .second-section__lead {
        max-width: 100%;
        text-align: left;
      }

    }

    @media (max-width: 560px) {
      #brx-content .second-section__shell {
        padding: 54px 30px;
      }

      #brx-content .second-section__title {
        font-size: clamp(38px, 11vw, 52px);
        letter-spacing: -2px;
      }

      #brx-content .second-section__lead {
        font-size: 16px;
      }

    }

    /* ── ABOUT SPLIT HERO ── */
    #brx-content .rg-about-hero-section {
      height: 80svh;
      padding: 10px;
    }

    #brx-content .rg-about-hero {
      position: relative;
      height: 100%;
      overflow: hidden;
      isolation: isolate;
      border-radius: 24px;
      background: #00091f;
      color: #fff;
    }

    #brx-content .rg-about-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: rgba(0, 9, 31, 0.34);
      pointer-events: none;
    }

    #brx-content .rg-about-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
      background-size: 92px 92px;
      opacity: 0.18;
      -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
      mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
      pointer-events: none;
    }

    #brx-content .rg-about-hero__image {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    #brx-content .rg-about-hero .hero-split-layout {
      position: relative;
      z-index: 3;
      display: flex;
      width: 100%;
      min-height: calc(80svh - 20px);
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: space-between;
      gap: 40px;
      padding: 60px 60px clamp(40px, 8vh, 80px);
    }

    #brx-content .rg-about-hero .hero-split-left {
      display: flex;
      min-width: 320px;
      flex: 1 1 50%;
      flex-direction: column;
      align-self: stretch;
      justify-content: space-between;
    }

    #brx-content .rg-about-hero .hero-split-left__top {
      padding-top: 120px;
    }

    #brx-content .rg-about-hero .hero-title {
      max-width: 780px;
      margin: 0;
      color: #fff;
      font-size: clamp(42px, 5.7vw, 72px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -2px;
    }

    #brx-content .rg-about-hero .hero-split-right {
      display: flex;
      min-width: 320px;
      flex: 1 1 40%;
      flex-direction: column;
      align-self: flex-end;
      align-items: flex-end;
      justify-content: flex-end;
    }

    #brx-content .rg-about-hero .hero-split-right__inner {
      width: 100%;
      max-width: 480px;
    }

    #brx-content .rg-about-hero .hero-split-right .hero-subline {
      max-width: 480px;
      margin: 0 0 24px;
      color: rgba(255, 255, 255, 0.72);
      font-size: clamp(16px, 1.2vw, 18px);
      font-weight: 300;
      line-height: 1.6;
    }

    #brx-content .rg-about-hero .hero-split-right .hero-actions {
      justify-content: flex-start;
      margin: 0;
    }

    #brx-content .rg-about-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 0;
      color: rgba(255, 255, 255, 0.56);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      list-style: none;
    }

    #brx-content .rg-about-breadcrumb__item a {
      color: rgba(255, 255, 255, 0.56);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    #brx-content .rg-about-breadcrumb__item a:hover {
      color: #fff;
    }

    #brx-content .rg-about-breadcrumb__item[aria-current="page"] {
      color: rgba(255, 255, 255, 0.92);
    }

    #brx-content .rg-about-breadcrumb__sep {
      color: rgba(255, 255, 255, 0.32);
    }

    @media (max-width: 1024px) {
      /* Sabit 80svh mobilde iceriden kisa kalip CTA'yi alttan kirpiyordu;
         yukseklik icerikten gelir, 80svh tabana iner. */
      #brx-content .rg-about-hero-section {
        height: auto;
        min-height: 80svh;
      }

      #brx-content .rg-about-hero .hero-split-layout {
        flex-direction: column;
        justify-content: center;
        gap: 48px;
        padding: 130px 40px 48px;
      }

      #brx-content .rg-about-hero .hero-split-left, #brx-content .rg-about-hero .hero-split-right {
        min-width: 0;
        flex: none;
        align-self: flex-start;
        align-items: flex-start;
      }

      #brx-content .rg-about-hero .hero-split-left {
        gap: 48px;
      }

      #brx-content .rg-about-hero .hero-split-left__top {
        padding-top: 0;
      }
    }

    @media (max-width: 560px) {
      #brx-content .rg-about-hero .hero-split-layout {
        gap: 36px;
        padding: 112px 24px 36px;
      }

      #brx-content .rg-about-hero .hero-title {
        font-size: clamp(38px, 12vw, 54px);
        letter-spacing: -1.5px;
      }

      /* Mobilde breadcrumb gizli: hero'da yer kaplamasin. */
      #brx-content .rg-about-breadcrumb {
        display: none;
      }
    }

    /* ── REGENYAL RENEWAL SECTION ── */
    #brx-content #regenyalYenilenmeSection .second-section__shell {
      position: relative;
      display: grid;
      align-content: center;
      padding: clamp(62px, 5.5vw, 92px) var(--hero-content-x);
      overflow: hidden;
      background: #fff;
      color: var(--brand-navy);
    }

    #brx-content #regenyalYenilenmeSection .second-section__intro-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.72fr);
      gap: 0;
      align-items: start;
    }

    #brx-content #regenyalYenilenmeSection .second-section__heading {
      grid-column: 1;
      grid-row: 1;
      max-width: 760px;
    }

    #brx-content #regenyalYenilenmeSection .second-section__kicker {
      margin-bottom: 26px;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    #brx-content #regenyalYenilenmeSection .second-section__title {
      max-width: 780px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(34px, 4.2vw, 56px);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.025em;
    }

    #brx-content #regenyalYenilenmeSection .second-section__title span {
      display: block;
      color: var(--brand-blue);
    }

    #brx-content #regenyalYenilenmeSection .second-section__lead-group {
      grid-column: 2;
      grid-row: 2;
      display: grid;
      gap: 24px;
      max-width: 100%;
    }

    #brx-content #regenyalYenilenmeSection .second-section__lead {
      display: block;
      max-width: 100%;
      margin: 0;
      padding: 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: 24px;
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: -0.5px;
      text-align: left;
      white-space: normal;
    }

    #brx-content #regenyalYenilenmeSection .second-section__lead strong {
      color: var(--brand-ink);
      font-weight: 400;
    }

    #brx-content #regenyalYenilenmeSection .vision-aside {
      display: flex;
      min-width: 0;
      flex-direction: column;
      order: 2;
      align-self: stretch;
      padding-top: 40px;
    }

    #brx-content #regenyalYenilenmeSection .vision-aside-copy {
      max-width: 420px;
      color: rgba(0, 20, 66, 0.56);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: -0.2px;
    }

    #brx-content #regenyalYenilenmeSection .vision-aside-copy strong {
      color: var(--brand-navy);
      font-weight: 500;
    }

    #brx-content #regenyalYenilenmeSection .hero-cta-secondary {
      align-items: center;
      gap: 9px;
      font-size: 15px;
      font-weight: 500;
    }

    #brx-content #regenyalYenilenmeSection .hero-cta-secondary svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .hero-cta-secondary--dark {
      color: var(--brand-navy);
    }

    #brx-content .hero-cta-secondary--dark .button__text {
      position: relative;
    }

    #brx-content .hero-cta-secondary--dark .button__text::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #brx-content .hero-cta-secondary--dark:hover .button__text::after {
      transform: scaleX(1);
    }

    @media (max-width: 860px) {
      #brx-content #regenyalYenilenmeSection .second-section__shell {
        min-height: auto;
        padding: 64px var(--hero-content-x);
      }

      #brx-content #regenyalYenilenmeSection .second-section__intro-grid {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      #brx-content #regenyalYenilenmeSection .second-section__heading, #brx-content #regenyalYenilenmeSection .second-section__lead-group {
        grid-column: 1;
        grid-row: auto;
      }

      #brx-content #regenyalYenilenmeSection .second-section__lead {
        max-width: 100%;
        text-align: left;
      }

      #brx-content #regenyalYenilenmeSection .vision-aside {
        padding-top: 0;
      }

      /* Mobil govde paragraflari urunler sayfasi ritminde: 16px. */
      #brx-content #regenyalYenilenmeSection .second-section__lead {
        font-size: 16px;
      }

      #brx-content #regenyalYenilenmeSection .vision-aside-copy {
        font-size: 16px;
      }

    }

    @media (max-width: 560px) {
      #brx-content #regenyalYenilenmeSection .second-section__shell {
        padding: 54px 30px;
      }

      #brx-content #regenyalYenilenmeSection .second-section__title {
        font-size: clamp(38px, 11vw, 52px);
        letter-spacing: -2px;
      }

      #brx-content #regenyalYenilenmeSection .second-section__lead {
        font-size: 16px;
      }

    }


/* ── KuarkTek revizyonu (12 Temmuz): son bolum acik zemine cekildi ── */
#brx-content .expertise-section {
  background: #f5f5f7;
}
#brx-content .expertise-shell {
  background: transparent;
  color: var(--brand-navy);
}
#brx-content .expertise-shell::before,
#brx-content .expertise-shell::after {
  display: none;
}
#brx-content .expertise-card--feature {
  background: #ffffff;
}
#brx-content .expertise-card--feature .expertise-card__title {
  color: var(--brand-navy);
}