/* ==============================================================================
   NexChecker — Multi-Brand Adaptive Design System
   Dark Mode · 8 Brand Themes · Full Micro-Interactions
   ============================================================================== */

/* ── Brand Tokens (CSS Custom Properties per brand) ──────────────────────────── */
:root {
  /* Active brand variables (mutated on brand switch via JS) */
  --brand-primary:       #E23744;
  --brand-primary-dark:  #CB202D;
  --brand-primary-soft:  rgba(226,55,68,0.15);
  --brand-primary-glow:  rgba(226,55,68,0.35);
  --brand-accent:        #EEA61B;
  --brand-accent-soft:   rgba(238,166,27,0.15);
  --brand-header-bg:     #18191A;
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(226,55,68,0.18);
  --brand-font:          'Plus Jakarta Sans', system-ui, sans-serif;
  --brand-radius-btn:    12px;
  --brand-shadow-btn:    0 4px 18px rgba(226,55,68,0.4);

  /* ── Dark Mode Base ─────────────────────────────────────────────────────── */
  --bg-app:           #0f0f10;
  --bg-card:          #1a1a1c;
  --bg-card-2:        #222225;
  --bg-input:         #252528;
  --bg-chip:          #2a2a2d;
  --bg-chip-active:   var(--brand-chip-bg);
  --bg-bottom-nav:    #141416;
  --bg-header:        var(--brand-header-bg);

  --border-subtle:    rgba(255,255,255,0.08);
  --border-active:    var(--brand-primary);

  --text-primary:     #f2f2f2;
  --text-body:        #c4c4cc;
  --text-muted:       #6e6e7a;
  --text-on-brand:    #FFFFFF;

  /* ── Spacing Scale ──────────────────────────────────────────────────────── */
  --sp-0-5: 2px;  --sp-1: 4px;   --sp-1-5: 6px;
  --sp-2: 8px;    --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;  --sp-8: 32px;

  /* ── Radii & Elevation ──────────────────────────────────────────────────── */
  --radius-card:  16px;
  --radius-pill:  9999px;
  --radius-badge: 6px;
  --radius-chip:  10px;
  --radius-btn:   var(--brand-radius-btn);

  --shadow-card:  0 2px 12px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 28px rgba(0,0,0,0.4);
  --shadow-btn:   var(--brand-shadow-btn);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-brand: background 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  --transition-fast:  all 150ms ease;
  --transition-snap:  all 200ms cubic-bezier(0.34,1.56,0.64,1);
}

/* ══ BRAND THEMES ══════════════════════════════════════════════════════════════ */

/* ── Zomato (Sushi Design System) ──────────────────────────── */
[data-brand="zomato"] {
  --brand-primary:       #E23744;
  --brand-primary-dark:  #CB202D;
  --brand-primary-soft:  rgba(226,55,68,0.14);
  --brand-primary-glow:  rgba(226,55,68,0.42);
  --brand-accent:        #EEA61B;     /* Zomato Gold / ratings */
  --brand-success:       #3AB757;
  --brand-header-bg:     #E23744;
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(226,55,68,0.18);
  --brand-radius-btn:    12px;        /* Sushi: 8–16px cards, tighter chips */
  --brand-shadow-btn:    0 4px 18px rgba(226,55,68,0.45);
  --brand-font:          'Plus Jakarta Sans', system-ui, sans-serif;
  --brand-card-radius:   16px;
  --brand-badge-radius:  6px;
}

/* ── Flipkart (Design System 3.2 / MURV / Inter) ──────────── */
[data-brand="flipkart"] {
  --brand-primary:       #2874F0;
  --brand-primary-dark:  #1F74BA;
  --brand-primary-soft:  rgba(40,116,240,0.14);
  --brand-primary-glow:  rgba(40,116,240,0.42);
  --brand-accent:        #FFD814;     /* FK yellow — cart CTA */
  --brand-success:       #388E3C;
  --brand-header-bg:     #2874F0;
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(40,116,240,0.18);
  --brand-radius-btn:    4px;         /* FK: sharp 4px buttons/cards */
  --brand-shadow-btn:    0 3px 12px rgba(40,116,240,0.40);
  --brand-font:          'Inter', system-ui, sans-serif;
  --brand-card-radius:   8px;
  --brand-badge-radius:  4px;
}

