/* ═══ HERO ═══ */
.hero{padding:6rem 40px 0;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:1120px;margin:0 auto;position:relative}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--badge-bg);border-radius:var(--r-pill);
  padding:4px 16px 4px 4px;margin-bottom:32px;position:relative;z-index:2;
}
.hero-tag-av{width:32px;height:32px;border-radius:50%;object-fit:cover}
.hero-tag-gold{
  background:var(--gold);border-radius:var(--r-pill);
  padding:6px 12px;font-size:15px;font-weight:400;
  color:var(--dark);letter-spacing:-.04em;
}
.hero-tag-sub{font-size:15px;color:var(--grey);letter-spacing:-.04em}
.hero h1{
  font-size:clamp(40px,5.5vw,64px);font-weight:500;
  letter-spacing:-.05em;line-height:1em;
  max-width:800px;margin:0 auto 20px;text-wrap:balance;
  position:relative;z-index:2;
}
.hero h1 .muted{color:var(--grey2)}
.hero-desc{
  font-size:16px;font-weight:400;color:var(--grey);
  max-width:520px;margin:0 auto 32px;line-height:1.3em;
  letter-spacing:-.04em;position:relative;z-index:2;
}

.hero-visual{
  width:100%;position:relative;
  min-height:552px;
  display:flex;align-items:center;justify-content:center;
  margin-top:-20px;
}
.hero-gallery{
  width:100%;height:100%;min-height:552px;
  overflow:hidden;
  margin-top: 120px;
  display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%);
}
.hero-gallery-track{
  display:flex;gap:12px;align-items:center;
  will-change:transform;
  animation:galleryScroll 40s linear infinite;
}
.hero-gallery-track img{
  width:400px;height:275px;object-fit:cover;
  border-radius:16px;flex-shrink:0;
}
.hero-gallery-track img:first-child{height:344px}
.hero-gallery-track img:nth-child(5){height:344px}
@keyframes galleryScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-50% - 6px))}
}
.hero-phone{
  width:450px;height:552px;background:var(--dark);
  border-radius:var(--r-3xl);
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) perspective(900px) translateY(40px) rotateX(10deg);
  box-shadow:var(--shadow-xl);z-index:2;
  opacity:0;
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
}
.hero-phone.v{
  opacity:1;
  transform:translate(-50%,-50%) perspective(900px) translateY(0) rotateX(0deg);
}
.hero-phone-inner{
  position:absolute;inset:12px;border-radius:var(--r-2xl);
  overflow:hidden;background:var(--dark2);
}
.hero-phone-inner img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ═══ ABOUT SECTION ═══ */
.about-sec{background:var(--badge-bg);padding:200px 0;overflow:visible}
.about-row{
  display:flex;gap:12px;align-items:center;max-width:1120px;margin:0 auto;padding:0 40px;
  min-height:520px;
}
.about-dark{
  width:35%;flex-shrink:0;aspect-ratio:.7538;
  background:var(--dark);border-radius:var(--r-xl);
  padding:24px;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;
  box-shadow:var(--shadow-xl);position:relative;z-index:1;
}
.about-dark-top{display:flex;flex-direction:column;gap:12px}
.about-dark-av{width:60px;height:60px;border-radius:50%;object-fit:cover}
.about-dark h2{
  font-size:clamp(28px,3vw,40px);font-weight:500;color:#fff;
  letter-spacing:-.05em;line-height:1.2em;
}
.about-dark p{font-size:16px;color:var(--grey3);line-height:1.3em;letter-spacing:-.04em}
.about-dark .lnk{
  font-size:16px;font-weight:500;color:#fff;letter-spacing:-.04em;
  text-decoration:underline;text-underline-offset:3px;margin-top:auto;
}
.about-right{flex:1;display:flex;flex-direction:column;gap:12px;align-self:stretch}
.about-right-row{display:flex;gap:12px;flex:1}
.about-card{
  background:var(--white);border-radius:var(--r-xl);
  padding:24px;flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;box-shadow:var(--shadow);overflow:hidden;
}
.about-card .num{
  font-size:clamp(36px,5vw,60px);font-weight:500;
  letter-spacing:-.05em;line-height:1em;margin-bottom:4px;
}
.about-card .lbl{font-size:14px;font-weight:500;margin-bottom:6px;letter-spacing:-.03em}
.about-card .desc{font-size:13px;color:var(--grey);line-height:1.3em;letter-spacing:-.04em}

