/* WashSecure Dark Premium UI */

:root {
  --bg: #060807;
  --bg-2: #0a0d0b;
  --panel: rgba(10, 14, 12, 0.78);
  --panel-2: rgba(13, 18, 15, 0.86);
  --panel-soft: rgba(12, 17, 14, 0.68);
  --text: #eef7f0;
  --muted: #9db1a3;
  --green: #2ee07f;
  --green-2: #17a75a;
  --green-3: #0e6e3c;
  --line: rgba(46, 224, 127, 0.18);
  --line-strong: rgba(46, 224, 127, 0.34);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
  --glow: 0 0 0 1px rgba(46,224,127,.08), 0 0 28px rgba(46,224,127,.08);
  --radius: 28px;
}

html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(46,224,127,.10), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(12,80,44,.22), transparent 34rem),
    linear-gradient(180deg, #050706 0%, #090c0a 45%, #050706 100%);
  color: var(--text);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.header {
  background: rgba(6, 8, 7, 0.72);
  border-bottom: 1px solid rgba(46,224,127,.10);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 78px;
}

.logo {
  color: var(--text);
  font-size: 17px;
}

.logo-mark {
  background:
    linear-gradient(145deg, #0d1711 0%, #17a75a 100%);
  color: #f4fff7;
  border: 1px solid rgba(46,224,127,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(23,167,90,.30);
}

.nav {
  color: var(--muted);
  gap: 26px;
  font-weight: 650;
}

.nav a {
  position: relative;
}

.nav a:hover {
  color: var(--text);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  transition: width .22s ease;
}

.nav a:hover::after {
  width: 100%;
}

.btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%),
    linear-gradient(145deg, #0f2016, #18a85a 70%, #2ee07f 100%);
  color: #f6fff8;
  border: 1px solid rgba(46,224,127,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px rgba(16, 119, 63, .28),
    0 0 24px rgba(46,224,127,.10);
}

.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 24px 54px rgba(16, 119, 63, .34),
    0 0 30px rgba(46,224,127,.18);
}

.btn-light {
  background: rgba(11, 15, 13, .76);
  color: var(--text);
  border: 1px solid rgba(46,224,127,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.26);
}

.btn-small {
  min-height: 42px;
}

.hero {
  padding: 112px 0 92px;
}

.hero-grid {
  gap: 72px;
}

.hello-card {
  background:
    linear-gradient(180deg, rgba(13,18,15,.84), rgba(8,11,10,.76));
  border: 1px solid rgba(46,224,127,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    var(--shadow),
    0 0 36px rgba(46,224,127,.06);
}

.hello-card span {
  background: linear-gradient(135deg, #ffffff 0%, #99f5bf 45%, #2ee07f 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.badge {
  background: rgba(13, 24, 18, .78);
  color: #b7f8d1;
  border: 1px solid rgba(46,224,127,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

h1, h2, h3 {
  color: var(--text);
}

h1 {
  letter-spacing: -.078em;
}

h2 {
  letter-spacing: -.06em;
}

.hero-text,
.section-head p,
.card p,
.step p,
.price-card p,
.mini-card p,
.device-card p,
.trial-box p,
.instruction-card p,
.about p,
.final p,
.setup-card-head p,
.setup-checks p,
.app-choice-top p,
.support-box p,
.footer p,
.footer-links,
.quick-nav a,
.faq p,
li,
.setup-card p {
  color: var(--muted);
}

.hero-note {
  color: #8fa697;
}

.hero-visual {
  min-height: 560px;
}

.phone-card {
  width: min(390px, 100%);
  min-height: 550px;
  background:
    radial-gradient(circle at top right, rgba(46,224,127,.12), transparent 16rem),
    linear-gradient(180deg, rgba(14,19,17,.92), rgba(9,12,10,.90));
  border: 1px solid rgba(46,224,127,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 40px 120px rgba(0,0,0,.46),
    0 0 46px rgba(46,224,127,.08);
}

.phone-top {
  background: linear-gradient(145deg, #0d0f0e, #232927);
}

.status-pill {
  background: rgba(14, 31, 21, .86);
  color: #aef0c8;
  border: 1px solid rgba(46,224,127,.16);
}

.phone-card p {
  color: var(--muted);
}

.server-list div {
  background: rgba(8, 11, 10, .74);
  border: 1px solid rgba(46,224,127,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.server-list span {
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(46,224,127,.10);
}

.glow-one {
  background: rgba(46,224,127,.14);
}

.glow-two {
  background: rgba(24,119,63,.22);
}

.section {
  padding: 98px 0;
}

.soft,
.trial,
.premium-section,
.premium-help {
  background:
    radial-gradient(circle at 10% 14%, rgba(46,224,127,.06), transparent 24rem),
    rgba(0,0,0,.08);
  border-top: 1px solid rgba(46,224,127,.06);
  border-bottom: 1px solid rgba(46,224,127,.06);
}

.section-head {
  margin-bottom: 50px;
}

.eyebrow {
  color: #63f09d !important;
  letter-spacing: .13em;
}

.card,
.step,
.price-card,
.mini-card,
.device-card,
.trial-box,
.instruction-card,
.faq details,
.setup-card,
.setup-panel,
.premium-help-box,
.support-box,
.app-choice-card,
.trouble-card,
.premium-grid > div:first-child,
.quick-nav a {
  background:
    linear-gradient(180deg, rgba(13,18,15,.86), rgba(9,12,10,.82));
  border: 1px solid rgba(46,224,127,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    var(--shadow),
    0 0 0 1px rgba(46,224,127,.04);
  backdrop-filter: blur(18px);
}

.card,
.step,
.device-card,
.mini-card,
.trouble-card,
.app-choice-card,
.quick-nav a {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.card:hover,
.step:hover,
.device-card:hover,
.mini-card:hover,
.trouble-card:hover,
.app-choice-card:hover,
.quick-nav a:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 30px 86px rgba(0,0,0,.42),
    0 0 28px rgba(46,224,127,.10);
}

.icon {
  background:
    linear-gradient(145deg, rgba(46,224,127,.12), rgba(17,24,20,.56));
  color: #90f1b9;
  border: 1px solid rgba(46,224,127,.16);
  font-size: 13px;
  letter-spacing: .08em;
}

.step span,
.setup-checks span,
.setup-steps li::before {
  background:
    linear-gradient(145deg, #0d1b13, #17a75a 72%, #2ee07f);
  color: #f8fff9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 28px rgba(16,119,63,.22);
}

.pricing {
  gap: 28px;
}

.price-card {
  padding: 40px;
}

.price-card.featured {
  background:
    radial-gradient(circle at top right, rgba(46,224,127,.12), transparent 18rem),
    linear-gradient(180deg, rgba(14,20,16,.92), rgba(8,11,10,.88));
  border-color: rgba(46,224,127,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 34px 100px rgba(0,0,0,.44),
    0 0 40px rgba(46,224,127,.10);
}

.recommend {
  background:
    linear-gradient(145deg, #0d1b13, #17a75a 70%, #2ee07f);
  color: #f7fff9;
  box-shadow: 0 12px 28px rgba(16,119,63,.20);
}

.price {
  color: #f4fbf6;
}

.price span {
  color: #94a99b;
}

li::before {
  color: #63f09d;
}

.device-card span,
.instruction-title span,
.setup-icon,
.app-choice-top span {
  background:
    linear-gradient(145deg, #0d1b13, #17a75a 72%, #2ee07f);
  color: #f5fff8;
  border: 1px solid rgba(46,224,127,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 38px rgba(16,119,63,.20);
}

.device-card span {
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
}

.setup-panel h2,
.setup-card h2,
.premium-help-box h2,
.support-box h2,
.final-box h2 {
  color: var(--text);
}

.app-note {
  background: rgba(12, 24, 17, .82);
  color: #b7f8d1;
  border: 1px solid rgba(46,224,127,.16);
}

.setup-steps li {
  background: rgba(7, 10, 9, .66);
  border: 1px solid rgba(46,224,127,.10);
  color: var(--muted);
}

.setup-steps strong {
  color: var(--text);
}

.quote-box {
  background:
    linear-gradient(145deg, #08100c, #14241b);
  color: #f4fff7;
  border: 1px solid rgba(46,224,127,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 44px rgba(0,0,0,.30);
}

.faq summary {
  color: var(--text);
}

.final-box {
  background:
    radial-gradient(circle at 12% 14%, rgba(46,224,127,.12), transparent 22rem),
    radial-gradient(circle at 86% 18%, rgba(12,80,44,.20), transparent 26rem),
    linear-gradient(180deg, rgba(13,18,15,.90), rgba(8,11,10,.88));
  border: 1px solid rgba(46,224,127,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 36px 110px rgba(0,0,0,.42),
    0 0 40px rgba(46,224,127,.08);
}

.footer {
  background: rgba(6, 8, 7, 0.84);
  border-top: 1px solid rgba(46,224,127,.08);
}

.footer-links a:hover {
  color: var(--text);
}

.quick-nav a {
  color: var(--text);
}

.support-box {
  text-align: center;
}

@media (max-width: 980px) {
  .hero {
    padding: 72px 0 64px;
  }

  .hero-grid {
    gap: 46px;
  }

  .hero-visual {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .header-inner {
    min-height: 68px;
  }

  .hero {
    padding: 54px 0 48px;
  }

  h1 {
    font-size: 42px;
    letter-spacing: -.07em;
  }

  h2 {
    font-size: 33px;
  }

  .section {
    padding: 64px 0;
  }

  .phone-card {
    min-height: auto;
  }

  .btn {
    min-height: 54px;
  }

  .card,
  .step,
  .price-card,
  .mini-card,
  .trial-box,
  .instruction-card,
  .setup-card,
  .premium-help-box,
  .support-box {
    border-radius: 24px;
  }
}

/* Fix remaining light blocks in instructions page */

.setup-checks div,
.premium-help-cards div {
  background:
    linear-gradient(180deg, rgba(13,18,15,.88), rgba(8,11,10,.84)) !important;
  border: 1px solid rgba(46,224,127,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 22px 64px rgba(0,0,0,.34),
    0 0 0 1px rgba(46,224,127,.04) !important;
  color: var(--text) !important;
}

.setup-checks h3,
.premium-help-cards h3 {
  color: var(--text) !important;
}

.setup-checks p,
.premium-help-cards p {
  color: var(--muted) !important;
}

.setup-panel,
.premium-help-box {
  background:
    radial-gradient(circle at top right, rgba(46,224,127,.08), transparent 20rem),
    linear-gradient(180deg, rgba(13,18,15,.90), rgba(8,11,10,.86)) !important;
  border: 1px solid rgba(46,224,127,.18) !important;
}


/* Hero phone visual fix */

.hero-visual {
  position: relative;
}

.phone-card {
  background:
    radial-gradient(circle at top right, rgba(46,224,127,.16), transparent 14rem),
    radial-gradient(circle at bottom left, rgba(46,224,127,.08), transparent 16rem),
    linear-gradient(180deg, rgba(18,24,21,.96), rgba(12,16,14,.94)) !important;
  border: 1px solid rgba(46,224,127,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(46,224,127,.05),
    0 40px 120px rgba(0,0,0,.48),
    0 0 40px rgba(46,224,127,.10) !important;
}

.phone-card h3 {
  color: #f5fff8 !important;
  font-size: 42px;
  line-height: 1.05;
}

.phone-card p {
  color: #b8cabf !important;
}

.phone-top {
  background: linear-gradient(145deg, #050606, #1f2622) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.status-pill {
  background: linear-gradient(145deg, rgba(25,65,42,.95), rgba(12,34,22,.92)) !important;
  color: #c8ffdd !important;
  border: 1px solid rgba(46,224,127,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.22);
}

.server-list {
  gap: 14px;
}

.server-list div {
  background:
    linear-gradient(180deg, rgba(20,26,23,.94), rgba(12,16,14,.92)) !important;
  border: 1px solid rgba(46,224,127,.16) !important;
  color: #dbe9e0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 30px rgba(0,0,0,.24) !important;
}

.server-list span {
  background: linear-gradient(145deg, #1dd36f, #56f39a) !important;
  box-shadow:
    0 0 0 6px rgba(46,224,127,.12),
    0 0 18px rgba(46,224,127,.18) !important;
}

.glow-one {
  background: radial-gradient(circle, rgba(46,224,127,.22) 0%, rgba(46,224,127,.06) 55%, transparent 100%) !important;
  filter: blur(24px);
}

.glow-two {
  background: radial-gradient(circle, rgba(25,120,70,.28) 0%, rgba(25,120,70,.08) 55%, transparent 100%) !important;
  filter: blur(24px);
}

/* Slightly lift hero text block too */
.hello-card,
.badge {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 40px rgba(0,0,0,.22),
    0 0 20px rgba(46,224,127,.04) !important;
}

@media (max-width: 640px) {
  .phone-card h3 {
    font-size: 36px;
  }

  .phone-card {
    padding: 22px;
  }
}