/* ========================================
   GLOBAL / DESIGN TOKENS
======================================== */

:root {
  --bg:#05070a;
  --bg2:#080c12;
  --text:#f4f7fb;
  --muted:#8f9baa;
  --line:rgba(255,
255,
255,
.10);
  /* FRAIVON brand accents */
  --blue:#0eb1fb;
  --blue2:#4768ff;
  --violet:#790cf4;
  --violet-soft:#9b5cff;
  --accent-gradient:linear-gradient(135deg,var(--violet) 0%,var(--blue2) 48%,var(--blue) 100%);
  --accent-gradient-vertical:linear-gradient(0deg,var(--violet) 0%,var(--blue) 100%);
}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,
ui-sans-serif,
system-ui,-apple-system,
BlinkMacSystemFont,"Segoe UI",
sans-serif;
  overflow-x:hidden}

a {
  color:inherit;
  text-decoration:none}

.shell {
  max-width:1240px;
  margin:auto;
  padding:0 30px}

nav {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  right:0;
  background:rgba(5,
7,
10,
.62);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,
255,
255,
.06)}

.navin {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between}

.wordmark {
  font-weight:800;
  letter-spacing:.18em;
  font-size:14px}

.wordmark b {
  color:var(--blue)}

.navright {
  font-size:15px;
  color:#a9b3bf;
  letter-spacing:.14em;
  text-transform:uppercase}

/* ========================================
   HERO
======================================== */

.hero {
  min-height:90vh;
  display:grid;
  place-items:center;
  position:relative;
  padding-top:72px;
  overflow:hidden}

.gridbg {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,
255,
255,
.035) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255,
255,
255,
.035) 1px,
transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,
black,
transparent 90%)}

.orb {
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle,
rgba(34,
168,
255,
.16),
rgba(71,
104,
255,
.05) 42%,
transparent 70%);
  filter:blur(10px);
  animation:float 9s ease-in-out infinite}

@keyframes float {
  50% {
  transform:translate(40px,-30px) scale(1.06)}

}

.heroInner {
  position:relative;
  z-index:2;
  text-align:center;
  max-width:1040px;
  padding:70px 0}

.logo {
  width:min(690px,
88vw);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 30px rgba(34,
168,
255,
.10))}

.kicker {
  margin-top:8px;
  font-size:14px;
  letter-spacing:.24em;
  color:var(--blue);
  text-transform:uppercase}

h1 {
  font-size:clamp(42px,
7vw,
88px);
  line-height:.95;
  letter-spacing:-.008em;
  margin:32px 0 25px;
  font-weight:650}

.hero p {
  max-width:720px;
  margin:auto;
  color:var(--muted);
  font-size:clamp(17px,
2vw,
21px);
  line-height:1.65}

.scroll {
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  font-size:14px;
  letter-spacing:.2em;
  color:#6f7b88;
  text-transform:uppercase}

section {
  position:relative}

.statement {
  padding:160px 0}

.overline {
  font-size:16px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:24px}

.big {
  font-size:clamp(44px,
6vw,
77px);
  line-height:1.02;
  letter-spacing:-.025em;
  max-width:1050px;
  margin:0}

.big .dim {
  color:#94979a}

.flowwords {
  margin-top:70px;
  display:flex;
  gap:14px;
  flex-wrap:wrap}

.pill {
  border:1px solid var(--line);
  padding:12px 16px;
  border-radius:999px;
  color:#9da8b4;
  background:rgba(255,
255,
255,
.025);
  transition:.3s}

.pill:hover {
  color:white;
  border-color:rgba(34,
168,
255,
.55);
  transform:translateY(-3px);
  box-shadow:0 10px 40px rgba(34,
168,
255,
.08)}

/* ========================================
   CAPABILITIES
======================================== */

.capabilities {
  padding:120px 0;
  border-top:1px solid var(--line)}

.caprow {
  display:grid;
  grid-template-columns:130px 1fr 1fr;
  gap:30px;
  padding:42px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:.3s}

.caprow:hover {
  padding-left:14px}

.capnum {
  color:var(--blue);
  font-size:14px;
  letter-spacing:.15em}

.caprow h2 {
  font-size:clamp(32px,
4vw,
50px);
  letter-spacing:-.045em;
  margin:0}

.caprow p {
  color:var(--muted);
  line-height:1.7;
  margin:6px 0 0;
  max-width:500px}

.manifesto {
  padding:160px 0;
  background:radial-gradient(circle at 70% 40%,
rgba(34,
168,
255,
.10),
transparent 32%)}

.quote {
  font-size:clamp(42px,
6vw,
84px);
  line-height:1.02;
  letter-spacing:-.035em;
  max-width:1000px}

.quote strong {
  color:var(--blue);
  font-weight:650}

.pulso {
  padding:120px 0;
  border-top:1px solid var(--line)}

.pulsoGrid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px}

.sticky {
  position:sticky;
  top:120px;
  height:max-content}

.sticky h2 {
  font-size:clamp(54px,
7vw,
76px);
  letter-spacing:-.03em;
  margin:5px 0}

.sticky p {
  color:var(--muted);
  max-width:400px;
  line-height:1.7}

.step {
  padding:32px 0 40px;
  border-bottom:1px solid var(--line)}

.step b {
  display:inline-block;
  color:var(--blue);
  font-size:18px;
  letter-spacing:.18em;
  margin-bottom:12px}

.step h3 {
  font-size:28px;
  margin:0 0 10px}

.step p {
  color:var(--muted);
  line-height:1.7;
  margin:0}

.final {
  min-height:75vh;
  display:grid;
  place-items:center;
  text-align:center;
  border-top:1px solid var(--line);
  overflow:hidden}

.final h2 {
  font-size:clamp(52px,
8vw,
78px);
  line-height:.9;
  letter-spacing:-.03em;
  margin:0}

.final h2 span {
  color:var(--blue)}

.final p {
  color:var(--muted);
  font-size:18px;
  margin-top:30px}

footer {
  padding:30px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#687482;
  font-size:12px}

.reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease,
transform .8s ease}

.reveal.on {
  opacity:1;
  transform:none}

.cursorGlow {
  position:fixed;
  width:140px;
  height:140px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle,
rgba(34,
168,
255,
.07),
transparent 15%);
  transform:translate(-50%,-50%)}

