/* Self-hosted Mona Sans variable font (from @fontsource-variable/mona-sans 5.2.8). */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-vietnamese-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mona-sans-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Custom styles that Tailwind CDN can't fully handle */
.hero-gradient {
   background: linear-gradient(135deg, #110A3B 0%, #2F32A0 60%, #5B5FDE 100%);
}
.card-glow {
  background: rgba(145, 197, 255, 0.06);
  border: 1px solid rgba(145, 197, 255, 0.15);
}
.card-glow:hover {
  background: rgba(145, 197, 255, 0.1);
  border-color: rgba(145, 197, 255, 0.3);
}
.accent-glow {
  box-shadow: 0 0 40px rgba(145, 197, 255, 0.2), 0 0 80px rgba(47, 50, 160, 0.3);
}
.btn-primary {
  background: linear-gradient(135deg, #5B5FDE, #2F32A0);
  border: 1px solid rgba(145, 197, 255, 0.3);
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #787CE4, #4448C0);
  border-color: rgba(145, 197, 255, 0.5);
  box-shadow: 0 0 20px rgba(91, 95, 222, 0.4);
  transform: translateY(-1px);
}
.btn-outline {
  border: 1px solid rgba(145, 197, 255, 0.4);
  color: #ffffff;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background: rgba(145, 197, 255, 0.1);
  border-color: #91C5FF;
  transform: translateY(-1px);
}
.pricing-popular {
  background: linear-gradient(135deg, rgba(91, 95, 222, 0.2), rgba(47, 50, 160, 0.3));
  border: 1px solid rgba(145, 197, 255, 0.4);
}
.step-connector {
  background: linear-gradient(90deg, rgba(145, 197, 255, 0.5), rgba(91, 95, 222, 0.5));
}
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(17, 10, 59, 0.85);
  border-bottom: 1px solid rgba(145, 197, 255, 0.1);
}
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #91C5FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-dark {
  background: #0D0830;
}
.section-mid {
  background: linear-gradient(180deg, #110A3B 0%, #0D0830 100%);
}
.feature-icon-bg {
  background: rgba(145, 197, 255, 0.1);
  border: 1px solid rgba(145, 197, 255, 0.2);
}

/* Subtle animated gradient for hero badge */
@keyframes shimmer {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}
.badge-shimmer {
  animation: shimmer 3s ease-in-out infinite;
}

/* Mobile menu transition */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* ── Hero design from easy360-landing ── */
:root {
  --accent:  #7B5EFF;
  --accent2: #FF5E9C;
  --gold:    #FFD86B;
  --ring1:   rgba(255,255,255,0.07);
  --ring2:   rgba(255,255,255,0.05);
}

/* Spinning rings */
.rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ring  { position:absolute; border-radius:50%; border:1px solid; animation:heroSpin linear infinite; }
.ring:nth-child(1) { width:520px; height:520px; border-color:var(--ring1); animation-duration:22s; }
.ring:nth-child(2) { width:720px; height:720px; border-color:var(--ring2); animation-duration:35s; animation-direction:reverse; }
.ring:nth-child(3) { width:960px; height:960px; border-color:rgba(255,255,255,0.04); animation-duration:50s; }
.ring::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); top:50%; left:-4px; transform:translateY(-50%); box-shadow:0 0 14px 4px var(--accent); }
.ring:nth-child(2)::after { background:var(--accent2); box-shadow:0 0 14px 4px var(--accent2); left:auto; right:-4px; }
.ring:nth-child(3)::after { background:var(--gold); box-shadow:0 0 10px 3px var(--gold); top:-4px; left:50%; transform:translateX(-50%); }
@keyframes heroSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Noise overlay */
.hero-noise { position:absolute; inset:0; pointer-events:none; opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px; }

/* Glow blobs */
.hero-blob  { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; }
.hero-blob-1 { width:500px; height:500px; background:rgba(123,94,255,0.18); top:10%; left:50%; transform:translateX(-50%); }
.hero-blob-2 { width:300px; height:300px; background:rgba(255,94,156,0.12); top:40%; right:5%; }

/* Display headline */
.hero-h1-display {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(3.5rem, 10vw, 8.5rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}
.hero-h1-display .text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Badge monospace font */
.badge-mono { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Hero content fade-in */
.hero-fadein { animation: heroFadeUp 1s ease both; }
@keyframes heroFadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   Accessibility (WCAG 2.1 AA) — added 2026-05-25
============================================================ */

/* 2.2.2 Pause, Stop, Hide — respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2.4.7 Focus Visible — branded ring for the dark theme */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #91C5FF;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2.4.1 Bypass Blocks — skip link (hidden until focused) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; }
.skip-link:focus {
  left: 8px; top: 8px;
  padding: 0.5rem 1rem;
  background: #ffffff; color: #110A3B;
  border-radius: 0.5rem; font-weight: 700;
}