@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colors */
  --primary:        #0B2545;
  --primary-mid:    #1A4A7A;
  --primary-light:  #2E6DB4;
  --secondary:      #0ABFA3;
  --secondary-light:#3DD6C1;
  --secondary-pale: #E6F9F7;
  --accent:         #6366F1;   /* indigo — premium touch */
  --accent-warm:    #F59E0B;

  /* Surfaces */
  --white:          #FFFFFF;
  --bg:             #F4F8FF;
  --bg-subtle:      #EDF3FC;

  /* Text */
  --text-dark:      #0A1628;
  --text-mid:       #374D6C;
  --text-light:     #7A92B0;

  /* Borders */
  --border:         #D0DDED;
  --border-light:   #EAF1F9;

  /* Glass tokens (Magic UI / 21st.dev pattern) */
  --glass-light:    rgba(255,255,255,0.65);
  --glass-border:   rgba(255,255,255,0.50);
  --glass-dark:     rgba(255,255,255,0.07);
  --glass-dark-b:   rgba(255,255,255,0.14);
  --glass-blur:     blur(20px) saturate(180%);

  /* Glow tokens */
  --glow-teal:      rgba(10,191,163,0.28);
  --glow-blue:      rgba(11,37,69,0.18);
  --glow-accent:    rgba(99,102,241,0.22);

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(11,37,69,0.06);
  --shadow-sm:  0 2px 10px rgba(11,37,69,0.08);
  --shadow-md:  0 8px 28px rgba(11,37,69,0.11);
  --shadow-lg:  0 20px 56px rgba(11,37,69,0.14);
  --shadow-xl:  0 32px 80px rgba(11,37,69,0.18);

  /* Radii */
  --r-sm:   8px;
  --r:      14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t:    0.28s var(--ease);
  --t-fast: 0.15s var(--ease);

  /* Layout */
  --font:   'Heebo', -apple-system, sans-serif;
  --max-w:  1180px;
  --nav-h:  80px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { direction:rtl; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text-dark);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
ul   { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800; line-height:1.12; letter-spacing:-0.02em; }
h2 { font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:700; line-height:1.22; letter-spacing:-0.015em; }
h3 { font-size:clamp(1.1rem,2vw,1.5rem);   font-weight:600; line-height:1.35; }
h4 { font-size:1.05rem; font-weight:600; }
p  { color:var(--text-mid); }

/* ============================================================
   UTILITIES
   ============================================================ */
.container   { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section     { padding:84px 0; }
.section-sm  { padding:52px 0; }
.text-center { text-align:center; }

/* Gradient text (Magic UI pattern) */
.gradient-text {
  background:linear-gradient(135deg,var(--secondary) 0%,var(--primary-light) 60%,var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Tag / badge */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--secondary-pale); color:var(--secondary);
  font-size:.78rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--r-full); margin-bottom:14px;
}

/* Section header */
.section-header   { margin-bottom:52px; }
.section-header p { font-size:1.05rem; max-width:600px; margin-top:10px; color:var(--text-mid); }
.section-header.centered   { text-align:center; }
.section-header.centered p { margin:10px auto 0; }

/* Blockquote highlight */
.about-blockquote {
  margin:24px 0; padding:20px 24px;
  border-right:4px solid var(--secondary); background:var(--secondary-pale);
  border-radius:0 var(--r) var(--r) 0;
  font-size:1.05rem; font-style:italic; color:var(--text-dark); line-height:1.72;
}

/* ============================================================
   GLASS — 21st.dev / Magic UI Glassmorphism pattern
   ============================================================ */
.glass {
  background:var(--glass-light);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}
.glass-dark {
  background:var(--glass-dark);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-b);
}

/* ============================================================
   GRADIENT BORDER CARD — Magic UI Shine Border pattern
   ============================================================ */
.grad-border {
  position:relative;
  background:var(--white);
  border-radius:var(--r-lg);
  z-index:0;
}
.grad-border::before {
  content:'';
  position:absolute; inset:0;
  border-radius:var(--r-lg);
  padding:1.5px;
  background:linear-gradient(135deg,var(--secondary) 0%,var(--primary-light) 50%,var(--secondary-light) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
  opacity:0; transition:opacity var(--t);
  z-index:-1;
}
.grad-border:hover::before { opacity:1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--r-full);
  font-size:1rem; font-weight:600; transition:var(--t); white-space:nowrap;
  position:relative; overflow:hidden;
}

/* Shimmer Button — Magic UI pattern */
@keyframes shimmer-sweep {
  0%   { transform:translateX(-150%) skewX(-15deg); }
  100% { transform:translateX(250%)  skewX(-15deg); }
}
.btn::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  transform:translateX(-150%) skewX(-15deg);
}
.btn:hover::after { animation:shimmer-sweep .6s ease forwards; }

.btn-primary  { background:var(--secondary); color:var(--white); box-shadow:0 4px 18px var(--glow-teal); }
.btn-primary:hover { background:var(--secondary-light); box-shadow:0 8px 28px var(--glow-teal); transform:translateY(-2px); }