@media(max-width:800px) {
  .shell {
  padding:0 20px}

.caprow {
  grid-template-columns:55px 1fr}

.caprow p {
  grid-column:2}

.pulsoGrid {
  grid-template-columns:1fr;
  gap:30px}

.sticky {
  position:relative;
  top:auto}

.statement,
.manifesto {
  padding:50px 0}

.capabilities,
.pulso {
  padding:50px 0}

footer {
  gap:15px;
  flex-direction:column}

}

@media(pointer:coarse) {
  .cursorGlow {
  display:none}

}

/* ========================================
   USE CASES
======================================== */

.usecases {
  padding:80px 0;
  border-top:1px solid var(--line)}

.useIntro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:55px}

.useIntro h2 {
  font-size:clamp(42px,
5vw,
72px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0}

.useIntro p {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  margin:0}

.caseGrid {
  display:grid;
  grid-template-columns:repeat(2,
1fr);
  gap:18px}

.caseCard {
  position:relative;
  min-height:315px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(150deg,
rgba(255,
255,
255,
.035),
rgba(255,
255,
255,
.012));
  overflow:hidden;
  transition:.35s ease}

.caseCard:hover {
  transform:translateY(-6px);
  border-color:rgba(34,
168,
255,
.34);
  box-shadow:0 22px 70px rgba(0,
0,
0,
.25)}

.caseTag {
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue)}

.caseCard h3 {
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:48px 0 15px;
  max-width:440px}

.caseCard p {
  color:var(--muted);
  line-height:1.7;
  max-width:500px;
  margin:0}

.caseVisual {
  position:absolute;
  right:-16px;
  bottom:-16px;
  width:150px;
  height:150px;
  border:1px solid rgba(34,
168,
255,
.20);
  border-radius:28px;
  transform:rotate(18deg)}

.caseVisual::before,
.caseVisual::after {
  content:"";
  position:absolute;
  border:1px solid rgba(34,
168,
255,
.13);
  border-radius:20px;
  inset:18px}

.caseVisual::after {
  inset:38px;
  background:rgba(34,
168,
255,
.04)}

/* ========================================
   FOUNDERS
======================================== */

.founder {
  padding:50px 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,
rgba(255,
255,
255,
.018),
transparent)}

.founderGrid {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:85px;
  align-items:start}

.founderLabel {
  font-size:13px;
  letter-spacing:.18em;
  color:var(--blue);
  text-transform:uppercase}

.founderName {
  font-size:clamp(40px,
5vw,
40px);
  letter-spacing:-.04em;
  line-height:1;
  margin:18px 0 0}

.founderCopy {
  font-size:20px;
  line-height:1.7;
  color:#b0bbc7;
  margin:0}

.founderCopy strong {
  color:white;
  font-weight:600}

.founderMicro {
  margin-top:26px;
  color:#74808d;
  font-size:14px;
  letter-spacing:.05em}

.cta {
  padding:80px 0;
  border-top:1px solid var(--line);
  text-align:center;
  position:relative;
  overflow:hidden}

.cta::before {
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
rgba(34,
168,
255,
.12),
transparent 66%)}

.ctaInner {
  position:relative;
  z-index:2}

.cta h2 {
  font-size:clamp(52px,
7vw,
76px);
  line-height:.95;
  letter-spacing:-.05em;
  margin:0 auto;
  max-width:980px}

.cta p {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  max-width:670px;
  margin:28px auto 0}

.ctaNote {
  margin-top:36px;
  color:var(--blue);
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase}

@media(max-width:800px) {
  .useIntro,
.bfGrid,
.founderGrid {
  grid-template-columns:1fr;
  gap:30px}

.caseGrid {
  grid-template-columns:1fr}

.usecases,
.businessFirst,
.founder,
.cta {
  padding:65px 0}

}

.navActions {
  display:flex;
  align-items:center;
  gap:22px}

.navCta,
.primaryCta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(34,
168,
255,
.6);
  background:rgba(34,
168,
255,
.08);
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.3s}

.navCta:hover,
.primaryCta:hover {
  background: var(--accent-gradient) !important;
  border-color: var(--blue) !important;
  box-shadow:0 0 32px rgba(34,
168,
255,
.18);
  transform:translateY(-2px)}
  

.typeLine {
  height:30px;
  margin:0 auto 28px;
  color:#8f9baa;
  font-size:15px;
  letter-spacing:.13em;
  text-transform:uppercase}

.typeCursor {
  color:var(--blue);
  animation:cursorBlink .8s step-end infinite}

@keyframes cursorBlink {
  50% {
  opacity:0}

}

.pulseWrap {
  width:min(760px,
78vw);
  height:70px;
  margin:-8px auto -2px;
  overflow:visible}

.pulseSvg {
  width:100%;
  height:100%;
  overflow:visible}

.pulseBase {
  fill:none;
  stroke:rgba(255,
255,
255,
.055);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke}

.pulseTrack {
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(34,
168,
255,
.65));
  stroke-dasharray:34 726;
  animation:ecgMove 4.8s linear infinite}

@keyframes ecgMove {
  from {
  stroke-dashoffset:0}

to {
  stroke-dashoffset:-760}

}

/* ========================================
   CONNECTED BUSINESS
======================================== */

.connectSection {
  padding:80px 0;
  border-top:1px solid var(--line);
  overflow:hidden}

.connectHead {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:end;
  margin-bottom:62px}

.connectHead h2 {
  font-size:clamp(42px,
5.5vw,
76px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
  max-width:800px}

.connectHead p {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  margin:0}

.connectCanvas {
  height:430px;
  position:relative;
  border:1px solid var(--line);
  border-radius:28px;
  background:radial-gradient(circle at 50% 50%,
rgba(34,
168,
255,
.09),
rgba(255,
255,
255,
.012) 40%,
transparent 68%);
  overflow:hidden}

.connectLines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%}

.connectLines path {
  fill:none;
  stroke:rgba(34,
168,
255,
.24);
  stroke-width:1.4;
  stroke-dasharray:5 9}

.connectNode {
  position:absolute;
  transform:translate(-50%,-50%);
  min-width:140px;
  padding:17px 22px;
  border:1px solid rgba(255,
255,
255,
.13);
  border-radius:15px;
  background:rgba(8,
12,
18,
.76);
  backdrop-filter:blur(12px);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:14px;
  color:#a1adb9;
  box-shadow:0 14px 45px rgba(0,
0,
0,
.26);
  animation:connectFloat 6s ease-in-out infinite}

.connectNode::before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  margin-right:9px;
  box-shadow:0 0 13px rgba(34,
168,
255,
.8)}

