/* ===== Tokens ===== */
:root{
  --magenta:#ff00cc;
  --magenta-600:#e600b8;
  --orange:#cc5500;

  --text:#121212;
  --muted:#666b73;
  --white:#fff;
  --bg:#f8f8fb;

  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 10px 28px rgba(0,0,0,.16);

  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --brand-grad: linear-gradient(90deg, var(--magenta), var(--orange));

  /* header height (synced by JS for precision) */
  --nav-h: 64px;
  
  /* section spacing for responsive rhythm */
  --section-padding-mobile: 72px;
  --section-padding-desktop: 60px;
}

/* ===== Base ===== */
@keyframes fadeSlide {
  from { 
    opacity: 0; 
    transform: translateY(20px);
  } 
  to {
    opacity: 1; 
    transform: translateY(0);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  /* offset for fixed header */
  padding-top: var(--nav-h);
}

/* Image optimization for performance and layout stability */
img {
  object-fit: cover;
}
a{ color:inherit; text-decoration:none; }
code{ background:#fff; padding:.08em .3em; border-radius:6px; border:1px solid rgba(0,0,0,.06); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.container{ width:min(1100px, 92vw); margin-inline:auto; }

/* ===== Header (single, consolidated) ===== */
.site-header{
  position: fixed;          /* robust across browsers */
  top: 0; left: 0; right: 0;
  z-index: 9500;            /* below #mobileNav(10000), above content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.2rem;

  background: linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.95) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-nav--center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.site-nav--right { margin-left: auto; }

.brand { flex-shrink: 0; text-align: center; }

/* badge container */
.brand-badge{
  display: inline-flex;
  align-items: baseline;        /* baseline is key so the tagline sits nicely with logo */
  gap: .55rem;                  /* horizontal spacing between logo and tagline */
  padding: .6rem .9rem;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* logo part */
.brand-logo{
  display: inline-flex;
  align-items: baseline;        /* keep internal alignment steady */
  line-height: 1;               /* avoids extra vertical wobble */
}

.brand-logo img {
  display: block;
  height: clamp(28px, 3vw, 50px);
  width: auto;
}

/* tagline */
.brand-tagline{
  display: inline-block;
  white-space: nowrap;          /* never wrap "WEB · AI · STRATEGY" */
  margin-left: .1rem;           /* tiny nudge away from logo if needed */
  font-size: .9rem;             /* slightly smaller than logo text */
  font-weight: 600;             /* readable but lighter than logo */
  letter-spacing: .04em;
  line-height: 1;               /* keep baseline consistent */
  position: relative;
  top: .05em;                   /* micro vertical tweak */
  color: var(--magenta);        /* brand magenta */
  text-transform: uppercase;
}

/* hover polish */
.brand-badge:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.brand-badge:hover .brand-tagline{
  text-decoration: none;
  filter: saturate(105%);
}

/* Mobile responsive adjustments */
@media (max-width: 980px) {
  .brand-badge { 
    gap: .5rem; 
    padding: .55rem .8rem; 
  }
  .brand-tagline { 
    font-size: .8rem; 
    letter-spacing: .03em; 
    top: .02em; 
  }
}

@media (max-width: 520px) {
  .brand-badge { 
    gap: .45rem; 
    padding: .55rem .8rem; 
  }
  .brand-tagline { 
    font-size: .85rem; 
    letter-spacing: .03em; 
    top: .02em; 
  }
}

@media (max-width: 480px) {
  .brand-tagline {
    display: none;
  }
}

/* === Mobile overlay nav (dedicated container) === */
#mobileNav{
  position: fixed;
  top:0; right:0; bottom:0; left:0;      /* fallback */
  inset: 0;
  width:100vw; height:100vh;
  z-index: 10000;
  background: linear-gradient(135deg, 
    #ffffff 0%,
    #f0f4f8 20%,
    #e8f0fe 40%,
    #f8fafc 60%,
    #e6f3ff 80%,
    #ffffff 100%
  );
  backdrop-filter: blur(10px) saturate(110%);

  display:flex; flex-direction:column; align-items:center; 
  gap:1rem;
  padding: max(64px, calc(24px + env(safe-area-inset-top))) 24px 24px;

  /* hidden by default */
  transform: translate3d(0,-100%,0);
  opacity:0; pointer-events:none;
  will-change: transform, opacity;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  overscroll-behavior: contain;
}

/* Open state from <html class="nav-open"> */
html.nav-open #mobileNav{
  transform: translate3d(0,0,0);
  opacity:1; pointer-events:auto;
}

/* Header polish while open */
html.nav-open .site-header{
  background:transparent;
  border-bottom-color:transparent;
}

/* Mobile-only hiding of desktop navs */
@media (max-width: 980px){
  .site-nav--center,
  .site-nav--right{ display:none; }
}

/* Links inside overlay */
#mobileNav .nav-link{
  font-size:1.35rem; font-weight:800;
  padding:.9rem 1.1rem; border-radius:12px;
  position: relative;
  transition: background 0.2s ease;
}
#mobileNav .nav-link:hover{ background:rgba(0,0,0,.06); }

/* Signature underline for mobile nav links */
#mobileNav .nav-link::after {
  content: "";
  position: absolute;
  left: 1.1rem; bottom: 0.3rem;
  width: calc(100% - 2.2rem); height: 2px;
  background: var(--brand-grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
#mobileNav .nav-link:hover::after,
#mobileNav .nav-link:focus-visible::after {
  transform: scaleX(1);
}

#mobileNav .nav-cta{
  --h:54px; font-size:1.08rem; padding:0 1.3rem;
  box-shadow:0 14px 32px rgba(255,0,204,.18), 0 6px 18px rgba(204,85,0,.15);
}

/* Mobile navigation settings row */
.mobile-nav-settings {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  width: 100%;
}

/* Theme toggle now inherits from the main language toggle rule above */

.mobile-nav-settings .lang-toggle:hover,
.mobile-nav-settings .mobile-theme-toggle:hover {
  background: rgba(255,0,204,.1);
  border-color: rgba(255,0,204,.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,0,204,.15);
}

.mobile-nav-settings .lang-toggle:active,
.mobile-nav-settings .mobile-theme-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* === Hamburger button === */
.nav-toggle{
  display:none; /* shown on mobile via media query */
  position:relative;
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:var(--shadow-sm);
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav-toggle:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.nav-toggle:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.nav-toggle__bar{
  position:absolute; width:20px; height:2px; background:#111; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.nav-toggle__bar:nth-child(1){ top:13px; }
.nav-toggle__bar:nth-child(2){ top:20px; }
.nav-toggle__bar:nth-child(3){ top:27px; }

/* X state */
.nav-open .nav-toggle__bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-open .nav-toggle__bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* Make hamburger bars theme-aware (good contrast in dark) */
.nav-toggle__bar{ background: var(--ink); }              /* replaces hardcoded #111 */
:root[data-theme="dark"] .nav-toggle{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .nav-toggle:hover{ box-shadow: var(--shadow-md); }


/* Show the hamburger on mobile; pin as close button when open */
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; z-index:11000; }
  .nav-open #navToggle{
    position: fixed;
    top:12px; right:12px;
    background:#fff; border:1px solid rgba(0,0,0,.12);
    box-shadow:var(--shadow-sm);
  }
}

/* lock scroll when open */
html.nav-open, html.nav-open body { height:100%; overflow:hidden; }

/* ===== Nav links ===== */
.site-header .nav-link {
  position: relative;
  font-weight: 600;
  color: #2a2a2a;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

/* Hover/Focus */
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: var(--orange);
  background: rgba(0,0,0,0.04);
}

/* Signature brand underline animation */
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--brand-grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Tiny lift on scroll */
html.scrolled .site-header { box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* Enhanced scrolled state for dark mode */
:root[data-theme="dark"] html.scrolled .site-header { 
  box-shadow: 
    0 6px 20px rgba(0,0,0,.8),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 20%, transparent) inset,
    0 1px 1px 0 color-mix(in oklab, var(--orange) 8%, transparent) inset;
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface-2) 90%, #1a1f2e) 0%,
      color-mix(in oklab, var(--surface-2) 95%, transparent) 25%,
      color-mix(in oklab, var(--surface-2) 98%, #0f141d) 50%,
      color-mix(in oklab, var(--surface-2) 92%, transparent) 75%,
      color-mix(in oklab, var(--surface-2) 96%, #141824) 100%
    ),
    radial-gradient(ellipse 600px 150px at 50% 0%, 
      color-mix(in oklab, var(--magenta) 12%, transparent) 0%, 
      transparent 60%
    );
}

/* ===== Buttons ===== */
.btn{
  --h: 48px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 1.1rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#1b1b1b; font-weight:600;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
  position: relative;
  overflow: hidden;
}
.btn:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

.btn--primary{
  background: var(--brand-grad);
  border-color: transparent; color:#fff;
  box-shadow: 0 10px 24px rgba(255,0,204,.15), 0 4px 14px rgba(204,85,0,.15);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .3s ease;
}
.btn--primary:hover{ 
  filter:brightness(1.02); 
  background: linear-gradient(90deg, var(--magenta-600), var(--orange));
}

/* Signature underline animation for outline & ghost buttons */
.btn--outline, 
.btn--ghost { 
  background:transparent; 
  border:1px solid rgba(0,0,0,.18); 
  color:#111;
}
.btn--outline::after,
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--brand-grad);
  border-radius: 0 0 999px 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.btn--outline:hover::after,
.btn--ghost:hover::after,
.btn--outline:focus-visible::after,
.btn--ghost:focus-visible::after {
  transform: scaleX(1);
}

.btn--sm{ --h: 38px; padding:0 .9rem; font-size:.95rem; }

/* ===== Split Hero ===== */
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1fr; /* left text / right video */
  min-height: 100svh;
  position:relative;
  isolation:isolate;
}

/* Vertical soft divider between halves */
.hero-split::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-.5px);
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.02), rgba(0,0,0,.06));
  filter: blur(.2px);
  z-index:1;
}

/* LEFT (text) */
.hero-left{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px, 5vw, 64px);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,0,204,.20), transparent 60%),
    radial-gradient(1400px 700px at 0% 95%, rgba(204,85,0,.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf9fe 100%);
}
.hero-left__content{ width:min(720px, 100%); }

/* Typography */
.hero__title{
  font-family:'Playfair Display', serif;
  font-weight:900;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height:1.06;
  margin:0 0 .5rem;
  letter-spacing:.1px;
  text-shadow: 0 2px 12px rgba(0,0,0,.08);
  animation: fadeSlide 0.8s ease-out 0.3s both;
}
.hero__tag{
  font-size:clamp(16px, 1.9vw, 20px);
  font-weight:400;
  color:#2b2f36; 
  opacity:.85;
  margin:0 0 1.25rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.06);
  animation: fadeSlide 0.8s ease-out 0.6s both;
}

/* Personalizer input & chips */
.hero__brief{
  display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 .9rem;
}
.hero__brief input{
  flex:1 1 520px; max-width:720px;
  height:52px; padding:0 1rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#111; outline:none;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:16px;
}
.hero__brief input::placeholder{ color:#80848a; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 1.1rem; }
.chip{
  padding:.46rem .78rem; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-weight:600; font-size:.95rem; color:#2a2f36;
  text-align: center; display: inline-block; white-space: nowrap;
}
.chip:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }

/* Personalized plan panel */
.plan{
  margin-top:.6rem; padding:1rem; border-radius:var(--radius-xl);
  background:#fff; box-shadow:0 16px 46px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
}
.plan__head{ margin-bottom:.6rem; }
.plan__title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(22px,3.2vw,32px); margin:.1rem 0;
}
.plan__sub{ color: var(--muted); opacity: 1; margin:.2rem 0 0; }
.plan__group{ margin:.8rem 0; }
.plan__label{ font-size:1rem; font-weight:800; margin:0 0 .4rem; }
.plan__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.plan__tags li{
  padding:.42rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background:#fff; box-shadow:var(--shadow-sm); font-size:.95rem; font-weight:600;
}
.plan__list{ margin:0; padding-left:1.1rem; line-height:1.65; }
.plan__meta{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.plan__muted{ color:var(--muted); margin:.1rem 0 0; }
.plan__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.plan__fine{ color:var(--muted); font-size:.9rem; margin:.6rem 0 0; }

/* RIGHT (video) */
.hero-right{ position:relative; overflow:hidden; min-height: 100%; }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  filter:brightness(.92) contrast(1.05) saturate(1.05);
}
.hero-video__overlay{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient( to left, rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 30%, rgba(0,0,0,0) 65% );
}

