/* Plus Jakarta Sans (SIL OFL 1.1), self-hosted */
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{--bg:#ffffff;--ink:#0f1620;--ink-soft:#5b6775}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  display:flex;flex-direction:column;
}

header{
  padding:20px 32px 0;
  text-align:center;
  position:relative;z-index:10;
}
.logo{display:inline-block;line-height:0;max-width:100%}
.logo img{width:clamp(296px,40vw,410px);max-width:100%;height:auto}

main{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;
}
h1{
  font-size:clamp(2.2rem,8vw,4.2rem);
  font-weight:400;letter-spacing:.06em;
  color:#373F51;
  margin:0;
  animation:fadeIn 1.4s ease both;
}
.subtitle{
  font-size:clamp(.95rem,2.4vw,1.25rem);
  font-weight:500;letter-spacing:.14em;
  color:var(--ink-soft);
  margin:14px 0 0;
  animation:fadeIn 1.4s ease .3s both;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

footer{
  font-size:12px;color:var(--ink-soft);
  text-align:center;padding:14px 0;
  position:relative;z-index:10;
}

/* ---------- acqua a fondo pagina ---------- */
.ocean{
  position:relative;
  height:34vh;
  min-height:220px;
  overflow:hidden;
}
.ocean::before{
  content:"";
  position:absolute;inset:0 0 auto;height:70px;
  background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%);
  z-index:6;pointer-events:none;
}
.ocean-body{
  position:absolute;left:0;right:0;bottom:0;height:70%;
  background:linear-gradient(to bottom,#2f93cf 0%,#1668a6 55%,#0d4f85 100%);
}
.waves{position:absolute;left:0;bottom:0;width:100%;height:100%}
.wave{
  position:absolute;bottom:60%;left:0;
  width:200%;height:160px;
  background-repeat:repeat-x;background-size:50% 100%;
  will-change:transform;
}
.wave-1{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'><path d='M0,80 C180,130 360,20 540,55 C720,90 900,140 1080,105 C1260,70 1380,45 1440,60 L1440,150 L0,150 Z' fill='%23bfe0f2'/></svg>");
  animation:drift 19s linear infinite;opacity:.75;
}
.wave-2{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 155' preserveAspectRatio='none'><path d='M0,60 C200,110 380,25 600,70 C820,115 1000,135 1200,95 C1320,70 1400,55 1440,62 L1440,155 L0,155 Z' fill='%236fbfe4'/></svg>");
  animation:drift 13s linear infinite reverse;opacity:.8;
}
.wave-3{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'><path d='M0,70 C160,30 340,120 520,95 C700,70 880,15 1060,50 C1240,85 1380,100 1440,85 L1440,150 L0,150 Z' fill='%232f93cf'/></svg>");
  animation:drift 9s linear infinite;opacity:.9;
}
.wave-4{
  bottom:calc(60% - 8px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'><path d='M0,95 C180,60 400,120 580,100 C760,80 940,110 1120,125 C1280,138 1390,120 1440,110 L1440,150 L0,150 Z' fill='%231668a6'/></svg>");
  animation:drift 6.5s linear infinite reverse;
}
.glints{position:absolute;left:0;right:0;bottom:0;height:60%;overflow:hidden;z-index:4}
.glint{
  position:absolute;height:2px;border-radius:2px;
  background:rgba(255,255,255,.5);
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes shimmer{
  0%,100%{opacity:0;transform:translateX(-14px) scaleX(.6)}
  50%{opacity:.85;transform:translateX(14px) scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .wave,.glint,h1,.subtitle{animation:none}
}
@media (max-width:600px){
  header{padding:16px 16px 0}
}