/* ===============================================================
   CSS RESET & BASE NORMALIZATION
   =============================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
  display: block;
}
body { line-height:1.5; background: #F5F5F5; color:#101820; font-family: 'Lato', Arial, Helvetica, sans-serif; min-height:100vh; }
ul, ol { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight:700; letter-spacing: 0.01em; }

/* ===============================================================
   BRAND & GEOMETRIC STRUCTURED VARIABLES
   =============================================================== */
:root {
  --primary: #101820;
  --secondary: #CBA135;
  --accent: #F5F5F5;
  --neutral: #fff;
  --text-dark: #101820;
  --text-light: #F5F5F5;
  --shadow-lg: 0 8px 32px 0 rgba(16,24,32,0.08), 0 1.5px 8px 0 rgba(16,24,32,0.13);
  --shadow-md: 0 2px 6px 0 rgba(16,24,32,0.10);
  --radius-card: 16px;
  --radius-btn: 8px;
  --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-body: 'Lato', Arial, Helvetica, sans-serif;
  --transition: 0.28s cubic-bezier(.6,.15,.26,1.03);
  --gap-main: 24px;
}

/* ===============================================================
   TYPOGRAPHY SCALE & HEADINGS
   =============================================================== */
h1 { font-size: 2.7rem; line-height: 1.13; margin-bottom:24px; font-family:var(--font-display); }
h2 { font-size: 2rem; line-height:1.2; margin-bottom:18px; font-family:var(--font-display); }
h3 { font-size: 1.37rem; line-height:1.3; margin-bottom:10px; font-family:var(--font-display); }
h4 { font-size:1.13rem; margin-bottom:8px; font-family:var(--font-display); }
p, ul li, ol li { font-size: 1rem; margin-bottom:12px; color:var(--text-dark); }
strong, b { font-weight:700; }
small{ font-size: 0.91rem; color:#5C5C5C; }
a { transition: color 0.16s ease; }
a:focus { outline: 2px solid var(--secondary); }

body { font-size: 16px; }

/* MONTSERRAT ANGULAR FONT FOR HEADINGS TO EXPRESS GEOMETRICS */
h1,h2,h3,h4 { font-family: var(--font-display); text-transform: none; }

/* ===============================================================
   LAYOUT CONTAINERS & FLEXBOX GRIDS (NO GRID, NO COLUMNS)
   =============================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: var(--accent);
  border-radius: var(--radius-card);
}

/* Card/flex containers as per mandatory pattern */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--neutral); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 24px; display:flex; flex-direction:column; min-width:260px; transition: box-shadow var(--transition), transform var(--transition); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.01); }

.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* Testimonials Flex */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #fff;
  color: var(--primary);
  border-left: 6px solid var(--secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  margin-bottom:20px;
  max-width: 520px;
  font-size:1.07rem;
  line-height:1.67;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.testimonial-card strong { color: var(--secondary); font-size:1rem; margin-top:6px; font-weight:700; font-family:var(--font-display); letter-spacing:0.03em; }
.testimonial-card:hover { box-shadow: var(--shadow-lg); border-color:var(--primary); }

.feature-item {display:flex;flex-direction:column;align-items:flex-start;gap:15px;}

/* Feature Grid home */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.feature-grid > div {
  flex:1 1 240px;
  min-width: 200px;
  background: var(--neutral);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding:28px 18px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}
.feature-grid > div:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-lg);
}
.feature-grid img {
  width:48px; height:48px; margin-bottom:12px;
}

