/* ---------- Reset ---------- */
*,:after,:before{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
a{color:inherit;text-decoration:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;min-height:100dvh}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1,h2,h3,h4{text-wrap:balance}
li,p{text-wrap:pretty}
img,svg{display:block;max-width:100%;vertical-align:middle}
ul,ol{list-style:none;margin:0;padding:0}
button,input,textarea{font:inherit;color:inherit}

/* ---------- Tokens ---------- */
:root{
  --ease-out-sine:cubic-bezier(.39,.575,.565,1);
  --ease-in-sine:cubic-bezier(.47,0,.745,.715);
  --ease-in-out-sine:cubic-bezier(.445,.05,.55,.95);
  --ease-in-cubic:cubic-bezier(.55,.055,.675,.19);
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-out-elastic:linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1);
  --ease-out-elastic-100-30:linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726,1.3643 14.48%,1.3151 16.2%,1.0317 21.81%,.941 24.01%,.8912 25.91%,.8694 27.84%,.8698 29.21%,.8824 30.71%,1.0122 38.33%,1.0357,1.046 42.71%,1.0416 45.7%,.9961 53.26%,.9839 57.54%,.9853 60.71%,1);

  --safe-top:env(safe-area-inset-top);
  --safe-right:env(safe-area-inset-right);
  --safe-bottom:env(safe-area-inset-bottom);
  --safe-left:env(safe-area-inset-left);

  --font-family-headline:"Anton","Impact","Haettenschweiler",sans-serif;
  --font-family-body:"Inter",system-ui,-apple-system,sans-serif;
  --padding:1rem;
  --gap:1rem;
  --shadow:0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05);

  --color-primary:#fff;
  --color-secondary:#cbcbcb;
  --color-onPrimary:#2c2c2c;
  --color-onSecondary:#2c2c2c;

  --font-h1:4.125rem/.9 var(--font-family-headline);
  --font-h2:2.5rem/.9 var(--font-family-headline);
  --font-h4:.95rem/1 var(--font-family-headline);
  --font-h6:500 .6rem/1 var(--font-family-body);
  --font-body:500 1rem/1.3 var(--font-family-body);
}
@media (width >= 768px){
  :root{--font-h1:6.25rem/.9 var(--font-family-headline);--font-h2:4rem/.9 var(--font-family-headline)}
}

/* ---------- Base ---------- */
::selection{background-color:color-mix(in srgb,var(--color-secondary),transparent 60%)}
html{color:var(--color-onPrimary);font-family:var(--font-family-headline)}
body,html{overflow-x:clip;width:100%}
body,html,main{background-color:var(--color-primary);transition:background-color .6s var(--ease-out-sine),color .6s var(--ease-out-sine)}
main{position:relative;z-index:1}
h1{font:var(--font-h1);letter-spacing:-.01em;text-transform:uppercase}
h2{font:var(--font-h2);letter-spacing:-.01em;text-transform:uppercase}
h4{font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase}
p{font:var(--font-body)}
small{font:var(--font-h6);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Button ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;
  background-color:color-mix(in srgb,var(--color-secondary) 55%,transparent);color:var(--color-onPrimary);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--color-onPrimary) 14%,transparent);
  box-shadow:0 4px 18px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:50rem;cursor:pointer;
  font:1rem/1 var(--font-family-headline);letter-spacing:.04em;
  padding:1rem 2rem;text-transform:uppercase;width:fit-content;
  transition:.8s scale var(--ease-out-elastic),.8s box-shadow var(--ease-out-elastic),.6s background-color var(--ease-out-sine);
}
@media (any-hover:hover){.button:hover{background-color:color-mix(in srgb,var(--color-secondary) 70%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.4);scale:1.05}}
.button:active{scale:.95!important}

