/* ==========================================================================
   aezauml.me - hoja de estilos principal
   Extraida sin modificaciones desde el bloque <style> de index.html.
   El contenido es identico al original: mismos selectores, mismo orden,
   mismos breakpoints y mismas animaciones.
   ========================================================================== */

:root{
  --ink:#17323f;--ink2:#244b5a;--paper:#f4f8fa;--white:#ffffff;--soft:#e9f1f4;
  --panel:#153844;--panel2:#1d4d5b;--text:#17323f;--muted:#667b84;
  --accent:#2aa79a;--accent2:#3e84b8;--accentSoft:#dff2ef;--line:#cbdbe1;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#eef5f7 0,#f9fbfc 45%,#eef5f7 100%);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}.wrap{max-width:1120px;margin:auto;padding:24px}.nav{position:sticky;top:0;z-index:20;background:rgba(23,50,63,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12);color:white}.navin{max-width:1120px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:.5px}.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.20);border-radius:999px;color:#dce9ed;font-size:13px}.hero{margin-top:24px;padding:54px 42px;display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center;background:linear-gradient(135deg,#17323f 0,#245363 55%,#2b6977 100%);border-radius:30px;color:white;box-shadow:0 24px 80px rgba(31,72,87,.20)}.eyebrow{color:#8fe5dc;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}.hero h1{font-family:"Space Grotesk";font-size:clamp(42px,7vw,74px);line-height:.95;margin:10px 0 16px}.hero h2{font-size:clamp(20px,3vw,29px);font-weight:600;color:#edf8fa;margin:0 0 18px}.hero p{color:#d8e8ec;max-width:760px;font-size:17px;text-align:justify}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.btn{padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#6ee0d3,#78b9e5);color:#11323d;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.12)}.btn.alt{background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.24)}.qrbox{background:#fff;color:var(--ink);border:1px solid #dce7eb;border-radius:24px;padding:22px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.16)}#qrcode{display:grid;place-items:center;background:#fff;padding:12px;border-radius:16px;min-height:220px}.qrbox small{display:block;color:var(--muted);margin-top:12px}.qrbox .pill{border-color:var(--line);color:var(--ink2)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.section{padding:42px 0}.section h3{font-family:"Space Grotesk";font-size:29px;margin:0 0 20px;color:var(--ink)}.section h3:after{content:"";display:block;width:52px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));margin-top:8px}.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 10px 35px rgba(37,74,87,.08)}.card h4{margin:0 0 8px;font-size:17px;color:var(--ink)}.card p{margin:0;color:var(--muted);font-size:14px;text-align:justify}.icon{font-size:26px;margin-bottom:12px}.skillgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.skill{position:relative;overflow:hidden;background:linear-gradient(145deg,#ffffff,#edf5f7);border:1px solid #c7dce3;border-radius:18px;padding:18px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 30px rgba(30,75,91,.08)}.skill:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--accent),var(--accent2))}.skill b{font-size:15px;color:var(--ink);padding-left:2px}.skill small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.meter{display:flex;gap:5px;margin-top:13px}.meter i{height:8px;flex:1;border-radius:999px;background:#d8e6eb}.meter i.on{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 2px 8px rgba(42,167,154,.25)}.timeline{display:grid;gap:14px}.role{padding:20px 22px;border:1px solid var(--line);border-left:5px solid var(--accent);background:#fff;border-radius:0 16px 16px 0;box-shadow:0 8px 28px rgba(37,74,87,.06)}.role strong{font-family:"Space Grotesk";color:var(--ink)}.role span{display:block;color:var(--muted);font-size:13px;margin-top:2px}.role p{margin:8px 0 0;color:#50656e;text-align:justify}.ai-banner{background:linear-gradient(135deg,#edf8f7,#eef5fb);border:1px solid #c7dce3;border-radius:22px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.ai-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-size:25px;box-shadow:0 10px 24px rgba(42,167,154,.20)}.ai-banner h4{margin:0 0 6px;font-size:18px;color:var(--ink)}.ai-banner p{margin:0;color:var(--muted);text-align:justify}.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact .card{display:flex;flex-direction:column;gap:8px}.footer{padding:38px 0 70px;color:var(--muted);font-size:13px;text-align:center}.tag{display:inline-block;padding:7px 10px;border:1px solid #bfd4db;background:#f7fbfc;border-radius:999px;margin:4px 4px 0 0;color:var(--ink2);font-size:12px;font-weight:700}
@media(max-width:900px){.skillgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding:38px 26px}.grid{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.qrbox{max-width:360px}.nav .pill{display:none}}
@media(max-width:560px){.wrap{padding:16px}.navin{padding:10px 18px}.hero{padding:32px 20px}.grid,.skillgrid{grid-template-columns:1fr}.hero p{font-size:15px}.qrbox{padding:16px}}

.strengthgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.strength{background:linear-gradient(145deg,#17323f,#234d5c);color:#fff;border-radius:18px;padding:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(23,50,63,.12);min-height:140px}.strength .num{font-family:"Space Grotesk";font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8fe5dc;font-weight:700}.strength h4{margin:8px 0 7px;font-size:17px;color:#fff}.strength p{margin:0;color:#d6e6ea;font-size:13px;text-align:justify}.strength.emphasis{background:linear-gradient(145deg,#1c5360,#276979)}@media(max-width:900px){.strengthgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.strengthgrid{grid-template-columns:1fr}}


/* --- Motion & visual polish --- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 40%,rgba(143,229,220,.08) 49%,rgba(120,185,229,.08) 52%,transparent 61%);transform:translateX(-35%) rotate(3deg);animation:heroSheen 12s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes heroSheen{0%,72%{transform:translateX(-40%) rotate(3deg)}100%{transform:translateX(38%) rotate(3deg)}}
.visual-stack{display:grid;gap:14px;align-content:center}
.photo-card{position:relative;border-radius:26px;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(143,229,220,.16));border:1px solid rgba(255,255,255,.24);box-shadow:0 18px 48px rgba(0,0,0,.18);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.photo-card::before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle at 35% 20%,rgba(143,229,220,.22),transparent 34%),radial-gradient(circle at 75% 78%,rgba(120,185,229,.18),transparent 28%);filter:blur(18px);animation:photoAura 9s ease-in-out infinite alternate;pointer-events:none}
.photo-card:hover{transform:translateY(-4px);box-shadow:0 25px 64px rgba(0,0,0,.22)}
.profile-photo{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;display:block;border-radius:20px;filter:saturate(.96) contrast(1.025) brightness(1.02);transition:filter .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.photo-card:hover .profile-photo{filter:saturate(1.02) contrast(1.04) brightness(1.025);transform:scale(1.012)}
.photo-label{position:absolute;left:20px;bottom:20px;z-index:2;padding:8px 11px;border-radius:999px;background:rgba(17,50,61,.72);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(10px);font-size:11px;font-weight:700;letter-spacing:.05em;color:#e9f8fa}
@keyframes photoAura{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
.qrbox.compact{padding:15px;border-radius:20px;background:rgba(255,255,255,.97)}
.qrbox.compact #qrcode{min-height:155px;padding:8px}.qrbox.compact #qrcode img,.qrbox.compact #qrcode canvas{max-width:155px!important;max-height:155px!important}

/* Scroll reveal: quiet, consistent, not aggressive */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.24,1);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
.card,.strength,.role,.skill,.ai-banner{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease,background .32s ease}
.card:hover,.skill:hover,.strength:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(37,74,87,.12);border-color:#aacbd4}
.role:hover{transform:translateX(4px);box-shadow:0 12px 34px rgba(37,74,87,.09)}
.ai-banner:hover{box-shadow:0 16px 36px rgba(37,74,87,.09)}

/* Skill meters animate in when visible */
.meter i{transform:scaleX(.12);transform-origin:left center;opacity:.4;transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .5s ease,box-shadow .4s ease}
.skill.is-visible .meter i{transform:scaleX(1);opacity:1}
.skill.is-visible .meter i:nth-child(2){transition-delay:.06s}.skill.is-visible .meter i:nth-child(3){transition-delay:.12s}.skill.is-visible .meter i:nth-child(4){transition-delay:.18s}.skill.is-visible .meter i:nth-child(5){transition-delay:.24s}
.skill b{display:inline-block;transition:color .3s ease,transform .3s ease}.skill:hover b{color:var(--accent2);transform:translateX(2px)}
.skill::after{content:"";position:absolute;right:-34px;top:-34px;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,rgba(62,132,184,.13),transparent 68%);opacity:0;transition:opacity .35s ease,transform .45s ease}.skill:hover::after{opacity:1;transform:scale(1.14)}

.tag{transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}.tag:hover{transform:translateY(-2px);background:#eef9f8;border-color:#9ecbc5;box-shadow:0 7px 18px rgba(42,167,154,.10)}
.icon{display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.card:hover .icon{transform:translateY(-2px) scale(1.06)}

@media(max-width:820px){.visual-stack{max-width:430px}.profile-photo{aspect-ratio:1/1.08;object-position:center 22%}.qrbox.compact{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}.meter i{transform:none!important;opacity:1!important}}



/* ===== v7 · Professional Tech CV ===== */
body{
  position:relative;
  background:
    radial-gradient(circle at 12% 8%,rgba(42,167,154,.14),transparent 24%),
    radial-gradient(circle at 88% 16%,rgba(62,132,184,.13),transparent 28%),
    radial-gradient(circle at 72% 78%,rgba(42,167,154,.08),transparent 24%),
    linear-gradient(180deg,#edf4f6 0%,#f9fbfc 48%,#eef5f7 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.48;
  background-image:
    linear-gradient(rgba(31,110,140,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,110,140,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.28) 70%,transparent);
}
body::after{
  content:"";position:fixed;inset:-25%;pointer-events:none;z-index:-1;opacity:.28;
  background:conic-gradient(from 110deg at 50% 50%,transparent 0 26%,rgba(42,167,154,.08) 31%,transparent 37% 63%,rgba(62,132,184,.07) 68%,transparent 74%);
  filter:blur(50px);animation:bgDrift 28s linear infinite;
}
@keyframes bgDrift{to{transform:rotate(360deg) scale(1.02)}}

.hero{
  grid-template-columns:300px minmax(0,1fr);gap:42px;padding:34px 38px 38px;
  align-items:start;background:
    linear-gradient(135deg,rgba(17,43,55,.985),rgba(30,75,91,.975) 58%,rgba(32,90,101,.965));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(20,58,71,.24);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(110deg,#000,transparent 70%);
}
.hero-copy{padding-top:14px;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(46px,6.2vw,72px);margin-top:8px}
.hero-copy .hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.hero-copy .hero-meta span{font-size:11px;letter-spacing:.045em;font-weight:700;color:#d7edf1;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);padding:7px 9px;border-radius:999px;backdrop-filter:blur(8px)}

.portrait-stage{position:relative;z-index:3;align-self:start}
.portrait-frame{
  position:relative;padding:9px;border-radius:28px 28px 48px 28px;
  background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(82,211,197,.12) 48%,rgba(102,174,221,.18));
  box-shadow:0 24px 55px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.22);overflow:hidden;
}
.portrait-frame::before{
  content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;
  background:linear-gradient(120deg,rgba(143,229,220,.75),rgba(255,255,255,.16),rgba(120,185,229,.72));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:frameGlow 7s ease-in-out infinite alternate;
}
.portrait-frame::after{
  content:"";position:absolute;left:-30%;top:-50%;width:38%;height:190%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);animation:portraitScan 8.5s ease-in-out infinite;
}
.portrait-frame .profile-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:21px 21px 40px 21px;display:block;filter:saturate(.96) contrast(1.025) brightness(1.02);transform:scale(1.001);animation:photoBreath 9s ease-in-out infinite}
.portrait-status{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 11px;border-radius:14px;background:rgba(10,31,40,.70);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);color:#edfafa;font-size:10px;letter-spacing:.055em;font-weight:700;text-transform:uppercase}
.portrait-status .live-dot{width:7px;height:7px;border-radius:50%;background:#8fe5dc;box-shadow:0 0 0 0 rgba(143,229,220,.42);animation:statusPulse 2.8s ease-out infinite}
.profile-mini{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:12px;padding:12px 13px;border-radius:17px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#dceff2;backdrop-filter:blur(12px)}
.profile-mini b{font-size:12px;color:#fff}.profile-mini small{display:block;font-size:10px;color:#aac9d0;margin-top:2px}.profile-mini .signal{font-family:"Space Grotesk";color:#8fe5dc;font-weight:800;font-size:12px}
@keyframes frameGlow{from{opacity:.68}to{opacity:1}}
@keyframes portraitScan{0%,68%{transform:translateX(-190%) rotate(18deg)}100%{transform:translateX(470%) rotate(18deg)}}
@keyframes photoBreath{0%,100%{transform:scale(1.001)}50%{transform:scale(1.012)}}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(143,229,220,.38)}70%{box-shadow:0 0 0 8px rgba(143,229,220,0)}100%{box-shadow:0 0 0 0 rgba(143,229,220,0)}}

.hero-qr{display:flex;align-items:center;gap:12px;margin-top:22px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.055);width:max-content;max-width:100%}
.hero-qr #qrcode{min-height:86px;width:86px;height:86px;padding:6px;border-radius:12px;flex:0 0 86px}
.hero-qr #qrcode img,.hero-qr #qrcode canvas{max-width:74px!important;max-height:74px!important}
.hero-qr-copy{font-size:12px;color:#c9dfe4;max-width:210px}.hero-qr-copy b{display:block;color:#fff;font-size:12px;margin-bottom:2px}

/* Continuous but calm skill motion */
.skill{isolation:isolate;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,245,247,.96));box-shadow:0 10px 30px rgba(30,75,91,.09),inset 0 1px 0 rgba(255,255,255,.8);animation:skillFloat 7s ease-in-out infinite}
.skill:nth-child(2n){animation-delay:-1.8s}.skill:nth-child(3n){animation-delay:-3.4s}.skill:nth-child(4n){animation-delay:-5.1s}
.skill::after{content:"";position:absolute;inset:-55% -25%;z-index:-1;background:linear-gradient(115deg,transparent 43%,rgba(42,167,154,.08) 49%,rgba(62,132,184,.08) 52%,transparent 58%);transform:translateX(-45%) rotate(4deg);animation:skillSweep 8s ease-in-out infinite}
.skill:nth-child(2n)::after{animation-delay:-2.6s}.skill:nth-child(3n)::after{animation-delay:-5.1s}
.meter i.on{position:relative;overflow:hidden;animation:meterPulse 3.8s ease-in-out infinite}
.meter i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-130%);animation:meterScan 3.8s ease-in-out infinite}
.meter i:nth-child(2){animation-delay:.18s}.meter i:nth-child(3){animation-delay:.36s}.meter i:nth-child(4){animation-delay:.54s}.meter i:nth-child(5){animation-delay:.72s}
.meter i:nth-child(2)::after{animation-delay:.18s}.meter i:nth-child(3)::after{animation-delay:.36s}.meter i:nth-child(4)::after{animation-delay:.54s}.meter i:nth-child(5)::after{animation-delay:.72s}
@keyframes skillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes skillSweep{0%,66%{transform:translateX(-48%) rotate(4deg)}100%{transform:translateX(48%) rotate(4deg)}}
@keyframes meterPulse{0%,100%{filter:saturate(.95);box-shadow:0 2px 8px rgba(42,167,154,.18)}50%{filter:saturate(1.18);box-shadow:0 0 13px rgba(42,167,154,.38)}}
@keyframes meterScan{0%,55%{transform:translateX(-130%)}100%{transform:translateX(150%)}}