/* ── Meesho (Jamuni + Aam palette / Landor 2023) ──────────── */
[data-brand="meesho"] {
  --brand-primary:       #9b3af7;     /* Jamuni active */
  --brand-primary-dark:  #580A46;     /* Deep Jamuni */
  --brand-primary-soft:  rgba(155,58,247,0.14);
  --brand-primary-glow:  rgba(155,58,247,0.42);
  --brand-accent:        #FF9D00;     /* Aam orange */
  --brand-success:       #16A34A;
  --brand-header-bg:     #580A46;
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(155,58,247,0.18);
  --brand-radius-btn:    6px;         /* Meesho: 6px btn, 10px card */
  --brand-shadow-btn:    0 4px 18px rgba(155,58,247,0.45);
  --brand-font:          'Plus Jakarta Sans', system-ui, sans-serif;
  --brand-card-radius:   10px;
  --brand-badge-radius:  6px;
}

/* ── BigBasket (Freshness — lime green + red) ─────────────── */
[data-brand="bigbasket"] {
  --brand-primary:       #A6CE39;     /* bb-green */
  --brand-primary-dark:  #8FB82E;
  --brand-primary-soft:  rgba(166,206,57,0.14);
  --brand-primary-glow:  rgba(166,206,57,0.38);
  --brand-accent:        #ED1C24;     /* bb-red — logo 'b', sale */
  --brand-success:       #A6CE39;
  --brand-header-bg:     #231F20;     /* bb-ink — dark trustworthy */
  --brand-header-text:   #A6CE39;
  --brand-chip-bg:       rgba(166,206,57,0.18);
  --brand-radius-btn:    6px;         /* BB: 4–8px buttons, 8–12px cards */
  --brand-shadow-btn:    0 3px 14px rgba(166,206,57,0.35);
  --brand-font:          'Inter', system-ui, sans-serif;
  --brand-card-radius:   10px;
  --brand-badge-radius:  6px;
}

/* ── Myntra (Appliqué — editorial sharp, fashion-pink) ────── */
[data-brand="myntra"] {
  --brand-primary:       #FF3F6C;     /* myntra-pink */
  --brand-primary-dark:  #E0355C;
  --brand-primary-soft:  rgba(255,63,108,0.14);
  --brand-primary-glow:  rgba(255,63,108,0.42);
  --brand-accent:        #FF912E;     /* logo gradient end orange */
  --brand-success:       #14804A;
  --brand-header-bg:     #282C3F;     /* myntra-ink — editorial dark */
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(255,63,108,0.18);
  --brand-radius-btn:    4px;         /* Appliqué: near-sharp 4px */
  --brand-shadow-btn:    0 3px 14px rgba(255,63,108,0.42);
  --brand-font:          'Plus Jakarta Sans', system-ui, sans-serif;
  --brand-card-radius:   4px;         /* Very sharp — magazine feel */
  --brand-badge-radius:  2px;
}

/* ── Swiggy (DLS — warm orange, appetite energy) ─────────── */
[data-brand="swiggy"] {
  --brand-primary:       #FC8019;     /* swiggy-orange */
  --brand-primary-dark:  #E06E0F;
  --brand-primary-soft:  rgba(252,128,25,0.14);
  --brand-primary-glow:  rgba(252,128,25,0.42);
  --brand-accent:        #48C479;     /* rating-high green */
  --brand-success:       #48C479;
  --brand-header-bg:     #02060C;     /* swiggy-ink near black */
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(252,128,25,0.18);
  --brand-radius-btn:    8px;         /* DLS: 8–12px friendly modern */
  --brand-shadow-btn:    0 4px 18px rgba(252,128,25,0.45);
  --brand-font:          'Plus Jakarta Sans', system-ui, sans-serif;
  --brand-card-radius:   12px;
  --brand-badge-radius:  6px;
}

/* ── Zepto (Electric purple — speed, urgency) ─────────────── */
[data-brand="zepto"] {
  --brand-primary:       #950EDB;     /* zepto-purple */
  --brand-primary-dark:  #7A0BB3;
  --brand-primary-soft:  rgba(149,14,219,0.14);
  --brand-primary-glow:  rgba(149,14,219,0.50);
  --brand-accent:        #B44EE8;     /* purple-light */
  --brand-success:       #16A34A;
  --brand-header-bg:     #1A1A1A;     /* zepto-ink */
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(149,14,219,0.18);
  --brand-radius-btn:    8px;         /* Zepto: 6–12px */
  --brand-shadow-btn:    0 4px 20px rgba(149,14,219,0.52);
  --brand-font:          'Inter', system-ui, sans-serif;
  --brand-card-radius:   12px;
  --brand-badge-radius:  6px;
}

