/* =========================================================
   Vicarion — Contact Styles · v1.0
   - Cinematic hero (CSS-only vignettes, optional bg image)
   - Glass contact cards + glass form
   - Unified buttons (gold primary, outline secondary)
   - Responsive, a11y-friendly, reduced-motion aware
   ========================================================= */

/* -------- Tokens (in sync with other pages) -------- */
:root{
  --gold:#ffc107;
  --gold-deep:#ffb300;
  --gold-soft:#ffe082;
  --ink:#000;
  --hdr-h:72px;

  --text:#e0e0e0;
  --muted:#cfcfcf;

  --glass-bg: rgba(255,255,255,.04);
  --glass-bd: rgba(255,255,255,.10);
  --elev-1: 0 10px 24px rgba(0,0,0,.35);
  --elev-2: 0 12px 28px rgba(0,0,0,.35);
}

/* -------- Base -------- */
body{
  background:#000;
  color:var(--text);
  font-family:'Poppins',sans-serif;
  padding-top: var(--hdr-h);
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }

/* =========================================================
   HERO — Contact (no heavy image required)
   Optional background image:
   .contact-hero { background-image:url("../images/contactend.png"); background-size:cover; background-position:center; }
   ========================================================= */
.contact-hero{
  position:relative;
  min-height: calc(100svh - var(--hdr-h));
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:#000;                 /* base */
  overflow:hidden; isolation:isolate;
}
.contact-hero::before{
  /* subtle gold glow near the top */
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background: radial-gradient(58% 50% at 50% 20%, rgba(255,193,7,.10), transparent 60%);
  pointer-events:none;
}
.contact-hero::after{
  /* dark vignettes to keep text readable on any bg */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 560px at 50% 25%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.82), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
  z-index:0;
}

/* Foreground content */
.hero-content--contact{
  position:relative; z-index:1;
  width:min(90%, 1100px); margin-inline:auto;
}
.eyebrow{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:.35rem;
}
.hero-title{
  font-family:'Cinzel', serif; line-height:1.12;
  font-size: clamp(2rem, 5vw, 3.2rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(0,0,0,.7);
}
.hero-subtitle{
  color:#d8d8d8; max-width:900px; margin:.6rem auto 0;
}

/* =========================================================
   Contact section — cards + form
   ========================================================= */
.contact-wrap{
  background: linear-gradient(180deg, #060606, #0b0b0b);
  content-visibility:auto; contain-intrinsic-size: 800px;
}
.section-title{
  font-family:'Cinzel', serif;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Glass utility */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-bd);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:18px;
}

/* Cards (left column) */
.contact-cards{ display:grid; }
.contact-card{
  text-align:left; padding:22px 20px; color:#e9e9e9;
}
.contact-card i{
  font-size:1.9rem; color:var(--gold);
  filter: drop-shadow(0 0 10px rgba(255,193,7,.35));
  margin-bottom:.35rem; display:block;
}
.contact-card h3{ color:#fff; margin:0 0 .2rem; }
.link-gold{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

/* Form (right column) */
.contact-form{
  padding:22px 20px;
}
.form-label{ color:#efefef; font-weight:600; }
.form-control,
.form-select{
  background: rgba(255,255,255,.03);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:.75rem .9rem;
  box-shadow: inset 0 0 0 rgba(0,0,0,0);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder{ color:#bdbdbd; }
.form-control:focus,
.form-select:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,193,7,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
}

/* Buttons (unified with other pages) */
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-get-started,
.btn-login{
  border-radius:40px; font-weight:700; padding:.9rem 1.8rem;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-get-started{
  color:#000;
  background:linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:0 0 12px rgba(255,193,7,.6), inset 0 0 24px rgba(255,193,7,.4);
  border:0;
}
.btn-login{
  color:var(--gold);
  background:rgba(255,255,255,.05);
  border:2px solid var(--gold);
  box-shadow:0 0 8px rgba(255,193,7,.7);
}
@media (hover:hover){
  .btn-get-started:hover,
  .btn-login:hover{ transform: translateY(-4px); }
}

/* Small footnote text under form */
.form-footnote{ color:#a9a9a9; }

/* =========================================================
   CTA band (matches other pages)
   ========================================================= */
.cta-band{
  background: radial-gradient(1200px 520px at 50% 100%, rgba(255,193,7,.10), transparent 60%),
              linear-gradient(180deg, #060606, #0b0b0b);
}
.cta-band .section-title{
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 992px){
  body{ padding-top:64px; }
  .contact-card, .contact-form{ padding:20px 18px; }
}
@media (max-width: 576px){
  .btn-get-started, .btn-login{ padding:.7rem 1.4rem; }
  .hero-title{ font-size: clamp(1.8rem, 6vw, 2.2rem); }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* =========================================================
   Light mode support (toggle .light-mode on <body>)
   ========================================================= */
body.light-mode{
  color:#0f0f0f; background:#f6f6f6;
}
body.light-mode .contact-hero{
  background:#f6f6f6;
}
body.light-mode .contact-hero::after{
  background:
    radial-gradient(1200px 560px at 50% 25%, rgba(0,0,0,.08), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.12), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 100%);
}
body.light-mode .glass{
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
body.light-mode .contact-card h3{ color:#111; }
body.light-mode .form-label{ color:#111; }
body.light-mode .form-control,
body.light-mode .form-select{
  color:#0f0f0f; background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12);
}
body.light-mode .form-control::placeholder{ color:#666; }