:root{
  --bg:#0b0e13;
  --card:#121722;
  --muted:#8a94a7;
  --text:#e6e9ef;
  --brand:#34d399; /* teal-400 */
  --brand-strong:#10b981; /* teal-500 */
  --accent:#60a5fa; /* blue-400 */
  --ring: rgba(52, 211, 153, .35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b1220;color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:linear-gradient(180deg,#0b1220 50%,rgba(11,18,32,.7));backdrop-filter:saturate(140%) blur(6px);z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--text);font-size:18px}
.nav a{margin:0 10px;color:#c8d2e0}
.nav .btn{margin-left:10px}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:var(--text);font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);border-color:transparent;color:#072114}
.btn-primary:hover{background:var(--brand-strong)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.16)}
.site-main{padding-bottom:60px}
.intro{padding:36px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card h3{margin-top:0}
.card-thumb{width:100%;height:140px;object-fit:cover;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.case-thumb{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.cta{padding:20px 0}
.cta blockquote{margin:0;padding:16px 22px;border-left:4px solid var(--brand);background:rgba(255,255,255,.04);border-radius:8px}
.page-title{padding:32px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding:28px 0}
.img-col img.rounded,.rounded{border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);width:100%;height:auto}
.checklist{list-style:none;padding-left:0}
.checklist li{padding-left:28px;position:relative;margin:10px 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand)}
.cases .case{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:16px;margin:16px 0}
.bullets{margin:10px 0 0 20px}
.center{text-align:center}
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0 40px;background:#0a0f1c}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;align-items:start}
.footer-grid h4{margin:8px 0}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:6px 0}
.brand-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tiny{font-size:12px;color:#b1bccf}
.form{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:16px}
.form-field{display:flex;flex-direction:column;margin:10px 0}
.form-field input,.form-field textarea{background:#0b1220;border:1px solid rgba(255,255,255,.12);padding:12px;border-radius:12px;color:var(--text);outline:none}
.form-field input:focus,.form-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.contact-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:12px;border-radius:12px}

/* --- Ken Burns Hero Slideshow --- */
.hero-slideshow {
  position: relative;
  height: 80vh;
  min-height: 440px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.6s ease-in-out;
  will-change: transform, opacity;
}
.hero-slide.active {
  opacity: 1;
  animation: kenburns 12s ease-in-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.1) translate(0, 0); }
  to { transform: scale(1.25) translate(-20px, -20px); }
}
.hero-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(11,18,32,.55), rgba(11,18,32,.78));
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 20px;
}
.hero-content h1{font-size: 44px; line-height: 1.08; margin: 0 0 12px}
.hero-content p{color:#d9e2ef; margin:0 0 18px}

/* GDPR Banner */
.gdpr{position:fixed;left:0;right:0;bottom:0;background:#0f1626;border-top:1px solid rgba(255,255,255,.08);padding:16px 0}
.gdpr.hidden{display:none}
.gdpr-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gdpr .link{color:#9ec3ff}

@media (max-width: 900px){
  .cards{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-slideshow{height: 64vh; min-height: 360px;}
}
@media (max-width: 600px){
  .cards{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .gdpr-inner{flex-direction:column;align-items:flex-start}
}


/* --- Home Brief Sections --- */
.home-brief{padding:24px 0}
.more-link{font-weight:600; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px}
.more-link:hover{border-color:transparent; text-decoration:none}

/* Compact checklist variant */
.checklist.compact li{margin:6px 0}

/* --- CTA with Background Image --- */
.cta-hero{
  position: relative;
  margin: 28px 0 0;
  background-image: linear-gradient(rgba(11,18,32,.55), rgba(11,18,32,.8)), url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=2000&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cta-hero-inner{padding:56px 0}
.cta-hero-content{max-width:760px}
.cta-hero h2{margin:0 0 10px; font-size:32px}
.cta-hero p{margin:0 0 16px; color:#dfe7f3}

@media (max-width: 700px){
  .cta-hero-inner{padding:40px 0}
  .cta-hero h2{font-size:26px}
}


/* --- Trust Bar --- */
.trustbar{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.trustbar-inner{padding:18px 0}
.muted{color:var(--muted); font-size:14px}
.logo-row{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; margin-top:10px}
.logo{
  padding:8px 12px; border:1px dashed rgba(255,255,255,.18); border-radius:10px;
  color:#c9d3e5; font-weight:600; opacity:.85; background:rgba(255,255,255,.03);
}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.badge{
  padding:6px 10px; border-radius:999px; font-size:12px;
  color:#0a1b12; background: linear-gradient(90deg, var(--brand), #80e6c3);
  box-shadow: 0 6px 14px rgba(16,185,129,.25);
}

/* --- Outcome Stats --- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:20px 0;
}
.kpi{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; text-align:center}
.kpi .num{font-size:32px; font-weight:800; letter-spacing:.5px}
.kpi .label{color:var(--muted)}

/* --- Process --- */
.process h2{margin-bottom:10px}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px}
.step-num{font-weight:800; font-size:12px; letter-spacing:2px; color:#9ec3ff; margin-bottom:6px}

/* --- Industries --- */
.industries .chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}

/* --- Testimonials --- */
.testimonials .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.testimonial{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px}
.testimonial blockquote{margin:0 0 10px; font-style:italic; color:#dbe7ff}

/* --- FAQ --- */
.faq details{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:8px 0 0 0; color:#cfd7e6}

/* --- Responsive --- */
@media (max-width: 900px){
  .stats{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr; }
  .testimonials .testimonial-grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .logo-row{justify-content:space-between}
}


/* --- Scroll Reveal (global) --- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
  transition-delay: var(--reveal-delay, 120ms);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Reduced motion: show content immediately */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}


/* --- Mobile Hamburger Navigation --- */
.hamburger{
  display:none;
  width:44px; height:36px;
  align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.hamburger span{
  display:block; width:22px; height:2px; background:#e6e9ef;
  margin:3px 0;
  transition:transform .25s ease, opacity .2s ease, width .2s ease;
  will-change:transform,opacity,width;
}
.hamburger.is-open span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; width:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px){
  .hamburger{ display:inline-flex; }
  .site-header .nav{
    position: fixed; top:0; right:0; bottom:0;
    width: 86vw; max-width: 360px;
    background: var(--card);
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -12px 0 40px rgba(0,0,0,.45);
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 20;
    border-radius: 0;
  }
  .site-header .nav.open{ transform: translateX(0); }
  .site-header .nav a{ display:block; padding:12px 12px; border-radius:10px; margin:0; font-size:16px; }
  .site-header .nav a:hover{ background: rgba(255,255,255,.06); text-decoration:none; }
  .site-header .nav .btn{ width:100%; text-align:center; margin-left:0; }
  .nav-overlay{
    display:block;
    position: fixed; inset:0;
    background: rgba(0,0,0,.45);
    opacity:0; pointer-events:none;
    transition: opacity .25s ease;
    z-index: 19;
  }
  .site-header .nav.open + .nav-overlay{
    opacity:1; pointer-events:auto;
  }
  body.no-scroll{ overflow:hidden; }
}


/* --- Darker mobile menu background tweak --- */
@media (max-width: 900px){
  /* Darker drawer panel for better contrast */
  .site-header .nav{
    background: #0a0f1c; /* slightly darker than var(--card) */
    border-left-color: rgba(255,255,255,.12);
  }
  /* Slightly darker overlay for focus */
  .nav-overlay{
    background: rgba(0,0,0,.55);
  }
}


/* --- Glassmorphism for mobile drawer & overlay --- */
@media (max-width: 900px){
  /* Drawer panel */
  .site-header .nav{
    background: linear-gradient(180deg, rgba(13,18,30,.72), rgba(13,18,30,.58));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: -14px 0 44px rgba(0,0,0,.55);
  }
  /* Backdrop overlay */
  .nav-overlay{
    background: linear-gradient(180deg, rgba(4,6,10,.25), rgba(4,6,10,.45));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  /* Menu links: slight glass-hover */
  .site-header .nav a:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.08);
  }
}


/* --- Revert mobile drawer to classic corporate style (no glass) --- */
@media (max-width: 900px){
  .site-header .nav{
    background: var(--card) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-left: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.45) !important;
  }
  .nav-overlay{
    background: rgba(0,0,0,.50) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header .nav a:hover{
    background: rgba(255,255,255,.06) !important;
    border: none !important;
  }
}