/*
Theme Name: MetaResource V3
Theme URI: https://metaresource.org/
Author: MetaResource
Description: Tema custom one-page (bozza v3) per MetaResource / Arcipelago City.
Version: 1.0.4
Text Domain: metaresource-v3
*/

@charset "UTF-8";

/* Palette dal logo */
:root{
  --mr-navy:#22496B;
  --mr-black:#0F0E0F;
  --mr-cyan:#01A7DA;
  --mr-cyan2:#018CB5;
  --mr-sky:#83C1D8;
  --mr-white:#FDFEFE;
  --mr-slate:#66859C;
  --max: 1120px;

  --ease: cubic-bezier(.22,1,.36,1);
  --radius-lg: 22px;
  --radius-md: 18px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--mr-white);
  color:var(--mr-black);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;

}
a{color:inherit;text-decoration:none}
:focus-visible{
  outline:2px solid var(--mr-cyan);
  outline-offset:3px;
  border-radius:10px;
}

/* Anchor UX: smooth scroll + offset navbar */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
section[id]{ scroll-margin-top: 84px; }
#contatti{ scroll-margin-top: 84px; }

/* NAV */
.nav{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(253,254,254,.80);
  border-bottom:1px solid rgba(34,73,107,.14);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.is-scrolled{
  background:rgba(253,254,254,.92);
  border-bottom-color:rgba(34,73,107,.18);
  box-shadow:0 8px 24px rgba(15,14,15,.06);
}
.nav .inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  gap:16px;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  letter-spacing:-.01em;
}
.brand img{height:26px;width:auto}

/* Desktop nav links */
.links{
  display:none;
  gap:18px;
  font-size:14px;
  color:rgba(15,14,15,.72);
}
.links a{position:relative}
.links a:after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-8px;
  height:2px;
  background:transparent;
  transition:background .22s var(--ease);
}
.links a:hover:after{background:var(--mr-cyan)}

/* CTA */
.cta{
  padding:10px 14px;
  border-radius:999px;
  background:var(--mr-navy);
  color:var(--mr-white);
  font-size:14px;
  transition:background .22s var(--ease), transform .12s var(--ease);
}
.cta:hover{background:var(--mr-cyan)}
.cta:active{transform:scale(.98)}

/* Hamburger */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(34,73,107,.18);
  background:rgba(253,254,254,.70);
  cursor:pointer;
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover{ border-color:rgba(1,167,218,.45); }
.nav-toggle:active{ transform:scale(.98); }

.nav-toggle-lines{
  position:relative;
  width:18px;height:2px;
  background:var(--mr-navy);
  border-radius:2px;
  display:block;
}
.nav-toggle-lines:before,
.nav-toggle-lines:after{
  content:"";
  position:absolute;left:0;
  width:18px;height:2px;
  background:var(--mr-navy);
  border-radius:2px;
}
.nav-toggle-lines:before{ top:-6px; }
.nav-toggle-lines:after{ top:6px; }

/* Desktop */
@media(min-width:880px){
  .links{display:flex}
  .nav-toggle{display:none}
}

/* Mobile menu panel */
@media(max-width:879px){
  .links{
    display:flex;
    flex-direction:column;
    gap:10px;
    position:absolute;
    left:12px; right:12px;
    top:calc(100% + 10px);
    padding:14px;
    border-radius:18px;
    background:rgba(253,254,254,.96);
    border:1px solid rgba(34,73,107,.14);
    box-shadow:0 18px 44px rgba(15,14,15,.10);

    opacity:0;
    transform: translate3d(0,-8px,0);
    pointer-events:none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  body.nav-open .links{
    opacity:1;
    transform: translate3d(0,0,0);
    pointer-events:auto;
  }

  .links a{
    padding:10px 10px;
    border-radius:12px;
    color:rgba(15,14,15,.78);
  }
  .links a:hover{
    background:linear-gradient(180deg, rgba(34,73,107,.06), rgba(1,167,218,.035));
    color:rgba(15,14,15,.88);
  }
}

/* Active link */
.links a.is-active{ color:var(--mr-navy); }
.links a.is-active:after{ background:var(--mr-cyan); }
@media(max-width:879px){
  .links a.is-active{
    background:linear-gradient(180deg, rgba(34,73,107,.06), rgba(1,167,218,.035));
  }
}

/* SECTIONS */
.section{padding:72px 18px}
.wrap{max-width:var(--max);margin:0 auto}

/* HERO (fallback JPG) */
.hero{
  padding:0;
  background:
    linear-gradient(180deg, rgba(34,73,107,.78), rgba(15,14,15,.30)),
    radial-gradient(1200px 600px at 20% 10%, rgba(1,167,218,.25), transparent 60%),
    url("assets/hero.jpg") center/cover no-repeat;
  color:var(--mr-white);
}

/* HERO (WebP preferred) */
@supports (background-image: image-set(url("assets/hero.webp") 1x)) {
  .hero{
    background-image:
      linear-gradient(180deg, rgba(34,73,107,.78), rgba(15,14,15,.30)),
      radial-gradient(1200px 600px at 20% 10%, rgba(1,167,218,.25), transparent 60%),
      image-set(
        url("assets/hero.webp") type("image/webp") 1x,
        url("assets/hero.jpg")  type("image/jpeg") 1x
      );
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }
}

.hero .wrap{padding:96px 18px 84px}
.kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(253,254,254,.76);
  margin-bottom:10px
}
h1{
  margin:0 0 12px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-.03em
}
h2{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-.02em
}
p{
  margin:0;
  color:rgba(15,14,15,.78);
  line-height:1.55
}
.sub{
  max-width:760px;
  font-size:18px;
  line-height:1.45;
  color:rgba(253,254,254,.88)
}

.actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-size:14px;
  transition:background .22s var(--ease), transform .12s var(--ease), border-color .22s var(--ease)
}
.btn.primary{background:var(--mr-cyan);color:var(--mr-black)}
.btn.primary:hover{background:var(--mr-sky)}
.btn.ghost{background:rgba(253,254,254,.10);border:1px solid rgba(131,193,216,.40);color:var(--mr-white)}
.btn.ghost:hover{border-color:rgba(1,167,218,.65)}
.btn:active{transform:scale(.98)}

.muted{color:rgba(15,14,15,.60)}
.tag{display:inline-block;margin-top:14px;font-size:13px;color:var(--mr-cyan2)}

.grid{display:grid;gap:22px}
@media(min-width:880px){
  .grid{grid-template-columns:1.25fr 1fr;align-items:center}
}

/* CARDS */
.card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(34,73,107,.14);
  box-shadow:0 10px 30px rgba(15,14,15,.06);
  transition: transform .30s var(--ease), box-shadow .30s var(--ease);
}
.card:hover{ transform: translate3d(0,-3px,0); box-shadow:0 18px 44px rgba(15,14,15,.10); }

.card .img{
  aspect-ratio:16/9;
  background:#111;
  position:relative;
  overflow:hidden;
}
.card .img picture{
  position:absolute;
  inset:0;
  display:block;
  z-index:1;
}
.card .img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.card .img:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none; /* IMPORTANT: non bloccare click/controls del video */
  background:linear-gradient(180deg, rgba(34,73,107,.18), rgba(15,14,15,.18));
}
.card .body{padding:22px}

/* Pillars */
.pillars{display:grid;gap:14px}
@media(min-width:880px){
  .pillars{grid-template-columns:repeat(4,1fr)}
}
.pillar{
  padding:18px;
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(34,73,107,.06), rgba(1,167,218,.035));
  border:1px solid rgba(34,73,107,.14);
  position:relative;
}
.pillar:before{
  content:"";
  position:absolute;
  left:18px;right:18px;
  top:0;
  height:2px;
  background:rgba(1,167,218,.55)
}
.pillar b{display:block;margin-bottom:6px}

/* Roadmap */
.roadmap{display:grid;gap:12px}
@media(min-width:880px){
  .roadmap{grid-template-columns:repeat(3,1fr)}
}
.step{
  padding:18px;
  border-radius:var(--radius-md);
  border:1px solid rgba(34,73,107,.14);
  background:#fff
}
.step .n{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(15,14,15,.55);
  margin-bottom:8px
}

/* Signup */
.signup{
  background:linear-gradient(180deg, rgba(34,73,107,.06), rgba(1,167,218,.03));
  border-top:1px solid rgba(34,73,107,.14);
  border-bottom:1px solid rgba(34,73,107,.14);
}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
input{
  flex:1;
  min-width:240px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(34,73,107,.24);
  font-size:14px;
}
button{
  padding:12px 16px;
  border-radius:999px;
  border:0;
  background:var(--mr-navy);
  color:var(--mr-white);
  font-size:14px;
  cursor:pointer;
  transition:background .22s var(--ease), transform .12s var(--ease);
}
button:hover{background:var(--mr-cyan)}
button:active{transform:scale(.98)}
button:disabled{ opacity:.6; cursor:not-allowed; }

footer{padding:34px 18px;color:rgba(15,14,15,.62);font-size:13px}
footer .wrap{display:flex;flex-direction:column;gap:10px}
.links2{display:flex;gap:14px;flex-wrap:wrap}
.links2 a:hover{color:var(--mr-navy)}

/* Mobile typography */
@media(max-width:520px){
  h1{font-size:36px}
  .sub{font-size:17px}
}

