@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap');
/* Geminus design tokens.
 *
 * Every value here comes from visual-identity.md. Components never hard-code a
 * colour, size, or duration — they read these custom properties, so a design
 * built with this DS stays on-brand by construction.
 *
 * Two layers:
 *   1. Raw brand values  (--gds-color-*, --gds-space-*, --gds-text-*)
 *   2. Semantic surface  (--gds-surface-*) — re-pointed by <Section tone>, so a
 *      component reads --gds-surface-fg and is automatically correct on light,
 *      surface, and dark backgrounds alike.
 */


:root {
  /* ---- Brand ---- */
  --gds-color-primary: #1e3a5f;
  --gds-color-primary-hover: #2d4a6f;
  --gds-color-accent: #b8860b;
  --gds-color-accent-hover: #9a7209;

  /* ---- Light mode — content sections ---- */
  --gds-color-background: #ffffff;
  --gds-color-surface: #f7f8fa;
  --gds-color-foreground: #1a1f2e;
  --gds-color-foreground-muted: #5c6271;
  --gds-color-border: #e4e6eb;

  /* ---- Dark mode — hero, contact, footer ---- */
  --gds-color-background-inverse: #0d1117;
  --gds-color-background-inverse-deep: #06090d;
  --gds-color-foreground-inverse: #f0f2f5;
  --gds-color-foreground-inverse-secondary: #c9cdd4;
  --gds-color-foreground-inverse-muted: #8b929c;
  --gds-color-border-inverse: #1c2128;

  /* ---- Semantic surface (defaults to the light content surface) ---- */
  --gds-surface-bg: var(--gds-color-background);
  --gds-surface-fg: var(--gds-color-foreground);
  --gds-surface-fg-secondary: var(--gds-color-foreground-muted);
  --gds-surface-fg-muted: var(--gds-color-foreground-muted);
  --gds-surface-border: var(--gds-color-border);
  --gds-surface-icon: var(--gds-color-primary);

  /* ---- Typography ---- */
  --gds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --gds-weight-regular: 400;
  --gds-weight-medium: 500;
  --gds-weight-semibold: 600;

  --gds-text-sm: 0.875rem;
  --gds-text-base: 1rem;
  --gds-text-lg: 1.125rem;
  --gds-text-xl: 1.25rem;
  --gds-text-2xl: 1.5rem;
  --gds-text-3xl: 1.875rem;
  --gds-text-4xl: 2.25rem;
  --gds-text-5xl: 3rem;
  --gds-text-6xl: 3.75rem;

  --gds-leading-tight: 1.15;
  --gds-leading-snug: 1.35;
  --gds-leading-normal: 1.6;
  --gds-tracking-tight: -0.02em;
  --gds-tracking-logo: 0.02em;

  /* ---- Spacing (Tailwind's scale, the site's own rhythm) ---- */
  --gds-space-1: 0.25rem;
  --gds-space-2: 0.5rem;
  --gds-space-3: 0.75rem;
  --gds-space-4: 1rem;
  --gds-space-5: 1.25rem;
  --gds-space-6: 1.5rem;
  --gds-space-8: 2rem;
  --gds-space-10: 2.5rem;
  --gds-space-12: 3rem;
  --gds-space-16: 4rem;
  --gds-space-20: 5rem;
  --gds-space-24: 6rem;

  /* ---- Layout ---- */
  --gds-content-width: 48rem;
  --gds-content-width-wide: 64rem;
  --gds-gutter: var(--gds-space-6);

  /* ---- Shape & motion ---- */
  --gds-radius-sm: 0.375rem;
  --gds-radius-md: 0.5rem;
  --gds-radius-lg: 0.75rem;
  --gds-radius-full: 9999px;
  --gds-duration-fast: 150ms;
  --gds-duration-slow: 300ms;
  --gds-ease: ease;
}

/* Dark surface scope.
 * Applied by <Section tone="dark" | "gradient">, <Hero>, <ContactCTA> and
 * <SiteFooter>. Anything nested inside picks up the inverse palette without
 * knowing it is on a dark background. */
