/* Homepage identity card. The site's body.dark class selects the titanium finish. */
#section-about .summary-shell { grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 60px); }
#section-about .summary-visual { max-width: 600px; min-width: 0; }
.digital-card {
  --dc-text: #092244;
  --dc-muted: #38577a;
  --dc-accent: #0869cc;
  --dc-icon-ink: #f8fbff;
  --dc-border: #92badc;
  --dc-finish: url('../images/digital-card/aurora-light.svg');
  --dc-base: #eef5fc;
  container-type: inline-size;
  width: 100%;
  font-family: 'Manrope', sans-serif;
  color: var(--dc-text);
}
body.dark .digital-card {
  --dc-text: #f8fbff;
  --dc-muted: #b3d7ee;
  --dc-accent: #64ceff;
  --dc-icon-ink: #061424;
  --dc-border: #39799e;
  --dc-finish: url('../images/digital-card/aurora-dark.svg');
  --dc-base: #030d19;
}
.dc-stage { perspective: 1400px; }
.dc-rotator { display: grid; aspect-ratio: 1.75; min-height: 328px; position: relative; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.22,.7,.2,1); }
.digital-card[data-side='back'] .dc-rotator { transform: rotateY(180deg); }
.dc-face {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 28px;
  padding: clamp(20px, 4.6cqi, 30px);
  border: 1px solid var(--dc-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--dc-finish) center / cover, var(--dc-base);
  color: var(--dc-text);
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #76b8e71a, 0 12px 26px #03132415;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.dark .dc-face { box-shadow: inset 0 1px 0 #b5e9ff55, inset 0 -1px 0 #7dcbff20, 0 12px 28px #02081240; }
/* The brushed finish is static; no animated background or pointer tracking. */
.dc-face::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(112deg, transparent 0 2px, #3c739906 2px 3px); }
.dc-back { transform: rotateY(180deg); }
.dc-face[aria-hidden='true'] { pointer-events: none; }
.dc-topline { display: flex; align-items: center; gap: 14px; }
.dc-logo { display: block; width: 136px; width: clamp(104px, 25cqi, 150px); aspect-ratio: 2.473; background: linear-gradient(140deg, #5bd9ff, #0876e5); mask: url('../images/hsnakd-logo-white.svg') center / contain no-repeat; -webkit-mask: url('../images/hsnakd-logo-white.svg') center / contain no-repeat; }
body.dark .dc-logo { background: linear-gradient(140deg, #a2e6ff, #35b9f6 55%, #4ca6e4); }
.dc-type { margin-left: auto; font-size: 8px; font-size: clamp(8px, 1.6cqi, 10px); line-height: 1.7; letter-spacing: 1.5px; font-weight: 700; text-align: right; }
.dc-nfc { color: var(--dc-accent); }
.dc-nfc svg { display: block; width: 25px; height: 30px; }
.dc-identity { margin-top: 17px; margin-top: clamp(16px, 3.4cqi, 22px); }
.dc-identity strong { display: block; color: var(--dc-text); font-size: 29px; font-size: clamp(25px, 5.7cqi, 35px); font-weight: 800; line-height: 1.2; letter-spacing: -1.1px; }
.dc-identity p { margin: 7px 0 7px; color: var(--dc-accent); font-size: 16px; font-size: clamp(14px, 3.15cqi, 19px); line-height: 1.3; font-weight: 700; letter-spacing: -.35px; }
.dc-identity small { display: block; color: var(--dc-muted); font-size: 12px; line-height: 1.5; }
.dc-bottom { margin-top: auto; padding-top: 14px; padding-right: calc(clamp(84px, 18cqi, 108px) + 18px); }
.digital-card a { color: inherit !important; text-decoration: none; transition: none !important; }
body.portfolio-home .digital-card :is(.dc-website, .dc-contacts) a { color: var(--dc-text) !important; }
body.portfolio-home .digital-card :is(.dc-website, .dc-contacts) a:hover { color: var(--dc-accent) !important; }
.dc-website { min-width: 0; padding-bottom: 4px; }
.dc-website a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 16px; font-size: clamp(14px, 3.2cqi, 19px); font-weight: 800; letter-spacing: -.5px; }
.dc-website svg { width: 22px; height: 22px; flex: none; color: var(--dc-accent); }
.dc-website p { max-width: none; margin: 6px 0 0 32px; font-size: 11px; font-size: clamp(10px, 2.15cqi, 13px); line-height: 1.65; color: var(--dc-muted); text-wrap: pretty; }
.dc-qr { position: absolute; right: clamp(20px, 4.6cqi, 30px); bottom: clamp(20px, 4.6cqi, 30px); display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.dc-qr img { display: block; width: 94px; width: clamp(84px, 18cqi, 108px); height: auto; padding: 2px; background: #fff; border: 1px solid #34b6ff; border-radius: 9px; box-shadow: 0 0 12px #229ded24; }
.dc-qr > span { font-size: 11px; line-height: 1.5; color: var(--dc-muted); }
.dc-watermark { position: absolute; right: -2%; top: 28%; width: 40%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; z-index: -1; opacity: .08; filter: grayscale(1); pointer-events: none; }
body.dark .dc-watermark { opacity: .12; }
.dc-back .dc-watermark { right: 0; top: 24%; width: 36%; }
body.portfolio-home .dc-back-heading h3 { margin: 0 0 7px; font: 800 27px/1.2 'Manrope', sans-serif; font-size: clamp(23px, 5cqi, 30px); color: var(--dc-text); letter-spacing: -.9px; text-transform: none; }
.dc-back-heading p { margin: 0; font-size: 12px; line-height: 1.5 !important; color: var(--dc-muted); }
.dc-back-heading { max-width: 78%; }
.dc-back-signature { position: absolute; top: 28px; right: 28px; text-align: right; }
.dc-back-signature strong { display: block; font-size: 12px; line-height: 1.4; color: var(--dc-accent); }
.dc-back-signature span { display: block; margin-top: 4px; font-size: 9px; color: var(--dc-muted); }
.dc-contacts { display: flex; flex-direction: column; list-style: none; margin: 14px 0 12px; padding: 0; width: max-content; max-width: 100%; }
.dc-contacts li { margin: 0; padding: 0; }
.dc-contacts a { display: flex; align-items: center; gap: 12px; min-height: 36px; font-size: 12px; line-height: 1.4; }
.dc-contact-icon { flex: 0 0 22px; color: var(--dc-accent); }
.dc-contact-icon svg { display: block; width: 22px; height: 22px; }
.dc-external { margin-left: auto; color: var(--dc-muted); }
.dc-external svg { display: block; width: 14px; height: 14px; }
.dc-motto { position: absolute; right: 28px; bottom: 90px; font-size: 8px; line-height: 1.8; letter-spacing: 2px; text-align: right; color: var(--dc-muted); }
.dc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; }
.digital-card .dc-button { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid var(--dc-accent); border-radius: 9px; font-size: 12px; line-height: 1.4; font-weight: 800; color: var(--dc-accent) !important; background: #f4faff50; transition: background .2s, box-shadow .2s; }
.dc-button svg { width: 18px; height: 18px; flex: none; }
.digital-card .dc-button--primary { color: #fff !important; border-color: #0876de; background: linear-gradient(115deg, #0874cf, #0454b8); box-shadow: inset 0 1px 0 #ffffff35; }
body.dark .digital-card .dc-button { background: #020e1b65; }
body.dark .digital-card .dc-button--primary { color: #04172b !important; border-color: #67ceff; background: linear-gradient(115deg, #96e2ff, #35adf5); }
.digital-card .dc-button:hover { box-shadow: inset 0 0 0 1px currentColor, 0 2px 10px #168deb20; }
.dc-switch { display: flex; justify-content: center; width: max-content; margin: 16px auto 0; padding: 3px; border: 1px solid var(--page-line); border-radius: 12px; background: var(--page-bg); }
.dc-switch[hidden] { display: none; }
.dc-switch button { width: 86px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--page-muted); font: 700 12px/1.4 'Manrope', sans-serif; cursor: pointer; }
.dc-switch button[aria-pressed='true'] { background: #0968c6; color: #fff; box-shadow: inset 0 1px 0 #ffffff30, 0 2px 5px #006be026; }
.digital-card :is(a, button):focus-visible { outline: 3px solid var(--dc-accent) !important; outline-offset: 4px; border-radius: 6px; }
.dc-fallback { display: block; margin-top: 12px; font-size: 13px; text-align: center; }
@media (max-width: 800px) { #section-about .summary-shell { grid-template-columns: 1fr; gap: 28px; } }
@container (max-width: 520px) {
  .dc-back-signature { display: none; }
  .dc-back-heading { max-width: 100%; }
  .dc-motto { right: 20px; letter-spacing: 1.2px; font-size: 7px; }
}
@container (max-width: 440px) {
  .dc-rotator { aspect-ratio: auto; min-height: 300px; }
  .dc-face { padding: 20px; border-radius: 15px; }
  .dc-identity { margin-top: 20px; }
  .dc-identity strong { font-size: 27px; }
  .dc-qr { right: 20px; bottom: 20px; }
  .dc-website p { margin-left: 0; max-width: 23ch; font-size: 11px; }
  .dc-back-heading p { max-width: 29ch; }
  .dc-contacts { margin-block: 12px; }
  .dc-contacts a { min-height: 36px; gap: 10px; font-size: 12px; }
  .dc-motto { display: none; }
  .dc-actions { gap: 9px; }
  .digital-card .dc-button { font-size: 11px; gap: 6px; }
  .dc-filetype { display: none; }
  .dc-back .dc-watermark { opacity: .05; }
}
@container (max-width: 300px) {
  .dc-rotator { min-height: 366px; }
  .dc-face { padding: 18px; }
  .dc-topline { gap: 8px; }
  .dc-nfc svg { width: 20px; }
  .dc-type { letter-spacing: 1px; }
  .dc-identity strong { font-size: 25px; }
  .dc-identity p { font-size: 13px; }
  .dc-contacts a { font-size: 11px; }
  .dc-actions { grid-template-columns: 1fr; gap: 8px; }
  .digital-card .dc-button { font-size: 12px; }
  .dc-qr { right: 18px; bottom: 18px; }
  .dc-website a { gap: 6px; font-size: 14px; }
  .dc-website svg { width: 17px; }
  .dc-website p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .dc-rotator, .digital-card .dc-button { transition: none; } }

/* Keep the existing floating shortcuts clear of the card on small screens. */
@media (max-width: 800px) {
  html body.portfolio-home.digital-card-visible :is(.si-sticky, .si-sticky *, #gotoTop, #chatbot-toggle[aria-expanded='false']) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; }
}