/* ============================================================
   MINZAJ SOLUTIONS — style.css  v4.0
   Mobile-first premium polish. Tokens → Reset → Components.
   ============================================================ */

/* ── 1. FONTS ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── 2. DESIGN TOKENS ────────────────────────────────────── */
:root {
  /* Backgrounds */
  --black:         #080C14;
  --black-deep:    #04060B;
  --black-card:    #0C1220;
  --black-alt:     #070A12;
  --black-surface: #0A0F1B;
  --black-glass:   rgba(8,12,20,0.72);

  /* Brand Blue */
  --blue:          #2563EB;
  --blue-light:    #3B82F6;
  --blue-dim:      #1D4ED8;
  --blue-pale:     #BFDBFE;
  --blue-glow:     rgba(37,99,235,0.18);
  --blue-glow-sm:  rgba(37,99,235,0.09);
  --blue-glow-xs:  rgba(37,99,235,0.05);

  /* Grays */
  --gray:      #94A3B8;
  --gray-400:  #94A3B8;
  --gray-500:  #64748B;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1E293B;

  /* Borders */
  --border:        rgba(30,42,64,0.9);
  --border-mid:    rgba(37,63,100,0.6);
  --border-hover:  rgba(37,99,235,0.45);
  --border-glass:  rgba(255,255,255,0.06);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --sp-xs:  8px;   --sp-sm: 16px;
  --sp-md:  24px;  --sp-lg: 40px;
  --sp-xl:  64px;  --sp-2xl: 100px;

  /* Radii */
  --r-sm:  8px;  --r-md: 12px;
  --r-lg:  16px; --r-xl: 20px;
  --r-2xl: 28px; --r-pill: 100px;

  /* Transitions */
  --t-fast: 0.17s ease;
  --t-mid:  0.30s ease;
  --t-slow: 0.60s ease;

  /* Shadows */
  --shadow-blue:    0 0 56px rgba(37,99,235,0.22);
  --shadow-card:    0 4px 40px rgba(0,0,0,0.6);
  --shadow-sm:      0 2px 16px rgba(0,0,0,0.5);
  --shadow-glass:   0 8px 32px rgba(0,0,0,0.4);
  --shadow-blue-sm: 0 0 24px rgba(37,99,235,0.15);
  --shadow-float:   0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── 3. RESET ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  background:var(--black); color:#fff;
  font-family:var(--font-body); line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img    { max-width:100%; display:block; }
a      { text-decoration:none; color:inherit; }
ul     { list-style:none; }
button { cursor:pointer; font-family:var(--font-body); border:none; background:none; }
input,select,textarea { font-family:var(--font-body); }

/* ── 4. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar       { width:3px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--blue-dim); border-radius:2px; }

/* ── 5. UTILITIES ────────────────────────────────────────── */
.text-center { text-align:center; }
.mx-auto     { margin-left:auto; margin-right:auto; }

.section-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--blue-light); margin-bottom:16px;
}
.section-tag::before {
  content:''; width:20px; height:1px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  display:inline-block; border-radius:1px;
}

.section-title {
  font-family:var(--font-display);
  font-size:clamp(26px,4vw,50px);
  font-weight:800; letter-spacing:-1.5px; line-height:1.07; margin-bottom:18px;
}
.section-sub {
  color:var(--gray); font-size:16px; font-weight:300;
  line-height:1.75; max-width:520px;
}

.glass {
  background:rgba(12,18,32,0.7);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-glass);
}

.skip-link {
  position:absolute; top:-40px; left:0;
  background:var(--blue); color:#fff; padding:8px 16px;
  font-size:14px; z-index:9999; border-radius:0 0 8px 0;
  transition:top var(--t-fast);
}
.skip-link:focus { top:0; }

/* ── 6. BUTTONS ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 26px; border-radius:10px;
  font-family:var(--font-body); font-size:14px;
  font-weight:500; letter-spacing:0.01em;
  transition:all var(--t-fast); position:relative; overflow:hidden;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent);
  opacity:0; transition:opacity var(--t-fast); pointer-events:none;
}
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(0.97) !important; }

.btn-primary {
  background:var(--blue); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 4px 20px rgba(37,99,235,0.34);
}
.btn-primary:hover { background:var(--blue-light); transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,99,235,0.46); }

.btn-secondary {
  background:rgba(255,255,255,0.05); color:#fff; border:1px solid var(--border);
}
.btn-secondary:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.15); transform:translateY(-2px); }

.btn-ghost { background:transparent; color:var(--blue-light); border:1px solid var(--border-hover); padding:10px 22px; }
.btn-ghost:hover { background:var(--blue-glow-sm); border-color:var(--blue); }

.btn-sm  { padding:9px 18px; font-size:13px; border-radius:8px; }
.btn-lg  { padding:15px 32px; font-size:15px; }

/* Touch-friendly minimum size */
@media (hover:none) {
  .btn { min-height:48px; }
  .btn-sm { min-height:42px; }
}