.btn-secondary { background:var(--primary); color:var(--white); box-shadow:0 4px 14px var(--glow-blue); }
.btn-secondary:hover { background:var(--primary-mid); transform:translateY(-2px); box-shadow:0 8px 24px var(--glow-blue); }

.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.55); }
.btn-outline:hover { background:rgba(255,255,255,.12); border-color:var(--white); }

.btn-ghost { color:var(--secondary); background:var(--secondary-pale); }
.btn-ghost:hover { background:var(--secondary); color:var(--white); }

.btn-white { background:var(--white); color:var(--secondary); font-weight:700; }
.btn-white:hover { background:var(--bg); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-outline-white { border:1.5px solid rgba(255,255,255,.55); color:var(--white); background:transparent; }
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:var(--white); }

.btn-lg { padding:17px 36px; font-size:1.08rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); transition:var(--t);
}
.navbar.scrolled {
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 24px rgba(11,37,69,.08);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; max-width:var(--max-w); margin:0 auto; padding:0 24px;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-mark {
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg,var(--secondary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:900; color:var(--white);
  box-shadow:0 4px 12px var(--glow-teal);
}
.nav-logo-text { display:flex; flex-direction:column; line-height:1.1; }
.nav-logo-main { font-size:1.15rem; font-weight:800; }
.nav-logo-sub  { font-size:.7rem; font-weight:400; opacity:.65; letter-spacing:.3px; }
.navbar.scrolled .nav-logo-main { color:var(--primary); }
.navbar.scrolled .nav-logo-sub  { color:var(--text-mid); }
.navbar:not(.scrolled) .nav-logo-main { color:var(--white); }
.navbar:not(.scrolled) .nav-logo-sub  { color:rgba(255,255,255,.7); }

.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link { padding:8px 13px; border-radius:var(--r-sm); font-size:.93rem; font-weight:500; transition:var(--t); }
.navbar.scrolled .nav-link        { color:var(--text-dark); }
.navbar:not(.scrolled) .nav-link  { color:rgba(255,255,255,.82); }
.navbar.scrolled .nav-link:hover  { background:var(--secondary-pale); color:var(--secondary); }
.navbar:not(.scrolled) .nav-link:hover { color:var(--white); background:rgba(255,255,255,.12); }
.nav-link.active { color:var(--secondary) !important; font-weight:600; }

.nav-cta {
  background:var(--secondary) !important; color:var(--white) !important;
  padding:10px 20px; border-radius:var(--r-full); font-weight:600;
  box-shadow:0 4px 14px var(--glow-teal);
}
.nav-cta:hover { background:var(--secondary-light) !important; transform:translateY(-2px); box-shadow:0 7px 22px var(--glow-teal); }

.nav-hamburger { display:none; flex-direction:column; gap:5px; width:32px; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; height:2.5px; border-radius:2px; transition:var(--t); }
.navbar.scrolled .nav-hamburger span      { background:var(--primary); }
.navbar:not(.scrolled) .nav-hamburger span{ background:var(--white); }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:999;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  padding:24px; flex-direction:column; gap:6px; overflow-y:auto;
}
.mobile-menu.open { display:flex; }
.mobile-menu .nav-link { color:var(--text-dark); font-size:1.1rem; padding:15px 16px; border-bottom:1px solid var(--border-light); border-radius:0; }
.mobile-menu .nav-cta  { margin-top:16px; text-align:center; padding:16px; font-size:1.1rem; border-radius:var(--r-full) !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100vh;
  background:linear-gradient(140deg,#061525 0%,#0B2545 35%,#0D4060 65%,#0A3D50 100%);
  display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h);
}

/* Ambient orbs — floating gradient blobs (21st.dev pattern) */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); will-change:transform;
}
.hero-orb-1 {
  width:600px; height:600px; top:-100px; right:-80px;
  background:radial-gradient(circle,rgba(10,191,163,.28) 0%,transparent 70%);
  animation:orb-float 12s ease-in-out infinite;
}
.hero-orb-2 {
  width:500px; height:500px; bottom:-80px; left:-60px;
  background:radial-gradient(circle,rgba(46,109,180,.32) 0%,transparent 70%);
  animation:orb-float 10s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width:300px; height:300px; top:40%; left:40%;
  background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%);
  animation:orb-float 8s ease-in-out infinite 4s;
}
/* Noise grain overlay */
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity:.5;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  max-width:var(--max-w); margin:0 auto; padding:88px 24px;
  position:relative; z-index:1;
}
/* Animated pulsing badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.9);
  font-size:.82rem; font-weight:600; letter-spacing:.4px;
  padding:8px 16px; border-radius:var(--r-full); margin-bottom:22px;
}
.hero-badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--secondary);
  box-shadow:0 0 8px var(--secondary); animation:pulse-dot 2s ease infinite;
}
.hero h1 { color:var(--white); margin-bottom:18px; }
.hero h1 .accent-gradient {
  background:linear-gradient(135deg,#3DD6C1 0%,#A5F3EC 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc { font-size:1.12rem; color:rgba(255,255,255,.72); line-height:1.78; margin-bottom:34px; max-width:520px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }

/* Hero stats — glass pill row */
.hero-stats {
  display:flex; gap:0; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.1);
}
.hero-stat {
  padding:0 28px 0 0; border-left:1px solid rgba(255,255,255,.12);
}
.hero-stat:first-child { padding-right:28px; border-left:none; }
.hero-stat-num   { font-size:1.85rem; font-weight:800; color:var(--white); line-height:1; }
.hero-stat-label { font-size:.82rem; color:rgba(255,255,255,.58); margin-top:4px; }

