/* ============================================================
   desktop.css — professional desktop & tablet layout.
   Mobile (<600 px) is untouched; only wider breakpoints fire.
   ============================================================ */

/* ── Desktop nav: hidden on mobile, shown on desktop home ── */
.desktop-nav { display: none; }

/* ── hero-left wrapper: flex column on mobile (no visual change) ── */
.hero-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* hero-features pills: hidden on mobile */
.hero-features { display: none; }

/* form card header: hidden on mobile */
.form-card-header { display: none; }


/* ════════════════════════════════════════════════════════════
   TABLET PHONE-CARD (600 – 899 px) — all pages
   ════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {

    html, body { min-height: 100vh; }

    body {
        align-items: center !important;
        justify-content: center !important;
        padding: 28px 16px;
    }

    /* The app column on each page */
    .container,
    .page-wrapper,
    .page {
        width: 100%;
        max-width: 430px;
        min-height: min(900px, calc(100vh - 56px));
        max-height: calc(100vh - 56px);
        margin: 0 auto;
        border-radius: 38px;
        box-shadow:
            0 40px 90px rgba(79, 70, 229, .28),
            0 10px 30px rgba(109, 40, 217, .16);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
    }

    /* Slim on-brand scrollbar */
    .container::-webkit-scrollbar,
    .page-wrapper::-webkit-scrollbar,
    .page::-webkit-scrollbar { width: 8px; }

    .container::-webkit-scrollbar-thumb,
    .page-wrapper::-webkit-scrollbar-thumb,
    .page::-webkit-scrollbar-thumb {
        background: rgba(124, 58, 237, .25);
        border-radius: 8px;
    }

    /* Fixed bottom navs pin to the frame */
    .bottom-nav {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        border-radius: 0 0 38px 38px;
    }
}

/* Subtle wallpaper for non-home pages on wide screens */
@media (min-width: 1000px) {

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background:
            radial-gradient(circle at 18% 22%, rgba(168, 85, 247, .14), transparent 42%),
            radial-gradient(circle at 82% 78%, rgba(79, 70, 229, .14), transparent 42%);
        pointer-events: none;
        z-index: 0;
    }

    .container,
    .page-wrapper,
    .page { position: relative; z-index: 1; }
}


