:root{
  /* Base surfaces */
  --bg:#0e172f;
  --surface:#0e172f;
  --surface-2:#111827;

  /* Typography - Unified Clepto Palette */
  --text:#FFFFFF;
  --text-secondary:#E8F4F8;
  --text-muted:rgba(255,255,255,.72);
  --text-paragraph:#D6E6EE;

  /* Brand accents - Professional Cyan/Teal */
  --accent-cyan:#00F2EA;
  --accent-blue:#4DABF7;
  --accent-teal:#00B3AD;
  --teal:#14B8A6;
  --teal-2:#2DD4BF;
  --cyan:#22D3EE;
  --cyan-2:#67E8F9;

  /* Effects & borders */
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --glow:0 0 24px rgba(34,211,238,.28);

  /* Layout */
  --radius:16px;
  --radius-lg:24px;
  --container:1200px;
  --font-headings:'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-base:16px;
  --logo-desktop:80px;
  --logo-mobile:60px;
  --nav-font-size:17px;
  --shadow-1:0 18px 36px color-mix(in srgb, var(--cyan) 18%, transparent);
  --shadow-2:0 40px 88px color-mix(in srgb, var(--cyan) 26%, transparent);
}

/* Fonts are loaded via HTML link tags for better performance */

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{
    scroll-behavior:smooth !important;
    scroll-padding-top:80px; /* Account for fixed navbar */
  }

  /* Enable smooth scrolling globally */
  * {
    scroll-behavior: smooth !important;
  }
  body{
    background:var(--bg);
    color:var(--text-paragraph);
    font-family:var(--font-body);
    line-height:1.6;
    letter-spacing:.2px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-display:swap;
  }

/* =====================================================
   PAGE LOAD TRANSITION
   ===================================================== */
body{
  opacity:0;
  animation:fadeInBody .4s ease forwards;
}

@keyframes fadeInBody{
  to{opacity:1}
}

