:root{
  --bg-left:#d299c2;
  --bg-right:#fef9d7;
  --panel:#0b0b0b;
  --text:#f3f3f3;
  --muted:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.18);
  --radius:18px;
  --header-h:64px;
  --footer-h:56px;
}

*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0;
  font-family:"Cause", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
background:linear-gradient(180deg,var(--bg-left),var(--bg-right));
  color:var(--text);
}

.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  background:rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.14);
  z-index:10;
}

.brand{
  font-weight:700;
  letter-spacing:.2px;
  user-select:none;
}

.nav{display:flex;gap:10px;}

.nav-btn{
  appearance:none;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.nav-btn:hover{transform:translateY(-1px); background:rgba(0,0,0,.18);}
.nav-btn:active{transform:translateY(0px);}
.nav-btn[aria-selected="true"]{
  background:rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.26);
}

.content{
  flex:1;
  padding-top:calc(var(--header-h) + 18px);
  padding-bottom:calc(var(--footer-h) + 18px);
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.view{
  width:min(980px, calc(100% - 28px));
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.view-inner{padding:28px 26px 34px;}

.title{
  margin:0;
  font-size:clamp(28px, 3.4vw, 44px);
  letter-spacing:.2px;
  font-weight:800;
}

.lead{
  margin:12px 0 22px;
  color:var(--muted);
  font-size:clamp(14px, 1.4vw, 18px);
  line-height:1.55;
  max-width:70ch;
}

.cards{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(12, 1fr);
}

.card{
  grid-column: span 12;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:16px 16px;
}

@media (min-width: 720px){
  .card{grid-column: span 4;}
  /* Make the last card occupy the entire bottom row */
  .cards .card:last-child{grid-column: span 12;}
}


.card h2{margin:0 0 8px; font-size:18px; font-weight:750;}
.card p{margin:0; color:var(--muted); line-height:1.55;}

.two-col{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.imgs {
  width: 900px;
  height: 500px;
}
.panel{
  grid-column: span 12;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:16px 16px;
}

@media (min-width: 720px){
  .panel{grid-column: span 6;}
}

.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--footer-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  background:rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.14);
  z-index:10;
}

.signature{font-weight:650; user-select:none; padding-bottom:10px; position:relative; top:-6px;}


.sig {width: 240px;}



.signature,.copyright{color:#000;}
.copyright{font-weight:600;}
.footer-spacer{width:1px;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-btn{transition:none;}
}