:root{
    --bg:#08111f;
    --bg-soft:#0d1830;
    --panel:rgba(14, 25, 49, 0.72);
    --panel-strong:#111f3d;
    --text:#e9f1ff;
    --muted:#9fb3d9;
    --line:rgba(155, 184, 255, 0.12);
    --accent:#77a7ff;
    --accent-strong:#9b7bff;
    --success:#9af2c9;
    --danger:#ff6b6b;
    --shadow:0 30px 80px rgba(0,0,0,.35);
    --radius:24px;
    --radius-lg:34px;
    --container:min(1180px, calc(100% - 40px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:"Inter", system-ui, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(89, 123, 255, .18), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(155, 123, 255, .16), transparent 28%),
        linear-gradient(180deg, #08111f 0%, #091626 48%, #0a1322 100%);
    color:var(--text);
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{
    background:rgba(255,255,255,.06);
    padding:.18rem .45rem;
    border-radius:8px;
    font-size:.92em;
}

/* ── Ambient glow ─────────────────────────────── */
.page-shell{position:relative; isolation:isolate;}
.ambient{
    position:fixed;
    width:520px;height:520px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.22;
    z-index:-1;
    pointer-events:none;
    animation:floatGlow 14s ease-in-out infinite;
}
.ambient-1{top:-180px; left:-140px; background:#508cff;}
.ambient-2{top:180px; right:-120px; background:#8f62ff; animation-delay:-7s;}

/* ── Header ───────────────────────────────────── */
.site-header{
    width:var(--container);
    margin:18px auto 0;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    position:sticky;
    top:12px;
    z-index:30;
    backdrop-filter:blur(20px);
    background:rgba(10, 19, 35, .62);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.brand{display:flex; align-items:center; gap:12px; font-weight:700;}
.brand-mark{
    width:42px;height:42px;
    border-radius:14px;
    display:grid;place-items:center;
    background:linear-gradient(135deg, var(--accent), var(--accent-strong));
    color:#fff;
    box-shadow:0 12px 24px rgba(119,167,255,.25);
}
.brand-text{letter-spacing:.01em;}

.main-nav, .header-actions{display:flex; align-items:center; gap:10px;}
.main-nav a{
    color:var(--muted);
    font-size:.95rem;
    padding:10px 12px;
    border-radius:999px;
    transition:.25s ease;
}
.main-nav a:hover{color:var(--text); background:rgba(255,255,255,.05);}

/* ── Buttons ──────────────────────────────────── */
.btn{
    display:inline-flex;
    align-items:center;justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:700;
    font-size:.95rem;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    cursor:pointer;
    text-decoration:none;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
    background:linear-gradient(135deg, var(--accent), var(--accent-strong));
    color:white;
    box-shadow:0 18px 34px rgba(96, 120, 255, .28);
}
.btn-secondary,.btn-ghost{
    background:rgba(255,255,255,.03);
    border-color:var(--line);
    color:var(--text);
}
.btn-full{width:100%}

.burger{
    display:none;
    width:48px;height:48px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
    align-items:center;justify-content:center;
    flex-direction:column;gap:4px;
    cursor:pointer;
}
.burger span{width:18px;height:2px;border-radius:2px;background:var(--text);}

/* ── Hero ─────────────────────────────────────── */
main{padding-bottom:80px}
.hero{
    width:var(--container);
    margin:42px auto 0;
    min-height:calc(100vh - 160px);
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:36px;
    align-items:center;
}

.eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 14px;
    border:1px solid rgba(119,167,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.03);
    color:#b8cbef;
    font-size:.86rem;letter-spacing:.02em;
    margin-bottom:18px;
}

h1, h2, h3{margin:0 0 14px; line-height:1.06}
h1{font-size:clamp(2.6rem, 6vw, 5.1rem); max-width:12ch; letter-spacing:-.045em;}
h2{font-size:clamp(2rem, 4vw, 3.2rem); letter-spacing:-.035em; max-width:14ch;}
h3{font-size:1.28rem; letter-spacing:-.02em;}
p{margin:0; color:var(--muted); line-height:1.72; font-size:1rem;}

.hero-copy p{max-width:58ch;}
.hero-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;margin-top:34px;
}
.stat-card{
    padding:18px;border-radius:22px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line);
    backdrop-filter:blur(16px);
}
.stat-card strong{display:block;font-size:1.3rem;margin-bottom:8px;}
.stat-card span{color:var(--muted);font-size:.92rem;}

/* ── Glass mockup ─────────────────────────────── */
.hero-visual{display:flex; justify-content:center;}
.glass-card{
    width:min(520px, 100%);padding:18px;
    border-radius:34px;
    background:linear-gradient(180deg, rgba(18,33,62,.82), rgba(8,17,31,.82));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}
.window-top{display:flex;gap:8px;padding:4px 4px 14px;}
.window-top span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22);}
.mockup-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px;}
.mockup-panel{
    min-height:160px;border-radius:24px;padding:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    display:flex;flex-direction:column;justify-content:space-between;
}
.mockup-panel:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.1);
    border-color:rgba(119,167,255,.4);
}
.mockup-panel small{display:block;color:#b2c5ed;font-size:.82rem;margin-bottom:10px;}
.mockup-panel strong{font-size:1.08rem;line-height:1.35;font-weight:700;}
.panel-gradient{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 34%),
        linear-gradient(135deg, rgba(119,167,255,.22), rgba(155,123,255,.18));
}
.accent-panel{
    background:
        radial-gradient(circle at 85% 20%, rgba(154,242,201,.12), transparent 28%),
        rgba(255,255,255,.035);
}
.floating{animation:floatCard 9s ease-in-out infinite;}

