/* ORYN Landing v7 — narrower form, lighter weights, darker body gray */
*{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:#FFFFFF;
  background:#001250;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Fixed gradient layer so it never repeats (desktop / tablet default = RADIAL) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(1200px 800px at 50% 30%, #001D83 0%, #001250 60%, #000A2A 100%);
  background-repeat:no-repeat;
}

.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(24px, 4vw, 56px);
}
.container{
  width:100%;
  max-width:900px;
  text-align:center;
  margin-inline:auto;
}

.logo-img{
  height:clamp(140px, 11vw, 140px);
  margin-bottom:clamp(10px, 0vw, 10px);
  filter:drop-shadow(0 8px 28px rgba(255,255,255,.18));
  user-select:none;
}

/* lighter headline weight + responsive size */
.headline{
  font-weight:400; /* stronger than 300, gives it authority */
  font-size:clamp(28px, 5vw, 44px); /* scales smoothly mobile → desktop */
  line-height:1.15;
  color:#E9B500;
  margin:0 auto clamp(12px, 2vw, 20px);
  max-width:740px;
}

/* control where the line breaks */
.mobile-break { display:none; }

@media (max-width: 600px){
  .headline{
    font-size:clamp(26px, 7vw, 36px); /* scales smaller, fits mobile better */
    line-height:1.2;
    margin-bottom:18px;
  }
  .mobile-break{ display:inline; }
}

/* body slightly darker gray so white pops more */
.lead{
  margin:0 auto clamp(18px, 2.2vw, 18px);
  max-width:740px;
  font-size:clamp(15px, 1.35vw, 18px);
  line-height:1.55;
  color:#C7CEDB; /* darker than v6 */
  font-weight:400; /* lighter body */
}
.lead strong{color:#FFFFFF;font-weight:600}

/* keep label accessible but visually hidden */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* form width locked to the same as body/headline */
.form-wrap{
  max-width:740px;
  margin:clamp(10px, 1.8vw, 20px) auto 0;
  width:100%;
}
.signup{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.signup input{
  flex:1 1 360px;
  min-width:240px;
  height:50px;
  padding:0 16px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.12);
  color:#fff;
  outline:none;
}
.signup input::placeholder{color:rgba(255,255,255,.72)}
.signup input:focus{
  border-color:#00E9B5;
  box-shadow:0 0 0 3px rgba(0,233,181,.35);
}

.cta{
  height:50px;
  padding:0 20px;
  border:none;
  border-radius:9999px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(90deg, #E9B500, #F2D67A);
  color:#0A0A0A;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cta:hover{
  background:linear-gradient(90deg, #00E9B5, #66F0D6);
  color:#001250;
}
.cta:focus-visible{outline:3px solid #00E9B5; outline-offset:2px}
.cta:active{transform:translateY(1px)}

.form-message{
  width:100%;
  margin-top:8px;
  font-size:14px;
  font-weight:600;
}

/* mobile optimizations */
@media (max-width: 600px){
  .logo-img{height:clamp(70px, 13vw, 110px); margin-bottom:4px}
  .headline{font-size:clamp(26px, 6vw, 34px); margin-bottom:18px}
  .lead{font-size:16px; margin-bottom:18px}
  .cta{width:100%}

  /* Mobile gradient override = LINEAR (smoother on tall screens) */
  body::before{
    background:linear-gradient(to bottom, #001D83 0%, #001250 60%, #000A2A 100%);
  }
}