*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
}
html{
  scroll-behavior:smooth;
  overflow-y:auto;
}
body{
  background:#000;color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  min-height:100%;
  overflow-y:visible;
  overflow-x:hidden;
}
body.is-loading{
  overflow:hidden;
}

/* PREMIUM LOADING SCREEN */
.site-preloader{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  background:#000;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .78s cubic-bezier(.76,0,.24,1),
    transform .78s cubic-bezier(.76,0,.24,1);
  contain:layout paint style;
}
.site-preloader::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 38%);
  opacity:.55;
  pointer-events:none;
}
.site-preloader.is-hiding{
  opacity:0;
  transform:translateY(-2.2vh);
  pointer-events:none;
}
.preloader-word{
  position:relative;
  z-index:2;
  width:max-content;
  max-width:calc(100vw - 28px);
  color:#fff;
  font-family:"Inter","Arial Black",Arial,sans-serif;
  font-size:clamp(38px, 11.4vw, 145px);
  font-weight:800;
  letter-spacing:-.04em;
  word-spacing:.08em;
  line-height:.9;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
  transform:translateZ(0) scale(1);
  transition:
    opacity .56s cubic-bezier(.76,0,.24,1),
    transform .7s cubic-bezier(.76,0,.24,1);
}
.preloader-word-outline,
.preloader-word-final,
.preloader-slice{
  display:block;
  white-space:nowrap;
}
.preloader-word-outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.65);
  text-stroke:1px rgba(255,255,255,.65);
}
.preloader-word-final,
.preloader-slice{
  position:absolute;
  inset:0;
  color:#fff;
}
.preloader-word-final{
  z-index:1;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  text-shadow:0 0 28px rgba(255,255,255,.12);
}
.preloader-slice{
  z-index:2;
  overflow:hidden;
  clip-path:inset(var(--slice-top) 0 var(--slice-bottom) 0);
}
.preloader-slice span{
  display:block;
  animation:
    preloaderSliceScan 3.1s cubic-bezier(.74,0,.2,1) var(--delay) infinite both,
    preloaderSliceGlitch 3.1s steps(1,end) calc(var(--delay) + .12s) infinite both;
  will-change:clip-path, transform, opacity;
}
.site-preloader.is-completing .preloader-slice span{
  animation-play-state:paused;
}
.site-preloader.is-completing .preloader-word-final{
  opacity:1;
  animation:preloaderFinalFill .48s cubic-bezier(.76,0,.24,1) forwards;
}
.site-preloader.is-completing .preloader-word{
  transform:translateZ(0) scale(1.02);
}
.site-preloader.is-hiding .preloader-word{
  opacity:0;
}
.preloader-corner,
.preloader-plus{
  position:absolute;
  z-index:3;
  color:rgba(255,255,255,.62);
  font-size:clamp(7px, .68vw, 10px);
  font-weight:800;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
  transition:opacity .42s ease, transform .42s ease;
}
.preloader-corner--top-left{
  top:clamp(20px, 4vw, 44px);
  left:clamp(18px, 4vw, 54px);
}
.preloader-corner--top-right{
  top:clamp(20px, 4vw, 44px);
  right:clamp(18px, 4vw, 54px);
}
.preloader-corner--bottom-left{
  bottom:clamp(22px, 4vw, 48px);
  left:clamp(18px, 4vw, 54px);
}
.preloader-corner--bottom-right{
  right:clamp(18px, 4vw, 54px);
  bottom:clamp(22px, 4vw, 48px);
  display:flex;
  align-items:center;
  gap:12px;
}
.preloader-plus{
  top:50%;
  font-size:13px;
  font-weight:300;
  opacity:.55;
  transform:translateY(-50%);
}
.preloader-plus--left{
  left:clamp(18px, 3vw, 42px);
}
.preloader-plus--right{
  right:clamp(18px, 3vw, 42px);
}
.site-preloader.is-completing .preloader-corner,
.site-preloader.is-completing .preloader-plus{
  opacity:0;
  transform:translateY(-6px);
}
.site-preloader.is-completing .preloader-plus{
  transform:translateY(-50%) scale(.7);
}
.preloader-progress{
  position:relative;
  width:clamp(40px, 4vw, 60px);
  height:1px;
  display:block;
  overflow:hidden;
  background:rgba(255,255,255,.18);
}
.preloader-progress span{
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  background:#fff;
  transform:translateX(-110%);
  animation:preloaderProgress 1.15s cubic-bezier(.74,0,.2,1) infinite;
}
.site-preloader.is-completing .preloader-progress span{
  width:100%;
  transform:translateX(0);
  animation:none;
}

@keyframes preloaderSliceScan{
  0%, 5%{
    clip-path:inset(0 100% 0 0);
    opacity:0;
  }
  13%{
    clip-path:inset(0 78% 0 0);
    opacity:.74;
  }
  32%{
    clip-path:inset(0 52% 0 7%);
    opacity:1;
  }
  50%{
    clip-path:inset(0 28% 0 18%);
  }
  68%{
    clip-path:inset(0 8% 0 34%);
  }
  84%{
    clip-path:inset(0 0 0 10%);
  }
  92%, 100%{
    clip-path:inset(0 0 0 0);
    opacity:1;
  }
}
@keyframes preloaderSliceGlitch{
  0%, 37%, 40%, 56%, 59%, 100%{
    transform:translateX(0);
  }
  38%{
    transform:translateX(var(--jitter));
  }
  57%{
    transform:translateX(calc(var(--jitter) * -1));
  }
}
@keyframes preloaderProgress{
  0%{
    transform:translateX(-115%);
  }
  55%{
    transform:translateX(78%);
  }
  100%{
    transform:translateX(185%);
  }
}
@keyframes preloaderFinalFill{
  0%{
    clip-path:inset(0 18% 0 6%);
  }
  100%{
    clip-path:inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-preloader,
  .preloader-word,
  .preloader-corner,
  .preloader-plus{
    transition:opacity .35s ease;
  }
  .preloader-slice,
  .preloader-progress span{
    animation:none;
    display:none;
  }
  .preloader-word-final{
    opacity:1;
    clip-path:inset(0 0 0 0);
    animation:none;
  }
  .site-preloader.is-completing .preloader-word{
    transform:none;
  }
}

@media (max-width:640px){
  .preloader-word{
    font-size:clamp(38px, 13vw, 72px);
    max-width:calc(100vw - 20px);
  }
  .preloader-corner{
    letter-spacing:.16em;
  }
  .preloader-corner--bottom-right{
    gap:9px;
  }
}

/* 3D HERO COMPUTER */
#container3D{
  position:absolute;
  top:28vh;
  left:50%;
  z-index:4;
  width:min(1700px, 102vw);
  height:79vh;
  transform:translateX(-50%);
  background:transparent;
  pointer-events:auto;
  touch-action:none;
}
#container3D canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  pointer-events:auto;
  filter:brightness(1.12) contrast(1.04) saturate(1.03)
    drop-shadow(0 28px 48px rgba(0,0,0,.5));
}

/* HERO SECTION */
.hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  padding:32px 56px 80px;
  overflow:hidden;
  background:#000;
}