.connectNode.core {
  left:50%;
  top:50%;
  min-width:130px;
  color:#fff;
  border-color:rgba(34,
168,
255,
.48);
  font-weight:700;
  font-size:17px;
  box-shadow:0 0 50px rgba(34,
168,
255,
.12)}

.nodePeople {
  left:17%;
  top:28%;
  animation-delay:-1s}

.nodeData {
  left:83%;
  top:28%;
  animation-delay:-4s}

.nodeClients {
  left:17%;
  top:74%;
  animation-delay:-2.3s}

.nodeOps {
  left:83%;
  top:74%;
  animation-delay:-5s}

@keyframes connectFloat {
  50% {
  transform:translate(-50%,
calc(-50% - 8px))}

}

.flowDot {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 18px rgba(34,
168,
255,
.95);
  opacity:0}

.d1 {
  animation:dotA 4s linear infinite}

.d2 {
  animation:dotB 4.5s linear infinite .8s}

.d3 {
  animation:dotC 4.2s linear infinite 1.8s}

.d4 {
  animation:dotD 4.7s linear infinite .3s}

@keyframes dotA {
  0% {
  left:50%;
  top:50%;
  opacity:0}

10% {
  opacity:1}

100% {
  left:17%;
  top:28%;
  opacity:0}

}

@keyframes dotB {
  0% {
  left:50%;
  top:50%;
  opacity:0}

10% {
  opacity:1}

100% {
  left:83%;
  top:28%;
  opacity:0}

}

@keyframes dotC {
  0% {
  left:50%;
  top:50%;
  opacity:0}

10% {
  opacity:1}

100% {
  left:17%;
  top:74%;
  opacity:0}

}

@keyframes dotD {
  0% {
  left:50%;
  top:50%;
  opacity:0}

10% {
  opacity:1}

100% {
  left:83%;
  top:74%;
  opacity:0}

}

.founderGrid {
  grid-template-columns:.75fr 1.25fr;
  align-items:center}

.founderPhoto {
  position:relative;
  min-height:430px;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,
rgba(34,
168,
255,
.12),
rgba(255,
255,
255,
.025) 50%,
#070a0e)}

.founderPhoto img {
  display:block;
  width:100%;
  height:100%;
  min-height:430px;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center}

.photoPlaceholder {
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  text-align:center;
  color:#66727f}

.photoMissing .photoPlaceholder {
  display:grid}

.photoPlaceholder span {
  display:block;
  font-size:72px;
  letter-spacing:.05em;
  color:rgba(34,
168,
255,
.28);
  margin-bottom:10px}

.photoPlaceholder small {
  display:block;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase}

.founderInfo {
  padding-left:8px}

.primaryCta {
  margin-top:36px;
  padding:15px 27px;
  font-size:14px}

/* ========================================
   CONTACT
======================================== */

.contactSection {
  padding:85px 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,
rgba(34,
168,
255,
.025),
transparent)}

.contactGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px}

.contactLead h2 {
  font-size:clamp(46px,
5.4vw,
76px);
  line-height:1;
  letter-spacing:-.04em;
  margin:0}

.contactLead p {
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
  max-width:530px;
  margin:26px 0 0}

.contactData {
  border-top:1px solid var(--line)}

.contactRow {
  display:flex;
  gap:18px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line)}

.contactIcon {
  width:42px;
  height:42px;
  border:1px solid rgba(34,
168,
255,
.24);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  flex:0 0 auto}


.contactIcon--whatsapp img {
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
}

.contactIcon svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6}

.contactRow small {
  display:block;
  color:#72808e;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:4px}

.contactRow strong {
  font-size:17px;
  font-weight:500;
  color:#dbe4ec}

.socialTitle {
  margin-top:30px;
  color:#72808e;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em}

.socialLinks {
  display:flex;
  gap:12px;
  margin-top:14px}

.socialLinks a {
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#a8b3bd;
  transition:.25s}

.socialLinks a:hover {
  color:#fff;
  border-color:rgba(34,
168,
255,
.5);
  transform:translateY(-3px)}

.socialLinks svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7}

.socialLinks a:nth-child(2) svg {
  fill:currentColor;
  stroke:none}

footer {
  border-top:1px solid var(--line);
  padding:34px 0}

.footerInner {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  color:#66727f;
  font-size:12px}

.footerBrand {
  font-weight:800;
  letter-spacing:.16em;
  color:#dce5ed;
  font-size:15px;
  display:block;
  margin-bottom:4px}

.footerBrand span {
  color:var(--blue)}

.footerInner small {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em}

.footerCenter {
  text-align:center}

.footerRight {
  text-align:right}

@media(max-width:800px) {
  .navright {
  display:none}

.navActions {
  gap:10px}

.navCta {
  padding:10px 14px;
  font-size:11px}

.typeLine {
  font-size:11px;
  height:26px;
  margin-bottom:18px}

.pulseWrap {
  width:92vw;
  height:52px}

.connectHead,
.contactGrid {
  grid-template-columns:1fr;
  gap:30px}

.connectCanvas {
  height:520px}

.connectNode {
  min-width:110px;
  padding:14px 14px;
  font-size:11px}

.connectNode.core {
  left:50%;
  top:50%}

.nodePeople {
  left:24%;
  top:18%}

.nodeData {
  left:76%;
  top:18%}

.nodeClients {
  left:24%;
  top:82%}

.nodeOps {
  left:76%;
  top:82%}

.founderGrid {
  grid-template-columns:1fr}

.founderPhoto {
  min-height:380px}

.founderPhoto img {
  min-height:380px}

.footerInner {
  grid-template-columns:1fr;
  gap:12px}

.footerCenter,
.footerRight {
  text-align:left}

}

.pulseHidden {
  fill:none;
  stroke:transparent;
  stroke-width:1;
}

.pulseTrail {
  fill:none;
  stroke:var(--blue);
  stroke-width:2.6;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(34,
168,
255,
.7));
  stroke-dasharray:6 94;
  animation:pulseTrailMove 4.8s linear infinite;
}

.pulseDot {
  fill:var(--blue);
  filter:drop-shadow(0 0 8px rgba(34,
168,
255,
.95));
}

@keyframes pulseTrailMove {
  from {
  stroke-dashoffset:0}

to {
  stroke-dashoffset:-100}

}

.flowGraphic {
  position:relative;
  border:1px solid var(--line);
  border-radius:28px;
  background:radial-gradient(circle at 54% 50%,
rgba(34,
168,
255,
.055),
transparent 33%),
linear-gradient(180deg,
rgba(255,
255,
255,
.018),
rgba(255,
255,
255,
.006));
  padding:18px;
  overflow:hidden;
}

.flowGraphic::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,
255,
255,
.022) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255,
255,
255,
.022) 1px,
transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
}

