/* ============================================================
   Lab N Cloud — Homepage (Particle Wave Stage)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Pearl palette — mirrors the dashboard tokens in app.css so the public site
   and the signed-in app read as one product. Values are kept in sync with
   pages.css by hand; the two files declare an identical :root on purpose.

   Buttons are DELIBERATELY not restyled: --blue stays #3b82f6 so every solid
   button fill is byte-identical to the old dark site. Only translucent-white
   buttons were inverted, because white-on-white is invisible. Accent TEXT uses
   --blue-ink instead, since #3b82f6 is 3.1:1 on pearl and fails contrast. */
:root {
  --bg: #eef2f7;              /* app.css --bg-pearl  */
  --bg-deep: #e4e9f0;         /* app.css --bg-pearl-deep */
  --paper: #ffffff;           /* app.css --paper */
  --surface: rgba(255,255,255,0.96);
  --surface-hover: rgba(255,255,255,1);
  --surface-border: rgba(200,210,225,0.55);
  --line: #e6edf5;            /* app.css --line */
  --blue: #3b82f6;            /* UNCHANGED — button fills */
  --blue-ink: #0284c7;        /* accent text only, 4.6:1 on pearl */
  --blue-glow: rgba(59,130,246,0.28);
  --cyan: #1d4ed8;            /* app.css --primary2 */
  --text: #0f172a;            /* app.css --text */
  --text-muted: #475569;      /* app.css --muted */
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow2: 0 16px 40px rgba(15,23,42,0.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.home-page {
  font-family: var(--font);
  /* Same two radial washes the dashboard paints over pearl (app.css body), so
     a visitor landing here and then signing in sees one continuous ground. */
  background:
    /* Both corner washes are the button blue (--blue #3b82f6) at 0.20 — they
       replaced a lighter sky (79,172,254 @ .14) and a pale cyan (0,242,254
       @ .10), so the corners darken visibly and echo the CTA color. */
    radial-gradient(900px 500px at 10% -10%, rgba(59,130,246,0.20), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,0.20), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.home-page a { text-decoration: none; color: inherit; }

/* ===== PARTICLE CANVAS ===== */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  /* -1, not 0. At z-index:0 a positioned element paints ABOVE every
     non-positioned sibling, so the wave rendered on top of any container that
     had not opted out with its own position/z-index — the contact form and the
     pricing panel both had the mesh drawn straight through them. home.blade.php
     worked only because each of its sections sets z-index:1 by hand.
     body is static and creates no stacking context, so -1 puts the canvas above
     the page background and below all content, which is what every caller
     wanted. The per-section z-index:1 rules are now harmless redundancy. */
  z-index: -1;
  pointer-events: none;
}

/* ===== NAV ===== */
.hp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}

/* Mobile menu button. display:none here, and only here, is what keeps the
   desktop bar byte-identical to what it was -- everything that reveals it
   lives in the @media (max-width: 768px) block near the bottom of this file. */
.hp-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 44x44 is the tap-target floor. The negative margin pulls the visible bars
     back onto the 5% gutter, so the button's own padding does not read as an
     indent next to the logo. */
  width: 44px;
  height: 44px;
  margin-left: -11px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hp-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* The bars sit at -7 / 0 / +7 from centre (2px tall, 5px gap), so 7px of
   travel collapses the outer two onto the middle to form the X. */
.hp-nav.is-open .hp-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-nav.is-open .hp-nav-toggle span:nth-child(2) { opacity: 0; }
.hp-nav.is-open .hp-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hp-nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.hp-nav-logo { display: flex; align-items: center; }
.hp-nav-logo img {
  height: 50px;
  width: auto;
}

.hp-nav-links { display: flex; gap: 32px; }
.hp-nav-links a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.25s;
  letter-spacing: 0.01em;
}
.hp-nav-links a:hover { color: var(--text); }

/* Same geometry as before — only the translucency is inverted. A white film
   over a dark page becomes an ink film over a light one; without this the
   button is white-on-white and disappears entirely. */
.hp-nav-cta {
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.12);
  color: var(--text);
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.25s;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.hp-nav-cta:hover { background: rgba(15,23,42,0.09); }

