/* ============================================================
   talp. — design system
   dark, premium, helvetica, vivid color blocks
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #050506;
  --bg-2:      #0c0c0e;
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.06);

  /* text */
  --fg:     #f3f3f1;
  --fg-mid: #a7a7a4;
  --fg-dim: #6b6b69;

  /* sector accents */
  --blue:  #2a2bf2;
  --green: #18e000;
  --white: #f6f6f4;
  --gray:  #767b82;
  --slate: #1b1b1e;

  /* type */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* layout */
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1480px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
noscript { display: none; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* faint column guides — "living engine" technical feel */
.grid-lines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  max-width: none; margin: 0 auto;
  padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.grid-lines span { border-left: 1px solid var(--line-soft); }
.grid-lines span:last-child { border-right: 1px solid var(--line-soft); }
@media (max-width: 720px){ .grid-lines{ display:none; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }

/* mono label utility */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--fg-dim);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5,5,6,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; display:flex; align-items:center; }
.logo svg { height: 20px; width: auto; display:block; }
.logo svg path { fill: var(--fg); }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a {
  font-size: 14px; color: var(--fg-mid); letter-spacing: -0.01em;
  position: relative; transition: color .25s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--fg); transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }

.btn-pill {
  font-size: 14px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.btn-pill:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* theme toggle */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--fg); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.theme-toggle:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
html.theme-dark .theme-toggle .i-sun { display: block; }
html.theme-dark .theme-toggle .i-moon { display: none; }