/* ── Sections ─────────────────────────────────── */
.section{width:var(--container);margin:0 auto;padding:32px 0;}
.section-heading{
    display:flex;justify-content:space-between;align-items:end;
    gap:22px;margin-bottom:26px;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
}
.feature-card,
.split-card,
.price-card,
.contact-wrap,
.footer-banner,
.simple-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}
.feature-card{
    padding:24px;min-height:230px;
    position:relative;overflow:hidden;
}
.feature-card::after{
    content:"";position:absolute;
    inset:auto -30px -30px auto;
    width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle, rgba(119,167,255,.16), transparent 65%);
}
.icon-dot{
    width:12px;height:12px;border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--success));
    margin-bottom:18px;
    box-shadow:0 0 18px rgba(119,167,255,.35);
}

/* ── Split section ────────────────────────────── */
.split-section{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;}
.split-card{padding:28px}
.dark-card{background:linear-gradient(180deg, rgba(20,35,68,.8), rgba(10,19,35,.86));}
.step-list, .check-list{margin:18px 0 0;padding-left:20px;color:var(--muted);line-height:1.8;}

/* ── Pricing ──────────────────────────────────── */
.pricing-section{padding-top:56px}
.pricing-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;}
.price-card{padding:28px;min-height:320px;display:flex;flex-direction:column;}
.price-card small{color:#bcd0f4;font-weight:700;letter-spacing:.12em;margin-bottom:18px;}
.price{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;margin-bottom:16px;}
.price-card ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.9;}
.price-card.featured{
    border-color:rgba(119,167,255,.28);
    transform:translateY(-8px);
    background:
        radial-gradient(circle at top right, rgba(119,167,255,.12), transparent 30%),
        var(--panel);
}

/* ── Contact form ─────────────────────────────── */
.contact-section{padding-top:54px}
.contact-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:26px;padding:28px;}
.contact-copy p{max-width:54ch}
.mini-note{
    margin-top:18px;padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line);
    color:#c6d7f2;
}
.quote-form{padding:4px;}
.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px;}
.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:.92rem;color:#dce8ff;}
.form-grid label.full{grid-column:1 / -1;}
.form-grid input,
.form-grid select,
.form-grid textarea{
    width:100%;border:none;outline:none;
    border-radius:18px;padding:15px 16px;
    color:var(--text);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    font:inherit;resize:vertical;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder{color:#8ca4cd}
.form-feedback{min-height:24px;margin-top:14px;color:#dfeaff;font-size:.95rem;}

/* ── Footer banner ────────────────────────────── */
.compact-section{padding-top:52px}
.footer-banner{padding:34px;text-align:center;}
.footer-banner h2{max-width:none}

/* ── Subpages ─────────────────────────────────── */
.subpage-body{min-height:100vh}
.subpage-wrap{
    width:var(--container);margin:36px auto;padding:28px;
    background:rgba(8,17,31,.4);
    border:1px solid var(--line);border-radius:30px;
}
.simple-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;}
.simple-card{padding:22px}

/* ── Area M ───────────────────────────────────── */
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}
.admin-nav a{
    padding:10px 14px;border-radius:999px;
    background:rgba(148,163,184,.12);
    text-decoration:none;color:#fff;
    transition:.2s ease;
}
.admin-nav a:hover{background:rgba(148,163,184,.22);}
.card-box{
    padding:20px;border-radius:22px;
    background:rgba(15,23,42,.72);
    border:1px solid rgba(255,255,255,.08);
    margin-top:20px;
}
.table-wrap{
    overflow:auto;border:1px solid rgba(255,255,255,.1);
    border-radius:18px;background:rgba(15,23,42,.7);margin-top:18px;
}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}

