/* =========================================================
   PROEDITORS — landing in Relacord-inspired dark glass style
   ========================================================= */

:root{
  --bg:#050507;
  --bg-soft:#08080d;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --surface-3:rgba(255,255,255,.11);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.2);
  --text:#f5f6ff;
  --muted:#a2a5bd;
  --muted-2:#777b96;
  --accent:#4c5bff;
  --accent-2:#8b5cff;
  --accent-3:#5ce1ff;
  --accent-soft:rgba(76,91,255,.16);
  --success:#7ee2a8;
  --error:#ff7b8a;
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-pill:999px;
  --container:1180px;
  --font-display:"Unbounded","Manrope",system-ui,sans-serif;
  --font-body:"Manrope","Helvetica Neue",Arial,sans-serif;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(76,91,255,.22), transparent 60%),
    radial-gradient(900px 600px at 0% 20%, rgba(139,92,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  font:16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.menu-open{overflow:hidden}

::selection{background:var(--accent);color:#fff}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- ambient background ---------- */

.page-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
}

.page-noise{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.14;
  background-image:
    radial-gradient(rgba(255,255,255,.16) .5px, transparent .6px),
    radial-gradient(rgba(255,255,255,.09) .5px, transparent .6px);
  background-size:7px 7px, 11px 11px;
  background-position:0 0, 3px 5px;
}

.stars{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.star{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 6px rgba(255,255,255,.35);
  opacity:.15;
  animation:twinkle var(--dur,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}

.star.blue{
  background:#8e96ff;
  box-shadow:0 0 8px rgba(76,91,255,.85);
}

@keyframes twinkle{
  0%,100%{opacity:.12;transform:scale(.8)}
  50%{opacity:.9;transform:scale(1.25)}
}

/* ---------- header / nav ---------- */

.site-header{
  position:fixed;
  top:18px;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  justify-content:center;
  padding:0 18px;
}

.nav{
  width:100%;
  max-width:1080px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:9px 10px 9px 22px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:rgba(6,6,11,.76);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:none;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.brand-mark{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(140deg, var(--accent), #2932b8);
  box-shadow:0 0 24px rgba(76,91,255,.45);
  font-size:10px;
  line-height:1;
  padding-left:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:8px;
  font-size:13px;
  font-weight:600;
  color:#d9dbea;
}

.nav-links a{
  position:relative;
  padding:8px 0;
  transition:color .2s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.menu-toggle{
  display:none;
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text);
  padding:11px 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

.mobile-menu{
  position:fixed;
  top:84px;
  left:18px;
  right:18px;
  z-index:59;
  display:none;
  flex-direction:column;
  gap:4px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(7,7,13,.94);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.mobile-menu.is-open{display:flex}

.mobile-menu a{
  padding:13px 14px;
  border-radius:12px;
  color:#dfe1ee;
  font-size:15px;
  font-weight:600;
}

.mobile-menu a:hover{background:var(--surface)}

.mobile-menu .mobile-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  background:linear-gradient(180deg,#fff,#dfe2ff);
  color:#14142a;
  box-shadow:0 10px 30px rgba(76,91,255,.28);
}

.btn-primary:hover{
  box-shadow:0 16px 40px rgba(76,91,255,.42);
}

.btn-glass{
  border-color:var(--border);
  background:rgba(255,255,255,.055);
  color:var(--text);
  backdrop-filter:blur(10px);
}

.btn-glass:hover{
  border-color:var(--border-strong);
  background:rgba(255,255,255,.1);
}

.btn-accent{
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 32px rgba(76,91,255,.4);
}

.btn-accent:hover{background:#5c69ff}

.btn-small{
  min-height:38px;
  padding:0 16px;
  font-size:12px;
}

.btn-large{
  min-height:56px;
  padding:0 28px;
  font-size:15px;
}

.btn .btn-arrow{
  font-size:15px;
  line-height:1;
  transition:transform .2s ease;
}

.btn:hover .btn-arrow{transform:translate(2px,-2px)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  padding:158px 0 88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  right:-260px;
  top:-260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,91,255,.28), rgba(139,92,255,.08) 42%, transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  left:-300px;
  bottom:-320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(92,225,255,.1), transparent 65%);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:56px;
  align-items:center;
}

.eyebrow{
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#aeb3ff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.hero h1{
  margin:24px 0 0;
  max-width:760px;
  font-family:var(--font-display);
  font-size:clamp(3rem,7.2vw,6.4rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-wrap:balance;
}

.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#9aa4ff 0%,#5c6bff 45%,#8b5cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 42px rgba(76,91,255,.38);
}

.hero-lead{
  max-width:590px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:36px;
}

.hero-note{
  margin:24px 0 0;
  color:var(--muted-2);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* hero visual */

.hero-visual{
  position:relative;
  min-height:540px;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.hero-visual .visual-glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,91,255,.34), rgba(139,92,255,.12) 45%, transparent 70%);
  filter:blur(20px);
  z-index:-1;
}

.visual-ring{
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  transform:rotate(-18deg) scaleY(.55);
  box-shadow:0 0 80px rgba(76,91,255,.12);
}

.visual-ring::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(from 20deg, transparent 0 62%, rgba(92,225,255,.7) 72%, transparent 82%);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  animation:spin 18s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.glass-card{
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow:
    0 30px 70px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.timeline-card{
  position:relative;
  width:min(100%,470px);
  padding:20px;
  border-radius:26px;
  transform:rotate(-4deg);
  animation:float 9s ease-in-out infinite;
}

.preview-card{
  position:relative;
  width:min(100%,470px);
  padding:18px;
  border-radius:28px;
  transform:rotate(-3deg);
  animation:float 9s ease-in-out infinite;
}

.preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.preview-frame{
  position:relative;
  margin-top:14px;
  aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden;
  background:#0a0a16;
  pointer-events:none;
  user-select:none;
}

.preview-art{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(92,225,255,.55), transparent 34%),
    radial-gradient(circle at 30% 70%, rgba(139,92,255,.7), transparent 42%),
    linear-gradient(140deg,#10102a,#15113a 48%,#090913);
  box-shadow:inset 0 -120px 120px rgba(0,0,0,.42);
}

.preview-art::before{
  content:"";
  position:absolute;
  width:160%;
  height:160%;
  left:-30%;
  top:-30%;
  background:conic-gradient(from 40deg, transparent 0 35%, rgba(255,255,255,.18) 45%, transparent 55% 100%);
  filter:blur(10px);
  opacity:.55;
}

.preview-art::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 55% 45%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 55% 45%, #000, transparent 75%);
  opacity:.35;
}

.preview-badge{
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05);
  color:#c9cdf0;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.preview-cat{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill);
  background:rgba(5,5,10,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#eef0ff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.preview-stamp{
  position:absolute;
  right:16px;
  top:16px;
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  background:rgba(5,5,10,.28);
  color:#fff;
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
}

.preview-title{
  position:absolute;
  left:18px;
  bottom:54px;
  z-index:2;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.4vw,3.25rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 8px 34px rgba(0,0,0,.45);
}

.preview-title em{
  display:block;
  font-style:normal;
  background:linear-gradient(100deg,#fff 0%,#aeb4ff 55%,#8b5cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.preview-meta{
  position:absolute;
  left:16px;
  right:16px;
  bottom:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.preview-meta b{
  font-size:12px;
  line-height:1.2;
}

.preview-meta span{
  color:rgba(255,255,255,.68);
  font-size:10px;
}

.progress{
  position:absolute;
  left:16px;
  right:16px;
  bottom:9px;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.progress span{
  display:block;
  width:62%;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}


.sound-card{
  position:absolute;
  left:-8px;
  bottom:100px;
  width:214px;
  padding:14px;
  border-radius:18px;
  transform:rotate(5deg);
  animation:float 7s ease-in-out infinite reverse;
}

.sound-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sound-top span{
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.sound-top span:last-child{
  color:var(--muted-2);
  letter-spacing:.08em;
}

.sound-card .wave{
  height:30px;
  margin-top:10px;
  opacity:.9;
}

.timeline-card .card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.timeline-card .live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 14px var(--success);
}

.timeline{
  display:flex;
  gap:6px;
  margin-top:18px;
  height:96px;
}

.timeline .clip{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,rgba(76,91,255,.62),rgba(76,91,255,.2));
  overflow:hidden;
}

.timeline .clip:nth-child(2){background:linear-gradient(160deg,rgba(139,92,255,.62),rgba(139,92,255,.18))}
.timeline .clip:nth-child(3){flex:1.7;background:linear-gradient(160deg,rgba(92,225,255,.34),rgba(76,91,255,.25))}
.timeline .clip:nth-child(4){background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}

.timeline .clip span:first-child{
  color:rgba(255,255,255,.7);
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
}

.timeline .clip span:last-child{
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1.25;
}

.wave{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:38px;
  margin-top:16px;
  opacity:.75;
}

.wave i{
  flex:1;
  height:var(--h,20%);
  border-radius:3px;
  background:linear-gradient(180deg,var(--accent-3),var(--accent));
  animation:wave 1.4s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}

@keyframes wave{
  from{transform:scaleY(.55)}
  to{transform:scaleY(1)}
}

.play-card{
  position:absolute;
  left:-8px;
  bottom:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px 12px 12px;
  border-radius:18px;
  transform:rotate(5deg);
  animation:float 7s ease-in-out infinite reverse;
}

.play-card .play{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(140deg,#fff,#cfd4ff);
  color:#1a1a35;
  font-size:12px;
  padding-left:2px;
  box-shadow:0 0 26px rgba(76,91,255,.4);
}

.play-card b{
  display:block;
  font-size:12px;
  line-height:1.2;
}

.play-card span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.format-badge{
  position:absolute;
  top:40px;
  right:-4px;
  padding:12px 16px;
  border-radius:16px;
  transform:rotate(4deg);
  animation:float 8s ease-in-out infinite 1.2s;
}

.format-badge b{
  display:block;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:-.02em;
}

.format-badge span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@keyframes float{
  0%,100%{translate:0 0}
  50%{translate:0 -14px}
}

/* ---------- marquee ---------- */

.marquee{
  position:relative;
  z-index:2;
  margin-top:64px;
  padding:18px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 26s linear infinite;
}

.marquee-group{
  display:flex;
  flex-shrink:0;
  gap:48px;
  padding-right:48px;
}

.marquee span{
  display:inline-flex;
  align-items:center;
  gap:48px;
  color:#b9bce0;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

.marquee span::after{
  content:"✦";
  color:var(--accent);
  font-size:14px;
}

@keyframes marquee{
  to{transform:translateX(-50%)}
}

/* ---------- sections ---------- */

.section{
  position:relative;
  padding:112px 0;
  scroll-margin-top:110px;
}

#authors{padding-bottom:72px}
#works{padding-top:72px;padding-bottom:72px}
#formats{padding-top:72px}

.section-head{
  max-width:840px;
  margin-bottom:48px;
}

.section h2{
  margin:18px 0 0;
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,4.3rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-wrap:balance;
}

.section-sub{
  max-width:600px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

/* ---------- formats ---------- */

.formats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.format-card{
  position:relative;
  min-height:270px;
  padding:26px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .28s ease, border-color .28s ease, background .28s ease;
}

.format-card::before{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  right:-90px;
  top:-100px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,91,255,.22), transparent 65%);
  opacity:.7;
  transition:opacity .3s ease;
}

.format-card:hover{
  transform:translateY(-5px);
  border-color:rgba(120,130,255,.4);
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
}

.format-card:hover::before{opacity:1}

.format-num{
  color:var(--muted-2);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

.format-icon{
  width:48px;
  height:48px;
  margin-top:22px;
  color:#aeb4ff;
}

.format-card h3{
  margin:22px 0 0;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.format-card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* ---------- works: authors ---------- */

.authors-panel{
  position:relative;
  margin-bottom:0;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(620px 180px at 8% 0%, rgba(92,225,255,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  overflow:hidden;
  isolation:isolate;
}

.authors-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0 55%, rgba(76,91,255,.08) 55.2%, transparent 55.4%),
    radial-gradient(circle at 88% 18%, rgba(139,92,255,.14), transparent 38%);
  pointer-events:none;
}

.authors-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.authors-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:#b7bbdd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.authors-kicker::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 14px rgba(92,225,255,.85);
}

.authors-hint{
  color:var(--muted-2);
  font-size:10px;
  letter-spacing:.08em;
}

.authors-list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.author-card{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:11px 13px 11px 11px;
  border:1px solid transparent;
  border-radius:18px;
  background:rgba(0,0,0,.16);
  transition:transform .32s var(--eo), background .25s ease, border-color .25s ease;
}

.author-card:hover{
  transform:translateY(-3px);
  border-color:rgba(130,142,255,.3);
  background:rgba(255,255,255,.055);
}

@media (prefers-reduced-motion:no-preference){
  html.motion-ready .authors-panel .author-card{
    opacity:0;
    translate:0 16px;
    scale:.97;
  }

  html.motion-ready .authors-panel.is-visible .author-card{
    animation:author-card-in .65s var(--eo) both;
  }

  html.motion-ready .authors-panel.is-visible .author-card:nth-child(1){animation-delay:.08s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(2){animation-delay:.14s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(3){animation-delay:.2s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(4){animation-delay:.26s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(5){animation-delay:.32s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(6){animation-delay:.38s}
  html.motion-ready .authors-panel.is-visible .author-card:nth-child(7){animation-delay:.44s}

  @keyframes author-card-in{
    from{opacity:0;translate:0 16px;scale:.97}
    to{opacity:1;translate:none;scale:1}
  }
}

.author-avatar{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.4), transparent 38%),
    linear-gradient(145deg,var(--av-a,#5ce1ff),var(--av-b,#4c5bff));
  box-shadow:
    0 10px 24px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.24);
  transition:transform .35s var(--eo);
}

.author-avatar::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(255,255,255,.14);
  border-top-color:var(--av-a);
  border-left-color:var(--av-b);
  border-radius:50%;
  opacity:.72;
  rotate:-28deg;
  transition:rotate .55s var(--eo), opacity .3s ease;
}

.author-avatar::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
}

.author-card:hover .author-avatar{transform:scale(1.05)}
.author-card:hover .author-avatar::before{rotate:94deg;opacity:1}

.author-photo{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

.author-badge{
  position:absolute;
  right:-3px;
  bottom:-2px;
  z-index:3;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:2px solid #0a0a12;
  border-radius:50%;
  background:#fff;
  color:#15152b;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}

.author-badge .icon{width:8px;height:8px;margin-left:1px}

.author-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

.author-copy b{
  color:#f2f3ff;
  font-size:15px;
  font-weight:700;
  line-height:1.15;
}

.author-copy small{
  color:var(--muted-2);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.author-link-icon{
  flex:none;
  width:30px;
  height:30px;
  margin-left:auto;
  padding:8px;
  border:1px solid transparent;
  border-radius:50%;
  color:var(--muted);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}

.author-card:hover .author-link-icon{
  border-color:rgba(120,130,255,.4);
  background:var(--accent);
  color:#fff;
}

/* ---------- works: carousel ---------- */

.portfolio-carousel{position:relative}

.carousel-stage{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}

.carousel-nav{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(10,10,18,.78);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .28s var(--eo), background .25s ease, border-color .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.carousel-nav:hover:not(:disabled){
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(76,91,255,.55);
  transform:scale(1.07);
}

.carousel-nav:active:not(:disabled){transform:scale(.95)}
.carousel-nav:disabled{opacity:.22;cursor:not-allowed}
.carousel-nav .icon{width:20px;height:20px}

.carousel-viewport{
  overflow:hidden;
  min-width:0;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
}

.carousel-track{
  display:flex;
  align-items:stretch;
  transition:transform .82s cubic-bezier(.22,.8,.3,1);
  will-change:transform;
}

.carousel-slide{
  display:flex;
  flex-direction:column;
  flex:0 0 100%;
  min-width:0;
  padding:4px 2px 16px;
}

.slide-inner{
  position:relative;
  display:grid;
  flex:1;
  width:100%;
  grid-template-columns:1.04fr .96fr;
  min-height:430px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:opacity .5s ease, transform .65s var(--eo);
}

.carousel-slide:not(.is-active) .slide-inner{
  opacity:.18;
  transform:scale(.985);
}

.carousel-slide.is-active .slide-inner{
  opacity:1;
  transform:none;
}

.carousel-slide:nth-child(even) .slide-visual{
  order:2;
  border-right:0;
  border-left:1px solid rgba(255,255,255,.08);
}

.slide-visual{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:430px;
  padding:26px;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  isolation:isolate;
}

.slide-visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.022) 3px 4px);
  opacity:.45;
}

.visual-tag{
  position:absolute;
  left:24px;
  top:22px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(5,5,10,.3);
  color:#eceeff;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.visual-tag::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 8px var(--accent-3);
}

.visual-index{
  position:absolute;
  right:20px;
  top:8px;
  z-index:1;
  color:rgba(255,255,255,.07);
  font-family:var(--font-display);
  font-size:clamp(3.8rem,7vw,5.8rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.08em;
}

.visual-caption{
  position:absolute;
  left:24px;
  bottom:22px;
  z-index:6;
  color:rgba(255,255,255,.6);
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* visual 01: color grade */

.slide-visual--grade{
  background:
    radial-gradient(circle at 78% 12%, rgba(255,179,107,.26), transparent 42%),
    radial-gradient(circle at 18% 84%, rgba(92,225,255,.16), transparent 46%),
    linear-gradient(150deg,#111426,#0a0b14 60%,#080810);
}

.grade-frame{
  position:absolute;
  inset:64px 24px 76px;
  z-index:2;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  overflow:hidden;
  background:#0b0b12;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}

.grade-half{position:absolute;top:0;bottom:0}

.grade-half--before{
  left:0;
  width:52%;
  background:
    linear-gradient(120deg, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(135deg,#7a7468,#4d4a42 46%,#262522);
  filter:saturate(.35) contrast(.95);
}

.grade-half--after{
  right:0;
  width:48%;
  background:
    radial-gradient(circle at 68% 20%, #ffc08a, transparent 30%),
    radial-gradient(circle at 24% 76%, rgba(92,225,255,.55), transparent 38%),
    linear-gradient(140deg,#273a7a,#8c3d7c 52%,#e07743);
}

.grade-half::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px);
  opacity:.45;
}

.grade-divider{
  position:absolute;
  left:52%;
  top:0;
  bottom:0;
  z-index:3;
  width:2px;
  background:linear-gradient(180deg, transparent, #fff 15%, #fff 85%, transparent);
  box-shadow:0 0 18px rgba(255,255,255,.6);
  transform:translateX(-1px);
}

.grade-handle{
  position:absolute;
  left:52%;
  top:50%;
  z-index:4;
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  background:rgba(10,10,18,.66);
  box-shadow:0 0 0 5px rgba(255,255,255,.06), 0 0 26px rgba(255,255,255,.28);
  transform:translate(-50%,-50%);
}

.grade-handle::before{
  content:"";
  position:absolute;
  inset:10px 8px;
  background:linear-gradient(90deg, transparent 0 5px, #fff 5px 6px, transparent 6px 8px, transparent 8px 13px, #fff 13px 14px, transparent 14px);
  opacity:.8;
}

.grade-label{
  position:absolute;
  bottom:11px;
  z-index:4;
  color:rgba(255,255,255,.65);
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.grade-label--before{left:12px}
.grade-label--after{right:12px}

.grade-strip{
  position:absolute;
  left:24px;
  right:24px;
  bottom:48px;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.grade-strip span{
  height:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(76,91,255,.22));
  opacity:.54;
}

.grade-strip span:nth-child(2),
.grade-strip span:nth-child(4){opacity:.9}

/* visual 02: promo motion */

.slide-visual--promo{
  background:
    radial-gradient(circle at 28% 18%, rgba(139,92,255,.36), transparent 42%),
    radial-gradient(circle at 76% 80%, rgba(92,225,255,.18), transparent 44%),
    linear-gradient(145deg,#151027,#080a18 58%,#07070d);
}

.promo-orbit{
  position:absolute;
  left:50%;
  top:47%;
  z-index:2;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:inset 0 0 60px rgba(76,91,255,.12);
  transform:translate(-50%,-50%);
}

.promo-orbit::before{
  content:"";
  position:absolute;
  inset:34px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:50%;
}

.promo-orbit i{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 14px var(--accent-3);
}

.promo-orbit i:nth-child(1){left:9%;top:30%}
.promo-orbit i:nth-child(2){right:4%;top:62%;background:#a78bfa;box-shadow:0 0 14px #a78bfa}
.promo-orbit i:nth-child(3){left:48%;bottom:-4%;background:#fff;box-shadow:0 0 14px #fff}

.promo-core{
  position:absolute;
  left:50%;
  top:47%;
  z-index:3;
  display:grid;
  place-items:center;
  width:150px;
  height:150px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%, rgba(255,255,255,.16), rgba(76,91,255,.2) 50%, rgba(10,10,20,.86) 75%);
  box-shadow:0 0 50px rgba(76,91,255,.22);
  transform:translate(-50%,-50%);
}

.promo-core span{
  color:#fff;
  font-family:var(--font-display);
  font-size:58px;
  font-weight:700;
  line-height:.9;
  letter-spacing:-.08em;
}

.promo-core small{
  margin-top:2px;
  color:#c2c5e6;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.promo-cards{
  position:absolute;
  left:50%;
  bottom:52px;
  z-index:4;
  display:flex;
  align-items:flex-end;
  gap:6px;
  transform:translateX(-50%);
}

.promo-cards i{
  display:block;
  width:36px;
  height:52px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(76,91,255,.2));
  opacity:.68;
}

.promo-cards i:nth-child(2){width:26px;height:40px}

/* visual 03: night reel */

.slide-visual--night{
  padding-bottom:52px;
  background:
    radial-gradient(circle at 68% 22%, rgba(92,225,255,.24), transparent 35%),
    radial-gradient(circle at 24% 68%, rgba(139,92,255,.24), transparent 46%),
    linear-gradient(180deg,#05050a,#0a0f24 58%,#07131a);
}

.night-moon{
  position:absolute;
  right:18%;
  top:16%;
  z-index:2;
  width:54px;
  height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff, #9ad9ff 45%, #4c5bff);
  box-shadow:0 0 40px rgba(92,225,255,.55);
}

.night-grid{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:0;
  z-index:1;
  height:48%;
  background:
    linear-gradient(rgba(92,225,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,225,255,.18) 1px, transparent 1px);
  background-size:100% 22px, 22px 100%;
  background-position:0 0, 0 0;
  opacity:.5;
  transform:perspective(240px) rotateX(58deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, #000, transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
}

.night-title{
  position:relative;
  z-index:3;
  margin-top:auto;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4.5vw,3.7rem);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.night-title em{
  display:inline-block;
  color:transparent;
  font-style:normal;
  background:linear-gradient(100deg,#5ce1ff,#8b5cff);
  -webkit-background-clip:text;
  background-clip:text;
}

/* video slides */

.slide-inner--video{
  grid-template-columns:1.12fr .88fr;
}

.slide-video{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:430px;
  padding:20px;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 26% 18%, rgba(76,91,255,.2), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(92,225,255,.12), transparent 44%),
    linear-gradient(150deg,#0d0e1a,#080810 68%);
  overflow:hidden;
}

.video-frame{
  position:relative;
  z-index:2;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#06070d;
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}

.video-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,4,10,.05) 30%, rgba(4,4,10,.45));
  transition:opacity .3s ease;
}

.video-frame.is-playing::after{opacity:0}

.video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .7s var(--eo), opacity .35s ease;
}

.video-frame:hover .video-poster{transform:scale(1.045)}

.video-play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:9px;
  border:0;
  background:none;
  color:#fff;
  transform:translate(-50%,-50%);
  transition:opacity .25s ease, transform .25s var(--eo);
}

.video-play-ring{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background:rgba(5,5,12,.48);
  box-shadow:0 0 0 8px rgba(255,255,255,.06), 0 0 40px rgba(76,91,255,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .3s var(--eo), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.video-play-ring .icon{
  width:20px;
  height:20px;
  margin-left:3px;
}

.video-play-label{
  color:rgba(255,255,255,.8);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

.video-play:hover .video-play-ring{
  transform:scale(1.08);
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 10px rgba(76,91,255,.14), 0 0 44px rgba(76,91,255,.62);
}

.video-source{
  position:absolute;
  left:14px;
  top:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,5,10,.42);
  color:#fff;
  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.video-source .icon{width:8px;height:8px}

.video-frame iframe{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.video-frame.is-playing .video-poster,
.video-frame.is-playing .video-play,
.video-frame.is-playing .video-source{
  opacity:0;
  visibility:hidden;
}

.slide-inner--video .slide-content h3{
  font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.1;
}

/* mobile video modal */

body.video-modal-open{overflow:hidden}

.video-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.video-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,8,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.video-modal-dialog{
  position:relative;
  z-index:1;
  width:min(100%,960px);
  width:min(100%,960px,calc((100svh - 130px) * 1.7778));
  padding:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg,#08080f,#05050a);
  box-shadow:
    0 40px 100px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(12px) scale(.985);
  transition:transform .3s var(--eo);
}

.video-modal.is-open .video-modal-dialog{transform:none}

.video-modal-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}

.video-modal-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.video-modal-close{
  position:absolute;
  top:-14px;
  right:-14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:#fff;
  color:#14142a;
  font-size:22px;
  line-height:1;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  touch-action:manipulation;
}

.video-modal-close span{display:block;line-height:1;transform:translateY(-1px)}

.video-modal-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:0 4px 2px;
}

.video-modal-caption{
  flex:1;
  min-width:0;
  margin:0;
  color:#c5c8e4;
  font-size:12px;
  line-height:1.45;
  text-align:left;
}

.video-modal-link{
  flex:none;
  color:#dfe1ff;
  font-size:11px;
  font-weight:700;
  border-bottom:1px solid rgba(120,130,255,.4);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}

.video-modal-link:hover{color:#fff;border-color:#fff}

@media (max-width:640px){
  .video-modal{padding:14px}
  .video-modal-dialog{padding:10px;border-radius:18px}
  .video-modal-close{top:-12px;right:0;width:34px;height:34px;font-size:20px}
  .video-modal-meta{flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
  .video-modal-caption{font-size:10px}
  .video-modal-link{font-size:10px}
}

/* slide copy */

.slide-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,46px);
}

.slide-top{
  display:flex;
  align-items:center;
  gap:14px;
}

.slide-content .work-num{
  color:rgba(140,148,255,.85);
  font-family:var(--font-display);
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}

.slide-content .work-cat{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  color:#aeb4d6;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.slide-content h3{
  margin:20px 0 0;
  font-family:var(--font-display);
  font-size:clamp(1.55rem,2.9vw,2.45rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-wrap:balance;
}

.slide-content > p{
  margin:14px 0 0;
  max-width:46ch;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.slide-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.work-result{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.2);
  color:#c5c8e4;
  font-size:10px;
  font-weight:600;
  line-height:1.3;
}

.slide-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#dfe1ff;
  font-size:11px;
  font-weight:700;
  transition:color .2s ease;
}

.slide-cta .icon{width:12px;height:12px;transition:transform .25s var(--eo)}
.slide-cta:hover{color:#fff}
.slide-cta:hover .icon{transform:translate(2px,-2px)}

/* carousel footer */

.carousel-foot{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:12px;
  padding:0 68px;
}

.carousel-dots{display:flex;gap:8px}

.carousel-dot{
  position:relative;
  width:36px;
  height:4px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  transition:background .2s ease;
}

.carousel-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent-3),var(--accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--eo);
}

.carousel-dot:hover{background:rgba(255,255,255,.22)}
.carousel-dot.is-active::after{transform:scaleX(1)}

.carousel-count{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  margin:0 0 0 auto;
  color:var(--muted-2);
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
}

.carousel-count b{
  color:#fff;
  font-size:17px;
  font-weight:700;
}

/* motion inside active slide */

.carousel-slide.is-active .grade-divider,
.carousel-slide.is-active .grade-handle{
  animation:grade-sweep 6s var(--eo) infinite;
}

.carousel-slide.is-active .promo-orbit{animation:orbit-spin 20s linear infinite}
.carousel-slide.is-active .promo-core{animation:core-float 5s ease-in-out infinite}
.carousel-slide.is-active .night-moon{animation:moon-pulse 4.5s ease-in-out infinite}
.carousel-slide.is-active .night-grid{animation:grid-drift 8s linear infinite}

@keyframes grade-sweep{
  0%,100%{left:44%}
  50%{left:62%}
}

@keyframes orbit-spin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes core-float{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.035)}
}

@keyframes moon-pulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes grid-drift{
  from{background-position:0 0, 0 0}
  to{background-position:0 22px, 22px 0}
}

/* ---------- contact ---------- */

.contact-section{
  padding-top:96px;
}

.contact-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:48px;
  align-items:start;
}

.contact-copy h2{font-size:clamp(2rem,4.5vw,3.8rem)}

.contact-copy > p{
  max-width:460px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.contact-form{
  padding:32px;
  border-radius:var(--radius-xl);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-row + .form-row,
.form-row + .field,
.contact-form > .field + .field{
  margin-top:16px;
}

.field{
  display:block;
}

.field > span{
  display:block;
  margin-bottom:8px;
  color:#aeb2d0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.2);
  padding:14px 15px;
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.contact-form .field input,
.contact-form .select-trigger{
  height:48px;
}

.contact-form .field > span{
  line-height:1.2;
}

.field textarea{
  min-height:128px;
  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{color:#707490}

.field select{
  appearance:none;
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #9095b3 50%),
    linear-gradient(135deg, #9095b3 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:36px;
}

.field select option{background:#111119;color:#fff}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(120,130,255,.75);
  background:rgba(76,91,255,.07);
  box-shadow:0 0 0 3px rgba(76,91,255,.16);
}

.contact-form .btn{
  width:100%;
  margin-top:22px;
}

.form-note{
  margin:13px 0 0;
  color:var(--muted-2);
  font-size:11px;
  text-align:center;
}

.form-status{
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

.form-status.is-error{color:var(--error)}
.form-status.is-success{color:var(--success)}

/* ---------- footer ---------- */

.footer{
  padding:34px 0 26px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.012);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:22px;
  color:var(--muted);
  font-size:13px;
}

.footer-links a:hover{color:#fff}

.footer-copy{
  color:var(--muted-2);
  font-size:12px;
}

.credit{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
  color:var(--muted-2);
  font-size:11px;
  text-align:center;
}

.credit a{
  color:#aeb4ff;
  font-weight:700;
}

.credit a:hover{color:#fff}

/* ---------- reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--delay,0s);
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ---------- responsive ---------- */

@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:50px}
  .hero{padding-top:140px;min-height:auto}
  .hero-visual{min-height:470px;order:2}
  .hero-lead{max-width:620px}
  .formats-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .contact-copy > p{max-width:620px}
}

@media (max-width:820px){
  .nav{padding:9px 10px 9px 16px;gap:16px}
  .nav-links{display:none}
  .nav-actions{display:none}
  .menu-toggle{display:inline-flex}
  .site-header{top:12px;padding:0 12px}
  .mobile-menu{top:74px;left:12px;right:12px}
  .authors-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .author-card{grid-column:auto;gap:10px;padding:10px}
  .author-card:last-child{grid-column:1 / -1}
  .author-avatar{width:48px;height:48px}
  .author-link-icon{width:26px;height:26px;padding:7px}
  .carousel-stage{gap:10px}
  .carousel-nav{width:44px;height:44px}
  .carousel-nav .icon{width:18px;height:18px}
  .slide-inner{grid-template-columns:1fr}
  .carousel-slide:nth-child(even) .slide-visual{order:0;border-left:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .slide-visual{min-height:270px;padding:22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .slide-video{min-height:0;padding:16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .video-play-ring{width:58px;height:58px}
  .video-play-ring .icon{width:17px;height:17px}
  .slide-visual--night{padding-bottom:48px}
  .grade-frame{inset:58px 20px 66px}
  .grade-strip{left:20px;right:20px;bottom:40px}
  .visual-tag{left:20px;top:20px}
  .visual-caption{left:20px;bottom:18px}
  .promo-orbit{width:210px;height:210px}
  .promo-core{width:130px;height:130px}
  .promo-core span{font-size:50px}
  .promo-cards{bottom:48px}
  .slide-content{padding:30px}
  .carousel-foot{padding:0 54px}
}

@media (max-width:640px){
  .container{padding:0 18px}
  .hero{padding-top:126px;padding-bottom:58px}
  .hero h1{font-size:clamp(2.5rem,11vw,3.6rem)}
  .hero h1 em{display:block}
  .hero-lead{font-size:16px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-visual{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    min-height:0;
    padding-top:8px;
  }
  .preview-card{width:100%;padding:15px;transform:none;animation:none}
  .preview-frame{aspect-ratio:16/11}
  .sound-card{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    transform:none;
    animation:none;
  }
  .format-badge{display:none}
  .visual-ring{width:320px;height:320px}
  .marquee{margin-top:44px}
  .section{padding:76px 0}
  .section-head{margin-bottom:30px}
  .formats-grid{grid-template-columns:1fr}
  .format-card{min-height:0;padding:24px}
  .authors-panel{padding:16px;border-radius:20px}
  .authors-head{display:grid;gap:6px;margin-bottom:12px}
  .authors-hint{display:block;font-size:9px;line-height:1.5}
  .authors-list{grid-template-columns:1fr;gap:7px}
  .author-card{padding:9px 11px}
  .author-avatar{width:48px;height:48px}
  .author-badge{width:19px;height:19px}
  .author-badge .icon{width:7px;height:7px}
  .carousel-stage{gap:8px}
  .carousel-nav{width:38px;height:38px}
  .carousel-nav .icon{width:16px;height:16px}
  .carousel-slide{padding:2px 0 12px}
  .slide-inner{border-radius:24px}
  .slide-visual{min-height:230px;padding:18px}
  .slide-video{padding:10px}
  .video-frame{border-radius:14px}
  .video-source{left:10px;top:10px;padding:4px 7px;font-size:7px}
  .video-play-ring{width:52px;height:52px}
  .video-play-ring .icon{width:16px;height:16px}
  .video-play-label{font-size:8px}
  .slide-inner--video .slide-content h3{font-size:1.35rem;line-height:1.12}
  .slide-visual--night{padding-bottom:44px}
  .visual-tag{left:16px;top:16px;padding:5px 8px;font-size:7px}
  .visual-index{right:14px;top:8px;font-size:3.2rem}
  .visual-caption{left:16px;bottom:16px;font-size:7px}
  .grade-frame{inset:50px 16px 58px}
  .grade-strip{display:none}
  .grade-label{font-size:7px}
  .promo-orbit{width:178px;height:178px}
  .promo-core{width:112px;height:112px}
  .promo-core span{font-size:42px}
  .promo-cards{display:none}
  .night-moon{width:44px;height:44px}
  .night-title{font-size:2.2rem}
  .slide-content{padding:24px 20px 26px}
  .slide-content h3{font-size:1.45rem}
  .slide-content > p{font-size:13px}
  .slide-meta{margin-top:20px;padding-top:16px;gap:10px}
  .work-result{padding:7px 10px;font-size:9px}
  .slide-cta{font-size:10px}
  .carousel-foot{padding:0 46px;gap:10px;margin-top:10px}
  .carousel-dots{gap:6px}
  .carousel-dot{width:20px;height:3px}
  .carousel-count{font-size:10px}
  .carousel-count b{font-size:15px}
  .contact-form{padding:22px}
  .form-row{grid-template-columns:1fr}
  .footer-inner{align-items:flex-start;flex-direction:column;gap:14px}
  .footer-links{flex-wrap:wrap}
}

@media (max-width:380px){
  .carousel-foot{padding:0 40px;gap:6px}
  .carousel-dots{gap:4px}
  .carousel-dot{width:15px;height:2px}
  .carousel-count{font-size:9px}
  .carousel-count b{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- SVG icons ---------- */

.svg-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.icon{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.12em;
  flex:none;
}

.brand-mark .icon{width:11px;height:11px}
.btn-arrow{display:inline-flex;align-items:center}
.btn-arrow .icon{width:15px;height:15px}
.work-arrow .icon{width:16px;height:16px}
.credit .icon{width:12px;height:12px;vertical-align:-2px}

/* ---------- mobile menu transition ---------- */

.mobile-menu{
  display:flex;
  visibility:hidden;
  opacity:0;
  transform:translateY(-10px) scale(.98);
  transform-origin:top center;
  pointer-events:none;
  transition:
    opacity .25s ease,
    transform .28s cubic-bezier(.16,1,.3,1),
    visibility .25s ease;
}

.mobile-menu.is-open{
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.mobile-menu .btn{
  flex:1;
  color:#14142a;
}

.mobile-menu .btn-glass{
  color:var(--text);
}

/* ---------- custom select ---------- */

.select{
  position:relative;
}

.select-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.22);
  padding:13px 15px;
  color:var(--text);
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.select-trigger:hover{
  border-color:var(--border-strong);
}

.select-trigger .icon{
  width:14px;
  height:14px;
  color:var(--muted);
  transition:transform .22s ease, color .22s ease;
}

.select.is-open{
  position:relative;
  z-index:60;
}

.select.is-open .select-trigger{
  border-color:rgba(120,130,255,.75);
  background:rgba(76,91,255,.07);
  box-shadow:0 0 0 3px rgba(76,91,255,.16);
}

.select.is-open .select-trigger .icon{
  color:#c7cbff;
  transform:rotate(180deg);
}

.select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:40;
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:rgba(10,10,16,.96);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  max-height:260px;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  transition:
    opacity .18s ease,
    transform .2s cubic-bezier(.16,1,.3,1),
    visibility .18s ease;
}

.select.is-open .select-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}

.select-option{
  padding:11px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.select-option:hover,
.select-option.is-highlighted{
  background:rgba(76,91,255,.16);
  color:#fff;
}

.select-option.is-selected{
  background:rgba(76,91,255,.22);
  color:#fff;
  font-weight:600;
}