:root{
  --bg:#efe5d6;
  --panel:#f6efe4;
  --ink:#0b1e38;
  --muted:#304864;
  --accent:#0b1e38;
  --accent-2:#17345c;
  --line:#ded3c3;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}

/* Watermark background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('assets/virtus-logo.png') no-repeat center 18vh / min(42vw,520px);
  opacity:0.06;
  filter:grayscale(100%);
  pointer-events:none;
  z-index:0;
}

#progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--accent), rgba(11,30,56,0.5));
  box-shadow:0 0 8px rgba(11,30,56,0.35);
  z-index:7;
}

.container{max-width:1050px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}

.site-header{position:sticky;top:0;background:rgba(239,229,214,0.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:6;transition:box-shadow .25s ease}
.site-header.scrolled{box-shadow:0 8px 18px rgba(11,30,56,0.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700}
.logo{width:34px;height:34px;border-radius:6px;}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
nav a:hover,nav a.cta{color:var(--ink)}
nav a.cta{padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:transparent}

.hero{padding:96px 0;text-align:center}
.hero h1.tagline-top{font-size:clamp(28px,4.5vw,44px);margin:0 0 10px;color:var(--ink);font-style:italic;letter-spacing:0.03em}
.subtitle{color:var(--muted);max-width:820px;margin:0 auto 24px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{background:var(--accent);color:white;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700}
.btn:hover{background:var(--accent-2)}
.btn.btn-outline{background:transparent;border:1px solid var(--ink);color:var(--ink)}

.section{padding:72px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-alt{background:var(--panel)}
h2{font-size:clamp(22px,3vw,32px);margin:0 0 20px;color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink)}
.portfolio{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.portfolio li{background:white;border:1px solid var(--line);border-radius:12px;padding:14px}
.case-title{display:block;font-weight:800;color:var(--ink)}
.case-meta{display:block;color:var(--muted);font-size:14px}
.about{display:grid;grid-template-columns:1fr;gap:20px}
.list{color:var(--muted)}
.contact-card{background:white;border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--ink)}

/* Fixed footer with glow */
.fixed-footer{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(239,229,214,0.9);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  text-align:center;z-index:6;
  padding:10px 0;
  box-shadow:0 -6px 16px rgba(11,30,56,0.05);
  transition:box-shadow .25s ease, background .25s ease;
}
.fixed-footer.active{
  box-shadow:0 -10px 28px rgba(11,30,56,0.12);
  background:rgba(239,229,214,0.94);
}
.footer-tagline{color:var(--accent);font-style:italic;letter-spacing:0.05em}