*{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#000000;
  --white:#ffffff;
  --soft:#f2f3f6;
  --muted:#b7bdc9;
  --blue:#2457ff;
  --blue-dark:#1739b5;
  --blue-soft:#4e7aff;
  --violet:#775cff;
  --indigo:#5367ff;
  --surface:#080a0f;
  --surface-2:#0c0f17;
}
html{scroll-behavior:smooth;background:#000}
body{
  background:#000;
  color:var(--white);
  font-family:"DM Sans",sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(36,87,255,.055) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 65%,rgba(119,92,255,.04) 0 1px,transparent 1px);
  background-size:130px 130px,170px 170px;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mouse-light{
  position:fixed;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(36,87,255,.13);pointer-events:none;z-index:45;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .25s;
}
.site-header{
  width:min(1280px,100%);
  height:88px;
  margin:auto;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:40;
}
.logo-link{display:flex;align-items:center}
.site-logo{width:145px;height:auto;display:block;object-fit:contain}
.nav{display:flex;align-items:center;gap:34px}
.nav a{
  color:#fff;
  font-size:13px;
  font-weight:500;
  transition:color .25s,transform .25s;
}
.nav a:hover{color:#6f8cff;transform:translateY(-1px)}
.header-cta{
  display:inline-flex;align-items:center;
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-size:12px;
  font-weight:700;
  transition:transform .25s,box-shadow .25s;
}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(36,87,255,.22)}
.header-cta span{margin-left:10px;color:var(--blue)}
.menu-toggle{display:none;border:0;background:none;color:#fff}
.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px 0}

.hero,.stack,.intro-flow,.services,.work,.process,.reviews,.cta{
  width:min(1280px,100%);
  margin:auto;
  padding-left:34px;
  padding-right:34px;
}
.hero{
  min-height:calc(100vh - 88px);
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:30px;
  padding-top:55px;
  padding-bottom:70px;
  position:relative;
}
.hero-copy{position:relative;z-index:3}
.eyebrow{
  color:#7390ff;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:700;
}
.eyebrow span{color:#535b6c;margin:0 5px}
.hero-title{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(62px,7.8vw,118px);
  line-height:.88;
  letter-spacing:-.075em;
  margin:28px 0 32px;
  max-width:760px;
}
.hero-title em,.section-title em,.statement em,.process-title em,.cta-title em{
  color:#5477ff;
  font-style:normal;
}
.hero-text{
  color:#e4e7ed;
  max-width:600px;
  font-size:17px;
  line-height:1.7;
}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:35px}
.primary-button{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#000;
  border-radius:999px;
  padding:15px 19px;
  font-size:13px;font-weight:700;
  transition:transform .25s,box-shadow .25s;
}
.primary-button:hover{transform:translateY(-3px);box-shadow:0 16px 45px rgba(36,87,255,.24)}
.primary-button span{color:var(--blue);margin-left:12px}
.quiet-link{font-size:13px;color:#d7dbe4;transition:color .25s}
.quiet-link:hover{color:#6f8cff}
.quiet-link span{margin-left:8px;color:#6f8cff}
.hero-visual{height:600px;position:relative;display:grid;place-items:center}
.scene{
  width:540px;height:540px;position:relative;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
}
.planet{
  position:absolute;left:50%;top:50%;
  width:170px;height:170px;
  transform:translate(-50%,-50%) translateZ(40px);
  border-radius:32px;
  background:#090b10;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 40px rgba(36,87,255,.11);
  display:grid;place-items:center;
}
.planet:before,.planet:after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(36,87,255,.5);
}
.planet:before{inset:16px;transform:rotate(25deg) scaleY(.36)}
.planet:after{inset:28px;transform:rotate(-30deg) scaleY(.28)}
.planet span{
  font-family:"Space Grotesk";font-weight:700;font-size:43px;letter-spacing:-.12em;
  position:relative;z-index:2;
}
.ring{
  position:absolute;left:50%;top:50%;
  border-radius:50%;
  border:1px solid rgba(36,87,255,.55);
  transform-style:preserve-3d;
}
.ring-a{width:500px;height:175px;transform:translate(-50%,-50%) rotateX(70deg);animation:orbitA 18s linear infinite}
.ring-b{width:420px;height:420px;transform:translate(-50%,-50%) rotateY(70deg);border-color:rgba(119,92,255,.5);animation:orbitB 24s linear infinite}
.ring-c{width:320px;height:320px;transform:translate(-50%,-50%) rotateX(62deg) rotateY(24deg);border-color:rgba(78,122,255,.38);animation:orbitC 16s linear infinite}
.orb{
  position:absolute;border-radius:50%;z-index:4;
  box-shadow:0 0 30px rgba(36,87,255,.18);
}
.orb-one{width:13px;height:13px;background:#4e7aff;left:15%;top:48%;animation:floatA 5s ease-in-out infinite}
.orb-two{width:9px;height:9px;background:#fff;right:14%;top:28%;animation:floatB 6s ease-in-out infinite}
.orb-three{width:11px;height:11px;background:#775cff;right:23%;bottom:18%;animation:floatC 7s ease-in-out infinite}
.float-object{
  position:absolute;z-index:6;
  width:62px;height:62px;border-radius:18px;
  display:grid;place-items:center;
  background:#080a0f;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  font-size:24px;
}
.float-object i{font-size:26px}
.object-one{left:7%;top:20%;animation:floatA 5.5s ease-in-out infinite}
.object-two{right:7%;top:18%;animation:floatB 6.2s ease-in-out infinite}
.object-three{right:3%;bottom:22%;animation:floatC 5.8s ease-in-out infinite}
.object-four{left:9%;bottom:18%;font-size:14px;font-weight:700;color:#dfe5ff;animation:floatB 7s ease-in-out infinite}
.scene-glow{
  position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;
}
.glow-one{width:220px;height:220px;left:10%;top:10%;background:rgba(36,87,255,.055)}
.glow-two{width:190px;height:190px;right:8%;bottom:8%;background:rgba(119,92,255,.045)}
.tiny-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7}
.star-one{left:24%;top:12%}.star-two{right:26%;top:42%}.star-three{left:31%;bottom:20%}.star-four{right:15%;bottom:35%}
.hero-bottom{
  position:absolute;left:34px;bottom:25px;
  display:flex;gap:12px;align-items:center;
  color:#8790a0;font-size:9px;letter-spacing:.2em;
}
.hero-arrow{color:#6f8cff;font-size:15px}

.stack{padding-top:125px;padding-bottom:150px}
.stack-copy{max-width:850px}
.section-title{
  font-family:"Space Grotesk";
  font-size:clamp(45px,5.5vw,76px);
  line-height:.98;
  letter-spacing:-.065em;
  margin-top:20px;
}
.section-copy{color:#d5dae3;font-size:14px;line-height:1.75;max-width:470px}
.stack-copy .section-copy{margin-top:27px}
.logo-marquee{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;margin-top:85px;
  padding:22px 0;
}
.logo-track{display:flex;width:max-content;animation:logoMove 34s linear infinite}
.logo-set{display:flex;align-items:center;gap:15px;padding-right:15px}
.logo-set span{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;
  border-radius:999px;
  background:#07090d;
  border:1px solid #171c26;
  color:#fff;
  font-size:12px;white-space:nowrap;
}
.logo-set i{font-size:18px}
.devicon-nextjs-plain,.devicon-apple-original,.devicon-github-original,.devicon-vercel-original,.devicon-openai-original{color:#fff}

.intro-flow{padding-top:140px;padding-bottom:150px;display:grid;grid-template-columns:180px 1fr;gap:50px}
.intro-kicker{color:#6f8cff;font-size:10px;letter-spacing:.2em;font-weight:700}
.statement{font-family:"Space Grotesk";font-size:clamp(45px,6vw,82px);line-height:.98;letter-spacing:-.07em}
.statement-copy{color:#d9dde5;max-width:610px;font-size:16px;line-height:1.8;margin-top:38px}

.section-heading,.review-heading{
  display:grid;grid-template-columns:1fr 390px;gap:50px;align-items:end;
}
.services{padding-bottom:150px}
.service-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:65px;
}
.service-card{
  min-height:470px;
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:28px;
  background:#07090d;
  border:1px solid #171b24;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:#2b385e;
  background:#090c13;
}
.service-number{font-family:"Space Grotesk";font-size:12px;color:#6f8cff}
.service-icon{
  width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;
  position:absolute;right:28px;top:28px;
  font-weight:700;font-size:17px;
}
.service-icon-blue{background:#0e1d5c;color:#7691ff}
.service-icon-violet{background:#1a123b;color:#a999ff}
.service-icon-purple{background:#171341;color:#8878ff}
.service-icon-white{background:#17191e;color:#fff}
.service-label{margin-top:95px;color:#748094;font-size:9px;letter-spacing:.2em;font-weight:700}
.service-card h3{
  font-family:"Space Grotesk";font-size:40px;line-height:1;letter-spacing:-.055em;margin-top:12px;
}
.service-description{color:#cfd5df;max-width:470px;font-size:14px;line-height:1.75;margin-top:25px}
.service-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:30px}
.service-tags span{
  border:1px solid #232a37;color:#d9deea;padding:7px 10px;border-radius:999px;font-size:10px;
}
.service-card:after{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-70px;bottom:-70px;border:1px solid rgba(36,87,255,.16);
  transition:transform .6s ease;
}
.service-card:hover:after{transform:scale(1.35)}

.work{padding-bottom:155px}
.projects{margin-top:70px;display:flex;flex-direction:column;gap:105px}
.project{position:relative}
.project-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.project-index{font-family:"Space Grotesk";font-size:14px;color:#6f8cff;margin-right:16px}
.project-type,.project-url{font-size:9px;letter-spacing:.16em;color:#8992a3}
.project-url{letter-spacing:.04em;text-transform:none;color:#cbd1dc}
.project-carousel{
  height:min(66vw,690px);
  min-height:390px;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:#080a0e;
}
.project-slides{height:100%;display:flex;transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.project-slides img{min-width:100%;height:100%;object-fit:cover;display:block}
.carousel-prev,.carousel-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.62);color:#fff;
  cursor:pointer;z-index:4;
  transition:background .25s,transform .25s,border-color .25s;
}
.carousel-prev{left:18px}.carousel-next{right:18px}
.carousel-prev:hover,.carousel-next:hover{background:#fff;color:#000;border-color:#fff}
.carousel-progress{
  position:absolute;left:20px;right:20px;bottom:18px;height:2px;background:rgba(255,255,255,.22);overflow:hidden;
}
.carousel-progress span{display:block;width:33.333%;height:100%;background:#5477ff;transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.carousel-count{
  position:absolute;right:20px;top:18px;
  padding:8px 11px;border-radius:999px;
  background:rgba(0,0,0,.65);color:#fff;font-size:10px;letter-spacing:.08em;
}
.carousel-count b{color:#6f8cff}
.project-bottom{
  display:flex;justify-content:space-between;gap:45px;align-items:flex-end;
  padding-top:28px;
}
.project-bottom h3{font-family:"Space Grotesk";font-size:42px;letter-spacing:-.05em}
.project-bottom p{max-width:760px;color:#d0d5df;font-size:14px;line-height:1.8;margin-top:12px}
.project-button{
  flex:0 0 auto;
  padding:12px 15px;border:1px solid #2b3343;border-radius:999px;
  font-size:11px;color:#fff;transition:.25s;
}
.project-button:hover{background:#fff;color:#000}
.project-button-muted{color:#7f8796}

.process{padding-bottom:160px}
.process-heading{max-width:1050px}
.process-title{
  font-family:"Space Grotesk";
  font-size:clamp(48px,6.3vw,88px);
  line-height:.96;letter-spacing:-.075em;margin-top:20px;
}
.process-copy{max-width:590px;color:#d4d9e2;font-size:15px;line-height:1.75;margin-top:30px}
.process-cards{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin-top:70px;
}
.process-card{
  min-height:355px;padding:24px;border-radius:25px;
  background:#07090d;border:1px solid #171b24;
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s;
}
.process-card:hover,.process-card.active{
  transform:translateY(-12px);
  background:#0a0d14;
  border-color:#2d3b66;
}
.process-card-number{font-family:"Space Grotesk";font-size:12px;color:#6f8cff}
.process-card-label{display:block;margin-top:65px;color:#788397;font-size:9px;letter-spacing:.18em}
.process-card h3{font-family:"Space Grotesk";font-size:24px;line-height:1.05;letter-spacing:-.04em;margin-top:12px}
.process-card p{color:#aeb5c2;font-size:12px;line-height:1.7;margin-top:20px}
.process-symbol{
  position:absolute;right:22px;bottom:20px;color:#5f7eff;font-size:18px;
}
.process-card:before{
  content:"";position:absolute;left:-45px;bottom:-55px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(36,87,255,.13);
}
.process-card:nth-child(2):before,.process-card:nth-child(4):before{border-color:rgba(119,92,255,.13)}

.reviews{padding-bottom:160px}
.review-heading{margin-bottom:65px}
.review-marquee{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;
}
.review-track{
  display:flex;width:max-content;gap:16px;
  animation:reviewMove 34s linear infinite;
}
.review-card{
  width:390px;min-height:270px;
  flex:0 0 390px;
  border-radius:26px;
  background:#07090d;
  border:1px solid #171b24;
  padding:28px;
  position:relative;
}
.review-person{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.avatar-blue{background:#10245f;color:#82a0ff}
.avatar-violet{background:#211645;color:#a999ff}
.avatar-indigo{background:#171d58;color:#8a9bff}
.avatar-white{background:#e9ebf0;color:#08090c}
.review-person strong{display:block;font-size:13px}
.review-person span{display:block;color:#7f8898;font-size:10px;margin-top:2px}
.review-card p{font-family:"Space Grotesk";font-size:22px;line-height:1.18;letter-spacing:-.035em;margin-top:42px;max-width:330px}
.review-mark{position:absolute;right:25px;bottom:20px;color:#596171;font-size:10px}
.sample-note{color:#70798a;font-size:10px;margin-top:22px}

.cta{
  min-height:730px;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  padding-top:100px;padding-bottom:130px;
}
.cta-content{position:relative;z-index:4;text-align:center;max-width:850px}
.cta-title{
  font-family:"Space Grotesk";
  font-size:clamp(60px,8vw,112px);
  line-height:.9;letter-spacing:-.08em;margin-top:22px;
}
.cta-copy{max-width:570px;margin:30px auto 35px;color:#d3d8e1;font-size:15px;line-height:1.75}
.large{padding:16px 22px}
.cta-visual{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cta-sphere{
  width:170px;height:170px;border-radius:50%;
  background:#080b12;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 100px rgba(36,87,255,.08),inset 0 0 35px rgba(36,87,255,.12);
  animation:sphereFloat 6s ease-in-out infinite;
}
.cta-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(36,87,255,.24);
}
.ring-1{width:340px;height:110px;transform:rotateX(70deg);animation:ringFloat1 13s linear infinite}
.ring-2{width:430px;height:430px;transform:rotateY(67deg);border-color:rgba(119,92,255,.18);animation:ringFloat2 18s linear infinite}
.ring-3{width:540px;height:180px;transform:rotateX(65deg) rotateY(20deg);border-color:rgba(78,122,255,.16);animation:ringFloat3 22s linear infinite}

.footer{
  width:min(1280px,100%);
  margin:auto;
  padding:85px 34px 35px;
}
.footer-main{
  display:grid;
  grid-template-columns:1.2fr .7fr .9fr 1.2fr;
  gap:45px;
  align-items:start;
}
.footer-logo img{width:145px}
.footer-column{display:flex;flex-direction:column;gap:12px}
.footer-column span{font-size:9px;letter-spacing:.2em;color:#6f8cff;font-weight:700;margin-bottom:7px}
.footer-column a{color:#fff;font-size:13px;transition:color .25s}
.footer-column a:hover{color:#718dff}
.footer-statement{text-align:right}
.footer-statement p{font-family:"Space Grotesk";font-size:25px;line-height:1.05;letter-spacing:-.04em;color:#fff;max-width:300px;margin-left:auto}
.footer-statement>span{display:block;color:#fff;font-size:12px;margin-top:28px}

.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}
.reveal[data-delay="5"]{transition-delay:.5s}

@keyframes logoMove{to{transform:translateX(-50%)}}
@keyframes reviewMove{to{transform:translateX(calc(-50% - 8px))}}
@keyframes orbitA{to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg)}}
@keyframes orbitB{to{transform:translate(-50%,-50%) rotateY(70deg) rotateZ(-360deg)}}
@keyframes orbitC{to{transform:translate(-50%,-50%) rotateX(62deg) rotateY(24deg) rotateZ(360deg)}}
@keyframes floatA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,8px)}}
@keyframes floatB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(10px,15px,-8px)}}
@keyframes floatC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-12px,-10px,12px)}}
@keyframes sphereFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px) rotate(5deg)}}
@keyframes ringFloat1{to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes ringFloat2{to{transform:rotateY(67deg) rotateZ(-360deg)}}
@keyframes ringFloat3{to{transform:rotateX(65deg) rotateY(20deg) rotateZ(360deg)}}

@media(max-width:1050px){
  .site-header{padding:0 24px}
  .hero,.stack,.intro-flow,.services,.work,.process,.reviews,.cta{padding-left:24px;padding-right:24px}
  .hero{grid-template-columns:1fr;padding-top:65px}
  .hero-visual{order:-1;height:440px}
  .scene{transform:scale(.82)}
  .section-heading,.review-heading{grid-template-columns:1fr}
  .section-heading .section-copy,.review-heading .section-copy{margin-top:25px}
  .service-grid{grid-template-columns:1fr}
  .process-cards{grid-template-columns:repeat(2,1fr)}
  .footer{padding-left:24px;padding-right:24px}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-statement{text-align:left}
  .footer-statement p{margin-left:0}
}
@media(max-width:760px){
  .site-header{height:76px;padding:0 20px}
  .site-logo,.footer-logo img{width:125px}
  .nav,.header-cta{display:none}
  .menu-toggle{display:block}
  .nav.mobile-open{
    display:flex;
    position:absolute;left:20px;right:20px;top:68px;
    flex-direction:column;gap:18px;padding:22px;
    background:#050609;border:1px solid #1b202b;border-radius:18px;
  }
  .hero,.stack,.intro-flow,.services,.work,.process,.reviews,.cta{padding-left:20px;padding-right:20px}
  .hero{min-height:auto;padding-top:40px;padding-bottom:90px}
  .hero-title{font-size:clamp(55px,16vw,82px)}
  .hero-text{font-size:15px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:18px}
  .hero-visual{height:350px}
  .scene{width:420px;height:420px;transform:scale(.68)}
  .hero-bottom{left:20px}
  .stack{padding-top:100px;padding-bottom:110px}
  .section-title{font-size:clamp(43px,12vw,60px)}
  .logo-marquee{margin-top:55px}
  .intro-flow{grid-template-columns:1fr;padding-top:105px;padding-bottom:110px;gap:25px}
  .statement{font-size:clamp(42px,11vw,58px)}
  .service-card{min-height:450px}
  .service-card h3{font-size:38px}
  .projects{gap:75px;margin-top:50px}
  .project-top{align-items:flex-start;flex-direction:column}
  .project-url{font-size:9px}
  .project-carousel{height:75vw;min-height:300px}
  .project-bottom{display:block}
  .project-bottom h3{font-size:35px}
  .project-button{display:inline-flex;margin-top:22px}
  .process{padding-bottom:110px}
  .process-cards{grid-template-columns:1fr;gap:12px;margin-top:50px}
  .process-card{min-height:260px}
  .process-card-label{margin-top:50px}
  .review-heading{margin-bottom:45px}
  .review-card{width:320px;min-height:255px;flex-basis:320px}
  .review-card p{font-size:20px}
  .review-track{animation-duration:28s}
  .cta{min-height:600px;padding-top:80px;padding-bottom:100px}
  .cta-title{font-size:clamp(57px,15vw,78px)}
  .cta-sphere{width:135px;height:135px}
  .ring-1{width:280px}.ring-2{width:350px;height:350px}.ring-3{width:440px}
  .footer{padding:65px 20px 30px}
  .footer-main{grid-template-columns:1fr;gap:35px}
  .footer-statement{text-align:left}
  .footer-statement p{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* =========================================================
   MOBILE / SMALL SCREEN POLISH
   ========================================================= */
.mobile-contact-actions{display:none}

.cta-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.whatsapp-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:15px 19px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#10151d;
  border:1px solid #283142;
  transition:transform .25s,background .25s,border-color .25s;
}
.whatsapp-button:hover{
  transform:translateY(-3px);
  background:#16231b;
  border-color:#365c45;
}
.whatsapp-button span{margin-left:12px;color:#67d48a}

@media(max-width:760px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .site-header{
    width:100%;
    min-height:72px;
    height:auto;
    padding:13px 16px;
    gap:10px;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    position:sticky;
    top:0;
  }

  .site-logo{
    width:154px;
    max-width:48vw;
  }

  .logo-link{
    min-width:0;
  }

  .mobile-contact-actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
  }

  .mobile-contact-actions a{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0b0d12;
    border:1px solid #202632;
    color:#fff;
    font-size:15px;
    transition:transform .2s,border-color .2s,background .2s;
  }

  .mobile-contact-actions a:first-child{
    color:#74dc96;
  }

  .mobile-contact-actions a:hover{
    transform:translateY(-2px);
    border-color:#3c4860;
    background:#11151d;
  }

  .menu-toggle{
    width:40px;
    height:40px;
    border:1px solid #202632;
    border-radius:50%;
    background:#0b0d12;
    display:grid;
    place-content:center;
    padding:0;
  }

  .menu-toggle span{
    width:17px;
    height:1.5px;
    margin:3px 0;
  }

  .nav.mobile-open{
    left:12px;
    right:12px;
    top:67px;
    padding:20px;
    border-radius:20px;
    box-shadow:0 25px 70px rgba(0,0,0,.55);
    z-index:100;
  }

  .nav.mobile-open a{
    width:100%;
    padding:12px 2px;
    font-size:15px;
  }

  .hero{
    width:100%;
    min-height:calc(100svh - 72px);
    padding-top:34px;
    padding-bottom:72px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .hero-copy{
    width:100%;
  }

  .hero-title{
    width:100%;
    max-width:none;
    font-size:clamp(53px,15vw,78px);
    line-height:.9;
    word-break:normal;
  }

  .hero-text{
    max-width:100%;
    font-size:15px;
    line-height:1.65;
  }

  .hero-visual{
    width:100%;
    height:315px;
    overflow:visible;
    margin-top:0;
  }

  .scene{
    width:390px;
    height:390px;
    max-width:none;
    transform:scale(.63);
  }

  .hero-bottom{
    left:20px;
    bottom:22px;
  }

  .stack,
  .intro-flow,
  .services,
  .work,
  .process,
  .reviews,
  .cta{
    width:100%;
    overflow:hidden;
  }

  .section-heading,
  .review-heading{
    gap:25px;
  }

  .section-copy{
    font-size:14px;
    color:#e0e4eb;
  }

  .stack-copy .section-copy{
    margin-top:22px;
  }

  .logo-marquee,
  .review-marquee{
    width:calc(100% + 40px);
    margin-left:-20px;
  }

  .logo-set span{
    padding:11px 15px;
  }

  .intro-flow{
    padding-top:90px;
    padding-bottom:95px;
    grid-template-columns:1fr;
  }

  .service-grid{
    gap:12px;
  }

  .service-card{
    min-height:410px;
    padding:23px;
    border-radius:23px;
  }

  .service-card h3{
    font-size:35px;
  }

  .project-carousel{
    width:100%;
    height:68vw;
    min-height:270px;
    border-radius:22px;
  }

  .project-bottom p{
    font-size:13px;
    line-height:1.7;
  }

  .project-bottom{
    gap:10px;
  }

  .carousel-prev,
  .carousel-next{
    width:42px;
    height:42px;
  }

  .process-card{
    min-height:245px;
    border-radius:22px;
  }

  .review-card{
    width:300px;
    flex-basis:300px;
    min-height:245px;
    padding:23px;
    border-radius:22px;
  }

  .review-card p{
    font-size:19px;
    margin-top:34px;
  }

  .cta{
    min-height:580px;
  }

  .cta-actions{
    flex-direction:column;
    width:100%;
    gap:10px;
  }

  .cta-actions a{
    width:min(100%,290px);
  }

  .cta-copy{
    font-size:14px;
  }

  .footer{
    width:100%;
    overflow:hidden;
  }

  .footer-main{
    width:100%;
  }

  .footer-column a,
  .footer-statement>span{
    color:#fff;
  }
}

@media(max-width:390px){
  .site-logo{width:137px}
  .mobile-contact-actions{gap:5px}
  .mobile-contact-actions a,.menu-toggle{width:35px;height:35px}
  .hero-title{font-size:51px}
  .scene{transform:scale(.56)}
  .hero-visual{height:285px}
  .service-card h3{font-size:32px}
  .project-carousel{min-height:245px}
}

@media(hover:none) and (pointer:coarse){
  .mouse-light{display:none}
}


/* =========================================================
   V5 MOBILE FIX — edge-to-edge, readable, compact, animated
   ========================================================= */
@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body {
    font-size: 16px;
  }

  /* Never create a viewport-width child that can push the page sideways. */
  .logo-marquee,
  .review-marquee {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .site-header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    min-height: 68px;
    height: 68px;
  }

  .site-logo {
    width: 158px;
    max-width: 52vw;
    height: auto;
  }

  .mobile-contact-actions {
    flex-shrink: 0;
  }

  .hero {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 34px 20px 42px;
    display: block;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: .18em;
  }

  .hero-title {
    margin: 18px 0 22px;
    max-width: 100%;
    font-size: clamp(50px, 14.2vw, 70px);
    line-height: .9;
    letter-spacing: -.065em;
    overflow-wrap: normal;
  }

  .hero-text {
    width: 100%;
    max-width: 100%;
    color: #f0f2f6;
    font-size: 15px;
    line-height: 1.58;
  }

  .hero-actions {
    margin-top: 26px;
    gap: 15px;
  }

  .primary-button {
    padding: 14px 18px;
    font-size: 12px;
  }

  .hero-visual {
    width: 100%;
    max-width: 100%;
    height: 250px;
    margin-top: -4px;
    overflow: visible;
  }

  .scene {
    width: 370px;
    height: 370px;
    max-width: none;
    transform: scale(.55);
    transform-origin: center center;
  }

  .hero-bottom {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 2px;
    font-size: 8px;
  }

  /* Compact stack: less dead space and larger, denser logos. */
  .stack {
    width: 100%;
    padding: 62px 20px 60px;
  }

  .stack-copy {
    width: 100%;
  }

  .stack-copy .section-copy {
    margin-top: 18px;
  }

  .stack .section-title {
    margin-top: 14px;
    font-size: clamp(39px, 10.7vw, 53px);
  }

  .logo-marquee {
    margin-top: 35px;
    padding: 4px 0;
    overflow: hidden;
  }

  .logo-track {
    animation-duration: 26s;
  }

  .logo-set {
    gap: 10px;
    padding-right: 10px;
  }

  .logo-set span {
    padding: 12px 16px;
    gap: 9px;
    font-size: 12px;
    border-radius: 999px;
    background: #080b11;
    border-color: #1c2431;
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
  }

  .logo-set i {
    font-size: 20px;
  }

  /* Remove oversized vertical breathing room throughout mobile. */
  .intro-flow {
    width: 100%;
    padding: 65px 20px 65px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .statement {
    font-size: clamp(39px, 10.8vw, 55px);
  }

  .statement-copy {
    margin-top: 22px;
    color: #eef0f4;
    font-size: 14px;
    line-height: 1.7;
  }

  .services {
    width: 100%;
    padding: 60px 20px 70px;
  }

  .section-heading {
    gap: 20px;
  }

  .section-heading .section-title,
  .review-heading .section-title {
    margin-top: 14px;
  }

  .section-copy {
    color: #e7eaf0;
    font-size: 14px;
    line-height: 1.65;
  }

  .service-grid {
    margin-top: 35px;
    gap: 12px;
  }

  .service-card {
    min-height: 350px;
    padding: 21px;
    border-radius: 22px;
  }

  .service-label {
    margin-top: 76px;
  }

  .service-card h3 {
    font-size: 34px;
  }

  .service-description {
    color: #e2e5eb;
    font-size: 13px;
    line-height: 1.68;
    margin-top: 18px;
  }

  .service-tags {
    margin-top: 21px;
  }

  /* Projects */
  .work {
    width: 100%;
    padding: 60px 20px 75px;
  }

  .projects {
    margin-top: 42px;
    gap: 66px;
  }

  .project-carousel {
    width: 100%;
    height: 61vw;
    min-height: 245px;
    max-height: 390px;
    border-radius: 21px;
  }

  .project-bottom {
    padding-top: 21px;
  }

  .project-bottom h3 {
    font-size: 33px;
  }

  .project-bottom p {
    color: #e2e5eb;
    font-size: 13px;
    line-height: 1.68;
    margin-top: 9px;
  }

  /* Process remains on the page, but much more compact; it is not in the header. */
  .process {
    width: 100%;
    padding: 55px 20px 70px;
  }

  .process-title {
    font-size: clamp(42px, 11vw, 57px);
  }

  .process-copy {
    color: #e3e6ec;
    font-size: 14px;
    line-height: 1.68;
    margin-top: 20px;
  }

  .process-cards {
    margin-top: 34px;
    gap: 10px;
  }

  .process-card {
    min-height: 215px;
    padding: 20px;
    border-radius: 20px;
  }

  .process-card-label {
    margin-top: 34px;
  }

  .process-card h3 {
    font-size: 23px;
  }

  .process-card p {
    color: #cbd1dc;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
  }

  /* Reviews: larger cards, tighter section and uninterrupted horizontal motion. */
  .reviews {
    width: 100%;
    padding: 60px 20px 75px;
  }

  .review-heading {
    margin-bottom: 38px;
    gap: 20px;
  }

  .review-marquee {
    overflow: hidden;
  }

  .review-track {
    gap: 11px;
    animation-duration: 25s;
  }

  .review-card {
    width: 300px;
    flex-basis: 300px;
    min-height: 230px;
    padding: 21px;
    border-radius: 21px;
  }

  .review-card p {
    color: #f1f3f7;
    font-size: 18px;
    line-height: 1.2;
    margin-top: 30px;
  }

  /* CTA / footer */
  .cta {
    width: 100%;
    min-height: 520px;
    padding: 65px 20px 75px;
  }

  .cta-title {
    font-size: clamp(51px, 13.5vw, 73px);
  }

  .cta-copy {
    color: #e3e6ec;
    font-size: 14px;
    line-height: 1.65;
    margin: 22px auto 27px;
  }

  .footer {
    width: 100%;
    padding: 55px 20px 25px;
  }

  .footer-main {
    gap: 28px;
  }

  .footer-statement p {
    font-size: 25px;
  }

  /* Keep decorative 3D elements inside the phone viewport. */
  .ring-a { width: 420px; }
  .ring-b { width: 350px; height: 350px; }
  .ring-c { width: 270px; height: 270px; }

  .float-object {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-left: 11px;
    padding-right: 11px;
  }

  .site-logo {
    width: 145px;
    max-width: 45vw;
  }

  .mobile-contact-actions a,
  .menu-toggle {
    width: 34px;
    height: 34px;
  }

  .mobile-contact-actions {
    gap: 4px;
  }

  .hero {
    padding-left: 17px;
    padding-right: 17px;
  }

  .hero-title {
    font-size: 48px;
  }

  .hero-visual {
    height: 225px;
  }

  .scene {
    transform: scale(.49);
  }

  .stack,
  .intro-flow,
  .services,
  .work,
  .process,
  .reviews,
  .cta,
  .footer {
    padding-left: 17px;
    padding-right: 17px;
  }

  .logo-marquee,
  .review-marquee {
    width: 100%;
    margin-left: 0;
  }

  .logo-set span {
    padding: 11px 14px;
  }

  .service-card h3 {
    font-size: 31px;
  }

  .project-carousel {
    min-height: 225px;
  }

  .review-card {
    width: 285px;
    flex-basis: 285px;
  }
}


/* =========================================================
   V6 MOBILE HEADER — clean centered links, no icon bar
   ========================================================= */
@media (max-width: 760px) {
  .site-header {
    width: 100%;
    height: 66px;
    min-height: 66px;
    padding: 0 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Keep the logo available without pushing the centered nav.
     It is visually hidden on phones because the requested mobile
     header is only the centered links. */
  .site-header > .logo-link {
    display: none;
  }

  .site-header .nav {
    position: static;
    display: flex;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    gap: clamp(19px, 6vw, 29px);
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header .nav a {
    width: auto;
    padding: 0;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -.01em;
    transition: color .2s ease, transform .2s ease;
  }

  .site-header .nav a:hover,
  .site-header .nav a:active {
    color: #6f8cff;
    transform: translateY(-1px);
  }

  .site-header .header-cta {
    display: none;
  }

  .mobile-contact-actions,
  .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding: 0 12px;
  }

  .site-header .nav {
    gap: 16px;
  }

  .site-header .nav a {
    font-size: 11px;
  }
}

@media (max-width: 340px) {
  .site-header .nav {
    gap: 12px;
  }

  .site-header .nav a {
    font-size: 10px;
  }
}


/* =========================================================
   V7 MOBILE HEADER — logo + centered floating nav pill
   ========================================================= */
@media (max-width: 760px) {
  .site-header {
    width: 100%;
    height: 112px;
    min-height: 112px;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header > .logo-link {
    display: flex;
    width: 100%;
    height: 34px;
    align-items: center;
    justify-content: center;
  }

  .site-header > .logo-link .site-logo {
    display: block;
    width: 132px;
    max-width: 42vw;
    height: auto;
  }

  .site-header .nav {
    position: static;
    display: flex;
    width: min(100%, 350px);
    height: 49px;
    margin: 0 auto;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: clamp(17px, 5.3vw, 27px);

    /* The rounded/circular background requested from the reference. */
    border: 1px solid rgba(125, 135, 165, .22);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 0%, rgba(119,92,255,.16), transparent 62%),
      rgba(8, 9, 14, .86);
    box-shadow:
      0 12px 38px rgba(0,0,0,.45),
      0 0 34px rgba(75,55,180,.10),
      inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
  }

  .site-header .nav a {
    width: auto;
    padding: 0;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -.015em;
    text-shadow: 0 1px 10px rgba(255,255,255,.08);
  }

  .site-header .nav a:hover,
  .site-header .nav a:active {
    color: #7690ff;
    transform: translateY(-1px);
  }

  .site-header .header-cta,
  .mobile-contact-actions,
  .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    height: 106px;
    min-height: 106px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header > .logo-link .site-logo {
    width: 122px;
  }

  .site-header .nav {
    width: min(100%, 350px);
    height: 47px;
    padding-left: 13px;
    padding-right: 13px;
    gap: 14px;
  }

  .site-header .nav a {
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  .site-header {
    height: 102px;
    min-height: 102px;
  }

  .site-header > .logo-link .site-logo {
    width: 112px;
  }

  .site-header .nav {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header .nav a {
    font-size: 9px;
  }
}


/* =========================================================
   V8 — ADVANCED 3D / WEBGL PORTFOLIO LAYER
   ========================================================= */
#webglScene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-5;
  pointer-events:none;
  opacity:.95;
  mix-blend-mode:screen;
}
.webgl-vignette{
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 34%, rgba(36,87,255,.055), transparent 26%),
    radial-gradient(circle at 18% 72%, rgba(119,92,255,.04), transparent 25%);
}
body.webgl-ready .scene{
  opacity:.72;
}
.hero-copy,.section-heading,.review-heading,.process-heading,.intro-flow,.cta-content{
  transform-style:preserve-3d;
}
.magnetic-card{
  will-change:transform;
  transform-style:preserve-3d;
}
.service-card .service-icon,
.process-card .process-symbol,
.project-carousel,
.review-card{
  transform-style:preserve-3d;
}
.project-carousel{
  perspective:1200px;
}
.project-carousel img{
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease;
}
.project-carousel:hover img{
  transform:scale(1.025);
}
.float-object{
  transform-style:preserve-3d;
  will-change:transform;
}
.hero-title .hero-line{
  transform-style:preserve-3d;
}
.section-title,.process-title,.statement,.cta-title{
  text-wrap:balance;
}
@media(max-width:760px){
  #webglScene{opacity:.7}
  .webgl-vignette{opacity:.75}
}
@media(prefers-reduced-motion:reduce){
  #webglScene{display:none}
}


/* V9 — LOGO / HEADER FINAL FIT */
.site-header{
  position:relative;
  z-index:80;
  width:100%;
  max-width:1440px;
  min-height:82px;
  margin:0 auto;
  padding:10px clamp(22px,4vw,64px);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-logo-link{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:0;
  overflow:visible;
}
.brand-logo-frame{
  width:88px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  overflow:visible;
}
.brand-logo-frame .site-logo{
  display:block;
  width:88px;
  height:72px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  margin:0;
  padding:0;
  transform:translateZ(0);
  filter:drop-shadow(0 10px 24px rgba(15,92,255,.18));
}
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,2.7vw,44px);
  margin-left:auto;
}
@media (min-width:761px){
  .site-header .nav{margin-right:clamp(26px,4.5vw,76px)}
  .brand-logo-frame{width:92px;height:76px}
  .brand-logo-frame .site-logo{width:92px;height:76px}
  .footer-brand-logo{width:82px;height:68px}
  .footer-brand-logo .site-logo{width:82px;height:68px}
}
@media (max-width:760px){
  .site-header{
    width:100%;
    max-width:100%;
    min-height:110px;
    height:110px;
    padding:7px 12px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    overflow:visible;
  }
  .brand-logo-link{
    width:100%;
    height:45px;
    min-height:45px;
    flex:0 0 45px;
  }
  .brand-logo-frame{width:66px;height:62px}
  .brand-logo-frame .site-logo{
    width:66px;
    height:62px;
    filter:drop-shadow(0 8px 18px rgba(15,92,255,.20));
  }
  .site-header .nav{
    position:static;
    width:min(100%,350px);
    height:48px;
    min-height:48px;
    box-sizing:border-box;
    margin:0 auto;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(16px,5vw,26px);
    border:1px solid rgba(125,135,165,.22);
    border-radius:999px;
    background:rgba(8,9,14,.90);
    box-shadow:0 12px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .site-header .nav a{
    width:auto;
    padding:0;
    margin:0;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
  }
  .site-header .header-cta,
  .mobile-contact-actions,
  .menu-toggle{display:none !important}
  .footer-brand-logo{width:68px;height:58px}
  .footer-brand-logo .site-logo{width:68px;height:58px}
}
@media (max-width:390px){
  .site-header{min-height:104px;height:104px;padding-top:6px}
  .brand-logo-link{height:41px;min-height:41px;flex-basis:41px}
  .brand-logo-frame,.brand-logo-frame .site-logo{width:58px;height:55px}
  .site-header .nav{height:46px;min-height:46px;gap:14px;padding:0 12px}
  .site-header .nav a{font-size:10px}
}
@media (max-width:340px){
  .brand-logo-frame,.brand-logo-frame .site-logo{width:53px;height:51px}
  .site-header .nav{gap:10px;padding:0 9px}
  .site-header .nav a{font-size:9px}
}


/* =========================================================
   V10 — COMPACT PHONE HEADER
   Desktop is intentionally untouched.
   ========================================================= */
@media (max-width:760px){
  .site-header{
    height:92px !important;
    min-height:92px !important;
    padding:4px 10px 7px !important;
    gap:2px !important;
  }

  .brand-logo-link{
    height:34px !important;
    min-height:34px !important;
    flex:0 0 34px !important;
  }

  .brand-logo-frame,
  .brand-logo-frame .site-logo{
    width:42px !important;
    height:40px !important;
  }

  .site-header .nav{
    width:292px !important;
    max-width:calc(100vw - 30px) !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 12px !important;
    gap:17px !important;
    border-radius:999px !important;
  }

  .site-header .nav a{
    font-size:9px !important;
    font-weight:700 !important;
  }
}

@media (max-width:390px){
  .site-header{
    height:88px !important;
    min-height:88px !important;
    padding-top:3px !important;
  }

  .brand-logo-link{
    height:31px !important;
    min-height:31px !important;
    flex-basis:31px !important;
  }

  .brand-logo-frame,
  .brand-logo-frame .site-logo{
    width:38px !important;
    height:36px !important;
  }

  .site-header .nav{
    width:278px !important;
    max-width:calc(100vw - 26px) !important;
    height:36px !important;
    min-height:36px !important;
    gap:14px !important;
    padding:0 10px !important;
  }

  .site-header .nav a{
    font-size:8.5px !important;
  }
}

@media (max-width:340px){
  .site-header .nav{
    width:calc(100vw - 24px) !important;
    gap:11px !important;
  }

  .site-header .nav a{
    font-size:8px !important;
  }

  .brand-logo-frame,
  .brand-logo-frame .site-logo{
    width:35px !important;
    height:33px !important;
  }
}