:root{
  /* Core palette */
  --bg0:#0A0C10;          /* near-black neutral */
  --bg1:#0D1118;          /* graphite/navy neutral */
  --text:#E6EAF0;         /* cool gray-white */
  --muted:#9AA4B2;        /* cool gray */
  --accent:#2FFFD6;       /* electric teal */
  --card:rgba(255,255,255,0.025);
  --stroke:rgba(255,255,255,0.06);
  --shadow:rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html, body { height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);

  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(47,255,214,0.05), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(120,130,150,0.08), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));

  overflow-x:hidden;
}

/* Subtle grid texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(800px 520px at 50% 28%, rgba(0,0,0,1), transparent 70%);
  opacity:0.28;
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* Header intentionally silent */
.site-header{
  height:24px;
}

/* Brand mini (dot + domain) */
.brand-mini{
  display:flex;
  gap:10px;
  align-items:center;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}

/* Accent dot */
.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow: 0 0 18px rgba(47,255,214,0.5);
  animation: breathe 4.8s ease-in-out infinite;
}

/* Main */
.site-main{
  flex:1;
  display:grid;
  place-items:center;
  padding: 40px 24px 60px;
}

/* Hero layout */
.hero{
  width:100%;
  max-width:1100px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:36px;
  align-items:center;
  position:relative;
}

/* Neutral anchor panel */
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: rgba(0,0,0,0.18);
  border-radius:28px;
  z-index:-1;
}

@media (max-width: 920px){
  .hero{
    grid-template-columns: 1fr;
    gap:24px;
  }
  .hero::before{
    inset:-22px;
  }
}

/* Card material */
.card{
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--stroke);
  backdrop-filter: blur(14px) saturate(1.05);
}

/* Copy block */
.copy{
  padding:24px;
}

h1{
  margin:0 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing:-0.02em;
  line-height:1.05;
}

.tagline{
  margin:0 0 10px;
  font-size: clamp(16px, 1.6vw, 20px);
  opacity:0.92;
}

.subline{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  max-width:52ch;
}

/* Logo card */
.logo-card{
  display:grid;
  place-items:center;
  padding:42px 24px;
  position:relative;
  overflow:hidden;
}

/* Tight glow field */
.logo-card::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(47,255,214,0.12), transparent 60%);
  filter: blur(2px);
  animation: drift 10s ease-in-out infinite;
  opacity:0.75;
}

/* Logo */
.logo{
  width:min(340px, 70vw);
  max-width:360px;
  height:auto;
  position:relative;
  z-index:1;
  transform-origin:50% 50%;
}

.logo.shadow{
  animation: float 8s ease-in-out infinite, glow 4.8s ease-in-out infinite;
}

/* Footer */
.site-footer{
  padding:28px 24px 36px;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  display:flex;
  justify-content:flex-start;
  border-top:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  font-size:12px;
}

.footer-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-copy{
  opacity:0.85;
}

/* Animations */
@keyframes breathe{
  0%,100% {
    transform: scale(1);
    opacity:0.9;
    box-shadow: 0 0 18px rgba(47,255,214,0.5);
  }
  50% {
    transform: scale(1.12);
    opacity:1;
    box-shadow: 0 0 28px rgba(47,255,214,0.7);
  }
}

@keyframes float{
  0%,100% { transform: translateY(0px) rotate(-0.6deg); }
  50%     { transform: translateY(-10px) rotate(0.6deg); }
}

@keyframes drift{
  0%,100% { transform: translate(-18px, -12px); }
  50%     { transform: translate(18px, 10px); }
}

@keyframes glow{
  0%,100% {
    filter:
      drop-shadow(0 14px 30px var(--shadow))
      drop-shadow(0 0 14px rgba(47,255,214,0.22))
      drop-shadow(0 0 30px rgba(47,255,214,0.10));
  }
  50% {
    filter:
      drop-shadow(0 14px 30px var(--shadow))
      drop-shadow(0 0 22px rgba(47,255,214,0.38))
      drop-shadow(0 0 46px rgba(47,255,214,0.18));
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .dot,
  .logo-card::before,
  .logo.shadow{
    animation:none !important;
  }
}