/* ============================================================
   BPRO – Landing Page Stylesheet
   Theme: Apna Web brand color system
   ============================================================ */

/* ── Design Tokens (Apna Web logo colors) ── */
:root {
    /* Brand */
    --brand-primary:        #1A3A8F;   /* Navy — "A" / "APNA" in logo */
    --brand-primary-hover:  #132d72;   /* Navy hover */
    --brand-accent:         #00B4D8;   /* Cyan — "W" / "WEB" in logo */
    --brand-orange:         #0096C7;   /* Medium blue — globe pin */
    --brand-purple-light:   #E0F4FF;   /* Light cyan tint for badges */

    /* Text */
    --text-dark:            #1A1A2E;   /* Dark navy body text */
    --text-body:            #2d4a7a;   /* Navy paragraph text */
    --text-muted:           #6b89b8;   /* Muted blue */

    /* Backgrounds */
    --page-bg:              #F0F6FF;   /* Ice blue page bg */
    --bg-white:             #ffffff;
    --bg-soft:              #f0f6ff;
    --footer-bg:            #1A1A2E;
    --footer-text:          #6b89b8;

    /* Gradients */
    --gradient-brand:       linear-gradient(135deg, #00B4D8 0%, #1A3A8F 100%);
    --gradient-dark-hero:   linear-gradient(135deg, #1A1A2E 0%, #1A3A8F 50%, #0096C7 100%);
    --gradient-rainbow:     linear-gradient(89.95deg, rgb(26 58 143 / 85%) -10%, rgb(0 150 199 / 85%) 10%, rgb(0 180 216 / 85%) 35%, rgb(0 100 180 / 85%) 55%, rgb(14 165 233 / 85%) 73%, rgb(56 189 248 / 85%) 100%);
    --gradient-rainbow-solid: linear-gradient(84.87deg, #1A3A8F -20%, #0f5db0 -8%, #0096C7 5%, #00B4D8 18%, #38bdf8 32%, #7dd3fc 46%, #bae6fd 60%);
    --gradient-text-highlight: linear-gradient(89.95deg, #1A3A8F, #0096C7, #00B4D8);

    /* Borders & Shadows */
    --border-light:         #c8dff5;
    --shadow-sm:            0 0 6px 1px rgba(0,0,0,.06);
    --shadow-md:            0 4px 20px rgba(26,58,143,.12);
    --shadow-lg:            0 20px 60px rgba(26,58,143,.18), 0 4px 16px rgba(0,0,0,.08);

    /* Border Radii */
    --radius-xs:            6px;
    --radius-sm:            8px;
    --radius-md:            16px;
    --radius-lg:            24px;
    --radius-xl:            30px;

    /* Transitions */
    --transition:           all .25s ease;

    /* Selection */
    --selection-bg:         #90E0EF;
    --selection-color:      #1A1A2E;
}

/* ── Selection ── */
::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
}

/* ── Base ── */
.landing-body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--text-body);
    background: var(--page-bg);
    overflow-x: hidden;
    line-height: 1.6;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body h4,
.landing-body h5,
.landing-body h6 {
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.landing-body a { text-decoration: none; }

/* ── Section Badge ── */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-purple-light);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

/* ── Text Gradient ── */
.text-gradient {
    background: var(--gradient-text-highlight);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.navbar-landing {
    padding: 18px 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: var(--transition);
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(26,58,143,.08);
}

/* Solid white on non-hero pages and after scroll */
.navbar-landing.scrolled {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(26,58,143,.08);
    padding: 12px 0;
}

.navbar-landing .navbar-brand {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--brand-primary);
    letter-spacing: -.03em;
}

/* Logo image: always natural colors on light navbar */
.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: opacity .25s ease;
}
.navbar-logo:hover { opacity: .85; }

/* Fallback text brand */
.navbar-brand-text {
    color: var(--brand-primary);
}

.navbar-landing .nav-link {
    color: var(--text-body);
    font-weight: 500;
    font-size: 15px;
    padding: 6px 14px !important;
    border-radius: var(--radius-xs);
    transition: var(--transition);
}
.navbar-landing .nav-link:hover       { color: var(--brand-primary); background: var(--brand-purple-light); }
.navbar-landing .nav-link.fw-semibold { color: var(--brand-primary); }


/* Nav buttons */
.navbar-landing .btn-outline-light {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 20px;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transition: var(--transition);
}
.navbar-landing .btn-outline-light:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.navbar-landing .btn-bpro {
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 22px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(26,58,143,.25);
    transition: var(--transition);
}
.navbar-landing .btn-bpro:hover {
    background: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26,58,143,.35);
}

