/* =====================================================
   ORVANNIS MAIN — v2
   Elite design pass: 3D hovers, deep slate, copper
   ===================================================== */

/* =====================
   LAYOUT UTILITIES
   ===================== */
.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}
.container--normal {
  max-width: var(--w-normal);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}
.container--text {
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-6), 5vw, var(--sp-16));
}

/* =====================
   3D PERSPECTIVE ENGINE
   Every interactive card lives inside a perspective container.
   ===================== */
.perspective-wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

/* =====================
   CONSTRUCTION NOTICE
   Temporary banner — remove the .construction-notice element from each
   page once the full site (all platform links, etc.) is ready to go live.
   ===================== */
.construction-notice {
  width: 100%;
  background: var(--color-primary);
  color: #FFF8EF;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0.7rem 1.25rem;
  position: relative;
  z-index: 20;
}
.construction-notice p { margin: 0; }
.construction-notice a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.construction-notice a:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .construction-notice { font-size: var(--text-xs); padding: 0.6rem 1rem; }
}

/* =====================
   SITE-TOP BANNER
   Full lockup (mark + wordmark + tagline) shown full-width above the nav.
   The banner image's own background matches the active theme (cream image
   in light mode, black image in dark mode), so the container background
   just follows --color-bg to stay seamless behind it.
   ===================== */
.site-top-banner {
  width: 100%;
  display: block;
  background: var(--color-bg);
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.banner-img {
  display: none;
  width: 100%;
  max-width: none;
  /* contain (not cover) — the banner's own background already matches the
     page background per theme, so there's no visible letterboxing, but it
     guarantees the whole graphic (icon, wordmark, AND tagline) is always
     fully visible instead of cover cropping the top/bottom off to fill a
     short container. */
  object-fit: contain;
  object-position: center;
}
/* Each variant's height is set independently (rather than width:100%/height:auto)
   because the two source images have different aspect ratios — this keeps both
   scaled to ~60% of their original full-bleed height instead of one looking
   disproportionately smaller than the other. */
.banner-img--for-light { height: clamp(90px, 24vw, 280px); }  /* cream banner, ~2.5:1 source */
.banner-img--for-dark  { height: clamp(70px, 14.7vw, 180px); } /* dark banner, ~4.1:1 source */

[data-theme="dark"]  .banner-img--for-light { display: none; }
[data-theme="dark"]  .banner-img--for-dark  { display: block; }
html:not([data-theme="dark"]) .banner-img--for-light { display: block; }
html:not([data-theme="dark"]) .banner-img--for-dark  { display: none; }

/* =====================
   NAVIGATION
   ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-header--scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: var(--sp-8);
}

.nav-logo-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  text-transform: lowercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-primary);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active { color: var(--color-text); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.btn-theme {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.btn-theme:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
  border-color: var(--color-border);
}

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--r-md);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--color-bg);
  padding: var(--sp-8);
  flex-direction: column;
  gap: var(--sp-6);
}
.mobile-nav.open { display: flex; }
.mobile-nav-close {
  align-self: flex-end;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
}
.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.mobile-nav-links a {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }  /* hide CTA button on mobile — hamburger replaces it */
}

/* =====================
   BUTTONS
   ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.625rem var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Shimmer layer on primary */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-primary {
  background: linear-gradient(135deg, var(--copper), var(--copper-muted));
  color: #fff;
  border-color: var(--copper-muted);
  box-shadow: 0 2px 8px var(--color-primary-pale), 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 24px var(--color-primary-glow), 0 2px 6px rgba(0,0,0,0.10);
}
.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-offset);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.btn-lg {
  padding: 0.875rem var(--sp-8);
  font-size: var(--text-base);
  border-radius: var(--r-lg);
}
.btn-sm {
  padding: 0.4rem var(--sp-4);
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
}

/* =====================
   3D CARD SYSTEM
   ===================== */
.card-3d {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  transform: translateY(0) scale(1);
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.32s var(--ease-out);
  will-change: transform;
  cursor: default;
}

