/* ===================================================
   WEBSCREATIONS DESIGN — Stylesheet
   Brand colors are also overridable live from Admin → Settings
   (see the inline <style> block injected in header.php)
   =================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --brand-primary: #1D4ED8;        /* Blue */
  --brand-primary-light: rgba(29,78,216,.08);
  --brand-accent:  #DC2626;         /* Red */
  --brand-accent-light: rgba(220,38,38,.1);
  --brand-dark:    #0A1628;
  --brand-dark-2:  #12294d;
  --brand-light:   #F5F7FA;
  --brand-mid:     #E2E8F0;
  --text-main:     #1A202C;
  --text-muted:    #64748B;
  --white:         #FFFFFF;
  --red:           #DC2626;
  --blue:          #1D4ED8;
  --purple:        #7C3AED;
  --teal:          #0D9488;
  --radius:        8px;
  --radius-lg:     16px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06);
  --shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 30px rgba(0,0,0,.14);
  --shadow-xl:     0 20px 50px rgba(0,0,0,.18);
  --shadow-primary: 0 12px 28px -8px rgba(29,78,216,.45);
  --shadow-accent:  0 12px 28px -8px rgba(220,38,38,.4);
  --transition:    .3s ease;
  --transition-fast: .18s ease;
  --max-width:     1200px;
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Inter', sans-serif;
  --header-h:      72px;
  --topbar-h:      32px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text-main);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button,input,textarea,select{font-family:inherit}
table{width:100%;border-collapse:collapse}

/* ---------- UTILITY ---------- */
.container{width:90%;max-width:var(--max-width);margin:0 auto}
.container-wide{width:92%;max-width:1400px;margin:0 auto}
.section{padding:5rem 0}
.section-sm{padding:3.5rem 0}
.section-label{font-family:var(--font-heading);font-size:.75rem;letter-spacing:3px;text-transform:uppercase;color:var(--brand-primary);margin-bottom:.5rem;display:inline-flex;align-items:center;gap:.5rem}
.section-label::before{content:'';display:inline-block;width:22px;height:2px;background:currentColor;border-radius:2px;opacity:.6;flex-shrink:0}
.section-title{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;color:var(--brand-dark);margin-bottom:1rem;line-height:1.25;word-wrap:break-word}
.section-title-lg{font-size:2.75rem}
.section-subtitle{color:var(--text-muted);font-size:1.05rem;max-width:640px;margin-bottom:2.5rem;line-height:1.8}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.bg-light{background:var(--brand-light)}
.bg-dark{background:var(--brand-dark);color:var(--white);position:relative;overflow:hidden}
.bg-dark::before{content:'';position:absolute;top:-30%;right:-10%;width:450px;height:450px;background:radial-gradient(circle,rgba(29,78,216,.2) 0%,transparent 70%);pointer-events:none}
.bg-dark::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(220,38,38,.12) 0%,transparent 70%);pointer-events:none}
.bg-dark .container{position:relative;z-index:1}
.bg-primary{background:var(--brand-primary);color:var(--white)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 2rem;border-radius:var(--radius);font-family:var(--font-heading);font-weight:600;font-size:.95rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast),filter var(--transition-fast),background var(--transition-fast);cursor:pointer;border:none;white-space:nowrap;max-width:100%;position:relative}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--brand-primary);color:var(--white);box-shadow:0 4px 14px -4px rgba(29,78,216,.4)}
.btn-primary:hover{background:var(--brand-primary);filter:brightness(1.08);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-primary)}
.btn-accent{background:var(--brand-accent);color:var(--white);box-shadow:0 4px 14px -4px rgba(220,38,38,.4)}
.btn-accent:hover{background:var(--brand-accent);filter:brightness(1.08);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-accent)}
.btn-dark{background:var(--brand-dark);color:var(--white)}
.btn-dark:hover{filter:brightness(1.3);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border:2px solid var(--brand-primary);color:var(--brand-primary)}
.btn-outline:hover{background:var(--brand-primary);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-primary)}
.btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--brand-dark)}
.btn-white:hover{background:var(--brand-light);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-sm{padding:.6rem 1.4rem;font-size:.85rem}
.btn-lg{padding:1rem 2.5rem;font-size:1.05rem}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px -4px rgba(220,38,38,.4)}
.btn-red:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:var(--shadow-accent)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 4px 14px -4px rgba(29,78,216,.4)}
.btn-blue:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:var(--shadow-primary)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 4px 14px -4px rgba(13,148,136,.4)}
.btn-teal:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(13,148,136,.45)}

