:root {
      --midnight: #16324F;
      --navy: #1E4A73;
      --moon: #F7FBFE;
      --mist: #E7F4FB;
      --baby: #C5E4F5;
      --foam: #F4FAFD;
      --soft: #4F6F88;
      --silver: #B7D0E0;
      --lunar: #3B7EB5;
      --violet: #6B9EC8;
      --warm: #C4A36A;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: auto; overflow-x: clip; }
    html, body { max-width: 100%; }
    body { overflow-x: clip; }
    body {
      font-family: Inter, system-ui, sans-serif;
      background:
        radial-gradient(ellipse 80% 50% at 100% -10%, rgba(167, 214, 239, 0.7), transparent 52%),
        radial-gradient(ellipse 60% 40% at -10% 20%, rgba(214, 236, 248, 0.9), transparent 48%),
        linear-gradient(180deg, #D7EEF8 0%, #F4FAFD 28%, #EAF6FC 62%, #DCEFF8 100%);
      color: var(--midnight);
      -webkit-font-smoothing: antialiased;
    }

    ::selection { background: rgba(59, 126, 181, 0.22); color: #16324F; }

    :focus-visible {
      outline: 2px solid #3B7EB5;
      outline-offset: 3px;
    }

    #navbar {
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
    }
    #navbar.scrolled {
      background: rgba(247, 251, 254, 0.86);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(22, 50, 79, 0.08);
      box-shadow: 0 10px 30px rgba(59, 126, 181, 0.1);
    }

    #mobileMenu {
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    }
    #mobileMenu.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    .hamburger span { transition: transform 0.3s ease, opacity 0.3s ease; }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .hero-grid {
      background-image:
        linear-gradient(rgba(59, 126, 181, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 126, 181, 0.07) 1px, transparent 1px);
      background-size: 64px 64px;
    }

    .hero-glow {
      background:
        radial-gradient(ellipse 70% 55% at 82% 18%, rgba(167, 214, 239, 0.7), transparent 58%),
        radial-gradient(ellipse 50% 40% at 8% 88%, rgba(197, 228, 245, 0.55), transparent 60%);
    }

    .mask-line {
      display: block;
      overflow: visible;
      /* Top wipe only; extra room below/side so italic y/g never clip. */
      clip-path: inset(0 -0.5em -0.75em -0.4em);
    }
    .mask-line.is-revealed {
      clip-path: none;
    }
    .mask-line + .mask-line {
      margin-top: 0.1em;
    }
    .hero-line {
      display: block;
      line-height: 1.3;
      padding: 0.06em 0.08em 0.28em 0.02em;
    }
    h1 { text-wrap: balance; }
    .service-row { transition: background 0.35s ease, border-color 0.35s ease; cursor: pointer; }
    .service-row:hover { background: rgba(197, 228, 245, 0.35); }
    .service-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
    .service-row:hover .service-arrow { transform: translateX(6px); }

    #kampanye.campaign-night {
      background-color: #0E1A2E;
      color: #F7FBFE;
    }
    .campaign-stage {
      box-shadow: 0 24px 60px rgba(6, 16, 32, 0.28);
    }
    .campaign-panel {
      background: rgba(10, 24, 46, 0.42);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .img-grade { filter: saturate(0.92) contrast(1.02) brightness(1.02); }
    .img-zoom { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease; }
    .img-frame:hover .img-zoom { transform: scale(1.03); filter: saturate(1) contrast(1.04) brightness(1.04); }

    .btn-primary {
      background: #16324F;
      color: #F7FBFE;
      transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }
    .btn-primary:hover { background: #1E4A73; }
    .btn-ghost {
      border: 1px solid rgba(22, 50, 79, 0.22);
      color: #16324F;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .btn-ghost:hover { background: rgba(197, 228, 245, 0.45); border-color: rgba(22, 50, 79, 0.4); }

    .faq-btn { min-height: 44px; }
    .faq-btn[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
    .contact-choice:has(input:checked) { border-color: #3B7EB5; }
    .faq-plus { transition: transform 0.3s ease; }
    .faq-panel { display: none; }
    .faq-panel.open { display: block; }

    #waChooser, #waFormChooser {
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(0.98);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #waChooser.open, #waFormChooser.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .process-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .orbit-ring { transform-origin: 50% 50%; }

    .rate-table {
      width: 100%;
      border-collapse: collapse;
    }
    .rate-table th,
    .rate-table td {
      padding: 0.9rem 1rem;
      text-align: left;
      vertical-align: middle;
    }
    .rate-table tbody tr:nth-child(odd) { background: rgba(247, 251, 254, 0.72); }
    .rate-table tbody tr:nth-child(even) { background: rgba(231, 244, 251, 0.85); }
    .rate-table td:last-child,
    .rate-table th:last-child {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .rate-table tr.rate-group td {
      text-align: left;
      white-space: normal;
    }

    input, select, textarea {
      font-family: inherit;
    }

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