@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@200;300;400;500;600;700;800&display=swap');

:root{
  --bg:#050607;
  --panel:rgba(255,255,255,.035);
  --panel2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --text:#ecf2ff;
  --muted:rgba(236,242,255,.68);
  --muted2:rgba(236,242,255,.52);
  --shadow: 0 22px 90px rgba(0,0,0,.55);
  --r:18px;
  --r2:28px;
  --max:1160px;
  --pad: clamp(18px, 2.4vw, 28px);
  --h1: clamp(46px, 6vw, 84px);
  --h2: clamp(28px, 3.8vw, 44px);
  --h3: 18px;
  --p: 16px;
  --accent: #4cf309;

  --heroFont: "Ponypocket","Be Vietnam Pro",system-ui,sans-serif;
  --headFont: "Mortend","Be Vietnam Pro",system-ui,sans-serif;
  --bodyFont: "Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--bodyFont);}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
::selection{background:rgba(76,243,9,.25)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
@media (max-width: 900px){ .grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns:repeat(2,1fr)} }

/* Response.events-like wash: dark + green energy */
.bg-wash{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:
    radial-gradient(820px 520px at 18% 12%, rgba(76,243,9,.18), transparent 62%),
    radial-gradient(760px 520px at 84% 18%, rgba(76,243,9,.10), transparent 64%),
    linear-gradient(180deg, #050607, #070a0d);
}
.noise{
  position:fixed; inset:-20%; pointer-events:none; z-index:-1;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.09; transform:translateZ(0);
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,6,7,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.02em}
.logoMark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg, rgba(76,243,9,.28), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.brand strong{font-family:var(--headFont);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.16em}
.brand span{color:var(--muted2);font-size:13px}

.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:rgba(236,242,255,.86);
  font-size:13px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18)}
.pill.primary{
  background:linear-gradient(135deg, rgba(76,243,9,.95), rgba(255,255,255,.85));
  color:#050607;border-color:transparent;
  font-family:var(--heroFont);
}
.pill.primary:hover{transform:translateY(-1px) scale(1.01)}

/* Type */
.kicker{
  font-family:var(--headFont);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:12px;
  color:rgba(236,242,255,.72);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker:before{content:""; width:34px; height:1px; background:linear-gradient(90deg, rgba(76,243,9,.95), rgba(76,243,9,0));}

h1{font-family:var(--heroFont);font-size:var(--h1);line-height:.90;margin:14px 0 8px;letter-spacing:-.02em}
h2{font-family:var(--heroFont);font-size:var(--h2);letter-spacing:-.01em;margin:0 0 10px}
h3{font-family:var(--headFont);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin:0 0 10px;color:rgba(236,242,255,.84)}
p{font-size:var(--p);line-height:1.6;color:var(--muted);max-width:860px;margin:0}

/* Sections / cards */
.hero{padding: clamp(70px, 11vw, 130px) 0 34px}
.heroCenter{text-align:left}
.heroGrid{margin-top:28px;align-items:stretch}
.heroCopy{grid-column:1 / span 7}
.heroMedia{grid-column:8 / span 5}
@media (max-width: 900px){ .heroCopy{grid-column:1 / span 12} .heroMedia{grid-column:1 / span 12} .heroCenter{text-align:left} }

.card{
  border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow:var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.card:before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 12%, rgba(76,243,9,.18), transparent 62%),
    radial-gradient(520px 260px at 82% 18%, rgba(76,243,9,.10), transparent 64%);
  opacity:.95; pointer-events:none;
}
.card > *{position:relative}
.mediaBox{
  aspect-ratio: 16 / 10;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.38);
  overflow:hidden;
}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge{padding:9px 12px;border-radius:999px;font-size:13px;color:rgba(236,242,255,.78);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);}

.section{padding:58px 0}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sectionHead p{max-width:640px}

.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.c4{grid-column:span 4}
.c6{grid-column:span 6}
.c12{grid-column:span 12}
@media (max-width: 900px){ .c4,.c6{grid-column:span 12} }

.tile{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:18px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  min-height:136px;
}
.tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}
.tile ul{margin:10px 0 0 18px;color:var(--muted2)}
.tile li{margin:6px 0}

/* Horizontal carousel like "Making magic happen" */
.carousel{
  display:flex; gap:18px; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x mandatory;
}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}
.slide{
  min-width: min(380px, 86vw);
  scroll-snap-align:start;
}

/* Tables */
.specTable{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:12px}
.specTable td{padding:14px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);}
.specTable tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px;color:rgba(236,242,255,.80);width:34%}
.specTable tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px;color:rgba(236,242,255,.70)}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.faq details{grid-column:span 6;border-radius:var(--r);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);padding:16px 16px}
@media (max-width: 900px){ .faq details{grid-column:span 12} }
.faq summary{cursor:pointer;list-style:none;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 0 42px;margin-top:40px}
.footerGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
@media (max-width: 900px){ .footerGrid{grid-template-columns:1fr} }
.footer small{color:var(--muted2);line-height:1.6}
.socials a{margin-right:12px;opacity:.85}
.socials a:hover{opacity:1}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:translateY(0)}