:root{--navy:#07152f;--navy2:#0b2147;--blue:#00a8ff;--cyan:#24e2ff;--pink:#ff3b9d;--purple:#7657ff;--white:#fff;--text:#15213a;--soft:#f4f8ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}.nav{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:#06142df4;color:white;position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff12}.logo{font-size:21px;font-weight:900;letter-spacing:.5px}.logo i{font-style:normal;color:var(--cyan)}.links{display:flex;gap:23px;align-items:center;font-size:14px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#087bff);color:#fff;font-weight:900;box-shadow:0 10px 30px #0099ff35}.btn.alt{background:transparent;border:1px solid #ffffff66;box-shadow:none}.hero{min-height:720px;background:radial-gradient(circle at 75% 20%,#1a46a8 0,transparent 31%),radial-gradient(circle at 88% 75%,#a1198c55 0,transparent 26%),linear-gradient(130deg,#06142d,#071d40 60%,#101743);color:white;padding:80px 6vw;display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center;overflow:hidden}.eyebrow{color:var(--cyan);font-size:13px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.hero h1,.pagehero h1{font-size:clamp(52px,6.2vw,92px);line-height:.96;letter-spacing:-4px;margin:18px 0 24px}.hero h1 span,.pagehero h1 span{background:linear-gradient(90deg,var(--cyan),var(--blue),#b35cff,var(--pink));-webkit-background-clip:text;color:transparent}.lead{font-size:19px;line-height:1.65;color:#dbe8ff;max-width:650px}.actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}.heroVisual{position:relative;min-height:530px}.heroVisual:before{content:"";position:absolute;inset:8% 3%;background:linear-gradient(135deg,#00d9ff,#6c54ff,#ff3b9d);filter:blur(60px);opacity:.45}.heroVisual img{position:absolute;width:88%;height:76%;right:0;top:9%;object-fit:cover;border-radius:20px;box-shadow:0 35px 90px #0009;border:1px solid #ffffff33;transform:perspective(1000px) rotateY(-5deg)}.float{position:absolute;z-index:2;background:#ffffffef;color:var(--navy);padding:15px 18px;border-radius:13px;font-weight:900;box-shadow:0 16px 35px #0004}.float.a{left:0;bottom:18%}.float.b{right:0;bottom:5%;background:#101c3c;color:white}.trust{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:0 10px 40px #001b5010}.trust div{text-align:center;padding:28px 15px;border-right:1px solid #e9eff9}.trust b{display:block;font-size:26px;color:var(--blue)}.section{padding:95px 6vw}.section.dark{background:var(--navy);color:white}.section.tint{background:var(--soft)}.head{max-width:820px;margin-bottom:42px}.head h2{font-size:clamp(38px,4.6vw,66px);line-height:1.02;letter-spacing:-3px;margin:12px 0 18px}.head p{font-size:18px;line-height:1.65;color:#63718a}.dark .head p{color:#b8c9e8}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service{background:white;border:1px solid #e9eef7;border-radius:18px;padding:30px;box-shadow:0 12px 35px #142e5a0b}.service:nth-child(2){background:linear-gradient(145deg,#edfaff,#f5f0ff)}.service:nth-child(3){background:linear-gradient(145deg,#fff0f8,#fff)}.service .icon{font-size:30px}.service h3{font-size:25px;margin:18px 0 10px}.service p{line-height:1.6;color:#65728a}.more{color:#087cff;font-weight:900}.photoGrid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:260px 260px;gap:15px}.photoGrid img{width:100%;height:100%;object-fit:cover;border-radius:18px}.photoGrid img:first-child{grid-row:1/3}.photoGrid img:nth-child(4){grid-column:2/4}.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.splitImg{height:520px;position:relative}.splitImg img{width:100%;height:100%;object-fit:cover;border-radius:22px}.badge{position:absolute;right:-15px;bottom:28px;background:linear-gradient(135deg,var(--pink),var(--purple));color:white;padding:22px;border-radius:16px;font-weight:900}.ticks{display:grid;gap:13px;margin:25px 0}.ticks div:before{content:"✓";color:var(--blue);font-weight:900;margin-right:10px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project{height:390px;position:relative;overflow:hidden;border-radius:20px}.project img{width:100%;height:100%;object-fit:cover;transition:.4s}.project:hover img{transform:scale(1.04)}.project .cap{position:absolute;left:18px;right:18px;bottom:18px;background:#07152fe9;color:white;padding:18px;border-radius:13px}.project .cap b{font-size:20px}.cta{padding:100px 6vw;text-align:center;color:white;background:radial-gradient(circle at 10% 30%,#00d9ff44,transparent 25%),radial-gradient(circle at 90% 70%,#ff3b9d55,transparent 25%),linear-gradient(135deg,#07152f,#132e67)}.cta h2{font-size:clamp(42px,5vw,72px);letter-spacing:-3px;margin:0 0 20px}.footer{background:#040d1d;color:#b7c6e2;padding:55px 6vw;display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer b{color:white}.footer a{display:block;margin:8px 0}.pagehero{padding:100px 6vw;background:radial-gradient(circle at 85% 20%,#5236bd88,transparent 30%),linear-gradient(135deg,#06142d,#0b2552);color:white}.pagehero p{max-width:700px}.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.form{display:grid;gap:12px}.form input,.form textarea,.form select{padding:17px;border:1px solid #d9e2f1;border-radius:10px;font:inherit}.form textarea{min-height:150px}.seoList{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.seoList div{padding:22px;background:white;border-radius:14px;border:1px solid #e7edf7}@media(max-width:900px){.links a:not(.btn){display:none}.hero,.split{grid-template-columns:1fr}.heroVisual{min-height:400px}.services,.projects,.cards2,.seoList{grid-template-columns:1fr}.photoGrid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px}.photoGrid img:first-child{grid-row:auto}.photoGrid img:nth-child(4){grid-column:auto}.trust{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr}.hero h1,.pagehero h1{letter-spacing:-2px}}@media(max-width:900px){}@media(max-width:900px){}


.nav 
.nav 
.nav .nav 
.brand-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  overflow:visible;
  line-height:1;
}
.nav .brand-logo{
  height:76px;
}
.nav .brand-logo img{
  display:block;
  width:auto;
  height:48px;
  max-width:230px;
  object-fit:contain;
  border-radius:0;
  filter:none;
  opacity:1;
}
.footer-brand-logo img{
  display:block;
  width:auto;
  height:46px;
  max-width:220px;
  object-fit:contain;
  border-radius:0;
}
@media(max-width:900px){
  .nav .brand-logo img{
    height:42px;
    max-width:198px;
  }
  .footer-brand-logo img{
    height:42px;
    max-width:198px;
  }
}

