:root{
  --bg:#ffffff;
  --text:#0b0f19;
  --muted:#5b667a;
  --card:rgba(255,255,255,.72);
  --cardBorder:rgba(15,23,42,.08);
  --shadow: 0 20px 50px rgba(15, 23, 42, .10);
  --shadowSm: 0 10px 25px rgba(15, 23, 42, .08);
}

html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); text-rendering:optimizeLegibility;}

/* Subtle grain for premium feel */
.grain{
  position:relative;
}
.grain:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.08;
  border-radius:inherit;
}

/* Glassy cards */
.glass{
  background:var(--card);
  border:1px solid var(--cardBorder);
  box-shadow: var(--shadowSm);
  backdrop-filter: blur(10px);
}

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* Focus rings */
.focus-ring:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.25);
}

/* Floating register CTA */
.fab-register{
  position:fixed;
  bottom:1.25rem;
  left:1.25rem;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.65rem 1rem .65rem .65rem;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg, #0f172a 0%, #3730a3 48%, #0284c7 100%);
  color:#fff;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  box-shadow:
    0 14px 40px rgba(15,23,42,.28),
    0 0 0 1px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  transform:translateZ(0);
  animation:fab-float 4.5s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.fab-register:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 20px 48px rgba(15,23,42,.34),
    0 0 0 1px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.06);
}
.fab-register:active{
  transform:translateY(-1px) scale(.99);
}
.fab-register__pulse{
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
  border:2px solid rgba(56,189,248,.45);
  opacity:0;
  animation:fab-pulse 2.8s ease-out infinite;
}
.fab-register__shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.fab-register__shine::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-40%;
  width:45%;
  height:280%;
  background:linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.28) 50%,
    transparent 65%
  );
  transform:rotate(18deg);
  animation:fab-shine 5.5s ease-in-out infinite;
}
.fab-register__icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:9999px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  flex-shrink:0;
}
.fab-register__label{
  position:relative;
  z-index:1;
  padding-right:.35rem;
  white-space:nowrap;
}
.fab-register__label span{
  display:block;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  line-height:1.2;
}
@media (max-width:639px){
  .fab-register{
    padding:.75rem;
    border-radius:9999px;
  }
  .fab-register__label{display:none;}
}
@media (min-width:640px){
  .fab-register{bottom:1.5rem; left:1.5rem; padding:.75rem 1.15rem .75rem .75rem; font-size:.875rem;}
}

@keyframes fab-float{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
@keyframes fab-pulse{
  0%{transform:scale(1); opacity:.65;}
  70%, 100%{transform:scale(1.14); opacity:0;}
}
@keyframes fab-shine{
  0%, 42%{transform:translateX(-140%) rotate(18deg);}
  58%, 100%{transform:translateX(320%) rotate(18deg);}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none; transition:none;}
  .fab-register{animation:none;}
  .fab-register__pulse,
  .fab-register__shine::after{animation:none; opacity:0;}
  .fab-register:hover{transform:none;}
}