/* ===================================================================
   TIXIN — Governed Build Company
   Design tokens
=================================================================== */
:root{
  --carbon:        #0A0A0A;
  --graphite:       #171717;
  --graphite-2:     #1D2024;
  --line:           #262A2E;
  --gold:           #B89A4A;
  --gold-light:     #CDB36C;
  --gold-dim:       rgba(184,154,74,.16);
  --steel:          #8B95A1;
  --steel-dim:      #5C6671;
  --bg-light:       #F7F8FA;
  --paper:          #FFFFFF;
  --ink:            #0A0A0A;
  --ink-soft:       #4B5560;

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --container-narrow: 860px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ===================================================================
   Reset
=================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bg-light);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ margin:0; font-family:var(--font-display); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--carbon); padding:.75rem 1.25rem; font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
.container--narrow{ max-width:var(--container-narrow); }

.text-gold{ color:var(--gold); }
.tm{ font-size:.5em; vertical-align:super; }

/* ===================================================================
   Reveal-on-scroll
=================================================================== */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===================================================================
   Buttons
=================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  padding:.85rem 1.6rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
  letter-spacing:.01em;
}
.btn--primary{ background:var(--gold); color:var(--carbon); }
.btn--primary:hover{ background:#CDB36C; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--sm{ padding:.55rem 1.1rem; font-size:.82rem; }

/* ===================================================================
   Nav
=================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,10,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__inner{
  max-width:var(--container); margin-inline:auto; padding:0 1.5rem;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{
  display:flex; flex-direction:column; gap:1px; line-height:1;
}
.nav__logo-main{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.04em; color:#fff;
}
.nav__logo-sub{
  font-family:var(--font-body); font-weight:600; font-size:.52rem; letter-spacing:.22em; color:var(--gold);
}
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  color:var(--steel); font-size:.88rem; font-weight:500;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__cta{ flex-shrink:0; }

.nav__toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:none; padding:.5rem; cursor:pointer;
}
.nav__toggle span{ width:20px; height:2px; background:#fff; display:block; transition:transform .25s var(--ease), opacity .25s var(--ease); }

.mobile-menu{
  display:none; flex-direction:column; gap:1.25rem;
  padding:1.5rem; background:var(--carbon); border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-menu a{ color:#fff; font-size:1rem; }
.mobile-menu .btn{ width:fit-content; }

@media (max-width:860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.is-open .mobile-menu{ display:flex; }
}

/* ===================================================================
   Sections — shared
=================================================================== */
.section{ padding:7.5rem 0; position:relative; }
.section--dark{ background:var(--carbon); color:#fff; }
.section--light{ background:var(--bg-light); color:var(--ink); }

.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1rem;
}
.eyebrow--light{ color:var(--gold); }

.section__heading{
  font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:600; line-height:1.12;
  letter-spacing:-.01em; max-width:760px; margin-bottom:1.1rem; color:#fff;
}
.section__heading--dark{ color:var(--ink); }

.section__sub{
  font-size:1.05rem; line-height:1.65; color:var(--steel); max-width:620px; margin-bottom:3rem;
}
.section__sub--dark{ color:var(--ink-soft); }

.section__footnote{
  margin-top:3rem; max-width:560px; font-size:1rem; line-height:1.6; color:var(--steel);
}

@media (max-width:640px){
  .section{ padding:5rem 0; }
}

/* ===================================================================
   1. HERO
=================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--carbon); overflow:hidden; padding-top:64px;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(10,10,10,.35), rgba(10,10,10,.78) 65%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 30%, rgba(10,10,10,.9) 100%);
}
.hero__content{
  position:relative; z-index:2; max-width:var(--container); margin-inline:auto;
  padding:6rem 1.5rem 8rem;
  width:100%;
}
.hero__title{
  font-size:clamp(2.6rem, 7vw, 5.2rem); font-weight:700; line-height:1.04; letter-spacing:-.02em;
  color:#fff; margin-bottom:1.6rem; max-width:14ch;
}
.hero__sub{
  font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.6; color:var(--steel);
  max-width:46ch; margin-bottom:2.5rem;
}
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:46px; background:rgba(255,255,255,.18); overflow:hidden;
}
.hero__scroll-cue span{
  display:block; width:100%; height:14px; background:var(--gold);
  animation:scrollCue 2.2s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(-100%); } 60%{ transform:translateY(60px); } 100%{ transform:translateY(60px); }
}
@media (max-width:640px){ .hero__scroll-cue{ display:none; } }

/* ===================================================================
   2. THE PROBLEM
=================================================================== */
.problem-diagram{ margin-top:1rem; }
.problem-state{
  display:flex; align-items:center; gap:1.25rem; justify-content:center; flex-wrap:wrap;
  padding:2.4rem 1.5rem; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.85rem;
}
.problem-state--broken{ opacity:.55; }
.problem-box{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  padding:1rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius); color:#fff;
  background:var(--graphite);
}
.problem-box--end{ color:var(--steel); border-color:var(--line); background:transparent; }
.problem-box--core{
  color:var(--carbon); background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 0 rgba(184,154,74,.5);
}
.problem-state--connected.is-active .problem-box--core{
  animation:corePulse 2.4s ease-out 1;
}
@keyframes corePulse{
  0%{ box-shadow:0 0 0 0 rgba(184,154,74,.55); }
  70%{ box-shadow:0 0 0 22px rgba(184,154,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(184,154,74,0); }
}
.problem-break{ font-size:1.4rem; color:var(--steel-dim); }
.problem-line{
  width:48px; height:1px; background:linear-gradient(90deg, var(--steel-dim), var(--gold));
}
.problem-caption{
  text-align:center; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel-dim); margin-bottom:2rem;
}
.problem-caption--connected{ color:var(--gold); margin-bottom:0; }
@media (max-width:560px){
  .problem-box{ font-size:.92rem; padding:.85rem 1.1rem; }
  .problem-line{ width:24px; }
}