.nav .brand-logo img{
  height:46px!important;
  max-width:220px!important;
  width:auto!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.footer-brand-logo img{
  height:44px!important;
  max-width:210px!important;
}
@media(max-width:900px){
  .nav .brand-logo img{
    height:40px!important;
    max-width:190px!important;
  }
}

.nav .brand-logo img{
  height:47px!important;
  max-width:226px!important;
  width:auto!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.footer-brand-logo img{
  height:45px!important;
  max-width:216px!important;
}
@media(max-width:900px){
  .nav .brand-logo img{
    height:41px!important;
    max-width:194px!important;
  }
  .footer-brand-logo img{
    height:41px!important;
    max-width:194px!important;
  }
}

.nav .brand-logo img{
  height:47px!important;
  max-width:224px!important;
  width:auto!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.footer-brand-logo img{
  height:44px!important;
  max-width:212px!important;
}
@media(max-width:900px){
  .nav .brand-logo img{
    height:40px!important;
    max-width:190px!important;
  }
}

.nav .brand-logo{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
}
.nav .brand-logo img{
  display:block!important;
  height:52px!important;
  width:auto!important;
  max-width:248px!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.footer-brand-logo img{
  height:48px!important;
  max-width:230px!important;
}
@media(max-width:900px){
  .nav .brand-logo img{
    height:43px!important;
    max-width:205px!important;
  }
  .footer-brand-logo img{
    height:42px!important;
    max-width:200px!important;
  }
}

/* ===== SINOLUX smooth image motion preview ===== */
@keyframes sinoluxHeroDrift{
  0%{
    transform:perspective(1000px) rotateY(-5deg) translate3d(0,0,0) scale(1.000);
  }
  50%{
    transform:perspective(1000px) rotateY(-5deg) translate3d(-1.2%,-0.7%,0) scale(1.025);
  }
  100%{
    transform:perspective(1000px) rotateY(-5deg) translate3d(0.9%,0.6%,0) scale(1.045);
  }
}
@keyframes sinoluxSectionDrift{
  0%{
    transform:translate3d(-0.5%,0,0) scale(1.015);
  }
  50%{
    transform:translate3d(0.8%,-0.6%,0) scale(1.035);
  }
  100%{
    transform:translate3d(-0.2%,0.8%,0) scale(1.050);
  }
}

.heroVisual img{
  animation:sinoluxHeroDrift 22s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}
.splitImg{
  overflow:hidden;
  border-radius:22px;
}
.splitImg img{
  animation:sinoluxSectionDrift 26s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}

@media(max-width:900px){
  .heroVisual img{
    animation-duration:26s!important;
  }
  .splitImg img{
    animation-duration:30s;
  }
}

@media(prefers-reduced-motion:reduce){
  .heroVisual img,
  .splitImg img{
    animation:none!important;
    transform:none!important;
  }
}
/* ===== end smooth image motion preview ===== */

/* ===== SINOLUX interactive hover effects preview ===== */
@media (hover:hover) and (pointer:fine){

  /* Navigation: animated underline */
  .links a:not(.btn){
    position:relative;
    transition:color .25s ease, opacity .25s ease;
  }
  .links a:not(.btn)::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple));
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .links a:not(.btn):hover{
    color:#fff;
  }
  .links a:not(.btn):hover::after{
    transform:scaleX(1);
  }

  /* Buttons: lift + glow */
  .btn{
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      box-shadow .28s ease,
      filter .28s ease;
  }
  .btn:hover{
    transform:translateY(-3px) scale(1.018);
    box-shadow:0 16px 38px rgba(0,168,255,.38);
    filter:brightness(1.08) saturate(1.08);
  }
  .btn:active{
    transform:translateY(-1px) scale(.995);
  }
  .btn.alt:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.8);
    box-shadow:0 12px 30px rgba(30,95,255,.18);
  }

  /* Service cards: lift + light sweep */
  .service{
    position:relative;
    overflow:hidden;
    transition:
      transform .34s cubic-bezier(.2,.8,.2,1),
      box-shadow .34s ease,
      border-color .34s ease;
  }
  .service::before{
    content:"";
    position:absolute;
    top:-30%;
    bottom:-30%;
    left:-55%;
    width:34%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-18deg);
    opacity:0;
    transition:left .65s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    pointer-events:none;
  }
  .service:hover{
    transform:translateY(-8px);
    border-color:rgba(0,168,255,.28);
    box-shadow:0 24px 55px rgba(7,21,47,.14);
  }
  .service:hover::before{
    left:125%;
    opacity:.65;
  }
  .service .icon{
    display:inline-block;
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .service:hover .icon{
    transform:translateY(-2px) scale(1.12) rotate(-3deg);
  }

  /* Portfolio/projects: cinematic zoom + elevated caption */
  .project{
    transition:
      transform .36s cubic-bezier(.2,.8,.2,1),
      box-shadow .36s ease;
  }
  .project:hover{
    transform:translateY(-7px);
    box-shadow:0 28px 60px rgba(7,21,47,.24);
  }
  .project img{
    transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease;
  }
  .project:hover img{
    transform:scale(1.065);
    filter:saturate(1.08) contrast(1.03);
  }
  .project .cap{
    transition:
      transform .34s cubic-bezier(.2,.8,.2,1),
      background .34s ease,
      box-shadow .34s ease;
  }
  .project:hover .cap{
    transform:translateY(-5px);
    background:rgba(7,21,47,.95);
    box-shadow:0 14px 30px rgba(0,0,0,.2);
  }

  /* Trust stats */
  .trust div{
    transition:transform .28s ease, background .28s ease, box-shadow .28s ease;
  }
  .trust div:hover{
    transform:translateY(-4px);
    background:#f8fbff;
    box-shadow:inset 0 3px 0 rgba(0,168,255,.8);
  }

  /* Floating hero labels */
  .float{
    transition:
      transform .32s cubic-bezier(.2,.8,.2,1),
      box-shadow .32s ease;
  }
  .float:hover{
    transform:translateY(-6px) scale(1.025);
    box-shadow:0 22px 45px rgba(0,0,0,.24);
  }

  /* Image mosaics */
  .photoGrid img{
    transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease, box-shadow .35s ease;
  }
  .photoGrid img:hover{
    transform:translateY(-4px) scale(1.018);
    filter:saturate(1.08) contrast(1.03);
    box-shadow:0 18px 38px rgba(7,21,47,.16);
  }
}

