/* --------------- Design tokens & fonts --------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --max-width:1200px;
  --container-padding:1rem;
  --brand-600:#0f766e; /* teal */
  --brand-400:#10b981;
  --bg:#f8fafc;
  --card-bg:#ffffff;
  --muted:#64748b;
  --shadow-lg:0 20px 50px rgba(2,6,23,0.12);
  --rounded:14px;
}

/* global */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#0f172a;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

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

/* container */
.container{
  max-width:var(--max-width);
  padding:0 var(--container-padding);
  margin:0 auto;
}

/* header */
.site-header{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:90;
  border-bottom:1px solid rgba(15,23,42,0.04);
  box-shadow: 0 2px 8px rgba(2,6,23,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 0;
}
.logo{
  font-weight:800;
  color:var(--brand-600);
  font-size:1.125rem;
  text-decoration:none;
}
.main-nav{
  display:flex;
  gap:1rem;
  align-items:center;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:0.5rem;
  border-radius:8px;
  font-weight:600;
}
.main-nav a.cta, .main-nav a.cta:visited{ color:inherit; }
.main-nav a.cta{
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  color:white;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(15,118,110,0.12);
}
.main-nav a:hover{ transform:translateY(-2px); transition:transform .18s; }

/* nav toggle (mobile) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:1.4rem;
  padding:0.25rem;
  cursor:pointer;
}

/* hero */
.hero{
  background-image: url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1600&q=80&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  position:relative;
  color:white;
  padding:6rem 0;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,0.40), rgba(2,6,23,0.18));
  z-index:0;
}
.hero-inner{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; }
.hero-title{
  margin:0 0 1rem;
  font-weight:800;
  font-size:clamp(2rem, 5.5vw, 3.75rem);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.lead{ color:rgba(255,255,255,0.95); font-size:1.05rem; margin-bottom:1.5rem; }

/* buttons */
.btn-primary{
  display:inline-block;
  background: linear-gradient(90deg, #06b6d4, #0ea5a4);
  color:white;
  padding:0.75rem 1.15rem;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(6,182,196,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(6,182,196,0.14); }
.btn-primary:focus{ outline:3px solid rgba(14,165,132,0.18); outline-offset:4px; }
.btn-secondary{
  display:inline-block;
  color:var(--brand-600);
  padding:.45rem .75rem;
  border-radius:10px;
  border:1px solid rgba(15,118,110,0.08);
  background:transparent;
  font-weight:600;
  text-decoration:none;
}

/* sections and cards */
.section{ padding:3.25rem 0; }
.section h2{ margin-top:0; font-size:1.4rem; color:#0f172a; }
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin-top:1rem; }
.card{
  padding:1.25rem;
  border-radius:var(--rounded);
  background:var(--card-bg);
  box-shadow:var(--shadow-lg);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 28px 80px rgba(2,6,23,0.12); }

/* small utility */
.text-muted{ color:var(--muted); }

/* CONTACT PANEL (floating) */
.contact-panel{
  position:fixed;
  right:20px;
  bottom:20px;
  width:360px;
  max-width:calc(100% - 40px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96));
  backdrop-filter: blur(6px);
  border-radius:14px;
  box-shadow:0 30px 70px rgba(2,6,23,0.15);
  padding:14px;
  transform:translateY(14px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .22s;
  z-index:120;
}
.contact-panel.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.contact-close{
  position:absolute; right:10px; top:10px; background:transparent; border:0; font-size:16px; cursor:pointer;
}
.contact-inner h3{ margin:0 0 .5rem; font-size:1.05rem; }
.contact-form label{ display:block; margin-bottom:0.6rem; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:0.6rem;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  font-size:0.95rem;
}
.contact-form textarea{ resize:vertical; min-height:84px; }
.contact-actions{ display:flex; gap:.6rem; margin-top:.6rem; align-items:center; }
.contact-status{ margin-top:.6rem; color:var(--muted); font-size:.95rem; }

/* ABOUT CARD (inline, under the About h2) */
.about-card{
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:1.25rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  border-radius:12px;
  box-shadow:0 12px 30px rgba(2,6,23,0.06);
  transform:translateY(18px);
  opacity:0;
  transition: transform .48s cubic-bezier(.2,.9,.25,1), opacity .36s ease;
  will-change: transform, opacity;
}
.about-card.reveal{
  transform:translateY(0);
  opacity:1;
}
.about-img{
  width:120px;
  height:120px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 120px;
  box-shadow:0 8px 24px rgba(2,6,23,0.08);
}
.about-body{ flex:1 1 auto; min-width:0; }
.about-name{ margin:0 0 .25rem; font-size:1.125rem; font-weight:700; }
.about-desc{ margin:0 0 .9rem; color:var(--muted); line-height:1.45; }
.about-cta a{ margin-right:.6rem; text-decoration:none; }

/* Responsive */
@media (max-width:900px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .contact-panel{ width:320px; right:16px; bottom:16px; }
}
@media (max-width:700px){
  .main-nav{ display:none }
  .nav-toggle{ display:block }
  .cards{ grid-template-columns:1fr }
  .contact-panel{ left:12px; right:12px; bottom:12px; width:auto; }
  .about-card{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .about-img{ width:88px; height:88px; flex:0 0 88px; }
}