/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Display palette (for text / decorative use on dark backgrounds) */
  --deep-slate:       #2d3b44;
  --cornflower-blue:  #9fb8d9;
  --sandy-peach:      #f4d7b1;
  --parchment:        #faf7f2;

  /* Contrast-compliant palette (AA/AAA with white text as backgrounds) */
  --obsidian-slate:   #1b252c;
  --twilight-blue:    #4e6e8e;
  --deep-sand:        #8c654d;
  --vintage-bronze:   #8b6b23;

  /* Hover / highlight states */
  --twilight-blue-hover:    #6388ac;
  --deep-sand-hover:        #a87d63;
  --vintage-bronze-hover:   #a37f2a;

  /* Derived light variants */
  --cornflower-blue-dim: #7a9bbf;
  --sandy-peach-light:   #f7e3c8;

  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --section-pad: clamp(5rem, 10vw, 9rem);
  --content-max: 1100px;
  --radius: 10px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--obsidian-slate);
  color: var(--parchment);
  font-family: var(--font-sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── Utilities ──────────────────────────────────────────────────── */
.container {
  width: min(var(--content-max), 100% - 3rem);
  margin-inline: auto;
}
.accent { color: var(--sandy-peach); }
.gold   { color: var(--cornflower-blue); }
.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 99px;
  background: rgba(159,184,217,.1);
  color: var(--cornflower-blue);
  border: 1px solid rgba(159,184,217,.22);
}
.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sandy-peach);
  margin-bottom: .75rem;
}

/* ─── Nav ────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(27,37,44,.96);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.nav-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}
.nav-brand span { color: var(--sandy-peach); }
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--cornflower-blue-dim);
  transition: color .2s;
}
.nav-links a:hover { color: var(--parchment); }

/* ─── Nav toggle (mobile) ────────────────────────────────────────── */
.nav-toggle { display: none; }
.nav-hamburger { display: none; }
@media (max-width: 640px) {
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    z-index: 10;
  }
  .nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--parchment);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-links {
    position: fixed;
    inset: 62px 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    background: rgba(27,37,44,.98);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-toggle:checked ~ .nav-links {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    font-size: 1.1rem;
  }
}

/* ─── Hero ───────────────────────────────────────────────────────── */
#hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 62px;
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(78,110,142,.2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 10% 70%, rgba(45,59,68,.8) 0%, transparent 60%),
    var(--obsidian-slate);
}
.hero-content { max-width: 780px; }
.hero-name {
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.hero-name .line2 { color: var(--sandy-peach); }
.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.22rem);
  color: var(--cornflower-blue-dim);
  max-width: 560px;
  margin-bottom: 2.5rem;
  line-height: 1.75;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9rem;
  transition: background .2s, transform .15s, box-shadow .2s;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--deep-sand);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(140,101,77,.35);
}
.btn-primary:hover {
  background: var(--deep-sand-hover);
  box-shadow: 0 6px 28px rgba(140,101,77,.5);
}
.btn-ghost {
  background: rgba(255,255,255,.07);
  color: var(--parchment);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }

.hero-scroll {
  margin-top: 5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  color: var(--twilight-blue);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scroll-line {
  width: 40px;
  height: 1px;
  background: var(--twilight-blue);
}

/* ─── Sections (shared) ──────────────────────────────────────────── */
.section {
  padding: var(--section-pad) 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
.section:nth-child(odd) {
  background: linear-gradient(180deg, rgba(45,59,68,.35) 0%, transparent 100%);
}
.section-header { margin-bottom: 3.5rem; }
.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: .75rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--cornflower-blue-dim);
  max-width: 560px;
  line-height: 1.75;
}

/* ─── Section 1 · Software ───────────────────────────────────────── */
#software .highlight-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* ─── Timeline ───────────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(244,215,177,.2);
}
.timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--deep-sand);
  border: 2px solid var(--obsidian-slate);
  z-index: 1;
}
.timeline-item:last-child .timeline-marker {
  background: var(--cornflower-blue);
}
.timeline-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sandy-peach);
  margin-bottom: .35rem;
}
.timeline-content {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: background .2s, border-color .2s;
}
.timeline-content:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(140,101,77,.4);
}
.timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--parchment);
  margin-bottom: .4rem;
}
.timeline-content p {
  font-size: .88rem;
  color: var(--cornflower-blue-dim);
  line-height: 1.7;
}
@media (max-width: 640px) {
  .timeline { padding-left: 1.5rem; }
  .timeline-marker { left: -1.5rem; }
}

/* ─── Section 2 · Security ───────────────────────────────────────── */
.compliance-frameworks {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.framework-badge {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border: 1px solid rgba(159,184,217,.3);
  border-radius: 4px;
  color: var(--cornflower-blue);
  background: rgba(159,184,217,.06);
}
.compliance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
}
.compliance-block {
  background: var(--obsidian-slate);
  padding: 1.75rem 2rem;
}
.compliance-block-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: .5rem;
}
.compliance-block p {
  font-size: .88rem;
  color: var(--cornflower-blue-dim);
  line-height: 1.7;
}
@media (max-width: 640px) {
  .compliance-split { grid-template-columns: 1fr; }
}

