/* ═══════════════════════════════════════════════════════════════
   WALILOCK — Website Design System
   GhostShield Palette · Orange / Black · Glassmorphism
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #121212;
  --bg-card: rgba(18,18,18,0.85);
  --bg-glass: rgba(0,0,0,0.55);
  --bg-hover: rgba(249,115,22,0.08);

  --orange:   #f97316;
  --orange-d: #ea580c;
  --orange-l: #fb923c;
  --glow:     rgba(249,115,22,0.28);
  --glow-lg:  rgba(249,115,22,0.15);
  --green:    #10b981;
  --red:      #ef4444;
  --amber:    #f59e0b;

  --t1: #ffffff;
  --t2: #a3a3a3;
  --t3: #525252;
  --t-o: #fb923c;

  --border: rgba(255,255,255,0.07);
  --border-o: rgba(249,115,22,0.4);

  --font:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 150ms;
  --base: 250ms;
  --slow: 400ms;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
  /* WALILOCK-AMEND-walilock.css-g52-long-value-overflow — user-controlled strings
     (chiefly email addresses) have no space to wrap at, so they overflow their
     container. `overflow-x: hidden` above then CLIPS the remainder instead of
     offering a scrollbar, so the tail becomes unreachable rather than merely
     ugly. `break-word` breaks only what would otherwise overflow and does not
     affect min-content sizing, so it changes no existing layout. */
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
ul { list-style: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── Navigation ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 32px;
  transition: all var(--base) var(--ease);
}
.nav.scrolled {
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.nav-logo-mark {
  /* The mark is now artwork, not a tile holding a glyph. The orange glow that
     used to come from the tile is kept as a drop-shadow on the mark itself. */
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px var(--glow));
}
.nav-logo-text {
  background: linear-gradient(90deg, var(--orange), var(--orange-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
}
.nav-link {
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  color: var(--t2);
  transition: all var(--fast) var(--ease);
}
.nav-link:hover { color: var(--t1); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--t-o); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
// WALILOCK-AMEND-walilock.css-mobile-menu-zindex-LT-F-SIDE
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; }
.nav-hamburger span { width: 22px; height: 2px; background: var(--t2); border-radius: 2px; transition: all var(--base); }
.nav-mobile { display: none; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--fast) var(--ease);
  white-space: nowrap; flex-shrink: 0;
}
.btn-primary {
  /* Black, not white. The fill is a gradient from --orange to --orange-d, so the
     label has to clear AA against BOTH ends. White measures 2.80:1 on #f97316
     and 3.56:1 on #ea580c -- it failed the primary call-to-action on every page.
     Black is 7.49:1 and 5.90:1, so the worst case is 5.90:1. */
  background: linear-gradient(135deg, var(--orange), var(--orange-d));
  color: #000;
  box-shadow: 0 4px 16px var(--glow);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(249,115,22,0.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { color: var(--t2); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--t1); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }
.btn-outline {
  color: var(--orange); border: 1px solid var(--border-o);
  background: rgba(249,115,22,0.04);
}
.btn-outline:hover { background: rgba(249,115,22,0.10); box-shadow: 0 0 0 1px var(--orange); }
.btn-lg { padding: 15px 32px; font-size: 16px; border-radius: var(--r-lg); }
.btn-sm { padding: 7px 16px; font-size: 13px; }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 64px 40px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 48px;
}
.footer-brand p { font-size: 13px; color: var(--t3); line-height: 1.7; margin-top: 14px; max-width: 260px; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--t3); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: var(--t2); transition: color var(--fast); }
.footer-col a:hover { color: var(--t-o); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--t3);
}
.footer-bottom a { color: var(--t3); }
.footer-bottom a:hover { color: var(--t2); }

/* ── Layout helpers ──────────────────────────────────────────── */
.section { padding: 96px 40px; }
.section-sm { padding: 64px 40px; }
.container { max-width: 1200px; margin: 0 auto; }
.container-sm { max-width: 840px; margin: 0 auto; }
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--orange); margin-bottom: 16px;
}
.section-label::before { content: ''; width: 20px; height: 2px; background: var(--orange); border-radius: 1px; }
h1.hero-title {
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.05;
}
h2.section-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
}
h3.card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.gradient-text {
  background: linear-gradient(90deg, var(--orange), var(--orange-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-muted { color: var(--t2); }
.text-dim { color: var(--t3); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--base) var(--ease);
}
.card:hover { border-color: var(--border-o); box-shadow: 0 0 0 1px var(--border-o), 0 24px 48px rgba(0,0,0,0.35); }
.card-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.15);
}

