:root {
--bg: #f3f4f6;
--surface: #ffffff;
--text: #0b1220;
--muted: rgba(15, 23, 42, 0.72);
--border: rgba(15, 23, 42, 0.10);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-md: 18px;
--accent: #f59e0b;
--green: #16a34a;
}

* {
box-sizing: border-box;
}

html,
body {
height: 100%;
}

body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.55;
}

::selection {
background: rgba(245, 158, 11, 0.35);
}

a {
color: inherit;
}

/* Helpers */
.hidden {
display: none !important;
}

.transition-view {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.translate-x-full {
transform: translateX(100%);
}

.hide-scrollbar::-webkit-scrollbar {
display: none;
}

.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* Icons */
.custom-icon {
display: inline-block;
}

.icon {
width: 20px;
height: 20px;
}

.icon--xs {
width: 12px;
height: 12px;
}

.icon--sm {
width: 16px;
height: 16px;
}

.icon--md {
width: 20px;
height: 20px;
}

.icon--xl {
width: 40px;
height: 40px;
}

.icon--xxl {
width: 64px;
height: 64px;
}

.icon-svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Layout */
.page {
min-height: 100vh;
}

.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
padding: clamp(24px, 6vw, 72px) clamp(18px, 6vw, 72px);
color: #ffffff;
}

.hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
}

.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.10),
rgba(0, 0, 0, 0.35) 55%,
rgba(0, 0, 0, 0.78) 100%);
pointer-events: none;
}

.hero__inner {
position: relative;
max-width: 1120px;
margin: 0 auto;
width: 100%;
}

.hero__name {
margin: 0 0 10px;
font-size: clamp(44px, 7vw, 84px);
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.hero__meta {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0.92;
font-weight: 600;
}

.hero__meta li {
display: flex;
align-items: center;
gap: 10px;
}

.hero__fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
pointer-events: none;
}

.content {
background: var(--surface);
}

.content__inner {
max-width: 1120px;
margin: 0 auto;
padding: 56px clamp(18px, 6vw, 72px) 64px;
}

.section-title {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: clamp(22px, 3vw, 28px);
font-weight: 900;
letter-spacing: -0.01em;
}

.section-title .icon {
color: var(--accent);
}

.lead {
margin: 0;

font-size: 18px;
color: rgba(17, 24, 39, 0.78);
font-style: italic;
line-height: 1.7;
}

.two-col {
margin-top: 44px;
display: grid;
gap: 36px;
grid-template-columns: 1fr;
align-items: start;
}

.two-col> :only-child {
grid-column: 1 / -1;
}

@media (min-width: 980px) {
.two-col {
grid-template-columns: 1.1fr 0.9fr;
}
}

.col {
display: flex;
flex-direction: column;
gap: 36px;
min-width: 0;
}

.section-head {
margin-bottom: 16px;
}

.section-head h3 {
margin: 0;
font-size: 30px;
font-weight: 900;
letter-spacing: -0.01em;
}

.section-head p {
margin: 6px 0 0;
color: var(--muted);
}

/* Cards */
.cards-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}

@media (min-width: 760px) {
.cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.card {
position: relative;
padding: 28px;
border-radius: var(--radius-xl);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: var(--shadow-sm);
overflow: hidden;
}

.card__icon {
position: absolute;
top: 20px;
right: 20px;
opacity: 0.22;
}

.card__media {
height: auto;
min-height: 120px;
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.06);
background: rgba(255, 255, 255, 0.6);
display: grid;
place-items: center;
margin-bottom: 16px;
overflow: hidden;
}

.card__media img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}

.card__media--contain {
padding: 10px;
}

.card__media--contain img {
object-fit: contain;
}

.card__label {
margin: 0 0 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
}

.card__text {
margin: 0;
font-size: 20px;
font-weight: 900;
line-height: 1.25;
color: var(--text);
}

.card--prompt .card__text {
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: rgba(17, 24, 39, 0.78);
}

.card--wide {
grid-column: 1 / -1;
}

.card--compact {
padding: 22px;
border-radius: var(--radius-lg);
}

.card--compact .card__media {
min-height: 140px;
margin-bottom: 14px;
}

.card--compact .card__icon {
top: 16px;
right: 16px;
}

.card-hover {
transition: transform 180ms ease, box-shadow 180ms ease;
}

.card-hover:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}

.card--blue {
background: #eff6ff;
border-color: #dbeafe;
}

.card--blue .card__label {
color: #1d4ed8;
}

.card--blue .card__icon {
color: #2563eb;
}

.card--blue .card__media {
background: rgba(37, 99, 235, 0.10);
color: #2563eb;
border-color: rgba(37, 99, 235, 0.10);
}

.card--orange {
background: #fff7ed;
border-color: #ffedd5;
}

.card--orange .card__label {
color: #c2410c;
}

.card--orange .card__icon {
color: #ea580c;
}

