/* Shared design primitives — used by more than one feature area (currently the main site and
   My Profile). Each feature's own stylesheet only holds what's unique to it and depends on this
   file, never on another feature's stylesheet, so any feature area can still be lifted onto its
   own host without dragging another feature's CSS along. */

:root {
  --navy: #071b49;
  --blue: #0a6fd7;
  --cyan: #14a8ff;
  --orange: #ff8a00;
  --ink: #101828;
  --muted: #667085;
  --line: #e6ecf6;
  --soft: #f5f8ff;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(7, 27, 73, 0.13);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 168, 255, 0.17), transparent 34rem),
    radial-gradient(circle at 95% 8%, rgba(255, 138, 0, 0.14), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, #f7faff 45%, #ffffff 100%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.section-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* ---- Eyebrow / label tags ---- */
.eyebrow,
.label { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; }
.eyebrow span { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--cyan)); box-shadow: 0 0 0 7px rgba(20, 168, 255, 0.13); }

/* ---- Headings ---- */
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; color: var(--navy); font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.12; letter-spacing: -0.042em; }
.section-heading { max-width: 790px; margin-bottom: 36px; }
.section-heading h2 { margin: 14px 0; color: var(--navy); font-size: clamp(2.1rem, 4.5vw, 3.45rem); line-height: 1.03; letter-spacing: -0.052em; }
.section-heading p { color: #5b6678; font-size: 1.05rem; line-height: 1.74; }

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue) 62%, var(--cyan)); box-shadow: 0 18px 36px rgba(10, 111, 215, 0.22); }
.button.secondary { color: var(--navy); background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 26px rgba(7, 27, 73, 0.08); }

/* ---- Step / timeline cards ---- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.timeline-item { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: 0 16px 38px rgba(7, 27, 73, 0.07); }
.timeline-item span { display: inline-flex; margin-bottom: 22px; padding: 8px 12px; color: var(--blue); background: rgba(10, 111, 215, 0.08); border-radius: 999px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.09em; }
.timeline-item:nth-child(even) span { color: #b85f00; background: rgba(255, 138, 0, 0.12); }
.timeline-item h3 { color: var(--navy); font-size: 1.2rem; }
.timeline-item p { margin-bottom: 0; color: var(--muted); line-height: 1.62; }

/* ---- Reveal-on-scroll animation (see js/common.js) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- Modal primitive — used today by the inquiry modal, and by Login/Signup (My Profile) ---- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 27, 73, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 48px 40px 40px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(7, 27, 73, 0.22);
  text-align: center;
  animation: modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--soft); color: var(--navy); }
.modal-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 auto 24px;
  padding: 12px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(7, 27, 73, 0.12);
}
.modal-card h2 { margin: 0 0 10px; color: var(--navy); font-size: 1.6rem; letter-spacing: -0.035em; }
.modal-card p { margin: 0 0 28px; color: #5b6678; line-height: 1.7; font-size: 0.97rem; }
.modal-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: 800 0.96rem/1 inherit;
  background: linear-gradient(135deg, var(--navy), var(--blue) 62%, var(--cyan));
  box-shadow: 0 14px 30px rgba(10,111,215,0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modal-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(10,111,215,0.28); }

/* ---- Responsive ---- */
@media (max-width: 1020px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .section-shell { width: min(100% - 28px, 1160px); }
  h1 { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .button { width: 100%; }
  .timeline { grid-template-columns: 1fr; }
  .modal-card { padding: 40px 24px 32px; }
}

/* ---- Accessibility ---- */

/* Skip navigation link — hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 22px;
  border-radius: 0 0 14px 14px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Visible keyboard focus ring on all interactive elements */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Suppress outline for mouse/touch — only show for keyboard */
:focus:not(:focus-visible) { outline: none; }

.button:focus-visible { outline-color: var(--cyan); outline-offset: 4px; }
.modal-close:focus-visible,
.modal-btn:focus-visible { outline-offset: 4px; }

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .modal-card { animation: none !important; }
}