/* ===== Passport Services — Rich UI Styles ===== */
:root {
--ui: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--ink: #0e1320;
--muted: #5f6b7a;
--brand: #1d4ed8; /* Primary */
--brand-ink: #ffffff;
--brand-2: #7c3aed; /* Accent */
--accent: #10b981; /* Success accent */
--bg: #f6f8fb;
--card: #ffffff;
--line: rgba(15, 23, 42, 0.08);
--radius: 18px;
--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
--shadow-lg: 0 18px 50px rgba(2, 6, 23, 0.12);
}
* { box-sizing: border-box; }
body .phnx-passport { font-family: var(--ui); color: var(--ink); background:
var(--bg); }
/* Subtle page background pattern */
.phnx-passport {
position: relative;
isolation: isolate;
}
.phnx-passport::before {
content: "";
position: fixed;
inset: -20% -10% auto -10%;
height: 55vh;
background: radial-gradient(60% 60% at 20% 30%, rgba(29,78,216,0.08) 0%,
transparent 60%),
radial-gradient(50% 50% at 80% 20%, rgba(124,58,237,0.08) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.container { width: min(1100px, 92%); margin-inline: auto; }
/* Hero */
.pp-hero { padding: 72px 0 32px; }
.pp-hero__content { text-align: center; background: linear-gradient(135deg,
rgba(29,78,216,0.06), rgba(124,58,237,0.06)); border: 1px solid var(--line);
border-radius: 22px; box-shadow: var(--shadow); padding: 28px 22px; }
.pp-kicker { letter-spacing: .12em; text-transform: uppercase; color: var(--
brand); font-weight: 800; margin: 0 0 12px; }
.pp-title { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.12; margin:
0 0 14px; }
.pp-subtitle { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px);
margin: 0 auto; max-width: 900px; }
.pp-cta { margin-top: 20px; display: flex; gap: 12px; justify-content:
center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--
line); font-weight: 700; text-decoration: none; cursor: pointer; transition:
transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--
brand-2)); color: var(--brand-ink); border: none; box-shadow: 0 8px 20px
rgba(29,78,216,.25); }
.btn-outline { background: #fff; color: var(--ink); }
.btn:hover { transform: translateY(-1px); filter: brightness(0.98); boxshadow: var(--shadow); }
.btn:active { transform: translateY(0); }

/* Quick Nav */
.pp-quicknav { position: sticky; top: 0; z-index: 8; background: lineargradient(#f7f8fb, rgba(247,248,251,.85)); backdrop-filter: blur(6px); borderbottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(2,6,23,0.05); }
.pp-quicknav__list { list-style: none; margin: 0; padding: 10px 0; display:
flex; gap: 10px; flex-wrap: wrap; }
.pp-quicknav__list a { color: var(--muted); text-decoration: none; padding:
8px 12px; border-radius: 12px; border: 1px solid transparent; transition:
background .2s ease, color .2s ease, border-color .2s ease; }
.pp-quicknav__list a:hover { background: var(--card); color: var(--ink);
border-color: var(--line); box-shadow: var(--shadow); }
.pp-quicknav__list a.active { background: linear-gradient(135deg, rgba(29,78,
216,.12), rgba(124,58,237,.12)); color: var(--ink); border-color: rgba(29,78,
216,.25); }
/* Cards Grid */
.pp-sections { counter-reset: section; display: grid; grid-template-columns:
repeat(12, 1fr); gap: 24px; padding: 32px 0 80px; }
.pp-card {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pp-card::after { content: ""; position: absolute; inset: 0; pointer-events:
none; background: linear-gradient( to right, rgba(29,78,216,.06), rgba(124,
58,237,.06) ); opacity: 0; transition: opacity .2s ease; }
.pp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg);
border-color: rgba(29,78,216,.2); }
.pp-card:hover::after { opacity: 1; }
/* Numbered titles */
.pp-card h2 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px);
display: flex; align-items: center; gap: 10px; }
.pp-card h2::before { counter-increment: section; content: counter(section,
decimal-leading-zero); display: inline-grid; place-items: center; width:
40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg,
var(--brand), var(--brand-2)); color: #fff; font-size: 14px; font-weight:
800; box-shadow: 0 8px 20px rgba(29,78,216,.25); }
.pp-card p { color: var(--muted); margin: 0 0 14px; }
/* Rich list items */
.pp-list { margin: 12px 0 18px 0; padding: 0; list-style: none; display:
grid; gap: 8px; }
.pp-list li { position: relative; padding: 10px 12px 10px 38px; border: 1px
solid var(--line); border-radius: 12px; background: #fff; }
.pp-list li::before { content: ""; position: absolute; left: 12px; top: 50%;
transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-2)); boxshadow: 0 0 0 4px rgba(29,78,216,.10); }
/* Contact */

.pp-contact { padding: 8px 0 90px; }
.pp-contact__box { background: var(--card); border: 1px solid var(--line);
border-radius: 22px; box-shadow: var(--shadow-lg); padding: 26px; textalign: center; position: relative; overflow: hidden; }
.pp-contact__box::before { content: ""; position: absolute; inset: -20% -10%
auto -10%; height: 120%; background: radial-gradient(60% 60% at 30% 30%,
rgba(16,185,129,.10), transparent 60%); pointer-events: none; }
.pp-contact__box h3 { margin: 4px 0 8px; font-size: 24px; }
.pp-contact__box p { color: var(--muted); margin: 0 0 16px; }
/* Two-column on large screens */
@media (min-width: 980px) {
.pp-card { grid-column: span 6; }
}
/* Motion respect */
@media (prefers-reduced-motion: reduce) {
.btn, .pp-card, .pp-quicknav__list a { transition: none !important; }
}

/* Force readable text inside cards */
.phnx-passport .pp-card { background: #fff; color: var(--ink); }
.phnx-passport .pp-card h2,
.phnx-passport .pp-card p,
.phnx-passport .pp-card li { color: var(--ink); }
.phnx-passport .pp-card p { color: var(--muted); }

/* Buttons (override any theme/Bootstrap btn rules) */
.phnx-passport .btn { border: 1px solid var(--line); font-weight: 700; }
.phnx-passport .btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(29,78,216,.25);
}
.phnx-passport .btn-outline {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Links inside cards */
.phnx-passport .pp-card a { color: var(--brand); text-decoration: none; }
.phnx-passport .pp-card a:hover { text-decoration: underline; }