/* ============================================================
   QuickusLLC — Master CSS Design System
   ============================================================ */

/* ── Google Fonts loaded in HTML ── */
:root {
  /* Colors */
  --clr-bg:        #ffffff;
  --clr-bg-soft:   #f8fafc;
  --clr-bg-soft2:  #f0f4ff;
  --clr-dark:      #0a0f1e;
  --clr-text:      #1e293b;
  --clr-muted:     #64748b;
  --clr-light:     #94a3b8;
  --clr-border:    #e2e8f0;
  --clr-border-lg: #cbd5e1;

  /* Brand */
  --brand:         #4f46e5;
  --brand-dark:    #3730a3;
  --brand-2:       #9333ea;
  --yellow:        #f59e0b;
  --green:         #10b981;
  --cyan:          #0ea5e9;

  /* Gradients */
  --g-brand:  linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
  --g-yellow: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --g-green:  linear-gradient(135deg, #10b981 0%, #059669 100%);
  --g-cyan:   linear-gradient(135deg, #0ea5e9 0%, #4f46e5 100%);
  --g-hero:   linear-gradient(155deg, #f0f4ff 0%, #f8fafc 40%, #faf5ff 100%);

  /* Shadows */
  --sh-xs:  0 1px 3px rgba(0,0,0,.06);
  --sh-sm:  0 4px 12px rgba(0,0,0,.07);
  --sh-md:  0 10px 30px rgba(0,0,0,.09);
  --sh-lg:  0 20px 50px rgba(0,0,0,.12);
  --sh-xl:  0 30px 70px rgba(0,0,0,.15);
  --sh-brand: 0 10px 30px rgba(79,70,229,.35);

  /* Radius */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Transitions */
  --ease: cubic-bezier(.215,.61,.355,1);
  --t-sm: .2s var(--ease);
  --t-md: .4s var(--ease);
  --t-lg: .7s var(--ease);
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; font-weight: 700; line-height: 1.15; color: var(--clr-text); }
p  { color: var(--clr-muted); font-size: 1.0625rem; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

/* ── Custom Cursor ──────────────────────────────── */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform .1s, width .3s, height .3s, opacity .3s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(79,70,229,.5);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform .15s, width .3s, height .3s, opacity .3s;
}
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring { width: 52px; height: 52px; border-color: var(--brand); }

/* ── Layout ─────────────────────────────────────── */
.container   { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm{ width: 100%; max-width: 820px;  margin: 0 auto; padding: 0 1.5rem; }
.mx-auto     { margin-left: auto !important; margin-right: auto !important; }
.sec         { padding: 6rem 0; position: relative; }
.sec-sm      { padding: 4rem 0; }

/* ── Typography ─────────────────────────────────── */
.display { font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.025em; line-height: 1.06; font-weight: 800; }
.h1      { font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -.02em; }
.h2      { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.015em; }
.h3      { font-size: clamp(1.375rem, 2.5vw, 2rem); }
.h4      { font-size: 1.25rem; }
.label   { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.lead    { font-size: 1.2rem; color: var(--clr-muted); line-height: 1.75; }

.text-grad { background: var(--g-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-white { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Badges ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 999px;
  font-size: .875rem; font-weight: 600;
  border: 1px solid;
  margin-bottom: 1.25rem;
}
.badge-brand  { background: rgba(79,70,229,.07);  color: var(--brand);  border-color: rgba(79,70,229,.18); }
.badge-yellow { background: rgba(245,158,11,.08); color: #b45309; border-color: rgba(245,158,11,.2); }
.badge-green  { background: rgba(16,185,129,.08); color: #065f46; border-color: rgba(16,185,129,.2); }
.badge-cyan   { background: rgba(14,165,233,.08); color: #0369a1; border-color: rgba(14,165,233,.2); }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 2rem;
  border-radius: 999px;
  font-weight: 600; font-size: 1rem;
  border: none;
  position: relative; overflow: hidden;
  transition: transform var(--t-sm), box-shadow var(--t-sm);
  white-space: nowrap;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t-sm);
}
.btn:hover::after { background: rgba(255,255,255,.12); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary  { background: var(--g-brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { box-shadow: 0 16px 40px rgba(79,70,229,.5); }
.btn-outline  { background: transparent; color: var(--clr-text); border: 1.5px solid var(--clr-border-lg); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--sh-sm); }
.btn-white    { background: #fff; color: var(--brand); box-shadow: var(--sh-md); }
.btn-white:hover  { box-shadow: var(--sh-lg); }
.btn-ghost-w  { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost-w:hover{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.btn-lg { padding: 1.125rem 2.5rem; font-size: 1.0625rem; }
.btn-sm { padding: .625rem 1.5rem; font-size: .9375rem; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Navbar ──────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 900;
  padding: 1.25rem 0;
  transition: padding var(--t-sm), background var(--t-sm), box-shadow var(--t-sm), border-color var(--t-sm);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  padding: .875rem 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--clr-border);
  box-shadow: var(--sh-sm);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-logo  { display: flex; align-items: center; gap: .6rem; font-family: 'Outfit'; font-size: 1.5rem; font-weight: 800; color: var(--clr-text); }
.logo-sq   { width: 36px; height: 36px; border-radius: 10px; background: var(--g-brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
.logo-sq svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5; fill: none; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: .9375rem; font-weight: 500; color: var(--clr-muted); position: relative; padding-bottom: 2px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--g-brand); border-radius:2px; transition: width var(--t-sm); }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }

/* ── Scroll Progress Bar ── */
.scroll-progress-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  background: transparent; z-index: 1000; pointer-events: none;
}
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: var(--g-brand);
  box-shadow: 0 0 10px rgba(79,70,229,.4);
  transition: width 0.1s ease-out;
}

/* ── Upgraded Hero Mockup Content ── */
.mock-title { flex: 1; text-align: center; font-size: .75rem; color: var(--clr-light); font-weight: 500; opacity: .7; }
.sidebar-item {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8125rem; font-weight: 600; color: var(--clr-muted);
  padding: .6rem .75rem; border-radius: 8px; transition: var(--t-sm);
  margin-bottom: .25rem;
}
.sidebar-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.sidebar-item.active { background: rgba(79,70,229,.1); color: var(--brand); }
.sidebar-item:not(.active):hover { background: rgba(0,0,0,.04); color: var(--clr-text); }

.mh-left h3 { font-size: 1.125rem; margin-bottom: .25rem; color: var(--clr-text); }
.status-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(16,185,129,.1); color: #059669;
  padding: .25rem .75rem; border-radius: 20px; font-size: .75rem; font-weight: 700;
}
.pulse {
  width: 8px; height: 8px; background: #10b981; border-radius: 50%;
  box-shadow: 0 0 0 rgba(16,185,129, 0.4);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(16,185,129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); }
}

.m-doc-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.m-doc-item {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--clr-border);
  padding: .75rem 1rem; border-radius: 10px; font-size: .8125rem; color: var(--clr-text);
  box-shadow: var(--sh-xs);
}
.m-doc-item svg { width: 16px; height: 16px; stroke: var(--brand); stroke-width: 2; fill: none; }
.doc-tag {
  margin-left: auto; font-size: .65rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 4px;
  background: var(--clr-bg-soft); color: var(--clr-light); text-transform: uppercase;
}

/* ── Shimmering Button Effect ── */
.btn-primary.shimmer { position: relative; overflow: hidden; }
.btn-primary.shimmer::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ── 4. Card Tilt Styles ── */
.tilt-card { transition: transform 0.1s ease-out; transform-style: preserve-3d; }

/* Mobile hamburger (hidden on desktop) */
.nav-ham { 
  display: none; flex-direction: column; gap: 5px; cursor: pointer; 
  padding: 8px; margin-right: -8px; z-index: 1001;
}
.nav-ham span { display: block; width: 24px; height: 2px; background: var(--clr-text); border-radius: 2px; transition: var(--t-sm); }

/* Mobile menu overlay (hidden on desktop) */
.nav-mobile { display: none; }
.mob-close { display: none; }

/* ── Testimonial Marquee ── */
.marquee-container {
  overflow: hidden; width: 100%; padding: 2rem 0;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-content {
  display: flex; gap: 1.5rem; width: max-content;
  animation: scrollMarquee 40s linear infinite;
}
.marquee-content:hover { animation-play-state: paused; }
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - .75rem)); }
}
.testi-card.mq { width: 350px; flex-shrink: 0; }

/* ── Section Header ──────────────────────────────── */
.sec-header { text-align: center; max-width: 680px; margin: 0 auto 4rem; }
.sec-header p { font-size: 1.125rem; margin-top: 1rem; }

/* ── Grid Helpers ────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-auto-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem; }
.grid-auto-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }

/* ── Card Base ───────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2.25rem;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: rgba(79,70,229,.25); }

/* ── Floating badges on images ───────────────────── */
.img-wrap { position: relative; }
.img-wrap img { border-radius: var(--r-lg); width: 100%; box-shadow: var(--sh-lg); border: 1px solid var(--clr-border); }
.float-pill {
  position: absolute;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .875rem;
  box-shadow: var(--sh-md);
  animation: floatY 3s ease-in-out infinite;
}
.float-pill.a { bottom: -1.25rem; left: -1.5rem; animation-delay: 0s; }
.float-pill.b { top: -1.25rem; right: -1.5rem; animation-delay: 1.5s; }
.fp-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; }
.fp-text strong { display: block; font-size: 1rem; font-family: 'Outfit'; }
.fp-text span   { font-size: .8rem; color: var(--clr-light); }

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Checklist ───────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 1.125rem; }
.check-row { display: flex; align-items: flex-start; gap: 1rem; }
.check-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--g-green); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-ico svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; }
.check-txt strong { display: block; font-weight: 600; font-size: 1.0625rem; }
.check-txt p { font-size: .9375rem; margin: .2rem 0 0; }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero-section {
  min-height: 100vh;
  padding: calc(80px + 4rem) 0 5rem;
  background: var(--g-hero);
  position: relative;
  overflow: hidden;
}
/* Grain texture overlay */
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .6;
}
/* Decorative blobs */
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0;
}
.hero-blob-1 { width: 600px; height: 600px; background: rgba(79,70,229,.12); top: -10%; right: -8%; animation: blobFloat1 8s ease-in-out infinite; }
.hero-blob-2 { width: 400px; height: 400px; background: rgba(147,51,234,.1); bottom: 0; left: -5%; animation: blobFloat2 10s ease-in-out infinite; }
.hero-blob-3 { width: 300px; height: 300px; background: rgba(245,158,11,.08); top: 30%; right: 25%; animation: blobFloat1 12s ease-in-out infinite reverse; }

