/* ================================================
   Aqualizer Landing Page CSS
   Prefix: lp-  |  Mobile-first  |  Dark-Navy/Teal
   Only loaded on the landing page – nowhere else.
   ================================================ */

/* === Tokens === */
:root {
  --lp-navy:       #081e35;
  --lp-navy-2:     #0c2640;
  --lp-navy-card:  #0d2338;
  --lp-teal:       #2dd4bf;
  --lp-teal-d:     #22b8a8;
  --lp-teal-glow:  rgba(45,212,191,.16);
  --lp-white:      #ffffff;
  --lp-off-white:  #e0eef8;
  --lp-muted:      #7daec8;
  --lp-glass:      rgba(255,255,255,.055);
  --lp-glass-bd:   rgba(255,255,255,.10);
  --lp-radius:     16px;
  --lp-radius-sm:  10px;
  --lp-max:        1120px;
}

/* === Scoped reset === */
.lp-body { margin:0; background:var(--lp-navy); color:var(--lp-white);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; }
.lp-body *,.lp-body *::before,.lp-body *::after { box-sizing:border-box; }
.lp-body img { max-width:100%; height:auto; display:block; }
.lp-body a { color:inherit; }
.lp-body h1,.lp-body h2,.lp-body h3 { margin:0; line-height:1.2; }

/* === Utility === */
.lp-container { width:100%; max-width:var(--lp-max); margin:0 auto; padding:0 1.25rem; }
.lp-skip { position:absolute; left:-9999px; }
.lp-skip:focus { position:static; }

