/* ============================================================
   DEVSELLER THEME — devseller.css
   Prefix: ds-
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800;12..96,900&family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables (overridable via Customizer) ─────────────── */
:root {
  --ds-white:       #FFFFFF;
  --ds-bg:          #F8FAFF;
  --ds-bg-alt:      #EEF3FF;

  --ds-blue-50:     #EEF2FF;
  --ds-blue-100:    #C7D2FE;
  --ds-blue-400:    #818CF8;
  --ds-blue-500:    #4F46E5;
  --ds-blue-600:    #3730A3;

  --ds-cyan:        #06B6D4;
  --ds-cyan-light:  #CFFAFE;
  --ds-purple:      #7C3AED;
  --ds-purple-light:#EDE9FE;
  --ds-pink:        #EC4899;
  --ds-pink-light:  #FCE7F3;
  --ds-orange:      #F97316;
  --ds-orange-light:#FFF7ED;
  --ds-green:       #10B981;
  --ds-green-light: #D1FAE5;

  --ds-text-dark:   #0F172A;
  --ds-text-body:   #334155;
  --ds-text-muted:  #64748B;
  --ds-text-light:  #94A3B8;
  --ds-border:      #E2E8F0;
  --ds-border-blue: rgba(79,70,229,0.18);

  --ds-grad-primary: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --ds-grad-hero:    linear-gradient(135deg, #4F46E5 0%, #003A96 50%, #06B6D4 100%);
  --ds-grad-warm:    linear-gradient(135deg, #F97316 0%, #EC4899 100%);
  --ds-grad-green:   linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --ds-grad-text:    linear-gradient(135deg, #4F46E5, #06B6D4);

  --ds-font-display: 'Bricolage Grotesque', sans-serif;
  --ds-font-body:    'Figtree', sans-serif;

  --ds-radius-sm:  8px;
  --ds-radius-md:  14px;
  --ds-radius-lg:  20px;
  --ds-radius-xl:  28px;
  --ds-radius-2xl: 40px;

  --ds-shadow-xs:   0 1px 4px rgba(0,0,0,0.05);
  --ds-shadow-sm:   0 4px 14px rgba(79,70,229,0.10);
  --ds-shadow-md:   0 8px 32px rgba(79,70,229,0.14);
  --ds-shadow-lg:   0 16px 48px rgba(79,70,229,0.18);
  --ds-shadow-card: 0 4px 24px rgba(15,23,42,0.07);
  --ds-shadow-btn:  0 8px 28px rgba(79,70,229,0.32);

  --ds-transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

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

/* ── Layout ─────────────────────────────────────────────────── */
.ds-container       { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.ds-container--wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.ds-section         { padding: 96px 0; position: relative; overflow: hidden; }
.ds-section--sm     { padding: 56px 0; position: relative; overflow: hidden; }
.ds-section--xs     { padding: 32px 0; position: relative; overflow: hidden; }
.ds-text-center     { text-align: center; }
.ds-bg-white        { background: var(--ds-white); }
.ds-bg-light        { background: var(--ds-bg); }
.ds-bg-blue-tint    { background: var(--ds-bg-alt); }

/* ── Gradient text ──────────────────────────────────────────── */
.ds-text-gradient {
  background: var(--ds-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Badge ──────────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ds-blue-500); padding: 6px 15px; border-radius: 100px;
  background: var(--ds-blue-50); border: 1px solid var(--ds-blue-100);
  margin-bottom: 18px;
}
.ds-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-blue-500); box-shadow: 0 0 0 2px rgba(79,70,229,.2); }
.ds-badge--purple  { color: var(--ds-purple); background: var(--ds-purple-light); border-color: rgba(124,58,237,.2); }
.ds-badge--purple::before { background: var(--ds-purple); }
.ds-badge--cyan    { color: var(--ds-cyan); background: var(--ds-cyan-light); border-color: rgba(6,182,212,.25); }
.ds-badge--cyan::before { background: var(--ds-cyan); }
.ds-badge--orange  { color: var(--ds-orange); background: var(--ds-orange-light); border-color: rgba(249,115,22,.2); }
.ds-badge--orange::before { background: var(--ds-orange); }
.ds-badge--green   { color: var(--ds-green); background: var(--ds-green-light); border-color: rgba(16,185,129,.2); }
.ds-badge--green::before { background: var(--ds-green); }

/* ── Section Header ─────────────────────────────────────────── */
.ds-section-header { margin-bottom: 56px; }
.ds-section-header--center { text-align: center; }
.ds-section-header--center .ds-section-desc { margin: 0 auto; }
.ds-section-title {
  font-family: var(--ds-font-display);
  font-size: clamp(28px,3.5vw,48px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--ds-text-dark); margin-bottom: 14px;
}
.ds-section-desc { font-size: 17px; color: var(--ds-text-muted); max-width: 580px; line-height: 1.75; }

/* ── Stars ──────────────────────────────────────────────────── */
.ds-stars { color: #F59E0B; font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; }

/* ── Buttons ────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ds-font-body); font-weight: 700; font-size: 15px;
  padding: 13px 28px; border-radius: 12px;
  transition: var(--ds-transition); position: relative; white-space: nowrap;
}
.ds-btn--primary        { background: var(--ds-grad-primary); color: #fff; box-shadow: var(--ds-shadow-btn); }
.ds-btn--primary:hover  { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(79,70,229,.38); }
.ds-btn--outline        { background: transparent; color: var(--ds-blue-500); border: 2px solid var(--ds-blue-500); }
.ds-btn--outline:hover  { background: var(--ds-blue-50); transform: translateY(-2px); }
.ds-btn--ghost          { background: var(--ds-bg); color: var(--ds-text-body); border: 1.5px solid var(--ds-border); }
.ds-btn--ghost:hover    { border-color: var(--ds-blue-500); color: var(--ds-blue-500); background: var(--ds-blue-50); }
.ds-btn--white          { background: #fff; color: var(--ds-blue-500); font-weight: 700; }
.ds-btn--white:hover    { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ds-btn--white-outline  { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.ds-btn--white-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ds-btn--sm  { font-size: 13px; padding: 9px 18px; border-radius: 9px; }
.ds-btn--lg  { font-size: 16px; padding: 15px 34px; border-radius: 14px; }
.ds-btn-arrow { width: 16px; height: 16px; transition: transform .25s; flex-shrink: 0; }
.ds-btn:hover .ds-btn-arrow { transform: translateX(4px); }

/* ── Navigation ─────────────────────────────────────────────── */
.ds-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: var(--ds-transition); }
.ds-nav--scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ds-border);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.ds-nav--hero-mode:not(.ds-nav--scrolled) { background: transparent; }
.ds-nav--hero-mode:not(.ds-nav--scrolled) .ds-nav__link { color: rgba(255,255,255,.85); }
.ds-nav--hero-mode:not(.ds-nav--scrolled) .ds-nav__link:hover,
.ds-nav--hero-mode:not(.ds-nav--scrolled) .ds-nav__link.ds-active { color: #fff; background: rgba(255,255,255,.14); }
.ds-nav--hero-mode:not(.ds-nav--scrolled) .ds-nav__logo-text { -webkit-text-fill-color: #fff; background: none; }
.ds-nav--hero-mode:not(.ds-nav--scrolled) .ds-nav__toggle span { background: #fff; }
.ds-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ds-nav__logo { display: flex; align-items: center; gap: 10px; }
.ds-nav__logo-img { height: 36px; width: 36px; }
.ds-nav__logo-text { font-family: var(--ds-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; background: var(--ds-grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ds-nav__links { display: flex; align-items: center; gap: 4px; }
.ds-nav__link { font-size: 14px; font-weight: 600; color: var(--ds-text-body); padding: 8px 14px; border-radius: 9px; transition: var(--ds-transition); }
.ds-nav__link:hover { color: var(--ds-blue-500); background: var(--ds-blue-50); }
.ds-nav__link.ds-active { color: var(--ds-blue-500); background: var(--ds-blue-50); }
.ds-nav__cta { margin-left: 12px; }
.ds-nav__toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px; }
.ds-nav__toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ds-text-dark); transition: var(--ds-transition); }
.ds-nav__mobile { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(255,255,255,.98); backdrop-filter: blur(24px); flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ds-nav__mobile.ds-open { display: flex; }
.ds-nav__mobile .ds-nav__link { font-size: 22px; padding: 14px 32px; color: var(--ds-text-dark); }
.ds-nav__mobile-close { position: absolute; top: 20px; right: 20px; font-size: 24px; color: var(--ds-text-muted); cursor: pointer; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--ds-bg); }

/* ── Background Grid ─────────────────────────────────────────── */
.ds-bg-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 28px 28px; pointer-events: none; }

/* ── Hero ────────────────────────────────────────────────────── */
.ds-hero {
  background: var(--ds-grad-hero);
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 0 80px; position: relative; overflow: hidden;
}
.ds-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 28px 28px; }
.ds-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); }
.ds-hero__blob--1 { width: 500px; height: 500px; background: #fff; top: -120px; right: -80px; opacity: .12; }
.ds-hero__blob--2 { width: 340px; height: 340px; background: #EC4899; bottom: 20px; left: -60px; opacity: .18; }
.ds-hero__blob--3 { width: 260px; height: 260px; background: #06B6D4; top: 200px; left: 48%; opacity: .15; }
.ds-hero__content { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.ds-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 100px; margin-bottom: 22px; }
.ds-hero__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.ds-hero__title { font-family: var(--ds-font-display); font-size: clamp(36px,5vw,68px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; color: #fff; margin-bottom: 22px; }
.ds-hero__title em { font-style: normal; background: linear-gradient(135deg,#FCD34D,#FB923C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ds-hero__sub { font-size: 18px; color: rgba(255,255,255,.78); max-width: 460px; line-height: 1.75; margin-bottom: 36px; }
.ds-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.ds-hero__stats { display: flex; gap: 36px; }
.ds-hero__stat-num { font-family: var(--ds-font-display); font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
.ds-hero__stat-label { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 4px; }

/* ── Hero Visual ─────────────────────────────────────────────── */
.ds-hero__visual { display: flex; justify-content: center; align-items: center; }
.ds-hero__card-stack { position: relative; width: 360px; height: 380px; }
.ds-hero__chip { position: absolute; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(12px); border-radius: 100px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; animation: ds-float 4s ease-in-out infinite; }
.ds-hero__chip--tl { top: 10px; left: -10px; animation-delay: 0s; }
.ds-hero__chip--tr { top: 40px; right: -20px; animation-delay: .8s; }
.ds-hero__chip--bl { bottom: 60px; left: -20px; animation-delay: 1.6s; }
.ds-hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; }
.ds-hero__chip-icon { font-size: 15px; }
.ds-hero__main-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 280px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(24px); border-radius: 24px; padding: 36px 28px; text-align: center; animation: ds-float2 5s ease-in-out infinite; }
.ds-hero__main-card-logo { height: 60px; width: auto; margin: 0 auto 14px; }
.ds-hero__main-card-fallback { font-size: 52px; margin-bottom: 14px; }
.ds-hero__main-card-title { font-family: var(--ds-font-display); font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.ds-hero__main-card-sub { font-size: 13px; color: rgba(255,255,255,.7); }

/* ── Feature Strip ───────────────────────────────────────────── */
.ds-feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ds-feature-item { text-align: center; padding: 26px 18px; background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-lg); transition: var(--ds-transition); }
.ds-feature-item:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-blue-100); }
.ds-feature-item__icon  { font-size: 30px; margin-bottom: 10px; }
.ds-feature-item__title { font-size: 15px; font-weight: 700; color: var(--ds-text-dark); margin-bottom: 5px; }
.ds-feature-item__desc  { font-size: 13px; color: var(--ds-text-muted); line-height: 1.6; }

/* ── Services ────────────────────────────────────────────────── */
.ds-services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ds-service-card {
  background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-xl);
  padding: 36px 30px; transition: var(--ds-transition); position: relative; overflow: hidden;
}
.ds-service-card::before { content: ''; position: absolute; inset: 0; background: var(--ds-grad-primary); opacity: 0; transition: opacity .3s; }
.ds-service-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--ds-shadow-lg); }
.ds-service-card:hover::before { opacity: 1; }
.ds-service-card > * { position: relative; z-index: 1; }
.ds-service-card:hover .ds-service-card__title,
.ds-service-card:hover .ds-service-card__desc { color: #fff; }
.ds-service-card:hover .ds-service-card__tag { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: #fff; }
.ds-service-card:hover .ds-service-card__icon-wrap { background: rgba(255,255,255,.2); }
.ds-service-card__icon-wrap { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 22px; transition: var(--ds-transition); }
.ds-service-card__icon-wrap--blue   { background: var(--ds-blue-50); }
.ds-service-card__icon-wrap--purple { background: var(--ds-purple-light); }
.ds-service-card__icon-wrap--cyan   { background: var(--ds-cyan-light); }
.ds-service-card__title { font-family: var(--ds-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ds-text-dark); margin-bottom: 11px; transition: color .3s; }
.ds-service-card__desc  { font-size: 14px; color: var(--ds-text-muted); line-height: 1.7; margin-bottom: 22px; transition: color .3s; }
.ds-service-card__tags  { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-service-card__tag   { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 100px; background: var(--ds-bg); border: 1px solid var(--ds-border); color: var(--ds-text-body); transition: var(--ds-transition); }

/* ── Stats ───────────────────────────────────────────────────── */
.ds-stats { background: var(--ds-grad-primary); position: relative; overflow: hidden; }
.ds-stats::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 24px 24px; }
.ds-stats__grid  { display: grid; grid-template-columns: repeat(4,1fr); position: relative; z-index: 1; }
.ds-stats__item  { text-align: center; padding: 50px 24px; border-right: 1px solid rgba(255,255,255,.15); transition: background .25s; }
.ds-stats__item:last-child { border-right: none; }
.ds-stats__item:hover { background: rgba(255,255,255,.08); }
.ds-stats__icon  { font-size: 28px; margin-bottom: 10px; }
.ds-stats__num   { font-family: var(--ds-font-display); font-size: 50px; font-weight: 800; color: #fff; line-height: 1; }
.ds-stats__label { font-size: 14px; color: rgba(255,255,255,.68); margin-top: 7px; font-weight: 500; }

/* ── Portfolio ───────────────────────────────────────────────── */
.ds-portfolio__grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ds-portfolio__filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.ds-filter-btn { font-family: var(--ds-font-body); font-size: 13px; font-weight: 600; padding: 9px 22px; border-radius: 100px; background: var(--ds-white); border: 1.5px solid var(--ds-border); color: var(--ds-text-muted); transition: var(--ds-transition); cursor: pointer; }
.ds-filter-btn:hover { border-color: var(--ds-blue-500); color: var(--ds-blue-500); background: var(--ds-blue-50); }
.ds-filter-btn.ds-active { background: var(--ds-grad-primary); border-color: transparent; color: #fff; box-shadow: var(--ds-shadow-btn); }

/* ── Project Card ────────────────────────────────────────────── */
.ds-project-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-xl); overflow: hidden; transition: var(--ds-transition); }
.ds-project-card:hover { transform: translateY(-6px); box-shadow: var(--ds-shadow-lg); border-color: transparent; }
.ds-project-card__thumb { position: relative; height: 220px; overflow: hidden; background: var(--ds-bg-alt); display: flex; align-items: center; justify-content: center; }
.ds-project-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ds-project-card:hover .ds-project-card__thumb img { transform: scale(1.05); }
.ds-project-card__thumb-placeholder { font-size: 56px; }
.ds-project-card__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(15,23,42,.5)); opacity: 0; transition: opacity .3s; }
.ds-project-card:hover .ds-project-card__overlay { opacity: 1; }
.ds-project-card__visit { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(8px); opacity: 0; transition: var(--ds-transition); white-space: nowrap; }
.ds-project-card:hover .ds-project-card__visit { opacity: 1; transform: translateX(-50%) translateY(0); }
.ds-project-card__body { padding: 22px 24px 26px; }
.ds-project-card__cat  { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-blue-500); margin-bottom: 8px; }
.ds-project-card__title { font-family: var(--ds-font-display); font-size: 19px; font-weight: 800; color: var(--ds-text-dark); margin-bottom: 8px; letter-spacing: -.02em; }
.ds-project-card__desc  { font-size: 14px; color: var(--ds-text-muted); line-height: 1.65; }

/* ── Load More ───────────────────────────────────────────────── */
.ds-load-more-wrap { text-align: center; margin-top: 44px; }
.ds-load-more-spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ds-spin .7s linear infinite; }
.ds-load-more-btn.loading .ds-load-more-spinner { display: inline-block; }
.ds-load-more-btn.loading .ds-load-more-label { display: none; }

