/* ────────────────────────────────────────────────────────────────────
   PixelRain marketing site - shared styles
   ──────────────────────────────────────────────────────────────────── */

:root{
  --bg:           #06070a;
  --bg-2:         #0a0d12;
  --bg-elev:      #0f1521;
  --bg-warm:      #ece8dc;
  --line:         #1a2332;
  --line-soft:    #14202c;
  --text:         #e6ebf2;
  --text-2:       #9da9bd;
  --text-dim:     #5d6e85;
  --warm-text:    #5d6356;
  --warm-text-2:  #8a8a76;
  --accent:       #7afcff;
  --accent-2:     #4c8cff;
  --accent-warm:  #2a8e96;
  --maxw:         1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:"IBM Plex Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace}

/* ── Layout helpers ─────────────────────────────────────────────── */
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:96px 0;position:relative}
.section--tight{padding:64px 0}
.section--warm{background:var(--bg-warm);color:var(--warm-text)}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:14px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-dim);margin:0 0 16px;
}
.section--warm .eyebrow{color:var(--warm-text-2)}
.section h2{
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.15;
  margin:0 0 18px;
  letter-spacing:-.01em;
  font-weight:600;
}
.section .lede{
  font-size:clamp(16px,1.4vw,18px);
  color:var(--text-2);
  max-width:680px;margin:0 0 48px;
}
.section--warm .lede{color:var(--warm-text-2)}

/* ── Top nav ────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,7,10,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__brand img{height:26px;width:auto}
.nav__brand .label{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);
}
.nav__links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav__links a{
  padding:8px 14px;border-radius:6px;
  font-size:13px;letter-spacing:.06em;color:var(--text-2);
  transition:color .2s, background .2s;
}
.nav__links a:hover{color:var(--text);background:rgba(122,252,255,.06)}
.nav__links a.cta{
  border:1px solid var(--line);color:var(--text);
}
.nav__links a.cta:hover{
  border-color:var(--accent);
  box-shadow:0 0 14px rgba(122,252,255,.18) inset, 0 0 14px rgba(122,252,255,.12);
  text-shadow:0 0 8px rgba(122,252,255,.5);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  overflow:hidden;background:#04060a;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero__inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:120px 28px 80px;
  width:100%;text-align:center;
}
.hero__name{
  width:min(720px, 88vw);height:auto;margin:0 auto 18px;
  filter:drop-shadow(0 0 24px rgba(122,252,255,.35)) drop-shadow(0 0 60px rgba(76,140,255,.25));
}
.hero__logo-full{
  width:min(740px, 86vw);height:auto;margin:0 auto 28px;display:block;
  filter:drop-shadow(0 0 30px rgba(122,252,255,.45)) drop-shadow(0 0 80px rgba(76,140,255,.3));
}
/* dim halo behind hero content so the logo and tagline read clearly over the rain */
.hero__halo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 60% at 50% 50%,
      rgba(4,6,10,.82) 0%,
      rgba(4,6,10,.6) 30%,
      rgba(4,6,10,.22) 60%,
      rgba(4,6,10,0) 80%);
}
.hero__tag{
  font-size:clamp(20px,2.2vw,26px);
  color:var(--text);max-width:780px;margin:0 auto 10px;
  letter-spacing:-.005em;line-height:1.35;font-weight:500;
}
.hero__tag-sub{
  font-size:clamp(15px,1.55vw,18px);
  color:var(--text-2);max-width:720px;margin:0 auto 14px;
  letter-spacing:.02em;line-height:1.55;
}
.hero__claim{
  font-family:"IBM Plex Mono",monospace;
  font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin:0 0 32px;
  text-shadow:0 0 10px rgba(122,252,255,.55);
}
.hero__cta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px}

/* Hero CTAs: terminal-flavored, no filled bright button.
   Primary = bracketed mono with cyan border that lights up on hover.
   Secondary = quiet text link. Hierarchy via density, not color blast. */
