/* styles.css — Lalafa.com (cleaned). Visuals and interactions preserved. Comments removed to ensure English-only. */
:root{
  --bg:#0b0e13; --text:#eef3ff; --muted:#a5afc2; --ink:#0a1322; --brand-pink:#ff2f8a;

  --max:1200px; --pad:20px; --gap:16px; --brand-gap:14px;
  --header-h:96px;

  --fs-body:16px; --lh-body:1.65;
  --fs-h1:clamp(1.4rem,1.1rem + 2.2vw,2rem);
  --fs-h2:clamp(1.2rem,1.05rem + 1.2vw,1.6rem);
  --fs-h3:clamp(1.05rem,1rem + .6vw,1.25rem);

  --section-y:28px; --card-pad:14px;

  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  
  --tri-white-fill:#fff; --tri-white-stroke:#fff;
  --tri-black-fill:#000; --tri-black-stroke:#fff;

  
  --glass-cold:rgba(120,210,230,.35);
  --glass-inner:rgba(255,255,255,.38);
  --glass-face-dark:rgba(180,225,255,.05);
  --glass-bottom-rim:rgba(0,70,90,.28);
  --glass-side-rim:rgba(255,255,255,.22);
  --glass-shadow:rgba(10,19,34,.45);
  --glass-contact:rgba(0,0,0,.06);

  --contact-soft: color-mix(in oklab, var(--brand-pink) 8%, var(--bg));
}
html:has(#theme-light:checked){
  --bg:#fff; --text:#0a1322; --muted:#5b6678; --ink:#0a1322;

  --tri-white-fill:#fff; --tri-white-stroke:#000;
  --tri-black-fill:#000; --tri-black-stroke:#000;

  --glass-cold:rgba(40,120,150,.30);
  --glass-inner:rgba(255,255,255,.80);
  --glass-face-dark:rgba(255,255,255,.44);
  --glass-bottom-rim:rgba(0,60,80,.24);
  --glass-side-rim:rgba(255,255,255,.35);
  --glass-shadow:rgba(0,0,0,.20);

  --contact-soft: color-mix(in oklab, var(--brand-pink) 10%, var(--bg));
}
@media (min-width:900px){
  :root{ --fs-body:17px; --lh-body:1.7; --section-y:40px; --card-pad:16px; }
}


*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
html{ scroll-behavior:smooth }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body); line-height:var(--lh-body)
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid currentColor; outline-offset:2px
}


.skip-link{ display:none !important }


.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0
}


.section{ padding-block:var(--section-y); scroll-margin-top:var(--header-h) }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.grid{ display:grid; gap:var(--gap) }


.cards-3{ grid-template-columns:1fr }
@media (min-width:768px){ .cards-3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .cards-3{ grid-template-columns:repeat(3,1fr) } }


main > section:nth-of-type(even){ position:relative; background: color-mix(in oklab, var(--text) 5%, var(--bg)) }
main > section:nth-of-type(even) .wrap{ padding-block: calc(var(--section-y) + 6px) }
main > section:nth-of-type(even)::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:22px; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in oklab, var(--ink) 10%, transparent) 0%, transparent 100%)
}


h1,h2,h3{ line-height:1.25 }
h1{ font-size:var(--fs-h1); margin:0 0 10px }
h2{ font-size:var(--fs-h2); margin:0 0 8px; display:flex; align-items:baseline; gap:.5rem }
h3{ font-size:var(--fs-h3); margin:0 0 6px }
p{ margin:.6rem 0 }
.slogan{ color:var(--brand-pink); font-weight:700; font-size:clamp(1.05rem,.9rem + 1vw,1.35rem); margin:6px 0 10px }
.lede,.sub{ color:var(--muted) }


main h2::before{
  content:""; inline-size:.68em; aspect-ratio:1; background:var(--brand-pink);
  clip-path:polygon(0 0, 0 100%, 100% 100%); align-self:baseline; transform:translateY(-.06em)
}



