/* Maicon Studio — motore dello stile: variabili, animazioni, componenti riutilizzabili.
   Le pagine sono ancora vuote: queste classi si attivano appena le usi nei blocchi.
   Modifica qui, o inietta override via WP Code. */

  :root{
    --navy:#0E1B2E; --navy-2:#16273F; --grid-line: rgba(140,180,214,0.11);
    --paper:#F3EEE1; --paper-2:#EAE2CE; --ink:#1C2430; --ink-soft:#5B6472;
    --orange:#FF6A3D; --orange-deep:#E14F22; --cat-ux:#6FB3E0; --cat-3d:#D9B65C;
    --text-soft: rgba(243,238,225,0.62); --text-softer: rgba(243,238,225,0.4);
    --mono: 'IBM Plex Mono', monospace; --display: 'Big Shoulders Display', sans-serif; --body: 'IBM Plex Sans', sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--navy); color:var(--paper); font-family:var(--body); line-height:1.5; overflow-x:hidden; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
  a{ color:inherit; }
  ::selection{ background:var(--orange); color:var(--navy); }

  .ltr, .wd{ display:inline-block; opacity:0; transform:translateY(0.75em); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); will-change:transform,opacity; }
  .ltr.in, .wd.in{ opacity:1; transform:translateY(0); }
  .grid-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%); }

  .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,5vw,64px); background:rgba(14,27,46,0.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--grid-line); }
  .nav-logo{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; text-decoration:none; transition:transform .2s ease; }
  .nav-links{ display:flex; gap:28px; font-family:var(--mono); font-size:13px; letter-spacing:0.02em; }
  .nav-links a{ text-decoration:none; color:var(--text-soft); transition:color .2s, transform .2s ease; position:relative; }
  .nav-links a:hover, .nav-links a:focus-visible{ color:var(--paper); }
  .nav-links a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--orange); transition:width .25s; }
  .nav-links a:hover::after{ width:100%; }
  .nav-whatsapp{ font-family:var(--mono); font-size:12px; color:var(--paper); text-decoration:none; border:1px solid var(--grid-line); padding:8px 14px; border-radius:2px; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s; }
  .nav-whatsapp svg{ width:14px; height:14px; fill:currentColor; }
  .nav-whatsapp:hover{ border-color:#25D366; color:#25D366; }
  @media (max-width:760px){ .nav-links{ display:none; } }

  .block{ position:relative; z-index:1; padding:88px clamp(20px,6vw,80px); border:1px dashed transparent; opacity:1; transform:none; transition: opacity .7s ease, transform .7s ease, border-color .3s; }
  body.js-ready .block{ opacity:0; transform:translateY(24px); }
  body.js-ready .block.visible{ opacity:1; transform:translateY(0); }
  .block.visible{ opacity:1; transform:translateY(0); }
  .block:hover{ border-color:rgba(140,180,204,0.25); }
  .block-label{ position:absolute; top:-1px; left:clamp(20px,6vw,80px); transform:translateY(-100%); font-family:var(--mono); font-size:11px; letter-spacing:0.03em; background:var(--orange); color:var(--navy); font-weight:600; padding:4px 10px; border-radius:4px 4px 0 0; opacity:0; pointer-events:none; transition:opacity .2s; }
  .block:hover .block-label{ opacity:1; }
  .insertion-hint{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-softer); padding:16px 0; letter-spacing:0.03em; transition:color .2s; }
  .insertion-hint:hover{ color:var(--orange); }

  .hero{ padding-top:76px; padding-bottom:56px; position:relative; overflow:hidden; }
  .hero3d-ambient{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.55; pointer-events:none; }
  .hero-inner{ max-width:920px; position:relative; z-index:1; }
  .eyebrow{ font-family:var(--mono); font-size:12px; color:var(--text-softer); letter-spacing:0.06em; margin-bottom:18px; text-transform:uppercase; }
  h1{ font-family:var(--display); font-weight:800; letter-spacing:0em; font-size:clamp(2.4rem, 6vw, 4.4rem); line-height:1.04; margin-bottom:28px; }
  h1 .highlight{ background:var(--orange); color:var(--navy); padding:0.03em 0.4em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; font-style:normal; }
  h1 .line{ display:block; overflow:hidden; }
  h1 .line span{ display:inline-block; transform:translateY(115%); opacity:0; transition:transform .8s cubic-bezier(.19,1,.22,1), opacity .6s ease; }
  h1.in .line span{ transform:translateY(0); opacity:1; }
  h1 .line:nth-child(2) span{ transition-delay:.12s; }
  .lead{ font-size:clamp(1rem,2vw,1.2rem); color:var(--text-soft); max-width:620px; margin-bottom:36px; }
  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn-primary, .btn-ghost{ font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:0.02em; padding:14px 26px; border-radius:2px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .2s, box-shadow .2s, background .2s; }
  .btn-primary{ background:var(--orange); color:var(--navy); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,106,61,0.35); background:var(--orange-deep); }
  .btn-ghost{ border:1px solid var(--grid-line); color:var(--paper); }
  .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }

  .about-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:36px; align-items:stretch; max-width:1040px; }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
  .about-card{ background:var(--paper); color:var(--ink); border-radius:3px; padding:clamp(28px,5vw,52px); box-shadow:0 30px 60px -20px rgba(0,0,0,0.4); position:relative; }
  .about-card::before{ content:'01'; position:absolute; top:24px; right:32px; font-family:var(--mono); font-size:13px; font-weight:600; background:var(--ink); color:var(--paper); padding:3px 8px; border-radius:4px; }
  .about-card h2{ font-family:var(--display); font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:16px; letter-spacing:-0.02em; }
  .about-card p{ color:var(--ink-soft); font-size:1rem; margin-bottom:14px; }
  .about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .about-tags span{ font-family:var(--mono); font-size:12px; background:var(--paper-2); padding:5px 11px; border-radius:4px; color:var(--ink); }

  .media-slot{ position:relative; border-radius:3px; overflow:hidden; background-size:cover; background-position:center; background-color:var(--navy-2); border:1.5px dashed var(--grid-line); display:flex; align-items:center; justify-content:center; min-height:260px; }
  .media-slot .slot-label{ font-family:var(--mono); font-size:12.5px; color:var(--text-soft); text-align:center; padding:22px; max-width:260px; line-height:1.6; }
  .media-slot .slot-label b{ display:block; margin-bottom:6px; font-size:13px; color:var(--orange); }
  .media-slot.has-media{ border-style:solid; }
  .media-slot.has-media .slot-label{ display:none; }

  .why-block p{ color:var(--text-soft); max-width:680px; margin-bottom:16px; font-size:1.02rem; }
  .why-block p strong{ color:var(--paper); font-weight:600; }

  .section-head{ margin-bottom:44px; max-width:640px; }
  .section-head .block-num{ font-family:var(--mono); color:var(--orange); font-size:13px; margin-bottom:10px; display:block; }
  .section-head h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3.6vw,2.5rem); letter-spacing:0em; margin-bottom:12px; }
  .section-head p{ color:var(--text-soft); }

  .services-list{ border-top:1px solid var(--grid-line); }
  .service-row{ display:grid; grid-template-columns:2fr 3fr auto; gap:28px; align-items:center; padding:30px 0; border-bottom:1px solid var(--grid-line); text-decoration:none; color:inherit; transition:padding-left .25s, border-color .25s; }
  .service-row:hover{ padding-left:12px; border-color:rgba(255,106,61,0.4); }
  .service-row .icon{ font-family:var(--mono); font-size:11px; color:var(--orange); display:block; margin-bottom:6px; }
  .service-row .icon.cat-ux{ color:var(--cat-ux); }
  .service-row .icon.cat-3d{ color:var(--cat-3d); }
  .service-row h3{ font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-0.01em; }
  .service-row p{ color:var(--text-soft); font-size:0.94rem; }
  .service-row .go{ font-family:var(--mono); font-size:12.5px; color:var(--orange); white-space:nowrap; position:relative; transition:transform .2s ease; }
  .service-row .go::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--orange); transition:width .25s; }
  .service-row:hover .go::after{ width:100%; }
  @media (max-width:700px){ .service-row{ grid-template-columns:1fr; gap:10px; } }

  .projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
  .project-card-link{ text-decoration:none; color:inherit; display:block; }
  .project-card{ background:var(--navy-2); border:1px solid var(--grid-line); border-radius:3px; padding:30px; display:flex; flex-direction:column; gap:16px; transition: transform .3s, border-color .3s, box-shadow .3s; height:100%; }
  .project-card:hover{ transform:translateY(-6px); border-color:rgba(255,106,61,0.4); box-shadow:0 20px 40px -20px rgba(0,0,0,0.5); }
  .plate{ flex:1; display:flex; flex-direction:column; gap:12px; padding-top:16px; border-top:1px dashed var(--grid-line); }
  .plate-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
  .plate-row h3{ font-family:var(--display); font-size:1.25rem; letter-spacing:-0.01em; }
  .plate-cat{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.04em; margin-right:8px; color:var(--orange); }
  .plate-cat.cat-ux{ color:var(--cat-ux); }
  .plate-cat.cat-3d{ color:var(--cat-3d); }
  .plate-status{ font-family:var(--mono); font-size:11px; color:#5CD98C; white-space:nowrap; }
  .plate-status.wip{ color:var(--orange); }
  .plate-status.demo{ color:var(--cat-3d); }
  .project-role{ font-family:var(--mono); font-size:12px; color:var(--text-softer); }
  .project-card p.desc{ color:var(--text-soft); font-size:0.94rem; }
  .project-highlight{ font-family:var(--mono); font-size:12px; color:var(--orange); border-left:2px solid var(--orange); padding-left:10px; }
  .plate-spec{ margin-top:auto; padding-top:12px; border-top:1px solid var(--grid-line); font-family:var(--mono); font-size:11px; color:var(--text-softer); letter-spacing:0.01em; }

  .project-cover{ height:180px; margin:-30px -30px 0 -30px; border-radius:3px 3px 0 0; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:#18283F; }
  .project-cover.cat-bg-web{ background-image:repeating-linear-gradient(135deg, rgba(255,106,61,0.16) 0 14px, transparent 14px 28px); }
  .project-cover.cat-bg-ux{ background-image:repeating-linear-gradient(135deg, rgba(111,179,224,0.16) 0 14px, transparent 14px 28px); }
  .project-cover.cat-bg-3d{ background-image:repeating-linear-gradient(135deg, rgba(217,182,92,0.16) 0 14px, transparent 14px 28px); }
  .project-cover.has-media{ background-image:none !important; }
  .cover-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity .4s ease; }
  .project-card:hover .cover-video{ opacity:1; }
  .media-note{ position:absolute; top:14px; left:14px; z-index:3; font-family:var(--mono); font-size:9.5px; color:rgba(243,238,225,0.55); background:rgba(14,27,46,0.55); padding:3px 8px; border-radius:2px; max-width:65%; line-height:1.4; }
  .project-cover.has-media .media-note{ display:none; }

  .process-list{ display:flex; flex-direction:column; border-top:1px solid var(--grid-line); max-width:800px; }
  .process-item{ display:flex; gap:28px; padding:26px 0; border-bottom:1px solid var(--grid-line); align-items:baseline; }
  .process-item .num{ font-family:var(--mono); color:var(--orange); font-size:14px; min-width:32px; }
  .process-item .status-word{ font-family:var(--mono); font-size:11px; color:var(--text-softer); min-width:90px; }
  .process-item h4{ font-family:var(--display); font-size:1.2rem; min-width:140px; }
  .process-item p{ color:var(--text-soft); font-size:0.93rem; }
  @media (max-width:640px){ .process-item{ flex-wrap:wrap; } }

  .contact-block h2{ font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-0.03em; max-width:760px; margin-bottom:24px; }
  .contact-block .highlight{ background:var(--orange); color:var(--navy); padding:0.03em 0.4em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; font-style:normal; }
  .contact-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
  .contact-links a{ font-family:var(--mono); font-size:14px; text-decoration:none; border:1px solid var(--grid-line); padding:12px 20px; border-radius:2px; transition:border-color .2s, color .2s, transform .2s ease; }
  .contact-links a:hover{ border-color:var(--orange); color:var(--orange); }
  .contact-meta{ margin-top:36px; font-family:var(--mono); font-size:12.5px; color:var(--text-softer); }

  footer{ text-align:center; padding:32px 20px 44px; font-family:var(--mono); font-size:11.5px; color:var(--text-softer); position:relative; z-index:1; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:3px; }