/* ---------- Header + burger ---------- */
.header{position:fixed;left:0;top:max(calc(var(--safe-top) - var(--padding)),0px);width:100%;display:flex;justify-content:flex-end;padding:var(--padding);pointer-events:none;z-index:5}
.header__nav{width:3rem;height:3rem;padding:0;border-radius:50%;box-shadow:var(--shadow);pointer-events:auto}
.burger{position:relative;width:1.3rem;height:.9rem;display:block}
.burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:.6s translate var(--ease-out-elastic),.6s rotate var(--ease-out-elastic)}
.burger i:nth-child(1){top:.1rem}
.burger i:nth-child(2){top:.65rem}
.menu-open .burger i:nth-child(1){translate:0 .275rem;rotate:45deg}
.menu-open .burger i:nth-child(2){translate:0 -.275rem;rotate:-45deg}

/* ---------- Menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:4;background:var(--color-secondary);color:var(--color-onSecondary);display:grid;place-items:center;clip-path:circle(0 at calc(100% - 2.5rem) 2.5rem);transition:clip-path .7s var(--ease-out-expo),visibility 0s .7s;visibility:hidden}
.menu-open .menu{clip-path:circle(150% at calc(100% - 2.5rem) 2.5rem);visibility:visible;transition-delay:0s}
.menu ul{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.menu a{display:block;font:var(--font-h1);font-size:clamp(3rem,13vw,7rem);text-transform:uppercase;transform-origin:bottom;transition:1s transform var(--ease-out-elastic-100-30),.15s color var(--ease-in-out-sine)}
@media (any-hover:hover){.menu a:hover{transform:scaleY(1.15);color:var(--color-primary)}}
.menu li{translate:0 40%;opacity:0;transition:.5s opacity,.8s translate var(--ease-out-elastic)}
.menu-open .menu li{translate:0 0;opacity:1;transition-delay:calc(var(--i)*.05s + .15s)}

/* ---------- Page layout ---------- */
.index-page{display:flex;flex-direction:column;gap:8rem}
@media (width >= 768px){.index-page{gap:12rem}}
.index-page__project{display:flex;flex-direction:column;align-items:center;gap:2.5rem;scroll-margin-top:3rem}

.text-block{display:flex;flex-direction:column;align-items:center;gap:var(--gap);padding:0 var(--padding);text-align:center}
.text-block__title{font:var(--font-h2);letter-spacing:-.01em;text-transform:uppercase}
.text-block__description{max-width:24em}

/* scroll reveal: elastic pop */
[data-reveal]{transition:.9s scale var(--ease-out-elastic),.6s opacity var(--ease-out-sine),.9s translate var(--ease-out-elastic),.8s box-shadow var(--ease-out-elastic),.6s background-color var(--ease-out-sine)}
[data-reveal]:not(.is-in){scale:.85;opacity:0;translate:0 2rem}

