/* Contact page — styles specific to contact.html (shared rules live in css/site.css) */

.hero{padding:92px 0 66px;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(45,168,255,.15);filter:blur(26px);right:-170px;top:-230px}
.hero:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(142,240,199,.08);filter:blur(30px);left:-220px;bottom:-250px}
.hero-inner{max-width:850px}
h1{font-size:clamp(44px,7vw,74px)}
.hero-copy{max-width:760px;margin:0}

section{padding:78px 0}
.contact-layout{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:start
}

.contact-info{
  position:sticky;top:112px;
  display:grid;gap:18px
}
.panel{
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:var(--shadow)
}
.info-card{padding:28px}
.info-card h2{
  font-size:34px;line-height:1.08;letter-spacing:-.035em;margin:0 0 16px
}
.info-card p{color:var(--muted);margin:0 0 18px}
.fit-list{display:grid;gap:10px;margin-top:18px}
.fit-item{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  align-items:start;color:#d8e6ee;font-size:14px
}
.fit-item .check{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(142,240,199,.12);color:var(--accent);
  font-size:12px;font-weight:800;margin-top:1px
}

.expect-card{padding:24px}
.expect-card h3{margin:0 0 14px;font-size:18px}
.expect-steps{display:grid;gap:14px}
.expect-step{
  display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start
}
.expect-step span:first-child{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:rgba(45,168,255,.10);
  color:#8fe5ff;font-size:12px;font-weight:800
}
.expect-step strong{display:block;font-size:14px;margin-bottom:2px}
.expect-step small{color:var(--muted);font-size:13px}

.form-card{padding:32px}
.form-card h2{
  font-size:32px;letter-spacing:-.03em;margin:0 0 7px
}
.form-intro{color:var(--muted);margin:0 0 28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:700;color:#dce8ef}
.required{color:#8fe5ff}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:#0a1727;
  color:var(--text);
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease
}
input::placeholder,textarea::placeholder{color:#6f8799}
input:focus,select:focus,textarea:focus{
  border-color:rgba(98,208,255,.58);
  box-shadow:0 0 0 4px rgba(45,168,255,.08)
}
textarea{min-height:160px;resize:vertical}
#tech_context{min-height:110px}
select{appearance:auto}

.hint{color:#7f97a8;font-size:12px}
.radio-group{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
.radio-option{
  position:relative
}
.radio-option input{
  position:absolute;opacity:0;pointer-events:none
}
.radio-option label{
  display:block;height:100%;
  padding:12px 13px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  cursor:pointer;color:#c7d6e1
}
.radio-option input:checked + label{
  border-color:rgba(98,208,255,.58);
  background:rgba(45,168,255,.09);
  color:#eaf8ff
}

.form-footer{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line)
}
.privacy{color:#7f97a8;font-size:12px;margin:0 0 16px}
.contact-result{margin:0 0 14px;font-size:14px}
.submit-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.submit-note{color:#8ea5b6;font-size:12px;max-width:360px}

.alt-contact{padding-top:0}
.alt-box{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  padding:32px;border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,.025)
}
.alt-box h3{font-size:24px;margin:0 0 7px}
.alt-box p{margin:0;color:var(--muted)}

@media(max-width:920px){
  .contact-layout{grid-template-columns:1fr}
  .contact-info{position:static}
}
@media(max-width:640px){
  nav{min-height:70px}.brand img{height:39px}
  .hero{padding:64px 0 54px}
  .hero-copy{font-size:17px}
  .form-grid{grid-template-columns:1fr}
  .radio-group{grid-template-columns:1fr}
  .form-card,.info-card{padding:24px}
  .alt-box{grid-template-columns:1fr}
}