.site-header{
  position:sticky; top:0; z-index:1000; background:var(--bg);
  border-bottom:none;
  transition: box-shadow .25s ease, background .25s ease;
  padding-top:36px; padding-bottom:12px;

  --nav-underline-offset: 3px;
  --nav-underline-thickness: 2px;
}
.site-header.is-stuck{ box-shadow:0 10px 24px color-mix(in oklab, var(--ink) 12%, transparent) }


.branding{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  gap:10px; max-width:var(--max); margin:0 auto; padding:12px var(--pad) 0;
  max-height:420px; overflow:hidden; transition:max-height .28s ease, padding .28s ease, margin .28s ease;
}


@media (max-width:899.98px){
  .site-header.is-collapsed .branding{ max-height:0; padding-top:0; padding-bottom:0; margin:0 }
  .site-header.is-collapsed .theme-switcher{ opacity:0; pointer-events:none; transition:opacity .2s ease }

  .logo{ width:128px; height:128px }
  .branding{ gap:40px; margin-bottom:24px }
}


.logo{ width:160px; height:160px; color:currentColor }
.logo-light { display: none; }
html:has(#theme-light:checked) .logo-dark { display: none; }
html:has(#theme-light:checked) .logo-light { display: block; }
@media (min-width:900px){ .logo{ width:56px; height:56px } }


.site-identity{ display:flex; flex-direction:column; gap:4px; line-height:1.05; } 
.site-name{ margin:0; font-weight:700; font-size:1.05rem }                      
.site-tagline{ margin:0; color:var(--muted); font-size:.9rem }                   
@media (min-width:900px){
  .site-identity{ gap:0; line-height:1.04 }  
  .site-name{ font-size:.98rem }
  .site-tagline{ font-size:.9rem }
}
.site-name .f{ color:var(--brand-pink) }


.primary-nav{ background:var(--bg) }
.menu{
  display:flex; gap:18px; list-style:none; margin:0;
  padding:10px var(--pad) 8px;
  max-width:var(--max); margin-inline:auto; overflow-x:auto;
  justify-content:center; flex-wrap:wrap;
}
.menu a{
  display:inline-block; padding:6px 2px; white-space:nowrap;
  -webkit-tap-highlight-color: rgba(255,47,138,.25);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: var(--nav-underline-thickness);
  text-underline-offset: var(--nav-underline-offset);
  line-height:1.12;
}
.menu a:hover,
.menu a:focus,
.menu a:focus-visible,
.menu a:active,
.menu a.is-active{
  text-decoration-color: var(--brand-pink);
}


.menu-dropdown{ display:none }
@media (max-width:420px){
  .primary-nav .menu{ display:none }
  .menu-dropdown{ display:block; padding:8px var(--pad) 0; max-width:var(--max); margin:0 auto }
  .menu-dropdown summary{ cursor:pointer; padding:10px 12px; border:1px solid currentColor }
  .menu-dropdown ul{ list-style:none; padding:8px 0 0; margin:0 }
  .menu-dropdown li{ border-top:1px solid currentColor; opacity:.5; transition:opacity .15s ease }
  .menu-dropdown li:hover,
  .menu-dropdown li:has(a:focus),
  .menu-dropdown li:has(a:focus-visible){ opacity:1 }
  .menu-dropdown a{
    display:block; padding:10px 0;
    text-decoration: underline; text-decoration-color: transparent;
    text-decoration-thickness: var(--nav-underline-thickness);
    text-underline-offset: var(--nav-underline-offset);
  }
  .menu-dropdown a:hover,
  .menu-dropdown a:focus,
  .menu-dropdown a:focus-visible,
  .menu-dropdown a:active,
  .menu-dropdown a.is-active{
    text-decoration-color: var(--brand-pink);
  }
}


@media (min-width:900px){
  .site-header{
    display:grid; grid-template-columns:auto 1fr; align-items:end;
    gap:var(--gap); max-width:var(--max); margin-inline:auto; padding:12px var(--pad) 12px;
  }
  .branding{ flex-direction:row; align-items:flex-end; justify-content:flex-start; text-align:left; gap:var(--brand-gap); padding:0; margin:0 }
  .primary-nav{ padding:0; align-self:end }
  .menu{ justify-content:flex-end; max-width:none; margin:0; gap:20px; align-items:flex-end; padding:0 }
  .menu a{ padding:0 2px }
}


.theme-switcher{ position:absolute; top:8px; right:var(--pad); z-index:5 }
.theme-toggle-tri{ display:inline-flex; align-items:center; gap:8px }
.tri{ display:inline-grid; place-items:center; width:14px; height:14px; cursor:pointer }
.tri svg{ width:100%; height:100%; display:block }
.theme-toggle-tri [data-tri="light"] path{
  fill: var(--tri-white-fill) !important;
  stroke: var(--tri-white-stroke) !important;
  stroke-width: 3 !important;
}
.theme-toggle-tri [data-tri="dark"] path{
  fill: var(--tri-black-fill) !important;
  stroke: var(--tri-black-stroke) !important;
  stroke-width: 3 !important;
}
#theme-dark:checked ~ .theme-toggle-tri label[for="theme-dark"],
#theme-light:checked ~ .theme-toggle-tri label[for="theme-light"]{ pointer-events:none; opacity:.7 }



.hero-grid{ display:grid; gap:var(--gap); align-items:center }
.hero-art{ width:100%; aspect-ratio:1 / 1 }
.hero-anim-frame{ width:100%; height:100%; border:0; display:block; background:transparent }

@media (min-width:900px){
  #home .wrap{ padding-inline: 0; }
  .hero-grid{
    grid-template-columns:
      clamp(12px, 2.5vw, 40px)
      min(46vh, 36vw, 520px)
      var(--gap)
      1fr;
    column-gap: 0;
  }
  .hero-art{ grid-column: 2; position:relative; left:-36px }
  .hero-text{ grid-column: 4; padding-right: var(--pad); }
}
@media (max-width:899.98px){
  .hero-art{ width: min(50vw, 360px); margin-inline:auto }
}


.cards-3 article{ padding:var(--card-pad); border:1px solid color-mix(in oklab, currentColor 20%, transparent) }

.open-roles{ margin-top:12px; border-top:1px dashed color-mix(in oklab, currentColor 28%, transparent); padding-top:12px }
article ul{ padding-left:1.1rem; margin:.5rem 0 0 }
article li{ margin:.25rem 0 }
.keypoints{ list-style:disc; padding-left:1.2rem; margin:.6rem 0 0 }
.keypoints li::marker{ color:var(--brand-pink) }
.wrap > p{ margin:14px 0; color:var(--muted) }


.team{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:768px){  .team{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px){ .team{ grid-template-columns: repeat(4, 1fr); } }

.member{
  border:1px solid color-mix(in oklab, currentColor 20%, transparent);
  padding: var(--card-pad);
}


:root{
  --avatar-size: 200px; --avatar-border: 1px; --avatar-padding: 12px;
  --avatar-shadow: 0 10px 18px color-mix(in oklab, var(--ink) 18%, transparent), 0 2px 0 #00000008;
  --avatar-shadow-hover: 0 14px 22px color-mix(in oklab, var(--ink) 24%, transparent), 0 3px 0 #0000000a;
}
.avatar{ position: relative; margin: 0 0 10px; }
.avatar .id-photo{
  width: var(--avatar-size); aspect-ratio: 1 / 1; background: #fff;
  border: var(--avatar-border) solid color-mix(in oklab, var(--ink) 18%, transparent);
  box-shadow: var(--avatar-shadow);
  padding: var(--avatar-padding); border-radius: 0;
  display: grid; place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
@media (hover:hover){
  .avatar .id-photo:hover{ transform: translateY(-1px); box-shadow: var(--avatar-shadow-hover); }
}
.avatar svg{ display:block; width:100%; height:100%; max-width:100%; aspect-ratio:1 / 1 }
.avatar::before,.avatar::after{ content:none!important; display:none!important }
.member h3{ margin: 6px 0 4px; font-size: var(--fs-h3); }
.member p { margin: 0.35rem 0 0; color: var(--muted); }



#gamedev .wrap > p + .cards-3{ margin-top:clamp(26px, 3.2vw, 48px); }
#gamedev .cards-3{ gap: 22px; }


#gamedev{ --note-ink: #1a1f2b; }


#gamedev .cards-3 article{
  position: relative; border: none !important; border-radius:0;
  color: var(--note-ink);
  padding: 28px 16px 16px;
  -webkit-backdrop-filter: blur(1.5px) saturate(110%);
  backdrop-filter: blur(1.5px) saturate(110%);
  box-shadow: 0 18px 30px color-mix(in oklab, var(--ink) 26%, transparent), 0 2px 0 #00000008;
  transform-origin: center top; transition: transform .15s ease, box-shadow .15s ease;
}


#gamedev .cards-3 article:nth-child(1){
  background:linear-gradient(180deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,245,165,.72) 24%,
    rgba(255,245,165,.72) 100%);
  transform:rotate(-1.2deg)
}
#gamedev .cards-3 article:nth-child(2){
  background:linear-gradient(180deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,214,231,.72) 24%,
    rgba(255,214,231,.72) 100%);
  transform:rotate(1.4deg)
}
#gamedev .cards-3 article:nth-child(3){
  background:linear-gradient(180deg,
    rgba(255,255,255,.70) 0%,
    rgba(214,236,255,.72) 24%,
    rgba(214,236,255,.72) 100%);
  transform:rotate(-.6deg)
}


