/* VERTEX OSS W360 · Acesso por Corda / Rope Access — estilo compartilhado PT/EN (mockup 26/09) */
@font-face{font-family:'Unbounded';font-weight:400;font-display:swap;src:url(/fonts/unbounded-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:500;font-display:swap;src:url(/fonts/unbounded-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:700;font-display:swap;src:url(/fonts/unbounded-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
:root{--ink:#050914;--line:#1B2640;--line-2:#2A3656;--cyan:#3FC8FF;--violet:#7B5CFF;--violet-hi:#A992FF;--text:#EEF2FA;--muted:#9AA6BF;--dim:#65708A;--warn:#F2B84B;--f-display:"Unbounded","Arial Black",system-ui,sans-serif;--f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:500;line-height:1.12;letter-spacing:-.01em}
h3{font-family:var(--f-body);font-weight:600;letter-spacing:0}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.grad{background:linear-gradient(90deg,#3FC8FF,#5B8CFF 40%,#8B5CFF 75%,#3FC8FF);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 7s ease-in-out infinite}
h1 .grad,h2 .grad{display:block}
@keyframes gradShift{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.eyebrow{display:flex;align-items:center;gap:14px;font:500 11.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 0 8px currentColor}
section{position:relative;padding-block:clamp(56px,6.5vw,88px);border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
.sec-head{display:grid;gap:16px;max-width:900px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head h2{font-size:clamp(26px,3.2vw,40px)}
.lead{color:#C4CCDD;font-size:clamp(15.5px,1.3vw,17.5px);max-width:58ch}
.glass{border:1px solid rgba(90,140,255,.28);border-radius:14px;background:linear-gradient(155deg,rgba(18,30,62,.72),rgba(7,12,28,.7));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ring{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(63,200,255,.45);color:#8FB4FF;background:radial-gradient(circle,rgba(47,107,255,.25),transparent 70%);box-shadow:0 0 16px rgba(63,200,255,.2)}
.ring svg{width:22px;height:22px}
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 14.5px/1.2 var(--f-body);padding:15px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;text-align:center}
.btn .ar{width:16px;height:16px;transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(95deg,#2F6BFF,#4B5BFF 55%,#7B4CFF);color:#fff;border-color:rgba(120,170,255,.6);box-shadow:0 0 0 1px rgba(63,200,255,.25),0 10px 30px rgba(47,107,255,.45)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:btnShine 3.6s ease-in-out infinite}
@keyframes btnShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(63,200,255,.5),0 16px 40px rgba(47,107,255,.65)}
.btn-ghost,.btn-line{border-color:rgba(200,215,255,.45);color:var(--text);background:rgba(6,10,24,.55);backdrop-filter:blur(6px)}
.btn-ghost:hover,.btn-line:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(63,200,255,.3)}
.btn-line{border-color:rgba(123,92,255,.8);box-shadow:0 0 16px rgba(123,92,255,.3);padding:11px 16px;font-size:13px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
/* header */
.nav{position:sticky;top:0;z-index:50;background:rgba(5,9,20,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.wm-v{font:400 24px/1 var(--f-display);letter-spacing:.12em;color:#fff}
.wm-o{font:500 15px/1 var(--f-body);letter-spacing:.06em;color:#DDE4F2}
.wm-w{font:600 15px/1 var(--f-body);letter-spacing:.04em;color:var(--cyan)}
.wm-sep{width:1px;height:20px;background:rgba(200,215,255,.45)}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:14px}
.nav-links a{text-decoration:none;color:#C9D2E4;transition:color .2s}
.nav-links a:hover{color:#fff}
.lang{display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid rgba(169,146,255,.35);background:rgba(14,18,34,.6);backdrop-filter:blur(8px);font:500 12px/1 var(--f-mono);letter-spacing:.1em}
.lang a,.lang span{padding:7px 11px;border-radius:999px;text-decoration:none;color:var(--muted);transition:color .2s,box-shadow .2s}
.lang a:hover{color:#fff;box-shadow:0 0 16px rgba(63,200,255,.35)}
.lang [aria-current]{color:#04121C;background:linear-gradient(90deg,#3FC8FF,#8BE3FF);box-shadow:0 0 14px rgba(63,200,255,.5)}
@media (max-width:980px){.nav-links{display:none}.lang{margin-left:auto}}
@media (max-width:640px){.nav .btn-line{display:none}.wm-v{font-size:19px}.brand{gap:9px}}
/* entrada */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * .12s)}
.rv.in{opacity:1;transform:none}
/* HERO */
.hero{padding-block:0;min-height:min(calc(100svh - 68px),760px);display:grid}
.hero-sky{position:absolute;inset:0;z-index:-2;background:url(/img/hero-offshore.webp) 40% 60%/cover no-repeat;animation:kenburns 26s ease-in-out infinite alternate}
.hero-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,20,.97) 0%,rgba(5,9,20,.9) 42%,rgba(5,9,20,.35) 64%,rgba(5,9,20,.55) 100%),linear-gradient(180deg,rgba(5,9,20,.4),transparent 25%,transparent 75%,var(--ink))}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,1%)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:center}
.hero-copy{padding-block:56px}
.hero h1{font-size:clamp(30px,3.8vw,50px);font-weight:700;line-height:1.08}
.hero .lead{margin-top:22px}
.hero .cta-row{margin-top:30px}
.feats{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:40px;font-size:13.5px;color:#C9D2E4;line-height:1.35}
.feats li{display:flex;align-items:center;gap:12px}
.hero-art{position:relative;align-self:stretch;min-height:520px}
.photo{position:relative}
.hero-art .photo{position:absolute;right:22%;top:0;bottom:0;aspect-ratio:1011/1555;height:100%;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 88%,transparent),linear-gradient(180deg,#000 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 88%,transparent),linear-gradient(180deg,#000 85%,transparent);mask-composite:intersect}
.photo img{width:100%;height:100%;object-fit:cover}
.hero-art .photo img{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.node{position:absolute;width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(circle,#fff 0 14%,rgba(160,120,255,.9) 26%,rgba(90,110,255,0) 70%);mix-blend-mode:screen;pointer-events:none;animation:nodeGlow 2.8s ease-in-out infinite var(--d,0s)}
.node::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(120,180,255,.8);animation:ping 2.8s ease-out infinite var(--d,0s)}
@keyframes nodeGlow{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(2.1);opacity:0}}
.glint{position:absolute;left:56.4%;top:0;width:3px;height:70px;border-radius:3px;background:linear-gradient(180deg,transparent,#fff,transparent);box-shadow:0 0 14px #FFB86B;opacity:.8;animation:glint 3.6s linear infinite;mix-blend-mode:screen}
@keyframes glint{from{top:-12%}to{top:100%}}
.hud{position:absolute;right:0;top:6%;width:clamp(150px,15vw,190px);padding:12px;border-color:rgba(90,160,255,.5);box-shadow:0 0 28px rgba(63,200,255,.25),inset 0 0 20px rgba(63,200,255,.08);animation:hudFloat 6s ease-in-out infinite}
@keyframes hudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;color:#CFE0FF}
.hud-top img{height:74px;width:auto;filter:grayscale(1) brightness(1.3) sepia(1) hue-rotate(185deg) saturate(4.5);mix-blend-mode:screen;opacity:.9}
.hud ul{display:grid;gap:7px;margin-top:6px}
.hud li{display:grid;gap:4px;color:#AFC3E8}
.hud li .mono{font-size:9.5px}
.hud li i{display:block;height:3px;border-radius:3px;background:linear-gradient(90deg,#3FC8FF,#7B5CFF);transform-origin:left;transform:scaleX(var(--w));animation:hudBar 3.2s ease-in-out infinite var(--d)}
@keyframes hudBar{0%,100%{transform:scaleX(var(--w))}50%{transform:scaleX(calc(var(--w) * .8))}}
.wave{width:100%;height:42px;margin-top:10px;border-top:1px solid rgba(90,160,255,.25)}
.wave path{stroke:#6FB6FF;stroke-width:1.3;opacity:.45}
.wave path.run{opacity:1;stroke:#BFE6FF;stroke-width:1.8;stroke-dasharray:70 360;animation:wave 2.6s linear infinite;filter:drop-shadow(0 0 4px #3FC8FF)}
@keyframes wave{from{stroke-dashoffset:430}to{stroke-dashoffset:0}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-copy{padding-block:40px 8px}.hero-art{min-height:440px;margin-bottom:24px}.hero-art .photo{right:auto;left:50%;transform:translateX(-58%)}.hud{top:auto;bottom:6%;right:0}}
/* LACUNA */
.gap3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gcard{position:relative;overflow:hidden;display:flex;gap:18px;align-items:flex-start;padding:26px 24px;transition:transform .35s,box-shadow .35s}
.gcard .gi{width:46px;height:46px;flex:none;color:#7FA8FF;stroke-width:1.3}
.gcard h3{font-size:18px;margin-bottom:8px}
.gcard p{color:var(--muted);font-size:15px}
.gcard:hover{transform:translateY(-4px)}
.gcard.vx{border:1px solid transparent;background:linear-gradient(155deg,rgba(40,30,110,.85),rgba(12,14,40,.85)) padding-box,linear-gradient(130deg,#3FC8FF,#7B5CFF,#B06CFF) border-box;box-shadow:0 0 40px rgba(123,92,255,.45)}
.gcard.vx.in{transform:scale(1.03)}
.gcard.vx .gi{color:#B9A6FF;filter:drop-shadow(0 0 8px #7B5CFF)}
.gcard.vx p{color:#DCE2F5}
.gcard.vx::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);background-size:250% 100%;animation:sheen 4s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.bracket{position:relative;margin:36px auto 0;max-width:560px;text-align:center;font:500 clamp(16px,1.6vw,19px)/1.4 var(--f-body)}
.bracket::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;border:1px solid rgba(123,160,255,.45);border-top:0;border-radius:0 0 4px 4px}
.bracket span{position:relative;padding-inline:14px;background:var(--ink)}
.bracket b{font-weight:700;display:inline}
@media (max-width:900px){.gap3{grid-template-columns:1fr}.gcard.vx.in{transform:none}}
/* POR QUE IMPORTA */
.why-bg{position:absolute;inset:0;z-index:-2;background:url(/img/hero-offshore.webp) 70% 40%/cover no-repeat;opacity:.35;filter:saturate(.8)}
.why-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 5%,rgba(5,9,20,.7) 45%,rgba(5,9,20,.75) 100%)}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.85fr);gap:24px;align-items:center}
.why-copy .sec-head{margin-bottom:22px}
.why-art .photo{aspect-ratio:980/1130;-webkit-mask-image:radial-gradient(50% 50% at 45% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(50% 50% at 45% 50%,#000 55%,transparent 100%)}
.dcards{display:grid;gap:12px}
.dcards li{position:relative;display:flex;gap:14px;align-items:center;padding:14px 16px;transition:transform .35s,border-color .35s,box-shadow .35s,opacity .8s}
.dcards li.on{transform:translateX(-6px);border-color:rgba(123,92,255,.9);box-shadow:0 0 26px rgba(123,92,255,.4)}
.dcards h3{font-size:15px;color:#fff}
.dcards p{color:var(--muted);font-size:13.5px;line-height:1.4}
.dcards .wire{position:absolute;right:100%;top:50%;width:46px;height:1px;background:repeating-linear-gradient(90deg,rgba(123,160,255,.7) 0 4px,transparent 4px 8px)}
.dcards .wire::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:#A992FF;box-shadow:0 0 10px #7B5CFF;animation:wireRun 2.4s linear infinite}
.dcards li:nth-child(2) .wire::after{animation-delay:.6s}.dcards li:nth-child(3) .wire::after{animation-delay:1.2s}.dcards li:nth-child(4) .wire::after{animation-delay:1.8s}
@keyframes wireRun{from{left:0;opacity:0}20%{opacity:1}to{left:100%;opacity:0}}
@media (max-width:1000px){.why-grid{grid-template-columns:1fr 1fr}.why-copy{grid-column:1/-1}.dcards .wire{display:none}}
@media (max-width:640px){.why-grid{grid-template-columns:1fr}.why-art{max-width:340px;margin-inline:auto}}
/* COMO FUNCIONA */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.steps li{position:relative;display:flex;gap:14px;align-items:flex-start;padding:22px 18px;transition:transform .35s,box-shadow .35s,border-color .35s,opacity .8s}
.steps li:not(:last-child)::after{content:"→";position:absolute;right:-26px;top:50%;transform:translateY(-50%);color:#8FB4FF;font-size:20px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(5px,-50%)}}
.steps .si{width:40px;height:40px;flex:none;color:#8FA8FF;stroke-width:1.4}
.steps .num{font:500 15px/1 var(--f-mono);color:var(--cyan)}
.steps h3{font-size:15px;margin:8px 0;line-height:1.3}
.steps p{color:var(--muted);font-size:13.5px;line-height:1.45}
.steps li.on{transform:translateY(-6px);border-color:rgba(63,200,255,.8);box-shadow:0 0 30px rgba(63,200,255,.3)}
.tagline{margin-top:34px;text-align:center;font:500 clamp(17px,1.7vw,21px)/1.4 var(--f-body)}
.tagline b{display:inline;font-weight:700}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr;gap:18px}.steps li::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
/* MÓDULOS */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mod{padding:26px;display:grid;gap:14px;align-content:start}
.mod h3{font:700 20px/1 var(--f-display);letter-spacing:.02em}
.mod p{color:var(--muted);font-size:14.5px}
.mod.hot{border-color:rgba(63,200,255,.55);box-shadow:0 0 36px rgba(63,200,255,.2)}
.mod .status{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:9px 14px;border-radius:999px;border:1px solid rgba(242,184,75,.6);color:var(--warn);font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;box-shadow:0 0 20px rgba(242,184,75,.22)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--warn);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.mod .never{padding:10px 12px;border-radius:10px;border:1px dashed rgba(255,120,135,.4);color:#FFC0C7;font-size:13px}
.trend{width:100%;height:60px}
.trend .base{stroke:#2A3656;stroke-dasharray:5 6}
.trend .ln{stroke:#7B9BFF;stroke-width:2.5;stroke-dasharray:320;stroke-dashoffset:320;filter:drop-shadow(0 0 4px #5B8CFF)}
.mod.in .trend .ln{animation:draw 2.2s ease .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.trp{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 11px;border-radius:8px;border:1px solid var(--line-2);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:all .35s}
.chip.on{color:#fff;border-color:var(--cyan);background:rgba(63,200,255,.12);box-shadow:0 0 16px rgba(63,200,255,.35)}
@media (max-width:900px){.mods{grid-template-columns:1fr}}
/* PARA QUEM É */
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cards4 article{padding:24px;display:grid;gap:12px;align-content:start;transition:transform .25s ease-out,box-shadow .3s,opacity .8s}
.cards4 h3{font-size:16px}
.cards4 p{color:var(--muted);font-size:14px}
@media (max-width:1000px){.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards4{grid-template-columns:1fr}}
.tilt:hover{box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 36px rgba(63,200,255,.25)}
/* RESULTADOS + CTA */
.res-bg{position:absolute;inset:0;z-index:-2;background:url(/img/hero-offshore.webp) 80% 50%/cover no-repeat;opacity:.55;animation:kenburns 30s ease-in-out infinite alternate}
.res-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 20%,rgba(5,9,20,.55) 70%,rgba(5,9,20,.4)),linear-gradient(180deg,var(--ink),transparent 30%,transparent 70%,var(--ink))}
.res h2{font-size:clamp(26px,3.2vw,40px)}
.res3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.res3 article{display:flex;gap:18px;align-items:flex-start;padding:22px;transition:transform .25s ease-out,box-shadow .3s,opacity .8s}
.res3 .ri{width:40px;height:40px;flex:none;color:#8FA8FF;stroke-width:1.4}
.res3 h3{font-size:15.5px;margin-bottom:6px}
.res3 p{color:var(--muted);font-size:14px}
.band{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;border:1px solid transparent;background:linear-gradient(155deg,rgba(14,24,56,.88),rgba(6,10,26,.88)) padding-box,linear-gradient(120deg,rgba(63,200,255,.8),rgba(123,92,255,.8),rgba(63,200,255,.3)) border-box;box-shadow:0 0 50px rgba(47,107,255,.25)}
.band h2{font:600 clamp(19px,1.9vw,23px)/1.3 var(--f-body);max-width:26ch}
.band p{color:var(--muted);font-size:14px;margin-top:10px;max-width:62ch}
@media (max-width:900px){.res3{grid-template-columns:1fr}.band{padding:24px}}
/* AUTORIDADE */
.auth{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;padding:30px;position:relative;overflow:hidden;border-radius:16px;border:1px solid transparent;background:linear-gradient(150deg,rgba(20,30,64,.8),rgba(7,10,24,.75)) padding-box,linear-gradient(120deg,#3FC8FF,#7B5CFF,#B06CFF) border-box;box-shadow:0 0 40px rgba(123,92,255,.2)}
.auth::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:30%;background:linear-gradient(90deg,transparent,#3FC8FF,transparent);animation:edge 5s linear infinite}
@keyframes edge{from{left:-30%}to{left:100%}}
.avatar{width:220px;height:275px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#26336A,#0B1026 70%);border:1px solid rgba(169,146,255,.4);font:700 56px/1 var(--f-display);color:#C9BCFF}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.auth h3{font:500 clamp(22px,2.2vw,28px)/1.1 var(--f-display)}
.auth .role{color:var(--cyan);font-weight:600;margin-top:8px}
.auth .cref{font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--violet-hi);margin-top:10px}
.auth .sum{color:var(--muted);margin-top:14px;max-width:70ch}
.auth ul{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-size:14px;color:#DCE4FF}
.auth li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3FC8FF;box-shadow:0 0 8px #3FC8FF;margin-right:10px;vertical-align:2px}
.social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(169,146,255,.35);background:rgba(14,18,34,.55);backdrop-filter:blur(6px);text-decoration:none;font-size:13.5px;color:#DCE4FF;transition:box-shadow .25s,border-color .25s}
.social a:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(63,200,255,.35)}
.social svg{width:17px;height:17px}
@media (max-width:760px){.auth{grid-template-columns:1fr;padding:22px}.avatar{width:100%;height:220px}.auth ul{grid-template-columns:1fr}}
/* a11y */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;border-radius:10px;background:#fff;color:#000}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* FOOTER */
footer{padding-block:36px 48px}
.foot{display:grid;grid-template-columns:auto 1fr;gap:14px 40px;align-items:center}
.fbrand{flex-direction:column;align-items:flex-start;gap:6px}
.fbrand small{font:500 12px/1 var(--f-body);color:#8C98B2;letter-spacing:.1em}
.flinks{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px}
.flinks a{text-decoration:none;color:#C9D2E4}
.flinks a:hover{color:#fff}
.flinks .fsoc{display:inline-flex;align-items:center;gap:6px}
.flinks svg{width:15px;height:15px}
.fmicro,.fcopy{grid-column:1/-1}
.fmicro{color:var(--dim);font-size:13px;max-width:95ch}
.fcopy{font:400 11px/1.6 var(--f-mono);color:var(--dim);letter-spacing:.08em}
@media (max-width:700px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.trend .ln{stroke-dashoffset:0}}