/* ---------- Hero ---------- */
.hero{
  container:hero/inline-size;
  display:grid;grid-template-areas:"top" "mid" "bot";grid-template-rows:1fr auto 1fr;
  min-height:100svh;width:100%;text-align:center;place-items:center;
  padding:max(var(--safe-top),var(--padding)) max(var(--safe-right),var(--padding)) max(var(--safe-bottom),var(--padding)) max(var(--safe-left),var(--padding));
}
.hero__top{grid-area:top;align-self:start}.hero__mid{grid-area:mid}
.hero__mid{display:flex;flex-direction:column;align-items:center;gap:min(4rem,6cqb);width:100%}
.hero__mid h1,.hero__mid h2{font:var(--font-h1);font-size:max(3.6rem,7cqi);max-width:12em;text-align:center}
.hero__mid h2{color:var(--color-secondary);font-size:max(2.4rem,5cqi);transition:color .6s var(--ease-out-sine)}
.hero__mid .word{display:inline-block;transform-origin:bottom;will-change:transform}
.hero__mid .space{display:inline-block;height:1em;width:.3ch}
.hero__top{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero__location{font:var(--font-h4);letter-spacing:.09em;max-width:22em;text-transform:uppercase}
.hero small{color:var(--color-secondary);text-align:center;max-width:44em;line-height:1.6;transition:color .6s var(--ease-out-sine)}

.hero__images{position:relative;display:flex;align-items:center;justify-content:center;width:100%;z-index:1;pointer-events:none;touch-action:none}
.hero__image{position:relative;aspect-ratio:1/1;width:clamp(6rem,100%,14cqi);border-radius:22%;display:grid}
.hero__image:not(:last-child){margin-right:-6%}
.hero__image .tile{grid-area:1/1;border-radius:inherit;
  translate:calc(var(--offsetX,0)*1px) calc(var(--offsetY,0)*1px);
  rotate:calc(var(--rot,0)*1deg - var(--velocity,0)*.25deg);
  box-shadow:var(--shadow);user-select:none;-webkit-user-select:none}

/* mount animation (elastic) */
.hero:not([mounted=true]) .hero__image{scale:0}
.hero:not([mounted=true]) .word{scale:1 0;translate:0 .25ch}
.hero:not([mounted=true]) .hero__top {opacity:0}
.hero[mounted=true] .hero__image{transition:1s scale var(--ease-out-elastic);transition-delay:calc(var(--delay)*.08s + .4s)}
.hero[mounted=true] .word{transition:.8s scale var(--ease-out-elastic),.8s translate var(--ease-out-elastic);transition-delay:calc(var(--delay)*.1s)}
.hero[mounted=true] .hero__top {transition:1.2s opacity var(--ease-out-sine);transition-delay:.25s}

/* ---------- App tile (placeholder icons) ---------- */
.tile{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:22%;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  color:#fff;
}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.tile__glyph{font-size:clamp(2.5rem,34cqi,9rem);line-height:1;filter:drop-shadow(0 .06em .08em rgba(0,0,0,.25));container-type:normal}
.tile{container-type:inline-size}
.tile__glyph{font-size:44cqi}

/* ---------- Carousel ---------- */
.carousel{width:100%;overflow-x:clip;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;padding:4rem 0 3rem}
.carousel:active{cursor:grabbing}
.carousel__track{display:flex;align-items:center;gap:1rem;width:fit-content;will-change:translate}
.carousel__slide{flex:none;width:min(30rem,78vw);display:flex;flex-direction:column;align-items:center;gap:1.2rem;transform-origin:50% 70vw;will-change:rotate,translate}
.carousel__slide .tile{border-radius:var(--tile-radius,22%);box-shadow:var(--shadow);transition:1.4s translate var(--ease-out-elastic),1.4s scale var(--ease-out-elastic)}
.carousel__slide .tile__glyph{font-size:38cqi}
.carousel__slide .button{pointer-events:auto}
.carousel__slide .meta{font:var(--font-h6);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-top:-.4rem}
.carousel:not([inview=true]) .tile{scale:.8;translate:0 20%}
@media (any-hover:hover){.carousel__slide:hover .tile{scale:1.02}}

/* ---------- Skills ---------- */
.skills{display:grid;gap:3rem 2rem;grid-template-columns:1fr;max-width:62rem;width:100%;padding:0 2rem}
@media (width >= 768px){.skills{grid-template-columns:repeat(2,1fr);gap:3.5rem 4rem}}
.skills__group h3{font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;color:var(--color-secondary);transition:color .6s}
.skills__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.skills__chips li{font:var(--font-h2);font-size:clamp(1.6rem,4.5vw,2.4rem);text-transform:uppercase;line-height:1;transform-origin:bottom;transition:1s transform var(--ease-out-elastic-100-30),.15s color var(--ease-in-out-sine)}
.skills__chips li:not(:last-child)::after{content:"/";margin-left:.5rem;color:var(--color-secondary)}
@media (any-hover:hover){.skills__chips li:hover{transform:scaleY(1.25);color:var(--color-secondary)}}

/* ---------- CV ---------- */
.cv{width:100%;max-width:56rem;padding:0 2rem;display:flex;flex-direction:column}
.cv li{display:grid;grid-template-columns:1fr;gap:.4rem;padding:1.6rem 0;border-top:1px solid color-mix(in srgb,var(--color-onPrimary),transparent 82%);transition:.8s translate var(--ease-out-elastic)}
.cv li:last-child{border-bottom:1px solid color-mix(in srgb,var(--color-onPrimary),transparent 82%)}
@media (width >= 768px){.cv li{grid-template-columns:11rem 1fr;gap:2rem}}
@media (any-hover:hover){.cv li:hover{translate:.8rem 0}}
.cv__when{font:var(--font-h4);letter-spacing:.1em;color:var(--color-secondary);text-transform:uppercase;padding-top:.4rem;transition:color .6s}
.cv__role{font:var(--font-h2);font-size:clamp(1.6rem,4vw,2.2rem);text-transform:uppercase}
.cv__org{font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase;margin:.5rem 0}
.cv__desc{opacity:.8;max-width:34em}

/* ---------- Contact form ---------- */
.form{display:flex;flex-direction:column;gap:1.4rem;width:100%;max-width:36rem;padding:0 2rem}
.field{display:flex;flex-direction:column;gap:.6rem}
.field small{opacity:.7}
.field input,.field textarea{
  background:color-mix(in srgb,var(--color-secondary),transparent 65%);
  border:2px solid transparent;border-radius:1rem;padding:1rem 1.2rem;font:var(--font-body);
  color:var(--color-onPrimary);outline:none;resize:vertical;
  transition:.6s border-color var(--ease-out-sine),.8s scale var(--ease-out-elastic),.6s background-color var(--ease-out-sine);
}
.field input:focus,.field textarea:focus{border-color:var(--color-secondary);scale:1.015}
.field input.invalid,.field textarea.invalid{border-color:#e5484d}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__submit{align-self:center;margin-top:.6rem}
.form__submit[disabled]{opacity:.5;pointer-events:none}
.form__status{text-align:center;min-height:1.3em}

/* ---------- Appearance picker ---------- */
.color-picker{
  position:fixed;right:var(--padding);bottom:max(var(--safe-bottom),var(--padding));z-index:3;
  display:grid;place-items:center;
  --toggle-size:3;--gap:3.6;--radius:calc(var(--toggle-size)*.5 + var(--gap));--spacing:.47;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:.5s translate var(--ease-out-elastic),.8s scale var(--ease-out-elastic),.8s visibility;
}
.color-picker__toggle{grid-area:1/1;width:3rem;height:3rem;padding:0;border-radius:50%;box-shadow:var(--shadow);font-size:1.4rem;position:relative;z-index:1}
.color-picker label{
  grid-area:1/1;width:2rem;height:2rem;cursor:pointer;position:relative;
  --translateY:calc(cos(var(--idx) * var(--spacing) + 1.5)*var(--radius)*1rem);
  --translateX:calc(sin(var(--idx) * var(--spacing) + 1.5)*var(--radius)*-1rem);
  scale:.5;transition-duration:.15s;transition-property:translate,scale;transition-timing-function:var(--ease-in-cubic);
}
.color-picker[open=true] label{scale:1;translate:var(--translateX) var(--translateY);transition-duration:.5s;transition-timing-function:var(--ease-out-elastic);transition-delay:calc(var(--idx)*.05s)}
.color-picker:not([open=true]) label{visibility:hidden;transition:.15s translate,.15s scale,0s visibility .15s}
.color-picker input{
  appearance:none;-webkit-appearance:none;width:100%;height:100%;margin:0;padding:0;border-radius:50%;cursor:pointer;
  background-color:color-mix(in srgb,var(--color-primary) 55%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--color-onPrimary) 18%,transparent);box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);
}
.color-picker label svg{position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;color:var(--color-onPrimary);pointer-events:none}
.color-picker input:checked{outline:2px solid var(--color-onPrimary);outline-offset:2px}

