@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@1,600&display=swap');

:root{
  --bg:#050505;
  --text:#f5f5f7;
  --muted:#a9a9b1;
  --line:rgba(255,255,255,.11);
  --purple:#7b2cff;
  --blue:#3d63ff;
  --green:#20ff87;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.20), transparent 34%),
    radial-gradient(circle at 15% 22%, rgba(123,44,255,.10), transparent 20%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

.cursor-glow{
  position:fixed;
  width:430px;
  height:430px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,44,255,.12), transparent 65%);
  pointer-events:none;
  z-index:-1;
  transform:translate(-50%,-50%);
}

.top-nav{
  position:fixed;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px, calc(100% - 34px));
  padding:12px 14px 12px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(15,15,17,.78);
  backdrop-filter:blur(22px);
  z-index:100;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.brand{font-weight:750;font-size:17px}
.top-nav nav{display:flex;gap:22px;align-items:center}
.top-nav nav a{font-size:13px;font-weight:600;color:#ddd;opacity:.9}
.nav-btn{
  background:linear-gradient(135deg,var(--purple),#5d14e8);
  padding:12px 18px;
  border-radius:999px;
  color:white!important;
  box-shadow:0 16px 36px rgba(123,44,255,.25);
}

.hero{
  min-height:100vh;
  padding:150px 6% 80px;
  text-align:center;
}
.hero-content{max-width:1180px;margin:auto}
.eyebrow{
  display:inline-flex;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d8d8de;
  font-size:12px;
  font-weight:750;
  letter-spacing:.16em;
}
.hero-title{
  margin:34px auto 22px;
  max-width:790px;
  font-size:clamp(48px,6vw,86px);
  line-height:1.02;
  letter-spacing:-.065em;
  font-weight:440;
}
.serif-ai{
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic;
  font-weight:600;
  letter-spacing:-.08em;
}
.hero-sub{
  max-width:740px;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(17px,1.7vw,22px);
  line-height:1.55;
}
.actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:34px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border-radius:999px;
  font-weight:700;
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,var(--purple),#5d14e8);box-shadow:0 20px 52px rgba(123,44,255,.28)}
.secondary{border:1px solid var(--line);background:rgba(255,255,255,.025)}
.inline-link{display:inline-flex;margin-top:26px;color:#fff;font-weight:700;opacity:.9}

.hero-free-objects{
  position:relative;
  width:min(900px,100%);
  height:360px;
  margin:54px auto 0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .25s ease;
}
.hero-free-objects::before,
.hero-free-objects::after{
  content:none !important;
  display:none !important;
}
.ambient-glow{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(74px);
}
.glow-purple{
  width:330px;
  height:330px;
  left:11%;
  top:15%;
  background:rgba(123,44,255,.55);
}
.glow-blue{
  width:330px;
  height:330px;
  right:11%;
  top:15%;
  background:rgba(61,99,255,.48);
}
.glow-soft-white{
  width:190px;
  height:190px;
  left:50%;
  top:0;
  transform:translateX(-50%);
  background:rgba(255,255,255,.10);
}
.center-device{
  position:absolute;
  left:50%;
  top:50%;
  width:400px;
  height:225px;
  padding:22px;
  transform:translate(-50%,-50%);
  z-index:5;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045));
  box-shadow:0 35px 95px rgba(0,0,0,.38), 0 0 80px rgba(123,44,255,.16);
  backdrop-filter:blur(10px);
}
.device-screen{
  width:100%;
  height:100%;
  position:relative;
  border-radius:25px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(135deg,rgba(123,44,255,.48),rgba(24,35,95,.88));
  background-size:32px 32px;
}
.device-screen p{
  position:absolute;
  left:22px;
  bottom:20px;
  font-size:12px;
  font-weight:750;
}
.scan-line{
  position:absolute;
  left:-10%;
  right:-10%;
  top:50%;
  height:1px;
  background:white;
  box-shadow:0 0 28px white;
  animation:scan 3.4s infinite ease-in-out;
}
@keyframes scan{
  0%,100%{transform:translateY(-65px);opacity:.3}
  50%{transform:translateY(65px);opacity:1}
}
.chip-card{
  position:absolute;
  z-index:6;
  min-width:150px;
  text-align:left;
  padding:15px 17px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(4,4,8,.48);
  backdrop-filter:blur(20px);
  animation:float 5s ease-in-out infinite;
}
.chip-card span{
  display:block;
  color:#aaa;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:7px;
}
.chip-card strong{
  font-size:17px;
  font-weight:650;
}
.chip-fill{left:8%;top:12%;animation-delay:.2s}
.chip-qa{right:8%;top:13%;transform:rotate(5deg);animation-delay:.5s}
.chip-raw{left:0;bottom:14%;transform:rotate(-5deg)}
.chip-output{right:0;bottom:16%;animation-delay:.8s}
@keyframes float{
  0%,100%{margin-top:0}
  50%{margin-top:-12px}
}

.section{padding:110px 6%; text-align:center}
.section-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 56px;
}
.section-head span{
  display:block;
  color:#8c8c96;
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:15px;
}
.section-head h2{
  font-size:clamp(40px,5vw,70px);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:520;
  margin-bottom:18px;
}
.section-head p{
  color:var(--muted);
  font-size:20px;
  line-height:1.6;
}

/* ENTERPRISE */
.enterprise-section{
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.15), transparent 38%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.015), transparent);
}
.ecosystem-grid{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.ecosystem-card{
  min-height:230px;
  padding:28px 22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.10), transparent 45%),
    linear-gradient(180deg,#17171a,#0b0b0d);
  transition:.28s ease;
}
.ecosystem-card:hover{
  transform:translateY(-8px);
  border-color:rgba(123,44,255,.45);
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}
.eco-icon{
  width:58px;
  height:58px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  color:#fff;
  font-size:30px;
  background:rgba(255,255,255,.035);
}
.ecosystem-card h3{
  font-size:21px;
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:620;
  margin-bottom:12px;
}
.ecosystem-card p{
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
}

