:root{
  --green:#007A48;
  --green-2:#0a8b55;
  --ink:#0d1b2a;
  --muted:#6b7280;
  --bg:#f7f8f9;
  --card:#ffffff;
  --ring:rgba(0,122,72,0.18);
  --border:#eef0f2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* LAYOUT */
.container{
  width:min(1080px, 92vw);
  margin-inline:auto;
  padding:0 1rem; /* page margins */
}

.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:visible;
}

/* BRAND: logo as background (place /proqure.png in public_html) */
.brand{
  display:inline-block;
  width:200px;                /* mobile default */
  height:48px;
  background:url("/proqure.png") no-repeat left center;
  background-size:contain;
  text-decoration:none;
}

/* keep accessible text but hide visually */
.logo-text{
  position:absolute;
  left:-9999px;
}

/* NAV */
.nav{
  display:flex;
  gap:1rem;
}
.nav-link{
  color:var(--green);
  text-decoration:none;
  font-weight:600;
}
.nav-link:hover{color:var(--green-2)}

/* HERO */
.hero{
  padding:6rem 1rem 4rem;
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(0,122,72,.08), transparent 60%),
    linear-gradient(#fff,#fafafa);
}
.hero-inner{text-align:center}
.headline{
  margin:0 0 .8rem;
  font-size:clamp(2rem, 4vw + 1rem, 3rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.lede{
  margin:0 auto 1.4rem;
  max-width:720px;
  color:var(--muted);
  font-size:1.05rem;
}

/* CTA (waitlist) */
.cta{margin:1.2rem 0 1.6rem}
.waitlist{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}
.waitlist input{
  width:min(420px, 86vw);
  height:48px;
  border:1px solid #e6e8ea;
  border-radius:12px;
  padding:0 14px;
  font-size:1rem;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.waitlist input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 6px var(--ring);
}
.btn{
  height:48px;
  border:0;
  padding:0 18px;
  border-radius:12px;
  background:var(--green);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:transform .04s ease, background .15s ease;
}
.btn.wide{padding:0 22px; min-width:200px}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--green-2)}

.microcopy{
  margin:.5rem 0 0;
  color:var(--muted);
  font-size:.9rem;
}
.center{ text-align:center; }

/* POINTS */
.points{
  margin:2rem auto 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:.8rem;
  max-width:720px;
}
.points li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.9rem 1rem;
  font-weight:600;
}

/* STRIP */
.strip{
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.strip-inner{
  padding:1rem 0;
  text-align:center;
}
.tagline{
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--green);
}

/* BUILD SECTION */
.build{
  padding:3rem 0 4rem;
}
.build-inner{
  text-align:left;
}
.section-title{
  margin:0 0 .4rem;
  font-size:clamp(1.6rem, 2vw + .8rem, 2.1rem);
  letter-spacing:-.01em;
}
.section-lede{
  margin:.2rem 0 1.4rem;
  color:var(--muted);
  max-width:760px;
}
.roles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
  margin:1.2rem 0 1.8rem;
}
.role-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
}
.role-card h3{
  margin:.2rem 0 .4rem;
  font-size:1.05rem;
}
.role-card p{
  margin:.2rem 0 .6rem;
  color:var(--muted);
  font-size:.95rem;
}
.role-card ul{
  margin:.2rem 0 0;
  padding-left:1rem;
  color:var(--ink);
  font-size:.92rem;
}

/* Apply Form */
.apply{
  background:linear-gradient(#fff,#fafafa);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
.apply-form{
  display:grid;
  gap:.8rem;
}
.form-row{
  display:grid;
  gap:.6rem;
}
@media (min-width:640px){
  .form-row{
    grid-template-columns:1fr 1fr;
    gap:.6rem;
  }
  .form-row textarea{
    grid-column:1 / -1;
  }
}
.apply-form input,
.apply-form select,
.apply-form textarea{
  width:100%;
  border:1px solid #e6e8ea;
  border-radius:12px;
  padding:.7rem .9rem;
  font-size:1rem;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 6px var(--ring);
}

/* FOOTER */
.site-footer{background:#fff}
.footer-inner{
  padding:2rem 1rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:.95rem;
}
.footer-inner a{
  color:var(--green);
  text-decoration:none;
}
.footer-inner a:hover{color:var(--green-2)}
.links{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* ACCESSIBILITY */
.sr-only{
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
}

/* RESPONSIVE: scale logo up on larger viewports without layout shift */
@media (min-width:480px){
  .brand{ width:230px; height:56px; }
}
@media (min-width:768px){
  .brand{ width:260px; height:64px; }
}