:root{
  --nero:#000000;
  --carbon:#0D0D0D;
  --crimson:#E61E32;
  --crimson-dark:#B8172A;
  --bianco:#FFFFFF;
  --steel:#B3B3B3;
  --steel-dark:#6B6B6B;
  --steel-light:#EDEDED;
  --display:'Archivo',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--body);color:var(--nero);background:var(--bianco);line-height:1.6;font-size:16px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--crimson);display:inline-block}
.btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.02em;padding:15px 30px;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-red{background:var(--crimson);color:var(--bianco)}
.btn-red:hover{background:var(--crimson-dark)}
.btn-ghost-w{border-color:var(--bianco);color:var(--bianco)}
.btn-ghost-w:hover{background:var(--bianco);color:var(--nero)}
.btn-ghost-b{border-color:var(--nero);color:var(--nero)}
.btn-ghost-b:hover{background:var(--nero);color:var(--bianco)}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}

/* HEADER */
header{position:sticky;top:0;z-index:50;background:var(--nero);color:var(--bianco);border-bottom:1px solid #1c1c1c}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center}
.logo-svg{height:30px;width:auto;display:block}
.flogo-svg{height:110px;width:auto;display:block;margin-bottom:22px}
.menu{display:flex;gap:34px;font-size:.92rem;font-weight:500}
.menu a{color:var(--steel);transition:color .2s}
.menu a:hover{color:var(--bianco)}
.nav .btn{padding:10px 20px;font-size:.85rem}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* HERO */
.hero{background:var(--nero);color:var(--bianco);padding:96px 0 88px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border:1px solid #1e1e1e;border-radius:50%;pointer-events:none}
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:320px;height:320px;border:1px solid #262626;border-radius:50%;pointer-events:none}
.hero .eyebrow{color:var(--steel)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:900;margin:22px 0 20px;max-width:820px}
.hero h1 em{font-style:normal;color:var(--crimson)}
.hero p.lead{max-width:620px;color:var(--steel);font-size:1.12rem;margin-bottom:40px}
.domain-box{display:flex;max-width:640px;background:var(--bianco);padding:6px;gap:6px}
.domain-box input{flex:1;border:0;padding:14px 18px;font-family:var(--mono);font-size:1rem;color:var(--nero);min-width:0}
.domain-box input:focus{outline:none}
.trust{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--steel)}
.trust b{color:var(--bianco);font-weight:500}
.trust li{list-style:none;display:flex;gap:8px;align-items:center}
.trust li::before{content:"■";color:var(--crimson);font-size:.6rem}

/* PALETTE PANELS — firma del progetto */
.panels{display:grid;grid-template-columns:repeat(4,1fr);min-height:560px}
.panel{position:relative;padding:48px 32px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .25s}
.panel:hover{filter:brightness(1.06)}
.panel .vtitle-sm{font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.15}
.panel .vtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:900;font-size:clamp(2rem,3.4vw,3.1rem);letter-spacing:-.01em;align-self:flex-start}
.panel .meta{font-family:var(--mono);font-size:.78rem;line-height:1.7}
.panel .meta .k{opacity:.55;display:inline-block;width:52px}
.panel .meta p{font-family:var(--body);font-size:.9rem;margin-top:14px;max-width:220px;line-height:1.5}
.panel .go{margin-top:22px;font-family:var(--display);font-weight:800;font-size:.85rem;display:inline-flex;gap:8px;align-items:center}
.panel .go::after{content:"→";transition:transform .2s}
.panel:hover .go::after,.panel .go:hover::after{transform:translateX(5px)}
.p-black{background:var(--nero);color:var(--bianco)}
.p-black{background-image:radial-gradient(ellipse at 30% 110%,#171717 0%,var(--nero) 60%)}
.p-red{background:var(--crimson);color:var(--bianco);background-image:linear-gradient(160deg,#ef3547 0%,var(--crimson) 55%,#c91a2c 100%)}
.p-white{background:var(--bianco);color:var(--nero);border-top:1px solid var(--steel-light)}
.p-grey{background:var(--steel);color:var(--nero);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px),linear-gradient(180deg,#bdbdbd,#a8a8a8)}

/* WHY */
.section{padding:96px 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:900;margin-top:18px}
.sec-head p{color:var(--steel-dark);margin-top:14px;font-size:1.05rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--steel-light)}
.card{background:var(--bianco);padding:34px 26px}
.card h3{font-size:1.05rem;font-weight:800;margin:16px 0 10px}
.card p{font-size:.92rem;color:var(--steel-dark)}
.card .num{font-family:var(--mono);font-size:.75rem;color:var(--crimson);letter-spacing:.15em}

/* PRICING */
.dark{background:var(--nero);color:var(--bianco)}
.dark .sec-head p{color:var(--steel)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{border:1px solid #262626;padding:38px 30px;display:flex;flex-direction:column;background:var(--carbon)}
.plan.hot{border-color:var(--crimson);position:relative}
.plan.hot::before{content:"PIÙ SCELTO";position:absolute;top:-13px;left:30px;background:var(--crimson);color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;padding:5px 12px}
.plan h3{font-size:1.25rem;font-weight:800}
.plan .price{font-family:var(--display);font-weight:900;font-size:2.8rem;margin:18px 0 4px}
.plan .price small{font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--steel)}
.plan ul{list-style:none;margin:24px 0 30px;flex:1}
.plan li{padding:9px 0;border-bottom:1px solid #1d1d1d;font-size:.92rem;color:#d8d8d8;display:flex;gap:10px}
.plan li::before{content:"✓";color:var(--crimson);font-weight:700}
.plan .btn{text-align:center}

/* MIGRATION BAND */
.band{background:var(--crimson);color:var(--bianco);padding:72px 0}
.band .inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:900;max-width:640px}
.band p{margin-top:12px;max-width:560px;opacity:.92}
.band .btn{background:var(--bianco);color:var(--crimson)}
.band .btn:hover{background:var(--nero);color:var(--bianco)}

/* NUMBERS */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--steel-light)}
.numbers div{background:var(--bianco);padding:44px 28px}
.numbers .val{font-family:var(--display);font-weight:900;font-size:2.6rem;letter-spacing:-.03em}
.numbers .val span{color:var(--crimson)}
.numbers .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);margin-top:8px}

/* WORKSPACE */
.workspace{background:var(--steel-light)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.split ul{list-style:none;margin-top:24px}
.split li{padding:12px 0;border-bottom:1px solid var(--steel);display:flex;gap:12px;font-size:.98rem}
.split li::before{content:"■";color:var(--crimson);font-size:.6rem;margin-top:8px}
.gp-badge{background:var(--bianco);padding:44px;text-align:center;border:1px solid var(--steel)}
.gp-badge .big{font-family:var(--display);font-weight:900;font-size:1.6rem;margin-bottom:8px}
.gp-badge .mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--steel-dark)}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--steel-light)}
summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::after{content:"+";font-size:1.5rem;color:var(--crimson);font-weight:400}
details[open] summary::after{content:"–"}
details p{padding:0 0 22px;color:var(--steel-dark);max-width:680px}