/* Performance optimizations - Hardware acceleration for smooth rendering */
img{
  content-visibility:auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
video{
  content-visibility:auto;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  /* Optimize video decoding */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.hero-bg video{
  pointer-events:none;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  /* Force GPU acceleration */
  will-change: transform;
}

/* iOS-specific optimizations */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

/* Optimize animations for mobile - Keep animations but make them smoother */
@media (max-width: 768px){
  /* Hardware acceleration for smooth animations */
  .reveal, .card, .btn, video, img{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  
  /* Optimize animations - shorter duration on mobile */
  .reveal{
    animation-duration: 0.3s !important; /* Faster animations */
    transition-duration: 0.2s !important;
  }
  
  /* Optimize video rendering */
  video{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .reveal{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================
   PREMIUM TYPOGRAPHY HIERARCHY
   ===================================================== */

h1,h2,h3,h4,h5,h6{
  color:var(--text);
  font-family:var(--font-headings);
  margin:1.5em 0 0.5em;
}

h1{
  font-weight:800;
  font-size:clamp(2.6rem, 2.3rem + 2.9vw, 5rem);
  line-height:1.1;
  letter-spacing:-0.03em;
  text-shadow:0 2px 12px rgba(0, 0, 0, 0.4);
  margin-top:0;
}

h2{
  font-weight:700;
  font-size:clamp(1.8rem, 1.5rem + 1.5vw, 2.8rem);
  line-height:1.2;
  letter-spacing:-0.02em;
}

h3{
  font-weight:600;
  font-size:clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  line-height:1.3;
  letter-spacing:-0.01em;
}

h4{
  font-weight:600;
  font-size:1.125rem;
  line-height:1.4;
}

h5, h6{
  font-weight:600;
  font-size:1rem;
  line-height:1.5;
}

.hero-title,
.hero-gradient,
.hero h1{
  background:linear-gradient(135deg, #FFFFFF 0%, var(--accent-cyan) 45%, var(--accent-teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:gradientShift 8s ease infinite;
}

@keyframes gradientShift{
  0%, 100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.hero h1 span{background:linear-gradient(135deg, #FFFFFF 0%, var(--accent-cyan) 45%, var(--accent-teal) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

p{
  line-height:1.65;
  letter-spacing:0.3px;
  margin:0 0 1.5em 0;
  max-width:70ch;
}

p.lead{
  font-size:1.125rem;
  color:var(--text-paragraph);
  max-width:68ch;
  line-height:1.7;
  letter-spacing:0.2px;
}

small, .legal, .meta, .eyebrow{
  color:var(--text-muted);
  letter-spacing:0.5px;
}

.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:80px 0; position:relative}
.section .eyebrow{font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem}

  .hero{
    padding:120px 0 60px;
    position:relative;
    overflow:hidden;
  }
.hero .container{position:relative; z-index:2; text-align:center}
.hero-bg{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 75% -10%, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
}

.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}

  .grid{display:grid; gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi{
  padding:16px;
  border-radius:14px;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  border:1px dashed var(--border);
  text-align:center;
  color:var(--text-paragraph);
}
.kpi strong{display:block; font-size:1.6rem; color:var(--text)}

  .marquee{display:flex; gap:24px; overflow:auto; padding:10px 0}
  .marquee img{height:28px; opacity:.8; filter:grayscale(100%)}

  .features .card{height:100%}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  font-size:.85rem;
  color:var(--text);
  background:color-mix(in srgb, var(--surface-2) 80%, transparent);
  border:1px solid var(--border);
  border-radius:999px;
}

.card{
  background:rgba(17, 24, 39, 0.6);
  color:var(--text-paragraph);
  border:1px solid var(--border);
  border-radius:20px;
  backdrop-filter:saturate(1.05) blur(12px);
  transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
  /* Hardware acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.card .card-body{padding:24px}
.card h3{color:var(--text)}
.card:hover{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.8);
  box-shadow:0 0 32px rgba(0, 242, 234, 0.4), 0 12px 48px rgba(0, 0, 0, 0.5);
  -webkit-transform:translateY(-6px) scale(1.01) translateZ(0);
  transform:translateY(-6px) scale(1.01) translateZ(0);
}
.card:focus-within{outline:2px solid var(--accent-cyan); outline-offset:2px}

.card.service{overflow:hidden}
.card.service img.thumb{width:100%; height:168px; object-fit:cover; display:block; border-bottom:1px solid var(--border)}
.card.service .meta{display:flex; gap:8px; align-items:center; margin-bottom:6px; color:var(--text-secondary)}
.card.service .meta .tag{font-size:.75rem; padding:4px 8px; border-radius:999px; background:color-mix(in srgb, var(--cyan) 18%, transparent); border:1px solid var(--border); color:var(--text)}
.card.service ul{margin:.4rem 0 0 1.1rem; color:var(--text-paragraph)}
.card.service ul li{margin:.25rem 0}
.card.service .actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}

.cta-slab{
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-2);
}

.accordion .item{border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:color-mix(in srgb, var(--surface) 90%, transparent)}
.accordion .q{font-weight:700; cursor:pointer; color:var(--text)}
.accordion .a{max-height:0; overflow:hidden; transition:max-height .25s ease}
.accordion .item[data-open="true"] .a{max-height:400px}

  .reveal{
    opacity:0; 
    transform:translateY(14px); 
    transition:.4s opacity,.4s transform; 
    will-change:opacity,transform;
    /* Hardware acceleration */
    -webkit-transform: translateY(14px) translateZ(0);
    transform: translateY(14px) translateZ(0);
  }
  .reveal.is-visible{
    opacity:1; 
    transform:none; 
    will-change:auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  @keyframes fade-in{from{opacity:0} to{opacity:1}}
  @keyframes slide-up{from{transform:translateY(22px); opacity:0} to{transform:none; opacity:1}}
  @keyframes slide-left{from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1}}
  @keyframes slide-right{from{transform:translateX(-24px); opacity:0} to{transform:none; opacity:1}}
  @keyframes zoom-in{from{transform:scale(.98); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes pop{0%{transform:scale(.95); opacity:0} 70%{transform:scale(1.02); opacity:1} 100%{transform:scale(1)}}
  @keyframes blur-in{from{filter:blur(8px); opacity:0} to{filter:blur(0); opacity:1}}
  @keyframes tilt-in{from{transform:rotateX(6deg) translateY(16px); opacity:0} to{transform:none; opacity:1}}
  @keyframes rotate-in{from{transform:rotate(-2deg) scale(.98); opacity:0} to{transform:none; opacity:1}}
@keyframes rise{from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1}}

  .reveal.fx-fade.is-visible{animation:fade-in .6s ease both}
  .reveal.fx-up.is-visible{animation:slide-up .6s ease both}
  .reveal.fx-left.is-visible{animation:slide-left .6s ease both}
  .reveal.fx-right.is-visible{animation:slide-right .6s ease both}
  .reveal.fx-zoom.is-visible{animation:zoom-in .6s ease both}
  .reveal.fx-pop.is-visible{animation:pop .6s ease both}
  .reveal.fx-blur.is-visible{animation:blur-in .5s ease both}
  .reveal.fx-tilt.is-visible{animation:tilt-in .6s ease both}
  .reveal.fx-rotate.is-visible{animation:rotate-in .6s ease both}
  .reveal.fx-rise.is-visible{animation:rise .7s ease both}

/* =====================================================
   PREMIUM ANIMATION ENHANCEMENTS
   Stagger effects for grouped elements
   ===================================================== */

/* Hero fade-in on page load */
.hero{
  animation:fadeIn .8s ease both;
}
.hero-content{
  animation:slideUp .6s ease .2s both;
}

/* Stagger effects for process steps */
.process-step:nth-child(1){animation-delay:0.1s}
.process-step:nth-child(2){animation-delay:0.2s}
.process-step:nth-child(3){animation-delay:0.3s}
.process-step:nth-child(4){animation-delay:0.4s}

/* Stagger effects for solution cards */
.solution-card:nth-child(1){animation-delay:0.05s}
.solution-card:nth-child(2){animation-delay:0.1s}
.solution-card:nth-child(3){animation-delay:0.15s}
.solution-card:nth-child(4){animation-delay:0.2s}
.solution-card:nth-child(5){animation-delay:0.25s}
.solution-card:nth-child(6){animation-delay:0.3s}

/* Stagger effects for tech cards */
.tech-card:nth-child(1){animation-delay:0.05s}
.tech-card:nth-child(2){animation-delay:0.1s}
.tech-card:nth-child(3){animation-delay:0.15s}
.tech-card:nth-child(4){animation-delay:0.2s}

/* Stagger effects for package cards */
.package-card:nth-child(1){animation-delay:0.1s}
.package-card:nth-child(2){animation-delay:0.2s}
.package-card:nth-child(3){animation-delay:0.3s}

/* Stagger effects for KPIs and metrics */
.kpi:nth-child(1){animation-delay:0.05s}
.kpi:nth-child(2){animation-delay:0.1s}
.kpi:nth-child(3){animation-delay:0.15s}
.kpi:nth-child(4){animation-delay:0.2s}

/* Stagger for case study cards */
.case-card:nth-child(1){animation-delay:0.05s}
.case-card:nth-child(2){animation-delay:0.1s}
.case-card:nth-child(3){animation-delay:0.15s}
.case-card:nth-child(4){animation-delay:0.2s}
.case-card:nth-child(5){animation-delay:0.25s}
.case-card:nth-child(6){animation-delay:0.3s}

/* Stagger for article cards */
.article-card:nth-child(1){animation-delay:0.1s}
.article-card:nth-child(2){animation-delay:0.2s}
.article-card:nth-child(3){animation-delay:0.3s}
.article-card:nth-child(4){animation-delay:0.4s}

.btn, button.btn, a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-headings);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid var(--border);
  color:var(--text);
  background:transparent;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  /* Hardware acceleration for smooth interaction */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.btn:hover{
  border-color:var(--border-strong);
  background:rgba(255, 255, 255, 0.03);
  -webkit-transform:translateY(-2px) translateZ(0);
  transform:translateY(-2px) translateZ(0);
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn:active{
  -webkit-transform:translateY(0) scale(0.98) translateZ(0);
  transform:translateY(0) scale(0.98) translateZ(0);
}
.btn:focus, .btn:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px}
.btn-ghost{background:transparent}

.btn-primary{
  padding:14px 28px;
  border:0;
  font-family:var(--font-headings);
  font-weight:700;
  font-size:1rem;
  color:var(--bg);
  background:linear-gradient(135deg, var(--teal), var(--cyan));
  background-size:200% 200%;
  background-position:0% 50%;
  box-shadow:0 10px 24px color-mix(in srgb, var(--teal) 40%, transparent);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  /* Hardware acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--teal-2), var(--cyan-2));
  opacity:0;
  transition:opacity .3s ease;
}
.btn-primary:hover{
  -webkit-transform:translateY(-2px) scale(1.03) translateZ(0);
  transform:translateY(-2px) scale(1.03) translateZ(0);
  box-shadow:0 16px 32px color-mix(in srgb, var(--cyan) 45%, transparent), 0 0 24px rgba(0, 242, 234, 0.3);
  background-position:100% 50%;
}
.btn-primary:hover::before{
  opacity:1;
}
.btn-primary:active{
  -webkit-transform:translateY(0) scale(0.98) translateZ(0);
  transform:translateY(0) scale(0.98) translateZ(0);
}
.btn-primary:focus{outline:2px solid var(--accent-cyan); outline-offset:2px}

/* Ripple effect for buttons (will be activated via JS) */
.btn::after, .btn-primary::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  opacity:0;
  transform:scale(0);
  transition:transform .6s ease, opacity .6s ease;
  pointer-events:none;
  z-index:1;
}
.btn.ripple-active::after, .btn-primary.ripple-active::after{
  opacity:1;
  transform:scale(2.5);
  transition:transform .6s ease, opacity .6s ease;
}

/* Loading state for buttons */
.btn.loading, .btn-primary.loading{
  pointer-events:none;
  opacity:0.7;
}
.btn.loading::before, .btn-primary.loading::before{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}

a{color:var(--accent-cyan); text-decoration:none; transition:color .25s ease}
a:hover, a:focus{color:var(--accent-blue)}
hr, .divider{border-color:var(--border)}

/* =====================================================
   PREMIUM NAVBAR WITH SCROLL BEHAVIOR
   ===================================================== */

.site-header{
  background:rgba(14, 23, 47, 0.95);
  border-bottom:1px solid rgba(0, 242, 234, 0.15);
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  backdrop-filter:saturate(1.2) blur(16px);
  box-shadow:0 2px 16px rgba(0, 0, 0, 0.4);
  height:80px;
  opacity:0.85;
  transition:opacity .4s cubic-bezier(0.4, 0, 0.2, 1), background .3s ease, box-shadow .3s ease;
  will-change:opacity;
}

.site-header.scrolled{
  background:rgba(14, 23, 47, 0.98);
  box-shadow:0 4px 24px rgba(0, 0, 0, 0.6), 0 0 32px rgba(0, 242, 234, 0.1);
  opacity:1;
}

.site-header.at-top{
  opacity:0.85;
  background:rgba(14, 23, 47, 0.85);
}
.site-header .bar{
  height:80px;
  min-height:80px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{display:flex; align-items:center; padding:0; margin:0; height:100%}
.brand img,.footer-logo img{display:block; height:var(--logo-desktop); width:auto; max-height:var(--logo-desktop); object-fit:contain}

.nav{display:flex; align-items:center; gap:32px}
.nav a{
  color:#FFFFFF;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:var(--nav-font-size);
  position:relative;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing:0.4px;
}
.nav a::before{
  content:'';
  position:absolute;
  bottom:6px;
  left:50%;
  right:50%;
  height:2px;
  background:linear-gradient(90deg, var(--accent-cyan), var(--accent-teal));
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:all .25s ease-out;
  border-radius:2px;
}
.nav a:hover{
  color:var(--accent-cyan);
  background:rgba(0, 242, 234, 0.08);
}
.nav a:hover::before{
  left:16px;
  right:16px;
  transform:translateX(0) scaleX(1);
}
.nav a.active{
  color:var(--accent-cyan);
  background:color-mix(in srgb, var(--accent-teal) 12%, transparent);
}
.nav a.active::before{
  left:16px;
  right:16px;
  transform:translateX(0) scaleX(1);
}
.nav a:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:2px;
}
.nav .btn, .nav .btn-primary{padding:12px 24px; font-size:.95rem}

.navbar, .site-header + .ribbon, .ribbon{display:none !important}

.nav-toggle{display:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:10px; padding:8px 10px}

.hero-media .card-body>video,
.card .card-body>video{width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:12px}

footer.footer{padding:40px 0; border-top:1px solid var(--border); color:var(--text-muted)}
.footer .cols{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center}
.footer .footer-left{display:flex;align-items:flex-end;gap:1rem}
.footer .footer-brand{display:flex;align-items:center;padding-bottom:4px}
.footer .footer-right{text-align:right}
.footer .social-icons{display:flex; gap:12px; align-items:center; margin-top:12px; justify-content:flex-end}
.footer .social-icons a{display:inline-flex; opacity:.7; transition:opacity .2s ease, transform .2s ease}
.footer .social-icons img{display:block; width:28px; height:28px}
.footer .social-icons a:hover{opacity:1; transform:translateY(-2px)}
.footer a{color:var(--text-secondary)}
.footer a:hover{color:var(--text)}

@media (max-width:720px){
  .footer .cols{grid-template-columns:1fr; row-gap:32px; text-align:center}
  .footer .footer-left{flex-direction:column;align-items:center;gap:0.75rem}
  .footer .footer-right{text-align:center}
  .footer .social-icons{justify-content:center}
}

/* =====================================================
   PREMIUM FORM INTERACTIONS
   ===================================================== */

form.themed input,
form.themed select,
form.themed textarea{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(17, 24, 39, 0.5);
  color:var(--text);
  outline:none;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:1rem;
  font-family:var(--font-body);
}
form.themed ::placeholder{
  color:var(--text-muted);
  opacity:.7;
  transition:opacity .3s ease;
}
form.themed input:focus,
form.themed select:focus,
form.themed textarea:focus{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.8);
  box-shadow:0 0 0 3px rgba(0, 242, 234, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
  transform:translateY(-1px);
}
form.themed input:focus::placeholder,
form.themed select:focus::placeholder,
form.themed textarea:focus::placeholder{
  opacity:1;
}

/* Form validation states */
form.themed input.success,
form.themed select.success,
form.themed textarea.success{
  border-color:#10b981;
  box-shadow:0 0 0 3px rgba(16, 185, 129, 0.15);
}
form.themed input.error,
form.themed select.error,
form.themed textarea.error{
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239, 68, 68, 0.15);
  animation:shake .3s ease;
}

@keyframes shake{
  0%, 100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
form.themed select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position:calc(100% - 20px) 1.3rem, calc(100% - 15px) 1.3rem;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

#contact-modal,
#thankyou,
#newsletter-modal{
  display:none;
  position:fixed;
  inset:0;
  place-items:center;
  background:rgba(10,15,28,.92);
  backdrop-filter:blur(8px);
  z-index:1000;
  padding:16px;
  overflow-y:auto;
  animation:fadeIn .3s ease;
}
#contact-modal .card,
#thankyou .card,
#newsletter-modal .card{
  background:var(--surface);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-2);
  border-radius:var(--radius-lg);
  animation:slideUp .4s ease;
}
#contact-modal .card-body,
#thankyou .card-body,
#newsletter-modal .card-body{padding:28px}

#contact-modal h3,
#thankyou h3,
#newsletter-modal h3{
  color:var(--text);
  font-family:var(--font-headings);
  font-size:1.6rem;
  margin:0 0 8px 0;
}

#newsletter-modal .lead,
#thankyou .lead{color:var(--text-paragraph);line-height:1.6}

#contact-modal .btn[data-close],
#thankyou .btn[data-close-thanks]{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
}
#contact-modal .btn[data-close]:hover,
#thankyou .btn[data-close-thanks]:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.nav.open{display:flex}
.nav[data-open="true"]{display:flex}

/* =====================================================
   ACCESSIBILITY & REDUCED MOTION
   Comprehensive support for users who prefer reduced motion
   ===================================================== */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }

  .hero-bg video{
    /* Don't hide video - let poster image show */
    animation:none !important;
  }

  .hero-bg{
    transform:none !important;
  }

  .reveal{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  body{
    animation:none !important;
  }

  .hero,
  .hero-content,
  .gradient-text{
    animation:none !important;
  }
}

/* Keyboard Navigation - Focus Visible Styles */
:focus{
  outline:none;
}

:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:3px;
  border-radius:4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(0, 242, 234, 0.2);
}

/* Skip to main content link for screen readers */
.skip-to-main{
  position:absolute;
  top:-100px;
  left:0;
  background:var(--accent-cyan);
  color:var(--bg);
  padding:12px 20px;
  border-radius:0 0 8px 0;
  font-weight:700;
  z-index:10000;
  transition:top .3s ease;
}

.skip-to-main:focus{
  top:0;
}

/* Video performance optimization */
video{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  /* Prevent layout shift */
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:980px){
  .site-header{height:80px}
  .site-header .bar{height:80px; min-height:80px; padding:0 24px; gap:24px}
  .brand img,.footer-logo img{height:var(--logo-mobile); max-height:var(--logo-mobile)}
  .site-header .nav{flex-direction:column; align-items:flex-start; gap:12px; margin-left:0; height:auto}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 98%, transparent), var(--surface-2)); border-bottom:1px solid var(--border); padding:16px 24px; flex-direction:column; gap:8px; height:auto; backdrop-filter:blur(10px)}
  .nav a{width:100%; padding:12px 16px; border-radius:8px}
  .nav a::after{display:none}
  .nav a:hover{background:color-mix(in srgb, var(--accent-teal) 12%, transparent); color:var(--accent-cyan)}
  .nav .btn, .nav .btn-primary{width:100%; padding:14px 28px; border-radius:999px; font-size:1rem; margin-top:8px}
  .nav-toggle{display:inline-flex}
  .hero{padding:100px 0 48px}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .hero{padding:80px 0 40px !important}
  .hero h1{font-size:1.8rem !important; line-height:1.2}
  .hero .lead{font-size:.95rem; line-height:1.5}
  .hero-actions{width:100%; flex-direction:column}
  .hero-actions .btn, .hero-actions .btn-primary{width:100%; padding:14px 28px; font-size:1rem}
  .btn, button.btn, a.btn, .btn-primary{width:100%; justify-content:center; font-size:1rem; padding:14px 28px}
  .section{padding:50px 0}
  h2{font-size:1.5rem}
  h3{font-size:1.2rem}
  .eyebrow{font-size:.7rem}
  p.lead{font-size:.95rem}
}

