/* Portfolio v3: quiet, lightweight finishing touches.
   Only three decorative code fragments; CSS-only motion, zero dependencies. */

/* Keep the hero almost completely clean. */
.hero-card {
  isolation: isolate;
  background: linear-gradient(115deg, #192322 0%, #1d2b29 100%);
}
.hero-card::before, .hero-card::after,
.hero-photo-wrap::before, .photo-grain, .highlight-stroke::after,
.contact-shell::before, .contact-shell::after { display: none !important; }
.hero-card > .hero-text, .hero-card > .hero-photo-wrap { z-index: 2; }
.hero-photo-frame { box-shadow: none; }

/* Ambient, not a screen full of scrolling text. */
.ambient-code {
  position:absolute; inset:0; overflow:hidden; z-index:1;
  pointer-events:none; user-select:none;
}
.code-fragment {
  position:absolute; width:max-content; max-width:65%;
  color:#c8e9b4; opacity:.075;
  font:500 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.02em; white-space:nowrap;
  animation:calm-drift 27s ease-in-out infinite alternate;
}
.ambient-code--hero .code-1 { top:9%; left:53%; animation-delay:-4s; }
.ambient-code--hero .code-2 { top:48%; left:49%; animation-delay:-13s; }
.ambient-code--hero .code-3 { bottom:9%; left:42%; animation-delay:-20s; }
@keyframes calm-drift { from{transform:translateY(0)} to{transform:translateY(-9px)} }

/* Lower overall decoration and keep typographic content in focus. */
.hero-text h1 { letter-spacing:-.06em; }
.hero-text { padding-top:112px; }
.hero-description { max-width:445px; }
.hero-footer-line { opacity:.55; }
.trust-inner { min-height:118px; }
.section-pad { padding-block:112px 119px; }
.section-topline-right, .filters-helper { opacity:.65; }
.project-cover-button { border-radius:7px; }
.project-cover-button img { transition:transform .3s ease; }
.project-cover-button:hover img { transform:scale(1.02); }
.service-card:hover { background:#fff; }
.statement-inner { min-height:355px; }
.statement-small { opacity:.6; }
.about-decoration { display:none; }
.contact-shell { isolation:isolate; background:#202b29; }
.contact-shell > * { position:relative; z-index:1; }
.contact-shell .contact-desc { max-width:470px; }

/* WhatsApp remains immediately identifiable, without a pulsing glow or oversized banner. */
.whatsapp-float {
  position:fixed; z-index:80; right:25px; bottom:24px;
  display:flex; flex-direction:row-reverse; align-items:center; gap:11px;
  padding:7px 15px 7px 7px;
  background:#fff; color:#1e2a25;
  border:1px solid #e5e9e4; border-radius:999px;
  box-shadow:0 8px 25px rgba(13,27,18,.11);
  transition:transform .2s ease,box-shadow .2s ease;
  outline-offset:4px;
}
.whatsapp-float:hover,.whatsapp-float:focus-visible {
  transform:translateY(-3px);
  box-shadow:0 12px 29px rgba(13,27,18,.16);
}
.wa-copy { display:grid; gap:2px; text-align:left; white-space:nowrap; }
.wa-copy strong { font-family:var(--display); font-size:11px; font-weight:800; }
.wa-copy small { font-size:10px; color:#5e7566; }
.wa-icon {
  display:grid; place-items:center;
  width:45px; height:45px; flex:0 0 45px;
  background:#25d366; color:white; border-radius:50%;
}
.wa-icon svg { display:block; width:25px; height:25px; }
.wa-glow { display:none; }

@media(max-width:960px) {
  .hero-text { padding-top:75px; }
  .section-pad { padding-block:90px 95px; }
}
@media(max-width:700px) {
  .hero-text { padding-top:53px; }
  .ambient-code--hero .code-1, .ambient-code--hero .code-2 { display:none; }
  .ambient-code--hero .code-3 { left:35%; bottom:6%; opacity:.045; }
  .section-pad { padding-block:76px 82px; }
  .whatsapp-float {
    right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
    padding:6px 11px 6px 6px; gap:8px;
  }
  .wa-icon { width:42px; height:42px; flex-basis:42px; }
  .wa-icon svg { width:23px; height:23px; }
  .wa-copy strong { font-size:10px; }
  .wa-copy small { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .code-fragment { animation:none !important; }
  .whatsapp-float { transition:none; }
}