/* Premium KBGOD visual system — ambient depth and tactile glass, with the original product visuals restored. */

:root {
  --bg: #0a0a0c;
  --copy: #a1a1aa;
}

html { background: var(--bg); }

body {
  background:
    radial-gradient(1100px 760px at 78% 4%, rgba(117,78,255,.075), transparent 70%),
    radial-gradient(1000px 720px at 10% 34%, rgba(192,75,255,.045), transparent 72%),
    radial-gradient(900px 680px at 82% 68%, rgba(76,205,255,.04), transparent 72%),
    #0a0a0c;
  background-attachment: fixed;
}

p,
.lead,
.statement > p:last-child,
.demo-copy p:not(.kicker),
.browser-copy > p:not(.kicker),
.platform-card > p:last-child,
.feature-card p,
.about-columns p,
.purchase > p:not(.kicker) {
  color: rgba(255,255,255,.61);
  line-height: 1.68;
}

h1,
.statement h2,
.section-head h2,
.about h2,
.purchase h2,
.demo h2,
.browser-copy h2,
.platform-card h3,
.feature-card h3 {
  letter-spacing: -.04em;
}

/* Premium glass navigation. */
.site-header {
  position: sticky;
  top: 12px;
  padding: 0 16px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: rgba(255,255,255,.09);
  border-left-color: rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(13,13,17,.58);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.nav a { color: rgba(255,255,255,.6); }
.nav a:hover { color: rgba(255,255,255,.96); }

/* Ambient section lighting. */
.hero,
.feature-grid,
.purchase,
.browser-section,
.everywhere {
  position: relative;
  isolation: isolate;
}

.hero::before,
.feature-grid::before,
.purchase::before,
.browser-section::before,
.everywhere::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
}

.hero::before {
  width: 840px;
  height: 620px;
  right: -260px;
  top: 20px;
  background: radial-gradient(circle, rgba(125,80,255,.12), rgba(69,198,255,.045) 38%, transparent 72%);
}

.feature-grid::before {
  width: 760px;
  height: 520px;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(138,43,226,.065), rgba(72,187,255,.025) 46%, transparent 72%);
}

.everywhere::before {
  width: 780px;
  height: 500px;
  right: -260px;
  top: 140px;
  background: radial-gradient(circle, rgba(65,199,255,.055), rgba(128,70,255,.025) 48%, transparent 72%);
}

.browser-section::before {
  width: 760px;
  height: 480px;
  right: -220px;
  top: 50px;
  background: radial-gradient(circle, rgba(89,107,255,.065), rgba(201,73,255,.022) 48%, transparent 72%);
}

.purchase::before {
  width: 760px;
  height: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(138,43,226,.15) 0%, rgba(76,205,255,.07) 28%, rgba(138,43,226,.035) 48%, transparent 72%);
  filter: blur(90px);
}

.hero > *,
.feature-grid > *,
.purchase > *,
.browser-section > *,
.everywhere > * {
  position: relative;
  z-index: 1;
}

/* Hero: quieter art, stronger message. */
.hero {
  grid-template-columns: 1.18fr .82fr;
  gap: 58px;
}

.hero-image-shell {
  width: min(300px, 76%);
  aspect-ratio: 1 / 1;
  background: transparent;
  animation: kbgodFloat 6s ease-in-out infinite;
}

.hero-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: saturate(.9) drop-shadow(0 24px 65px rgba(111,72,255,.28)) drop-shadow(0 0 24px rgba(87,205,255,.08));
}

.orbit-one { width: 330px; height: 330px; border-color: rgba(255,255,255,.045); }
.orbit-two { width: 410px; height: 410px; border-color: rgba(116,91,220,.065); }

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

h1 span {
  background: linear-gradient(104deg,#f4b59d 0%,#f1a9ca 22%,#d9b6f8 49%,#b8c8ff 72%,#a9e0ed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: saturate(.9);
}

.hero-actions .pill {
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 0 20px rgba(138,43,226,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hero-actions .pill:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 28px rgba(138,43,226,.38), 0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.09);
}

/* Premium glass cards. */
.feature-card,
.platform-card,
.about-card,
.browser-privacy {
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.10);
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.015);
  border-bottom: 1px solid rgba(255,255,255,.015);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 20px 60px rgba(0,0,0,.14);
}

.feature-card,
.platform-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.feature-card:hover,
.platform-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.15);
  border-left-color: rgba(255,255,255,.11);
}