/* PRODUCTION SECTION SAME STYLE AS SCREENSHOT */
.production-layout{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:.95fr 1.45fr;
  gap:28px;
  align-items:stretch;
}
.production-lead{
  min-height:470px;
  border-radius:34px;
  padding:38px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 35% 0%, rgba(123,44,255,.22), transparent 36%),
    linear-gradient(180deg,#17171a,#0a0a0b);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
.production-lead h3{
  font-size:clamp(38px,4.6vw,58px);
  line-height:1.04;
  letter-spacing:-.06em;
  font-weight:520;
  margin-bottom:28px;
}
.production-lead p{
  color:var(--muted);
  font-size:19px;
  line-height:1.65;
}
.production-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.service-card{
  min-height:225px;
  padding:30px;
  border-radius:30px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#18181b,#0c0c0e);
  transition:.3s ease;
  text-align:left;
}
.service-card:hover{transform:translateY(-8px);border-color:rgba(123,44,255,.5)}
.emoji{font-size:32px;margin-bottom:28px}
.service-card h3{font-size:23px;line-height:1.15;letter-spacing:-.04em;font-weight:580;margin-bottom:14px}
.service-card p{color:var(--muted);line-height:1.6;font-size:16px}

/* SHOWCASE */
.showcase{background:radial-gradient(circle at 50% 42%, rgba(123,44,255,.12), transparent 38%)}
.compare-wrap{width:min(1050px,100%);margin:0 auto;padding:18px;border-radius:38px;background:linear-gradient(180deg,#151518,#09090a);border:1px solid var(--line)}
.compare-stage{position:relative;height:560px;overflow:hidden;border-radius:28px;background:#030303}
.compare-layer{position:absolute;inset:0}
.after-layer{clip-path:inset(0 45% 0 0)}
.mock-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mock-photo:before{content:"";position:absolute;inset:-10%}
.raw-photo:before{background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.18), transparent 18%),radial-gradient(circle at 65% 57%, rgba(90,90,100,.72), transparent 28%),linear-gradient(135deg,#171719,#020202)}
.enhanced-photo:before{background:radial-gradient(circle at 38% 28%, rgba(255,255,255,.32), transparent 18%),radial-gradient(circle at 64% 56%, rgba(123,44,255,.92), transparent 28%),radial-gradient(circle at 24% 70%, rgba(61,99,255,.72), transparent 32%),linear-gradient(135deg,#181c42,#020202);filter:saturate(1.2) contrast(1.06)}
.mock-photo:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.17) 1px, transparent 1px);background-size:4px 4px;opacity:.07}
.mock-photo span{position:absolute;left:26px;bottom:26px;z-index:4;padding:12px 16px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);font-weight:700}
.human-shape{position:relative;z-index:2;width:280px;height:360px;border-radius:999px 999px 40px 40px;background:linear-gradient(180deg,#444,#151515);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.human-shape:before{content:"";position:absolute;width:120px;height:120px;left:50%;top:-48px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(135deg,#777,#222)}
.human-shape.enhanced{background:linear-gradient(180deg,#6546ff,#111)}
.human-shape.enhanced:before{background:linear-gradient(135deg,#ead8c4,#8e5f52)}
#slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:10}
.slider-handle{position:absolute;top:0;bottom:0;left:55%;width:2px;background:white;box-shadow:0 0 28px white;z-index:9}
.slider-handle:after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:white;color:#111;font-weight:800}
.compare-caption{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:24px 12px 8px;text-align:left}
.compare-caption h3{font-size:25px;font-weight:580;letter-spacing:-.04em}
.compare-caption p{color:var(--muted)}

/* WORKFLOW */
.timeline{position:relative;width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.timeline-line{position:absolute;left:8%;right:8%;top:56px;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--blue),transparent);box-shadow:0 0 28px rgba(123,44,255,.45)}
.step{position:relative;min-height:270px;padding:30px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,#161619,#09090a)}
.step b{display:block;color:#8a46ff;font-size:46px;letter-spacing:-.06em;font-weight:500;margin-bottom:42px}
.step h3{font-size:28px;letter-spacing:-.04em;font-weight:580;margin-bottom:12px}
.step p{color:var(--muted);line-height:1.6}

/* WHY SECTION SAME STYLE AS SCREENSHOT */
.why-shell{
  width:min(1080px,100%);
  margin:0 auto;
  padding:64px 58px 72px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(180deg, rgba(20,20,22,.42), rgba(8,8,8,.65));
}
.compact{margin-bottom:56px}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:62px 44px;
  text-align:center;
}
.why-item{max-width:260px;margin:0 auto}
.icon-line{width:58px;height:58px;margin:0 auto 24px}
.icon-line svg{width:100%;height:100%;fill:none;stroke:white;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:23px;line-height:1.15;letter-spacing:-.04em;font-weight:560;margin-bottom:14px}
.why-item p{color:var(--muted);line-height:1.6;font-size:15px}

.final-cta{width:min(1050px, calc(100% - 34px));margin:62px auto 95px;padding:82px 32px;text-align:center;border-radius:44px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 0%, rgba(123,44,255,.32), transparent 45%),linear-gradient(180deg,#151518,#09090a)}
.final-cta h2{margin:26px auto 18px;font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:-.055em;font-weight:520}
.final-cta p{color:var(--muted);font-size:20px}

.footer{width:min(1120px,100%);margin:0 auto;padding:34px 6% 48px;border-top:1px solid rgba(255,255,255,.08);color:#74747d;display:flex;justify-content:space-between;gap:20px;font-size:14px}

/* CONTACT PAGE */
.contact-page{background:radial-gradient(circle at 50% -10%, rgba(123,44,255,.24), transparent 35%),radial-gradient(circle at 15% 45%, rgba(61,99,255,.10), transparent 28%),var(--bg)}
.contact-hero{min-height:100vh;padding:150px 6% 80px;width:min(1160px,100%);margin:0 auto;display:grid;grid-template-columns:.9fr 1.15fr;gap:34px;align-items:center}
.contact-intro h1{margin:28px 0 22px;font-size:clamp(46px,5.2vw,76px);line-height:1.03;letter-spacing:-.06em;font-weight:470}
.contact-intro p{color:var(--muted);font-size:20px;line-height:1.65;max-width:520px}
.contact-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.contact-points div{padding:15px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#e8e8ed;font-weight:650}
.form-card{border:1px solid rgba(255,255,255,.12);border-radius:36px;background:radial-gradient(circle at 50% 0%, rgba(123,44,255,.18), transparent 40%),linear-gradient(180deg,#17171a,#0b0b0c);padding:34px;box-shadow:0 35px 90px rgba(0,0,0,.38)}
form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:9px;color:#d8d8df;font-size:14px;font-weight:700}
input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.32);color:white;padding:16px 16px;border-radius:17px;outline:none;font-family:inherit;font-size:15px}
select option{background:#111;color:white}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(123,44,255,.65);box-shadow:0 0 0 4px rgba(123,44,255,.12)}
.form-submit{border:0;padding:17px 24px;border-radius:999px;background:linear-gradient(135deg,var(--purple),#5d14e8);color:white;font-weight:800;cursor:pointer;font-size:16px;box-shadow:0 20px 52px rgba(123,44,255,.28)}
.form-note{color:#777780;font-size:13px;line-height:1.6}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}

/* RESPONSIVE */
@media(max-width:1050px){
  .top-nav nav a:not(.nav-btn){display:none}
  .ecosystem-grid,.timeline,.why-grid{grid-template-columns:1fr 1fr}
  .production-layout,.contact-hero{grid-template-columns:1fr}
  .timeline-line{display:none}
  .hero-free-objects{height:330px;width:min(760px,100%)}
  .center-device{width:340px;height:210px}
}
@media(max-width:720px){
  .top-nav{top:14px}.brand{font-size:15px}
  .hero{padding-top:118px}.hero-title{font-size:44px}
  .hero-free-objects{height:250px}
  .center-device{width:280px;height:185px}
  .chip-card{display:none}
  .ecosystem-grid,.production-grid,.timeline,.why-grid,.form-row,.contact-points{grid-template-columns:1fr}
  .compare-stage{height:410px}.compare-caption{display:block}
  .why-shell{padding:52px 26px}
  .actions .btn{width:100%}
  .contact-hero{padding-top:118px}
  .footer{flex-direction:column;text-align:center}
}


/* REAL BEFORE / AFTER IMAGE SLIDER FIX */
.real-image-compare{
  background:#050505;
}

.compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.compare-label{
  position:absolute;
  left:26px;
  bottom:26px;
  z-index:4;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:750;
  backdrop-filter:blur(16px);
}

.after-label{
  left:auto;
  right:26px;
}


/* V2 SAFE SWAP FIX: LEFT = BEFORE, RIGHT = AFTER */
.real-image-compare{
  background:#050505;
}

.real-image-compare .before-layer{
  z-index:1;
  clip-path:none !important;
}

.real-image-compare .after-layer{
  z-index:2;
  clip-path:inset(0 0 0 50%);
}

.compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.real-image-compare #slider,
.real-image-compare .slider-handle,
.real-image-compare .compare-label{
  z-index:5;
}

.compare-label{
  position:absolute;
  left:26px;
  bottom:26px;
  z-index:5;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:750;
  backdrop-filter:blur(16px);
  transition:opacity .2s ease;
}

.compare-label.after-label{
  left:auto;
  right:26px;
}

.compare-label.is-hidden{
  opacity:0;
  pointer-events:none;
}


/* DRAG FIX: make invisible range slider clickable above everything */
.real-image-compare{
  position:relative;
}

.real-image-compare #slider{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:ew-resize !important;
  z-index:50 !important;
  pointer-events:auto !important;
}

.real-image-compare .slider-handle{
  z-index:40 !important;
  pointer-events:none !important;
}

.real-image-compare .compare-label{
  z-index:30 !important;
  pointer-events:none !important;
}

.real-image-compare .compare-layer{
  pointer-events:none !important;
}


/* DRAG FIX V2: whole image area is draggable */
.real-image-compare{
  position:relative !important;
  user-select:none !important;
  touch-action:none !important;
  cursor:ew-resize !important;
}

.real-image-compare #slider{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
}

.real-image-compare .compare-layer,
.real-image-compare .compare-img,
.real-image-compare .compare-label,
.real-image-compare .slider-handle{
  pointer-events:none !important;
}

.real-image-compare .slider-handle{
  z-index:60 !important;
}

.real-image-compare .compare-label{
  z-index:55 !important;
}


/* HEADER LOGO UPDATE */
.brand-logo{
  display:flex;
  align-items:center;
  min-height:42px;
}

.brand-logo img{
  height:44px;
  width:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(123,44,255,.22));
  transition:transform .3s ease, filter .3s ease;
}

.brand-logo:hover img{
  transform:translateY(-1px) scale(1.04);
  filter:drop-shadow(0 0 22px rgba(123,44,255,.45));
}

/* WHY US ICON MICRO-ANIMATION */
.why-item .icon-line{
  position:relative;
  transition:transform .35s ease, filter .35s ease;
  animation:iconFloat 5.5s ease-in-out infinite;
}

.why-item:nth-child(2) .icon-line{ animation-delay:.35s; }
.why-item:nth-child(3) .icon-line{ animation-delay:.7s; }
.why-item:nth-child(4) .icon-line{ animation-delay:1.05s; }
.why-item:nth-child(5) .icon-line{ animation-delay:1.4s; }
.why-item:nth-child(6) .icon-line{ animation-delay:1.75s; }

.why-item .icon-line::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,44,255,.24), transparent 62%);
  opacity:.18;
  transform:scale(.75);
  transition:opacity .35s ease, transform .35s ease;
  z-index:-1;
}

.why-item:hover .icon-line{
  transform:translateY(-8px) scale(1.08);
  filter:drop-shadow(0 0 18px rgba(255,255,255,.18));
}

.why-item:hover .icon-line::after{
  opacity:1;
  transform:scale(1);
}

.why-item:hover .icon-line svg{
  animation:iconDrawPulse 1.2s ease-in-out infinite;
}

@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

@keyframes iconDrawPulse{
  0%,100%{
    stroke-width:2.4;
    opacity:1;
  }
  50%{
    stroke-width:3;
    opacity:.72;
  }
}

@media(max-width:720px){
  .brand-logo img{
    height:36px;
  }
}


/* FINAL HORIZONTAL LOGO SETTINGS */
.brand-logo{
  display:flex !important;
  align-items:center !important;
  height:48px !important;
  min-width:190px !important;
}

.brand-logo img{
  height:48px !important;
  width:auto !important;
  max-width:230px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.10)) drop-shadow(0 0 18px rgba(123,44,255,.22)) !important;
  opacity:.96 !important;
  transition:transform .3s ease, filter .3s ease, opacity .3s ease !important;
}

.brand-logo:hover img{
  transform:translateY(-1px) scale(1.025) !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.18)) drop-shadow(0 0 24px rgba(123,44,255,.36)) !important;
}

@media(max-width:720px){
  .brand-logo{
    min-width:130px !important;
  }
  .brand-logo img{
    height:38px !important;
    max-width:160px !important;
  }
}


/* ======================================================
   L10 FINAL RESPONSIVE NAVBAR + BIGGER VISIBLE LOGO
====================================================== */

.top-nav{
  min-height:72px !important;
  padding:10px 18px 10px 22px !important;
}

.brand-logo{
  display:flex !important;
  align-items:center !important;
  min-width:250px !important;
  height:58px !important;
  z-index:130 !important;
}

.brand-logo img{
  height:56px !important;
  width:auto !important;
  max-width:270px !important;
  object-fit:contain !important;
  display:block !important;
  opacity:1 !important;
  filter:
    brightness(1.45)
    contrast(1.18)
    drop-shadow(0 0 10px rgba(255,255,255,.12))
    drop-shadow(0 0 18px rgba(123,44,255,.28)) !important;
  transition:transform .3s ease, filter .3s ease !important;
}

.brand-logo:hover img{
  transform:translateY(-1px) scale(1.025) !important;
  filter:
    brightness(1.55)
    contrast(1.22)
    drop-shadow(0 0 14px rgba(255,255,255,.18))
    drop-shadow(0 0 24px rgba(123,44,255,.42)) !important;
}

/* Normalize nav */
.top-nav .main-nav{
  display:flex;
  gap:22px;
  align-items:center;
}

.top-nav .main-nav a{
  font-size:13px;
  font-weight:650;
  color:#ddd;
  opacity:.9;
}

/* Hamburger hidden on desktop */
.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  border-radius:50%;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  z-index:140;
}

.menu-toggle span{
  width:18px;
  height:2px;
  border-radius:99px;
  background:#fff;
  display:block;
  transition:transform .25s ease, opacity .25s ease;
}

/* ======================================================
   TABLET RESPONSIVE
====================================================== */
@media(max-width:1024px){
  .top-nav{
    width:calc(100% - 28px) !important;
    top:14px !important;
  }

  .brand-logo{
    min-width:210px !important;
    height:54px !important;
  }

  .brand-logo img{
    height:52px !important;
    max-width:230px !important;
  }

  .hero{
    padding-top:130px !important;
  }

  .hero-title{
    font-size:clamp(46px,8vw,74px) !important;
  }

  .ecosystem-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .production-layout{
    grid-template-columns:1fr !important;
  }

  .production-lead{
    min-height:auto !important;
    text-align:center !important;
  }

  .production-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .timeline{
    grid-template-columns:1fr 1fr !important;
  }

  .timeline-line{
    display:none !important;
  }

  .why-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .contact-hero{
    grid-template-columns:1fr !important;
  }
}

/* ======================================================
   MOBILE + TABLET HAMBURGER MENU
====================================================== */
@media(max-width:900px){
  .menu-toggle{
    display:flex;
  }

  .top-nav{
    min-height:70px !important;
  }

  .top-nav .main-nav{
    position:absolute;
    top:82px;
    left:0;
    right:0;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:18px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:28px;
    background:rgba(13,13,16,.94);
    backdrop-filter:blur(26px);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  body.nav-open .top-nav .main-nav{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .top-nav .main-nav a{
    width:100%;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
    font-size:15px;
  }

  .top-nav .main-nav a:hover{
    background:rgba(123,44,255,.14);
    border-color:rgba(123,44,255,.28);
  }

  .top-nav .main-nav .nav-btn{
    text-align:center;
    justify-content:center;
    display:flex;
    margin-top:4px;
  }

  body.nav-open .menu-toggle span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  body.nav-open .menu-toggle span:nth-child(2){
    opacity:0;
  }

  body.nav-open .menu-toggle span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
}

/* ======================================================
   MOBILE RESPONSIVE
====================================================== */
@media(max-width:720px){
  body{
    background:
      radial-gradient(circle at 50% -8%, rgba(123,44,255,.22), transparent 32%),
      radial-gradient(circle at 50% 35%, rgba(61,99,255,.08), transparent 32%),
      var(--bg) !important;
  }

  .top-nav{
    width:calc(100% - 20px) !important;
    top:10px !important;
    padding:8px 10px 8px 14px !important;
    border-radius:30px !important;
  }

  .brand-logo{
    min-width:170px !important;
    height:48px !important;
  }

  .brand-logo img{
    height:44px !important;
    max-width:180px !important;
  }

  .hero{
    padding:116px 18px 64px !important;
    min-height:auto !important;
  }

  .eyebrow{
    font-size:10px !important;
    letter-spacing:.12em !important;
    padding:9px 12px !important;
  }

  .hero-title{
    font-size:clamp(42px,12vw,56px) !important;
    letter-spacing:-.06em !important;
    margin-top:28px !important;
  }

  .hero-sub{
    font-size:17px !important;
    line-height:1.5 !important;
  }

  .actions{
    gap:12px !important;
  }

  .actions .btn{
    width:100% !important;
  }

  .hero-free-objects{
    width:100% !important;
    height:260px !important;
    margin-top:44px !important;
  }

  .center-device{
    width:285px !important;
    height:178px !important;
    padding:16px !important;
    border-radius:30px !important;
  }

  .device-screen{
    border-radius:20px !important;
    background-size:26px 26px !important;
  }

  .chip-card{
    display:none !important;
  }

  .section{
    padding:78px 18px !important;
  }

  .section-head{
    margin-bottom:38px !important;
  }

  .section-head h2{
    font-size:clamp(36px,10vw,48px) !important;
  }

  .section-head p{
    font-size:17px !important;
  }

  .ecosystem-grid,
  .production-grid,
  .timeline,
  .why-grid,
  .form-row,
  .contact-points{
    grid-template-columns:1fr !important;
  }

  .ecosystem-card,
  .service-card,
  .step{
    min-height:auto !important;
  }

  .production-lead{
    padding:30px 24px !important;
    border-radius:28px !important;
  }

  .production-lead h3{
    font-size:38px !important;
  }

  .compare-wrap{
    padding:10px !important;
    border-radius:28px !important;
  }

  .compare-stage{
    height:360px !important;
    border-radius:22px !important;
  }

  .compare-caption{
    display:block !important;
    text-align:left !important;
    padding:20px 8px 8px !important;
  }

  .compare-caption h3{
    font-size:22px !important;
    margin-bottom:12px !important;
  }

  .compare-label{
    left:16px !important;
    bottom:16px !important;
    font-size:13px !important;
    padding:10px 13px !important;
  }

  .compare-label.after-label{
    left:auto !important;
    right:16px !important;
  }

  .slider-handle:after{
    width:46px !important;
    height:46px !important;
  }

  .why-shell{
    padding:50px 22px !important;
    border-radius:30px !important;
  }

  .why-grid{
    gap:42px !important;
  }

  .final-cta{
    width:calc(100% - 28px) !important;
    padding:64px 22px !important;
    border-radius:32px !important;
  }

  .footer{
    flex-direction:column !important;
    text-align:center !important;
    gap:10px !important;
  }

  .contact-hero{
    padding:120px 18px 70px !important;
  }

  .contact-intro h1{
    font-size:42px !important;
  }

  .form-card{
    padding:24px !important;
    border-radius:28px !important;
  }
}

/* ======================================================
   SMALL MOBILE
====================================================== */
@media(max-width:420px){
  .brand-logo{
    min-width:145px !important;
  }

  .brand-logo img{
    height:38px !important;
    max-width:150px !important;
  }

  .menu-toggle{
    width:42px !important;
    height:42px !important;
  }

  .hero-title{
    font-size:40px !important;
  }

  .center-device{
    width:250px !important;
    height:160px !important;
  }

  .compare-stage{
    height:310px !important;
  }
}


/* ======================================================
   L11 REFINED HEADER LOGO SIZE
   Bigger and clearly visible, but slightly smaller than mockup.
====================================================== */

.top-nav{
  min-height:86px !important;
  padding:12px 22px 12px 28px !important;
}

.brand-logo{
  min-width:260px !important;
  height:70px !important;
  display:flex !important;
  align-items:center !important;
}

.brand-logo img{
  height:70px !important;
  width:auto !important;
  max-width:285px !important;
  object-fit:contain !important;
  opacity:1 !important;
  filter:
    brightness(1.55)
    contrast(1.2)
    drop-shadow(0 0 8px rgba(255,255,255,.14))
    drop-shadow(0 0 18px rgba(123,44,255,.30)) !important;
}

.top-nav .main-nav{
  align-items:center !important;
}

/* Tablet */
@media(max-width:1024px){
  .top-nav{
    min-height:78px !important;
    padding:10px 16px 10px 22px !important;
  }

  .brand-logo{
    min-width:220px !important;
    height:62px !important;
  }

  .brand-logo img{
    height:62px !important;
    max-width:240px !important;
  }
}

/* Hamburger tablet/mobile */
@media(max-width:900px){
  .top-nav .main-nav{
    top:88px !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .top-nav{
    min-height:66px !important;
    padding:8px 10px 8px 14px !important;
  }

  .brand-logo{
    min-width:185px !important;
    height:54px !important;
  }

  .brand-logo img{
    height:54px !important;
    max-width:200px !important;
  }

  .top-nav .main-nav{
    top:76px !important;
  }
}

/* Small mobile */
@media(max-width:420px){
  .brand-logo{
    min-width:155px !important;
    height:46px !important;
  }

  .brand-logo img{
    height:46px !important;
    max-width:165px !important;
  }
}


/* ==========================================
   L12 BALANCED LOGO SIZE
========================================== */

.brand-logo{
    min-width:235px !important;
    height:62px !important;
}

.brand-logo img{
    height:60px !important;
    max-width:245px !important;
    object-fit:contain !important;
}

/* Tablet */
@media(max-width:1024px){
    .brand-logo{
        min-width:205px !important;
        height:56px !important;
    }

    .brand-logo img{
        height:54px !important;
        max-width:220px !important;
    }
}

/* Mobile */
@media(max-width:720px){
    .brand-logo{
        min-width:170px !important;
        height:50px !important;
    }

    .brand-logo img{
        height:48px !important;
        max-width:185px !important;
    }
}

/* Small Mobile */
@media(max-width:420px){
    .brand-logo{
        min-width:150px !important;
        height:44px !important;
    }

    .brand-logo img{
        height:42px !important;
        max-width:160px !important;
    }
}


/* ======================================================
   L13 FIX: SHOW ALL NAV LINKS INSIDE HAMBURGER DROPDOWN
====================================================== */

@media(max-width:900px){
  .top-nav .main-nav{
    position:absolute !important;
    top:82px !important;
    left:0 !important;
    right:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:18px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:28px !important;
    background:rgba(13,13,16,.96) !important;
    backdrop-filter:blur(26px) !important;
    box-shadow:0 25px 80px rgba(0,0,0,.48) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-12px) !important;
    pointer-events:none !important;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease !important;
  }

  body.nav-open .top-nav .main-nav{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  /* IMPORTANT FIX: override old rule that hides all links except Request Demo */
  body.nav-open .top-nav .main-nav a,
  .top-nav .main-nav a{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(255,255,255,.07) !important;
    color:#f5f5f7 !important;
    font-size:15px !important;
    font-weight:700 !important;
    opacity:1 !important;
    text-align:center !important;
  }

  .top-nav .main-nav a:hover{
    background:rgba(123,44,255,.16) !important;
    border-color:rgba(123,44,255,.32) !important;
    transform:translateY(-1px) !important;
  }

  .top-nav .main-nav .nav-btn{
    margin-top:4px !important;
    background:linear-gradient(135deg,#7b2cff,#5d14e8) !important;
    box-shadow:0 18px 42px rgba(123,44,255,.25) !important;
  }
}

@media(max-width:720px){
  .top-nav .main-nav{
    top:76px !important;
    padding:14px !important;
    gap:8px !important;
  }

  .top-nav .main-nav a{
    padding:13px 14px !important;
    font-size:14px !important;
  }
}

@media(max-width:420px){
  .top-nav .main-nav{
    top:70px !important;
  }
}


/* ======================================================
   L14 LIGHT / DARK THEME TOGGLE
====================================================== */

.theme-toggle{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  z-index:135;
}

.theme-toggle:hover{
  transform:translateY(-1px) scale(1.04);
  background:rgba(123,44,255,.18);
  border-color:rgba(123,44,255,.38);
}

.theme-icon{
  display:block;
  transform:translateY(-1px);
}

/* Desktop nav alignment with new theme button */
.top-nav{
  gap:18px !important;
}

/* ==========================
   LIGHT THEME BASE
========================== */

body.light-theme{
  --bg:#f7f7fb;
  --text:#111114;
  --muted:#5e5e68;
  --line:rgba(20,20,28,.12);
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.16), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(61,99,255,.10), transparent 22%),
    linear-gradient(180deg,#fbfbff,#eeeeF7) !important;
  color:#111114 !important;
}

body.light-theme .top-nav{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(20,20,28,.12) !important;
  box-shadow:0 22px 70px rgba(40,25,80,.12) !important;
}

body.light-theme .top-nav .main-nav a{
  color:#24242c !important;
}

body.light-theme .nav-btn,
body.light-theme .primary,
body.light-theme .form-submit{
  color:#fff !important;
}

body.light-theme .theme-toggle,
body.light-theme .menu-toggle{
  background:rgba(10,10,18,.045) !important;
  border-color:rgba(10,10,18,.12) !important;
  color:#111114 !important;
}

body.light-theme .menu-toggle span{
  background:#111114 !important;
}

body.light-theme .eyebrow{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(20,20,28,.12) !important;
  color:#484858 !important;
}

body.light-theme .hero-title,
body.light-theme .section-head h2,
body.light-theme .final-cta h2,
body.light-theme .production-lead h3,
body.light-theme .contact-intro h1{
  color:#111114 !important;
}

body.light-theme .hero-sub,
body.light-theme .section-head p,
body.light-theme .production-lead p,
body.light-theme .compare-caption p,
body.light-theme .why-item p,
body.light-theme .step p,
body.light-theme .service-card p,
body.light-theme .ecosystem-card p,
body.light-theme .contact-intro p,
body.light-theme .form-note{
  color:#62626f !important;
}

body.light-theme .secondary{
  color:#111114 !important;
  background:rgba(255,255,255,.60) !important;
  border-color:rgba(20,20,28,.14) !important;
}

body.light-theme .cursor-glow{
  background:radial-gradient(circle, rgba(123,44,255,.11), transparent 65%) !important;
}

body.light-theme .chip-card{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(20,20,28,.12) !important;
  color:#111114 !important;
  box-shadow:0 18px 50px rgba(50,35,90,.10) !important;
}

body.light-theme .chip-card span{
  color:#6b6b76 !important;
}

body.light-theme .center-device{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.42)) !important;
  border-color:rgba(20,20,28,.14) !important;
  box-shadow:0 35px 95px rgba(70,45,140,.16), 0 0 80px rgba(123,44,255,.10) !important;
}

body.light-theme .device-screen{
  border-color:rgba(20,20,28,.12) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(135deg,rgba(123,44,255,.58),rgba(61,99,255,.55)) !important;
}

body.light-theme .enterprise-section,
body.light-theme .showcase{
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.11), transparent 38%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.45), transparent) !important;
}

body.light-theme .ecosystem-card,
body.light-theme .service-card,
body.light-theme .step,
body.light-theme .production-lead,
body.light-theme .why-shell,
body.light-theme .compare-wrap,
body.light-theme .final-cta,
body.light-theme .form-card{
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,252,.78)) !important;
  border-color:rgba(20,20,28,.12) !important;
  box-shadow:0 28px 80px rgba(45,30,90,.10) !important;
  color:#111114 !important;
}