.flowGraphic svg {
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}

@media(max-width:800px) {
  .flowGraphic {
  padding:6px;
  overflow-x:auto}

.flowGraphic svg {
  min-width:860px}

}

.pulseHidden {
  fill:none;
  stroke:transparent;
  stroke-width:0}

.pulseDot {
  fill:var(--blue)}

.pulseGhost {
  fill:var(--blue);
  pointer-events:none}

.ghost1 {
  opacity:.25}

.ghost2 {
  opacity:.12}

.ghost3 {
  opacity:.05}

.pulseTrail,
.pulseTrack,
.pulseBase {
  display:none!important}

.systemBuild {
  position:relative;
  height:590px;
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  background:radial-gradient(circle at 56% 46%,
rgba(34,
168,
255,
.09),
transparent 26%),
linear-gradient(rgba(255,
255,
255,
.022) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255,
255,
255,
.022) 1px,
transparent 1px),
#070a0e;
  background-size:auto,
48px 48px,
48px 48px,
auto;
}

.systemBuild::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 100px rgba(0,
0,
0,
.5);
  border-radius:30px}

.systemWires {
  position:absolute;
  inset:0;
  width:100%;
  height:560px;
  z-index:1}

.wire {
  fill:none;
  stroke:url(#wireGrad);
  stroke-width:1.8;
  opacity:0;
  stroke-dasharray:800;
  stroke-dashoffset:800}

.systemBuild.on .wire1 {
  animation:wireDraw .7s ease forwards .40s}

.systemBuild.on .wire2 {
  animation:wireDraw .7s ease forwards .72s}

.systemBuild.on .wire3 {
  animation:wireDraw .7s ease forwards 1.04s}

.systemBuild.on .wire4 {
  animation:wireDraw .7s ease forwards 1.36s}

.systemBuild.on .wireOut {
  animation:wireDraw .8s ease forwards 2.35s}

@keyframes wireDraw {
  to {
  opacity:.9;
  stroke-dashoffset:0}

}

.systemInputs {
  position:absolute;
  left:5%;
  top:58px;
  width:240px;
  display:flex;
  flex-direction:column;
  gap:26px;
  z-index:4}

.systemButton {
  width:100%;
  min-height:82px;
  appearance:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:20px 18px;
  text-align:left;
  color:#f4f7fb;
  border-radius:18px;
  background:linear-gradient(180deg,
rgba(255,
255,
255,
.045),
rgba(255,
255,
255,
.014)),
#080c12;
  box-shadow:0 0 0 1px rgba(34,
168,
255,
.38),
inset 0 0 0 5px rgba(255,
255,
255,
.035),
inset 0 0 0 6px rgba(255,
255,
255,
.10),
0 12px 32px rgba(0,
0,
0,
.24);
  transition:transform .28s ease,
box-shadow .28s ease,
background .28s ease;
  font-family:inherit;
}

.systemButton:hover,
.systemButton:focus-visible {
  transform:translateX(8px) scale(1.018);
  outline:none;
  background:linear-gradient(180deg,
rgba(34,
168,
255,
.12),
rgba(255,
255,
255,
.018)),
#080c12;
  box-shadow:0 0 0 2px rgba(34,
168,
255,
.7),
inset 0 0 0 5px rgba(255,
255,
255,
.04),
inset 0 0 0 6px rgba(255,
255,
255,
.14),
0 0 30px rgba(34,
168,
255,
.12);
}

.nodeDot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue);
  margin-top:7px;
  flex:0 0 auto;
  box-shadow:0 0 14px rgba(34,
168,
255,
.72)}

.nodeText {
  display:block;
  min-width:0}

.nodeText strong {
  display:block;
  font-size:18px;
  letter-spacing:.03em;
  font-weight:600}

.nodeText small {
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  color:#94a1ae;
  font-size:13px;
  line-height:1.45;
  transition:max-height .32s ease,
opacity .28s ease,
margin-top .28s ease}

.systemButton:hover .nodeText small,
.systemButton:focus-visible .nodeText small {
  max-height:64px;
  opacity:1;
  margin-top:7px}

.buildStep {
  opacity:0;
  transform:translateY(16px) scale(.96)}

.systemBuild.on .step1 {
  animation:buildIn .5s ease forwards .05s}

.systemBuild.on .step2 {
  animation:buildIn .5s ease forwards .35s}

.systemBuild.on .step3 {
  animation:buildIn .5s ease forwards .65s}

.systemBuild.on .step4 {
  animation:buildIn .5s ease forwards .95s}

.systemBuild.on .step5 {
  animation:hexBuild .8s cubic-bezier(.2,
.8,
.2,
1) forwards 1.55s}

.systemBuild.on .step6 {
  animation:buildIn .45s ease forwards 2.25s}

.systemBuild.on .step7 {
  animation:orbBuild .75s cubic-bezier(.2,
.8,
.2,
1) forwards 2.72s}

.systemBuild.on .step8 {
  animation:buildIn .55s ease forwards 3.35s}

@keyframes buildIn {
  to {
  opacity:1;
  transform:none}

}

@keyframes hexBuild {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(.6) rotate(-18deg)}

70% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.035) rotate(0)}

100% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)}

}

@keyframes orbBuild {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(.65)}

70% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.04)}

100% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)}

}

.fraivonHex {
  position:absolute;
  left:56%;
  top:47%;
  width:238px;
  height:272px;
  z-index:5;
  clip-path:polygon(50% 0,
94% 25%,
94% 75%,
50% 100%,
6% 75%,
6% 25%);
  background:linear-gradient(145deg,
#27b4ff,
#0b7fde 50%,
#4768ff);
  padding:9px;
  filter:drop-shadow(0 0 22px rgba(34,
168,
255,
.22));
}

.hexInner {
  width:100%;
  height:100%;
  clip-path:inherit;
  background:#070b10;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,
255,
255,
.18)}

