/* =====================================================================
   来霖科技 官网 · 设计系统 v3
   视觉灵感：Spatial Festival — 白底极简 / 黑文字 / 无装饰 / 锐利排版
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --white:#fff;
  --black:#000;
  --gray-90:rgba(0,0,0,.9);
  --gray-60:rgba(0,0,0,.6);
  --gray-30:rgba(0,0,0,.3);
  --gray-15:rgba(0,0,0,.15);
  --gray-08:rgba(0,0,0,.08);
  --gray-04:rgba(0,0,0,.04);

  --site-px:clamp(20px, 5vw, 80px);
  --grid-cols:12;
  --grid-gap:20px;

  --h1:clamp(2.8rem, 9.9vw, 10rem);
  --h2:clamp(2rem, 5.6vw, 5rem);
  --h3:clamp(1.5rem, 3.13vw, 3.2rem);
  --body1:clamp(1rem, 2.08vw, 1.6rem);
  --body2:clamp(.9rem, 1.1vw, 1.12rem);
  --mono:clamp(.7rem, .89vw, .89rem);
  --btn-size:clamp(.9rem, 1.56vw, 1.3rem);

  --ease-out:cubic-bezier(.4,0,.1,1);
  --ease-inout:cubic-bezier(.8,0,.2,1);

  --sans:"NeueHaasGroteskDisplayPro55Roman", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
  --mono-font:"DM Mono", "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;background:var(--white)}
html::-webkit-scrollbar{display:none}
body{
  font-family:var(--sans);
  font-weight:450;
  background:var(--white);
  color:var(--black);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal}
::selection{background:var(--black);color:var(--white)}
img{max-width:100%;display:block}

/* ---------- 工具类 ---------- */
.mono{font-family:var(--mono-font);font-size:var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gray-60)}
.o-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);column-gap:var(--grid-gap);padding-inline:var(--site-px)}
.body1{font-size:var(--body1);line-height:1.45}
.section-label{display:block;color:var(--gray-60);margin-bottom:1.2em;font-family:var(--mono-font);font-size:var(--mono);letter-spacing:.07em;text-transform:uppercase}

/* =====================================================================
   预加载（Spatial Loader 风格：堆叠 Logo）
   ===================================================================== */
.preloader{
  position:fixed;inset:0;z-index:9500;background:var(--white);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease-out), visibility .8s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.no-js .preloader{display:none}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:1.2em}
.preloader__mark{font-family:var(--sans);font-size:clamp(2.5rem,8vw,5rem);font-weight:500;letter-spacing:-.02em;color:var(--black)}
.preloader__sub{font-family:var(--mono-font);font-size:var(--mono);color:var(--gray-30);letter-spacing:.3em}
.preloader__bar{width:120px;height:2px;background:var(--gray-08);border-radius:2px;overflow:hidden}
.preloader__fill{display:block;height:100%;width:0;background:var(--black);transition:width .15s linear}

/* =====================================================================
   导航（Spatial Header 风格：简洁顶栏 + 下划线链接）
   ===================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,26px) var(--site-px);
  transition:transform .5s var(--ease-out);
}
.site-header.is-hidden{transform:translateY(-110%)}
.site-header__logo{font-family:var(--sans);font-size:1.25rem;letter-spacing:-.01em;font-weight:500}
.site-header__nav ul{display:flex;gap:clamp(18px,2.4vw,40px)}
.site-header__nav a{
  display:inline-block;
  font-size:var(--mono);font-family:var(--mono-font);letter-spacing:.07em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.065em;
  text-decoration-color:transparent;
  transition:text-decoration-color .12s var(--ease-out), transform .3s var(--ease-out);
}
.site-header__nav a:hover{text-decoration-color:currentColor;transform:rotate(var(--rz,-3deg))}
.site-header__menu{display:none}

/* =====================================================================
   按钮（Spatial 风格：透明底 + 下划线文字）
   ===================================================================== */
.btn{
  display:inline-block;
  font-size:var(--btn-size);font-weight:450;
  text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.065em;
  text-decoration-color:transparent;letter-spacing:.04em;
  transition:text-decoration-color .1s var(--ease-out);
  cursor:pointer;background:none;border:none;padding:0;color:inherit;
}
.btn:hover{text-decoration-color:currentColor}
.btn__label{position:relative}
.btn--primary{text-decoration-color:currentColor}

