/* Resumaier marketing styles – responsive, accessible, no framework */
:root{
  --bg:#0B0D10;
  --panel:#0F1318;
  --text:#E8EDF2;
  --muted:#AAB4C0;
  --accent:#0B5CFF;
  --accent-2:#33E1FF;
  --border:#1B232C;
  --ok:#17C964;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg,#0A0C10,#0D1015 40%,#0B0D10);
  color:var(--text);
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;color:#000;padding:.5rem;border-radius:.5rem;z-index:1000}
.container{width:min(1120px,92%);margin-inline:auto}
a{color:var(--text);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(32px,5vw,46px)}
h2{font-size:clamp(24px,3vw,30px)}
h3{font-size:18px}
p{margin:0 0 1rem;color:var(--muted)}

/* .site-header{position:sticky;top:0;z-index:10;background:rgba(11,13,16,.6);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border)} */
/* --- Sticky header hardening --- */
/* Sticky header — keep your dark glass look, just raise z-index */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000; /* was 10 — this is the only real change */
  background: rgba(11,13,16,.6);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--border);
  transform: translateZ(0); /* helps some browsers with stacking */
}

/* Optional: subtle shadow on scroll for depth, matches dark header */
.site-header.stuck-shadow{ box-shadow: 0 6px 16px rgba(0,0,0,.25); }


.nav{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.brand span{letter-spacing:.2px}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:20px}

.btn{display:inline-block;border:1px solid var(--border);padding:.65rem 1rem;border-radius:10px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#031224;font-weight:700;border-color:transparent}
.btn-secondary{background:#192130;border-color:#263245}
.btn-ghost{background:transparent}
.lead{font-size:18px;color:#dbe6f3}
.accent{background:linear-gradient(135deg,#84A9FF,#33E1FF);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero{padding:4.5rem 0 3rem;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero-card .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:1rem}
.card-head{font-weight:700;margin-bottom:.5rem}
.checklist{margin:0;padding-left:1.2rem}
.checklist li{margin:.35rem 0}
.trust{font-size:13px;color:var(--muted);margin-top:.6rem}
.logos{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}

.section{padding:3.25rem 0}
.alt{background:radial-gradient(1200px 400px at 50% -50%, #0F1833 0%, rgba(15,24,51,0) 60%);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.25rem}
.step{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem}
.num{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50%;background:#193052;border:1px solid #28406B;color:#CFE0FF;font-weight:700;margin-bottom:.4rem}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1rem}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem;min-height:140px}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1rem}
.plan{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem;position:relative}
.plan .price{font-size:28px;color:#fff;margin:.25rem 0 .75rem}
.plan ul{padding-left:1.2rem;margin:0 0 1rem}
.plan .badge{position:absolute;top:10px;right:10px;background:#0B5CFF;color:#fff;border-radius:10px;padding:.2rem .5rem;font-size:12px}
.featured{outline:2px solid #2444ff}

.inline-form{display:flex;gap:.5rem;margin-top:.75rem}
.inline-form input{flex:1;min-width:200px;background:#11161c;color:#e6eef7;border:1px solid #263245;border-radius:10px;padding:.6rem .75rem}
.inline-form button{white-space:nowrap}

.site-footer{border-top:1px solid var(--border);padding:1.25rem 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}
.footer-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.micro{font-size:12px;color:var(--muted)}
.right{text-align:right}

@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.pricing,.steps{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
  /* Mobile dropdown menu when toggled */
  .nav-links.is-open{
    display:flex;
    position:absolute;
    right:4%;
    top:56px;
    flex-direction:column;
    gap:.75rem;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.75rem 1rem;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    z-index:1100;
  }
  .site-header .container.nav{position:relative}
  .footer-grid{grid-template-columns:1fr;gap:.75rem}
  .right{text-align:left}
}

/* staging ribbon */ .stage-banner{position:fixed;top:0;left:0;right:0;text-align:center;padding:.25rem;font:600 12px/1.2 system-ui;background:#ff308a} body{padding-top:22px}

/* Buttons */
.btn-gradient {
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.btn-gradient:hover { filter: brightness(1.05); }
.btn-gradient:disabled { opacity: 0.6; cursor: not-allowed; }

/* Spacing helpers */
.mt-12 { margin-top: 12px; }

/* Contact stacked layout */
#contact .form-stack {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
#contact .form-stack label { font-weight: 600; font-size: 14px; margin-bottom: 4px; display: block; }
#contact input[type="email"] {
  background: #fff; color: #111; border: 1px solid #ccc; border-radius: 10px;
  height: 44px; padding: 10px 12px; width: 100%;
}
#contact .check-row { display: flex; align-items: center; gap: 10px; }
#contact .check-row input { transform: scale(1.1); }
#contact .fw-normal { font-weight: 400; }
#contact textarea {
  background: #fff; color: #111; border: 1px solid #ccc; border-radius: 10px;
  min-height: 130px; resize: vertical; width: 100%; padding: 10px 12px;
}
#contact .actions { display: flex; gap: 10px; }

/* Pricing grid */
.pricing-cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pricing-cta { margin-top: 18px; text-align: center; }

/* contact success alert */
.alert {
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 8px;
}
.alert-success {
  background: #ecfdf5;           /* light green */
  color: #065f46;                 /* readable dark green */
  border: 1px solid #a7f3d0;
}