/* ============================================================
   Betterwork Art Gallery — Main Stylesheet
   Primary: DM Sans | Display: Playfair Display
   Colors: Navy gradient + Gold accent | Glass morphism UI
   ============================================================ */

:root {
  --navy-950: #070e1c;
  --navy-900: #0B1729;
  --navy-800: #0f2044;
  --navy-700: #1A3A6A;
  --navy-600: #1e4585;
  --blue-500: #2563EB;
  --blue-400: #3b82f6;
  --gold-600: #9a7a2e;
  --gold-500: #C8A45E;
  --gold-400: #f5c842;
  --gold-300: #f9d77e;
  --bg-light: #F4F8FF;
  --bg-btint: #EBF1FF;
  --text-dark: #0F172A;
  --text-gray: #64748B;
  --glass: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.18);
  --r: 16px;
  --r-sm: 10px;
  --r-lg: 24px;
  --sh: 0 4px 24px rgba(26,58,106,0.09);
  --sh-h: 0 8px 40px rgba(26,58,106,0.18);
  --t: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; color:var(--text-dark); background:#fff; overflow-x:hidden; line-height:1.6; }
img { max-width:100%; display:block; }

/* ── ANNOUNCEMENT BAR ── */
.ann-bar {
  background: linear-gradient(90deg,var(--navy-700),var(--blue-500),var(--navy-700));
  background-size:200% auto;
  animation:gradShift 6s linear infinite;
  color:#fff;
  padding:10px 16px;
  position:relative;
  z-index:200;
  font-size:13.5px;
}
.ann-cta {
  background:var(--gold-500);
  color:var(--navy-900);
  padding:4px 16px;
  border-radius:20px;
  font-weight:700;
  text-decoration:none;
  transition:var(--t);
  white-space:nowrap;
}
.ann-cta:hover { background:var(--gold-300); }
.ann-close { background:none; border:none; color:rgba(255,255,255,.65); cursor:pointer; font-size:15px; padding:0 4px; transition:color .2s; }
.ann-close:hover { color:#fff; }

/* ── STICKY HEADER ── */
.main-header {
  position:sticky; top:0; z-index:1000;
  background:#fff;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(37,99,235,.09);
  transition:var(--t);
}
.main-header.scrolled { box-shadow:0 4px 24px rgba(26,58,106,.1); }

/* Logo */
.logo-link { display:flex; align-items:center; gap:11px; text-decoration:none; }
.logo-brand { font-size:21px; font-weight:800; color:var(--navy-900); letter-spacing:-.5px; line-height:1.1; }
.logo-tag { font-size:11px; color:var(--navy-600); font-weight:500; text-transform:uppercase; letter-spacing:.6px; }

/* Nav links */
.nav-lnk {
  color:var(--text-dark);
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  padding:8px 13px;
  border-radius:8px;
  transition:var(--t);
  position:relative;
}
.nav-lnk::after {
  content:''; position:absolute; bottom:3px; left:50%;
  width:0; height:2px; background:var(--navy-700);
  border-radius:1px; transition:all .3s; transform:translateX(-50%);
}
.nav-lnk:hover { color:var(--navy-700); background:rgba(37,99,235,.06); }
.nav-lnk:hover::after { width:55%; }

/* Dropdown */
.nav-drop-wrap { position:relative; }
.nav-dropdown {
  position:absolute; top:calc(100% + 6px); left:0;
  background:#fff; border:1px solid rgba(37,99,235,.1);
  border-radius:var(--r-sm); padding:8px; min-width:190px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--t); box-shadow:0 16px 40px rgba(26,58,106,.12); z-index:200;
}
.nav-drop-wrap:hover .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dd-item {
  display:flex; align-items:center; gap:10px;
  color:var(--text-dark); text-decoration:none;
  padding:9px 12px; border-radius:6px; font-size:13.5px; font-weight:500; transition:var(--t);
}
.dd-item:hover { background:var(--bg-btint); color:var(--navy-700); }

/* Header CTA */
.btn-hdr-cta {
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));
  color:var(--navy-900); border:none; padding:9px 22px; border-radius:25px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:13.5px;
  cursor:pointer; transition:var(--t); white-space:nowrap;
  box-shadow:0 4px 14px rgba(200,164,94,.3);
}
.btn-hdr-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,164,94,.42); }

/* Mobile menu toggle */
.mob-menu-btn { display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.mob-menu-btn span { width:22px; height:2px; background:var(--navy-900); border-radius:1px; transition:var(--t); }
.mob-menu-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mob-menu-btn.open span:nth-child(2) { opacity:0; }
.mob-menu-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mob-menu { padding:14px 0; border-top:1px solid rgba(37,99,235,.09); background:#fff; }
.mob-menu a { display:block; color:var(--text-dark); text-decoration:none; padding:10px 14px; font-size:15px; font-weight:500; border-radius:8px; transition:var(--t); }
.mob-menu a:hover { background:var(--bg-btint); color:var(--navy-700); }
.mob-cta-btn { display:block; width:100%; background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; border:none; padding:12px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; cursor:pointer; margin-top:8px; transition:var(--t); }
.mob-cta-btn:hover { opacity:.9; }

/* ── HERO BANNER (FULL WIDTH PHOTO) ── */
.hero-section { position:relative; overflow:hidden; }
.hero-slider { position:relative; }

.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s ease;
  overflow:hidden;
}
.hero-slide.active {
  opacity:1; position:relative;
  min-height:52vh;
  display:flex; align-items:center;
}

/* Full-width background picture element */
.banner-bg {
  position:absolute; inset:0; z-index:0;
  display:block; width:100%; height:100%;
}
.banner-bg-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* Gradient overlays */
.banner-overlay {
  position:absolute; inset:0; z-index:1;
}
.ov-dark-left {
  background:linear-gradient(
    90deg,
    rgba(7,14,28,.88) 0%,
    rgba(11,23,41,.75) 40%,
    rgba(11,23,41,.45) 70%,
    rgba(11,23,41,.15) 100%
  );
}
.ov-dark-center {
  background:linear-gradient(
    135deg,
    rgba(7,14,28,.85) 0%,
    rgba(26,58,106,.7) 55%,
    rgba(7,14,28,.82) 100%
  );
}

/* Content sits above overlay */
.hero-inner {
  position:relative; z-index:2;
  display:flex; align-items:center;
  padding-top:44px; padding-bottom:52px;
  max-width:720px;
}

/* Hero content */
.hero-content { max-width:600px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.88); padding:8px 18px; border-radius:25px;
  font-size:13px; font-weight:500; margin-bottom:22px;
  backdrop-filter:blur(8px); animation:heroIn .8s ease .2s both;
}
.badge-pulse { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulseDot 2s infinite; }
.gold-pulse { background:var(--gold-400); }

.hero-h1 {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(20px,2.6vw,34px);
  font-weight:900; color:#fff; line-height:1.15;
  margin-bottom:14px; letter-spacing:-.4px;
  animation:heroIn .8s ease .3s both;
}

/* Wave text */
.wave-txt {
  background:linear-gradient(90deg,#C8A45E,#f9d77e,#C8A45E,#3b82f6,#C8A45E);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:waveTxt 4s linear infinite;
}
.wave-gold {
  background:linear-gradient(90deg,#f9d77e,#C8A45E,#FFE57A,#f9d77e,#C8A45E);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:waveTxt 4s linear infinite;
}
/* Section wave headings */
.wave-hdg {
  background:linear-gradient(90deg,var(--navy-700),var(--blue-500),#C8A45E,var(--blue-500),var(--navy-700));
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:waveTxt 5s linear infinite;
}
.wave-hdg-light {
  background:linear-gradient(90deg,#93c5fd,#bfdbfe,#C8A45E,#bfdbfe,#93c5fd);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:waveTxt 5s linear infinite;
}

.hero-p { font-size:17px; color:rgba(255,255,255,.72); margin-bottom:28px; line-height:1.72; max-width:520px; animation:heroIn .8s ease .4s both; }

/* Hero stats */
.hero-stats { display:flex; align-items:center; gap:18px; margin-bottom:28px; animation:heroIn .8s ease .5s both; }
.hstat { color:#fff; font-size:13.5px; }
.hstat-n { font-family:'DM Sans',sans-serif; font-size:32px; font-weight:700; color:var(--gold-300); }
.hstat-l { opacity:.7; font-size:12.5px; margin-top:2px; }
.hstat-div { width:1px; height:40px; background:rgba(255,255,255,.18); }

/* Hero buttons */
.hero-btns { display:flex; flex-wrap:wrap; gap:13px; margin-bottom:28px; animation:heroIn .8s ease .6s both; }
.btn-hero-gold {
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));
  color:var(--navy-900); border:none; padding:13px 26px; border-radius:30px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; transition:var(--t); display:inline-flex; align-items:center;
  box-shadow:0 6px 20px rgba(200,164,94,.4);
}
.btn-hero-gold:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(200,164,94,.5); }
.btn-hero-outline {
  background:rgba(255,255,255,.1); color:#fff;
  border:1.5px solid rgba(255,255,255,.28); padding:13px 26px; border-radius:30px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; cursor:pointer;
  text-decoration:none; transition:var(--t); display:inline-flex; align-items:center;
  backdrop-filter:blur(8px);
}
.btn-hero-outline:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }

/* Hero checklist */
.hero-checklist { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:26px; animation:heroIn .8s ease .5s both; }
.hck { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.82); font-size:13.5px; font-weight:500; }

/* Hero features grid */
.hero-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:26px; animation:heroIn .8s ease .5s both; }
.hfeat {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:11px 14px;
  display:flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.82); font-size:13px; font-weight:500;
  backdrop-filter:blur(8px);
}
.hfeat i { color:var(--gold-400); font-size:15px; }

/* Hero trust */
.hero-trust { display:flex; align-items:center; gap:13px; animation:heroIn .8s ease .7s both; }
.trust-avs { display:flex; }
.trust-av { width:35px; height:35px; border-radius:50%; border:2px solid #fff; margin-left:-8px; background:var(--navy-700); }
.trust-av:first-child { margin-left:0; }
.trust-stars { color:var(--gold-300); letter-spacing:2px; font-size:14px; }
.trust-lbl { color:rgba(255,255,255,.7); font-size:12.5px; }

/* Hero image panel */
.hero-img-panel { display:flex; align-items:center; justify-content:center; }
.hero-mockup { position:relative; }
.hero-img {
  width:100%; max-width:480px; height:370px; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:0 25px 60px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.1);
  animation:heroIn .9s ease .4s both;
}
.mock-badge {
  position:absolute; background:rgba(255,255,255,.96); border-radius:10px;
  padding:8px 14px; font-size:12px; font-weight:600; color:var(--navy-900);
  display:flex; align-items:center; gap:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.18); animation:floatBadge 3s ease-in-out infinite;
}
.mb1 { top:20px; left:-18px; }
.mb2 { bottom:28px; right:-14px; animation-delay:1.5s; }
.gold-badge { background:var(--gold-400); }