.gds-surface-dark {
  --gds-surface-bg: var(--gds-color-background-inverse);
  --gds-surface-fg: var(--gds-color-foreground-inverse);
  --gds-surface-fg-secondary: var(--gds-color-foreground-inverse-secondary);
  --gds-surface-fg-muted: var(--gds-color-foreground-inverse-muted);
  --gds-surface-border: var(--gds-color-border-inverse);
  --gds-surface-icon: var(--gds-color-accent);
}

/* Elevated light surface — the alternating "Cloud" sections. */
.gds-surface-raised {
  --gds-surface-bg: var(--gds-color-surface);
}

/* Geminus component styles.
 *
 * Every rule reads tokens from tokens.css — no literal colours or sizes below.
 * Class names are prefixed `gds-` and follow BEM-ish structure:
 *   .gds-block          root
 *   .gds-block__element child part
 *   .gds-block--mod     variant
 *
 * Components are driven by props, not by consumers writing these classes.
 * They are documented here so the styling is auditable, not so it is authored.
 */

[class*='gds-'],
[class*='gds-'] * {
  box-sizing: border-box;
}

.gds-logo,
.gds-heading,
.gds-text,
.gds-link,
.gds-button,
.gds-section,
.gds-container,
.gds-stack,
.gds-grid,
.gds-service-card,
.gds-approach-item,
.gds-stat-tile,
.gds-feature-chip,
.gds-duration-badge,
.gds-pain-point,
.gds-callout,
.gds-hero,
.gds-contact-cta,
.gds-site-header,
.gds-site-footer,
.gds-offer-card,
.gds-method-step {
  font-family: var(--gds-font-sans);
}

/* ============================================================ Layout ===== */

.gds-container {
  width: 100%;
  max-width: var(--gds-content-width);
  margin-inline: auto;
  padding-inline: var(--gds-gutter);
}

.gds-container--wide {
  max-width: var(--gds-content-width-wide);
}

.gds-container--full {
  max-width: none;
}

.gds-section {
  position: relative;
  background: var(--gds-surface-bg);
  color: var(--gds-surface-fg);
  padding-block: var(--gds-space-16);
}

.gds-section--pad-sm {
  padding-block: var(--gds-space-8);
}

.gds-section--pad-lg {
  padding-block: var(--gds-space-20);
}

.gds-section--pad-none {
  padding-block: 0;
}

.gds-section--divided {
  border-top: 1px solid var(--gds-surface-border);
}

/* The hero gradient: navy radial pools over a near-black vertical fade,
 * with a slow drifting overlay. Lifted from the live site. */
.gds-section--tone-gradient {
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 80% 60% at 0% 20%,
      color-mix(in srgb, var(--gds-color-primary) 40%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 50% at 100% 30%,
      color-mix(in srgb, var(--gds-color-primary) 30%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 70% 50% at 50% 100%,
      color-mix(in srgb, var(--gds-color-primary) 25%, transparent) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      var(--gds-color-background-inverse-deep) 0%,
      var(--gds-color-background-inverse) 100%
    );
}

.gds-section--tone-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 50% 40% at 20% 60%,
      color-mix(in srgb, var(--gds-color-primary) 35%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 45% 35% at 80% 50%,
      color-mix(in srgb, var(--gds-color-primary) 30%, transparent) 0%,
      transparent 50%
    );
  animation: gds-drift 15s ease-in-out infinite;
}

@keyframes gds-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(3%, 2%) scale(1.03);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gds-section--tone-gradient::before {
    animation: none;
  }
}

.gds-section__body {
  position: relative;
  z-index: 1;
}

.gds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gds-stack-gap, var(--gds-space-6));
}

.gds-stack--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.gds-stack--align-start {
  align-items: flex-start;
}

.gds-stack--align-center {
  align-items: center;
}

.gds-stack--align-end {
  align-items: flex-end;
}

.gds-grid {
  display: grid;
  gap: var(--gds-grid-gap, var(--gds-space-8));
  grid-template-columns: repeat(var(--gds-grid-columns, 3), minmax(0, 1fr));
}