.hero__cta .btn{
  font-family:"IBM Plex Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:4px;
  padding:14px 22px;
  transition:border-color .2s, background .2s, box-shadow .2s, color .2s, transform .15s;
  position:relative;
}
/* primary - outlined cyan; brackets bookend the label */
.hero__cta .btn--primary{
  background:linear-gradient(180deg, rgba(122,252,255,.06), rgba(122,252,255,.02));
  border-color:rgba(122,252,255,.45);color:#dffaff;
  box-shadow:0 0 0 1px rgba(122,252,255,.05) inset;
}
.hero__cta .btn--primary::before{content:"[ ";color:var(--accent);opacity:.85}
.hero__cta .btn--primary::after {content:" ]";color:var(--accent);opacity:.85}
.hero__cta .btn--primary:hover{
  border-color:var(--accent);background:linear-gradient(180deg, rgba(122,252,255,.10), rgba(122,252,255,.04));
  text-shadow:0 0 10px rgba(122,252,255,.5);
  box-shadow:0 0 0 1px rgba(122,252,255,.3) inset, 0 0 22px rgba(122,252,255,.18);
  transform:translateY(-1px);
}
/* secondary - quiet text link with a thin underline that lights up */
.hero__cta .btn--ghost{
  border:none;background:transparent;
  color:var(--text-2);letter-spacing:.16em;padding:14px 6px;
  border-bottom:1px solid rgba(157,169,189,.15);border-radius:0;
}
.hero__cta .btn--ghost:hover{
  color:var(--text);
  border-bottom-color:var(--accent);
  text-shadow:0 0 8px rgba(122,252,255,.35);
  box-shadow:none;transform:none;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  font:inherit;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg-elev);color:var(--text);
  cursor:pointer;letter-spacing:.06em;
  transition:transform .15s, box-shadow .2s, border-color .2s, background .2s;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(122,252,255,.18);
}
.btn--primary{
  background:linear-gradient(180deg,#7afcff,#5fd6ff);
  color:#001a1f;border-color:transparent;
  box-shadow:0 0 20px rgba(122,252,255,.4);
  font-weight:600;
}
.btn--primary:hover{filter:brightness(1.06);box-shadow:0 0 30px rgba(122,252,255,.55)}
.btn--ghost{background:transparent}

/* ── Cards / Grid ────────────────────────────────────────────────── */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 26px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(122,252,255,.35);
  box-shadow:0 0 32px rgba(122,252,255,.08), 0 14px 40px rgba(0,0,0,.4);
}
.card .card__eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.26em;
  color:var(--accent);text-transform:uppercase;margin:0 0 12px;opacity:.9;
}
.card h3{margin:0 0 12px;font-size:22px;letter-spacing:-.005em;line-height:1.25}
.card p{margin:0;color:var(--text-2);font-size:16px;line-height:1.6}
.card__logo{height:36px;width:auto;margin-bottom:16px;opacity:.95}
.card a.card__link{
  display:inline-block;margin-top:16px;font-size:14px;color:var(--accent);
  letter-spacing:.06em;border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .2s;
}
.card a.card__link:hover{border-color:var(--accent)}

/* belief cards (lower-key than products) */
.belief{
  border:1px dashed var(--line);background:rgba(255,255,255,.01);border-radius:14px;padding:26px;
}
.belief .num{
  font-family:"IBM Plex Mono",monospace;
  font-size:14px;letter-spacing:.3em;color:var(--accent);margin:0 0 14px;
  text-transform:uppercase;
}
.belief h4{margin:0 0 10px;font-size:19px;line-height:1.3}
.belief p{margin:0;color:var(--text-2);font-size:16px;line-height:1.6}

/* ── Partners ────────────────────────────────────────────────────── */
.partner{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:28px 26px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  transition:border-color .2s, box-shadow .2s;
}
.partner:hover{border-color:rgba(122,252,255,.35);box-shadow:0 0 24px rgba(122,252,255,.08)}
/* logo lockup wrapper - uniform vertical space, centered across all partners */
.partner__logo-box{
  width:100%;
  height:84px;display:flex;align-items:center;justify-content:center;
  padding:6px 0;margin-bottom:4px;
}
.partner__logo{height:auto;max-height:72px;width:auto;opacity:.98;filter:drop-shadow(0 0 8px rgba(255,255,255,.06))}
.partner__name{
  font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.16em;
  color:var(--text);margin:0;
}
a.partner{cursor:pointer;text-decoration:none}
a.partner:hover .partner__ext{color:var(--accent);text-shadow:0 0 8px rgba(122,252,255,.55)}
.partner__ext{
  font-size:11px;color:var(--text-dim);margin-left:6px;
  letter-spacing:0;display:inline-block;transition:color .2s, text-shadow .2s;
}
.partner__role{font-size:12.5px;color:var(--text-dim);margin:0;letter-spacing:.04em}
.partner p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.6}

