/* ============================================================
   ADD – Agishaa Demand Drives  |  Professional IT Website CSS
   Gurushasta Innotech · Perambalur, Tamil Nadu
   ============================================================ */

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

/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════════════════ */
:root {
  --clr-primary:        #2563EB;
  --clr-primary-dark:   #1D4ED8;
  --clr-primary-light:  #EFF6FF;
  --clr-accent:         #0EA5E9;
  --clr-accent2:        #6366F1;
  --clr-wa:             #25D366;
  --clr-wa-dark:        #128C7E;
  --clr-success:        #10B981;
  --clr-warning:        #F59E0B;
  --clr-danger:         #EF4444;

  --clr-bg:             #FFFFFF;
  --clr-bg-alt:         #F8FAFF;
  --clr-bg-muted:       #F1F5F9;
  --clr-surface:        #FFFFFF;
  --clr-border:         #E2E8F0;
  --clr-border-light:   #F1F5F9;

  --clr-text:           #0F172A;
  --clr-text-muted:     #64748B;
  --clr-text-light:     #94A3B8;
  --clr-text-inv:       #FFFFFF;

  --clr-dark-bg:        #0F172A;
  --clr-dark-surface:   #1E293B;
  --clr-dark-border:    #334155;

  --font-sans:    'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --space-1:  .25rem; --space-2:  .5rem;  --space-3:  .75rem;
  --space-4:  1rem;   --space-5:  1.25rem;--space-6:  1.5rem;
  --space-8:  2rem;   --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  --radius-sm:  6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl:  24px;--radius-full: 9999px;

  --shadow-xs:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:   0 2px 8px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md:   0 4px 20px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
  --shadow-lg:   0 12px 40px rgba(15,23,42,.14), 0 4px 16px rgba(15,23,42,.08);
  --shadow-xl:   0 24px 64px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.10);
  --shadow-blue: 0 8px 32px rgba(37,99,235,.22);
  --shadow-card: 0 2px 16px rgba(37,99,235,.08), 0 1px 4px rgba(15,23,42,.05);

  --ease:       cubic-bezier(.4,0,.2,1);
  --dur-fast:   150ms; --dur-normal: 250ms; --dur-slow: 400ms;

  --container:  1200px;
  --header-h:   72px;
}

/* ══════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-sans); background:var(--clr-bg);
  color:var(--clr-text); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.modal-open { overflow: hidden; }

img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:700; line-height:1.2; color:var(--clr-text); }
p   { color:var(--clr-text-muted); line-height:1.75; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ══════════════════════════════════════════════════════
   3. ACCESSIBILITY
══════════════════════════════════════════════════════ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100%; left:var(--space-4); background:var(--clr-primary); color:#fff; padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-weight:600; z-index:9999; transition:top var(--dur-fast) var(--ease); }
.skip-link:focus { top:var(--space-2); }

/* ══════════════════════════════════════════════════════
   4. LAYOUT
══════════════════════════════════════════════════════ */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-6); }
.narrow  { max-width:760px; }
.xnarrow { max-width:560px; }

.section       { padding-block:var(--space-20); }
.section-dark  { background:var(--clr-dark-bg); color:var(--clr-text-inv); }
.section-dark h2,.section-dark h3,.section-dark h4 { color:#fff; }
.section-dark p  { color:#CBD5E1; }
.section-dark .eyebrow { color:var(--clr-accent); }
.light-section { background:var(--clr-bg-alt); }

.section-heading { text-align:center; max-width:680px; margin-inline:auto; margin-bottom:var(--space-12); }
.section-heading h2 { font-size:clamp(1.75rem,3.5vw,2.5rem); margin-bottom:var(--space-4); }
.section-heading p  { font-size:1.05rem; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }

/* ══════════════════════════════════════════════════════
   5. TYPOGRAPHY
══════════════════════════════════════════════════════ */
.eyebrow {
  display:inline-block; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--clr-primary); background:var(--clr-primary-light);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
  margin-bottom:var(--space-4);
}
h1  { font-size:clamp(2rem,5vw,3.5rem); }
h2  { font-size:clamp(1.6rem,3vw,2.25rem); }
h3  { font-size:1.25rem; font-weight:600; }
em  { font-style:normal; color:var(--clr-primary); }

/* ══════════════════════════════════════════════════════
   6. BUTTONS
══════════════════════════════════════════════════════ */
.button {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--clr-primary); color:#fff;
  font-weight:600; font-size:.9rem;
  padding:.7rem 1.5rem; border-radius:var(--radius-full);
  border:2px solid transparent;
  transition:background var(--dur-normal) var(--ease),
             transform  var(--dur-fast)   var(--ease),
             box-shadow var(--dur-normal) var(--ease);
  box-shadow:var(--shadow-blue); white-space:nowrap; cursor:pointer;
}
.button:hover { background:var(--clr-primary-dark); transform:translateY(-2px); box-shadow:0 10px 36px rgba(37,99,235,.3); }
.button:active { transform:translateY(0); }

.button-small { font-size:.8rem; padding:.5rem 1.1rem; }