@media (max-width: 640px) {
  .gds-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ======================================================== Typography ===== */

.gds-heading {
  margin: 0;
  color: var(--gds-surface-fg);
  font-weight: var(--gds-weight-semibold);
  line-height: var(--gds-leading-tight);
  letter-spacing: var(--gds-tracking-tight);
}

.gds-heading--level-1 {
  font-size: var(--gds-text-4xl);
}

.gds-heading--level-2 {
  font-size: var(--gds-text-2xl);
  letter-spacing: normal;
}

.gds-heading--level-3 {
  font-size: var(--gds-text-base);
  letter-spacing: normal;
  line-height: var(--gds-leading-snug);
}

.gds-heading--level-4 {
  font-size: var(--gds-text-sm);
  letter-spacing: normal;
}

@media (min-width: 768px) {
  .gds-heading--level-1 {
    font-size: var(--gds-text-6xl);
  }
}

.gds-heading--tone-muted {
  color: var(--gds-surface-fg-muted);
}

.gds-heading--tone-secondary {
  color: var(--gds-surface-fg-secondary);
}

.gds-heading--tone-accent {
  color: var(--gds-color-accent);
}

.gds-heading--tone-primary {
  color: var(--gds-color-primary);
}

.gds-text {
  margin: 0;
  color: var(--gds-surface-fg-secondary);
  font-size: var(--gds-text-base);
  font-weight: var(--gds-weight-regular);
  line-height: var(--gds-leading-normal);
}

.gds-text--size-sm {
  font-size: var(--gds-text-sm);
}

.gds-text--size-lg {
  font-size: var(--gds-text-lg);
}

.gds-text--size-xl {
  font-size: var(--gds-text-xl);
}

.gds-text--size-2xl {
  font-size: var(--gds-text-2xl);
}

.gds-text--size-3xl {
  font-size: var(--gds-text-3xl);
  line-height: var(--gds-leading-snug);
}

.gds-text--tone-default {
  color: var(--gds-surface-fg);
}

.gds-text--tone-muted {
  color: var(--gds-surface-fg-muted);
}

.gds-text--tone-accent {
  color: var(--gds-color-accent);
}

.gds-text--tone-primary {
  color: var(--gds-color-primary);
}

.gds-text--weight-medium {
  font-weight: var(--gds-weight-medium);
}

.gds-text--weight-semibold {
  font-weight: var(--gds-weight-semibold);
}

.gds-link {
  color: var(--gds-surface-fg-secondary);
  text-decoration: none;
  transition: color var(--gds-duration-fast) var(--gds-ease);
}

.gds-link:hover {
  color: var(--gds-surface-fg);
}

.gds-link--variant-nav {
  color: var(--gds-surface-fg);
  font-size: var(--gds-text-base);
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.gds-link--variant-nav:hover {
  color: var(--gds-color-primary);
}

.gds-link--variant-accent {
  color: var(--gds-color-accent);
}

.gds-link--variant-accent:hover {
  color: var(--gds-color-accent-hover);
}

.gds-link--variant-underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gds-link:focus-visible,
.gds-button:focus-visible {
  outline: 2px solid var(--gds-color-accent);
  outline-offset: 2px;
  border-radius: var(--gds-radius-sm);
}

/* =========================================================== Brand ======= */

.gds-logo {
  display: inline-block;
  color: var(--gds-surface-fg);
  font-weight: var(--gds-weight-medium);
  letter-spacing: var(--gds-tracking-logo);
  line-height: 1;
  text-transform: lowercase;
  text-decoration: none;
}

.gds-logo--size-sm {
  font-size: var(--gds-text-lg);
}

.gds-logo--size-md {
  font-size: var(--gds-text-2xl);
}

.gds-logo--size-lg {
  font-size: var(--gds-text-4xl);
}

.gds-logo--tone-light {
  color: var(--gds-color-foreground);
}

.gds-logo--tone-dark {
  color: var(--gds-color-foreground-inverse);
}

.gds-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
}

.gds-icon--tone-accent {
  color: var(--gds-color-accent);
}

.gds-icon--tone-primary {
  color: var(--gds-color-primary);
}

.gds-icon--tone-surface {
  color: var(--gds-surface-icon);
}

.gds-icon--tone-muted {
  color: var(--gds-surface-fg-muted);
}

.gds-data-flow-grid {
  position: absolute;
  pointer-events: none;
  color: var(--gds-color-foreground-inverse-muted);
}

.gds-data-flow-grid--placement-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 66%;
  max-width: 42rem;
  opacity: 0.12;
}

