/* ==========================================================================
   LANDING — Restored section styles + modal/navbar stacking fix
   Loaded after style.css on the homepage and the new-order page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navigation must stay above the modal backdrop so the menu always works
   -------------------------------------------------------------------------- */
.navbar { z-index: 2100; }

/* The popup is centred BELOW the fixed navbar (never covers it) */
.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 92px 16px 24px;
}
.modal { max-height: calc(100vh - 132px); }

/* --------------------------------------------------------------------------
   2. HERO extras — aurora lights
   -------------------------------------------------------------------------- */
.hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
}
.hero-aurora i:nth-child(1) {
    width: 520px; height: 520px; left: -150px; top: -170px;
    background: radial-gradient(circle, rgba(230,57,70,.85), transparent 70%);
    animation: auroraFloat 20s ease-in-out infinite;
}
.hero-aurora i:nth-child(2) {
    width: 560px; height: 560px; right: -180px; top: 6%;
    background: radial-gradient(circle, rgba(79,140,255,.75), transparent 70%);
    animation: auroraFloat 26s ease-in-out infinite reverse;
}
.hero-aurora i:nth-child(3) {
    width: 480px; height: 480px; left: 36%; bottom: -230px;
    background: radial-gradient(circle, rgba(168,85,247,.6), transparent 70%);
    animation: auroraFloat 32s ease-in-out infinite;
}
@keyframes auroraFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(50px, -45px, 0) scale(1.15); }
}

/* --------------------------------------------------------------------------
   3. HERO extras — trust line + scroll hint
   -------------------------------------------------------------------------- */
.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 26px;
    font-size: .82rem;
    color: rgba(255,255,255,.82);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: #7cf0c0; font-size: .8rem; }

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}
.hero-scroll .mouse {
    position: relative;
    width: 22px;
    height: 36px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.4);
}
.hero-scroll .mouse::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,.8);
    transform: translateX(-50%);
    animation: mouseScroll 1.8s ease-in-out infinite;
}
@keyframes mouseScroll {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* --------------------------------------------------------------------------
   4. Platforms marquee (right under the hero)
   -------------------------------------------------------------------------- */
.brand-marquee {
    overflow: hidden;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 18px 0;
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    animation: marqueeScroll 38s linear infinite;
}
.brand-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .92rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.marquee-item i { font-size: 1.15rem; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   5. How it works — steps
   -------------------------------------------------------------------------- */
.how-section {
    padding: 96px 0;
    background: var(--bg-secondary, #f5f7fa);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.step-card {
    position: relative;
    padding: 34px 28px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
}
.step-num {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(26,35,126,.07);
}
.step-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #e63946, #ff6b6b);
    box-shadow: 0 10px 24px rgba(230,57,70,.28);
}
.step-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a2e;
}
.step-card p {
    color: #555566;
    font-size: .92rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   6. CTA band
   -------------------------------------------------------------------------- */
.cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 96px;
}
.cta-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 56px 32px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
    box-shadow: 0 24px 60px rgba(26,35,126,.28);
}
.cta-band::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,57,70,.55), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}
.cta-band p {
    max-width: 560px;
    margin: 0 auto 26px;
    color: rgba(255,255,255,.78);
    font-size: .98rem;
}
.cta-band .btn-outline {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.08);
    color: #fff;
}
.cta-band .btn-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* --------------------------------------------------------------------------
   7. Scroll reveal (added by JS only — never hides content without JS)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   8. HERO IMAGE — full-section background (cover), animated
   -------------------------------------------------------------------------- */
.hero { isolation: isolate; }

/* The content wrapper no longer creates its own box for positioning,
   so the image can cover the WHOLE hero section. Text stays on top. */
.hero-content {
    position: static;
    max-width: 920px;
}
.hero-content > *:not(.hero-visual) {
    position: relative;
    z-index: 3;
}
.hero-content h1,
.hero-content > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.hero h1 { text-shadow: 0 4px 28px rgba(5,8,35,.55); }
.hero p  { color: rgba(255,255,255,.88); text-shadow: 0 2px 16px rgba(5,8,35,.6); }
.hero-scroll { display: none; }

