/* ==========================================================================
   VIEMME — Design System (v2 "We ship it")
   Usato da index.php (home) e da products/_layout.php (landing prodotti).
   Tema scuro, accento arancio. Font: Outfit (display), Manrope (testo),
   JetBrains Mono (etichette). Nessun framework, CSS vanilla.
   ========================================================================== */

:root{
  --bg:#0B0B0B;            /* fondo pagina */
  --panel:#161616;         /* card scure */
  --panel-2:#121212;       /* pannelli (feed) */
  --border:#262626;        /* bordi su scuro */
  --border-soft:#1f1f1f;   /* separatori sezione */
  --text:#ffffff;
  --muted:#bdbdbd;         /* testo secondario */
  --muted-2:#8a8a8a;       /* etichette/meta */
  --muted-3:#6f6f6f;
  --brand:#FD7B2A;         /* accento VIEMME */
  --brand-hi:#ff8c42;      /* hover accento */
  --ink:#0B0B0B;           /* testo su arancio */
  --light:#F4F3F0;         /* sezioni chiare */
  --light-ink:#0B0B0B;
  --light-muted:#4a4a4a;
  --light-border:#cfccc5;
  --maxw:1360px;
  --gutter:clamp(20px,4vw,56px);
  --font-display:'Outfit',sans-serif;
  --font-body:'Manrope',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--brand)}