body.light-theme .compare-stage{
  background:#f3f3f8 !important;
}

body.light-theme .compare-label{
  background:rgba(255,255,255,.72) !important;
  color:#111114 !important;
  border-color:rgba(20,20,28,.12) !important;
}

body.light-theme .slider-handle{
  background:#111114 !important;
  box-shadow:0 0 28px rgba(20,20,28,.30) !important;
}

body.light-theme .slider-handle:after{
  background:#111114 !important;
  color:#fff !important;
}

body.light-theme .icon-line svg{
  stroke:#141418 !important;
}

body.light-theme .why-item .icon-line::after{
  background:radial-gradient(circle, rgba(123,44,255,.16), transparent 62%) !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(20,20,28,.14) !important;
  color:#111114 !important;
}

body.light-theme .footer{
  border-color:rgba(20,20,28,.10) !important;
  color:#666672 !important;
}

body.light-theme .top-nav .main-nav{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(20,20,28,.12) !important;
}

/* Logo visibility on light theme */
body.light-theme .brand-logo img{
  filter:
    brightness(.82)
    contrast(1.2)
    drop-shadow(0 0 8px rgba(123,44,255,.12)) !important;
}

/* Mobile theme toggle sizing */
@media(max-width:900px){
  .theme-toggle{
    display:grid !important;
    width:46px !important;
    height:46px !important;
    margin-left:auto !important;
  }
}

