/* ==========================================================================
   302COM 指南 · /assets/site.css
   共享外壳（侧边轨道头部 / 错层页脚）、排版、按钮、网格、玻璃与纸面板、
   展览标签、图版容器、状态指示、滚动进度与显现
   ========================================================================== */

/* 1 · reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}

/* 2 · tokens --------------------------------------------------------------- */
:root{
  --ink-950:#05070D;
  --ink-800:#0E1729;
  --ink-600:#1C2C45;
  --paper-100:#F4EEE2;
  --paper-300:#CFC3AC;
  --cyan-400:#2FE3D0;
  --orange-500:#FF8A3D;
  --magenta-500:#D9396F;
  --gray-400:#8B99AE;
  --lime-400:#A8E063;
  --cold-100:#E9EEF7;
  --soft-300:#B7C3D6;

  --glass:rgba(233,238,247,.06);
  --glass-strong:rgba(233,238,247,.10);
  --hair:rgba(233,238,247,.14);
  --hair-cyan:rgba(47,227,208,.45);

  --rail-w:88px;
  --pad:clamp(16px,4vw,40px);
  --maxw:1180px;
  --radius:14px;
  --radius-sm:9px;

  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --dur:180ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* 3 · base ----------------------------------------------------------------- */
body{
  min-height:100vh;
  background-color:var(--ink-950);
  color:var(--cold-100);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(233,238,247,.07) 1px, transparent 1.3px),
    radial-gradient(120% 70% at 78% -12%, rgba(47,227,208,.10), transparent 62%),
    radial-gradient(90% 60% at 10% 108%, rgba(255,138,61,.08), transparent 60%);
  background-size:24px 24px, auto, auto;
}
h1,h2,h3,h4,h5{font-weight:900;letter-spacing:-.02em;line-height:1.15;color:var(--cold-100)}
h1{font-size:clamp(28px,4vw,56px)}
h2{font-size:clamp(22px,2.7vw,34px)}
h3{font-size:clamp(18px,1.6vw,22px)}
h4{font-size:clamp(16px,1.3vw,18px)}
p{max-width:68ch}
strong{font-weight:900}
a{transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
a:hover{color:var(--cyan-400)}

/* 4 · 布局与排版工具 -------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(40px,6vw,84px)}
.section--tight{padding-block:clamp(24px,3.4vw,48px)}
.section--edge{border-top:1px solid var(--hair)}
.section__head{display:flex;flex-direction:column;gap:12px;max-width:780px;margin-bottom:clamp(20px,3vw,36px)}
.section__next{display:flex;justify-content:flex-end;margin-top:clamp(18px,2.4vw,30px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor}
.lede{font-size:clamp(16px,1.4vw,18.5px);line-height:1.7;color:var(--soft-300)}
.stack{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--gray-400)}
.mono{font-family:var(--font-mono);font-size:.88em;letter-spacing:.04em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:14px;top:-80px;z-index:90;padding:10px 16px;border-radius:0 0 10px 10px;background:var(--cyan-400);color:var(--ink-950);font-weight:900;font-size:14px;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:0;color:var(--ink-950)}

/* 5 · 头部：移动顶栏（默认） ------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:60;width:100%;background:rgba(5,7,13,.94);border-bottom:1px solid var(--hair)}
.rail{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 14px}

.brand{display:inline-flex;align-items:center;gap:6px;color:var(--cold-100);flex:0 0 auto}
.brand__mark{font-family:var(--font-mono);font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--cyan-400)}
.brand__suffix{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--paper-300)}
.brand__cn{font-size:14px;font-weight:900;letter-spacing:.08em}
.brand:hover .brand__mark{color:var(--orange-500)}

.navtoggle{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--hair);border-radius:999px;color:var(--cold-100);transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.navtoggle:hover{border-color:var(--hair-cyan);background:var(--glass)}
.navtoggle__bars{position:relative;display:inline-block;width:18px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.navtoggle__text{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--gray-400)}
.site-header[data-open] .navtoggle__bars{box-shadow:none;transform:rotate(45deg)}
.site-header[data-open] .navtoggle__bars::after{content:"";position:absolute;inset:0;background:currentColor;border-radius:2px;transform:rotate(-90deg)}
.site-header[data-open] .navtoggle{border-color:var(--hair-cyan);color:var(--cyan-400)}

.rail__nav{position:fixed;top:57px;left:0;right:0;max-height:calc(100vh - 57px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 14px 20px;background:var(--ink-800);border-bottom:1px solid var(--hair);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease)}
.site-header[data-open] .rail__nav{opacity:1;visibility:visible;transform:none}

.navlist{display:flex;flex-direction:column;gap:4px}
.navlist__item{display:block}
.navlink{position:relative;display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--gray-400);font-weight:700;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.navlink__idx{font-size:11px;letter-spacing:.08em;color:var(--gray-400);transition:color var(--dur) var(--ease)}
.navlink__label{font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.navlink:hover{color:var(--cold-100);background:var(--glass);border-color:var(--hair);transform:translateX(2px)}
.navlink:hover .navlink__idx{color:var(--cyan-400)}
.navlink[aria-current="page"]{color:var(--cold-100);background:var(--glass-strong);border-color:var(--hair-cyan)}
.navlink[aria-current="page"] .navlink__idx{color:var(--cyan-400)}
.navlink[aria-current="page"]::before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:2px;background:var(--cyan-400)}

.rail__foot{display:flex;flex-direction:column;gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--hair)}
.railstatus{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-400)}
.railstatus__text{font-size:13px;letter-spacing:.04em}
.railver{font-size:12px;color:var(--gray-400);letter-spacing:.04em}
.railcta{display:flex;flex-wrap:wrap;gap:8px}
.railcta .btn{flex:1 1 130px}

/* 6 · 页脚 ------------------------------------------------------------------ */
.site-footer{background:linear-gradient(180deg,var(--ink-950) 0%,var(--ink-800) 100%);border-top:1px solid var(--hair);padding:clamp(32px,5vw,64px) var(--pad) 24px}
.footwrap{width:100%;max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,44px)}
.footbrand{display:flex;flex-direction:column;gap:10px}
.brand--footer{flex-direction:row;align-items:baseline;gap:8px}
.foottag{font-size:14px;color:var(--soft-300);max-width:34ch}
.footnote{font-size:12px;color:var(--gray-400)}
.footnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.footcol{display:flex;flex-direction:column;gap:12px}
.footcol__title{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)}
.footlist{display:flex;flex-direction:column;gap:9px}
.footlist__item{font-size:14.5px;line-height:1.6;color:var(--soft-300)}
.footlink{display:inline-block;font-size:14.5px;color:var(--soft-300);border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.footlink:hover{color:var(--cyan-400);border-bottom-color:var(--hair-cyan)}
.footcontact{background:var(--paper-100);color:var(--ink-950);border-radius:var(--radius);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.footcontact .footcol__title{color:#0B6E66}
.footlist--contact .footlist__item{color:#3B4356;font-size:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.footlabel{font-size:11px;letter-spacing:.16em;color:#8A7F6B;text-transform:uppercase;min-width:44px}
.footbottom{width:100%;max-width:var(--maxw);margin:clamp(26px,4vw,52px) auto 0;padding-top:16px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.footline{font-size:13.5px;color:var(--paper-300);max-width:none}
.footlegal{font-size:12.5px;color:var(--gray-400);max-width:none}
.footlegal .mono{color:var(--soft-300)}

/* 7 · 按钮 ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-align:center;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange-500);color:var(--ink-950);border-color:var(--orange-500)}
.btn--primary:hover{background:#FFA366;color:var(--ink-950)}
.btn--ghost{background:var(--glass);color:var(--cold-100);border-color:var(--hair)}
.btn--ghost:hover{background:var(--glass-strong);border-color:var(--hair-cyan);color:var(--cyan-400)}
.btn--cyan{background:transparent;color:var(--cyan-400);border-color:var(--hair-cyan)}
.btn--cyan:hover{background:rgba(47,227,208,.12);color:var(--cyan-400)}
.btn--sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn--block{width:100%}

/* 8 · 网格 ------------------------------------------------------------------ */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--12{grid-template-columns:1fr}
.grid--offset{margin-block:0}

/* 9 · 玻璃层 / 纸面板 / 卡片 / 标签 / 状态点 --------------------------------- */
.glass{background:var(--glass);border:1px solid var(--hair);border-radius:var(--radius)}
.glass--strong{background:var(--glass-strong)}
.paper{background:var(--paper-100);color:var(--ink-950);border-radius:var(--radius);padding:clamp(20px,3vw,36px);box-shadow:0 18px 40px rgba(0,0,0,.26)}
.paper h1,.paper h2,.paper h3,.paper h4{color:var(--ink-950)}
.paper p{color:#2A3142}
.paper .mono{color:#5A6478}
.paper a{color:#0B6E66;text-decoration:underline;text-underline-offset:3px}
.paper a:hover{color:#0A5A54}
.paper--pull{width:min(100%,70%)}

.card{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,2.2vw,26px);background:var(--glass);border:1px solid var(--hair);border-radius:var(--radius);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{background:var(--glass-strong);border-color:var(--hair-cyan);transform:translateY(-2px)}
.card__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.card__title{font-size:clamp(17px,1.5vw,20px);font-weight:900;letter-spacing:-.01em}
.card__meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--gray-400)}
.card__body{font-size:15px;line-height:1.7;color:var(--soft-300)}
.card__action{margin-top:auto;padding-top:12px;display:flex;justify-content:flex-end}

.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--hair);border-radius:999px;background:rgba(233,238,247,.04);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400)}
.tag--cyan{color:var(--cyan-400);border-color:var(--hair-cyan)}
.tag--orange{color:var(--orange-500);border-color:rgba(255,138,61,.42)}
.tag--magenta{color:var(--magenta-500);border-color:rgba(217,57,111,.45)}
.tag--lime{color:var(--lime-400);border-color:rgba(168,224,99,.42)}

.dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gray-400);box-shadow:0 0 0 3px rgba(139,153,174,.14)}
.dot--cyan{background:var(--cyan-400);box-shadow:0 0 0 3px rgba(47,227,208,.16)}
.dot--orange{background:var(--orange-500);box-shadow:0 0 0 3px rgba(255,138,61,.16)}
.dot--magenta{background:var(--magenta-500);box-shadow:0 0 0 3px rgba(217,57,111,.18)}
.dot--lime{background:var(--lime-400);box-shadow:0 0 0 3px rgba(168,224,99,.16)}

/* 10 · 横向卡片轨道 --------------------------------------------------------- */
.track{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 20px;margin-inline:-4px;scrollbar-color:var(--ink-600) transparent}
.track::-webkit-scrollbar{height:6px}
.track::-webkit-scrollbar-track{background:transparent}
.track::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:3px}
.track__item{flex:0 0 min(84%,340px);scroll-snap-align:start}

/* 11 · 图版容器（页面阶段放置截图 / 线稿 / SVG） ----------------------------- */
.figure{display:block;margin:0}
.figure__frame{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hair);border-radius:var(--radius);background:linear-gradient(150deg,var(--ink-600) 0%,var(--ink-950) 72%)}
.figure__frame img,.figure__frame svg,.figure__frame picture{width:100%;height:100%;object-fit:cover}
.figure__ph{padding:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--gray-400)}
.figure__cap{margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--gray-400)}
.figure--wide .figure__frame{aspect-ratio:21/9}
.figure--tall .figure__frame{aspect-ratio:4/5}
.figure--tilt .figure__frame{transform:rotate(-2.2deg)}
.figure--flat .figure__frame{background:var(--paper-100)}
.figure--flat .figure__ph{color:#5A6478}
.figure--blueprint .figure__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(47,227,208,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(47,227,208,.09) 1px,transparent 1px);background-size:32px 32px}

