/* ================================
   HEADER — The Ali & Grandson Digital
   ================================ */

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

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black:     #0a0a0a;
  --gray1:     #111318;
  --gray2:     #6b7280;
  --gray3:     #9ca3af;
  --gray4:     #e5e7eb;
  --gray5:     #f3f4f6;
  --white:     #ffffff;
  --indigo:    #4f46e5;
  --indigo2:   #4338ca;
  --indigo-t:  rgba(79,70,229,0.08);
  --header-h:  68px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}

/* ── Announcement Bar ── */
.ann-bar {
  background: var(--black);
  padding: 9px 2rem;
  text-align: center;
}

.ann-bar-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}

.ann-tag {
  background: var(--indigo);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ann-link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.ann-link:hover { opacity: 1; }
.ann-link svg { width: 12px; height: 12px; }

/* ── Main Header ── */
.site-header {
  position: sticky;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--gray4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 1px 40px rgba(0,0,0,0.08);
  border-color: transparent;
}

.h-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ── Brand ── */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 36px; height: 36px;
  background: var(--black);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.brand-mark::after {
  content: '';
  position: absolute;
  bottom: -6px; right: -6px;
  width: 16px; height: 16px;
  background: var(--indigo);
  border-radius: 50%;
  opacity: 0.9;
}

.brand-mark span {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.brand-info { display: flex; flex-direction: column; gap: 1px; }

.brand-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
  letter-spacing: -0.2px;
  line-height: 1;
}

.brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--gray3);
  letter-spacing: 0.5px;
}

/* ── Nav ── */
.main-nav { flex: 1; display: flex; justify-content: center; }

.main-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
}

.main-nav a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray2);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 7px;
  letter-spacing: -0.1px;
  transition: color 0.18s, background 0.18s;
}

.main-nav a:hover { color: var(--black); background: var(--gray5); }
.main-nav a.cur   { color: var(--black); font-weight: 600; }

/* ── Right ── */
.h-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.h-divider {
  width: 1px; height: 20px;
  background: var(--gray4);
}

.h-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--gray2);
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 7px;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}

.h-phone:hover { color: var(--black); background: var(--gray5); }
.h-phone svg { width: 14px; height: 14px; }

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--indigo);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, transform 0.14s, box-shadow 0.2s;
}

.cta-btn:hover {
  background: var(--indigo2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.3);
}

.cta-btn svg { width: 14px; height: 14px; transition: transform 0.18s; }
.cta-btn:hover svg { transform: translateX(2px); }

/* ── Hamburger ── */
.ham {
  display: none;
  flex-direction: column;
  gap: 4.5px;
  background: none;
  border: 1px solid var(--gray4);
  cursor: pointer;
  padding: 9px 10px;
  border-radius: 8px;
  transition: border-color 0.18s, background 0.18s;
}

.ham:hover { border-color: var(--gray3); background: var(--gray5); }

.ham span {
  display: block;
  height: 1.5px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.24s cubic-bezier(.4,0,.2,1), opacity 0.18s, width 0.2s;
}

.ham span:nth-child(1) { width: 18px; }
.ham span:nth-child(2) { width: 12px; }
.ham span:nth-child(3) { width: 18px; }

.ham.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 18px; }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 18px; }

/* ── Mobile Menu ── */
.mob-nav {
  max-height: 0;
  overflow: hidden;
  background: var(--white);
  border-top: 1px solid var(--gray4);
  transition: max-height 0.4s cubic-bezier(.4,0,.2,1);
}

.mob-nav.open { max-height: 520px; }

.mob-inner { padding: 1rem 1.5rem 1.75rem; }

.mob-links { list-style: none; }
.mob-links li { border-bottom: 1px solid var(--gray5); }
.mob-links li:last-child { border: none; }

.mob-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  color: var(--gray2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s;
}

.mob-links a:hover { color: var(--black); }
.mob-links svg { width: 14px; height: 14px; opacity: 0.25; }

.mob-footer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mob-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gray2);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 14px;
  border: 1px solid var(--gray4);
  border-radius: 9px;
  transition: border-color 0.18s, color 0.18s;
}

.mob-phone:hover { border-color: var(--gray3); color: var(--black); }
.mob-phone svg { width: 15px; height: 15px; color: var(--indigo); flex-shrink: 0; }

.mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--indigo);
  color: #fff;
  padding: 13px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s;
}

.mob-cta:hover { background: var(--indigo2); }

/* 🔥 Header bottom glow line */
/* 🔥 Hero top glow (header ke niche perfect effect) */
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, transparent, #2563eb, #06b6d4, transparent);
  filter:blur(2px);
  opacity:0.8;
  animation:headerGlow 3s linear infinite;
  z-index:2;
}

@keyframes headerGlow{
  0%{opacity:0.3}
  50%{opacity:1}
  100%{opacity:0.3}
}


/* ── Responsive ── */
@media (max-width: 960px) {
  .main-nav  { display: none; }
  .h-phone   { display: none; }
  .h-divider { display: none; }
  .cta-btn   { display: none; }
  .ham       { display: flex; }
}

@media (max-width: 580px) {
  .ann-bar   { display: none; }
  .h-inner   { padding: 0 1.25rem; height: 62px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 13.5px; }
}







/*Footer start here*/


/* ==============================================
   THE ALI & GRANDSON DIGITAL — FOOTER CSS
   File: ag-footer.css
   ============================================== */
/* ── FOOTER ── */
/* ── FOOTER ── */
footer{
  background:#04090f !important;
  color:#fff;
  padding:60px 5% 0;
}

.footer-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1.4fr;
  gap:44px;
  padding-bottom:48px;
}

.fb-name{
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  margin-bottom:3px;
}

.fb-sub{
  color:rgba(255,255,255,.22);
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:16px;
}

.fb-p{
  font-size:12.5px;
  color:rgba(255,255,255,.28);
  line-height:1.75;
  margin-bottom:20px;
  max-width:250px;
}

.socials{
  display:flex;
  gap:8px;
}

.soc-btn{
  width:34px;
  height:34px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s;
}

.soc-btn:hover{
  background:rgba(37,99,235,.25);
  border-color:rgba(37,99,235,.4);
  transform:translateY(-2px);
}

.soc-btn svg{
  width:14px;
  height:14px;
}

.fc-heading{
  color:rgba(255,255,255,.35);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:16px;
}

.fc-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fc-links li{
  font-size:12.5px;
  color:rgba(255,255,255,.28);
  cursor:pointer;
  transition:color .2s, padding-left .2s;
}

.fc-links li:hover{
  color:rgba(255,255,255,.7);
  padding-left:4px;
}

.contact-items{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ci{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.ci-icon{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:7px;
  background:rgba(37,99,235,.1);
  border:1px solid rgba(37,99,235,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}

.ci:hover .ci-icon{
  background:rgba(37,99,235,.2);
}

.ci-icon svg{
  width:13px;
  height:13px;
  fill:var(--accent);
}

.ci-label{
  font-size:10px;
  color:rgba(255,255,255,.22);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  display:block;
  margin-bottom:2px;
}

.ci-val{
  font-size:12.5px;
  color:rgba(255,255,255,.5);
}

/* Skyline */
.skyline-section{
width:100vw;            
  margin-left:calc(-50vw + 50%);
  background:#020a14;
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.04);
}

.skyline-label-txt{
  text-align:center;
  font-size:10.5px;
  color:rgba(255,255,255,.1);
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:10px;
}

.skyline-section svg{
  display:block;
  width:100%;
  height:auto;
}
.skyline-section:hover svg path{
  stroke:#60a5fa;
  opacity:1;
}
.skyline-section svg{
  animation:floatSky 6s ease-in-out infinite;
}

@keyframes floatSky{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}


.footer-bottom{
  max-width:1160px;
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,.04);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.fc{
  font-size:11.5px;
  color:rgba(255,255,255,.18);
}

.fc span{
  color:var(--accent);
}

.fb-nav{
  display:flex;
  gap:18px;
}

.fb-nav a{
  font-size:11.5px;
  color:rgba(255,255,255,.18);
  text-decoration:none;
  transition:color .2s;
}

.fb-nav a:hover{
  color:rgba(255,255,255,.5);
}
 
/* ===== FOOTER LOGO (MATCHED WITH YOUR HTML) ===== */
/* SAME LOGO FOR HEADER + FOOTER */
.logo-sq{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#0b0f14;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
  position:relative;
  font-size:18px;
  overflow:hidden;
}

/* FIXED SMALL CURVE (like your image) */
.logo-sq::after{
  content:'';
  position:absolute;
  bottom:-7px;
  right:-7px;
  width:20px;
  height:20px;
  background:#4f46e5;
  border-radius:50%;
  opacity:0.95;
}
.logo-sq::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent);
  opacity:0;
  transition:.4s;
}

