/* ===== Tokens ===== */
:root{
  --bg:#121013;
  --bg-alt:#18151a;
  --surface:#201c23;
  --line: rgba(255,255,255,0.09);
  --text:#f3f0ec;
  --text-dim:#b6b0b8;
  --purple:#8c3aa8;
  --purple-light:#c473e0;
  --purple-dark:#33163e;
  --steel:#9a9ea5;
  --steel-dark:#4d4f54;
  --display: "Anton", Impact, sans-serif;
  --body: "Inter", -apple-system, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--purple-light);
  margin-bottom:.9rem;
}

h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
}

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(18,16,19,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{display:flex; align-items:center; gap:.6rem;}
.nav-logo{width:34px; height:34px; object-fit:contain;}
.nav-word{font-family:var(--display); font-size:1rem; letter-spacing:.03em;}
.nav-word b{color:var(--purple-light); font-weight:400;}
.nav-links{display:flex; align-items:center; gap:2rem;}
.nav-links a{font-size:.9rem; color:var(--text-dim); transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  font-family:var(--mono); font-size:.8rem !important;
  color:var(--purple-light) !important; border:1px solid var(--purple);
  padding:.5rem 1rem; border-radius:2px;
}
.nav-cta:hover{background:var(--purple); color:var(--text) !important;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem;}
.nav-toggle span{width:22px; height:2px; background:var(--text);}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:6rem 1.5rem 3rem;
  overflow:hidden;
}
.hero-tri{
  position:absolute; top:50%; left:50%;
  width:min(1000px, 140vw);
  transform:translate(-50%,-52%);
  opacity:.16;
  z-index:0;
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; max-width:760px; display:flex; flex-direction:column; align-items:center;}
.hero-logo{width:96px; height:auto; margin-bottom:1.6rem; filter:drop-shadow(0 8px 24px rgba(140,58,168,.35));}
.hero h1{font-size:clamp(2.4rem, 7vw, 4.6rem); margin-bottom:1.3rem;}
.hero h1 span{
  display:block;
  background:linear-gradient(90deg, var(--purple-light), var(--steel));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(1.4rem, 3.4vw, 2.2rem);
  letter-spacing:.04em;
  margin-top:.4rem;
}
.hero-sub{color:var(--text-dim); font-size:1.05rem; max-width:560px; margin:0 auto 2.2rem;}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}
.hero-actions.center{justify-content:center; margin-top:2.2rem;}

.btn{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.03em;
  padding:.95rem 1.8rem; border-radius:2px; transition:all .2s ease; display:inline-block;
}
.btn-primary{background:var(--purple); color:#fff;}
.btn-primary:hover{background:var(--purple-light); color:#161116;}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--steel); background:var(--surface);}

.hero-stats{
  position:relative; z-index:2;
  display:flex; gap:clamp(1.5rem,5vw,4rem);
  margin-top:4rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.stat{text-align:center;}
.stat span{
  font-family:var(--display); font-size:2rem;
  background:linear-gradient(180deg, var(--text), var(--steel));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat p{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-top:.3rem;}

/* ===== Sections ===== */
.section{padding:6.5rem 1.5rem;}
.section-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-inner{max-width:1100px; margin:0 auto;}
.section-head{margin-bottom:2.5rem;}
.section-head.center{text-align:center;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);}
.section-body p{color:var(--text-dim); margin-bottom:1.1rem; max-width:520px;}
.section h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.2rem;}
.section p{color:var(--text-dim); margin-bottom:1.1rem; max-width:520px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
.grid-2.reverse{align-items:center;}

/* ===== Cards (angular, echoing the triangle motif) ===== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:2.2rem 1.8rem;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-6px); border-color:var(--purple);}
.card-tag{font-family:var(--mono); color:var(--purple-light); font-size:.8rem;}
.card h3{font-size:1.3rem; margin:.9rem 0 .8rem; color:var(--text);}
.card p{font-size:.92rem; margin:0;}

/* ===== Belt visual ===== */
.belt-block{display:flex; flex-direction:column; align-items:center; gap:1rem;}
.belt{
  width:100%; max-width:340px; height:70px;
  background:#151215;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding-right:22px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 70%);
}
.belt .stripe{width:11px; height:100%; background:linear-gradient(180deg,#fff,#d9d9d9);}
.belt-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--text-dim);}

/* ===== Schedule ===== */
.schedule-card{
  max-width:620px; margin:0 auto 1.5rem;
  border:1px solid var(--line);
  background:var(--surface);
}
.schedule-row{
  display:grid; grid-template-columns:80px 100px 1fr;
  align-items:center;
  padding:1.3rem 1.6rem;
  font-family:var(--mono);
}
.schedule-row + .schedule-row{border-top:1px solid var(--line);}
.schedule-day{color:var(--purple-light); font-weight:700; letter-spacing:.06em;}
.schedule-time{color:var(--text-dim); font-size:.85rem;}
.schedule-place{font-size:.9rem;}
.schedule-note{text-align:center; max-width:560px; margin:0 auto; color:var(--text-dim); font-size:.92rem;}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line); padding:3.5rem 1.5rem 2rem; background:var(--bg-alt);}
.footer-inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:1.4rem; margin-bottom:2rem;}
.footer-logo{width:48px;}
.footer-title{font-family:var(--display); font-size:1.1rem; margin-bottom:.3rem;}
.footer-text p{color:var(--text-dim); font-size:.88rem; margin:0;}
.footer-text a{color:var(--purple-light); font-family:var(--mono); font-size:.85rem;}
.footer-copy{max-width:1100px; margin:0 auto; font-size:.78rem; color:var(--text-dim); border-top:1px solid var(--line); padding-top:1.5rem;}

/* ===== Responsive ===== */
@media (max-width:860px){
  .nav-links{
    position:fixed; top:63px; right:0; left:0; background:var(--bg);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    transform:translateY(-140%); transition:transform .3s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{width:100%; padding:1rem 1.5rem; border-top:1px solid var(--line);}
  .nav-cta{margin:1rem 1.5rem; text-align:center; border-radius:2px;}
  .nav-toggle{display:flex;}
  .grid-2{grid-template-columns:1fr; gap:2.5rem;}
  .grid-2.reverse{flex-direction:column;}
  .cards{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap; row-gap:1.5rem;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}