/* ============================================================
   SOCIANG — shared design system
   Ink + gradient (pink → purple → blue), premium / Apple-ish
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* color */
  --ink:#0B0A12;
  --ink-2:#131120;
  --ink-3:#1C1930;
  --paper:#FBFAFC;
  --paper-2:#F2F0F7;
  --paper-3:#E9E6F1;
  --line-dark:rgba(255,255,255,.10);
  --line-light:rgba(11,10,18,.10);

  --g-pink:#E456A0;
  --g-purple:#8B5CD6;
  --g-blue:#4F89E8;
  --accent:#8B5CD6;

  --grad:linear-gradient(110deg,#E456A0 0%,#8B5CD6 50%,#4F89E8 100%);
  --grad-soft:linear-gradient(110deg,rgba(228,86,160,.18),rgba(139,92,214,.18),rgba(79,137,232,.18));

  --tx-dark:#0B0A12;
  --tx-dark-muted:#5E5A6B;
  --tx-light:#FFFFFF;
  --tx-light-muted:rgba(255,255,255,.60);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Manrope',sans-serif;

  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --r:18px;
  --r-lg:28px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--tx-dark);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  cursor:url("../assets/cursor-hash.png") 18 18, auto;
}
/* hashtag cursor — brand # from the logo */
a,button,[role="button"],.btn,label,summary,input[type="submit"],input[type="button"],
.wi__cta,.svc,.reel,.reel__play,image-slot,select,.nav__burger{
  cursor:url("../assets/cursor-hash-lg.png") 22 22, pointer;
}
input[type="text"],input[type="email"],textarea{
  cursor:url("../assets/cursor-hash.png") 18 18, text;
}
@media (hover:none){ body,a,button,.btn{cursor:auto} }

/* ===== animated # cursor (js-driven) ===== */
html.cc-on, html.cc-on *{cursor:none !important}
#cc-glyph,#cc-glow,#cc-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:2147483647;
  opacity:0;transition:opacity .25s ease;will-change:transform}
