/* ===========================================================
   Akanji Sounds — main.css
   Dark, cinematic one-page theme
   =========================================================== */

:root {
	--ak-bg: #080808;
	--ak-bg-2: #0e0e0e;
	--ak-fg: #f8f4f0;
	--ak-muted: #6b6560;
	--ak-primary: 45 86% 56%;       /* #f0c130 yellow */
	--ak-primary-hex: #f0c130;
	--ak-secondary: #c0392b;
	--ak-border: rgba(248, 244, 240, 0.1);
	--ak-radius: 30px;
	--ak-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ak-shadow-glow: 0 10px 40px -12px hsl(var(--ak-primary) / 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
	margin: 0;
	background: var(--ak-bg);
	color: var(--ak-fg);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100%;
	width: 100%;
	position: relative;
}
/* Belt-and-suspenders: stop any descendant from forcing horizontal scroll */
#page, main, .ak-section, .ak-hero, .ak-footer { max-width: 100vw; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

/* Hide native cursor on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
	body, a, button, input, textarea, select, [role="button"] { cursor: none; }
}

/* Yellow scrollbar */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--ak-bg); }
::-webkit-scrollbar-thumb { background: var(--ak-primary-hex); }
::selection { background: var(--ak-primary-hex); color: #080808; }

/* Film grain */
body.grain::after {
	content: '';
	position: fixed; inset: 0;
	pointer-events: none; z-index: 100;
	opacity: 0.06;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	mix-blend-mode: overlay;
}

/* Layout */
.ak-container { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .ak-container { padding: 0 1.5rem; } }
.ak-section { position: relative; padding: 72px 0; overflow: hidden; background: var(--ak-bg); }
@media (min-width: 640px) { .ak-section { padding: 96px 0; } }
@media (min-width: 768px) { .ak-section { padding: 120px 0; } }

/* Type helpers */
.ak-text-white { color: var(--ak-fg); }
.ak-text-yellow { color: var(--ak-primary-hex); }
.ak-muted { color: var(--ak-muted); }
.ak-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.ak-display { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; margin: 0; }
.ak-h-xl { font-size: clamp(2.6rem, 6vw, 5rem); }
.ak-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.3em; margin: 0; }

.ak-watermark {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	pointer-events: none;
	user-select: none;
	color: transparent;
	-webkit-text-stroke: 1px rgba(248, 244, 240, 0.06);
	text-transform: uppercase;
	line-height: 1;
	max-width: 100vw;
	overflow: hidden;
}