/* === Buttons === */
.lp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.6rem; border-radius:var(--lp-radius-sm);
  font-weight:700; font-size:1rem; text-decoration:none;
  cursor:pointer; border:none; transition:filter .15s, transform .1s;
  white-space:nowrap;
}
.lp-btn:active { transform:scale(.98); }
.lp-btn-teal  { background:var(--lp-teal); color:#fff; }
.lp-btn-teal:hover { background:var(--lp-teal-d); }
.lp-btn-ghost {
  background:transparent; color:var(--lp-white);
  border:1.5px solid rgba(255,255,255,.35);
}
.lp-btn-ghost:hover { background:rgba(255,255,255,.08); }
.lp-btn-lg { padding:1rem 2rem; font-size:1.1rem; border-radius:12px; }


/* ===================================================
   NAV
   =================================================== */
.lp-nav {
  position:sticky; top:0; z-index:500;
  background:rgba(8,30,53,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:.7rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.lp-nav-logo {
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--lp-white);
  font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.lp-nav-logo img { border-radius:6px; }
.lp-nav-actions { display:flex; align-items:center; gap:.65rem; }


/* ===================================================
   HERO
   =================================================== */
.lp-hero {
  position:relative;
  min-height:90svh;
  min-height:90vh;
  display:flex; align-items:center;
  background:
    linear-gradient(160deg, rgba(8,30,53,.94) 0%, rgba(8,30,53,.80) 55%, rgba(8,30,53,.58) 100%),
    image-set(
      url('/assets/img/hero-aquarium.webp') type('image/webp'),
      url('/assets/img/hero-aquarium.jpg')  type('image/jpeg')
    ) center/cover no-repeat;
  padding:5rem 1.25rem 4rem;
}
.lp-hero-inner {
  width:100%; max-width:660px;
  margin:0 auto; text-align:center;
}
.lp-hero-eyebrow {
  display:inline-block;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--lp-teal); background:rgba(45,212,191,.12);
  border:1px solid rgba(45,212,191,.3);
  border-radius:20px; padding:.35rem .9rem; margin-bottom:1.5rem;
}
.lp-hero h1 {
  font-size:clamp(2rem,5vw,3.4rem); font-weight:900;
  color:var(--lp-white); margin-bottom:1.25rem;
}
.lp-hero-product {
  display:block;
  font-size:.55em; font-weight:700; letter-spacing:.06em;
  color:var(--lp-teal); margin-bottom:.2em;
  text-transform:uppercase;
}
.lp-hero-sub {
  font-size:clamp(1rem,2vw,1.15rem); color:var(--lp-off-white);
  line-height:1.75; margin:0 auto 2rem;
  max-width:520px;
}
.lp-hero-actions {
  display:flex; flex-wrap:wrap; gap:.75rem;
  justify-content:center; margin-bottom:1.5rem;
}
.lp-hero-chips {
  display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center;
}
.lp-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(45,212,191,.10);
  border:1px solid rgba(45,212,191,.25);
  border-radius:20px; padding:.3rem .85rem;
  font-size:.79rem; font-weight:600; color:var(--lp-off-white);
}
.lp-chip-icon { font-size:.9rem; }


/* ===================================================
   SOCIAL PROOF BAR
   =================================================== */
.lp-proof {
  background:var(--lp-navy-2);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1.4rem 1.25rem;
}
.lp-proof-inner {
  max-width:var(--lp-max); margin:0 auto;
  display:flex; flex-direction:column; gap:.85rem;
  align-items:center; text-align:center;
}
.lp-proof-item {
  display:flex; align-items:center; gap:.5rem;
  font-size:.92rem; color:var(--lp-off-white); font-weight:500;
}
.lp-proof-item strong { color:var(--lp-teal); }
.lp-proof-divider {
  display:none; width:1px; height:22px;
  background:rgba(255,255,255,.15); flex-shrink:0;
}


/* ===================================================
   FEATURE SHOWCASES
   =================================================== */
.lp-features { padding:5rem 1.25rem; }
.lp-features-header { padding-top:5rem; padding-bottom:2rem; }
.lp-features-inner {
  max-width:var(--lp-max); margin:0 auto;
  display:flex; flex-direction:column; gap:4.5rem;
}

.lp-feature {
  display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;
}
/* Mobile: image always on top */
.lp-feature-img  { order:1; }
.lp-feature-text { order:2; }

.lp-feature-num {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lp-teal); margin-bottom:.5rem;
}
.lp-feature-new {
  display:inline-block; vertical-align:middle;
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--lp-teal);
  border-radius:4px; padding:1px 6px; margin-left:.4rem;
}
.lp-feature-title {
  font-size:clamp(1.25rem,2.5vw,1.65rem); font-weight:800;
  color:var(--lp-white); margin-bottom:.85rem;
}
.lp-feature-desc {
  color:var(--lp-muted); font-size:.97rem; line-height:1.75; margin:0;
}
.lp-feature-desc em { color:var(--lp-off-white); font-style:normal; }
.lp-feature-desc strong { color:var(--lp-off-white); }

