:root{
  --bg:#F7FAFF;
  --text:#0F172A;
  --muted:#64748B;

  --g1:#2ECF9A;
  --g2:#4FA6FF;

  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --shadow2: 0 12px 30px rgba(15,23,42,.08);
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{width:100%;max-width:100%;overflow-x:hidden}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}

.container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

a{color:inherit; text-decoration:none}
img,svg{max-width:100%;height:auto}

.small{font-size:12px}
.muted{color:rgba(15,23,42,.62)}
.link{color:rgba(15,23,42,.65)}
.link:hover{color:rgba(15,23,42,.92)}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(247,250,255,.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.topbar__tagline{
  display:inline-block;
  font-size:12px;
  color:var(--muted, #64748B);
  white-space:nowrap;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(226,232,240,.7);
  border:1px solid rgba(148,163,184,.35);
}
@media (max-width: 860px){
  .topbar__tagline{ display:none; }
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand__img{display:block;height:40px;width:auto;object-fit:contain}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav__links a{
  font-size:14px;
  color:rgba(15,23,42,.75);
  white-space:nowrap;
}
.nav__links a:hover{color:rgba(15,23,42,.95)}

/* =========================
   BUTTONS
   ========================= */
.btn{
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 14px 30px rgba(46,207,154,.18);
}
.btn--soft{
  background:rgba(255,255,255,.92);
  border:1.5px solid var(--g1);
  color:var(--g1);
}
.btn--soft:hover{
  background:rgba(46,207,154,.06);
  border-color:var(--g1);
  color:var(--g1);
}
.btn--ghost{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.82);
}
.btn--full{width:100%}

/* =========================
   PILL (Zik assistant = CTA)
   ========================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.65);
  color:rgba(15,23,42,.86);
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pill:hover{
  background:rgba(255,255,255,.85);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.pill:active{transform:translateY(1px)}
.pill strong{font-weight:900}

.pillDot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 0 0 3px rgba(79,166,255,.10);
}

/* =========================
   HAMBURGER
   ========================= */
.nav__burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor:pointer;
  position:relative;
}

.nav__burger .burgerLine{
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  background:rgba(15,23,42,.72);
  border-radius:999px;
  transform:translateX(-50%);
  transition:top .18s ease, transform .18s ease, opacity .18s ease;
}
.nav__burger .burgerLine:nth-child(1){top:16px}
.nav__burger .burgerLine:nth-child(2){top:21px}
.nav__burger .burgerLine:nth-child(3){top:26px}

.nav__burger[aria-expanded="true"] .burgerLine:nth-child(1){
  top:21px;
  transform:translateX(-50%) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .burgerLine:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] .burgerLine:nth-child(3){
  top:21px;
  transform:translateX(-50%) rotate(-45deg);
}

/* =========================
   DRAWER MOBILE
   ========================= */
.navDrawer[aria-hidden="true"]{display:none}
.navDrawer{position:fixed;inset:0;z-index:9998}

.navDrawer__backdrop{
  position:absolute;inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.navDrawer__panel{
  position:absolute;
  right:12px;
  top:68px;
  width:min(360px, calc(100% - 24px));
  max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 18px 50px rgba(15,23,42,.18);
  border-radius:22px;
  padding:14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navDrawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
}
.navDrawer__title{font-weight:900}
.navDrawer__close{
  width:38px;height:38px;
  border-radius:14px;
  border:0;
  background:rgba(15,23,42,.06);
  cursor:pointer;
}

.navDrawer__link{
  display:block;
  padding:12px 12px;
  border-radius:16px;
  font-weight:800;
  color:rgba(15,23,42,.86);
  border:1px solid rgba(15,23,42,.06);
  background:rgba(255,255,255,.65);
}
.navDrawer__link:hover{background:rgba(15,23,42,.04)}

.navDrawer__sep{
  height:1px;
  background:rgba(15,23,42,.08);
  margin:10px 0 12px;
}

/* =========================
   HERO (FV)
   ========================= */
.hero{
  position:relative;
  padding:48px 0 56px;
  isolation:isolate;
}

/* background blobs */
.hero__bg{
  position:absolute;
  inset:-80px -40px -60px -40px;
  background:
    radial-gradient(600px 380px at 15% 15%, rgba(79,166,255,.16), transparent 60%),
    radial-gradient(560px 380px at 75% 25%, rgba(46,207,154,.16), transparent 60%),
    radial-gradient(520px 360px at 55% 85%, rgba(255,179,91,.10), transparent 65%);
  z-index:-2;
  pointer-events:none;
}

/* grain (make sure file exists: /img/noise.svg) */
.hero::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:url("/asset/img/noise.svg") repeat;
  opacity:.55;
  mix-blend-mode:soft-light;
  z-index:-1;
  pointer-events:none;
}

.hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:start;
}

