@import url("v19.css?v=20260816");

@view-transition { navigation: auto; }

:root {
  --v20-ink: #031820;
  --v20-grid: rgba(184, 222, 210, 0.065);
  --v20-lime: #c9e69a;
  --v20-quiet: rgba(232, 243, 239, 0.58);
}

html { scroll-behavior: smooth; }

.kwd-header {
  background: color-mix(in srgb, var(--v20-ink) 92%, transparent);
  backdrop-filter: blur(18px);
}

.kwd-brand-v20 { display: inline-flex; align-items: center; gap: 11px; color: #f6fbf8; text-decoration: none; }
.kwd-brand-v20 img { display: none; }
.kwd-brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(201,230,154,.66); color: var(--v20-lime); font-size: 9px; font-weight: 850; letter-spacing: -.04em; }
.kwd-brand-words { display: grid; gap: 2px; line-height: 1; }
.kwd-brand-words strong { font-size: 12px; letter-spacing: .16em; }
.kwd-brand-words small { color: var(--v20-quiet); font-size: 8px; font-weight: 800; letter-spacing: .28em; }

.kwd-hero {
  position: relative;
  isolation: isolate;
  min-height: min(900px, 100svh);
  overflow: hidden;
  background: var(--v20-ink);
}

.kwd-hero::before,
.kwd-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.kwd-hero::before {
  background-image: linear-gradient(var(--v20-grid) 1px, transparent 1px), linear-gradient(90deg, var(--v20-grid) 1px, transparent 1px);
  background-position: center;
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 68% 46%, black 0 26%, rgba(0,0,0,.48) 62%, transparent 92%);
}

.kwd-hero::after {
  background: radial-gradient(circle at 72% 48%, rgba(36, 113, 116, .19), transparent 34%), radial-gradient(circle at 16% 100%, rgba(18, 96, 107, .17), transparent 28%);
}

.kwd-hero-layout { grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); align-items: center; min-height: min(900px, 100svh); }
.kwd-hero-copy { position: relative; z-index: 2; max-width: 640px; }
.kwd-kicker { color: var(--v20-lime); letter-spacing: .22em; }
.kwd-hero h1 { max-width: 720px; font-size: clamp(58px, 6.2vw, 96px); line-height: .91; letter-spacing: -.065em; }
.kwd-hero h1 em { color: var(--v20-lime); }
.kwd-hero-intro { max-width: 520px; font-size: 19px; line-height: 1.58; color: var(--v20-quiet); }
.kwd-button { border-radius: 0; transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, background-color 200ms ease; }
.kwd-button:hover { transform: translate3d(4px,-3px,0); box-shadow: -6px 6px 0 rgba(201, 230, 154, .2); }