/* 12 · 面包屑 / 规格表 / 步骤 / 进度条 -------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--gray-400)}
.crumb{color:var(--gray-400)}
.crumb:hover{color:var(--cyan-400)}
.crumb--current{color:var(--cold-100)}
.crumbs__sep{color:var(--ink-600)}

.spec{display:grid;border-top:1px solid var(--hair)}
.spec__row{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--hair)}
.spec__key{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400)}
.spec__val{font-size:16px;color:var(--cold-100)}

.steps{display:flex;flex-direction:column;gap:14px}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.step__idx{padding:3px 8px;border:1px solid var(--hair-cyan);border-radius:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--cyan-400)}

.meter{height:6px;border-radius:999px;background:var(--ink-600);overflow:hidden}
.meter__fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan-400),var(--orange-500));transition:width 400ms var(--ease)}

/* 13 · 滚动进度 / 回顶 / 显现 ----------------------------------------------- */
.scrollprogress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;background:transparent}
.scrollprogress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan-400),var(--orange-500))}
.totop{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:var(--ink-600);color:var(--cold-100);font-family:var(--font-mono);font-size:14px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),visibility var(--dur) var(--ease)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--hair-cyan);color:var(--cyan-400);transform:translateY(-2px)}
.js-on [data-reveal]{opacity:0;transform:translateY(8px)}
.js-on [data-reveal].is-in{opacity:1;transform:none;transition:opacity 420ms var(--ease),transform 420ms var(--ease)}

