/* ============================================================
   App theme styles (landing) — cache-busted vía asset()
   ============================================================ */
body { font-family: 'Poppins', Helvetica, Arial, sans-serif; }
.font-title { font-family: 'Poppins', Helvetica, Arial, sans-serif; }
.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.modal-animate-in { animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hero animated waves */
.hero-waves { width: 100%; height: 90px; }
.hero-waves .wave-parallax > use { animation: waveMove 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.hero-waves .wave-parallax > use:nth-child(1) { animation-delay: -2s;  animation-duration: 9s;  }
.hero-waves .wave-parallax > use:nth-child(2) { animation-delay: -3s;  animation-duration: 13s; }
.hero-waves .wave-parallax > use:nth-child(3) { animation-delay: -4s;  animation-duration: 17s; }
.hero-waves .wave-parallax > use:nth-child(4) { animation-delay: -5s;  animation-duration: 25s; }
@keyframes waveMove {
    0%   { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}
@media (max-width: 768px) { .hero-waves { height: 50px; } }
@media (prefers-reduced-motion: reduce) {
    .hero-waves .wave-parallax > use { animation: none; }
}

/* Mobile menu button animations */
.menu-btn { transition: transform .25s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease; }
.menu-btn:active { transform: scale(.97); }
.menu-btn-primary { animation: btnGlow 2.6s ease-in-out infinite; }
.menu-btn-primary:hover { transform: translateY(-3px) scale(1.03); }
.menu-btn-outline:hover { transform: translateY(-3px) scale(1.03); }
@keyframes btnGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6,147,227,0.45); }
    50%      { box-shadow: 0 0 22px 4px rgba(6,147,227,0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .menu-btn-primary { animation: none; }
}

/* Brand logos marquee (slider infinito) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 2rem; color: #94a3b8; opacity: .7; transition: color .3s, opacity .3s, transform .3s; }
.marquee__item:hover { color: #0693e3; opacity: 1; transform: scale(1.06); }
.marquee__item svg { height: 56px; width: auto; display: block; }
@media (max-width: 768px) {
    .marquee__item { padding: 0 1.25rem; }
    .marquee__item svg { height: 44px; }
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* Parallax background */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (max-width: 768px) {
    /* fixed attachment is janky on mobile — fall back to scroll */
    .parallax { background-attachment: scroll; }
}

/* Floating-label form fields */
.field { position: relative; }
.field > input,
.field > textarea,
.field > select {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.9rem;
    padding: 1.15rem 1rem 0.45rem;
    color: #fff;
    outline: none;
    transition: border-color .2s, background-color .2s;
}
.field > select { color: #fff; padding-top: 1.4rem; }
.field > select option { color: #111; }
.field > input::placeholder,
.field > textarea::placeholder { color: transparent; }
.field > input:focus,
.field > textarea:focus,
.field > select:focus { border-color: #0693e3; background: rgba(255,255,255,0.1); }
.field > label {
    position: absolute;
    left: 1rem;
    top: 0.95rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    pointer-events: none;
    transition: all .15s ease;
}
.field > input:focus + label,
.field > input:not(:placeholder-shown) + label,
.field > textarea:focus + label,
.field > textarea:not(:placeholder-shown) + label,
.field > select:focus + label,
.field.filled > label {
    top: 0.4rem;
    font-size: 0.7rem;
    color: #0693e3;
    font-weight: 600;
    letter-spacing: .03em;
}
/* Light variant (for the advertising card on white bg) */
.field-light > input,
.field-light > textarea,
.field-light > select {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}
.field-light > select option { color: #0f172a; }
.field-light > label { color: #94a3b8; }
.field-light > input:focus,
.field-light > textarea:focus,
.field-light > select:focus { background: #fff; border-color: #0693e3; }