/* ==========================================================================
   Appslin — Portal Development page premium redesign layer
   Loaded AFTER homepage-custom.css and portal-development.css.
   Adds new styles only; no production stylesheet is modified.
   ========================================================================== */

/* ---------- Section 1: Premium hero ---------- */
.pr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(46px, 6vw, 96px) 0 clamp(44px, 5vw, 84px);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(37, 99, 235, .38), transparent 60%),
    radial-gradient(760px 480px at 98% 4%, rgba(16, 185, 129, .28), transparent 62%),
    linear-gradient(150deg, #061431 0%, #0b2352 52%, #07403a 132%);
  color: #eaf1ff;
}
.pr-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pr-hero-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.pr-hero-bg span:first-child { width: 420px; height: 420px; top: -140px; left: -120px; background: rgba(59, 130, 246, .55); }
.pr-hero-bg span:last-child { width: 380px; height: 380px; bottom: -160px; right: -80px; background: rgba(16, 185, 129, .45); }

.crumbs--light { color: rgba(226, 236, 255, .72); }
.crumbs--light a { color: rgba(226, 236, 255, .72); }
.crumbs--light a:hover { color: #fff; }
.crumbs--light strong { color: #fff; }

.pr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(26px, 3.6vw, 58px);
  align-items: center;
}

.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #dfeaff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}
.pr-badge i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .22); }

.pr-hero-title {
  margin: 18px 0 14px;
  font-size: clamp(31px, 4.3vw, 56px);
  line-height: 1.07;
  letter-spacing: -.02em;
  color: #fff;
}
.pr-grad {
  background: linear-gradient(100deg, #7cb6ff 0%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-hero-sub {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.75;
  color: rgba(224, 234, 255, .84);
}
.pr-hero-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.pr-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  color: rgba(230, 239, 255, .92);
}
.pr-hero-points svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: #5eead4; }

.pr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .06);
  transition: background .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); color: #fff; }

.pr-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pr-hero-stats strong { display: block; font-size: clamp(22px, 2.3vw, 30px); color: #fff; line-height: 1.1; }
.pr-hero-stats span { display: block; margin-top: 4px; font-size: 13px; color: rgba(214, 228, 255, .72); }

.pr-hero-visual { position: relative; }
.pr-hero-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 44px 90px -34px rgba(2, 10, 30, .8);
}
.pr-hero-frame img { display: block; width: 100%; height: auto; border-radius: 18px; }
.pr-hero-chip {
  position: absolute;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0a1f44;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 40px -18px rgba(2, 10, 30, .75);
}
.pr-hero-chip--a { top: -14px; left: -10px; }
.pr-hero-chip--b { bottom: -16px; right: -8px; color: #067a52; }

/* ---------- Trust strip ---------- */
.pr-trust { background: #fff; border-bottom: 1px solid var(--line, #e4ebf5); }
.pr-trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 0;
}
.pr-trust-row > div { display: flex; align-items: center; gap: 13px; }
.pr-trust-ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  color: #1c4ed8;
  background: linear-gradient(140deg, #e7f0ff, #e6fbf3);
}
.pr-trust-ico svg { width: 21px; height: 21px; }
.pr-trust-row p { margin: 0; font-size: 13.5px; color: var(--body, #4a5a72); line-height: 1.45; }
.pr-trust-row strong { display: block; color: var(--ink, #0b1524); font-size: 15px; }

/* ---------- Section 2: H1 intro ---------- */
.pr-intro { padding-top: clamp(44px, 5vw, 82px); }
.pr-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}
.pr-intro h1 {
  margin: 14px 0 16px;
  font-size: clamp(28px, 3.3vw, 43px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink, #0b1524);
}
.pr-intro p { margin: 0 0 13px; line-height: 1.85; }
.pr-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pr-intro-visual { position: relative; }
.pr-intro-visual img {
  display: block;
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 34px 70px -34px rgba(10, 31, 68, .55);
}
.pr-intro-note {
  position: absolute;
  left: 18px;
  bottom: -22px;
  right: 24px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line, #e4ebf5);
  box-shadow: 0 22px 44px -24px rgba(10, 31, 68, .5);
}
.pr-intro-note strong { display: block; font-size: 15px; color: var(--ink, #0b1524); }
.pr-intro-note span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted, #7286a3); }

/* ---------- Section 3: Portal types ---------- */
.pr-types {
  background:
    radial-gradient(760px 420px at 100% 0%, rgba(16, 185, 129, .1), transparent 60%),
    linear-gradient(180deg, #f5f8fe 0%, #ffffff 100%);
}
.pr-types .type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 22px;
}
.pr-types .type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line, #e4ebf5);
  box-shadow: 0 10px 28px -20px rgba(10, 31, 68, .5);
  overflow: hidden;
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease), border-color .3s var(--ease, ease);
}
.pr-types .type-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-brand, linear-gradient(115deg, #1c4ed8, #10b981));
  opacity: 0;
  transition: opacity .3s ease;
}
.pr-types .type-card:hover { transform: translateY(-6px); border-color: rgba(37, 99, 235, .28); box-shadow: 0 30px 60px -30px rgba(10, 31, 68, .55); }
.pr-types .type-card:hover::before { opacity: 1; }
.pr-types .type-ico {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 16px;
  margin-bottom: 16px;
  background: linear-gradient(140deg, #eef4ff, #e8fbf4);
}
.pr-types .type-ico img { width: 32px; height: 32px; object-fit: contain; }
.pr-types .type-card h5 { margin: 0 0 9px; font-size: 18px; color: var(--ink, #0b1524); }
.pr-types .type-card p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--body, #4a5a72); }
.type-cta { margin-top: auto; padding-top: 20px; }
.type-btn { width: 100%; justify-content: center; font-size: 14.5px; }

/* ---------- Global rhythm polish for reused sections ---------- */
.pr-types .p-note { margin-top: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pr-hero-grid, .pr-intro-grid { grid-template-columns: 1fr; }
  .pr-hero-visual { order: -1; }
  .pr-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pr-hero-chip { display: none; }
  .pr-hero-stats { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .pr-trust-row { grid-template-columns: 1fr; }
  .pr-intro-note { position: static; margin-top: 16px; left: auto; right: auto; }
  .pr-hero-actions .btn, .pr-hero-actions .btn-ghost-light,
  .pr-intro-actions .btn { width: 100%; }
}