@media (max-width: 991px) {
    .navbar-landing { background: rgba(255,255,255,.97); }
    .navbar-landing .navbar-collapse {
        background: #fff;
        padding: 16px;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        margin-top: 8px;
    }
    .navbar-landing .nav-link          { border-bottom: 1px solid var(--border-light); padding: 10px 4px !important; }
    .navbar-landing .btn-outline-light,
    .navbar-landing .btn-bpro          { width: 100%; margin: 4px 0; }
}

/* ════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════ */
.hero-section {
    background: linear-gradient(145deg, #F0F6FF 0%, #daeef8 45%, #E8F4FD 100%);
    padding: 140px 0 110px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Decorative blobs */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 80% 40%, rgba(0,180,216,.18)  0%, transparent 65%),
        radial-gradient(ellipse 45% 60% at 5%  80%, rgba(26,58,143,.10)  0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 10%, rgba(0,150,199,.12)  0%, transparent 55%);
    pointer-events: none;
}

/* Animated floating orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    animation: floatOrb 9s ease-in-out infinite;
}
.hero-orb-1 { width:380px;height:380px; background:rgba(0,180,216,.12); top:-80px;  right:-80px;  animation-delay:0s; }
.hero-orb-2 { width:220px;height:220px; background:rgba(26,58,143,.08); bottom:-40px; left:5%;    animation-delay:3s; }
.hero-orb-3 { width:130px;height:130px; background:rgba(0,150,199,.10); top:35%;    left:42%;    animation-delay:5.5s; }

@keyframes floatOrb {
    0%,100% { transform: translateY(0)   scale(1); }
    50%      { transform: translateY(-18px) scale(1.04); }
}

/* Gradient top bar */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26,58,143,.07);
    border: 1px solid rgba(26,58,143,.18);
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 28px;
}
.hero-badge .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-orange);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* Hero Typography */
.hero-section h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin-bottom: 22px;
}
.hero-section h1 span {
    background: var(--gradient-rainbow-solid);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-section .lead {
    font-size: 1.15rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 36px;
}

/* Hero CTA Buttons */
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    border: none;
    box-shadow: 0 8px 28px rgba(26,58,143,.28);
    transition: var(--transition);
}
.btn-hero-primary:hover {
    background: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(26,58,143,.38);
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26,58,143,.06);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    border: 1.5px solid rgba(26,58,143,.3);
    transition: var(--transition);
}
.btn-hero-outline:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

/* Social Proof */
.hero-proof { display:flex; align-items:center; gap:14px; margin-top:40px; flex-wrap:wrap; }
.hero-avatars { display:flex; }
.hero-avatars img {
    width:34px; height:34px;
    border-radius:50%;
    border:2px solid #fff;
    margin-left:-10px;
    object-fit:cover;
}
.hero-avatars img:first-child { margin-left:0; }
.hero-proof-text { color:var(--text-body); font-size:13px; }
.hero-proof-text strong { color:var(--text-dark); }

/* ── Dashboard Mockup ── */
.hero-mockup { position:relative; z-index:1; }

.mockup-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg);
}

