/* ============================================================
   JETPACKS — 2026 site (Kablamo-inspired motion + layout)
   Layered on top of tokens.css (the design system).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-dark); scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(48,214,123,0.4); color: var(--bg-dark); }

/* Page max-width container — width:100% forces it to fill the available
   space even when used as a flex item, so it always reaches the same
   left/right edges as the nav wrap. */
.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 768px) { .wrap { padding: 0 24px; } }

/* Eyebrow label (mono uppercase) — Kablamo's go-to label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  line-height: 1;
}
/* The leading hairline is no longer applied — eyebrow text starts flush. */
.eyebrow--no-rule::before { display: none; }

/* Display type — Roc Grotesk Wide (the narrower cut; used for all titles). */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 0.92;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: var(--t-h1); }
.display--lg { font-size: var(--t-h1); }
.display--md { font-size: var(--t-h2); }

.h-wide {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 0.95;
  margin: 0;
  font-size: var(--t-h3);
}
.h-wide--sm { font-size: var(--t-h4); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Marquee track */
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee--slow { animation-duration: 70s; }
.marquee--reverse { animation-direction: reverse; }
.marquee-pause { animation-play-state: paused; }

/* ============================================================
   Bento "What we deliver" helpers — liquid glass, tile marquee,
   subtle noise overlay. Used on the service detail pages.
   ============================================================ */
.liquid-glass {
  background: rgba(243, 245, 234, 0.04);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  box-shadow: inset 0 1px 1px rgba(243, 245, 234, 0.12);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(243,245,234,0.40) 0%,
    rgba(243,245,234,0.12) 20%,
    rgba(243,245,234,0) 40%,
    rgba(243,245,234,0) 60%,
    rgba(243,245,234,0.12) 80%,
    rgba(243,245,234,0.40) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Two-direction tile marquees for the "built with" stack row. */
@keyframes bento-marquee-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes bento-marquee-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.bento-marquee-left  { animation: bento-marquee-left 26s linear infinite; }
.bento-marquee-right { animation: bento-marquee-right 30s linear infinite; }

/* Soft grain so the flat tinted cards don't read as dead color. */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Twinkle on a single star */
@keyframes twinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.92); }
}
.twinkle { animation: twinkle 3.2s ease-in-out infinite; }

/* Float for hero decoratives — VERY restrained, design system says no bouncy motion */
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
.floaty { animation: floaty 8s ease-in-out infinite; }
@keyframes floaty-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}
.floaty-2 { animation: floaty-2 11s ease-in-out infinite; }

/* Drift — for the hero astronaut */
@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(0,-18px,0) rotate(1.4deg); }
}

/* Section base */
section {
  position: relative;
  isolation: isolate;
}

/* Section-join hairlines — all sections share the dark blue ground now */
.segue-to-light,
.segue-to-dark {
  height: 1px;
  background: var(--border-dark);
}

/* CTA button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--jp-green); color: var(--bg-dark); }
.btn--primary:hover { background: var(--jp-green-hover); }
.btn--ghost-dark {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: rgba(243,245,234,0.22);
}
.btn--ghost-dark:hover { border-color: var(--jp-green); color: var(--jp-green); }
.btn--ghost-light {
  background: transparent;
  color: var(--fg-on-light);
  border-color: var(--border-light);
}
.btn--ghost-light:hover { border-color: var(--jp-green); color: var(--jp-green); }

/* Inline arrow link */
.linkrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast) var(--ease-out);
}
.linkrow .arrow {
  width: 22px; height: 1px; background: currentColor;
  position: relative;
  transition: width var(--t-base) var(--ease-out);
}
.linkrow .arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.linkrow:hover { color: var(--jp-green); }
.linkrow:hover .arrow { width: 40px; }

/* Static four-point star decorative */
.star-shape {
  background:
    radial-gradient(closest-side at 50% 50%, currentColor 0 4%, transparent 4.5%),
    linear-gradient(currentColor, currentColor) 50% 50%/100% 12% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50%/12% 100% no-repeat;
  /* draw four-point star using clip-path */
  clip-path: polygon(
    50% 0%, 56% 44%, 100% 50%, 56% 56%,
    50% 100%, 44% 56%, 0% 50%, 44% 44%
  );
}

/* Custom cursor-style focus rings */
:focus-visible { outline: 2px solid var(--jp-green); outline-offset: 2px; }

/* Grid background pattern — subtle warped grid */
.bg-grid {
  background-image:
    linear-gradient(rgba(154,84,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,84,255,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-grid--light {
  background-image:
    linear-gradient(rgba(12,16,56,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,16,56,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Sticky-section helpers */
.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Inner-page hero (.page-hero) — at small viewports we relax the
   viewport-fill so content (which wraps over more lines) is never clipped. */
@media (max-width: 768px) {
  .page-hero {
    min-height: 520px !important;
    max-height: none !important;
    padding-top: 120px !important;
    padding-bottom: 64px !important;
  }
}

/* Principles giant word — single line on desktop, wraps to 2 lines on mobile
   so long words ("Rosetta Stones.") are never clipped by the viewport. */
@media (max-width: 768px) {
  .manifesto-word { white-space: normal !important; line-height: 0.98; }
}

/* Social icon button — round, hairline border, fills green on hover. */
.social-link {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-dark);
  display: grid; place-items: center;
  color: var(--fg-on-dark);
  text-decoration: none;
  transition: border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              background 160ms var(--ease-out);
}
.social-link:hover {
  border-color: var(--jp-green);
  color: var(--jp-green);
  background: rgba(48, 214, 123, 0.10);
}

/* Hover-card lift (calm — no scale, +1 elevation step) */
.card-hover {
  transition: box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.card-hover:hover { box-shadow: var(--shadow-2); }