/* Akunyx Brand — Light Theme (forced)
   Palette + type per SOP: 60/30/10, Helvetica Neue body, Montserrat headings
   Accent Blue (#0087D0) reserved for CTAs/links. */
:root{
  /* 60% Neutral (base surfaces) */
  --bg: #EBEBEB;           /* page background */
  --surface: #FFFFFF;      /* cards/panels */

  /* 30% Complementary (support text/borders) */
  --support: #666666;

  /* 10% Accent (CTA/link) */
  --accent: #0087D0;

  /* Additional support */
  --text: #000000;         /* primary text */
  --text-dim: #969696;     /* secondary/ghost */
  --stroke: #DDDDDD;       /* subtle borders */
}

/* Global */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
}
h1,h2,h3,h4{
  font-family:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin:0 0 8px; color:var(--text);
}
p{margin:0 0 12px; color:var(--text-dim)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(130%) blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:36px;width:auto;display:block}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--support)}
.nav-links a:hover{color:var(--accent)}

/* Buttons (SOP: Primary blue bg/white text; Secondary white bg/blue border) */
.btn{
  padding:10px 16px;border-radius:10px;display:inline-block;
  border:1px solid var(--stroke);color:var(--text);background:transparent;
}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.btn.ghost,.btn.secondary{background:#fff;color:var(--accent);border-color:var(--accent);font-weight:600}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Hero */
.hero{padding:64px 0 24px;border-bottom:1px solid var(--stroke);background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero-copy h1{font-size:36px;line-height:1.15}
.hero-copy p{font-size:16px}
.cta{display:flex;gap:12px;margin:18px 0 12px}
.bullets{padding-left:18px;color:var(--text-dim)}
.bullets li{margin:6px 0}

/* Demo block (light surfaces) */
.hero-visual .card.demo{
  background:var(--surface);border:1px solid var(--stroke);border-radius:14px;padding:18px;
}
.kpi{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border:1px solid var(--stroke);border-radius:10px;margin-bottom:10px;background:#F7F7F7;
}
.kpi span{color:var(--support)}
.wave{height:110px;border-radius:10px;border:1px dashed var(--stroke);
  background:linear-gradient(180deg, rgba(0,135,208,.10), rgba(0,135,208,.06));}

/* Sections */
.section{padding:56px 0;border-bottom:1px solid var(--stroke);background:var(--bg)}
.section.muted{background:var(--surface)}
.section h2{font-size:28px}

/* Cards & Links */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--stroke);border-radius:12px;padding:18px}
.card h3{color:var(--text)}
.card p{color:var(--text-dim)}
.card.link:hover{outline:2px solid rgba(0,135,208,.25);outline-offset:2px}

.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.link-card{display:block;padding:14px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--stroke);color:var(--text)}
.link-card:hover{border-color:var(--accent)}

/* Leadership */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.leader{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--stroke);border-radius:12px;padding:14px}
.avatar{width:48px;height:48px;border-radius:12px;object-fit:cover}
.leader-role{color:var(--text-dim);font-size:14px;margin-bottom:4px}

/* Contact & Forms (ghost text per SOP) */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
label{display:block;color:var(--support);font-size:14px}
input,textarea{
  width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--stroke);
  border-radius:10px;color:var(--text);padding:10px 12px;
}
input::placeholder,textarea::placeholder{color:var(--text-dim);font-style:italic}
input:focus,textarea:focus{outline:2px solid rgba(0,135,208,.45);border-color:var(--accent)}

/* Footer */
.site-footer{padding:24px 0;background:var(--surface);border-top:1px solid var(--stroke)}
.foot{display:flex;align-items:center;justify-content:space-between}
.foot a{color:var(--support)}
.foot a:hover{color:var(--accent)}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
  .leaders{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

.legal-note { color: var(--text-dim); font-size: 12px; }
.legal-sep { opacity: .4; margin: 0 6px; }

/* iOS text scaling guard */
html { -webkit-text-size-adjust: 100%; }

/* General container breathing room on small phones */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* Header: keep logo & nav tidy on small phones */
@media (max-width: 480px) {
  .site-header .brand-logo { height: 22px; width: auto; }
  .site-header .nav a,
  .site-header .nav-links a { padding: 6px 10px; font-size: 14px; }
}

/* Leadership grid: 2 cols on small tablets, 1 col on phones */
@media (max-width: 920px) {
  .leaders-grid,
  .cards-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 420px) {
  .leaders-grid,
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Leader tiles: tighter padding, consistent type sizes on phones */
@media (max-width: 480px) {
  .leader-tile { padding: 12px; border-radius: 12px; }
  .leader-photo { border-radius: 12px; margin-bottom: 10px; }
  .leader-name { font-size: 18px; line-height: 1.15; margin: 2px 0 2px; }
  .leader-tile .role { font-size: 13px; margin-bottom: 8px; }
}

/* Make the VIEW BIO button a comfy tap target and keep it aligned */
.view-bio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;            /* Apple HIG tap target */
  width: 100%;                 /* keeps the button centered & same width */
  text-align: center;
}
@media (min-width: 481px) {
  .view-bio { width: auto; }   /* desktop can be natural width */
}

/* Prevent long names from pushing the layout around */
.leader-name {
  word-break: normal;
  overflow-wrap: anywhere;     /* break gracefully if needed */
}

/* Accent bar: thinner and pinned so it doesn’t overlap content on small screens */
.tile-accent { height: 4px; bottom: 8px; }

/* “Join our pilot program” panel: stack & full-width button on phones */
@media (max-width: 640px) {
  .cta-panel { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-panel .btn { width: 100%; }
}


/* Mobile horizontal-scroll nav */
@media (max-width: 920px) {
  .site-header .nav { gap: 12px; align-items: center; }

  .nav-wrap {
    position: relative;
    flex: 1 1 auto;              /* let the rail take remaining space */
    min-width: 0;                /* critical to allow overflow-x to work in flex */
  }

  .nav-scroll {
    display: inline-flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 8px 0;              /* breathing room for touch */
    scrollbar-width: none;       /* Firefox */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .nav-scroll::-webkit-scrollbar { display: none; }

  .nav-scroll a {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1;
  }
  .nav-scroll a.btn {
    padding: 10px 14px;          /* keep the button comfy */
  }

  /* Optional: subtle edge fades (background matches your header bg) */
  .nav-wrap::before,
  .nav-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 16px;
    pointer-events: none;
  }
  .nav-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg, #fff), rgba(255,255,255,0));
  }
  .nav-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg, #fff), rgba(255,255,255,0));
  }
}

/* ===== Mobile horizontal scroll nav fix ===== */
@media (max-width: 920px) {
  /* Make the header line use flex and allow children to shrink */
  .site-header .nav {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .site-header .brand { flex: 0 0 auto; }   /* logo stays fixed width */

  /* THIS IS THE KEY: the nav rail must be allowed to shrink */
  .site-header .nav .nav-links {
    display: flex;
    flex: 1 1 auto;   /* take remaining space */
    min-width: 0;     /* allow shrinking so overflow-x can work */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 12px;
    padding: 8px 0;
    scrollbar-width: none;        /* Firefox */
  }
  .site-header .nav .nav-links::-webkit-scrollbar { display: none; }

  /* Keep each item from wrapping and make tap targets comfy */
  .site-header .nav .nav-links a {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1;
  }

  /* Trim the big CTA style inside the nav on mobile so it fits the rail */
  .site-header .nav .nav-links a.btn {
    background: transparent;
    border: 1px solid var(--stroke);
    padding: 10px 12px;
  }
}