/* status ticker line */
.status {
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.status-row { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.status .dot { display:inline-flex; align-items:center; gap:8px; }
.status .led { width:6px; height:6px; border-radius:50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* mobile nav toggle (hidden on desktop) */
.menu-btn { display:none; font-family: var(--mono); font-size:13px; color: var(--fg); background:none; border:none; cursor:pointer; }

/* ============================================================
   PRELOADER
   ============================================================ */
body.loading { overflow: hidden; height: 100vh; }
#loader {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
#loader.done { opacity: 0; transform: translateY(-2%); pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader-mark { width: clamp(104px, 17vw, 208px); height: clamp(106px, 17.3vw, 211px); animation: markPulse 2.6s var(--ease) infinite; }
@keyframes markPulse { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }
.loader-mark path { fill: var(--fg); opacity: 0; transform: translateY(14px) scale(.9);
  transform-box: fill-box; transform-origin: center;
  animation: markIn .7s var(--ease) forwards; }
.loader-mark path:nth-child(1){ animation-delay: .05s; }
.loader-mark path:nth-child(2){ animation-delay: .32s; }
.loader-mark path:nth-child(3){ animation-delay: .19s; }
.loader-mark path:nth-child(4){ animation-delay: .45s; }
@keyframes markIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark { animation: none; }
  .loader-mark path { opacity: 1; transform: none; animation: none; }
}
.loader-bar { width: 168px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.loader-bar i { display:block; height: 100%; width: 40%; background: var(--fg);
  animation: loadSlide 1.1s var(--ease) infinite; }
@keyframes loadSlide { from { transform: translateX(-120%);} to { transform: translateX(330%);} }
.loader-word { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-dim); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(90px, 12vh, 150px) 0 clamp(96px, 15vh, 180px);
  overflow: hidden;
}
#hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .9; }
.hero .wrap { position: relative; z-index: 2; margin: 0; width: 100%; max-width: none; padding-left: var(--pad); padding-right: var(--pad); }
.hero .kicker { margin-bottom: 30px; }
.hero-title {
  font-size: clamp(2.4rem, 6.6vw, 6.3rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1.0;
  padding-bottom: 0.34em;
}
.ht-line { display: block; }
.hero-title .nowrap { white-space: nowrap; }
.ht-for { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.32em; line-height: 1.3; padding-bottom: 0.22em; overflow: visible; }
.rotor {
  display: inline-flex; align-items: baseline; position: relative; vertical-align: top;
  min-width: 1ch;
}
.rotor .word {
  display: inline-block;
  background: linear-gradient(90deg, var(--blue), #6d6eff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform, opacity;
}
.rotor .word.out { animation: wordOut .5s var(--ease) forwards; }
.rotor .word.in  { animation: wordIn  .55s var(--ease) forwards; }
@keyframes wordOut { to { opacity:0; transform: translateY(-0.28em); filter: blur(6px);} }
@keyframes wordIn  { from { opacity:0; transform: translateY(0.3em); filter: blur(6px);} to { opacity:1; transform:none; filter:none; } }
.caret { display:inline-block; width: 3px; height: 0.78em; margin-left: 6px;
  background: var(--blue); transform: translateY(0.04em); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-foot {
  margin-top: clamp(30px, 5vh, 56px);
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.learn-more { display:inline-flex; align-items:center; gap:12px; font-size: 15px; color: var(--fg);
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 22px;
  transition: background .3s var(--ease), color .3s var(--ease), gap .3s var(--ease); }
.learn-more:hover { background: var(--fg); color: var(--bg); gap: 18px; }
.hero-foot p { max-width: 46ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--fg-mid); }
.scroll-hint { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); display:flex; align-items:center; gap:10px; }
.scroll-hint .bar { width: 40px; height:1px; background: var(--line); position:relative; overflow:hidden; }
.scroll-hint .bar::after{ content:""; position:absolute; inset:0; width:40%; background:var(--fg); animation: slide 2.2s var(--ease) infinite; }
@keyframes slide { from{ transform: translateX(-100%);} to{ transform: translateX(250%);} }

/* ============================================================
   STATEMENT BAND
   ============================================================ */
.statement-band { padding: clamp(90px, 16vh, 200px) 0; border-top: 1px solid var(--line-soft); text-align: center; }
.statement-band p { font-size: clamp(2rem, 5.2vw, 4.4rem); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1.08; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.statement-band b { font-weight: 500; }
.statement-band .accent { color: transparent;
  background: linear-gradient(90deg, var(--blue), #6d6eff); -webkit-background-clip: text; background-clip: text; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position: relative; z-index: 1; }
.sec-head {
  display:flex; align-items:baseline; justify-content:space-between;
  padding: clamp(40px,6vh,88px) 0 clamp(22px,3vh,34px);
  border-top: 1px solid var(--line-soft);
}
.sec-head h2 { font-size: clamp(1.1rem,2vw,1.5rem); font-weight: 500; letter-spacing:-0.02em; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   SECTOR CARDS
   ============================================================ */
.sectors { display: block; padding-bottom: clamp(40px, 8vh, 100px); }
.card {
  position: sticky;
  top: calc(80px + var(--i, 0) * 18px);
  border-radius: 16px; overflow: hidden;
  padding: clamp(24px, 2.6vw, 40px);
  height: min(74vh, 600px);
  display: flex; flex-direction: column;
  cursor: pointer; isolation: isolate;
  margin-bottom: clamp(26px, 5vh, 64px);
  box-shadow: 0 -22px 60px -34px rgba(0,0,0,.9), 0 26px 60px -36px rgba(0,0,0,.75);
  transition: box-shadow .5s var(--ease);
}
.card:last-child { margin-bottom: 0; }

.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap: 20px; }
.card-top h3 { font-size: clamp(1.7rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.96; }
.card-meta { display:flex; align-items:center; gap: 16px; }
.card-meta .tag { color: inherit; opacity: .55; }
.arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor;
  display:grid; place-items:center; flex: none;
  transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease);
}
.arrow svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.card:hover .arrow svg { transform: translate(3px,-3px); }

/* framed media area — color shows as a frame around it */
.card-media {
  position: relative; flex: 1; min-height: 0;
  margin: clamp(16px,1.8vw,24px) 0; border-radius: 10px; overflow: hidden;
}
.card-media .scrim { position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 40%); }
.card-img { position:absolute; inset:0; background-size:cover; background-position:center; }

/* body */
.card-body { max-width: 42ch; margin-top: auto; }
.card-body p { font-size: clamp(14px,1.2vw,16.5px); line-height:1.45; opacity:.82; }
.card.has-media .card-body { margin-top: 0; }

/* color variants */
.card.c-blue  { color:#fff; background: var(--blue);
  box-shadow: 0 0 0 1.5px rgba(110,110,255,.9), 0 0 60px -8px rgba(60,60,255,.55); }
.card.c-blue:hover { box-shadow: 0 0 0 1.5px rgba(150,150,255,1), 0 0 90px -4px rgba(70,70,255,.8); }
.card.c-white { color:#0a0a0a; background: var(--white); }
.card.c-white:hover { box-shadow: 0 26px 60px -22px rgba(255,255,255,.25); }
.card.c-gray  { color:#0a0a0a; background: var(--gray); }
.card.c-green { color:#062006; background: var(--green); }
.card.c-green:hover { box-shadow: 0 0 80px -10px rgba(24,224,0,.5); }
.card.c-slate { color:#e7e7e5; background: var(--slate); border: 1px solid var(--line); }

/* placeholder stripes (frame tone adapts via mix-blend on dark/light) */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 2px, transparent 2px 12px),
    rgba(0,0,0,0.28);
  display:grid; place-items:center; text-align:center; padding: 16px;
}
.card.c-slate .card-media.ph, .card.c-blue .card-media.ph {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, transparent 2px 12px),
    rgba(0,0,0,0.30);
}
.ph .ph-label { font-family: var(--mono); font-size: 12px; color: currentColor; opacity:.62; letter-spacing:.03em; }

/* ============================================================
   DATA (placeholder for real numbers)
   ============================================================ */
.data-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,2.4vw,40px); padding-bottom: clamp(20px,3vh,40px); }
.why-grid { grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,56px); }
.why-grid .d-num { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.why-grid .d-num sub { font-size: 0.42em; vertical-align: baseline; color: var(--fg-mid); font-weight: 400; letter-spacing: 0; margin-left: 2px; }
.why-grid .d-label { color: var(--fg-mid); font-size: 14.5px; line-height: 1.5; max-width: 32ch; margin-top: 18px; }
.why-grid .d-label b { color: var(--fg); font-weight: 500; }

/* sectors dropdown stat note */
.mega-stat { font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.4; color: var(--fg-mid); letter-spacing: -0.01em; }
.mega-stat b { color: var(--fg); font-weight: 500; }
.ml-coming { opacity: .58; }
.ml-coming:hover { opacity: .8; }

/* calendly embed */
.cal-embed { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); min-height: 700px; }
.cal-embed .calendly-inline-widget { min-width: 280px; width: 100%; height: 700px; }
@media (max-width: 860px){
  .cal-embed { min-height: 960px; }
  .cal-embed .calendly-inline-widget { height: 960px; }
}
.data-cell { border-top: 1px solid var(--line); padding-top: 22px; }
.d-num { font-size: clamp(2.4rem,5vw,4.4rem); font-weight:500; letter-spacing:-0.04em; line-height:1; color: var(--fg); }
.d-num.placeholder { color: var(--fg-dim); font-family: var(--mono); font-size: clamp(1rem,1.8vw,1.4rem); letter-spacing: 0; }
.d-label { margin-top:16px; color: var(--fg-mid); font-size: 14px; max-width: 22ch; line-height:1.4; }
.data-note { display:block; margin-top: 34px; color: var(--fg-dim); }
@media(max-width:820px){ .data-grid{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:520px){ .data-grid{ grid-template-columns: 1fr;} }

/* ============================================================
   ABOUT (legacy)
   ============================================================ */
.about-grid { display:grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(30px,5vw,72px); align-items: start; padding-bottom: clamp(60px,9vh,120px); }
.about-grid .statement { font-size: clamp(1.5rem, 3.2vw, 2.9rem); font-weight: 400; letter-spacing:-0.025em; line-height: 1.12; }
.about-grid .statement b { font-weight: 500; }
.about-grid .lead { color: var(--fg-mid); }
.about-link { display:inline-flex; align-items:center; gap:12px; margin-top: 40px; font-size: 15px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: gap .3s var(--ease), border-color .3s; }
.about-link:hover { gap: 20px; border-color: var(--fg); }
.about-media { aspect-ratio: 3/4; border-radius: 12px; overflow:hidden; border: 1px solid var(--line-soft); color: var(--fg-dim); }
.about-media.ph {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px),
    var(--bg-2);
}

/* ============================================================
   TOOLS
   ============================================================ */
.tools-list { border-top: 1px solid var(--line); }
.tool {
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  padding: clamp(26px,4vw,52px) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .4s var(--ease);
}
.tool:hover { padding-left: 22px; }
.tool::before { content:""; position:absolute; left:0; top:0; height:100%; width:0; background: var(--blue); transition: width .4s var(--ease); }
.tool:hover::before { width: 4px; }
.tool .t-name { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing:-0.03em; }
.tool .t-desc { color: var(--fg-mid); font-size: 15px; max-width: 34ch; opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tool:hover .t-desc { opacity:1; transform:none; }
.tool .t-right { display:flex; align-items:center; gap: clamp(20px,4vw,60px); }
.tool .arrow { color: var(--fg); }
.tool:hover .arrow { background: var(--fg); color: var(--bg); }
.tools-foot { padding: 36px 0 clamp(60px,9vh,120px); }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding: clamp(80px,16vh,200px) 0; text-align:center; border-top: 1px solid var(--line-soft);
  position: relative; overflow: hidden; }
.cta .glow { position:absolute; left:50%; top:60%; width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(42,43,242,.16), transparent 62%);
  pointer-events:none; z-index:0; }
.cta h2 { font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 500; letter-spacing:-0.04em; line-height:.98; position:relative; z-index:1; }
.cta .btn-big { display:inline-flex; align-items:center; gap:14px; margin-top: 44px; position:relative; z-index:1;
  font-size: 17px; padding: 16px 30px; border-radius: 999px; background: var(--fg); color: var(--bg);
  transition: transform .35s var(--ease), gap .3s var(--ease); }
.cta .btn-big:hover { transform: translateY(-3px); gap: 22px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top: 1px solid var(--line); padding: clamp(50px,7vh,90px) 0 40px; }
.foot-top { display:flex; justify-content:space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 60px; }
.foot-brand { font-size: clamp(2.4rem,6vw,5rem); font-weight:600; letter-spacing:-0.03em; line-height:.9; }
.foot-brand svg { height: clamp(40px, 5vw, 64px); width: auto; display:block; }
.foot-brand svg path { fill: var(--fg); }
.foot-brand-wrap { display:flex; flex-direction:column; gap:22px; }
.foot-address { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--fg-dim); }
.foot-address a { color: var(--fg-mid); transition: color .2s var(--ease); }
.foot-address a:hover { color: var(--fg); }
.foot-bottom a { color: var(--fg-dim); transition: color .2s var(--ease); }
.foot-bottom a:hover { color: var(--fg); }

/* legal pages */
.legal { max-width: 840px; padding: clamp(44px,7vh,84px) 0 clamp(60px,9vh,110px); }
.legal .ph-eyebrow { margin-bottom: 22px; }
.legal h1 { font-size: clamp(2.2rem,5vw,3.6rem); font-weight:500; letter-spacing:-0.03em; margin-bottom: 14px; line-height:1.0; }
.legal .updated { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); margin-bottom: clamp(28px,5vh,48px); }
.legal h2 { font-size: clamp(1.2rem,2vw,1.55rem); font-weight:500; letter-spacing:-0.02em; margin: clamp(30px,4vh,46px) 0 14px; }
.legal p, .legal li { color: var(--fg-mid); font-size: 16px; line-height: 1.65; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: #9b9cff; }
.legal strong { color: var(--fg); font-weight:500; }
.legal .lead { font-size: clamp(17px,1.6vw,19px); color: var(--fg); }
.foot-cols { display:flex; gap: clamp(40px,7vw,110px); flex-wrap: wrap; }
.foot-col h4 { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); text-transform: lowercase; margin-bottom: 18px; letter-spacing:.04em; }
.foot-col a { display:block; font-size: 15px; color: var(--fg-mid); padding: 6px 0; transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--fg); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 26px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); }

