/* =========================================================
   Ottica Iottico — redesign statico · register: brand (eyewear retail)
   Riferimento: NAU / retail ottico — pulito, editoriale, foto grandi, aria.
   Accento: verde "ottico". Type: Hanken Grotesk + Hanken Grotesk + Geist Mono.
   ========================================================= */

:root{
  --bg:        oklch(1 0 0);
  --ink:       oklch(0.24 0.03 255);
  --ink-2:     oklch(0.48 0.028 255);
  --lens:      oklch(0.56 0.15 256);   /* blu friendly — colore brand */
  --lens-deep: oklch(0.46 0.15 258);   /* blu profondo — hover/testo accento */
  --lens-soft: oklch(0.965 0.022 250); /* azzurro tenue — blocchi alternati */
  --line:      oklch(0.915 0.01 250);
  --dark:      oklch(0.24 0.03 258);
  --on-dark:   oklch(0.96 0.01 250);
  --sun:       oklch(0.86 0.15 92);    /* giallo allegro — accento secondario */
  --sun-deep:  oklch(0.80 0.15 84);    /* giallo/ambra più carico */
  --ease: cubic-bezier(.2,.7,.2,1);
  --wrap:1240px;
}
/* token di forma per il layout friendly/morbido */
:root{
  --r-lg:32px;   /* card grandi */
  --r-md:24px;   /* card medie */
  --r-sm:18px;   /* card piccole / chip */
  --pill:999px;  /* bottoni a pillola */
  --soft-1:0 12px 30px -16px oklch(.50 .13 256/.26);
  --soft-2:0 26px 60px -30px oklch(.42 .12 258/.32);
  --soft-3:0 10px 26px -14px oklch(.24 .03 258/.15);
  --warm:color-mix(in oklch,var(--lens-soft) 86%,var(--bg));
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;letter-spacing:.01em}
.muted{color:var(--ink-2)}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2.5px solid var(--lens-deep);outline-offset:3px;border-radius:10px}
h1,h2,h3,h4{font-family:"Hanken Grotesk","Hanken Grotesk",sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2rem,1.3rem + 3vw,3.3rem)}
p{text-wrap:pretty}

.kicker{font-family:"Geist Mono",monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lens-deep);margin-bottom:1rem;display:block}
.kicker span{opacity:.5;margin:0 .25em}.kicker b{color:var(--ink)}

/* section heads */
.sec-head{max-width:60ch;margin-bottom:clamp(34px,4.5vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:.4rem}
.sec-lead{color:var(--ink-2);font-size:1.12rem}

/* placeholder immagini mancanti */
.ph{position:relative;width:100%;height:100%;min-height:160px;border-radius:20px;background:
  repeating-linear-gradient(135deg,var(--lens-soft),var(--lens-soft) 14px,color-mix(in oklch,var(--lens-soft) 80%,var(--lens) 8%) 14px,color-mix(in oklch,var(--lens-soft) 80%,var(--lens) 8%) 28px);
  display:flex;align-items:center;justify-content:center}
.ph::after{content:attr(data-ph);font-family:"Geist Mono",monospace;font-size:.74rem;letter-spacing:.04em;
  color:var(--lens-deep);text-transform:uppercase;padding:6px 12px;background:oklch(1 0 0/.8);border-radius:var(--pill)}

/* forme decorative — blob bicromia blu + giallo */
.blob{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:0;
  background:radial-gradient(circle at 35% 35%,color-mix(in oklch,var(--sun) 62%,transparent),transparent 70%)}
.blob-a{width:clamp(220px,30vw,440px);aspect-ratio:1;top:-8%;right:-6%}
.blob-b{width:clamp(160px,18vw,260px);aspect-ratio:1;bottom:-10%;left:-5%;
  background:radial-gradient(circle at 40% 40%,color-mix(in oklch,var(--lens) 24%,transparent),transparent 70%)}
.blob-c{width:clamp(200px,24vw,360px);aspect-ratio:1;top:-12%;left:-8%;
  background:radial-gradient(circle at 35% 35%,color-mix(in oklch,var(--lens) 22%,transparent),transparent 70%)}
.blob-d{width:clamp(200px,24vw,360px);aspect-ratio:1;bottom:-14%;right:-8%;
  background:radial-gradient(circle at 40% 40%,color-mix(in oklch,var(--sun) 58%,transparent),transparent 70%)}

/* ---------- Buttons (a pillola) ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;padding:.95em 1.7em;border-radius:var(--pill);
  transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .25s;border:1.5px solid transparent;min-height:48px}
.btn-sm{padding:.6em 1.2em;min-height:40px;font-size:.92rem}
.btn-brand{background:var(--lens);color:#fff;box-shadow:var(--soft-1)}
.btn-brand:hover{background:var(--lens-deep);transform:translateY(-2px);box-shadow:var(--soft-2)}
.btn-soft{background:var(--sun);color:oklch(0.28 0.04 70);box-shadow:var(--soft-3)}
.btn-soft:hover{background:var(--sun-deep);transform:translateY(-2px);box-shadow:var(--soft-1)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:color-mix(in oklch,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;min-height:70px}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:28px;margin-inline:auto;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.nav a{position:relative;color:var(--ink-2);padding:6px 0;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--lens);transition:right .3s var(--ease)}
.nav a:hover::after{right:0}
.hdr-cta{display:flex;align-items:center;gap:14px}
.call{display:inline-flex;align-items:center;gap:.5em;font-family:"Geist Mono",monospace;font-size:.86rem;font-weight:500;color:var(--ink-2)}
.call .dot{width:8px;height:8px;border-radius:50%;background:var(--lens);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--lens) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:14px;cursor:pointer;margin-left:auto}
.burger span{width:20px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.m-nav{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line)}
.m-nav a{padding:15px clamp(20px,5vw,56px);border-top:1px solid var(--line);font-weight:500}
.m-nav .call-m{color:var(--lens-deep);font-family:"Geist Mono",monospace}
.m-nav.open{display:flex}

/* ---------- 2 · Hero (card affiancata, tono caldo luminoso) ---------- */
.hero{position:relative;overflow:hidden;background:
  linear-gradient(180deg,var(--warm),var(--bg) 80%);padding-block:clamp(40px,6vw,80px)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;min-height:min(78svh,720px)}
.hero-text{max-width:46ch}
.hero h1{font-size:clamp(2.9rem,1.4rem + 6vw,5.4rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink);margin:.4rem 0 1.2rem}
.hero-sub{max-width:44ch;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--ink-2);margin-bottom:1.9rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.hero-card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-2);
  background:var(--bg);transform:rotate(.6deg)}