/* ===================================================================
   3. THE MISSING LAYER
=================================================================== */
.layer-stack{ display:flex; flex-direction:column; align-items:center; margin-top:2.5rem; }
.layer-row{
  width:100%; max-width:420px; text-align:center;
  padding:1rem 1.5rem; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-display); font-weight:500; font-size:1.02rem; color:var(--steel);
  background:var(--graphite);
}
.layer-row--core{
  color:var(--carbon); background:var(--gold); border-color:var(--gold); font-weight:700;
  animation:layerGlow 2.6s ease-in-out infinite;
}
@keyframes layerGlow{
  0%,100%{ box-shadow:0 0 14px 0 rgba(184,154,74,.35); }
  50%{ box-shadow:0 0 30px 6px rgba(184,154,74,.55); }
}
.layer-connector{ width:1px; height:26px; background:var(--line); }
.layer-connector--glow{ background:linear-gradient(180deg, var(--gold), var(--line)); }

/* ===================================================================
   4. GOVERNED BUILD — pillars
=================================================================== */
.pillars{ display:grid; gap:1rem; }
.pillar{
  background:#F0F0F0; border-radius:var(--radius);
  padding:1.6rem 1.8rem;
}
.pillar summary{
  list-style:none; display:flex; align-items:center; gap:1rem; cursor:pointer;
}
.pillar summary::-webkit-details-marker{ display:none; }
.pillar__index{ font-family:var(--font-display); color:var(--steel); font-size:.85rem; font-weight:600; }
.pillar__title{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; flex:1; }
.pillar__chevron{
  width:10px; height:10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg); transition:transform .25s var(--ease); margin-right:.3rem;
}
.pillar[open] .pillar__chevron{ transform:rotate(-135deg); }
.pillar__desc{ margin-top:1.1rem; color:var(--ink-soft); font-size:1rem; line-height:1.6; max-width:60ch; }
.pillar__list{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.pillar__list li{
  font-size:.92rem; color:var(--ink-soft); padding-left:1.1rem; position:relative;
}
.pillar__list li::before{
  content:''; position:absolute; left:0; top:.5em; width:6px; height:6px; background:var(--gold); border-radius:1px;
}

/* ===================================================================
   5. SERVICE ECOSYSTEM
=================================================================== */
.ecosystem{ position:relative; width:100%; max-width:760px; margin:2rem auto 0; aspect-ratio:760/440; }
.ecosystem__svg{ position:absolute; inset:0; width:100%; height:100%; }
.eco-line{
  stroke:var(--line); stroke-width:1.5; stroke-dasharray:600; stroke-dashoffset:600;
  transition:stroke-dashoffset 1.1s var(--ease), stroke 1.1s var(--ease);
}
.ecosystem.is-active .eco-line{ stroke-dashoffset:0; stroke:var(--gold); opacity:.55; }

.eco-node{
  position:absolute; left:calc(var(--x) / 760 * 100%); top:calc(var(--y) / 420 * 100%);
  transform:translate(-50%,-50%); width:200px; text-align:center;
  display:flex; flex-direction:column; gap:.35rem;
  opacity:0; transition:opacity .6s var(--ease) .3s;
}
.ecosystem.is-active .eco-node{ opacity:1; }
.eco-node__title{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:.98rem; }
.eco-node__desc{ font-size:.8rem; color:var(--steel); line-height:1.5; }

.eco-node--core{
  width:104px; height:104px; border-radius:50%;
  background:var(--gold); color:var(--carbon);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(184,154,74,.4), 0 0 40px rgba(184,154,74,.25);
  opacity:1;
}

@media (max-width:680px){
  .ecosystem{ aspect-ratio:760/560; }
  .eco-node{ width:150px; }
  .eco-node--core{ width:84px; height:84px; font-size:.95rem; }
  .eco-node__desc{ font-size:.74rem; }
}

/* ===================================================================
   6. ALIGN METHODOLOGY
=================================================================== */
.align{ position:relative; margin-top:1rem; padding-left:2.6rem; }
.align__rail{
  position:absolute; left:14px; top:8px; bottom:8px; width:2px; background:var(--line);
}
.align__rail-fill{
  width:100%; height:0%; background:var(--gold); transition:height .25s linear;
}
.align__step{
  position:relative; display:flex; gap:1.6rem; padding:2.1rem 0;
  border-bottom:1px solid var(--line);
}
.align__step:last-child{ border-bottom:none; }
.align__marker{ position:absolute; left:-2.6rem; top:2.1rem; }
.align__letter{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--steel-dim);
  background:var(--carbon); transition:all .35s var(--ease);
}
.align__step.is-active .align__letter{
  color:var(--carbon); background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 18px rgba(184,154,74,.5);
}
.align__body h3{
  font-size:1.3rem; font-weight:600; color:var(--steel); margin-bottom:.5rem; transition:color .35s var(--ease);
}
.align__step.is-active .align__body h3{ color:#fff; }
.align__body p{ font-size:1rem; line-height:1.65; color:var(--steel-dim); max-width:56ch; transition:color .35s var(--ease); }
.align__step.is-active .align__body p{ color:var(--steel); }

/* ===================================================================
   7. OUR CLIENTS
=================================================================== */
.clients{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1rem; }
.client-logo{
  flex:0 1 260px; min-height:110px; display:flex; align-items:center; justify-content:center;
  text-align:center; background:#F0F0F0; border-radius:var(--radius); padding:1.5rem 2rem;
}
.client-logo img{ max-height:44px; max-width:100%; width:auto; height:auto; filter:grayscale(1); opacity:.82; }
.client-logo--placeholder{
  background:transparent; border:1.5px dashed #C7CBD1;
  color:var(--steel); font-size:.82rem; font-weight:500; line-height:1.4;
}

/* ===================================================================
   8. LEADERSHIP — Founders
=================================================================== */
.leadership{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:1rem; }
.leader-card{ display:flex; flex-direction:column; gap:1.5rem; }
.leader-card__portrait{
  width:120px; height:120px; flex-shrink:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); filter:grayscale(1) contrast(1.05);
}
.leader-card__portrait svg{ width:100%; height:100%; }
.leader-card__info h3{ font-size:1.4rem; font-weight:600; color:#fff; margin-bottom:.5rem; }
.leader-card__role{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.leader-card__desc{ font-size:1rem; line-height:1.65; color:var(--steel); max-width:42ch; }

.leadership__statement{
  grid-column:1 / -1; margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line);
  font-size:1.08rem; line-height:1.75; color:var(--steel); max-width:840px;
}

@media (max-width:760px){
  .leadership{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ===================================================================
   9. FUTURE VISION
=================================================================== */
.vision{
  background:var(--carbon); color:#fff; padding:9rem 0;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.vision__statement{
  font-family:var(--font-display); font-weight:600; line-height:1.18;
  font-size:clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing:-.01em; margin-bottom:1.4rem;
}
.vision__sub{ color:var(--steel); font-size:1.05rem; }

/* ===================================================================
   FOOTER
=================================================================== */
.footer{ background:var(--carbon); border-top:1px solid var(--line); padding:3rem 0 1.75rem; color:#fff; }
.footer__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:1.5rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  padding-bottom:1.75rem; border-bottom:1px solid var(--line); margin-bottom:1.25rem;
}
.footer__logo{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.footer__logo-main{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.04em; color:#fff; }
.footer__logo-sub{ font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.24em; color:var(--gold); }
.footer__links{ display:flex; gap:2rem; flex-wrap:wrap; }
.footer__links a, .footer__location{ font-size:.88rem; color:var(--steel); }
.footer__links a:hover{ color:var(--gold); }
.footer__legal{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; font-size:.78rem; color:var(--steel-dim); }