/* =====================================================================
   区块 1：3D 隧道 Hero（滚动驱动投影隧道 · Spatial c-tunnel 结构）
   ===================================================================== */
.c-tunnel{position:relative;z-index:1;background:var(--white)}
.c-tunnel--dark{background:var(--black);color:var(--white)}
.c-tunnel__scroller{position:relative}
.c-tunnel__canvas-wrapper{height:100svh;left:0;position:sticky;top:0;width:100%;z-index:0;overflow:hidden}
.c-tunnel__canvas{height:100%!important;left:0;position:absolute;top:0;width:100%!important;display:block}
.c-tunnel__spacer{height:100lvh}

/* Hero 覆盖文字（钉在隧道画布上，随滚动淡出） */
.c-tunnel__overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;align-items:flex-end;
  padding:0 var(--site-px) 12vh;
  transition:opacity .4s var(--ease-out);
}
.c-tunnel__overlay .btn,.c-tunnel__overlay a{pointer-events:auto}
.tunnel-hero__content{max-width:880px;position:relative;z-index:2}
.tunnel-hero__eyebrow{margin-bottom:1.4em}
.tunnel-hero__title{font-size:clamp(2rem,5vw,4.8rem);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin-bottom:.6em}
.tunnel-hero__sub{color:var(--gray-60);font-size:var(--body1);max-width:48ch;margin-bottom:2em}
.tunnel-hero__actions{display:flex;flex-wrap:wrap;gap:2em}
.tunnel-hero__scroll{
  position:absolute;bottom:5vh;right:var(--site-px);z-index:3;
  display:flex;align-items:center;gap:12px;
}
.tunnel-hero__scroll-line{width:48px;height:1px;background:var(--gray-15);position:relative;overflow:hidden}
.tunnel-hero__scroll-line::after{
  content:"";position:absolute;inset:0;background:var(--black);
  transform:translateX(-100%);animation:scrollline 2.2s var(--ease-inout) infinite;
}
@keyframes scrollline{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* =====================================================================
   区块 2：深度视差
   ===================================================================== */
.depth-section{
  position:relative;z-index:2;background:var(--white);
  display:grid;grid-template-columns:1fr 1fr;min-height:100svh;align-items:center;
  padding:clamp(4rem,10vh,10rem) var(--site-px);gap:clamp(2rem,5vw,6rem);
}
.depth-section__visual{display:flex;justify-content:center;align-items:center;perspective:1200px}
.depth-phone-wrap{position:relative;width:100%;max-width:420px}
.depth-phone{width:100%;height:auto;display:block;will-change:transform;transition:transform .2s var(--ease-out)}
.depth-section__content h2{font-size:var(--h2);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin:.6em 0}
.depth-section__content p{color:var(--gray-60);max-width:36ch}

/* =====================================================================
   区块 3：产品列表（Spatial Program 风格 — 黑底区块）
   ===================================================================== */
.products-list{position:relative;z-index:2;background:var(--black);color:var(--white);padding-block:clamp(5rem,12vh,11rem)}
.products-list .section-head{grid-column:1 / -1;margin-bottom:clamp(3rem,7vh,5rem)}
.products-list .section-head__idx{display:block;color:rgba(255,255,255,.5);margin-bottom:1em}
.products-list .section-head__title{font-size:var(--h2);font-weight:500;line-height:1.02;letter-spacing:-.02em}

.products-list__stage{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1200px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.products-list__preview{
  position:absolute;width:min(32vw,360px);aspect-ratio:4/5;object-fit:cover;
  opacity:0;visibility:hidden;filter:brightness(.62);mix-blend-mode:screen;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--dx,0),var(--dy,0));
  transition:opacity .45s var(--ease-out),visibility .45s;will-change:transform;
}
.products-list__preview.is-visible{opacity:1;visibility:visible}
.products-list__items{position:relative;z-index:2;padding-inline:var(--site-px)}
.products-list__item{
  display:grid;grid-template-columns:80px 1fr 1fr auto 1.4em;align-items:center;gap:var(--grid-gap);
  padding:clamp(2rem,4vh,3.5rem) 0;border-top:1px solid rgba(255,255,255,.18);
  text-decoration:none;color:var(--white);
  transition:padding-left .45s var(--ease-out);
}
.products-list__item:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.products-list__item:hover{padding-left:1.2em}
.products-list__num{color:rgba(255,255,255,.5);transition:color .3s var(--ease-out)}
.products-list__item:hover .products-list__num{color:#fff}
.products-list__name{font-size:var(--h3);font-weight:500;line-height:1.05}
.products-list__desc{color:rgba(255,255,255,.5);font-size:var(--body2)}
.products-list__tag{
  font-family:var(--mono-font);font-size:var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;
}
.products-list__arrow{
  justify-self:end;font-size:1.5em;line-height:1;color:#fff;
  opacity:0;transform:translate(-8px,8px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.products-list__item:hover .products-list__arrow{opacity:1;transform:none}

/* =====================================================================
   大字宣言
   ===================================================================== */
.statement{position:relative;z-index:2;background:var(--white);padding-block:clamp(7rem,18vh,16rem)}
.statement__label{grid-column:1 / -1;margin-bottom:2.4em}
.statement__text{
  grid-column:1 / -1;max-width:20ch;
  font-size:clamp(2.1rem,6.4vw,7rem);font-weight:500;line-height:1.02;letter-spacing:-.03em;
}
.statement em{font-style:normal;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em}

/* =====================================================================
   区块 4：产品详情
   ===================================================================== */
.product-detail{
  position:relative;z-index:2;background:var(--white);
  padding-block:clamp(5rem,12vh,11rem);
  border-top:1px solid var(--gray-08);
}
.product-detail--alt{background:var(--gray-04)}
.product-detail__head{grid-column:1 / -1;margin-bottom:clamp(2rem,5vh,4rem)}
.product-detail__head h2{font-size:var(--h2);font-weight:500;line-height:1.05;letter-spacing:-.02em;margin-top:.4em}
.product-detail__features{
  grid-column:1 / 9;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem);
}
.product-detail__feature{
  padding:clamp(1.2rem,2vw,2rem);
  border:1px solid var(--gray-08);
  transition:border-color .3s;
}
.product-detail__feature:hover{border-color:var(--black)}
.product-detail__feature .mono{color:var(--black);display:block;margin-bottom:.8em}
.product-detail__feature p{color:var(--gray-60);font-size:var(--body2);line-height:1.5}
.product-detail__cta{grid-column:10 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em}

/* QR */
.qr{
  width:min(60vw,200px);aspect-ratio:1;padding:18px;
  background:var(--white);border:1px solid var(--gray-08);position:relative;display:grid;place-items:center;
}
.qr__placeholder{
  width:80%;height:80%;
  background:repeating-conic-gradient(var(--black) 0% 25%, transparent 0% 50%) 0 0/14px 14px;
  opacity:.3;
}
.qr__label{position:relative;z-index:2;background:var(--white);padding:.4em .7em;color:var(--black);font-weight:500;margin-top:.6em}

/* =====================================================================
   关于
   ===================================================================== */
.about{position:relative;z-index:2;background:var(--white);padding-block:clamp(6rem,14vh,14rem)}
.about .section-head__idx{grid-column:1 / -1;margin-bottom:1em}
.about__title{grid-column:1 / -1;font-size:var(--h2);font-weight:500;line-height:1.05;margin:.6em 0 .8em;letter-spacing:-.02em}
.about__p{grid-column:1 / 9;color:var(--gray-60)}

/* =====================================================================
   覆盖科目（鼠标跟随倾斜卡片）
   ===================================================================== */
.subjects{position:relative;z-index:2;background:var(--white);padding-block:clamp(4rem,9vh,8rem) clamp(6rem,14vh,12rem);overflow:hidden}
.subjects .section-head{grid-column:1 / -1;margin-bottom:clamp(2rem,5vh,4rem)}
.subjects .section-head__idx{display:block;color:var(--gray-60);margin-bottom:1em}
.subjects .section-head__title{font-size:var(--h2);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.subjects__inner{position:relative;padding-inline:var(--site-px)}
.subjects__items{position:relative;z-index:2;max-width:620px}
.subjects__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  padding:clamp(.7rem,1.6vh,1.2rem) 0;border-top:1px solid var(--gray-15);
  cursor:pointer;transition:opacity .3s var(--ease-out);
}
.subjects__items li:last-child .subjects__item{border-bottom:1px solid var(--gray-15)}
.subjects__inner:hover .subjects__item:not(:hover){opacity:.3}
.subjects__name{font-size:clamp(1.4rem,3vw,2.6rem);font-weight:500;line-height:1;transition:transform .35s var(--ease-out)}
.subjects__item:hover .subjects__name{transform:translateX(.4em)}
.subjects__meta{color:var(--gray-30);white-space:nowrap}

.subjects__stage{
  position:absolute;top:50%;right:5%;width:min(34vw,420px);height:min(44vw,520px);
  transform:translateY(-50%);transform-style:preserve-3d;perspective:1100px;
  pointer-events:none;z-index:1;
}
.subjects__card{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.6em;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  background:var(--black);color:var(--white);
  opacity:0;visibility:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--dx,0),var(--dy,0));
  transition:opacity .45s var(--ease-out),visibility .45s;
  will-change:transform;
}
.subjects__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.subjects__card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,rgba(0,0,0,.2))}
.subjects__card.is-visible{opacity:1;visibility:visible}
.subjects__card-num{position:relative;z-index:2;color:rgba(255,255,255,.7)}
.subjects__card-name{position:relative;z-index:2;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:500;line-height:1.06;margin-top:auto}
.subjects__card-en{position:relative;z-index:2;color:rgba(255,255,255,.6)}

