/* 思源宋体：只含首页标题、两个板块标题和「智周万物」用到的字（从谷歌字体按字取的子集，随网站一起上线） */
@font-face { font-family: "Title Serif"; font-weight: 300; font-display: swap; src: url(vendor/fonts/noto-serif-sc-300.woff2) format("woff2"); }
@font-face { font-family: "Title Serif"; font-weight: 400; font-display: swap; src: url(vendor/fonts/noto-serif-sc-400.woff2) format("woff2"); }
@font-face { font-family: "Title Serif"; font-weight: 700; font-display: swap; src: url(vendor/fonts/noto-serif-sc-700.woff2) format("woff2"); }

/* 正式首页：暖白色调，整屏切换 —— 电影开场 / 服务 / 传真机联系 */
:root {
  --bg: #f5f0e7;
  --bg-2: #ede6da;
  --panel: #fbf8f2;
  --text: #2d2620;
  --muted: #6e6458;
  --faint: #9d9284;
  --line: #e6ddcf;
  --line-strong: #d3c7b5;
  --accent: #b07a35;
  --radius: 20px;
  --page-ease: cubic-bezier(.76, 0, .24, 1);
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
}
body { background: var(--bg); color: var(--text); }
.grain { display: none; }

/* 导航：第一屏压在视频上用白字，其余用深色字 */
.nav-link { margin-left: auto; }
.nav-link { color: var(--muted); transition: color .6s, border-color .4s; }
.nav-link:hover { color: var(--text); border-color: var(--line-strong); }
.nav { transition: background .5s, box-shadow .5s; }
body:not([data-page="0"]) .nav { background: rgba(245, 240, 231, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
body[data-page="0"] .nav-link { color: rgba(255, 255, 255, .85); }

/* ============ 按钮（参照 ai-haoge.com） ============ */
.btn {
  --btn-bg: #fffdf9; --btn-bg-hover: #f6f0e6; --btn-fg: var(--text);
  --btn-border: #ddd2c2; --btn-border-hover: #bfb19c; --btn-ring: rgba(45, 38, 32, .22);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), background .2s, border-color .2s, box-shadow .3s;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.btn:active { transform: scale(.94); transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.primary { --btn-bg: var(--text); --btn-bg-hover: #463b32; --btn-fg: #fff; --btn-border: var(--text); --btn-border-hover: #463b32; }
/* 重点按钮：暖金渐变 + 一道扫光 */
.btn.glow {
  --btn-bg: linear-gradient(100deg, #c4893f, #e8b56d); --btn-bg-hover: linear-gradient(100deg, #cf9549, #f2c27c);
  --btn-fg: #2a1806; --btn-border: #e3ae66; --btn-border-hover: #f0c78a; --btn-ring: rgba(226, 168, 90, .6);
  font-weight: 600; box-shadow: 0 6px 24px -6px rgba(196, 137, 63, .75);
}
.btn.glow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  translate: -120%; animation: sheen 3.6s ease-in-out 1.8s infinite;
}
@keyframes sheen { 28%, 100% { translate: 340%; } }
.btn.big { height: 54px; padding: 0 30px; font-size: 17px; }
.btn .ripple {
  position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .28; pointer-events: none;
  transform: scale(0); animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { opacity: 0; transform: scale(1); } }
.btn.pulse { animation: pulse .5s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--btn-ring); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* ============ 连续滚动：三屏上下相连，用 Lenis 做惯性平滑 ============ */
html, body { height: auto; }
body { overflow-x: hidden; overflow-y: auto; }
.page { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.services { height: auto; min-height: 100vh; min-height: 100svh; }

/* 进场：内容从下方淡入上浮，依次出现（与 ai-haoge.com 同一节奏） */
/* 跟随滚动的出入场，数值由脚本按滚动位置逐帧写入 */
[data-scrub] { opacity: var(--s-o, 1); translate: 0 var(--s-y, 0); scale: var(--s-sc, 1); will-change: opacity, translate, scale; }
.svc[data-scrub] { transform-origin: 50% 100%; }

.flow .steps li, .flow-head, .flow-cta { opacity: 0; }
.flow.open .steps li, .flow.open .flow-head, .flow.open .flow-cta {
  opacity: 1; animation: rise-in .8s var(--reveal-ease) backwards; animation-delay: calc(var(--reveal-delay, 0s) + .15s);
}
@keyframes rise-in { from { opacity: 0; translate: 0 32px; scale: .97; } } /* 不能叫 reveal，会覆盖 base.css 里标题用的同名动画 */

/* 右侧页码圆点 */
.dots {
  position: fixed; right: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 14px;
}
.dots button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 4px 0; color: var(--faint); }
.dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: all .5s var(--ease); }
.dots span { font-family: var(--serif); font-size: 14px; letter-spacing: .2em; opacity: 0; transform: translateX(6px); transition: all .4s var(--ease); }
.dots button:hover span, .dots button.on span { opacity: 1; transform: none; }
.dots button.on i { background: currentColor; transform: scale(1.25); }
.dots button.on { color: var(--accent); }
body[data-page="0"] .dots button { color: rgba(255, 255, 255, .75); }
body[data-page="0"] .dots button.on { color: #fff; }

/* ============ 第一屏：电影开场 ============ */
.hero {
  --card-w: clamp(130px, 11vw, 220px);
  --gap: clamp(10px, 1vw, 18px);
  --focus: 1.5; /* 中间那张的放大倍数 */
  --cap-h: 92px;
}
.layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  filter: saturate(.88) sepia(.16) brightness(.96);
  transition: opacity 2.4s cubic-bezier(.45, 0, .2, 1);
}
.layer.on { opacity: 1; animation: drift 11s linear forwards; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12); } }
/* 顶部压一点暗给导航，底部渐变到米白，视频和页面融成一体 */
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(40, 28, 18, .38) 0%, rgba(40, 28, 18, 0) 22%),
    radial-gradient(70% 50% at 50% 36%, rgba(40, 28, 18, .26), transparent 70%),
    linear-gradient(180deg, rgba(245, 240, 231, 0) 48%, rgba(245, 240, 231, .55) 66%, rgba(245, 240, 231, .93) 80%, var(--bg) 90%);
}
.hero { animation: hero-in 1.6s var(--reveal-ease) both; }
@keyframes hero-in { from { opacity: 0; } }