@media (hover: hover) {
  .card-3d:hover {
    transform: translateY(-10px) scale(1.012);
    border-color: var(--color-border-strong);
    box-shadow:
      0 20px 48px rgba(42, 39, 32, 0.13),
      0 6px 16px rgba(42, 39, 32, 0.08),
      0 0 0 1px var(--color-primary-pale);
  }
}

/* Card icon */
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--color-primary-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--color-primary);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-3d:hover .card-icon {
  background: var(--color-primary-glow);
  box-shadow: 0 4px 16px var(--color-primary-glow);
}

.card-title {
  font-size: var(--text-md);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
}
.card-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: none;
}

/* ── "What Makes Us Different" cards (About page) ──
   These had no rules at all and were falling back to the browser's default
   bold serif heading font, clashing badly with the rest of the page's type.
   ────────────────────────────────────────────────────────────────────── */
.difference-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}
@media (max-width: 760px) {
  .difference-grid { grid-template-columns: 1fr; }
}
.difference-card {
  padding: var(--sp-8);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}
.difference-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--color-primary-pale);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.difference-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}
.difference-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
}
.difference-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.difference-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-left: var(--sp-5);
  position: relative;
}
.difference-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Copper top-border accent that appears on hover */
.card-3d::after {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), left var(--dur-slow) var(--ease-out), right var(--dur-slow) var(--ease-out);
}
.card-3d:hover::after {
  opacity: 1;
  left: 4%;
  right: 4%;
}

/* =====================
   SECTION HELPERS
   ===================== */
.section {
  padding-block: clamp(var(--sp-12), 8vw, var(--sp-32));
}
.section--tight {
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-20));
}
.section--alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}

/* ── FOUNDER STRIP (homepage, near the top) ── */
.founder-strip-inner {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.founder-strip-body {
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: 1.7;
  margin-top: var(--sp-3);
}
.founder-strip-link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.founder-strip-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── SIMPLE BULLET LISTS (What We Help With / Built for Year 1 / Who We Help) ── */
.simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-8);
}
.simple-list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-8);
}
@media (max-width: 700px) {
  .simple-list--grid { grid-template-columns: 1fr; }
}
.simple-list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
}
.simple-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ── "We don't start with custom software" statement ── */
.no-custom-software {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.5;
  max-width: 56ch;
}

/* ── HOW WE WORK steps ── */
.how-we-work-steps {
  list-style: none;
  margin: var(--sp-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 900px) {
  .how-we-work-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how-we-work-steps { grid-template-columns: 1fr; }
}
.how-we-work-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.how-step-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary-pale);
  font-weight: 600;
}
.how-step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
}
.how-step-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
  display: block;
}
.section-title {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-heading);
  margin-bottom: var(--sp-5);
  line-height: 1.1;
}
.section-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
}
.section-body + .section-body { margin-top: var(--sp-4); }

.copper-rule {
  width: 44px; height: 2.5px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--copper-muted), var(--copper-bright));
  margin-bottom: var(--sp-6);
}
.copper-rule--center { margin-inline: auto; }

/* =====================
   GRIDS
   ===================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =====================
   FORM ELEMENTS
   ===================== */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.7rem var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
  transform: translateY(-1px);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-faint); }

/* =====================
   FOOTER
   ===================== */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--sp-16) var(--sp-10);
  margin-top: var(--sp-24);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-12);
}
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 30ch;
  line-height: 1.7;
  margin-top: var(--sp-4);
}
.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.footer-links a:hover {
  color: var(--color-text);
  padding-left: var(--sp-2);
}
.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer-bottom p { font-size: var(--text-xs); color: var(--color-text-faint); }
.copper-text { color: var(--color-primary); }

/* ── Social icons ── */
.footer-socials {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  background: transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.social-icon:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}