html:has(#theme-light:checked) #gamedev .cards-3 article:nth-child(1){
  background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,245,165,.96) 24%,
    rgba(255,245,165,.96) 100%);
}
html:has(#theme-light:checked) #gamedev .cards-3 article:nth-child(2){
  background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,214,231,.96) 24%,
    rgba(255,214,231,.96) 100%);
}
html:has(#theme-light:checked) #gamedev .cards-3 article:nth-child(3){
  background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(214,236,255,.96) 24%,
    rgba(214,236,255,.96) 100%);
}


#gamedev .cards-3 article::before{
  content:""; position:absolute; left:50%; top:-12px; width:42%; height:16px; transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg,#ffffffeb 0%,#fffffff0 60%,#ffffffd8 100%), repeating-linear-gradient(135deg,#fff9 0 6px,#fffb 6px 12px);
  border-left:1px solid #00000022; border-right:1px solid #00000022; border-radius:0;
  box-shadow:0 6px 10px color-mix(in oklab, var(--ink) 18%, transparent);
}
#gamedev .cards-3 article:nth-child(2)::before{ transform:translateX(-50%) rotate(1.6deg) }
#gamedev .cards-3 article:nth-child(3)::before{ transform:translateX(-50%) rotate(-.4deg) }
#gamedev .cards-3 article::after{
  content:""; position:absolute; top:0; right:0; width:26px; height:26px;
  background:linear-gradient(135deg,#00000020,transparent 60%); clip-path:polygon(0 0,100% 0,100% 100%); opacity:.18; pointer-events:none;
}