/* Video toggle button (if you added it) */
.video-toggle{
  position:absolute; right:16px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .2s;
}
.video-toggle:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.video-toggle:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.video-toggle .icon{ fill:#fff; opacity:.95; }
.video-toggle .icon-play{ display:none; }
.video-toggle[data-state="paused"] .icon-pause{ display:none; }
.video-toggle[data-state="paused"] .icon-play{ display:block; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
  .hero-right{ background:linear-gradient(135deg,#fff,#fbf9ff) center/cover no-repeat; }
}

/* ===== Sections & footer ===== */
.section{ 
  padding: var(--section-padding-mobile) 0; 
  line-height:1.75; 
}

@media(min-width:768px){
  .section{ padding: var(--section-padding-desktop) 0; }
}
.section h2{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(22px, 3.4vw, 34px); margin:0 0 .5rem;
}
.section p{ color:var(--muted); }
.site-footer{
  border-top:1px solid rgba(0,0,0,.08);
  padding:28px 20px; text-align:center; color:#666; background:#fff;
}

/* ===== Mobile & Tablet ===== */
@media (max-width: 1024px){
  .hero-split{
    grid-template-columns: 1fr; /* stack */
    min-height: auto; /* Remove full viewport height on mobile */
  }
  .hero-split::before{ display:none; }
  .hero-left{ order: -1; padding: clamp(18px, 6vw, 40px); }
  .hero-right{
    height: min(56svh, 520px);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: 0 -12px 40px rgba(0,0,0,.12) inset;
  }
}

/* Hero button container */
.hero__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  align-items: center;
}

@media (max-width: 560px){
  .hero__brief{ gap:.5rem; }
  .btn{ --h: 46px; padding:0 1rem; }
  
  /* Optimize hero button spacing for mobile */
  .hero__actions {
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  
  /* Make buttons more compact on very small screens */
  .hero__actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 200px;
    text-align: center;
    font-size: 0.9rem;
  }
}

/* Even smaller screens - stack buttons if needed */
@media (max-width: 400px) {
  .hero__actions {
    gap: 0.6rem;
    margin-top: 1rem;
  }
  
  .hero__actions .btn {
    flex: 1 1 100%;
    max-width: none;
    min-width: auto;
  }
}

.ai-badge{
  display:inline-flex; align-items:center;
  margin-left:.6rem; padding:.18rem .5rem;
  border-radius:999px;
  font-size:.8rem; font-weight:800;
  background:#111; color:#fff;
}
.ai-badge.local{
  background:#e9eef3; color:#1b2127;
}

/* Status line */
.ai-status{ margin:.4rem 0 0; font-weight:600; color:#666b73; }

/* Button loading state */
.btn--loading{ position:relative; pointer-events:none; opacity:.75; }
.btn--loading::after{
  content:""; position:absolute; right:.9rem; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:transparent;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Skeleton */
.plan--skeleton{
  margin-top:.6rem; padding:1rem; border-radius:var(--radius-xl);
  background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 16px 46px rgba(0,0,0,.08);
}
.plan--skeleton .sk-title,
.plan--skeleton .sk-sub,
.plan--skeleton .sk-chip,
.plan--skeleton .sk-list li{
  background:linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size:400% 100%; animation:shimmer 1.2s ease-in-out infinite;
  border-radius:10px;
}
.plan--skeleton .sk-title{ height:28px; width:60%; margin:.2rem 0 .6rem; }
.plan--skeleton .sk-sub{ height:16px; width:75%; margin:0 0 .8rem; }
.plan--skeleton .sk-chiprow{ display:flex; gap:.5rem; margin:.4rem 0 1rem; }
.plan--skeleton .sk-chip{ height:28px; width:120px; }
.plan--skeleton .sk-list{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.5rem; }
.plan--skeleton .sk-list li{ height:12px; width:90%; }
@keyframes shimmer{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }

/* ===== Visual Divider ===== */
.visual-divider {
  position: relative;
  width: 100vw; /* Full viewport width */
  height: 60vh; /* Fixed height window */
  left: 50%;
  margin-left: -50vw; /* Center the full-width element */
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.divider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.divider-image.fade-in {
  opacity: 1;
  transform: scale(1);
}

/* ===== Fade-in Animation for Sections ===== */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .visual-divider {
    height: 40vh;
  }
}

@media (max-width: 480px) {
  .visual-divider {
    height: 30vh;
  }
}

/* ===== Intake ===== */
/* Enhanced Intake Section Background */
.section--intake {
  background: 
    /* Subtle brand accent from top-left */
    radial-gradient(1000px 600px at 15% 20%, 
      rgba(255,0,204,0.08) 0%, 
      rgba(255,0,204,0.04) 40%,
      transparent 70%
    ),
    /* Warm accent from bottom-right */
    radial-gradient(800px 500px at 85% 80%, 
      rgba(204,85,0,0.06) 0%, 
      rgba(204,85,0,0.03) 35%,
      transparent 65%
    ),
    /* Enhanced base gradient */
    linear-gradient(135deg, 
      #fbfcfd 0%,
      #f2f6fa 15%,
      #eef4f8 30%,
      #f0f7fc 45%,
      #ffffff 60%,
      #f5f9fc 75%,
      #f8fbfc 90%,
      #ffffff 100%
    );
  position: relative;
  backdrop-filter: blur(8px) saturate(110%);
}

.section--intake::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 0, 204, 0.2) 25%,
    rgba(204, 85, 0, 0.2) 50%,
    rgba(255, 0, 204, 0.2) 75%,
    transparent 100%
  );
}

.section--intake .intake__title{
  font-family:'Playfair Display', serif; font-weight:700;
  font-size:clamp(22px,3.4vw,34px); margin:0 0 .4rem;
}
.section--intake .intake__tag{ color:var(--muted); margin:.2rem 0 1.2rem; }

.form{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-xl);
  padding:clamp(18px,3.6vw,28px); box-shadow:0 14px 38px rgba(0,0,0,.08); }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-weight:700; }
.field .req{ color:#d12; }
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field select,
.field textarea{
  height:48px; padding:0 .9rem; border-radius:12px; border:1px solid rgba(0,0,0,.14);
  background:#fff; font:inherit; color:inherit; outline:none; box-shadow:var(--shadow-sm);
}
.field textarea{ height:auto; padding:.8rem .9rem; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:#000; }
.help{ color:#b33; font-size:.92rem; }
.muted.small{ font-size:.9rem; color:var(--muted); margin:0; }

.checks{ display:flex; flex-wrap:wrap; gap:.6rem; }
.checks label{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border:1px solid rgba(0,0,0,.12); border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); }
.checks input{ accent-color:#111; }

.form-actions{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.form-status{ color:#666b73; font-weight:600; }

.fine-print{ color:#80848a; font-size:.9rem; margin:.8rem 0 0; }
.thanks{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-xl);
  padding:24px; box-shadow:var(--shadow-sm); }

@media (max-width: 760px){
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 400px){
  .btn{ --h: 42px; padding:0 .8rem; font-size:.95rem; }
}

/* ===== Services/Prices/About merged section ===== */
.section--sv-services h2{
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(26px,3.8vw,38px); margin:0 0 .4rem;
}
.section--sv-services .sv-tag{ color:var(--muted); margin:0 0 1rem; }

.sv-tabs{ display:flex; flex-wrap:wrap; gap:12px; margin:.8rem 0 1.4rem; }
.sv-tab{
  padding:.65rem 1.2rem;
  font-size:1rem;
  font-weight:600;
  border-radius:25px;
  border:2px solid rgba(0,0,0,.15);
  background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  color:var(--text-muted);
  box-shadow:0 3px 12px rgba(0,0,0,.1);
  cursor:pointer;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  transform:translateY(0);
}
.sv-tab.is-active{ 
  background:linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%); 
  border-color:#8e44ad; 
  color:#ffffff;
  box-shadow:0 6px 20px rgba(142, 68, 173, .25);
  transform:translateY(-3px);
}
.sv-tab:hover,
.sv-tab:focus-visible{
  border-color:#8e44ad;
  background:linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow:0 5px 18px rgba(142, 68, 173, .15);
  transform:translateY(-2px);
  color:var(--text);
}

.sv-pane{ display:none; }
.sv-pane.is-active{ display:block; }

.sv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sv-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:20px; padding:18px;
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:.6rem;
}
.sv-card h3{ margin:.1rem 0; font-family:'Playfair Display',serif; font-weight:700; }
.sv-bullets{ margin:.2rem 0 .2rem; padding-left:1.1rem; line-height:1.6; }
.sv-meta{ margin-top:auto; display:flex; gap:.5rem; align-items:center; }
.chip{ padding:.38rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; box-shadow:var(--shadow-sm); font-weight:600; text-align: center; display: inline-block; white-space: nowrap; }

.sv-pricing{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sv-tier{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:20px; padding:18px; box-shadow:0 14px 32px rgba(0,0,0,.06); }
.sv-tier h3{ margin:.1rem 0; font-family:'Playfair Display',serif; }
.price{ font-size:1.6rem; font-weight:800; margin:.2rem 0 .6rem; }

.sv-pay{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  margin-top:12px; font-weight:600;
}
.sv-pay-item{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:.8rem; box-shadow:var(--shadow-sm); }

/* Enhanced How I Work Steps Styling */
.sv-steps{ 
  line-height:1.8; 
  margin:.8rem 0 1.5rem; 
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
}

.sv-steps li {
  position: relative;
  padding: 1.2rem 0 1.2rem 3.5rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.04) 0%, 
    rgba(139, 92, 246, 0.03) 50%, 
    rgba(168, 85, 247, 0.02) 100%
  );
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: 16px;
  transition: all 0.3s ease;
  counter-increment: step-counter;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.04);
}

.sv-steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.15) 0%, 
    rgba(139, 92, 246, 0.12) 100%
  );
  border: 2px solid rgba(99, 102, 241, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(99, 102, 241, 0.8);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.sv-steps li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.12);
}

.sv-steps li:hover::before {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.2) 0%, 
    rgba(139, 92, 246, 0.18) 100%
  );
  border-color: rgba(99, 102, 241, 0.25);
  color: rgba(99, 102, 241, 1);
}

.sv-steps li:last-child {
  margin-bottom: 0;
}

/* Dark mode enhancements for How I Work steps */
:root[data-theme="dark"] .sv-steps li {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.12) 0%, 
    rgba(139, 92, 246, 0.10) 50%, 
    rgba(168, 85, 247, 0.08) 100%
  );
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .sv-steps li::before {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.25) 0%, 
    rgba(139, 92, 246, 0.22) 100%
  );
  border-color: rgba(99, 102, 241, 0.35);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
}

:root[data-theme="dark"] .sv-steps li:hover {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.18) 0%, 
    rgba(139, 92, 246, 0.15) 50%, 
    rgba(168, 85, 247, 0.12) 100%
  );
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .sv-steps li:hover::before {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.35) 0%, 
    rgba(139, 92, 246, 0.32) 100%
  );
  border-color: rgba(99, 102, 241, 0.45);
  color: rgba(255, 255, 255, 1);
}

/* Enhanced pane container styling */
#sv-pane-process {
  padding: 1.5rem 0;
}

#sv-pane-process .btn {
  margin-top: 0.5rem;
}

/* Enhanced About Me Pane Styling */
.about-wrap{ 
  display:grid; 
  grid-template-columns:140px 1fr; 
  gap:20px; 
  align-items:start; 
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.98) 100%
  );
  border:1px solid rgba(0,0,0,.06); 
  border-radius:24px; 
  padding:24px; 
  box-shadow:0 16px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
}

.about-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(99, 102, 241, 0.02) 25%, 
    transparent 50%, 
    rgba(139, 92, 246, 0.015) 75%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.about-wrap > * {
  position: relative;
  z-index: 2;
}

.about-photo{ 
  width:140px; 
  height:140px; 
  border-radius:20px; 
  object-fit:cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  border: 3px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  display: block;
}

.about-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.16), 0 4px 8px rgba(0,0,0,.1);
}

.about-copy h3{ 
  margin:.2rem 0 .8rem; 
  font-family:'Playfair Display',serif; 
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
}

.about-copy p {
  margin: 0 0 1.2rem;
  line-height: 1.7;
  color: var(--muted);
  font-size: 1rem;
}

.about-copy p:last-of-type {
  margin-bottom: 1.5rem;
}

.about-copy strong {
  color: var(--ink);
  font-weight: 600;
}

.about-copy em {
  color: rgba(99, 102, 241, 0.8);
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

.about-meta{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:12px; 
  align-items:center; 
  margin:.8rem 0 1.2rem; 
}

.about-blog{ 
  display:flex; 
  align-items:flex-start; 
  gap:12px; 
  padding:16px; 
  border-radius:16px; 
  border:1px solid rgba(0,0,0,.08); 
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(248, 250, 252, 0.95) 100%
  );
  box-shadow:0 4px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  margin: 1.5rem 0;
  transition: all 0.3s ease;
}

.about-blog:hover {
  transform: translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  border-color: rgba(99, 102, 241, 0.12);
}

.about-blog__logo{ 
  width:32px; 
  height:32px; 
  object-fit:contain; 
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  flex-shrink: 0;
}

.about-blog__text h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.about-blog__text h4 a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s ease;
}

.about-blog__text h4 a:hover {
  color: rgba(99, 102, 241, 0.8);
}

.about-blog__text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.about-cta{ 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
  margin-top:1rem; 
}

.about-cta .btn {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Dark mode enhancements for About section */
:root[data-theme="dark"] .about-wrap {
  background: linear-gradient(135deg, 
    rgba(21, 25, 37, 0.95) 0%, 
    rgba(15, 17, 22, 0.98) 100%
  );
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .about-wrap::before {
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(99, 102, 241, 0.08) 25%, 
    transparent 50%, 
    rgba(139, 92, 246, 0.06) 75%, 
    transparent 100%
  );
}

:root[data-theme="dark"] .about-photo {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .about-photo:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.25);
}

:root[data-theme="dark"] .about-copy em {
  color: rgba(139, 92, 246, 0.9);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.12));
}

:root[data-theme="dark"] .about-blog {
  background: linear-gradient(135deg, 
    rgba(21, 25, 37, 0.8) 0%, 
    rgba(17, 20, 32, 0.9) 100%
  );
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.1);
}

:root[data-theme="dark"] .about-blog:hover {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15);
}

:root[data-theme="dark"] .about-blog__logo {
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .about-blog__text h4 a:hover {
  color: rgba(139, 92, 246, 0.9);
}

@media (max-width: 980px){
  .sv-grid{ grid-template-columns:1fr 1fr; }
  .sv-pricing{ grid-template-columns:1fr 1fr; }
  .sv-pay{ grid-template-columns:1fr; }
  .about-wrap{ 
    grid-template-columns:1fr; 
    text-align:center;
    align-items:center;
    padding: 20px;
  }
  .about-photo{ 
    width:96px; 
    height:96px; 
    justify-self:center;
    margin-bottom:16px;
    display: block;
    position: relative;
    z-index: 10;
  }
}
@media (max-width: 640px){
  .sv-grid, .sv-pricing{ grid-template-columns:1fr; }
  .sv-tabs{ gap:8px; justify-content:center; }
  .sv-tab{ 
    padding:.58rem 1rem; 
    font-size:.92rem; 
    min-width:auto;
    flex:1;
    text-align:center;
  }
  .about-wrap {
    padding: 16px;
  }
  .about-photo{ 
    width:80px; 
    height:80px; 
    margin-bottom:12px;
    display: block;
    position: relative;
    z-index: 10;
  }
  .about-copy {
    text-align:left;
  }
}
@media (max-width: 400px){
  .btn{ --h: 42px; padding:0 .8rem; font-size:.95rem; }
}

/* ===== Services/Prices/About – updates for new tiers ===== */
.sv-subtitle{ margin:2rem 0 .8rem; font-weight:800; }
.sv-grid.sv-grid--pricing{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sv-price{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm); }
.sv-price h4{ margin:0 0 .2rem; font-weight:800; }
.sv-price p{ margin:0; font-weight:800; color:var(--magenta); }

.price-line{ font-weight:800; color:var(--magenta); margin:.2rem 0 .4rem; }

.sv-card{ position:relative; }
.sv-accent--pink::before,
.sv-accent--orange::before,
.sv-accent--lilac::before{
  content:""; position:absolute; inset:-1px auto auto -1px; width:6px; height:60px; border-radius:16px;
}
.sv-accent--pink::before{ background:linear-gradient(180deg,#ff00cc,#ff66e5); }
.sv-accent--orange::before{ background:linear-gradient(180deg,#cc5500,#ff9955); }
.sv-accent--lilac::before{ background:linear-gradient(180deg,#c6b7ff,#eee4ff); }

.sv-span-2{ grid-column: span 2; }

/* Menu list */
.sv-menu{ list-style:none; padding:0; margin:.4rem 0 1rem; }
.sv-menu li{ display:flex; justify-content:space-between; gap:12px; padding:.8rem 0; border-bottom:1px dashed rgba(0,0,0,.15); }
.sv-menu li strong{ color:var(--magenta); }

/* Quote calculator */
.sv-quote{ margin-top:12px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm); }
.quote-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quote-grid fieldset{ margin:0; padding:0; border:0; display:grid; gap:.5rem; }
.quote-packages label, .quote-addons label{ display:flex; align-items:center; gap:.5rem; }
.quote-content label{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.quote-content input[type="number"]{ width:90px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.14); padding:0 .6rem; }

.quote-total{ grid-column:1 / -1; border-top:1px solid rgba(0,0,0,.08); padding-top:8px; }
.qt-line{ display:flex; justify-content:space-between; align-items:center; font-weight:800; }
.qt-actions{ display:flex; gap:.6rem; margin-top:.6rem; }

/* Enhanced FAQ Styling */
.sv-faq details{ 
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.98) 100%
  );
  border: 1px solid rgba(0,0,0,.06); 
  border-radius: 16px; 
  padding: 0; 
  box-shadow: 0 4px 12px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sv-faq details::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(99, 102, 241, 0.02) 25%, 
    transparent 50%, 
    rgba(139, 92, 246, 0.015) 75%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sv-faq details > * {
  position: relative;
  z-index: 2;
}

.sv-faq details + details{ 
  margin-top: 12px; 
}

.sv-faq details:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  border-color: rgba(99, 102, 241, 0.12);
}

.sv-faq details[open] {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 1) 100%
  );
  border-color: rgba(99, 102, 241, 0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03);
}

.sv-faq summary{ 
  cursor: pointer; 
  font-weight: 700; 
  padding: 1.2rem 1.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  border-radius: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sv-faq summary:hover {
  background: rgba(99, 102, 241, 0.04);
  color: rgba(99, 102, 241, 0.9);
}

.sv-faq summary:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.6);
  outline-offset: 2px;
}

.sv-faq summary::marker,
.sv-faq summary::-webkit-details-marker {
  color: rgba(99, 102, 241, 0.7);
  font-size: 1.2em;
}

.sv-faq p{ 
  margin: 0 1.5rem 1.5rem; 
  color: var(--muted); 
  line-height: 1.6;
  font-size: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,.04);
}