/* ════════════════════════════════════════════════════════════
   HOME PAGE — full professional landing layout (900 px +)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

    /* ── Body reset ── */
    body#page-home {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        min-height: 100vh;
        background: linear-gradient(150deg, #F0EBFF 0%, #EDE6FF 45%, #F8F5FF 100%) !important;
        overflow-y: auto;
    }

    body#page-home::before {
        content: "";
        position: fixed;
        inset: 0;
        background:
            radial-gradient(circle at 8%  18%, rgba(168, 85, 247, .20), transparent 36%),
            radial-gradient(circle at 92% 82%, rgba(79, 70, 229, .18), transparent 36%),
            radial-gradient(circle at 50% 50%, rgba(236, 72, 153, .07), transparent 55%);
        pointer-events: none;
        z-index: 0;
    }

    /* ── Sticky top navigation ── */
    body#page-home .desktop-nav {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 80px;
        height: 68px;
        background: rgba(255, 255, 255, .75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(139, 92, 246, .12);
        position: sticky;
        top: 0;
        z-index: 200;
        box-shadow: 0 2px 20px rgba(124, 58, 237, .06);
    }

    body#page-home .nav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    body#page-home .nav-brand img {
        width: 54px;
        height: 36px;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(124, 58, 237, .28));
    }

    body#page-home .nav-brand span {
        font-family: 'Poppins', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #3B1F7A;
        letter-spacing: -.2px;
    }

    body#page-home .nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body#page-home .nav-links a {
        font-family: 'Poppins', sans-serif;
        font-size: .875rem;
        font-weight: 500;
        color: #6B7280;
        text-decoration: none;
        padding: 8px 18px;
        border-radius: 22px;
        transition: color .18s, background .18s;
    }

    body#page-home .nav-links a:hover {
        color: #7C3AED;
        background: rgba(124, 58, 237, .08);
    }

    body#page-home .nav-links .nav-cta {
        color: #fff;
        background: linear-gradient(135deg, #A855F7, #7C3AED);
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(124, 58, 237, .30);
    }

    body#page-home .nav-links .nav-cta:hover {
        color: #fff;
        background: linear-gradient(135deg, #9333EA, #6D28D9);
        box-shadow: 0 6px 20px rgba(124, 58, 237, .40);
        transform: translateY(-1px);
    }

    /* ── Container becomes a 2-column grid ── */
    body#page-home .container {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1240px;
        min-height: calc(100vh - 68px);
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        padding: 0 80px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 440px;
        grid-template-areas: "left right";
        align-items: center;
        gap: 0 48px;
        text-align: left;
    }

    /* Deco images reposition to the hero area */
    body#page-home .deco-heart {
        width: 56px;
        top: 40px;
        left: 0;
    }

    body#page-home .deco-star {
        width: 34px;
        top: 120px;
        left: 0;
    }

    body#page-home .deco-party {
        width: 48px;
        top: 30px;
        right: auto;
        left: 480px;
    }

    /* ── Hero left column ── */
    body#page-home .hero-left {
        grid-area: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 64px 0 64px 0;
        gap: 0;
    }

    body#page-home .hero-left .logo {
        width: 96px;
        height: 64px;
        margin-bottom: 12px;
    }

    body#page-home .hero-left .logo-title {
        font-size: .9rem;
        font-weight: 600;
        color: #8B5CF6;
        letter-spacing: .3px;
        margin-bottom: 22px;
        text-align: left;
    }

    body#page-home .hero-left .heading {
        font-size: clamp(2.4rem, 3.5vw, 3.4rem);
        line-height: 1.1;
        margin-bottom: 16px;
        letter-spacing: -.8px;
    }

    body#page-home .hero-left .subtext {
        font-size: 1rem;
        line-height: 1.7;
        color: #6B7280;
        max-width: 460px;
        margin-bottom: 28px;
        font-weight: 400;
    }

    /* Feature pills */
    body#page-home .hero-features {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 36px;
    }

    body#page-home .hero-features span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'Poppins', sans-serif;
        font-size: .8rem;
        font-weight: 600;
        color: #7C3AED;
        background: rgba(124, 58, 237, .09);
        border: 1px solid rgba(124, 58, 237, .18);
        padding: 6px 14px;
        border-radius: 20px;
    }

    body#page-home .hero-left .chars {
        width: 100%;
        max-width: 420px;
        margin: 0;
        object-fit: contain;
        filter: drop-shadow(0 24px 48px rgba(124, 58, 237, .18));
    }

    /* ── Form card (right column) ── */
    body#page-home .form-section {
        grid-area: right;
        background: #fff;
        border-radius: 28px;
        box-shadow:
            0 32px 80px rgba(79, 70, 229, .16),
            0 8px 28px rgba(124, 58, 237, .10);
        padding: 44px 40px 36px;
        border: 1px solid rgba(139, 92, 246, .1);
        text-align: left;
        align-self: center;
    }

    /* Card header visible on desktop */
    body#page-home .form-card-header {
        display: block;
        margin-bottom: 22px;
    }

    body#page-home .form-card-header h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        color: #0F0A1E;
        margin: 0 0 4px;
        letter-spacing: -.3px;
    }

    body#page-home .form-card-header p {
        font-family: 'Poppins', sans-serif;
        font-size: .82rem;
        color: #9CA3AF;
        margin: 0;
    }

    /* Languages inside the form card on desktop */
    body#page-home .langs {
        padding-top: 14px;
        border-top: 1px solid #F3EEFF;
        margin-top: 8px;
        justify-content: flex-start;
        gap: 2px 3px;
    }

    /* find-out arrow: left-aligned on desktop */
    body#page-home .find-out {
        justify-content: flex-start;
    }
}

/* ── Extra wide (1280 px+): more breathing room ── */
@media (min-width: 1280px) {
    body#page-home .container {
        padding: 0 120px;
        gap: 0 64px;
    }

    body#page-home .desktop-nav {
        padding: 0 120px;
    }
}