/* ---- Header ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,11,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:16px;
}
.site-header .logo{height:22px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;font-size:14px;color:var(--muted)}
.site-nav a:hover{color:var(--brand)}

/* ---- Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:700;font-size:15px;
  font-family:var(--font-body);cursor:pointer;border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  line-height:1;
}
.btn-brand{background:var(--brand);color:var(--ink)}
.btn-brand:hover{background:#fff;color:var(--ink)}
.btn-ghost{border-color:#3a3a3a;color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14px}
.link-underline{font-weight:700;color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:4px}
.link-underline:hover{color:#fff;border-color:#fff}

/* ---- Generic section -------------------------------------------------- */
.section{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)}
.section--divider{border-bottom:1px solid var(--border-soft)}
.section--light{background:var(--light);color:var(--light-ink)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.eyebrow{font-family:var(--font-mono);font-size:13px;color:var(--brand);letter-spacing:.02em}
h2.display{font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:.92;letter-spacing:-.04em}
.section--light .eyebrow{color:#B84A0A}
.lead{font-size:17px;line-height:1.55;color:var(--muted);max-width:420px}
.section--light .lead{color:var(--light-muted)}

/* ---- Hero (home) ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft)}
.hero__bgV{position:absolute;width:min(120vw,1500px);left:50%;transform:translateX(-18%);top:-8%;opacity:.07;pointer-events:none}
.hero__grid{
  position:relative;display:grid;gap:56px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));
  padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(48px,6vw,80px);
}
.hero__col{display:flex;flex-direction:column;gap:32px}
.hero__kicker{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:13px;color:var(--brand);flex-wrap:wrap}
.hero__kicker .sep{color:var(--muted-3)}
h1.hero__title{font-weight:600;font-size:clamp(48px,9.6vw,148px);line-height:.88;letter-spacing:-.045em}
.hero__sub{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted);max-width:540px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Feed card (hero right) */
.feed{
  background:var(--panel-2);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  font-family:var(--font-mono);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.feed__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted-2)}
.feed__top .live{display:flex;align-items:center;gap:10px}
.feed__top .live b{color:#fff;font-weight:400}
.dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;display:inline-block}
.feed__body{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.feed__row{display:grid;grid-template-columns:62px 1fr;gap:12px;font-size:12.5px;line-height:1.5;animation:vmIn .4s ease both}
.feed__row .t{color:var(--muted-3)}
.feed__row .p{color:var(--brand)}
.feed__row .a{color:var(--muted-2)}
.feed__row .r{color:#e8e8e8}
.feed__stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.feed__stat{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.feed__stat:first-child{border-right:1px solid var(--border)}
.feed__stat .k{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em}
.feed__stat .v{font-family:var(--font-display);font-size:30px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.feed__stat .v.accent{color:var(--brand)}

/* Marquee */
.marquee{border-top:1px solid var(--border-soft);overflow:hidden;padding:22px 0}
.marquee__track{display:flex;width:max-content;white-space:nowrap;animation:vmMarquee 38s linear infinite}
.marquee__item{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;color:#4a4a4a}
.marquee__item:nth-child(odd){color:#fff}
.marquee__item .star{color:var(--brand);font-size:.6em}

/* ---- Products grid (home) -------------------------------------------- */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.pcard{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-height:280px;transition:border-color .15s ease,transform .15s ease;
}
.pcard:hover{border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.pcard__tag{font-family:var(--font-mono);font-size:13px;color:var(--brand);overflow-wrap:anywhere}
.pcard__name{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.6vw,44px);line-height:.95;letter-spacing:-.035em;overflow-wrap:anywhere;hyphens:none}
.pcard__desc{font-size:16px;line-height:1.55;color:var(--muted)}
.pcard .draft{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
/* featured (full width, orange) */
.pcard--feature{
  grid-column:1/-1;min-height:300px;background:var(--brand);color:var(--ink);border-color:transparent;
}
.pcard--feature:hover{background:var(--brand-hi);color:var(--ink);border-color:transparent}
.pcard--feature .pcard__tag{color:var(--ink)}
.pcard--feature .pcard__name{font-size:clamp(48px,8vw,112px);letter-spacing:-.045em}
.pcard--feature .pcard__desc{color:var(--ink);font-weight:500;font-size:18px;max-width:440px}
.pcard--feature .pcard__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* compact (small tiles) */
.pcard--compact{min-height:0;justify-content:center;gap:6px;padding:22px 28px}
.pcard--compact .pcard__name{font-size:28px;letter-spacing:-.03em}

/* ---- Services switcher (home, light) --------------------------------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--light-ink)}
.svc-q{
  all:unset;cursor:pointer;display:grid;grid-template-columns:44px 1fr 24px;gap:12px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--light-border);transition:color .15s ease;
}
.svc-q:hover{color:#B84A0A}
.svc-q .n{font-family:var(--font-mono);font-size:13px;color:#B84A0A}
.svc-q .q{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.svc-q .bullet{width:14px;height:14px;border-radius:50%;background:var(--brand);justify-self:end;opacity:0;transition:opacity .15s ease}
.svc-q[aria-selected="true"] .bullet{opacity:1}
.svc-q[aria-selected="true"] .q{color:#0B0B0B}
.svc-panel{
  background:var(--bg);color:#fff;border-radius:14px;padding:clamp(28px,3.6vw,48px);
  display:flex;flex-direction:column;gap:24px;min-height:420px;
}
.svc-panel .eyebrow{color:var(--brand)}
.svc-panel h3{font-weight:600;font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.035em}
.svc-panel p{margin:0;font-size:17px;line-height:1.6;color:var(--muted);max-width:520px}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.svc-chips span{border:1px solid #3a3a3a;border-radius:999px;padding:8px 14px;font-size:14px;color:#e8e8e8}

/* ---- Method (home) ---------------------------------------------------- */
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-top:1px solid #2a2a2a}
.method__step{padding:28px 24px 8px;display:flex;flex-direction:column;gap:14px;border-right:1px solid #2a2a2a}
.method__step:last-child{border-right:0}
.method__step .w{font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}
.method__step b{font-family:var(--font-display);font-weight:600;font-size:32px;letter-spacing:-.03em}
.method__step p{margin:0;font-size:15px;line-height:1.55;color:#a8a8a8}
.method__step--hi .w,.method__step--hi b{color:var(--brand)}

/* ---- Contact (home, orange) ------------------------------------------ */
.contact{background:var(--brand);color:var(--ink);position:relative;overflow:hidden}
.contact__inner{display:flex;flex-direction:column;gap:40px}
h2.contact__title{font-weight:700;font-size:clamp(64px,15vw,232px);line-height:.82;letter-spacing:-.055em}
.contact__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.contact__row p{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:560px;font-weight:500}
.contact__cta{display:flex;gap:12px;flex-wrap:wrap}
.contact .btn-ghost{border-color:var(--ink);color:var(--ink)}
.contact .btn-ghost:hover{background:var(--ink);color:#fff}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{background:var(--bg);color:var(--muted-2);border-top:1px solid var(--border-soft)}
.site-footer .row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px 0;font-size:13px;line-height:1.7}
.site-footer .logo{height:20px;width:auto}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.site-footer a:hover{color:var(--brand)}

/* ---- Product landing (products/_layout.php) -------------------------- */
.land-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft)}
.land-hero__inner{position:relative;display:flex;flex-direction:column;gap:28px;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(48px,6vw,80px);max-width:820px}
h1.land-title{font-weight:600;font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:-.04em}
.land-tag{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted);max-width:620px}
.land-intro{font-size:17px;line-height:1.6;color:var(--muted);max-width:640px}
.land-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.badge-soon{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;color:var(--muted-2);border:1px dashed var(--border);border-radius:999px;padding:8px 16px}
.draft-note{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:inline-block}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.fcard{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:10px}
.fcard h3{font-weight:600;font-size:20px;letter-spacing:-.02em}
.fcard p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---- Pitch band (how we work) ---------------------------------------- */
.pitch{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:28px 56px;align-items:start;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:clamp(28px,4vw,56px);position:relative;overflow:hidden;
}
.pitch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.pitch__left{display:flex;flex-direction:column;gap:18px}
.pitch__left h2{font-weight:600;font-size:clamp(30px,4.2vw,60px);line-height:.98;letter-spacing:-.03em;max-width:16ch}
.pitch__right{display:flex;flex-direction:column;gap:0}
.pitch__right p{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--muted)}
.pitch__points{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.pitch__points span{border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:14px;color:#e8e8e8}

/* ---- Giving Back band (home, in fondo) -------------------------------- */
.gb-band{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}
.gb-band .txt{max-width:680px}
.gb-band h2{font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.03em;margin:10px 0 12px}
.gb-band p{margin:0;font-size:17px;line-height:1.55;color:var(--light-muted);max-width:620px}

/* ---- Giving Back ------------------------------------------------------ */
.gb-hero__inner{position:relative;display:flex;flex-direction:column;gap:28px;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(40px,5vw,64px);max-width:860px}
.gb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:8px}
.gb-stat{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px}
.gb-stat .big{font-family:var(--font-display);font-weight:600;font-size:40px;color:var(--brand);line-height:1}
.gb-stat .lbl{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.gb-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.gb-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:12px}
.gb-card h3{font-weight:600;font-size:22px;letter-spacing:-.02em}
.gb-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.gb-card .flag{font-family:var(--font-mono);font-size:13px;color:var(--brand)}
.gb-quote{border-left:3px solid var(--brand);padding:4px 0 4px 16px;color:var(--muted-2);font-style:italic;font-size:15px;line-height:1.55}

/* ---- Animations ------------------------------------------------------- */
@keyframes vmMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes vmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vmPulse{0%,100%{opacity:1}50%{opacity:.25}}
.dot{animation:vmPulse 1.6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .feed__row{animation:none}
  .dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---- Responsive tweaks ------------------------------------------------ */
@media (max-width:640px){
  .site-nav{gap:14px;font-size:13px;width:100%;justify-content:flex-start}
  .section__head{margin-bottom:32px}
  .feed__body{min-height:220px}
  .contact__row{align-items:flex-start}
}