.hero-img{width:100%;height:100%;aspect-ratio:9/10;object-fit:cover;animation:heroFocus 1.3s var(--ease) both}
.focus{animation:focusIn 1.05s var(--ease) .1s both}
@keyframes focusIn{from{filter:blur(12px);opacity:.5;transform:translateY(6px)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes heroFocus{from{filter:blur(16px) saturate(1.12);transform:scale(1.05)}to{filter:none;transform:none}}

/* ---------- 3 · Categorie (card morbide arrotondate) ---------- */
.categorie{padding-block:clamp(56px,8vw,120px)}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.cat-grid{grid-template-columns:1fr}}
.cat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--bg);padding:14px 14px 6px;box-shadow:var(--soft-3);transition:transform .3s var(--ease),box-shadow .3s}
.cat:hover{transform:translateY(-6px);box-shadow:var(--soft-2)}
.cat .ph{aspect-ratio:4/5}
.cat-body{padding:16px 8px 18px;display:flex;flex-direction:column;gap:.35rem;flex:1}
.cat-body h3{font-size:1.25rem}
.cat-body p{color:var(--ink-2);font-size:.93rem;flex:1}
.cat-go{color:var(--lens-deep);font-weight:600;margin-top:.5rem}

/* ---------- 4 · Esame (blocco caldo) ---------- */
.esame{position:relative;overflow:hidden;background:var(--warm);padding-block:clamp(56px,8vw,120px)}
.esame-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.esame-fig{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-1)}
.esame-fig img{width:100%;aspect-ratio:5/4;object-fit:cover}
.esame-text h2{margin:.3em 0 .6em}
.esame-text p{color:var(--ink-2);max-width:46ch}
.ticks{list-style:none;margin:1.4rem 0 2rem;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.8rem;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;border-left:2.5px solid var(--lens);
  border-bottom:2.5px solid var(--lens);transform:rotate(-45deg)}

/* ---------- 5 · Servizi (card morbide raggruppate) ---------- */
.servizi{padding-block:clamp(56px,8vw,120px)}
.serv-feat{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-1);margin-bottom:clamp(28px,4vw,48px)}
.serv-feat img{width:100%;aspect-ratio:16/6;object-fit:cover}
.serv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,28px)}
.serv-col{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(24px,3vw,34px);box-shadow:var(--soft-3);transition:transform .3s var(--ease),box-shadow .3s}
.serv-col:hover{transform:translateY(-4px);box-shadow:var(--soft-1)}
.serv-cat{display:inline-block;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.30 0.05 70);
  background:color-mix(in oklch,var(--sun) 55%,var(--bg));padding:.5em 1em;border-radius:var(--pill);margin-bottom:1.4rem;font-family:"Geist Mono",monospace;font-weight:500}
.serv-col dl{display:grid;gap:1.1rem}
.serv-col dt{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:1.18rem;margin-bottom:.15rem}
.serv-col dd{color:var(--ink-2);font-size:.97rem}

