/* ═══════════════════════════════════════════════════════════════════════════
   OTPGET-STYLE MODERN DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-light: #cbd5e1;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;
    --shadow-xs: 0 1px 2px 0 rgba(15,23,42,.05);
    --shadow-sm: 0 1px 3px 0 rgba(15,23,42,.1),0 1px 2px -1px rgba(15,23,42,.1);
    --shadow-md: 0 4px 6px -1px rgba(15,23,42,.1),0 2px 4px -2px rgba(15,23,42,.1);
    --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.1),0 4px 6px -4px rgba(15,23,42,.1);
    --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.1);
    --shadow-2xl: 0 25px 50px -12px rgba(15,23,42,.1);
    --shadow-primary: 0 10px 25px -5px rgba(37,99,235,.3);
    --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;
    --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-full:9999px;
    --transition-fast:150ms cubic-bezier(.4,0,.2,1);--transition-base:250ms cubic-bezier(.4,0,.2,1);--transition-slow:350ms cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.6;color:var(--text-secondary);background:var(--bg-primary);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;}

h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2;}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;}
h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:600;}
h4{font-size:1.1rem;font-weight:600;}
p{font-size:1rem;line-height:1.7;color:var(--text-secondary);}

.text-gradient{background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-800) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ─── Header & Nav ─────────────────────────────────────────────────────────── */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:var(--space-4) 0;background:rgba(255,255,255,.8);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:all var(--transition-base);}
.header.scrolled{border-bottom-color:var(--slate-200);background:rgba(255,255,255,.96);box-shadow:var(--shadow-sm);padding:var(--space-3) 0;}
.header-container{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);}
.logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex-shrink:0;}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-800) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:white;font-size:1.25rem;font-weight:800;box-shadow:var(--shadow-primary);transition:all var(--transition-fast);}
.logo:hover .logo-icon{transform:translateY(-2px);box-shadow:0 15px 35px -5px rgba(37,99,235,.4);}
.logo-text{font-size:1.45rem;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;font-family:'Poppins',sans-serif;}
.nav-menu{display:flex;align-items:center;gap:var(--space-2);list-style:none;margin-bottom:0;padding-left:0;}
.nav-link{padding:var(--space-2) var(--space-4);color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative;}
.nav-link::after{content:'';position:absolute;bottom:0;left:var(--space-4);right:var(--space-4);height:2px;background:var(--primary-600);border-radius:var(--radius-full);transform:scaleX(0);transition:transform var(--transition-fast);}
.nav-link:hover, .nav-link.active{color:var(--primary-600);background:var(--primary-50);}
.nav-link:hover::after, .nav-link.active::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:14px;font-weight:600;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;user-select:none;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-700) 100%);color:white;box-shadow:var(--shadow-primary);}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-700) 0%,var(--primary-800) 100%);color:white;transform:translateY(-2px);box-shadow:0 15px 35px -5px rgba(37,99,235,.4);}
.btn-secondary{background:var(--slate-100);color:var(--text-primary);border:1px solid var(--slate-200);}
.btn-secondary:hover{background:var(--slate-200);border-color:var(--slate-300);transform:translateY(-2px);color:var(--text-primary);}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid transparent;}
.btn-ghost:hover{background:var(--slate-100);color:var(--text-primary);}
.btn-lg{padding:var(--space-4) var(--space-6);font-size:15px;}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:13px;}
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-2);color:var(--text-primary);font-size:1.5rem;}

/* ─── Page Hero Banner ─────────────────────────────────────────────────────── */
.page-hero{padding:calc(var(--space-16) + 70px) 0 var(--space-12);background:linear-gradient(135deg,var(--slate-50) 0%,var(--bg-primary) 50%,var(--primary-50) 100%);border-bottom:1px solid var(--slate-200);text-align:center;}
.page-hero h1{margin-bottom:var(--space-3);}
.page-hero p{max-width:650px;margin:0 auto;color:var(--text-secondary);font-size:1.1rem;}