/* ===== HERO ===== */
.hp-hero {
  position: relative;
  z-index: 1;
  padding: 160px 5% 100px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hp-hero-content {
  max-width: 760px;
  margin-bottom: 64px;
}

.hp-hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -3px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hp-hero p {
  font-size: 19px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 40px;
}

.hp-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue);
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.25s;
  box-shadow: 0 0 20px var(--blue-glow);
}
.hp-btn-primary:hover { background: #4f8ff7; transform: translateY(-1px); box-shadow: 0 0 30px var(--blue-glow); }

/* The ink film (rgba(15,23,42,0.05)) flattened onto the pearl ground: this is
   the one button sitting directly over #particle-canvas, and a translucent
   fill let the mesh draw straight through the label. #e3e7ed IS 5% ink over
   #eef2f7 — the same rendered color, fully opaque — and the hover is the 9%
   film flattened the same way. The nav and pricing buttons keep the live film
   because they sit on opaque surfaces. */
.hp-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #e3e7ed;
  border: 1px solid rgba(15,23,42,0.12);
  color: var(--text);
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.25s;
  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
.hp-btn-secondary:hover { background: #dadee5; }

/* ===== MONITOR ===== */
.hp-monitor-wrapper {
  width: min(1060px, 90vw);
  position: relative;
}

/* The bezel stays dark on purpose: it is a monitor, and the screen inside it
   is a dashboard screenshot -- a product shot against the pearl background,
   not a surface that follows the theme. Only its shadows were retuned. */
.hp-monitor {
  background: #111318;
  border-radius: 14px;
  padding: 10px 10px 0;
  /* The bezel stays dark on purpose — it depicts a physical monitor, not page
     chrome. Only the drop shadow was retuned: rgba(0,0,0,.6) reads as a smear
     on a pale ground, so it drops to the dashboard's shadow weight. */
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow:
    0 0 60px 6px var(--blue-glow),
    0 24px 60px -18px rgba(15,23,42,0.28);
  position: relative;
}

.hp-screen {
  background: #000;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.hp-screen img,
.hp-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hp-monitor-chin {
  height: 24px;
  background: #111318;
  border-radius: 0 0 14px 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hp-monitor-dot {
  width: 8px; height: 8px;
  background: #1e2028;
  border-radius: 50%;
}

.hp-monitor-stand {
  width: 100px; height: 60px;
  background: linear-gradient(to bottom, #1a1c24, #111318);
  margin: 0 auto;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%);
}
.hp-monitor-base {
  width: 180px; height: 6px;
  background: #1a1c24;
  margin: 0 auto;
  border-radius: 6px 6px 0 0;
}

/* ===== STATS ROW ===== */
.hp-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 56px;
  position: relative;
  z-index: 1;
}
.hp-stat { text-align: center; }
.hp-stat-val {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #0ea5e9, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hp-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== FOOTER ===== */
.hp-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 40px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hp-footer-copy { color: var(--text-muted); font-size: 13px; }
.hp-footer-links { display: flex; gap: 24px; }
.hp-footer-links a { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.hp-footer-links a:hover { color: var(--text); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* The inline link row does not fit, and until now it was simply hidden with
     nothing in its place -- so Pricing, Features, Book a Demo and Contact were
     unreachable on a phone. It becomes a dropdown panel under the bar, opened
     by the hamburger to the LEFT of the logo. */
  .hp-nav { gap: 12px; }
  .hp-nav-toggle { display: flex; }
  /* .hp-nav is justify-content: space-between, and a third flex child would
     centre the logo. This keeps toggle+logo hugging the left and the CTA hard
     right without touching the desktop rule. */
  .hp-nav-logo { margin-right: auto; }

  .hp-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* The bar's backdrop-filter does NOT extend to an absolutely-positioned
       child, and #particle-canvas is animating behind it. Without its own
       near-opaque background the links are unreadable over moving particles. */
    /* Fully opaque, not the bar's 0.72 glass: the hero headline is huge
       near-black type now, and even 3% show-through reads as ghosting
       behind the menu rows. */
    background: #ffffff;
    border-bottom: 1px solid var(--surface-border);
    /* 64px is the bar, and 100% is deliberately not used -- the panel must be
       bounded by the VIEWPORT, not by its 64px-tall parent. An iPhone SE in
       landscape has a 320px viewport height and five tap-sized rows plus the
       bar do not fit in it, so without these two lines the last row is clipped
       with no way to scroll to it: the same class of bug this whole change
       exists to fix. dvh where supported, vh as the fallback. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Hidden by default. visibility rather than display so there is something
       to transition, and because visibility:hidden also takes the links out of
       the tab order while the panel is closed. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .hp-nav.is-open .hp-nav-links {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .hp-nav-links a {
    /* 16px text + 2x16px padding = a 51px row: a real tap target, and larger
       type than the desktop 14px because this is read at arm's length. */
    padding: 16px 5%;
    font-size: 16px;
    border-top: 1px solid var(--surface-border);
  }
  .hp-nav-links a:first-child { border-top: 0; }

  .hp-hero { padding: 130px 5% 60px; }
  .hp-hero h1 { letter-spacing: -1.5px; }
  .hp-stats { gap: 30px; flex-wrap: wrap; }
  .hp-stat-val { font-size: 28px; }
  .hp-monitor { padding: 6px 6px 0; border-radius: 10px; }
  .hp-monitor-chin { height: 16px; border-radius: 0 0 10px 10px; }
  .hp-monitor-stand, .hp-monitor-base { display: none; }
  .hp-footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* The hamburger bars animate and the panel slides. Neither is load-bearing, so
   a reader who has asked for less motion gets the same states instantly.

   Placed after the responsive block on purpose: these selectors have the same
   specificity as the ones above, so source order is what makes them win. Only
   the toggle bars and the panel CONTAINER are named -- .hp-nav-links a keeps
   its 0.25s colour transition, which is not motion and applies at every width. */
@media (prefers-reduced-motion: reduce) {
  .hp-nav-toggle span,
  .hp-nav-links,
  .hp-nav.is-open .hp-nav-links { transition: none; }
  .hp-nav-links,
  .hp-nav.is-open .hp-nav-links { transform: none; }
}