@keyframes blobFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(.95)} }
@keyframes blobFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }

.hero-grid { position: relative; z-index: 2; }

.hero-text h1   { margin: 1rem 0 1.5rem; }
.hero-text .lead { max-width: 520px; margin-bottom: 2.5rem; }
.hero-btns      { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-trust {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: 2.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--clr-border);
  flex-wrap: wrap;
}
.hero-avatars { display: flex; }
.hero-avatars img {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -8px; object-fit: cover;
}
.hero-avatars img:first-child { margin-left: 0; }
.hero-trust-text strong { display: block; font-family: 'Outfit'; font-size: 1rem; }
.hero-trust-text span   { font-size: .875rem; color: var(--clr-light); }

/* ── Hero Image ─────────────────────────── */
.hero-img-side { position: relative; }
.hero-mockup {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:perspective(1200px) rotateY(-4deg) translateY(0)} 50%{transform:perspective(1200px) rotateY(-4deg) translateY(-12px)} }

.hero-mockup-top {
  background: var(--clr-bg-soft);
  padding: 12px 16px;
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 8px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: #ef4444; } .dot-y { background: #f59e0b; } .dot-g { background: #10b981; }
.hero-mockup-body { display: flex; }

.mockup-sidebar {
  width: 180px; border-right: 1px solid var(--clr-border);
  padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--clr-bg-soft);
}
.s-logo { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.s-logo-sq { width: 24px; height: 24px; background: var(--g-brand); border-radius: 6px; }
.s-logo-txt { height: 8px; background: var(--clr-border); border-radius: 4px; flex: 1; }

.sidebar-item {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8125rem; font-weight: 600; color: var(--clr-muted);
  padding: .6rem .75rem; border-radius: 8px; transition: var(--t-sm);
  height: auto; background: transparent;
}
.sidebar-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.sidebar-item.active { background: rgba(79,70,229,.1); color: var(--brand); }

.mockup-main { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; }
.m-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; height: auto; background: transparent; width: auto; }
.mh-left h3 { font-size: 1.125rem; margin: 0; color: var(--clr-text); line-height: 1.2; }