/* ── 7. NAVBAR ───────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 5%; height:68px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid transparent; transition:all var(--t-mid);
}
#navbar.scrolled {
  border-bottom-color:var(--border);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  background:rgba(8,12,20,0.92);
}

.nav-logo { display:flex; align-items:center; }
.nav-logo-img {
  height:44px; width:auto; display:block; object-fit:contain;
  transition:opacity var(--t-fast);
}
.nav-logo-img:hover { opacity:0.85; }
.nav-logo-text {
  font-family:var(--font-display); font-weight:800;
  font-size:19px; letter-spacing:-0.5px; color:#fff;
  display:flex; align-items:center; gap:1px;
}
.nav-logo-text .dot { color:var(--blue); }

.nav-links { display:flex; gap:30px; align-items:center; }
.nav-links a {
  color:var(--gray); font-size:13.5px; font-weight:400;
  letter-spacing:0.01em; transition:color var(--t-fast); position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--blue);
  transform:scaleX(0); transition:transform var(--t-fast); transform-origin:left;
}
.nav-links a:hover        { color:#fff; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active       { color:#fff; }
.nav-links a.active::after{ transform:scaleX(1); }

.nav-mobile-btn {
  display:none; background:rgba(255,255,255,0.06);
  border:1px solid var(--border); color:#fff;
  padding:10px; border-radius:var(--r-sm);
  transition:background var(--t-fast);
  align-items:center; justify-content:center;
  min-width:42px; min-height:42px;
}
.nav-mobile-btn:hover { background:rgba(255,255,255,0.1); }

/* ── 8. MOBILE DRAWER ────────────────────────────────────── */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(4,6,11,0.98);
  backdrop-filter:blur(36px); -webkit-backdrop-filter:blur(36px);
  padding:0 8%; flex-direction:column; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--t-mid);
}
.mobile-menu.open { opacity:1; pointer-events:all; }

/* Decorative glow inside menu */
.mobile-menu::before {
  content:''; position:absolute; top:-20%; left:-10%;
  width:60vw; height:60vw;
  background:radial-gradient(circle,rgba(37,99,235,0.08),transparent 65%);
  pointer-events:none;
}

.mobile-menu-logo {
  position:absolute; top:22px; left:8%;
}
.mobile-menu-logo img { height:34px; width:auto; opacity:0.85; }

.mobile-menu-links {
  display:flex; flex-direction:column; gap:2px; margin-bottom:48px;
}
.mobile-menu-links a {
  font-family:var(--font-display);
  font-size:clamp(28px,8vw,46px); font-weight:800;
  color:rgba(255,255,255,0.1); letter-spacing:-1px;
  padding:10px 0;
  transition:color var(--t-fast), padding-left var(--t-fast), opacity var(--t-fast);
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:relative;
}
.mobile-menu-links a:last-child { border-bottom:none; }
.mobile-menu-links a:hover { color:#fff; padding-left:10px; }
/* Number accent */
.mobile-menu-links a::before {
  content:attr(data-num);
  position:absolute; left:-28px; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-body); font-size:10px;
  font-weight:400; color:var(--blue); letter-spacing:0.1em;
  opacity:0; transition:opacity var(--t-fast);
}
.mobile-menu-links a:hover::before { opacity:1; }

.mobile-menu-footer { display:flex; flex-direction:column; gap:12px; }
.mobile-menu-ctas   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mobile-menu-meta   {
  display:flex; align-items:center; gap:16px; margin-top:10px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,0.06);
  flex-wrap:wrap;
}
.mobile-menu-meta a {
  font-size:12.5px; color:var(--gray-500); transition:color var(--t-fast);
}
.mobile-menu-meta a:hover { color:var(--gray); }

.mobile-close-btn {
  position:absolute; top:20px; right:5%;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--gray); font-size:16px;
  width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast);
}
.mobile-close-btn:hover { color:#fff; background:rgba(255,255,255,0.1); }

/* ── 9. HERO ─────────────────────────────────────────────── */

/* ── Base layout ─────────────────────────────────────────── */
#hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:100px 5% 72px;
  position:relative;
  overflow:hidden;
}

/* ── Background layer ────────────────────────────────────── */
.hero-bg { position:absolute; inset:0; pointer-events:none; }

.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.032) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 85% at 55% 40%, black 25%, transparent 100%);
}

/* Primary glow — top right */
.hero-glow-1 {
  position:absolute; top:-20%; right:-8%;
  width:750px; height:750px;
  background:radial-gradient(circle, rgba(37,99,235,0.16) 0%, transparent 62%);
  border-radius:50%;
}
/* Secondary glow — bottom left */
.hero-glow-2 {
  position:absolute; bottom:-18%; left:-10%;
  width:550px; height:550px;
  background:radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 62%);
  border-radius:50%;
}
/* Tertiary accent — bottom right, subtle warm blue */
.hero-glow-3 {
  position:absolute; bottom:-5%; right:10%;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 65%);
  border-radius:50%;
}

/* ── Grid layout ─────────────────────────────────────────── */
.hero-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  width:100%;
  max-width:1240px;
}

/* ── Left — copywriting ──────────────────────────────────── */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(37,99,235,0.09);
  border:1px solid rgba(37,99,235,0.24);
  padding:7px 16px; border-radius:var(--r-pill);
  margin-bottom:28px; font-size:12px;
  color:var(--blue-pale); letter-spacing:0.06em; font-weight:500;
}
.badge-dot {
  width:6px; height:6px;
  background:var(--blue); border-radius:50%;
}

.hero h1 {
  font-family:var(--font-display);
  font-size:clamp(34px, 5.2vw, 64px);
  font-weight:800; line-height:1.06;
  letter-spacing:-2.5px; margin-bottom:22px;
}
.hero h1 em { font-style:normal; color:var(--blue-light); }

.hero-sub {
  font-size:17px; color:var(--gray);
  line-height:1.78; max-width:480px;
  margin-bottom:36px; font-weight:300;
}

.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px;
}