#gamedev .cards-3 article h3{ margin:4px 0 6px; font-size:clamp(1rem,.95rem + .2vw,1.15rem); line-height:1.22; letter-spacing:.1px; color:var(--note-ink) }
#gamedev .cards-3 article ul{ margin:.35rem 0 0; padding-left:1.05rem }
#gamedev .cards-3 article li{ margin:.18rem 0; color:color-mix(in oklab, var(--note-ink) 92%, transparent) }
#gamedev .cards-3 article li::marker{ color:color-mix(in oklab, var(--note-ink) 70%, transparent) }
@media (hover:hover){
  #gamedev .cards-3 article:hover{ transform: translateY(-2px); box-shadow: 0 24px 36px color-mix(in oklab, var(--ink) 32%, transparent), 0 4px 0 #00000008; }
}




#services .cards-3{ gap:24px }

#services .cards-3 article{
  position: relative; border-radius:0!important; padding:18px 16px;
  background: var(--glass-face-dark);
  -webkit-backdrop-filter: blur(6px) saturate(130%); backdrop-filter: blur(6px) saturate(130%);

  
  transform: translateY(0);
  box-shadow:
    0 0 0 1px var(--glass-cold),
    inset 0 0 0 1px var(--glass-inner),
    0 36px 64px color-mix(in oklab, var(--glass-shadow) 110%, transparent),
    0 8px 0 var(--glass-contact);

  border:none!important; overflow:visible;
  transition: box-shadow .2s ease, color .2s ease;
}