/* ── Admin footer link ── */
.footer-admin-link {
  font-size: var(--text-xs) !important;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.footer-admin-link:hover { opacity: 1; }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* =====================
   PAGE HERO BANNER
   ===================== */
.page-hero {
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-32));
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  overflow: hidden;
}
/* Subtle grain texture overlay */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
}
.page-hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.page-hero-title {
  font-size: var(--text-3xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--sp-6);
  line-height: 1.05;
}
.page-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.6;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* =====================
   SCROLL REVEAL
   ===================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Initial fade-up for hero elements */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUpIn 0.7s var(--ease-out) both; }
.delay-1   { animation-delay: 0.10s; }
.delay-2   { animation-delay: 0.20s; }
.delay-3   { animation-delay: 0.30s; }
.delay-4   { animation-delay: 0.42s; }

/* =====================
   DIVIDER ORNAMENT
   ===================== */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-12);
  color: var(--color-text-faint);
}
.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

/* =====================
   CTA BOX
   ===================== */
.cta-box {
  padding: clamp(var(--sp-10), 6vw, var(--sp-16)) clamp(var(--sp-8), 5vw, var(--sp-16));
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--copper-muted) 30%, var(--copper-bright) 50%, var(--copper-muted) 70%, transparent 95%);
}
.cta-box .section-title { margin-inline: auto; max-width: 22ch; }
.cta-box .section-body  { margin-inline: auto; margin-bottom: var(--sp-8); }
.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ══ STATIONARY LOGO — NAV (cropped 620×100 viewBox, planet + wordmark only) ══ */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo-img {
  display: block;
  height: 52px;   /* 480×88 nav SVG at 52px tall → ~284px wide; reads clearly as the brand mark */
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .nav-logo-img { height: 40px; }
}
/* Footer logo — full stationary SVG (620×180) at readable size */
.footer-brand .nav-logo {
  align-items: flex-start;
}
.footer-logo-img {
  height: 54px;   /* 620×180 at height 54px → width ≈ 186px; shows pillars legibly */
  width: auto;
}
/* Show/hide based on theme — dark variant hides everywhere except when
   [data-theme="dark"] is actually active (previously hid itself unconditionally,
   leaving no visible logo at all when the page loaded in dark mode). */
[data-theme="dark"] .nav-logo-img--light { display: none; }
html:not([data-theme="dark"]) .nav-logo-img--dark { display: none; }

/* ══ LOGIN DROPDOWN ══ */
.nav-login-wrap {
  position: relative;
}
.nav-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav-login-btn:hover,
.nav-login-wrap.is-open .nav-login-btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}
.nav-login-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 200;
}
.nav-login-wrap.is-open .nav-login-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-login-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-login-option:hover {
  background: var(--color-primary-pale);
  color: var(--color-text);
}
.nav-login-option--admin {
  border-top: 1px solid var(--color-divider);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  font-size: var(--text-xs);
  opacity: 0.75;
}
.nav-login-option--admin:hover { opacity: 1; }

/* ══ ORBITAL IFRAME — HERO ══ */
/* Render at 680px virtual canvas — rings get proper breathing room */
.orbital-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}
.orbital-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: block;
}
@media (max-width: 900px) {
  .orbital-wrap {
    max-width: 400px;
    margin: 0 auto var(--sp-6);
    order: -1;
  }
}
@media (max-width: 480px) {
  .orbital-wrap {
    max-width: min(320px, 90vw);
  }
}

/* ── BRAND MARK (About page) ─────────────────────────────────────── */
.brand-mark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.brand-mark-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--radius-lg);
  display: none;
}
/* Light mode: show light mark */
[data-theme="light"] .brand-mark-img--light  { display: block; }
[data-theme="light"] .brand-mark-img--dark   { display: none;  }
/* Dark mode: show dark mark */
[data-theme="dark"]  .brand-mark-img--dark   { display: block; }
[data-theme="dark"]  .brand-mark-img--light  { display: none;  }
/* Fallback when no theme set */
.brand-mark-img--dark { display: block; }

/* ── FORM SUBMIT LOADING STATE ─────────────────────────────────────── */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}