.hero-gradient{background:linear-gradient(135deg,#FFFFFF 0%, var(--cyan-2) 45%, var(--teal) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px}

.hero .hero-content{max-width:720px;margin:0 auto;text-align:center;display:grid;gap:18px}
.hero h1{font-size:clamp(2.6rem, 2.3rem + 2.9vw, 5rem)}
.hero .intro{color:var(--text-paragraph);font-size:1.05rem;max-width:60ch;margin:0 auto}
.story{padding-top:90px;padding-bottom:90px}
.story-visual{min-height:260px;border-radius:24px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg, rgba(45,212,191,.12), rgba(34,211,238,.08))}
.story-visual img{display:block;width:100%;height:100%;object-fit:cover}
.leadership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.leader-card{display:flex;flex-direction:column;gap:20px;text-align:center}
.leader-img-link{display:block;text-decoration:none;position:relative}
.leader-img-wrapper{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:1;background:var(--surface)}
.leader-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
img[src*="mohak"]{object-position:50% 35%}
img[src*="mayank"]{object-position:50% 25%}
img[src*="anshul"]{object-position:50% 45%}
.leader-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.leader-overlay .view-portfolio{color:#fff;font-weight:600;font-size:1.1rem}
.leader-img-link:hover .leader-img{transform:scale(1.05)}
.leader-img-link:hover .leader-overlay{opacity:1}
.leader-info{display:flex;flex-direction:column;gap:12px}
.leader-info h3{font-size:1.5rem;margin:0;color:var(--text)}
.leader-links{display:flex;align-items:center;justify-content:center;gap:12px}
.leader-links a{display:flex;align-items:center;text-decoration:none;transition:opacity .2s ease}
.leader-links a:hover{opacity:.7}
.leader-links .icon-sm{width:24px;height:24px}
.leader-links .portfolio-link{color:var(--cyan);font-size:.95rem}
.journey .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:36px 0}
.timeline-item{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;display:grid;gap:10px;text-align:center}
.timeline-date{font-weight:700;color:var(--text)}
.journey-detail{margin-top:32px;gap:32px}
.journey-detail > div{text-align:center;display:grid;gap:10px}
.vision-card{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:24px;padding:40px;display:grid;gap:16px}
.vision-card ul{margin:0;padding-left:1.2rem;display:grid;gap:10px}
.impact-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.impact-tile{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;display:grid;gap:12px;text-align:center;justify-items:center}
.impact-tile h3{font-size:1.6rem;color:var(--cyan)}
.spotlight-card{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px}
.spotlight-media{min-height:220px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(170deg, rgba(20,184,166,.28), transparent 70%)}
.spotlight-media img{display:block;width:100%;height:100%;object-fit:cover}
.team-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0}
.team-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;display:grid;gap:12px;text-align:center}
.team-card .team-icon{display:none}
.team-summary{max-width:72ch;margin:0 auto;text-align:center;color:var(--text-paragraph)}
.clepto-cards{display:flex;flex-direction:column;gap:1.5rem;max-width:1000px;margin:3rem auto 0}
.clepto-card{display:grid;grid-template-columns:340px 1fr;align-items:center;gap:2.5rem;padding:2rem 2.5rem;min-height:120px;background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-2) 95%, transparent));border:2px solid var(--border);border-radius:16px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left center}
.clepto-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg, var(--teal), var(--cyan));transform:scaleY(0);transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top}
.clepto-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 70%);opacity:0;transition:opacity .4s ease}
.clepto-card:hover{border-color:var(--cyan);transform:translateX(8px);box-shadow:0 8px 32px color-mix(in srgb, var(--cyan) 20%, transparent)}
.clepto-card:hover::before{transform:scaleY(1)}
.clepto-card:hover::after{opacity:1}
.clepto-card h4{margin:0;font-family:var(--font-headings);font-weight:700;font-size:1.35rem;color:var(--text);letter-spacing:0.02em;transition:color .3s ease}
.clepto-card:hover h4{color:var(--cyan-2)}
.clepto-card p{margin:0;line-height:1.7;color:var(--text-paragraph);font-size:1.05rem;font-family:var(--font-body)}
.clepto-card:nth-child(1){animation-delay:.1s}
.clepto-card:nth-child(2){animation-delay:.2s}
.clepto-card:nth-child(3){animation-delay:.3s}
.clepto-card:nth-child(4){animation-delay:.4s}
.clepto-card:nth-child(5){animation-delay:.5s}
.clepto-card:nth-child(6){animation-delay:.6s}
.cta-final .cta-slab{align-items:center;text-align:center;display:grid;gap:16px}
.cta-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-actions .btn,.cta-actions .btn-primary{font-size:1rem;padding:14px 28px;font-family:var(--font-headings);font-weight:700}

@media (max-width:1024px){
  .clepto-cards{max-width:100%;margin-top:2.5rem}
  .clepto-card{grid-template-columns:300px 1fr;padding:1.75rem 2rem;gap:2rem}
  .clepto-card h4{font-size:1.25rem}
  .clepto-card p{font-size:1rem}
}

@media (max-width:980px){
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .journey .timeline{grid-template-columns:repeat(2,1fr)}
  .spotlight-card{grid-template-columns:1fr}
  .leadership-grid{grid-template-columns:repeat(2,1fr)}
  .team-strip{grid-template-columns:repeat(2,1fr)}
}


.hero-content{display:grid;gap:16px}