/* ---------- 6 · Marchi (blocco caldo) ---------- */
.marchi{padding-block:clamp(56px,8vw,112px);background:var(--warm)}
.marchi-head{max-width:60ch;margin-bottom:clamp(34px,4.5vw,56px)}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(56px,7vw,104px);width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:clamp(60px,6.5vw,88px);width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s var(--ease)}
.marquee img:hover{transform:scale(1.07)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- 7 · Perché (card morbide) ---------- */
.perche{padding-block:clamp(56px,8vw,120px)}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,24px)}
.values article{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(22px,2.5vw,30px);box-shadow:var(--soft-3);transition:transform .3s var(--ease),box-shadow .3s}
.values article:hover{transform:translateY(-4px);box-shadow:var(--soft-1)}
.values article::before{content:"";display:block;width:42px;height:42px;border-radius:var(--r-sm);margin-bottom:1rem;
  background:linear-gradient(135deg,var(--sun),var(--lens))}
.values h3{font-size:1.2rem;margin-bottom:.5rem}
.values p{color:var(--ink-2);font-size:.97rem}

/* ---------- 8 · Storia (blocco caldo) ---------- */
.storia{position:relative;overflow:hidden;background:var(--warm);padding-block:clamp(56px,8vw,120px)}
.storia-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:center}
.storia-fig{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-1)}
.storia-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.storia-text h2{margin:.3em 0 .7em}
.storia-text p{color:var(--ink-2);margin-bottom:1em;max-width:52ch}
.storia-text p b{color:var(--ink);font-weight:600}
.storia-quote{font-family:"Hanken Grotesk",sans-serif;font-size:clamp(1.3rem,1rem + 1.1vw,1.7rem);
  color:var(--ink)!important;font-weight:500;letter-spacing:-.01em;line-height:1.3;
  padding-top:.6em;border-top:1px solid var(--line);margin-top:1.4em}

/* ---------- 9 · Recensioni ---------- */
.recensioni{padding-block:clamp(56px,8vw,120px)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;gap:1.4rem;box-shadow:var(--soft-3);transition:transform .3s var(--ease),box-shadow .3s}
.rev:hover{transform:translateY(-4px);box-shadow:var(--soft-1)}
.rev p{font-size:1.08rem;line-height:1.5;flex:1}
.rev footer{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.rev-av{width:42px;height:42px;border-radius:50%;background:repeating-linear-gradient(135deg,oklch(.93 0 0),oklch(.93 0 0) 6px,oklch(.9 0 0) 6px,oklch(.9 0 0) 12px);flex:none}

/* ---------- 10 · Negozio (blocco caldo accogliente) ---------- */
.negozio{padding-block:clamp(56px,8vw,120px)}
.negozio-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  background:var(--warm);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-1)}
.negozio-text{padding:clamp(28px,4vw,56px)}
.negozio h2{color:var(--ink);margin-bottom:1.4rem}
.negozio .kicker{color:var(--lens-deep)}
.info{display:grid;gap:1.3rem;margin-bottom:2rem}
.info dt{color:var(--lens-deep);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem}
.info dd{font-size:1.08rem;line-height:1.5;color:var(--ink)}
.info dd .muted{color:var(--ink-2)}
.info a{border-bottom:1px solid transparent;transition:border-color .2s}
.info a:hover{border-color:var(--lens)}
.negozio-map{height:100%;min-height:400px;overflow:hidden;background:var(--lens-soft)}
.negozio-map iframe{display:block;width:100%;height:100%;min-height:400px;border:0}

/* ---------- 11 · Footer ---------- */
.ftr{background:var(--ink);color:oklch(.78 0 0);padding-top:clamp(48px,6vw,72px);border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:clamp(20px,4vw,40px)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,56px);padding-bottom:44px}
.ftr-logo{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:1rem}
.ftr-brand p{max-width:34ch;font-size:.92rem}
.ftr-col{display:flex;flex-direction:column;gap:.6rem}
.ftr-col h4{color:#fff;font-family:"Geist Mono",monospace;font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.ftr-col a{color:oklch(.78 0 0);font-size:.95rem;transition:color .2s}
.ftr-col a:hover{color:#fff}
.ftr-col p{font-size:.92rem;line-height:1.6}
.ftr-col address{font-style:normal;font-size:.92rem;line-height:1.7;color:oklch(.78 0 0)}
.ftr-col address a{color:oklch(.78 0 0)}.ftr-col address a:hover{color:#fff}
.ftr-hours{color:var(--lens);margin-top:.4rem}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid oklch(.3 0 0);font-size:.78rem}
.ftr-top:hover{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:36px;min-height:auto}
  .hero-text{max-width:none;text-align:center;margin-inline:auto}
  .hero-sub{margin-inline:auto}
  .cta-row{justify-content:center}
  .hero-card{order:-1;transform:none}
  .esame-grid,.storia-grid,.negozio-grid{grid-template-columns:1fr;gap:32px}
  .negozio-grid{gap:0}
  .esame-fig{order:-1}
  .serv-cols{grid-template-columns:1fr;gap:36px}
  .values{grid-template-columns:1fr 1fr;gap:28px}
  .rev-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px}
  .ftr-brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .hero{min-height:min(86svh,640px)}
  .values{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .focus,.hero-bg{filter:none!important;transform:none!important;opacity:1!important}
  .marquee-track{animation:none!important}
}