/* =========
   Base (mobile-first)
   ========= */
:root{
  --bg:#0f1311;
  --card:#161b18;
  --accent:#e7c77e;
  --text:#f5f4ee;
  --muted:#c9d0c7;
  --font-heading:'Cinzel', serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Inter,sans-serif;

  /* spacing scale (mobile) */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* utility stacks for clean vertical rhythm */
.stack-sm>*+*{margin-top:var(--s2)}
.stack>*+*{margin-top:var(--s3)}
.stack-lg>*+*{margin-top:var(--s4)}
.stack-xl>*+*{margin-top:var(--s5)}
.hidden{display:none}

/* =========
   Hero (mobile)
   ========= */
.hero{
  position:relative;
  text-align:center;
  padding:72px var(--s3);
  overflow:hidden;
  /* Irish gradient */
  background:linear-gradient(135deg,#0b5e2a 0%,#d7671a 100%);
}

/* Watermark kept away from copy on small screens (very faint) */
.hero::before{
  content:"HUMANGUAGE";
  position:absolute;
  left:-10%;
  bottom:-6%;
  transform:rotate(-6deg);
  font-size:16vw;                    /* scales with viewport width on mobile */
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(255,255,255,.05);
  filter:blur(.4px);
  pointer-events:none;
  z-index:0;
}

/* Radial scrim ensures bulletproof contrast under text area */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%,
              rgba(0,0,0,.70) 0%,
              rgba(0,0,0,.55) 35%,
              rgba(0,0,0,.18) 70%,
              rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:0;
}

/* Content card */
.hero-content{
  position:relative; z-index:1;
  max-width:680px; margin:0 auto;
  background:rgba(12,12,12,.78);
  padding:24px var(--s3);
  border-radius:var(--radius);
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.hero h1{
  margin:0;
  font-family:var(--font-heading);
  font-weight:600; color:var(--accent);
  text-shadow:0 1px 0 #000, 0 6px 18px rgba(0,0,0,.45);
  letter-spacing:.02em;
}
.lead{max-width:60ch; margin:0 auto;}

/* CTA button */
.cta{
  display:inline-block; background:var(--accent); color:#1a1a1a;
  font-weight:700; border-radius:12px; padding:14px 22px;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .06s ease, filter .15s ease;
}
.cta:active{transform:translateY(1px)}
.cta:hover{filter:brightness(1.05)}

/* =========
   Sections (mobile)
   ========= */
section{
  padding:var(--s5) var(--s3);
  max-width:880px; margin:auto;
}
h2,h3{
  font-family:var(--font-heading);
  color:var(--accent);
  text-align:center; margin:0 0 var(--s3);
}

/* Cards (stacked on mobile) */
.cards{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
}
.card{
  background:var(--card);
  border:1px solid #263029;
  border-radius:var(--radius);
  padding:var(--s4);
  text-align:center;
}

/* =========
   Form (mobile)
   ========= */
.form-section{scroll-margin-top:80px}
form{
  display:grid; gap:var(--s3);
  background:var(--card);
  padding:var(--s4);
  border-radius:var(--radius);
  border:1px solid #263029;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.grid{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
}
.span-2{grid-column:1}
.field label{
  display:block; font-weight:600; margin-bottom:var(--s1);
}
input,select,textarea{
  width:100%; padding:14px 12px; border-radius:10px;
  border:1px solid #263029; background:#141a16; color:var(--text);
  font-size:16px; line-height:1.5; outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(231,199,126,.15);
}

/* =========
   Footer (mobile)
   ========= */
footer{
  text-align:center; padding:var(--s5) var(--s3);
  color:var(--muted); font-size:14px;
}
footer a{color:var(--accent); text-decoration:none}
footer a:hover{text-decoration:underline}

/* =========
   Enhancements for wider screens
   ========= */
@media (min-width: 768px){
  .hero{ padding:104px var(--s3); }
  .hero::before{
    /* move watermark further out and scale up on desktop */
    left:6%;
    bottom:-10%;
    font-size:12rem;
  }
  .hero-content{ padding:32px var(--s4); max-width:780px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .span-2{ grid-column:span 2; }
}