.gds-data-flow-grid--placement-cover {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
}

/* ========================================================= Actions ======= */

.gds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gds-space-2);
  border: 1px solid transparent;
  border-radius: var(--gds-radius-md);
  font-family: var(--gds-font-sans);
  font-weight: var(--gds-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--gds-duration-fast) var(--gds-ease),
    border-color var(--gds-duration-fast) var(--gds-ease),
    color var(--gds-duration-fast) var(--gds-ease);
}

.gds-button--size-sm {
  padding: var(--gds-space-2) var(--gds-space-4);
  font-size: var(--gds-text-sm);
}

.gds-button--size-md {
  padding: 0.875rem var(--gds-space-8);
  font-size: var(--gds-text-base);
}

.gds-button--size-lg {
  padding: var(--gds-space-4) var(--gds-space-8);
  font-size: var(--gds-text-lg);
}

.gds-button--variant-cta {
  background: var(--gds-color-accent);
  color: var(--gds-color-foreground-inverse);
}

.gds-button--variant-cta:hover {
  background: var(--gds-color-accent-hover);
}

.gds-button--variant-primary {
  background: var(--gds-color-primary);
  color: var(--gds-color-foreground-inverse);
}

.gds-button--variant-primary:hover {
  background: var(--gds-color-primary-hover);
}

.gds-button--variant-ghost {
  background: transparent;
  border-color: var(--gds-surface-border);
  color: var(--gds-surface-fg);
}

.gds-button--variant-ghost:hover {
  border-color: var(--gds-color-accent);
  color: var(--gds-color-accent);
}

.gds-button--full {
  width: 100%;
}

.gds-button[aria-disabled='true'],
.gds-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gds-duration-badge {
  display: inline-block;
  color: var(--gds-color-accent);
  font-size: var(--gds-text-sm);
  font-weight: var(--gds-weight-medium);
  white-space: nowrap;
}

.gds-duration-badge--variant-pill {
  padding: var(--gds-space-1) var(--gds-space-3);
  border-radius: var(--gds-radius-full);
  background: color-mix(in srgb, var(--gds-color-accent) 14%, transparent);
}

.gds-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
  color: var(--gds-surface-fg-muted);
  font-size: var(--gds-text-sm);
  line-height: 1.4;
}

.gds-feature-chip--variant-outlined {
  padding: var(--gds-space-1) var(--gds-space-3);
  border: 1px solid var(--gds-surface-border);
  border-radius: var(--gds-radius-full);
}

/* ========================================================= Content ======= */

.gds-service-card {
  display: flex;
  gap: var(--gds-space-5);
  align-items: flex-start;
}

.gds-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--gds-space-12);
  height: var(--gds-space-12);
  border-radius: var(--gds-radius-md);
  background: var(--gds-color-primary);
  color: var(--gds-color-foreground-inverse);
}

.gds-service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
  min-width: 0;
}

.gds-service-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gds-space-1) var(--gds-space-4);
  margin-top: var(--gds-space-1);
}

.gds-approach-item {
  display: flex;
  gap: var(--gds-space-5);
  align-items: flex-start;
}

.gds-approach-item__icon {
  flex-shrink: 0;
  color: var(--gds-surface-icon);
  margin-top: 0.15rem;
}

.gds-approach-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
  min-width: 0;
}

.gds-approach-item__header {
  display: flex;
  align-items: center;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
}

.gds-stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-1);
}

.gds-stat-tile__icon {
  color: var(--gds-surface-icon);
  margin-bottom: var(--gds-space-1);
}

.gds-stat-tile__value {
  color: var(--gds-surface-fg);
  font-size: var(--gds-text-3xl);
  font-weight: var(--gds-weight-semibold);
  line-height: 1.1;
}

.gds-stat-tile__label {
  color: var(--gds-surface-fg-muted);
  font-size: var(--gds-text-sm);
  line-height: 1.4;
}

.gds-pain-point {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
  color: var(--gds-surface-fg-muted);
  font-size: var(--gds-text-base);
  line-height: 1.4;
}

