:root{

  --bg: #07070a;

  --panel: rgba(255,255,255,0.06);

  --panel-2: rgba(255,255,255,0.085);

  --text: rgba(255,255,255,0.92);

  --muted: rgba(255,255,255,0.68);

  --muted2: rgba(255,255,255,0.55);

  --border: rgba(255,255,255,0.12);

  --accent: #d6b25e; /* gold-ish */

  --accent2: #f3e3b1;

  --shadow: 0 18px 60px rgba(0,0,0,0.55);

  --radius: 18px;

  --radius2: 26px;

  --max: 1120px;

}



*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: var(--text);

  background: var(--bg);

  line-height: 1.55;

}



.bg{

  position: fixed;

  inset: 0;

  background:

    radial-gradient(1200px 700px at 15% 12%, rgba(214,178,94,0.18), transparent 55%),

    radial-gradient(900px 700px at 80% 28%, rgba(120,170,255,0.10), transparent 55%),

    radial-gradient(1000px 700px at 50% 85%, rgba(214,178,94,0.10), transparent 60%),

    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),

    radial-gradient(1400px 900px at 50% 10%, rgba(0,0,0,0.0), rgba(0,0,0,0.65) 70%);

  pointer-events: none;

  z-index: -1;

}



.container{

  width: min(var(--max), calc(100% - 40px));

  margin: 0 auto;

}



.muted{ color: var(--muted); }

a{ color: inherit; text-decoration: none; }

a.link{ color: var(--muted); }

a.link:hover{ color: var(--text); }



.btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 12px 16px;

  border-radius: 999px;

  border: 1px solid var(--border);

  background: transparent;

  color: var(--text);

  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;

  user-select: none;

  white-space: nowrap;

}

.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }

.btn:active{ transform: translateY(0px); }



.btn-primary{

  background: linear-gradient(180deg, rgba(214,178,94,0.95), rgba(214,178,94,0.78));

  color: #111;

  border-color: rgba(214,178,94,0.40);

  box-shadow: 0 16px 45px rgba(214,178,94,0.22);

}

.btn-primary:hover{

  box-shadow: 0 18px 55px rgba(214,178,94,0.28);

}



.btn-secondary{

  background: rgba(255,255,255,0.08);

  border-color: rgba(255,255,255,0.14);

}

.btn-ghost{

  background: transparent;

  border-color: rgba(255,255,255,0.16);

}

.btn-ghost:hover{ background: rgba(255,255,255,0.06); }



.site-header{

  position: sticky;

  top: 0;

  z-index: 10;

  backdrop-filter: blur(14px);

  background: rgba(7,7,10,0.55);

  border-bottom: 1px solid rgba(255,255,255,0.08);

}



.nav{

  display: grid;

  grid-template-columns: 1fr auto auto;

  align-items: center;

  padding: 14px 0;

  gap: 18px;

}



/* Add this (or replace the old .brand-mark rules) */

.brand-logo{

  width: 40px;

  height: 40px;

  object-fit: contain;

  border-radius: 12px; /* optional: remove if you want square/transparent */

  border: 1px solid rgba(255,255,255,0.12); /* optional */

  background: rgba(255,255,255,0.07); /* optional */

  box-shadow: 0 10px 30px rgba(0,0,0,0.35); /* optional */

}







.brand{

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 180px;

}

.brand-mark{

  width: 40px;

  height: 40px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  font-weight: 800;

  background: rgba(255,255,255,0.07);

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

}

.brand-name{

  font-weight: 700;

  letter-spacing: 0.2px;

}



.nav-links{

  display: flex;

  gap: 16px;

  align-items: center;

}

.nav-links a{

  color: var(--muted);

  font-weight: 600;

  font-size: 14px;

}

.nav-links a:hover{ color: var(--text); }



.nav-cta{

  display: flex;

  gap: 12px;

  align-items: center;

}



.nav-toggle{

  display: none;

  width: 42px;

  height: 42px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.06);

  cursor: pointer;

}

.nav-toggle span{

  display: block;

  width: 18px;

  height: 2px;

  background: rgba(255,255,255,0.85);

  margin: 4px auto;

  border-radius: 2px;

}



.mobile-menu{

  display: none;

  padding: 14px 20px 18px;

  border-top: 1px solid rgba(255,255,255,0.08);

  background: rgba(7,7,10,0.75);

  backdrop-filter: blur(14px);

}

.mobile-menu[hidden]{

  display: none !important;

}

.mobile-menu a{

  display: block;

  padding: 10px 0;

  color: var(--muted);

  font-weight: 600;

}

