:root {
       --bg: #0f172a;
       --fg: #0b132b;
       --text: #0b0f19;
       --muted: #5b6475;
       --accent: #2563eb;
       --accent-2: #0ea5e9;
       --light: #f8fafc;
       --card: #ffffff;
       --border: #e5e7eb;
       --footer: #0b1220;
   }

   * {
       box-sizing: border-box
   }

   html {
       scroll-behavior: smooth
   }

   body {
       margin: 0;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       color: var(--text);
       background: #f5f7fb;
   }

   a {
       text-decoration: none;
       color: inherit
   }

   img {
       max-width: 100%;
       height: auto;
       display: block
   }

   .container {
       width: 100%;
       max-width: 1160px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .btn {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
       background: var(--accent);
       color: #fff;
       padding: 12px 16px;
       border-radius: 10px;
       font-weight: 600;
       transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
   }

   .btn:hover {
       transform: translateY(-1px);
       background: #1d4ed8;
       box-shadow: 0 8px 20px rgba(37, 99, 235, .25)
   }

   .btn.secondary {
       background: #eef2ff;
       color: #1e3a8a
   }

   .btn.secondary:hover {
       background: #e0e7ff
   }

   .badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: #eaf3ff;
       color: #0b4db6;
       padding: 8px 12px;
       border-radius: 999px;
       font-weight: 600;
       font-size: 14px;
   }

   .header {
       position: sticky;
       top: 0;
       z-index: 50;
       background: #ffffff;
       box-shadow: 0 6px 16px rgba(13, 21, 43, .06)
   }

   .header .wrap {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 0
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 10px;
       font-weight: 800;
       font-size: 20px;
       color: #0b1a38
   }

   .nav {
       display: flex;
       align-items: center;
       gap: 22px
   }

   .nav a {
       padding: 10px 6px;
       border-radius: 8px;
       color: #1f2937;
       font-weight: 600
   }

   .nav a:hover {
       background: #f1f5f9
   }

   .burger {
       display: none;
       font-size: 22px;
       color: #0b1a38
   }

   .mobile-menu {
       display: none;
       flex-direction: column;
       padding: 10px;
       background: #ffffff;
       border-top: 1px solid var(--border)
   }

   .mobile-menu a {
       padding: 12px;
       border-radius: 8px;
       color: #1f2937;
       font-weight: 600
   }

   .hero {
       position: relative;
       background: linear-gradient(135deg, #f0f4ff 0%, #f7fbff 50%, #ffffff 100%);
       padding: 70px 0
   }

   .hero .grid {
       display: grid;
       grid-template-columns: 1.2fr .8fr;
       gap: 28px;
       align-items: center
   }

   .hero h1 {
       font-size: 40px;
       line-height: 1.15;
       margin: 0 0 12px;
       color: #0b1a38
   }

   .hero p {
       color: #4b5563;
       font-size: 18px;
       line-height: 1.6;
       margin: 0 0 14px
   }

   .hero .actions {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: 16px
   }

   .hero .note {
       margin-top: 16px;
       font-size: 14px;
       color: #6b7280
   }

   .hero .panel {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 24px;
       box-shadow: 0 8px 24px rgba(16, 24, 40, .06)
   }

   .section {
       padding: 64px 0
   }

   .section h2 {
       font-size: 28px;
       line-height: 1.3;
       margin: 0 0 10px;
       color: #0b1a38
   }

   .section .sub {
       color: #5b6475;
       margin: 0 0 18px
   }

   .about .content {
       display: grid;
       grid-template-columns: 1.3fr .7fr;
       gap: 28px
   }

   .about .facts {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 14px;
       margin-top: 18px
   }

   .fact {
       display: flex;
       align-items: center;
       gap: 12px;
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 12px
   }

   .fact i {
       color: var(--accent)
   }

   .services .grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px
   }

   .card {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 20px;
       box-shadow: 0 10px 24px rgba(16, 24, 40, .05);
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .card .icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #eaf3ff;
       color: #0b4db6;
       font-size: 20px
   }

   .card h3 {
       margin: 6px 0 6px;
       font-size: 18px;
       color: #0b1a38
   }

   .card p {
       margin: 0;
       color: #4b5563;
       line-height: 1.6
   }

   .how .steps {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px
   }

   .step {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 18px;
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .step .label {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-weight: 700;
       color: #0b4db6
   }

   .recommended .blocks {
       display: grid;
       grid-template-columns: 1fr;
       gap: 18px
   }

   .operator {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 18px;
       display: grid;
       grid-template-columns: 1.2fr .9fr .9fr .9fr;
       gap: 18px;
       align-items: start
   }

   .operator .brand {
       display: flex;
       align-items: center;
       gap: 12px
   }

   .operator .brand img {
       height: 80px;
       background: #eef2ff;
       border-radius: 12px
   }

   .operator h4 {
       margin: 0 0 6px;
       font-size: 18px;
       color: #0b1a38
   }

   .stars {
       color: #f59e0b;
       font-size: 18px
   }

   .operator ul {
       margin: 8px 0 0;
       padding-left: 18px;
       color: #4b5563
   }

   .operator .pay {
       color: #4b5563
   }

   .operator .cta {
       margin-top: 12px
   }

   .reviews .grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px
   }

   .review {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 18px;
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .review .head {
       display: flex;
       align-items: center;
       gap: 10px
   }

   .review .head i {
       color: #0ea5e9
   }

   .review .meta {
       color: #6b7280;
       font-size: 14px
   }

   .contact .wrap {
       display: grid;
       grid-template-columns: 1.1fr .9fr;
       gap: 24px
   }

   .form {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 12px
   }

   .field {
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .field label {
       font-weight: 600;
       color: #0b1a38
   }

   .input,
   .textarea {
       width: 100%;
       padding: 12px 14px;
       border: 1px solid var(--border);
       border-radius: 10px;
       background: #fafafa;
       transition: border .15s ease, box-shadow .15s ease
   }

   .input:focus,
   .textarea:focus {
       outline: none;
       border-color: #93c5fd;
       box-shadow: 0 0 0 4px rgba(147, 197, 253, .3)
   }

   .textarea {
       min-height: 120px;
       resize: vertical
   }

   .side {
       background: #ffffff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 10px
   }

   .side .row {
       display: flex;
       align-items: center;
       gap: 10px;
       color: #4b5563
   }

   .side i {
       color: #0ea5e9
   }

   .success {
       display: none;
       margin-top: 10px;
       background: #ecfdf5;
       color: #065f46;
       border: 1px solid #a7f3d0;
       border-radius: 10px;
       padding: 12px;
       font-weight: 600
   }

   .footer {
       background: var(--footer);
       color: #e5e7eb;
       margin-top: 40px
   }

   .footer .top {
       padding: 38px 0
   }

   .footer .cols {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 18px
   }

   .footer h5 {
       margin: 0 0 10px;
       font-size: 16px;
       color: #ffffff
   }

   .footer p,
   .footer li {
       color: #cbd5e1;
       line-height: 1.6
   }

   .footer ul {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .footer a {
       color: #cbd5e1
   }

   .footer .bottom {
       border-top: 1px solid #1f2937;
       padding: 14px 0;
       color: #9ca3af;
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px
   }

   .footer .badges {
       display: flex;
       align-items: center;
       gap: 10px
   }

   .footer .badge-alt {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: #0f1830;
       color: #e5e7eb;
       border: 1px solid #1f2937;
       padding: 8px 12px;
       border-radius: 999px;
       font-weight: 700
   }

   .disclaimer {
       margin-top: 12px;
       font-size: 13px;
       color: #b6c0d4
   }

   @media (max-width:1024px) {
       .hero .grid {
           grid-template-columns: 1fr
       }

       .about .content {
           grid-template-columns: 1fr
       }

       .services .grid {
           grid-template-columns: repeat(2, 1fr)
       }

       .how .steps {
           grid-template-columns: repeat(2, 1fr)
       }

       .reviews .grid {
           grid-template-columns: repeat(2, 1fr)
       }

       .contact .wrap {
           grid-template-columns: 1fr
       }

       .operator {
           grid-template-columns: 1fr 1fr
       }

       .footer .cols {
           grid-template-columns: repeat(2, 1fr)
       }
   }

   @media (max-width:720px) {
       .nav {
           display: none
       }

       .burger {
           display: block
       }

       .services .grid {
           grid-template-columns: 1fr
       }

       .how .steps {
           grid-template-columns: 1fr
       }

       .reviews .grid {
           grid-template-columns: 1fr
       }

       .operator {
           grid-template-columns: 1fr
       }

       .footer .cols {
           grid-template-columns: 1fr
       }
   }

   .af-age-overlay {
       position: fixed;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1.5rem;
       background: rgba(15, 23, 42, 0.92);
       z-index: 9999;
   }

   .af-age-card {
       max-width: 480px;
       width: 100%;
       background: #f8fafc;
       color: #0f172a;
       border-radius: 1rem;
       padding: 1.75rem 1.5rem;
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
       text-align: center;
   }

   .af-age-badge {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 52px;
       height: 52px;
       border-radius: 999px;
       background: #2563eb;
       color: #f8fafc;
       font-weight: 700;
       font-size: 1.1rem;
       margin-bottom: 1rem;
   }

   .af-age-title {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.75rem;
   }

   .af-age-text {
       font-size: 0.95rem;
       line-height: 1.5;
       margin-bottom: 0.5rem;
   }

   .af-age-buttons {
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
       margin-top: 1.2rem;
   }

   .af-btn-primary,
   .af-btn-secondary {
       border-radius: 999px;
       padding: 0.7rem 1.2rem;
       font-size: 0.95rem;
       font-weight: 600;
       border: 1px solid transparent;
       cursor: pointer;
       transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease, border-color 0.18s ease;
   }

   .af-btn-primary {
       background: #2563eb;
       color: #f8fafc;
       box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
   }

   .af-btn-primary:hover {
       background: #1d4ed8;
       transform: translateY(-1px);
       box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
   }

   .af-btn-secondary {
       background: #f8fafc;
       color: #0f172a;
       border-color: rgba(15, 23, 42, 0.12);
   }

   .af-btn-secondary:hover {
       background: #e2e8f0;
   }

   .af-cookie-banner {
       position: fixed;
       left: 50%;
       transform: translateX(-50%);
       bottom: 1.5rem;
       max-width: 960px;
       width: calc(100% - 2rem);
       background: #f8fafc;
       color: #0f172a;
       border-radius: 1rem;
       padding: 1.25rem 1.25rem;
       box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
       display: flex;
       flex-direction: column;
       gap: 0.9rem;
       z-index: 9998;
   }

   .af-cookie-top {
       display: flex;
       gap: 0.9rem;
       align-items: flex-start;
   }

   .af-cookie-icon {
       flex-shrink: 0;
       width: 32px;
       height: 32px;
       border-radius: 999px;
       background: rgba(37, 99, 235, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #2563eb;
       font-size: 1rem;
   }

   .af-cookie-text {
       flex: 1;
   }

   .af-cookie-title {
       font-weight: 700;
       margin-bottom: 0.25rem;
       font-size: 1rem;
   }

   .af-cookie-desc {
       font-size: 0.9rem;
       line-height: 1.5;
   }

   .af-cookie-buttons {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
       justify-content: flex-end;
   }

   .af-cookie-link {
       border-radius: 999px;
       padding: 0.55rem 1.1rem;
       font-size: 0.9rem;
       font-weight: 600;
       border: 1px solid rgba(15, 23, 42, 0.18);
       background: transparent;
       cursor: pointer;
   }

   .af-cookie-link:hover {
       background: #e2e8f0;
   }

   .af-cookie-accept {
       border-radius: 999px;
       padding: 0.55rem 1.3rem;
       font-size: 0.9rem;
       font-weight: 600;
       border: none;
       background: #2563eb;
       color: #f8fafc;
       cursor: pointer;
       box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
   }

   .af-cookie-accept:hover {
       background: #1d4ed8;
   }

   .af-cookie-settings {
       position: fixed;
       inset: 0;
       display: none;
       align-items: center;
       justify-content: center;
       padding: 1.5rem;
       background: rgba(15, 23, 42, 0.85);
       z-index: 10000;
   }

   .af-cookie-settings.af-cookie-settings--visible {
       display: flex;
   }

   .af-cookie-panel {
       max-width: 520px;
       width: 100%;
       background: #f8fafc;
       color: #0f172a;
       border-radius: 1rem;
       padding: 1.6rem 1.5rem;
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);
   }

   .af-cookie-panel-title {
       font-size: 1.15rem;
       font-weight: 700;
       margin-bottom: 0.4rem;
   }

   .af-cookie-panel-desc {
       font-size: 0.9rem;
       margin-bottom: 1rem;
       line-height: 1.5;
   }

   .af-cookie-list {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-bottom: 1.2rem;
   }

   .af-cookie-item {
       padding: 0.65rem 0.75rem;
       border-radius: 0.75rem;
       background: #e5edff;
       border: 1px solid rgba(37, 99, 235, 0.25);
   }

   .af-cookie-item-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 0.5rem;
       margin-bottom: 0.2rem;
   }

   .af-cookie-item-title {
       font-size: 0.9rem;
       font-weight: 600;
   }

   .af-cookie-switch-label {
       font-size: 0.75rem;
       font-weight: 600;
       color: #0f172a;
   }

   .af-cookie-switch {
       position: relative;
       width: 38px;
       height: 20px;
       border-radius: 999px;
       background: #cbd5f5;
       cursor: pointer;
       flex-shrink: 0;
   }

   .af-cookie-switch-dot {
       position: absolute;
       top: 2px;
       left: 2px;
       width: 16px;
       height: 16px;
       border-radius: 999px;
       background: #f8fafc;
       transition: transform 0.16s ease;
   }

   .af-cookie-checkbox {
       display: none;
   }

   .af-cookie-checkbox:checked+.af-cookie-switch .af-cookie-switch-dot {
       transform: translateX(18px);
   }

   .af-cookie-checkbox:checked+.af-cookie-switch {
       background: #2563eb;
   }

   .af-cookie-item-desc {
       font-size: 0.8rem;
       line-height: 1.4;
   }

   .af-cookie-panel-actions {
       display: flex;
       justify-content: flex-end;
       gap: 0.6rem;
   }

   .af-btn-ghost {
       border-radius: 999px;
       padding: 0.55rem 1.2rem;
       font-size: 0.9rem;
       border: 1px solid rgba(15, 23, 42, 0.24);
       background: #f8fafc;
       cursor: pointer;
   }

   .af-btn-ghost:hover {
       background: #e2e8f0;
   }

   @media (max-width: 640px) {
       .af-cookie-banner {
           bottom: 1rem;
           padding: 1rem;
       }

       .af-cookie-top {
           flex-direction: column;
       }

       .af-cookie-buttons {
           justify-content: flex-start;
       }
   }

   .legal-images {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
       margin: 20px auto;
   }

   .legal-images img {
       height: 50px;
       margin: 10px;
   }

   .card {
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 22px;
       box-shadow: 0 10px 24px rgba(16, 24, 40, .05)
   }

   .card h2 {
       margin: 0 0 10px;
       font-size: 26px;
       color: #0b1a38
   }

   .card h3 {
       margin: 18px 0 8px;
       font-size: 20px;
       color: #0b1a38
   }

   .card p {
       margin: 0 0 10px;
       color: #4b5563;
       line-height: 1.7
   }

   .card ul {
       margin: 8px 0 14px;
       padding-left: 20px;
       color: #4b5563;
       line-height: 1.7
   }

   .kv {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-top: 10px
   }

   .kv .item {
       display: flex;
       align-items: center;
       gap: 10px;
       color: #4b5563
   }

   .kv i {
       color: #0ea5e9
   }

   .notice {
       background: #eaf3ff;
       color: #0b4db6;
       border: 1px solid #cfe0ff;
       border-radius: 12px;
       padding: 12px;
       margin: 14px 0
   }