.hexBrand {
  font-size:31px;
  font-weight:700;
  letter-spacing:.12em;
  color:#f2f5f7}

.hexBrand span {
  color:var(--blue)}

.hexSystems {
  margin-top:15px;
  font-size:18px;
  letter-spacing:.18em;
  color:#c5cfd8}

.resultOrb {
  position:absolute;
  left:87%;
  top:47%;
  width:220px;
  height:220px;
  z-index:5;
  transform:translate(-50%,-50%)}

.resultSpin {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
var(--blue),
#4768ff 30%,
rgba(34,
168,
255,
.20) 55%,
var(--blue) 100%);
  animation:resultRotate 9s linear infinite;
  box-shadow:0 0 26px rgba(34,
168,
255,
.18)}

.resultSpin::before {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#070a0e;
  box-shadow:inset 0 0 0 2px rgba(255,
255,
255,
.26),
inset 0 0 0 10px #070a0e,
inset 0 0 0 12px rgba(255,
255,
255,
.10)}

@keyframes resultRotate {
  to {
  transform:rotate(360deg)}

}

.resultInner {
  position:absolute;
  inset:25px;
  z-index:2;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px}

.resultInner span {
  color:var(--blue);
  font-size:18px;
  letter-spacing:.12em}

.resultInner strong {
  font-size:29px;
  line-height:1;
  margin-top:5px}

.resultInner small {
  color:#8996a4;
  font-size:11px;
  line-height:1.45;
  margin-top:13px}

.systemFooter {
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:5;
  width:90%;
  text-align:center;
  transform:translateX(-50%) translateY(16px)}

.systemFooter strong {
  display:block;
  color:#dce5ed;
  font-size:17px;
  font-weight:500;
  letter-spacing:.035em}

.systemFooter i {
  color:var(--blue);
  font-style:normal;
  padding:0 8px}

.systemFooter span {
  display:block;
  color:var(--blue);
  margin-top:10px;
  font-size:13px;
  letter-spacing:.18em}

.systemBuild.reveal {
  transform:translateY(40px)}

.systemBuild.reveal.on {
  opacity:1;
  transform:none}

@media(max-width:980px) {
  .systemBuild {
  height:auto;
  min-height:930px;
  padding:36px 22px 120px}

.systemWires {
  display:none}

.systemInputs {
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  max-width:520px;
  margin:0 auto}

.fraivonHex {
  left:50%;
  top:610px;
  width:190px;
  height:220px}

.resultOrb {
  left:50%;
  top:820px;
  width:180px;
  height:180px}

.resultInner strong {
  font-size:24px}

.systemFooter {
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  margin:620px auto 0}

}

.systemBuild {
  position:relative;
  width:100%;
  height:590px;
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  background:radial-gradient(circle at 56% 44%,
rgba(34,
168,
255,
.085),
transparent 27%),
linear-gradient(rgba(255,
255,
255,
.022) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255,
255,
255,
.022) 1px,
transparent 1px),
#070a0e;
  background-size:auto,
48px 48px,
48px 48px,
auto;
}

.diagramCanvas {
  position:absolute;
  left:0;
  top:0;
  width:1200px;
  height:590px;
  transform-origin:top left;
}

.systemBuild::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 100px rgba(0,
0,
0,
.48);
  border-radius:30px;
}

.systemWires {
  position:absolute;
  inset:0;
  width:1200px;
  height:590px;
  z-index:1;
  pointer-events:none;
}

.wire {
  fill:none;
  stroke:url(#wireGrad);
  stroke-width:1.8;
  opacity:0;
  stroke-dasharray:900;
  stroke-dashoffset:900;
}

.systemInputs {
  position:absolute;
  left:70px;
  top:58px;
  width:180px;
  display:flex;
  flex-direction:column;
  gap:26px;
  z-index:4;
}

.systemButton {
  width:180px;
  height:82px;
  min-height:82px;
  padding:18px 16px;
}

.nodeText strong {
  font-size:17px;
}

.fraivonHex {
  position:absolute;
  left:645px;
  top:262px;
  width:250px;
  height:250px;
  z-index:5;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,
93.3% 25%,
93.3% 75%,
50% 100%,
6.7% 75%,
6.7% 25%);
  background:linear-gradient(145deg,
#35c1ff 0%,
#1598ea 42%,
#4768ff 100%);
  padding:8px;
  filter:drop-shadow(0 0 10px rgba(34,
168,
255,
.55)) drop-shadow(0 0 28px rgba(34,
168,
255,
.22));
}

.hexInner {
  width:100%;
  height:100%;
  clip-path:inherit;
  background:radial-gradient(circle at 50% 45%,
rgba(34,
168,
255,
.06),
transparent 50%),
#070b10;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,
255,
255,
.18);
}

.hexLogo {
  width:178px;
  max-width:72%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(34,
168,
255,
.12));
}

.hexSystems {
  margin-top:14px;
  font-size:17px;
  letter-spacing:.21em;
  color:#c6d0da;
}

.resultOrb {
  position:absolute;
  left:1018px;
  top:262px;
  width:220px;
  height:220px;
  z-index:5;
  transform:translate(-50%,-50%);
  cursor:default;
  outline:none;
}

.resultInner span {
  font-size:19px;
}

.resultInner strong {
  font-size:31px;
}

.resultInner small {
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transform:translateY(5px);
  transition:max-height .35s ease,
opacity .28s ease,
margin-top .3s ease,
transform .3s ease;
}

.resultOrb:hover .resultInner small,
.resultOrb:focus-visible .resultInner small {
  max-height:54px;
  opacity:1;
  margin-top:12px;
  transform:none;
}

.resultOrb:hover .resultInner strong,
.resultOrb:focus-visible .resultInner strong {
  transform:translateY(-2px);
}

.resultInner strong {
  transition:transform .3s ease;
}

.systemFooter {
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  z-index:5;
  width:100%;
  text-align:center;
  transform:translateY(16px);
  padding:0 60px;
}

.systemFooter strong {
  font-size:17px;
  white-space:nowrap;
}

.systemFooter span {
  margin-top:9px;
}

.systemBuild.on .step5 {
  animation:hexBuildV7 .8s cubic-bezier(.2,
.8,
.2,
1) forwards 1.55s}

.systemBuild.on .step7 {
  animation:orbBuildV7 .75s cubic-bezier(.2,
.8,
.2,
1) forwards 2.72s}

@keyframes hexBuildV7 {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(.62) rotate(-16deg)}

70% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.035) rotate(0)}

100% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)}

}

@keyframes orbBuildV7 {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(.68)}

70% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.035)}

100% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)}

}

