/* archytas.africa — shared styles.
   Page content keeps the design's inline styles; this file holds the shared
   header, hover/focus states, interactive parts and the responsive rules. */

:root { --gx: 120px; --header-h: 84px; }
@media (max-width: 1200px) { :root { --gx: 64px; } }
@media (max-width: 960px)  { :root { --gx: 32px; } }
@media (max-width: 560px)  { :root { --gx: 20px; } }
@media (max-width: 1080px) { :root { --header-h: 64px; } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #FFFFFF; overflow-x: clip; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
a { color: #0B45C4; }
a:hover { color: #0A1F5C; }
:focus-visible { outline: 2px solid #2BD4EA; outline-offset: 3px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 10px;
  background: #0A1F5C; color: #FFFFFF; font: 600 15px 'IBM Plex Sans', sans-serif; text-decoration: none; }
.skip-link:focus { top: 12px; color: #FFFFFF; }

.grid-bg { background-color: #050E2B;
  background-image: linear-gradient(rgba(120,160,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.07) 1px, transparent 1px);
  background-size: 56px 56px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); box-sizing: border-box; padding: 0 var(--gx);
  background: #FFFFFF; border-bottom: 1px solid #E3E9F2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: 'IBM Plex Sans', 'Segoe UI', Helvetica, sans-serif; color: #0E1A33; }
.site-header .brand { display: flex; align-items: center; flex-shrink: 0; }
.site-header .brand img { height: 46px; width: auto; display: block; }
.primary-nav { display: flex; align-items: center; gap: 40px; }
.nav-link { font-size: 15px; font-weight: 500; text-decoration: none; color: #44516B; padding: 29px 0 26px; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-link[aria-current="page"] { color: #0A1F5C; border-bottom-color: #2BD4EA; }
.nav-link:hover { color: #0A1F5C; }
.header-cta { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; background: #0A1F5C;
  color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.header-cta:hover { color: #FFFFFF; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #DCE3EE; background: #FFFFFF;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; box-sizing: border-box; padding: 8px var(--gx) 24px; background: #FFFFFF;
  border-bottom: 1px solid #DCE3EE; box-shadow: 0 24px 40px -24px rgba(5,14,43,.45); display: flex; flex-direction: column; }
.m-link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid #E6ECF4;
  font-family: 'Sora', 'Segoe UI', sans-serif; font-weight: 500; font-size: 18px; color: #0A1F5C; text-decoration: none; }
.m-link[aria-current="page"] { color: #00758C; }
.m-cta { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 20px; border-radius: 999px;
  background: #0A1F5C; color: #FFFFFF; font-weight: 600; font-size: 16px; text-decoration: none; }
.m-cta:hover { color: #FFFFFF; background: #163A9C; }

@media (max-width: 1280px) { .primary-nav { gap: 28px; } }
@media (max-width: 1080px) {
  .primary-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .site-header .brand img { height: 34px; }
}
@media (min-width: 1081px) { .mobile-menu { display: none !important; } }

/* ---------- hover and state styles from the design ---------- */
.foot-link:hover { color: #FFFFFF !important; }
.btn-primary { transition: background .2s ease; }
.btn-primary:hover { background: #6FE3F2 !important; color: #050E2B !important; }
.btn-navy { transition: background .2s ease; }
.btn-navy:hover { background: #163A9C !important; color: #FFFFFF !important; }
.btn-ghost:hover { border-color: #2BD4EA !important; color: #FFFFFF !important; }
.btn-outline:hover { background: #0A1F5C !important; color: #FFFFFF !important; }
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(5,14,43,.55); color: #FFFFFF; }
.chip { transition: border-color .2s ease, background .2s ease; }
.chip:hover { border-color: #2BD4EA !important; background: #0C1D4A !important; color: #E4EBFA !important; }
.row { transition: background .2s ease; }
.row:hover { background: #F3F6FA; }
.field { transition: border-color .2s ease, box-shadow .2s ease; }
.field:focus { outline: none; border-color: #0B45C4 !important; box-shadow: 0 0 0 3px rgba(11,69,196,.15); }
.field:user-invalid { border-color: #C2410C !important; }

@keyframes rail { 0% { left: 0; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@keyframes railv { 0% { top: 0; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
@keyframes breathe { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
.pulse { animation: rail 2.6s linear infinite; }
.pulse-v { animation: railv 2.2s linear infinite; }
.breathe { animation: breathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pulse, .pulse-v { animation: none; opacity: 0; }
  .breathe { animation: none; opacity: 1; }
  .lift:hover { transform: none; }
}

/* ---------- home: solution tabs ---------- */
.tab { display: flex; align-items: center; gap: 18px; min-height: 72px; padding: 0 22px; border-radius: 14px; border: 1px solid #DCE3EE;
  background: #FFFFFF; color: #0A1F5C; font-family: 'Sora', 'Segoe UI', sans-serif; font-size: 17px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background .2s ease, color .2s ease; }
.tab .tab-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; color: #00758C; }
.tab .tab-title { flex-grow: 1; padding: 12px 0; }
.tab svg { color: #00758C; flex-shrink: 0; }
.tab[aria-selected="false"]:hover { background: #E8EEF7; }
.tab[aria-selected="true"] { background: #0A1F5C; border-color: #0A1F5C; color: #FFFFFF; }
.tab[aria-selected="true"] .tab-num, .tab[aria-selected="true"] svg { color: #2BD4EA; }
.sol-panel { flex-grow: 1; }

/* ---------- contact: need pills ---------- */
.pill { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #C9D5E6; background: #FFFFFF; color: #0A1F5C;
  font-size: 15px; font-weight: 500; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; cursor: pointer;
  transition: background .2s ease, border-color .2s ease; }
.pill[aria-pressed="false"]:hover { border-color: #0A1F5C; }
.pill[aria-pressed="true"] { background: #0A1F5C; border-color: #0A1F5C; color: #FFFFFF; }

/* ---------- responsive ---------- */
.show-sm { display: none !important; }
.announce { flex-wrap: wrap; height: auto !important; min-height: 44px; padding: 8px var(--gx); box-sizing: border-box; text-align: center; }

/* home hero: the transaction diagram is drawn on a fixed 620px canvas */
.hero-diagram .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (min-width: 1321px) {
  .hero > .r-fluid { width: auto !important; flex: 1 1 0 !important; min-width: 0; }
  .hero > .hero-diagram { flex: 0 0 620px !important; }
}
@media (max-width: 1320px) {
  .hero { flex-direction: column !important; align-items: stretch !important; }
  .hero > .r-fluid { width: auto !important; max-width: 760px; }
  .hero > .hero-diagram { flex: none !important; width: 100%; max-width: 680px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .sol-tabs { flex: 0 0 clamp(280px, 30vw, 420px); }
}
@media (max-width: 1200px) {
  .r-fluid { width: auto !important; flex-shrink: 1 !important; max-width: 100%; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gfooter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stats > div { padding: 32px 24px !important; border-bottom: 1px solid #16275A; }
  .stats > div:nth-child(2n) { border-right: 0 !important; }
  .stats > div:nth-child(n+3) { border-bottom: 0; }
}
@media (max-width: 960px) {
  .r-stack { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; }
  .r-stack > .r-fluid, .r-stack > .sol-panels, .r-stack > div, .r-stack > form, .r-stack > p { align-self: stretch; max-width: 100%; }
  .gsplit, .g3 { grid-template-columns: minmax(0, 1fr) !important; }
  .glabel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; column-gap: 16px !important; }
  .g211 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 10px !important; }
  .g211 > :first-child { grid-column: 1 / -1; }
  .gtable { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  .thead { display: none !important; }
  .sol-tabs { width: 100% !important; }
}
@media (max-width: 760px) {
  .hero-diagram { display: none !important; }
  .show-sm { display: flex !important; }
  .gquote { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .announce { justify-content: flex-start !important; text-align: left; gap: 6px 12px !important; }
  .r-stack > a[class*="btn"] { align-self: stretch; justify-content: center; }
  .mix-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto !important; }
  .mix-bar > div { width: auto !important; padding: 14px 18px !important; }
}
@media (max-width: 560px) {
  .btn-row { flex-direction: column !important; align-items: stretch !important; }
  .btn-row > a { justify-content: center; }
  .g4:not(.stats), .g2, .gfooter { grid-template-columns: minmax(0, 1fr) !important; }
  .tab { font-size: 16px; }
  .stats > div { padding: 24px 16px !important; }
}