*{box-sizing:border-box}
input,textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;outline:none}
input:focus,textarea:focus{border-color:rgba(23,162,255,.6);box-shadow:0 0 0 3px rgba(23,162,255,.15)}
a.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(0,102,255,.35)}
a.btn:hover{filter:brightness(1.08) saturate(1.1);transform:translateY(-1px)}

.hero,.parallax-cta{will-change:background-position;}


/* Mobile polish */
@media (max-width: 820px){
  section{padding:56px 0}
  .headline{font-size:38px}
  .subhead{font-size:16px}
  header.nav .menu{justify-content:flex-start;gap:10px}
}

/* Robust mobile parallax for middle section */
.parallax-cta{position:relative; overflow:hidden}
.parallax-cta::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:var(--hero2-bg);
  background-size:cover;
  background-position:center 25%;
  z-index:0;
  will-change:transform;
  transform:translateY(0);
}
.parallax-cta > .inner{position:relative; z-index:1}

.parallax-cta::before{ transform: translateY(var(--p2-shift,0)); }


/* Strong parallax middle section */
.parallax-cta{position:relative; overflow:hidden; background:none}
.parallax-cta::before{
  content:"";
  position:absolute; inset:-10%;
  background-image:var(--hero2-bg);
  background-size:cover;
  background-position:center 25%;
  background-attachment:fixed;
  transform:translateY(var(--p2-shift,0));
  will-change:transform;
  z-index:0;
}
.parallax-cta > .inner{position:relative; z-index:1}


/* Robust parallax for the middle section (works on iOS/Android) */
.parallax-cta{position:relative; overflow:hidden}
.parallax-cta::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image:var(--hero2-bg);
  background-size:cover;
  background-position:center 25%;
  transform:translateY(var(--p2-shift,0));
  will-change:transform;
  z-index:0;
}
.parallax-cta > .inner{position:relative; z-index:1}



/* Cross-platform parallax fix */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center 30%;
  will-change:transform;
  transform:translateY(var(--hero-shift,0));
  z-index:0;
}
.hero .hero-content{position:relative;z-index:1}

.parallax-cta{position:relative;overflow:hidden}
.parallax-cta::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:var(--hero2-bg);
  background-size:cover;
  background-position:center 25%;
  will-change:transform;
  transform:translateY(var(--p2-shift,0));
  z-index:0;
}
.parallax-cta > .inner{position:relative;z-index:1}


/* Robust parallax setup */
.hero{will-change:background-position;}
.parallax-cta{position:relative; overflow:hidden; will-change:transform;}
.parallax-cta::before{
  content:"";
  position:absolute; inset:-12%;
  background-image:var(--hero2-bg);
  background-size:cover;
  background-position:center 25%;
  transform:translateY(var(--p2-shift,0));
  will-change:transform;
  z-index:0;
}
.parallax-cta > .inner{position:relative; z-index:1}
@media (max-width:820px){
  .headline{font-size:34px}
  .subhead{font-size:16px}
  header.nav .menu{gap:10px}
  section{padding:56px 0}
}