/* ══════════════════════════════════════════════
   WYLCO / K11 AMERICA — Design System 2026
   Industrial Premium · Redesign
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap');

/* ─── TOKENS ─── */
:root {
  --orange:    #D4541A;
  --orange-d:  #B84417;
  --orange-t:  rgba(212,84,26,0.12);
  --green:     #1A7A3F;
  --green-d:   #145f31;
  --green-t:   rgba(26,122,63,0.12);
  --dark:      #0F1117;
  --dark-2:    #171B24;
  --dark-3:    #1E2330;
  --dark-4:    #252A38;
  --warm:      #F5F0E8;
  --warm-2:    #EDE6DA;
  --warm-3:    #E2D8CB;
  --white:     #FFFFFF;
  --txt:       #0F1117;
  --txt-mid:   #3A3F4D;
  --txt-muted: #6B7080;
  --txt-light: #949AAA;
  --bd-dark:        rgba(255,255,255,0.07);
  --bd-dark-strong: rgba(255,255,255,0.14);
  --bd-light:       rgba(0,0,0,0.08);
  --bd-light-strong:rgba(0,0,0,0.14);
  --sh-sm: 0 1px 4px rgba(0,0,0,0.08),0 2px 12px rgba(0,0,0,0.05);
  --sh-md: 0 4px 24px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.05);
  --sh-lg: 0 12px 48px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.06);
  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 980px;
  --mw: 1160px;
  --nav-h: 60px;
  --sp: clamp(72px, 8vw, 112px);
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body { font-family:var(--fb); background:var(--dark); color:var(--white); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:var(--fb); cursor:pointer; }
ul,ol { list-style:none; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes scanline{ 0%{top:-5%} 100%{top:105%} }
@keyframes spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s}

/* ─── LAYOUT ─── */
.wrap { max-width:var(--mw); margin:0 auto; padding:0 max(24px,5vw); }
.section { padding:var(--sp) max(24px,5vw); }
.section-dark  { background:var(--dark); }
.section-dark2 { background:var(--dark-2); }
.section-warm  { background:var(--warm); }
.section-warm2 { background:var(--warm-2); }
.section-white { background:var(--white); }

