:root{
  --bg:#f6f8fc; 
  --panel:#ffffff; 
  --muted:#4a5a7d; 
  --text:#0b1220; 
  --line:#e2e8f0;
  --brand:#1d64f2; 
  --brand2:#0ea5ff; 
  --accent:#0085ff; --danger:#ef4444;
  --radius:16px; 
  --shadow:0 10px 30px rgba(2,12,27,.08);
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#eef2f7,#f6f8fc);
}
a{ color:inherit; text-decoration:none }
.container{ width:min(1200px,92%); margin-inline:auto }
.grid{ display:grid; gap:24px }
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:12px 18px; border-radius:999px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.25s;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#081120; box-shadow:0 6px 18px rgba(106,228,255,.25);
}
.btn:hover{ transform:translateY(-2px) }
.btn.ghost{ background:transparent; color:var(--text); border-color:#2a355f; box-shadow:none; }
.chip{ font-size:.82rem; padding:.2rem .6rem; border-radius:999px; background:#121a35; border:1px solid #223063; color:#bcd1ff }

/* Header */
header.nav{ position:sticky; top:0; backdrop-filter: blur(8px); background:rgba(10,16,34,.55); border-bottom:1px solid var(--line); z-index:50; }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px }
.brand-logo{ width:92px;height:44px;object-fit:contain;padding:0;background:transparent;border-radius:10px; }
.menu{ display:flex; gap:22px; align-items:center; flex-wrap:wrap }
.menu a{ opacity:.9 } .menu a:hover{ opacity:1 }

/* Hero */
.hero{ padding:72px 0 24px; }
.hero-wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center; }
.h1{ font-size:clamp(32px,4.4vw,56px); line-height:1.08; margin:0 0 14px; letter-spacing:.2px; font-weight:900; }
.lead{ font-size:clamp(16px,1.6vw,19px); color:#c9d7ff; margin:12px 0 24px }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.hero-visual{ position: relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#0c1530; box-shadow:var(--shadow); }

/* Hero video should fill the box just like the carousel did */
.hero-visual .hero-video{
  width:100%;
  height:100%;
  object-fit:cover;   /* full-bleed, no distortion */
  display:block;
  border-radius:inherit;
}

.note{ font-size:.88rem; color:#b7c7ff }

/* Sections */
.section{ padding:56px 0 }
.section .title{ font-size:clamp(22px,2.6vw,32px); margin:0 0 8px; font-weight:800 }
.section .subtitle{ color:#bcd1ff; margin:0 0 24px }

/* Carousel */
.carousel{ position:relative; border-radius:18px; overflow:hidden; /*border:1px solid var(--line); */background:#0f1736; box-shadow:var(--shadow); }
.carousel-track{ display:flex; transition:transform .6s ease }
/* Carousel – fix image fit (no distortion, full bleed) */
.carousel .carousel-slide{
  position: relative;
  overflow: hidden;
  min-width: 100%;
  height: 360px; /* keep your set height */
}
.carousel .carousel-slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;   /* global default for hero/dash carousels */
  object-position: 50% 50%;
  display: block;
}
.carousel-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 8px }
.car-btn{ width:40px;height:40px;border-radius:50%; border:1px solid #2d3a6c; background:rgba(12,18,44,.6); color:#eaf1ff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(4px); }
.dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px }
.dot{ width:8px;height:8px;border-radius:50%; background:#5867a8; opacity:.6 }
.dot.active{ opacity:1; background:linear-gradient(90deg,var(--brand),var(--brand2)) }

/* Cards & Grids */
.features{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
.card{ border:1px solid var(--line); background:linear-gradient(180deg,#0e1731,#0c142b); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.card h3{ margin:0 0 6px; font-size:1.06rem }
.card p{ margin:.2rem 0 0; color:#c9d7ff; font-size:.94rem }
.card .mini{ font-size:.8rem; color:#9fb0cc }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }
.media{ border:1px solid var(--line); border-radius:16px; overflow:hidden; min-height:280px; background:#0d1430; }
.media img{ width:100%; height:100%; object-fit:cover }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
.price-card{ border:1px solid var(--line); border-radius:18px; padding:22px; background:linear-gradient(180deg,#0e1832,#0b1328) }
.price-card .tag{ display:inline-block; margin-bottom:10px }
.price{ font-size:20px; font-weight:900; margin:10px 0 4px }
.price small{ font-size:.8rem; color:#9fb0cc; font-weight:500 }
.ul{ margin:12px 0 0; padding:0 0 0 18px; color:#cbd7ff }
.ul li{ margin:.4rem 0 }

/* Testimonials */
.testimonials{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px }
.quote{ font-size:1.02rem; color:#4077ed }
.person{ display:flex; align-items:center; gap:12px; margin-top:10px }
.avatar{ width:44px;height:44px;border-radius:50%; overflow:hidden; border:1px solid var(--line) }
.avatar img{ width:100%;height:100%;object-fit:cover }
.rating{ display:flex; gap:4px; margin-top:6px }

/* Footer (base) */
footer{ border-top:1px solid var(--line); padding:26px 0 36px; color:#aab8e8 }
.footer-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:18px }
.byline{ color:#8ea1d9; font-size:.9rem }

/* === Footer: products + contact aside (single row) === */
footer .footer-grid{
  grid-template-columns: 1.4fr .9fr .9fr;
  grid-template-areas: "brand products company";
  align-items:start;
}

/* BRAND COLUMN — keep logo pinned to very top */
footer .footer-grid > div:nth-child(1){
  grid-area: brand;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* stick to upper edge */
}

/* RIGHT COLUMNS — small top offset + right-aligned content */
footer .footer-grid > div:nth-child(2),
footer .footer-grid > div:nth-child(3){
  position:relative;
  padding-left:24px;            /* keeps the vertical separator */
  padding-top:0px;             /* nudge down from logo */
  text-align:left;             /* right align text */
}

/* vertical separators unchanged */
footer .footer-grid > div:nth-child(2)::before,
footer .footer-grid > div:nth-child(3)::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, #2a3b7a 12%, #2a3b7a 88%, transparent);
  opacity:.6;
  height: 125px;
}

/* PRODUCTS (middle) — pills right-aligned */
footer .footer-grid > div:nth-child(2){
  grid-area: products;
  display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:0;
  justify-content:flex-end;      /* right align row */
}
footer .footer-grid > div:nth-child(2) a{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #2a3b7a; background:rgba(255,255,255,.03);
  font-weight:600; color:#d6e7ff;
}
footer .footer-grid > div:nth-child(2) a:hover{ background:rgba(255,255,255,.06); }

/* COMPANY (right) — list right-aligned */
footer .footer-grid > div:nth-child(3){
  grid-area: company;
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-end;          /* right edge alignment */
}
footer .footer-grid > div:nth-child(3) a{ font-weight:600; color:#d6e7ff; }
footer .footer-grid > div:nth-child(3) a:hover{ text-decoration:underline; }

/* hide small headings in footer */
footer .mini{ display:none; }

/* mobile: stack brand, products, company (reset right alignment) */
@media (max-width: 900px){
  footer .footer-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "products"
      "company";
  }
  footer .footer-grid > div:nth-child(2),
  footer .footer-grid > div:nth-child(3){
    padding-left:0;
    padding-top:0;
    text-align:left;
    align-items:flex-start;
    justify-content:flex-start;
  }
  footer .footer-grid > div:nth-child(2)::before,
  footer .footer-grid > div:nth-child(3)::before{ display:none; }
}

/* Responsive */
@media (max-width: 980px){
  .hero-wrap, .two-col, .testimonials{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .features{grid-template-columns:1fr}
}

/* Light theme overrides */
:root[data-theme="light"]{
  --bg:#f6f8fc; --panel:#ffffff; --line:#e2e8f0; --text:#0b1220; --muted:#4a5a7d;
  --brand:#2b6cb0; --brand2:#3182ce; --accent:#0ea5a6;
}
:root[data-theme="light"] body{ color:var(--text); background:linear-gradient(180deg,#eef2f7,#f6f8fc); }
:root[data-theme="light"] .btn{ color:#ffffff; }
:root[data-theme="light"] .brand-logo{ width:92px;height:44px;object-fit:contain;padding:0;background:transparent;border-radius:10px; }
:root[data-theme="light"] .card, 
:root[data-theme="light"] .price-card, 
:root[data-theme="light"] .media, 
:root[data-theme="light"] .carousel{
  background:#ffffff; border-color:var(--line); box-shadow:0 8px 24px rgba(2,12,27,.06);
}
:root[data-theme="light"] .subtitle, 
:root[data-theme="light"] .card p, 
:root[data-theme="light"] .ul{ color:#1f2a44; }
:root[data-theme="light"] header.nav{ background:rgba(255,255,255,.7); border-bottom:1px solid var(--line); }
:root[data-theme="light"] footer{ color:#1f2a44; }

/* --- Light theme contrast fixes (v4) --- */
:root[data-theme="light"] .lead{ color:#334155; }
:root[data-theme="light"] .note{ color:#475569; }
:root[data-theme="light"] .chip{ background:#e8eef9; border-color:#c6d4ee; color:#1e293b; }
:root[data-theme="light"] .btn.ghost{ background:#ffffff; border-color:#cbd5e1; color:#0b1220; }
:root[data-theme="light"] .btn.ghost:hover{ background:#f1f5f9; }
:root[data-theme="light"] .car-btn{ background:rgba(255,255,255,.85); border-color:#cbd5e1; color:#0b1220; box-shadow:0 4px 12px rgba(0,0,0,.08); }
:root[data-theme="light"] .dot{ background:#94a3b8; opacity:.7 } 
:root[data-theme="light"] .dot.active{ opacity:1 }
:root[data-theme="light"] .subtitle{ color:#334155; }
:root[data-theme="light"] .card p{ color:#1f2a44; }
:root[data-theme="light"] header.nav{ background:rgba(255,255,255,.85); border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(2,12,27,.06); }

/* Ensure brand image fits nicely */
.brand-logo{ width:92px;height:44px;object-fit:contain;padding:0;background:transparent;border-radius:10px; }
:root[data-theme="light"] .brand-logo{ width:92px;height:44px;object-fit:contain;padding:0;background:transparent;border-radius:10px; }

/* Emphasis for AI/BI badges */
.badge-ai{ font-weight:800; background:linear-gradient(90deg, #06b6d4, #22d3ee); border-color:#bae6fd; color:#0b1220; box-shadow:0 6px 20px rgba(34,211,238,.35); }
.badge-bi{ font-weight:800; background:linear-gradient(90deg, #7c3aed, #6366f1); border-color:#c7d2fe; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15); box-shadow:0 6px 20px rgba(99,102,241,.35); }
.hero-badges .chip:hover{ transform:translateY(-1px); transition:.2s ease; }

/* ====== Emerging Header & Chip Effects (v9) ====== */
header.nav{ position: sticky; top: 0; z-index: 50; }
header.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand2), var(--accent));
  background-size: 300% 100%; animation: navGradient 10s linear infinite; opacity:.35;
}
@keyframes navGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.menu a{ position:relative; padding-bottom:6px; }
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease; border-radius:2px; opacity:.85;
}
.menu a:hover::after{ transform: scaleX(1); }

/* AI/BI chips animations */
.badge-ai, .badge-bi{ position:relative; overflow:hidden; isolation:isolate; }
.badge-ai::before, .badge-bi::before{
  content:""; position:absolute; inset:-2px; border-radius:999px; box-shadow:0 0 0 0 rgba(0,0,0,0);
  animation: chipPulse 3s ease-in-out infinite; z-index:-1;
}
.badge-ai::after, .badge-bi::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-40%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 70%);
  transform: skewX(-20deg); animation: sheenMove 4s ease-in-out infinite;
}
@keyframes sheenMove{ 0%{left:-40%} 60%{left:110%} 100%{left:110%} }
@keyframes chipPulse{ 0%{box-shadow:0 0 0 0 rgba(34,211,238,.0)} 50%{box-shadow:0 0 0 10px rgba(34,211,238,.12)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,.0)} }
.badge-bi::before{ animation: chipPulseBI 3.2s ease-in-out infinite; }
@keyframes chipPulseBI{ 0%{box-shadow:0 0 0 0 rgba(99,102,241,.0)} 50%{box-shadow:0 0 0 10px rgba(99,102,241,.15)} 100%{box-shadow:0 0 0 0 rgba(99,102,241,.0)} }
.badge-ai{ animation: chipBlinkA 6s ease-in-out infinite; }
.badge-bi{ animation: chipBlinkB 6s ease-in-out infinite; }
@keyframes chipBlinkA{ 0%,100%{opacity:1} 45%{opacity:.92} 50%{opacity:.98} 55%{opacity:.92} }
@keyframes chipBlinkB{ 0%,100%{opacity:1} 20%{opacity:.92} 25%{opacity:.98} 30%{opacity:.92} }
@media (prefers-reduced-motion: reduce){
  header.nav::after, .badge-ai::after, .badge-bi::after, .badge-ai, .badge-bi, .badge-ai::before, .badge-bi::before{ animation:none!important; }
}

/* VIBRANT TWEAKS (v10) */
header.nav{ background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.78)); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(2,12,27,0.06); }
header.nav::after{ height:4px; opacity:.7; filter: saturate(1.4); }
.btn{ background:linear-gradient(90deg, var(--brand), var(--accent)); box-shadow:0 12px 28px rgba(10,132,255,.28); }
.btn.ghost{ background:#ffffff; border-color:#cbd5e1; }

/* Supercharged chips */
.badge-ai{ background: linear-gradient(90deg, #00d5ff, #42e9ff); color:#03223b; border-color:#b6f0ff; box-shadow: 0 10px 30px rgba(0,213,255,.35); }
.badge-bi{ background: linear-gradient(90deg, #8b5cf6, #4f46e5); color:#ffffff; border-color:#c7d2fe; box-shadow: 0 10px 30px rgba(79,70,229,.35); }
.badge-ai::after, .badge-bi::after{ background: linear-gradient(120deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.0) 70%); animation-duration: 3s; }
.badge-ai::before{ animation-duration: 2.4s; } .badge-bi::before{ animation-duration: 2.6s; }

/* ====== Hero badges gradient aura (v11) ====== */
.hero-badges{ position:relative; isolation:isolate; }
.hero-badges::before{
  content:""; position:absolute; inset:-14px -18px -12px -18px; border-radius:999px;
  background: radial-gradient(60% 120% at 20% 50%, rgba(0,213,255,.25), rgba(0,213,255,0) 70%),
             radial-gradient(45% 90% at 80% 40%, rgba(79,70,229,.25), rgba(79,70,229,0) 70%);
  filter: blur(18px) saturate(1.2); z-index:-1; animation: badgesFlow 8s ease-in-out infinite;
}
@keyframes badgesFlow{ 0%{transform:translateX(0) scale(1); opacity:.85} 50%{transform:translateX(6px) scale(1.03); opacity:1} 100%{transform:translateX(0) scale(1); opacity:.85} }

/* ====== Header color tint + cycling underline (v11) ====== */
header.nav{
  background:
    linear-gradient(180deg, rgba(10,132,255,.10), rgba(0,225,255,.08)),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border-bottom: 1px solid #d9e6ff;
  box-shadow: 0 10px 28px rgba(2,12,27,0.06);
}

/* Footer: darker brand gradient with readable text */
footer{
  background:
    radial-gradient(80% 120% at 10% -20%, rgba(0,225,255,.18), rgba(0,225,255,0) 60%),
    radial-gradient(80% 120% at 90% -20%, rgba(10,132,255,.18), rgba(10,132,255,0) 60%),
    linear-gradient(180deg, #0b1220 0%, #0d1832 100%);
  color:#cfe3ff; border-top: 1px solid #203055;
}
footer a{ color:#d6e7ff; }
footer .byline{ color:#b8cff7; }
footer .mini{ color:#d0dcff; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
.member .avatar{
  width:180px; height:180px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#0d1631;
}
.member .avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.member .avatar img[src*="radhika" i]{ object-fit:cover; object-position:50% 42%; transform:scale(1.08); }
.member h3{ margin:10px 0 4px; font-size:1.05rem }
.member p{ margin:6px 0 0; font-size:.94rem; color:#c9d7ff }
@media (max-width: 980px){ .team-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .team-grid{grid-template-columns:1fr} }
:root[data-theme="light"] .member .avatar{ background:#ffffff }

/* Pricing alignment & ticks */
.pricing--aligned{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px }
.price-card{ display:flex; flex-direction:column; min-height:520px }
.price-card .price-cta{ margin-top:auto }
.price-card.featured{ outline:2px solid #2a3b7a; box-shadow:0 12px 28px rgba(10,132,255,.12) }
.price-card.ta{ border:2px dashed #2a3b7a }

.ul-ticks{ list-style:none; padding-left:0 }
.ul-ticks li{ position:relative; padding-left:28px; margin:10px 0; }
.ul-ticks li::before{ content:"✔"; position:absolute; left:0; top:0; line-height:1.2; font-weight:800; color:var(--accent); }

.notes-card{ margin-top:16px }
@media (max-width: 1100px){ .pricing--aligned{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .pricing--aligned{grid-template-columns: 1fr} }

/* Fix: show full image in carousel (no cropping) */
.carousel-slide img{ object-fit:contain; object-position:center; }

/* === Vertical Testimonial Scroller === */
.testi-scroller{
  height:380px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,#0e1731,#0b142a);
  padding:14px;
}
.testi-track{
  display:flex;
  flex-direction:column;
  gap:12px;
  transform:translateY(0);
  will-change:transform;
}
.testi-track.animate{
  animation: testiScroll var(--scroll-dur,40s) linear infinite;
}
@keyframes testiScroll{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.t-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:rgba(255,255,255,.03);
}
.t-quote{ margin:0 0 10px; color:#d6e3ff; font-size:.98rem }
.t-person{ display:flex; align-items:center; gap:10px; color:#bcd1ff }
.t-person img{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); object-fit:cover
}
.testi-scroller:hover .testi-track{ animation-play-state: paused; }

/* === Vertical Testimonial Scroller v2 (ratings + logos + controls) === */
.testi-wrap{ position:relative; }
.testi-scroller{
  height:380px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:auto;
  background:linear-gradient(180deg,#0e1731,#0b142a);
  padding:14px;
  scrollbar-width:none;
}
.testi-scroller::-webkit-scrollbar{ display:none; }
.testi-track{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.t-item{
  position:relative;
  border-radius:14px;
  padding:14px 14px 12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(120,150,255,.25);
}
.t-item::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:14px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(99,102,241,.35), rgba(34,211,238,.25));
  opacity:.20;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px;
}
.t-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.t-logo{
  width:28px; height:28px; border-radius:6px; flex:0 0 28px;
  background:#0f1736; border:1px solid var(--line); object-fit:contain;
}
.t-stars{ display:flex; gap:4px; margin-left:auto; }
.t-stars svg{ width:16px; height:16px; fill:#ffd166; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.t-quote{ margin:0 0 10px; color:#d6e3ff; font-size:.98rem; }
.t-person{ display:flex; align-items:center; gap:10px; color:#bcd1ff }
.t-person img{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); object-fit:cover;
}
.t-name{ font-weight:800; color:darkslateblue }
.t-role{ font-size:.85rem; opacity:.8; color:cadetblue }
.t-nav{
  position:absolute; right:-10px;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid #33407a; color:#dbe7ff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  cursor:pointer; user-select:none;
  backdrop-filter: blur(6px);
}
.t-nav-up{  top:8px;  }
.t-nav-down{ bottom:8px; }
.t-nav:hover{ transform:translateY(-1px); }
.testi-scroller:hover .testi-track{ animation-play-state:paused; }
.testi-track.auto{
  animation: testiAuto var(--t-dur, 40s) linear infinite;
}
@keyframes testiAuto{
  0% { transform: translateY(0); }
  100% { transform: translateY(var(--t-end, -50%)); }
}
.t-avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; font-size:.9rem;
  color:#072033;
  background:linear-gradient(135deg,#a5f3fc,#60a5fa);
  border:1px solid rgba(255,255,255,.35);
}
.t-person img.t-avatar-img{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line);object-fit:cover }

/* === Clients / Partners === */
.clients{ padding-top:40px; padding-bottom:40px; }
.clients-head .subtitle{ margin-bottom:18px; }
.client-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  align-items:stretch;
}
.client-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px 12px;
  min-height:86px;
  transition:.25s ease;
}
.client-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,12,27,.10); }
.client-logo{
  max-width:100%; max-height:44px; object-fit:contain; display:block;
  filter:grayscale(100%); opacity:.9; transition:.25s ease;
}
.client-card:hover .client-logo{ filter:none; opacity:1; }
.client-name{
  margin-top:8px; font-size:.85rem; color:#bcd1ff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.client-fallback{
  width:48px; height:48px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#a5f3fc,#60a5fa);
  color:#072033; font-weight:800;
  border:1px solid rgba(255,255,255,.35);
}
:root[data-theme="light"] .client-card{
  background:#fff; border-color:var(--line); box-shadow:0 6px 16px rgba(2,12,27,.06);
}
:root[data-theme="light"] .client-name{ color:#31456f; }

/* ========================= */
/* CONNECT SECTION — TWEAKS  */
/* ========================= */

/* Make both columns equal height on desktop */
#contact .two-col{ align-items:stretch; }
#contact .two-col > .card,
#contact .two-col > div > .card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Contact list (email/phone/addresses) */
.contact-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.contact-list li{
  display:flex; align-items:center; gap:12px;
  padding:6px 0;                 /* slimmer line */
  border:none; background:transparent; box-shadow:none;
}
.contact-list .icon{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(120,150,255,.25);
}
.contact-list .icon svg{ width:16px; height:16px; fill:#cfe3ff; }
.contact-list a{ font-weight:600; }

/* Reduce gap under “India Offices” and “Netherland Office” */
#contact .card h4{ margin:14px 0 6px; }
#contact .card h4 + .contact-list{ margin-top:6px; }

/* Turn the Hours line into an iconized row (no HTML change) */
#contact .card .ul{ list-style:none; padding-left:0; margin:10px 0 0; }
#contact .card .ul li{
  position:relative;
  padding:6px 0 6px 44px;   /* space for icon */
  margin:0;
}
#contact .card .ul li::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:8px;
  border:1px solid rgba(120,150,255,.25);
  background:#0f1736;
  /* clock icon */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%23253a74'/><path d='M12 7v5l4 2' fill='none' stroke='%23cfe3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:16px;
}

/* Light theme polish for the hours icon */
:root[data-theme="light"] #contact .card .ul li::before{
  background:#f5f8ff;
  border-color:#d3def7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%23e1e9ff'/><path d='M12 7v5l4 2' fill='none' stroke='%23405a9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Light theme for icon boxes used above */
:root[data-theme="light"] .contact-list .icon{
  background:#f5f8ff; border-color:#d3def7;
}
:root[data-theme="light"] .contact-list .icon svg{ fill:#405a9c; }

/* ================================ */
/* TESTIMONIALS — prevent cropping  */
/* ================================ */
/* Only affect the “What our customers say” section */
#testimonials .carousel .carousel-slide img{
  object-fit:contain !important;      /* show full image, no cut */
  object-position:center center !important;
  background:#0f1736;                 /* subtle letterbox background */
}






/* =========================
   FOOTER — two-column layout
   ========================= */

/* gradient, colors already defined earlier — keep them */
footer{
  background:
    radial-gradient(80% 120% at 10% -20%, rgba(0,225,255,.18), rgba(0,225,255,0) 60%),
    radial-gradient(80% 120% at 90% -20%, rgba(10,132,255,.18), rgba(10,132,255,0) 60%),
    linear-gradient(180deg, #0b1220 0%, #0d1832 100%);
  color:#cfe3ff;
  border-top:1px solid #203055;
  padding:26px 0 36px;
}

/* 2 columns: left (logo + byline), right (new line + buttons) */
footer .footer-grid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;     /* left | right */
  align-items:start;
  gap:24px;
  grid-template-columns: 1fr 1fr !important;  /* equal partition */
}

/* left column keeps logo at top */
footer .footer-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
/*  gap:10px;*/
}

/* right column: vertical splitter + right alignment */
footer .footer-right{
  position:relative;
  padding-left:24px;                     /* room for the splitter */
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;                  /* right edge alignment */
  text-align:right;
}

/* full-height vertical splitter */
footer .footer-right::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, #2a3b7a 12%, #2a3b7a 88%, transparent);
  opacity:.6;
}

/* secondary tagline on the right (same baseline tone as left byline) */
footer .byline-2{ color:#b8cff7; font-size:.95rem; }

/* pill buttons row */
footer .footer-actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;
}
footer .footer-actions a{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid #2a3b7a; background:rgba(255,255,255,.03);
  font-weight:600; color:#d6e7ff;
}
footer .footer-actions a:hover{ background:rgba(255,255,255,.06); }

/* center the copyright bar at the very bottom */
footer .footer-bottom{
  margin-top:16px;
  text-align:left;
  font-size:.86rem;
  color:#8ea1d9;
}

/* mobile stack */
@media (max-width: 900px){
  footer .footer-grid{ grid-template-columns:1fr; gap:16px; }
  footer .footer-right{ padding-left:0; align-items:flex-start; text-align:left; }
  footer .footer-right::before{ display:none; }
  footer .footer-actions{ justify-content:flex-start; }
}


/* === Footer spacing + alignment fixes (only footer changes) === */

/* Reduce space between logo and its byline */
footer .footer-left .brand{ 
  line-height: 0;            /* removes extra inline gap around the logo img */
  /*margin-bottom: 6px;*/        /* tighter than default */
}
footer .footer-left .byline{
  margin: 0;                 /* sit right under the logo */
}

/* Align the right tagline with the left byline baseline */
footer .footer-right{
  padding-top: 6px;          /* nudge down to match left byline line */
}
footer .byline-2{ 
  margin: 0;                 /* no extra gap above/below */
}

/* (Keep buttons just below the tagline with a small breathing room) */
footer .footer-actions{ 
  margin-top: 10px;
}


/* Footer: reduce top padding just for the logo block */
footer .footer-left{
  padding-top: 0 !important;        /* remove any column padding */
}
footer .footer-left .brand{
  margin-top: -25px;                 /* lift the logo slightly */
  line-height: 0;                    /* kill any inline image gap */
}
@media (max-width: 900px){
  footer .footer-left .brand{ margin-top: 0; }  /* keep mobile tidy */
}






/* ===== Footer: right column alignment + emphasis ===== */

/* equal split and centered separator */
footer .footer-grid.footer--2col{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* equal partition */
  align-items:center;
  gap:24px;
}

/* left */
footer .footer-left{ padding-right:24px; }

/* right: align everything to the right + vertical divider */
footer .footer-right{
  position:relative;
  padding-left:32px;               /* space for the divider */
  display:flex;
  flex-direction:column;
  align-items:flex-end;            /* right align */
  text-align:right;
  gap:12px;
}
footer .footer-right::before{
  content:"";
  position:absolute;
  left:0; top:-6px; bottom:-6px;
  width:1px;
  background:linear-gradient(to bottom, transparent, #2a3b7a 12%, #2a3b7a 88%, transparent);
  opacity:.65;
}

/* tagline weight */
footer .byline-2{
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:.2px;
  color:#e8f2ff;
}

/* gradient chip for the tagline */
footer .chip-gradient{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(90deg,#6d5dfc,#21c8ff);
  border:1px solid rgba(173,200,255,.35);
  box-shadow:0 12px 30px rgba(33,200,255,.25);
  color:#072033;
}

/* button row (right aligned) */
footer .footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-end;        /* keep to the right */
}

/* heavier-looking buttons in footer only (safe override) */
footer .footer-right .btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #2a3b7a;
  background:linear-gradient(90deg,#00d5ff,#0b84ff);
  color:#051a2e;
  font-weight:800;
  box-shadow:0 14px 30px rgba(11,132,255,.28),
             inset 0 1px 0 rgba(255,255,255,.25);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
footer .footer-right .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(11,132,255,.34),
             inset 0 1px 0 rgba(255,255,255,.35);
}

/* optional secondary style for the blog button (keeps contrast) */
footer .footer-right .btn.btn--ghost{
  background:rgba(255,255,255,.06);
  color:#dbe7ff;
  border-color:#345099;
  box-shadow:0 10px 26px rgba(29,100,242,.18);
}
footer .footer-right .btn.btn--ghost:hover{
  background:rgba(255,255,255,.10);
}





/* === Testimonial Rotator Effects === */
:root{
  --testi-rotate-ms: 6000;   /* must match JS */
  --testi-ease: cubic-bezier(.2,.7,.2,1);
}

.testi-wrap{ position:relative; }
#testi-rotator{
  position:relative;
  min-height: 360px;                 /* avoids layout jump */
}

/* stack all items, only one visible */
#testi-rotator .t-item{
  position:absolute; inset:0;
  opacity:0; transform: translateY(8px) scale(.995);
  filter: blur(2px);
  pointer-events:none;
  transition:
    opacity .6s var(--testi-ease),
    transform .6s var(--testi-ease),
    filter .6s var(--testi-ease);
  will-change: opacity, transform, filter;
}

/* active card */
#testi-rotator .t-item.is-on{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events:auto;
}

/* exit class for a nicer crossfade */
#testi-rotator .t-item.is-leaving{
  opacity:0;
  transform: translateY(-6px) scale(.995);
  filter: blur(1.5px);
}

/* micro animations inside the card */
#testi-rotator .t-quote{
  transform: translateY(6px);
  opacity:0;
  transition: all .5s var(--testi-ease);
}
#testi-rotator .is-on .t-quote{
  transform: translateY(0);
  opacity:1;
}

#testi-rotator .t-person{ transform: translateY(8px); opacity:0; transition: all .6s var(--testi-ease) .05s; }
#testi-rotator .is-on .t-person{ transform:none; opacity:1; }
#testi-rotator .t-avatar{ transform: scale(.9); opacity:.0; transition: all .5s var(--testi-ease) .08s; }
#testi-rotator .is-on .t-avatar{ transform: scale(1); opacity:1; }

/* soft glow behind active card (optional, matches your theme) */
#testi-rotator .t-item.is-on::after{
  content:""; position:absolute; inset:-8px; border-radius:14px;
  background: radial-gradient(120% 80% at 70% -40%, rgba(34,211,238,.07), transparent 60%),
              radial-gradient(120% 80% at 30% 140%, rgba(99,102,241,.07), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

/* progress bar at bottom */
.testi-progress{
  position:absolute; left:0; right:0; bottom:-10px; height:3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px; overflow:hidden;
}
.testi-progress > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #06b6d4, #4f46e5);
  animation: testiFill var(--testi-rotate-ms) linear forwards;
}
@keyframes testiFill{
  from{ width:0% }
  to{ width:100% }
}

/* honor reduced-motion */
@media (prefers-reduced-motion: reduce){
  #testi-rotator .t-item,
  #testi-rotator .t-quote,
  #testi-rotator .t-person,
  #testi-rotator .t-avatar{
    transition: none !important;
  }
  .testi-progress{ display:none; }
}




/* ======================
   Testimonial card polish
   ====================== */

/* Keep the rotator constrained and right-aligned in its column */
#testimonials .testi-wrap { padding-left: 12px; }
#testimonials #testi-rotator { max-width: 720px; margin-left: auto; }

/* Card look (applies only to active/inactive items inside the rotator) */
#testi-rotator .t-item{
  padding: 18px 22px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,213,255,.08), rgba(0,213,255,0) 40%),
    radial-gradient(120% 140% at 100% 120%, rgba(99,102,241,.08), rgba(99,102,241,0) 40%),
    rgba(10,16,34,.72);                 /* glassy base */
  border: 1px solid rgba(120,150,255,.28);
  box-shadow: 0 14px 32px rgba(2,12,27,.28);
  color: #eaf1ff;
}

/* Improve quote readability + add subtle quote mark */
#testi-rotator .t-quote{
  font-size: 1.04rem;
  line-height: 1.55;
  color: #eaf2ff;
}
#testi-rotator .t-quote::before{
  content: "“";
  display: inline-block;
  font-size: 36px;
  line-height: 0;
  margin-right: 6px;
  vertical-align: -10px;
  opacity: .45;
}

#testi-rotator .t-quote {
  position: relative;
}

#testi-rotator .t-quote::after{
  content: "”";
  display: inline-block;
  font-size: 36px;
  line-height: 0;
  margin-left: 6px;
  vertical-align: -10px;
  opacity: .45;
}

/* Person line: avatar + name + org */
#testi-rotator .t-person{ 
  margin-top: 12px;
  color: #cfe3ff;
}
#testi-rotator .t-person b,
#testi-rotator .t-person strong{
  color: #ffffff;
  font-weight: 800;
}
#testi-rotator .t-person small,
#testi-rotator .t-person .company{
  color: #d4e3ff;
  opacity: .95;
}

/* Avatar tidy (if present) */
#testi-rotator .t-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(120,150,255,.35);
  background: linear-gradient(135deg,#a5f3fc,#60a5fa);
  color:#072033;
}

/* Make the progress bar sit right under the card with good contrast */
.testi-progress{ bottom: -12px; }
.testi-progress > i{
  background: linear-gradient(90deg, #00d5ff, #4f46e5);
}

/* Keep animation transitions but ensure fully visible when active */
#testi-rotator .t-item.is-on{
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) scale(1) !important;
}

/* Light theme tweak if you switch themes */
:root[data-theme="light"] #testi-rotator .t-item{
  background: #ffffff;
  border: 1px solid #e4e9f5;
  box-shadow: 0 12px 26px rgba(2,12,27,.10);
  color:#0b1220;
}
:root[data-theme="light"] #testi-rotator .t-quote{ color:#0b1220; }
:root[data-theme="light"] .testi-progress > i{
  background: linear-gradient(90deg, #0ea5ff, #6366f1);
}



/* keep the grid row from ballooning */
.testimonials{ align-items:start; }          /* no stretch */

/* lock the testimonial rotator height (tweak as you like) */
:root{ --testi-h: 300px; }                   /* choose 260–320px range */
#testi-rotator{
  position: relative;
  height: var(--testi-h);                    /* fixed container height */
  min-height: var(--testi-h);
}

/* cards stack inside, don't affect layout height */
#testi-rotator .t-item{
  position: absolute; inset: 0;
  padding: 18px 22px 18px;                   /* remove bottom padding that enlarged it */
}

/* progress bar lives INSIDE the card, pinned to bottom */
#testi-rotator .t-item .testi-progress{
  position: absolute;
  left: 22px; right: 22px; bottom: 12px;     /* inside the border */
  height: 4px; border-radius: 999px;
  background: rgba(120,150,255,.28);
  overflow: hidden;
}

/* fill animation unchanged */
#testi-rotator .t-item .testi-progress > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#00d5ff,#4f46e5);
  animation: testiFill var(--testi-rotate-ms,6000ms) linear forwards;
}



/* Make both columns equal height */
.testimonials{ align-items: stretch; }                 /* stretch grid items */

/* Right box fills the full column height */
#testi-rotator{
  position: relative;
  height: 100%;                                        /* match left column */
  min-height: 340px;                                   /* safety for small screens */
}

/* Card fills the rotator, leave room for progress bar */
#testi-rotator .t-item{
  position:absolute; inset:0;
  padding: 22px 24px 34px;                             /* +bottom room for progress */
  border-radius:16px;
}

/* Progress bar INSIDE the card, pinned to the bottom */
#testi-rotator .testi-progress{
  position:absolute;
  left:24px; right:24px; bottom:12px;
  height:4px; border-radius:999px;
  background: rgba(120,150,255,.28);
  overflow:hidden;
}
#testi-rotator .testi-progress > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#00d5ff,#4f46e5);
  animation: testiFill var(--testi-rotate-ms,6000ms) linear forwards;
}

/* Nicer fade/blur when card changes */
:root{ --testi-ease: cubic-bezier(.2,.7,.2,1); }
#testi-rotator .t-item{
  opacity:0; transform: translateY(8px) scale(.995);
  filter: blur(2px);
  transition: opacity .55s var(--testi-ease), transform .55s var(--testi-ease), filter .55s var(--testi-ease);
}
#testi-rotator .t-item.is-on{
  opacity:1; transform:none; filter: none;
}
#testi-rotator .t-item.is-leaving{
  opacity:0; transform: translateY(-6px) scale(.995); filter: blur(1.5px);
}

/* Also fade inner text and person line for extra polish */
#testi-rotator .t-quote,
#testi-rotator .t-person{ transition: opacity .45s var(--testi-ease), transform .45s var(--testi-ease); }
#testi-rotator .t-quote{ opacity:.0; transform: translateY(6px); }
#testi-rotator .t-person{ opacity:.0; transform: translateY(8px); }
#testi-rotator .t-item.is-on .t-quote,
#testi-rotator .t-item.is-on .t-person{ opacity:1; transform:none; }




/* Alias selector so all “#testi-rotator …” rules also work for “.testi-rotator …” */
:is(#testi-rotator, .testi-rotator) .t-item        { /* leave empty: this just widens selector */ }
:is(#testi-rotator, .testi-rotator) .t-item.is-on  {}
:is(#testi-rotator, .testi-rotator) .t-item.is-leaving {}
:is(#testi-rotator, .testi-rotator) .t-quote       {}
:is(#testi-rotator, .testi-rotator) .t-person      {}
:is(#testi-rotator, .testi-rotator) .t-avatar      {}
:is(#testi-rotator, .testi-rotator) .testi-progress{}



/* ==== Testimonial rotator: make both ID and class behave the same ==== */
:is(#testi-rotator, .testi-rotator) { 
  position: relative; 
  min-height: 360px;        /* keep height so layout doesn't jump */
}

/* stack all items atop each other, only active visible */
:is(#testi-rotator, .testi-rotator) .t-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(.995);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1),
              transform .6s cubic-bezier(.2,.7,.2,1),
              filter .6s cubic-bezier(.2,.7,.2,1);
}

:is(#testi-rotator, .testi-rotator) .t-item.is-on{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

:is(#testi-rotator, .testi-rotator) .t-item.is-leaving{
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  filter: blur(1.5px);
}

/* progress bar (if present) sits inside the rotator at the bottom */
:is(#testi-rotator, .testi-rotator) .testi-progress{
  position: absolute;
  left: 0; right: 0; bottom: -10px;  /* or 12px if you prefer inside padding */
  height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
:is(#testi-rotator, .testi-rotator) .testi-progress > i{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, #06b6d4, #4f46e5);
}




/* === Dual white panels (equal height) === */
.split-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;           /* make both columns same height */
}
.split-two .panel{
  background:#fff;
  color:#000;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 24px rgba(2,12,27,.06);
  display:flex;                 /* so inner can stretch */
  flex-direction:column;
}
.split-two .panel *{ color:#000 !important; } /* force black text */
.split-two .panel .inner{ flex:1; display:flex; flex-direction:column; }

/* Mobile: stack */
@media (max-width: 900px){
  .split-two{ grid-template-columns:1fr; }
}





/* stack the two boxes vertically */
.split-vert{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.split-vert .panel{
  background:#fff; color:#000;
  border:1px solid #e5e7eb; border-radius:16px;
  padding:18px; box-shadow:0 8px 24px rgba(2,12,27,.06);
  display:flex;
}
.split-vert .panel *{ color:#000 !important; }
.split-vert .panel > .testi-rotator{ flex:1; }

/* progress bar INSIDE card bottom (already covered in your rules, but
   ensure it works for class-based rotators too) */
.testi-rotator .testi-progress{
  position:absolute; left:22px; right:22px; bottom:12px;
  height:4px; border-radius:999px; background:#e5e7eb; overflow:hidden;
}
.testi-rotator .testi-progress > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#0ea5ff,#6366f1);
}

/* mobile: give them some breathing room */
@media (max-width: 900px){
  .split-vert{ grid-template-rows:auto auto; }
}



/* Right column total height = left image height; two equal panels */
#testimonials .split-vert{
  display:flex;
  flex-direction:column;
  gap:16px;                  /* keep your spacing */
  height: var(--rhs-total, 360px);   /* JS will update this */
  min-height: 260px;         /* safety on very small screens */
}

/* Each panel gets half the available height */
#testimonials .split-vert .panel{
  flex:1 1 0;
  min-height:0;              /* allow flexbox to shrink properly */
  position:relative;
}

/* Rotator fills its panel */
#testimonials .split-vert .panel > .testi-rotator{
  position:relative;
  height:100%;
}

/* Cards stack inside the rotator (you already have these rules,
   but this ensures they respect the panel height) */
#testimonials .split-vert .panel > .testi-rotator .t-item{
  position:absolute; inset:0;
}

/* Progress bar stays inside the card bottom */
#testimonials .split-vert .panel .testi-progress{
  left:22px; right:22px; bottom:12px;
}



/* --- Split-vertical testimonials: no progress bar --- */
#testimonials .split-vert .testi-progress{
  display:none !important;
}

/* Keep each card fully inside its white panel */
#testimonials .split-vert .panel{
  position: relative;
  overflow: hidden;             /* clips glow/shadows/gradients */
  background: #fff;             /* stays white */
  color: #0b1220;               /* text black */
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;                   /* the rotator/card handles its own padding */
}

/* Rotator fills the panel height */
#testimonials .split-vert .panel > .testi-rotator{
  position: relative;
  height: 100%;
}

/* Card fills panel without extra bottom space (we removed the bar) */
#testimonials .split-vert .panel > .testi-rotator .t-item{
  position: absolute; inset: 0;
  padding: 18px 22px;           /* tighten; no extra bottom for bar */
  background: #fff;             /* keep card white */
  color:#0b1220;
  border: none;                 /* avoid a second inner border */
  box-shadow: none;             /* use panel’s shadow if any */
}

/* Optional: tone down or clip the decorative glow if you kept it */
#testimonials .split-vert .panel > .testi-rotator .t-item::after{
  pointer-events:none;
}




/* Rotator base */
.v-rotator{
  position: relative;
  isolation: isolate;        /* nice-to-have for effects */
}

/* Stack all items and animate */
.v-rotator .v-item{
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(.995);
  filter: blur(1.5px);
  pointer-events: none;
  transition:
    opacity .50s cubic-bezier(.2,.7,.2,1),
    transform .50s cubic-bezier(.2,.7,.2,1),
    filter .50s cubic-bezier(.2,.7,.2,1);
}

.v-rotator .v-item.is-on{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.v-rotator .v-item.is-leaving{
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  filter: blur(1px);
}

/* Optional: subtle quote/text entrance inside each item */
.v-rotator .v-item .t-quote,
.v-rotator .v-item .t-person{
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1) .05s,
              transform .45s cubic-bezier(.2,.7,.2,1) .05s;
}
.v-rotator .v-item.is-on .t-quote,
.v-rotator .v-item.is-on .t-person{
  opacity: 1; transform: none;
}



/* --- Testimonial rotator core --- */
.testi-rotator{ position:relative; isolation:isolate; }

/* Stack all items, show only the active one */
.testi-rotator .t-item{
  position:absolute; inset:0;
  opacity:0; transform:translateY(8px) scale(.995);
  filter:blur(1.5px); pointer-events:none;
  transition:
    opacity .5s cubic-bezier(.2,.7,.2,1),
    transform .5s cubic-bezier(.2,.7,.2,1),
    filter .5s cubic-bezier(.2,.7,.2,1);
}
.testi-rotator .t-item.is-on{
  opacity:1; transform:translateY(0) scale(1);
  filter:none; pointer-events:auto;
}
.testi-rotator .t-item.is-leaving{
  opacity:0; transform:translateY(-6px) scale(.995);
  filter:blur(1px);
}

/* Optional: fade-in of quote + person line inside each slide */
.testi-rotator .t-quote,
.testi-rotator .t-person{
  opacity:0; transform:translateY(6px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1) .05s,
             transform .45s cubic-bezier(.2,.7,.2,1) .05s;
}
.testi-rotator .t-item.is-on .t-quote,
.testi-rotator .t-item.is-on .t-person{
  opacity:1; transform:none;
}

/* Optional progress bar (only rendered when data-progress="true") */
.testi-rotator .testi-progress{
  position:absolute; left:16px; right:16px; bottom:10px;
  height:3px; border-radius:999px; overflow:hidden;
  background:rgba(0,0,0,.08);
}
.testi-rotator .testi-progress > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#0ea5ff,#6366f1);
}