/* Buttons */
.ak-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	padding: 14px 28px;
	border-radius: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: all .3s var(--ak-ease);
	will-change: transform;
}
.ak-btn-yellow { background: var(--ak-primary-hex); color: #080808; }
.ak-btn-yellow:hover { transform: translateY(-2px); box-shadow: var(--ak-shadow-glow); }
.ak-btn-ghost { background: transparent; border-color: rgba(248,244,240,.7); color: var(--ak-fg); }
.ak-btn-ghost:hover { border-color: var(--ak-primary-hex); color: var(--ak-primary-hex); transform: translateY(-2px); }
.ak-btn-ghost-yellow { background: transparent; border-color: var(--ak-primary-hex); color: var(--ak-fg); }
.ak-btn-ghost-yellow:hover { background: var(--ak-primary-hex); color: #080808; }

/* ============ Header ============ */
.ak-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 50;
	transition: background .4s var(--ak-ease), backdrop-filter .4s var(--ak-ease), border-color .4s var(--ak-ease);
	border-bottom: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}
/* WordPress admin bar offset (only when logged-in & admin bar is showing) */
.admin-bar .ak-header { top: 32px; }
.admin-bar .ak-mobile { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .ak-header { top: 46px; }
	.admin-bar .ak-mobile { top: 46px; }
}
@media (max-width: 600px) {
	/* WP hides admin bar at <600px on small screens, but if visible it overlaps */
	.admin-bar .ak-header { top: 0; }
	.admin-bar .ak-mobile { top: 0; }
}
/* Mobile: keep header always visible with subtle background so it stays readable when sticky */
@media (max-width: 767px) {
	.ak-header { background: rgba(8,8,8,.92); backdrop-filter: blur(12px); border-bottom-color: var(--ak-border); }
}
.ak-header.scrolled { background: rgba(8,8,8,.9); backdrop-filter: blur(12px); border-bottom-color: var(--ak-border); }
.ak-header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
@media (min-width: 768px) { .ak-header-inner { height: 96px; } }
.ak-logo { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.25rem; letter-spacing: -0.02em; text-transform: uppercase; }
.ak-logo-dot { color: var(--ak-primary-hex); }
.ak-nav { display: none; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .ak-nav { display: flex; } }
.ak-nav-link {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--ak-fg);
	transition: color .3s;
}
.ak-nav-link::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
	background: var(--ak-primary-hex);
	transform: scaleX(0); transform-origin: left;
	transition: transform .4s var(--ak-ease);
}
.ak-nav-link:hover, .ak-nav-link.active { color: var(--ak-primary-hex); }
.ak-nav-link:hover::after, .ak-nav-link.active::after { transform: scaleX(1); }
.ak-book { display: none; }
@media (min-width: 768px) { .ak-book { display: inline-flex; } }
.ak-burger { display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(248,244,240,.4); border-radius: 9999px; }
.ak-burger span { width: 18px; height: 2px; background: var(--ak-fg); }
@media (min-width: 768px) { .ak-burger { display: none; } }

/* Mobile menu */
.ak-mobile { position: fixed; inset: 0; z-index: 60; background: var(--ak-bg); opacity: 0; pointer-events: none; transition: opacity .4s var(--ak-ease); overflow-y: auto; }
.ak-mobile.open { opacity: 1; pointer-events: auto; }
.ak-mobile-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.ak-mobile-close { font-size: 2rem; line-height: 1; width: 44px; height: 44px; border: 1px solid rgba(248,244,240,.4); border-radius: 9999px; }
.ak-mobile-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); padding: 2rem 1rem; }
.ak-mobile-nav a { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ak-fg); }
.ak-mobile-nav a:hover { color: var(--ak-primary-hex); }
/* Lock body scroll when mobile menu is open */
body.ak-no-scroll { overflow: hidden; }