/* ─── Section 3 · Leadership ─────────────────────────────────────── */
.leader-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tab-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.tab-bar label {
  padding: .55rem 1.2rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--cornflower-blue-dim);
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
}
.tab-bar label:hover {
  background: rgba(255,255,255,.08);
  color: var(--parchment);
}
/* Active tab styles */
#tab-ops:checked   ~ .tab-bar label[for="tab-ops"],
#tab-exec:checked  ~ .tab-bar label[for="tab-exec"],
#tab-people:checked ~ .tab-bar label[for="tab-people"],
#tab-bridge:checked ~ .tab-bar label[for="tab-bridge"] {
  background: rgba(244,215,177,.12);
  border-color: var(--sandy-peach);
  color: var(--sandy-peach);
}
/* Panel visibility */
.tab-panels {
  position: relative;
  min-height: 200px;
}
.tab-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#tab-ops:checked   ~ .tab-panels #panel-ops,
#tab-exec:checked  ~ .tab-panels #panel-exec,
#tab-people:checked ~ .tab-panels #panel-people,
#tab-bridge:checked ~ .tab-panels #panel-bridge {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.panel-body {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
}
.panel-lead {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--parchment);
  line-height: 1.4;
  margin-bottom: 1rem;
}
.panel-body p {
  font-size: .92rem;
  color: var(--cornflower-blue-dim);
  line-height: 1.75;
}
.panel-body .team-flow {
  margin-top: 1.5rem;
}
@media (max-width: 640px) {
  .tab-bar { gap: .4rem; }
  .tab-bar label { font-size: .75rem; padding: .45rem .8rem; }
  .panel-body { padding: 1.5rem; }
}
.team-flow {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.team-pill {
  padding: .35rem .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--parchment);
}
.team-arrow {
  color: var(--cornflower-blue);
  font-size: 1rem;
  font-weight: 700;
}

/* ─── Section 4 · AI & Machine Learning ──────────────────────────── */
.ai-section {
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(78,110,142,.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(140,101,77,.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(27,37,44,1) 0%, var(--obsidian-slate) 100%) !important;
  border-top: 1px solid rgba(159,184,217,.12);
}
.ai-accent { color: var(--cornflower-blue); }

/* Showcase: two-column layout */
.ai-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Left: embedded chat */
.ai-chat-embed {
  border-radius: 12px;
  border: 1px solid rgba(159,184,217,.15);
  background: rgba(27,37,44,.8);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  background: rgba(159,184,217,.06);
  border-bottom: 1px solid rgba(159,184,217,.1);
}
.ai-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.5);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.ai-chat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cornflower-blue);
}
.ai-chat-log {
  min-height: 280px;
  max-height: 400px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ai-chat-log::-webkit-scrollbar { width: 4px; }
.ai-chat-log::-webkit-scrollbar-track { background: transparent; }
.ai-chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.ai-chat-msg {
  max-width: 90%;
  border-radius: 10px;
  padding: .5rem .85rem;
  font-size: .85rem;
  line-height: 1.6;
}
.ai-chat-msg p { margin: 0; }
.ai-chat-msg.assistant {
  align-self: flex-start;
  background: rgba(159,184,217,.08);
  color: #c8d6e5;
  border: 1px solid rgba(159,184,217,.1);
  border-bottom-left-radius: 3px;
}
.ai-chat-msg.user {
  align-self: flex-end;
  background: var(--deep-sand);
  color: #ffffff;
  border-bottom-right-radius: 3px;
}
.ai-chat-msg a { color: var(--sandy-peach); text-decoration: underline; }
.ai-chat-msg strong { color: var(--parchment); font-weight: 600; }

/* Embedded chat input */
.ai-chat-input-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .6rem;
  border-top: 1px solid rgba(159,184,217,.1);
}
#ai-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: .5rem .4rem;
  font-size: .85rem;
  color: var(--parchment);
  font-family: inherit;
  outline: none;
}
#ai-chat-input::placeholder {
  color: #5a7a96;
}
#ai-chat-send {
  background: var(--deep-sand);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
#ai-chat-send:hover { background: #a87d63; }

/* Right: intro + prompt buttons */
.ai-showcase-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ai-showcase-intro {
  font-size: 1rem;
  color: var(--cornflower-blue-dim);
  line-height: 1.75;
}
.ai-prompt-stack {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ai-prompt-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cornflower-blue);
  margin-bottom: .25rem;
}
.ai-prompt-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(159,184,217,.15);
  background: rgba(159,184,217,.04);
  color: var(--parchment);
  font-size: .88rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s ease;
  text-align: left;
}
.ai-prompt-btn:hover {
  background: rgba(159,184,217,.1);
  border-color: var(--cornflower-blue);
  transform: translateX(4px);
}
.ai-prompt-btn:active {
  transform: translateX(2px);
}
.ai-prompt-btn.ai-prompt-used {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
.ai-prompt-icon {
  color: var(--cornflower-blue);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.ai-prompt-btn:hover .ai-prompt-icon {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
  .ai-showcase {
    grid-template-columns: 1fr;
  }
  .ai-showcase-right { order: -1; }
  .ai-chat-log { min-height: 200px; }
}

/* ─── Footer ─────────────────────────────────────────────────────── */
footer {
  background: #111a20;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 3.5rem 0 5rem;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.footer-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-tagline {
  color: var(--cornflower-blue-dim);
  font-size: .9rem;
  max-width: 400px;
}
.footer-copy {
  font-size: .75rem;
  color: var(--twilight-blue);
  margin-top: .5rem;
}

/* ─── Focus & Accessibility ──────────────────────────────────────── */
a:focus-visible,
.btn:focus-visible,
.tab-bar label:focus-visible,
.nav-hamburger:focus-visible {
  outline: 2px solid var(--sandy-peach);
  outline-offset: 2px;
}
.leader-tabs input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--sandy-peach);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}