/* ── Amazon (Smile Orange / Squid Ink — conversion first) ─── */
[data-brand="amazon"] {
  --brand-primary:       #FF9900;     /* smile-orange */
  --brand-primary-dark:  #E08000;
  --brand-primary-soft:  rgba(255,153,0,0.14);
  --brand-primary-glow:  rgba(255,153,0,0.40);
  --brand-accent:        #FFD814;     /* cart-yellow */
  --brand-success:       #067D62;
  --brand-header-bg:     #131A22;     /* squid-ink dark */
  --brand-header-text:   #FFFFFF;
  --brand-chip-bg:       rgba(255,153,0,0.18);
  --brand-radius-btn:    8px;         /* Amazon: 4–8px modest */
  --brand-shadow-btn:    0 3px 14px rgba(255,153,0,0.40);
  --brand-font:          'Inter', system-ui, sans-serif;
  --brand-card-radius:   8px;
  --brand-badge-radius:  4px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html { scroll-behavior: smooth; }
body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--brand-font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: font-family 300ms ease;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  padding-bottom: 80px; /* bottom nav */
}

/* ══ HEADER ═══════════════════════════════════════════════════════════════════ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-header-bg);
  transition: var(--transition-brand);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.4);
}

.header-inner {
  padding: var(--sp-3) var(--sp-4) 0;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Brand wordmark / logo container */
.brand-logo-svg {
  height: 28px;
  display: flex;
  align-items: center;
}

.brand-logo-svg svg {
  height: 100%;
  width: auto;
  transition: opacity 200ms ease;
}

.checker-pill {
  background: rgba(255,255,255,0.18);
  color: var(--brand-header-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* Engine status badge */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.engine-status {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  cursor: pointer;
}

.status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

.status-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4ade80;
}

/* Location row */
.location-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  cursor: pointer;
  border-radius: var(--radius-chip);
  transition: var(--transition-fast);
}

.location-row:active { opacity: 0.7; }

.loc-icon-wrap {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loc-meta { flex: 1; min-width: 0; }

.loc-subtitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.loc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-header-text);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chevron-svg { opacity: 0.8; flex-shrink: 0; }

/* ══ SERVICE CAROUSEL ═══════════════════════════════════════════════════════ */
.service-carousel-section {
  padding: var(--sp-4) 0 var(--sp-2);
}

.section-microtitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0 var(--sp-4) var(--sp-2);
}

.service-chips-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 8px var(--sp-4) var(--sp-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.service-chips-scroll::-webkit-scrollbar { display: none; }

.service-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-chip);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-3);
  min-width: 68px;
  cursor: pointer;
  transition: var(--transition-brand), transform 150ms cubic-bezier(0.34,1.56,0.64,1);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.service-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-primary-soft);
  opacity: 0;
  transition: opacity 300ms ease;
}

.service-chip.active {
  border-color: var(--brand-primary);
  background: var(--bg-card-2);
  box-shadow: 0 0 0 3px var(--brand-primary-soft), var(--shadow-card);
  transform: translateY(-2px);
}

.service-chip.active::before { opacity: 1; }

.service-chip:active { transform: scale(0.93); }

.chip-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.chip-logo svg { width: 100%; height: 100%; }

.chip-logo img,
.chip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.chip-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-body);
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
  transition: color 300ms ease;
}

.service-chip.active .chip-name {
  color: var(--brand-primary);
}

/* Active indicator dot - Hidden per user request */
.chip-active-dot {
  display: none !important;
}

/* ══ MODE TABS ═════════════════════════════════════════════════════════════ */
.mode-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-4) var(--sp-3);
}

.mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: var(--bg-chip);
  border: none;
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: var(--transition-brand);
  white-space: nowrap;
}

.mode-tab.active {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.mode-tab .tab-icon { font-size: 14px; }

/* ══ MAIN CONTENT ══════════════════════════════════════════════════════════ */
.app-main { padding: 0 var(--sp-4); }

.tab-content { display: none; animation: fadeUp 250ms ease; }
.tab-content.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ HERO BRAND CARD ═══════════════════════════════════════════════════════ */
.hero-brand-card {
  background: var(--bg-card);
  border-radius: var(--brand-card-radius, var(--radius-card));
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 14px;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border-subtle);
  transition: var(--transition-brand);
}

