@font-face{font-family:"Mortend";src:url("fonts/Mortend-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Ponypocket";src:url("fonts/Ponypocket.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root{
  --green:#4cf309;
  --bg:#050607;
  --ink:#0a0b0c;
  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --muted2:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.14);
  --max:1180px;
  --pad: clamp(18px, 2.8vw, 60px);
  --shadow: 0 28px 120px rgba(0,0,0,.55);
  --ease: cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

/* HEADER */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.header::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:74px;
  background: radial-gradient(680px 60px at 78% 30px, rgba(76,243,9,.34), transparent 60%);
  filter: blur(12px);
  opacity:.95;
  pointer-events:none;
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);position:relative;}
.brand{display:flex;align-items:center;gap:14px;min-width:220px}
.wordmark{height:22px;width:auto}
.brand .sub{font-size:12px;color:rgba(255,255,255,.55);}

.nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .18s var(--ease)}
.nav a:hover{color:#fff}
.cta{
  border:2px solid var(--green);
  padding:8px 18px;border-radius:999px;
  font-family:"Mortend";letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.cta:hover{background:rgba(76,243,9,.08);box-shadow:0 0 0 3px rgba(76,243,9,.08);}

/* HERO */
.hero{min-height:92vh;padding-top:90px;position:relative;overflow:hidden;}
.heroMedia{position:absolute; inset:0;background:url("img/hero.webp") center/cover no-repeat;filter:saturate(.92) contrast(1.05);transform:translateY(var(--parallax, 0px));}
.heroOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 14%, rgba(76,243,9,.20), transparent 60%),
    radial-gradient(760px 540px at 84% 18%, rgba(76,243,9,.10), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.88) 70%, rgba(0,0,0,1));
}
.heroAsterisk{
  position:absolute;
  right: -80px;
  bottom: -120px;
  width: min(520px, 60vw);
  opacity: .85;
  filter: blur(.2px) drop-shadow(0 40px 120px rgba(76,243,9,.18));
  transform: translateY(var(--asteriskY, 0px));
  pointer-events:none;
}
.hero .wrap{position:relative; padding:110px var(--pad) 90px;}

.h1{font-family:"Mortend";text-transform:uppercase;font-size:clamp(40px, 5.4vw, 84px);line-height:.90;margin:0;}
.h1 .green{color:var(--green)}

.heroCopy{
  margin-top:34px; max-width:760px;
  font-family:"Mortend";text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(14px, 1.35vw, 18px);
  line-height:1.25;
}
.heroCopy .green{color:var(--green)}
.heroSmall{margin-top:0px; max-width:760px; color:rgba(255,255,255,.72);font-size:14px; line-height:1.55;}

.heroGrid{margin-top:34px;display:grid; grid-template-columns: .9fr 1.1fr; gap:28px;align-items:center;}
@media (max-width: 900px){ .heroGrid{margin-top:34px;display:grid; grid-template-columns: .9fr 1.1fr; gap:28px;align-items:center;} .nav{display:none} .heroAsterisk{right:-120px;bottom:-160px;} }

