:root {
  --ink: #f7f8f7;
  --background: #090b10;
  --panel: #12161f;
  --muted: #9ca6b4;
  --lime: #91f73a;
  --line: #252b36;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--background); color: var(--ink); font-family: "DM Sans", sans-serif; }
.page-glow { position: absolute; top: -250px; right: -250px; width: 720px; height: 720px; background: radial-gradient(circle, #263846 0%, transparent 64%); pointer-events: none; }
.wrap { position: relative; max-width: 1180px; margin: auto; padding: 0 28px; }

nav { display: flex; align-items: center; justify-content: space-between; height: 100px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; }
.brand img { width: 116px; height: 68px; object-fit: contain; }
.links { display: flex; gap: 32px; color: #c8d0d9; font-size: 14px; }
a { color: inherit; text-decoration: none; }
.links  a:hover  { color: var(--lime); }
.nav-action, .cta { border: 0; border-radius: 9px; padding: 12px 19px; cursor: pointer; background: var(--lime); color: #10170d; font: 700 14px "DM Sans", sans-serif; transition: transform .2s, box-shadow .2s; }
.nav-action:hover, .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #91f73a35; }
.language-switcher { display: flex; align-items: center; gap: 8px; color: #c8d0d9; font-size: 14px; }
.language-switcher  a:hover  { color: var(--lime); }


.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 55px; padding: 84px 0 97px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
h1 { margin: 17px 0 23px; font: 800 clamp(53px, 6.6vw, 78px) /.94 Outfit, sans-serif; letter-spacing: -3.4px; }
h1 em { color: var(--lime); font-style: normal; }
.hero p { max-width: 505px; margin: 0 0 30px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 15px; }
.cta { padding: 15px 21px; }
.cta span { margin-left: 4px; font-size: 19px; }
.note { color: var(--muted); font-size: 13px; }
.showcase { position: relative; padding: 20px; border: 1px solid #29323e; border-radius: 20px; background: linear-gradient(140deg, #19202c, #0d1016); box-shadow: 22px 25px 0 #151b22; }
.showcase img { display: block; width: 100%; border-radius: 11px; }
.preview-label { position: absolute; z-index: 1; top: 1px; right: 10px; padding: 7px 11px; border-radius: 5px; transform: translateY(-50%); background: var(--lime); color: #11170e; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

.section { padding: 74px 0; }
.feature-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 33px; }
.feature-head h2, .invite h2 { margin: 13px 0 0; font: 700 42px / 1 Outfit, sans-serif; letter-spacing: -1.8px; }
.feature-head p { max-width: 360px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; min-height: 255px; padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); transition: transform .2s, border .2s; }
.card:hover { border-color: #4c6f40; transform: translateY(-5px); }
.number { position: absolute; top: 19px; right: 21px; color: #58616d; font-size: 12px; font-weight: 700; }
.icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: #202936; color: var(--lime); font-size: 25px; }
.card h3 { margin: 52px 0 9px; font: 700 22px Outfit, sans-serif; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.invite { position: relative; display: flex; align-items: center; min-height: 280px; margin: 38px 0 74px; padding: 51px 55px; border: 1px solid #263129; border-radius: 22px; background: radial-gradient(circle at 80% 20%, #23351c 0%, transparent 33%), #111712; }
.invite h2 { margin-top: 15px; font-size: 40px; }
.invite p { margin: 10px 0 0; color: #a9b5a8; }
.access-trigger { position: absolute; top: 50%; right: 55px; margin: 0; transform: translateY(-50%); }
.access-trigger:hover { transform: translateY(calc(-50% - 2px)); }
.access-trigger[hidden] { display: none !important; }
.inline-signup { display: none; width: min(510px, 100%); margin-top: 25px; }
.inline-signup.is-visible {
  position: absolute;
  top: 50%;
  right: 55px;
  display: block;
  margin: 0;
  transform: translateY(-50%);
}
.inline-signup label { display: block; margin-bottom: 8px; color: #cbd3dc; font-size: 12px; font-weight: 700; }
.form-row { display: flex; gap: 10px; }
.form-row input { flex: 1; min-width: 0; padding: 14px; border: 1px solid #384451; border-radius: 8px; outline: none; background: #0d1118; color: white; font: 14px "DM Sans", sans-serif; }
.form-row input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px #91f73a1e; }
.form-row button { border: 0; border-radius: 8px; padding: 0 18px; cursor: pointer; background: var(--lime); color: #10170d; font: 700 14px "DM Sans", sans-serif; }
.form-message { min-height: 18px; margin-top: 10px; color: var(--lime); font-size: 13px; font-weight: 700; }

footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 36px; border-top: 1px solid var(--line); color: #7d8793; font-size: 12px; }
footer img { width: 82px; height: 48px; object-fit: contain; }

@media (max-width: 800px) {
  .links { display: none; }
  .hero { grid-template-columns: 1fr; padding: 55px 0 74px; }
  .showcase { max-width: 670px; margin: auto; }
  .feature-head { display: block; }
  .feature-head p { margin-top: 20px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 200px; }
  .card h3 { margin-top: 35px; }
  .invite { display: block; min-height: 0; padding: 38px 27px; }
  .access-trigger { position: static; display: block; margin: 25px auto 0; transform: none; }
  .access-trigger:hover { transform: translateY(-2px); }
  .inline-signup.is-visible { position: static; margin-top: 25px; transform: none; }
}

@media (max-width: 450px) {
  .wrap { padding: 0 19px; }
  .hero { gap: 45px; }
  h1 { letter-spacing: -2.5px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .showcase { padding: 10px; box-shadow: 10px 12px 0 #151b22; }
  .feature-head h2, .invite h2 { font-size: 35px; }
  .form-row { flex-direction: column; }
  .form-row button { height: 47px; }
  footer span { max-width: 180px; text-align: right; }
}