/* ==========================================================================
   Youssef Farhat — Portfolio
   Layout lives inline in index.html (ported 1:1 from the original design).
   This file holds fonts, base rules, image slots and hover states.
   ========================================================================== */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../assets/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../assets/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../assets/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../assets/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html { background: #050B18; }
body { margin: 0; background: #050B18; color: #F8FAFC; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:hover { color: #38BDF8; }
::selection { background: #2563EB; color: #fff; }
:focus-visible { outline: 2px solid #38BDF8; outline-offset: 4px; border-radius: 4px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Project screenshot slots: show assets/img/projects/<id>.png, else a placeholder */
.slot { display: block; position: relative; width: 100%; height: 100%; font: 13px/1.3 'Geist', system-ui, sans-serif; }
.slot__frame { position: absolute; inset: 0; overflow: hidden; background: rgba(127,127,127,.08); }
.slot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot__empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; box-sizing: border-box; text-align: center; }
.slot__empty svg { opacity: .45; }
.slot__empty span { max-width: 90%; font-weight: 500; letter-spacing: .01em; opacity: .75; overflow-wrap: anywhere; }
.slot__ring { position: absolute; inset: 0; pointer-events: none; border: 1.5px dashed currentColor; opacity: .35; display: none; }
/* Hidden with opacity, not display:none: browsers never download a lazy image that isn't rendered. */
.slot.is-empty img { opacity: 0; }
.slot.is-empty .slot__empty { display: flex; }
.slot.is-empty .slot__ring { display: block; }
@media (max-width: 767px) {
  .slot__empty { gap: 6px; padding: 8px; }
  .slot__empty svg { width: 20px; height: 20px; }
  .slot__empty span { font-size: 10px; line-height: 1.25; }
}

/* Technology grid: always an even 3 x 2 (2 x 3 on tablets, 1 column on phones).
   The original auto-fit grid went to 4 columns on wide screens and left an empty block. */
[data-tech-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1024px) { [data-tech-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
  [data-tech-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  /* One column: cards size to their tags instead of the 220px desktop minimum. */
  [data-tech-grid] > [data-reveal] { min-height: 0 !important; padding: 26px 22px 30px !important; gap: 20px !important; }
  [data-tech-grid] h3 { font-size: 23px !important; }
}

/* Mobile menu (shown by data-mobile on small / portrait screens) */
.nav-menu-btn[aria-expanded="true"] [data-menu-bar]:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] [data-menu-bar]:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-menu-btn[aria-expanded="true"] [data-menu-bar]:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
.nav-menu-btn:hover { border-color: #3B82F6 !important; }
[data-menu-link]:hover { color: #38BDF8 !important; }

/* Touch devices: comfortable targets for text links */
@media (pointer: coarse) {
  [data-ct-link] { padding: 12px 0 !important; }
  [data-ct-foot] a { display: inline-flex; align-items: center; min-height: 44px; }
  [data-proj-jump] { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Hover states (from the original design) */
.sh-0:hover{color:#F8FAFC !important}
.sh-1:hover{color:#F8FAFC !important}
.sh-2:hover{color:#F8FAFC !important}
.sh-3:hover{color:#F8FAFC !important}
.sh-4:hover{background:#2563EB !important;border-color:#2563EB !important}
.sh-5:hover{background:#3B82F6 !important;box-shadow:0 0 28px rgba(59,130,246,.45) !important}
.sh-6:hover{background:rgba(37,99,235,.18) !important;border-color:#3B82F6 !important}
.sh-7:hover{background:rgba(37,99,235,.18) !important;border-color:#3B82F6 !important}
.sh-8:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-9:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-10:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-11:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-12:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-13:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-14:hover{border-color:rgba(59,130,246,.5) !important;transform:translateY(-4px) !important}
.sh-15:hover{transform:scale(1.015) !important}
.sh-16:hover{transform:scale(1.015) !important}
.sh-17:hover{transform:scale(1.015) !important}
.sh-18:hover{transform:scale(1.015) !important}
.sh-19:hover{color:#F8FAFC !important}
.sh-20:hover{color:#F8FAFC !important}
.sh-21:hover{color:#F8FAFC !important}
.sh-22:hover{color:#F8FAFC !important}
.sh-23:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-24:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-25:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-26:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-27:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-28:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-29:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-30:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-31:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-32:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-33:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-34:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-35:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-36:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-37:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-38:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-39:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-40:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-41:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-42:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-43:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-44:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-45:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-46:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-47:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-48:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-49:hover{border-color:#3B82F6 !important;background:rgba(37,99,235,.14) !important;color:#F8FAFC !important}
.sh-50:hover{gap:14px !important;color:#F8FAFC !important;border-color:#3B82F6 !important}
.sh-51:hover{gap:14px !important;color:#F8FAFC !important;border-color:#3B82F6 !important}
.sh-52:hover{gap:14px !important;color:#F8FAFC !important;border-color:#3B82F6 !important}
.sh-53:hover{color:#3B82F6 !important}

/* Loader failsafe: if the scripts never start (blocked or failed download), don't leave the page covered.
   main.js cancels this as soon as it runs. */
[data-pl] { animation: pl-failsafe .6s ease 6s forwards; }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }

/* Legal pages (/<locale>/impressum/, /<locale>/datenschutz/) and 404.html */
.legal { min-height: 100vh; display: flex; flex-direction: column; }
.legal-nav { position: sticky; top: 0; z-index: 10; padding: 14px 16px; }
.legal-nav > div { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 20px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(148,163,184,.10); background: rgba(8,20,38,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.legal-nav .logo { font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: #F8FAFC; }
.legal-nav .logo span { color: #3B82F6; }
.legal-nav .back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; box-sizing: border-box; border: 1px solid rgba(148,163,184,.28); border-radius: 999px; font: 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #F8FAFC; transition: background .4s, border-color .4s; }
.legal-nav .back:hover { background: #2563EB; border-color: #2563EB; color: #F8FAFC; }
.legal main { flex: 1; width: 100%; max-width: calc(720px + 10vw); margin: 0 auto; padding: clamp(40px, 8vh, 96px) 5vw clamp(64px, 10vh, 112px); box-sizing: border-box; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal .kicker { font: 12px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #3B82F6; }
.legal h1 { margin: 16px 0 12px; font-size: clamp(38px, 7vw, 80px); font-weight: 600; letter-spacing: -0.05em; line-height: .98; hyphens: manual; -webkit-hyphens: manual; }
.legal .sub { margin: 0 0 clamp(32px, 6vh, 56px); color: #94A3B8; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; text-wrap: balance; }
.legal h2 { margin: clamp(36px, 6vh, 52px) 0 14px; padding-top: clamp(18px, 3vh, 24px); border-top: 1px solid rgba(148,163,184,.14); font-size: clamp(21px, 2.4vw, 27px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.legal h3 { margin: 26px 0 8px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.legal p, .legal li, .legal address { color: #CBD5E1; font-size: clamp(15px, 1.25vw, 16.5px); line-height: 1.65; font-style: normal; text-wrap: pretty; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 1.15em; }
.legal li { margin-bottom: 6px; padding-left: 2px; }
.legal li::marker { color: #3B82F6; }
.legal main a { color: #F8FAFC; border-bottom: 1px solid rgba(59,130,246,.6); overflow-wrap: anywhere; hyphens: none; }
.legal main a:hover { color: #38BDF8; border-color: #38BDF8; }
.legal .label { display: block; margin-bottom: 4px; font: 11px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.legal footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 5vw; padding: 22px 0 26px; border-top: 1px solid rgba(148,163,184,.14); font: 12px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.legal footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.legal footer a { display: inline-flex; align-items: center; min-height: 44px; color: #CBD5E1; }
.legal footer a:hover, .legal footer a[aria-current] { color: #F8FAFC; }
.legal code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: #93C5FD; }
.nav-menu-btn[aria-expanded="true"] { background: rgba(37,99,235,.18) !important; border-color: #3B82F6 !important; }
.legal .nb { hyphens: none; -webkit-hyphens: none; white-space: nowrap; }

/* Legal pages: the portfolio's nav bar, built with classes instead of inline styles (menu: js/legal.js).
   The mobile query matches Q_MOBILE in js/main.js. */
.site-nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; padding: 14px 16px; }
.site-nav__bar { position: relative; width: 100%; max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 20px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(148,163,184,.10); background: rgba(8,20,38,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-nav__logo { font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: #F8FAFC; }
.site-nav__logo span { color: #3B82F6; }
.site-nav__links { display: flex; gap: 28px; font: 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.site-nav__links a { display: flex; align-items: center; gap: 7px; color: #94A3B8; transition: color .3s; }
.site-nav__links a span { color: #64748B; }
.site-nav__links a:hover { color: #F8FAFC; }
.site-nav__end { display: flex; align-items: center; gap: 8px; }
.site-nav__contact { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(148,163,184,.28); border-radius: 999px; font: 12px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #F8FAFC; transition: background .4s, border-color .4s; }
.site-nav__contact:hover { background: #2563EB; border-color: #2563EB; color: #F8FAFC; }
.site-nav__menu-btn { display: none; align-items: center; justify-content: center; gap: 12px; min-width: 104px; height: 44px; padding: 0 18px; margin: 0; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(148,163,184,.28); background: none; color: #F8FAFC; font: 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .4s, border-color .4s; }
.site-nav__bars { position: relative; display: block; width: 18px; height: 12px; }
.site-nav__bars [data-menu-bar] { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.site-nav__bars [data-menu-bar]:nth-child(2) { top: 5.25px; }
.site-nav__bars [data-menu-bar]:nth-child(3) { top: auto; bottom: 0; }
.site-nav__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px 20px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(148,163,184,.14); background: #081426; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); font: 13px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.site-nav__panel[hidden] { display: none; }
.site-nav__panel > a:not(.site-nav__panel-contact) { display: flex; align-items: center; gap: 14px; min-height: 52px; color: #F8FAFC; border-bottom: 1px solid rgba(148,163,184,.1); }
.site-nav__panel > a:not(.site-nav__panel-contact):hover { color: #38BDF8; }
.site-nav__panel > a span { color: #3B82F6; }
.site-nav__panel .site-nav__panel-contact { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 14px 0 8px; border-radius: 999px; background: #2563EB; border: 1px solid #2563EB; color: #F8FAFC; }
.site-nav__panel-contact span { color: inherit !important; }
@media (max-width: 767px), (max-aspect-ratio: 1/1), (max-height: 500px) {
  .site-nav__bar { padding: 8px 8px 8px 20px; }
  .site-nav__links, .site-nav__end > .lang-switch, .site-nav__contact { display: none; }
  .site-nav__menu-btn { display: inline-flex; }
}

/* Language switcher (EN · DE · FR). Desktop: in the nav bar. Small screens: inside the menu panel. */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-right: 8px; font: 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; color: #94A3B8; transition: color .3s, background .3s; }
.lang-link:hover { color: #F8FAFC; background: rgba(148,163,184,.08); }
.lang-link[aria-current] { color: #F8FAFC; box-shadow: inset 0 -1px 0 #3B82F6; border-radius: 0; }
.lang-switch--menu { gap: 8px; margin: 14px 0 0; }
.lang-switch--menu .lang-link { flex: 1; height: 44px; border: 1px solid rgba(148,163,184,.18); border-radius: 999px; font-size: 12px; text-transform: none; letter-spacing: .02em; }
.lang-switch--menu .lang-link[aria-current] { border-color: #3B82F6; background: rgba(37,99,235,.14); box-shadow: none; border-radius: 999px; }
@media (pointer: coarse) { .lang-switch .lang-link { min-width: 44px; height: 44px; } }

/* Switching language: short fade out, and the next page fades in at the same spot without the intro. */
html.lang-leaving body { opacity: 0; transition: opacity .18s ease; }
html.lang-arrive [data-pl] { display: none !important; }
html.lang-arrive body { opacity: 0; }
html.lang-arrive.lang-ready body { opacity: 1; transition: opacity .25s ease; }

/* German and French words run longer: long headings may break at a soft hyphen instead of overflowing. */
h1, h2, h3 { overflow-wrap: break-word; }
/* Capital accents (É, Ü …) rise above the tight .9 line-height, and the reveal masks (overflow: hidden) would cut them.
   Extra room on top, taken back with a negative margin, so the layout doesn't move. */
#contact-h > span { padding-top: .14em; margin-top: -.14em; }
div:has(> #exp-h) { font-size: clamp(44px, min(6.4vw, 10vh), 120px); padding-top: .14em; margin-top: -.14em; }

/* "/" language chooser (only seen without JavaScript or before the redirect) */
.lang-choice { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.legal .lang-choice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1px solid rgba(148,163,184,.28); border-radius: 999px; font: 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #F8FAFC !important; }
.legal .lang-choice a:hover { background: #2563EB; border-color: #2563EB; }

/* ==========================================================================
   Work: interactive illustrations (js/demos.js). Sizes inside a phone or window use cqw (1% of its width),
   so the content scales with the mockup on every screen size.
   ========================================================================== */
/* cqw inside a mockup = 1% of the mockup's frame (a container can't size its own padding in cqw). */
:has(> .demo-screen), :has(> .stamp-admin) { container-type: inline-size; }
.demo-tag { padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(59,130,246,.4); background: rgba(37,99,235,.12); font: 9px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #93C5FD; white-space: nowrap; }
.demo-screen { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 24px; display: flex; flex-direction: column; background: linear-gradient(180deg, #10233F, #0A1628); color: #F8FAFC; font-family: 'Geist', system-ui, sans-serif; text-align: left; }
.demo-btn { appearance: none; margin: 0; border: 0; border-radius: 999px; background: #2563EB; color: #F8FAFC; font: 600 max(10px, 6cqw)/1.1 'Geist', system-ui, sans-serif; padding: 5cqw 4cqw; min-height: 32px; cursor: pointer; transition: background .3s, transform .15s; }
.demo-btn:hover { background: #3B82F6; }
.demo-btn:active { transform: scale(.97); }
.demo-btn--light { background: #F8FAFC; color: #7F1D1D; }
.demo-btn--light:hover { background: #fff; }
.demo-pulse { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #38BDF8; box-shadow: 0 0 12px #38BDF8; opacity: 0; }
.demo-pulse.is-on { animation: demo-pulse .7s linear; }
@keyframes demo-pulse { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }

/* acardo: stamp card app */
.stamp-app { padding: 16cqw 8cqw 9cqw; gap: 6cqw; }
.stamp-app__store { display: flex; align-items: center; gap: 4cqw; }
.stamp-app__store div { display: flex; flex-direction: column; gap: 1cqw; min-width: 0; }
.stamp-app__store strong { font-size: 7.5cqw; font-weight: 600; letter-spacing: -.02em; }
.stamp-app__store span { font: 4.6cqw/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.stamp-app__logo { display: grid; place-items: center; flex: none; width: 13cqw; height: 13cqw; border-radius: 4cqw; background: linear-gradient(135deg, #F59E0B, #B45309); font: 700 5cqw/1 'Geist', system-ui, sans-serif; color: #fff; }
.stamp-app__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3cqw; margin-top: 4cqw; padding: 5cqw; border-radius: 5cqw; background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.14); }
.stamp-app__stamp { aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(148,163,184,.4); transition: background .3s, border-color .3s, transform .3s; }
.stamp-app__stamp.is-on { border: 1px solid #3B82F6; background: radial-gradient(circle, #60A5FA 0 28%, #2563EB 30%); }
.stamp-app__stamp.is-new { animation: stamp-in .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp-in { from { transform: scale(.2); } to { transform: scale(1); } }
.stamp-app__count { margin: 0; font-size: 5.5cqw; color: #94A3B8; }
.stamp-app__count strong { font-size: 9cqw; color: #F8FAFC; font-weight: 600; }
.stamp-app__reward { margin: 0; padding: 3.5cqw 4cqw; border-radius: 4cqw; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.45); color: #86EFAC; font-size: 5.4cqw; font-weight: 600; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.stamp-app.is-reward .stamp-app__reward { opacity: 1; transform: none; }
.stamp-app .demo-btn { margin-top: auto; }

/* acardo: admin dashboard */
.stamp-admin { aspect-ratio: 16/10; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr 1.25fr; grid-template-rows: auto 1fr; gap: 3cqw; padding: 4cqw; font-family: 'Geist', system-ui, sans-serif; color: #F8FAFC; }
.stamp-admin__kpi, .stamp-admin__chart, .stamp-admin__log { border-radius: 2.2cqw; border: 1px solid rgba(148,163,184,.14); background: rgba(148,163,184,.05); }
.stamp-admin__kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 2cqw; padding: 2.8cqw 3cqw; }
.stamp-admin span, .stamp-admin em { font: max(8px, 2.2cqw)/1.3 'Geist Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.stamp-admin__kpi strong { font-size: 8cqw; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s; }
.stamp-admin__kpi strong.is-bump { color: #60A5FA; }
.stamp-admin__chart { grid-row: span 2; display: flex; flex-direction: column; gap: 2cqw; padding: 2.8cqw 3cqw; }
.stamp-admin__bars { flex: 1; display: flex; align-items: flex-end; gap: 1.6cqw; }
.stamp-admin__bars span { flex: 1; min-height: 4%; border-radius: 1cqw 1cqw 0 0; background: rgba(59,130,246,.35); transition: height .5s cubic-bezier(.2,.7,.2,1); }
.stamp-admin__bars span:last-child { background: #3B82F6; }
.stamp-admin__log { grid-column: span 2; margin: 0; padding: 2cqw 3cqw; list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; overflow: hidden; font-size: max(9px, 2.6cqw); color: #CBD5E1; }
.stamp-admin__log li { display: flex; align-items: center; gap: 2cqw; white-space: nowrap; }
.stamp-admin__log li.is-new { animation: log-in .45s ease-out; }
.stamp-admin__log i { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #3B82F6; }
.stamp-admin__log em { margin-left: auto; text-transform: none; letter-spacing: 0; }
@keyframes log-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Epilepto Guard: app with a simulated seizure alert */
.ep-app { padding: 16cqw 7cqw 9cqw; gap: 5cqw; }
.ep-app__head { display: flex; flex-direction: column; gap: 2cqw; }
.ep-app__head strong { font-size: 7.5cqw; font-weight: 600; letter-spacing: -.02em; }
.ep-app__ble, .ep-app__hr span, .ep-app__chart > span { font: 4.4cqw/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.ep-app__ble { display: flex; align-items: center; gap: 2cqw; }
.ep-app__ble i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px #22C55E; }
.ep-app__hr { display: flex; flex-direction: column; gap: 1cqw; }
.ep-app__hr strong { font-size: 5.5cqw; font-weight: 500; color: #94A3B8; }
.ep-app__hr b { font-size: 14cqw; font-weight: 600; letter-spacing: -.04em; color: #F8FAFC; font-variant-numeric: tabular-nums; }
.ep-app__chart { display: flex; flex-direction: column; gap: 2cqw; }
.ep-app__chart canvas { display: block; width: 100%; height: 34cqw; border-radius: 3cqw; background: rgba(148,163,184,.06); border: 1px solid rgba(148,163,184,.12); }
.ep-app__status { margin: 0; align-self: flex-start; padding: 2cqw 4cqw; border-radius: 999px; font-size: 5cqw; font-weight: 600; background: rgba(34,197,94,.14); color: #86EFAC; border: 1px solid rgba(34,197,94,.4); }
.ep-app__detected, .ep-app.is-seizure .ep-app__normal { display: none; }
.ep-app.is-seizure .ep-app__detected { display: inline; }
.ep-app.is-seizure .ep-app__status { background: rgba(239,68,68,.16); color: #FCA5A5; border-color: rgba(239,68,68,.5); }
.ep-app .demo-btn[data-ep-sim] { margin-top: auto; }
.ep-alert { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 5cqw; padding: 10cqw 8cqw; background: linear-gradient(180deg, #B91C1C, #7F1D1D); text-align: center; opacity: 0; visibility: hidden; transform: translateY(8%); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.ep-app.is-alert .ep-alert { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.ep-alert strong { font-size: 9cqw; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ep-alert p { margin: 0; font-size: 5.4cqw; line-height: 1.35; color: #FECACA; }
.ep-alert b { display: block; margin-top: 3cqw; font-size: 20cqw; color: #fff; font-variant-numeric: tabular-nums; }
.ep-alert__done, .ep-app.is-notified .ep-alert__wait { display: none; }
.ep-app.is-notified .ep-alert__done { display: block; }
.ep-app.is-alert .ep-alert strong { animation: ep-blink 1s steps(2, start) infinite; }
@keyframes ep-blink { to { opacity: .55; } }

/* Epilepto Guard: sensor bracelet */
.ep-band { position: relative; container-type: inline-size; }
.ep-band svg { position: absolute; left: 21%; top: 5%; width: 58%; height: auto; }
.ep-band__led { fill: #22C55E; }
.ep-band__ring { fill: none; stroke: #22C55E; stroke-width: 2; transform-origin: 100px 34px; animation: ep-ring 1.8s ease-out infinite; }
.ep-band.is-seizure .ep-band__led { fill: #EF4444; }
.ep-band.is-seizure .ep-band__ring { stroke: #EF4444; animation-duration: .5s; }
@keyframes ep-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.ep-band__text { position: absolute; left: 0; right: 0; bottom: 7cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; text-align: center; }
.ep-band__text strong { font-size: max(12px, 5.4cqw); font-weight: 600; color: #F8FAFC; }
.ep-band__text span, .ep-band__text em { font: max(9px, 3.4cqw)/1.3 'Geist Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.ep-band__text em { color: #60A5FA; }

/* Orcadia: 3D preview (WebGL depth parallax; the photo shows until it's ready or without WebGL) */
.demo-3d { position: relative; cursor: grab; touch-action: pan-y; }
.demo-3d:active { cursor: grabbing; }
.demo-3d img, .demo-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-3d img { object-fit: contain; }
.demo-3d canvas { opacity: 0; transition: opacity .6s; }
.demo-3d.is-ready canvas { opacity: 1; }
.demo-3d__hint { position: absolute; left: 12px; right: 12px; bottom: 12px; width: fit-content; margin: 0 auto; padding: 5px 10px; border-radius: 999px; background: rgba(5,11,24,.7); border: 1px solid rgba(148,163,184,.2); box-sizing: border-box; font: 9px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #CBD5E1; text-align: center; pointer-events: none; transition: opacity .5s; }
.demo-3d.is-touched .demo-3d__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ep-band__ring, .ep-app.is-alert .ep-alert strong, .stamp-app__stamp.is-new, .stamp-admin__log li.is-new { animation: none; }
}