/* =========================
RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --content-width:1040px;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#040404;
  color:#fff;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  line-height:1.3;
}

img{
  max-width:100%;
  display:block;
}

video{
  display:block;
  width:100%;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================
MODAL
========================= */

.video-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
}

.modal-overlay{
  position:absolute;
  inset:0;
  background:#000;
}

.modal-content{
  position:relative;
  width:min(1180px,82vw);
  max-height:82vh;
  z-index:10;
}

.modal-video{
  width:100%;
  max-height:82vh;
  object-fit:contain;
  border-radius:8px;
  background:#000;
}

.modal-image{
  display:none;
  width:100%;
  max-height:82vh;
  object-fit:contain;
  border-radius:8px;
  background:#000;
}

.modal-close{
  position:absolute;
  top:-52px;
  right:0;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  font-size:24px;
}

/* =========================
MOUSE LIGHT
========================= */

.mouse-light{
  position:fixed;
  width:520px;
  height:520px;
  background:
  radial-gradient(circle,
  rgba(142,164,255,.08) 0%,
  transparent 60%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:0;
}

/* =========================
NAV
========================= */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 28px;
  background:
  linear-gradient(to bottom,
  rgba(0,0,0,.52),
  rgba(0,0,0,0));
  backdrop-filter:blur(12px);
}

.nav-logo{
  font-size:13px;
  font-weight:700;
}

.nav-menu{
  display:flex;
  gap:28px;
}

.nav-menu a{
  font-size:12px;
  color:rgba(255,255,255,.62);
  position:relative;
  padding:6px 0;
  transition:.3s ease;
}

.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:#8ea4ff;
  transition:width .3s ease;
}

.nav-menu a:hover{
  color:#fff;
}

.nav-menu a:hover::after{
  width:100%;
}

/* =========================
HERO
========================= */

.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#000;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  filter:brightness(.88);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
  radial-gradient(ellipse at center,
  rgba(0,0,0,0) 0%,
  rgba(0,0,0,.14) 48%,
  rgba(0,0,0,.88) 100%);
}

.hero-noise{
  position:absolute;
  inset:0;
  opacity:.03;
}

.hero-content{
  position:absolute;
  left:80px;
  bottom:120px;
  z-index:2;
}

.hero-top-text{
  font-size:8px;
  letter-spacing:3px;
  color:#8ea4ff;
  margin-bottom:12px;
}

.hero-title{
  font-size:64px;
  line-height:.9;
  letter-spacing:-0.08em;
  margin-bottom:12px;
}

.hero-subtitle-wrapper{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.hero-subtitle{
  font-size:11px;
  color:rgba(255,255,255,.82);
}

.hero-desc{
  font-size:10px;
  color:rgba(255,255,255,.46);
}

.scroll-tip{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.scroll-tip span{
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:12px;
}

.scroll-line{
  width:1px;
  height:58px;
  background:rgba(255,255,255,.16);
}

.hero-footer-quote{
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:9px;
  color:rgba(255,255,255,.14);
}

/* =========================
SECTION LABEL
========================= */

.section-label{
  font-size:10px;
  letter-spacing:5px;
  color:#8ea4ff;
}

/* =========================
SHOWREEL
========================= */

.showreel-section{
  padding:80px 8vw 140px;
  background:#000;
}

.showreel-topbar{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}

.showreel-line{
  flex:1;
  height:1px;
  background:
  linear-gradient(to right,
  rgba(142,164,255,.28),
  rgba(255,255,255,0));
}

.showreel-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:12px;
}

.showreel-video-wrap{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#080808;
}

.showreel-video{
  width:100%;
}

.showreel-side-card{
  border-radius:18px;
  background:
  linear-gradient(180deg,
  rgba(18,22,34,.92),
  rgba(8,8,10,.98));
  overflow:hidden;
}

.side-card-inner{
  padding:32px 24px 18px;
  height:100%;
  display:flex;
  flex-direction:column;
}

.side-small-title{
  font-size:6px;
  letter-spacing:3px;
  color:#8ea4ff;
  margin-bottom:18px;
}

.side-title{
  font-size:15px;
  line-height:1.1;
  margin-bottom:px;
}

.side-desc{
  font-size:8px;
  line-height:1.3;
  color:rgba(255,255,255,.48);
  margin-bottom:5;
  margin-top:150px;
}

.side-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:110px;
}

.side-tags span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:10px;
  color:rgba(255,255,255,.62);
}

/* =========================
MOTION GRID
========================= */

.motion-video-section{
  padding:0 8vw 140px;
}

.motion-video-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  margin-top:40px;
}

.video-item{
  overflow:hidden;
  border-radius:10px;
  background:#0b0b0b;
  position:relative;
  cursor:pointer;
}

.video-item video{
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:.5s;
}

.video-item:hover video{
  transform:scale(1.03);
}

/* =========================
EDITORIAL
========================= */

.editorial-content{
  background:#e8e8e8;
  color:#111;
  padding:120px 0 160px;
  transform:scale(1.4);
  transform-origin:top center;
  margin-bottom:18vh;
}

.editorial-block{
  width:min(var(--content-width),calc(100vw - 40px));
  margin:0 auto 180px;
}

.editorial-headline-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.editorial-headline{
  font-size:60px;
  line-height:2.0;
  letter-spacing:-0.08em;
  margin-bottom:30px;
}