@media(max-width:720px){
  .theme-toggle{
    width:42px !important;
    height:42px !important;
    font-size:18px !important;
  }
}


/* ======================================================
   L15 FINAL FIXES:
   - Theme toggle placed after Request Demo
   - Light theme uses Logo_dark.png
   - Dark theme uses Logo.png
   - Request Demo text always white
   - Light theme enterprise icons visible dark
====================================================== */

/* Theme toggle inside nav after Request Demo */
.nav-theme-toggle{
  flex:0 0 auto !important;
  margin-left:0 !important;
}

.top-nav .main-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

.top-nav .main-nav .theme-toggle{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  border-radius:999px !important;
}

/* Request demo must always be readable */
.nav-btn,
.top-nav .main-nav .nav-btn,
body.light-theme .nav-btn,
body.light-theme .top-nav .main-nav .nav-btn,
.primary,
body.light-theme .primary{
  color:#ffffff !important;
}

/* Logo switch visibility */
.brand-logo img{
  opacity:1 !important;
}

body.light-theme .brand-logo img{
  filter:
    brightness(1)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(20,20,28,.10)) !important;
}

/* Light theme: enterprise/workflow icon marks must be dark and visible */
body.light-theme .eco-icon{
  color:#111114 !important;
  border-color:rgba(20,20,28,.16) !important;
  background:rgba(20,20,28,.045) !important;
  box-shadow:0 12px 34px rgba(20,20,28,.07) !important;
}

