
/* PFCONNECT Overview v1.2 */
.v12-hero{position:relative;overflow:hidden;min-height:760px;display:flex;align-items:center;padding:100px 0 90px;background:#06101f}
.v12-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(88,150,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(88,150,255,.15) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(to bottom,#000,transparent)}
.v12-glow{position:absolute;border-radius:50%;filter:blur(80px)}
.v12-glow-a{width:520px;height:520px;background:rgba(0,149,255,.18);left:-180px;top:-130px}
.v12-glow-b{width:520px;height:520px;background:rgba(111,69,255,.16);right:-170px;bottom:-160px}
.v12-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.v12-hero h1{font-size:clamp(54px,6.2vw,88px);line-height:1.02;letter-spacing:-.05em;margin:22px 0}
.v12-hero h1 strong{background:linear-gradient(90deg,#71dcff,#6b8cff,#9b72ff);-webkit-background-clip:text;color:transparent}
.v12-hero p{font-size:20px;color:#9eb1cb;max-width:670px}
.v12-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.v12-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.v12-tags span{font-size:11px;padding:7px 10px;border:1px solid rgba(111,158,226,.22);border-radius:999px;color:#9db4d0;background:rgba(255,255,255,.025)}
.v12-product-stage{position:relative;min-height:520px;display:grid;place-items:center}
.v12-product-stage img{position:relative;z-index:4;width:min(560px,92%);filter:drop-shadow(0 45px 45px rgba(0,0,0,.5));animation:v12float 4.8s ease-in-out infinite}
.v12-world{position:absolute;width:510px;height:510px;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(49,143,255,.26),rgba(39,77,255,.10) 42%,transparent 68%);box-shadow:0 0 100px rgba(26,112,255,.26)}
.v12-world:before,.v12-world:after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(73,168,255,.25)}
.v12-world:after{inset:20%;border-style:dashed;animation:v12spin 12s linear infinite}
.v12-orbit{position:absolute;border-radius:50%;border:1px solid rgba(92,155,255,.35);transform:rotateX(72deg);box-shadow:0 0 25px rgba(33,139,255,.25)}
.orbit-one{width:620px;height:260px;animation:v12orbit 8s linear infinite}
.orbit-two{width:510px;height:210px;animation:v12orbit 6s linear infinite reverse}
.v12-product-badge{position:absolute;z-index:5;bottom:42px;padding:8px 13px;border:1px solid rgba(64,168,255,.45);border-radius:999px;background:rgba(5,18,37,.78);color:#88d5ff;font-size:11px;letter-spacing:.14em}
@keyframes v12float{50%{transform:translateY(-14px)}}@keyframes v12spin{to{transform:rotate(360deg)}}@keyframes v12orbit{to{transform:rotateX(72deg) rotateZ(360deg)}}
.v12-showcase{padding:50px 0 20px;background:#06101f}
.v12-showcase-card{position:relative;border:1px solid rgba(92,148,219,.2);border-radius:24px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.38)}
.v12-showcase-card img{display:block;width:100%}
.v12-expand{position:absolute;right:18px;bottom:18px;padding:10px 16px;border-radius:12px;background:rgba(5,18,37,.88);border:1px solid rgba(73,153,255,.4);font-size:12px}
.v12-topology-section{background:linear-gradient(180deg,#071321,#07101d)}
.v12-network{position:relative;max-width:1180px;min-height:690px;margin:0 auto;border:1px solid rgba(72,139,218,.22);border-radius:30px;background:radial-gradient(circle at 50% 50%,rgba(50,96,255,.10),transparent 30%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#071422;background-size:auto,54px 54px,54px 54px,auto;overflow:hidden}
.v12-links{position:absolute;inset:0;width:100%;height:100%}
.v12-links path{stroke:url(#v12line);stroke-width:2.2;stroke-dasharray:10 12;fill:none;filter:url(#v12glow);animation:v12dash 8s linear infinite}
@keyframes v12dash{to{stroke-dashoffset:-180}}
.v12-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 25%,#46caff,#367bff 48%,#6749ee 100%);box-shadow:0 0 40px rgba(51,128,255,.65),0 0 120px rgba(56,86,255,.26);z-index:5}
.v12-core-logo{font:800 38px/1 Inter,sans-serif}
.v12-core strong{font-size:14px}.v12-core small{font-size:10px;color:#d7e8ff}
.v12-core-ring{position:absolute;border-radius:50%;border:1px solid rgba(79,155,255,.36);animation:v12pulse 3s ease-out infinite}
.v12-core-ring.r1{inset:-18px}.v12-core-ring.r2{inset:-42px;animation-delay:1s}.v12-core-ring.r3{inset:-68px;animation-delay:2s}
@keyframes v12pulse{0%{transform:scale(.88);opacity:.85}100%{transform:scale(1.13);opacity:0}}
.v12-site,.v12-remote{position:absolute;z-index:4;width:215px;min-height:132px;padding:20px;border:1px solid rgba(52,213,170,.38);border-radius:18px;background:linear-gradient(145deg,rgba(7,29,43,.96),rgba(7,20,36,.96));box-shadow:0 14px 36px rgba(0,0,0,.28)}
.v12-site b,.v12-remote b{display:block;margin-bottom:6px}.v12-site em{display:block;color:#aed0ec;font-size:12px;font-style:normal}.v12-site small,.v12-remote small{display:block;color:#38baff;font-size:10px;margin-top:5px}.site-icons{position:absolute;right:13px;bottom:12px;font-size:20px}.site-dot{position:absolute;left:14px;top:14px;width:8px;height:8px;border-radius:50%;background:#45e5a5;box-shadow:0 0 12px #45e5a5}.v12-site b{padding-left:14px}
.site-hq{left:4%;top:5%}.site-1{left:50%;top:3%;transform:translateX(-50%)}.site-2{right:4%;top:5%}.site-3{left:4%;bottom:5%}.site-4{left:50%;bottom:3%;transform:translateX(-50%)}.site-5{right:4%;bottom:5%}
.v12-remote{left:2%;top:50%;transform:translateY(-50%);width:175px;border-color:rgba(126,92,255,.55);background:linear-gradient(145deg,rgba(36,24,83,.95),rgba(12,20,46,.96))}
.v12-remote span{display:block;color:#b8c9dd;font-size:11px;margin:8px 0}.v12-remote div{font-size:22px;margin-top:10px}
.v12-packet{position:absolute;z-index:3;width:10px;height:10px;border-radius:50%;background:#8eeaff;box-shadow:0 0 18px #31b8ff}
.p1{animation:v12p1 3.8s linear infinite}.p2{animation:v12p2 4.2s linear infinite .5s}.p3{animation:v12p3 4.6s linear infinite 1s}.p4{animation:v12p4 4s linear infinite 1.4s}.p5{animation:v12p5 4.4s linear infinite .8s}.p6{animation:v12p6 4.8s linear infinite 1.8s}
@keyframes v12p1{from{left:50%;top:50%}to{left:19%;top:18%}}@keyframes v12p2{from{left:50%;top:50%}to{left:50%;top:14%}}@keyframes v12p3{from{left:50%;top:50%}to{left:81%;top:18%}}@keyframes v12p4{from{left:50%;top:50%}to{left:19%;top:80%}}@keyframes v12p5{from{left:50%;top:50%}to{left:50%;top:84%}}@keyframes v12p6{from{left:50%;top:50%}to{left:81%;top:80%}}
.v12-architecture{background:radial-gradient(circle at 75% 40%,rgba(52,101,255,.12),transparent 35%),#06101e}
.v12-arch-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:80px;align-items:center}
.v12-arch-copy h2{font-size:clamp(42px,5vw,68px);line-height:1.08;margin:18px 0}.v12-arch-copy p{color:#9db0ca;font-size:18px}
.v12-arch-copy ol{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px}.v12-arch-copy li{display:flex;align-items:center;gap:14px}.v12-arch-copy li b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(38,111,255,.15);color:#72bdff;font:600 11px Inter}.v12-arch-copy li span{color:#d2deec}
.v12-arch-visual{padding:36px;border:1px solid rgba(82,139,206,.25);border-radius:30px;background:linear-gradient(145deg,rgba(18,36,61,.95),rgba(7,18,32,.97));box-shadow:0 30px 80px rgba(0,0,0,.32)}
.v12-control-card,.v12-runtime-card{padding:30px;text-align:center;border:1px solid rgba(69,139,255,.38);border-radius:20px;background:linear-gradient(145deg,rgba(41,83,176,.28),rgba(64,55,142,.20))}
.v12-runtime-card{border-color:rgba(108,146,197,.18);background:rgba(255,255,255,.025)}
.v12-control-card small,.v12-runtime-card small{display:block;color:#82a7de;letter-spacing:.16em;font:600 10px Inter}.v12-control-card strong,.v12-runtime-card strong{display:block;font-size:24px;margin:8px}.v12-control-card span,.v12-runtime-card span{color:#8fa6c5;font-size:13px}
.v12-energy-flow{height:86px;display:flex;align-items:center;justify-content:center;gap:10px}.v12-energy-flow i{width:7px;height:7px;border-radius:50%;background:#4c8cff;box-shadow:0 0 14px #4c8cff;animation:v12energy 1.5s ease-in-out infinite}.v12-energy-flow i:nth-child(2){animation-delay:.15s}.v12-energy-flow i:nth-child(3){animation-delay:.3s}.v12-energy-flow i:nth-child(4){animation-delay:.45s}.v12-energy-flow i:nth-child(5){animation-delay:.6s}@keyframes v12energy{50%{transform:translateY(18px);opacity:.25}}.v12-energy-flow.reverse i{animation-direction:reverse}
.v12-agent-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.v12-agent-row div{text-align:center;padding:22px 10px;border:1px solid rgba(99,144,202,.18);border-radius:16px;background:rgba(255,255,255,.02)}.v12-agent-row b{display:block}.v12-agent-row span{color:#8297b1;font-size:10px}
.v12-hardware{background:#081421}.v12-hardware-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.v12-hardware-card{padding:24px;border:1px solid rgba(90,145,210,.18);border-radius:22px;background:linear-gradient(145deg,rgba(17,35,58,.95),rgba(8,20,35,.95));transition:.3s ease}.v12-hardware-card:hover{transform:translateY(-7px);border-color:rgba(61,149,255,.42)}.v12-hardware-card img{width:100%;height:190px;object-fit:contain;margin-bottom:18px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.38))}.v12-hardware-card h3{margin:0 0 8px}.v12-hardware-card p{color:#91a6c0;margin:0;font-size:14px}
.v12-success{background:linear-gradient(180deg,#081421,#06101c)}.v12-success-card{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid rgba(79,136,206,.24);border-radius:28px;overflow:hidden;background:linear-gradient(145deg,rgba(14,34,58,.96),rgba(9,20,37,.96));box-shadow:0 30px 90px rgba(0,0,0,.32)}.v12-success-art{min-height:470px;overflow:hidden}.v12-success-art img{width:100%;height:100%;object-fit:cover}.v12-success-copy{padding:52px}.v12-success-copy h2{font-size:clamp(38px,4vw,58px);line-height:1.1;margin:16px 0}.v12-success-copy p{color:#a0b2c9}.v12-rating{display:flex;align-items:center;gap:16px;margin:25px 0}.v12-rating strong{font:800 48px Inter;background:linear-gradient(90deg,#69d6ff,#8b73ff);-webkit-background-clip:text;color:transparent}.v12-rating span{color:#ffd54f;letter-spacing:3px}.v12-success-copy blockquote{margin:22px 0 0;padding:20px;border-left:3px solid #4c93ff;background:rgba(47,109,255,.08);color:#d8e4f3;border-radius:0 14px 14px 0}
.v12-contact{padding-top:40px}.v12-contact-card{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:56px;border:1px solid rgba(80,139,255,.34);border-radius:28px;background:radial-gradient(circle at 10% 20%,rgba(41,155,255,.18),transparent 42%),linear-gradient(135deg,rgba(28,76,150,.22),rgba(76,48,151,.2))}.v12-contact-card h2{font-size:clamp(38px,4vw,58px);line-height:1.1;margin:16px 0}.v12-contact-card p{color:#9cb0ca}.v12-contact-actions{display:grid;gap:12px;min-width:260px}

@media(max-width:980px){.v12-hero-layout,.v12-arch-layout,.v12-success-card{grid-template-columns:1fr}.v12-product-stage{min-height:430px}.v12-hardware-grid{grid-template-columns:repeat(2,1fr)}.v12-network{min-height:980px}.v12-links,.v12-packet{display:none}.v12-core{top:50%;width:145px;height:145px}.v12-site,.v12-remote{position:absolute;width:210px}.site-hq{left:4%;top:4%}.site-1{right:4%;left:auto;top:4%;transform:none}.site-2{left:4%;top:25%}.site-3{right:4%;left:auto;top:25%;bottom:auto}.site-4{left:4%;bottom:5%;transform:none}.site-5{right:4%;bottom:5%}.v12-remote{left:50%;top:auto;bottom:24%;transform:translateX(-50%)}.v12-contact-card{flex-direction:column;align-items:stretch}}
@media(max-width:680px){.v12-hero{padding-top:70px}.v12-hero h1{font-size:48px}.v12-product-stage{min-height:330px}.v12-world{width:340px;height:340px}.v12-orbit{display:none}.v12-showcase-card{border-radius:16px}.v12-expand{position:static;display:block;text-align:center;border-radius:0}.v12-network{min-height:auto;padding:220px 14px 24px;display:grid;gap:12px}.v12-core{top:95px}.v12-site,.v12-remote{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%}.v12-hardware-grid{grid-template-columns:1fr}.v12-hardware-card img{height:220px}.v12-success-copy{padding:30px 24px}.v12-contact-card{padding:34px 24px}}