/* Quiet continuous movement for supporting UI */
.tag{transition:transform .28s ease,box-shadow .28s ease;animation:tagGlow 8s ease-in-out infinite}.tag:nth-child(2n){animation-delay:-2.3s}.tag:nth-child(3n){animation-delay:-4.6s}
@keyframes tagGlow{0%,100%{box-shadow:0 0 0 rgba(42,167,154,0)}50%{box-shadow:0 5px 16px rgba(42,167,154,.10)}}
.section h3::after{background-size:200% 100%;animation:titleFlow 5s ease-in-out infinite}
@keyframes titleFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding:24px 22px 32px;gap:26px}
  .portrait-stage{max-width:340px;margin:0 auto;width:100%}
  .hero-copy{padding-top:0;text-align:left}.hero-copy h1{font-size:clamp(44px,15vw,64px)}
  .hero-qr{width:100%}
}
@media(max-width:560px){.portrait-stage{max-width:285px}.profile-mini{padding:10px 11px}.hero-meta{gap:6px!important}.hero-copy .hero-meta span{font-size:10px}.hero-qr-copy{max-width:none}}
@media(prefers-reduced-motion:reduce){body::after,.portrait-frame::before,.portrait-frame::after,.portrait-frame .profile-photo,.portrait-status .live-dot,.skill,.skill::after,.meter i.on,.meter i.on::after,.tag,.section h3::after{animation:none!important}}



/* ===== v10 · Professional Gamer / Tech HUD polish ===== */
:root{
  --game-cyan:#65e7dc;
  --game-blue:#6aa9ff;
  --game-ice:#dffcff;
  --game-deep:#0d2230;
  --game-panel:#112c3b;
  --game-panel2:#173b4d;
}
body{
  background:
    radial-gradient(circle at 12% 10%,rgba(51,191,184,.13),transparent 25%),
    radial-gradient(circle at 88% 15%,rgba(75,132,209,.13),transparent 27%),
    radial-gradient(circle at 74% 78%,rgba(71,203,194,.09),transparent 25%),
    linear-gradient(180deg,#eaf2f5 0%,#f8fbfc 46%,#eaf2f5 100%);
  background-attachment:fixed;
}
body::before{
  opacity:.55;
  background-image:
    linear-gradient(rgba(63,132,160,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,132,160,.055) 1px,transparent 1px),
    radial-gradient(circle,rgba(31,110,140,.11) 1px,transparent 1.3px);
  background-size:46px 46px,46px 46px,23px 23px;
  animation:gridShift 26s linear infinite;
}
body::after{
  opacity:.34;
  background:
    conic-gradient(from 120deg at 50% 50%,transparent 0 24%,rgba(48,193,184,.09) 30%,transparent 37% 60%,rgba(80,143,220,.085) 67%,transparent 74%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.12),transparent 52%);
  filter:blur(58px);
  animation:bgDrift 34s linear infinite;
}
@keyframes gridShift{0%{background-position:0 0,0 0,0 0}100%{background-position:46px 46px,46px 46px,23px 23px}}

.nav{background:rgba(10,31,43,.92);border-bottom:1px solid rgba(101,231,220,.16);box-shadow:0 8px 30px rgba(8,30,42,.16)}
.hero{
  background:
    radial-gradient(circle at 88% 15%,rgba(101,231,220,.11),transparent 24%),
    radial-gradient(circle at 15% 85%,rgba(106,169,255,.09),transparent 28%),
    linear-gradient(135deg,#0c2635 0%,#12394a 56%,#174c5d 100%);
  border:1px solid rgba(121,226,221,.19);
  box-shadow:0 30px 90px rgba(10,42,57,.27),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero::after{background-size:30px 30px;opacity:.85}
.hero .eyebrow{color:#89f0e8;text-shadow:0 0 18px rgba(101,231,220,.16)}
.btn{background:linear-gradient(135deg,#7af0e5,#7fb5ff);box-shadow:0 9px 24px rgba(58,187,189,.18)}

/* Skill cards: professional HUD, segmented light pips — no progress bars */
.skillgrid{gap:16px}
.skill{
  min-height:126px;
  padding:19px 20px 18px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(145deg,rgba(12,35,49,.985),rgba(20,58,73,.97));
  border:1px solid rgba(114,223,218,.19);
  box-shadow:0 14px 38px rgba(13,48,63,.16),inset 0 1px 0 rgba(255,255,255,.055);
  animation:skillFloatPro 7.6s ease-in-out infinite;
}
.skill:nth-child(2n){animation-delay:-1.9s}
.skill:nth-child(3n){animation-delay:-3.7s}
.skill:nth-child(4n){animation-delay:-5.2s}
.skill::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:54px;height:54px;
  background:
    linear-gradient(90deg,var(--game-cyan),transparent) top left/42px 1px no-repeat,
    linear-gradient(180deg,var(--game-cyan),transparent) top left/1px 42px no-repeat;
  opacity:.55;
  pointer-events:none;
}
.skill::after{
  content:"";
  position:absolute;
  inset:-55% -40%;
  z-index:-1;
  background:linear-gradient(112deg,transparent 42%,rgba(101,231,220,.045) 48%,rgba(106,169,255,.07) 51%,transparent 57%);
  transform:translateX(-48%) rotate(3deg);
  animation:skillScanPro 8.8s ease-in-out infinite;
  pointer-events:none;
}
.skill b{
  color:#f3fcff;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:15.5px;
  letter-spacing:.01em;
  text-shadow:0 0 18px rgba(101,231,220,.08);
}
.skill small{
  display:block;
  color:#9fc2cd;
  font-size:10.5px;
  letter-spacing:.075em;
  margin-top:3px;
}
.skill:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(114,233,225,.43);
  box-shadow:0 20px 50px rgba(13,48,63,.24),0 0 0 1px rgba(101,231,220,.05) inset;
}
.skill:hover b{color:#a8fff8;transform:translateX(2px)}

.meter{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:16px;
  padding-left:3px;
  min-height:24px;
}
.meter i{
  flex:0 0 13px;
  width:13px;height:13px;
  border-radius:3px;
  background:rgba(178,220,229,.07);
  border:1px solid rgba(169,220,231,.22);
  transform:rotate(45deg) scale(.88);
  opacity:.7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
  transition:transform .32s ease,opacity .32s ease,background .32s ease,border-color .32s ease;
}
.meter i.on{
  position:relative;
  overflow:visible;
  opacity:1;
  background:linear-gradient(135deg,#69eee2,#6aa9ff);
  border-color:rgba(191,255,250,.68);
  box-shadow:0 0 8px rgba(101,231,220,.42),0 0 17px rgba(106,169,255,.18);
  animation:pipPulse 3.2s ease-in-out infinite;
}
.meter i.on::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:2px;
  background:rgba(255,255,255,.38);
  filter:blur(1px);
  animation:pipCore 3.2s ease-in-out infinite;
}
.meter i:nth-child(2),.meter i:nth-child(2)::after{animation-delay:.18s}
.meter i:nth-child(3),.meter i:nth-child(3)::after{animation-delay:.36s}
.meter i:nth-child(4),.meter i:nth-child(4)::after{animation-delay:.54s}
.meter i:nth-child(5),.meter i:nth-child(5)::after{animation-delay:.72s}
.skill:hover .meter i.on{transform:rotate(45deg) scale(1.02)}

@keyframes skillFloatPro{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes skillScanPro{0%,62%{transform:translateX(-50%) rotate(3deg)}100%{transform:translateX(52%) rotate(3deg)}}
@keyframes pipPulse{0%,100%{filter:saturate(.94) brightness(.94);box-shadow:0 0 7px rgba(101,231,220,.28),0 0 14px rgba(106,169,255,.12)}50%{filter:saturate(1.12) brightness(1.14);box-shadow:0 0 13px rgba(101,231,220,.62),0 0 24px rgba(106,169,255,.25)}}
@keyframes pipCore{0%,100%{opacity:.23;transform:scale(.78)}50%{opacity:.72;transform:scale(1)}}

/* Supporting UI picks up the same visual language */
.card,.role,.ai-banner{backdrop-filter:blur(7px)}
.card{border-color:#c7dbe2;box-shadow:0 11px 32px rgba(35,73,88,.08)}
.card:hover{border-color:#a5cbd3;box-shadow:0 17px 42px rgba(33,79,94,.12)}
.strength{background:linear-gradient(145deg,#102d3c,#1b4b5c);border-color:rgba(112,220,214,.13)}
.strength.emphasis{background:linear-gradient(145deg,#164455,#1e6070)}
.section h3:after{box-shadow:0 0 15px rgba(42,167,154,.18)}
.tag{background:rgba(247,252,253,.9)}

/* Profile frame: premium esports-style geometry without looking like a game UI */
.portrait-frame{
  border-color:rgba(119,230,223,.28);
  box-shadow:0 22px 58px rgba(2,24,34,.30),0 0 0 1px rgba(99,223,217,.055) inset;
}
.portrait-frame::before{opacity:.72;filter:saturate(1.05)}
.portrait-status{border-color:rgba(129,237,231,.21);background:rgba(8,33,45,.78)}
.live-dot{box-shadow:0 0 12px rgba(101,231,220,.85)}

@media(prefers-reduced-motion:reduce){
  body::before,body::after,.skill,.skill::after,.meter i.on,.meter i.on::after{animation:none!important}
}


/* ==== CIRCUIT NODES · ELECTRIC USB STYLE ==== */
:root{
  --usbA:#69f0e3;
  --usbB:#66a8ff;
  --usbGlow:rgba(102,168,255,.26);
  --usbGlow2:rgba(105,240,227,.24);
}
body{
  position:relative;
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(65,128,164,.16), transparent 60%),
    radial-gradient(980px 480px at 100% 0%, rgba(42,167,154,.14), transparent 58%),
    linear-gradient(180deg,#eaf2f6 0%,#f6f9fb 40%,#eef4f7 100%) !important;
  overflow-x:hidden;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  background:
    linear-gradient(rgba(21,56,68,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,56,68,.05) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
  opacity:.45;
  animation:gridDrift 36s linear infinite;
}
body::after{
  background:
    radial-gradient(4px 4px at 15% 22%, rgba(105,240,227,.18), transparent 60%),
    radial-gradient(4px 4px at 74% 18%, rgba(102,168,255,.17), transparent 60%),
    radial-gradient(5px 5px at 32% 78%, rgba(105,240,227,.15), transparent 65%),
    radial-gradient(4px 4px at 85% 82%, rgba(102,168,255,.13), transparent 62%);
  animation:ambientPulse 9s ease-in-out infinite;
}
.wrap,.nav{position:relative;z-index:1}
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 18%, rgba(117,184,255,.12), transparent 28%),
    radial-gradient(circle at 18% 0%, rgba(118,240,229,.11), transparent 28%),
    linear-gradient(135deg,#132d39 0,#1e4552 48%,#255868 100%) !important;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,.05) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.035) 95%);
  background-size:26px 26px;
  opacity:.22;
  animation:gridDrift 18s linear infinite reverse;
}
.skill{
  background:linear-gradient(160deg, rgba(12,34,44,.985), rgba(19,49,61,.965)) !important;
  border:1px solid rgba(111,171,192,.18) !important;
  box-shadow:0 14px 34px rgba(17,43,54,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
  min-height:126px !important;
}
.skill::before{
  width:100% !important;height:1px !important;inset:0 0 auto 0 !important;
  background:linear-gradient(90deg, transparent, rgba(105,240,227,.55), rgba(102,168,255,.52), transparent) !important;
}
.skill::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 14%, rgba(105,240,227,.08), transparent 16%),
    linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.035) 62%, transparent 66%);
  animation:skillSheen 5.8s ease-in-out infinite;
}
.skill b{color:#f4fbff !important;letter-spacing:.01em}
.skill small{color:#9fb6c2 !important}
.meter{
  position:relative;
  display:flex !important;
  gap:10px !important;
  align-items:center;
  margin-top:16px !important;
  min-height:30px;
  padding:8px 10px 8px 10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 1px rgba(125,177,194,.08);
  overflow:hidden;
}
.meter::before{
  content:"";
  position:absolute;
  left:16px; right:16px; top:50%; height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(75,121,143,.12), rgba(94,176,195,.54), rgba(92,133,207,.54), rgba(75,121,143,.12));
  box-shadow:0 0 10px rgba(102,168,255,.09);
}
.meter::after{
  content:"";
  position:absolute;
  left:-18%; top:50%; width:24%; height:10px;
  transform:translateY(-50%) skewX(-22deg);
  background:linear-gradient(90deg, transparent, rgba(105,240,227,.0), rgba(105,240,227,.85), rgba(102,168,255,.92), rgba(105,240,227,.0), transparent);
  filter:blur(.3px);
  opacity:.9;
  animation:usbCharge 3.8s ease-in-out infinite;
}
.meter i{
  position:relative;
  flex:1;
  min-width:0;
  height:14px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg, rgba(44,72,88,.75), rgba(28,52,67,.86)) !important;
  border:1px solid rgba(118,153,171,.18);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:visible;
}
.meter i::before{
  content:"";
  position:absolute;
  left:2px; right:2px; top:2px; bottom:2px;
  border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(203,225,233,.22) 0 2px, transparent 2px 5px);
  opacity:.55;
}
.meter i::after{
  content:"";
  position:absolute;
  top:50%; right:-10px; width:10px; height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(104,162,182,.72), rgba(104,162,182,0));
  opacity:.35;
}
.meter i:last-child::after{display:none}
.meter i.on{
  background:linear-gradient(180deg, rgba(101,231,220,.96), rgba(84,126,255,.88)) !important;
  border-color:rgba(225,255,255,.38);
  box-shadow:
    0 0 0 1px rgba(200,255,250,.06),
    0 0 10px rgba(105,240,227,.34),
    0 0 16px rgba(102,168,255,.16),
    inset 0 0 10px rgba(255,255,255,.20);
  animation:usbNodePulse 2.9s ease-in-out infinite;
}
.meter i.on::before{
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.82) 0 2px, rgba(255,255,255,.0) 2px 5px);
  opacity:.88;
}
.meter i.on::after{
  background:linear-gradient(90deg, rgba(105,240,227,.92), rgba(102,168,255,.0));
  opacity:.85;
}
.meter i:nth-child(2), .meter i:nth-child(2).on{animation-delay:-.2s}
.meter i:nth-child(3), .meter i:nth-child(3).on{animation-delay:-.4s}
.meter i:nth-child(4), .meter i:nth-child(4).on{animation-delay:-.6s}
.meter i:nth-child(5), .meter i:nth-child(5).on{animation-delay:-.8s}
.section h3{
  position:relative;
}
.section h3::after{
  background:linear-gradient(90deg,var(--accent), var(--accent2), transparent) !important;
}
@keyframes gridDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,42px,0)}
}
@keyframes ambientPulse{
  0%,100%{opacity:.85;filter:brightness(.98)}
  50%{opacity:1;filter:brightness(1.08)}
}
@keyframes usbCharge{
  0%,12%{left:-24%;opacity:0}
  20%{opacity:.95}
  52%{opacity:1}
  78%{opacity:.75}
  100%{left:112%;opacity:0}
}
@keyframes usbNodePulse{
  0%,100%{transform:translateY(0);filter:brightness(.96)}
  50%{transform:translateY(-1px);filter:brightness(1.18)}
}
@keyframes skillSheen{
  0%,100%{opacity:.56;transform:translateX(0)}
  50%{opacity:1;transform:translateX(2px)}
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .hero::before, .skill::after, .meter::after, .meter i.on{animation:none !important}
}


/* ==== EXPERIENCE COLOR GRADIENTS BY LEVEL ==== */
.meter{--flowA:rgba(105,240,227,.82);--flowB:rgba(102,168,255,.90);}
.meter.level-5{--flowA:rgba(122,245,232,.92);--flowB:rgba(105,171,255,.96)}
.meter.level-4{--flowA:rgba(103,231,220,.88);--flowB:rgba(90,154,240,.92)}
.meter.level-3{--flowA:rgba(78,205,201,.84);--flowB:rgba(82,133,223,.88)}
.meter.level-2{--flowA:rgba(86,176,188,.78);--flowB:rgba(93,114,201,.82)}
.meter.level-1{--flowA:rgba(105,146,173,.70);--flowB:rgba(88,101,170,.76)}
.meter::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,0), var(--flowA), var(--flowB), rgba(255,255,255,0), transparent) !important}
.meter.level-5::before{background:linear-gradient(90deg, rgba(75,121,143,.12), rgba(122,245,232,.68), rgba(105,171,255,.68), rgba(75,121,143,.12)) !important}
.meter.level-4::before{background:linear-gradient(90deg, rgba(75,121,143,.12), rgba(103,231,220,.60), rgba(90,154,240,.62), rgba(75,121,143,.12)) !important}
.meter.level-3::before{background:linear-gradient(90deg, rgba(75,121,143,.12), rgba(78,205,201,.56), rgba(82,133,223,.60), rgba(75,121,143,.12)) !important}
.meter.level-2::before{background:linear-gradient(90deg, rgba(75,121,143,.12), rgba(86,176,188,.48), rgba(93,114,201,.52), rgba(75,121,143,.12)) !important}

