:root {
      --orange: #ff8b2b;
      --orange-deep: #f56a00;
      --teal: #0097B2;
      --white: #f8f6f2;
      --muted: rgba(248,246,242,0.62);
      --faint: rgba(248,246,242,0.38);
      --line: rgba(255,255,255,0.08);
      --bg: #080808;
      --font-display: 'Outfit', sans-serif;
      --font-body: 'Inter', sans-serif;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body {
      min-height: 100dvh;
      font-family: var(--font-body);
      color: var(--white);
      background: var(--bg);
      overflow-x: hidden;
      position: relative;
    }

    a { text-decoration: none; color: inherit; }
    button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
    img, svg { display: block; max-width: 100%; }

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ─── BACKGROUND ─── */
    .bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .bg-gradient {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 55% at 18% 22%, rgba(255,139,43,0.13) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 82% 14%, rgba(0,151,178,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 100%, rgba(255,139,43,0.07) 0%, transparent 56%),
        linear-gradient(170deg, #0b0b0b 0%, #070707 50%, #0a0808 100%);
    }

    .bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent 80%);
      animation: gridDrift 24s linear infinite;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0;
      animation: orbReveal 2s 0.4s var(--ease) forwards;
    }

    .orb-1 {
      width: 28rem; height: 28rem;
      top: -8%; left: -6%;
      background: radial-gradient(circle, rgba(255,139,43,0.16), transparent 64%);
      animation-delay: 0.3s;
      animation-name: orbReveal, floatA;
      animation-duration: 1.5s, 20s;
      animation-timing-function: var(--ease), ease-in-out;
      animation-fill-mode: forwards, none;
      animation-iteration-count: 1, infinite;
    }

    .orb-2 {
      width: 22rem; height: 22rem;
      bottom: 0; right: -4%;
      background: radial-gradient(circle, rgba(0,151,178,0.12), transparent 64%);
      animation: orbReveal 1.8s 0.6s var(--ease) forwards, floatB 22s ease-in-out infinite;
      animation-fill-mode: forwards, none;
      animation-iteration-count: 1, infinite;
    }

    .orb-3 {
      width: 16rem; height: 16rem;
      top: 40%; left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(255,139,43,0.06), transparent 64%);
      filter: blur(48px);
      animation: orbReveal 2s 0.8s var(--ease) forwards, floatC 18s ease-in-out infinite;
      animation-fill-mode: forwards, none;
      animation-iteration-count: 1, infinite;
    }

    /* ─── LAYOUT ─── */
    .page {
      position: relative;
      z-index: 1;
      min-height: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    /* ─── TOPBAR ─── */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 5vw, 4rem);
      opacity: 0;
      animation: fadeDown 900ms 200ms var(--ease) forwards;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }

    .brand-mark {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .mbt-logo-image {
      display: none;
      height: 2.85rem;
      width: auto;
      max-width: 15rem; /* prevent massive stretching if any */
      object-fit: contain;
    }

    .brand-mark.has-image .mbt-logo-image { display: block; }
    .brand-mark.has-image .mbt-logo-svg { display: none; }

    .brand-name {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 42px;
      padding: 0 1.1rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.03);
      font-size: 0.875rem;
      color: var(--muted);
      transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
    }

    .contact-link:hover,
    .contact-link:focus-visible {
      color: var(--white);
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.055);
      transform: translateY(-1px);
      outline: none;
    }

    /* ─── HERO ─── */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
      gap: clamp(1.75rem, 3vw, 2.5rem);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      min-height: 2.4rem;
      padding: 0 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0;
      animation: fadeUp 900ms 350ms var(--ease) forwards;
    }

    .eyebrow-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 0 rgba(255,139,43,0.7);
      animation: pulseDot 2.2s 1s infinite;
      flex-shrink: 0;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 8vw, 7.5rem);
      font-weight: 900;
      line-height: 0.94;
      letter-spacing: -0.055em;
      max-width: 14ch;
      text-wrap: balance;
      opacity: 0;
      animation: revealTitle 1100ms 480ms var(--ease) forwards;
    }

    .hero-title em {
      font-style: normal;
      color: var(--orange);
    }

    .hero-sub {
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      color: var(--muted);
      max-width: 52ch;
      line-height: 1.65;
      text-wrap: balance;
      opacity: 0;
      animation: fadeUp 950ms 680ms var(--ease) forwards;
    }

    /* ─── PILIERS ─── */
    .pillars {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      opacity: 0;
      animation: fadeUp 950ms 820ms var(--ease) forwards;
    }

    .pillar {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      min-height: 46px;
      padding: 0 1.05rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      font-size: 0.9rem;
      color: var(--white);
      backdrop-filter: blur(12px);
      transition: border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
    }

    .pillar:hover {
      border-color: rgba(255,139,43,0.22);
      background: rgba(255,139,43,0.06);
      transform: translateY(-2px);
    }

    .pillar svg { color: var(--orange); }

    /* ─── COUNTDOWN ─── */
    .countdown-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
      opacity: 0;
      animation: fadeUp 1000ms 960ms var(--ease) forwards;
    }

    .countdown-label {
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--faint);
    }

    .countdown {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .count-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
    }

    .count-num {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.06em;
      font-variant-numeric: tabular-nums;
      min-width: clamp(3rem, 6vw, 5.5rem);
      text-align: center;
      padding: clamp(0.75rem, 1.5vw, 1.1rem);
      border-radius: clamp(0.75rem, 1.2vw, 1.1rem);
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.03);
    }

    .count-unit {
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--faint);
    }

    .count-sep {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.8rem);
      font-weight: 800;
      color: rgba(255,139,43,0.45);
      padding-bottom: 1.4rem;
      align-self: flex-start;
      margin-top: 0.55rem;
    }

    /* ─── NOTIFY ─── */
    .notify {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      width: min(100%, 460px);
      opacity: 0;
      animation: fadeUp 1000ms 1100ms var(--ease) forwards;
    }

    .notify-form {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      padding: 0.35rem 0.35rem 0.35rem 1.2rem;
      transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
    }

    .notify-form:focus-within {
      border-color: rgba(255,139,43,0.45);
      box-shadow: 0 0 0 4px rgba(255,139,43,0.1);
    }

    .notify-input {
      flex: 1;
      min-height: 44px;
      background: none;
      border: 0;
      outline: none;
      color: var(--white);
      font-family: var(--font-body);
      font-size: 0.9rem;
      min-width: 0;
    }

    .notify-input::placeholder { color: rgba(248,246,242,0.38); }

    .notify-btn {
      flex-shrink: 0;
      min-height: 44px;
      padding: 0 1.3rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--orange), var(--orange-deep));
      color: #fff6ee;
      font-weight: 700;
      font-size: 0.875rem;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 10px 28px rgba(245,106,0,0.28);
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease);
      white-space: nowrap;
    }

    .notify-btn:hover,
    .notify-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 16px 36px rgba(245,106,0,0.36);
      filter: brightness(1.06);
      outline: none;
    }

    .notify-note {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--faint);
      font-size: 0.78rem;
    }

    /* ─── FOOTER ─── */
    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 5vw, 4rem);
      border-top: 1px solid rgba(255,255,255,0.05);
      gap: 1.25rem;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 900ms 1200ms var(--ease) forwards;
    }

    .footer-copy {
      font-size: 0.82rem;
      color: var(--faint);
    }

    .socials {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .social-link {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.025);
      color: var(--muted);
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease), background 220ms var(--ease);
    }

    .social-link:hover,
    .social-link:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(255,139,43,0.25);
      color: #ffcf99;
      background: rgba(255,139,43,0.07);
      outline: none;
    }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes revealTitle {
      from { opacity: 0; transform: translateY(24px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes orbReveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes floatA {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(30px, 22px, 0); }
    }

    @keyframes floatB {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(-26px, -18px, 0); }
    }

    @keyframes floatC {
      0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0); }
      50% { transform: translateX(-50%) translate3d(14px, -14px, 0); }
    }

    @keyframes gridDrift {
      from { transform: translateY(0); }
      to { transform: translateY(-72px); }
    }

    @keyframes pulseDot {
      0% { box-shadow: 0 0 0 0 rgba(255,139,43,0.7); }
      70% { box-shadow: 0 0 0 8px rgba(255,139,43,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,139,43,0); }
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 640px) {
      .countdown { gap: 0.3rem; }
      .count-sep { font-size: 1.4rem; }
      .notify-form { padding: 0.3rem 0.3rem 0.3rem 1rem; }
    }

    @media (max-width: 480px) {
      .footer { flex-direction: column; align-items: flex-start; }
      .notify-form { flex-direction: row; padding: 0.3rem 0.3rem 0.3rem 0.85rem; }
      .notify-input { width: 100%; font-size: 0.85rem; }
      .notify-btn { padding: 0 1rem; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
      .count-sep { display: none; }
      .countdown { gap: 0.4rem; }
    }

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