/* PassageHub Proposal - isolated proposal presentation layer */
.php-proposal {
  --p-line: color-mix(in srgb, var(--ph-border) 82%, transparent);
  --p-teal: #2dd4bf;
  --p-cyan: #67e8f9;
  --p-dark: #071525;
  --p-panel: color-mix(in srgb, var(--ph-bg-elevated) 94%, transparent);
  overflow: clip;
  background: var(--ph-bg);
}
.php-proposal h1,.php-proposal h2,.php-proposal h3 { font-family: var(--font-display); }
.php-proposal svg { width: 24px; height: 24px; }
.php-section-nav { position: sticky; top: var(--ph-nav-h); z-index: 880; background: color-mix(in srgb, var(--ph-bg-elevated) 92%, transparent); border-bottom: 1px solid var(--p-line); backdrop-filter: blur(14px); }
.php-section-nav-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.php-section-nav-inner::-webkit-scrollbar { display: none; }
.php-section-nav a { flex: 0 0 auto; color: var(--ph-muted); font-size: .76rem; font-weight: 700; padding: 7px 10px; border-radius: 7px; }
.php-section-nav a:hover,.php-section-nav a.is-active { color: var(--ph-accent-2); background: var(--ph-accent-soft); }
.php-hero { position: relative; display:flex; align-items:center; min-height:calc(100svh - var(--ph-nav-h) - 48px); overflow:hidden; color: #fff; background: radial-gradient(circle at 80% 18%,rgba(45,212,191,.17),transparent 30%),linear-gradient(145deg,#06111e,#0b2038 55%,#0b3c45); padding: clamp(32px,4vw,56px) 0; }
.php-hero::before { content:""; position:absolute; inset:-30%; z-index:0; background:radial-gradient(circle at 18% 32%,rgba(45,212,191,.2),transparent 40%),radial-gradient(circle at 78% 62%,rgba(59,130,246,.16),transparent 42%),radial-gradient(circle at 52% 12%,rgba(131,56,236,.13),transparent 38%); filter:blur(26px); animation:php-aurora 16s ease-in-out infinite alternate; pointer-events:none; }
.php-hero::after { content:""; position:absolute; inset:0; z-index:0; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent); animation:php-grid-pan 26s linear infinite; pointer-events:none; }
.php-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); align-items:center; gap:clamp(42px,7vw,96px); }
.php-kicker,.php-heading>span,.php-contact-box>div>span { color:var(--ph-accent-2); font:700 .72rem/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; }
.php-kicker span { display:inline-block; width:7px; height:7px; margin-right:7px; background:var(--p-teal); border-radius:50%; box-shadow:0 0 12px var(--p-teal); }
.php-positioning { margin:24px 0 10px; color:#a7f3d0; font-weight:700; }
.php-hero h1 { max-width:800px; margin:0; font-size:clamp(2.6rem,5.4vw,5rem); line-height:1.02; letter-spacing:-.055em; background:linear-gradient(90deg,#fff,#a7f3d0 45%,#67e8f9); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:php-shimmer 7s linear infinite; }
.php-hero-copy { max-width:720px; margin:25px 0; color:#b8cadd; font-size:clamp(1rem,1.6vw,1.2rem); }
.php-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.php-btn-ghost { border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; }
.php-btn-ghost:hover { border-color:var(--p-teal); color:var(--p-teal); }
.php-independent { max-width:650px; margin:25px 0 0; color:#7f99b1; font-size:.83rem; }
.php-flow-card { padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(7,21,37,.62); box-shadow:0 30px 80px rgba(0,0,0,.25); backdrop-filter:blur(12px); }
.php-flow-head { display:flex; justify-content:space-between; gap:10px; padding-bottom:16px; color:#b6c9da; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.php-flow-head b { color:var(--p-teal); }
.php-flow { position:relative; display:grid; gap:8px; }
.php-flow::before { content:""; position:absolute; top:24px; bottom:24px; left:19px; width:1px; background:linear-gradient(var(--p-teal),rgba(45,212,191,.12)); transform-origin:top; animation:php-line 3s ease both; }
.php-flow-step { position:relative; display:flex; align-items:center; gap:13px; min-height:48px; padding:8px 12px 8px 0; border-radius:10px; color:#d7e2ec; opacity:.65; animation:php-step .45s calc(var(--i)*.22s) ease forwards; }
.php-flow-step span { position:relative; z-index:1; display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(94,234,212,.3); border-radius:50%; background:#0c2638; color:var(--p-teal); font:700 .67rem var(--font); }
.php-flow-step strong { font-size:.88rem; }
.php-section { padding:clamp(72px,9vw,118px) 0; border-bottom:1px solid var(--p-line); }
.php-heading { max-width:820px; margin-bottom:42px; }
.php-heading h2 { margin:12px 0; font-size:clamp(2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.045em; }
.php-heading p { max-width:730px; margin:0; color:var(--ph-muted); font-size:1rem; }
.php-compare { display:grid; grid-template-columns:1fr 150px 1fr; align-items:stretch; }
.php-compare-side { padding:clamp(24px,4vw,42px); border:1px solid var(--p-line); background:var(--p-panel); }
.php-before { border-radius:18px 0 0 18px; }
.php-after { border-radius:0 18px 18px 0; border-color:color-mix(in srgb,var(--ph-accent) 35%,var(--p-line)); }
.php-compare-side small { letter-spacing:.14em; font-weight:800; color:var(--ph-muted); }
.php-compare-side h3 { margin:12px 0 25px; font-size:1.35rem; }
.php-compare-side p { display:flex; align-items:center; gap:10px; margin:10px 0; color:var(--ph-muted); }
.php-compare-side p span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(239,68,68,.1); color:#ef4444; }
.php-after p span { background:var(--ph-accent-soft); color:var(--ph-accent-2); }
.php-transform { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; border-block:1px solid var(--p-line); color:var(--ph-accent-2); text-align:center; }
.php-transform span { position:absolute; left:0; right:0; height:1px; background:var(--ph-accent); opacity:.4; }
.php-transform b { font-size:.62rem; letter-spacing:.1em; }
.php-proof { color:#fff; background:linear-gradient(145deg,#06121f,#0a2835); }
.php-proof .container { display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; align-items:center; }
.php-live { display:inline-flex; align-items:center; gap:8px; color:#5eead4; font-size:.72rem; letter-spacing:.14em; font-weight:800; }
.php-live i { width:8px; height:8px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 14px #2dd4bf; animation:php-pulse 1.8s infinite; }
.php-proof h2 { margin:15px 0; font-size:clamp(2rem,4vw,3.6rem); letter-spacing:-.045em; }
.php-proof p { color:#a8bdcf; }
.php-url { display:block; margin:20px 0; color:#67e8f9; text-decoration:underline; text-underline-offset:4px; }
.php-browser { overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:#0b1c2b; box-shadow:0 32px 80px rgba(0,0,0,.38); transform:perspective(1200px) rotateY(-3deg); }
.php-browser-bar { display:flex; align-items:center; gap:7px; height:42px; padding:0 13px; background:#10283b; }
.php-browser-bar i { width:8px; height:8px; border-radius:50%; background:#476175; }
.php-browser-bar span { flex:1; margin-left:8px; color:#91a9bb; font:500 .67rem var(--font); }
.php-browser-bar b { color:#5eead4; font-size:.62rem; letter-spacing:.12em; }
.php-browser img { display:block; width:100%; height:auto; aspect-ratio:1.44; object-fit:cover; object-position:top; transition:transform .8s ease; }
.php-browser:hover img { transform:scale(1.025); }
.php-indicators { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.php-indicators span { padding:10px 12px; border:1px solid rgba(94,234,212,.15); border-radius:8px; background:rgba(94,234,212,.05); color:#b8cddd; font-size:.78rem; opacity:0; animation:php-indicator .4s calc(var(--i)*.07s) ease forwards; animation-play-state:paused; }
.php-indicators.is-visible span { animation-play-state:running; }
.php-role-chain { display:flex; align-items:center; justify-content:center; gap:12px; margin:-10px 0 28px; color:var(--ph-muted); font-size:.72rem; }
.php-role-chain b { padding:7px 12px; border:1px solid var(--p-line); border-radius:999px; color:var(--ph-accent-2); }
.php-role-chain span::after { content:" →"; color:var(--ph-accent); }
.php-role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.php-role-card { padding:28px; border:1px solid var(--p-line); border-radius:18px; background:var(--p-panel); transition:transform .25s,border-color .25s; }
.php-role-card:hover { transform:translateY(-5px); border-color:var(--ph-accent); }
.php-card-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:13px; background:var(--ph-accent-soft); color:var(--ph-accent-2); }
.php-role-card small { color:var(--ph-accent-2); font-weight:800; letter-spacing:.12em; }
.php-role-card h3 { margin:7px 0 15px; font-size:1.5rem; }
.php-role-card ul { margin:0; padding:0; list-style:none; color:var(--ph-muted); }
.php-role-card li { position:relative; padding:6px 0 6px 16px; font-size:.86rem; }
.php-role-card li::before { content:""; position:absolute; left:0; top:13px; width:5px; height:5px; border-radius:50%; background:var(--ph-accent); }
.php-dark { color:#edf7f8; background:#071421; }
.php-dark .php-heading p { color:#91a9bb; }
.php-journey { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.php-journey::before { content:""; position:absolute; top:31px; left:3%; right:3%; height:1px; background:linear-gradient(90deg,var(--ph-accent),rgba(45,212,191,.1)); }
.php-journey-step { position:relative; z-index:1; min-height:110px; padding:20px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:#0c2031; }
.php-journey-step span { color:#5eead4; font:700 .67rem var(--font); }
.php-journey-step strong { display:block; margin-top:18px; font-size:.85rem; }
.php-journey-step i { position:absolute; top:25px; right:20px; width:10px; height:10px; border-radius:50%; background:#294359; transition:.4s; }
.php-journey-step.is-active { border-color:rgba(45,212,191,.45); box-shadow:0 0 30px rgba(45,212,191,.08); }
.php-journey-step.is-active i { background:#2dd4bf; box-shadow:0 0 12px #2dd4bf; }
.php-architecture { display:grid; grid-template-columns:1.4fr .8fr; gap:30px; padding:30px; border:1px solid var(--p-line); border-radius:20px; background:var(--p-panel); }
.php-arch-spine { position:relative; display:grid; gap:12px; }
.php-arch-spine::before { content:""; position:absolute; top:20px; bottom:20px; left:23px; width:2px; background:linear-gradient(var(--ph-accent),var(--p-cyan)); transform-origin:top; animation:php-line 3s ease both; }
.php-arch-node { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:66px; margin-left:50px; padding:12px 18px; border:1px solid var(--p-line); border-radius:11px; background:var(--ph-bg-elevated); }
.php-arch-node::before { content:""; position:absolute; left:-35px; width:14px; height:14px; border:3px solid var(--ph-bg); border-radius:50%; background:var(--ph-accent); box-shadow:0 0 12px var(--ph-accent); }
.php-arch-node span { color:var(--ph-accent-2); font-size:.6rem; font-weight:800; letter-spacing:.12em; }
.php-arch-node strong { font-size:.9rem; }
.php-integrations { align-self:center; padding:24px; border:1px dashed color-mix(in srgb,var(--ph-accent) 45%,var(--p-line)); border-radius:15px; background:var(--ph-accent-soft); }
.php-integrations small { color:var(--ph-accent-2); font-weight:800; letter-spacing:.12em; }
.php-integrations h3 { margin:10px 0 18px; }
.php-integrations span { display:inline-block; margin:4px; padding:7px 9px; border-radius:7px; background:var(--ph-bg-elevated); font-size:.72rem; }
.php-integrations p { margin:18px 0 0; color:var(--ph-muted); font-size:.72rem; }
.php-security { background:color-mix(in srgb,var(--ph-bg-elevated) 60%,var(--ph-bg)); }
.php-security-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
.php-security-core { display:grid; place-items:center; min-height:500px; }
.php-rings { position:relative; width:min(420px,80vw); aspect-ratio:1; display:grid; place-items:center; }
.php-rings>i { position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--ph-accent) 28%,transparent); border-radius:50%; animation:php-spin 18s linear infinite; }
.php-rings>i:nth-child(2) { inset:13%; border-style:dashed; animation-direction:reverse; animation-duration:13s; }
.php-rings>i:nth-child(3) { inset:27%; animation-duration:9s; }
.php-rings>span { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:150px; aspect-ratio:1; border-radius:50%; background:linear-gradient(145deg,var(--ph-navy),#0d4a50); color:#fff; box-shadow:0 0 70px rgba(45,212,191,.2); }
.php-rings svg { width:38px; height:38px; color:#5eead4; }
.php-rings b { margin-top:9px; font-size:.78rem; }
.php-rings small { color:#8ab2b8; font-size:.58rem; letter-spacing:.13em; }
.php-security-list { display:grid; gap:10px; }
.php-security-list article { display:flex; gap:15px; padding:16px 18px; border:1px solid var(--p-line); border-radius:11px; background:var(--p-panel); }
.php-security-list article>span { color:var(--ph-accent-2); font-weight:800; }
.php-security-list h3 { margin:0 0 3px; font-size:.95rem; }
.php-security-list p { margin:0; color:var(--ph-muted); font-size:.82rem; }
.php-two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,7vw,90px); align-items:center; }
.php-callout,.php-governance { margin-top:24px; padding:18px; border-left:3px solid var(--ph-accent); background:var(--ph-accent-soft); color:var(--ph-muted); font-size:.83rem; }
.php-audit-console { overflow:hidden; border:1px solid var(--p-line); border-radius:17px; background:#071421; color:#dce9f2; box-shadow:var(--ph-shadow-lg); }
.php-audit-console header { display:flex; justify-content:space-between; gap:10px; padding:17px 20px; border-bottom:1px solid rgba(255,255,255,.1); color:#8da7bb; font-size:.66rem; letter-spacing:.08em; }
.php-audit-console header b { color:#5eead4; }
.php-audit-console>div { display:grid; grid-template-columns:55px 18px 1fr; align-items:center; gap:12px; padding:10px 20px; opacity:0; animation:php-audit .35s calc(var(--i)*.18s) ease forwards; animation-play-state:paused; }
.php-audit-console.is-visible>div { animation-play-state:running; }
.php-audit-console time { color:#6f8aa0; font:500 .7rem monospace; }
.php-audit-console i { width:7px; height:7px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 7px #2dd4bf; }
.php-audit-console span { font-size:.82rem; }
.php-program-grid,.php-value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.php-program-grid article,.php-value-grid article { min-height:145px; padding:22px; border:1px solid var(--p-line); border-radius:14px; background:var(--p-panel); }
.php-program-grid span,.php-value-grid span { color:var(--ph-accent-2); font-size:.7rem; font-weight:800; }
.php-program-grid h3,.php-value-grid h3 { margin:30px 0 0; font-size:1rem; }
.php-phases { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.php-phases article { position:relative; min-height:160px; padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:#0c2031; }
.php-phases article::after { content:"→"; position:absolute; right:-12px; top:50%; color:#5eead4; }
.php-phases article:nth-child(3)::after,.php-phases article:last-child::after { display:none; }
.php-phases span { color:#5eead4; font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.php-phases h3 { margin:17px 0 9px; }
.php-phases p { color:#91a9bb; font-size:.78rem; }
.php-deploy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.php-deploy-grid article { padding:30px; border:1px solid var(--p-line); border-radius:17px; background:var(--p-panel); }
.php-deploy-grid article>div { display:grid; place-items:center; width:48px; height:48px; margin-bottom:24px; border-radius:12px; background:var(--ph-accent-soft); color:var(--ph-accent-2); }
.php-deploy-grid small { color:var(--ph-accent-2); font-weight:800; }
.php-deploy-grid h3 { margin:7px 0 10px; }
.php-deploy-grid p,.php-value-grid p { color:var(--ph-muted); font-size:.86rem; }
.php-note { margin:24px 0 0; color:var(--ph-muted); font-size:.78rem; }
.php-modular { background:color-mix(in srgb,var(--ph-bg-elevated) 65%,var(--ph-bg)); }
.php-module-map { position:relative; display:grid; place-items:center; min-height:520px; }
.php-module-core { position:relative; z-index:2; display:grid; place-items:center; width:180px; aspect-ratio:1; border-radius:50%; background:linear-gradient(145deg,var(--ph-navy),#0b5659); color:#fff; text-align:center; box-shadow:0 0 0 20px var(--ph-accent-soft),0 0 80px rgba(45,212,191,.18); }
.php-module-core small { color:#5eead4; letter-spacing:.14em; }
.php-module-core strong { font-size:1.2rem; }
.php-module-orbit { position:absolute; width:min(780px,92vw); height:430px; }
.php-module-orbit span { position:absolute; left:50%; top:50%; width:135px; padding:10px; border:1px solid var(--p-line); border-radius:8px; background:var(--ph-bg-elevated); color:var(--ph-muted); text-align:center; font-size:.72rem; transform:translate(-50%,-50%) rotate(calc(var(--i)*36deg)) translateX(310px) rotate(calc(var(--i)*-36deg)); }
.php-ai { background:linear-gradient(145deg,#071421,#0c2b36); color:#edf7f8; }
.php-ai .php-heading p { color:#96adbe; }
.php-governance b { display:block; color:#5eead4; letter-spacing:.12em; }
.php-ai-list { display:grid; gap:10px; }
.php-ai-list article { display:flex; align-items:center; gap:15px; padding:16px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.035); }
.php-ai-list span { color:#5eead4; font:700 .68rem monospace; }
.php-jpj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.php-jpj-card { padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.035); transition:transform .25s,border-color .25s; }
.php-jpj-card:hover { transform:translateY(-3px); border-color:rgba(45,212,191,.4); }
.php-jpj-card small { color:#5eead4; font:800 .66rem var(--font); letter-spacing:.12em; }
.php-jpj-card h3 { margin:9px 0 8px; font-size:1.05rem; color:#edf7f8; }
.php-jpj-card p { margin:0 0 14px; color:#91a9bb; font-size:.8rem; line-height:1.5; }
.php-jpj-fields { display:flex; flex-wrap:wrap; gap:5px; }
.php-jpj-fields span { padding:4px 7px; border-radius:5px; background:rgba(94,234,212,.08); border:1px solid rgba(94,234,212,.15); color:#5eead4; font:600 .62rem ui-monospace,monospace; }
@media(max-width:900px){ .php-jpj-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .php-jpj-grid{ grid-template-columns:1fr;} }
.php-dashboard { padding:22px; border:1px solid var(--p-line); border-radius:18px; background:var(--p-panel); box-shadow:var(--ph-shadow); }
.php-dashboard>header { display:flex; justify-content:space-between; padding-bottom:18px; color:var(--ph-muted); font-size:.7rem; font-weight:700; letter-spacing:.08em; }
.php-dashboard>header b { color:var(--ph-accent-2); }
.php-metric-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.php-metric-grid article { padding:15px; border:1px solid var(--p-line); border-radius:10px; }
.php-metric-grid small { display:block; min-height:34px; color:var(--ph-muted); font-size:.65rem; }
.php-metric-grid strong { display:block; font-size:1.8rem; color:var(--ph-accent-2); }
.php-metric-grid i { display:block; width:65%; height:4px; border-radius:4px; background:var(--ph-border); }
.php-chart-grid { display:grid; grid-template-columns:1.2fr 1.2fr .8fr; gap:10px; margin-top:10px; }
.php-chart-grid article { min-height:200px; padding:18px; border:1px solid var(--p-line); border-radius:10px; }
.php-chart-grid small { color:var(--ph-muted); font-size:.68rem; }
.php-funnel { display:grid; place-items:center; gap:9px; margin-top:30px; }
.php-funnel i { display:block; height:18px; border-radius:3px; background:linear-gradient(90deg,var(--ph-accent),var(--p-cyan)); transform:scaleX(0); animation:php-bar 1s ease forwards; }
.php-funnel i:nth-child(1){width:90%}.php-funnel i:nth-child(2){width:72%;animation-delay:.1s}.php-funnel i:nth-child(3){width:54%;animation-delay:.2s}.php-funnel i:nth-child(4){width:36%;animation-delay:.3s}
.php-bars { display:flex; align-items:flex-end; gap:12px; height:130px; margin-top:20px; }
.php-bars i { flex:1; height:var(--h,50%); border-radius:5px 5px 0 0; background:var(--ph-accent-soft); border-top:3px solid var(--ph-accent); transform-origin:bottom; animation:php-bar-y .8s ease both; }
.php-bars i:nth-child(1){--h:45%}.php-bars i:nth-child(2){--h:80%}.php-bars i:nth-child(3){--h:58%}.php-bars i:nth-child(4){--h:70%}.php-bars i:nth-child(5){--h:36%}
.php-donut { width:120px; aspect-ratio:1; margin:28px auto; border-radius:50%; background:conic-gradient(var(--ph-accent) 0 28%,var(--p-cyan) 28% 60%,var(--ph-border) 60%); mask:radial-gradient(circle,#0000 53%,#000 55%); }
.php-value-grid { grid-template-columns:repeat(3,1fr); }
.php-value-grid h3 { font-size:1.15rem; }
.php-demo-cta { padding:clamp(80px,10vw,130px) 0; color:#fff; background:radial-gradient(circle at 85%,rgba(45,212,191,.2),transparent 35%),#061421; }
.php-demo-cta-grid { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; }
.php-demo-cta span { color:#5eead4; font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.php-demo-cta h2 { margin:15px 0; font-size:clamp(2.2rem,4.7vw,4.2rem); letter-spacing:-.05em; }
.php-demo-cta p { max-width:650px; color:#a3b8c9; }
.php-demo-cta small { display:block; margin-top:17px; color:#7890a4; }
.php-portal-illustration>div { overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:#0c2031; box-shadow:0 30px 70px rgba(0,0,0,.3); transform:rotate(2deg); }
.php-portal-illustration header { display:flex; gap:7px; padding:15px; border-bottom:1px solid rgba(255,255,255,.08); }
.php-portal-illustration header i { width:8px; height:8px; border-radius:50%; background:#3c566a; }
.php-portal-illustration main { display:grid; place-items:center; min-height:330px; }
.php-portal-illustration main span { display:grid; place-items:center; width:75px; height:75px; border-radius:18px; background:rgba(45,212,191,.12); }
.php-portal-illustration main svg { width:40px; height:40px; }
.php-portal-illustration main p { margin:16px 0 0; font-size:.65rem; letter-spacing:.15em; }
.php-portal-illustration main b { color:#fff; font-size:1.8rem; }
.php-portal-illustration main>i { width:65%; height:4px; margin:20px; border-radius:4px; background:linear-gradient(90deg,var(--p-teal),var(--p-cyan)); animation:php-packet 2.2s infinite; }
.php-contact-box { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:clamp(28px,5vw,55px); border:1px solid var(--p-line); border-radius:20px; background:var(--p-panel); box-shadow:var(--ph-shadow); }
.php-contact-box h2 { margin:10px 0; font-size:clamp(2rem,4vw,3.2rem); }
.php-contact-box p { color:var(--ph-muted); }
.php-disclaimer { padding:35px 0; background:#091523; color:#a5b8c8; border-top:3px solid #2dd4bf; }
.php-disclaimer .container { display:grid; grid-template-columns:220px 1fr; gap:30px; }
.php-disclaimer strong { color:#fff; }
.php-disclaimer p { margin:0; font-size:.82rem; }
.php-reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--reveal-delay,0)*80ms); }
.php-reveal[data-delay="1"] { --reveal-delay:1; }
.php-reveal.is-visible { opacity:1; transform:none; }
@keyframes php-line { from{transform:scaleY(0)}to{transform:scaleY(1)} }
@keyframes php-step { to{opacity:1;transform:translateX(6px)} }
@keyframes php-pulse { 50%{opacity:.45;transform:scale(.8)} }
@keyframes php-indicator { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes php-spin { to{transform:rotate(360deg)} }
@keyframes php-audit { to{opacity:1;transform:none} }
@keyframes php-bar { to{transform:scaleX(1)} }
@keyframes php-bar-y { from{transform:scaleY(0)}to{transform:scaleY(1)} }
@keyframes php-packet { 50%{transform:scaleX(.4);filter:brightness(1.7)} }
/* Hero entrance + ambient animations */
.php-hero .php-kicker,.php-hero .php-positioning,.php-hero h1,.php-hero .php-hero-copy,.php-hero .php-actions,.php-hero .php-independent { opacity:0; animation:php-rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
.php-hero .php-kicker { animation-delay:.05s; }
.php-hero .php-positioning { animation-delay:.18s; }
.php-hero h1 { animation-delay:.3s; }
.php-hero .php-hero-copy { animation-delay:.45s; }
.php-hero .php-actions { animation-delay:.6s; }
.php-hero .php-independent { animation-delay:.75s; }
.php-flow-card { animation:php-float 7s ease-in-out infinite; }
.php-flow-card .php-flow-head { animation:php-fade-in .8s .55s ease both; }
.php-flow-card .php-flow-step { opacity:0; animation:php-flow-in .5s calc(var(--i)*.22s + .7s) ease forwards; }
.php-hero .php-kicker span { animation:php-pulse 2.2s ease-in-out infinite; }
@keyframes php-rise { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes php-fade-in { from{opacity:0} to{opacity:1} }
@keyframes php-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes php-flow-in { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(6px)} }
@keyframes php-grid-pan { from{background-position:0 0,0 0} to{background-position:56px 56px,56px 56px} }
@keyframes php-aurora { 0%{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1)} 50%{transform:translate3d(4%,3%,0) rotate(4deg) scale(1.12)} 100%{transform:translate3d(-2%,4%,0) rotate(-5deg) scale(1.05)} }
@keyframes php-shimmer { from{background-position:0% 0} to{background-position:220% 0} }
@media (max-width: 992px) {
  .php-hero { display:block; min-height:auto; }
  .php-hero-grid,.php-proof .container,.php-security-grid,.php-two-col,.php-demo-cta-grid,.php-contact-box { grid-template-columns:1fr; }
  .php-proof-copy { max-width:750px; }
  .php-browser { transform:none; }
  .php-role-grid,.php-phases,.php-deploy-grid,.php-value-grid { grid-template-columns:repeat(2,1fr); }
  .php-program-grid { grid-template-columns:repeat(2,1fr); }
  .php-journey { grid-template-columns:repeat(3,1fr); }
  .php-architecture { grid-template-columns:1fr; }
  .php-security-core { min-height:400px; }
  .php-module-orbit span { transform:translate(-50%,-50%) rotate(calc(var(--i)*36deg)) translateX(250px) rotate(calc(var(--i)*-36deg)); }
  .php-metric-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 700px) {
  .php-section-nav { top:64px; }
  .php-hero { padding-top:60px; }
  .php-hero-grid { grid-template-columns:minmax(0,1fr); }
  .php-actions .btn { width:100%; }
  .php-compare { grid-template-columns:1fr; gap:10px; }
  .php-before,.php-after { border-radius:15px; }
  .php-transform { min-height:90px; border:0; }
  .php-transform span { width:1px; top:0; bottom:0; left:50%; right:auto; height:auto; }
  .php-indicators { grid-template-columns:repeat(2,1fr); }
  .php-role-chain { justify-content:flex-start; overflow-x:auto; }
  .php-role-grid,.php-phases,.php-deploy-grid,.php-program-grid,.php-value-grid { grid-template-columns:1fr; }
  .php-journey { grid-template-columns:repeat(2,1fr); }
  .php-phases article::after { display:none; }
  .php-security-core { min-height:330px; }
  .php-rings { width:310px; }
  .php-module-map { display:block; min-height:auto; }
  .php-module-core { margin:0 auto 28px; }
  .php-module-orbit { position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:auto; height:auto; }
  .php-module-orbit span { position:static; width:auto; transform:none; }
  .php-metric-grid { grid-template-columns:repeat(2,1fr); }
  .php-chart-grid { grid-template-columns:1fr; }
  .php-disclaimer .container { grid-template-columns:1fr; gap:10px; }
}
@media (max-width: 430px) {
  .php-hero h1 { font-size:2.35rem; }
  .php-flow-card { padding:17px; }
  .php-indicators,.php-journey,.php-metric-grid { grid-template-columns:1fr; }
  .php-browser-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .php-architecture,.php-dashboard { padding:15px; }
}
@media (prefers-reduced-motion: reduce) {
  .php-proposal *,.php-proposal *::before,.php-proposal *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .php-reveal,.php-indicators span,.php-audit-console>div { opacity:1 !important; transform:none !important; }
}