:root{
  --glass-rgb: 255,255,255;
  --ink:#0b1220;
  --muted:#4b5563;

  /* brand hues kept for pills etc. */
  --brand:#f97316; /* industrial orange */
  --brand-2:#ff8a00;

  /* glass button tones */
  --btn-glass-bg: rgba(255,255,255,.62);
  --btn-glass-border: rgba(255,255,255,.85);
  --btn-glass-text: #0b1220;
  --btn-glass-shadow: 0 10px 28px rgba(2,6,23,.14);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, #f9731614, transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, #0f172a14, transparent 60%),
    linear-gradient(180deg, #f9fafb 0%, #eef1f5 100%);
  overflow-x:hidden;
}

/* Base gradient container now moves too */
#bg-gradient{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 700px at 10% -10%, #f9731614, transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, #11182711, transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #eef1f5 100%);
  filter:saturate(110%);
  transform-origin:50% 50%;
  animation: bgBaseWave 18s ease-in-out infinite alternate;
}

/* Stronger motion overlays */
#bg-gradient::before,
#bg-gradient::after{
  content:""; position:absolute; inset:-18%;
  pointer-events:none; z-index:-1;
}

/* Colored clouds with clear parallax and rotation */
#bg-gradient::before{
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(249,115,22,.18), transparent 60%),
    radial-gradient(50% 40% at 80% 20%, rgba(148,163,184,.20), transparent 60%),
    radial-gradient(80% 60% at 50% 80%, rgba(255,255,255,.18), transparent 60%);
  filter: blur(1.5px);
  opacity:.98;
  animation: bgDrift 16s ease-in-out infinite alternate;
}

/* Brighter sheen + conic sweep ring */
#bg-gradient::after{
  background:
    radial-gradient(120% 80% at 10% 10%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(140% 100% at 90% 90%, rgba(255,255,255,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(17,24,39,.06) 0px, rgba(17,24,39,.06) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(17,24,39,.06) 0px, rgba(17,24,39,.06) 1px, transparent 1px, transparent 24px);
  filter: blur(6px);
  opacity:.95;
  animation: bgBreathe 14s ease-in-out infinite alternate;
  mix-blend-mode:soft-light;
}

/* Noticeable transforms */
@keyframes bgBaseWave{
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.02) rotate(-1deg); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.08)  rotate(1deg); }
}
@keyframes bgDrift{
  0%   { transform: translate3d(-10%, -8%, 0) scale(1.04) rotate(-4deg); }
  100% { transform: translate3d(10%, 8%, 0)  scale(1.14) rotate(4deg); }
}
@keyframes bgBreathe{
  0%   { transform: translate3d(-1%, -1%, 0) scale(1.00); opacity:.65; }
  100% { transform: translate3d(2.5%, 1.5%, 0) scale(1.10); opacity:1; }
}
@keyframes bgSweep{
  0%   { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

/* Remove moving dots canvas entirely */
#bg-particles{ display:none !important; }

/* Nav */
.nav{
  position:-webkit-sticky; position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0;
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  z-index:100;
}

.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px, 4vw, 40px);
  width:100%;
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-0.02em;
}
.brand svg{color:var(--brand)}
.brand-logo{height:38px; width:auto; display:block}
.links{display:flex; gap:16px; align-items:center}
.links a{
  text-decoration:none; font-weight:600; font-size:14px; opacity:.85;
}
.links a:hover{opacity:1}

/* Hero */
.hero{
  max-width:1100px;
  margin:8vh auto 0;
  padding:0 clamp(16px, 4vw, 40px);
  text-align:left;
}

.badge{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-bottom:14px;
  font-size:12px; color:#0f172a;
}
.pill{
  padding:6px 10px; border-radius:8px; background:#ffffffcc;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid #ffffff70;
}
.pill-yc{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:white; border:none}

h1{
  margin:6px 0 10px 0;
  font-size: clamp(34px, 6vw, 62px);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ink);
  max-width:900px;
}

.sub{
  max-width:820px; margin:10px 0 22px 0;
  font-size: clamp(16px, 2.2vw, 20px);
  color:var(--muted);
}

.cta{display:flex; gap:12px; flex-wrap:wrap}

/* Base button */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:0.01em; border:1px solid #00000010;
  background:#ffffffcc;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-outline {
  color:var(--brand);
  background:#ffffffbf;
  border:1px solid var(--btn-glass-border);
  box-shadow: var(--btn-glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-ghost{background:transparent; border:1px solid #00000015}

/* Glassy primary button */
.btn-primary{
  color:var(--btn-glass-text);
  background: var(--btn-glass-bg);
  border:1px solid var(--btn-glass-border);
  box-shadow: var(--btn-glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}

/* inner glow + faster sheen sweep */
.btn-primary::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(255,255,255,.25) 70%, rgba(255,255,255,0) 100%);
  mix-blend-mode:soft-light;
  opacity:.95;
}
.btn-primary::before{
  content:""; position:absolute; top:-25%; left:-70%; width:42%; height:170%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  transform:skewX(-20deg);
  animation:btnSheen 3.8s linear infinite;
  opacity:.78;
}
@keyframes btnSheen{
  0%{ left:-75% }
  100%{ left:125% }
}
.btn-primary:active{ transform:translateY(0); box-shadow: 0 6px 18px rgba(2,6,23,.16) }

/* Glass card with spacing */
.glass.card{
  margin:28px 0 12px 0;
  /* width:min(980px, 100%); */
  border-radius:24px;
  background: rgba(var(--glass-rgb), .45);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 40px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding:24px;
}

.card-row{ display:grid; gap:16px; align-items:start; }
.card-row + .card-row{ margin-top:16px; }

.kpis{grid-template-columns: repeat(3, minmax(0,1fr))}
.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}

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

