* Aurora Mesh — custom visual layer for 1win */

body{
  background-color:var(--bg);
  background-image:
    radial-gradient(at 20% 30%, color-mix(in srgb, var(--accent) 65%, transparent) 0, transparent 50%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent-2) 60%, transparent) 0, transparent 50%),
    radial-gradient(at 50% 85%, color-mix(in srgb, var(--accent) 45%, var(--accent-2)) 0, transparent 55%);
  background-size:180% 180%, 160% 160%, 200% 200%;
  background-position:0% 0%, 100% 0%, 50% 100%;
  background-attachment:fixed;
  animation:aurora-drift 26s ease-in-out infinite alternate;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, var(--text) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 3px);
  background-size:3px 3px;
}

@keyframes aurora-drift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%;}
  50%{background-position:15% 10%, 85% 15%, 45% 85%;}
  100%{background-position:5% 20%, 95% 5%, 55% 95%;}
}

.section{position:relative;z-index:1;}

.hero{
  background:
    radial-gradient(at 30% 20%, color-mix(in srgb, var(--accent) 35%, transparent) 0, transparent 60%),
    radial-gradient(at 75% 60%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0, transparent 60%);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.hero-title{
  font-weight:700;
  letter-spacing:-0.01em;
  background:linear-gradient(100deg, var(--text) 15%, var(--accent) 55%, var(--accent-2) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h2,h3{font-weight:650;letter-spacing:0.01em;}

.card,.feature,.faq-item,.access,.offer{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 0 0 color-mix(in srgb, var(--line) 60%, transparent) inset,
    0 18px 40px -24px rgba(0,0,0,.6);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.card:hover,.feature:hover,.tile:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 24px 48px -20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.feature .icon{
  color:var(--accent-2);
  background:color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  border:1px solid var(--line);
  border-radius:calc(var(--radius) * .7);
}

.badge{
  background:color-mix(in srgb, var(--accent) 20%, var(--panel-2));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  color:var(--text);
}

.tile{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
}

.tile:hover::after{opacity:1;}

.tile.noimg{
  background:
    radial-gradient(at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 55%),
    radial-gradient(at 80% 80%, color-mix(in srgb, var(--accent-2) 25%, transparent) 0, transparent 55%),
    var(--panel-2);
}

.btn{border-radius:calc(var(--radius) * .6);transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;}

.btn-primary{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
  border:1px solid color-mix(in srgb, var(--accent-2) 50%, var(--line));
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}

.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);}

.btn-ghost{
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  color:var(--text);
}

.btn-ghost:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line));}

.chip{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text-2);
}

.offer{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), color-mix(in srgb, var(--accent-2) 16%, var(--panel)));
}

.offer-badge{color:var(--accent-2);}
.offer-amount{
  color:transparent;
  background:linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  font-weight:700;
}

.faq-q{color:var(--text);border-bottom:1px solid var(--line);}

.trust .t18{
  border:1px solid var(--accent-2);
  color:var(--accent-2);
  border-radius:999px;
}

.fact b{
  color:transparent;
  background:linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
}

.tab.active{
  background:color-mix(in srgb, var(--accent) 25%, var(--panel-2));
  border-color:color-mix(in srgb, var(--accent) 50%, var(--line));
  color:var(--text);
}