.headline-wrap { position: absolute; left: 0; right: 0; top: 0; height: 64%; z-index: 6;
  display: grid; place-items: center; padding-top: 4vh; will-change: transform, opacity; }
.headline h1 { font-family: "Title Serif", var(--serif); font-weight: 300; color: #fff; font-size: clamp(38px, 6.4vw, 104px); letter-spacing: .18em; margin-right: -.18em; text-shadow: 0 2px 30px rgba(30, 20, 10, .4); }
.headline p { font-family: "Title Serif", var(--serif); font-weight: 400; color: rgba(255, 255, 255, .94); font-size: clamp(16px, 1.5vw, 22px); text-shadow: 0 1px 14px rgba(30, 20, 10, .5); }
.headline .latin { color: rgba(255, 255, 255, .75); font-size: clamp(12px, 1vw, 15px); margin-top: 14px; }
.headline h1 .br { display: none; }

/* 轮播：当前片居中放大高亮，两侧依次变小变淡 */
.rail {
  position: absolute; left: 0; right: 0; bottom: calc(var(--cap-h) + 2vh); height: var(--rail-h); z-index: 6;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; column-gap: var(--gap);
  opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--reveal-ease) 1s, transform 1.2s var(--reveal-ease) 1s;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.opened .rail { opacity: 1; transform: none; }
.card {
  position: absolute; left: 50%; bottom: 0; width: var(--card-w); aspect-ratio: 16 / 9;
  margin-left: calc(var(--card-w) / -2); transform-origin: 50% 100%;
  transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
  cursor: pointer;
}
.card .img { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; background: var(--bg-2);
  box-shadow: 0 14px 30px -12px rgba(70, 50, 30, .5); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card img.failed { visibility: hidden; }
.card.on .img { outline: 2px solid #fff; outline-offset: 3px; }
.card .bar-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; }
.card.on .bar-progress { animation: progress var(--dur) linear forwards; }
@keyframes progress { to { width: 100%; } }
.card .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .4s; background: rgba(0,0,0,.2); }
.card.on:hover .play { opacity: 1; }

/* 片名在米白区域，深色字 */
.caption {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--cap-h); z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 22px;
  opacity: 0; transition: opacity 1.2s var(--reveal-ease) 1.4s;
}
.opened .caption { opacity: 1; }
.caption b { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: .26em; color: var(--text); transition: opacity .5s; }
.watch { height: 40px; padding: 0 18px; font-size: 14px; }