.m-cards  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-card   { 
  background: #fff; border: 1px solid var(--clr-border); border-radius: 12px; 
  padding: 12px; height: auto; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.m-card.accent { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.02); }
.m-card::after { content: ''; position: absolute; bottom: -10px; right: -10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.03); }
.m-card .mm-label { font-size: .65rem; color: var(--clr-light); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; height: auto; background: none; width: auto; margin:0; }
.m-card .mm-val   { font-size: .9375rem; color: var(--clr-text); font-weight: 700; height: auto; background: none; width: auto; }

.m-table { flex:1; background: var(--clr-bg-soft); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.m-row   { height: 8px; background: var(--clr-border); border-radius: 4px; }
.m-row.w100{width:100%} .m-row.w80{width:80%} .m-row.w60{width:60%} .m-row.w90{width:90%}

/* ══════════════════════════════════════════════════════
   TRUST / SOCIAL PROOF BAR
══════════════════════════════════════════════════════ */
.trust-bar {
  padding: 2rem 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  background: #fff;
}
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.trust-label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-light); white-space: nowrap; }
.trust-logos { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; opacity: .45; filter: grayscale(1); }
.t-logo { font-family: 'Outfit'; font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.t-logo svg { width: 20px; height: 20px; }

/* STATS BAR */
.stats-bar { background: var(--clr-bg-soft2); padding: 3.5rem 0; border-bottom: 1px solid var(--clr-border); }
.stats-row { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-num  { font-family: 'Outfit'; font-size: 3rem; font-weight: 800; color: var(--brand); display: block; line-height: 1; }
.stat-lbl  { font-size: .9375rem; color: var(--clr-muted); margin-top: .5rem; display: block; }

/* ══════════════════════════════════════════════════════
   SERVICES SECTION
══════════════════════════════════════════════════════ */
.svc-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md);
  position: relative;
}
.svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--g-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-md); }
.svc-card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); border-color: rgba(79,70,229,.25); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card-img { height: 200px; overflow: hidden; position: relative; }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc-card:hover .svc-card-img img { transform: scale(1.06); }
.svc-card-body { padding: 2rem; }
.svc-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.svc-ico svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.svc-card-body h3 { font-size: 1.3125rem; margin-bottom: .6rem; }
.svc-card-body p  { font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   FEATURES / BENEFITS
══════════════════════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.75rem; }
.feat-card {
  padding: 2.25rem 2rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md);
  position: relative; overflow: hidden;
}
.feat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(79,70,229,.2); }
.feat-card-shine {
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(79,70,229,.07), transparent 60%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.feat-card:hover .feat-card-shine { opacity: 1; }
.feat-img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 1.5rem; }
.feat-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.feat-ico svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; }
.feat-card h3 { font-size: 1.1875rem; margin-bottom: .6rem; }
.feat-card p  { font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════ */
.steps-wrap { position: relative; }
.steps-line {
  position: absolute; top: 88px; left: calc(50% / 3); right: calc(50% / 3);
  height: 2px;
  background: linear-gradient(to right, var(--brand), var(--brand-2));
  opacity: .18; pointer-events: none;
}
.step-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  transition: transform var(--t-md), box-shadow var(--t-md);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.step-card-img   { width: 100%; height: 190px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 2rem; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--g-brand); color: #fff;
  font-family: 'Outfit'; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: var(--sh-brand);
  position: relative; z-index: 2;
}
.step-card h3 { margin-bottom: .75rem; }
.step-card p  { font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   WHY US (Split)
══════════════════════════════════════════════════════ */
.why-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.why-item {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem; background: var(--clr-bg-soft);
  border-radius: var(--r-md); border: 1px solid var(--clr-border);
  transition: border-color var(--t-sm), box-shadow var(--t-sm);
}
.why-item:hover { border-color: rgba(79,70,229,.35); box-shadow: var(--sh-sm); }
.why-n { width: 36px; height: 36px; border-radius: 10px; background: var(--g-brand); color: #fff; font-family: 'Outfit'; font-weight: 800; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-copy strong { display: block; font-size: 1.0625rem; margin-bottom: .2rem; }
.why-copy p { font-size: .9375rem; margin: 0; }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════ */
.testi-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 2.25rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md);
  height: 100%;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(79,70,229,.2); }
.stars { display: flex; gap: 3px; color: #f59e0b; }
.stars svg { width: 17px; height: 17px; fill: currentColor; }
.testi-card blockquote { font-size: 1rem; line-height: 1.75; color: var(--clr-muted); font-style: italic; flex: 1; }
.testi-author { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--clr-border); margin-top: auto; }
.testi-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testi-meta strong { display: block; font-size: 1rem; }
.testi-meta span   { font-size: .875rem; color: var(--clr-light); }

