/* ERATGUARD PRO V6.2 - DESIGN LAB ONLY */

:root {
  --v62-cyan: #22d3ee;
  --v62-ice: #a5f1ff;
  --v62-navy: #050d18;
}

body {
  background: var(--v62-navy);
  font-family: "Manrope", system-ui, sans-serif;
}

.site-header {
  background: rgba(5, 13, 24, .96);
  border-bottom: 1px solid rgba(56, 189, 248, .18);
}

.hero {
  background:
    radial-gradient(ellipse at 78% 30%,
      rgba(14, 165, 233, .25),
      transparent 55%),
    linear-gradient(135deg, #050d18, #071c32);
}

.hero h1,
.section-head h2,
.account h2 {
  font-family: "Sora", sans-serif;
}

.hero h1 span {
  color: var(--v62-cyan);
}

.shield-glow {
  filter:
    drop-shadow(0 0 20px rgba(34, 211, 238, .75))
    drop-shadow(0 0 45px rgba(14, 165, 233, .35));
}

.policy-card {
  background: linear-gradient(
    125deg,
    rgba(10, 30, 52, .95),
    rgba(8, 43, 70, .95)
  );
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 18px;
}

.policy-card:hover {
  border-color: rgba(34, 211, 238, .7);
  background: #0b2945;
}

.policy-card[open] {
  border-color: var(--v62-cyan);
}

.card-icon {
  border: 1px solid rgba(34, 211, 238, .5);
  background: rgba(34, 211, 238, .08);
  color: var(--v62-cyan);
}

.card-arrow {
  background: #1d6fe0;
  color: #fff;
}

.policy-content {
  line-height: 1.75;
}

.account {
  background: linear-gradient(
    110deg,
    #0a1630 0%,
    #0b2a4a 55%,
    #0b4a63 100%
  );
  border-color: rgba(34, 211, 238, .55);
  border-radius: 26px;
}

.account-visual {
  background: rgba(34, 211, 238, .08);
  box-shadow: 0 0 55px rgba(34, 211, 238, .25);
}

.cta {
  background: var(--v62-cyan);
  color: #04121f;
  border-radius: 14px;
}

.cta:hover {
  background: #67e8f9;
}

@media (max-width: 650px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 135px;
  }

  .shield-glow {
    width: 125px;
  }

  .policy-card summary {
    min-height: 88px;
    padding: 13px;
  }

  .card-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }

  .card-label strong {
    font-size: 14px;
  }

  .card-label small {
    font-size: 12px;
  }

  .account-visual {
    display: grid;
    width: 105px;
    height: 105px;
  }

  .account-visual span {
    font-size: 60px;
  }

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

@media (max-width: 365px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 95px;
  }

  .shield-glow {
    width: 90px;
  }
}

/* V6.2 MOBILE REFINEMENT */
@media (max-width: 650px) {
  .account {
    gap: 10px;
    padding: 20px;
  }

  .account-visual {
    width: 78px;
    height: 78px;
  }

  .account-visual span {
    font-size: 43px;
  }

  .account h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .account-points {
    gap: 8px;
  }

  .policy-card summary {
    transition: background .2s ease;
  }

  .policy-card[open] summary {
    background: rgba(34, 211, 238, .045);
  }
}