/* =====================================================================
   常见问题（折叠展开）
   ===================================================================== */
.faq{position:relative;z-index:2;background:var(--white);padding-block:clamp(4rem,10vh,9rem);border-top:1px solid var(--gray-08)}
.faq .section-head{grid-column:1 / -1;margin-bottom:clamp(2rem,5vh,4rem)}
.faq .section-head__idx{display:block;color:var(--gray-60);margin-bottom:1em}
.faq .section-head__title{font-size:var(--h2);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.faq__list{padding-inline:var(--site-px)}
.faq__item{border-top:1px solid var(--gray-15)}
.faq__item:last-child{border-bottom:1px solid var(--gray-15)}
.faq__row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:2em;
  padding:clamp(1.2rem,3vh,2rem) 0;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font-family:inherit;
}
.faq__q{font-size:clamp(1.1rem,2.4vw,1.9rem);font-weight:500;line-height:1.2}
.faq__icon{position:relative;width:18px;height:18px;flex:none}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--black);transition:transform .35s var(--ease-out)}
.faq__icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq__icon::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.faq__item.is-open .faq__icon::after{transform:translateX(-50%) scaleY(0)}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-inout)}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel-inner{overflow:hidden}
.faq__panel-inner p{padding-bottom:clamp(1.2rem,3vh,2rem);max-width:62ch;color:var(--gray-60);font-size:var(--body2);line-height:1.65}
.faq__panel-inner a{text-decoration:underline;text-underline-offset:.15em}

