/* ==========================================================================
   Loop Recruitment — shared stylesheet
   Linked on every page: reset, base typography, nav, footer, shared
   buttons (.btn-primary/.btn-ghost), .container, and the .loop-mark logo
   component. Page-specific styles (hero, Why Loop, marquee, etc.) stay in
   each page's own <style> block, not here — split out from the single
   index.html on 2026-07-22 in preparation for adding more pages.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

img,svg,canvas,video{max-width:100%;}

:root{--purple:#7B4FE0;--dark:#0C0916;--light:#F8F7FF;}

html{scroll-behavior:smooth;background:var(--dark);overflow-x:clip;}

body{font-family:'Plus Jakarta Sans',sans-serif;background:#ffffff;-webkit-font-smoothing:antialiased;overflow-x:clip;}

.nav-bg{position:fixed;top:0;left:0;right:0;height:61px;background:#0C0916;border-bottom:1px solid rgba(255,255,255,0.06);z-index:50;}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 52px;}

.nav-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 0;}

.footer-inner{max-width:1440px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:32px;}

.nav-logo{font-size:1rem;font-weight:700;color:rgba(255,255,255,0.75);text-decoration:none;letter-spacing:-0.03em;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity 100ms ease;}

.nav-logo.logo--visible{opacity:1;pointer-events:auto;transition:opacity 600ms ease;}

.logo-ring{
  width:11px;height:11px;
  border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(#0C0916,#0C0916) padding-box,
    linear-gradient(180deg,#c49aff 0%,#89c4ff 100%) border-box;
  box-shadow:0 0 8px 3px rgba(162,89,255,0.55);
  flex-shrink:0;
}

.logo-ring-outer{display:none;}

.logo-ring-dark{display:none;}

.nav-links{display:flex;align-items:center;gap:36px;list-style:none;}

.nav-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:0.8125rem;font-weight:500;transition:color 300ms ease;position:relative;text-shadow:0 0 12px #0C0916, 0 0 24px #0C0916;}

.nav-links a:not(.nav-cta)::before{content:'';position:absolute;inset:-6px -10px;border-radius:100px;opacity:0;transform:scale(0.8);transition:opacity 300ms ease, transform 400ms ease;}

.nav-links a:not(.nav-cta):hover{color:#fff;}

.nav-links a:not(.nav-cta):hover::before{opacity:1;transform:scale(1.2);}

.nav-about::before{background:radial-gradient(ellipse at center,rgba(80,200,220,0.3) 0%,transparent 70%);}

.nav-jobs::before{background:radial-gradient(ellipse at center,rgba(255,130,90,0.3) 0%,transparent 70%);}

.nav-cta{color:rgba(255,255,255,0.7)!important;border:1px solid rgba(255,255,255,0.13)!important;padding:8px 18px;border-radius:100px;position:relative;}

.nav-cta::before{content:'';position:absolute;inset:-6px -10px;border-radius:100px;background:radial-gradient(ellipse at center,rgba(80,200,120,0.3) 0%,transparent 70%);opacity:0;transform:scale(0.8);transition:opacity 300ms ease,transform 400ms ease;}

.nav-cta:hover{border-color:rgba(255,255,255,0.75)!important;color:#fff!important;}

.nav-cta:hover::before{opacity:1;transform:scale(1.2);}

.btn-primary{background:#fff;color:var(--dark);padding:12px 22px;border-radius:100px;font-size:0.875rem;font-weight:700;text-decoration:none;letter-spacing:-0.02em;transition:opacity 300ms;}

.btn-primary:hover{opacity:0.88;}

.btn-ghost{color:rgba(255,255,255,0.7);font-size:0.875rem;font-weight:500;text-decoration:none;transition:color 300ms ease;position:relative;}

.btn-ghost::before{content:'';position:absolute;inset:-6px -10px;border-radius:100px;background:radial-gradient(ellipse at center,rgba(255,80,200,0.25) 0%,transparent 70%);opacity:0;transform:scale(0.8);transition:opacity 300ms ease,transform 400ms ease;}

.btn-ghost:hover{color:#fff;}

.btn-ghost:hover::before{opacity:1;transform:scale(1.2);}

.container{max-width:1440px;margin:0 auto;}

.footer-top{display:flex;align-items:center;justify-content:space-between;}

.footer-logo-lockup{display:flex;align-items:center;gap:9px;text-decoration:none;opacity:0.75;flex-shrink:0;}

.footer-logo-ring{
  width:20px;height:20px;border-radius:999px;border:1.5px solid transparent;
  background:
    linear-gradient(var(--dark),var(--dark)) padding-box,
    linear-gradient(180deg,#c49aff 0%,#89c4ff 100%) border-box;
  box-shadow:0 0 8px 3px rgba(162,89,255,0.7),0 0 20px 6px rgba(162,89,255,0.3);
  flex-shrink:0;
}

.footer-logo-text{font-size:1.75rem;font-weight:700;color:rgba(255,255,255,0.85);letter-spacing:-0.03em;}

.footer-links{display:flex;gap:32px;}

.footer-links a{font-size:0.8125rem;color:rgba(255,255,255,0.4);text-decoration:none;transition:color 300ms ease;}

.footer-links a:hover{color:rgba(255,255,255,0.8);}

.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,0.05);}

.footer-copy{font-size:0.75rem;color:rgba(255,255,255,0.2);}

.footer-legal{display:flex;gap:16px;}

.footer-legal a{font-size:0.75rem;color:rgba(255,255,255,0.2);text-decoration:none;transition:color 300ms ease;}

.footer-legal a:hover{color:rgba(255,255,255,0.5);}

.footer-linkedin{display:flex;align-items:center;opacity:0.35;transition:opacity 200ms ease;}

.footer-linkedin:hover{opacity:0.7;}

.footer-linkedin img{height:18px;width:auto;}

@media(max-width:768px){
  nav{background:#0C0916;border-bottom:1px solid rgba(255,255,255,0.06);padding:0 24px;}
  .nav-inner{padding:20px 0;}
  footer{padding:32px 24px;}
  .footer-top{flex-direction:column;align-items:flex-start;gap:24px;}
  .footer-links{flex-wrap:wrap;row-gap:12px;column-gap:24px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;}
  .footer-bottom > div{flex-wrap:wrap;row-gap:8px;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:0.01ms!important;}
}

.loop-mark{
  --loop-size:32px;
  --loop-speed:5.5s;
  /* 0.0818em (not the component's own default 0.34em) — precisely
     computed so the distance from the RING'S CENTRE to the start of the
     "L" equals the L's own cap-height, per the same rule the ring's own
     size follows. The ring's centre sits at half the SVG element's own
     width (1.3264em / 2 = 0.6632em from the SVG's right edge), so the
     flex gap has to make up the REMAINDER to reach the 0.745em cap-height
     target: 0.745 - 0.6632 = 0.0818em. This is a flat spacing value, not
     itself the full ring-centre-to-L distance — the ring's own half-width
     already covers most of that distance before the gap even starts. */
  display:inline-flex;align-items:center;gap:0.0818em;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:var(--loop-size);line-height:1;
}

