/* ── Landing page ────────────────────────────────────────────────────────────
   Static marketing page for CVGenerator. Kept separate from assets/main.css
   on purpose: that file is the Dioxus app's stylesheet and ships inside the
   wasm bundle, so anything added here would be paid for by every app load.
   The palette is duplicated from the app's design tokens rather than imported
   so this page stays a self-contained static asset that works without the
   bundle. Keep the two in sync if the app's brand colours change. */

:root {
  --blue:       #2563eb;
  --blue-dark:  #1d4ed8;
  --indigo:     #4f46e5;
  --green:      #16a34a;
  --amber:      #d97706;
  --red:        #dc2626;

  --text:       #0f172a;
  --text-2:     #475569;
  --text-3:     #94a3b8;

  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --border:     #e2e8f0;
  --border-2:   #cbd5e1;

  --shadow-sm:  0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg:  0 18px 40px rgba(15, 23, 42, .12);

  --radius:     12px;
  --radius-lg:  18px;

  --maxw:       1120px;
  --ease:       cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
  --blue:       #60a5fa;
  --blue-dark:  #3b82f6;
  --indigo:     #818cf8;
  --green:      #4ade80;
  --amber:      #fbbf24;
  --red:        #f87171;

  --text:       #e2e8f0;
  --text-2:     #94a3b8;
  --text-3:     #64748b;

  --bg:         #0f1117;
  --bg-card:    #1a1d27;
  --border:     #2a2d3a;
  --border-2:   #1e2130;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg:  0 18px 40px rgba(0, 0, 0, .6);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A faint noise wash over the page. Fixed and pointer-transparent so it never
   intercepts clicks, and hidden from assistive tech (it is decorative). */
.noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > *:not(.noise) { position: relative; z-index: 1; }

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.nav-logo {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -.02em;
}

.nav-logo span { color: var(--blue); }
.nav-logo:hover { text-decoration: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  font-size: .925rem;
}

.nav-links a { color: var(--text-2); font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.btn-nav {
  padding: .5rem 1rem;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff !important;
  font-weight: 600;
}

.btn-nav:hover { background: var(--blue-dark); }

.lang-toggle, .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.lang-toggle:hover, .theme-toggle:hover {
  border-color: var(--blue);
  color: var(--text);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 3rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
}

.hero-grid-bg {
  position: absolute;
  inset: 0 50% 40% 0;
  transform: translateX(-25%);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 65%);
  opacity: .5;
  z-index: -1;
}

.hero-tag {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: .375rem .875rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: 1.25rem;
}

.hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blue), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 34rem;
  color: var(--text-2);
  font-size: 1.075rem;
  margin-bottom: 2.25rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .875rem; }

.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: .975rem;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--blue-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary.large, .btn-ghost.large {
  padding: .875rem 1.875rem;
  font-size: 1.05rem;
}

/* Decorative fake-CV preview in the hero. aria-hidden in spirit: the bars are
   illustration, and the real content is restated in the features below. */
.person-card-preview {
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.pcp-avatar {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  font-size: 1.75rem;
}

.pcp-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.pcp-role {
  color: var(--text-2);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.pcp-bars { display: grid; gap: .875rem; }

.bar-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  align-items: center;
  gap: .75rem;
  font-size: .85rem;
  color: var(--text-2);
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--indigo));
}

/* The widths are hand-set to match the illustration's intent. */
.fill-92 { width: 92%; }
.fill-85 { width: 85%; }
.fill-88 { width: 88%; }
.fill.gold { background: linear-gradient(90deg, var(--amber), var(--green)); }

.pcp-badge {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-size: .8rem;
  font-weight: 600;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

section { scroll-margin-top: 5rem; }

.section-title {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: center;
}

.section-title em {
  font-style: normal;
  color: var(--blue);
}

/* ── Features ───────────────────────────────────────────────────────────── */

.features { padding: 4rem 1.5rem; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.feature-card {
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}

/* The two accent cards carry the two claims the page actually sells —
   tailoring and privacy — so they get the brand tint rather than being
   lost among five identical neighbours. */
.feature-card.accent  { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.feature-card.accent2 { border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }

.feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.125rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: 1.375rem;
}

.feature-card.accent2 .feature-icon {
  background: color-mix(in srgb, var(--indigo) 12%, transparent);
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

.feature-card p { color: var(--text-2); font-size: .95rem; }

/* ── How it works ───────────────────────────────────────────────────────── */

.how { padding: 4rem 1.5rem; background: var(--bg-card); }

.steps {
  display: grid;
  gap: 0;
  max-width: 46rem;
  margin: 0 auto;
}

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

.step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}

.step-body h3 { font-size: 1.1rem; margin-bottom: .375rem; }
.step-body p { color: var(--text-2); font-size: .95rem; }

.step-connector {
  width: 2px;
  height: 2.25rem;
  margin: .5rem 0 .5rem 1.75rem;
  background: linear-gradient(var(--border-2), transparent);
}

/* ── Use cases ──────────────────────────────────────────────────────────── */

.usecases { padding: 4rem 1.5rem; }

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.usecase {
  padding: 1.5rem;
  border-left: 2px solid var(--border);
}

.uc-icon { font-size: 1.75rem; }
.usecase h4 { font-size: 1.05rem; margin: .625rem 0 .375rem; }
.usecase p { color: var(--text-2); font-size: .925rem; }

/* ── Ethics ─────────────────────────────────────────────────────────────── */

.ethics { padding: 2rem 1.5rem 4rem; }

.ethics-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--green) 6%, var(--bg-card));
}

.ethics-icon { font-size: 2rem; line-height: 1; }
.ethics-inner h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.ethics-inner p { color: var(--text-2); font-size: .95rem; }

/* ── CTA ────────────────────────────────────────────────────────────────── */

.cta-section {
  padding: 4.5rem 1.5rem 5rem;
  text-align: center;
}

.cta-section h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .625rem;
}

.cta-section > p { color: var(--text-2); margin-bottom: 2rem; }

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  justify-content: center;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-logo {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.footer-copy { color: var(--text-3); font-size: .85rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }

  /* The link row has no min-width of its own, so once the viewport is narrow
     enough it would push past the logo and the toggles and overflow the page
     horizontally. Let it wrap onto a second line instead of clipping. */
  .nav-links { flex-wrap: wrap; row-gap: .5rem; min-width: 0; }

  .hero-grid-bg { inset: 0 0 55% 0; transform: none; }
  .person-card-preview { max-width: 26rem; }
}

@media (max-width: 640px) {
  .nav { gap: .75rem; padding: .875rem 1rem; }

  /* Below this width the nav's link row and the logo cannot share a line
     without either wrapping or overflowing, so the links drop below. */
  .nav {
    flex-wrap: wrap;
  }

  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1rem;
    font-size: .875rem;
  }

  .lang-toggle { margin-left: auto; }

  .hero, .features, .how, .usecases, .ethics, .cta-section {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .bar-row { grid-template-columns: 1fr; gap: .375rem; }
  .step { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .step-connector { margin-left: 1.25rem; }
  .ethics-inner { grid-template-columns: 1fr; gap: .75rem; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .feature-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover { transform: none; }
}