@media(prefers-reduced-motion:reduce){
  .links a,
  .btn,
  .service,
  .service::before,
  .service .icon,
  .project,
  .project img,
  .project .cap,
  .trust div,
  .float,
  .photoGrid img{
    transition:none!important;
  }
}
/* ===== end SINOLUX interactive hover effects preview ===== */

/* ===== SINOLUX floating gallery + reveal demo ===== */
.heroVisual{
  --mxp:0px;
  --myp:0px;
  --mxn:0px;
  --myn:0px;
  --mxc:0px;
  --myc:0px;
}
.floating-shot{
  position:absolute;
  z-index:3;
  width:126px;
  height:82px;
  border-radius:15px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  background:#0b2147;
  pointer-events:none;
  will-change:transform;
}
.floating-shot img{
  position:static!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}
.shot-a{
  top:4%;
  left:4%;
  animation:sinoluxFloatA 7.8s ease-in-out infinite alternate;
}
.shot-b{
  top:34%;
  right:-4%;
  width:112px;
  height:74px;
  animation:sinoluxFloatB 9.3s ease-in-out infinite alternate;
}
.shot-c{
  bottom:7%;
  left:18%;
  width:118px;
  height:78px;
  animation:sinoluxFloatC 8.6s ease-in-out infinite alternate;
}

