.contact-page{
  min-height:calc(100vh - 72px);
  padding:38px 24px 56px;
  background:
    radial-gradient(720px 380px at 78% 10%,rgba(17,105,239,.16),transparent 70%),
    radial-gradient(580px 320px at 8% 72%,rgba(14,86,198,.10),transparent 72%);
}
.contact-shell{
  max-width:1160px;
  margin:0 auto;
  padding:28px;
  border:1px solid rgba(67,132,222,.25);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(7,23,51,.92),rgba(3,14,34,.94));
  box-shadow:0 26px 80px rgba(0,3,15,.38);
}
.contact-heading{margin-bottom:18px}
.contact-heading h1,.contact-heading h2{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 6px;
  color:#f3f7ff;
  font-size:25px;
  line-height:1.35;
}
.contact-heading h1::before,.contact-heading h2::before{
  content:"";
  width:5px;
  height:25px;
  flex:0 0 auto;
  border-radius:3px;
  background:linear-gradient(180deg,#ffe070,#e9a91f);
  box-shadow:0 0 14px rgba(244,188,54,.26);
}
.contact-heading p{margin:0;color:#9cafca;font-size:14px}
.support-card{
  display:flex;
  align-items:center;
  gap:22px;
  min-height:116px;
  padding:22px 24px;
  color:#eaf3ff;
  border:1px solid rgba(62,134,230,.25);
  border-radius:14px;
  background:linear-gradient(115deg,rgba(9,32,71,.92),rgba(4,20,46,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.support-card:hover{
  color:#fff;
  border-color:rgba(67,153,255,.56);
  transform:translateY(-2px);
  box-shadow:0 15px 38px rgba(0,8,30,.34);
}
.support-icon{display:flex;flex:0 0 68px;align-items:center;justify-content:center}
.support-icon img{display:block;width:64px;height:64px}
.support-copy{display:flex;flex:1;min-width:0;flex-direction:column}
.support-copy strong{font-size:18px}
.support-copy b{color:#ffd462;font-size:18px;letter-spacing:.2px}
.support-copy small{margin-top:3px;color:#91a8c9;font-size:13px}
.support-action{
  flex:0 0 auto;
  padding:12px 19px;
  border:1px solid #258cff;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,#0967df,#198ff9);
  box-shadow:0 8px 22px rgba(16,111,232,.25);
  font-size:14px;
  font-weight:700;
}
.support-action span{margin-left:9px}
.social-section{
  margin-top:30px;
  padding-top:28px;
  border-top:1px solid rgba(68,126,204,.16);
}
.contact-heading-small h2{font-size:21px}
.contact-heading-small h2::before{height:21px}
.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.social-card{
  display:flex;
  min-width:0;
  min-height:218px;
  padding:20px 14px 14px;
  align-items:center;
  flex-direction:column;
  color:#e8f1ff;
  text-align:center;
  border:1px solid rgba(64,127,213,.25);
  border-radius:13px;
  background:linear-gradient(155deg,rgba(8,29,63,.95),rgba(4,17,39,.96));
  box-shadow:0 10px 28px rgba(0,5,20,.18);
}
.social-card:hover{
  color:#fff;
  border-color:rgba(59,147,255,.58);
  transform:translateY(-3px);
  box-shadow:0 15px 36px rgba(0,7,27,.35);
}
.social-card img{display:block;width:52px;height:52px;margin-bottom:12px}
.social-card strong{font-size:15px;line-height:1.4}
.social-card > span{
  min-height:38px;
  margin:4px 0 12px;
  color:#ffd462;
  font-size:12.5px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.social-card em{
  width:100%;
  margin-top:auto;
  padding:8px 9px;
  color:#82beff;
  border:1px solid rgba(45,116,218,.5);
  border-radius:5px;
  font-size:12px;
  font-style:normal;
}
.social-card em span{float:right}
.brand-note{
  margin-top:24px;
  padding:15px 18px;
  color:#8fa5c5;
  text-align:center;
  border:1px solid rgba(69,130,212,.18);
  border-radius:9px;
  background:rgba(4,17,39,.64);
  font-size:13px;
}
.brand-note a{color:#ffd462;font-weight:700}
@media(max-width:900px){
  .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .contact-page{padding:22px 13px 38px}
  .contact-shell{padding:19px 15px}
  .contact-heading h1{font-size:21px}
  .support-card{align-items:flex-start;flex-wrap:wrap;gap:14px;padding:18px}
  .support-icon{flex-basis:52px}
  .support-icon img{width:52px;height:52px}
  .support-copy strong,.support-copy b{font-size:16px}
  .support-action{width:100%;text-align:center}
}
@media(max-width:420px){
  .social-grid{grid-template-columns:1fr}
  .social-card{min-height:200px}
}