html.cc-vis #cc-glyph,html.cc-vis #cc-glow,html.cc-vis #cc-dot{opacity:1}
#cc-glyph{filter:drop-shadow(0 2px 6px rgba(11,10,18,.28));transition:opacity .25s ease}
#cc-glyph svg{display:block}
#cc-dot{width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1.5px rgba(139,92,214,.55),0 0 8px rgba(139,92,214,.5)}
#cc-glow{width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,214,.32),rgba(79,137,232,.14) 55%,transparent 72%)}
html.cc-hover #cc-glow{background:radial-gradient(circle,rgba(228,86,160,.34),rgba(79,137,232,.2) 55%,transparent 72%)}
@media (hover:none),(pointer:coarse){ html.cc-on,html.cc-on *{cursor:auto !important} #cc-glyph,#cc-glow,#cc-dot{display:none} }
@media (prefers-reduced-motion:reduce){ #cc-glow,#cc-dot{display:none} }
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--g-purple);color:#fff}
/* keyboard accessibility — visible focus ring (mouse users unaffected) */
:focus-visible{outline:2px solid var(--g-purple);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav__link:focus-visible{outline-offset:5px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.display{font-size:clamp(2.8rem,8vw,6.6rem);font-weight:600;line-height:1.0;letter-spacing:-.035em;padding-bottom:.04em}
.h-xl{font-size:clamp(2.2rem,5.2vw,4.2rem);letter-spacing:-.03em;line-height:1.05;padding-bottom:.04em}
.h-lg{font-size:clamp(1.8rem,3.6vw,3rem);letter-spacing:-.025em;line-height:1.08;padding-bottom:.03em}
.h-md{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em}
.lede{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;font-weight:400}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* italic gradient words need a touch of right padding so the last glyph isn't clipped */
.serif-it.grad-text{padding-right:.08em;margin-right:-.04em}
.serif-it{font-style:italic;font-family:var(--font-display);font-weight:500}

/* eyebrow / kicker */
.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.kicker.center::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.kicker.center{justify-content:center}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.sec-pad{padding-block:clamp(80px,11vw,150px)}
.dark{background:var(--ink);color:var(--tx-light)}
.dark .tx-muted{color:var(--tx-light-muted)}
.light .tx-muted,.tx-muted{color:var(--tx-dark-muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:.92em 1.5em;border-radius:100px;
  transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .4s;
  white-space:nowrap;
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-grad{background:var(--grad);color:#fff;background-size:200% 200%;background-position:0% 50%;
  transition:transform .4s var(--ease),background-position .6s var(--ease),box-shadow .4s}
.btn-grad:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 14px 40px -12px rgba(139,92,214,.7)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 14px 36px -14px rgba(11,10,18,.6)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(0,0,0,.4)}
.btn-ghost{border:1.5px solid var(--line-light);color:var(--ink)}
.dark .btn-ghost{border-color:var(--line-dark);color:#fff}
.btn-ghost:hover{border-color:var(--g-purple);color:var(--g-purple)}
.dark .btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.45)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:padding .4s var(--ease),background .4s,backdrop-filter .4s,box-shadow .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-block:12px;
  background:rgba(251,250,252,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-light);
}
.nav.on-dark:not(.scrolled){color:#fff}
.nav.on-dark.scrolled{background:rgba(11,10,18,.6);border-bottom-color:var(--line-dark);color:#fff}
.nav__logo{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav__link{
  font-weight:600;font-size:.95rem;position:relative;padding:4px 0;
  opacity:.82;transition:opacity .25s;
}
.nav__link:hover{opacity:1}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);border-radius:2px;
}
.nav__link:hover::after,.nav__link.active::after{transform:scaleX(1)}
.nav__link.active{opacity:1}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:120}
.nav__burger span{width:24px;height:2px;background:currentColor;border-radius:2px;transition:.35s var(--ease)}

.nav__mobile{
  position:fixed;inset:0;z-index:110;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--pad);
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
.nav__mobile.open{transform:translateY(0)}
.nav__mobile a{font-family:var(--font-display);font-size:clamp(2rem,9vw,3.4rem);font-weight:500;
  padding:10px 0;opacity:0;transform:translateY(20px);transition:.5s var(--ease);}
.nav__mobile.open a{opacity:1;transform:none}
.nav__mobile.open a:nth-child(1){transition-delay:.08s}
.nav__mobile.open a:nth-child(2){transition-delay:.13s}
.nav__mobile.open a:nth-child(3){transition-delay:.18s}
.nav__mobile.open a:nth-child(4){transition-delay:.23s}
.nav__mobile.open a:nth-child(5){transition-delay:.28s}
.nav__mobile.open a:nth-child(6){transition-delay:.33s}

@media(max-width:860px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:flex}
  body.menu-open{overflow:hidden}
  .nav.menu-active .nav__burger span{color:#fff}
  .nav.menu-active .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-active .nav__burger span:nth-child(2){opacity:0}
  .nav.menu-active .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- marquee ---------- */
.marquee{display:flex;overflow:hidden;white-space:nowrap;user-select:none;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:0;flex-shrink:0;animation:scrollx 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;font-family:var(--font-display);
  font-size:clamp(1.4rem,3vw,2.6rem);font-weight:500;padding:0 .5em;letter-spacing:-.02em}
.marquee__track .dot{width:11px;height:11px;border-radius:50%;background:var(--grad);margin:0 .3em;flex-shrink:0}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.clip-up{clip-path:inset(-.14em -.28em 110% -.14em);transform:translateY(20px);opacity:0;
  transition:clip-path 1s var(--ease),transform 1s var(--ease),opacity 1s var(--ease)}
.clip-up.in{clip-path:inset(-.14em -.28em -.34em -.14em);transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .reveal,.clip-up{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee__track{animation:none}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding-top:clamp(70px,9vw,120px)}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line-dark)}
.foot__logo{height:34px;margin-bottom:22px}
.foot h5{font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-light-muted);margin-bottom:18px}
.foot__col a{display:block;color:rgba(255,255,255,.78);padding:6px 0;font-weight:500;transition:color .25s,transform .25s}
.foot__col a:hover{color:#fff;transform:translateX(4px)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 0 40px;color:var(--tx-light-muted);font-size:.9rem}
.foot__tag{font-family:var(--font-display);font-weight:500}
.foot__social{display:flex;gap:10px;margin-top:14px}
.foot__social a{width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line-dark);
  display:grid;place-items:center;color:rgba(255,255,255,.82);transition:background .3s,color .3s,border-color .3s,transform .3s}
.foot__social a:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}
.foot__social svg{display:block}

/* social icons: reveal each brand's real color on hover (page + footer) */
.socials a,.foot__social a{transition:background .3s,color .3s,border-color .3s,transform .3s}
.socials a[aria-label="Instagram"]:hover,.foot__social a[aria-label="Instagram"]:hover{
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  color:#fff !important;border-color:transparent !important}
.socials a[aria-label="LinkedIn"]:hover,.foot__social a[aria-label="LinkedIn"]:hover{background:#0A66C2 !important;color:#fff !important;border-color:transparent !important}
.socials a[aria-label="YouTube"]:hover,.foot__social a[aria-label="YouTube"]:hover{background:#FF0000 !important;color:#fff !important;border-color:transparent !important}
.socials a[aria-label="X"]:hover,.foot__social a[aria-label="X"]:hover{background:#0B0A12 !important;color:#fff !important;border-color:transparent !important}
@media(max-width:860px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}}

/* ---------- misc cards / chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:100px;
  border:1px solid var(--line-light);font-weight:600;font-size:.85rem}
.dark .chip{border-color:var(--line-dark)}
.divider{height:1px;background:var(--line-light);border:none}
.dark .divider{background:var(--line-dark)}

/* big background gradient orb */
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}

/* scroll progress bar */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--grad);z-index:200}

/* number stat */
.stat__num{font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,7vw,5.5rem);line-height:1;letter-spacing:-.03em}

/* gradient hairline */
.grad-rule{height:3px;width:100%;background:var(--grad);border-radius:3px}

/* ============================================================
   Droppable image slots — recommended-size badge on hover
   ============================================================ */
image-slot{position:relative}
image-slot[data-size]::after{
  content:"↧ " attr(data-size);
  position:absolute;top:10px;right:10px;z-index:7;
  font:700 11px/1 var(--font-body);letter-spacing:.03em;
  padding:6px 10px;border-radius:100px;white-space:nowrap;pointer-events:none;
  background:rgba(11,10,18,.72);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
image-slot[data-size]:hover::after{opacity:1;transform:none}
/* avatar slots show the badge a touch smaller / centered below */
image-slot.avatar-slot[data-size]::after{top:auto;bottom:-26px;right:50%;transform:translate(50%,-3px);font-size:9px;padding:3px 7px}
image-slot.avatar-slot[data-size]:hover::after{transform:translate(50%,0)}