/* Motion: Apple-like (calm) */
[data-animate]{
  opacity:0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  will-change: opacity, transform;
}
[data-animate].is-in{
  opacity:1;
  transform: translate3d(0, 0, 0);
}
[data-animate][data-delay="1"]{ transition-delay: .10s; }
[data-animate][data-delay="2"]{ transition-delay: .20s; }
[data-animate][data-delay="3"]{ transition-delay: .30s; }
[data-animate][data-delay="4"]{ transition-delay: .40s; }

/* Micro interactions */
.btn, .cta, button{ will-change: transform; }
.btn:hover, .cta:hover, button:hover{ transform: translate3d(0,-1px,0); }
.btn:active, .cta:active, button:active{ transform: scale(.985); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card, .btn, .cta, button{ transition:none !important; }
}

/* Accessibility: Skip link */
.skip-link{
  position:absolute;
  left:14px; top:12px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--mr-black);
  color:var(--mr-white);
  z-index:1000;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: translateY(0); }

/* WCAG-MVP: visually hidden label */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* WCAG-MVP: consent row */
.signup form{ align-items:center; }
.signup .consent{
  flex-basis:100%;
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  color:rgba(15,14,15,.72);
  font-size:13px;
  line-height:1.4;
}
.signup input[type="checkbox"]{
  flex:0;
  min-width:unset;
  width:18px;height:18px;
  padding:0;
  border-radius:4px;
  border:1px solid rgba(34,73,107,.30);
}
.signup #mr-consent-note{
  flex-basis:100%;
  margin-top:8px;
  font-size:13px;
}
.signup .consent a{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Signup UX */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.form-msg{
  flex-basis:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(34,73,107,.14);
  background:rgba(253,254,254,.85);
  color:rgba(15,14,15,.78);
  font-size:13px;
}
.form-msg[data-state="ok"]{ border-color:rgba(1,167,218,.35); }
.form-msg[data-state="err"]{ border-color:rgba(34,73,107,.30); }

/* ===== VIDEO (clean + no overlap) ===== */
.card .img video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
  filter:saturate(1.05) contrast(1.02);
}
.card .img video:focus-visible{
  outline:2px solid var(--mr-cyan);
  outline-offset:4px;
  border-radius:12px;
}

/* Video UI cluster: i bottoni non si sovrappongono mai */
.video-ui{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:4;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:calc(100% - 28px);
}

/* Override look per bottoni nella video UI */
.video-ui button{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(253,254,254,.22);
  background:rgba(15,14,15,.55);
  color:var(--mr-white);
  font-size:13px;
  cursor:pointer;
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.video-ui button:hover{
  background:rgba(15,14,15,.68);
  border-color:rgba(1,167,218,.40);
}
.video-ui button:active{ transform:scale(.98); }



/* Header logo bigger (responsive) */
.brand img{
  height:34px;
  width:auto;
}

@media (min-width: 880px){
  .brand img{ height:60px; }
  .nav .inner{ padding:14px 18px; }
}

/* Bullets (page templates) */
.bullets{margin:0;padding-left:18px;color:rgba(15,14,15,.78);line-height:1.6}
.bullets li{margin:6px 0}



/* Arcipelago content helpers */
h3{
  margin:18px 0 8px;
  font-size:18px;
  letter-spacing:-.01em;
}
.bullets{
  margin:14px 0 0;
  padding-left:18px;
  color:rgba(15,14,15,.74);
  line-height:1.55;
}
.bullets li{ margin:6px 0; }

.stack p{ margin-top:8px; }

/* Form scuole: grid */
.form-grid{
  margin-top:18px;
  display:grid;
  gap:14px;
}
.field label{
  display:block;
  font-size:13px;
  color:rgba(15,14,15,.70);
  margin-bottom:6px;
}
.field-full{ grid-column:1 / -1; }

.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(34,73,107,.22);
  font-size:14px;
  background:#fff;
}
.form-grid textarea{ border-radius:16px; resize:vertical; min-height:120px; }