.card--orange .card__media {
background: rgba(234, 88, 12, 0.10);
color: #ea580c;
border-color: rgba(234, 88, 12, 0.10);
}

.card--pink {
background: #fdf2f8;
border-color: #fce7f3;
}

.card--pink .card__label {
color: #be185d;
}

.card--pink .card__icon {
color: #db2777;
}

.card--pink .card__media {
background: rgba(219, 39, 119, 0.10);
color: #db2777;
border-color: rgba(219, 39, 119, 0.10);
}

.card--yellow {
background: #fffbeb;
border-color: #fef3c7;
}

.card--yellow .card__label {
color: #b45309;
}

.card--yellow .card__icon {
color: #d97706;
}

.card--yellow .card__media {
background: rgba(217, 119, 6, 0.10);
color: #d97706;
border-color: rgba(217, 119, 6, 0.10);
}

.card--rose {
background: #fff1f2;
border-color: #ffe4e6;
}

.card--rose .card__label {
color: #be123c;
}

.card--rose .card__icon {
color: #e11d48;
}

.card--rose .card__media {
background: rgba(225, 29, 72, 0.10);
color: #e11d48;
border-color: rgba(225, 29, 72, 0.10);
}

.card--purple {
background: #faf5ff;
border-color: #f3e8ff;
}

.card--purple .card__label {
color: #6d28d9;
}

.card--purple .card__icon {
color: #9333ea;
}

.card--purple .card__media {
background: rgba(147, 51, 234, 0.10);
color: #9333ea;
border-color: rgba(147, 51, 234, 0.10);
}

/* Green Flags */
.sub-title {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
}

.flags {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}

.flag {
display: flex;
gap: 12px;
padding: 16px;
border-radius: var(--radius-md);
background: #f9fafb;
border: 1px solid rgba(15, 23, 42, 0.06);
}

.flag__icon {
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(22, 163, 74, 0.12);
color: var(--green);
display: grid;
place-items: center;
flex: 0 0 auto;
margin-top: 2px;
}

.flag__title {
margin: 0;
font-weight: 900;
}

.flag__desc {
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}

/* Projects */
.project-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.project-teaser {
position: relative;
display: block;
height: 220px;
border-radius: var(--radius-xl);
overflow: hidden;
cursor: pointer;
text-decoration: none;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
}

.project-teaser__bg {
position: absolute;
inset: 0;
opacity: 0.95;
transition: transform 700ms ease;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
will-change: transform;
}

.project-teaser:hover .project-teaser__bg {
transform: scale(1.08);
}

.project-teaser__content {
position: absolute;
inset: 0;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #ffffff;
}

.project-tag {
display: inline-block;
align-self: flex-start;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.project-title {
margin: 10px 0 0;
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
}

.project-cta {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
opacity: 0.86;
font-weight: 600;
}

/* Overlays */
.overlay {
position: fixed;
inset: 0;
background: var(--surface);
z-index: 40;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

#match-screen {
z-index: 50;
}

.detail-hero {
position: relative;
height: min(460px, 52vh);
display: flex;
align-items: flex-end;
padding: 32px 18px;
color: #ffffff;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

@media (min-width: 760px) {
.detail-hero {
padding: 40px 24px;
}
}

.detail-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.62));
pointer-events: none;
}

.detail-hero__inner {
position: relative;
max-width: 1120px;
margin: 0 auto;
width: 100%;
}

.detail-hero__title {
margin: 0;
font-size: clamp(34px, 5vw, 44px);
font-weight: 900;
letter-spacing: -0.01em;
}

.detail-hero__subtitle {
margin: 6px 0 0;
font-size: 18px;
font-weight: 800;
opacity: 0.92;
}

.detail-hero__meta {
margin: 14px 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
opacity: 0.92;
font-weight: 600;
}

.detail-back {
position: absolute;
top: 18px;
left: 18px;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
display: grid;
place-items: center;
cursor: pointer;
z-index: 2;
}

.detail-back:hover {
background: rgba(255, 255, 255, 0.22);
}

.detail-badge {
position: absolute;
top: 18px;
right: 18px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
font-style: italic;
z-index: 2;
}

.detail-body {
padding: 26px 0 56px;
background: var(--bg);
}

.detail-body__inner {
max-width: 880px;
margin: 0 auto;
padding: 0 18px;
}

.detail-section--bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}

@media (min-width: 760px) {
.detail-section--bleed {
margin-left: calc(50% - 50vw);
}
}

.detail-section {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow-sm);
}

.detail-section--plain {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}

.detail-section--plain.detail-section--bleed {
padding-left: 18px;
padding-right: 18px;
}

@media (min-width: 760px) {
.detail-section--plain.detail-section--bleed {
padding-left: 24px;
padding-right: 24px;
}
}

.detail-section+.detail-section {
margin-top: 16px;
}

.detail-section h3 {
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 900;
}

.detail-section h3 .icon {
color: var(--accent);
}