.hero-trust {
  display:flex; align-items:center; gap:10px;
  color:var(--gray-500); font-size:13px;
}
.hero-trust-dot {
  width:5px; height:5px;
  background:var(--blue); border-radius:50%; flex-shrink:0;
}

/* ── Mobile service cards — ONLY shown on mobile/tablet ─────
   These replace the desktop float-card panel.
   Each is a proper glassmorphism card, not a text pill.
   Controlled via responsive.css: display:none on desktop.
──────────────────────────────────────────────────────────── */
.hero-mobile-cards {
  display:none;                     /* hidden on desktop */
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:32px;
}

.hero-mob-card {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(12,18,32,0.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(37,99,235,0.18);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.hero-mob-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(37,99,235,0.45), transparent);
}
.hero-mob-card:hover {
  border-color:rgba(37,99,235,0.35);
  background:rgba(12,18,32,0.9);
}

.hero-mob-card-icon {
  width:34px; height:34px;
  background:rgba(37,99,235,0.14);
  border:1px solid rgba(37,99,235,0.24);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.hero-mob-card-title {
  font-family:var(--font-display);
  font-size:12px; font-weight:700; color:#fff;
  margin-bottom:2px; letter-spacing:-0.1px;
}
.hero-mob-card-sub {
  font-size:10.5px; color:var(--gray-500); font-weight:300;
}
/* Live-status dot top-right */
.hero-mob-card-dot {
  position:absolute; top:10px; right:10px;
  width:5px; height:5px;
  background:#10b981; border-radius:50%;
  box-shadow:0 0 6px rgba(16,185,129,0.6);
}

/* Keep old .hero-mobile-badges hidden (backwards compat) */
.hero-mobile-badges { display:none; }
.hero-mobile-badge  { display:none; }

/* ── Right — visual composition ─────────────────────────── */
.hero-right {
  position:relative;
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* overflow MUST be visible so float-cards can bleed outside */
  overflow:visible;
}

/* The stack is the anchor for all absolutely-positioned children */
.hero-card-stack {
  position:relative;
  width:100%;
  max-width:400px;
}

/* ── Browser/dashboard mockup ────────────────────────────── */
.hero-mockup {
  background:var(--black-card);
  border:1px solid rgba(37,99,235,0.15);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:
    0 4px 40px rgba(0,0,0,0.6),
    0 0 60px rgba(37,99,235,0.14),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  position:relative;
  z-index:2;
  /* Subtle inner gradient for depth */
  background:linear-gradient(160deg, #0e1628 0%, var(--black-card) 60%);
}

/* Chrome bar */
.mockup-bar {
  background:#060A13;
  padding:10px 14px;
  display:flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.dot { width:9px; height:9px; border-radius:50%; }
.dot-r { background:#ef4444; }
.dot-y { background:#f59e0b; }
.dot-g { background:#10b981; }
.mockup-url-bar {
  margin-left:8px; flex:1;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:4px; padding:3px 10px;
  font-size:10.5px; color:var(--gray-600);
}

/* Dashboard header row (new v5.1) */
.mockup-dash-header {
  padding:10px 18px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.mockup-dash-title {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display);
  font-size:10px; font-weight:700;
  color:var(--gray-500); letter-spacing:0.06em; text-transform:uppercase;
}
.mockup-dash-dot {
  width:6px; height:6px;
  background:var(--blue); border-radius:50%;
}
.mockup-dash-badge {
  font-size:9px; font-weight:600;
  color:#10b981; letter-spacing:0.05em;
  padding:2px 8px; border-radius:var(--r-pill);
  background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.2);
}

/* Body */
.mockup-body { padding:14px 18px 18px; }

/* KPI cards */
.mockup-cards-row {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:8px; margin-bottom:12px;
}
.mockup-kpi {
  background:rgba(37,99,235,0.07);
  border:1px solid rgba(37,99,235,0.12);
  border-radius:var(--r-sm); padding:12px 10px; text-align:center;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.mockup-kpi:hover {
  background:rgba(37,99,235,0.14);
  border-color:rgba(37,99,235,0.22);
}
.mockup-kpi-icon  { font-size:16px; margin-bottom:6px; }
.mockup-kpi-label { font-size:9px; color:var(--gray-500); letter-spacing:0.05em; }
.mockup-kpi-val   {
  font-family:var(--font-display);
  font-size:15px; font-weight:800; color:#fff; margin-top:3px;
}

/* Chart */
.mockup-chart {
  background:rgba(255,255,255,0.018);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-sm); padding:12px; margin-bottom:10px;
}
.mockup-chart-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.mockup-chart-label {
  font-size:9px; color:var(--gray-500);
  letter-spacing:0.07em; text-transform:uppercase;
}
.mockup-chart-trend {
  font-size:9px; color:#10b981; font-weight:600;
  letter-spacing:0.04em;
}
.mockup-bars { display:flex; align-items:flex-end; gap:5px; height:52px; }
.mbar {
  flex:1; border-radius:3px 3px 0 0;
  background:var(--blue-dim); opacity:0.45; min-height:8px;
  transition:opacity var(--t-fast);
}
.mbar.hi {
  opacity:1;
  background:linear-gradient(180deg, var(--blue-light), var(--blue));
}

/* Status pills */
.mockup-row  { display:flex; gap:7px; flex-wrap:wrap; }
.mockup-pill {
  font-size:9.5px; padding:3px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--gray-500);
}
.mockup-pill.active {
  background:rgba(37,99,235,0.12);
  border-color:rgba(37,99,235,0.28);
  color:var(--blue-pale);
}

/* ── Floating glassmorphism feature cards ────────────────────
   All 4 cards are positioned absolutely relative to
   .hero-card-stack. They bleed outside via overflow:visible
   on .hero-right. Positions keep them within the viewport
   on large screens (overflow-x is hidden on body).
──────────────────────────────────────────────────────────── */
.float-card {
  position:absolute;
  background:rgba(7,11,22,0.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--r-md);
  padding:11px 15px;
  display:flex; align-items:center; gap:10px;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04);
  z-index:10;
  white-space:nowrap;
  /* No animation by default — added via class below */
}
/* Shimmer top border */
.float-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(37,99,235,0.5),
    rgba(59,130,246,0.3),
    transparent
  );
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.float-card-icon {
  width:32px; height:32px;
  background:rgba(37,99,235,0.16);
  border:1px solid rgba(37,99,235,0.28);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.float-card-text { font-size:11.5px; font-weight:600; color:#fff; }
.float-card-sub  { font-size:10px; color:var(--gray-500); margin-top:1px; }

/* Card positions — anchored to .hero-card-stack edges.
   All use % relative to the stack width (max-width:400px).
   NO negative values that exceed the parent container. */
.float-card-1 {
  top:-6%;
  right:-28%;
  animation: floatA 4.2s ease-in-out infinite;
}
.float-card-2 {
  bottom:28%;
  left:-34%;
  animation: floatB 5s ease-in-out infinite 0.3s;
}
.float-card-3 {
  bottom:4%;
  right:-26%;
  animation: floatC 4.7s ease-in-out infinite 0.8s;
}
.float-card-4 {
  top:36%;
  left:-36%;
  animation: floatA 5.5s ease-in-out infinite 1.2s;
}

/* ── 10. SECTIONS SHARED ─────────────────────────────────── */
section { padding:var(--sp-2xl) 5%; }

/* ── 11. HIGHLIGHTS ──────────────────────────────────────── */
#highlights { background:var(--black-alt); padding:56px 5%; }
.highlights-inner {
  display:flex; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
}
.highlight-card {
  flex:1; background:var(--black-alt); padding:24px 20px;
  display:flex; align-items:flex-start; gap:13px;
  transition:background var(--t-fast); position:relative; overflow:hidden;
}
.highlight-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:0; transition:opacity var(--t-mid);
}
.highlight-card:hover { background:#07091A; }
.highlight-card:hover::before { opacity:1; }
.hl-icon {
  width:36px; height:36px;
  background:rgba(37,99,235,0.1); border:1px solid rgba(37,99,235,0.2);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; transition:all var(--t-fast);
}
.highlight-card:hover .hl-icon { background:rgba(37,99,235,0.18); border-color:rgba(37,99,235,0.36); }
.hl-title { font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:4px; }
.hl-desc  { font-size:12px; color:var(--gray); font-weight:300; line-height:1.5; }

/* ── 12. SERVICES ────────────────────────────────────────── */
#services { background:var(--black); }
.services-header { text-align:center; margin-bottom:56px; }
.services-header .section-sub { margin:0 auto; }
.services-header .section-tag { justify-content:center; }
.services-header .section-tag::before { display:none; }

.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
}
.srv-card {
  background:var(--black); padding:36px 28px 48px;
  position:relative; overflow:hidden; transition:background var(--t-fast);
}
.srv-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 130% 90% at 50% 0%,rgba(37,99,235,0.08),transparent);
  opacity:0; transition:opacity var(--t-mid);
}
.srv-card:hover { background:#090f1c; }
.srv-card:hover::before { opacity:1; }
.srv-icon-wrap {
  width:48px; height:48px; border-radius:var(--r-md);
  background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:20px; transition:all var(--t-fast);
}
.srv-card:hover .srv-icon-wrap { background:rgba(37,99,235,0.16); border-color:rgba(37,99,235,0.32); transform:scale(1.06); }
.srv-card h3 { font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:10px; letter-spacing:-0.3px; }
.srv-card p  { color:var(--gray); font-size:13.5px; line-height:1.7; font-weight:300; }
.srv-arrow {
  position:absolute; bottom:22px; right:22px;
  width:30px; height:30px; border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); font-size:13px;
  opacity:0; transform:translate(4px,-4px) rotate(0deg);
  transition:opacity var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.srv-card:hover .srv-arrow {
  opacity:1; transform:rotate(-45deg) scale(1.1);
  border-color:rgba(37,99,235,0.5); color:var(--blue-pale);
}

/* ── 13. SOLUTIONS ───────────────────────────────────────── */
#solutions { background:var(--black-alt); }
.solutions-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.solutions-left .section-sub { margin-bottom:36px; }
.sol-list { display:flex; flex-direction:column; gap:10px; }
.sol-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 20px; border:1px solid var(--border);
  border-radius:var(--r-md); background:rgba(255,255,255,0.018);
  transition:all var(--t-fast); cursor:default;
}
.sol-item:hover { border-color:var(--border-hover); background:rgba(37,99,235,0.04); transform:translateX(5px); }
.sol-num { font-family:var(--font-display); font-size:10px; font-weight:700; color:var(--blue-light); min-width:22px; padding-top:3px; letter-spacing:0.06em; }
.sol-item h4 { font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:3px; }
.sol-item p  { color:var(--gray); font-size:13px; font-weight:300; line-height:1.6; }

.sol-panel { border:1px solid var(--border); border-radius:var(--r-xl); background:var(--black-card); overflow:hidden; box-shadow:var(--shadow-card); }
.sol-panel-header {
  padding:18px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sol-panel-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); }
