:root{
  /* Teal theme */
  --ink:#e7f2f4;
  --ink-dim:#c8d9dc;
  --ink-muted:#a9c1c6;
  --border:rgba(151,190,196,.22);
  --radius:16px;

  --accent-1:#66AAD2;  /* 102,170,210 */
  --accent-2:#78D1C8;  /* 120,209,200 */
  --accent-3:#498589;  /* 73,133,137 */
  --accent-4:#9ABBC1;  /* 154,187,193 */
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(102,170,210,.14), transparent 60%),
    radial-gradient(1200px 700px at 15% 10%, rgba(120,209,200,.12), transparent 60%),
    linear-gradient(#0a0f11,#0c1316 40%,#0a0f11 100%);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{width:min(1200px,92vw); margin-inline:auto}
.section{padding: clamp(2rem,6vw,4rem) 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.muted{color:var(--ink-muted)}
.card{
  background:linear-gradient(to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden
}
.card>.body{padding:1rem}

/* Background (shared) */
.background{
  position:fixed; inset:0;
  background:url('images/background.avif') center/cover no-repeat;
  filter:blur(6.4px) brightness(1); z-index:-10
}
.background::after{
  content:""; position:absolute; inset:0; background:
    radial-gradient(60% 40% at 50% 15%, rgba(5,20,22,.18), transparent 40%),
    linear-gradient(to bottom, rgba(8,16,18,.10), rgba(8,16,18,.70) 70%, rgba(8,16,18,.95));
}

/* Landing hero */
.landing-hero{min-height:100svh; display:grid; place-items:center}
.landing-inner{padding: clamp(2rem,5vw,4rem) 1rem; width:min(1200px,92vw); margin:0 auto; text-align:center}
.logo-landing{
  width:clamp(180px,32vw,420px); aspect-ratio:1/1; margin:14vh auto 16px;
  background:url('images/logo.png') center/contain no-repeat; animation:float 3s ease-in-out infinite
}
.title-landing{
  font-family:'Designer',sans-serif; font-weight:400; font-size:clamp(36px,6vw,96px);
  letter-spacing:-.005em; text-shadow:0 4px 8px rgba(0,0,0,.35); margin:0 0 1rem
}
.tagline{color:var(--ink-dim); max-width:860px; margin:0 auto}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}

/* Buttons (teal) */
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:999px; border:1px solid var(--border); font-weight:700}
.btn.primary{background:linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#062428; border:none}
.btn.ghost{background:rgba(255,255,255,.10); color:var(--ink)}

/* Footer util */
#year:empty::after{content: attr(data-fallback) }