/* ============ CONTACT PAGE ============ */

.contact-hero{padding-top:64px;padding-bottom:48px;}
.contact-hero-inner{max-width:720px;}
.contact-hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.1;margin-top:16px;}
.contact-hero .sub{margin-top:18px;font-size:17px;color:var(--ink-soft);}

.ref-banner{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:26px;padding:11px 18px;border-radius:100px;
  background:rgba(31,207,140,.1);border:1px solid rgba(31,207,140,.35);
  font-size:14px;color:var(--ink);
}
.ref-banner.is-hidden{display:none;}
.ref-banner svg{width:16px;height:16px;stroke:var(--mint);flex-shrink:0;}
.ref-banner strong{font-family:var(--font-mono);color:var(--mint);letter-spacing:.02em;}

/* ---- channel cards ---- */
.channels-section{padding:12px 0 8px;}
.channels-grid{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;
}
@media(max-width:900px){.channels-grid{grid-template-columns:1fr;}}

.channel-card{
  display:flex;gap:16px;align-items:flex-start;
  padding:26px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.channel-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 16px 34px -18px rgba(14,26,38,.25);}

.channel-primary{
  background:linear-gradient(155deg,#0B4DA1,#0E1A26);
  border-color:transparent;color:#fff;
}
.channel-primary:hover{border-color:transparent;box-shadow:0 18px 40px -16px rgba(11,77,161,.55);}
.channel-primary .channel-top h3,
.channel-primary .channel-body p{color:#fff;}
.channel-primary .channel-time{background:rgba(255,255,255,.16);color:#fff;}
.channel-primary .channel-cta{color:#8FD1FF;}
.channel-primary .channel-icon{background:rgba(255,255,255,.14);color:#fff;}

.channel-icon{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(31,207,140,.12);color:var(--mint);
}
.channel-icon svg{width:22px;height:22px;}
.channel-icon-blue{background:rgba(30,136,229,.12);color:var(--blue);}
.channel-icon-mint{background:rgba(255,145,66,.12);color:var(--amber);}

.channel-body{flex:1;min-width:0;}
.channel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.channel-top h3{font-family:var(--font-display);font-weight:800;font-size:19px;}
.channel-time{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  padding:4px 10px;border-radius:100px;background:var(--bg-soft);color:var(--ink-soft);white-space:nowrap;
}
.channel-time-fast{background:rgba(31,207,140,.14);color:#12915f;}
.channel-body p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.channel-cta{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--blue);}

.channels-note{
  margin-top:26px;text-align:center;font-size:13.5px;color:var(--ink-soft);
  font-family:var(--font-mono);letter-spacing:.01em;
}

/* ---- form ---- */
.form-section{padding-top:88px;}
.form-inner{max-width:640px;}
.form-head h2{font-size:clamp(26px,3.6vw,36px);margin-top:14px;}
.form-head .sub{margin-top:12px;}

.lead-form{margin-top:38px;display:flex;flex-direction:column;gap:18px;}
.hp-field{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}

.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field label{font-size:13.5px;font-weight:600;color:var(--ink);}
.form-field input,.form-field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 15px;outline:none;transition:border-color .2s;resize:vertical;
}
html[dir="rtl"] .form-field input,html[dir="rtl"] .form-field textarea{font-family:'Tajawal',sans-serif;}
.form-field input:focus,.form-field textarea:focus{border-color:var(--blue);}

#leadSubmitBtn{align-self:flex-start;}
.form-msg{font-size:14px;min-height:20px;}
.form-msg.success{color:#12915f;}
.form-msg.error{color:#D64545;}

@media(max-width:768px){
  .contact-hero{padding-top:44px;}
  .form-section{padding-top:56px;}
}