.videoCard{border-radius:22px;border:1px solid rgba(255,255,255,.14);overflow:hidden;background:rgba(0,0,0,.45);box-shadow: var(--shadow);max-width:560px;margin-left:auto;aspect-ratio:1/1;}
.videoCard .bar{display:flex; justify-content:space-between; align-items:center;padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.10);}
.pill{display:inline-flex; align-items:center; gap:10px;padding:8px 12px; border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:12px; color:rgba(255,255,255,.85);}
.pill b{color:#fff;font-weight:800;}
.videoCard video{width:100%;height:100%;object-fit:cover;display:block;}

/* REVEAL */
.reveal{opacity:0; transform:translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* BIG SECTION TITLE */
.section{padding:96px 0;}
.section.white{background:#ffffff;color:#0a0b0c;}
.sectionTitle{font-family:"Mortend"; text-transform:uppercase;font-size:clamp(34px, 4.4vw, 58px);margin:0;}
.hr{display:none;}

/* ACCORDION */
.accordion{margin-top:26px;}
.acItem{border-top:1px solid rgba(0,0,0,.25); padding:22px 0;}
.acHead{display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;}
.acHead span{font-family:"Mortend"; text-transform:uppercase; letter-spacing:.05em; font-size:18px;}
.acPlus{font-size:28px; line-height:1; color:#0a0b0c; transition: transform .18s var(--ease);}
.acItem.open .acPlus{transform: rotate(45deg);}
.acBody{max-height:0; overflow:hidden; transition:max-height .28s var(--ease);}
.acBodyInner{padding:14px 0 0; display:grid; grid-template-columns: 1fr; gap:14px;}
@media (max-width: 900px){ .acBodyInner{grid-template-columns:1fr} }
.acBody p{margin:0; color:rgba(0,0,0,.68); line-height:1.6;}
.acTags{display:flex; flex-wrap:wrap; gap:10px;}
.tag{border:1px solid rgba(0,0,0,.18); padding:7px 10px; border-radius:999px; font-size:12px; color:rgba(0,0,0,.72);}

/* BAND + SLIDER */
.band{background:rgba(76,243,9,.18);color:#0a0b0c;padding:80px 0;}
.band .wrap{display:grid; grid-template-columns: 1fr; gap:28px; align-items:start;}
@media (max-width: 900px){ .band .wrap{grid-template-columns:1fr} }
.band h2{margin:0; font-family:"Mortend"; text-transform:uppercase; font-size:clamp(34px, 4.6vw, 62px);}
.band p{margin:0; color:rgba(0,0,0,.70); line-height:1.6;}
.slider{margin-top:26px;display:flex; gap:14px; overflow:auto; padding-bottom:10px; scroll-snap-type:x mandatory;}
.slide{min-width:min(420px, 86vw);background:#0a0b0c;color:#fff;border-radius:20px;padding:18px;border:1px solid rgba(255,255,255,.10);scroll-snap-align:start;}
.slide h3{margin:0 0 10px; font-family:"Mortend"; text-transform:uppercase; letter-spacing:.05em; font-size:18px;}
.slide p{margin:0; color:rgba(255,255,255,.72); line-height:1.55;}
.slide .badgeRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.badge{background:rgba(76,243,9,.16); border:1px solid rgba(76,243,9,.35); color:#d9ffd0; padding:7px 10px; border-radius:999px; font-size:12px}

/* CONTACT */
.contact{background:#2a2a2a; padding:96px 0;}
.contactGrid{display:grid; grid-template-columns: 1fr; gap:28px; align-items:start;}
@media (max-width: 900px){ .contactGrid{grid-template-columns:1fr} }
.contact h2{margin:0; font-family:"Mortend"; text-transform:uppercase; font-size:clamp(34px, 4.6vw, 58px);}
.contact p{color:rgba(255,255,255,.78); line-height:1.7;}
.fieldRow{display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 640px){ .fieldRow{grid-template-columns:1fr} }
input, textarea{width:100%;background:#d9d9d9;border:0;border-radius:8px;padding:14px 14px;font-size:14px;outline:none;}
textarea{min-height:160px; resize:vertical;}
.btn{margin-top:16px;width:100%;border:0;border-radius:10px;padding:16px 18px;background:var(--green);color:#0a0b0c;font-family:"Mortend";text-transform:uppercase;letter-spacing:.08em;cursor:pointer;}
.btn:hover{filter:brightness(.97);}

/* FOOTER */
.footer{background:#000;border-top:1px solid rgba(255,255,255,.12);padding:56px 0;}
.footerGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start;}
@media (max-width: 900px){ .footerGrid{grid-template-columns:1fr} .footerRight{justify-self:start;} }
.footer small{color:rgba(255,255,255,.62); line-height:1.6;}
.iconRow{display:flex; gap:10px; margin-top:14px;}
.icon{width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.08); display:grid; place-items:center;}
.icon svg{width:15px;height:15px;fill:#fff;opacity:.9}
.icon:hover{background:rgba(255,255,255,.12)}


/* Anchor offsets for fixed header */
section[id]{scroll-margin-top:110px;}
/* Contact card (no form) */
.contactCard{
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 28px 120px rgba(0,0,0,.35);
}
.contactCardTitle{
  font-family: "Mortend";
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 16px;
  margin-bottom: 12px;
}
.contactCardBody{
  display: grid;
  gap: 12px;
}
.contactLink{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.contactLink:hover{
  background: rgba(76,243,9,.08);
  border-color: rgba(76,243,9,.22);
}
.contactLink b{
  font-family: "Mortend";
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dot{
  width:10px;height:10px;border-radius:999px;background: var(--green);
  box-shadow: 0 0 24px rgba(76,243,9,.45);
}
.contactCardNote{
  margin-top: 14px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.6;
}

/* Hero title: keep exactly 2 lines on desktop */
.h1 .line1, .h1 .line2{display:inline-block; white-space:nowrap;}
@media (max-width: 520px){
  .h1 .line2{white-space:normal;} /* allow wrap on very small screens */
}

.footerRight{justify-self:end;text-align:right;}
.footerWordmark{height:24px;width:auto;display:block;}
.footerBrand{display:flex;align-items:center;gap:12px;}

.section.white{padding-top:70px;}
/* Video expand button */
.videoCard{position:relative;}
.videoExpandBtn{
  position:absolute;
  top:10px; right:10px;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.videoExpandBtn:hover{
  border-color: rgba(76,243,9,.30);
  background: rgba(76,243,9,.10);
}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:9999;}
.modal.isOpen{display:block;}
.modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,.72);}
.modalPanel{
  position:relative;
  width:min(1100px, calc(100vw - 28px));
  margin: 72px auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.65);
  box-shadow: 0 40px 180px rgba(0,0,0,.6);
  overflow:hidden;
}
.modalClose{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.modalClose:hover{border-color: rgba(76,243,9,.30); background: rgba(76,243,9,.10);}
.modalMedia{
  aspect-ratio: 16 / 9;
  background:#000;
}
.modalMedia iframe, .modalMedia video{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
@media (max-width: 700px){
  .modalPanel{margin: 56px auto;}
  .modalMedia{aspect-ratio: 1 / 1;}
}

/* Mobile: show video first (Option B) */
@media (max-width: 900px){
  .hero{min-height:auto; padding:110px 0 56px;}
  .heroGrid{grid-template-columns:1fr !important; gap:22px;}
  .videoCard{order:1; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1/1;}
  .heroText{order:2;}
  /* keep headline punchy but leave room for video */
  .h1{font-size:clamp(36px, 11vw, 64px);}
}
/* Mobile hero tighten (reduce gap under header) */
@media (max-width: 900px){
  .hero{padding-top:64px !important; padding-bottom:46px !important;}
  .heroGrid{gap:14px !important; margin-top:0px !important;}
  .videoCard{margin-top:0 !important;}
}

/* Remove extra rule above first accordion item */
.acItem:first-child{border-top:none;}
/* Fix mobile hero top gap: the global .wrap padding applies inside hero; control it explicitly */
.hero > .wrap{padding-top:92px !important; padding-bottom:72px !important;}
@media (max-width: 900px){
  .hero{padding-top:0 !important; padding-bottom:0 !important;}
  .hero > .wrap{padding-top:64px !important; padding-bottom:44px !important;}
}
/* iOS safe-area: nudge down slightly if needed, but avoid huge empty space */
@supports (padding: max(0px)){
  @media (max-width: 900px){
    .hero > .wrap{padding-top: max(56px, env(safe-area-inset-top)) !important;}
  }
}