/* ---------- Reveal footer ---------- */
.footer,.intersection-phantom{min-height:100dvh;width:100%}
.footer{
  position:fixed;left:0;bottom:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2rem;
  padding:4rem 0;text-align:center;container:footer/inline-size;
  background-color:var(--color-secondary);color:var(--color-onSecondary);
  --scaleY:1;--offsetY:0;
  transform:translateY(calc(var(--offsetY)*1px));
  transition:background-color .6s var(--ease-out-sine);
}
.footer__title{font:20cqi/.8 var(--font-family-headline);white-space:nowrap;letter-spacing:-.01em;text-transform:uppercase;pointer-events:none;user-select:none;-webkit-user-select:none;color:var(--color-primary);transform:scaleY(var(--scaleY));transform-origin:bottom;transition:color .6s}
.footer__title span{position:relative;top:-.1em}
.footer__links{display:flex;flex-direction:column;align-items:center;gap:1rem}
.footer__links__list{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.footer__links__list a{display:block;font:var(--font-h4);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;transform-origin:bottom;transition:.15s color var(--ease-in-out-sine),1s transform var(--ease-out-elastic-100-30)}
@media (any-hover:hover){.footer__links__list a:hover{color:var(--color-primary);transform:scaleY(1.2)}}
.footer small{color:var(--color-primary)}

/* ---------- Dark appearance (Auto follows the device; data-theme forces light/dark) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--color-primary:#141414;--color-secondary:#8a8a8a;--color-onPrimary:#f2f2f2;--color-onSecondary:#141414;color-scheme:dark}
}
:root[data-theme="dark"]{--color-primary:#141414;--color-secondary:#8a8a8a;--color-onPrimary:#f2f2f2;--color-onSecondary:#141414;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01s!important;transition-delay:0s!important}
}

/* ---------- Real app icons ---------- */
.tile--icon{background:none}
.tile--icon::after{display:none}
.tile--icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tile-link{width:100%;cursor:pointer}

/* ---------- App modal ---------- */
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:var(--padding);background:rgba(0,0,0,0);opacity:0;transition:.4s opacity var(--ease-in-out-sine),.4s background-color var(--ease-in-out-sine)}
.modal.is-open{opacity:1;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__panel{position:relative;width:100%;max-width:46rem;max-height:calc(100dvh - 2*var(--padding));overflow-y:auto;overscroll-behavior:contain;background:var(--color-primary);color:var(--color-onPrimary);border-radius:2rem;--pad:2rem;padding:var(--pad);display:flex;flex-direction:column;gap:1.5rem;box-shadow:var(--shadow);scale:.9;transition:.6s scale var(--ease-out-expo)}
.modal.is-open .modal__panel{scale:1}
.modal__close{position:sticky;top:0;align-self:flex-end;margin:-.5rem -.5rem -3rem 0;width:3rem;height:3rem;padding:0;border-radius:50%;z-index:2;flex:none}
.modal.is-open .modal__close .burger i:nth-child(1){translate:0 .275rem;rotate:45deg}
.modal.is-open .modal__close .burger i:nth-child(2){translate:0 -.275rem;rotate:-45deg}
.modal__head{flex:none;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding-right:3rem}
.modal__icon{width:6rem;height:6rem;border-radius:22%;box-shadow:var(--shadow)}
.modal__head>div{flex:1;min-width:10rem}
.modal__title{font:var(--font-h2);font-size:clamp(1.8rem,5vw,2.6rem);text-transform:uppercase}
.modal__cat{opacity:.6;font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase;margin-top:.4rem}
.modal__shots{flex:none;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--pad);margin:0 calc(var(--pad)*-1);scroll-padding-inline:var(--pad)}
.modal__shots img{flex:none;height:clamp(18rem,52dvh,28rem);width:auto;border-radius:1.4rem;scroll-snap-align:center;user-select:none;-webkit-user-select:none}
.modal__desc{white-space:pre-line;max-width:38em}
.modal__cta--bottom{align-self:center}
@media (width < 640px){
  .modal__panel{--pad:1.4rem;border-radius:1.6rem}
  .modal__head .modal__cta{display:none}
}
@media (width >= 640px){.modal__cta--bottom{display:none}}

