@font-face{
  font-family:"Roboto Flex";
  src:url("../fonts/roboto-flex.woff2") format("woff2");
  font-weight:100 1000;
  font-stretch:25% 151%;
  font-display:optional;
}
:root{
--s-cookie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 51.3.1 52.6.5 53.9 1.1 55 2 56.2 3 57.3 4.1 58.3 5.2 59.3 6.4 60.2 7.5 61.1 8.5 62 9.4 63 10.1 63.9 10.6 65 11 66.1 11.1 67.3 11.1 68.6 11 70 10.8 71.4 10.5 72.9 10.3 74.5 10.1 76 10 77.5 10 78.9 10.2 80.3 10.6 81.4 11.2 82.5 12 83.3 13 84 14.2 84.5 15.5 84.8 16.9 85 18.5 85.1 20 85.2 21.5 85.1 23 85.2 24.5 85.2 25.8 85.4 27 85.7 28.1 86.2 29.1 86.8 30 87.6 30.8 88.6 31.6 89.7 32.3 90.9 33.1 92.2 33.8 93.6 34.6 94.8 35.4 96.1 36.4 97.1 37.4 98 38.5 98.7 39.7 99.2 40.9 99.3 42.2 99.3 43.5 98.9 44.9 98.4 46.2 97.7 47.5 96.8 48.8 95.9 50 94.9 51.2 93.9 52.3 93.1 53.4 92.3 54.5 91.7 55.5 91.3 56.5 91.1 57.6 91 58.7 91.2 59.9 91.5 61.1 91.9 62.4 92.4 63.8 92.9 65.2 93.4 66.7 93.8 68.2 94.1 69.6 94.2 71.1 94.2 72.5 93.8 73.8 93.3 75 92.5 76.1 91.6 77 90.4 77.8 89.1 78.4 87.7 78.9 86.2 79.3 84.6 79.6 83.1 79.8 81.7 80.1 80.4 80.4 79.2 80.7 78.1 81.2 77.1 81.8 76.3 82.5 75.6 83.4 75 84.4 74.5 85.6 74 86.9 73.5 88.3 72.9 89.7 72.4 91.2 71.7 92.5 70.9 93.8 70 95 69 95.9 67.9 96.6 66.7 97.1 65.4 97.4 64 97.4 62.6 97.1 61.2 96.7 59.8 96.1 58.4 95.4 57.1 94.7 55.8 93.9 54.5 93.2 53.4 92.6 52.2 92.1 51.1 91.8 50 91.7 48.9 91.8 47.8 92.1 46.7 92.6 45.5 93.2 44.2 93.9 42.9 94.7 41.6 95.4 40.2 96.1 38.8 96.7 37.4 97.1 36 97.4 34.6 97.4 33.3 97.1 32.1 96.6 31 95.9 30 95 29.1 93.8 28.3 92.5 27.7 91.2 27.1 89.7 26.5 88.3 26 86.9 25.5 85.6 25 84.4 24.4 83.4 23.7 82.5 22.9 81.8 21.9 81.2 20.9 80.7 19.6 80.4 18.3 80.1 16.9 79.8 15.4 79.6 13.9 79.3 12.3 78.9 10.9 78.4 9.6 77.8 8.4 77 7.5 76.1 6.7 75 6.2 73.8 5.8 72.5 5.8 71.1 5.9 69.6 6.2 68.2 6.6 66.7 7.1 65.2 7.6 63.8 8.1 62.4 8.5 61.1 8.8 59.9 9 58.7 8.9 57.6 8.7 56.5 8.3 55.5 7.7 54.5 6.9 53.4 6.1 52.3 5.1 51.2 4.1 50 3.2 48.8 2.3 47.5 1.6 46.2 1.1 44.9.7 43.5.7 42.2.9 40.9 1.3 39.7 2 38.5 2.9 37.4 4 36.4 5.2 35.4 6.5 34.6 7.8 33.8 9.1 33.1 10.3 32.3 11.4 31.6 12.4 30.8 13.2 30 13.9 29.1 14.3 28.1 14.6 27 14.8 25.8 14.9 24.5 14.9 23 14.9 21.5 14.9 20 15 18.5 15.2 16.9 15.5 15.5 16 14.2 16.7 13 17.5 12 18.6 11.2 19.8 10.6 21.1 10.2 22.5 10 24 10 25.5 10.1 27.1 10.3 28.6 10.5 30 10.8 31.4 11 32.7 11.1 33.9 11.1 35 11 36.1 10.6 37 10.1 38 9.4 38.9 8.5 39.8 7.5 40.7 6.4 41.7 5.2 42.7 4.1 43.8 3 45 2 46.2 1.1 47.4.5 48.7.1Z' fill='black'/%3E%3C/svg%3E");
--s-clover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 51.3 0 52.6.2 53.9.5 55.2.9 56.4 1.3 57.6 1.9 58.8 2.6 59.9 3.3 61 4.2 62.1 5 63 6 64 7 64.9 8 65.7 9.1 66.5 10.2 67.2 11.3 67.9 12.4 68.6 13.5 69.2 14.6 69.8 15.7 70.4 16.7 71 17.7 71.5 18.7 72.1 19.6 72.6 20.5 73.2 21.4 73.7 22.2 74.3 23 75 23.7 75.6 24.4 76.3 25 77 25.7 77.8 26.3 78.6 26.8 79.5 27.4 80.4 27.9 81.3 28.5 82.3 29 83.3 29.6 84.3 30.2 85.4 30.8 86.5 31.4 87.6 32.1 88.7 32.8 89.8 33.5 90.9 34.3 92 35.1 93 36 94 37 95 38 95.9 39 96.7 40.1 97.4 41.2 98.1 42.4 98.7 43.6 99.1 44.8 99.5 46.1 99.8 47.4 99.9 48.7 100 50 99.9 51.3 99.8 52.6 99.5 53.9 99.1 55.2 98.7 56.4 98.1 57.6 97.4 58.8 96.7 59.9 95.9 61 95 62 94 63 93 64 92 64.9 90.9 65.7 89.8 66.5 88.7 67.2 87.6 67.9 86.5 68.6 85.4 69.2 84.3 69.8 83.3 70.4 82.3 71 81.3 71.5 80.4 72.1 79.5 72.6 78.6 73.2 77.8 73.7 77 74.3 76.3 75 75.6 75.6 75 76.3 74.3 77 73.7 77.8 73.2 78.6 72.6 79.5 72.1 80.4 71.5 81.3 71 82.3 70.4 83.3 69.8 84.3 69.2 85.4 68.6 86.5 67.9 87.6 67.2 88.7 66.5 89.8 65.7 90.9 64.9 92 64 93 63 94 62.1 95 61 95.8 59.9 96.7 58.8 97.4 57.6 98.1 56.4 98.7 55.2 99.1 53.9 99.5 52.6 99.8 51.3 99.9 50 100 48.7 99.9 47.4 99.8 46.1 99.5 44.8 99.1 43.6 98.7 42.4 98.1 41.2 97.4 40.1 96.7 39 95.8 38 95 37 94 36 93 35.1 92 34.3 90.9 33.5 89.8 32.8 88.7 32.1 87.6 31.4 86.5 30.8 85.4 30.2 84.3 29.6 83.3 29 82.3 28.5 81.3 27.9 80.4 27.4 79.5 26.8 78.6 26.3 77.8 25.7 77 25 76.3 24.4 75.6 23.7 75 23 74.3 22.2 73.7 21.4 73.2 20.5 72.6 19.6 72.1 18.7 71.5 17.7 71 16.7 70.4 15.7 69.8 14.6 69.2 13.5 68.6 12.4 67.9 11.3 67.2 10.2 66.5 9.1 65.7 8 64.9 7 64 6 63 5 62 4.2 61 3.3 59.9 2.6 58.8 1.9 57.6 1.3 56.4.9 55.2.5 53.9.2 52.6 0 51.3 0 50 0 48.7.2 47.4.5 46.1.9 44.8 1.3 43.6 1.9 42.4 2.6 41.2 3.3 40.1 4.2 39 5 38 6 37 7 36 8 35.1 9.1 34.3 10.2 33.5 11.3 32.8 12.4 32.1 13.5 31.4 14.6 30.8 15.7 30.2 16.7 29.6 17.7 29 18.7 28.5 19.6 27.9 20.5 27.4 21.4 26.8 22.2 26.3 23 25.7 23.7 25 24.4 24.4 25 23.7 25.7 23 26.3 22.2 26.8 21.4 27.4 20.5 27.9 19.6 28.5 18.7 29 17.7 29.6 16.7 30.2 15.7 30.8 14.6 31.4 13.5 32.1 12.4 32.8 11.3 33.5 10.2 34.3 9.1 35.1 8 36 7 37 6 38 5 39 4.2 40.1 3.3 41.2 2.6 42.4 1.9 43.6 1.3 44.8.9 46.1.5 47.4.2 48.7 0Z' fill='black'/%3E%3C/svg%3E");
--s-sunny:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 51.3.2 52.6.7 53.8 1.5 55 2.5 56.1 3.7 57.2 4.8 58.2 5.9 59.2 6.9 60.2 7.6 61.3 8 62.4 8.2 63.6 8.1 65 7.8 66.4 7.3 67.9 6.8 69.4 6.4 70.9 6.1 72.4 6 73.8 6.2 75 6.7 76 7.5 76.9 8.6 77.6 9.9 78.1 11.4 78.5 12.9 78.8 14.5 79.1 15.9 79.5 17.2 80 18.4 80.7 19.3 81.6 20 82.8 20.5 84.1 20.9 85.5 21.2 87.1 21.6 88.6 21.9 90.1 22.4 91.4 23.1 92.5 24 93.3 25 93.8 26.2 94 27.6 93.9 29 93.6 30.6 93.2 32.1 92.7 33.6 92.2 35 91.9 36.4 91.8 37.6 92 38.8 92.4 39.8 93.1 40.8 94.1 41.8 95.2 42.9 96.3 43.9 97.5 45 98.5 46.2 99.3 47.4 99.8 48.7 100 50 99.8 51.3 99.3 52.6 98.5 53.8 97.5 55 96.3 56.1 95.2 57.2 94.1 58.2 93.1 59.2 92.4 60.2 92 61.3 91.8 62.4 91.9 63.6 92.2 65 92.7 66.4 93.2 67.9 93.6 69.4 93.9 71 94 72.4 93.8 73.8 93.3 75 92.5 76 91.4 76.9 90.1 77.6 88.6 78.1 87.1 78.5 85.5 78.8 84.1 79.1 82.8 79.5 81.6 80 80.7 80.7 80 81.6 79.5 82.8 79.1 84.1 78.8 85.5 78.5 87.1 78.1 88.6 77.6 90.1 76.9 91.4 76 92.5 75 93.3 73.8 93.8 72.4 94 71 93.9 69.4 93.6 67.9 93.2 66.4 92.7 65 92.2 63.6 91.9 62.4 91.8 61.3 92 60.2 92.4 59.2 93.1 58.2 94.1 57.2 95.2 56.1 96.3 55 97.5 53.8 98.5 52.6 99.3 51.3 99.8 50 100 48.7 99.8 47.4 99.3 46.2 98.5 45 97.5 43.9 96.3 42.9 95.2 41.8 94.1 40.8 93.1 39.8 92.4 38.8 92 37.6 91.8 36.4 91.9 35 92.2 33.6 92.7 32.1 93.2 30.6 93.6 29 93.9 27.6 94 26.2 93.8 25 93.3 24 92.5 23.1 91.4 22.4 90.1 21.9 88.6 21.6 87.1 21.2 85.5 20.9 84.1 20.5 82.8 20 81.6 19.3 80.7 18.4 80 17.2 79.5 15.9 79.1 14.5 78.8 12.9 78.5 11.4 78.1 9.9 77.6 8.6 76.9 7.5 76 6.7 75 6.2 73.8 6 72.4 6.1 71 6.4 69.4 6.8 67.9 7.3 66.4 7.8 65 8.1 63.6 8.2 62.4 8 61.3 7.6 60.2 6.9 59.2 5.9 58.2 4.8 57.2 3.7 56.1 2.5 55 1.5 53.8.7 52.6.2 51.3 0 50 .2 48.7.7 47.4 1.5 46.2 2.5 45 3.7 43.9 4.8 42.9 5.9 41.8 6.9 40.8 7.6 39.8 8 38.8 8.2 37.6 8.1 36.4 7.8 35 7.3 33.6 6.8 32.1 6.4 30.6 6.1 29 6 27.6 6.2 26.2 6.7 25 7.5 24 8.6 23.1 9.9 22.4 11.4 21.9 12.9 21.6 14.5 21.2 15.9 20.9 17.2 20.5 18.4 20 19.3 19.3 20 18.4 20.5 17.2 20.9 15.9 21.2 14.5 21.6 12.9 21.9 11.4 22.4 9.9 23.1 8.6 24 7.5 25 6.7 26.2 6.2 27.6 6 29 6.1 30.6 6.4 32.1 6.8 33.6 7.3 35 7.8 36.4 8.1 37.6 8.2 38.8 8 39.8 7.6 40.8 6.9 41.8 5.9 42.9 4.8 43.9 3.7 45 2.5 46.2 1.5 47.4.7 48.7.2Z' fill='black'/%3E%3C/svg%3E");

--primary:#4f46e5;--primary-hover:#4338ca;--on-primary:#fff;
--primary-container:#e0e7ff;--on-primary-container:#312e81;
--secondary:#06b6d4;--secondary-container:#cffafe;--on-secondary-container:#155e75;
--tertiary:#8b5cf6;--tertiary-container:#ede9fe;--on-tertiary-container:#5b21b6;
--warning:#f59e0b;--warning-container:#fef3c7;--on-warning-container:#92400e;
--surface:#f8fafc;--on-surface:#0f172a;--on-surface-variant:#64748b;
--outline:#cbd5e1;--outline-variant:#e2e8f0;
--sc-lowest:#fff;--sc-low:#f8fafc;--sc:#f1f5f9;--sc-high:#e2e8f0;--sc-highest:#cbd5e1;
--space-xs:6px;--space-sm:12px;--space-md:20px;--space-lg:28px;--space-xl:44px;--space-2xl:72px;
--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-3xl:40px;
--ease:cubic-bezier(.34,1.56,.64,1);
--shadow1:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
--shadow2:0 4px 20px -4px rgba(79,70,229,.18);
--shadow3:0 20px 60px -20px rgba(79,70,229,.25);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--primary:#818cf8;--primary-hover:#a5b4fc;--on-primary:#1e1b4b;
--primary-container:#3730a3;--on-primary-container:#e0e7ff;
--secondary:#22d3ee;--secondary-container:#0e7490;--on-secondary-container:#cffafe;
--tertiary:#a78bfa;--tertiary-container:#6d28d9;--on-tertiary-container:#ede9fe;
--warning:#fbbf24;--warning-container:#78350f;--on-warning-container:#fef3c7;
--surface:#0f172a;--on-surface:#f1f5f9;--on-surface-variant:#94a3b8;
--outline:#475569;--outline-variant:#334155;
--sc-lowest:#1e293b;--sc-low:#1e293b;--sc:#334155;--sc-high:#475569;--sc-highest:#64748b;
}}
:root[data-theme="dark"]{
--primary:#818cf8;--primary-hover:#a5b4fc;--on-primary:#1e1b4b;
--primary-container:#3730a3;--on-primary-container:#e0e7ff;
--secondary:#22d3ee;--secondary-container:#0e7490;--on-secondary-container:#cffafe;
--tertiary:#a78bfa;--tertiary-container:#6d28d9;--on-tertiary-container:#ede9fe;
--warning:#fbbf24;--warning-container:#78350f;--on-warning-container:#fef3c7;
--surface:#0f172a;--on-surface:#f1f5f9;--on-surface-variant:#94a3b8;
--outline:#475569;--outline-variant:#334155;
--sc-lowest:#1e293b;--sc-low:#1e293b;--sc:#334155;--sc-high:#475569;--sc-highest:#64748b;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 1rem/1.5 "Roboto Flex",system-ui,sans-serif;background:var(--surface);color:var(--on-surface);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.btn:focus-visible,.theme-btn:focus-visible,.lang-switch button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ===== gestione lingue ===== */
[data-lang]{display:none}
[data-lang].shown{display:block}
[data-lang].shown.d-inline{display:inline}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--surface) 80%,transparent);border-bottom:1px solid var(--outline-variant)}
.site-header-inner{max-width:1120px;margin:0 auto;padding:var(--space-sm) var(--space-md);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:30px;width:auto;display:block}
.brand-logo-light{display:block}
.brand-logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-logo-light{display:none}
  :root:not([data-theme="light"]) .brand-logo-dark{display:block}
}
:root[data-theme="dark"] .brand-logo-light{display:none}
:root[data-theme="dark"] .brand-logo-dark{display:block}
:root[data-theme="light"] .brand-logo-light{display:block}
:root[data-theme="light"] .brand-logo-dark{display:none}
.header-actions{display:flex;align-items:center;gap:var(--space-sm)}
.lang-switch{display:inline-flex;padding:3px;background:var(--sc-high);border-radius:999px;gap:2px}
.lang-switch button{padding:5px 11px;border:0;border-radius:999px;background:transparent;font:600 .75rem/1 "Roboto Flex",system-ui,sans-serif;color:var(--on-surface-variant);cursor:pointer;transition:all .2s}
.lang-switch button.active{background:var(--sc-lowest);color:var(--on-surface);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.theme-btn{width:36px;height:36px;border:0;border-radius:50%;background:var(--sc-high);color:var(--on-surface-variant);cursor:pointer;display:grid;place-items:center;transition:all .2s}
.theme-btn:hover{background:var(--sc-highest);color:var(--primary)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== bottoni ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:44px;padding:0 22px;font:600 .875rem/1 "Roboto Flex",system-ui,sans-serif;letter-spacing:.01em;background:var(--primary);color:var(--on-primary);border:0;border-radius:999px;cursor:pointer;text-decoration:none;transition:background-color .2s,transform .15s var(--ease);white-space:nowrap}
.btn:hover{background:var(--primary-hover)}
.btn:active{transform:scale(.97)}
.btn.outline{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.btn.outline:hover{background:color-mix(in srgb,var(--primary) 18%,transparent)}
.cta-head{min-height:38px;padding:0 16px;font-size:.8125rem}

/* ===== layout ===== */
main{max-width:1120px;margin:0 auto;padding:0 var(--space-md)}
section{padding:var(--space-2xl) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font:600 .75rem/1 "Roboto Flex",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);margin-bottom:var(--space-md)}
.eyebrow-oncolor{background:color-mix(in srgb,var(--on-primary-container) 15%,transparent);color:var(--on-primary-container)}
h1{font:800 clamp(2rem,5vw,3rem)/1.15 "Roboto Flex",system-ui,sans-serif;font-variation-settings:"wdth" 115,"opsz" 40;letter-spacing:-.022em;margin-bottom:var(--space-md)}
h2{font:700 clamp(1.7rem,3.5vw,2.3rem)/1.15 "Roboto Flex",system-ui,sans-serif;font-variation-settings:"wdth" 112,"opsz" 32;letter-spacing:-.02em;margin-bottom:var(--space-md)}
h3{font:600 1.15rem/1.3 "Roboto Flex",system-ui,sans-serif;margin-bottom:var(--space-sm)}
p.lead{font-size:1.125rem;line-height:1.6;color:var(--on-surface-variant);max-width:620px;margin:0 auto}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* ===== hero ===== */
.hero{position:relative;padding:var(--space-2xl) 0 var(--space-xl);overflow:hidden;text-align:center}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;opacity:.55}
.hero::before{width:420px;height:420px;right:-140px;top:-120px;background:var(--tertiary-container);-webkit-mask-image:var(--s-clover);mask-image:var(--s-clover);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:spin 90s linear infinite}
.hero::after{width:340px;height:340px;left:-160px;bottom:-140px;background:var(--secondary-container);-webkit-mask-image:var(--s-sunny);mask-image:var(--s-sunny);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:spin 110s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero>*{position:relative;z-index:1}
.hero h1 .accent{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;margin-top:var(--space-lg)}
.hero-trust{margin-top:var(--space-lg);display:flex;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;font-size:.8125rem;color:var(--on-surface-variant);font-weight:600}
.hero-trust .item{display:inline-flex;align-items:center;gap:6px}
.hero-trust svg{width:16px;height:16px;color:var(--success,#10b981)}
.hero-trust svg *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== mockup ===== */
.mockup-wrap{margin-top:var(--space-xl);display:grid;grid-template-columns:1fr minmax(0,560px);gap:var(--space-lg);align-items:center;max-width:980px;margin-left:auto;margin-right:auto}
.mockup-wide{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow3);border:1px solid var(--outline-variant);background:var(--sc-lowest)}
.mockup-wide img{width:100%;height:auto;display:block}
.mockup-narrow{justify-self:center;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow3);border:1px solid var(--outline-variant);background:var(--sc-lowest);width:240px;transform:rotate(3deg)}
.mockup-narrow img{width:100%;height:auto;display:block}

/* ===== steps ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.step{position:relative;background:var(--sc-low);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);padding:var(--space-lg) var(--space-md);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.step::before{content:"";position:absolute;top:-20px;right:-20px;width:120px;height:120px;opacity:.25;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.step:nth-child(1)::before{-webkit-mask-image:var(--s-cookie);mask-image:var(--s-cookie);background:var(--primary-container)}
.step:nth-child(2)::before{-webkit-mask-image:var(--s-clover);mask-image:var(--s-clover);background:var(--tertiary-container)}
.step:nth-child(3)::before{-webkit-mask-image:var(--s-sunny);mask-image:var(--s-sunny);background:var(--secondary-container)}
.step-num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:700 1.25rem/1 "Roboto Flex",system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));margin-bottom:var(--space-sm)}
.step h3{font-size:1.1rem;margin-bottom:6px}
.step p{font-size:.9375rem;color:var(--on-surface-variant);line-height:1.5}

/* ===== features ===== */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.feature{background:var(--sc-low);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);padding:var(--space-md);display:flex;gap:var(--space-md);align-items:flex-start}
.feature-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}
.feature-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:1rem;margin-bottom:4px}
.feature p{font-size:.875rem;color:var(--on-surface-variant);line-height:1.5}