@keyframes sinoluxFloatA{
  0%{transform:translate3d(var(--mxp),var(--myp),0) rotate(-4deg)}
  50%{transform:translate3d(calc(var(--mxp) + 8px),calc(var(--myp) - 10px),0) rotate(-1deg)}
  100%{transform:translate3d(calc(var(--mxp) - 5px),calc(var(--myp) + 7px),0) rotate(2deg)}
}
@keyframes sinoluxFloatB{
  0%{transform:translate3d(var(--mxn),calc(var(--myn) + 3px),0) rotate(5deg)}
  50%{transform:translate3d(calc(var(--mxn) - 7px),calc(var(--myn) - 9px),0) rotate(2deg)}
  100%{transform:translate3d(calc(var(--mxn) + 5px),calc(var(--myn) + 9px),0) rotate(7deg)}
}
@keyframes sinoluxFloatC{
  0%{transform:translate3d(calc(var(--mxc) - 2px),var(--myc),0) rotate(3deg)}
  50%{transform:translate3d(calc(var(--mxc) + 9px),calc(var(--myc) + 6px),0) rotate(0deg)}
  100%{transform:translate3d(calc(var(--mxc) - 6px),calc(var(--myc) - 8px),0) rotate(-3deg)}
}

.reveal-section{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal-section.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:900px){
  .floating-shot{
    display:none!important;
  }
  .reveal-section{
    transform:translateY(18px);
  }
}