/* ---------- Frosted-glass floating buttons (iOS 7–18 style blur) ---------- */
.header__nav,.color-picker__toggle{
  background-color:color-mix(in srgb,var(--color-primary) 45%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  color:var(--color-onPrimary);
  border:1px solid color-mix(in srgb,var(--color-primary) 55%,transparent);
  box-shadow:0 4px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35);
}
@media (any-hover:hover){
  .header__nav:hover,.color-picker__toggle:hover{background-color:color-mix(in srgb,var(--color-primary) 60%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.4)}
}

/* devices + per-platform screenshots */
.modal__devices{flex:none;display:flex;flex-direction:column;gap:.7rem}
.modal__devices small{opacity:.6}
.modal__tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.modal__tab{border:2px solid var(--color-secondary);background:transparent;color:inherit;border-radius:50rem;padding:.6rem 1.1rem;cursor:pointer;font:var(--font-h4);letter-spacing:.08em;text-transform:uppercase;transition:.6s scale var(--ease-out-elastic),.3s background-color,.3s color,.3s border-color}
.modal__tab[aria-selected=true]{background:var(--color-secondary);color:var(--color-onSecondary)}
@media (any-hover:hover){.modal__tab:hover{scale:1.06}}
.modal__tab:active{scale:.95}
.modal__shots[data-plat=ipad] img{height:clamp(14rem,40dvh,22rem)}
.modal__shots[data-plat=watch] img{height:clamp(11rem,30dvh,15rem);border-radius:1rem}
.modal__shots[data-plat=vision] img{height:clamp(12rem,34dvh,18rem)}
.modal__shots[data-plat=mac] img{height:clamp(12rem,34dvh,20rem);border-radius:.8rem}