/* Decorative elements */
.hero-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.decor-frame {
  position:absolute; border:1.5px solid rgba(200,164,94,.12); border-radius:4px;
}
.f1 { width:110px; height:145px; top:15%; right:8%; animation:floatFrame 7s ease-in-out infinite; }
.f2 { width:70px; height:95px; top:52%; right:18%; animation:floatFrame 9s ease-in-out infinite reverse; }
.decor-circle {
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.14) 0%,transparent 70%);
  bottom:-60px; right:-60px;
}
.decor-dots {
  position:absolute; top:0; right:0; width:200px; height:200px;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);
}
.decor-brush {
  position:absolute; border-radius:60% 40% 70% 30%; opacity:.04;
}
.b1 { width:380px; height:180px; background:linear-gradient(135deg,#C8A45E,transparent); top:10%; right:3%; transform:rotate(-20deg); animation:floatFrame 10s ease-in-out infinite; }
.b2 { width:280px; height:130px; background:linear-gradient(135deg,#2563EB,transparent); bottom:18%; right:12%; transform:rotate(15deg); animation:floatFrame 8s ease-in-out infinite reverse; }
.decor-gallery-lines {
  position:absolute; right:0; top:0; bottom:0; width:50%;
  background-repeating-linear-gradient: repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px);
  opacity:.6;
}

/* Slider controls */
.slider-controls {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; align-items:center; gap:14px;
}
.sl-btn {
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer;
  transition:var(--t); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.sl-btn:hover { background:rgba(255,255,255,.24); transform:scale(1.1); }
.sl-dots { display:flex; gap:7px; align-items:center; }
.sl-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.38); border:none; cursor:pointer; transition:var(--t); padding:0; }
.sl-dot.active { background:var(--gold-400); width:24px; border-radius:4px; }

/* Hero wave */
.hero-wave { position:absolute; bottom:0; left:0; right:0; z-index:5; }
.hero-wave svg { display:block; width:100%; }

/* ── TRUST BAR ── */
.trust-bar { background:#fff; padding:28px 0; box-shadow:0 4px 20px rgba(0,0,0,.05); position:relative; z-index:4; }
.trust-items { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.titem { display:flex; align-items:center; gap:13px; padding:11px 26px; }
.ticon {
  width:44px; height:44px;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; flex-shrink:0;
}
.shopify-ic { background:linear-gradient(135deg,#5a8a3e,#95BF47); }
.tnum { font-family:'DM Sans',sans-serif; font-size:26px; font-weight:700; color:var(--navy-700); line-height:1; }
.shopify-c { color:#95BF47; }
.tlbl { font-size:11.5px; color:var(--text-gray); font-weight:500; }
.tdiv { width:1px; height:48px; background:#e2e8f0; }

/* ── SECTION COMMONS ── */
.sec-light { background:var(--bg-light); padding:80px 0; position:relative; }
.sec-btint { background:var(--bg-btint); padding:80px 0; position:relative; }
.sec-dark { background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 100%); padding:80px 0; position:relative; }
.sec-dark-blue { background:linear-gradient(135deg,#0c1a32 0%,#1A3A6A 100%); padding:80px 0; position:relative; }

.sec-hdr { text-align:center; max-width:700px; margin:0 auto 58px; }
.sec-tag {
  display:inline-block; background:rgba(37,99,235,.1); color:var(--navy-600);
  padding:6px 20px; border-radius:20px; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:14px;
}
.tag-gold { background:rgba(200,164,94,.14); color:var(--gold-600); }
.tag-green { background:rgba(34,197,94,.1); color:#16a34a; }

.sec-title {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(27px,3.5vw,44px);
  font-weight:800; color:var(--text-dark); line-height:1.18; margin-bottom:14px; letter-spacing:-.4px;
}
.sec-sub { font-size:16.5px; color:var(--text-gray); line-height:1.72; }
.sec-wave { position:absolute; bottom:0; left:0; right:0; }
.sec-wave svg { display:block; width:100%; }

/* ── SERVICES ── */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.svc-card {
  background:#fff; border-radius:var(--r); padding:30px;
  border:1px solid rgba(37,99,235,.07); transition:var(--t); position:relative; overflow:hidden;
}
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--navy-700),var(--blue-500));
  transform:scaleX(0); transition:transform .3s ease;
}
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); border-color:transparent; }
.svc-card:hover::before { transform:scaleX(1); }
.svc-icon {
  width:56px; height:56px;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin-bottom:18px;
}
.shopify-svc { background:linear-gradient(135deg,#5a8a3e,#95BF47); }
.purple-svc { background:linear-gradient(135deg,#7c3aed,#a78bfa); }
.orange-svc { background:linear-gradient(135deg,#ea580c,#fb923c); }
.teal-svc { background:linear-gradient(135deg,#0d9488,#2dd4bf); }
.gold-svc { background:linear-gradient(135deg,var(--gold-600),var(--gold-400)); }
.svc-card h3 { font-size:19px; font-weight:700; color:var(--text-dark); margin-bottom:11px; }
.svc-card p { font-size:14.5px; color:var(--text-gray); line-height:1.65; margin-bottom:14px; }
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.svc-tags span { background:var(--bg-btint); color:var(--navy-600); padding:3px 10px; border-radius:12px; font-size:11.5px; font-weight:600; }
.svc-lnk { background:none; border:none; color:var(--navy-600); font-family:'DM Sans',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:gap .2s; padding:0; }
.svc-lnk:hover { gap:9px; }

/* ── WHY BETTERWORK ── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.why-card {
  background:rgba(255,255,255,.72); border-radius:var(--r); padding:30px;
  border:1px solid rgba(255,255,255,.85); transition:var(--t); position:relative;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.why-card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); background:#fff; }
.why-no {
  font-family:'DM Sans',sans-serif; font-size:48px; font-weight:800;
  color:rgba(37,99,235,.07); position:absolute; top:18px; right:22px; line-height:1;
}
.why-ico {
  width:52px; height:52px;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; margin-bottom:16px;
}
.why-card h3 { font-size:17.5px; font-weight:700; color:var(--text-dark); margin-bottom:9px; }
.why-card p { font-size:14px; color:var(--text-gray); line-height:1.65; }

/* ── HANDBOOK ── */
.handbook-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:center; }
.book-3d { perspective:1000px; margin-bottom:22px; }
.book-cover {
  width:195px; height:255px;
  background:linear-gradient(135deg,var(--gold-600),var(--gold-400),var(--gold-500));
  border-radius:8px 16px 16px 8px;
  box-shadow:8px 8px 30px rgba(0,0,0,.4),inset -3px 0 10px rgba(0,0,0,.2);
  transform:rotateY(-16deg); transition:transform .4s ease; margin:0 auto;
}
.book-cover:hover { transform:rotateY(-8deg); }
.book-inner { padding:24px 20px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.book-ico { font-size:32px; color:var(--navy-900); margin-bottom:6px; }
.book-title-t { font-family:'DM Sans',sans-serif; font-size:21px; font-weight:800; color:var(--navy-900); line-height:1.1; }
.book-sub-t { font-size:11px; color:var(--navy-800); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.book-pp { font-size:11px; color:rgba(15,31,68,.7); font-weight:500; }
.book-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.bpill { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.82); padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:6px; }
.bpill i { color:var(--gold-400); }

.hbook-title { font-family:'DM Sans',sans-serif; font-size:clamp(24px,3vw,38px); font-weight:800; color:#fff; line-height:1.18; margin-bottom:13px; }
.hbook-desc { color:rgba(255,255,255,.68); font-size:15.5px; line-height:1.68; margin-bottom:26px; }
.hbook-form {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:26px; backdrop-filter:blur(10px);
}
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fgrp { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.fgrp label { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78); }
.fgrp input, .fgrp select { padding:11px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; font-family:'DM Sans',sans-serif; font-size:14.5px; transition:border-color .2s; outline:none; }
.fgrp input::placeholder { color:rgba(255,255,255,.35); }
.fgrp input:focus, .fgrp select:focus { border-color:var(--gold-400); background:rgba(255,255,255,.11); }
.fgrp select option { background:var(--navy-900); color:#fff; }
.opt { color:rgba(255,255,255,.38); font-size:11px; font-weight:400; }
.form-prv { text-align:center; font-size:11.5px; color:rgba(255,255,255,.45); margin-top:9px; }

/* ── CLIENTS ── */
.marquee-wrap { overflow:hidden; position:relative; margin-bottom:36px; }
.marquee-fade-l { position:absolute; top:0; bottom:0; left:0; width:80px; background:linear-gradient(to right,var(--bg-light),transparent); z-index:2; }
.marquee-fade-r { position:absolute; top:0; bottom:0; right:0; width:80px; background:linear-gradient(to left,var(--bg-light),transparent); z-index:2; }
.marquee-track { display:flex; gap:13px; animation:marqueeScroll 40s linear infinite; width:max-content; padding:10px 0; }
.mq-pill { background:#fff; border:1px solid rgba(37,99,235,.11); color:var(--navy-700); padding:9px 18px; border-radius:25px; font-size:13.5px; font-weight:600; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.clients-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:11px; }
.cli-card { background:#fff; border:1px solid rgba(37,99,235,.07); border-radius:11px; padding:13px 16px; display:flex; flex-direction:column; gap:2px; transition:var(--t); }
.cli-card:hover { border-color:var(--blue-500); box-shadow:0 4px 16px rgba(37,99,235,.09); transform:translateY(-2px); }
.cli-n { font-size:11px; font-weight:700; color:var(--blue-500); letter-spacing:1px; }
.cli-card strong { font-size:13.5px; font-weight:700; color:var(--text-dark); }
.cli-card span { font-size:11.5px; color:var(--text-gray); }

/* ── PORTFOLIO ── */
.port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:22px; }
.port-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); overflow:hidden; transition:var(--t); }
.port-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.3); border-color:rgba(200,164,94,.28); }
.port-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/10; }
.port-img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.port-card:hover .port-img { transform:scale(1.06); }
.port-ov { position:absolute; inset:0; background:rgba(11,23,41,.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.port-card:hover .port-ov { opacity:1; }
.port-btn { background:var(--gold-500); color:var(--navy-900); padding:9px 22px; border-radius:25px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:13.5px; border:none; cursor:pointer; transition:var(--t); }
.port-btn:hover { background:var(--gold-300); transform:scale(1.05); }
.port-flag { position:absolute; top:11px; right:11px; background:rgba(255,255,255,.92); border-radius:6px; padding:4px 10px; font-size:11.5px; font-weight:600; }
.port-info { padding:18px; }
.port-info h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:3px; }
.port-info p { font-size:12.5px; color:rgba(255,255,255,.48); margin-bottom:10px; }
.port-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.port-tags span { background:rgba(37,99,235,.2); color:#93c5fd; padding:3px 9px; border-radius:9px; font-size:11px; font-weight:600; }
.port-url { color:rgba(255,255,255,.38); font-size:12px; display:inline-flex; align-items:center; gap:5px; }

/* ── TECH STACK ── */
.tech-wrapper { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); border:1px solid rgba(37,99,235,.07); }
.tech-tabs-nav { display:flex; background:var(--bg-btint); border-bottom:1px solid rgba(37,99,235,.09); overflow-x:auto; scrollbar-width:none; }
.tech-tabs-nav::-webkit-scrollbar { display:none; }
.ttab {
  padding:15px 22px; background:none; border:none; font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:600; color:var(--text-gray); cursor:pointer; transition:var(--t);
  white-space:nowrap; display:flex; align-items:center; gap:7px; border-bottom:3px solid transparent;
}
.ttab:hover { color:var(--navy-600); background:rgba(37,99,235,.04); }
.ttab.active { color:var(--navy-700); border-bottom-color:var(--blue-500); background:#fff; }
.tech-tab-content { padding:36px; display:none; }
.tech-tab-content.active { display:block; }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:18px; }
.ttech { display:flex; flex-direction:column; align-items:center; gap:9px; }
.ttech:hover .ttech-ic { transform:scale(1.1); }
.ttech-ic {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; color:#fff; transition:var(--t);
  box-shadow:0 4px 12px rgba(37,99,235,.18);
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
}
.ti-react { background:linear-gradient(135deg,#0d7390,#61dafb); color:#0d7390; }
.ti-dark { background:linear-gradient(135deg,#1e293b,#334155); }
.ti-green { background:linear-gradient(135deg,#15803d,#22c55e); }
.ti-teal { background:linear-gradient(135deg,#0d9488,#2dd4bf); }
.ti-orange { background:linear-gradient(135deg,#c2410c,#f97316); }
.ti-blue { background:linear-gradient(135deg,#1d4ed8,#60a5fa); }
.ti-yellow { background:linear-gradient(135deg,#ca8a04,#facc15); color:#1e293b; }
.ti-shopify { background:linear-gradient(135deg,#5a8a3e,#95BF47); }
.ti-purple { background:linear-gradient(135deg,#6d28d9,#a78bfa); }
.ti-red { background:linear-gradient(135deg,#b91c1c,#f87171); }
.ti-sky { background:linear-gradient(135deg,#0284c7,#38bdf8); }
.ti-red-d { background:linear-gradient(135deg,#a50000,#dc3545); }
.ti-fb { background:linear-gradient(135deg,#1877F2,#4267B2); }
.ti-analytics { background:linear-gradient(135deg,#e37400,#fbbc04); color:#1e293b; }
.ttech span { font-size:12.5px; font-weight:600; color:var(--text-dark); text-align:center; }

/* ── SOFTWARE ── */
.sw-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:22px; }
.sw-card { background:#fff; border-radius:var(--r); padding:26px; border:1px solid rgba(37,99,235,.07); transition:var(--t); text-align:center; }
.sw-card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); border-color:rgba(37,99,235,.14); }
.sw-ico { width:62px; height:62px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:25px; color:#fff; margin:0 auto 14px; }
.sw-blue { background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); }
.sw-teal { background:linear-gradient(135deg,#0d9488,#2dd4bf); }
.sw-purple { background:linear-gradient(135deg,#6d28d9,#a78bfa); }
.sw-orange { background:linear-gradient(135deg,#c2410c,#f97316); }
.sw-gold { background:linear-gradient(135deg,var(--gold-600),var(--gold-400)); }
.sw-card h3 { font-size:18px; font-weight:700; color:var(--text-dark); margin-bottom:9px; }
.sw-card p { font-size:13.5px; color:var(--text-gray); line-height:1.62; margin-bottom:12px; }
.sw-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:12px; }
.sw-tags span { background:var(--bg-btint); color:var(--navy-600); padding:3px 9px; border-radius:9px; font-size:11px; font-weight:600; }
.sw-stars { color:#f59e0b; letter-spacing:2px; font-size:15px; display:block; margin-bottom:4px; }
.sw-best { font-size:11px; font-weight:600; color:var(--navy-600); background:var(--bg-btint); padding:2px 9px; border-radius:9px; }

/* ── PRICING ── */
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; align-items:start; }
.price-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:34px; position:relative; transition:var(--t); }
.price-card:hover { border-color:rgba(200,164,94,.28); transform:translateY(-4px); }
.price-popular { background:rgba(255,255,255,.12); border-color:rgba(200,164,94,.38); transform:scale(1.02); }
.price-popular:hover { transform:scale(1.02) translateY(-4px); }
.price-popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold-500); color:var(--navy-900); padding:4px 18px; border-radius:12px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.price-badge { display:inline-block; background:rgba(255,255,255,.14); color:rgba(255,255,255,.78); padding:5px 15px; border-radius:14px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.price-badge-gold { background:rgba(200,164,94,.2); color:var(--gold-300); }
.price-badge-purple { background:rgba(167,139,250,.2); color:#c4b5fd; }
.price-amt { display:flex; align-items:baseline; gap:3px; margin-bottom:14px; }
.price-sym { font-size:22px; font-weight:700; color:rgba(255,255,255,.65); line-height:1; }
.price-num { font-family:'DM Sans',sans-serif; font-size:54px; font-weight:800; color:#fff; line-height:1; }
.price-per { font-size:13.5px; color:rgba(255,255,255,.48); margin-left:4px; }
.price-label-t { font-family:'DM Sans',sans-serif; font-size:40px; font-weight:800; color:#fff; line-height:1; }
.price-desc { color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.6; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.1); }
.price-feats { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
.price-feats li { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.78); font-size:13.5px; }
.price-feats li i { color:var(--gold-400); flex-shrink:0; }
.price-btn-outline { width:100%; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; padding:12px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer; transition:var(--t); }
.price-btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }
.price-btn-gold { width:100%; background:linear-gradient(135deg,var(--gold-500),var(--gold-400)); border:none; color:var(--navy-900); padding:12px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:800; font-size:14.5px; cursor:pointer; transition:var(--t); }
.price-btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,164,94,.4); }
.price-guarantee { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:22px 36px; margin-top:36px; }
.guarantee-row { display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
.g-item { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.72); font-size:13.5px; font-weight:600; }
.g-item i { color:var(--gold-400); font-size:17px; }

/* ── TESTIMONIALS ── */
.test-slider-wrap { max-width:820px; margin:0 auto; }
.test-slider { position:relative; min-height:280px; }
.test-card { display:none; background:#fff; border-radius:var(--r-lg); padding:38px; box-shadow:var(--sh-h); border:1px solid rgba(37,99,235,.07); animation:fadeSlide .5s ease; }
.test-card.active { display:block; }
.test-stars { color:#f59e0b; font-size:20px; letter-spacing:3px; margin-bottom:18px; }
.test-card blockquote { font-size:17px; color:var(--text-dark); line-height:1.72; margin-bottom:26px; font-style:italic; border-left:4px solid var(--blue-500); padding-left:18px; }
.test-auth { display:flex; align-items:center; gap:14px; }
.test-av { width:54px; height:54px; border-radius:50%; border:3px solid var(--bg-btint); flex-shrink:0; }
.test-auth strong { display:block; font-size:16px; font-weight:700; color:var(--text-dark); }
.test-auth span { display:block; font-size:13.5px; color:var(--text-gray); }
.test-loc { color:var(--navy-600) !important; font-size:12.5px !important; font-weight:500 !important; }
.test-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; }
.test-btn { width:44px; height:44px; border-radius:50%; border:2px solid rgba(37,99,235,.2); background:#fff; color:var(--navy-600); cursor:pointer; transition:var(--t); display:flex; align-items:center; justify-content:center; }
.test-btn:hover { background:var(--navy-600); color:#fff; border-color:var(--navy-600); }
.test-dots { display:flex; gap:7px; }
.tdot { width:10px; height:10px; border-radius:50%; background:rgba(37,99,235,.18); border:none; cursor:pointer; transition:var(--t); }
.tdot.active { background:var(--blue-500); width:28px; border-radius:5px; }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px; }
.blog-featured { grid-column:span 2; }
.blog-card { background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid rgba(37,99,235,.07); transition:var(--t); }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); }
.blog-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; }
.blog-img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-card:hover .blog-img { transform:scale(1.05); }
.blog-cat { position:absolute; top:13px; left:13px; background:var(--navy-700); color:#fff; padding:4px 12px; border-radius:14px; font-size:11.5px; font-weight:700; }
.blog-cat-seo { background:#7c3aed; }
.blog-cat-tech { background:#0d9488; }
.blog-cat-guide { background:#c2410c; }
.blog-cat-mkt { background:#16a34a; }
.blog-body { padding:22px; }
.blog-meta { display:flex; gap:13px; margin-bottom:10px; flex-wrap:wrap; }
.blog-meta span { font-size:11.5px; color:var(--text-gray); display:flex; align-items:center; gap:4px; }
.trending-lbl { color:#ef4444 !important; font-weight:600 !important; }
.blog-body h3 { font-size:16px; font-weight:700; color:var(--text-dark); line-height:1.42; margin-bottom:9px; }
.blog-featured .blog-body h3 { font-size:21px; }
.blog-body p { font-size:13.5px; color:var(--text-gray); line-height:1.65; margin-bottom:14px; }
.blog-read { background:none; border:none; color:var(--navy-600); font-family:'DM Sans',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:gap .2s; padding:0; }
.blog-read:hover { gap:9px; }

/* ── SEO AUDIT ── */
.seo-banner {
  background:#fff; border-radius:var(--r-lg); padding:52px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center;
  box-shadow:var(--sh-h); border:1px solid rgba(37,99,235,.07);
  position:relative; overflow:hidden;
}
.seo-banner::before { content:''; position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(to bottom,#16a34a,#22c55e); }
.seo-banner h2 { font-family:'DM Sans',sans-serif; font-size:clamp(22px,2.8vw,34px); font-weight:800; color:var(--text-dark); line-height:1.2; margin-bottom:12px; }
.seo-banner p { color:var(--text-gray); font-size:15.5px; line-height:1.65; margin-bottom:18px; }
.seo-list { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.seo-list li { display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--text-dark); font-weight:500; }
.score-wrap { display:flex; align-items:center; gap:18px; justify-content:center; flex-wrap:wrap; }
.score-circle { position:relative; width:100px; height:100px; }
.score-circle svg { width:100%; height:100%; }
.score-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; font-size:26px; font-weight:800; color:var(--navy-700); }
.score-high { color:#16a34a; }
.score-lbl { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:600; color:var(--text-gray); white-space:nowrap; }

/* ── FAQ ── */
.faq-wrap { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:11px; }
.faq-item { background:#fff; border-radius:var(--r-sm); border:1px solid rgba(37,99,235,.07); overflow:hidden; transition:var(--t); }
.faq-item:hover { border-color:rgba(37,99,235,.18); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:none; border:none; font-family:'DM Sans',sans-serif; font-size:15.5px; font-weight:600; color:var(--text-dark); cursor:pointer; text-align:left; gap:14px; transition:color .2s; }
.faq-q:hover { color:var(--navy-700); }
.faq-ico { flex-shrink:0; color:var(--blue-500); transition:transform .3s ease; }
.faq-item.open .faq-ico { transform:rotate(180deg); }
.faq-ans { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-item.open .faq-ans { max-height:300px; }
.faq-ans p { padding:0 22px 18px; font-size:14.5px; color:var(--text-gray); line-height:1.72; }

/* ── ABOUT ── */
.about-wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.about-ttl { font-family:'DM Sans',sans-serif; font-size:clamp(26px,3.2vw,42px); font-weight:800; line-height:1.18; margin-bottom:18px; color:#fff; }
.about-txt { color:rgba(255,255,255,.68); font-size:15.5px; line-height:1.72; margin-bottom:16px; }
.about-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; padding:18px; background:rgba(255,255,255,.05); border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.a-stat { text-align:center; }
.a-num { display:block; font-family:'DM Sans',sans-serif; font-size:28px; font-weight:800; color:var(--gold-400); line-height:1; margin-bottom:3px; }
.a-stat span:last-child { font-size:11.5px; color:rgba(255,255,255,.55); font-weight:500; }
.about-contacts { display:flex; flex-direction:column; gap:11px; }
.alink { display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.72); font-size:14.5px; text-decoration:none; transition:color .2s; }
.alink:hover { color:#fff; }

/* Consultation card */
.consult-card { background:#fff; border-radius:var(--r-lg); padding:34px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.consult-card h3 { font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:var(--text-dark); margin-bottom:7px; }
.consult-card p { color:var(--text-gray); font-size:14.5px; margin-bottom:22px; }
.fgrp-light { margin-bottom:13px; }
.form-inp { width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:9px; font-family:'DM Sans',sans-serif; font-size:14.5px; color:var(--text-dark); transition:border-color .2s; outline:none; }
.form-inp:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.form-sel { cursor:pointer; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; border:none; padding:13px 30px; border-radius:30px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; transition:var(--t); box-shadow:0 6px 20px rgba(37,99,235,.28); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(37,99,235,.38); }
.btn-gold { display:inline-flex; align-items:center; background:linear-gradient(135deg,var(--gold-500),var(--gold-400)); color:var(--navy-900); border:none; padding:13px 30px; border-radius:30px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; transition:var(--t); box-shadow:0 6px 20px rgba(200,164,94,.28); }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(200,164,94,.38); }
.btn-green { display:inline-flex; align-items:center; background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; border:none; padding:13px 30px; border-radius:30px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; transition:var(--t); box-shadow:0 6px 20px rgba(34,197,94,.28); }
.btn-green:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(34,197,94,.38); }
.btn-gold-block { display:flex; align-items:center; justify-content:center; width:100%; background:linear-gradient(135deg,var(--gold-500),var(--gold-400)); color:var(--navy-900); border:none; padding:13px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; transition:var(--t); box-shadow:0 4px 14px rgba(200,164,94,.28); }
.btn-gold-block:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,164,94,.4); }

/* ── FOOTER ── */
.footer { background:var(--navy-900); }
.footer-top { padding:56px 0 38px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr; gap:38px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-family:'DM Sans',sans-serif; font-size:21px; font-weight:800; color:#fff; }
.footer-brand p { font-size:13.5px; color:rgba(255,255,255,.5); line-height:1.72; margin-bottom:18px; }
.footer-socials { display:flex; gap:9px; margin-bottom:18px; }
.footer-socials a { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:var(--t); font-size:13.5px; }
.footer-socials a:hover { background:var(--navy-600); color:#fff; transform:translateY(-2px); }
.footer-bdgs { display:flex; gap:7px; flex-wrap:wrap; }
.fbdg { background:rgba(255,255,255,.07); color:rgba(255,255,255,.65); padding:5px 11px; border-radius:6px; font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:5px; }
.footer-col h4 { font-size:14.5px; font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:.3px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.footer-col ul a { color:rgba(255,255,255,.5); text-decoration:none; font-size:13.5px; transition:color .2s; }
.footer-col ul a:hover { color:rgba(255,255,255,.88); }
.footer-contacts { display:flex; flex-direction:column; gap:13px; }
.fcon { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; }
.fcon i { font-size:15px; margin-top:2px; flex-shrink:0; }
.fcon strong { display:block; color:rgba(255,255,255,.78); font-size:12.5px; margin-bottom:2px; }
.fcon a, .fcon span { color:rgba(255,255,255,.5); text-decoration:none; font-size:12.5px; transition:color .2s; }
.fcon a:hover { color:rgba(255,255,255,.88); }
.footer-btm { padding:18px 0; background:rgba(0,0,0,.2); }
.footer-btm p { color:rgba(255,255,255,.38); font-size:12.5px; }
.footer-btm-lnks { display:flex; gap:18px; }
.footer-btm-lnks a { color:rgba(255,255,255,.38); text-decoration:none; font-size:12.5px; transition:color .2s; }
.footer-btm-lnks a:hover { color:rgba(255,255,255,.65); }

/* ── CONTACT FORM MODAL ── */
.cform-overlay { position:fixed; inset:0; background:rgba(11,23,41,.82); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.cform-overlay.hidden { display:none; }
.cform-modal {
  background:var(--navy-900); border-radius:var(--r-lg); padding:38px;
  max-width:510px; width:100%; position:relative;
  border:1px solid rgba(255,255,255,.11); box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:modalIn .4s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh; overflow-y:auto;
}
.cform-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.1); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--t); }
.cform-close:hover { background:rgba(255,255,255,.2); }
.cform-header { text-align:center; margin-bottom:26px; }
.cform-ico { width:54px; height:54px; background:linear-gradient(135deg,var(--gold-500),var(--gold-400)); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; color:var(--navy-900); margin:0 auto 14px; }
.cform-header h3 { font-family:'DM Sans',sans-serif; font-size:21px; font-weight:800; color:#fff; margin-bottom:7px; }
.cform-header p { font-size:13.5px; color:rgba(255,255,255,.55); }
.cform-body .fgrp { margin-bottom:13px; }
.cform-body select { width:100%; padding:11px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-family:'DM Sans',sans-serif; font-size:14.5px; cursor:pointer; outline:none; }
.cform-body select option { background:var(--navy-900); color:#fff; }

/* ── FLOATING WIDGETS ── */
.wa-float {
  position:fixed; bottom:80px; left:22px; z-index:9000;
  width:56px; height:56px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.4); transition:var(--t);
  animation:pulseWA 3s infinite;
}
.wa-float:hover { transform:scale(1.14); box-shadow:0 8px 30px rgba(37,211,102,.6); }
.wa-tip {
  position:absolute; left:64px; background:#25D366; color:#fff; padding:7px 12px;
  border-radius:7px; font-size:12.5px; font-weight:600; white-space:nowrap;
  opacity:0; transform:translateX(-8px); transition:var(--t); pointer-events:none;
  font-family:'DM Sans',sans-serif;
}
.wa-float:hover .wa-tip { opacity:1; transform:translateX(0); }

.quote-float {
  position:fixed; bottom:22px; right:22px; z-index:9000;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  color:#fff; border:none; padding:13px 20px; border-radius:30px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; box-shadow:0 6px 20px rgba(37,99,235,.38); transition:var(--t);
  display:flex; align-items:center; gap:7px;
}
.quote-float:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(37,99,235,.5); }

.scr-top {
  position:fixed; bottom:78px; right:22px; z-index:9000;
  width:42px; height:42px; background:#fff; border:1px solid rgba(37,99,235,.18);
  color:var(--navy-600); border-radius:50%; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.09); display:flex; align-items:center; justify-content:center;
  transition:var(--t);
}
.scr-top:hover { background:var(--navy-600); color:#fff; transform:translateY(-2px); }
.scr-top.hidden { opacity:0; pointer-events:none; }

/* ── RESPONSIVE ── */
@media(max-width:1200px){
  .hero-inner { grid-template-columns:1fr; }
  .hero-img-panel { display:none; }
  .hero-content { max-width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:1024px){
  .handbook-wrap { grid-template-columns:1fr; gap:38px; }
  .about-wrap { grid-template-columns:1fr; }
  .seo-banner { grid-template-columns:1fr; }
  .blog-featured { grid-column:span 1; }
}
@media(max-width:768px){
  .hero-h1 { font-size:20px; }
  .hero-stats { flex-wrap:wrap; gap:10px; }
  .hstat-div { display:none; }
  .form-row-2 { grid-template-columns:1fr; }
  .trust-bar { padding:20px 0; }
  .titem { padding:8px 14px; }
  .tdiv { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .about-stats-row { grid-template-columns:repeat(2,1fr); }
  .price-popular { transform:none; }
  .guarantee-row { gap:18px; }
  .clients-grid { grid-template-columns:repeat(2,1fr); }
  .hero-checklist, .hero-feat-grid { grid-template-columns:1fr; }
  .seo-banner { padding:28px; }
}
@media(max-width:540px){
  .sec-light,.sec-btint,.sec-dark,.sec-dark-blue { padding:56px 0; }
  .hero-h1 { font-size:17px; }
  .blog-grid,.port-grid { grid-template-columns:1fr; }
  .clients-grid { grid-template-columns:1fr; }
  .sw-grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .tech-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .consult-card { padding:22px; }
  .price-grid { grid-template-columns:1fr; }
  .ann-bar { font-size:12px; }
}

/* ============================================================
   REVAMP ADDITIONS — Betterwork Art Gallery v2
   ============================================================ */

/* ── HEADER LOGO ── */
.header-logo { height:46px; width:auto; object-fit:contain; }

/* ── REDUCE ALL SECTION PADDING BY ~50% ── */
.sec-light,.sec-btint,.sec-dark,.sec-dark-blue,
.hb-section,.test-section,.seo-section,.tv2-section { padding:40px 0; }
.sec-hdr { margin-bottom:32px; }

/* ── LIGHTEN SECTION BACKGROUNDS ── */
:root {
  --bg-light:#FAFBFF;
  --bg-btint:#F3F6FF;
}

/* ── TRUST BAR V2 ── */
.tv2-section { background:var(--bg-light); padding:36px 0; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.tv2-headline { text-align:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-gray); margin-bottom:24px; }
.tv2-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.tv2-card {
  background:#fff; border-radius:14px; padding:20px 16px; text-align:center;
  border:1px solid rgba(37,99,235,.07); transition:var(--t);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.tv2-card:hover { transform:translateY(-4px); box-shadow:var(--sh-h); border-color:transparent; }
.tv2-icon-box {
  width:46px; height:46px; border-radius:12px;
  background:rgba(var(--ic, 37,99,235),.1);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--ic, #2563EB);
}
/* CSS var() doesn't work with color directly in FA, use style inline */
.tv2-icon-box { background:rgba(37,99,235,.1); color:#2563EB; }
.tv2-card:nth-child(2) .tv2-icon-box { background:rgba(245,158,11,.1); color:#f59e0b; }
.tv2-card:nth-child(3) .tv2-icon-box { background:rgba(245,158,11,.1); color:#f59e0b; }
.tv2-card:nth-child(4) .tv2-icon-box { background:rgba(139,92,246,.1); color:#8b5cf6; }
.tv2-card:nth-child(5) .tv2-icon-box { background:rgba(149,191,71,.1); color:#95BF47; }
.tv2-card:nth-child(6) .tv2-icon-box { background:rgba(236,72,153,.1); color:#ec4899; }
.tv2-stat { display:flex; align-items:baseline; gap:1px; }
.tv2-num { font-family:'DM Sans',sans-serif; font-size:28px; font-weight:800; color:var(--navy-700); line-height:1; }
.tv2-plus { font-family:'DM Sans',sans-serif; font-size:20px; font-weight:700; color:var(--navy-700); }
.tv2-lbl { font-size:13px; font-weight:700; color:var(--text-dark); }
.tv2-sub { font-size:11px; color:var(--text-gray); }
@media(max-width:900px){ .tv2-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:540px){ .tv2-grid { grid-template-columns:repeat(2,1fr); } }

/* ── WHY IMAGE CARDS ── */
.wic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.wic-card {
  background:#fff; border-radius:var(--r); overflow:hidden;
  border:1px solid rgba(37,99,235,.07); transition:var(--t);
  box-shadow:var(--sh);
}
.wic-card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); border-color:transparent; }
.wic-img-wrap { position:relative; aspect-ratio:16/10; overflow:hidden; }
.wic-img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.wic-card:hover .wic-img { transform:scale(1.06); }
.wic-img-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(11,23,41,.4) 0%,transparent 60%); }
.wic-badge {
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));
  color:var(--navy-900); width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:800;
}
.wic-body { padding:20px; }
.wic-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  color:#fff; font-size:15px; margin-bottom:12px;
}
.wic-body h3 { font-size:17px; font-weight:700; color:var(--text-dark); margin-bottom:8px; }
.wic-body p { font-size:13.5px; color:var(--text-gray); line-height:1.6; }
@media(max-width:900px){ .wic-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .wic-grid { grid-template-columns:1fr; } }

/* ── HANDBOOK REVAMP ── */
.hb-section { position:relative; background:linear-gradient(135deg,#0B1729 0%,#1A3A6A 55%,#0f2044 100%); padding:44px 0; overflow:hidden; }
.hb-bg-art { position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px); }
.hb-wrap { display:grid; grid-template-columns:1fr 1.3fr; gap:50px; align-items:center; }
/* Book visual */
.hb-book-visual { display:flex; flex-direction:column; align-items:center; gap:20px; }
.hb-book-shadow { width:160px; height:12px; background:rgba(0,0,0,.3); border-radius:50%; filter:blur(6px); margin-top:-8px; }
.hb-book-main { position:relative; display:flex; perspective:800px; }
.hb-book-spine { width:16px; background:linear-gradient(to right,#7a5a1e,#C8A45E); border-radius:3px 0 0 3px; box-shadow:-3px 0 10px rgba(0,0,0,.3); }
.hb-book-cover {
  width:190px; min-height:250px;
  background:linear-gradient(135deg,#b8943f,#f5c842,#C8A45E);
  border-radius:0 10px 10px 0;
  padding:22px 18px; display:flex; flex-direction:column; gap:8px;
  box-shadow:8px 8px 28px rgba(0,0,0,.4);
  transform:rotateY(-12deg); transition:transform .4s;
}
.hb-book-cover:hover { transform:rotateY(-5deg); }
.hb-cover-top { display:flex; align-items:center; justify-content:space-between; }
.hb-cover-icon { font-size:26px; color:var(--navy-900); }
.hb-cover-badge { background:var(--navy-900); color:var(--gold-400); font-size:9px; font-weight:800; padding:3px 8px; border-radius:4px; letter-spacing:.5px; }
.hb-cover-title { font-family:'DM Sans',sans-serif; font-size:26px; font-weight:900; color:var(--navy-900); line-height:1; }
.hb-cover-sub { font-size:13px; font-weight:700; color:rgba(15,31,68,.8); line-height:1.3; }
.hb-cover-pages { font-size:10px; color:rgba(15,31,68,.6); font-weight:500; margin-top:auto; }
.hb-contents { width:100%; }
.hb-contents-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.5); margin-bottom:12px; }
.hb-content-list { display:flex; flex-direction:column; gap:10px; }
.hbc-item { display:flex; align-items:center; gap:12px; }
.hbc-ico { width:34px; height:34px; background:rgba(37,99,235,.15); color:var(--blue-400); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.hbc-item strong { display:block; font-size:13.5px; color:rgba(255,255,255,.88); font-weight:600; }
.hbc-item span { font-size:12px; color:rgba(255,255,255,.5); }
/* Form card */
.hb-form-card { background:#fff; border-radius:var(--r-lg); padding:32px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.hb-form-tag { display:inline-block; background:rgba(200,164,94,.12); color:var(--gold-600); padding:5px 14px; border-radius:15px; font-size:12px; font-weight:700; margin-bottom:14px; }
.hb-form-title { font-family:'DM Sans',sans-serif; font-size:clamp(20px,2.5vw,28px); font-weight:800; color:var(--text-dark); line-height:1.2; margin-bottom:9px; }
.hb-form-sub { font-size:14px; color:var(--text-gray); line-height:1.6; margin-bottom:20px; }
.hbf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.hbf-grp { display:flex; flex-direction:column; gap:5px; }
.hbf-grp label { font-size:12px; font-weight:600; color:var(--text-dark); }
.hbf-grp input { padding:10px 13px; border:1.5px solid #e2e8f0; border-radius:9px; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text-dark); outline:none; transition:border-color .2s; }
.hbf-grp input:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.hb-submit-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:100%; background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  color:#fff; border:none; padding:14px; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px;
  cursor:pointer; transition:var(--t); box-shadow:0 4px 14px rgba(37,99,235,.3);
  margin-top:4px;
}
.hb-submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,.4); }
.hb-submit-note { font-size:11px; font-weight:400; opacity:.75; }
.hb-trust-row { display:flex; justify-content:center; gap:20px; margin-top:14px; }
.hb-trust-row span { font-size:12px; color:var(--text-gray); display:flex; align-items:center; gap:5px; }
@media(max-width:1024px){ .hb-wrap { grid-template-columns:1fr; } .hb-book-visual { flex-direction:row; flex-wrap:wrap; justify-content:center; } }
@media(max-width:540px){ .hbf-row { grid-template-columns:1fr; } }

/* ── COUNTRY TABS ── */
.ctabs-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; justify-content:center; }
.ctab {
  display:flex; align-items:center; gap:7px;
  background:#fff; border:1.5px solid rgba(37,99,235,.14);
  color:var(--text-gray); padding:9px 20px; border-radius:25px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; transition:var(--t);
}
.ctab:hover { border-color:var(--blue-500); color:var(--navy-700); }
.ctab.active { background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(37,99,235,.28); }
.ctab-panel { display:none; }
.ctab-panel.active { display:block; }
.ctab-intro { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.ctab-stat { background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; padding:10px 20px; border-radius:10px; font-size:13.5px; font-weight:500; }
.ctab-stat strong { display:block; font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; line-height:1; }
.ctab-cta { margin-top:24px; text-align:center; background:var(--bg-btint); padding:24px; border-radius:var(--r); border:1px dashed rgba(37,99,235,.2); }
.ctab-cta p { color:var(--text-gray); font-size:15px; margin-bottom:14px; }

/* ── TECH STACK FULL WIDTH ── */
.tech-stack-fullw .sec-hdr { max-width:700px; margin-left:auto; margin-right:auto; }
.tech-fw-wrapper { background:#fff; box-shadow:var(--sh); border-top:1px solid rgba(37,99,235,.07); border-bottom:1px solid rgba(37,99,235,.07); }
/* tech-grid-fw kept for compat - not used */

/* Mobile apps tab */
.mobile-split { display:flex; flex-direction:column; gap:24px; padding:0 20px 20px; }
.mob-platform { background:var(--bg-light); border-radius:var(--r); padding:20px; border:1px solid rgba(37,99,235,.07); }
.mob-plat-header {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid rgba(37,99,235,.07);
}
.mob-plat-header i { font-size:28px; }
.mob-plat-header strong { display:block; font-size:16px; font-weight:700; color:var(--text-dark); }
.mob-plat-header span { font-size:12.5px; color:var(--text-gray); }
.ios-plat i { color:#1c1c1e; }
.android-plat i { color:#3ddc84; }
.cross-plat i { color:var(--blue-500); }
.mob-cta-banner {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  margin:0 20px;
  border-radius:var(--r); padding:20px 28px;
}
.mob-cta-banner > div { flex:1; }
.mob-cta-banner strong { display:block; color:#fff; font-size:17px; font-weight:700; }
.mob-cta-banner span { color:rgba(255,255,255,.65); font-size:13.5px; }
.mob-cta-btn { background:var(--gold-500); color:var(--navy-900); border:none; padding:11px 22px; border-radius:25px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; transition:var(--t); }
.mob-cta-btn:hover { background:var(--gold-300); }

/* ── TESTIMONIALS V3 CARD GRID ── */
.test-section { background:var(--bg-light); padding:40px 0; }
.tv3-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tv3-card {
  background:#fff; border-radius:var(--r); padding:26px;
  border:1px solid rgba(37,99,235,.07); transition:var(--t);
  position:relative; display:flex; flex-direction:column; gap:14px;
}
.tv3-card:hover { transform:translateY(-4px); box-shadow:var(--sh-h); }
.tv3-featured { border-color:rgba(37,99,235,.18); background:linear-gradient(135deg,rgba(37,99,235,.04),rgba(255,255,255,1)); }
.tv3-quote-mark { font-family:'DM Sans',sans-serif; font-size:56px; color:rgba(37,99,235,.12); line-height:1; height:36px; overflow:hidden; }
.tv3-stars { color:#f59e0b; font-size:15px; letter-spacing:2px; }
.tv3-card p { font-size:14.5px; color:var(--text-dark); line-height:1.7; font-style:italic; flex:1; }
.tv3-card p strong { color:var(--navy-700); }
.tv3-author { display:flex; align-items:center; gap:12px; }
.tv3-author img { width:46px; height:46px; border-radius:50%; border:2px solid var(--bg-btint); flex-shrink:0; }
.tv3-author strong { display:block; font-size:14.5px; font-weight:700; color:var(--text-dark); }
.tv3-author span { display:block; font-size:12.5px; color:var(--text-gray); }
.tv3-loc { color:var(--navy-600) !important; font-weight:600 !important; }
.tv3-result { display:inline-flex; align-items:center; gap:7px; background:rgba(37,99,235,.07); color:var(--navy-700); padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:600; }
.tv3-result i { color:var(--blue-500); }
/* CTA card */
.tv3-cta-card { background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); border-color:transparent; align-items:center; text-align:center; }
.tv3-cta-top { margin-bottom:4px; }
.tv3-rating-big { font-family:'DM Sans',sans-serif; font-size:52px; font-weight:800; color:#fff; line-height:1; }
.tv3-rating-big span { color:var(--gold-400); }
.tv3-cta-sub { font-size:12px; color:rgba(255,255,255,.6); margin-top:4px; }
.tv3-cta-stats { display:flex; justify-content:center; gap:20px; padding:14px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.tv3-cta-stats div { display:flex; flex-direction:column; align-items:center; }
.tv3-cta-stats strong { font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:var(--gold-400); }
.tv3-cta-stats span { font-size:11px; color:rgba(255,255,255,.55); }
.tv3-card.tv3-cta-card p { color:rgba(255,255,255,.7); font-style:normal; font-size:14px; }
@media(max-width:900px){ .tv3-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .tv3-grid { grid-template-columns:1fr; } }

/* ── BLOG V2 ── */
.blog-featured-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-h); margin-bottom:22px;
  border:1px solid rgba(37,99,235,.07);
}
.blog-featured-img { position:relative; overflow:hidden; min-height:320px; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; }
.blog-feat-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(11,23,41,.7) 0%,rgba(11,23,41,.1) 60%); display:flex; flex-direction:column; justify-content:space-between; padding:16px; }
.blog-feat-cat { background:var(--navy-700); color:#fff; padding:5px 13px; border-radius:13px; font-size:12px; font-weight:700; align-self:flex-start; }
.blog-feat-trending { background:rgba(239,68,68,.9); color:#fff; padding:5px 12px; border-radius:13px; font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:5px; align-self:flex-end; }
.blog-featured-body { padding:28px; display:flex; flex-direction:column; justify-content:center; }
.blog-feat-meta { display:flex; gap:14px; margin-bottom:13px; flex-wrap:wrap; }
.blog-feat-meta span { font-size:12px; color:var(--text-gray); display:flex; align-items:center; gap:5px; }
.blog-featured-body h3 { font-family:'DM Sans',sans-serif; font-size:clamp(18px,2.2vw,24px); font-weight:800; color:var(--text-dark); line-height:1.3; margin-bottom:12px; }
.blog-featured-body p { font-size:14.5px; color:var(--text-gray); line-height:1.65; margin-bottom:16px; }
.blog-feat-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.blog-feat-tags span { background:var(--bg-btint); color:var(--navy-600); padding:4px 11px; border-radius:12px; font-size:12px; font-weight:600; }
.blog-feat-btn { display:inline-flex; align-items:center; background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; border:none; padding:11px 22px; border-radius:25px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer; transition:var(--t); }
.blog-feat-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(37,99,235,.3); }
.blog-grid-v2 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.blg2-card { background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid rgba(37,99,235,.07); transition:var(--t); }
.blg2-card:hover { transform:translateY(-5px); box-shadow:var(--sh-h); }
.blg2-img { position:relative; aspect-ratio:16/9; overflow:hidden; }
.blg2-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blg2-card:hover .blg2-img img { transform:scale(1.06); }
.blg2-cat { position:absolute; bottom:10px; left:10px; padding:4px 11px; border-radius:12px; font-size:11px; font-weight:700; color:#fff; }
.seo-cat { background:#7c3aed; }
.tech-cat { background:#0d9488; }
.guide-cat { background:#c2410c; }
.mkt-cat { background:#16a34a; }
.blg2-body { padding:16px; }
.blg2-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.blg2-meta span:first-child { font-size:11.5px; color:var(--text-gray); }
.blg2-hot { font-size:11px; font-weight:700; color:#ef4444; }
.blg2-body h4 { font-size:14px; font-weight:700; color:var(--text-dark); line-height:1.4; margin-bottom:12px; }
.blg2-read { background:none; border:none; color:var(--navy-600); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; transition:gap .2s; }
.blg2-read:hover { gap:9px; }
@media(max-width:900px){ .blog-featured-wrap { grid-template-columns:1fr; } .blog-grid-v2 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .blog-grid-v2 { grid-template-columns:1fr; } }

/* ── SEO SECTION REVAMP ── */
.seo-section { background:var(--bg-light); padding:40px 0; }
.seo-v2-wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:start; }
.seo-v2-tag { display:inline-block; background:rgba(34,197,94,.1); color:#16a34a; padding:6px 18px; border-radius:18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
.seo-v2-title { font-family:'DM Sans',sans-serif; font-size:clamp(22px,2.8vw,34px); font-weight:800; color:var(--text-dark); line-height:1.2; margin-bottom:12px; }
.seo-v2-desc { font-size:15px; color:var(--text-gray); line-height:1.65; margin-bottom:22px; }
.seo-compare { display:grid; grid-template-columns:1fr 32px 1fr; gap:0; margin-bottom:24px; background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid rgba(37,99,235,.07); box-shadow:var(--sh); }
.seo-col { padding:16px; }
.seo-col-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; padding-bottom:11px; margin-bottom:10px; border-bottom:1px solid rgba(0,0,0,.06); }
.bad-head { color:#ef4444; }
.good-head { color:#16a34a; }
.seo-col-item { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; padding:5px 0; }
.bad { color:var(--text-gray); }
.bad i { color:#ef4444; font-size:12px; }
.good { color:var(--text-dark); }
.good i { color:#16a34a; font-size:12px; }
.seo-arrow-col { display:flex; align-items:center; justify-content:center; background:var(--bg-btint); color:var(--navy-600); font-size:18px; }
/* Audit card */
.seo-audit-card { background:#fff; border-radius:var(--r); box-shadow:var(--sh-h); border:1px solid rgba(37,99,235,.07); overflow:hidden; }
.sac-header { background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; padding:16px 20px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:9px; }
.sac-scores { padding:20px; display:flex; flex-direction:column; gap:13px; }
.sac-score-row { display:flex; align-items:center; gap:11px; }
.sac-score-row > span:first-child { width:110px; font-size:13px; font-weight:500; color:var(--text-dark); flex-shrink:0; }
.sac-bar { flex:1; height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.sac-fill { height:100%; border-radius:4px; transition:width 1.5s ease; }
.sac-num { width:28px; text-align:right; font-size:13px; font-weight:700; flex-shrink:0; }
.good-num { color:#16a34a; }
.sac-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1px solid rgba(37,99,235,.07); background:var(--bg-btint); gap:14px; }
.sac-overall { display:flex; align-items:center; gap:11px; }
.sac-overall-num { font-family:'DM Sans',sans-serif; font-size:40px; font-weight:800; color:#16a34a; line-height:1; }
.sac-overall-lbl { font-size:13px; font-weight:700; color:var(--text-dark); }
.sac-overall-lbl span { display:block; font-size:11.5px; font-weight:400; color:var(--text-gray); }
.sac-cta-btn { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; border:none; padding:10px 18px; border-radius:9px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; transition:var(--t); white-space:nowrap; }
.sac-cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(34,197,94,.35); }
@media(max-width:900px){ .seo-v2-wrap { grid-template-columns:1fr; } }

/* ── FULL-WIDTH CONTACT MODAL V2 ── */
.cfv2-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.6); display:flex; align-items:stretch; }
.cfv2-overlay.hidden { display:none; }
.cfv2-inner { display:grid; grid-template-columns:1fr 1fr; width:100%; max-height:100vh; }
/* Left slider */
.cfv2-slider-panel { position:relative; overflow:hidden; }
.cfv2-slides { position:relative; height:100%; }
.cfv2-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s ease; }
.cfv2-slide.active { opacity:1; position:relative; min-height:100vh; }
.cfv2-slide-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(11,23,41,.88) 0%,rgba(11,23,41,.3) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:36px 32px; }
.cfv2-slide-stars { color:var(--gold-400); font-size:18px; letter-spacing:3px; margin-bottom:12px; }
.cfv2-slide-quote { font-family:'DM Sans',sans-serif; font-size:clamp(18px,2vw,24px); color:#fff; line-height:1.5; margin-bottom:14px; font-style:italic; }
.cfv2-slide-author { font-size:14px; color:rgba(255,255,255,.7); font-weight:500; }
.cfv2-dots { position:absolute; bottom:100px; left:32px; display:flex; gap:8px; z-index:5; }
.cfv2-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:var(--t); padding:0; }
.cfv2-dot.active { background:#fff; width:22px; border-radius:4px; }
.cfv2-stats { position:absolute; bottom:36px; left:32px; display:flex; gap:16px; z-index:5; }
.cfv2-stat { text-align:center; }
.cfv2-stat strong { display:block; font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:#fff; line-height:1; }
.cfv2-stat span { font-size:11.5px; color:rgba(255,255,255,.6); font-weight:500; }
.cfv2-close {
  position:absolute; top:18px; left:18px; z-index:10;
  background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.4);
  color:#fff; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; transition:var(--t); backdrop-filter:blur(4px);
}
.cfv2-close:hover { background:rgba(255,255,255,.35); }
/* Right form */
.cfv2-form-panel { background:#fff; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:32px; }
.cfv2-form-content { width:100%; max-width:420px; }
.cfv2-logo { height:40px; width:auto; margin-bottom:22px; }
.cfv2-form-content h3 { font-family:'DM Sans',sans-serif; font-size:clamp(20px,2.5vw,26px); font-weight:800; color:var(--text-dark); margin-bottom:7px; }
.cfv2-form-content > p { font-size:14px; color:var(--text-gray); margin-bottom:22px; }
.cfv2-form { display:flex; flex-direction:column; gap:14px; }
.cfv2-fgrp { display:flex; flex-direction:column; gap:5px; }
.cfv2-fgrp label { font-size:12.5px; font-weight:600; color:var(--text-dark); }
.cfv2-fgrp input { padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:9px; font-family:'DM Sans',sans-serif; font-size:14.5px; color:var(--text-dark); outline:none; transition:border-color .2s; }
.cfv2-fgrp input:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.cfv2-submit { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-700),var(--blue-500)); color:#fff; border:none; padding:14px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; transition:var(--t); box-shadow:0 4px 14px rgba(37,99,235,.28); }
.cfv2-submit:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,99,235,.38); }
.cfv2-prv { text-align:center; font-size:11.5px; color:var(--text-gray); margin-top:8px; }
.cfv2-trust { display:flex; justify-content:center; gap:18px; margin-top:18px; padding-top:16px; border-top:1px solid #f1f5f9; flex-wrap:wrap; }
.cfv2-trust div { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-gray); font-weight:500; }
@media(max-width:768px){
  .cfv2-inner { grid-template-columns:1fr; }
  .cfv2-slider-panel { min-height:220px; max-height:240px; }
  .cfv2-slide.active { min-height:240px; }
  .cfv2-form-panel { padding:22px 18px; }
}

/* ============================================================
   FULL-WIDTH BANNER STYLES + MOBILE RESPONSIVE
   ============================================================ */

/* Eyebrow pill row (replaces hero-badge) */
.banner-eyebrow {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:22px;
  animation:heroIn .8s ease .2s both;
}
.eyebrow-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
  color:#fff; padding:7px 16px; border-radius:25px;
  font-size:13px; font-weight:600;
}
.eyebrow-gold {
  background:rgba(200,164,94,.2);
  border-color:rgba(200,164,94,.4);
  color:var(--gold-300);
}

/* Remove old right panel styles — banner is full-width only */
.hero-img-panel { display:none !important; }

/* ── DESKTOP BANNER ── */
@media(min-width:1025px) {
  .hero-slide.active { min-height:52vh; }
  .hero-inner { padding-top:48px; padding-bottom:56px; }
  .hero-h1 { font-size:clamp(22px,2.8vw,36px); }
}

/* ── TABLET BANNER ── */
@media(min-width:769px) and (max-width:1024px) {
  .hero-slide.active { min-height:46vh; }
  .hero-inner { padding-top:44px; padding-bottom:48px; max-width:100%; }
  .banner-bg-img { object-position:60% center; }
  .ov-dark-left {
    background:linear-gradient(135deg,rgba(7,14,28,.88) 0%,rgba(11,23,41,.72) 100%);
  }
}

/* ── MOBILE BANNER ── */
@media(max-width:768px) {
  .hero-slide.active {
    min-height:62vh;
    align-items:flex-end;
  }
  .hero-inner {
    max-width:100%;
    padding-top:0;
    padding-bottom:52px;
  }
  .ov-dark-left, .ov-dark-center {
    background:linear-gradient(
      to top,
      rgba(7,14,28,.95) 0%,
      rgba(7,14,28,.75) 45%,
      rgba(7,14,28,.2) 80%,
      rgba(7,14,28,.05) 100%
    );
  }
  .hero-content { text-align:center; }
  .hero-h1 { font-size:clamp(18px,5.5vw,24px); }
  .hero-p { font-size:14px; margin-bottom:16px; }
  .hero-btns { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-trust { justify-content:center; }
  .banner-eyebrow { justify-content:center; }
  .hero-checklist { grid-template-columns:1fr; text-align:left; }
  .hero-feat-grid { grid-template-columns:1fr 1fr; }
  .banner-bg-img { object-position:center top; }
  .slider-controls { bottom:12px; }
  .hero-wave { display:none; }
}

/* ── SMALL MOBILE ── */
@media(max-width:480px) {
  .hero-slide.active { min-height:60vh; }
  .hero-inner { padding-bottom:44px; }
  .hero-h1 { font-size:18px; }
  .hstat-n { font-size:22px; }
  .hero-btns { flex-direction:column; gap:9px; }
  .btn-hero-gold, .btn-hero-outline { width:100%; justify-content:center; }
  .hero-feat-grid { grid-template-columns:1fr; }
}

/* ============================================================
   SOFTWARE GRID V2 — 4 cols, logo images
   ============================================================ */
.sw-grid-v2 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.sw-card-v2 {
  background:#fff;
  border-radius:var(--r);
  padding:24px 20px 20px;
  border:1px solid rgba(37,99,235,.08);
  transition:var(--t);
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
}
.sw-card-v2:hover {
  transform:translateY(-5px);
  box-shadow:var(--sh-h);
  border-color:rgba(37,99,235,.16);
}
/* Logo area */
.sw-logo-box {
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}
.sw-logo-img {
  max-height:44px;
  max-width:130px;
  width:auto;
  object-fit:contain;
  display:block;
}
.sw-logo-fallback {
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  font-weight:800;
  color:var(--navy-700);
  width:100%;
  height:44px;
  align-items:center;
  justify-content:center;
  background:var(--bg-btint);
  border-radius:8px;
  padding:0 12px;
}
/* Content */
.sw-card-v2 h3 {
  font-size:15.5px;
  font-weight:700;
  color:var(--text-dark);
  margin:0;
}
.sw-card-v2 p {
  font-size:13px;
  color:var(--text-gray);
  line-height:1.58;
  flex:1;
  margin:0;
}
.sw-card-v2 .sw-tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:center;
}
.sw-card-v2 .sw-tags span {
  background:var(--bg-btint);
  color:var(--navy-600);
  padding:3px 9px;
  border-radius:9px;
  font-size:11px;
  font-weight:600;
}
.sw-best-badge {
  display:inline-block;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-500));
  color:#fff;
  padding:4px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  margin-top:2px;
}

@media(max-width:1024px) { .sw-grid-v2 { grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px)  { .sw-grid-v2 { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media(max-width:400px)  { .sw-grid-v2 { grid-template-columns:1fr 1fr; gap:10px; } }

/* ── TECH STACK: contained layout ── */
.tech-stack-fullw { /* legacy class — ignored */ }

/* ============================================================
   MODAL — LARGE CENTERED POPUP (NOT FULL WIDTH)
   ============================================================ */
.cmodal-backdrop {
  position:fixed; inset:0; z-index:10000;
  background:rgba(7,14,28,.75);
  backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.cmodal-backdrop.hidden { display:none; }

.cmodal-box {
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%; max-width:960px;
  max-height:92vh;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  animation:modalIn .4s cubic-bezier(.34,1.56,.64,1);
}

/* LEFT panel */
.cmodal-left {
  position:relative;
  background:var(--navy-900);
  display:flex; flex-direction:column;
  overflow:hidden; min-height:520px;
}
.cmodal-slides { position:absolute; inset:0; }
.cmodal-slides .cfv2-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease; }
.cmodal-slides .cfv2-slide.active { opacity:1; }
.cmodal-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,14,28,.95) 0%, rgba(7,14,28,.6) 50%, rgba(7,14,28,.25) 100%);
  z-index:1;
}
.cmodal-left-content {
  position:relative; z-index:2;
  padding:24px 26px; display:flex; flex-direction:column; gap:16px;
  height:100%; overflow-y:auto; justify-content:flex-end;
}

/* Close button */
/* Old close (left side) — hidden now */
.cmodal-close { display:none; }

/* New close button — top-right of the form (right) panel */
.cmodal-close-right {
  position:absolute; top:14px; right:16px; z-index:20;
  background:#f1f5f9; border:1.5px solid #e2e8f0;
  color:#64748b; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; transition:var(--t);
}
.cmodal-close-right:hover { background:#ef4444; border-color:#ef4444; color:#fff; transform:scale(1.08); }

/* Right panel needs relative positioning for close btn */
.cmodal-right { position:relative; }

/* Left headline */
.cmodal-hl-tag {
  display:inline-block; background:rgba(200,164,94,.2);
  color:var(--gold-300); padding:4px 12px; border-radius:12px;
  font-size:11.5px; font-weight:700; margin-bottom:6px;
}
.cmodal-headline h3 {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(16px,2vw,20px);
  font-weight:800; color:#fff; line-height:1.35;
}

/* Stats row */
.cmodal-stats-row { display:flex; gap:12px; }
.cmodal-stat {
  flex:1; background:rgba(255,255,255,.1); border-radius:10px;
  padding:10px 8px; text-align:center;
  border:1px solid rgba(255,255,255,.12);
}
.cms-num { display:block; font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:var(--gold-400); line-height:1; }
.cms-lbl { display:block; font-size:10.5px; color:rgba(255,255,255,.6); font-weight:500; margin-top:3px; }

/* Selling points */
.cmodal-points { display:flex; flex-direction:column; gap:10px; }
.cmp-item {
  display:flex; align-items:flex-start; gap:11px;
  background:rgba(255,255,255,.07); border-radius:10px; padding:11px 12px;
  border:1px solid rgba(255,255,255,.08);
}
.cmp-ico {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:rgba(37,99,235,.2); color:var(--blue-400);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cmp-item strong { display:block; color:#fff; font-size:13px; font-weight:700; margin-bottom:2px; }
.cmp-item span { font-size:12px; color:rgba(255,255,255,.6); line-height:1.45; }

/* Testimonial */
.cmodal-testim {
  border-left:3px solid var(--gold-500);
  padding-left:12px;
}
.cmt-stars { color:var(--gold-400); font-size:13px; letter-spacing:2px; margin-bottom:5px; }
.cmodal-testim p { font-size:13px; color:rgba(255,255,255,.8); font-style:italic; line-height:1.5; margin-bottom:5px; }
.cmodal-testim span { font-size:11.5px; color:rgba(255,255,255,.5); }

/* RIGHT panel */
.cmodal-right {
  background:#fff;
  padding:32px 28px;
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto;
}
.cmodal-right h3 {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(17px,2vw,22px);
  font-weight:800; color:var(--text-dark); margin:0;
}
.cmodal-right > p { font-size:13.5px; color:var(--text-gray); margin:0; }

/* Mobile */
@media(max-width:700px) {
  .cmodal-box { grid-template-columns:1fr; max-height:95vh; }
  .cmodal-left { display:none; }
  .cmodal-right { border-radius:20px; }
}

/* ============================================================
   HERO V2 — PIXEL-PERFECT REBUILD v3
   ============================================================ */

/* Announcement bar — matches mockup dark top bar */
.ann-bar { background: #080c18 !important; border-bottom: 1px solid rgba(255,255,255,.05); }
.ann-icon { color: rgba(255,255,255,.4); font-size: 12px; }
.ann-cta-outline {
  display:inline-flex; align-items:center;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 5px 18px;
  border-radius: 20px;
  font-weight: 600; font-size: 12.5px;
  text-decoration: none; transition: var(--t); white-space: nowrap;
}
.ann-cta-outline:hover { background: rgba(255,255,255,.09); }
.ann-close { color: rgba(255,255,255,.45) !important; }

/* Header CTA — purple gradient matching mockup */
.btn-hdr-cta {
  background: linear-gradient(90deg, #6366f1, #7c3aed) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.38) !important;
  color: #fff !important; border-radius: 8px !important;
}
.btn-hdr-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.48) !important; }

/* ══ HERO V2 — DARK SPLIT LAYOUT ══════════════════════════ */

.hv2-section {
  background: #09101f;
  position: relative; overflow: hidden;
}
/* NO grid pattern — clean dark BG like the mockup */

/* Slide transitions */
.hv2-section .hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease; overflow: visible;
}
.hv2-section .hero-slide.active {
  opacity: 1; position: relative; min-height: auto; display: block;
}

/* ── Grid: exact 50/50 split as per mockup ── */
.hv2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  padding-top: 62px;
  padding-bottom: 52px;
  position: relative; z-index: 2;
}

/* ── LEFT SIDE ── */
.hv2-left { display: flex; flex-direction: column; }

.hv2-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.hv2-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  padding: 7px 16px; border-radius: 40px;
  font-size: 13px; font-weight: 500;
}
.hv2-pill i { font-size: 13px; }
.hv2-pill-star { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.18); color: #fbbf24; }
.hv2-pill-amber { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.22); color: #fbbf24; }

/* H1 — LARGE, matches the dominant heading in mockup */
.hv2-h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(38px, 4.6vw, 54px);
  font-weight: 900;
  color: #fff;
  line-height: 1.13;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.hv2-purple {
  background: linear-gradient(90deg, #a5b4fc 0%, #818cf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hv2-teal {
  background: linear-gradient(90deg, #22d3ee 0%, #06b6d4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hv2-amber {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hv2-p {
  color: rgba(255,255,255,.6);
  font-size: 16px; line-height: 1.7;
  margin-bottom: 28px; max-width: 440px;
}

/* Stats row — numbers in indigo matching mockup */
.hv2-stats { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.hv2-stat-item {}
.hv2-sn {
  font-family: 'DM Sans', sans-serif;
  font-size: 36px; font-weight: 800;
  color: #818cf8; line-height: 1;
}
.hv2-sunit { font-size: 28px; font-weight: 800; color: #818cf8; }
.hv2-sl { font-size: 12px; color: rgba(255,255,255,.48); font-weight: 500; margin-top: 4px; display: block; }
.hv2-sdiv { width: 1px; height: 44px; background: rgba(255,255,255,.1); flex-shrink: 0; }

/* Checklist */
.hv2-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.hv2-ck { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 500; }
.hv2-check-ic { color: #22d3ee; font-size: 14px; flex-shrink: 0; }

/* Feature row slide 3 */
.hv2-feat-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.hv2-feat {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px 14px;
}
.hv2-feat-ic { color: #818cf8; font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.hv2-feat strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; margin-bottom: 1px; }
.hv2-feat span { font-size: 12px; color: rgba(255,255,255,.5); }

/* CTA buttons — match mockup sizes */
.hv2-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.btn-hv2-primary {
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  color: #fff; border: none;
  padding: 14px 28px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 4px 18px rgba(99,102,241,.42); transition: var(--t);
}
.btn-hv2-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,.52); }
.btn-hv2-outline {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  padding: 14px 28px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; transition: var(--t);
}
.btn-hv2-outline:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }

/* Trust row */
.hv2-trust { display: flex; align-items: center; gap: 13px; }
.hv2-trust .trust-avs .trust-av { border-color: rgba(255,255,255,.25); background: #1a2235; }
.hv2-trust .trust-stars { color: #fbbf24; font-size: 15px; letter-spacing: 2px; }
.hv2-trust .trust-lbl { font-size: 13px; color: rgba(255,255,255,.58); }

/* ── RIGHT SIDE: Website Preview Mockup ── */
.hv2-right { position: relative; }
.bm-wrapper { position: relative; }

/* Main preview card — rounded, website screenshot style */
.bm-preview-card {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 28px 72px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09);
}
/* White website nav bar (Artvista style) */
.bm-website-nav {
  background: #fff;
  padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.bm-site-brand {
  font-size: 15px; font-weight: 800; color: #1a1a2e; letter-spacing: .3px;
}
.bm-site-nav-row {
  display: flex; gap: 18px; font-size: 11px; color: #475569; font-weight: 500;
}
/* Gallery image inside preview */
.bm-preview-img-wrap { position: relative; overflow: hidden; }
.bm-preview-img {
  width: 100%; height: 310px;
  object-fit: cover; object-position: center;
  display: block;
}
.bm-preview-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(8,13,25,.78) 0%,
    rgba(8,13,25,.45) 45%,
    rgba(8,13,25,.1) 100%
  );
  display: flex; align-items: flex-end;
}
.bm-preview-text {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 7px;
}
.bm-preview-text h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 24px; font-weight: 700; color: #fff; line-height: 1.25;
}
.bm-preview-text p { font-size: 12px; color: rgba(255,255,255,.62); }
.bm-site-cta {
  background: #fff; color: #0a0e1a; border: none;
  padding: 8px 20px; border-radius: 4px;
  font-size: 12px; font-weight: 700; cursor: pointer; width: fit-content;
  font-family: 'DM Sans', sans-serif;
}

/* Bottom floating cards — matching mockup layout */
.bm-cards {
  display: grid; grid-template-columns: 1.45fr 1fr;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 28px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.09);
}
.bm-card-exh {
  display: flex;
  background: #111827;
  border-right: 1px solid rgba(255,255,255,.06);
}
.bm-exh-img { width: 105px; height: 130px; object-fit: cover; flex-shrink: 0; }
.bm-exh-body { padding: 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.bm-exh-label { font-size: 9.5px; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: 1px; }
.bm-exh-title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; }
.bm-exh-curator { font-size: 11px; color: rgba(255,255,255,.48); margin-bottom: 2px; }
.bm-exh-cta {
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.72); padding: 5px 13px; border-radius: 4px;
  font-size: 10.5px; cursor: pointer; width: fit-content; font-family: 'DM Sans', sans-serif;
}
.bm-exh-dots { display: flex; gap: 5px; margin-top: 8px; align-items: center; }
.bm-exh-dot { width: 20px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); }
.bm-exh-dot.active { background: #22d3ee; width: 24px; }

.bm-card-artist { background: #0d1424; overflow: hidden; position: relative; }
.bm-artist-img { width: 100%; height: 90px; object-fit: cover; object-position: top; }
.bm-artist-body { padding: 10px 14px; }
.bm-artist-name { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.bm-artist-role { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.bm-artist-cta {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72); padding: 5px 0; border-radius: 4px;
  font-size: 10.5px; cursor: pointer; width: 100%; text-align: center;
  font-family: 'DM Sans', sans-serif;
}

/* Slider controls — centered below hero on dark bg */
.hv2-controls {
  position: relative; display: flex; justify-content: flex-start;
  align-items: center; gap: 14px;
  padding: 20px 0 28px;
  padding-left: calc((100vw - min(1280px, 100%)) / 2 + 16px);
  z-index: 2;
}
.hv2-controls .sl-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.hv2-controls .sl-dot { background: rgba(255,255,255,.25); }
.hv2-controls .sl-dot.active { background: #818cf8; }

/* ── GALLERY LOGOS TRUST BAR ── */
.logo-trust-bar {
  background: #f5f7ff;
  padding: 28px 0 32px;
  border-bottom: 1px solid rgba(37,99,235,.06);
}
.logo-trust-heading {
  text-align: center; font-size: 13px; font-weight: 600;
  color: #94a3b8; text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 22px;
}
.logo-trust-row {
  display: flex; align-items: center; justify-content: center;
  gap: 44px; flex-wrap: wrap;
}
.gl-logo {
  font-weight: 700; letter-spacing: .5px; text-align: center;
  opacity: .38; transition: opacity .25s; cursor: default; line-height: 1.2;
  user-select: none;
}
.gl-logo:hover { opacity: .65; }
.gl-tate     { font-size: 24px; font-family: Georgia, serif; letter-spacing: 6px; color: #0f172a; font-weight: 400; }
.gl-moma     { font-size: 23px; font-family: 'DM Sans', sans-serif; font-weight: 900; color: #0f172a; letter-spacing: -0.5px; }
.gl-national { font-size: 9.5px; font-family: Georgia, serif; text-transform: uppercase; letter-spacing: 2.5px; color: #0f172a; }
.gl-va       { font-size: 26px; font-family: Georgia, serif; font-style: italic; font-weight: 700; color: #0f172a; letter-spacing: 1px; }
.gl-guggenheim { font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: 2.5px; color: #0f172a; text-transform: uppercase; }
.gl-whitney  { font-size: 20px; font-family: Georgia, serif; font-weight: 900; letter-spacing: .5px; color: #0f172a; }
.gl-saatchi  { font-size: 10.5px; font-family: Georgia, serif; letter-spacing: 2px; text-transform: uppercase; color: #0f172a; }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .hv2-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 36px; }
  .hv2-right { max-width: 600px; margin: 0 auto; }
  .bm-site-nav-row { display: none; }
}
@media(max-width:768px) {
  .hv2-h1 { font-size: 30px; letter-spacing: -.8px; }
  .hv2-stats { gap: 16px; }
  .hv2-sn { font-size: 28px; }
  .hv2-btns { flex-direction: column; }
  .btn-hv2-primary, .btn-hv2-outline { width: 100%; justify-content: center; }
  .bm-cards { grid-template-columns: 1fr; }
  .bm-card-artist { display: none; }
  .logo-trust-row { gap: 20px; }
  .hv2-controls { padding-left: 16px; }
}
@media(max-width:480px) {
  .hv2-h1 { font-size: 26px; }
  .hv2-checklist { grid-template-columns: 1fr; }
  .hv2-sn { font-size: 26px; }
}

/* ============================================================
   PORTFOLIO SHOWCASE V2 — "OUR WORK SPEAKS"
   ============================================================ */
.pv2-section {
  background: #f4f6fb;
  padding: 72px 0 80px;
}

/* Header */
.pv2-hdr { text-align:center; max-width:620px; margin:0 auto 36px; }
.pv2-tag {
  display:inline-block;
  background:rgba(99,102,241,.1); color:#6366f1;
  font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:6px 18px; border-radius:20px; margin-bottom:16px;
}
.pv2-title {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(28px,3.5vw,44px);
  font-weight:800; color:#0f172a; line-height:1.18; margin-bottom:14px;
}
.pv2-title-blue {
  color:#6366f1; font-style:italic;
}
.pv2-sub { font-size:15.5px; color:#64748b; line-height:1.7; }

/* Filter tabs */
.pv2-filters {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-bottom:32px;
}
.pv2-filter {
  padding:9px 22px; border-radius:25px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
  cursor:pointer; transition:all .2s;
  background:transparent; border:1.5px solid #e2e8f0; color:#475569;
}
.pv2-filter:hover { border-color:#94a3b8; color:#1e293b; }
.pv2-filter.active {
  background:#0f172a; color:#fff; border-color:#0f172a;
  box-shadow:0 4px 14px rgba(15,23,42,.25);
}

/* Cards container */
.pv2-cards-outer { position:relative; overflow:hidden; }
.pv2-cards {
  display:flex; gap:18px;
  overflow-x:auto; scrollbar-width:none;
  scroll-behavior:smooth; padding-bottom:4px;
}
.pv2-cards::-webkit-scrollbar { display:none; }

/* Individual card */
.pv2-card {
  flex:0 0 calc(25% - 14px);
  min-width:260px;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.pv2-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.pv2-card.pv2-hidden { display:none; }

/* Website preview area inside card */
.pv2-preview { position:relative; overflow:hidden; height:320px; }
.pv2-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.pv2-card:hover .pv2-img { transform:scale(1.04); }

/* Site nav bar inside preview */
.pv2-nav {
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.pv2-nav-light { background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.pv2-nav-dark  { background:rgba(10,14,26,.85); backdrop-filter:blur(8px); }
.pv2-logo-sm {
  font-size:13px; font-weight:800; letter-spacing:.4px;
}
.pv2-nav-light .pv2-logo-sm { color:#1a1a2e; }
.pv2-nav-dark  .pv2-logo-sm { color:#fff; }
.pv2-nav-links-sm {
  display:flex; gap:10px; font-size:9.5px;
}
.pv2-nav-light .pv2-nav-links-sm { color:#475569; }
.pv2-nav-dark  .pv2-nav-links-sm { color:rgba(255,255,255,.65); }

/* Content overlay on image */
.pv2-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(10,14,26,.88) 0%,rgba(10,14,26,.3) 50%,rgba(10,14,26,.0) 80%);
  display:flex; align-items:flex-end;
}
.pv2-overlay-dark {
  background:linear-gradient(to top,rgba(5,8,16,.92) 0%,rgba(5,8,16,.5) 50%,rgba(5,8,16,.2) 80%);
}
.pv2-content { padding:18px 18px 20px; }
.pv2-content h4 {
  font-family:'DM Sans',sans-serif;
  font-size:17px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:6px;
}
.pv2-content p { font-size:11px; color:rgba(255,255,255,.62); line-height:1.5; margin-bottom:10px; }
.pv2-cta {
  background:#fff; color:#0f172a; border:none;
  padding:7px 16px; border-radius:5px;
  font-size:11px; font-weight:700; cursor:pointer;
  font-family:'DM Sans',sans-serif;
}

/* Card bottom info */
.pv2-meta {
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-top:1px solid #f1f5f9;
}
.pv2-name { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:2px; }
.pv2-type { font-size:12px; color:#64748b; }
.pv2-ext {
  width:32px; height:32px; border-radius:8px;
  background:#f8faff; border:1.5px solid #e2e8f0;
  color:#64748b; display:flex; align-items:center; justify-content:center;
  font-size:12px; cursor:pointer; transition:all .2s;
}
.pv2-ext:hover { background:#6366f1; border-color:#6366f1; color:#fff; }

/* Next arrow button */
.pv2-arrow-next {
  position:absolute; top:50%; right:0;
  transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid #e2e8f0;
  color:#0f172a; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  box-shadow:0 4px 16px rgba(0,0,0,.12); transition:all .2s;
}
.pv2-arrow-next:hover { background:#0f172a; color:#fff; border-color:#0f172a; }

/* View All button */
.pv2-view-all {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#0f172a;
  border:1.5px solid #cbd5e1; padding:12px 28px; border-radius:30px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
  cursor:pointer; transition:all .25s;
}
.pv2-view-all:hover { background:#0f172a; color:#fff; border-color:#0f172a; }

/* Responsive */
@media(max-width:1100px) { .pv2-card { flex:0 0 calc(33.33% - 13px); } }
@media(max-width:768px)  { .pv2-card { flex:0 0 calc(50% - 10px); min-width:220px; } .pv2-preview { height:280px; } }
@media(max-width:480px)  { .pv2-card { flex:0 0 85%; } }


/* ============================================================
   OUR PROCESS — DARK SECTION
   ============================================================ */
.proc-section {
  background:#0d1424;
  padding:72px 0 80px;
  position:relative; overflow:hidden;
}
/* Subtle dot texture */
.proc-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
}

/* Header */
.proc-hdr { text-align:center; max-width:580px; margin:0 auto 52px; position:relative; z-index:2; }
.proc-tag {
  display:inline-block;
  background:rgba(99,102,241,.18); color:#818cf8;
  font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:6px 18px; border-radius:20px; margin-bottom:16px;
}
.proc-title {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(28px,3.8vw,46px);
  font-weight:900; color:#fff; line-height:1.15; margin-bottom:14px;
  letter-spacing:-.5px;
}
.proc-sub { font-size:15.5px; color:rgba(255,255,255,.55); line-height:1.7; }

/* Steps wrapper */
.proc-steps-wrap { position:relative; z-index:2; margin-bottom:52px; }

/* Timeline row (circles + connecting lines) */
.proc-timeline {
  display:flex; align-items:center; margin-bottom:20px;
  padding:0 4px;
}
.proc-step-node {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22);
  flex-shrink:0; background:transparent;
}
.proc-num {
  font-size:13px; font-weight:700; color:rgba(255,255,255,.7);
  font-family:'DM Sans',sans-serif;
}
.proc-connector {
  flex:1; height:1px;
  border-top:1.5px dashed rgba(255,255,255,.15);
}

/* Process cards row */
.proc-cards {
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.proc-card {
  background:#141c2e;
  border-radius:14px; padding:22px 18px;
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .3s ease, border-color .3s ease;
}
.proc-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.14); }

/* Icon box */
.proc-ico {
  width:58px; height:58px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.proc-card h3 {
  font-size:15px; font-weight:800; color:#fff; margin:0;
}
.proc-card p { font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.6; margin:0; }

/* CTAs */
.proc-ctas {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  position:relative; z-index:2;
}
.proc-btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  color:#fff; border:none;
  padding:15px 32px; border-radius:50px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px;
  cursor:pointer; box-shadow:0 4px 18px rgba(99,102,241,.4); transition:all .25s;
}
.proc-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,.5); }
.proc-btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
  padding:15px 32px; border-radius:50px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:15.5px;
  cursor:pointer; transition:all .25s;
}
.proc-btn-outline:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.35); }

/* Responsive */
@media(max-width:900px) {
  .proc-cards { grid-template-columns:repeat(3,1fr); }
  .proc-timeline { display:none; }
}
@media(max-width:540px) {
  .proc-cards { grid-template-columns:repeat(2,1fr); gap:10px; }
  .proc-ctas { flex-direction:column; align-items:center; }
  .proc-btn-primary,.proc-btn-outline { width:100%; justify-content:center; }
}

/* ============================================================
   SERVICES V3 — WHAT WE BUILD FOR YOU
   Two-column: left content + right browser mockup
   ============================================================ */
.svc-v3-section {
  background: #f8f9fc;
  padding: 80px 0;
  overflow: hidden;
}
.svc-v3-wrap {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1.28fr;
  gap: 64px; align-items: start;
}

/* ── Left Column ── */
.svc-v3-left { padding-top: 8px; }
.svc-v3-tag {
  display: inline-block;
  background: rgba(99,102,241,.1); color: #6366f1;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 20px;
}
.svc-v3-h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900; color: #0f172a;
  line-height: 1.18; letter-spacing: -.5px; margin-bottom: 16px;
}
.svc-blue { color: #6366f1; }
.svc-gold { color: #d97706; }
.svc-v3-sub {
  font-size: 15px; color: #64748b; line-height: 1.72; margin-bottom: 28px; max-width: 440px;
}

/* 6 features in 2-col grid */
.svc-v3-feats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px 22px; margin-bottom: 32px;
}
.svc-v3-feat { display: flex; gap: 12px; align-items: flex-start; }
.svc-fi {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.feat-blue   { background: rgba(99,102,241,.1);  color: #6366f1; }
.feat-purple { background: rgba(124,58,237,.1);  color: #7c3aed; }
.feat-red    { background: rgba(239,68,68,.1);   color: #ef4444; }
.feat-green  { background: rgba(22,163,74,.1);   color: #16a34a; }
.feat-orange { background: rgba(249,115,22,.1);  color: #f97316; }
.feat-teal   { background: rgba(13,148,136,.1);  color: #0d9488; }
.svc-v3-feat h4 { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.svc-v3-feat p  { font-size: 12px; color: #64748b; line-height: 1.6; }

/* CTA button — dark navy pill */
.svc-v3-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: #1e3a5f; color: #fff; border: none;
  padding: 14px 28px; border-radius: 50px;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(30,58,95,.35); transition: all .25s;
}
.svc-v3-cta:hover { background: #152c47; box-shadow: 0 8px 24px rgba(30,58,95,.45); transform: translateY(-2px); }

/* ── Right Column ── */
.svc-v3-right { position: relative; }
.svc-mockup-wrap { position: relative; }

/* Browser card */
.svc-browser-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
  background: #fff;
}
/* White nav */
.svc-brow-nav {
  background: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.svc-brow-brand { font-size: 13.5px; font-weight: 900; color: #1a1a2e; letter-spacing: .4px; flex-shrink: 0; }
.svc-brow-links { display: flex; gap: 12px; font-size: 10px; color: #64748b; margin: 0 auto; }
.svc-brow-btn {
  background: transparent; border: 1.5px solid #cbd5e1; color: #475569;
  padding: 4px 12px; border-radius: 5px; font-size: 10px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.svc-brow-grid-ic { color: #94a3b8; font-size: 13px; flex-shrink: 0; }
/* Dark gallery hero */
.svc-brow-hero { position: relative; height: 260px; overflow: hidden; }
.svc-brow-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-brow-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,13,25,.78) 0%, rgba(8,13,25,.35) 55%, transparent 100%);
  padding: 26px 26px; display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.svc-brow-label { font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: 1.5px; text-transform: uppercase; }
.svc-brow-h3 { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800; color: #fff; line-height: 1.25; }
.svc-brow-sub { font-size: 11.5px; color: rgba(255,255,255,.6); line-height: 1.55; max-width: 240px; }
.svc-brow-exh-btn {
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; padding: 7px 18px; border-radius: 5px;
  font-size: 11px; font-weight: 600; cursor: pointer; width: fit-content;
  font-family: 'DM Sans', sans-serif;
}
/* Featured artworks */
.svc-brow-artworks { padding: 14px 16px; background: #fff; }
.svc-aw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.svc-aw-title { font-size: 13px; font-weight: 700; color: #0f172a; }
.svc-aw-link { font-size: 11px; color: #6366f1; text-decoration: none; font-weight: 500; }
.svc-aw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.svc-aw-thumb { width: 100%; height: 68px; border-radius: 7px; object-fit: cover; display: block; }

/* Stats bar */
.svc-stats-bar {
  background: #fff; border: 1px solid #e2e8f0; border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-around;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}
.svc-st { display: flex; align-items: center; gap: 11px; }
.svc-st-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.st-blue   { background: rgba(99,102,241,.1); color: #6366f1; }
.st-amber  { background: rgba(245,158,11,.1); color: #f59e0b; }
.st-indigo { background: rgba(99,102,241,.1); color: #6366f1; }
.svc-st strong { display: block; font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1; }
.svc-st span { font-size: 11px; color: #64748b; font-weight: 500; margin-top: 2px; display: block; }
.st-blue-txt { color: #6366f1 !important; }
.svc-st-div { width: 1px; height: 40px; background: #f1f5f9; }

/* Phone overlay (absolutely positioned) */
.svc-phone-wrap {
  position: absolute; bottom: 0; right: -40px;
  z-index: 10;
}
.svc-phone-frame {
  width: 180px; background: #0f172a;
  border-radius: 28px; overflow: hidden;
  border: 7px solid #0f172a;
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
}
.svc-phone-notch {
  width: 60px; height: 16px; background: #0f172a; border-radius: 0 0 10px 10px;
  margin: 0 auto;
}
.svc-phone-screen {
  background: #fff; border-radius: 4px 4px 22px 22px;
  overflow: hidden;
}
.svc-ph-nav {
  background: #fff; padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}
.svc-ph-brand { font-size: 9px; font-weight: 900; color: #1a1a2e; letter-spacing: .5px; }
.svc-ph-menu  { font-size: 10px; color: #475569; }
.svc-ph-hero  { position: relative; height: 140px; overflow: hidden; }
.svc-ph-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-ph-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,13,25,.85) 0%, rgba(8,13,25,.3) 50%);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
}
.svc-ph-label { font-size: 7px; color: rgba(255,255,255,.55); letter-spacing: 1px; text-transform: uppercase; }
.svc-ph-overlay h4 { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; }
.svc-ph-cta {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
  color: #fff; padding: 4px 10px; border-radius: 3px; font-size: 8px;
  cursor: pointer; width: fit-content; font-family: 'DM Sans', sans-serif;
}
.svc-ph-artworks { padding: 10px; background: #fff; }
.svc-ph-aw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.svc-ph-aw-top span:first-child { font-size: 9px; font-weight: 700; color: #0f172a; }
.svc-ph-view { font-size: 8.5px; color: #6366f1; }
.svc-ph-aw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svc-ph-thumb { width: 100%; height: 50px; border-radius: 5px; object-fit: cover; display: block; }

/* Responsive */
@media(max-width:1100px) {
  .svc-v3-wrap { grid-template-columns: 1fr; gap: 48px; }
  .svc-mockup-wrap { max-width: 600px; margin: 0 auto; }
  .svc-phone-wrap { right: -20px; }
}
@media(max-width:768px) {
  .svc-v3-feats { grid-template-columns: 1fr; }
  .svc-phone-wrap { display: none; }
  .svc-brow-links { display: none; }
  .svc-stats-bar { flex-direction: column; gap: 12px; }
  .svc-st-div { width: 100%; height: 1px; }
}
@media(max-width:480px) {
  .svc-v3-wrap { padding: 0 16px; }
}

/* ============================================================
   WHY GALLERIES CHOOSE US — 6-card horizontal row
   ============================================================ */
.why3-section {
  background: #fff;
  padding: 72px 0 80px;
  border-top: 1px solid #f1f5f9;
}
.why3-hdr { text-align: center; margin-bottom: 48px; }
.why3-tag {
  display: inline-block;
  background: rgba(99,102,241,.1); color: #6366f1;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 16px;
}
.why3-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900; color: #0f172a; line-height: 1.25;
}
.why3-blue { color: #6366f1; }

/* 6-col card grid */
.why3-grid {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 0;
  border: 1px solid #e8ecf3; border-radius: 14px; overflow: hidden;
  background: #fff;
}
.why3-card {
  padding: 28px 20px 26px; text-align: center;
  border-right: 1px solid #e8ecf3;
  transition: background .2s;
}
.why3-card:last-child { border-right: none; }
.why3-card:hover { background: #f8f9fc; }
.why3-ico {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.why3-indigo { background: rgba(99,102,241,.1);  color: #6366f1; }
.why3-green  { background: rgba(22,163,74,.1);   color: #16a34a; }
.why3-blue   { background: rgba(37,99,235,.1);   color: #2563eb; }
.why3-orange { background: rgba(249,115,22,.1);  color: #f97316; }
.why3-purple { background: rgba(124,58,237,.1);  color: #7c3aed; }
.why3-teal   { background: rgba(13,148,136,.1);  color: #0d9488; }
.why3-card h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.why3-card p  { font-size: 12.5px; color: #64748b; line-height: 1.6; }

@media(max-width:900px) {
  .why3-grid { grid-template-columns: repeat(3,1fr); }
  .why3-card:nth-child(3) { border-right: none; }
  .why3-card:nth-child(3), .why3-card:nth-child(4), .why3-card:nth-child(5), .why3-card:nth-child(6) { border-top: 1px solid #e8ecf3; }
}
@media(max-width:540px) {
  .why3-grid { grid-template-columns: repeat(2,1fr); }
  .why3-card:nth-child(2) { border-right: none; }
  .why3-card:nth-child(2) ~ .why3-card { border-top: 1px solid #e8ecf3; }
  .why3-card:nth-child(4), .why3-card:nth-child(6) { border-right: none; }
}

/* ============================================================
   FREE HANDBOOK V2 — PIXEL-PERFECT MOCKUP REDESIGN
   ============================================================ */

.hbv2-section {
  background: #f4f6fb;
  padding: 72px 0 0;
  overflow: hidden;
}

/* Two-column container */
.hbv2-container {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}

/* ── LEFT COLUMN ── */
/* Free badge */
.hbv2-free-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid #e2e8f0;
  color: #475569; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 25px; margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.hbv2-free-badge i { color: #6366f1; }

/* Heading */
.hbv2-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 900; color: #0f172a;
  line-height: 1.18; letter-spacing: -.5px; margin-bottom: 14px;
}
.hbv2-blue { color: #6366f1; }
.hbv2-sub  { font-size: 15.5px; color: #64748b; line-height: 1.7; margin-bottom: 24px; }

/* White content card (book + what's inside) */
.hbv2-content-card {
  background: #fff; border-radius: 18px;
  border: 1px solid #e8ecf3;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  display: grid; grid-template-columns: 1fr 1.3fr;
  overflow: hidden; margin-bottom: 24px;
}

/* Book area */
.hbv2-book-area {
  background: linear-gradient(135deg,#f0f0ff 0%,#e8eeff 100%);
  padding: 28px 20px; display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 260px;
}
/* Floating badges around book */
.hbv2-float-badge {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.hbv2-fb-top    { top: 16px; right: 16px; color: #16a34a; }
.hbv2-fb-bottom { bottom: 16px; left: 16px; color: #f97316; }

/* Book mockup */
.hbv2-book {
  width: 130px;
  background: #fff;
  border-radius: 4px 10px 10px 4px;
  box-shadow: 6px 6px 24px rgba(0,0,0,.2), inset -3px 0 6px rgba(0,0,0,.08);
  overflow: hidden; position: relative;
}
.hbv2-book-inner { padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.hbv2-book-label {
  display: inline-block; background: #ede9fe; color: #6d28d9;
  font-size: 7.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; width: fit-content;
}
.hbv2-book-title { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.hbv2-book-sub   { font-size: 10px; color: #475569; line-height: 1.35; font-weight: 500; }
.hbv2-book-art   { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; margin: 4px 0; }
.hbv2-book-pages { font-size: 8.5px; color: #94a3b8; font-weight: 500; line-height: 1.4; }

/* What's Inside list */
.hbv2-inside { padding: 20px 18px 20px 16px; }
.hbv2-inside-title { font-size: 13.5px; font-weight: 800; color: #0f172a; margin-bottom: 13px; }
.hbv2-inside-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hbv2-ii { display: flex; align-items: flex-start; gap: 10px; }
.hbv2-ii-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.hbv2-ii strong { display: block; font-size: 12.5px; font-weight: 700; color: #0f172a; margin-bottom: 1px; }
.hbv2-ii span   { font-size: 11px; color: #64748b; }

/* Trust row */
.hbv2-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hbv2-tr {
  display: flex; align-items: center; gap: 9px;
}
.hbv2-tr-ico {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(99,102,241,.1); color: #6366f1;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.hbv2-ti-blue  { background: rgba(37,99,235,.1);  color: #2563eb; }
.hbv2-ti-amber { background: rgba(245,158,11,.1); color: #f59e0b; }
.hbv2-ti-green { background: rgba(22,163,74,.1);  color: #16a34a; }
.hbv2-tr strong { display: block; font-size: 13px; font-weight: 700; color: #0f172a; }
.hbv2-tr span   { font-size: 11px; color: #94a3b8; }

/* ── RIGHT COLUMN: Form card ── */
.hbv2-form-card {
  background: #fff; border-radius: 20px;
  border: 1px solid #e8ecf3;
  box-shadow: 0 8px 40px rgba(0,0,0,.09);
  padding: 32px 28px;
  position: relative; overflow: hidden;
}
/* Sparkle decorations */
.hbv2-sp {
  position: absolute; font-size: 18px; color: #818cf8; pointer-events: none; opacity: .5;
}
.sp1 { top: 18px; right: 44px; font-size: 12px; color: #f59e0b; }
.sp2 { top: 52px; right: 24px; font-size: 10px; color: #6366f1; }
.sp3 { bottom: 140px; right: 18px; font-size: 9px; color: #22c55e; }

/* Form badge */
.hbv2-form-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #dcfce7; color: #15803d;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
/* Form heading */
.hbv2-form-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900; color: #0f172a;
  line-height: 1.2; margin-bottom: 7px;
}
.hbv2-form-sub { font-size: 14px; color: #64748b; margin-bottom: 22px; line-height: 1.6; }

/* Form fields */
.hbv2-form { display: flex; flex-direction: column; gap: 14px; }
.hbv2-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hbv2-field { display: flex; flex-direction: column; gap: 5px; }
.hbv2-field label { font-size: 13px; font-weight: 600; color: #374151; }
.hbv2-input-wrap { position: relative; display: flex; align-items: center; }
.hbv2-inp-ico {
  position: absolute; left: 14px; color: #94a3b8; font-size: 13px; pointer-events: none; z-index: 1;
}
.hbv2-input-wrap input {
  width: 100%; padding: 12px 14px 12px 38px;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: #0f172a;
  outline: none; transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.hbv2-input-wrap input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.hbv2-input-wrap input::placeholder { color: #cbd5e1; }

/* BIG Download CTA button */
.hbv2-download-btn {
  width: 100%; margin-top: 4px;
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
  border: none; border-radius: 14px;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; transition: transform .25s, box-shadow .25s;
  box-shadow: 0 8px 28px rgba(99,102,241,.4);
  text-align: left;
}
.hbv2-download-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(99,102,241,.5); }
/* Download circle icon */
.hbv2-dl-ico {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.hbv2-dl-text { display: flex; flex-direction: column; gap: 3px; }
.hbv2-dl-text strong { display: block; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; }
.hbv2-dl-text span   { font-size: 12px; color: rgba(255,255,255,.72); }

/* Social proof */
.hbv2-social-proof {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9;
}
.hbv2-sp-avs { display: flex; }
.hbv2-sp-avs img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: #e2e8f0; }
.hbv2-sp-avs img:first-child { margin-left: 0; }
.hbv2-social-proof span { font-size: 13px; color: #64748b; }
.hbv2-social-proof strong { color: #6366f1; font-weight: 800; }

/* ── LOGO TRUST BAR (inside section) ── */
.hbv2-logos-bar {
  background: #fff;
  margin-top: 52px;
  padding: 36px 32px;
  border-top: 1px solid #e8ecf3;
}
.hbv2-logos-hdg {
  text-align: center; font-size: 14px; font-weight: 600; color: #475569;
  margin-bottom: 28px;
}
.hbv2-logos-row {
  display: flex; align-items: center; justify-content: center;
  gap: 44px; flex-wrap: wrap;
}
.hbv2-lg {
  font-weight: 800; color: #374151; opacity: .55;
  transition: opacity .2s; cursor: default; text-align: center; line-height: 1.2;
}
.hbv2-lg:hover { opacity: .85; }
.lg-moma       { font-size: 24px; font-family: 'DM Sans', sans-serif; letter-spacing: -1px; }
.lg-met        { font-size: 10px; font-family: Georgia, serif; letter-spacing: 2px; text-transform: uppercase; }
.lg-tate       { font-size: 22px; font-family: Georgia, serif; letter-spacing: 5px; font-weight: 400; }
.lg-va         { font-size: 26px; font-family: Georgia, serif; font-style: italic; }
.lg-guggenheim { font-size: 13px; font-family: 'DM Sans', sans-serif; letter-spacing: 2.5px; text-transform: uppercase; }
.lg-whitney    { font-size: 19px; font-family: Georgia, serif; letter-spacing: .5px; }
.lg-saatchi    { font-size: 11px; font-family: Georgia, serif; letter-spacing: 1.5px; text-transform: uppercase; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .hbv2-container { grid-template-columns: 1fr; gap: 36px; }
  .hbv2-trust { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px) {
  .hbv2-content-card { grid-template-columns: 1fr; }
  .hbv2-book-area { min-height: 180px; }
  .hbv2-field-row { grid-template-columns: 1fr; }
  .hbv2-logos-row { gap: 22px; }
}
@media(max-width:480px) {
  .hbv2-container { padding: 0 16px; }
  .hbv2-trust { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   GLOBAL HEADING OVERRIDE — DM Sans 900 across all headings
   Reference: "Your Gallery Deserves a Website That Actually Sells Art"
   ============================================================ */

/* Universal heading reset to DM Sans 900 */
h1, h2, h3, h4, h5, h6,
.sec-title,
.hv2-h1,
.svc-v3-h2,
.pv2-title,
.proc-title,
.hbv2-title,
.hbv2-form-title,
.why3-title,
.about-ttl,
.consult-card h3,
.cmodal-right h3,
.seo-v2-title,
.seo-banner h2,
.blog-featured-body h3,
.blg2-body h4,
.blog-body h3,
.tv3-card p,
.test-card blockquote,
.price-card h3,
.portfolio-card h3,
.proc-card h3,
.why3-card h3,
.sw-card-v2 h3,
.svc-v3-feat h4,
.cmodal-headline h3,
.hbv2-book-title,
.bm-preview-text h3,
.bm-site-hero-text h3,
.svc-brow-h3,
.svc-ph-overlay h4,
.seo-v2-wrap h2,
.handbook-wrap h2 {
  font-family: 'DM Sans', sans-serif !important;
}

/* All major headings → weight 900 */
h1, h2, .sec-title, .hv2-h1, .svc-v3-h2, .pv2-title,
.proc-title, .hbv2-title, .hbv2-form-title, .why3-title,
.about-ttl, .seo-v2-title {
  font-weight: 900 !important;
}

/* Sub-headings → 800 */
h3, h4, .consult-card h3, .proc-card h3, .why3-card h3,
.sw-card-v2 h3, .bm-preview-text h3, .svc-brow-h3 {
  font-weight: 800 !important;
}

/* Tighten letter-spacing on large headings for DM Sans feel */
.sec-title,
.hbv2-title,
.hbv2-form-title,
.pv2-title,
.proc-title,
.why3-title,
.about-ttl,
.svc-v3-h2,
.seo-v2-title {
  letter-spacing: -.5px;
}

.hv2-h1 {
  letter-spacing: -1.5px !important;
}

/* Stats numbers — DM Sans bold */
.tnum, .tv2-num, .hstat-n, .hv2-sn, .a-num, .price-num, .price-label-t,
.cms-num, .score-num, .sac-overall-num, .tv3-rating-big {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 900 !important;
}

/* ============================================================
   HANDBOOK BOOK — 3D PERSPECTIVE MATCHING MOCKUP
   White hardcover, colorful paint splash, angled perspective
   ============================================================ */

/* Override old book styles */
.hbv2-book { display: none !important; }

/* Book container — apply 3D perspective tilt */
.hbv2-book-3d {
  position: relative;
  display: inline-block;
  width: 170px;
  transform: perspective(700px) rotateY(-16deg) rotateX(4deg);
  transform-style: preserve-3d;
  filter: drop-shadow(18px 28px 36px rgba(0,0,0,.22));
  transition: transform .4s ease;
}
.hbv2-book-3d:hover {
  transform: perspective(700px) rotateY(-10deg) rotateX(2deg);
  filter: drop-shadow(22px 32px 44px rgba(0,0,0,.28));
}

/* Pages stack — visible at bottom-right edge */
.hbv2-pages-stack {
  position: absolute;
  bottom: -6px; left: 22px; right: -5px; height: 10px;
  border-radius: 0 0 5px 2px;
  background: repeating-linear-gradient(
    90deg,
    #fff  0px,   #fff  1.5px,
    #e8e9ec 1.5px, #e8e9ec 3px
  );
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

/* Spine — left edge of book */
.hbv2-spine {
  position: absolute;
  top: 0; left: 0; bottom: 6px;
  width: 22px;
  background: linear-gradient(to right, #bbbdc2 0%, #d0d2d8 40%, #dddee3 70%, #c8cacc 100%);
  border-radius: 3px 0 0 3px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.08);
}

/* Front cover */
.hbv2-cover {
  position: relative;
  margin-left: 22px;
  background: #ffffff;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  min-height: 248px;
  border: 1px solid rgba(0,0,0,.06);
  border-left: none;
}

/* SVG paint splash — fills right side, absolutely positioned */
.hbv2-paint-svg {
  position: absolute;
  top: 0; right: 0;
  width: 62%;
  height: 100%;
}

/* Cover text — overlays left portion */
.hbv2-cover-text {
  position: relative; z-index: 2;
  padding: 18px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.hbv2-cover-badge {
  display: inline-block;
  background: rgba(99,102,241,.14); color: #4338ca;
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 12px;
  width: fit-content;
}
.hbv2-cover-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 26px; font-weight: 900 !important;
  color: #0f172a; line-height: 1.1;
  letter-spacing: -.5px;
}
.hbv2-cover-sub {
  font-size: 12px; font-weight: 600; color: #334155; line-height: 1.4;
}
.hbv2-cover-pages {
  font-size: 9.5px; color: #94a3b8; line-height: 1.5;
  margin-top: auto;
  padding-top: 48px;
}

/* Book area — center the 3D book */
.hbv2-book-area {
  background: linear-gradient(135deg,#eff2ff 0%,#e8eeff 100%) !important;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px !important; padding: 32px 20px !important;
  position: relative;
}

/* ============================================================
   PRICING V2 — PIXEL-PERFECT MOCKUP
   ============================================================ */
.prcv2-section {
  background: #f0f2f8;
  padding: 72px 0 0;
  position: relative; overflow: hidden;
}
/* Dot grid top-left */
.prcv2-dots {
  position: absolute; top: 0; left: 0; width: 220px; height: 220px;
  background-image: radial-gradient(#c7d2fe 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: .7; pointer-events: none;
}
/* Curved arrow */
.prcv2-arrow {
  position: absolute; bottom: 220px; left: 60px;
  width: 120px; opacity: .7; pointer-events: none;
}
/* Framed art + plant deco — top right */
.prcv2-art-deco {
  position: absolute; top: 0; right: 0;
  width: 260px; z-index: 0; pointer-events: none;
}
.prcv2-art-img { width: 100%; height: auto; display: block; }

/* Header */
.prcv2-hdr { text-align: center; max-width: 640px; margin: 0 auto 52px; position: relative; z-index: 2; }
.prcv2-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(99,102,241,.1); color: #6366f1;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 18px; border-radius: 20px; margin-bottom: 18px;
}
.prcv2-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px); font-weight: 900;
  color: #0f172a; line-height: 1.15; letter-spacing: -.5px; margin-bottom: 14px;
}
.prcv2-blue { color: #6366f1; }
.prcv2-sub { font-size: 16px; color: #64748b; line-height: 1.7; }

/* 3-column cards grid */
.prcv2-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; align-items: start;
  position: relative; z-index: 2;
}

/* Base card */
.prcv2-card {
  background: #fff; border-radius: 20px;
  padding: 32px 28px;
  border: 1.5px solid #e8ecf3;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .3s ease;
}
.prcv2-card:hover { box-shadow: 0 8px 36px rgba(0,0,0,.1); }

/* Popular card — gradient border */
.prcv2-popular {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #6366f1, #8b5cf6) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 40px rgba(99,102,241,.15);
}
.prcv2-popular-pill {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 20px; border-radius: 25px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}

/* Card icon */
.prcv2-card-ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px;
}
.prcv2-ico-blue   { background: rgba(99,102,241,.1);  color: #6366f1; }
.prcv2-ico-purple { background: rgba(124,58,237,.1);  color: #7c3aed; }
.prcv2-ico-indigo { background: rgba(67,56,202,.1);   color: #4338ca; }

/* Plan labels */
.prcv2-plan-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; }
.prcv2-label-blue   { color: #6366f1; }
.prcv2-label-purple { color: #7c3aed; }

/* Price row */
.prcv2-price-row { display: flex; align-items: baseline; gap: 3px; margin-bottom: 12px; }
.prcv2-sym    { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1; }
.prcv2-amount { font-family: 'DM Sans', sans-serif; font-size: 52px; font-weight: 900; color: #0f172a; line-height: 1; letter-spacing: -2px; }
.prcv2-per    { font-size: 14px; color: #94a3b8; font-weight: 500; margin-left: 6px; }
/* Custom price (Enterprise) */
.prcv2-custom-row { align-items: center; }
.prcv2-custom { font-family: 'DM Sans', sans-serif; font-size: 44px; font-weight: 900; color: #0f172a; letter-spacing: -2px; }
.prcv2-per-custom { font-size: 13px; }

/* Description */
.prcv2-desc { font-size: 14px; color: #64748b; line-height: 1.65; margin-bottom: 16px; }

/* Divider */
.prcv2-divider { height: 1px; background: #f1f5f9; margin-bottom: 18px; }

/* Feature list */
.prcv2-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; margin-bottom: 28px; }
.prcv2-feats li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #374151; font-weight: 500; }
.prcv2-chk {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: #6366f1; display: flex; align-items: center; justify-content: center;
}
.prcv2-chk i { color: #fff; font-size: 9px; }
.prcv2-chk-purple { background: #7c3aed; }

/* CTA buttons */
.prcv2-btn-outline {
  width: 100%; padding: 13px; border-radius: 10px;
  background: #fff; border: 1.5px solid #6366f1; color: #6366f1;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; transition: all .25s; margin-top: auto;
}
.prcv2-btn-outline:hover { background: #f5f3ff; }
.prcv2-btn-filled {
  width: 100%; padding: 14px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border: none; color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 16px;
  cursor: pointer; box-shadow: 0 6px 20px rgba(99,102,241,.42); transition: all .25s; margin-top: auto;
}
.prcv2-btn-filled:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,102,241,.52); }

/* Guarantee strip */
.prcv2-guarantee {
  background: #fff; margin-top: 44px;
  padding: 20px 32px;
  border-top: 1px solid #e8ecf3;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.prcv2-g-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 28px; font-size: 13.5px; font-weight: 600; color: #374151;
}
.prcv2-g-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.g-amber   { background: rgba(245,158,11,.12); color: #f59e0b; }
.g-green   { background: rgba(22,163,74,.12);  color: #16a34a; }
.g-yellow  { background: rgba(234,179,8,.12);  color: #ca8a04; }
.g-blue    { background: rgba(37,99,235,.12);  color: #2563eb; }
.g-shopify { background: rgba(149,191,71,.12); color: #5a8f3c; }
.prcv2-g-div { width: 1px; height: 36px; background: #e8ecf3; flex-shrink: 0; }

/* Responsive */
@media(max-width:900px) {
  .prcv2-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .prcv2-art-deco { display: none; }
  .prcv2-guarantee { gap: 8px; }
  .prcv2-g-item { padding: 8px 16px; }
}
@media(max-width:600px) {
  .prcv2-guarantee { flex-direction: column; gap: 4px; }
  .prcv2-g-div { display: none; }
}

/* ── HANDBOOK BOOK PHOTO ── */
.hbv2-book-photo {
  width: 220px; height: auto; display: block;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.18));
  transition: transform .4s ease, filter .4s ease;
}
.hbv2-book-photo:hover {
  transform: scale(1.03) translateY(-6px);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.24));
}
.hbv2-book-hidden { display: none !important; }

/* ── FORM VALIDATION STYLES ── */
.field-error {
  display: none;
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 4px;
  padding-left: 2px;
}
.field-error--form {
  display: none;
  text-align: center;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: #dc2626 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(220,38,38,.15) !important;
}
input.field-valid,
select.field-valid {
  border-color: #16a34a !important;
}