/* KB Synergy — site styles
   Palette sampled from the logo. */

:root {
  --blue: #3aa7f4;
  --blue-deep: #1b7dc4;
  --blue-tint: #eaf5fe;
  --ink: #1a1a1a;
  --gray: #7f7f7f;
  --gray-light: #cfd6dc;
  --white: #ffffff;
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --measure: 34rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Header ---------- */

.site-header {
  padding: 2rem clamp(1.25rem, 5vw, 4rem);
}

.site-header a {
  display: inline-block;
  line-height: 0;
}

.logo {
  height: 46px;
  width: auto;
}

/* ---------- Hero (home) ---------- */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 4rem;
  position: relative;
  overflow: hidden;
}

.hero-copy {
  max-width: var(--measure);
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.hero p {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  color: var(--gray);
  max-width: 28rem;
}

.contact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-weight: 500;
  transition: background-color 160ms ease;
}

.contact:hover {
  background: var(--blue-deep);
  text-decoration: none;
}

.contact svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The dot network — an enlarged echo of the logo mark */

.network {
  justify-self: end;
  width: min(100%, 560px);
  height: auto;
  display: block;
  overflow: visible;
}

.network .edge {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  opacity: 0.35;
}

.network .node {
  fill: var(--blue);
  transform-box: fill-box;
  transform-origin: center;
}

.network .node.faint {
  opacity: 0.45;
}

.network .signal {
  fill: var(--blue-deep);
  opacity: 0;
}

.network .ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Static state for reduced motion: hide the moving bits only. */
@media (prefers-reduced-motion: reduce) {
  .network .signals,
  .network .ring {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Page load: edges draw, nodes pop in from the core outward */
  .network .edge {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(300ms + var(--i) * 45ms);
  }

  .network .node {
    transform: scale(0);
    animation: pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--i) * 70ms);
  }

  /* 2. Ambient: the whole cluster floats */
  .network {
    animation: float 14s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
  }

  /* 3. The core breathes and emits a ring every few seconds */
  .network .core {
    animation: pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               breathe 4s ease-in-out 1.6s infinite;
  }

  .network .ring {
    animation: ripple 4s cubic-bezier(0.2, 0.6, 0.3, 1) 1.6s infinite;
  }

  .network .ring-2 {
    animation-delay: 3.6s;
  }

  /* 4. Signals: fade in once the network has drawn */
  .network .signal {
    animation: signal-in 400ms ease var(--d, 1.6s) forwards;
  }

  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }

  @keyframes pop {
    to { transform: scale(1); }
  }

  @keyframes float {
    from { transform: translateY(-8px) rotate(-1deg); }
    to   { transform: translateY(8px) rotate(1deg); }
  }

  @keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }

  @keyframes ripple {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  @keyframes signal-in {
    to { opacity: 0.9; }
  }
}

/* ---------- Content pages (privacy, terms) ---------- */

.page {
  flex: 1;
  padding: 1rem clamp(1.25rem, 5vw, 4rem) 4rem;
}

.page-inner {
  max-width: 42rem;
}

.page h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.page .updated {
  color: var(--gray);
  margin: 0 0 2.5rem;
}

.page h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 2.25rem 0 0.5rem;
}

.page p,
.page li {
  color: #3a3a3a;
}

.page ul {
  padding-left: 1.25rem;
}

.notice {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  color: #2a4a60 !important;
}

.page p {
  margin: 0 0 1rem;
}

.page ol,
.page ul {
  margin: 0 0 1rem;
}

.page li + li {
  margin-top: 0.35rem;
}

.page :target {
  scroll-margin-top: 1.5rem;
}

/* Opt-out section with embedded Boberdoo form */

.optout {
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem;
  margin: 0 0 3rem;
}

.optout h2 {
  margin-top: 0;
}

.optout-form {
  width: 100%;
  max-width: 500px;
  min-height: 500px;
  background: var(--white);
  border-radius: 8px;
  padding: 1rem;
}

/* Data-category table */

.page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.page th,
.page td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--gray-light);
}

.page th {
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
}

.page table {
  table-layout: fixed;
}

.col-cat { width: 27%; }
.col-yn  { width: 6.5rem; }

.page td[rowspan] {
  font-weight: 500;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--gray-light);
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.9rem;
  color: var(--gray);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer nav a {
  color: var(--gray);
}

.site-footer nav a:hover {
  color: var(--blue-deep);
}

/* ---------- Responsive ---------- */

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 1rem;
  }

  .network {
    justify-self: center;
    width: min(100%, 360px);
    order: -1;
  }

  .site-footer {
    flex-direction: column;
  }
}