@media (min-width:880px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

/* Video UI: skip hidden until enabled */
.video-ui button[hidden]{ display:none !important; }


/* --- Buttons: make "ghost" readable on light sections --- */
.btn{
  font-weight:600;
  letter-spacing:-.01em;
}

/* Default (light background): ghost = navy */
.btn.ghost{
  background: rgba(34,73,107,.06);
  border: 1px solid rgba(34,73,107,.22);
  color: var(--mr-navy);
}
.btn.ghost:hover{
  background: rgba(1,167,218,.10);
  border-color: rgba(1,167,218,.55);
}
.btn.ghost:active{ transform:scale(.985); }

/* Hero (dark background): keep ghost = white */
.hero .btn.ghost{
  background: rgba(253,254,254,.10);
  border: 1px solid rgba(131,193,216,.40);
  color: var(--mr-white);
}
.hero .btn.ghost:hover{
  border-color: rgba(1,167,218,.65);
}

/* Primary: more premium */
.btn.primary{
  background: linear-gradient(180deg, var(--mr-cyan), var(--mr-cyan2));
  box-shadow: 0 10px 26px rgba(1,167,218,.18);
}
.btn.primary:hover{
  background: linear-gradient(180deg, var(--mr-sky), var(--mr-cyan));
}

/* Actions spacing: nicer wrap */
.actions{ gap:10px; }

/* Image consistency: slightly crisper */
.card .img img{
  image-rendering:auto;
  transform: translateZ(0);
}


/* Consent: checkbox always left + stop flex rules from affecting it */
.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.consent input[type="checkbox"]{
  flex: 0 0 auto !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  margin:2px 0 0 0 !important;
}

.consent span{
  flex:1 1 auto;
}


:root { color-scheme: light; }
html, body { background:#fff; }



/* ===== A11Y POPOVER (premium + compact) ===== */
.nav-right{ display:flex; align-items:center; gap:12px; }
.a11y-wrap{ position:relative; }

.a11y-trigger{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(34,73,107,.18);
  background: rgba(253,254,254,.80);
  color: var(--mr-navy);
  font-weight:600;
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.a11y-trigger:hover{ border-color: rgba(1,167,218,.50); background: rgba(253,254,254,.92); }
.a11y-trigger:focus-visible{ outline:3px solid var(--mr-cyan); outline-offset:3px; }

.a11y-popover{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 320px;
  z-index: 1000;
  border-radius: 18px;
  border: 1px solid rgba(34,73,107,.16);
  background: rgba(253,254,254,.94);
  box-shadow: 0 18px 55px rgba(15,14,15,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px;
}

.a11y-popover-head{
  font-weight:700;
  color: var(--mr-navy);
  font-size: 13px;
  margin-bottom: 10px;
}

.a11y-field{ margin-top:10px; }
.a11y-field label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-weight:600;
  font-size:12px;
  color: rgba(34,73,107,.95);
  margin-bottom:6px;
}
.a11y-value{ color: rgba(34,73,107,.78); font-weight:700; }

.a11y-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.a11y-range{
  width:100%;
  accent-color: var(--mr-cyan);
}

.a11y-select{
  width:100%;
  padding:10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(34,73,107,.18);
  background: rgba(34,73,107,.04);
  color: var(--mr-navy);
  font-weight:600;
  font-size:13px;
}

.a11y-popover-foot{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.a11y-reset{
  border:0;
  background: transparent;
  color: rgba(34,73,107,.92);
  font-weight:700;
  cursor:pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.a11y-reset:hover{ background: rgba(34,73,107,.06); }

@media (max-width: 720px){
  .a11y-popover{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 74px;
    width: auto;
  }
}

/* ===== A11Y: user-controlled settings via CSS vars + body classes ===== */
:root{
  --a11y-text-scale: 1;
  --a11y-line-height: 1.6;
}

/* text scale in % (100–140) */
html{
  font-size: calc(16px * var(--a11y-text-scale));
}

/* line-height (1.50–1.85) */
body{ line-height: var(--a11y-line-height); }
p{ line-height: var(--a11y-line-height); }

/* Focus strength */
body.a11y-focus-strong :focus-visible{
  outline: 4px solid var(--mr-cyan);
  outline-offset: 4px;
  border-radius: 12px;
}
body.a11y-focus-extra :focus-visible{
  outline: 6px solid var(--mr-cyan);
  outline-offset: 5px;
  border-radius: 12px;
}

/* Contrast levels */
body.a11y-contrast-high{
  color:#0F0E0F;
}
body.a11y-contrast-high .muted{ color: rgba(15,14,15,.78); }
body.a11y-contrast-high .btn.ghost{
  background: rgba(15,14,15,.04);
  border-color: rgba(15,14,15,.26);
  color: #0F0E0F;
}

body.a11y-contrast-max{
  background:#fff;
  color:#0B0A0B;
}
body.a11y-contrast-max p{ color: rgba(11,10,11,.92); }
body.a11y-contrast-max .muted{ color: rgba(11,10,11,.82); }
body.a11y-contrast-max .card{
  border-color: rgba(11,10,11,.22);
  box-shadow: 0 18px 60px rgba(11,10,11,.12);
}
body.a11y-contrast-max .btn.ghost{
  background: rgba(11,10,11,.06);
  border-color: rgba(11,10,11,.32);
  color: #0B0A0B;
}

/* Motion */
body.a11y-motion-reduce *{
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
body.a11y-motion-off *{
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
body.a11y-motion-off [data-animate],
body.a11y-motion-reduce [data-animate]{
  opacity: 1 !important;
  transform: none !important;
}