/* Brand Banner (replaces top visual section) */
.brand-banner {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  overflow: hidden;
  transition: var(--transition-brand);
}

.brand-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%);
}

/* Brand-specific banner patterns — exact skill file gradients */
[data-brand="zomato"]    .brand-banner { background: linear-gradient(135deg, #E23744 0%, #CB202D 70%, #9a121f 100%); }
[data-brand="flipkart"]  .brand-banner { background: linear-gradient(135deg, #2874F0 0%, #1F74BA 60%, #0C73EB 100%); }
[data-brand="meesho"]    .brand-banner { background: linear-gradient(135deg, #580A46 0%, #9b3af7 70%, #580A46 100%); }
[data-brand="bigbasket"] .brand-banner { background: linear-gradient(135deg, #231F20 0%, #231F20 40%, #8FB82E 80%, #A6CE39 100%); }
[data-brand="myntra"]    .brand-banner { background: linear-gradient(135deg, #F41CB2 0%, #FF3F6C 40%, #FF912E 100%); }
[data-brand="swiggy"]    .brand-banner { background: linear-gradient(135deg, #02060C 0%, #FC8019 70%, #E06E0F 100%); }
[data-brand="zepto"]     .brand-banner { background: linear-gradient(135deg, #1A1A1A 0%, #7A0BB3 50%, #950EDB 100%); }
[data-brand="amazon"]    .brand-banner { background: linear-gradient(135deg, #131A22 0%, #232F3E 50%, #FF9900 100%); }

.banner-overlay-pills {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.banner-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.banner-center {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}

.banner-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.banner-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}

/* Brand animated emoji in corner */
.banner-emoji {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px;
  height: 44px;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.banner-emoji img { width: 100%; height: 100%; object-fit: cover; }

/* ══ FORM AREA ═════════════════════════════════════════════════════════════ */
.card-form-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.input-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.quick-helpers {
  display: flex;
  gap: var(--sp-2);
}

.text-btn {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.text-btn:active { opacity: 0.7; }

/* Phone Input */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.phone-input-wrapper:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.country-prefix {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 14px var(--sp-3);
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-chip);
  flex-shrink: 0;
}

.flag-icon { font-size: 18px; }

.prefix-code {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.mobile-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 14px var(--sp-4);
  outline: none;
}

.mobile-input::placeholder { color: var(--text-muted); font-weight: 400; letter-spacing: 0; }

/* Quick demo chips */
.quick-demo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.demo-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.demo-chip {
  background: var(--bg-chip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: var(--transition-snap);
}

.demo-chip:active { transform: scale(0.95); }
.demo-registered { border-color: rgba(74,222,128,0.4); color: #4ade80; }
.demo-fresh      { border-color: rgba(251,191,36,0.4); color: #fbbf24; }

/* Error banner */
.error-banner {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: var(--radius-badge);
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  display: none;
}

/* ══ CTA BUTTON (Brand-Adaptive Spring) ═══════════════════════════════════ */
.brand-cta-btn {
  width: 100%;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--brand-radius-btn);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-brand), transform 150ms cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}

.brand-cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
}

.brand-cta-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}

.brand-cta-btn.spring-bounce {
  animation: springBounce 400ms cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes springBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.92); }
  60%  { transform: scale(1.05); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.brand-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.cta-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══ SCANNING ANIMATION ════════════════════════════════════════════════════ */
.scanning-container {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  margin-top: 14px;
  margin-bottom: var(--sp-4);
  text-align: center;
}

.scanning-radar {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  animation: radarPulse 2s ease-out infinite;
}

.ring-1 { width: 90px; height: 90px; animation-delay: 0s; }
.ring-2 { width: 60px; height: 60px; animation-delay: 0.5s; }
.ring-3 { width: 30px; height: 30px; animation-delay: 1s; }

@keyframes radarPulse {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

.radar-core {
  width: 44px;
  height: 44px;
  background: var(--brand-primary-soft);
  border: 2px solid var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
}

/* Brand emoji in radar */
.radar-brand-emoji {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.radar-brand-emoji img { width: 100%; height: 100%; object-fit: cover; }

.scan-status-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
}

.scan-step-detail {
  font-size: 12px;
  color: var(--text-muted);
}

.scan-progressbar {
  width: 100%;
  max-width: 200px;
  height: 4px;
  background: var(--bg-chip);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.scan-progress-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: var(--radius-pill);
  width: 0%;
  animation: scanProgress 2.5s ease-in-out infinite;
  transition: background 300ms ease;
}

@keyframes scanProgress {
  0%   { width: 0%; margin-left: 0%; }
  50%  { width: 60%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ══ RESULT CARD — 3D FLIP REVEAL ═════════════════════════════════════════ */
@keyframes resultCardReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.flip-card-outer {
  perspective: 1000px;
  display: none;
  margin-top: 14px;
  margin-bottom: var(--sp-4);
  animation: resultCardReveal 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flip-card-outer.flipped .flip-card-inner,
.flip-card-inner.flipped {
  transform: none;
}

.flip-card-front {
  display: none !important;
}

.flip-card-back {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Result Card Brand-Native Styles */
.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-brand);
}

/* Result header (brand colored strip) */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  transition: var(--transition-brand);
}

.result-brand-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
}

.result-status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border-radius: var(--brand-badge-radius, var(--radius-pill));
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  transition: all 200ms ease;
}

.result-status-badge.fresh {
  background: rgba(74, 222, 128, 0.22);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #4ade80;
}

.result-status-badge.taken {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

/* Result verdict section */
.result-body {
  padding: var(--sp-4);
}

.verdict-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.verdict-emoji-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.verdict-emoji-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.verdict-emoji-fallback { font-size: 28px; }

.verdict-text { flex: 1; }

.verdict-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.verdict-title.fresh,
.verdict-title.not-registered { color: #4ade80; }

.verdict-title.taken,
.verdict-title.registered { color: #94a3b8; }

.meta-value.fresh { color: #4ade80 !important; font-weight: 700; }
.meta-value.taken { color: #94a3b8; }

.verdict-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Result metadata grid */
.result-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.meta-item {
  background: var(--bg-card-2);
  border-radius: var(--radius-chip);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-subtle);
}

.meta-item.meta-hidden {
  display: none !important;
}

.meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.meta-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.meta-value.highlight { color: var(--brand-primary); transition: color 300ms ease; }

/* Phone number (tappable to copy) */
.result-phone-tap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--brand-primary-soft);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-chip);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  margin-top: var(--sp-3);
  transition: var(--transition-fast);
}

.result-phone-tap:active { transform: scale(0.98); }

.result-phone-num {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.copy-hint {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Re-check button */
.result-recheck {
  width: 100%;
  background: var(--bg-chip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  color: var(--text-body);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: var(--sp-3);
  cursor: pointer;
  margin-top: var(--sp-3);
  transition: var(--transition-fast);
}

.result-recheck:hover { background: var(--bg-card-2); }
.result-recheck:active { transform: scale(0.98); }

/* ══ BATCH TAB ══════════════════════════════════════════════════════════════ */
.batch-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 14px;
  margin-bottom: var(--sp-4);
}

.batch-card-header {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.batch-card-body { padding: var(--sp-4); }

.batch-textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg-input);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: var(--sp-3);
  resize: vertical;
  outline: none;
  transition: border-color 200ms ease;
}

.batch-textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.batch-controls {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.batch-btn {
  flex: 1;
  background: var(--bg-chip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  color: var(--text-body);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: var(--transition-fast);
}

.batch-btn.primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-brand);
}

.batch-btn:active { transform: scale(0.96); }

/* Batch results list */
.batch-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.batch-result-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  padding: var(--sp-2) var(--sp-3);
  animation: slideInRow 200ms ease;
}

@keyframes slideInRow {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.batch-result-phone {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  font-family: monospace;
  color: var(--text-primary);
}

.batch-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.batch-status-dot.fresh          { background: #4ade80; }
.batch-status-dot.registered     { background: #94a3b8; }
.batch-status-dot.not-registered { background: #4ade80; }
.batch-status-dot.checking       { background: var(--brand-primary); animation: pulse-green 1s infinite; }

.batch-status-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: 80px;
  text-align: right;
}

.batch-status-label.fresh          { color: #4ade80; }
.batch-status-label.registered     { color: #94a3b8; }
.batch-status-label.not-registered { color: #4ade80; }

/* ══ HISTORY TAB ══════════════════════════════════════════════════════════ */
.history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.history-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.history-clear-btn {
  background: none;
  border: none;
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.history-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  padding: var(--sp-3) var(--sp-3);
  cursor: pointer;
  transition: var(--transition-snap);
  position: relative;
  overflow: hidden;
}

.history-item:active { transform: scale(0.98); }

/* Long press shake + delete */
.history-item.shaking {
  animation: shakeDelete 400ms ease;
}

@keyframes shakeDelete {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}

.history-item.deleting {
  animation: deleteSlide 300ms ease forwards;
}

@keyframes deleteSlide {
  to { opacity: 0; transform: translateX(100%); height: 0; padding: 0; margin: 0; border: none; }
}

.hist-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hist-phone {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  font-family: monospace;
  color: var(--text-primary);
}

.hist-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.hist-status {
  font-size: 11px;
  font-weight: 700;
}

.hist-status.fresh          { color: #4ade80; }
.hist-status.not-registered { color: #4ade80; }
.hist-status.registered     { color: #94a3b8; }

.hist-time {
  font-size: 10px;
  color: var(--text-muted);
}

.hist-platform {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.history-empty {
  text-align: center;
  padding: var(--sp-8);
  color: var(--text-muted);
}

.history-empty .empty-emoji { font-size: 40px; margin-bottom: var(--sp-3); }
.history-empty .empty-title { font-size: 15px; font-weight: 700; color: var(--text-body); }
.history-empty .empty-sub   { font-size: 12px; margin-top: var(--sp-1); }

/* Pull-to-refresh */
.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  font-size: 12px;
  color: var(--text-muted);
  transform: translateY(-40px);
  transition: transform 200ms ease;
  opacity: 0;
}

.ptr-indicator.visible { transform: translateY(0); opacity: 1; }

.ptr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--bg-chip);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ══ ENGINES TAB ══════════════════════════════════════════════════════════ */
.engines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.engine-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  transition: var(--transition-snap);
}

.engine-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary-soft);
  transform: translateY(-2px);
}

.engine-card:active { transform: scale(0.96); }

.engine-logo-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engine-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.engine-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.engine-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.engine-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.engine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
}

.engine-status-label {
  font-size: 10px;
  font-weight: 700;
  color: #4ade80;
}

/* ══ BOTTOM NAVIGATION ════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  background: var(--bg-bottom-nav);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.b-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--text-muted);
  position: relative;
}

.b-nav-item .nav-icon { font-size: 20px; line-height: 1; transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1); }
.b-nav-item .nav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; transition: color 200ms ease; }

.b-nav-item.active .nav-icon { transform: scale(1.2); }
.b-nav-item.active .nav-label { color: var(--brand-primary); font-weight: 700; }
.b-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 24px;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 0 0 4px 4px;
  transition: background 300ms ease;
}

.b-nav-item:active .nav-icon { transform: scale(0.9); }

/* ══ CONFETTI LAYER ═══════════════════════════════════════════════════════ */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ══ COPY TOAST ═══════════════════════════════════════════════════════════ */
.copy-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 20px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  z-index: 500;
  pointer-events: none;
}

.copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══ BRAND TRANSITION OVERLAY ═════════════════════════════════════════════ */
.brand-transition-flash {
  position: fixed;
  inset: 0;
  background: var(--brand-primary);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 150ms ease;
}

.brand-transition-flash.flash { opacity: 0.06; }

/* ══ SCROLLBAR ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-chip); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ══ UTILITIES ════════════════════════════════════════════════════════════ */
.gap-2 { gap: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ══ TELEGRAM ACCESS GATE (Direct Browser Visitors) ════════════════════════ */
.security-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: radial-gradient(circle at 50% 25%, #181326 0%, #0c0a12 60%, #050508 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.security-gate-card {
  width: 100%;
  max-width: 390px;
  background: rgba(20, 18, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(155, 58, 247, 0.12);
  border-radius: 24px;
  padding: 28px 22px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: gateCardPop 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gateCardPop {
  0% { opacity: 0; transform: scale(0.94) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 8 Services Showcase Grid */
.gate-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 270px;
}

.gate-service-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 180ms ease;
}

.gate-service-icon:hover {
  transform: translateY(-2px) scale(1.04);
}

.gate-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.gate-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.gate-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  animation: pulseDot 1.4s infinite;
}

.gate-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.4px;
}

.gate-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 22px 0;
  max-width: 320px;
}

.gate-actions {
  width: 100%;
}

.btn-gate-telegram {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(34, 158, 217, 0.38);
  transition: all 200ms ease;
  border: none;
  cursor: pointer;
}

.btn-gate-telegram:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(34, 158, 217, 0.55);
  color: #ffffff;
}