.button-light { background:#fff; color:var(--clr-primary); border-color:var(--clr-border); box-shadow:var(--shadow-sm); }
.button-light:hover { background:var(--clr-primary-light); border-color:var(--clr-primary); box-shadow:var(--shadow-md); }

.button-wa { background:var(--clr-wa); color:#fff; border-color:transparent; box-shadow:0 8px 24px rgba(37,211,102,.3); }
.button-wa:hover { background:var(--clr-wa-dark); box-shadow:0 12px 32px rgba(37,211,102,.4); }

.btn-booknow {
  background:linear-gradient(135deg,#F59E0B,#EF4444); color:#fff !important;
  border:none; box-shadow:0 6px 20px rgba(245,158,11,.35); font-weight:700;
}
.btn-booknow:hover { background:linear-gradient(135deg,#D97706,#DC2626); transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,158,11,.45); }

.footer-link-btn {
  display:block; font-size:.875rem; color:#94A3B8;
  padding:var(--space-1) 0; background:none; border:none;
  cursor:pointer; text-align:left; font-family:inherit;
  transition:color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer-link-btn:hover { color:#fff; padding-left:var(--space-2); }

.text-link { color:var(--clr-primary); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:var(--space-1); transition:gap var(--dur-normal) var(--ease), opacity var(--dur-fast) var(--ease); }
.text-link:hover { gap:var(--space-2); opacity:.8; }

.actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); margin-top:var(--space-6); }

/* ══════════════════════════════════════════════════════
   7. HEADER & NAV
══════════════════════════════════════════════════════ */
.site-header {
  position:sticky; top:0; z-index:900;
  height:var(--header-h);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--clr-border);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-normal) var(--ease);
}
.site-header.scrolled { box-shadow:var(--shadow-sm); }

.nav-wrap { display:flex; align-items:center; gap:var(--space-6); height:100%; }

.brand { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; text-decoration:none; }
.brand-logo-img { width:44px; height:44px; object-fit:contain; border-radius:var(--radius-md); box-shadow:0 2px 8px rgba(37,99,235,.18); background:#fff; }
.brand-logo-light { box-shadow:0 2px 8px rgba(0,0,0,.2); }
.brand-text strong { display:block; font-size:1rem; font-weight:800; color:var(--clr-text); line-height:1.1; letter-spacing:-.02em; }
.brand-text small  { display:block; font-size:.62rem; color:var(--clr-text-muted); font-weight:400; white-space:nowrap; }
.brand-light .brand-text strong { color:#fff; }
.brand-light .brand-text small  { color:rgba(255,255,255,.6); }

.site-nav { display:flex; align-items:center; gap:var(--space-1); margin-left:auto; flex-wrap:nowrap; }
.site-nav a {
  font-size:.85rem; font-weight:500; color:var(--clr-text-muted);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space:nowrap; display:flex; align-items:center; gap:4px;
}
.site-nav a:hover { color:var(--clr-primary); background:var(--clr-primary-light); }
.nav-icon { font-size:.95rem; }
.site-nav .button { margin-left:var(--space-3); }

.menu-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:var(--space-2); border-radius:var(--radius-sm); margin-left:auto; transition:background var(--dur-fast) var(--ease); }
.menu-toggle:hover { background:var(--clr-bg-muted); }
.menu-toggle span { display:block; height:2px; background:var(--clr-text); border-radius:2px; transition:transform var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease), width var(--dur-normal) var(--ease); }
.menu-toggle span:nth-child(2) { width:75%; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; width:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   8. HERO
══════════════════════════════════════════════════════ */
.hero {
  padding-block:var(--space-20) var(--space-16);
  background:linear-gradient(160deg,#EBF3FF 0%,#FFFFFF 50%,#F0FFF4 100%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(37,99,235,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.hero::after {
  content:''; position:absolute; top:-100px; right:-100px;
  width:480px; height:480px;
  background:radial-gradient(circle,rgba(37,99,235,.08) 0%,transparent 70%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; position:relative; z-index:1; }
.hero-grid h1 { margin-bottom:var(--space-5); letter-spacing:-.03em; }
.hero-grid p  { font-size:1.1rem; max-width:500px; }

/* Location badge */
.location-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:.78rem; font-weight:600; color:var(--clr-text-muted);
  background:var(--clr-bg-muted); border:1px solid var(--clr-border);
  padding:4px var(--space-3); border-radius:var(--radius-full);
  margin-bottom:var(--space-4);
}

/* Hero stat badges */
.hero-badges { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.hero-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:#fff; border:1px solid var(--clr-border);
  border-radius:var(--radius-full); padding:var(--space-2) var(--space-4);
  box-shadow:var(--shadow-sm); font-size:.82rem; font-weight:700;
}
.hero-badge .badge-num { color:var(--clr-primary); }

/* Dashboard card */
.dashboard-card { background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl),0 0 0 1px var(--clr-border); overflow:hidden; animation:floatCard 5s ease-in-out infinite; }
@keyframes floatCard { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.dash-top { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); background:var(--clr-bg-alt); border-bottom:1px solid var(--clr-border); font-size:.8rem; font-weight:500; color:var(--clr-text-muted); }
.dash-top > span:last-child { margin-left:auto; letter-spacing:.1em; }
.status-dot { width:8px; height:8px; background:var(--clr-success); border-radius:50%; box-shadow:0 0 0 3px rgba(16,185,129,.2); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 3px rgba(16,185,129,.2); } 50% { box-shadow:0 0 0 6px rgba(16,185,129,.1); } }
.dash-body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.metric small { display:block; font-size:.72rem; color:var(--clr-text-muted); margin-bottom:2px; }
.metric b     { display:block; font-size:1.75rem; font-weight:800; color:var(--clr-text); line-height:1; }
.metric span  { font-size:.72rem; color:var(--clr-text-light); }
.chart { display:flex; align-items:flex-end; gap:4px; height:60px; }
.chart i { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--clr-wa),var(--clr-primary)); opacity:.85; animation:growBar .8s var(--ease) both; }
.chart i:nth-child(1){height:40%;animation-delay:.05s}.chart i:nth-child(2){height:65%;animation-delay:.1s}.chart i:nth-child(3){height:50%;animation-delay:.15s}.chart i:nth-child(4){height:80%;animation-delay:.2s}.chart i:nth-child(5){height:60%;animation-delay:.25s}.chart i:nth-child(6){height:90%;animation-delay:.3s}.chart i:nth-child(7){height:70%;animation-delay:.35s}
@keyframes growBar { from { height:0; } }
.channel-list { display:flex; flex-direction:column; gap:var(--space-2); }
.channel-list > div { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--clr-bg-alt); border-radius:var(--radius-sm); font-size:.82rem; }
.channel-list > div b     { font-weight:600; }
.channel-list > div small { color:var(--clr-text-muted); margin-left:auto; }
.channel-list > div strong{ font-size:1rem; color:var(--clr-success); }
.channel { width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; font-weight:700; font-size:.75rem; color:#fff; flex-shrink:0; }
.channel.wa { background:var(--clr-wa); }.channel.dm { background:var(--clr-primary); }.channel.bot { background:var(--clr-accent2); }

/* ══════════════════════════════════════════════════════
   9. STATS BAR
══════════════════════════════════════════════════════ */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--clr-border); border:1px solid var(--clr-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xs); }
.stat-item { background:#fff; padding:var(--space-6) var(--space-5); text-align:center; }
.stat-item b    { display:block; font-size:2rem; font-weight:800; font-family:var(--font-display); color:var(--clr-primary); line-height:1; margin-bottom:var(--space-1); }
.stat-item span { font-size:.8rem; color:var(--clr-text-muted); font-weight:500; }

/* ══════════════════════════════════════════════════════
   10. CARDS (Feature / Service)
══════════════════════════════════════════════════════ */
.card-grid { display:grid; gap:var(--space-5); }
.card-grid.three { grid-template-columns:repeat(3,1fr); }
.card-grid.two   { grid-template-columns:repeat(2,1fr); }
.card-grid.four  { grid-template-columns:repeat(4,1fr); }

.feature-card {
  display:flex; flex-direction:column; gap:var(--space-3);
  background:#fff; border:1px solid var(--clr-border);
  border-radius:var(--radius-lg); padding:var(--space-6);
  text-decoration:none; color:inherit;
  transition:transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
  box-shadow:var(--shadow-xs); position:relative; overflow:hidden;
}
.feature-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--clr-primary-light) 0%,transparent 60%); opacity:0; transition:opacity var(--dur-normal) var(--ease); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--clr-primary); }
.feature-card:hover::before { opacity:1; }
article.feature-card { cursor:default; }
article.feature-card:hover { transform:none; }