/* ── Why Choose Us ───────────────────────────────────────────── */
.ds-why__grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ds-why__features { display: flex; flex-direction: column; gap: 18px; }
.ds-why__feature { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--ds-radius-md); background: var(--ds-white); border: 1.5px solid var(--ds-border); transition: var(--ds-transition); }
.ds-why__feature:hover { border-color: var(--ds-blue-100); box-shadow: var(--ds-shadow-sm); transform: translateX(4px); }
.ds-why__feature-icon { width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ds-why__feature-icon--blue   { background: var(--ds-blue-50); }
.ds-why__feature-icon--purple { background: var(--ds-purple-light); }
.ds-why__feature-icon--green  { background: var(--ds-green-light); }
.ds-why__feature-title { font-size: 16px; font-weight: 700; color: var(--ds-text-dark); margin-bottom: 4px; }
.ds-why__feature-desc  { font-size: 14px; color: var(--ds-text-muted); line-height: 1.65; }
.ds-why__visual-card   { background: var(--ds-grad-primary); border-radius: var(--ds-radius-2xl); padding: 44px; position: relative; overflow: hidden; }
.ds-why__visual-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size: 22px 22px; }
.ds-why__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; }
.ds-why__num-box  { background: rgba(255,255,255,.15); border-radius: 16px; padding: 22px 16px; border: 1px solid rgba(255,255,255,.2); text-align: center; }
.ds-why__num-val  { font-family: var(--ds-font-display); font-size: 38px; font-weight: 800; color: #fff; line-height: 1; }
.ds-why__num-label { font-size: 12px; color: rgba(255,255,255,.68); margin-top: 5px; }

/* ── Testimonials ────────────────────────────────────────────── */
.ds-testimonials__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ds-testimonial-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 30px; transition: var(--ds-transition); }
.ds-testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-blue-100); }
.ds-testimonial-card__quote  { font-size: 40px; line-height: 1; color: var(--ds-blue-400); font-family: Georgia,serif; margin-bottom: 12px; }
.ds-testimonial-card__text   { font-size: 15px; color: var(--ds-text-body); line-height: 1.75; margin-bottom: 22px; }
.ds-testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.ds-testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ds-grad-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; overflow: hidden; }
.ds-testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-testimonial-card__name { font-size: 15px; font-weight: 700; color: var(--ds-text-dark); }
.ds-testimonial-card__role { font-size: 13px; color: var(--ds-text-muted); margin-top: 2px; }