/* Feature icon */
.lp-feature-icon {
  font-size:2rem; line-height:1; margin-bottom:.6rem;
}
/* Feature bullet list */
.lp-feature-bullets {
  list-style:none; padding:0; margin:0 0 1.25rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.lp-feature-bullets li {
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:.95rem; color:var(--lp-muted); line-height:1.55;
}
.lp-feature-bullets li::before {
  content:'✓'; color:var(--lp-teal); font-weight:700;
  flex-shrink:0; margin-top:.05rem;
}
/* Feature mini-CTA */
.lp-feature-cta {
  display:inline-flex; align-items:center;
  font-size:.88rem; font-weight:700; color:var(--lp-teal);
  text-decoration:none;
  border:1.5px solid rgba(45,212,191,.30);
  border-radius:8px; padding:.45rem 1rem;
  transition:background .15s, border-color .15s;
}
.lp-feature-cta::after { content:' →'; }
.lp-feature-cta:hover {
  background:rgba(45,212,191,.10); border-color:var(--lp-teal);
}

.lp-feature-screenshot {
  border-radius:var(--lp-radius);
  overflow:hidden;
  background:var(--lp-glass);
  border:1px solid var(--lp-glass-bd);
  backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  /* Portrait (mobile) screenshots: cap width and center */
  max-width:300px;
  margin:0 auto;
}
.lp-feature-screenshot img {
  width:100%; height:auto; display:block;
}
/* Landscape screenshot cropped to portrait via object-fit */
.lp-feature-screenshot--landscape {
  aspect-ratio: 9 / 16;
  max-width:300px;
}
.lp-feature-screenshot--landscape img {
  width:100%; height:100%;
  object-fit:cover; object-position:top left;
}


/* ===================================================
   SECTION HEADERS (shared)
   =================================================== */
.lp-section-title {
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800;
  text-align:center; color:var(--lp-white); margin-bottom:.5rem;
}
.lp-section-sub {
  text-align:center; color:var(--lp-muted);
  font-size:1rem; margin:0 auto 3rem; max-width:500px;
}


/* ===================================================
   PRICING
   =================================================== */
.lp-pricing {
  background:var(--lp-navy-2);
  border-top:1px solid rgba(255,255,255,.05);
  padding:5rem 1.25rem;
}
.lp-pricing-inner { max-width:820px; margin:0 auto; }

.lp-pricing-table {
  width:100%; border-collapse:collapse; margin-bottom:2.5rem;
}
.lp-pricing-table th {
  padding:1.1rem 1.25rem; font-size:1rem; text-align:center; position:relative;
}
.lp-pricing-table th:first-child { text-align:left; }
.lp-col-free    { color:var(--lp-muted); background:rgba(255,255,255,.03); border-radius:12px 12px 0 0; }
.lp-col-premium {
  color:var(--lp-teal); font-weight:800;
  background:rgba(45,212,191,.08); border-radius:12px 12px 0 0;
}
.lp-pricing-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--lp-teal); color:#fff;
  font-size:.68rem; font-weight:700; padding:.2rem .75rem;
  border-radius:20px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.lp-pricing-table td {
  padding:.8rem 1.25rem;
  font-size:.93rem;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
}
.lp-pricing-table td:first-child { text-align:left; color:var(--lp-off-white); }
.lp-pricing-table tr:hover td    { background:rgba(255,255,255,.02); }
.lp-check { color:var(--lp-teal); font-size:1rem; font-weight:700; }
.lp-cross { color:rgba(255,255,255,.22); }

.lp-pricing-footer { text-align:center; }
.lp-price-display {
  display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:2rem;
}
.lp-price-main { font-size:2.8rem; font-weight:900; color:var(--lp-white); }
.lp-price-period { font-size:.9rem; color:var(--lp-muted); display:inline; }
.lp-price-yearly {
  font-size:.88rem; background:var(--lp-teal-glow);
  border:1px solid rgba(45,212,191,.4); border-radius:8px;
  color:var(--lp-teal); padding:.3rem .85rem;
}


/* ===================================================
   SECOND CTA
   =================================================== */
.lp-cta2 {
  background:linear-gradient(135deg, #0b2a40 0%, #0d3d3b 100%);
  border-top:1px solid rgba(45,212,191,.2);
  border-bottom:1px solid rgba(45,212,191,.2);
  padding:5rem 1.25rem; text-align:center;
}
.lp-cta2 h2 { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.75rem; }
.lp-cta2 p  { color:var(--lp-muted); margin:0 0 2rem; font-size:1.05rem; }
.lp-cta2-trust { margin-top:1rem !important; font-size:.8rem; }


/* ===================================================
   VIDEO SECTION
   =================================================== */
.lp-video-section {
  padding:5rem 1.25rem;
  background:var(--lp-navy-2);
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
}
.lp-video-wrap {
  position:relative;
  width:100%; max-width:800px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:var(--lp-radius);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.lp-video-wrap iframe {
  position:absolute; inset:0;
  width:100%; height:100%; border:none;
}


/* ===================================================
   TESTIMONIALS
   =================================================== */
.lp-testimonials {
  padding:5rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.05);
}
.lp-testimonials-grid {
  display:grid; grid-template-columns:1fr; gap:1.25rem;
  margin-top:0;
}
.lp-testimonial {
  background:var(--lp-glass);
  border:1px solid var(--lp-glass-bd);
  border-radius:var(--lp-radius);
  padding:1.5rem;
  backdrop-filter:blur(8px);
}
.lp-stars {
  color:#f5c518; font-size:.95rem;
  margin-bottom:.65rem; letter-spacing:.05em;
}
.lp-testimonial blockquote {
  margin:0 0 1rem; font-style:italic;
  font-size:.95rem; color:var(--lp-off-white); line-height:1.7;
}
.lp-testimonial-author {
  font-size:.82rem; color:var(--lp-muted); font-weight:600;
}
.lp-testimonial-media-label {
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lp-teal); margin-bottom:.65rem;
}
.lp-testimonial--media {
  border-color:rgba(45,212,191,.2);
}