h1{
  font-size:48px;
  line-height:1.1;
  letter-spacing:-0.03em;
  margin:0;
}

.grad{
  background:linear-gradient(135deg,var(--g1),var(--g2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.grad2{
  background:linear-gradient(135deg, rgba(79,166,255,.95), rgba(46,207,154,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__sub{
  margin:10px 0 0;
  color:rgba(15,23,42,.72);
  font-size:17px;
  line-height:1.55;
  max-width:640px;
}

.hero__cta{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}

.hero__cta .btn--primary{
  padding:13px 18px;
  box-shadow:0 18px 38px rgba(46,207,154,.22);
}
.hero__cta .btn--soft{padding:13px 18px}

/* =========================
   HERO SERVICES (4 cards)
   mobile: 2x2 | desktop: 4 in row
   ========================= */
.heroServices{
  margin:14px 0 12px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  width:100%;
  max-width:560px;
}

.heroSvc{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.72);
  border-radius:20px;
  box-shadow:var(--shadow2);
  padding:14px;
  cursor:pointer;
  width:100%;
  min-width:0;
  text-align:left;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.heroSvc:active{transform:translateY(1px)}
.heroSvc:hover{
  background:rgba(255,255,255,.85);
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}

.heroSvc__icon{
  width:56px;height:56px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(46,207,154,.18), rgba(79,166,255,.18));
  display:grid;
  place-items:center;
}
.heroSvc__icon img{display:block}

.heroSvc__title{
  font-weight:900;
  font-size:16px;
  line-height:1.15;
}

.heroSvc__sub{
  font-size:13px;
  color:rgba(15,23,42,.62);
  line-height:1.2;
}

/* =========================
   TRUST
   ========================= */
.trust{margin-top:22px; display:grid; gap:10px}
.trust__item{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(15,23,42,.72);
  font-size:14px;
}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot--green{background:#2ECF9A}
.dot--blue{background:#4FA6FF}
.dot--amber{background:#FFB35B}

/* =========================
   HERO CARD (right)
   ========================= */
.hero__visual{position:relative; min-height:360px}

/* Card Zik a destra: sticky come nel mockup (floating) */
@media (min-width: 981px){
  .hero__visual{position:sticky; top:100px}
}

.heroCard{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px;
  max-width:460px;
  margin-left:auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Card Zik portale: sfondo grigio-blu e ombra leggera come nel ref */
.heroCard--portal{
  background:rgba(241,245,253,.95);
  border:1px solid rgba(79,166,255,.12);
  box-shadow:0 12px 40px rgba(15,23,42,.06);
}

.heroCard__head{display:flex;gap:12px;align-items:center;margin-bottom:12px}

.miniAvatar{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg, rgba(46,207,154,.22), rgba(79,166,255,.22));
  display:grid;place-items:center;
  position:relative;
  overflow:hidden;
}
.miniRing{
  position:absolute; inset:7px;
  border-radius:12px;
  border:2px solid rgba(46,207,154,.35);
}
.miniPic{
  width:32px;height:32px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

.heroCard__title{font-weight:900}
.heroCard__sub{font-size:13px; color:rgba(15,23,42,.65)}

.lightBlob{
  position:absolute;
  width:260px;height:260px;
  border-radius:999px;
  filter: blur(22px);
  opacity:.7;
  z-index:-1;
}
.lightBlob.a{right:10px; top:12px; background:rgba(79,166,255,.22)}
.lightBlob.b{right:180px; top:160px; background:rgba(46,207,154,.22)}

/* =========================
   SECTIONS + GRIDS
   ========================= */
.section{padding:48px 0}

.section__head{text-align:center;margin-bottom:24px}
.section__head h2{margin:0;font-size:30px;letter-spacing:-.02em}
.section__head p{margin:8px 0 0;color:rgba(15,23,42,.62)}

.section--soft{
  background:rgba(255,255,255,.55);
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

/* =========================
   CARDS
   ========================= */
.card{
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:var(--shadow2);
  padding:16px 16px 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.miniCard{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* pack cards (scenari) */
.card--pack{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px;
  position:relative;
}
.packImg{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  margin-bottom:10px;
  background:rgba(255,255,255,.4);
}

/* =========================
   STEPS
   ========================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}
.step{
  background:rgba(255,255,255,.68);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.step__n{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  margin-bottom:8px;
}
.step h3{margin:0 0 6px;font-size:16px}

/* =========================
   FAQ
   ========================= */
.faq details{
  background:rgba(255,255,255,.68);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:12px 14px;
  margin-bottom:10px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.faq summary{cursor:pointer;font-weight:800}
.faq p{margin:8px 0 0}

/* =========================
   FINAL CTA
   ========================= */
.finalCta{
  margin-top:24px;
  text-align:center;
  padding:24px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:var(--shadow2);
}
.finalCta h3{margin:0 0 8px}

/* =========================
   FOOTER
   ========================= */
.footer{
  padding:20px 0 30px;
  border-top:1px solid rgba(15,23,42,.06);
  background:rgba(240,246,255,.90);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.footerBrand{display:flex;align-items:center;gap:10px}
.footerLogo{font-weight:900}
.footerLinks{display:flex;gap:14px;flex-wrap:wrap}

/* =========================
   BOT OVERLAY
   ========================= */
.zikOverlay[aria-hidden="true"]{display:none}
.zikOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
}
.zikBackdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zikPanel{
  position:relative;
  width:min(980px, calc(100% - 24px));
  height:min(720px, calc(100% - 24px));
  max-width:calc(100vw - 20px);
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.zikHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.zikLeft{display:flex;align-items:center;gap:10px}
.zikDot{
  width:34px;height:34px;border-radius:12px;
  overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--g1),var(--g2));
}
.zikPic{
  width:26px;height:26px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.zikTitle{font-weight:900}
.zikSub{font-size:12px;color:rgba(15,23,42,.62)}
.zikClose{
  border:0;cursor:pointer;
  width:38px;height:38px;
  border-radius:14px;
  background:rgba(15,23,42,.06);
}
.zikFrame{
  flex:1 1 auto;
  min-height:0;
  border:0;
  width:100%;
  background:transparent;
}

/* =========================
   RESPONSIVE
   ========================= */

/* Desktop wide: show heroServices 4 columns */
@media (min-width: 940px){
  .heroServices{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
    max-width:520px;
  }
  .heroSvc{padding:12px;border-radius:18px}
  .heroSvc__icon{width:54px;height:54px}
}

/* Tablet+ down: una colonna, card Zik sotto (non sticky) */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap: 28px; align-items: stretch}
  .hero__visual{position:relative; top:auto}
  .heroCard{margin: 0; max-width:unset}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap: 14px}
  .footer__inner{flex-direction:column}
}

@media (max-width: 820px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  /* #openBotTop resta visibile su mobile */
}


/* Small phones: più respiro come mockup mobile */
@media (max-width: 520px){
  .container{width:min(1180px, calc(100% - 24px))}
  h1{font-size:34px}
  .zikPanel{height:calc(100dvh - 20px)}
  .hero__bg{inset:-40px -20px -40px -20px}
  .hero{padding: 32px 0 40px}
  .section{padding: 36px 0}
  .hero__cta{flex-direction: column; align-items: stretch}
  .hero__cta .btn--primary,
  .hero__cta .btn--soft{ width: 100%; justify-content: center }
}

/* fallback for browsers without dvh */
@supports not (height: 100dvh){
  @media (max-width:520px){
    .zikPanel{height:calc(100vh - 20px)}
  }
}

/* ================================
   FIX HERO CARDS ICONS (OffertaOK)
   Incolla in fondo al CSS globale
   ================================ */

/* Card: micro polish */
.heroServices{
  gap:12px;
}
.heroSvc{
  gap:8px;
}

/* Icona: pi첫 grande + non centrata */
.heroSvc__icon{
  width:78px;
  height:78px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(46,207,154,.14), rgba(79,166,255,.14));
  display:block;          /* elimina centratura */
  padding:10px;           /* cornice interna */
  overflow:hidden;
}

/* Immagine: grande, allineata a sinistra */
.heroSvc__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;  /* NON centrata */
  display:block;
  transform:translateX(-2px);   /* micro spinta a sinistra (premium) */
}

/* Testi: un filo pi첫 leggibili su mobile */
@media (max-width:520px){
  .heroServices{ gap:10px; }

  .heroSvc{
    padding:12px;
    border-radius:18px;
  }

  .heroSvc__icon{
    width:84px;
    height:84px;
    padding:10px;
    border-radius:24px;
  }

  .heroSvc__title{ font-size:15px; }
  .heroSvc__sub{ font-size:12px; }
}

/* Desktop: torna un pelo pi첫 compatto */
@media (min-width:940px){
  .heroSvc__icon{
    width:72px;
    height:72px;
    padding:9px;
    border-radius:20px;
  }
}
/* =========================
   PORTAL (Home Zik)
   ========================= */

.portalHero{
  position:relative;
  padding: 58px 0 64px;
  overflow:hidden;
}
.portalHero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 420px at 18% 20%, rgba(46,207,154,.18), transparent 60%),
    radial-gradient(760px 420px at 80% 10%, rgba(79,166,255,.18), transparent 60%);
  pointer-events:none;
}
.portalHero__grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 26px;
  align-items:start;
}
@media (max-width: 980px){
  .portalHero__grid{ grid-template-columns: 1fr; }
  .portalHero__visual{ display:none; }
}

.portalHero h1{
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}
.portalHero__sub{
  max-width: 720px;
  color: var(--muted, #64748B);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.portalGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 980px){
  .portalGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
}
@media (max-width: 520px){
  .portalGrid{ grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
}

.portalCard{
  display:block;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 20px 20px 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.portalCard:hover{
  transform: translateY(-3px);
  border-color: rgba(15,23,42,.14);
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
}
.portalCard__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:12px;
  border-radius:50%;
  background:rgba(226,232,240,.9);
  box-shadow:0 0 0 2px rgba(46,207,154,.25);
  overflow:hidden;
}
.portalCard__icon img{
  width:56%;
  height:56%;
  object-fit:contain;
  display:block;
}
.portalCard__title{
  font-weight: 800;
  margin-bottom: 6px;
}
.portalCard__sub{
  color: var(--muted, #64748B);
  font-size: 14px;
  line-height: 1.45;
  min-height: 40px;
}
.portalCard__cta{
  margin-top: 12px;
  font-weight: 700;
  color: var(--g1);
}
.portalCard__cta:hover{ color: var(--g2); }

.portalTrust{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
  margin-top: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
}
@media (max-width: 720px){
  .portalTrust{ grid-template-columns: 1fr; }
}
.portalTrust__item{
  color: var(--muted, #64748B);
  font-size: 14px;
}
.portalTrust__item strong{ color: var(--text, #0F172A); }
.tick{
  display:inline-flex;
  width: 18px; height: 18px;
  align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(46,207,154,.18);
  color: #0F172A;
  margin-right: 8px;
  font-weight: 900;
}

/* mock card (destra) */
.portalMock{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
  position: sticky;
  top: 84px;
}
.portalMock__head{
  display:flex; gap: 12px; align-items:center;
  margin-bottom: 10px;
}
.portalMock__title{ font-weight: 900; }
.portalMock__sub{ color: var(--muted, #64748B); font-size: 13px; margin-top:2px; }
.portalMock__body{
  border-radius: 16px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  padding: 12px;
  margin-bottom: 12px;
}
.mockLine{ color: #0F172A; font-size: 13px; }
.mockChips{ display:flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(148,163,184,.4);
  font-weight: 700;
  font-size: 12px;
  color: #0F172A;
}
.heroCard--portal .chip{
  background: #fff;
  border-color: rgba(148,163,184,.5);
  color: #64748B;
}

/* blob se già li hai bene, altrimenti fallback */
.lightBlob{
  position:absolute;
  width: 260px; height: 260px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .55;
  pointer-events:none;
}
.lightBlob.a{ background: rgba(46,207,154,.35); right: 40px; top: 80px; }
.lightBlob.b{ background: rgba(79,166,255,.35); right: 140px; top: 240px; }