/* ─── Auth (Login & Register) ─────────────────────────────────────────────── */
body.auth-page .wa-float-btn{display:none!important;}
.auth-wrapper{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:24px 16px 40px;background:radial-gradient(circle at 50% 0%,rgba(37,99,235,.06) 0%,rgba(248,250,252,.7) 40%,#ffffff 100%),#f8fafc;position:relative;}
.auth-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 10% 20%,rgba(37,99,235,.04) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(37,99,235,.04) 0%,transparent 40%);pointer-events:none;}
.auth-card{width:100%;max-width:440px;background:#ffffff;border:1px solid rgba(226,232,240,.9);border-radius:18px;box-shadow:0 15px 35px -10px rgba(15,23,42,.07),0 0 0 1px rgba(226,232,240,.6);padding:24px 22px;position:relative;z-index:2;transition:all var(--transition-base);}
.auth-card.auth-card-wide{max-width:460px;}
.auth-header{text-align:center;margin-bottom:14px;}
.auth-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;border-radius:9999px;font-size:11px;font-weight:600;margin-bottom:8px;}
.auth-header h1, .auth-header h2{font-size:1.35rem;font-weight:700;color:var(--text-primary);margin-bottom:3px;letter-spacing:-.02em;font-family:'Poppins',sans-serif;}
.auth-header p{color:var(--text-tertiary);font-size:12px;line-height:1.4;margin-bottom:0;}

.form-label-custom{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-bottom:3px;display:block;}
.input-icon-wrap{position:relative;display:flex;align-items:center;}
.input-icon-left{position:absolute;left:11px;color:var(--slate-400);font-size:.95rem;pointer-events:none;z-index:2;display:flex;align-items:center;}
.input-custom{width:100%;height:38px;padding:7px 12px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:9px;font-size:13.5px;color:var(--text-primary);transition:all var(--transition-fast);outline:none;}
.input-custom.has-left-icon{padding-left:35px;}
.input-custom.has-right-icon{padding-right:32px;}
.input-custom:focus{background:#ffffff;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.input-icon-right{position:absolute;right:8px;color:var(--slate-400);cursor:pointer;background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:color var(--transition-fast);z-index:2;}
.input-icon-right:hover{color:var(--primary-600);}

.country-select{width:95px;height:38px;padding:0 8px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:9px;font-size:13px;font-weight:500;color:var(--text-primary);outline:none;cursor:pointer;line-height:36px;flex-shrink:0;transition:all var(--transition-fast);}
.country-select:focus{background:#ffffff;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(59,130,246,.12);}

.social-login-btn{width:100%;height:38px;background:#ffffff;border:1px solid var(--slate-200);border-radius:9px;font-size:13px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast);cursor:pointer;text-decoration:none;box-shadow:var(--shadow-xs);}
.social-login-btn:hover{background:var(--slate-50);border-color:var(--slate-300);transform:translateY(-1px);box-shadow:var(--shadow-sm);color:var(--text-primary);}

.auth-divider{position:relative;text-align:center;margin:10px 0;}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--slate-200);}
.auth-divider span{position:relative;background:#ffffff;padding:0 10px;color:var(--text-tertiary);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;}

.auth-submit-btn{height:38px;font-size:14px;font-weight:600;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px;}
.auth-forgot-link{font-size:12px;color:var(--primary-600);text-decoration:none;font-weight:500;transition:color var(--transition-fast);}
.auth-forgot-link:hover{color:var(--primary-800);text-decoration:underline;}

.auth-trust-strip{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--slate-100);flex-wrap:wrap;}
.auth-trust-item{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--slate-500);}
.auth-trust-item i{color:var(--primary-600);font-size:11px;}

.auth-footer-link{text-align:center;margin-top:10px;font-size:12.5px;color:var(--text-secondary);}
.auth-footer-link a{font-weight:700;color:var(--primary-600);text-decoration:none;transition:color var(--transition-fast);}
.auth-footer-link a:hover{color:var(--primary-800);text-decoration:underline;}

/* 2FA & OTP input */
.auth-otp-input{font-family:'JetBrains Mono',monospace;font-size:1.5rem;letter-spacing:.25em;text-align:center;font-weight:700;height:46px;background:#ffffff;}

/* Compact Password Bar */
.pw-compact-bar{height:3px;width:100%;background:var(--slate-200);border-radius:9999px;overflow:hidden;margin-top:4px;}
.pw-compact-fill{height:100%;width:0%;transition:all .2s ease;border-radius:9999px;}

@media(max-width:640px){
    .auth-wrapper{padding:10px 10px 24px;min-height:calc(100vh - 110px);}
    .auth-card{padding:18px 14px;border-radius:16px;}
    .auth-header h1, .auth-header h2{font-size:1.25rem;}
    .auth-header p{font-size:11.5px;}
    .auth-trust-strip{gap:8px;padding-top:10px;margin-top:10px;}
    .auth-trust-item{font-size:10px;}
}

/* ─── Services Page ────────────────────────────────────────────────────────── */
.services-browser{padding:var(--space-12) 0 var(--space-20);}
.search-filter-card{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);padding:var(--space-6);margin-bottom:var(--space-8);}
.search-input-lg{width:100%;padding:14px 20px 14px 48px;border:1px solid var(--slate-200);border-radius:var(--radius-xl);font-size:15px;background:var(--slate-50);transition:all var(--transition-fast);outline:none;}
.search-input-lg:focus{background:white;border-color:var(--primary-500);box-shadow:0 0 0 4px rgba(59,130,246,.12);}
.search-wrapper{position:relative;}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--slate-400);font-size:1.1rem;}