.card-icon { width:52px; height:52px; background:var(--clr-primary-light); border-radius:var(--radius-md); display:grid; place-items:center; font-size:1.5rem; color:var(--clr-primary); flex-shrink:0; transition:background var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease); }
.feature-card:hover .card-icon { background:var(--clr-primary); color:#fff; transform:scale(1.1) rotate(-5deg); }
.feature-card h3 { font-size:1.05rem; }
.feature-card p  { font-size:.9rem; flex:1; }

/* Large homepage service cards */
.service-card-lg {
  background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-6); display:flex; flex-direction:column; gap:var(--space-4);
  text-decoration:none; color:inherit;
  transition:all var(--dur-slow) var(--ease); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.service-card-lg::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--clr-primary),var(--clr-accent)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-normal) var(--ease); }
.service-card-lg:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--clr-primary); }
.service-card-lg:hover::after { transform:scaleX(1); }
.svc-icon-wrap { width:64px; height:64px; background:linear-gradient(135deg,var(--clr-primary-light),#E0F2FE); border-radius:var(--radius-lg); display:grid; place-items:center; font-size:2rem; flex-shrink:0; transition:all var(--dur-normal) var(--ease); }
.service-card-lg:hover .svc-icon-wrap { background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); }
.service-card-lg.wa-card::after { background:linear-gradient(90deg,var(--clr-wa),#128C7E); }
.service-card-lg.wa-card:hover  { border-color:var(--clr-wa); }
.service-card-lg.wa-card:hover .svc-icon-wrap { background:linear-gradient(135deg,var(--clr-wa),#128C7E); }

/* ══════════════════════════════════════════════════════
   11. CHART CARDS
══════════════════════════════════════════════════════ */
.chart-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); }
.chart-row.three { grid-template-columns:repeat(3,1fr); }
.chart-card {
  background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-xs);
  transition:all var(--dur-normal) var(--ease);
  opacity:0; transform:translateY(20px);
}
.chart-card.visible { opacity:1; transform:translateY(0); }
.chart-card:hover { box-shadow:var(--shadow-md); }
.chart-card h4 { font-size:.95rem; font-weight:700; color:var(--clr-text); margin-bottom:var(--space-2); }
.chart-card .chart-sub { font-size:.78rem; color:var(--clr-text-muted); margin-bottom:var(--space-4); }
.chart-card canvas { max-height:220px; width:100% !important; }
.chart-card.chart-tall canvas { max-height:280px; }

/* ══════════════════════════════════════════════════════
   12. DATA TABLES
══════════════════════════════════════════════════════ */
.table-wrap { width:100%; overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--clr-border); box-shadow:var(--shadow-xs); }
.data-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.data-table thead th {
  background:var(--clr-bg-alt); color:var(--clr-text);
  font-weight:700; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.05em; padding:var(--space-4) var(--space-5);
  text-align:left; border-bottom:2px solid var(--clr-border);
  white-space:nowrap;
}
.data-table tbody tr { border-bottom:1px solid var(--clr-border-light); transition:background var(--dur-fast) var(--ease); }
.data-table tbody tr:last-child { border-bottom:none; }
.data-table tbody tr:hover { background:var(--clr-bg-alt); }
.data-table tbody td { padding:var(--space-4) var(--space-5); color:var(--clr-text-muted); vertical-align:middle; }
.data-table tbody td:first-child { color:var(--clr-text); font-weight:600; }
.data-table .td-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:var(--radius-full); }
.td-badge.green  { background:rgba(16,185,129,.12); color:#047857; }
.td-badge.blue   { background:var(--clr-primary-light); color:var(--clr-primary); }
.td-badge.purple { background:rgba(99,102,241,.12); color:var(--clr-accent2); }
.td-badge.orange { background:rgba(245,158,11,.12); color:#92400E; }

/* ══════════════════════════════════════════════════════
   13. LOGO / CHANNELS STRIP
══════════════════════════════════════════════════════ */
.logo-section { padding-block:var(--space-6); background:var(--clr-bg-muted); border-top:1px solid var(--clr-border); border-bottom:1px solid var(--clr-border); }
.logo-section p { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--clr-text-light); text-align:center; margin-bottom:var(--space-4); }
.channels { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
.channels span { font-size:.82rem; font-weight:700; color:var(--clr-text-muted); background:#fff; border:1px solid var(--clr-border); padding:var(--space-2) var(--space-5); border-radius:var(--radius-full); box-shadow:var(--shadow-xs); cursor:default; transition:all var(--dur-normal) var(--ease); }
.channels span:hover { border-color:var(--clr-primary); color:var(--clr-primary); box-shadow:var(--shadow-card); }

/* ══════════════════════════════════════════════════════
   14. CTA PANEL
══════════════════════════════════════════════════════ */
.cta-panel {
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent2) 100%);
  border-radius:var(--radius-xl); padding:var(--space-16) var(--space-12);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-5);
  box-shadow:var(--shadow-xl); position:relative; overflow:hidden;
}
.cta-panel::before { content:''; position:absolute; top:-50%; right:-20%; width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%); pointer-events:none; }
.cta-panel .eyebrow  { background:rgba(255,255,255,.2); color:#fff; }
.cta-panel h2        { color:#fff; font-size:clamp(1.5rem,3vw,2.25rem); max-width:540px; }
.cta-panel p         { color:rgba(255,255,255,.82); max-width:480px; }

/* ══════════════════════════════════════════════════════
   15. CHATBOT PREVIEW
══════════════════════════════════════════════════════ */
.chat-preview { background:var(--clr-dark-bg); border:1px solid var(--clr-dark-border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); max-width:360px; margin-inline:auto; animation:floatCard 6s ease-in-out infinite; }
.chat-header  { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); background:var(--clr-wa); }
.chat-header .chat-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:1.2rem; }
.chat-header .chat-info strong { display:block; color:#fff; font-size:.9rem; }
.chat-header .chat-info small  { color:rgba(255,255,255,.8); font-size:.72rem; }
.chat-body    { padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.chat-msg     { max-width:80%; padding:var(--space-2) var(--space-4); border-radius:12px; font-size:.82rem; line-height:1.5; }
.chat-msg.bot { background:var(--clr-dark-surface); color:#E2E8F0; border-bottom-left-radius:4px; align-self:flex-start; }
.chat-msg.user{ background:var(--clr-wa); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.chat-msg-time{ font-size:.65rem; color:var(--clr-text-light); margin-top:2px; }
.chat-typing  { display:flex; gap:4px; padding:var(--space-2) var(--space-4); background:var(--clr-dark-surface); border-radius:12px; border-bottom-left-radius:4px; align-self:flex-start; max-width:60px; }
.chat-typing span { width:7px; height:7px; background:var(--clr-text-light); border-radius:50%; animation:typingDot 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot { 0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1} }

/* ══════════════════════════════════════════════════════
   16. PAGE HERO (inner pages)
══════════════════════════════════════════════════════ */
.page-hero { padding-block:var(--space-16) var(--space-12); background:linear-gradient(160deg,#EFF6FF 0%,#F8FAFF 100%); border-bottom:1px solid var(--clr-border); text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { margin-bottom:var(--space-4); }
.page-hero p  { font-size:1.05rem; max-width:640px; margin-inline:auto; margin-bottom:var(--space-6); }
.page-hero-wa { background:linear-gradient(160deg,#E6FFF0 0%,#F8FAFF 100%); }

/* ══════════════════════════════════════════════════════
   17. PROCESS STEPS
══════════════════════════════════════════════════════ */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); position:relative; }
.process-grid::before { content:''; position:absolute; top:28px; left:10%; width:80%; height:2px; background:linear-gradient(90deg,var(--clr-primary),var(--clr-accent)); z-index:0; }
.process-step { text-align:center; position:relative; z-index:1; }
.step-num { width:56px; height:56px; background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); border-radius:50%; display:grid; place-items:center; font-size:1.1rem; font-weight:800; color:#fff; margin-inline:auto; margin-bottom:var(--space-4); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--clr-primary-light),var(--shadow-blue); }
.process-step h3 { margin-bottom:var(--space-2); }
.process-step p  { font-size:.88rem; }

/* ══════════════════════════════════════════════════════
   18. TECH PILLS
══════════════════════════════════════════════════════ */
.tech-grid { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }
.tech-pill { background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); font-size:.85rem; font-weight:600; color:var(--clr-text); box-shadow:var(--shadow-xs); transition:all var(--dur-normal) var(--ease); cursor:default; }
.tech-pill:hover { border-color:var(--clr-primary); background:var(--clr-primary-light); color:var(--clr-primary); transform:translateY(-2px); box-shadow:var(--shadow-card); }

/* ══════════════════════════════════════════════════════
   19. HIGHLIGHT BOX
══════════════════════════════════════════════════════ */
.highlight-box { background:linear-gradient(135deg,var(--clr-primary-light),#E0F2FE); border:1px solid rgba(37,99,235,.15); border-radius:var(--radius-lg); padding:var(--space-8); display:flex; align-items:flex-start; gap:var(--space-5); }
.highlight-box .hb-icon { font-size:2rem; flex-shrink:0; margin-top:2px; }
.highlight-box h3 { margin-bottom:var(--space-2); }
.highlight-box p  { color:var(--clr-text-muted); font-size:.9rem; }

/* ══════════════════════════════════════════════════════
   20. TESTIMONIALS
══════════════════════════════════════════════════════ */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.testimonial-card { background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:var(--space-4); transition:all var(--dur-normal) var(--ease); }
.testimonial-card:hover { box-shadow:var(--shadow-md); border-color:var(--clr-primary); transform:translateY(-3px); }
.stars { color:var(--clr-warning); font-size:.9rem; letter-spacing:2px; }
.testimonial-card blockquote { font-size:.9rem; line-height:1.7; color:var(--clr-text-muted); flex:1; font-style:italic; }
.tc-author { display:flex; align-items:center; gap:var(--space-3); }
.tc-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); display:grid; place-items:center; font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0; }
.tc-author cite { font-style:normal; }
.tc-author cite strong { display:block; font-size:.875rem; font-weight:600; }
.tc-author cite span   { font-size:.78rem; color:var(--clr-text-muted); }

/* ══════════════════════════════════════════════════════
   21. FAQ
══════════════════════════════════════════════════════ */
.faq { max-width:760px; margin-inline:auto; }
.faq > .eyebrow,.faq > h2 { text-align:center; display:block; }
.faq > h2 { margin-bottom:var(--space-8); }
details { border:1px solid var(--clr-border); border-radius:var(--radius-md); margin-bottom:var(--space-3); overflow:hidden; transition:box-shadow var(--dur-normal) var(--ease); }
details[open] { box-shadow:var(--shadow-card); border-color:var(--clr-primary); }
summary { padding:var(--space-5) var(--space-6); font-weight:600; font-size:.95rem; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; color:var(--clr-text); transition:background var(--dur-fast) var(--ease); }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font-size:1.25rem; font-weight:300; color:var(--clr-primary); transition:transform var(--dur-normal) var(--ease); }
details[open] summary::after { transform:rotate(45deg); }
summary:hover { background:var(--clr-bg-alt); }
details p { padding:0 var(--space-6) var(--space-5); font-size:.9rem; color:var(--clr-text-muted); }

/* ══════════════════════════════════════════════════════
   22. ABOUT PAGE
══════════════════════════════════════════════════════ */
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.mission-card { padding:var(--space-8); border-radius:var(--radius-xl); position:relative; overflow:hidden; }
.mission-card.mission-blue { background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent2)); color:#fff; }
.mission-card.mission-green{ background:linear-gradient(135deg,var(--clr-wa),#128C7E); color:#fff; }
.mission-card .m-icon { font-size:2.5rem; margin-bottom:var(--space-4); }
.mission-card h3 { color:#fff; font-size:1.3rem; margin-bottom:var(--space-3); }
.mission-card p  { color:rgba(255,255,255,.85); font-size:.95rem; line-height:1.7; }

.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.value-card { background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; box-shadow:var(--shadow-xs); transition:all var(--dur-normal) var(--ease); }
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--clr-primary); }
.value-card .v-icon { font-size:2.2rem; margin-bottom:var(--space-3); }
.value-card h4 { font-size:1.05rem; margin-bottom:var(--space-2); }
.value-card p  { font-size:.88rem; }

.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.benefit-card { background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5); display:flex; gap:var(--space-4); align-items:flex-start; box-shadow:var(--shadow-xs); transition:all var(--dur-normal) var(--ease); }
.benefit-card:hover { border-color:var(--clr-primary); box-shadow:var(--shadow-card); transform:translateX(4px); }
.benefit-icon { width:48px; height:48px; background:linear-gradient(135deg,var(--clr-primary-light),#E0F2FE); border-radius:var(--radius-md); display:grid; place-items:center; font-size:1.4rem; flex-shrink:0; transition:all var(--dur-normal) var(--ease); }
.benefit-card:hover .benefit-icon { background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); }
.benefit-card h4 { font-size:.95rem; margin-bottom:var(--space-1); }
.benefit-card p  { font-size:.85rem; }

.milestone-list { display:flex; flex-direction:column; gap:var(--space-6); position:relative; max-width:680px; margin-inline:auto; }
.milestone-list::before { content:''; position:absolute; left:28px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--clr-primary),var(--clr-accent)); }
.milestone-item { display:flex; gap:var(--space-5); align-items:flex-start; position:relative; }
.milestone-dot { width:56px; height:56px; background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.8rem; color:#fff; flex-shrink:0; z-index:1; box-shadow:0 0 0 4px #fff,var(--shadow-blue); }
.milestone-content { padding-top:var(--space-2); }
.milestone-content h4 { font-size:1rem; margin-bottom:var(--space-1); }
.milestone-content p  { font-size:.88rem; }

/* ══════════════════════════════════════════════════════
   23. DM SPECIFIC
══════════════════════════════════════════════════════ */
.dm-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-8); }
.dm-stat { text-align:center; padding:var(--space-6); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); }
.dm-stat b    { display:block; font-size:2.25rem; font-weight:800; color:#fff; line-height:1; margin-bottom:var(--space-2); }
.dm-stat span { font-size:.85rem; color:rgba(255,255,255,.65); }

.channel-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.channel-card { padding:var(--space-5); border-radius:var(--radius-lg); border:1px solid var(--clr-border); background:#fff; text-align:center; box-shadow:var(--shadow-xs); transition:all var(--dur-normal) var(--ease); }
.channel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--clr-primary); }
.channel-card .icon { font-size:2rem; margin-bottom:var(--space-3); }
.channel-card h4 { font-size:.95rem; margin-bottom:var(--space-2); }
.channel-card p  { font-size:.82rem; }