.feature-card:nth-child(1):hover { box-shadow: 0 22px 70px rgba(143,82,255,.12), inset 0 1px 0 rgba(255,255,255,.04); }
.feature-card:nth-child(2):hover { box-shadow: 0 22px 70px rgba(221,91,208,.105), inset 0 1px 0 rgba(255,255,255,.04); }
.feature-card:nth-child(3):hover { box-shadow: 0 22px 70px rgba(87,199,255,.105), inset 0 1px 0 rgba(255,255,255,.04); }
.platform-card:nth-child(1):hover { box-shadow: 0 22px 70px rgba(169,79,255,.10), inset 0 1px 0 rgba(255,255,255,.04); }
.platform-card:nth-child(2):hover { box-shadow: 0 22px 70px rgba(116,103,255,.10), inset 0 1px 0 rgba(255,255,255,.04); }
.platform-card:nth-child(3):hover { box-shadow: 0 22px 70px rgba(92,207,255,.10), inset 0 1px 0 rgba(255,255,255,.04); }

/* Restore the original three capability visuals. */
.feature-card { min-height: 410px; }

.feature-visual {
  width: 150px;
  height: 150px;
  margin: 28px auto 24px;
  position: relative;
  flex: 0 0 auto;
}

.feature-visual-moment,
.feature-visual-voice,
.feature-visual-move {
  display: grid;
  place-items: center;
}

.feature-ring {
  position: absolute;
  width: 132px;
  height: 84px;
  border: 4px solid #b653ff;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(182,83,255,.5), inset 0 0 24px rgba(69,201,255,.13);
  transform: rotate(-4deg);
}

.feature-eye {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #fff 0 5%, #ffb14d 7%, #ff5b42 23%, #802cff 54%, #100d1a 70%);
  box-shadow: 0 0 34px rgba(255,91,66,.45), 0 0 54px rgba(128,44,255,.3);
  z-index: 2;
}

.feature-core {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #ff9d2e;
  z-index: 3;
}

.voice-bubble {
  width: 128px;
  height: 94px;
  border-radius: 44px 44px 44px 24px;
  border: 5px solid transparent;
  background: linear-gradient(#100d18,#100d18) padding-box, linear-gradient(120deg,#ff48bd,#a54fff 55%,#65cfff) border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  box-shadow: 0 0 36px rgba(165,79,255,.3);
}

.voice-bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -20px;
  width: 26px;
  height: 26px;
  background: #100d18;
  border-left: 5px solid #b64cff;
  border-bottom: 5px solid #b64cff;
  transform: skewY(-28deg) rotate(-12deg);
  border-radius: 0 0 0 6px;
}

.voice-bubble i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg,#ff74d2,#7b58ff,#72d9ff);
  box-shadow: 0 0 15px rgba(183,83,255,.55);
}

.move-halo {
  position: absolute;
  width: 128px;
  height: 58px;
  border: 5px solid #ff9d2e;
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255,157,46,.45);
  top: 25px;
}

.move-bolt {
  position: relative;
  z-index: 2;
  font-size: 104px;
  line-height: 1;
  font-weight: 900;
  color: #ffd15c;
  text-shadow: 0 0 8px #ff9d2e, 0 0 24px rgba(255,95,48,.75), 0 0 44px rgba(255,71,151,.4);
  transform: translateY(7px) rotate(5deg);
}

/* Keep the mobile demo in its original, compact product presentation. */
.product-demo { min-height: 720px; }
.demo-glow { width: 420px; height: 520px; opacity: .14; filter: blur(120px); }
.demo-device {
  width: min(450px, 100%);
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0a0910;
  padding: 14px;
  box-shadow: 0 50px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.demo-device::before,
.demo-device::after { content: none; }

/* Restore the original extension visual rather than the oversized browser-window mockup. */
.platform-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.platform-card { min-height: 370px; }
.platform-card h3 { font-size: 25px; }

.browser-icon {
  width: 82px;
  height: 58px;
  border: 3px solid #e6e2e9;
  border-radius: 12px;
  box-shadow: 0 0 32px rgba(101,207,255,.12);
}
.browser-icon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 3px;
  background: #e6e2e9;
}
.browser-icon::after {
  content: "•••";
  position: absolute;
  top: -2px;
  left: 9px;
  color: #e6e2e9;
  font-size: 10px;
  letter-spacing: 3px;
}

.browser-section {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 72px;
  padding: 90px 0 105px;
  border-top: 1px solid var(--line);
}

.browser-copy h2 {
  font-size: clamp(42px,5.2vw,70px);
  line-height: 1.02;
  letter-spacing: -.05em;
  margin-bottom: 30px;
  max-width: 720px;
}

.browser-copy > p:not(.kicker) {
  color: rgba(255,255,255,.61);
  font-size: 18px;
  line-height: 1.68;
  max-width: 620px;
}

.browser-copy .browser-privacy {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  color: #8f8799;
  font-size: 14px;
}