/* ===== privacy card ===== */
.privacy-card{background:linear-gradient(135deg,var(--primary-container),var(--secondary-container));color:var(--on-primary-container);border-radius:var(--radius-2xl);padding:var(--space-xl) var(--space-lg);position:relative;overflow:hidden;margin-top:var(--space-lg)}
.privacy-card::before{content:"";position:absolute;width:260px;height:260px;right:-80px;bottom:-80px;background:var(--tertiary-container);opacity:.5;-webkit-mask-image:var(--s-clover);mask-image:var(--s-clover);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:spin 60s linear infinite}
.privacy-card>*{position:relative;z-index:1}
.privacy-card h2{color:var(--on-primary-container)}
.privacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.privacy-item{display:flex;gap:var(--space-sm);align-items:flex-start}
.privacy-ico{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--on-primary-container) 15%,transparent);display:grid;place-items:center;flex:none}
.privacy-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.privacy-item b{display:block;font-weight:600;margin-bottom:2px}
.privacy-item span{font-size:.875rem;opacity:.85;line-height:1.5}

/* ===== install ===== */
.install-card{background:var(--sc-low);border:1px solid var(--outline-variant);border-radius:var(--radius-2xl);padding:var(--space-lg);margin-top:var(--space-lg)}
.install-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.install-col{padding:var(--space-md);background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.install-col h3{display:flex;align-items:center;gap:10px;margin:0}
.install-col ol{padding-left:var(--space-md);display:grid;gap:6px;font-size:.9375rem;color:var(--on-surface-variant);line-height:1.55}
.install-col ol b{color:var(--on-surface);font-weight:600}
.install-note{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:color-mix(in srgb,var(--warning) 10%,var(--sc-lowest));border:1.5px solid color-mix(in srgb,var(--warning) 30%,transparent);border-radius:var(--radius-md);font-size:.875rem;line-height:1.5;color:var(--on-warning-container)}

/* ===== faq ===== */
.faq-list{max-width:760px;margin:var(--space-lg) auto 0;display:grid;gap:10px}
.faq-item{background:var(--sc-low);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);overflow:hidden}
.faq-item[open]{box-shadow:var(--shadow1)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:18px 22px;font:600 1rem/1.3 "Roboto Flex",system-ui,sans-serif;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ttl{flex:1;min-width:0}
.faq-item summary .chev{flex:none;color:var(--on-surface-variant);transition:transform .3s var(--ease)}
.faq-item[open] summary .chev{transform:rotate(180deg)}
.faq-item .body{padding:0 22px 22px;color:var(--on-surface-variant);font-size:.9375rem;line-height:1.6}

/* ===== final cta ===== */
.final-cta{text-align:center;background:linear-gradient(135deg,var(--primary-container) 0%,var(--tertiary-container) 50%,var(--secondary-container) 100%);color:var(--on-primary-container);border-radius:var(--radius-3xl);padding:var(--space-xl) var(--space-lg);position:relative;overflow:hidden;margin-top:var(--space-lg)}
.final-cta::before{content:"";position:absolute;width:200px;height:200px;left:-60px;top:-60px;background:var(--tertiary-container);opacity:.6;-webkit-mask-image:var(--s-cookie);mask-image:var(--s-cookie);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:spin 80s linear infinite reverse}
.final-cta>*{position:relative;z-index:1}
.final-cta h2{color:var(--on-primary-container)}
.final-cta p{opacity:.85;max-width:560px;margin:0 auto var(--space-md)}
.final-cta .btn{background:var(--on-primary-container);color:var(--primary)}

/* ===== footer ===== */
.site-footer{max-width:1120px;margin:0 auto;padding:var(--space-xl) var(--space-md) var(--space-lg);border-top:1px solid var(--outline-variant);font-size:.875rem;color:var(--on-surface-variant)}
.site-footer a{color:var(--on-surface-variant);text-decoration:none}
.site-footer a:hover{color:var(--primary)}
.footer-links{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-xs)}

/* ===== pagina privacy ===== */
.prose{max-width:760px;margin:0 auto;font-size:.9375rem;line-height:1.7;color:var(--on-surface-variant)}
.prose h2{font-size:1.4rem;margin:var(--space-lg) 0 var(--space-sm)}
.prose h3{font-size:1.05rem;margin:var(--space-md) 0 var(--space-xs);color:var(--on-surface)}
.prose p,.prose ul{margin-bottom:var(--space-sm)}
.prose ul{padding-left:var(--space-md);display:grid;gap:4px}
.prose b{color:var(--on-surface)}

/* ===== responsive ===== */
@media (max-width:760px){
  section{padding:var(--space-xl) 0}
  .site-header-inner{padding:var(--space-xs) var(--space-sm)}
  .brand-logo{height:26px}
  .cta-head{display:none}
  .hero{padding-top:var(--space-lg)}
  h1{font-size:clamp(1.75rem,6vw,2.25rem)}
  .mockup-wrap{grid-template-columns:1fr;gap:var(--space-md)}
  .mockup-narrow{width:200px}
  .privacy-card{padding:var(--space-lg) var(--space-md)}
  .final-cta{padding:var(--space-lg) var(--space-md)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}