.sol-panel-title { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--gray-500); }
.sol-panel-body  { padding:20px; display:flex; flex-direction:column; gap:10px; }

.feature-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border:1px solid var(--border); border-radius:var(--r-md);
  background:rgba(255,255,255,0.018); transition:all var(--t-fast);
}
.feature-row:hover { border-color:var(--border-hover); background:rgba(37,99,235,0.04); transform:translateX(3px); }
.feature-row-icon { width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.fr-blue   { background:rgba(37,99,235,0.12); border:1px solid rgba(37,99,235,0.22); }
.fr-green  { background:rgba(16,185,129,0.1);  border:1px solid rgba(16,185,129,0.18); }
.fr-purple { background:rgba(139,92,246,0.1);  border:1px solid rgba(139,92,246,0.18); }
.fr-amber  { background:rgba(245,158,11,0.1);  border:1px solid rgba(245,158,11,0.18); }
.fr-rose   { background:rgba(244,63,94,0.1);   border:1px solid rgba(244,63,94,0.18); }
.feature-row-text h5 { font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:2px; }
.feature-row-text p  { font-size:11.5px; color:var(--gray); font-weight:300; }

/* ── 14. PORTFOLIO ───────────────────────────────────────── */
#portfolio { background:var(--black); }
.portfolio-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; flex-wrap:wrap; gap:16px; }
.portfolio-note { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gray-500); font-weight:300; max-width:260px; line-height:1.5; }

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