body.light-theme .ecosystem-card .eco-icon{
  color:#111114 !important;
}

body.light-theme .ecosystem-card h3,
body.light-theme .service-card h3,
body.light-theme .step h3,
body.light-theme .why-item h3,
body.light-theme .production-lead h3{
  color:#111114 !important;
}

/* Mobile/tablet hamburger: include all links + toggle in dropdown */
@media(max-width:900px){
  .top-nav{
    display:flex !important;
    align-items:center !important;
  }

  .menu-toggle{
    order:3 !important;
  }

  .top-nav .main-nav{
    position:absolute !important;
    top:88px !important;
    left:0 !important;
    right:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
    padding:16px !important;
  }

  .top-nav .main-nav a,
  .top-nav .main-nav .theme-toggle{
    width:100% !important;
    height:auto !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-size:15px !important;
    font-weight:700 !important;
  }

  .top-nav .main-nav .theme-toggle{
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#fff !important;
  }

  body.light-theme .top-nav .main-nav .theme-toggle{
    background:rgba(20,20,28,.045) !important;
    border-color:rgba(20,20,28,.12) !important;
    color:#111114 !important;
  }

  .top-nav .main-nav .nav-btn{
    margin-top:3px !important;
  }
}

@media(max-width:720px){
  .top-nav .main-nav{
    top:76px !important;
  }
}


/* ======================================================
   L16 FINAL RESPONSIVE + THEME + NAV FIX
   Fixes:
   1. Theme toggle works on all devices.
   2. Hamburger appears on iPad / Tablet / Mobile.
   3. Full menu appears inside hamburger dropdown.
   4. Request Demo visible inside dropdown.
   5. Desktop nav no pure white block behind menu.
   6. Light theme enterprise icons visible.
====================================================== */

/* Desktop nav must stay transparent/glass, not white block */
.top-nav .main-nav{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.top-nav .main-nav a:not(.nav-btn){
  background:transparent !important;
  border:0 !important;
}

/* Theme button placement after Request Demo on desktop */
.top-nav .main-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

.nav-theme-toggle,
.top-nav .main-nav .theme-toggle{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
}

/* Desktop Request Demo remains white on purple */
.top-nav .main-nav .nav-btn{
  color:#fff !important;
  background:linear-gradient(135deg,#7b2cff,#5d14e8) !important;
  border-color:transparent !important;
}

/* Light theme desktop nav remains transparent behind links */
body.light-theme .top-nav .main-nav{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.light-theme .top-nav .main-nav a:not(.nav-btn){
  background:transparent !important;
  border:0 !important;
  color:#272730 !important;
}

/* Light theme icon/card visibility */
body.light-theme .eco-icon{
  color:#15151b !important;
  border-color:rgba(20,20,28,.18) !important;
  background:rgba(20,20,28,.05) !important;
  text-shadow:none !important;
  opacity:1 !important;
}

body.light-theme .ecosystem-card h3,
body.light-theme .service-card h3,
body.light-theme .step h3,
body.light-theme .why-item h3{
  color:#111114 !important;
}

/* Theme logo switching visibility */
body.light-theme .brand-logo img{
  filter:brightness(1) contrast(1.08) drop-shadow(0 0 6px rgba(0,0,0,.08)) !important;
}

body:not(.light-theme) .brand-logo img{
  filter:brightness(1.45) contrast(1.15) drop-shadow(0 0 14px rgba(123,44,255,.25)) !important;
}

/* HAMBURGER STARTS ON IPAD/TABLET/MOBILE */
@media(max-width:1180px){
  .menu-toggle{
    display:flex !important;
  }

  .top-nav{
    position:fixed !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .brand-logo{
    flex:0 0 auto !important;
    z-index:150 !important;
  }

  .menu-toggle{
    order:3 !important;
    z-index:160 !important;
    margin-left:10px !important;
  }

  .top-nav .main-nav{
    position:absolute !important;
    top:calc(100% + 12px) !important;
    left:0 !important;
    right:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:18px !important;
    border-radius:28px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(13,13,16,.96) !important;
    backdrop-filter:blur(26px) !important;
    box-shadow:0 25px 80px rgba(0,0,0,.48) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-12px) !important;
    pointer-events:none !important;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease !important;
  }

  body.nav-open .top-nav .main-nav{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  .top-nav .main-nav a,
  .top-nav .main-nav .theme-toggle{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    font-size:15px !important;
    font-weight:750 !important;
    text-align:center !important;
    opacity:1 !important;
  }

  body:not(.light-theme) .top-nav .main-nav a:not(.nav-btn),
  body:not(.light-theme) .top-nav .main-nav .theme-toggle{
    color:#f5f5f7 !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.08) !important;
  }

  body.light-theme .top-nav .main-nav{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(20,20,28,.12) !important;
    box-shadow:0 25px 80px rgba(40,25,80,.16) !important;
  }

  body.light-theme .top-nav .main-nav a:not(.nav-btn),
  body.light-theme .top-nav .main-nav .theme-toggle{
    color:#202027 !important;
    background:rgba(20,20,28,.035) !important;
    border:1px solid rgba(20,20,28,.08) !important;
  }

  /* Request Demo in dropdown: make text dark and visible as requested */
  body.light-theme .top-nav .main-nav .nav-btn{
    color:#15151b !important;
    background:rgba(123,44,255,.10) !important;
    border:1px solid rgba(123,44,255,.10) !important;
    box-shadow:none !important;
  }

  body:not(.light-theme) .top-nav .main-nav .nav-btn{
    color:#ffffff !important;
  }

  body.nav-open .menu-toggle span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  body.nav-open .menu-toggle span:nth-child(2){
    opacity:0 !important;
  }

  body.nav-open .menu-toggle span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }
}

/* Desktop remains normal above 1180px */
@media(min-width:1181px){
  .menu-toggle{
    display:none !important;
  }

  .top-nav .main-nav{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
}

/* Mobile tuning */
@media(max-width:720px){
  .top-nav .main-nav{
    padding:14px !important;
    gap:8px !important;
  }

  .top-nav .main-nav a,
  .top-nav .main-nav .theme-toggle{
    min-height:46px !important;
    font-size:14px !important;
  }
}


/* ======================================================
   L17 CONTACT PAGE POINTS VISIBILITY FIX
   Makes these clearly visible on Desktop, Tablet, Mobile:
   ✓ Dataset creation
   ✓ Generative Fill automation
   ✓ Human-reviewed QA
   ✓ Real mobile-photo finishing
====================================================== */

.contact-points div{
  color:#f5f5f7 !important;
  opacity:1 !important;
  font-weight:750 !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
}

.contact-points div::first-letter{
  color:#7b2cff !important;
}

/* Light theme visibility */
body.light-theme .contact-points div{
  color:#15151b !important;
  opacity:1 !important;
  font-weight:800 !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(20,20,28,.16) !important;
  box-shadow:0 18px 42px rgba(40,25,80,.09) !important;
}

body.light-theme .contact-points div{
  text-shadow:none !important;
}

/* Make checkmark visually stronger */
.contact-points div{
  position:relative !important;
  padding-left:42px !important;
}

.contact-points div::before{
  content:"✓";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:#8b46ff;
  font-weight:900;
}

.contact-points div{
  font-size:15px !important;
  line-height:1.35 !important;
}

/* Remove duplicated weak checkmark if text already starts with ✓ by hiding first glyph visually is not safe,
   so we keep text readable and add stronger checkmark before it. */

/* Tablet */
@media(max-width:1024px){
  .contact-points div{
    font-size:15px !important;
    padding:16px 16px 16px 44px !important;
    min-height:54px !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .contact-points{
    gap:12px !important;
  }

  .contact-points div{
    font-size:15px !important;
    padding:16px 18px 16px 46px !important;
    min-height:56px !important;
    border-radius:18px !important;
  }

  .contact-points div::before{
    left:20px !important;
  }
}

/* Small mobile */
@media(max-width:420px){
  .contact-points div{
    font-size:14px !important;
    padding:15px 16px 15px 44px !important;
  }
}


/* ======================================================
   L18 CONTACT POINTS CLEAN STYLE
   - Remove duplicate arrows/checkmarks
   - Remove background boxes
   - Keep points clearly visible on all devices
====================================================== */

.contact-points{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:16px 28px !important;
  margin-top:34px !important;
}

.contact-points div{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:#f5f5f7 !important;
  padding:6px 0 6px 30px !important;
  min-height:auto !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:800 !important;
  position:relative !important;
  opacity:1 !important;
}

.contact-points div::before{
  content:"✓" !important;
  position:absolute !important;
  left:0 !important;
  top:6px !important;
  transform:none !important;
  color:#8b46ff !important;
  font-size:17px !important;
  font-weight:950 !important;
}

body.light-theme .contact-points div{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#111114 !important;
  opacity:1 !important;
  font-weight:850 !important;
}

body.light-theme .contact-points div::before{
  color:#7b2cff !important;
}

/* Tablet */
@media(max-width:1024px){
  .contact-points{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px 24px !important;
  }

  .contact-points div{
    font-size:15px !important;
    padding:5px 0 5px 28px !important;
  }

  .contact-points div::before{
    top:5px !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .contact-points{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:30px !important;
  }

  .contact-points div{
    font-size:15px !important;
    padding:5px 0 5px 30px !important;
    text-align:left !important;
  }
}

/* Small Mobile */
@media(max-width:420px){
  .contact-points{
    grid-template-columns:1fr 1fr !important;
    gap:14px 18px !important;
  }

  .contact-points div{
    font-size:14px !important;
    line-height:1.35 !important;
    padding:4px 0 4px 24px !important;
  }

  .contact-points div::before{
    font-size:15px !important;
    top:4px !important;
  }
}


/* ======================================================
   L19 CONTACT FORM READABILITY FIX
   - Darker input field labels in light theme
   - Better dropdown arrow spacing
   - Contact points text fully dark gray, no purple first character
====================================================== */

/* Form field titles */
body.light-theme .form-card label,
body.light-theme label{
  color:#4f4f5b !important;
  opacity:1 !important;
  font-weight:800 !important;
}

/* Dark theme labels also stay readable */
.form-card label,
label{
  opacity:1 !important;
  font-weight:800 !important;
}

/* Input readability */
body.light-theme input,
body.light-theme select,
body.light-theme textarea{
  color:#15151b !important;
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(20,20,28,.18) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder{
  color:#6b6b76 !important;
  opacity:1 !important;
}

/* Dropdown arrow spacing */
select{
  padding-right:52px !important;
  cursor:pointer !important;
}

/* Contact 4 points: remove purple first character effect */
.contact-points div::first-letter{
  color:inherit !important;
}

body.light-theme .contact-points div{
  color:#2b2b34 !important;
}

body.light-theme .contact-points div strong,
body.light-theme .contact-points div span{
  color:#2b2b34 !important;
}

/* Keep only check icon purple */
body.light-theme .contact-points div::before,
.contact-points div::before{
  color:#7b2cff !important;
}

/* Mobile form label readability */
@media(max-width:720px){
  body.light-theme .form-card label,
  body.light-theme label{
    color:#4a4a55 !important;
    font-size:14px !important;
  }

  select{
    padding-right:56px !important;
  }
}


/* L21 TRUE LIGHT DEFAULT ASSURANCE */
body.light-theme{
  --bg:#f7f7fb !important;
  --text:#111114 !important;
  --muted:#5e5e68 !important;
  --line:rgba(20,20,28,.12) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.16), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(61,99,255,.10), transparent 22%),
    linear-gradient(180deg,#fbfbff,#eeeef7) !important;
  color:#111114 !important;
}

body.light-theme .top-nav{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(20,20,28,.12) !important;
}

body.light-theme .hero-title,
body.light-theme .hero-title span,
body.light-theme .section-head h2{
  color:#111114 !important;
}

body.light-theme .hero-sub{
  color:#62626f !important;
}


/* ======================================================
   L22 THEME TOGGLE CLICK FIX
====================================================== */

.theme-toggle,
.nav-theme-toggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  z-index:999 !important;
  position:relative !important;
}

.theme-toggle *{
  pointer-events:none !important;
}

/* Default light theme assurance */
body.light-theme{
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.16), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(61,99,255,.10), transparent 22%),
    linear-gradient(180deg,#fbfbff,#eeeef7) !important;
  color:#111114 !important;
}

/* Dark theme assurance when light-theme class removed */
body:not(.light-theme){
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.28), transparent 34%),
    radial-gradient(circle at 50% 40%, rgba(61,99,255,.12), transparent 28%),
    #050308 !important;
  color:#f5f5f7 !important;
}

body:not(.light-theme) .hero-title,
body:not(.light-theme) .hero-title span,
body:not(.light-theme) .section-head h2{
  color:#f5f5f7 !important;
}

body:not(.light-theme) .hero-sub,
body:not(.light-theme) .section-head p{
  color:#b8b4c7 !important;
}

body:not(.light-theme) .top-nav{
  background:rgba(13,13,16,.72) !important;
  border-color:rgba(255,255,255,.12) !important;
}

body:not(.light-theme) .top-nav .main-nav a:not(.nav-btn){
  color:#ddd !important;
}

body:not(.light-theme) .secondary{
  color:#fff !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.12) !important;
}

body:not(.light-theme) .chip-card{
  background:rgba(13,13,16,.86) !important;
  color:#fff !important;
}

body:not(.light-theme) .center-device{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.06)) !important;
  border-color:rgba(255,255,255,.16) !important;
}

