/* ============================================================
   LIFEMAXX — Midnight Gradient design system
   Palette from Midnight_Gradient_Palette (eyedroppered from
   Isaac's reference images). Do not introduce new hues.
   ============================================================ */

:root{
  --bg:        #0a0a26;   /* page base — very dark navy   */
  --bg-2:      #0e1035;   /* section alt                  */
  --bg-3:      #12143c;   /* value-prop band              */
  --navy-deep: #06063B;
  --indigo:    #0C095D;
  --violet-1:  #21056D;
  --violet-2:  #3F0797;
  --violet-3:  #5811C3;   /* button base                  */
  --violet-4:  #5B0FD8;   /* primary CTA                  */
  --blue-1:    #07328F;
  --blue-2:    #03498A;
  --blue-3:    #02649C;
  --blue-4:    #0176C8;   /* fleck / florida blue         */
  --white:     #ffffff;
  --body:      #ededf8;
  --lav:       #9d9ddd;   /* secondary text + links       */
  --lav-dim:   #8888c0;   /* small print                  */
  --line:      rgba(255,255,255,.14);
  --card:      #171a45;
  --card-line: #2a2d66;
  --radius:    8px;
  --disp: "Archivo", "Archivo Black", sans-serif;
  --sans: "Inter", system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
h1,h2,h3,.wordmark{
  font-family:var(--disp);
  font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;
  color:var(--white);
  line-height:1.08;
}
h1{font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:.04em}
h3{font-size:1.02rem;letter-spacing:.08em;line-height:1.35}
a{color:var(--lav)}
a:hover{color:var(--white)}
p{max-width:62ch}

.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--lav);margin-bottom:1.1rem;font-weight:500;
}
.small{font-size:.82rem;color:var(--lav-dim)}
.muted{color:var(--lav)}

