/* DPP Live components, scoped under .ppx (passport animation + verifier) */
.ppx{
--navy:#0A2540;
--navy-deep:#0D1B2A;
--green:#00C48C;
--green-2:#00a374;
--orange:#FF6B35;
--red:#E63946;
--light:#F7F9FC;
--text:#374151;
--muted:#64748B;
--line:#E5E9F0;
--eu-1:#003399;
--eu-2:#0052CC;
--eu-gold:#FFCC00;
--chain:#8247E5;
--chain-2:#a37cf0;
--type-scale:1;
--radius-scale:1;
--density-pad:1;
--pulse-speed:1.8s;
}
.ppx body{font-size:calc(16px * var(--type-scale))}
.ppx section{padding:calc(110px * var(--density-pad)) 0}
.ppx .why-card,.ppx .country-tile,.ppx .gf-card,.ppx .price,.ppx .passport,.ppx .featured,.ppx .mock{border-radius:calc(16px * var(--radius-scale))}
.ppx .pill .dot{animation-duration:var(--pulse-speed) !important}
.ppx .live-badge .dot{animation-duration:var(--pulse-speed) !important}
.ppx .no-dotgrid .dotgrid{display:none}
.ppx .no-countdown .urgency-cta{display:none}
.ppx *{box-sizing:border-box}
.ppx html,.ppx body{margin:0;padding:0}
.ppx body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
color:var(--text);
background:#fff;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
letter-spacing:-0.005em;
}
.ppx h1,.ppx h2,.ppx h3,.ppx h4{font-weight:700;letter-spacing:-0.025em;color:var(--navy);margin:0}
.ppx h1{font-size:48px;line-height:1.05;letter-spacing:-0.035em;font-weight:800}
.ppx h2{font-size:44px;line-height:1.1;letter-spacing:-0.03em}
.ppx h3{font-size:22px;line-height:1.3}
.ppx p{margin:0}
.ppx a{color:inherit;text-decoration:none}
.ppx .container{max-width:1280px;margin:0 auto;padding:0 32px}
.ppx .mono{font-family:'JetBrains Mono',monospace;font-feature-settings:"ss01"}
.ppx nav.top{
position:absolute;top:0;left:0;right:0;z-index:50;
padding:22px 0;
}
.ppx nav.top .row{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.ppx .logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:-0.02em;font-size:20px;white-space:nowrap}
.ppx .logo .mark{
width:30px;height:30px;border-radius:8px;
background:linear-gradient(135deg,#00C48C 0%,#00a374 100%);
display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px;
box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 18px -6px rgba(0,196,140,.6);
position:relative;
}
.ppx .logo .mark::after{
content:"";position:absolute;width:6px;height:6px;border-radius:50%;
background:#fff;right:5px;top:5px;
}
.ppx .nav-links{display:flex;gap:22px;flex:1;flex-wrap:nowrap;white-space:nowrap}
.ppx .logo-stack{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.ppx .logo-countdown{
display:inline-flex; align-items:center; gap:7px;
padding:3px 9px 3px 8px;
border-radius:999px;
background:rgba(0,196,140,.10);
border:1px solid rgba(0,196,140,.28);
font:600 10.5px/1 'JetBrains Mono', monospace;
color:#A8F3D8; letter-spacing:.06em;
white-space:nowrap;
}
.ppx .logo-countdown .lc-dot{
width:6px; height:6px; border-radius:50%;
background:#00C48C;
box-shadow:0 0 0 0 rgba(0,196,140,.7);
animation:lcPulse 1.8s ease-out infinite;
}
@keyframes lcPulse{
0% { box-shadow:0 0 0 0 rgba(0,196,140,.55); }
70% { box-shadow:0 0 0 7px rgba(0,196,140,0); }
100% { box-shadow:0 0 0 0 rgba(0,196,140,0); }
}
.ppx .logo-countdown .lc-num{
color:#fff; font-weight:800; font-size:12px;
letter-spacing:.02em;
}
.ppx .logo-countdown .lc-lbl{ opacity:.85; text-transform:uppercase; }
@media (max-width:680px){.ppx .logo-countdown{ display:none; }}
.ppx .nav-links a{color:rgba(255,255,255,.78);font-size:14px;font-weight:500;transition:color .15s;white-space:nowrap}
.ppx .nav-links a:hover{color:#fff}
.ppx .nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;position:relative}
.ppx .free-pendulum{
position:absolute; top:calc(100% + 2px); right:6px;
transform-origin:top center;
animation:pendSwing 3.4s ease-in-out infinite;
z-index:60; pointer-events:none;
}
.ppx .free-pendulum .pend-str{
width:1.5px; height:15px; margin:0 auto;
background:linear-gradient(rgba(255,255,255,.5), rgba(0,196,140,.6));
}
.ppx .free-pendulum .pend-tag{
position:relative;
background:var(--green); color:#04221a;
border-radius:9px; padding:7px 12px;
box-shadow:0 10px 24px -8px rgba(0,196,140,.65), inset 0 1px 0 rgba(255,255,255,.35);
text-align:center; white-space:nowrap;
}
.ppx .free-pendulum .pend-tag::before{
content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
width:5px; height:5px; border-radius:50%;
background:#04221a; opacity:.55;
}
.ppx .free-pendulum .pt1{ font:800 11.5px/1.1 'Inter',sans-serif; letter-spacing:-0.01em; }
.ppx .free-pendulum .pt2{ font:600 9.5px/1.2 'Inter',sans-serif; opacity:.8; margin-top:2px; }
@keyframes pendSwing{
0%,100%{ transform:rotate(-6deg); }
50% { transform:rotate(6deg); }
}
@media (max-width:680px){.ppx .free-pendulum{ display:none; }}
.ppx .user-dd{ position:relative; }
.ppx .user-dd-trigger{
display:inline-flex; align-items:center; gap:5px;
color:rgba(255,255,255,.78); font-size:14.5px; font-weight:500;
cursor:pointer; transition:color .15s;
}
.ppx .user-dd-trigger:hover{ color:#fff; }
.ppx .user-dd-trigger .chev{ font-size:9px; opacity:.6; transition:transform .2s ease; }
.ppx .user-dd.open .user-dd-trigger{ color:#fff; }
.ppx .user-dd.open .user-dd-trigger .chev{ transform:rotate(180deg); opacity:.9; }
.ppx .user-dd-panel{
position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-4px);
width:280px;
background:#0A2540;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
padding:8px;
box-shadow:0 24px 60px -16px rgba(0,0,0,.55);
display:none; opacity:0; pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
z-index:80;
}
.ppx .user-dd-panel::before{
content:""; position:absolute; left:50%; top:-6px;
width:12px; height:12px; transform:translateX(-50%) rotate(45deg);
background:#0A2540;
border-left:1px solid rgba(255,255,255,.1);
border-top:1px solid rgba(255,255,255,.1);
}
.ppx .user-dd.open .user-dd-panel{
display:block; opacity:1; pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
.ppx .user-dd-item{
display:flex; align-items:center; gap:12px;
padding:10px 12px; border-radius:9px;
color:#fff; transition:background .15s ease;
}
.ppx .user-dd-item:hover{ background:rgba(255,255,255,.06); }
.ppx .user-dd-item + .user-dd-item{ margin-top:2px; }
.ppx .udd-i{
width:34px; height:34px; flex-shrink:0;
border-radius:9px;
background:rgba(0,196,140,.10);
border:1px solid rgba(0,196,140,.25);
display:flex; align-items:center; justify-content:center;
font-size:17px; line-height:1;
}
.ppx .udd-t{ display:block; font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
.ppx .udd-s{ display:block; font-size:11.5px; color:rgba(255,255,255,.55); margin-top:2px; }
.ppx .site-search{
position:relative;
display:flex; align-items:center; gap:8px;
width:220px; height:38px;
padding:0 10px 0 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
flex-shrink:0;
transition:width .25s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ppx .site-search:focus-within{
width:340px;
background:rgba(255,255,255,.10);
border-color:rgba(0,196,140,.45);
box-shadow:0 0 0 3px rgba(0,196,140,.12);
}
.ppx .site-search .ss-ico{ color:rgba(255,255,255,.55); display:flex; flex-shrink:0; }
.ppx .site-search:focus-within .ss-ico{ color:#00C48C; }
.ppx .site-search input{
flex:1; min-width:0; background:transparent; border:0; outline:none;
color:#fff; font:500 13.5px/1 'Inter',sans-serif; letter-spacing:.005em;
}
.ppx .site-search input::placeholder{ color:rgba(255,255,255,.45); }
.ppx .site-search .ss-k{
font:600 10px/1 'JetBrains Mono',monospace;
color:rgba(255,255,255,.45);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
padding:3px 6px; border-radius:5px;
flex-shrink:0; letter-spacing:.04em;
}
.ppx .site-search:focus-within .ss-k{ opacity:.35; }
.ppx .ss-panel{
position:absolute; top:calc(100% + 10px); left:0; right:0;
background:#0A2540;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:6px;
max-height:420px; overflow-y:auto;
box-shadow:0 28px 64px -18px rgba(0,0,0,.7);
display:none; z-index:90;
}
.ppx .ss-panel.open{ display:block; }
.ppx .ss-empty{
padding:14px 12px; color:rgba(255,255,255,.55);
font:500 13px/1.4 'Inter',sans-serif;
}
.ppx .ss-empty b{ color:#fff; font-weight:600; }
.ppx .ss-section{
padding:8px 12px 4px;
font:700 10px/1 'JetBrains Mono',monospace;
letter-spacing:.18em; text-transform:uppercase;
color:rgba(255,255,255,.4);
}
.ppx .ss-item{
display:flex; align-items:flex-start; gap:10px;
padding:9px 10px; border-radius:8px; cursor:pointer;
transition:background .12s ease;
}
.ppx .ss-item:hover,.ppx .ss-item.active{ background:rgba(255,255,255,.06); }
.ppx .ss-item-ico{
width:22px; height:22px; flex-shrink:0;
border-radius:6px; background:rgba(0,196,140,.12);
color:#00C48C; display:flex; align-items:center; justify-content:center;
font-size:11px; margin-top:1px;
}
.ppx .ss-item-body{ flex:1; min-width:0; }
.ppx .ss-item-t{
display:block; font:600 13.5px/1.3 'Inter',sans-serif; color:#fff;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ppx .ss-item-s{
display:block; margin-top:2px;
font:500 12px/1.4 'Inter',sans-serif; color:rgba(255,255,255,.55);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ppx .ss-item mark{
background:rgba(0,196,140,.22); color:#A8F3D8;
padding:0 2px; border-radius:3px;
}
@keyframes ssFlash{
0% { box-shadow:0 0 0 3px rgba(0,196,140,.7); }
100% { box-shadow:0 0 0 12px rgba(0,196,140,0); }
}
.ppx .ss-flash{ animation:ssFlash 1.4s ease-out 1; border-radius:8px; }
@media (max-width:1100px){.ppx .site-search{ width:200px; }
.ppx .site-search:focus-within{ width:240px; }}
@media (max-width:900px){.ppx .site-search{ display:none; }}
.ppx .cat-dd-panel{ max-height:none; }
.ppx .cat-dd-panel .user-dd-item:hover .udd-i{ background:rgba(0,196,140,.18); }
.ppx .nav-cta .signin{color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500}
.ppx .signin-dd{ position:relative; }
.ppx .signin-dd .signin{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; transition:color .15s; }
.ppx .signin-dd .signin:hover{ color:#fff; }
.ppx .signin-dd .signin .chev{ font-size:9px; opacity:.6; transition:transform .2s ease; }
.ppx .signin-dd.open .signin{ color:#fff; }
.ppx .signin-dd.open .signin .chev{ transform:rotate(180deg); opacity:.9; }
.ppx .signin-dd-panel{ left:auto !important; right:0; transform:translateY(-4px) !important; }
.ppx .signin-dd-panel::before{ left:auto !important; right:34px; }
.ppx .signin-dd.open .signin-dd-panel{ transform:translateY(0) !important; }
.ppx .btn{
display:inline-flex;align-items:center;gap:8px;
font-weight:600;font-size:15px;
padding:11px 18px;border-radius:8px;border:1px solid transparent;
cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
white-space:nowrap;
}
.ppx .btn-green{background:var(--green);color:#04221a;box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -8px rgba(0,196,140,.6)}
.ppx .btn-green:hover{background:#00d99b;transform:translateY(-1px)}
.ppx .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.ppx .btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.ppx .btn-dark{background:var(--navy);color:#fff}
.ppx .btn-dark:hover{background:#0f3056}
.ppx .btn-white{background:#fff;color:var(--eu-1)}
.ppx .btn-white:hover{background:#f3f6ff}
.ppx .btn-lg{padding:14px 22px;font-size:16px;border-radius:10px}
.ppx .tag-demo{
margin-top:26px;
display:flex; align-items:center; gap:16px;
padding:18px 22px;
border-radius:18px;
background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.10);
cursor:pointer;
transition:transform .35s cubic-bezier(.4,.2,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
max-width:620px;
position:relative;
user-select:none;
}
.ppx .tag-demo::before{
content:""; position:absolute; inset:0; border-radius:16px;
background:radial-gradient(80% 60% at 100% 0%, rgba(0,196,140,.10), transparent 55%);
pointer-events:none; opacity:.6;
}
.ppx .tag-demo:hover{
transform:translateY(-2px);
border-color:rgba(0,196,140,.45);
background:linear-gradient(135deg, rgba(0,196,140,.08), rgba(255,255,255,.02));
box-shadow:0 14px 36px -18px rgba(0,196,140,.5);
}
.ppx .tag-demo:active{ transform:translateY(0); }
.ppx .tag-demo.scanning .tag-photo-scan{ animation:qrScan 1.15s ease-out 1; }
.ppx .tag-photo{
width:378px; height:279px; flex-shrink:0;
border-radius:13px; overflow:hidden;
position:relative;
box-shadow:0 12px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12);
transition:transform .35s cubic-bezier(.4,.2,.2,1);
}
.ppx .tag-demo:hover .tag-photo{ transform:scale(1.03); }
.ppx .tag-photo img{
width:100%; height:100%; object-fit:cover;
object-position:62% 52%;
display:block;
}
.ppx .tag-photo-scan{
position:absolute; left:0; right:0; top:0; height:36px;
background:linear-gradient(180deg, rgba(0,196,140,0), rgba(0,196,140,.65) 60%, rgba(0,196,140,0));
box-shadow:0 0 14px rgba(0,196,140,.5);
transform:translateY(-100%);
pointer-events:none;
}
.ppx .tag-arrow{
flex:none; color:var(--green); font-size:30px; line-height:1;
font-weight:300; opacity:.85;
}
.ppx .tag-arrow-end{
animation:tagArrowNudge 1.4s ease-in-out infinite;
filter:drop-shadow(0 0 8px rgba(0,196,140,.5));
}
@keyframes tagArrowNudge{
0%,100%{ transform:translateX(0); opacity:.7; }
50% { transform:translateX(5px); opacity:1; }
}
.ppx .tag-demo:hover .tag-photo{ transform:scale(1.03); }
.ppx .tag-label{
width:74px; flex-shrink:0;
background:linear-gradient(170deg, #f8f0d8 0%, #ecdcaf 100%);
border-radius:3px 3px 5px 5px;
padding:7px 5px 6px;
display:flex; flex-direction:column; align-items:center;
position:relative;
box-shadow:0 8px 22px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,90,40,.25);
transform:rotate(-3.5deg);
transition:transform .35s cubic-bezier(.4,.2,.2,1);
}
.ppx .tag-demo:hover .tag-label{ transform:rotate(0deg) scale(1.04); }
.ppx .tag-label::after{
content:""; position:absolute; inset:0; border-radius:inherit;
background:repeating-linear-gradient(45deg, rgba(120,90,40,.04) 0 1px, transparent 1px 3px);
pointer-events:none;
}
.ppx .tag-label-eyelet{
position:absolute; top:-4px; left:50%; transform:translateX(-50%);
width:7px; height:7px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #6a4818, #2a1808 70%);
box-shadow:inset 0 1px 1px rgba(255,255,255,.2);
}
.ppx .tag-label-eyelet::before{
content:""; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:3px; height:3px; border-radius:50%;
background:#1a0e00;
}
.ppx .tag-label-brand{
font:800 6.5px/1 'Inter',sans-serif; letter-spacing:.16em;
color:#7a1f2c; text-align:center;
margin-bottom:4px; margin-top:1px;
}
.ppx .tag-qr{
width:54px; height:54px;
background:#fff;
padding:2px;
border:0.5px solid rgba(120,90,40,.4);
position:relative;
overflow:hidden;
}
.ppx .tag-qr svg{ width:100%; height:100%; display:block; }
.ppx .tag-qr-scan{
position:absolute; left:0; right:0; top:0; height:14px;
background:linear-gradient(180deg, rgba(0,196,140,0), rgba(0,196,140,.7) 60%, rgba(0,196,140,0));
transform:translateY(-100%);
pointer-events:none;
}
@keyframes qrScan{
0% { transform:translateY(-100%); }
100% { transform:translateY(380%); }
}
.ppx .tag-label-id{
font:700 4.5px/1 'JetBrains Mono',monospace;
color:#5a4220; margin-top:4px; text-align:center;
letter-spacing:.06em;
}
.ppx .tag-cta{
flex:1; min-width:0;
text-align:center;
}
.ppx .tag-cta-label{
font:700 10px/1 'JetBrains Mono',monospace;
letter-spacing:.26em; color:#00C48C; margin-bottom:7px;
text-transform:uppercase;
display:inline-flex; align-items:center; gap:7px;
}
.ppx .tag-cta-label::before{
content:""; width:7px; height:7px; border-radius:50%;
background:#00C48C;
box-shadow:0 0 0 0 rgba(0,196,140,.7);
animation:tagPulseDot 1.6s ease-out infinite;
}
@keyframes tagPulseDot{
0% { box-shadow:0 0 0 0 rgba(0,196,140,.6); }
70% { box-shadow:0 0 0 9px rgba(0,196,140,0); }
100% { box-shadow:0 0 0 0 rgba(0,196,140,0); }
}
.ppx .tag-cta-title{
font:800 17px/1.2 'Inter',sans-serif;
color:#fff; margin-bottom:4px;
letter-spacing:-0.01em;
}
.ppx .tap-circle{
display:flex; align-items:center; justify-content:center; text-align:center;
width:110px; height:110px; margin:0 auto; padding:10px;
border-radius:50%;
border:2px solid rgba(0,196,140,.85);
background:rgba(0,196,140,.10);
font-size:14px; line-height:1.25;
box-shadow:0 0 0 0 rgba(0,196,140,.5);
animation:tapPulse 1.9s ease-out infinite;
transition:background .3s, transform .3s;
}
.ppx .tag-demo:hover .tap-circle{ background:rgba(0,196,140,.20); transform:scale(1.05); }
@keyframes tapPulse{
0% { box-shadow:0 0 0 0 rgba(0,196,140,.45); }
70% { box-shadow:0 0 0 14px rgba(0,196,140,0); }
100% { box-shadow:0 0 0 0 rgba(0,196,140,0); }
}
.ppx .tag-cta-sub{
font:500 12px/1.4 'Inter',sans-serif;
color:rgba(255,255,255,.58);
}
.ppx .tag-demo:focus-visible{
outline:2px solid #00C48C; outline-offset:3px;
}
@media (max-width:980px){.ppx .tag-demo{ max-width:100%; }}
@media (max-width:520px){.ppx .tag-demo{ padding:12px; gap:10px; }
.ppx .tag-connector{ display:none; }}
.ppx .hero{
position:relative;overflow:hidden;
background:radial-gradient(80% 60% at 70% 10%, #103964 0%, #0A2540 55%, #07192e 100%);
color:#fff;
padding:100px 0 60px;
min-height:100vh;
}
.ppx .dotgrid{
position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px);
background-size:22px 22px;
mask-image:radial-gradient(ellipse 60% 70% at 30% 40%, #000 30%, transparent 75%);
animation:drift 24s linear infinite;
pointer-events:none;
}
@keyframes drift{
0%{background-position:0 0}
100%{background-position:44px 44px}
}
.ppx .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:2}
.ppx .pill{
display:inline-flex;align-items:center;gap:10px;
padding:7px 14px;border-radius:999px;
background:rgba(0,196,140,.1);
border:1px solid rgba(0,196,140,.3);
color:#7df1c4;font-weight:600;font-size:13px;letter-spacing:.02em;
}
.ppx .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,196,140,.6);animation:pulse 1.8s infinite}
.ppx .hero .pill{font-size:13px;padding:6px 13px}
.ppx .hero .pill .dot{width:8px;height:8px}
.ppx .hero .pill.pill-stack{align-items:center;gap:10px}
.ppx .pill-lines{display:flex;flex-direction:column;gap:1px;line-height:1.15;text-align:left}
.ppx .pill-l1{font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.005em}
.ppx .pill-l2{font-size:10px;font-weight:600;color:#fff;opacity:.85}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(0,196,140,.7)}
70%{box-shadow:0 0 0 10px rgba(0,196,140,0)}
100%{box-shadow:0 0 0 0 rgba(0,196,140,0)}
}
.ppx .hero h1{color:#fff;margin:18px 0 16px;max-width:660px;font-size:38px}
.ppx .hero h1 .accent{background:linear-gradient(180deg,#fff 0%, #b8d5f0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ppx .hero .sub{font-size:18px;color:rgba(255,255,255,.72);max-width:560px;line-height:1.55;margin-bottom:24px}
.ppx .hero .sub b{color:#fff;font-weight:600}
.ppx .cta-row{display:flex;gap:14px;margin-bottom:22px}
.ppx .trust{
display:flex;flex-wrap:wrap;gap:14px 22px;color:rgba(255,255,255,.55);font-size:13px;font-weight:500
}
.ppx .trust span{display:inline-flex;align-items:center;gap:6px}
.ppx .hero .cta-row{margin:26px 0 18px;flex-wrap:wrap}
.ppx .hero-flow{
display:flex;align-items:center;gap:7px 11px;flex-wrap:wrap;
margin:14px 0 16px;padding-top:15px;
border-top:1px solid rgba(255,255,255,.1);
}
.ppx .hflow-step{display:flex;align-items:center;gap:8px}
.ppx .hflow-n{
width:21px;height:21px;border-radius:50%;flex:none;
display:grid;place-items:center;font-size:11px;font-weight:800;
background:rgba(0,196,140,.16);color:var(--green);
border:1px solid rgba(0,196,140,.42);
}
.ppx .hflow-step b{color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-0.01em}
.ppx .hflow-arrow{color:var(--green);opacity:.55;font-size:14px}
@media(max-width:560px){.ppx .hflow-arrow{display:none}
.ppx .hero-flow{gap:9px 14px}}
.ppx .pp-peek{ margin:20px 0 18px; max-width:560px; }
.ppx .pp-peek-lbl{
font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.18em;
text-transform:uppercase; color:rgba(255,255,255,.5);
margin-bottom:11px; display:flex; align-items:center; gap:9px;
}
.ppx .pp-peek-lbl::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
.ppx .pp-peek-row{ display:flex; flex-wrap:wrap; gap:9px; }
.ppx .pp-chip{
display:inline-flex; align-items:center; gap:8px;
padding:8px 13px; border-radius:10px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
color:#fff; font-size:13.5px; font-weight:600; letter-spacing:-0.01em;
transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.ppx .pp-chip:hover{ border-color:rgba(0,196,140,.45); background:rgba(0,196,140,.08); transform:translateY(-1px); }
.ppx .pp-chip .ci{ font-size:15px; line-height:1; }
.ppx .passport-wrap{
position:relative;
display:flex;
justify-content:center;
min-height:400px;
align-items:center;
margin-top:38px;
}
.ppx .passport-book{
width:272px; height:400px; position:relative;
perspective:2600px;
transition:width 1.4s cubic-bezier(.65,.04,.2,1), transform 1.4s cubic-bezier(.65,.04,.2,1);
}
.ppx .passport-book.open{
width:544px;
transform:translateX(-136px);
}
.ppx .passport-book::before{
content:""; position:absolute; right:0; width:272px; top:6px; bottom:-6px;
margin-right:-6px;
border-radius:20px;
background:linear-gradient(180deg,#f5e9d0 0%,#e8d8b4 50%,#d9c498 100%);
box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
z-index:0;
transition:right 1.4s cubic-bezier(.65,.04,.2,1);
}
.ppx .passport-book::after{
content:""; position:absolute; right:8px; width:256px; bottom:-4px; height:8px;
background:repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
border-radius:0 0 8px 8px;
z-index:1; opacity:.7; pointer-events:none;
}
.ppx .passport-cover,.ppx .passport-flipper{
position:absolute; top:0; right:0;
width:272px; height:100%;
border-radius:20px;
transform-origin:left center;
transform-style:preserve-3d;
transition:transform 1.4s cubic-bezier(.65,.04,.2,1), box-shadow 1s ease;
cursor:pointer;
will-change:transform;
}
.ppx .passport-cover{ z-index:5; }
.ppx .data-flip{ z-index:4; }
.ppx .visa-page-wrap{ z-index:3; cursor:default; }
.ppx .cover-face{
position:absolute; inset:0; border-radius:20px;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.ppx .cover-front{
background:
radial-gradient(120% 90% at 50% -10%, #6b1722 0%, transparent 55%),
linear-gradient(160deg,#5a0f1c 0%, #3d0810 60%, #2a050a 100%);
border:1px solid rgba(0,0,0,.4);
box-shadow:
0 30px 80px -20px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 60px rgba(0,0,0,.5);
padding:34px 22px 22px;
color:#d4b96a;
text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:space-between;
letter-spacing:.18em;
font-family:'Inter',sans-serif;
}
.ppx .cover-front::before{
content:""; position:absolute; inset:14px;
border:1px solid rgba(212,185,106,.28);
border-radius:10px;
pointer-events:none;
}
.ppx .cover-front::after{
content:""; position:absolute; inset:0;
background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px) 0 0 / 4px 4px;
mix-blend-mode:overlay; opacity:.35; pointer-events:none;
}
.ppx .cover-top,.ppx .cover-bottom{
width:100%; display:flex; justify-content:space-between; align-items:center;
font-size:9.5px; font-weight:700; letter-spacing:.28em;
color:rgba(212,185,106,.65); position:relative; z-index:2;
}
.ppx .cover-center{
display:flex; flex-direction:column; align-items:center; gap:18px;
position:relative; z-index:2;
}
.ppx .cover-emblem{
width:104px; height:104px; border-radius:50%;
border:1.5px solid rgba(212,185,106,.5);
display:grid; place-items:center;
background:radial-gradient(circle, rgba(212,185,106,.08), transparent 70%);
position:relative;
}
.ppx .cover-emblem::before{
content:""; position:absolute; inset:8px; border-radius:50%;
border:1px solid rgba(212,185,106,.25);
}
.ppx .cover-emblem svg{ width:48px; height:48px; color:#d4b96a; }
.ppx .cover-title{
font-size:16px; font-weight:800; letter-spacing:.22em;
color:#e6cd87; line-height:1.35;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.ppx .cover-sub{
font-size:10.5px; letter-spacing:.32em;
color:rgba(212,185,106,.55); margin-top:-6px;
}
.ppx .cover-hint{
display:inline-flex; align-items:center; gap:8px;
font-size:9.5px; letter-spacing:.32em;
color:rgba(212,185,106,.7);
animation:hintPulse 2.2s ease-in-out infinite;
}
.ppx .cover-hint .arrow{ font-size:11px; }
@keyframes hintPulse{
0%,100%{ opacity:.4; transform:translateX(0); }
50%{ opacity:1; transform:translateX(3px); }
}
.ppx .cover-back{
transform:rotateY(180deg);
background:
radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.5), transparent 60%),
repeating-linear-gradient(45deg, rgba(120,90,40,.04) 0 2px, transparent 2px 5px),
linear-gradient(195deg, #f8f0d8 0%, #ecdcaf 60%, #e4cf99 100%);
box-shadow:
inset 0 0 60px rgba(120,90,40,.15),
inset -8px 0 18px -10px rgba(120,90,40,.4);
padding:16px 16px 14px;
display:flex; flex-direction:column; gap:10px;
color:#3a2810;
}
.ppx .cover-back::before{
content:""; position:absolute; inset:10px;
border:1px dashed rgba(120,90,40,.22);
border-radius:10px;
pointer-events:none;
}
.ppx .cover-back-watermark{
position:absolute; left:0; right:0; top:36%;
text-align:center;
opacity:.06; font:900 140px/1 'Inter',sans-serif;
color:#5a1018; letter-spacing:-.05em; pointer-events:none;
transform:rotate(-8deg);
}
.ppx .pa-header{
display:flex; justify-content:space-between; align-items:baseline;
position:relative; z-index:2;
padding-bottom:8px; border-bottom:1px solid rgba(120,90,40,.25);
}
.ppx .pa-header .pa-title{
font:800 12px/1 'Inter',sans-serif; letter-spacing:.18em;
color:#7a1f2c; text-transform:uppercase;
}
.ppx .pa-header .pa-id{
font:600 10px/1 'JetBrains Mono',monospace; color:#5a4220;
}
.ppx .hero-seal-wrap{
display:grid; grid-template-columns:118px 1fr; gap:10px; align-items:center;
position:relative; z-index:2;
}
.ppx .seal-hero{ width:118px; height:118px; color:#4a2876; }
.ppx .seal-hero text{ font-family:'JetBrains Mono',monospace; }
.ppx .seal-side{
display:flex; flex-direction:column; gap:6px;
}
.ppx .seal-side-title{
font:800 9px/1 'Inter',sans-serif; letter-spacing:.22em;
color:#7a1f2c; text-transform:uppercase;
}
.ppx .seal-side .meta{
display:flex; flex-direction:column; gap:3px;
font:600 10.5px/1.3 'JetBrains Mono',monospace; color:#3a2810;
}
.ppx .seal-side .meta .k{
color:#7a5c2d; font-family:'Inter',sans-serif; font-weight:600;
font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
}
.ppx .seal-side .meta div{ display:flex; justify-content:space-between; gap:8px; }
.ppx .std-row{
display:grid; grid-template-columns:repeat(3,1fr); gap:6px 5px;
position:relative; z-index:2;
}
.ppx .std-seal{
border:1.5px solid currentColor;
border-radius:3px;
padding:6px 4px 5px;
text-align:center;
color:var(--ss-c, #5a1018);
background:rgba(255,255,255,.18);
position:relative;
transform:rotate(var(--ss-rot, -2deg));
opacity:.88;
-webkit-mask:
radial-gradient(circle at 12% 10%, transparent 0 2px, #000 2.5px),
radial-gradient(circle at 88% 88%, transparent 0 2px, #000 2.5px),
linear-gradient(#000 0 0);
mask:
radial-gradient(circle at 12% 10%, transparent 0 2px, #000 2.5px),
radial-gradient(circle at 88% 88%, transparent 0 2px, #000 2.5px),
linear-gradient(#000 0 0);
-webkit-mask-composite:source-in;
mask-composite:intersect;
}
.ppx .std-seal::before{
content:""; position:absolute; inset:2px;
border:1px solid currentColor; opacity:.4;
border-radius:2px;
}
.ppx .std-seal .ss-org{
font:800 11px/1 'JetBrains Mono',monospace; letter-spacing:.06em;
margin-bottom:1px;
}
.ppx .std-seal .ss-name{
font:700 7.5px/1.2 'Inter',sans-serif; letter-spacing:.12em;
text-transform:uppercase; opacity:.85;
}
.ppx .std-w3c{ --ss-c:#1f3a6e; --ss-rot:-3deg; }
.ppx .std-gs1{ --ss-c:#a05420; --ss-rot:2deg; }
.ppx .std-ipfs{ --ss-c:#1a6e64; --ss-rot:-1.5deg; }
.ppx .std-eidas{ --ss-c:#5a1018; --ss-rot:3deg; }
.ppx .std-ebsi{ --ss-c:#1f3a6e; --ss-rot:-2deg; }
.ppx .std-vc-ext{ --ss-c:#4a2876; --ss-rot:1deg; }
.ppx .espr-stamp{
margin-top:auto;
border:2px solid #0a6839;
border-radius:4px;
padding:7px 10px;
color:#0a6839;
background:rgba(255,255,255,.18);
transform:rotate(-1.8deg);
text-align:center;
position:relative; z-index:2;
font-family:'Inter',sans-serif;
}
.ppx .espr-stamp::before{
content:""; position:absolute; inset:3px;
border:1px solid #0a6839; opacity:.5; border-radius:2px;
}
.ppx .espr-stamp .es-stars{
font:700 10px/1 'Inter',sans-serif; letter-spacing:.32em;
color:#0a6839; margin-bottom:3px;
}
.ppx .espr-stamp .es-main{
font:900 13px/1 'JetBrains Mono',monospace; letter-spacing:.06em;
}
.ppx .espr-stamp .es-sub{
font:700 8.5px/1 'Inter',sans-serif; letter-spacing:.22em;
margin-top:3px; opacity:.85;
}
.ppx .passport-book.open .passport-cover{
transform:rotateY(-168deg);
box-shadow:-12px 20px 60px -10px rgba(0,0,0,.5);
}
.ppx .passport-book.open .cover-hint{ opacity:0; transition:opacity .3s; }
.ppx .passport-book.stamped .data-flip{
transform:rotateY(-168deg);
box-shadow:-12px 20px 60px -10px rgba(0,0,0,.4);
z-index:6;
}
.ppx .data-back{
position:absolute; inset:0;
border-radius:20px;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
transform:rotateY(180deg);
background:
radial-gradient(120% 70% at 80% 0%, rgba(255,255,255,.45), transparent 60%),
repeating-linear-gradient(45deg, rgba(120,90,40,.04) 0 2px, transparent 2px 5px),
linear-gradient(195deg, #f8f0d8 0%, #ecdcaf 60%, #e4cf99 100%);
border:1px solid rgba(120,90,40,.18);
box-shadow:
inset 0 0 60px rgba(120,90,40,.12),
inset -8px 0 18px -10px rgba(120,90,40,.35);
padding:20px;
display:flex; flex-direction:column; gap:14px;
overflow:hidden;
}
.ppx .data-back-watermark{
position:absolute; left:0; right:0; top:35%;
text-align:center; font:900 130px/1 'Inter',sans-serif;
color:rgba(122,31,44,.06); letter-spacing:-.05em;
pointer-events:none; transform:rotate(-8deg);
}
.ppx .data-back .pa-header{ padding-bottom:8px; border-bottom:1px solid rgba(120,90,40,.25); }
.ppx .data-back-body{
flex:1; display:flex; flex-direction:column; gap:4px;
position:relative; z-index:2;
font:600 11px/1.5 'Inter',sans-serif; color:#5a4220;
min-height:0;
}
.ppx .data-back-body .row{
display:flex; justify-content:space-between;
padding:5px 0; border-bottom:1px dashed rgba(120,90,40,.2);
}
.ppx .data-back-body .k{
color:#7a5c2d; font:600 10px/1 'Inter',sans-serif;
letter-spacing:.1em; text-transform:uppercase;
}
.ppx .data-back-body .v{
color:#2a1d0a; font:700 11.5px/1 'JetBrains Mono',monospace;
}
.ppx .data-back-foot{
font:600 9.5px/1 'JetBrains Mono',monospace; color:#7a5c2d;
letter-spacing:.18em; text-align:center;
border-top:1px solid rgba(120,90,40,.2); padding-top:8px;
position:relative; z-index:2;
}
.ppx .visa-page-front{
position:absolute; inset:0;
border-radius:20px;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
overflow:hidden;
background:
radial-gradient(120% 70% at 80% 0%, rgba(255,255,255,.45), transparent 60%),
repeating-linear-gradient(45deg, rgba(120,90,40,.03) 0 2px, transparent 2px 5px),
linear-gradient(165deg, #f8f0d8 0%, #ecdcaf 60%, #e4cf99 100%);
border:1px solid rgba(120,90,40,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 8px 0 18px -10px rgba(120,90,40,.35);
padding:18px;
display:flex; flex-direction:column; gap:10px;
color:#2a1d0a;
}
.ppx .visa-page-header{
display:flex; justify-content:space-between; align-items:baseline;
padding-bottom:8px; border-bottom:1px solid rgba(120,90,40,.25);
}
.ppx .visa-page-header .vh-title{
font:800 12px/1 'Inter',sans-serif; letter-spacing:.18em;
color:#7a1f2c; text-transform:uppercase;
}
.ppx .visa-page-header .vh-id{
font:600 10px/1 'JetBrains Mono',monospace; color:#5a4220;
}
.ppx .visa-page-body{
flex:1; position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px;
}
.ppx .visa-meta{
display:flex; flex-direction:column; gap:6px;
font:600 10.5px/1.3 'Inter',sans-serif; color:#5a4220;
text-align:center; max-width:240px;
}
.ppx .visa-meta .v-row{
display:flex; justify-content:space-between; gap:14px;
padding:3px 0; border-bottom:1px dashed rgba(120,90,40,.25);
}
.ppx .visa-meta .v-row:last-child{ border-bottom:0; }
.ppx .visa-meta .v-k{
color:#7a5c2d; font-size:9.5px; letter-spacing:.12em;
text-transform:uppercase; font-weight:700;
}
.ppx .visa-meta .v-v{
color:#2a1d0a; font:700 11px/1 'JetBrains Mono',monospace;
}
.ppx .visa-page-foot{
font:700 9px/1 'JetBrains Mono',monospace; color:#7a5c2d;
letter-spacing:.22em; text-align:center;
border-top:1px solid rgba(120,90,40,.2); padding-top:8px;
}
.ppx .visa-stamp{
width:200px; height:200px;
color:#1f3a6e;
opacity:0;
transform:rotate(-8deg) scale(2.6) translateY(-30px);
pointer-events:none;
filter:drop-shadow(0 2px 0 rgba(255,255,255,.4));
}
.ppx .visa-stamp svg{ width:100%; height:100%; display:block; }
.ppx .passport-book.stamped .visa-stamp{
animation:visaStamp .65s cubic-bezier(.55,-.4,.3,1.4) .8s forwards;
}
@keyframes visaStamp{
0% { transform:rotate(-8deg) scale(2.8) translateY(-30px); opacity:0; }
50% { transform:rotate(-8deg) scale(1.08) translateY(0); opacity:.92; }
75% { transform:rotate(-8deg) scale(.94); opacity:.85; }
100% { transform:rotate(-8deg) scale(1); opacity:.82; }
}
.ppx .action-hint{
position:absolute;
bottom:-26px; left:50%; transform:translateX(-50%);
font:700 10.5px/1 'JetBrains Mono',monospace;
color:rgba(255,255,255,.55);
letter-spacing:.22em; text-transform:uppercase;
white-space:nowrap;
opacity:0; pointer-events:none;
transition:opacity .35s ease;
}
.ppx .passport-wrap:has(.passport-book.open:not(.stamped)) .action-hint{
opacity:1;
animation:hintBlink 1.8s ease-in-out infinite;
}
@keyframes hintBlink{
0%,100%{ opacity:.4; }
50%{ opacity:.95; }
}
.ppx .passport-wrap .floater{ opacity:0; transition:opacity .5s .8s ease; }
.ppx .passport-wrap:has(.passport-book.open) .floater{ opacity:1; }
.ppx .passport-book .passport,.ppx .passport-book .data-back,.ppx .passport-book .visa-page-front{ visibility:hidden; }
.ppx .passport-book.open .passport,.ppx .passport-book.open .data-back{ visibility:visible; }
.ppx .passport-book.open.stamped .visa-page-front{ visibility:visible; }
.ppx .passport-book.stamped .data-back{
visibility:visible !important;
opacity:1 !important;
transform:translateX(272px) rotateY(180deg) translateZ(10px) scale(0.8) !important;
transform-origin:0 0 !important;
}
.ppx .passport-book .passport,.ppx .passport-book .data-back,.ppx .passport-book .visa-page-front,.ppx .passport-book .cover-face{
width:340px !important;
height:500px !important;
inset:auto !important;
top:0 !important; left:0 !important;
transform-origin:0 0;
}
.ppx .passport-book .passport,.ppx .passport-book .visa-page-front,.ppx .passport-book .cover-front{
transform:scale(0.8);
}
.ppx .passport-book .cover-back{
transform:translateX(272px) rotateY(180deg) scale(0.8);
}
.ppx .passport-book .data-back{
transform:rotateY(180deg) translateX(-272px) scale(0.8);
}
.ppx .passport-wrap .floater{ opacity:0; transition:opacity .5s .8s ease; }
.ppx .passport-book .passport-cover{ transition:transform 1.4s cubic-bezier(.65,.04,.2,1), box-shadow 1s ease; }
.ppx .passport{
position:absolute; inset:0;
border-radius:20px;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
overflow:hidden;
background:
radial-gradient(120% 70% at 80% 0%, rgba(255,255,255,.45), transparent 60%),
repeating-linear-gradient(45deg, rgba(120,90,40,.03) 0 2px, transparent 2px 5px),
linear-gradient(165deg, #f8f0d8 0%, #ecdcaf 60%, #e4cf99 100%);
border:1px solid rgba(120,90,40,.18);
padding:20px;
color:#2a1d0a;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 8px 0 18px -10px rgba(120,90,40,.35);
}
.ppx .passport::before{
content:"";position:absolute;inset:-1px;border-radius:21px;pointer-events:none;
background:linear-gradient(135deg,rgba(120,30,40,.28),transparent 35%, transparent 65%, rgba(120,30,40,.18));
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
.ppx .passport::after{
content:"DPP"; position:absolute; right:18px; bottom:48px;
font:900 96px/1 'Inter',sans-serif; letter-spacing:-.05em;
color:rgba(120,30,40,.06); pointer-events:none;
}
.ppx .pp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.ppx .pp-label{font-size:11px;letter-spacing:.22em;font-weight:700;color:#7a1f2c;text-transform:uppercase}
.ppx .pp-id{font-family:'JetBrains Mono',monospace;font-size:12px;color:#5a4220;margin-top:4px;font-weight:600}
.ppx .verified{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:6px;
background:rgba(0,120,60,.14);color:#0a6839;
font-size:11px;font-weight:800;letter-spacing:.08em;
border:1px solid rgba(0,120,60,.4);
}
.ppx .pp-body{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:flex-start}
.ppx .pp-product{
width:76px;height:76px;border-radius:8px;
overflow:hidden; position:relative;
background:
linear-gradient(135deg,#2a4a6e 0%, #1e3553 40%, #4a6a8e 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px -4px rgba(0,0,0,.5);
}
.ppx .pp-product image-slot{
width:100%; height:100%; display:block;
--placeholder-bg: linear-gradient(135deg,#2a4a6e,#1e3553);
--placeholder-fg: rgba(255,255,255,.5);
--placeholder-font: 9px/1.2 'JetBrains Mono', monospace;
}
.ppx .pp-product .denim-ph{
position:absolute; inset:0;
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(160deg, #2a4a6e 0%, #1e3553 100%);
color:#9fb8d6; font-size:7px; font-weight:700;
letter-spacing:.05em;
display:flex; align-items:flex-end; justify-content:center;
padding-bottom:4px;
overflow:hidden;
}
.ppx .pp-product .denim-ph::before{ display:none; }
.ppx .qr{
width:88px;height:88px;border-radius:10px;background:#fff;padding:6px;
display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:1px;
}
.ppx .qr i{background:#0A2540;display:block;border-radius:1px}
.ppx .qr i.w{background:transparent}
.ppx .pp-info{font-size:14px;position:relative;z-index:1}
.ppx .pp-info .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed rgba(120,90,40,.25)}
.ppx .pp-info .row:last-child{border-bottom:0}
.ppx .pp-info .k{color:#7a5c2d;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.ppx .pp-info .v{color:#2a1d0a;font-weight:700;font-size:13px}
.ppx .pp-q{ position:relative; cursor:help; }
.ppx .pp-q::after{
content:attr(data-tip);
position:absolute; left:50%; bottom:calc(100% + 9px);
transform:translateX(-50%) translateY(5px);
width:178px; box-sizing:border-box;
background:#0A2540; color:#fff;
font:600 11px/1.4 'Inter',sans-serif; letter-spacing:0;
text-align:left;
padding:9px 11px; border-radius:10px;
box-shadow:0 12px 26px -8px rgba(0,0,0,.55);
opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
z-index:30;
}
.ppx .pp-q::before{
content:""; position:absolute; left:50%; bottom:calc(100% + 4px);
transform:translateX(-50%) rotate(45deg);
width:11px; height:11px; background:#0A2540; border-radius:2px;
opacity:0; pointer-events:none;
transition:opacity .2s ease;
z-index:30;
}
.ppx .pp-q:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.ppx .pp-q:hover::before{ opacity:1; }
.ppx .pp-q .v{ text-decoration:underline; text-decoration-style:dotted; text-decoration-color:rgba(122,92,45,.5); text-underline-offset:2px; }
.ppx .pcf-head.pp-q{ cursor:help; }
.ppx .pcf{margin-top:18px;padding-top:16px;border-top:1px solid rgba(120,90,40,.25);position:relative;z-index:1}
.ppx .pcf-head{display:flex;justify-content:space-between;font-size:12px;color:#5a4220;margin-bottom:8px;font-weight:700}
.ppx .pcf-head .pcf-val{color:#0a6839;font-family:'JetBrains Mono',monospace;font-weight:800}
.ppx .pcf-bar{height:8px;background:rgba(120,90,40,.18);border-radius:99px;overflow:hidden;position:relative;border:1px solid rgba(120,90,40,.2)}
.ppx .pcf-fill{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:99px;background:linear-gradient(90deg,#0a6839,#3eaa6a)}
.ppx .pcf-score{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#7a5c2d;font-weight:600}
.ppx .pp-foot{margin-top:18px;display:flex;justify-content:space-between;font-size:11px;color:#5a4220;font-weight:600;letter-spacing:.04em;position:relative;z-index:1}
.ppx .pp-chain{
margin-top:14px;padding:10px 12px 10px;border-radius:8px;
border:1px solid rgba(130,71,229,.35);
border-top:2px solid #6a32c4;
background:linear-gradient(180deg, rgba(130,71,229,.10), rgba(130,71,229,.03));
position:relative; z-index:1;
}
.ppx .pp-chain .head{
display:flex;align-items:center;justify-content:space-between;
font-size:10px;font-weight:800;letter-spacing:.16em;color:#5a2ca8;text-transform:uppercase;margin-bottom:6px;
}
.ppx .pp-chain .demo-tag{
background:rgba(130,71,229,.18);color:#5a2ca8;
padding:1px 6px;border-radius:4px;font-size:9px;letter-spacing:.12em;font-weight:800;
}
.ppx .pp-chain .line{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#2a1d0a;padding:2px 0;font-family:'JetBrains Mono',monospace;font-weight:600}
.ppx .pp-chain .line .k{color:#7a5c2d;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.04em}
.ppx .pp-chain .line .copy{color:#7a5c2d;font-size:10px;margin-left:4px;cursor:pointer}
.ppx .pp-chain .pulse-mini{width:6px;height:6px;border-radius:50%;background:#0a6839;box-shadow:0 0 0 0 rgba(10,104,57,.7);animation:pulse 1.8s infinite;display:inline-block;margin-right:6px}
.ppx .pp-chain .pills{display:flex;gap:5px;margin-top:6px}
.ppx .pp-chain .pills span{
flex:1;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.04em;
padding:4px 6px;border-radius:5px;background:rgba(130,71,229,.10);color:#3a2810;
border:1px solid rgba(130,71,229,.25);
border:1px solid rgba(255,255,255,.08);
}
.ppx .trust-sec{
background:linear-gradient(180deg,#0A2540 0%, #0D1B2A 100%);
color:#fff;position:relative;overflow:hidden;
}
.ppx .trust-sec::before{
content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(130,71,229,.3) 1px,transparent 1.2px);background-size:34px 34px;
mask-image:radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 75%);
opacity:.4;pointer-events:none;
}
.ppx .trust-sec .container{position:relative;z-index:2}
.ppx .trust-sec h2{color:#fff}
.ppx .trust-sec .section-head p.lead{color:rgba(255,255,255,.6)}
.ppx .pill-chain{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border-radius:999px;
background:rgba(130,71,229,.15);border:1px solid rgba(130,71,229,.4);
color:var(--chain-2);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.ppx .pill-chain::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--chain);box-shadow:0 0 0 0 rgba(130,71,229,.6);animation:pulse 1.8s infinite}
.ppx .flow{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;gap:14px;align-items:stretch;margin-bottom:50px}
.ppx .flow .step{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 26px;
}
.ppx .flow .step .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--chain-2);letter-spacing:.14em;font-weight:700;margin-bottom:10px}
.ppx .flow .step .ico{font-size:30px;margin-bottom:12px;line-height:1}
.ppx .flow .step h3{color:#fff;font-size:20px;margin-bottom:8px;letter-spacing:-0.02em}
.ppx .flow .step p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.5;margin-bottom:14px}
.ppx .flow .step .cost{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:6px;background:rgba(0,196,140,.14);color:#7df1c4}
.ppx .flow .arr{
display:grid;place-items:center;color:rgba(255,255,255,.35);font-size:24px;
}
.ppx .trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:50px}
.ppx .trust-tile{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
border-radius:14px;padding:24px 26px;
display:flex;gap:16px;align-items:flex-start;
}
.ppx .trust-tile .ic{flex:none;width:42px;height:42px;border-radius:10px;background:rgba(130,71,229,.18);color:var(--chain-2);display:grid;place-items:center;font-size:20px}
.ppx .trust-tile h4{color:#fff;font-size:16px;margin-bottom:4px;letter-spacing:-0.01em}
.ppx .trust-tile p{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.5}
.ppx .verifier{
background:#fff;color:var(--navy);border-radius:18px;padding:32px 36px;
box-shadow:0 40px 80px -30px rgba(130,71,229,.4), 0 0 0 1px rgba(130,71,229,.3);
position:relative;
}
.ppx .verifier .demo{
position:absolute;top:18px;right:18px;
background:rgba(130,71,229,.12);color:var(--chain);
padding:4px 10px;border-radius:5px;font-size:10px;letter-spacing:.12em;font-weight:800;
}
.ppx .verifier .title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chain);font-weight:800;margin-bottom:6px}
.ppx .verifier h3{font-size:24px;letter-spacing:-0.02em;margin-bottom:18px}
.ppx .verifier .input-row{display:flex;gap:10px;margin-bottom:20px}
.ppx .verifier input{
flex:1;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--navy);outline:none;
}
.ppx .verifier input:focus{border-color:var(--chain);box-shadow:0 0 0 3px rgba(130,71,229,.12)}
.ppx .verifier .results{display:grid;gap:8px;border-top:1px dashed var(--line);padding-top:18px}
.ppx .verifier .res{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text)}
.ppx .verifier .res::before{
content:"";flex:none;width:18px;height:18px;border-radius:50%;
background:var(--green) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.ppx .verifier .res b{color:var(--navy);font-weight:600}
.ppx .verifier .res .mono{font-family:'JetBrains Mono',monospace;color:var(--chain);font-weight:600}
.ppx .std-sec{
background:#0A2540;padding:48px 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}
.ppx .std-eyebrow{
text-align:center;font-size:11px;letter-spacing:.15em;
text-transform:uppercase;color:#8AA0B8;font-weight:600;margin-bottom:22px;
}
.ppx .std-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 36px}
.ppx .std-pill{
display:inline-flex;align-items:center;gap:10px;
color:#C8D4E0;font-size:14px;font-weight:500;
font-family:'JetBrains Mono','Inter',sans-serif;letter-spacing:-0.005em;
transition:color .15s;
}
.ppx .std-pill:hover{color:#fff}
.ppx .std-pill .d{width:8px;height:8px;border-radius:50%;background:var(--chain);transition:filter .15s, box-shadow .15s}
.ppx .std-pill:hover .d{filter:brightness(1.25);box-shadow:0 0 12px currentColor}
.ppx .std-pill.ipfs .d{background:#65C2CB;color:#65C2CB}
.ppx .std-pill.vc .d{background:#7DA9E3}
.ppx .std-pill.gs1 .d{background:#F26334}
.ppx .std-pill.eidas .d{background:#FFCC00}
.ppx .std-pill.ebsi .d{background:#FFCC00}
.ppx .std-pill .d.poly{color:#8247E5}
.ppx .std-soon{
font-size:9.5px;letter-spacing:.1em;font-weight:700;
padding:2px 6px;border-radius:4px;
background:rgba(255,204,0,.15);color:#FFCC00;margin-left:6px;text-transform:uppercase;
}
.ppx .gf-card.glow-chain{
border-color:rgba(130,71,229,.45);
background:linear-gradient(135deg, rgba(130,71,229,.1), rgba(130,71,229,.02));
box-shadow:0 0 0 1px rgba(130,71,229,.22), 0 30px 80px -20px rgba(130,71,229,.3);
}
.ppx .gf-card.glow-chain .gf-icon{background:rgba(130,71,229,.2);color:var(--chain-2)}
.ppx .gf-card.glow-chain .gf-tag{color:var(--chain-2)}
.ppx .feat-meta .cell.chain{
border-color:rgba(130,71,229,.45);
background:linear-gradient(135deg, rgba(130,71,229,.16), rgba(130,71,229,.04));
}
.ppx .feat-meta .cell.chain .n{color:var(--chain-2);font-size:17px}
.ppx .feat-meta .cell.chain .l{color:rgba(255,255,255,.7)}
.ppx .floater{
position:absolute;background:rgba(255,255,255,.96);color:var(--navy);
border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:600;
box-shadow:0 20px 40px -12px rgba(0,0,0,.4);
display:flex;align-items:center;gap:10px;
}
.ppx .floater .b{
width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:13px;
}
.ppx .f1{top:-10px;left:-30px;transform:rotate(-4deg)}
.ppx .f1 .b{background:var(--green)}
.ppx .f2{bottom:30px;right:-20px;transform:rotate(3deg)}
.ppx .f2 .b{background:var(--orange)}
.ppx section{padding:110px 0}
.ppx .section-head{text-align:center;max-width:740px;margin:0 auto 64px}
.ppx .kicker{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--green-2);margin-bottom:18px;
}
.ppx .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.ppx .section-head p.lead{color:var(--muted);font-size:19px;margin-top:18px;line-height:1.5}
.ppx .why{background:#fff}
.ppx .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ppx .why-card{
border:1px solid var(--line);border-radius:16px;
padding:36px 30px 30px;background:#fff;
position:relative;overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
}
.ppx .why-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -25px rgba(10,37,64,.18)}
.ppx .why-card .topbar{position:absolute;top:0;left:0;right:0;height:5px}
.ppx .tb-orange{background:var(--orange)}
.ppx .tb-red{background:var(--red)}
.ppx .tb-green{background:var(--green)}
.ppx .why-icon{
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
background:var(--light);font-size:26px;margin-bottom:20px;
}
.ppx .why-card h3{margin-bottom:12px;font-size:22px}
.ppx .why-card p{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:20px}
.ppx .mini-timeline{
display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:var(--light);
}
.ppx .mini-timeline span{flex:1;display:block}
.ppx .mini-timeline .a{background:var(--green)}
.ppx .mini-timeline .b{background:var(--orange)}
.ppx .mini-timeline .c{background:#cbd5e1}
.ppx .tl-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;font-family:'JetBrains Mono',monospace}
.ppx .stat-big{
font-size:48px;font-weight:800;letter-spacing:-0.04em;color:var(--navy);
line-height:1;margin:6px 0 4px;
}
.ppx .stat-big .unit{font-size:18px;color:var(--red);font-weight:700;margin-left:4px;vertical-align:super}
.ppx .stat-label{font-size:13px;color:var(--muted);font-weight:500}
.ppx .warn-tag{
display:inline-flex;align-items:center;gap:6px;margin-top:18px;
background:rgba(230,57,70,.08);color:var(--red);border:1px solid rgba(230,57,70,.22);
padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;
}
.ppx .checklist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ppx .checklist li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text)}
.ppx .checklist li::before{
content:"";flex:none;width:18px;height:18px;margin-top:2px;
background:var(--green);border-radius:50%;
background-image:linear-gradient(45deg,transparent 45%, #fff 47%, #fff 53%, transparent 55%),
linear-gradient(-45deg,transparent 45%, #fff 47%, #fff 53%, transparent 55%);
background-position:0 0;
}
.ppx .checklist li::before{
background:var(--green) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.ppx .countries{background:var(--light)}
.ppx .featured{
background:linear-gradient(135deg,#0A2540 0%, #103964 100%);
border-radius:24px;padding:54px;color:#fff;
display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;
position:relative;overflow:hidden;margin-bottom:24px;
box-shadow:0 40px 80px -30px rgba(10,37,64,.4);
}
.ppx .featured::after{
content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle, rgba(0,196,140,.18), transparent 60%);pointer-events:none;
}
.ppx .flag-xl{font-size:64px;line-height:1}
.ppx .featured h3{color:#fff;font-size:38px;letter-spacing:-0.03em}
.ppx .featured .factories{font-size:20px;color:rgba(255,255,255,.7);margin-top:8px}
.ppx .live-badge{
display:inline-flex;align-items:center;gap:8px;
background:var(--green);color:#04221a;font-weight:800;font-size:13px;letter-spacing:.08em;
padding:6px 12px;border-radius:6px;margin-top:14px;
}
.ppx .live-badge .dot{width:8px;height:8px;border-radius:50%;background:#04221a;animation:pulse-dark 1.6s infinite}
@keyframes pulse-dark{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.ppx .featured-actions{display:flex;flex-direction:column;gap:16px}
.ppx .feat-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
.ppx .feat-meta .cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px}
.ppx .feat-meta .cell .n{font-size:24px;font-weight:800;letter-spacing:-0.02em;color:#fff}
.ppx .feat-meta .cell .l{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.ppx .country-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ppx .country-tile{
background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
display:flex;flex-direction:column;gap:8px;
transition:transform .15s, box-shadow .15s;
}
.ppx .country-tile:hover{transform:translateY(-2px);box-shadow:0 18px 40px -25px rgba(10,37,64,.25)}
.ppx .country-tile .flag{font-size:34px;line-height:1;margin-bottom:6px}
.ppx .country-tile .name{font-weight:700;color:var(--navy);font-size:17px}
.ppx .country-tile .q{font-size:12px;color:var(--muted);font-weight:500}
.ppx .ct-rich{
background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;
display:flex;flex-direction:column;gap:12px;
transition:transform .18s, box-shadow .18s;
position:relative;
}
.ppx .ct-rich:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(10,37,64,.28)}
.ppx .ct-rich .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ppx .ct-rich .flag{font-size:38px;line-height:1}
.ppx .ct-rich .name{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-0.02em;margin-top:4px}
.ppx .ct-rich .desc{font-size:13px;color:var(--muted);line-height:1.5;min-height:36px}
.ppx .status-q{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:800;letter-spacing:.08em;
padding:5px 9px;border-radius:6px;
background:#FFF4EC;color:var(--orange);border:1px solid #ffd9c2;text-transform:uppercase;
white-space:nowrap;
}
.ppx .status-q.late{background:rgba(130,71,229,.1);color:var(--chain);border-color:rgba(130,71,229,.25)}
.ppx .ct-stats{
display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--line);border-radius:10px;overflow:hidden;border:1px solid var(--line);
}
.ppx .ct-stat{background:#fff;padding:10px 12px}
.ppx .ct-stat .l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.ppx .ct-stat .v{font-size:13px;color:var(--navy);font-weight:600;line-height:1.3}
.ppx .ct-progress{margin-top:2px}
.ppx .ct-progress .lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:500}
.ppx .ct-progress .lbl b{color:var(--navy);font-weight:700;font-family:'JetBrains Mono',monospace}
.ppx .ct-progress .bar{height:5px;background:var(--light);border-radius:99px;overflow:hidden}
.ppx .ct-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7df1c4);border-radius:99px}
.ppx .ct-bot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:500}
.ppx .ct-bot b{color:var(--navy);font-weight:600}
.ppx .ct-notify{display:flex;gap:6px;margin-top:auto}
.ppx .ct-notify input{
flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12.5px;
font-family:inherit;color:var(--text);outline:none;
}
.ppx .ct-notify input:focus{border-color:var(--navy)}
.ppx .ct-notify input::placeholder{color:#94a3b8}
.ppx .ct-notify button{
background:var(--navy);color:#fff;border:0;border-radius:8px;padding:0 12px;font-size:14px;font-weight:600;cursor:pointer;
}
.ppx .ct-notify button:hover{background:#0f3056}
.ppx .roadmap-divider{
margin-top:60px;padding-top:50px;border-top:1px solid var(--line);
}
.ppx .roadmap-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;flex-wrap:wrap;gap:12px}
.ppx .roadmap-head h3{font-size:24px;color:var(--navy);letter-spacing:-0.02em}
.ppx .roadmap-head .meta{font-size:13px;color:var(--muted);font-weight:500}
.ppx .roadmap-head .meta b{color:var(--chain);font-weight:700;font-family:'JetBrains Mono',monospace}
.ppx .region-block{margin-bottom:28px}
.ppx .region-block:last-child{margin-bottom:0}
.ppx .region-lbl{
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin-bottom:12px;
display:flex;align-items:center;gap:10px;
}
.ppx .region-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.ppx .tier2-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ppx .badge-tile{
background:#0A2540;border:1px solid rgba(255,255,255,.08);border-radius:12px;
padding:16px;color:#fff;display:flex;flex-direction:column;gap:6px;
transition:transform .15s, border-color .15s, box-shadow .15s;
position:relative;
}
.ppx .badge-tile:hover{transform:translateY(-2px);border-color:rgba(130,71,229,.4);box-shadow:0 18px 40px -25px rgba(130,71,229,.5)}
.ppx .badge-tile .flag{font-size:24px;line-height:1;transition:transform .15s;width:fit-content}
.ppx .badge-tile:hover .flag{transform:scale(1.08)}
.ppx .badge-tile .name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-0.005em}
.ppx .badge-tile .hub{font-size:12px;color:#8AA0B8;line-height:1.4}
.ppx .badge-tile .count{font-size:13px;color:var(--green);font-weight:600;font-family:'JetBrains Mono',monospace;margin-top:2px}
.ppx .badge-tile .tag{
margin-top:6px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--chain-2);font-weight:700;
}
.ppx .roadmap-cta{
margin-top:50px;text-align:center;font-size:15px;
padding:18px;border-top:1px dashed var(--line);
}
.ppx .roadmap-cta a{color:var(--green-2);font-weight:600}
.ppx .roadmap-cta a:hover{text-decoration:underline}
.ppx .roadmap-cta b{color:var(--navy)}
.ppx .soon{
display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;
padding:4px 8px;border-radius:6px;background:#FFF4EC;color:var(--orange);
border:1px solid #ffd9c2;margin-top:6px;width:fit-content;
}
.ppx .notify{margin-top:14px;display:flex;gap:6px}
.ppx .notify input{
flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;
font-family:inherit;color:var(--text);
}
.ppx .notify input::placeholder{color:#94a3b8}
.ppx .notify button{
background:var(--navy);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;
}
.ppx .threeside{background:#fff}
.ppx .tabs{
display:inline-flex;background:var(--light);border:1px solid var(--line);
padding:5px;border-radius:14px;gap:4px;margin:0 auto 48px;
}
.ppx .tabs-wrap{display:flex;justify-content:center}
.ppx .tab{
padding:11px 22px;border-radius:10px;font-weight:600;font-size:14.5px;
color:var(--muted);cursor:pointer;border:0;background:transparent;
display:inline-flex;align-items:center;gap:8px;transition:all .15s;font-family:inherit;
}
.ppx .tab.active{background:#fff;color:var(--navy);box-shadow:0 4px 12px -4px rgba(10,37,64,.18)}
.ppx .threeside-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.ppx .three-feat{display:grid;gap:22px}
.ppx .three-feat h3{color:var(--navy);font-size:32px;margin-bottom:6px;letter-spacing:-0.025em}
.ppx .three-feat .lede{color:var(--muted);font-size:17px;margin-bottom:18px;line-height:1.5}
.ppx .three-feat .item{display:flex;gap:14px;align-items:flex-start}
.ppx .three-feat .item .ic{
flex:none;width:38px;height:38px;border-radius:10px;background:rgba(0,196,140,.1);color:var(--green-2);
display:grid;place-items:center;font-weight:700;
}
.ppx .three-feat .item .ttl{font-weight:600;color:var(--navy);margin-bottom:2px}
.ppx .three-feat .item .desc{font-size:14px;color:var(--muted);line-height:1.5}
.ppx .mock{
background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:0 40px 80px -40px rgba(10,37,64,.25);
overflow:hidden;
}
.ppx .mock-head{
padding:14px 18px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:12px;background:var(--light);
}
.ppx .mock-head .dots{display:flex;gap:6px}
.ppx .mock-head .dots i{width:11px;height:11px;border-radius:50%;background:#cbd5e1;display:block}
.ppx .mock-head .dots i:nth-child(1){background:#ff5f57}
.ppx .mock-head .dots i:nth-child(2){background:#febc2e}
.ppx .mock-head .dots i:nth-child(3){background:#28c940}
.ppx .mock-head .url{
flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 10px;
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
}
.ppx .mock-body{padding:24px;display:grid;gap:18px}
.ppx .mock-title{font-weight:700;color:var(--navy);font-size:17px;display:flex;justify-content:space-between;align-items:center}
.ppx .pill-sm{font-size:11px;padding:3px 8px;border-radius:5px;background:rgba(0,196,140,.12);color:var(--green-2);font-weight:700;letter-spacing:.04em}
.ppx .table{border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
.ppx .table .tr{display:grid;grid-template-columns:1.2fr .8fr .9fr .6fr;padding:11px 14px;border-bottom:1px solid var(--line);align-items:center}
.ppx .table .tr:last-child{border-bottom:0}
.ppx .table .th{background:var(--light);color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.ppx .badge-ok{font-size:11px;padding:2px 7px;border-radius:5px;background:rgba(0,196,140,.14);color:var(--green-2);font-weight:700}
.ppx .badge-wait{font-size:11px;padding:2px 7px;border-radius:5px;background:rgba(255,107,53,.12);color:var(--orange);font-weight:700}
.ppx .progress{height:6px;background:var(--light);border-radius:99px;overflow:hidden}
.ppx .progress i{display:block;height:100%;background:var(--green);border-radius:99px;width:78%}
.ppx .gf{background:var(--navy-deep);color:#fff}
.ppx .gf h2{color:#fff}
.ppx .gf .section-head p.lead{color:rgba(255,255,255,.6)}
.ppx .gf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ppx .gf-card{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
border-radius:16px;padding:30px 28px;transition:transform .18s, background .18s;
}
.ppx .gf-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.05)}
.ppx .gf-icon{
width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.06);
display:grid;place-items:center;font-size:22px;margin-bottom:18px;
}
.ppx .gf-card h3{color:#fff;font-size:18px;margin-bottom:8px;letter-spacing:-0.015em}
.ppx .gf-card p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.55}
.ppx .gf-card.glow{
border-color:rgba(0,196,140,.4);
background:linear-gradient(135deg, rgba(0,196,140,.08), rgba(0,196,140,.02));
box-shadow:0 0 0 1px rgba(0,196,140,.2), 0 30px 80px -20px rgba(0,196,140,.25);
}
.ppx .gf-card.glow .gf-icon{background:rgba(0,196,140,.18);color:var(--green)}
.ppx .gf-tag{display:inline-block;font-size:10.5px;letter-spacing:.1em;font-weight:700;color:var(--green);margin-top:14px;text-transform:uppercase}
.ppx .timeline-sec{background:#fff}
.ppx .tl-espr-head{ text-align:center; margin-top:-38px; margin-bottom:6px; }
.ppx .tl-espr-kicker{
display:inline-flex; align-items:center; gap:7px;
font:700 11px/1 'JetBrains Mono',monospace;
letter-spacing:.18em; text-transform:uppercase;
color:var(--green-2);
padding:6px 14px; border-radius:999px;
background:rgba(0,196,140,.08);
border:1px solid rgba(0,196,140,.2);
}
.ppx .tl-espr-title{
font:800 clamp(28px,3.4vw,42px)/1.05 'Inter',sans-serif;
color:var(--navy); letter-spacing:-0.02em;
margin:16px 0 8px;
}
.ppx .tl-espr-sub{
font:500 15px/1.5 'Inter',sans-serif;
color:var(--muted);
max-width:600px; margin:0 auto;
}
.ppx .tl-espr-sub b{ color:var(--navy); font-weight:700; }
.ppx .tl-espr-tllabel{
margin-top:22px; padding-top:16px;
border-top:1px solid rgba(10,37,64,.1);
display:inline-block;
font:700 11px/1.4 'JetBrains Mono',monospace;
letter-spacing:.12em; text-transform:uppercase;
color:var(--muted);
}
.ppx .timeline{
position:relative;margin-top:20px;padding:80px 30px 30px;
}
.ppx .tl-line{
position:absolute;left:60px;right:60px;top:130px;height:4px;border-radius:99px;
background:linear-gradient(90deg, var(--green) 0%, var(--green) 50%, transparent 50%);
transition:clip-path .3s cubic-bezier(.4,.2,.2,1);
}
.ppx .tl-line::after{
content:"";position:absolute;left:50%;right:0;top:0;bottom:0;
background-image:linear-gradient(90deg, var(--orange) 50%, transparent 50%);
background-size:14px 4px;
}
.ppx .tl-row{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.ppx .tl-node{position:relative;text-align:center;padding-top:0}
.ppx .tl-dot{
width:36px;height:36px;border-radius:50%;margin:0 auto;
display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px;
border:5px solid #fff;
box-shadow:0 0 0 2px var(--line);
position:relative;z-index:2;
}
.ppx .tl-dot.green{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.ppx .tl-dot.orange{background:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.ppx .tl-dot.gray{background:#cbd5e1;box-shadow:0 0 0 2px #cbd5e1}
.ppx .tl-year{font-weight:800;font-size:28px;color:var(--navy);margin-top:18px;letter-spacing:-0.02em}
.ppx .tl-label{font-size:14px;color:var(--muted);margin-top:4px;max-width:200px;margin-left:auto;margin-right:auto;line-height:1.4}
.ppx .tl-status{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:5px}
.ppx .tl-status.done{background:rgba(0,196,140,.12);color:var(--green-2)}
.ppx .tl-status.warn{background:rgba(255,107,53,.12);color:var(--orange)}
.ppx .tl-status.live{background:rgba(0,196,140,.12);color:var(--green-2)}
.ppx .tl-status.future{background:#f1f5f9;color:var(--muted)}
.ppx .tl-node-more{ text-decoration:none; cursor:pointer; }
.ppx .tl-dot.more{ background:#fff; color:var(--navy); box-shadow:0 0 0 2px var(--navy);
font-size:17px; transition:transform .2s ease, background .2s ease, color .2s ease; }
.ppx .tl-node-more:hover .tl-dot.more{ background:var(--navy); color:#fff; transform:scale(1.12); }
.ppx .tl-node-more .tl-year{ font-size:21px; }
.ppx .tl-node-more .tl-label{ color:var(--muted); }
.ppx .tl-status.more-st{ background:var(--navy); color:#fff; transition:background .2s ease; }
.ppx .tl-node-more:hover .tl-status.more-st{ background:#0a1a30; }
.ppx .timeline[data-range] .tl-node-more{ opacity:1; }
.ppx .you-here{
position:absolute;left:25%;top:60px;transform:translateX(-50%);
background:var(--navy);color:#fff;
padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.08em;
white-space:nowrap;
}
.ppx .you-here::after{
content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
width:12px;height:12px;background:var(--navy);
}
.ppx .urgency-cta{
margin-top:60px;text-align:center;
background:linear-gradient(135deg,#FFF4EC,#fff);
border:1px solid #ffd9c2;border-radius:16px;padding:36px;
}
.ppx .tl-row{ position:relative; }
.ppx .tl-node{
transition:opacity .25s ease, transform .3s cubic-bezier(.4,.2,.2,1);
}
.ppx .timeline[data-range] .tl-node{ opacity:.35; }
.ppx .timeline[data-range="24-26"] .tl-node[data-yr="2024"],.ppx .timeline[data-range="24-26"] .tl-node[data-yr="2026"],.ppx .timeline[data-range="26-27"] .tl-node[data-yr="2026"],.ppx .timeline[data-range="26-27"] .tl-node[data-yr="2027"],.ppx .timeline[data-range="27-29"] .tl-node[data-yr="2027"],.ppx .timeline[data-range="27-29"] .tl-node[data-yr="2029"]{
opacity:1; transform:translateY(-4px) scale(1.04);
}
/* ===== 4-node row → Style C connected cards ===== */
.ppx .timeline .tl-line{ display:none; }
.ppx .tl-row{ display:flex; align-items:stretch; gap:22px; }
.ppx .tl-row .tl-node{
flex:1; text-align:center;
background:#fff;
border:1px solid var(--line);
border-top:3px solid #cbd5e1;
border-radius:0 0 10px 10px;
padding:10px 11px 11px;
box-shadow:0 6px 16px -14px rgba(10,37,64,.3);
}
.ppx .tl-row .tl-node:has(.tl-status.done),
.ppx .tl-row .tl-node:has(.tl-status.live){ border-top-color:var(--green); }
.ppx .tl-row .tl-node:has(.tl-status.warn){ border-top-color:var(--orange); }
.ppx .tl-row .tl-node .tl-dot{ display:none; }
.ppx .tl-row .tl-node .tl-year{ margin-top:0; font-size:19px; }
.ppx .tl-row .tl-node .tl-label{ font-size:11px; margin-top:4px; max-width:none; line-height:1.3; }
.ppx .tl-row .tl-node .tl-status{ margin-top:7px; font-size:10.5px; padding:3px 8px; }
.ppx .tl-row .tl-node:not(:first-child)::before{
content:"\203A";
position:absolute; left:-22px; top:50%; transform:translateY(-50%);
width:22px; text-align:center;
font:400 18px/1 'Inter',sans-serif; color:var(--muted); opacity:.55;
}
.ppx .tl-row .tl-node-more{ display:block; }
.ppx .tl-zoom{
position:relative;
margin:6px 2% 28px;
height:0; overflow:visible;
opacity:0; pointer-events:none;
transform:translateY(-8px);
transition:opacity .35s ease, transform .35s ease, height .35s ease;
}
.ppx .timeline[data-range] .tl-zoom{
opacity:1; pointer-events:auto;
transform:translateY(0);
height:380px;
}
.ppx .tlz-frame{
position:relative;
height:380px;
padding:0 18px;
border-radius:18px;
background:linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%);
border:1px solid #e7e2d6;
box-shadow:0 18px 40px -22px rgba(10,37,64,.22);
overflow:hidden;
}
.ppx .tlz-years{
position:absolute; inset:0;
display:flex; align-items:center;
pointer-events:none;
}
.ppx .tlz-y{
font:900 88px/1 'Inter',sans-serif;
letter-spacing:-0.06em;
opacity:.07;
color:var(--navy);
flex:1; text-align:center;
}
.ppx .tlz-y.past{ color:#94a3b8; opacity:.10; }
.ppx .tlz-y.now{ color:var(--green-2); opacity:.10; }
.ppx .tlz-y.future{ color:var(--orange); opacity:.09; }
.ppx .tlz-header{
position:absolute; left:18px; top:14px;
display:inline-flex; align-items:center; gap:8px;
padding:5px 11px; border-radius:999px;
background:#fff; border:1px solid #e2d9c6;
font:700 10px/1 'JetBrains Mono',monospace;
letter-spacing:.14em; color:var(--navy);
box-shadow:0 4px 10px -4px rgba(10,37,64,.15);
z-index:6;
transition:left .35s cubic-bezier(.4,.2,.2,1), transform .35s cubic-bezier(.4,.2,.2,1);
}
/* On the 24-26 and 27-29 ranges, centre the range header chip */
.ppx .timeline[data-range="24-26"] .tlz-header,
.ppx .timeline[data-range="27-29"] .tlz-header{
left:50%;
transform:translateX(-50%);
}
.ppx .tlz-header .h-dot{
width:7px; height:7px; border-radius:50%;
background:var(--muted);
}
.ppx .tlz-header.past .h-dot{ background:#94a3b8; }
.ppx .tlz-header.now .h-dot{ background:var(--green); }
.ppx .tlz-header.future .h-dot{ background:var(--orange); }
.ppx .tlz-flag{
position:absolute; left:50%;
top:50%;
transform:translate(-50%, calc(-100% + 7px));
z-index:5;
text-align:center;
transition:left .35s cubic-bezier(.4,.2,.2,1);
}
.ppx .tlz-flag-card{
display:inline-block;
background:var(--navy); color:#fff;
padding:9px 14px 10px;
border-radius:10px;
box-shadow:0 14px 28px -10px rgba(10,37,64,.45);
text-align:left;
white-space:nowrap;
text-decoration:none; cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease;
}
.ppx a.tlz-flag-card:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px -10px rgba(10,37,64,.55);
}
.ppx .tlz-flag.past .tlz-flag-card{ background:#475569; }
.ppx .tlz-flag.warn .tlz-flag-card{ background:var(--orange); }
.ppx .tlz-flag-tag{
display:block; font:800 6.5px/1 'JetBrains Mono',monospace;
letter-spacing:.14em; color:#f0c674;
margin-bottom:2px;
}
.ppx .tlz-flag.warn .tlz-flag-tag{ color:#fff5e0; }
.ppx .tlz-flag-card b{
display:block; font:700 9.5px/1.2 'Inter',sans-serif;
color:#fff; letter-spacing:-0.005em;
}
.ppx .tlz-flag-date{
display:block; font:600 8px/1 'Inter',sans-serif;
color:rgba(255,255,255,.65); margin-top:2px;
}
.ppx .tlz-flag-cd{
margin-top:5px; padding-top:5px;
border-top:1px solid rgba(255,255,255,.2);
display:flex; flex-direction:column; align-items:center; gap:2px;
}
.ppx .tlz-flag-cd .tlz-cd{ padding:2px 5px; }
.ppx .tlz-flag-cd .tlz-cd b{ font-size:11px; }
.ppx .tlz-flag-cd .tlz-cd i{ font-size:7px; }
.ppx .tlz-flag-cd .tlz-cd-pfx{ font-size:7px; }
.ppx .tlz-flag-cd .tlz-runway-lbl{ color:rgba(255,255,255,.8); font-size:8px; }
.ppx .tlz-flag-stem{
width:2px; height:16px;
background:var(--navy);
margin:0 auto;
opacity:.65;
}
.ppx .tlz-flag.past .tlz-flag-stem{ background:#475569; }
.ppx .tlz-flag.warn .tlz-flag-stem{ background:var(--orange); }
.ppx .tlz-flag-dot{
width:14px; height:14px; margin:-2px auto 0;
border-radius:50%;
background:var(--navy);
box-shadow:0 0 0 4px #fff, 0 0 0 6px rgba(10,37,64,.18);
}
.ppx .tlz-flag.past .tlz-flag-dot{ background:#475569; box-shadow:0 0 0 4px #fff, 0 0 0 6px rgba(71,85,105,.18); }
.ppx .tlz-flag.warn .tlz-flag-dot{ background:var(--orange); box-shadow:0 0 0 4px #fff, 0 0 0 6px rgba(255,107,53,.18); }
.ppx .tlz-rail{
position:absolute; left:18px; right:18px;
top:50%; transform:translateY(-50%);
height:46px;
}
.ppx .tlz-regions{ position:absolute; inset:0; }
.ppx .tlz-region{
position:absolute; top:0; bottom:0;
border:1px solid rgba(10,37,64,.10);
border-right-width:0;
}
.ppx .tlz-region:last-child{ border-right-width:1px; }
.ppx .tlz-region.past{ background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,.04)); border-color:rgba(148,163,184,.3); }
.ppx .tlz-region.now{ background:linear-gradient(180deg, rgba(0,196,140,.10), rgba(0,196,140,.04)); border-color:rgba(0,196,140,.30); }
.ppx .tlz-region.future{ background:linear-gradient(180deg, rgba(255,107,53,.10), rgba(255,107,53,.04)); border-color:rgba(255,107,53,.30); }
.ppx .tlz-region:first-child{ border-radius:8px 0 0 8px; }
.ppx .tlz-region:last-child{ border-radius:0 8px 8px 0; }
.ppx .tlz-region:only-child{ border-radius:8px; }
.ppx .tlz-region-lbl{
position:absolute; top:-15px; left:50%;
transform:translateX(-50%);
font:700 9.5px/1 'JetBrains Mono',monospace;
letter-spacing:.16em; color:var(--muted);
white-space:nowrap;
}
.ppx .tlz-rail-line{
position:absolute; left:0; right:0;
top:50%; height:2px; transform:translateY(-50%);
background:rgba(10,37,64,.12);
}
.ppx .tlz-ticks{ position:absolute; inset:0; }
.ppx .tlz-tick{
position:absolute; top:50%; transform:translate(-50%,-50%);
text-align:center;
}
.ppx .tlz-tick::before{
content:""; display:block; width:6px; height:6px; margin:0 auto;
border-radius:50%;
background:#fff;
border:1.5px solid #94a3b8;
}
.ppx .tlz-tick[data-key="1"]::before{
width:10px; height:10px; border-color:var(--navy);
background:var(--navy);
}
.ppx .tlz-tick[data-today="1"]::before{
width:12px; height:12px; border-color:var(--green);
background:var(--green);
box-shadow:0 0 0 3px rgba(0,196,140,.25);
}
.ppx .tlz-tick[data-newyr="1"]::before{
width:10px; height:10px; border-color:var(--orange);
background:#fff;
}
.ppx .tlz-tick span{
display:block; margin-top:6px;
font:700 12.4px/1 'JetBrains Mono',monospace;
letter-spacing:.1em;
color:var(--muted);
white-space:nowrap;
}
.ppx .tlz-tick[data-key="1"] span,.ppx .tlz-tick[data-newyr="1"] span,.ppx .tlz-tick[data-today="1"] span{
color:var(--navy);
}
/* "You are here" — navy pill floating just above the rail, with a green point ON the line */
.ppx .tlz-now{
position:absolute; left:50%;
top:50%;
transform:translate(-50%, calc(-100% + 4px));
display:flex; flex-direction:column; align-items:center; gap:5px;
z-index:8;
transition:left .35s cubic-bezier(.4,.2,.2,1);
}
.ppx .tlz-now-pill{
display:inline-flex; align-items:center;
background:#0d1b3e; color:#fff;
padding:4px 11px;
border-radius:99px;
white-space:nowrap;
box-shadow:0 6px 16px -6px rgba(10,37,64,.55);
}
.ppx .tlz-now-txt{
font:600 10px/1 'Inter',sans-serif; letter-spacing:.01em;
color:#fff;
}
.ppx .tlz-now-txt b{ font-weight:700; }
.ppx .tlz-now-dot{
position:relative; flex:none;
width:9px; height:9px; border-radius:50%;
background:var(--green);
box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(0,196,140,.45);
}
.ppx .tlz-now-pulse{
position:absolute; inset:-5px;
border-radius:50%;
background:var(--green); opacity:.5;
animation:tlPulse 1.6s ease-out infinite;
pointer-events:none;
}
@keyframes tlPulse{
0% { transform:scale(.8); opacity:.65; }
70% { transform:scale(2.4); opacity:0; }
100% { transform:scale(2.4); opacity:0; }
}
.ppx .tlz-runway{
display:none;
position:absolute; left:18px; right:18px;
bottom:16px;
}
.ppx .tlz-runway-bar{
height:6px; border-radius:3px;
background:rgba(10,37,64,.1);
position:relative;
}
.ppx .tlz-runway-bar.past{
background:linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}
.ppx .tlz-runway-bar.now{
background:linear-gradient(90deg,
var(--green) 0%, var(--green) var(--pct,9%),
#cbd5e1 var(--pct,9%), #cbd5e1 100%);
}
.ppx .tlz-runway-bar.future{
background:linear-gradient(90deg,
#cbd5e1 0%, #cbd5e1 var(--pct,17%),
var(--orange) var(--pct,17%), var(--orange) 100%);
}
.ppx .tlz-runway-cap{
margin-top:8px;
display:flex; align-items:baseline; gap:10px;
justify-content:center;
flex-wrap:wrap;
}
.ppx .tlz-cd{
display:inline-flex; align-items:baseline; gap:3px;
font-family:'JetBrains Mono', monospace;
color:var(--navy);
letter-spacing:-0.01em;
background:#fff;
padding:6px 10px;
border-radius:8px;
border:1px solid #e2d9c6;
box-shadow:0 4px 10px -4px rgba(10,37,64,.15);
}
.ppx .tlz-cd-pfx{
font:700 10px/1 'JetBrains Mono',monospace;
color:var(--muted);
letter-spacing:.06em;
margin-right:2px;
}
.ppx .tlz-cd-seg{ display:inline-flex; align-items:baseline; gap:1px; }
.ppx .tlz-cd-seg + .tlz-cd-seg{ margin-left:4px; }
.ppx .tlz-cd b{
font-weight:800; font-size:17px;
color:var(--navy);
font-variant-numeric:tabular-nums;
}
.ppx .tlz-cd i{
font-style:normal; font-size:10px; font-weight:600;
color:var(--muted); margin-right:2px;
letter-spacing:.04em;
}
.ppx .tlz-cd-ms b{
color:var(--orange);
min-width:24px; text-align:left;
}
.ppx .tlz-runway-lbl{
font:600 12px/1 'Inter',sans-serif;
color:var(--muted);
letter-spacing:.01em;
}
.ppx .tlz-events{
position:absolute; left:0; right:0;
top:calc(50% + 8px);
pointer-events:none;
height:80px;
}
.ppx .tlz-evt{
position:absolute;
transform:translateX(-50%);
text-align:center;
pointer-events:auto;
text-decoration:none;
color:inherit;
display:block;
}
.ppx .tlz-evt:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }
.ppx .tlz-evt-line{
width:1px; height:14px; margin:0 auto;
background:rgba(10,37,64,.25);
}
/* Same-date events share one straight vertical line and stack serially below it.
A taller connector pushes each deeper card down while staying on the same x. */
.ppx .tlz-evt.lane-d1 .tlz-evt-line{ height:54px; }
.ppx .tlz-evt.lane-d2 .tlz-evt-line{ height:94px; }
.ppx .tlz-evt.lane-d3 .tlz-evt-line{ height:134px; }
.ppx .tlz-evt.lane-d4 .tlz-evt-line{ height:174px; }
.ppx .tlz-evt.past .tlz-evt-line{ background:rgba(71,85,105,.35); }
.ppx .tlz-evt.now .tlz-evt-line{ background:var(--green); width:2px; }
.ppx .tlz-evt.warn .tlz-evt-line{ background:var(--orange); }
.ppx .tlz-evt-dot{
width:6px; height:6px; margin:0 auto;
border-radius:50%;
background:#fff;
border:1.5px solid var(--navy);
}
.ppx .tlz-evt.past .tlz-evt-dot{ border-color:#475569; background:#475569; }
.ppx .tlz-evt.now .tlz-evt-dot{ border-color:var(--green); background:var(--green); width:8px; height:8px; }
.ppx .tlz-evt.warn .tlz-evt-dot{ border-color:var(--orange); background:var(--orange); }
.ppx .tlz-evt-card{
margin-top:5px;
background:#fff;
border:1px solid #d8d1bf;
border-radius:6px;
padding:3px 7px 4px;
box-shadow:0 4px 10px -3px rgba(10,37,64,.12);
display:inline-block;
width:max-content;
max-width:148px;
text-align:left;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
cursor:pointer;
}
.ppx .tlz-evt:hover .tlz-evt-card{
transform:translateY(-2px);
box-shadow:0 8px 18px -4px rgba(10,37,64,.22);
border-color:var(--navy);
z-index:5;
position:relative;
}
.ppx .tlz-evt.now:hover .tlz-evt-card{ border-color:var(--green); }
.ppx .tlz-evt.warn:hover .tlz-evt-card{ border-color:var(--orange); }
.ppx .tlz-evt-card::after{
content:"↗";
font:700 8px/1 'JetBrains Mono',monospace;
color:var(--muted);
position:absolute; top:3px; right:4px;
opacity:0; transition:opacity .2s ease;
}
.ppx .tlz-evt:hover .tlz-evt-card{ padding-right:12px; }
.ppx .tlz-evt:hover .tlz-evt-card::after{ opacity:.7; }
.ppx .tlz-evt-date{
display:block;
font:800 11px/1 'JetBrains Mono',monospace;
letter-spacing:.08em;
color:var(--navy);
margin-bottom:2px;
}
.ppx .tlz-evt.past .tlz-evt-date{ color:#475569; }
.ppx .tlz-evt.now .tlz-evt-date{ color:var(--green-2); }
.ppx .tlz-evt.warn .tlz-evt-date{ color:var(--orange); }
.ppx .tlz-evt-topic{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font:600 9.5px/1.2 'Inter',sans-serif;
color:var(--navy);
letter-spacing:-0.005em;
white-space:normal;
}
.ppx .timeline[data-range="24-26"] .tl-zoom,.ppx .timeline[data-range="26-27"] .tl-zoom,.ppx .timeline[data-range="27-29"] .tl-zoom{ }
@media (max-width:760px){.ppx .tl-zoom{ display:none; }}
.ppx background:linear-gradient(135deg,.ppx #FFF4EC,.ppx #fff);
border:1px solid #ffd9c2;border-radius:16px;padding:36px;
.urgency-cta h3{color:var(--navy);font-size:24px;margin-bottom:8px}
.ppx .urgency-cta p{color:var(--muted);margin-bottom:18px}
.ppx .countdown{display:inline-flex;gap:8px;margin-bottom:18px;font-family:'JetBrains Mono',monospace}
.ppx .countdown .cell{background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;font-size:18px}
.ppx .countdown .cell small{display:block;font-size:9px;color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.1em;margin-top:2px}
.ppx .pricing{background:var(--light)}
.ppx .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ppx .price{
background:linear-gradient(170deg,#0A2540 0%, #0f2f53 100%);
border:0;border-radius:18px;padding:36px 30px;
display:flex;flex-direction:column;position:relative;color:#fff;z-index:0;
transition:transform .4s cubic-bezier(.4,.2,.2,1), box-shadow .4s ease, opacity .4s ease, filter .4s ease;
}
.ppx .price-grid:hover .price{ opacity:.45;filter:saturate(.9); }
.ppx .price-grid:hover .price:hover{
opacity:1;filter:none;
transform:translateY(-12px);
box-shadow:0 38px 70px -28px rgba(10,37,64,.5);
z-index:2;
}
.ppx .price h3{font-size:18px;color:rgba(255,255,255,.65);font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:color .4s ease}
.ppx .price .num{font-size:48px;font-weight:800;color:#fff;letter-spacing:-0.04em;margin:14px 0 4px;line-height:1;transition:color .4s ease}
.ppx .price .num small{font-size:16px;color:rgba(255,255,255,.6);font-weight:500;transition:color .4s ease}
.ppx .price .desc{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:24px;min-height:42px;transition:color .4s ease}
.ppx .price .feats{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.ppx .price .feats li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;color:rgba(255,255,255,.92);transition:color .4s ease}
.ppx .price .feats li::before{
content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
background:var(--green) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.ppx .price.popular{
transform:translateY(-12px);
box-shadow:0 40px 80px -30px rgba(10,37,64,.5);
}
.ppx .pop-badge{
position:absolute;top:-14px;right:24px;
background:var(--green);color:#04221a;
padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
}
.ppx .price .btn{justify-content:center;width:100%;margin-top:auto}
.ppx .price .btn-dark{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
.ppx .price .btn-dark:hover{background:rgba(255,255,255,.2)}
.ppx .faq{background:#fff}
.ppx .faq-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:flex-start}
.ppx .acc{display:grid;gap:8px}
.ppx details.q{
border:1px solid var(--line);border-radius:12px;padding:18px 22px;background:#fff;transition:border-color .15s;
}
.ppx details.q[open]{border-color:#c7d3e0;box-shadow:0 12px 30px -20px rgba(10,37,64,.15)}
.ppx details.q summary{
cursor:pointer;list-style:none;font-weight:600;color:var(--navy);font-size:16px;
display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.ppx details.q summary::-webkit-details-marker{display:none}
.ppx details.q summary::after{
content:"+";font-size:22px;font-weight:400;color:var(--muted);transition:transform .15s;line-height:1;
}
.ppx details.q[open] summary::after{content:"−"}
.ppx details.q .a{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:12px}
.ppx .load-more{
margin-top:16px;background:var(--light);border:1px dashed var(--line);
border-radius:12px;padding:14px;text-align:center;color:var(--navy);font-weight:600;font-size:14px;cursor:pointer;
}
.ppx .glossary{
background:linear-gradient(170deg,#0A2540,#103964);color:#fff;
border-radius:18px;padding:30px;position:sticky;top:24px;
}
.ppx .glossary h3{color:#fff;display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:6px}
.ppx .glossary .sub{color:rgba(255,255,255,.55);font-size:13px;margin-bottom:20px}
.ppx .gloss-list{display:grid;gap:1px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden}
.ppx .gloss-list .item{background:rgba(255,255,255,.02);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px}
.ppx .gloss-list .item:hover{background:rgba(255,255,255,.06)}
.ppx .gloss-list .term{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:600;font-size:12.5px}
.ppx .gloss-list .def{color:rgba(255,255,255,.55);font-size:12.5px;text-align:right}
.ppx .glossary .more{
margin-top:16px;display:flex;justify-content:space-between;align-items:center;
padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;
font-size:13px;color:rgba(255,255,255,.8);cursor:pointer;
}
.ppx .glossary .more b{color:var(--green)}
.ppx .eu-banner{
background:linear-gradient(110deg,#003399 0%, #0052CC 100%);
color:#fff;padding:80px 0;position:relative;overflow:hidden;
}
.ppx .eu-banner .container{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.ppx .eu-banner h2{color:#fff;font-size:38px;letter-spacing:-0.025em}
.ppx .eu-banner p{color:rgba(255,255,255,.78);font-size:17px;margin-top:14px;margin-bottom:22px}
.ppx .eu-feat{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:14.5px}
.ppx .eu-feat span{display:flex;align-items:center;gap:8px}
.ppx .eu-feat span::before{
content:"";width:18px;height:18px;border-radius:50%;background:var(--eu-gold) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.ppx .eu-stars{
position:absolute;right:-80px;top:50%;transform:translateY(-50%);
width:520px;height:520px;display:grid;place-items:center;opacity:.5;pointer-events:none;
}
.ppx .eu-stars .ring{
position:absolute;width:380px;height:380px;border-radius:50%;
display:grid;place-items:center;
}
.ppx .eu-stars .star{
position:absolute;color:var(--eu-gold);font-size:24px;
}
.ppx .eu-banner-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px;position:relative;z-index:3}
.ppx footer{background:#0A2540;color:rgba(255,255,255,.7);padding:80px 0 30px}
.ppx .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:48px}
.ppx .foot-col h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.ppx .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:14px}
.ppx .foot-col li a{color:rgba(255,255,255,.6);transition:color .15s}
.ppx .foot-col li a:hover{color:#fff}
.ppx .tagline{font-size:14px;color:rgba(255,255,255,.6);margin:14px 0 22px;max-width:280px;line-height:1.55}
.ppx .socials{display:flex;gap:10px}
.ppx .socials a{
width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);
display:grid;place-items:center;font-size:14px;color:rgba(255,255,255,.7);
border:1px solid rgba(255,255,255,.06);
}
.ppx .socials a:hover{background:rgba(255,255,255,.1);color:#fff}
.ppx .lang{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:14px;cursor:pointer;
}
.ppx .foot-bottom{
border-top:1px solid rgba(255,255,255,.08);padding-top:28px;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.45);
}
.ppx .foot-bottom .links{display:flex;gap:24px}
.ppx .foot-bottom .links a:hover{color:#fff}
.ppx .country-list{display:grid;gap:9px}
.ppx .country-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.65)}
.ppx .country-list .badge-mini{
margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;
padding:2px 6px;border-radius:4px;
}
.ppx .badge-mini.live{background:rgba(0,196,140,.18);color:#7df1c4}
.ppx .badge-mini.soon{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.ppx .loc-banner{
position:fixed;top:0;left:0;right:0;z-index:60;
height:32px;display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:600;letter-spacing:.02em;
background:linear-gradient(90deg,rgba(0,196,140,.95),rgba(0,196,140,.85));color:#04221a;
transition:transform .3s;transform:translateY(-100%);
}
.ppx .loc-banner.amber{background:linear-gradient(90deg,#FFB547,#FFD27A);color:#3a2200}
.ppx .loc-banner.show{transform:translateY(0)}
.ppx .loc-banner a{margin-left:10px;color:inherit;text-decoration:underline;font-weight:700}
.ppx body.loc-shifted .top{top:32px}
.ppx .top{transition:top .3s}
.ppx .nav-switcher{
position:relative;display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
padding:8px 14px;border-radius:999px;color:#fff;cursor:pointer;
font-size:13.5px;font-weight:600;transition:border-color .15s, background .15s;
margin-right:18px;
}
.ppx .nav-switcher:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.ppx .nav-switcher .globe{width:16px;height:16px;display:grid;place-items:center;font-size:14px}
.ppx .nav-switcher .chev{font-size:9px;opacity:.6;margin-left:2px}
.ppx .nav-switcher .flag{font-size:15px;line-height:1}
.ppx .switcher-panel{
position:absolute;top:calc(100% + 12px);left:0;width:380px;max-height:520px;
background:#0A2540;border:1px solid rgba(255,255,255,.1);border-radius:14px;
box-shadow:0 30px 80px -20px rgba(0,0,0,.5);padding:14px;
display:none;z-index:80;color:#fff;
}
.ppx .switcher-panel.open{display:flex;flex-direction:column;gap:10px}
.ppx .sw-search{
display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 12px;
}
.ppx .sw-search input{background:none;border:0;outline:0;color:#fff;font-size:13.5px;flex:1;font-family:inherit}
.ppx .sw-search input::placeholder{color:rgba(255,255,255,.4)}
.ppx .sw-locate{
display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--green-2);
padding:8px 4px;cursor:pointer;font-weight:600;
}
.ppx .sw-locate:hover{color:#fff}
.ppx .sw-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;margin:-4px}
.ppx .sw-list::-webkit-scrollbar{width:6px}
.ppx .sw-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.ppx .sw-grp{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:10px 8px 4px;font-weight:700}
.ppx .sw-row{
display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
transition:background .12s;font-size:13.5px;
}
.ppx .sw-row:hover{background:rgba(255,255,255,.06)}
.ppx .sw-row.active{background:rgba(0,196,140,.1)}
.ppx .sw-row .flag{font-size:18px;line-height:1}
.ppx .sw-row .nm{flex:1;color:#fff;font-weight:500}
.ppx .sw-row .chk{color:var(--green-2);font-size:14px;display:none}
.ppx .sw-row.active .chk{display:inline}
.ppx .sw-row.bd .nm::after{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--green);margin-left:8px;animation:pulse 1.6s infinite;vertical-align:middle;
}
.ppx .sw-pill{
font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:3px 7px;border-radius:5px;
text-transform:uppercase;
}
.ppx .sw-pill.live{background:rgba(0,196,140,.18);color:var(--green-2)}
.ppx .sw-pill.q26{background:rgba(255,107,53,.16);color:#FF8E5C}
.ppx .sw-pill.q27{background:rgba(255,181,71,.16);color:#FFB547}
.ppx .sw-pill.road{background:rgba(130,71,229,.16);color:var(--chain-2)}
.ppx .worldmap-sub{margin-top:54px;padding-top:42px;border-top:1px solid var(--line)}
.ppx .worldmap-head{text-align:center;margin-bottom:24px}
.ppx .worldmap-head .kicker{justify-content:center;display:inline-flex;color:var(--chain);background:rgba(130,71,229,.08);border-color:rgba(130,71,229,.2)}
.ppx .worldmap-head h3{font-size:32px;color:var(--navy);letter-spacing:-0.025em;margin-top:10px}
.ppx .worldmap-head .sub{font-size:15px;color:var(--muted);margin-top:8px}
.ppx .worldmap-wrap{
position:relative;background:#0A2540;border-radius:18px;overflow:hidden;
border:1px solid rgba(255,255,255,.06);
}
.ppx .worldmap-wrap svg{display:block;width:100%;height:auto}
.ppx .wm-dot{cursor:pointer;transition:filter .15s, r .15s}
.ppx .wm-dot:hover{filter:brightness(1.4) drop-shadow(0 0 8px currentColor)}
.ppx .wm-pulse{transform-origin:center;transform-box:fill-box;animation:wmpulse 2s infinite}
@keyframes wmpulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(3.2);opacity:0}100%{transform:scale(1);opacity:0}}
.ppx .wm-legend{
position:absolute;top:18px;right:18px;background:rgba(10,37,64,.85);
backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);
border-radius:10px;padding:12px 14px;font-size:11.5px;color:#fff;
display:flex;flex-direction:column;gap:6px;min-width:170px;
}
.ppx .wm-legend .row{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.78)}
.ppx .wm-legend .row .d{width:10px;height:10px;border-radius:50%}
.ppx .wm-zoom{
position:absolute;left:18px;top:18px;display:flex;flex-direction:column;
background:rgba(10,37,64,.85);border:1px solid rgba(255,255,255,.08);border-radius:999px;overflow:hidden;
}
.ppx .wm-zoom button{
background:none;border:0;color:#fff;width:32px;height:32px;font-size:16px;cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.06);
}
.ppx .wm-zoom button:last-child{border-bottom:0}
.ppx .wm-zoom button:hover{background:rgba(255,255,255,.08)}
.ppx .wm-tooltip{
position:fixed;z-index:90;background:#fff;color:var(--navy);
border-radius:10px;padding:12px 14px;min-width:200px;font-size:13px;
box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s, transform .12s;
}
.ppx .wm-tooltip.show{opacity:1;transform:translateY(0)}
.ppx .wm-tooltip .t-flag{font-size:22px;float:left;margin-right:10px}
.ppx .wm-tooltip .t-name{font-weight:700;font-size:14px;letter-spacing:-0.01em}
.ppx .wm-tooltip .t-meta{color:var(--muted);font-size:11.5px;margin-top:1px}
.ppx .wm-tooltip .t-cta{color:var(--green-2);font-weight:700;font-size:11px;margin-top:6px;text-transform:uppercase;letter-spacing:.08em}
.ppx .wm-counter{
display:flex;justify-content:center;gap:0;margin-top:24px;padding:16px;
background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:600;
flex-wrap:wrap;
}
.ppx .wm-counter .seg{padding:0 20px;color:var(--muted);position:relative}
.ppx .wm-counter .seg b{font-weight:700;margin-right:6px;font-family:'JetBrains Mono',monospace}
.ppx .wm-counter .seg.live b{color:var(--green-2)}
.ppx .wm-counter .seg.q b{color:var(--orange)}
.ppx .wm-counter .seg.road b{color:var(--chain)}
.ppx .wm-counter .seg.total b{color:var(--navy)}
.ppx .wm-counter .seg.fac b{color:var(--navy)}
.ppx .wm-counter .seg + .seg::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.ppx .country-highlight{animation:hlpulse 1.5s ease-out}
@keyframes hlpulse{0%{box-shadow:0 0 0 0 rgba(0,196,140,.6)}100%{box-shadow:0 0 0 18px rgba(0,196,140,0)}}
.ppx .buyer-filter{background:var(--light);padding:100px 0}
.ppx .buyer-card{
background:linear-gradient(135deg,#0A2540,#103964);color:#fff;
border-radius:20px;padding:42px;display:grid;grid-template-columns:1fr 2fr;gap:42px;
box-shadow:0 30px 80px -30px rgba(10,37,64,.4);
}
.ppx .bf-left h3{color:#fff;font-size:22px;letter-spacing:-0.02em;margin-bottom:6px}
.ppx .bf-left .lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin-bottom:8px}
.ppx .bf-used{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:14px}
.ppx .bf-avatars{display:flex}
.ppx .bf-avatars span{
width:24px;height:24px;border-radius:50%;border:2px solid #0A2540;
background:linear-gradient(135deg,#FF8E5C,#FFB547);margin-left:-7px;
display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;
}
.ppx .bf-avatars span:first-child{margin-left:0;background:linear-gradient(135deg,#00C48C,#7df1c4)}
.ppx .bf-avatars span:nth-child(2){background:linear-gradient(135deg,#8247E5,#a37cf0)}
.ppx .bf-avatars span:nth-child(3){background:linear-gradient(135deg,#FFB547,#FFD27A)}
.ppx .bf-avatars span:nth-child(4){background:linear-gradient(135deg,#0052CC,#3578E5)}
.ppx .bf-select{
width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
border-radius:12px;padding:16px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;font-family:inherit;
}
.ppx .bf-select:hover{border-color:rgba(255,255,255,.3)}
.ppx .bf-select .arrow{opacity:.6;font-size:11px}
.ppx .bf-select-wrap{position:relative}
.ppx .bf-select-panel{
position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:300px;overflow-y:auto;
background:#0D1B2A;border:1px solid rgba(255,255,255,.12);border-radius:12px;
z-index:50;display:none;padding:6px;
}
.ppx .bf-select-panel.open{display:block}
.ppx .bf-select-panel .opt{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;
}
.ppx .bf-select-panel .opt:hover{background:rgba(255,255,255,.06)}
.ppx .bf-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ppx .bf-quick .qlbl{font-size:11.5px;color:rgba(255,255,255,.45);align-self:center;margin-right:4px}
.ppx .bf-chip{
display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
font-size:12.5px;color:#fff;cursor:pointer;transition:background .12s;
}
.ppx .bf-chip:hover{background:rgba(255,255,255,.12)}
.ppx .bf-chip.active{background:rgba(0,196,140,.15);border-color:rgba(0,196,140,.45);color:var(--green-2)}
.ppx .bf-right{display:flex;flex-direction:column;gap:20px}
.ppx .bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ppx .bf-mini{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;
transition:transform .15s, border-color .15s;
}
.ppx .bf-mini:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.ppx .bf-mini .mlbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.ppx .bf-mini .mbig{font-size:28px;font-weight:800;letter-spacing:-0.025em;color:#fff;line-height:1.1}
.ppx .bf-mini .msub{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.4}
.ppx .bf-mini.timeline .mbig{color:var(--green-2);font-size:20px}
.ppx .bf-mini.lead .mbig{color:var(--orange)}
.ppx .bf-mini.coverage .mbig{color:var(--green-2)}
.ppx .bf-mini.sample{padding:14px}
.ppx .bf-mini.sample .thumb{
background:linear-gradient(135deg,#103964,#1e4a7a);height:80px;border-radius:8px;
display:grid;place-items:center;font-size:30px;border:1px solid rgba(255,255,255,.06);
}
.ppx .bf-hooks{
display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;
}
.ppx .bf-hook{
font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:5px;
background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.06);
transition:all .15s;
}
.ppx .bf-hook.active{background:rgba(0,196,140,.15);color:var(--green-2);border-color:rgba(0,196,140,.4)}
.ppx .bf-actions{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.ppx .bf-actions .btn{flex:1;min-width:200px;justify-content:center}
@media (max-width:980px){.ppx .buyer-card{grid-template-columns:1fr;padding:28px}
.ppx .nav-switcher{display:none}
.ppx .wm-counter{flex-direction:column;gap:8px}
.ppx .wm-counter .seg + .seg::before{display:none}}
@media (max-width:980px){.ppx h1{font-size:38px}
.ppx h2{font-size:32px}
.ppx .hero-grid,.ppx .threeside-panel,.ppx .faq-grid,.ppx .featured,.ppx .eu-banner .container,.ppx .foot-grid{grid-template-columns:1fr}
.ppx .why-grid,.ppx .gf-grid,.ppx .country-row,.ppx .price-grid,.ppx .tier2-grid{grid-template-columns:1fr 1fr}
.ppx .nav-links{display:none}
.ppx .passport{transform:none;width:100%;max-width:420px}}
.ppx .stamp-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:6px 8px;
padding:10px 8px 4px;
position:relative;
z-index:2;
}
.ppx .stamp-grid.back-grid{
grid-template-columns:repeat(3, 1fr);
gap:8px;
padding:6px 14px 4px;
}
.ppx .back-featured-wrap{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:6px 14px 0;
position:relative;
}
.ppx .back-featured-line{
flex:1;
height:1px;
background:repeating-linear-gradient(90deg,
#7a5a2a 0 5px, transparent 5px 9px);
opacity:.4;
}
.ppx .back-featured-wrap .cstamp{
width:90px;
flex:none;
aspect-ratio:1 / 0.92;
border-width:2px;
opacity:.95;
}
.ppx .back-featured-wrap .cstamp.s-hex{ outline-width:2px; }
.ppx .back-featured-wrap .cstamp .cs-org{ font-size:7px; }
.ppx .back-featured-wrap .cstamp .cs-main{ font-size:10px; }
.ppx .back-featured-wrap .cstamp .cs-sub{ font-size:6px; }
.ppx .cstamp{
position:relative;
aspect-ratio:1 / 0.95;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:4px 2px;
font-family:'JetBrains Mono',monospace;
color:#3a2410;
background:transparent;
text-align:center;
border:1.5px solid currentColor;
transform:rotate(var(--rot,0deg));
opacity:.88;
transition:transform .2s ease, opacity .2s ease;
}
.ppx .cstamp:hover{ opacity:1; transform:rotate(0deg) scale(1.06); z-index:5; }
.ppx .cstamp.s-round{ border-radius:50%; }
.ppx .cstamp.s-hex{
border:none;
clip-path:polygon(25% 5%, 75% 5%, 98% 50%, 75% 95%, 25% 95%, 2% 50%);
background:rgba(255,255,255,.06);
outline:1.5px solid currentColor;
outline-offset:-2px;
}
.ppx .cstamp.s-shield{
border:none;
clip-path:polygon(50% 0%, 100% 15%, 100% 60%, 50% 100%, 0% 60%, 0% 15%);
background:rgba(255,255,255,.06);
outline:1.5px solid currentColor;
outline-offset:-3px;
}
.ppx .cstamp.s-square{ border-radius:3px; }
.ppx .cstamp.c-eu{ color:#1a3a8f; }
.ppx .cstamp.c-red{ color:#8b2828; }
.ppx .cstamp.c-green{ color:#1a6b4e; }
.ppx .cstamp.c-navy{ color:#1f2d4d; }
.ppx .cstamp.c-gold{ color:#8a6914; }
.ppx .cstamp.c-purple{ color:#4a2876; }
.ppx .cstamp .cs-org{
font-size:6.5px; font-weight:800; letter-spacing:1px;
line-height:1; margin-bottom:2px; opacity:.75;
}
.ppx .cstamp .cs-main{
font-size:8.5px; font-weight:900; letter-spacing:.3px;
line-height:1.05;
}
.ppx .cstamp .cs-sub{
font-size:5.5px; font-weight:600; letter-spacing:.6px;
line-height:1.1; margin-top:2px; opacity:.7;
font-family:'Inter',sans-serif;
}
.ppx .cstamp .cs-date{
font-size:5px; font-weight:700; letter-spacing:1px;
margin-top:3px; opacity:.6;
padding-top:2px; border-top:1px solid currentColor;
width:55%;
}
.ppx .back-grid .cstamp{ aspect-ratio:1; padding:4px 2px; }
.ppx .back-grid .cstamp .cs-main{ font-size:9px; line-height:1.1; }
.ppx .back-grid .cstamp .cs-org{ font-size:6.5px; letter-spacing:1px; }
.ppx .back-grid .cstamp .cs-sub{ font-size:5.5px; }
.ppx .cstamp::after{
content:"";
position:absolute; inset:0;
background:
radial-gradient(circle at 30% 40%, transparent 60%, rgba(245,233,208,.5) 70%, transparent 80%),
radial-gradient(circle at 70% 60%, transparent 50%, rgba(245,233,208,.4) 65%);
pointer-events:none;
mix-blend-mode:overlay;
opacity:.6;
}
.ppx .trust-strip-wrap{
margin:4px 8px 4px;
position:relative;
z-index:2;
}
.ppx .trust-strip-divider{
display:flex;
align-items:center;
gap:8px;
font-family:'JetBrains Mono',monospace;
font-size:8px;
font-weight:800;
letter-spacing:2px;
color:#5a3e1a;
opacity:.75;
margin:4px 0 6px;
white-space:nowrap;
}
.ppx .trust-strip-divider::before,.ppx .trust-strip-divider::after{
content:"";
flex:1;
height:1px;
background:repeating-linear-gradient(90deg,
#7a5a2a 0 6px, transparent 6px 10px);
opacity:.5;
}
.ppx .trust-strip{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
}
.ppx .cstamp.featured{
aspect-ratio:1 / 0.88;
opacity:.95;
border-width:2px;
}
.ppx .cstamp.featured.s-hex{ outline-width:2px; }
.ppx .cstamp.featured.s-shield{ outline-width:2px; }
.ppx .cstamp.featured .cs-org{ font-size:7.5px; opacity:.85; }
.ppx .cstamp.featured .cs-main{ font-size:10px; letter-spacing:.3px; }
.ppx .cstamp.featured .cs-sub{ font-size:6.2px; opacity:.8; }
.ppx .cstamp.featured.s-round::after{
background:
radial-gradient(circle at 30% 40%, transparent 60%, rgba(245,233,208,.5) 70%, transparent 80%),
radial-gradient(circle at 70% 60%, transparent 50%, rgba(245,233,208,.4) 65%);
}
.ppx .cstamp.featured.s-round{
position:relative;
}
.ppx .cstamp.featured.s-round > .cs-org,.ppx .cstamp.featured.s-round > .cs-main,.ppx .cstamp.featured.s-round > .cs-sub{
position:relative; z-index:2;
}
.ppx .stamps-more-hint{
position:absolute;
bottom:10px; right:18px;
font-family:'JetBrains Mono',monospace;
font-size:8px; font-weight:700; letter-spacing:1.5px;
color:#7a5a2a; opacity:.7;
display:flex; align-items:center; gap:4px;
z-index:3;
}
.ppx .stamps-more-hint::after{ content:"›"; font-size:14px; line-height:.5; }
.ppx .data-back .endorse-title{
font-family:'Inter',sans-serif;
font-size:9px; font-weight:800; letter-spacing:1.8px;
color:#5a3e1a; text-align:center;
margin:8px 0 4px; opacity:.7;
}
.ppx .cover-back .std-row,.ppx .cover-back .espr-stamp{ display:none !important; }
.ppx .cover-back{
gap:6px !important;
padding:14px 14px 12px !important;
overflow:hidden;
}
.ppx .cover-back .hero-seal-wrap{
grid-template-columns:78px 1fr !important;
gap:8px !important;
margin:0 !important;
transform:none !important;
}
.ppx .cover-back .seal-hero{
width:78px !important; height:78px !important;
}
.ppx .cover-back .seal-side-title{
font-size:8px !important;
}
.ppx .cover-back .seal-side .meta{
font-size:8.5px !important;
gap:2px !important;
}
.ppx .cover-back .seal-side .meta > div{
gap:6px !important;
}
.ppx .cover-back .seal-side .meta .k{
font-size:7.5px !important;
}
.ppx .cover-back .pa-header{
padding-bottom:5px !important;
}
.ppx .cover-back .pa-header .pa-title{
font-size:10.5px !important;
}
.ppx .cover-back .pa-header .pa-id{
font-size:9px !important;
}
.ppx .stamps-more-hint{
font-family:'JetBrains Mono',monospace;
font-size:8px; font-weight:700; letter-spacing:1.5px;
color:#7a5a2a; opacity:.7;
display:flex; align-items:center; justify-content:flex-end;
gap:4px;
margin-top:auto;
padding-top:2px;
z-index:3;
position:relative;
}
.ppx .stamps-more-hint::after{ content:"›"; font-size:13px; line-height:.5; }
.ppx .data-back .endorse-title{
font-size:13px !important; letter-spacing:2.4px !important;
margin:4px 0 8px !important;
}
.ppx .data-back .cstamp .cs-org{
font-size:9.5px !important; letter-spacing:1.2px !important;
margin-bottom:3px !important; opacity:.85 !important;
}
.ppx .data-back .cstamp .cs-main{
font-size:13px !important; letter-spacing:.4px !important;
line-height:1.1 !important;
}
.ppx .data-back .cstamp .cs-sub{
font-size:8.5px !important; letter-spacing:.8px !important;
margin-top:3px !important; opacity:.82 !important;
}
.ppx .data-back .cstamp .cs-date{
font-size:8px !important; letter-spacing:1.2px !important;
margin-top:4px !important; opacity:.75 !important;
}
.ppx .data-back .cstamp.featured .cs-org{ font-size:11px !important; }
.ppx .data-back .cstamp.featured .cs-main{ font-size:14.5px !important; }
.ppx .data-back .cstamp.featured .cs-sub{ font-size:9.5px !important; }
.ppx .data-back .trust-strip-divider{
font-size:11px !important; letter-spacing:2.4px !important;
}
.ppx .data-back .stamps-more-hint{
font-size:11px !important; letter-spacing:1.8px !important;
opacity:.85 !important;
}
@media (max-height:800px) and (min-width:781px){.ppx .hero{
padding:85px 0 40px !important;
min-height:100vh;
}
.ppx .hero h1{
font-size:42px !important;
margin:14px 0 12px !important;
}
.ppx .hero .sub{
font-size:16px !important;
margin-bottom:20px !important;
}
.ppx .cta-row{
margin-bottom:18px !important;
}
.ppx .trust{
font-size:12.5px !important;
gap:10px 18px !important;
}}
@media (max-height:700px) and (min-width:781px){.ppx .hero{
padding:75px 0 30px !important;
}
.ppx .hero h1{
font-size:38px !important;
}}
@media (max-width:780px){.ppx .hero{
padding:80px 0 40px !important;
min-height:auto !important;
}
.ppx .hero h1{
font-size:34px !important;
margin:12px 0 10px !important;
}
.ppx .hero .sub{
font-size:15px !important;
margin-bottom:18px !important;
}
.ppx .cta-row{
flex-direction:column;
gap:10px;
margin-bottom:18px !important;
}
.ppx .cta-row .btn{
width:100%;
justify-content:center;
}
.ppx .trust{
font-size:11.5px !important;
gap:8px 14px !important;
}
.ppx .passport-wrap{
min-height:380px !important;
overflow:visible;
}
.ppx .passport-book{
width:260px !important; height:380px !important;
perspective:2400px !important;
}
.ppx .passport-book.open{
width:520px !important;
transform:scale(.62) !important;
transform-origin:center center !important;
}
.ppx .passport-book::before{
width:260px !important;
}
.ppx .passport-book::after{
width:244px !important;
}
.ppx .passport-cover,.ppx .passport-flipper{
width:260px !important;
}
.ppx .cover-back{
padding:10px 10px 8px !important;
gap:4px !important;
}
.ppx .cover-back .seal-hero{
width:58px !important; height:58px !important;
}
.ppx .cover-back .hero-seal-wrap{
grid-template-columns:58px 1fr !important;
gap:6px !important;
}
.ppx .cover-back .pa-header .pa-title{
font-size:9.5px !important;
}
.ppx .cover-back .pa-header .pa-id{
font-size:8px !important;
}
.ppx .cover-back .seal-side-title{
font-size:7.5px !important;
}
.ppx .cover-back .seal-side .meta{
font-size:7.5px !important;
}
.ppx .cover-back .seal-side .meta .k{
font-size:6.5px !important;
}
.ppx .stamp-grid{
gap:4px 5px !important;
padding:4px 2px 2px !important;
}
.ppx .stamp-grid.back-grid{
gap:5px !important;
padding:5px 8px 4px !important;
}
.ppx .back-grid .cstamp .cs-org{ font-size:5px !important; }
.ppx .back-grid .cstamp .cs-main{ font-size:7px !important; }
.ppx .back-grid .cstamp .cs-sub{ font-size:4.5px !important; }
.ppx .back-featured-wrap{ margin:5px 8px 0 !important; }
.ppx .back-featured-wrap .cstamp{ width:74px !important; }
.ppx .back-featured-wrap .cstamp .cs-org{ font-size:5.5px !important; }
.ppx .back-featured-wrap .cstamp .cs-main{ font-size:8px !important; }
.ppx .back-featured-wrap .cstamp .cs-sub{ font-size:5px !important; }
.ppx .cstamp .cs-org{ font-size:5px !important; letter-spacing:.8px !important; }
.ppx .cstamp .cs-main{ font-size:7px !important; }
.ppx .cstamp .cs-sub{ font-size:4.5px !important; }
.ppx .cstamp .cs-date{ font-size:4px !important; }
.ppx .cstamp.featured .cs-org{ font-size:6px !important; }
.ppx .cstamp.featured .cs-main{ font-size:8px !important; }
.ppx .cstamp.featured .cs-sub{ font-size:5px !important; }
.ppx .trust-strip-wrap{ margin:2px 4px 2px !important; }
.ppx .trust-strip-divider{
font-size:6.5px !important;
letter-spacing:1.5px !important;
margin:2px 0 3px !important;
}
.ppx .trust-strip{ gap:4px !important; }
.ppx .stamps-more-hint{
font-size:6.5px !important;
padding-top:1px !important;
}
.ppx .passport-book .passport{
font-size:10px !important;
}}
@media (max-width:400px){.ppx .passport-wrap{
min-height:360px !important;
}
.ppx .passport-book{
width:240px !important; height:360px !important;
}
.ppx .passport-book.open{
width:480px !important;
transform:scale(.58) !important;
transform-origin:center center !important;
}
.ppx .passport-book::before{ width:240px !important; }
.ppx .passport-book::after{ width:224px !important; }
.ppx .passport-cover,.ppx .passport-flipper{ width:240px !important; }
.ppx .cstamp .cs-main{ font-size:6.5px !important; }
.ppx .cstamp.featured .cs-main{ font-size:7.5px !important; }}
/* ══ Compact timeline section — fit content within one viewport (100vh) ══ */
/* ===== #timeline fits exactly one screen (100dvh) ===== */
.ppx .timeline-sec{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100dvh;height:100dvh;overflow:hidden;padding:clamp(6px,1.4dvh,14px) 0}
.ppx .timeline-sec .container{width:100%;zoom:1}
.ppx .timeline-sec .tl-espr-head{margin-top:0;margin-bottom:clamp(1px,.6dvh,5px)}
.ppx .timeline-sec .tl-espr-title{margin:0 0 clamp(2px,.6dvh,5px);font-size:clamp(22px,3vw,36px)}
.ppx .timeline-sec .tl-espr-sub{font-size:clamp(12px,1.6vw,14px)}
.ppx .timeline-sec .timeline{margin-top:clamp(2px,1dvh,6px);padding:clamp(6px,1.4dvh,16px) 30px clamp(2px,.8dvh,6px)}
.ppx .timeline-sec .tl-line{top:62px}
.ppx .timeline-sec .tl-zoom{margin:clamp(2px,.6dvh,4px) 2% clamp(6px,1.6dvh,16px)}
.ppx .timeline-sec .timeline[data-range] .tl-zoom{height:clamp(270px,50dvh,480px)}
.ppx .timeline-sec .tlz-frame{height:clamp(270px,50dvh,480px);zoom:.95}
.ppx .timeline-sec .tl-year{font-size:clamp(18px,2.2vw,23px);margin-top:clamp(4px,1dvh,10px)}
.ppx .timeline-sec .tl-node-more .tl-year{font-size:clamp(15px,1.8vw,18px)}
.ppx .timeline-sec .tl-label{font-size:clamp(11px,1.4vw,13px);line-height:1.3}
.ppx .timeline-sec .tl-status{margin-top:clamp(3px,.8dvh,6px);font-size:clamp(10px,1.2vw,11px);padding:3px 9px}
.ppx .timeline-sec .tlz-now-stem{height:clamp(64px,13dvh,88px)}
.ppx .timeline-sec .tlz-flag-stem{height:clamp(46px,8dvh,66px)}
@media (max-height:680px){
.ppx .timeline-sec .tlz-y{font-size:56px}
}