/* ─── TYPOGRAPHY ─── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fd); font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
  margin-bottom:16px;
}
.eyebrow::before { content:''; display:block; width:18px; height:1.5px; background:var(--orange); flex-shrink:0; }
.eyebrow.green { color:var(--green); }
.eyebrow.green::before { background:var(--green); }
.eyebrow.white { color:rgba(255,255,255,.5); }
.eyebrow.white::before { background:rgba(255,255,255,.3); }
.eyebrow.no-line::before { display:none; }

.display {
  font-family:var(--fd); font-weight:900;
  font-size:clamp(3rem,5.5vw,5.5rem);
  line-height:.93; letter-spacing:.02em;
  text-transform:uppercase;
}
.display.dark-txt { color:var(--txt); }
.display em { color:var(--orange); font-style:normal; }
.display em.green { color:var(--green); }

.headline {
  font-family:var(--fd); font-weight:800;
  font-size:clamp(2rem,3.5vw,3.2rem);
  line-height:.96; letter-spacing:.02em; text-transform:uppercase;
}
.headline.dark-txt { color:var(--txt); }
.headline em { color:var(--orange); font-style:normal; }

.body-lg { font-size:1.05rem; font-weight:300; line-height:1.75; letter-spacing:-.01em; }
.body-md { font-size:.95rem; line-height:1.75; letter-spacing:-.01em; }
.body-sm { font-size:.85rem; line-height:1.7; letter-spacing:-.01em; }
.muted    { color:var(--txt-muted); }
.white-muted { color:rgba(255,255,255,.55); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fb); font-weight:600;
  border:none; cursor:pointer; transition:all .2s;
  white-space:nowrap; text-align:center;
}
.btn-primary {
  background:var(--orange); color:#fff;
  font-size:15px; padding:13px 26px; border-radius:var(--r-pill);
}
.btn-primary:hover { background:var(--orange-d); transform:scale(1.02); box-shadow:0 6px 24px rgba(212,84,26,.3); }

.btn-dark {
  background:var(--dark); color:#fff;
  font-size:15px; padding:13px 26px; border-radius:var(--r-pill);
}
.btn-dark:hover { background:var(--dark-3); transform:scale(1.02); }

.btn-ghost-light {
  background:rgba(255,255,255,.1); color:#fff;
  font-size:15px; padding:13px 26px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
}
.btn-ghost-light:hover { background:rgba(255,255,255,.18); transform:scale(1.02); }

.btn-ghost-dark {
  background:rgba(0,0,0,.06); color:var(--txt);
  font-size:15px; padding:13px 26px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.10);
}
.btn-ghost-dark:hover { background:rgba(0,0,0,.1); transform:scale(1.02); }

.btn-outline-orange {
  background:transparent; color:var(--orange);
  font-size:14px; padding:10px 22px; border-radius:var(--r-pill);
  border:1.5px solid rgba(212,84,26,.4);
}
.btn-outline-orange:hover { background:var(--orange-t); border-color:var(--orange); }

.btn-outline-green {
  background:transparent; color:var(--green);
  font-size:14px; padding:10px 22px; border-radius:var(--r-pill);
  border:1.5px solid rgba(26,122,63,.4);
}
.btn-outline-green:hover { background:var(--green-t); border-color:var(--green); }

.btn-white {
  background:#fff; color:var(--orange);
  font-size:14px; font-weight:700; padding:11px 22px; border-radius:var(--r-pill);
  border:none;
}
.btn-white:hover { background:rgba(255,255,255,.9); transform:scale(1.02); }

.btn-green {
  background:var(--green); color:#fff;
  font-size:15px; padding:13px 26px; border-radius:var(--r-pill);
}
.btn-green:hover { background:var(--green-d); transform:scale(1.02); }

.btn-sm { font-size:13px !important; padding:8px 18px !important; }
.btn-lg { font-size:17px !important; padding:16px 34px !important; }

.arr { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.btn-text {
  background:none; border:none; color:var(--orange);
  font-family:var(--fb); font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; transition:gap .2s;
}
.btn-text:hover { gap:10px; }
.btn-text.white { color:rgba(255,255,255,.7); }
.btn-text.white:hover { color:#fff; }

/* ─── TAGS ─── */
.tag {
  display:inline-block; font-family:var(--fb); font-size:10px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:5px;
}
.tag-orange { background:var(--orange-t); color:var(--orange); }
.tag-green  { background:var(--green-t);  color:var(--green);  }
.tag-gray   { background:rgba(0,0,0,.06); color:var(--txt-muted); }
.tag-dark   { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.tag-white  { background:rgba(255,255,255,.9); color:var(--txt); }

/* ─── NAV ─── */
.top-bar {
  background:var(--orange); color:#fff;
  padding:10px 24px; text-align:center;
  font-size:.82rem; font-weight:500; letter-spacing:.01em;
  position:relative; z-index:1001;
}
.top-bar a { color:#fff; font-weight:700; text-decoration:underline; margin-left:6px; cursor:pointer; }
.top-bar a:hover { opacity:.85; }

nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(24px,4vw);
  background:rgba(15,17,23,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--bd-dark);
  transition:background .3s;
}
nav.scrolled { background:rgba(15,17,23,.97); }

.nav-logo {
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.nav-logo-img { height:32px; width:32px; object-fit:contain; flex-shrink:0; }
.nav-logo-name {
  font-family:var(--fd); font-size:1.15rem; font-weight:800;
  letter-spacing:.14em; color:#fff; text-transform:uppercase;
}

.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a {
  font-size:13px; font-weight:500; color:rgba(255,255,255,.6);
  letter-spacing:.01em; transition:color .2s; cursor:pointer;
}
.nav-links a:hover, .nav-links a.active { color:#fff; }

.nav-right { display:flex; align-items:center; gap:12px; }
.lang-toggle {
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.08); border-radius:var(--r-pill);
  padding:3px; border:.5px solid rgba(255,255,255,.12);
}
.lang-btn {
  font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:4px 10px; border-radius:var(--r-pill); border:none;
  background:transparent; color:rgba(255,255,255,.45); cursor:pointer; transition:all .2s;
}
.lang-btn.active { background:var(--orange); color:#fff; }
.lang-btn:hover:not(.active) { color:rgba(255,255,255,.8); }

.nav-cta {
  background:var(--orange); color:#fff;
  font-size:13px; font-weight:700;
  padding:7px 18px; border-radius:var(--r-pill);
  transition:all .2s; white-space:nowrap; cursor:pointer; border:none;
}
.nav-cta:hover { background:var(--orange-d); transform:scale(1.02); }

.nav-mobile-btn {
  display:none; background:none; border:none;
  padding:8px; flex-direction:column; gap:5px; cursor:pointer;
}
.nav-mobile-btn span { display:block; width:20px; height:1.5px; background:#fff; border-radius:2px; transition:.3s; }
.mobile-menu {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(15,17,23,.98); backdrop-filter:blur(24px);
  border-bottom:.5px solid var(--bd-dark); padding:16px 24px 24px; z-index:999;
}
.mobile-menu.open { display:block; animation:fadeIn .2s ease; }
.mobile-menu a {
  display:block; font-size:16px; font-weight:500; color:rgba(255,255,255,.7);
  padding:13px 0; border-bottom:.5px solid var(--bd-dark); cursor:pointer;
}
.mobile-menu a:last-child { border:none; color:var(--orange); }
.mobile-lang { display:flex; gap:8px; padding:16px 0 8px; }
.mobile-lang button {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.5);
  border:.5px solid rgba(255,255,255,.12); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; padding:5px 14px; cursor:pointer; transition:all .2s;
}
.mobile-lang button.active { background:var(--orange); color:#fff; border-color:var(--orange); }

/* ─── HERO ─── */
.hero {
  min-height:100vh; background:var(--dark);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:stretch; gap:0; overflow:hidden; position:relative;
}
/* Hero video background */
.hero-video-bg {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .55; filter: saturate(.65) contrast(1.05);
  z-index: 0;
}

.hero-noise {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(212,84,26,.06), transparent 60%),
              linear-gradient(to right, rgba(15,17,23,.55) 35%, rgba(15,17,23,.05) 100%);
  z-index: 1;
}
.hero-left {
  padding:clamp(80px,10vw,120px) max(40px,5vw) 80px max(48px,7vw);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:3; max-width:660px;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fd); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
  margin-bottom:28px; animation:fadeIn .8s ease both;
}
.hero-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse 2s infinite; }

.hero-h1 {
  font-family:var(--fd); font-weight:900;
  font-size:clamp(4rem,7.5vw,8rem);
  line-height:.88; letter-spacing:.02em; text-transform:uppercase;
  color:#fff; margin-bottom:28px;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .1s both;
}
.hero-h1 em { color:var(--orange); font-style:normal; display:block; }

.hero-sub {
  font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.6);
  line-height:1.72; letter-spacing:-.01em; max-width:460px;
  margin-bottom:36px; animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .2s both;
}
.hero-actions {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .28s both;
}
.hero-trust {
  display:flex; flex-wrap:wrap; gap:16px 28px;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .36s both;
}
.trust-pill {
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:500; color:rgba(255,255,255,.5); letter-spacing:.01em;
}
.trust-pill svg { width:14px; height:14px; stroke:var(--green); fill:none; stroke-width:2.5; flex-shrink:0; }

/* Hero right */
.hero-right {
  height:100%; min-height:calc(100vh - var(--nav-h));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; z-index:3;
  border-left:.5px solid var(--bd-dark);
  background:rgba(255,255,255,.02);
}
.hero-grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(212,84,26,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(212,84,26,.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 60% 40%, black, transparent);
}
.hero-right-inner { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:80px 48px; }