.category-pills{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4);}
.category-pill{padding:6px 14px;border-radius:var(--radius-full);background:var(--slate-100);color:var(--text-secondary);border:1px solid var(--slate-200);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);user-select:none;}
.category-pill:hover{background:var(--slate-200);color:var(--text-primary);}
.category-pill.active{background:var(--primary-600);color:white;border-color:var(--primary-600);box-shadow:var(--shadow-primary);}

.services-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5);}
.service-catalog-card{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-base);display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.service-catalog-card:hover{border-color:var(--primary-400);box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.service-header-row{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);}
.service-icon-box{width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.75rem;background:var(--slate-50);border:1px solid var(--slate-200);flex-shrink:0;}
.service-info h3{font-size:1.1rem;margin-bottom:2px;}
.service-info span{font-size:12px;color:var(--text-tertiary);font-weight:500;}
.service-footer-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--slate-100);padding-top:var(--space-4);margin-top:var(--space-2);}
.price-tag{font-size:1.15rem;font-weight:800;color:var(--primary-600);font-family:'Poppins',sans-serif;}
.price-tag small{font-size:11px;font-weight:500;color:var(--text-tertiary);}

/* ─── FAQ Page ─────────────────────────────────────────────────────────────── */
.faq-section-wrapper{padding:var(--space-12) 0 var(--space-20);background:var(--slate-50);}
.faq-filter-tabs{display:flex;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-10);flex-wrap:wrap;}
.faq-item{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden;transition:all var(--transition-base);}
.faq-item:hover{border-color:var(--primary-300);box-shadow:var(--shadow-md);}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);background:none;border:none;font-size:16px;font-weight:600;color:var(--text-primary);cursor:pointer;text-align:left;transition:color var(--transition-fast);font-family:'Poppins',sans-serif;}
.faq-question:hover{color:var(--primary-600);}
.faq-icon{color:var(--text-tertiary);transition:transform var(--transition-base);font-size:1.25rem;}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(180deg);color:var(--primary-600);}
.faq-answer{max-height:0;overflow:hidden;transition:all var(--transition-base);}
.faq-answer.active{max-height:600px;padding:0 var(--space-6) var(--space-6);}
.faq-answer p{color:var(--text-secondary);line-height:1.7;font-size:15px;margin-bottom:0;}

/* ─── Contact Page ─────────────────────────────────────────────────────────── */
.contact-wrapper{padding:var(--space-12) 0 var(--space-20);}
.contact-info-card{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-4);display:flex;align-items:flex-start;gap:var(--space-4);transition:all var(--transition-base);}
.contact-info-card:hover{border-color:var(--primary-300);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.contact-icon-box{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--primary-50);color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0;}
.contact-info-text h4{font-size:1rem;margin-bottom:3px;}
.contact-info-text p{font-size:13px;color:var(--text-tertiary);margin-bottom:2px;}
.contact-info-text a{font-weight:600;font-size:14px;}

.contact-form-card{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--space-8);}

