/* ============================================================
   EC CASH LTD. — "Banknote & Certificate" Master Design System (Design 1)
   Rich intaglio security engravings, dark green minting plates,
   geometric guilloché watermarks, corner ornaments, and tactile depth.
   ============================================================ */

:root {
  /* Banknote Paper Tones */
  --paper: #FAF8F2;
  --paper-2: #F2EFE5;
  --paper-3: #E8E4D8;
  --ink: #11241A;
  --ink-2: #3E5246;
  --ink-3: #5F7367;
  --line: #D8D4C5;
  --line-dark: #274736;

  /* Banknote Mint Inks */
  --green: #1E6B47;
  --green-deep: #124832;
  --green-soft: #8FBF9F;
  --green-bright: #36D882;
  --gold-foil: #D4AF37;
  --gold-soft: #F3E5AB;

  /* Dark Minting Plates */
  --band: #0C2016;
  --band-2: #142F22;
  --band-card: #183829;
  --cream: #F7F5EC;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-en: "Archivo", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --shadow-press: 4px 4px 0 var(--ink);
  --shadow-press-sm: 3px 3px 0 var(--ink);
  --shadow-press-glow: 4px 4px 0 var(--green-bright);
  --header-h: 72px;

  /* SVG Guilloché & Banknote Watermark Textures */
  --guilloche-light: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231e6b47' stroke-width='0.6' stroke-opacity='0.09'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='26'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cpath d='M0,40 Q20,15 40,40 T80,40'/%3E%3Cpath d='M0,40 Q20,65 40,40 T80,40'/%3E%3Cpath d='M40,0 Q15,20 40,40 T40,80'/%3E%3Cpath d='M40,0 Q65,20 40,40 T40,80'/%3E%3C/g%3E%3C/svg%3E");
  --guilloche-dark: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2336D882' stroke-width='0.65' stroke-opacity='0.08'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='26'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cpath d='M0,40 Q20,15 40,40 T80,40'/%3E%3Cpath d='M0,40 Q20,65 40,40 T80,40'/%3E%3Cpath d='M40,0 Q15,20 40,40 T40,80'/%3E%3Cpath d='M40,0 Q65,20 40,40 T40,80'/%3E%3C/g%3E%3C/svg%3E");

  /* Victoria Harbour backdrop pool */
  --hk-photo: url("../images/hongkong_bg.jpg");
  --hk-photo-2: url("../images/hongkong_bg_02.jpg");
  --hk-photo-top: var(--hk-photo);
  --hk-photo-bottom: var(--hk-photo-2);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input { font-family: inherit; }

::selection { background: var(--green); color: var(--cream); }
section[id] { scroll-margin-top: 88px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.en-font { font-family: var(--font-mono); }
.green-strong { color: var(--green-deep); }

.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;
}

/* Hide number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .11s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .17s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .23s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .29s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; font-size: 15px; font-weight: 700; border-radius: 0;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer; text-decoration: none;
}
.btn-green {
  background: var(--green); color: var(--cream);
  border: 1px solid var(--ink); box-shadow: var(--shadow-press-sm);
}
.btn-green:hover { background: var(--green-deep); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-green:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn-ghost {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: var(--shadow-press-sm);
}
.btn-ghost:hover { background: var(--paper-2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }


/* ============================================================
   ORIGINAL KEYFRAME & MOTION DEFINITIONS
   ============================================================ */
@keyframes line-reveal {
  0% { opacity: 0; transform: translateY(36px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes badge-pop {
  0% { opacity: 0; transform: scale(.7) translateY(-8px); }
  65% { transform: scale(1.06) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cert-in {
  0% { opacity: 0; transform: translateY(48px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes stamp-slam {
  0% { opacity: 0; transform: scale(2.1) rotate(14deg); }
  60% { opacity: .95; }
  100% { opacity: .85; transform: scale(1) rotate(-7deg); }
}
.calc-pane.active .summary-stamp {
  animation: stamp-slam .45s var(--ease-spring) .2s both;
}