.hero-card {
  position:relative; z-index:2; background:var(--dark-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg), 0 0 0 .5px var(--bd-dark-strong);
  overflow:hidden; width:100%; max-width:400px;
  animation:fadeIn 1s ease .4s both;
}
.hero-card-img-wrap {
  width:100%; height:260px; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:24px;
}
.hero-card-img-wrap img { max-height:212px; width:auto; object-fit:contain; transition:opacity .3s; }
.hero-card-info { padding:22px 26px 26px; border-top:.5px solid var(--bd-dark); }
.hero-card-info .tag { margin-bottom:10px; }
.hero-card-name { font-family:var(--fd); font-size:1.55rem; font-weight:800; letter-spacing:.03em; color:#fff; margin-bottom:6px; text-transform:uppercase; }
.hero-card-desc { font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; }
.hero-card-dots { display:flex; gap:6px; justify-content:center; padding:14px 0 18px; border-top:.5px solid var(--bd-dark); }
.hero-card-dot { width:6px; height:6px; border-radius:50%; background:var(--dark-4); border:none; padding:0; cursor:pointer; transition:all .3s; flex-shrink:0; }
.hero-card-dot.active { width:20px; border-radius:3px; background:var(--orange); }
.hero-card-dot:hover:not(.active) { background:var(--txt-light); }

.hero-float {
  position:absolute; background:var(--dark-2);
  border:.5px solid var(--bd-dark-strong);
  border-radius:var(--r-md); padding:14px 18px; z-index:3;
  box-shadow:var(--sh-md); animation:float 5s ease-in-out infinite;
}
.hero-float-num { font-family:var(--fd); font-size:1.9rem; font-weight:900; color:#fff; line-height:1; }
.hero-float-num em { color:var(--orange); font-style:normal; }
.hero-float-label { font-size:11px; color:rgba(255,255,255,.4); margin-top:3px; }
.hf1 { top:12%; right:5%; animation-delay:0s; }
.hf2 { bottom:16%; left:4%; animation-delay:1.8s; }

/* ─── PROOF BAR ─── */
.proof-bar {
  background:var(--dark-2); border-top:.5px solid var(--bd-dark); border-bottom:.5px solid var(--bd-dark);
  padding:14px max(24px,5vw);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px;
}
.proof-item {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; color:rgba(255,255,255,.5); letter-spacing:.02em;
}
.proof-item svg { width:14px; height:14px; stroke:var(--orange); fill:none; stroke-width:2; flex-shrink:0; }
.proof-div { width:.5px; height:14px; background:var(--bd-dark); }

/* ─── BRAND BANNER ─── */
.brand-banner { position:relative; width:100%; height:480px; overflow:hidden; background:var(--dark); }
.brand-banner-img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform 8s ease; }
.brand-banner:hover .brand-banner-img { transform:scale(1.03); }
.brand-banner-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,17,23,.1) 30%, rgba(15,17,23,.65) 100%);
}
.brand-banner-label {
  position:absolute; bottom:28px; left:max(24px,5vw);
  display:flex; align-items:center; gap:12px;
  font-family:var(--fd); font-size:.85rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9);
}

/* ─── METRICS ─── */
.metrics-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5px;
  background:var(--bd-dark); border-radius:var(--r-lg); overflow:hidden;
  border:.5px solid var(--bd-dark);
}
.metric-card {
  background:var(--dark-2); padding:36px 24px; transition:background .25s;
}
.metric-card:hover { background:var(--dark-3); }
.metric-num {
  font-family:var(--fd); font-size:clamp(2.5rem,3.5vw,3.5rem); font-weight:900;
  color:var(--orange); line-height:1; margin-bottom:8px;
}
.metric-num em { color:rgba(255,255,255,.4); font-style:normal; font-size:.65em; }
.metric-label { font-size:12px; font-weight:500; color:rgba(255,255,255,.4); line-height:1.55; letter-spacing:-.01em; }

/* ─── HOW IT WORKS (HOME preview) ─── */
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5px;
  background:var(--bd-light); border-radius:var(--r-xl); overflow:hidden; border:.5px solid var(--bd-light);
}
.step-card { background:var(--warm); padding:44px 32px; position:relative; transition:background .25s; }
.step-card:hover { background:var(--white); }
.step-bg-num {
  font-family:var(--fd); font-size:5.5rem; font-weight:900;
  color:rgba(0,0,0,.04); line-height:1; position:absolute; top:16px; right:20px; user-select:none; text-transform:uppercase;
}
.step-icon-wrap {
  width:50px; height:50px; border-radius:var(--r-sm);
  background:var(--orange-t); display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.step-icon-wrap svg { width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:1.8; }
.step-title { font-family:var(--fd); font-size:1.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--txt); margin-bottom:12px; }
.step-desc { font-size:14px; color:var(--txt-muted); line-height:1.75; }

/* ─── WHY K11 ─── */
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5px;
  background:var(--bd-dark); border-radius:var(--r-xl); overflow:hidden; border:.5px solid var(--bd-dark);
}
.why-card { background:var(--dark-2); padding:36px 30px; transition:background .25s; }
.why-card:hover { background:var(--dark-3); }
.why-icon-wrap {
  width:46px; height:46px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.why-icon-wrap svg { width:20px; height:20px; stroke:rgba(255,255,255,.7); fill:none; stroke-width:1.8; }
.why-card h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:-.01em; }
.why-card p  { font-size:13px; color:rgba(255,255,255,.45); line-height:1.75; }