/* ===================================================
   FAQ
   =================================================== */
.lp-faq { padding:5rem 1.25rem; }
.lp-faq-inner { max-width:700px; margin:0 auto; }

.lp-faq-item {
  border:1px solid var(--lp-glass-bd);
  border-radius:var(--lp-radius-sm);
  background:var(--lp-glass);
  margin-bottom:.65rem; overflow:hidden;
}
.lp-faq-item summary {
  padding:1.05rem 1.25rem;
  font-weight:600; font-size:.95rem;
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--lp-white); user-select:none;
}
.lp-faq-item summary::-webkit-details-marker { display:none; }
.lp-faq-item summary::after {
  content:'+'; flex-shrink:0;
  font-size:1.3rem; font-weight:300;
  color:var(--lp-teal); margin-left:.5rem;
}
.lp-faq-item[open] summary::after { content:'−'; }
.lp-faq-item p {
  padding:0 1.25rem 1.1rem; margin:0;
  font-size:.9rem; color:var(--lp-muted); line-height:1.75;
}


/* ===================================================
   LOGIN DROPDOWN PANEL (Nav-anchored)
   =================================================== */
.lp-nav-login-wrap { position:relative; }

.lp-login-panel {
  position:absolute; right:0; top:calc(100% + 10px);
  width:min(340px, calc(100vw - 2rem));
  background:#0d2338;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  z-index:600;
}
.lp-login-panel[hidden] { display:none; }

.lp-panel-title {
  font-size:1.1rem; font-weight:700; text-align:center;
  color:var(--lp-white); margin:0 0 1.25rem;
}

/* Form fields inside modal */
.lp-field { display:block; margin-bottom:.85rem; }
.lp-field span {
  display:block; font-size:.79rem; font-weight:600;
  color:var(--lp-muted); margin-bottom:.3rem;
}
.lp-field input {
  width:100%; padding:.75rem 1rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px; color:var(--lp-white); font-size:.95rem;
}
.lp-field input::placeholder { color:rgba(255,255,255,.28); }
.lp-field input:focus {
  outline:none; border-color:var(--lp-teal);
  box-shadow:0 0 0 3px rgba(45,212,191,.18);
}
.lp-remember {
  display:flex; align-items:center; gap:.5rem;
  font-size:.84rem; color:var(--lp-muted); margin-bottom:1rem;
  cursor:pointer;
}
.lp-remember input[type="checkbox"] {
  width:auto; accent-color:var(--lp-teal); cursor:pointer;
}
.lp-login-submit {
  width:100%; padding:.9rem; background:var(--lp-teal);
  color:#fff; font-weight:700; font-size:1rem;
  border:none; border-radius:10px; cursor:pointer;
  transition:background .15s;
}
.lp-login-submit:hover { background:var(--lp-teal-d); }
.lp-login-links {
  margin-top:.9rem; text-align:center;
  font-size:.83rem; color:var(--lp-muted);
}
.lp-login-links a { color:var(--lp-teal); text-decoration:none; }
.lp-login-links a:hover { text-decoration:underline; }
.lp-login-error {
  background:rgba(220,50,50,.14); border:1px solid rgba(220,50,50,.28);
  color:#ff9090; border-radius:8px;
  padding:.75rem 1rem; margin-bottom:1rem; font-size:.9rem;
}