/* Responsiveness */
@media (max-width: 980px){
  .sv-grid.sv-grid--pricing{ grid-template-columns:1fr 1fr; }
  .sv-span-2{ grid-column: span 1; }
  .quote-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .sv-grid.sv-grid--pricing{ grid-template-columns:1fr; }
}
@media (max-width: 400px){
  .btn{ --h: 42px; padding:0 .8rem; font-size:.95rem; }
}

/* ===== About blog card (wider version) ===== */
.about-blog{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:2rem 0;
  padding:1rem 1.5rem;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.about-blog__logo{
  width:100px;
  height:auto;
  flex-shrink:0;
}
.about-blog__text h4{
  margin:0;
  font-size:1.2rem;
}
.about-blog__text h4 a{
  color:var(--magenta, #d148a1);
  text-decoration:none;
}
.about-blog__text h4 a:hover{
  text-decoration:underline;
}
.about-blog__text p{
  margin:.4rem 0 0;
  font-size:.95rem;
  line-height:1.4;
}
@media (max-width: 600px){
  .about-blog{
    flex-direction:column;
    text-align:center;
  }
  .about-blog__logo{
    width:80px;
    margin-bottom:.6rem;
  }
}

/* ===== Language toggle & Theme toggle (desktop + mobile) ===== */
.site-header .lang-toggle,
.site-header .theme-toggle,
#mobileNav .lang-toggle,
.mobile-nav-settings .mobile-theme-toggle{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  font-size:1.1rem;     /* keeps the emoji crisp */
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

/* Adjust theme toggle emoji size for visual balance */
.site-header .theme-toggle,
.mobile-nav-settings .mobile-theme-toggle {
  font-size: 1.15rem; /* Slightly larger to match visual weight of 🌍 */
}

/* Make mobile theme toggle square-shaped with rounded corners */
.mobile-nav-settings .mobile-theme-toggle {
  border-radius: 12px; /* Rounded square instead of circle */
  width: 42px;  /* Keep same size */
  height: 42px; /* Keep same size */
}

/* Reduce mobile language toggle size for tighter fit in hamburger menu */
#mobileNav .lang-toggle,
.mobile-nav-settings .lang-toggle {
  width: 38px;  /* Smaller container for tighter fit */
  height: 38px; /* Smaller container for tighter fit */
}

/* Reduce language toggle padding for visual balance */
.site-header .lang-toggle,
#mobileNav .lang-toggle {
  width: 40px;  /* Slightly smaller container */
  height: 40px; /* Slightly smaller container */
  border-radius: 50%; /* Keep perfect circle */
}

/* Hover / focus: gradient pill with glow */
.site-header .lang-toggle:hover,
.site-header .lang-toggle:focus-visible,
.site-header .theme-toggle:hover,
.site-header .theme-toggle:focus-visible,
#mobileNav .lang-toggle:hover,
#mobileNav .lang-toggle:focus-visible,
.mobile-nav-settings .mobile-theme-toggle:hover,
.mobile-nav-settings .mobile-theme-toggle:focus-visible{
  background:var(--brand-grad);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(255,0,204,.25), 0 3px 10px rgba(204,85,0,.2);
  transform:translateY(-2px);
  outline:none;
}

/* Active press */
.site-header .lang-toggle:active,
.site-header .theme-toggle:active,
#mobileNav .lang-toggle:active,
.mobile-nav-settings .mobile-theme-toggle:active{
  transform:scale(.94);
}

/* Compact version inside the overlay (optional) */
#mobileNav .lang-toggle{
  width:42px;
  height:42px;
}

/* If you want a subtle ring on keyboard focus only */
.site-header .lang-toggle:focus-visible,
#mobileNav .lang-toggle:focus-visible{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.6), 0 6px 16px rgba(255,0,204,.25);
}

/* =========================
   Footer (enhanced with gradients & dark mode)
   ========================= */
.site-footer{
  border-top:1px solid rgba(0,0,0,.08);
  background: 
    linear-gradient(135deg, 
      #ffffff 0%, 
      color-mix(in oklab, #fff 92%, var(--magenta)) 20%,
      color-mix(in oklab, #fff 96%, var(--orange)) 35%,
      #ffffff 50%,
      color-mix(in oklab, #fff 94%, var(--magenta)) 65%,
      color-mix(in oklab, #fff 90%, var(--orange)) 80%,
      #ffffff 100%
    );
  color:#2a2a2a;
  padding:60px 20px 20px;
  position:relative;
  overflow:hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(800px 400px at 20% 10%, rgba(255,0,204,.08), transparent 60%),
    radial-gradient(600px 300px at 80% 90%, rgba(204,85,0,.06), transparent 60%),
    radial-gradient(400px 200px at 50% 50%, rgba(255,0,204,.03), transparent 80%);
  pointer-events: none;
}

/* main grid */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:24px;
  align-items:start;
}

/* column spans (desktop) */
.footer-brand   { grid-column:span 4; min-width:0; text-align: left; }
.footer-contact { grid-column:span 5; min-width:0; text-align: left; }
.footer-links   { grid-column:span 3; min-width:0; text-align: left; }

/* brand */
.footer-logo{ height:48px; width:auto; display:block; }
.footer-name{ margin:1rem 0 0; font-weight:700; line-height: 1.3; }
.footer-loc,.footer-kvk{ margin:.4rem 0 0; color:var(--muted); font-size: 0.95rem; line-height: 1.4; }

/* socials */
.footer-social{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.8rem; 
  margin:1.4rem 0 0;
  justify-content: flex-start;
}

.footer-social .social{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:44px; 
  height:44px; 
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,0.8); 
  color:#1b1b1b;
  box-shadow:
    0 6px 12px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.04);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social .social:hover{
  background:var(--brand-grad); 
  color:#fff; 
  border-color:transparent;
  box-shadow:
    0 12px 28px rgba(255,0,204,.25), 
    0 6px 16px rgba(204,85,0,.2);
  transform:translateY(-3px) scale(1.05);
}

/* Ciao Mama Codes logo button */
.footer-social .blog-social{
  padding:0; border:none; background:transparent; box-shadow:none;
}
.footer-social .blog-social .social-logo{
  height:34px; width:auto; display:block; border-radius:8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-social .blog-social:hover .social-logo{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* contact box */
.footer-title{
  margin:0 0 1rem;
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(18px,2.2vw,22px);
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.contact-form{
  width:100%;
  background: rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-xl);
  padding:24px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.08),
    0 8px 16px rgba(0,0,0,.04);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.contact-form:hover {
  box-shadow:
    0 25px 50px rgba(0,0,0,.12),
    0 10px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

.contact-form .field{ 
  display:flex; 
  flex-direction:column; 
  gap:.5rem; 
  margin-bottom: 1rem;
}

.contact-form .field:last-of-type {
  margin-bottom: 0;
}

.contact-form label {
  font-weight: 600;
  color: #2a2a2a;
  font-size: 0.9rem;
  text-align: left;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background: rgba(255,255,255,0.9); 
  font:inherit; 
  color:inherit;
  padding:.8rem 1rem; 
  box-shadow:
    0 4px 8px rgba(0,0,0,.04),
    inset 0 1px 2px rgba(0,0,0,.06);
  transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{ 
  outline:none; 
  border-color: var(--magenta);
  box-shadow:
    0 6px 12px rgba(0,0,0,.08),
    0 0 0 3px rgba(255,0,204,.1);
  background: #fff;
}

.contact-form textarea{ 
  resize:vertical; 
  min-height: 100px;
}

.contact-form .form-actions{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.8rem; 
  margin-top:1.2rem; 
}

.contact-form .fine-print{ 
  color:var(--muted); 
  font-size:.85rem; 
  margin:.8rem 0 0;
  line-height: 1.4;
}

/* links column */
.footer-links .footer-list{
  list-style:none; 
  padding:0; 
  margin:.5rem 0 0;
  display:grid; 
  gap:.6rem;
  justify-items: start;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  padding:.6rem .8rem; 
  border-radius:12px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);
}

.footer-links a:hover{ 
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
  transform: translateX(4px) translateY(-1px);
  box-shadow: 
    0 8px 20px rgba(255,0,204,.2),
    0 4px 10px rgba(204,85,0,.1);
}

.footer-links a:focus {
  outline: none;
  box-shadow: 
    0 0 0 3px rgba(255,0,204,.3),
    0 8px 20px rgba(255,0,204,.2);
}

/* Footer links grid for mobile two-column layout */
.footer-links-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-logo-wrap {
    display: flex;
    justify-content: center;
  }
  
  .footer-social {
    justify-content: center;
    gap: 1rem;
  }
  
  .footer-contact {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .footer-links {
    text-align: left;
    justify-self: center;
  }
  
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.2rem;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .footer-list-left,
  .footer-list-right {
    justify-items: start;
    gap: 0.8rem;
  }
  
  .footer-links a {
    min-width: 140px;
    justify-content: flex-start;
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    border-radius: 10px;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-logo-wrap {
    display: flex;
    justify-content: center;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  .footer-links {
    text-align: left;
    justify-self: center;
  }
  
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .footer-list-left,
  .footer-list-right {
    justify-items: start;
  }
  
  .footer-links a {
    justify-content: flex-start;
    text-align: left;
  }
}

/* bottom bar */
.footer-bottom{
  max-width:min(1100px, 92vw);
  margin:22px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
  text-align:center; color:#666;
}

.footer-trust {
  font-size: 0.8rem;
  color: #777;
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 0.05em;
}

/* =========================
   Breakpoints
   ========================= */
@media (max-width: 1120px){
  .footer-brand{ grid-column:span 5; }
  .footer-contact{ grid-column:span 7; }
  .footer-links{ grid-column:1 / -1; }
}

@media (max-width: 980px){
  .footer-brand,
  .footer-contact,
  .footer-links{ grid-column:span 12; }
  .contact-form{ border-radius:var(--radius); }
}
@media (max-width: 400px){
  .btn{ --h: 42px; padding:0 .8rem; font-size:.95rem; }
}

/* Bigger Ciao Mama Codes logo in footer */
.footer-social { align-items: center; } /* keeps row aligned */
.footer-social .blog-social .social-logo{
  height: 48px;        /* was 34px */
  width: auto;
  display: block;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 980px){
  .footer-social .blog-social .social-logo{ height: 42px; }
}
.footer-social .blog-social:hover .social-logo{
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* ===== Reviews ticker (compact chips, wrapped text) ===== */
.reviews-ticker{
  width:100%;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:14px 0;                 /* thicker line */
  font-size:15px;
  line-height:1.35;
  --mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

.reviews-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:16px;
  padding:0 16px;
  margin:0;
  list-style:none;
  animation: tickerMove var(--ticker-duration, 16s) linear infinite; /* faster fallback */
  will-change: transform;
}

.review-pill{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;          /* stack stars, text, source */
  align-items:flex-start;
  gap:.35rem;
  padding:12px 16px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;             /* no more huge oval */
  background:#fff;
  box-shadow:var(--shadow-sm);
  max-width: clamp(220px, 30vw, 380px);  /* force wrap inside */
  white-space:normal;             /* enable wrapping */
}

.review-stars{ order:1; letter-spacing:1px; color:var(--magenta); font-weight:800; font-size:14px; line-height:1; }
.review-text { order:2; color:#1c1f23; font-weight:700; font-size:1rem; line-height:1.35; word-break:break-word; hyphens:auto; }
.review-source{ order:3; color:var(--muted); font-weight:600; font-size:.92rem; }

.reviews-ticker:hover .reviews-track,
.reviews-ticker:has(:focus-visible) .reviews-track{ animation-play-state: paused; }

@keyframes tickerMove{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@media (max-width: 640px){
  .review-pill{ 
    max-width: 75vw; 
    font-size: 14px;
    gap: 0.25rem;
  }
  .reviews-ticker{
    padding: 12px 0;
  }
  .reviews-track{
    gap: 12px;
  }
}

/* Reduced motion: fall back to static, multi-row pills if needed */
@media (prefers-reduced-motion: reduce){
  .reviews-track{ animation:none; flex-wrap:wrap; row-gap:10px; }
  .reviews-ticker{ -webkit-mask-image:none; mask-image:none; }
}

/* ==== Minimal 2025 background: glow + fine texture (no images) ==== */
:root{
  --bg-0:#ffffff;
  --bg-1:#fbf9ff;       /* faint lilac tint */
  --bg-glow-a: rgba(255,0,204,.08);  /* magenta glow */
  --bg-glow-b: rgba(204,85,0,.06);   /* orange glow */
}

/* Base page backdrop */
html, body{
  background: var(--bg-0);
  position: relative;
}

/* Soft gradient glow */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% 8%,  var(--bg-glow-a), transparent 60%),
    radial-gradient(900px  520px at 85% 18%, var(--bg-glow-b), transparent 65%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
  filter: saturate(105%) contrast(102%);
}

/* Ultra-light grain/texture (CSS dots, ~free) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 1.2px);
  background-size: 6px 6px;
  opacity:.25;
  mix-blend-mode:multiply;
}

@media (prefers-reduced-data: reduce){
  body::before, body::after{ position:absolute; }
}

/* Respect reduced-motion / dark mode nicely */
@media (prefers-reduced-motion: reduce){
  body::before{ background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
  body::after{ opacity:.18; }
}

@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark){
  body::before{ background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
}

/* global muted helper (used elsewhere, safe) */
.muted{ color: var(--muted); }

/* Collab card: soft glow + heart sticker */
.sv-card--collab{
  position: relative;
  background:
    radial-gradient(700px 360px at 10% 6%, rgba(255,0,204,.06), transparent 60%),
    radial-gradient(700px 360px at 96% 12%, rgba(204,85,0,.05), transparent 60%),
    #fff;
}

.sv-collab-sticker{
  position: absolute;
  top: -12px; left: -12px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  font-size: 18px; line-height: 1;
  user-select: none; pointer-events: none;
}

.sv-collab-clarity{
  margin:.5rem 0 0;
  font-size:.92rem;
  color: var(--muted);
}
/* Non-interactive chips (used as tags) */
.chip--static{
  cursor: default;
}
.chip--static:hover{
  box-shadow: var(--shadow-sm); /* keep base shadow */
  transform: none;              /* no lift on hover */
}
/* Minimal divider at the very top of Services */
.section--sv-services{
  position: relative;
  z-index: 0; /* below its own content, above page bg */
  background: linear-gradient(135deg, 
    #fafbfc 0%,
    #f5f8fa 25%,
    #f0f5f9 50%,
    #f8fafc 75%,
    #ffffff 100%
  );
  backdrop-filter: blur(5px);
}

/* 1px hairline (centered, neutral) */
.section--sv-services::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(960px, 92vw);
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(245, 212, 212, 0.16) 12%,
    rgba(134, 105, 105, 0.136) 50%,
    rgba(138, 61, 61, 0.122) 88%,
    rgba(0,0,0,0) 100%
  );
  border-radius:2px;
  pointer-events:none;
}

/* soft 8px fade under the line for depth (still minimal) */
.section--sv-services::after{
  content:"";
  position:absolute;
  top:1px;
  left:0; right:0;
  height:8px;
  background: linear-gradient(to bottom, rgba(214, 177, 177, 0.075), rgba(231, 128, 128, 0.04));
  pointer-events:none;
  opacity:.75;
}

/* Dark mode tune */
@media (prefers-color-scheme: dark){
  .section--sv-services::before{
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,0) 100%
    );
  }
  .section--sv-services::after{
    background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0));
    opacity:.6;
  }
}

/* Enhanced Work Section Background */
.section--work {
  background: linear-gradient(135deg, 
    #f8fafb 0%,
    #f2f6f9 20%,
    #ebf3f7 40%,
    #f5f9fc 60%,
    #ffffff 80%,
    #f9fbfc 100%
  );
  position: relative;
  backdrop-filter: blur(5px);
}

.section--work::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(100, 150, 200, 0.3) 50%, 
    transparent 100%
  );
}

/* Parallax Work Container - Horizontal Scroll */
.work-parallax-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.4) 0%, 
    rgba(248, 250, 252, 0.6) 25%, 
    rgba(241, 245, 249, 0.4) 50%, 
    rgba(255,255,255,0.5) 75%, 
    rgba(248, 250, 252, 0.3) 100%);
  border: 1px solid rgba(100, 150, 200, 0.2);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