/* ── Marquee ─────────────────────────────────────────────────── */
.ds-marquee { overflow: hidden; position: relative; padding: 18px 0; }
.ds-marquee::before, .ds-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; }
.ds-marquee::before { left: 0; background: linear-gradient(to right,var(--ds-bg),transparent); }
.ds-marquee::after  { right: 0; background: linear-gradient(to left,var(--ds-bg),transparent); }
.ds-marquee--white::before { background: linear-gradient(to right,var(--ds-white),transparent); }
.ds-marquee--white::after  { background: linear-gradient(to left,var(--ds-white),transparent); }
.ds-marquee__track { display: flex; gap: 14px; width: max-content; animation: ds-scroll 28s linear infinite; }
.ds-marquee__track--rev { animation: ds-scroll-rev 28s linear infinite; }
.ds-marquee__item { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px; background: var(--ds-white); border: 1.5px solid var(--ds-border); font-size: 14px; font-weight: 600; color: var(--ds-text-body); white-space: nowrap; box-shadow: var(--ds-shadow-xs); flex-shrink: 0; }
.ds-marquee__item-icon { font-size: 18px; }

/* ── CTA Section ─────────────────────────────────────────────── */
.ds-cta__inner { background: var(--ds-grad-hero); border-radius: var(--ds-radius-2xl); padding: 80px 60px; text-align: center; position: relative; overflow: hidden; }
.ds-cta__inner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 28px 28px; }
.ds-cta__title   { font-family: var(--ds-font-display); font-size: clamp(28px,4vw,50px); font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -.03em; position: relative; z-index: 1; }
.ds-cta__desc    { font-size: 18px; color: rgba(255,255,255,.78); margin-bottom: 36px; position: relative; z-index: 1; }
.ds-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Page Hero ───────────────────────────────────────────────── */
.ds-page-hero { background: var(--ds-grad-hero); padding: 148px 0 78px; text-align: center; position: relative; overflow: hidden; }
.ds-page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 26px 26px; }
.ds-page-hero__inner { position: relative; z-index: 2; }
.ds-page-hero__title { font-family: var(--ds-font-display); font-size: clamp(34px,5vw,64px); font-weight: 800; color: #fff; letter-spacing: -.04em; margin-bottom: 16px; }
.ds-page-hero__desc  { font-size: 18px; color: rgba(255,255,255,.77); max-width: 560px; margin: 0 auto; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.ds-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 18px; justify-content: center; }
.ds-breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.ds-breadcrumb a:hover { color: #fff; }
.ds-breadcrumb__sep { font-size: 10px; }

/* ── About Intro ─────────────────────────────────────────────── */
.ds-about__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ds-about__intro-text h2 { font-family: var(--ds-font-display); font-size: clamp(26px,3vw,42px); font-weight: 800; color: var(--ds-text-dark); letter-spacing: -.03em; margin-bottom: 16px; }
.ds-about__intro-text p { font-size: 16px; color: var(--ds-text-muted); line-height: 1.8; margin-bottom: 14px; }
.ds-ceo-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-xl); padding: 40px 32px; text-align: center; box-shadow: var(--ds-shadow-card); }
.ds-ceo-avatar { width: 106px; height: 106px; border-radius: 50%; margin: 0 auto 16px; background: var(--ds-grad-primary); display: flex; align-items: center; justify-content: center; font-family: var(--ds-font-display); font-size: 40px; font-weight: 800; color: #fff; box-shadow: 0 8px 30px rgba(79,70,229,.28); overflow: hidden; }
.ds-ceo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-ceo-name { font-family: var(--ds-font-display); font-size: 22px; font-weight: 800; color: var(--ds-text-dark); margin-bottom: 4px; }
.ds-ceo-role { font-size: 14px; color: var(--ds-blue-500); font-weight: 600; }
.ds-ceo-bio  { font-size: 14px; color: var(--ds-text-muted); line-height: 1.7; margin-top: 16px; }

/* ── Values ──────────────────────────────────────────────────── */
.ds-values__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ds-value-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 26px 22px; transition: var(--ds-transition); }
.ds-value-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-blue-100); }
.ds-value-card__icon  { font-size: 30px; margin-bottom: 12px; }
.ds-value-card__title { font-size: 16px; font-weight: 700; color: var(--ds-text-dark); margin-bottom: 8px; }
.ds-value-card__desc  { font-size: 14px; color: var(--ds-text-muted); line-height: 1.65; }