.faq-section{padding:90px 0}
.faq-accordion{max-width:880px;margin:0 auto;display:grid;gap:28px}
.faq-group{display:grid;gap:18px}
.faq-label{font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.faq-item{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden}
.faq-toggle{width:100%;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:transparent;border:0;color:var(--text);font-weight:600;font-size:1.05rem;text-align:left;cursor:pointer}
.faq-toggle:hover,.faq-toggle:focus{background:rgba(255,255,255,.03)}
.faq-icon{font-size:1.4rem;color:var(--cyan);transition:transform .2s ease}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px}
.faq-panel p,.faq-panel ul{color:var(--text-paragraph)}
.faq-panel ul{margin:16px 0 20px 18px;display:grid;gap:10px}
.faq-item[aria-expanded="true"],.faq-item.open{border-color:var(--cyan)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-item.open .faq-panel{padding-bottom:20px}

.faq-cta .cta-slab{max-width:680px;margin:0 auto}

@media (max-width:720px){
  .faq-section{padding:60px 0}
  .faq-accordion{gap:20px; padding:0 4px}
  .faq-group{gap:14px}
  .faq-item{border-radius:14px}
  .faq-toggle{padding:16px 18px; font-size:.95rem; gap:12px}
  .faq-icon{font-size:1.3rem}
  .faq-panel{padding:0 18px}
  .faq-panel p{font-size:.92rem; line-height:1.65; margin:8px 0 12px}
  .faq-panel ul{margin:12px 0 18px 14px; font-size:.9rem; gap:8px}
  .faq-panel ul li{line-height:1.6}
  .faq-item.open .faq-panel{padding-bottom:18px}
  .faq-cta .cta-slab{padding:24px 18px !important}
  }

/* Home page specific */
.why-ai-fails{background:linear-gradient(to bottom, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 80%, transparent) 100%);padding:80px 0}
.why-ai-fails .two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px}
.why-ai-fails .problem-card,.why-ai-fails .solution-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;display:grid;gap:16px}
.why-ai-fails h3{margin-top:0;margin-bottom:12px}
.why-ai-fails ul{margin:0;padding-left:1.2rem;display:grid;gap:12px}

.process-section{position:relative;overflow:hidden}
.process-section::before{content:'';position:absolute;inset:0;background:url('/assets/img/services-orchestration.webp') center/cover no-repeat;opacity:.1;z-index:0;pointer-events:none}
.process-section .container{position:relative;z-index:1}
.process-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;position:relative}
.process-timeline::before{content:'';position:absolute;top:40px;left:12%;right:12%;height:2px;background:linear-gradient(to right, var(--teal), var(--cyan));z-index:0}
.process-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;display:grid;gap:12px;text-align:center;position:relative;z-index:1}
.process-step .step-number{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, var(--teal), var(--cyan));color:var(--bg);font-size:1.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto}
.process-step h3{font-size:1.1rem;margin:0}
.process-step p{margin:0;font-size:.95rem}

/* =====================================================
   PREMIUM SPACING & LAYOUT (8px Grid System)
   Section padding: 160px (desktop), 96px (mobile)
   Cards: 32px (desktop), 24px (mobile)
   Grid gaps: 32px (desktop), 24px (mobile)
   ===================================================== */

.section{padding:160px 0;position:relative}
@media (max-width:768px){
  .section{padding:96px 0}
}

.container{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:768px){
  .container{padding:0 24px}
}

.solutions-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}

/* Premium Solution Cards */
.solution-card{
  background:rgba(17, 24, 39, 0.6);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  backdrop-filter:saturate(1.05) blur(12px);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform;
}
.solution-card:hover{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.85);
  box-shadow:0 0 32px rgba(0, 242, 234, 0.4), 0 20px 60px rgba(0, 0, 0, 0.5);
  transform:translateY(-8px) scale(1.02);
}
.solution-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--border);
  transition:transform .5s ease, filter .5s ease;
}
.solution-card:hover img{
  transform:scale(1.05);
  filter:brightness(1.1);
}
.solution-card .card-content{padding:32px;display:grid;gap:16px}
.solution-card .meta{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.solution-card .tag{
  font-size:.75rem;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0, 242, 234, 0.15), rgba(20, 184, 166, 0.1));
  border:1px solid rgba(0, 242, 234, 0.3);
  color:var(--accent-cyan);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.solution-card h3{margin:0;font-size:1.3rem;line-height:1.3}
.solution-card ul{margin:0;padding-left:1.2rem;display:grid;gap:10px;font-size:.95rem}
.solution-card .actions{padding:0 32px 32px}

.tech-foundations{padding:80px 0;background:var(--surface-2);position:relative;overflow:hidden}
.tech-foundations::before{content:'';position:absolute;inset:0;background:url('/assets/img/services-governance.webp') center/cover no-repeat;opacity:.08;z-index:0;pointer-events:none}
.tech-foundations .container{position:relative;z-index:1}
.tech-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.tech-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:grid;gap:12px;text-align:center}
.tech-card .tech-icon{width:48px;height:48px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg, var(--teal), var(--cyan));color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.tech-card h3{font-size:1.1rem;margin:0}
.tech-card p{margin:0;font-size:.95rem}

.use-case-spotlight{padding:80px 0}
.spotlight-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;background:var(--surface);border:2px solid var(--border-strong);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-1)}
.spotlight-text{display:grid;gap:16px}
.spotlight-text h4{color:var(--cyan);margin:0;font-size:1rem}
.spotlight-text ul{margin:0;padding-left:1.2rem;display:grid;gap:8px}
.spotlight-text .result{margin-top:12px;padding:16px;background:color-mix(in srgb, var(--cyan) 10%, transparent);border:1px solid var(--border);border-radius:12px;font-weight:600;color:var(--text)}
.spotlight-image{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.spotlight-image img{display:block;width:100%;height:100%;object-fit:cover}

.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}

/* Premium Package Cards */
.package-card{
  background:rgba(17, 24, 39, 0.6);
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  display:grid;
  gap:20px;
  text-align:center;
  backdrop-filter:saturate(1.05) blur(12px);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  will-change:transform;
}
.package-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top, rgba(0, 242, 234, 0.1), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
}
.package-card:hover{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.85);
  box-shadow:0 0 32px rgba(0, 242, 234, 0.4), 0 16px 48px rgba(0, 0, 0, 0.5);
  transform:translateY(-8px) scale(1.02);
}
.package-card:hover::before{
  opacity:1;
}
.package-card h3{margin:0;font-size:1.5rem;position:relative;z-index:1}
.package-card .package-meta{font-size:.95rem;color:var(--text-muted);font-weight:600;position:relative;z-index:1}
.package-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;text-align:left;position:relative;z-index:1}
.package-card ul li{
  display:flex;
  align-items:center;
  gap:12px;
}
.package-card ul li::before{
  content:'✓';
  color:var(--accent-cyan);
  font-weight:800;
  font-size:1.2rem;
  flex-shrink:0;
}

/* Mobile Performance Optimizations */
@media (max-width:768px){
  /* Disable parallax on mobile */
  .hero-bg{
    transform:none !important;
  }

  /* Simpler card animations on mobile */
  .card:hover,
  .solution-card:hover,
  .package-card:hover{
    transform:translateY(-4px);
  }
}

.why-choose{padding:80px 0}
.why-choose-split{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;margin-top:40px}
.why-choose-image{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-1)}
.why-choose-image img{display:block;width:100%;height:100%;object-fit:cover}
.why-choose-text{display:grid;gap:20px}
.why-choose-text h3{margin:0}
.why-choose-text ul{margin:0;padding-left:1.2rem;display:grid;gap:14px}
.why-choose-text .closing{margin-top:12px;padding:16px;background:color-mix(in srgb, var(--surface-2) 90%, transparent);border:1px solid var(--border);border-radius:12px;font-style:italic;color:var(--text-secondary)}

@media (max-width:980px){
  .why-ai-fails .two-col{grid-template-columns:1fr}
  .process-timeline{grid-template-columns:repeat(2,1fr)}
  .process-timeline::before{display:none}
  .solutions-grid{grid-template-columns:repeat(2,1fr)}
  .tech-row{grid-template-columns:repeat(2,1fr)}
  .spotlight-feature{grid-template-columns:1fr}
  .packages-grid{grid-template-columns:1fr}
  .why-choose-split{grid-template-columns:1fr}
}