/* ═══ WORKING ON ═══ */

/* ═══ SERVICES ═══ */
.svc-sec{padding:160px 0;overflow:visible}
.svc-inner{
  max-width:1120px;margin:0 auto;padding:0 40px;
  display:flex;gap:40px;align-items:flex-start;
}
.svc-left{
  flex:1;max-width:600px;position:sticky;top:120px;z-index:1;
  display:flex;flex-direction:column;gap:24px;
}
.svc-badge{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid var(--gold-dark);
  font-size:15px;font-weight:400;color:var(--gold-dark);
  letter-spacing:-.04em;width:fit-content;
}
.svc-left h2{font-size:clamp(24px,3vw,40px);font-weight:500;color:var(--dark);letter-spacing:-.05em;line-height:1.2em}
.svc-left .svc-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:14px;
  background:var(--dark);color:#fff;font-size:16px;font-weight:500;
  letter-spacing:-.04em;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;
  align-self:flex-start;text-decoration:none;
}
.svc-left .svc-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.svc-left .svc-cta svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}
.svc-right{flex:1;display:flex;flex-direction:column;gap:16px}
.svc-card{
  background:var(--dark);border-radius:var(--r-xl);
  overflow:hidden;cursor:pointer;
  transition:box-shadow .4s;
}
.svc-card:hover{box-shadow:var(--shadow-xl)}
.svc-card-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px;
}
.svc-icon{
  width:48px;height:48px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-heavy);overflow:hidden;
}
.svc-icon img{width:100%;height:100%;object-fit:cover}
.svc-icon.gold{background:linear-gradient(180deg,rgb(251,166,60),rgb(178,79,21))}
.svc-icon.blue{background:linear-gradient(180deg,rgb(127,152,250),rgb(46,53,165))}
.svc-icon.green{background:linear-gradient(180deg,rgb(99,197,143),rgb(35,88,59))}
.svc-card-head h3{font-size:20px;font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1.2em;flex:1}
.svc-expand{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--dark3);
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.svc-expand svg{width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:2}
.svc-card.open .svc-expand{transform:rotate(45deg);background:var(--white)}
.svc-card.open .svc-expand svg{stroke:var(--dark)}
.svc-card-body{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1);
}
.svc-card.open .svc-card-body{max-height:500px}
.svc-card-body-inner{padding:0 24px 24px}
.svc-desc{font-size:16px;color:var(--grey3);line-height:1.3em;letter-spacing:-.04em;margin-bottom:16px}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.svc-tag{
  padding:5px 12px;border-radius:var(--r-pill);font-size:13px;
  color:rgba(255,255,255,.55);border:1px solid var(--dark3);letter-spacing:-.03em;
}
.svc-imgs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  opacity:0;transition:opacity .4s ease .1s;
}
.svc-card.open .svc-imgs{opacity:1}
.svc-imgs img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:var(--r-md)}

/* ═══ HOW IT WORKS ═══ */
.how-sec{padding:160px 0;background:var(--badge-bg);overflow:hidden}
.how-wrap{max-width:1120px;margin:0 auto;padding:0 40px;display:flex;gap:40px}
.how-left{flex:1;position:sticky;top:120px;align-self:flex-start}
.how-left h2{font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.05em;line-height:1.2em;margin-bottom:6px}
.how-left>p{font-size:16px;color:var(--grey);letter-spacing:-.04em;line-height:1.3em;max-width:600px}
.how-right{flex:1;display:flex;flex-direction:column;gap:0}
.how-step{padding:20px 0;border-top:1px solid var(--border)}
.how-step:last-child{border-bottom:1px solid var(--border)}
.how-step-top{display:flex;gap:16px;align-items:flex-start}
.step-n{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:var(--grey);flex-shrink:0;
}
.step-c h3{font-size:16px;font-weight:500;letter-spacing:-.03em;margin-bottom:4px;line-height:1.2em}
.step-c p{font-size:14px;color:var(--grey);line-height:1.3em;letter-spacing:-.04em}
.how-stat{
  margin-top:40px;display:flex;gap:16px;align-items:flex-start;
  padding:32px;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);
}
.how-stat-icons{display:flex;align-items:center;gap:2px;flex-shrink:0}
.how-stat-av{width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover}
.how-stat-badge{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--badge-bg);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:var(--dark);
}
.how-stat-t{font-size:16px;color:var(--dark);line-height:1.3em;letter-spacing:-.04em;font-weight:500}