.funnel-visual { display:flex; flex-direction:column; align-items:center; gap:0; }
.funnel-step { width:100%; padding:var(--space-4); border-radius:var(--radius-sm); text-align:center; font-size:.85rem; font-weight:600; color:#fff; clip-path:polygon(5% 0%,95% 0%,100% 100%,0% 100%); margin-bottom:2px; }
.funnel-step:nth-child(1){background:var(--clr-primary);width:100%}.funnel-step:nth-child(2){background:var(--clr-accent2);width:87%}.funnel-step:nth-child(3){background:#7C3AED;width:72%}.funnel-step:nth-child(4){background:#6D28D9;width:56%}.funnel-step:nth-child(5){background:var(--clr-success);width:40%;clip-path:polygon(0% 0%,100% 0%,85% 100%,15% 100%)}

/* ══════════════════════════════════════════════════════
   24. CUSTOM SOFTWARE SPECIFIC
══════════════════════════════════════════════════════ */
.cs-hero-visual { background:var(--clr-dark-bg); border:1px solid var(--clr-dark-border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-xl); }
.cs-window { background:var(--clr-dark-surface); border:1px solid var(--clr-dark-border); border-radius:var(--radius-md); overflow:hidden; }
.cs-win-bar { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); background:rgba(255,255,255,.04); border-bottom:1px solid var(--clr-dark-border); }
.cs-win-dot { width:10px; height:10px; border-radius:50%; }
.cs-win-dot:nth-child(1){background:#FF5F57}.cs-win-dot:nth-child(2){background:#FFBD2E}.cs-win-dot:nth-child(3){background:#28CA41}
.cs-win-body { padding:var(--space-5); font-family:'JetBrains Mono','Fira Code','Courier New',monospace; font-size:.78rem; line-height:1.9; color:#CBD5E1; }
.cs-win-body .ln{color:#4B5563;margin-right:var(--space-3);user-select:none}.cs-win-body .kw{color:#C084FC}.cs-win-body .fn{color:#60A5FA}.cs-win-body .str{color:#A3E635}.cs-win-body .cm{color:#6B7280;font-style:italic}

.approach-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.approach-item { display:flex; gap:var(--space-4); padding:var(--space-5); background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); transition:all var(--dur-normal) var(--ease); }
.approach-item:hover { border-color:var(--clr-primary); box-shadow:var(--shadow-card); transform:translateX(4px); }
.approach-num { width:40px; height:40px; background:var(--clr-primary-light); border-radius:var(--radius-md); display:grid; place-items:center; font-weight:800; font-size:.9rem; color:var(--clr-primary); flex-shrink:0; }
.approach-item h4 { font-size:.95rem; margin-bottom:var(--space-1); }.approach-item p { font-size:.85rem; }

/* ══════════════════════════════════════════════════════
   25. SERVICE CARD (pages)
══════════════════════════════════════════════════════ */
.service-card { background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); box-shadow:var(--shadow-xs); transition:all var(--dur-slow) var(--ease); }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--clr-primary); }
.service-icon { width:64px; height:64px; background:linear-gradient(135deg,var(--clr-primary-light),#E0F2FE); border-radius:var(--radius-lg); display:grid; place-items:center; font-size:1.75rem; transition:all var(--dur-normal) var(--ease); }
.service-card:hover .service-icon { background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent)); }
.service-card h3 { font-size:1.1rem; }.service-card p { font-size:.9rem; }