/* ══════════════════════════════════════════════════════
   USE CASES (alternating)
══════════════════════════════════════════════════════ */
.uc-block { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; margin-bottom: 6rem; }
.uc-block:last-child { margin-bottom: 0; }
.uc-block.flip { direction: rtl; }
.uc-block.flip > *{ direction: ltr; }
.uc-block img  { border-radius: var(--r-lg); width: 100%; box-shadow: var(--sh-lg); border: 1px solid var(--clr-border); }
.uc-text h3   { font-size: 2rem; margin-bottom: 1rem; }
.uc-text p    { margin-bottom: 1.5rem; }
.tag-group { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tag { padding: .375rem .875rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.tag-green  { background: rgba(16,185,129,.1);  color: #065f46; }
.tag-blue   { background: rgba(14,165,233,.1);  color: #0369a1; }
.tag-purple { background: rgba(79,70,229,.1);   color: var(--brand); }
.tag-yellow { background: rgba(245,158,11,.1);  color: #92400e; }

/* ══════════════════════════════════════════════════════
   COMPLIANCE / SUPPORT BOX
══════════════════════════════════════════════════════ */
.compliance-wrap {
  background: linear-gradient(135deg, #f0f4ff, #faf5ff);
  border: 1px solid rgba(79,70,229,.15);
  border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 5rem;
  padding: 5rem 4rem;
  position: relative; overflow: hidden;
}
.compliance-wrap::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:rgba(79,70,229,.06); pointer-events:none; }
.compliance-img img { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }

/* ══════════════════════════════════════════════════════
   ECOMMERCE TOOLS CARDS
══════════════════════════════════════════════════════ */
.tool-card {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--clr-border); background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-md), box-shadow var(--t-md);
}
.tool-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.tool-card-img { height: 210px; overflow: hidden; }
.tool-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.tool-card:hover .tool-card-img img { transform: scale(1.06); }
.tool-card-body { padding: 1.75rem; }
.tool-tag { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: .6rem; display: block; }
.tool-card-body h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.tool-card-body p  { font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   LLC BENEFITS SECTION
══════════════════════════════════════════════════════ */
.benefits-section { background: var(--clr-dark); color: #fff; overflow: hidden; position: relative; }
.benefits-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity:.5; pointer-events:none; }
.benefits-section .sec-header h2, .benefits-section .sec-header p { color: rgba(255,255,255,.9); }
.benefits-section .sec-header p { color: rgba(255,255,255,.6); }
.benefit-ico-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 2rem;
  transition: background var(--t-sm), border-color var(--t-sm), transform var(--t-md);
}
.benefit-ico-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); transform: translateY(-5px); }
.bic-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.bic-ico svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2; fill: none; }
.benefit-ico-card h3 { color: #fff; font-size: 1.125rem; margin-bottom: .5rem; }
.benefit-ico-card p  { color: rgba(255,255,255,.6); font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   STATE / PROCESSING SECTION
══════════════════════════════════════════════════════ */
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.state-card {
  background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-md);
  padding: 1.75rem; text-align: center;
  transition: transform var(--t-sm), box-shadow var(--t-sm), border-color var(--t-sm);
}
.state-card:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); border-color: rgba(79,70,229,.25); }
.state-flag { font-size: 2.25rem; margin-bottom: .75rem; display: block; }
.state-card h4 { font-size: 1.0625rem; margin-bottom: .3rem; }
.state-card .days { font-size: .8125rem; color: var(--green); font-weight: 600; background: rgba(16,185,129,.08); padding: .25rem .75rem; border-radius: 999px; display: inline-block; margin-top: .5rem; }
.state-card p { font-size: .875rem; margin-top: .5rem; }

/* ══════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════ */
.price-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.switch { position:relative; display:inline-block; width:56px; height:30px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:var(--clr-border-lg); transition:.3s; border-radius:30px; }
.slider::before { position:absolute; content:""; height:22px; width:22px; left:4px; bottom:4px; background:#fff; transition:.3s; border-radius:50%; box-shadow:var(--sh-xs); }
input:checked + .slider { background: var(--g-brand) !important; }
input:checked + .slider::before { transform: translateX(26px); }
.toggle-label { font-weight: 600; }
.save-pill { background: rgba(16,185,129,.1); color: #065f46; font-size: .8125rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; }

.pricing-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; }
.price-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t-md), box-shadow var(--t-md);
  box-shadow: var(--sh-xs);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.price-card.pop {
  border: 2px solid var(--brand);
  background: linear-gradient(155deg, #f8faff, #fff);
  box-shadow: 0 24px 60px rgba(79,70,229,.18);
  transform: scale(1.04);
  z-index: 2;
}
.price-card.pop:hover { transform: scale(1.04) translateY(-6px); }
.pop-ribbon {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--g-brand); color: #fff;
  font-size: .8125rem; font-weight: 700;
  padding: .375rem 1.25rem; border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--sh-brand);
}
.plan-label  { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--clr-light); margin-bottom: .75rem; }
.plan-price  { font-family: 'Outfit'; font-size: 3.5rem; font-weight: 800; display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.plan-price sub { font-size: 1.25rem; font-weight: 600; color: var(--clr-muted); align-self: flex-start; margin-top: .75rem; }
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--clr-light); font-family: 'Inter'; }
.plan-desc   { font-size: .9375rem; color: var(--clr-light); margin-bottom: 2.25rem; }
.plan-divider{ height: 1px; background: var(--clr-border); margin: 1.75rem 0; }
.plan-feats  { display: flex; flex-direction: column; gap: 1rem; flex: 1; margin-bottom: 2.5rem; }
.plan-feats li { display: flex; align-items: flex-start; gap: .875rem; font-size: .9375rem; }
.plan-feats li svg { width: 18px; height: 18px; stroke: var(--green); stroke-width: 2.5; fill: none; flex-shrink: 0; margin-top: 2px; }
.plan-feats li.no svg { stroke: var(--clr-light); }
.plan-feats li.no { color: var(--clr-light); }