body:not(.light-theme) .theme-toggle{
  color:#fff !important;
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.12) !important;
}


/* ======================================================
   L23 TRUSTED BY SECTION
   Premium logo marquee below Hero
====================================================== */

.trusted-section{
  position:relative;
  padding:36px 24px 86px;
  overflow:hidden;
}

.trusted-inner{
  width:min(1120px, calc(100% - 36px));
  margin:0 auto;
  text-align:center;
  position:relative;
}

.section-kicker{
  margin:0 auto 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:850;
  letter-spacing:.18em;
}

.trusted-section h2{
  margin:0;
  color:#f5f5f7;
  font-size:clamp(32px, 5vw, 58px);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:760;
}

.trusted-sub{
  max-width:780px;
  margin:18px auto 0;
  color:#b8b4c7;
  font-size:clamp(16px, 2vw, 20px);
  line-height:1.5;
}

.trusted-marquee-shell{
  position:relative;
  margin:42px auto 0;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.14), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.22);
}

.trusted-marquee{
  overflow:hidden;
  width:100%;
  padding:28px 0;
}

.trusted-track{
  display:flex;
  width:max-content;
  gap:22px;
  align-items:center;
  animation:trustedMarquee 28s linear infinite;
}

.trusted-marquee-shell:hover .trusted-track{
  animation-play-state:paused;
}

.trusted-logo-card{
  width:210px;
  height:92px;
  flex:0 0 auto;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 24px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .3s ease, border-color .3s ease, background .3s ease, filter .3s ease;
}

.trusted-logo-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.10);
  border-color:rgba(123,44,255,.36);
  filter:drop-shadow(0 18px 36px rgba(123,44,255,.16));
}

.trusted-logo-card img{
  max-width:100%;
  max-height:54px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.trusted-fade{
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}

.trusted-fade-left{
  left:0;
  background:linear-gradient(90deg, rgba(7,4,12,.95), transparent);
}

.trusted-fade-right{
  right:0;
  background:linear-gradient(270deg, rgba(7,4,12,.95), transparent);
}

.trusted-note{
  margin:18px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.42);
  font-size:13px;
  line-height:1.5;
}

/* Light theme */
body.light-theme .section-kicker{
  background:rgba(255,255,255,.70);
  border-color:rgba(20,20,28,.12);
  color:#5d5d68;
}

body.light-theme .trusted-section h2{
  color:#111114;
}

body.light-theme .trusted-sub{
  color:#62626f;
}

body.light-theme .trusted-marquee-shell{
  border-color:rgba(20,20,28,.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(123,44,255,.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,246,252,.72));
  box-shadow:0 28px 90px rgba(45,30,90,.10);
}

body.light-theme .trusted-logo-card{
  background:rgba(255,255,255,.72);
  border-color:rgba(20,20,28,.10);
  box-shadow:0 16px 44px rgba(35,25,70,.06);
}

body.light-theme .trusted-logo-card:hover{
  background:rgba(255,255,255,.92);
  border-color:rgba(123,44,255,.28);
}

body.light-theme .trusted-fade-left{
  background:linear-gradient(90deg, rgba(247,247,252,.96), transparent);
}

body.light-theme .trusted-fade-right{
  background:linear-gradient(270deg, rgba(247,247,252,.96), transparent);
}

body.light-theme .trusted-note{
  color:#6c6c78;
}

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

/* Tablet */
@media(max-width:1024px){
  .trusted-section{
    padding:30px 18px 72px;
  }

  .trusted-logo-card{
    width:180px;
    height:82px;
    padding:16px 20px;
  }

  .trusted-logo-card img{
    max-height:48px;
  }
}

/* Mobile */
@media(max-width:720px){
  .trusted-section{
    padding:20px 14px 62px;
  }

  .trusted-inner{
    width:100%;
  }

  .trusted-sub{
    font-size:16px;
  }

  .trusted-marquee-shell{
    border-radius:28px;
    margin-top:32px;
  }

  .trusted-marquee{
    padding:22px 0;
  }

  .trusted-track{
    gap:14px;
    animation-duration:24s;
  }

  .trusted-logo-card{
    width:150px;
    height:74px;
    border-radius:20px;
    padding:14px 16px;
  }

  .trusted-logo-card img{
    max-height:40px;
  }

  .trusted-fade{
    width:58px;
  }

  .trusted-note{
    font-size:12px;
    padding:0 12px;
  }
}


/* ================================
L24 TRUST SECTION REFINED
================================ */

.trusted-section{
  margin-top:-180px !important;
  padding-top:0 !important;
}

.trusted-marquee-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin-top:28px !important;
}

.trusted-logo-card{
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  backdrop-filter:blur(12px);
  box-shadow:none !important;
}

