:root{
  --grad-start:#a52a2a;
  --grad-mid1:#64311a;
  --grad-mid2:#a52a2a;
  --grad-end:#000000;
  --accent:#6a1424;
  --accent-blue:#a52a2a;
  --bg:#fffdfd;
  --surface:#ffffff;
  --surface-2:#f0f2fa;
  --border:#e2e4f0;
  --text-primary:#0d0d1a;
  --text-body:#2e2e42;
  --err:#c0392b;
  --err-bg:#fff5f5;
  --err-ring:rgba(192,57,43,0.12);
  --focus-ring:rgba(165,42,42,0.13);
}

.outer{
  max-width:820px;
  margin:0 auto;
}

/* ── MASTHEAD ── */
.masthead{
  background:linear-gradient(135deg,var(--grad-start),var(--grad-mid1),var(--grad-mid2),var(--grad-end));
  border-radius:20px 20px 0 0;
  padding:3rem 3rem 2.4rem;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:2rem;
}

.mh-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:40px 40px;
}

.mh-circle{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.06);
  right:-80px;
  top:-80px;
}

.mh-circle-2{
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.05);
  right:10px;
  top:10px;
}

.mh-left{position:relative;z-index:1;}

.mh-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:4px;
  padding:4px 12px;
  margin-bottom:1rem;
}

.mh-tag-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff9999;
  animation:blink 1.8s ease-in-out infinite;
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}

.mh-tag-txt{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
}

.mh-h1{
  
  font-size:40px;
  color:#ffffff;
  line-height:0.92;
  margin-bottom:0.6rem;
  letter-spacing:0.04em;
}

.mh-h1-accent{
  color:#ffaaaa;
}

.mh-desc{
  font-size:13px;
  color:rgba(255,255,255,0.4);
  font-weight:300;
  max-width:340px;
  line-height:1.6;
}

.mh-right{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.mh-year{
  
  font-size:5rem;
  line-height:1;
  color:rgba(255,255,255,0.08);
  letter-spacing:0.06em;
}

.mh-steps{
  display:flex;
  gap:6px;
}

.mh-step{
  width:28px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.15);
}

.mh-step.on{
  background:#ffaaaa;
}

/* ── BODY PANEL ── */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 20px 20px;
  padding:2.6rem 3rem 2.4rem;
}

/* ── SECTION LABELS ── */
.sec{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:1.4rem;
}

.sec-bar{
  width:3px;
  height:22px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--grad-start),var(--grad-end));
  flex-shrink:0;
}

.sec-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-primary);
}

.sec-rule{
  flex:1;
  height:1px;
  background:var(--border);
}

/* ── GRID ── */
.g2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-bottom:1.2rem;
}

/* ── FIELD ── */
.fld{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.flabel{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-primary);
}

.flabel-icon{
  width:12px;
  height:12px;
  fill:var(--accent);
  flex-shrink:0;
}

/* input wrapper for icon */
.iw{
  position:relative;
}

.iw-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  fill:var(--border);
  pointer-events:none;
  transition:fill .2s;
  z-index:1;
}

.iw input,
.iw select{
  width:100%;
  height:50px;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:0 16px 0 40px;  
  font-size:14px;
  color:var(--text-body);
  background:var(--surface-2);
  outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
  -webkit-appearance:none;
  appearance:none;
}

.iw input::placeholder{
  color:#b0b3c8;
  font-size:13px;
}

.iw input:focus,
.iw select:focus{
  border-color:var(--grad-start);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--focus-ring);
}

.iw input:focus ~ .iw-icon,
.iw select:focus ~ .iw-icon{
  fill:var(--accent);
}

.fld.err .iw input,
.fld.err .iw select{
  border-color:var(--err);
  background:var(--err-bg);
  box-shadow:0 0 0 4px var(--err-ring);
}

/* select arrow */
.sel-wrap{position:relative;}
.sel-arrow{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.sel-arrow svg{width:13px;height:13px;fill:#b0b3c8;}

/* phone row */
.phone-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:8px;
}

/* error msg */
.emsg{
  display:none;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--err);
  font-weight:500;
  padding-left:2px;
}

.emsg svg{
  width:11px;
  height:11px;
  fill:var(--err);
  flex-shrink:0;
}

.fld.err .emsg{
  display:flex;
}

/* ── GAP BETWEEN SECTIONS ── */
.sec-gap{
  margin-top:2rem;
}

/* ── DIVIDER ── */
.div-line{
  height:1px;
  background:var(--border);
  margin:2rem 0 1.6rem;
}

/* ── FOOTER ── */
.foot{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
}

.sbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:52px;
  padding:0 2.4rem;
  border:none;
  border-radius:12px;
  cursor:pointer;
  
  font-size:15px;
  font-weight:700;
  color:#ffffff;
  background:linear-gradient(135deg,var(--grad-start),var(--grad-mid1),var(--grad-end));
  background-size:200% 200%;
  background-position:left center;
  transition:background-position .4s ease,transform .15s,box-shadow .2s;
}

.sbtn:hover{
  background-position:right center;
  box-shadow:0 10px 32px rgba(165,42,42,0.38);
  transform:translateY(-1px);
}

.sbtn:active{
  transform:scale(0.98);
}

.sbtn-icon{
  width:17px;
  height:17px;
  fill:#ffffff;
}

.snote{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:#9a9bb8;
}

.snote-icon{
  width:13px;
  height:13px;
  fill:#b0b3c8;
  flex-shrink:0;
}

/* ── SUCCESS ── */
.succ{
  display:none;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg,rgba(165,42,42,0.06),rgba(0,0,0,0.04));
  border:1.5px solid rgba(165,42,42,0.2);
  border-radius:14px;
  padding:1.2rem 1.4rem;
  margin-top:1rem;
  font-size:14px;
  color:var(--text-body);
  font-weight:500;
}

.succ.show{display:flex;}

.succ-icon{
  width:24px;
  height:24px;
  fill:var(--grad-start);
  flex-shrink:0;
}

@media(max-width:620px){
  .masthead{
    grid-template-columns:1fr;
    padding:2rem 1.6rem 1.8rem;
  }
  .mh-right{display:none;}
  .panel{padding:1.8rem 1.6rem 2rem;}
  .g2{grid-template-columns:1fr;}
  .phone-row{grid-template-columns:1fr;}
}