.metric{
  background:#ffffffb3; border:1px solid #ffffff80; border-radius:16px;
  padding:20px;
}
.kpi{display:block; font-size:28px; font-weight:800; color:var(--ink)}
.kpi-sub{display:block; font-size:13px; color:#475569}

.divider{
  height:1px; margin:18px 0;
  background:linear-gradient(90deg, transparent, #00000020, transparent);
}

/* Chips base */
.chip{
  padding:10px 12px; border-radius:999px;
  background:#ffffffaa; border:1px solid #ffffff80; font-size:13px; color:#1f2937;
  width:max-content;
}

/* Horizontal chip scroller with infinite marquee */
.chip-scroller{
  margin: 0;
  padding: 6px 2px;
  overflow: hidden; /* hide native scrollbar */
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.chip-track{
  display: flex;
  gap: 12px;
  min-width: max-content;
  will-change: transform;
  animation: marquee var(--marquee-duration, 32s) linear infinite;
}
.chip-scroller:hover .chip-track{
  animation-play-state: paused; /* pause on hover */
}
@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Logo marquee title and spacing */
.logo-section{ margin: 96px 0 46px; }
.logo-title{
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .9;
}

/* Logo marquee (same width as hero container) */
.logo-scroller{
  width:100%;
  margin: 8px 0 4px;
  padding: 8px 0;
  overflow:hidden; /* hide native scrollbar */
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.logo-track{
  display:flex; align-items:center; gap:88px;
  min-width:max-content; will-change: transform;
  animation: marquee var(--marquee-duration, 136s) linear infinite;
}
.logo-scroller:hover .logo-track{ animation-play-state: paused; }
.logo{
  height:28px; width:auto; display:block; object-fit:contain; image-rendering:-webkit-optimize-contrast;
  /* Black mask effect without altering source assets */
  filter: brightness(0) saturate(100%);
}

/* Features */
.features .feature{
  background:#ffffffb3; border:1px solid #ffffff80; border-radius:16px;
  padding:18px;
}
.features h3{ margin:0 0 6px 0; font-size:16px; letter-spacing:-0.01em; }
.features p{ margin:0; font-size:14px; color:#475569 }

/* FAQ */
.faq{
  max-width:1100px;
  margin: 72px auto 0;
  /* padding: 0 clamp(16px, 4vw, 40px); */
}
.faq-title{
  margin: 10px 0 12px;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -0.01em;
}
.faq-list{ display:grid; gap:12px; }

.faq-item{
  background:#ffffffb3; 
  border:1px solid #ffffff80; 
  border-radius:16px; 
  overflow:hidden;
  background: rgba(var(--glass-rgb), .45);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 40px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.5);
}
.faq-item summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; font-weight:700; font-size:15px;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+"; margin-left:auto; color:#64748b; font-weight:800;
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after{ content:"–"; color:#0b1220 }
.faq-item .answer{ padding:0 18px 16px 18px; color:#475569; font-size:14px }

/* Focus styles */
.faq-item summary:focus{ outline:none }
.faq-item summary:focus-visible{
  box-shadow: inset 0 0 0 2px #94a3b866;
  border-radius:12px;
}

.footnote{ margin:12px 0 0 0; font-size:10px; color:#94a3b8; text-align:center }

.footer{
  max-width:1100px; margin:60px auto 20px;
  padding:0 clamp(16px, 4vw, 40px); text-align:left; color:#94a3b8
}

/* Existing floating blobs behind hero (kept) */
.hero::before, .hero::after{
  content:""; position:absolute; z-index:-1; filter:blur(60px); opacity:.35; transform:translateZ(0);
}
.hero::before{
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #9ca3af, transparent 60%);
  left:5%; top:18%; animation:floatA 10s ease-in-out infinite;
}
.hero::after{
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle at 70% 70%, #f97316, transparent 20%);
  left:38%; top:28%; animation:floatB 12s ease-in-out infinite;
}
@keyframes floatA{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-28px)} }
@keyframes floatB{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(24px)} }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none}
  .hero::before,.hero::after{animation:none}
  #bg-gradient{animation:none}
  #bg-gradient::before,#bg-gradient::after{animation:none}
  .chip-track,.logo-track{animation:none}
  .chip-scroller,.logo-scroller{overflow-x:auto}
}

@media (max-width:640px){
  nav.links{
    display: none;
  }
}