/* ============================================================
   MSD HUB  —  Premium UI  ·  v2.0
   Color palette derived from MsD logo (Deep Blue & Cyan Tech)
   ============================================================ */

/* -------- Design Tokens -------- */
:root {
  /* Brand — from logo */
  --brand:        #1f2b5b; /* Deep Blue from 'M' */
  --brand-deep:   #12193b;
  --brand-mid:    #2a3b7d;
  --brand-light:  #cce6ff;
  --brand-50:     #eef7ff;
  --accent:       #0e9fd6; /* Cyan from circuit and 'S' */
  --accent-glow:  rgba(14, 159, 214, 0.18);

  /* Neutral — navy undertone */
  --navy:         #0a1128;
  --navy-2:       #131f42;
  --navy-3:       #192955;

  /* Surfaces */
  --bg:           #f7f9fc;
  --bg-alt:       #eff4f9;
  --surface:      #ffffff;

  /* Text */
  --text-h:       #0f172a;
  --text:         #334155;
  --text-muted:   #64748b;

  /* Misc */
  --border:       #dfe8e7;
  --shadow-xs:    0 1px 2px rgba(15,34,52,.04);
  --shadow-sm:    0 2px 8px rgba(15,34,52,.06);
  --shadow:       0 4px 20px rgba(15,34,52,.08);
  --shadow-lg:    0 12px 48px rgba(15,34,52,.12);
  --shadow-xl:    0 24px 64px rgba(15,34,52,.16);

  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-pill:  9999px;

  --header-h:     72px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --spring:       cubic-bezier(.34,1.56,.64,1);
  --dur:          .35s;
}

/* -------- Reset & Base -------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'Tajawal',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }

/* Custom Scrollbar */
::-webkit-scrollbar       { width:7px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--brand-light); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand); }

/* -------- Loader -------- */
#loader {
  position:fixed; inset:0;
  background:linear-gradient(135deg,var(--navy) 0%,var(--brand-deep) 50%,var(--brand) 100%);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner  { text-align:center; }
.loader-logo {
  font-size:3.2rem; font-weight:900; color:#fff;
  letter-spacing:6px; margin-bottom:1.5rem;
  animation:pulse 1.2s infinite;
}
.loader-bar {
  width:220px; height:3px;
  background:rgba(255,255,255,.2);
  border-radius:2px; overflow:hidden; margin:0 auto;
}
.loader-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),#fff);
  border-radius:2px;
  animation:load 1.8s ease forwards;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes load  { from{width:0} to{width:100%} }

/* -------- Header -------- */
#header {
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.04);
  z-index:1000;
  transition:all var(--dur) var(--ease);
}
#header.scrolled {
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
}
.header-inner {
  max-width:1200px; margin:0 auto;
  padding:0 2rem; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo */
.logo { display:flex; align-items:center; gap:10px; cursor:default; }
.logo-img {
  height:40px; width:auto;
  object-fit:contain; border-radius:10px;
  transition:transform var(--dur) var(--spring);
}
.logo:hover .logo-img { transform:scale(1.08) rotate(-2deg); }
.logo-text   { font-size:1.7rem; font-weight:900; color:var(--brand); }
.logo-d      { color:var(--accent); }
.logo-dot    { font-size:1.9rem; font-weight:900; color:var(--accent); }
.logo-domain { font-size:.95rem; font-weight:500; color:var(--text-muted); }

/* Nav */
#nav-links { display:flex; gap:2rem; }
.nav-link {
  color:var(--text); font-weight:600; font-size:.92rem;
  position:relative; padding:.4rem 0;
  transition:color var(--dur) var(--ease);
}
.nav-link::after {
  content:''; position:absolute; bottom:0; right:0;
  width:0; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width var(--dur) var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--brand); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Menu Button */
.menu-btn {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.menu-btn span {
  display:block; width:22px; height:2px;
  background:var(--text-h); border-radius:2px;
  transition:var(--dur) var(--ease);
}

/* -------- Hero -------- */
#hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--navy) 0%,#0a3d38 30%,var(--brand) 60%,var(--accent) 100%);
  padding:calc(var(--header-h) + 3rem) 2rem 5rem;
}
/* Mesh overlay */
#hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(0,191,165,.15) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(0,133,124,.2) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(15,34,52,.3) 0%,transparent 50%);
  z-index:0;
}
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-circle {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);
  animation:floatCircle 20s linear infinite;
}
.c1 { width:800px; height:800px; top:-300px; right:-250px; animation-duration:25s; }
.c2 { width:500px; height:500px; bottom:-200px; left:-150px; animation-duration:20s; animation-direction:reverse; }
.c3 { width:350px; height:350px; top:35%; left:25%; animation-duration:15s; }