.trusted-logo-card:hover{
  transform:translateY(-4px);
}

.trusted-note{
  display:none !important;
}

body.light-theme .trusted-marquee-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

@media(max-width:720px){
  .trusted-section{
    margin-top:-100px !important;
  }
}


/* ======================================================
   L25 TRUST LOGO CARD FINAL REFINEMENT
   - 100% pure white cards behind each logo
   - Removed faded left/right patches
====================================================== */

.trusted-logo-card,
body.light-theme .trusted-logo-card{
  background:#ffffff !important;
  border:1px solid rgba(20,20,28,.10) !important;
  box-shadow:0 18px 50px rgba(20,20,28,.08) !important;
  backdrop-filter:none !important;
}

.trusted-logo-card:hover,
body.light-theme .trusted-logo-card:hover{
  background:#ffffff !important;
  border-color:rgba(123,44,255,.30) !important;
  box-shadow:0 22px 58px rgba(123,44,255,.12) !important;
}

/* Remove faded patches from left/right side */
.trusted-fade,
.trusted-fade-left,
.trusted-fade-right,
body.light-theme .trusted-fade-left,
body.light-theme .trusted-fade-right{
  display:none !important;
  background:none !important;
}

/* Remove any strip/patch look behind marquee */
.trusted-marquee-shell,
body.light-theme .trusted-marquee-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Keep logo row clean */
.trusted-marquee{
  background:transparent !important;
}

/* Logo image clean rendering */
.trusted-logo-card img{
  filter:none !important;
  opacity:1 !important;
}


/* ======================================================
   L26 TRUST LOGO MASK FADE FINAL
   - Smooth left/right masking without visible faded patch
   - No overlay patch elements
   - Prevents hard logo cuts at edges
====================================================== */

/* Use CSS mask instead of visible fade overlays */
.trusted-marquee-shell{
  overflow:hidden !important;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  ) !important;
}

/* Make track start with breathing space so logo cards do not feel cut */
.trusted-track{
  padding-left:90px !important;
  padding-right:90px !important;
}

/* Keep fade divs fully removed */
.trusted-fade,
.trusted-fade-left,
.trusted-fade-right{
  display:none !important;
}

/* Mobile softer mask */
@media(max-width:720px){
  .trusted-marquee-shell{
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    ) !important;
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    ) !important;
  }

  .trusted-track{
    padding-left:48px !important;
    padding-right:48px !important;
  }
}

/* Small mobile */
@media(max-width:420px){
  .trusted-track{
    padding-left:34px !important;
    padding-right:34px !important;
  }
}


/* ======================================================
   L27 LIGHT DEFAULT + DARK TOGGLE ASSURANCE
====================================================== */

body.light-theme{
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.16), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(61,99,255,.10), transparent 22%),
    linear-gradient(180deg,#fbfbff,#eeeef7) !important;
  color:#111114 !important;
}

body:not(.light-theme){
  background:
    radial-gradient(circle at 50% -10%, rgba(123,44,255,.28), transparent 34%),
    radial-gradient(circle at 50% 40%, rgba(61,99,255,.12), transparent 28%),
    #050308 !important;
  color:#f5f5f7 !important;
}

body:not(.light-theme) .hero-title,
body:not(.light-theme) .hero-title span,
body:not(.light-theme) .trusted-section h2,
body:not(.light-theme) .section-head h2{
  color:#f5f5f7 !important;
}

body:not(.light-theme) .hero-sub,
body:not(.light-theme) .trusted-sub,
body:not(.light-theme) .section-head p{
  color:#b8b4c7 !important;
}

body:not(.light-theme) .top-nav{
  background:rgba(13,13,16,.72) !important;
  border-color:rgba(255,255,255,.12) !important;
}

body.light-theme .top-nav{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(20,20,28,.12) !important;
}

.theme-toggle,
.nav-theme-toggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  z-index:999 !important;
}