/* 14 · 响应式 --------------------------------------------------------------- */
@media (min-width:720px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec__row{grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline}
  .footwrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footbrand{grid-column:1 / -1}
}
@media (min-width:980px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .grid--offset > *:nth-child(even){margin-top:clamp(16px,3vw,48px)}
  .track__item{flex-basis:calc((100% - 44px) / 3)}
}
@media (min-width:1024px){
  body{padding-left:var(--rail-w)}
  .skip-link{left:calc(var(--rail-w) + 16px)}
  .scrollprogress{left:var(--rail-w)}

  .site-header{position:fixed;inset:0 auto 0 0;width:var(--rail-w);border-bottom:0;background:none}
  .rail{flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;height:100%;min-height:0;padding:16px 0 18px;background:linear-gradient(180deg,var(--ink-800) 0%,var(--ink-950) 46%);border-right:1px solid var(--hair)}
  .brand{flex-direction:column;gap:3px;padding:6px 0;text-align:center}
  .brand__mark{font-size:19px}
  .brand__suffix{font-size:10px}
  .brand__cn{font-size:13px;letter-spacing:.16em}
  .navtoggle{display:none}

  .rail__nav{position:static;inset:auto;display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-height:0;max-height:none;gap:0;padding:0;background:none;border:0;opacity:1;visibility:visible;transform:none;overflow:visible}
  .navlist{flex:1 1 auto;min-height:0;overflow-y:auto;align-items:center;gap:6px;padding:6px 0}
  .navlist::-webkit-scrollbar{width:4px}
  .navlist::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:2px}
  .navlink{flex-direction:column;gap:8px;width:64px;padding:9px 0;border-radius:12px}
  .navlink__label{writing-mode:vertical-rl;text-orientation:upright;font-size:13px;letter-spacing:.12em}
  .navlink:hover{transform:translateY(-2px)}
  .navlink[aria-current="page"]::before{left:4px;width:3px;height:20px;border-radius:2px}

  .rail__foot{flex:0 0 auto;align-items:center;width:100%;margin-top:auto;padding:12px 8px 0;gap:9px}
  .railstatus{flex-direction:column;gap:6px;text-align:center;font-size:11px}
  .railstatus__text{font-size:11px;letter-spacing:.1em}
  .railver{font-size:10px;line-height:1.5;text-align:center;padding:0 4px;word-break:break-word;letter-spacing:.02em}
  .railcta{flex-direction:row;justify-content:center;width:100%;gap:6px}
  .railcta .btn{flex:0 0 auto;writing-mode:vertical-rl;text-orientation:upright;padding:12px 6px;font-size:12px;letter-spacing:.14em;border-radius:10px}
  .railcta .btn:hover{transform:translateY(-2px)}

  .footwrap{grid-template-columns:minmax(200px,1.1fr) minmax(300px,1.6fr) minmax(250px,1.15fr)}
  .footbrand{grid-column:auto}
}
@media (min-width:1280px){
  :root{--pad:48px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js-on [data-reveal]{opacity:1;transform:none}
  .btn:hover,.card:hover,.navlink:hover,.totop:hover{transform:none}
}