.logo-sq:hover::before{
  opacity:1;
}

@keyframes floatLogo{
  0%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}

.logo-sq{
  animation:floatLogo 4s ease-in-out infinite;
}
.logo-sq::after{
  background:linear-gradient(135deg,#4f46e5,#22c55e);
  box-shadow:0 0 10px rgba(79,70,229,0.6);
}


/*Footer end here */









*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#07101f;
  --ink2:#0c1a30;
  --mid:#162540;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --cyan:#06b6d4;
  --cyan2:#0891b2;
  --white:#fff;
  --offwhite:#f6f9fd;
  --muted:#5a6e87;
  --border:#dde4ef;
}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}


/* ─── HERO ─── */
.hero{background:var(--ink);min-height:100vh;display:flex;align-items:center;padding:0 6%;position:relative;overflow:hidden}

/* Animated grid background */
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,0.07) 1px,transparent 1px);background-size:60px 60px;animation:gridmove 20s linear infinite;opacity:.5}
@keyframes gridmove{0%{background-position:0 0}100%{background-position:60px 60px}}

/* Glowing orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none}
.orb1{width:500px;height:500px;background:var(--accent);top:-100px;right:-100px;animation:orb1move 8s ease-in-out infinite alternate}
.orb2{width:350px;height:350px;background:var(--cyan);bottom:-80px;left:10%;animation:orb2move 10s ease-in-out infinite alternate}
@keyframes orb1move{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}
@keyframes orb2move{from{transform:translate(0,0)}to{transform:translate(30px,-20px)}}

/* Floating particles */
.particles{position:absolute;inset:0;pointer-events:none}
.p{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(37,99,235,0.6);animation:pfloat linear infinite}
@keyframes pfloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