.gds-callout {
  border-left: 2px solid var(--gds-surface-border);
  padding-left: var(--gds-space-4);
  color: var(--gds-surface-fg-muted);
  font-size: var(--gds-text-sm);
  line-height: var(--gds-leading-normal);
}

.gds-callout--variant-accent {
  border-left-color: var(--gds-color-accent);
}

.gds-callout--variant-primary {
  border-left-color: var(--gds-color-primary);
}

/* ============================================================ Page ======= */

.gds-hero__headline {
  margin: 0 0 var(--gds-space-6);
  line-height: var(--gds-leading-tight);
  letter-spacing: var(--gds-tracking-tight);
  color: var(--gds-surface-fg);
}

.gds-hero__title {
  display: block;
  font-size: var(--gds-text-4xl);
  font-weight: var(--gds-weight-semibold);
}

.gds-hero__subtitle {
  display: block;
  font-size: var(--gds-text-3xl);
  font-weight: var(--gds-weight-regular);
  color: var(--gds-surface-fg-muted);
}

@media (min-width: 768px) {
  .gds-hero__title {
    font-size: var(--gds-text-6xl);
  }

  .gds-hero__subtitle {
    font-size: var(--gds-text-5xl);
  }
}

.gds-hero__description {
  max-width: 36rem;
  margin: 0 0 var(--gds-space-10);
  color: var(--gds-surface-fg-secondary);
  font-size: var(--gds-text-xl);
  line-height: var(--gds-leading-normal);
}

.gds-hero__pain-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gds-space-3) var(--gds-space-8);
  margin-bottom: var(--gds-space-10);
}

.gds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gds-space-4);
}

.gds-contact-cta__body {
  text-align: center;
}

.gds-contact-cta__title {
  margin: 0 0 var(--gds-space-4);
}

.gds-contact-cta__description {
  margin: 0 0 var(--gds-space-8);
  font-size: var(--gds-text-lg);
  color: var(--gds-surface-fg-muted);
}

.gds-contact-cta__footnote {
  margin: var(--gds-space-8) 0 0;
  font-size: var(--gds-text-sm);
  color: var(--gds-surface-fg-muted);
}

.gds-site-header {
  background: var(--gds-color-surface);
  border-bottom: 1px solid var(--gds-color-border);
  padding-block: var(--gds-space-5);
}

.gds-site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

.gds-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-space-6);
}

.gds-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--gds-space-6);
}

.gds-site-footer {
  background: var(--gds-surface-bg);
  border-top: 1px solid var(--gds-surface-border);
  padding-block: var(--gds-space-6);
  color: var(--gds-surface-fg-muted);
  font-size: var(--gds-text-sm);
}

.gds-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-space-4);
  flex-wrap: wrap;
}

/* ========================================================= Offers ======== */

.gds-offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-4);
  padding: var(--gds-space-8);
  border: 1px solid var(--gds-surface-border);
  border-radius: var(--gds-radius-lg);
  background: var(--gds-surface-bg);
}

.gds-offer-card--variant-featured {
  border-top: 3px solid var(--gds-color-primary);
  background: var(--gds-color-surface);
}

.gds-offer-card__header {
  display: flex;
  align-items: center;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
}

.gds-offer-card__price {
  color: var(--gds-surface-fg);
  font-size: var(--gds-text-3xl);
  font-weight: var(--gds-weight-semibold);
  line-height: 1.1;
}

.gds-offer-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
}

.gds-offer-card__actions {
  margin-top: var(--gds-space-2);
}

.gds-offer-card__footnote {
  margin-top: calc(-1 * var(--gds-space-2));
}

/* ========================================================= Method ======== */

.gds-method-step {
  display: flex;
  gap: var(--gds-space-5);
  align-items: flex-start;
}

.gds-method-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--gds-space-10);
  height: var(--gds-space-10);
  border-radius: var(--gds-radius-full);
  background: var(--gds-color-primary);
  color: var(--gds-color-foreground-inverse);
  font-weight: var(--gds-weight-semibold);
  font-size: var(--gds-text-lg);
}

.gds-method-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
  min-width: 0;
  padding-top: var(--gds-space-2);
}