@media (max-aspect-ratio: 3/4) {
  .hero { --card-w: 34vw; }
  .headline h1 { font-size: 11vw; line-height: 1.35; }
  .headline h1 .br { display: block; }
}
@media (max-width: 760px) {
  .hero { --card-w: 30vw; --focus: 1.55; --cap-h: 108px; }
  .caption { flex-direction: column; gap: 8px; }
  .caption b { font-size: 16px; }
  /* 手机上标题拆成两行，字可以更大 */
  .headline h1 { font-size: 13vw; line-height: 1.35; letter-spacing: .14em; margin-right: -.14em; }
  .headline h1 .br { display: block; }
  .dots { display: none; }
}

/* ============ 通用区块标题 ============ */
.sec-head { text-align: center; }
.eyebrow { font-family: var(--latin); font-style: italic; font-size: 16px; letter-spacing: .14em; color: var(--accent); }
.sec-head h2 {
  margin-top: 10px; font-family: "Title Serif", var(--serif); font-weight: 400; color: var(--text);
  font-size: clamp(28px, 3.2vw, 46px); letter-spacing: .2em; margin-right: -.2em;
}

/* ============ 第二屏：服务（参照 ai-haoge.com 的卡片） ============ */
.services { background: var(--bg); }
.svc-inner {
  position: relative; min-height: 100vh; min-height: 100svh;
  padding: clamp(84px, 12vh, 128px) var(--gutter) clamp(40px, 8vh, 90px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 4.5vh, 50px);
}
.svc-row {
  width: min(100%, 1320px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto;
  column-gap: clamp(12px, 1.3vw, 20px); align-items: start;
}
/* iPad 等中等宽度：两行两列 */
@media (min-width: 761px) and (max-width: 1099px) {
  .svc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .svc-col:nth-child(n + 3) .svc { margin-top: 18px; }
}
/* 每一列 = 服务卡 + 它的流程；用 subgrid 让三张卡等高 */
.svc-col { grid-row: span 2; display: grid; grid-template-rows: subgrid; transition: opacity .6s var(--reveal-ease); }
.svc-row.has-open .svc-col:not(.open) { opacity: .5; }
.svc-row.has-open .svc-col:not(.open):hover { opacity: .85; }

.svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: background .25s, border-color .4s, box-shadow .5s, transform .5s var(--reveal-ease);
}
.svc:hover { background: #fffdf9; border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(70, 50, 30, .35); }
.svc-col.open .svc { border-color: rgba(176, 122, 53, .55); box-shadow: 0 0 0 1px rgba(176, 122, 53, .18), 0 26px 50px -28px rgba(120, 80, 30, .55); transform: translateY(-4px); }

/* 卡片顶部：真实案例画面，缓慢推镜 */
.svc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e9e0d2; }
.svc-media img, .svc-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.18) saturate(.88) contrast(1.02); transform: scale(1.04);
  transition: transform 6s cubic-bezier(.2, .6, .2, 1), filter .8s;
}
.svc:hover .svc-media img, .svc:hover .svc-media video, .svc-col.open .svc-media img, .svc-col.open .svc-media video { transform: scale(1.14); filter: sepia(.08) saturate(1) contrast(1.04); }
.svc-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent, var(--panel)); }