/* ============================================================
   CARD IMAGES
   ============================================================ */
.card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  opacity:0; transition: opacity .8s var(--ease), transform 1.4s var(--ease); transform: scale(1.04); }
.card-media img.loaded { opacity:1; transform: scale(1); }
.card:hover .card-media img.loaded { transform: scale(1.07); }
.card-media .ph-label { position: relative; z-index:0; }
.card-media .scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 45%); }

/* ============================================================
   MEGA DROPDOWN NAV
   ============================================================ */
.nav-item { position: relative; }
.nav-trigger { font: inherit; font-size: 14px; color: var(--fg-mid); background: none; border: none;
  cursor: pointer; letter-spacing: -0.01em; display:inline-flex; align-items:center; gap:6px;
  transition: color .25s var(--ease); padding: 0; }
.nav-trigger svg { width: 11px; height: 11px; transition: transform .3s var(--ease); opacity:.7; }
.nav-item:hover .nav-trigger, .nav-item.open .nav-trigger { color: var(--fg); }
.nav-item.open .nav-trigger svg { transform: rotate(180deg); }

.mega {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 55;
  background: rgba(8,8,10,0.86); backdrop-filter: blur(20px);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { max-width: var(--maxw); margin: 0 auto; padding: 36px var(--pad) 42px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 100px); }
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; }
.mega-list a { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 12px;
  transition: background .25s var(--ease); position: relative; }