.meter.level-5 i.on:nth-child(1){background:linear-gradient(180deg,#7df4e4,#56d6cf) !important}
.meter.level-5 i.on:nth-child(2){background:linear-gradient(180deg,#74f0e0,#4fd0d9) !important}
.meter.level-5 i.on:nth-child(3){background:linear-gradient(180deg,#6debe2,#47c4ea) !important}
.meter.level-5 i.on:nth-child(4){background:linear-gradient(180deg,#6bdef0,#4bacef) !important}
.meter.level-5 i.on:nth-child(5){background:linear-gradient(180deg,#7fd2ff,#618bff) !important}

.meter.level-4 i.on:nth-child(1){background:linear-gradient(180deg,#6de8da,#4fc5c3) !important}
.meter.level-4 i.on:nth-child(2){background:linear-gradient(180deg,#67e2db,#49bfd2) !important}
.meter.level-4 i.on:nth-child(3){background:linear-gradient(180deg,#61d8e2,#4caedb) !important}
.meter.level-4 i.on:nth-child(4){background:linear-gradient(180deg,#6ccdfa,#5a94ea) !important}

.meter.level-3 i.on:nth-child(1){background:linear-gradient(180deg,#56d6ca,#46b2b2) !important}
.meter.level-3 i.on:nth-child(2){background:linear-gradient(180deg,#57ced0,#4f9fc1) !important}
.meter.level-3 i.on:nth-child(3){background:linear-gradient(180deg,#60c4e0,#5a84d0) !important}

.meter.level-2 i.on:nth-child(1){background:linear-gradient(180deg,#5ab7bf,#4f8d9a) !important}
.meter.level-2 i.on:nth-child(2){background:linear-gradient(180deg,#638ecf,#576fba) !important}

.meter.level-1 i.on:nth-child(1){background:linear-gradient(180deg,#7799b4,#687da4) !important}

.meter.level-5 i.on,.meter.level-4 i.on,.meter.level-3 i.on,.meter.level-2 i.on,.meter.level-1 i.on{
  border-color:rgba(229,255,255,.34) !important;
}
.meter.level-5 i.on{box-shadow:0 0 12px rgba(105,240,227,.34),0 0 18px rgba(102,168,255,.18), inset 0 0 10px rgba(255,255,255,.18) !important}
.meter.level-4 i.on{box-shadow:0 0 10px rgba(93,223,215,.28),0 0 14px rgba(90,154,240,.14), inset 0 0 9px rgba(255,255,255,.16) !important}
.meter.level-3 i.on{box-shadow:0 0 8px rgba(78,205,201,.22),0 0 11px rgba(82,133,223,.12), inset 0 0 8px rgba(255,255,255,.12) !important}
.meter.level-2 i.on{box-shadow:0 0 7px rgba(86,176,188,.18),0 0 9px rgba(93,114,201,.10), inset 0 0 7px rgba(255,255,255,.09) !important}
.meter.level-1 i.on{box-shadow:0 0 5px rgba(105,146,173,.14), inset 0 0 6px rgba(255,255,255,.08) !important}


/* ==== STRONGER EXPERIENCE COLOR CODING ==== */
/* Low -> high: graphite, violet, electric blue, cyan, aqua-green */
.meter.level-1{--lvl:#738395;--lvl2:#596777;--glow:rgba(115,131,149,.20)}
.meter.level-2{--lvl:#8a6ff2;--lvl2:#6652c7;--glow:rgba(138,111,242,.28)}
.meter.level-3{--lvl:#4f8dff;--lvl2:#3568db;--glow:rgba(79,141,255,.30)}
.meter.level-4{--lvl:#27cbe5;--lvl2:#159bbd;--glow:rgba(39,203,229,.32)}
.meter.level-5{--lvl:#44e2b6;--lvl2:#16b992;--glow:rgba(68,226,182,.34)}

.meter.level-1::before,.meter.level-2::before,.meter.level-3::before,.meter.level-4::before,.meter.level-5::before{
  background:linear-gradient(90deg, rgba(55,77,91,.14), color-mix(in srgb,var(--lvl) 75%,transparent), color-mix(in srgb,var(--lvl2) 82%,transparent), rgba(55,77,91,.14)) !important;
  box-shadow:0 0 14px var(--glow) !important;
}
.meter.level-1::after,.meter.level-2::after,.meter.level-3::after,.meter.level-4::after,.meter.level-5::after{
  background:linear-gradient(90deg,transparent,transparent,var(--lvl),#ffffff,var(--lvl2),transparent,transparent)!important;
  filter:drop-shadow(0 0 4px var(--lvl));
}
.meter.level-1 i.on,.meter.level-2 i.on,.meter.level-3 i.on,.meter.level-4 i.on,.meter.level-5 i.on{
  background:linear-gradient(180deg,var(--lvl),var(--lvl2))!important;
  border-color:color-mix(in srgb,var(--lvl) 55%,white)!important;
  box-shadow:0 0 11px var(--glow),0 0 20px color-mix(in srgb,var(--lvl) 18%,transparent),inset 0 0 9px rgba(255,255,255,.20)!important;
}
.meter.level-1 i.on::before,.meter.level-2 i.on::before,.meter.level-3 i.on::before,.meter.level-4 i.on::before,.meter.level-5 i.on::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 2px,transparent 2px 5px)!important;
}
.meter.level-1 i.on::after,.meter.level-2 i.on::after,.meter.level-3 i.on::after,.meter.level-4 i.on::after,.meter.level-5 i.on::after{
  background:linear-gradient(90deg,var(--lvl),transparent)!important;
}

/* very subtle card tint so level is obvious at a glance */
.skill.level-1{border-color:rgba(115,131,149,.30)!important;box-shadow:0 14px 34px rgba(17,43,54,.22),inset 0 1px 0 rgba(255,255,255,.03),0 0 0 1px rgba(115,131,149,.04)!important}
.skill.level-2{border-color:rgba(138,111,242,.34)!important;box-shadow:0 14px 34px rgba(17,43,54,.22),0 0 22px rgba(138,111,242,.06)!important}
.skill.level-3{border-color:rgba(79,141,255,.36)!important;box-shadow:0 14px 34px rgba(17,43,54,.22),0 0 24px rgba(79,141,255,.07)!important}
.skill.level-4{border-color:rgba(39,203,229,.38)!important;box-shadow:0 14px 34px rgba(17,43,54,.22),0 0 26px rgba(39,203,229,.08)!important}
.skill.level-5{border-color:rgba(68,226,182,.42)!important;box-shadow:0 14px 34px rgba(17,43,54,.22),0 0 28px rgba(68,226,182,.10)!important}
.skill.level-1::before{background:linear-gradient(90deg,transparent,#738395,transparent)!important}
.skill.level-2::before{background:linear-gradient(90deg,transparent,#8a6ff2,transparent)!important}
.skill.level-3::before{background:linear-gradient(90deg,transparent,#4f8dff,transparent)!important}
.skill.level-4::before{background:linear-gradient(90deg,transparent,#27cbe5,transparent)!important}
.skill.level-5::before{background:linear-gradient(90deg,transparent,#44e2b6,transparent)!important}


/* ==== V4 REFINEMENT: softer energy motion + photo orbit ==== */
.skill{border-color:rgba(116,177,198,.15)!important;box-shadow:0 14px 30px rgba(13,33,42,.18), inset 0 1px 0 rgba(255,255,255,.025)!important}
.skill::after{animation:skillSheenSoft 8.5s ease-in-out infinite!important;opacity:.72}

.meter{
  box-shadow:inset 0 0 0 1px rgba(125,177,194,.06), inset 0 10px 18px rgba(255,255,255,.01)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.007))!important;
}
.meter::before{
  height:1.5px!important;
  opacity:.8;
  box-shadow:0 0 7px rgba(102,168,255,.045)!important;
}
.meter::after{
  height:8px!important;
  opacity:.62!important;
  filter:blur(.6px)!important;
  animation:usbChargeSoft 6.8s ease-in-out infinite!important;
}
.meter i{
  height:13px!important;
  border-radius:4px!important;
  border-color:rgba(122,161,178,.14)!important;
  background:linear-gradient(180deg, rgba(39,62,76,.70), rgba(24,43,57,.83))!important;
}
.meter i::before{opacity:.38!important}
.meter i::after{opacity:.22!important}
.meter i.on{
  animation:usbNodePulseSoft 5.2s ease-in-out infinite!important;
}
.meter.level-5{--flowA:rgba(128,244,233,.80);--flowB:rgba(102,196,255,.85)}
.meter.level-4{--flowA:rgba(112,228,224,.72);--flowB:rgba(101,163,246,.76)}
.meter.level-3{--flowA:rgba(103,205,236,.66);--flowB:rgba(101,131,224,.72)}
.meter.level-2{--flowA:rgba(125,147,225,.58);--flowB:rgba(108,96,205,.64)}
.meter.level-1{--flowA:rgba(126,151,175,.48);--flowB:rgba(111,126,171,.52)}

.meter.level-5 i.on:nth-child(1){background:linear-gradient(180deg,#85f5e8,#63dbd2)!important}
.meter.level-5 i.on:nth-child(2){background:linear-gradient(180deg,#7cf2ea,#59d6e0)!important}
.meter.level-5 i.on:nth-child(3){background:linear-gradient(180deg,#76e6ef,#57c4ee)!important}
.meter.level-5 i.on:nth-child(4){background:linear-gradient(180deg,#72d6f7,#58acee)!important}
.meter.level-5 i.on:nth-child(5){background:linear-gradient(180deg,#82c9ff,#648dff)!important}
.meter.level-4 i.on:nth-child(1){background:linear-gradient(180deg,#78ebe1,#57cbc6)!important}
.meter.level-4 i.on:nth-child(2){background:linear-gradient(180deg,#70e6e3,#54c4d4)!important}
.meter.level-4 i.on:nth-child(3){background:linear-gradient(180deg,#6ad8ea,#57b0dd)!important}
.meter.level-4 i.on:nth-child(4){background:linear-gradient(180deg,#71c6f5,#608fe9)!important}
.meter.level-3 i.on:nth-child(1){background:linear-gradient(180deg,#72d2ea,#5eb0cf)!important}
.meter.level-3 i.on:nth-child(2){background:linear-gradient(180deg,#6fbeea,#5d9bcf)!important}
.meter.level-3 i.on:nth-child(3){background:linear-gradient(180deg,#73aae8,#627fd0)!important}
.meter.level-2 i.on:nth-child(1){background:linear-gradient(180deg,#889de7,#727fca)!important}
.meter.level-2 i.on:nth-child(2){background:linear-gradient(180deg,#7e8fe5,#6d67cd)!important}
.meter.level-1 i.on:nth-child(1){background:linear-gradient(180deg,#829ab5,#6f819f)!important}

.meter.level-5 i.on{box-shadow:0 0 8px rgba(118,241,231,.24),0 0 12px rgba(102,196,255,.10), inset 0 0 9px rgba(255,255,255,.15)!important}
.meter.level-4 i.on{box-shadow:0 0 7px rgba(112,228,224,.19),0 0 10px rgba(101,163,246,.08), inset 0 0 8px rgba(255,255,255,.13)!important}
.meter.level-3 i.on{box-shadow:0 0 6px rgba(103,205,236,.17),0 0 8px rgba(101,131,224,.07), inset 0 0 7px rgba(255,255,255,.11)!important}
.meter.level-2 i.on{box-shadow:0 0 5px rgba(125,147,225,.14),0 0 8px rgba(108,96,205,.06), inset 0 0 7px rgba(255,255,255,.09)!important}
.meter.level-1 i.on{box-shadow:0 0 4px rgba(126,151,175,.12), inset 0 0 6px rgba(255,255,255,.07)!important}

.portrait-stage{
  position:relative;
  isolation:isolate;
}
.portrait-stage::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:36px 36px 58px 36px;
  background:conic-gradient(from 0deg,
    transparent 0 18%,
    rgba(126,245,233,.00) 18% 28%,
    rgba(126,245,233,.38) 28% 33%,
    rgba(100,190,255,.28) 33% 38%,
    transparent 38% 66%,
    rgba(100,190,255,.24) 66% 71%,
    rgba(126,245,233,.16) 71% 75%,
    transparent 75% 100%);
  filter:blur(1.2px);
  opacity:.72;
  z-index:-1;
  animation:portraitOrbit 20s linear infinite;
}
.portrait-stage::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:40px 40px 62px 40px;
  background:radial-gradient(circle at 30% 18%, rgba(126,245,233,.15), transparent 24%), radial-gradient(circle at 70% 76%, rgba(100,190,255,.13), transparent 26%);
  filter:blur(12px);
  opacity:.62;
  z-index:-2;
  animation:portraitAuraDrift 12s ease-in-out infinite alternate;
}
.portrait-frame{
  box-shadow:0 22px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.portrait-frame::before{animation:frameGlowSoft 10s ease-in-out infinite alternate!important;opacity:.9}
.portrait-frame::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)!important;
  animation:portraitScanSoft 11s ease-in-out infinite!important;
  opacity:.7;
}
.portrait-frame .profile-photo{
  animation:photoBreathSoft 11s ease-in-out infinite!important;
}
.portrait-status .live-dot{animation:statusPulseSoft 4s ease-out infinite!important}

@keyframes usbChargeSoft{
  0%,15%{left:-24%;opacity:0}
  24%{opacity:.52}
  48%{opacity:.68}
  72%{opacity:.48}
  100%{left:108%;opacity:0}
}
@keyframes usbNodePulseSoft{
  0%,100%{transform:translateY(0);filter:brightness(.98)}
  50%{transform:translateY(-.5px);filter:brightness(1.07)}
}
@keyframes skillSheenSoft{
  0%,100%{opacity:.44;transform:translateX(0)}
  50%{opacity:.72;transform:translateX(1px)}
}
@keyframes portraitOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes portraitAuraDrift{from{transform:translate3d(-2px,-1px,0) scale(1)}to{transform:translate3d(3px,2px,0) scale(1.03)}}
@keyframes frameGlowSoft{0%,100%{opacity:.72;filter:brightness(.94)}50%{opacity:.96;filter:brightness(1.05)}}
@keyframes portraitScanSoft{0%,62%{left:-34%;opacity:0}70%{opacity:.5}100%{left:112%;opacity:0}}
@keyframes photoBreathSoft{0%,100%{transform:scale(1.002)}50%{transform:scale(1.009)}}
@keyframes statusPulseSoft{0%{box-shadow:0 0 0 0 rgba(143,229,220,.26)}70%{box-shadow:0 0 0 9px rgba(143,229,220,0)}100%{box-shadow:0 0 0 0 rgba(143,229,220,0)}}

@media (prefers-reduced-motion: reduce){
  .skill::after,.meter::after,.meter i.on,.portrait-stage::before,.portrait-stage::after,.portrait-frame::before,.portrait-frame::after,.portrait-frame .profile-photo,.portrait-status .live-dot{animation:none!important}
}


/* ==== V5: electric contour around photo + skill cards ==== */
.portrait-stage::before,
.portrait-stage::after{
  display:none !important;
  content:none !important;
}
.portrait-frame{
  position:relative;
  overflow:visible !important;
}
.portrait-frame::before{
  content:"" !important;
  position:absolute !important;
  inset:-6px !important;
  padding:0 !important;
  border-radius:32px 32px 54px 32px !important;
  background:
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(125,245,235,.0) 8% 10%,
      rgba(125,245,235,.92) 10% 17%,
      transparent 17% 28%,
      rgba(102,190,255,.82) 28% 35%,
      transparent 35% 50%,
      rgba(125,245,235,.62) 50% 58%,
      transparent 58% 100%) top/240% 2px no-repeat,
    linear-gradient(90deg,
      transparent 0 14%,
      rgba(102,190,255,.84) 14% 22%,
      transparent 22% 42%,
      rgba(125,245,235,.90) 42% 49%,
      transparent 49% 66%,
      rgba(102,190,255,.64) 66% 73%,
      transparent 73% 100%) bottom/240% 2px no-repeat,
    linear-gradient(180deg,
      transparent 0 12%,
      rgba(125,245,235,.92) 12% 20%,
      transparent 20% 38%,
      rgba(102,190,255,.80) 38% 46%,
      transparent 46% 64%,
      rgba(125,245,235,.60) 64% 72%,
      transparent 72% 100%) left/2px 240% no-repeat,
    linear-gradient(180deg,
      transparent 0 8%,
      rgba(102,190,255,.72) 8% 16%,
      transparent 16% 32%,
      rgba(125,245,235,.88) 32% 40%,
      transparent 40% 70%,
      rgba(102,190,255,.56) 70% 78%,
      transparent 78% 100%) right/2px 240% no-repeat,
    radial-gradient(circle at left 12px top 12px, rgba(125,245,235,.95) 0 2px, transparent 3px),
    radial-gradient(circle at right 14px top 14px, rgba(102,190,255,.92) 0 2px, transparent 3px),
    radial-gradient(circle at left 14px bottom 14px, rgba(102,190,255,.82) 0 2px, transparent 3px),
    radial-gradient(circle at right 16px bottom 16px, rgba(125,245,235,.72) 0 2px, transparent 3px);
  filter:drop-shadow(0 0 7px rgba(125,245,235,.20)) drop-shadow(0 0 12px rgba(102,190,255,.12));
  animation:contourFlowX 10s linear infinite, contourGlow 5.5s ease-in-out infinite !important;
  -webkit-mask:none !important;
  mask:none !important;
}
.portrait-frame::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  opacity:.55 !important;
  animation:portraitScanContour 12s ease-in-out infinite !important;
}
.portrait-frame .profile-photo{
  animation:photoBreathSoft 11s ease-in-out infinite !important;
}

.skill{
  --c1:#79efe3;
  --c2:#65a8ff;
  overflow:visible !important;
}
.skill.level-5{ --c1:#89f6ea; --c2:#67b4ff; }
.skill.level-4{ --c1:#73ece2; --c2:#64a2ff; }
.skill.level-3{ --c1:#64cfee; --c2:#6b88f0; }
.skill.level-2{ --c1:#7b96eb; --c2:#6d6ecf; }
.skill.level-1{ --c1:#8fa7bb; --c2:#6f83a0; }
.skill::before{
  content:"" !important;
  position:absolute !important;
  inset:-4px !important;
  width:auto !important;
  height:auto !important;
  border-radius:20px !important;
  background:
    linear-gradient(90deg,
      transparent 0 10%,
      var(--c1) 10% 19%,
      transparent 19% 36%,
      var(--c2) 36% 45%,
      transparent 45% 62%,
      var(--c1) 62% 70%,
      transparent 70% 100%) top/240% 2px no-repeat,
    linear-gradient(90deg,
      transparent 0 16%,
      var(--c2) 16% 24%,
      transparent 24% 48%,
      var(--c1) 48% 57%,
      transparent 57% 73%,
      var(--c2) 73% 80%,
      transparent 80% 100%) bottom/240% 2px no-repeat,
    linear-gradient(180deg,
      transparent 0 10%,
      var(--c1) 10% 18%,
      transparent 18% 38%,
      var(--c2) 38% 46%,
      transparent 46% 68%,
      var(--c1) 68% 76%,
      transparent 76% 100%) left/2px 240% no-repeat,
    linear-gradient(180deg,
      transparent 0 14%,
      var(--c2) 14% 23%,
      transparent 23% 44%,
      var(--c1) 44% 53%,
      transparent 53% 72%,
      var(--c2) 72% 80%,
      transparent 80% 100%) right/2px 240% no-repeat,
    radial-gradient(circle at left 10px top 10px, var(--c1) 0 1.8px, transparent 3px),
    radial-gradient(circle at right 12px top 12px, var(--c2) 0 1.8px, transparent 3px),
    radial-gradient(circle at left 12px bottom 12px, var(--c2) 0 1.8px, transparent 3px),
    radial-gradient(circle at right 14px bottom 14px, var(--c1) 0 1.8px, transparent 3px);
  opacity:.96;
  pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(105,240,227,.12));
  animation:contourFlowX 11.5s linear infinite, contourGlow 5.6s ease-in-out infinite;
}
.skill::after{
  background:
    radial-gradient(circle at 18% 14%, rgba(121,239,227,.08), transparent 20%),
    radial-gradient(circle at 92% 88%, rgba(101,168,255,.07), transparent 22%) !important;
  animation:skillEnergySoft 7s ease-in-out infinite !important;
}
.skill .meter::before{
  background:linear-gradient(90deg, rgba(75,121,143,.10), var(--c1), var(--c2), rgba(75,121,143,.10)) !important;
  opacity:.7;
}
.skill .meter::after{
  background:linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent) !important;
  opacity:.45 !important;
}

@keyframes contourFlowX{
  0%{background-position:0% 0,100% 100%,0% 0,100% 100%,0 0,100% 0,0 100%,100% 100%}
  100%{background-position:100% 0,0% 100%,0% 100%,100% 0,0 0,100% 0,0 100%,100% 100%}
}
@keyframes contourGlow{
  0%,100%{opacity:.76;filter:drop-shadow(0 0 4px rgba(125,245,235,.12)) drop-shadow(0 0 8px rgba(102,190,255,.08))}
  50%{opacity:1;filter:drop-shadow(0 0 7px rgba(125,245,235,.20)) drop-shadow(0 0 12px rgba(102,190,255,.13))}
}
@keyframes portraitScanContour{
  0%,68%{left:-32%;opacity:0}
  76%{opacity:.35}
  100%{left:112%;opacity:0}
}
@keyframes skillEnergySoft{
  0%,100%{opacity:.52;transform:translateY(0)}
  50%{opacity:.86;transform:translateY(-1px)}
}


/* ==== V6: elegant skill panels + electric bolt traversal ==== */
.skill{
  background:
    linear-gradient(160deg, rgba(14,31,40,.985), rgba(18,40,51,.975) 52%, rgba(22,49,61,.97)) !important;
  border:1px solid rgba(135,171,188,.14) !important;
  box-shadow:
    0 14px 30px rgba(7,22,30,.22),
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 -14px 24px rgba(0,0,0,.10) !important;
}
.skill b{color:#f2fbff !important}
.skill small{color:#a8bcc6 !important}
.skill::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:14px;
  background:
    radial-gradient(circle at 14% 16%, rgba(122,244,235,.055), transparent 18%),
    radial-gradient(circle at 84% 78%, rgba(104,176,255,.045), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006));
  opacity:.95;
  pointer-events:none;
  animation:skillPanelBreath 6.5s ease-in-out infinite !important;
}

/* Electric circuit contour for photo and skills */
.portrait-frame::before,
.skill::before{
  background-image:
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(127,245,235,.0) 8% 10%,
      rgba(127,245,235,.95) 10% 17%,
      transparent 17% 28%,
      rgba(104,190,255,.88) 28% 35%,
      transparent 35% 50%,
      rgba(127,245,235,.72) 50% 58%,
      transparent 58% 100%),
    linear-gradient(90deg,
      transparent 0 14%,
      rgba(104,190,255,.90) 14% 22%,
      transparent 22% 42%,
      rgba(127,245,235,.94) 42% 49%,
      transparent 49% 66%,
      rgba(104,190,255,.74) 66% 73%,
      transparent 73% 100%),
    linear-gradient(180deg,
      transparent 0 12%,
      rgba(127,245,235,.95) 12% 20%,
      transparent 20% 38%,
      rgba(104,190,255,.88) 38% 46%,
      transparent 46% 64%,
      rgba(127,245,235,.72) 64% 72%,
      transparent 72% 100%),
    linear-gradient(180deg,
      transparent 0 8%,
      rgba(104,190,255,.82) 8% 16%,
      transparent 16% 32%,
      rgba(127,245,235,.92) 32% 40%,
      transparent 40% 70%,
      rgba(104,190,255,.66) 70% 78%,
      transparent 78% 100%),
    radial-gradient(circle at left 12px top 12px, rgba(127,245,235,.98) 0 2px, transparent 3px),
    radial-gradient(circle at right 14px top 14px, rgba(104,190,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at left 14px bottom 14px, rgba(104,190,255,.88) 0 2px, transparent 3px),
    radial-gradient(circle at right 16px bottom 16px, rgba(127,245,235,.80) 0 2px, transparent 3px) !important;
}
.portrait-frame::before{
  animation:contourFlowX 12s linear infinite, contourGlow 5.6s ease-in-out infinite !important;
}
.skill::before{
  animation:contourFlowX 13.5s linear infinite, contourGlow 6.2s ease-in-out infinite !important;
}

/* Electric bolt that runs across the contour */
.portrait-frame .bolt-run,
.skill .bolt-run{
  position:absolute;
  inset:-6px;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  z-index:3;
}
.skill .bolt-run{inset:-4px;border-radius:20px}
.portrait-frame .bolt-run::before,
.skill .bolt-run::before{
  content:"";
  position:absolute;
  width:68px;
  height:10px;
  opacity:.95;
  filter:drop-shadow(0 0 4px rgba(141,255,247,.72)) drop-shadow(0 0 8px rgba(91,160,255,.40));
  background:
    polygon(0 45%,16% 36%,26% 48%,40% 16%,50% 48%,63% 38%,77% 58%,100% 50%);
}
/* Fallback using clip-path lightning shape */
.portrait-frame .bolt-run::before,
.skill .bolt-run::before{
  background:linear-gradient(90deg, rgba(168,255,249,.0), rgba(180,255,251,.95) 18%, rgba(109,212,255,.98) 52%, rgba(135,255,240,.96) 80%, rgba(168,255,249,0));
  clip-path:polygon(0 55%,13% 40%,26% 53%,40% 18%,51% 52%,66% 36%,79% 64%,100% 48%,100% 64%,83% 76%,67% 52%,53% 86%,39% 46%,26% 66%,12% 50%,0 67%);
}
.portrait-frame .bolt-run::after,
.skill .bolt-run::after{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,255,255,.95) 0 14%, rgba(122,244,235,.88) 24%, rgba(96,152,255,.0) 72%);
  filter:blur(.6px);
}

/* Photo spark path */
.portrait-frame .bolt-run::before{animation:photoBoltPath 7.8s linear infinite}
.portrait-frame .bolt-run::after{animation:photoBoltGlow 7.8s linear infinite}
/* Skills spark path */
.skill .bolt-run::before{animation:skillBoltPath 8.7s linear infinite}
.skill .bolt-run::after{animation:skillBoltGlow 8.7s linear infinite}

/* Skills internal meter stays elegant and subordinate */
.meter{
  background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.005)) !important;
  box-shadow:inset 0 0 0 1px rgba(144,182,196,.05), inset 0 8px 14px rgba(255,255,255,.01) !important;
}
.meter::after{opacity:.28 !important; filter:blur(.7px) !important}
.meter i{border-color:rgba(135,171,188,.12) !important}

@keyframes skillPanelBreath{
  0%,100%{opacity:.82;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-1px)}
}

/* top -> right -> bottom -> left path around rounded rectangle */
@keyframes photoBoltPath{
  0%{transform:translate(8px,-1px) rotate(0deg)}
  23%{transform:translate(calc(100% - 78px),-1px) rotate(0deg)}
  25%{transform:translate(calc(100% - 40px),12px) rotate(90deg)}
  48%{transform:translate(calc(100% - 40px),calc(100% - 78px)) rotate(90deg)}
  50%{transform:translate(calc(100% - 78px),calc(100% - 12px)) rotate(180deg)}
  73%{transform:translate(10px,calc(100% - 12px)) rotate(180deg)}
  75%{transform:translate(-8px,calc(100% - 40px)) rotate(270deg)}
  98%,100%{transform:translate(-8px,16px) rotate(270deg)}
}
@keyframes photoBoltGlow{
  0%{transform:translate(28px,-6px)}
  23%{transform:translate(calc(100% - 32px),-6px)}
  25%{transform:translate(calc(100% - 16px),28px)}
  48%{transform:translate(calc(100% - 16px),calc(100% - 32px))}
  50%{transform:translate(calc(100% - 32px),calc(100% - 16px))}
  73%{transform:translate(28px,calc(100% - 16px))}
  75%{transform:translate(-8px,calc(100% - 32px))}
  98%,100%{transform:translate(-8px,28px)}
}
@keyframes skillBoltPath{
  0%{transform:translate(8px,-1px) rotate(0deg)}
  23%{transform:translate(calc(100% - 78px),-1px) rotate(0deg)}
  25%{transform:translate(calc(100% - 42px),10px) rotate(90deg)}
  48%{transform:translate(calc(100% - 42px),calc(100% - 74px)) rotate(90deg)}
  50%{transform:translate(calc(100% - 78px),calc(100% - 10px)) rotate(180deg)}
  73%{transform:translate(8px,calc(100% - 10px)) rotate(180deg)}
  75%{transform:translate(-8px,calc(100% - 30px)) rotate(270deg)}
  98%,100%{transform:translate(-8px,14px) rotate(270deg)}
}
@keyframes skillBoltGlow{
  0%{transform:translate(28px,-6px)}
  23%{transform:translate(calc(100% - 30px),-6px)}
  25%{transform:translate(calc(100% - 16px),24px)}
  48%{transform:translate(calc(100% - 16px),calc(100% - 30px))}
  50%{transform:translate(calc(100% - 30px),calc(100% - 16px))}
  73%{transform:translate(28px,calc(100% - 16px))}
  75%{transform:translate(-8px,calc(100% - 30px))}
  98%,100%{transform:translate(-8px,24px)}
}

@media (prefers-reduced-motion: reduce){
  .portrait-frame .bolt-run::before,.portrait-frame .bolt-run::after,.skill .bolt-run::before,.skill .bolt-run::after,.skill::after{animation:none !important}
}


/* ==== V7: revert skills to V3 look; remove electric bolt ==== */
.bolt-run{display:none !important}

/* Remove contour-electric additions introduced after V3 */
.portrait-frame::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  padding:1px !important;
  border-radius:inherit !important;
  background:linear-gradient(120deg,rgba(143,229,220,.75),rgba(255,255,255,.16),rgba(120,185,229,.72)) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  animation:frameGlow 7s ease-in-out infinite alternate !important;
  filter:none !important;
}
.portrait-frame::after{
  content:"" !important;
  position:absolute !important;
  left:-30% !important;
  top:-50% !important;
  width:38% !important;
  height:190% !important;
  transform:rotate(18deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent) !important;
  animation:portraitScan 8.5s ease-in-out infinite !important;
  opacity:1 !important;
}
.portrait-stage::before,
.portrait-stage::after{
  display:none !important;
  content:none !important;
}

/* Skills: restore V3 background and panel treatment */
.skill{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#ffffff,#edf5f7) !important;
  border:1px solid #c7dce3 !important;
  border-radius:18px !important;
  padding:18px !important;
  min-height:108px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  box-shadow:0 10px 30px rgba(30,75,91,.08) !important;
}
.skill::before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:5px !important;
  height:auto !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,var(--accent),var(--accent2)) !important;
  filter:none !important;
  animation:none !important;
}
.skill::after{
  display:none !important;
  content:none !important;
}
.skill b{font-size:15px !important;color:var(--ink) !important;padding-left:2px !important}
.skill small{color:var(--muted) !important;font-size:11px !important;text-transform:uppercase !important;letter-spacing:.06em !important}

/* Keep the USB-style level indicators from V3, without extra contour effects */
.meter{
  position:relative !important;
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  margin-top:16px !important;
  min-height:30px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)) !important;
  box-shadow:inset 0 0 0 1px rgba(125,177,194,.08) !important;
  overflow:hidden !important;
}
.meter::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:50% !important;
  height:2px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,rgba(75,121,143,.12),rgba(94,176,195,.54),rgba(92,133,207,.54),rgba(75,121,143,.12)) !important;
  box-shadow:0 0 10px rgba(102,168,255,.09) !important;
  opacity:1 !important;
}
.meter::after{
  content:"" !important;
  position:absolute !important;
  left:-18% !important;
  top:50% !important;
  width:24% !important;
  height:10px !important;
  transform:translateY(-50%) skewX(-22deg) !important;
  background:linear-gradient(90deg,transparent,rgba(105,240,227,0),rgba(105,240,227,.85),rgba(102,168,255,.92),rgba(105,240,227,0),transparent) !important;
  filter:blur(.3px) !important;
  opacity:.9 !important;
  animation:usbCharge 3.8s ease-in-out infinite !important;
}
.meter i{
  position:relative !important;
  flex:1 !important;
  min-width:0 !important;
  height:14px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(44,72,88,.75),rgba(28,52,67,.86)) !important;
  border:1px solid rgba(118,153,171,.18) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:visible !important;
}
.meter i::before{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  right:2px !important;
  top:2px !important;
  bottom:2px !important;
  border-radius:2px !important;
  background:repeating-linear-gradient(90deg,rgba(203,225,233,.22) 0 2px,transparent 2px 5px) !important;
  opacity:.55 !important;
}
.meter i::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  right:-10px !important;
  width:10px !important;
  height:2px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,rgba(104,162,182,.72),rgba(104,162,182,0)) !important;
  opacity:.35 !important;
}
.meter i:last-child::after{display:none !important}
.meter i.on{
  border-color:rgba(225,255,255,.38) !important;
  animation:usbNodePulse 2.9s ease-in-out infinite !important;
}
.meter i.on::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.82) 0 2px,rgba(255,255,255,0) 2px 5px) !important;
  opacity:.88 !important;
}
.meter i.on::after{
  background:linear-gradient(90deg,rgba(105,240,227,.92),rgba(102,168,255,0)) !important;
  opacity:.85 !important;
}


/* ==== V8: elegant skill cards + soft electric impulse through USB chips ==== */
.skill{
  background:linear-gradient(160deg,rgba(18,42,53,.985) 0%,rgba(20,47,59,.975) 55%,rgba(24,53,66,.97) 100%) !important;
  border:1px solid rgba(122,169,188,.18) !important;
  box-shadow:
    0 14px 34px rgba(14,34,44,.18),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -18px 28px rgba(5,20,28,.10) !important;
  overflow:hidden !important;
}
.skill::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  background:
    radial-gradient(circle at 12% 8%,rgba(115,233,225,.07),transparent 24%),
    radial-gradient(circle at 92% 92%,rgba(100,162,255,.055),transparent 28%),
    linear-gradient(125deg,transparent 0 68%,rgba(255,255,255,.018) 72%,transparent 76%) !important;
  pointer-events:none;
  opacity:.85;
}
.skill b{color:#f2fbff !important;font-weight:700}
.skill small{color:#9eb7c2 !important}
.skill:hover{
  transform:translateY(-2px);
  border-color:rgba(126,205,216,.24) !important;
  box-shadow:0 18px 38px rgba(14,34,44,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* meter: USB-like chips */
.meter{
  position:relative !important;
  display:flex !important;
  gap:8px !important;
  margin-top:15px !important;
  padding:8px 9px !important;
  min-height:30px !important;
  border-radius:12px !important;
  background:rgba(5,21,29,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(137,184,199,.055) !important;
  overflow:hidden !important;
}
.meter::before{
  content:"" !important;
  position:absolute !important;
  left:13px !important; right:13px !important; top:50% !important;
  height:1px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,rgba(88,136,153,.10),var(--flowA),var(--flowB),rgba(88,136,153,.10)) !important;
  opacity:.36 !important;
  box-shadow:none !important;
}
.meter::after{display:none !important}
.meter i{
  position:relative !important;
  z-index:1 !important;
  flex:1 !important;
  min-width:0 !important;
  height:14px !important;
  border-radius:4px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(38,62,75,.96),rgba(25,47,60,.98)) !important;
  border:1px solid rgba(132,168,183,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.20) !important;
  animation:none !important;
}
.meter i::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:2px !important;
  background:repeating-linear-gradient(90deg,rgba(211,232,239,.18) 0 2px,transparent 2px 5px) !important;
  opacity:.46 !important;
}
.meter i::after{
  content:"" !important;
  position:absolute !important;
  top:2px !important;
  left:-55% !important;
  width:54% !important;
  height:10px !important;
  border-radius:2px !important;
  opacity:0 !important;
  background:linear-gradient(90deg,transparent,rgba(215,255,252,.72) 20%,rgba(112,243,233,.98) 45%,rgba(93,177,255,.94) 70%,transparent) !important;
  clip-path:polygon(0 58%,14% 35%,26% 56%,39% 18%,51% 56%,65% 37%,78% 68%,100% 47%,100% 66%,82% 82%,67% 56%,52% 88%,38% 48%,25% 70%,12% 50%,0 72%) !important;
  filter:drop-shadow(0 0 3px rgba(132,248,240,.55)) drop-shadow(0 0 5px rgba(93,177,255,.25)) !important;
}

/* Active chip colors by experience level */
.meter.level-5 i.on{background:linear-gradient(180deg,#65d8cf,#426f9a) !important;border-color:rgba(150,240,235,.28) !important}
.meter.level-4 i.on{background:linear-gradient(180deg,#56c8ca,#466d9f) !important;border-color:rgba(130,219,224,.25) !important}
.meter.level-3 i.on{background:linear-gradient(180deg,#4da8c7,#4c669f) !important;border-color:rgba(119,189,221,.23) !important}
.meter.level-2 i.on{background:linear-gradient(180deg,#637fb8,#5f5d9e) !important;border-color:rgba(144,154,218,.21) !important}
.meter.level-1 i.on{background:linear-gradient(180deg,#6f8798,#5f6d83) !important;border-color:rgba(148,170,183,.18) !important}

.meter i.on{
  box-shadow:0 0 6px rgba(103,217,210,.12),inset 0 0 8px rgba(255,255,255,.065) !important;
}

/* electric impulse crosses each active chip in sequence */
.meter i.on::after{
  animation:chipImpulse 5.4s cubic-bezier(.2,.72,.25,1) infinite !important;
}
.meter i.on:nth-child(1)::after{animation-delay:0s !important}
.meter i.on:nth-child(2)::after{animation-delay:.28s !important}
.meter i.on:nth-child(3)::after{animation-delay:.56s !important}
.meter i.on:nth-child(4)::after{animation-delay:.84s !important}
.meter i.on:nth-child(5)::after{animation-delay:1.12s !important}

/* small residual glow follows the impulse */
.meter i.on:nth-child(1){animation:chipAfterglow 5.4s ease-in-out infinite 0s !important}
.meter i.on:nth-child(2){animation:chipAfterglow 5.4s ease-in-out infinite .28s !important}
.meter i.on:nth-child(3){animation:chipAfterglow 5.4s ease-in-out infinite .56s !important}
.meter i.on:nth-child(4){animation:chipAfterglow 5.4s ease-in-out infinite .84s !important}
.meter i.on:nth-child(5){animation:chipAfterglow 5.4s ease-in-out infinite 1.12s !important}

@keyframes chipImpulse{
  0%,10%{left:-58%;opacity:0}
  13%{opacity:.28}
  18%{opacity:.88}
  28%{left:102%;opacity:.78}
  33%,100%{left:118%;opacity:0}
}
@keyframes chipAfterglow{
  0%,12%,34%,100%{filter:brightness(1);box-shadow:0 0 6px rgba(103,217,210,.10),inset 0 0 8px rgba(255,255,255,.055)}
  20%{filter:brightness(1.13);box-shadow:0 0 9px rgba(116,235,226,.20),0 0 14px rgba(92,163,255,.08),inset 0 0 9px rgba(255,255,255,.085)}
}

@media (prefers-reduced-motion: reduce){
  .meter i.on::after,.meter i.on{animation:none !important}
}


/* ==== V9 OVERRIDE: solid elegant skill panels + clear electric impulse ==== */
.skill{
  background:#122a35 !important;
  background-image:none !important;
  border:1px solid rgba(126,165,182,.18) !important;
  box-shadow:
    0 14px 34px rgba(11,29,38,.20),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -10px 18px rgba(0,0,0,.08) !important;
}
.skill::before{
  background:none !important;
  opacity:0 !important;
}
.skill::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(118,235,228,.05), transparent 18%),
    radial-gradient(circle at 88% 84%, rgba(104,170,255,.045), transparent 20%) !important;
  opacity:1 !important;
}
.skill b{color:#f5fbff !important;position:relative;z-index:2}
.skill small{color:#9eb4bf !important;position:relative;z-index:2}

.meter{
  position:relative !important;
  background:rgba(8,22,29,.38) !important;
  box-shadow:inset 0 0 0 1px rgba(133,176,193,.08) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  z-index:2;
}
.meter::before{
  content:"" !important;
  position:absolute !important;
  left:13px !important; right:13px !important; top:50% !important;
  height:1px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg, rgba(94,140,156,.10), rgba(110,228,220,.48), rgba(102,168,255,.48), rgba(94,140,156,.10)) !important;
  opacity:.42 !important;
}
.meter::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:-20% !important;
  top:50% !important;
  width:18% !important;
  height:6px !important;
  transform:translateY(-50%) skewX(-18deg) !important;
  background:linear-gradient(90deg, transparent, rgba(186,255,250,.0), rgba(146,246,238,.95), rgba(112,195,255,.98), rgba(146,246,238,.0), transparent) !important;
  filter:blur(.55px) !important;
  opacity:.78 !important;
  animation:mainImpulse 4.9s linear infinite !important;
}
.meter i{
  position:relative !important;
  height:14px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg, rgba(42,69,82,.74), rgba(26,49,62,.86)) !important;
  border:1px solid rgba(119,152,167,.16) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
}
.meter i::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:2px !important;
  background:repeating-linear-gradient(90deg, rgba(203,225,233,.20) 0 2px, transparent 2px 5px) !important;
  opacity:.5 !important;
}
.meter i::after{
  content:"" !important;
  position:absolute !important;
  top:1px !important;
  left:-140% !important;
  width:120% !important;
  height:calc(100% - 2px) !important;
  border-radius:3px !important;
  background:linear-gradient(90deg, transparent, rgba(230,255,255,.0), rgba(214,255,252,.95), rgba(112,196,255,.98), rgba(214,255,252,.0), transparent) !important;
  filter:blur(.25px) !important;
  opacity:0 !important;
}
.meter i.on{
  background:linear-gradient(180deg, rgba(108,231,223,.96), rgba(87,140,255,.88)) !important;
  border-color:rgba(228,255,255,.34) !important;
  box-shadow:
    0 0 0 1px rgba(201,255,250,.05),
    0 0 9px rgba(104,233,223,.26),
    0 0 14px rgba(95,154,255,.12),
    inset 0 0 9px rgba(255,255,255,.17) !important;
}
.meter i.on::before{
  opacity:.74 !important;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.76) 0 2px, rgba(255,255,255,0) 2px 5px) !important;
}
/* per-chip electric impulse */
.meter i.on::after{
  opacity:1 !important;
  animation:chipImpulse 2.9s linear infinite !important;
}
.meter i.on:nth-child(1)::after{animation-delay:0s !important}
.meter i.on:nth-child(2)::after{animation-delay:.16s !important}
.meter i.on:nth-child(3)::after{animation-delay:.32s !important}
.meter i.on:nth-child(4)::after{animation-delay:.48s !important}
.meter i.on:nth-child(5)::after{animation-delay:.64s !important}

@keyframes mainImpulse{
  0%,12%{left:-22%;opacity:0}
  18%{opacity:.55}
  48%{opacity:.82}
  78%{opacity:.55}
  100%{left:108%;opacity:0}
}
@keyframes chipImpulse{
  0%,16%{left:-140%;opacity:0}
  24%{opacity:.75}
  46%{opacity:1}
  66%{opacity:.55}
  100%{left:120%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .meter::after,.meter i.on::after{animation:none !important}
}


/* ==== V10 OVERRIDE: visible impulse alternative ==== */
.skill{
  background:#122a35 !important;
  border:1px solid rgba(126,165,182,.18) !important;
  box-shadow:
    0 14px 34px rgba(11,29,38,.20),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -10px 18px rgba(0,0,0,.08) !important;
}
.skill::before{background:none !important; opacity:0 !important; content:none !important}
.skill::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(118,235,228,.045), transparent 18%),
    radial-gradient(circle at 88% 84%, rgba(104,170,255,.035), transparent 20%) !important;
  pointer-events:none !important;
}
.skill b{color:#f5fbff !important;position:relative;z-index:2}
.skill small{color:#9eb4bf !important;position:relative;z-index:2}

.meter{
  position:relative !important;
  background:rgba(8,22,29,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(133,176,193,.08) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  z-index:2;
  padding:8px 9px !important;
}
/* base conductor */
.meter::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important; right:16px !important; top:50% !important;
  height:2px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg, rgba(85,125,142,.14), rgba(96,170,200,.42), rgba(88,150,255,.42), rgba(85,125,142,.14)) !important;
  opacity:.72 !important;
  border-radius:999px !important;
}
/* visible traveling spark across whole meter */
.meter::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:50% !important;
  left:10px !important;
  width:12px !important;
  height:12px !important;
  margin-top:-6px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(232,255,255,.98) 0 18%, rgba(126,244,236,.98) 28%, rgba(99,179,255,.94) 58%, rgba(99,179,255,0) 76%) !important;
  filter:blur(.25px) drop-shadow(0 0 6px rgba(126,244,236,.62)) drop-shadow(0 0 11px rgba(99,179,255,.38)) !important;
  opacity:.95 !important;
  animation:meterSparkTravel 3.6s linear infinite !important;
}
.meter i{
  position:relative !important;
  height:14px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg, rgba(42,69,82,.74), rgba(26,49,62,.86)) !important;
  border:1px solid rgba(119,152,167,.16) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
}
.meter i::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:2px !important;
  background:repeating-linear-gradient(90deg, rgba(203,225,233,.18) 0 2px, transparent 2px 5px) !important;
  opacity:.48 !important;
}
/* localized pulse on each active chip */
.meter i::after{
  content:"" !important;
  position:absolute !important;
  inset:-1px auto -1px -160% !important;
  width:90% !important;
  border-radius:4px !important;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(228,255,253,.95), rgba(120,212,255,.95), rgba(255,255,255,0)) !important;
  filter:blur(.2px) !important;
  opacity:0 !important;
}
.meter i.on{
  background:linear-gradient(180deg, rgba(108,231,223,.96), rgba(87,140,255,.88)) !important;
  border-color:rgba(228,255,255,.34) !important;
  box-shadow:
    0 0 0 1px rgba(201,255,250,.05),
    0 0 9px rgba(104,233,223,.26),
    0 0 14px rgba(95,154,255,.12),
    inset 0 0 9px rgba(255,255,255,.17) !important;
  animation:chipGlowStep 3.6s linear infinite !important;
}
.meter i.on::before{
  opacity:.74 !important;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.74) 0 2px, rgba(255,255,255,0) 2px 5px) !important;
}
.meter i.on::after{
  opacity:1 !important;
  animation:chipSparkRun 3.6s linear infinite !important;
}
.meter i.on:nth-child(1), .meter i.on:nth-child(1)::after { animation-delay:0s !important; }
.meter i.on:nth-child(2), .meter i.on:nth-child(2)::after { animation-delay:.18s !important; }
.meter i.on:nth-child(3), .meter i.on:nth-child(3)::after { animation-delay:.36s !important; }
.meter i.on:nth-child(4), .meter i.on:nth-child(4)::after { animation-delay:.54s !important; }
.meter i.on:nth-child(5), .meter i.on:nth-child(5)::after { animation-delay:.72s !important; }

@keyframes meterSparkTravel{
  0%{transform:translateX(0) translateY(0) scale(.82); opacity:0}
  8%{opacity:.96}
  48%{opacity:1}
  92%{opacity:.78}
  100%{transform:translateX(calc(100% - 32px)) translateY(0) scale(1.04); opacity:0}
}
@keyframes chipSparkRun{
  0%,14%{left:-160%; opacity:0}
  18%{opacity:.2}
  34%{opacity:.96}
  60%{left:115%; opacity:.7}
  100%{left:115%; opacity:0}
}
@keyframes chipGlowStep{
  0%,100%{filter:brightness(1)}
  14%{filter:brightness(1)}
  26%{filter:brightness(1.22)}
  42%{filter:brightness(1.08)}
  100%{filter:brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  .meter::after,.meter i.on,.meter i.on::after{animation:none !important}
}


/* ==== V11 OVERRIDE: unmistakable visible impulse ==== */
.skill{
  background:#122a35 !important;
  border:1px solid rgba(126,165,182,.18) !important;
  box-shadow:0 14px 34px rgba(11,29,38,.20), inset 0 1px 0 rgba(255,255,255,.035), inset 0 -10px 18px rgba(0,0,0,.08) !important;
}
.skill::before{content:none !important; background:none !important; opacity:0 !important}
.skill::after{
  content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important;
  background:radial-gradient(circle at 14% 14%, rgba(118,235,228,.045), transparent 18%), radial-gradient(circle at 88% 84%, rgba(104,170,255,.035), transparent 20%) !important;
  pointer-events:none !important;
}
.skill b{color:#f5fbff !important; position:relative; z-index:2}
.skill small{color:#9eb4bf !important; position:relative; z-index:2}

.meter{
  position:relative !important;
  background:rgba(8,22,29,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(133,176,193,.08) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  z-index:2;
  padding:8px 9px !important;
}
.meter::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:50% !important;
  height:2px !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(88,136,153,.16), rgba(96,170,200,.55), rgba(88,150,255,.58), rgba(88,136,153,.16)) !important;
  opacity:.9 !important;
}
/* MAIN IMPULSE: a clearly visible spark that runs through the whole chip line */
.meter::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:50% !important;
  left:16px !important;
  width:16px !important;
  height:16px !important;
  margin-top:-8px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,1) 0 18%, rgba(147,247,239,.98) 28%, rgba(98,179,255,.98) 58%, rgba(98,179,255,0) 78%) !important;
  box-shadow:0 0 6px rgba(147,247,239,.88), 0 0 14px rgba(98,179,255,.65), 0 0 24px rgba(98,179,255,.35) !important;
  opacity:1 !important;
  animation:meterSparkTravelV11 3.2s linear infinite !important;
}
.meter i{
  position:relative !important;
  height:14px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg, rgba(42,69,82,.74), rgba(26,49,62,.86)) !important;
  border:1px solid rgba(119,152,167,.16) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
}
.meter i::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:2px !important;
  background:repeating-linear-gradient(90deg, rgba(203,225,233,.18) 0 2px, transparent 2px 5px) !important;
  opacity:.48 !important;
}
/* CHIP IMPULSE: visible streak inside each active chip */
.meter i::after{
  content:"" !important;
  position:absolute !important;
  top:1px !important;
  bottom:1px !important;
  left:-140% !important;
  width:120% !important;
  border-radius:3px !important;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(235,255,254,.98), rgba(123,215,255,.98), rgba(255,255,255,0)) !important;
  box-shadow:0 0 8px rgba(123,215,255,.22) !important;
  opacity:0 !important;
}
.meter i.on{
  background:linear-gradient(180deg, rgba(108,231,223,.96), rgba(87,140,255,.88)) !important;
  border-color:rgba(228,255,255,.34) !important;
  box-shadow:0 0 0 1px rgba(201,255,250,.05), 0 0 9px rgba(104,233,223,.26), 0 0 14px rgba(95,154,255,.12), inset 0 0 9px rgba(255,255,255,.17) !important;
  animation:chipGlowStepV11 3.2s linear infinite !important;
}
.meter i.on::before{
  opacity:.74 !important;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.74) 0 2px, rgba(255,255,255,0) 2px 5px) !important;
}
.meter i.on::after{
  opacity:1 !important;
  animation:chipSparkRunV11 3.2s linear infinite !important;
}
.meter i.on:nth-child(1), .meter i.on:nth-child(1)::after { animation-delay:0s !important; }
.meter i.on:nth-child(2), .meter i.on:nth-child(2)::after { animation-delay:.14s !important; }
.meter i.on:nth-child(3), .meter i.on:nth-child(3)::after { animation-delay:.28s !important; }
.meter i.on:nth-child(4), .meter i.on:nth-child(4)::after { animation-delay:.42s !important; }
.meter i.on:nth-child(5), .meter i.on:nth-child(5)::after { animation-delay:.56s !important; }

@keyframes meterSparkTravelV11{
  0%{left:16px; opacity:0; transform:translateY(0) scale(.72)}
  8%{opacity:1}
  50%{opacity:1; transform:translateY(0) scale(1.08)}
  92%{opacity:.95}
  100%{left:calc(100% - 32px); opacity:0; transform:translateY(0) scale(.9)}
}
@keyframes chipSparkRunV11{
  0%,12%{left:-140%; opacity:0}
  20%{opacity:.35}
  38%{opacity:1}
  66%{left:120%; opacity:.82}
  100%{left:120%; opacity:0}
}
@keyframes chipGlowStepV11{
  0%,100%{filter:brightness(1)}
  18%{filter:brightness(1)}
  32%{filter:brightness(1.28)}
  48%{filter:brightness(1.08)}
  100%{filter:brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  .meter::after,.meter i.on,.meter i.on::after{animation:none !important}
}


/* ==== V12: JS-driven electric impulse (reliable in browser previews) ==== */
.skill{
  background:#122a35 !important;
  border:1px solid rgba(126,165,182,.18) !important;
  box-shadow:0 14px 34px rgba(11,29,38,.20), inset 0 1px 0 rgba(255,255,255,.035), inset 0 -10px 18px rgba(0,0,0,.08) !important;
}
.skill::before{content:none !important;background:none !important;opacity:0 !important}
.skill::after{
  content:"" !important;position:absolute !important;inset:0 !important;border-radius:inherit !important;
  background:radial-gradient(circle at 14% 14%,rgba(118,235,228,.045),transparent 18%),radial-gradient(circle at 88% 84%,rgba(104,170,255,.035),transparent 20%) !important;
  pointer-events:none !important;
}
.skill b{color:#f5fbff !important;position:relative;z-index:2}
.skill small{color:#9eb4bf !important;position:relative;z-index:2}
.meter{
  position:relative !important;
  background:rgba(8,22,29,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(133,176,193,.08) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  z-index:2;
  padding:8px 9px !important;
  isolation:isolate;
}
.meter::before{
  content:"" !important;position:absolute !important;left:16px !important;right:16px !important;top:50% !important;height:2px !important;
  transform:translateY(-50%) !important;border-radius:999px !important;
  background:linear-gradient(90deg,rgba(88,136,153,.16),rgba(96,170,200,.55),rgba(88,150,255,.58),rgba(88,136,153,.16)) !important;
  opacity:.88 !important;z-index:0;
}
/* disable old pseudo impulse completely */
.meter::after{display:none !important;animation:none !important}
.meter i{
  position:relative !important;z-index:2;height:14px !important;border-radius:4px !important;
  background:linear-gradient(180deg,rgba(42,69,82,.74),rgba(26,49,62,.86)) !important;
  border:1px solid rgba(119,152,167,.16) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;transition:filter .18s ease,box-shadow .18s ease,transform .18s ease;
}
.meter i::before{content:"" !important;position:absolute !important;inset:2px !important;border-radius:2px !important;background:repeating-linear-gradient(90deg,rgba(203,225,233,.18) 0 2px,transparent 2px 5px) !important;opacity:.48 !important}
.meter i::after{display:none !important;animation:none !important}
.meter i.on{
  background:linear-gradient(180deg,rgba(108,231,223,.96),rgba(87,140,255,.88)) !important;
  border-color:rgba(228,255,255,.34) !important;
  box-shadow:0 0 0 1px rgba(201,255,250,.05),0 0 9px rgba(104,233,223,.22),0 0 14px rgba(95,154,255,.10),inset 0 0 9px rgba(255,255,255,.17) !important;
  animation:none !important;
}
.meter i.on::before{opacity:.74 !important;background:repeating-linear-gradient(90deg,rgba(255,255,255,.74) 0 2px,rgba(255,255,255,0) 2px 5px) !important}
.meter i.energized{
  filter:brightness(1.38) saturate(1.08) !important;
  transform:translateY(-1px) scale(1.025);
  box-shadow:0 0 5px rgba(225,255,253,.8),0 0 14px rgba(112,230,222,.58),0 0 24px rgba(91,159,255,.30),inset 0 0 11px rgba(255,255,255,.24) !important;
}
.energy-pulse{
  position:absolute;left:0;top:50%;z-index:8;width:38px;height:14px;pointer-events:none;
  transform:translate3d(0,-50%,0);will-change:transform,opacity;opacity:0;
  filter:drop-shadow(0 0 4px rgba(188,255,251,.92)) drop-shadow(0 0 10px rgba(105,185,255,.72));
}
.energy-pulse::before{
  content:"";position:absolute;inset:1px 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#f0ffff 18%,#8ef4eb 46%,#6ebdff 72%,rgba(255,255,255,0));
  clip-path:polygon(0 58%,14% 42%,26% 57%,41% 14%,53% 53%,66% 36%,79% 66%,100% 48%,100% 66%,81% 80%,67% 54%,54% 88%,40% 47%,26% 69%,12% 51%,0 70%);
}
.energy-pulse::after{
  content:"";position:absolute;left:18px;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:#efffff;box-shadow:0 0 6px #dffffb,0 0 13px #7ce9e0,0 0 22px #67aaff;
}
.energy-tail{
  position:absolute;right:26px;top:50%;z-index:7;width:42px;height:2px;transform:translateY(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(112,203,255,.08),rgba(139,245,235,.56));filter:blur(.4px);opacity:0;will-change:opacity;
}



/* ==== V15 RESPONSIVE PROFESSIONAL LAYOUT ==== */
html{overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:10px clamp(14px,2.6vw,28px) 46px !important}
.hero.hero-v15{
  margin-top:0 !important;
  padding:20px clamp(18px,3vw,32px) 22px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:20px !important;
  border-radius:24px !important;
}
.identity-row{
  display:grid;
  grid-template-columns:clamp(120px,14vw,155px) minmax(0,1fr);
  gap:clamp(18px,3vw,32px);
  align-items:start;
}
.identity-photo{min-width:0}
.identity-photo .portrait-frame{
  width:100%;
  max-width:155px;
  margin:0;
  padding:6px;
  border-radius:22px 22px 34px 22px;
}
.identity-photo .profile-photo{border-radius:17px 17px 29px 17px}
.identity-photo .portrait-status{display:none !important}
.identity-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:2px;
}
.identity-copy .eyebrow{margin:0;font-size:11px}
.identity-copy h1{
  margin:0 !important;
  font-size:clamp(38px,6.1vw,70px) !important;
  line-height:.9 !important;
  letter-spacing:-.035em;
}
.identity-copy h2{
  margin:3px 0 0 !important;
  font-size:clamp(16px,2.2vw,24px) !important;
  line-height:1.25;
  max-width:850px;
}
.identity-hook{
  margin:3px 0 0;
  max-width:800px;
  color:#d9e9ee;
  font-size:clamp(14px,1.5vw,16px);
  line-height:1.55;
}
.identity-copy .hero-meta{margin:5px 0 0 !important;gap:7px !important}
.identity-copy .hero-meta span{padding:6px 9px !important;font-size:10px !important}
.identity-copy .actions{margin-top:5px !important;gap:9px !important}
.identity-copy .btn{padding:10px 13px !important}
.intro-strip{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.86fr);
  gap:14px;
}
.intro-card{
  min-width:0;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(132,180,196,.13);
  background:rgba(8,28,36,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.intro-kicker{
  color:#9ec4d0;
  font-weight:800;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.intro-card p{margin:0;color:#deedf1;font-size:14px;line-height:1.65;text-align:left}
.focus-pills{display:flex;flex-wrap:wrap;gap:7px}
.focus-pills span{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(133,183,198,.12);
  background:rgba(255,255,255,.04);
  color:#eef8fa;
  font-size:11px;
}
.fact-list{margin:0;padding-left:17px;display:grid;gap:8px;color:#e7f3f6;font-size:12px;line-height:1.45}
.fact-list li::marker{color:#7cecdf}
.section{padding:30px 0 !important;scroll-margin-top:18px}
.section + .section{border-top:1px solid rgba(24,73,88,.06)}
.section > h3{
  margin:0 0 18px !important;
  font-size:clamp(22px,2.7vw,31px) !important;
}
.grid,.skillgrid,.strengthgrid,.contact{gap:16px !important}
.grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.skillgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.card,.skill,.strength,.ai-banner{min-width:0}
.card p,.role p,.ai-banner p{text-align:left !important}
.workstyle-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:18px;
  align-items:start;
}
.workstyle-col>h4{
  margin:0 0 12px;
  font-family:"Space Grotesk";
  color:var(--ink);
  font-size:17px;
}
.workstyle-section .strengthgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.workstyle-section .ai-banner{height:100%;grid-template-columns:auto 1fr !important}
.contact{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.qr-contact-card{justify-content:flex-start !important}
.contact-qr{margin-top:8px !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important}
.contact-qr #qrcode{background:#fff;border-radius:12px;padding:7px;width:max-content}
.contact-qr .hero-qr-copy{color:var(--muted) !important;margin-top:8px;font-size:12px}
.footer{padding:28px 0 12px !important}

@media(max-width:980px){
  .intro-strip{grid-template-columns:1fr 1fr}
  .intro-summary{grid-column:1/-1}
  .grid,.skillgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .workstyle-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr 1fr !important}
}
@media(max-width:680px){
  .wrap{padding:8px 12px 36px !important}
  .hero.hero-v15{padding:16px 14px 18px !important;border-radius:18px !important;gap:16px !important}
  .identity-row{grid-template-columns:92px minmax(0,1fr);gap:14px}
  .identity-photo .portrait-frame{max-width:92px;padding:4px;border-radius:16px 16px 24px 16px}
  .identity-photo .profile-photo{border-radius:13px 13px 20px 13px}
  .identity-copy{gap:6px}
  .identity-copy .eyebrow{font-size:9px;letter-spacing:.1em}
  .identity-copy h1{font-size:clamp(33px,12vw,46px) !important}
  .identity-copy h2{font-size:14px !important}
  .identity-hook{font-size:13px;line-height:1.45}
  .identity-copy .hero-meta{display:none !important}
  .identity-copy .actions{margin-top:4px !important}
  .identity-copy .btn{font-size:11px;padding:8px 10px !important}
  .intro-strip{grid-template-columns:1fr;gap:10px}
  .intro-summary{grid-column:auto}
  .intro-card{padding:13px}
  .section{padding:24px 0 !important}
  .grid,.skillgrid,.strengthgrid,.contact{grid-template-columns:1fr !important}
  .workstyle-section .strengthgrid{grid-template-columns:1fr !important}
  .card,.skill,.strength{padding:16px !important}
  .contact{grid-template-columns:1fr !important}
}
@media(max-width:390px){
  .identity-row{grid-template-columns:78px minmax(0,1fr);gap:11px}
  .identity-photo .portrait-frame{max-width:78px}
  .identity-copy h1{font-size:31px !important}
  .identity-copy h2{font-size:12.5px !important}
  .identity-hook{font-size:12px}
  .actions .btn{padding:7px 8px !important}
}


/* ==== V19 VERIFIED HEADER + ORGANIZED SKILLS ==== */
/* Critical identity must never depend on JS or IntersectionObserver. */
.identity-photo,
.identity-photo .portrait-frame,
.identity-photo .profile-photo,
.identity-copy,
.identity-copy .eyebrow,
.identity-copy h1,
.identity-copy h2,
.identity-hook,
.identity-copy .hero-meta,
.identity-copy .actions{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.identity-photo .profile-photo{display:block !important;width:100% !important;height:auto !important;object-fit:cover !important}
.identity-copy h1{color:#fff !important}
.identity-copy h2{color:#edf8fa !important}
.identity-hook{color:#d9e9ee !important}

.skills-lead{margin:-4px 0 18px;max-width:820px;color:var(--muted);font-size:14px;line-height:1.65}
.skill-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.skill-category{padding:20px !important;border-radius:20px !important;min-width:0;overflow:hidden;background:linear-gradient(180deg,#fff,#f8fbfc) !important}
.skill-category-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:13px;margin-bottom:2px;border-bottom:1px solid #e3edf0}
.skill-category-kicker{display:block;margin-bottom:4px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#70919d}
.skill-category h4{margin:0;color:var(--ink);font-size:17px;line-height:1.3}
.category-level{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#e8f7f5;color:#24776d;border:1px solid #c9e9e4;font-size:10px;font-weight:800;white-space:nowrap}
.category-level.solid{background:#edf4fb;color:#346a91;border-color:#d7e4f0}
.category-level.growth{background:#f1effb;color:#655b9b;border-color:#e0dcf2}
.skill-rows{display:grid}
.skill-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #e9f0f2;min-width:0}
.skill-row:last-child{border-bottom:0;padding-bottom:2px}
.skill-copy{min-width:0}
.skill-copy b{display:block;color:var(--ink);font-size:14px;line-height:1.25}
.skill-copy small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35;text-transform:uppercase;letter-spacing:.045em}
.skill-row .meter{width:150px !important;min-width:150px !important;margin:0 !important;padding:8px 9px !important;display:flex !important;gap:6px !important;align-items:center !important;position:relative !important;border-radius:12px !important;background:rgba(7,24,31,.88) !important;overflow:hidden !important;box-shadow:inset 0 0 0 1px rgba(133,176,193,.10),inset 0 7px 16px rgba(255,255,255,.025) !important}
.skill-row .meter i{height:13px !important;flex:1 1 0 !important;min-width:0 !important;border-radius:4px !important;transform:scaleX(1) !important;opacity:1 !important}
.skill-row .meter::before{content:"";position:absolute;left:13px;right:13px;top:50%;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(88,136,153,.12),rgba(96,170,200,.52),rgba(88,150,255,.52),rgba(88,136,153,.12));opacity:.75}
/* keep real JS energy-pulse above the aligned chips */
.skill-row .energy-pulse{z-index:8 !important}
.skill-row .energy-tail{z-index:7 !important}

@media(max-width:920px){
  .skill-categories{grid-template-columns:1fr}
}
@media(max-width:680px){
  .identity-row{grid-template-columns:92px minmax(0,1fr) !important}
  .identity-photo .portrait-frame{max-width:92px !important}
  .identity-copy h1{font-size:clamp(32px,11vw,44px) !important}
  .identity-copy h2{font-size:14px !important;line-height:1.28 !important}
  .identity-hook{font-size:13px !important}
  .skill-category{padding:16px !important}
  .skill-category-head{flex-direction:column;gap:8px}
  .skill-row{grid-template-columns:1fr;gap:9px;padding:13px 0}
  .skill-row .meter{width:100% !important;min-width:0 !important}
}
@media(max-width:390px){
  .identity-row{grid-template-columns:78px minmax(0,1fr) !important}
  .identity-photo .portrait-frame{max-width:78px !important}
  .identity-copy h1{font-size:31px !important}
  .identity-copy h2{font-size:12.5px !important}
}


/* ==== V20 FINAL HEADER FIX ==== */
.hero.hero-v15{
  min-height:0 !important;
  height:auto !important;
  padding:18px clamp(18px,3vw,30px) 20px !important;
  gap:0 !important;
  overflow:hidden !important;
}
.identity-row{
  align-items:start !important;
  grid-template-columns:clamp(118px,13vw,150px) minmax(0,1fr) !important;
  gap:clamp(18px,2.7vw,30px) !important;
}
.identity-photo,
.identity-photo .portrait-frame,
.identity-photo .profile-photo,
.identity-copy,
.identity-copy .eyebrow,
.identity-copy h1,
.identity-copy h2,
.identity-hook,
.identity-copy .hero-meta,
.identity-copy .actions{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.identity-photo .portrait-frame{max-width:150px !important;margin:0 !important}
.identity-photo .profile-photo{display:block !important;width:100% !important;height:auto !important}
.identity-copy{gap:7px !important;padding-top:1px !important}
.identity-copy h1{
  margin:0 !important;
  font-size:clamp(42px,5.8vw,68px) !important;
  line-height:.95 !important;
  letter-spacing:-.035em !important;
  color:#fff !important;
}
.identity-copy h2{margin:2px 0 0 !important;font-size:clamp(17px,2vw,23px) !important;line-height:1.28 !important;color:#edf8fa !important}
.identity-hook{margin:3px 0 0 !important;max-width:760px !important;font-size:clamp(14px,1.45vw,16px) !important;line-height:1.52 !important;color:#d9e9ee !important}
.identity-copy .hero-meta{margin:5px 0 0 !important}
.identity-copy .actions{margin-top:5px !important}

@media(max-width:680px){
  .hero.hero-v15{padding:14px 13px 15px !important;border-radius:18px !important}
  .identity-row{grid-template-columns:88px minmax(0,1fr) !important;gap:12px !important}
  .identity-photo .portrait-frame{max-width:88px !important;padding:4px !important;border-radius:16px 16px 24px 16px !important}
  .identity-photo .profile-photo{border-radius:13px 13px 20px 13px !important}
  .identity-copy{gap:5px !important}
  .identity-copy .eyebrow{font-size:9px !important;letter-spacing:.1em !important}
  .identity-copy h1{font-size:clamp(29px,9.4vw,39px) !important;line-height:1 !important}
  .identity-copy h2{font-size:13px !important;line-height:1.28 !important}
  .identity-hook{font-size:12.5px !important;line-height:1.45 !important}
  .identity-copy .hero-meta{display:none !important}
  .identity-copy .btn{font-size:11px !important;padding:8px 9px !important}
}
@media(max-width:390px){
  .identity-row{grid-template-columns:76px minmax(0,1fr) !important;gap:10px !important}
  .identity-photo .portrait-frame{max-width:76px !important}
  .identity-copy h1{font-size:28px !important}
  .identity-copy h2{font-size:12px !important}
  .identity-hook{font-size:11.8px !important}
}


/* ==== V21 robustness: content never disappears if reveal JS/observer is unavailable ==== */
.reveal,
.reveal.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}


/* ==== V22 secure contact section ==== */
.contact-secure-grid{display:grid;grid-template-columns:1fr 1.25fr .95fr;gap:18px;align-items:start}
.secure-card,.form-card,.secure-side-card{min-height:100%}
.secure-card p,.form-card p,.secure-side-card p{line-height:1.65}
.contact-actions-secure{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.mini-note{margin-top:10px;color:#6a828d;font-size:.92rem;line-height:1.5}
.privacy-box{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(11,94,118,.06);border:1px solid rgba(53,151,175,.12);display:grid;gap:4px}
.privacy-box strong{font-size:.86rem;color:#164351}
.privacy-box span{font-size:.9rem;color:#59717c;line-height:1.45}
.contact-form{margin-top:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{display:grid;gap:7px}
.form-grid label.full{grid-column:1 / -1}
.form-grid span{font-size:.83rem;font-weight:700;color:#2f5060;letter-spacing:.01em}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;border:1px solid #d8e6ec;background:#fbfdfe;color:#173845;border-radius:12px;padding:12px 13px;font:inherit;outline:none;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#64c9de;box-shadow:0 0 0 4px rgba(100,201,222,.12)}
.contact-form textarea{resize:vertical;min-height:128px}
.form-footer-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px}
.form-privacy{margin:0;color:#6f858f;font-size:.86rem;line-height:1.55;max-width:46ch}
.form-status{margin-top:12px;font-size:.9rem;min-height:1.4em;color:#23505e}
.form-status.success{color:#0f6c4d}
.form-status.error{color:#a03a3a}
.submit-btn{border:0;cursor:pointer}
.stack-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.contact-qr-block{margin-top:16px;padding-top:14px;border-top:1px solid #e5eef2}
.contact-qr-block > b{display:block;margin-bottom:10px}
.contact-secure-grid .hero-qr.contact-qr{width:100%;display:flex;align-items:center;gap:14px;margin:0}
.contact-secure-grid .hero-qr.contact-qr .hero-qr-copy{font-size:.92rem;line-height:1.5;max-width:220px}
@media (max-width:1080px){.contact-secure-grid{grid-template-columns:1fr 1fr}.secure-side-card{grid-column:1 / -1}}
@media (max-width:760px){.contact-secure-grid,.form-grid{grid-template-columns:1fr}.form-grid label.full{grid-column:auto}.form-footer-row{flex-direction:column;align-items:stretch}.submit-btn{width:100%}}


.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}