/* ─── PRODUCTS ─── */
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prod-card {
  background:var(--warm); border-radius:var(--r-lg); overflow:hidden;
  border:.5px solid var(--bd-light); box-shadow:var(--sh-sm);
  transition:all .3s cubic-bezier(.16,1,.3,1); cursor:pointer;
  display:flex; flex-direction:column;
}
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--bd-light-strong); }
.prod-card-img {
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:20px; aspect-ratio:1; overflow:hidden;
}
.prod-card-img img { max-height:140px; width:auto; object-fit:contain; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.prod-card:hover .prod-card-img img { transform:scale(1.06) translateY(-4px); }
.prod-card-body { padding:20px 20px 24px; flex:1; display:flex; flex-direction:column; }
.prod-card-name { font-size:15px; font-weight:700; color:var(--txt); margin-bottom:6px; letter-spacing:-.01em; line-height:1.3; }
.prod-card-desc { font-size:12px; color:var(--txt-muted); line-height:1.65; flex:1; margin-bottom:16px; }
.prod-card.featured { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; aspect-ratio:auto; }
.prod-card.featured .prod-card-img { height:100%; aspect-ratio:auto; padding:40px; }
.prod-card.featured .prod-card-img img { max-height:200px; }
.prod-card.featured .prod-card-body { padding:36px; justify-content:center; border-left:.5px solid var(--bd-light); }
.prod-card.featured .prod-card-name { font-family:var(--fd); font-size:1.8rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; margin-bottom:10px; }
.prod-card.featured .prod-card-desc { font-size:14px; margin-bottom:20px; }

/* ─── COMPARISON ─── */
.comp-table { border:.5px solid var(--bd-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.comp-row {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  align-items:center; padding:14px 24px; border-bottom:.5px solid var(--bd-light);
  font-size:13px; gap:8px;
}
.comp-row:last-child { border-bottom:none; }
.comp-row.hdr { background:var(--warm-2); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-light); padding:12px 24px; }
.comp-row.winner { background:rgba(212,84,26,.04); border-left:2.5px solid var(--orange); }
.comp-brand { color:var(--txt-mid); font-weight:500; }
.comp-brand-k11 { color:var(--orange); font-weight:700; display:flex; align-items:center; gap:8px; }
.you-badge { background:var(--orange); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); letter-spacing:.03em; }
.ci { color:var(--green); font-weight:700; }
.cx { color:var(--warm-3); font-size:18px; }
.cp { color:#7A4B00; font-weight:500; }

/* ─── DISTRIBUTOR ─── */
.dist-benefit {
  display:flex; align-items:flex-start; gap:14px; padding:16px 20px;
  background:rgba(255,255,255,.04); border:.5px solid var(--bd-dark);
  border-radius:var(--r-md); transition:background .2s;
}
.dist-benefit:hover { background:rgba(255,255,255,.08); }
.dist-benefit-icon {
  width:38px; height:38px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dist-benefit-icon svg { width:16px; height:16px; stroke:rgba(255,255,255,.7); fill:none; stroke-width:2; }
.dist-benefit h4 { font-size:13px; font-weight:700; color:#fff; margin-bottom:2px; }
.dist-benefit p  { font-size:12px; color:rgba(255,255,255,.4); line-height:1.55; }

.dist-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dist-stat {
  background:rgba(255,255,255,.05); border:.5px solid var(--bd-dark);
  border-radius:var(--r-md); padding:22px 18px; text-align:center; transition:background .2s;
}
.dist-stat:hover { background:rgba(255,255,255,.08); }
.dist-stat-num { font-family:var(--fd); font-size:2.4rem; font-weight:900; color:#fff; line-height:1; margin-bottom:4px; }
.dist-stat-num em { color:var(--orange); font-style:normal; }
.dist-stat-label { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.06em; text-transform:uppercase; }

.dist-cta-card { background:var(--orange); border-radius:var(--r-lg); padding:28px 28px 24px; }
.dist-cta-card h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.dist-cta-card p  { font-size:13px; color:rgba(255,255,255,.75); margin-bottom:20px; line-height:1.6; }

/* ─── TESTIMONIALS ─── */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.test-card {
  background:var(--warm-2); border:.5px solid var(--bd-light); border-radius:var(--r-lg);
  padding:32px; transition:all .3s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; justify-content:space-between;
}
.test-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); background:var(--white); border-color:var(--bd-light-strong); }
.test-stars { display:flex; gap:3px; margin-bottom:16px; }
.test-stars span { color:var(--orange); font-size:14px; }
.test-quote { font-size:15px; font-weight:300; color:var(--txt); line-height:1.75; font-style:italic; margin-bottom:28px; flex:1; }
.test-author { display:flex; align-items:center; gap:12px; }
.test-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--orange-t);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:1rem; font-weight:800; color:var(--orange); flex-shrink:0;
}
.test-name { font-size:13px; font-weight:700; color:var(--txt); }
.test-role { font-size:11px; color:var(--txt-muted); margin-top:1px; }

/* ─── MARKET STATS ─── */
.market-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.5px; background:var(--bd-dark); border-radius:var(--r-lg); overflow:hidden; border:.5px solid var(--bd-dark); }
.market-stat { background:var(--dark-2); padding:36px 20px; text-align:center; transition:background .25s; }
.market-stat:hover { background:var(--dark-3); }
.market-stat-num { font-family:var(--fd); font-size:clamp(2.4rem,4vw,3.8rem); font-weight:900; color:#fff; line-height:1; margin-bottom:8px; }
.market-stat-num em { color:var(--orange); font-style:normal; }
.market-stat-label { font-size:12px; font-weight:500; color:rgba(255,255,255,.35); letter-spacing:.04em; text-transform:uppercase; }

/* ─── PREORDER SECTION ─── */
.preorder-section { background:var(--dark); position:relative; overflow:hidden; text-align:center; }
.preorder-bg { position:absolute; inset:0; background:radial-gradient(circle at 50% -10%, rgba(212,84,26,.18) 0%, transparent 60%); pointer-events:none; }
.preorder-inner { position:relative; z-index:2; max-width:640px; margin:0 auto; }
.preorder-form { display:flex; flex-direction:column; gap:14px; }
.preorder-form input {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm); padding:17px 22px; color:#fff;
  font-family:var(--fb); font-size:1rem; outline:none; transition:border-color .2s;
}
.preorder-form input::placeholder { color:rgba(255,255,255,.35); }
.preorder-form input:focus { border-color:var(--orange); }
.preorder-form button {
  background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm);
  padding:17px; font-family:var(--fb); font-weight:700; font-size:1.05rem;
  cursor:pointer; transition:background .2s;
}
.preorder-form button:hover { background:var(--orange-d); }
.preorder-success {
  display:none; background:rgba(26,122,63,.1); border:1px solid rgba(26,122,63,.25);
  border-radius:var(--r-md); padding:2.5rem 2rem; color:#55c896; animation:fadeUp .5s ease;
}
.preorder-success h3 { font-family:var(--fd); font-size:1.8rem; font-weight:800; margin-bottom:.8rem; color:#fff; text-transform:uppercase; }

/* ─── FAQ ─── */
.how-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.how-tab {
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:rgba(255,255,255,.62); background:rgba(255,255,255,.06);
  border:.5px solid var(--bd-dark); border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.how-tab:hover { color:#fff; background:rgba(255,255,255,.11); }
.how-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.faq-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.faq-tab {
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:var(--txt-muted); background:var(--warm-2); border:.5px solid var(--bd-light);
  border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.faq-tab:hover { color:var(--txt); background:var(--warm-3); }
.faq-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.faq-list { display:grid; gap:2px; margin-top:16px; }
.faq-item { background:var(--warm-2); border-radius:var(--r-md); overflow:hidden; }
.faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; cursor:pointer; font-size:15px; font-weight:600; color:var(--txt);
  letter-spacing:-.01em; user-select:none; transition:background .2s; gap:16px;
}
.faq-q:hover { background:rgba(0,0,0,.03); }
.faq-icon {
  width:24px; height:24px; border-radius:50%; background:var(--warm-3);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:transform .3s, background .3s; position:relative;
}
.faq-icon::before, .faq-icon::after { content:''; position:absolute; background:var(--txt-muted); border-radius:1px; transition:all .3s; }
.faq-icon::before { width:8px; height:1.5px; }
.faq-icon::after  { width:1.5px; height:8px; }
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--orange); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background:#fff; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.faq-a-inner { padding:0 22px 18px; font-size:14px; color:var(--txt-muted); line-height:1.8; border-top:.5px solid var(--bd-light); padding-top:14px; }
.faq-item.open .faq-a { max-height:420px; }

/* ─── FINAL CTA ─── */
.final-cta { background:var(--dark-2); text-align:center; position:relative; overflow:hidden; }
.final-cta-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,84,26,.1), transparent); pointer-events:none; }
.final-cta h2 {
  font-family:var(--fd); font-size:clamp(3rem,7vw,7rem); font-weight:900;
  line-height:.88; letter-spacing:.02em; text-transform:uppercase; color:#fff; margin-bottom:20px;
}
.final-cta h2 em { color:var(--orange); font-style:normal; display:block; }