.mega-list a:hover { background: rgba(255,255,255,0.04); }
.mega-list a .ml-name { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg); display:flex; align-items:center; gap:10px; }
.mega-list a .ml-desc { font-size: 13px; color: var(--fg-dim); line-height: 1.4; }
.mega-list a .ml-arrow { position:absolute; right: 18px; top: 18px; opacity:0; transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); color: var(--fg-mid); }
.mega-list a:hover .ml-arrow { opacity:1; transform:none; }
.badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-dim);
  display: inline-block; white-space: nowrap; }
.mega-feature { border-left: 1px solid var(--line-soft); padding-left: clamp(30px, 4vw, 60px);
  display:flex; flex-direction:column; justify-content: space-between; gap: 24px; }
.mega-feature .mf-tag { margin-bottom: 16px; }
.mega-feature p.mf-lead { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 400; letter-spacing:-0.02em;
  line-height: 1.25; color: var(--fg); }
.mega-feature .mf-lead b { font-weight: 500; }
.mega-feature .about-link { margin-top: 0; }

/* ============================================================
   PERSONA POPOVER (click a node)
   ============================================================ */
#persona-pop {
  position: fixed; z-index: 40; width: 300px; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,16,22,0.96), rgba(10,10,14,0.96));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(120,122,255,0.55); border-radius: 16px; padding: 18px;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5), 0 0 50px -10px rgba(60,60,255,.55);
  opacity: 0; transform: translateY(10px) scale(.9); transform-origin: top left;
  transition: opacity .26s var(--ease), transform .42s cubic-bezier(.34,1.56,.64,1);
}
#persona-pop.show { opacity: 1; transform: none; }
.pp-head { display:flex; align-items:center; gap: 13px; margin-bottom: 15px; }
.pp-avatar { width: 46px; height: 46px; border-radius: 14px; flex:none; display:grid; place-items:center;
  font-family: var(--mono); font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6d6eff); box-shadow: 0 0 24px -6px rgba(90,90,255,.7); }