/* TOP NAVBAR */
.hero-nav{
  position:absolute;
  top:20px;
  left:50%;
  z-index:10;
  width:min(1180px, calc(100vw - 96px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:center;
  justify-items:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav-link{
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s, color .2s;
  text-decoration:none;
  color:inherit;
}
.nav-link:hover{opacity:1}
.nav-link:focus-visible{
  outline:1px solid rgba(255,255,255,.6);
  outline-offset:4px;
}

/* SIDE LABEL */
.side-label{
  position:absolute; left:32px; top:50%;
  z-index:4;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left top; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; opacity:.7; white-space:nowrap;
}

/* RIGHT ARROW CIRCLE */
.hero-arrow{
  position:absolute; right:72px; top:50%; z-index:4; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.hero-arrow::before,
.hero-arrow::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  opacity:.5;
  line-height:1;
}
.hero-arrow::before{
  content:"<";
  left:8px;
}
.hero-arrow::after{
  content:">";
  right:8px;
}
.swipe-icon{
  position:relative;
  width:18px;
  height:28px;
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:11px;
}
.swipe-dot{
  position:absolute;
  top:8px;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  transform:translateX(-50%);
  animation:swipeX 1.2s ease-in-out infinite;
}
@keyframes swipeX{
  0%{transform:translateX(calc(-50% - 4px)); opacity:.45}
  50%{transform:translateX(calc(-50% + 4px)); opacity:1}
  100%{transform:translateX(calc(-50% - 4px)); opacity:.45}
}

/* HERO DISPLAY */
.hero-display{
  position:absolute;
  left:50%;
  top:8.5vh;
  z-index:1;
  width:min(1760px, 96vw);
  margin:0;
  transform:translateX(-50%);
  color:#edf4ff;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(72px, 12.4vw, 214px);
  line-height:.82;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 18px 46px rgba(120,140,170,.25),
    0 36px 100px rgba(0,0,0,.86);
  pointer-events:none;
}
.hero-display span{
  display:block;
  white-space:nowrap;
}
.hero-intro{
  position:absolute;
  left:clamp(48px, 7vw, 118px);
  top:42vh;
  z-index:6;
  width:min(340px, 31vw);
  margin:0;
  color:rgba(238,244,255,.88);
  font-size:clamp(.9rem, .96vw, 1.08rem);
  font-weight:800;
  line-height:1.68;
  letter-spacing:.035em;
  word-spacing:.14em;
  text-transform:uppercase;
}
.hero-cta{
  position:absolute;
  right:clamp(62px, 12vw, 220px);
  top:42vh;
  z-index:6;
  min-width:164px;
  min-height:58px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
  background:
    linear-gradient(90deg, rgba(139,72,255,.86), rgba(255,138,72,.88));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 18px 45px rgba(139,72,255,.24);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 24px 55px rgba(139,72,255,.32);
}
.hero-cta:focus-visible{
  outline:1px solid rgba(255,255,255,.75);
  outline-offset:5px;
}

/* LEFT STACK */
.hero-left{
  position:absolute;
  top:18vh; left:8vw; max-width:760px; z-index:2;
}
.hero-marker{ position:absolute; left:-28px; top:8px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.marker-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#9b5cf6,#5ec2ff); box-shadow:0 0 0 3px rgba(155,92,246,.25); }
.marker-line{ width:2px; height:190px; display:block; background:linear-gradient(180deg, rgba(155,92,246,.9), rgba(94,194,255,.2)); }
.hero-title{ line-height:1.05; letter-spacing:.02em; font-weight:800; text-transform:none; }
.title-line{ display:block; font-size:clamp(40px,7.5vw,110px); }
.accent{ background:linear-gradient(90deg,#a87bff 0%, #6ad7ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 20px rgba(100,140,255,.15); }
.accent-soft{ color:#a87bff; }
.hero-lead{ margin-top:18px; font-size:clamp(16px,1.6vw,20px); line-height:1.75; max-width:640px; opacity:.9; }

/* SCROLL CIRCLE */
.scroll-indicator{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  z-index:6;
  width:140px; height:140px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
  text-decoration:none; color:inherit;
}
.scroll-svg{position:absolute; width:100%; height:100%; overflow:visible}
.scroll-text{font-size:7px; letter-spacing:.2em; text-transform:uppercase; fill:rgba(255,255,255,.8)}
.scroll-center{position:relative; z-index:2}
.scroll-mouse{
  width:22px;
  height:34px;
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:14px;
  display:flex;
  justify-content:center;
  padding-top:5px;
}
.scroll-wheel{
  width:3px;
  height:7px;
  border-radius:2px;
  background:#fff;
  animation:wheelMove 1.4s ease-in-out infinite;
}
@keyframes wheelMove{
  0%{transform:translateY(0); opacity:1}
  70%{transform:translateY(10px); opacity:.15}
  100%{transform:translateY(0); opacity:1}
}

/* ===== ABOUT US PANEL ===== */
.about-me-panel{
  --am-bg:#000;
  --am-border:rgba(255,255,255,.1);
  --am-title:#f2f5ff;
  --am-copy:rgba(242,245,255,.9);
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  padding:0;
  background:#000;
}
.about-me-shell{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  margin:0;
  overflow:hidden;
  border-top:1px solid var(--am-border);
  border-bottom:1px solid var(--am-border);
  border-radius:0;
  background:#000;
  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.about-me-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:none;
}
.about-me-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  width:min(96vw, 1120px);
  margin:0 auto;
  padding:96px 28px;
  display:grid;
  place-content:center;
  gap:28px;
  text-align:center;
}
.about-me-title{
  color:var(--am-title);
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(88px, 12vw, 192px);
  line-height:.9;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:
    opacity .72s cubic-bezier(.2,.75,.18,1),
    transform .72s cubic-bezier(.2,.75,.18,1),
    filter .72s ease;
  transition-delay:.04s;
}
.about-me-title.typing-caret::after,
.about-me-text.typing-caret::after{
  content:"";
  display:inline-block;
  width:.085em;
  height:.95em;
  margin-left:.08em;
  background:rgba(242,245,255,.92);
  vertical-align:-.08em;
  animation:aboutMeCaret .72s step-end infinite;
}
.about-me-text{
  margin:0 auto;
  max-width:54ch;
  color:var(--am-copy);
  font-size:clamp(28px, 2.1vw, 34px);
  line-height:1.52;
  font-weight:700;
  transition:
    opacity .72s cubic-bezier(.2,.75,.18,1),
    transform .72s cubic-bezier(.2,.75,.18,1),
    filter .72s ease;
  transition-delay:.18s;
}
.about-me-cta{
  --am-cta-shift:0px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  margin-top:6px;
  min-width:250px;
  height:68px;
  padding:0 36px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:16px;
  font-weight:700;
  color:#f4f6ff;
  transform:translateY(var(--am-cta-shift));
  background:
    linear-gradient(#050505,#050505) padding-box,
    linear-gradient(95deg, #3247ff 0%, #d24fff 52%, #f3a04b 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(101,97,255,.22),
    0 0 22px rgba(102,72,255,.45);
  transition:
    opacity .72s cubic-bezier(.2,.75,.18,1),
    transform .72s cubic-bezier(.2,.75,.18,1),
    filter .72s ease,
    box-shadow .2s ease;
  transition-delay:.3s;
}
.about-me-cta:hover{
  transform:translateY(calc(var(--am-cta-shift) - 1px));
  box-shadow:
    0 0 0 1px rgba(101,97,255,.34),
    0 0 28px rgba(125,88,255,.62);
  filter:brightness(1.06);
}
.about-me-cta:focus-visible{
  outline:1px solid rgba(255,255,255,.76);
  outline-offset:4px;
}

.about-me-deco{
  --am-enter-x:0px;
  --am-enter-y:0px;
  --am-enter-scale:.76;
  --am-transform:none;
  position:absolute;
  z-index:1;
  pointer-events:none;
  display:block;
  object-fit:contain;
  object-position:center;
  background:transparent;
  mix-blend-mode:normal;
  filter:
    contrast(1.04)
    saturate(1.05)
    drop-shadow(0 14px 28px rgba(0,0,0,.55));
  transform:var(--am-transform) translate3d(0, 0, 0) scale(1);
  animation:none;
  transition:
    opacity .62s cubic-bezier(.2,.75,.18,1),
    filter .62s ease,
    transform .86s cubic-bezier(.18,.82,.18,1);
}
.about-me-deco--coral{ transition-delay:.2s; }
.about-me-deco--square{ transition-delay:.3s; }
.about-me-deco--flower{ transition-delay:.38s; }
.about-me-deco--heart{ transition-delay:.46s; }
.about-me-deco--coral{
  --am-enter-x:-240px;
  --am-enter-y:-130px;
}
.about-me-deco--square{
  --am-enter-x:230px;
  --am-enter-y:-120px;
}
.about-me-deco--flower{
  --am-enter-x:230px;
  --am-enter-y:0px;
}
.about-me-deco--heart{
  --am-enter-x:-240px;
  --am-enter-y:130px;
}

.about-me-panel.is-armed .about-me-title,
.about-me-panel.is-armed .about-me-text{
  opacity:0;
  transform:translateY(48px);
  filter:blur(8px);
}
.about-me-panel.is-armed .about-me-cta{
  --am-cta-shift:40px;
  opacity:0;
  filter:blur(6px);
}
.about-me-panel.is-armed .about-me-deco{
  opacity:0;
  filter:
    contrast(1.04)
    saturate(1.05)
    drop-shadow(0 14px 28px rgba(0,0,0,.55))
    blur(6px);
  transform:var(--am-transform) translate3d(var(--am-enter-x), var(--am-enter-y), 0) scale(var(--am-enter-scale));
}
.about-me-panel.is-revealed .about-me-title,
.about-me-panel.is-revealed .about-me-text{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.about-me-panel.is-revealed .about-me-cta{
  --am-cta-shift:0px;
  opacity:1;
  filter:blur(0);
}
.about-me-panel.is-revealed .about-me-deco{
  opacity:1;
  filter:
    contrast(1.04)
    saturate(1.05)
    drop-shadow(0 14px 28px rgba(0,0,0,.55))
    blur(0);
  transform:var(--am-transform) translate3d(0, 0, 0) scale(1);
}
.about-me-panel.is-floating.is-inview .about-me-deco{
  animation:aboutMeFloat 7.2s ease-in-out infinite;
}

.about-me-deco--coral{
  --am-transform:rotate(14deg);
  top:-142px;
  left:-130px;
  width:390px;
  height:390px;
}
.about-me-deco--square{
  --am-transform:rotate(10deg);
  top:-24px;
  right:8px;
  width:238px;
  height:238px;
}
.about-me-deco--flower{
  --am-transform:translateY(-50%);
  top:50%;
  right:-42px;
  width:285px;
  height:285px;
}
.about-me-deco--heart{
  --am-transform:rotate(-10deg);
  left:-42px;
  bottom:70px;
  width:320px;
  height:320px;
}

@keyframes aboutMeFloat{
  0%,100%{ transform:var(--am-transform) translateY(0); }
  50%{ transform:var(--am-transform) translateY(-10px); }
}
@keyframes aboutMeCaret{
  0%,100%{ opacity:1; }
  50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .about-me-title,
  .about-me-text,
  .about-me-cta,
  .about-me-deco{
    animation:none;
    transition:none;
  }
  .about-me-panel.is-armed .about-me-title,
  .about-me-panel.is-armed .about-me-text,
  .about-me-panel.is-armed .about-me-cta,
  .about-me-panel.is-armed .about-me-deco{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@media (max-width:900px){
  .about-me-panel{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    padding:0;
  }
  .about-me-shell{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    border-radius:0;
  }
  .about-me-content{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    width:min(96vw, 900px);
    padding:78px 18px 64px;
  }
  .about-me-title{
    font-size:clamp(72px, 16vw, 126px);
  }
  .about-me-text{
    max-width:48ch;
    font-size:clamp(22px, 3.5vw, 28px);
  }
  .about-me-cta{
    min-width:220px;
    height:62px;
    font-size:14px;
  }
  .about-me-deco--coral{
    top:-96px;
    left:-92px;
    width:290px;
    height:290px;
  }
  .about-me-deco--square{
    top:-16px;
    right:4px;
    width:176px;
    height:176px;
  }
  .about-me-deco--flower{
    right:-42px;
    width:205px;
    height:205px;
  }
  .about-me-deco--heart{
    left:-40px;
    bottom:66px;
    width:230px;
    height:230px;
  }
}

@media (max-width:640px){
  .about-me-shell{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
  }
  .about-me-content{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    padding:64px 14px 58px;
    gap:18px;
  }
  .about-me-title{
    font-size:clamp(58px, 17vw, 92px);
  }
  .about-me-text{
    max-width:34ch;
    font-size:clamp(18px, 5.2vw, 24px);
    line-height:1.68;
    font-weight:600;
  }
  .about-me-cta{
    min-width:196px;
    height:56px;
    font-size:13px;
  }
  .about-me-deco--flower{
    top:auto;
    right:-44px;
    bottom:104px;
    width:158px;
    height:158px;
  }
  .about-me-deco--coral{
    width:210px;
    height:210px;
  }
  .about-me-deco--square{
    width:124px;
    height:124px;
  }
  .about-me-deco--heart{
    bottom:52px;
    width:178px;
    height:178px;
  }
}

/* ===== SERVICES SHOWCASE ===== */
.services-showcase{
  position:relative;
  background:#000;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  padding:12px;
  display:grid;
}
.services-panel{
  width:100%;
  min-height:calc(100vh - 24px);
  min-height:calc(100dvh - 24px);
  min-height:calc(100svh - 24px);
  margin:0 auto;
  background:linear-gradient(180deg, #f2f5fb 0%, #edf1f8 100%);
  border:1px solid rgba(125,136,158,.26);
  border-radius:40px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.95);
  padding:clamp(34px, 5.6vw, 76px) clamp(26px, 5vw, 120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.services-title{
  margin:0;
  text-align:center;
  color:#000;
  text-transform:uppercase;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(72px, 11vw, 176px);
  line-height:.86;
  letter-spacing:.03em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 8px 18px rgba(26,36,52,.22);
}
.services-list{
  margin-top:34px;
  display:grid;
  width:min(1180px, 90%);
  margin-left:auto;
  margin-right:auto;
}
.services-item{
  display:grid;
  grid-template-columns:152px minmax(0,1fr);
  gap:24px;
  align-items:start;
  padding:24px 0 26px;
  border-top:1px solid rgba(48,61,85,.12);
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .58s ease,
    transform .58s cubic-bezier(.2,.72,.12,1),
    filter .58s ease;
}
.services-item:first-child{
  border-top:none;
}
.services-reveal-ready .services-item:not(.is-visible){
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(1.4px);
}
@media (prefers-reduced-motion:reduce){
  .services-reveal-ready .services-item{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}
.services-code{
  margin:0;
  color:#101826;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(56px, 6vw, 92px);
  line-height:.88;
  letter-spacing:.04em;
}
.services-copy h3{
  margin:0;
  color:#101826;
  font-size:clamp(30px, 2.8vw, 48px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:.01em;
}
.services-copy p{
  margin:12px 0 0;
  color:#354257;
  font-size:clamp(18px, 1.45vw, 24px);
  line-height:1.6;
  max-width:78ch;
}
@media (max-width:980px){
  .services-showcase{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    padding:10px;
  }
  .services-panel{
    min-height:calc(100vh - 20px);
    min-height:calc(100dvh - 20px);
    min-height:calc(100svh - 20px);
    border-radius:22px;
    padding:30px 18px 34px;
  }
  .services-title{
    font-size:clamp(58px, 16vw, 112px);
  }
  .services-list{
    margin-top:22px;
    width:min(100%, 860px);
  }
  .services-item{
    grid-template-columns:110px minmax(0,1fr);
    gap:16px;
    padding:18px 0 20px;
  }
  .services-code{
    font-size:clamp(44px, 9vw, 66px);
  }
  .services-copy h3{
    font-size:clamp(24px, 4.6vw, 36px);
  }
  .services-copy p{
    font-size:clamp(16px, 3vw, 21px);
    line-height:1.56;
  }
}
@media (max-width:640px){
  .services-showcase{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
    padding:8px;
  }
  .services-panel{
    min-height:calc(100vh - 16px);
    min-height:calc(100dvh - 16px);
    min-height:calc(100svh - 16px);
    border-radius:18px;
    padding:22px 12px 24px;
  }
  .services-title{
    font-size:clamp(48px, 17vw, 86px);
  }
  .services-list{
    width:100%;
  }
  .services-item{
    grid-template-columns:1fr;
    gap:6px;
    padding:14px 0 16px;
  }
  .services-code{
    font-size:42px;
    line-height:1;
  }
  .services-copy h3{
    font-size:clamp(20px, 7vw, 30px);
  }
  .services-copy p{
    font-size:clamp(15px, 4.2vw, 19px);
  }
}

/* ===== SERVICE PROJECT STACK ===== */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.service-projects{
  position:relative;
  z-index:1;
  isolation:isolate;
  background:#000;
  padding:0 12px 12px;
}
.projects-title-screen{
  min-height:50vh;
  padding:clamp(54px, 8vw, 96px) 24px 28px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  text-align:center;
}
.projects-title-kicker{
  margin:0 0 10px;
  color:rgba(238,244,255,.58);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.projects-title{
  margin:0;
  color:#eef4ff;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(76px, 13vw, 188px);
  line-height:.82;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 10px 24px rgba(120,135,160,.32),
    0 34px 70px rgba(0,0,0,.72);
}
.project-stack-card{
  position:sticky;
  top:0;
  z-index:var(--stack-order);
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  padding:clamp(48px, 8vh, 86px) 24px;
  display:grid;
  place-items:center;
}
.project-stack-inner{
  --card-bg:#08090d;
  --card-panel:rgba(255,255,255,.08);
  --project-accent:#67d7bf;
  --project-accent-2:#f2c46b;
  --stack-peek:0px;
  width:calc(100vw - 204px);
  height:min(78vh, 720px);
  min-height:600px;
  overflow:hidden;
  border:1.5px solid rgba(238,244,255,.72);
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 34%),
    var(--card-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 32px 90px rgba(0,0,0,.58);
  padding:24px clamp(22px, 4vw, 48px) 28px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:20px;
  transform:translateY(var(--stack-peek));
}
.project-stack-card--commerce .project-stack-inner{
  --card-bg:#090908;
  --project-accent:#f1c45d;
  --project-accent-2:#d86d64;
  --stack-peek:0px;
}
.project-stack-card--agency .project-stack-inner{
  --card-bg:#070812;
  --project-accent:#75d9ff;
  --project-accent-2:#d6f36c;
  --stack-peek:34px;
}
.project-stack-card--auto .project-stack-inner{
  --card-bg:#080b0a;
  --project-accent:#7de1aa;
  --project-accent-2:#f08f5f;
  --stack-peek:68px;
}
.project-stack-head{
  min-height:60px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.project-stack-number{
  margin:0;
  color:#eef4ff;
  font-family:"Anton","Inter",sans-serif;
  font-size:3.7rem;
  line-height:.82;
  letter-spacing:0;
  text-shadow:0 12px 30px rgba(0,0,0,.5);
}
.project-stack-client{
  display:grid;
  gap:3px;
}
.project-stack-client span,
.project-stack-kicker{
  color:rgba(241,246,255,.58);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}
.project-stack-client strong{
  color:#f7f9ff;
  font-size:.96rem;
  line-height:1.2;
}
.project-stack-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:142px;
  min-height:44px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.74rem;
  font-weight:800;
  background:rgba(255,255,255,.05);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.project-stack-link:hover{
  transform:translateY(-1px);
  border-color:#fff;
  background:rgba(255,255,255,.1);
}
.project-stack-link:focus-visible{
  outline:1px solid #fff;
  outline-offset:4px;
}
.project-stack-content{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(360px, 1.08fr) minmax(360px, .82fr);
  gap:clamp(22px, 3vw, 44px);
  align-items:center;
}
.project-stack-visual{
  min-height:0;
  height:100%;
  display:grid;
  align-items:center;
}
.project-browser{
  position:relative;
  width:100%;
  height:min(100%, 500px);
  min-height:360px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:32px;
  background:#f3f4ef;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
  transform:rotate(-1.4deg);
}
.project-browser--dashboard{
  background:#10131d;
  transform:rotate(1deg);
  height:auto;
  min-height:0;
  aspect-ratio:1.82 / 1;
  max-height:500px;
}
.project-browser--booking{
  background:#141414;
  transform:rotate(-.8deg);
  height:auto;
  min-height:0;
  aspect-ratio:1.82 / 1;
  max-height:500px;
}
.project-browser-bar{
  height:42px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.82);
}
.project-browser--dashboard .project-browser-bar,
.project-browser--booking .project-browser-bar{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.07);
}
.project-browser-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--project-accent);
}
.project-browser-bar span:nth-child(2){
  background:var(--project-accent-2);
}
.project-browser-bar span:nth-child(3){
  background:#20242c;
}
.project-storefront,
.project-dashboard,
.project-booking{
  height:calc(100% - 42px);
  padding:32px;
  display:grid;
  align-content:center;
  gap:26px;
}
.project-storefront{
  background:
    linear-gradient(90deg, rgba(9,9,8,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9,9,8,.08) 1px, transparent 1px),
    #f3f4ef;
  background-size:54px 54px;
}
.project-storefront img{
  width:min(210px, 54%);
  height:auto;
  object-fit:contain;
}
.project-shop-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.project-shop-grid span{
  aspect-ratio:1 / 1.18;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.08)),
    linear-gradient(135deg, var(--project-accent), var(--project-accent-2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.project-dashboard{
  background:
    linear-gradient(90deg, rgba(117,217,255,.14), transparent 34%),
    #10131d;
}
.project-dashboard img{
  width:92px;
  height:92px;
  object-fit:contain;
}
.project-dashboard.project-dashboard--image{
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
  background:#000;
}
.project-dashboard--image img.project-dashboard-shot{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center top;
  background:#000;
}
.project-wave{
  height:152px;
  border-radius:24px;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--project-accent) 8% 10%, transparent 10% 20%, var(--project-accent-2) 20% 23%, transparent 23% 35%, var(--project-accent) 35% 37%, transparent 37% 100%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13);
}
.project-dashboard-lines{
  display:grid;
  gap:12px;
}
.project-dashboard-lines span{
  display:block;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
}
.project-dashboard-lines span:nth-child(2){
  width:72%;
}
.project-dashboard-lines span:nth-child(3){
  width:46%;
}
.project-booking{
  background:
    linear-gradient(135deg, rgba(125,225,170,.18), transparent 38%),
    linear-gradient(180deg, #181818, #0c0f0d);
}
.project-booking img{
  width:min(220px, 58%);
  height:auto;
  object-fit:contain;
}
.project-booking.project-booking--image{
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
  background:#000;
}
.project-booking--image img.project-booking-shot{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
.project-dashboard--image img.project-preview-logo,
.project-booking--image img.project-preview-logo{
  position:absolute;
  z-index:2;
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.62));
}
.project-dashboard--image img.project-preview-logo--web-allies{
  top:clamp(12px, 2vw, 22px);
  left:clamp(12px, 2vw, 22px);
  width:clamp(46px, 6vw, 78px);
  height:auto;
}
.project-booking--image img.project-preview-logo--glosswork{
  top:clamp(12px, 2vw, 22px);
  left:clamp(12px, 2vw, 22px);
  width:clamp(42px, 5vw, 66px);
  height:auto;
}
.project-booking-panel{
  width:min(420px, 100%);
  display:grid;
  gap:12px;
}
.project-booking-panel span{
  display:block;
  height:54px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
}
.project-booking-panel span:nth-child(2){
  width:86%;
}
.project-booking-panel span:nth-child(3){
  width:64%;
  background:linear-gradient(90deg, var(--project-accent), var(--project-accent-2));
}
.project-stack-copy{
  max-width:560px;
  color:#f8fbff;
}
.project-stack-kicker{
  margin:0 0 12px;
  color:var(--project-accent);
}
.project-stack-copy h3{
  margin:0;
  font-size:clamp(2.05rem, 3vw, 2.85rem);
  line-height:1;
  letter-spacing:0;
  font-weight:800;
}
.project-stack-copy p{
  margin:14px 0 0;
  color:rgba(248,251,255,.76);
  font-size:1rem;
  line-height:1.54;
}
.project-stack-points{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.project-stack-card--auto .project-stack-copy p{
  max-width:46ch;
}
.project-stack-card--auto .project-stack-points{
  margin-top:14px;
  gap:8px;
}
.project-stack-card--auto .project-stack-points li{
  line-height:1.32;
}
.project-stack-points li{
  position:relative;
  padding-left:28px;
  color:rgba(248,251,255,.86);
  font-size:.98rem;
  line-height:1.45;
}
.project-stack-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:12px;
  height:2px;
  background:var(--project-accent-2);
}
@media (prefers-reduced-motion: reduce){
  .project-stack-card{
    position:relative;
  }
  .project-stack-link{
    transition:none;
  }
}
@media (max-width:980px){
  .service-projects{
    padding:0 10px 10px;
  }
  .project-stack-card{
    padding:10px 0 0;
  }
  .project-stack-inner{
    width:100%;
    height:calc(100vh - 20px);
    height:calc(100dvh - 20px);
    height:calc(100svh - 20px);
    min-height:680px;
    padding:22px 18px 26px;
    gap:18px;
  }
  .project-stack-head{
    min-height:64px;
    gap:14px;
  }
  .project-stack-number{
    font-size:3.65rem;
  }
  .project-stack-content{
    grid-template-columns:1fr;
    grid-template-rows:minmax(240px, 42%) minmax(0, 1fr);
    gap:20px;
  }
  .project-browser{
    height:100%;
    min-height:240px;
    transform:none;
  }
  .project-browser--dashboard{
    height:100%;
    min-height:240px;
    max-height:none;
    aspect-ratio:auto;
  }
  .project-browser--booking{
    height:100%;
    min-height:240px;
    max-height:none;
    aspect-ratio:auto;
  }
  .project-storefront,
  .project-dashboard,
  .project-booking{
    padding:22px;
    gap:18px;
  }
  .project-wave{
    height:92px;
  }
  .project-stack-copy{
    max-width:720px;
  }
  .project-stack-copy h3{
    font-size:2.45rem;
  }
  .project-stack-copy p{
    margin-top:14px;
    font-size:1rem;
    line-height:1.56;
  }
  .project-stack-points{
    margin-top:18px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
}
@media (max-width:640px){
  .service-projects{
    padding:0 8px 8px;
  }
  .project-stack-card{
    padding:8px 0 0;
  }
  .project-stack-inner{
    width:100%;
    height:calc(100vh - 16px);
    height:calc(100dvh - 16px);
    height:calc(100svh - 16px);
    min-height:620px;
    padding:16px 12px 20px;
    gap:14px;
  }
  .project-stack-head{
    grid-template-columns:auto minmax(0,1fr);
    min-height:0;
  }
  .project-stack-number{
    font-size:2.75rem;
  }
  .project-stack-link{
    grid-column:1 / -1;
    justify-self:start;
    min-width:126px;
    min-height:38px;
    padding:0 14px;
    font-size:.68rem;
  }
  .project-stack-client span,
  .project-stack-kicker{
    font-size:.68rem;
  }
  .project-stack-client strong{
    font-size:.88rem;
  }
  .project-stack-content{
    grid-template-rows:minmax(190px, 34%) minmax(0, 1fr);
    gap:16px;
  }
  .project-browser{
    min-height:190px;
  }
  .project-browser--dashboard{
    min-height:190px;
  }
  .project-browser--booking{
    min-height:190px;
  }
  .project-browser-bar{
    height:34px;
  }
  .project-storefront,
  .project-dashboard,
  .project-booking{
    height:calc(100% - 34px);
    padding:16px;
    gap:12px;
  }
  .project-shop-grid{
    gap:8px;
  }
  .project-dashboard img{
    width:62px;
    height:62px;
  }
  .project-wave{
    height:62px;
  }
  .project-booking-panel{
    gap:8px;
  }
  .project-booking-panel span{
    height:36px;
  }
  .project-stack-copy h3{
    font-size:1.62rem;
    line-height:1.06;
  }
  .project-stack-copy p{
    margin-top:10px;
    font-size:.92rem;
    line-height:1.48;
  }
  .project-stack-points{
    display:none;
  }
}
@media (max-height:760px){
  .project-stack-inner{
    min-height:0;
    padding-top:16px;
    padding-bottom:18px;
    gap:14px;
  }
  .project-stack-head{
    min-height:54px;
  }
  .project-stack-number{
    font-size:3rem;
  }
  .project-stack-copy h3{
    font-size:2rem;
  }
  .project-stack-copy p{
    font-size:.92rem;
    line-height:1.44;
  }
  .project-stack-points{
    display:none;
  }
  .project-browser{
    min-height:210px;
  }
}

/* ===== ABOUT ===== */
.about-us{
  position:relative;
  padding:14px 24px 90px;
  background:#06060b;
  border-top:none;
}
.about-scene{
  width:min(1240px, 96vw);
  min-height:640px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 80px rgba(0,0,0,.55);
  background:
    linear-gradient(130deg, rgba(168,123,255,.18), transparent 36%),
    radial-gradient(920px 520px at 76% 52%, rgba(162,120,255,.12), transparent 70%),
    radial-gradient(600px 340px at 16% 72%, rgba(93,72,170,.24), transparent 72%),
    #07070d;
}
.about-scene::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background:
    repeating-linear-gradient(116deg, rgba(255,255,255,.07) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.45));
}
.about-scene::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-180px;
  height:330px;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(165,127,255,.35), rgba(0,0,0,0) 70%);
}
.about-corner-brand{
  position:absolute;
  left:22px;
  top:18px;
  z-index:2;
  display:grid;
  gap:0;
}
.about-brand-mark{
  font-family:"Playfair Display", serif;
  font-size:34px;
  line-height:1;
  color:#b694ff;
  text-shadow:0 0 20px rgba(182,148,255,.4);
}
.about-brand-text{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.82;
}
.about-corner-note{
  position:absolute;
  right:24px;
  top:16px;
  z-index:2;
  display:grid;
  justify-items:end;
  gap:2px;
}
.about-corner-note strong{
  font-size:17px;
  color:#b694ff;
  font-weight:700;
}
.about-corner-note span{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.13em;
  opacity:.75;
}
.about-frame-card{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%, -50%);
  z-index:3;
  width:min(66vw, 820px);
  padding:34px 30px 28px;
  color:#eef0ff;
  background:linear-gradient(162deg, rgba(7,8,14,.92), rgba(8,9,14,.72));
  border:1.6px solid rgba(198,178,255,.9);
  clip-path:polygon(26px 0, 42% 0, calc(42% + 20px) 14px, calc(100% - 38px) 14px, 100% 42px, 100% calc(100% - 28px), calc(100% - 26px) 100%, 56% 100%, calc(56% - 18px) calc(100% - 14px), 30% calc(100% - 14px), calc(30% - 16px) 100%, 18px 100%, 0 calc(100% - 30px), 0 20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 34px rgba(160,128,255,.2),
    0 18px 50px rgba(0,0,0,.56);
  backdrop-filter:blur(4px);
}
.about-frame-card::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(211,197,255,.45);
  clip-path:polygon(18px 0, 42% 0, calc(42% + 15px) 10px, calc(100% - 30px) 10px, 100% 34px, 100% calc(100% - 22px), calc(100% - 20px) 100%, 56% 100%, calc(56% - 14px) calc(100% - 10px), 31% calc(100% - 10px), calc(31% - 12px) 100%, 12px 100%, 0 calc(100% - 24px), 0 14px);
  pointer-events:none;
}
.about-frame-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:66px;
  height:10px;
  transform:translateX(-50%);
  border-top:2px solid rgba(205,189,255,.95);
  border-bottom:2px solid rgba(205,189,255,.95);
}
.frame-slash{
  position:absolute;
  width:34px;
  height:8px;
  background:repeating-linear-gradient(120deg, rgba(242,238,255,.95) 0 2px, transparent 2px 5px);
  opacity:.9;
}
.frame-slash-top{
  left:24px;
  top:18px;
}
.frame-slash-bottom{
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
}
.about-frame-card h1{
  margin:0 0 14px;
  font-size:clamp(34px, 4vw, 50px);
  line-height:1.08;
  color:#fff;
  text-align:center;
}
.about-frame-card h1 span{
  color:#b694ff;
}
.about-frame-card p{
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.6;
  opacity:.92;
}
.about-hero-figure{
  margin:0;
  position:absolute;
  right:-4px;
  bottom:0;
  width:min(57%, 720px);
  height:88%;
  z-index:2;
  pointer-events:none;
}
.about-hero-image{
  position:absolute;
  right:3%;
  bottom:0;
  height:100%;
  width:auto;
  max-width:none;
  object-fit:contain;
  filter:
    drop-shadow(0 24px 40px rgba(0,0,0,.55))
    drop-shadow(0 0 26px rgba(182,148,255,.2));
}
.about-scene-footer{
  position:absolute;
  left:26px;
  bottom:24px;
  z-index:3;
  margin:0;
  padding:7px 10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border:1px solid rgba(182,148,255,.55);
  background:rgba(10,10,15,.7);
}

/* ===== CLIENT TESTIMONIALS ===== */
.client-testimonials{
  position:sticky;
  top:0;
  z-index:4;
  min-height:132vh;
  min-height:132dvh;
  min-height:132svh;
  margin-top:0;
  padding:clamp(30px, 4vh, 48px) 0;
  display:grid;
  align-items:stretch;
  overflow:hidden;
  background:#000;
  border-top:none;
}
.client-testimonials::before,
.client-testimonials::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.client-testimonials::before{
  content:none;
}
.client-testimonials::after{
  content:none;
}
.client-testimonials-wrap{
  position:sticky;
  top:0;
  z-index:1;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  margin:0;
  display:grid;
  align-content:center;
}
.client-testimonials-kicker{
  margin:0 0 12px;
  text-align:center;
  color:rgba(238,244,255,.55);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.client-testimonials-title{
  margin:0 auto;
  max-width:680px;
  color:#eef4ff;
  text-align:center;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(46px, 6.4vw, 88px);
  line-height:.94;
  letter-spacing:.02em;
  text-transform:capitalize;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 10px 24px rgba(120,135,160,.28),
    0 26px 60px rgba(0,0,0,.9);
}
.client-testimonials-emoji{
  position:absolute;
  top:44px;
  right:clamp(28px, 9vw, 126px);
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5c744;
  font-size:38px;
  box-shadow:
    inset 0 -7px 14px rgba(152,83,0,.26),
    0 16px 40px rgba(245,199,68,.28);
  transform:rotate(9deg);
}
.testimonial-lanes{
  width:100vw;
  margin-top:28px;
  margin-left:0;
  display:grid;
  gap:12px;
  overflow:hidden;
}
.testimonial-row{
  --base-offset:0px;
  --row-shift:0px;
  position:relative;
  display:flex;
  gap:12px;
  width:max-content;
  transform:translate3d(calc(var(--base-offset) + var(--row-shift)), 0, 0);
  will-change:transform;
}
.testimonial-row::after{
  content:"";
  position:absolute;
  left:-100vw;
  right:-100vw;
  bottom:-7px;
  height:3px;
  border-top:1px solid rgba(238,244,255,.38);
  border-bottom:1px solid rgba(238,244,255,.18);
  box-shadow:0 0 10px rgba(238,244,255,.14);
  pointer-events:none;
}
.testimonial-row:last-child::after{
  bottom:-10px;
}
.testimonial-card{
  flex:0 0 auto;
  width:clamp(360px, 25vw, 470px);
  height:150px;
  padding:18px 22px;
  border:1px solid rgba(238,244,255,.72);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(5,7,10,.88);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 4px rgba(255,255,255,.025),
    0 18px 40px rgba(0,0,0,.48);
  display:grid;
  grid-template-columns:56px minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr) auto;
  column-gap:16px;
  row-gap:7px;
  align-items:center;
}
.testimonial-card p{
  grid-column:2;
  grid-row:1;
  align-self:end;
  margin:0;
  color:rgba(238,244,255,.82);
  font-size:clamp(.76rem, .82vw, .88rem);
  line-height:1.36;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}
.testimonial-person{
  display:contents;
}
.testimonial-avatar{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:center;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#06100d;
  font-size:.72rem;
  font-weight:900;
  background:linear-gradient(135deg, #eef4ff, #72dfbd 52%, #f4b56c);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.35);
}
.testimonial-person strong{
  grid-column:2;
  grid-row:2;
  align-self:start;
  color:#fff;
  font-size:.78rem;
  line-height:1.22;
  text-transform:uppercase;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .hero-left{left:6vw; top:16vh; max-width:70ch;}
  #container3D{
    top:30vh;
    width:120vw;
    height:73vh;
  }
  .hero-display{
    top:10vh;
    font-size:clamp(66px, 13vw, 150px);
  }
  .hero-intro{
    left:6vw;
    top:55vh;
    width:330px;
  }
  .hero-cta{
    right:7vw;
    top:55vh;
  }
  .testimonial-card{
    width:360px;
  }
}
@media (max-width:900px){
  .hero{padding:24px 20px 80px}
  .hero-nav{
    top:18px;
    width:calc(100vw - 32px);
    font-size:9px;
    letter-spacing:.12em;
  }
  .side-label,.hero-arrow{display:none}
  #container3D{
    top:30vh;
    left:0;
    width:100%;
    height:54vh;
    transform:none;
    pointer-events:none;
    touch-action:pan-y;
  }
  #container3D canvas{
    pointer-events:none;
  }
  .hero-display{
    top:10vh;
    width:calc(100vw - 32px);
    font-size:clamp(52px, 16vw, 116px);
  }
  .hero-intro{
    left:24px;
    top:auto;
    bottom:150px;
    width:min(320px, calc(100vw - 48px));
    font-size:.82rem;
    line-height:1.62;
    word-spacing:.1em;
  }
  .hero-cta{
    left:24px;
    right:auto;
    top:auto;
    bottom:88px;
    min-width:146px;
    min-height:48px;
    padding:0 20px;
  }
  .hero-left{position:static; margin-top:120px; left:auto; top:auto; padding-left:6px;}
  .marker-line{height:140px}
  .scroll-indicator{
    left:auto;
    right:24px;
    bottom:34px;
    width:92px;
    height:92px;
    transform:none;
  }
  .scroll-text{font-size:6px}
}
@media (max-width:640px){
  .hero{
    padding:18px 16px 64px;
  }
  .hero-nav{
    width:calc(100vw - 24px);
    font-size:7px;
    letter-spacing:.07em;
  }
  #container3D{
    top:29vh;
    height:44vh;
  }
  #container3D canvas{
    filter:brightness(1.06) contrast(1.03) saturate(1.02)
      drop-shadow(0 20px 34px rgba(0,0,0,.5));
  }
  .hero-display{
    top:10vh;
    width:calc(100vw - 28px);
    font-size:clamp(50px, 16.4vw, 72px);
    line-height:.86;
  }
  .hero-intro{
    left:20px;
    right:20px;
    bottom:128px;
    width:auto;
    max-width:calc(100vw - 40px);
    font-size:clamp(.78rem, 3.5vw, .92rem);
    line-height:1.55;
  }
  .hero-cta{
    left:20px;
    bottom:64px;
    min-width:148px;
    min-height:48px;
  }
  .scroll-indicator{
    right:18px;
    bottom:38px;
    width:78px;
    height:78px;
  }
  .scroll-text{
    font-size:5px;
  }
  .scroll-mouse{
    width:17px;
    height:26px;
  }
  .client-testimonials{
    min-height:132vh;
    min-height:132dvh;
    min-height:132svh;
    padding:48px 0 38px;
  }
  .client-testimonials-wrap{
    min-height:100vh;
    min-height:100dvh;
    min-height:100svh;
  }
  .client-testimonials-title{
    font-size:clamp(42px, 16vw, 66px);
  }
  .client-testimonials-emoji{
    position:relative;
    top:auto;
    right:auto;
    width:58px;
    height:58px;
    margin:18px auto 0;
    font-size:29px;
  }
  .testimonial-lanes{
    margin-top:24px;
    gap:12px;
  }
  .testimonial-row{ gap:12px; }
  .testimonial-card{
    width:316px;
    height:156px;
    padding:18px;
    border-radius:24px;
  }
}
@media (max-width:980px){
  .about-scene{
    min-height:auto;
    padding:88px 16px 20px;
  }
  .about-corner-brand{
    top:12px;
    left:14px;
  }
  .about-corner-note{
    top:14px;
    right:14px;
  }
  .about-frame-card{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    clip-path:none;
    border-radius:12px;
    padding:18px 16px;
  }
  .about-frame-card::before{
    display:none;
  }
  .about-frame-card::after{
    display:none;
  }
  .frame-slash{
    display:none;
  }
  .about-frame-card h1{
    font-size:28px;
  }
  .about-hero-figure{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    height:320px;
    margin-top:14px;
  }
  .about-hero-image{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    height:100%;
  }
  .about-scene-footer{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:12px;
    width:max-content;
  }
}

/* ===== TECH STACK ===== */
.stack{
  position:relative;
  z-index:5;
  padding:96px 24px 110px;
  background:#070a12;
  border-top:1px solid rgba(255,255,255,.06);
}
.stack{padding: 80px 24px 40px;}
.stack-wrap{max-width: 1200px;margin:0 auto;}
.stack-title{font-size: clamp(28px,4.6vw,56px);font-weight:800;margin:0 0 4px;}
.stack-sub{opacity:.75;margin:0 0 32px;}

.skills-grid{
  display:grid;
  grid-template-columns: repeat(7, 150px);
  grid-auto-rows: 170px;
  justify-content:center;
  column-gap: 26px;
  row-gap: 14px;
}
.skill{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.skill-canvas{
  width: 120px;
  height: 120px;
  display:block;
  background: transparent;
  border: none;
}
.skill-static-icon{
  width:120px;
  height:120px;
  display:block;
  object-fit:contain;
  padding:24px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.92), rgba(255,255,255,.36) 28%, rgba(126,142,170,.34) 62%, rgba(34,39,52,.86) 100%);
  box-shadow:
    inset -16px -18px 26px rgba(0,0,0,.24),
    inset 12px 10px 18px rgba(255,255,255,.22),
    0 18px 42px rgba(0,0,0,.22);
}
.skill > span{ font-size: 16px; opacity: .9; }
@media (max-width: 1100px){
  .skills-grid{ grid-template-columns: repeat(6, 140px); }
}
@media (max-width: 920px){
  .skills-grid{ grid-template-columns: repeat(5, 140px); }
}
@media (max-width: 760px){
  .skills-grid{ grid-template-columns: repeat(4, 140px); }
}
@media (max-width: 600px){
  .skills-grid{ grid-template-columns: repeat(3, 130px); }
  .skill-canvas,
  .skill-static-icon{ width:110px; height:110px; }
  .skill-static-icon{ padding:22px; }
}

/* ===== CONTACT ===== */
.contact{
  position:relative;
  z-index:5;
  padding:120px 0 120px;
  border-top:1px solid rgba(255,255,255,06);
  background:#070a12; /* keep sections readable under 3D */
  overflow:hidden;
}

/* ✅ Star animated background (behind BOTH card + planet) */
/* ✅ Stronger star animated background */
.contact::before,
.contact::after{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  z-index:0;
  background-repeat:repeat;
}

/* MANY small stars */
.contact::before{
  opacity:1;
  background-image:
    radial-gradient(1px 1px at 5% 15%, rgba(255,255,255,.95) 50%, transparent 55%),
    radial-gradient(1px 1px at 12% 65%, rgba(255,255,255,.85) 50%, transparent 55%),
    radial-gradient(1px 1px at 18% 35%, rgba(255,255,255,.80) 50%, transparent 55%),
    radial-gradient(1px 1px at 25% 85%, rgba(255,255,255,.90) 50%, transparent 55%),
    radial-gradient(1px 1px at 32% 20%, rgba(255,255,255,.75) 50%, transparent 55%),
    radial-gradient(1px 1px at 38% 60%, rgba(255,255,255,.95) 50%, transparent 55%),
    radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,.80) 50%, transparent 55%),
    radial-gradient(1px 1px at 52% 75%, rgba(255,255,255,.88) 50%, transparent 55%),
    radial-gradient(1px 1px at 58% 25%, rgba(255,255,255,.90) 50%, transparent 55%),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,.78) 50%, transparent 55%),
    radial-gradient(1px 1px at 72% 15%, rgba(255,255,255,.92) 50%, transparent 55%),
    radial-gradient(1px 1px at 78% 70%, rgba(255,255,255,.85) 50%, transparent 55%),
    radial-gradient(1px 1px at 84% 35%, rgba(255,255,255,.80) 50%, transparent 55%),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,.92) 50%, transparent 55%),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,.75) 50%, transparent 55%);
  background-size: 180px 180px;
  animation: starsMove 50s linear infinite, starsTwinkle 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.25));
}

