/* TrafficMember Cosmic Aurora — UI ONLY.
   No business logic, Firebase, Worker, API or mechanics changed. */
:root{
  --cosmic-bg:#030712;
  --cosmic-panel:rgba(8,14,30,.72);
  --cosmic-panel-2:rgba(13,20,43,.78);
  --cosmic-line:rgba(116,145,255,.22);
  --cosmic-text:#f4f7ff;
  --cosmic-muted:#9ba9c6;
  --aurora-a:#7c4dff;
  --aurora-b:#00d9ff;
  --aurora-c:#16e0a0;
  --aurora-d:#ff5fd2;
}

/* ---------- shared cosmic background ---------- */
body.tm-modern-intro{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 520px at 8% -5%,rgba(124,77,255,.22),transparent 64%),
    radial-gradient(800px 500px at 94% 6%,rgba(0,217,255,.17),transparent 62%),
    radial-gradient(760px 520px at 55% 115%,rgba(22,224,160,.10),transparent 64%),
    #030712!important;
}
body.tm-modern-intro::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.52;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(122,185,255,.72) 0 .8px,transparent 1.35px),
    radial-gradient(circle,rgba(218,170,255,.58) 0 .7px,transparent 1.25px);
  background-size:145px 165px,235px 255px,330px 345px;
  background-position:0 0,55px 80px,-35px 125px;
}
body.tm-modern-intro::after{
  content:"";
  position:fixed;
  inset:-22%;
  z-index:-2;
  pointer-events:none;
  opacity:.52;
  filter:blur(42px) saturate(135%);
  background:
    radial-gradient(ellipse 40% 17% at 26% 34%,rgba(124,77,255,.58),transparent 70%),
    radial-gradient(ellipse 44% 18% at 72% 42%,rgba(0,217,255,.42),transparent 70%),
    radial-gradient(ellipse 38% 15% at 56% 72%,rgba(22,224,160,.27),transparent 70%);
  transform:rotate(-8deg);
  animation:tmAuroraDrift 18s ease-in-out infinite alternate;
}
@keyframes tmAuroraDrift{
  0%{transform:translate3d(-2%,1%,0) rotate(-8deg) scale(1)}
  50%{transform:translate3d(2%,-2%,0) rotate(-5deg) scale(1.04)}
  100%{transform:translate3d(-1%,2%,0) rotate(-10deg) scale(1.02)}
}

/* Replace the old falling-snow layer with the cosmic star field. */
.tm-modern-intro .snow,
.tm-modern-intro .snow-layer{
  opacity:0!important;
  background:none!important;
  animation:none!important;
}

