/* Zainur Packages - purpose-built page, using the shared green/gold identity */
.packages-hero {
  padding: 150px 0 82px;
  background:
    radial-gradient(circle at 85% 25%, rgba(204,163,84,.20), transparent 28%),
    linear-gradient(135deg, var(--green-deep), #0d412f 58%, #163f32);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.packages-hero::after {
  content:''; position:absolute; width:460px; height:460px; border:1px solid rgba(247,216,141,.13); border-radius:50%; right:-160px; bottom:-260px;
}
.packages-hero-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:62px; align-items:center; position:relative; z-index:1; }
.packages-kicker,.package-type,.premium-status,.renewal-label { font-size:11px; font-weight:800; letter-spacing:.13em; color:var(--gold-light); }
.packages-hero h1 { font-family:var(--serif); font-size:clamp(46px,6vw,76px); font-weight:700; letter-spacing:-.035em; max-width:820px; margin:12px 0 18px; }
.packages-hero-copy>p { color:rgba(255,255,255,.78); max-width:720px; font-size:16px; line-height:1.75; }
.packages-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.packages-hero-note { background:rgba(255,255,255,.07); border:1px solid rgba(247,216,141,.27); border-radius:22px; padding:26px; backdrop-filter:blur(10px); }
.hero-note-icon { width:46px; height:46px; border-radius:14px; background:rgba(247,216,141,.12); color:var(--gold-light); display:grid; place-items:center; font-size:20px; margin-bottom:22px; }
.hero-note-label { display:block; font-size:10px; font-weight:800; letter-spacing:.13em; color:var(--gold-light); margin-bottom:8px; }
.packages-hero-note strong { font-family:var(--serif); font-size:28px; line-height:1.15; font-weight:700; }
.packages-hero-note p { color:rgba(255,255,255,.67); font-size:12.5px; line-height:1.6; margin:13px 0 0; }