@keyframes floatCircle {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(30px,-20px) scale(1.05); }
  66%  { transform:translate(-20px,30px) scale(.95); }
  100% { transform:translate(0,0) scale(1); }
}

.hero-content {
  position:relative; z-index:1;
  text-align:center; max-width:800px; margin:0 auto;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  color:rgba(255,255,255,.9); border-radius:var(--radius-pill);
  padding:.5rem 1.5rem; font-size:.88rem; font-weight:600;
  margin-bottom:2rem;
  border:1px solid rgba(255,255,255,.15);
  animation:fadeUp .8s var(--ease) both;
}
.hero-badge-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  animation:blink 1.5s infinite;
  display:inline-block;
}
.hero-logo-wrap {
  margin-bottom:2rem;
  display:flex; justify-content:center;
  animation:fadeUp .8s .1s var(--ease) both;
}
.hero-logo {
  height:100px; width:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.3)) brightness(1.05);
  animation:floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}
.hero-title {
  font-size:clamp(2.4rem,5.5vw,4rem);
  font-weight:900; color:#fff;
  margin-bottom:1.2rem; line-height:1.25;
  animation:fadeUp .8s .2s var(--ease) both;
}
.gradient-text {
  background:linear-gradient(135deg,#fff 0%,var(--brand-light) 50%,var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:1.2rem; color:rgba(255,255,255,.75);
  margin-bottom:2.5rem; line-height:1.9;
  max-width:600px; margin-left:auto; margin-right:auto;
  animation:fadeUp .8s .3s var(--ease) both;
}

/* Hero Stats */
.hero-stats {
  display:flex; justify-content:center; gap:1.5rem;
  margin-bottom:3rem; flex-wrap:wrap;
  animation:fadeUp .8s .4s var(--ease) both;
}
.stat-item {
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:1rem 2rem; text-align:center;
  min-width:120px;
  transition:all var(--dur) var(--ease);
}
.stat-item:hover {
  background:rgba(255,255,255,.15);
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.25);
}
.stat-num {
  font-size:2.2rem; font-weight:900; color:#fff;
  display:block; line-height:1; margin-bottom:.3rem;
}
.stat-label { font-size:.82rem; color:rgba(255,255,255,.6); font-weight:500; }

/* Buttons */
.hero-actions {
  display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap;
  animation:fadeUp .8s .5s var(--ease) both;
}
.btn {
  padding:.85rem 2.2rem; border-radius:var(--radius-pill);
  font-size:1rem; font-weight:700; font-family:'Tajawal',sans-serif;
  text-decoration:none; cursor:pointer; border:none;
  transition:all var(--dur) var(--ease);
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary {
  background:#fff; color:var(--brand);
  box-shadow:0 4px 24px rgba(0,0,0,.15);
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  background:var(--brand-50);
}
.btn-outline {
  background:rgba(255,255,255,.08); color:#fff;
  border:2px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
}
.btn-outline:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-3px);
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(25px); }
  to   { opacity:1; transform:translateY(0); }
}

/* -------- Container & Sections -------- */
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
section     { padding:6rem 0; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-header.align-right { text-align:right; }

.section-title {
  font-size:clamp(1.9rem,3.5vw,2.6rem);
  font-weight:900; color:var(--text-h);
  margin-bottom:.6rem;
  position:relative; display:inline-block;
}
.section-title::after {
  content:''; display:block;
  width:50px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  margin:.6rem auto 0;
}
.section-header.align-right .section-title::after { margin:.6rem 0 0 auto; }
.section-sub { color:var(--text-muted); font-size:1.05rem; margin-top:.3rem; }

/* -------- Filter Bar -------- */
.filter-bar {
  display:flex; gap:.6rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:3rem;
}
.filter-btn {
  padding:.55rem 1.5rem; border-radius:var(--radius-pill);
  font-size:.88rem; font-weight:700; cursor:pointer;
  border:2px solid var(--border);
  background:var(--surface); color:var(--text);
  transition:all var(--dur) var(--ease);
  font-family:'Tajawal',sans-serif;
}
.filter-btn:hover {
  border-color:var(--brand-light);
  color:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.filter-btn.active {
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 16px rgba(0,133,124,.25);
  transform:translateY(-2px);
}

/* -------- Projects Grid -------- */
.projects-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:2rem;
}
.project-card {
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:all var(--dur) var(--ease);
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--border);
}
.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.project-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.project-card:hover::before { opacity:1; }
.project-card.hidden { display:none; }