/* Extra small devices (phones in portrait, < 480px) */
@media (max-width:480px){
  body{font-size:14px}
  .container{padding:0 12px}
  .section{padding:40px 0}
  
  h1{font-size:1.75rem !important}
  h2{font-size:1.4rem}
  h3{font-size:1.1rem}
  
  .hero{padding:60px 0 35px !important}
  .hero h1{font-size:1.75rem !important}
  .hero .lead{font-size:.95rem; line-height:1.5}
  .hero-content{gap:12px}
  .hero-actions{gap:8px}
  .hero-actions .btn, .hero-actions .btn-primary{padding:14px 28px; font-size:1rem}
  
  .eyebrow{font-size:.7rem; letter-spacing:.15em}
  
  .why-ai-fails{padding:40px 0}
  .why-ai-fails .problem-card, .why-ai-fails .solution-card{padding:16px}
  .why-ai-fails h3{font-size:1rem}
  .why-ai-fails ul{font-size:.9rem}
  
  .process-step{padding:16px 12px}
  .process-step .step-number{width:44px; height:44px; font-size:1.3rem}
  
  .solution-card img{height:140px}
  .solution-card .card-content{padding:16px}
  .solution-card .actions{padding:0 16px 16px}
  
  .tech-card{padding:16px}
  .tech-card .tech-icon{width:38px; height:38px; font-size:1.1rem}
  
  .spotlight-feature{padding:20px}
  .spotlight-text ul{font-size:.85rem}
  
  .package-card{padding:20px}
  .package-card h3{font-size:1.2rem}
  
  .why-choose-text ul{font-size:.9rem}
  
  .cta-slab{padding:20px !important}
  .cta-slab h2{font-size:1.3rem}
  
  /* Footer adjustments */
  .footer{padding:30px 0}
  .footer .social-icons img{width:26px; height:26px}
  
  /* Modal adjustments */
  #contact-modal .card, #newsletter-modal .card, #thankyou .card{width:95vw; margin:10px; max-width:95vw}
  #contact-modal .card-body, #newsletter-modal .card-body, #thankyou .card-body{padding:20px}
  #contact-modal h3, #newsletter-modal h3, #thankyou h3{font-size:1.35rem}
  #contact-modal .grid.cols-2{grid-template-columns:1fr; gap:12px}
  
  /* Form adjustments */
  form.themed input, form.themed select, form.themed textarea{padding:11px; font-size:.9rem; border-radius:10px}
  form.themed label{font-size:.9rem; margin-bottom:8px; display:block}
  
  /* Better touch targets */
  .btn, button.btn, a.btn, .btn-primary{min-height:50px; font-size:1rem; padding:14px 28px}
  .nav a, .nav button{min-height:46px}
  
  /* Improved card spacing */
  .solution-card, .package-card, .case-card, .article-card{margin-bottom:12px}
}

/* Smooth scrolling and better touch interactions */
@media (max-width:768px){
  html{
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch;
    /* iOS Safari scroll optimization */
    scroll-padding-top: 80px;
  }
  body{
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    overflow-x:hidden;
    /* Enable smooth momentum scrolling */
    overscroll-behavior-y: auto;
    /* Optimize paint performance */
    will-change: auto;
  }

  /* Ensure all scrollable containers have smooth scrolling */
  *, *::before, *::after {
    scroll-behavior: smooth !important;
  }
  
  /* Better touch targets - iOS optimized */
  .btn, button.btn, a.btn, .btn-primary{
    min-height:50px; 
    touch-action:manipulation; 
    font-size:1rem; 
    padding:14px 28px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  .nav a{
    min-height:46px; 
    display:flex; 
    align-items:center;
    -webkit-tap-highlight-color: transparent;
  }
  .nav .btn-primary{
    min-height:50px; 
    font-size:1rem;
  }
  
  /* Prevent horizontal scroll */
  body, html{overflow-x:hidden; max-width:100vw}
  .container{max-width:100%; overflow-x:hidden; padding:0 16px}
  .section{padding:60px 0}

  /* Ensure video doesn't overflow */
  .hero-bg video{width:100%; height:100%; object-fit:cover; object-position:center}
  
  /* Better spacing for stacked content */
  .spotlight-feature{display:flex; flex-direction:column; gap:20px}
  .spotlight-text{order:1}
  .spotlight-image{order:2; width:100%}
  
  .why-choose-split{display:flex; flex-direction:column; gap:24px}
  .why-choose-image{order:2}
  .why-choose-text{order:1}
  
  /* Hero improvements */
  .hero{padding:80px 0 50px !important}
  .hero h1{font-size:1.85rem !important; line-height:1.25}
  .hero .lead{font-size:.98rem}
  .hero-content{gap:16px}
  
  /* Typography mobile */
  h2{font-size:1.6rem; line-height:1.3}
  h3{font-size:1.25rem; line-height:1.3}
  
  /* Grid improvements */
  .grid{gap:18px}
  
  /* Navigation improvements */
  .site-header{box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .nav-toggle{font-size:.9rem; padding:10px 14px}
  
  /* Modal positioning */
  #contact-modal, #newsletter-modal, #thankyou{align-items:flex-start; padding-top:60px}
}

/* Better card interactions on touch devices */
@media (hover: none) and (pointer: coarse) {
  .card:hover{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .card:active{
    border-color:var(--cyan);
    background:var(--surface-2);
    box-shadow:var(--glow);
    -webkit-transform:scale(0.98) translateZ(0);
    transform:scale(0.98) translateZ(0);
  }
}

/* Services page specific styles */
.service-section{padding:80px 0; border-bottom:1px solid var(--border)}
.service-section:last-of-type{border-bottom:none}
.service-content{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.service-content.reverse{grid-template-columns:1.1fr 1fr}
.service-image{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-1)}
.service-image img{display:block;width:100%;height:100%;object-fit:cover}
.service-text{display:grid;gap:18px}
.service-text .eyebrow{color:var(--text-muted);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}
.service-text h2{margin:0;font-size:2rem}
.service-text p.description{font-size:1.05rem;color:var(--text-paragraph);line-height:1.7}
.service-text ul{margin:0;padding-left:1.2rem;display:grid;gap:10px;color:var(--text-paragraph)}
.service-text ul li{position:relative;padding-left:8px}
.service-text ul li::marker{color:var(--cyan)}
.service-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.nav-jumps{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px;padding:20px;background:color-mix(in srgb, var(--surface) 60%, transparent);border-radius:var(--radius);border:1px solid var(--border)}
.nav-jumps a{padding:8px 16px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:.9rem;font-weight:600;transition:all .2s ease}
.nav-jumps a:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 10%, transparent);color:var(--text)}

@media (max-width:980px){
  .service-section{padding:60px 0}
  .service-content, .service-content.reverse{grid-template-columns:1fr}
  .service-text h2{font-size:1.6rem}
  .nav-jumps{padding:16px}
}


/* =====================================================
   PREMIUM INSIGHTS/ARTICLE CARDS
   ===================================================== */

.insights-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  margin-top:48px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.article-card{
  background:rgba(17, 24, 39, 0.6);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  display:grid;
  gap:16px;
  backdrop-filter:saturate(1.05) blur(12px);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  will-change:transform;
}

.article-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent-cyan), var(--accent-teal));
  transform:scaleX(0);
  transition:transform .3s ease;
}

.article-card:hover{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.85);
  box-shadow:0 0 28px rgba(0, 242, 234, 0.3), 0 12px 40px rgba(0, 0, 0, 0.4);
  transform:translateY(-6px);
}

.article-card:hover::before{
  transform:scaleX(1);
}

.article-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--cyan));
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  margin-bottom:12px;
  box-shadow:0 4px 12px rgba(0, 242, 234, 0.3);
  transition:transform .3s ease, box-shadow .3s ease;
}

.article-card:hover .article-icon{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 6px 20px rgba(0, 242, 234, 0.5);
}

.article-card h3{
  margin:0;
  font-size:1.3rem;
  line-height:1.3;
}

.article-card h3 a{
  color:var(--text);
  transition:color .3s ease;
}

.article-card h3 a:hover{
  color:var(--accent-cyan);
}

.article-source{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-muted);
  font-weight:600;
  margin-top:-8px;
}

.article-summary{
  color:var(--text-paragraph);
  font-size:.95rem;
  line-height:1.7;
}

@media (max-width:900px){
  .insights-grid{grid-template-columns:1fr;gap:24px;margin-top:32px}
}


/* =====================================================
   PREMIUM CASE STUDY CARDS
   ===================================================== */

.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}

.case-card{
  background:rgba(17, 24, 39, 0.6);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  display:grid;
  gap:16px;
  position:relative;
  overflow:hidden;
  backdrop-filter:saturate(1.05) blur(12px);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform;
}

.case-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0, 242, 234, 0.08), rgba(20, 184, 166, 0.05));
  opacity:0;
  transition:opacity .3s ease;
  z-index:0;
}

.case-card:hover{
  border-color:var(--accent-cyan);
  background:rgba(17, 24, 39, 0.85);
  box-shadow:0 0 28px rgba(0, 242, 234, 0.3), 0 12px 40px rgba(0, 0, 0, 0.4);
  transform:translateY(-6px) scale(1.01);
}

.case-card:hover::before{
  opacity:1;
}

.case-card > *{
  position:relative;
  z-index:1;
}

.case-card h3{
  margin:0;
  font-size:1.3rem;
  color:var(--text);
  line-height:1.3;
  transition:color .3s ease;
}

.case-card:hover h3{
  color:var(--accent-cyan);
}

.case-card .case-summary{
  color:var(--text-paragraph);
  font-size:.95rem;
  line-height:1.7;
}

@media (max-width:980px){
  .cases-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}


/* ============================================
   Clepto.io Unified Text Color Theme
   Professional Cyan/Teal/White Palette
   ============================================ */

/* Global text - Clean white for readability */
html, body, p, li, span, div {
  color: var(--text);
}

/* Subtle muted text */
small, .muted, .legal, .meta {
  color: var(--text-muted);
}

/* Headings - Pure white for hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

/* Links - Professional cyan with blue hover */
a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color .25s ease;
}

a:hover, a:focus {
  color: var(--accent-blue);
}

/* Navigation links - elegant accent colors */
.nav a {
  color: var(--text-secondary);
}

.nav a:hover, .nav a:focus {
  color: var(--accent-cyan);
}

.nav a.active {
  color: var(--accent-cyan);
}

/* Eyebrows/Labels - Subtle teal accent */
.eyebrow, .label, .chip, .badge {
  color: var(--accent-teal);
}

/* Form elements */
input, select, textarea, label {
  color: var(--text);
}

::placeholder {
  color: var(--text-muted);
  opacity: .85;
}

/* Button text - keep existing backgrounds */
.btn {
  color: var(--text);
}

