/* Sector landing pages (siti-web-*, ecommerce-*, sito-web-*): a light flow layout in the
   home page's language — dark surface, Hanken Grotesk, glass cards, film grain.
   No inline styles or scripts anywhere (the CSP forbids them). */
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:200 600; font-display:swap;
  src:url("../fonts/hankengrotesk-var.woff2") format("woff2");
}
:root{
  --text-hi:#f3f0ea; --text-mid:#b4b4b4; --text-dim:#8f8f8f;
  --rose:rgba(226,186,202,.7);
  --maxw:1100px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:#141414; color:var(--text-hi);
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(60% 40% at 50% 0%, rgba(216,158,162,.10), rgba(216,158,162,0) 70%);
  background-repeat:no-repeat;
}
/* static film grain (the home animates it; here it only needs to texture the surface) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("../assets/grain.png"); background-size:132px 132px;
  mix-blend-mode:overlay; opacity:.28;
}
a{ color:inherit; }
.wrap{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 6vw; }

/* ---------- top bar ---------- */
.top{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:26px 6vw 0;
}
.top__logo{ font-size:23px; font-weight:300; letter-spacing:-.03em; text-decoration:none; color:var(--text-hi); }
.top__nav{ display:flex; align-items:center; gap:22px; font-size:13px; letter-spacing:.09em; color:var(--text-mid); }
.top__nav a{ text-decoration:none; transition:color .2s; }
.top__nav a:hover{ color:var(--text-hi); }
.pill{
  padding:11px 20px; border-radius:15px; border:1px solid rgba(255,255,255,.14);
  background:rgba(52,34,26,.42); color:var(--text-hi); font-size:12px; letter-spacing:.11em;
}

/* ---------- content ---------- */
.crumbs{ margin-top:56px; font-size:13px; color:var(--text-dim); letter-spacing:.04em; }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ color:var(--text-hi); }
.intro{ padding:28px 0 12px; max-width:50rem; }
.eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mid); }
.eyebrow::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--rose); margin-right:10px; vertical-align:middle; }
h1{ margin-top:18px; font-weight:300; font-size:clamp(32px, 4.6vw, 58px); line-height:1.06; letter-spacing:-.034em; text-wrap:balance; }
.lead{ margin-top:26px; font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--text-mid); text-wrap:pretty; }
.cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:26px; }
.cta{
  display:inline-flex; align-items:center; min-height:46px; padding:14px 28px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--text-hi);
  border-radius:15px; corner-shape:superellipse(4);
  background:rgba(26,26,26,.55); border:1px solid rgba(255,255,255,.12);
  transition:background .2s, transform .2s;
}
.cta:hover{ background:rgba(40,40,40,.7); transform:translateY(-1px); }
.textlink{ font-size:14px; color:var(--text-mid); text-decoration:none; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.18); transition:color .2s, border-color .2s; }
.textlink:hover{ color:var(--text-hi); border-bottom-color:rgba(226,186,202,.5); }

section{ margin-top:84px; }
h2{ font-weight:300; font-size:clamp(24px, 2.6vw, 34px); letter-spacing:-.024em; line-height:1.15; }
.grid{ margin-top:28px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.card{
  padding:26px 28px; border-radius:24px; corner-shape:superellipse(4);
  background:rgba(26,26,26,.55); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.card h3{ font-weight:400; font-size:19px; letter-spacing:-.01em; }
.card p{ margin-top:10px; font-size:16px; line-height:1.55; color:var(--text-mid); }
.split{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px; }
.list{ margin-top:22px; list-style:none; display:grid; gap:14px; }
.list li{ position:relative; padding-left:24px; font-size:16.5px; line-height:1.5; }
.list li::before{ content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--rose); }
.note{ margin-top:22px; font-size:14px; color:var(--text-dim); line-height:1.5; }
.body{ margin-top:18px; max-width:44rem; color:var(--text-mid); }
.faqs{ margin-top:22px; display:grid; gap:0; }
.faq{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; }
.faq:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.faq summary{ cursor:pointer; list-style:none; font-size:18px; font-weight:400; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--text-dim); font-weight:300; }
.faq[open] summary::after{ content:"–"; }
.faq p{ margin-top:12px; max-width:44rem; color:var(--text-mid); }

.close{ text-align:center; padding:72px 0 8px; margin-top:96px; border-top:1px solid rgba(255,255,255,.08); }
.close .body{ margin-left:auto; margin-right:auto; }
.mail{
  display:inline-block; margin-top:26px; font-size:clamp(22px, 2.6vw, 34px); font-weight:300; letter-spacing:-.02em;
  text-decoration:none; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.16); transition:color .2s, border-color .2s;
}
.mail:hover{ color:#ffdcec; border-bottom-color:rgba(226,186,202,.55); }
.reply{ margin-top:16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }

.foot{ position:relative; z-index:1; margin-top:96px; padding:34px 0 46px; border-top:1px solid rgba(255,255,255,.08); }
.foot__in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; }
.foot__h{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.foot__list{ margin-top:12px; list-style:none; display:grid; gap:8px; font-size:15px; }
.foot__list a{ text-decoration:none; color:var(--text-mid); } .foot__list a:hover{ color:var(--text-hi); }
.foot__copy{ align-self:flex-end; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); max-width:36rem; line-height:1.7; }
.foot__copy a{ color:var(--text-mid); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); } .foot__copy a:hover{ color:var(--text-hi); }

a:focus-visible, summary:focus-visible{ outline:2px solid rgba(226,186,202,.7); outline-offset:3px; }

@media (max-width:820px){
  body{ font-size:18px; }
  .grid, .split{ grid-template-columns:minmax(0,1fr); }
  .split{ gap:56px; }
  section{ margin-top:64px; }
  .crumbs{ margin-top:40px; }
  .foot__copy{ align-self:flex-start; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .cta{ transition:none; } }