.mobile-menu a:hover{ color: var(--text); }

.mobile-menu .btn{ margin-top: 10px; width: 100%; }



.hero{

  padding: 70px 0 34px;

}

.hero-grid{

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 34px;

  align-items: start;

}



.kicker{

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-weight: 700;

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(255,255,255,0.72);

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.05);

  padding: 10px 14px;

  border-radius: 999px;

}



h1{

  margin: 16px 0 12px;

  font-family: "Source Serif 4", ui-serif, Georgia, serif;

  font-size: clamp(38px, 4.6vw, 58px);

  line-height: 1.05;

  letter-spacing: -0.02em;

}

.accent{ color: var(--accent2); }



.subhead{

  margin: 0;

  max-width: 52ch;

  color: var(--muted);

  font-size: 16px;

}



.hero-actions{

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 22px;

}



.trust{

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 18px;

}

.pill{

  padding: 9px 12px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.10);

  background: rgba(255,255,255,0.05);

  color: rgba(255,255,255,0.76);

  font-size: 13px;

}



.card{

  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: var(--radius2);

  box-shadow: var(--shadow);

  overflow: hidden;

}

.card-top{

  display: flex;

  justify-content: space-between;

  gap: 14px;

  padding: 16px 18px;

  border-bottom: 1px solid rgba(255,255,255,0.10);

  background: rgba(0,0,0,0.16);

}

.tag{

  display: inline-flex;

  padding: 6px 10px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 12px;

  color: rgba(255,255,255,0.80);

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.06);

}

.card-body{ padding: 18px; }

.card-body h3{

  margin: 0 0 8px;

  font-size: 18px;

}

.specs{

  list-style: none;

  padding: 0;

  margin: 14px 0 16px;

  display: grid;

  gap: 10px;

}

.specs li{

  display: flex;

  justify-content: space-between;

  gap: 12px;

  border: 1px solid rgba(255,255,255,0.10);

  background: rgba(255,255,255,0.05);

  padding: 10px 12px;

  border-radius: 14px;

}

.specs li span:first-child{ color: var(--muted2); }



.section{

  padding: 58px 0;

}

.section-head{

  margin-bottom: 18px;

}

.section-head h2{

  margin: 0 0 8px;

  font-family: "Source Serif 4", ui-serif, Georgia, serif;

  font-size: 34px;

  letter-spacing: -0.01em;

}

.section-head p{ margin: 0; }



.video{

  border-radius: var(--radius2);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.04);

  box-shadow: var(--shadow);

}

.video iframe{

  width: 100%;

  aspect-ratio: 16/9;

  border: 0;

  display: block;

}



.cards{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

}

.mini-card{

  padding: 18px;

  border-radius: var(--radius2);

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.05);

}

.mini-card h3{

  margin: 0 0 6px;

  font-size: 18px;

}

.mini-card p{ margin: 0; }

.mini-card-action{

  margin-top: 16px;

}

.apps-grid{

  grid-template-columns: repeat(2, 1fr);

}


.featured{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 22px;

  align-items: center;

}

.poster{

  position: relative;

  border-radius: var(--radius2);

  border: 1px solid rgba(255,255,255,0.12);

  background:

    radial-gradient(800px 360px at 20% 25%, rgba(214,178,94,0.25), transparent 55%),

    radial-gradient(700px 400px at 80% 65%, rgba(120,170,255,0.12), transparent 55%),

    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

  height: 420px;

  box-shadow: var(--shadow);

  overflow: hidden;

}

.poster-glow{

  position: absolute;

  inset: -60px;

  background: radial-gradient(circle at 30% 20%, rgba(214,178,94,0.18), transparent 60%);

  filter: blur(10px);

}

.poster-img {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

}



.poster-img img {

    max-width: 100%;

    height: auto;

    display: block;

}

.poster-text{

  position: absolute;

  left: 18px;

  right: 18px;

  bottom: 16px;

  padding: 14px 14px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(0,0,0,0.30);

  backdrop-filter: blur(10px);

}

.poster-title{

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(255,255,255,0.70);

  font-weight: 800;

}

.poster-sub{

  margin-top: 6px;

  font-weight: 800;

  font-size: 18px;

}



.featured-copy h2{

  margin: 0 0 10px;

  font-family: "Source Serif 4", ui-serif, Georgia, serif;

  font-size: 38px;

  letter-spacing: -0.01em;

}

.bullets{ margin: 16px 0 18px; display: grid; gap: 10px; }

.bullet{ display: flex; align-items: flex-start; gap: 10px; }