/* ─── Blog Page ────────────────────────────────────────────────────────────── */
.blog-wrapper{padding:var(--space-12) 0 var(--space-20);background:var(--slate-50);}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-8);}
.blog-card{background:white;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);overflow:hidden;transition:all var(--transition-base);display:flex;flex-direction:column;}
.blog-card:hover{border-color:var(--primary-300);box-shadow:var(--shadow-xl);transform:translateY(-6px);}
.blog-thumb{width:100%;height:200px;background:linear-gradient(135deg,var(--primary-100),var(--primary-200));position:relative;display:flex;align-items:center;justify-content:center;color:var(--primary-700);font-size:3rem;}
.blog-badge{position:absolute;top:16px;left:16px;padding:4px 12px;background:rgba(255,255,255,.9);backdrop-filter:blur(5px);border-radius:var(--radius-full);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--primary-700);letter-spacing:1px;}
.blog-card-body{padding:var(--space-6);flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.blog-meta{display:flex;align-items:center;gap:var(--space-3);color:var(--text-tertiary);font-size:12px;margin-bottom:var(--space-3);}
.blog-title{font-size:1.2rem;margin-bottom:var(--space-3);color:var(--text-primary);transition:color var(--transition-fast);}
.blog-title:hover{color:var(--primary-600);}
.blog-excerpt{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-4);}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.footer{background:var(--slate-900);color:var(--slate-400);padding:var(--space-16) 0 var(--space-8);border-top:1px solid var(--slate-800);}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-12);margin-bottom:var(--space-16);}
.footer-column h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:white;margin-bottom:var(--space-6);font-family:'Poppins',sans-serif;}
.footer-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font-size:1.25rem;font-weight:800;color:white;font-family:'Poppins',sans-serif;}
.footer-desc{font-size:14px;line-height:1.7;color:var(--slate-400);max-width:300px;margin-bottom:var(--space-6);}
.social-links{display:flex;gap:var(--space-3);}
.social-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--slate-800);border:1px solid var(--slate-700);border-radius:var(--radius-md);color:var(--slate-400);transition:all var(--transition-fast);text-decoration:none;}
.social-link:hover{background:var(--primary-600);border-color:var(--primary-600);color:white;transform:translateY(-2px);}
.footer-links{list-style:none;padding-left:0;}
.footer-links li{margin-bottom:var(--space-3);}
.footer-links a{color:var(--slate-400);text-decoration:none;font-size:14px;transition:color var(--transition-fast);}
.footer-links a:hover{color:var(--primary-400);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-8);border-top:1px solid var(--slate-800);font-size:13px;color:var(--slate-500);}

/* ─── Floating WhatsApp & Support ─────────────────────────────────────────── */
.wa-float-btn{position:fixed;bottom:24px;right:24px;z-index:999999;display:inline-flex;align-items:center;gap:8px;background-color:#2563eb;color:#fff;padding:12px 18px;border-radius:50px;text-decoration:none;font-family:inherit;font-weight:600;font-size:14px;box-shadow:0 4px 14px rgba(37,99,235,0.4);transition:all var(--transition-fast);}
.wa-float-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.5);}

/* ─── Mobile Drawer (Hidden on Desktop) ────────────────────────────── */
.mobile-nav-backdrop,
.mobile-nav-drawer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .mobile-nav-backdrop {
        display: block !important;
        visibility: visible !important;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .mobile-nav-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-nav-drawer {
        display: flex !important;
        visibility: visible !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 310px;
        max-width: 86vw;
        height: 100vh;
        background: #ffffff;
        border-left: 1px solid var(--slate-200);
        padding: 20px 18px 36px;
        z-index: 1050;
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        flex-direction: column;
        pointer-events: auto;
    }
    .mobile-nav-drawer.active {
        transform: translateX(0);
    }
    .mobile-nav-drawer .nav-link {
        padding: 10px 14px;
        display: flex;
        align-items: center;
        border-radius: var(--radius-md);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-primary);
        text-decoration: none;
        transition: all var(--transition-fast);
    }
    .mobile-nav-drawer .nav-link:hover,
    .mobile-nav-drawer .nav-link.active {
        background: var(--primary-50);
        color: var(--primary-700);
    }
}

@media (min-width: 1025px) {
    .mobile-nav-backdrop,
    .mobile-nav-drawer,
    #mobileDrawerBackdrop,
    #mobileDrawer {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transform: translateX(100%) !important;
    }
}

@media(max-width:1024px){
    .nav-menu{display:none;}
    .mobile-menu-toggle{display:flex;}
    .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;gap:var(--space-4);text-align:center;}
    .auth-card{padding:var(--space-6);}
    .blog-grid{grid-template-columns:1fr;}
    .contact-wrapper{padding:24px 0 40px;}
    .contact-form-card{padding:18px 16px;border-radius:16px;}
    .contact-info-card{padding:14px;border-radius:14px;gap:12px;}
    .contact-icon-box{width:40px;height:40px;font-size:1.15rem;}
}