/* ---------- HEADER / NAV ---------- */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--brand-mid);transition:var(--transition);width:100%}
.header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--brand-dark);flex-shrink:0}
.logo span{color:var(--brand-primary)}
.logo-icon{width:36px;height:36px;background:var(--brand-primary);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:800;font-size:1rem;flex-shrink:0}
.logo-img{height:38px;width:auto;max-width:180px;object-fit:contain}
.logo-upload-box{border:2px dashed var(--brand-mid);border-radius:12px;padding:2rem;text-align:center;background:var(--brand-light);margin-bottom:1rem}
.logo-upload-box img{max-height:60px;margin:0 auto 1rem;object-fit:contain}
.logo-upload-box .placeholder-icon{width:60px;height:60px;background:var(--brand-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.5rem;margin:0 auto 1rem}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-family:var(--font-heading);font-size:.86rem;font-weight:500;color:var(--text-main);transition:var(--transition);position:relative}
.nav-links > a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--brand-primary);transition:var(--transition)}
.nav-links > a:hover::after,.nav-links > a.active::after{width:100%}
.nav-links a:hover{color:var(--brand-primary)}
.nav-cta{margin-left:.25rem;flex-shrink:0}
.nav-dropdown{position:relative}
.nav-dropdown > a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--brand-primary);transition:var(--transition)}
.nav-dropdown:hover > a::after{width:100%}
.nav-dropdown .dropdown-menu{position:absolute;top:100%;left:-1rem;min-width:220px;background:var(--white);border:1px solid var(--brand-mid);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.5rem 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--transition);z-index:100}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:.6rem 1.25rem;font-size:.86rem}
.dropdown-menu a:hover{background:var(--brand-light);color:var(--brand-primary)}
.dropdown-menu a::after{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.5rem;flex-shrink:0;z-index:1001}

/* ---------- MOBILE MENU OVERLAY (fully independent — not nested in header) ---------- */
.mobile-nav-overlay{display:none;position:fixed;inset:0;z-index:2000;background:var(--white);flex-direction:column;overflow-y:auto}
.mobile-nav-overlay.open{display:flex}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.5rem;border-bottom:1px solid var(--brand-mid);flex-shrink:0}
.mobile-nav-header .logo{font-size:1.1rem}
.mobile-nav-close{background:var(--brand-light);border:none;width:40px;height:40px;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--brand-dark);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}
.mobile-nav-close:hover{background:var(--brand-primary);color:#fff}
.mobile-menu-list{padding:.5rem 1.5rem 2.5rem;display:flex;flex-direction:column}
.mobile-menu-list > a{font-family:var(--font-heading);font-size:1.05rem;font-weight:500;color:var(--text-main);padding:1.1rem .25rem;border-bottom:1px solid var(--brand-mid)}
.mobile-menu-list > a.active{color:var(--brand-primary)}
.mobile-menu-list .nav-dropdown{width:100%}
.mobile-menu-list .nav-dropdown > a{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-heading);font-size:1.05rem;font-weight:500;color:var(--text-main);padding:1.1rem .25rem;border-bottom:1px solid var(--brand-mid)}
.mobile-menu-list .dropdown-menu{position:static;box-shadow:none;border:none;border-left:2px solid var(--brand-primary);padding-left:1rem;opacity:1;visibility:visible;transform:none;margin-left:.5rem;display:none}
.mobile-menu-list .nav-dropdown.open .dropdown-menu{display:block}
.mobile-menu-list .dropdown-menu a{padding:.85rem .5rem;border-bottom:1px solid var(--brand-mid);font-size:.95rem;display:block}
.mobile-nav-cta{margin-top:1.5rem;width:100%;justify-content:center}
@media(min-width:901px){
  .mobile-nav-overlay{display:none !important}
}
.hamburger span{width:24px;height:2px;background:var(--brand-dark);transition:var(--transition)}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--brand-dark);color:var(--white);font-size:.8rem;padding:.45rem 0;position:relative;z-index:1001}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar a{color:var(--brand-accent);transition:var(--transition)}
.topbar a:hover{opacity:.8}
.topbar-right{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}

