/* =========================================================
   Vexa Studio — visual 2.1: aparelhos, 24 horas, bento e animações
   ========================================================= */

/* ---------- Hero: notebook + celular ---------- */
.hero__devices { position: relative; height: 520px; }
.device-laptop { position: absolute; left: 0; right: 40px; top: 40px; animation: floatY 7s ease-in-out infinite; }
.device-laptop__screen {
  position: relative; border-radius: 16px 16px 0 0; padding: 12px 12px 0; background: #0c0e16;
  border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 120px -30px rgba(var(--primary-rgb), .6);
}
.device-laptop__screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; }
.device-laptop__base { height: 18px; margin: 0 -7%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #2a2e3a, #12141c); position: relative; }
.device-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #0a0b10; }
.device-phone {
  position: absolute; right: 0; bottom: 10px; width: 170px; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 7px; z-index: 2;
  background: #0c0e16; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 40px 80px -20px rgba(0,0,0,.9);
  animation: floatY 6s ease-in-out infinite reverse;
}
.device-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; display: block; }
.device-phone__notch { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 54px; height: 14px; border-radius: 10px; background: #000; z-index: 1; }
@keyframes floatY { 50% { transform: translateY(-14px); } }
.float-card--timer { top: 0; left: -24px; }
.float-card--timer img { width: 40px; height: 40px; }
.hero__devices .float-card--deploy { bottom: 40px; left: -30px; }
.hero__devices .float-card--perf { top: auto; right: 150px; bottom: -14px; }
.countdown { font-family: var(--font-mono) !important; font-size: 18px !important; letter-spacing: .02em; color: #fff; }

/* ---------- Seção 24 horas ---------- */
.fast { position: relative; padding: 140px 0; overflow: hidden; }
.fast__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(var(--primary-rgb), .18), transparent 70%); pointer-events: none; }
.fast__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.fast__title { font: 700 clamp(38px, 5vw, 64px)/1.05 var(--font-display); letter-spacing: -0.03em; margin: 14px 0 40px; }
.clock { position: relative; width: min(380px, 100%); aspect-ratio: 1; }
.clock svg { width: 100%; height: 100%; overflow: visible; }
.clock__ticks line { stroke: rgba(255,255,255,.25); stroke-width: 2; stroke-linecap: round; }
.clock__track { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 14; }
.clock__bar { fill: none; stroke: url(#clockGrad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), .7)); transition: stroke-dashoffset .15s linear; }
.clock__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.clock__center strong { font: 700 clamp(64px, 8vw, 104px)/1 var(--font-display); letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clock__center small { color: var(--muted); font-size: 15px; margin-top: 8px; }
.fast__steps { list-style: none; display: grid; gap: 16px; position: relative; }
.fast__steps::before { content: ""; position: absolute; left: 47px; top: 40px; bottom: 40px; width: 2px; background: var(--border); }
.fstep { position: relative; display: flex; gap: 22px; align-items: center; padding: 22px 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); transition: background .5s, border-color .5s, transform .6s var(--ease) !important; }
.fstep__icon { width: 46px; height: 46px; flex-shrink: 0; filter: grayscale(1) opacity(.45); transition: filter .6s, transform .6s var(--ease); position: relative; z-index: 1; }
.fstep__time { font: 600 13px var(--font-mono); color: var(--muted); transition: color .5s; }
.fstep h3 { font: 600 22px var(--font-display); margin: 2px 0 2px; }
.fstep p { color: var(--muted); font-size: 15px; }
.fstep.is-lit { background: linear-gradient(120deg, rgba(var(--primary-rgb), .16), rgba(255,255,255,.03)); border-color: rgba(var(--primary-rgb), .45); transform: translateX(8px) !important; }
.fstep.is-lit .fstep__icon { filter: none; transform: scale(1.12) rotate(-6deg); }
.fstep.is-lit .fstep__time { color: var(--secondary); }

/* ---------- Serviços em bento com imagens ---------- */
.services { grid-template-columns: repeat(6, 1fr); }
.services > .service-card { grid-column: span 3; }
.services > .service-card:nth-child(4n+1), .services > .service-card:nth-child(4n+4) { grid-column: span 4; }
.services > .service-card:nth-child(4n+2), .services > .service-card:nth-child(4n+3) { grid-column: span 2; }
.services--3 > .service-card { grid-column: span 2 !important; }
.service-card { display: flex; flex-direction: column; min-height: 360px; padding: 32px; }
.service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.icon3d { display: block; width: 56px; height: 56px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); transition: transform .6s var(--ease); }
.service-card:hover .icon3d { transform: scale(1.12) rotate(-8deg); }
.service-card__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); font-size: 18px; transition: all .4s var(--ease); }
.service-card:hover .service-card__go { background: var(--primary); border-color: var(--primary); transform: rotate(-45deg); }
.service-card h3 { font-size: 26px; margin-bottom: 8px; }
.service-card p { margin-bottom: 16px; }
.service-card__badge { align-self: flex-start; font: 600 12px var(--font-mono); padding: 6px 12px; border-radius: 999px; color: var(--secondary); background: rgba(var(--secondary-rgb), .1); border: 1px solid rgba(var(--secondary-rgb), .25); }
.service-card__shot { margin: 28px -32px -32px; flex: 1; min-height: 170px; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding: 0 32px; }
.service-card__shot::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(6,7,12,.6)); pointer-events: none; }
.mini-browser { width: 100%; border-radius: 12px 12px 0 0; background: #0c0e16; border: 1px solid rgba(255,255,255,.12); border-bottom: 0; padding: 22px 0 0; position: relative; box-shadow: 0 -10px 40px -10px rgba(var(--primary-rgb), .35); transition: transform .8s var(--ease); }
.mini-browser i { position: absolute; top: 8px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 12px 0 #febc2e, 24px 0 #28c840; }
.mini-browser img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.mini-phone { width: 150px; border-radius: 26px 26px 0 0; padding: 6px 6px 0; background: #0c0e16; border: 1px solid rgba(255,255,255,.16); border-bottom: 0; transition: transform .8s var(--ease); }
.mini-phone img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: top; border-radius: 20px 20px 0 0; display: block; }
.service-card:hover .mini-browser, .service-card:hover .mini-phone { transform: translateY(-10px); }
.service-card__num { display: none; }

/* ---------- Projetos na home: só imagem + nome ---------- */
.projects--home .project__info p, .projects--home .project__foot .tags { display: none; }
.projects--home .project__info { padding: 22px 26px 26px; }
.projects--home .project h3 { margin-bottom: 6px; }

/* ---------- Ícones 3D em outros lugares ---------- */
.phero__icon { background: none; border: 0; width: auto; height: auto; }
.phero__icon .icon3d { width: 80px; height: 80px; }
.srow { grid-template-columns: 50px 72px 1.2fr 1fr 56px; }
.srow__icon .icon3d { width: 64px; height: 64px; }
.srow:hover .icon3d { transform: scale(1.1) rotate(-8deg); }
.nav-dd__icon { background: rgba(255,255,255,.05); border-color: var(--border); }
.nav-dd__icon .icon3d { width: 28px; height: 28px; filter: none; }

/* ---------- Menu do celular: serviços em sanfona ---------- */
.nav-dd__btn { display: none; }
@media (max-width: 768px) {
  .nav-dd { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
  .nav-dd__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: transform .4s var(--ease), background .3s; }
  .nav-dd.is-open .nav-dd__btn { transform: rotate(180deg); background: var(--primary); border-color: var(--primary); }
  .nav-dd__menu { flex-basis: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease) !important; padding: 0 !important; }
  .nav-dd.is-open .nav-dd__menu { grid-template-rows: 1fr; }
  .nav-dd__panel { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(340px, 86vw); margin: 0 auto; }
  .nav-dd.is-open .nav-dd__panel { padding-top: 14px !important; }
  .nav__links a.nav-dd__item { flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
  .nav-dd__item .nav-dd__icon { display: grid !important; width: 40px; height: 40px; background: none; border: 0; }
  .nav-dd__item .nav-dd__icon .icon3d { width: 34px; height: 34px; }
  .nav-dd__item strong { font: 600 13px/1.25 var(--font-body) !important; color: var(--text) !important; }
}

/* ---------- Títulos palavra por palavra ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.split.is-in .w > span, .is-in .split .w > span { transform: none; }
.split.reveal { opacity: 1; transform: none; }

/* ---------- Imagens: revelação e parallax ---------- */
.project__media, .case-showcase__stage, .post-card__media { clip-path: inset(0 0 0 0 round 0); }
.project.reveal .project__media { clip-path: inset(12% 6% 0 6% round 24px); transition: clip-path 1.2s var(--ease) .1s; }
.project.reveal.is-in .project__media { clip-path: inset(0 0 0 0 round 0); }
[data-parallax] { will-change: transform; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .hero__devices { height: 440px; max-width: 620px; }
  .fast__grid { grid-template-columns: 1fr; gap: 48px; }
  .clock { margin: 0 auto; }
  .fast__left { text-align: center; }
  .services > .service-card, .services > .service-card:nth-child(n) { grid-column: span 3; }
  .services--3 > .service-card { grid-column: span 3 !important; }
}
@media (max-width: 768px) {
  .hero__devices { height: 330px; margin-top: 24px; }
  .device-laptop { right: 30px; top: 30px; }
  .device-phone { width: 112px; border-radius: 22px; padding: 5px; }
  .device-phone img { border-radius: 17px; }
  .device-phone__notch { top: 9px; width: 36px; height: 10px; }
  .float-card--timer { left: -6px; top: -10px; }
  .hero__devices .float-card--deploy { display: none; }
  .hero__devices .float-card--perf { right: 90px; bottom: -20px; }
  .float-card { padding: 9px 12px; gap: 9px; }
  .float-card--timer img { width: 30px; height: 30px; }
  .countdown { font-size: 15px !important; }
  .fast { padding: 90px 0; }
  .clock { width: 260px; }
  .fast__steps::before { left: 41px; }
  .fstep { padding: 18px 20px; gap: 16px; }
  .fstep h3 { font-size: 19px; }
  .services { grid-template-columns: 1fr; }
  .services > .service-card, .services > .service-card:nth-child(n), .services--3 > .service-card { grid-column: auto !important; }
  .service-card { min-height: 0; padding: 26px; }
  .service-card__shot { margin: 22px -26px -26px; padding: 0 26px; min-height: 150px; }
  .srow { grid-template-columns: 1fr 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none !important; }
  .project.reveal .project__media { clip-path: none !important; }
  .device-laptop, .device-phone { animation: none; }
}