.editorial-caption{
  width:300px;
  max-width:100%;
  font-size:8px;
  line-height:1.5;
  color:rgba(0,0,0,.48);
  margin:0 auto;
}

.editorial-main-kv{
  margin-top:28px;
}

.editorial-main-kv img{
  width:100%;
}

.editorial-title-wrap{
  margin-bottom:18px;
}

.editorial-overline{
  font-size:8px;
  letter-spacing:.28em;
  color:rgba(0,0,0,.36);
  margin-bottom:8px;
}

.editorial-title{
  font-size:28px;
  letter-spacing:-0.07em;
  line-height:.94;
}

.selected-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:90px;
}

.visual-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.future-grid-top{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:8px;
}

.future-wide{
  margin-bottom:30px;
}

/* =========================
HAND DEVICE
========================= */

.future-single{
  width:100%;
  margin:0 auto -230px;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:20;
}

.future-single img{
  width:544px;
  max-width:none;
  height:auto;
  display:block;
}

/* =========================
AW CARD
========================= */

.aw-card{
  overflow:hidden;
  border-radius:6px;
  cursor:pointer;
}

.aw-card img{
  transition:.5s;
}

.aw-card:hover img{
  transform:scale(1.02);
}

/* =========================
RENDER SHOWCASE
========================= */

.render-editorial{
  width:min(var(--content-width),calc(100vw - 40px));
  margin:230px auto 0;
  position:relative;
  z-index:30;
  transform:scale(1.0);
  transform-origin:top center;
}

.render-showcase-card{
  width:100%;
  background:#f8f8f8;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  margin:0 auto 42px;
  cursor:pointer;
}

/* =========================
FIRST RENDER CARD
========================= */

.render-card-one{
  height:560px;
}

.render-card-text{
  position:absolute;
  left:80px;
  top:150px;
  width:200px;
  color:#111;
  z-index:6;
}

.render-card-text h3{
  font-size:23px;
  line-height:1.08;
  letter-spacing:-0.04em;
  font-weight:700;
  margin-bottom:16px;
}

.render-card-text p{
  font-size:7px;
  line-height:1.2;
  font-weight:500;
  color:rgba(0,0,0,.66);
}

.render-phone-row-three{
  position:absolute;
  left:360px;
  bottom:68px;
  width:610px;
  height:420px;
  z-index:4;
}

.render-phone-reflect{
  position:absolute;
  bottom:0;
}

.render-phone-internal{
  left:-50px;
  bottom:-50px;
}

.render-phone-side{
  left:130px;
  bottom:-50px;
}

.render-phone-back{
  left:350px;
  bottom:20px;
}

.render-phone-internal img{
  height:540px;
}

.render-phone-side img{
  height:510px;
}

.render-phone-back img{
  height:440px;
}

/* =========================
SECOND RENDER CARD
========================= */

.render-card-two{
  height:560px;
  margin-top:42px;
  background:#eeeeee;
  border-radius:18px;
  overflow:hidden;
}

.render-angle-phone{
  position:absolute;
  left:50px;
  bottom:-850px;
  width:1000px;
  z-index:4;
}

.render-angle-phone img{
  width:100%;
  max-width:none;
  height:auto;
}

.render-angle-text{
  position:absolute;
  right: 100px;
  top:90px;
  width:200px;
  color:#111;
  z-index:6;
}

.render-angle-text h3{
  font-size:23px;
  line-height:1.08;
  letter-spacing:-0.07em;
  font-weight:700;
  margin-bottom:26px;
}

.render-angle-text p{
  font-size:7px;
  line-height:1.20;
  font-weight:500;
  color:rgba(0,0,0,.38);
}

/* =========================
THIRD RENDER CARD
========================= */