/* ---------- layout ---------- */
.container{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:110px 0}
.rule{border:none;border-top:1px solid var(--line);margin:1.6rem 0 2.6rem}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,38,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.wordmark{font-size:1rem;letter-spacing:.24em;text-decoration:none;color:var(--white)}
nav.links{display:flex;align-items:center;gap:28px}
nav.links a{font-size:.9rem;text-decoration:none}
nav.links a.active{color:var(--white);font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--white);
  border-radius:6px;padding:8px 12px;font-size:.9rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  background:var(--violet-4);
  color:var(--white);
  font-weight:700;font-size:.95rem;
  padding:14px 28px;border-radius:6px;
  text-decoration:none;border:none;cursor:pointer;
  transition:box-shadow .2s,transform .15s,background .2s;
}
.btn:hover{color:var(--white);background:var(--violet-3);box-shadow:0 0 24px rgba(88,17,195,.55)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-lg{padding:16px 34px}
.btn-ghost{
  background:transparent;border:1px solid rgba(255,255,255,.38);
  font-weight:600;
}
.btn-ghost:hover{background:rgba(255,255,255,.07);box-shadow:none}

/* ---------- gradient bands ---------- */
.g-hero{
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(63,7,151,.75), transparent 60%),
    radial-gradient(700px 500px at 100% 45%, rgba(33,5,109,.6), transparent 65%),
    radial-gradient(700px 520px at -8% 108%, rgba(7,50,143,.45), transparent 60%),
    linear-gradient(180deg,#0d0d33 0%, var(--bg) 100%);
}
.g-cta{
  background:
    radial-gradient(820px 520px at 72% 8%, rgba(88,17,195,.66), transparent 62%),
    radial-gradient(600px 460px at 4% 100%, rgba(3,73,138,.5), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.g-right{
  background:
    radial-gradient(760px 560px at 96% 40%, rgba(63,7,151,.5), transparent 62%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
}

/* ---------- hero (shared) ---------- */
.hero{display:grid;grid-template-columns:1.15fr .95fr;gap:56px;align-items:center}
.hero .copy p.lede{color:var(--body);font-size:1.08rem;margin:1.4rem 0 2rem}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .fine{margin-top:1.6rem}
.photo-card img{width:100%;display:block;border-radius:6px}
.photo-card.framed img{border:8px solid #fff;border-radius:8px}
.photo-card figcaption{font-size:.78rem;color:var(--lav);margin-top:.6rem}

/* full-viewport splash (home) */
.splash{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:40px 0 64px}

/* ---------- process grid ---------- */
.grid-5{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tile img,.tile .gfx{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:6px;display:block}
.tile .gfx{display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(157,157,221,.5);background:rgba(23,26,69,.4)}
.tile .gfx svg{width:100%;height:100%}
.step{font-size:.7rem;letter-spacing:.35em;color:var(--lav);margin:.9rem 0 .2rem}
.tile p{font-size:.9rem;color:var(--white)}

/* ---------- pricing ---------- */
.packs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:2.4rem}
.pack-card{
  background:rgba(23,26,69,.55);border:1px solid var(--card-line);
  border-radius:12px;padding:22px;
}
.pack-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.pack-card h3{margin:1.2rem 0 .5rem;letter-spacing:.14em}
.pack-card .desc{font-size:.92rem;color:var(--lav);min-height:3.1em}
.price{margin:1rem 0 1.3rem;color:var(--white)}
.price strong{font-family:var(--disp);font-size:2rem;font-stretch:125%}
.price span{font-size:.85rem;color:var(--lav);margin-left:.5rem}
.pack-card .btn{width:100%;text-align:center}

/* ---------- value props ---------- */
.band{background:var(--bg-3)}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.cols-3 h3{margin-bottom:.8rem}
.cols-3 p{font-size:.95rem;color:var(--lav)}

/* ---------- faq teaser rows ---------- */
.qrows{max-width:680px;margin-top:1.4rem}
.qrow{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 4px;border-bottom:1px solid var(--line);
  color:var(--white);text-decoration:none;font-weight:500;
}
.qrow:first-child{border-top:1px solid var(--line)}
.qrow .arrow{color:var(--lav);transition:transform .2s}
.qrow:hover .arrow{transform:translateX(5px);color:var(--white)}

/* ---------- centered CTA ---------- */
.cta-center{text-align:center}
.cta-center h2{font-size:clamp(1.9rem,4vw,3.1rem)}
.cta-center .sub{color:var(--lav);margin:1.1rem auto 2rem;max-width:none}

/* ---------- footer ---------- */
footer{
  border-top:1px solid rgba(255,255,255,.1);
  padding:38px 0;font-size:.84rem;
}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .wordmark{font-size:.85rem}
.foot nav{display:flex;gap:24px}
.foot a{text-decoration:none;font-size:.84rem}
.foot .loc{color:var(--lav-dim)}

/* ---------- specs table (brownie) ---------- */
.specs{max-width:680px}
.specs .row{display:grid;grid-template-columns:150px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.specs .row:first-child{border-top:1px solid var(--line)}
.specs .k{color:var(--lav-dim)}
.specs .v{color:var(--body)}

/* ---------- about ---------- */
.two-col{display:grid;grid-template-columns:1.1fr .85fr;gap:56px;align-items:start}
.stack{display:flex;flex-direction:column;gap:28px}
.stack figure img{width:100%;border-radius:6px;display:block}
.stack figcaption{font-size:.78rem;color:var(--lav);margin-top:.55rem}
.two-col .copy p{margin-bottom:1.3rem}

/* ---------- faq page ---------- */
.faq-item{max-width:660px;margin-top:3.4rem}
.faq-item h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:1.1rem}
.faq-item p{margin-bottom:1rem}
.faq-item p.fine{color:var(--lav);font-size:.95rem}

/* ---------- pre-order ---------- */
.po{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.info-rows{display:flex;flex-direction:column;gap:14px;margin:2rem 0 1.4rem}
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid #3a3670;border-radius:8px;padding:16px 20px;
  background:rgba(16,14,51,.4);
}
.info-row b{color:var(--white)}
.info-row span{color:var(--lav)}

.form-card{
  background:rgba(22,18,56,.75);border:1px solid #333066;border-radius:12px;
  padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.form-card label{
  display:block;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lav);margin:22px 0 8px;font-weight:600;
}
.form-card label:first-child{margin-top:0}
.form-card label .opt{letter-spacing:0;text-transform:none;font-weight:400;font-size:.72rem;color:var(--lav-dim)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg button{
  padding:12px 8px;border-radius:6px;font-size:.9rem;cursor:pointer;
  background:transparent;border:1px solid #4a4685;color:var(--white);
  font-family:var(--sans);transition:all .15s;
}
.seg button.sel{background:var(--violet-4);border-color:var(--violet-4);font-weight:700}
input[type=text],input[type=email],textarea{
  width:100%;background:#0d0b28;border:1px solid #3a3670;border-radius:8px;
  color:var(--white);font-family:var(--sans);font-size:.95rem;
  padding:12px 14px;outline:none;
}
input:focus,textarea:focus{border-color:var(--violet-3)}
textarea{min-height:96px;resize:vertical}
textarea::placeholder{color:#7b78a8}
.form-card .btn{width:100%;margin-top:26px}
.form-note{text-align:center;margin-top:14px;font-size:.78rem;color:var(--lav-dim)}
.form-ok{
  display:none;text-align:center;padding:34px 10px;color:var(--white);
}
.form-ok h3{margin-bottom:.8rem}
.form-err{display:none;color:#ff9d9d;font-size:.85rem;text-align:center;margin-top:12px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  section{padding:72px 0}
  .hero,.two-col,.po{grid-template-columns:1fr;gap:40px}
  .splash{min-height:auto;padding:48px 0 64px}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:1fr;gap:30px}
  .packs{grid-template-columns:1fr}
  .foot{flex-direction:column;text-align:center}
  nav.links{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:#0c0b2e;flex-direction:column;padding:18px 24px;gap:18px;
    border-bottom:1px solid var(--line);align-items:flex-start;
  }
  nav.links.open{display:flex}
  .menu-btn{display:block}
}