/* Karizena: dark bands and warm paper, with the promise demo in the hero. */
:root { --paper: #f4f0e6; --card: #fbf9f3; --ink: #17181a; --ink-2: #45453f; --muted: #6f6e68; --line: #d9d4c6; --accent: #f0b354; --deep: #b5761a; --soft: #f8e6c4; --serif: Baskerville, Georgia, serif; --gutter: clamp(1.25rem, 4vw, 2rem); --section: clamp(3.5rem, 8vw, 6rem); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: "Avenir Next", Avenir, -apple-system, "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 72.5rem; margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font-size: 0.9375rem; color: var(--deep); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.08; }
.lede { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.375rem; border-radius: 0.625rem; font-weight: 600; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.btn-amber { background: var(--accent); color: var(--ink); }
.btn-amber:hover { background: #e7a53e; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #000; }
.btn-ghost { border: 1px solid #bdb7a7; }
.btn-ghost:hover { border-color: var(--ink); }

.site-header { position: relative; background: #131315; color: var(--paper); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; font-family: var(--serif); font-size: 1.625rem; text-decoration: none; letter-spacing: 0.01em; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.nav-links a:not(.btn) { position: relative; display: inline-block; padding: 0.75rem; color: #cfccc2; text-decoration: none; }
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links .btn { min-height: 2.75rem; margin-left: 0.25rem; padding: 0.625rem 1.125rem; }
.nav-links a:not(.btn)::after, .mail::after, .visit::after, .footer-inner a::after { content: ""; position: absolute; top: -0.25rem; right: -0.5rem; width: 1.75rem; height: 1.75rem; background: repeating-conic-gradient(#e39a24 0deg 11deg, transparent 11deg 45deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 66%, transparent 69%); mask: radial-gradient(circle, transparent 30%, #000 32%, #000 66%, transparent 69%); opacity: 0; pointer-events: none; }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after, .mail:hover::after, .mail:focus-visible::after, .visit:hover::after, .visit:focus-visible::after, .footer-inner a:hover::after, .footer-inner a:focus-visible::after { animation: burst 560ms ease-out; }
.visit, .footer-inner a { position: relative; }
.visit::after, .footer-inner a::after { top: -1rem; right: -1.25rem; }
@keyframes burst { 0% { opacity: 0; transform: scale(0.25) rotate(-12deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(8deg); } }

.hero-band { position: relative; overflow: hidden; }
.hero-band::before { content: ""; position: absolute; top: 50%; left: calc(50% + 17rem); width: 84rem; height: 84rem; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(240,179,84,0.3) 0deg 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, transparent 7%, #000 11%, transparent 70%); mask: radial-gradient(circle, transparent 7%, #000 11%, transparent 70%); pointer-events: none; animation: turn 180s linear infinite; }
.hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(2.5rem, 6vw, 4rem); padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 8vw, 5.5rem); }
.hero-copy { flex: 1 1 27.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
h1 { font-size: clamp(3rem, 7vw, 5rem); line-height: 1.02; }
.hero-sub { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; }

.demo { --loop: 12s; flex: 1 1 26.25rem; min-width: 0; background: radial-gradient(90% 70% at 8% 108%, rgba(240,179,84,0.5), rgba(240,179,84,0.1) 48%, transparent 72%), #131315; border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; color: var(--ink); box-shadow: 0 24px 60px rgba(23,24,26,0.28), 0 0 0 1px rgba(240,179,84,0.18), 0 0 70px rgba(240,179,84,0.22); animation: glow var(--loop) ease-in-out infinite; }
.panel { position: relative; width: 88%; background: var(--card); border-radius: 0.875rem; padding: 0.875rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.p-b { align-self: flex-end; }
.panel-name { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; color: var(--muted); }
.panel-name b { font-family: var(--serif); font-size: 1.125rem; font-weight: 400; color: var(--ink); }
.demo-input { background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 0.625rem; padding: 0.625rem 0.75rem; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.type { display: inline-block; animation: type var(--loop) steps(36) infinite; }
.demo-input mark { background: transparent; color: inherit; border-radius: 0.25rem; padding: 0.0625rem 0.25rem; background-color: var(--soft); color: #7a4b00; animation: read var(--loop) linear infinite; }
.task-row { display: flex; align-items: center; gap: 0.625rem; background: #fff; border-radius: 0.625rem; padding: 0.625rem 0.75rem; box-shadow: 0 2px 8px rgba(23,24,26,0.08); }
.r-a { animation: land-a var(--loop) ease-out infinite; }
.r-b { animation: land-b var(--loop) ease-out infinite; }
.tick { position: relative; flex: none; width: 1.125rem; height: 1.125rem; border-radius: 0.3125rem; box-shadow: inset 0 0 0 1.5px #bdb7a7; }
.tick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent) no-repeat center / 0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317181a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E"); opacity: 0; animation: tick var(--loop) ease-out infinite; }
.task { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.swap { display: grid; font-size: 0.8125rem; color: var(--muted); }
.swap > * { grid-area: 1 / 1; }
.before { animation: before var(--loop) linear infinite; }
.after { opacity: 0; color: var(--deep); font-weight: 600; animation: after var(--loop) linear infinite; }
.thread { position: relative; align-self: center; width: 2px; height: 2.25rem; background: rgba(240,179,84,0.3); }
.thread i { position: absolute; left: -0.25rem; top: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 4px rgba(240,179,84,0.8); opacity: 0; animation: spark var(--loop) ease-in infinite; }
.land { position: absolute; left: calc(50% - 2.3rem); top: -2.5rem; width: 5rem; height: 5rem; background: repeating-conic-gradient(#f0b354 0deg 9deg, transparent 9deg 45deg); -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, #000 66%, transparent 69%); mask: radial-gradient(circle, transparent 28%, #000 30%, #000 66%, transparent 69%); opacity: 0; pointer-events: none; animation: land var(--loop) ease-out infinite; }
.chip { font-size: 0.8125rem; font-weight: 600; padding: 0.1875rem 0.625rem; border-radius: 999px; background: var(--soft); color: #7a4b00; white-space: nowrap; }
.demo figcaption { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; color: var(--paper); padding-top: 1.125rem; }
@keyframes type { 0%, 3% { clip-path: inset(0 100% 0 0); opacity: 1; } 22%, 95% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes read { 0%, 23% { background-color: transparent; color: inherit; } 27%, 100% { background-color: var(--soft); color: #7a4b00; } }
@keyframes land-a { 0%, 28% { opacity: 0; transform: translateY(-0.75rem) scale(0.96); } 33%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spark { 0%, 34% { top: 0; opacity: 0; } 36% { top: 0; opacity: 1; } 44% { top: 100%; opacity: 1; } 46%, 100% { top: 100%; opacity: 0; } }
@keyframes land { 0%, 44% { opacity: 0; transform: scale(0.3) rotate(-14deg); } 48% { opacity: 1; } 58%, 100% { opacity: 0; transform: scale(1.5) rotate(10deg); } }
@keyframes land-b { 0%, 44% { opacity: 0; transform: translateY(-0.75rem) scale(0.96); } 49%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tick { 0%, 67% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.2); } 73%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes before { 0%, 69% { opacity: 1; } 71%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes after { 0%, 69% { opacity: 0; } 71%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes glow { 0%, 44%, 100% { box-shadow: 0 24px 60px rgba(23,24,26,0.28), 0 0 0 1px rgba(240,179,84,0.18), 0 0 50px rgba(240,179,84,0.16); } 52%, 72% { box-shadow: 0 24px 60px rgba(23,24,26,0.28), 0 0 0 1px rgba(240,179,84,0.4), 0 0 110px rgba(240,179,84,0.42); } }
@keyframes turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

.apps { position: relative; background: radial-gradient(60% 70% at 90% 0%, rgba(240,179,84,0.3), rgba(240,179,84,0.07) 50%, transparent 74%), #131315; color: var(--paper); }
.apps .wrap { padding-block: clamp(4rem, 9vw, 7rem); display: flex; flex-direction: column; gap: 3.5rem; }
.apps .eyebrow, .visit { color: var(--accent); }
.apps h2 { font-size: clamp(3rem, 7vw, 5rem); }
.apps .lede { color: #cfccc2; }
.section-head { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.showcase { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.features { display: flex; flex-direction: column; gap: 0.75rem; }
.feature { display: grid; grid-template-columns: 1.75rem 1fr; column-gap: 1rem; row-gap: 0.25rem; padding: 1.25rem; border-radius: 1rem; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(240,179,84,0.14); transition: background-color 200ms ease, box-shadow 200ms ease; }
.feature svg { grid-row: 1 / span 2; color: var(--accent); }
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.feature p { grid-column: 2; color: #cfccc2; }
.feature:hover { background: rgba(240,179,84,0.12); box-shadow: inset 0 0 0 1px rgba(240,179,84,0.6); }

.stage { position: relative; aspect-ratio: 640 / 530; }
.shot { position: absolute; display: block; overflow: hidden; border-radius: 0.875rem; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.5); transition: transform 200ms ease, box-shadow 200ms ease; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%) no-repeat 180% 0 / 250% 100%; pointer-events: none; }
.shot:hover, .shot:focus-visible, .showcase:has(.f-add:hover) .s-add, .showcase:has(.f-slip:hover) .s-slip, .showcase:has(.f-list:hover) .s-list { z-index: 3; transform: translateY(-0.375rem) scale(1.03); box-shadow: 0 0 0 1px rgba(240,179,84,0.7), 0 24px 60px rgba(0,0,0,0.55), 0 0 60px rgba(240,179,84,0.3); }
.shot:hover::after, .shot:focus-visible::after { background-position: -80% 0; transition: background-position 700ms ease; }
.s-list { top: 0; right: 0; width: 90%; aspect-ratio: 1430 / 780; rotate: 1.5deg; background-image: url(assets/amd-list.png); background-size: cover; }
.s-add { top: 59%; left: 0; width: 88%; aspect-ratio: 1488 / 290; rotate: -1.5deg; z-index: 1; background-image: url(assets/amd-add.png); background-size: cover; }
.s-slip { bottom: 1%; right: 0; width: 84%; aspect-ratio: 1488 / 340; rotate: 1deg; z-index: 2; background-image: url(assets/amd-headsup.png); background-size: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot { animation: rise linear both; animation-timeline: view(); animation-range: entry 15% entry 75%; }
    .s-add { animation-range: entry 25% entry 85%; }
    .s-slip { animation-range: entry 35% entry 95%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 3rem; } to { opacity: 1; translate: 0 0; } }

.about { display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 6vw, 4rem); padding-block: var(--section); }
.about-intro { flex: 1 1 23.75rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.about-intro p:not(.eyebrow) { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); }
.history { flex: 1 1 26.25rem; min-width: 0; }
.history h3 { font-size: 0.9375rem; font-weight: 400; color: var(--muted); margin-bottom: 0.75rem; }
.history ul { border-bottom: 1px solid var(--line); }
.history ul + h3 { margin-top: 2rem; }
.history li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding: 1.125rem 0; border-top: 1px solid var(--line); }
.org { font-family: var(--serif); font-size: 1.375rem; }
.role { color: var(--muted); }

.contact { position: relative; overflow: hidden; background: #131315; color: var(--paper); }
.contact::before { content: ""; position: absolute; top: 100%; left: 16%; width: 110rem; height: 110rem; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(240,179,84,0.26) 0deg 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, transparent 6%, #000 9%, transparent 62%); mask: radial-gradient(circle, transparent 6%, #000 9%, transparent 62%); pointer-events: none; animation: turn 240s linear infinite reverse; }
.contact > * { position: relative; }
.contact-inner { padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 6.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.contact h2 { font-size: clamp(4rem, 13vw, 9.5rem); line-height: 1; }
.contact p { font-size: 1.1875rem; color: #cfccc2; }
.mail { position: relative; font-family: var(--serif); font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.15; color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; overflow-wrap: anywhere; transition: color 160ms ease; }
.mail:hover { color: #fff; }
.site-footer { border-top: 1px solid #2f3034; }
.footer-inner { padding-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-size: 0.8125rem; color: #9b9a94; }
.footer-inner a { color: #cfccc2; text-underline-offset: 0.2em; }

@media (max-width: 52rem) {
  .showcase { grid-template-columns: 1fr; }
  .stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 0.75rem; }
  .shot { position: relative; inset: auto; width: 100%; rotate: none; }
}
@media (max-width: 40rem) {
  .nav-links .btn { display: none; }
  .panel { width: 100%; }
  .demo-input { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .shot, .shot:hover::after, .shot:focus-visible::after { transition: none; }
  .shot::after { display: none; }
  .nav-links a::after, .mail::after, .visit::after, .footer-inner a::after { animation: none !important; }
  .demo, .demo *, .demo *::after, .hero-band::before, .contact::before { animation: none !important; }
  .feature { transition: none; }
}