/* ---------- HERO ---------- */
.hero{padding:5rem 0 6rem;background:linear-gradient(160deg,var(--brand-dark) 0%,var(--brand-dark-2) 50%,var(--brand-primary) 100%);color:var(--white);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:700px;height:700px;background:radial-gradient(circle,rgba(220,38,38,.14) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(29,78,216,.25) 0%,transparent 70%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.hero-content .section-label{color:var(--brand-accent)}
.hero h1{font-family:var(--font-heading);font-size:3.25rem;font-weight:800;line-height:1.15;margin-bottom:1.25rem;word-wrap:break-word}
.hero h1 .highlight{color:var(--brand-accent)}
.hero p.hero-desc{font-size:1.12rem;opacity:.85;margin-bottom:2rem;max-width:540px;line-height:1.85}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-badges{display:flex;gap:1.5rem;margin-top:2.5rem;flex-wrap:wrap}
.hero-badge{display:flex;align-items:center;gap:.5rem;font-size:.8rem;opacity:.65}
.hero-badge .icon{font-size:1.1rem}
.hero-visual{position:relative;min-width:0}
.hero-card{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:2.5rem;position:relative}
.hero-card .stat{margin-bottom:2rem}
.hero-card .stat-number{font-family:var(--font-heading);font-size:3rem;font-weight:800;color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.25);word-wrap:break-word}
.hero-card .stat-label{font-size:.9rem;opacity:.65}
.hero-card .mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.hero-card .mini-stat .num{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;word-wrap:break-word}
.hero-card .mini-stat .lbl{font-size:.78rem;opacity:.55}

/* ---------- TRUST BAR ---------- */
.trust-bar{padding:2.5rem 0;border-bottom:1px solid var(--brand-mid)}
.trust-bar .container{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted);font-family:var(--font-heading);font-weight:500;white-space:nowrap}
.trust-item .icon{font-size:1.2rem;color:var(--brand-primary)}

