/* Shared styles for Zyptex multi-page site */
:root{
  --bg1:#071028; --bg2:#071427; --accent:#7b5cff; --accent2:#4fd1c5;
  --card: rgba(255,255,255,0.03); --glass: rgba(255,255,255,0.04);
  --muted: rgba(230,238,248,0.75); --radius:12px; --maxw:1100px;
}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#e6eef8;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:1rem}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;position:sticky;top:0;background:linear-gradient(180deg, rgba(8,10,20,0.55), rgba(8,10,20,0.25));backdrop-filter:blur(6px);z-index:20;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:inherit}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-grid;place-items:center;color:#021826;font-weight:800}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{padding:.45rem .7rem;border-radius:999px;font-weight:600;color:var(--muted);text-decoration:none}
.nav a.active, .nav a:hover{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#021826}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#021826;padding:.45rem .9rem;border-radius:999px}

/* hero */
.hero{display:flex;gap:1rem;align-items:flex-start;padding:2.6rem 0}
.hero-left{flex:1}
.eyebrow{background:var(--glass);display:inline-block;padding:.35rem .6rem;border-radius:999px;font-weight:700;color:var(--muted)}
.title{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.6rem 0 0}
.lead{color:var(--muted);max-width:60ch}
.hero-cta{display:flex;gap:.6rem;margin-top:.8rem}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#021826;padding:.55rem .9rem;border-radius:10px;text-decoration:none;font-weight:700}
.btn.ghost, .card .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

/* cards/grid */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.project-mini{display:flex;gap:.6rem;align-items:center}
.project-mini img{width:84px;height:56px;border-radius:8px;object-fit:cover}

/* stats */
.stats{display:flex;gap:1rem;margin-top:1rem}
.stat{background:var(--card);padding:.6rem .8rem;border-radius:10px;text-align:center;min-width:90px}
.stat-value{font-weight:800;font-size:1.2rem}
.stat-label{color:var(--muted);font-size:.85rem}

/* layout utilities */
.section{padding:2.2rem 0}
.split{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:start}

/* footer */
.site-footer{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}
.muted{color:var(--muted)} .small{font-size:.9rem}

/* responsive */
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.nav{display:none}}
@media (max-width:520px){.grid{grid-template-columns:1fr}.hero{flex-direction:column}}

/* live background */
#bg-live{position:fixed;inset:0;background:radial-gradient(circle at 10% 20%, rgba(79,209,197,0.10), transparent 8%), radial-gradient(circle at 80% 80%, rgba(123,92,255,0.10), transparent 8%);pointer-events:none;z-index:0;overflow:hidden}
.bg-orb{position:absolute;right:-10vw;top:-10vh;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);mix-blend-mode:screen;animation:float 12s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(24px)}100%{transform:translateY(0)}}

/* project card specifics */
.project-card{display:flex;flex-direction:column;gap:.6rem}
.project-card h3{margin:0}
.pill{display:inline-block;padding:.3rem .6rem;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:700;text-decoration:none;color:var(--muted)}

/* rating stars */
.rating{display:inline-flex;gap:4px;align-items:center}
.star{font-size:18px}

/* small utility for hidden accessible text */
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}


/* ===== Modern contact form ===== */
.contact-form-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  padding: 1.6rem 1.8rem;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 50px rgba(0,0,0,0.45);
}

.contact-form-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

.contact-form-card p.muted {
  margin-bottom: 1rem;
  color: rgba(230,238,248,0.8);
}

/* input + textarea styling */
.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.3rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #eaf2ff;
  font-size: 0.95rem;
  transition: border 0.2s ease, background 0.2s ease;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-a);
  box-shadow: 0 0 0 2px rgba(124,92,255,0.3);
}

/* label and layout */
.contact-form-card label {
  display: block;
  margin-bottom: 1rem;
}

.contact-form-card label span {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: rgba(230,238,248,0.9);
  font-size: 0.9rem;
}

/* grid layout for first two fields */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

/* action buttons */
.form-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.form-actions .btn {
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
}

.form-actions .btn.primary {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  color: #255e80;
}

.form-actions .btn.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(230,238,248,0.9);
  transition: all 0.3s ease;
}

.form-actions .btn.ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent-a);
}