.render-card-three{
  height:560px;
  margin-top:42px;
  background:#f8f8f8;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}

.render-three-text{
  position:absolute;
  left:150px;
  top:180px;
  width:200px;
  z-index:6;
  color:#111;
}

.render-three-text h3{
  font-size:23px;
  line-height:1.20;
  letter-spacing:-0.07em;
  font-weight:700;
  margin-bottom:24px;
}

.render-three-text p{
  font-size:7px;
  line-height:1.2;
  font-weight:500;
  color:rgba(0,0,0,.38);
}

.render-three-phones{
  position:absolute;
  right:120px;
  bottom:38px;
  width:420px;
  height:430px;
}

.render-three-front,
.render-three-side{
  position:absolute;
  bottom:0;
}

.render-three-front{
  left:0;
}

.render-three-side{
  right:-120px;
  bottom:-10px;
}

.render-three-front img{
  height:530px;
  max-width:none;
  object-fit:contain;
  -webkit-box-reflect:below -30px linear-gradient(to bottom, rgba(255,255,255,.23), rgba(255,255,255,0));
}

.render-three-side img{
  height:530px;
  max-width:none;
  object-fit:contain;
  -webkit-box-reflect:below -50px linear-gradient(to bottom, rgba(255,255,255,.30), rgba(255,255,255,0));
}

/* =========================
FOURTH RENDER CARD
========================= */

.render-card-four{
  height:560px;
  margin-top:42px;
  background:#eeeeee;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}

.render-four-phones{
  position:absolute;
  left:-55px;
  bottom:-190px;
  width:860px;
  height:660px;
  z-index:4;
}

.render-four-phone{
  position:absolute;
  bottom:0;
}

.render-four-phone img{
  max-width:none;
  height:auto;
}

.render-four-phone-left{
  left: 260px;
  bottom: 36px;
  z-index:3;
  transform:rotate(-30deg);
  transform-origin:center bottom;
}

.render-four-phone-left img{
  width:450px;
}

.render-four-phone-middle{
  left:410px;
  bottom:40px;
  z-index:4;
  transform:rotate(-24deg);
  transform-origin:center bottom;
}

.render-four-phone-middle img{
  width:500px;
}

.render-four-phone-right{
  left:500px;
  bottom:90px;
  z-index:5;
  transform:rotate(-11deg);
  transform-origin:center bottom;
}

.render-four-phone-right img{
  width:420px;
}

.render-four-text{
  position:absolute;
  right:10px;
  top:104px;
  width:285px;
  color:#111;
  z-index:10;
}

.render-four-text h3{
  font-size:23px;
  line-height:1.08;
  letter-spacing:-0.07em;
  font-weight:700;
  margin-bottom:30px;
}

.render-four-line{
  width:42px;
  height:1px;
  background:rgba(0,0,0,.18);
  margin-bottom:32px;
}

.render-four-text p{
  font-size:7px;
  line-height:1.2;
  font-weight:500;
  color:rgba(0,0,0,.68);
}



/* =========================
FIFTH RENDER CARD
========================= */

.render-card-five{
  height:560px;
  margin-top:42px;
  background:#f8f8f8;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}

.render-five-text{
  position:absolute;
  left:50px;
  top:170px;
  width:250px;
  color:#111;
  z-index:10;
}

.render-five-text h3{
  font-size:23px;
  line-height:.96;
  letter-spacing:-0.07em;
  font-weight:700;
  margin-bottom:18px;
}

.render-five-text p{
  font-size:7px;
  line-height:1.65;
  font-weight:500;
  color:rgba(0,0,0,.48);
}

.render-five-materials{
  position:absolute;
  right:34px;
  top:64px;
  display:flex;
  gap:18px;
  height:432px;
}

.render-five-material-card{
  width:212px;
  height:432px;
  background:#eeeeee;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}

.render-five-copy{
  position:absolute;
  left:20px;
  top:22px;
  z-index:10;
}

.render-five-copy h4{
  font-size:18px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.06em;
  color:#111;
  margin-bottom:18px;
}

.render-five-copy p{
  font-size:7px;
  line-height:1.2;
  font-weight:500;
  color:rgba(0,0,0,.48);
}

.render-five-material-card img{
  position:absolute;
  max-width:none;
  height:auto;
  object-fit:contain;
}

.render-five-card-glass img{
  width:420px;
  left:-88px;
  bottom: -280px;
}

.render-five-card-matte img{
  width:400px;
  left:-72px;
  bottom:-270px;
}

.render-five-card-leather img{
  width:450px;
  left:-99px;
  bottom: -380px;
}

/* =========================
结尾模块（1:1复刻参考图）
========================= */
.footer-end-card{
  height:560px;
  background:#e9e9e9;
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-end-module {
  width:100%;
  text-align:center;
  font-family: 'Inter', sans-serif;
  padding:0 40px;
}

.footer-end-module .main-title {
  font-size:36px;
  font-weight:600;
  color:#111;
  margin:0 0 16px;
  line-height:1.2;
  letter-spacing:-0.02em;
}

.footer-end-module .divider-line{
  width:60px;
  height:2px;
  background:#000000;
  margin:0 auto 24px;
}

.footer-end-module .sub-title {
  font-size:10px;
  color:rgba(0, 0, 0, 0.5);
  max-width:600px;
  margin:0 auto 40px;
  line-height:1.6;
  font-weight:200;
}

.footer-end-module .scroll-icon {
  width:30px;
  height:30px;
  margin:0 auto;
  border:2px solid #000000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000000;
  animation:verticalBounce 2s infinite ease-in-out;
}

.trusted-brands{
  width:100%;
  margin:130px auto 0;
  text-align:center;
}

.trusted-brands-title{
  font-size:9px;
  line-height:1;
  letter-spacing:.34em;
  font-weight:700;
  color:#111;
  margin-bottom:18px;
}

.trusted-brands-subtitle{
  font-size:10px;
  line-height:1.5;
  font-weight:300;
  color:rgba(0,0,0,.48);
  margin-bottom:46px;
}

.trusted-brands-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trusted-brands-track{
  display:flex;
  align-items:center;
  gap:72px;
  width:max-content;
  animation:trustedBrandsMove 46s linear infinite;
}

.trusted-brands-track img{
  width:auto;
  height:22px;
  max-width:none;
  object-fit:contain;
  opacity:.4;
  filter:grayscale(1);
  transition:opacity .45s ease, filter .45s ease;
  flex:0 0 auto;
}

.trusted-brands-track img:hover{
  opacity:1;
  filter:grayscale(1);
}

.trusted-brands-note{
  margin-top:58px;
  font-size:9px;
  line-height:1.5;
  font-weight:300;
  color:rgba(0,0,0,.42);
}

@keyframes trustedBrandsMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

@keyframes verticalBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

  :root{
    --content-width:760px;
  }

  .showreel-layout{
    grid-template-columns:1fr;
  }

  .editorial-block,
  .render-editorial{
    width:min(var(--content-width),calc(100vw - 40px));
  }

  .selected-grid,
  .visual-grid,
  .future-grid-top{
    grid-template-columns:1fr;
  }

  .future-single img{
    width:300px;
  }

  .render-card-one{
    height:430px;
  }

  .render-card-text{
    left:34px;
    top:42px;
    width:240px;
  }

  .render-phone-row-three{
    left:260px;
    bottom:50px;
    transform:scale(.8);
    transform-origin:left bottom;
  }

  .render-card-two{
    height:430px;
  }

  .render-angle-phone{
    left:-150px;
    bottom:-170px;
    width:820px;
  }

  .render-angle-text{
    right:34px;
    top:72px;
    width:250px;
  }

  .render-angle-text h3{
    font-size:32px;
  }

  .render-angle-text p{
    font-size:12px;
  }

  .render-card-three{
    height:430px;
  }

  .render-three-text{
    left:34px;
    top:130px;
    width:260px;
  }

  .render-three-text h3{
    font-size:32px;
  }

  .render-three-text p{
    font-size:12px;
  }

  .render-three-phones{
    right:40px;
    bottom:42px;
    transform:scale(.78);
    transform-origin:right bottom;
  }

  .render-card-four{
    height:430px;
  }

  .render-four-phones{
    left:-130px;
    bottom:-160px;
    transform:scale(.62);
    transform-origin:left bottom;
  }

  .render-four-text{
    right:34px;
    top:72px;
    width:220px;
  }

  .render-four-text h3{
    font-size:32px;
  }

  .render-four-text p{
    font-size:12px;
  }

  /* 结尾模块移动端适配 */
  .footer-end-card{
    height:430px;
  }
  .footer-end-module .main-title{
    font-size:32px;
  }
  .footer-end-module .sub-title{
    font-size:15px;
  }
  .footer-end-module .scroll-icon{
    width:48px;
    height:48px;
  }

  .trusted-brands{
    margin-top:78px;
  }

  .trusted-brands-title{
    font-size:8px;
    margin-bottom:14px;
  }

  .trusted-brands-subtitle{
    font-size:9px;
    margin-bottom:32px;
  }

  .trusted-brands-track{
    gap:48px;
    animation-duration:38s;
  }

  .trusted-brands-track img{
    height:18px;
  }

  .trusted-brands-note{
    margin-top:38px;
    font-size:8px;
  }

}

@media(max-width:768px){

  .hero-content{
    left:30px;
    bottom:80px;
  }

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

  .showreel-section,
  .motion-video-section{
    padding-left:24px;
    padding-right:24px;
  }

  .motion-video-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .editorial-content{
    padding:70px 0 100px;
  }

  .editorial-block,
  .render-editorial{
    width:calc(100vw - 40px);
  }

  .mouse-light{
    display:none;
  }

  .render-card-two{
    height:460px;
  }

  .render-angle-phone{
    left:-210px;
    bottom:-150px;
    width:760px;
  }

  .render-angle-text{
    right:24px;
    top:44px;
    width:210px;
  }

  .render-angle-text h3{
    font-size:28px;
  }

  .render-angle-text p{
    font-size:11px;
  }

  .render-card-three{
    height:460px;
  }

  .render-three-text{
    left:28px;
    top:46px;
    width:260px;
  }

  .render-three-text h3{
    font-size:28px;
  }

  .render-three-text p{
    font-size:11px;
  }

  .render-three-phones{
    right:-20px;
    bottom:42px;
    transform:scale(.72);
    transform-origin:right bottom;
  }

  .render-card-four{
    height:460px;
  }

  .render-four-phones{
    left:-170px;
    bottom:-175px;
    transform:scale(.54);
    transform-origin:left bottom;
  }

  .render-four-text{
    right:24px;
    top:44px;
    width:190px;
  }

  .render-four-text h3{
    font-size:28px;
  }

  .render-four-text p{
    font-size:11px;
  }

  .render-card-five{
    height:460px;
  }

  .render-five-text{
    left:24px;
    top:42px;
    width:180px;
  }

  .render-five-text h3{
    font-size:20px;
  }

  .render-five-text p{
    font-size:10px;
    line-height:1.5;
  }

  .render-five-materials{
    right:auto;
    left:200px;
    top:42px;
    gap:12px;
    transform:scale(.72);
    transform-origin:left top;
  }

  /* 结尾模块移动端终极适配 */
  .footer-end-card{
    height:460px;
  }
  .footer-end-module .main-title{
    font-size:28px;
  }
  .footer-end-module .sub-title{
    font-size:14px;
  }
  .footer-end-module .scroll-icon{
    width:44px;
    height:44px;
  }

  .trusted-brands{
    margin-top:64px;
  }

  .trusted-brands-title{
    font-size:7px;
    letter-spacing:.28em;
    margin-bottom:12px;
  }

  .trusted-brands-subtitle{
    font-size:8px;
    margin-bottom:28px;
  }

  .trusted-brands-track{
    gap:38px;
    animation-duration:34s;
  }

  .trusted-brands-track img{
    height:15px;
  }

  .trusted-brands-note{
    margin-top:32px;
    font-size:7px;
  }

}

/* =========================
MOBILE ONLY FIX
只修手机端：从 Render 到结尾
电脑端原参数不动
========================= */

@media (max-width:768px){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

  .editorial-content{
    transform:none;
    margin-bottom:0;
    padding:70px 0 82px;
  }

  .editorial-block{
    width:calc(100vw - 32px);
    margin:0 auto 76px;
  }

  .editorial-headline{
    font-size:38px;
    line-height:1.08;
    letter-spacing:-0.07em;
    margin-bottom:18px;
  }

  .editorial-caption{
    width:280px;
    font-size:9px;
    line-height:1.55;
  }

  .future-single{
    margin:0 auto -70px;
  }

  .future-single img{
    width:250px;
    max-width:100%;
  }

  .render-editorial{
    width:calc(100vw - 28px);
    margin:92px auto 0;
    transform:none;
  }

  .render-showcase-card,
  .render-card-two,
  .render-card-three,
  .render-card-four,
  .render-card-five,
  .footer-end-card{
    width:100%;
    border-radius:16px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }

  .render-card-one{
    height:610px;
  }

  .render-card-text{
    left:24px;
    top:36px;
    width:210px;
  }

  .render-card-text h3{
    font-size:25px;
    line-height:1.05;
  }

  .render-card-text p{
    font-size:10px;
    line-height:1.45;
  }

  .render-phone-row-three{
    left:50%;
    bottom:26px;
    width:620px;
    height:420px;
    transform:translateX(-45%) scale(.62);
    transform-origin:center bottom;
  }

  .render-card-two{
    height:610px;
    margin-top:24px;
  }

  .render-angle-text{
    left:24px;
    right:auto;
    top:38px;
    width:230px;
  }

  .render-angle-text h3{
    font-size:25px;
    line-height:1.05;
    margin-bottom:16px;
  }

  .render-angle-text p{
    font-size:10px;
    line-height:1.45;
  }

  .render-angle-phone{
    left:50%;
    bottom:-260px;
    width:720px;
    transform:translateX(-48%);
  }

  .render-card-three{
    height:610px;
    margin-top:24px;
  }

  .render-three-text{
    left:24px;
    top:38px;
    width:230px;
  }

  .render-three-text h3{
    font-size:25px;
    line-height:1.08;
    margin-bottom:16px;
  }

  .render-three-text p{
    font-size:10px;
    line-height:1.45;
  }

  .render-three-phones{
    right:50%;
    bottom:18px;
    width:420px;
    height:430px;
    transform:translateX(53%) scale(.62);
    transform-origin:center bottom;
  }

  .render-card-four{
    height:610px;
    margin-top:24px;
  }

  .render-four-text{
    left:24px;
    right:auto;
    top:38px;
    width:250px;
  }

  .render-four-text h3{
    font-size:25px;
    line-height:1.06;
    margin-bottom:18px;
  }

  .render-four-line{
    margin-bottom:18px;
  }

  .render-four-text p{
    font-size:10px;
    line-height:1.45;
  }

  .render-four-phones{
    left:50%;
    bottom:-170px;
    width:860px;
    height:660px;
    transform:translateX(-47%) scale(.48);
    transform-origin:center bottom;
  }

  .render-card-five{
    height:auto;
    min-height:760px;
    margin-top:24px;
    padding:34px 20px 28px;
  }

  .render-five-text{
    position:relative;
    left:auto;
    top:auto;
    width:240px;
    margin:0 0 24px;
  }

  .render-five-text h3{
    font-size:25px;
    line-height:1.04;
    margin-bottom:14px;
  }

  .render-five-text p{
    font-size:10px;
    line-height:1.45;
  }

  .render-five-materials{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    height:auto;
    transform:none;
  }

  .render-five-material-card{
    width:100%;
    height:172px;
    border-radius:12px;
  }

  .render-five-copy{
    left:18px;
    top:18px;
  }

  .render-five-copy h4{
    font-size:20px;
    margin-bottom:10px;
  }

  .render-five-copy p{
    font-size:9px;
    line-height:1.35;
  }

  .render-five-card-glass img{
    width:330px;
    left:auto;
    right:-92px;
    bottom:-206px;
  }

  .render-five-card-matte img{
    width:320px;
    left:auto;
    right:-86px;
    bottom:-202px;
  }

  .render-five-card-leather img{
    width:350px;
    left:auto;
    right:-104px;
    bottom:-278px;
  }

  .footer-end-card{
    height:auto;
    min-height:520px;
    padding:78px 20px 68px;
    margin-top:24px;
  }

  .footer-end-module{
    padding:0;
  }

  .footer-end-module .main-title{
    font-size:28px;
    line-height:1.15;
    margin-bottom:16px;
  }

  .footer-end-module .divider-line{
    width:46px;
    height:1px;
    margin-bottom:20px;
  }

  .footer-end-module .sub-title{
    font-size:10px;
    line-height:1.65;
    max-width:280px;
    margin-bottom:32px;
  }

  .footer-end-module .scroll-icon{
    width:34px;
    height:34px;
  }

  .trusted-brands{
    margin-top:56px;
  }

  .trusted-brands-title{
    font-size:8px;
    letter-spacing:.26em;
    margin-bottom:12px;
  }

  .trusted-brands-subtitle{
    font-size:9px;
    line-height:1.45;
    margin-bottom:28px;
  }

  .trusted-brands-track{
    gap:34px;
    animation-duration:34s;
  }

  .trusted-brands-track img{
    height:15px;
  }

  .trusted-brands-note{
    margin-top:30px;
    font-size:8px;
  }
}

@media (max-width:430px){

  .render-editorial{
    width:calc(100vw - 20px);
  }

  .render-card-one,
  .render-card-two,
  .render-card-three,
  .render-card-four{
    height:590px;
  }

  .render-phone-row-three{
    transform:translateX(-45%) scale(.56);
  }

  .render-angle-phone{
    bottom:-238px;
    width:660px;
  }

  .render-three-phones{
    transform:translateX(54%) scale(.56);
  }

  .render-four-phones{
    bottom:-152px;
    transform:translateX(-47%) scale(.43);
  }

  .render-five-material-card{
    height:164px;
  }
}
/* =========================================================
MOBILE RENDER MASTER CONTROL PANEL
五大 Render 模块移动端总控制台
只作用于手机端
========================================================= */

@media (max-width:768px){

/* =========================================================
BLOCK 1
========================================================= */

.render-card-one{

  width:100%;
  height:610px;
  min-height:auto;
  max-height:none;

  background:#f8f8f8;

  border-radius:16px;

  position:relative;

  top:-25px;
  left:0px;
  right:auto;
  bottom:auto;

  margin-top:0;
  margin-bottom:24px;

  padding:0;

  overflow:hidden;

  opacity:1;

  z-index:1;

  box-shadow:none;

  transform:none;
}

.render-card-text{

  position:absolute;

  width:210px;
  max-width:none;

  top:36px;
  left:24px;
  right:auto;
  bottom:auto;

  z-index:10;

  transform:none;

  opacity:1;

  text-align:left;
}

.render-card-text h3{

  font-size:25px;
  line-height:1.05;

  letter-spacing:-0.04em;

  font-weight:700;

  color:#111;

  margin:0 0 16px;

  opacity:1;

  transform:none;
}

.render-card-text p{

  font-size:10px;
  line-height:1.45;

  letter-spacing:0;

  font-weight:500;

  color:rgba(0,0,0,.66);

  width:auto;
  max-width:220px;

  margin:0;

  opacity:1;
}

.render-phone-row-three{

  position:absolute;

  width:620px;
  height:420px;

  left:50%;
  top:auto;
  bottom:80px;

  z-index:4;

  opacity:1;

  transform:
  translateX(-50%)
  scale(.62)
  rotate(0deg);

  transform-origin:center bottom;
}


/* =========================================================
BLOCK 2
========================================================= */

.render-card-two{

  width:100%;
  height:610px;

  background:#eeeeee;

  border-radius:16px;

  position:relative;

  top:0px;
  left:0px;

  margin-top:24px;
  margin-bottom:24px;

  overflow:hidden;

  opacity:1;

  z-index:1;

  transform:none;
}

.render-angle-text{

  position:absolute;

  width:230px;

  left:24px;
  top:38px;

  z-index:10;

  opacity:1;

  transform:none;
}

.render-angle-text h3{

  font-size:25px;
  line-height:1.05;

  font-weight:700;

  letter-spacing:-0.05em;

  color:#111;

  margin-bottom:16px;
}

.render-angle-text p{

  font-size:10px;
  line-height:1.45;

  font-weight:500;

  color:rgba(0,0,0,.58);
}

.render-angle-phone{

  position:absolute;

  width:720px;

  left:70%;
  bottom:-360px;

  z-index:4;

  opacity:1;

  transform:
  translateX(-48%)
  rotate(0deg)
  scale(.8);

  transform-origin:center bottom;
}


/* =========================================================
BLOCK 3
========================================================= */

.render-card-three{

  width:100%;
  height:610px;

  background:#f8f8f8;

  border-radius:16px;

  position:relative;

  top:0px;
  left:0px;

  margin-top:24px;
  margin-bottom:24px;

  overflow:hidden;

  opacity:1;

  z-index:1;

  transform:none;
}

.render-three-text{

  position:absolute;

  width:230px;

  left:24px;
  top:38px;

  z-index:10;

  opacity:1;

  transform:none;
}

.render-three-text h3{

  font-size:25px;
  line-height:1.08;

  font-weight:700;

  letter-spacing:-0.05em;

  color:#111;

  margin-bottom:16px;
}

.render-three-text p{

  font-size:10px;
  line-height:1.45;

  color:rgba(0,0,0,.58);
}

.render-three-phones{

  position:absolute;

  width:420px;
  height:430px;

  right:62%;
  bottom:30px;

  z-index:4;

  opacity:1;

  transform:
  translateX(53%)
  scale(.62)
  rotate(0deg);

  transform-origin:center bottom;
}


/* =========================================================
BLOCK 4
========================================================= */

.render-card-four{

  width:100%;
  height:610px;

  background:#eeeeee;

  border-radius:16px;

  position:relative;

  top:0px;
  left:0px;

  margin-top:24px;
  margin-bottom:24px;

  overflow:hidden;

  opacity:1;

  z-index:1;

  transform:none;
}

.render-four-text{

  position:absolute;

  width:250px;

  left:24px;
  top:38px;

  z-index:10;

  opacity:1;
}

.render-four-text h3{

  font-size:25px;
  line-height:1.06;

  font-weight:700;

  letter-spacing:-0.05em;

  color:#111;

  margin-bottom:18px;
}

.render-four-text p{

  font-size:10px;
  line-height:1.45;

  color:rgba(0,0,0,.58);
}

.render-four-phones{

  position:absolute;

  width:860px;
  height:660px;

  left:36%;
  bottom: -10%;

  z-index:4;

  opacity:1;

  transform:
  translateX(-55%)
  scale(.6)
  rotate(20deg);

  transform-origin:center bottom;
}


/* =========================================================
BLOCK 5
========================================================= */

.render-card-five{

  width:100%;

  min-height:760px;

  background:#f8f8f8;

  border-radius:16px;

  position:relative;

  top:0px;
  left:0px;

  margin-top:24px;
  margin-bottom:24px;

  padding:34px 20px 28px;

  overflow:hidden;

  opacity:1;

  z-index:1;
}

.render-five-text{

  position:relative;

  width:240px;

  left:0;
  top:0;

  margin-bottom:24px;

  z-index:10;

  opacity:1;
}

.render-five-text h3{

  font-size:25px;
  line-height:1.04;

  font-weight:700;

  letter-spacing:-0.05em;

  color:#111;

  margin-bottom:14px;
}

.render-five-text p{

  font-size:10px;
  line-height:1.45;

  color:rgba(0,0,0,.58);
}

.render-five-materials{

  position:relative;

  display:flex;
  flex-direction:column;

  gap:14px;

  height:auto;

  opacity:1;

  transform:none;
}

.render-five-material-card{

  width:100%;
  height:172px;

  background:#eeeeee;

  border-radius:12px;

  position:relative;

  overflow:hidden;

  opacity:1;
}

.render-five-card-glass img{

  width:330px;

  right:-90px;
  bottom:-310px;

  transform:rotate(0deg);

  opacity:1;
}

.render-five-card-matte img{

  width:300px;

  right:-80px;
  bottom:-270px;

  transform:rotate(0deg);

  opacity:1;
}

.render-five-card-leather img{

  width:350px;

  right:-104px;
  bottom:-350px;

  transform:rotate(0deg);

  opacity:1;
}


  }

@media (max-width:768px){
  /* 整个首页大区 */
  .hero{
    height:100vh;
    overflow:hidden;
  }

  /* 背景视频/图片 */
  .hero-video{
    width:100%;
    height:100%;
    object-fit:cover;

    transform:scale(1.0);
    object-position:center center;
  }

  /* 整组文字 */
  .hero-content{
    left:30px;
    bottom: 160px;
    top:auto;
    right:auto;

    width:320px;
    z-index:5;

    transform:none;
  }

  /* PRODUCT MOTION PORTFOLIO */
  .hero-top-text{
    font-size:4px;
    letter-spacing:5px;
    margin-bottom:12px;

    color:#8ea4ff;

    transform:none;
  }

  /* Aiden Zhou 大标题 */
  .hero-title{
    font-size:18px;
    line-height:.9;
    letter-spacing:-0.08em;

    margin-bottom:12px;

    transform:none;
  }

  /* Product / Motion / CGI Designer + 小字整体 */
  .hero-subtitle-wrapper{
    gap:5px;

    transform:none;
  }

  /* Product / Motion / CGI Designer */
  .hero-subtitle{
    font-size:6px;
    line-height:1.25;

    color:rgba(255,255,255,.82);

    transform:none;
  }

  /* Focused on cinematic visual storytelling */
  .hero-desc{
    font-size:7px;
    line-height:1.35;

    color:rgba(255,255,255,.46);

    transform:none;
  }

  /* SCROLL TO EXPLORE 整体 */
  .scroll-tip{
    left:50%;
    bottom:40px;

    z-index:6;

    transform:translateX(-50%);
  }

  /* SCROLL TO EXPLORE 文字 */
  .scroll-tip span{
    font-size:4px;
    letter-spacing:5px;

    white-space:nowrap;

    margin-bottom:12px;
  }

  /* 下面竖线 */
  .scroll-line{
    width:1px;
    height:42px;

    background:rgba(255,255,255,.25);
  }

  /* 右下角灰色句子 */
  .hero-footer-quote{
    right:66px;
    bottom:6px;

    font-size:5px;

    color:rgba(255,255,255,.18);

    transform:none;
  }

}/* =========================
LAPTOP WIDTH FIX
只修笔记本宽度
KV / Visual 区
+
Product Render 区
========================= */

@media screen and (min-width:1280px) and (max-width:1600px){

  /* =========================
  上面 KV / Visual 区
  ========================= */

  .editorial-block{

    width:calc(100vw - 700px) !important;

    max-width:1040px !important;

    margin-left:auto !important;
    margin-right:auto !important;

  }


  /* =========================
  下面 Product Render 区
  ========================= */

  .render-editorial{

    width:calc(100vw - 700px) !important;

    max-width:1040px !important;

    margin-left:auto !important;
    margin-right:auto !important;

  }

}/* =========================================================
LAPTOP RENDER MASTER CONTROL
笔记本端五块 Render 完整控制层
========================================================= */

@media screen and (min-width:1280px) and (max-width:1600px){

/* =========================================================
BLOCK 1
========================================================= */

.render-card-one{

  width:100% !important;

  height:380px !important;

  max-width:none !important;

  background:#f8f8f8 !important;

  border-radius:18px !important;

  position:relative !important;

  top:0 !important;
  left:0 !important;

  padding:0 !important;

  overflow:hidden !important;

  transform:none !important;
}

.render-card-text{

  position:absolute !important;

  left:80px !important;
  top:80px !important;

  width:150px !important;

  z-index:10 !important;

  transform:none !important;
}

.render-card-text h3{

  font-size:18px !important;

  line-height:1.08 !important;

  margin-bottom:18px !important;
}

.render-card-text p{

  font-size:7px !important;

  line-height:1.45 !important;
}

.render-phone-row-three{

  position:absolute !important;

  left:270px !important;

  bottom:50px !important;

  transform:
  scale(.66)
  rotate(0deg) !important;

  transform-origin:left bottom !important;

  z-index:4 !important;
}


/* =========================================================
BLOCK 2
========================================================= */

.render-card-two{

  width:100% !important;

  height:380px !important;

  background:#eeeeee !important;

  border-radius:18px !important;

  overflow:hidden !important;

  position:relative !important;
}

.render-angle-text{

  position:absolute !important;

  right: 30px !important;
  top:60px !important;

  width:220px !important;

  z-index:10 !important;
}

.render-angle-text h3{

  font-size:18px !important;

  line-height:1.08 !important;

  margin-bottom:20px !important;
}

.render-angle-text p{

  font-size:7px !important;

  line-height:1.45 !important;
}

.render-angle-phone{

  position:absolute !important;

  left:50px !important;

  bottom:-560px !important;

  transform:
  scale(.66)
  rotate(0deg) !important;

  transform-origin:left bottom !important;
}


/* =========================================================
BLOCK 3
========================================================= */

.render-card-three{

  width:100% !important;

  height:380px !important;

  background:#f8f8f8 !important;

  border-radius:18px !important;

  overflow:hidden !important;

  position:relative !important;
}

.render-three-text{

  position:absolute !important;

  left:80px !important;
  top:80px !important;

  width:220px !important;

  z-index:10 !important;
}

.render-three-text h3{

  font-size:18px !important;

  line-height:1.08 !important;

  margin-bottom:20px !important;
}

.render-three-text p{

  font-size:7px !important;

  line-height:1.45 !important;
}

.render-three-phones{

  position:absolute !important;

  right:120px !important;

  bottom: 23px !important;

  transform:
  scale(.66)
  rotate(0deg) !important;

  transform-origin:right bottom !important;
}


/* =========================================================
BLOCK 4
========================================================= */

.render-card-four{

  width:100% !important;

  height:380px !important;

  background:#eeeeee !important;

  border-radius:18px !important;

  overflow:hidden !important;

  position:relative !important;
}

.render-four-text{

  position:absolute !important;

  right:-50px !important;
  top:50px !important;

  width:240px !important;

  z-index:10 !important;
}

.render-four-text h3{

  font-size:18px !important;

  line-height:1.08 !important;

  margin-bottom:22px !important;
}

.render-four-text p{

  font-size:7px !important;

  line-height:1.45 !important;
}

.render-four-phones{

  position:absolute !important;

  left: -5px !important;

  bottom:-150px !important;

  transform:
  scale(.66)
  rotate(0deg) !important;

  transform-origin:left bottom !important;
}


/* =========================================================
BLOCK 5
========================================================= */

.render-card-five{

  width:100% !important;

  height:380px !important;

  background:#f8f8f8 !important;

  border-radius:18px !important;

  overflow:hidden !important;

  position:relative !important;

  top:0 !important;
  left:0 !important;

  padding:0 !important;

  transform:none !important;
}


/* =========================
左侧文案区
========================= */

.render-five-text{

  position:absolute !important;

  left:60px !important;
  top:120px !important;

  width:100px !important;

  z-index:10 !important;

  transform:none !important;
}

.render-five-text h3{

  font-size:18px !important;

  line-height:1.08 !important;

  margin-bottom:18px !important;

  letter-spacing:-0.05em !important;
}

.render-five-text p{

  font-size:7px !important;

  line-height:1.5 !important;
}


/* =========================
三个材料卡片总区域
========================= */

.render-five-materials{

  position:absolute !important;

  right:23px !important;
  top:40px !important;

  display:flex !important;

  gap:18px !important;

  height:300px !important;

  transform:none !important;

  transform-origin:right top !important;
}


/* =========================
每一个灰色卡片
========================= */

.render-five-material-card{

  width:140px !important;
  height:300px !important;

  background:#eeeeee !important;

  border-radius:12px !important;

  overflow:hidden !important;

  position:relative !important;

  top:0 !important;
  left:0 !important;

  transform:none !important;
}


/* =========================
卡片标题文字
========================= */

.render-five-copy{

  position:absolute !important;

  left:20px !important;
  top:20px !important;

  z-index:10 !important;
}

.render-five-copy h4{

  font-size:16px !important;

  line-height:1.05 !important;

  margin-bottom:12px !important;
}

.render-five-copy p{

  font-size:6px !important;

  line-height:1.35 !important;
}


/* =========================
第1张手机
========================= */

.render-five-card-glass img{

  position:absolute !important;

  width:300px !important;

  left:-70px !important;
  bottom:-200px !important;

  transform:
  scale(1)
  rotate(0deg) !important;
}


/* =========================
第2张手机
========================= */

.render-five-card-matte img{

  position:absolute !important;

  width:300px !important;

  left:-68px !important;
  bottom:-190px !important;

  transform:
  scale(0.9)
  rotate(0deg) !important;
}


/* =========================
第3张手机
========================= */

.render-five-card-leather img{

  position:absolute !important;

  width:330px !important;

  left:-84px !important;
  bottom:-260px !important;

  transform:
  scale(.92)
  rotate(0deg) !important;
}