/* ══════════════════════════════════════════════════════════
   PARALLEL GLOBAL — SHARED STYLESHEET
   Single source of truth for design tokens and the components
   that repeat across every page (reset, nav, footer, buttons,
   WhatsApp float, loader, scroll-reveal utility).

   Page-specific layout (hero, service grids, case study layout,
   contact form) stays inline on each page. If a colour or font
   value is not defined here as a custom property, it should not
   be written as a literal anywhere else in the codebase.
══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* colour */
  --white:   #FFFFFF;
  --black:   #070711;
  --blue:    #0A00FF;
  --indigo:  #4F46E5;
  --purple:  #7C3AED;
  --pink:    #EC4899;
  --lime:    #A3E635;
  --muted:   #6B7280;
  --border:  #E5E7EB;
  --surface: #F8F8FF;

  /* type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* motion */
  --ease: cubic-bezier(0.16,1,0.3,1);

  /* spacing scale (rem) */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 7rem;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/*
  Breakpoints in use across the site (documented here since
  @media cannot consume custom properties):
  768px  — nav collapses to burger menu, section padding tightens
  390px  — large display type steps down further
*/

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;}
body{
  background:var(--white);color:var(--black);
  font-family:var(--font-body);font-weight:400;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
button{background:none;border:none;font-family:inherit;-webkit-tap-highlight-color:transparent;}
img{max-width:100%;display:block;}
select{appearance:none;-webkit-appearance:none;}

/* ══════════════════════════════════════════
   CURSOR
   cursor:none only applies once body.cur-on is set by JS,
   after the custom cursor listeners are confirmed working —
   native cursor stays visible if JS fails or is disabled.
   Pages that don't run the cursor script simply never add
   the #dot/#ring elements, so this is inert by default.
══════════════════════════════════════════ */
body.cur-on{cursor:none;}
body.cur-on button{cursor:none;}
body.cur-on #dot,body.cur-on #ring{display:block;}
#dot,#ring{display:none;position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
#dot{width:8px;height:8px;background:var(--blue);transition:transform .15s,background .2s;}
#ring{width:36px;height:36px;border:1.5px solid rgba(10,0,255,.4);transition:width .3s var(--ease),height .3s var(--ease),border-color .2s;}
body.ch #dot{transform:translate(-50%,-50%) scale(2);background:var(--pink);}
body.ch #ring{width:54px;height:54px;border-color:var(--pink);}

/* ══════════════════════════════════════════
   LOADER
══════════════════════════════════════════ */
#loader{
  position:fixed;inset:0;background:var(--white);z-index:8000;
  display:flex;align-items:center;justify-content:center;
}
.ld-logo{
  opacity:0;
  animation:fadeup .5s ease .1s forwards;
}
@keyframes fadeup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:1.5rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .4s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#nav.s{
  padding:1rem 2.5rem;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);border-color:var(--border);
}
.logo{display:flex;align-items:center;}
.logo-img{display:block;height:84px;width:auto;transition:filter .3s;}
.nav-white .logo-img{filter:brightness(0) invert(1);}
#nav.s .logo-img{filter:none;}
.nav-links{display:flex;gap:2rem;list-style:none;}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.01em;opacity:.7;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-white .nav-links a{color:#fff;}
.nav-cta{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  padding:.55rem 1.3rem;border:1.5px solid var(--blue);border-radius:var(--radius-sm);color:var(--blue);
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--blue);color:#fff;}
.nav-white .nav-cta{border-color:#fff;color:#fff;}
.nav-white .nav-cta:hover{background:#fff;color:var(--blue);}
.burger{
  display:none;flex-direction:column;gap:5px;
  padding:10px;margin-right:-10px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:1.5px;transition:transform .3s,opacity .3s;background:var(--black);}
.nav-white .burger span{background:#fff;}

/* MOBILE MENU */
#mmenu{
  display:none;position:fixed;inset:0;background:var(--black);z-index:490;
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
#mmenu.open{display:flex;}
#mmenu a{
  font-family:var(--font-display);font-size:clamp(2rem,7vw,3.5rem);font-weight:700;
  letter-spacing:-.03em;color:#fff;min-height:44px;display:flex;align-items:center;
  transition:color .2s;
}
#mmenu a:hover{color:var(--blue);}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.03em;
  padding:.9rem 2rem;background:var(--blue);color:#fff;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:.7rem;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(10,0,255,.4);}
.btn-secondary{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.03em;
  padding:.9rem 2rem;border:1.5px solid rgba(255,255,255,.2);color:#fff;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:.7rem;
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);}
.btn-closing{
  display:inline-flex;align-items:center;gap:.8rem;font-family:var(--font-display);
  font-size:.88rem;font-weight:700;letter-spacing:.05em;padding:1rem 2.2rem;
  background:var(--blue);color:#fff;border-radius:var(--radius-md);
  transition:transform .25s,box-shadow .25s;
}
.btn-closing:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(10,0,255,.3);}

/* ══════════════════════════════════════════
   SHARED SECTION HEADER PATTERN
══════════════════════════════════════════ */
.sec{padding:var(--space-6) var(--space-4);}
.sec-tag{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
  margin-bottom:1.4rem;
}
.sec-tag::before{content:'';width:24px;height:2px;background:var(--blue);border-radius:1px;}
.sec-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,4.5rem);font-weight:700;line-height:1.05;letter-spacing:-.035em;
}
.sec-title i{font-style:italic;font-weight:300;color:var(--muted);}

