:root {
  --ink: #122027;
  --paper: #ffffff;
  --paper-dark: #f1f7fa;
  --line: #dce8ee;
  --muted: #5d6b72;
  --cream: #fff0bd;
  --blue: #7ccfea;
  --coral: #f3866a;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
body { position: relative; z-index: 0; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: #e2f1ff; font-family: var(--sans); -webkit-font-smoothing: antialiased; isolation: isolate; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before { inset: -22%; background: radial-gradient(ellipse 62% 45% at 2% 16%, rgba(109, 166, 244, .86) 0%, rgba(153, 197, 252, .5) 37%, transparent 70%), radial-gradient(ellipse 62% 48% at 92% 13%, rgba(185, 197, 255, .84) 0%, transparent 70%), radial-gradient(ellipse 76% 42% at 47% 51%, rgba(255, 255, 255, .8) 0%, rgba(233, 246, 255, .4) 43%, transparent 72%), radial-gradient(ellipse 58% 45% at 9% 89%, rgba(176, 216, 255, .94) 0%, transparent 71%), radial-gradient(ellipse 60% 49% at 96% 88%, rgba(215, 207, 255, .88) 0%, transparent 71%), linear-gradient(124deg, #cce6ff 0%, #eff8ff 44%, #e8e5ff 100%); filter: blur(30px); animation: cloudscape 23s ease-in-out infinite alternate; }
body::after { inset: -28%; z-index: -2; background: radial-gradient(ellipse 38% 29% at 22% 50%, rgba(255,255,255,.72), transparent 70%), radial-gradient(ellipse 47% 30% at 75% 44%, rgba(255,255,255,.68), transparent 72%), radial-gradient(ellipse 46% 31% at 54% 91%, rgba(168,211,255,.74), transparent 73%); filter: blur(62px); animation: clouds-drift 19s ease-in-out infinite alternate; }
@keyframes cloudscape { from { transform: translate3d(-4%,-2.5%,0); } to { transform: translate3d(4%,2.5%,0); } }
@keyframes clouds-drift { from { transform: translate3d(-6%,-3.5%,0); } to { transform: translate3d(6%,3.5%,0); } }
a { color: inherit; }
.wrap { width: calc(100vw - 48px); max-width: 1280px; margin: 0 auto; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; color: var(--ink); background: var(--cream); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 0; color: #15242c; text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 26px; flex: 0 0 auto; margin: 1px -2px 0 0; }
.brand-word { font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
nav { display: flex; gap: 26px; }
nav a { font-size: 13px; font-weight: 600; text-decoration: none; color: #45443f; transition: color .2s ease; }
nav a:hover { color: var(--ink); }

.hero { position: relative; min-height: 600px; color: var(--ink); }
.hero-layout { position: relative; min-height: 600px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .055em; text-transform: uppercase; color: var(--muted); }
.eyebrow span { width: 8px; height: 8px; background: var(--coral); }
.hero .eyebrow { color: #47626d; }
.hero h1 { margin: 0 0 22px; max-width: 840px; font: 600 clamp(58px, 7vw, 102px)/.92 var(--serif); letter-spacing: -.065em; }
.hero-intro { max-width: 515px; margin: 0; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; letter-spacing: -.025em; color: #48616c; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 48px; padding: 0 17px 0 19px; border: 1px solid currentColor; text-decoration: none; font: 600 13px var(--sans); transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-light { color: #fff; background: var(--ink); border-color: var(--ink); }
.button-light:hover { color: var(--ink); background: #fff; }
.text-link { font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.text-link span { margin-left: 6px; }
.text-link-light { color: var(--ink); }


.signal-field { position: absolute; width: min(50vw, 670px); right: -70px; bottom: -55px; color: white; }
.signal-field svg { display: block; width: 100%; height: auto; }
.field-rule { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.field-frame { stroke: rgba(255,255,255,.42); stroke-width: 1; }
.field-line { stroke: var(--cream); stroke-width: 2; } .field-line.secondary { stroke: var(--blue); stroke-dasharray: 4 7; }
.field-block.cream { fill: var(--cream); } .field-block.blue { fill: var(--blue); } .field-block.coral { fill: var(--coral); } .field-block.light { fill: #f8f3e8; }
.field-dot { fill: var(--blue); } .field-dot.warm { fill: var(--cream); }
.field-label { stroke: rgba(255,255,255,.48); stroke-width: 3; stroke-linecap: square; }
.field-caption { position: absolute; right: 13%; bottom: 23%; margin: 0; color: rgba(252,248,241,.85); font: 500 13px/1.25 var(--mono); letter-spacing: -.04em; }

h2 { margin: 0; font: 600 clamp(40px, 5vw, 70px)/.96 var(--serif); letter-spacing: -.06em; }
.product-rail { position: relative; z-index: 2; display: grid; gap: 14px; }
.product-card { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 20px; align-items: center; min-height: 205px; padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.57); box-shadow: 0 13px 30px rgba(42,96,122,.11), inset 0 1px rgba(255,255,255,.86); text-decoration: none; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.product-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.77); box-shadow: 0 20px 39px rgba(42,96,122,.16), inset 0 1px rgba(255,255,255,.95); }
.clue-card { background: rgba(255,253,247,.58); } .bloom-card { background: rgba(247,253,255,.62); }
.product-icon { display: grid; width: 94px; height: 94px; place-items: center; transform: translateY(-14px); }
.product-icon svg, .product-icon img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(25,26,23,.13)); }
.bloom-icon svg { width: 91px; height: 91px; }
.card-content { display: block; min-width: 0; }
.clue-card .card-content { transform: translateY(9px); }
.bloom-card .bloom-icon { transform: translateY(-32px); }
.card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.product-name { display: block; font: 600 34px/.95 var(--serif); letter-spacing: -.055em; }
.card-arrow, .link-arrow { position: relative; display: inline-block; width: .82em; height: .82em; color: currentColor; flex: 0 0 auto; }
.card-arrow::before, .link-arrow::before { content: ""; position: absolute; top: 49%; left: 2%; width: 100%; height: 1.5px; background: currentColor; transform: rotate(-45deg); transform-origin: center; }
.card-arrow::after, .link-arrow::after { content: ""; position: absolute; top: 2%; right: 1%; width: .42em; height: .42em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.card-arrow { color: #54727f; font-size: 18px; transition: transform .25s ease; }.product-card:hover .card-arrow { transform: translate(3px,-3px); }
.product-lead { display: block; margin-top: 9px; max-width: 34ch; font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: -.025em; }
.product-copy { display: block; margin-top: 9px; max-width: 45ch; color: #566c75; font-size: 12.5px; line-height: 1.48; letter-spacing: -.01em; }

.contact { min-height: 220px; display: grid; place-items: center; padding: 28px 0 44px; text-align: center; }
.contact-copy p { margin: 0 0 13px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.contact-copy a { color: var(--ink); font: 600 clamp(21px, 2.2vw, 31px)/1.2 var(--serif); letter-spacing: -.035em; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.contact-copy a .link-arrow { margin-left: .19em; font-size: .66em; vertical-align: 11%; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 25px 0 29px; border-top: 1px solid rgba(126,165,192,.3); color: #65635d; font: 500 10px/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.site-footer p { margin: 0; } .site-footer a { text-decoration: none; }

@media (max-width: 820px) {
  .hero, .hero-layout { min-height: auto; }
  .hero-layout { grid-template-columns: 1fr; align-items: start; padding: 104px 0 94px; }
  .signal-field { width: 570px; right: -100px; bottom: -60px; opacity: .84; }
  .section { padding: 100px 0; }
  .contact { min-height: 220px; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100vw - 32px); }
  .site-header { height: 74px; } nav { gap: 18px; }
  .hero-layout { padding: 74px 0 70px; gap: 42px; } .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(48px, 13vw, 64px); letter-spacing: -.07em; }
  .hero-intro { max-width: 25ch; font-size: 16px; }
  .signal-field { width: 530px; right: -210px; bottom: -24px; } .field-caption { display: none; }
  .section { padding: 82px 0; }
  .product-rail { gap: 12px; }
  .product-card { grid-template-columns: 69px minmax(0,1fr); gap: 14px; min-height: 172px; padding: 15px; border-radius: 14px; }
  .product-icon { width: 69px; height: 69px; transform: translateY(-12px); }.product-icon svg, .product-icon img { width: 64px; height: 64px; }.bloom-icon svg { width: 69px; height: 69px; }
  .clue-card .card-content { transform: translateY(7px); }.bloom-card .bloom-icon { transform: translateY(-26px); }
  .product-name { font-size: 29px; }.product-lead { margin-top: 7px; font-size: 12.5px; }.product-copy { margin-top: 7px; font-size: 11.5px; }
  .contact { min-height: 204px; padding: 26px 0 38px; }
  .site-footer { grid-template-columns: 1fr; gap: 7px; padding: 20px 0 24px; }
}

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