.port-card {
  border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; background:var(--black-card);
  transition:all 0.32s cubic-bezier(0.25,0.8,0.25,1);
  position:relative;
}
.port-card:hover {
  border-color:rgba(37,99,235,0.35); transform:translateY(-8px);
  box-shadow:var(--shadow-blue), var(--shadow-card);
}

.port-thumb { height:220px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.port-thumb img { width:100%; height:auto; object-fit:cover; object-position:top; transition:transform 8s cubic-bezier(0.25,0.8,0.25,1); transform:translateY(0%); }
.port-card:hover .port-thumb img { transform:translateY(-55%); }
/* Scroll effect only for tall screenshots */
.port-thumb img.screenshot-scroll { transform:translateY(0%); transition:transform 8s cubic-bezier(0.25,0.8,0.25,1); }
.port-card:hover .port-thumb img.screenshot-scroll { transform:translateY(-55%); }

/* Laptop frame placeholder */
.port-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.port-placeholder-1 { background:linear-gradient(145deg,#0c1220,#0e1f44); }
.port-placeholder-2 { background:linear-gradient(145deg,#0c1220,#130f32); }
.port-placeholder-3 { background:linear-gradient(145deg,#0c1220,#0d2018); }

.port-laptop { width:78%; max-width:240px; position:relative; }
.port-laptop-screen {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  border-radius:8px 8px 0 0; padding:10px;
  position:relative; overflow:hidden; aspect-ratio:16/9;
}
.port-laptop-screen::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,0.55),transparent);
}
/* Subtle glow inside screen */
.port-laptop-screen::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(37,99,235,0.06),transparent);
  pointer-events:none;
}
.port-screen-inner { height:100%; display:flex; flex-direction:column; gap:5px; position:relative; z-index:1; }
.port-screen-bar  { height:5px; border-radius:2px; background:rgba(255,255,255,0.07); }
.port-screen-bar.w-full { width:100%; }
.port-screen-bar.w-80   { width:80%; }
.port-screen-bar.w-70   { width:70%; }
.port-screen-bar.w-50   { width:50%; }
.port-screen-bar.accent { background:linear-gradient(90deg,var(--blue-dim),var(--blue-light)); height:6px; opacity:0.9; }
.port-screen-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; flex:1; padding-top:4px; }
.port-screen-block { border-radius:3px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.05); }
.port-laptop-base { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.09); border-top:none; height:10px; border-radius:0 0 4px 4px; }
.port-laptop-foot { width:40%; height:4px; background:rgba(255,255,255,0.04); border-radius:0 0 3px 3px; margin:0 auto; }

/* Hover glow on card hover */
.port-card:hover .port-placeholder::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(37,99,235,0.08),transparent);
  pointer-events:none;
}

.port-img-placeholder {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.07); border-radius:5px;
  padding:3px 8px; font-size:9px; color:rgba(255,255,255,0.3); letter-spacing:0.05em;
}

/* Hover overlay */
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,12,20,0.92) 100%);
  opacity:0; transition:opacity var(--t-mid);
  display:flex; align-items:flex-end; padding:16px;
}
.port-card:hover .port-overlay { opacity:1; }
.port-overlay-label {
  font-size:11px; font-weight:500; color:#fff;
  letter-spacing:0.04em; display:flex; align-items:center; gap:6px;
}

