/* ─── CIRCULARITY ONE — SHARED DESIGN SYSTEM ───────────────────────────────
   Loaded by: index.html  academy.html  research.html  about.html
   Contains: reset, tokens, header/nav, type, buttons, reveal, cards, footer
   Page-specific layout lives in each file's own <style> block.
   ─────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#050f1c;
  --card:#0a1e30;
  --border:#1a3a55;
  --gold:#D4A24C;
  --gold2:#B3854A;
  --white:#ffffff;
  --dim:rgba(255,255,255,.62);
  --panel:rgba(10,22,32,.54);
  --spring:linear(0,.0018,.0069 1.15%,.026 2.3%,.0637,.1135 5.18%,.2229 7.78%,.5977 15.84%,.7014,.7904,.8641,.9228,.9676 28.8%,1.0032 31.68%,1.0225,1.0352 36.29%,1.0431 38.88%,1.046 42.05%,1.0448 44.35%,1.0407 47.23%,1.0118 61.63%,1.0025 69.41%,.9981 80.35%,.9992 99.94%);
  /* Flower of Life hex tile — white arcs on dark bg */
  --fol-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.282032'%3E%3Cg fill='none' stroke='white' stroke-width='0.9' opacity='0.18'%3E%3Ccircle cx='0' cy='0' r='40'/%3E%3Ccircle cx='40' cy='0' r='40'/%3E%3Ccircle cx='0' cy='69.282032' r='40'/%3E%3Ccircle cx='40' cy='69.282032' r='40'/%3E%3Ccircle cx='20' cy='34.641016' r='40'/%3E%3Ccircle cx='-20' cy='34.641016' r='40'/%3E%3Ccircle cx='60' cy='34.641016' r='40'/%3E%3Ccircle cx='20' cy='-34.641016' r='40'/%3E%3Ccircle cx='-20' cy='-34.641016' r='40'/%3E%3Ccircle cx='60' cy='-34.641016' r='40'/%3E%3Ccircle cx='20' cy='103.923048' r='40'/%3E%3Ccircle cx='-20' cy='103.923048' r='40'/%3E%3Ccircle cx='60' cy='103.923048' r='40'/%3E%3Ccircle cx='0' cy='-69.282032' r='40'/%3E%3Ccircle cx='40' cy='-69.282032' r='40'/%3E%3Ccircle cx='0' cy='138.564065' r='40'/%3E%3Ccircle cx='40' cy='138.564065' r='40'/%3E%3Ccircle cx='-40' cy='0' r='40'/%3E%3Ccircle cx='80' cy='0' r='40'/%3E%3Ccircle cx='-40' cy='69.282032' r='40'/%3E%3Ccircle cx='80' cy='69.282032' r='40'/%3E%3C/g%3E%3Cg fill='white' opacity='0.5'%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='40' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='69.282032' r='2.2'/%3E%3Ccircle cx='40' cy='69.282032' r='2.2'/%3E%3Ccircle cx='20' cy='34.641016' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --fol-size:30px 51.96px;
}

html{font-size:16px;overflow-x:hidden;scrollbar-width:none}
html::-webkit-scrollbar{display:none}