/* ---------- SERVICES GRID ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.service-card{background:var(--white);border:1px solid var(--brand-mid);border-radius:14px;padding:2.25rem 1.75rem;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);position:relative;overflow:hidden;min-width:0}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:transparent}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover .service-icon{transform:scale(1.08) rotate(-4deg);background:var(--brand-primary);color:#fff}
.service-icon{width:52px;height:52px;border-radius:12px;background:var(--brand-primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;font-size:1.5rem;color:var(--brand-primary);transition:transform var(--transition),background var(--transition),color var(--transition)}
.service-card h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;margin-bottom:.5rem;color:var(--brand-dark)}
.service-card p{color:var(--text-muted);font-size:.92rem;line-height:1.7}
.service-card .learn-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.85rem;font-weight:600;color:var(--brand-primary);transition:var(--transition)}
.service-card .learn-more:hover{gap:.7rem}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-image-placeholder{background:linear-gradient(135deg,var(--brand-primary),var(--brand-dark));padding:4rem 2rem;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);min-height:400px;text-align:center}
.about-image-placeholder .big-letter{font-family:var(--font-heading);font-size:5.5rem;font-weight:800;opacity:.12;line-height:1}
.about-image-placeholder .tagline{font-family:var(--font-heading);font-size:1.4rem;font-weight:600;margin-top:1rem}
.about-points{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.about-point{display:flex;gap:.75rem;align-items:flex-start}
.about-point .check{width:24px;height:24px;border-radius:50%;background:var(--brand-primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--brand-primary);font-size:.85rem;font-weight:700}
.about-point p{font-size:.95rem;color:var(--text-muted)}

/* ---------- PRODUCTS SHOWCASE ---------- */
.product-showcase{position:relative;overflow:hidden}
.product-card-full{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:4rem 0}
.product-card-full:nth-child(even){direction:rtl}
.product-card-full:nth-child(even) > *{direction:ltr}
.product-card-full + .product-card-full{border-top:1px solid var(--brand-mid)}
.product-visual{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-width:0}
.product-mockup{width:100%;border-radius:var(--radius-lg);padding:3rem 2rem;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white);position:relative}
.product-mockup .product-logo-text{font-family:var(--font-heading);font-size:2.5rem;font-weight:800;margin-bottom:.25rem;word-wrap:break-word}
.product-mockup .product-tagline{font-size:.95rem;opacity:.8}
.product-mockup .product-badges{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.product-mockup .badge{background:rgba(255,255,255,.15);backdrop-filter:blur(6px);padding:.4rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600}
.product-info{min-width:0}
.product-info .section-label{margin-bottom:.5rem}
.product-info h3{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--brand-dark);margin-bottom:.75rem;line-height:1.3}
.product-info > p{color:var(--text-muted);line-height:1.8;margin-bottom:1.5rem}
.product-features{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:2rem}
.product-feature{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-muted)}
.product-feature .icon{color:var(--brand-primary);font-weight:700;flex-shrink:0}
.product-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- PRODUCT DETAIL PAGE ---------- */
.product-hero{padding:5rem 0 5rem;color:var(--white);position:relative;overflow:hidden}
.product-hero .container{position:relative;z-index:1}
.product-hero .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.product-hero h1{font-family:var(--font-heading);font-size:3rem;font-weight:800;line-height:1.15;margin-bottom:1rem;word-wrap:break-word}
.product-hero .hero-desc{font-size:1.1rem;opacity:.85;margin-bottom:2rem;line-height:1.85}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.feature-card{background:var(--white);border:1px solid var(--brand-mid);border-radius:12px;padding:2rem 1.75rem;transition:var(--transition);min-width:0}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.feature-card .icon-wrap{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.4rem}
.feature-card h4{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;margin-bottom:.4rem;color:var(--brand-dark)}
.feature-card p{font-size:.9rem;color:var(--text-muted);line-height:1.7}
.modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.module-card{display:flex;gap:1rem;padding:1.5rem;background:var(--white);border:1px solid var(--brand-mid);border-radius:12px;transition:var(--transition);min-width:0}
.module-card:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-sm)}
.module-card .module-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.module-card h4{font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--brand-dark);margin-bottom:.25rem}
.module-card p{font-size:.85rem;color:var(--text-muted);line-height:1.6}
.industries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.industry-card{text-align:center;padding:2rem 1.5rem;background:var(--white);border:1px solid var(--brand-mid);border-radius:12px;transition:var(--transition);min-width:0}
.industry-card:hover{border-color:var(--brand-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.industry-card .ind-icon{font-size:2rem;margin-bottom:.75rem}
.industry-card h4{font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--brand-dark)}
.industry-card p{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}

/* ---------- STATS ROW ---------- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat-box{text-align:center;padding:2rem 1rem;min-width:0;border-right:1px solid rgba(255,255,255,.08)}
.stat-box:last-child{border-right:none}
.stat-box .stat-num{font-family:var(--font-heading);font-size:2.75rem;font-weight:800;background:linear-gradient(135deg,var(--brand-accent),#f87171);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;word-wrap:break-word}
.stat-box .stat-lbl{font-size:.85rem;opacity:.7;margin-top:.4rem;font-family:var(--font-heading);letter-spacing:.3px}

/* ---------- PORTFOLIO ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.work-card{border-radius:12px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:var(--transition);min-width:0}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.work-thumb{height:200px;position:relative;overflow:hidden}
.work-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--white);text-align:center;padding:1rem}
.work-card-body{padding:1.5rem}
.work-card-body h3{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;margin-bottom:.35rem;color:var(--brand-dark)}
.work-card-body p{font-size:.85rem;color:var(--text-muted)}
.work-card-body .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}
.work-card-body .tag{font-size:.72rem;padding:.2rem .6rem;background:var(--brand-primary-light);color:var(--brand-primary);border-radius:4px;font-weight:500}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.pricing-card{background:var(--white);border:1px solid var(--brand-mid);border-radius:16px;padding:2.5rem 2rem;text-align:center;transition:transform var(--transition),box-shadow var(--transition);position:relative;min-width:0}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pricing-card.featured{border-color:var(--brand-primary);border-width:2px;box-shadow:0 20px 45px -12px rgba(29,78,216,.35);transform:scale(1.04)}
.pricing-card.featured:hover{transform:scale(1.04) translateY(-4px);box-shadow:0 26px 55px -12px rgba(29,78,216,.42)}
.pricing-card.featured::before{content:'';position:absolute;inset:0;border-radius:16px;padding:2px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}
.pricing-badge{display:inline-block;background:linear-gradient(135deg,var(--brand-accent),#ef4444);color:var(--white);padding:.3rem 1.1rem;border-radius:20px;font-size:.75rem;font-weight:700;margin-bottom:1rem;font-family:var(--font-heading);letter-spacing:1px;text-transform:uppercase;box-shadow:0 4px 12px -2px rgba(220,38,38,.4)}
.pricing-card h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--brand-dark);margin-bottom:.25rem}
.pricing-card .price{font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:var(--brand-primary);margin:.75rem 0;word-wrap:break-word}
.pricing-card .price small{font-size:.85rem;font-weight:400;color:var(--text-muted)}
.pricing-card .price .currency{font-size:1.2rem;vertical-align:super}
.pricing-features{text-align:left;margin:1.5rem 0 2rem}
.pricing-features li{padding:.5rem 0;font-size:.88rem;color:var(--text-muted);display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--brand-mid)}
.pricing-features li:last-child{border:none}
.pricing-features li .icon{color:var(--brand-primary);font-weight:700;flex-shrink:0}

/* ---------- TESTIMONIALS ---------- */
.testimonials-section{background:var(--brand-dark);color:var(--white);padding:5rem 0;position:relative;overflow:hidden}
.testimonials-section::before{content:'';position:absolute;top:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(29,78,216,.22) 0%,transparent 70%);pointer-events:none}
.testimonials-section::after{content:'';position:absolute;bottom:-25%;right:-10%;width:450px;height:450px;background:radial-gradient(circle,rgba(220,38,38,.14) 0%,transparent 70%);pointer-events:none}
.testimonials-section .container{position:relative;z-index:1}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.testimonial-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:2rem;min-width:0;position:relative;transition:transform var(--transition),background var(--transition)}
.testimonial-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.07)}
.testimonial-card::before{content:'"';position:absolute;top:.5rem;right:1.5rem;font-family:var(--font-heading);font-size:4rem;font-weight:800;color:rgba(255,255,255,.06);line-height:1}
.testimonial-card .stars{color:var(--brand-accent);margin-bottom:1rem;font-size:1rem;letter-spacing:2px}
.testimonial-card blockquote{font-size:.92rem;line-height:1.8;opacity:.82;margin-bottom:1.25rem;font-style:italic;position:relative}
.testimonial-card .author{display:flex;align-items:center;gap:.75rem}
.testimonial-card .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-dark-2));display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:.85rem;flex-shrink:0;box-shadow:0 4px 10px -2px rgba(29,78,216,.5)}
.testimonial-card .author-info .name{font-family:var(--font-heading);font-weight:600;font-size:.88rem}
.testimonial-card .author-info .role{font-size:.78rem;opacity:.5}