#services .cards-3 article::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.55), transparent 14%) top/100% 4px no-repeat,
    linear-gradient(to right,  var(--glass-side-rim), transparent) left/4px 100% no-repeat,
    linear-gradient(to left,   var(--glass-side-rim), transparent) right/4px 100% no-repeat,
    linear-gradient(to top,    var(--glass-bottom-rim), transparent 40%) bottom/100% 6px no-repeat;
}

#services .cards-3 article::before{
  content:""; position:absolute; left:10px; right:10px; bottom:-14px; height:22px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 140% at 50% 0%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); filter:blur(2px);
}


@media (hover:hover){
  #services .cards-3 article:hover{
    transform: translateY(0);
    box-shadow:
      
      0 0 0 1.5px color-mix(in oklab, var(--brand-pink) 38%, transparent),
      
      inset 0 0 0 1px var(--glass-inner),
      
      0 30px 60px color-mix(in oklab, var(--brand-pink) 22%, transparent),
      
      0 6px 0 color-mix(in oklab, var(--brand-pink) 10%, transparent);
  }
}


@media (hover:hover){
  html:has(#theme-light:checked) #services .cards-3 article:hover{
    box-shadow:
      0 0 0 1.5px color-mix(in oklab, var(--brand-pink) 34%, transparent),
      inset 0 0 0 1px var(--glass-inner),
      0 28px 48px color-mix(in oklab, var(--brand-pink) 18%, transparent),
      0 6px 0 color-mix(in oklab, var(--brand-pink) 10%, transparent);
  }
}

#services .cards-3 article h3{ margin:4px 0 8px; font-weight:700 }
#services .cards-3 article ul{ margin:.4rem 0 0 }
#services .cards-3 article li{ margin:.22rem 0 }