/* Hero visual — DNA canvas */
.hero-visual { display:flex; align-items:center; justify-content:center; position:relative; }
#dna-canvas  { border-radius:var(--r-xl); filter:drop-shadow(0 24px 64px rgba(0,0,0,.35)); }
.hero-float-card {
  position:absolute; bottom:-14px; left:16px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r);
  padding:14px 20px; color:var(--white); min-width:190px;
}
.hero-float-card-icon  { font-size:1.4rem; margin-bottom:6px; }
.hero-float-card-label { font-size:.78rem; opacity:.65; }
.hero-float-card-value { font-size:.98rem; font-weight:700; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background:var(--white);
  border-bottom:1px solid var(--border-light);
  box-shadow:0 2px 20px rgba(11,37,69,.05);
}
.trust-bar .container { padding-top:20px; padding-bottom:20px; }
.trust-items { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.trust-item  { display:flex; align-items:center; gap:9px; color:var(--text-mid); font-size:.88rem; font-weight:500; }
.trust-icon  { font-size:1.3rem; color:var(--secondary); }

/* ============================================================
   ABOUT SNIPPET
   ============================================================ */
.about-snippet { background:var(--white); }
.about-snippet-grid { display:grid; grid-template-columns:340px 1fr; gap:72px; align-items:center; }
.about-img-wrap    { position:relative; }
.about-img-placeholder {
  width:100%; aspect-ratio:3/4; border-radius:var(--r-xl);
  background:linear-gradient(145deg,#E6F9F7,#EDF3FC);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:var(--text-light); font-size:.9rem; text-align:center;
  border:2px dashed var(--border);
  box-shadow:var(--shadow-lg);
}
.about-img-placeholder-icon { font-size:5rem; opacity:.35; }
/* Floating glass stat badge on image */
.about-badge {
  position:absolute; bottom:28px; left:28px;
  background:var(--secondary); color:var(--white);
  border-radius:var(--r); padding:16px 22px;
  box-shadow:0 12px 36px var(--glow-teal); min-width:190px;
}
.about-badge-num  { font-size:1.9rem; font-weight:800; line-height:1; }
.about-badge-text { font-size:.82rem; opacity:.88; margin-top:4px; }
.about-content h2 { margin-bottom:16px; }
.about-content p  { font-size:1.05rem; margin-bottom:14px; }

/* ============================================================
   SERVICE CARDS (home overview) — grad-border + hover glow
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }

.service-card {
  background:var(--white); border-radius:var(--r-lg);
  padding:32px 28px; border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm); transition:var(--t);
  position:relative; overflow:hidden; z-index:0;
}
/* Animated top bar */
.service-card::before {
  content:''; position:absolute; top:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--secondary),var(--primary-light),var(--accent));
  transform:scaleX(0); transform-origin:right; transition:transform var(--t);
}
/* Hover glow */
.service-card:hover {
  box-shadow:0 0 0 1px rgba(10,191,163,.2), 0 20px 60px rgba(11,37,69,.12);
  transform:translateY(-6px);
}
.service-card:hover::before { transform:scaleX(1); }
.service-card-icon {
  width:54px; height:54px; border-radius:var(--r);
  background:var(--secondary-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:20px; transition:var(--t);
}
.service-card:hover .service-card-icon { background:var(--secondary); transform:scale(1.08) rotate(-4deg); }
.service-card h3 { margin-bottom:10px; }
.service-card p  { font-size:.93rem; line-height:1.68; }
.service-card-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  color:var(--secondary); font-weight:600; font-size:.88rem; transition:var(--t);
}
.service-card-link:hover { gap:10px; }

/* ============================================================
   BENTO GRID — Magic UI / 21st.dev pattern
   ============================================================ */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
/* Card 1: Featured hero (4 cols × 2 rows) */
.bento-grid > :nth-child(1) { grid-column:span 4; grid-row:span 2; min-height:440px; }
/* Cards 2-3: Right column */
.bento-grid > :nth-child(2) { grid-column:span 2; }
.bento-grid > :nth-child(3) { grid-column:span 2; }
/* Cards 4-6: Bottom row */
.bento-grid > :nth-child(4) { grid-column:span 2; }
.bento-grid > :nth-child(5) { grid-column:span 2; }
.bento-grid > :nth-child(6) { grid-column:span 2; }

