/* ===== PetDì — site styles ===== */
:root{
  --bg:#FCFCFD; --bg-2:#F2F4F6; --card:#FFFFFF;
  --ink:#14181F; --ink-soft:#5B6472; --ink-faint:#8A93A0;
  --teal:#12A7AD; --teal-deep:#0E888D; --sage:#82B85F;
  --dark:#0C0F14; --dark-2:#151A22; --dark-card:#1B212B;
  --line:rgba(20,24,31,.10); --line-dark:rgba(255,255,255,.10);
  --radius:22px; --radius-sm:14px;
  --shadow:0 12px 44px rgba(20,24,31,.10);
  --phone-shadow:0 34px 70px -24px rgba(12,15,20,.55);
  /* rainbow */
  --c1:#E5484D; --c2:#F5731B; --c3:#F2B705; --c4:#82B85F;
  --c5:#12A7AD; --c6:#3B82F6; --c7:#6366F1; --c8:#8B5CF6;
  --section-alt:#0C0F14; --nav-bg:rgba(252,252,253,.82);
  --btn-bg:#14181F; --btn-fg:#FFFFFF;
  --maxw:1120px;
}
html.dark{
  --bg:#0A0D12; --bg-2:#12161E; --card:#161B24;
  --ink:#EEF1F5; --ink-soft:#9BA5B2; --ink-faint:#697180;
  --line:rgba(255,255,255,.10);
  --section-alt:#12161E; --nav-bg:rgba(10,13,18,.82);
  --btn-bg:#EEF1F5; --btn-fg:#0A0D12;
  --shadow:0 14px 44px rgba(0,0,0,.5);
  --phone-shadow:0 34px 70px -24px rgba(0,0,0,.7);
}
html{transition:background .3s ease}
body{transition:background .3s ease, color .3s ease}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep)}
.muted{color:var(--ink-soft)}

/* ===== rainbow dots (signature) ===== */
.dotrow{display:flex; gap:9px; justify-content:center; align-items:center}
.dotrow span{width:11px; height:11px; border-radius:50%; display:block}
.dotrow span:nth-child(1){background:var(--c1)} .dotrow span:nth-child(2){background:var(--c2)}
.dotrow span:nth-child(3){background:var(--c3)} .dotrow span:nth-child(4){background:var(--c4)}
.dotrow span:nth-child(5){background:var(--c5)} .dotrow span:nth-child(6){background:var(--c6)}
.dotrow span:nth-child(7){background:var(--c7)} .dotrow span:nth-child(8){background:var(--c8)}
.divider{padding:16px 0}

.dotgrid{display:grid; grid-template-columns:repeat(2,14px); gap:9px}
.dotgrid span{width:14px; height:14px; border-radius:50%}
.dotgrid span:nth-child(1),.dotgrid span:nth-child(2){background:var(--c1)}
.dotgrid span:nth-child(3),.dotgrid span:nth-child(4){background:var(--c2)}
.dotgrid span:nth-child(5),.dotgrid span:nth-child(6){background:var(--c3)}
.dotgrid span:nth-child(7),.dotgrid span:nth-child(8){background:var(--c4)}
.dotgrid span:nth-child(9),.dotgrid span:nth-child(10){background:var(--c5)}
.dotgrid span:nth-child(11),.dotgrid span:nth-child(12){background:var(--c6)}
.dotgrid span:nth-child(13),.dotgrid span:nth-child(14){background:var(--c7)}
.dotgrid span:nth-child(15),.dotgrid span:nth-child(16){background:var(--c8)}

