:root {
  --res-ink: #071b45;
  --res-copy: #607694;
  --res-line: #d9e6f3;
  --res-blue: #1d7cff;
  --res-cyan: #16bfe8;
  --res-purple: #7658ff;
  --res-teal: #21c8b4;
  --res-navy: #02172f;
  --res-navy-2: #083b7c;
}

.res-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--res-ink);
  background: #fff;
  font-family: "Poppins", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.res-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.res-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.res-eyebrow {
  display: inline-block;
  color: #1b75ef;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.res-eyebrow-light { color: #50d8f2; }

/* HERO */
.res-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: #02152f;
}

.res-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.res-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(1,16,38,.94) 0%, rgba(2,20,47,.78) 30%, rgba(2,20,47,.36) 53%, rgba(2,20,47,.04) 75%),
    linear-gradient(180deg, rgba(2,13,31,.05), rgba(2,13,31,.18));
}

.res-hero-inner {
  min-height: 650px;
  display: flex;
  align-items: center;
}

.res-hero-copy {
  width: min(690px, 54%);
}

.res-hero h1 {
  margin: 16px 0 22px;
  color: #fff;
  font-size: clamp(48px, 4vw, 84px);
  letter-spacing: -.055em;
}

.res-hero h1 span {
  display: block;
  margin-top: -10px;
  color: transparent;
  background: linear-gradient(90deg, #28d6ef 0%, #228dff 58%, #7658ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.res-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(228,239,252,.88);
  font-size: 16px;
  line-height: 1.7;
}

.res-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.res-hero-pills a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid rgba(101,183,255,.25);
  border-radius: 11px;
  color: #d9ebff;
  background: rgba(4,48,96,.42);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.res-hero-pills a:hover {
  transform: translateY(-2px);
  border-color: rgba(78,210,248,.42);
  background: rgba(11,69,131,.58);
}

.res-hero-pills svg { width: 17px; height: 17px; color: #43d4f0; }

/* FEATURED */
.res-featured {
  position: relative;
  z-index: 3;
  margin-top: -42px;
  padding-bottom: 88px;
  background: linear-gradient(180deg, transparent 0 42px, #fff 42px 100%);
}

.res-feature-card {
  min-height: 330px;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  overflow: hidden;
  border: 1px solid #d8e6f4;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(77,91,255,.10), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 30px 80px rgba(26,64,111,.14);
}

.res-feature-copy {
  padding: 48px 52px;
}

.res-feature-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  color: #2b73d8;
  background: #eef5ff;
  border: 1px solid #d7e7fb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.res-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20c7a7;
  box-shadow: 0 0 0 5px rgba(32,199,167,.10);
}

.res-feature-copy h2 {
  max-width: 650px;
  margin: 18px 0 15px;
  font-size: clamp(36px, 3.3vw, 53px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.res-feature-copy p {
  max-width: 670px;
  margin: 0;
  color: var(--res-copy);
  font-size: 14px;
  line-height: 1.78;
}

.res-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.res-feature-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  color: #5f7694;
  background: rgba(255,255,255,.80);
  border: 1px solid #dce7f3;
  font-size: 10px;
  font-weight: 700;
}

.res-feature-meta svg { width: 15px; height: 15px; color: #2582f3; }

.res-feature-art {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  background:
    radial-gradient(circle at 50% 44%, rgba(64,95,255,.16), transparent 26%),
    linear-gradient(145deg, #edf5ff, #e6efff);
}

.res-feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .20;
  background-image:
    linear-gradient(rgba(72,133,226,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,133,226,.18) 1px, transparent 1px);
  background-size: 46px 46px;
}

.res-feature-orbit {
  position: absolute;
  left: 56%;
  top: 50%;
  border: 1px solid rgba(63,127,229,.18);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.res-orbit-one { width: 310px; height: 310px; }
.res-orbit-two { width: 470px; height: 470px; }

.res-feature-book {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 235px;
  min-height: 270px;
  padding: 28px;
  transform: translate(-50%,-50%) rotate(3deg);
  border: 1px solid rgba(45,155,255,.55);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 18%, rgba(89,97,255,.30), transparent 24%),
    linear-gradient(145deg, #031d43 0%, #0a3478 65%, #1a3b92 100%);
  box-shadow: 0 28px 50px rgba(26,61,126,.26);
}

.res-feature-logo {
  display: flex;
  align-items: center;
  min-height: 30px;
}

.res-feature-logo-img {
  display: block;
  width: 118px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.res-feature-book > small {
  display: block;
  margin-top: 35px;
  color: #59d9f4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.res-feature-book strong {
  display: block;
  margin-top: 8px;
  font-size: 27px;
  line-height: 1.05;
}

.res-feature-book-line {
  display: block;
  width: 46px;
  height: 3px;
  margin: 22px 0 12px;
  border-radius: 99px;
  background: linear-gradient(90deg,#19d6f1,#7458ff);
}

.res-feature-book em {
  color: #c8d8ec;
  font-size: 9px;
  font-style: normal;
}

.res-float-card {
  position: absolute;
  z-index: 2;
  width: 105px;
  min-height: 102px;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  border: 1px solid rgba(78,154,255,.30);
  border-radius: 18px;
  color: #1c74db;
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 34px rgba(45,82,132,.14);
  backdrop-filter: blur(10px);
}
.res-float-card svg { width: 25px; height: 25px; margin: 0 auto; }
.res-float-card span { color: #4a6482; font-size: 10px; font-weight: 750; }
.res-float-a { left: 42px; top: 60px; transform: rotate(-5deg); }
.res-float-b { right: 48px; bottom: 48px; transform: rotate(5deg); }

/* PREVIEW */
.res-preview {
  padding: 90px 0 98px;
  background: linear-gradient(180deg,#fff 0%,#f6f9ff 100%);
}

.res-section-heading {
  max-width: 840px;
  margin: 0 auto 40px;
  text-align: center;
}

.res-section-heading h2,
.res-library-head h2,
.res-closing-copy h2 {
  margin: 9px 0 12px;
  font-size: clamp(40px,3.8vw,58px);
  line-height: 1.04;
  letter-spacing: -.05em;
}

.res-section-heading p {
  margin: 0;
  color: var(--res-copy);
  font-size: 13px;
  line-height: 1.75;
}

.res-preview-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px;
}

.res-preview-card {
  min-height: 315px;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid #d9e6f3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(35,74,122,.07);
}

.res-preview-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
}
.res-preview-icon svg { width: 25px; height: 25px; }
.res-preview-blue { color: #217ef6; background: #eaf3ff; }
.res-preview-purple { color: #775aff; background: #f0edff; }
.res-preview-cyan { color: #13aecd; background: #e9faff; }
.res-preview-indigo { color: #5365ff; background: #edf0ff; }
.res-preview-teal { color: #14a891; background: #e9faf5; }

.res-preview-kicker {
  margin-top: 23px;
  color: #8ca0b7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.res-preview-card h3 {
  margin: 7px 0 10px;
  font-size: 21px;
  letter-spacing: -.025em;
}

.res-preview-card p {
  margin: 0;
  color: #617793;
  font-size: 11px;
  line-height: 1.68;
}

.res-coming-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 29px;
  margin-top: auto;
  padding: 0 11px;
  border-radius: 999px;
  color: #4d6c91;
  background: #f2f6fb;
  font-size: 9px;
  font-weight: 750;
}

/* LIBRARY */
.res-library {
  padding: 94px 0 104px;
  background:
    radial-gradient(circle at 86% 0, rgba(90,82,255,.08), transparent 28%),
    #f6f9ff;
}

.res-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}

.res-library-head h2 {
  margin-bottom: 0;
  font-size: clamp(38px,3.4vw,52px);
}

.res-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.res-tab {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d8e5f3;
  border-radius: 999px;
  color: #5b7391;
  background: rgba(255,255,255,.82);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: .2s ease;
}

.res-tab:hover,
.res-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg,#2685ff,#1ab4e8);
  box-shadow: 0 10px 22px rgba(35,129,238,.18);
}

.res-coming-panel {
  min-height: 260px;
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 24px;
  align-items: center;
  padding: 38px;
  border: 1px solid #d6e4f3;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 20%, rgba(97,81,255,.09), transparent 26%),
    #fff;
  box-shadow: 0 24px 58px rgba(39,74,121,.09);
}

.res-coming-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #2a83f8;
  background: linear-gradient(145deg,#eef6ff,#e4eeff);
  border: 1px solid #d6e7fb;
}
.res-coming-icon svg { width: 31px; height: 31px; }

.res-coming-overline {
  color: #2679e8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.res-coming-copy h3 {
  margin: 7px 0 9px;
  font-size: 27px;
  letter-spacing: -.035em;
}

.res-coming-copy p {
  max-width: 720px;
  margin: 0;
  color: #607693;
  font-size: 12px;
  line-height: 1.7;
}

.res-coming-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}

.res-pulse {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #22cbaa;
  box-shadow: 0 0 0 5px rgba(34,203,170,.12);
}

.res-coming-statusline strong {
  color: #193f70;
  font-size: 11px;
}

.res-coming-statusline small {
  color: #7187a1;
  font-size: 10px;
}

.res-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}

.res-skeleton-card {
  min-height: 150px;
  padding: 22px;
  border: 1px dashed #d8e4f1;
  border-radius: 18px;
  background: rgba(255,255,255,.48);
}

.res-skeleton-card span,
.res-skeleton-card b,
.res-skeleton-card i {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg,#ecf2f9,#f5f8fc,#ecf2f9);
}
.res-skeleton-card span { width: 76px; height: 11px; }
.res-skeleton-card b:nth-of-type(1) { width: 82%; height: 14px; margin-top: 18px; }
.res-skeleton-card b:nth-of-type(2) { width: 64%; height: 14px; margin-top: 9px; }
.res-skeleton-card i { width: 46%; height: 10px; margin-top: 28px; }

/* REVEAL */
.res-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s ease;
}
.res-reveal.is-visible { opacity: 1; transform: none; }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .res-preview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .res-feature-card { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .res-shell { width: min(100% - 40px, 1480px); }
  .res-hero { min-height: 720px; align-items: flex-start; }
  .res-hero-inner { min-height: 720px; align-items: flex-start; padding-top: 78px; }
  .res-hero-bg { object-position: 68% center; }
  .res-hero-overlay { background: linear-gradient(180deg, rgba(1,15,35,.94) 0%, rgba(2,19,44,.76) 43%, rgba(2,19,44,.28) 75%, rgba(2,19,44,.06) 100%); }
  .res-hero-copy { width: min(100%,650px); }
  .res-feature-card { grid-template-columns: 1fr; }
  .res-feature-art { min-height: 360px; }
  .res-preview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .res-library-head { flex-direction: column; align-items: flex-start; }
  .res-tabs { justify-content: flex-start; }
  .res-coming-panel { grid-template-columns: 70px 1fr; }
}

@media (max-width: 650px) {
  .res-shell { width: calc(100% - 28px); }
  .res-hero { min-height: 680px; }
  .res-hero-inner { min-height: 680px; padding-top: 58px; }
  .res-hero h1 { font-size: 46px; }
  .res-hero p { font-size: 14px; }
  .res-hero-pills { gap: 7px; }
  .res-hero-pills a { min-height: 36px; padding: 0 11px; font-size: 9px; }
  .res-featured { margin-top: -24px; background: linear-gradient(180deg,transparent 0 24px,#fff 24px 100%); }
  .res-feature-copy { padding: 34px 26px; }
  .res-feature-art { min-height: 330px; }
  .res-feature-book { width: 205px; min-height: 240px; }
  .res-float-a { left: 16px; top: 38px; }
  .res-float-b { right: 16px; bottom: 28px; }
  .res-preview,
  .res-library { padding: 68px 0 76px; }
  .res-preview-grid { grid-template-columns: 1fr; }
  .res-preview-card { min-height: 250px; }
  .res-coming-panel { grid-template-columns: 1fr; padding: 26px; }
  .res-coming-icon { width: 58px; height: 58px; }
  .res-skeleton-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .res-reveal { opacity: 1; transform: none; transition: none; }
}

/* Closing CTA is provided by the common site component. */