.pp-id .pp-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pp-id .pp-sub { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); margin-top: 3px; }
.pp-row { display:flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px;
  border-top: 1px solid var(--line-soft); }
.pp-row .k { color: var(--fg-dim); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing:.06em; }
.pp-row .v { color: var(--fg); text-align: right; max-width: 62%; }
.pp-meter { margin-top: 14px; }
.pp-meter .pm-top { display:flex; justify-content: space-between; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing:.08em; color: var(--fg-dim); margin-bottom: 7px; }
.pp-meter .pm-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow:hidden; }
.pp-meter .pm-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), #8a8bff);
  width: 0; transition: width .9s var(--ease) .1s; }
.pp-foot { margin-top: 13px; font-family: var(--mono); font-size: 10px; letter-spacing:.1em; text-transform: uppercase;
  color: #9b9cff; display:flex; align-items:center; gap:7px; }
.pp-foot .led { width:6px; height:6px; border-radius:50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s var(--ease) infinite; }
.pp-quote { font-size: 13px; line-height: 1.45; color: var(--fg); font-style: italic;
  border-left: 2px solid var(--blue); padding-left: 12px; margin: 2px 0 14px; }
.pp-chips { display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 13px; }
.pp-chip { font-family: var(--mono); font-size: 10px; letter-spacing:.02em;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-mid); }
.pp-log { margin-top: 13px; border-top: 1px solid var(--line-soft); padding-top: 11px; }
.pp-log .pl-title { font-family: var(--mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.12em; color: var(--fg-dim); margin-bottom: 9px; }
.pp-logrow { display:flex; gap: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-mid); padding: 3px 0; }
.pp-logrow .t { color: var(--fg-dim); flex:none; width: 46px; }
.pp-logrow.res { color: var(--blue); margin-top: 5px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }

.hero { cursor: crosshair; }
.hero-title, .hero-foot, .kicker, .nav, .nav *, .status { cursor: auto; }
.learn-more, .btn-pill, .nav-trigger, .nav-links a, .logo { cursor: pointer; }

