/* ==========================================================================
   HOME HERO — ana sayfa kampanya alani (30.08.2026)
   --------------------------------------------------------------------------
   Alan adi sayfalarindaki premium tasarim diliyle ayni aile:
   koyu zemin + aurora + nokta izgarasi + gradyan tipografi + cam kartlar.
   Kapsam: yalnizca .index-page .hh-hero — sitenin geri kalanina dokunmaz.
   Icerik/mantik korunur: kampanya mesaji, 4 ucretsiz ozellik, ayni CTA hedefi.
   ========================================================================== */

.index-page .hh-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(106, 98, 254, .58), transparent 60%),
    radial-gradient(900px 520px at 88% 6%, rgba(141, 134, 255, .30), transparent 55%),
    radial-gradient(760px 460px at 55% 118%, rgba(106, 98, 254, .42), transparent 62%),
    linear-gradient(180deg, #0d0c22 0%, #151239 55%, #1b1846 100%);
  padding: 84px 0 76px;
  color: #fff;
}
.index-page .hh-hero::before {                 /* ince nokta izgarasi */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 500px at 42% 30%, #000 25%, transparent 78%);
          mask-image: radial-gradient(760px 500px at 42% 30%, #000 25%, transparent 78%);
  pointer-events: none;
}
.index-page .hh-hero::after {                  /* yavas aurora */
  content: "";
  position: absolute;
  width: 640px; height: 640px;
  right: -190px; top: -230px;
  background: conic-gradient(from 90deg, rgba(106,98,254,.5), rgba(141,134,255,.28), rgba(255,184,48,.14), rgba(106,98,254,.5));
  border-radius: 50%;
  filter: blur(90px);
  animation: hhAurora 22s linear infinite;
  pointer-events: none;
}
@keyframes hhAurora { to { transform: rotate(360deg); } }

.hh-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: center;
}

/* ------------------------------------------------------------- sol kolon */
.hh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--primary-font);
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #cfd2ff;
}
.hh-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255,184,48,.18);
  animation: hhPulse 2.4s ease-in-out infinite;
}
@keyframes hhPulse { 50% { box-shadow: 0 0 0 8px rgba(255,184,48,.05); } }