/* ============ Hero ============ */
.ak-hero { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: var(--ak-bg); }
.ak-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ak-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: ak-fade-in 1s ease-out both; }
@media (min-width: 1024px) {
	.ak-hero-bg { left: 42%; }
}
.ak-hero-fade-x { position: absolute; inset: 0; background: linear-gradient(to right, #080808 0%, rgba(8,8,8,.8) 30%, transparent 80%); }
@media (min-width: 1024px) {
	.ak-hero-fade-x { background: linear-gradient(to right, #080808 0%, rgba(8,8,8,.4) 30%, transparent 60%); }
}
.ak-hero-fade-y { position: absolute; inset: 0; background: linear-gradient(to top, #080808 0%, transparent 40%, rgba(8,8,8,.4) 100%); }
.ak-hero-num { font-size: 22vw; line-height: 1; top: 5vh; left: 2vw; }
@media (min-width: 1024px) { .ak-hero-num { font-size: 20vw; } }

.ak-hero-inner { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 7rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .ak-hero-inner { padding-top: 8rem; padding-bottom: 8rem; } }
.ak-hero-copy { max-width: 640px; }
.ak-hero-title { font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: .88; letter-spacing: -0.02em; text-transform: uppercase; margin: 24px 0 0; }
.ak-hero-title span { display: block; font-size: clamp(2.75rem, 12vw, 8rem); word-break: break-word; }
.ak-hero-sub { font-size: clamp(1.125rem, 3vw, 1.875rem); margin-top: 1.5rem; color: rgba(248,244,240,.85); }

.ak-featured { margin-top: 2rem; max-width: 28rem; display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.25rem 0.875rem 0.875rem; border: 1px solid var(--ak-border); border-radius: 24px; background: rgba(14,14,14,.8); backdrop-filter: blur(12px); }
@media (min-width: 640px) { .ak-featured { gap: 1.25rem; padding: 1rem 1.5rem 1rem 1rem; margin-top: 2.5rem; } }
.ak-featured-play { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: var(--ak-primary-hex); color: #080808; }
@media (min-width: 640px) { .ak-featured-play { width: 64px; height: 64px; } }
.ak-featured-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ak-spin-ring { position: absolute; inset: -6px; border-radius: 9999px; border: 2px dashed hsl(var(--ak-primary) / .6); animation: ak-spin 8s linear infinite; }
@keyframes ak-spin { to { transform: rotate(360deg); } }
.ak-featured-text { min-width: 0; flex: 1; }
.ak-featured-tag { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ak-primary-hex); margin: 0 0 4px; }
.ak-featured-title { font-size: 1.25rem; margin: 0; color: var(--ak-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .ak-featured-title { font-size: 1.5rem; } }
.ak-featured-genre { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ak-muted); margin: 4px 0 0; font-weight: 700; }

.ak-hero-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.ak-hero-stats { display: none; }
@media (min-width: 1024px) {
	.ak-hero-stats { display: flex; flex-direction: column; gap: 1rem; position: absolute; right: 3rem; bottom: 6rem; z-index: 10; }
}
.ak-stat-pill { display: flex; align-items: center; gap: 1rem; border-radius: 9999px; background: rgba(8,8,8,.8); backdrop-filter: blur(12px); border: 1px solid var(--ak-border); padding: 1rem 1.5rem; }
.ak-stat-n { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.875rem; color: var(--ak-primary-hex); }
.ak-stat-l { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(248,244,240,.85); }

.ak-scroll-indicator { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--ak-muted); }
.ak-scroll-line { display: block; height: 48px; width: 1px; background: var(--ak-primary-hex); animation: ak-scroll 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes ak-scroll { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============ About ============ */
.ak-about-mark { font-size: 26vw; line-height: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
@media (min-width: 768px) { .ak-about-mark { font-size: 28vw; } }
@media (min-width: 1024px) { .ak-about-mark { font-size: 24vw; } }
.ak-about-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .ak-about-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.ak-about-media { position: relative; max-width: 28rem; margin: 0 auto; padding: 24px 0 0 24px; }
@media (min-width: 1024px) { .ak-about-media { max-width: none; } }
.ak-about-frame { position: absolute; top: 0; left: 0; width: calc(100% - 24px); height: calc(100% - 24px); border: 1px solid hsl(var(--ak-primary) / .4); border-radius: 4px; pointer-events: none; }
.ak-about-img-wrap { position: relative; overflow: hidden; border-radius: 4px; }
.ak-about-img-wrap img { width: 100%; height: 420px; object-fit: cover; }
@media (min-width: 640px) { .ak-about-img-wrap img { height: 520px; } }
@media (min-width: 768px) { .ak-about-img-wrap img { height: 640px; } }
.ak-about-img-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; background: linear-gradient(to top, hsl(var(--ak-primary) / .7), hsl(var(--ak-primary) / .2), transparent); mix-blend-mode: multiply; }
.ak-quote-card { position: absolute; bottom: -2rem; left: 0; right: auto; max-width: calc(100% - 1rem); width: 18rem; background: var(--ak-bg-2); border-left: 4px solid var(--ak-primary-hex); border-radius: 4px; padding: 1rem 1.25rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
@media (min-width: 768px) { .ak-quote-card { left: -3rem; width: 20rem; padding: 1.25rem 1.5rem; bottom: -2.5rem; } }
.ak-quote-card .ak-italic { font-size: 1.125rem; line-height: 1.3; margin: 0; color: var(--ak-fg); }
@media (min-width: 768px) { .ak-quote-card .ak-italic { font-size: 1.25rem; } }
.ak-quote-card .ak-eyebrow { margin-top: 0.75rem; font-size: 10px; }

.ak-about-bio { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 36rem; color: rgba(248,244,240,.75); font-weight: 300; line-height: 1.7; }
.ak-about-bio p { margin: 0; }
.ak-about-stats { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 36rem; }
.ak-about-stat { border-top: 1px solid var(--ak-border); padding-top: 1.25rem; }
.ak-stat-num { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(2.25rem, 4vw, 3rem); color: var(--ak-primary-hex); margin: 0; }
.ak-about-copy .ak-eyebrow { margin-bottom: 1.5rem; }
.ak-about-copy h2 { margin-top: 0; }

/* ============ Music / Tracks ============ */
.ak-music-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .ak-music-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.ak-music-head .ak-eyebrow { margin-bottom: 1.25rem; }
.ak-music-sub { font-size: 1.25rem; max-width: 24rem; color: rgba(248,244,240,.7); margin: 0; }

.ak-tracks { border-top: 1px solid rgba(248,244,240,.1); }
.ak-track { position: relative; border-bottom: 1px solid rgba(248,244,240,.1); transition: background-color .3s; }
.ak-track-bleed { position: absolute; inset: 0; background: hsl(var(--ak-primary) / .07); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ak-track:hover .ak-track-bleed { opacity: 1; }
.ak-track.is-active .ak-track-bleed { opacity: 1; background: hsl(var(--ak-primary) / .1); }

.ak-track-row { position: relative; width: 100%; text-align: left; padding: 0; }
.ak-track-inner { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1rem; }
@media (min-width: 640px) { .ak-track-inner { gap: 1.5rem; padding: 1.75rem 1.5rem; } }
@media (min-width: 768px) { .ak-track-inner { gap: 2.5rem; padding: 2.25rem 1.5rem; } }
.ak-track-num { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.125rem; font-variant-numeric: tabular-nums; width: 1.75rem; flex-shrink: 0; color: var(--ak-muted); transition: color .3s; }
@media (min-width: 640px) { .ak-track-num { font-size: 1.5rem; width: 2.5rem; } }
@media (min-width: 768px) { .ak-track-num { font-size: 1.875rem; } }
.ak-track:hover .ak-track-num { color: var(--ak-primary-hex); }
.ak-track.is-active .ak-track-num { color: var(--ak-primary-hex); }
.ak-track-meta { flex: 1; min-width: 0; }
.ak-track-title { font-size: 1.125rem; margin: 0; color: var(--ak-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
@media (min-width: 640px) { .ak-track-title { font-size: 1.5rem; } }
@media (min-width: 768px) { .ak-track-title { font-size: 1.875rem; } }
.ak-track:hover .ak-track-title { color: var(--ak-primary-hex); }
.ak-track.is-active .ak-track-title { color: var(--ak-primary-hex); }
.ak-track-genre { margin-top: 6px; font-size: 10px; }
.ak-track-duration { display: none; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ak-muted); font-weight: 500; }
@media (min-width: 640px) { .ak-track-duration { display: inline; } }
.ak-track.is-active .ak-track-duration { color: var(--ak-primary-hex); }
.ak-track-play-btn { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9999px; border: 1px solid hsl(var(--ak-primary) / .7); color: var(--ak-primary-hex); transition: all .3s; }
@media (min-width: 640px) { .ak-track-play-btn { width: 48px; height: 48px; } }
@media (min-width: 768px) { .ak-track-play-btn { width: 56px; height: 56px; } }
.ak-track-play-btn svg { width: 16px; height: 16px; margin-left: 2px; }
.ak-track:hover .ak-track-play-btn { background: var(--ak-primary-hex); color: #080808; }
.ak-track.is-active .ak-track-play-btn { background: var(--ak-primary-hex); color: #080808; border-color: var(--ak-primary-hex); }
.ak-track.is-active .ak-track-play-btn .ak-i-play { display: none; }
.ak-track.is-active.is-playing .ak-track-play-btn .ak-i-play { display: none; }
.ak-track.is-active.is-playing .ak-track-play-btn .ak-i-pause { display: block !important; }

/* ============ Contact ============ */
.ak-contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .ak-contact-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.ak-contact-desc { margin-top: 1.5rem; max-width: 28rem; color: rgba(248,244,240,.7); font-weight: 300; line-height: 1.7; }
.ak-contact-details { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem; }
.ak-contact-row { display: flex; align-items: center; gap: 1.25rem; }
.ak-contact-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px; border: 1px solid hsl(var(--ak-primary) / .6); color: var(--ak-primary-hex); }
.ak-contact-icon svg { width: 20px; height: 20px; }
.ak-contact-value { color: var(--ak-fg); margin: 4px 0 0; }
.ak-contact-value a { color: var(--ak-fg); }
.ak-contact-value a:hover { color: var(--ak-primary-hex); }
.ak-contact-socials { margin-top: 2.5rem; max-width: 28rem; }
.ak-contact-socials-label { margin: 0 0 1rem; }
.ak-contact-socials-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ak-contact-socials-row .ak-social { width: 44px; height: 44px; }

.ak-form { border-radius: 24px; border: 1px solid var(--ak-border); background: var(--ak-bg-2); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .ak-form { padding: 2.5rem; } }
.ak-form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ak-form-row { grid-template-columns: 1fr 1fr; } }
.ak-input { width: 100%; background: rgba(8,8,8,.6); border: 1px solid var(--ak-border); border-radius: 16px; padding: 16px 20px; color: var(--ak-fg); font-family: 'Montserrat', sans-serif; font-size: 14px; transition: all .3s; }
.ak-input::placeholder { color: var(--ak-muted); }
.ak-input:focus { outline: none; border-color: var(--ak-primary-hex); box-shadow: 0 0 0 3px hsl(var(--ak-primary) / .15); }
.ak-textarea { min-height: 160px; resize: vertical; font-family: 'Montserrat', sans-serif; }
select.ak-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ak-primary-hex) 50%), linear-gradient(135deg, var(--ak-primary-hex) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.ak-form-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ak-form-status { margin: 0; font-size: 13px; color: var(--ak-muted); }
.ak-form-status.success { color: var(--ak-primary-hex); }
.ak-form-status.error { color: var(--ak-secondary); }

/* ============ Footer ============ */
.ak-footer { position: relative; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top: -2rem; background-size: cover; background-position: center; padding-top: 60px; }
@media (min-width: 768px) { .ak-footer { clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); margin-top: -3rem; padding-top: 80px; } }
.ak-footer-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--ak-bg) 0%, rgba(8,8,8,.85) 60%, rgba(8,8,8,.7) 100%); }
.ak-footer-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, hsl(var(--ak-primary) / .18), transparent 60%); }
.ak-footer-inner { position: relative; padding-top: 6rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .ak-footer-inner { padding-top: 10rem; } }
.ak-footer-title { text-align: center; max-width: 64rem; margin: 0 auto; }
.ak-footer-title h3 { font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: .9; letter-spacing: -0.02em; text-transform: uppercase; font-size: clamp(2.5rem, 12vw, 9rem); margin: 0; }
.ak-footer-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: var(--ak-muted); margin: 1rem 0 0; }
.ak-socials { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.ak-social { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 9999px; border: 1px solid rgba(107,101,96,.4); color: var(--ak-muted); transition: all .3s; }
.ak-social svg { width: 16px; height: 16px; }
.ak-social:hover { color: var(--ak-primary-hex); border-color: var(--ak-primary-hex); transform: translateY(-4px); }
.ak-footer-bottom { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(248,244,240,.06); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; }
@media (min-width: 768px) { .ak-footer-bottom { flex-direction: row; } }
.ak-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .ak-footer-nav { gap: 2rem; } }
.ak-footer-nav a { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ak-muted); transition: color .3s; }
.ak-footer-nav a:hover { color: var(--ak-primary-hex); }
.ak-copyright { font-size: 12px; color: var(--ak-muted); margin: 0; }

/* ============ Audio bar ============ */
.ak-audio-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; transform: translateY(120%); transition: transform .5s var(--ak-ease); pointer-events: none; }
.ak-audio-bar.visible { transform: translateY(0); pointer-events: auto; }
.ak-audio-inner { max-width: 1400px; margin: 0 auto 1rem; padding: 0 1rem; }
@media (min-width: 640px) { .ak-audio-inner { padding: 0 1.5rem; margin-bottom: 1.25rem; } }
.ak-audio-bar > .ak-audio-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: center; border-radius: 9999px; border: 1px solid var(--ak-border); background: rgba(8,8,8,.7); backdrop-filter: blur(20px); box-shadow: 0 20px 60px -20px rgba(0,0,0,.9); padding: 12px 16px; }
@media (min-width: 640px) { .ak-audio-bar > .ak-audio-inner { gap: 1.5rem; padding: 12px 24px; } }
.ak-audio-info { min-width: 0; }
.ak-audio-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1rem; color: var(--ak-fg); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .ak-audio-title { font-size: 1.125rem; } }
.ak-audio-genre { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ak-muted); margin: 2px 0 0; }
.ak-audio-controls { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .ak-audio-controls { gap: 0.75rem; } }
.ak-audio-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9999px; color: rgba(248,244,240,.8); transition: color .3s; }
.ak-audio-btn svg { width: 16px; height: 16px; }
.ak-audio-btn:hover { color: var(--ak-primary-hex); }
.ak-audio-play { width: 44px; height: 44px; background: var(--ak-primary-hex); color: #080808; transition: transform .2s; }
.ak-audio-play:hover { transform: scale(1.05); color: #080808; }
.ak-audio-progress { display: none; align-items: center; gap: 0.75rem; min-width: 0; }
@media (min-width: 640px) { .ak-audio-progress { display: flex; } }
.ak-audio-progress span { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--ak-muted); }
.ak-audio-bar-track { flex: 1; height: 4px; border-radius: 9999px; background: rgba(248,244,240,.1); overflow: hidden; cursor: pointer; }
.ak-audio-bar-fill { height: 100%; width: 0%; background: var(--ak-primary-hex); transition: width .3s; }
.ak-audio-close { width: 32px; height: 32px; border-radius: 9999px; color: var(--ak-muted); font-size: 1.25rem; line-height: 1; }
.ak-audio-close:hover { color: var(--ak-primary-hex); }

/* Mobile audio: use playing icon swap */
.ak-audio-bar.is-playing .ak-audio-play .ak-i-play { display: none; }
.ak-audio-bar.is-playing .ak-audio-play .ak-i-pause { display: block !important; }

/* ============ Cursor ============ */
.ak-cursor-dot, .ak-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200; will-change: transform; }
.ak-cursor-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--ak-primary-hex); }
.ak-cursor-ring { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgba(248,244,240,.4); transition: transform .2s ease-out, border-color .2s, scale .2s; }
.ak-cursor-ring.hovered { scale: 2; border-color: var(--ak-primary-hex); }
@media (hover: none) {
	.ak-cursor-dot, .ak-cursor-ring { display: none; }
}

/* ============ Animations / Reveals ============ */
.ak-reveal, .ak-reveal-left, .ak-reveal-right { opacity: 0; transition: opacity 1s var(--ak-ease), transform 1s var(--ak-ease); }
.ak-reveal { transform: translateY(40px); }
.ak-reveal-left { transform: translateX(-40px); }
.ak-reveal-right { transform: translateX(40px); }
.ak-reveal.in, .ak-reveal-left.in, .ak-reveal-right.in { opacity: 1; transform: none; }

.ak-fade-up { opacity: 0; transform: translateY(30px); animation: ak-fade-up .9s var(--ak-ease) both; animation-delay: var(--d, 0ms); }
@keyframes ak-fade-up { to { opacity: 1; transform: none; } }
@keyframes ak-fade-in { from { opacity: 0; } to { opacity: 1; } }