.btn:hover {
  color: var(--text);
}

/* Footer links */
.footer a {
  color: var(--text-secondary);
}

.footer a:hover {
  color: var(--accent-cyan);
}

/* Card text refinement */
.card p, .card li {
  color: var(--text-paragraph);
}

/* Hero gradient text - enhance with palette */
.hero-gradient {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--accent-cyan) 45%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Timeline and impact text */
.timeline-date, .impact-tile h3 {
  color: var(--accent-cyan);
}

/* Value card letters - cyan accent */
.value-initial {
  color: var(--accent-cyan);
}

/* CLEPTO card titles - elegant accent on hover */
.clepto-card h4 {
  color: var(--text);
}

.clepto-card:hover h4 {
  color: var(--accent-cyan);
}

/* Tag colors - refined accent */
.tag, .solution-card .tag, .card.service .meta .tag {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-teal) 18%, transparent);
  border-color: var(--border);
}

/* Ensure readability on all backgrounds */
.why-ai-fails .footnote,
.spotlight-text .result,
.why-choose-text .closing {
  color: var(--text-paragraph);
}


/* =====================================================
   MOBILE STYLES - CONSOLIDATED (640px and below)
   ===================================================== */

@media (max-width:640px) {
  /* Layout & Container */
  body {
    font-size: 15px;
    line-height: 1.65;
  }
  
  .container {
    padding: 0 18px;
    max-width: 100%;
  }
  
  .section {
    padding: 50px 0;
  }

  /* Typography */
  h1 {
    font-size: 1.85rem !important;
    line-height: 1.25;
  }
  
  h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 1.2rem;
  }
  
  p.lead {
    font-size: 1rem;
  }
  
  .eyebrow {
    font-size: .75rem;
  }

  /* Hero Section */
  .hero {
    padding: 70px 0 40px !important;
  }
  
  .hero h1 {
    font-size: 1.85rem !important;
    line-height: 1.25;
    margin-bottom: 12px;
  }
  
  .hero .lead {
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  
  .hero-content {
    gap: 14px;
    padding: 0 4px;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  
  .hero-actions .btn {
    width: 100%;
    padding: 14px 22px;
    font-size: .95rem;
  }

  /* Grid Layouts */
  .grid {
    gap: 18px;
  }
  
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }
  
  .kpis {
    grid-template-columns: 1fr 1fr;
  }

  /* Buttons */
  .btn,
  button.btn,
  a.btn,
  .btn-primary {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 14px 28px;
    min-height: 50px;
  }

  /* Navigation */
  .nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  /* Why AI Fails Section */
  .why-ai-fails {
    padding: 50px 0;
  }
  
  .why-ai-fails .problem-card,
  .why-ai-fails .solution-card {
    padding: 20px;
    gap: 12px;
  }
  
  .why-ai-fails .two-col {
    gap: 20px;
    margin-top: 24px;
  }
  
  .why-ai-fails h3 {
    font-size: 1.1rem;
  }

  /* Process Section */
  .process-section {
    padding: 50px 0;
  }
  
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  
  .process-step {
    padding: 20px 16px;
    gap: 10px;
  }
  
  .process-step .step-number {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
  
  .process-step h3 {
    font-size: 1rem;
  }
  
  .process-step p {
    font-size: .9rem;
  }

  /* Solutions Grid */
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  
  .solution-card img {
    height: 160px;
  }
  
  .solution-card .card-content {
    padding: 18px;
    gap: 10px;
  }
  
  .solution-card h3 {
    font-size: 1.1rem;
  }
  
  .solution-card ul {
    font-size: .9rem;
    gap: 6px;
  }
  
  .solution-card .actions {
    padding: 0 18px 18px;
  }
  
  .solution-card .meta {
    flex-wrap: wrap;
  }

  /* Tech Foundations */
  .tech-foundations {
    padding: 50px 0;
  }
  
  .tech-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  
  .tech-card {
    padding: 20px;
    gap: 10px;
  }
  
  .tech-card .tech-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }
  
  .tech-card h3 {
    font-size: 1rem;
  }
  
  .tech-card p {
    font-size: .9rem;
  }

  /* Use Case Spotlight */
  .use-case-spotlight {
    padding: 50px 0;
  }
  
  .spotlight-feature {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
  }
  
  .spotlight-text {
    gap: 12px;
  }
  
  .spotlight-text h4 {
    font-size: .95rem;
  }
  
  .spotlight-text ul {
    font-size: .9rem;
    gap: 6px;
    padding-left: 1rem;
  }
  
  .spotlight-text .result {
    padding: 12px;
    font-size: .95rem;
  }
  
  .spotlight-image {
    margin-top: 12px;
  }

  /* Packages Grid */
  .packages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  
  .package-card {
    padding: 24px;
    gap: 12px;
  }
  
  .package-card h3 {
    font-size: 1.3rem;
  }
  
  .package-card .package-meta {
    font-size: .85rem;
  }
  
  .package-card ul {
    gap: 8px;
  }

  /* Why Choose Section */
  .why-choose {
    padding: 50px 0;
  }
  
  .why-choose-split {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }
  
  .why-choose-text {
    gap: 14px;
  }
  
  .why-choose-text ul {
    gap: 10px;
    font-size: .95rem;
  }
  
  .why-choose-text .closing {
    padding: 12px;
    font-size: .9rem;
  }

  /* CTA Sections */
  .cta-slab {
    padding: 24px !important;
    gap: 12px;
  }
  
  .cta-actions {
    margin-top: 16px;
    gap: 10px;
    flex-direction: column;
    width: 100%;
  }
  
  .cta-actions .btn,
  .cta-actions .btn-primary {
    width: 100%;
    font-size: 1rem;
    padding: 14px 28px;
  }

  /* Cards */
  .card {
    border-radius: 16px;
    margin-bottom: 16px;
  }
  
  .card .card-body {
    padding: 18px;
  }

  /* Footer */
  .footer {
    padding: 35px 0;
  }
  
  .footer .cols {
    row-gap: 24px;
  }
  
  .footer .social-icons {
    margin-top: 14px;
    gap: 14px;
  }
  
  .footer .social-icons img {
    width: 26px;
    height: 26px;
  }

  /* Forms & Modals */
  #contact-modal .card,
  #newsletter-modal .card,
  #thankyou .card {
    width: 95vw;
    margin: 10px;
    max-width: 95vw;
  }
  
  #contact-modal .card-body,
  #newsletter-modal .card-body,
  #thankyou .card-body {
    padding: 20px;
  }
  
  #contact-modal h3,
  #newsletter-modal h3,
  #thankyou h3 {
    font-size: 1.35rem;
  }
  
  #contact-modal .grid.cols-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  form.themed input,
  form.themed select,
  form.themed textarea {
    padding: 11px;
    font-size: .9rem;
    border-radius: 10px;
  }
  
  form.themed label {
    font-size: .9rem;
    margin-bottom: 8px;
    display: block;
  }

  /* Services Page */
  .service-section {
    padding: 40px 0;
  }
  
  .service-content {
    gap: 24px;
  }
  
  .service-text h2 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  
  .service-text .eyebrow {
    font-size: .75rem;
    margin-bottom: 6px;
  }
  
  .service-text p.description {
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 12px;
  }
  
  .service-text ul {
    font-size: .92rem;
    gap: 8px;
    padding-left: 1rem;
  }
  
  .service-text ul li {
    line-height: 1.6;
  }
  
  .service-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }
  
  .service-actions .btn,
  .service-actions .btn-primary {
    width: 100%;
    font-size: 1rem;
    padding: 14px 28px;
  }
  
  .service-image {
    margin-bottom: 16px;
    border-radius: 14px;
  }
  
  .nav-jumps {
    gap: 8px;
    padding: 12px;
    flex-wrap: wrap;
  }
  
  .nav-jumps a {
    font-size: .82rem;
    padding: 6px 10px;
  }

  /* Insights Page */
  .insights-grid {
    gap: 20px;
  }
  
  .article-card {
    padding: 24px;
    gap: 12px;
  }
  
  .article-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .article-card h3 {
    font-size: 1.15rem;
  }
  
  .article-summary {
    font-size: .9rem;
  }

  /* Case Studies Page */
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .case-card {
    padding: 24px;
    gap: 12px;
  }
  
  .case-card h3 {
    font-size: 1.15rem;
  }
  
  .case-card .case-summary {
    font-size: .9rem;
  }

  /* About Page */
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .impact-tile {
    padding: 20px;
    gap: 10px;
  }

  .leadership-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .clepto-cards {
    gap: 1.25rem;
    margin-top: 2rem;
  }
  
  .clepto-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1rem;
    min-height: auto;
  }
  
  .clepto-card:hover {
    transform: translateX(4px);
  }
  
  .clepto-card h4 {
    font-size: 1.15rem;
  }
  
  .clepto-card p {
    font-size: .95rem;
  }
  
  .journey .timeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .timeline-item {
    padding: 18px;
    gap: 8px;
  }
  
  .team-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .team-card {
    padding: 20px;
    gap: 10px;
  }
  
  .spotlight-card {
    padding: 24px;
    gap: 20px;
  }
  
  .vision-card {
    padding: 28px;
    gap: 14px;
  }
  
  .story h2,
  .journey h2,
  .vision-card h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  
  .story p,
  .journey p,
  .vision-card p {
    font-size: .95rem;
    line-height: 1.65;
  }
  
  .story-visual {
    min-height: 200px;
    margin-bottom: 20px;
  }

  /* FAQ Page */
  .faq-section {
    padding: 60px 0;
  }
  
  .faq-accordion {
    gap: 20px;
    padding: 0 4px;
  }
  
  .faq-group {
    gap: 14px;
  }
  
  .faq-item {
    border-radius: 14px;
  }
  
  .faq-toggle {
    padding: 16px 18px;
    font-size: .95rem;
    gap: 12px;
  }
  
  .faq-icon {
    font-size: 1.3rem;
  }
  
  .faq-panel {
    padding: 0 18px;
  }
  
  .faq-panel p {
    font-size: .92rem;
    line-height: 1.65;
    margin: 8px 0 12px;
  }
  
  .faq-panel ul {
    margin: 12px 0 18px 14px;
    font-size: .9rem;
    gap: 8px;
  }
  
  .faq-panel ul li {
    line-height: 1.6;
  }
  
  .faq-item.open .faq-panel {
    padding-bottom: 18px;
  }
  
  .faq-cta .cta-slab {
    padding: 24px 18px !important;
  }

}



