@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#0b0910;
  --bg-2:#100d16;
  --panel:#15111d;
  --panel-2:#1a1523;
  --ink:#f5f2fa;
  --muted:#aaa3b4;
  --line:#2a2433;
  --purple:#8b5cf6;
  --purple-2:#a78bfa;
  --purple-dark:#6d3fe0;
  --purple-soft:#211735;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}
.container{width:min(1220px,92%);margin:auto}

header{position:sticky;top:0;z-index:50;background:rgba(11,9,16,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:"Space Grotesk";font-size:22px;font-weight:700;letter-spacing:-.07em}
.logo b{color:var(--purple);font-weight:700}
.nav{display:flex;gap:31px;font-size:12px;font-weight:700;color:#b9b2c2}
.nav a{transition:color .2s ease}
.nav a:hover{color:var(--purple-2)}

.hero{min-height:700px;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 28%,rgba(139,92,246,.18),transparent 26%),linear-gradient(135deg,#0b0910 0%,#100c16 58%,#120e19 100%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(139,92,246,.025) 50%,transparent 100%);pointer-events:none}
.hero .container{position:relative;z-index:2}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-2)}
.hero h1{font-family:"Space Grotesk";font-size:clamp(58px,8.7vw,116px);line-height:.86;letter-spacing:-.085em;margin:19px 0 30px;max-width:1030px}
.hero h1 span{color:var(--purple-2)}
.hero p{font-size:17px;color:var(--muted);max-width:690px;margin:0}
.buttons{display:flex;gap:11px;margin-top:31px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;background:var(--purple);color:#fff;border:1px solid var(--purple);border-radius:2px;font-size:12px;font-weight:800;box-shadow:0 12px 35px rgba(139,92,246,.16);transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--purple-dark);border-color:var(--purple-dark);transform:translateY(-2px);box-shadow:0 16px 40px rgba(139,92,246,.23)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#4a4352;box-shadow:none}
.btn.ghost:hover{border-color:var(--purple);color:var(--purple-2);background:rgba(139,92,246,.05)}
.hero-shape{position:absolute;right:-120px;bottom:-170px;width:510px;height:510px;border-radius:50%;border:1px solid rgba(139,92,246,.28);box-shadow:0 0 0 70px rgba(139,92,246,.025),0 0 0 140px rgba(139,92,246,.018);background:radial-gradient(circle at 35% 35%,rgba(139,92,246,.13),transparent 60%)}
.hero-shape:after{content:"";position:absolute;inset:92px;border:1px solid rgba(167,139,250,.18);border-radius:50%}

section{padding:105px 0}
.section-title{display:grid;grid-template-columns:.55fr 1.45fr;gap:40px;border-top:1px solid var(--line);padding-top:17px;margin-bottom:50px}
.section-title h2{font-family:"Space Grotesk";font-size:clamp(38px,5vw,58px);line-height:.95;letter-spacing:-.065em;margin:0;max-width:760px}
.section-title p{grid-column:2;color:var(--muted);max-width:590px;margin:18px 0 0;font-size:14px}
.section-title .eyebrow{grid-row:1 / span 2}

#progetti{background:var(--bg)}
.projects{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.project{background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.project:hover{transform:translateY(-5px);border-color:#59447e;background:#181320}
.project:first-child{grid-row:span 2}
.project-cover{height:315px;position:relative;display:flex;align-items:flex-end;padding:27px;overflow:hidden}
.project:first-child .project-cover{height:470px}
.project-cover:before{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-95px;top:-100px}
.project-cover:after{content:"";position:absolute;width:110px;height:110px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:32px;top:37px}
.project-cover.officina{background:radial-gradient(circle at 75% 35%,rgba(139,92,246,.42),transparent 25%),linear-gradient(135deg,#0d0b11,#17111f 55%,#281a45)}
.project-cover.gym{background:radial-gradient(circle at 78% 30%,rgba(214,142,67,.42),transparent 24%),linear-gradient(135deg,#17110e,#332017 58%,#6f3c1d)}
.project-cover.autoai{background:radial-gradient(circle at 78% 30%,rgba(217,255,82,.34),transparent 24%),radial-gradient(circle at 28% 70%,rgba(139,92,246,.28),transparent 30%),linear-gradient(135deg,#111210,#171522 58%,#2f2450)}
.project-cover.autoai .cover-text{font-size:clamp(27px,3.2vw,46px);letter-spacing:-.06em}
.cover-num{position:absolute;top:20px;left:25px;color:rgba(255,255,255,.58);font-size:10px;font-weight:900;letter-spacing:.16em}
.cover-text{position:relative;z-index:2;color:#fff;font-family:"Space Grotesk";font-size:clamp(32px,4.4vw,62px);font-weight:700;letter-spacing:-.07em}
.project-body{padding:25px}
.project-body h3{font-family:"Space Grotesk";font-size:24px;letter-spacing:-.035em;margin:0 0 7px}
.project-body p{color:var(--muted);margin:0;max-width:620px;font-size:14px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 23px}
.tag{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;background:var(--purple-soft);color:#c7b8ff;border:1px solid #352452;border-radius:1px}

#servizi{background:var(--bg-2)}
#servizi .section-title{margin-bottom:42px}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service{min-height:175px;padding:27px;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s ease,border-color .2s ease}
.service:hover{background:var(--panel-2);border-color:#47345e}
.service b{font-family:"Space Grotesk";font-size:21px;display:block;margin-bottom:11px}
.service span{font-size:13px;color:var(--muted);max-width:300px;display:block}

#metodo{background:#0a080e;color:var(--ink)}
#metodo .method-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
#metodo h2{font-family:"Space Grotesk";font-size:clamp(40px,5vw,60px);line-height:.92;letter-spacing:-.07em;margin:15px 0 22px;max-width:600px}
#metodo p{color:var(--muted);font-size:14px;max-width:520px;margin:0}
.steps{display:grid;gap:0;margin-top:4px}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.number{font-family:"Space Grotesk";font-size:12px;color:var(--purple-2);font-weight:700}
.step b{font-family:"Space Grotesk";font-size:21px;letter-spacing:-.025em}
.step span{color:var(--muted);font-size:13px}

.cta{padding-top:0;background:var(--bg)}
.cta-box{position:relative;overflow:hidden;background:linear-gradient(115deg,#24183d,#4f2a91 65%,#7045cf);color:#fff;padding:55px;display:flex;align-items:end;justify-content:space-between;gap:35px;border:1px solid #6d4aa5}
.cta-box:after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-100px;top:-150px}
.cta-box>div,.cta-box>a{position:relative;z-index:2}
.cta h2{font-family:"Space Grotesk";font-size:clamp(37px,4.6vw,55px);line-height:.94;letter-spacing:-.065em;max-width:780px;margin:0 0 12px}
.cta p{margin:0;color:#ded3f4;font-size:14px}
.cta .btn{background:#fff;color:#4e2bb4;border-color:#fff;box-shadow:none}
.cta .btn:hover{background:#e8e0fa;border-color:#e8e0fa}

footer{border-top:1px solid var(--line);padding:27px 0;font-size:11px;color:#777080;background:var(--bg)}
.footer-in{display:flex;justify-content:space-between}

@media(max-width:850px){
  .nav{display:none}
  .hero{min-height:650px}
  .hero h1{font-size:64px}
  .section-title{grid-template-columns:1fr;gap:15px}
  .section-title .eyebrow{grid-row:auto}
  .section-title p{grid-column:auto;margin:0}
  .projects{grid-template-columns:1fr}
  .project:first-child{grid-row:auto}
  .project:first-child .project-cover{height:315px}
  #metodo .method-grid{grid-template-columns:1fr;gap:50px}
  .services{grid-template-columns:1fr 1fr}
  .cta-box{align-items:flex-start;flex-direction:column;padding:42px}
}
@media(max-width:520px){
  nav{height:66px}
  .hero{min-height:600px}
  .hero h1{font-size:49px}
  .hero p{font-size:15px}
  .buttons{flex-direction:column;align-items:stretch}
  .services{grid-template-columns:1fr}
  section{padding:80px 0}
  .section-title h2,#metodo h2{font-size:38px}
  .cta h2{font-size:37px}
  .cta-box{padding:32px 25px}
  .footer-in{flex-direction:column;gap:8px}
}

/* V5 refinements */
::selection{background:var(--purple);color:#fff}
body{overflow-x:hidden}
section{position:relative}
.section-marker{position:absolute;right:4%;top:34px;font-size:9px;font-weight:900;letter-spacing:.18em;color:#625b6b;writing-mode:vertical-rl;text-transform:uppercase}
.hero .container{padding-bottom:15px}
.hero h1{max-width:1120px}
.hero h1 span{position:relative;display:inline-block}
.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--purple);transform:scaleX(.42);transform-origin:left;opacity:.7}
.project{position:relative}
.project-cover{isolation:isolate}
.cover-num{letter-spacing:.2em}
.cover-arrow{position:absolute;right:27px;bottom:22px;z-index:3;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:18px;color:#fff;transition:.25s ease}
.project:hover .cover-arrow{background:var(--purple);border-color:var(--purple);transform:translate(3px,-3px)}
.project:first-child .project-body{display:grid;grid-template-columns:1fr auto;column-gap:35px;align-items:start}
.project:first-child .project-body h3,.project:first-child .project-body p{grid-column:1}
.project:first-child .tags{grid-column:1;margin-bottom:0}
.project:first-child .project-body>.btn{grid-column:2;grid-row:1 / span 3;align-self:center;white-space:nowrap}
.services{background:transparent}
.service{position:relative;min-height:195px;display:flex;flex-direction:column;justify-content:space-between}
.service:before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--purple);transition:width .3s ease}
.service:hover:before{width:100%}
.service b:before{content:"+";color:var(--purple);font-size:13px;vertical-align:middle;margin-right:9px}
.step{position:relative}
.step:after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--purple);transition:width .35s ease}
.step:hover:after{width:100%}
.number{font-size:11px;letter-spacing:.08em}
.cta-box{min-height:310px}
.cta-box .btn{padding:15px 24px}
@media(max-width:850px){
  .section-marker{display:none}
  .project:first-child .project-body{display:block}
  .project:first-child .project-body>.btn{margin-top:23px}
}