/* BIGGER stars (fewer) */
.contact::after{
  opacity:1;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,.75) 50%, transparent 55%),
    radial-gradient(2px 2px at 35% 75%, rgba(255,255,255,.60) 50%, transparent 55%),
    radial-gradient(2px 2px at 55% 35%, rgba(255,255,255,.70) 50%, transparent 55%),
    radial-gradient(2px 2px at 75% 60%, rgba(255,255,255,.65) 50%, transparent 55%),
    radial-gradient(2px 2px at 90% 20%, rgba(255,255,255,.60) 50%, transparent 55%);
  background-size: 920px 920px;
  animation: starsMove2 110s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.30));
}

@keyframes starsMove{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-220px, 160px, 0); }
}
@keyframes starsMove2{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(200px, -180px, 0); }
}

/* subtle flicker */
@keyframes starsTwinkle{
  0%,100%{ opacity:.85; }
  50%{ opacity:.55; }
}

.contact-wrap{
  width:min(1160px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:44px;
  align-items:center;
  position:relative;
  z-index:1; /* ✅ above stars */
}

/* Left card */
.contact-card{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, rgba(128,90,255,22), rgba(0,0,0,18));
  border:1px solid rgba(255,255,255,10);
  border-radius:18px;
  padding:28px 26px;
  box-shadow:0 20px 70px rgba(0,0,0,45);
  backdrop-filter: blur(8px);
}

