/* ─── Reset & Variables ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --accent: #E01020;
      --accent-rgb: 224, 16, 32;
      --accent-light: #FF3344;
      --bg: #0a0a0a;
      --surface: rgba(255,255,255,0.03);
      --border: rgba(255,255,255,0.06);
      --text: #ffffff;
      --text-secondary: rgba(255,255,255,0.48);
      --font-head: 'Space Grotesk', sans-serif;
      --font-body: 'Archivo', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    html { scroll-behavior: auto; }

    /* Anchor scroll offset so the fixed navbar doesn't cover section headings */
    section[id] { scroll-margin-top: 80px; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      overflow-x: hidden;
    }

    ::selection {
      background: var(--accent);
      color: #fff;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #111; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--accent), var(--accent-light));
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
    }

    /* ─── Starscape ─── */
    #starscape {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.6;
    }

    #particles {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 1;
    }

    /* ─── Custom Cursor ─── */
    @media (pointer: fine) {
      * { cursor: none !important; }

      /* Dot: white center + red border + dark drop shadow.
         Three layers of contrast so the cursor reads against any background:
         - white core stays visible on red elements (logo POL, accent buttons)
         - red border stays visible on white/light surfaces
         - dark shadow rescues it on pure white backgrounds */
      .cursor-dot {
        position: fixed;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid var(--accent);
        box-shadow: 0 0 0 0.5px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.28);
        pointer-events: none;
        z-index: 999999;
        top: 0; left: 0;
        transform: translate(-50%, -50%);
        transition: width 0.15s ease, height 0.15s ease, box-shadow 0.15s ease, border-width 0.15s ease;
        will-change: transform;
      }

      /* Ring: red border with a thin white inner halo so the ring also
         doesn't vanish over red surfaces. */
      .cursor-ring {
        position: fixed;
        width: 38px; height: 38px;
        border-radius: 50%;
        border: 1.5px solid rgba(224,16,32,0.6);
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.35),
          0 0 12px rgba(224,16,32,0.2);
        pointer-events: none;
        z-index: 999998;
        top: 0; left: 0;
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        will-change: transform;
      }

      /* Mouse-down: dot pops with a red glow halo */
      .cursor-dot.clicking {
        width: 12px; height: 12px;
        box-shadow:
          0 0 0 0.5px rgba(0,0,0,0.18),
          0 0 14px rgba(224,16,32,0.65);
      }
      .cursor-ring.clicking {
        width: 52px; height: 52px;
        border-color: rgba(224,16,32,0.9);
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.5),
          0 0 22px rgba(224,16,32,0.4);
      }

      /* Hovering an interactive element: dot shrinks, ring expands */
      .cursor-dot.hovering {
        width: 6px; height: 6px;
        border-width: 1px;
      }
      .cursor-ring.hovering {
        width: 50px; height: 50px;
        border-color: rgba(224,16,32,0.85);
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.5),
          0 0 20px rgba(224,16,32,0.35);
      }
    }

    /* ─── Scroll Progress Bar ─── */
    #scrollProgress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      z-index: 10000;
      transition: width 0.1s linear;
    }

    /* ─── Loader ─── */
    #loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s ease;
    }

    .loader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .loader-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .loader-brand-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(224,16,32,0.22), rgba(224,16,32,0) 70%);
      animation: loaderPulse 2.4s ease-in-out infinite;
    }
    .loader-brand-icon {
      width: 44px;
      height: 44px;
    }
    @keyframes loaderPulse {
      0%, 100% { transform: scale(1);   opacity: 1; }
      50%      { transform: scale(1.08); opacity: 0.85; }
    }

    .loader-tagline {
      font-family: var(--font-head);
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-top: 4px;
    }
    [data-theme="light"] .loader-tagline { color: rgba(0,0,0,0.55); }

    .loader-brand-text {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 2rem;
      letter-spacing: -0.02em;
    }

    .loader-brand-text .jit { color: #fff; }
    .loader-brand-text .pol { color: var(--accent); }

    .loader-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-top: -12px;
    }

    .loader-text {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .loader-bar-track {
      width: 200px;
      height: 3px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .loader-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ─── Navbar ─── */
    #navbar {
      position: fixed;
      top: 12px;
      left: 0; right: 0;
      z-index: 1000;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      justify-content: center;
    }

    .nav-inner {
      width: 100%;
      max-width: 100%;
      padding: 12px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navbar.nav-scrolled .nav-inner {
      max-width: 1040px;
      background: rgba(10,10,10,0.7);
      border: 1px solid var(--border);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 100px;
      padding: 10px 24px;
    }
    /* Tighten link gap inside the scrolled pill so the extra Pay Online
       button doesn't push the layout past the pill width. */
    #navbar.nav-scrolled .nav-links { gap: 22px; }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      padding-right: 24px;
    }

    .nav-logo svg { width: 28px; height: 28px; }

    /* ─── Logo Flip Animation ─── */
    .nav-icon-flip {
      width: 28px;
      height: 28px;
      position: relative;
      flex-shrink: 0;
    }

    .nav-icon-face {
      position: absolute;
      top: 0; left: 0;
      width: 28px; height: 28px;
      color: var(--text);
    }

    @keyframes iconFlipOut {
      from { transform: scaleX(1); opacity: 1; }
      to   { transform: scaleX(0); opacity: 0; }
    }

    @keyframes iconFlipIn {
      from { transform: scaleX(0); opacity: 0; }
      to   { transform: scaleX(1); opacity: 1; }
    }

    .nav-logo-text {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: -0.01em;
    }

    .nav-logo-text .jit { color: #fff; }
    .nav-logo-text .pol { color: var(--accent); }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      flex: 1;
      justify-content: center;
    }

    .nav-links a {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--text); }

    /* Online-payment shortcut: solid red pill that mirrors the .nav-cta
       (İletişim) styling so it reads as a paired primary action. The ↗
       external-link arrow in the i18n value is the only visual signal that
       distinguishes it from the on-page Contact CTA. */
    .nav-pay {
      background: var(--accent) !important;
      color: #fff !important;
      padding: 8px 20px;
      border-radius: 100px;
      border: none;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      white-space: nowrap;
      min-width: 140px;
      text-align: center;
      box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
      transition: box-shadow 0.3s ease, transform 0.2s ease !important;
    }
    .nav-pay:hover {
      box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45) !important;
      transform: translateY(-1px);
      color: #fff !important;
    }

    .nav-cta {
      background: var(--accent) !important;
      color: #fff !important;
      padding: 8px 20px;
      border-radius: 100px;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      white-space: nowrap;
      min-width: 140px;
      text-align: center;
      box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
      transition: box-shadow 0.3s ease, transform 0.2s ease !important;
    }

    .nav-cta:hover {
      box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45) !important;
      transform: translateY(-1px);
    }

    @media (max-width: 768px) {
      .nav-links { display: none; }
    }

    /* ─── Hero ─── */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 1;
      padding-top: 80px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .hero-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      animation: heroBgDrift 32s ease-in-out infinite alternate;
    }
    @keyframes heroBgDrift {
      0%   { transform: scale(1.00) translateX(0); }
      100% { transform: scale(1.06) translateX(-1.5%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-bg-img { animation: none; }
    }
    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg,
          rgba(10,10,10,0.50) 0%,
          rgba(10,10,10,0.62) 45%,
          rgba(10,10,10,0.88) 100%);
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.12;
    }

    .orb-1 {
      width: 600px; height: 600px;
      background: var(--accent);
      top: -250px; right: -150px;
    }

    .orb-2 {
      width: 400px; height: 400px;
      background: var(--accent);
      bottom: -180px; left: -120px;
      opacity: 0.08;
    }

    .grid-overlay {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 820px;
      padding: 0 24px;
    }

    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      display: inline-block;
    }

    .hero-title {
      font-family: var(--font-head);
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
    }

    .hero-title .accent { color: var(--accent); }

    /* JiT etymology highlight — J / i / T letters in red wherever the
       phrase "Just in Time" appears, to tie the brand name back to the
       concept. Subtle glow so the letters feel intentional, not stray. */
    .jit-letter {
      color: var(--accent);
      text-shadow: 0 0 28px rgba(224, 16, 32, 0.5);
    }

    /* Turkish translation gloss between the two lines of the hero title in
       TR mode. Uppercase + tracked letters + a subtle skew read as a
       deliberate stylistic label. Fixed light color so it stays readable
       on the dark hero photo regardless of theme. */
    .hero-jit-tr {
      display: block;
      margin: 10px 0 8px;
      font-family: var(--font-head);
      font-weight: 500;
      font-size: 0.18em;
      letter-spacing: 0.28em;
      color: rgba(255,255,255,0.65);
      text-transform: uppercase;
      transform: skewX(-12deg);
      transform-origin: center;
    }

    .hero-subtitle {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--text-secondary);
      line-height: 1.65;
      max-width: 580px;
      margin: 0 auto 40px;
    }

    .hero-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      padding: 14px 34px;
      border-radius: 12px;
      border: none;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 0.95rem;
      text-decoration: none;
      box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.3);
      transition: all 0.3s ease;
      display: inline-block;
      cursor: pointer;
    }

    .btn-primary:hover {
      box-shadow: 0 0 36px rgba(var(--accent-rgb), 0.5);
      transform: translateY(-2px);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
      padding: 14px 34px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px;
      font-family: var(--font-head);
      font-weight: 500;
      font-size: 0.95rem;
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-block;
    }

    .btn-secondary:hover {
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.04);
    }

    .hero-trust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 0 16px;
    }
    .hero-trust-item:not(:last-child) {
      border-right: 1px solid var(--border);
    }
    .hero-trust-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    @media (max-width: 600px) {
      .hero-trust-item { font-size: 0.6rem; padding: 0 10px; }
    }

    .scroll-hint {
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      opacity: 0.4;
    }

    .scroll-hint span {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .scroll-arrow {
      width: 1px;
      height: 36px;
      background: linear-gradient(180deg, var(--text) 0%, transparent 100%);
      animation: scrollBounce 1.6s ease-in-out infinite;
    }

    @keyframes scrollBounce {
      0%, 100% { transform: translateY(0); opacity: 0.4; }
      50% { transform: translateY(6px); opacity: 0.8; }
    }

    /* ─── Scroll Animation ─── */
    .scroll-animation {
      height: 385vh;
      position: relative;
      z-index: 1;
    }

    .scroll-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }

    #frameCanvas {
      position: absolute;
      top: 0; left: 0;
    }

    @media (max-width: 1024px) { .scroll-animation { height: 330vh; } }
    @media (max-width: 768px)  { .scroll-animation { height: 275vh; } }

    /* Mobile fade for #frameCanvas image content is done inside drawFrame()
       via canvas composite ops — CSS mask on the canvas element doesn't work
       here because the canvas is full-viewport while the image is letterboxed
       in the middle. See index.html drawFrame() for the destination-out
       gradient that softens the image's top + bottom edges. */

    /* ─── Annotation Cards ─── */
    .annotation-card {
      position: absolute;
      bottom: 8vh;
      left: 5vw;
      max-width: 340px;
      background: rgba(10,10,10,0.55);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: 20px;
      padding: 26px 28px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
      z-index: 10;
    }

    .annotation-card.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .annotation-card.card-right {
      left: auto;
      right: 5vw;
    }

    .card-number {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 2px;
      color: var(--accent);
      margin-bottom: 10px;
    }

    .card-title {
      font-family: var(--font-head);
      font-size: 1.15rem;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .card-desc {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.55;
      margin-bottom: 18px;
    }

    .card-stat {
      border-top: 1px solid var(--border);
      padding-top: 14px;
    }

    .card-stat-number {
      font-family: var(--font-head);
      font-size: 1.9rem;
      font-weight: 700;
      color: var(--accent);
      display: block;
      line-height: 1;
    }

    .card-stat-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 2px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-top: 4px;
      display: block;
    }

    @media (max-width: 768px) {
      .annotation-card {
        bottom: 1.5vh;
        left: 2vw;
        right: 2vw;
        max-width: none;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        border-radius: 14px;
      }
      .annotation-card.card-right {
        left: 2vw;
        right: 2vw;
      }
      .card-desc, .card-stat { display: none; }
      .card-number { margin-bottom: 0; }
      .card-title { font-size: 0.95rem; }
    }

    /* ─── Specs Section ─── */
    #specs {
      position: relative;
      z-index: 1;
      padding: 0;
    }

    .specs-wrap {
      max-width: 1000px;
      margin: 0 auto;
      padding: 120px 32px;
    }

    .section-eyebrow {
      font-family: var(--font-head);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 18px;
      display: block;
      text-align: center;
    }

    .section-title {
      font-family: var(--font-head);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      text-align: center;
      margin-bottom: 64px;
    }

    .specs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      text-align: center;
    }

    .spec-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .spec-number {
      font-family: var(--font-head);
      font-size: 3.2rem;
      font-weight: 700;
      display: block;
      transition: text-shadow 0.3s ease;
      line-height: 1;
    }

    .spec-number.counting {
      text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.55);
    }

    .spec-suffix {
      font-family: var(--font-head);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--accent);
    }

    .spec-label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-top: 4px;
      display: block;
      letter-spacing: 0.02em;
    }

    @media (max-width: 768px) {
      .specs-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .spec-number { font-size: 2.4rem; }
    }

    /* ─── Divider ─── */
    .section-divider {
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), transparent);
      margin: 0 auto 64px;
    }

    /* ─── Certifications strip ─── */
    #certs-strip { position: relative; z-index: 1; padding: 0; }
    .certs-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px 120px; }
    .certs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .cert-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 36px 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      text-decoration: none;
      color: var(--text);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      text-align: center;
    }
    .cert-badge:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--accent-rgb), 0.35);
      box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.12);
    }
    .cert-badge-code {
      font-family: var(--font-head);
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .cert-badge-code .accent { color: var(--accent); }
    .cert-badge-code .reg {
      color: var(--accent);
      font-size: 0.7em;
      vertical-align: super;
      margin-left: 4px;
      font-weight: 700;
    }
    .cert-badge-label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }
    .cert-badge-link {
      font-family: var(--font-head);
      font-size: 0.65rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-top: 6px;
      transition: color 0.2s ease;
    }
    .cert-badge:hover .cert-badge-link { color: var(--accent); }
    @media (max-width: 768px) {
      .certs-grid { grid-template-columns: 1fr; gap: 16px; }
      .certs-wrap { padding: 0 20px 72px; }
    }

    /* ─── Features ─── */
    #features {
      position: relative;
      z-index: 1;
      padding: 80px 32px 120px;
    }

    .features-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 0;
    }

    .feature-card {
      background: var(--surface);
      border: 1px solid var(--border);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 20px;
      padding: 32px;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--accent-rgb), 0.2);
      box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.08);
    }

    .feature-icon {
      font-size: 1.8rem;
      margin-bottom: 18px;
      display: block;
      color: var(--accent);
    }
    .feature-icon svg { width: 28px; height: 28px; display: block; }

    /* ─── Quote product checkbox icons ─── */
    .qcheck-icon { color: var(--accent); display: flex; align-items: center; flex-shrink: 0; }
    .qcheck-icon svg { width: 15px; height: 15px; display: block; }

    .feature-card h3 {
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .feature-card p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    @media (max-width: 900px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px)  { .features-grid { grid-template-columns: 1fr; } }

    /* ─── Industries ─── */
    #industries { position: relative; z-index: 1; padding: 0; }
    .industries-wrap { max-width: 1200px; margin: 0 auto; padding: 100px 32px; }
    @media (max-width: 768px) { .industries-wrap { padding: 64px 20px; } }
    .industries-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .industry-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .industry-card:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--accent-rgb), 0.25);
      box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.08);
    }
    .industry-icon { color: var(--accent); display: block; }
    .industry-icon svg { width: 26px; height: 26px; display: block; }
    .industry-name {
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 0.98rem;
      margin-top: 4px;
    }
    .industry-desc {
      font-size: 0.78rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    @media (max-width: 1024px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px)  { .industries-grid { grid-template-columns: 1fr; } }

    /* ─── About / Story ─── */
    #about { position: relative; z-index: 1; padding: 0; }
    .about-wrap { max-width: 1200px; margin: 0 auto; padding: 100px 32px; }
    .about-grid {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: 56px;
      align-items: center;
    }
    .about-photo {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
      aspect-ratio: 4 / 3;
      position: relative;
    }
    .about-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
    }
    .about-photo:hover img { transform: scale(1.03); }
    .about-content .section-eyebrow,
    .about-content .section-title { text-align: left; }
    .about-content .section-divider { margin: 0 0 40px 0; }
    .about-content .section-title { margin-bottom: 24px; }
    .about-text {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 28px;
    }
    @media (max-width: 900px) {
      .about-grid { grid-template-columns: 1fr; gap: 32px; }
      .about-wrap { padding: 64px 20px; }
    }

    /* ─── Existing-customer payment (QNB Finansbank) ─── */
    #payment { position: relative; z-index: 1; padding: 0; }
    .payment-wrap { max-width: 1100px; margin: 0 auto; padding: 60px 32px 100px; }
    .payment-card {
      display: flex;
      align-items: center;
      gap: 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 24px 28px;
      flex-wrap: wrap;
    }
    .payment-logo {
      flex: 0 0 auto;
      width: 150px;
      height: 96px;
      background: #fff;
      border-radius: 12px;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    /* Inline credit-card icon — flat illustration, no processor branding. */
    .payment-logo .payment-icon {
      width: 104px;
      height: auto;
      display: block;
    }
    .payment-info { flex: 1 1 240px; min-width: 0; }
    .payment-title {
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 1.05rem;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    .payment-desc {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    .payment-cta {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--accent);
      color: #fff;
      text-decoration: none;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 0.92rem;
      padding: 13px 26px;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.25);
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }
    .payment-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 32px rgba(var(--accent-rgb), 0.45);
    }
    @media (max-width: 720px) {
      .payment-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 24px;
        gap: 18px;
      }
      .payment-info { flex: 1 1 auto; text-align: center; }
      .payment-cta { width: 100%; justify-content: center; }
    }

    /* ─── CTA ─── */
    #cta {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 140px 32px;
      overflow: hidden;
    }

    .cta-orb {
      position: absolute;
      width: 700px; height: 700px;
      background: var(--accent);
      border-radius: 50%;
      filter: blur(140px);
      opacity: 0.07;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .cta-content {
      position: relative;
      z-index: 2;
      max-width: 640px;
      margin: 0 auto;
    }

    .cta-content h2 {
      font-family: var(--font-head);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
      line-height: 1.1;
    }

    .cta-content p {
      font-size: 1.05rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 40px;
    }

    .btn-large {
      font-size: 1.05rem;
      padding: 17px 46px;
      border-radius: 14px;
    }

    /* CTA section — direct contact chips under the quote button */
    .cta-contact {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 40px;
    }
    .cta-contact-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.94rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      padding: 11px 22px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: var(--surface);
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .cta-contact-item:hover {
      color: var(--accent);
      border-color: var(--accent);
    }
    .cta-contact-item svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: var(--accent);
    }

    /* ─── Products Grid ─── */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    /* ─── Product Flip Cards ─── */
    .product-card {
      perspective: 1000px;
      cursor: pointer;
      height: 262px;
    }
    .card-inner {
      position: relative;
      width: 100%; height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .product-card:hover .card-inner { transform: rotateY(180deg); }

    .card-front, .card-back {
      position: absolute; inset: 0;
      border-radius: 20px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
    }
    .card-front {
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 28px 28px 22px;
      transition: border-color 0.3s;
      display: flex; flex-direction: column;
    }
    .card-back {
      background: #050810;
      border: 1px solid rgba(224,16,32,0.28);
      transform: rotateY(180deg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 12px 12px 8px;
      gap: 6px;
    }
    .card-back-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(224,16,32,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224,16,32,0.05) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .product-anim { width: 92%; height: auto; position: relative; z-index: 1; }
    .card-back-label {
      font-family: var(--font-mono); font-size: 0.62rem;
      color: rgba(96,200,255,0.75); letter-spacing: 0.12em;
      text-transform: uppercase; position: relative; z-index: 1;
    }

    .product-card-header {
      display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    }
    .product-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; perspective: 240px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22)); }
    .product-icon svg { width: 100%; height: 100%; display: block; transform: rotateX(6deg) rotateY(-10deg); transform-style: preserve-3d; transform-origin: center center; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
    .product-card:hover .product-icon svg { transform: rotateX(-4deg) rotateY(14deg) scale(1.05); filter: brightness(1.08); }
    @media (prefers-reduced-motion: reduce) { .product-icon svg { transition: none !important; transform: rotateX(6deg) rotateY(-10deg) !important; } }
    .product-card h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
    .product-card p  { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 18px; flex: 1; }

    .product-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .product-tags span {
      font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.04em;
      color: var(--accent); background: rgba(var(--accent-rgb),0.08);
      border: 1px solid rgba(var(--accent-rgb),0.18);
      border-radius: 100px; padding: 3px 10px;
    }

    @media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px)  { .products-grid { grid-template-columns: 1fr; } }

    /* ─── Theme Toggle ─── */
    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      border-radius: 100px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .theme-toggle:hover {
      color: var(--text);
      border-color: var(--border);
      background: var(--surface);
    }
    .theme-toggle svg { width: 16px; height: 16px; display: block; transition: transform 0.4s ease; }
    .theme-toggle:hover svg { transform: rotate(20deg); }
    .theme-toggle .icon-sun  { display: none; }
    .theme-toggle .icon-moon { display: block; }
    [data-theme="light"] .theme-toggle .icon-sun  { display: block; }
    [data-theme="light"] .theme-toggle .icon-moon { display: none; }

    /* ─── Light Mode Variables ─── */
    [data-theme="light"] {
      --bg: #f4f2ee;
      --surface: rgba(0,0,0,0.04);
      --border: rgba(0,0,0,0.09);
      --text: #111111;
      --text-secondary: rgba(0,0,0,0.52);
    }

    /* Light mode — targeted hardcoded overrides */
    [data-theme="light"] ::-webkit-scrollbar-track { background: #dedad4; }
    [data-theme="light"] #starscape { opacity: 0.04; }
    [data-theme="light"] #particles { opacity: 0.05; }
    [data-theme="light"] .grid-overlay {
      background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    }
    [data-theme="light"] .loader-bar-track { background: rgba(0,0,0,0.08); }
    [data-theme="light"] #navbar.nav-scrolled .nav-inner {
      background: rgba(244,242,238,0.88);
      border-color: rgba(0,0,0,0.1);
    }
    [data-theme="light"] .nav-logo-text .jit { color: #111; }
    [data-theme="light"] .loader-brand-text .jit { color: #111; }
    [data-theme="light"] .footer-brand-text .jit { color: #111; }
    [data-theme="light"] .footer-copy { color: rgba(0,0,0,0.35); }
    [data-theme="light"] .lang-btn.active {
      background: rgba(0,0,0,0.07);
      border-color: rgba(0,0,0,0.14);
      color: #111;
    }
    [data-theme="light"] .btn-secondary {
      border-color: rgba(0,0,0,0.22);
      color: var(--text);
    }
    [data-theme="light"] .btn-secondary:hover {
      border-color: rgba(0,0,0,0.38);
      background: rgba(0,0,0,0.05);
      color: var(--text);
    }

    /* When light theme is active AND the navbar is still floating over the
       hero photo (not scrolled into its pill state), keep the nav controls
       light so they read against the dark factory image. Once the user
       scrolls past the hero, .nav-scrolled kicks in and the dark-pill
       background takes over (the existing .nav-scrolled rule restores
       theme-appropriate colors). */
    [data-theme="light"] #navbar:not(.nav-scrolled) .nav-logo-text .jit { color: #fff; }
    [data-theme="light"] #navbar:not(.nav-scrolled) .nav-icon-face { color: #fff; }
    [data-theme="light"] #navbar:not(.nav-scrolled) .nav-links a { color: rgba(255,255,255,0.85); }
    [data-theme="light"] #navbar:not(.nav-scrolled) .nav-links a:hover { color: #fff; }
    [data-theme="light"] #navbar:not(.nav-scrolled) .theme-toggle { color: #fff; }
    [data-theme="light"] #navbar:not(.nav-scrolled) .lang-btn {
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.18);
    }
    [data-theme="light"] #navbar:not(.nav-scrolled) .lang-btn.active {
      color: #fff;
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.32);
    }

    /* Hero sits over a fixed dark factory photo, so its text must stay light
       in light theme too — otherwise it disappears against the photo. */
    [data-theme="light"] .hero-title { color: #fff; }
    [data-theme="light"] .hero-subtitle { color: rgba(255,255,255,0.82); }
    [data-theme="light"] .hero-trust-item span { color: rgba(255,255,255,0.85); }
    [data-theme="light"] .scroll-hint,
    [data-theme="light"] .scroll-hint span { color: rgba(255,255,255,0.55); }
    [data-theme="light"] .hero-content .btn-secondary {
      border-color: rgba(255,255,255,0.22);
      color: #fff;
      background: transparent;
    }
    [data-theme="light"] .hero-content .btn-secondary:hover {
      border-color: rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.10);
      color: #fff;
    }
    [data-theme="light"] .hero-stat-card {
      background: rgba(244,242,238,0.85);
      border-color: rgba(0,0,0,0.1);
    }
    [data-theme="light"] .card-back {
      background: #e5e1da;
    }
    /* Animation text: the pale colours are washed out on the light card-back.
       CSS fill overrides the inline SVG fill attribute, light mode only —
       dark mode keeps the original bright/pale palette untouched. */
    [data-theme="light"] .product-anim text[data-i18n] { fill: #1f5c8c; }   /* tag label */
    [data-theme="light"] .card-back-label             { color: #1f5c8c; }   /* system name */
    [data-theme="light"] .product-anim text[fill="#3080E8"] { fill: #1850b0; }            /* POLYOL */
    [data-theme="light"] .product-anim text[fill="#D01828"] { fill: #b3101e; }            /* ISO */
    [data-theme="light"] .product-anim text[fill="rgba(255,140,140,0.6)"] { fill: #c62828; } /* SLOW RECOVERY caption */
    [data-theme="light"] .sol-panel {
      background: #edeae4;
      border: 1px solid rgba(0,0,0,0.1);
    }
    [data-theme="light"] .sol-backdrop { background: rgba(180,175,168,0.65); }
    [data-theme="light"] .sol-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
    [data-theme="light"] .sol-eyebrow { color: var(--accent); }
    [data-theme="light"] .quote-panel {
      background: #edeae4;
      border: 1px solid rgba(0,0,0,0.1);
    }
    [data-theme="light"] .quote-backdrop { background: rgba(180,175,168,0.65); }
    [data-theme="light"] .quote-close {
      background: rgba(0,0,0,0.06);
      color: var(--text);
    }
    [data-theme="light"] .quote-close:hover { background: rgba(224,16,32,0.12); color: var(--accent); }
    /* ── Quote modal light-mode contrast fixes ── */
    [data-theme="light"] .quote-panel h2 { color: #111; }
    [data-theme="light"] .quote-step h3 { color: rgba(0,0,0,0.78); }
    [data-theme="light"] .quote-step-label { color: rgba(0,0,0,0.55); }
    [data-theme="light"] .quote-progress-track { background: rgba(0,0,0,0.08); }
    [data-theme="light"] .quote-check-label {
      background: rgba(0,0,0,0.025);
      border: 1px solid rgba(0,0,0,0.10);
      color: rgba(0,0,0,0.82);
    }
    [data-theme="light"] .quote-check-label:hover {
      border-color: rgba(224,16,32,0.45);
      background: rgba(224,16,32,0.05);
    }
    [data-theme="light"] .quote-check-label.checked {
      border-color: rgba(224,16,32,0.65);
      background: rgba(224,16,32,0.08);
      color: rgba(0,0,0,0.92);
    }
    [data-theme="light"] .quote-check-box {
      border-color: rgba(0,0,0,0.30);
      background: #fff;
    }
    [data-theme="light"] .quote-check-label.checked .quote-check-box {
      background: var(--accent);
      border-color: var(--accent);
    }
    [data-theme="light"] .quote-field label { color: rgba(0,0,0,0.60); }
    [data-theme="light"] .quote-field input,
    [data-theme="light"] .quote-field select,
    [data-theme="light"] .quote-field textarea {
      background: #fff !important;
      border-color: rgba(0,0,0,0.15) !important;
      color: #111 !important;
      -webkit-text-fill-color: #111 !important;
      caret-color: #111 !important;
      color-scheme: light !important;
    }
    [data-theme="light"] .quote-field select option { background: #fff; color: #111; }
    [data-theme="light"] .quote-field input::placeholder,
    [data-theme="light"] .quote-field textarea::placeholder {
      color: rgba(0,0,0,0.45) !important;
      -webkit-text-fill-color: rgba(0,0,0,0.45) !important;
      opacity: 1 !important;
    }
    [data-theme="light"] .quote-btn-back {
      color: rgba(0,0,0,0.55);
      border-color: rgba(0,0,0,0.12);
    }
    [data-theme="light"] .quote-btn-back:hover { color: rgba(0,0,0,0.85); }
    [data-theme="light"] .quote-consent { color: rgba(0,0,0,0.65); }
    [data-theme="light"] .quote-success h3 { color: #111; }
    [data-theme="light"] .quote-success p { color: rgba(0,0,0,0.65); }
    [data-theme="light"] .form-input,
    [data-theme="light"] .form-textarea,
    [data-theme="light"] .form-select {
      background: rgba(255,255,255,0.7);
      border-color: rgba(0,0,0,0.12);
      color: #111;
    }
    [data-theme="light"] .form-input:focus,
    [data-theme="light"] .form-textarea:focus,
    [data-theme="light"] .form-select:focus {
      border-color: rgba(224,16,32,0.45);
    }
    [data-theme="light"] .form-input::placeholder,
    [data-theme="light"] .form-textarea::placeholder { color: rgba(0,0,0,0.3); }
    [data-theme="light"] .specs-table { border-color: rgba(0,0,0,0.08); }
    [data-theme="light"] .spec-row { border-color: rgba(0,0,0,0.06); }
    [data-theme="light"] .spec-row:hover { background: rgba(0,0,0,0.03); }
    [data-theme="light"] .map-placeholder {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.09);
    }
    [data-theme="light"] .nav-mobile-menu {
      background: rgba(244,242,238,0.97);
      border-color: rgba(0,0,0,0.1);
    }
    [data-theme="light"] .nav-mobile-menu a {
      color: rgba(0,0,0,0.78);
    }
    [data-theme="light"] .nav-mobile-menu a:hover {
      color: #000;
      background: rgba(0,0,0,0.05);
    }
    [data-theme="light"] .nav-mobile-menu .mob-cta {
      color: #fff !important;
    }
    [data-theme="light"] .nav-mobile-close {
      background: rgba(0,0,0,0.05);
      border-color: rgba(0,0,0,0.12);
      color: rgba(0,0,0,0.55);
    }
    [data-theme="light"] .nav-mobile-close:hover {
      color: #000;
      background: rgba(0,0,0,0.08);
    }

    /* ─── Nav Right Group ─── */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      min-width: 160px;
      justify-content: flex-end;
    }

    /* ─── Language Switcher ─── */
    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
    }

    .lang-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      font-weight: 500;
      padding: 5px 9px;
      border-radius: 100px;
      cursor: pointer;
      transition: all 0.2s ease;
      line-height: 1;
    }

    .lang-btn .flag { display: flex; align-items: center; }
    .lang-btn .flag svg { width: 20px; height: 14px; border-radius: 2px; display: block; }

    .lang-btn:hover {
      color: var(--text);
      border-color: var(--border);
    }

    .lang-btn.active {
      color: var(--text);
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.1);
    }

    /* ─── Gallery ─── */
    #gallery { padding: 100px 0; position: relative; z-index: 1; }
    .gallery-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 40px;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 280px 280px;
      gap: 12px;
      margin-top: 40px;
    }
    .gallery-item {
      overflow: hidden; border-radius: 14px;
      cursor: pointer;
    }
    .gallery-item img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
    }
    .gallery-item:hover img { transform: scale(1.05); }
    .gi-1 { grid-column: 1; grid-row: 1; }
    .gi-4 { grid-column: 2; grid-row: 1; }
    .gi-3 { grid-column: 1; grid-row: 2; }
    .gi-5 { grid-column: 2; grid-row: 2; }
    @media (max-width: 520px) {
      .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
      .gallery-item { height: 220px; }
      .gi-1, .gi-3, .gi-4, .gi-5 { grid-column: 1; grid-row: auto; }
    }

    /* ─── Export Map ─── */
    #export-map { padding: 120px 32px; position: relative; z-index: 1; }
    .map-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
    .map-wrap {
      position: relative; margin: 48px auto 0; max-width: 960px;
      background: #040608;
      border: 1px solid rgba(224,16,32,0.22);
      border-radius: 20px; overflow: hidden; padding: 0;
      box-shadow: 0 0 60px rgba(224,16,32,0.07), inset 0 0 80px rgba(0,0,0,0.5);
    }
    .map-grid {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background-image:
        linear-gradient(rgba(224,16,32,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224,16,32,0.045) 1px, transparent 1px);
      background-size: 44px 44px;
    }
    .world-map { width: 100%; height: auto; display: block; position: relative; z-index: 2; }
    .land          { fill: rgba(110,8,14,0.6);  stroke: rgba(180,15,22,0.3);  stroke-width: 0.4; }
    .land-dest     { fill: rgba(170,12,20,0.7);  stroke: rgba(220,16,30,0.45); stroke-width: 0.5; }
    .land-highlight{ fill: rgba(224,16,32,0.82); stroke: rgba(255,80,90,0.85); stroke-width: 0.8; }
    .route-path {
      fill: none; stroke: rgba(255,255,255,0.52);
      stroke-width: 1.5; stroke-dasharray: 7 5; stroke-linecap: round;
      animation: flowRoute 2.6s linear infinite;
    }
    @keyframes flowRoute { from { stroke-dashoffset: 24; } to { stroke-dashoffset: -24; } }
    .origin-ring  { animation: oPulse 2s ease-out infinite; }
    .origin-ring2 { animation: oPulse 2s ease-out infinite 0.7s; }
    @keyframes oPulse {
      0%   { r: 6;  opacity: 0.75; }
      100% { r: 20; opacity: 0; }
    }
    .dest-ring { animation: dPulse 2.5s ease-out infinite; }
    @keyframes dPulse {
      0%   { r: 4;  opacity: 0.8; }
      100% { r: 14; opacity: 0; }
    }
    .dest-label {
      fill: rgba(255,255,255,0.75); font-family: var(--font-mono);
      font-size: 8.5px; text-anchor: middle; letter-spacing: 0.5px; pointer-events: none;
    }
    .origin-label {
      fill: rgba(255,255,255,0.6); font-family: var(--font-mono);
      font-size: 7.5px; text-anchor: middle; letter-spacing: 1.5px;
    }
    .map-regions {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 16px; margin: 36px auto 0; max-width: 960px;
    }
    .map-region-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 20px 18px;
      display: flex; align-items: center; gap: 12px;
      text-align: left; transition: border-color 0.3s;
    }
    .map-region-card:hover { border-color: rgba(var(--accent-rgb),0.3); }
    .map-region-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),0.6);
    }
    .map-region-card h4 { font-family: var(--font-head); font-size: 0.88rem; font-weight: 600; }
    @media (max-width: 900px) {
      .map-regions { grid-template-columns: repeat(3,1fr) !important; }
    }
    @media (max-width: 768px) {
      .map-regions { grid-template-columns: repeat(2,1fr) !important; }
      .dest-label { font-size: 7px; }
    }

    /* ─── Online Payment Float Button (generic credit-card icon) ─── */
    .qnb-btn {
      position: fixed;
      bottom: 96px;
      right: 28px;
      z-index: 9000;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(224,16,32,0.40);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
      overflow: hidden;
      animation: qnbPulse 3s ease-in-out infinite;
    }
    .qnb-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 28px rgba(224,16,32,0.65);
      animation: none;
    }
    .qnb-btn svg { width: 36px; height: auto; display: block; }
    @keyframes qnbPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(224,16,32,0.40); }
      50%       { box-shadow: 0 4px 32px rgba(224,16,32,0.70); }
    }

    .wa-btn {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 9000;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25D366;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,0.4);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
      animation: waPulse 3s ease-in-out infinite;
    }
    .wa-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 28px rgba(37,211,102,0.6);
      animation: none;
    }
    .wa-btn svg { width: 30px; height: 30px; }
    @keyframes waPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
      50%       { box-shadow: 0 4px 32px rgba(37,211,102,0.7); }
    }

    /* ─── Footer ─── */
    footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border);
      padding: 60px 32px 40px;
      text-align: left;
    }

    .footer-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: start;
      gap: 48px;
    }

    .footer-col-brand {}

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .footer-brand-text {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 1.1rem;
    }

    .footer-brand-text .jit { color: #fff; }
    .footer-brand-text .pol { color: var(--accent); }

    .footer-tagline {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 3px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .footer-links {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--text); }

    .footer-copy {
      color: rgba(255,255,255,0.22);
      font-size: 0.78rem;
    }

    .footer-col-contact {
      text-align: right;
    }

    .footer-contact-label {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
      display: block;
    }

    .footer-contact-line {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.9;
      display: block;
    }

    .footer-contact-line a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-contact-line a:hover { color: var(--text); }

    .footer-contact-line strong {
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.05em;
    }

    /* ─── Location Map ─── */
    /* Solid background + z-index keeps the fixed-position starscape/particles
       canvases hidden behind the section — without this they show through
       in dark mode because the iframe's CSS filter creates compositing artifacts. */
    #location-map {
      padding: 100px 40px;
      position: relative;
      z-index: 1;
      background: var(--bg);
    }
    .loc-wrap {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }
    .loc-subtitle {
      font-family: var(--font-body);
      font-size: 0.92rem;
      color: var(--text-secondary);
      margin: 18px auto 32px;
      max-width: 620px;
      line-height: 1.6;
    }
    .loc-frame {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
      margin-bottom: 28px;
    }
    .loc-frame iframe {
      display: block;
      width: 100%;
      height: 450px;
      border: 0;
      /* Smooth filter transition when theme toggles */
      transition: filter 0.4s ease;
    }
    /* Map CTA inherits .btn-secondary visual; minor adjustments for this context */
    .loc-cta {
      padding: 12px 28px;
      font-size: 0.88rem;
    }

    /* Dark mode: invert + hue-rotate so Google's light-themed map becomes a
       dark map. No API key needed; works on any iframe embed. The hue-rotate
       brings blues/greens back to their natural appearance after inversion. */
    [data-theme="dark"] .loc-frame iframe {
      filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.85);
    }

    @media (max-width: 768px) {
      #location-map { padding: 64px 20px; }
      .loc-frame iframe { height: 320px; }
      .loc-subtitle { font-size: 0.86rem; }
    }

    /* Address line — right-aligned on desktop, full-width centered on mobile.
       Replaces the previous inline-style approach which used margin-left:auto
       that didn't play well with the mobile centered layout. */
    .footer-contact-address {
      display: block;
      margin-top: 8px;
      font-size: 0.8rem;
      max-width: 240px;
      margin-left: auto;
    }

    @media (max-width: 768px) {
      .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      footer { text-align: center; padding-bottom: 140px; }
      .footer-brand { justify-content: center; }
      .footer-links { justify-content: center; }
      .footer-col-contact { text-align: center; }
      .footer-contact-address {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    /* ─── Mobile Navigation ─── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px; height: 40px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .nav-hamburger:hover { background: rgba(255,255,255,0.06); }
    .nav-hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: white;
      border-radius: 2px;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      transform-origin: center;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { transform: scaleX(0); opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-mobile-menu {
      position: fixed;
      inset: 0;
      background: rgba(6,6,8,0.97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      z-index: 998;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .nav-mobile-menu.open { opacity: 1; pointer-events: auto; }
    .nav-mobile-menu a {
      font-family: var(--font-head);
      font-size: 1.7rem;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      padding: 12px 40px;
      border-radius: 14px;
      transition: color 0.2s ease, background 0.2s ease, transform 0.35s ease, opacity 0.35s ease;
      transform: translateY(18px);
      opacity: 0;
      width: 100%;
      max-width: 340px;
      text-align: center;
    }
    .nav-mobile-menu.open a { transform: translateY(0); opacity: 1; }
    .nav-mobile-menu.open a:nth-child(1) { transition-delay: 0.04s; }
    .nav-mobile-menu.open a:nth-child(2) { transition-delay: 0.09s; }
    .nav-mobile-menu.open a:nth-child(3) { transition-delay: 0.14s; }
    .nav-mobile-menu.open a:nth-child(4) { transition-delay: 0.19s; }
    .nav-mobile-menu.open a:nth-child(5) { transition-delay: 0.24s; }
    .nav-mobile-menu a:hover { color: #fff; background: rgba(255,255,255,0.06); }
    .nav-mobile-menu .mob-cta {
      background: var(--accent) !important;
      color: #fff !important;
      box-shadow: 0 0 28px rgba(var(--accent-rgb),0.35);
      margin-top: 10px;
    }
    .nav-mobile-close {
      position: absolute;
      top: 18px; right: 18px;
      width: 40px; height: 40px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: rgba(255,255,255,0.6);
      font-size: 1.2rem;
      line-height: 1;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .nav-mobile-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

    /* Tap hint shown on touch devices */
    .card-tap-hint {
      display: none;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.22);
      text-transform: uppercase;
      text-align: center;
      margin-top: 8px;
    }

    /* ─── Mobile Breakpoint ─── */
    @media (max-width: 768px) {
      .nav-hamburger { display: flex; }
      .lang-btn .flag svg { width: 16px; height: 11px; }
      .lang-btn { font-size: 0.6rem; padding: 4px 6px; }
      .lang-switcher { margin-left: 6px; }

      /* Reduce section paddings */
      .specs-wrap { padding: 72px 20px; }
      #features   { padding: 60px 20px 72px; }
      #export-map { padding: 72px 20px; }
      #cta        { padding: 80px 20px; }
      footer      { padding: 48px 20px 36px; }
      #products   { padding: 0 20px 72px; }

      /* Section title */
      .section-title { margin-bottom: 40px; }

      /* Product card height on mobile — bumped so longer Turkish tag wrapping (e.g. "Katkı Maddeleri") doesn't clip */
      .product-card { height: auto; min-height: 296px; }
      .card-front { padding: 24px 22px 18px; }
      .product-tags span { font-size: 0.62rem; padding: 3px 8px; }

      /* Show tap hint */
      .card-tap-hint { display: block; }

      /* Map: allow proportional scaling via SVG viewBox */
      .map-wrap { overflow: hidden; }

      /* CTA button full-width */
      .btn-large { width: 100%; max-width: 320px; text-align: center; }

      /* Hero scroll hint */
      .scroll-hint { margin-top: 36px; }
    }

    /* Touch-device flip: disable hover, enable tap class */
    @media (hover: none) and (pointer: coarse) {
      .product-card:hover .card-inner { transform: none; }
      .product-card.flipped .card-inner { transform: rotateY(180deg); }
    }

    /* ─── Typing Cursor ─── */
    .typing-cursor {
      display: inline-block;
      color: var(--accent);
      font-weight: 300;
      animation: cursorBlink 0.85s step-end infinite;
      margin-left: 1px;
    }
    @keyframes cursorBlink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }

    /* ─── Back to Top ─── */
    #backToTop {
      position: fixed;
      bottom: 164px;
      right: 34px;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(224,16,32,0.12);
      border: 1px solid rgba(224,16,32,0.35);
      color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: 8000;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, box-shadow 0.2s;
      pointer-events: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #backToTop svg { width: 16px; height: 16px; display: block; }
    #backToTop.visible {
      opacity: 1; transform: translateY(0); pointer-events: auto;
    }
    #backToTop:hover {
      background: rgba(224,16,32,0.22);
      box-shadow: 0 0 18px rgba(224,16,32,0.3);
    }

    /* ─── Solution Modal ─── */
    .sol-modal {
      position: fixed; inset: 0; z-index: 9000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 10px;
    }
    .sol-modal.open { opacity: 1; pointer-events: auto; }
    .sol-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .sol-panel {
      position: relative; z-index: 1;
      background: #0d0d12;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      width: 95vw; max-width: 1200px;
      max-height: 92vh;
      display: flex; flex-direction: column;
      overflow-y: auto;
      transform: translateY(28px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .sol-panel::-webkit-scrollbar { width: 4px; }
    .sol-panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
    .sol-modal.open .sol-panel { transform: translateY(0) scale(1); }
    .sol-body {
      padding: 28px 36px 36px;
      display: flex; flex-direction: column;
    }
    .sol-header {
      display: flex; align-items: baseline; gap: 14px;
      flex-wrap: wrap; margin-bottom: 14px;
    }
    .sol-eyebrow {
      font-size: 10px; font-weight: 700; color: var(--accent);
      text-transform: uppercase; letter-spacing: 1.5px; flex-shrink: 0;
    }
    .sol-header h2 {
      font-family: var(--font-head); font-size: clamp(20px,3vw,30px);
      font-weight: 700; color: #fff; line-height: 1.2; margin: 0;
    }
    .sol-close {
      position: absolute; top: 14px; right: 14px; z-index: 10;
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.6);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .sol-close svg, .quote-close svg, .nav-mobile-close svg { width: 14px; height: 14px; display: block; }
    .sol-close:hover { background: rgba(224,16,32,0.3); color: #fff; }
    .sol-intro {
      font-size: 14px; color: rgba(255,255,255,0.62);
      line-height: 1.75; margin-bottom: 24px;
    }
    .sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
    .sol-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; padding: 16px;
    }
    .sol-card-label {
      font-size: 10px; font-weight: 700; color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;
    }
    .sol-card ul { list-style: none; padding: 0; margin: 0; }
    .sol-card ul li {
      font-size: 13px; color: rgba(255,255,255,0.65);
      padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
    }
    .sol-card ul li:last-child { border-bottom: none; }
    .sol-card ul li::before { content: '→'; color: var(--accent); font-size: 11px; flex-shrink: 0; margin-top: 2px; }
    .sol-cta {
      display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto;
      padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07);
    }
    .sol-cta-btn {
      padding: 11px 22px; border-radius: 10px; font-size: 13px; font-weight: 700;
      cursor: pointer; border: none; transition: all 0.2s;
    }
    .sol-cta-btn.primary { background: var(--accent); color: #fff; }
    .sol-cta-btn.primary:hover { box-shadow: 0 0 24px rgba(224,16,32,0.45); transform: translateY(-1px); }
    .sol-cta-btn.secondary {
      background: transparent; color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .sol-cta-btn.secondary:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
    @media (max-width: 680px) {
      .sol-body { padding: 18px 18px 24px; }
      .sol-grid { grid-template-columns: 1fr; }
    }
    /* Explore button on product cards */
    .card-explore {
      margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; color: var(--accent);
      text-decoration: none; cursor: pointer; background: none; border: none;
      padding: 6px 0; letter-spacing: 0.3px; position: relative; z-index: 2;
      transition: gap 0.2s;
    }
    .card-explore:hover { gap: 10px; }

    /* ─── Quote Modal ─── */
    .quote-modal {
      position: fixed; inset: 0;
      z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .quote-modal.open { opacity: 1; pointer-events: auto; }

    .quote-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .quote-panel {
      position: relative;
      width: 100%; max-width: 560px;
      margin: 16px;
      background: #0d0d12;
      border: 1px solid rgba(224,16,32,0.25);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 0 80px rgba(224,16,32,0.1), 0 40px 80px rgba(0,0,0,0.6);
      transform: translateY(24px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
      max-height: 90vh;
      overflow-y: auto;
    }
    .quote-modal.open .quote-panel { transform: translateY(0) scale(1); }

    .quote-close {
      position: absolute; top: 18px; right: 18px;
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      color: rgba(255,255,255,0.5);
      font-size: 0.9rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .quote-close:hover { background: rgba(224,16,32,0.15); color: #fff; }

    .quote-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 3px;
      color: var(--accent);
      text-transform: uppercase;
      display: block;
      margin-bottom: 10px;
    }

    .quote-panel h2 {
      font-family: var(--font-head);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 28px;
      letter-spacing: -0.02em;
    }

    /* Progress bar */
    .quote-progress-track {
      width: 100%; height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
      margin-bottom: 32px;
      overflow: hidden;
    }
    .quote-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      border-radius: 2px;
      transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
    }

    /* Steps */
    .quote-step { display: none; }
    .quote-step.active { display: block; }

    .quote-step h3 {
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 20px;
      color: rgba(255,255,255,0.85);
    }

    /* Product checkboxes */
    .quote-products-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 8px;
    }
    .quote-check-label {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      font-size: 0.875rem;
    }
    .quote-check-label:hover { border-color: rgba(224,16,32,0.3); background: rgba(224,16,32,0.04); }
    .quote-check-label input[type=checkbox] { display: none; }
    .quote-check-label.checked {
      border-color: rgba(224,16,32,0.55);
      background: rgba(224,16,32,0.07);
    }
    .quote-check-box {
      width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
      border: 1.5px solid rgba(255,255,255,0.2);
      background: transparent;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.2s, background 0.2s;
      font-size: 0.7rem;
    }
    .quote-check-label.checked .quote-check-box {
      background: var(--accent);
      border-color: var(--accent);
    }
    .quote-check-label.checked .quote-check-box::after { content: '✓'; color: white; }

    /* Form fields */
    .quote-fields { display: flex; flex-direction: column; gap: 14px; }
    .quote-field label {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 2px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 7px;
    }
    .quote-field input,
    .quote-field select,
    .quote-field textarea {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 12px 14px;
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none;
    }
    .quote-field select { cursor: pointer; }
    .quote-field select option { background: #0d0d12; }
    .quote-field textarea { resize: vertical; min-height: 90px; }
    .quote-field input:focus,
    .quote-field select:focus,
    .quote-field textarea:focus {
      border-color: rgba(224,16,32,0.5);
      box-shadow: 0 0 0 3px rgba(224,16,32,0.08);
    }
    .quote-field input::placeholder,
    .quote-field textarea::placeholder { color: rgba(255,255,255,0.2); }
    .quote-field input.input-error,
    .quote-field textarea.input-error,
    .quote-field select.input-error {
      border-color: rgba(224,16,32,0.85);
      box-shadow: 0 0 0 3px rgba(224,16,32,0.18);
      animation: input-shake 0.4s cubic-bezier(.36,.07,.19,.97);
    }
    .form-error {
      display: block;
      min-height: 0;
      margin-top: 6px;
      font-size: 0.78rem;
      color: var(--accent);
      letter-spacing: 0.01em;
      line-height: 1.3;
    }
    .form-error:empty { display: none; }
    @keyframes input-shake {
      10%, 90% { transform: translateX(-2px); }
      20%, 80% { transform: translateX(3px); }
      30%, 50%, 70% { transform: translateX(-5px); }
      40%, 60% { transform: translateX(5px); }
    }

    /* Two-column row for fields */
    .quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 500px) { .quote-row { grid-template-columns: 1fr; } }

    /* KVKK consent checkbox */
    .quote-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 4px;
      font-family: var(--font-body);
      font-size: 0.82rem;
      line-height: 1.5;
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
    }
    .quote-consent input[type="checkbox"] {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      margin-top: 2px;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .quote-consent input[type="checkbox"].input-error {
      outline: 2px solid rgba(224,16,32,0.85);
      outline-offset: 2px;
      animation: input-shake 0.4s cubic-bezier(.36,.07,.19,.97);
    }
    .quote-consent a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .quote-consent a:hover { color: var(--accent-light); }

    /* Navigation buttons */
    .quote-nav {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 28px; gap: 12px;
    }
    .quote-btn-back {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--text-secondary);
      padding: 11px 22px;
      border-radius: 10px;
      font-family: var(--font-head);
      font-size: 0.875rem;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .quote-btn-back:hover { border-color: rgba(255,255,255,0.22); color: #fff; }
    .quote-btn-next {
      background: var(--accent);
      color: #fff;
      padding: 11px 28px;
      border-radius: 10px;
      border: none;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      box-shadow: 0 0 20px rgba(224,16,32,0.3);
      transition: box-shadow 0.2s, transform 0.15s;
      margin-left: auto;
    }
    .quote-btn-next:hover { box-shadow: 0 0 30px rgba(224,16,32,0.5); transform: translateY(-1px); }

    .quote-step-label {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 2px;
      color: var(--text-secondary);
    }

    /* Success state */
    .quote-success {
      text-align: center;
      padding: 32px 0 16px;
    }
    .quote-success-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(224,16,32,0.12);
      border: 1px solid rgba(224,16,32,0.35);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 0 32px rgba(224,16,32,0.2);
    }
    .quote-success h3 {
      font-family: var(--font-head);
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .quote-success p {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.6;
      max-width: 340px;
      margin: 0 auto;
    }

    /* ─── Knowledge Center (homepage section) ─── */
    #knowledge {
      position: relative;
      z-index: 1;
      padding: 96px 32px;
    }
    .kc-wrap {
      max-width: 1240px;
      margin: 0 auto;
      text-align: center;
    }
    .kc-subtitle {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--text-secondary);
      max-width: 720px;
      line-height: 1.65;
      margin: -12px auto 56px;
    }
    .kc-grid {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .kc-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 28px 24px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      text-decoration: none;
      color: inherit;
      text-align: left;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.25s;
      position: relative;
      overflow: hidden;
    }
    .kc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),0.08) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .kc-card:hover {
      border-color: rgba(var(--accent-rgb), 0.4);
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    }
    .kc-card:hover::after { opacity: 1; }
    .kc-card-icon {
      display: inline-flex;
      width: 40px; height: 40px;
      border-radius: 10px;
      background: rgba(var(--accent-rgb), 0.10);
      border: 1px solid rgba(var(--accent-rgb), 0.30);
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .kc-card-icon svg { width: 20px; height: 20px; }
    .kc-card h3 {
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.3;
    }
    .kc-card p {
      font-family: var(--font-body);
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.6;
      flex: 1;
    }
    .kc-card-link {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--accent);
      margin-top: 8px;
    }
    /* On intermediate widths drop straight to 1-col so an orphan card never sits alone on a row */
    @media (max-width: 1024px) {
      .kc-grid { grid-template-columns: 1fr; max-width: 560px; }
    }
    @media (max-width: 600px)  { .kc-grid { grid-template-columns: 1fr; } #knowledge { padding: 72px 20px; } }