@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

*{box-sizing:border-box}
html{background:#08090c;color:#fff}
body{margin:0;min-height:100vh;background:#08090c;color:#fff;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
body{overflow-x:hidden}
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.1}
.ambient-a{top:-180px;left:-140px;background:#7b3cff}.ambient-b{right:-180px;top:35%;background:#ff2f2f}
#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{position:relative;z-index:1;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:58px 0 34px}
.profile{text-align:center;margin-bottom:42px}
.eyebrow{font:700 10px/1 Space Grotesk,sans-serif;letter-spacing:.24em;color:#777b83;margin-bottom:14px}
.eyebrow span{display:inline-block;width:4px;height:4px;border-radius:50%;background:#b78cff;margin:0 8px 2px}
h1{margin:0;font:800 clamp(34px,5vw,58px)/.98 Space Grotesk,sans-serif;letter-spacing:-.045em}
.handle{margin:10px 0 0;color:#9b9da3;font-size:14px}
.bio{margin:10px 0 22px;color:#666a72;font-size:13px}
.socials{display:flex;justify-content:center;align-items:center;gap:10px}
.socials a{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.035);display:grid;place-items:center;color:#fff;opacity:.9;transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease}
.socials a:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);opacity:1}
.socials svg{width:20px;height:20px;display:block;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.socials svg .svg-cut{fill:none;stroke:#08090c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.socials svg .fill-dot{fill:currentColor;stroke:none}
.socials a[aria-label="YouTube"] svg{width:22px;height:22px}.socials a[aria-label="Instagram"] svg{width:21px;height:21px}.socials a[aria-label="LinkedIn"] svg{width:21px;height:21px}.socials a[aria-label="X"] svg{width:21px;height:21px}
.section{margin-top:4px}.section-head{display:flex;align-items:center;gap:10px;margin:0 2px 12px;color:#737780;font:700 11px/1 Space Grotesk,sans-serif;letter-spacing:.18em}.section-head span{color:#b78cff}.section-head i{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent);flex:1}
.project-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.project-card{min-width:0;display:block;border:1px solid rgba(255,255,255,.13);border-radius:18px;overflow:hidden;background:#0c0e12;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.project-card:hover{border-color:rgba(255,255,255,.3);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.project-card .art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#080a0d;display:grid;place-items:center}
.project-card .art:before{content:"";position:absolute;inset:-18px;background:var(--art) center/cover no-repeat;filter:blur(18px);opacity:.25;transform:scale(1.08)}
.project-card img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:transform .55s ease}
.art-mel{--art:url("/static/images/projects/MELDASERRA%201.1.png")}.art-law{--art:url("/static/images/projects/LAW09%201.1.png")}.art-services{--art:url("/static/images/projects/KCUSERVICES%201.1.png")}
.project-card:hover img{transform:scale(1.01)}
.project-caption{min-height:58px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;background:linear-gradient(180deg,#11141a,#0b0d11)}
.project-caption strong{font:700 12px/1 Space Grotesk,sans-serif;letter-spacing:.05em}.project-caption span{font-size:9px;color:#737780;grid-column:1;margin-top:4px}.project-caption b{grid-column:2;grid-row:1/3;color:#999;font-size:15px;font-weight:500}
.feature-card{position:relative;display:block;height:470px;border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden;background:#090a0d;margin-bottom:16px;transition:transform .4s ease,border-color .3s ease,box-shadow .4s ease}
.feature-card:hover{border-color:rgba(255,255,255,.32);box-shadow:0 22px 55px rgba(0,0,0,.42)}
.feature-card>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.56),transparent 42%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.32));pointer-events:none}
.feature-copy{position:absolute;z-index:4;left:24px;bottom:21px;display:flex;flex-direction:column;text-shadow:0 2px 10px #000}
.feature-kicker{font:700 10px/1 Space Grotesk,sans-serif;letter-spacing:.25em;color:#ff4545;margin-bottom:5px}
.feature-copy strong{font:800 29px/1 Space Grotesk,sans-serif;letter-spacing:-.025em}.feature-copy small{font-size:11px;color:#d1d1d3;margin-top:6px}
.feature-arrow{position:absolute;z-index:5;right:16px;top:16px;width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.25);font-size:18px}
.reactor-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.reactor-line{fill:none;stroke:#ff2424;stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(255,0,0,.9)) drop-shadow(0 0 12px rgba(255,0,0,.5));stroke-dasharray:70 930;animation:reactor 2.8s linear infinite}
.line-b{stroke:#ff633d;stroke-width:1.2;stroke-dasharray:180 820;animation-duration:3.7s;animation-direction:reverse;opacity:.9}
@keyframes reactor{to{stroke-dashoffset:-1000}}
.crt{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen;opacity:.3}
.lab-leds{position:absolute;z-index:5;top:18px;left:20px;display:flex;gap:5px}.lab-leds i{width:6px;height:6px;border-radius:50%;background:#8cffc1;box-shadow:0 0 8px #8cffc1}.lab-leds i:nth-child(2n){background:#ffc45c;box-shadow:0 0 8px #ffc45c}.lab-leds i:nth-child(3n){background:#72a7ff;box-shadow:0 0 8px #72a7ff}
.book-card{position:relative;display:block;height:330px;border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden;background:#090a0d;transition:transform .4s ease,border-color .3s ease,box-shadow .4s ease}
.book-card:hover{border-color:rgba(255,255,255,.3);box-shadow:0 22px 55px rgba(0,0,0,.4)}
.book-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.book-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.12));pointer-events:none}
.book-copy{position:absolute;z-index:2;left:30px;top:50%;transform:translateY(-50%);max-width:380px;display:flex;flex-direction:column}
.book-copy>span{font:700 10px/1 Space Grotesk,sans-serif;letter-spacing:.22em;color:#c4c7ce;margin-bottom:10px}
.book-copy strong{font:800 clamp(28px,4vw,44px)/.95 Space Grotesk,sans-serif;letter-spacing:-.04em}
.book-copy small{margin-top:12px;color:#d0d2d6;font-size:12px;line-height:1.5}.book-copy b{align-self:flex-start;margin-top:16px;padding:9px 13px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:10px;letter-spacing:.08em}
footer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;color:#555960;font:600 9px/1 Space Grotesk,sans-serif;letter-spacing:.14em}footer i{width:3px;height:3px;background:#8b8f98;border-radius:50%}

@media(max-width:820px){
 .page{width:min(100% - 24px,560px);padding:34px 0 26px}.profile{margin-bottom:30px}
 .project-row{grid-template-columns:1fr;gap:12px}.project-card .art{aspect-ratio:16/8.8}
 .feature-card{height:300px;border-radius:18px}.feature-copy strong{font-size:24px}
 .book-card{height:300px}.book-copy{left:20px;max-width:280px}
}
@media(max-width:520px){
 .page{width:calc(100% - 18px);padding-top:28px}.socials{gap:7px}.socials a{width:40px;height:40px;border-radius:11px}
 .project-card .art{aspect-ratio:2.25/1}
 .project-card .art > svg{display:block !important}
 .project-card{border-radius:15px;-webkit-tap-highlight-color:transparent}
 .project-card:focus,.project-card:focus-visible,.project-card:active{outline:none !important}
 .project-card:active{box-shadow:0 18px 40px rgba(0,0,0,.3) !important}
 .project-caption{min-height:50px;padding:9px 11px}
 .project-caption strong{font-size:11px}
 .project-caption span{font-size:8px;margin-top:3px}
 .feature-card{height:240px}.feature-copy{left:18px;bottom:18px}.feature-copy strong{font-size:21px}.feature-copy small{font-size:10px}
 .book-card{height:270px}.book-copy{left:18px}.book-copy strong{font-size:28px}.book-copy small{font-size:11px}
}



/* SOCIAL ICONS — official-style treatment */

.socials svg{

  width:22px;

  height:22px;

  display:block;

  fill:currentColor;

  stroke:none;

  stroke-width:0;

}



.socials a[aria-label="TikTok"] svg{

  width:21px;

  height:21px;

}



.socials a[aria-label="Instagram"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="YouTube"] svg{

  width:23px;

  height:23px;

}



.socials a[aria-label="Snapchat"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="Spotify"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="LinkedIn"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="X"] svg{

  width:21px;

  height:21px;

}



/* remove old artificial cuts */

.socials svg .svg-cut{

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

}



.socials svg .fill-dot{

  fill:currentColor;

  stroke:none;

}




/* SOCIAL ICONS — official-style treatment */

.socials svg{

  width:22px;

  height:22px;

  display:block;

  fill:currentColor;

  stroke:none;

  stroke-width:0;

}



.socials a[aria-label="TikTok"] svg{

  width:21px;

  height:21px;

}



.socials a[aria-label="Instagram"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="YouTube"] svg{

  width:23px;

  height:23px;

}



.socials a[aria-label="Snapchat"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="Spotify"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="LinkedIn"] svg{

  width:22px;

  height:22px;

}



.socials a[aria-label="X"] svg{

  width:21px;

  height:21px;

}



/* remove old artificial cuts */

.socials svg .svg-cut{

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

}



.socials svg .fill-dot{

  fill:currentColor;

  stroke:none;

}




/* REAL SOCIAL LOGOS */

.socials svg{

  width:22px;

  height:22px;

  display:block;

  stroke-width:initial;

}



.socials a[aria-label="TikTok"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a[aria-label="Instagram"] svg{

  fill:none;

  stroke:currentColor;

}



.socials a[aria-label="YouTube"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a[aria-label="Snapchat"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a[aria-label="Spotify"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a[aria-label="LinkedIn"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a[aria-label="X"] svg{

  fill:currentColor;

  stroke:none;

}



.socials a:hover svg{

  transform:scale(1.05);

}




/* FINAL SOCIAL LOGO FIX */

.socials svg{

  display:block !important;

  width:22px !important;

  height:22px !important;

  transform:none;

}



.socials a[aria-label="YouTube"] svg{

  width:23px !important;

  height:23px !important;

}



.socials a[aria-label="Spotify"] svg{

  width:23px !important;

  height:23px !important;

}



.socials a[aria-label="LinkedIn"] svg{

  width:22px !important;

  height:22px !important;

}



.socials a:hover svg{

  transform:scale(1.05);

}




.socials a[aria-label="TikTok"] svg{

  width:21px !important;

  height:21px !important;

  transform:translate(1px,1px);

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translate(1px,1px) scale(1.05);

}




.socials a[aria-label="TikTok"] svg{

  width:21px !important;

  height:21px !important;

  transform:translate(1px,4px) !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translate(1px,4px) scale(1.05) !important;

}




.socials a[aria-label="TikTok"]{

  display:grid !important;

  place-items:center !important;

}



.socials a[aria-label="TikTok"] svg{

  position:static !important;

  margin:0 !important;

  transform:none !important;

  width:20px !important;

  height:20px !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:scale(1.05) !important;

}




.socials a[aria-label="TikTok"] svg{

  transform:translateX(1px) !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translateX(1px) scale(1.05) !important;

}




.socials a[aria-label="TikTok"] svg{

  transform:translateX(-1px) !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translateX(-1px) scale(1.05) !important;

}




.socials a[aria-label="TikTok"] svg{

  transform:translateX(-0.5px) !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translateX(-0.5px) scale(1.05) !important;

}




.socials a[aria-label="TikTok"] svg{

  width:23px !important;

  height:23px !important;

  transform:translateX(-0.5px) !important;

}



.socials a[aria-label="TikTok"]:hover svg{

  transform:translateX(-0.5px) scale(1.05) !important;

}




/* PROJECT IMAGES — FIXED FRAMING */

.project-card .art{

  aspect-ratio:16/9 !important;

  overflow:hidden !important;

  position:relative;

}



.project-card img{

  width:100% !important;

  height:100% !important;

  object-fit:cover !important;

  object-position:center !important;

  display:block !important;

  transform:none;

}



.project-card:hover img{

  transform:scale(1.015) !important;

}






/* PROJECT ART — SQUARE LOGOS / NO CROPPING */

.project-card .art{

  aspect-ratio:16/9 !important;

  overflow:hidden !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  background:#080a0d !important;

  position:relative !important;

}



.project-card .art:before{

  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  background:var(--art) center/cover no-repeat !important;

  filter:blur(22px) brightness(.45) !important;

  opacity:.22 !important;

  transform:scale(1.12) !important;

}



.project-card img{

  position:relative !important;

  z-index:2 !important;

  width:auto !important;

  height:86% !important;

  max-width:86% !important;

  object-fit:contain !important;

  object-position:center !important;

  display:block !important;

  transform:none !important;

}



.project-card:hover img{

  transform:scale(1.025) !important;

}






/* PROJECT CARDS — COMPACT IMAGE AREA */

.project-card .art{

  aspect-ratio:4/3 !important;

  height:auto !important;

  min-height:0 !important;

  overflow:hidden !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

}



.project-card img{

  width:100% !important;

  height:100% !important;

  max-width:none !important;

  object-fit:cover !important;

  object-position:center !important;

}






/* MEL DA SERRA — square image area */



.project-card .art-mel{

  aspect-ratio:1/1 !important;

}



.project-card .art-mel img{

  width:100% !important;

  height:100% !important;

  max-width:none !important;

  max-height:none !important;

  object-fit:contain !important;

  object-position:center !important;

}



/* LAW 09 — square image area */

.project-card .art-law{

  aspect-ratio:1/1 !important;

}



.project-card .art-law img{

  width:100% !important;

  height:100% !important;

  object-fit:contain !important;

  object-position:center !important;

}






/* KCU SERVICES — square image area */

.project-card .art-services{

  aspect-ratio:1/1 !important;

}



.project-card .art-services img{

  width:100% !important;

  height:100% !important;

  object-fit:contain !important;

  object-position:center !important;

}






/* KCU HOME LAB — RETRO CRT EFFECT */

.feature-card.homelab{

  isolation:isolate !important;

  overflow:hidden !important;

}



.feature-card.homelab::before{

  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:4 !important;

  pointer-events:none !important;

  background:

    repeating-linear-gradient(

      0deg,

      rgba(255,255,255,.035) 0px,

      rgba(255,255,255,.035) 1px,

      transparent 1px,

      transparent 4px

    ) !important;

  opacity:.55 !important;

  animation:homelab-scanlines 7s linear infinite !important;

}



.feature-card.homelab::after{

  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:5 !important;

  pointer-events:none !important;

  background:

    linear-gradient(

      90deg,

      transparent 0%,

      rgba(255,170,0,.08) 48%,

      rgba(255,60,0,.12) 50%,

      transparent 52%

    ) !important;

  opacity:.18 !important;

  animation:homelab-flicker 3.8s steps(1,end) infinite !important;

}



.feature-card.homelab img{

  animation:homelab-crt 5s ease-in-out infinite !important;

}



@keyframes homelab-scanlines{

  0%{background-position:0 0}

  100%{background-position:0 80px}

}



@keyframes homelab-flicker{

  0%,92%,100%{opacity:.12}

  93%{opacity:.3}

  94%{opacity:.08}

  96%{opacity:.22}

  97%{opacity:.1}

}



@keyframes homelab-crt{

  0%,100%{filter:brightness(1) contrast(1)}

  48%{filter:brightness(1.02) contrast(1.02)}

  50%{filter:brightness(.96) contrast(1.04)}

  52%{filter:brightness(1.01) contrast(1)}

}






/* KCU HOME LAB — RETRO CRT */

.feature-card.homelab .crt{

  position:absolute !important;

  inset:0 !important;

  z-index:3 !important;

  pointer-events:none !important;

  overflow:hidden !important;

  background:

    repeating-linear-gradient(

      0deg,

      rgba(255,255,255,.055) 0px,

      rgba(255,255,255,.055) 1px,

      transparent 1px,

      transparent 5px

    ) !important;

  opacity:.45 !important;

  mix-blend-mode:screen !important;

  animation:homelab-crt-scan 4s linear infinite !important;

}



.feature-card.homelab .crt::after{

  content:"" !important;

  position:absolute !important;

  left:-20% !important;

  top:-100% !important;

  width:140% !important;

  height:35% !important;

  background:linear-gradient(

    180deg,

    transparent,

    rgba(255,190,70,.18),

    rgba(255,255,255,.08),

    transparent

  ) !important;

  filter:blur(2px) !important;

  animation:homelab-crt-sweep 5s ease-in-out infinite !important;

}



@keyframes homelab-crt-scan{

  0%{background-position:0 0;opacity:.32}

  50%{background-position:0 45px;opacity:.48}

  100%{background-position:0 90px;opacity:.32}

}



@keyframes homelab-crt-sweep{

  0%,15%{top:-40%;opacity:0}

  20%{opacity:1}

  55%{top:110%;opacity:.8}

  60%,100%{top:120%;opacity:0}

}






/* KCU HOME LAB — RETRO MEME / ARCADE */

.feature-card.homelab .crt{

  position:absolute !important;

  inset:0 !important;

  z-index:4 !important;

  pointer-events:none !important;

  overflow:hidden !important;

  opacity:1 !important;

  background:

    repeating-linear-gradient(

      0deg,

      transparent 0px,

      transparent 3px,

      rgba(0,0,0,.22) 4px

    ),

    linear-gradient(

      90deg,

      rgba(255,140,0,.06),

      transparent 25%,

      rgba(0,255,170,.05) 50%,

      transparent 75%,

      rgba(255,60,0,.06)

    ) !important;

  animation:retro-screen 1.8s steps(2,end) infinite !important;

}



/* barra luminosa a atravessar o ecrã */

.feature-card.homelab .crt::before{

  content:"" !important;

  position:absolute !important;

  left:0 !important;

  top:-30% !important;

  width:100% !important;

  height:12% !important;

  background:linear-gradient(

    180deg,

    transparent,

    rgba(255,190,70,.25),

    rgba(255,255,255,.12),

    transparent

  ) !important;

  filter:blur(2px) !important;

  animation:retro-scan 3.2s linear infinite !important;

}



/* glitch horizontal */

.feature-card.homelab .crt::after{

  content:"" !important;

  position:absolute !important;

  left:-10% !important;

  top:0 !important;

  width:120% !important;

  height:100% !important;

  background:

    linear-gradient(

      0deg,

      transparent 0%,

      transparent 47%,

      rgba(255,180,0,.12) 48%,

      transparent 49%,

      transparent 63%,

      rgba(0,255,180,.10) 64%,

      transparent 65%

    ) !important;

  animation:retro-glitch 2.7s steps(1,end) infinite !important;

}



/* CRT a piscar ligeiramente */

@keyframes retro-screen{

  0%,100%{filter:brightness(1) contrast(1)}

  8%{filter:brightness(1.08) contrast(1.05)}

  9%{filter:brightness(.92) contrast(1.1)}

  10%{filter:brightness(1) contrast(1)}

  52%{filter:brightness(1.04)}

  53%{filter:brightness(.88)}

  54%{filter:brightness(1)}

}



/* scanline vertical */

@keyframes retro-scan{

  0%{top:-30%;opacity:0}

  8%{opacity:1}

  55%{opacity:.9}

  100%{top:120%;opacity:0}

}



/* pequenos glitches */

@keyframes retro-glitch{

  0%,72%,100%{

    transform:translateX(0);

    opacity:0;

  }

  73%{

    transform:translateX(-8px);

    opacity:.8;

  }

  74%{

    transform:translateX(6px);

    opacity:.35;

  }

  75%{

    transform:translateX(-3px);

    opacity:.7;

  }

  76%{

    transform:translateX(0);

    opacity:0;

  }

}






/* KCU HOME LAB — RETRO FRAME ANIMATION */

.retro-frame{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  z-index:3;

  pointer-events:none;

}



.retro-line{

  fill:none;

  stroke:#d6a84f;

  stroke-width:2;

  stroke-dasharray:55 945;

  filter:drop-shadow(0 0 4px rgba(214,168,79,.8));

  animation:retro-border 4s linear infinite;

}



.retro-line-b{

  stroke:#8cffc1;

  stroke-width:1.3;

  stroke-dasharray:130 870;

  opacity:.7;

  animation-duration:6s;

  animation-direction:reverse;

}



.retro-line-c{

  stroke:#d6a84f;

  stroke-width:1;

  stroke-dasharray:20 980;

  opacity:.45;

  animation-duration:2.2s;

}



@keyframes retro-border{

  to{

    stroke-dashoffset:-1000;

  }

}



/* LEDs retro */

.feature-card.homelab .lab-leds i{

  animation:retro-led 1.6s steps(2,end) infinite;

}



.feature-card.homelab .lab-leds i:nth-child(2){

  animation-delay:.25s;

}



.feature-card.homelab .lab-leds i:nth-child(3){

  animation-delay:.5s;

}



.feature-card.homelab .lab-leds i:nth-child(4){

  animation-delay:.75s;

}



.feature-card.homelab .lab-leds i:nth-child(5){

  animation-delay:1s;

}



@keyframes retro-led{

  0%,100%{opacity:.35}

  50%{opacity:1}

}






/* BOOK — INTERACTIVE STARFIELD */

.book-card{

  isolation:isolate !important;

}



.book-card .book-stars{

  position:absolute !important;

  inset:0 !important;

  width:100% !important;

  height:100% !important;

  z-index:2 !important;

  pointer-events:none !important;

  mix-blend-mode:screen !important;

}



.book-card .book-copy{

  z-index:4 !important;

}






/* PROJECT CARDS — TOUCH / PARALLAX */

.project-card .art{

  --parallax-x:0px;

  --parallax-y:0px;

}



.project-card .art img{

  transition:

    transform .35s cubic-bezier(.2,.8,.2,1),

    filter .35s ease !important;

  transform:

    translate3d(var(--parallax-x),var(--parallax-y),0)

    scale(1.025) !important;

  will-change:transform;

}



.project-card:hover .art img{

  filter:brightness(1.06) !important;

}



@media (hover:none){

  .project-card .art img{

    transition:

      transform .25s ease-out,

      filter .25s ease-out !important;

  }

}






/* MEL DA SERRA — warm subtle motion */

.project-card .art-mel img{

  animation:mel-float 5s ease-in-out infinite;

}



/* LAW 09 — subtle horizontal motion */

.project-card .art-law img{

  animation:law-float 6s ease-in-out infinite;

}



/* KCU SERVICES — subtle tech pulse */

.project-card .art-services img{

  animation:services-pulse 4.5s ease-in-out infinite;

}



@keyframes mel-float{

  0%,100%{filter:brightness(1)}

  50%{filter:brightness(1.045)}

}



@keyframes law-float{

  0%,100%{filter:brightness(1)}

  50%{filter:brightness(1.035)}

}



@keyframes services-pulse{

  0%,100%{filter:brightness(1)}

  50%{filter:brightness(1.06)}

}











/* =========================================================

   HERO — CENTERED PROFILE PHOTO

   ========================================================= */



.hero-profile-photo{

  position:relative;

  width:clamp(150px,20vw,250px);

  height:clamp(145px,18vw,220px);

  margin:8px auto 2px;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:2;

  overflow:hidden;

  animation:hero-photo-float 6s ease-in-out infinite;



  mask-image:

    linear-gradient(to bottom,

      transparent 0%,

      #000 14%,

      #000 78%,

      transparent 100%

    );

  -webkit-mask-image:

    linear-gradient(to bottom,

      transparent 0%,

      #000 14%,

      #000 78%,

      transparent 100%

    );

}



.hero-profile-photo::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(to right,

      #08090c 0%,

      transparent 24%,

      transparent 76%,

      #08090c 100%

    ),

    linear-gradient(to bottom,

      #08090c 0%,

      transparent 22%,

      transparent 72%,

      #08090c 100%

    );

}



.hero-profile-photo img{

  width:100%;

  height:100%;

  object-fit:contain;

  object-position:center;

  display:block;

  filter:

    drop-shadow(0 12px 18px rgba(0,0,0,.85))

    drop-shadow(0 0 24px rgba(255,255,255,.08));

}



@keyframes hero-photo-float{

  0%,100%{

    transform:translateY(0);

  }

  50%{

    transform:translateY(-4px);

  }

}



@media(max-width:700px){

  .hero-profile-photo{

    width:145px;

    height:155px;

    margin:6px auto 0;

  }

}






/* =========================================================

   HERO PROFILE — OPTION 5 / GEOMETRIC CINEMATIC

   ========================================================= */



.hero-profile-stage{

  position:relative;

  width:clamp(240px,30vw,390px);

  height:clamp(190px,24vw,300px);

  margin:4px auto 0;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:2;

  isolation:isolate;

}



.hero-profile-stage::before{

  content:"";

  position:absolute;

  inset:12%;

  border:1px solid rgba(255,255,255,.08);

  transform:rotate(45deg);

  border-radius:24px;

  opacity:.45;

  pointer-events:none;

}



.hero-profile-stage::after{

  content:"";

  position:absolute;

  width:72%;

  height:72%;

  border:1px solid rgba(185,140,255,.22);

  border-radius:50%;

  box-shadow:

    0 0 25px rgba(185,140,255,.08),

    inset 0 0 25px rgba(185,140,255,.04);

  pointer-events:none;

  animation:profile-orbit-pulse 5s ease-in-out infinite;

}



.hero-profile-photo{

  position:relative;

  width:100%;

  height:100%;

  margin:0;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  z-index:3;

  animation:hero-photo-float 6s ease-in-out infinite;



  mask-image:linear-gradient(

    to bottom,

    transparent 0%,

    #000 12%,

    #000 68%,

    transparent 100%

  );

  -webkit-mask-image:linear-gradient(

    to bottom,

    transparent 0%,

    #000 12%,

    #000 68%,

    transparent 100%

  );

}



.hero-profile-photo img{

  width:100%;

  height:100%;

  object-fit:contain;

  object-position:center;

  display:block;

  filter:

    drop-shadow(0 14px 22px rgba(0,0,0,.9))

    drop-shadow(0 0 30px rgba(185,140,255,.12));

}



.hero-profile-photo::after{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      to right,

      #08090c 0%,

      transparent 25%,

      transparent 75%,

      #08090c 100%

    ),

    linear-gradient(

      to bottom,

      #08090c 0%,

      transparent 20%,

      transparent 68%,

      #08090c 100%

    );

  pointer-events:none;

}



.hero-profile-glow{

  position:absolute;

  width:55%;

  height:55%;

  border-radius:50%;

  background:rgba(185,140,255,.09);

  filter:blur(35px);

  z-index:0;

  animation:profile-glow 5s ease-in-out infinite;

  pointer-events:none;

}



.hero-profile-orbit{

  position:absolute;

  width:82%;

  height:58%;

  border:1px solid rgba(255,255,255,.10);

  border-radius:50%;

  z-index:1;

  pointer-events:none;

}



.orbit-a{

  transform:rotate(-18deg);

  border-color:rgba(185,140,255,.28);

  animation:orbit-a 9s linear infinite;

}



.orbit-b{

  width:70%;

  height:48%;

  transform:rotate(25deg);

  border-color:rgba(255,190,100,.16);

  animation:orbit-b 12s linear infinite reverse;

}



@keyframes hero-photo-float{

  0%,100%{transform:translateY(0)}

  50%{transform:translateY(-4px)}

}



@keyframes profile-orbit-pulse{

  0%,100%{opacity:.45;transform:scale(1)}

  50%{opacity:.8;transform:scale(1.025)}

}



@keyframes profile-glow{

  0%,100%{opacity:.45;transform:scale(.95)}

  50%{opacity:.85;transform:scale(1.08)}

}



@keyframes orbit-a{

  from{transform:rotate(-18deg) rotate(0deg)}

  to{transform:rotate(-18deg) rotate(360deg)}

}



@keyframes orbit-b{

  from{transform:rotate(25deg) rotate(0deg)}

  to{transform:rotate(25deg) rotate(-360deg)}

}



@media(max-width:700px){

  .hero-profile-stage{

    width:210px;

    height:175px;

    margin-top:2px;

  }



  .hero-profile-stage::before{

    inset:15%;

  }



  .hero-profile-stage::after{

    width:75%;

    height:75%;

  }

}



@media(prefers-reduced-motion:reduce){

  .hero-profile-stage *,

  .hero-profile-stage{

    animation:none!important;

  }

}






/* =========================================================

   HERO PROFILE — ORGANIC PORTRAIT

   ========================================================= */



.hero-profile-stage{

  width:clamp(210px,24vw,330px)!important;

  height:clamp(245px,31vw,400px)!important;

  margin:0 auto!important;

}



.hero-profile-photo{

  width:100%!important;

  height:100%!important;

  overflow:hidden!important;



  mask-image:

    radial-gradient(

      ellipse 58% 68% at 50% 46%,

      #000 45%,

      rgba(0,0,0,.95) 58%,

      rgba(0,0,0,.5) 73%,

      transparent 100%

    )!important;



  -webkit-mask-image:

    radial-gradient(

      ellipse 58% 68% at 50% 46%,

      #000 45%,

      rgba(0,0,0,.95) 58%,

      rgba(0,0,0,.5) 73%,

      transparent 100%

    )!important;

}



.hero-profile-photo img{

  width:100%!important;

  height:100%!important;

  object-fit:contain!important;

  object-position:center center!important;

}



.hero-profile-stage::before{

  inset:14%!important;

  border-radius:50%!important;

  transform:none!important;

  border-color:rgba(255,255,255,.045)!important;

}



.hero-profile-stage::after{

  width:76%!important;

  height:76%!important;

  border-radius:50%!important;

  border-color:rgba(185,140,255,.18)!important;

}



@media(max-width:700px){



/* =========================================================

   HERO PROFILE — FLOATING ELEMENTS

   ========================================================= */



.hero-profile-stage{

  overflow:visible!important;

}



.hero-element{

  position:absolute;

  z-index:4;

  pointer-events:none;

  color:rgba(205,170,255,.7);

  font-family:Arial,sans-serif;

  text-shadow:

    0 0 6px rgba(190,140,255,.55),

    0 0 16px rgba(190,140,255,.18);

  animation:hero-element-float 5s ease-in-out infinite;

}



.element-1{

  left:8%;

  top:27%;

  font-size:13px;

  animation-duration:5.5s;

}



.element-2{

  left:20%;

  top:67%;

  font-size:18px;

  opacity:.45;

  animation-duration:4s;

  animation-delay:-1s;

}



.element-3{

  right:8%;

  top:24%;

  font-size:10px;

  animation-duration:6s;

  animation-delay:-2s;

}



.element-4{

  right:18%;

  top:65%;

  font-size:14px;

  opacity:.45;

  animation-duration:4.8s;

  animation-delay:-3s;

}



.element-5{

  left:31%;

  top:14%;

  font-size:11px;

  opacity:.35;

  animation-duration:6.5s;

  animation-delay:-2.5s;

}



.element-6{

  right:30%;

  top:16%;

  font-size:12px;

  opacity:.55;

  animation-duration:5.2s;

  animation-delay:-1.5s;

}



@keyframes hero-element-float{

  0%,100%{

    transform:translate3d(0,0,0) rotate(0deg);

    opacity:.35;

  }



  50%{

    transform:translate3d(3px,-8px,0) rotate(8deg);

    opacity:.9;

  }

}



@media(max-width:700px){



/* =========================================================

   HERO — SUBTLE PROFILE PARTICLES

   ========================================================= */



.hero-orbit-particles{

  position:absolute;

  inset:0;

  z-index:4;

  pointer-events:none;

}



.hero-orbit-particles .particle{

  position:absolute;

  display:block;

  width:3px;

  height:3px;

  border-radius:50%;

  background:rgba(210,180,255,.85);

  box-shadow:

    0 0 5px rgba(210,180,255,.8),

    0 0 12px rgba(180,130,255,.35);

  animation:profile-particle-float 5s ease-in-out infinite;

}



/* esquerda */

.p1{left:13%;top:30%;animation-delay:-.5s}

.p2{left:8%;top:50%;animation-delay:-2s}

.p3{left:20%;top:72%;animation-delay:-3.5s}



/* direita */

.p4{right:13%;top:28%;animation-delay:-1.5s}

.p5{right:8%;top:51%;animation-delay:-3s}

.p6{right:20%;top:73%;animation-delay:-4s}



/* superiores */

.p7{left:31%;top:14%;animation-delay:-2.5s}

.p8{right:31%;top:15%;animation-delay:-4.5s}



@keyframes profile-particle-float{

  0%,100%{

    transform:translate3d(0,0,0) scale(.7);

    opacity:.25;

  }

  50%{

    transform:translate3d(2px,-6px,0) scale(1.15);

    opacity:.9;

  }

}



@media(max-width:700px){

  .hero-orbit-particles .particle{

    width:2px;

    height:2px;

  }

}



@media(prefers-reduced-motion:reduce){

  .hero-orbit-particles .particle{

    animation:none;

  }

}






/* =========================================================

   HOME — TOP MENU

   MOBILE DESIGN = MASTER

   ========================================================= */



.home-topbar{

  position:fixed;

  top:22px;

  left:22px;

  right:22px;

  z-index:1000;

  display:flex;

  justify-content:space-between;

  align-items:center;

  pointer-events:none;

}



.home-menu-btn{

  pointer-events:auto;

  width:48px;

  height:48px;

  padding:10px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:5px;

  border:1px solid rgba(255,255,255,.14);

  border-radius:14px;

  background:rgba(8,9,12,.78);

  backdrop-filter:blur(16px);

  cursor:pointer;

}



.home-menu-btn span{

  display:block;

  width:100%;

  height:2px;

  background:#f5f5f5;

  border-radius:2px;

}



.home-menu{

  position:fixed;

  inset:0;

  z-index:999;

  background:rgba(0,0,0,.45);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:opacity .25s ease,visibility .25s ease;

}



.home-menu.is-open{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}



.home-menu .home-menu-panel{

  position:absolute;

  top:64px;

  left:30px;

  width:calc(100vw - 60px);

  max-width:774px;

  max-height:calc(100vh - 94px);

  box-sizing:border-box;

  padding:38px 60px 48px;

  overflow-y:auto;

  overflow-x:hidden;



  background:#08090c;

  border:2px solid rgba(255,255,255,.16);

  border-radius:28px;



  box-shadow:

    0 30px 80px rgba(0,0,0,.60),

    inset 0 1px 0 rgba(255,255,255,.035);

}



.home-menu .home-menu-head{

  display:flex;

  align-items:center;

  width:100%;

  height:32px;

  margin:0 0 74px;

  gap:28px;

}



.home-menu .home-menu-head span{

  flex:0 0 auto;

  color:#f4b72f;

  font-size:16px;

  font-weight:800;

  letter-spacing:5px;

  line-height:1;

}



.home-menu .home-menu-head i{

  display:block;

  flex:1;

  height:2px;

  background:rgba(255,255,255,.13);

}



.home-menu .home-menu-close{

  position:absolute;

  top:38px;

  right:42px;

  width:42px;

  height:42px;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

  border:0;

  background:transparent;

  color:#f5f5f5;

  font-size:42px;

  font-weight:300;

  line-height:1;

  cursor:pointer;

}



.home-menu .home-menu-section{

  margin:0 0 52px;

  padding:0;

}



.home-menu .home-menu-section:last-child{

  margin-bottom:0;

}



.home-menu .home-menu-section > small{

  display:block;

  margin:0 0 30px;

  color:#747982;

  font-size:16px;

  font-weight:800;

  line-height:1;

  text-transform:uppercase;

}



.home-menu .home-menu-section a{

  position:relative;

  display:flex;

  align-items:center;

  width:100%;

  min-height:88px;

  box-sizing:border-box;

  padding:0 20px;

  border-top:2px solid rgba(255,255,255,.09);

  color:#eeeeee;

  background:transparent;

  font-size:24px;

  font-weight:800;

  line-height:1;

  text-decoration:none;

  transition:

    color .2s ease,

    background .2s ease,

    padding-left .2s ease;

}



.home-menu .home-menu-section a span{

  color:inherit;

  font-size:inherit;

  font-weight:800;

}



.home-menu .home-menu-section a svg{

  width:32px;

  height:32px;

  min-width:32px;

  flex:0 0 32px;

  margin-right:30px;

  color:#d9d9d9;

  opacity:1;

  transition:transform .2s ease,color .2s ease;

}



.home-menu .home-menu-section a:hover,

.home-menu .home-menu-section a:focus-visible{

  color:#f4b72f;

  background:rgba(244,183,47,.045);

  padding-left:30px;

}



.home-menu .home-menu-section a:hover svg,

.home-menu .home-menu-section a:focus-visible svg{

  color:#f4b72f;

  transform:scale(1.08);

}



@media (max-width:700px){

  .home-menu .home-menu-panel{

    top:261px;

    left:30px;

    width:calc(100vw - 60px);

    max-width:none;

    max-height:calc(100vh - 291px);

  }

}



@media (max-width:480px){

  .home-menu .home-menu-panel{

    left:20px;

    width:calc(100vw - 40px);

    padding:38px 30px 48px;

  }



  .home-menu .home-menu-close{

    right:30px;

  }

}



/* =========================================================

   PROJECT CARDS — WHITE ANIMATED LINE

   MEL DA SERRA / LAW 09 / KCU SERVICES

   ========================================================= */



.project-row .project-card{

  position:relative!important;

  overflow:hidden!important;

}









/* =========================================================

   KCU MENU — MASTER DESIGN

   MOBILE DESIGN = MAIN DESIGN

   ========================================================= */



.home-menu .home-menu-panel{

  position:absolute !important;

  top:64px !important;

  left:30px !important;

  width:calc(100vw - 60px) !important;

  max-width:none !important;

  box-sizing:border-box !important;

  padding:38px 60px 48px !important;

  background:#08090c !important;

  border:2px solid rgba(255,255,255,.16) !important;

  border-radius:28px !important;

  box-shadow:

    0 30px 80px rgba(0,0,0,.60),

    inset 0 1px 0 rgba(255,255,255,.035) !important;

  overflow-y:auto !important;

  overflow-x:hidden !important;

}



.home-menu .home-menu-head{

  display:flex !important;

  align-items:center !important;

  width:100% !important;

  height:32px !important;

  margin:0 0 74px !important;

  padding:0 !important;

  gap:28px !important;

}



.home-menu .home-menu-head span{

  display:block !important;

  flex:0 0 auto !important;

  color:#f4b72f !important;

  font-size:16px !important;

  font-weight:800 !important;

  letter-spacing:5px !important;

  line-height:1 !important;

}



.home-menu .home-menu-head i{

  display:block !important;

  flex:1 !important;

  width:auto !important;

  height:2px !important;

  margin:0 !important;

  padding:0 !important;

  background:rgba(255,255,255,.13) !important;

  border:0 !important;

}



.home-menu .home-menu-close{

  position:absolute !important;

  top:38px !important;

  right:42px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  width:42px !important;

  height:42px !important;

  padding:0 !important;

  color:#f5f5f5 !important;

  font-size:42px !important;

  font-weight:300 !important;

  line-height:1 !important;

}



.home-menu .home-menu-section{

  margin:0 0 52px !important;

  padding:0 !important;

}



.home-menu .home-menu-section:last-child{

  margin-bottom:0 !important;

}



.home-menu .home-menu-section > small{

  display:block !important;

  margin:0 0 30px !important;

  padding:0 !important;

  color:#747982 !important;

  font-size:16px !important;

  font-weight:800 !important;

  line-height:1 !important;

  text-transform:uppercase !important;

}



.home-menu .home-menu-section a{

  position:relative !important;

  display:flex !important;

  align-items:center !important;

  width:100% !important;

  min-height:88px !important;

  margin:0 !important;

  padding:0 20px !important;

  box-sizing:border-box !important;

  border-top:2px solid rgba(255,255,255,.09) !important;

  background:transparent !important;

  color:#eeeeee !important;

  font-size:24px !important;

  font-weight:800 !important;

  line-height:1 !important;

}



.home-menu .home-menu-section a span{

  color:inherit !important;

  font-size:inherit !important;

  font-weight:800 !important;

}



.home-menu .home-menu-section a svg{

  width:32px !important;

  height:32px !important;

  min-width:32px !important;

  flex:0 0 32px !important;

  margin-right:30px !important;

  color:#d9d9d9 !important;

  opacity:1 !important;

}



.home-menu .home-menu-section a:hover,

.home-menu .home-menu-section a:focus-visible{

  color:#f4b72f !important;

  background:rgba(244,183,47,.045) !important;

  padding-left:30px !important;

}



.home-menu .home-menu-section a:hover svg,

.home-menu .home-menu-section a:focus-visible svg{

  color:#f4b72f !important;

  transform:scale(1.08) !important;

}



/* Desktop usa exatamente o mesmo painel do mobile */

@media (min-width:701px){



  .home-menu .home-menu-panel{

    top:64px !important;

    left:30px !important;

    width:clamp(360px, 48vh, 560px) !important;

    max-width:560px !important;

    max-height:calc(100vh - 96px) !important;

    padding:30px 38px 36px !important;

    border-radius:24px !important;

  }



  .home-menu .home-menu-head{

    height:28px !important;

    margin-bottom:42px !important;

    gap:20px !important;

  }



  .home-menu .home-menu-head span{

    font-size:14px !important;

    letter-spacing:4px !important;

  }



  .home-menu .home-menu-close{

    top:28px !important;

    right:30px !important;

    width:36px !important;

    height:36px !important;

    font-size:36px !important;

  }



  .home-menu .home-menu-section{

    margin-bottom:34px !important;

  }



  .home-menu .home-menu-section > small{

    margin-bottom:18px !important;

    font-size:13px !important;

  }



  .home-menu .home-menu-section a{

    min-height:62px !important;

    padding:0 14px !important;

    font-size:18px !important;

    border-top-width:1px !important;

  }



  .home-menu .home-menu-section a svg{

    width:24px !important;

    height:24px !important;

    min-width:24px !important;

    flex-basis:24px !important;

    margin-right:20px !important;

  }



}


/* Mobile mantém exatamente o mesmo master design */

@media (max-width:700px){

  .home-menu .home-menu-panel{

    top:261px !important;

    left:30px !important;

    width:calc(100vw - 60px) !important;

    max-width:none !important;

  }

}






/* =========================================================

   KCU MENU — DESKTOP RESPONSIVE

   Mobile permanece como MASTER

   ========================================================= */



@media (min-width:701px){



  .home-menu .home-menu-panel{

    top:64px !important;

    left:32px !important;

    width:min(560px, calc(100vw - 64px)) !important;

    max-width:560px !important;

    max-height:calc(100vh - 96px) !important;

    padding:30px 38px 36px !important;

    border-radius:24px !important;

  }



  .home-menu .home-menu-head{

    height:28px !important;

    margin-bottom:42px !important;

    gap:20px !important;

  }



  .home-menu .home-menu-head span{

    font-size:14px !important;

    letter-spacing:4px !important;

  }



  .home-menu .home-menu-close{

    top:28px !important;

    right:30px !important;

    width:36px !important;

    height:36px !important;

    font-size:36px !important;

  }



  .home-menu .home-menu-section{

    margin-bottom:34px !important;

  }



  .home-menu .home-menu-section > small{

    margin-bottom:18px !important;

    font-size:13px !important;

    letter-spacing:.04em !important;

  }



  .home-menu .home-menu-section a{

    min-height:62px !important;

    padding:0 14px !important;

    font-size:18px !important;

    border-top-width:1px !important;

  }



  .home-menu .home-menu-section a svg{

    width:24px !important;

    height:24px !important;

    min-width:24px !important;

    flex-basis:24px !important;

    margin-right:20px !important;

  }



  .home-menu .home-menu-section a:hover,

  .home-menu .home-menu-section a:focus-visible{

    padding-left:22px !important;

  }



}




/* ALIGN MENU TITLE WITH SECTION TITLES */

.home-menu .home-menu-head span{

  transform:translateX(-4px) !important;

}






/* =========================================================



   MAIN — SOCIAL LINKS



   ========================================================= */



.profile .socials{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  margin-top:24px;

}



.profile .socials a{

  width:46px;

  height:46px;

  display:flex;

  align-items:center;

  justify-content:center;

  box-sizing:border-box;

  border:1px solid rgba(255,255,255,.24);

  border-radius:13px;

  color:#ffffff;

  background:rgba(255,255,255,.075);

  box-shadow:0 4px 16px rgba(0,0,0,.22);

  transition:transform .25s ease,color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;

}



.profile .socials a svg{

  width:22px;

  height:22px;

  display:block;

}



.profile .socials a:hover,

.profile .socials a:focus-visible{

  transform:translateY(-3px);

  color:#ffffff;

  border-color:rgba(255,255,255,.55);

  background:rgba(255,255,255,.14);

  box-shadow:0 8px 24px rgba(0,0,0,.30);

}



@media (max-width:700px){

  .profile .socials{

    gap:9px;

    margin-top:22px;

  }



  .profile .socials a{

    width:42px;

    height:42px;

    border-radius:12px;

  }



  .profile .socials a svg{

    width:20px;

    height:20px;

  }

}