/* ---------- CLIENTS ---------- */
.clients-bar{padding:3rem 0;overflow:hidden}
.clients-track{display:flex;gap:1.25rem;align-items:center;justify-content:center;flex-wrap:wrap}
.client-name{font-family:var(--font-heading);font-size:.9rem;font-weight:600;color:var(--text-muted);opacity:.65;padding:.5rem 1.25rem;border:1px solid var(--brand-mid);border-radius:6px}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:linear-gradient(135deg,var(--brand-primary),#1e40af);padding:4.5rem 0;text-align:center;color:var(--white);position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);background-size:28px 28px;opacity:.5;pointer-events:none}
.cta-banner::after{content:'';position:absolute;bottom:-60%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(220,38,38,.25) 0%,transparent 70%);pointer-events:none}
.cta-banner .container{position:relative;z-index:1}
.cta-banner h2{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;margin-bottom:.75rem;word-wrap:break-word}
.cta-banner p{opacity:.88;margin-bottom:2rem;font-size:1.05rem}
.cta-banner-dark{background:linear-gradient(135deg,var(--brand-dark),var(--brand-dark-2))}
.cta-banner .cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- INLINE CTA (conversion box within page content) ---------- */
.inline-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:linear-gradient(135deg,var(--brand-primary-light),rgba(220,38,38,.06));border:1px solid var(--brand-mid);border-left:4px solid var(--brand-primary);border-radius:12px;padding:1.75rem 2rem;margin:2.5rem 0}
.inline-cta-text h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--brand-dark);margin-bottom:.25rem}
.inline-cta-text p{color:var(--text-muted);font-size:.92rem}
.inline-cta .btn{flex-shrink:0}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.contact-info-cards{display:flex;flex-direction:column;gap:1.25rem}
.contact-info-card{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;background:var(--brand-light);border-radius:12px;min-width:0}
.contact-info-card .icon-box{width:44px;height:44px;border-radius:10px;background:var(--brand-primary);color:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.contact-info-card h4{font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--brand-dark);margin-bottom:.2rem}
.contact-info-card p,.contact-info-card a{font-size:.9rem;color:var(--text-muted);word-break:break-word}
.contact-info-card a{color:var(--brand-primary);transition:var(--transition)}
.contact-info-card a:hover{text-decoration:underline}
.contact-form{background:var(--white);border:1px solid var(--brand-mid);border-radius:12px;padding:2.5rem;min-width:0}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-family:var(--font-heading);font-size:.85rem;font-weight:500;color:var(--brand-dark);margin-bottom:.4rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.8rem 1rem;border:1px solid var(--brand-mid);border-radius:var(--radius);font-family:var(--font-body);font-size:.95rem;color:var(--text-main);transition:var(--transition);background:var(--white)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.form-group textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- FOOTER ---------- */
.footer{background:var(--brand-dark);color:var(--white);padding:4rem 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .logo{margin-bottom:1rem}
.footer-brand .logo span{color:var(--brand-accent)}
.footer-brand p{font-size:.88rem;opacity:.55;line-height:1.7;max-width:300px}
.footer-col{min-width:0}
.footer-col h4{font-family:var(--font-heading);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:1.2rem;color:var(--brand-accent)}
.footer-col a{display:block;font-size:.88rem;opacity:.55;padding:.3rem 0;transition:var(--transition);word-break:break-word}
.footer-col a:hover{opacity:1;color:var(--brand-accent)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 0;font-size:.82rem;opacity:.45;flex-wrap:wrap;gap:.5rem}
.footer-social{display:flex;gap:.75rem}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:.82rem;opacity:.7}
.footer-social a:hover{background:var(--brand-primary);opacity:1}