/* ── Contact ─────────────────────────────────────────────────── */
.ds-contact__layout  { display: grid; grid-template-columns: 1fr 1.4fr; gap: 52px; }
.ds-contact__info    { display: flex; flex-direction: column; gap: 16px; }
.ds-contact__info-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 20px 22px; display: flex; gap: 15px; align-items: flex-start; transition: var(--ds-transition); }
.ds-contact__info-card:hover { border-color: var(--ds-blue-100); box-shadow: var(--ds-shadow-sm); }
.ds-contact__info-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.ds-contact__info-icon--blue   { background: var(--ds-blue-50); }
.ds-contact__info-icon--purple { background: var(--ds-purple-light); }
.ds-contact__info-icon--green  { background: var(--ds-green-light); }
.ds-contact__info-icon--cyan   { background: var(--ds-cyan-light); }
.ds-contact__info-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: 4px; }
.ds-contact__info-value { font-size: 15px; color: var(--ds-text-dark); line-height: 1.6; }
.ds-contact__info-value a { color: var(--ds-blue-500); font-weight: 500; }
.ds-contact__social-links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.ds-social-link { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; background: var(--ds-bg); border: 1.5px solid var(--ds-border); font-size: 13px; font-weight: 600; color: var(--ds-text-muted); transition: var(--ds-transition); }
.ds-social-link:hover { border-color: var(--ds-blue-500); color: var(--ds-blue-500); background: var(--ds-blue-50); }
.ds-contact__form-wrap  { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-xl); padding: 40px; box-shadow: var(--ds-shadow-card); }
.ds-contact__form-title { font-family: var(--ds-font-display); font-size: 22px; font-weight: 800; color: var(--ds-text-dark); margin-bottom: 26px; }