.package-basics { background:#fff; border-bottom:1px solid rgba(8,51,38,.08); }
.package-basics-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.package-basics article { padding:24px 20px; display:flex; align-items:flex-start; gap:12px; border-right:1px solid rgba(8,51,38,.07); }
.package-basics article:last-child { border-right:0; }
.package-basics i { color:var(--gold-deep); font-size:20px; margin-top:1px; }
.package-basics strong { display:block; color:var(--green); font-size:12.5px; margin-bottom:3px; }
.package-basics span { display:block; color:var(--ink-muted); font-size:11.5px; line-height:1.45; }

.packages-main { padding:88px 0 68px; background:var(--cream); }
.package-section-heading { max-width:720px; margin:0 auto 42px; text-align:center; }
.package-section-heading.compact { margin-bottom:34px; }
.package-section-heading h2 { font-family:var(--serif); color:var(--green); font-size:clamp(36px,4.6vw,54px); margin:8px 0 12px; }
.package-section-heading p { color:var(--ink-muted); font-size:14px; line-height:1.7; }
.active-packages-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1080px; margin:0 auto; align-items:stretch; }
.package-detail-card { background:#fff; border:1px solid rgba(8,51,38,.10); border-radius:26px; padding:32px; box-shadow:0 12px 35px rgba(8,51,38,.05); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.package-detail-card::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; top:-100px; right:-90px; background:rgba(204,163,84,.08); }
.standard-card { border:1.5px solid rgba(204,163,84,.48); box-shadow:0 22px 58px rgba(8,51,38,.11); transform:translateY(-8px); }
.recommended-ribbon { position:absolute; top:0; right:0; padding:8px 15px 9px; border-radius:0 24px 0 16px; background:var(--green); color:var(--gold-light); font-size:9.5px; font-weight:800; letter-spacing:.09em; }
.package-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:23px; border-bottom:1px solid rgba(8,51,38,.08); position:relative; z-index:1; }
.package-type { color:var(--gold-deep); font-size:9.5px; }
.package-card-head h3 { font-family:var(--serif); color:var(--green); font-size:38px; margin-top:5px; }
.package-price-block { text-align:right; min-width:170px; }
.package-price-block .old-price { display:block; color:var(--ink-light); text-decoration:line-through; font-size:11px; }
.package-price-block strong { display:block; color:var(--green); font-size:28px; line-height:1.1; margin:3px 0; }
.package-price-block small { display:block; color:var(--ink-muted); font-size:10.5px; }
.package-fit { margin:20px 0 12px; display:flex; gap:10px; align-items:flex-start; padding:13px 14px; border-radius:14px; background:rgba(204,163,84,.10); color:var(--green); font-size:12px; line-height:1.5; }
.package-fit i { color:var(--gold-deep); margin-top:1px; }
.package-feature-list { list-style:none; padding:0; margin:0 0 25px; flex:1; }
.package-feature-list li { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed rgba(8,51,38,.08); font-size:12.8px; line-height:1.5; color:var(--ink-muted); }
.package-feature-list li:last-child { border-bottom:0; }
.package-feature-list li i { width:21px; height:21px; border-radius:8px; display:grid; place-items:center; background:rgba(8,51,38,.06); color:var(--green); flex:0 0 21px; }
.package-feature-list strong { color:var(--ink); }
.package-action { width:100%; justify-content:center; }
.launch-note { max-width:1080px; margin:34px auto 0; padding:17px 20px; border-radius:16px; border:1px solid rgba(204,163,84,.25); background:#fffdf7; display:flex; align-items:flex-start; gap:12px; }
.launch-note>i { color:var(--gold-deep); font-size:18px; }
.launch-note strong,.launch-note span { display:block; }
.launch-note strong { color:var(--green); font-size:12.5px; margin-bottom:2px; }
.launch-note span { color:var(--ink-muted); font-size:11.5px; line-height:1.55; }

.premium-future-section { padding:20px 0 80px; background:var(--cream); }
.premium-future-card { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:45px; padding:36px; border-radius:26px; background:var(--green-deep); color:#fff; position:relative; overflow:hidden; }
.premium-future-card::before { content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(204,163,84,.10), transparent 42%); pointer-events:none; }
.premium-future-copy,.premium-future-list { position:relative; z-index:1; }
.premium-status { display:inline-flex; padding:6px 10px; border-radius:8px; border:1px solid rgba(247,216,141,.28); background:rgba(247,216,141,.07); }
.premium-future-copy h2 { font-family:var(--serif); font-size:39px; margin:13px 0 12px; }
.premium-future-copy p { color:rgba(255,255,255,.68); font-size:13px; line-height:1.7; }
.premium-starting { display:flex; align-items:baseline; gap:12px; margin-top:22px; }
.premium-starting span { color:rgba(255,255,255,.55); font-size:10.5px; }
.premium-starting strong { color:var(--gold-light); font-size:27px; }
.premium-future-list { display:grid; grid-template-columns:1fr; gap:10px; align-content:center; padding-left:22px; border-left:1px solid rgba(247,216,141,.18); }
.premium-future-list span { display:flex; align-items:flex-start; gap:9px; color:rgba(255,255,255,.78); font-size:12px; }
.premium-future-list i { color:var(--gold-light); }

.package-included-section { padding:84px 0; background:#fff; }
.included-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.included-grid article { padding:24px 20px; border-radius:19px; background:var(--cream); border:1px solid rgba(8,51,38,.07); }
.included-grid i { font-size:24px; color:var(--gold-deep); }
.included-grid h3 { color:var(--green); font-size:15px; margin:14px 0 8px; }
.included-grid p { color:var(--ink-muted); font-size:11.8px; line-height:1.6; margin:0; }

.package-compare-section { padding:84px 0; background:#f6f3ec; }
.compare-table-wrap { max-width:980px; margin:0 auto; overflow:auto; border-radius:22px; border:1px solid rgba(8,51,38,.10); background:#fff; box-shadow:0 10px 30px rgba(8,51,38,.04); }
.package-compare-table { width:100%; border-collapse:collapse; min-width:680px; }
.package-compare-table th,.package-compare-table td { padding:15px 18px; border-bottom:1px solid rgba(8,51,38,.07); text-align:left; font-size:12px; }
.package-compare-table th { background:var(--green-deep); color:#fff; font-size:11px; letter-spacing:.05em; text-transform:uppercase; position:sticky; top:0; }
.package-compare-table th:first-child { width:42%; }
.package-compare-table td:first-child { color:var(--ink); font-weight:700; }
.package-compare-table td:not(:first-child) { color:var(--ink-muted); }
.package-compare-table .standard-col { background:rgba(204,163,84,.07); }
.package-compare-table th.standard-col { background:#174f3d; color:var(--gold-light); }
.package-compare-table tr:last-child td { border-bottom:0; }
.package-compare-table i { color:var(--green); }

.hosting-link-section { padding:84px 0; background:#fff; }
.hosting-link-grid { max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.hosting-info-card,.renewal-info-card { border-radius:24px; padding:30px; }
.hosting-info-card { border:1px solid rgba(8,51,38,.10); background:#fff; }
.hosting-info-card h2 { font-family:var(--serif); color:var(--green); font-size:32px; margin:10px 0 11px; }
.hosting-info-card p { color:var(--ink-muted); font-size:12.5px; line-height:1.7; }
.inline-arrow-link { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--green); }
.renewal-info-card { background:linear-gradient(135deg,var(--green-deep),#17523f); color:#fff; display:flex; gap:18px; align-items:flex-start; }
.renewal-icon { width:45px; height:45px; flex:0 0 45px; border-radius:15px; display:grid; place-items:center; background:rgba(247,216,141,.10); color:var(--gold-light); font-size:20px; }
.renewal-label { display:block; font-size:9.5px; margin-bottom:7px; }
.renewal-info-card strong { display:block; color:var(--gold-light); font-size:27px; }
.renewal-info-card strong small { font-size:11px; color:rgba(255,255,255,.62); font-weight:600; }
.renewal-info-card p { color:rgba(255,255,255,.68); font-size:12px; line-height:1.65; margin:10px 0 0; }

.packages-faq-section { padding:84px 0; background:var(--cream); }
.packages-faq-list { max-width:820px; margin:0 auto; display:grid; gap:10px; }
.packages-faq-item { background:#fff; border:1px solid rgba(8,51,38,.09); border-radius:16px; overflow:hidden; }
.packages-faq-question { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 20px; text-align:left; color:var(--green); font-size:12.5px; font-weight:800; }
.packages-faq-question i { transition:transform .25s var(--ease); color:var(--gold-deep); }
.packages-faq-item.active .packages-faq-question i { transform:rotate(45deg); }
.packages-faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.packages-faq-answer p { padding:0 20px 19px; color:var(--ink-muted); font-size:12px; line-height:1.7; margin:0; }

.packages-cta-section { padding:0 0 88px; background:var(--cream); }
.packages-cta-card { max-width:980px; margin:0 auto; padding:42px; border-radius:28px; background:#fff; border:1px solid rgba(204,163,84,.25); text-align:center; box-shadow:0 18px 48px rgba(8,51,38,.06); }
.packages-cta-card h2 { font-family:var(--serif); color:var(--green); font-size:40px; margin:8px 0 11px; }
.packages-cta-card p { max-width:690px; margin:0 auto 22px; color:var(--ink-muted); font-size:13px; line-height:1.7; }
.packages-cta-card>div { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }



/* --------------------------------------------------------------------------
   Package-page button treatment
   Keep gold as an accent, but use Zainur green for the main actions on light
   sections. These overrides live only in packages.css and do not affect any
   other page.
   -------------------------------------------------------------------------- */
.packages-main .zbtn-primary,
.packages-cta-section .zbtn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-light));
  color: var(--cream) !important;
  border: 1px solid rgba(8,51,38,.08);
  box-shadow: 0 10px 26px rgba(8,51,38,.17);
}
.packages-main .zbtn-primary:hover,
.packages-cta-section .zbtn-primary:hover {
  background: linear-gradient(135deg, var(--green-light), var(--green-deep));
  color: var(--cream) !important;
  box-shadow: 0 13px 30px rgba(8,51,38,.23);
}

.packages-main .zbtn-secondary,
.packages-cta-section .zbtn-secondary {
  background: #fff;
  color: var(--green) !important;
  border: 1.5px solid rgba(17,71,54,.22);
  box-shadow: 0 7px 18px rgba(8,51,38,.06);
}
.packages-main .zbtn-secondary:hover,
.packages-cta-section .zbtn-secondary:hover {
  background: rgba(17,71,54,.055);
  border-color: var(--green);
  color: var(--green-deep) !important;
}

/* The hero keeps one restrained gold action so gold remains an accent rather
   than the colour of every button. */
.packages-hero .zbtn-primary {
  background: linear-gradient(100deg, var(--gold-light), var(--gold));
  color: var(--green-deep) !important;
  box-shadow: 0 8px 24px rgba(204,163,84,.24);
}
.packages-hero .zbtn-secondary {
  background: rgba(255,255,255,.055);
  border-color: rgba(247,216,141,.38);
  color: var(--cream) !important;
}
.packages-hero .zbtn-secondary:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--gold-light);
  color: var(--gold-light) !important;
}

/* --------------------------------------------------------------------------
   Calm landing animation - same gentle entrance language used on Zainur's
   Home/About/Contact pages.
   -------------------------------------------------------------------------- */
.packages-hero .packages-kicker,
.packages-hero h1,
.packages-hero-copy > p,
.packages-hero-actions,
.packages-hero-note,
.package-basics article {
  opacity: 0;
  animation: packages-content-in 1.05s var(--ease) forwards;
}
.packages-hero .packages-kicker { animation-delay: .12s; }
.packages-hero h1 { animation-delay: .26s; }
.packages-hero-copy > p { animation-delay: .40s; }
.packages-hero-actions { animation-delay: .54s; }
.packages-hero-note { animation-delay: .46s; }
.package-basics article:nth-child(1) { animation-delay: .58s; }
.package-basics article:nth-child(2) { animation-delay: .66s; }
.package-basics article:nth-child(3) { animation-delay: .74s; }
.package-basics article:nth-child(4) { animation-delay: .82s; }

@keyframes packages-content-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .packages-hero .packages-kicker,
  .packages-hero h1,
  .packages-hero-copy > p,
  .packages-hero-actions,
  .packages-hero-note,
  .package-basics article {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media(max-width:991.98px){
  .packages-hero-grid { grid-template-columns:1fr; gap:34px; }
  .packages-hero-note { max-width:470px; }
  .package-basics-grid { grid-template-columns:1fr 1fr; }
  .package-basics article:nth-child(2) { border-right:0; }
  .package-basics article:nth-child(-n+2) { border-bottom:1px solid rgba(8,51,38,.07); }
  .included-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:767.98px){
  .packages-hero { padding:124px 0 62px; }
  .packages-hero h1 { font-size:44px; }
  .packages-hero-copy>p { font-size:14px; }
  .active-packages-grid { grid-template-columns:1fr; }
  .standard-card { transform:none; }
  .package-card-head { flex-direction:column; gap:12px; }
  .package-price-block { text-align:left; min-width:0; }
  .premium-future-card { grid-template-columns:1fr; gap:26px; padding:28px 23px; }
  .premium-future-list { padding-left:0; padding-top:22px; border-left:0; border-top:1px solid rgba(247,216,141,.18); }
  .hosting-link-grid { grid-template-columns:1fr; }
  .packages-main,.package-included-section,.package-compare-section,.hosting-link-section,.packages-faq-section { padding:66px 0; }
  .packages-cta-card { padding:32px 20px; border-radius:22px; }
  .packages-cta-card h2 { font-size:34px; }
}
@media(max-width:575.98px){
  .package-basics-grid { grid-template-columns:1fr; }
  .package-basics article { border-right:0 !important; border-bottom:1px solid rgba(8,51,38,.07); }
  .package-basics article:last-child { border-bottom:0; }
  .package-detail-card { padding:25px 20px; border-radius:22px; }
  .included-grid { grid-template-columns:1fr; }
  .premium-future-copy h2 { font-size:34px; }
  .package-section-heading h2 { font-size:37px; }
  .packages-hero-actions .zbtn { width:100%; justify-content:center; }
  .packages-cta-card>div .zbtn { width:100%; justify-content:center; }
}


/* 2026-08-27 mobile hero alignment fix */
@media(max-width:767.98px){
  .packages-hero-copy{text-align:center}
  .packages-hero .packages-kicker{display:block;text-align:center}
  .packages-hero h1{margin-left:auto;margin-right:auto;text-align:center}
  .packages-hero-copy>p{margin-left:auto;margin-right:auto;text-align:center}
  .packages-hero-actions{justify-content:center}
}