/* ---------- PAGE HERO ---------- */
.page-hero{padding:4rem 0 3.5rem;background:linear-gradient(160deg,var(--brand-dark),var(--brand-primary));color:var(--white);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-40%;right:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(220,38,38,.16) 0%,transparent 70%);pointer-events:none}
.page-hero::after{content:'';position:absolute;bottom:-50%;left:-15%;width:450px;height:450px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-heading);font-size:2.75rem;font-weight:700;margin-bottom:.5rem;word-wrap:break-word}
.page-hero p{opacity:.72;font-size:1.05rem}
.breadcrumb{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;font-size:.85rem;opacity:.55;flex-wrap:wrap}
.breadcrumb a{opacity:.8;transition:var(--transition)}
.breadcrumb a:hover{opacity:1;color:var(--brand-accent)}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--brand-mid);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;font-family:var(--font-heading);font-weight:600;font-size:1rem;color:var(--brand-dark);background:var(--white);transition:var(--transition)}
.faq-question:hover{background:var(--brand-light)}
.faq-question .toggle{font-size:1.2rem;transition:var(--transition);color:var(--brand-primary);flex-shrink:0}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;background:var(--brand-light)}
.faq-answer p{padding:0 1.5rem 1.25rem;font-size:.92rem;color:var(--text-muted);line-height:1.8}
.faq-item.open .faq-answer{max-height:300px}
.faq-item.open .toggle{transform:rotate(45deg)}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blog-card{display:block;border-radius:12px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:var(--transition);min-width:0}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card-thumb{height:170px;position:relative;display:flex;align-items:flex-end;padding:1rem}
.blog-card-thumb-img{background-size:cover;background-position:center}
.blog-card-thumb-img::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.55),transparent 60%)}
.blog-card-thumb-img .blog-category-badge{position:relative;z-index:1}
.blog-featured-image{width:100%;max-height:420px;overflow:hidden}
.blog-featured-image img{width:100%;height:100%;object-fit:cover;max-height:420px}
.blog-category-badge{background:rgba(255,255,255,.92);color:var(--brand-dark);font-family:var(--font-heading);font-size:.72rem;font-weight:700;padding:.3rem .8rem;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.blog-card-body{padding:1.5rem}
.blog-meta{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem;font-family:var(--font-heading);letter-spacing:.5px}
.blog-card-body h3{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;margin-bottom:.5rem;color:var(--brand-dark);line-height:1.4}
.blog-card-body p{font-size:.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:.75rem}
.blog-card-body .learn-more{font-size:.85rem;font-weight:600;color:var(--brand-primary)}

/* Long-form article typography */
.blog-post-content{font-size:1.05rem;line-height:1.9;color:var(--text-main)}
.blog-post-content h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--brand-dark);margin:2.25rem 0 1rem}
.blog-post-content h3{font-family:var(--font-heading);font-size:1.2rem;font-weight:600;color:var(--brand-dark);margin:1.75rem 0 .75rem}
.blog-post-content p{margin-bottom:1.25rem;color:var(--text-muted)}
.blog-post-content ul,.blog-post-content ol{margin:0 0 1.25rem 1.5rem;color:var(--text-muted)}
.blog-post-content ul{list-style:disc}
.blog-post-content ol{list-style:decimal}
.blog-post-content li{margin-bottom:.5rem;line-height:1.8}
.blog-post-content strong{color:var(--brand-dark)}
.blog-post-content a{color:var(--brand-primary);text-decoration:underline}
.blog-post-content blockquote{border-left:3px solid var(--brand-primary);padding:.5rem 0 .5rem 1.5rem;margin:1.5rem 0;font-style:italic;color:var(--text-muted)}
.blog-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:999;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:var(--transition);color:var(--white);font-size:1.5rem}
.whatsapp-float:hover{transform:scale(1.1)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .hero-grid,.about-grid,.contact-grid,.product-card-full,.product-hero .hero-grid{grid-template-columns:1fr}
  .hero{padding:4rem 0 4rem;text-align:center}
  .hero p.hero-desc{margin:0 auto 2rem}
  .hero-actions,.hero-badges{justify-content:center}
  .hero-visual{display:none}
  .product-card-full:nth-child(even){direction:ltr}
  .services-grid,.work-grid,.pricing-grid,.testimonials-grid,.feature-grid,.blog-grid,.blog-teaser-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pricing-card.featured{transform:none}
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:1fr 1fr}
  .modules-grid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