.port-badge {
  position:absolute; top:14px; left:14px; font-size:10px;
  padding:4px 10px; border-radius:var(--r-pill); font-weight:500; letter-spacing:0.04em;
}
.badge-web  { background:rgba(37,99,235,0.18);  color:#93c5fd; border:1px solid rgba(37,99,235,0.28); }
.badge-biz  { background:rgba(148,163,184,0.08); color:var(--gray); border:1px solid var(--border); }
.badge-edu  { background:rgba(16,185,129,0.1);   color:#6ee7b7; border:1px solid rgba(16,185,129,0.2); }
.badge-app  { background:rgba(139,92,246,0.1);   color:#c4b5fd; border:1px solid rgba(139,92,246,0.2); }

.port-body    { padding:22px; }
.port-type    { font-size:11px; color:var(--blue-light); font-weight:500; margin-bottom:6px; letter-spacing:0.04em; }
.port-body h3 { font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:8px; letter-spacing:-0.3px; }
.port-body p  { color:var(--gray); font-size:13px; line-height:1.65; font-weight:300; }
.port-conf    { font-size:11px; color:var(--gray-600); margin-top:10px; display:flex; align-items:center; gap:5px; }

/* ── 15. INDUSTRIES ──────────────────────────────────────── */
#industries { background:var(--black-alt); }
.industries-header { text-align:center; margin-bottom:52px; }
.industries-header .section-sub { margin:0 auto; }
.industries-header .section-tag { justify-content:center; }
.industries-header .section-tag::before { display:none; }

.industries-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.industry-card {
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:28px 18px; text-align:center;
  background:rgba(255,255,255,0.018);
  transition:all var(--t-fast); position:relative; overflow:hidden;
}
.industry-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blue-dim),var(--blue-light));
  transform:scaleX(0); transition:transform var(--t-mid); transform-origin:left;
}
.industry-card:hover { border-color:var(--border-hover); background:rgba(37,99,235,0.04); transform:translateY(-5px); box-shadow:var(--shadow-blue-sm); }
.industry-card:hover::after { transform:scaleX(1); }
.industry-icon { font-size:28px; margin-bottom:14px; display:block; transition:transform var(--t-fast); }
.industry-card:hover .industry-icon { transform:scale(1.15); }
.industry-card h4 { font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:5px; }
.industry-card p  { font-size:12px; color:var(--gray); font-weight:300; line-height:1.5; }

/* ── 16. TECHNOLOGIES ────────────────────────────────────── */
#technologies { background:var(--black); }
.tech-header  { text-align:center; margin-bottom:52px; }
.tech-header .section-sub { margin:0 auto; }
.tech-header .section-tag { justify-content:center; }
.tech-header .section-tag::before { display:none; }

.tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tech-card {
  background:var(--black-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 18px;
  display:flex; align-items:center; gap:14px;
  transition:all var(--t-fast); position:relative; overflow:hidden;
}
.tech-card:hover { border-color:var(--border-hover); background:var(--black-surface); transform:translateY(-3px); box-shadow:var(--shadow-blue-sm); }
.tech-logo {
  width:42px; height:42px; background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; transition:all var(--t-fast);
}
.tech-card:hover .tech-logo { background:rgba(37,99,235,0.1); border-color:rgba(37,99,235,0.22); transform:scale(1.08); }
.tech-name { font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:2px; }
.tech-type { font-size:11.5px; color:var(--gray-500); font-weight:300; }

/* ── 17. WHY US ──────────────────────────────────────────── */
#about { background:var(--black-alt); }
.whyus-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.why-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.why-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; border:1px solid transparent;
  border-radius:var(--r-md); transition:all var(--t-fast);
}
.why-item:hover { border-color:var(--border); background:rgba(255,255,255,0.02); }
.why-check {
  width:22px; height:22px; background:rgba(37,99,235,0.12);
  border:1px solid rgba(37,99,235,0.25); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px; transition:all var(--t-fast);
}
.why-item:hover .why-check { background:rgba(37,99,235,0.22); border-color:var(--blue); transform:scale(1.1); }
.why-check svg { width:11px; height:11px; color:var(--blue); }
.why-item h4   { font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:3px; }
.why-item p    { color:var(--gray); font-size:13px; font-weight:300; line-height:1.6; }

/* ── 18. PROCESS ─────────────────────────────────────────── */
#process { background:var(--black); }
.process-header { text-align:center; margin-bottom:60px; }
.process-header .section-tag { justify-content:center; }
.process-header .section-tag::before { display:none; }
.process-header .section-sub { margin:0 auto; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-steps::before {
  content:''; position:absolute; top:27px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent);
}
.proc-step { text-align:center; padding:0 18px; position:relative; }
.proc-num {
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--border); background:var(--black);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--blue-light);
  position:relative; z-index:1; transition:all var(--t-fast);
}
.proc-step:hover .proc-num { border-color:var(--blue); background:rgba(37,99,235,0.1); box-shadow:0 0 24px rgba(37,99,235,0.24); transform:scale(1.08); }
.proc-step h4 { font-family:var(--font-display); font-size:15px; font-weight:700; margin-bottom:8px; }
.proc-step p  { color:var(--gray); font-size:13px; font-weight:300; line-height:1.6; }

/* ── 19. TESTIMONIALS ────────────────────────────────────── */
#testimonials { background:var(--black-alt); }
.test-header { text-align:center; margin-bottom:52px; }
.test-header .section-tag { justify-content:center; }
.test-header .section-tag::before { display:none; }
.test-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.test-card {
  background:rgba(255,255,255,0.028); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:32px;
  position:relative; overflow:hidden; transition:all var(--t-fast);
}
.test-card::before {
  content:'\201C'; position:absolute; top:10px; right:22px;
  font-family:var(--font-display); font-size:100px;
  color:rgba(37,99,235,0.06); line-height:1; font-weight:800; pointer-events:none;
}
.test-card:hover { border-color:rgba(37,99,235,0.25); background:rgba(37,99,235,0.028); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.test-stars { display:flex; gap:3px; margin-bottom:18px; }
.test-star  { color:var(--blue-light); font-size:13px; }
.test-card blockquote { font-size:15px; line-height:1.75; color:rgba(255,255,255,0.82); font-weight:300; margin-bottom:24px; font-style:italic; position:relative; z-index:1; }
.test-author { display:flex; align-items:center; gap:12px; }
.test-avatar {
  width:40px; height:40px; border-radius:50%;
  background:rgba(37,99,235,0.12); border:1px solid rgba(37,99,235,0.22);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--blue-pale); flex-shrink:0;
}
.test-name { font-size:14px; font-weight:500; }
.test-role { font-size:11.5px; color:var(--gray-500); margin-top:1px; }

