/* contact.css — SYDEN contact page styles (matches index.css theme) */
:root{
  --bg: #050507;
  --card: #0d0d10;
  --accent: #ff2d55;
  --accent-2: #ff6b88;
  --muted: #9aa0a6;
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --maxw: 1200px;
  --transition: 260ms cubic-bezier(.2,.9,.3,1);
}

/* small overrides + reusing global classes */
.contact-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 30px;
  align-items: center;
  min-height: 56vh;
  margin-top: 40px;
}

.contact-hero .tagline {
  font-family: Poppins, sans-serif;
  font-size: clamp(30px, 4.5vw, 44px);
  margin-bottom: 10px;
  color: #fff;
}
.contact-hero .lead { color: var(--muted); font-size: 18px; line-height:1.8; }

/* visual block */
.contact-visual { position: relative; width:420px; height:260px; border-radius:16px; overflow:visible; display:flex; align-items:center; justify-content:center; }
.cv-card { width:360px; height:200px; border-radius:14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:20px; color:white; box-shadow:0 30px 90px rgba(0,0,0,0.6); }
.cv-front { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); transform: translateY(0) rotate(-2deg); transition: transform .45s cubic-bezier(.2,.9,.3,1); }
.cv-back { position:absolute; left:10px; top:12px; width:360px; height:200px; border-radius:14px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:0.06; transform: rotate(2deg) translateY(8px); }

/* contact grid */
.contact-info-section .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:18px; }
.contact-card { background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.01)); padding:22px; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,0.6); text-align:left; }
.contact-card.wide { grid-column: span 2; }

/* form styles */
.contact-form-wrap .section-title { text-align:center; margin-bottom:8px; }
.contact-form { margin-top:18px; max-width:920px; margin-left:auto; margin-right:auto; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); padding:20px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.form-row { display:flex; gap:16px; margin-bottom:14px; }
.form-field { position:relative; flex:1; }
.input { width:100%; padding:14px 14px 14px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color: #eef1f5; outline:none; font-size:15px; transition: box-shadow .22s, transform .22s; }
.textarea-field .input { min-height:140px; resize:vertical; padding-top:18px; }

.label { position:absolute; left:14px; top:10px; color:var(--muted); font-size:13px; pointer-events:none; transition:transform .18s ease, font-size .18s, top .18s; transform-origin: left top; }

/* on focus or when input has value float label */
.input:focus + .label,
.input:not(:placeholder-shown) + .label,
.input:not([value=""]) + .label {
  transform: translateY(-18px) scale(.86);
  top:6px;
  font-size:12px;
  color:var(--accent);
}

/* actions */
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.submit-btn { padding:12px 18px; border-radius:12px; font-weight:700; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:white; border:0; cursor:pointer; transition: transform var(--transition); }
.submit-btn:hover { transform: translateY(-3px); }
.reset-btn { padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:#fff; }

/* form status */
.form-status { margin-top:12px; color:var(--muted); }

/* trust section */
.trust-section { margin-top:36px; text-align:center; }

/* small niceties */
[data-animate]{ opacity:0; transform: translateY(20px); transition: all .8s cubic-bezier(.2,.9,.3,1); }
[data-animate].visible { opacity:1; transform:none; }

/* hover micro-interaction */
.contact-card:hover { transform: translateY(-6px); box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(255,45,85,0.06); transition: all .36s; }

/* responsive */
@media (max-width: 980px) {
  .contact-hero { grid-template-columns: 1fr; gap:18px; text-align:center; }
  .contact-visual { width:100%; height:220px; display:flex; justify-content:center; }
  .form-row { flex-direction:column; }
  .contact-card.wide { grid-column: auto; }
  .cv-card { width:92%; }
}