/* =====================================================================
   科目详情层（点击 → 3D 翻入）
   ===================================================================== */
main{transition:transform .6s var(--ease-out),opacity .6s var(--ease-out),filter .6s var(--ease-out)}
body.detail-open{overflow:hidden}
body.detail-open main{transform:scale(.94) translateY(24px);opacity:.35;filter:blur(3px);pointer-events:none}
.detail{
  position:fixed;inset:0;z-index:9000;background:var(--white);
  opacity:0;visibility:hidden;overflow-y:auto;
  transform-origin:50% 0;
  transform:perspective(1600px) rotateX(14deg) translateY(48px);
  transition:opacity .55s var(--ease-out),transform .65s var(--ease-out),visibility .65s;
}
.detail.is-open{opacity:1;visibility:visible;transform:perspective(1600px) rotateX(0) translateY(0)}
.detail__close{
  position:fixed;top:clamp(16px,2vw,28px);right:var(--site-px);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--gray-15);background:var(--white);cursor:pointer;
}
.detail__close::before,.detail__close::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:1.5px;background:var(--black)}
.detail__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.detail__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.detail__inner{
  max-width:780px;margin:0 auto;padding:clamp(5rem,13vh,9rem) var(--site-px) clamp(4rem,8vh,6rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1em;
}
.detail__cat{color:var(--gray-30)}
.detail__title{font-size:clamp(2.4rem,6vw,5rem);font-weight:500;letter-spacing:-.02em;line-height:1.02}
.detail__en{color:var(--gray-30)}
.detail__media{width:min(62vw,340px);aspect-ratio:4/5;overflow:hidden;margin:1.4em 0}
.detail__media img{width:100%;height:100%;object-fit:cover}
.detail__desc{max-width:46ch;color:var(--gray-60);font-size:var(--body1);line-height:1.6}
.detail__topics{display:flex;flex-wrap:wrap;gap:.6em;justify-content:center;margin:1.4em 0 2em}
.detail__topics li{border:1px solid var(--gray-15);border-radius:100px;padding:.5em 1.1em;font-size:var(--body2);color:var(--gray-60)}

/* =====================================================================
   Footer（Spatial 风格 — 白底 grid）
   ===================================================================== */
.site-footer{position:relative;z-index:2;background:var(--white);padding-block:clamp(4rem,9vh,8rem) 2.4rem;border-top:1px solid var(--gray-08)}
.site-footer .o-grid{row-gap:clamp(3rem,6vh,5rem)}
.site-footer__brand{grid-column:1 / 7;display:flex;flex-direction:column;align-items:flex-start;gap:1.6em}
.site-footer__brand h2{font-size:var(--h2);font-weight:500;line-height:1;letter-spacing:-.02em}
.site-footer__cols{grid-column:8 / -1;display:flex;gap:clamp(2rem,5vw,4rem);flex-wrap:wrap}
.site-footer__cols>div{display:flex;flex-direction:column;gap:.7em}
.site-footer__cols .mono{margin-bottom:.4em}
.site-footer__cols a{color:var(--gray-60);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.15em;text-decoration-thickness:.065em;transition:text-decoration-color .1s}
.site-footer__cols a:hover{text-decoration-color:currentColor}
.site-footer__base{
  grid-column:1 / -1;display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--gray-08);
  font-size:.85rem;color:var(--gray-30);
}
.site-footer__base a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.15em;text-decoration-thickness:.065em;transition:text-decoration-color .1s}
.site-footer__base a:hover{text-decoration-color:currentColor}