@media(prefers-reduced-motion:reduce){
  .floating-shot{
    animation:none!important;
  }
  .reveal-section{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}
/* ===== end SINOLUX floating gallery + reveal demo ===== */

/* ===== SINOLUX service tile colour hover ===== */
.service{
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.2,.8,.2,1);
}
.service h3,
.service p{
  transition:color .30s ease;
}
@media(hover:hover) and (pointer:fine){
  .service:nth-child(1):hover{
    background:linear-gradient(145deg,#dffbff 0%,#dceaff 100%)!important;
    border-color:#7edff1!important;
    box-shadow:0 24px 52px rgba(0,168,255,.16)!important;
  }
  .service:nth-child(2):hover{
    background:linear-gradient(145deg,#eee8ff 0%,#ddd8ff 100%)!important;
    border-color:#b7a7ff!important;
    box-shadow:0 24px 52px rgba(118,87,255,.16)!important;
  }
  .service:nth-child(3):hover{
    background:linear-gradient(145deg,#ffe4f0 0%,#fff0e5 100%)!important;
    border-color:#f4a9ca!important;
    box-shadow:0 24px 52px rgba(255,59,157,.14)!important;
  }
  .service:hover h3{color:#10203b}
  .service:hover p{color:#40506b}
}
@media(prefers-reduced-motion:reduce){
  .service,.service h3,.service p{transition:none!important}
}
/* ===== end service tile colour hover ===== */
/* ===== SINOLUX SEO tile hover + pulse ===== */
.seoList div{
  position:relative;
  overflow:hidden;
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),
    color .30s ease;
}
.seoList div b{
  transition:color .30s ease;
}
@keyframes seoTilePulse{
  0%,100%{
    transform:translateY(-5px) scale(1.015);
  }
  50%{
    transform:translateY(-7px) scale(1.035);
  }
}
@media(hover:hover) and (pointer:fine){
  .seoList div:nth-child(1):hover{
    background:linear-gradient(145deg,#dffbff 0%,#dceaff 100%)!important;
    border-color:#76dff0!important;
    box-shadow:0 22px 50px rgba(0,168,255,.18)!important;
    animation:seoTilePulse 1.6s ease-in-out infinite;
  }
  .seoList div:nth-child(2):hover{
    background:linear-gradient(145deg,#e1fff1 0%,#d8f7ec 100%)!important;
    border-color:#8bd9b1!important;
    box-shadow:0 22px 50px rgba(59,180,120,.16)!important;
    animation:seoTilePulse 1.6s ease-in-out infinite;
  }
  .seoList div:nth-child(3):hover{
    background:linear-gradient(145deg,#eee8ff 0%,#ddd8ff 100%)!important;
    border-color:#b6a5ff!important;
    box-shadow:0 22px 50px rgba(118,87,255,.17)!important;
    animation:seoTilePulse 1.6s ease-in-out infinite;
  }
  .seoList div:nth-child(4):hover{
    background:linear-gradient(145deg,#ffe5f0 0%,#fff0df 100%)!important;
    border-color:#f3a5c7!important;
    box-shadow:0 22px 50px rgba(255,99,160,.16)!important;
    animation:seoTilePulse 1.6s ease-in-out infinite;
  }
  .seoList div:hover{
    color:#40506b;
  }
  .seoList div:hover b{
    color:#10203b;
  }
}
@media(prefers-reduced-motion:reduce){
  .seoList div{
    animation:none!important;
    transition:none!important;
  }
}
/* ===== end SINOLUX SEO tile hover + pulse ===== */
/* ===== About list magnifier effect ===== */
.about-zoom-list{
  overflow:visible;
}
.about-zoom-list div{
  position:relative;
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  margin-left:-12px;
  border-radius:12px;
  transform-origin:left center;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .28s ease,
    box-shadow .28s ease,
    color .28s ease;
}
@media(hover:hover) and (pointer:fine){
  .about-zoom-list div{
    cursor:zoom-in;
  }
  .about-zoom-list div:hover{
    transform:translateX(8px) scale(1.16);
    background:linear-gradient(90deg,rgba(223,251,255,.92),rgba(238,232,255,.92));
    box-shadow:0 14px 34px rgba(27,56,102,.13);
    color:#10203b;
    z-index:5;
  }
  .about-zoom-list div:hover:before{
    color:#6f63ff;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-zoom-list div{
    transition:none!important;
  }
}
/* ===== end About list magnifier effect ===== */
/* ===== technical SEO/accessibility polish (draft-safe) ===== */
.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.section .eyebrow,
.split .eyebrow{
  color:#075f9f;
}
/* ===== end technical SEO/accessibility polish ===== */