.hh-title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 24px 0 14px;
  color: #fff;
}
.hh-title .hh-grad {
  background: linear-gradient(92deg, #ffd98a 0%, var(--gold) 45%, #ff9f43 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hh-title .hh-serif {
  font-family: var(--third-font);
  font-style: italic; font-weight: 600;
  letter-spacing: 0;
}
.hh-sub {
  font-family: var(--secondary-font);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: #aab0d6;
  max-width: 560px;
  margin: 0 0 26px;
}

/* ucretsiz ozellik rozetleri */
.hh-perks {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 30px;
}
.hh-perk {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
  font-family: var(--primary-font);
  font-size: 13.5px; font-weight: 500;
  color: #e7e9ff;
}
.hh-perk svg { width: 15px; height: 15px; stroke: #3ddc84; flex: 0 0 auto; }

/* CTA cifti */
.hh-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hh-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 32px;
  border-radius: 13px;
  font-family: var(--primary-font);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hh-btn.solid {
  background: linear-gradient(135deg, var(--primary) 0%, #8d86ff 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(106,98,254,.45);
}
.hh-btn.solid:hover { transform: translateY(-3px); filter: brightness(1.06); color: #fff; text-decoration: none; box-shadow: 0 18px 40px rgba(106,98,254,.55); }
.hh-btn.ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.hh-btn.ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.hh-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.hh-btn.solid:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------ sag kolon */
.hh-visual {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* yorunge halkalari + gezinen isik noktalari */
.hh-rings { position: absolute; inset: 0; pointer-events: none; }
.hh-rings::before, .hh-rings::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(141, 134, 255, .20);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hh-rings::before { width: 480px; height: 480px; }
.hh-rings::after  { width: 640px; height: 640px; border-color: rgba(141, 134, 255, .11); }
.hh-rings .orb {
  position: absolute;
  left: 50%; top: 50%;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  animation: hhOrbit 34s linear infinite;
}
.hh-rings .orb::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(255, 184, 48, .15), 0 0 18px rgba(255, 184, 48, .55);
}
.hh-rings .orb.o2 {
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  animation-duration: 52s;
  animation-direction: reverse;
}
.hh-rings .orb.o2::before {
  background: #8d86ff;
  box-shadow: 0 0 0 5px rgba(141, 134, 255, .16), 0 0 18px rgba(141, 134, 255, .6);
}
@keyframes hhOrbit { to { transform: rotate(360deg); } }

/* vitrin karti */
.hh-card {
  position: relative;
  width: min(384px, 100%);
  padding: 30px 30px 24px;
  border-radius: 26px;
  background:
    radial-gradient(360px 180px at 20% -8%, rgba(141, 134, 255, .22), transparent 70%),
    linear-gradient(165deg, rgba(106, 98, 254, .24) 0%, rgba(22, 19, 60, .58) 45%, rgba(11, 12, 27, .66) 100%);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px rgba(5, 6, 20, .6), inset 0 1px 0 rgba(255, 255, 255, .09);
  text-align: center;
}
.hh-card::before {                        /* gradyan cerceve (mor -> altin) */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(141, 134, 255, .75), rgba(106, 98, 254, .22) 42%, rgba(255, 184, 48, .55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.hh-card-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 184, 48, .30);
  background: rgba(255, 184, 48, .08);
  font-family: var(--primary-font);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.hh-card-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 184, 48, .16);
  animation: hhPulse 2.4s ease-in-out infinite;
}
.hh-card .pct {
  display: block;
  margin-top: 14px;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 78px;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #ffd98a, var(--gold) 55%, #ff9f43);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hh-card .lbl {
  display: block;
  margin-top: 4px;
  font-family: var(--third-font);
  font-style: italic; font-weight: 600;
  font-size: 21px;
  color: #e7e9ff;
}

/* karta gomulu kampanya satirlari */
.hh-scopes {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex; flex-direction: column; gap: 10px;
}
.hh-scope {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  text-align: left;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hh-scope:hover {
  background: rgba(106, 98, 254, .18);
  border-color: rgba(141, 134, 255, .45);
  transform: translateX(4px);
  text-decoration: none;
}
.hh-scope .ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(106, 98, 254, .38), rgba(106, 98, 254, .14));
  border: 1px solid rgba(141, 134, 255, .30);
  color: #dcdaff;
}
.hh-scope .ico svg { width: 19px; height: 19px; }
.hh-scope .txt { flex: 1 1 auto; min-width: 0; }
.hh-scope .txt strong {
  display: block;
  font-family: var(--primary-font);
  font-size: 14px; font-weight: 600;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-scope .txt small {
  display: block;
  margin-top: 1px;
  font-family: var(--secondary-font);
  font-size: 11.5px;
  color: #aab0d6;
}
.hh-scope .arr {
  flex: 0 0 auto;
  display: flex;
  color: #8d86ff;
  transition: transform .2s ease, color .2s ease;
}
.hh-scope .arr svg { width: 15px; height: 15px; }
.hh-scope:hover .arr { transform: translateX(3px); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .index-page .hh-hero::after, .hh-eyebrow .dot, .hh-card-tag .dot, .hh-rings .orb { animation: none !important; }
}

/* ----------------------------------------------------------- duyarlilik */
@media only screen and (max-width: 1199.98px) {
  .hh-card { width: min(348px, 100%); padding: 26px 24px 20px; }
  .hh-card .pct { font-size: 66px; }
  .hh-rings { display: none; }   /* dar masaustunde dis halka sol kolona sarkmasin */
}
@media only screen and (max-width: 991.98px) {
  .hh-grid { grid-template-columns: 1fr; gap: 36px; }
  .hh-visual { min-height: 0; padding: 16px 0 8px; }
}
@media only screen and (max-width: 767.98px) {
  .index-page .hh-hero { padding: 56px 0 48px; }
  .hh-title { font-size: clamp(30px, 8.4vw, 38px); }
  .hh-actions .hh-btn { width: 100%; justify-content: center; }
  .hh-card { width: 100%; max-width: 360px; margin: 0 auto; }
  .hh-card .pct { font-size: 58px; }
}

/* ==========================================================================
   HP — anasayfa premium bolumleri (ozellik kartlari + alan adi bandi)
   ========================================================================== */

/* ------------------------------------------------- ozellik kartlari (acik) */
.hp-feat { padding: 80px 0 84px; background: #fff; }
.hp-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--primary-font);
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary);
}
.hp-eyebrow::before, .hp-eyebrow::after {
  content: ""; width: 26px; height: 1px;
  background: rgba(106, 98, 254, .38);
}
.hp-title {
  margin: 14px 0 12px;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.01em;
  color: var(--dark);
}
.hp-title em, .hp-d-title em { font-family: var(--third-font); font-style: italic; font-weight: 600; }
.hp-title em {
  background: linear-gradient(92deg, var(--primary), #8d86ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hp-sub { margin: 0; font-family: var(--secondary-font); font-size: 16px; line-height: 1.7; color: #5a5b73; }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hp-card {
  position: relative; overflow: hidden;
  padding: 34px 26px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), #8d86ff 55%, var(--gold));
  opacity: 0; transition: opacity .2s ease;
}
.hp-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(13, 12, 34, .10); border-color: rgba(106, 98, 254, .35); }
.hp-card:hover::before { opacity: 1; }
.hp-ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(106, 98, 254, .16), rgba(106, 98, 254, .05));
  border: 1px solid rgba(106, 98, 254, .22);
  color: var(--primary);
}
.hp-ico svg { width: 26px; height: 26px; }
.hp-card h3 { margin: 0 0 8px; font-family: var(--primary-font); font-size: 19px; font-weight: 600; color: var(--dark); }
.hp-card p { margin: 0; font-family: var(--secondary-font); font-size: 14.5px; line-height: 1.65; color: #5a5b73; }

/* --------------------------------------------------- alan adi bandi (koyu) */
.hp-domain {
  position: relative; overflow: hidden;
  padding: 72px 0;
  color: #fff;
  background:
    radial-gradient(760px 380px at 8% 110%, rgba(106, 98, 254, .45), transparent 60%),
    radial-gradient(680px 340px at 94% -20%, rgba(255, 184, 48, .14), transparent 55%),
    linear-gradient(120deg, #0d0c22 0%, #171444 55%, #1e1950 100%);
}
.hp-domain::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(640px 380px at 30% 50%, #000 25%, transparent 78%);
          mask-image: radial-gradient(640px 380px at 30% 50%, #000 25%, transparent 78%);
  pointer-events: none;
}
.hp-d-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: center;
}
.hp-d-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-family: var(--primary-font);
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #cfd2ff;
}
.hp-d-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 184, 48, .18);
}
.hp-d-title {
  margin: 18px 0 0;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.3;
  color: #fff;
}
.hp-d-title em {
  background: linear-gradient(92deg, #ffd98a, var(--gold) 55%, #ff9f43);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hp-form-box {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hp-form-box:focus-within { border-color: rgba(141, 134, 255, .65); box-shadow: 0 0 0 4px rgba(106, 98, 254, .18); }
.hp-si { display: flex; color: #aab0d6; margin-left: 12px; flex: 0 0 auto; }
.hp-si svg { width: 18px; height: 18px; }
.hp-form-box input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 6px;
  background: transparent; border: 0; outline: 0;
  font-family: var(--secondary-font); font-size: 15.5px;
  color: #fff;
}
.hp-form-box input[type="text"]::placeholder { color: #8a8ca8; }
.hp-form-btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 13px 26px;
  border: 0; border-radius: 11px;
  background: linear-gradient(135deg, var(--primary) 0%, #8d86ff 100%);
  box-shadow: 0 10px 24px rgba(106, 98, 254, .4);
  font-family: var(--primary-font); font-size: 14px; font-weight: 600;
  color: #fff; cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.hp-form-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hp-form-btn svg { width: 15px; height: 15px; }
.hp-form-note { margin: 13px 4px 0; font-family: var(--secondary-font); font-size: 13px; color: #aab0d6; }
.hp-form-note span { margin-left: 9px; font-family: var(--primary-font); font-size: 12.5px; font-weight: 600; color: #dcdaff; }

/* --------------------------------------------------------- hp duyarlilik */
@media only screen and (max-width: 1199.98px) {
  .hp-d-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hp-d-form { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media only screen and (max-width: 991.98px) {
  .hp-feat { padding: 56px 0 60px; }
  .hp-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-domain { padding: 56px 0; }
}
@media only screen and (max-width: 575.98px) {
  .hp-form-box { flex-wrap: wrap; padding: 10px; }
  .hp-form-box input[type="text"] { flex: 1 1 100%; order: 1; padding: 10px 8px; }
  .hp-si { order: 0; }
  .hp-form-btn { order: 2; width: 100%; justify-content: center; }
}

/* ------------------------------------- paket bolumu (yalniz anasayfa) ---- */
.index-page .filter-bar { margin-bottom: 30px; }
.index-page .filter-bar .item {
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--primary-font);
  font-size: 14px; font-weight: 600;
  color: var(--dark);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}
.index-page .filter-bar .item:not(.active):hover {
  background: #fff;
  border-color: rgba(106, 98, 254, .45);
  color: var(--primary);
}
.index-page .filter-bar .item.active {
  background: linear-gradient(135deg, var(--primary), #8d86ff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(106, 98, 254, .35);
}

/* yeni fiyat kartlari */
.hp-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.hp-plan {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(13, 12, 34, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-plan::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), #8d86ff 55%, var(--gold));
  opacity: 0; transition: opacity .2s ease;
}
.hp-plan:hover { transform: translateY(-5px); border-color: rgba(106, 98, 254, .35); box-shadow: 0 24px 54px rgba(13, 12, 34, .10); }
.hp-plan:hover::before { opacity: 1; }
.hp-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hp-plan-head h3 { margin: 0 0 4px; font-family: var(--primary-font); font-size: 20px; font-weight: 600; color: var(--dark); }
.hp-plan-head p { margin: 0; font-family: var(--secondary-font); font-size: 13.5px; line-height: 1.55; color: #7a7c96; }
.hp-plan-flags { display: inline-flex; flex: 0 0 auto; }
.hp-plan-flags img {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(13, 12, 34, .18);
}
.hp-plan-flags img + img { margin-left: -7px; }
.hp-plan-price {
  display: flex; align-items: baseline; gap: 7px;
  margin: 14px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.hp-plan-price small { font-family: var(--secondary-font); font-size: 13px; color: #7a7c96; }
.hp-plan-price .amt {
  font-family: var(--primary-font);
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  color: var(--primary);
}
.hp-plan-price .amt.free { font-size: 26px; }
.hp-plan-feats {
  list-style: none;
  margin: 0 0 20px; padding: 0;
  display: grid; gap: 11px;
  flex: 1 1 auto;
}
.hp-plan-feats li { display: flex; align-items: flex-start; gap: 11px; }
.hp-plan-feats .chk {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(34, 181, 115, .12);
  color: #1ea36a;
}
.hp-plan-feats .chk svg { width: 12px; height: 12px; }
.hp-plan-feats .ft strong { display: block; font-family: var(--primary-font); font-size: 14px; font-weight: 600; color: var(--dark); line-height: 1.35; }
.hp-plan-feats .ft small { display: block; font-family: var(--secondary-font); font-size: 12.5px; color: #8a8ca8; margin-top: 1px; }
.hp-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #8d86ff);
  box-shadow: 0 10px 24px rgba(106, 98, 254, .30);
  font-family: var(--primary-font); font-size: 14.5px; font-weight: 600;
  color: #fff; text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.hp-plan-btn:hover { color: #fff; text-decoration: none; transform: translateY(-2px); filter: brightness(1.06); }
.hp-plan-btn svg { width: 15px; height: 15px; }
@media only screen and (max-width: 991.98px) {
  .hp-plans { grid-template-columns: 1fr; gap: 14px; }
}