body{
  font-family:'League Spartan',sans-serif;
  background:var(--bg);color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ─── HEADER ─── */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:44px 80px 44px 160px;
  transition:padding .4s ease,background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:18px 80px 18px 160px;
  background:rgba(10,22,32,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-color:rgba(128,193,188,.1);
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-wordmark{height:52px;transition:opacity .3s ease}
.logo:hover .logo-wordmark{opacity:.7}

nav{
  display:flex;gap:36px;align-items:center;
  position:fixed;top:0;left:50%;
  transform:translateX(-50%);
  height:140px;
  z-index:200;
  pointer-events:none;
  transition:height .4s ease;
}
nav a{
  font-size:1.24rem;font-weight:300;letter-spacing:.06em;
  color:rgba(255,255,255,.88);text-decoration:none;
  transition:color .25s;white-space:nowrap;
  pointer-events:all;
}
nav a:hover{color:var(--gold)}
header.scrolled ~ nav{height:88px}

/* ─── TYPE SYSTEM ─── */
.label{
  display:block;font-size:.8rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.h-hero{
  font-size:clamp(56px,7.2vw,118px);font-weight:200;
  line-height:87%;letter-spacing:-.02em;margin-bottom:26px;
}
.h-hero em{font-style:normal;font-weight:100}
.h-section{
  font-size:clamp(40px,4.8vw,78px);font-weight:200;
  line-height:87%;letter-spacing:-.02em;margin-bottom:22px;
}
.h-domain{
  font-size:clamp(44px,5.2vw,86px);font-weight:200;
  line-height:87%;letter-spacing:-.02em;margin-bottom:22px;
}
.h-xl{
  font-size:clamp(48px,6vw,96px);font-weight:200;
  line-height:87%;letter-spacing:-.02em;margin-bottom:44px;
}
.body{
  font-family:'Lato',sans-serif;font-size:clamp(14px,1.35vw,18px);
  font-weight:300;line-height:1.72;color:var(--dim);
  max-width:500px;margin-bottom:30px;
}
.body-wide{max-width:680px}
.body-center{text-align:center;max-width:520px}

/* ─── BUTTON ─── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;
  border:1px solid var(--gold);border-radius:100px;
  font-family:'League Spartan',sans-serif;font-size:1rem;font-weight:500;letter-spacing:.08em;
  color:var(--white);text-decoration:none;
  transition:border-color 0s,background-color 0s,background 0s,color 0s,transform .35s var(--spring);
  cursor:pointer;background:var(--gold);
}
.btn::after{content:none}
.btn:hover{border-color:var(--white);color:var(--gold);background:var(--white)}
.btn:hover::after{transform:none}
.btn-no-arrow::after{content:none}

/* ─── REVEAL ─── */
.r{
  opacity:0;transform:translateY(38px);
  transition:opacity 0.8s ease,transform 0.9s cubic-bezier(.16,1,.3,1);
}
.r.in{opacity:1;transform:translateY(0)}
.btn.r{
  transition:opacity 0.8s ease,transform 0.9s cubic-bezier(.16,1,.3,1);
}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}
.d4{transition-delay:.38s}.d5{transition-delay:.48s}

/* ─── CARDS ─── */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:32px 26px;
  transition:border-color .3s;
}
.card:hover{border-color:rgba(128,193,188,.35)}
.card-n{font-size:.62rem;font-weight:500;letter-spacing:.2em;color:var(--gold);margin-bottom:12px}
.card-t{font-size:1.1rem;font-weight:400;margin-bottom:10px;color:var(--white)}
.card p{
  font-family:'Lato',sans-serif;
  font-size:clamp(13px,1.1vw,16px);font-weight:300;line-height:1.65;color:var(--dim);
}

/* ─── SITE FOOTER (standalone pages) ─── */
.site-footer{
  padding:22px 80px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(2,10,18,.92);
}
.site-footer-logo{height:auto;width:160px;opacity:.85}
.site-footer-tagline{
  font-family:'League Spartan',sans-serif;font-size:.72rem;font-weight:200;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.48);
}
.site-footer-copy{
  font-family:'Lato',sans-serif;font-size:.82rem;font-weight:300;
  letter-spacing:.04em;color:rgba(255,255,255,.36);
}

/* ─── HAMBURGER ─── */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5.5px;
  background:none;border:none;cursor:pointer;
  padding:6px;z-index:200;flex-shrink:0;
}
.nav-toggle span{
  display:block;width:22px;height:1.5px;
  background:rgba(255,255,255,.88);
  transition:transform .25s ease,opacity .2s ease;
}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(0)}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── MOBILE ─── */
@media(max-width:1100px){
  .nav-toggle{display:flex}
  nav{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    height:100vh;
    transform:translateZ(0);
    flex-direction:column;
    align-items:center;justify-content:center;
    gap:40px;
    background:rgba(5,15,28,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
    z-index:9000;
  }
  header.scrolled ~ nav{padding-top:0}
  header.nav-open ~ nav{opacity:1;pointer-events:all}
  nav a{font-size:1.5rem;letter-spacing:.08em;pointer-events:all}
}

@media(max-width:960px){
  header{padding:22px 22px}
  header.scrolled{padding:14px 22px}
  .card-grid{grid-template-columns:1fr}
  .site-footer{
    padding:20px 22px;flex-direction:column;gap:10px;text-align:center;
  }
  .site-footer-logo{width:120px}
}