/* ======================================================
   L29 HERO UPSCALE VISUAL UPDATE
====================================================== */
.upscale-hero-visual{
  height:390px !important;
  margin-top:56px !important;
}
.upscale-card{
  position:absolute;
  z-index:6;
  width:245px;
  min-height:210px;
  padding:20px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(9,9,16,.56);
  backdrop-filter:blur(20px);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
  text-align:left;
  animation:float 5.2s ease-in-out infinite;
}
.low-res-card{left:8%;top:44%;transform:translateY(-50%) rotate(-3deg)}
.high-res-card{right:8%;top:44%;transform:translateY(-50%) rotate(3deg);animation-delay:.45s}
.image-icon{
  position:relative;
  width:100%;
  height:92px;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.18);
}
.pixelated-icon{
  background:
    linear-gradient(90deg, rgba(255,255,255,.20) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(135deg,rgba(123,44,255,.42),rgba(68,78,145,.70));
  background-size:18px 18px,18px 18px,100% 100%;
  filter:contrast(.94) saturate(.85);
}
.sharp-icon{
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.95), transparent 8%),
    linear-gradient(135deg,rgba(134,86,255,.92),rgba(94,129,255,.95));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.sharp-icon::before{
  content:"";
  position:absolute;
  inset:18px 24px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:18px;
}
.sharp-icon::after{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  bottom:24px;
  height:2px;
  background:rgba(255,255,255,.72);
  box-shadow:0 -16px 0 rgba(255,255,255,.24), 0 -32px 0 rgba(255,255,255,.16);
}
.pixel{
  position:absolute;
  display:block;
  width:22px;
  height:22px;
  border-radius:6px;
  background:rgba(255,255,255,.24);
}
.p1{left:24px;top:20px}.p2{left:54px;top:20px}.p3{left:24px;top:50px}.p4{left:84px;top:50px}
.visual-label,
.qa-chip span{
  display:block;
  color:#aaa;
  font-size:11px;
  font-weight:850;
  letter-spacing:.10em;
  margin-bottom:7px;
}
.upscale-card strong{display:block;font-size:21px;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.upscale-card em{
  display:inline-flex;
  font-style:normal;
  color:#fff;
  background:linear-gradient(135deg,var(--purple),#5d14e8);
  padding:9px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:850;
  box-shadow:0 16px 36px rgba(123,44,255,.22);
}
.upscale-flow-arrow{
  position:absolute;
  z-index:7;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:190px;
  height:86px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  box-shadow:0 24px 80px rgba(123,44,255,.24);
}
.upscale-flow-arrow span{font-size:12px;font-weight:850;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.upscale-flow-arrow i{font-style:normal;font-size:34px;line-height:1;color:#fff;margin-top:-2px}
.qa-chip{
  position:absolute;
  z-index:8;
  min-width:170px;
  padding:15px 17px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(4,4,8,.50);
  backdrop-filter:blur(20px);
  box-shadow:0 22px 70px rgba(0,0,0,.18);
  text-align:left;
  animation:float 5.3s ease-in-out infinite;
}
.qa-chip strong{font-size:16px;letter-spacing:-.04em}
.chip-human{left:33%;bottom:10%;transform:rotate(-3deg);animation-delay:.25s}
.chip-delivery{right:28%;bottom:10%;transform:rotate(3deg);animation-delay:.55s}
body.light-theme .upscale-card,
body.light-theme .qa-chip{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(20,20,28,.12) !important;
  color:#101014 !important;
  box-shadow:0 24px 70px rgba(30,20,80,.10) !important;
}
body.light-theme .visual-label,
body.light-theme .qa-chip span{color:#6b6678 !important}
body.light-theme .upscale-card em{color:#fff !important}
body.light-theme .upscale-flow-arrow{
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(20,20,28,.12) !important;
  box-shadow:0 24px 70px rgba(123,44,255,.13) !important;
}
body.light-theme .upscale-flow-arrow span{color:#6b6678 !important}
body.light-theme .upscale-flow-arrow i{color:#111114 !important}
body.light-theme .pixelated-icon{border-color:rgba(20,20,28,.12)}
body.light-theme .sharp-icon{border-color:rgba(20,20,28,.12)}
@media(max-width:900px){
  .upscale-hero-visual{height:420px !important;margin-top:40px !important}
  .upscale-card{width:46%;min-height:176px;padding:14px;border-radius:24px}
  .low-res-card{left:0;top:36%;transform:rotate(-2deg)}
  .high-res-card{right:0;top:36%;transform:rotate(2deg)}
  .image-icon{height:70px;border-radius:18px;margin-bottom:12px}
  .upscale-card strong{font-size:17px}
  .upscale-card em{font-size:11px;padding:7px 10px}
  .upscale-flow-arrow{top:78%;width:168px;height:72px}
  .upscale-flow-arrow i{font-size:28px}
  .qa-chip{display:none}
}
@media(max-width:520px){
  .upscale-hero-visual{height:430px !important}
  .upscale-card{width:100%;left:0 !important;right:auto !important;transform:none !important}
  .low-res-card{top:0 !important}
  .high-res-card{top:218px !important}
  .upscale-flow-arrow{top:205px !important;width:142px;height:56px}
  .upscale-flow-arrow span{display:none}
}


/* L31 — VELVORA logo + favicon update */
.brand-logo{
  min-width: clamp(138px, 14vw, 190px) !important;
  width: clamp(138px, 14vw, 190px) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}
.brand-logo img{
  width: 100% !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 1180px){
  .brand-logo{
    width: clamp(132px, 34vw, 180px) !important;
    min-width: clamp(132px, 34vw, 180px) !important;
  }
  .brand-logo img{
    max-height: 38px !important;
  }
}
@media (max-width: 520px){
  .brand-logo{
    width: 142px !important;
    min-width: 142px !important;
  }
  .brand-logo img{
    max-height: 32px !important;
  }
}

/* L32 Update: more space between hero visual and trusted section */
.trusted-section,
.trusted,
.logo-cloud,
.industry-signal-section,
section.trusted-logos {
  margin-top: clamp(90px, 10vw, 150px) !important;
  padding-top: clamp(36px, 5vw, 72px) !important;
}

.hero + .trusted-section,
.hero + .trusted,
.hero + .logo-cloud,
.hero + .industry-signal-section {
  margin-top: clamp(100px, 11vw, 160px) !important;
}

/* Keep trusted title away from hero floating cards */
.trusted-section .section-badge,
.trusted .section-badge,
.logo-cloud .section-badge,
.industry-signal-section .section-badge {
  margin-top: 12px;
}


/* ===== L34 FIXES ===== */

/* Prevent hero text overflow on mobile */
.hero-title,
.hero h1{
  font-size: clamp(52px, 8vw, 112px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.05em !important;
  max-width: 980px;
  margin-inline: auto;
  text-wrap: balance;
}

/* Better mobile hero */
@media (max-width: 768px){
  .hero-title,
  .hero h1{
    font-size: clamp(42px, 12vw, 72px) !important;
    line-height: 0.98 !important;
    padding-inline: 16px;
  }

  .hero-subtitle,
  .hero p{
    font-size: 18px !important;
    line-height: 1.6 !important;
    padding-inline: 18px;
  }
}

/* Fix compare section clipping */
.compare-wrapper,
.before-after-wrapper,
.comparison-container{
  overflow: hidden !important;
  border-radius: 36px !important;
}

/* Fix compare labels */
.compare-label,
.before-label,
.after-label{
  z-index: 5;
}

/* Proper spacing */
.compare-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-top:18px;
}

/* Remove accidental overlay text */
.compare-wrapper p,
.before-after-wrapper p{
  overflow:hidden;
}

/* Extra spacing between sections */
.trusted-section,
.logo-cloud{
  margin-top: 120px !important;
}

/* Better navbar logo fit */
.navbar-brand img,
.logo img{
  height: 34px !important;
  width: auto !important;
}


/* ===== L35 Before / After Stats + Copy Fix ===== */
.compare-stat-tag{
  display:block;
  margin-top:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.before-stat{
  background:#ffffff;
  color:#111111;
}

.after-stat{
  background:#6f35ff;
  color:#ffffff;
}

.before-label,
.after-label,
.compare-label{
  width:auto !important;
  height:auto !important;
  min-width:92px;
  padding:12px 16px !important;
  border-radius:24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}

/* place labels/tags like original before/after pills */
.before-label,
.compare-before{
  left:24px !important;
  bottom:24px !important;
}

.after-label,
.compare-after{
  right:24px !important;
  bottom:24px !important;
}

/* update compare footer text style */
.compare-footer,
.transformation-footer,
.before-after-footer{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:22px !important;
  flex-wrap:wrap !important;
}

.compare-footer p,
.transformation-footer p,
.before-after-footer p{
  color:#5f5f70 !important;
  font-weight:600 !important;
}

/* section title + subline better fit */
.before-after-section h2,
.transformation-section h2,
.reveal-section h2{
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:balance !important;
}

.before-after-section .section-subtitle,
.transformation-section .section-subtitle,
.reveal-section .section-subtitle,
.before-after-section > p,
.transformation-section > p,
.reveal-section > p{
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:balance !important;
}

@media(max-width:768px){
  .compare-stat-tag{
    font-size:10px;
    padding:7px 10px;
  }
  .before-label,
  .after-label,
  .compare-label{
    min-width:80px;
    padding:10px 12px !important;
  }
  .compare-footer,
  .transformation-footer,
  .before-after-footer{
    align-items:flex-start !important;
  }
}


/* ===== L36 Horizontal Before/After Stat Pills ===== */

.before-label,
.after-label,
.compare-label,
.before-tag,
.after-tag{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:auto !important;
    min-width:fit-content !important;
    padding:14px 18px !important;
    border-radius:999px !important;
}

.compare-stat-tag{
    display:inline-flex !important;
    margin-top:0 !important;
    font-size:12px !important;
    line-height:1 !important;
    padding:8px 12px !important;
    border-radius:999px !important;
}

.before-stat{
    background:#ffffff !important;
    color:#111111 !important;
}

.after-stat{
    background:#6f35ff !important;
    color:#ffffff !important;
}

@media(max-width:768px){
    .before-label,
    .after-label,
    .compare-label{
        gap:8px !important;
        padding:10px 14px !important;
    }

    .compare-stat-tag{
        font-size:10px !important;
        padding:6px 9px !important;
    }
}


/* ===== L39 FINAL FIX: Compare labels exactly as requested ===== */

/* Ensure comparison image/card is the positioning parent */
.comparison-container,
.compare-wrapper,
.before-after-wrapper,
.drag-reveal,
.reveal-card,
.compare-card,
.reveal-media,
.compare-media {
  position: relative !important;
  overflow: hidden !important;
}

/* Hide old simple label styles so only clean L39 labels appear */
.before-label,
.after-label,
.compare-label,
.compare-before,
.compare-after {
  display: none !important;
}

/* Main pill */
.v-compare-label {
  position: absolute !important;
  bottom: 24px !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  background: #e8e4dd !important;
  color: #111 !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.14) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
  white-space: nowrap !important;
}

.v-before-label { left: 24px !important; }
.v-after-label { right: 24px !important; }

.v-compare-label strong {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  color: #111 !important;
}

.v-compare-label span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #7436ff !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

/* Dynamic hide classes */
.v-compare-label.is-hidden {
  opacity: 0 !important;
  transform: translateY(8px) scale(.96) !important;
}

/* Desktop/mobile polish */
@media (max-width: 768px) {
  .v-compare-label {
    bottom: 16px !important;
    gap: 8px !important;
    padding: 9px 11px !important;
  }
  .v-before-label { left: 14px !important; }
  .v-after-label { right: 14px !important; }
  .v-compare-label strong {
    font-size: 13px !important;
  }
  .v-compare-label span {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }
}

/* Footer text */
.compare-footer,
.transformation-footer,
.before-after-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}


/* ===== L40 EXACT TAG PLACEMENT FIX ===== */

/* Compare stage must be parent for labels */
.compare-stage.real-image-compare,
.compare-stage,
.real-image-compare {
  position: relative !important;
  overflow: hidden !important;
}

/* Hide original old labels */
.compare-label.before-label,
.compare-label.after-label,
.before-label:not(.v-before-label),
.after-label:not(.v-after-label),
.compare-before,
.compare-after {
  display: none !important;
}

/* Show only our final labels inside image */
.compare-stage .v-compare-label {
  position: absolute !important;
  bottom: 28px !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  background: #e7e3dd !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.16) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity .18s ease, transform .18s ease !important;
  white-space: nowrap !important;
}

.compare-stage .v-before-label {
  left: 28px !important;
}

.compare-stage .v-after-label {
  right: 28px !important;
}

.compare-stage .v-compare-label strong {
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  color: #111 !important;
}

.compare-stage .v-compare-label span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #7337ff !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.compare-stage .v-compare-label.is-hidden {
  opacity: 0 !important;
  transform: translateY(8px) scale(.96) !important;
}

@media (max-width: 768px) {
  .compare-stage .v-compare-label {
    bottom: 18px !important;
    gap: 8px !important;
    padding: 9px 11px !important;
  }
  .compare-stage .v-before-label {
    left: 16px !important;
  }
  .compare-stage .v-after-label {
    right: 16px !important;
  }
  .compare-stage .v-compare-label strong {
    font-size: 13px !important;
  }
  .compare-stage .v-compare-label span {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }
}


/* ===== L42 FINAL HARD FIX ===== */
.v-compare-label.l42-hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.compare-stage .v-compare-label {
  display: flex !important;
}

/* ===== L47 Trusted Logos Final Fix ===== */
.trusted-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  margin:48px auto 0;
  animation: trustedScroll 30s linear infinite;
}
.trusted-card{
  width:220px;
  height:96px;
  flex:0 0 auto;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border-radius:24px !important;
  box-shadow:0 18px 45px rgba(20,20,40,.08) !important;
  overflow:hidden !important;
}
.trusted-card img{
  max-width:84% !important;
  max-height:64px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.trusted-card img[src*="Logo-4"]{
  max-width:88% !important;
  max-height:70px !important;
}
@keyframes trustedScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ===== L48 Trusted Logo Final Fix ===== */
.trusted-track{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  width:max-content !important;
  margin:48px auto 0 !important;
  animation: trustedScroll 28s linear infinite !important;
}
.trusted-card{
  width:220px !important;
  height:96px !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  border-radius:24px !important;
  box-shadow:0 18px 45px rgba(20,20,40,.08) !important;
  overflow:hidden !important;
}
.trusted-card img{
  max-width:82% !important;
  max-height:62px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.trusted-card img[src*="Logo-4"]{
  max-width:88% !important;
  max-height:70px !important;
}
@keyframes trustedScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}