/* ─── INNER PAGES ─── */
.page-hero {
  padding:clamp(100px,14vw,140px) max(24px,5vw) clamp(60px,8vw,80px);
  background:var(--dark); position:relative; overflow:hidden;
  border-bottom:.5px solid var(--bd-dark);
}
.page-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 50% 70% at 80% 50%, rgba(212,84,26,.06), transparent); pointer-events:none; }
.breadcrumb { display:flex; gap:6px; font-size:12px; color:rgba(255,255,255,.3); margin-bottom:20px; }
.breadcrumb a { color:var(--orange); cursor:pointer; }
.breadcrumb a:hover { opacity:.7; }
.page-h1 {
  font-family:var(--fd); font-size:clamp(3.2rem,7vw,7rem); font-weight:900;
  line-height:.88; letter-spacing:.02em; text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.page-h1 em { color:var(--orange); font-style:normal; }
.page-sub { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.55); max-width:540px; line-height:1.75; }

/* Products full page */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.filter-btn {
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.55);
  font-size:13px; font-weight:600; padding:7px 16px; border-radius:var(--r-pill);
  border:.5px solid transparent; cursor:pointer; transition:all .2s; font-family:var(--fb);
}
.filter-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.filter-btn.active { background:var(--orange); color:#fff; }

.pf-grid { display:grid; gap:2px; background:var(--bd-dark); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); }
.pf-card { background:var(--dark-2); display:grid; grid-template-columns:1fr 1fr; transition:background .2s; min-height:520px; }
.pf-card:nth-child(even) .pf-img-wrap { order:2; }
.pf-card:nth-child(even) .pf-content { order:1; border-left:none; border-right:2px solid var(--bd-dark); }
.pf-card:hover { background:var(--dark-3); }
.pf-img-wrap { position:relative; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.pf-img-main { flex:1; display:flex; align-items:center; justify-content:center; padding:8% 7%; min-height:340px; position:relative; overflow:hidden; background:#fff; }
.pf-img-main img { width:100%; height:100%; max-height:380px; object-fit:contain; transition:transform .65s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.pf-card:hover .pf-img-main img { transform:scale(1.05) translateY(-4px); }
.pf-img-badge {
  position:absolute; top:18px; left:18px; z-index:2;
  font-family:var(--fb); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--orange); color:#fff; padding:5px 13px; border-radius:var(--r-pill);
}
.pf-img-thumbs { display:flex; gap:2px; background:rgba(0,0,0,.06); border-top:1px solid rgba(0,0,0,.08); flex-shrink:0; }
.pf-img-thumb { flex:1; height:90px; cursor:pointer; background:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s, outline .15s; outline:2px solid transparent; outline-offset:-2px; }
.pf-img-thumb:hover { background:#f4f4f4; }
.pf-img-thumb.active { background:#fff; outline-color:var(--orange); }
.pf-img-thumb img { width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .3s ease; }
.pf-img-thumb:hover img { transform:scale(1.1); }
.pf-content { padding:3rem 2.8rem; border-left:2px solid var(--bd-dark); display:flex; flex-direction:column; justify-content:center; }
.pf-num { font-family:var(--fd); font-size:5rem; font-weight:900; color:rgba(255,255,255,.04); line-height:1; margin-bottom:.8rem; }
.pf-title { font-family:var(--fd); font-size:2.2rem; font-weight:800; letter-spacing:.04em; line-height:1; margin-bottom:.7rem; color:#fff; text-transform:uppercase; }
.pf-desc { font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.8; margin-bottom:1.4rem; }
.pf-features { display:grid; gap:.5rem; margin-bottom:1.6rem; }
.pf-features li { display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:rgba(255,255,255,.45); line-height:1.55; }
.pf-features li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:.45rem; }
.pf-compat { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:1.6rem; }
.compat-pill { background:rgba(255,255,255,.07); border:.5px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); }
.pf-actions { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }

/* Dosing table */
.dosing-section { padding:80px max(24px,5vw); background:var(--dark); border-top:.5px solid var(--bd-dark); }
.dt-title { font-family:var(--fd); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; color:var(--orange); letter-spacing:.03em; margin-bottom:2.5rem; text-align:center; text-transform:uppercase; }
.dosing-table { display:flex; flex-direction:column; gap:0; max-width:1100px; margin:0 auto; }
.dtn-row { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; border-bottom:.5px solid var(--bd-dark); min-height:110px; align-items:center; }
.dtn-row:last-child { border-bottom:none; }
.dtn-row.hdr { border-bottom:1px solid var(--orange); min-height:auto; padding-bottom:1rem; align-items:end; }
.dtn-col { padding:1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.4; height:100%; position:relative; }
.dtn-col:not(:first-child):not(:last-child)::after { content:''; position:absolute; right:0; top:15%; bottom:15%; width:.5px; background:var(--bd-dark); }
.dtn-row.hdr .dtn-col { font-family:var(--fd); font-size:1.3rem; font-weight:800; color:#fff; height:auto; text-transform:uppercase; letter-spacing:.04em; }
.dtn-img { width:auto; max-width:120px; max-height:90px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); margin:0 auto; border-radius:6px; }
.dt-orange { color:var(--orange); font-weight:600; font-size:.95rem; }

/* Compat grid */
.compat-full { background:var(--dark-2); padding:80px max(24px,5vw); border-top:.5px solid var(--bd-dark); }
.compat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-top:2.5rem; }
.compat-card { background:var(--dark-3); border:.5px solid var(--bd-dark); border-radius:var(--r-sm); padding:1.1rem; text-align:center; transition:all .2s; }
.compat-card:hover { border-color:rgba(212,84,26,.35); transform:translateY(-2px); }
.compat-ref { font-family:var(--fd); font-size:1.4rem; font-weight:900; color:var(--orange); margin-bottom:.2rem; }
.compat-name { font-size:.72rem; color:rgba(255,255,255,.35); }

/* How page */
.steps-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:4rem; align-items:start; }
.steps-list { position:relative; }
.steps-list::before { content:''; position:absolute; left:23px; top:46px; bottom:46px; width:1px; background:var(--bd-dark); }
.step-row { display:flex; gap:1.5rem; padding:1.8rem 0; cursor:pointer; }
.step-circle {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--bd-dark); background:var(--dark-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:1.2rem; font-weight:900; color:rgba(255,255,255,.3);
  transition:all .3s; position:relative; z-index:1;
}
.step-row.active .step-circle { background:var(--orange); border-color:var(--orange); color:#fff; }
.step-row h3 { font-size:1rem; font-weight:700; margin-bottom:.4rem; color:rgba(255,255,255,.7); }
.step-row.active h3 { color:var(--orange); }
.step-row p { font-size:.88rem; color:rgba(255,255,255,.35); line-height:1.7; }
.step-visual { position:sticky; top:calc(var(--nav-h) + 20px); background:var(--dark-2); border:.5px solid var(--bd-dark); border-radius:var(--r-lg); overflow:hidden; }
.step-visual img { width:100%; height:auto; display:block; transition:opacity .3s ease; }

/* On-brand rendered step visuals */
.sv-panel {
  position:relative; min-height:440px; padding:48px 44px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%, rgba(212,84,26,.08), transparent 70%),
    linear-gradient(160deg, var(--dark-3), var(--dark-2));
  overflow:hidden;
}
.sv-grid {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 30%, black, transparent);
}
.sv-stepnum {
  font-family:var(--fd); font-size:9rem; font-weight:900; line-height:.8;
  color:rgba(255,255,255,.04); position:absolute; top:24px; right:32px; user-select:none;
}
.sv-top { position:relative; z-index:2; display:flex; align-items:center; gap:16px; }
.sv-icon {
  width:64px; height:64px; border-radius:16px; flex-shrink:0;
  background:rgba(212,84,26,.12); border:.5px solid rgba(212,84,26,.25);
  display:flex; align-items:center; justify-content:center;
}
.sv-icon svg { width:30px; height:30px; stroke:var(--orange); fill:none; stroke-width:1.8; }
.sv-step-label { font-family:var(--fd); font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.sv-step-title { font-family:var(--fd); font-size:1.9rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#fff; line-height:1; }

.sv-body { position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center; padding:32px 0; }

/* Step 1 — leak classification chips */
.sv-leak-chips { display:flex; gap:10px; width:100%; }
.sv-chip { flex:1; border-radius:12px; padding:20px 14px; text-align:center; border:.5px solid var(--bd-dark); background:rgba(255,255,255,.03); transition:transform .3s; }
.sv-chip-dot { width:36px; height:36px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
.sv-chip-dot svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.5; }
.sv-chip-days { font-family:var(--fd); font-size:1.5rem; font-weight:900; color:#fff; line-height:1; margin-bottom:6px; }
.sv-chip-type { font-size:11px; font-weight:600; color:rgba(255,255,255,.45); letter-spacing:.02em; }

/* Step 2/5 — system gauge */
.sv-gauge { display:flex; flex-direction:column; align-items:center; gap:20px; }
.sv-gauge-ring {
  width:150px; height:150px; border-radius:50%; position:relative;
  background:conic-gradient(var(--orange) 0% 70%, rgba(255,255,255,.06) 70% 100%);
  display:flex; align-items:center; justify-content:center;
}
.sv-gauge-ring::before { content:''; position:absolute; inset:14px; border-radius:50%; background:var(--dark-2); }
.sv-gauge-inner { position:relative; z-index:2; text-align:center; }
.sv-gauge-val { font-family:var(--fd); font-size:2.4rem; font-weight:900; color:#fff; line-height:1; }
.sv-gauge-label { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.sv-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sv-pill { background:rgba(255,255,255,.05); border:.5px solid var(--bd-dark); color:rgba(255,255,255,.6); font-size:11px; font-weight:600; padding:6px 14px; border-radius:var(--r-pill); }

/* Step 3/4 — injection flow */
.sv-flow { width:100%; }
.sv-flow-track {
  position:relative; height:14px; border-radius:7px; overflow:hidden;
  background:rgba(255,255,255,.06); border:.5px solid var(--bd-dark); margin:20px 0;
}
.sv-flow-fill {
  position:absolute; top:0; bottom:0; left:0; width:60%;
  background:linear-gradient(90deg, var(--orange), #ff7a45); border-radius:7px;
  animation:sv-flow-anim 3s ease-in-out infinite;
}
@keyframes sv-flow-anim { 0%{width:15%} 50%{width:85%} 100%{width:15%} }
.sv-flow-nodes { display:flex; justify-content:space-between; }
.sv-flow-node { text-align:center; }
.sv-flow-node-dot { width:14px; height:14px; border-radius:50%; background:var(--dark-4); border:2px solid var(--bd-dark-strong); margin:0 auto 8px; }
.sv-flow-node.on .sv-flow-node-dot { background:var(--orange); border-color:var(--orange); box-shadow:0 0 12px rgba(212,84,26,.5); }
.sv-flow-node-label { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:.04em; }

/* Step 6 — UV verify */
.sv-uv {
  width:170px; height:170px; border-radius:50%; position:relative;
  background:radial-gradient(circle, rgba(180,80,255,.25), rgba(120,40,200,.05) 70%);
  border:1px solid rgba(180,80,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.sv-uv-glow { width:60px; height:60px; border-radius:50%; background:radial-gradient(circle, #c89bff, #7a3ad6); box-shadow:0 0 40px rgba(180,80,255,.6); animation:pulse 2s infinite; }
.sv-uv-check { position:absolute; bottom:-6px; right:-6px; width:44px; height:44px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; border:3px solid var(--dark-2); }
.sv-uv-check svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:3; }

.sv-foot { position:relative; z-index:2; padding-top:24px; border-top:.5px solid var(--bd-dark); }
.sv-foot-text { font-size:13px; color:rgba(255,255,255,.45); line-height:1.6; }
.sv-foot-text strong { color:var(--orange); font-weight:600; }

/* Leak guide */
.leak-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bd-dark); border-radius:var(--r-lg); overflow:hidden; }
.leak-card { background:var(--dark-2); padding:2.5rem; text-align:center; transition:background .2s; }
.leak-card:hover { background:var(--dark-3); }
.leak-days { font-family:var(--fd); font-size:4rem; font-weight:900; line-height:1; margin-bottom:.8rem; }
.leak-type { font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:1rem; padding:.3rem .8rem; border-radius:4px; display:inline-block; }
.lt-green  { color:var(--green); background:var(--green-t); }
.lt-yellow { color:#C89B14; background:rgba(200,155,20,.12); }
.lt-red    { color:#C83232; background:rgba(200,50,50,.12); }
.leak-card p { font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.7; }

/* About page */
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:4rem; }
.about-photo { border-radius:var(--r-lg); overflow:hidden; border:.5px solid var(--bd-dark); box-shadow:var(--sh-md); }
.about-photo img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }
.about-text p { font-size:.95rem; color:rgba(255,255,255,.5); line-height:1.82; margin-bottom:1.2rem; }
.about-text strong { color:#fff; font-weight:600; }
.tl-wrap { padding:var(--sp) max(24px,5vw); background:var(--dark-2); border-top:.5px solid var(--bd-dark); }
.tl-list { position:relative; margin-top:3.5rem; padding-left:2.5rem; }
.tl-list::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--bd-dark); }
.tl-item { position:relative; padding-bottom:2.5rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-2.5rem; top:6px; width:12px; height:12px; border-radius:50%; background:var(--dark); border:1.5px solid var(--bd-dark); transform:translateX(-5px); transition:all .3s; }
.tl-item:hover .tl-dot { border-color:var(--orange); background:var(--orange-t); }
.tl-year { font-family:var(--fd); font-size:1rem; font-weight:800; color:var(--orange); letter-spacing:2px; margin-bottom:.3rem; text-transform:uppercase; }
.tl-item h3 { font-size:1rem; font-weight:700; margin-bottom:.4rem; color:#fff; }
.tl-item p  { font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.65; max-width:560px; }
.vals-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bd-dark); border-radius:var(--r-lg); overflow:hidden; }
.val-card { background:var(--dark-2); padding:2.5rem; transition:background .2s; }
.val-card:hover { background:var(--dark-3); }
.val-icon { width:44px; height:44px; border-radius:10px; background:var(--orange-t); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.val-icon svg { width:20px; height:20px; stroke:var(--orange); fill:none; stroke-width:1.8; }
.val-card h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; color:#fff; }
.val-card p  { font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.65; }
.k11-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3rem; }
.k11-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bd-dark); border-radius:var(--r-md); overflow:hidden; }
.k11-stat { background:var(--dark-2); padding:2rem; text-align:center; }
.k11-stat-num { font-family:var(--fd); font-size:3rem; font-weight:900; color:var(--orange); line-height:1; margin-bottom:.4rem; }
.k11-stat-label { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.35); letter-spacing:1.5px; text-transform:uppercase; }

/* Contact / Docs */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:4rem; align-items:start; }
.cform { background:var(--dark-2); border:.5px solid var(--bd-dark); border-radius:var(--r-lg); padding:2.5rem; box-shadow:var(--sh-sm); }
.cform-title { font-family:var(--fd); font-size:2rem; font-weight:800; margin-bottom:.4rem; color:#fff; text-transform:uppercase; }
.cform-sub { font-size:.9rem; color:rgba(255,255,255,.4); margin-bottom:2rem; line-height:1.6; }
.fg { margin-bottom:1.2rem; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label { display:block; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; }
input,select,textarea {
  width:100%; background:rgba(255,255,255,.06); border:.5px solid rgba(255,255,255,.1);
  color:#fff; font-family:var(--fb); font-size:.9rem;
  padding:.75rem 1rem; border-radius:var(--r-sm); outline:none; transition:border-color .2s;
  -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus { border-color:rgba(212,84,26,.5); background:rgba(255,255,255,.08); }
input::placeholder,textarea::placeholder { color:rgba(255,255,255,.25); }
select option { background:var(--dark-2); color:#fff; }
textarea { resize:vertical; min-height:110px; }
.sbtn {
  width:100%; padding:.95rem; border-radius:var(--r-sm);
  background:var(--orange); color:#fff; font-family:var(--fb); font-size:1rem; font-weight:700;
  cursor:pointer; border:none; transition:all .2s; margin-top:.5rem;
}
.sbtn:hover { background:var(--orange-d); transform:translateY(-1px); }
.success-msg { display:none; background:rgba(26,122,63,.1); border:.5px solid rgba(26,122,63,.3); border-radius:var(--r-sm); padding:.9rem 1.1rem; font-size:.88rem; color:var(--green); margin-top:1rem; text-align:center; }
.info-cards { display:grid; gap:1.2rem; }
.icard { background:var(--dark-2); border:.5px solid var(--bd-dark); border-radius:var(--r-md); padding:1.5rem; transition:border-color .2s; }
.icard:hover { border-color:rgba(212,84,26,.3); }
.icard-icon { width:38px; height:38px; background:var(--orange-t); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; }
.icard-icon svg { width:16px; height:16px; stroke:var(--orange); fill:none; stroke-width:2; }
.icard h3 { font-size:.85rem; font-weight:700; color:#fff; margin-bottom:.25rem; }
.icard p, .icard a { font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.55; }
.icard a:hover { color:var(--orange); }
.dist-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; margin-top:3.5rem; }
.dist-item { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem; background:var(--dark-2); border-radius:var(--r-sm); border:.5px solid var(--bd-dark); transition:border-color .2s; }
.dist-item:hover { border-color:rgba(26,122,63,.3); }
.dist-num { font-family:var(--fd); font-size:2rem; font-weight:900; color:var(--orange); line-height:1; flex-shrink:0; min-width:2.2rem; }
.dist-item h4 { font-size:.9rem; font-weight:700; margin-bottom:.25rem; color:#fff; }
.dist-item p  { font-size:.83rem; color:rgba(255,255,255,.4); line-height:1.55; }
.dist-form-card { background:var(--dark-2); border:.5px solid rgba(26,122,63,.25); border-radius:var(--r-md); padding:2.5rem; }
.dist-form-title { font-family:var(--fd); font-size:1.8rem; font-weight:800; margin-bottom:.3rem; color:#fff; text-transform:uppercase; }
.dist-form-sub { font-size:.88rem; color:rgba(255,255,255,.4); margin-bottom:2rem; line-height:1.6; }
.dsbtn { width:100%; padding:.95rem; border-radius:var(--r-sm); background:var(--green); color:#fff; font-family:var(--fb); font-size:1rem; font-weight:700; cursor:pointer; border:none; transition:all .2s; margin-top:.5rem; }
.dsbtn:hover { background:var(--green-d); transform:translateY(-1px); }

/* Docs page */
.docs-section { padding:80px max(24px,5vw); background:var(--dark); }
.docs-note { background:rgba(212,84,26,.08); border:.5px solid rgba(212,84,26,.15); border-radius:var(--r-md); padding:18px 22px; display:flex; gap:12px; align-items:flex-start; font-size:14px; color:rgba(255,255,255,.6); line-height:1.6; margin-bottom:48px; }
.docs-note svg { width:18px; height:18px; stroke:var(--orange); fill:none; stroke-width:2; flex-shrink:0; margin-top:1px; }
.docs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--bd-dark); border-radius:var(--r-xl); overflow:hidden; }
.doc-card { background:var(--dark-2); padding:36px; transition:background .2s; }
.doc-card:hover { background:var(--dark-3); }
.doc-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.doc-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.doc-icon.orange  { background:var(--orange-t); }
.doc-icon.gold    { background:rgba(200,137,14,.12); }
.doc-icon.green   { background:var(--green-t); }
.doc-icon.gray    { background:rgba(255,255,255,.07); }
.doc-icon svg { width:20px; height:20px; fill:none; stroke-width:1.8; }
.doc-icon.orange svg { stroke:var(--orange); }
.doc-icon.gold svg   { stroke:#C8890E; }
.doc-icon.green svg  { stroke:var(--green); }
.doc-icon.gray svg   { stroke:rgba(255,255,255,.4); }
.doc-product { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:5px; }
.doc-title { font-family:var(--fd); font-size:1.4rem; font-weight:800; color:#fff; line-height:1.05; margin-bottom:7px; text-transform:uppercase; }
.doc-desc { font-size:13px; color:rgba(255,255,255,.4); line-height:1.6; margin-bottom:18px; }
.doc-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.doc-meta-item { display:flex; align-items:center; gap:4px; font-size:11px; color:rgba(255,255,255,.3); }
.doc-meta-item svg { width:11px; height:11px; stroke:rgba(255,255,255,.3); fill:none; stroke-width:2; }
.doc-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-download { display:inline-flex; align-items:center; gap:6px; background:var(--orange); color:#fff; font-size:13px; font-weight:600; padding:9px 16px; border-radius:var(--r-pill); transition:all .2s; }
.btn-download:hover { background:var(--orange-d); transform:scale(1.02); }
.btn-request { display:inline-flex; align-items:center; gap:6px; background:transparent; color:rgba(255,255,255,.5); font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.15); transition:all .2s; }
.btn-request:hover { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.3); }
.doc-card.featured { grid-column:span 2; display:grid; grid-template-columns:auto 1fr; padding:0; overflow:hidden; }
.featured-stripe { background:var(--orange); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 28px; min-width:140px; }
.featured-stripe-text { font-family:var(--fd); font-size:.9rem; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:3px; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); }
.featured-stripe-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); margin:16px auto 0; }
.featured-content { padding:36px; }
.sds-sections { background:var(--dark-2); padding:80px max(24px,5vw); border-top:.5px solid var(--bd-dark); }
.sds-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px; }
.sds-item { background:var(--dark-3); border:.5px solid var(--bd-dark); border-radius:var(--r-md); padding:22px; transition:all .2s; }
.sds-item:hover { border-color:rgba(212,84,26,.35); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.sds-num { font-size:10px; font-weight:700; color:rgba(255,255,255,.25); letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
.sds-title { font-family:var(--fd); font-size:16px; font-weight:800; color:#fff; line-height:1.1; margin-bottom:7px; text-transform:uppercase; }
.sds-desc { font-size:12px; color:rgba(255,255,255,.35); line-height:1.6; }
.request-banner { background:var(--orange); padding:80px max(24px,5vw); text-align:center; }
.request-banner h2 { font-family:var(--fd); font-size:clamp(2.4rem,5vw,4.5rem); font-weight:900; color:#fff; line-height:.95; margin-bottom:12px; text-transform:uppercase; }
.request-banner p { font-size:15px; font-weight:300; color:rgba(255,255,255,.7); max-width:420px; margin:0 auto 32px; line-height:1.6; }

/* Legal */
.legal-wrap { max-width:720px; margin:0 auto; padding:80px 40px; font-size:15px; line-height:1.85; color:rgba(255,255,255,.55); }
.legal-wrap h1 { font-family:var(--fd); font-size:3rem; font-weight:900; color:#fff; margin-bottom:.5rem; text-transform:uppercase; }
.legal-wrap h2 { font-family:var(--fd); font-size:1.5rem; font-weight:800; color:#fff; margin:2.5rem 0 .5rem; text-transform:uppercase; }
.legal-wrap p,.legal-wrap li { margin-bottom:.8rem; }
.legal-wrap ul { padding-left:1.5rem; list-style:disc; }
.legal-wrap a { color:var(--orange); }

/* WhatsApp float */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.4); transition:all .25s;
  animation:fadeIn 1s ease 1.5s both;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,.5); }
.wa-float svg { width:26px; height:26px; fill:#fff; }

/* SDS docs strip */
.docs-strip { padding:64px max(24px,5vw); background:var(--dark-2); border-top:.5px solid var(--bd-dark); border-bottom:.5px solid var(--bd-dark); }
.docs-strip-inner { max-width:var(--mw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.docs-strip-left h2 { font-family:var(--fd); font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
.docs-strip-left p { font-size:14px; color:rgba(255,255,255,.4); line-height:1.65; }
.docs-strip-right { display:flex; gap:10px; flex-wrap:wrap; }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
  .metrics-grid { grid-template-columns:repeat(3,1fr); }
  .why-grid { grid-template-columns:1fr 1fr; }
  .prod-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px) {
  nav { padding:0 20px; }
  .nav-links { display:none !important; }
  .nav-cta { display:none; }
  .nav-mobile-btn { display:flex !important; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-left { padding:110px 28px 48px; max-width:100%; }
  .hero-right { min-height:380px; border-left:none; border-top:.5px solid var(--bd-dark); }
  .hero-float { display:none; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .prod-card.featured { grid-column:auto; grid-template-columns:1fr; }
  .prod-card.featured .prod-card-img { height:220px; aspect-ratio:auto; }
  .comp-row { grid-template-columns:1fr 1fr; }
  .comp-row > *:nth-child(n+4) { display:none; }
  .dist-inner-grid { grid-template-columns:1fr; gap:40px; }
  .dist-stat-grid { grid-template-columns:1fr 1fr; }
  .test-grid { grid-template-columns:1fr; }
  .market-stats { grid-template-columns:repeat(2,1fr); }
  .docs-grid { grid-template-columns:1fr; }
  .doc-card.featured { grid-column:auto; grid-template-columns:1fr; }
  .featured-stripe { writing-mode:horizontal-tb; transform:none; min-width:auto; padding:20px 28px; }
  .featured-stripe-text { writing-mode:horizontal-tb; transform:none; }
  .sds-grid { grid-template-columns:1fr 1fr; }
  .about-layout,.k11-layout,.contact-layout,.dist-layout { grid-template-columns:1fr; }
  .vals-grid,.leak-grid { grid-template-columns:1fr; }
  .steps-wrap { grid-template-columns:1fr; }
  .step-visual { display:none; }
  .fr { grid-template-columns:1fr; }
  .docs-strip-inner { flex-direction:column; gap:24px; }
  .pf-card { grid-template-columns:1fr; }
  .pf-card:nth-child(even) .pf-img-wrap { order:0; }
  .pf-card:nth-child(even) .pf-content { order:0; border-right:none; }
}
@media(max-width:640px) {
  :root { --sp:64px; }
  .metrics-grid { grid-template-columns:1fr 1fr; }
  .prod-grid { grid-template-columns:1fr; }
  .dist-stat-grid { grid-template-columns:1fr; }
  .market-stats { grid-template-columns:1fr 1fr; }
  .sds-grid { grid-template-columns:1fr; }
  .vals-grid { grid-template-columns:1fr; }
  .hero-h1 { font-size:3.5rem; }
  .final-cta h2 { font-size:3rem; }
}