/* ═══ TESTIMONIALS ═══ */
.test-sec{padding:160px 0;background:var(--white)}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1120px;margin:0 auto;padding:0 40px}
.test-card{
  background:var(--badge-bg);border-radius:var(--r-xl);
  padding:24px;display:flex;flex-direction:column;
  transition:transform .3s;
}
.test-card:hover{transform:translateY(-3px)}
.test-q{font-size:16px;color:var(--dark);line-height:1.3em;letter-spacing:-.04em;margin-bottom:20px;flex:1}
.test-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.test-av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.test-name{font-size:14px;font-weight:500;letter-spacing:-.03em;line-height:1.2em}
.test-role{font-size:13px;color:var(--grey);letter-spacing:-.04em}
.test-card.prominent{background:var(--dark);box-shadow:1px 1px 1.4px -.125px rgba(0,0,0,.05),2.4px 2.4px 3.4px -.25px rgba(0,0,0,.06),4.4px 4.4px 6.2px -.375px rgba(0,0,0,.06),7.2px 7.2px 10.2px -.5px rgba(0,0,0,.07),11.7px 11.7px 16.5px -.625px rgba(0,0,0,.08),19.1px 19.1px 27px -.75px rgba(0,0,0,.1),33px 33px 46.6px -.875px rgba(0,0,0,.13),60px 60px 84.9px -1px rgba(0,0,0,.2)}
.test-card.prominent .test-q{color:#fff}
.test-card.prominent .test-who{border-top-color:var(--dark3)}
.test-card.prominent .test-name{color:#fff}
.test-card.prominent .test-role{color:var(--grey3)}

/* ═══ BLOG ═══ */
.blog-sec{padding:160px 0;background:var(--white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.blog-card{
  background:var(--badge-bg);border-radius:var(--r-xl);
  overflow:hidden;transition:transform .3s;
}
.blog-card:hover{transform:translateY(-3px)}
.blog-img{width:100%;aspect-ratio:1.333;object-fit:cover}
.blog-body{padding:24px}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.blog-tag{font-size:13px;font-weight:400;padding:4px 10px;border-radius:var(--r-pill);background:var(--white);color:var(--grey);letter-spacing:-.03em}
.blog-date{font-size:13px;color:var(--grey3)}
.blog-body h3{font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.2em}

/* ═══ FAQ ═══ */
.faq-sec{padding:160px 0;background:var(--badge-bg)}
.faq-items{max-width:1120px;margin:0 auto;padding:0 40px}
.faq-i{border-top:1px solid var(--border)}
.faq-i:last-child{border-bottom:1px solid var(--border)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;
  font-size:16px;font-weight:500;letter-spacing:-.03em;transition:color .2s;
}
.faq-q:hover{color:var(--grey)}
.faq-ic{
  width:24px;height:24px;flex-shrink:0;position:relative;
  transition:transform .3s;
}
.faq-ic::before,.faq-ic::after{
  content:'';position:absolute;background:var(--grey2);
  border-radius:1px;transition:background .3s;
}
.faq-ic::before{width:14px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-ic::after{width:1.5px;height:14px;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s,opacity .3s}
.faq-i.open .faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-ans-in{padding-bottom:20px;font-size:16px;color:var(--grey);line-height:1.3em;letter-spacing:-.04em;max-width:700px}
.faq-i.open .faq-ans{max-height:200px}


/* ═══ MOBILE NAVIGATION OVERLAY ═══ */
/* ═══ MOBILE NAVIGATION OVERLAY ═══ */
.hdr-overlay{
  position:fixed;inset:0;background:rgba(239,239,239,.8);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:110; display:none;flex-direction:column;
  padding:100px 24px 40px;opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1);
  overflow-x:hidden;
}
.hdr-overlay-close{
  position:absolute;top:24px;right:24px;
  width:48px;height:48px;border-radius:50%;
  background:var(--white);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  z-index:120;cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.hdr-overlay-close:hover{transform:scale(1.05)}
.hdr-overlay-close svg{width:20px;height:20px;stroke:var(--dark)}

.admin-bar .hdr-overlay { padding-top: 140px }
@media screen and (max-width: 782px) {
  .admin-bar .hdr-overlay { padding-top: 130px }
}
.hdr-overlay.v{opacity:1}
.hdr-overlay-in{
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;max-width:400px;margin:0 auto;width:100%;
}
.hdr-overlay-nav{display:flex;flex-direction:column;gap:20px}
.hdr-overlay-nav a{
  font-size:32px;font-weight:500;color:var(--dark);
  letter-spacing:-.05em;text-decoration:none;
  transition:transform .3s;transform:translateY(20px);opacity:0;
}
.hdr-overlay.v .hdr-overlay-nav a{transform:translateY(0);opacity:1}
.hdr-overlay-nav a:nth-child(1){transition-delay:.1s}
.hdr-overlay-nav a:nth-child(2){transition-delay:.15s}
.hdr-overlay-nav a:nth-child(3){transition-delay:.2s}
.hdr-overlay-nav a:nth-child(4){transition-delay:.25s}

.hdr-overlay-bot{transform:translateY(20px);opacity:0;transition:transform .3s .3s,opacity .3s .3s}
.hdr-overlay.v .hdr-overlay-bot{transform:translateY(0);opacity:1}

/* Hamburger to X */
.nav-open .hdr-menu-icon svg line:first-child{transform:rotate(45deg) translate(5px, 5px)}
.nav-open .hdr-menu-icon svg line:last-child{transform:rotate(-45deg) translate(-10px, 4px)}
.hdr-menu-icon svg line{transition:transform .3s}

/* ═══ RESPONSIVE REFINEMENTS ═══ */
@media(max-width:1199px){
  .hero{padding:120px 40px 0}
  .hero h1{font-size:clamp(36px,5vw,56px)}
  .hero-phone{width:380px;height:466px}
  .hero-visual{min-height:466px;margin-top:0}
  .hero-gallery-track img{width:320px;height:220px}
  .hero-gallery-track img:first-child,.hero-gallery-track img:nth-child(5){height:280px}
  .about-sec,.proj-sec,.svc-sec,.how-sec,.test-sec,.faq-sec{padding:100px 0}
  .about-row{min-height:unset}
}

@media(max-width:900px){
  .hero-gallery{margin-top: 0;}
  .hdr-link{display:none}
  .about-sec{padding-top: 0;}
  .about-row{flex-direction:column;padding:0 40px;gap:24px}
  .about-dark{width:100%;aspect-ratio:unset;min-height:auto;padding:32px}
  .about-right{gap:12px;height:auto}
  .about-right-row{flex-direction:row}
  .hero-phone{width:300px;height:380px}
  .hero-visual{min-height:380px}
  .svc-inner, .how-wrap{flex-direction:column;gap:40px}
  .svc-left, .how-left{position:static;max-width:100%}
  .test-grid, .svc-inner, .how-wrap, .about-row, .hero{padding-left:40px;padding-right:40px}
  .test-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  .hero{padding:80px 20px 0}
  .hero h1{font-size:32px}
  .hero-desc{font-size:15px;margin-bottom:24px}
  .hero-visual{min-height:300px}
  .hero-phone{width:220px;height:280px}
  .hero-gallery{margin-top: 0;min-height: 350px;}
  .wk-sec{padding:60px 0 0}
  .about-sec,.proj-sec,.svc-sec,.how-sec,.test-sec,.blog-sec,.faq-sec{padding:40px 0}
  .test-grid, .svc-inner, .how-wrap, .about-row, .hero{padding-left:20px;padding-right:20px}
  .svc-imgs{grid-template-columns:1fr}
  .about-right-row{flex-direction:column}
  .hdr-overlay{padding:100px 24px 40px}
  .hdr-overlay-nav a{font-size:28px}
  .test-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
}