:root{
  --bg:#F2F5F8;
  --text:#1b2533;
  --muted:#455468;
  --muted-2:#5A6B81;
  --brand:#2F6BFF;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrapper{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}
.container{width:100%;max-width:1200px;margin:0 auto;padding:24px}

/* Header */
.header{padding-top:32px}
.header__logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;opacity:0;animation:fadeIn .6s .1s ease-out forwards}
.header__logo img,.header__logo svg{display:block;height:40px;width:auto}

/* Hero */
.hero{position:relative}
.hero .container{
  min-height:min(78vh, 820px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(8px, 2vh, 24px);
  padding-bottom:clamp(16px, 4vh, 40px);
}
.hero__title{
  margin:18px 0 16px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--brand);
  font-size:clamp(32px, 8vw, 96px);
  max-width:16ch;
}
.hero__lead{
  margin:12px 0 0;
  font-size:clamp(16px, 2.2vw, 20px);
  line-height:1.6;
  max-width:70ch;
  color:var(--muted);
}

/* Footer */
.footer{padding:24px 0 40px;color:var(--muted-2);font-size:14px}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .header__logo{animation:none;opacity:1}
}

/* Small screens tweaks */
@media (max-width:768px){
  .header{padding-top:12px}
  .hero .container{min-height:auto}
}
@media (max-width:420px){
  .container{padding:16px}
  .footer{padding-bottom:24px}
}

/* A11y focus */
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Optional font-face (drop your WOFF2 files into /assets and uncomment)
@font-face{
  font-family:"Inter";
  src:url("assets/Inter-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
*/