.node-hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30;
  font-family: var(--mono); font-size: 11px; letter-spacing:.06em; color: var(--fg-mid);
  background: rgba(8,8,10,.72); border: 1px solid rgba(120,122,255,.35); border-radius: 999px; padding: 8px 16px;
  pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); display:flex; align-items:center; gap:9px; }
.node-hint::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: pulse 1.6s var(--ease) infinite; }
.node-hint.show { opacity: 1; }
@media (max-width: 720px){ .node-hint { display: none !important; } }

/* ============================================================
   SUBPAGE: hero + intelligence sections + meet us
   ============================================================ */
.page-hero { position: relative; padding: clamp(56px, 9vh, 116px) 0 clamp(46px, 7vh, 84px); overflow: hidden; }
.page-hero .ph-eyebrow { margin-bottom: 26px; }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.page-hero .ph-lead { margin-top: 30px; max-width: 52ch; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--fg-mid); }
.page-hero .ph-media { margin-top: clamp(40px,6vh,72px); border-radius: 16px; overflow:hidden; aspect-ratio: 21/9;
  position: relative; border: 1px solid var(--line-soft); }
.page-hero .ph-media img { width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .8s var(--ease); }
.page-hero .ph-media img.loaded { opacity:1; }

.intel { padding: clamp(50px,8vh,100px) 0; border-top: 1px solid var(--line-soft); }
.intel-head { display:flex; align-items:baseline; gap: 18px; margin-bottom: clamp(30px,5vh,56px); flex-wrap: wrap; }
.intel-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.03em; }
.intel-head .intel-kicker { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.intel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); }
.intel-card { border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px,2.4vw,32px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); transition: border-color .3s var(--ease), transform .4s var(--ease); }
.intel-card:hover { border-color: rgba(120,122,255,.5); transform: translateY(-4px); }
.intel-card .ic-num { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); margin-bottom: 16px; }
.intel-card h3 { font-size: clamp(1.1rem,1.7vw,1.4rem); font-weight: 500; letter-spacing:-0.02em; margin-bottom: 10px; }
.intel-card p { color: var(--fg-mid); font-size: 15px; line-height: 1.5; }
.intel-note { margin-top: 30px; max-width: 60ch; color: var(--fg-mid); font-size: clamp(15px,1.4vw,17px); line-height:1.55; }
.closed-banner { display:flex; align-items:center; gap: 14px; padding: 18px 22px; border-radius: 12px;
  border: 1px solid rgba(120,122,255,.35); background: rgba(42,43,242,.08); margin-top: 24px; font-size: 14px; color: var(--fg-mid); }
.closed-banner .badge { border-color: rgba(120,122,255,.5); color: #9b9cff; }

/* meet us form */
.meet-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items: start;
  padding-bottom: clamp(60px,9vh,120px); }
.form-field { margin-bottom: 22px; }
.form-field label { display:block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing:.08em; color: var(--fg-dim); margin-bottom: 9px; }
.form-field input, .form-field select {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; color: var(--fg); font: inherit; font-size: 15px; line-height: 1.5; height: auto;
  transition: border-color .25s var(--ease), background .25s; }
.form-field input:focus, .form-field select:focus { outline: none; border-color: rgba(120,122,255,.7); background: rgba(120,122,255,.05); }
.form-field input::placeholder { color: var(--fg-dim); }
.form-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b69' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.form-row2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-opt { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); text-transform: lowercase; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.btn-submit { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--fg); color: var(--bg);
  transition: transform .3s var(--ease), gap .3s var(--ease), opacity .2s; }
.btn-submit:hover { transform: translateY(-2px); gap: 16px; }
.btn-submit svg { transition: transform .3s var(--ease); }

.cal { border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px,2.4vw,30px); background: rgba(255,255,255,0.015); }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.cal-head .cal-month { font-size: 16px; font-weight: 500; }
.cal-nav { display:flex; gap: 8px; }
.cal-nav button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background:none;
  color: var(--fg); cursor:pointer; display:grid; place-items:center; transition: background .2s; }
.cal-nav button:hover { background: rgba(255,255,255,.06); }
.cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal-grid .dow { font-family: var(--mono); font-size: 10px; color: var(--fg-dim); text-align:center; padding-bottom: 6px; text-transform: uppercase; }
.cal-day { aspect-ratio: 1; border-radius: 9px; border: 1px solid transparent; background: rgba(255,255,255,.03);
  display:grid; place-items:center; font-size: 13px; color: var(--fg); cursor: pointer; transition: all .2s var(--ease); }