/* ══════════════════════════════════════════
   SCROLL REVEAL UTILITY
══════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.vis{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}
.rv.d3{transition-delay:.24s;}.rv.d4{transition-delay:.32s;}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{background:var(--black);padding:var(--space-4);border-top:1px solid rgba(255,255,255,.06);}
.ft{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.ft-logo{font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff;}
.ft-tagline{font-size:.8rem;color:rgba(255,255,255,.3);font-style:italic;}
.ft-socials{display:flex;align-items:center;gap:1.25rem;}
.ft-socials a{font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);transition:color .2s;}
.ft-socials a:hover{color:var(--blue);}
.ft-ig-pill{
  display:inline-flex;align-items:center;gap:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:100px;padding:3px 14px 3px 3px;
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.75);
  letter-spacing:.01em;text-transform:none;
  transition:background .2s,border-color .2s,color .2s;
  text-decoration:none;
}
.ft-ig-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff !important;}
.ft-ig-av{
  width:26px;height:26px;border-radius:50%;margin-right:8px;flex-shrink:0;
  background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:800;color:#fff;font-family:var(--font-display);
  overflow:hidden;
}
.ft-ig-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.ft-copy{font-size:.75rem;color:rgba(255,255,255,.2);}

/* ══════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════ */
.wa-float{
  position:fixed;bottom:1.8rem;left:1.8rem;z-index:8500;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s;
  cursor:pointer;
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.45);}
.wa-float svg{width:28px;height:28px;}

/* ══════════════════════════════════════════
   RESPONSIVE — shared components only.
   Page-specific responsive rules stay inline on each page.
══════════════════════════════════════════ */
@media(max-width:768px){
  body{cursor:auto;}
  a,button{cursor:pointer;}
  #dot,#ring{display:none;}
  #nav{padding:.95rem 1.25rem;}
  #nav.s{padding:.8rem 1.25rem;}
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .sec{padding:4.5rem 1.25rem;}
  .ft{flex-direction:column;align-items:flex-start;gap:1rem;}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;}
  footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));}
  #mmenu{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
  .wa-float{width:50px;height:50px;bottom:1rem;left:1rem;}
  .wa-float svg{width:25px;height:25px;}
}
@media(max-width:390px){
  .sec-title{font-size:clamp(2rem,9vw,2.8rem);}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;}
}