/* ============================================================
   GLOBAL SITE CHROME — one header + footer for every Kapshare
   property (Studio home, Services, Kapsul, Katalyst).
   Self-contained, neutral dark glass + white logo so it sits
   cleanly on both the Agenio (lime/black) and Piku (purple/black)
   themes. Prefixed .gc- to avoid collisions. Injected by
   site-chrome.js.
   ============================================================ */

.gc-header *,
.gc-footer *{ box-sizing:border-box; }

/* ---------- HEADER ---------- */
.gc-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  font-family:"Manrope","Outfit",system-ui,sans-serif;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  background:transparent; border-bottom:1px solid transparent;
}
.gc-header.scrolled{
  background:rgba(10,10,12,.82); backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:rgba(255,255,255,.10);
}
.gc-inner{
  max-width:1280px; margin:0 auto; padding:16px clamp(20px,4vw,46px);
  display:flex; align-items:center; gap:28px;
}
.gc-logo{ display:flex; align-items:center; flex:none; }
.gc-logo img{ height:28px; width:auto; display:block; }
.gc-nav{ display:flex; align-items:center; gap:30px; margin-left:8px; }
.gc-nav > a, .gc-drop-t{
  font-size:15px; font-weight:500; color:rgba(255,255,255,.72);
  background:none; border:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px; padding:0; transition:color .2s;
}
.gc-nav > a:hover, .gc-drop-t:hover, .gc-nav > a.gc-active{ color:#fff; }
.gc-spacer{ flex:1; }
.gc-cta{ display:flex; align-items:center; gap:12px; flex:none; }
.gc-btn{
  font-size:14px; font-weight:600; color:#0c0c10; background:#fff;
  padding:10px 22px; border-radius:40px; transition:transform .25s ease, box-shadow .25s ease, opacity .2s;
  white-space:nowrap;
}
.gc-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(255,255,255,.5); }
.gc-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.32); }
.gc-btn.ghost:hover{ border-color:#fff; }

/* dropdown */
.gc-drop{ position:relative; }
.gc-drop-m{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  background:rgba(18,18,22,.96); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:8px; min-width:188px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease; box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
}
.gc-drop:hover .gc-drop-m, .gc-drop:focus-within .gc-drop-m{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.gc-drop-m a{ display:block; padding:10px 14px; border-radius:9px; color:rgba(255,255,255,.8); font-size:14px; font-weight:500; transition:background .15s, color .15s; }
.gc-drop-m a span{ display:block; font-size:12px; color:rgba(255,255,255,.45); font-weight:400; margin-top:2px; }
.gc-drop-m a:hover{ background:rgba(255,255,255,.07); color:#fff; }

/* burger / mobile */
.gc-burger{ display:none; background:none; border:none; cursor:pointer; color:#fff; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; }
.gc-burger svg{ width:24px; height:24px; stroke:#fff; stroke-width:2; fill:none; }
.gc-mobile{
  display:none; flex-direction:column; gap:2px; padding:8px clamp(20px,4vw,46px) 22px;
  background:rgba(10,10,12,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.1);
}
.gc-mobile.open{ display:flex; }
.gc-mobile a{ color:rgba(255,255,255,.82); font-size:16px; font-weight:500; padding:13px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
.gc-mobile a:last-child{ border-bottom:none; }
.gc-mobile .gc-mlabel{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:14px 6px 4px; }

@media(max-width:900px){
  .gc-nav, .gc-cta{ display:none; }
  .gc-burger{ display:flex; }
  .gc-inner{ justify-content:space-between; }
}

/* ---------- FOOTER ---------- */
.gc-footer{
  position:relative; z-index:1;
  background:#08080a; color:#fff; border-top:1px solid rgba(255,255,255,.1);
  font-family:"Manrope","Outfit",system-ui,sans-serif;
  padding:clamp(56px,8vw,92px) 0 38px;
}
.gc-finner{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,46px); }
.gc-ftop{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:780px){ .gc-ftop{ grid-template-columns:1fr 1fr; gap:34px; } }
@media(max-width:460px){ .gc-ftop{ grid-template-columns:1fr; } }
.gc-fbrand img{ height:28px; margin-bottom:18px; }
.gc-fbrand p{ color:rgba(255,255,255,.55); font-size:15px; line-height:1.55; max-width:32ch; }
.gc-fcol h6{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.42); margin:0 0 18px; }
.gc-fcol ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.gc-fcol a{ color:rgba(255,255,255,.66); font-size:15px; transition:color .2s; }
.gc-fcol a:hover{ color:#fff; }
.gc-fbot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.gc-fbot span{ color:rgba(255,255,255,.4); font-size:13.5px; }
.gc-fbot .gc-flinks{ display:flex; gap:22px; }
.gc-fbot .gc-flinks a{ color:rgba(255,255,255,.4); font-size:13.5px; transition:color .2s; }
.gc-fbot .gc-flinks a:hover{ color:#fff; }

/* ---------- NAV LINK UNDERLINE (animated, global) ---------- */
.gc-nav > a, .gc-drop-t{ position:relative; }
.gc-nav > a::after, .gc-drop-t::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:#1976D2; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.gc-nav > a:hover::after, .gc-nav > a.gc-active::after, .gc-drop-t:hover::after, .gc-drop-t.gc-active::after{ transform:scaleX(1); }

/* ============================================================
   SPLASH / LOADING — Kapshare logo reveal (once per session)
   ============================================================ */
html.gc-splashing{ overflow:hidden; }
.gc-splash{
  position:fixed; inset:0; z-index:9999990; background:#08080a;
  display:grid; place-items:center;
  transition:transform .75s cubic-bezier(.76,0,.24,1);
}
.gc-splash.gc-done{ transform:translateY(-101%); }
.gc-splash-logo{ width:min(46vw,300px); }
.gc-splash-logo img{ width:100%; display:block; clip-path:inset(0 100% 0 0); animation:gcReveal 1s cubic-bezier(.76,0,.24,1) .12s both; }
@keyframes gcReveal{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.gc-splash-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.gc-splash-bar i{ position:absolute; left:0; top:0; height:100%; width:0; background:#1976D2; animation:gcBar 1.45s cubic-bezier(.5,0,.2,1) both; }
@keyframes gcBar{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .gc-splash-logo img{ animation:none; clip-path:none; }
  .gc-splash-bar i{ animation:none; width:100%; }
}