/* ============================================================================
   Utopoly — design system
   Black canvas, dot grid, glass panels. Layout and styling follow the
   Cain Finance shell so the two properties read as one family.
   ========================================================================== */
:root{
  --black:#060606;
  --rail:#0a0a0a;
  --card:rgba(255,255,255,0.03);
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --muted:#888888;
  --dim:#666666;
  --faint:#555555;
  --accent:#00ffa3;
  --gold:#c9b87a;
  --danger:#f87171;
  --warn:#f5a623;
  --violet:#a78bfa;
  --sky:#38bdf8;
  --pink:#f472b6;
  --content:1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* the hidden attribute must beat any display: rule that follows it */
[hidden]{display:none!important}
html,body{height:100%}
body{
  background-color:var(--black);
  color:#fff;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,255,163,.25);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ── canvas ─────────────────────────────────────────────────────────────── */
.dot-grid{
  background-image:radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size:24px 24px;
}
.glass{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
}
.aura-content{width:100%;max-width:var(--content);margin-left:auto;margin-right:auto}

/* ── panel: blurred plate + its own dot field + a glass refraction edge ──── */
.plate{
  position:relative;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}
.plate::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:rgba(14,14,16,0.50);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.plate::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:24px 24px;
}
.plate > .refraction{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -1px 24px rgba(255,255,255,0.02);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%);
}
.plate > *:not(.refraction){position:relative;z-index:1}

/* ── feature tile ───────────────────────────────────────────────────────── */
.tile{
  position:relative;isolation:isolate;background:transparent;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:24px;padding:22px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition:border-color .3s ease, transform .4s cubic-bezier(0.175,0.885,0.32,1.4), box-shadow .3s ease;
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(14,14,16,0.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tile:hover{
  border-color:rgba(255,255,255,0.20);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
}
.tile-ico{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-bottom:14px;
  background:color-mix(in srgb, var(--c, #00ffa3) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c, #00ffa3) 24%, transparent);
  color:var(--c,#00ffa3);
}
.tile-ico svg{width:18px;height:18px}
.tile h3{font-size:14px;font-weight:600;color:#e8e8e8;margin-bottom:6px;letter-spacing:-.01em}
.tile p{font-size:12px;color:var(--muted);line-height:1.6;flex:1}
.tile .go{
  display:inline-flex;align-items:center;gap:5px;margin-top:14px;
  font-size:11px;font-weight:600;color:var(--c,#00ffa3);letter-spacing:.02em;transition:gap .16s;
}
.tile:hover .go{gap:9px}
.tile .go svg{width:12px;height:12px}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 26px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color .2s, border-color .2s, color .2s, transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px}
.btn-white{background:#fff;color:#000}
.btn-white:hover{background:#e9e9e9}
.btn-ghost{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,0.14)}
.btn-bare{background:transparent;color:var(--muted)}
.btn-bare:hover{color:#fff;background:rgba(255,255,255,0.05)}
.btn-sm{padding:7px 16px;font-size:12px}
.btn-block{width:100%}
.btn:disabled,.btn.loading{opacity:.6;pointer-events:none}

/* ── form fields ────────────────────────────────────────────────────────── */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:7px;
  letter-spacing:.06em;text-transform:uppercase}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 13px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);
  color:#fff;font-family:inherit;font-size:13px;outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
  -webkit-appearance:none;appearance:none;color-scheme:dark;
}
input::placeholder{color:#5a5a5a}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,255,255,0.28);box-shadow:0 0 0 3px rgba(255,255,255,0.05);
  background:rgba(255,255,255,0.07);
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;
}
select option{background:#111;color:#fff}

/* ── bits ───────────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:500;color:#c9c9c9;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
}
.chip{
  font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;font-family:'SF Mono','Fira Mono',ui-monospace,monospace;
  background:rgba(26,26,26,0.6);border:1px solid rgba(255,255,255,0.1);color:var(--muted);
}
.eyebrow{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;
  border-bottom:1px dashed rgba(255,255,255,0.12);padding-bottom:3px;width:fit-content}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.dot.live{animation:auraPulse 2s ease-in-out infinite}
@keyframes auraPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sect-title{font-size:11px;color:#777;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.hr{height:1px;background:rgba(255,255,255,0.06);border:0}

/* ── the two promoted colour treatments ─────────────────────────────────── */
.text-gold{
  background:linear-gradient(100deg,#8a6f2a 0%,#c9b87a 22%,#f7e9b0 42%,#c9b87a 62%,#8a6f2a 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:goldRun 5.5s linear infinite;
}
@keyframes goldRun{to{background-position:250% 0}}
.text-rainbow{
  background:linear-gradient(100deg,#ff5f6d,#ffc371,#4ade80,#38bdf8,#a78bfa,#f472b6,#ff5f6d);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:rainbowRun 7s linear infinite;
}
@keyframes rainbowRun{to{background-position:300% 0}}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}