/* Contact page — KS HackZone
   Uses variables from layout.css (:root)  */

   .contact-hero{
    display:grid; gap:.6rem; place-items:center; text-align:center;
    padding:10px 0 18px;
  }
  .contact-hero .chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.28rem .6rem; border-radius:999px; font-weight:700; letter-spacing:.2px;
    background:linear-gradient(180deg,#ffffff24,#ffffff12);
    border:1px solid var(--stroke);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  .contact-hero h1{
    font-size:clamp(1.6rem, 2.2vw + 1rem, 2.2rem);
    line-height:1.2; margin:0;
  }
  .contact-hero p{
    margin:0; max-width:820px; color:var(--muted)
  }
  
  /* Cards grid */
  .contact-grid{
    display:grid; gap:1rem; margin-top:18px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  @media (max-width: 1080px){
    .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width: 720px){
    .contact-grid{grid-template-columns:1fr}
  }
  
  .contact-card{
    position:relative;
    background:
      radial-gradient(260px 180px at 20% 0%, #8a64ff2a, transparent 60%),
      linear-gradient(180deg,#ffffff20,#ffffff10);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter: blur(12px) saturate(140%);
    padding:18px;
    transition:.2s transform, .2s filter, .2s border-color;
  }
  .contact-card:hover{transform:translateY(-2px); filter:brightness(1.02); border-color:#7d69e955}
  
  .card-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.2rem}
  .ico-wrap{
    width:46px; height:46px; border-radius:14px; flex:0 0 46px;
    display:grid; place-items:center;
    background:linear-gradient(180deg,#6c3cff33,#a176ff22);
    border:1px solid #a176ff55;
    box-shadow:0 8px 22px rgba(108,60,255,.28), inset 0 0 8px rgba(255,255,255,.06);
  }
  .ico-wrap i{font-size:22px}
  
  .card-title h2{margin:0; font-size:1.2rem}
  .card-title p{margin:.2rem 0 0; color:var(--muted)}
  
  .card-body{margin-top:.6rem; display:grid; gap:.6rem}
  
  .pro-list{margin:.2rem 0 0; padding-left:1.1rem}
  .pro-list li{margin:.18rem 0}
  .pro-list li::marker{color:var(--accent)}
  
  .ask-list{margin:.2rem 0 0; padding-left:1.1rem}
  .ask-list li{margin:.18rem 0}
  .ask-list li::marker{color:var(--cyan)}
  
  .email-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.2rem
  }
  .email-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.44rem .66rem; border-radius:12px;
    background:var(--glass);
    border:1px solid var(--stroke);
    font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size:.95rem; color:#fff;
    transition:.2s transform, .2s background;
  }
  .email-chip:hover{transform:translateY(-1px); background:linear-gradient(180deg,#ffffff24,#ffffff12)}
  .email-chip i{font-size:18px; opacity:.9}
  
  .small-note{color:var(--muted); font-size:.95rem}
  
  .sep{
    height:1px; margin:18px 0 8px;
    background:linear-gradient(90deg, transparent, #a176ff55, transparent);
    border:0;
  }
  
  /* Support bits */
  .badge{
    display:inline-block; padding:.24rem .5rem; border-radius:10px;
    border:1px solid var(--stroke);
    background:linear-gradient(180deg,#ffffff22,#ffffff10);
    font-size:.9rem; color:#e9e6ff; margin-top:.1rem;
  }
  
  /* Footer callout on page */
  .contact-callout{
    margin-top:18px; padding:14px;
    border-radius:16px; border:1px solid var(--stroke);
    background:linear-gradient(180deg,#ffffff1f,#ffffff0f);
  }
  .contact-callout strong{color:#fff}