/* ══════════════════════════════════════════
   CSS VARIABLES — REFINED PALETTE
   ══════════════════════════════════════════ */
 :root {
     --primary: #4F46E5;
     --primary-dk: #4338CA;
     --primary-lt: #6366F1;
     --primary-xlt: #818CF8;
     --secondary: #7C3AED;
     --secondary-lt: #8B5CF6;
     --accent: #38BDF8;
     --accent-dk: #0EA5E9;

     /* Public site backgrounds */
     --bg-white: #FFFFFF;
     --bg-offwhite: #F9FAFB;
     --bg-light: #F3F4F6;
     --bg-soft-indigo: #EEF2FF;
     --bg-soft-purple: #F5F3FF;
     --bg-soft-sky: #F0F9FF;
     --bg-slate: #F8FAFC;

     /* Admin palette — refined */
     --admin-bg: #F0F4F8;
     --admin-sidebar: #1A1D2E;
     --admin-sidebar-hover: rgba(255, 255, 255, .07);
     --admin-sidebar-active: rgba(79, 70, 229, .32);
     --admin-header: linear-gradient(135deg, #312E81, #4338CA, #4F46E5);
     --admin-card-bg: #FFFFFF;
     --admin-border: #E8ECF0;
     --admin-text: #1A1D2E;
     --admin-muted: #6B7280;

     /* Semantic */
     --danger: #EF4444;
     --success: #10B981;
     --warning: #F59E0B;
     --info: #38BDF8;

     /* Legacy compat */
     --dark: #F9FAFB;
     --dark-2: #FFFFFF;
     --dark-3: #F3F4F6;
     --dark-4: #E5E7EB;
     --dark-5: #D1D5DB;
     --light: #0F172A;
     --light-2: #1E293B;
     --muted: #6B7280;
     --muted-2: #9CA3AF;
     --white: #FFFFFF;
     --border: #E5E7EB;
     --border-hover: #C7D2FE;
     --dark-navy: #0F172A;

     /* Typography */
     --ff-head: 'Playfair Display', Georgia, serif;
     --ff-body: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
     --ff-mono: 'IBM Plex Mono', 'Fira Code', monospace;

     /* Radii */
     --radius: 8px;
     --radius-lg: 14px;
     --radius-xl: 22px;

     /* Shadows — more dimensional */
     --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 16px 48px rgba(79, 70, 229, 0.12);
     --shadow-xl: 0 28px 72px rgba(79, 70, 229, 0.16);

     --transition: 0.28s ease;
     --max-w: 1240px;
     --nav-h: 76px;

     /* Admin layout */
     --admin-sidebar-w: 256px;
     --admin-header-h: 64px;
 }

 /* ══════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════ */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(22px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeLeft {
     from {
         opacity: 0;
         transform: translateX(22px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes waPulse {
     0% {
         transform: scale(1);
         opacity: .8;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }

 @keyframes gradientPan {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes shimmer {
     0% {
         background-position: -200% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 @keyframes slideInLeft {
     from {
         transform: translateX(-100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: .5;
     }
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* ══════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════ */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scrollbar-gutter: stable;
 }

 body {
     font-family: var(--ff-body);
     background: var(--bg-offwhite);
     color: var(--light);
     line-height: 1.7;
     font-size: 15px;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 a {
     color: var(--primary);
     text-decoration: none;
     transition: color var(--transition);
 }

 a:hover {
     color: var(--primary-dk);
 }

 ul {
     list-style: none;
 }

 button {
     font-family: var(--ff-body);
 }

 /* ══════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════ */
 .container {
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 28px;
 }

 .section {
     padding: 100px 0;
 }

 .section-sm {
     padding: 60px 0;
 }

 .text-center {
     text-align: center;
 }

 .section-white {
     background: var(--bg-white);
 }

 .section-offwhite {
     background: var(--bg-offwhite);
 }

 .section-light {
     background: var(--bg-light);
 }

 .section-soft-indigo {
     background: var(--bg-soft-indigo);
 }

 .section-soft-purple {
     background: var(--bg-soft-purple);
 }

 .section-soft-sky {
     background: var(--bg-soft-sky);
 }

 .section-slate {
     background: var(--bg-slate);
 }

 section:nth-of-type(odd) {
     background: var(--bg-offwhite);
 }

 section:nth-of-type(even) {
     background: var(--bg-white);
 }

 .section-override-white {
     background: var(--bg-white) !important;
 }

 .section-override-indigo {
     background: var(--bg-soft-indigo) !important;
 }

 .section-override-purple {
     background: var(--bg-soft-purple) !important;
 }

 .section-override-sky {
     background: var(--bg-soft-sky) !important;
 }

 .section-override-primary {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%) !important;
     color: #fff !important;
 }

 .section-override-primary .section-title,
 .section-override-primary .section-subtitle {
     color: #fff !important;
 }

 .pre-footer-section,
 section:has(+ footer) {
     background: linear-gradient(160deg, #E0F2FE 0%, #EFF6FF 50%, #E0F2FE 100%) !important;
     border-top: 1px solid rgba(56, 189, 248, .22);
     border-bottom: 1px solid rgba(56, 189, 248, .22);
 }

 /* ══════════════════════════════════════════
   SECTION LABELS & TITLES
   ══════════════════════════════════════════ */
 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .28em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 14px;
 }

 .section-label::before {
     content: '';
     width: 28px;
     height: 2px;
     background: linear-gradient(90deg, var(--primary), transparent);
     flex-shrink: 0;
     border-radius: 2px;
 }

 .section-title {
     font-family: var(--ff-head);
     font-size: clamp(1.9rem, 4vw, 3rem);
     font-weight: 900;
     line-height: 1.15;
     color: var(--light);
     margin-bottom: 16px;
 }

 .section-subtitle {
     font-size: 16px;
     color: var(--muted);
     max-width: 600px;
     margin-bottom: 52px;
     line-height: 1.85;
 }

 /* ══════════════════════════════════════════
   BUTTONS — consistent everywhere
   ══════════════════════════════════════════ */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 13px 30px;
     border-radius: var(--radius);
     font-family: var(--ff-body);
     font-weight: 700;
     font-size: 13px;
     letter-spacing: .08em;
     text-transform: uppercase;
     cursor: pointer;
     transition: all var(--transition);
     border: 2px solid transparent;
     white-space: nowrap;
     position: relative;
     overflow: hidden;
     line-height: 1;
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
     color: #fff;
     box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
 }

 .btn-primary:hover {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(79, 70, 229, .42);
 }

 .btn-outline {
     background: transparent;
     color: var(--primary);
     border-color: var(--primary);
 }

 .btn-outline:hover {
     background: var(--primary);
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(79, 70, 229, .3);
 }

 .btn-danger {
     background: var(--danger);
     color: #fff;
     border-color: var(--danger);
 }

 .btn-danger:hover {
     background: #DC2626;
     transform: translateY(-1px);
 }

 .btn-success {
     background: var(--success);
     color: #fff;
     border-color: var(--success);
 }

 .btn-success:hover {
     background: #059669;
     transform: translateY(-1px);
 }

 .btn-warning {
     background: var(--warning);
     color: #fff;
     border-color: var(--warning);
 }

 .btn-ghost {
     background: transparent;
     color: var(--muted);
     border-color: var(--border);
 }

 .btn-ghost:hover {
     background: var(--bg-light);
     color: var(--light);
     border-color: var(--dark-5);
 }

 .btn-sm {
     padding: 7px 16px;
     font-size: 11px;
 }

 .btn-lg {
     padding: 16px 36px;

 }

 .btn-icon {
     padding: 8px;
     min-width: 36px;
     border-radius: var(--radius);
 }

 /* ══════════════════════════════════════════
   PUBLIC NAVBAR
   ══════════════════════════════════════════ */
 .site-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--nav-h);
     background: transparent;
     z-index: 1000;
     transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
 }

 .site-header.scrolled {
     background: var(--secondary) 0%, var(--primary) 100% !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
     border-bottom: 1px solid var(--border) !important;
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: var(--nav-h);
 }

 /* Logo */
 .logo {
     display: flex;
     align-items: center;
     gap: 14px;
     text-decoration: none;
     position: relative;
     margin-left: -150px;
 }

 .logo-img {
     height: 52px;
     width: auto;
     object-fit: contain;
     transition: all .35s ease;
     filter: drop-shadow(0 0 12px rgba(56, 189, 248, .2));
 }

 .logo:hover .logo-img {
     transform: scale(1.04);
 }

 .site-header.scrolled .logo-img {
     height: 46px;
 }

 .logo-text-mobile {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
     font-family: var(--ff-head);
     font-size: 1.06rem;
     font-weight: 900;
     color: #fff;
     letter-spacing: -.02em;
     transition: color .3s;
 }

 .logo-text-mobile small {
     font-family: var(--ff-body);
     font-size: .67rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .7);
     text-transform: uppercase;
     letter-spacing: .14em;
     margin-top: 3px;
     transition: color .3s;
 }

 .site-header.scrolled .logo-text-mobile {
     color: var(--light);
 }

 .site-header.scrolled .logo-text-mobile small {
     color: var(--muted);
 }

 /* Nav links */
 .main-nav {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .main-nav a {
     padding: 11px 18px;
     font-size: 20px;
     font-weight: 700;
     letter-spacing: .05em;
     color: rgba(114, 131, 151, 0.92);
     border-radius: var(--radius);
     position: relative;
     transition: all var(--transition);
 }

 .main-nav a::after {
     content: '';
     position: absolute;
     bottom: 3px;
     left: 50%;
     right: 50%;
     height: 2px;
     background: var(--accent);
     transition: left var(--transition), right var(--transition);
     border-radius: 2px;
 }

 .main-nav a:hover::after,
 .main-nav a.active::after {
     left: 18%;
     right: 18%;
 }

 .main-nav a:hover,
 .main-nav a.active {
     color: #fff;
 }



 .site-header.scrolled .main-nav a:hover,
 .site-header.scrolled .main-nav a.active {
     color: var(--primary);
 }

 .main-nav a.btn-nav {
     background: linear-gradient(135deg, var(--secondary), var(--primary));
     color: #fff !important;
     font-weight: 800;
     padding: 9px 22px;
     margin-left: 8px;
     border-radius: var(--radius);
     box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
 }

 .main-nav a.btn-nav::after {
     display: none;
 }

 .main-nav a.btn-nav:hover {
     background: linear-gradient(135deg, var(--primary), var(--primary-dk));
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(79, 70, 229, .4);
 }
   .nav-toggle {
    display: none;
   }
 /* Mobile toggle */
 @media (max-width: 640px) {

     /* Toggle button fix */
     .nav-toggle {
         display: none;
         width: 45px;
         height: 45px;
         background: transparent;
         border: none;
         outline: none !important;
         cursor: pointer;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 5px;

     }

     .nav-toggle span {
         display: block;
         width: 26px;
         height: 3px;
         background: #0f81eb;
         border-radius: 10px;
     }

     .main-nav {
         display: none;
         position: fixed;
         top: 74px;

         left: 0;
         right: 0;
         height: calc(100vh - 74px);
         overflow-y: auto;

         background: rgba(15, 23, 42, 0.98);
         backdrop-filter: blur(24px);

         flex-direction: column;
         align-items: center;
         justify-content: flex-start;

         padding: 30px 20px 80px;
         gap: 10px;
         z-index: 999;
     }

     .main-nav.open {
         display: flex;
     }

     .main-nav a {
         width: 100%;
         max-width: 300px;
         min-height: 54px;

         display: flex;
         align-items: center;
         justify-content: center;

         font-size: 18px;
         /* mobile pe bari text */
         font-weight: 700;
         border-radius: 14px;

         background: rgba(255, 255, 255, 0.04);
         border: 1px solid rgba(255, 255, 255, 0.08);
     }

     .main-nav a::after {
         display: none;
     }
 }

 /* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
 .hero {
     position: relative;
     min-height: 100vh;
     width: 100%;
     display: flex;
     align-items: center;
     overflow: hidden;
     isolation: isolate;
 }

 .hero-image-col {
     position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     z-index: -3 !important;
     display: block !important;
     overflow: hidden;
 }

 .hero-image-col img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center !important;
     display: block !important;
     filter: brightness(0.7) saturate(1.1);
     transition: transform 9s ease;
 }

 .hero:hover .hero-image-col img {
     transform: scale(1.04);
 }

 .hero-image-col::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 1;
     background:
         linear-gradient(to right,
             rgba(10, 10, 30, .92) 0%,
             rgba(10, 10, 30, .75) 35%,
             rgba(15, 15, 40, .48) 65%,
             rgba(15, 15, 40, .15) 100%),
         linear-gradient(135deg,
             rgba(79, 70, 229, .35) 0%,
             rgba(124, 58, 237, .18) 100%);
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     z-index: -3;
 }

 .hero-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.7) saturate(1.1);
     transition: transform 9s ease;
 }

 .hero:hover .hero-bg img {
     transform: scale(1.04);
 }

 .hero-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 1;
     background:
         linear-gradient(to right,
             rgba(10, 10, 30, .92) 0%,
             rgba(10, 10, 30, .75) 35%,
             rgba(15, 15, 40, .48) 65%,
             rgba(15, 15, 40, .15) 100%),
         linear-gradient(135deg,
             rgba(79, 70, 229, .35) 0%,
             rgba(124, 58, 237, .18) 100%);
 }

 .hero-grid-lines {
     position: absolute;
     inset: 0;
     z-index: -1;
     pointer-events: none;
     background-image:
         linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .hero .container {
     position: relative;
     z-index: 5;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
 }

 .hero-content {
     flex: 1;
     max-width: 660px;
     padding-top: 120px;
     padding-bottom: 80px;
     text-align: left;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     margin-left: 80px;
     animation: fadeUp .8s ease both;
 }

 /* Premium Hero Badge */
 .hero-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     padding: 12px 22px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(14px);
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 999px;
     color: #fff;
     font-size: 12px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .14em;
     margin-bottom: 28px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
     max-width: 100%;
     text-align: center;
     transition: all .3s ease;
 }

 .hero-badge::before {
     content: '';
     width: 10px;
     height: 10px;
     flex-shrink: 0;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent), var(--primary));
     box-shadow: 0 0 12px rgba(79, 70, 229, .5);
 }

 .hero-badge:hover {
     transform: translateY(-2px);
 }

 /* Mobile Responsive */
 @media (max-width: 640px) {
     .hero-badge {
         padding: 10px 16px;
         font-size: 10px;
         letter-spacing: .08em;
         gap: 8px;
         width: fit-content;
         max-width: 95%;
         margin-inline: auto;
     }

     .hero-badge::before {
         width: 8px;
         height: 8px;
     }
 }

 .hero-title {
     font-family: var(--ff-head);
     font-size: clamp(3rem, 6.5vw, 6rem);
     line-height: .96;
     font-weight: 900;
     color: #fff;
     margin-bottom: 24px;
     letter-spacing: -.02em;
     text-align: left;
     margin-left: 20px;
 }

 .hero-title span {
     display: block;
     color: var(--accent);
     text-shadow: 0 0 40px rgba(56, 189, 248, .5), 0 0 80px rgba(56, 189, 248, .2);
 }

 .hero-subtitle {
     font-size: 17px;
     line-height: 1.82;
     color: rgba(255, 255, 255, .78);
     max-width: 540px;
     margin-bottom: 42px;
     text-align: left;

 }

 .hero-actions {
     display: flex;
     flex-direction: row;
     gap: 16px;
     flex-wrap: wrap;
     align-items: center;
 }

 .hero-actions .btn-primary {
     background: #fff;
     color: var(--primary);
     border-color: #fff;
     font-weight: 700;
     padding: 14px 32px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
 }

 .hero-actions .btn-primary:hover {
     background: #F1F5F9;
     color: var(--primary-dk);
     transform: translateY(-2px);
 }

 .hero-actions .btn-outline {
     background: rgba(255, 255, 255, .1);
     color: #fff;
     border-color: rgba(255, 255, 255, .55);
     font-weight: 700;
     padding: 14px 32px;
     backdrop-filter: blur(6px);
 }

 .hero-actions .btn-outline:hover {
     background: rgba(255, 255, 255, .18);
     border-color: #fff;
     color: #fff;
     transform: translateY(-2px);
 }

 .hero-stats {
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
     gap: 32px;
     padding: 24px 32px;
     background: rgba(30, 27, 75, .45);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 20px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, .25), inset 0 0 1px rgba(255, 255, 255, .2);
     margin-right: 40px;
     margin-top: 60px;
     align-self: flex-start;
     animation: fadeLeft .9s .2s ease both;
 }

 .stat-item {
     text-align: center;
 }

 .stat-num {
     font-family: var(--ff-head);
     font-size: 2rem;
     font-weight: 900;
     color: #fff;
     line-height: 1.1;
 }

 .stat-label {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: .15em;
     font-weight: 600;
     color: rgba(255, 255, 255, .7);
     margin-top: 4px;
 }

 /* Page Hero */
 .page-hero {
     background: linear-gradient(135deg, #1E1B4B 0%, #312E81 40%, #4338CA 80%, #6366F1 100%);
     background-size: 200% 200%;
     animation: gradientPan 10s ease infinite;
     padding: 155px 0 85px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .page-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .page-hero::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, transparent, var(--accent), var(--primary-lt), transparent);
 }

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

 .page-hero h1 {
     font-family: var(--ff-head);
     font-size: clamp(2rem, 5vw, 3.8rem);
     font-weight: 900;
     color: #fff;
     margin-bottom: 14px;
     animation: fadeUp .6s ease both;
 }

 .page-hero p {
     font-size: 17px;
     color: rgba(255, 255, 255, .78);
     max-width: 600px;
     margin: 0 auto;
     animation: fadeUp .6s .15s ease both;
 }

 .page-hero .section-label {
     color: var(--accent);
 }

 .page-hero .section-label::before {
     background: var(--accent);
 }

 /* ══════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════ */
 .section-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 48px;
     flex-wrap: wrap;
 }

 .section-header .section-title,
 .section-header .section-subtitle {
     margin-bottom: 0;
 }

 .section-header-btn {
     flex-shrink: 0;
     align-self: flex-end;
 }

 /* ══════════════════════════════════════════
   PROJECT CARDS
   ══════════════════════════════════════════ */
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 28px;
 }

 .project-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: 16px;
     overflow: hidden;
     transition: all var(--transition);
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow);
     position: relative;
 }

 .project-card:hover {
     transform: translateY(-7px);
     box-shadow: 0 20px 50px rgba(79, 70, 229, .12);
     border-color: var(--border-hover);
 }

 .project-card-img {
     height: 230px;
     overflow: hidden;
     background: var(--dark-3);
     position: relative;
     flex-shrink: 0;
 }

 .project-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .6s ease;
 }

 .project-card:hover .project-card-img img {
     transform: scale(1.07);
 }

 .project-card-img .placeholder-img {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--dark-3), var(--dark-4));
     font-size: 52px;
 }

 .project-card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, .72) 100%);
     display: flex;
     align-items: flex-end;
     padding: 20px 24px;
     opacity: 0;
     transition: opacity .35s;
     z-index: 2;
 }

 .project-card:hover .project-card-overlay {
     opacity: 1;
 }

 .project-card-view-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: var(--primary);
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 8px 18px;
     border-radius: 100px;
     transform: translateY(8px);
     transition: all .35s;
 }

 .project-card:hover .project-card-view-btn {
     transform: translateY(0);
 }

 .project-card-view-btn:hover {
     background: var(--primary-dk);
     color: #fff;
 }

 .project-card-body {
     padding: 22px 26px 26px;
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .project-card-body h3 {
     font-family: var(--ff-head);
     font-size: 1.2rem;
     color: var(--light);
     margin-bottom: 10px;
 }

 .project-card-body p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.8;
     flex: 1;
 }

 .project-card-tag {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: rgba(79, 70, 229, .08);
     border: 1px solid rgba(79, 70, 229, .18);
     color: var(--primary);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 100px;
     margin-bottom: 12px;
 }

 .project-card-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background: var(--primary-lt);
     border-radius: 50%;
 }

 .project-card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 16px;
     padding-top: 14px;
     border-top: 1px solid var(--dark-4);
     flex-wrap: wrap;
     gap: 8px;
 }

 .project-card-date {
     font-size: 12px;
     color: var(--muted-2);
 }

 .project-card-link {
     font-size: 12px;
     font-weight: 700;
     color: var(--primary);
     letter-spacing: .06em;
     text-transform: uppercase;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     transition: all var(--transition);
 }

 .project-card-link:hover {
     color: var(--primary-dk);
     gap: 8px;
 }

 /* ══════════════════════════════════════════
   SERVICE CARDS
   ══════════════════════════════════════════ */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 24px;
 }

 .service-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: 16px;
     overflow: hidden;
     transition: all var(--transition);
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow);
     position: relative;
 }

 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .45s ease;
     z-index: 1;
 }

 .service-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-6px);
     box-shadow: 0 20px 50px rgba(79, 70, 229, .1);
 }

 .service-card:hover::before {
     transform: scaleX(1);
 }

 .service-card-img {
     width: 100%;
     height: 200px;
     overflow: hidden;
     background: var(--dark-3);
     position: relative;
     flex-shrink: 0;
 }

 .service-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .65s ease;
 }

 .service-card:hover .service-card-img img {
     transform: scale(1.07);
 }

 .service-card-img::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60px;
     background: linear-gradient(0deg, var(--bg-white), transparent);
 }

 .service-card-img-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--dark-3), var(--dark-4));
     font-size: 52px;
 }

 .service-card-content {
     padding: 22px 24px 26px;
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .service-icon {
     width: 50px;
     height: 50px;
     background: rgba(79, 70, 229, .08);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     margin-bottom: 14px;
     border: 1px solid rgba(79, 70, 229, .14);
     color: var(--accent);
     transition: var(--transition);
 }

 .service-card:hover .service-icon {
     background: rgba(79, 70, 229, .13);
     box-shadow: 0 0 20px rgba(56, 189, 248, .2);
     transform: scale(1.07);
 }

 .service-card h3 {
     font-family: var(--ff-head);
     font-size: 1.1rem;
     color: var(--light);
     margin-bottom: 10px;
 }

 .service-card p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.8;
 }

 .service-card-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 16px;
     padding-top: 14px;
     border-top: 1px solid var(--dark-4);
     font-size: 12px;
     font-weight: 700;
     color: var(--primary);
     letter-spacing: .08em;
     text-transform: uppercase;
     transition: all var(--transition);
 }

 .service-card-link:hover {
     color: var(--primary-dk);
     gap: 10px;
 }

 /* ══════════════════════════════════════════
   WHY US / FEATURE CARDS
   ══════════════════════════════════════════ */
 .why-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 20px;
 }

 .why-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: 14px;
     padding: 28px 24px;
     display: flex;
     align-items: flex-start;
     gap: 20px;
     transition: all var(--transition);
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .why-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s ease;
 }

 .why-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(79, 70, 229, .1);
 }

 .why-card:hover::before {
     transform: scaleX(1);
 }

 .why-card-icon {
     width: 52px;
     height: 52px;
     flex-shrink: 0;
     background: rgba(79, 70, 229, .08);
     border: 1px solid rgba(79, 70, 229, .14);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: var(--accent);
     transition: var(--transition);
 }

 .why-card:hover .why-card-icon {
     background: rgba(79, 70, 229, .13);
 }

 .why-card-body h3 {
     font-family: var(--ff-head);
     font-size: 1.05rem;
     color: var(--light);
     margin-bottom: 8px;
 }

 .why-card-body p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.8;
 }

 /* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */
 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .about-image-block {
     position: relative;
 }

 .about-image-block .img-frame {
     aspect-ratio: 4/3;
     background: var(--dark-3);
     border-radius: var(--radius-lg);
     border: 1px solid var(--dark-4);
     overflow: hidden;
     box-shadow: var(--shadow-md);
 }

 .about-image-block .img-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .about-image-block .gold-accent {
     position: absolute;
     bottom: -20px;
     right: -20px;
     width: 140px;
     height: 140px;
     background: rgba(79, 70, 229, .06);
     border: 2px solid rgba(79, 70, 229, .2);
     border-radius: 8px;
     z-index: -1;
 }

 .about-image-block .img-badge {
     position: absolute;
     bottom: 20px;
     left: -24px;
     background: linear-gradient(135deg, var(--secondary), var(--primary));
     color: #fff;
     padding: 14px 20px;
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(79, 70, 229, .35);
     z-index: 2;
 }

 .img-badge .badge-num {
     font-family: var(--ff-head);
     font-size: 1.8rem;
     font-weight: 900;
     line-height: 1;
 }

 .img-badge .badge-txt {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .05em;
     margin-top: 2px;
     color: rgba(255, 255, 255, .85);
 }

 .values-list li {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 24px;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--dark-4);
     transition: var(--transition);
 }

 .values-list li:hover {
     padding-left: 6px;
 }

 .values-list li:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .val-icon {
     flex-shrink: 0;
     width: 44px;
     height: 44px;
     background: rgba(79, 70, 229, .08);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     border: 1px solid rgba(79, 70, 229, .14);
 }

 .values-list h4 {
     font-size: 15px;
     font-weight: 700;
     color: var(--light);
     margin-bottom: 5px;
 }

 .values-list p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.75;
 }

 /* ══════════════════════════════════════════
   TEAM CARDS
   ══════════════════════════════════════════ */
 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 24px;
     margin-top: 48px;
 }

 .team-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: var(--radius-lg);
     padding: 28px 20px;
     text-align: center;
     transition: all var(--transition);
     box-shadow: var(--shadow);
 }

 .team-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-5px);
     box-shadow: 0 16px 40px rgba(79, 70, 229, .1);
 }

 .team-avatar {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     margin: 0 auto 18px;
     border: 3px solid rgba(79, 70, 229, .22);
     transition: var(--transition);
     box-shadow: 0 0 0 5px rgba(79, 70, 229, .06);
 }

 .team-card:hover .team-avatar {
     border-color: var(--primary);
     box-shadow: 0 0 0 5px rgba(79, 70, 229, .12);
 }

 .team-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .team-card h4 {
     font-family: var(--ff-head);
     font-size: 1.1rem;
     color: #178bf1;
     margin-bottom: 5px;
     font-weight: 700;
 }

 .team-card p {
     font-size: 12px;
     color: var(--primary);
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
 }

 /* ══════════════════════════════════════════
   STATS BOXES
   ══════════════════════════════════════════ */
 .hero-stats-about {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px;
 }

 .stat-box {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: var(--radius-lg);
     padding: 32px 22px;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all var(--transition);
     box-shadow: var(--shadow);
 }

 .stat-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
 }

 .stat-box:hover {
     border-color: var(--border-hover);
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(79, 70, 229, .1);
 }

 .stat-box .stat-num {
     font-family: var(--ff-head);
     font-size: 2.6rem;
     font-weight: 900;
     color: var(--primary);
     line-height: 1;
 }

 .stat-box .stat-label {
     font-size: 13px;
     color: var(--muted);
     margin-top: 6px;
     text-transform: uppercase;
     letter-spacing: .1em;
     font-weight: 600;
 }

 /* ══════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════ */
 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     gap: 64px;
     align-items: start;
 }

 .contact-info h2 {
     font-family: var(--ff-head);
     font-size: 2rem;
     color: var(--light);
     margin-bottom: 16px;
 }

 .contact-info>p {
     color: var(--muted);
     margin-bottom: 36px;
     font-size: 15px;
     line-height: 1.8;
 }

 .contact-detail {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 24px;
 }

 .contact-detail-icon {
     width: 48px;
     height: 48px;
     background: rgba(79, 70, 229, .08);
     border: 1px solid rgba(79, 70, 229, .14);
     border-radius: 10px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: var(--accent);
     transition: var(--transition);
 }

 .contact-detail:hover .contact-detail-icon {
     background: rgba(79, 70, 229, .13);
     transform: scale(1.05);
 }

 .contact-detail h4 {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: var(--primary);
     margin-bottom: 5px;
     font-weight: 700;
 }

 .contact-detail p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.75;
 }

 .contact-form-card {
     background: var(--bg-white);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 40px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
     position: relative;
     overflow: hidden;
 }

 .contact-form-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
 }

 /* ══════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════ */
 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     font-size: 12px;
     font-weight: 700;
     color: var(--light);
     margin-bottom: 8px;
     letter-spacing: .09em;
     text-transform: uppercase;
 }

 .form-group input,
 .form-group textarea,
 .form-group select {
     width: 100%;
     background: #FAFAFA;
     border: 1.5px solid var(--border);
     border-radius: var(--radius);
     padding: 13px 16px;
     color: var(--light);
     font-family: var(--ff-body);
     font-size: 15px;
     transition: all var(--transition);
     outline: none;
     -webkit-appearance: none;
 }

 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
     background: #fff;
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: var(--muted-2);
 }

 .form-group textarea {
     resize: vertical;
     min-height: 130px;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .form-group input[type="file"] {
     padding: 10px;
     cursor: pointer;
     font-size: 13px;
     color: var(--muted);
 }

 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
 }

 .field-error {
     display: block;
     font-size: 12px;
     color: var(--danger);
     margin-top: 6px;
     font-weight: 600;
 }

 .field-hint {
     display: block;
     font-size: 11px;
     color: var(--muted-2);
     margin-top: 5px;
 }

 /* ══════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════ */
 .alert {
     padding: 14px 20px;
     border-radius: var(--radius);
     margin-bottom: 20px;
     font-size: 14px;
     font-weight: 600;
 }

 .alert-success {
     background: rgba(16, 185, 129, .08);
     border: 1px solid rgba(16, 185, 129, .25);
     color: #059669;
 }

 .alert-error {
     background: rgba(239, 68, 68, .08);
     border: 1px solid rgba(239, 68, 68, .2);
     color: #DC2626;
 }

 .alert-info {
     background: rgba(79, 70, 229, .07);
     border: 1px solid rgba(79, 70, 229, .2);
     color: var(--primary);
 }

 .alert-warning {
     background: rgba(245, 158, 11, .08);
     border: 1px solid rgba(245, 158, 11, .25);
     color: #D97706;
 }

 /* ══════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════ */
 .cta-section {
     padding: 80px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 60%, var(--primary-dk) 100%);
     background-size: 200% 200%;
     animation: gradientPan 10s ease infinite;
 }

 .cta-section .section-title {
     color: #fff;
 }

 .cta-section .section-subtitle {
     color: rgba(255, 255, 255, .8);
 }

 .cta-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 80% 50%, rgba(56, 189, 248, .12) 0%, transparent 60%);
     pointer-events: none;
 }

 .cta-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .cta-actions {
     display: flex;
     flex-direction: column;
     gap: 14px;
     align-items: flex-start;
 }

 .cta-trust {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 4px;
 }

 .cta-trust span {
     font-size: 12px;
     color: rgba(255, 255, 255, .7);
     font-weight: 600;
 }

 .cta-section .btn-primary {
     background: #fff;
     color: var(--primary);
     border-color: #fff;
     font-weight: 700;
 }

 .cta-section .btn-primary:hover {
     background: #F1F5F9;
     color: var(--primary-dk);
     transform: translateY(-2px);
 }

 .cta-section .btn-outline {
     background: transparent;
     color: #fff;
     border-color: rgba(255, 255, 255, .65);
     font-weight: 700;
 }

 .cta-section .btn-outline:hover {
     background: rgba(255, 255, 255, .15);
     border-color: #fff;
     color: #fff;
     transform: translateY(-2px);
 }

 /* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
 .site-footer {
     background: var(--dark-navy);
     border-top: 4px solid var(--primary);
     padding: 80px 0 0;
     position: relative;
 }

 .site-footer::before {
     content: '';
     position: absolute;
     top: 4px;
     left: 0;
     right: 0;
     height: 1px;
     background: rgba(255, 255, 255, .05);
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
     gap: 48px;
     padding-bottom: 60px;
 }

 .footer-brand .logo-text-mobile {
     color: #fff;
     font-size: 1.1rem;
 }

 .footer-brand .logo-text-mobile small {
     color: rgba(255, 255, 255, .55);
 }

 .footer-brand p {
     margin-top: 16px;
     font-size: 15px;
     font-weight: 400;
     color: #CBD5F5;
     max-width: 280px;
     line-height: 1.85;
     opacity: .82;
 }

 .footer-social {
     display: flex;
     gap: 10px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .footer-social a {
     width: 38px;
     height: 38px;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     color: rgba(255, 255, 255, .55);
     transition: all var(--transition);
 }

 .footer-social a:hover {
     background: var(--primary);
     border-color: var(--primary);
     color: #fff;
     transform: translateY(-2px);
 }

 .site-footer h4 {
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, .07);
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links li a {
     font-size: 15px;
     font-weight: 500;
     color: #CBD5F5;
     transition: all var(--transition);
     display: inline-block;
     opacity: .65;
 }

 .footer-links li a:hover {
     color: #fff;
     opacity: 1;
     padding-left: 5px;
 }

 .footer-contact-list li {
     font-size: 15px;
     font-weight: 500;
     color: #CBD5F5;
     line-height: 1.85;
     margin-bottom: 10px;
     opacity: .65;
 }

 .footer-contact-list a {
     color: #CBD5F5;
     transition: all var(--transition);
 }

 .footer-contact-list a:hover {
     color: #fff;
     opacity: 1;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .08);
     padding: 22px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
 }

 .footer-bottom p {
     font-size: 14px;
     font-weight: 500;
     color: rgba(203, 213, 245, .45);
 }

 .footer-bottom a {
     color: rgba(203, 213, 245, .45);
     font-weight: 600;
 }

 .footer-bottom a:hover {
     color: var(--accent);
 }

 /* ══════════════════════════════════════════
   WHATSAPP FLOAT
   ══════════════════════════════════════════ */
 .whatsapp-float {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 998;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 10px;
 }

 .whatsapp-btn {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #25D366, #128C7E);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 24px rgba(37, 211, 102, .4);
     cursor: pointer;
     transition: all var(--transition);
     text-decoration: none;
     border: 2px solid rgba(255, 255, 255, .15);
     position: relative;
 }

 .whatsapp-btn:hover {
     transform: scale(1.1) translateY(-2px);
     box-shadow: 0 10px 32px rgba(37, 211, 102, .5);
     color: #fff;
 }

 .whatsapp-btn svg {
     width: 28px;
     height: 28px;
     fill: #fff;
 }

 .whatsapp-btn .pulse-ring {
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     border: 2px solid rgba(37, 211, 102, .4);
     animation: waPulse 2s infinite;
 }

 .whatsapp-tooltip {
     background: var(--dark-navy);
     border: 1px solid rgba(255, 255, 255, .12);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     padding: 8px 14px;
     border-radius: 8px;
     white-space: nowrap;
     box-shadow: var(--shadow);
     opacity: 0;
     transform: translateX(10px);
     transition: all var(--transition);
     pointer-events: none;
     position: absolute;
     right: 72px;
     bottom: 12px;
 }

 .whatsapp-float:hover .whatsapp-tooltip {
     opacity: 1;
     transform: translateX(0);
 }

 /* ══════════════════════════════════════════
   DIGITAL SERVICES  
   ══════════════════════════════════════════ */
 .digital-section {
     position: relative;
     padding: 100px 0;
     overflow: hidden;
 }

 .digital-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 80% 50%, rgba(79, 70, 229, .06) 0%, transparent 60%);
     pointer-events: none;
 }

 .digital-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 80px;
     align-items: center;
 }

 .digital-info p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.85;
     margin-bottom: 32px;
 }

 .digital-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 32px;
 }

 .digital-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(79, 70, 229, .07);
     border: 1px solid rgba(79, 70, 229, .17);
     color: var(--primary);
     font-size: 12px;
     font-weight: 700;
     padding: 7px 16px;
     border-radius: 100px;
     letter-spacing: .06em;
     transition: var(--transition);
 }

 .digital-badge:hover {
     background: rgba(79, 70, 229, .13);
     transform: translateY(-2px);
 }

 .digital-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }

 .digital-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: var(--radius-lg);
     padding: 26px;
     position: relative;
     overflow: hidden;
     transition: all var(--transition);
     box-shadow: var(--shadow);
 }

 .digital-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s ease;
 }

 .digital-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .digital-card:hover::before {
     transform: scaleX(1);
 }

 .digital-card-icon {
     width: 52px;
     height: 52px;
     background: rgba(79, 70, 229, .07);
     border: 1px solid rgba(79, 70, 229, .14);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     margin-bottom: 16px;
     color: var(--accent);
     transition: var(--transition);
 }

 .digital-card:hover .digital-card-icon {
     background: rgba(79, 70, 229, .12);
     transform: scale(1.07);
 }

 .digital-card h3 {
     font-family: var(--ff-head);
     font-size: 1.05rem;
     color: var(--light);
     margin-bottom: 8px;
 }

 .digital-card p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.75;
     margin-bottom: 14px;
 }

 .digital-card-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .digital-card-tag {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .08em;
     color: var(--primary-dk);
     background: rgba(79, 70, 229, .06);
     border: 1px solid rgba(79, 70, 229, .13);
     padding: 3px 9px;
     border-radius: 100px;
     text-transform: uppercase;
 }

 .digital-card.featured {
     grid-column: span 2;
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 20px;
     align-items: start;
 }

 .digital-card.featured .digital-card-icon {
     margin-bottom: 0;
     flex-shrink: 0;
 }

 .digital-card.featured h3 {
     font-size: 1.2rem;
 }

 .digital-services-section {
     background: var(--bg-soft-purple);
     border-top: 1px solid rgba(79, 70, 229, .1);
     border-bottom: 1px solid rgba(79, 70, 229, .1);
     padding: 100px 0;
     position: relative;
     overflow: hidden;
 }

 .digital-services-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(79, 70, 229, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, .025) 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
 }

 .digital-services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     margin-top: 52px;
 }

 .digital-service-card {
     background: var(--bg-white);
     border: 1px solid var(--dark-4);
     border-radius: var(--radius-lg);
     padding: 40px 30px;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all var(--transition);
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
 }

 .digital-service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
 }

 .digital-service-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-8px);
     box-shadow: 0 24px 60px rgba(79, 70, 229, .1);
 }

 .digital-service-card-icon {
     width: 80px;
     height: 80px;
     background: rgba(79, 70, 229, .07);
     border: 1px solid rgba(79, 70, 229, .14);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 34px;
     margin: 0 auto 22px;
     color: var(--accent);
     transition: var(--transition);
 }

 .digital-service-card:hover .digital-service-card-icon {
     background: rgba(79, 70, 229, .12);
     box-shadow: 0 0 28px rgba(56, 189, 248, .22);
     transform: scale(1.08) rotate(-3deg);
 }

 .digital-service-card h3 {
     font-family: var(--ff-head);
     font-size: 1.3rem;
     color: var(--light);
     margin-bottom: 14px;
 }

 .digital-service-card>p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.8;
     margin-bottom: 22px;
 }

 .digital-service-features {
     list-style: none;
     padding: 0;
     margin: 0 0 26px;
     text-align: left;
     flex: 1;
 }

 .digital-service-features li {
     font-size: 13px;
     color: var(--light-2);
     padding: 8px 0;
     border-bottom: 1px solid var(--dark-4);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .digital-service-features li:last-child {
     border-bottom: none;
 }

 .digital-service-features li::before {
     content: '→';
     color: var(--primary);
     font-weight: 700;
     flex-shrink: 0;
 }

 .digital-service-card .btn {
     width: 100%;
     justify-content: center;
 }

 .digital-process {
     margin-top: 80px;
 }

 .digital-process-steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 48px;
     position: relative;
 }

 .digital-process-steps::before {
     content: '';
     position: absolute;
     top: 32px;
     left: 8%;
     right: 8%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
 }

 .process-step {
     text-align: center;
     position: relative;
     z-index: 1;
 }

 .process-step-num {
     width: 64px;
     height: 64px;
     background: var(--bg-white);
     border: 2px solid rgba(79, 70, 229, .25);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--ff-head);
     font-size: 1.4rem;
     font-weight: 900;
     color: var(--primary);
     margin: 0 auto 16px;
     transition: all var(--transition);
 }

 .process-step:hover .process-step-num {
     background: rgba(79, 70, 229, .08);
     border-color: var(--primary);
     box-shadow: 0 0 20px rgba(79, 70, 229, .2);
 }

 .process-step h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--light);
     margin-bottom: 8px;
 }

 .process-step p {
     font-size: 12px;
     color: var(--muted);
     line-height: 1.6;
 }

 /* ══════════════════════════════════════════
   SCROLL ANIMATION
   ══════════════════════════════════════════ */
 .fade-in-up {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity .6s ease, transform .6s ease;
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ══════════════════════════════════════════
   ██████████████████████████████████████████
   ADMIN PANEL — Consistent with public pages
   ██████████████████████████████████████████
   ══════════════════════════════════════════ */

 .admin-body {
     background: var(--admin-bg);
     min-height: 100vh;
     font-family: var(--ff-body);
     color: var(--admin-text);
     overflow-x: hidden;
 }

 /* ── Admin Header — same gradient as page-hero ── */
 .admin-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--admin-header-h);
     background: linear-gradient(135deg, #312E81, #4338CA, #4F46E5);
     z-index: 300;
     display: flex;
     align-items: center;
     box-shadow: 0 4px 18px rgba(79, 70, 229, .25);
     padding: 0;
 }

 .admin-header-inner {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
 }

 /* Brand section */
 .admin-header-brand {
     display: flex;
     align-items: center;
     gap: 12px;
     width: var(--admin-sidebar-w);
     min-width: var(--admin-sidebar-w);
     flex-shrink: 0;
     padding: 0 22px;
     height: 100%;
     border-right: 1px solid rgba(255, 255, 255, .12);
     overflow: visible;
 }

 .admin-header-brand .logo-img {
     height: 50px;
     width: auto;
     object-fit: contain;
     flex-shrink: 0;
     max-width: 100%;
 }

 .admin-header-brand .brand-text {
     font-family: var(--ff-head);
     font-size: .96rem;
     font-weight: 900;
     color: #fff;
     line-height: 1.15;
 }

 .admin-header-brand .brand-text small {
     font-family: var(--ff-body);
     font-size: .6rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .65);
     text-transform: uppercase;
     letter-spacing: .14em;
     display: block;
     margin-top: 2px;
 }

 /* Header right */
 .admin-header-right {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex: 1;
     padding: 0 24px;
     height: 100%;
     gap: 16px;
 }

 /* Search */
 .admin-search {
     position: relative;
     flex: 1;
     max-width: 360px;
 }

 .admin-search input {
     width: 100%;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 10px;
     padding: 9px 16px 9px 38px;
     font-size: 13px;
     color: #fff;
     font-family: var(--ff-body);
     outline: none;
     transition: all .25s;
 }

 .admin-search input:focus {
     background: rgba(255, 255, 255, .18);
     border-color: rgba(255, 255, 255, .3);
 }

 .admin-search input::placeholder {
     color: rgba(255, 255, 255, .55);
 }

 .admin-search-icon {
     position: absolute;
     left: 11px;
     top: 50%;
     transform: translateY(-50%);
     color: rgba(255, 255, 255, .65);
     font-size: 16px;
     pointer-events: none;
     line-height: 1;
 }

 /* Header actions */
 .admin-header-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
 }

 .admin-notif-btn {
     position: relative;
     width: 38px;
     height: 38px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .22s;
     color: #fff;
     font-size: 17px;
     text-decoration: none;
 }

 .admin-notif-btn:hover {
     background: rgba(255, 255, 255, .18);
     color: #fff;
 }

 .admin-notif-badge {
     position: absolute;
     top: -4px;
     right: -4px;
     width: 17px;
     height: 17px;
     background: var(--danger);
     border-radius: 50%;
     font-size: 9px;
     font-weight: 800;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #4338CA;
     line-height: 1;
 }

 .admin-user-btn {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 5px 12px 5px 5px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 9px;
     cursor: pointer;
     transition: all .22s;
     text-decoration: none;
     color: #fff;
 }

 .admin-user-btn:hover {
     background: rgba(255, 255, 255, .18);
     color: #fff;
 }

 .admin-avatar {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     background: rgba(255, 255, 255, .22);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0;
     overflow: hidden;
 }

 .admin-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .admin-user-info {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
 }

 .admin-user-name {
     font-size: 13px;
     font-weight: 700;
     color: #fff;
 }

 .admin-user-role {
     font-size: 10px;
     color: rgba(255, 255, 255, .65);
     font-weight: 500;
 }

 .sidebar-collapse-btn {
     width: 36px;
     height: 36px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .22s;
     color: #fff;
     font-size: 16px;
     flex-shrink: 0;
 }

 .sidebar-collapse-btn:hover {
     background: rgba(255, 255, 255, .18);
 }

 .sidebar-toggle-btn {
     display: none;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: var(--radius);
     padding: 8px 10px;
     cursor: pointer;
     color: #fff;
     font-size: 18px;
     line-height: 1;
     flex-shrink: 0;
     transition: all .22s;
 }

 .sidebar-toggle-btn:hover {
     background: rgba(255, 255, 255, .18);
 }

 /* ── Admin Layout ── */
 .admin-layout {
     display: flex;
     min-height: calc(100vh - var(--admin-header-h));
     margin-top: var(--admin-header-h);
 }

 /* ── Sidebar — dark, premium, same font as public ── */
 .admin-sidebar {
     width: var(--admin-sidebar-w);
     flex-shrink: 0;
     background: var(--admin-sidebar);
     border-right: 1px solid rgba(255, 255, 255, .05);
     position: fixed;
     top: var(--admin-header-h);
     left: 0;
     bottom: 0;
     overflow-y: auto;
     overflow-x: hidden;
     z-index: 200;
     display: flex;
     flex-direction: column;
     transition: width .3s ease, transform .3s ease;
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 255, 255, .08) transparent;
 }

 .admin-sidebar::-webkit-scrollbar {
     width: 3px;
 }

 .admin-sidebar::-webkit-scrollbar-track {
     background: transparent;
 }

 .admin-sidebar::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, .08);
     border-radius: 3px;
 }

 .admin-nav-group {
     padding: 18px 0 6px;
 }

 .admin-nav-group:first-child {
     padding-top: 14px;
 }

 .admin-nav-group-label {
     font-size: 9.5px;
     font-weight: 800;
     letter-spacing: .26em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .25);
     padding: 0 20px 6px;
     display: block;
 }

 /* Sidebar links — matching public page nav style */
 .admin-sidebar a,
 .admin-sidebar-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 20px;
     font-size: 13px;
     font-weight: 600;
     color: rgba(255, 255, 255, .5);
     transition: all .2s ease;
     border-left: 3px solid transparent;
     text-decoration: none;
     white-space: nowrap;
     position: relative;
 }

 .admin-sidebar a:hover,
 .admin-sidebar-link:hover {
     color: rgba(255, 255, 255, .88);
     background: rgba(255, 255, 255, .06);
     border-left-color: rgba(255, 255, 255, .18);
 }

 .admin-sidebar a.active,
 .admin-sidebar-link.active {
     color: #fff;
     background: rgba(79, 70, 229, .3);
     border-left-color: var(--primary-xlt);
     font-weight: 700;
 }

 .admin-sidebar .nav-icon {
     font-size: 16px;
     min-width: 20px;
     text-align: center;
     flex-shrink: 0;
     opacity: .85;
 }

 .admin-sidebar a.active .nav-icon {
     opacity: 1;
 }

 /* Nav badge — same style as public page tags */
 .nav-badge {
     margin-left: auto;
     background: var(--primary);
     color: #fff;
     font-size: 9px;
     font-weight: 800;
     padding: 2px 7px;
     border-radius: 100px;
     line-height: 1.4;
     flex-shrink: 0;
 }

 .nav-badge.badge-red {
     background: var(--danger);
 }

 .nav-badge.badge-green {
     background: var(--success);
 }

 .nav-badge.badge-yellow {
     background: var(--warning);
 }

 .sidebar-divider {
     height: 1px;
     background: rgba(255, 255, 255, .06);
     margin: 6px 20px;
 }

 /* Sidebar user footer — premium dark */
 .admin-sidebar-footer {
     margin-top: auto;
     padding: 14px 18px;
     border-top: 1px solid rgba(255, 255, 255, .06);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .admin-sidebar-footer .sb-avatar {
     width: 34px;
     height: 34px;
     border-radius: 9px;
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--secondary), var(--primary));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 800;
     color: #fff;
     overflow: hidden;
 }

 .admin-sidebar-footer .sb-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .admin-sidebar-footer .sb-name {
     font-size: 12.5px;
     font-weight: 700;
     color: #fff;
 }

 .admin-sidebar-footer .sb-role {
     font-size: 10px;
     color: rgba(255, 255, 255, .4);
     margin-top: 1px;
 }

 /* ── Admin Main ── */
 .admin-main {
     flex: 1;
     margin-left: var(--admin-sidebar-w);
     padding: 28px 32px;
     min-height: calc(100vh - var(--admin-header-h));
     overflow-x: hidden;
     background: var(--admin-bg);
 }

 /* ── Page Header — matching public section header style ── */
 .admin-page-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 28px;
     flex-wrap: wrap;
 }

 .admin-breadcrumb {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 11px;
     color: var(--muted);
     margin-bottom: 5px;
     flex-wrap: wrap;
 }

 .admin-breadcrumb a {
     color: var(--primary);
     font-weight: 600;
 }

 .admin-breadcrumb a:hover {
     color: var(--primary-dk);
 }

 .admin-breadcrumb span {
     color: var(--muted-2);
 }

 /* Section label in admin — exact copy from public */
 .admin-section-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .26em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 4px;
 }

 .admin-section-label::before {
     content: '';
     width: 22px;
     height: 2px;
     background: linear-gradient(90deg, var(--primary), transparent);
     flex-shrink: 0;
     border-radius: 2px;
 }

 .admin-page-title {
     font-family: var(--ff-head);
     font-size: 1.65rem;
     font-weight: 900;
     color: var(--admin-text);
     margin-bottom: 4px;
     line-height: 1.2;
 }

 .admin-page-sub {
     font-size: 14px;
     color: var(--muted);
     font-weight: 400;
 }

 .admin-page-actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     flex-shrink: 0;
     align-items: flex-start;
 }

 /* ── Quick Action Cards — same as public why-cards ── */
 .admin-quick-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 14px;
     margin-bottom: 24px;
 }

 .admin-quick-card {
     background: var(--admin-card-bg);
     border: 1px solid var(--admin-border);
     border-radius: var(--radius-lg);
     padding: 18px 16px;
     display: flex;
     align-items: flex-start;
     gap: 14px;
     cursor: pointer;
     transition: all var(--transition);
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow);
     text-decoration: none;
     color: var(--admin-text);
 }

 .admin-quick-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s ease;
 }

 .admin-quick-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(79, 70, 229, .1);
     color: var(--admin-text);
 }

 .admin-quick-card:hover::before {
     transform: scaleX(1);
 }

 .admin-quick-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: rgba(79, 70, 229, .08);
     border: 1px solid rgba(79, 70, 229, .14);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: var(--accent);
     flex-shrink: 0;
     transition: var(--transition);
 }

 .admin-quick-card:hover .admin-quick-icon {
     background: rgba(79, 70, 229, .13);
     transform: scale(1.07);
 }

 .admin-quick-label {
     font-size: 13px;
     font-weight: 700;
     color: var(--admin-text);
     margin-bottom: 2px;
 }

 .admin-quick-sub {
     font-size: 11px;
     color: var(--muted);
 }

 /* ── Stats Row — same style as public stat-box ── */
 .stats-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 24px;
 }

 .stat-card {
     background: var(--admin-card-bg);
     border: 1px solid var(--admin-border);
     border-radius: var(--radius-lg);
     padding: 20px 18px;
     position: relative;
     overflow: hidden;
     transition: all var(--transition);
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
 }

 .stat-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary));
 }

 .stat-card.stat-sky::before {
     background: linear-gradient(90deg, var(--accent-dk), var(--accent));
 }

 .stat-card.stat-green::before {
     background: linear-gradient(90deg, #059669, var(--success));
 }

 .stat-card.stat-red::before {
     background: linear-gradient(90deg, #DC2626, var(--danger));
 }

 .stat-card.stat-amber::before {
     background: linear-gradient(90deg, #D97706, var(--warning));
 }

 .stat-card.stat-purple::before {
     background: linear-gradient(90deg, var(--secondary), var(--primary-lt));
 }

 .stat-card-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 12px;
 }

 .stat-card .s-icon {
     width: 42px;
     height: 42px;
     background: rgba(79, 70, 229, .09);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19px;
     color: var(--primary);
     flex-shrink: 0;
 }

 .stat-card.stat-sky .s-icon {
     background: rgba(56, 189, 248, .1);
     color: var(--accent-dk);
 }

 .stat-card.stat-green .s-icon {
     background: rgba(16, 185, 129, .1);
     color: #059669;
 }

 .stat-card.stat-red .s-icon {
     background: rgba(239, 68, 68, .1);
     color: #DC2626;
 }

 .stat-card.stat-amber .s-icon {
     background: rgba(245, 158, 11, .1);
     color: #D97706;
 }

 .s-trend {
     font-size: 10px;
     font-weight: 700;
     padding: 3px 7px;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;
     gap: 3px;
 }

 .s-trend.up {
     background: rgba(16, 185, 129, .1);
     color: #059669;
 }

 .s-trend.down {
     background: rgba(239, 68, 68, .1);
     color: #DC2626;
 }

 .s-trend.flat {
     background: rgba(107, 114, 128, .1);
     color: var(--muted);
 }

 .stat-card .s-num {
     font-family: var(--ff-head);
     font-size: 1.9rem;
     font-weight: 900;
     color: var(--primary);
     line-height: 1;
     margin-bottom: 3px;
 }

 .stat-card.stat-sky .s-num {
     color: var(--accent-dk);
 }

 .stat-card.stat-green .s-num {
     color: #059669;
 }

 .stat-card.stat-red .s-num {
     color: #DC2626;
 }

 .stat-card.stat-amber .s-num {
     color: #D97706;
 }

 .stat-card .s-label {
     font-size: 12px;
     color: var(--muted);
     font-weight: 500;
 }

 /* ── Admin Cards — same elevated style as public service-card ── */
 .admin-card {
     background: var(--admin-card-bg);
     border: 1px solid var(--admin-border);
     border-radius: var(--radius-lg);
     padding: 22px;
     margin-bottom: 22px;
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: box-shadow var(--transition);
     position: relative;
 }

 /* Subtle top accent — like service-card::before */
 .admin-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
     opacity: 0;
     transition: opacity .35s;
 }

 .admin-card:hover {
     box-shadow: var(--shadow-md);
 }

 .admin-card:hover::before {
     opacity: 1;
 }

 .admin-card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 18px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--admin-border);
     flex-wrap: wrap;
     gap: 10px;
 }

 .admin-card h3,
 .admin-card-title {
     font-family: var(--ff-head);
     font-size: 1.02rem;
     font-weight: 800;
     color: var(--admin-text);
     display: flex;
     align-items: center;
     gap: 8px;
     margin: 0;
 }

 .admin-card h3 .card-icon,
 .admin-card-title .card-icon {
     font-size: 17px;
     color: var(--primary);
 }

 /* Tabs */
 .admin-tabs {
     display: flex;
     gap: 3px;
     background: var(--admin-bg);
     padding: 3px;
     border-radius: var(--radius);
     border: 1px solid var(--admin-border);
     margin-bottom: 18px;
     width: fit-content;
 }

 .admin-tab {
     padding: 7px 16px;
     font-size: 12px;
     font-weight: 600;
     color: var(--muted);
     border-radius: 6px;
     cursor: pointer;
     transition: all .2s;
     border: none;
     background: transparent;
     font-family: var(--ff-body);
 }

 .admin-tab:hover {
     color: var(--admin-text);
 }

 .admin-tab.active {
     background: var(--admin-card-bg);
     color: var(--primary);
     box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
 }

 /* ── Table ── */
 .table-responsive {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     margin: 0 -22px;
     padding: 0 22px;
 }

 .data-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 600px;
     font-size: 13px;
 }

 .data-table thead tr {
     background: var(--admin-bg);
     border-bottom: 2px solid var(--admin-border);
 }

 .data-table th {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--muted);
     text-align: left;
     padding: 11px 16px;
     white-space: nowrap;
 }

 .data-table th:first-child {
     padding-left: 0;
 }

 .data-table th:last-child {
     padding-right: 0;
 }

 .data-table td {
     padding: 12px 16px;
     color: var(--admin-text);
     border-bottom: 1px solid var(--admin-border);
     vertical-align: middle;
 }

 .data-table td:first-child {
     padding-left: 0;
 }

 .data-table td:last-child {
     padding-right: 0;
 }

 .data-table tbody tr {
     transition: background .15s ease;
 }

 .data-table tbody tr:hover td {
     background: rgba(79, 70, 229, .025);
 }

 .data-table tbody tr:last-child td {
     border-bottom: none;
 }

 .table-cell-media {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .table-cell-media img {
     width: 46px;
     height: 36px;
     object-fit: cover;
     border-radius: 6px;
     flex-shrink: 0;
     border: 1px solid var(--admin-border);
 }

 .table-cell-media .media-title {
     font-weight: 700;
     color: var(--admin-text);
     font-size: 13px;
     line-height: 1.3;
 }

 .table-cell-media .media-sub {
     font-size: 11px;
     color: var(--muted);
     margin-top: 2px;
 }

 .table-actions {
     display: flex;
     gap: 5px;
     flex-wrap: nowrap;
     align-items: center;
 }

 /* ── Badges — same as public project-card-tag ── */
 .badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 9px;
     border-radius: 100px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .04em;
     white-space: nowrap;
     line-height: 1.5;
 }

 .badge-active {
     background: rgba(16, 185, 129, .1);
     color: #059669;
     border: 1px solid rgba(16, 185, 129, .2);
 }

 .badge-hidden {
     background: rgba(0, 0, 0, .05);
     color: var(--muted);
     border: 1px solid var(--dark-5);
 }

 .badge-unread {
     background: rgba(79, 70, 229, .1);
     color: var(--primary);
     border: 1px solid rgba(79, 70, 229, .2);
 }

 .badge-pending {
     background: rgba(245, 158, 11, .1);
     color: #D97706;
     border: 1px solid rgba(245, 158, 11, .2);
 }

 .badge-danger {
     background: rgba(239, 68, 68, .1);
     color: #DC2626;
     border: 1px solid rgba(239, 68, 68, .2);
 }

 .badge-new {
     background: rgba(56, 189, 248, .1);
     color: #0284C7;
     border: 1px solid rgba(56, 189, 248, .2);
 }

 .badge-info {
     background: rgba(79, 70, 229, .1);
     color: var(--primary);
     border: 1px solid rgba(79, 70, 229, .2);
 }

 /* ── Empty State ── */
 .admin-empty {
     text-align: center;
     padding: 60px 20px;
 }

 .admin-empty-icon {
     font-size: 52px;
     margin-bottom: 16px;
     opacity: .4;
 }

 .admin-empty h4 {
     font-family: var(--ff-head);
     font-size: 1.2rem;
     color: var(--admin-text);
     margin-bottom: 8px;
 }

 .admin-empty p {
     font-size: 14px;
     color: var(--muted);
     margin-bottom: 24px;
     max-width: 320px;
     margin-left: auto;
     margin-right: auto;
 }

 /* ── Grid layouts ── */
 .admin-grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .admin-grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .admin-grid-auto {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 20px;
 }

 /* ── Admin Login — matching page-hero gradient ── */
 .admin-login-wrap {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%);
     background-image:
         linear-gradient(rgba(79, 70, 229, .06) 1px, transparent 1px),
         linear-gradient(90deg, rgba(79, 70, 229, .06) 1px, transparent 1px);
     background-size: 60px 60px;
     padding: 20px;
 }

 .admin-login-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 46px 40px;
     width: 100%;
     max-width: 440px;
     box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
     position: relative;
     overflow: hidden;
 }

 .admin-login-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
 }

 .login-logo {
     text-align: center;
     margin-bottom: 34px;
 }

 .login-logo .logo-icon {
     font-size: 40px;
     color: var(--primary);
     display: block;
     margin-bottom: 14px;
     filter: drop-shadow(0 0 12px rgba(79, 70, 229, .4));
     animation: float 4s ease-in-out infinite;
 }

 .login-logo h2 {
     font-family: var(--ff-head);
     font-size: 1.55rem;
     color: var(--light);
     font-weight: 900;
     margin-bottom: 4px;
 }

 .login-logo p {
     font-size: 13.5px;
     color: var(--muted);
     margin-top: 4px;
 }

 .login-logo .login-logo-img {
     height: 52px;
     width: auto;
     margin: 0 auto 16px;
     object-fit: contain;
 }

 /* ── Admin forms — same style as public forms ── */
 .admin-form-group {
     margin-bottom: 18px;
 }

 .admin-form-group label {
     display: block;
     font-size: 11px;
     font-weight: 700;
     color: var(--admin-text);
     margin-bottom: 7px;
     letter-spacing: .09em;
     text-transform: uppercase;
 }

 .admin-form-group input,
 .admin-form-group textarea,
 .admin-form-group select {
     width: 100%;
     background: var(--admin-bg);
     border: 1.5px solid var(--admin-border);
     border-radius: var(--radius);
     padding: 11px 14px;
     color: var(--admin-text);
     font-family: var(--ff-body);
     font-size: 14px;
     transition: all .25s;
     outline: none;
     -webkit-appearance: none;
 }

 .admin-form-group input:focus,
 .admin-form-group textarea:focus,
 .admin-form-group select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
     background: #fff;
 }

 .admin-form-group textarea {
     resize: vertical;
     min-height: 120px;
 }

 /* ── Toggle switch ── */
 .admin-toggle {
     position: relative;
     width: 40px;
     height: 22px;
     flex-shrink: 0;
     display: inline-block;
 }

 .admin-toggle input {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
 }

 .admin-toggle-slider {
     position: absolute;
     inset: 0;
     background: var(--dark-5);
     border-radius: 100px;
     cursor: pointer;
     transition: background .25s ease;
 }

 .admin-toggle-slider::before {
     content: '';
     position: absolute;
     width: 16px;
     height: 16px;
     left: 3px;
     top: 3px;
     background: #fff;
     border-radius: 50%;
     transition: transform .25s;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
 }

 .admin-toggle input:checked+.admin-toggle-slider {
     background: var(--primary);
 }

 .admin-toggle input:checked+.admin-toggle-slider::before {
     transform: translateX(18px);
 }

 /* ── Select ── */
 .admin-select {
     appearance: none;
     background: var(--admin-bg);
     border: 1.5px solid var(--admin-border);
     border-radius: var(--radius);
     padding: 8px 34px 8px 13px;
     font-size: 13px;
     font-family: var(--ff-body);
     color: var(--admin-text);
     cursor: pointer;
     font-weight: 600;
     transition: all .25s;
     outline: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
 }

 .admin-select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
     background-color: #fff;
 }

 /* ── Pagination ── */
 .admin-pagination {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 16px;
     border-top: 1px solid var(--admin-border);
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 8px;
 }

 .pagination-info {
     font-size: 12px;
     color: var(--muted);
 }

 .pagination-controls {
     display: flex;
     gap: 4px;
 }

 .pagination-btn {
     width: 32px;
     height: 32px;
     background: var(--admin-card-bg);
     border: 1.5px solid var(--admin-border);
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 600;
     color: var(--admin-text);
     cursor: pointer;
     transition: all .2s;
     font-family: var(--ff-body);
 }

 .pagination-btn:hover {
     border-color: var(--primary);
     color: var(--primary);
 }

 .pagination-btn.active {
     background: var(--primary);
     border-color: var(--primary);
     color: #fff;
 }

 .pagination-btn:disabled {
     opacity: .4;
     cursor: not-allowed;
 }

 /* ── Upload area ── */
 .admin-upload-area {
     border: 2px dashed var(--admin-border);
     border-radius: var(--radius-lg);
     padding: 40px 24px;
     text-align: center;
     cursor: pointer;
     transition: all .25s;
     background: var(--admin-bg);
 }

 .admin-upload-area:hover {
     border-color: var(--primary);
     background: var(--bg-soft-indigo);
 }

 .admin-upload-icon {
     font-size: 40px;
     color: var(--muted-2);
     margin-bottom: 12px;
 }

 .admin-upload-area h5 {
     font-size: 15px;
     font-weight: 700;
     color: var(--admin-text);
     margin-bottom: 4px;
 }

 .admin-upload-area p {
     font-size: 13px;
     color: var(--muted);
 }

 .admin-img-preview-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     gap: 10px;
     margin-top: 14px;
 }

 .admin-img-preview {
     aspect-ratio: 1;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid var(--admin-border);
     position: relative;
 }

 .admin-img-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .admin-img-preview .remove-btn {
     position: absolute;
     top: 4px;
     right: 4px;
     width: 20px;
     height: 20px;
     background: rgba(239, 68, 68, .9);
     color: #fff;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     font-size: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity .2s;
 }

 .admin-img-preview:hover .remove-btn {
     opacity: 1;
 }

 /* ── Skeleton ── */
 .skeleton {
     background: linear-gradient(90deg, var(--admin-border) 25%, rgba(255, 255, 255, .8) 50%, var(--admin-border) 75%);
     background-size: 400% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: var(--radius);
 }

 .skeleton-text {
     height: 14px;
     margin-bottom: 8px;
 }

 .skeleton-title {
     height: 24px;
     margin-bottom: 12px;
     width: 60%;
 }

 .skeleton-img {
     height: 180px;
     border-radius: var(--radius-lg);
 }

 /* Chart area */
 .admin-chart-area {
     width: 100%;
     min-height: 200px;
     background: var(--admin-bg);
     border-radius: var(--radius);
     border: 1px dashed var(--admin-border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--muted);
     font-size: 13px;
     gap: 8px;
 }

 /* Misc */
 .msg-body {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.75;
 }

 .empty-state {
     text-align: center;
     padding: 80px 20px;
 }

 .empty-state-icon {
     font-size: 64px;
     margin-bottom: 20px;
     opacity: .5;
 }

 .empty-state h3 {
     font-family: var(--ff-head);
     font-size: 1.5rem;
     color: var(--light);
     margin-bottom: 12px;
 }

 .empty-state p {
     color: var(--muted);
     margin-bottom: 28px;
 }

 /* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
 @media (max-width: 1100px) {
     .hero .container {
         flex-direction: column;
         gap: 0;
     }

     .hero-stats {
         position: static;
         width: 100%;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 14px;
         margin-top: 28px;
         padding: 0 0 40px;
         background: transparent;
         border: none;
         box-shadow: none;
     }

     .stat-item {
         background: rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.12);
         border-radius: 16px;
         padding: 20px 14px;
         text-align: center;
         border-right: none !important;
     }

     .stat-item:last-child {
         border-right: none;
     }

     .stat-item:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.12);
     }

     .hero-content {
         max-width: 100%;
         padding-top: 120px;
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 36px;
     }

     .footer-brand {
         grid-column: span 2;
     }

     .stats-row {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero-stats-about {
         grid-template-columns: repeat(2, 1fr);
     }

     .cta-inner {
         grid-template-columns: 1fr;
         gap: 36px;
     }

     .section-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .section-header-btn {
         display: none;
     }

     .digital-grid {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .digital-services-grid {
         grid-template-columns: 1fr 1fr;
     }

     .digital-process-steps {
         grid-template-columns: repeat(2, 1fr);
     }

     .digital-process-steps::before {
         display: none;
     }

     /* Admin */
     .admin-header-brand {
         width: 240px;
         min-width: 240px;
     }

     .admin-sidebar {
         width: 240px;
     }

     .admin-main {
         margin-left: 240px;
         padding: 22px 26px;
     }
 }

 @media (max-width: 860px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .contact-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .about-image-block .img-badge {
         left: 16px;
     }

     /* Admin mobile */
     .admin-header-brand {
         display: none;
     }

     .sidebar-toggle-btn {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .admin-sidebar {
         transform: translateX(-100%);
         width: var(--admin-sidebar-w);
     }

     .admin-sidebar.sidebar-open {
         transform: translateX(0);
         box-shadow: 4px 0 32px rgba(0, 0, 0, .3);
     }

     .admin-main {
         margin-left: 0;
         padding: 20px;
     }

     .admin-grid-2,
     .admin-grid-3 {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 640px) {
     :root {
         --nav-h: 64px;
     }

     .nav-toggle {
         display: flex;
     }

     .main-nav {
         display: none;
         position: fixed;
         top: var(--nav-h);
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(15, 23, 42, .98);
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 6px;
         padding: 24px;
         backdrop-filter: blur(32px);
         z-index: 999;
     }

     .main-nav.open {
         display: flex;
     }

     .main-nav a {
         color: rgba(255, 255, 255, .92);
         padding: 14px 32px;
         font-size: 17px;
         font-weight: 700;
         text-align: center;
         width: 100%;
         max-width: 300px;
         border-radius: 8px;
         border: 1px solid rgba(255, 255, 255, .07);
     }

     .main-nav a:hover,
     .main-nav a.active {
         color: var(--accent);
         background: rgba(79, 70, 229, .12);
         border-color: rgba(79, 70, 229, .3);
     }

     .main-nav a::after {
         display: none;
     }

     .main-nav a.btn-nav {
         background: linear-gradient(135deg, var(--secondary), var(--primary));
         color: #fff !important;
         border-color: transparent;
         margin-top: 8px;
         margin-left: 0;
     }

     /* Hero mobile */
     .hero {
         min-height: auto;
     }

     .hero-content {
         padding-top: 100px;
         padding-bottom: 32px;
         text-align: center;
         align-items: center;
         margin-left: 0;
     }

     .hero-title {
         font-size: 2.8rem;
     }

     .hero-badge {
         justify-content: center;
         text-align: left
     }

     .hero-subtitle {
         font-size: 20px;
         text-align: left;
         margin-left: 20px;

     }

     .hero-actions {
         justify-content: center;
         flex-direction: column;
         align-items: center;
     }

     .hero-actions .btn {
         width: 100%;
         max-width: 280px;
         justify-content: center;
     }

     .stat-num {
         font-size: 2rem;
     }

     .logo {
         margin-left: 0;
         gap: 10px;
     }

     .logo-img {
         height: 42px;
     }

     .logo-text-mobile {
         font-size: .88rem;
     }

     .logo-text-mobile small {
         font-size: .62rem;
     }

     .projects-grid {
         grid-template-columns: 1fr;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .team-grid {
         grid-template-columns: 1fr 1fr;
     }

     .hero-stats-about {
         grid-template-columns: 1fr 1fr;
     }

     .stats-row {
         grid-template-columns: 1fr 1fr;
         gap: 12px;
     }

     .form-row {
         grid-template-columns: 1fr;
     }

     .digital-cards {
         grid-template-columns: 1fr;
     }

     .digital-card.featured {
         grid-column: auto;
         grid-template-columns: 1fr;
     }

     .digital-card.featured .digital-card-icon {
         margin-bottom: 16px;
     }

     .digital-services-grid {
         grid-template-columns: 1fr;
     }

     .digital-process-steps {
         grid-template-columns: 1fr 1fr;
     }

     .footer-grid {
         grid-template-columns: 1fr;
     }

     .footer-brand {
         grid-column: auto;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .cta-actions .btn-lg {

         justify-content: center;
     }

     .contact-form-card {
         padding: 24px 20px;
     }

     /* Admin mobile */
     .admin-main {
         padding: 16px;
     }

     .admin-page-header {
         flex-direction: column;
     }

     .admin-page-title {
         font-size: 1.4rem;
     }

     .stats-row {
         grid-template-columns: 1fr 1fr;
     }

     .stat-card {
         padding: 16px 14px;
     }

     .stat-card .s-num {
         font-size: 1.55rem;
     }

     .admin-card {
         padding: 16px;
     }

     .admin-login-card {
         padding: 30px 22px;
     }

     .admin-header-right {
         padding: 0 14px;
     }

     .admin-search {
         max-width: 180px;
     }

     .admin-user-info {
         display: none;
     }

     .admin-grid-2,
     .admin-grid-3 {
         grid-template-columns: 1fr;
     }

     .table-actions {
         flex-direction: column;
         gap: 4px;
     }

     .admin-quick-grid {
         grid-template-columns: 1fr 1fr;
     }

     .whatsapp-float {
         bottom: 20px;
         right: 16px;
     }

     .whatsapp-btn {
         width: 52px;
         height: 52px;
     }

     .whatsapp-btn svg {
         width: 24px;
         height: 24px;
     }

     .whatsapp-tooltip {
         display: none;
     }
 }

 @media (max-width: 400px) {


     .stat-item {
         border-right: none !important;
         border-bottom: 1px solid rgba(255, 255, 255, .1);
     }

     .hero-stats-about {
         grid-template-columns: 1fr;
     }

     .stats-row {
         grid-template-columns: 1fr;
     }

     .team-grid {
         grid-template-columns: 1fr;
     }

     .digital-process-steps {
         grid-template-columns: 1fr;
     }

     .admin-search {
         display: none;
     }

     .admin-quick-grid {
         grid-template-columns: 1fr;
     }
 }

 /* ══════════════════════════════════════════
   LAPTOP FIX (1024px–1280px)
   ══════════════════════════════════════════ */
 @media (min-width: 861px) and (max-width: 1100px) {
     .admin-header-brand {
         width: 240px;
         min-width: 240px;
     }

     .admin-header-brand .logo-img {
         height: 48px;
     }

     .admin-sidebar {
         width: 240px;
     }

     .admin-main {
         margin-left: 240px;
     }
 }