@media(max-width:980px) {
  .systemBuild {
  min-height:0;
  padding:0;
}

.systemWires {
  display:block;
}

.systemInputs {
  position:absolute;
  left:70px;
  top:58px;
  width:180px;
  margin:0;
}

.fraivonHex {
  left:645px;
  top:262px;
  width:250px;
  height:250px;
}

.resultOrb {
  left:1018px;
  top:262px;
  width:220px;
  height:220px;
}

.systemFooter {
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  width:100%;
  margin:0;
  transform:translateY(16px);
}

}

@media(max-width:640px) {
  .connectSection {
  padding-left:0;
  padding-right:0}

.systemFooter strong {
  font-size:16px}

}

.cursorGlow {
  width:430px;
  height:430px;
  background:radial-gradient(circle,
rgba(34,
168,
255,
.18) 0%,
rgba(34,
168,
255,
.10) 24%,
rgba(71,
104,
255,
.055) 46%,
transparent 68%);
  filter:blur(2px);
  mix-blend-mode:screen;
}

.systemBuild.on .wireOut1 {
  animation:wireDraw .85s ease forwards 2.18s}

.systemBuild.on .wireOut2 {
  animation:wireDraw .85s ease forwards 2.38s}

.systemBuild.on .wireOut3 {
  animation:wireDraw .85s ease forwards 2.58s}

.resultCluster {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none}

.resultCluster .resultOrb {
  pointer-events:auto}

.resultMain {
  left:1010px;
  top:262px;
  width:205px;
  height:205px}

.resultSmall {
  width:150px;
  height:150px}

.resultTop {
  left:1000px;
  top:128px}

.resultBottom {
  left:1000px;
  top:397px}

.resultSpinLight {
  background:conic-gradient(from 0deg,
#72d7ff,
#39b9ff 35%,
rgba(114,
215,
255,
.22) 62%,
#72d7ff 100%)}

.resultSpinDark {
  background:conic-gradient(from 0deg,
#3168d8,
#2445a8 40%,
rgba(49,
104,
216,
.20) 65%,
#3168d8 100%)}

.resultInnerSmall {
  inset:22px}

.resultInnerSmall strong {
  font-size:19px;
  line-height:1.05;
  letter-spacing:.04em;
  color:#f3f6fa}

.resultOrb:hover .resultSpin,
.resultOrb:focus-visible .resultSpin {
  box-shadow:0 0 36px rgba(34,
168,
255,
.30)}

.systemBuild.on .step6 {
  animation:orbBuildV8 .62s cubic-bezier(.2,
.8,
.2,
1) forwards 2.55s}

.systemBuild.on .step7 {
  animation:orbBuildV8 .68s cubic-bezier(.2,
.8,
.2,
1) forwards 2.82s}

.systemBuild.on .step7b {
  animation:orbBuildV8 .68s cubic-bezier(.2,
.8,
.2,
1) forwards 3.08s}

.systemBuild.on .step8 {
  animation:buildIn .55s ease forwards 3.45s}

@keyframes orbBuildV8 {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(.65)}

72% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.04)}

100% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)}

}

.foundersSection {
  padding:140px 0}

.foundersSection>.shell>.overline {
  margin-bottom:50px}

.founderRow {
  padding:0 0 95px}

.founderRow + .founderRow {
  border-top:1px solid var(--line);
  padding-top:95px}

.founderRowReverse {
  grid-template-columns:1.25fr .75fr}

.founderRowReverse .founderInfo {
  padding-left:0;
  padding-right:8px}

.founderRow .founderName {
  margin-top:0}

@media(max-width:980px) {
  .resultMain {
  left:1010px;
  top:262px;
  width:205px;
  height:205px}

.resultTop {
  left:1000px;
  top:128px;
  width:150px;
  height:150px}

.resultBottom {
  left:1000px;
  top:397px;
  width:150px;
  height:150px}

.founderRowReverse {
  grid-template-columns:1fr}

.founderRowReverse .founderInfo {
  order:2}

.founderRowReverse .founderPhoto {
  order:1}

}

@media(max-width:800px) {
  .foundersSection {
  padding:95px 0}

.founderRow {
  padding-bottom:70px}

.founderRow + .founderRow {
  padding-top:70px}

}

.resultTop {
  left:1025px;
  top:105px;
  width:145px;
  height:145px;
}

.resultMain {
  left:1025px;
  top:262px;
  width:200px;
  height:200px;
}

.resultBottom {
  left:1025px;
  top:420px;
  width:145px;
  height:145px;
}

.resultTop .resultSpin,
.resultMain .resultSpin,
.resultBottom .resultSpin {
  animation:resultRotate 9s linear infinite!important;
}

.resultTop .resultSpin {
  animation-duration:11s!important}

.resultBottom .resultSpin {
  animation-duration:13s!important;
  animation-direction:reverse!important}

.systemBuild.on .wireOut1 {
  animation:wireDraw .85s ease forwards 2.18s}

.systemBuild.on .wireOut2 {
  animation:wireDraw .85s ease forwards 2.34s}

.systemBuild.on .wireOut3 {
  animation:wireDraw .85s ease forwards 2.50s}

.fraivonHex {
  filter:drop-shadow(0 0 7px rgba(34,
168,
255,
.95)) drop-shadow(0 0 18px rgba(34,
168,
255,
.48)) drop-shadow(0 0 42px rgba(71,
104,
255,
.24))!important;
}

.fraivonHex::before {
  content:"";
  position:absolute;
  inset:-14px;
  clip-path:inherit;
  background:rgba(34,
168,
255,
.08);
  filter:blur(16px);
  z-index:-1;
}

@media(max-width:980px) {
  .resultTop {
  left:1025px;
  top:105px;
  width:145px;
  height:145px}

.resultMain {
  left:1025px;
  top:262px;
  width:200px;
  height:200px}

.resultBottom {
  left:1025px;
  top:420px;
  width:145px;
  height:145px}

}