/* ══════════════════════════════════════════════════════
   26. INDUSTRY GRID
══════════════════════════════════════════════════════ */
.industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.industry-card { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-md); font-size:.9rem; font-weight:600; color:var(--clr-text); text-decoration:none; box-shadow:var(--shadow-xs); cursor:pointer; transition:all var(--dur-normal) var(--ease); }
.industry-card:hover { border-color:var(--clr-primary); color:var(--clr-primary); background:var(--clr-primary-light); transform:translateX(4px); }
.industry-card span { font-size:1.1rem; transition:transform var(--dur-normal) var(--ease); }
.industry-card:hover span { transform:translateX(4px); }

/* ══════════════════════════════════════════════════════
   27. CODE PANEL
══════════════════════════════════════════════════════ */
.code-panel { background:var(--clr-dark-bg); border:1px solid var(--clr-dark-border); border-radius:var(--radius-lg); padding:var(--space-6); overflow:auto; font-size:.82rem; line-height:1.8; color:#E2E8F0; font-family:'JetBrains Mono','Fira Code','Courier New',monospace; box-shadow:var(--shadow-lg); }
.code-muted{color:#64748B}.code-key{color:#60A5FA}.code-value{color:#A3E635}

/* Badge */
.badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 10px; border-radius:var(--radius-full); }
.badge-blue   { background:var(--clr-primary-light); color:var(--clr-primary); }
.badge-green  { background:rgba(16,185,129,.1); color:var(--clr-success); }
.badge-purple { background:rgba(99,102,241,.1); color:var(--clr-accent2); }
.badge-orange { background:rgba(245,158,11,.1); color:#92400E; }

/* ══════════════════════════════════════════════════════
   28. ENQUIRY MODAL  (class-based – no hidden attr)
══════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;                       /* hidden by default */
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(10,16,36,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal-overlay.is-open {
  display: flex;                       /* shown by JS adding .is-open */
  animation: fadeIn var(--dur-normal) var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-card {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%; max-width: 640px;
  max-height: 94vh; overflow-y: auto;
  box-shadow: 0 40px 100px rgba(10,16,36,.4), 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  animation: slideUp var(--dur-slow) var(--ease);
}
@keyframes slideUp { from{transform:translateY(32px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-close { position:absolute; top:var(--space-4); right:var(--space-4); width:36px; height:36px; background:var(--clr-bg-muted); border-radius:50%; display:grid; place-items:center; font-size:1.3rem; color:var(--clr-text-muted); transition:all var(--dur-fast) var(--ease); z-index:1; }
.modal-close:hover { background:var(--clr-text); color:#fff; }

.modal-header { padding:var(--space-8) var(--space-8) var(--space-5); text-align:center; background:linear-gradient(160deg,#EBF3FF 0%,#fff 100%); border-bottom:1px solid var(--clr-border); }
.modal-logo-wrap { display:flex; justify-content:center; margin-bottom:var(--space-4); }
.modal-logo { width:52px; height:52px; object-fit:contain; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.modal-header h2 { font-size:1.45rem; margin-bottom:var(--space-2); }
.modal-header p  { font-size:.9rem; }
.modal-location-badge { display:inline-flex; align-items:center; gap:var(--space-2); font-size:.75rem; font-weight:600; color:var(--clr-text-muted); background:var(--clr-bg-muted); border:1px solid var(--clr-border); padding:4px var(--space-3); border-radius:var(--radius-full); margin-top:var(--space-3); }

.modal-form { padding:var(--space-6) var(--space-8) var(--space-8); display:flex; flex-direction:column; gap:var(--space-4); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.form-group { display:flex; flex-direction:column; gap:var(--space-2); }
.form-group label { font-size:.85rem; font-weight:600; color:var(--clr-text); }
.req { color:var(--clr-warning); }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:var(--space-3) var(--space-4); border:1.5px solid var(--clr-border); border-radius:var(--radius-md); font-family:var(--font-sans); font-size:.9rem; color:var(--clr-text); background:var(--clr-bg); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--clr-text-light); }
.form-group select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.form-group textarea { resize:vertical; min-height:100px; }
.btn-submit { width:100%; justify-content:center; padding:.9rem 2rem; font-size:1rem; background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent2)); box-shadow:0 8px 24px rgba(37,99,235,.3); }
.btn-submit:hover { background:linear-gradient(135deg,var(--clr-primary-dark),#4F46E5); }
.form-note { font-size:.78rem; color:var(--clr-text-light); text-align:center; }
.form-result { text-align:center; padding:var(--space-4); border-radius:var(--radius-md); font-weight:600; font-size:.9rem; }
.form-result.success { background:rgba(16,185,129,.1); color:#047857; border:1px solid rgba(16,185,129,.2); }
.form-result.error   { background:rgba(239,68,68,.1);  color:#B91C1C; border:1px solid rgba(239,68,68,.2); }

/* ══════════════════════════════════════════════════════
   29. SITE FOOTER
══════════════════════════════════════════════════════ */
.site-footer { background:var(--clr-dark-bg); color:#CBD5E1; padding-top:var(--space-16); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-10); padding-bottom:var(--space-12); border-bottom:1px solid var(--clr-dark-border); }
.footer-grid > div:first-child p { margin-top:var(--space-4); font-size:.875rem; color:#94A3B8; max-width:280px; line-height:1.7; }
.footer-grid h2 { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:var(--space-5); }
.footer-grid a  { display:block; font-size:.875rem; color:#94A3B8; padding:var(--space-1) 0; transition:color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease); }
.footer-grid a:hover { color:#fff; padding-left:var(--space-2); }

.footer-location { display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-4); }
.footer-location span { font-size:.78rem; color:#64748B; }

.footer-stats { display:flex; gap:var(--space-4); margin-top:var(--space-5); flex-wrap:wrap; }
.footer-stat { text-align:center; }
.footer-stat b    { display:block; font-size:1.1rem; font-weight:800; color:var(--clr-accent); line-height:1; }
.footer-stat span { font-size:.7rem; color:#64748B; }

.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); padding-block:var(--space-5); font-size:.8rem; color:#64748B; }
.footer-bottom a { color:#94A3B8; transition:color var(--dur-fast) var(--ease); }
.footer-bottom a:hover { color:#fff; }

.dev-credit { font-size:.75rem; color:#475569; text-align:center; margin-top:var(--space-2); padding-bottom:var(--space-4); }
.dev-credit a { color:var(--clr-accent); font-weight:600; text-decoration:none; transition:color var(--dur-fast) var(--ease); }
.dev-credit a:hover { color:#fff; }

/* ══════════════════════════════════════════════════════
   30. REVEAL ANIMATIONS
══════════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

.card-grid .feature-card,
.card-grid .service-card,
.process-grid .process-step,
.testimonial-grid .testimonial-card,
.value-grid .value-card,
.benefit-grid .benefit-card {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease),
             box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}
.card-grid .feature-card.visible,
.card-grid .service-card.visible,
.process-grid .process-step.visible,
.testimonial-grid .testimonial-card.visible,
.value-grid .value-card.visible,
.benefit-grid .benefit-card.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════
   31. LEGAL PAGE
══════════════════════════════════════════════════════ */
.legal-content { max-width:860px; margin-inline:auto; }
.legal-content h2 { font-size:1.3rem; margin-top:var(--space-10); margin-bottom:var(--space-4); color:var(--clr-text); border-bottom:1px solid var(--clr-border); padding-bottom:var(--space-2); }
.legal-content h3 { font-size:1.05rem; margin-top:var(--space-6); margin-bottom:var(--space-3); }
.legal-content p  { font-size:.9rem; margin-bottom:var(--space-4); color:var(--clr-text-muted); }
.legal-content ul { margin-bottom:var(--space-4); padding-left:var(--space-6); list-style:disc; }
.legal-content ul li { font-size:.9rem; color:var(--clr-text-muted); margin-bottom:var(--space-2); }
.legal-content .legal-box { background:var(--clr-bg-alt); border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-6); font-size:.88rem; color:var(--clr-text-muted); }
.legal-last-updated { font-size:.8rem; color:var(--clr-text-light); margin-bottom:var(--space-8); }

/* ══════════════════════════════════════════════════════
   32. RESPONSIVE – TABLET (≤ 1024px)
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-grid p { margin-inline:auto; }
  .hero-badges { justify-content:center; }
  .hero-grid > div:last-child { display:none; }

  .split { grid-template-columns:1fr; gap:var(--space-10); }

  .card-grid.four  { grid-template-columns:repeat(2,1fr); }
  .industry-grid   { grid-template-columns:repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns:1fr 1fr; }

  .stats-bar  { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid::before { display:none; }

  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:1/-1; }

  .dm-stats    { grid-template-columns:repeat(3,1fr); }
  .channel-cards { grid-template-columns:repeat(2,1fr); }
  .mission-grid { grid-template-columns:1fr; }
  .value-grid  { grid-template-columns:repeat(2,1fr); }
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }

  .chart-row { grid-template-columns:1fr 1fr; }
  .chart-row.three { grid-template-columns:1fr 1fr; }
  .cta-panel { padding:var(--space-12) var(--space-8); }
}

/* ══════════════════════════════════════════════════════
   33. RESPONSIVE – MOBILE (≤ 768px)
══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --header-h:64px; }
  .container { padding-inline:var(--space-4); }
  h1 { font-size:clamp(1.75rem,7vw,2.5rem); }

  .menu-toggle { display:flex; }
  .site-nav {
    display:none; position:fixed; top:var(--header-h); left:0; right:0;
    background:rgba(255,255,255,.98); backdrop-filter:blur(16px);
    padding:var(--space-6) var(--space-4); flex-direction:column;
    align-items:flex-start; gap:var(--space-1); border-bottom:1px solid var(--clr-border);
    box-shadow:var(--shadow-lg); z-index:800; max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .site-nav.open { display:flex; }
  .site-nav a { width:100%; padding:var(--space-3) var(--space-4); font-size:1rem; border-radius:var(--radius-md); }
  .site-nav .button { margin-left:0; width:100%; justify-content:center; }

  .section { padding-block:var(--space-12); }
  .card-grid.three,.card-grid.two { grid-template-columns:1fr; }
  .card-grid.four  { grid-template-columns:1fr; }
  .industry-grid   { grid-template-columns:1fr 1fr; }
  .testimonial-grid{ grid-template-columns:1fr; }

  .stats-bar  { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:1fr; }
  .process-grid::before { display:none; }

  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .dm-stats    { grid-template-columns:1fr; }
  .channel-cards { grid-template-columns:1fr 1fr; }
  .approach-grid { grid-template-columns:1fr; }
  .mission-grid { grid-template-columns:1fr; }
  .value-grid  { grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr; }
  .chart-row,.chart-row.three { grid-template-columns:1fr; }
  .form-row    { grid-template-columns:1fr; }

  .cta-panel { padding:var(--space-10) var(--space-5); border-radius:var(--radius-lg); }
  .highlight-box { flex-direction:column; }

  .modal-card { max-height:96vh; }
  .modal-form { padding:var(--space-5) var(--space-5) var(--space-6); }
  .modal-header { padding:var(--space-6) var(--space-5) var(--space-5); }
}

/* ══════════════════════════════════════════════════════
   34. SMALL MOBILE (≤ 480px)
══════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .industry-grid { grid-template-columns:1fr; }
  .channel-cards { grid-template-columns:1fr; }
  .stats-bar     { grid-template-columns:1fr 1fr; }
  .footer-grid   { grid-template-columns:1fr; }
  .funnel-step   { clip-path:none !important; width:100% !important; border-radius:var(--radius-sm); }
  .footer-stats  { gap:var(--space-3); }
}

/* ══════════════════════════════════════════════════════
   35. SCROLLBAR
══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--clr-bg-muted); }
::-webkit-scrollbar-thumb { background:var(--clr-border); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--clr-text-light); }

::selection { background:rgba(37,99,235,.15); color:var(--clr-text); }

@media print {
  .site-header,.site-footer,.menu-toggle,.modal-overlay { display:none; }
  .section { padding-block:var(--space-8); }
  body { font-size:12pt; }
}