
/* NEON AFTERDARK V8 — CONNECTION PORTAL V1 */
.v8-connection{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 padding:110px 0 115px;
 background:linear-gradient(180deg,#080b1b 0%,#050917 100%);
 color:#f5f8ff;
}
.v8-connection-aurora{
 position:absolute;
 width:720px;
 height:720px;
 border-radius:50%;
 filter:blur(105px);
 pointer-events:none;
 opacity:.3;
 z-index:-1;
}
.v8-connection-aurora-one{
 top:-260px;
 left:-260px;
 background:#5a26b9;
}
.v8-connection-aurora-two{
 bottom:-350px;
 right:-200px;
 background:#0088b3;
}
.v8-connection-topline{
 display:flex;
 justify-content:space-between;
 gap:20px;
 padding-bottom:20px;
 margin-bottom:35px;
 border-bottom:1px solid rgba(153,205,255,.2);
 color:#9f9aff;
 font-size:10px;
 font-weight:800;
 letter-spacing:.16em;
}
.v8-connection-topline span:last-child{color:#9daecb}
.v8-connection-panel{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 min-height:650px;
 border:1px solid rgba(151,189,255,.34);
 border-radius:35px;
 background:
  radial-gradient(ellipse at 85% 45%,rgba(78,37,156,.34),transparent 53%),
  linear-gradient(135deg,rgba(25,37,79,.88),rgba(11,18,43,.95));
 box-shadow:
  inset 0 1px rgba(255,255,255,.17),
  0 45px 100px rgba(0,0,0,.35),
  0 0 80px rgba(104,84,255,.09);
 backdrop-filter:blur(28px);
 -webkit-backdrop-filter:blur(28px);
 padding:37px 45px 32px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
}
.v8-connection-grid{
 position:absolute;
 inset:0;
 z-index:-1;
 opacity:.19;
 pointer-events:none;
 background-image:
  linear-gradient(rgba(153,189,255,.19) 1px,transparent 1px),
  linear-gradient(90deg,rgba(153,189,255,.19) 1px,transparent 1px);
 background-size:55px 55px;
 mask-image:linear-gradient(90deg,transparent 20%,#000 100%);
 -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 100%);
}
.v8-connection-ring{
 position:absolute;
 border:1px solid rgba(126,222,255,.22);
 border-radius:50%;
 pointer-events:none;
 z-index:-1;
 box-shadow:0 0 55px rgba(100,175,255,.04);
}
.v8-connection-ring-one{
 width:620px;height:620px;
 right:-70px;top:35px;
}
.v8-connection-ring-two{
 width:450px;height:450px;
 right:15px;top:120px;
 border-color:rgba(186,119,255,.33);
}
.v8-connection-ring-three{
 width:270px;height:270px;
 right:105px;top:210px;
 border-color:rgba(110,248,255,.48);
 box-shadow:0 0 80px rgba(92,224,255,.11);
}
.v8-connection-panel-top,.v8-connection-panel-bottom{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px;
 color:#9db1d4;
 font-size:10px;
 font-weight:800;
 letter-spacing:.12em;
}
.v8-connection-panel-top span:first-child{
 display:flex;
 align-items:center;
 gap:11px;
 color:#89faff;
}
.v8-connection-panel-top i{
 display:block;
 width:7px;height:7px;
 border-radius:50%;
 background:#7bffdf;
 box-shadow:0 0 16px #7bffdf;
}
.v8-connection-content{
 position:relative;
 z-index:2;
 max-width:680px;
 padding:70px 0;
}
.v8-connection-eyebrow{
 display:block;
 margin-bottom:21px;
 color:#bca1ff;
 font-size:10px;
 font-weight:800;
 letter-spacing:.18em;
}
.v8-connection-content h2{
 margin:0;
 font:400 clamp(75px,9vw,140px)/.99 'Playfair Display',serif;
 letter-spacing:-.07em;
}
.v8-connection-content h2 em{
 font-weight:400;
 color:#83faff;
 text-shadow:0 0 70px rgba(85,246,255,.3);
}
.v8-connection-content>p{
 max-width:470px;
 margin:30px 0 35px;
 color:#bfd0e9;
 font-size:15px;
 line-height:1.9;
}
.v8-connection-actions{
 display:flex;
 flex-wrap:wrap;
 gap:14px;
}
.v8-connection-button{
 display:flex;
 align-items:center;
 gap:15px;
 min-width:218px;
 min-height:78px;
 padding:13px 16px;
 border-radius:18px;
 border:1px solid rgba(255,255,255,.2);
 text-decoration:none!important;
 transition:transform .3s,box-shadow .3s;
}
.v8-connection-button:hover{transform:translateY(-5px)}
.v8-connection-call{
 background:linear-gradient(135deg,#74f7ff,#2fb1e9);
 color:#06182c!important;
 box-shadow:0 0 38px rgba(58,220,255,.22);
}
.v8-connection-call:hover{box-shadow:0 0 55px rgba(58,220,255,.45)}
.v8-connection-whatsapp{
 background:linear-gradient(135deg,rgba(43,207,154,.25),rgba(14,87,89,.46));
 border-color:rgba(82,255,195,.55);
 color:#c7ffe8!important;
 box-shadow:0 0 35px rgba(47,227,155,.11);
}
.v8-connection-whatsapp:hover{box-shadow:0 0 55px rgba(47,227,155,.28)}
.v8-connection-button-icon{
 display:grid;
 place-items:center;
 width:42px;height:42px;
 flex-shrink:0;
 border-radius:13px;
 border:1px solid currentColor;
 font-size:24px;
}
.v8-connection-button>span:nth-child(2){
 display:flex;
 flex-direction:column;
 gap:5px;
}
.v8-connection-button small{
 font-size:8px;
 font-weight:800;
 letter-spacing:.11em;
 opacity:.8;
}
.v8-connection-button strong{
 font-size:13px;
 font-weight:800;
 letter-spacing:.06em;
}
.v8-connection-button-arrow{
 margin-left:auto;
 font-size:20px;
}
.v8-connection-unavailable{
 padding:20px;
 border:1px solid rgba(150,200,255,.25);
 border-radius:14px;
 color:#a8bddc;
 font-size:13px;
}
.v8-connection-panel-bottom{
 border-top:1px solid rgba(155,202,255,.2);
 padding-top:24px;
}
.v8-connection-panel-bottom b{color:#8bfaff;margin-left:9px}
.v8-connection-after{
 display:flex;
 justify-content:space-between;
 gap:18px;
 padding-top:30px;
 color:#8195b5;
 font-size:9px;
 font-weight:800;
 letter-spacing:.16em;
}
@media(max-width:900px){
 .v8-connection-ring-one{right:-350px}
 .v8-connection-ring-two{right:-250px}
 .v8-connection-ring-three{right:-160px}
}
@media(max-width:650px){
 .v8-connection{padding:70px 0 75px}
 .v8-connection-topline{font-size:8px}
 .v8-connection-topline span:last-child{display:none}
 .v8-connection-panel{
  min-height:610px;
  padding:24px 20px;
  border-radius:24px;
 }
 .v8-connection-panel-top{font-size:8px}
 .v8-connection-panel-top span:last-child{display:none}
 .v8-connection-content{padding:60px 0}
 .v8-connection-content h2{font-size:clamp(65px,14vw,95px)}
 .v8-connection-content>p{font-size:13px;margin:25px 0}
 .v8-connection-actions{flex-direction:column}
 .v8-connection-button{width:100%;min-width:0}
 .v8-connection-panel-bottom{font-size:8px}
 .v8-connection-panel-bottom span:last-child{display:none}
 .v8-connection-after{flex-wrap:wrap;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .v8-connection-button{transition:none}
}
