/* Reset & Global */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevent horizontal scrollbars globally */
  background: #1a1a1a;
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Prevent accidental horizontal scrolling due to transforms/positioned UI */
.zk-page-body { overflow-x: hidden; }
/* Prevent navbar shift from scrollbar toggling between pages */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
/* Fixed padding for the menu on all pages */
body {
  padding-top: 120px;
  line-height: 1.5;
}
.nav-collapsed { padding-top: 0 !important; }
.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}
a { text-decoration: none; color: inherit; }
ul { list-style-type: none; margin: 0; padding: 0; }

/* Navigation Menu - Fixed at top */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1000;
  background: #1a1a1a;
  transform: translateY(-100%);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav--active {
  transform: translateY(0);
}
.nav__list { display: flex; flex-wrap: nowrap; height: 100%; }
.nav__item { flex: 1; position: relative; overflow: hidden; transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
.nav__link { display: block; height: 100%; position: relative; }
/* Match original nav thumb/label layout to prevent jitter */
.nav__thumb { display: block; height: 120px; width: 100%; transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
.nav__item:hover .nav__thumb { transform: scale(1.1); background: #333 !important; }
.nav__label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-transform: uppercase; letter-spacing: 2px; color: #fff; font-weight: 700; font-size: 20px;
  margin: 0; pointer-events: none; white-space: normal; text-align: center; width: 100%; padding: 0 5px;
}
.nav__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  object-fit: contain;
}

/* Burger Button */
.burger {
  position: absolute;
  right: 0;
  top: 100%;
  width: 60px;
  height: 60px;
  background: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 1001;
}
.burger.burger--close {
  background: #FF0000 !important;
}
.burger__patty {
  position: relative;
  width: 60%;
  height: 2px;
  background: #fff;
}
.burger__patty:before, .burger__patty:after {
  content: "";
  position: absolute;
  left: 0;
  background: #fff;
  height: 2px;
  width: 100%;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty:before { top: -10px; }
.burger__patty:after { top: 10px; }
.burger--close .burger__patty { transform: rotate(45deg); }
.burger--close .burger__patty:before { transform: rotate(-90deg) translate(-9px, 0); }
.burger--close .burger__patty:after { opacity: 0; transform: scaleX(0); }

/* Logo */
.logo {
  position: fixed;
  top: 195px;
  right: 7px;
  z-index: 2;
}
.logo img {
  width: 45px;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover { transform: rotate(180deg) scale(1.1); }

/* Page Content Structure - Section slider pages */
.page { width: 100%; height: calc(100vh - 120px); position: relative; overflow: hidden; perspective: 400px; }
.section {
  position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;
  transform: translateX(100%);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-collapsed .page { height: 100vh; }
.nav-collapsed .section { height: 100vh; }
.section--hidden { transform: translateX(-100%); }
.section--active { transform: translateX(0); z-index: 2; }
.section__wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 0 5vw 0 10vw;
  text-align: left;
}
.section__wrapper.centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 5vw; }

/* Scan Threats iframe embed */
.scan-iframe { width: min(800px, 90vw, 70vh); aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 12px; }
.section__title { font-size: 60px; font-weight: 700; margin-bottom: 20px; line-height: 1.1; text-transform: uppercase; }
.section p { font-size: 28px; margin-bottom: 25px; }

/* Screenshots Grid */
.screens-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
.screen-card { background: #2b2b2b; border-radius: 18px; padding: 16px; border: 6px solid #1f1f1f; }
.screen-card img { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }
@media (max-width: 720px) {
  .screens-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Full-bleed, browser-width screenshots on the Screenshots page */
.shots-page .section__wrapper { padding: 0; }
.shots-page .section__title,
.shots-page .section-divider { padding: 0 5vw; }
.shots-page .screens-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two-column full-bleed grid */
  gap: 24px; /* clearer spacing between items */
  margin-top: 0; /* spacing handled by divider below */
  /* Make the grid stretch to full viewport width (bleed) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-left: 5vw;
  padding-right: 5vw;
}
.shots-page .section-divider { margin-bottom: 120px; }
.shots-page .screen-card { border-radius: 20px; padding: 6px; border-width: 4px; }
.screens-grid figure { margin: 0; }

/* FAQ Accordion */
.faq-controls { display: flex; gap: 12px; margin: 16px 0 20px; flex-wrap: wrap; }
.faq-btn { appearance: none; border: none; background: #FF5F1F; color: #fff; padding: 10px 16px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.faq-btn:hover { filter: brightness(1.05); }
.faq-accordion { width: 100%; margin-top: 24px; margin-bottom: 64px; }
.faq-item { border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; margin-bottom: 16px; background: #1f1f1f; }
.color4 .faq-item { border-color: rgba(255,255,255,0.2); background: #1f1f1f; }
.faq-question { width: 100%; text-align: left; background: transparent; border: 0; padding: 26px 26px; font-size: 24px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question .indicator { font-size: 26px; line-height: 1; }
.faq-answer { display: none; padding: 16px 26px 26px 26px; font-size: 20px; line-height: 1.6; }
.faq-item.open .faq-answer { display: block; }
.color4 .faq-question { color: inherit; }
.color4 .faq-answer { color: inherit; }

/* Removed ZelKill word highlighting */

/* ZelKill Page (Scrolling Features) */
.zk-container { width: 100%; }
.zk-section {
  height: calc(100vh - 120px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
}
.nav-collapsed .zk-section { height: 100vh; }
.zk-row { display: flex; width: 100%; max-width: 1200px; gap: 40px; align-items: center; }
.zk-left { flex: 0 0 70%; text-align: left; }
.zk-right { flex: 0 0 30%; display: flex; justify-content: center; }
.zk-title { font-size: 60px; font-weight: 700; margin-bottom: 20px; }
/* .hl-zelkill highlight removed: no special styling needed */
/* Black variant for brand word in hero */
.zk-title .hl-dark { color: #000; }
.zk-desc .hl-green { background: #32CD32; color: #fff; padding: 4px 10px; border-radius: 8px; font-weight: 800; display: inline-block; margin-top: 48px; font-size: 32px; line-height: 1.2; }
@media (max-width: 720px) {
  .zk-desc .hl-green { margin-top: 28px; font-size: 26px; }
}
.hl-green { background: #32CD32; color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 800; display: inline-block; margin-top: 16px; font-size: 24px; line-height: 1.3; }
@media (max-width: 720px) {
  .hl-green { font-size: 20px; }
}
.hl-red { background: #FF006E; color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 800; display: inline-block; margin-top: 16px; font-size: 24px; line-height: 1.3; }
@media (max-width: 720px) {
  .hl-red { font-size: 20px; }
}
.zk-desc { font-size: 28px; margin-bottom: 30px; }
.zk-quote {
  position: relative;
  font-size: 32px;
  font-style: italic;
  line-height: 1.4;
  margin-top: 16px;
  padding: 16px 20px 16px 24px;
  border-left: 6px solid currentColor;
  background: var(--quote-bg, transparent);
  border-radius: 12px;
}
@media (max-width: 900px) {
  .zk-quote { font-size: 22px; padding: 12px 16px 12px 20px; }
}
.zk-img { max-width: 100%; max-height: 50vh; object-fit: contain; }
/* Nudge feature images slightly left on home sections */
.zk-right .zk-img { transform: translateX(-40px); }
@media (max-width: 900px) { .zk-right .zk-img { transform: none; } }

/* Colors */
.color1 { background: #FF5F1F; }
.color2 { background: #9B4DCA; }
.color3 { background: #4CB869; color: #fff !important; }
.color3 .nav__label { color: #333 !important; }
.color4 { background: #007BFF; }
.color5 { background: #FF006E; }
.color6 { background: #FFD800; }

/* Ensure Launch page (section with .color6) uses black text for readability */
.section.color6 { color: #000; }

/* Labels readable on bright items (3 and 6) */
.nav__item:nth-child(3) .nav__label,
.nav__item:nth-child(6) .nav__label { color: #000; }

/* Launch (6th) item: turn text white on hover only for this item */
.nav__item:nth-child(6):hover .nav__label { color: #fff !important; }
/* Tech Specs (3rd) item: turn text white on hover only for this item */
.nav__item:nth-child(3):hover .nav__label { color: #fff !important; }

/* Interactive Apps */
.ui-hue-wheel { margin: 0 auto; width: min(800px, 90vw, 70vh); position: relative; }
.ui-hue-wheel .center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; text-align: center; color: #fff; z-index: 5;
}
.ui-hue-wheel .center-status { font-size: 3.5cqi; font-weight: 700; }
.ui-hue-wheel .center-ip { font-size: 4.5cqi; font-weight: 800; }

.goto-top {
  position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
  background: #FF5F1F; color: #fff; border-radius: 50%; display: none;
  align-items: center; justify-content: center; font-size: 30px; cursor: pointer; z-index: 2000;
}

.launch-btn {
  display: inline-block; margin-top: 40px; padding: 20px 50px; background: #FF5F1F; color: #fff;
  font-size: 24px; font-weight: 700; border-radius: 50px; text-transform: uppercase; transition: all 0.3s ease;
}
.launch-btn:hover { transform: translateY(-5px); background: #fff; color: #FF5F1F; }

.mouse_scroll_container { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 999; pointer-events: none; }
.mouse_scroll { display: block; width: 24px; height: 100px; }
.m_scroll_arrows { display: block; width: 16px; height: 16px; transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 0 0 3px 4px; animation: mouse-scroll 1s infinite; }
.unu { animation-delay: 0.1s; animation-direction: alternate; }
.doi { animation-delay: 0.2s; animation-direction: alternate; margin-top: -6px; }
.trei { animation-delay: 0.3s; animation-direction: alternate; margin-top: -6px; }
.mouse { height: 42px; width: 24px; border-radius: 14px; border: 2px solid white; position: relative; }
.wheel { height: 4px; width: 4px; display: block; margin: 5px auto; background: white; position: relative; border: 2px solid #fff; border-radius: 8px; animation: mouse-wheel 0.6s linear infinite; }

@keyframes mouse-wheel { 0% { top: 1px; opacity: 1; transform: translateY(0); } 100% { top: 1px; opacity: 0; transform: translateY(6px); } }
@keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } }

/* Gooey Footer */
.footer { z-index: 1; --footer-background: #FF5F1F; position: relative; min-height: 100vh; background: var(--footer-background); display: flex; align-items: center; }
.footer .bubbles { position: absolute; top: 0; left: 0; right: 0; height: 1rem; filter: url("#blob"); }
.footer .bubbles .bubble {
  position: absolute; left: var(--position, 50%); background: var(--footer-background); border-radius: 100%;
  animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}
.footer .content { z-index: 2; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem; background: var(--footer-background); color: #fff; width: 100%; }
.footer .content { flex-direction: column; gap: 0.25rem; text-align: left; width: 100%; margin: 0 auto; align-items: flex-start; justify-content: center; }
.footer .content::before,
.footer .content::after { content: ""; display: block; width: 100%; height: 3px; background: #ffffff; margin: 2rem 0; }
.footer .content p { margin: 0; }
.footer .footer-credit { font-size: 36px; font-weight: 800; letter-spacing: 0.5px; }

@keyframes bubble-size { 0%, 75% { width: var(--size, 4rem); height: var(--size, 4rem); } 100% { width: 0rem; height: 0rem; } }
@keyframes bubble-move { 0% { bottom: -4rem; } 100% { bottom: var(--distance, 10rem); } }

/* Mobile */
@media (max-width: 720px) {
  body { padding-top: 60px; }
  .nav-collapsed { padding-top: 0 !important; }
  .nav { height: 60px; }
  .nav__label { font-size: 0; }
  .nav__icon { width: 32px; height: 32px; margin-bottom: 0; }
  .zk-container { padding-top: 0; }
  .zk-row { flex-direction: column; text-align: center; }
  .zk-left { text-align: center; }
  .zk-title { font-size: 40px; }
  .zk-desc { font-size: 20px; }
  .tech-page .section__title { font-size: 44px; }
  .faq-question { font-size: 18px; padding: 18px 18px; }
  .faq-question .indicator { font-size: 20px; }
  .faq-answer { font-size: 16px; padding: 12px 18px 18px 18px; }
}

/* Tech Specs page (tech-specs.html) — grid layout with equal-size cards */
.tech-page { height: auto; overflow: visible; }
.tech-page .section { position: static; transform: none; height: auto; text-align: left; }
.tech-page .section__title { font-size: 72px; }
.tech-page .section__wrapper { padding-top: 40px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 64px; margin-bottom: 80px; }
/* Tech page divider uses app-wide light divider styles; margin retained */
.tech-page .section-divider { margin: 12px 0 28px; }

/* FAQ page turns off slider to allow full scrolling */
.faq-page { height: auto; overflow: visible; }
.faq-page .section { position: static; transform: none; height: auto; text-align: left; }
.faq-page .section__wrapper { padding-top: 40px; }

/* Screenshots page turns off slider to allow full scrolling */
.shots-page { height: auto; overflow-y: visible; overflow-x: hidden; }
.shots-page .section { position: static; transform: none; height: auto; text-align: left; }
.shots-page .section__wrapper { padding-top: 40px; }
/* FAQ page can use same divider; keep extra bottom spacing set elsewhere */

/* Generic title divider + spacing utility for other pages */
.section__wrapper.has-divider { padding-top: 40px; }
/* App-wide light divider animation (from light-divider demo, adapted to full width) */
.section-divider {
  position: relative;
  height: 3px;
  margin: 12px 0 28px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.section-divider::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  animation: divider-progress 4s infinite;
  background: linear-gradient(to right, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.4) 80%, #ffffff);
}
.section-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 21px;
  border-radius: 2px;
  transform: translateY(-50%);
  animation: divider-dot 4s infinite;
  background: rgba(210, 189, 255, 0.55);
  filter: blur(8px);
  box-shadow: 0 0 10px 6px rgba(210, 189, 255, 0.4), -20px 0 15px 4px rgba(210, 189, 255, 0.3), -40px 0 15px 2px rgba(210, 189, 255, 0.2), -60px 0 10px 1px rgba(210, 189, 255, 0.1), -80px 0 10px 1px rgba(210, 189, 255, 0.05);
}
@keyframes divider-progress {
  0% { transform: scaleX(0); opacity: 0.5; }
  90% { transform: scaleX(1); opacity: 1; }
  92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes divider-dot {
  0% { left: 0; transform: translateY(-50%) scale(0.3, 0.8); opacity: 0; }
  90% { left: calc(100% - 30px); transform: translateY(-50%) scale(1,1); opacity: 1; }
  100% { left: calc(100% - 30px); transform: translateY(-50%) scale(1,1); opacity: 0; }
}
.feature-card { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 18px; color: #fff; min-height: 260px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.feature-icon { width: 72px; height: 72px; object-fit: contain; display: block; margin: 4px auto 12px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); }
.feature-card h3 { margin: 0 0 16px 0; font-size: 24px; line-height: 1.25; }
.feature-card p { margin: 0; font-size: 16px; line-height: 1.6; }

@property --_thumb-spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes thumb-spin { from { --_thumb-spin: 0deg; } to { --_thumb-spin: 1turn; } }
:where(.ui-hue-wheel) input[type="range"] {
  all: unset; appearance: none;
  background: radial-gradient(circle closest-side, oklch(0.7 0.15 var(--_angle, 0deg)) calc(100% - 10cqi - 1cqi), Canvas calc(100% - 10cqi - 1cqi), Canvas calc(100% - 10cqi), #0000 calc(100% - 10cqi)),
  conic-gradient(oklch(0.2 0.15 var(--_angle, 0deg)) 5%, oklch(0.25 0.15 var(--_angle, 0deg)) 5% 10%, oklch(0.3 0.15 var(--_angle, 0deg)) 10% 15%, oklch(0.35 0.15 var(--_angle, 0deg)) 15% 20%, oklch(0.4 0.15 var(--_angle, 0deg)) 20% 25%, oklch(0.45 0.15 var(--_angle, 0deg)) 25% 30%, oklch(0.5 0.15 var(--_angle, 0deg)) 30% 35%, oklch(0.55 0.15 var(--_angle, 0deg)) 35% 40%, oklch(0.6 0.15 var(--_angle, 0deg)) 40% 45%, oklch(0.65 0.15 var(--_angle, 0deg)) 45% 50%, oklch(0.75 0.15 var(--_angle, 0deg)) 50% 55%, oklch(0.78 0.15 var(--_angle, 0deg)) 55% 60%, oklch(0.81 0.15 var(--_angle, 0deg)) 60% 65%, oklch(0.84 0.15 var(--_angle, 0deg)) 65% 70%, oklch(0.87 0.15 var(--_angle, 0deg)) 70% 75%, oklch(0.9 0.15 var(--_angle, 0deg)) 75% 80%, oklch(0.93 0.15 var(--_angle, 0deg)) 80% 85%, oklch(0.96 0.15 var(--_angle, 0deg)) 85% 90%, oklch(0.98 0.15 var(--_angle, 0deg)) 90% 95%, oklch(1 0.15 var(--_angle, 0deg)) 95% 100%),
  radial-gradient(circle closest-side, Canvas calc(100% - 5cqi), #0000 calc(100% - 5cqi)),
  conic-gradient(oklch(0.7 0.15 calc(var(--_angle, 0deg) + 30deg)) 14.28%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 120deg)) 14.28% 28.57%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 150deg)) 28.57% 42.86%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 180deg)) 42.86% 57.14%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 210deg)) 57.14% 71.43%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 240deg)) 71.43% 85.71%, oklch(0.7 0.15 calc(var(--_angle, 0deg) + 330deg)) 85.71% 100%),
  radial-gradient(circle closest-side, Canvas calc(100% - 10cqi), #0000 calc(100% - 10cqi)),
  conic-gradient(in oklch longer hue, oklch(0.7 0.15 0), oklch(0.7 0.15 0));
  background-clip: content-box, content-box, padding-box, padding-box, border-box, border-box;
  background-origin: content-box, content-box, padding-box, padding-box, border-box, border-box;
  border: 11cqi solid transparent; border-radius: 50%; box-sizing: border-box; grid-area: 1 / -1; height: 100cqi; padding: 6cqi; pointer-events: none; width: 100cqi;
}
:where(.ui-hue-wheel) input[type="range"]::-webkit-slider-thumb { all: unset; appearance: none; }
:where(.ui-hue-wheel)::before {
  background: radial-gradient(circle 4cqi at center 5cqi, #fff8 100%, #0000 100%);
  content: ""; grid-area: 1 / -1; height: 100cqi; pointer-events: auto; rotate: calc(var(--_angle, 0deg) + var(--_thumb-spin)); touch-action: none; width: 10cqi;
}