/* Individual bento cell styles */
.bento-cell {
  border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden;
  transition:var(--t);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.bento-cell:hover { transform:translateY(-3px); }

/* The featured bento cell */
.bento-featured {
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-b);
  justify-content:flex-start;
  padding:36px 40px;
}
.bento-featured::before {
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(10,191,163,.25) 0%,transparent 70%);
  pointer-events:none;
}
.bento-tag {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--secondary-light); background:rgba(61,214,193,.12);
  border:1px solid rgba(61,214,193,.2); border-radius:var(--r-full);
  padding:5px 12px; margin-bottom:18px;
}
.bento-featured h3 { color:var(--white); font-size:1.55rem; margin-bottom:14px; line-height:1.3; }
.bento-featured p  { color:rgba(255,255,255,.68); line-height:1.75; margin-bottom:20px; }
.bento-featured blockquote {
  margin-top:auto; padding:16px 20px; border-right:3px solid var(--secondary);
  background:rgba(255,255,255,.06); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:rgba(255,255,255,.78); font-style:italic; font-size:.95rem; line-height:1.65;
}

/* Stat bento cell */
.bento-stat {
  background:rgba(255,255,255,.07); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-b); text-align:center; justify-content:center; align-items:center;
}
.bento-stat-num {
  font-size:3rem; font-weight:900; color:var(--white); line-height:1;
  background:linear-gradient(135deg,var(--white),rgba(255,255,255,.7));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.bento-stat-label { font-size:.85rem; color:rgba(255,255,255,.6); margin-top:6px; }

/* Feature bento cell */
.bento-feature {
  background:rgba(255,255,255,.06); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-b);
}
.bento-feature-icon { font-size:2rem; margin-bottom:14px; }
.bento-feature h4   { color:var(--white); margin-bottom:8px; font-size:1.05rem; }
.bento-feature p    { color:rgba(255,255,255,.62); font-size:.88rem; line-height:1.65; }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section {
  background:linear-gradient(140deg,#061525 0%,#0B2545 45%,#0C3655 100%);
  position:relative; overflow:hidden;
}
.why-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 60%,rgba(10,191,163,.14) 0%,transparent 55%),
             radial-gradient(ellipse at 85% 20%,rgba(99,102,241,.10) 0%,transparent 50%);
}
.why-inner  { position:relative; z-index:1; }
.why-section .section-header h2 { color:var(--white); }
.why-section .section-header p  { color:rgba(255,255,255,.65); }

/* ============================================================
   SPECIALTIES TAGS
   ============================================================ */
.specialties-tags { display:flex; flex-wrap:wrap; gap:10px; }
.specialty-tag {
  display:flex; align-items:center; gap:8px;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-full); padding:9px 16px;
  font-size:.88rem; font-weight:500; color:var(--text-mid); transition:var(--t);
}
.specialty-tag:hover {
  border-color:var(--secondary); color:var(--secondary); background:var(--secondary-pale);
  transform:translateY(-2px); box-shadow:0 4px 14px var(--glow-teal);
}
.specialty-tag-dot { width:7px; height:7px; border-radius:50%; background:var(--secondary); flex-shrink:0; }

/* ============================================================
   TESTIMONIALS — glass cards
   ============================================================ */
.testimonials-section { background:var(--bg-subtle); }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.testimonial-card {
  background:var(--white); border-radius:var(--r-lg); padding:32px 28px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light); transition:var(--t);
  position:relative; overflow:hidden;
}
.testimonial-card::after {
  content:'\201C'; position:absolute; top:-8px; right:20px;
  font-size:7rem; color:var(--secondary); opacity:.08; font-family:Georgia,serif; line-height:1;
  pointer-events:none;
}
.testimonial-card:hover { box-shadow:0 0 0 1.5px rgba(10,191,163,.18), var(--shadow-md); transform:translateY(-3px); }
.testimonial-stars  { color:#F59E0B; font-size:1rem; letter-spacing:2px; margin-bottom:14px; }
.testimonial-text   { color:var(--text-dark); font-size:.98rem; line-height:1.72; font-style:italic; margin-bottom:20px; position:relative; z-index:1; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--secondary-pale),var(--bg-subtle));
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  border:2px solid var(--border); flex-shrink:0;
}
.testimonial-name { font-weight:600; color:var(--text-dark); font-size:.93rem; }
.testimonial-role { font-size:.8rem; color:var(--text-light); margin-top:2px; }

/* ============================================================
   CTA BANNER — gradient with shine
   ============================================================ */