.kwd-universe { position: relative; min-width: 0; margin-left: -4%; color: var(--v20-lime); transform: translate3d(var(--universe-x, 0), var(--universe-y, 0), 0); transition: transform 450ms cubic-bezier(.2,.8,.2,1); }
.kwd-universe svg { display: block; width: min(100%, 680px); margin-inline: auto; overflow: visible; }
.kwd-universe-rings circle { fill: none; stroke: rgba(214, 239, 230, .14); stroke-width: 1.35; }
.kwd-universe-links path { fill: none; stroke: rgba(201, 230, 154, .52); stroke-width: 2; stroke-dasharray: 8 12; animation: v20-dash 16s linear infinite; }
.kwd-universe-nodes circle { fill: var(--v20-lime); filter: drop-shadow(0 0 10px rgba(201,230,154,.4)); }
.kwd-universe-core { fill: #fbfff9; filter: drop-shadow(0 0 18px rgba(218, 250, 176, .92)); animation: v20-pulse 3.2s ease-in-out infinite; }
.kwd-universe-labels { font-family: var(--sans); font-size: 13px; letter-spacing: .08em; fill: rgba(233, 247, 240, .72); }
.kwd-universe-labels text:last-child { font-size: 14px; font-weight: 800; letter-spacing: .18em; fill: #fff; }
.kwd-universe > p { max-width: 330px; margin: -30px 0 0 auto; color: var(--v20-quiet); font-size: 12px; line-height: 1.5; text-align: right; }

.kwd-proof-strip { position: relative; z-index: 3; border-block-color: rgba(204, 232, 223, .15); background: #07222a; }
.kwd-proof-grid > * { border-color: rgba(204, 232, 223, .15); }
.kwd-proof-grid span { color: var(--v20-lime); }
.kwd-proof-grid a { position: relative; display: grid; gap: 8px; padding: 27px 26px 30px; color: #eff8f2; text-decoration: none; transition: background-color 220ms ease, color 220ms ease; }
.kwd-proof-grid a::after { position: absolute; right: 24px; bottom: 24px; width: 20px; height: 1px; content: ""; background: var(--v20-lime); opacity: 0; transform: scaleX(.4); transform-origin: right; transition: opacity 220ms ease, transform 220ms ease; }
.kwd-proof-grid a:hover, .kwd-proof-grid a:focus-visible { color: #031820; background: var(--v20-lime); outline: 0; }
.kwd-proof-grid a:hover span, .kwd-proof-grid a:focus-visible span { color: #1b555a; }
.kwd-proof-grid a:hover::after, .kwd-proof-grid a:focus-visible::after { background: #1b555a; opacity: 1; transform: scaleX(1); }
.kwd-proof-grid i { margin-left: 8px; color: var(--v20-lime); font-style: normal; transition: transform 220ms ease; }
.kwd-proof-grid a:hover i, .kwd-proof-grid a:focus-visible i { color: inherit; transform: translate(3px,3px); }

.kwd-lab-section { position: relative; overflow: hidden; color: #eaf3ef; background: #06202a; }
.kwd-lab-section::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(201,230,154,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,230,154,.04) 1px,transparent 1px); background-size: 92px 92px; pointer-events: none; }
.kwd-lab-section .kwd-section-heading { position: relative; z-index: 1; }
.kwd-lab-section .kwd-section-heading h2, .kwd-lab-section .kwd-section-heading p { color: inherit; }
.kwd-lab-section .kwd-kicker-dark { color: var(--v20-lime); }
.kwd-lab { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(201,230,154,.25); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.kwd-lab-toolbar { background: rgba(2,17,23,.75); }
.kwd-lab-question { background: #f1f4ee; }
.kwd-answer { transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.kwd-answer:hover:not(:disabled) { transform: translateY(-3px); }
.kwd-answer.is-selected { background: #dcedbe; }

.kwd-pathways { color: #eff6f2; background: #061a22; }
.kwd-pathways .kwd-section-heading h2, .kwd-pathways .kwd-section-heading p { color: inherit; }
.kwd-pathways .kwd-kicker-dark { color: var(--v20-lime); }
.kwd-path-grid { border-color: rgba(215,235,226,.18); }
.kwd-path-grid article { border-color: rgba(215,235,226,.18); background: transparent; }
.kwd-path-grid article > span, .kwd-path-grid .kwd-price { color: var(--v20-lime); }
.kwd-path-grid article > p:not(.kwd-price) { color: rgba(239,246,242,.66); }
.kwd-path-featured { color: #031820; background: var(--v20-lime) !important; }
.kwd-path-featured > span, .kwd-path-featured .kwd-price { color: #174850 !important; }
.kwd-path-featured > p:not(.kwd-price) { color: #234b50 !important; }

.kwd-products { color: #eef7f2; background: #06242c; }
.kwd-products .kwd-section-heading h2, .kwd-products .kwd-section-heading p { color: inherit; }
.kwd-products .kwd-kicker-dark, .kwd-products .kwd-product-state { color: var(--v20-lime); }
.kwd-product-feature { border-color: rgba(215,235,226,.16); background: transparent; }
.kwd-product-copy > p:not(.kwd-product-state), .kwd-product-copy li { color: rgba(239,246,242,.68); }
.kwd-product-visual { overflow: hidden; background: #031820; }
.kwd-product-visual img { transform: perspective(1300px) rotateY(-7deg) rotateX(2deg); transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.kwd-product-feature:hover .kwd-product-visual img { transform: perspective(1300px) rotateY(-1deg) rotateX(0deg) translateY(-7px); }
.kwd-threadleaf-visual { border-color: rgba(201,230,154,.25); background: rgba(255,255,255,.035); }
.kwd-threadleaf-visual::after { background: radial-gradient(circle, rgba(201,230,154,.3), transparent 62%); }

.kwd-research { color: #eff8f2; background: #031820; }
.kwd-research h2, .kwd-research p, .kwd-research li { color: inherit; }
.kwd-research .kwd-kicker { color: var(--v20-lime); }
.kwd-research .kwd-form { color: #061820; border: 1px solid rgba(201,230,154,.55); box-shadow: 16px 16px 0 rgba(201,230,154,.13); }

.kwd-section-heading h2 { letter-spacing: -.045em; }
.kwd-section-heading em { color: var(--v20-lime); }

@keyframes v20-dash { to { stroke-dashoffset: -260; } }
@keyframes v20-pulse { 50% { transform: scale(1.16); opacity: .76; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.kwd-product-feature-postcall {
  border-top: 1px solid rgba(10, 32, 45, 0.16);
}

.kwd-brand-mark { position: relative; overflow: hidden; }
.kwd-brand-mark::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(199,223,150,.76); border-radius: 3px; }
.kwd-brand-mark::after { content: ""; position: absolute; right: 8px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #c7df96; box-shadow: 0 0 10px #c7df96; }
.kwd-brand-mark span { position: relative; z-index: 1; font-size: .62em; letter-spacing: -.08em; }

.kwd-postcall-visual {
  min-height: 360px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(199, 223, 150, 0.28), transparent 23%),
    linear-gradient(135deg, #0b2a37, #071d29 72%);
}

.kwd-postcall-visual::before,
.kwd-postcall-visual::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(199, 223, 150, 0.35);
  border-radius: 50%;
}

.kwd-postcall-visual::after { inset: 24%; border-color: rgba(255,255,255,.17); }

.kwd-postcall-orbit { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #c7df96; box-shadow: 0 0 18px #c7df96; }
.kwd-postcall-orbit-one { top: 19%; right: 25%; }
.kwd-postcall-orbit-two { bottom: 22%; left: 23%; }

.kwd-postcall-card {
  position: relative;
  z-index: 1;
  width: min(78%, 300px);
  padding: 26px;
  display: grid;
  gap: 9px;
  background: rgba(7, 29, 41, 0.72);
  border: 1px solid rgba(199, 223, 150, 0.46);
  box-shadow: 0 26px 70px rgba(0,0,0,.24);
  color: white;
}
.kwd-postcall-card span { color: #c7df96; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.kwd-postcall-card strong { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.02; }
.kwd-postcall-card small { color: rgba(255,255,255,.68); }

.kwd-product-incubator { padding: clamp(42px, 7vw, 90px) 0 0; }
.kwd-product-incubator > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(10, 32, 45, .2); border-bottom: 1px solid rgba(10, 32, 45, .2); }
.kwd-product-incubator article { padding: 30px clamp(18px, 3vw, 42px) 34px; }
.kwd-product-incubator article + article { border-left: 1px solid rgba(10, 32, 45, .2); }
.kwd-product-incubator span { color: #466b66; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.kwd-product-incubator h3 { margin: .75rem 0; font-size: clamp(1.55rem, 2.6vw, 2.5rem); line-height: 1.02; }
.kwd-product-incubator p { margin: 0; color: #3d565d; max-width: 42ch; }

@media (max-width: 720px) {
  .kwd-postcall-visual { min-height: 280px; }
  .kwd-product-incubator > div { grid-template-columns: 1fr; }
  .kwd-product-incubator article + article { border-left: 0; border-top: 1px solid rgba(10, 32, 45, .2); }
}

@media (max-width: 980px) {
  .kwd-hero { min-height: auto; }
  .kwd-hero-layout { grid-template-columns: 1fr; min-height: auto; padding-block: 138px 72px; }
  .kwd-universe { width: min(100%, 620px); margin: 38px auto 0; }
  .kwd-universe > p { margin-top: -12px; }
}

@media (max-width: 620px) {
  .kwd-hero-layout { padding-block: 112px 52px; }
  .kwd-hero h1 { font-size: clamp(50px, 14vw, 72px); }
  .kwd-hero-intro { font-size: 17px; }
  .kwd-universe { margin-top: 24px; }
  .kwd-universe-labels { font-size: 16px; }
  .kwd-universe > p { max-width: 260px; font-size: 11px; }
  .kwd-products .kwd-product-feature { padding: 24px 0; }
}