/* ===================================================
   FOOTER
   =================================================== */
.lp-footer {
  background:#050f1c;
  border-top:1px solid rgba(255,255,255,.06);
  padding:2rem 1.25rem; text-align:center;
  font-size:.82rem; color:var(--lp-muted);
}
.lp-footer a { color:var(--lp-off-white); text-decoration:underline; text-underline-offset:2px; }
.lp-footer p { margin:.25rem 0; }


/* ===================================================
   RESPONSIVE — max 639 px (mobile only)
   =================================================== */
@media (max-width:639px) {
  /* Nav: hide CTA button, hero has it right below */
  .lp-nav-hide-mobile { display:none; }

  /* Login panel: fixed below nav, full width minus margins */
  .lp-login-panel {
    position:fixed;
    top:58px;          /* nav height */
    left:1.25rem;
    right:1.25rem;
    width:auto;
  }

  /* Reduce all section paddings on mobile */
  .lp-features,
  .lp-pricing,
  .lp-cta2,
  .lp-faq         { padding-top:2.5rem; padding-bottom:2.5rem; }
  .lp-features-header { padding-top:2.5rem; padding-bottom:1rem; }
  .lp-features-inner  { gap:2.5rem; }
  .lp-section-sub     { margin-bottom:1.75rem; }

  /* Hero: no vertical centering, less top space */
  .lp-hero {
    min-height:auto;
    align-items:flex-start;
    padding:2.5rem 1.25rem 3rem;
  }
  .lp-hero-inner { text-align:left; }
  .lp-hero-eyebrow { font-size:.72rem; }

  /* Hero actions: stack vertically on mobile */
  .lp-hero-actions { flex-direction:column; }
  .lp-hero-actions .lp-btn { width:100%; text-align:center; white-space:normal; }
  .lp-hero-chips { justify-content:flex-start; }

  .lp-testimonials { padding-top:2.5rem; padding-bottom:2.5rem; }
  .lp-video-section { padding-top:2.5rem; padding-bottom:2.5rem; }

  /* Pricing table: fit in viewport */
  .lp-pricing { padding-left:.75rem; padding-right:.75rem; }
  .lp-pricing-inner { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .lp-pricing-table th { padding:.7rem .55rem; font-size:.85rem; }
  .lp-pricing-table td { padding:.6rem .55rem; font-size:.82rem; }
  .lp-pricing-badge { font-size:.56rem; padding:.1rem .45rem; top:-9px; white-space:nowrap; }
}

/* ===================================================
   RESPONSIVE — 640 px (tablet)
   =================================================== */
@media (min-width:640px) {
  .lp-proof-inner { flex-direction:row; gap:0; justify-content:center; }
  .lp-proof-item  { padding:0 2rem; }
  .lp-proof-divider { display:block; }

  .lp-testimonials-grid { grid-template-columns:repeat(3,1fr); }
}


/* ===================================================
   RESPONSIVE — 1024 px (desktop)
   =================================================== */
@media (min-width:1024px) {
  /* Hero: links ausgerichtet */
  .lp-hero { text-align:left; align-items:flex-end; min-height:85vh; }
  .lp-hero-inner { margin:0; }

  /* Features: zwei Spalten, alternierend */
  .lp-feature {
    grid-template-columns:1fr 1fr;
    gap:4rem;
  }
  /* Default (odd): text links, bild rechts */
  .lp-feature-img  { order:2; }
  .lp-feature-text { order:1; }

  /* Even: bild links, text rechts */
  .lp-feature:nth-child(even) .lp-feature-img  { order:1; }
  .lp-feature:nth-child(even) .lp-feature-text { order:2; }

  .lp-pricing-table th,
  .lp-pricing-table td { padding:1rem 2rem; }
}