label span{display:block;margin-bottom:6px;font-size:13px;opacity:.85}
.muted{opacity:.8}
.link-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* ── Login ────────────────────────────────────── */
.login-box{
    max-width:400px;margin:80px auto;padding:32px;
    border-radius:28px;
    background:var(--panel);border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.login-box h1{font-size:1.6rem;text-align:center;max-width:none;}
.login-box label{display:block;margin-top:14px;font-weight:600;}
.login-box input{
    width:100%;padding:14px;margin-top:8px;
    border-radius:14px;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);color:#fff;
    font:inherit;box-sizing:border-box;
}
.login-box button{
    margin-top:20px;width:100%;padding:14px;
    border:0;border-radius:999px;
    background:linear-gradient(135deg, var(--accent), var(--accent-strong));
    color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
}
.login-error{
    margin-top:14px;padding:12px;border-radius:14px;
    background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.25);
    color:#ff9b9b;text-align:center;
}
.login-ok{
    margin-top:14px;padding:12px;border-radius:14px;
    background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25);
    color:#6ee7b7;text-align:center;
}

/* ── Animations ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:none;}

/* Staggered delays per card in griglia */
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}
.reveal.delay-4{transition-delay:.4s}

/* Fade-in da sinistra / destra per split-section */
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none;}

/* Scale-in per immagini e glass-card */
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.reveal-scale.visible{opacity:1;transform:none;}

/* ── Hover effects su card e pannelli ────────── */
.feature-card,
.simple-card,
.price-card,
.split-card{
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.feature-card:hover,
.simple-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 60px rgba(119,167,255,.15);
    border-color:rgba(119,167,255,.25);
}
.price-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 70px rgba(119,167,255,.18);
    border-color:rgba(119,167,255,.3);
}

/* Hover zoom su immagini dentro le card */
.feature-card img,
.simple-card img,
.glass-card img{
    transition:transform .45s cubic-bezier(.22,1,.36,1);
    border-radius:16px;
}
.feature-card:hover img,
.simple-card:hover img,
.glass-card:hover img{
    transform:scale(1.05);
}

/* Hover glow sull'icona dot */
.icon-dot{
    transition:transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover .icon-dot{
    transform:scale(1.3);
    box-shadow:0 0 28px rgba(119,167,255,.55);
}

/* Hover sui mockup panel (hero) */
.mockup-panel{
    transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mockup-panel:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.1);
    border-color:rgba(119,167,255,.4);
    box-shadow:0 18px 40px rgba(119,167,255,.12);
}

/* Hover su stat-card */
.stat-card{
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.stat-card:hover{
    transform:translateY(-4px);
    border-color:rgba(119,167,255,.2);
    box-shadow:0 16px 36px rgba(119,167,255,.1);
}

/* ── Site images (from admin) ─────────────────── */
.site-images{margin:18px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.site-images-hero{grid-template-columns:1fr;}
.site-images-hero .site-img-wrap img{max-height:420px;width:100%;object-fit:cover;}
.site-img-wrap{overflow:hidden;border-radius:18px;position:relative;}
.site-img-wrap img{width:100%;display:block;border-radius:18px;transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;}
.img-caption{display:block;padding:10px 14px;font-size:.85rem;color:var(--muted);text-align:center;}

/* Image hover effects */
.img-hover-zoom:hover img{transform:scale(1.06);}
.img-hover-lift:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(119,167,255,.18);}
.img-hover-lift:hover img{transform:none;}
.img-hover-glow:hover img{box-shadow:0 0 40px rgba(119,167,255,.3);}
.img-hover-tilt:hover img{transform:perspective(800px) rotateY(4deg) scale(1.02);}

@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatGlow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-20px,0)}}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1100px){
    .main-nav, .header-actions{display:none}
    .burger{display:flex}
    .hero,
    .cards-grid,
    .split-section,
    .pricing-grid,
    .contact-wrap{grid-template-columns:1fr;}
    .hero{min-height:auto; padding-top:28px}
    h1{max-width:none}
    .hero-stats{grid-template-columns:1fr}
    .price-card.featured{transform:none}
}
@media (max-width: 720px){
    .site-header{width:min(100% - 18px, calc(100% - 18px));margin-top:10px;padding:12px;}
    .brand-text{display:none}
    .hero,.section,.subpage-wrap{width:min(100% - 18px, calc(100% - 18px));}
    .hero{gap:24px; margin-top:24px}
    .section-heading{align-items:start; flex-direction:column}
    .form-grid,.simple-grid{grid-template-columns:1fr;}
    .glass-card,.feature-card,.split-card,.price-card,
    .contact-wrap,.footer-banner,.subpage-wrap{border-radius:22px;}
    .btn{min-height:46px; width:100%}
    .hero-actions{display:grid; grid-template-columns:1fr}
}
.form-grid select option{color:#1a1a2e;background:#fff;}