/* ============================================================================
   AUTOS DESIGN — V2 homepage redesign (preview layer)
   NON-LINEAR · 3D · SCROLL-DRIVEN, in the emerald brand.
   · hero: WebGL fluid + outline/gradient display type + 3D orbs + paper sheets
   · rotated service ticker stitching the seam
   · 01 services: pinned section — vertical scroll slides a horizontal rail,
     a paper plane rides along the top
   · 02 works: staggered rotated sample collage with scroll parallax (--p)
   · 03 process: a CSS-3D TRI-FOLD BROCHURE that folds open as you scroll,
     beside compact infographic step cards
   · 04 quote CTA + stats band + final CTA
   Scroll progress arrives as --p (0..1) on [data-s3d] / .v2-proc via v2.js.
   All motion is gated behind html.motion (reduced-motion safe).
   ========================================================================== */

.v2 { background: #F5F8FC; }

/* horizontal-overflow guard (rotated ticker / rail) that keeps both
   vertical scrolling AND position:sticky working: clip x, auto y.
   (clip alone on the root pairs with `visible` and disables scrolling.) */
html { overflow-x: clip; overflow-y: auto; }
body.v2 { overflow-x: clip; }

/* ---- shared v2 type ---- */
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand-darker, #1E3357);
  margin-bottom: 14px;
}
.v2-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--brand, #15497F); }

