/* ElevAItion, 16 August 2026. Design package: Website Design Package, 16 August 2026 (Drive 05_Brand). */

:root{
  --canvas:#0E1420;
  --panel:#161F30;
  --panel-2:#1A2434;
  --accent:#4A90E2;
  --accent-hover:#63A4EF;
  --accent-muted:#243B57;
  --text-primary:#E8EEF5;
  --text-secondary:#9DAFC4;
  --hairline:rgba(157,175,196,.16);
  --border-strong:rgba(157,175,196,.34);

  --display:"Archivo",system-ui,sans-serif;
  /* 12 September 2026, Phase 1 identity pass: headlines moved from Playfair
     Display 500 to Archivo 200. --serif stays declared so nothing that still
     references it breaks, but no headline rule uses it any more. */
  --headline:"Archivo",system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,5,10,.5),0 4px 18px rgba(5,5,10,.3);

  --gut:clamp(20px,5vw,64px);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  padding:0;
}

body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the fixed environment layer ---------- */

.env{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 20% 0%,rgba(74,144,226,.10) 0%,rgba(74,144,226,0) 55%),
    radial-gradient(100% 70% at 85% 100%,rgba(74,144,226,.07) 0%,rgba(74,144,226,0) 60%);
  animation:envdrift 90s var(--ease) infinite alternate;
  animation-delay:-31s;
}
@keyframes envdrift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}
  to{transform:translate3d(1.5%,1%,0) scale(1.08)}
}

.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shell ---------- */

.wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:99;
  background:var(--accent);
  color:var(--canvas);
  padding:12px 18px;
  border-radius:8px;
  font-family:var(--mono);
  font-size:13px;
}
.skip:focus{left:12px;top:12px}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- type ---------- */

h1,h2,h3{
  font-family:var(--headline);
  font-weight:200;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
/* card, step, and bio titles sit at 19 to 22px; weight 200 thins out at that
   size on a dark ground, so the third tier carries one step more weight */
h3{font-weight:300;letter-spacing:-.005em}
/* the AI lockup: mid-word AI carries one step of extra weight so it reads as
   part of the wordmark. Headings sit at 200, so 500 matches the step the hero
   already uses (.tag b, .static-hero h1 b). Body copy sits at 400 and takes the
   browser default 700, which is the same 300-point step. */
h1 b,h2 b,h3 b{font-weight:500}

.kicker{
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin:0 0 14px;
}

.lede{
  color:var(--text-secondary);
  font-size:clamp(17px,1.6vw,19px);
  max-width:62ch;
  margin:18px 0 0;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent);
  color:var(--canvas);
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  letter-spacing:.01em;
  text-decoration:none;
  padding:15px 28px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  text-shadow:none;
  transition:background .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 34px rgba(74,144,226,.28)}
.btn:active{transform:translateY(0)}

/* 12 September 2026: the ghost button was see-through, which made it
   unreadable over the hero footage. It is dark glass now, the same material
   as the pill nav, so it holds on any background. */
.btn-ghost{
  background:rgba(14,20,32,.58);
  color:var(--text-primary);
  border:1px solid rgba(232,238,245,.34);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(14,20,32,.74);border-color:rgba(232,238,245,.6);box-shadow:none}

@media (pointer:coarse){
  .btn{min-height:44px}
}