.contact-eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  opacity:.75;
  margin-bottom:10px;
}

.contact-title{
  font-size: clamp(38px, 5.5vw, 64px);
  line-height:1.05;
  font-weight:800;
  margin-bottom:22px;
}

.contact-form{
  display:grid;
  gap:16px;
}

.contact-label{
  display:grid;
  gap:8px;
  font-size:14px;
  opacity:.95;
}

.contact-label span{
  font-weight:600;
  opacity:.9;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.55);
  color:#fff;
  padding:12px 14px;
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.contact-form textarea{
  resize:vertical;
  min-height:140px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.55);
}

.contact-btn{
  width:max-content;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.04em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.contact-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

.contact-credit{
  margin-top:10px;
  font-size:12px;
  opacity:.6;
  line-height:1.5;
}

/* Right visual */
.contact-visual{
  position:relative;
  min-height:520px;
}

/* ✅ Give more room + make the canvas area larger */
#contact3D{
  position:absolute;
  inset:-120px -120px -120px -340px; /* more space to show a BIG planet */
  pointer-events:auto;
  touch-action:none;
  z-index:0;
}
#contact3D canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  pointer-events:auto;
}

/* Responsive */
@media (max-width: 980px){
  .contact{
    padding:96px 0 92px;
  }
  .contact-wrap{
    grid-template-columns: 1fr;
    width:min(680px, calc(100% - 28px));
    gap:20px;
  }
  .contact-visual{
    min-height:360px;
    order:1;
    margin:-38px 0 -18px;
  }
  .contact-card{
    order:2;
    padding:26px clamp(16px, 5vw, 28px);
  }
  #contact3D{
    inset:-26px -42px -18px -42px;
    pointer-events:none;
    touch-action:pan-y;
  }
  #contact3D canvas{
    pointer-events:none;
  }
}