#web3 .cards-3{ gap:22px }
#web3 .cards-3 article{
  position: relative; border-radius:0!important; padding:18px 16px; border:none!important; overflow:visible;
  --w3-top: rgba(255,255,255,.10); --w3-btm: rgba(255,255,255,.06);
  background: linear-gradient(180deg, var(--w3-top), var(--w3-btm));
  -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px);
  color: var(--text);
  transform: translateY(0) !important;
  transition: box-shadow .2s ease, color .2s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(255,255,255,.10),
    0 20px 34px color-mix(in oklab, var(--ink) 22%, transparent),
    0 4px 0 rgba(0,0,0,.04);
}
#web3 .cards-3 article::after, #web3 .cards-3 article::before{ content:none!important; display:none!important }
@media (hover:hover){
  #web3 .cards-3 article:hover{
    transform: translateY(0) !important;
    box-shadow:
      0 0 0 1.5px color-mix(in oklab, var(--brand-pink) 38%, transparent),
      0 1px 0 rgba(255,255,255,.22) inset,
      0 0 0 1px rgba(255,255,255,.12),
      0 36px 64px color-mix(in oklab, var(--ink) 28%, transparent),
      0 8px 0 rgba(0,0,0,.05);
  }
}
html:has(#theme-light:checked) #web3 .cards-3 article{
  --w3-top: rgba(0,0,0,.05); --w3-btm: rgba(0,0,0,.025);
  background: linear-gradient(180deg, var(--w3-top), var(--w3-btm));
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 0 0 1px rgba(0,0,0,.08),
    0 18px 30px rgba(0,0,0,.10),
    0 4px 0 rgba(0,0,0,.03);
}
@media (hover:hover){
  html:has(#theme-light:checked) #web3 .cards-3 article:hover{
    box-shadow:
      0 0 0 1.5px color-mix(in oklab, var(--brand-pink) 34%, transparent),
      0 1px 0 rgba(255,255,255,.58) inset,
      0 0 0 1px rgba(0,0,0,.07),
      0 28px 48px rgba(0,0,0,.14),
      0 6px 0 rgba(0,0,0,.04);
  }
}
#web3 .cards-3 article h3{ margin:4px 0 8px; font-weight:700 }
#web3 .cards-3 article ul{ margin:.4rem 0 0 }
#web3 .cards-3 article li{ margin:.22rem 0 }



#contact{ background:none; }
#contact .wrap{
  --panel-top: color-mix(in oklab, var(--brand-pink) 12%, transparent);
  --panel-btm: color-mix(in oklab, var(--brand-pink) 20%, transparent);
  --panel-stroke: color-mix(in oklab, var(--brand-pink) 24%, #fff 76%);
  --panel-highlight: rgba(255,255,255,.38);
  --panel-shadow: color-mix(in oklab, var(--ink) 16%, transparent);

  position:relative; isolation:isolate; color: var(--text);
  max-width: clamp(320px, 92vw, 700px); margin-inline:auto;

  background:
    radial-gradient(120% 140% at 20% -10%, rgba(255,255,255,.16), transparent 50%),
    linear-gradient(180deg, var(--panel-top) 0%, var(--panel-btm) 100%);
  -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px);

  border-radius:14px;
  box-shadow:
    0 1px 0 var(--panel-highlight) inset,
    0 0 0 1px var(--panel-stroke),
    0 16px 26px var(--panel-shadow),
    0 3px 0 rgba(0,0,0,.04);

  padding: calc(var(--section-y) + 6px) var(--pad);
}
#contact .wrap::after{
  content:""; position:absolute; inset:0 0 auto 0; height:34%;
  pointer-events:none; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%,
                                     rgba(255,255,255,.16) 55%,
                                     rgba(255,255,255,0) 100%);
}
html:has(#theme-light:checked) #contact .wrap{
  --panel-top: color-mix(in oklab, var(--brand-pink) 18%, transparent);
  --panel-btm: color-mix(in oklab, var(--brand-pink) 28%, transparent);
  --panel-shadow: rgba(0,0,0,.10);
}


/* Contact: form status message */
.form-status{ margin-top:10px; min-height:1.2em; color: var(--muted); }
.form-status.ok{ color:#7be495; }
.form-status.err{ color:#ff6b6b; }

#contact .contact-form{
  max-width:620px; margin-inline:auto;
  display:grid; gap:12px;
  text-align:left;                 
}
#contact .field{ display:grid; gap:6px; }

#contact input, #contact textarea{
  background: linear-gradient(180deg, #fff, #fff8) padding-box;
  color: var(--ink);
  border:1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 2px rgba(255,255,255,.10) inset;
  border-radius: 12px;

  font-size: clamp(1rem, 0.96rem + 0.4vw, 1.06rem);
  line-height: 1.5;
  padding: 12px 14px;             
}
#contact input::placeholder, #contact textarea::placeholder{
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  font-size: inherit;
}
#contact input:focus-visible, #contact textarea:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand-pink) 40%, #fff); outline-offset:2px;
}


