:root {
      --bg1: #0c5d7b;
      --bg2: #1f6f93;
      --bg3: #4f95ba;
      --text: #f4f8fd;
      --muted: #d7e5f0;
      --card: rgba(255,255,255,0.10);
      --card-border: rgba(255,255,255,0.18);
      --shadow: 0 22px 55px rgba(0,0,0,0.22);
      --accent: #8edb68;
      --accent2: #ff5c72;
      --dark: #0b2633;
      --max: 1160px;
      --radius: 24px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 50% 85%, rgba(133, 209, 255, 0.38), transparent 22%),
        linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 48%, var(--bg3) 100%);
      line-height: 1.55;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .container {
      width: min(var(--max), calc(100% - 48px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(12px);
      background: rgba(10, 38, 51, 0.48);
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .topbar-inner {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .logo {
      width: 44px;
      height: 44px;
      position: relative;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
    }

    .logo::before,
    .logo::after {
      content: "";
      position: absolute;
    }

    .logo::before {
      inset: 0;
      background: conic-gradient(from 180deg, #eb4e3d 0 22%, #f0c70a 22% 47%, #61b0f0 47% 76%, #e9001b 76% 100%);
      clip-path: polygon(50% 0, 82% 22%, 66% 58%, 100% 70%, 56% 100%, 16% 76%, 0 40%, 26% 30%);
      border-radius: 10px;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    nav a {
      color: var(--muted);
      font-size: .95rem;
    }

    nav a:hover { color: white; }

    .hero {
      padding: 72px 0 50px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      grid-template-rows: auto auto;
      gap: 34px;
      align-items: start;
    }

    .hero-title {
      grid-column: 1 / -1;
    }

    .hero-copy {
      min-width: 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 15px;
      border-radius: 999px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.14);
      color: var(--muted);
      margin-bottom: 18px;
      font-size: .94rem;
    }

    h1 {
      margin: 0 0 14px;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: rgba(255,255,255,0.92);
    }

    .h1-main {
      display: block;
      font-size: clamp(2.2rem, 5vw, 4rem);
      font-weight: 600;
    }

    .h1-sub {
      display: block;
      font-size: clamp(1.4rem, 2.8vw, 2.2rem);
      font-weight: 400;
      color: rgba(255,255,255,0.75);
      margin-top: 6px;
    }

    .lead {
      margin: 0 0 24px;
      max-width: 700px;
      color: var(--muted);
      font-size: 1.12rem;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 22px;
    }

    .btn {
      min-height: 52px;
      padding: 0 18px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      transition: transform .16s ease, opacity .16s ease;
      border: 1px solid transparent;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: white;
      color: #0f4560;
      box-shadow: var(--shadow);
    }

    .btn-secondary {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.16);
      color: white;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .mini-card,
    .card {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .mini-card {
      padding: 16px;
      color: var(--muted);
      font-size: .95rem;
    }

    .mini-card strong {
      display: block;
      color: white;
      margin-bottom: 6px;
    }

    .phone-wrap {
      display: flex;
      justify-content: center;
    }

    .phone-shift {
      margin-top: 40px;
    }

    .phone {
      width: min(640px, 100%);
      border-radius: 34px;
      padding: 18px;
      background: rgba(8, 24, 34, 0.72);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: var(--shadow);
    }

    .screen {
      position: relative;
      min-height: 360px;
      border-radius: 24px;
      padding: 18px 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 88%, rgba(135, 216, 255, 0.42), transparent 19%),
        linear-gradient(135deg, #0f607d 0%, #196d8f 52%, #3c8cb3 100%);
    }

    .screen-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      font-size: .84rem;
      color: rgba(255,255,255,0.86);
    }

    .screen-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
    }

    .screen-logo {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.82);
      position: relative;
    }

    .screen-logo::before {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: inherit;
      border: 2px solid rgba(255,255,255,.52);
    }

    .welcome {
      text-align: center;
      margin-bottom: 16px;
    }

    .welcome .overline {
      font-size: 1.1rem;
      letter-spacing: .03em;
      margin-bottom: 8px;
      color: rgba(255,255,255,0.95);
    }

    .welcome .sub {
      color: rgba(255,255,255,0.84);
      font-size: 1rem;
    }

    .flow-btn {
      position: relative;
      margin: 0 auto 20px;
      width: min(60%, 260px);
      min-height: 70px;
      display: grid;
      place-items: center;
      font-size: 1.6rem;
      font-weight: 300;
      letter-spacing: .02em;
      color: white;
      text-transform: uppercase;
    }

    .flow-btn::before {
      content: "";
      position: absolute;
      inset: 10px 0;
      border: 2px solid rgba(255,255,255,0.25);
      clip-path: polygon(7% 20%, 80% 20%, 95% 50%, 80% 80%, 7% 80%, 20% 50%);
      border-radius: 18px;
    }

    .flow-btn.entry::before { border-color: rgba(142, 219, 104, 0.85); }
    .flow-btn.exit::before { border-color: rgba(255, 92, 114, 0.82); }

    .flags {
      position: absolute;
      right: 10px;
      top: 90px;
      display: grid;
      gap: 8px;
    }

    .flag {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.78);
      background-size: cover;
      box-shadow: 0 8px 18px rgba(0,0,0,.15);
    }

    .it { background: linear-gradient(90deg, #4cae50 0 33%, white 33% 66%, #e74444 66% 100%); }
    .uk { background: linear-gradient(135deg, #154ea7 0%, #154ea7 100%); position: relative; }
    .fr { background: linear-gradient(90deg, #1f5cbf 0 33%, white 33% 66%, #e54a4a 66% 100%); }
    .de { background: linear-gradient(180deg, black 0 33%, #d42121 33% 66%, #f0cf29 66% 100%); }
    .es { background: linear-gradient(180deg, #d31d1d 0 25%, #f1d24a 25% 75%, #d31d1d 75% 100%); }

    .powered {
      position: absolute;
      right: 12px;
      bottom: 10px;
      color: rgba(255,255,255,.55);
      font-size: .78rem;
    }

    section { padding: 28px 0; }

    .section-head {
      max-width: 820px;
      margin-bottom: 22px;
    }

    .kicker {
      text-transform: uppercase;
      font-size: .82rem;
      letter-spacing: .12em;
      font-weight: 800;
      color: rgba(255,255,255,0.72);
      margin-bottom: 8px;
    }

    h2 {
      margin: 0 0 10px;
      font-size: clamp(1.75rem, 3vw, 2.7rem);
      line-height: 1.1;
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .grid-3,
    .grid-2 {
      display: grid;
      gap: 16px;
    }

    .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .feature,
    .problem,
    .tier,
    .faq {
      padding: 22px;
    }

    .icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 1.22rem;
    }

    .feature h3,
    .problem h3,
    .tier h3,
    .faq h3 {
      margin: 0 0 10px;
      font-size: 1.1rem;
    }

    .feature p,
    .problem p,
    .tier p,
    .faq p {
      margin: 0;
      color: var(--muted);
    }

    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .tier ul {
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      display: grid;
      gap: 10px;
    }

    .tier li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      color: var(--muted);
    }

    .tier li::before {
      content: "✓";
      color: white;
      font-weight: 800;
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
    }

    .tier.cloud { outline: 2px solid rgba(255,255,255,0.16); }

    .badge {
      display: inline-block;
      margin-bottom: 12px;
      padding: 7px 11px;
      font-size: .82rem;
      font-weight: 800;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
    }

    .quote {
      padding: 24px;
      position: relative;
      overflow: hidden;
    }

    .quote::before {
      content: "“";
      position: absolute;
      right: 18px;
      top: -6px;
      font-size: 5rem;
      color: rgba(255,255,255,0.08);
      line-height: 1;
    }

    .quote p {
      margin: 0 0 12px;
      font-size: 1.06rem;
    }

    .quote .author { color: var(--muted); }

    .cta {
      padding: 28px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      align-items: center;
      background: rgba(255,255,255,0.12);
    }

    .cta p {
      margin: 0;
      color: var(--muted);
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    .footer {
      padding: 26px 0 46px;
      color: rgba(255,255,255,0.72);
      font-size: .95rem;
    }

    .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
    }

    @media (max-width: 1040px) {
      nav { display: none; }
      .hero-grid,
      .grid-3,
      .grid-2,
      .compare,
      .cta,
      .footer-inner {
        grid-template-columns: 1fr;
      }

      .cta-actions { justify-content: flex-start; }
      .hero-points { grid-template-columns: 1fr; }
    }

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

      .phone-shift {
        margin-top: 8px;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(var(--max), calc(100% - 28px));
      }

      .topbar-inner { min-height: 64px; }
      .hero { padding-top: 40px; }
      .actions { flex-direction: column; }
      .btn { width: 100%; }
      .screen { min-height: 560px; }
      .flow-btn { font-size: 1.7rem; min-height: 92px; }
      .flags { top: 150px; }
    }
	
	.lang-menu {
	  display: flex;
	  gap: 10px;
	  font-size: .85rem;
	  align-items: center;
	}

	.lang-menu a {
	  color: var(--muted);
	}

	.lang-menu a:hover {
	  color: white;
	}

	.lang-menu strong {
	  color: white;
	}
	
	a:not(.btn):hover {
	  color: white;
	}