:root {
  --jam-blue: #0853BF;
  --jam-blue-50: #EAF6FF;
  --jam-blue-100: #D2ECFF;
  --jam-blue-200: #B3E0FF;
  --jam-ink: #102033;
  --jam-muted: #5E6D7D;
  --jam-paper: #F7FAFD;
  --jam-white: #FFFFFF;
  --jam-radius: 34px;
  --jam-shadow: 0 30px 80px rgba(13, 43, 77, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--jam-ink);
  background: var(--jam-paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  z-index: 999;
  left: 16px;
  top: 16px;
  transform: translateY(-160%);
  background: var(--jam-ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
}
.skip-link:focus { transform: translateY(0); }

.hub { overflow: hidden; }
.hero {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 78% 24%, rgba(72,182,255,.20), transparent 29rem),
    radial-gradient(circle at 16% 12%, rgba(8,83,191,.08), transparent 26rem),
    linear-gradient(155deg, #ffffff 0%, #f6fbff 58%, #eaf6ff 100%);
  border-bottom: 1px solid rgba(8,83,191,.08);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .36;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8,83,191,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,83,191,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 48px));
  min-height: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto 1fr;
  column-gap: 34px;
  padding: 42px 0 38px;
}
.hero__brand { grid-column: 1 / -1; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { width: min(280px, 62vw); max-height: 92px; object-fit: contain; object-position: left center; }
.jamcono-wordmark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.jamcono-wordmark__name { font-size: 2.25rem; font-weight: 850; letter-spacing: -.08em; }
.jamcono-wordmark__tagline { margin-top: 8px; color: var(--jam-blue); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.hero__copy { align-self: center; padding: 48px 0 44px; max-width: 720px; }
.hero__eyebrow {
  margin: 0 0 18px;
  color: var(--jam-blue);
  font-weight: 850;
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3.6rem, 8.7vw, 7.7rem);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 900;
}
.hero h1 span { color: var(--jam-blue); }
.hero__intro {
  max-width: 620px;
  margin: 30px 0 0;
  color: var(--jam-muted);
  font-size: clamp(1.04rem, 1.8vw, 1.28rem);
  line-height: 1.62;
}
.hero__capy {
  --capy-x: 0px;
  --capy-y: 0px;
  align-self: end;
  justify-self: end;
  position: relative;
  width: min(520px, 46vw);
  transform: translate(var(--capy-x), var(--capy-y));
  transition: transform .28s ease-out;
}
.hero__capy img { display: block; }
.capy-bubble {
  position: absolute;
  padding: 9px 13px;
  border: 1px solid rgba(8,83,191,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(8,83,191,.09);
  color: var(--jam-blue);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: floaty 5s ease-in-out infinite;
}
.capy-bubble--one { top: 9%; left: 4%; }
.capy-bubble--two { top: 16%; right: 4%; animation-delay: -1.5s; }
.capy-bubble--three { bottom: 21%; right: 0; animation-delay: -2.7s; }
@keyframes floaty { 50% { transform: translateY(-8px); } }

.destinations { padding: 24px; background: #fff; }
.destinations__grid {
  width: min(1450px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.destination {
  position: relative;
  min-height: 590px;
  padding: 28px;
  border-radius: var(--jam-radius);
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  transform: translateY(0);
  transition: transform .24s ease, box-shadow .24s ease;
}
.destination::before,
.destination::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.destination:hover,
.destination:focus-visible { transform: translateY(-5px); box-shadow: var(--jam-shadow); outline: none; }
.destination__topline,
.destination__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.destination__number { font-size: .76rem; font-weight: 850; letter-spacing: .12em; opacity: .62; }
.destination__arrow { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 1.25rem; transition: transform .24s ease; }
.destination:hover .destination__arrow { transform: rotate(8deg) scale(1.05); }
.destination__body { margin: auto 0; max-width: 440px; padding: 42px 0; }
.destination__eyebrow { margin: 0 0 9px; font-size: .76rem; letter-spacing: .10em; text-transform: uppercase; font-weight: 850; opacity: .72; }
.destination h2 { margin: 0; font-size: clamp(3.4rem, 5.5vw, 6rem); line-height: .9; letter-spacing: -.07em; }
.destination h3 { margin: 24px 0 14px; font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.04; letter-spacing: -.035em; }
.destination__body > p:last-child { margin: 0; max-width: 39ch; font-size: 1rem; line-height: 1.64; opacity: .78; }
.destination__footer { font-weight: 850; }
.destination__capy-face { font-size: 1.1rem; letter-spacing: -.1em; opacity: .72; }

.destination--creative {
  color: #fff;
  background:
    radial-gradient(circle at 88% 13%, rgba(255,255,255,.24), transparent 10rem),
    linear-gradient(145deg, #0b64d7 0%, #0853bf 42%, #053a8a 100%);
}
.destination--creative::before {
  width: 310px; height: 310px; border-radius: 45% 55% 61% 39% / 55% 43% 57% 45%; right: -110px; bottom: 68px;
  background: rgba(255,255,255,.08); transform: rotate(20deg);
}
.destination--creative .destination__arrow { background: rgba(255,255,255,.14); }

.destination--dev {
  color: #f7fbff;
  background: #0d1d2d;
}
.destination--dev::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(179,224,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179,224,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
}
.destination--dev::after {
  width: 250px; height: 250px; border-radius: 50%; right: -70px; bottom: -68px;
  background: radial-gradient(circle, rgba(72,182,255,.34), transparent 68%);
}
.destination--dev .destination__arrow { background: rgba(255,255,255,.08); color: #8bd5ff; }
.destination--dev .destination__eyebrow { color: #8bd5ff; opacity: 1; }

.destination--apps {
  color: var(--jam-ink);
  border: 1px solid rgba(8,83,191,.09);
  background:
    radial-gradient(circle at 94% 10%, rgba(72,182,255,.23), transparent 13rem),
    linear-gradient(145deg, #f9fcff 0%, #eaf6ff 100%);
}
.destination--apps::before {
  width: 210px; height: 210px; right: -28px; bottom: 50px; border-radius: 42px;
  background:
    linear-gradient(135deg, rgba(8,83,191,.10), rgba(255,255,255,.62));
  transform: rotate(18deg);
  box-shadow: -58px -58px 0 rgba(8,83,191,.045);
}
.destination--apps .destination__arrow { background: #fff; color: var(--jam-blue); box-shadow: 0 10px 26px rgba(8,83,191,.10); }
.destination--apps .destination__eyebrow { color: var(--jam-blue); opacity: 1; }

.site-footer { background: #fff; padding: 12px 24px 42px; }
.site-footer__inner {
  width: min(1450px, 100%);
  margin: 0 auto;
  border-top: 1px solid rgba(16,32,51,.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #718092;
  font-size: .84rem;
}
.site-footer p { margin: 0; }

.standard-page { min-height: 100vh; padding: 72px 24px; }
.standard-page__inner { width: min(900px, 100%); margin: 0 auto; }
.standard-page h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.06em; }

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero__inner { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero__brand { grid-column: auto; }
  .hero__copy { padding: 70px 0 16px; }
  .hero__capy { width: min(520px, 78vw); justify-self: center; margin-top: -14px; }
  .destinations__grid { grid-template-columns: 1fr; }
  .destination { min-height: 430px; }
  .destination__body { padding: 52px 0; }
  .destination h2 { font-size: clamp(3.7rem, 14vw, 7rem); }
}

@media (max-width: 620px) {
  .hero__inner { width: min(100% - 32px, 1280px); padding-top: 28px; }
  .hero__copy { padding-top: 60px; }
  .hero h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .hero__intro { margin-top: 22px; }
  .hero__capy { width: 96vw; margin-right: -18vw; }
  .capy-bubble--one { left: 10%; }
  .capy-bubble--two { right: 14%; }
  .capy-bubble--three { right: 11%; }
  .destinations { padding: 12px; }
  .destinations__grid { gap: 12px; }
  .destination { min-height: 470px; padding: 22px; border-radius: 28px; }
  .destination__body > p:last-child { font-size: .96rem; }
  .site-footer { padding: 12px 18px 30px; }
  .site-footer__inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}