/* Services List (servizi.html) */
.services-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  margin-bottom:16px;
}
.services-list > div {
  background: var(--neutral);
  border-radius:var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 28px 18px;
  flex: 1 1 240px; min-width:230px;
  display:flex; flex-direction:column; align-items: flex-start;
  margin-bottom: 20px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.services-list > div:hover {
  box-shadow:var(--shadow-lg); transform:translateY(-2px) scale(1.02);
}

.faq-list {
  display:flex; flex-direction:column; gap:20px;
}
.faq-list > div {
  background: var(--neutral);
  border-radius:var(--radius-card);
  padding:20px 18px;
  box-shadow: var(--shadow-md);
  margin-bottom:12px;
}
.faq-list h3 { color:var(--secondary); font-size:1.17rem; margin-bottom:7px; }

/* ===============================================================
   NAVIGATION & HEADER
   =============================================================== */
header { background: var(--neutral); box-shadow: 0 2px 8px rgba(16,24,32,0.07); position:relative; z-index:50; }
.main-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 0;
  position:relative;
}
.main-navigation > a img { height: 38px; width:auto; }
.main-navigation ul {
  display: flex;
  gap: 24px;
  align-items: center;
}
.main-navigation ul li {
  display: flex;
}
.main-navigation ul li a {
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.03rem;
  padding: 7px 13px;
  border-radius: 4px;
  color: var(--primary);
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.main-navigation ul li a:hover, .main-navigation ul li a:focus {
  color: var(--secondary);
  background: rgba(203,161,53,0.10);
}
.main-navigation .btn-primary {
  margin-left:16px;
}

/* Mobile Menu Button */
.mobile-menu-toggle {
  display:none;
  font-size:2.2rem;
  color: var(--primary);
  background:#fff;
  border-radius: 50%;
  width:48px; height:48px;
  align-items: center; justify-content: center;
  position: absolute; top:16px; right:18px;
  z-index:111;
  border: 1.5px solid #eaeaea;
  transition: box-shadow var(--transition), background var(--transition);
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--secondary);
}

/* MOBILE SIDE MENU OVERLAY */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(16,24,32,0.96);
  color: var(--text-light);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  transform: translateX(100%);
  transition: transform 0.44s cubic-bezier(.75,0,.25,1);
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-close {
  color:var(--secondary);
  background:#fff;
  border:none;
  font-size:2rem;
  width:44px; height:44px;
  margin: 26px 24px 18px 0;
  align-self:flex-end;
  border-radius: 50%;
  transition: background var(--transition);
  z-index:1002;
}
.mobile-menu-close:hover, .mobile-menu-close:focus { background:var(--accent); }
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 0 0 44px;
  width: 100vw;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size:1.45rem;
  color: #fff;
  padding: 8px 12px 8px 0;
  border-radius: 0 20px 20px 0;
  margin-bottom:10px;
  transition: background var(--transition), color var(--transition);
}
.mobile-nav a:hover, .mobile-nav a:focus { background: rgba(203,161,53,0.18); color: var(--secondary); }

/* Hide desktop nav on mobile, enable burger */
@media (max-width:1000px){
  .main-navigation ul,
  .main-navigation .btn-primary { display: none; }
  .mobile-menu-toggle { display:flex; }
}
@media (min-width:1001px){
  .mobile-menu { display:none !important; }
}

/* ===============================================================
   BUTTONS & INTERACTIONS
   =============================================================== */
.btn-primary {
  background: linear-gradient(90deg, var(--secondary) 89%, #DEC987 100%);
  color: #101820;
  font-family: var(--font-display);
  font-weight: bold;
  border-radius: var(--radius-btn);
  font-size:1.06rem;
  padding: 12px 30px;
  letter-spacing:0.028em;
  border:none;
  box-shadow:0 1px 2px 0 rgba(16,24,32,0.07);
  display:inline-block;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary);
  color:var(--secondary);
  box-shadow:0 2.5px 13px 0 rgba(16,24,32,0.15);
  transform: scale(1.04);
}

/* Buttons (cookie, modal, links) */
.btn-secondary {
  background: var(--primary);
  color: var(--text-light);
  font-family:var(--font-display);
  font-weight:600;
  border-radius:var(--radius-btn);
  font-size:1rem;
  padding:11px 24px;
  margin-right:10px;
  border:none;
  transition:background var(--transition), color var(--transition), transform var(--transition);
  box-shadow:0 1px 4px 0 rgba(16,24,32,0.07);
}
.btn-secondary:hover, .btn-secondary:focus {
  background:var(--secondary); color:var(--primary);
  transform:scale(1.03);
}