/* ===== nav ===== */
.nav{position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-family:"Bricolage Grotesque"; font-weight:800; font-size:20px; letter-spacing:-.01em}
.brand img{width:34px; height:34px; border-radius:9px; box-shadow:0 2px 8px rgba(20,24,31,.18)}
.nav-links{display:flex; align-items:center; gap:28px; font-weight:600; font-size:15px}
.nav-links a{color:var(--ink-soft)} .nav-links a:hover{color:var(--ink)}
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--btn-bg); color:var(--btn-fg)!important;
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:15px; transition:transform .15s ease, background .2s}
.pill:hover{transform:translateY(-1px); opacity:.9}
.nav-right{display:flex; align-items:center; gap:16px}
.lang-switch{display:inline-flex; gap:2px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px; flex-shrink:0}
.lang-switch button{border:0; background:transparent; padding:5px 11px; border-radius:999px; font-family:"Inter"; font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--ink-soft); cursor:pointer; transition:all .2s}
.lang-switch button.active{background:var(--btn-bg); color:var(--btn-fg)}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg-2); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:background .2s}
.theme-toggle:hover{background:var(--card)}
.theme-toggle svg{width:19px; height:19px}

/* ===== hero ===== */
.hero{position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:70px; padding-bottom:80px}
.hero-copy .eyebrow{margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.4vw,62px); margin-bottom:20px}
.hero h1 .tint{color:var(--teal)}
.hero p.lead{font-size:20px; color:var(--ink-soft); max-width:30ch; margin:0 0 30px}
.hero-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.store-badge{display:inline-flex; align-items:center; gap:12px; background:var(--btn-bg); color:var(--btn-fg);
  padding:13px 22px; border-radius:16px; transition:transform .15s ease}
.store-badge:hover{transform:translateY(-2px)}
.store-badge small{display:block; font-size:11px; opacity:.72; letter-spacing:.04em}
.store-badge b{display:block; font-family:"Bricolage Grotesque"; font-size:17px; line-height:1.1}
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center}
.hero-visual .dotgrid{position:absolute; left:-6px; top:8%; z-index:3}
.blob{position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(130,184,95,.30), rgba(18,167,173,.16) 55%, transparent 72%);
  filter:blur(6px); z-index:0}

/* phone mockup */
.phone{position:relative; width:100%; max-width:300px; border-radius:46px; background:#0a0b0d;
  padding:11px; box-shadow:var(--phone-shadow), 0 0 0 1px rgba(20,24,31,.06); z-index:2}
.phone img{width:100%; display:block; border-radius:36px}