.v2-h2 {
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink, #141A26); margin: 0 0 18px;
}
.v2-h2 em { font-style: normal; color: var(--brand, #15497F); display: inline-block; }
.v2-sub { font-size: 17px; line-height: 1.7; color: var(--ink-soft, #55606E); max-width: 580px; margin: 0; }

/* ---- v2 buttons ---- */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 700; font-size: 16px;
  padding: 16px 28px; border-radius: 999px; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background .2s ease;
}
.v2-btn--solid { background: var(--brand, #15497F); color: #fff; box-shadow: 0 14px 34px -12px rgba(38,60,102,.6); }
.v2-btn--mint { background: #FF8A93; color: #001226; box-shadow: 0 14px 34px -12px rgba(0,0,0,.4); }
.v2-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.v2-btn:hover { transform: translateY(-3px) scale(1.02); }

/* ============================ HERO ====================================== */
.v2-hero {
  position: relative; overflow: hidden;
  min-height: 96vh; display: flex; align-items: center;
  background: #001226; color: #fff;
  padding: 110px 0 160px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
}
.v2-hero .fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-hero.fluid-fallback { background: radial-gradient(1100px 700px at 70% 20%, #1E3357 0%, #001226 60%); }
.v2-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 10%, transparent 55%, rgba(4,9,18,.55) 100%),
    repeating-conic-gradient(rgba(255,255,255,.014) 0% .25%, transparent .25% .5%);
}
.v2-hero__inner { position: relative; z-index: 3; max-width: 900px; }
.v2-hero__kicker {
  font-family: "Space Grotesk", monospace; font-size: 13px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: #F4A0A6; margin: 0 0 22px;
}
.v2-hero__title { margin: 0 0 26px; font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 900; letter-spacing: -.03em; }
.v2-hero__line { display: block; line-height: 1.02; }
.v2-hero__line--outline {
  font-size: clamp(50px, 9.6vw, 128px);
  color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,.92);
  transform: translateX(calc(var(--p, 0) * -30px));
}
.v2-hero__line--grad {
  font-size: clamp(38px, 7vw, 92px);
  background: linear-gradient(92deg, #FF8A93 0%, #E63946 55%, #FFC24B 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateX(calc(var(--p, 0) * 26px));
}
.v2-hero__lead { font-size: 18.5px; line-height: 1.7; color: rgba(255,255,255,.88); max-width: 620px; margin: 0 0 10px; }
.v2-hero__lead b { color: #FF8A93; }
.v2-hero__fine { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 0 0 28px; }
.v2-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.v2-hero__chips { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-chip {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 600; font-size: 13.5px; color: #fff;
  backdrop-filter: blur(6px);
  transform: rotate(var(--r, 0deg));
}

/* 3D orbs — gradient spheres, emerald family + amber/mint pops */
.v2-orb {
  position: absolute; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 4%, #FF8A93 22%, #15497F 62%, #152844 100%);
  box-shadow: inset -14px -20px 36px rgba(4,9,18,.5), 0 36px 70px -24px rgba(4,9,18,.7);
}
.v2-orb::after {
  content: ""; position: absolute; left: 18%; top: 12%;
  width: 32%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,.5); filter: blur(3px); transform: rotate(-24deg);
}
.v2-orb--a { width: 150px; height: 150px; right: 11%; top: 16%; }
.v2-orb--b { width: 84px; height: 84px; right: 30%; bottom: 22%; background: radial-gradient(circle at 32% 28%, #fff 0 4%, #FFE2A6 24%, #FFC24B 60%, #B07A14 100%); }
.v2-orb--c { width: 56px; height: 56px; right: 5%; bottom: 36%; background: radial-gradient(circle at 32% 28%, #fff 0 5%, #FBDCDE 24%, #FF8A93 62%, #B22D38 100%); }
.v2-orb--d { width: 38px; height: 38px; left: 6%; bottom: 18%; opacity: .85; }
html.motion .v2-orb--a { animation: v2float 7s ease-in-out infinite; }
html.motion .v2-orb--b { animation: v2float 5.6s ease-in-out -2s infinite; }
html.motion .v2-orb--c { animation: v2float 6.4s ease-in-out -1.2s infinite; }
html.motion .v2-orb--d { animation: v2float 8s ease-in-out -3s infinite; }
@keyframes v2float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* floating "paper sheets" — design-brand 3D accents */
.v2-sheet {
  position: absolute; z-index: 2; pointer-events: none;
  width: 120px; height: 156px; border-radius: 10px;
  background: linear-gradient(160deg, #ffffff 0%, #DFF6EC 100%);
  box-shadow: 0 30px 50px -20px rgba(4,9,18,.6);
  transform: rotate(var(--r, -10deg));
}
.v2-sheet::before {
  content: ""; position: absolute; left: 14px; top: 18px; right: 14px; height: 8px;
  border-radius: 4px; background: #15497F; opacity: .8;
}
.v2-sheet::after {
  content: ""; position: absolute; left: 14px; top: 38px; width: 60%; height: 40px;
  background: repeating-linear-gradient(180deg, #BFE9D6 0 5px, transparent 5px 13px);
}
.v2-sheet--1 { right: 19%; bottom: 14%; --r: -12deg; }
.v2-sheet--2 { right: 7%; top: 42%; width: 88px; height: 116px; --r: 9deg; opacity: .9; }
html.motion .v2-sheet--1 { animation: v2float 6.6s ease-in-out -1s infinite; }
html.motion .v2-sheet--2 { animation: v2float 7.8s ease-in-out -3.4s infinite; }

/* floating deck of real sample cards — fans out with hero scroll progress */
.v2-deck { position: absolute; z-index: 2; right: 7%; top: 22%; width: 230px; height: 300px; pointer-events: none; }
.v2-deck__card {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 14px; border: 5px solid #fff;
  box-shadow: 0 34px 60px -22px rgba(4,9,18,.65);
  transform-origin: 50% 115%;
}
.v2-deck__card--1 { transform: rotate(calc(-9deg - var(--p, 0) * 7deg)) translateX(calc(var(--p, 0) * -26px)); }
.v2-deck__card--2 { transform: rotate(calc(1deg + var(--p, 0) * 1deg)) translateY(calc(var(--p, 0) * -10px)); }
.v2-deck__card--3 { transform: rotate(calc(10deg + var(--p, 0) * 8deg)) translateX(calc(var(--p, 0) * 26px)); }
html.motion .v2-deck { animation: v2float 8s ease-in-out -2s infinite; }

/* service-card tiles can show a real sample thumb instead of an emoji */
.v2-scard__tile--img { overflow: hidden; padding: 0; background: #EAF1F9; }
.v2-scard__tile--img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.v2-scard:hover .v2-scard__tile--img img { transform: scale(1.12); }

/* pointer tilt (set by v2.js as --rx/--ry) on showcase cards */
.v2-show__collage { perspective: 1100px; }

.v2-hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: "Space Grotesk", monospace; font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.75);
}
.v2-hero__scroll i { width: 1.5px; height: 38px; background: linear-gradient(180deg, #fff, transparent); display: block; }
html.motion .v2-hero__scroll i { animation: v2drop 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes v2drop { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ============================ TICKER ==================================== */
.v2-ticker {
  position: relative; z-index: 5;
  background: var(--brand, #15497F); color: #fff;
  transform: rotate(-1.4deg) scaleX(1.04);
  margin: -54px 0 0; padding: 15px 0;
  overflow: hidden; white-space: nowrap;
  box-shadow: 0 22px 44px -18px rgba(11,110,78,.5);
}
.v2-ticker__track { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; }
.v2-ticker__track span { font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
html.motion .v2-ticker__track { animation: v2tick 26s linear infinite; }
@keyframes v2tick { to { transform: translateX(-50%); } }

/* ============================ 01 · SERVICES RAIL ======================== */
.v2-rail { position: relative; background: #F5F8FC; }
.v2-rail__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
}
.v2-rail__ghost {
  position: absolute; right: -2%; top: 4%;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900; font-size: 30vw; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(38,60,102,.10);
  pointer-events: none; user-select: none;
}
.v2-rail__head { position: relative; z-index: 2; }
.v2-rail__hint { font-family: "Space Grotesk", monospace; font-size: 12.5px; letter-spacing: .12em; color: var(--ink-soft, #55606E); margin: 6px 0 0; }
.v2-rail__planeline { position: relative; height: 56px; z-index: 2; }
.v2-rail__plane { position: absolute; left: 8vw; top: 6px; will-change: transform; filter: drop-shadow(0 10px 16px rgba(38,60,102,.4)); }
.v2-rail__plane svg { display: block; }

.v2-rail__track { display: flex; gap: 26px; padding: 0 8vw; will-change: transform; align-items: stretch; }
.v2-scard {
  flex: 0 0 280px; background: #fff; border: 1px solid #DAE4F0;
  border-radius: 24px; padding: 26px 24px; text-decoration: none; color: inherit;
  box-shadow: 0 18px 40px -22px rgba(38,60,102,.3);
  transform: rotate(var(--mt, 0deg));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.v2-scard:nth-child(odd) { --mt: -1.6deg; margin-top: 34px; }
.v2-scard:nth-child(even) { --mt: 1.3deg; margin-bottom: 34px; }
.v2-scard:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 0 30px 60px -24px rgba(38,60,102,.45); }
.v2-scard__tile {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; font-size: 30px;
  background: var(--g, linear-gradient(150deg, #1A5288, #1E3357));
  box-shadow: inset 0 -8px 16px rgba(5,12,24,.25), 0 12px 22px -10px rgba(38,60,102,.55);
}
.v2-scard h3 { font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 700; font-size: 19px; margin: 2px 0 0; color: var(--ink, #141A26); }
.v2-scard p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #55606E); margin: 0; flex: 1; }
.v2-scard b { font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 700; font-size: 14px; color: var(--brand-darker, #1E3357); }
.v2-scard--cta {
  justify-content: center;
  background: linear-gradient(150deg, #15497F, #1E3357); color: #fff; border: 0;
}
.v2-scard--cta .v2-scard__big { font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 900; font-size: 36px; line-height: 1.08; letter-spacing: -.02em; }
.v2-scard--cta p { color: rgba(255,255,255,.85); flex: 0; }

html:not(.motion) .v2-rail__sticky { position: static; height: auto; padding: 70px 0; }
html:not(.motion) .v2-rail__track { overflow-x: auto; }
html:not(.motion) .v2-rail__plane { display: none; }

/* ============================ 02 · WORKS COLLAGE ======================== */
.v2-show { position: relative; padding: 120px 0 110px; background: #fff; overflow: hidden; }
.v2-show__head { max-width: 660px; margin-bottom: 56px; }
.v2-show__collage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; align-items: start; }
.v2-pcard {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden;
  background: #F5F8FC; border: 6px solid #fff;
  box-shadow: 0 24px 50px -22px rgba(18,24,38,.35);
  transform: rotate(var(--pr, 0deg)) translateY(var(--py, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  will-change: transform;
}
.v2-pcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-pcard figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 700; font-size: 13px; color: #fff;
  background: rgba(8,18,35,.78); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}
.v2-pcard--1 { grid-column: 1 / span 2; aspect-ratio: 4/3; --pr: -3deg; --py: calc(var(--p, 0) * -26px); }
.v2-pcard--2 { grid-column: 3 / span 2; aspect-ratio: 4/3; --pr: 2deg; --py: calc(40px + var(--p, 0) * 26px); }
.v2-pcard--3 { grid-column: 5 / span 2; aspect-ratio: 4/3; --pr: -1.6deg; --py: calc(var(--p, 0) * -38px); }
.v2-pcard--4 { grid-column: 1 / span 2; aspect-ratio: 4/3; --pr: 1.8deg; --py: calc(var(--p, 0) * 20px); }
.v2-pcard--5 { grid-column: 3 / span 2; aspect-ratio: 4/3; --pr: -2.4deg; --py: calc(26px + var(--p, 0) * -20px); }
.v2-pcard--6 { grid-column: 5 / span 2; aspect-ratio: 4/3; --pr: 1.4deg; --py: calc(12px + var(--p, 0) * 18px); }
.v2-pcard:hover { transform: rotate(0deg) translateY(calc(var(--py, 0px) - 8px)) scale(1.03); box-shadow: 0 36px 70px -26px rgba(18,24,38,.5); z-index: 3; }
.v2-show__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 54px; }
.v2-show__note { font-size: 14px; color: var(--ink-soft, #55606E); }

/* ============================ WORK STRIP MARQUEE ======================== */
/* Two full-bleed rows of real work photos drifting in opposite directions —
   pure showcase, pauses on hover. */
.v2-strip { padding: 26px 0; background: #001226; overflow: hidden; }
.v2-strip__row { overflow: hidden; white-space: nowrap; padding: 8px 0; }
.v2-strip__track { display: inline-flex; gap: 16px; padding-right: 16px; will-change: transform; }
.v2-strip__track img {
  width: 240px; height: 160px; object-fit: cover; flex: none;
  border-radius: 12px; border: 3px solid rgba(255,255,255,.12);
  transition: transform .25s ease, border-color .25s ease;
}
.v2-strip__track img:hover { transform: scale(1.05); border-color: #FF8A93; }
html.motion .v2-strip__row .v2-strip__track { animation: v2tick 38s linear infinite; }
html.motion .v2-strip__row--rev .v2-strip__track { animation: v2tickrev 42s linear infinite; }
.v2-strip__row:hover .v2-strip__track { animation-play-state: paused; }
@keyframes v2tickrev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ============================ 03 · PROCESS TRI-FOLD ===================== */
/* A CSS-3D tri-fold brochure that FOLDS OPEN as you scroll the steps —
   side panels rotate out around their hinges, driven by --open (from --p). */
.v2-proc { position: relative; background: #F8FAFD; padding: 110px 0 90px; }
.v2-proc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 420px at 14% 24%, rgba(38,60,102,.09), transparent 65%),
    radial-gradient(rgba(38,60,102,.05) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
}
.v2-proc__head { position: relative; z-index: 1; margin-bottom: 36px; }
.v2-proc__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: start; }
.v2-proc__stage {
  position: sticky; top: 18vh;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 30px 0;
  perspective: 1100px;
}
.v2-proc__stagecap {
  font-family: "Space Grotesk", monospace; font-size: 12.5px; letter-spacing: .12em;
  color: var(--ink-soft, #55606E); margin: 0;
}

.v2-fold {
  position: relative; width: 150px; height: 220px;
  --open: min(1, max(0, calc((var(--p, 0) - 0.38) * 2.2)));
  transform-style: preserve-3d;
  transform: rotateX(calc(8deg - var(--open) * 8deg)) rotateY(calc(-6deg + var(--open) * 6deg));
}
.v2-fold__panel {
  position: absolute; top: 0; width: 150px; height: 220px;
  border-radius: 8px;
  background: linear-gradient(165deg, #ffffff 0%, #EAF1F9 100%);
  border: 1px solid #D5E0EE;
  box-shadow: 0 24px 44px -20px rgba(8,18,35,.35);
  backface-visibility: visible;
}
.v2-fold__panel--c { left: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.v2-fold__panel--c .v2-fold__logo { width: 44px; height: 44px; }
.v2-fold__panel--c b {
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900; font-size: 15px; letter-spacing: .04em; color: #1E3357;
}
.v2-fold__panel--c span { font-size: 10.5px; letter-spacing: .22em; color: #55606E; }
/* side panels hinge from the centre panel's edges */
.v2-fold__panel--l {
  left: 0; z-index: 2; transform-origin: left center;
  transform: rotateY(calc(-178deg + var(--open) * 148deg));
  background: linear-gradient(165deg, #15497F 0%, #1E3357 100%); border: 0;
}
.v2-fold__panel--r {
  left: 0; z-index: 2; transform-origin: right center;
  transform: translateX(0) rotateY(calc(178deg - var(--open) * 148deg));
  background: linear-gradient(195deg, #1A5288 0%, #1E3357 100%); border: 0;
}
.v2-fold__panel--l::after, .v2-fold__panel--r::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 22px; height: 120px;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 6px, transparent 6px 16px);
  opacity: calc(var(--open));
}
.v2-fold__stamp {
  position: absolute; right: -26px; top: -18px; z-index: 4;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: #FFC24B; color: #4A3000;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900; font-size: 13px; letter-spacing: .02em;
  box-shadow: 0 14px 26px -10px rgba(176,122,20,.6);
  opacity: var(--open); transform: scale(calc(.5 + var(--open) * .5)) rotate(12deg);
}

/* steps — compact infographic cards with gradient icon tiles */
.v2-proc__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.v2-step {
  position: relative; display: flex; gap: 20px; align-items: flex-start;
  padding: 24px 24px 22px; border-radius: 22px;
  background: #fff; border: 1px solid #DAE4F0;
  box-shadow: 0 16px 36px -24px rgba(38,60,102,.3);
}
.v2-step__tile {
  flex: none; width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; font-size: 30px;
  background: var(--g, linear-gradient(150deg, #1A5288, #1E3357));
  box-shadow: inset 0 -8px 16px rgba(5,12,24,.25), 0 12px 22px -10px rgba(38,60,102,.5);
}
.v2-step__body { min-width: 0; }
.v2-step b {
  position: absolute; right: 18px; top: 12px;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900; font-size: 52px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(38,60,102,.22);
}
.v2-step h3 { font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif); font-weight: 700; font-size: 20px; margin: 4px 0 8px; color: var(--ink, #141A26); }
.v2-step p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft, #55606E); margin: 0; max-width: 470px; }

html:not(.motion) .v2-proc__stage { position: static; }
html:not(.motion) .v2-fold { --open: 1; }

/* ============================ 04 · QUOTE CTA ============================ */
.v2-quote { position: relative; padding: 120px 0 110px; background: #F5F8FC; overflow: hidden; text-align: center; }
.v2-orb--q1 { width: 120px; height: 120px; right: 6%; top: 60px; opacity: .9; }
.v2-orb--q2 { width: 70px; height: 70px; left: 4%; bottom: 80px; background: radial-gradient(circle at 32% 28%, #fff 0 5%, #FFE2A6 24%, #FFC24B 62%, #B07A14 100%); }
.v2-quote__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.v2-quote__chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 26px 0 0; }
.v2-quote__chips span {
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 600; font-size: 13px; color: var(--brand-darker, #1E3357);
  background: var(--brand-tint, #E8F0F8); border: 1px solid var(--brand-tint-2, #C8DAEC);
  padding: 7px 14px; border-radius: 999px;
}

/* ============================ STATS BAND ================================ */
.v2-stats { padding: 90px 0; background: #fff; }
.v2-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.v2-stat b {
  display: block;
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900; font-size: clamp(38px, 5.6vw, 64px); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 2px var(--brand, #15497F);
  margin-bottom: 10px;
}
.v2-stat span { font-size: 14.5px; color: var(--ink-soft, #55606E); }

/* ============================ FINAL CTA ================================= */
.v2-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0A2440 0%, #001226 55%), #001226;
  color: #fff; padding: 130px 0 110px;
  clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
}
.v2-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 420px at 22% 30%, rgba(38,60,102,.45), transparent 65%);
}
.v2-cta__inner { position: relative; text-align: center; }
.v2-cta h2 {
  font-family: var(--font-display, "Space Grotesk", "Noto Sans TC", sans-serif);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 84px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 30px;
}
.v2-cta__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.v2-cta__meta { font-family: "Space Grotesk", monospace; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.65); margin: 0; }

/* ============================ REVEALS =================================== */
html.motion [data-v2r] {
  opacity: 0; transform: translateY(34px) skewY(1.5deg);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
html.motion [data-v2r].in { opacity: 1; transform: none; }

/* ============================ RESPONSIVE ================================ */
@media (max-width: 980px) {
  .v2-proc__grid { grid-template-columns: 1fr; gap: 30px; }
  .v2-proc__stage { position: relative; top: 0; padding: 10px 0; }
  .v2-show__collage { grid-template-columns: repeat(2, 1fr); }
  .v2-pcard--1, .v2-pcard--4 { grid-column: 1; }
  .v2-pcard--2, .v2-pcard--5 { grid-column: 2; }
  .v2-pcard--3 { grid-column: 1; }
  .v2-pcard--6 { grid-column: 2; }
  .v2-stats__row { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
}
@media (max-width: 980px) {
  .v2-deck { width: 170px; height: 224px; right: 4%; top: 12%; opacity: .9; }
}
@media (max-width: 620px) {
  .v2-hero { padding: 80px 0 140px; min-height: 88vh; }
  /* text-stroke ghosts/doubles wrapped CJK glyphs on some renderers — on
     small screens drop the outline treatment for solid white (also more
     legible) and open the leading so wrapped rows breathe */
  .v2-hero__line--outline { -webkit-text-stroke: 0; color: #fff; line-height: 1.12; }
  .v2-hero__line--grad { line-height: 1.12; }
  .v2-deck { display: none; }
  .v2-strip__track img { width: 170px; height: 116px; }
  .v2-orb--a { width: 96px; height: 96px; right: 6%; top: 12%; }
  .v2-sheet--1 { width: 84px; height: 110px; right: 8%; bottom: 10%; }
  .v2-sheet--2 { display: none; }
  .v2-hero__scroll { bottom: 76px; }
  .v2-scard { flex-basis: 235px; }
  .v2-rail__track { padding: 0 5vw; gap: 16px; }
  .v2-step { padding: 22px 20px; }
  .v2-step b { font-size: 44px; }
  .v2-show { padding: 80px 0 70px; }
  .v2-proc { padding: 90px 0 70px; }
  .v2-fold { width: 120px; height: 178px; }
  .v2-fold__panel { width: 120px; height: 178px; }
  .v2-cta h2 { font-size: clamp(32px, 9.6vw, 50px); }
}