/* ── Contact / asteroids section (sci-fi retro) ──────────────────── */
.contact{
  position:relative;overflow:hidden;
  /* cool blueprint blue-grey - light but unmistakably sci-fi */
  background:
    radial-gradient(ellipse at center, #e6edf4 0%, #c9d6e3 70%, #b9c8d8 100%);
  color:#1f2a3d;
  padding:120px 0;
}
.contact__bg{position:absolute;inset:0;z-index:0}
.contact__bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.contact__scan{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(36,48,66,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.contact__inner{
  position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto;padding:0 28px;
  pointer-events:none;
}
.contact__inner > *{pointer-events:auto}
.contact .eyebrow{color:#475a78}
.contact h2{
  font-size:clamp(28px,3.6vw,42px);color:#0f1a2c;margin:0 0 14px;letter-spacing:-.005em;
  font-family:"IBM Plex Mono",monospace;font-weight:600;
}
.contact p{color:#3a4860;margin:0 0 28px;font-size:17px}
.contact .btn--linkedin{
  background:#0a66c2;color:#fff;border-color:transparent;
  box-shadow:0 8px 24px rgba(10,102,194,.3);font-weight:600;
}
.contact .btn--linkedin:hover{filter:brightness(1.08);box-shadow:0 12px 32px rgba(10,102,194,.45)}
.contact .blink{
  display:inline-block;width:8px;height:8px;background:#00a3ff;border-radius:50%;
  vertical-align:middle;margin:0 6px 2px;
  box-shadow:0 0 10px rgba(0,163,255,.9), 0 0 22px rgba(0,163,255,.45);
  animation:contactBlink 1.1s steps(2,end) infinite;
}
@keyframes contactBlink{50%{opacity:0}}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer{
  background:#03040a;border-top:1px solid var(--line);padding:48px 0 36px;
}
.footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer__name{height:28px;width:auto;opacity:.9}
.footer__hq{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-dim);margin:0;
}
.footer__links{display:flex;gap:18px;align-items:center}
.footer__links a{color:var(--text-dim);font-size:13px;letter-spacing:.04em;transition:color .2s}
.footer__links a:hover{color:var(--accent)}
.footer__copy{color:var(--text-dim);font-size:12px;letter-spacing:.04em;width:100%;margin-top:18px;text-align:center;opacity:.7}

/* ── Product page hero ───────────────────────────────────────────── */
.phero{
  padding:140px 0 64px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, rgba(76,140,255,.10) 0%, rgba(122,252,255,.04) 30%, transparent 60%), var(--bg);
}
.phero__logo{height:64px;width:auto;margin:0 auto 26px;
  filter:drop-shadow(0 0 18px rgba(122,252,255,.3));
}
.phero__lede{font-size:clamp(17px,1.6vw,20px);color:var(--text-2);max-width:720px;margin:0 auto}
.phero__tag{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;text-shadow:0 0 10px rgba(122,252,255,.5);
}

/* ── Diagram (radial hub-and-spoke) ──────────────────────────────── */
.diagram-wrap{
  background:var(--bg-2);
  border:1px solid var(--line);border-radius:18px;
  padding:28px;margin:24px 0 0;
  box-shadow:0 0 60px rgba(122,252,255,.04) inset;
}
.diagram{width:100%;height:auto;display:block}

.diagram .conn-base{stroke:rgba(122,252,255,.18);stroke-width:1.2;fill:none}
.diagram .conn-flow{
  stroke:rgba(122,252,255,.85);stroke-width:1.6;fill:none;
  stroke-dasharray:6 14;
  filter:drop-shadow(0 0 4px rgba(122,252,255,.55));
  animation:flow 2.4s linear infinite;
}
.diagram .conn-flow.rev{animation-direction:reverse}
.diagram .conn-flow.s2{animation-duration:3.1s}
.diagram .conn-flow.s3{animation-duration:1.9s}
@keyframes flow{ to { stroke-dashoffset:-40 } }

.diagram .node-bg{fill:#0e1622;stroke:rgba(122,252,255,.35);stroke-width:1.2}
.diagram .node-bg.center{fill:#0a141d;stroke:rgba(122,252,255,.7);stroke-width:1.6;
  filter:drop-shadow(0 0 22px rgba(122,252,255,.35))}
.diagram .node-label{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;
  fill:#e6ebf2;text-transform:uppercase;text-anchor:middle;
}
.diagram .node-label.center{font-size:13px;fill:#fff;letter-spacing:.22em}
.diagram .node-sub{
  font-family:Inter,system-ui,sans-serif;font-size:10.5px;
  fill:var(--text-dim);text-anchor:middle;
}
.diagram .pulse{
  fill:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent));
}
.diagram .pulse-rev{
  fill:#b388ff;
  filter:drop-shadow(0 0 6px #b388ff);
}

/* ── Feature list / two-column ───────────────────────────────────── */
.feature{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.feature:last-child{border-bottom:none}
.feature .check{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(122,252,255,.12);color:var(--accent);
  display:grid;place-items:center;font-size:12px;
  border:1px solid rgba(122,252,255,.4);
  box-shadow:0 0 10px rgba(122,252,255,.2);
}
.feature h4{margin:0 0 4px;font-size:16px}
.feature p{margin:0;color:var(--text-2);font-size:14.5px}

/* ── GenAI Journey matrix ────────────────────────────────────────── */
.matrix{
  display:grid;
  grid-template-columns:160px repeat(3, 1fr);
  gap:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:18px;
}
.matrix__head{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);padding:10px 12px;display:flex;align-items:center;
}
.matrix__rowlabel{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);padding:14px 12px;display:flex;align-items:center;
}
.matrix__cell{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  padding:16px 14px;font-size:15px;color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:6px;min-height:72px;
  transition:border-color .2s, box-shadow .2s;
}
.matrix__cell:hover{border-color:rgba(122,252,255,.35);box-shadow:0 0 16px rgba(122,252,255,.08)}
.matrix__cell em{font-style:normal;display:block;color:var(--text-dim);font-size:12.5px;letter-spacing:.04em;line-height:1.4}
.matrix__arrow{
  grid-column:2 / -1;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-dim);
  display:flex;align-items:center;gap:10px;padding:6px 12px 0;
}
.matrix__arrow .line{flex:1;height:1px;background:linear-gradient(90deg, var(--text-dim), var(--accent));}
@media (max-width:780px){
  .matrix{grid-template-columns:1fr}
  .matrix__head{display:none}
  .matrix__rowlabel{padding:14px 6px 4px;color:var(--accent)}
  .matrix__arrow{grid-column:1 / -1}
}

/* roadmap horizontal stages */
.roadmap{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:26px}
@media (max-width:780px){ .roadmap{grid-template-columns:1fr} }
.stage{
  position:relative;background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:22px;
}
.stage__num{
  position:absolute;top:-14px;left:18px;
  background:var(--bg);border:1px solid var(--accent);color:var(--accent);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.24em;
  padding:3px 10px;border-radius:20px;text-transform:uppercase;
  text-shadow:0 0 8px rgba(122,252,255,.5);
}
.stage h4{margin:8px 0 12px;font-size:18px;letter-spacing:.04em}
.stage ul{margin:0;padding-left:18px;color:var(--text-2);font-size:14px}
.stage ul li{margin-bottom:6px}
.stage ul li b{color:var(--text);font-weight:600}

/* "why it matters" inline list */
.why{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;margin-top:30px}
@media (max-width:780px){ .why{grid-template-columns:1fr} }
.why__item{
  border-left:2px solid var(--accent);
  padding:6px 0 6px 18px;
}
.why__item h5{margin:0 0 6px;font-size:15px;color:var(--text);letter-spacing:.02em}
.why__item p{margin:0;color:var(--text-2);font-size:14px}