/* ==================== LANDING PAGE STYLES ==================== */

body{
  margin:0;
  font-family:system-ui;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.wrapper{
  width:1100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

/* LOGO */
.logo-wrap{
  width:960px;
}

#logo-container svg{
  width:100%;
}

#logo-container svg path.logo-glow-active{
  filter:
    drop-shadow(0 0 6px rgba(95, 208, 255, 0.45))
    drop-shadow(0 0 14px rgba(95, 208, 255, 0.18));
}

/* Logo glow animation - bright flash then settle (per-path) */
#logo-container svg path.box-morphing{
  filter:
    drop-shadow(0 0 10px rgba(127, 227, 255, 0.9))
    drop-shadow(0 0 20px rgba(95, 208, 255, 0.6))
    drop-shadow(0 0 30px rgba(95, 208, 255, 0.3)) !important;
  transition: filter 150ms ease-out;
}

#logo-container svg path.box-ready{
  filter:
    drop-shadow(0 0 8px rgba(95, 208, 255, 0.6))
    drop-shadow(0 0 16px rgba(95, 208, 255, 0.3)) !important;
  transition: filter 350ms ease-out;
}

/* SVG-level glow (not used for per-letter, but keep for reference) */
#logo-container svg.box-morphing{
  filter:
    drop-shadow(0 0 12px rgba(127, 227, 255, 0.8))
    drop-shadow(0 0 24px rgba(95, 208, 255, 0.5))
    drop-shadow(0 0 36px rgba(95, 208, 255, 0.25)) !important;
  transition: filter 150ms ease-out;
  /* Override common.css box-morphing border/box-shadow */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#logo-container svg.box-ready{
  filter:
    drop-shadow(0 0 6px rgba(95, 208, 255, 0.45))
    drop-shadow(0 0 14px rgba(95, 208, 255, 0.18)) !important;
  transition: filter 350ms ease-out;
  /* Override common.css box-ready border */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px, 1fr));
  gap:26px;
  width:100%;
}

/* CARD */
.card{
  position:relative;
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
  text-decoration:none;
  color:inherit;

  transform:translateY(20px);
  opacity:0;
}

.card.loaded{
  transform:translateY(0);
  opacity:1;
  transition:transform .6s ease, opacity .6s ease;
}

/* INNER */
.card-inner{
  position:relative;
  padding:28px 26px;
  min-height:120px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  /* energy glow transition */
  transition:filter .25s ease;
}

/* HOVER: energy bloom instead of scale */
.card:hover .card-inner{
  filter:
    drop-shadow(0 0 14px rgba(95,208,255,0.35))
    drop-shadow(0 0 40px rgba(95,208,255,0.18));
}

/* SVG BORDER */
.border-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.path{
  fill:none;
  stroke:url(#flowGrad);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}

.card.is-active .left-path,
.card.is-active .right-path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 2s ease;
}

.glow{
  fill:none;
  stroke:var(--accent2);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:40 960;
  stroke-dashoffset:1000;
  opacity:0;
}

.card.is-active .left-glow,
.card.is-active .right-glow{
  opacity:.6;
  animation:glowReveal 2s ease forwards, electricMove 1.2s linear infinite;
  animation-delay:0s,2s;
}

@keyframes glowReveal{ to{stroke-dashoffset:0;} }

@keyframes electricMove{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:-200;}
}

/* TEXT */
h2{
  margin:0 0 6px;
  color:#e6f7ff;

  text-shadow:
    0 0 6px rgba(95,208,255,0.25),
    0 0 14px rgba(95,208,255,0.10);

  transform:translateZ(0);
  backface-visibility:hidden;

  transition:color .2s ease;
}

.card:hover h2{
  color:#ffffff;
}

span{
  color:var(--muted);
  font-size:.9rem;

  text-shadow:0 0 4px rgba(95,208,255,0.08);

  transform:translateZ(0);
  backface-visibility:hidden;
}


/* ==================== MOBILE RESPONSIVE (≤768px) ==================== */
@media (max-width: 768px) {
  /* Apply background to html element to cover iOS overscroll/rubber-band areas */
  html {
    background: var(--bg2);
  }

  body {
    min-height: 100svh;
    height: auto;
  }

  .wrapper {
    width: 100%;
    max-width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
  }

  .logo-wrap {
    width: 100%;
    max-width: 100%;
  }

  #logo-container svg {
    max-width: 100%;
    height: auto;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    touch-action: manipulation;
  }
}


/* ==================== SMALL MOBILE (≤480px) ==================== */
@media (max-width: 480px) {
  .wrapper {
    padding: 16px 16px;
  }

  .card-inner {
    padding: 20px 16px;
  }
}