@media(max-width:768px){
  .section{padding:3.5rem 0}
  .hero{padding-top:3rem}
  .hero h1{font-size:2.1rem}
  .section-title{font-size:1.65rem}
  .section-title-lg{font-size:2rem}
  .page-hero{padding:3rem 0 2.5rem}
  .page-hero h1{font-size:2rem}
  .product-hero{padding-top:3rem}
  .product-hero h1{font-size:2.1rem}
  .services-grid,.work-grid,.pricing-grid,.testimonials-grid,.feature-grid,.stats-row,.industries-grid,.blog-grid,.blog-teaser-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .product-features{grid-template-columns:1fr}
  .contact-form{padding:1.75rem}
  .topbar .container{justify-content:center;text-align:center}
  .topbar-right{justify-content:center}
}

@media(max-width:640px){
  .services-grid,.work-grid,.pricing-grid,.testimonials-grid,.feature-grid,.stats-row,.industries-grid,.blog-grid,.blog-teaser-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .topbar{font-size:.72rem}
  .topbar-right{gap:.75rem}
  .hero h1{font-size:1.8rem}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .hero-actions,.cta-actions{flex-direction:column}
  .product-actions{flex-direction:column}
  .product-actions .btn{width:100%}
  .btn-lg{padding:.9rem 1.5rem;font-size:1rem}
  .work-thumb{height:160px}
  .about-image-placeholder{min-height:280px;padding:2.5rem 1.5rem}
  .about-image-placeholder .big-letter{font-size:4rem}
  .testimonials-section,.section{padding-left:0;padding-right:0}
  .container{width:92%}
  .inline-cta{flex-direction:column;align-items:stretch;text-align:center;padding:1.5rem}
  .inline-cta .btn{width:100%}
}

@media(max-width:400px){
  .hero h1{font-size:1.55rem}
  .logo{font-size:1.05rem}
  .btn{padding:.75rem 1.25rem;font-size:.88rem}
}

