@font-face { font-family: Manrope; src: url(fonts/manrope-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: Manrope; src: url(fonts/manrope-700.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: Manrope; src: url(fonts/manrope-800.woff2) format('woff2'); font-weight: 800; font-display: block; }

:root {
  --ink: #f2f4fb;
  --ink-2: #b7bdd1;
  --ink-3: #8189a1;
  --accent-lift: #4d7dff;
  --accent-core: #1b3bf0;
  --accent-edge: #1e42f7;
  --bg: #07080f;

  --blur-k: 0.020;
  --pad-k: 0.075;
  --glass-sat: 1.10;
  --glass-bright: 0.99;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
body { -webkit-font-smoothing: antialiased; }

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

.scene { position: absolute; inset: 0; isolation: isolate; overflow: hidden; }
.scene__dust { position: absolute; inset: 0; opacity: .55; }
.scene__pollen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.scene__wasp { position: absolute; display: block; pointer-events: none;
               height: auto; }
.scene__heart {
  position: absolute; display: block; pointer-events: none;
  opacity: 0; transform-origin: 50% 50%;
  will-change: opacity, transform;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.98)  0%,
    rgba(255,255,255,.74)  6%,
    rgba(236,246,255,.42) 14%,
    rgba(198,224,255,.20) 27%,
    rgba(150,192,255,.08) 48%,
    rgba(120,170,255,.02) 72%,
    rgba(120,170,255,0)  100%);
}

.gc { position: absolute; z-index: 2; pointer-events: none; }
.gc__base { position: absolute; inset: 0; background: var(--bg); }
.gc__mirror, .gc__lens { position: absolute; overflow: hidden; }
.gc__veil { position: absolute; inset: 0; }
.gc__veil { background: linear-gradient(180deg, rgba(150,180,255,.050), rgba(120,150,255,.105)); }
.gc__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gc__edge path { fill: none; }
.gc__edge path { stroke: rgba(226,236,255,.62); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gc__edge path.gc__glow { stroke: rgba(150,185,255,.20); stroke-width: 1; vector-effect: none; filter: blur(3px); }
.gc__edge path.gc__rail { stroke: rgba(200,220,255,.15); stroke-width: 1; vector-effect: non-scaling-stroke; }

.over { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.over a, .over button { pointer-events: auto; }

.bar {
  position: absolute; left: 0; right: 0; top: 0; height: 58px;
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
}
.bar__logo { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; }
.bar__word { white-space: nowrap; }
.bar__logo i { color: var(--accent-lift); font-style: normal; }
.bar__mark {
  width: 26px; height: 26px; font-size: 26px;
  position: relative; flex: none; display: block; border-radius: .29em;
  box-shadow: 0 .07em .18em rgba(0,0,0,.6), 0 0 .4em rgba(70,120,255,.35);
}
.bar__mark__body {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: .29em; clip-path: inset(0 round .29em);
  background: #050A22;
  box-shadow: inset 0 0 0 .008em rgba(160,200,255,.4);
}
.bar__mark__body::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(38% 34% at 24% 26%, #2EA8FF 0%, transparent 62%),
    radial-gradient(42% 36% at 78% 30%, #7B5CFF 0%, transparent 64%),
    radial-gradient(46% 40% at 54% 86%, #00E0FF 0%, transparent 62%),
    radial-gradient(34% 30% at 88% 78%, #1B3FE8 0%, transparent 60%);
  filter: blur(.055em);
}
.bar__mark svg { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.bar__mark__body::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: .29em;
  background: linear-gradient(166deg, rgba(255,255,255,.4) 0%, transparent 30%);
  mix-blend-mode: screen;
}
@media (max-width: 700px) { .bar__mark { width: 22px; height: 22px; font-size: 22px; } }
.bar__sp { flex: 1; }
.bar__nav { display: none; gap: 22px; }
.bar__nav a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.bar__cta {
  font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(77,125,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.bar__burger { width: 24px; display: grid; gap: 6px; justify-items: end;
  background: none; border: 0; padding: 0; }
.bar__burger span {
  height: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(226,236,255,.74), rgba(140,170,255,.30));
  box-shadow: 0 0 7px rgba(150,185,255,.45), inset 0 0.8px 0 rgba(255,255,255,.75);
}
.bar__burger span:first-child { width: 24px; }
.bar__burger span:last-child { width: 15px; }

.tx { position: absolute; }

.tx__h1 { margin: 0; font-size: 27px; line-height: 1.10; font-weight: 800; letter-spacing: -.018em; }
.tx__h1 span { display: block; }
.tx__h1 em { font-style: italic; color: var(--accent-lift); }

.tx__lead { margin: 13px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.tx__acts { margin: 20px 0 0; display: flex; gap: 9px; }
.tx__btn {
  position: relative; overflow: hidden;
  font-size: 12.5px; font-weight: 700; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 16px; white-space: nowrap; text-decoration: none;
}
.tx__btn span { position: relative; z-index: 1; }

.tx__btn--a {
  color: #fff;
  background: linear-gradient(90deg, var(--accent-edge) 0%, var(--accent-core) 24%,
                                     var(--accent-core) 76%, var(--accent-edge) 100%);
}
.tx__btn--a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,11,7,0.033) 0%, rgba(5,11,7,0.133) 7.7%, rgba(5,11,7,0.273) 14.7%,
    rgba(5,11,7,0.673) 21.7%, rgba(5,11,7,0.900) 28.5%, rgba(5,11,7,0.993) 42.5%,
    rgba(5,11,7,1) 50%, rgba(5,11,7,0.993) 57.5%, rgba(5,11,7,0.900) 71.5%,
    rgba(5,11,7,0.673) 78.3%, rgba(5,11,7,0.273) 85.3%, rgba(5,11,7,0.133) 92.3%,
    rgba(5,11,7,0.033) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.41) 0%,
    rgba(0,0,0,0.61) 11.5%, rgba(0,0,0,0.72) 18%, rgba(0,0,0,0.81) 25%,
    rgba(0,0,0,0.90) 50%, rgba(0,0,0,0.81) 75%, rgba(0,0,0,0.72) 82%,
    rgba(0,0,0,0.61) 88.5%, rgba(0,0,0,0.41) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.41) 0%,
    rgba(0,0,0,0.61) 11.5%, rgba(0,0,0,0.72) 18%, rgba(0,0,0,0.81) 25%,
    rgba(0,0,0,0.90) 50%, rgba(0,0,0,0.81) 75%, rgba(0,0,0,0.72) 82%,
    rgba(0,0,0,0.61) 88.5%, rgba(0,0,0,0.41) 100%);
}
.tx__btn--a:hover { filter: brightness(1.10); }

.tx__btn--b { color: #eaf0ff; }
.tx__btn--b > .bg__l { position: absolute; display: block; pointer-events: none; }
.tx__btn--b > .bb__veil {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(226,238,255,.075) 0%, rgba(160,190,255,.028) 32%,
                            rgba(120,150,255,.038) 68%, rgba(140,172,255,.070) 100%);
}
.tx__btn--b > .bb__edge {
  inset: 0;
  box-shadow:
    inset 0 9px 13px -9px rgba(233,241,255,.30),
    inset 0 -10px 14px -10px rgba(170,200,255,.24),
    inset 0 0 16px rgba(150,185,255,.07);
  transition: box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.tx__btn--b > .bb__veil { transition: background .22s cubic-bezier(.22,1,.36,1); }
.bsh {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 10px 20px -8px rgba(2,4,10,.78), 0 3px 7px rgba(2,4,10,.48);
}

.tx__btn--b:hover > .bb__veil {
  background:
    linear-gradient(180deg, rgba(226,238,255,.105) 0%, rgba(160,190,255,.040) 32%,
                            rgba(120,150,255,.052) 68%, rgba(140,172,255,.095) 100%);
}
.tx__btn--b:active { transform: translateY(2px); }

.tx__btn--b > .bb__ray { inset: 0; border-radius: inherit; --bb-ray-t: 5s; }
.bb__ray__band {
  position: absolute; inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  padding: var(--bb-ray-w);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.bb__ray__spin {
  position: absolute; left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: bbRaySpin var(--bb-ray-t) linear infinite;
  will-change: transform;
}
.bb__ray--hard { --bb-ray-w: 1.5px; }
.bb__ray--hard .bb__ray__spin {
  background: conic-gradient(
    rgba(233,242,255,.92) 0deg, rgba(233,242,255,0) 26deg,
    rgba(233,242,255,0) 154deg, rgba(233,242,255,.92) 180deg,
    rgba(233,242,255,0) 206deg, rgba(233,242,255,0) 334deg,
    rgba(233,242,255,.92) 360deg);
}
.bb__ray--soft { --bb-ray-w: 3px; filter: blur(3.5px); opacity: .8; }
.bb__ray--soft .bb__ray__spin {
  background: conic-gradient(
    rgba(122,164,255,.85) 0deg, rgba(122,164,255,0) 34deg,
    rgba(122,164,255,0) 146deg, rgba(122,164,255,.85) 180deg,
    rgba(122,164,255,0) 214deg, rgba(122,164,255,0) 326deg,
    rgba(122,164,255,.85) 360deg);
}
@keyframes bbRaySpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.tx__btn--b:hover > .bb__ray { --bb-ray-t: 3.4s; }
.tx__btn--b:hover > .bb__ray--soft { opacity: 1; }

.btn-nolabel .tx__btn span { visibility: hidden; }
.btn-probe-none .tx__btn--b { box-shadow: none; }
.btn-probe-none .tx__btn--b > .bg__l { display: none; }
.btn-probe-flat .tx__btn--b { box-shadow: none; }
.btn-probe-flat .tx__btn--b > .bb__veil,
.btn-probe-flat .tx__btn--b > .bb__edge,
.btn-probe-flat .tx__btn--b > .bb__ray { display: none; }


@media (min-width: 900px) {
  .bar { height: 76px; padding: 0 44px; gap: 28px; }
  .bar__nav { display: flex; }
  .bar__burger { display: none; }
  .bar__cta { font-size: 13px; padding: 10px 18px; }

  .tx__h1 { font-size: 39px; line-height: 1.06; margin-top: 0; }
  .tx__lead { font-size: 14.5px; margin-top: 16px; }
  .tx__acts { margin-top: 20px; gap: 12px; }
  .tx__btn { font-size: 14px; height: 50px; padding: 0 22px; }
  .bb__ray--hard { --bb-ray-w: 1.7px; }
  .bb__ray--soft { --bb-ray-w: 3.6px; filter: blur(4px); }
}

@media (min-width: 1440px) {
  .tx__h1 { font-size: 48px; }
}

@media (min-width: 1500px) {
  .tx__lead { font-size: 15.5px; }
}

@media (min-width: 1700px) {
  .tx__h1 { font-size: 54px; }
}

.tx--compact .tx__lead { font-size: 12.5px; line-height: 1.52; }
.tx--compact .tx__acts { margin-top: 16px; }

@media (min-height: 700px) {
  .tx__acts { margin-top: 30px; }
}

@media (min-width: 900px) {
  .tx__lead { font-size: 16px; }
  .tx__acts { margin-top: 36px; }
}

@media (min-width: 1500px) {
  .tx__lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero * { animation: none !important; transition: none !important; }
}