/* =========================================================
       Silere Non Possum — "Tutela delle fonti"
       Palette "Oro liturgico" · mobile-first friendly
       ========================================================= */
    :root {
      --paper:#faf7f1; --ink:#2a2218; --accent:#9a7327; --accent-soft:#e8c879;
      --meta:#8a7f6c; --tint:#f3ecdf; --border:#e6ddcc; --card:#fffdf8;
      --cream:#f3ecdf; --ok:#1e7a52; --warn:#7a5b1e; --danger:#8f332e;
      --font-serif:"Newsreader", Georgia, "Times New Roman", serif;
      --font-sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-mono:ui-monospace,"SFMono-Regular",Menlo,"JetBrains Mono",monospace;
      --content:1080px;
    }

    *,*::before,*::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; line-height:1.4; overflow-x:hidden; }
    img { display:block; max-width:100%; height:auto; }
    a { color:inherit; text-decoration:none; }
    button { font-family:inherit; cursor:pointer; }
    ::selection { background:var(--accent-soft); color:var(--ink); }

    .section { max-width:var(--content); margin:0 auto; padding:88px 32px; }
    .sec-num { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--meta); text-transform:uppercase; }
    .sec-rule { width:46px; height:4px; background:var(--accent); margin-top:16px; }

    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 26px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em; }
    .btn:hover { background:#b08432; }
    .btn--outline-light { background:transparent; border:1px solid rgba(243,236,223,.4); color:var(--cream); font-weight:600; }
    .btn--outline-light:hover { background:transparent; border-color:var(--accent-soft); color:var(--accent-soft); }
    .btn--dark { background:var(--ink); color:var(--cream); }
    .btn--dark:hover { background:#3a2f20; }
    .btn--outline-dark { background:transparent; border:1.5px solid var(--ink); color:var(--ink); font-weight:800; }
    .btn--outline-dark:hover { background:var(--ink); color:var(--accent-soft); }

    /* ---------- hero ---------- */
    .hero { background:var(--ink); color:var(--cream); position:relative; overflow:hidden; }
    .hero::before { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,rgba(232,200,121,.05) 0 1px,transparent 1px 22px); pointer-events:none; }
    .hero__inner { max-width:1080px; margin:0 auto; padding:90px 32px 80px; position:relative; }
    .hero__badge { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(243,236,223,.28); border-radius:100px; padding:7px 16px; font-size:12px; font-weight:700; letter-spacing:.16em; margin-bottom:34px; }
    .hero__dot { width:7px; height:7px; border-radius:50%; background:var(--accent-soft); }
    .hero__title { font-family:var(--font-serif); font-weight:600; font-size:60px; line-height:1.05; margin:0 0 30px; max-width:22ch; letter-spacing:-.01em; }
    .hero__title em { font-style:italic; color:var(--accent-soft); }
    .hero__lead { font-family:var(--font-serif); font-size:22px; line-height:1.5; max-width:62ch; margin:0 0 18px; color:#e6e0d2; }
    .hero__text { font-size:16.5px; line-height:1.65; max-width:64ch; margin:0 0 40px; color:#b7b0a1; }
    .hero__cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

    /* ---------- principio ---------- */
    .principle { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
    .principle__title { font-family:var(--font-serif); font-weight:600; font-size:34px; line-height:1.2; margin:0 0 22px; letter-spacing:-.01em; }
    .principle__text { font-size:17px; line-height:1.7; color:#3a352c; margin:0; }

    /* ---------- giurisdizione ---------- */
    .juris { background:var(--ink); color:var(--cream); }
    .juris__inner { max-width:1080px; margin:0 auto; padding:88px 32px; }
    .juris__grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin-bottom:56px; }
    .juris .sec-num { color:var(--accent-soft); }
    .juris__title { font-family:var(--font-serif); font-weight:600; font-size:36px; line-height:1.18; margin:18px 0 22px; letter-spacing:-.01em; }
    .estonia { display:flex; align-items:center; gap:14px; margin-top:20px; }
    .estonia__flag { width:74px; height:48px; flex:none; border-radius:6px; overflow:hidden; border:1px solid rgba(243,236,223,.28); box-shadow:0 6px 18px rgba(0,0,0,.35); background:linear-gradient(to bottom, #0072CE 0 33.34%, #0a0a0a 33.34% 66.67%, #f7f5ef 66.67% 100%); }
    .estonia__cap { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; color:#c8c2b3; }
    .estonia__cap-loc { color:var(--accent-soft); }
    .juris__text { font-size:16.5px; line-height:1.7; color:#c8c2b3; margin:0; }
    .juris__text strong { color:var(--cream); }
    .statcard { border:1px solid rgba(243,236,223,.18); padding:34px; position:relative; }
    .statcard::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent-soft); }
    .statcard__head { font-family:var(--font-mono); font-size:12px; color:var(--meta); letter-spacing:.08em; margin-bottom:20px; }
    .statcard__grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
    .statcard__row--full { grid-column:1/-1; border-bottom:1px solid rgba(243,236,223,.14); padding-bottom:18px; margin-bottom:6px; }
    .stat-big { font-family:var(--font-serif); font-size:52px; font-weight:600; line-height:1; color:var(--accent-soft); }
    .stat-big span { font-size:22px; color:var(--meta); }
    .stat-mid { font-family:var(--font-serif); font-size:34px; font-weight:600; line-height:1; }
    .stat-label { font-size:13px; color:#c8c2b3; margin-top:8px; }
    .stat-label--sm { font-size:12.5px; color:var(--meta); margin-top:4px; }
    .juris__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(243,236,223,.14); }
    .juris-card { background:var(--ink); padding:26px 24px; }
    .juris-card__title { font-family:var(--font-serif); font-size:19px; font-weight:600; margin-bottom:8px; }
    .juris-card__text { font-size:14px; line-height:1.6; color:#a39c8d; margin:0; }

    /* ---------- infrastruttura ---------- */
    .infra__intro { max-width:62ch; margin-bottom:48px; }
    .infra__title { font-family:var(--font-serif); font-weight:600; font-size:36px; line-height:1.18; margin:18px 0 18px; letter-spacing:-.01em; }
    .infra__text { font-size:17px; line-height:1.7; color:#3a352c; margin:0; }
    .infra__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
    .infra-card { background:var(--card); padding:32px; }
    .infra-card__num { font-family:var(--font-mono); font-size:13px; color:#b89a00; margin-bottom:14px; }
    .infra-card__title { font-family:var(--font-serif); font-size:21px; font-weight:600; margin:0 0 10px; }
    .infra-card__text { font-size:15px; line-height:1.65; color:#5c564a; margin:0; }

    /* ---------- posta ---------- */
    .mail { background:#f1ece0; }
    .mail__inner { max-width:1080px; margin:0 auto; padding:80px 32px; display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
    .mail__title { font-family:var(--font-serif); font-weight:600; font-size:34px; line-height:1.18; margin:18px 0 20px; letter-spacing:-.01em; }
    .mail__box { display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--cream); padding:18px 22px; margin-bottom:14px; }
    .mail__email { font-family:var(--font-mono); font-size:16px; flex:1; word-break:break-all; color:var(--cream); }
    .mail__email:hover { color:var(--accent-soft); }
    .copy-btn { border:none; background:var(--accent); color:#fff; font-weight:800; font-size:13px; padding:10px 16px; white-space:nowrap; }
    .copy-btn:hover { background:#b08432; }
    .mail__note { font-size:14.5px; line-height:1.6; color:#5c564a; margin:0; }
    .mail__list { display:flex; flex-direction:column; gap:1px; background:#dcd6c8; border:1px solid #dcd6c8; }
    .mail__item { background:var(--paper); padding:20px 24px; }
    .mail__item--warn { background:#f7eecf; border-left:4px solid var(--accent); }
    .mail__item-title { font-family:var(--font-serif); font-size:17px; font-weight:600; margin-bottom:5px; }
    .mail__item-text { font-size:14px; line-height:1.55; color:#5c564a; margin:0; }

    /* ---------- guida 4 passi ---------- */
    .guide__intro { text-align:center; max-width:60ch; margin:0 auto 60px; }
    .guide__title { font-family:var(--font-serif); font-weight:600; font-size:40px; line-height:1.12; margin:18px 0 16px; letter-spacing:-.01em; }
    .guide__text { font-size:17px; line-height:1.65; color:#3a352c; margin:0; }
    .step { display:grid; grid-template-columns:90px 1fr; gap:30px; padding-bottom:48px; border-bottom:1px solid var(--border); margin-bottom:48px; }
    .step:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
    .step__num { font-family:var(--font-serif); font-size:64px; font-weight:600; color:var(--accent); line-height:.9; }
    .step__title { font-family:var(--font-serif); font-size:26px; font-weight:600; margin:0 0 8px; }
    .step__text { font-size:16px; line-height:1.65; color:#3a352c; margin:0 0 26px; }

    .providers { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .provider { border:1px solid var(--ink); padding:26px; background:var(--card); display:flex; flex-direction:column; }
    .provider__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
    .provider__name { font-family:var(--font-serif); font-size:22px; font-weight:700; }
    .provider__url { font-family:var(--font-mono); font-size:12px; color:var(--meta); }
    .provider__tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
    .tag { font-size:11.5px; font-weight:700; padding:4px 10px; }
    .tag--dark { background:var(--ink); color:#fff; }
    .tag--ok { background:#e8f3ec; color:var(--ok); }
    .provider__text { font-size:14.5px; line-height:1.6; color:#5c564a; margin:0 0 20px; }
    .provider__note { font-size:12.5px; line-height:1.55; color:#9a7b00; margin:0 0 20px; font-style:italic; }
    .provider__cta { margin-top:auto; text-align:center; background:var(--ink); color:var(--cream); font-weight:700; font-size:13.5px; padding:13px 18px; display:block; }
    .provider__cta:hover { background:var(--accent); color:#fff; }

    .passi { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .passo { background:var(--paper); border:1px solid var(--border); padding:22px; }
    .passo__label { font-family:var(--font-mono); font-size:12px; color:#b89a00; margin-bottom:10px; }
    .passo__text { font-size:14.5px; line-height:1.6; color:#3a352c; margin:0; }

    .rule-box { background:var(--ink); color:var(--cream); padding:16px 20px; font-size:15px; line-height:1.55; margin:0 0 24px; }
    .rule-box strong { color:var(--accent-soft); }

    /* ---------- canali (card cliccabili) ---------- */
    .channels { display:flex; flex-direction:column; gap:10px; }
    .channel { display:grid; grid-template-columns:200px 1fr 26px; gap:18px; align-items:center; border:1px solid var(--border); background:var(--card); padding:18px 22px; transition:box-shadow .15s, transform .15s, border-color .15s; }
    .channel:hover { box-shadow:0 8px 24px rgba(42,34,24,.12); transform:translateY(-2px); color:inherit; }
    .channel--rec { border:1.5px solid var(--ok); background:#f1f8f3; }
    .channel--rec:hover { box-shadow:0 8px 24px rgba(30,122,82,.18); }
    .channel--wa:hover { border-color:#25d366; }
    .channel--tg:hover { border-color:#26a5e4; }
    .channel--mail:hover { border-color:var(--accent); }
    .channel__id { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
    .channel__brand { display:flex; align-items:center; gap:12px; }
    .channel__logo { width:42px; height:42px; flex:none; }
    .channel__icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:19px; flex:none; }
    .channel__logo--signal { border-radius:11px; box-shadow:0 3px 10px rgba(58,118,240,.3); }
    .channel__icon--mail { background:none; border:1.5px solid var(--ink); box-shadow:none; }
    .channel__icon--mail svg { stroke:var(--ink); }
    .channel__name { font-family:var(--font-serif); font-size:20px; font-weight:700; }
    .badge { font-size:10.5px; font-weight:800; letter-spacing:.1em; padding:5px 12px; border-radius:100px; }
    .badge--ok { background:var(--ok); color:#fff; }
    .badge--mid { background:#f0e3c6; color:var(--warn); }
    .badge--low { background:#f3d9d7; color:var(--danger); }
    .handle { font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:#5c564a; background:var(--paper); border:1px solid var(--border); padding:4px 10px; border-radius:6px; white-space:nowrap; }
    .handle--ok { color:var(--ok); background:#fff; border-color:#bfdcc9; }
    .channel__body { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
    .channel__text { font-size:14px; line-height:1.55; color:#3a352c; margin:0; }
    .channel__arrow { font-size:18px; color:var(--meta); font-weight:700; }
    .channel--rec .channel__arrow { color:var(--ok); }

    /* ---------- promessa ---------- */
    .promise { background:var(--accent-soft); color:var(--ink); }
    .promise__inner { max-width:980px; margin:0 auto; padding:90px 32px; text-align:center; }
    .promise__kicker { font-size:12px; font-weight:800; letter-spacing:.25em; margin-bottom:22px; }
    .promise__title { font-family:var(--font-serif); font-weight:600; font-size:44px; line-height:1.16; margin:0 0 22px; letter-spacing:-.01em; }
    .promise__text { font-size:19px; line-height:1.6; margin:0 auto 40px; max-width:60ch; }
    .promise__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:stretch; }

    /* =========================================================
       RESPONSIVE — tablet
       ========================================================= */
    @media (max-width:900px){
      .hero__title { font-size:44px; }
      .principle, .juris__grid, .mail__inner { grid-template-columns:1fr; gap:30px; }
      .juris__cards { grid-template-columns:1fr; }
      .infra__grid { grid-template-columns:1fr; }
      .providers, .passi { grid-template-columns:1fr; }
      .channel { grid-template-columns:180px 1fr; }
      .channel__arrow { display:none; }
    }

    /* =========================================================
       RESPONSIVE — mobile
       ========================================================= */
    @media (max-width:600px){
      .section { padding:56px 18px; }
      .hero__inner, .juris__inner, .promise__inner { padding:64px 18px; }
      .mail__inner { padding:56px 18px; }
      .hero__badge { font-size:10.5px; letter-spacing:.12em; padding:6px 12px; margin-bottom:26px; }
      .hero__title { font-size:33px; line-height:1.1; margin-bottom:22px; }
      .hero__lead { font-size:18.5px; }
      .hero__text { font-size:15.5px; margin-bottom:30px; }
      .hero__cta .btn { width:100%; }
      .principle__title { font-size:27px; }
      .juris__title, .infra__title { font-size:28px; }
      .statcard { padding:24px; }
      .statcard__grid { grid-template-columns:1fr 1fr; }
      .stat-big { font-size:42px; }
      .infra-card { padding:24px 20px; }
      .mail__title { font-size:27px; }
      .mail__box { flex-direction:column; align-items:stretch; gap:12px; padding:16px 18px; }
      .mail__email { font-size:14px; text-align:center; }
      .copy-btn { padding:13px 16px; }
      .guide__title { font-size:29px; }
      .guide__intro { margin-bottom:44px; }
      .step { grid-template-columns:1fr; gap:10px; padding-bottom:36px; margin-bottom:36px; }
      .step__num { font-size:44px; }
      .provider { padding:20px; }
      .rule-box { font-size:14px; }
      /* card canale: impilate, logo+nome+badge in colonna */
      .channel { grid-template-columns:1fr; gap:14px; padding:18px; }
      .channel__id { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px; }
      .channel__brand { gap:10px; }
      .channel__logo, .channel__icon { width:38px; height:38px; }
      .channel__name { font-size:18px; }
      .handle { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
      .promise__title { font-size:29px; }
      .promise__text { font-size:16.5px; }
      .promise__cta { flex-direction:column; }
      .promise__cta .btn { width:100%; }
    }