.eyebrow-violet { color: var(--violet); }

.process-grid li > .process-icon { width: 48px; height: 48px; }
.process-icon svg,
.tech-icon svg,
.social-links svg,
.whatsapp-float svg,
.back-to-top svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.process-icon svg { width: 23px; height: 23px; }

.tech-groups > div { position: relative; padding: 26px 24px; }
.tech-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 11px; background: rgba(36,20,85,.08); color: var(--violet); }
.tech-icon svg { width: 22px; height: 22px; }
.contact-note { display: inline-flex; margin-top: 28px; padding: 10px 14px; border: 1px solid rgba(0,231,165,.25); border-radius: 8px; color: var(--accent) !important; font: 600 12px Sora,sans-serif; }

.footer-grid { grid-template-columns: .8fr .8fr 1.4fr; align-items: start; }
.social-links { display: grid; grid-template-columns: repeat(2,minmax(150px,1fr)); gap: 14px 24px; }
.social-links a { display: flex; align-items: center; gap: 9px; color: #b5aebe; transition: .2s; }
.social-links svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

.whatsapp-float { width: 58px; height: 58px; background: #25d366; color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.32); }
.whatsapp-float:hover { color: #fff; filter: none; transform: scale(1.08); }
.whatsapp-float svg { width: 33px; height: 33px; fill: currentColor; stroke: none; }
.contact-whatsapp { width: fit-content; margin-top: 30px; }
.contact-whatsapp svg { width: 22px; height: 22px; flex: none; }
.service-item strong { display: inline-block; margin-top: 12px; color: var(--accent); font: 700 10px Sora,sans-serif; letter-spacing: .02em; }
.service-item:hover h3 { color: var(--accent); }
.home-contact-cta { background: linear-gradient(135deg,var(--violet),var(--ink)); }
.home-contact-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.home-contact-cta h2 { max-width: 760px; margin: 0; font-size: clamp(31px,4vw,48px); line-height: 1.15; letter-spacing: -.04em; }
.home-contact-cta .button { flex: none; }

.hero-visual { position: relative; width: min(100%,650px); justify-self: end; }
.hero-showcase { position: relative; display: grid; place-items: center; min-height: 520px; isolation: isolate; }
.hero-showcase::before { content: ""; position: absolute; z-index: -3; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(36,20,85,.95) 0,rgba(36,20,85,.55) 43%,transparent 70%); filter: blur(2px); }
.hero-showcase::after { content: ""; position: absolute; z-index: -2; inset: 12% 2% 10% 8%; border: 1px solid rgba(0,231,165,.2); border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; background: linear-gradient(145deg,rgba(0,231,165,.06),rgba(36,20,85,.18)); transform: rotate(-6deg); }
.showcase-frame { position: relative; z-index: 2; width: 114%; margin-right: -12%; transform: perspective(1100px) rotateY(-4deg) rotateX(1deg); filter: drop-shadow(0 34px 35px rgba(0,0,0,.46)); transition: transform .45s ease,filter .45s ease; }
.hero-showcase:hover .showcase-frame { transform: perspective(1100px) rotateY(-1deg) rotateX(0) translateY(-6px); filter: drop-shadow(0 42px 42px rgba(0,0,0,.52)); }
.showcase-frame img { width: 100%; height: auto; object-fit: contain; }
.showcase-label { position: absolute; z-index: 4; top: 13%; left: -3%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(244,241,234,.15); border-radius: 12px; background: rgba(10,0,20,.86); box-shadow: 0 16px 35px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.showcase-label > span { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(0,231,165,.12); }
.showcase-label small,.showcase-label strong { display: block; line-height: 1.25; }
.showcase-label small { margin-bottom: 3px; color: #aaa3b5; font: 500 9px Sora,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.showcase-label strong { color: var(--paper); font: 700 13px Sora,sans-serif; }
.showcase-details { position: absolute; z-index: 4; right: -2%; bottom: 10%; display: flex; gap: 8px; }
.showcase-details span { padding: 8px 11px; border: 1px solid rgba(0,231,165,.25); border-radius: 999px; background: rgba(23,18,37,.9); color: #cfc9d4; font: 600 9px Sora,sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.showcase-orbit { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(0,231,165,.18); }
.showcase-orbit-one { width: 72%; aspect-ratio: 1; top: 5%; right: 0; }
.showcase-orbit-two { width: 13px; height: 13px; top: 12%; right: 15%; border: 0; background: var(--accent); box-shadow: 0 0 25px rgba(0,231,165,.8); }

.about-mark { position: relative; min-height: 540px; display: block; padding: 7px; overflow: visible; isolation: isolate; border: 1px solid rgba(36,20,85,.08); border-radius: 22px; background: var(--violet); box-shadow: 0 24px 50px rgba(36,20,85,.15); }
.about-mark::before { content: ""; position: absolute; z-index: -1; inset: 20px -9px -10px 18px; border: 1px solid rgba(36,20,85,.12); border-radius: 22px; transform: rotate(2deg); }
.about-photo { position: absolute; inset: 7px; overflow: hidden; border-radius: 15px; background: var(--black); }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,0,20,.88) 0,rgba(10,0,20,.18) 42%,transparent 68%),linear-gradient(110deg,rgba(36,20,85,.28),transparent 58%); pointer-events: none; }
.about-photo img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 68% center; transform: scale(1.025); filter: saturate(.9) contrast(1.04); transition: transform .6s ease,filter .6s ease; }
.about-mark:hover .about-photo img { transform: scale(1.055); filter: saturate(1) contrast(1.04); }
.about-mark > p { position: absolute; z-index: 3; left: 38px; right: 38px; bottom: 34px; margin: 0; color: var(--paper); font: 600 18px Sora,sans-serif; }
.about-identity { position: absolute; z-index: 4; top: 36px; right: -22px; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgba(244,241,234,.15); border-radius: 12px; background: rgba(10,0,20,.88); box-shadow: 0 16px 35px rgba(10,0,20,.25); backdrop-filter: blur(12px); }
.about-identity > span { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(0,231,165,.13); }
.about-identity strong,.about-identity small { display: block; line-height: 1.25; }
.about-identity strong { color: var(--paper); font: 700 12px Sora,sans-serif; }
.about-identity small { margin-top: 3px; color: #aaa3b5; font: 500 9px Sora,sans-serif; }
.about-accent { position: absolute; z-index: 4; left: -9px; top: 74px; width: 4px; height: 86px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 24px rgba(0,231,165,.45); }

.back-to-top { position: fixed; z-index: 90; left: 22px; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(244,241,234,.24); border-radius: 50%; background: rgba(23,18,37,.88); color: var(--accent); box-shadow: 0 10px 25px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translateY(15px); transition: .25s; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--violet); border-color: var(--accent); }
.back-to-top svg { width: 22px; height: 22px; }

.toast { position: fixed; z-index: 200; right: 24px; top: 100px; width: min(390px,calc(100% - 48px)); display: grid; grid-template-columns: 38px 1fr auto; align-items: start; gap: 13px; padding: 18px; background: var(--paper); color: var(--ink); border: 1px solid rgba(36,20,85,.12); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 22px 55px rgba(10,0,20,.3); opacity: 0; visibility: hidden; transform: translateX(120%); transition: .35s; }
.toast.show { opacity: 1; visibility: visible; transform: none; }
.toast.error { border-left-color: #b43d5c; }
.toast-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,231,165,.14); color: #087c5d; }
.toast-icon::before { content: "\2713"; font-weight: 800; }
.toast.error .toast-icon { background: rgba(180,61,92,.12); color: #b43d5c; }
.toast.error .toast-icon::before { content: "!"; }
.toast strong { display: block; font: 700 13px Sora,sans-serif; margin: 1px 0 3px; }
.toast p { margin: 0; color: #655d6d; font-size: 12px; line-height: 1.5; }
.toast button { border: 0; background: transparent; color: #6f6875; font-size: 23px; line-height: 1; cursor: pointer; padding: 0; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .social-links { grid-column: auto; }
  .hero-actions .button { width: fit-content; }
  .hero-visual { justify-self: center; }
  .hero-showcase { min-height: 470px; }
  .showcase-frame { width: 105%; margin-right: 0; }
  .about-mark { width: min(100%,520px); min-height: 560px; margin-inline: auto; }
  .home-contact-cta .container { align-items: flex-start; flex-direction: column; }

  .site-header,
  .site-header.scrolled {
    background: #0a0014;
    border-color: rgba(244,241,234,.1);
    backdrop-filter: none;
  }
  .navbar .brand {
    position: relative;
    z-index: 102;
  }
  .menu-toggle {
    position: relative;
    z-index: 102;
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(244,241,234,.16);
    border-radius: 10px;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 22px;
    margin: 3px 0;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 101;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 112px 28px 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    background: #0a0014;
    background-image: radial-gradient(circle at 100% 0, rgba(36,20,85,.75), transparent 42%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .3s ease, opacity .25s ease, visibility .3s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-links > a:not(.button) {
    width: 100%;
    padding: 18px 2px;
    border-bottom: 1px solid rgba(244,241,234,.11);
    color: var(--paper);
    font-size: 18px;
    line-height: 1.25;
  }
  .nav-links > a:not(.button):first-child {
    border-top: 1px solid rgba(244,241,234,.11);
  }
  .nav-links > .button {
    width: 100%;
    margin-top: 28px;
    padding: 16px 18px;
    font-size: 14px;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .social-links { grid-template-columns: 1fr; }
  .back-to-top { left: 15px; bottom: 15px; }
  .hero-actions .button { width: 100%; }
  .hero-showcase { min-height: 350px; }
  .showcase-frame { width: 110%; }
  .showcase-label { top: 8%; left: 0; padding: 10px 12px; }
  .showcase-details { right: 0; bottom: 5%; flex-direction: column; align-items: flex-end; }
  .showcase-details span { padding: 7px 9px; font-size: 8px; }
  .about-mark { width: 100%; min-height: 440px; padding: 6px; }
  .about-photo { inset: 6px; }
  .about-mark::before { inset: 16px -5px -7px 13px; }
  .about-identity { top: 26px; right: -5px; padding: 10px 12px; }
  .about-mark > p { left: 28px; right: 28px; bottom: 27px; font-size: 16px; }
  .about-accent { left: -5px; top: 62px; height: 68px; }
  .contact-whatsapp { width: 100%; }
  .home-contact-cta .button { width: 100%; }
  .toast { left: 14px; right: 14px; max-width: none; transform: translateY(-130%); }
  .toast.show { transform: none; }
}