:root{
  --bg:#070a12;
  --glass: rgba(0,0,0,.32);
  --line: rgba(255,255,255,.10);
}

body{ background: var(--bg); }

/* Background glow */
.bgGlow{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,106,0,.22), transparent 45%),
    radial-gradient(circle at 82% 24%, rgba(0,194,255,.18), transparent 45%),
    radial-gradient(circle at 50% 84%, rgba(124,58,237,.14), transparent 45%);
}
body > *{ position: relative; z-index: 1; }

/* Tech animated grid */
.techGrid{
  position: fixed; inset: 0; pointer-events:none; z-index: 0;
  opacity: .18;
  background:
    linear-gradient(to right, rgba(0,194,255,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,106,0,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 20%, black 28%, transparent 70%);
}

/* Cards */
.glassCard{
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.cardHover{
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.cardHover:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

/* Hero logo card w/ sheen */
.logoCard{
  position:relative;
  border-radius: 30px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.34);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 26px 90px rgba(0,0,0,.60),
    0 0 45px rgba(0,194,255,.12),
    0 0 45px rgba(255,106,0,.12);
}
.logoCard::after{
  content:"";
  position:absolute; inset:-50%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(0,194,255,.14) 35%,
    rgba(255,106,0,.16) 65%,
    transparent 100%);
  animation: sheen 6.5s linear infinite;
  opacity: .75;
}
@keyframes sheen{
  0%{ transform: translateX(-22%) translateY(-10%) rotate(12deg); }
  100%{ transform: translateX(22%) translateY(10%) rotate(12deg); }
}

.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .5rem .75rem;
}

/* Buttons */
.btnPrimary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.05rem; border-radius:18px;
  background: linear-gradient(135deg, rgba(0,194,255,.92), rgba(255,106,0,.92));
  color:#08111f; font-weight:800;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
  transition: transform .15s ease, filter .15s ease;
}
.btnPrimary:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.btnSecondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.05rem; border-radius:18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btnSecondary:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }

/* Inputs */
.input, .textarea{
  width:100%;
  padding: .88rem .98rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
  outline: none;
}
.textarea{ resize: vertical; min-height: 110px; }
.input:focus, .textarea:focus{
  border-color: rgba(0,194,255,.35);
  box-shadow: 0 0 0 4px rgba(0,194,255,.12);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 14px 45px rgba(0,0,0,.55);
  z-index: 9999;
}

/* Mobile CTA bar */
.mobileBar{
  position: fixed; left:0; right:0; bottom:0;
  z-index: 9998;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.mobileBarInner{
  max-width: 72rem;
  margin: 0 auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
@media (min-width: 768px){
  .mobileBar{ display:none; }
  .toast{ bottom: 20px; }
}

/* Subtle float animation on hero card (motion-safe) */
@media (prefers-reduced-motion: no-preference){
  .floaty{
    animation: floaty 5.5s ease-in-out infinite;
  }
  @keyframes floaty{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-6px); }
  }
}

/* Optional logo glow (nice for tech) */
.r2LogoGlow{
  filter:
    drop-shadow(0 0 10px rgba(0,194,255,.35))
    drop-shadow(0 0 14px rgba(255,106,0,.22));
}
.heroLogoWrap{
  margin-bottom: 18px;
}

.heroLogo{
  height: 90px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 640px){
  .heroLogo{ height: 110px; }
}
@media (min-width: 768px){
  .heroLogo{ height: 130px; }
}
@media (min-width: 1024px){
  .heroLogo{ height: 150px; }
}
@media (min-width: 1280px){
  .heroLogo{ height: 170px; }
}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .revealIn{
    opacity: 1;
    transform: translateY(0);
  }
}