:root{
      --accent:#FF5500;
      --accent-2:#ff7a3d;
      --dark:#171717;
      --dark-2:#242424;
      --text:#171717;
      --muted:#6f6f6f;
      --line:#dedede;
      --soft:#f3f3f3;
      --white:#ffffff;
      --radius-lg:34px;
      --radius-md:24px;
      --radius-sm:18px;
      --shadow:0 24px 70px rgba(0,0,0,.10);
      --container:min(1180px, calc(100% - 36px));
      --header-h:76px;
    }

    *{box-sizing:border-box}
    html{
      scroll-behavior:smooth;
      scroll-padding-top:96px;
      background:#fff;
    }
    body{
      margin:0;
      color:var(--text);
      background:#fff;
      font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.5;
      overflow-x:hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{
      outline:3px solid rgba(255,85,0,.45);
      outline-offset:4px;
    }

    .container{width:var(--container);margin-inline:auto}
    .section{
      padding:92px 0;
      scroll-snap-align:start;
      scroll-margin-top:96px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border:1px solid #c9c9c9;
      border-radius:999px;
      font-size:.85rem;
      font-weight:700;
      background:#fff;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
    }
    .section-title{
      margin:0;
      font-size:clamp(2rem,5vw,4rem);
      line-height:1.02;
      letter-spacing:-.05em;
      font-weight:800;
    }
    .section-title .accent,
    .accent{color:var(--accent)}
    .section-copy{
      margin:18px 0 0;
      color:var(--muted);
      max-width:720px;
      font-size:1.05rem;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:52px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:650;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      background:var(--accent);
      color:#fff;
      box-shadow:0 14px 30px rgba(255,85,0,.22);
    }
    .btn-primary:hover{background:#e94c00}
    .btn-secondary{
      background:#fff;
      border-color:#222;
      color:#111;
    }
    .btn-dark{
      background:#111;
      color:#fff;
    }
    .arrow{
      width:28px;height:28px;border-radius:50%;
      display:inline-grid;place-items:center;
      background:rgba(255,255,255,.18);
      font-size:1rem;
    }

    /* Header */
    .site-header{
      position:sticky;
      top:14px;
      z-index:50;
      width:var(--container);
      margin:14px auto 0;
      height:var(--header-h);
      border-radius:999px;
      background:rgba(13,13,13,.96);
      color:#fff;
      box-shadow:0 14px 35px rgba(0,0,0,.13);
      backdrop-filter:blur(16px);
    }
    .nav{
      height:100%;
      padding:0 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:26px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:650;
      letter-spacing:-.02em;
    }
    .brand-mark{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--accent);
      font-family:Georgia,serif;
      font-style:italic;
      font-size:1.15rem;
    }
    .nav-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:26px;
      font-size:.9rem;
      font-weight:500;
    }
    .nav-links a{
      opacity:.82;
      transition:opacity .2s ease,color .2s ease;
    }
    .nav-links a:hover,.nav-links a.active{opacity:1;color:var(--accent)}
    .menu-toggle{
      display:none;
      width:44px;height:44px;
      border:0;border-radius:50%;
      background:#2a2a2a;color:#fff;
    }

    /* Hero */
    .hero{
      min-height:calc(100vh - 92px);
      display:flex;
      align-items:stretch;
      padding-top:58px;
      padding-bottom:0;
    }
    .hero-shell{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);
      align-items:end;
      gap:48px;
      min-height:calc(100vh - 150px);
    }
    .hero-copy{
      position:relative;
      z-index:3;
      align-self:center;
      padding-bottom:54px;
    }
    .hero h1{
      margin:18px 0 18px;
      font-size:clamp(3.2rem,7.6vw,7rem);
      line-height:.92;
      letter-spacing:-.075em;
      font-weight:850;
      max-width:760px;
    }
    .hero h1 .line{display:block}
    .hero h1 .accent{font-weight:850}
    .hero-lead{
      max-width:610px;
      margin:0;
      color:#4d4d4d;
      font-size:clamp(1rem,1.6vw,1.18rem);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .hero-visual{
      position:relative;
      min-height:690px;
      height:100%;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      align-self:end;
    }
    .hero-shape{
      position:absolute;
      width:min(600px,100%);
      aspect-ratio:1/1;
      bottom:34px;
      border-radius:50% 50% 42% 42%;
      background:var(--accent);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .hero-photo{
      position:absolute;
      z-index:2;
      bottom:0;
      width:min(610px,112%);
      height:100%;
      object-fit:cover;
      object-position:center center;
      filter:drop-shadow(0 16px 22px rgba(0,0,0,.16));
    }
    .hero-placeholder{
      position:absolute;
      inset:auto 8% 0;
      height:84%;
      border-radius:220px 220px 35px 35px;
      display:grid;
      place-items:center;
      color:rgba(255,255,255,.82);
      border:2px dashed rgba(255,255,255,.45);
      text-align:center;
      padding:20px;
      font-weight:800;
    }
    .hero-side{
      align-self:center;
      display:grid;
      gap:18px;
    }
    .quote-card,.stats-card{
      border-top:1px solid #bbb;
      padding-top:22px;
    }
    .quote-mark{
      font-size:3rem;
      line-height:.6;
      font-family:Georgia,serif;
      font-weight:900;
    }
    .quote-card p{
      margin:16px 0 0;
      color:#4d4d4d;
    }
    .stats-card{
      display:grid;
      gap:18px;
    }
    .stat strong{
      display:block;
      font-size:2.2rem;
      line-height:1;
      letter-spacing:-.04em;
    }
    .stat span{color:var(--muted)}

    /* Services */
    .services-section{
      background:var(--dark-2);
      color:#fff;
      border-radius:var(--radius-lg);
      width:100%;
      margin-inline:auto;
      border-radius:0;
    }
    .services-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:30px;
      padding-bottom:28px;
      border-bottom:1px solid rgba(255,255,255,.16);
    }
    .services-head .section-copy{
      margin:0;
      max-width:470px;
      color:#d0d0d0;
    }
    .service-grid{
      margin-top:38px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .service-card{
      position:relative;
      min-height:430px;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border-radius:var(--radius-md);
      background:#3a3a3a;
      border:1px solid rgba(255,255,255,.06);
      transition:transform .25s ease;
    }
    .service-card:hover{transform:translateY(-8px)}
    .service-card.featured{background:var(--accent)}
    .service-top{
      padding:26px 26px 20px;
      border-bottom:1px solid rgba(255,255,255,.16);
    }
    .service-top h3{margin:0;font-size:1.45rem}
    .service-body{
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:26px;
    }
    .service-body p{
      margin:0;
      color:#e1e1e1;
    }
    .service-card.featured .service-body p{color:#fff}
    .service-icon{
      margin-top:26px;
      min-height:150px;
      border-radius:20px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
      font-size:3rem;
      font-weight:900;
    }
    .service-number{
      position:absolute;
      right:18px;bottom:18px;
      width:58px;height:58px;
      display:grid;place-items:center;
      border-radius:50%;
      background:rgba(17,17,17,.72);
      font-size:1.2rem;
    }

    /* Why */
    .why-card{
      background:var(--soft);
      border-radius:var(--radius-lg);
      padding:48px;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:64px;
      align-items:center;
    }
    .why-visual{
      min-height:590px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .why-frame{
      position:relative;
      width:min(520px,96%);
      aspect-ratio:1;
      border-radius:34px;
      background:var(--accent);
      border:1px solid rgba(17,17,17,.08);
      box-shadow:0 28px 70px rgba(0,0,0,.14);
      overflow:hidden;
      isolation:isolate;
    }
    .why-frame::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:3;
      border-radius:34px;
      box-shadow:inset 0 0 0 12px rgba(255,255,255,.55);
      pointer-events:none;
    }
    .why-frame::after{
      content:"";
      position:absolute;
      inset:14px;
      z-index:2;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.18);
      pointer-events:none;
    }
    .why-photo{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      border-radius:34px;
      z-index:1;
    }
    .why-placeholder{
      z-index:2;
      width:min(330px,70%);
      aspect-ratio:.72;
      border:2px dashed rgba(255,255,255,.5);
      border-radius:180px 180px 28px 28px;
      display:grid;place-items:center;
      color:#fff;
      font-weight:800;
      text-align:center;
      padding:22px;
    }
    .why-content .section-title{font-size:clamp(2.2rem,4vw,4.3rem)}
    .why-list{
      margin:30px 0 0;
      display:grid;
      gap:16px;
    }
    .why-item{
      display:grid;
      grid-template-columns:44px 1fr;
      gap:15px;
      padding:18px 0;
      border-top:1px solid #d0d0d0;
    }
    .why-item:first-child{border-top:0;padding-top:0}
    .why-index{
      width:42px;height:42px;border-radius:50%;
      display:grid;place-items:center;
      background:#111;color:#fff;
      font-weight:900;
    }
    .why-item h3{margin:0 0 5px;font-size:1.08rem}
    .why-item p{margin:0;color:var(--muted);font-size:.96rem}
    .why-content .btn{margin-top:26px}

    /* Portfolio */
    .portfolio-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:25px;
      margin-bottom:34px;
    }
    .portfolio-controls{
      display:flex;
      gap:10px;
    }
    .icon-btn{
      width:52px;height:52px;
      border-radius:50%;
      border:1px solid #bbb;
      background:#fff;
      display:grid;place-items:center;
      font-size:1.3rem;
      transition:.2s ease;
    }
    .icon-btn:hover{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
    }
    .portfolio-viewport{overflow:hidden}
    .portfolio-track{
      display:flex;
      gap:22px;
      transition:transform .5s cubic-bezier(.2,.8,.2,1);
      will-change:transform;
    }
    .project-card{
      flex:0 0 calc((100% - 44px)/3);
      border-radius:28px;
      overflow:hidden;
      background:#f6f6f6;
      border:1px solid #e1e1e1;
      transition:transform .25s ease, box-shadow .25s ease;
      cursor:pointer;
    }
    .project-card:hover{
      transform:translateY(-7px);
      box-shadow:var(--shadow);
    }
    .project-thumb{
      min-height:340px;
      position:relative;
      overflow:hidden;
      padding:24px;
      display:flex;
      align-items:flex-end;
      background:
        radial-gradient(circle at 75% 20%, rgba(255,255,255,.9), transparent 24%),
        linear-gradient(140deg,#efefef,#fff);
    }
    .project-info{padding:24px}
    .project-category{
      display:inline-flex;
      padding:7px 11px;
      border-radius:999px;
      background:#ececec;
      font-size:.78rem;
      font-weight:800;
      color:#555;
    }
    .project-info h3{
      margin:14px 0 8px;
      font-size:1.35rem;
    }
    .project-info p{margin:0;color:var(--muted)}
    .portfolio-bottom{
      margin-top:28px;
      display:flex;
      justify-content:center;
    }

    /* Modal */
    .modal{
      position:fixed;
      inset:0;
      z-index:100;
      display:none;
      place-items:center;
      padding:18px;
      background:rgba(0,0,0,.72);
      backdrop-filter:blur(10px);
    }
    .modal.open{display:grid}
    .modal-card{
      position:relative;
      width:min(760px,100%);
      max-height:88vh;
      overflow:auto;
      padding:34px;
      border-radius:28px;
      background:#fff;
      box-shadow:0 30px 90px rgba(0,0,0,.35);
    }
    .modal-close{
      position:absolute;
      top:16px;right:16px;
      width:44px;height:44px;border-radius:50%;
      border:0;background:#111;color:#fff;
      font-size:1.2rem;
    }
    .modal-visual{
      min-height:300px;
      margin-bottom:24px;
      border-radius:20px;
      background:linear-gradient(140deg,#f1f1f1,#fff);
      display:grid;place-items:center;
      color:var(--accent);
      font-weight:900;
      font-size:clamp(2rem,6vw,4rem);
      text-align:center;
      padding:30px;
    }
    .modal-card h3{font-size:2rem;margin:0 0 8px}
    .modal-card p{color:var(--muted);font-size:1.05rem}

    /* Footer */
    .site-footer{
      width:100%;
      margin:0;
      padding:72px 0 30px;
      background:var(--dark-2);
      color:#fff;
      border-radius:0;
    }
    .footer-cta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
      padding-bottom:34px;
      border-bottom:1px solid rgba(255,255,255,.16);
    }
    .footer-cta h2{
      margin:0;
      font-size:clamp(2.3rem,5vw,4.7rem);
      line-height:.98;
      letter-spacing:-.05em;
    }
    .footer-cta p{
      max-width:640px;
      margin:16px 0 0;
      color:#cfcfcf;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 1fr 1fr;
      gap:50px;
      padding:40px 0;
    }
    .footer-col h3{
      margin:0 0 16px;
      color:var(--accent);
      font-size:.95rem;
    }
    .footer-col p,.footer-col a{
      color:#cecece;
    }
    .footer-col a{
      display:block;
      margin:8px 0;
    }
    .footer-col a:hover{color:#fff}
    .footer-brand{margin-bottom:18px}
    .footer-legal{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding-top:26px;
      border-top:1px solid rgba(255,255,255,.16);
      color:#aaa;
      font-size:.9rem;
    }




    .privacy-link{
      color:#cfcfcf;
      text-decoration:underline;
      text-underline-offset:4px;
      background:none;
      border:0;
      padding:0;
      cursor:pointer;
    }
    .privacy-link:hover{color:#fff}
    .privacy-modal{
      position:fixed;
      inset:0;
      z-index:110;
      display:none;
      place-items:center;
      padding:18px;
      background:rgba(0,0,0,.72);
      backdrop-filter:blur(10px);
    }
    .privacy-modal.open{display:grid}
    .privacy-card{
      position:relative;
      width:min(680px,100%);
      max-height:88vh;
      overflow:auto;
      padding:34px;
      border-radius:28px;
      background:#fff;
      color:#171717;
      box-shadow:0 30px 90px rgba(0,0,0,.35);
    }
    .privacy-card h2{margin:0 52px 12px 0;font-size:clamp(1.8rem,4vw,2.7rem)}
    .privacy-card p{color:#5d5d5d}

    /* Language switcher */
    .language-dock{
      position:fixed;right:18px;top:50%;z-index:70;
      transform:translateY(-50%);
      display:grid;gap:10px;padding:10px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(17,17,17,.10);
      box-shadow:0 16px 50px rgba(0,0,0,.14);
      backdrop-filter:blur(16px);
      animation:languageFloat 5.8s ease-in-out infinite;
    }
    .language-dock::before{
      content:"";position:absolute;inset:-7px;border-radius:999px;
      border:1px solid rgba(255,85,0,.10);pointer-events:none;
    }
    .language-option{
      position:relative;
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border:0;
      border-radius:50%;
      overflow:hidden;
      padding:0;
      background-color:#fff;
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center;
      box-shadow:0 6px 18px rgba(0,0,0,.10);
      transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
    }
    .language-option span{display:none}
    .language-option:hover{transform:scale(1.08)}
    .language-option.active{
      box-shadow:0 0 0 3px rgba(255,255,255,.96),0 8px 24px rgba(255,85,0,.28);
      filter:saturate(1.05);
    }
    .language-option.lang-pt{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23009B3A'/%3E%3Cpolygon points='50,14 86,50 50,86 14,50' fill='%23FFDF00'/%3E%3Ccircle cx='50' cy='50' r='18' fill='%23002776'/%3E%3C/svg%3E");
    }
    .language-option.lang-it{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='34' height='100' x='0' fill='%23009246'/%3E%3Crect width='32' height='100' x='34' fill='%23FFFFFF'/%3E%3Crect width='34' height='100' x='66' fill='%23CE2B37'/%3E%3C/svg%3E");
    }
    .language-option::after{
      content:attr(data-label);position:absolute;right:58px;padding:7px 10px;
      border-radius:999px;color:#fff;background:#111;font-size:.72rem;font-weight:650;
      white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:.2s ease;
    }
    .language-option:hover::after,.language-option:focus-visible::after{opacity:1;transform:none}
    @keyframes languageFloat{
      0%,100%{transform:translateY(-50%) translateY(0)}
      50%{transform:translateY(-50%) translateY(-7px)}
    }

    /* Reveal */
    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.visible{
      opacity:1;
      transform:none;
    }


    .brand-assets{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:220px;
    }
    .brand-icon{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
    .brand-logo{height:29px;width:auto;object-fit:contain}
    .footer-logo{height:34px;width:auto;object-fit:contain;margin-bottom:16px}

    .service-folder{
      position:relative;
      min-height:170px;
      margin-top:28px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      perspective:900px;
    }
    .folder-file{
      position:absolute;
      left:50%;
      width:76%;
      height:108px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(7px);
      transform:translateX(-50%);
      transition:transform .35s ease, opacity .35s ease;
    }
    .folder-file.file-a{bottom:45px;opacity:.36;transform:translateX(-50%) translateY(-12px) scale(.88)}
    .folder-file.file-b{bottom:30px;opacity:.5;transform:translateX(-50%) translateY(-4px) scale(.94)}
    .folder-front{
      position:relative;
      z-index:3;
      width:100%;
      min-height:112px;
      padding:20px;
      border-radius:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      background:rgba(255,255,255,.13);
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(9px);
      overflow:hidden;
    }
    .folder-front::before{
      content:"";
      position:absolute;
      left:18px;
      top:-13px;
      width:92px;
      height:30px;
      border-radius:14px 14px 0 0;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.18);
      border-bottom:0;
    }
    .folder-front strong{font-size:1.15rem;letter-spacing:.02em;position:relative;z-index:2}
    .service-card:hover .file-a{transform:translateX(-50%) translateY(-26px) rotate(-2deg) scale(.9)}
    .service-card:hover .file-b{transform:translateX(-50%) translateY(-13px) rotate(2deg) scale(.96)}
    .service-card:hover .folder-front{transform:translateY(-3px)}

    .why-section{
      width:100%;
      background:var(--soft);
      padding:92px 0;
      scroll-snap-align:start;
      scroll-margin-top:96px;
    }
    .why-section .why-card{
      padding:0;
      border-radius:0;
      background:transparent;
    }


    @media (min-width:900px){
      body{scroll-snap-type:y proximity}
      .section:not(.hero){scroll-snap-stop:normal}
    }

    @media (max-width:1020px){
      .hero-shell{
        grid-template-columns:1fr 1fr;
      }
      .hero-side{
        grid-column:1 / -1;
        grid-template-columns:1fr 1fr;
      }
      .service-grid{grid-template-columns:1fr 1fr}
      .service-card:last-child{grid-column:1/-1}
      .why-card{grid-template-columns:1fr;gap:20px}
      .why-visual{min-height:430px}
      .project-card{flex-basis:calc((100% - 22px)/2)}
    }

    @media (max-width:760px){
      :root{--container:min(100% - 24px, 680px)}
      .site-header{top:8px;margin-top:8px;height:68px}
      .nav{padding:0 14px}
      .menu-toggle{display:grid;place-items:center}
      .nav-links{
        position:absolute;
        left:0;right:0;top:78px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:14px;
        background:#111;
        border-radius:24px;
        box-shadow:0 20px 50px rgba(0,0,0,.2);
      }
      .nav-links.open{display:flex}
      .nav-links a{
        padding:14px 12px;
        border-bottom:1px solid rgba(255,255,255,.08);
      }
      .nav .btn{display:none}

      .section{padding:70px 0}
      .hero{
        padding-top:42px;
        padding-bottom:0;
        min-height:auto;
      }
      .hero > .container{
        width:var(--container);
        padding-left:0;
        padding-right:0;
      }
      .hero-shell{grid-template-columns:1fr;min-height:auto}
      .hero-copy{text-align:left;padding-bottom:10px}
      .hero h1{font-size:clamp(3rem,15vw,5.7rem)}
      .hero-visual{min-height:520px;order:2}
      .hero-side{
        order:3;
        grid-template-columns:1fr;
      }
      .hero-shape{width:min(420px,95%)}
      .hero-photo{width:min(420px,100%)}

      .services-head{display:block}
      .services-head .section-copy{margin-top:18px}
      .service-grid{grid-template-columns:1fr}
      .service-card:last-child{grid-column:auto}
      .service-card{min-height:380px}

      .why-card{padding:26px 18px}
      .why-visual{min-height:360px}
      .why-item{grid-template-columns:38px 1fr}
      .why-index{width:36px;height:36px}

      .portfolio-head{align-items:flex-start}
      .portfolio-controls{display:none}
      .portfolio-viewport{overflow:visible}
      .portfolio-track{
        display:grid;
        transform:none!important;
      }
      .project-card{width:100%}
      .project-thumb{min-height:290px}

      .site-footer{width:100%;padding-top:56px}
      .language-dock{right:10px;top:auto;bottom:16px;transform:none;grid-auto-flow:column;animation:none}
      .language-option::after{display:none}
      .footer-cta{
        display:block;
      }
      .footer-cta .btn{margin-top:24px}
      .footer-grid{grid-template-columns:1fr;gap:28px}
      .footer-legal{display:block}
    }

    @media (max-width:460px){
      .hero-actions{display:grid}
      .hero-actions .btn{width:100%}
      .section-title{font-size:2.5rem}
      .modal-card{padding:28px 20px}
    }

    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
      }
      body{scroll-snap-type:none!important}
      .reveal{opacity:1;transform:none}
      .language-dock{animation:none!important}
    }
  
    /* Compatibilidade com WordPress / temas e page builders */
    #zamp-site{
      position:relative;
      width:100vw;
      max-width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      overflow-x:clip;
      color:var(--text);
      background:#fff;
      font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.5;
      isolation:isolate;
    }

    #zamp-site,
    #zamp-site *,
    #zamp-site *::before,
    #zamp-site *::after{
      box-sizing:border-box;
    }

    #zamp-site img{
      display:block;
      max-width:100%;
    }

    #zamp-site .container{
      width:min(1180px,calc(100% - 36px)) !important;
      max-width:1180px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }

    #zamp-site .site-header{
      width:min(1180px,calc(100% - 36px)) !important;
      max-width:1180px !important;
      margin:14px auto 0 !important;
      overflow:hidden;
    }

    #zamp-site .nav{
      width:100%;
      max-width:none;
    }

    #zamp-site .brand{
      display:flex !important;
      align-items:center !important;
      flex:0 0 auto !important;
      min-width:0 !important;
      max-width:230px;
      overflow:hidden;
    }

    #zamp-site .brand-icon{
      display:block !important;
      width:48px !important;
      min-width:48px !important;
      max-width:48px !important;
      height:48px !important;
      min-height:48px !important;
      max-height:48px !important;
      object-fit:contain !important;
      object-position:center !important;
    }

    #zamp-site .brand-logo{
      display:block !important;
      width:142px !important;
      min-width:0 !important;
      max-width:142px !important;
      height:34px !important;
      min-height:34px !important;
      max-height:34px !important;
      object-fit:contain !important;
      object-position:left center !important;
    }

    #zamp-site .footer-logo{
      display:block !important;
      width:250px !important;
      max-width:100% !important;
      height:auto !important;
      object-fit:contain !important;
    }

    #zamp-site .hero > .container{
      width:min(1180px,calc(100% - 36px)) !important;
      max-width:1180px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }

    #zamp-site .services-section,
    #zamp-site .why-section,
    #zamp-site .site-footer{
      width:100% !important;
      max-width:none !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }

    #zamp-site h1,
    #zamp-site h2,
    #zamp-site h3,
    #zamp-site p{
      font-family:inherit;
    }

    #zamp-site .language-dock{
      position:fixed !important;
      z-index:99999 !important;
    }

    @media (max-width:760px){
      #zamp-site .container,
      #zamp-site .site-header,
      #zamp-site .hero > .container{
        width:min(100% - 24px,680px) !important;
      }

      #zamp-site .brand{
        max-width:190px;
      }

      #zamp-site .brand-icon{
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
      }

      #zamp-site .brand-logo{
        width:124px !important;
        max-width:124px !important;
        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;
      }
    }

  
    /* Ajustes finais solicitados */
    #zamp-site .btn-primary,
    #zamp-site .btn-primary:visited,
    #zamp-site .btn-primary *{
      color:#fff!important;
    }
    #zamp-site .btn-primary:hover,
    #zamp-site .btn-primary:focus-visible,
    #zamp-site .btn-primary:hover *,
    #zamp-site .btn-primary:focus-visible *{
      color:#111!important;
    }

    #zamp-site .btn-dark,
    #zamp-site .btn-dark:visited{color:#fff!important}
    #zamp-site .btn-dark:hover,
    #zamp-site .btn-dark:focus-visible,
    #zamp-site .btn-dark:hover *,
    #zamp-site .btn-dark:focus-visible *{color:var(--accent)!important}

    #zamp-site .btn-secondary:hover,
    #zamp-site .btn-secondary:focus-visible,
    #zamp-site .btn-secondary:hover *,
    #zamp-site .btn-secondary:focus-visible *{color:#111!important}

    #zamp-site .hero-visual{overflow:visible!important}
    #zamp-site .hero-photo{
      width:min(700px,126%)!important;
      max-width:none!important;
      height:114%!important;
      bottom:-2px!important;
      object-fit:contain!important;
      object-position:center bottom!important;
      transform:none!important;
      transform-origin:center bottom
    }
    #zamp-site .hero-shape{
      width:min(590px,96%)!important;
      bottom:28px!important
    }
    @media(max-width:1020px){
      #zamp-site .hero-photo{
        width:min(630px,120%)!important;
        height:109%!important;
        bottom:-2px!important;
        transform:none!important
      }
    }
    @media(max-width:760px){
      #zamp-site .hero-photo{
        width:min(470px,112%)!important;
        height:104%!important;
        bottom:-2px!important;
        transform:none!important
      }
      #zamp-site .hero-lead br{display:none}
    }



    /* Últimos ajustes solicitados */
    #zamp-site .site-header{
      top:10px !important;
      margin-top:10px !important;
      height:64px !important;
    }

    #zamp-site .hero{
      padding-top:28px !important;
      min-height:calc(100vh - 82px) !important;
    }

    #zamp-site .hero-shell{
      min-height:calc(100vh - 132px) !important;
      align-items:start !important;
    }

    #zamp-site .hero-copy{
      align-self:start !important;
      padding-top:12px !important;
      padding-bottom:0 !important;
    }

    #zamp-site .hero-visual{
      align-self:start !important;
    }

    #zamp-site .service-number{
      display:none !important;
    }

    #zamp-site .privacy-link,
    #zamp-site .privacy-link:visited{
      color:inherit !important;
      font:inherit !important;
      text-decoration:none !important;
      text-underline-offset:0 !important;
      background:transparent !important;
      border:0 !important;
      padding:0 !important;
      box-shadow:none !important;
      outline:none !important;
    }

    #zamp-site .privacy-link:hover,
    #zamp-site .privacy-link:focus-visible{
      color:var(--accent) !important;
      text-decoration:none !important;
      box-shadow:none !important;
      outline:none !important;
    }

    @media(max-width:760px){
      #zamp-site .site-header{
        top:8px !important;
        margin-top:8px !important;
        height:60px !important;
      }

      #zamp-site .hero{
        padding-top:22px !important;
      }

      #zamp-site .hero-copy{
        padding-top:6px !important;
      }
    }



    /* Ajuste final de altura do hero */
    #zamp-site .hero{
      min-height:auto !important;
      padding-top:28px !important;
      padding-bottom:0 !important;
    }

    #zamp-site .hero-shell{
      min-height:560px !important;
      align-items:end !important;
    }

    #zamp-site .hero-copy{
      align-self:center !important;
      padding-top:0 !important;
      padding-bottom:42px !important;
    }

    #zamp-site .hero-visual{
      min-height:560px !important;
      height:560px !important;
      align-self:end !important;
      align-items:flex-end !important;
    }

    #zamp-site .hero-photo{
      height:118% !important;
      bottom:-2px !important;
      object-position:center bottom !important;
    }

    @media(max-width:1020px){
      #zamp-site .hero-shell{
        min-height:520px !important;
      }

      #zamp-site .hero-visual{
        min-height:520px !important;
        height:520px !important;
      }

      #zamp-site .hero-photo{
        height:113% !important;
      }
    }

    @media(max-width:760px){
      #zamp-site .hero-shell{
        min-height:auto !important;
      }

      #zamp-site .hero-copy{
        align-self:start !important;
        padding-bottom:10px !important;
      }

      #zamp-site .hero-visual{
        min-height:480px !important;
        height:480px !important;
      }

      #zamp-site .hero-photo{
        height:108% !important;
      }
    }


    /* Ajuste de espaçamento solicitado: versão final 6 */
    @media(max-width:760px){
      #zamp-site .hero{
        padding-top:44px !important;
      }

      #zamp-site .hero-copy{
        padding-bottom:20px !important;
      }
    }



    /* Ajuste de espaçamento solicitado: versão final 7 */
    #zamp-site .hero{
      padding-top:42px !important;
    }

    #zamp-site .hero-shell{
      min-height:590px !important;
    }

    #zamp-site .hero-copy{
      padding-bottom:63px !important;
    }

    #zamp-site .hero-visual{
      min-height:590px !important;
      height:590px !important;
    }

    @media(max-width:1020px){
      #zamp-site .hero{
        padding-top:38px !important;
      }

      #zamp-site .hero-shell{
        min-height:550px !important;
      }

      #zamp-site .hero-copy{
        padding-bottom:54px !important;
      }

      #zamp-site .hero-visual{
        min-height:550px !important;
        height:550px !important;
      }
    }

    @media(max-width:760px){
      #zamp-site .hero{
        padding-top:66px !important;
      }

      #zamp-site .hero-copy{
        padding-bottom:30px !important;
      }

      #zamp-site .hero-visual{
        min-height:500px !important;
        height:500px !important;
      }
    }



    /* ==========================================================
       versao-1.1 · imagens originais, hero mais alta e movimento
       ========================================================== */

    /* Curvas da casa. Nenhuma e linear e nenhuma e o default do navegador:
       entrada desacelera no fim, saida acelera no comeco e e mais curta. */
    :root{
      --ease-saida:cubic-bezier(.22,.9,.32,1);
      --ease-entrada:cubic-bezier(.45,0,.75,.35);
      --ease-suave:cubic-bezier(.4,.14,.28,1);
    }

    /* ---------- Marca: proporcao real dos arquivos de originais/logos ----------
       O lockup exportado e 334x108 (3,09:1). A caixa antiga era 142x34 (4,18:1),
       entao a logo ficava menor que a caixa e sobrava espaco morto a direita. */
    #zamp-site .brand-logo{
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      height:34px !important;
      min-height:34px !important;
      max-height:34px !important;
    }
    #zamp-site .brand:hover .brand-icon{
      transform:rotate(-14deg);
    }
    /* 751x243 (3,09:1). Em 210px de largura o lockup fica com 68px de altura. */
    #zamp-site .footer-logo{
      width:126px !important;
      margin-bottom:0 !important;
    }

    /* ---------- Ritmo do rodape ----------
       Medido antes: 46px entre a logo e a assinatura, 16px entre a assinatura e o
       endereco, 24px do titulo da coluna ate o primeiro link e 16px entre links.
       Vinha de tres margens somando no mesmo ponto: a da imagem, a do .footer-brand
       e a do `a` de coluna, que tambem pega o link da logo. Agora cada vao e
       declarado uma vez so, em multiplo de 4: 16px depois da logo e do titulo da
       coluna, 12px entre linhas de texto e entre links. */
    #zamp-site .footer-col .footer-brand{
      display:block;
      margin:0 0 16px;
    }
    #zamp-site .footer-col h3{
      margin:0 0 16px;
    }
    #zamp-site .footer-col p{
      margin:0 0 12px;
    }
    #zamp-site .footer-col a{
      margin:0 0 12px;
    }
    #zamp-site .footer-col > *:last-child{
      margin-bottom:0;
    }

    @media (max-width:760px){
      #zamp-site .brand-logo{
        width:auto !important;
        max-width:none !important;
        height:29px !important;
        min-height:29px !important;
        max-height:29px !important;
      }
    }

    /* ---------- Hero: fecha a primeira dobra ----------
       A altura fixa de 590px deixava um pedaco da secao escura aparecendo na
       abertura. Agora a caixa acompanha a janela: o topo dela esta a 116px do
       documento, entao 100svh menos 116 faz o hero terminar exatamente na
       borra inferior da tela. O piso protege janela baixa, onde o texto e os
       botoes precisam continuar cabendo, e o teto evita hero absurdo em
       monitor alto.

       A foto e a unica coisa que define a propria altura: com width auto ela
       segue a proporcao do arquivo, entao 100% da caixa mais 14px coloca o
       topo da cabeca na mesma altura da versao 1.0, qualquer que seja a
       altura da janela. Era isso o pedido: a hero desce, a foto cresce junto
       e o topo da foto nao se mexe. */
    #zamp-site .hero-shell{
      min-height:calc(100vh - 116px) !important;
      min-height:clamp(600px, calc(100svh - 116px), 900px) !important;
    }
    #zamp-site .hero-visual{
      min-height:0 !important;
      height:auto !important;
      align-self:stretch !important;
    }
    #zamp-site .hero-copy{
      padding-bottom:56px !important;
    }
    #zamp-site .hero-photo{
      width:auto !important;
      max-width:none !important;
      height:calc(100% + 14px) !important;
      bottom:-2px !important;
    }

    @media(max-width:1020px){
      #zamp-site .hero-shell{
        min-height:clamp(560px, calc(100svh - 116px), 780px) !important;
      }
      #zamp-site .hero-copy{padding-bottom:46px !important}
      #zamp-site .hero-photo{height:calc(100% + 10px) !important}
    }

    @media(max-width:760px){
      /* No empilhado a coluna e estreita: a massa volta ao tamanho de disco
         atras da cabeca, em vez de virar fundo de tela inteira. */
      #zamp-site .hero-shape{
        width:min(420px,95%) !important;
        height:auto;
        max-height:none;
        bottom:26px !important;
      }
      #zamp-site .hero-shell{min-height:auto !important}
      #zamp-site .hero-visual{
        min-height:490px !important;
        height:490px !important;
        align-self:end !important;
      }
      #zamp-site .hero-copy{padding-bottom:30px !important}
      /* No empilhado quem manda e a largura da coluna, nao a altura da caixa:
         a foto e recortada rente ao sujeito e cresceria demais pela altura. */
      #zamp-site .hero-photo{
        width:min(420px,110%) !important;
        height:auto !important;
        max-height:none !important;
      }
    }

    /* ---------- A massa laranja atras da foto ----------
       Tres camadas da MESMA laranja opaca, inscritas na mesma caixa. Cada uma
       gira em tempo e sentido proprios; como a cor e identica e elas se
       sobrepoem, o que se ve e uma silhueta unica que muda de forma sem se
       partir em pedacos. Rotacao inscrita nunca sai do circulo da caixa, entao
       a massa nao invade a coluna de texto.
       linear e proposital aqui: e giro continuo de fundo, nao movimento de
       interface. Qualquer easing criaria uma pulsacao visivel a cada volta.
       O respiro fica na caixa, com ease-in-out, para nao ter canto na virada. */
    #zamp-site .hero-shape{
      width:auto !important;
      height:85%;
      max-height:700px;
      aspect-ratio:1/1;
      bottom:36px !important;
      background:none !important;
      border-radius:0 !important;
      box-shadow:none !important;
      overflow:visible !important;
      animation:zampRespiro 13s var(--ease-suave) infinite;
    }
    #zamp-site .hero-shape .blob{
      position:absolute;
      background:var(--accent);
      will-change:transform;
    }
    #zamp-site .blob-a{
      inset:0;
      border-radius:58% 42% 47% 53% / 46% 51% 49% 54%;
      animation:zampGiraA 27s linear infinite;
    }
    #zamp-site .blob-b{
      inset:5% 0 3% 4%;
      border-radius:44% 56% 63% 37% / 57% 39% 61% 43%;
      animation:zampGiraB 38s linear infinite;
    }
    #zamp-site .blob-c{
      inset:3% 6% 7% 0;
      border-radius:53% 47% 38% 62% / 62% 58% 42% 38%;
      animation:zampGiraC 49s linear infinite;
    }
    @keyframes zampGiraA{to{transform:rotate(360deg)}}
    @keyframes zampGiraB{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
    @keyframes zampGiraC{from{transform:rotate(140deg)}to{transform:rotate(-220deg)}}
    @keyframes zampRespiro{
      0%,100%{transform:scale(1) translate3d(0,0,0)}
      50%{transform:scale(1.025) translate3d(0,-8px,0)}
    }

    /* ---------- Entrada do hero ----------
       Acima da dobra, entao entra no carregamento e nao por observador de scroll. */
    @keyframes zampSobe{
      from{opacity:0;transform:translate3d(0,var(--sobe,22px),0)}
      to{opacity:1;transform:translate3d(0,0,0)}
    }
    @keyframes zampAproxima{
      from{opacity:0;transform:translate3d(0,26px,0) scale(.965)}
      to{opacity:1;transform:translate3d(0,0,0) scale(1)}
    }
    #zamp-site .hero-intro > *{
      animation:zampSobe var(--t,.6s) var(--e,var(--ease-saida)) var(--d,0s) backwards;
    }
    #zamp-site .hero-intro > .eyebrow{--sobe:14px;--t:.52s;--d:.06s}
    #zamp-site .hero-intro > h1{--sobe:30px;--t:.78s;--d:.14s;--e:cubic-bezier(.18,.86,.3,1)}
    #zamp-site .hero-intro > .hero-lead{--sobe:20px;--t:.66s;--d:.3s}
    #zamp-site .hero-intro > .hero-actions{--sobe:12px;--t:.56s;--d:.42s;--e:var(--ease-suave)}
    #zamp-site .hero-intro-visual{
      animation:zampAproxima .92s var(--ease-saida) .1s backwards;
    }

    /* ---------- Entrada por scroll ----------
       Irmaos nunca entram com a mesma duracao, o mesmo easing e a mesma
       distancia. A variacao vem por variavel, nao por classe nova. */
    #zamp-site .reveal{
      transform:translate3d(0,var(--reveal-y,26px),0);
      transition:
        opacity var(--reveal-t,.62s) var(--reveal-e,var(--ease-saida)) var(--reveal-d,0s),
        transform var(--reveal-t,.62s) var(--reveal-e,var(--ease-saida)) var(--reveal-d,0s);
    }
    #zamp-site .reveal.visible{transform:translate3d(0,0,0)}

    #zamp-site .service-card:nth-child(1){--reveal-y:30px;--reveal-t:.58s;--reveal-d:0s}
    #zamp-site .service-card:nth-child(2){--reveal-y:46px;--reveal-t:.76s;--reveal-d:.08s;--reveal-e:cubic-bezier(.18,.86,.3,1)}
    #zamp-site .service-card:nth-child(3){--reveal-y:20px;--reveal-t:.62s;--reveal-d:.19s;--reveal-e:var(--ease-suave)}

    #zamp-site .project-card:nth-child(1){--reveal-y:24px;--reveal-t:.6s;--reveal-d:0s}
    #zamp-site .project-card:nth-child(2){--reveal-y:38px;--reveal-t:.72s;--reveal-d:.1s;--reveal-e:var(--ease-suave)}
    #zamp-site .project-card:nth-child(3){--reveal-y:30px;--reveal-t:.66s;--reveal-d:.22s;--reveal-e:cubic-bezier(.18,.86,.3,1)}

    #zamp-site .why-visual{--reveal-y:34px;--reveal-t:.8s}
    #zamp-site .why-content{--reveal-y:22px;--reveal-t:.66s;--reveal-d:.12s;--reveal-e:var(--ease-suave)}

    /* Os tres diferenciais nao tem classe .reveal propria: entram quando o
       bloco de texto que os contem fica visivel. */
    #zamp-site .why-content.visible .why-item{
      animation:zampSobe var(--t) var(--e,var(--ease-saida)) var(--d) backwards;
    }
    #zamp-site .why-content.visible .why-item:nth-child(1){--sobe:16px;--t:.5s;--d:.22s}
    #zamp-site .why-content.visible .why-item:nth-child(2){--sobe:24px;--t:.62s;--d:.34s;--e:var(--ease-suave)}
    #zamp-site .why-content.visible .why-item:nth-child(3){--sobe:18px;--t:.54s;--d:.48s}

    /* ---------- Cabecalho: encolhe ao rolar ---------- */
    #zamp-site .site-header{
      transition:height .32s var(--ease-saida), box-shadow .32s var(--ease-saida),
                 background .32s var(--ease-saida);
    }
    #zamp-site .site-header.rolou{
      height:58px !important;
      box-shadow:0 16px 40px rgba(0,0,0,.22);
      background:rgba(10,10,10,.94);
    }
    #zamp-site .site-header.rolou .brand-icon{
      width:40px !important;min-width:40px !important;max-width:40px !important;
      height:40px !important;min-height:40px !important;max-height:40px !important;
    }
    #zamp-site .brand-icon{
      transition:transform .5s var(--ease-saida), width .32s var(--ease-saida),
                 height .32s var(--ease-saida);
    }

    /* ---------- Botao do cabecalho ----------
       Media 52px numa barra de 64px, entao sobravam 6px de preto acima e abaixo,
       contra os 8px do icone. A 48px o botao fica na altura exata do icone e a
       respiracao passa a ser a mesma dos dois lados. Ao rolar, a barra encolhe
       para 58px e o icone para 40px: o botao acompanha. */
    #zamp-site .site-header .btn{
      min-height:48px;
      padding:0 20px;
      font-size:.95rem;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease,
                 min-height .32s var(--ease-saida), padding .32s var(--ease-saida);
    }
    #zamp-site .site-header .btn .arrow{
      width:26px;
      height:26px;
      font-size:.92rem;
    }
    #zamp-site .site-header.rolou .btn{
      min-height:40px;
      padding:0 17px;
    }
    #zamp-site .site-header.rolou .btn .arrow{
      width:23px;
      height:23px;
    }

    /* ---------- Microinteracoes ---------- */
    /* Link de menu: fio laranja que cresce da esquerda. */
    #zamp-site .nav-links a{position:relative}
    #zamp-site .nav-links a::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-6px;
      height:2px;
      background:var(--accent);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .24s var(--ease-saida);
    }
    #zamp-site .nav-links a:hover::after,
    #zamp-site .nav-links a:focus-visible::after,
    #zamp-site .nav-links a.active::after{transform:scaleX(1)}

    /* Seta dos botoes: sai na diagonal junto com o hover. */
    #zamp-site .btn .arrow{
      transition:transform .22s var(--ease-saida), background .22s var(--ease-saida);
    }
    #zamp-site .btn:hover .arrow,
    #zamp-site .btn:focus-visible .arrow{transform:translate3d(2px,-2px,0)}

    /* Setas do portfolio. */
    #zamp-site .icon-btn{
      transition:transform .22s var(--ease-saida), background .22s var(--ease-saida),
                 color .22s var(--ease-saida), border-color .22s var(--ease-saida);
    }
    #zamp-site .icon-btn:hover{transform:scale(1.07)}
    #zamp-site .icon-btn:active{transform:scale(.96)}

    /* Numero do diferencial. */
    #zamp-site .why-index{
      transition:transform .28s var(--ease-saida), background .28s var(--ease-saida);
    }
    #zamp-site .why-item:hover .why-index{
      transform:scale(1.12) rotate(-6deg);
      background:var(--accent);
    }

    /* Foto dos diferenciais: aproxima devagar dentro da moldura. */
    #zamp-site .why-photo{
      transition:transform 1.1s var(--ease-suave);
    }
    #zamp-site .why-frame:hover .why-photo{transform:scale(1.045)}

    /* Miniatura do portfolio. */

    /* Links do rodape. */
    #zamp-site .footer-col a{
      display:inline-block;
      transition:transform .22s var(--ease-saida), color .22s var(--ease-saida);
    }
    #zamp-site .footer-col a:hover,
    #zamp-site .footer-col a:focus-visible{transform:translate3d(4px,0,0);color:var(--accent)}

    /* ---------- Servicos mais dinamicos ----------
       Grade assimetrica, o card do meio sobe e o terceiro desce. Ao passar o
       ponteiro na grade, os cards nao apontados recuam e o apontado avanca,
       entao a secao reage inteira em vez de so o card sob o cursor. */
    @media(min-width:1021px){
      #zamp-site .service-grid{
        grid-template-columns:1.04fr 1.2fr 1.04fr;
        align-items:start;
        padding-bottom:24px;
      }

      /* Deslocamento base de cada card: e ele que da a assimetria da grade. */
      #zamp-site .service-grid .service-card{--base-y:0px}
      #zamp-site .service-grid .service-card.featured{--base-y:-26px}
      #zamp-site .service-grid .service-card:nth-child(3){--base-y:16px}

      /* Repouso. Precisa passar de .reveal.visible, que zera o transform. */
      #zamp-site .service-grid .service-card.reveal,
      #zamp-site .service-grid .service-card.reveal.visible{
        transform:translate3d(0,var(--base-y),0);
        transition:transform .42s var(--ease-saida), opacity .42s var(--ease-saida);
      }

      /* A entrada vem de keyframe, e nao de transicao, para nao disputar a
         mesma propriedade com o transform de repouso e com o hover. */
      #zamp-site .service-grid .service-card.reveal.visible{
        animation:zampCardEntra var(--reveal-t,.62s) var(--reveal-e,var(--ease-saida)) var(--reveal-d,0s) backwards;
      }

      /* Reacao ao ponteiro: a grade inteira responde, nao so o card apontado. */
      #zamp-site .service-grid:hover .service-card.reveal,
      #zamp-site .service-grid:focus-within .service-card.reveal{
        transform:translate3d(0,var(--base-y),0) scale(.978);
        opacity:.66;
      }
      #zamp-site .service-grid:hover .service-card.reveal:hover,
      #zamp-site .service-grid:focus-within .service-card.reveal:focus-within{
        transform:translate3d(0,calc(var(--base-y) - 12px),0) scale(1);
        opacity:1;
      }
    }
    @keyframes zampCardEntra{
      from{opacity:0;transform:translate3d(0,calc(var(--base-y,0px) + var(--reveal-y,26px)),0)}
      to{opacity:1;transform:translate3d(0,var(--base-y,0px),0)}
    }

    /* Fio laranja que atravessa o topo do card apontado. */
    #zamp-site .service-card{position:relative;isolation:isolate}
    #zamp-site .service-card::before{
      content:"";
      position:absolute;
      left:0;right:0;top:0;
      height:3px;
      z-index:4;
      background:var(--accent);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .46s var(--ease-saida);
      pointer-events:none;
    }
    #zamp-site .service-card:hover::before,
    #zamp-site .service-card:focus-within::before{transform:scaleX(1)}
    #zamp-site .service-card.featured::before{background:#0A0A0A}

    /* Luz que segue o ponteiro dentro do card. As coordenadas chegam do JS. */
    #zamp-site .service-card::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background:radial-gradient(240px circle at var(--luz-x,50%) var(--luz-y,50%),
                 rgba(255,255,255,.13), transparent 62%);
      opacity:0;
      transition:opacity .3s var(--ease-saida);
      pointer-events:none;
    }
    #zamp-site .service-card:hover::after{opacity:1}
    #zamp-site .service-card.featured::after{
      background:radial-gradient(240px circle at var(--luz-x,50%) var(--luz-y,50%),
                 rgba(255,255,255,.2), transparent 62%);
    }
    #zamp-site .service-top,
    #zamp-site .service-body{position:relative;z-index:2}

    /* Pastinha do card: abre um pouco mais e com tempos diferentes por camada. */
    #zamp-site .folder-file{transition:transform .48s var(--ease-saida), opacity .48s var(--ease-saida)}
    #zamp-site .folder-file.file-b{transition-duration:.38s}
    #zamp-site .folder-front{transition:transform .42s var(--ease-saida)}
    #zamp-site .service-card:hover .file-a{transform:translateX(-50%) translateY(-34px) rotate(-3deg) scale(.9)}
    #zamp-site .service-card:hover .file-b{transform:translateX(-50%) translateY(-17px) rotate(2.5deg) scale(.96)}
    #zamp-site .service-card:hover .folder-front{transform:translateY(-5px)}

    /* ---------- Preferencia por menos movimento ----------
       Absoluto: nada gira, nada respira, nada desliza. */
    @media (prefers-reduced-motion: reduce){
      #zamp-site .hero-shape,
      #zamp-site .hero-shape .blob,
      #zamp-site .hero-intro > *,
      #zamp-site .hero-intro-visual,
      #zamp-site .why-content.visible .why-item,
      #zamp-site .service-grid .service-card.reveal.visible{
        animation:none !important;
      }
      #zamp-site .hero-shape{transform:none !important}
      #zamp-site .reveal,
      #zamp-site .reveal.visible{opacity:1 !important;transition:none !important}
      #zamp-site .reveal:not(.service-card),
      #zamp-site .reveal.visible:not(.service-card){transform:none !important}
      #zamp-site .service-grid:hover .service-card.reveal,
      #zamp-site .service-grid:focus-within .service-card.reveal{
        transform:translate3d(0,var(--base-y),0);
        opacity:1;
      }
      #zamp-site .service-card::after{display:none}
    }

    /* ==========================================================
       versao-1.1 · catalogo de servicos, selo e portfolio real
       ========================================================== */

    /* ---------- Os outros seis servicos do catalogo ----------
       Lista de duas colunas, nao mais um card por servico: os tres cards de
       cima carregam o peso visual e estes entram como leitura densa, com fio
       no topo em vez de caixa. Assim a secao cresce sem virar nove caixas
       iguais em grade. */
    #zamp-site .services-extra{
      margin-top:64px;
      padding-top:38px;
      border-top:1px solid rgba(255,255,255,.16);
    }
    #zamp-site .services-extra-title{
      margin:0 0 26px;
      font-size:clamp(1.1rem,1.7vw,1.35rem);
      font-weight:800;
      letter-spacing:-.01em;
      color:#fff;
    }
    #zamp-site .extra-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:2px 48px;
    }
    #zamp-site .extra-item{
      position:relative;
      padding:22px 0 24px;
      border-top:1px solid rgba(255,255,255,.14);
      transition:transform .34s var(--ease-saida);
    }
    #zamp-site .extra-item::before{
      content:"";
      position:absolute;
      left:0;right:0;top:-1px;
      height:2px;
      background:var(--accent);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .42s var(--ease-saida);
    }
    #zamp-site .extra-item:hover::before,
    #zamp-site .extra-item:focus-within::before{transform:scaleX(1)}
    #zamp-site .extra-item:hover{transform:translate3d(6px,0,0)}
    #zamp-site .extra-item h4{
      margin:0 0 7px;
      font-size:1.06rem;
      font-weight:750;
      color:#fff;
      letter-spacing:-.01em;
    }
    #zamp-site .extra-item p{
      margin:0;
      color:#b9b9b9;
      font-size:.94rem;
      max-width:46ch;
    }

    /* Irmaos com distancia, duracao, atraso e curva proprios. */
    #zamp-site .extra-item:nth-child(1){--reveal-y:18px;--reveal-t:.5s;--reveal-d:0s}
    #zamp-site .extra-item:nth-child(2){--reveal-y:28px;--reveal-t:.64s;--reveal-d:.06s;--reveal-e:var(--ease-suave)}
    #zamp-site .extra-item:nth-child(3){--reveal-y:22px;--reveal-t:.56s;--reveal-d:.13s}
    #zamp-site .extra-item:nth-child(4){--reveal-y:32px;--reveal-t:.7s;--reveal-d:.19s;--reveal-e:cubic-bezier(.18,.86,.3,1)}
    #zamp-site .services-extra-title{--reveal-y:14px;--reveal-t:.48s}

    @media(max-width:760px){
      #zamp-site .services-extra{margin-top:44px;padding-top:28px}
      #zamp-site .extra-grid{grid-template-columns:1fr;gap:0}
      #zamp-site .extra-item p{max-width:none}
    }

    /* ---------- Selo Google Ads Search ----------
       Fica na secao de credibilidade, junto dos diferenciais. O selo tem anel
       claro e a secao tem fundo cinza claro, entao ele senta sobre uma pastilha
       branca para nao sumir no fundo. */
    #zamp-site .credenziale{
      display:flex;
      align-items:center;
      gap:18px;
      margin-top:28px;
      padding:18px 22px 18px 18px;
      background:#fff;
      border:1px solid #e2e2e2;
      border-radius:20px;
    }
    #zamp-site .credenziale-sigillo{
      width:92px;
      height:92px;
      flex:0 0 auto;
      object-fit:contain;
      transition:transform .6s var(--ease-saida);
    }
    #zamp-site .credenziale:hover .credenziale-sigillo{transform:rotate(8deg)}
    #zamp-site .credenziale h3{
      margin:0 0 4px;
      font-size:1.02rem;
      font-weight:750;
    }
    #zamp-site .credenziale p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    #zamp-site .credenziale{--reveal-y:16px;--reveal-t:.56s;--reveal-d:.56s}

    @media(max-width:460px){
      #zamp-site .credenziale{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        text-align:left;
      }
    }

    /* ---------- Portfolio: screenshot real no lugar da maquete ----------
       O arquivo e 16:9, entao a caixa e 16:9 e a imagem entra inteira. Sem
       min-height fixa: a altura sai da largura do card. */
    #zamp-site .project-thumb{
      min-height:0;
      padding:0;
      display:block;
      aspect-ratio:16/9;
      background:#ededed;
      border-bottom:1px solid #e1e1e1;
    }
    #zamp-site .project-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top center;
      transition:transform .65s var(--ease-saida);
    }
    #zamp-site .project-card:hover .project-thumb img,
    #zamp-site .project-card:focus-visible .project-thumb img{
      transform:scale(1.04);
    }
    #zamp-site .project-info h3{letter-spacing:-.02em}

    /* ---------- Modal do projeto ---------- */
    #zamp-site .modal-visual{
      min-height:0;
      padding:0;
      overflow:hidden;
      background:#ededed;
      aspect-ratio:16/9;
      display:block;
    }
    #zamp-site .modal-visual img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top center;
    }
    #zamp-site .modal-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    #zamp-site .modal-actions .btn{flex:0 1 auto}

    @media(max-width:460px){
      #zamp-site .modal-actions{display:grid}
      #zamp-site .modal-actions .btn{width:100%}
    }

    @media (prefers-reduced-motion: reduce){
      #zamp-site .extra-item,
      #zamp-site .extra-item:hover,
      #zamp-site .credenziale:hover .credenziale-sigillo,
      #zamp-site .project-card:hover .project-thumb img{transform:none}
    }