@media (max-width: 640px){
  .contact{
    padding:82px 0 86px;
  }
  .contact-wrap{
    width:calc(100% - 24px);
    gap:14px;
  }
  .contact-visual{
    min-height:300px;
    margin:-30px 0 -12px;
  }
  .contact-card{
    border-radius:18px;
    padding:24px 20px 26px;
  }
  .contact-title{
    font-size:clamp(44px, 15vw, 58px);
  }
  .contact-form{
    gap:14px;
  }
  .contact-form textarea{
    min-height:136px;
  }
  #contact3D{
    inset:-18px -62px -12px -62px;
  }
}

/* ===== FOOTER ===== */
.site-footer{
  position:relative;
  z-index:6;
  margin-top:-76px;
  padding:18px 12px 0;
  background:#050505;
}
.footer-stage{
  position:relative;
  --footer-bg:#030407;
  width:100%;
  min-height:315px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(238,244,255,.16);
  border-bottom:none;
  border-radius:22px 22px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%),
    var(--footer-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 28px 90px rgba(0,0,0,.62);
}
.footer-stage::before{
  content:"";
  position:absolute;
  inset:-40% -10% auto;
  height:260px;
  background:radial-gradient(circle, rgba(130,150,255,.14), transparent 65%);
  pointer-events:none;
}
.footer-top{
  position:relative;
  z-index:2;
  padding:clamp(34px, 4vw, 50px) clamp(34px, 5vw, 68px) 0;
  display:grid;
  grid-template-columns:minmax(250px, 1fr) minmax(112px, auto) minmax(190px, auto);
  gap:clamp(42px, 7vw, 112px);
  align-items:start;
}
.footer-wordmark{
  width:max-content;
  color:transparent;
  text-decoration:none;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(38px, 3.9vw, 58px);
  line-height:.88;
  letter-spacing:.02em;
  text-transform:uppercase;
  -webkit-text-stroke:1.4px rgba(238,244,255,.48);
  text-shadow:0 16px 35px rgba(0,0,0,.45);
  display:grid;
  gap:2px;
}
.footer-wordmark:hover,
.footer-wordmark:focus-visible{
  -webkit-text-stroke-color:rgba(238,244,255,.78);
}
.footer-wordmark:focus-visible{
  outline:1px solid rgba(255,255,255,.6);
  outline-offset:8px;
}
.footer-column{
  display:grid;
  gap:6px;
  color:#f6f8ff;
  font-size:11px;
  line-height:1.25;
}
.footer-heading{
  margin:0 0 8px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-column a,
.footer-column span{
  color:rgba(238,244,255,.82);
  text-decoration:none;
  font-weight:700;
}
.footer-column a:hover,
.footer-column a:focus-visible{
  color:#fff;
}
.footer-column a:focus-visible{
  outline:1px solid rgba(255,255,255,.6);
  outline-offset:3px;
}

/* ===== PRICING PAGE ===== */
.pricing-page{
  min-height:100vh;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}
.pricing-page .subpage-head{
  position:relative;
}
.pricing-page .subpage-head .hero-nav{
  position:relative;
  top:auto;
  left:auto;
  width:min(1180px, calc(100vw - 48px));
  margin:0 auto;
  transform:none;
}
.pricing-main{
  min-height:100vh;
}
.pricing-hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  padding:clamp(78px, 8vw, 118px) clamp(16px, 4vw, 64px) 72px;
  overflow:hidden;
  background:#000;
}
.pricing-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:76px 76px;
  opacity:.22;
}
.pricing-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 18%, rgba(123,70,255,.2), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(255,162,44,.14), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%);
  pointer-events:none;
}
.pricing-shell{
  width:min(1220px, 100%);
  margin:0 auto;
}
.pricing-kicker{
  margin:0 0 16px;
  color:rgba(238,244,255,.72);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.22em;
  text-align:center;
  text-transform:uppercase;
}
.pricing-title{
  margin:0 auto;
  max-width:980px;
  color:#edf4ff;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(70px, 10vw, 168px);
  line-height:.88;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(255,255,255,.62),
    0 28px 78px rgba(0,0,0,.82);
}
.pricing-lead{
  width:min(760px, 92vw);
  margin:22px auto 0;
  color:rgba(238,244,255,.76);
  font-size:clamp(1rem, 1.25vw, 1.22rem);
  line-height:1.7;
  text-align:center;
}
.pricing-tabs{
  margin-top:clamp(30px, 4vw, 48px);
}
.pricing-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.pricing-switch{
  width:min(620px, 100%);
  min-height:58px;
  margin:0 auto;
  padding:5px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
  border:1px solid rgba(238,244,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.28);
}
.pricing-tab{
  min-height:48px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  color:rgba(238,244,255,.62);
  cursor:pointer;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.1em;
  text-align:center;
  text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pricing-tab:hover{
  color:#fff;
}
#pricing-web:checked ~ .pricing-switch label[for="pricing-web"],
#pricing-mobile:checked ~ .pricing-switch label[for="pricing-mobile"]{
  color:#fff;
  border-color:rgba(238,244,255,.28);
  background:
    linear-gradient(90deg, rgba(123,70,255,.9), rgba(255,162,44,.72));
  box-shadow:0 12px 30px rgba(123,70,255,.28);
}
.pricing-panel{
  display:none;
}
#pricing-web:checked ~ .pricing-panels .pricing-panel--web,
#pricing-mobile:checked ~ .pricing-panels .pricing-panel--mobile{
  display:block;
}
.pricing-panel-head{
  margin:clamp(34px, 4.8vw, 62px) auto 0;
  text-align:center;
}
.pricing-panel-kicker{
  margin:0 0 10px;
  color:rgba(238,244,255,.54);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.pricing-panel-head h2,
.pricing-addons h2{
  margin:0;
  color:#fff;
  font-size:clamp(2rem, 4.2vw, 4.25rem);
  line-height:.98;
  letter-spacing:.01em;
}
.pricing-grid{
  margin-top:clamp(38px, 5vw, 72px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.pricing-card{
  position:relative;
  min-height:560px;
  padding:24px 22px 22px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(238,244,255,.18);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 40%, rgba(255,255,255,.015)),
    rgba(4,5,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 28px 70px rgba(0,0,0,.42);
  overflow:hidden;
}
.pricing-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:var(--price-accent, #8b72ff);
}
.pricing-card:nth-child(1){--price-accent:#8b72ff}
.pricing-card:nth-child(2){--price-accent:#65d8ff}
.pricing-card:nth-child(3){--price-accent:#ffa22c}
.pricing-card:nth-child(4){--price-accent:#f629c8}
.pricing-card:nth-child(5){--price-accent:#a7f45f}
.pricing-card:nth-child(6){--price-accent:#cdeeff}
.pricing-card.is-featured{
  border-color:rgba(255,162,44,.54);
  transform:translateY(-10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 34px 86px rgba(255,162,44,.14),
    0 28px 70px rgba(0,0,0,.46);
}
.pricing-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  min-height:26px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  background:linear-gradient(90deg, rgba(123,70,255,.86), rgba(255,162,44,.78));
}
.pricing-card__label{
  margin:0 0 20px;
  color:rgba(238,244,255,.58);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pricing-card__title{
  margin:0;
  color:#fff;
  font-size:clamp(1.48rem, 2.2vw, 2rem);
  line-height:1.02;
  letter-spacing:.01em;
}
.pricing-card__price{
  margin:24px 0 0;
  display:block;
  color:#fff;
  font-family:"Anton","Inter",sans-serif;
  font-size:clamp(2rem, 2.65vw, 2.75rem);
  line-height:1;
  letter-spacing:0;
  overflow-wrap:normal;
}
.pricing-card__price--variable{
  font-size:clamp(1.72rem, 2.35vw, 2.35rem);
}
.pricing-card__copy{
  margin:18px 0 0;
  color:rgba(238,244,255,.72);
  font-size:.96rem;
  line-height:1.6;
}
.pricing-card__features{
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  list-style:none;
}
.pricing-card__features li{
  position:relative;
  padding-left:18px;
  color:rgba(238,244,255,.82);
  font-size:.9rem;
  line-height:1.45;
}
.pricing-card__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.64em;
  width:7px;
  height:2px;
  background:var(--price-accent, #8b72ff);
}
.pricing-card__cta{
  margin-top:auto;
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(238,244,255,.22);
  border-radius:999px;
  color:#fff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  background:rgba(255,255,255,.04);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.pricing-card__cta:hover{
  transform:translateY(-2px);
  border-color:rgba(238,244,255,.44);
  background:rgba(255,255,255,.075);
}
.maintenance-section{
  margin-top:clamp(54px, 7vw, 96px);
  padding:clamp(26px, 4vw, 50px);
  border:1px solid rgba(238,244,255,.14);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.018)),
    rgba(4,5,8,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 30px 80px rgba(0,0,0,.36);
}
.maintenance-head{
  width:min(820px, 100%);
  margin:0 auto;
  text-align:center;
}
.maintenance-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(2.2rem, 5vw, 5rem);
  line-height:.96;
  letter-spacing:.01em;
}
.maintenance-head p:last-child{
  margin:16px auto 0;
  color:rgba(238,244,255,.72);
  font-size:clamp(.98rem, 1.18vw, 1.12rem);
  line-height:1.7;
}
.maintenance-tabs{
  margin-top:clamp(28px, 4vw, 44px);
}
.maintenance-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.maintenance-switch{
  width:min(680px, 100%);
  min-height:58px;
  margin:0 auto;
  padding:5px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
  border:1px solid rgba(238,244,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.28);
}
.maintenance-tab{
  min-height:48px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  color:rgba(238,244,255,.62);
  cursor:pointer;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.1em;
  text-align:center;
  text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.maintenance-tab:hover{
  color:#fff;
}
#maintenance-web:checked ~ .maintenance-switch label[for="maintenance-web"],
#maintenance-mobile:checked ~ .maintenance-switch label[for="maintenance-mobile"]{
  color:#fff;
  border-color:rgba(238,244,255,.28);
  background:
    linear-gradient(90deg, rgba(123,70,255,.9), rgba(255,162,44,.72));
  box-shadow:0 12px 30px rgba(123,70,255,.28);
}
.maintenance-panel{
  display:none;
}
#maintenance-web:checked ~ .maintenance-panels .maintenance-panel--web,
#maintenance-mobile:checked ~ .maintenance-panels .maintenance-panel--mobile{
  display:block;
}
.maintenance-panel-title{
  margin:clamp(34px, 4.8vw, 58px) auto 0;
  text-align:center;
}
.maintenance-panel-title h3{
  margin:0;
  color:#fff;
  font-size:clamp(2rem, 4.2vw, 4.2rem);
  line-height:.98;
  letter-spacing:.01em;
}
.maintenance-grid{
  margin-top:clamp(34px, 4.8vw, 60px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.maintenance-card{
  min-height:500px;
}
.maintenance-price{
  font-size:clamp(2rem, 2.7vw, 2.9rem);
}
.maintenance-conditions{
  margin-top:clamp(32px, 4.6vw, 58px);
  padding:clamp(22px, 3vw, 34px);
  border:1px solid rgba(238,244,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.maintenance-conditions p{
  margin:0 auto;
  max-width:960px;
  color:rgba(238,244,255,.78);
  font-size:.96rem;
  line-height:1.7;
  text-align:center;
}
.maintenance-conditions p + p{
  margin-top:12px;
}
.maintenance-cost-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.maintenance-cost-grid span{
  min-height:42px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  border:1px solid rgba(238,244,255,.1);
  border-radius:7px;
  color:rgba(238,244,255,.72);
  font-size:.84rem;
  line-height:1.35;
  background:rgba(0,0,0,.2);
}
.maintenance-custom{
  color:#fff !important;
  font-weight:900;
}
.pricing-addons{
  margin-top:clamp(46px, 6vw, 82px);
  padding:clamp(26px, 3.8vw, 44px);
  border:1px solid rgba(238,244,255,.14);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(4,5,8,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 28px 70px rgba(0,0,0,.34);
  text-align:center;
}
.pricing-addons-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  text-align:left;
}
.pricing-addon-card{
  padding:20px;
  border:1px solid rgba(238,244,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.pricing-addon-card h3{
  margin:0 0 14px;
  color:#fff;
  font-size:1.1rem;
}
.pricing-addon-card ul{
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  list-style:none;
}
.pricing-addon-card li{
  position:relative;
  padding-left:16px;
  color:rgba(238,244,255,.76);
  font-size:.9rem;
  line-height:1.45;
}
.pricing-addon-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:6px;
  height:2px;
  background:#8b72ff;
}
.pricing-note{
  margin:28px auto 0;
  max-width:940px;
  color:rgba(238,244,255,.68);
  font-size:.95rem;
  line-height:1.7;
  text-align:center;
}
.pricing-page .site-footer{
  margin-top:0;
}
@media (max-width: 1120px){
  .pricing-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .maintenance-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .maintenance-card.is-featured{
    transform:none;
  }
  .maintenance-cost-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .pricing-addons-grid{
    grid-template-columns:1fr;
  }
  .pricing-card.is-featured{
    transform:none;
  }
}
@media (max-width: 680px){
  body.pricing-page{
    overflow-x:hidden;
  }
  .hero-nav{
    width:calc(100vw - 24px);
    font-size:7px;
    letter-spacing:.06em;
  }
  .pricing-page .subpage-head .hero-nav{
    width:calc(100vw - 48px);
  }
  .pricing-hero{
    padding:68px 12px 54px;
  }
  .pricing-title{
    width:100%;
    font-size:clamp(52px, 15vw, 66px);
  }
  .pricing-lead{
    width:100%;
    max-width:calc(100vw - 32px);
    font-size:.96rem;
  }
  .pricing-switch{
    min-height:0;
    border-radius:8px;
    grid-template-columns:1fr;
  }
  .pricing-tab{
    min-height:44px;
    border-radius:6px;
    font-size:.7rem;
  }
  .pricing-panel-head h2,
  .pricing-addons h2{
    font-size:clamp(2rem, 10vw, 3.2rem);
  }
  .maintenance-section{
    padding:24px 14px;
  }
  .maintenance-head h2,
  .maintenance-panel-title h3{
    font-size:clamp(2rem, 10vw, 3.2rem);
  }
  .maintenance-switch{
    min-height:0;
    border-radius:8px;
    grid-template-columns:1fr;
  }
  .maintenance-tab{
    min-height:44px;
    border-radius:6px;
    font-size:.7rem;
  }
  .pricing-grid{
    grid-template-columns:1fr;
  }
  .maintenance-grid{
    grid-template-columns:1fr;
  }
  .pricing-card{
    width:100%;
    min-height:0;
    padding:22px 18px 20px;
  }
  .maintenance-price{
    font-size:clamp(1.85rem, 8.8vw, 2.35rem);
  }
  .maintenance-conditions{
    padding:20px 14px;
  }
  .maintenance-cost-grid{
    grid-template-columns:1fr;
  }
  .pricing-card__price{
    font-size:clamp(1.8rem, 8.8vw, 2.35rem);
  }
  .pricing-card__price--variable{
    font-size:clamp(1.55rem, 7.8vw, 2rem);
  }
  .pricing-card__copy,
  .pricing-card__features li{
    overflow-wrap:anywhere;
  }
  .pricing-addons{
    padding:22px 16px;
  }
  .pricing-addon-card{
    padding:18px;
  }
}
.footer-art{
  position:absolute;
  left:0;
  right:0;
  bottom:34px;
  z-index:1;
  height:128px;
  overflow:hidden;
}
.footer-symbols-svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.32));
}
.footer-symbol-bg{
  fill:var(--footer-bg);
}
.footer-copy{
  position:absolute;
  right:clamp(28px, 4vw, 58px);
  bottom:12px;
  z-index:2;
  margin:0;
  color:rgba(238,244,255,.48);
  font-size:11px;
  font-weight:700;
}
@media (max-width: 980px){
  .footer-stage{
    min-height:560px;
    border-radius:24px;
  }
  .footer-top{
    padding:38px 24px 0;
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .footer-wordmark{
    grid-column:1 / -1;
  }
  .footer-art{
    left:18px;
    right:18px;
    bottom:54px;
    height:136px;
  }
  .footer-copy{
    left:24px;
    right:24px;
    text-align:left;
  }
}
@media (min-width: 1500px){
  .footer-stage{
    width:100%;
  }
  .footer-art{
    bottom:34px;
    height:132px;
  }
}
@media (min-width: 1900px){
  .footer-stage{
    width:100%;
  }
  .footer-art{
    left:0;
    right:0;
    height:138px;
  }
}
@media (max-width: 560px){
  .site-footer{
    padding-inline:8px;
  }
  .footer-stage{
    width:calc(100vw - 16px);
    min-height:640px;
  }
  .footer-top{
    grid-template-columns:1fr;
    gap:22px;
  }
  .footer-art{
    transform:scale(.68);
  }
}

/* ===== ABOUT PAGE ===== */
.about-page{
  background:#05050a;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
}
.about-page #main-content{
  min-height:100vh;
}
.about-main{
  min-height:100vh;
}
.subpage-head{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:40;
  padding:20px 24px 0;
}
.subpage-head .hero-nav{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  width:min(1240px, 96vw);
  margin:0 auto;
}
.about-page .about-us{
  min-height:100vh;
  padding:0;
  border-top:none;
}
.about-page .about-scene{
  width:100vw;
  height:100vh;
  min-height:100vh;
  border:none;
  box-shadow:none;
}
@media (max-width: 900px){
  .subpage-head{
    position:relative;
    padding:16px 20px 6px;
  }
  .subpage-head .hero-nav{
    left:auto;
    right:auto;
  }
  .about-page{
    overflow:auto;
  }
  .about-page .about-scene{
    width:min(1240px, 96vw);
    height:auto;
    min-height:auto;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 80px rgba(0,0,0,.55);
  }
  .about-page .about-us{
    padding:8px 0 18px;
    min-height:auto;
  }
}

/* ===== ABOUT COVER ===== */
.about-cover{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(4,6,14,.82) 0%, rgba(4,6,14,.72) 28%, rgba(4,6,14,.34) 52%, rgba(4,6,14,.56) 100%),
    url("../images/aboutus.png") center center / 94% auto no-repeat;
}
.about-cover::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 360px at 18% 78%, rgba(10,14,28,.44), transparent 66%),
    linear-gradient(130deg, rgba(255,255,255,.05) 0, transparent 22%, transparent 100%);
}
.about-cover-inner{
  position:relative;
  z-index:2;
  width:min(540px, 88vw);
  margin-left:6vw;
  color:#fff;
}
.about-cover-name{
  font-size:clamp(34px, 5.8vw, 72px);
  font-weight:800;
  line-height:.9;
  margin:0;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.about-cover-title{
  margin:8px 0 0;
  font-size:clamp(52px, 8.8vw, 112px);
  line-height:.82;
  font-weight:800;
  text-transform:uppercase;
}
.about-cover-title span{
  color:#fff;
  text-shadow:0 0 28px rgba(255,255,255,.16);
}
.about-cover-role{
  margin:14px 0 0;
  font-size:clamp(13px, 1.3vw, 18px);
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.9;
}
.about-cover-text{
  margin:18px 0 0;
  max-width:44ch;
  font-size:14px;
  line-height:1.65;
  opacity:.84;
}
.about-cover-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.about-cover-btn{
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.66);
  border-radius:999px;
  padding:9px 20px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(7,9,16,.3);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.about-cover-btn:hover{
  transform:translateY(-1px);
  border-color:#fff;
  background:rgba(7,9,16,.56);
}
.about-cover-social{
  position:absolute;
  left:6vw;
  bottom:4.2vh;
  z-index:2;
  display:flex;
  gap:8px;
}
.about-cover-social a{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  font-size:11px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.44);
  border-radius:999px;
  background:rgba(7,9,16,.35);
}

.about-fall{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:0;
  color:#171722;
  background:url("../images/skills/aboutusbackground.png") center center / cover no-repeat;
}
.about-fall::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:clamp(58px, 8vw, 92px);
  z-index:4;
  background:#07070a;
  clip-path:polygon(
    0 0, 100% 0, 100% 72%,
    96% 67%, 91% 76%, 86% 69%, 81% 78%, 75% 70%, 70% 79%,
    64% 71%, 58% 80%, 52% 73%, 46% 82%, 40% 74%, 34% 83%,
    28% 75%, 22% 81%, 16% 73%, 10% 79%, 5% 70%, 0 76%
  );
}
.about-fall::after{
  content:none;
}
.about-fall-layout{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  margin:0 auto;
}
.about-fall-note{
  position:absolute;
  z-index:3;
  max-width:min(42ch, 35vw);
  font-size:15px;
  line-height:1.84;
  color:rgba(20,20,28,.84);
}
.about-fall-kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#3e3e48;
}
.about-fall-note h2{
  margin:0 0 12px;
  font-size:clamp(30px, 3.2vw, 54px);
  line-height:1.06;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#121218;
}
.about-fall-note p{
  margin:0;
}
.about-fall-note--left{
  top:18%;
  left:9%;
}
.about-fall-note--feature{
  max-width:min(44ch, 36vw);
}
.about-fall-note--secondary{
  max-width:min(44ch, 32vw);
  font-size:18px;
  line-height:1.9;
  opacity:.85;
}
.about-fall-note--secondary .about-fall-kicker{
  font-size:15px;
  margin-bottom:14px;
  letter-spacing:.18em;
}
.about-fall-note--right-bottom .about-fall-kicker{
  font-size:19px;
  font-weight:700;
  color:#a8872f;
  text-shadow:0 1px 0 rgba(255,245,204,.45);
}
.about-fall-note--left-bottom{
  top:62%;
  left:14%;
}
.about-fall-note--right-top{
  top:14%;
  right:14%;
  text-align:right;
}
.about-fall-note--right-bottom{
  top:61%;
  right:14%;
}
.about-fall-note code{
  font-size:11px;
  color:#1f1f27;
  background:rgba(0,0,0,.08);
  padding:2px 7px;
  border-radius:999px;
}
.about-fall-figure{
  position:absolute;
  left:50%;
  top:50%;
  width:min(44vw, 620px);
  aspect-ratio:3 / 5;
  z-index:2;
  isolation:isolate;
  transform:translate(-50%, -50%);
  border-radius:0;
  background:url("../images/skills/falling.png") center center / contain no-repeat;
  overflow:visible;
  filter:none;
  animation:none;
}
.about-fall-feetstones{
  position:absolute;
  left:50%;
  top:-16%;
  width:min(82vw, 1280px);
  height:min(28vw, 460px);
  transform:translateX(-50%);
  pointer-events:none;
  background:url("../images/skills/feetstones.png") center top / contain no-repeat;
  z-index:3;
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,.34))
    drop-shadow(0 0 24px rgba(0,0,0,.22));
}
.about-fall-feetstones::before{
  content:"";
  position:absolute;
  inset:-20% -18% -10%;
  pointer-events:none;
  background:url("../images/skills/feetstones.png") center top / contain no-repeat;
  opacity:.52;
  transform:rotate(3deg) scale(1.18);
}
.about-fall-feetstones::after{
  content:"";
  position:absolute;
  inset:-14% -12% -6%;
  pointer-events:none;
  background:url("../images/skills/feetstones.png") center top / contain no-repeat;
  opacity:.38;
  transform:rotate(-4deg) scale(1.12);
}
.about-fall-bird{
  position:absolute;
  right:24%;
  top:24%;
  width:min(46vw, 720px);
  height:min(20vw, 320px);
  z-index:3;
  pointer-events:none;
  background:url("../images/skills/bird.png") center center / contain no-repeat;
  opacity:.92;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.about-fall-mountain{
  position:absolute;
  left:-2%;
  bottom:-1%;
  width:min(42vw, 690px);
  height:min(70vh, 760px);
  z-index:1;
  pointer-events:none;
  background:url("../images/skills/mountain.png") left bottom / contain no-repeat;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.25));
}
.about-fall-figure::before{
  content:"";
  position:absolute;
  inset:-18% -28%;
  z-index:-1;
  pointer-events:none;
  background:url("../images/skills/breakingstones.png") center center / contain no-repeat;
  opacity:.95;
}
.about-fall-figure::after{
  content:"";
  position:absolute;
  inset:-10% -18%;
  z-index:-1;
  pointer-events:none;
  background:url("../images/skills/breakingstones.png") center center / contain no-repeat;
  opacity:.45;
  transform:rotate(8deg);
}

@media (max-width: 900px){
  .about-cover{
    align-items:flex-end;
    padding:0 0 86px;
    background-position:62% center;
  }
  .about-cover-inner{
    width:min(620px, 92vw);
    margin:0 auto;
  }
  .about-cover-role{
    letter-spacing:.18em;
  }
  .about-cover-social{
    left:4vw;
    bottom:24px;
  }
  .about-fall{
    min-height:100vh;
    padding:0;
  }
  .about-fall-layout{
    min-height:100vh;
    display:block;
  }
  .about-fall-note{
    position:absolute;
    max-width:min(38ch, 72vw);
    text-align:left;
    background:rgba(255,255,255,.66);
    padding:12px 14px;
  border-radius:16px;
  }
  .about-fall-note--feature{
    top:96px;
    left:16px;
    right:auto;
    max-width:min(46ch, 78vw);
  }
  .about-fall-note--secondary{
    display:none;
  }
  .about-fall-figure{
    position:absolute;
    left:50%;
    top:54%;
    width:min(84vw, 460px);
    height:auto;
    margin:0;
    transform:translate(-50%, -50%);
  }
  .about-fall-feetstones{
    top:-6%;
    width:min(152vw, 980px);
    height:min(64vw, 440px);
  }
  .about-fall-feetstones::before{
    inset:-16% -12% -8%;
  }
  .about-fall-feetstones::after{
    inset:-10% -8% -5%;
  }
  .about-fall-bird{
    right:14%;
    top:30%;
    width:min(88vw, 560px);
    height:min(38vw, 320px);
  }
  .about-fall-mountain{
    left:-10%;
    bottom:-2%;
    width:min(82vw, 500px);
    height:min(56vh, 460px);
  }
  .about-fall-figure::before{
    inset:-14% -16%;
  }
  .about-fall-figure::after{
    inset:-8% -12%;
  }
}