/* =========================================================
   Hulahoot — shared base (header, logo, buttons, tokens)
   ========================================================= */

:root{
  --purple:#7C3AED;
  --purple-d:#6D28D9;
  --purple-l:#F4EEFE;
  --blue:#1D9BF0;
  --ink:#111827;
  --ink-2:#1F2937;
  --grey:#6B7280;
  --grey-l:#9CA3AF;
  --line:#E7E8EC;
  --line-2:#EFEFF3;
  --bg:#FFFFFF;
  --bg-2:#F5F5F7;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.fill,svg .fill{fill:currentColor;stroke:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 20px;border-radius:10px;
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn-outline{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-outline:hover{background:#F7F7FA;border-color:#DCDDE3}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-d)}
.btn-sm{height:36px;padding:0 16px;font-size:13px;border-radius:9px}
.btn-block{width:100%}

/* ---------- logo ---------- */
.logo{position:relative;display:inline-flex;align-items:center;padding:2px 4px 8px}
.logo-txt{font-size:31px;font-weight:900;letter-spacing:-.035em;line-height:1;color:#0B0B0F}
.logo-txt .oo{position:relative;color:var(--purple)}
.logo-pin{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:15px;height:9px;fill:var(--purple);stroke:none;
}

/* ---------- verified ticks ---------- */
.tick{width:13px;height:13px;display:inline-block;vertical-align:-2px;color:var(--purple)}
.tick path:first-child{fill:currentColor;stroke:none}
.tick .ck{stroke:#fff;stroke-width:2.4;fill:none}
.tick-blue{color:var(--blue)}
.tick-lg{width:15px;height:15px;vertical-align:-3px}

/* ---------- avatars ---------- */
.av{
  width:16px;height:16px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;font-style:normal;
  font-size:9px;font-weight:800;color:#fff;
}
.av img{width:100%;height:100%;object-fit:cover}
.av-h{background:linear-gradient(140deg,#8B5CF6,#6D28D9)}
.av-s{background:linear-gradient(140deg,#F472B6,#9333EA)}
.av.big{width:32px;height:32px;font-size:14px}

/* ---------- photo tiles: real image over a gradient fallback ---------- */
.ph{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#DDD}
.ph>span{font-size:44px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.10));
}
.ph-flat::after{display:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}