/* ========================================
   Trust Center Specific Styles
   ======================================== */

.hero-small {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d5a7b 100%);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
}

.hero-small h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
}

.trust-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trust-intro h2 {
    margin-bottom: 1.5rem;
}

.section {
    padding: 3rem 1rem;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--text);
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--text-muted);
}

.bg-light {
    background: var(--surface-2);
}

/* Trust Metrics */
.trust-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.metric-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-1);
}

.metric-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.metric-card h3 {
    margin-bottom: 0.5rem;
    color: var(--accent-cyan);
}

.metric-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Compliance Documentation */
.compliance-section {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}

.compliance-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.compliance-header h3 {
    margin: 0;
    color: var(--text);
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-complete {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-available {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-roadmap {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.doc-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.doc-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface-2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.doc-link:hover {
    border-color: var(--accent-cyan);
    background: var(--surface);
}

.doc-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.doc-details strong {
    display: block;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.doc-details small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Sub-Processor Highlight */
.sub-processor-highlight {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.sub-processor-highlight h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--accent-teal);
}

.sub-processor-highlight ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-processor-highlight li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-paragraph);
}

.sub-processor-highlight li:last-child {
    border-bottom: none;
}

/* DPA Features */
.dpa-features {
    margin-top: 1.5rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: 6px;
}

.feature-icon {
    color: #10b981;
    font-weight: bold;
    font-size: 1.25rem;
}

/* Certification Timeline */
.certification-timeline {
    margin-top: 2rem;
}

.timeline-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 30px;
    width: 2px;
    height: calc(100% + 2rem);
    background: var(--border);
}

.timeline-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-marker.current {
    background: #10b981;
}

.timeline-marker.upcoming {
    background: #f59e0b;
}

.timeline-marker.future {
    background: #6b7280;
}

.timeline-content strong {
    display: block;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--text-paragraph);
}

/* Security Categories */
.security-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.security-category {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.security-category h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.security-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.security-category li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-paragraph);
}

.security-category li:last-child {
    border-bottom: none;
}

.security-category strong {
    color: var(--text);
}

/* Data Rights */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.right-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.right-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.right-card h3 {
    margin-bottom: 0.75rem;
    color: var(--accent-cyan);
}

.right-card p {
    color: var(--text-paragraph);
}

.rights-cta {
    background: var(--surface);
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
    border: 1px solid var(--border);
}

.rights-cta h3 {
    margin-top: 0;
    color: var(--text);
}

.rights-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Transfer Flow */
.transfer-flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.transfer-item {
    flex: 1;
    min-width: 200px;
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.transfer-item h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--text);
}

.transfer-item p {
    color: var(--text-paragraph);
}

.transfer-arrow {
    font-size: 2rem;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
}