.card-header {
  padding:2rem 1.8rem 1.5rem;
  position:relative; overflow:hidden;
}
.card-icon {
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1rem;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.card-name    { font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.card-name-ar { font-size:.88rem; color:rgba(255,255,255,.7); font-weight:500; }

.card-body { padding:1.3rem 1.8rem; flex:1; }
.card-desc { color:var(--text); font-size:.92rem; line-height:1.8; margin-bottom:1rem; }
.card-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.tag {
  background:var(--brand-50); color:var(--brand);
  border-radius:var(--radius-pill);
  padding:.2rem .85rem; font-size:.76rem; font-weight:600;
}

.card-footer {
  padding:1rem 1.8rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border);
}
.card-status {
  display:flex; align-items:center; gap:.4rem;
  font-size:.82rem; color:var(--brand); font-weight:700;
}
.status-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); animation:blink 1.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.card-link {
  background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff;
  padding:.5rem 1.3rem; border-radius:var(--radius-pill);
  font-size:.86rem; font-weight:700;
  transition:all var(--dur) var(--ease);
  box-shadow:0 2px 8px rgba(0,133,124,.2);
}
.card-link:hover {
  transform:scale(1.06);
  box-shadow:0 4px 16px rgba(0,133,124,.3);
}

/* -------- About -------- */
#about { background:linear-gradient(180deg,var(--bg) 0%,var(--brand-50) 100%); }
.about-wrapper {
  display:grid; grid-template-columns:1fr 1.4fr; gap:4rem;
  align-items:center;
}
.about-visual {
  position:relative; display:flex;
  align-items:center; justify-content:center;
  height:300px;
}
.about-logo-big {
  font-size:5.5rem; font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.12; letter-spacing:10px;
  position:absolute; z-index:1;
}
.about-rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ring {
  position:absolute; border-radius:50%;
  border:2px solid var(--brand);
  opacity:.1; animation:rotate 8s linear infinite;
}
.r1 { width:220px; height:220px; animation-duration:10s; }
.r2 { width:160px; height:160px; animation-duration:14s; animation-direction:reverse; }
.r3 { width:100px; height:100px; animation-duration:7s; }
@keyframes rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.about-text {
  color:var(--text); line-height:2;
  margin-bottom:1.2rem; font-size:1.02rem;
}
.about-values { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.value-item {
  display:flex; align-items:center; gap:.5rem;
  background:var(--surface); border-radius:var(--radius-sm);
  padding:.65rem 1.2rem;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  font-weight:700; font-size:.9rem; color:var(--text-h);
  transition:all var(--dur) var(--ease);
}
.value-item:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:var(--brand-light);
}

