/* =========================================
   ServerScout — Premium Page (snappier hover)
   File: /static/css/premium-page.css
   ========================================= */

/* Tokens */
:root{
  --bg: #e9d8c7;
  --bg-1: rgba(255,255,255,0.85);
  --surface: rgba(255,255,255,0.65);
  --text: #0f172a;
  --muted: #5b6b82;

  /* brand tones (kept from your edit) */
  --brand: #e9d8c7;
  --brand-2: #3b6059;

  --accent: #88ffe1;
  --ring: 0 0 0 3px rgba(76,123,115,0.25);
  --border: rgba(15, 23, 42, 0.08);
  --radius: 16px;

  /* shadows */
  --shadow: 0 8px 26px rgba(2,6,23,0.10);
  --shadow-2: 0 14px 38px rgba(2,6,23,0.16);

  /* motion */
  --fast: 120ms;
  --faster: 90ms;
  --easing-snappy: cubic-bezier(.2,.7,.2,1);
}

body.dark{
  --bg-1: #424e5b;
  --surface: #424e5b;
  --text: #c6bbb0;
  --muted: #a0aec0;

  --brand: #E07A5F;
  --brand-2: #9ad8cf;

  --accent: #9affea;
  --ring: 0 0 0 3px rgba(122,198,187,0.25);
  --border: #c6bbb0;

  --shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 14px 44px rgba(0,0,0,0.50);
}

/* Layout wrapper (sits atop your page background from info.css) */
.premium-wrap{
  max-width: 1100px;
  margin: clamp(24px, 4vw, 56px) auto;
  padding: clamp(18px, 3vw, 28px);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Hero */
.premium-hero{
  text-align:center;
  padding: clamp(16px, 3vw, 28px) clamp(12px, 2vw, 18px);
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  border: 1px solid var(--border);
}

.hero-badge{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--brand-2);
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  margin-bottom: 10px;
}

.hero-title{
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 6px;
}

.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--muted);
  margin: 0 auto 16px;
  max-width: 42ch;
}

.hero-ctas{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--fast) var(--easing-snappy), box-shadow var(--fast) var(--easing-snappy), filter var(--fast) var(--easing-snappy);
  will-change: transform;
}

.btn-primary{
  color: var(--text);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); filter: brightness(1.03); }
.btn-primary:active{ transform: translateY(0); }

.btn-ghost{
  color: var(--text);
  background: transparent;
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
}
.btn-ghost:hover{ background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* Grid */
.premium-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  margin-top: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(16px, 3vw, 24px);
}
@media (min-width: 960px){
  .premium-grid{ grid-template-columns: 1.35fr .95fr; }
}

/* Cards — SNAPPY HOVER FIX
   - slightly smaller lift (-1px)
   - faster transitions
   - snappy easing
   - limit animated properties to transform/box-shadow only
*/
.card{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: var(--shadow);
  will-change: transform, box-shadow;
  transition:
    transform var(--fast) var(--easing-snappy),
    box-shadow var(--fast) var(--easing-snappy);
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
/* keep border static to avoid long fade-out on unhover */

/* Titles */
.card-title{
  margin:0 0 12px;
  color: var(--text);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

/* Feature list */
.feature-list{
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.feature-list li{
  display: grid;
  grid-template-columns: 34px auto;
  align-items: start;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border);
}
.feature-list .icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #E07A5F;
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.16);
}
.feature-list .text{ color: var(--text); }
.feature-list code{ background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 6px; }
body.dark .feature-list code{ background: rgba(255,255,255,0.08); }

/* Pricing */
.card-pricing .pricing-head h3{
  margin: 0 0 4px; color: var(--text); font-size: 1.15rem;
}
.card-pricing .pricing-sub{
  margin: 0 0 12px; color: var(--muted); font-size: .98rem;
}
.price{
  display:flex; align-items:flex-end; gap: 8px;
  margin: 4px 0 6px;
}
.price .amount{
  font-size: 2.2rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em;
}
.price .term{ color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.price-secondary{ color: var(--muted); margin-bottom: 10px; }

.tick-list{
  list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 8px;
}
.tick-list li{
  padding-left: 26px; position: relative; color: var(--text);
}
.tick-list li::before{
  content: '✔'; position: absolute; left: 0; top: 0; color: var(--brand);
  font-weight: 900;
}

.w-full{ width: 100%; }
.tiny{ color: var(--muted); font-size: .9rem; margin-top: 8px; text-align: center; }

/* FAQ */
.card-faq .faq{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
  padding: 10px 14px;
  /* faster open/close feedback */
  transition: background var(--fast) var(--easing-snappy), border-color var(--fast) var(--easing-snappy);
}
.card-faq .faq + .faq{ margin-top: 10px; }
.card-faq summary{
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  list-style: none;
}
.card-faq summary::-webkit-details-marker{ display:none; }
.card-faq details[open]{ border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); }
.card-faq p{ color: var(--muted); margin: 8px 2px 2px; line-height: 1.55; }

/* Links inside cards */
.card a{
  color: var(--text);
  text-decoration: none;
  background: var(--brand);
  /* remove slow color fade; instant is snappier */
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .card, .btn{ transition: none !important; }
}

.feature-list .icon img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
}