.browser-shot-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.browser-glow {
  position: absolute;
  width: 360px;
  height: 460px;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--pink),var(--purple),var(--cyan));
  filter: blur(120px);
  opacity: .12;
}

.browser-ui {
  width: min(390px,100%);
  min-height: 690px;
  position: relative;
  z-index: 2;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: #2d2d2f;
  box-shadow: 0 44px 100px rgba(0,0,0,.5);
  color: #f3f0f5;
}

.browser-ui-topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #343436;
}

.browser-titlemark {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  color: inherit;
  font-size: 18px;
}

.browser-titlemark img,
.browser-product-row img { border-radius: 10px; }

.browser-window-actions {
  display: flex;
  gap: 20px;
  font-size: 27px;
  color: #fff;
}

.browser-ui-card {
  width: auto;
  margin: 0 12px 12px;
  min-height: 606px;
  border-radius: 18px;
  background: linear-gradient(180deg,#0c0b18 0%,#09090c 45%,#080808 100%);
  padding: 27px 24px;
}

.browser-product-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.browser-product-row > div { display: flex; flex-direction: column; gap: 4px; }
.browser-product-row strong { font-size: 28px; letter-spacing: -.02em; }
.browser-product-row span { color: #938d99; font-size: 16px; }
.browser-ui-card > p { color: #9d98a2; font-size: 15px; line-height: 1.65; margin-bottom: 24px; }
.browser-action-row { display: grid; grid-template-columns: 1.35fr .75fr; gap: 10px; margin-bottom: 10px; }
.browser-ask,.browser-live,.browser-clear { min-height: 64px; border-radius: 16px; display: grid; place-items: center; font-weight: 850; font-size: 19px; }
.browser-ask { background: linear-gradient(120deg,#8c26ff,#5056ff); box-shadow: 0 14px 30px rgba(91,67,255,.22); }
.browser-live,.browser-clear { border: 1px solid rgba(255,255,255,.19); background: #202023; }
.browser-clear { margin-bottom: 22px; }
.browser-ready { color: #848087; font-weight: 700; font-size: 16px; }

/* Compact bottom rhythm: no giant dead areas. */
.about { padding-top: 20px; padding-bottom: 90px; }
.purchase {
  min-height: 500px;
  padding: 95px 0 100px;
}
.purchase-halo { width: 520px; height: 520px; opacity: .10; }

.purchase h2 span {
  background: linear-gradient(105deg,#f8f8fb 0%,#bcc9ff 16%,#7ee7ff 30%,#e5c3ff 48%,#fff 58%,#d5a7ff 72%,#ffb4d7 86%,#f8f8fb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: liquidMetal 8s ease-in-out infinite;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 20px rgba(138,43,226,.09), 0 0 28px rgba(111,88,255,.16);
  animation: ctaPulse 3.2s ease-in-out infinite;
}

.coming-soon::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from 0deg,rgba(255,255,255,.14),rgba(170,110,255,.55),rgba(92,215,255,.45),rgba(255,255,255,.10),rgba(226,91,206,.42),rgba(255,255,255,.14));
  animation: borderSpin 7s linear infinite;
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12,12,16,.94);
}

@keyframes liquidMetal {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ctaPulse {
  0%,100% { box-shadow: inset 0 0 18px rgba(138,43,226,.08), 0 0 24px rgba(111,88,255,.13); }
  50% { box-shadow: inset 0 0 28px rgba(138,43,226,.16), 0 0 38px rgba(92,215,255,.18); }
}
@keyframes borderSpin { to { transform: rotate(360deg); } }

@media (max-width:1000px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 300px; }
  .platform-icon { margin-bottom: 50px; }
}

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero-image-shell { width:min(270px,70vw); }
  .browser-section { grid-template-columns:1fr; gap:42px; text-align:center; padding:80px 0 90px; }
  .browser-copy > p:not(.kicker) { margin-left:auto; margin-right:auto; }
  .browser-shot-wrap { min-height:0; }
  .browser-ui { width:min(360px,90vw); text-align:left; }
}

@media (max-width:560px) {
  .site-header { top:8px; }
  .hero-image-shell { width:min(240px,68vw); }
  .browser-section { padding:70px 0 80px; }
  .browser-copy h2 { font-size:42px; }
  .browser-copy > p:not(.kicker) { font-size:16px; }
  .browser-ui { width:min(320px,88vw); border-radius:20px; min-height:620px; }
  .browser-ui-card { padding:22px 18px; min-height:540px; }
  .browser-product-row strong { font-size:24px; }
  .browser-action-row { grid-template-columns:1fr; }
  .feature-visual { width:122px; height:122px; }
  .purchase { min-height:430px; padding:75px 0 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-shell,
  .purchase h2 span,
  .coming-soon,
  .coming-soon::before {
    animation: none !important;
  }
}