/* Colossal Reach v2 concepts — shared tokens, cube, nav, switcher */
:root{
  --teal:#22C7EA; --teal-2:#189DBB; --teal-3:#0F6F86;
  --g1:#AEB9C7; --g2:#6E7A8E; --g3:#3A4152;
  --ink:#0C0B0C; --pale:#BDEFF9; --navy:#06303B;
  --line-w:2px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:#fff;font-family:'Wix Madefor Display',system-ui,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit}

/* nav pill */
.cr-nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:20px;
  padding:7px 18px 7px 7px;border-radius:999px;background:rgba(12,11,12,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;white-space:nowrap}
.cr-nav img{width:30px;height:30px;display:block}
.cr-nav .cta{background:var(--teal);color:var(--ink);padding:7px 12px;border-radius:999px;text-decoration:none}
@media (max-width:640px){.cr-nav .opt{display:none}}

/* concept switcher */
.cr-switch{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:4px;padding:4px;
  border-radius:999px;background:rgba(12,11,12,.8);border:1px solid rgba(255,255,255,.15);font-size:12px;font-weight:600}
.cr-switch a{padding:7px 11px;border-radius:999px;text-decoration:none;color:var(--g1)}
.cr-switch a.on{background:#fff;color:var(--ink)}

/* wireframe cube (faces fly in on --d) */
.cr-scene{--size:180px;--fly:700px;width:var(--size);height:var(--size);perspective:1300px;position:relative}
.cr-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.cr-cube .face{position:absolute;inset:0;border:var(--line-w) solid #fff;opacity:0;--d:var(--fly)}
.cr-cube .front {transform:rotateY(0deg)   translateZ(calc(var(--size)/2 + var(--d)))}
.cr-cube .back  {transform:rotateY(180deg) translateZ(calc(var(--size)/2 + var(--d)))}
.cr-cube .right {transform:rotateY(90deg)  translateZ(calc(var(--size)/2 + var(--d)))}
.cr-cube .left  {transform:rotateY(-90deg) translateZ(calc(var(--size)/2 + var(--d)))}
.cr-cube .top   {transform:rotateX(90deg)  translateZ(calc(var(--size)/2 + var(--d)))}
.cr-cube .bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2 + var(--d)))}
.cr-glow{position:absolute;inset:-90%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--teal) 0%,rgba(34,199,234,.35) 30%,transparent 62%)}
.cr-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:70}

@media (prefers-reduced-motion:reduce){.cr-cube .face{opacity:1!important;--d:0px!important}}