/* ===== pitch (dark) ===== */
.pitch{background:var(--section-alt); color:#fff; padding:88px 0}
.pitch .wrap{max-width:820px; text-align:center}
.pitch .eyebrow{color:#5ad6db}
.pitch h2{font-size:clamp(28px,4vw,44px); margin:16px 0 20px}
.pitch p{font-size:19px; color:rgba(255,255,255,.72); max-width:60ch; margin:0 auto}
.pitch .tint{color:#5ad6db}

/* ===== features ===== */
.section{padding:92px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 54px}
.section-head h2{font-size:clamp(28px,4vw,42px); margin:14px 0 14px}
.section-head p{color:var(--ink-soft); font-size:18px; margin:0}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 50px rgba(20,24,31,.13)}
.card .ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px}
.card h3{font-size:20px; margin-bottom:9px}
.card p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.55}
.ic svg{width:24px; height:24px}
.ic.teal{background:rgba(18,167,173,.12); color:var(--teal-deep)}
.ic.sage{background:rgba(130,184,95,.16); color:#5f8f3f}
.ic.violet{background:rgba(139,92,246,.13); color:#7c4ddb}
.ic.orange{background:rgba(245,115,27,.13); color:#d9600f}
.ic.blue{background:rgba(59,130,246,.13); color:#2f6fd6}
.ic.red{background:rgba(229,72,77,.12); color:#cf3237}

/* ===== showcase (dark, screenshots) ===== */
.showcase{background:var(--section-alt); color:#fff; padding:96px 0; overflow:hidden}
.showcase .section-head h2{color:#fff}
.showcase .section-head p{color:rgba(255,255,255,.66)}
.showcase .eyebrow{color:#5ad6db}
.shots{display:flex; gap:26px; justify-content:center; align-items:flex-end; flex-wrap:wrap}
.shots .phone{max-width:250px; background:#05060a}
.shots .phone.lift{margin-bottom:26px}

/* ===== privacy band ===== */
.privacy-band{padding:92px 0}
.pb-inner{background:linear-gradient(135deg, #0f1620, #14202a); color:#fff; border-radius:30px;
  padding:60px 54px; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center;
  box-shadow:0 30px 70px -30px rgba(12,15,20,.5)}
.pb-inner .eyebrow{color:#5ad6db}
.pb-inner h2{font-size:clamp(26px,3.4vw,38px); margin:14px 0 16px}
.pb-inner p{color:rgba(255,255,255,.74); margin:0 0 24px; font-size:17px}
.pb-lock{display:grid; place-items:center}
.pb-lock svg{width:120px; height:120px; color:#5ad6db; opacity:.9}
.btn-ghost{display:inline-flex; align-items:center; gap:9px; border:1.5px solid rgba(255,255,255,.35);
  color:#fff; padding:12px 22px; border-radius:999px; font-weight:600; transition:background .2s, border-color .2s}
.btn-ghost:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6)}

/* ===== footer ===== */
footer{background:var(--bg-2); border-top:1px solid var(--line); padding:56px 0 40px}
.foot{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start}
.foot .brand{margin-bottom:14px}
.foot p{margin:0; color:var(--ink-soft); font-size:15px; max-width:36ch}
.foot-links{display:flex; gap:40px; flex-wrap:wrap}
.foot-links h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; font-family:"Inter"; font-weight:700}
.foot-links a{display:block; color:var(--ink-soft); font-size:15px; margin-bottom:8px; font-weight:500}
.foot-links a:hover{color:var(--ink)}
.copyright{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:14px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ===== privacy page ===== */
.doc{max-width:760px; margin:0 auto; padding:60px 24px 90px}
.doc .back{display:inline-flex; align-items:center; gap:8px; color:var(--teal-deep); font-weight:600; margin-bottom:30px}
.doc h1{font-size:clamp(30px,4.5vw,44px); margin-bottom:8px}
.doc .updated{color:var(--ink-faint); font-size:15px; margin-bottom:14px}
.lang-tabs{display:inline-flex; gap:6px; background:var(--bg-2); padding:5px; border-radius:999px; margin:20px 0 34px}
.lang-tabs button{border:0; background:transparent; padding:8px 20px; border-radius:999px; font-family:"Inter"; font-weight:600; font-size:15px; color:var(--ink-soft); cursor:pointer; transition:all .2s}
.lang-tabs button.active{background:var(--ink); color:#fff}
.doc h2{font-size:21px; margin:34px 0 10px}
.doc p{color:var(--ink-soft); margin:0 0 14px}
.doc .lead{font-size:19px; color:var(--ink); background:rgba(18,167,173,.08); border-left:3px solid var(--teal); padding:16px 20px; border-radius:0 12px 12px 0}
.doc .contact{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 22px; margin-top:24px}
.hidden{display:none}

/* ===== responsive ===== */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:40px; text-align:center; padding-top:48px}
  .hero-copy .dotrow{justify-content:center}
  .hero p.lead{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-visual .dotgrid{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pb-inner{grid-template-columns:1fr; text-align:center; padding:46px 30px}
  .pb-lock{order:-1} .pb-lock svg{width:84px; height:84px}
}
@media(max-width:560px){
  body{font-size:16px}
  .nav-links{display:none}
  .grid{grid-template-columns:1fr}
  .foot{flex-direction:column}
  .section,.pitch,.showcase,.privacy-band{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important; transition:none!important; animation:none!important}
}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:6px}

/* selettore lingua a tendina (8 lingue) */
.lang-select{
  appearance:none; -webkit-appearance:none;
  background-color:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 32px 7px 14px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA5B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.lang-select:hover{background-color:var(--card)}
.lang-select option{background:var(--bg-2); color:var(--ink)}