.mockup-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.mockup-dot        { width:12px;height:12px;border-radius:50%; }
.mockup-dot.red    { background:#ff5f57; }
.mockup-dot.yellow { background:#ffbd2e; }
.mockup-dot.green  { background:#28c840; }

.mockup-url-bar {
    flex:1;
    background: var(--bg-soft);
    border-radius: var(--radius-xs);
    height:28px;
    display:flex;align-items:center;
    padding:0 12px;
    font-size:12px;
    color:var(--text-muted);
    gap:6px;
}

.mockup-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }

.mockup-stat {
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding:14px;
}
.mockup-stat .label { font-size:11px; color:var(--text-muted); font-weight:500; }
.mockup-stat .value { font-size:22px; font-weight:900; color:var(--text-dark); margin:4px 0 2px; }
.mockup-stat .trend { font-size:11px; font-weight:600; }
.mockup-stat .trend.up   { color:#22c55e; }
.mockup-stat .trend.down { color:#f43f5e; }

.mockup-chart { background:var(--bg-soft); border-radius:var(--radius-sm); padding:14px; margin-bottom:16px; }
.mockup-chart-label { font-size:12px; color:var(--text-body); font-weight:600; margin-bottom:10px; }
.mockup-bars { display:flex; align-items:flex-end; gap:6px; height:60px; }
.mockup-bar {
    flex:1;
    border-radius:4px 4px 0 0;
    background: var(--gradient-brand);
    opacity:.7;
    transition:var(--transition);
}
.mockup-bar:nth-child(even) { opacity:.35; }
.mockup-bar:hover           { opacity:1; }

.mockup-message {
    display:flex;align-items:center;gap:10px;
    background:var(--bg-soft);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    margin-bottom:8px;
}
.mockup-message:last-child { margin-bottom:0; }
.mockup-avatar {
    width:30px;height:30px;border-radius:50%;
    background: var(--gradient-brand);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
}
.mockup-msg-text .name { font-size:12px;font-weight:600;color:var(--text-dark); }
.mockup-msg-text .msg  { font-size:11px;color:var(--text-muted); }
.mockup-badge {
    margin-left:auto;
    background:#fff3e0;color:#c2410c;
    font-size:10px;font-weight:700;
    padding:2px 8px;border-radius:20px;white-space:nowrap;
}

.mockup-floating {
    position:absolute;
    background:#fff;
    border-radius:var(--radius-md);
    padding:10px 16px;
    box-shadow:0 8px 24px rgba(42,31,49,.15);
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:600;color:var(--text-dark);
    animation:floatBadge 4s ease-in-out infinite;
    z-index:2;
}
.mockup-floating .icon { font-size:18px; }
@keyframes floatBadge { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.mockup-floating-1 { bottom:-20px; left:-20px;  animation-delay:1s; }
.mockup-floating-2 { top:-16px;    right:-16px; animation-delay:2.5s; }

/* ════════════════════════════════════════
   BRAND STRIP
════════════════════════════════════════ */
.brand-strip {
    background: var(--bg-white);
    padding: 32px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.brand-strip p { font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px; }
.brand-logos { display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;opacity:.5; }
.brand-logos span { font-size:15px;font-weight:900;color:var(--text-dark);letter-spacing:-.02em; }

/* ════════════════════════════════════════
   STATS SECTION
════════════════════════════════════════ */
.stats-section {
    padding: 80px 0;
    background: var(--gradient-dark-hero);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse at 30% 50%, rgba(105,52,255,.25) 0%, transparent 60%);
}
.stats-section::after {
    content:'';position:absolute;
    top:0;left:0;right:0;height:3px;
    background: var(--gradient-rainbow-solid);
}
.stat-item { position:relative;text-align:center; }
.stat-number {
    font-size: clamp(2.2rem,4vw,3rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.03em;
}
.stat-label { color:rgba(255,255,255,.72);font-size:15px;font-weight:500; }

/* ════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════ */
.hiw-section { padding:100px 0; background:var(--bg-white); }

.hiw-step { text-align:center; padding:0 20px; }

.hiw-icon-wrap {
    width:76px;height:76px;
    border-radius:var(--radius-md);
    background: var(--brand-purple-light);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;
    font-size:2rem;
    color: var(--brand-primary);
    transition:var(--transition);
}
.hiw-step:hover .hiw-icon-wrap {
    background: var(--gradient-brand);
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(26,58,143,.3);
}

.hiw-number {
    width:40px;height:40px;border-radius:50%;
    background: var(--gradient-brand);
    color:#fff;font-size:16px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 16px;
    box-shadow:0 6px 16px rgba(26,58,143,.35);
}
.hiw-connector { display:flex;align-items:center;padding-top:24px;color:var(--border-light);font-size:1.5rem; }

/* ════════════════════════════════════════
   FEATURES SECTION
════════════════════════════════════════ */
.features-section { padding:100px 0; background:var(--page-bg); }

.feature-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    border: 1px solid var(--border-light);
    transition: var(--transition);
    height: 100%;
}
.feature-card:hover {
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.feature-icon-wrap {
    width:56px;height:56px;
    border-radius:var(--radius-sm);
    background: var(--gradient-brand);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:#fff;
    margin-bottom:20px;
    box-shadow:0 6px 16px rgba(26,58,143,.28);
}
.feature-card h5 { font-size:1rem;font-weight:800;margin-bottom:10px;color:var(--text-dark); }
.feature-card p  { font-size:14px;color:var(--text-body);line-height:1.65;margin:0; }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.testimonials-section { padding:100px 0; background:var(--bg-white); }

.testimonial-card {
    background: var(--page-bg);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border-light);
    height: 100%;
    transition: var(--transition);
}
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(26,58,143,.25);
}
.testimonial-card .quote-icon { font-size:2.5rem;color:var(--brand-primary);opacity:.12;line-height:1;margin-bottom:4px; }
.testimonial-stars { color:#0096C7;font-size:14px;margin-bottom:14px; }
.testimonial-text  { font-size:15px;color:var(--text-body);line-height:1.7;margin-bottom:24px; }
.testimonial-author{ display:flex;align-items:center;gap:12px; }
.testimonial-author img { width:44px;height:44px;border-radius:50%;object-fit:cover; }
.testimonial-author .name { font-size:14px;font-weight:700;color:var(--text-dark); }
.testimonial-author .role { font-size:12px;color:var(--text-muted); }

/* ════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════ */
.cta-section {
    padding: 100px 0;
    background: var(--gradient-dark-hero);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.cta-section::before {
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse at 50% 0%, rgba(105,52,255,.3) 0%, transparent 60%);
    pointer-events:none;
}
.cta-section::after {
    content:'';position:absolute;
    top:0;left:0;right:0;height:3px;
    background: var(--gradient-rainbow-solid);
}
.cta-section h2  { color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:16px; }
.cta-section p   { color:rgba(255,255,255,.78);font-size:1.1rem;margin-bottom:36px; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 72px 0 32px;
    position: relative;
}
.footer::before {
    content:'';position:absolute;
    top:0;left:0;right:0;height:3px;
    background: var(--gradient-rainbow-solid);
}
.footer .footer-brand h3 { color:#fff;font-size:1.6rem;font-weight:900;margin-bottom:12px;letter-spacing:-.03em; }
.footer .footer-brand p  { font-size:14px;line-height:1.7;max-width:260px;color:var(--footer-text); }

.footer .footer-social { display:flex;gap:10px;margin-top:24px; }
.footer .footer-social a {
    width:38px;height:38px;border-radius:var(--radius-xs);
    background:rgba(255,255,255,.08);
    color:var(--footer-text);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:var(--transition);text-decoration:none;
}
.footer .footer-social a:hover { background:var(--brand-primary);color:#fff; }

.footer h5 {
    color:#fff;font-size:13px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:18px;
}
.footer-links { list-style:none;padding:0;margin:0; }
.footer-links a {
    color:var(--footer-text);text-decoration:none;
    font-size:14px;display:block;padding:4px 0;transition:var(--transition);
}
.footer-links a:hover { color:#fff;padding-left:4px; }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:48px;padding-top:24px;font-size:13px;
}

/* ════════════════════════════════════════
   PAGE HERO (inner pages)
════════════════════════════════════════ */
.page-hero {
    background: var(--gradient-dark-hero);
    padding: 120px 0 72px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(105,52,255,.25), transparent 60%);
}
.page-hero::after {
    content:'';position:absolute;
    bottom:0;left:0;right:0;height:3px;
    background: var(--gradient-rainbow-solid);
}
.page-hero h1 { color:#fff;font-size:clamp(2rem,4vw,3rem);font-weight:900;margin-bottom:12px;position:relative; }
.page-hero p  { color:rgba(255,255,255,.75);font-size:1.05rem;margin:0;position:relative; }

.page-hero .breadcrumb { justify-content:center;margin-bottom:16px; }
.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a { color:rgba(255,255,255,.6);font-size:13px;text-decoration:none; }
.page-hero .breadcrumb-item.active { color:rgba(255,255,255,.9); }
.page-hero .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.35); }

/* ════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════ */
.contact-info-icon {
    width:52px;height:52px;border-radius:var(--radius-sm);
    background: var(--gradient-brand);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:#fff;flex-shrink:0;
    box-shadow:0 6px 16px rgba(26,58,143,.28);
}
.contact-form-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    padding: 48px;
    box-shadow: var(--shadow-md);
}
@media(max-width:768px){ .contact-form-card{ padding:28px 20px; } }

/* ════════════════════════════════════════
   AUTH PAGES
════════════════════════════════════════ */
.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media(max-width:768px){ .auth-layout{ grid-template-columns:1fr; } }

.auth-brand-side {
    background: linear-gradient(145deg, #F0F6FF 0%, #daeef8 45%, #E8F4FD 100%);
    display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start;
    padding:60px 56px;
    position:relative;overflow:hidden;
}

/* Login left panel — white, centered, mirrors the form side */
.auth-brand-side.login-style {
    background: #ffffff;
    align-items:center;
    text-align:center;
    border-right: 1px solid var(--border-light);
}
.auth-brand-side.login-style::before {
    background: radial-gradient(ellipse at 80% 20%, rgba(0,180,216,.08), transparent 55%),
                radial-gradient(ellipse at 15% 85%, rgba(26,58,143,.06), transparent 55%);
}
.auth-brand-side.login-style .auth-brand-features li {
    justify-content: center;
}
.auth-brand-side.login-style .auth-brand-logo {
    justify-content: center;
}

/* Signup left panel — content aligned to top */
.auth-brand-side.signup-style {
    justify-content: flex-start;
    padding-top: 72px;
}
.auth-brand-side::before {
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse at 85% 20%, rgba(0,180,216,.15), transparent 55%),
                radial-gradient(ellipse at 10% 90%, rgba(26,58,143,.10), transparent 55%);
}
.auth-brand-side::after {
    content:'';position:absolute;
    top:0;left:0;right:0;height:4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}
.auth-brand-side > * { position:relative;z-index:1; }

@media(max-width:768px){ .auth-brand-side{ display:none; } }

.auth-brand-logo {
    font-size:1.8rem;font-weight:900;color:var(--brand-primary);
    display:flex;align-items:center;gap:10px;
    margin-bottom:56px;text-decoration:none;letter-spacing:-.03em;
}
.auth-brand-logo:hover { color:var(--brand-primary-hover); }

.auth-brand-side h2 {
    color:var(--text-dark);font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:900;line-height:1.2;margin-bottom:20px;letter-spacing:-.03em;
}
.auth-brand-side h2 span {
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-brand-side p { color:var(--text-body);font-size:15px;line-height:1.7;margin-bottom:40px; }
.auth-brand-features { list-style:none;padding:0;margin:0; }
.auth-brand-features li {
    color:var(--text-body);font-size:14px;font-weight:500;
    padding:8px 0;display:flex;align-items:center;gap:10px;
}
.auth-brand-features li i { color:var(--brand-primary);font-size:16px; }

.auth-form-side {
    background: var(--page-bg);
    display:flex;flex-direction:column;
    justify-content:center;padding:60px 56px;overflow-y:auto;
}
@media(max-width:768px){ .auth-form-side{ padding:40px 24px; } }

.auth-form-header { margin-bottom:36px; }
.auth-form-header .back-link {
    display:inline-flex;align-items:center;gap:6px;
    color:var(--text-muted);font-size:13px;font-weight:500;
    text-decoration:none;margin-bottom:32px;transition:var(--transition);
}
.auth-form-header .back-link:hover { color:var(--brand-primary); }
.auth-form-header h2 { font-size:1.8rem;font-weight:900;color:var(--text-dark);margin-bottom:8px;letter-spacing:-.03em; }
.auth-form-header p  { color:var(--text-body);font-size:14px;margin:0; }

.auth-form-group { margin-bottom:20px; }
.auth-form-group label {
    font-size:14px;font-weight:600;color:var(--text-dark);
    margin-bottom:8px;display:block;
}
.auth-form-group .form-control {
    border:1.5px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:12px 16px;font-size:14px;
    color:var(--text-dark);background:var(--bg-white);
    transition:var(--transition);
}
.auth-form-group .form-control:focus {
    border-color:var(--brand-primary);
    box-shadow:0 0 0 3px rgba(26,58,143,.12);
}
.auth-form-group .input-group .form-control  { border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.auth-form-group .input-group .btn {
    border:1.5px solid var(--border-light);border-left:none;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    background:var(--bg-white);color:var(--text-muted);
    padding:0 14px;transition:var(--transition);
}
.auth-form-group .input-group .btn:hover { color:var(--brand-primary); }

.btn-auth-primary {
    width:100%;padding:14px;
    background: var(--gradient-brand);
    color:#fff;font-weight:700;font-size:15px;
    border:none;border-radius:var(--radius-lg);
    cursor:pointer;transition:var(--transition);
    box-shadow:0 6px 20px rgba(26,58,143,.38);
}
.btn-auth-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(26,58,143,.48);
    color:#fff;background:linear-gradient(135deg,#00B4D8 0%,#1A3A8F 100%);
}

.auth-divider {
    display:flex;align-items:center;gap:12px;
    color:var(--text-muted);font-size:13px;margin:24px 0;
}
.auth-divider::before,.auth-divider::after { content:'';flex:1;height:1px;background:var(--border-light); }

/* ════════════════════════════════════════
   GENERAL BUTTONS
════════════════════════════════════════ */
.btn-primary-landing {
    background: var(--gradient-brand);
    color:#fff;border:none;
    padding:12px 28px;border-radius:var(--radius-lg);
    font-weight:700;font-size:15px;text-decoration:none;
    display:inline-flex;align-items:center;gap:8px;
    transition:var(--transition);
    box-shadow:0 6px 20px rgba(26,58,143,.32);
}
.btn-primary-landing:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(26,58,143,.42);
    color:#fff;background:linear-gradient(135deg,#00B4D8 0%,#1A3A8F 100%);
}

.btn-outline-landing {
    background:transparent;color:var(--brand-primary);
    border:1.5px solid var(--brand-primary);
    padding:12px 28px;border-radius:var(--radius-lg);
    font-weight:700;font-size:15px;text-decoration:none;
    display:inline-flex;align-items:center;gap:8px;
    transition:var(--transition);
}
.btn-outline-landing:hover {
    background:var(--brand-primary);color:#fff;
    transform:translateY(-2px);
}

/* ════════════════════════════════════════
   FORM CONTROLS (landing context)
════════════════════════════════════════ */
.landing-body .form-control,
.landing-body .form-select {
    border:1.5px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:12px 16px;font-size:14px;
    font-family:'Inter',sans-serif;
    color:var(--text-dark);background:var(--bg-white);
    transition:var(--transition);
}
.landing-body .form-control:focus,
.landing-body .form-select:focus {
    border-color:var(--brand-primary);
    box-shadow:0 0 0 3px rgba(26,58,143,.12);
}
.landing-body .form-label { font-size:14px;font-weight:600;color:var(--text-dark); }