.svc-body { flex: 1; display: flex; flex-direction: column; padding: 4px 22px 22px; }
.svc h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 27px); letter-spacing: .12em; white-space: nowrap; }
.svc-body > p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--muted); text-align: justify; }
.svc-actions { margin-top: auto; padding-top: 20px; }
.flow-toggle::after {
  content: ""; width: 7px; height: 7px; margin-left: 10px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .5s var(--reveal-ease), margin .5s;
}
.svc-col.open .flow-toggle::after { transform: rotate(-135deg); margin-top: 4px; }

/* ---------- 流程：在卡片正下方一张张"折叠展开" ---------- */
.flow { display: none; }
.svc-col.show .flow { display: block; }
.flow-in { position: relative; padding: 0 2px; }
.steps { list-style: none; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; perspective: 1100px; }
.steps li {
  position: relative; display: flex; gap: 16px; align-items: flex-start; overflow: hidden;
  padding: 18px 20px 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  transform-origin: 50% 0; opacity: 0; will-change: transform, opacity;
  transform: rotateX(-88deg) translateY(-24px) scale(.96);
  transition: transform .4s cubic-bezier(.5, 0, .75, 0), opacity .3s;
  transition-delay: calc((3 - var(--i)) * .05s);
}
.svc-col.open .steps li {
  opacity: 1; transform: none;
  transition: transform 1s cubic-bezier(.16, 1.32, .3, 1), opacity .5s;
  transition-delay: calc(var(--i) * .16s + .25s);
}
/* 落定后一道金色光扫过 */
.steps li::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(232, 181, 109, .38) 50%, transparent 65%);
  transform: translateX(-110%);
}
.svc-col.open .steps li::after { animation: step-sheen 1.1s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--i) * .16s + .85s); }
@keyframes step-sheen { to { transform: translateX(110%); } }

.step-no {
  position: relative; z-index: 1; flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--latin); font-size: 14px; letter-spacing: .04em; color: var(--accent); background: #fffaf1;
  box-shadow: inset 0 0 0 1px rgba(176, 122, 53, .45); transform: scale(0) rotate(-120deg);
  transition: transform .3s; transition-delay: 0s;
}
.svc-col.open .step-no { transform: none; transition: transform .8s cubic-bezier(.3, 1.8, .4, 1); transition-delay: calc(var(--i) * .16s + .7s); }
.steps h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: .12em; line-height: 38px; }
.steps p { margin-top: 2px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }

/* 一根金线从卡片里"拉"下来，串起四个步骤 */
.flow-thread {
  position: absolute; left: 39px; top: 0; height: calc(100% - 92px); width: 1.5px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #e8b56d, #b07a35 70%, rgba(176, 122, 53, 0));
  transform-origin: top; transform: scaleY(0); transition: transform .3s;
}
.svc-col.open .flow-thread { transform: scaleY(1); transition: transform 1.3s cubic-bezier(.65, 0, .25, 1) .2s; }
.flow-cta { padding: 18px 0 6px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.svc-col.open .flow-cta { opacity: 1; transform: none; transition: opacity .6s 1.05s, transform .8s var(--reveal-ease) 1.05s; }

.m-br { display: none; }
.swipe-hint { display: none; text-align: center; font-size: 13px; letter-spacing: .2em; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .steps li, .svc-col.open .steps li { transform: none; transition: opacity .3s; }
  .svc-col.open .steps li::after { animation: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .svc-body { padding: 2px 22px 20px; }
  .svc-media { aspect-ratio: 16 / 8; }
}
/* 手机：卡片横向滑动，流程在各自卡片下方展开 */
@media (max-width: 760px) {
  .svc-inner { padding: 82px 0 28px; gap: 18px; justify-content: flex-start; }
  .svc-row { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--gutter) 22px; gap: 14px; width: 100%; }
  .svc-row::-webkit-scrollbar { display: none; }
  .svc-col { display: block; flex: 0 0 84vw; scroll-snap-align: center; }
  .svc-row.has-open .svc-col:not(.open) { opacity: .6; }
  .svc:hover { transform: none; }
  .svc-body { padding: 2px 20px 20px; }
  .svc-body > p { font-size: 14.5px; }
  .steps li { padding: 14px 16px 14px 14px; gap: 12px; }
  .flow-thread { left: 33px; }
  .step-no { flex-basis: 36px; height: 36px; }
  .steps h4 { font-size: 17px; line-height: 36px; }
  .steps p { font-size: 14px; }
  .swipe-hint { display: block; }
  .m-br { display: inline; }
}

/* ============ 第三屏：传真机 ============ */
.contact { background: radial-gradient(70% 60% at 50% 62%, #fbf7f0 0%, var(--bg) 55%, #e8dfd1 100%); }
.fax-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.contact-head { position: absolute; left: 0; right: 0; top: clamp(78px, 12vh, 120px); z-index: 5; pointer-events: none;
  transition: opacity .8s var(--reveal-ease), transform .8s var(--reveal-ease); }
.contact.printing .contact-head, .contact.printed .contact-head { opacity: 0; transform: translateY(-20px); }
.tap-hint {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 16px; letter-spacing: .2em; color: var(--muted);
}
.tap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(176,122,53,.5); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 12px rgba(176,122,53,0); } 100% { box-shadow: 0 0 0 0 rgba(176,122,53,0); } }

/* 传真纸上的内容：网页文字贴在 3D 纸面上，所以任何屏幕都清晰；纸色和光影来自 3D 纸本身 */
.css3d-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.paper-sheet {
  position: relative; width: 440px; height: 500px; padding: 0 40px 24px; text-align: center; color: #231d18;
  display: flex; flex-direction: column; justify-content: center;
  -webkit-font-smoothing: antialiased; backface-visibility: hidden;
}
.contact > .paper-sheet { position: absolute; visibility: hidden; } /* 3D 接管前先藏起来 */
.ps-brand { font-family: "Title Serif", var(--serif); font-weight: 700; font-size: 44px; letter-spacing: .26em; margin-right: -.26em; }
.ps-sub { margin-top: 14px; font-family: var(--serif); font-size: 18px; letter-spacing: .18em; color: #5f554a; }
.ps-rule { display: block; width: 44px; height: 2px; margin: 34px auto 30px; background: var(--accent); }
.ps-label { font-size: 15px; letter-spacing: .22em; color: #5f554a; }
.ps-phone { margin-top: 8px; font-family: "Times New Roman", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-size: 40px; font-weight: 600; letter-spacing: .03em; line-height: 1.2; }
.ps-label + .ps-phone { margin-top: 12px; }

.contact-fallback { display: none; position: absolute; inset: 0; z-index: 4; place-content: center; text-align: center; gap: 10px; }
.no-webgl .contact-fallback { display: grid; }
.no-webgl .tap-hint { display: none; }
.cf-company { font-family: var(--serif); font-size: 20px; letter-spacing: .14em; }
.cf-phone { font-family: var(--latin); font-size: 44px; color: var(--text); text-decoration: none; }
.cf-note { color: var(--muted); letter-spacing: .2em; }

.foot { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--faint); }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 20px);
  padding: 12px 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 15px; letter-spacing: .1em;
  opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .contact-head h2 { font-size: 26px; }
  .btn.big { height: 50px; font-size: 16px; padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-scrub] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .btn.glow::before, .btn .ripple { animation: none; display: none; }
}