.btn-tertiary {
  background:transparent;
  color:var(--primary);
  border:2px solid var(--secondary);
  font-family:var(--font-display);
  font-weight:600;
  border-radius:var(--radius-btn);
  font-size:1rem;
  padding:11px 24px;
  margin-right:10px;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-tertiary:hover, .btn-tertiary:focus {
  background:var(--secondary); color:var(--primary); border-color:var(--primary);
}

/* ===============================================================
   SECTIONS & SPACING
   =============================================================== */
section { margin-bottom: 60px; padding: 40px 20px; background:var(--accent); border-radius:var(--radius-card); }
section:last-child { margin-bottom:0; }

/* Minimum 20px margin between all cards/sections */
section + section, .card + .card, .feature-grid > div + div,
.testimonial-card + .testimonial-card, .services-list > div + div { margin-top:20px; }

/* Utility minimum spacing for breathing room */
.mb-8 { margin-bottom:8px !important; }
.mb-16 { margin-bottom:16px !important; }
.mb-24 { margin-bottom:24px !important; }
.mb-32 { margin-bottom:32px !important; }

/* ===============================================================
   FOOTER
   =============================================================== */
footer {
  background: var(--primary);
  color: var(--text-light);
  padding: 0 0 16px 0;
  font-size:1rem;
  margin-top:60px;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top:34px; padding-bottom:10px;
}
.footer-content > div, .footer-content nav {
  min-width: 170px;
}
.footer-content img { filter: brightness(1) grayscale(0.2); }
.footer-content nav {
  display:flex; flex-direction:column; gap:8px;
}
.footer-content nav a {
  color:var(--text-light); font-family:var(--font-display); margin-bottom:2px;
  font-size:1.01rem; transition:color var(--transition);
}
.footer-content nav a:hover, .footer-content nav a:focus { color:var(--secondary); }
.footer-links { font-size:0.97rem; color:#c4c4c4; margin-top:28px; margin-bottom:2px; }
.footer-links a {
  color:#c4c4c4; padding:0 2px;
  transition:color var(--transition);
}
.footer-links a:hover, .footer-links a:focus { color:var(--secondary); }
.footer-copyright { margin-top:8px; color:#d6d5d6; font-size:0.91rem; font-family:var(--font-body); }
footer h4 { color:var(--secondary); font-size:1.14rem; letter-spacing:0.02em; margin-bottom:6px; font-weight:700; }
footer ul { list-style:none; }
footer ul li { padding: 1px 0 1px 0; margin-bottom:3px; display: flex; align-items:center; font-size:1rem; }
footer ul li img { width:18px; height:18px; margin-right:8px; filter: brightness(0.9) grayscale(0.35); }
footer .btn-primary { margin-top:8px; }
footer .footer-content > div:last-child { min-width:120px; }
footer .footer-content > div a img { width:32px; height:32px; margin-right:6px; margin-top:6px;}
footer .footer-content > div a img:hover {
  filter:brightness(1.8);
  transform: scale(1.06);
}

/* ===============================================================
   COOKIE CONSENT BANNER & MODAL
   =============================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 -2px 16px rgba(16,24,32,0.18);
  padding: 24px 18px 22px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index:9998;
  font-size:1.07rem;
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
}
.cookie-banner.hide { opacity:0; visibility:hidden; transform:translateY(100%); }
.cookie-banner .cookie-btns { display: flex; align-items: center; gap: 10px; margin-left: 14px; }
.cookie-banner .btn-primary, .cookie-banner .btn-secondary, .cookie-banner .btn-tertiary {
  font-size: 1rem; padding:9px 18px; border-radius:6px; box-shadow:none; margin:0 3px;
}

/* Cookie Modal Backdrop & Modal styling */
.cookie-modal-backdrop {
  position:fixed; top:0; left:0; right:0; bottom:0;
  width:100vw; height:100vh;
  z-index:12000;
  background:rgba(16,24,32,0.7); backdrop-filter: blur(1.5px);
  opacity:1; visibility:visible;
  transition: opacity var(--transition), visibility var(--transition);
  display:flex; align-items: center; justify-content: center;
}
.cookie-modal-backdrop.hide {opacity:0; visibility:hidden;}
.cookie-modal {
  background: #fff;
  color:var(--primary);
  border-radius:18px;
  box-shadow:0 12px 48px 0 rgba(16,24,32,0.22);
  padding: 38px 28px 30px 28px;
  min-width:90%; max-width:440px;
  display:flex; flex-direction:column; gap:22px;
  animation: modalIn 0.55s cubic-bezier(.47,.88,.45,1.21);
}
@keyframes modalIn { from {transform: translateY(110px) scale(0.96); opacity:0;} to {transform: none; opacity:1;}}
.cookie-modal h2, .cookie-modal h3 { color:var(--secondary); }
.cookie-modal .cookie-categories { display:flex; flex-direction:column; gap:19px; }
.cookie-modal .cookie-category { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding: 5px 0; }
.cookie-modal .toggle-switch {
  display:inline-flex; align-items:center; cursor:pointer;
}
.cookie-modal .toggle-switch input[type="checkbox"] {
  appearance:none; width:36px; height:20px;
  border-radius:18px; background:#DDD; position:relative; outline:0; transition:background 0.2s;
}
.cookie-modal .toggle-switch input[type="checkbox"]:checked { background:var(--secondary); }
.cookie-modal .toggle-switch input[type="checkbox"]:before {
  content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff;
  border-radius:50%; transition: transform 0.23s;
}
.cookie-modal .toggle-switch input[type="checkbox"]:checked:before {
  transform: translateX(16px);
}
.cookie-modal .cookie-modal-actions { display:flex; gap:10px; flex-wrap:wrap; padding-top:4px; }

.cookie-modal .required-note {
  font-size:0.95rem; color: #ac8917; margin-top:5px; padding-left:10px; }

/* ===============================================================
   RESPONSIVE / MOBILE DESIGN
   =============================================================== */
@media (max-width: 1200px) {
  .container { max-width: 100%; }
}
@media (max-width: 1000px) {
  .footer-content { flex-wrap:wrap; gap:24px; }
  .feature-grid { flex-direction: column; gap:20px; }
  .services-list { flex-direction:column; gap:18px; }
  .card-container, .content-grid { flex-direction:column; gap: 20px; }
}
@media (max-width: 768px) {
  .container { padding-left:7px; padding-right:7px; }
  .footer-content { gap: 14px; padding-top:24px; }
  .section, section { padding: 27px 5px; margin-bottom:36px; border-radius:11px; }
  h1 { font-size:2.04rem; }
  h2 { font-size: 1.46rem; }
  h3 { font-size: 1.13rem; }
  .feature-grid > div, .services-list > div, .card {
    min-width:0; padding:18px 10px; border-radius:10px; }
  .feature-grid img, .services-list img { width:42px; height:42px; }
  .testimonial-card { max-width:100%; padding:13px; font-size:1rem; border-radius:9px; }
  .content-wrapper { gap:14px; }
  .text-image-section, .footer-content, .content-grid, .card-container, .feature-grid, .services-list {
    flex-direction: column;
    gap:16px;
  }
}
@media (max-width: 520px) {
  html { font-size: 15px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.11rem; }
  .section, section { padding:11px 2px; }
}

/* ===============================================================
   GEOMETRIC STRUCTURED DECORATIVE ELEMENTS
   (Card corners, borders, accent lines)
   =============================================================== */
.card, .feature-grid > div, .services-list > div, .testimonial-card {
  border-radius: var(--radius-card);
  border-top-right-radius: 32px 24px;
  border-bottom-left-radius: 32px 24px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid rgba(16,24,32,0.065);
  position:relative;
}
.card::before, .testimonial-card::before {
  content: '';
  display:block;
  position:absolute;
  top:-10px; left:-10px;
  width:32px; height:32px;
  border-top: 3px solid var(--secondary);
  border-left:3px solid var(--secondary);
  border-radius: 18px 0 0 0;
  opacity:0.8;
}
.feature-grid > div::after {
  content: '';
  position:absolute;
  right:-13px; bottom:-13px;
  width:24px; height:24px;
  border-bottom:2.5px solid var(--secondary);
  border-right:2.5px solid var(--secondary);
  border-radius: 0 0 18px 0;
}

/* More geometry for visual interest */
.section {
  position:relative;
  z-index:1;
}
@media (max-width:520px){
  .feature-grid > div::after, .card::before, .testimonial-card::before {
    display:none;
  }
}

/* ===============================================================
   MISCELLANEOUS
   =============================================================== */
::-webkit-scrollbar { width:8px; background:var(--accent); }
::-webkit-scrollbar-thumb { background:rgba(16,24,32,0.18); border-radius:7px; }

hr { border: none; border-top: 1.5px solid #eaeaea; margin: 32px 0; }

/* Lists with icons */
ul li img {
  vertical-align: middle; width:19px; height:19px; margin-right:7px;
}

/* Modal overlay utility for accessibility */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===============================================================
   ACCESSIBILITY
   =============================================================== */
:focus-visible { outline: 2px solid var(--secondary); outline-offset:2px; }

/* ===============================================================
   PRINT IMPROVEMENTS
   =============================================================== */
@media print { .main-navigation, .mobile-menu, .mobile-menu-toggle, .btn-primary, .cookie-banner, .cookie-modal-backdrop { display:none !important; } }

/* END */