:root{
  --bg:#0f1724; --card:#0b1220; --text:#e6eef8; --muted:#9fb0c8; --accent:#6ee7b7;
  --radius:12px; --gap:18px; --container:1100px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --transition-fast: 180ms;
  --transition-medium: 320ms;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#071025 0%, #08122a 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:var(--container);margin:0 auto;padding:28px}

.sr-only{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* HEADER */
.site-header{position:sticky;top:0;background:rgba(2,6,12,.45);backdrop-filter:blur(6px);z-index:10;border-bottom:1px solid rgba(255,255,255,.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo{font-size:1.15rem;margin:0}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px;font-size:.95rem;transition:color var(--transition-fast)}
.nav a:hover{color:var(--text)}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:36px 0;position:relative}
.hero h2{font-size:2.2rem;margin:.2rem 0}
.lead{color:var(--muted);max-width:46ch;margin-bottom:0} /* margin handled by button-group */
.cta{background:var(--accent);color:#042024;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;display:inline-block;transition:transform var(--transition-fast)}
.cta:active{transform:translateY(1px)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;cursor:pointer;margin-left:12px}

.button-group{margin-top:22px}

/* hero image wrapper */
.hero-img-wrap{
  width:100%;
  height:260px;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(2,8,20,0.45);
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center;
  animation: float 6s ease-in-out infinite;
}

/* overlay for readability */
.hero-img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,8,0.35), rgba(2,6,8,0.45));
  pointer-events:none;
}

@keyframes float {
  0% { transform: translateY(0) rotate(-0.12deg); }
  50% { transform: translateY(-6px) rotate(0.1deg); }
  100% { transform: translateY(0) rotate(-0.12deg); }
}

/* sections, cards */
.section{padding:28px 0;border-top:1px solid rgba(255,255,255,.02)}
.section h3{margin:0 0 8px 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:18px}

/* card styles */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.03);
  transition: transform var(--transition-medium) cubic-bezier(.2,.9,.3,1), box-shadow var(--transition-medium), background var(--transition-medium);
  overflow: hidden;
  text-align: center;
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  min-height: 240px;
}
.card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(2,8,20,0.45); background: rgba(255,255,255,0.03); }

.card-img{ width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:12px; transition: transform .4s ease, filter .4s ease; display:block; flex-shrink:0; }
.card:hover .card-img{ transform: scale(1.06); filter: brightness(1.05); }

.card .caption{ margin-top:auto; padding-top:8px; color:var(--muted); font-size:.95rem; opacity:.9; transition: opacity .3s ease, color .3s ease; }
.card:hover .caption{ opacity:1; color:var(--text); }

/* forms, tags */
.tags{list-style:none;padding:0;margin:10px 0 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tags li{background:rgba(255,255,255,.03);padding:6px 10px;border-radius:999px;font-size:.95rem;color:var(--muted)}

.contact form{max-width:640px}
label{display:block;margin-bottom:10px}
label input, label textarea{width:100%}
input,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);color:var(--text)}
.form-actions{display:flex;gap:8px;margin-top:8px}

.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,.02);margin-top:28px;text-align:center;color:var(--muted)}

/* reveal (initial hidden state) */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .hero-img, .card, .reveal { animation: none !important; transition: none !important; transform:none !important; }
}

/* responsive */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:18px}
  .hero-img-wrap{height:160px}
  .nav{display:none}
  .card{min-height:unset}
  .card-img{height:140px}
}