/* Full-cover image layer */
.hero-visual {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transition: transform .25s ease-out;
    animation: heroBgIn 1.4s ease .1s both;
}
@keyframes heroBgIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dark indigo veil for readability (above the image) */
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at center, rgba(10,14,48,.55) 0%, rgba(10,14,48,.25) 55%, rgba(10,14,48,.55) 100%),
        linear-gradient(180deg, rgba(10,14,48,.70) 0%, rgba(26,35,126,.35) 45%, rgba(10,14,48,.80) 100%);
    pointer-events: none;
}

.hero-visual-float {
    position: absolute;
    inset: 0;
}
.hero-visual-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.hero-visual-frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform-origin: center;
    animation: heroKenBurns 26s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to   { transform: scale(1.20) translate3d(-1.5%, -1.5%, 0); }
}

/* Light sheen sweeping across the whole hero */
.hero-visual-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: heroSheen 7s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes heroSheen {
    0%   { transform: translateX(-130%); }
    45%, 100% { transform: translateX(130%); }
}

/* Floating info chips over the image */
.hero-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.95);
    color: #1a1a2e;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 16px 36px rgba(5,8,35,.35);
    animation: chipBob 5s ease-in-out infinite;
}
.hero-chip i { font-size: 1.05rem; }
.hero-chip strong { font-weight: 800; color: #e63946; }
.hero-chip-a { left: 6%; top: 26%; }
.hero-chip-a i { color: #4f8cff; }
.hero-chip-b { right: 6%; bottom: 18%; animation-delay: 1.4s; }
.hero-chip-b i { color: #22c55e; }
@keyframes chipBob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

/* --------------------------------------------------------------------------
   9. SHINY BUTTONS — sweeping shine, pulsing glow, hover bounce
   -------------------------------------------------------------------------- */
.btn-primary {
    background: linear-gradient(135deg, #e63946, #ff6b6b);
    animation: btnGlow 2.8s ease-in-out infinite;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
    transform: translateX(-160%) skewX(-18deg);
    animation: btnShine 3.2s ease-in-out infinite;
    pointer-events: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #d62f3c, #ff5a5a);
    transform: translateY(-3px) scale(1.04);
}
.btn-primary:active { transform: translateY(0) scale(.98); }
@keyframes btnShine {
    0%        { transform: translateX(-160%) skewX(-18deg); }
    45%, 100% { transform: translateX(380%) skewX(-18deg); }
}
@keyframes btnGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(230,57,70,.30); }
    50%      { box-shadow: 0 8px 30px rgba(230,57,70,.60), 0 0 0 4px rgba(230,57,70,.10); }
}
.btn-primary i { animation: btnIcon 2.8s ease-in-out infinite; }
@keyframes btnIcon {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px) scale(1.12); }
}
.btn-outline { transition: var(--transition), box-shadow .3s ease; }
.hero .btn-outline:hover,
.cta-band .btn-outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 26px rgba(255,255,255,.28);
}

/* Hero badge halo */
.hero-badge { animation: fadeInDown .8s ease, badgeHalo 3s ease-in-out 1s infinite; }
@keyframes badgeHalo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(197,202,233,.0); }
    50%      { box-shadow: 0 0 22px 2px rgba(197,202,233,.35); }
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr; }
    .how-section { padding: 64px 0; }
    .cta-wrap { padding: 0 16px 64px; }
    .cta-band { padding: 40px 22px; border-radius: 18px; }
}
@media (max-width: 768px) {
    .hero-trust { gap: 14px; font-size: .76rem; }
    .hero-scroll { display: none; }
    .hero-aurora i { filter: blur(50px); }
    .marquee-track { gap: 28px; animation-duration: 26s; }
    .marquee-item { font-size: .82rem; }
    .modal-overlay { padding: 78px 12px 16px; }
    .modal { max-height: calc(100vh - 104px); }
    .hero-visual::before {
        background: linear-gradient(180deg, rgba(10,14,48,.78) 0%, rgba(26,35,126,.55) 50%, rgba(10,14,48,.85) 100%);
    }
    .hero-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-aurora i,
    .marquee-track,
    .hero-scroll .mouse::after,
    .hero-visual,
    .hero-visual-frame img,
    .hero-visual-frame::after,
    .hero-chip,
    .btn-primary,
    .btn-primary::after,
    .btn-primary i,
    .hero-badge { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
}