.cta-banner {
  background:linear-gradient(135deg,var(--secondary) 0%,#089B89 50%,#0ABFA3 100%);
  border-radius:var(--r-xl); padding:60px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  position:relative; overflow:hidden;
  box-shadow:0 20px 60px var(--glow-teal);
}
.cta-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='38' stroke='white' stroke-opacity='0.07' fill='none'/%3E%3Ccircle cx='40' cy='40' r='20' stroke='white' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E") repeat;
}
/* Shine sweep */
.cta-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  animation:cta-shine 4s ease infinite;
}
@keyframes cta-shine { 0%,100%{transform:translateX(-120%)} 50%{transform:translateX(120%)} }
.cta-banner-content { position:relative; z-index:1; }
.cta-banner h2 { color:var(--white); margin-bottom:10px; }
.cta-banner p  { color:rgba(255,255,255,.82); font-size:1.05rem; }
.cta-banner-actions { position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background:linear-gradient(140deg,#061525 0%,#0B2545 55%,#0D4060 100%);
  padding:120px 0 80px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 75% 45%,rgba(10,191,163,.18) 0%,transparent 55%),
             radial-gradient(ellipse at 15% 70%,rgba(46,109,180,.14) 0%,transparent 50%);
}
.page-hero-inner  { position:relative; z-index:1; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.83rem; color:rgba(255,255,255,.55); margin-bottom:14px; }
.breadcrumb a     { color:rgba(255,255,255,.65); transition:var(--t); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb-sep   { opacity:.45; }
.page-hero h1     { color:var(--white); margin-bottom:14px; }
.page-hero .page-subtitle { color:rgba(255,255,255,.72); font-size:1.12rem; max-width:600px; line-height:1.7; }

/* ============================================================
   ABOUT PAGE — glass sidebar + timeline
   ============================================================ */
.about-profile-grid { display:grid; grid-template-columns:340px 1fr; gap:72px; align-items:start; }
.profile-sidebar    { position:sticky; top:calc(var(--nav-h) + 28px); }
.profile-photo {
  width:100%; aspect-ratio:3/4; border-radius:var(--r-xl);
  background:linear-gradient(145deg,#E6F9F7,#D6EFF7);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--text-light); text-align:center;
  border:2px dashed var(--border); margin-bottom:20px;
  box-shadow:var(--shadow-lg);
}
.profile-photo-icon { font-size:5rem; opacity:.3; }
.profile-photo-hint { font-size:.83rem; color:var(--text-light); }

/* Glass info card */
.profile-info-card {
  background:var(--glass-light); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow-sm);
}
.profile-info-item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.profile-info-item:last-child { border-bottom:none; }
.profile-info-icon  { font-size:1.15rem; margin-top:2px; flex-shrink:0; }
.profile-info-label { font-size:.73rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.profile-info-value { font-size:.92rem; color:var(--text-dark); font-weight:500; margin-top:2px; }

.profile-main h2 { margin-bottom:18px; }
.profile-main p  { font-size:1.04rem; margin-bottom:16px; }
.profile-main h3 { margin:32px 0 16px; color:var(--primary); font-size:1.2rem; }

/* Timeline credentials */
.credential-list   { margin:0; }
.credential-item   {
  display:flex; align-items:flex-start; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--border-light); position:relative;
}
.credential-item:last-child { border-bottom:none; }
.credential-icon {
  width:40px; height:40px; border-radius:var(--r-sm); background:var(--secondary-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.credential-year  { font-size:.76rem; color:var(--text-light); font-weight:600; letter-spacing:.3px; }
.credential-title { font-size:.93rem; font-weight:600; color:var(--text-dark); }
.credential-place { font-size:.83rem; color:var(--text-mid); margin-top:2px; }
.affiliations { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.affiliation-badge {
  display:flex; align-items:center; gap:6px;
  background:var(--secondary-pale); border:1px solid rgba(10,191,163,.22);
  border-radius:var(--r-full); padding:8px 14px;
  font-size:.82rem; font-weight:500; color:var(--primary);
}

/* ============================================================
   SERVICES PAGE — gradient-border + hover glow
   ============================================================ */
.services-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:24px; }
.service-detail-card {
  background:var(--white); border-radius:var(--r-lg); padding:36px 30px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light);
  transition:var(--t); display:flex; flex-direction:column;
  position:relative; overflow:hidden; z-index:0;
}
.service-detail-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--r-lg); padding:1.5px;
  background:linear-gradient(135deg,var(--secondary),var(--primary-light),var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
  opacity:0; transition:opacity var(--t); z-index:-1;
}
.service-detail-card:hover { box-shadow:0 0 0 0px transparent, var(--shadow-lg); transform:translateY(-4px); }
.service-detail-card:hover::before { opacity:1; }
.service-detail-icon {
  width:64px; height:64px; border-radius:var(--r);
  background:linear-gradient(135deg,var(--secondary-pale),rgba(10,191,163,.1));
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  margin-bottom:22px; transition:var(--t);
}
.service-detail-card:hover .service-detail-icon {
  background:linear-gradient(135deg,var(--secondary),var(--secondary-light));
  transform:scale(1.06) rotate(-4deg);
  box-shadow:0 8px 20px var(--glow-teal);
}
.service-detail-card h3 { margin-bottom:12px; }
.service-detail-card > p { font-size:.93rem; line-height:1.72; flex:1; }
.service-detail-list { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.service-detail-list li { display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--text-mid); }
.service-detail-list li::before {
  content:'✓'; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--secondary),var(--secondary-light));
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; flex-shrink:0;
}

/* Process steps */
.process-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; counter-reset:step; }
.process-step  {
  background:var(--white); border-radius:var(--r-lg); padding:28px 22px; text-align:center;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light); transition:var(--t);
}
.process-step:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.process-step-num {
  width:42px; height:42px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--secondary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1rem; font-weight:700;
  box-shadow:0 6px 16px var(--glow-teal);
}
.process-step h4 { margin-bottom:8px; }
.process-step p  { font-size:.86rem; }

/* ============================================================
   TESTS PAGE
   ============================================================ */