.cal-day:hover { border-color: rgba(120,122,255,.6); }
.cal-day.muted { color: var(--fg-dim); opacity: .4; background: none; cursor: default; pointer-events:none; }
.cal-day.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.cal-slots { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
.cal-slot { padding: 11px; border-radius: 9px; border: 1px solid var(--line); background:none; color: var(--fg);
  font: inherit; font-size: 13px; cursor: pointer; transition: all .2s var(--ease); }
.cal-slot:hover { border-color: rgba(120,122,255,.6); }
.cal-slot.sel { background: var(--blue); border-color: var(--blue); color:#fff; }
.meet-confirm { margin-top: 22px; }

@media (max-width: 860px){
  .mega-inner { grid-template-columns: 1fr; gap: 24px; }
  .mega-feature { border-left: none; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 24px; }
  .intel-grid { grid-template-columns: 1fr; }
  .meet-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TOOLS — single page rows
   ============================================================ */
.tool-row { display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px,5vw,80px);
  padding: clamp(50px,8vh,100px) 0; border-top: 1px solid var(--line); align-items: center; }
.tool-row:last-child { border-bottom: 1px solid var(--line); }
.tr-left .tr-tag { font-family: var(--mono); font-size: 12px; color: var(--blue); margin-bottom: 16px; }
.tr-left h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; }
.tr-left h2 .badge { font-size: 9px; padding: 3px 8px; }
.tr-left .tr-sub { margin-top: 16px; color: var(--fg-mid); font-size: clamp(15px,1.4vw,17px); line-height: 1.5; max-width: 40ch; }
.tr-left .badge { vertical-align: middle; margin-left: 10px; }
@media (max-width: 760px){
  .tr-left h2 { font-size: clamp(1.7rem, 6.6vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tr-left h2 .badge { margin-left: 0; }
}
.tr-anim { margin-top: 30px; height: 180px; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 30% 20%, rgba(120,122,255,.10), transparent 60%), var(--bg-2);
  position: relative; overflow: hidden; }
.tr-cap { display:flex; flex-direction: column; gap: 4px; }
.tr-cap .cap { display:flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line-soft); }
.tr-cap .cap:first-child { border-top: none; }
.tr-cap .cap .cnum { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-top: 3px; flex:none; }
.tr-cap .cap .ctext h4 { font-size: clamp(1.05rem,1.6vw,1.3rem); font-weight: 500; letter-spacing:-0.02em; margin-bottom: 7px; }
.tr-cap .cap .ctext p { color: var(--fg-mid); font-size: 14.5px; line-height: 1.5; }

/* anim: ad — a "screen" playing, reaction pings */
.anim-ad .scr { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width: 150px; height: 92px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); display:grid; place-items:center; }
.anim-ad .scr::after { content:""; width:0;height:0; border-left: 16px solid rgba(155,156,255,.9);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px;
  animation: pulse 1.6s var(--ease) infinite; }