.detail-section p {
margin: 0;
color: rgba(17, 24, 39, 0.78);
font-size: 16px;
line-height: 1.6;
}

.detail-richtext {
color: rgba(17, 24, 39, 0.78);
font-size: 16px;
line-height: 1.6;
}

.detail-richtext a {
text-decoration: underline;
text-underline-offset: 3px;
}

.facts {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}

@media (min-width: 760px) {
.facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.fact {
display: flex;
gap: 12px;
padding: 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(15, 23, 42, 0.08);
background: #f8fafc;
}

.fact__icon {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.12);
color: var(--accent);
display: grid;
place-items: center;
flex: 0 0 auto;
}

.fact__title {
margin: 0;
font-weight: 900;
font-size: 13px;
}

.fact__desc {
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}

.detail-media-grid {
margin-top: 14px;
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.detail-media-grid--bleed {
grid-template-columns: 1fr;
gap: 18px;
}

.detail-media-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-media-grid--large .detail-media img {
max-height: none;
}

.detail-media-grid--two {
gap: 18px;
}

@media (max-width: 640px) {
.detail-media-grid--two {
grid-template-columns: 1fr;
}
}

.detail-media {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
/* border: 1px solid rgba(15, 23, 42, 0.08);
background: #ffffff;
box-shadow: var(--shadow-sm); */
}

.detail-media img {
width: 100%;
height: auto;
max-height: 480px;
display: block;
object-fit: cover;
background: #ffffff;
}

.detail-media-grid--bleed .detail-media img {
max-height: none;
}

.detail-media--contain img {
object-fit: contain;
}

.detail-media figcaption {
padding: 10px 12px;
font-size: 12px;
color: var(--muted);
border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.detail-grid {
margin-top: 14px;
display: grid;
gap: 14px;
}

.detail-grid--cols-1 {
grid-template-columns: 1fr;
}

.detail-grid--cols-2 {
grid-template-columns: 1fr;
}

@media (min-width: 760px) {
.detail-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.detail-block {
border-radius: var(--radius-md);
border: 1px solid rgba(15, 23, 42, 0.08);
background: #ffffff;
padding: 18px;
}

.detail-block h4 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 900;
letter-spacing: -0.01em;
}

.detail-block p {
margin: 0;
color: rgba(17, 24, 39, 0.78);
font-size: 15px;
line-height: 1.6;
}

.detail-video {
margin-top: 14px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #0b1220;
box-shadow: var(--shadow-sm);
}

.detail-video video {
width: 100%;
height: auto;
display: block;
}

.detail-caption {
margin: 10px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}

.detail-quote {
border-left: 4px solid var(--accent);
background: #f9fafb;
}

.detail-quote__label {
margin: 0 0 10px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.detail-quote__text {
margin: 0;
font-size: 20px;
font-weight: 900;
line-height: 1.35;
color: var(--text);
font-style: italic;
}

.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tag {
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #f3f4f6;
color: rgba(17, 24, 39, 0.78);
font-weight: 800;
font-size: 12px;
}

.primary-btn {
margin-top: 16px;
width: 100%;
border: none;
border-radius: var(--radius-md);
padding: 14px 16px;
background: #0b1220;
color: #ffffff;
text-decoration: none;
font-weight: 900;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.25);
}

.primary-btn:hover {
background: #111827;
}

/* Match Screen */
.overlay--center {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}

.match {
width: min(440px, 100%);
text-align: center;
}

.match__icon {
width: 140px;
height: 140px;
margin: 0 auto 24px;
border-radius: 999px;
background: var(--accent);
color: #ffffff;
display: grid;
place-items: center;
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.25);
}

.match__title {
margin: 0 0 12px;
font-size: 44px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
font-style: italic;
}

.match__text {
margin: 0 0 18px;
color: rgba(17, 24, 39, 0.72);
font-size: 18px;
}

.match__actions {
display: grid;
gap: 12px;
}

.match__btn {
border: none;
border-radius: 999px;
padding: 14px 16px;
font-weight: 900;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.match__btn--accent {
background: var(--accent);
color: #ffffff;
}

.match__btn--accent:hover {
filter: brightness(0.95);
}

.match__link {
background: none;
border: none;
padding: 10px 0 0;
color: rgba(15, 23, 42, 0.55);
text-decoration: underline;
cursor: pointer;
font-weight: 700;
}

.animate-bounce-slow {
animation: bounce 2s infinite;
}

@keyframes bounce {

0%,
100% {
transform: translateY(-5%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}

50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}

/* Footer Note */
.end-note {
margin: 44px 0 0;
text-align: center;
color: rgba(15, 23, 42, 0.35);
font-style: italic;
font-weight: 600;
}

.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 clamp(18px, 6vw, 72px);
width: 100%;
}

.site-footer--inline {
background: #f9fafb;
}

.site-footer--inline .footer-inner {
padding: 20px clamp(18px, 6vw, 72px);
align-items: center;
}