/* ---------- ADMIN-SPECIFIC (used only inside /admin) ---------- */
.admin-body{background:linear-gradient(180deg,var(--brand-light) 0%,#eef1f6 100%);min-height:100vh;font-family:var(--font-body)}
.admin-wrap{width:94%;max-width:1100px;margin:0 auto;padding:2rem 0 4rem}
.admin-header{background:var(--brand-dark);color:#fff;padding:1rem 0;position:sticky;top:0;z-index:500;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.admin-header .container{width:94%;max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.admin-nav{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.admin-nav a{color:rgba(255,255,255,.68);font-size:.85rem;font-family:var(--font-heading);font-weight:500;padding:.5rem .9rem;border-radius:20px;transition:var(--transition-fast)}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.admin-nav a.active{color:#fff;background:var(--brand-primary)}
.admin-card{background:#fff;border:1px solid var(--brand-mid);border-radius:14px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:.85rem .5rem;border-bottom:1px solid var(--brand-mid);font-size:.9rem}
.admin-table th{font-family:var(--font-heading);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}
.admin-table tr:hover{background:var(--brand-light)}
.admin-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.badge-pill{display:inline-block;padding:.2rem .7rem;border-radius:20px;font-size:.72rem;font-weight:600;font-family:var(--font-heading)}
.badge-published{background:rgba(29,78,216,.1);color:var(--brand-primary)}
.badge-draft{background:rgba(100,116,139,.12);color:var(--text-muted)}
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem;font-size:.9rem}
.alert-success{background:rgba(29,78,216,.08);color:#1e3a8a;border:1px solid rgba(29,78,216,.25)}
.alert-error{background:rgba(220,38,38,.08);color:#991b1b;border:1px solid rgba(220,38,38,.25)}
.login-box{max-width:420px;margin:6rem auto;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:2.5rem}
.field-hint{font-size:.8rem;color:var(--text-muted);margin-top:.35rem}
.color-input-row{display:flex;align-items:center;gap:.75rem}
.color-input-row input[type=color]{width:50px;height:42px;padding:2px;border:1px solid var(--brand-mid);border-radius:6px;cursor:pointer}

/* ---------- ADMIN DASHBOARD (home.php) ---------- */
.dash-welcome{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:linear-gradient(135deg,var(--brand-dark),var(--brand-dark-2));border-radius:16px;padding:2rem 2.25rem;margin-bottom:1.5rem;color:#fff;position:relative;overflow:hidden}
.dash-welcome::before{content:'';position:absolute;top:-40%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(29,78,216,.35) 0%,transparent 70%);pointer-events:none}
.dash-welcome::after{content:'';position:absolute;bottom:-50%;left:10%;width:250px;height:250px;background:radial-gradient(circle,rgba(220,38,38,.2) 0%,transparent 70%);pointer-events:none}
.dash-welcome > *{position:relative;z-index:1}
.dash-welcome h1{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;margin-bottom:.25rem}
.dash-welcome p{opacity:.7;font-size:.9rem}

.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border:1px solid var(--brand-mid);border-radius:14px;padding:1.5rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast);display:block;min-width:0}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.stat-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.9rem}
.stat-card-num{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--brand-dark);line-height:1}
.stat-card-label{font-family:var(--font-heading);font-size:.85rem;font-weight:600;color:var(--text-main);margin-top:.4rem}
.stat-card-sub{font-size:.78rem;color:var(--text-muted);margin-top:.15rem}
.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--brand-mid);display:inline-block}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.dash-card-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--brand-dark);margin-bottom:1.25rem}

.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:1.1rem .5rem;border:1px solid var(--brand-mid);border-radius:12px;transition:var(--transition-fast);font-family:var(--font-heading);font-size:.78rem;font-weight:600;color:var(--text-main)}
.quick-action:hover{border-color:var(--brand-primary);background:var(--brand-primary-light);color:var(--brand-primary);transform:translateY(-2px)}
.qa-icon{font-size:1.5rem}

.activity-list{display:flex;flex-direction:column;gap:.25rem}
.activity-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.75rem;padding:.75rem .5rem;border-radius:8px;transition:var(--transition-fast);font-size:.85rem}
.activity-row:hover{background:var(--brand-light)}
.activity-type-badge{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.activity-page{background:var(--brand-primary-light)}
.activity-post{background:var(--brand-accent-light)}
.activity-title{color:var(--text-main);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.activity-time{color:var(--text-muted);font-size:.78rem;white-space:nowrap}

.health-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.health-item{display:flex;gap:.75rem;align-items:flex-start;padding:1.1rem;border:1px solid var(--brand-mid);border-radius:12px;transition:var(--transition-fast);color:var(--text-main)}
.health-item:hover{border-color:var(--brand-primary);background:var(--brand-primary-light)}
.health-icon{font-size:1.3rem;flex-shrink:0}
.health-item strong{font-family:var(--font-heading);font-size:.85rem;display:block;margin-bottom:.15rem}
.health-item p{font-size:.78rem;color:var(--text-muted);overflow-wrap:anywhere}

@media(max-width:900px){
  .stat-cards{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
  .health-grid{grid-template-columns:1fr 1fr}
  .quick-actions{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .admin-table{display:block;overflow-x:auto;white-space:nowrap}
  .admin-header .container{flex-direction:column;align-items:flex-start}
  .stat-cards{grid-template-columns:1fr 1fr}
  .health-grid{grid-template-columns:1fr}
  .quick-actions{grid-template-columns:1fr 1fr}
  .dash-welcome{flex-direction:column;align-items:flex-start}
  .activity-row{grid-template-columns:auto 1fr auto;font-size:.8rem}
  .activity-time{display:none}
}