/* ══════════════════════════════════════════════════════
   GUARANTEE / REFUND SECTION
══════════════════════════════════════════════════════ */
.guarantee-box {
  background: linear-gradient(135deg, #f0fff4, #ecfdf5);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: var(--r-xl); padding: 4rem;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3rem;
}
.guarantee-icon { width: 100px; height: 100px; border-radius: 50%; background: var(--g-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 30px rgba(16,185,129,.3); }
.guarantee-icon svg { width: 50px; height: 50px; stroke: #fff; stroke-width: 2; fill: none; }
.guarantee-text h3 { font-size: 2rem; margin-bottom: 1rem; }
.guarantee-text p  { max-width: 600px; }

/* ══════════════════════════════════════════════════════
   LIVE CHAT CTA BOX
══════════════════════════════════════════════════════ */
.chat-cta {
  background: var(--g-brand);
  border-radius: var(--r-xl); padding: 3.5rem 4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  position: relative; overflow: hidden; color: #fff;
}
.chat-cta::before { content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; background:rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
.chat-cta-text h3  { font-size: 2rem; color: #fff; margin-bottom: .75rem; }
.chat-cta-text p   { color: rgba(255,255,255,.8); max-width: 520px; }
.chat-indicator { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.chat-dot { width: 10px; height: 10px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 3px rgba(74,222,128,.25); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.25); } 50% { box-shadow: 0 0 0 6px rgba(74,222,128,.1); } }

/* ══════════════════════════════════════════════════════
   NEWSLETTER SECTION
══════════════════════════════════════════════════════ */
.newsletter-box {
  background: var(--clr-bg-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl); padding: 4rem;
  text-align: center;
}
.newsletter-box h3 { font-size: 2rem; margin-bottom: .75rem; }
.newsletter-box p  { max-width: 520px; margin: 0 auto 2rem; }
.newsletter-form { display: flex; gap: 1rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 0; padding: .9rem 1.5rem;
  border: 1.5px solid var(--clr-border-lg); border-radius: 999px;
  font-family: inherit; font-size: 1rem; color: var(--clr-text);
  outline: none; transition: border-color var(--t-sm);
  background: #fff;
}
.newsletter-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* ══════════════════════════════════════════════════════
   MAIN FINAL CTA
══════════════════════════════════════════════════════ */
.final-cta {
  background: var(--g-brand);
  border-radius: var(--r-xl); padding: 6rem 5rem;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem;
  overflow: hidden; position: relative;
}
.final-cta::before { content:''; position:absolute; bottom:-100px; right:-100px; width:400px; height:400px; background:rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
.final-cta::after  { content:''; position:absolute; top:-60px; left:40%; width:200px; height:200px; background:rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }
.cta-text h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); color: #fff; margin-bottom: 1.25rem; }
.cta-text p  { color: rgba(255,255,255,.8); font-size: 1.2rem; }
.cta-btns    { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-img     { position: relative; z-index: 1; }
.cta-img img { width: 260px; border-radius: var(--r-lg); box-shadow: var(--sh-xl); }

/* ══════════════════════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--t-sm);
}
.faq-item.open { border-color: rgba(79,70,229,.3); box-shadow: var(--sh-sm); }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 2rem; background: none; border: none;
  font-family: 'Outfit'; font-size: 1.0625rem; font-weight: 600; color: var(--clr-text);
  text-align: left; gap: 1rem; cursor: pointer;
  transition: background var(--t-sm), color var(--t-sm);
}
.faq-btn:hover { background: var(--clr-bg-soft); }
.faq-item.open .faq-btn { color: var(--brand); }
.faq-chevron { flex-shrink: 0; width: 22px; height: 22px; transition: transform var(--t-sm); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-body { display: none; padding: 0 2rem 1.75rem; border-top: 1px solid var(--clr-border); }
.faq-body p { font-size: .9375rem; margin-top: 1.25rem; }
.faq-item.open .faq-body { display: block; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.site-footer { background: var(--clr-bg-soft); border-top: 1px solid var(--clr-border); padding-top: 5rem; }
.footer-grid {
  display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 3.5rem;
  padding-bottom: 4rem; border-bottom: 1px solid var(--clr-border);
}
.footer-brand-col p { margin-top: 1.25rem; font-size: .9375rem; max-width: 300px; }
.footer-col h5 { font-size: 1.0625rem; margin-bottom: 1.5rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .875rem; }
.footer-col a  { font-size: .9375rem; color: var(--clr-muted); transition: color var(--t-sm); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 0; color: var(--clr-light); font-size: .875rem; flex-wrap: wrap; gap: 1rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--clr-border); display: flex; align-items: center; justify-content: center;
  transition: background var(--t-sm);
}
.footer-social a:hover { background: var(--brand); }
.footer-social a svg { width: 16px; height: 16px; stroke: var(--clr-muted); stroke-width: 2; fill: none; }
.footer-social a:hover svg { stroke: #fff; }

/* ══════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════ */
.page-hero {
  padding: calc(80px + 4rem) 0 5rem;
  background: var(--g-hero);
  text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { margin: 1rem 0 1.5rem; }
.page-hero p  { max-width: 620px; margin: 0 auto; font-size: 1.2rem; }
.page-hero-img { margin-top: 4rem; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); }
.page-hero-img img { width: 100%; height: 460px; object-fit: cover; }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; }
.value-card {
  background: #fff; border: 1px solid var(--clr-border); border-radius: var(--r-lg);
  padding: 2.25rem; text-align: center;
  transition: transform var(--t-md), box-shadow var(--t-md);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.value-icon { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.value-icon svg { width: 32px; height: 32px; stroke: #fff; stroke-width: 2; fill: none; }
.value-card h3 { margin-bottom: .75rem; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.team-card {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--clr-border);
  background: #fff; text-align: center;
  transition: transform var(--t-md), box-shadow var(--t-md);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.team-card-img { height: 260px; overflow: hidden; }
.team-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.team-card:hover .team-card-img img { transform: scale(1.06); }
.team-card-body { padding: 2rem; }
.team-card-body h3 { margin-bottom: .35rem; }
.team-role { color: var(--brand); font-size: .9375rem; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════ */
.r { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.r.slide-left  { transform: translateX(-40px); }
.r.slide-right { transform: translateX(40px); }
.r.scale-in    { transform: scale(.94) translateY(20px); }
.r.in { opacity: 1; transform: none; }
.r.d1 { transition-delay: .1s; } .r.d2 { transition-delay: .2s; } .r.d3 { transition-delay: .3s; } .r.d4 { transition-delay: .4s; } .r.d5 { transition-delay: .5s; }

/* ══════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.gap-1 { gap: .75rem; }
.gap-2 { gap: 1.5rem; }
.fw-600 { font-weight: 600; }
.fz-sm { font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   LEAD CAPTURE FORM SECTION
══════════════════════════════════════════════════════ */
.form-section-bg { background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0fff4 100%); }

.form-section-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

/* ── Left info panel ── */
.form-info h2 { margin: .75rem 0 1rem; }
.form-info > p { margin-bottom: 2rem; font-size: 1.0625rem; }

.form-perks { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }
.form-perk-row { display: flex; align-items: flex-start; gap: 1rem; }
.form-perk-ico {
  width: 40px; height: 40px; border-radius: 10px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.form-perk-ico svg { width: 18px; height: 18px; }
.form-perk-row strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.form-perk-row span { font-size: .9rem; color: var(--clr-muted); }

.form-testimonial {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 1.75rem;
  box-shadow: var(--sh-xs);
}
.form-quote { font-style: italic; font-size: .9375rem; color: var(--clr-muted); margin-bottom: 1.25rem; line-height: 1.7; }
.form-quote-author { display: flex; align-items: center; gap: .875rem; }
.form-quote-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.form-quote-author strong { display: block; font-size: .9375rem; }
.form-quote-author span { font-size: .8125rem; color: var(--clr-light); }

/* ── Right form card ── */
.form-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 3rem;
  box-shadow: var(--sh-lg);
  position: relative;
}

.form-card-header {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--clr-border);
}
.form-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--g-brand); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.form-card-icon svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2; fill: none; }
.form-card-header h3 { font-size: 1.3125rem; margin-bottom: .2rem; }
.form-card-header p { font-size: .875rem; color: var(--clr-light); margin: 0; }

/* ── Form elements ── */
.lead-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--clr-text); }

.input-wrap {
  position: relative; display: flex; align-items: center;
}
.input-wrap > svg {
  position: absolute; left: 1rem;
  width: 17px; height: 17px;
  stroke: var(--clr-light); stroke-width: 1.75; fill: none;
  pointer-events: none; flex-shrink: 0;
}
.input-wrap input,
.input-wrap select,
.lead-form textarea {
  width: 100%;
  padding: .875rem 1rem .875rem 2.75rem;
  border: 1.5px solid var(--clr-border-lg);
  border-radius: var(--r-md);
  font-family: inherit; font-size: .9375rem;
  color: var(--clr-text);
  background: var(--clr-bg-soft);
  outline: none;
  transition: border-color var(--t-sm), box-shadow var(--t-sm), background var(--t-sm);
  appearance: none; -webkit-appearance: none;
}
.input-wrap input:focus,
.input-wrap select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); background: #fff; }
.lead-form textarea {
  padding: .875rem 1rem; border: 1.5px solid var(--clr-border-lg);
  border-radius: var(--r-md); resize: vertical; min-height: 90px;
  font-family: inherit; font-size: .9375rem;
  color: var(--clr-text); background: var(--clr-bg-soft);
  outline: none; transition: border-color var(--t-sm), box-shadow var(--t-sm);
}
.lead-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); background: #fff; }

/* Select dropdown arrow */
.select-wrap::after {
  content: '';
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--clr-light);
  pointer-events: none;
}

/* ── Plan radio buttons ── */
.plan-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.plan-radio-opt { cursor: pointer; }
.plan-radio-opt input[type="radio"] { display: none; }
.plan-radio-box {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .875rem .5rem;
  border: 1.5px solid var(--clr-border-lg);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color var(--t-sm), background var(--t-sm), box-shadow var(--t-sm);
  background: var(--clr-bg-soft);
  position: relative;
}
.plan-radio-opt input:checked + .plan-radio-box {
  border-color: var(--brand);
  background: rgba(79,70,229,.05);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.plan-radio-box:hover { border-color: var(--brand); }
.plan-radio-name { font-size: .8125rem; font-weight: 600; }
.plan-radio-price { font-size: 1.0625rem; font-weight: 800; font-family: 'Outfit'; color: var(--brand); }
.pop-plan { border-color: var(--brand); background: rgba(79,70,229,.04); }
.pop-plan-label { font-size: .65rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }

/* ── Privacy note ── */
.form-privacy {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--clr-light); margin-top: .25rem;
}
.form-privacy svg { flex-shrink: 0; }

/* ── Success state ── */
.form-success {
  display: none;
  flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 2rem;
  gap: 1rem;
}
.form-success.active { display: flex; }
.success-check {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--g-green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(16,185,129,.3);
  animation: successPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.success-check svg { width: 40px; height: 40px; }
@keyframes successPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h3 { font-size: 1.75rem; color: var(--clr-text); }
.form-success p { color: var(--clr-muted); max-width: 380px; font-size: .9375rem; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (1100px)
══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .form-section-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .grid-2, .uc-block, .compliance-wrap, .final-cta, .guarantee-box {
    grid-template-columns: 1fr;
    direction: ltr !important;
    gap: 3rem;
  }
  .uc-block.flip > * { direction: ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .price-card.pop { transform: none; }
  .price-card.pop:hover { transform: translateY(-6px); }
  .cta-img { display: none; }
  .chat-cta { flex-direction: column; text-align: center; }
  .hero-section { min-height: auto; padding-top: calc(80px + 3rem); padding-bottom: 4rem; }
  .hero-mockup-body { height: 300px; }
  .mockup-sidebar { width: 180px; padding: 1rem; }
  .float-pill { padding: .75rem 1rem; }
  .float-pill.a { left: 0; bottom: -1rem; }
  .float-pill.b { right: 0; top: -1rem; }
  .compliance-wrap { padding: 3rem; gap: 3rem; }
  .final-cta { padding: 4.5rem 3.5rem; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SMALL TABLET (900px)
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-line { display: none; }
  .sec { padding: 4.5rem 0; }
  .sec-header { margin-bottom: 3rem; }
  .hero-mockup-body { height: 260px; }
  .mockup-sidebar { width: 160px; }
  .stats-row { gap: 2.5rem; }
  .stat-num { font-size: 2.5rem; }
  .trust-logos { gap: 1.5rem; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .navbar { padding: 1.25rem 0; }
  .navbar .container { padding: 0 1.5rem; }
  .nav-ham { display: flex !important; }
  .nav-mobile {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 950;
    display: none; /* Controlled by open class */
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2rem;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-mobile.open { display: flex; opacity: 1; pointer-events: all; }
  .mob-close { display: flex; position: absolute; top: 1.5rem; right: 1.5rem; }
  
  .nav-links, .nav-actions .btn { display: none; }
  .nav-actions { gap: 0; }

  /* ── Custom Cursor OFF ── */
  .cursor-dot, .cursor-ring { display: none !important; }
  body { cursor: auto; }

  /* ── Sections ── */
  .sec { padding: 3.5rem 0; }
  .sec-sm { padding: 2.5rem 0; }
  .container { padding: 0 1.25rem; }
  .sec-header { margin-bottom: 2.5rem; }
  .sec-header p { font-size: 1rem; }

  /* ── Form ── */
  .form-card { padding: 2rem 1.75rem; }
  .form-row-2 { grid-template-columns: 1fr; }
  .plan-radios { grid-template-columns: repeat(3, 1fr); }

  /* ── Hero ── */
  .hero-section { min-height: auto; padding: calc(60px + 2rem) 0 3rem; }
  .hero-text h1 { margin: .75rem 0 1.25rem; font-size: clamp(1.85rem, 10vw, 2.5rem); }
  .hero-text .lead { font-size: 1rem; margin-bottom: 2rem; }
  .hero-btns { flex-direction: column; gap: .75rem; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); }
  .hero-stat strong { font-size: 1.25rem; }

  /* Hero Mockup on Mobile */
  .hero-mockup { animation: none; transform: none; }
  .hero-mockup-body { height: 220px; }
  .mockup-sidebar { display: none; }
  .float-pill { display: none; }
  .hero-blob { display: none; }

  /* ── Trust Bar ── */
  .trust-inner { flex-direction: column; gap: 1.25rem; text-align: center; }
  .trust-logos { justify-content: center; gap: 1.25rem; }
  .t-logo { font-size: 1rem; }

  /* ── Stats ── */
  .stats-row { gap: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 1.75rem; }
  .stat-lbl { font-size: .75rem; }

  /* ── Grids ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 2rem; }
  .grid-auto-3 { grid-template-columns: 1fr; gap: 1.5rem; }
  .grid-auto-4 { grid-template-columns: 1fr; gap: 1.5rem; }

  /* ── Service Cards ── */
  .svc-card-img { height: 180px; }
  .svc-card-body { padding: 1.5rem; }

  /* ── Feature Cards ── */
  .feat-img { height: 160px; }

  /* ── Use Cases ── */
  .uc-block { gap: 2rem; margin-bottom: 4rem; }
  .uc-text h3 { font-size: 1.5rem; }

  /* ── Compliance ── */
  .compliance-wrap { padding: 2.5rem 1.75rem; gap: 2.5rem; }

  /* ── Tools ── */
  .tool-card-img { height: 180px; }

  /* ── Steps ── */
  .step-card-img { height: 160px; }

  /* ── Why Us ── */
  .why-item { padding: 1.25rem; }

  /* ── Testimonials ── */
  .testi-card { padding: 1.75rem; }

  /* ── Pricing ── */
  .pricing-row { grid-template-columns: 1fr; }
  .price-card { padding: 2.5rem 2rem; }
  .plan-price { font-size: 2.75rem; }

  /* ── Guarantee ── */
  .guarantee-box {
    grid-template-columns: 1fr; text-align: center;
    padding: 2.5rem 1.75rem; gap: 1.5rem;
  }
  .guarantee-icon { margin: 0 auto; width: 80px; height: 80px; }
  .guarantee-icon svg { width: 40px; height: 40px; }

  /* ── Chat CTA ── */
  .chat-cta { padding: 2.5rem 1.75rem; flex-direction: column; text-align: center; }
  .chat-cta-text h3 { font-size: 1.5rem; }
  .chat-indicator { justify-content: center; }

  /* ── Newsletter ── */
  .newsletter-box { padding: 2.5rem 1.75rem; }
  .newsletter-box h3 { font-size: 1.5rem; }
  .newsletter-form { flex-direction: column; }

  /* ── Final CTA ── */
  .final-cta { padding: 3rem 2rem; text-align: center; }
  .cta-btns { justify-content: center; flex-direction: column; }
  .cta-btns .btn { width: 100%; justify-content: center; }

  /* ── FAQ ── */
  .faq-btn { padding: 1.25rem 1.5rem; font-size: 1rem; }
  .faq-body { padding: 0 1.5rem 1.5rem; }

  /* ── Footer ── */
  .site-footer { padding-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-social { justify-content: center; }

  /* ── About Page ── */
  .page-hero { padding: calc(70px + 2rem) 0 3rem; }
  .page-hero h1 { margin: .75rem 0 1rem; }
  .page-hero-img img { height: 240px; }
  .value-icon { width: 56px; height: 56px; }
  .value-icon svg { width: 28px; height: 28px; }
  .team-card-img { height: 200px; }

  /* ── State Cards ── */
  .state-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Benefits Dark Section ── */
  .benefit-ico-card { padding: 1.5rem; }
  .bic-ico { width: 44px; height: 44px; }
  .bic-ico svg { width: 22px; height: 22px; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (480px)
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .sec { padding: 3rem 0; }
  .h2 { font-size: 1.85rem; }
  .hero-text h1 { font-size: 2.25rem; line-height: 1.1; }
  .plan-radios { grid-template-columns: 1fr; }
  .m-cards { grid-template-columns: 1fr; }
  .m-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .h1 { font-size: 2rem; }
  .h2 { font-size: 1.75rem; }
  .h3 { font-size: 1.25rem; }
  .lead { font-size: 1rem; }
  .badge { font-size: .8rem; padding: .3rem .75rem; }
  .btn { padding: .75rem 1.5rem; font-size: .9375rem; }
  .btn-lg { padding: .875rem 2rem; font-size: 1rem; }

  .hero-section { padding: calc(60px + 1.5rem) 0 2.5rem; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat strong { font-size: 1.25rem; }
  .hero-stat span { font-size: .75rem; }

  .nav-logo { font-size: 1.2rem; }
  .logo-sq { width: 32px; height: 32px; }
  .navbar { padding: 1rem 0; }
  .navbar.scrolled { padding: .75rem 0; }

  .stats-row { gap: 1.25rem; }
  .stat-num { font-size: 1.75rem; }
  .stat-item { min-width: 70px; }

  .svc-card-img { height: 150px; }
  .svc-card-body { padding: 1.25rem; }
  .svc-ico { width: 40px; height: 40px; }

  .feat-img { height: 140px; }
  .feat-card { padding: 1.5rem; }

  .step-card-img { height: 140px; }
  .step-card { padding: 2rem 1.5rem; }
  .step-num { width: 48px; height: 48px; font-size: 1.25rem; }

  .tool-card-img { height: 150px; }
  .tool-card-body { padding: 1.25rem; }

  .testi-card { padding: 1.5rem; }
  .testi-avatar { width: 40px; height: 40px; }

  .price-card { padding: 2rem 1.5rem; }
  .plan-price { font-size: 2.25rem; }

  .uc-text h3 { font-size: 1.35rem; }
  .tag { font-size: .75rem; padding: .3rem .65rem; }

  .guarantee-box { padding: 2rem 1.5rem; }
  .guarantee-text h3 { font-size: 1.5rem; }

  .chat-cta { padding: 2rem 1.5rem; }
  .chat-cta-text h3 { font-size: 1.35rem; }

  .newsletter-box { padding: 2rem 1.5rem; }
  .final-cta { padding: 2.5rem 1.5rem; }
  .cta-text h2 { font-size: 1.75rem; }

  .faq-btn { padding: 1rem 1.25rem; font-size: .9375rem; }

  .page-hero-img img { height: 180px; }
  .team-card-img { height: 180px; }

  .state-grid { grid-template-columns: 1fr; }

  .compliance-wrap { padding: 2rem 1.25rem; }

  .why-item { flex-direction: column; gap: .75rem; }
  .why-n { align-self: flex-start; }
}

/* ── 5. Modal · Plan Selection ────────────────── */
.modal-overlay {
  position: fixed; inset: 0; 
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-card {
  background: #fff;
  width: 100%; max-width: 580px;
  border-radius: 24px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  transform: translateY(20px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  max-height: 90vh; overflow-y: auto;
}
@media (max-width: 480px) {
  .modal-card { padding: 1.25rem 1rem; border-radius: 16px; }
  .modal-header h3 { font-size: 1.5rem; }
}
.modal-overlay.open .modal-card { transform: translateY(0); }

.modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--clr-bg-soft); border: none;
  font-size: 1.5rem; color: var(--clr-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--t-sm);
}
.modal-close:hover { background: #fee2e2; color: #ef4444; }

.modal-header { text-align: center; margin-bottom: 2rem; }
.modal-header h3 { font-size: 1.75rem; margin-top: .75rem; }
.modal-header p { color: var(--clr-muted); margin-top: .5rem; font-size: .9375rem; }

.modal-form .form-group { margin-bottom: 1.25rem; }

.modal-success {
  display: none; flex-direction: column; align-items: center; text-align: center;
  padding: 1.5rem 0;
}
.modal-success.active { display: flex; }
.modal-success .success-icon {
  width: 72px; height: 72px; background: var(--g-green);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(16,185,129,.3);
}
.modal-success svg { width: 36px; height: 36px; }

body.modal-open { overflow: hidden; }

/* ── Table Responsive Wrapper ── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: var(--r-md);
}

/* ── Final Responsive Overrides ── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .vault-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .pillars-grid, .vault-grid { grid-template-columns: 1fr; }
  .comp-table { font-size: 0.8125rem; }
  .comp-table th, .comp-table td { padding: 1rem .75rem; }
  .sec { padding: 3.5rem 0; }
  .h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
}

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .comp-table { display: block; overflow-x: auto; }
  .pillar-card, .vault-item, .card { padding: 1.5rem; }
}

/* ── 14. Bento Grid & Custom Layouts ─ */
.bento-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
}

.bento-card {
  background: var(--clr-bg-soft);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 2rem;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79,70,229,0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.bento-card-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  opacity: 0.15;
  transition: opacity 0.4s ease;
  background-size: cover;
  background-position: center;
}

.bento-card:hover .bento-card-bg {
  opacity: 0.3;
}

.bento-card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bento-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.bento-card h3 {
  font-family: var(--ff-acc);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.row-2 { grid-row: span 2; }

@media (max-width: 992px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .span-4, .span-6, .span-8 { grid-column: span 1; }
  .row-2 { grid-row: auto; }
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .span-4, .span-6, .span-8 { grid-column: span 1; }
}

/* ── 15. Vertical Journey Roadmap ─ */
.v-roadmap {
  position: relative;
  padding-left: 3rem;
  margin-top: 3rem;
}

.v-roadmap::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand), var(--cyan), transparent);
}

.v-step {
  position: relative;
  margin-bottom: 4rem;
}

.v-step::after {
  content: '';
  position: absolute;
  left: -2.4rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--clr-white);
  border: 4px solid var(--brand);
  box-shadow: 0 0 15px var(--brand);
}

.v-step-num {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display: block;
}

.v-step h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.v-step p {
  color: var(--clr-light);
  max-width: 600px;
}
/* ── 16. Vision Clarity: Three Pillars ─ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.pillar-card {
  background: var(--clr-bg-soft);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 2.5rem;
  padding: 3.5rem 2.5rem;
  text-align: center;
  transition: all 0.5s var(--cb);
  position: relative;
  z-index: 1;
}

.pillar-card:hover {
  transform: translateY(-12px);
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--clr-bg-soft) 0%, rgba(79,70,229,0.05) 100%);
}

.pillar-ico {
  font-size: 3rem;
  margin-bottom: 2rem;
  display: inline-block;
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 2rem;
}

.pillar-card h3 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  font-family: var(--ff-acc);
}

.pillar-card p {
  color: var(--clr-light);
  line-height: 1.7;
}

/* ── 17. Digital Vault Deliverables ─ */
.vault-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.vault-item {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.vault-item svg {
  width: 32px;
  height: 32px;
  margin-bottom: 1rem;
  color: var(--brand);
}

.vault-item h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.vault-item span { font-size: 0.75rem; opacity: 0.5; text-transform: uppercase; }

/* ── 18. Comparison Table ─ */
.comp-wrap {
  background: var(--clr-bg-soft);
  border-radius: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
}

.comp-table th, .comp-table td {
  padding: 1.5rem 2rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.comp-table th {
  background: rgba(255,255,255,0.02);
  color: var(--brand);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.comp-table td:nth-child(2), .comp-table th:nth-child(2) { color: #ff4d4d; }
.comp-table td:nth-child(3), .comp-table th:nth-child(3) { color: #00ff88; font-weight: 600; }

.comp-row:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .span-4, .span-6, .span-8 { grid-column: span 1; }
  .pillars-grid { grid-template-columns: 1fr !important; }
  .vault-grid { grid-template-columns: 1fr !important; }
  .values-grid, .team-grid { grid-template-columns: 1fr; }
}