/* -------- Certifications -------- */
#certifications { background:var(--bg-alt); }
.cert-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem; max-width:980px; margin:0 auto;
}
.cert-card {
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--border);
  transition:all var(--dur) var(--ease);
}
.cert-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.cert-logo-wrap {
  padding:2.2rem 1.5rem;
  display:flex; align-items:center; justify-content:center;
  min-height:140px;
  position:relative;
}
.cert-logo-wrap::after {
  content:''; position:absolute; bottom:0; left:10%; right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.cert-blue   { background:linear-gradient(160deg,#eef5fc 0%,#dbeafe 100%); }
.cert-green  { background:linear-gradient(160deg,#ecfdf5 0%,#d1fae5 100%); }
.cert-purple { background:linear-gradient(160deg,#faf5ff 0%,#ede9fe 100%); }

.cert-logo {
  max-width:130px; max-height:75px;
  width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
.cert-body {
  padding:1.5rem 1.8rem 1.8rem;
  text-align:center; flex:1;
}
.cert-name {
  font-size:1rem; font-weight:800;
  color:var(--text-h); margin-bottom:.6rem;
}
.cert-num {
  font-size:1.5rem; font-weight:900;
  letter-spacing:1.5px; margin-bottom:.8rem;
  font-feature-settings:'tnum';
}
.cert-card:nth-child(1) .cert-num { color:#1e40af; }
.cert-card:nth-child(2) .cert-num { color:#047857; }
.cert-card:nth-child(3) .cert-num { color:#7c3aed; }

.cert-badge {
  display:inline-block;
  border-radius:var(--radius-pill);
  padding:.35rem 1.1rem; font-size:.78rem; font-weight:700;
}
.cert-badge-blue   { background:#dbeafe; color:#1e40af; }
.cert-badge-green  { background:#d1fae5; color:#047857; }
.cert-badge-purple { background:#ede9fe; color:#7c3aed; }

/* -------- Contact -------- */
#contact { background:var(--bg); }
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem; max-width:960px; margin:0 auto;
}
.contact-card {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:all var(--dur) var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.contact-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.contact-icon-wrap {
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:.4rem;
  transition:transform var(--dur) var(--spring);
}
.contact-card:hover .contact-icon-wrap { transform:scale(1.12) rotate(-3deg); }

.ci-phone    { background:#e0f2f1; color:var(--brand); }
.ci-whatsapp { background:#dcfce7; color:#16a34a; }
.ci-email    { background:#fef3c7; color:#d97706; }
.ci-tiktok   { background:#f1f5f9; color:#0f172a; }

.contact-label { font-size:.82rem; color:var(--text-muted); font-weight:500; }
.contact-value { font-size:1rem; font-weight:700; color:var(--text-h); display:block; }
.contact-link  { color:var(--brand); transition:color var(--dur) var(--ease); }
.contact-link:hover { color:var(--accent); }

/* -------- Footer -------- */
#footer {
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  color:rgba(255,255,255,.65); padding:3rem 0 1.5rem;
}
.footer-inner {
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.footer-top { text-align:center; }
.footer-logo {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:.6rem;
}
.footer-logo-img {
  height:36px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.85; border-radius:8px;
}
.footer-top .logo-text   { color:var(--accent); font-size:1.5rem; }
.footer-top .logo-d      { color:#fff; }
.footer-top .logo-dot    { color:#fff; font-size:1.6rem; }
.footer-top .logo-domain { color:rgba(255,255,255,.4); font-size:.9rem; }
.footer-desc {
  font-size:.9rem; color:rgba(255,255,255,.35);
  margin-top:.4rem; max-width:400px;
}
.footer-divider {
  width:100%; max-width:200px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
}
.footer-bottom {
  text-align:center; font-size:.82rem;
  color:rgba(255,255,255,.3);
}

/* -------- Back to Top -------- */
#back-top {
  position:fixed; bottom:2rem; left:2rem;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff; font-size:1.2rem; font-weight:700;
  border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,133,124,.3);
  opacity:0; visibility:hidden;
  transition:all var(--dur) var(--ease);
  z-index:999;
}
#back-top.visible { opacity:1; visibility:visible; }
#back-top:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,133,124,.4);
}

/* -------- Animations -------- */
.fade-in {
  opacity:0; transform:translateY(30px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* -------- Responsive -------- */
@media (max-width:768px) {
  #nav-links {
    display:none; flex-direction:column; gap:1rem;
    position:fixed; top:var(--header-h); left:0; right:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    padding:1.5rem 2rem;
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
  }
  #nav-links.open { display:flex; }
  .menu-btn { display:flex; }
  .about-wrapper { grid-template-columns:1fr; gap:2rem; }
  .about-visual  { height:180px; }
  .hero-stats    { gap:.8rem; }
  .stat-item     { padding:.7rem 1.2rem; min-width:95px; }
  .stat-num      { font-size:1.7rem; }
  section        { padding:4rem 0; }
  .container     { padding:0 1.2rem; }
  .hero-logo     { height:75px; }
  .hero-title    { font-size:clamp(1.8rem,6vw,2.8rem); }
}
@media (max-width:480px) {
  .contact-grid { grid-template-columns:1fr 1fr; }
  .cert-grid    { grid-template-columns:1fr; }
  .hero-stats   { flex-direction:column; align-items:center; }
}