/* ── TOKENS ── */
    :root{
      --dark:#20232c; --red:#eb1010; --domotica:#ff5722;
      --amiin:#ffeb3b; --sentry:#009688; --light-bg:#f5f6f8;
      --focus-ring: 0 0 0 3px rgba(235,16,16,.5);
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}

    /* ── SKIP LINK ── */
    .skip-link{
      position:absolute;top:-999px;left:6px;z-index:9999;
      background:var(--red);color:#fff;padding:8px 16px;border-radius:0 0 4px 4px;
      font-weight:700;font-size:.85rem;text-decoration:none;transition:top .15s;
    }
    .skip-link:focus{top:0;}

    body{font-family:'Mulish',sans-serif;background:#fff;color:var(--dark);font-size:16px;line-height:1.6;}
    :focus-visible{outline:3px solid var(--red);outline-offset:3px;}

    /* ── DOTTED THREAD LINE (left side, always visible) ── */
    body::before{
      content:'';
      position:fixed;
      top:0; left:22px;
      width:2px; height:100vh;
      z-index:500;
      background-image: repeating-linear-gradient(
        to bottom,
        var(--red) 0px,
        var(--red) 6px,
        transparent 6px,
        transparent 14px
      );
      opacity:.22;
      pointer-events:none;
    }
    /* hide thread on very small screens to avoid overlap */
    @media(max-width:380px){ body::before{display:none;} }

    /* ── NAVBAR ── */
    #navbar{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      background:rgba(32,35,44,.97);backdrop-filter:blur(6px);
      padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,.06);transition:padding .3s;
    }
    .nav-brand{font-family:'Audiowide',sans-serif;font-size:1.25rem;color:#fff;text-decoration:none;display:flex;align-items:center;gap:0px;}
    .nav-brand .brand-logo{height:28px;width:auto;display:block;}
    .nav-brand span{color:var(--red);}
    .nav-links{display:flex;gap:20px;}
    .nav-links a{
      color:rgba(255,255,255,.7);text-decoration:none;font-size:.82rem;
      font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:color .2s;
    }
    .nav-links a:hover,.nav-links a:focus-visible{color:#fff;}
    @media(max-width:576px){.nav-links{display:none;}}

    /* ── HERO ── */
    #hero{
      min-height:100svh;background:var(--dark);
      display:grid;grid-template-columns:1fr;
      position:relative;overflow:hidden;
    }
    @media(min-width:768px){#hero{grid-template-columns:1fr 1fr;}}
    #hero::before{
      content:'';position:absolute;inset:0;z-index:1;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
      background-size:40px 40px;pointer-events:none;
    }
    #hero::after{
      content:'';position:absolute;top:-80px;left:-40px;z-index:1;
      width:360px;height:360px;
      background:radial-gradient(circle,rgba(235,16,16,.2) 0%,transparent 70%);
      border-radius:50%;pointer-events:none;
    }
    .hero-text{
      display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
      padding:clamp(80px,12vw,120px) clamp(24px,5vw,64px) 60px;
      position:relative;z-index:2;
    }
    /* Hero logo + brand name together */
    .hero-brand-row{
      display:flex;align-items:center;gap:16px;margin-bottom:6px;
    }
    .hero-brand-logo{
      height:clamp(36px,5vw,56px);width:auto;display:block;
    }
    .hero-image{display:none;position:relative;z-index:2;overflow:hidden;}
    @media(min-width:768px){
      .hero-image{display:block;}
      .hero-image img{
        width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
        mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 12%, black 30%);
        -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 12%, black 30%);
      }
    }
    .hero-payoff{font-family:'Audiowide',sans-serif;font-size:clamp(2rem,6vw,3.8rem);color:#fff;line-height:1.1;margin-bottom:0;}
    .hero-payoff .p-red{color:var(--red);}
    .hero-sub{
      font-family:'Audiowide',sans-serif;font-size:clamp(.85rem,2.5vw,1.05rem);
      color:rgba(255,255,255,.45);letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px;
    }
    .hero-desc{font-size:clamp(.95rem,2vw,1.05rem);color:rgba(255,255,255,.72);max-width:420px;margin-bottom:36px;font-weight:300;}
    .btn-hero{
      display:inline-block;background:var(--red);color:#fff;
      font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
      padding:14px 32px;border-radius:3px;text-decoration:none;transition:background .2s,transform .15s;
    }
    .btn-hero:hover{background:#c90d0d;transform:translateY(-1px);color:#fff;}
    .hero-nocookie{
      margin-top:28px;margin-bottom:0;
      font-size:.78rem;font-weight:300;line-height:1.7;
      color:rgba(255,255,255,.38);
      max-width:380px;
    }
    .hero-nocookie a{
      color:rgba(255,255,255,.55);text-decoration:underline;
      text-underline-offset:3px;transition:color .2s;
    }
    .hero-nocookie a:hover{color:rgba(255,255,255,.9);}
    .scroll-hint{
      position:absolute;bottom:28px;left:clamp(24px,5vw,64px);z-index:3;
      display:flex;flex-direction:column;align-items:center;gap:6px;
      opacity:.4;animation:bounce 2s infinite;
    }
    .scroll-hint span{display:block;width:1px;height:40px;background:rgba(255,255,255,.5);}
    @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

    /* ── SECTIONS ── */
    section{padding:72px 0;}
    .section-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
    .section-title{font-family:'Audiowide',sans-serif;font-size:clamp(1.4rem,5vw,2rem);color:var(--dark);line-height:1.2;margin-bottom:16px;}
    .section-body{font-size:.98rem;font-weight:300;color:#444;max-width:540px;}
    .divider-accent{width:40px;height:3px;background:var(--red);margin-bottom:24px;border-radius:2px;}

    /* ── VALUE CARDS ── */
    .value-card{
      background:#fff;border:1px solid rgba(32,35,44,.08);border-radius:6px;
      padding:28px 24px;height:100%;transition:transform .2s,box-shadow .2s;
    }
    .value-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
    .value-icon{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px;}
    .vi-red{background:rgba(235,16,16,.1);}.vi-teal{background:rgba(0,150,136,.1);}.vi-orange{background:rgba(255,87,34,.1);}
    .value-card h3{font-family:'Audiowide',sans-serif;font-size:.95rem;margin-bottom:8px;}
    .value-card p{font-size:.88rem;color:#555;margin:0;font-weight:300;}

    /* ── PRODUCT CARDS ── */
    /* Cards use flex column so the link always pins to bottom */
    .product-card{
      border-radius:8px;padding:32px 24px;color:#fff;
      height:100%;position:relative;overflow:hidden;
      display:flex;flex-direction:column;
    }
    .product-card::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;}
    .pc-arfea{background:var(--domotica);}
    .pc-sentry{background:var(--sentry);}
    /* AMIIN: yellow background */
    .pc-amiin{background:var(--amiin);color:var(--dark);}
    .product-card .badge-tag{
      display:inline-block;width: fit-content;font-size:.68rem;font-weight:700;letter-spacing:.15em;
      text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:16px;
      background:rgba(255,255,255,.25);color:inherit;
    }
    /* Amiin badge: dark on yellow */
    .pc-amiin .badge-tag{background:rgba(32,35,44,.15);color:var(--dark);}
    .product-card h3{font-family:'Audiowide',sans-serif;font-size:1.3rem;margin-bottom:10px;}
    .pc-amiin h3{color:var(--dark);}
    /* The description paragraph grows to fill space, pushing tech-note + link to bottom */
    .product-card .product-desc{font-size:.9rem;font-weight:300;opacity:.88;margin-bottom:16px;flex:1;}
    .pc-amiin .product-desc{opacity:1;color:var(--dark);}
    .pc-amiin .card-link-btn{opacity:1;color:var(--dark);}
    .product-card .tech-note{
      font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
      opacity:.6;margin-bottom:14px;
    }
    .pc-amiin .tech-note{color:var(--dark);opacity:.55;}
    .product-logo{max-height:36px;width:auto;object-fit:contain;margin-bottom:18px;filter:brightness(0) invert(1);}
    .pc-amiin .product-logo{filter:none;}
    /* Product card links */
    .product-card .card-link{
      display:inline-flex;align-items:center;gap:7px;
      color:rgba(255,255,255,.9);text-decoration:none;
      font-size:.82rem;font-weight:700;letter-spacing:.04em;
      border-top:1px solid rgba(255,255,255,.2);padding-top:14px;margin-top:auto;
      transition:color .2s;
    }
    .product-card .card-link:hover{color:#fff;}
    .pc-amiin .card-link{color:var(--dark);border-color:rgba(32,35,44,.2);}
    .pc-amiin .card-link:hover{color:rgba(0,0,0,.7);}

    /* ── OPEN SOURCE ── */
    #opensource{background:var(--dark);}
    #opensource .section-title{color:#fff;}
    #opensource .section-body{color:rgba(255,255,255,.65);}
    #opensource .section-label{color:var(--red);}
    .os-pill{
      display:inline-block;border:1px solid rgba(255,255,255,.2);
      color:rgba(255,255,255,.8);border-radius:24px;padding:6px 18px;
      font-size:.8rem;font-weight:600;margin:4px;letter-spacing:.05em;transition:border-color .2s,color .2s;
    }
    .os-pill:hover{border-color:var(--red);color:var(--red);}

    .card-link-btn {
      display: inline-block;
      margin-top: auto;
      padding: 10px 20px;
      background: rgba(255,255,255,.15);
      color: #fff;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 3px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s, border-color .2s;
    }
    .card-link-btn:hover {
      background: rgba(255,255,255,.25);
      border-color: rgba(255,255,255,.7);
      color: #fff;
    }

    /* ── PARTNER ── */
    #partner { padding: 80px 0; }
    .partner-card {
      border: 1px solid rgba(32,35,44,.1);
      border-radius: 10px;
      padding: 28px 28px;
      background: #fff;
      transition: box-shadow .2s, transform .2s;
      border-left: 4px solid #f26522; /* ISF orange */
    }
    .partner-card:hover {
      box-shadow: 0 8px 28px rgba(0,0,0,.09);
      transform: translateY(-3px);
    }
    .partner-logo-wrap {
      flex-shrink: 0;
      width: 100px;
    }
    .partner-logo-wrap img {
      width: 100%; height: auto; display: block;
    }
    .partner-name {
      font-family: 'Audiowide', sans-serif;
      font-size: .82rem;
      color: var(--dark);
      margin-bottom: 8px;
      font-weight: 400;
    }
    .partner-desc {
      font-size: .85rem;
      color: #666;
      font-weight: 300;
      line-height: 1.65;
      margin: 0;
    }
    @media (max-width: 480px) {
      .partner-card { flex-direction: column; align-items: flex-start !important; }
      .partner-logo-wrap { width: 80px; }
    }

    /* ── CLIENTI ── */
    #clienti{background:#fff;}
    /* Fixed-height card with logo area + text pinned below */
    .client-logo-wrap{
      display:flex;flex-direction:column;align-items:center;justify-content:space-between;
      padding:24px 16px 20px;
      border:1px solid rgba(32,35,44,.08);border-radius:8px;
      height:100%;min-height:180px;
      transition:box-shadow .2s,transform .2s;
      text-decoration:none;background:#fff;
    }
    .client-logo-wrap:hover,.client-logo-wrap:focus-visible{
      box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-2px);
    }
    /* Logo image area: fixed height so all logos align */
    .client-logo-img-wrap{
      width:100%;height:70px;
      display:flex;align-items:center;justify-content:center;
      margin-bottom:14px;
    }
    .client-logo-img-wrap img{
      max-width:100%;max-height:64px;width:auto;height:auto;
      object-fit:contain;display:block;
    }
    /* Text area pinned to bottom */
    .client-info{display:flex;flex-direction:column;align-items:center;width:100%;}
    .client-badge{
      font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      padding:2px 8px;border-radius:20px;margin-bottom:6px;
      background:var(--light-bg);color:#999;
    }
    .client-sector{font-size:.67rem;color:#aaa;font-weight:400;text-align:center;line-height:1.4;}
    /* Color accents */
    .cc-gnocchi{border-top:3px solid #005ca9;}
    .cc-anffas{border-top:3px solid #1a3a8f;}
    .cc-mode{border-top:3px solid #3a7a3a;}
    .cc-tatti{border-top:3px solid #8b0000;}

    /* ── CONTATTI ── */
    #contatti{background:var(--light-bg);}
    .contact-link{display:inline-flex;align-items:center;gap:8px;color:var(--dark);text-decoration:none;font-weight:600;font-size:.95rem;transition:color .2s;}
    .contact-link:hover,.contact-link:focus-visible{color:var(--red);}

    /* ── FORM ── */
    .form-control,.form-select{
      border:1px solid rgba(32,35,44,.2);border-radius:4px;
      font-family:'Mulish',sans-serif;font-size:.9rem;padding:10px 14px;
      background:#fff;color:var(--dark);transition:border-color .2s,box-shadow .2s;
    }
    .form-control::placeholder{color:#888;}
    .form-control:focus,.form-select:focus{border-color:var(--red);box-shadow:var(--focus-ring);outline:none;}
    .form-control[aria-invalid="true"],.form-select[aria-invalid="true"]{border-color:var(--red);}
    .form-label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#555;margin-bottom:5px;display:block;}
    .privacy-check-wrap{
      display:flex;align-items:flex-start;gap:10px;
      background:#fff;border:1px solid rgba(32,35,44,.12);border-radius:4px;padding:14px 16px;
    }
    .privacy-check-wrap input[type="checkbox"]{width:18px;height:18px;min-width:18px;accent-color:var(--red);cursor:pointer;margin-top:2px;}
    .privacy-check-wrap label{font-size:.85rem;font-weight:400;color:#555;cursor:pointer;line-height:1.5;}
    .privacy-check-wrap label a{color:var(--red);text-decoration:underline;}
    .privacy-check-wrap.invalid{border-color:var(--red);}
    .btn-submit{
      background:var(--red);color:#fff;border:none;border-radius:4px;
      padding:14px 36px;font-family:'Mulish',sans-serif;font-weight:700;
      font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
      cursor:pointer;transition:background .2s,transform .15s;width:100%;min-height:48px;
    }
    .btn-submit:hover{background:#c90d0d;transform:translateY(-1px);}
    .btn-submit:focus-visible{box-shadow:var(--focus-ring);}
    .btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
    .form-feedback{font-size:.85rem;padding:10px 14px;border-radius:4px;margin-top:12px;display:none;}
    .form-feedback.ok{background:rgba(0,150,136,.1);color:#006b60;border:1px solid rgba(0,150,136,.3);display:block;}
    .form-feedback.err{background:rgba(235,16,16,.08);color:#b30000;border:1px solid rgba(235,16,16,.2);display:block;}
    #formFeedback[role="alert"]{display:block;}

    /* ── MAP ── */
    .map-wrapper{border-radius:8px;overflow:hidden;border:1px solid rgba(32,35,44,.1);}
    .map-wrapper iframe{display:block;width:100%;height:300px;border:none;}

    /* ── FOOTER ── */
    footer{background:var(--dark);color:rgba(255,255,255,.5);text-align:center;font-size:.75rem;padding:24px 16px;line-height:1.8;}
    footer a{color:rgba(255,255,255,.55);text-decoration:underline;}
    footer a:hover,footer a:focus-visible{color:#fff;}

    /* ── ANIMATIONS ── */
    .fade-up{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
    .fade-up.visible{opacity:1;transform:translateY(0);}
    @media(prefers-reduced-motion:reduce){
      *{animation:none!important;transition:none!important;}
      .fade-up{opacity:1;transform:none;}
      html{scroll-behavior:auto;}
      body::before{display:none;}
    }

/* Reset outline di default — solo visivamente, non rimuove l'accessibilità */
*:focus {
  outline: none;
}

/* Focus visibile solo per navigazione tastiera (e screen reader) */
*:focus-visible {
  outline: 3px solid #eb1010;       /* colore brand rosso Pecosoft, ben visibile */
  outline-offset: 3px;
  border-radius: 2px;
}

/* Link e bottoni su sfondo scuro: usa il bianco per leggibilità */
#hero *:focus-visible,
#problema *:focus-visible,
#funzionamento *:focus-visible,
#integrazione *:focus-visible,
#evoluzione *:focus-visible,
#cta *:focus-visible,
#opensource *:focus-visible,
.pq-band *:focus-visible,
footer *:focus-visible {
  outline-color: #ffffff;
}

/* Skip link: deve essere visibile quando riceve focus da tastiera */
.skip-link,
a[href="#main-content"] {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
.skip-link:focus-visible,
a[href="#main-content"]:focus-visible {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 9999;
  padding: 10px 20px;
  background: #eb1010;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 3px;
  outline: 3px solid #fff;
  outline-offset: 2px;
  text-decoration: none;
}

/* Input e select del form: focus più morbido, coerente con il design */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #eb1010;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(235, 16, 16, 0.15);
  border-radius: 2px;
}