#contact .btn{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; user-select:none;

  justify-self:end;               
  align-self:end;

  display:inline-flex; align-items:center; justify-content:center;
  width:max-content; max-width:100%; white-space:nowrap;
  margin-top: clamp(18px, 2.6vw, 32px);

  min-height:40px; padding:10px 18px; border-radius:999px;

  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color:#0b0e13; text-shadow:none;

  --amber-top:#FFAD1A; --amber-mid:#FF9700; --amber-btm:#C76400;
  background:
    radial-gradient(140% 120% at -20% 0%, rgba(255,255,255,.40), transparent 34%),
    linear-gradient(180deg, var(--amber-top) 0%, var(--amber-mid) 45%, var(--amber-btm) 100%);

  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -10px 22px rgba(0,0,0,.10) inset,
    0 16px 28px rgba(199,100,0,.40),
    0 4px 0 rgba(0,0,0,.06);

  position:relative; overflow:hidden;
  transition: box-shadow .18s ease, filter .18s ease, transform .02s linear;
}
#contact .btn::after{
  content:""; position:absolute; inset:2px 2px auto 2px; height:44%;
  border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%,
                                     rgba(255,255,255,.24) 60%,
                                     rgba(255,255,255,0) 100%);
}
@media (hover:hover){
  #contact .btn:hover{
    box-shadow:
      0 1px 0 rgba(255,255,255,.62) inset,
      0 -12px 24px rgba(0,0,0,.12) inset,
      0 18px 30px rgba(199,100,0,.44),
      0 5px 0 rgba(0,0,0,.06);
    filter: saturate(1.06) brightness(1.02);
  }
}
#contact .btn:active{
  box-shadow:
    0 0 0 rgba(255,255,255,0) inset,
    0 -6px 12px rgba(0,0,0,.12) inset,
    0 12px 22px rgba(199,100,0,.36),
    0 3px 0 rgba(0,0,0,.08);
  filter:saturate(.98) brightness(.985);
}
#contact .btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#contact .btn[disabled], #contact .btn:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.12); }



.site-footer{
  border:none; text-align:center; font-size:.93rem;
}





html:has(#home:target)      .menu a[href="#home"],
html:has(#services:target)  .menu a[href="#services"],
html:has(#gamedev:target)   .menu a[href="#gamedev"],
html:has(#web3:target)      .menu a[href="#web3"],
html:has(#team:target)      .menu a[href="#team"],
html:has(#process:target)   .menu a[href="#process"],
html:has(#engagement:target).menu a[href="#engagement"],
html:has(#faq:target)       .menu a[href="#faq"],
html:has(#contact:target)   .menu a[href="#contact"]{
  text-decoration-color: var(--brand-pink);
}


@media (max-width:420px){
  html:has(#home:target)      .menu-dropdown a[href="#home"],
  html:has(#services:target)  .menu-dropdown a[href="#services"],
  html:has(#gamedev:target)   .menu-dropdown a[href="#gamedev"],
  html:has(#web3:target)      .menu-dropdown a[href="#web3"],
  html:has(#team:target)      .menu-dropdown a[href="#team"],
  html:has(#process:target)   .menu-dropdown a[href="#process"],
  html:has(#engagement:target).menu-dropdown a[href="#engagement"],
  html:has(#faq:target)       .menu-dropdown a[href="#faq"],
  html:has(#contact:target)   .menu-dropdown a[href="#contact"]{
    text-decoration-color: var(--brand-pink);
  }
}


.menu:has(a.is-active:not([href="#home"])) a[href="#home"]{
  text-decoration-color: transparent !important;
}

.menu-dropdown:has(a.is-active:not([href="#home"])) a[href="#home"]{
  text-decoration-color: transparent !important;
}