/* ---------- Hide all scroll indicators (scrolling still works) ---------- */
html,body,.modal__panel,.modal__shots,.carousel{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none;width:0;height:0}

/* ---------- Frosted-glass buttons inside the app modal ---------- */
.modal__close,.modal__tab{
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--color-onPrimary) 14%,transparent);
  box-shadow:0 4px 18px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35);
}
.modal__close{background-color:color-mix(in srgb,var(--color-secondary) 55%,transparent);color:var(--color-onPrimary)}
.modal__tab{background-color:color-mix(in srgb,var(--color-secondary) 18%,transparent)}
.modal__tab[aria-selected=true]{background-color:color-mix(in srgb,var(--color-secondary) 70%,transparent);color:var(--color-onPrimary)}
@media (any-hover:hover){
  .modal__close:hover{background-color:color-mix(in srgb,var(--color-secondary) 70%,transparent)}
}

/* Official Apple badge: shown unaltered (no blur, tint or shadow) */
.modal__cta{display:block;flex:none;line-height:0;transition:.8s scale var(--ease-out-elastic)}
.modal__cta img{height:2.75rem;width:auto}
@media (any-hover:hover){.modal__cta:hover{scale:1.05}}
.modal__cta:active{scale:.95}

/* ---------- CV link buttons (with logos) ---------- */
.cv-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;padding:0 var(--padding)}
.cv-links .button{gap:.7rem;padding:1rem 1.6rem}
.cv-links .button svg{width:1.2em;height:1.2em;flex:none}

.modal__private{cursor:default;pointer-events:none;white-space:nowrap}
@media (width < 640px){.modal__head .modal__private{display:none}}
@media (width >= 640px){.modal__private.modal__cta--bottom{display:none}}