/* ---------- member introduction ---------- */
body.member-landing .site-header{
  border:1px solid rgba(123,152,255,.24)!important;
  background:linear-gradient(135deg,rgba(8,14,31,.82),rgba(12,18,39,.62))!important;
  box-shadow:0 18px 70px rgba(0,0,0,.34),0 0 45px rgba(77,91,255,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
body.member-landing .site-header::after,
body.tm-modern-buyer header::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,217,255,.55),rgba(124,77,255,.7),transparent);
  opacity:.75;
}
body.member-landing .brand img,
body.tm-modern-buyer .brand img{
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 0 22px rgba(0,217,255,.18);
}
body.member-landing .site-header nav a,
body.tm-modern-buyer nav a{
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
body.member-landing .site-header nav a:hover,
body.tm-modern-buyer nav a:hover{
  background:rgba(105,115,255,.13)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(125,150,255,.14),0 0 20px rgba(99,89,255,.10);
  transform:translateY(-1px);
}

/* Hero copy + cosmic accent */
body.member-landing .eyebrow,
body.tm-modern-buyer .eyebrow{color:#8db5ff!important}
body.member-landing .hero h1 span{
  background:linear-gradient(100deg,#8b6cff,#4de5ff 55%,#8bffdb);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-shadow:0 0 34px rgba(94,151,255,.18);
}
body.member-landing .hero-copy>p,
body.tm-modern-buyer .hero p{color:#a7b4ce!important}

/* Buttons: cosmic glass + aurora edge */
body.member-landing .cta,
body.tm-modern-buyer .cta,
body.member-landing .hero-actions .ghost,
body.member-landing .login,
body.tm-modern-buyer .ghost{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(139,170,255,.30)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease;
}
body.member-landing .cta,
body.tm-modern-buyer .cta{
  background:linear-gradient(110deg,#6b4cff 0%,#477dff 48%,#00bfe8 100%)!important;
  box-shadow:0 12px 32px rgba(73,79,255,.26),inset 0 1px rgba(255,255,255,.24)!important;
}
body.member-landing .hero-actions .ghost,
body.member-landing .login,
body.tm-modern-buyer .ghost{
  background:rgba(11,17,38,.66)!important;
  color:#e9efff!important;
  box-shadow:inset 0 0 0 1px rgba(124,77,255,.06),0 8px 28px rgba(0,0,0,.18);
}
body.member-landing .cta::before,
body.member-landing .hero-actions .ghost::before,
body.tm-modern-buyer .cta::before,
body.tm-modern-buyer .ghost::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-35%;
  width:28%;
  height:140%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  animation:tmButtonSweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tmButtonSweep{
  0%,62%{left:-35%;opacity:0}
  68%{opacity:1}
  82%,100%{left:125%;opacity:0}
}
body.member-landing .cta:hover,
body.member-landing .hero-actions .ghost:hover,
body.member-landing .login:hover,
body.tm-modern-buyer .cta:hover,
body.tm-modern-buyer .ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(120,220,255,.55)!important;
  box-shadow:0 15px 38px rgba(67,83,255,.25),0 0 26px rgba(0,208,255,.10)!important;
  filter:saturate(1.08);
}

/* Preview card becomes a holographic dashboard */
body.member-landing .dashboard-preview{
  position:relative;
  border:1px solid rgba(119,146,255,.30)!important;
  background:linear-gradient(145deg,rgba(12,18,42,.90),rgba(5,14,28,.88))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 55px rgba(90,83,255,.11)!important;
  transform:rotate(1deg);
}
body.member-landing .dashboard-preview::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(0,217,255,.07) 50%,transparent 58%),
    radial-gradient(circle at 85% 15%,rgba(124,77,255,.17),transparent 28%);
}
body.member-landing .preview-top,
body.member-landing .preview-row{border-color:rgba(112,139,225,.15)!important}
body.member-landing .balance-card{
  background:linear-gradient(135deg,rgba(92,63,224,.94),rgba(32,138,221,.92) 58%,rgba(0,188,201,.88))!important;
  box-shadow:0 15px 35px rgba(54,82,231,.22),inset 0 1px rgba(255,255,255,.20);
}

/* All landing cards */
body.member-landing .service-grid article,
body.member-landing .trust-section,
body.member-landing .pricing-grid article,
body.member-landing .dynamic-loading,
body.member-landing .dynamic-empty{
  border:1px solid rgba(114,143,235,.18)!important;
  background:linear-gradient(145deg,rgba(11,18,38,.78),rgba(7,14,29,.64))!important;
  box-shadow:0 16px 50px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body.member-landing .service-grid article:hover,
body.member-landing .pricing-grid article:hover{
  transform:translateY(-4px);
  border-color:rgba(0,214,255,.34)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.27),0 0 30px rgba(92,84,255,.08);
}
body.member-landing .service-icon{
  background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(0,217,255,.13))!important;
  color:#8fe8ff!important;
  box-shadow:0 0 25px rgba(0,217,255,.08);
}
body.member-landing .pricing-grid strong{color:#7dffcf!important}
body.member-landing .trust-section{
  position:relative;
  overflow:hidden;
}
body.member-landing .trust-section::after{
  content:"";
  position:absolute;
  width:330px;height:180px;
  right:-100px;bottom:-100px;
  border-radius:50%;
  background:rgba(124,77,255,.13);
  filter:blur(30px);
  pointer-events:none;
}

/* ---------- buyer introduction ---------- */
body.tm-modern-buyer header{
  position:relative;
  border-bottom:1px solid rgba(115,143,235,.12);
}
body.tm-modern-buyer .hero-card{
  border:1px solid rgba(119,146,255,.30)!important;
  background:linear-gradient(145deg,rgba(12,18,42,.90),rgba(5,14,28,.86))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.44),0 0 55px rgba(90,83,255,.11)!important;
}
body.tm-modern-buyer .hero-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 25% 30%,rgba(124,77,255,.18),transparent 25%),
    radial-gradient(circle at 75% 65%,rgba(0,217,255,.13),transparent 25%);
  filter:blur(25px);
  pointer-events:none;
}
body.tm-modern-buyer .hero-card>div{
  border-color:rgba(116,143,235,.20)!important;
  background:rgba(7,14,30,.68)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body.tm-modern-buyer .grid article,
body.tm-modern-buyer .features div{
  border-color:rgba(116,143,235,.19)!important;
  background:linear-gradient(145deg,rgba(11,18,38,.78),rgba(7,14,29,.65))!important;
  box-shadow:0 15px 48px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body.tm-modern-buyer .grid article:hover,
body.tm-modern-buyer .features div:hover{
  transform:translateY(-4px);
  border-color:rgba(0,214,255,.34)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.28),0 0 30px rgba(92,84,255,.08);
}
body.tm-modern-buyer .grid i,
body.tm-modern-buyer .features b{
  color:#9fddff!important;
}
body.tm-modern-buyer .features b{
  background:linear-gradient(135deg,rgba(124,77,255,.27),rgba(0,217,255,.18))!important;
  box-shadow:0 0 22px rgba(0,217,255,.09);
}
body.tm-modern-buyer footer{
  border-color:rgba(115,143,235,.16)!important;
}

/* Slightly cleaner mobile cosmic layout */
@media(max-width:700px){
  body.tm-modern-intro::after{opacity:.40;filter:blur(34px) saturate(125%);animation-duration:24s}
  body.member-landing .site-header{margin-top:10px;border-radius:16px}
  body.member-landing .hero{padding-top:52px}
  body.member-landing .dashboard-preview{transform:none}
  body.member-landing .service-grid article,
  body.member-landing .pricing-grid article,
  body.tm-modern-buyer .grid article{border-radius:18px!important}
  body.tm-modern-buyer .hero{padding-top:60px}
}
@media(prefers-reduced-motion:reduce){
  body.tm-modern-intro::after,
  body.member-landing .cta::before,
  body.member-landing .hero-actions .ghost::before,
  body.tm-modern-buyer .cta::before,
  body.tm-modern-buyer .ghost::before{animation:none!important}
  body.member-landing .service-grid article,
  body.member-landing .pricing-grid article,
  body.tm-modern-buyer .grid article,
  body.tm-modern-buyer .features div{transition:none!important}
}