.hero-inner{max-width:1200px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.ey-line{width:30px;height:2px;background:var(--cyan)}
.ey-text{color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}

h1{font-size:clamp(40px,5.5vw,68px);font-weight:900;color:#fff;line-height:1.02;letter-spacing:-3px;margin-bottom:24px}
h1 .hl{background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.hero-p{font-size:16.5px;color:rgba(255,255,255,0.5);line-height:1.8;margin-bottom:40px;max-width:460px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:60px}
.btn-solid{background:var(--accent);color:#fff;padding:14px 28px;border-radius:8px;font-size:14.5px;font-weight:700;cursor:pointer;border:none;transition:all .2s;position:relative;overflow:hidden}
.btn-solid::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.1);opacity:0;transition:opacity .2s}
.btn-solid:hover::after{opacity:1}
.btn-solid:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:rgba(255,255,255,0.65);padding:13px 26px;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.15);transition:all .2s}
.btn-ghost:hover{border-color:rgba(255,255,255,0.4);color:#fff;background:rgba(255,255,255,0.04)}

.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.h-stat .num{font-size:32px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1}
.h-stat .num sup{font-size:18px;color:var(--cyan)}
.h-stat .lbl{font-size:12px;color:rgba(255,255,255,0.3);margin-top:5px;font-weight:500;letter-spacing:.3px}

/* ─── HERO RIGHT: Animated Dashboard ─── */
.hero-dashboard{display:flex;flex-direction:column;gap:14px}
.dash-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:24px;backdrop-filter:blur(10px);transition:border-color .3s}
.dash-card:hover{border-color:rgba(37,99,235,0.4)}
.dash-card.primary{background:rgba(37,99,235,0.1);border-color:rgba(37,99,235,0.3)}
.dc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dc-label{font-size:12px;color:rgba(255,255,255,0.35);font-weight:600;letter-spacing:.3px}
.dc-badge{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700}
.badge-live{background:rgba(6,182,212,0.15);color:var(--cyan)}
.badge-up{background:rgba(34,197,94,0.15);color:#4ade80}
.dc-number{font-size:38px;font-weight:900;color:#fff;letter-spacing:-2px;line-height:1;margin-bottom:6px}
.dc-sub{font-size:12px;color:rgba(255,255,255,0.3)}

/* Animated sparkline */
.sparkline{margin-top:18px;height:40px;position:relative;overflow:hidden}
.sparkline svg{width:100%;height:100%}

/* Mini bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:5px;height:40px;margin-top:18px}
.bar{flex:1;border-radius:3px 3px 0 0;background:rgba(37,99,235,0.3);transition:height .6s ease;position:relative}
.bar.active{background:var(--accent)}
.bar::after{content:attr(data-val);position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,0.4);white-space:nowrap}

.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-mini .dc-number{font-size:26px}

/* Circular progress */
.progress-ring{display:flex;align-items:center;gap:16px;margin-top:14px}
.ring-wrap{position:relative;width:56px;height:56px;flex-shrink:0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:4}
.ring-fill{fill:none;stroke:var(--cyan);stroke-width:4;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:35;animation:ringfill 1.5s ease forwards}
@keyframes ringfill{from{stroke-dashoffset:138}to{stroke-dashoffset:35}}
.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.ring-info p{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.5}
.ring-info strong{color:#fff;font-size:14px}

/* ─── TRUST BAR ─── */
.trust-bar{background:#f0f4fb;padding:0 6%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.trust-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:60px;gap:32px}
.trust-lbl{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.trust-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}
.trust-scroll{flex:1;overflow:hidden;position:relative}
.trust-scroll::before,.trust-scroll::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:1}
.trust-scroll::before{left:0;background:linear-gradient(90deg,#f0f4fb,transparent)}
.trust-scroll::after{right:0;background:linear-gradient(270deg,#f0f4fb,transparent)}
.trust-track{display:flex;gap:48px;animation:scroll 20s linear infinite;width:max-content}
.trust-track:hover{animation-play-state:paused}
.trust-item{font-size:13px;font-weight:700;color:#334155;white-space:nowrap;display:flex;align-items:center;gap:8px}
.trust-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── SECTION COMMONS ─── */
.sec-wrap{max-width:1200px;margin:0 auto}
.sec-tag{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px;display:block}
h2{font-size:clamp(26px,4vw,44px);font-weight:900;color:var(--ink);line-height:1.05;letter-spacing:-1.5px}
.sec-desc{font-size:15.5px;color:var(--muted);line-height:1.8;max-width:480px;margin-top:14px}

/* ─── SERVICES ─── */
.services{padding:110px 6%;background:#fff;position:relative;overflow:hidden}
/* Background decoration */
.services::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;border:1px solid rgba(37,99,235,0.05);pointer-events:none}
.services::after{content:'';position:absolute;top:-150px;right:-150px;width:400px;height:400px;border-radius:50%;border:1px solid rgba(37,99,235,0.05);pointer-events:none}

.svc-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;flex-wrap:wrap;gap:24px}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 4px 40px rgba(7,16,31,0.06)}

.svc-card{padding:38px 32px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;position:relative;overflow:hidden;cursor:pointer;transition:background .25s}
.svc-card:nth-child(3n){border-right:none}
.svc-card:nth-child(n+5){border-bottom:none}
.svc-card:hover{background:var(--offwhite)}
/* Hover accent line */
.svc-card::before{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width .35s ease}
.svc-card:hover::before{width:100%}

/* CSS Icon graphics */
.svc-ico-wrap{width:52px;height:52px;border-radius:14px;margin-bottom:22px;display:flex;align-items:center;justify-content:center;position:relative}
.svc-card h3{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:10px}
.svc-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
.svc-arrow{position:absolute;bottom:28px;right:28px;width:28px;height:28px;border-radius:50%;background:var(--offwhite);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.svc-card:hover .svc-arrow{background:var(--accent);transform:translate(2px,-2px)}
.svc-arrow svg{width:12px;height:12px;transition:stroke .2s}
.svc-card:hover .svc-arrow svg{stroke:#fff}

.svc-more-strip{grid-column:1/-1;background:var(--ink);padding:26px 32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.svc-more-strip p{font-size:14px;color:rgba(255,255,255,0.4);font-weight:500}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.65);padding:5px 14px;border-radius:20px;font-size:12.5px;font-weight:600;transition:background .2s}
.pill:hover{background:rgba(37,99,235,0.2);border-color:rgba(37,99,235,0.4);color:#fff}

/* ─── WHY US ─── */
.why{padding:110px 6%;background:var(--offwhite);position:relative;overflow:hidden}
.why-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

.why-pts{display:flex;flex-direction:column;counter-reset:pts}
.why-pt{padding:26px 0;border-bottom:1px solid var(--border);display:flex;gap:24px;align-items:flex-start;position:relative}
.why-pt:first-child{padding-top:0}
.why-pt:last-child{border-bottom:none}
.why-num{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:1px;min-width:28px;padding-top:3px;opacity:.7}
.why-content h4{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.why-content p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* Why right: Glassmorphism cards with CSS graphics */
.why-right{display:flex;flex-direction:column;gap:14px}
.why-feature-card{background:#fff;border-radius:16px;padding:30px;border:1px solid var(--border);position:relative;overflow:hidden}
.wfc-icon{margin-bottom:18px}
.wfc-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.wfc-sub{font-size:13.5px;color:var(--muted);line-height:1.6}
.wfc-accent{position:absolute;top:0;right:0;width:80px;height:80px;border-radius:0 16px 0 80px;opacity:.08}
.wfc-accent.blue{background:var(--accent)}
.wfc-accent.cyan{background:var(--cyan)}

.kolkata-card{background:var(--ink);border-radius:16px;padding:30px;position:relative;overflow:hidden}
.kc-top-bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--cyan))}
.kolkata-card h3{font-size:18px;font-weight:900;color:#fff;margin-bottom:8px;line-height:1.2}
.kolkata-card p{font-size:13.5px;color:rgba(255,255,255,0.4);line-height:1.65;margin-bottom:24px}
.loc-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.25);border-radius:8px;padding:9px 16px}
.loc-ping{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(6,182,212,0.4);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(6,182,212,0.4)}70%{box-shadow:0 0 0 8px rgba(6,182,212,0)}100%{box-shadow:0 0 0 0 rgba(6,182,212,0)}}
.loc-text{font-size:13px;color:#93c5fd;font-weight:700}

.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mc{border-radius:12px;padding:22px 20px;border:1px solid var(--border);background:#fff}
.mc.dark{background:var(--mid);border-color:transparent}
.mc-num{font-size:32px;font-weight:900;color:var(--ink);letter-spacing:-1.5px;line-height:1}
.mc.dark .mc-num{color:#fff}
.mc-accent{color:var(--accent)}
.mc.dark .mc-accent{color:var(--cyan)}
.mc-lbl{font-size:12px;color:var(--muted);margin-top:5px}
.mc.dark .mc-lbl{color:rgba(255,255,255,0.3)}

/* ─── PROOF ─── */
.proof-section{background:var(--ink2);padding:90px 6%;position:relative;overflow:hidden}
/* Animated background element */
.proof-section::before{content:'GROWTH';position:absolute;font-size:220px;font-weight:900;color:rgba(255,255,255,0.015);top:50%;left:50%;transform:translate(-50%,-50%);letter-spacing:-10px;white-space:nowrap;pointer-events:none;user-select:none}
.proof-inner{max-width:1200px;margin:0 auto}
.proof-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;flex-wrap:wrap;gap:20px}
.proof-top h2{color:#fff}

.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,0.04);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.proof-item{padding:44px 28px;text-align:center;border-right:1px solid rgba(255,255,255,0.06);position:relative;overflow:hidden}
.proof-item:last-child{border-right:none}
.proof-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.proof-num{font-size:48px;font-weight:900;color:#fff;letter-spacing:-2px;line-height:1;margin-bottom:10px}
.proof-accent{color:var(--cyan)}
.proof-lbl{font-size:12.5px;color:rgba(255,255,255,0.35);line-height:1.5}

/* ─── PROCESS / HOW WE WORK ─── */
.process{padding:110px 6%;background:#fff;position:relative;overflow:hidden}
.process-inner{max-width:1200px;margin:0 auto}
.process-head{text-align:center;margin-bottom:72px}
.process-head .sec-desc{margin:14px auto 0;text-align:center}

.steps-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
/* Connecting line */
.steps-wrap::before{content:'';position:absolute;top:36px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan));z-index:0}

.step-card{text-align:center;padding:0 20px;position:relative;z-index:1}
.step-num-wrap{width:72px;height:72px;border-radius:50%;border:2px solid var(--accent);background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;position:relative}
.step-num-wrap::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(37,99,235,0.15)}
.step-num{font-size:22px;font-weight:900;color:var(--accent)}
.step-card h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:10px}
.step-card p{font-size:13px;color:var(--muted);line-height:1.65}
/* CSS icon in step */
.step-icon-graphic{width:32px;height:32px;margin:0 auto 16px}

/* ─── CSS GRAPHIC SECTION ─── */
.graphic-section{padding:110px 6%;background:var(--offwhite);overflow:hidden}
.graphic-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.graphic-left h2{margin-bottom:16px}
.graphic-left p{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:28px}
.feature-list{display:flex;flex-direction:column;gap:14px}
.fl-row{display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fff;border-radius:12px;border:1px solid var(--border);transition:border-color .2s,transform .2s;cursor:default}
.fl-row:hover{border-color:rgba(37,99,235,0.3);transform:translateX(4px)}
.fl-check{width:28px;height:28px;border-radius:7px;background:rgba(37,99,235,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fl-check svg{width:14px;height:14px}
.fl-row span{font-size:14px;font-weight:600;color:var(--ink)}


/* ─── CTA ─── */
.cta-section{padding:120px 6%;background:var(--ink);text-align:center;position:relative;overflow:hidden}
.cta-gfx{position:absolute;inset:0;pointer-events:none}
.cta-ring{position:absolute;border-radius:50%;border:1px solid rgba(37,99,235,0.08)}
.cta-ring1{width:800px;height:800px;top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-ring2{width:550px;height:550px;top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-ring3{width:320px;height:320px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(6,182,212,0.1)}
.cta-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(37,99,235,0.1);filter:blur(60px);top:50%;left:50%;transform:translate(-50%,-50%)}

.cta-inner{max-width:640px;margin:0 auto;position:relative;z-index:1}
.cta-ey{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}
.cta-ey-line{width:28px;height:1px;background:var(--cyan)}
.cta-ey-text{font-size:12px;color:var(--cyan);font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.cta-section h2{font-size:clamp(30px,5vw,56px);font-weight:900;color:#fff;letter-spacing:-2px;line-height:1.05;margin-bottom:18px}
.cta-section p{font-size:16.5px;color:rgba(255,255,255,0.4);margin-bottom:44px;line-height:1.75}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--accent2);padding:16px 34px;border-radius:9px;font-size:15px;font-weight:800;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.btn-outline-w{background:transparent;color:rgba(255,255,255,0.6);padding:15px 30px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;border:1.5px solid rgba(255,255,255,0.15);transition:all .2s}
.btn-outline-w:hover{border-color:rgba(255,255,255,0.4);color:#fff}

/* ─── TESTIMONIAL STRIP ─── */
.testi-strip{background:var(--offwhite);padding:80px 6%;border-top:1px solid var(--border)}
.testi-inner{max-width:1200px;margin:0 auto}
.testi-head{text-align:center;margin-bottom:52px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:#fff;border-radius:16px;padding:28px;border:1px solid var(--border);position:relative}
.testi-card::before{content:'\201C';position:absolute;top:16px;right:24px;font-size:64px;color:rgba(37,99,235,0.08);font-family:Georgia,serif;line-height:1}
.testi-stars{display:flex;gap:3px;margin-bottom:16px}
.star{width:14px;height:14px;background:var(--cyan);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testi-card p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px}
.author-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.author-name{font-size:14px;font-weight:700;color:var(--ink)}
.author-co{font-size:12px;color:var(--muted)}


@media(max-width:900px){
    .hero-inner,
.why-inner,
.graphic-inner {
  grid-template-columns: 1fr;
}
  .hero-dashboard{display:none}
  .svc-grid{grid-template-columns:1fr 1fr}
  .proof-grid,.steps-wrap{grid-template-columns:1fr 1fr}
  .steps-wrap::before{display:none}
  .testi-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .svc-grid,.proof-grid,.metrics-grid,.dash-row{grid-template-columns:1fr}
}











:root {
  --navy:    #080d1a;
  --navy2:   #0d1425;
  --blue:    #2563eb;
  --blue2:   #1d4ed8;
  --blue-t:  rgba(37,99,235,0.1);
  --blue-t2: rgba(37,99,235,0.06);
  --teal:    #0891b2;
  --white:   #ffffff;
  --text:    #0f172a;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --bg:      #f0f4f8;
}



/* ═══════════════════════════
   SECTION
═══════════════════════════ */
.why-section {
  background: var(--bg);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}

/* subtle bg decoration */
.why-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.why-section::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -150px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.section-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 4rem;
}

.header-left {}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -1px;
}

.section-title em {
  font-style: normal;
  color: var(--blue);
}

.header-right {
  padding-bottom: 4px;
}

.section-desc {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 9px;
  transition: background 0.18s, transform 0.14s, box-shadow 0.2s;
}

.header-cta:hover {
  background: var(--blue2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.3);
}

.header-cta svg { width: 15px; height: 15px; transition: transform 0.18s; }
.header-cta:hover svg { transform: translateX(3px); }

/* ── Main Grid ── */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}

/* Feature Cards */
.feat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: default;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-color: rgba(37,99,235,0.2);
}

/* Card hover glow */
.feat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 16px 16px 0 0;
}

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

/* Big card */
.feat-card.big {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: var(--navy);
  border-color: rgba(255,255,255,0.06);
}

.feat-card.big::before {
  background: linear-gradient(90deg, #2563eb, #0891b2);
}

.feat-card.big:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  border-color: rgba(37,99,235,0.3);
}

/* Tall card */
.feat-card.tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

/* Card icon */
.card-icon {
  width: 48px; height: 48px;
  background: var(--blue-t);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  transition: background 0.18s;
}

.feat-card:hover .card-icon { background: var(--blue-t2); }

.feat-card.big .card-icon {
  background: rgba(37,99,235,0.2);
  width: 56px; height: 56px;
  border-radius: 14px;
  margin-bottom: 0;
}

.card-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.8; }
.feat-card.big .card-icon svg { width: 26px; height: 26px; stroke: #60a5fa; }

.card-body { flex: 1; }

.card-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-t);
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.feat-card.big .card-tag {
  background: rgba(37,99,235,0.2);
  color: #93c5fd;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.feat-card.big .card-title {
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.card-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}

.feat-card.big .card-desc {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

/* Stats in big card */
.big-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  flex-shrink: 0;
}

.big-stat { display: flex; flex-direction: column; gap: 2px; }
.big-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--white); letter-spacing: -1px; line-height: 1; }
.big-stat-num span { color: #60a5fa; }
.big-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 500; }

/* Checklist in tall card */
.card-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
}

.card-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.18s;
}

.card-checklist li:last-child { border: none; padding-bottom: 0; }
.card-checklist li:hover { color: var(--text); }

.check-icon {
  width: 22px; height: 22px;
  background: var(--blue-t);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-icon svg { width: 12px; height: 12px; stroke: var(--blue); fill: none; stroke-width: 2.5; }

/* Number card */
.num-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.num-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at bottom right, var(--blue-t), transparent);
}

.num-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.07); }

.num-val {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -1.5px;
  line-height: 1;
}

.num-val span { color: var(--blue); }
.num-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* ── Bottom Row ── */
.why-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.process-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.07);
  border-color: rgba(37,99,235,0.2);
}

/* Arrow connector */
.process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--blue);
  opacity: 0.4;
  z-index: 10;
}

.step-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
}

.step-icon {
  width: 40px; height: 40px;
  background: var(--blue-t);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 1.8; }

.step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

.step-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .section-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .feat-card.big { grid-column: span 2; flex-direction: column; gap: 1.5rem; }
  .feat-card.tall { grid-row: span 1; }
  .big-stats { margin-top: 1rem; }
  .why-bottom { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after { display: none; }
  .process-step:last-child::after { display: none; }
}

@media (max-width: 600px) {
  .why-section { padding: 4rem 1.25rem; }
  .why-grid { grid-template-columns: 1fr; gap: 1rem; }
  .feat-card.big { grid-column: span 1; }
  .feat-card.tall { grid-row: span 1; }
  .why-bottom { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .process-step::after { display: none !important; }
  .section-title { font-size: 1.8rem; }
  .big-stats { gap: 1rem; flex-wrap: wrap; }
}