.loop-mark__svg{width:1.3264em;height:1.3264em;overflow:visible;display:block;flex-shrink:0;}

.loop-mark__word{font-size:1em;font-weight:700;color:rgba(255,255,255,0.9);letter-spacing:-0.03em;line-height:1;white-space:nowrap;}

.loop-mark__word span{display:inline-block;}

.loop-mark__ring{stroke-dasharray:201.06;}

.loop-mark[data-mode="hold"] .loop-mark__ring{stroke-dashoffset:201.06;animation:loopDraw 1.25s cubic-bezier(0.65,0,0.35,1) forwards;}

.loop-mark[data-mode="hold"] .loop-mark__glow{opacity:0;animation:loopGlowIn 0.7s ease 1.25s forwards;}

.loop-mark[data-mode="hold"] .loop-mark__word span{opacity:0;transform:translateY(0.3em);animation:loopLetterIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards;}

.loop-mark[data-mode="hold"] .loop-mark__word span:nth-child(1){animation-delay:1.10s;}

.loop-mark[data-mode="hold"] .loop-mark__word span:nth-child(2){animation-delay:1.20s;}

.loop-mark[data-mode="hold"] .loop-mark__word span:nth-child(3){animation-delay:1.30s;}

.loop-mark[data-mode="hold"] .loop-mark__word span:nth-child(4){animation-delay:1.40s;}

@keyframes loopDraw{to{stroke-dashoffset:0;}}

@keyframes loopGlowIn{to{opacity:1;}}

@keyframes loopLetterIn{to{opacity:0.9;transform:translateY(0);}}

.loop-mark[data-mode="loop"] .loop-mark__ring{stroke-dashoffset:201.06;animation:loopRing var(--loop-speed) ease-in-out infinite;}

.loop-mark[data-mode="loop"] .loop-mark__glow{opacity:0;animation:loopGlow var(--loop-speed) ease infinite;}

.loop-mark[data-mode="loop"] .loop-mark__word span{opacity:0;animation:loopLetter var(--loop-speed) ease infinite;}

.loop-mark[data-mode="loop"] .loop-mark__word span:nth-child(1){animation-delay:0ms;}

.loop-mark[data-mode="loop"] .loop-mark__word span:nth-child(2){animation-delay:80ms;}

.loop-mark[data-mode="loop"] .loop-mark__word span:nth-child(3){animation-delay:160ms;}

.loop-mark[data-mode="loop"] .loop-mark__word span:nth-child(4){animation-delay:240ms;}

@keyframes loopRing{0%{stroke-dashoffset:201.06;}24%{stroke-dashoffset:0;}58%{stroke-dashoffset:0;}82%{stroke-dashoffset:-201.06;}100%{stroke-dashoffset:-201.06;}}

@keyframes loopGlow{0%,24%{opacity:0;}32%{opacity:1;}52%{opacity:1;}58%{opacity:0;}100%{opacity:0;}}

@keyframes loopLetter{0%,24%{opacity:0;transform:translateY(0.3em);}32%{opacity:0.9;transform:translateY(0);}54%{opacity:0.9;transform:translateY(0);}62%{opacity:0;transform:translateY(0);}100%{opacity:0;transform:translateY(0);}}