.anim-ad .ping { position:absolute; width: 9px; height:9px; border-radius:50%; background: var(--blue); }
.anim-ad .ping::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--blue); animation: ring 1.8s var(--ease) infinite; }
.anim-ad .ping:nth-child(2){ left: 22%; top: 28%; animation: float1 4s ease-in-out infinite; }
.anim-ad .ping:nth-child(3){ right: 18%; top: 32%; animation: float1 3.4s ease-in-out infinite .6s; }
.anim-ad .ping:nth-child(4){ left: 30%; bottom: 20%; animation: float1 3.8s ease-in-out infinite 1s; }
@keyframes ring { 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(3); opacity:0 } }
@keyframes float1 { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* anim: product — A/B bars compete */
.anim-ab { display:flex; align-items:flex-end; justify-content:center; gap: 14px; height:100%; padding: 28px; }
.anim-ab .col { width: 30px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.12); position:relative; }
.anim-ab .col.a { animation: barA 3s var(--ease) infinite; }
.anim-ab .col.b { background: linear-gradient(180deg, #6d6eff, var(--blue)); animation: barB 3s var(--ease) infinite; }
.anim-ab .col span { position:absolute; top:-22px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px; color: var(--fg-dim); }
@keyframes barA { 0%,100%{ height: 44% } 50%{ height: 60% } }
@keyframes barB { 0%,100%{ height: 70% } 50%{ height: 95% } }

/* anim: strategy — node field */
.anim-net span { position:absolute; width:8px; height:8px; border-radius:50%; background: rgba(155,156,255,.85); }
.anim-net span:nth-child(1){ left:24%; top:30%; animation: float1 4s ease-in-out infinite; }
.anim-net span:nth-child(2){ left:52%; top:24%; animation: float1 3.6s ease-in-out infinite .4s; }
.anim-net span:nth-child(3){ left:70%; top:46%; animation: float1 4.2s ease-in-out infinite .8s; }
.anim-net span:nth-child(4){ left:40%; top:62%; animation: float1 3.8s ease-in-out infinite 1.1s; }
.anim-net span:nth-child(5){ left:62%; top:68%; animation: float1 4s ease-in-out infinite .5s; }
.anim-net::before { content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(120,122,255,.5) 1px, transparent 1.4px);
  background-size: 26px 26px; opacity:.35; animation: drift 8s linear infinite; }
@keyframes drift { from{ background-position:0 0 } to{ background-position:26px 26px } }

/* ============================================================
   SECTOR — problem / solution hook
   ============================================================ */
.hook { padding: clamp(60px,10vh,120px) 0; border-top: 1px solid var(--line-soft); }
.hook .hook-eyebrow { font-family: var(--mono); font-size: 12px; color: var(--blue); margin-bottom: 22px; }
.hook h2 { font-size: clamp(1.9rem,4.4vw,3.6rem); font-weight: 500; letter-spacing:-0.035em; line-height:1.05; max-width: 18ch; }
.pain-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(36px,5vh,60px); }
.pain { border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px,2.4vw,30px);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); position: relative; }
.pain .q { font-family: Georgia, serif; font-size: 40px; line-height: 0; color: rgba(120,122,255,.5); display:block; height: 18px; }
.pain p { font-size: clamp(15px,1.5vw,17px); line-height: 1.45; color: var(--fg); margin-top: 6px; }
.hook-punch { margin-top: clamp(40px,6vh,70px); font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 400;
  letter-spacing:-0.025em; line-height:1.15; max-width: 26ch; }
.hook-punch b { font-weight: 500; }
.hook-punch .accent { color: transparent; background: linear-gradient(90deg, var(--blue), #6d6eff); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 760px){ .pain-grid { grid-template-columns: 1fr; } .tool-row { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px){
  .about-grid { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 16/10; max-height: 360px; }
  .tool .t-desc { display:none; }
}
@media (max-width: 720px){
  .status .dot.hide-m { display:none; }
  .menu-btn { display:none; }
  .nav-row { gap: 12px; }
  .btn-pill { padding: 8px 15px; }

  .nav-links { display:none; }
  .nav-links.open {
    display:block; position: fixed; left:0; right:0; top:64px; bottom:0; z-index:58;
    background: rgba(5,5,6,0.985); backdrop-filter: blur(18px);
    padding: 8px var(--pad) 40px; overflow-y:auto;
  }
  .nav-links.open .nav-item, .nav-links.open > a { display:block; border-bottom:1px solid var(--line-soft); }
  .nav-links.open > a { padding: 20px 2px; font-size: 19px; color: var(--fg); }
  .nav-links.open .nav-trigger { width:100%; justify-content:space-between; padding: 20px 2px; font-size: 19px; color: var(--fg); pointer-events:none; }
  .nav-links.open .nav-trigger svg { display:none; }
  .nav-links.open .mega {
    position: static; opacity:1; visibility:visible; transform:none;
    background:none; border:none; backdrop-filter:none;
  }
  .nav-links.open .mega-inner { display:block; padding: 0 0 14px; max-width:none; }
  .nav-links.open .mega-list { grid-template-columns: 1fr; gap: 0; }
  .nav-links.open .mega-list a { padding: 13px 2px; }
  .nav-links.open .mega-list .ml-name { font-size: 1.05rem; }
  .nav-links.open .mega-feature { display:none; }

  .hero { cursor: auto; padding-bottom: clamp(40px, 9vh, 84px); }
  .hero-title { font-size: clamp(2rem, 8.4vw, 3rem); }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .card { min-height: 420px; }
  .foot-top { flex-direction: column; gap: 40px; }
  .foot-cols { gap: 34px 48px; }
  .foot-cols .foot-col:nth-child(3) { display: none; }
  .foot-bottom { flex-direction: column; align-items:flex-start; gap: 10px; }
}