.resultCluster {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.resultCluster .resultOrb {
  pointer-events:auto}

.resultTop {
  left:1030px;
  top:90px;
  width:130px;
  height:130px;
}

.resultMain {
  left:1030px;
  top:262px;
  width:190px;
  height:190px;
}

.resultBottom {
  left:1030px;
  top:435px;
  width:130px;
  height:130px;
}

.resultMain .resultSpin {
  animation:resultRotate 9s linear infinite!important;
}

.resultRing {
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 22px rgba(34,
168,
255,
.14);
}

.resultRing::before {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#070a0e;
  box-shadow:inset 0 0 0 2px rgba(255,
255,
255,
.24),
inset 0 0 0 9px #070a0e,
inset 0 0 0 11px rgba(255,
255,
255,
.09);
}

.resultRingLight {
  background:linear-gradient(145deg,
#78dcff,
#39b9ff);
}

.resultRingDark {
  background:linear-gradient(145deg,
#3168d8,
#2445a8);
}

.resultTop .resultRing,
.resultBottom .resultRing {
  animation:none!important;
  transform:none!important;
}

.resultTop:hover .resultRing,
.resultTop:focus-visible .resultRing {
  box-shadow:0 0 30px rgba(114,
215,
255,
.28);
}

.resultBottom:hover .resultRing,
.resultBottom:focus-visible .resultRing {
  box-shadow:0 0 30px rgba(49,
104,
216,
.30);
}

.resultInnerSmall {
  inset:18px;
}

.resultInnerSmall strong {
  font-size:18px;
  line-height:1.04;
  letter-spacing:.025em;
}

.systemBuild.on .wireOut1 {
  animation:wireDraw .85s ease forwards 2.18s}

.systemBuild.on .wireOut2 {
  animation:wireDraw .85s ease forwards 2.34s}

.systemBuild.on .wireOut3 {
  animation:wireDraw .85s ease forwards 2.50s}

.hexAura {
  position:absolute;
  left:645px;
  top:262px;
  width:282px;
  height:282px;
  z-index:3;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,
93.3% 25%,
93.3% 75%,
50% 100%,
6.7% 75%,
6.7% 25%);
  background:rgba(34,
168,
255,
.28);
  filter:blur(24px);
  opacity:0;
}

.systemBuild.on .hexAura {
  animation:hexAuraIn 1s ease forwards 1.45s;
}

@keyframes hexAuraIn {
  from {
  opacity:0;
  transform:translate(-50%,-50%) scale(.78)}

to {
  opacity:.72;
  transform:translate(-50%,-50%) scale(1)}

}

.fraivonHex {
  filter:drop-shadow(0 0 9px rgba(34,
168,
255,
.95)) drop-shadow(0 0 24px rgba(34,
168,
255,
.58)) drop-shadow(0 0 48px rgba(71,
104,
255,
.30))!important;
}

.resultArrow,
.resultArrow span,
.hexBrand {
  display:none!important;
}

.resultTop .resultSpin,
.resultBottom .resultSpin,
.resultSpinLight,
.resultSpinDark {
  display:none!important;
  animation:none!important;
}

.systemBuild.on .step6 {
  animation:orbBuildV8 .62s cubic-bezier(.2,
.8,
.2,
1) forwards 2.55s;
}

.systemBuild.on .step7 {
  animation:orbBuildV8 .68s cubic-bezier(.2,
.8,
.2,
1) forwards 2.82s;
}

.systemBuild.on .step7b {
  animation:orbBuildV8 .68s cubic-bezier(.2,
.8,
.2,
1) forwards 3.08s;
}

@media(max-width:980px) {
  .resultTop {
  left:1030px;
  top:90px;
  width:130px;
  height:130px}

.resultMain {
  left:1030px;
  top:262px;
  width:190px;
  height:190px}

.resultBottom {
  left:1030px;
  top:435px;
  width:130px;
  height:130px}

}

/* ========================================
   FRAIVON — BLUE / VIOLET COLOR SYSTEM
   Blue: technology/action/data
   Violet: intelligence/transformation/emphasis
   Gradient: reserved for focal brand moments
======================================== */

.orb {
  background:
    radial-gradient(circle at 42% 38%,rgba(14,177,251,.15),transparent 36%),
    radial-gradient(circle at 62% 60%,rgba(121,12,244,.11),transparent 54%);
}

.logo {
  filter:
    drop-shadow(0 0 24px rgba(14,177,251,.10))
    drop-shadow(0 0 42px rgba(121,12,244,.055));
}



/* Editorial hierarchy */
.overline,
.founderLabel {
  color:var(--violet-soft);
}

/* Functional / technical accent stays blue */
.kicker,
.capnum,
.step b,
.caseTag,
.contactIcon,
.typeCursor,
.resultInner span {
  color:var(--blue);
}

/* Conversion moments use the full spectrum */
.navCta,
.primaryCta {
  border-color:rgba(121,12,244,.62);
  background:linear-gradient(135deg,rgba(121,12,244,.13),rgba(14,177,251,.07));
}

.navCta:hover,
.primaryCta:hover {
  background:var(--accent-gradient);
  border-color:transparent;
  box-shadow:0 0 24px rgba(121,12,244,.20),0 0 38px rgba(14,177,251,.12);
  
}

.pill:hover {
  border-color:rgba(121,12,244,.48);
  box-shadow:0 10px 40px rgba(121,12,244,.07),0 0 24px rgba(14,177,251,.045);
}

.manifesto {
  background:
    radial-gradient(circle at 72% 38%,rgba(14,177,251,.085),transparent 31%),
    radial-gradient(circle at 27% 68%,rgba(121,12,244,.055),transparent 30%);
}

.quote strong,
.final h2 span {
  color:var(--blue);
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.caseCard:hover {
  border-color:rgba(121,12,244,.30);
  box-shadow:0 22px 70px rgba(0,0,0,.25),0 0 34px rgba(121,12,244,.055);
}

.caseVisual {
  border-color:rgba(14,177,251,.22);
}

.caseVisual::before {
  border-color:rgba(121,12,244,.14);
}

.caseVisual::after {
  border-color:rgba(14,177,251,.12);
  background:rgba(121,12,244,.035);
}

/* Connected Business is the strongest expression of the palette */
.systemBuild {
  background:
    radial-gradient(circle at 55% 43%,rgba(14,177,251,.075),transparent 24%),
    radial-gradient(circle at 66% 54%,rgba(121,12,244,.065),transparent 31%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    #070a0e;
  background-size:auto,auto,48px 48px,48px 48px,auto;
}

.systemButton {
  box-shadow:
    0 0 0 1px rgba(14,177,251,.34),
    inset 0 0 0 5px rgba(255,255,255,.035),
    inset 0 0 0 6px rgba(255,255,255,.10),
    0 12px 32px rgba(0,0,0,.24);
}

.systemButton:hover,
.systemButton:focus-visible {
  background:linear-gradient(180deg,rgba(121,12,244,.085),rgba(14,177,251,.035)),#080c12;
  box-shadow:
    0 0 0 2px rgba(121,12,244,.58),
    inset 0 0 0 5px rgba(255,255,255,.04),
    inset 0 0 0 6px rgba(255,255,255,.14),
    0 0 28px rgba(121,12,244,.10),
    0 0 38px rgba(14,177,251,.07);
}

.nodeDot {
  background:var(--blue);
  box-shadow:0 0 14px rgba(14,177,251,.72);
}

.hexAura {
  background:linear-gradient(180deg,rgba(14,177,251,.34) 0%,rgba(71,104,255,.26) 50%,rgba(121,12,244,.30) 100%);
}

.fraivonHex {
  background:var(--accent-gradient-vertical);
  filter:
    drop-shadow(0 0 9px rgba(14,177,251,.88))
    drop-shadow(0 0 24px rgba(14,177,251,.34))
    drop-shadow(0 0 42px rgba(121,12,244,.24))!important;
}

.hexInner {
  background:
    radial-gradient(circle at 50% 38%,rgba(14,177,251,.055),transparent 43%),
    radial-gradient(circle at 50% 72%,rgba(121,12,244,.045),transparent 44%),
    #070b10;
}

.resultRingLight {
  background:linear-gradient(145deg,#78dcff,var(--blue));
}

.resultMain .resultSpin {
  background:conic-gradient(from 0deg,var(--blue),var(--blue2) 32%,var(--violet) 58%,rgba(121,12,244,.22) 73%,var(--blue) 100%);
  box-shadow:0 0 24px rgba(14,177,251,.16),0 0 34px rgba(121,12,244,.11);
}

.resultRingDark {
  background:linear-gradient(145deg,var(--violet),#4a2bb7);
}

.resultBottom:hover .resultRing,
.resultBottom:focus-visible .resultRing {
  box-shadow:0 0 30px rgba(121,12,244,.25);
}

.systemFooter i {
  color:var(--violet-soft);
}

.systemFooter span {
  color:var(--blue);
}

.founderPhoto {
  background:
    radial-gradient(circle at 42% 32%,rgba(14,177,251,.10),transparent 40%),
    radial-gradient(circle at 68% 72%,rgba(121,12,244,.075),transparent 44%),
    #070a0e;
}

.cta::before {
  background:
    radial-gradient(circle at 43% 45%,rgba(14,177,251,.105),transparent 47%),
    radial-gradient(circle at 59% 56%,rgba(121,12,244,.09),transparent 58%);
}

.contactSection {
  background:
    radial-gradient(circle at 15% 0%,rgba(121,12,244,.035),transparent 28%),
    linear-gradient(180deg,rgba(14,177,251,.018),transparent 45%);
}

.cursorGlow {
  background:radial-gradient(circle,rgba(14,177,251,.16) 0%,rgba(71,104,255,.09) 27%,rgba(121,12,244,.055) 47%,transparent 69%);
}

.socialLinks a:hover {
  border-color:rgba(121,12,244,.48);
  box-shadow:0 0 22px rgba(121,12,244,.08);
}

.footerBrand span,
.wordmark b {
  color:var(--violet-soft);
}

/* ========================================
   FRAIVON — FINAL UI COLOR + ICON TUNING
======================================== */

/* Functional outlines stay BLUE */
.systemButton {
  box-shadow:
    0 0 0 1px rgba(14,177,251,.42),
    inset 0 0 0 5px rgba(255,255,255,.035),
    inset 0 0 0 6px rgba(255,255,255,.10),
    0 12px 32px rgba(0,0,0,.24);
}

.systemButton:hover,
.systemButton:focus-visible {
  background:linear-gradient(180deg,rgba(14,177,251,.105),rgba(121,12,244,.035)),#080c12;
  box-shadow:
    0 0 0 2px rgba(14,177,251,.72),
    inset 0 0 0 5px rgba(255,255,255,.04),
    inset 0 0 0 6px rgba(255,255,255,.14),
    0 0 30px rgba(14,177,251,.13),
    0 0 24px rgba(121,12,244,.045);
}

/* Inline SVG icons — scalable, crisp and brand-consistent */
.nodeIcon {
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  margin-top:2px;
  border:1px solid rgba(14,177,251,.28);
  border-radius:10px;
  background:rgba(14,177,251,.055);
  color:var(--blue);
  box-shadow:inset 0 0 18px rgba(14,177,251,.035);
  transition:
    color .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.nodeIcon svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.systemButton:hover .nodeIcon,
.systemButton:focus-visible .nodeIcon {
  color:#4fc8ff;
  border-color:rgba(14,177,251,.58);
  background:rgba(14,177,251,.09);
  box-shadow:
    inset 0 0 18px rgba(14,177,251,.06),
    0 0 18px rgba(14,177,251,.10);
}

/* Pills under the opening question also retain BLUE as functional border */
.pill:hover {
  color:#fff;
  border-color:rgba(14,177,251,.58);
  box-shadow:
    0 10px 40px rgba(14,177,251,.075),
    0 0 22px rgba(14,177,251,.055);
}

/* Pulse becomes FRAIVON violet */
.pulseDot {
  fill:var(--violet);
  filter:drop-shadow(0 0 9px rgba(121,12,244,.98));
}

.pulseGhost {
  fill:var(--violet);
}

.ghost1 { opacity:.28; }
.ghost2 { opacity:.14; }
.ghost3 { opacity:.06; }

/* Keep pulse styling independent from the blue functional system */
.pulseDot,
.pulseGhost {
  color:var(--violet);
}

/* ========================================
   FRAIVON — FINAL CORRECTIONS V2
======================================== */

/* Header + footer textual wordmarks: AI stays BLUE */
.wordmark b,
.footerBrand span {
  color:var(--blue) !important;
}

/* CTA buttons: BLUE, slightly stronger outline */
.navCta,
.primaryCta {
  border:2px solid rgba(14,177,251,.78) !important;
  background:rgba(14,177,251,.07) !important;
  color:#fff;
}

.navCta:hover,
.primaryCta:hover {
  background:var(--accent-gradient) !important;
  border-color:var(--blue) !important;
  box-shadow:0 0 28px rgba(14,177,251,.22) !important;
}

/* Connected Business: vertically center icon + text */
.systemButton {
  align-items:center !important;
}

.nodeIcon {
  margin-top:0 !important;
}

.nodeText {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:34px;
}

.nodeText strong {
  line-height:1.15;
}

.nodeText small {
  line-height:1.4;
}