/* ── Form ────────────────────────────────────────────────────── */
.ds-form { display: flex; flex-direction: column; gap: 17px; }
.ds-form__row    { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.ds-form__group  { display: flex; flex-direction: column; gap: 7px; }
.ds-form__label  { font-size: 13px; font-weight: 600; color: var(--ds-text-body); }
.ds-form__input, .ds-form__select, .ds-form__textarea { background: var(--ds-bg); border: 1.5px solid var(--ds-border); border-radius: 10px; padding: 13px 16px; color: var(--ds-text-dark); font-size: 15px; transition: var(--ds-transition); outline: none; width: 100%; }
.ds-form__input:focus, .ds-form__select:focus, .ds-form__textarea:focus { border-color: var(--ds-blue-500); background: var(--ds-white); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.ds-form__input::placeholder, .ds-form__textarea::placeholder { color: var(--ds-text-light); }
.ds-form__textarea { min-height: 130px; resize: vertical; }
.ds-form__select { cursor: pointer; }
.ds-form__error  { border-color: #EF4444 !important; }
.ds-form__error-msg { font-size: 12px; color: #EF4444; margin-top: 4px; }

/* ── Thank You Popup ─────────────────────────────────────────── */
.ds-popup-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.65); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ds-popup-overlay.ds-popup-open { opacity: 1; pointer-events: all; }
.ds-popup { background: var(--ds-white); border-radius: var(--ds-radius-2xl); padding: 56px 48px; max-width: 520px; width: calc(100% - 48px); text-align: center; position: relative; transform: translateY(24px) scale(.96); transition: transform .35s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 32px 80px rgba(15,23,42,.22); }
.ds-popup-overlay.ds-popup-open .ds-popup { transform: translateY(0) scale(1); }
.ds-popup__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; background: var(--ds-bg); border: 1.5px solid var(--ds-border); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ds-text-muted); cursor: pointer; transition: var(--ds-transition); }
.ds-popup__close:hover { background: var(--ds-blue-50); color: var(--ds-blue-500); }
.ds-popup__icon-wrap { width: 80px; height: 80px; border-radius: 50%; background: var(--ds-green-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 36px; }
.ds-popup__title { font-family: var(--ds-font-display); font-size: 28px; font-weight: 800; color: var(--ds-text-dark); margin-bottom: 12px; letter-spacing: -.02em; }
.ds-popup__desc  { font-size: 16px; color: var(--ds-text-muted); line-height: 1.7; margin-bottom: 28px; }
.ds-popup__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Project Single ──────────────────────────────────────────── */
.ds-project-info__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 52px; }
.ds-project-detail-card { background: var(--ds-white); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 26px; position: sticky; top: 92px; box-shadow: var(--ds-shadow-card); }
.ds-project-detail-card__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: 14px; }
.ds-project-detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ds-border); font-size: 14px; }
.ds-project-detail-row:last-of-type { border-bottom: none; }
.ds-project-detail-row__key { color: var(--ds-text-muted); }
.ds-project-detail-row__val { color: var(--ds-text-dark); font-weight: 600; text-align: right; max-width: 180px; }
.ds-project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 40px; }
.ds-project-gallery-item { border-radius: 14px; border: 1.5px solid var(--ds-border); overflow: hidden; background: var(--ds-bg-alt); }
.ds-project-gallery-item:first-child { grid-column: 1 / -1; height: 340px; }
.ds-project-gallery-item:not(:first-child) { height: 200px; }
.ds-project-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ds-project-gallery-item:hover img { transform: scale(1.04); }
.ds-project-gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 64px; background: linear-gradient(135deg,var(--ds-blue-50),var(--ds-cyan-light)); }
.ds-project-content h3 { font-family: var(--ds-font-display); font-size: 20px; font-weight: 800; color: var(--ds-text-dark); margin-bottom: 11px; margin-top: 30px; }
.ds-project-content h3:first-child { margin-top: 0; }
.ds-project-content p { font-size: 16px; color: var(--ds-text-muted); line-height: 1.8; margin-bottom: 14px; }
.ds-tech-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-tech-tag  { font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 100px; background: var(--ds-bg); border: 1px solid var(--ds-border); color: var(--ds-text-body); }
.ds-rating-stars { font-size: 22px; color: #F59E0B; letter-spacing: 3px; }

/* ── Footer ──────────────────────────────────────────────────── */
.ds-footer { background: var(--ds-text-dark); padding: 72px 0 0; }
.ds-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ds-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.ds-footer__logo-img  { height: 34px; }
.ds-footer__logo-text { font-family: var(--ds-font-display); font-weight: 800; font-size: 20px; background: var(--ds-grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ds-footer__tagline   { font-size: 14px; color: rgba(255,255,255,.48); line-height: 1.7; max-width: 280px; margin-bottom: 20px; }
.ds-footer__social    { display: flex; gap: 8px; }
.ds-footer__social-link { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 700; transition: var(--ds-transition); }
.ds-footer__social-link:hover { background: var(--ds-blue-500); border-color: var(--ds-blue-500); color: #fff; transform: translateY(-2px); }
.ds-footer__col-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.88); margin-bottom: 16px; }
.ds-footer__links     { display: flex; flex-direction: column; gap: 10px; }
.ds-footer__link      { font-size: 14px; color: rgba(255,255,255,.48); transition: var(--ds-transition); }
.ds-footer__link:hover { color: #fff; padding-left: 4px; }
.ds-footer__contact-item { display: flex; gap: 8px; font-size: 14px; color: rgba(255,255,255,.48); margin-bottom: 10px; align-items: flex-start; line-height: 1.5; }
.ds-footer__contact-item a { color: rgba(255,255,255,.48); transition: color .2s; }
.ds-footer__contact-item a:hover { color: #fff; }
.ds-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; font-size: 13px; color: rgba(255,255,255,.3); }
.ds-footer__bottom-links { display: flex; gap: 22px; }
.ds-footer__bottom-links a { color: rgba(255,255,255,.3); transition: color .2s; }
.ds-footer__bottom-links a:hover { color: rgba(255,255,255,.65); }

/* ── Admin Submissions ───────────────────────────────────────── */
.ds-admin-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.ds-admin-header { background: linear-gradient(135deg,#4F46E5,#06B6D4); padding: 28px 32px; border-radius: 12px; margin-bottom: 28px; color: #fff; }
.ds-admin-header h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.ds-admin-header p  { font-size: 14px; color: rgba(255,255,255,.75); margin: 0; }
.ds-admin-stats { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.ds-admin-stat  { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 24px; flex: 1; min-width: 140px; }
.ds-admin-stat__num   { font-size: 32px; font-weight: 800; color: #4F46E5; line-height: 1; }
.ds-admin-stat__label { font-size: 13px; color: #64748b; margin-top: 4px; }
.ds-admin-table-wrap  { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.ds-admin-table-header { padding: 18px 24px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.ds-admin-table-header h2 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
table.ds-submissions { width: 100%; border-collapse: collapse; }
table.ds-submissions th { background: #f8faff; padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
table.ds-submissions td { padding: 14px 16px; font-size: 14px; color: #334155; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
table.ds-submissions tr:last-child td { border-bottom: none; }
table.ds-submissions tr:hover td { background: #f8faff; }
.ds-submission-name    { font-weight: 600; color: #0f172a; }
.ds-submission-email   { color: #4F46E5; }
.ds-submission-service { display: inline-block; padding: 3px 10px; border-radius: 100px; background: #EEF2FF; color: #4F46E5; font-size: 12px; font-weight: 600; }
.ds-submission-budget  { display: inline-block; padding: 3px 10px; border-radius: 100px; background: #D1FAE5; color: #10B981; font-size: 12px; font-weight: 600; }
.ds-submission-date    { color: #94a3b8; font-size: 13px; }
.ds-submission-msg     { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; }
.ds-view-btn { font-size: 12px; font-weight: 600; color: #4F46E5; background: #EEF2FF; border: none; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: all .2s; }
.ds-view-btn:hover { background: #4F46E5; color: #fff; }
.ds-delete-btn { font-size: 12px; font-weight: 600; color: #EF4444; background: #FEF2F2; border: none; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: all .2s; margin-left: 6px; }
.ds-delete-btn:hover { background: #EF4444; color: #fff; }

/* ── Reveal Animations ───────────────────────────────────────── */
.ds-reveal       { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; }
.ds-reveal.ds-visible { opacity: 1; transform: translateY(0); }
.ds-reveal-left  { opacity: 0; transform: translateX(-26px); transition: opacity .55s ease, transform .55s ease; }
.ds-reveal-left.ds-visible  { opacity: 1; transform: translateX(0); }
.ds-reveal-right { opacity: 0; transform: translateX(26px); transition: opacity .55s ease, transform .55s ease; }
.ds-reveal-right.ds-visible { opacity: 1; transform: translateX(0); }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes ds-float     { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes ds-float2    { 0%,100%{transform:translate(-50%,-50%) rotate(-1deg)}50%{transform:translate(-50%,-50%) translateY(-10px) rotate(1deg)} }
@keyframes ds-scroll    { 0%{transform:translateX(0)}100%{transform:translateX(-50%)} }
@keyframes ds-scroll-rev{ 0%{transform:translateX(-50%)}100%{transform:translateX(0)} }
@keyframes ds-spin      { to{transform:rotate(360deg)} }
@keyframes ds-fadeIn    { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-hero__content           { grid-template-columns: 1fr; text-align: center; gap: 44px; }
  .ds-hero__sub, .ds-section-desc { margin-left: auto; margin-right: auto; }
  .ds-hero__actions, .ds-hero__stats { justify-content: center; }
  .ds-hero__chip              { display: none; }
  .ds-services__grid          { grid-template-columns: 1fr 1fr; }
  .ds-portfolio__grid         { grid-template-columns: 1fr 1fr; }
  .ds-testimonials__grid      { grid-template-columns: 1fr 1fr; }
  .ds-why__grid               { grid-template-columns: 1fr; gap: 48px; }
  .ds-about__intro            { grid-template-columns: 1fr; gap: 44px; }
  .ds-contact__layout         { grid-template-columns: 1fr; }
  .ds-project-info__grid      { grid-template-columns: 1fr; }
  .ds-footer__grid            { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ds-stats__grid             { grid-template-columns: repeat(2,1fr); }
  .ds-stats__item:nth-child(2){ border-right: none; }
  .ds-stats__item             { border-bottom: 1px solid rgba(255,255,255,.15); }
  .ds-stats__item:last-child  { border-bottom: none; }
  .ds-feature-grid            { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .ds-section           { padding: 60px 0; }
  .ds-section--sm       { padding: 36px 0; }
  .ds-nav__links, .ds-nav__cta { display: none; }
  .ds-nav__toggle       { display: flex; }
  .ds-services__grid, .ds-portfolio__grid, .ds-testimonials__grid { grid-template-columns: 1fr; }
  .ds-values__grid      { grid-template-columns: 1fr 1fr; }
  .ds-footer__grid      { grid-template-columns: 1fr; gap: 26px; }
  .ds-cta__inner        { padding: 40px 22px; }
  .ds-form__row         { grid-template-columns: 1fr; }
  .ds-contact__form-wrap{ padding: 24px; }
  .ds-page-hero         { padding: 116px 0 52px; }
  .ds-hero__card-stack  { max-width: 300px; margin: 0 auto; }
  .ds-popup             { padding: 36px 24px; }
}
@media (max-width: 540px) {
  .ds-hero__stats       { flex-direction: column; align-items: center; gap: 20px; }
  .ds-stats__grid       { grid-template-columns: 1fr 1fr; }
  .ds-values__grid, .ds-feature-grid { grid-template-columns: 1fr; }
  .ds-faqs, .ds-mission-vision{grid-template-columns: 1fr !important;}
  .ds-project-gallery   { grid-template-columns: 1fr; }
  .ds-project-gallery-item:first-child { height: 220px; }
  .ds-footer__bottom    { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Elementor full-width fix ────────────────────────────────────────────── */
/* Ensure Elementor's canvas and full-width sections span the full viewport  */
.elementor-page .site,
.elementor-page #page,
.elementor-page #main-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Remove default WP page title on Elementor-built pages */
.elementor-page .entry-title,
.elementor-page .page-title,
.elementor-page h1.ds-section-title {
    display: none !important;
}

/* ── Admin bar + body margin fixes ─────────────────────────────────────────── */

/* Remove any browser default body margin */
body { margin: 0 !important; padding: 0 !important; }

/* WordPress admin bar adds margin-top:32px to <html> when logged in.
   Compensate so the hero still sits flush at the top of the viewport. */
.admin-bar #page,
.admin-bar .elementor-section.elementor-section-stretched,
.admin-bar .elementor-top-section:first-child {
    margin-top: 0 !important;
}

/* The admin bar itself is position:fixed at the top — the content should
   NOT be pushed down. Override the WP core inline style on <html>. */
html.admin-bar-is-open,
html { margin-top: 0 !important; }

/* Fix: WP core sets html { margin-top: 32px } via inline style when admin bar
   is visible. We can't remove the inline style from PHP, but we can override
   it with a higher-specificity rule on the body to keep zero gap. */
.admin-bar body > #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Elementor full-width section stretch fix when admin bar is present */
.admin-bar .elementor-section-stretched {
    left: 0 !important;
    width: 100vw !important;
}

/* ── Elementor wrapper padding overrides ────────────────────────────────────
   Elementor wraps every widget in .elementor-widget-container and every
   section in .elementor-section — both carry default padding/margin that
   creates white gaps around full-bleed sections like Hero, Page Hero, Footer.
   Zero them out for every DS full-bleed widget.
──────────────────────────────────────────────────────────────────────────── */

/* Target the Elementor column/section containing our full-bleed widgets */
.elementor-widget-ds_hero,
.elementor-widget-ds_page_hero,
.elementor-widget-ds_footer,
.elementor-widget-ds_nav_header,
.elementor-widget-ds_feature_strip,
.elementor-widget-ds_services,
.elementor-widget-ds_stats,
.elementor-widget-ds_portfolio_grid,
.elementor-widget-ds_why_choose_us,
.elementor-widget-ds_testimonials,
.elementor-widget-ds_tech_marquee,
.elementor-widget-ds_cta,
.elementor-widget-ds_about_intro,
.elementor-widget-ds_core_values,
.elementor-widget-ds_mission_vision,
.elementor-widget-ds_contact_info,
.elementor-widget-ds_contact_form,
.elementor-widget-ds_faq,
.elementor-widget-ds_project_single {
    padding: 0 !important;
    margin: 0 !important;
}

/* Zero the inner widget container Elementor injects */
.elementor-widget-ds_hero .elementor-widget-container,
.elementor-widget-ds_page_hero .elementor-widget-container,
.elementor-widget-ds_footer .elementor-widget-container,
.elementor-widget-ds_nav_header .elementor-widget-container,
.elementor-widget-ds_feature_strip .elementor-widget-container,
.elementor-widget-ds_services .elementor-widget-container,
.elementor-widget-ds_stats .elementor-widget-container,
.elementor-widget-ds_portfolio_grid .elementor-widget-container,
.elementor-widget-ds_why_choose_us .elementor-widget-container,
.elementor-widget-ds_testimonials .elementor-widget-container,
.elementor-widget-ds_tech_marquee .elementor-widget-container,
.elementor-widget-ds_cta .elementor-widget-container,
.elementor-widget-ds_about_intro .elementor-widget-container,
.elementor-widget-ds_core_values .elementor-widget-container,
.elementor-widget-ds_mission_vision .elementor-widget-container,
.elementor-widget-ds_contact_info .elementor-widget-container,
.elementor-widget-ds_contact_form .elementor-widget-container,
.elementor-widget-ds_faq .elementor-widget-container,
.elementor-widget-ds_project_single .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Also zero the column and section that Elementor wraps around them */
.elementor-widget-ds_hero > .elementor-column,
.elementor-widget-ds_hero .elementor-col-100,
.elementor-top-section:has(.elementor-widget-ds_hero),
.elementor-top-section:has(.elementor-widget-ds_page_hero),
.elementor-top-section:has(.elementor-widget-ds_footer),
.elementor-top-section:has(.elementor-widget-ds_nav_header) {
    padding: 0 !important;
    margin: 0 !important;
}

/* Elementor Section that directly contains a DS full-bleed widget —
   remove the default 10px padding Elementor adds to every section */
.elementor-section:has(
    .elementor-widget-ds_hero,
    .elementor-widget-ds_page_hero,
    .elementor-widget-ds_footer,
    .elementor-widget-ds_nav_header,
    .elementor-widget-ds_feature_strip,
    .elementor-widget-ds_services,
    .elementor-widget-ds_cta,
    .elementor-widget-ds_tech_marquee
) > .elementor-container {
    padding: 0 !important;
}

/* Widget-level no-pad class (set via get_html_wrapper_class in PHP) */
.ds-widget-no-pad,
.ds-widget-no-pad .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}