/* ── 20. CONTACT ─────────────────────────────────────────── */
#contact { background:var(--black); padding:var(--sp-2xl) 5%; }
.contact-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
.contact-left .section-sub { margin-bottom:32px; }
.contact-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }

.contact-card {
  display:flex; align-items:center; gap:14px;
  padding:15px 18px; border:1px solid var(--border); border-radius:var(--r-md);
  background:rgba(255,255,255,0.02); transition:all var(--t-fast);
  text-decoration:none; color:inherit;
}
.contact-card:hover { border-color:var(--border-hover); background:rgba(37,99,235,0.04); transform:translateX(5px); }
.contact-card-icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.cc-blue  { background:rgba(37,99,235,0.12);  border:1px solid rgba(37,99,235,0.22); }
.cc-green { background:rgba(16,185,129,0.1);   border:1px solid rgba(16,185,129,0.18); }
.cc-pink  { background:rgba(236,72,153,0.1);   border:1px solid rgba(236,72,153,0.18); }
.contact-card-label { font-size:10px; color:var(--gray-500); margin-bottom:2px; letter-spacing:0.06em; text-transform:uppercase; }
.contact-card-value { font-size:14px; font-weight:500; color:#fff; }

.contact-response-note {
  font-size:13px; color:var(--gray-500); font-weight:300;
  margin-bottom:20px; display:flex; align-items:center; gap:7px;
}
.response-dot { width:7px; height:7px; background:#10b981; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px rgba(16,185,129,0.5); }

.contact-socials { display:flex; gap:9px; flex-wrap:wrap; }
.social-btn {
  display:flex; align-items:center; gap:7px;
  padding:9px 15px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; color:var(--gray-500); transition:all var(--t-fast);
  min-height:40px;
}
.social-btn:hover { border-color:var(--border-hover); color:#fff; background:rgba(37,99,235,0.06); }

/* Contact form — glassmorphism panel */
.contact-form-wrap {
  background:rgba(12,18,32,0.8);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:var(--r-xl); padding:36px;
  position:relative; overflow:hidden;
}
.contact-form-wrap::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,0.55),transparent);
}
.contact-form-wrap::after {
  content:''; position:absolute; top:-40%; right:-20%;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(37,99,235,0.05),transparent 70%);
  pointer-events:none;
}
.form-title { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:6px; letter-spacing:-0.3px; }
.form-sub   { font-size:13px; color:var(--gray); font-weight:300; margin-bottom:26px; }
.form-group { margin-bottom:14px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-label { display:block; font-size:12px; font-weight:500; color:var(--gray-400); margin-bottom:7px; letter-spacing:0.02em; }
.form-input,.form-select,.form-textarea {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px 14px;
  font-family:var(--font-body); font-size:14px; color:#fff;
  outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance:none; appearance:none;
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--gray-600); }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:rgba(37,99,235,0.55); box-shadow:0 0 0 3px rgba(37,99,235,0.12);
  background:rgba(255,255,255,0.06);
}
.form-select { color:var(--gray-400); }
.form-select option { background:#0C1220; color:#fff; }
.form-textarea { resize:vertical; min-height:100px; }
.form-submit { width:100%; margin-top:4px; position:relative; z-index:1; }
.form-success { display:none; text-align:center; padding:24px; }
.form-success.show { display:block; }
.form-success-icon { font-size:40px; margin-bottom:14px; }
.form-success h4 { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:8px; }
.form-success p  { font-size:14px; color:var(--gray); font-weight:300; }

/* ── 21. FOOTER ──────────────────────────────────────────── */
footer {
  background:var(--black-deep); border-top:1px solid var(--border);
  padding:72px 5% 36px; position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse,rgba(37,99,235,0.06),transparent 70%);
  pointer-events:none;
}
.footer-inner { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:56px; margin-bottom:52px; position:relative; }

.footer-logo { margin-bottom:14px; display:inline-block; }
.footer-logo-img { height:40px; width:auto; display:block; object-fit:contain; opacity:0.92; transition:opacity var(--t-fast); }
.footer-logo-img:hover { opacity:1; }
.footer-logo-text { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-0.5px; color:#fff; display:inline-flex; align-items:center; }
.footer-logo-text .dot { color:var(--blue); }

.footer-tagline { color:var(--gray-500); font-size:13.5px; font-weight:300; line-height:1.7; margin-bottom:22px; max-width:260px; }

.footer-social { display:flex; gap:8px; }
.footer-social-btn {
  width:38px; height:38px; border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); transition:all var(--t-fast);
}
.footer-social-btn:hover { border-color:var(--border-hover); color:var(--blue-light); background:var(--blue-glow-sm); transform:translateY(-2px); }