/* =====================================================================
   Reveal 动画
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
[data-split] .line,[data-split] .word{display:inline-block;overflow:hidden}
[data-split] .word>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
[data-split].is-in .word>span{transform:none}
[data-split] .word{margin-right:.04em}

/* =====================================================================
   隐藏的旧元素
   ===================================================================== */
.grain,.vignette{display:none}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:900px){
  :root{--grid-cols:6}
  .site-header__menu{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:42px;height:42px;border:1px solid var(--gray-15);border-radius:50%;
    background:transparent;cursor:pointer;align-items:center;
  }
  .site-header__menu span{display:block;width:16px;height:1.5px;background:var(--black);transition:transform .3s var(--ease-out),opacity .3s}
  body.nav-open .site-header__menu span:first-child{transform:translateY(3.75px) rotate(45deg)}
  body.nav-open .site-header__menu span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .site-header__nav{
    position:fixed;inset:0;z-index:-1;display:flex!important;align-items:center;justify-content:center;
    background:var(--white);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility .4s;
  }
  body.nav-open .site-header__nav{opacity:1;visibility:visible;z-index:1}
  .site-header__nav ul{flex-direction:column;align-items:center;gap:1.4em}
  .site-header__nav a{font-size:2rem;font-family:var(--sans);opacity:1;text-transform:none;letter-spacing:-.01em}

  .depth-section{grid-template-columns:1fr;text-align:center}
  .depth-section__content h2{margin-top:1em}
  .depth-section__content p{margin-inline:auto}

  .products-list__item{grid-template-columns:60px 1fr;gap:1em}
  .products-list__desc,.products-list__tag,.products-list__arrow{display:none}

  .product-detail__features{grid-column:1 / -1;grid-template-columns:1fr}
  .product-detail__cta{grid-column:1 / -1;margin-top:2rem}

  .about__p,.site-footer__brand,.site-footer__cols{grid-column:1 / -1}

  .subjects__stage{display:none}
  .subjects__items{max-width:100%}
  .subjects__inner:hover .subjects__item:not(:hover){opacity:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}