/* Nuca Media — site styles. Brand system per Nuca_Media_Brand_Guidelines_v1 (locked Oct 2026). */
:root{
  --bg:#0B0714;
  --panel:#140C20;
  --line:rgba(167,139,250,.16);
  --text:#FFFFFF;
  --muted:#A79DBE;
  --violet:#7C3AED;
  --pink:#FF2E92;
  --grad-signal:linear-gradient(110deg,#A61FB4,#FF3D5A);
  --grad-word:linear-gradient(100deg,#4D6BF5 0%,#8B5CF6 35%,#C935D6 68%,#FF2E92 100%);
  --font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --font-accent:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--text)}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance}
p{margin:0}
.rail{max-width:1140px;margin:0 auto;padding-inline:24px}
.eyebrow{font:500 12px/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.accent-word{font-family:var(--font-accent);font-style:italic;font-weight:600;white-space:nowrap;
  background:var(--grad-word);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;filter:drop-shadow(0 2px 14px rgba(154,80,255,.4))}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 30px;
  font:500 15.5px/1 var(--font-display);letter-spacing:.015em;color:#fff;text-decoration:none;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn:focus-visible{outline:2px solid #3FE3ED;outline-offset:3px}
.btn-primary{background:var(--grad-signal);box-shadow:0 10px 30px rgba(255,61,90,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,61,90,.4)}
.btn-ghost{border:1px solid rgba(201,194,217,.35);background:rgba(124,58,237,.1)}
.btn-ghost:hover{background:rgba(124,58,237,.22);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transition:none;transform:none}}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;transition:background-color .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,7,20,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav .rail{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.nav .logo img{height:32px;width:auto;display:block}
.nav .btn{padding:11px 22px;font-size:14px}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(92vh,860px);display:flex;align-items:center}
.hero .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:-1}
.hero .rail{position:relative;z-index:1;display:flex;flex-direction:column;gap:28px;align-items:flex-start;padding-block:150px 110px}
/* circular image treatment — the brand's image language: circle crop + rotating gradient keyline */
.circle-img{position:relative;aspect-ratio:1/1}
.circle-img .ring{position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(from 0deg,#3557F0,#7C3AED,#C026D3,#FF2E92,#FF3D5A,#7C3AED,#3557F0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:orbspin 16s linear infinite}
.circle-img .ph{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 30px 80px rgba(11,7,20,.55)}
.circle-img .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.circle-img:hover .ph img{transform:scale(1.05)}
.circle-img .ph img.pos-high{object-position:50% 36%}
@keyframes orbspin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.circle-img .ring{animation:none}.circle-img .ph img{transition:none}}
.hero-orb{position:absolute;right:7%;top:50%;width:clamp(240px,24vw,380px);z-index:0;
  animation:orbfloat 9s ease-in-out infinite alternate}
@keyframes orbfloat{from{transform:translateY(calc(-50% - 8px))}to{transform:translateY(calc(-50% + 10px))}}
@media (prefers-reduced-motion:reduce){.hero-orb{animation:none;transform:translateY(-50%)}}
@media (max-width:980px){.hero-orb{display:none}}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.08;font-weight:700;letter-spacing:-.016em}
.hero .sub{max-width:46ch;font-size:clamp(16px,1.6vw,19px);color:var(--text)}

/* sections */
section{padding-block:96px}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:34px}
.sec-head h2{font-size:clamp(28px,3.8vw,42px);font-weight:700;letter-spacing:-.012em}
.sec-head .lede{max-width:60ch;font-size:17px}

/* what we do */
.wwd-sec{border-top:1px solid var(--line)}
.wwd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.wwd{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.wwd h3{font:700 22px/1.2 var(--font-display);letter-spacing:-.01em}
.wwd p{font-size:15.5px;line-height:1.65}

/* who we're after */
.roles-sec{border-top:1px solid var(--line)}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.roles-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.roles-photo{max-width:440px;width:100%;justify-self:center}
@media (max-width:860px){.roles-grid{grid-template-columns:1fr;gap:44px}.roles-photo{justify-self:start;max-width:400px}}
.role-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:13px 24px;
  font:500 15.5px var(--font-display);letter-spacing:.02em;color:var(--text);white-space:nowrap}
.roles-cta{margin-top:30px}

/* about */
.about{border-top:1px solid var(--line)}
.about .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.about .copy{display:flex;flex-direction:column;gap:18px;max-width:58ch}
.about .visual{max-width:420px;width:100%;justify-self:end;margin-right:18px}
@media (max-width:860px){.about .cols{grid-template-columns:1fr}.about .visual{justify-self:start;max-width:420px}}

/* platforms */
.platforms{border-top:1px solid var(--line)}
.social-row{display:flex;flex-wrap:wrap;gap:16px}
.social-chip{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:#fff;
  transition:transform .18s ease,background-color .18s ease}
.social-chip svg{width:26px;height:26px;display:block;fill:currentColor}
.social-chip:hover{background:rgba(124,58,237,.22);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.social-chip,.social-chip:hover{transition:none;transform:none}}

/* recruitment band */
.band{position:relative;overflow:hidden;isolation:isolate;border-block:1px solid var(--line)}
.band .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-1}
.band .rail{display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding-block:92px}
.band h2{font-size:clamp(30px,4.4vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.014em}
.band .sub{color:var(--text);font-size:17px;max-width:40ch}

/* join page */
.subhero{position:relative;overflow:hidden;isolation:isolate}
.subhero .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:-1}
.subhero .rail{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-block:190px 110px}
.subhero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.1;font-weight:700;letter-spacing:-.015em}
.join-body{border-top:1px solid var(--line)}
.join-body .copy{display:flex;flex-direction:column;gap:18px;max-width:62ch;font-size:17.5px}
.closing{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.4;margin-top:26px}
.apply{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.apply .email{font:500 15.5px var(--font-display);color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,46,146,.5)}
.apply .email:hover{color:var(--text)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:54px 60px}
footer .rail{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;justify-content:space-between}
footer .left{display:flex;align-items:center;gap:16px}
footer .left img{height:34px;width:auto}
footer .reach{color:var(--text);font-size:15px}
footer .contact{display:flex;flex-direction:column;gap:4px;font-size:15px}
footer .contact a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,46,146,.5)}
footer .contact a:hover{color:var(--text)}
footer .fine{width:100%;color:var(--muted);font-size:12.5px;margin-top:10px}

@media (max-width:640px){
  section{padding-block:72px}
  .hero .rail{padding-block:130px 90px}
  .subhero .rail{padding-block:150px 90px}
}
@media (max-width:560px){
  .hero h1 br,.band h2 br,.subhero h1 br{display:none}
  .hero h1{font-size:clamp(30px,8.6vw,36px)}
  .subhero h1{font-size:clamp(27px,7.8vw,33px)}
  .band h2{font-size:clamp(26px,7.6vw,32px)}
  .hero .sub,.band .sub{max-width:100%;font-size:16px}
  .closing{font-size:21px}
  .nav .btn{padding:10px 16px;font-size:13px}
  .nav .logo img{height:26px}
}