html[data-theme="dark"] .work-parallax-container {
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.08) 0%, 
    rgba(255,255,255,0.03) 50%, 
    rgba(0,0,0,0.1) 100%);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Dark mode section backgrounds */
html[data-theme="dark"] .section--sv-services {
  background: 
    /* Burnt orange accent from bottom-right corner */
    radial-gradient(800px 500px at 90% 90%, 
      rgba(217,119,64,0.08) 0%, 
      rgba(191,87,32,0.06) 35%,
      transparent 65%
    ),
    /* Ray of light from top-right */
    conic-gradient(from 225deg at 80% 20%, 
      transparent 0deg, 
      rgba(255,255,255,0.04) 25deg, 
      rgba(204,85,0,0.06) 45deg,
      rgba(255,255,255,0.03) 70deg,
      transparent 95deg,
      transparent 360deg
    ),
    /* Subtle light beam across section */
    linear-gradient(45deg, 
      transparent 0%, 
      rgba(255,0,204,0.04) 20%, 
      rgba(255,255,255,0.06) 50%, 
      rgba(204,85,0,0.05) 80%, 
      transparent 100%
    ),
    /* Ambient glow from center */
    radial-gradient(1200px 800px at 50% 30%, 
      rgba(255,255,255,0.08) 0%, 
      rgba(255,0,204,0.06) 30%,
      transparent 70%
    ),
    /* Base dark gradient */
    linear-gradient(135deg, 
      #0f1218 0%,
      #151b26 25%,
      #0d1116 50%,
      #181f2a 75%,
      #121821 100%
    );
}

/* Enhanced services section decorative elements with light rays */
html[data-theme="dark"] .section--sv-services::before {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(255,255,255,0.1) 5%,
    rgba(255,0,204,0.15) 25%,
    rgba(255,255,255,0.2) 50%,
    rgba(204,85,0,0.15) 75%,
    rgba(255,255,255,0.1) 95%,
    rgba(0,0,0,0) 100%
  );
  filter: blur(0.5px);
  box-shadow: 
    0 0 10px rgba(255,0,204,0.1),
    0 0 20px rgba(255,255,255,0.05);
}

html[data-theme="dark"] .section--sv-services::after {
  background: linear-gradient(to bottom, 
    rgba(255,255,255,0.08), 
    rgba(255,0,204,0.06) 30%,
    rgba(204,85,0,0.04) 70%,
    rgba(255,255,255,0.02)
  );
  opacity: 0.6;
  filter: blur(4px);
}

html[data-theme="dark"] .section--work {
  background: linear-gradient(135deg, 
    #0e1219 0%,
    #161d28 20%,
    #0c1015 40%,
    #1a212c 60%,
    #0f1419 80%,
    #151c27 100%
  );
}

html[data-theme="dark"] .section--work::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 0, 204, 0.2) 50%, 
    transparent 100%
  );
}

html[data-theme="dark"] .section--intake {
  background: 
    /* Magenta ray of light from top-left */
    conic-gradient(from 135deg at 20% 25%, 
      transparent 0deg, 
      rgba(255,0,204,0.12) 30deg, 
      rgba(255,255,255,0.06) 60deg,
      rgba(255,0,204,0.08) 90deg,
      transparent 120deg,
      transparent 360deg
    ),
    /* Orange accent from bottom-right */
    radial-gradient(900px 600px at 80% 85%, 
      rgba(204,85,0,0.1) 0%, 
      rgba(217,119,64,0.08) 30%,
      rgba(255,140,80,0.04) 50%,
      transparent 70%
    ),
    /* Ambient center glow */
    radial-gradient(1400px 800px at 50% 40%, 
      rgba(255,255,255,0.06) 0%, 
      rgba(255,0,204,0.04) 25%,
      rgba(204,85,0,0.03) 60%,
      transparent 80%
    ),
    /* Enhanced base dark gradient */
    linear-gradient(135deg, 
      #0d1117 0%,
      #151c27 15%,
      #171e29 25%,
      #0b0f14 40%,
      #13191f 55%,
      #1b222d 70%,
      #10151a 85%,
      #161d28 100%
    );
}

html[data-theme="dark"] .section--intake::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255,255,255,0.1) 10%,
    rgba(255, 0, 204, 0.35) 25%,
    rgba(255,140,80,0.25) 40%,
    rgba(204, 85, 0, 0.35) 50%,
    rgba(255,140,80,0.25) 60%,
    rgba(255, 0, 204, 0.35) 75%,
    rgba(255,255,255,0.1) 90%,
    transparent 100%
  );
  filter: blur(0.8px);
  box-shadow: 
    0 0 20px rgba(255,0,204,0.15),
    0 0 30px rgba(204,85,0,0.1),
    0 0 40px rgba(255,255,255,0.05);
}

/* Universal subtle emerald overlay for all dark mode sections */
html[data-theme="dark"] .section--sv-services,
html[data-theme="dark"] .section--work,
html[data-theme="dark"] .section--intake {
  position: relative;
}

html[data-theme="dark"] .section--sv-services::after,
html[data-theme="dark"] .section--work::after,
html[data-theme="dark"] .section--intake::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(2000px 1200px at 30% 20%, 
      rgba(16,185,129,0.06) 0%, 
      rgba(5,150,105,0.04) 30%,
      transparent 60%
    ),
    radial-gradient(1800px 1000px at 70% 80%, 
      rgba(34,197,94,0.05) 0%, 
      rgba(22,163,74,0.03) 40%,
      transparent 70%
    ),
    linear-gradient(135deg, 
      rgba(16,185,129,0.025) 0%, 
      transparent 30%,
      rgba(34,197,94,0.04) 70%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Ensure content stays above the emerald overlay */
html[data-theme="dark"] .section--sv-services .container,
html[data-theme="dark"] .section--work .container,
html[data-theme="dark"] .section--intake .container {
  position: relative;
  z-index: 2;
}

/* Services CTA Section Styling */
.sv-cta-section {
  margin-top: 3rem;
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.8) 0%, 
    rgba(248,250,252,0.9) 100%
  );
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}

.sv-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.sv-cta-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.75rem 0;
  color: var(--ink);
}