/* FINAL CTA */
.final{background:var(--nero);color:var(--bianco);padding:110px 0;text-align:center}
.final h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;max-width:760px;margin:18px auto 20px}
.final h2 em{font-style:normal;color:var(--crimson)}
.final p{color:var(--steel);max-width:540px;margin:0 auto 40px}
.final .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{background:var(--carbon);color:var(--steel);padding:72px 0 36px;font-size:.9rem;border-top:1px solid #1c1c1c}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
.fgrid h4{color:var(--bianco);font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.fgrid a{display:block;padding:5px 0;transition:color .2s}
.fgrid a:hover{color:var(--bianco)}
.fbottom{border-top:1px solid #1c1c1c;padding-top:28px;font-size:.78rem;font-family:var(--mono);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}

@media(max-width:960px){
  .menu,.nav .btn{display:none}
  .burger{display:block}
  .panels{grid-template-columns:repeat(2,1fr);min-height:0}
  .panel{min-height:340px}
  .grid4,.numbers{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .panels,.grid4,.numbers,.fgrid{grid-template-columns:1fr}
  .domain-box{flex-direction:column}
  .domain-box .btn{width:100%}
}

/* ---- page template additions ---- */
.page-hero{background:var(--nero);color:var(--bianco);padding:88px 0 72px}
.page-hero .eyebrow{color:var(--steel)}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:900;margin:20px 0 18px;max-width:820px}
.page-hero h1 em{font-style:normal;color:var(--crimson)}
.page-hero p{max-width:640px;color:var(--steel);font-size:1.08rem}
.breadcrumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--steel);margin-bottom:26px}
.breadcrumb a:hover{color:var(--bianco)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--steel-light)}
.steps>div{background:var(--bianco);padding:34px 28px}
.steps .n{font-family:var(--mono);color:var(--crimson);font-size:.78rem;letter-spacing:.16em}
.steps h3{font-size:1.05rem;font-weight:800;margin:14px 0 10px}
.steps p{font-size:.92rem;color:var(--steel-dark)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-card{border:1px solid var(--steel-light);padding:36px}
.contact-card h3{font-weight:800;margin-bottom:14px}
.contact-card p{color:var(--steel-dark);font-size:.95rem;padding:6px 0}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team .member{border:1px solid var(--steel-light);padding:30px 24px}
.team h3{font-size:1.02rem;font-weight:800}
.team .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--crimson);margin-top:6px;text-transform:uppercase}
.plan-light{border:1px solid var(--steel-light);background:var(--bianco);color:var(--nero)}
.plan-light li{border-color:var(--steel-light);color:var(--steel-dark)}
@media(max-width:960px){.steps{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.team{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team{grid-template-columns:1fr}}

/* ---- dropdown navigation ---- */
.menu{align-items:center}
.has-sub{position:relative}
.has-sub>a .car{font-size:.7em;color:var(--crimson);margin-left:2px}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--nero);border:1px solid #262626;border-top:2px solid var(--crimson);min-width:230px;padding:10px 0;display:none;z-index:60}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}
.submenu a{display:block;padding:10px 20px;color:var(--steel);font-size:.88rem;white-space:nowrap}
.submenu a:hover{color:var(--bianco);background:#141414}
@media(max-width:960px){
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--nero);border-bottom:1px solid #262626;padding:14px 24px 22px;gap:4px;align-items:stretch;z-index:60}
  .menu.open>a,.menu.open .has-sub>a{padding:12px 0;border-bottom:1px solid #1a1a1a;color:var(--bianco)}
  .menu.open .submenu{position:static;transform:none;display:block;border:0;min-width:0;padding:0 0 6px 14px;background:transparent}
  .menu.open .submenu a{padding:8px 0}
  header{position:sticky}
}

/* ---- contact form ---- */
.cform label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);margin:16px 0 6px}
.cform input,.cform select,.cform textarea{width:100%;box-sizing:border-box;border:1px solid var(--steel);background:var(--bianco);padding:12px 14px;font-family:var(--body);font-size:.95rem;color:var(--nero)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--crimson)}
.cform textarea{min-height:120px;resize:vertical}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cform .privacy{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:.82rem;color:var(--steel-dark)}
.cform .privacy input{width:auto;margin-top:3px}
.cform .btn{width:100%;text-align:center;margin-top:4px}
.cform .hp{position:absolute;left:-9999px;opacity:0}
@media(max-width:560px){.cform .row{grid-template-columns:1fr}}

/* ---- footer brand stack (Fueled by / Managed by / Hosted on) ---- */
.fgrid{grid-template-columns:1.3fr 1fr 1fr 1fr auto}
.fstack{border-left:1px solid #333;padding-left:30px;display:flex;flex-direction:column;gap:28px;justify-content:center}
.fstack a{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.fstack .flabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.fstack img{height:54px;width:54px;display:block;opacity:.85;transition:opacity .2s}
.fstack a:hover img{opacity:1}
.fstack a:hover .flabel{color:var(--bianco)}
@media(max-width:960px){.fgrid{grid-template-columns:1fr 1fr}.fstack{border-left:0;padding-left:0;grid-column:1/-1;flex-direction:row;gap:28px;justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:560px){.fstack{flex-direction:column;align-items:flex-start;gap:20px}.fstack a{justify-content:flex-start}}