/* GNTS interaction refinement. React Bits techniques adapted to vanilla CSS/JS.
   CI: navy #06174A, Oscar Gold #BC9750, Prompt. */
.brand { padding:0; transform:translateY(-11px); }
.brand img { object-position:center; }
.hero .title-line {
  display:block;
  width:fit-content;
  color:#e2c17b;
  background:linear-gradient(110deg,#c29b50 8%,#e2c17b 33%,#fff0c9 45%,#bc9750 58%,#e2c17b 80%);
  background-size:240% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gn-title-sheen 9s ease-in-out infinite;
  animation-play-state:paused;
}
.hero.hero-in-view:not(.hero-is-paused) .title-line { animation-play-state:running; }
.hero .title-line:nth-child(2) { animation-delay:.65s; }
@keyframes gn-title-sheen { 0%,20% {background-position:100% 50%} 65%,100% {background-position:0 50%} }
.hero-slide.portrait { background:#071744; }
.hero-slide.portrait img {
  position:absolute; top:0; width:76%; right:0; left:auto; object-position:43% 46%;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 12%,#000 29%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 12%,#000 29%);
}
.hero-slide.people img { object-position:50% 22%; }
.hero-slide.detail img { object-position:center 40%; }
.hero-shade {
  background:linear-gradient(90deg,rgba(4,16,56,.96) 0%,rgba(4,16,56,.8) 24%,rgba(4,16,56,.35) 53%,rgba(4,16,56,.12) 80%),linear-gradient(0deg,rgba(4,16,56,.9),transparent 30%);
}
.hero-actions .button { min-width:195px; padding:14px 23px; gap:20px; position:relative; isolation:isolate; }
.hero-actions .button.outline { min-width:218px; }
.hero-actions .button .copy-base,.hero-actions .button .copy-hover { white-space:nowrap; line-height:1.5; }
.hero-actions .button .copy-hover { left:23px; right:50px; top:50%; transform:translateY(25%); }
.hero-actions .button .arrow { margin-left:auto; position:relative; transition:transform .35s var(--ease); }
.hero-actions .button { transition:background .35s,color .35s,border-radius .35s,box-shadow .35s,transform .35s; }
.hero-actions .button:focus-visible { background:#e7ca8c; color:var(--navy); border-radius:13px; }
.hero-dots { flex-wrap:wrap; justify-content:center; gap:8px; max-width:290px; }
.hero-dots button { position:relative; width:22px; height:28px; padding:0; border-radius:0; background:none!important; }
.hero-dots button::before { content:""; position:absolute; width:5px; height:5px; background:#cad0df; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); transition:width .3s,background .3s; }
.hero-dots button.active::before { width:17px; background:var(--gold); border-radius:5px; }
.hero-dots button:focus-visible { outline-offset:0; border-radius:5px; }
.quick-inner { padding-block:26px; gap:32px; }
.quick-intro { min-width:260px; }
.quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex:1; max-width:650px; }
.quick-route { display:flex; align-items:center; padding:16px 20px; gap:14px; border:1px solid #d7c9aa; background:white; min-width:0; transition:background .35s,border-radius .35s,box-shadow .35s,transform .35s; }
.quick-route svg { width:28px; height:28px; flex-shrink:0; color:#866020; }
.quick-route strong { font-weight:500; font-size:15px; display:block; }
.quick-route small { font-size:12px; color:var(--muted); display:block; }
.quick-route .route-arrow { margin-left:auto; color:#866020; transition:transform .35s; font-size:21px; }
.quick-route:focus-visible { background:#f4eddd; border-radius:12px; }
/* Compact titles keep the same space for every card without a 74px empty title block. */
.home-page .amulet-card { border-radius:4px; transition:opacity .6s var(--ease),transform .4s var(--ease),border-radius .45s var(--ease),box-shadow .35s; transition-delay:0ms; isolation:isolate; }
.amulet-card .card-image { aspect-ratio:1/1.05; }
.amulet-card .card-meta { min-height:0; padding:14px 13px 12px; gap:0; }
.amulet-card .card-meta h3 { min-height:0; height:calc(1.6em * 2); font-size:14px; line-height:1.6; -webkit-line-clamp:2; }
.amulet-card .card-category { font-size:12px; margin-bottom:7px; }
.amulet-card .card-footer { margin-top:12px; padding-top:8px; min-height:32px; }
.amulet-card::before,.amulet-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; border-radius:inherit; }
.amulet-card::before { z-index:3; background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,25%),rgba(235,201,133,.13),transparent 70%); }
.amulet-card::after { z-index:4; padding:1px; background:radial-gradient(210px circle at var(--spot-x,50%) var(--spot-y,25%),#fff0cc,rgba(188,151,80,.7) 40%,transparent 78%); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; }
.amulet-card:focus-visible { border-radius:16px; box-shadow:0 0 0 2px var(--gold),0 10px 35px rgba(0,0,0,.2); }
.amulet-card:focus-visible::before,.amulet-card:focus-visible::after { opacity:1; }
@media (hover:hover) and (pointer:fine) {
  .hero-actions .button:hover { background:#e7ca8c; color:var(--navy); border-color:#e7ca8c; border-radius:13px; box-shadow:0 7px 28px rgba(188,151,80,.22); transform:translateY(-2px); }
  .hero-actions .button:hover .copy-hover { transform:translateY(-50%); }
  .hero-actions .button:hover .arrow { transform:translateX(5px); }
  .quick-route:hover { background:#f6efdf; border-radius:14px; box-shadow:0 7px 20px rgba(6,23,74,.06); transform:translateY(-2px); }
  .quick-route:hover .route-arrow { transform:translateX(4px); }
  .home-page .amulet-card:hover { border-radius:18px; transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 22px rgba(188,151,80,.08); }
  .amulet-card:hover::before,.amulet-card:hover::after { opacity:1; }
}
/* Dedicated verification workspace: forms first, specimen alongside. */
.verify-page { background:#f8f7f3; color:var(--navy); padding-bottom:0; }
.verify-main { padding-block:36px 68px; }
.verify-heading { margin-bottom:28px; position:relative; }
.back-home { position:absolute; right:0; top:0; display:inline-block; margin-bottom:0; font-size:14px; color:var(--muted); }
.verify-heading .eyebrow { color:var(--gold-ink); margin-bottom:12px; }
.verify-heading h1 { font-size:clamp(30px,3.1vw,44px); line-height:1.4; }
.verify-heading h1 span { margin-left:.25em; color:var(--gold-ink); }
.verify-heading>p:last-of-type { font-size:16px; color:var(--muted); margin-top:12px; }
.verify-path { list-style:none; padding:0; display:flex; gap:32px; margin:24px 0 0; font-size:13px; color:var(--muted); }
.verify-path li { display:flex; align-items:center; gap:9px; }
.verify-path span { border:1px solid #d1c3a5; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--gold-ink); font-size:11px; }
.verify-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:36px; align-items:start; }
.verify-page .verify-controls { padding:0; background:transparent; border:0; }
.verify-page .verify-controls-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:15px; }
.verify-page .verify-controls-grid>div { padding:22px 26px; border:1px solid #dfdfd7; border-radius:14px; background:white; scroll-margin-top:calc(var(--header) + 20px); }
.verify-page .verify-controls-grid>div+div { border-left:1px solid #dfdfd7; }
.verify-page .step-eyebrow { margin-bottom:8px; font-size:12px; }
.verify-page .verify-controls h3 { font-size:20px; margin-bottom:8px; }
.verify-page .verify-controls label { margin-top:14px; font-size:14px; }
.verify-page .verify-controls input { border-radius:7px; font-size:16px; }
.verify-page .verify-controls .button { border-radius:7px; font-size:14px; min-height:48px; transition:background .25s,box-shadow .25s; }
.verify-page .button.navy:hover { background:#153071; box-shadow:0 4px 15px rgba(6,23,74,.15); }
.verify-page .scan-actions { margin-top:16px; }
.verify-page .scan-actions .button { gap:9px; }
.verify-page .scan-actions svg { width:19px; height:19px; flex-shrink:0; }
.verify-page .form-message { margin-top:10px; }
.verify-page #record-message:empty { display:none; }
.verify-page .demo-note { padding:10px 12px; border-radius:6px; background:#f6f4ee; font-size:12px; margin-top:12px; }
.verify-page #access-idle { display:flex; gap:16px; align-items:center; padding-block:12px 0; }
.verify-page #access-idle p { margin:0; }
.verify-page .access-symbol { font-size:30px; margin:0; color:var(--gold-ink); }
.verify-page .camera-view { margin-top:14px; border-radius:10px; overflow:hidden; }
.verify-page .certificate-display { padding:35px 28px 24px; background:radial-gradient(ellipse at 50% 65%,#163069,#041038 70%); border-radius:18px; color:white; min-width:0; position:sticky; top:calc(var(--header) + 20px); overflow:hidden; }
.certificate-display>.eyebrow { font-size:11px; margin-bottom:12px; }
.certificate-display h2 { font-size:26px; line-height:1.45; }
.certificate-display h2 span { display:inline; margin-left:.2em; }
.display-description { font-size:14px; color:#c5cddd; line-height:1.9; margin-top:16px; }
.verify-page .certificate-studio { max-width:480px; padding:30px 0 0; margin-inline:auto; }
.verify-page .certificate-shadow-card { display:none; }
.verify-page .certificate-object { transform:rotateX(var(--rx,2deg)) rotateY(var(--ry,-3deg)); aspect-ratio:1.586; }
.verify-page .certificate-face { border:1px solid #d0b06e; border-radius:14px; box-shadow:0 24px 40px rgba(0,0,0,.4),0 0 0 3px rgba(188,151,80,.07); }
.verify-page .certificate-face::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at var(--foil-x,30%) var(--foil-y,20%),rgba(255,240,201,.2),transparent 65%); mix-blend-mode:screen; pointer-events:none; }
.verify-page .certificate-top { height:26%; background:linear-gradient(120deg,#0b2458,#06174a); padding:3% 5%; }
.verify-page .certificate-top strong { font-size:clamp(15px,1.8vw,25px); letter-spacing:.1em; color:#e5cb91; }
.verify-page .certificate-top small { font-size:9px; color:#dec58e; }
.verify-page .certificate-top img { width:25%; }
.verify-page .certificate-body { height:74%; grid-template-columns:42% 58%; }
.verify-page .certificate-photo { padding:6% 10%; background:linear-gradient(135deg,#091a42,#112958); }
.verify-page .certificate-photo img { object-fit:contain; mix-blend-mode:screen; }
.verify-page .certificate-photo span { font-size:10px; padding:3px 8px; border-radius:2px; }
.verify-page .certificate-copy { background:linear-gradient(120deg,#fffdf7,#f1e9d6); padding:8% 9%; }
.verify-page .certificate-copy>.eyebrow { font-size:7px; color:#795719; margin-bottom:12px; letter-spacing:.06em; }
.verify-page .certificate-copy h3 { font-size:13px; margin-bottom:12px; }
.verify-page .certificate-copy>p:not(.eyebrow) { font-size:10px; line-height:1.9; }
.verify-page .certificate-copy small { font-size:8px; line-height:1.7; color:#53627b; }
.verify-page .certificate-rule { margin:12px 0; width:36px; }
.verify-page .certificate-watermark { opacity:.045; width:92%; }
.verify-page .back-face { background:linear-gradient(135deg,#071b4b,#162e60); }
.verify-page .back-face p,.verify-page .back-face small { font-size:11px; }
.verify-page .back-face .demo-qr { width:32%; border-radius:5px; }
.verify-page .card-tools { margin-top:24px; gap:10px; flex-wrap:wrap; }
.verify-page .drag-hint { display:block; flex:1 1 100%; text-align:center; color:#c5cddd; font-size:12px; }
.verify-page .card-tools button { padding:8px 14px; border:1px solid rgba(188,151,80,.45); border-radius:24px; background:rgba(255,255,255,.03); font-size:13px; color:#e2c17b; }
.verify-page .card-tools button:hover { background:rgba(188,151,80,.14); }
.specimen-note { text-align:center; font-size:12px; color:#c1cbdd; border-top:1px solid rgba(188,151,80,.22); padding-top:20px; margin-top:24px; }
.verification-help { margin-top:38px; padding-block:28px; border-top:1px solid #d5c9b0; }
.verification-help h2 { font-size:21px; margin-bottom:12px; }
.verification-help p { max-width:750px; font-size:15px; color:var(--muted); }
.verification-help .text-link { margin-top:18px; }
.verify-footer { border-top:1px solid #d5c9b0; padding-block:24px; display:flex; align-items:center; gap:24px; font-size:13px; color:var(--muted); }
.verify-footer img { background:var(--navy); padding:8px; border-radius:7px; width:85px; }
.verify-footer>a { margin-left:auto; color:var(--navy); }
@media (max-width:1050px) {
  .quick-inner { gap:20px; flex-wrap:wrap; }
  .quick-actions { max-width:none; flex-basis:100%; }
  .verify-workspace { gap:20px; }
  .verify-page .certificate-display { padding:28px 20px; }
}
@media (max-width:767px) {
  .brand { transform:translateY(-6px); }
  .hero .title-line { font-size:inherit; }
  .hero-slide.portrait img { width:100%; right:-32%; object-position:40% center; mask-image:linear-gradient(90deg,transparent,#000 24%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%); }
  .hero-shade { background:linear-gradient(90deg,rgba(4,16,56,.94),rgba(4,16,56,.6) 50%,rgba(4,16,56,.22)),linear-gradient(0deg,rgba(4,16,56,.9),transparent 40%); }
  .hero-actions { flex-wrap:wrap; gap:10px; }
  .hero-actions .button,.hero-actions .button.outline { min-width:0; padding:13px 16px; gap:12px; font-size:13px; flex:0 1 auto; }
  .hero-actions .button .copy-hover { left:16px; right:38px; font-size:13px; }
  .hero-bottom { gap:10px; align-items:center; }
  .hero-dots { gap:2px; max-width:none; }
  .hero-dots button { width:23px; height:32px; }
  .quick-inner { padding-block:24px; }
  .quick-intro { min-width:0; }
  .quick-intro strong { font-size:17px; }
  .quick-intro p { font-size:13px; }
  .quick-actions { gap:10px; width:100%; }
  .quick-route { padding:14px 10px; gap:8px; border-radius:6px; }
  .quick-route svg { width:23px; height:23px; }
  .quick-route strong { font-size:13px; }
  .quick-route small { font-size:11px; }
  .quick-route .route-arrow { display:none; }
  .amulet-card .card-image { aspect-ratio:1/1.08; }
  .amulet-card .card-meta { padding:12px 10px 10px; }
  .amulet-card .card-meta h3 { height:calc(1.65em * 3); font-size:14px; line-height:1.65; -webkit-line-clamp:3; }
  .amulet-card .card-category { font-size:11px; }
  .amulet-card .card-footer { margin-top:10px; padding-top:8px; font-size:12px; }
  .verify-main { padding-top:24px; }
  .back-home { position:static; margin-bottom:20px; }
  .verify-heading { margin-bottom:22px; }
  .verify-heading h1 { font-size:30px; }
  .verify-heading h1 span { display:block; margin-left:0; }
  .verify-heading>p:last-of-type { font-size:14px; }
  .verify-path { gap:8px; justify-content:space-between; font-size:11px; }
  .verify-path li { gap:5px; }
  .verify-path span { width:23px; height:23px; font-size:10px; flex-shrink:0; }
  .verify-workspace { grid-template-columns:minmax(0,1fr); gap:24px; }
  .verify-page .verify-controls-grid>div { padding:20px; }
  .verify-page .certificate-display { position:static; padding:28px 22px; }
  .verify-page .certificate-display h2 { font-size:26px; }
  .verify-page .certificate-display h2 span { display:inline; margin-left:.2em; }
  .verify-page .certificate-studio { padding-top:26px; }
  .verify-page .certificate-object { transform:none; cursor:default; }
  .verify-page .certificate-top strong { font-size:16px; }
  .verify-page .certificate-top small { font-size:8px; }
  .verify-page .certificate-copy>.eyebrow { font-size:6px; margin-bottom:8px; }
  .verify-page .certificate-copy h3 { font-size:11px; margin-bottom:8px; }
  .verify-page .certificate-copy>p:not(.eyebrow) { font-size:8px; }
  .verify-page .certificate-copy small { font-size:7px; }
  .verify-page .certificate-photo span { font-size:8px; }
  .verify-page .certificate-rule { margin:8px 0; }
  .verify-footer { flex-wrap:wrap; gap:16px; }
  .verify-footer>a { margin-left:0; flex-basis:100%; }
}
@media (max-width:359px) {
  .hero-slide.portrait img { right:-40%; }
  .hero-actions .button,.hero-actions .button.outline { font-size:12px; padding:12px 13px; gap:8px; }
  .quick-route { flex-direction:column; align-items:flex-start; gap:8px; }
  .quick-route strong { font-size:12px; }
  .verify-path { font-size:10px; gap:5px; }
  .verify-path span { width:21px; height:21px; }
  .verify-page .verify-controls-grid>div { padding:17px; }
  .verify-page .input-action { flex-wrap:wrap; }
  .verify-page .input-action .button { width:100%; }
  .verify-page .certificate-display { padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero .title-line { animation:none; background-position:60% 50%; }
  .hero-slide,.home-page .amulet-card,.hero-actions .button,.quick-route,.certificate-object,.certificate-rotor { transition:none; }
  .amulet-card::before,.amulet-card::after { display:none; }
  .hero-actions .button:hover,.quick-route:hover,.home-page .amulet-card:hover { transform:none; }
  .verify-page .certificate-object { transform:none; }
}