.dot{

  width: 10px; height: 10px; border-radius: 999px;

  background: rgba(214,178,94,0.85);

  margin-top: 7px;

  flex: 0 0 auto;

}

.featured-actions{ display: flex; gap: 12px; flex-wrap: wrap; }



.steps{

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

}

.step{

  padding: 18px;

  border-radius: var(--radius2);

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.05);

}

.step-num{

  width: 38px; height: 38px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-weight: 900;

  color: #111;

  background: linear-gradient(180deg, rgba(214,178,94,0.95), rgba(214,178,94,0.78));

  box-shadow: 0 18px 45px rgba(214,178,94,0.18);

  margin-bottom: 12px;

}

.step h3{ margin: 0 0 6px; font-size: 18px; }

.step p{ margin: 0; }



.cta-band{

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 18px;

  padding: 22px;

  border-radius: var(--radius2);

  border: 1px solid rgba(255,255,255,0.12);

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));

  box-shadow: var(--shadow);

}

.cta-band h2{

  margin: 0 0 6px;

  font-family: "Source Serif 4", ui-serif, Georgia, serif;

  font-size: 32px;

}

.cta-band p{ margin: 0; }



.contact-grid{

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 24px;

  align-items: start;

}

.contact-copy{

  margin-bottom: 0;

}

.contact-form{

  display: grid;

  gap: 16px;

  padding: 22px;

  border-radius: var(--radius2);

  border: 1px solid rgba(255,255,255,0.12);

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));

  box-shadow: var(--shadow);

}

.contact-fields{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.contact-field{

  display: grid;

  gap: 8px;

}

.contact-field label{

  color: rgba(255,255,255,0.82);

  font-weight: 700;

  font-size: 14px;

}

.contact-field input,
.contact-field textarea{

  width: 100%;

  border: 1px solid rgba(255,255,255,0.14);

  border-radius: 14px;

  background: rgba(0,0,0,0.24);

  color: var(--text);

  font: inherit;

  padding: 12px 14px;

  outline: none;

}

.contact-field textarea{

  resize: vertical;

  min-height: 150px;

}

.contact-field input:focus,
.contact-field textarea:focus{

  border-color: rgba(214,178,94,0.70);

  box-shadow: 0 0 0 4px rgba(214,178,94,0.14);

}

.contact-question{

  max-width: 320px;

}

.contact-alert{

  padding: 12px 14px;

  border-radius: 14px;

  font-weight: 700;

}

.contact-alert-success{

  border: 1px solid rgba(111, 214, 142, 0.38);

  background: rgba(111, 214, 142, 0.12);

  color: rgba(225,255,232,0.95);

}

.contact-alert-error{

  border: 1px solid rgba(255, 113, 113, 0.38);

  background: rgba(255, 113, 113, 0.12);

  color: rgba(255,232,232,0.96);

}

.contact-honeypot{

  position: absolute;

  left: -10000px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.faq{

  display: grid;

  gap: 10px;

}







details{

  border-radius: 18px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.05);

  padding: 14px 16px;

}

summary{

  cursor: pointer;

  font-weight: 800;

  color: rgba(255,255,255,0.86);

}

details p{

  margin: 10px 0 0;

}



.footer{

  padding: 46px 0;

  border-top: 1px solid rgba(255,255,255,0.08);

  background: rgba(0,0,0,0.20);

}

.footer-grid{

  display: grid;

  grid-template-columns: 1.3fr 0.7fr 0.8fr;

  gap: 16px;

  align-items: start;

}

.footer-brand{

  font-weight: 900;

  letter-spacing: 0.2px;

  margin-bottom: 6px;

}

.footer-links{

  display: grid;

  gap: 8px;

}

.footer-links a{ color: var(--muted); font-weight: 650; }

.footer-links a:hover{ color: var(--text); }



/* Responsive */

@media (max-width: 980px){

  .hero-grid{ grid-template-columns: 1fr; }

  .featured{ grid-template-columns: 1fr; }

  .cards{ grid-template-columns: 1fr; }

  .steps{ grid-template-columns: 1fr 1fr; }

  .footer-grid{ grid-template-columns: 1fr; }

  .cta-band{ flex-direction: column; align-items: flex-start; }

  .contact-grid{ grid-template-columns: 1fr; }

  .nav-links, .nav-cta{ display: none; }

  .nav-toggle{ display: inline-block; justify-self: end; }

  .mobile-menu:not([hidden]){ display: block; }

}



@media (max-width: 520px){

  .steps{ grid-template-columns: 1fr; }

  .contact-fields{ grid-template-columns: 1fr; }

}