.test-type-card {
  background:var(--white); border-radius:var(--r-lg); padding:30px 32px; margin-bottom:20px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light); transition:var(--t);
  display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start;
}
.test-type-card:hover { box-shadow:var(--shadow-md); border-color:rgba(10,191,163,.25); }
.test-type-num {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--secondary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1.15rem; font-weight:700;
  box-shadow:0 6px 16px var(--glow-teal);
}
.test-type-card h3 { margin-bottom:8px; }
.test-type-card p  { font-size:.95rem; line-height:1.72; }
.test-info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.test-info-card {
  background:var(--white); border-radius:var(--r-lg); padding:24px; text-align:center;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light); transition:var(--t);
}
.test-info-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.test-info-icon  { font-size:2rem; margin-bottom:10px; }
.test-info-card h4 { margin-bottom:8px; }
.test-info-card p  { font-size:.86rem; }

/* ============================================================
   FAQ PAGE — premium glass accordion
   ============================================================ */
.faq-list { max-width:740px; margin:0 auto; }
.faq-item {
  background:var(--white); border-radius:var(--r-lg); margin-bottom:10px;
  box-shadow:var(--shadow-xs); border:1px solid var(--border-light);
  overflow:hidden; transition:var(--t);
}
.faq-item.open {
  box-shadow:0 0 0 1.5px rgba(10,191,163,.25), var(--shadow-md);
  border-color:transparent;
}
.faq-question {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 26px; cursor:pointer; font-size:1.02rem; font-weight:600;
  color:var(--text-dark); transition:var(--t); user-select:none;
}
.faq-question:hover { color:var(--secondary); }
.faq-item.open .faq-question { color:var(--secondary); }
.faq-icon {
  width:30px; height:30px; border-radius:50%;
  background:var(--secondary-pale); color:var(--secondary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:300; flex-shrink:0;
  transition:var(--t); line-height:1;
}
.faq-item.open .faq-icon { background:var(--secondary); color:var(--white); transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .42s ease; }
.faq-item.open .faq-answer { max-height:500px; }
.faq-answer-inner { padding:0 26px 22px; color:var(--text-mid); font-size:.96rem; line-height:1.78; }

/* ============================================================
   DIPLOMAS
   ============================================================ */
.diploma-row { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.diploma-thumb {
  flex:1; min-width:130px; max-width:200px;
  background:var(--glass-light); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:var(--text-dark);
  transition:var(--t); display:block;
}
.diploma-thumb:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(10,191,163,.3); }
.diploma-thumb img { width:100%; height:110px; object-fit:cover; object-position:top; display:block; }
.diploma-thumb span { display:block; padding:8px 10px; font-size:.78rem; font-weight:600; color:var(--text-mid); text-align:center; }

/* ============================================================
   CONTACT PAGE — glass form
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
.contact-form-wrap {
  background:var(--glass-light); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-radius:var(--r-xl); padding:48px 42px;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--glass-border);
  border:1px solid var(--glass-border); position:relative; overflow:hidden;
}
.contact-form-wrap::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg,rgba(10,191,163,.12),rgba(99,102,241,.06),transparent 60%);
  pointer-events:none;
}
.contact-form-wrap h2    { margin-bottom:6px; }
.contact-form-wrap .lead { color:var(--text-mid); margin-bottom:30px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.84rem; font-weight:600; color:var(--text-dark); margin-bottom:7px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:12px 15px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:var(--font); font-size:.93rem; color:var(--text-dark); background:var(--bg); transition:var(--t); outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--secondary); background:var(--white);
  box-shadow:0 0 0 4px rgba(10,191,163,.12), 0 0 18px rgba(10,191,163,.08);
}
.form-success-msg {
  display:none; text-align:center; padding:40px 24px;
  background:linear-gradient(135deg,rgba(10,191,163,.08),rgba(99,102,241,.06));
  border-radius:var(--r-lg); border:1px solid rgba(10,191,163,.2);
}
.form-success-msg .success-icon {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; margin:0 auto 18px; box-shadow:0 8px 32px rgba(10,191,163,.3);
}
.form-success-msg h3 { margin-bottom:10px; }
.form-success-msg p  { color:var(--text-mid); }
.contact-quick-cta {
  background:linear-gradient(135deg,var(--secondary),rgba(10,191,163,.7));
  border-radius:var(--r-lg); padding:24px;
  color:white; position:relative; overflow:hidden;
}
.contact-quick-cta::before {
  content:''; position:absolute; top:-40%; right:-20%;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.08); pointer-events:none;
}
.contact-quick-cta h3 { color:white; margin-bottom:8px; }
.contact-quick-cta p  { color:rgba(255,255,255,.85); font-size:.9rem; margin-bottom:16px; }
.contact-quick-cta .btn { background:white; color:var(--secondary); }
.contact-quick-cta .btn:hover { background:rgba(255,255,255,.9); }
.contact-step-list { list-style:none; padding:0; margin:0; }
.contact-step-list li {
  display:flex; align-items:flex-start; gap:14px; padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.contact-step-list li:last-child { border-bottom:none; }
.contact-step-num {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  color:white; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.contact-step-title { font-size:.82rem; font-weight:600; color:var(--text-dark); }
.contact-step-desc  { font-size:.82rem; color:var(--text-mid); margin-top:2px; }
.form-group textarea { resize:vertical; min-height:118px; }
.form-submit { width:100%; padding:16px; font-size:1.05rem; }

.contact-sidebar {}
.contact-info-card {
  background:var(--glass-light); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:26px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.contact-info-card h3     { margin-bottom:16px; font-size:1.05rem; }
.contact-info-item { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.contact-info-item:last-child { border-bottom:none; }
.contact-info-icon {
  width:36px; height:36px; border-radius:var(--r-sm); background:var(--secondary-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0; color:var(--secondary);
}
.contact-info-label { font-size:.72rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.contact-info-value { font-size:.9rem; color:var(--text-dark); font-weight:500; margin-top:3px; }
.map-placeholder {
  width:100%; height:190px; border-radius:var(--r);
  background:linear-gradient(135deg,var(--secondary-pale),var(--bg-subtle));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--text-light); font-size:.88rem; border:2px dashed var(--border); margin-top:6px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--primary); color:rgba(255,255,255,.72); padding:64px 0 0; }
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.09);
}
.footer-logo      { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.footer-logo-mark {
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg,var(--secondary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:900; color:var(--white);
}
.footer-logo-name { font-size:1.15rem; font-weight:800; color:var(--white); display:block; }
.footer-logo-sub  { font-size:.7rem; color:rgba(255,255,255,.45); }
.footer-desc      { font-size:.88rem; line-height:1.72; margin-bottom:22px; }
.footer-social    { display:flex; gap:10px; }
.social-btn {
  width:36px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:var(--t); border:1px solid rgba(255,255,255,.08);
}
.social-btn:hover { background:var(--secondary); border-color:transparent; box-shadow:0 4px 12px var(--glow-teal); }
.footer-col h4    { color:var(--white); font-size:.95rem; margin-bottom:16px; letter-spacing:.2px; }
.footer-links     { display:flex; flex-direction:column; gap:9px; }
.footer-link      { font-size:.87rem; color:rgba(255,255,255,.6); transition:var(--t); }
.footer-link:hover{ color:var(--secondary-light); padding-right:5px; }
.footer-bottom    { display:flex; align-items:center; justify-content:space-between; padding:20px 0; font-size:.83rem; flex-wrap:wrap; gap:10px; }
.footer-bottom-links { display:flex; gap:22px; }
.footer-bottom-link  { color:rgba(255,255,255,.45); transition:var(--t); }
.footer-bottom-link:hover { color:rgba(255,255,255,.8); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes orb-float  { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.04)} 66%{transform:translate(-15px,20px) scale(.97)} }
@keyframes pulse-dot  { 0%,100%{opacity:1;box-shadow:0 0 8px var(--secondary)} 50%{opacity:.5;box-shadow:0 0 20px var(--secondary)} }
@keyframes fade-up    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }
.reveal-delay-4 { transition-delay:.32s; }
.reveal-delay-5 { transition-delay:.40s; }

/* ============================================================
   RESPONSIVE — Full coverage: desktop · tablet · mobile · iOS
   ============================================================ */

/* iOS safe-area for notch / home-bar */
@supports (padding:env(safe-area-inset-top)) {
  .navbar      { padding-top:env(safe-area-inset-top); height:calc(var(--nav-h) + env(safe-area-inset-top)); }
  .mobile-menu { top:calc(var(--nav-h) + env(safe-area-inset-top)); padding-bottom:env(safe-area-inset-bottom); }
  .footer      { padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}

/* ─── Large Tablet / Narrow Desktop (≤ 1100px) ─────────────── */
@media (max-width:1100px) {
  .about-profile-grid { grid-template-columns:300px 1fr; gap:48px; }
  .footer-grid        { grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; }
  .bento-grid         { grid-template-columns:repeat(4,1fr); gap:14px; }
  .bento-grid > :nth-child(1) { grid-column:span 4; grid-row:span 1; min-height:300px; }
  .bento-grid > :nth-child(2),
  .bento-grid > :nth-child(3) { grid-column:span 2; }
  .bento-grid > :nth-child(4),
  .bento-grid > :nth-child(5),
  .bento-grid > :nth-child(6) { grid-column:span 2; }
}

/* ─── Tablet (≤ 960px) ─────────────────────────────────────── */
@media (max-width:960px) {
  /* Hero */
  .hero-inner   { grid-template-columns:1fr; padding:100px 24px 72px; text-align:center; }
  .hero-visual  { display:none; }
  .hero-badge   { margin:0 auto 18px; }
  .hero-actions { justify-content:center; }
  .hero-stats   { justify-content:center; }
  .hero-desc    { margin:0 auto 32px; max-width:560px; }

  /* About / profile */
  .about-snippet-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .about-profile-grid { grid-template-columns:1fr; gap:40px; }
  .profile-sidebar    { position:static; max-width:400px; margin:0 auto; }

  /* Bento */
  .bento-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .bento-grid > :nth-child(1) { grid-column:span 2; grid-row:span 1; min-height:280px; }
  .bento-grid > :nth-child(n) { grid-column:span 1; }

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

  /* Contact */
  .contact-grid    { grid-template-columns:1fr; }
  .contact-sidebar { order:-1; }
}

/* ─── Mobile (≤ 768px) ─────────────────────────────────────── */
@media (max-width:768px) {
  :root { --nav-h:64px; }

  /* Navbar */
  .nav-links     { display:none; }
  .nav-hamburger { display:flex; }

  /* Hero */
  .hero-inner  { padding:72px 20px 56px; }
  .hero-stats  { justify-content:center; gap:20px; }
  .hero-desc   { font-size:1rem; }
  .hero h1     { font-size:clamp(1.85rem,6.5vw,2.8rem); }

  /* Layout */
  .section    { padding:52px 0; }
  .section-sm { padding:32px 0; }

  /* About */
  .about-snippet-grid { grid-template-columns:1fr; gap:28px; }
  .about-img-wrap     { max-width:320px; margin:0 auto; }
  .about-badge        { padding:12px 16px; min-width:150px; bottom:16px; left:16px; }

  /* Bento */
  .bento-grid { grid-template-columns:1fr; gap:10px; }
  .bento-grid > :nth-child(n) { grid-column:span 1; grid-row:span 1; min-height:160px; }
  .bento-featured { min-height:220px !important; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer      { padding-top:48px; }

  /* Forms */
  .form-row           { grid-template-columns:1fr; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size:16px; } /* prevents iOS zoom on focus */
  .cta-banner         { flex-direction:column; text-align:center; padding:36px 20px; }
  .cta-banner-actions { justify-content:center; flex-wrap:wrap; }

  /* Contact */
  .contact-form-wrap  { padding:28px 18px; }
  .contact-grid       { grid-template-columns:1fr; }
  .contact-sidebar    { order:-1; }

  /* Tests */
  .test-type-card { grid-template-columns:1fr; }

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

  /* Page hero */
  .page-hero            { padding:96px 0 48px; }
  .page-hero h1         { font-size:clamp(1.7rem,6vw,2.4rem); }
  .page-hero .page-subtitle { font-size:1rem; }

  /* Trust bar */
  .trust-items { gap:18px; flex-wrap:wrap; justify-content:flex-start; }

  /* Buttons */
  .btn-lg { padding:15px 28px; font-size:1rem; }

  /* Section header */
  .section-header   { margin-bottom:36px; }
  .section-header p { font-size:.95rem; }
}

/* ─── Small Mobile (≤ 480px) ───────────────────────────────── */
@media (max-width:480px) {
  :root { --nav-h:60px; }
  .container { padding:0 16px; }

  /* Hero */
  .hero-inner  { padding:60px 16px 48px; }
  .hero-stats  { flex-direction:column; gap:14px; align-items:center; padding-top:20px; }
  .hero-stat   { padding:0; border:none; text-align:center; }
  .hero-stat:first-child { padding-right:0; }
  .hero-stat-num { font-size:1.55rem; }
  .hero-actions  { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-actions .btn { width:100%; justify-content:center; }

  /* Trust */
  .trust-items { flex-direction:column; align-items:flex-start; gap:12px; }

  /* About badge */
  .about-img-wrap { max-width:100%; }
  .about-badge    { left:10px; bottom:10px; padding:10px 14px; min-width:130px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns:1fr; }

  /* Services detail */
  .services-detail-grid { grid-template-columns:1fr; }

  /* Process steps */
  .process-steps { grid-template-columns:1fr 1fr; gap:12px; }

  /* Typography */
  h2 { font-size:clamp(1.4rem,6vw,1.9rem); }
  h3 { font-size:clamp(1rem,4.5vw,1.3rem); }

  /* Page hero */
  .page-hero    { padding:84px 0 38px; }
  .page-hero h1 { font-size:clamp(1.65rem,7vw,2rem); }
  .page-subtitle { font-size:.92rem; }

  /* Diplomas */
  .diploma-row { gap:10px; }
  .diploma-thumb { min-width:100px; max-width:160px; }
  .diploma-thumb img { height:90px; }

  /* Footer bottom */
  .footer-bottom { flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .footer-bottom-links { justify-content:center; gap:16px; }

  /* FAQ */
  .faq-question     { padding:16px 18px; font-size:.95rem; }
  .faq-answer-inner { padding:0 18px 18px; }

  /* Contact */
  .contact-form-wrap  { padding:22px 16px; }
  .contact-info-card  { padding:18px 16px; }
  .contact-quick-cta .btn { width:100%; justify-content:center; }

  /* CTA banner */
  .cta-banner { padding:28px 16px; border-radius:var(--r-lg); }
  .cta-banner h2 { font-size:1.4rem; }
  .form-submit { padding:14px; font-size:.98rem; }
}

/* ─── Extra Small (≤ 360px) ────────────────────────────────── */
@media (max-width:360px) {
  .container  { padding:0 12px; }
  .hero-inner { padding:52px 12px 40px; }
  .btn        { padding:12px 18px; font-size:.88rem; }
  .btn-lg     { padding:13px 22px; font-size:.92rem; }
  .nav-logo-main { font-size:1rem; }
  .nav-logo-sub  { display:none; }
  .service-card, .testimonial-card { padding:22px 16px; }
  .bento-cell { padding:18px 16px; }
  .contact-form-wrap, .contact-info-card { padding:18px 14px; }
  .cta-banner { padding:24px 14px; }
  .process-steps { grid-template-columns:1fr; }
  .footer { padding-top:40px; }
}