.sv-cta-desc {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.sv-cta-button {
  font-size: 1.1rem;
  padding: 0.875rem 2rem;
  min-width: 200px;
}

/* Dark mode styling for CTA section */
html[data-theme="dark"] .sv-cta-section {
  border-top-color: rgba(255,255,255,0.1);
  background: linear-gradient(135deg, 
    rgba(20,25,35,0.9) 0%, 
    rgba(30,35,45,0.8) 100%
  );
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

html[data-theme="dark"] .sv-cta-title {
  color: var(--ink);
}

html[data-theme="dark"] .sv-cta-desc {
  color: var(--muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sv-cta-section {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
  }
  
  .sv-cta-button {
    width: 100%;
    max-width: 280px;
  }
}

/* Work navigation arrows */
.work-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.work-nav--prev {
  left: 15px;
}

.work-nav--next {
  right: 15px;
}

.work-nav:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.work-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.95);
}

html[data-theme="dark"] .work-nav {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

html[data-theme="dark"] .work-nav:hover {
  background: rgba(0,0,0,0.9);
}

/* Work grid – horizontal scrolling layout */
.work-grid {
  display: flex;
  gap: 20px;
  padding: 30px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  align-items: center;
  
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.work-grid::-webkit-scrollbar {
  height: 8px;
}

.work-grid::-webkit-scrollbar-track {
  background: transparent;
}

.work-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.work-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

html[data-theme="dark"] .work-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
}

html[data-theme="dark"] .work-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .work-parallax-container {
    height: 400px;
  }
  
  .work-card {
    flex: 0 0 260px;
    height: 340px;
  }
  
  .work-thumb {
    height: 240px;
  }
  
  .work-grid {
    padding: 20px;
    gap: 15px;
  }
  
  .work-scroll-hint {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
}

.work-card{
  display: flex; 
  flex-direction: column;
  flex: 0 0 300px; /* Fixed width for horizontal scroll */
  height: 420px; /* Fixed height */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  cursor: pointer;
  margin: 0; /* Ensure no unwanted margins */
  position: relative; /* Ensure consistent positioning */
}

.work-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  border-color: rgba(0,0,0,.15);
}

html[data-theme="dark"] .work-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

html[data-theme="dark"] .work-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

/* Fixed thumb height for horizontal cards */
.work-thumb{
  position: relative;
  height: 320px; /* Most of the card height */
  background: linear-gradient(180deg,#fafafa,#f3f3f7);
  overflow: hidden;
  flex: 1;
}

/* Stronger rules to beat global img { width:100% } etc. */
.work-thumb img{
  position:absolute; inset:0;
  width:100% !important;
  height:100% !important;
  object-fit: cover;           /* clean fill; switch to 'contain' if you prefer */
  object-position: center top; /* keep the top of long pages visible */
  display:block;
  margin:0;
}

/* If you want NO cropping, add class 'work-grid--contain' to the grid */
.work-grid.work-grid--contain .work-thumb img{ object-fit: contain; }

/* Caption */
.work-cap{
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: .6rem;
  padding: .65rem .8rem;
  font-weight: 600; 
  color: #1b1b1b;
  background: #fff;
}

.work-cap small{ 
  color: var(--muted); 
  font-weight: 600;
}

html[data-theme="dark"] .work-cap {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}

html[data-theme="dark"] .work-cap small {
  color: rgba(255,255,255,0.6);
}

/* Visible error state for any missing file */
.work-card--error .work-thumb{
  background: repeating-linear-gradient(45deg,#f8d3d3,#f8d3d3 8px,#f4bcbc 8px,#f4bcbc 16px);
}
.work-card--error .work-cap span::after{
  content:' (missing)'; color:#b33; font-weight:700;
}

/* Enhanced Lightbox */
.work-lightbox {
  border: none; 
  padding: 0; 
  margin: auto;
  width: min(85vw, 900px);
  max-height: 80vh;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 
    0 25px 80px rgba(0,0,0,.2),
    0 10px 40px rgba(0,0,0,.1);
  overflow: hidden;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Responsive lightbox sizing */
@media (max-width: 1200px) {
  .work-lightbox {
    width: min(90vw, 800px);
    max-height: 75vh;
    top: 55%;
  }
}

@media (max-width: 768px) {
  .work-lightbox {
    width: 95vw;
    max-height: 80vh;
    top: 50%;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .work-lightbox {
    width: 98vw;
    max-height: 85vh;
    top: 50%;
    border-radius: var(--radius-md);
  }
}

.work-lightbox::backdrop { 
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}

html[data-theme="dark"] .work-lightbox {
  background: rgba(20, 25, 35, 0.95);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 
    0 25px 80px rgba(0,0,0,.4),
    0 10px 40px rgba(0,0,0,.2);
}

.work-lightbox img { 
  display: block; 
  width: 100%; 
  height: auto;
  max-height: 65vh;
  object-fit: contain;
  object-position: center top;
}

.work-lightbox__cap { 
  padding: 16px 20px;
  color: #2a2a2a;
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  text-align: center;
}

/* Responsive image and caption adjustments */
@media (max-width: 1200px) {
  .work-lightbox img {
    max-height: 60vh;
  }
  
  .work-lightbox__cap {
    font-size: 0.95rem;
    padding: 14px 18px;
  }
}

@media (max-width: 768px) {
  .work-lightbox img {
    max-height: 65vh;
  }
  
  .work-lightbox__cap {
    font-size: 0.9rem;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .work-lightbox img {
    max-height: 70vh;
  }
  
  .work-lightbox__cap {
    font-size: 0.85rem;
    padding: 10px 14px;
  }
}

html[data-theme="dark"] .work-lightbox__cap {
  background: rgba(20, 25, 35, 0.95);
  color: rgba(255,255,255,0.9);
  border-top-color: rgba(255,255,255,0.1);
}

.work-lightbox__close {
  position: absolute; 
  top: 12px; 
  right: 12px;
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: 
    background 0.3s ease, 
    transform 0.2s ease,
    box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 10;
}

/* Responsive close button */
@media (max-width: 768px) {
  .work-lightbox__close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .work-lightbox__close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

.work-lightbox__close:hover {
  background: rgba(0,0,0,0.9);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .work-lightbox__close {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}

html[data-theme="dark"] .work-lightbox__close:hover {
  background: rgba(255,255,255,0.3);
  color: white;
}

/* Lightbox Animation States */
.work-lightbox[open] {
  animation: lightboxFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Loading state for images */
.work-lightbox img {
  transition: opacity 0.3s ease;
}

.work-lightbox img[src=""] {
  opacity: 0;
}

/* Focus states for accessibility */
.work-lightbox__close:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* CTA row */
.work-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:14px; }
.work-cta .btn{ flex:1 1 auto; min-width:140px; }

/* Small corner badge for prototype shots */
.work-badge{
  position:absolute; top:.6rem; left:.6rem;
  padding:.25rem .5rem;
  font-size:.75rem; font-weight:600;
  color:#0b5;                      /* calm green text */
  background:rgba(255,255,255,.9); /* subtle white chip */
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  pointer-events:none;             /* don’t block clicks */
}
.work-thumb{ position:relative; }        /* you already have this */
.work-thumb img{ position:absolute; inset:0; z-index:1; }  /* add z-index */
.work-badge{
  position:absolute; top:.6rem; left:.6rem;
  z-index:2;                                /* <-- key */
  padding:.25rem .5rem; font-size:.75rem; font-weight:600;
  color:#0b5; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08); border-radius:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
/* privacy.css — light polish */
.page-privacy .policy-hero h1{ letter-spacing:.2px; }
.page-privacy a:hover{ text-decoration:underline; }
.page-privacy .toc a:hover{ text-decoration:underline; color:var(--brand-2); }

.back-home{ margin: 8px 0 18px; }
.back-home .btn{ gap:.4rem; }

/* ========= THEME TOKENS - DARK MODE ========= */
:root,
:root[data-theme="light"]{
  /* neutrals */
  --bg-0:#ffffff;
  --bg-1:#fbf9ff;
  --surface:#ffffff;      /* cards/forms */
  --surface-2:#ffffff;    /* header/footer if you want whiter */
  --ink:#121212;
  --muted:#666b73;
  --border:rgba(0,0,0,.10);
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 10px 28px rgba(0,0,0,.14);
}

/* Dark theme — scoped, opt-in */
:root[data-theme="dark"]{
  /* neutrals tuned for readability with enhanced gradients */
  --bg-0:#0f1116;
  --bg-1:#0a0d14;
  --surface:#151925;      /* cards/forms - slightly warmer */
  --surface-2:#111520;    /* header/footer, overlays - deeper */
  --ink:#eaf0f7;          /* slightly brighter text */
  --muted:#a9b5c6;        /* improved contrast */
  --border:rgba(255,255,255,.14);  /* more visible borders */
  --shadow-sm:0 3px 10px rgba(0,0,0,.6);
  --shadow-md:0 15px 40px rgba(0,0,0,.65);
}

/* ======= GLOBAL APPLICATION ======= */
html, body{
  background: var(--bg-0);
  color: var(--ink);
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* soft page glow (works in both themes) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% 8%, color-mix(in oklab, var(--magenta) 8%, transparent), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, color-mix(in oklab, var(--orange) 6%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

/* Enhanced dark mode gradient overlay */
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(1200px 700px at 15% 12%, color-mix(in oklab, var(--magenta) 15%, transparent), transparent 55%),
    radial-gradient(1000px 600px at 88% 15%, color-mix(in oklab, var(--orange) 12%, transparent), transparent 60%),
    radial-gradient(800px 400px at 50% 85%, color-mix(in oklab, var(--magenta) 8%, transparent), transparent 70%),
    radial-gradient(600px 300px at 25% 60%, color-mix(in oklab, #4a90e2 6%, transparent), transparent 75%),
    linear-gradient(135deg, var(--bg-0) 0%, color-mix(in oklab, var(--bg-1) 85%, #1a1f2e) 25%, var(--bg-1) 50%, color-mix(in oklab, var(--bg-0) 90%, #0a0c11) 75%, var(--bg-0) 100%),
    linear-gradient(45deg, transparent 0%, color-mix(in oklab, var(--magenta) 2%, transparent) 50%, transparent 100%);
  animation: darkGradientShift 20s ease-in-out infinite;
}

/* Subtle animation for dark mode background */
@keyframes darkGradientShift {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg); 
  }
  25% { 
    opacity: 0.9; 
    transform: scale(1.02) rotate(0.5deg); 
  }
  50% { 
    opacity: 0.95; 
    transform: scale(1.01) rotate(-0.3deg); 
  }
  75% { 
    opacity: 0.85; 
    transform: scale(1.03) rotate(0.2deg); 
  }
}

/* Enhanced Header / mobile overlay for dark mode */
:root[data-theme="dark"] .site-header{
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface-2) 85%, #1a1f2e) 0%,
      color-mix(in oklab, var(--surface-2) 90%, transparent) 25%,
      color-mix(in oklab, var(--surface-2) 95%, #0f141d) 50%,
      color-mix(in oklab, var(--surface-2) 88%, transparent) 75%,
      color-mix(in oklab, var(--surface-2) 92%, #141824) 100%
    ),
    radial-gradient(ellipse 800px 200px at 50% 0%, 
      color-mix(in oklab, var(--magenta) 8%, transparent) 0%, 
      transparent 70%
    );
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, var(--magenta));
  box-shadow: 
    var(--shadow-sm),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 15%, transparent) inset,
    0 -1px 0 0 color-mix(in oklab, var(--border) 50%, transparent) inset;
  backdrop-filter: saturate(140%) blur(12px);
}

:root[data-theme="dark"] #mobileNav{ 
  background: 
    linear-gradient(135deg, 
      #0f1116 0%,
      #1a1f2e 15%,
      #0f1421 35%,
      #1e2332 55%,
      #0a0f1a 75%,
      #151b28 100%
    );
  box-shadow: 
    0 4px 20px rgba(0,0,0,.7),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 10%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px) saturate(140%);
}

/* Dark theme mobile navigation settings */
:root[data-theme="dark"] .mobile-nav-settings {
  border-bottom-color: rgba(255,255,255,.1);
}

:root[data-theme="dark"] .mobile-nav-settings .lang-toggle,
:root[data-theme="dark"] .mobile-nav-settings .mobile-theme-toggle {
  background: rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

:root[data-theme="dark"] .mobile-nav-settings .lang-toggle:hover,
:root[data-theme="dark"] .mobile-nav-settings .mobile-theme-toggle:hover {
  background: rgba(255,0,204,.15);
  border-color: rgba(255,0,204,.4);
  box-shadow: 0 6px 20px rgba(255,0,204,.25);
}

/* Dark mode for mobile nav language toggle */
:root[data-theme="dark"] #mobileNav .lang-toggle {
  background: rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.15);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

:root[data-theme="dark"] #mobileNav .lang-toggle:hover {
  background: rgba(255,0,204,.15);
  border-color: rgba(255,0,204,.4);
  box-shadow: 0 6px 20px rgba(255,0,204,.25);
}

/* Enhanced Links in header */
:root[data-theme="dark"] .site-header .nav-link{ 
  color: var(--ink); 
  transition: all 0.3s ease;
}
:root[data-theme="dark"] .site-header .nav-link:hover{ 
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 12%, transparent) 0%,
      color-mix(in oklab, var(--ink) 8%, transparent) 50%,
      color-mix(in oklab, var(--orange) 6%, transparent) 100%
    );
  color: color-mix(in oklab, var(--ink) 95%, #fff);
  border-radius: 8px;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(142, 68, 173, 0.15);
}

/* Enhanced Buttons for Dark Mode */
:root[data-theme="dark"] .btn{
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface) 95%, #fff) 0%,
      var(--surface) 50%,
      color-mix(in oklab, var(--surface) 90%, #1a1f2e) 100%
    );
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--magenta));
  box-shadow: 
    var(--shadow-sm),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 8%, transparent) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] .btn:hover{
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface) 98%, #fff) 0%,
      color-mix(in oklab, var(--surface) 95%, #fff) 50%,
      color-mix(in oklab, var(--surface) 85%, #1a1f2e) 100%
    );
  border-color: var(--magenta);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(0,0,0,.6),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 12%, transparent) inset,
    0 1px 1px 0 rgba(255,255,255,.1) inset;
}

:root[data-theme="dark"] .btn--primary{
  background: 
    linear-gradient(135deg, 
      var(--magenta) 0%,
      color-mix(in oklab, var(--magenta) 90%, var(--orange)) 35%,
      color-mix(in oklab, var(--magenta) 85%, #000) 70%,
      color-mix(in oklab, var(--magenta) 95%, var(--orange)) 100%
    );
  color: #fff;
  border-color: transparent;
  box-shadow: 
    0 12px 32px color-mix(in oklab, var(--magenta) 25%, transparent),
    0 6px 18px color-mix(in oklab, var(--orange) 20%, transparent),
    0 2px 0 0 color-mix(in oklab, #fff 15%, transparent) inset;
}

:root[data-theme="dark"] .btn--primary:hover{
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 95%, #fff) 0%,
      color-mix(in oklab, var(--magenta) 85%, var(--orange)) 35%,
      color-mix(in oklab, var(--magenta) 90%, #000) 70%,
      var(--magenta) 100%
    );
  transform: translateY(-3px);
  box-shadow: 
    0 16px 40px color-mix(in oklab, var(--magenta) 30%, transparent),
    0 8px 24px color-mix(in oklab, var(--orange) 25%, transparent),
    0 3px 0 0 color-mix(in oklab, #fff 20%, transparent) inset,
    0 1px 1px 0 rgba(255,255,255,.3) inset;
  filter: brightness(1.05) saturate(1.1);
}

/* Header nav-cta button - match hero section styling */
:root[data-theme="dark"] .site-header .nav-cta {
  background: 
    linear-gradient(135deg, 
      var(--magenta) 0%,
      color-mix(in oklab, var(--magenta) 85%, var(--orange)) 25%,
      color-mix(in oklab, var(--magenta) 90%, #ff0066) 50%,
      color-mix(in oklab, var(--magenta) 95%, var(--orange)) 75%,
      var(--magenta) 100%
    );
  box-shadow: 
    0 12px 28px color-mix(in oklab, var(--magenta) 25%, transparent),
    0 6px 16px color-mix(in oklab, var(--orange) 20%, transparent),
    0 2px 0 0 color-mix(in oklab, #fff 15%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--magenta) 80%, #fff) inset;
}

:root[data-theme="dark"] .site-header .nav-cta:hover {
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 95%, #fff) 0%,
      color-mix(in oklab, var(--magenta) 80%, var(--orange)) 25%,
      color-mix(in oklab, var(--magenta) 85%, #ff0066) 50%,
      color-mix(in oklab, var(--magenta) 90%, var(--orange)) 75%,
      color-mix(in oklab, var(--magenta) 95%, #fff) 100%
    );
  transform: translateY(-2px);
  box-shadow: 
    0 14px 32px color-mix(in oklab, var(--magenta) 30%, transparent),
    0 8px 20px color-mix(in oklab, var(--orange) 25%, transparent),
    0 3px 0 0 color-mix(in oklab, #fff 20%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--magenta) 85%, #fff) inset;
  filter: brightness(1.05) saturate(1.1);
}

:root[data-theme="dark"] .btn--outline{ 
  background: transparent; 
  border: 2px solid color-mix(in oklab, var(--magenta) 60%, var(--border));
  color: var(--ink);
}

:root[data-theme="dark"] .btn--outline:hover{
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 8%, transparent) 0%,
      color-mix(in oklab, var(--orange) 5%, transparent) 50%,
      color-mix(in oklab, var(--magenta) 12%, transparent) 100%
    );
  border-color: var(--magenta);
  color: color-mix(in oklab, var(--ink) 95%, #fff);
  box-shadow: 
    0 8px 24px color-mix(in oklab, var(--magenta) 15%, transparent),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 10%, transparent) inset;
}

:root[data-theme="dark"] .btn--ghost{ 
  background: transparent; 
  color: var(--ink); 
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

:root[data-theme="dark"] .btn--ghost:hover{
  background: color-mix(in oklab, var(--magenta) 6%, transparent);
  color: color-mix(in oklab, var(--ink) 95%, #fff);
  border-color: color-mix(in oklab, var(--magenta) 40%, var(--border));
}

/* Chips / tags */
.chip, .sv-tab, .checks label{
  background: var(--surface);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}

/* Cards & panels */
.sv-card, .sv-tier, .sv-price, .about-wrap,
.form, .thanks, .contact-form,
.plan, .plan--skeleton,
.sv-quote, .sv-pay-item,
.review-pill, .sv-price, .sv-grid .sv-card,
.work-card{
  background: var(--surface);
  border:1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

/* Work gallery caption */
.work-cap{ background: var(--surface); color: var(--ink); }
.work-thumb{ background: color-mix(in oklab, var(--ink) 4%, var(--surface)); }

/* Forms/inputs */
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field select,
.field textarea,
.contact-form input,
.contact-form textarea{
  background: var(--surface);
  color: var(--ink);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.field input::placeholder,
.field textarea::placeholder{ color: color-mix(in oklab, var(--muted) 80%, transparent); }

:root[data-theme="dark"] .hero-video__overlay{ background: none !important; }
:root[data-theme="dark"] .hero-video{ filter: brightness(1.02) contrast(1.02) saturate(1.06); }

/* Reviews ticker & footer */
.reviews-ticker{
  background: var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.site-footer{
  background: var(--surface-2);
  color: var(--ink);
  border-top:1px solid var(--border);
}

/* Mobile menu button & language button */
.nav-toggle, .lang-toggle{
  background: var(--surface);
  color: var(--ink);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Prototype badge stays readable */
.work-badge{
  background: color-mix(in oklab, var(--surface) 88%, #fff);
  border:1px solid var(--border);
  color: var(--magenta);
}

/* Respect OS form controls & scrollbars */
:root[data-theme="dark"]{ color-scheme: dark; }

/* ===============================
   DARK THEME POLISH — PATCH
   =============================== */
:root[data-theme="dark"]{
  /* tune neutrals just a hair brighter for readability */
  --surface: #151a25;
  --surface-2:#101621;
  --ink:#e9eef4;
  --muted:#a9b5c6;
  --border:rgba(255,255,255,.14);
}

/* Enhanced Header + footer logos with gradient styling */
:root[data-theme="dark"] .brand .brand-badge,
:root[data-theme="dark"] .brand .brand-link,
:root[data-theme="dark"] .footer-logo-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, #ffffff 85%, #1a1a1a) 0%,
      color-mix(in oklab, #ffffff 82%, var(--magenta)) 20%,
      color-mix(in oklab, #ffffff 80%, var(--orange)) 40%,
      color-mix(in oklab, #ffffff 85%, #1a1a1a) 60%,
      color-mix(in oklab, #ffffff 83%, var(--magenta)) 80%,
      color-mix(in oklab, #ffffff 85%, #1a1a1a) 100%
    ),
    radial-gradient(ellipse at top left, 
      color-mix(in oklab, var(--magenta) 12%, rgba(0,0,0,0.1)) 0%,
      transparent 60%
    ),
    radial-gradient(ellipse at bottom right, 
      color-mix(in oklab, var(--orange) 10%, rgba(0,0,0,0.08)) 0%,
      transparent 60%
    );
  padding:8px 12px;
  border-radius:16px;
  border:2px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow:
    0 8px 24px rgba(0,0,0,.6),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 15%, rgba(0,0,0,0.2)) inset,
    0 1px 1px 0 rgba(255,255,255,.6) inset;
  transition: all 0.3s ease;
}

:root[data-theme="dark"] .brand .brand-link::before,
:root[data-theme="dark"] .footer-logo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(135deg, 
    color-mix(in oklab, var(--magenta) 60%, rgba(0,0,0,0.4)) 0%,
    color-mix(in oklab, var(--magenta) 50%, var(--orange)) 25%,
    color-mix(in oklab, var(--orange) 45%, var(--magenta)) 50%,
    color-mix(in oklab, var(--magenta) 55%, var(--orange)) 75%,
    color-mix(in oklab, var(--magenta) 60%, rgba(0,0,0,0.4)) 100%
  );
  border-radius: 16px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  z-index: -1;
}

:root[data-theme="dark"] .brand .brand-badge:hover,
:root[data-theme="dark"] .brand .brand-link:hover,
:root[data-theme="dark"] .footer-logo-wrap:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(0,0,0,.7),
    0 8px 20px color-mix(in oklab, var(--magenta) 20%, rgba(0,0,0,0.3)),
    0 3px 0 0 color-mix(in oklab, var(--magenta) 18%, rgba(0,0,0,0.2)) inset,
    0 1px 1px 0 rgba(255,255,255,.7) inset;
}

:root[data-theme="dark"] .brand .brand-badge:hover::before,
:root[data-theme="dark"] .brand .brand-link:hover::before,
:root[data-theme="dark"] .footer-logo-wrap:hover::before {
  background: linear-gradient(135deg, 
    color-mix(in oklab, var(--magenta) 70%, rgba(0,0,0,0.2)) 0%,
    color-mix(in oklab, var(--magenta) 65%, var(--orange)) 25%,
    color-mix(in oklab, var(--orange) 60%, var(--magenta)) 50%,
    color-mix(in oklab, var(--magenta) 70%, var(--orange)) 75%,
    color-mix(in oklab, var(--magenta) 70%, rgba(0,0,0,0.2)) 100%
  );
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .footer-logo{ filter:none; } /* keep logo crisp */

:root[data-theme="dark"] .logo-tagline {
  color: var(--magenta);
  opacity: 0.9;
}

/* Enhanced Dark Mode Footer */
:root[data-theme="dark"] .site-footer {
  background: 
    linear-gradient(135deg, 
      #0f1116 0%, 
      color-mix(in oklab, #0f1116 95%, var(--magenta)) 25%,
      #0f1116 50%,
      color-mix(in oklab, #0f1116 92%, var(--orange)) 75%,
      #0b0d12 100%
    );
  color: rgba(255,255,255,0.9);
  border-top-color: rgba(255,255,255,0.1);
}

:root[data-theme="dark"] .site-footer::before {
  background: 
    radial-gradient(800px 400px at 20% 10%, rgba(255,0,204,.08), transparent 70%),
    radial-gradient(600px 300px at 80% 90%, rgba(204,85,0,.06), transparent 70%);
}

:root[data-theme="dark"] .footer-name,
:root[data-theme="dark"] .footer-title {
  color: rgba(255,255,255,0.95);
}

:root[data-theme="dark"] .footer-loc,
:root[data-theme="dark"] .footer-kvk {
  color: rgba(255,255,255,0.6);
}

/* Dark mode intake form - blend with background */
:root[data-theme="dark"] .form {
  background: linear-gradient(135deg,
    rgba(15,17,22,0.95) 0%,
    rgba(25,30,40,0.90) 25%,
    rgba(20,25,35,0.92) 50%,
    rgba(30,35,45,0.88) 75%,
    rgba(22,27,37,0.94) 100%
  );
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 40px rgba(16,185,129,0.08),
    0 0 60px rgba(217,119,64,0.06);
  backdrop-filter: blur(20px) saturate(120%);
}

:root[data-theme="dark"] .form:hover {
  box-shadow: 
    0 25px 80px rgba(0,0,0,0.5),
    0 12px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 50px rgba(16,185,129,0.12),
    0 0 80px rgba(217,119,64,0.08);
  transform: translateY(-2px);
}

/* Dark mode contact form */
:root[data-theme="dark"] .contact-form {
  background: rgba(20,25,35,0.8);
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
}

:root[data-theme="dark"] .contact-form:hover {
  background: rgba(20,25,35,0.9);
  box-shadow:
    0 25px 50px rgba(0,0,0,.4),
    0 10px 20px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .contact-form label {
  color: rgba(255,255,255,0.9);
}

:root[data-theme="dark"] .contact-form input[type="text"],
:root[data-theme="dark"] .contact-form input[type="email"],
:root[data-theme="dark"] .contact-form textarea {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  box-shadow:
    0 4px 8px rgba(0,0,0,.2),
    inset 0 1px 2px rgba(0,0,0,.1);
}

:root[data-theme="dark"] .contact-form input::placeholder,
:root[data-theme="dark"] .contact-form textarea::placeholder {
  color: rgba(255,255,255,0.4);
}

:root[data-theme="dark"] .contact-form input:focus,
:root[data-theme="dark"] .contact-form textarea:focus {
  background: rgba(255,255,255,0.12);
  border-color: var(--magenta);
  box-shadow:
    0 6px 12px rgba(0,0,0,.3),
    0 0 0 3px rgba(255,0,204,.2);
}

:root[data-theme="dark"] .contact-form .fine-print {
  color: rgba(255,255,255,0.5);
}

/* Dark mode footer links */
:root[data-theme="dark"] .footer-links a {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

:root[data-theme="dark"] .footer-links a:hover {
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
}

/* Dark mode social icons */
:root[data-theme="dark"] .footer-social .social {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  box-shadow:
    0 6px 12px rgba(0,0,0,.3),
    0 2px 4px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .footer-social .social:hover {
  background: var(--brand-grad);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(255,0,204,.3), 
    0 6px 16px rgba(204,85,0,.25);
}

/* Dark mode bottom bar */
:root[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}

/* 2) Hero (left side) – enhanced dark gradient with ray of light */
:root[data-theme="dark"] .hero-left{
  background:
    /* Burnt orange accent from top-right */
    radial-gradient(1000px 700px at 85% 20%, 
      rgba(217,119,64,0.10) 0%, 
      rgba(191,87,32,0.07) 35%,
      rgba(255,140,80,0.05) 60%,
      transparent 80%
    ),
    /* Visible emerald accent from bottom-left */
    radial-gradient(1200px 800px at 10% 90%, 
      rgba(16,185,129,0.12) 0%, 
      rgba(5,150,105,0.08) 40%,
      transparent 70%
    ),
    /* Ray of light effect */
    conic-gradient(from 315deg at 20% 15%, 
      transparent 0deg, 
      rgba(255,255,255,0.06) 30deg, 
      rgba(255,0,204,0.08) 60deg,
      rgba(255,255,255,0.04) 90deg,
      transparent 120deg,
      transparent 360deg
    ),
    /* Subtle light beam */
    linear-gradient(135deg, 
      rgba(255,255,255,0.08) 0%, 
      transparent 20%, 
      transparent 80%, 
      rgba(255,0,204,0.06) 100%
    ),
    /* Original brand gradients */
    radial-gradient(900px 480px at 16% 10%, rgba(255,0,204,.12), transparent 60%),
    radial-gradient(900px 520px at 0% 95%,  rgba(204,85,0,.10), transparent 65%),
    /* Base dark gradient */
    linear-gradient(180deg,#0f1116, #0b0d12);
}
/* Enhanced hero divider with light ray effect */
:root[data-theme="dark"] .hero-split::before {
  background: linear-gradient(to bottom, 
    rgba(255,255,255,.2), 
    rgba(255,0,204,.15) 30%,
    rgba(255,255,255,.08) 50%, 
    rgba(204,85,0,.12) 70%,
    rgba(255,255,255,.2)
  );
  filter: blur(.5px);
  box-shadow: 
    0 0 20px rgba(255,0,204,.1),
    0 0 40px rgba(255,255,255,.05);
}

:root[data-theme="dark"] .hero__title{ color:var(--ink); opacity:1; text-shadow:none; }
:root[data-theme="dark"] .hero__tag{ color:var(--muted); }

:root[data-theme="dark"] .hero__brief input{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
}
:root[data-theme="dark"] .hero__brief input::placeholder{ color:color-mix(in oklab, var(--muted) 85%, transparent); }

/* Enhanced Hero Section Buttons */
:root[data-theme="dark"] .hero-left .btn {
  font-weight: 700;
  letter-spacing: 0.025em;
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .hero-left .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transition: left 0.5s ease;
}

:root[data-theme="dark"] .hero-left .btn:hover::before {
  left: 100%;
}

:root[data-theme="dark"] .hero-left .btn--primary {
  --h: 52px;
  font-size: 1.05rem;
  background: 
    linear-gradient(135deg, 
      var(--magenta) 0%,
      color-mix(in oklab, var(--magenta) 85%, var(--orange)) 25%,
      color-mix(in oklab, var(--magenta) 90%, #ff0066) 50%,
      color-mix(in oklab, var(--magenta) 95%, var(--orange)) 75%,
      var(--magenta) 100%
    );
  box-shadow: 
    0 15px 35px color-mix(in oklab, var(--magenta) 30%, transparent),
    0 8px 20px color-mix(in oklab, var(--orange) 25%, transparent),
    0 3px 0 0 color-mix(in oklab, #fff 20%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--magenta) 80%, #fff) inset;
}

:root[data-theme="dark"] .hero-left .btn--primary:hover {
  --h: 52px;
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 95%, #fff) 0%,
      color-mix(in oklab, var(--magenta) 80%, var(--orange)) 25%,
      color-mix(in oklab, var(--magenta) 85%, #ff0066) 50%,
      color-mix(in oklab, var(--magenta) 90%, var(--orange)) 75%,
      color-mix(in oklab, var(--magenta) 95%, #fff) 100%
    );
  transform: translateY(-4px);
  box-shadow: 
    0 20px 45px color-mix(in oklab, var(--magenta) 35%, transparent),
    0 12px 28px color-mix(in oklab, var(--orange) 30%, transparent),
    0 4px 0 0 color-mix(in oklab, #fff 25%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--magenta) 60%, #fff) inset,
    0 2px 4px 0 rgba(255,255,255,.2) inset;
  filter: brightness(1.08) saturate(1.15);
}

:root[data-theme="dark"] .hero-left .btn--outline {
  --h: 52px;
  font-size: 1.05rem;
  border: 2px solid color-mix(in oklab, var(--magenta) 70%, var(--border));
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface) 95%, rgba(255,255,255,.05)) 0%,
      color-mix(in oklab, var(--surface) 85%, rgba(255,255,255,.02)) 100%
    );
  backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .hero-left .btn--outline:hover {
  --h: 52px;
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 12%, var(--surface)) 0%,
      color-mix(in oklab, var(--orange) 8%, var(--surface)) 50%,
      color-mix(in oklab, var(--magenta) 15%, var(--surface)) 100%
    );
  border-color: var(--magenta);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 32px color-mix(in oklab, var(--magenta) 20%, transparent),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 15%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--magenta) 30%, transparent) inset;
}

/* 3) Services tabs – enhanced styling for dark mode */
:root[data-theme="dark"] .sv-tab{
  background:linear-gradient(135deg, var(--surface) 0%, color-mix(in oklab, var(--surface) 90%, #fff) 100%);
  color:var(--ink);
  border:2px solid var(--border);
  box-shadow:0 3px 12px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .sv-tab:hover,
:root[data-theme="dark"] .sv-tab:focus-visible{
  border-color:var(--magenta);
  background:linear-gradient(135deg, color-mix(in oklab, var(--surface) 90%, #fff) 0%, var(--surface) 100%);
  box-shadow:0 5px 18px rgba(142, 68, 173, .2);
  color:var(--ink);
}
:root[data-theme="dark"] .sv-tab.is-active{
  background:linear-gradient(135deg, var(--magenta) 0%, color-mix(in oklab, var(--magenta) 85%, #000) 100%);
  color:#fff;
  border-color:var(--magenta);
  box-shadow:0 6px 20px rgba(142, 68, 173, .4);
}

/* 4) “Only pay for what you need” list – make dividers visible */
:root[data-theme="dark"] .sv-menu li{
  border-bottom:1px dashed rgba(255,255,255,.22);
}

/* 5) Ciao Mama Codes block – correct surface + buttons */
:root[data-theme="dark"] .about-blog{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  color:var(--ink);
}
:root[data-theme="dark"] .about-cta .btn{ color:var(--ink); border-color:var(--border); }
:root[data-theme="dark"] .about-cta .btn--ghost{ color:#e9eef4; border-color:rgba(255,255,255,.22); }

/* 6) Client reviews – brighten cards & text */
:root[data-theme="dark"] .reviews-ticker{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .review-pill{
  background:#161c28;
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  color:var(--ink);
}
:root[data-theme="dark"] .review-text{ color:#f1f5fb; }
:root[data-theme="dark"] .review-source{ color:var(--muted); }
:root[data-theme="dark"] .review-stars{ color:var(--magenta); }

/* Extras: primary/ghost/outline buttons & chips keep contrast in dark */
:root[data-theme="dark"] .btn{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
}
:root[data-theme="dark"] .btn--outline{ background:transparent; }
:root[data-theme="dark"] .btn--ghost{ background:transparent; color:var(--ink); }
/* Enhanced Chip Buttons (Bakery, Artist, Clinic, Coach, Shop) for Dark Mode */
:root[data-theme="dark"] .chip {
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface) 90%, #1a1f2e) 0%,
      color-mix(in oklab, var(--surface) 95%, rgba(255,255,255,.05)) 30%,
      var(--surface) 70%,
      color-mix(in oklab, var(--surface) 85%, #0f141d) 100%
    );
  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--magenta));
  color: var(--ink);
  box-shadow: 
    0 3px 10px rgba(0,0,0,.4),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 6%, transparent) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-weight: 600;
}

:root[data-theme="dark"] .chip::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(142, 68, 173, 0.1), transparent);
  transition: left 0.4s ease;
}

:root[data-theme="dark"] .chip:hover::before {
  left: 100%;
}

:root[data-theme="dark"] .chip:hover {
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 12%, var(--surface)) 0%,
      color-mix(in oklab, var(--surface) 98%, rgba(255,255,255,.08)) 30%,
      color-mix(in oklab, var(--orange) 8%, var(--surface)) 70%,
      color-mix(in oklab, var(--magenta) 10%, var(--surface)) 100%
    );
  border-color: var(--magenta);
  color: color-mix(in oklab, var(--ink) 95%, #fff);
  transform: translateY(-2px);
  box-shadow: 
    0 6px 18px color-mix(in oklab, var(--magenta) 15%, rgba(0,0,0,.4)),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 12%, transparent) inset,
    0 1px 1px 0 rgba(255,255,255,.08) inset;
}

:root[data-theme="dark"] .chip:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px color-mix(in oklab, var(--magenta) 20%, rgba(0,0,0,.5)),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 15%, transparent) inset;
}

:root[data-theme="dark"] .checks label{ 
  background: var(--surface); 
  border: 1px solid var(--border); 
  color: var(--ink); 
}

/* Work gallery caption & badge contrast */
:root[data-theme="dark"] .work-cap{ background:var(--surface); color:var(--ink); }
:root[data-theme="dark"] .work-badge{ background:#fff; color:var(--magenta); border-color:rgba(255,255,255,.28); }

/* Disabled buttons (e.g., "See services") still legible */
:root[data-theme="dark"] .btn[disabled],
:root[data-theme="dark"] .btn:disabled{
  opacity:.6; color:#cfd6e3; border-color:rgba(255,255,255,.18);
}

/* Enhanced Dark Mode FAQ Styling */
:root[data-theme="dark"] .sv-faq details{
  background: linear-gradient(135deg, 
    rgba(21, 25, 37, 0.9) 0%, 
    rgba(15, 17, 22, 0.95) 100%
  );
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .sv-faq details::before {
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(99, 102, 241, 0.06) 25%, 
    transparent 50%, 
    rgba(139, 92, 246, 0.04) 75%, 
    transparent 100%
  );
}

:root[data-theme="dark"] .sv-faq details + details{ 
  margin-top: 12px; 
}

:root[data-theme="dark"] .sv-faq details:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  border-color: rgba(99, 102, 241, 0.2);
}

:root[data-theme="dark"] .sv-faq details[open]{
  background: linear-gradient(135deg, 
    rgba(21, 25, 37, 0.95) 0%, 
    rgba(26, 32, 48, 0.98) 100%
  );
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.2);
}

:root[data-theme="dark"] .sv-faq summary{
  color: var(--ink);
  font-weight: 700;
  padding: 1.2rem 1.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

:root[data-theme="dark"] .sv-faq summary:hover {
  background: rgba(99, 102, 241, 0.08);
  color: rgba(139, 92, 246, 0.95);
}

:root[data-theme="dark"] .sv-faq summary:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.8);
  outline-offset: 2px;
}

:root[data-theme="dark"] .sv-faq p{
  color: var(--muted);
  margin: 0 1.5rem 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Enhanced marker visibility for dark mode */
:root[data-theme="dark"] .sv-faq summary::-webkit-details-marker{ 
  color: rgba(139, 92, 246, 0.8); 
}
:root[data-theme="dark"] .sv-faq summary::marker{ 
  color: rgba(139, 92, 246, 0.8); 
}
/* Offscreen sections don’t render until scrolled into view */
.section, .site-footer, .reviews-ticker, .work-grid { content-visibility: auto; contain-intrinsic-size: 800px; }

/* Avoid jank in cards: */
.work-thumb { aspect-ratio: 4 / 3; }  /* or keep your fixed height */

/* Keep the floating pill visible above the overlay */
.theme-toggle{ z-index:10050; }

/* Position the mobile copy inside the overlay neatly */
#mobileNav #themeToggleMobile{
  position:absolute;
  top:12px; right:60px;
  width:55px; height:55px;
  border-radius:999px;
}

/* Scope reset for the header version of the theme button */
.site-header .theme-toggle{
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  z-index: auto !important;

  /* match the other round icon buttons */
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
}

/* Kill the FAB tooltip on the header button */
.site-header .theme-toggle[data-label]:hover::after,
.site-header .theme-toggle:focus-visible::after{
  content: none !important;
}

/* Enhanced dark mode styling for navbar buttons */
:root[data-theme="dark"] .site-header .theme-toggle,
:root[data-theme="dark"] .site-header .lang-toggle {
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--surface) 90%, #1a1f2e) 0%,
      var(--surface) 50%,
      color-mix(in oklab, var(--surface) 85%, #0f141d) 100%
    );
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--magenta));
  color: var(--ink);
  box-shadow: 
    0 2px 8px rgba(0,0,0,.4),
    0 1px 0 0 color-mix(in oklab, var(--magenta) 8%, transparent) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] .site-header .theme-toggle:hover,
:root[data-theme="dark"] .site-header .lang-toggle:hover {
  background: 
    linear-gradient(135deg, 
      color-mix(in oklab, var(--magenta) 15%, var(--surface)) 0%,
      color-mix(in oklab, var(--surface) 95%, #fff) 50%,
      color-mix(in oklab, var(--orange) 8%, var(--surface)) 100%
    );
  border-color: var(--magenta);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 16px rgba(142, 68, 173, 0.25),
    0 2px 0 0 color-mix(in oklab, var(--magenta) 15%, transparent) inset;
}

/* Keep the right cluster on one line and evenly spaced */
.site-nav--right{
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}


/* ======================
   Close buttons – contrast
   ====================== */

/* shared tokens for tiny controls */
:root{
  --ctrl-bg: color-mix(in oklab, var(--ink) 6%, var(--surface-2));
  --ctrl-bg-hover: color-mix(in oklab, var(--ink) 12%, var(--surface-2));
  --ctrl-border: var(--border);
  --ctrl-ink: var(--ink);
}

/* 1) Mobile menu toggle when used as a CLOSE button */
.nav-open #navToggle{
  position: fixed;
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--ctrl-bg);
  border: 1px solid var(--ctrl-border);
  color: var(--ctrl-ink);
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(120%) blur(6px);
}
.nav-open #navToggle:hover{ background: var(--ctrl-bg-hover); }
.nav-open #navToggle:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--magenta) 60%, #fff);
  outline-offset: 2px;
}

/* ensure the bars/X always have solid contrast */
.nav-toggle__bar{ background: currentColor !important; }

/* 2) Gallery / lightbox close button */
.work-lightbox__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius: 12px;
  background: var(--ctrl-bg) !important;
  border: 1px solid var(--ctrl-border) !important;
  color: var(--ctrl-ink);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
}

/* draw a crisp “X” so it’s visible on any background */
.work-lightbox__close::before,
.work-lightbox__close::after{
  content:"";
  position:absolute;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.work-lightbox__close::before{ transform: rotate(45deg); }
.work-lightbox__close::after { transform: rotate(-45deg); }

.work-lightbox__close:hover{ background: var(--ctrl-bg-hover); }
.work-lightbox__close:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--magenta) 60%, #fff);
  outline-offset: 2px;
}

/* dark theme small tune: lift the control plate a touch more */
:root[data-theme="dark"]{
  --ctrl-bg: color-mix(in oklab, #000 24%, var(--surface-2));
  --ctrl-bg-hover: color-mix(in oklab, #000 34%, var(--surface-2));
}

/* Back to top */
.to-top{
  position: fixed;
  right: 14px;
  bottom: 66px;               /* sits above your theme toggle (bottom:14px) */
  z-index: 10100;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 18px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .15s ease, box-shadow .15s ease;
}
.to-top:hover{ box-shadow: var(--shadow-md); transform: translateY(3px); }
.to-top:focus-visible{ outline: 2px solid color-mix(in oklab, var(--magenta) 55%, #fff); outline-offset: 2px; }

.to-top.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
}

/* Dark mode tune */
:root[data-theme="dark"] .to-top{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}

/* Language popover */
.lang-popover {
  position: fixed; 
  z-index: 10000;
  min-width: 180px; 
  padding: 12px;
  border-radius: 16px; 
  border: 1px solid rgba(0,0,0,.08);
  background: var(--popover-bg, rgba(255,255,255,0.95));
  backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 40px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.5) inset;
  animation: langMenuFadeIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes langMenuFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-10px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

@media (max-width: 768px) {
  @keyframes langMenuFadeIn {
    from { 
      opacity: 0; 
      transform: translateX(-50%) translateY(-10px) scale(0.95); 
    }
    to { 
      opacity: 1; 
      transform: translateX(-50%) translateY(0) scale(1); 
    }
  }
}

html[data-theme="dark"] .lang-popover {
  --popover-bg: rgba(26, 32, 48, 0.95); 
  border-color: rgba(255,255,255,.12);
  box-shadow: 
    0 20px 40px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.1) inset;
}

.lang-popover button {
  width: 100%; 
  text-align: left; 
  padding: 12px 16px; 
  border: 0; 
  background: transparent; 
  cursor: pointer;
  border-radius: 12px; 
  font: 500 15px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.lang-popover button:last-child {
  margin-bottom: 0;
}

.lang-popover button:hover, .lang-popover button:focus-visible {
  outline: none; 
  background: rgba(255,0,204,.08);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(255,0,204,.15);
}

html[data-theme="dark"] .lang-popover button:hover,
html[data-theme="dark"] .lang-popover button:focus-visible {
  background: rgba(255,0,204,.12);
}

.lang-popover button[aria-checked="true"] {
  background: rgba(255,0,204,.1);
  color: var(--magenta);
  font-weight: 600;
}

.lang-popover button[aria-checked="true"]::after {
  content: "✓"; 
  font-weight: 700;
  color: var(--magenta);
}

@media (max-width: 768px) {
  .lang-popover {
    min-width: 200px;
    max-width: 280px;
    margin: 0 16px;
  }
  
  .lang-popover button {
    padding: 14px 18px;
    font-size: 16px;
  }
}

.theme-toggle { pointer-events: auto; position: relative; z-index: 2; }
.lang-popover { z-index: 9999; } /* stays on top when open */
@media (max-width: 640px){
  .lang-popover { right: 14px; }
}

/* ==== Client reviews ticker (improved) ==== */
.reviews-ticker{
  position: relative;
  background: #fff;
  border-top:1px solid rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* === Dark-mode fix: Recommended services pills === */
.plan__tags li{
  /* use theme tokens instead of hardcoded white */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Slight lift when dark for better separation */
:root[data-theme="dark"] .plan__tags li{
  background: #1a2030; /* lifted surface */
  color: #fff;         /* or keep var(--ink) if you prefer slightly softer */
  border-color: color-mix(in oklab, var(--magenta) 28%, var(--border));
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}

@media (max-width: 980px) {
  .hero-video {
    height: 140%; /* Elongate the video for smaller screens */
  }
}

#mobileNav .studio-vn-logo {
  display: block;
  margin: 1rem auto 0; /* Center the logo and add spacing */
  width: 100px; /* Adjust size as needed */
  height: auto;
  background: #fff; /* Add white background */
  border-radius: 12px; /* Round corners */
  padding: 8px; /* Add padding inside the background */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Dark mode styling for mobile nav logo */
html[data-theme="dark"] #mobileNav .studio-vn-logo {
  background: rgba(255, 255, 255, 0.9); /* Light background to maintain logo readability */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Softer shadow for dark mode */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border for definition */
}

.lang-toggle {
  background: linear-gradient(135deg, #ff00cc, #ff6600);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.lang-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Enhanced Dark Mode Service Card Styling */

/* Mini Webshop - Sophisticated blue-purple gradient */
:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_shop_title"]) {
  background: linear-gradient(135deg, 
    rgba(66, 90, 180, 0.15) 0%, 
    rgba(120, 80, 200, 0.12) 30%, 
    rgba(40, 60, 150, 0.08) 70%, 
    rgba(30, 45, 120, 0.06) 100%
  );
  border: 1px solid rgba(120, 80, 200, 0.25);
  box-shadow: 
    0 8px 32px rgba(66, 90, 180, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(120, 80, 200, 0.1);
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_shop_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(120, 80, 200, 0.05) 25%, 
    transparent 50%, 
    rgba(66, 90, 180, 0.03) 75%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_shop_title"]) > * {
  position: relative;
  z-index: 2;
}

/* AI Booster - Vibrant teal-cyan gradient */
:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_booster_title"]) {
  background: linear-gradient(135deg, 
    rgba(20, 184, 166, 0.16) 0%, 
    rgba(6, 182, 212, 0.13) 30%, 
    rgba(14, 165, 233, 0.10) 70%, 
    rgba(8, 145, 178, 0.07) 100%
  );
  border: 1px solid rgba(20, 184, 166, 0.28);
  box-shadow: 
    0 10px 40px rgba(20, 184, 166, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(6, 182, 212, 0.12);
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_booster_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(60deg, 
    transparent 0%, 
    rgba(6, 182, 212, 0.06) 30%, 
    transparent 60%, 
    rgba(20, 184, 166, 0.04) 85%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_booster_title"]) > * {
  position: relative;
  z-index: 2;
}

/* AI Smart add-ons - Warm amber-gold gradient */
:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_addons_title"]) {
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.14) 0%, 
    rgba(251, 191, 36, 0.11) 30%, 
    rgba(217, 119, 6, 0.08) 70%, 
    rgba(180, 83, 9, 0.06) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.26);
  box-shadow: 
    0 9px 36px rgba(245, 158, 11, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(251, 191, 36, 0.11);
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_addons_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, 
    transparent 0%, 
    rgba(251, 191, 36, 0.05) 25%, 
    transparent 55%, 
    rgba(245, 158, 11, 0.03) 80%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_addons_title"]) > * {
  position: relative;
  z-index: 2;
}

/* Content Studio - Rich emerald-forest gradient */
:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_content_title"]) {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.15) 0%, 
    rgba(5, 150, 105, 0.12) 25%, 
    rgba(6, 120, 95, 0.09) 60%, 
    rgba(4, 100, 80, 0.07) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.27);
  box-shadow: 
    0 11px 44px rgba(16, 185, 129, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(5, 150, 105, 0.12);
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_content_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(30deg, 
    transparent 0%, 
    rgba(5, 150, 105, 0.06) 20%, 
    transparent 45%, 
    rgba(16, 185, 129, 0.04) 70%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_content_title"]) > * {
  position: relative;
  z-index: 2;
}

/* Hover effects for enhanced service cards */
:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_shop_title"]):hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 48px rgba(66, 90, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(120, 80, 200, 0.15);
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_booster_title"]):hover {
  transform: translateY(-3px);
  box-shadow: 
    0 14px 52px rgba(20, 184, 166, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 0 1px rgba(6, 182, 212, 0.18);
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_addons_title"]):hover {
  transform: translateY(-3px);
  box-shadow: 
    0 13px 50px rgba(245, 158, 11, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(251, 191, 36, 0.16);
}

:root[data-theme="dark"] .sv-card:has(h3[data-i18n="card_content_title"]):hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 54px rgba(16, 185, 129, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 0 1px rgba(5, 150, 105, 0.17);
}

/* Enhanced Light Mode Service Card Styling */

/* Mini Webshop - Elegant blue-lavender gradient */
.sv-card:has(h3[data-i18n="card_shop_title"]) {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.08) 0%, 
    rgba(139, 92, 246, 0.06) 25%, 
    rgba(168, 85, 247, 0.05) 60%, 
    rgba(147, 51, 234, 0.04) 100%
  );
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: 
    0 6px 25px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(139, 92, 246, 0.06);
  position: relative;
  overflow: hidden;
}

.sv-card:has(h3[data-i18n="card_shop_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(139, 92, 246, 0.03) 25%, 
    transparent 50%, 
    rgba(99, 102, 241, 0.02) 75%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sv-card:has(h3[data-i18n="card_shop_title"]) > * {
  position: relative;
  z-index: 2;
}

/* AI Booster - Fresh teal-mint gradient */
.sv-card:has(h3[data-i18n="card_booster_title"]) {
  background: linear-gradient(135deg, 
    rgba(20, 184, 166, 0.09) 0%, 
    rgba(6, 182, 212, 0.07) 25%, 
    rgba(14, 165, 233, 0.06) 60%, 
    rgba(56, 189, 248, 0.05) 100%
  );
  border: 1px solid rgba(20, 184, 166, 0.18);
  box-shadow: 
    0 7px 28px rgba(20, 184, 166, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(6, 182, 212, 0.08);
  position: relative;
  overflow: hidden;
}

.sv-card:has(h3[data-i18n="card_booster_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(60deg, 
    transparent 0%, 
    rgba(6, 182, 212, 0.04) 30%, 
    transparent 60%, 
    rgba(20, 184, 166, 0.03) 85%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sv-card:has(h3[data-i18n="card_booster_title"]) > * {
  position: relative;
  z-index: 2;
}

/* AI Smart add-ons - Warm golden-orange gradient */
.sv-card:has(h3[data-i18n="card_addons_title"]) {
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.08) 0%, 
    rgba(251, 191, 36, 0.06) 25%, 
    rgba(252, 211, 77, 0.05) 60%, 
    rgba(254, 240, 138, 0.04) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.16);
  box-shadow: 
    0 6px 26px rgba(245, 158, 11, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(251, 191, 36, 0.07);
  position: relative;
  overflow: hidden;
}

.sv-card:has(h3[data-i18n="card_addons_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, 
    transparent 0%, 
    rgba(251, 191, 36, 0.03) 25%, 
    transparent 55%, 
    rgba(245, 158, 11, 0.02) 80%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sv-card:has(h3[data-i18n="card_addons_title"]) > * {
  position: relative;
  z-index: 2;
}

/* Content Studio - Vibrant emerald-jade gradient */
.sv-card:has(h3[data-i18n="card_content_title"]) {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.08) 0%, 
    rgba(5, 150, 105, 0.06) 25%, 
    rgba(34, 197, 94, 0.05) 60%, 
    rgba(74, 222, 128, 0.04) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.17);
  box-shadow: 
    0 8px 30px rgba(16, 185, 129, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.93),
    0 0 0 1px rgba(5, 150, 105, 0.08);
  position: relative;
  overflow: hidden;
}

.sv-card:has(h3[data-i18n="card_content_title"])::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(30deg, 
    transparent 0%, 
    rgba(5, 150, 105, 0.04) 20%, 
    transparent 45%, 
    rgba(16, 185, 129, 0.03) 70%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.sv-card:has(h3[data-i18n="card_content_title"]) > * {
  position: relative;
  z-index: 2;
}

/* Light mode hover effects for enhanced service cards */
.sv-card:has(h3[data-i18n="card_shop_title"]):hover {
  transform: translateY(-2px);
  box-shadow: 
    0 10px 40px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(139, 92, 246, 0.10);
  border-color: rgba(99, 102, 241, 0.20);
}

.sv-card:has(h3[data-i18n="card_booster_title"]):hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 45px rgba(20, 184, 166, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    0 0 0 1px rgba(6, 182, 212, 0.12);
  border-color: rgba(20, 184, 166, 0.22);
}

.sv-card:has(h3[data-i18n="card_addons_title"]):hover {
  transform: translateY(-2px);
  box-shadow: 
    0 11px 42px rgba(245, 158, 11, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(251, 191, 36, 0.11);
  border-color: rgba(245, 158, 11, 0.20);
}

.sv-card:has(h3[data-i18n="card_content_title"]):hover {
  transform: translateY(-2px);
  box-shadow: 
    0 13px 48px rgba(16, 185, 129, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(5, 150, 105, 0.12);
  border-color: rgba(16, 185, 129, 0.21);
}

/* === Client Stories (scoped) === */
/* ---- Client Stories layout fixes ---- */
.client-stories .cs-wrap{
  display:flex; 
  gap:24px; 
  align-items:center;
}

/* THEME VARIABLES (defaults) */
#client-stories {
  --cs-left-bg: #ffffff;
  --cs-left-text: #222;
  --cs-left-muted: #555;
  --cs-accent: #7a3cff;
  --cs-accent-glow: rgba(122, 60, 255, 0.3);
  --cs-border: rgba(255, 255, 255, 0.2);
  --cs-title-weight: 800;
  --cs-letter: 0;
  --cs-radius: 24px;
  --cs-left-shadow: 0 20px 60px rgba(0,0,0,.08);
  --cs-pattern: transparent;
  transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced left column with rich visual effects */
.client-stories .cs-left{
  flex:0 0 32%;
  max-width:420px;
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:400px;
  background: var(--cs-left-bg);
  color: var(--cs-left-text);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-left-shadow);
  border: 2px solid var(--cs-border);
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated pattern overlay */
.client-stories .cs-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cs-pattern);
  opacity: 0.03;
  z-index: 1;
  transition: opacity 0.6s ease;
}

/* Dynamic accent stripe */
.client-stories .cs-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--cs-accent) 0%, var(--cs-accent-glow) 100%);
  box-shadow: 0 0 20px var(--cs-accent-glow);
  z-index: 3;
  transition: all 0.6s ease;
}

/* Content container with enhanced styling */
.client-stories .cs-content {
  position: relative;
  z-index: 2;
  padding: 3rem 2.5rem;
}

.client-stories .cs-title{
  font-weight: var(--cs-title-weight);
  letter-spacing: var(--cs-letter);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
  color: var(--cs-left-text);
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  position: relative;
}

.client-stories .cs-text{
  margin: 0;
  color: var(--cs-left-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 400;
  transition: all 0.4s ease;
}

/* Hover effects */
.client-stories .cs-left:hover {
  transform: translateY(-4px);
  box-shadow: var(--cs-left-shadow), 0 0 40px var(--cs-accent-glow);
}

.client-stories .cs-left:hover::after {
  width: 8px;
  box-shadow: 0 0 30px var(--cs-accent-glow);
}

/* ---- CLEAN BRIGHT LIGHT MODE THEMES ---- */

/* Intro – clean bright purple */
#client-stories.is-intro{
  --cs-left-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --cs-left-text: #1e293b;
  --cs-left-muted: #64748b;
  --cs-accent: #8b5cf6;
  --cs-accent-glow: rgba(139, 92, 246, 0.3);
  --cs-border: rgba(139, 92, 246, 0.1);
  --cs-letter: 0.3px;
  --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(139, 92, 246, 0.1);
  --cs-pattern: transparent;
}

/* Lena (Travel) – bright blue and purple */
#client-stories.is-lena{
  --cs-left-bg: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  --cs-left-text: #1e3a8a;
  --cs-left-muted: #3730a3;
  --cs-accent: #3b82f6;
  --cs-accent-glow: rgba(59, 130, 246, 0.3);
  --cs-border: rgba(59, 130, 246, 0.15);
  --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(59, 130, 246, 0.1);
  --cs-pattern: transparent;
}

/* Emma (Pottery) – bright ceramic colors */
#client-stories.is-emma{
  --cs-left-bg: linear-gradient(135deg, #fef3c7 0%, #fecaca 100%);
  --cs-left-text: #92400e;
  --cs-left-muted: #dc2626;
  --cs-accent: #f59e0b;
  --cs-accent-glow: rgba(245, 158, 11, 0.3);
  --cs-border: rgba(245, 158, 11, 0.15);
  --cs-title-weight: 800;
  --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(245, 158, 11, 0.1);
  --cs-pattern: transparent;
}

/* Bálint (Grocery + chatbot) – bright mint green */
#client-stories.is-balint{
  --cs-left-bg: linear-gradient(135deg, #d1fae5 0%, #dbeafe 100%);
  --cs-left-text: #065f46;
  --cs-left-muted: #047857;
  --cs-accent: #10b981;
  --cs-accent-glow: rgba(16, 185, 129, 0.3);
  --cs-border: rgba(16, 185, 129, 0.15);
  --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(16, 185, 129, 0.1);
  --cs-pattern: transparent;
}

  /* Outro – bright orange call-to-action */
#client-stories.is-outro{
  --cs-left-bg: linear-gradient(135deg, #fed7aa 0%, #fecaca 100%);
  --cs-left-text: #c2410c;
  --cs-left-muted: #ea580c;
  --cs-accent: #f97316;
  --cs-accent-glow: rgba(249, 115, 22, 0.3);
  --cs-border: rgba(249, 115, 22, 0.15);
  --cs-title-weight: 900;
  --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(249, 115, 22, 0.1);
  --cs-pattern: transparent;
}

/* Center text alignment for outro slide */
#client-stories.is-outro .cs-content {
  text-align: center;
}/* ---- BRIGHT DARK MODE THEMES ---- */
@media (prefers-color-scheme: dark) {
  /* Intro – bright purple dark mode */
  #client-stories.is-intro{
    --cs-left-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --cs-left-text: #f1f5f9;
    --cs-left-muted: #cbd5e1;
    --cs-accent: #a855f7;
    --cs-accent-glow: rgba(168, 85, 247, 0.4);
    --cs-border: rgba(168, 85, 247, 0.2);
    --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(168, 85, 247, 0.1);
  }

  /* Lena (Travel) – bright blue dark mode */
  #client-stories.is-lena{
    --cs-left-bg: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    --cs-left-text: #dbeafe;
    --cs-left-muted: #93c5fd;
    --cs-accent: #60a5fa;
    --cs-accent-glow: rgba(96, 165, 250, 0.4);
    --cs-border: rgba(96, 165, 250, 0.2);
    --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(96, 165, 250, 0.1);
  }

  /* Emma (Pottery) – bright ceramic dark mode */
  #client-stories.is-emma{
    --cs-left-bg: linear-gradient(135deg, #92400e 0%, #dc2626 100%);
    --cs-left-text: #fef3c7;
    --cs-left-muted: #fde68a;
    --cs-accent: #fbbf24;
    --cs-accent-glow: rgba(251, 191, 36, 0.4);
    --cs-border: rgba(251, 191, 36, 0.2);
    --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(251, 191, 36, 0.1);
  }

  /* Bálint (Grocery + chatbot) – bright mint dark mode */
  #client-stories.is-balint{
    --cs-left-bg: linear-gradient(135deg, #065f46 0%, #1e40af 100%);
    --cs-left-text: #d1fae5;
    --cs-left-muted: #6ee7b7;
    --cs-accent: #34d399;
    --cs-accent-glow: rgba(52, 211, 153, 0.4);
    --cs-border: rgba(52, 211, 153, 0.2);
    --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(52, 211, 153, 0.1);
  }

  /* Outro – bright orange dark mode */
  #client-stories.is-outro{
    --cs-left-bg: linear-gradient(135deg, #c2410c 0%, #dc2626 100%);
    --cs-left-text: #fed7aa;
    --cs-left-muted: #fdba74;
    --cs-accent: #fb923c;
    --cs-accent-glow: rgba(251, 146, 60, 0.4);
    --cs-border: rgba(251, 146, 60, 0.2);
    --cs-left-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(251, 146, 60, 0.1);
  }

  /* Center text alignment for outro slide in dark mode */
  #client-stories.is-outro .cs-content {
    text-align: center;
  }
}

/* Right column: create a fixed 16:9 viewport "card" */
.client-stories .cs-right{
  position:relative; 
  flex:1 1 auto; 
  min-width:0;        /* allow flex child to shrink without overflow */
}
.client-stories .cs-viewport{
  overflow:hidden;
  border-radius:16px;
  background:#f7f7f9;           /* fallback bg while image loads */
  aspect-ratio:16/9;            /* keeps height consistent */
  width:100%;
  /* for browsers without aspect-ratio support, keep a min-height */
  min-height: clamp(260px, 45vw, 520px);
}

/* Track & slides: one full-width slide at a time */
.client-stories .cs-track{
  display:flex;
  height:100%;
  will-change: transform;
  transition: transform 500ms ease;
}
.client-stories .cs-slide{
  min-width:100%;
  height:100%;
  margin:0;                     /* kill default figure margins */
  position:relative;
}
.client-stories .cs-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;             /* fill frame without distortion */
  object-position:center;
}



/* Tablet: more compact side-by-side */
@media (max-width: 900px) and (min-width: 769px) {
  .client-stories .cs-wrap{ gap: 1.5rem; }
  .client-stories .cs-left{ 
    flex: 0 0 38%;
    max-width: 350px;
    min-height: 350px;
  }
  .client-stories .cs-content {
    padding: 2rem 1.8rem;
  }
  .client-stories .cs-title{ font-size: clamp(1.25rem, 3vw, 1.5rem); }
  .client-stories .cs-text{ font-size: 0.95rem; line-height: 1.6; }
}

/* Mobile: text-first vertical stack */
@media (max-width: 768px){
  .client-stories .cs-wrap{ 
    flex-direction: column; 
    gap: 1.5rem; 
  }
  .client-stories .cs-left{ 
    order: 1; /* Text first */
    flex: 1 1 auto; 
    max-width: 100%; 
    width: 100%;
    min-height: 280px;
    margin: 0;
  }
  .client-stories .cs-content {
    padding: 2rem 1.5rem;
  }
  .client-stories .cs-left::after {
    width: 100%;
    height: 4px;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--cs-accent) 0%, var(--cs-accent-glow) 100%);
  }
  .client-stories .cs-right{ 
    order: 2; /* Image second */
    width: 100%; 
  }
  .client-stories .cs-title{ font-size: clamp(1.3rem, 4vw, 1.6rem); }
  .client-stories .cs-text{ font-size: 1rem; }
  
  /* Enhanced mobile touch effects */
  .client-stories .cs-left:active {
    transform: scale(0.98);
  }
}

/* Small mobile: even more compact */
@media (max-width: 480px) {
  .client-stories .cs-wrap{ gap: 1rem; }
  .client-stories .cs-left{ 
    min-height: 240px;
    border-radius: 16px;
  }
  .client-stories .cs-content {
    padding: 1.5rem 1.25rem;
  }
  .client-stories .cs-title{ font-size: clamp(1.2rem, 5vw, 1.4rem); }
  .client-stories .cs-text{ font-size: 0.9rem; line-height: 1.65; }
  .client-stories .cs-viewport {
    border-radius: 12px;
    min-height: clamp(200px, 50vw, 300px);
  }
}