/* ── Badge ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-orange { background: rgba(249,115,22,0.1); color: var(--orange); border: 1px solid rgba(249,115,22,0.2); }
.badge-green  { background: rgba(16,185,129,0.1);  color: var(--green); border: 1px solid rgba(16,185,129,0.2); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--t2); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--t1);
  font-size: 14px; font-family: var(--font);
  outline: none;
  transition: all var(--fast) var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--glow);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--t3); }
.form-textarea { resize: vertical; min-height: 120px; }

/* ── Check list ──────────────────────────────────────────────── */
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--t2); line-height: 1.5; }
.check-icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: var(--green); font-size: 11px; }

/* ── Glow orb (decorative) ───────────────────────────────────── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── Scroll-reveal ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Robustness: never leave content permanently hidden. Users (or environments)
   that prefer/force reduced motion get the content instantly, no fade. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Auth card ───────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 20px 40px;
  position: relative; overflow: hidden;
  background: var(--bg-0);
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--bg-glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 48px 40px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  position: relative; z-index: 1;
}
.auth-logo-mark {
  /* Artwork, not a tile holding a glyph -- same treatment as .nav-logo-mark.
     The orange gradient tile is gone: the mark is itself orange, and orange on
     orange is the one contrast pairing the brand sheet forbids.
     The shield-pulse animation is gone too. The mark is never animated in its
     identity role; the split belongs to the landing-page hero and nowhere else. */
  width: 64px; height: 64px;
  display: block; margin: 0 auto 24px;
  filter: drop-shadow(0 8px 32px var(--glow));
}

/* ── Pricing card ────────────────────────────────────────────── */
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: all var(--base) var(--ease);
}
.pricing-card.featured {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 24px 60px rgba(249,115,22,0.12);
  background: linear-gradient(180deg, rgba(249,115,22,0.04) 0%, var(--bg-card) 60%);
}
.pricing-card:not(.featured):hover { border-color: var(--border-o); transform: translateY(-4px); }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin: 20px 0 8px; }
.pricing-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.pricing-period { font-size: 14px; color: var(--t2); }
.pricing-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Trust strip ─────────────────────────────────────────────── */
.trust-strip {
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.trust-track {
  display: flex; align-items: center; gap: 48px;
  width: max-content;
  animation: trust-scroll 28s linear infinite;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--t3);
  white-space: nowrap; letter-spacing: 0.01em;
}
.trust-item span { font-size: 16px; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Feature grid ────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* On full-nav pages the top-bar actions (Log in / Get Walilock Free) move into
     the hamburger menu on mobile — otherwise they overflow the right edge and the
     CTA button gets clipped. Scoped via the sibling combinator so pages with a
     minimal nav (login/signup: logo + one button, no hamburger) keep their button. */
  .nav-links ~ .nav-actions { display: none; }
  /* On the minimal-nav auth pages (signup/login), drop the helper text
     ("Already have an account?") in the top bar on mobile so the action button
     doesn't get pushed off the right edge. Scoped to nav so body .text-dim stays. */
  .nav-actions .text-dim { display: none; }
  .nav-mobile {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 68px; left: 0; right: 0;
    z-index: 101;
    background: rgba(0,0,0,0.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    transform: translateY(-120%);
    transition: transform var(--base) var(--ease);
  }
  .nav-mobile.open { transform: translateY(0); }
  .nav-mobile .nav-link { display: block; padding: 12px 16px; }
  .nav-mobile .nav-actions { flex-direction: column; padding: 12px 16px 4px; }
  .nav-mobile .btn { width: 100%; justify-content: center; }
  .section { padding: 64px 20px; }
  .section-sm { padding: 48px 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  h1.hero-title { font-size: clamp(34px, 8vw, 54px); }
  .auth-card { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}