.badge-green {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Transfer Safeguards */
.transfer-safeguards {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-top: 2rem;
}

.transfer-safeguards h3 {
    color: var(--text);
}

.safeguard-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.safeguard-item {
    display: flex;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 8px;
}

.safeguard-icon {
    color: #10b981;
    font-weight: bold;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.safeguard-item strong {
    display: block;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.safeguard-item p {
    color: var(--text-paragraph);
}

/* Incident Timeline */
.incident-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.incident-step {
    text-align: center;
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--accent-cyan);
    color: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.step-content h3 {
    margin-bottom: 0.5rem;
    color: var(--text);
}

.step-content p {
    color: var(--text-paragraph);
}

.incident-contact {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
    border: 1px solid var(--border);
}

.incident-contact p {
    color: var(--text);
}

/* Trust Contact */
.trust-contact {
    max-width: 900px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmin(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.contact-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text);
}

.contact-card p {
    color: var(--text-paragraph);
}

.contact-card a {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 600;
}

.contact-card a:hover {
    text-decoration: underline;
}

.company-details {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.company-details h4 {
    margin-top: 0;
    color: var(--accent-teal);
}

.company-details p {
    color: var(--text-paragraph);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-small h1 {
        font-size: 2rem;
    }

    .trust-metrics {
        grid-template-columns: 1fr;
    }

    .transfer-flow {
        flex-direction: column;
    }

    .transfer-arrow {
        transform: rotate(90deg);
    }

    .security-categories {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .section {
        padding: 2rem 1rem;
    }
}


/* =====================================================
   COMPREHENSIVE MOBILE LAYOUT FIX
   Professional, elegant, and tech-savvy mobile experience
   ===================================================== */

/* ===== MOBILE BREAKPOINT: 768px and below ===== */
@media (max-width: 768px) {

  /* --- Global Mobile Adjustments --- */
  body {
    font-size: 15px;
    line-height: 1.7;
  }

  .container {
    padding: 0 20px;
    max-width: 100%;
  }

  /* --- Header & Navigation Mobile --- */
  .site-header {
    height: 70px;
  }

  .site-header .bar {
    height: 70px;
    min-height: 70px;
    padding: 0 16px;
    gap: 16px;
  }

  .brand img {
    height: 50px;
    max-height: 50px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
  }

  .nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 23, 47, 0.98);
    backdrop-filter: blur(20px);
    padding: 24px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    z-index: 999;
  }

  .nav a {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  .nav a:hover,
  .nav a:active {
    background: rgba(0, 242, 234, 0.08);
    border-color: var(--border);
  }

  .nav .btn,
  .nav .btn-primary {
    width: 100%;
    margin-top: 16px;
    padding: 16px 28px;
    font-size: 1rem;
  }

  /* --- Hero Section Mobile --- */
  .hero {
    padding: 90px 0 50px !important;
    min-height: auto;
  }

  .hero .container {
    text-align: center;
  }

  .hero-content {
    gap: 16px;
    max-width: 100%;
    padding: 0 8px;
  }

  .hero h1,
  .hero-gradient {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 100%;
    margin: 0 auto 16px;
    opacity: 0.95;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 20px;
  }

  .hero-actions .btn,
  .hero-actions .btn-primary {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    justify-content: center;
  }

  /* Navigation jumps on services page */
  .nav-jumps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
    margin-top: 20px;
    border-radius: 16px;
  }

  .nav-jumps a {
    padding: 10px 8px;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 8px;
  }

  /* --- Service Sections (Services Page) Mobile --- */
  .service-section {
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
  }

  .service-content,
  .service-content.reverse {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Image always comes first on mobile */
  .service-image {
    order: 1;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
  }

  .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Text comes after image */
  .service-text {
    order: 2;
    gap: 14px;
  }

  .service-text .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
  }

  .service-text h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
  }

  .service-text p.description {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 8px 0;
  }

  .service-text ul {
    font-size: 0.92rem;
    line-height: 1.6;
    gap: 10px;
    padding-left: 1.1rem;
    margin: 8px 0;
  }

  .service-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .service-actions .btn,
  .service-actions .btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    justify-content: center;
  }

  /* --- Solutions Grid (Homepage) Mobile --- */
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .solution-card {
    border-radius: 16px;
  }

  .solution-card img {
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  .solution-card .card-content {
    padding: 20px;
    gap: 12px;
  }

  .solution-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
  }

  .solution-card ul {
    font-size: 0.9rem;
    gap: 8px;
  }

  .solution-card .actions {
    padding: 0 20px 20px;
  }

  .solution-card .actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Story Section (About Page) Mobile --- */
  .story {
    padding: 60px 0;
  }

  .story .grid.cols-2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .story .grid.cols-2 > .reveal.fx-left {
    order: 2;
    text-align: center;
  }

  .story .grid.cols-2 > .story-visual {
    order: 1;
  }

  .story h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .story p {
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left;
  }

  .story-visual {
    min-height: 200px;
    border-radius: 16px;
    aspect-ratio: 16/10;
  }

  .story-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- CLEPTO Values Cards (About Page) Mobile --- */
  .clepto-cards {
    gap: 16px;
    margin-top: 32px;
  }

  .clepto-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 10px;
    min-height: auto;
    border-radius: 14px;
  }

  .clepto-card h4 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0;
  }

  .clepto-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
  }

  .clepto-card:hover {
    transform: translateX(4px);
  }

  /* --- Timeline (About Page) Mobile --- */
  .journey .timeline {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 32px 0;
  }

  .timeline-item {
    padding: 20px;
    gap: 8px;
    text-align: center;
    border-radius: 14px;
  }

  .timeline-date {
    font-size: 1.05rem;
  }

  .timeline-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
  }

  .journey-detail {
    gap: 24px;
    margin-top: 32px;
  }

  .journey-detail > div {
    text-align: center;
  }

  .journey-detail h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .journey-detail p {
    font-size: 0.92rem;
  }

  /* --- Impact Grid (About Page) Mobile --- */
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 32px;
  }

  .impact-tile {
    padding: 18px 14px;
    gap: 8px;
    border-radius: 14px;
  }

  .impact-tile h3 {
    font-size: 1.1rem;
  }

  .impact-tile p {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  /* --- Spotlight Card (About Page) Mobile --- */
  .spotlight-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-radius: 16px;
  }

  .spotlight-media {
    order: 1;
    min-height: 180px;
    border-radius: 12px;
    aspect-ratio: 16/10;
  }

  .spotlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .spotlight-body {
    order: 2;
  }

  .spotlight-body h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }

  .spotlight-body p {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  /* --- Team Section (About Page) Mobile --- */
  .team-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 32px 0;
  }

  .team-card {
    padding: 24px;
    gap: 12px;
    border-radius: 14px;
    text-align: center;
  }

  .team-card h3 {
    font-size: 1.15rem;
  }

  .team-card p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* --- Vision Card (About Page) Mobile --- */
  .vision-card {
    padding: 28px;
    gap: 16px;
    border-radius: 16px;
  }

  .vision-card h2 {
    font-size: 1.4rem;
  }

  .vision-card p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .vision-card ul {
    gap: 12px;
    padding-left: 1.1rem;
  }

  .vision-card ul li {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  /* --- Process Timeline (Homepage) Mobile --- */
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .process-timeline::before {
    display: none;
  }

  .process-step {
    padding: 24px 20px;
    gap: 12px;
    text-align: center;
    border-radius: 14px;
  }

  .process-step .step-number {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .process-step h3 {
    font-size: 1.1rem;
    margin: 0;
  }

  .process-step p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
  }

  /* --- Tech Foundations (Homepage) Mobile --- */
  .tech-foundations {
    padding: 50px 0;
  }

  .tech-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .tech-card {
    padding: 24px 20px;
    gap: 12px;
    text-align: center;
    border-radius: 14px;
  }

  .tech-card .tech-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    margin: 0 auto 8px;
  }

  .tech-card h3 {
    font-size: 1.1rem;
    margin: 0;
  }

  .tech-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
  }

  /* --- Spotlight Feature (Homepage) Mobile --- */
  .use-case-spotlight {
    padding: 50px 0;
  }

  .spotlight-feature {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    border-radius: 16px;
  }

  .spotlight-text {
    order: 1;
    gap: 14px;
  }

  .spotlight-text h4 {
    font-size: 0.95rem;
    margin: 0;
  }

  .spotlight-text ul {
    font-size: 0.9rem;
    gap: 8px;
    padding-left: 1rem;
  }

  .spotlight-text .result {
    padding: 14px;
    font-size: 0.92rem;
    border-radius: 10px;
    margin-top: 8px;
  }

  .spotlight-text .btn {
    width: 100%;
    margin-top: 16px;
  }

  .spotlight-image {
    order: 2;
    border-radius: 12px;
    aspect-ratio: 16/10;
    overflow: hidden;
  }

  .spotlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Why AI Fails Section (Homepage) Mobile --- */
  .why-ai-fails {
    padding: 50px 0;
  }

  .why-ai-fails h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: center;
  }

  .why-ai-fails .two-col {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
  }

  .why-ai-fails .problem-card,
  .why-ai-fails .solution-card {
    padding: 24px;
    gap: 14px;
    border-radius: 14px;
  }

  .why-ai-fails h3 {
    font-size: 1.15rem;
    margin: 0 0 8px 0;
  }

  .why-ai-fails p {
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
  }

  .why-ai-fails ul {
    font-size: 0.9rem;
    gap: 10px;
    margin: 0;
    padding-left: 1rem;
  }

  /* --- Why Choose Section (Homepage) Mobile --- */
  .why-choose {
    padding: 50px 0;
  }

  .why-choose h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: center;
  }

  .why-choose-split {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 28px;
  }

  .why-choose-image {
    order: 1;
    border-radius: 14px;
    aspect-ratio: 16/10;
    overflow: hidden;
  }

  .why-choose-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .why-choose-text {
    order: 2;
    gap: 16px;
  }

  .why-choose-text ul {
    gap: 12px;
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .why-choose-text .closing {
    padding: 16px;
    font-size: 0.9rem;
    border-radius: 12px;
    margin-top: 8px;
  }

  /* --- Packages Grid (Homepage) Mobile --- */
  .packages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  .package-card {
    padding: 28px;
    gap: 16px;
    border-radius: 16px;
    text-align: center;
  }

  .package-card h3 {
    font-size: 1.35rem;
    margin: 0;
  }

  .package-card .package-meta {
    font-size: 0.9rem;
  }

  .package-card ul {
    gap: 10px;
    text-align: left;
  }

  .package-card ul li {
    font-size: 0.92rem;
  }

  .package-card .btn,
  .package-card .btn-primary {
    width: 100%;
    margin-top: 12px;
  }

  /* --- CTA Sections Mobile --- */
  .cta-final {
    padding: 50px 0;
  }

  .cta-slab {
    padding: 28px 24px !important;
    gap: 14px;
    border-radius: 16px;
    text-align: center;
  }

  .cta-slab .eyebrow {
    font-size: 0.75rem;
  }

  .cta-slab h2 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0;
  }

  .cta-slab .lead {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 8px 0;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 20px;
  }

  .cta-actions .btn,
  .cta-actions .btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    justify-content: center;
  }

  /* --- Case Studies & Insights Grid Mobile --- */
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  .case-card {
    padding: 24px;
    gap: 14px;
    border-radius: 14px;
  }

  .case-card h3 {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .case-card .case-summary {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .insights-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  .article-card {
    padding: 24px;
    gap: 14px;
    border-radius: 14px;
  }

  .article-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }

  .article-card h3 {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .article-summary {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* --- Footer Mobile --- */
  .footer {
    padding: 40px 0;
  }

  .footer .cols {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }

  .footer .footer-left {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-logo img {
    height: 50px;
  }

  .footer .footer-right {
    text-align: center;
  }

  .footer .footer-right a {
    display: inline;
  }

  .footer .social-icons {
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }

  .footer .social-icons img {
    width: 28px;
    height: 28px;
  }

  /* --- Modal & Forms Mobile --- */
  #contact-modal,
  #newsletter-modal,
  #thankyou {
    padding: 20px;
    align-items: flex-start;
    padding-top: 80px;
  }

  #contact-modal .card,
  #newsletter-modal .card,
  #thankyou .card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
  }

  #contact-modal .card-body,
  #newsletter-modal .card-body,
  #thankyou .card-body {
    padding: 24px;
  }

  #contact-modal h3,
  #newsletter-modal h3,
  #thankyou h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }

  #contact-modal .grid.cols-2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  form.themed input,
  form.themed select,
  form.themed textarea {
    padding: 14px;
    font-size: 1rem;
    border-radius: 12px;
  }

  form.themed label {
    font-size: 0.92rem;
    margin-bottom: 10px;
    display: block;
    line-height: 1.4;
  }

  form.themed textarea {
    min-height: 120px;
  }

  /* --- Global Button Mobile Improvements --- */
  .btn,
  button.btn,
  a.btn,
  .btn-primary {
    min-height: 52px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* --- Eyebrow Labels Mobile --- */
  .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
  }

  /* --- Section Padding Standardization --- */
  .section {
    padding: 50px 0;
  }

  /* --- Image Aspect Ratio Fix --- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Ensure all card images maintain aspect ratio */
  .card img,
  .solution-card img,
  .service-image img,
  .spotlight-image img,
  .why-choose-image img,
  .story-visual img,
  .spotlight-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ===== EXTRA SMALL MOBILE: 480px and below ===== */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .container {
    padding: 0 16px;
  }

  .hero {
    padding: 80px 0 40px !important;
  }

  .hero h1,
  .hero-gradient {
    font-size: 1.65rem !important;
  }

  .hero .lead {
    font-size: 0.95rem;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .nav-jumps {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .nav-jumps a {
    font-size: 0.75rem;
    padding: 8px 6px;
  }

  .section {
    padding: 40px 0;
  }

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

  .site-header .bar {
    padding: 0 12px;
  }

  .brand img {
    height: 45px;
    max-height: 45px;
  }

  /* Reduce card padding on very small screens */
  .solution-card .card-content,
  .package-card,
  .case-card,
  .article-card,
  .tech-card,
  .process-step,
  .team-card,
  .clepto-card {
    padding: 18px;
  }

  .cta-slab {
    padding: 22px 18px !important;
  }

  /* Modal adjustments for very small screens */
  #contact-modal .card-body,
  #newsletter-modal .card-body,
  #thankyou .card-body {
    padding: 20px;
  }

  form.themed input,
  form.themed select,
  form.themed textarea {
    padding: 12px;
    font-size: 0.95rem;
  }
}

/* ===== ENSURE CONSISTENT IMAGE HANDLING ACROSS ALL BREAKPOINTS ===== */
.service-image,
.story-visual,
.spotlight-image,
.spotlight-media,
.why-choose-image {
  overflow: hidden;
}

.service-image img,
.story-visual img,
.spotlight-image img,
.spotlight-media img,
.why-choose-image img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}

/* Prevent image overflow issues */
@media (max-width: 768px) {
  .service-content .service-image,
  .service-content.reverse .service-image {
    width: 100%;
    max-width: 100%;
  }
}