.footer-col h5 {
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-600); margin-bottom:18px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul a { color:var(--gray-500); font-size:13.5px; font-weight:300; transition:color var(--t-fast), padding-left var(--t-fast); display:inline-block; }
.footer-col ul a:hover { color:#fff; padding-left:4px; }

.footer-bottom {
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom p { color:var(--gray-600); font-size:12.5px; font-weight:300; }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { color:var(--gray-600); font-size:12.5px; transition:color var(--t-fast); }
.footer-bottom-links a:hover { color:var(--gray); }

/* ── FORM: error states (production addition) ────────────── */
.form-error-banner {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 16px;
  line-height: 1.5;
}
.field-error {
  display: block;
  font-size: 11.5px;
  color: #f87171;
  margin-top: 5px;
  padding-left: 2px;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up,.fade-in,.fade-left,.fade-right,.scale-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-right    { opacity: 1 !important; transform: none !important; }
  .hero-content > * { opacity: 1 !important; }
  #navbar        { animation: none !important; opacity: 1 !important; }
  .float-card-1,.float-card-2,.float-card-3 { animation: none !important; }
  .badge-dot     { animation: none !important; }
  .btn-glow      { animation: none !important; }
  .mbar          { animation: none !important; transform: scaleY(1) !important; }
}

/* ── LOADER LOGO sizing ───────────────────────────────────── */
.loader-logo {
  height: 38px;
  width: auto;
  display: block;
  opacity: 0;
  animation: loaderLogoIn 0.4s ease 0.1s forwards;
  object-fit: contain;
  margin-bottom: 16px;
}
@keyframes loaderLogoIn {
  to { opacity: 0.75; }
}

/* ── HERO MOBILE BADGE strip items ───────────────────────── */
.hero-mobile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37,99,235,0.09);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 12px;
  color: var(--blue-pale);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.hero-mobile-badge:hover {
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.35);
}
.hero-mobile-badge-icon {
  font-size: 13px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE STYLES
   Breakpoints: 1024px (tablet), 768px (large mobile), 480px (small mobile)
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .section-inner { padding: 0 5%; }
  section { padding: 72px 0; }

  /* Hero */
  .hero-inner { gap: 40px; }
  .hero-right { width: 340px; flex-shrink: 0; }
  .hero h1 { font-size: 48px; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Portfolio */
  .port-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Industries */
  .industries-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* Tech stack */
  .tech-grid { grid-template-columns: repeat(3, 1fr); }

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

/* ── Large Mobile (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {
  /* Global */
  section { padding: 60px 0; }
  .section-inner { padding: 0 5%; }

  .section-tag  { font-size: 10px; }
  .section-title { font-size: clamp(24px, 6vw, 32px); }
  .section-sub  { font-size: 14px; }

  /* Navbar */
  .nav-inner { padding: 0 5%; }

  /* Hero — stack vertically */
  .hero-inner {
    flex-direction: column;
    text-align: center;
    padding: 48px 5% 40px;
    gap: 40px;
  }
  .hero-left { max-width: 100%; }
  .hero h1   { font-size: clamp(32px, 8vw, 48px); }
  .hero-sub  { font-size: 15px; max-width: 100%; }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-trust { justify-content: center; }

  /* Hide desktop hero visual on mobile */
  .hero-right { display: none; }

  /* Show mobile service cards */
  .hero-mobile-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
  }

  /* Services */
  .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .service-card  { padding: 20px 16px; }

  /* Portfolio */
  .port-grid   { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
  .port-thumb  { height: 200px; }

  /* Why section — two column on tablet */
  .whyus-inner { grid-template-columns: 1fr; gap: 32px; }

  /* Industries */
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Tech stack */
  .tech-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Testimonials */
  .test-grid { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }

  /* Contact */
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .contact-cards { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .contact-card  { flex: 1; min-width: 140px; }

  /* Form */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .footer-bottom-links { justify-content: center; }
}

/* ── Small Mobile (≤480px) ────────────────────────────────── */
@media (max-width: 480px) {
  section { padding: 48px 0; }
  .section-inner { padding: 0 4%; }

  /* Hero */
  .hero-inner { padding: 40px 4% 32px; }
  .hero h1    { font-size: clamp(28px, 9vw, 38px); letter-spacing: -1px; }
  .hero-sub   { font-size: 14px; }
  .hero-btns .btn { max-width: 100%; }

  /* Mobile service cards — single column */
  .hero-mobile-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-mob-card     { padding: 14px 12px; }
  .hero-mob-card-icon { width: 32px; height: 32px; font-size: 16px; }
  .hero-mob-card-title { font-size: 12px; }
  .hero-mob-card-sub   { font-size: 10px; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
  .service-card  { padding: 18px 14px; }

  /* Portfolio */
  .port-grid  { max-width: 100%; }
  .port-thumb { height: 180px; }
  .port-body  { padding: 16px; }

  /* Industries */
  .industries-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tech */
  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats row */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Contact cards stack */
  .contact-cards { flex-direction: column; }
  .contact-card  { min-width: unset; width: 100%; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-col:first-child { grid-column: auto; }

  /* Buttons */
  .btn { font-size: 13px; padding: 11px 20px; }
  .btn-lg { padding: 13px 22px; font-size: 14px; }

  /* Typography */
  .section-title { letter-spacing: -0.5px; }
  h2 { font-size: clamp(22px, 7vw, 30px); }
}

/* ── Extra Small (≤360px) — old Android phones ───────────── */
@media (max-width: 360px) {
  .hero h1 { font-size: 26px; }
  .hero-mobile-cards { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
}