:root{
  --bg:#06070c;--bg2:#0b0d15;--surface:rgba(17,19,31,.70);--surface-strong:rgba(20,23,38,.90);--surface-soft:rgba(255,255,255,.055);
  --text:#f7f8fd;--text2:#c3c8d7;--muted:#8d94a8;--line:rgba(255,255,255,.095);--line2:rgba(255,255,255,.16);
  --cyan:#45e7ff;--blue:#4b7cff;--indigo:#7457ff;--violet:#a35cff;--pink:#ff5bb4;--coral:#ff7863;--amber:#ffc45b;--mint:#52e4b0;
  --glass:rgba(13,15,25,.68);--glass2:rgba(18,21,35,.82);--black:#06070c;--white:#fff;
  --shadow-xl:0 48px 140px rgba(0,0,0,.50),0 12px 40px rgba(68,47,170,.13);--shadow-lg:0 28px 80px rgba(0,0,0,.36);--radius-xl:44px;--radius-lg:30px;--radius-md:22px;
}
html[data-theme="light"]{
  --bg:#f5f6fb;--bg2:#fff;--surface:rgba(255,255,255,.72);--surface-strong:rgba(255,255,255,.92);--surface-soft:rgba(15,20,36,.045);
  --text:#0a0c13;--text2:#353947;--muted:#767d90;--line:rgba(16,20,34,.085);--line2:rgba(16,20,34,.14);--glass:rgba(255,255,255,.68);--glass2:rgba(255,255,255,.88);
  --shadow-xl:0 45px 130px rgba(62,56,96,.18),0 10px 35px rgba(68,47,170,.08);--shadow-lg:0 25px 70px rgba(54,48,86,.13)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Pretendard Variable","Pretendard","Noto Sans KR","Segoe UI",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}body{margin:0;min-height:100vh;overflow-x:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);letter-spacing:-.018em}body.modal-open{overflow:hidden}button,input{font:inherit}a{color:inherit}.scene{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% -12%,rgba(113,91,255,.14),transparent 35%),linear-gradient(180deg,var(--bg),var(--bg2))}.mesh{position:absolute;border-radius:50%;filter:blur(115px);opacity:.36;mix-blend-mode:screen}.m1{width:820px;height:700px;left:-330px;top:-290px;background:conic-gradient(from 155deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--cyan))}.m2{width:680px;height:650px;right:-300px;top:5%;background:conic-gradient(from 45deg,var(--pink),var(--coral),var(--amber),var(--violet),var(--pink));opacity:.27}.m3{width:900px;height:520px;left:28%;bottom:-390px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--pink));opacity:.18}.grain{position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}.topbar{width:min(1560px,calc(100% - 48px));margin:0 auto;padding:25px 5px 12px;display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative;z-index:20}.identity{display:flex;align-items:center;gap:13px;text-decoration:none}.identity-copy{display:grid;gap:2px}.identity-copy strong{font-size:13px;font-weight:760;letter-spacing:-.025em}.identity-copy small{font-size:8px;letter-spacing:.16em;color:var(--muted);font-weight:780;text-transform:uppercase}.aura-mark{position:relative;width:38px;height:41px;display:inline-block;flex:0 0 auto;filter:drop-shadow(0 10px 22px rgba(93,72,255,.30))}.aura-mark i{position:absolute;left:3px;bottom:2px;width:30px;height:30px;border-radius:53% 47% 48% 52%/48% 47% 61% 58%;background:conic-gradient(from 215deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--coral),var(--amber),var(--cyan));transform:rotate(-5deg)}.aura-mark i:after{content:"";position:absolute;right:-6px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--bg)}.aura-mark b{position:absolute;left:20px;top:0;width:12px;height:8px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,var(--mint),var(--cyan));transform:rotate(-31deg)}.aura-mark em{position:absolute;inset:7px 13px 9px 9px;border-radius:50%;background:rgba(255,255,255,.25);filter:blur(1px)}.aura-mark.giant{transform:scale(3.5)}.aura-mark.mini{transform:scale(.62)}.top-actions{display:flex;align-items:center;gap:9px}.verified-chip{display:flex;align-items:center;gap:8px;text-decoration:none;padding:10px 13px;border-radius:999px;background:rgba(56,224,161,.10);border:1px solid rgba(82,228,176,.22);color:#75edbd;font-size:10px;font-weight:780}.verified-chip span,.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(82,228,176,.10)}.theme-toggle,.language-switch{height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(24px) saturate(160%);box-shadow:0 12px 30px rgba(0,0,0,.08)}.theme-toggle{display:flex;align-items:center;gap:8px;padding:0 13px;color:var(--text2);cursor:pointer}.theme-icon{font-size:15px}.theme-label{font-size:9px;font-weight:800;letter-spacing:.04em}.language-switch{display:flex;padding:4px}.language-switch a{display:grid;place-items:center;min-width:44px;padding:0 10px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:9px;font-weight:850}.language-switch a.active{background:var(--text);color:var(--bg);box-shadow:0 7px 18px rgba(0,0,0,.18)}.page-shell{width:min(1560px,calc(100% - 48px));margin:0 auto;padding:18px 5px 100px}.flash{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:14px 17px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg);backdrop-filter:blur(24px)}.flash span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}.flash p{margin:0;font-size:12px;color:var(--text2)}.flash.success span{background:rgba(82,228,176,.14);color:var(--mint)}.flash.error span{background:rgba(255,91,128,.14);color:#ff748f}.hero-stage{position:relative;min-height:730px;border:1px solid var(--line);border-radius:56px;padding:78px 82px;overflow:hidden;background:linear-gradient(130deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 43%,rgba(111,81,255,.055));box-shadow:var(--shadow-xl);backdrop-filter:blur(25px) saturate(145%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;gap:55px}.hero-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 26%,transparent 72%,rgba(255,255,255,.025));pointer-events:none}.hero-stage:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-80px;top:-160px;background:conic-gradient(from 30deg,rgba(69,231,255,.18),rgba(116,87,255,.25),rgba(255,91,180,.17),rgba(255,196,91,.10),rgba(69,231,255,.18));filter:blur(55px);pointer-events:none}.hero-copy{position:relative;z-index:2;max-width:760px}.eyebrow,.section-tag{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:880;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.eyebrow span{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 0 6px rgba(83,113,255,.10)}.hero-copy h1{font-size:clamp(72px,7.3vw,126px);line-height:.88;letter-spacing:-.078em;margin:24px 0 20px;font-weight:760;max-width:850px}.hero-role{font-size:clamp(22px,2.1vw,36px);line-height:1.1;margin:0;color:var(--text2);font-weight:620;letter-spacing:-.05em}.hero-summary{max-width:690px;color:var(--muted);font-size:15px;line-height:1.82;margin:28px 0 0}.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.hero-facts div{min-width:130px;padding:14px 16px;border-radius:18px;background:var(--surface-soft);border:1px solid var(--line);backdrop-filter:blur(16px)}.hero-facts small{display:block;font-size:8px;letter-spacing:.15em;color:var(--muted);font-weight:850;margin-bottom:7px}.hero-facts strong{display:block;font-size:12px;color:var(--text2);font-weight:700}.hero-art{position:relative;min-height:570px;display:grid;place-items:center;z-index:2}.portrait-orbit{position:absolute;border-radius:50%;border:1px solid var(--line);pointer-events:none}.orbit-a{width:510px;height:510px;transform:rotate(18deg);box-shadow:inset 0 0 80px rgba(108,82,255,.08)}.orbit-b{width:430px;height:430px;border-color:rgba(69,231,255,.12);transform:rotate(-24deg)}.portrait-card{position:relative;width:min(430px,88%);height:535px;border-radius:52px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:0 45px 100px rgba(0,0,0,.38),0 0 0 8px rgba(255,255,255,.018);transform:rotate(1.2deg)}.portrait-card img,.portrait-empty{width:100%;height:100%;object-fit:cover;display:grid;place-items:center}.portrait-empty{background:radial-gradient(circle at 45% 34%,rgba(101,92,255,.22),transparent 38%),linear-gradient(150deg,#111528,#090b12)}.portrait-glass{position:absolute;inset:0;z-index:2;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(60,198,255,.08));pointer-events:none}.portrait-badge{position:absolute;z-index:3;left:20px;right:20px;bottom:20px;padding:13px 15px;border-radius:20px;background:rgba(8,10,17,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(24px) saturate(150%);display:flex;align-items:center;gap:10px}.portrait-badge>span{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(82,228,176,.10)}.portrait-badge small{display:block;font-size:7px;letter-spacing:.15em;color:#9ca5b9;font-weight:900}.portrait-badge strong{display:block;font-size:11px;margin-top:3px;color:#f7f8fd}.spectra-card{position:absolute;padding:14px 17px;border-radius:19px;background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(25px);box-shadow:0 20px 45px rgba(0,0,0,.22)}.spectra-card small{display:block;font-size:7px;letter-spacing:.15em;color:var(--muted);font-weight:900;margin-bottom:5px}.spectra-card b{font-size:11px}.spectra-one{right:-10px;top:90px}.spectra-two{left:-8px;bottom:100px}.section-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.65fr);gap:70px;align-items:end;padding:95px 28px 34px}.section-intro h2,.vault-head h2,.access-head h2{font-size:clamp(42px,4.7vw,72px);letter-spacing:-.065em;line-height:.97;margin:14px 0 0;font-weight:720}.section-intro p,.access-head>p,.vault-head>div:first-child>p{color:var(--muted);font-size:13px;line-height:1.8;margin:0}.public-grid{display:grid;grid-template-columns:1.35fr .65fr .65fr;gap:15px}.public-card{position:relative;min-height:248px;border-radius:30px;padding:27px;background:linear-gradient(150deg,var(--surface),rgba(255,255,255,.018));border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;backdrop-filter:blur(20px);transition:transform .25s ease,border-color .25s ease}.public-card:hover{transform:translateY(-3px);border-color:var(--line2)}.public-card>span,.card-content>span{font-size:8px;letter-spacing:.15em;color:var(--muted);font-weight:880}.public-card h3{font-size:27px;line-height:1.05;letter-spacing:-.05em;margin:14px 0 10px}.public-card p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}.public-card-wide{grid-row:span 2;min-height:510px;padding:34px;display:flex;flex-direction:column;justify-content:space-between}.public-card-wide h3{font-size:42px}.public-card-wide p{font-size:14px;line-height:1.9;max-width:720px;color:var(--text2)}.card-index{font-size:11px;color:var(--muted);font-weight:760}.card-spectrum{position:absolute;left:34px;right:34px;bottom:28px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--amber))}.mini-orb{width:41px;height:41px;border-radius:15px;margin-bottom:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 30px rgba(0,0,0,.2)}.mini-orb.cyan{background:linear-gradient(135deg,#58efff,#3c6bff)}.mini-orb.violet{background:linear-gradient(135deg,#795cff,#df5bff)}.mini-orb.amber{background:linear-gradient(135deg,#ff7c5f,#ffd05d)}.vault{position:relative;margin-top:105px;border-radius:52px;padding:48px;overflow:hidden;background:linear-gradient(145deg,#080a12,#0e1020 48%,#090a12);border:1px solid rgba(255,255,255,.105);box-shadow:0 55px 150px rgba(0,0,0,.46)}html[data-theme="light"] .vault{background:linear-gradient(145deg,#111321,#181b2e 50%,#10111c);color:#f7f8fd}.vault-aurora{position:absolute;border-radius:50%;filter:blur(85px);opacity:.28}.va1{width:520px;height:420px;left:-160px;top:-200px;background:conic-gradient(var(--cyan),var(--blue),var(--violet),var(--cyan))}.va2{width:540px;height:400px;right:-170px;bottom:-220px;background:conic-gradient(var(--pink),var(--coral),var(--amber),var(--violet),var(--pink))}.vault-head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:55px;align-items:end;padding:4px 4px 34px}.vault-head h2{max-width:900px;color:#fff}.vault-head>div:first-child>p{max-width:760px;color:#9aa2b7;margin-top:18px}.section-tag.inverted{color:#838da6}.vault-state{min-width:265px;padding:15px 17px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:12px}.vault-state-icon{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(69,231,255,.14),rgba(116,87,255,.18));color:var(--cyan);font-size:17px}.vault-state.open .vault-state-icon{background:rgba(82,228,176,.12);color:var(--mint)}.vault-state small{display:block;font-size:7px;letter-spacing:.15em;color:#7d879e;font-weight:900}.vault-state strong{display:block;font-size:11px;margin-top:5px;color:#f5f7ff}.secret-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.secret-card{min-height:205px;padding:23px;border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.026));border:1px solid rgba(255,255,255,.10);color:#fff;display:flex;flex-direction:column;transition:transform .22s ease,border-color .22s ease,background .22s ease;outline:none}.secret-card.masked{cursor:pointer}.secret-card.masked:hover,.secret-card.masked:focus-visible{transform:translateY(-4px);border-color:rgba(116,178,255,.35);background:linear-gradient(145deg,rgba(76,105,255,.13),rgba(160,77,255,.055));box-shadow:0 24px 50px rgba(0,0,0,.23)}.secret-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.secret-card-top>div{display:flex;align-items:center;gap:8px}.secret-type{font-size:7px;letter-spacing:.14em;color:#7f899f;font-weight:900}.secret-card-top b{font-size:8px;color:#4f5870}.privacy-pill{font-size:7px;letter-spacing:.1em;font-weight:900;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#9da7bb}.revealed .privacy-pill{color:#68e4ae;background:rgba(82,228,176,.09)}.secret-card h3{font-size:19px;letter-spacing:-.04em;margin:23px 0 16px}.masked-value{font-family:"SF Mono","Cascadia Mono","Roboto Mono",monospace;font-size:16px;letter-spacing:.09em;color:#aeb5c7;margin-top:auto;overflow-wrap:anywhere}.secret-card.revealed .masked-value{font-family:inherit;font-size:14px;letter-spacing:-.01em;color:#f7f8fd;line-height:1.55}.tap-hint{display:flex;align-items:center;gap:7px;color:#707b92;font-size:8px;font-weight:780;margin-top:18px}.tap-hint span{width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.06);display:grid;place-items:center}.vault-footer,.vault-footnote{position:relative;z-index:2;margin-top:16px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:space-between;gap:16px;color:#8f98ad;font-size:9px}.vault-footer>div{display:flex;align-items:center;gap:9px}.vault-footer a{color:#dce1ee;text-decoration:none;font-weight:760}.vault-footnote{justify-content:flex-start}.vault-footnote>span{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#c7d0e3}.access-zone{margin-top:95px;padding:50px;border-radius:52px;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),rgba(255,255,255,.018));box-shadow:var(--shadow-xl);backdrop-filter:blur(25px)}.access-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr);gap:65px;align-items:end;margin-bottom:34px}.access-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.access-panel{position:relative;min-height:510px;padding:25px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-strong),var(--surface-soft));display:flex;flex-direction:column;overflow:hidden}.access-panel:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-80px;top:-90px;background:linear-gradient(135deg,var(--blue),var(--violet));filter:blur(15px);opacity:.10}.access-panel.complete:before{background:linear-gradient(135deg,var(--mint),var(--cyan));opacity:.13}.access-panel.active{border-color:rgba(112,96,255,.34);box-shadow:0 0 0 1px rgba(112,96,255,.10),0 20px 60px rgba(78,67,194,.10)}.flow-number{font-size:10px;color:var(--muted);font-weight:800}.flow-copy{margin:44px 0 28px}.flow-copy small{font-size:8px;letter-spacing:.16em;color:var(--muted);font-weight:900}.flow-copy h3{font-size:28px;letter-spacing:-.055em;margin:10px 0 10px}.flow-copy p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}.access-form{margin-top:auto;display:grid;gap:11px}.access-form label{display:grid;gap:7px}.access-form label>span{font-size:8px;font-weight:850;color:var(--muted);letter-spacing:.02em}.access-form input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);outline:none;transition:.2s}.access-form input::placeholder{color:var(--muted);opacity:.65}.access-form input:focus{border-color:rgba(91,112,255,.55);box-shadow:0 0 0 4px rgba(92,85,255,.10);background:var(--surface)}.otp-input{text-align:center;font-size:26px!important;font-weight:780;letter-spacing:.30em!important}.action-btn{width:100%;border:0;border-radius:15px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:white;font-size:10px;font-weight:850;box-shadow:0 14px 32px rgba(0,0,0,.13)}.action-btn.gradient{background:linear-gradient(112deg,#218dff 0%,#665cff 42%,#bc57e9 72%,#f85fa6 100%)}.action-btn.dark{background:linear-gradient(130deg,#151827,#282c43)}html[data-theme="light"] .action-btn.dark{background:#141621}.action-btn b{font-size:17px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 10px 10px;margin-top:45px;border-top:1px solid var(--line);color:var(--muted);font-size:9px}.site-footer>div{display:flex;align-items:center;gap:4px}.access-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}.access-modal.open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:rgba(2,3,8,.74);backdrop-filter:blur(18px)}.modal-card{position:relative;width:min(560px,100%);padding:38px;border-radius:36px;background:linear-gradient(150deg,#121525,#0b0d16 70%,#121021);border:1px solid rgba(255,255,255,.13);box-shadow:0 45px 140px rgba(0,0,0,.60);color:#f7f8fd;transform:translateY(16px) scale(.98);transition:transform .23s ease;overflow:hidden}.access-modal.open .modal-card{transform:none}.modal-card:before{content:"";position:absolute;width:300px;height:240px;border-radius:50%;right:-130px;top:-120px;background:conic-gradient(var(--cyan),var(--violet),var(--pink),var(--amber),var(--cyan));filter:blur(58px);opacity:.25}.modal-close{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#c7cedf;font-size:20px;cursor:pointer}.modal-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;margin-bottom:25px;background:linear-gradient(135deg,rgba(69,231,255,.14),rgba(116,87,255,.22),rgba(255,91,180,.12));border:1px solid rgba(255,255,255,.10);color:var(--cyan);font-size:20px}.modal-kicker{font-size:8px;letter-spacing:.16em;color:#858fa7;font-weight:900}.modal-card h2{font-size:36px;letter-spacing:-.06em;line-height:1;margin:12px 0 15px}.modal-card>p{font-size:12px;line-height:1.8;color:#9ea7bb;margin:0}.modal-steps{display:flex;gap:8px;margin:23px 0}.modal-steps span{flex:1;padding:10px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);font-size:8px;color:#929cb1;display:flex;align-items:center;gap:7px}.modal-steps b{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:rgba(116,87,255,.14);color:#b6a9ff}.modal-cta{width:100%;border:0;border-radius:16px;padding:15px 16px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(112deg,#168cff,#6d5cff 48%,#d257cf);color:white;font-size:10px;font-weight:850;cursor:pointer}.modal-cta span{font-size:18px}
@media(max-width:1180px){.hero-stage{grid-template-columns:1fr;padding:60px}.hero-art{min-height:560px}.public-grid{grid-template-columns:1fr 1fr}.public-card-wide{grid-column:1/3;grid-row:auto;min-height:390px}.secret-grid{grid-template-columns:1fr 1fr}.access-flow{grid-template-columns:1fr}.access-panel{min-height:0}.section-intro,.access-head{grid-template-columns:1fr;gap:20px}.vault-head{grid-template-columns:1fr}.vault-state{min-width:0;max-width:340px}}
@media(max-width:760px){.topbar,.page-shell{width:calc(100% - 26px)}.identity-copy small,.theme-label,.verified-chip{display:none}.topbar{padding-top:16px}.top-actions{gap:5px}.theme-toggle{width:42px;justify-content:center;padding:0}.language-switch a{min-width:39px;padding:0 7px}.hero-stage{padding:38px 23px;border-radius:34px;gap:20px;min-height:auto}.hero-copy h1{font-size:64px;margin-top:20px}.hero-role{font-size:23px}.hero-summary{font-size:13px}.hero-art{min-height:410px}.portrait-card{width:285px;height:355px;border-radius:39px}.portrait-badge{left:13px;right:13px;bottom:13px}.portrait-orbit.orbit-a{width:340px;height:340px}.portrait-orbit.orbit-b{width:300px;height:300px}.spectra-card{padding:10px 12px}.spectra-one{right:-3px;top:55px}.spectra-two{left:-3px;bottom:65px}.section-intro{padding:67px 8px 25px}.section-intro h2,.vault-head h2,.access-head h2{font-size:43px}.public-grid,.secret-grid{grid-template-columns:1fr}.public-card-wide{grid-column:auto;min-height:390px}.vault,.access-zone{margin-top:70px;padding:28px 20px;border-radius:34px}.secret-card{min-height:185px}.access-head{margin-bottom:22px}.access-panel{padding:22px}.site-footer{flex-direction:column;align-items:flex-start}.modal-card{padding:31px 24px;border-radius:28px}.modal-card h2{font-size:31px}.modal-steps{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* =========================================================
   V15 GEMSTONE DARK — Sapphire / Emerald / Ruby
   Dark mode is the default. Light mode remains available.
   ========================================================= */
html[data-theme="dark"]{
  --bg:#02070b;
  --bg2:#06100f;
  --surface:rgba(8,18,24,.82);
  --surface-strong:rgba(8,22,28,.94);
  --surface-soft:rgba(196,231,255,.055);
  --text:#f6fbff;
  --text2:#d9e7ef;
  --muted:#9bafbd;
  --line:rgba(190,229,255,.13);
  --line2:rgba(205,238,255,.21);
  --cyan:#55d8ff;
  --blue:#3f6fff;
  --indigo:#244fe4;
  --violet:#6f5dff;
  --pink:#e94370;
  --coral:#ff6b72;
  --amber:#f0c56a;
  --mint:#28d39a;
  --glass:rgba(6,18,24,.84);
  --glass2:rgba(7,23,29,.94);
  --shadow-xl:0 50px 150px rgba(0,0,0,.58),0 24px 70px rgba(23,89,255,.10),0 8px 34px rgba(18,193,135,.055);
  --shadow-lg:0 30px 90px rgba(0,0,0,.42),0 12px 36px rgba(30,83,204,.075);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1000px 680px at -6% -8%,rgba(37,85,235,.25),transparent 58%),
    radial-gradient(880px 650px at 104% 10%,rgba(13,156,112,.20),transparent 58%),
    radial-gradient(720px 620px at 76% 102%,rgba(184,28,72,.14),transparent 62%),
    linear-gradient(145deg,#02070b 0%,#041017 40%,#06120f 72%,#0b080d 100%);
  color:var(--text);
}
html[data-theme="dark"] .scene{
  background:
    radial-gradient(circle at 26% -12%,rgba(48,91,255,.22),transparent 32%),
    radial-gradient(circle at 85% 16%,rgba(27,198,142,.14),transparent 26%),
    radial-gradient(circle at 70% 94%,rgba(220,50,89,.10),transparent 25%),
    linear-gradient(155deg,#02070b,#061116 52%,#07120f 78%,#08070b);
}
html[data-theme="dark"] .mesh{mix-blend-mode:screen;filter:blur(130px);opacity:.32}
html[data-theme="dark"] .m1{background:conic-gradient(from 175deg,#1b49d5,#4178ff,#163fb7,#1bc28b,#1b49d5);opacity:.34}
html[data-theme="dark"] .m2{background:conic-gradient(from 30deg,#0fa576,#2bd39e,#215bea,#dc315f,#0fa576);opacity:.24}
html[data-theme="dark"] .m3{background:linear-gradient(90deg,#183db9,#19b984 50%,#d52b59);opacity:.16}
html[data-theme="dark"] .grain{opacity:.032}
html[data-theme="dark"] .hero-stage{
  border-color:rgba(205,238,255,.16);
  background:
    linear-gradient(135deg,rgba(24,66,138,.14),rgba(7,25,32,.89) 32%,rgba(5,27,24,.84) 72%,rgba(64,12,30,.13)),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 55px 160px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(63,111,255,.025);
}
html[data-theme="dark"] .hero-stage:after{
  background:conic-gradient(from 20deg,rgba(53,103,255,.27),rgba(27,206,146,.20),rgba(213,43,89,.17),rgba(53,103,255,.27));
  filter:blur(68px);
}
html[data-theme="dark"] .hero-copy h1{
  color:#fbfdff;
  text-shadow:0 2px 22px rgba(86,139,255,.06);
}
html[data-theme="dark"] .hero-role{color:#dbe8f1}
html[data-theme="dark"] .hero-summary{color:#9fb2c0}
html[data-theme="dark"] .hero-facts div,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:rgba(7,20,27,.76);
  border-color:rgba(194,232,255,.14);
}
html[data-theme="dark"] .hero-facts strong{color:#edf7fc}
html[data-theme="dark"] .portrait-card{
  border-color:rgba(208,239,255,.20);
  background:linear-gradient(155deg,rgba(33,94,190,.13),rgba(9,25,31,.9) 46%,rgba(13,84,64,.13));
  box-shadow:0 54px 125px rgba(0,0,0,.48),0 18px 55px rgba(28,84,198,.11),0 0 0 8px rgba(255,255,255,.018);
}
html[data-theme="dark"] .portrait-empty{
  background:
    radial-gradient(circle at 34% 26%,rgba(50,101,255,.30),transparent 35%),
    radial-gradient(circle at 72% 76%,rgba(22,194,137,.22),transparent 35%),
    linear-gradient(150deg,#07101b,#061713 70%,#14080d);
}
html[data-theme="dark"] .portrait-badge{
  background:rgba(2,12,17,.82);
  border-color:rgba(205,237,255,.15);
}
html[data-theme="dark"] .spectra-card{
  background:rgba(6,19,26,.86);
  border-color:rgba(205,237,255,.17);
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .access-zone{
  background:linear-gradient(145deg,rgba(8,24,31,.91),rgba(6,18,23,.80));
  border-color:rgba(194,231,255,.135);
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .public-card:hover{
  border-color:rgba(75,130,255,.30);
  box-shadow:0 32px 92px rgba(0,0,0,.40),0 12px 42px rgba(34,92,218,.075);
}
html[data-theme="dark"] .vault{
  background:
    radial-gradient(800px 420px at 0% 0%,rgba(37,82,215,.16),transparent 64%),
    radial-gradient(720px 400px at 100% 15%,rgba(14,151,108,.12),transparent 60%),
    radial-gradient(600px 340px at 68% 100%,rgba(189,34,76,.085),transparent 62%),
    linear-gradient(145deg,#050d13,#071714 72%,#10080c);
  border-color:rgba(197,233,255,.14);
  box-shadow:0 45px 130px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .secret-card{
  background:linear-gradient(145deg,rgba(13,32,41,.92),rgba(7,22,27,.90));
  border-color:rgba(199,235,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
}
html[data-theme="dark"] .secret-card.masked:hover,
html[data-theme="dark"] .secret-card.masked:focus-visible{
  border-color:rgba(65,118,255,.42);
  background:linear-gradient(145deg,rgba(22,51,85,.92),rgba(8,41,34,.88));
  box-shadow:0 26px 62px rgba(0,0,0,.28),0 0 0 1px rgba(34,201,143,.08);
}
html[data-theme="dark"] .secret-card h3{color:#f5fbff}
html[data-theme="dark"] .masked-value{color:#bccbd6}
html[data-theme="dark"] .tap-hint{color:#93a7b5}
html[data-theme="dark"] .access-panel{
  background:linear-gradient(158deg,rgba(9,27,35,.96),rgba(6,18,24,.92));
  border-color:rgba(194,231,255,.13);
}
html[data-theme="dark"] .access-panel:before{background:linear-gradient(135deg,#315cff,#18b984);opacity:.16}
html[data-theme="dark"] .access-panel.active{
  border-color:rgba(65,116,255,.42);
  box-shadow:0 0 0 1px rgba(65,116,255,.08),0 22px 70px rgba(0,0,0,.28),0 12px 38px rgba(18,168,119,.055);
}
html[data-theme="dark"] .access-form input{
  background:rgba(2,13,18,.66);
  border-color:rgba(198,234,255,.14);
  color:#f7fcff;
}
html[data-theme="dark"] .access-form input:focus{
  border-color:rgba(64,116,255,.58);
  box-shadow:0 0 0 4px rgba(58,106,255,.11),0 0 28px rgba(22,187,132,.055);
  background:rgba(3,18,23,.88);
}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(112deg,#2457e8 0%,#3977ff 34%,#17ae7c 68%,#c42f58 112%);
  box-shadow:0 15px 38px rgba(29,82,205,.20),0 7px 24px rgba(15,147,104,.08);
}
html[data-theme="dark"] .verified-chip{
  background:rgba(23,194,137,.095);
  border-color:rgba(39,216,157,.25);
  color:#6be3b7;
}
html[data-theme="dark"] .access-modal .modal-backdrop{background:rgba(0,5,8,.80)}
html[data-theme="dark"] .modal-card{
  background:
    radial-gradient(360px 240px at 100% 0%,rgba(45,90,232,.16),transparent 72%),
    radial-gradient(320px 220px at 0% 100%,rgba(16,163,115,.12),transparent 75%),
    linear-gradient(150deg,#07131a,#06100f 72%,#10080c);
  border-color:rgba(205,237,255,.16);
  box-shadow:0 55px 160px rgba(0,0,0,.67);
}
html[data-theme="dark"] .modal-card:before{background:conic-gradient(#3667f5,#18bd88,#ce365e,#3667f5);opacity:.22}
html[data-theme="dark"] .modal-card>p{color:#aabac6}
html[data-theme="dark"] .modal-steps span{background:rgba(191,230,255,.045);border-color:rgba(194,232,255,.085);color:#a4b4c0}
html[data-theme="dark"] .modal-steps b{background:rgba(50,99,242,.16);color:#9eb8ff}
html[data-theme="dark"] .section-tag,
html[data-theme="dark"] .eyebrow{color:#9db0bd}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .access-head p{color:#9fb1bd}
html[data-theme="dark"] ::selection{background:rgba(41,102,255,.42);color:#fff}

/* =========================================================
   V16 ATELIER NOIR — restrained gemstone luxury
   Sapphire + Emerald + Ruby are used as reflected light,
   not as loud rainbow fills. Dark mode remains default.
   ========================================================= */
html[data-theme="dark"]{
  --bg:#040609;
  --bg2:#080b10;
  --surface:rgba(12,16,22,.78);
  --surface-strong:rgba(13,18,25,.94);
  --surface-soft:rgba(255,255,255,.038);
  --text:#f7f5f0;
  --text2:#d9dce2;
  --muted:#939aa7;
  --line:rgba(230,236,246,.095);
  --line2:rgba(230,236,246,.155);
  --sapphire:#315fa8;
  --sapphire-hi:#6f98d6;
  --emerald:#1e665b;
  --emerald-hi:#64a79c;
  --ruby:#713046;
  --ruby-hi:#b66a7d;
  --metal:#b9ad99;
  --glass:rgba(9,13,19,.82);
  --glass2:rgba(10,15,22,.94);
  --shadow-xl:0 52px 150px rgba(0,0,0,.62),0 18px 54px rgba(17,35,68,.16);
  --shadow-lg:0 28px 80px rgba(0,0,0,.44),0 8px 28px rgba(15,31,55,.13);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(72% 58% at 4% 0%,rgba(35,74,132,.20),transparent 67%),
    radial-gradient(55% 52% at 100% 24%,rgba(22,81,72,.13),transparent 71%),
    radial-gradient(45% 46% at 70% 100%,rgba(92,31,51,.10),transparent 72%),
    linear-gradient(155deg,#030507 0%,#070a0f 48%,#080b10 100%);
  color:var(--text);
}
html[data-theme="dark"] .scene{
  background:
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 26%),
    radial-gradient(66% 50% at 12% -10%,rgba(44,88,151,.13),transparent 72%),
    radial-gradient(48% 44% at 104% 18%,rgba(24,90,79,.095),transparent 76%),
    radial-gradient(42% 38% at 73% 105%,rgba(105,35,56,.07),transparent 78%),
    #040609;
}
html[data-theme="dark"] .mesh{filter:blur(170px);mix-blend-mode:screen}
html[data-theme="dark"] .m1{width:760px;height:620px;left:-360px;top:-310px;background:#274e88;opacity:.24}
html[data-theme="dark"] .m2{width:620px;height:620px;right:-350px;top:8%;background:#1a6558;opacity:.16}
html[data-theme="dark"] .m3{width:700px;height:430px;left:44%;bottom:-360px;background:#6b253d;opacity:.105}
html[data-theme="dark"] .grain{opacity:.018}

html[data-theme="dark"] .aura-mark{filter:drop-shadow(0 12px 24px rgba(26,49,84,.28))}
html[data-theme="dark"] .aura-mark i{background:linear-gradient(145deg,#557db9 0%,#315a94 42%,#245d54 72%,#6f3045 100%)}
html[data-theme="dark"] .aura-mark b{background:linear-gradient(135deg,#74a99f,#446f9e)}
html[data-theme="dark"] .aura-mark em{background:rgba(255,255,255,.20)}
html[data-theme="dark"] .identity-copy strong{color:#f4f2ed;letter-spacing:-.015em}
html[data-theme="dark"] .identity-copy small{color:#858d9a}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:rgba(9,13,19,.72);
  border-color:rgba(231,236,244,.10);
  box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .language-switch a.active{
  background:#ece9e2;
  color:#0a0d12;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
html[data-theme="dark"] .verified-chip{
  color:#9bc4ba;
  background:rgba(31,98,85,.115);
  border-color:rgba(104,165,151,.22);
}
html[data-theme="dark"] .verified-chip span,
html[data-theme="dark"] .live-dot{background:#6ea99d;box-shadow:0 0 0 5px rgba(92,155,143,.10)}

html[data-theme="dark"] .hero-stage{
  background:
    linear-gradient(112deg,rgba(255,255,255,.036),transparent 25%),
    radial-gradient(72% 100% at 0% 0%,rgba(42,77,129,.15),transparent 66%),
    radial-gradient(54% 84% at 100% 100%,rgba(24,77,69,.085),transparent 72%),
    linear-gradient(145deg,rgba(12,17,24,.96),rgba(7,10,15,.90));
  border-color:rgba(233,238,247,.11);
  box-shadow:0 62px 170px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.012),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .hero-stage:before{
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 22%,transparent 78%,rgba(255,255,255,.018));
}
html[data-theme="dark"] .hero-stage:after{
  width:620px;height:620px;right:-190px;top:-220px;
  background:radial-gradient(circle,rgba(46,82,135,.18),rgba(29,85,75,.065) 46%,transparent 72%);
  filter:blur(48px);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-tag{color:#9098a5;letter-spacing:.19em}
html[data-theme="dark"] .eyebrow span{background:#6e8fbd;box-shadow:0 0 0 6px rgba(65,98,143,.10)}
html[data-theme="dark"] .hero-copy h1{
  color:#f6f3ed;
  font-weight:690;
  letter-spacing:-.075em;
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 22px 55px rgba(0,0,0,.22);
}
html[data-theme="dark"] .hero-role{color:#d6dae0;font-weight:560}
html[data-theme="dark"] .hero-summary{color:#9ba2ae;line-height:1.9}
html[data-theme="dark"] .hero-facts div{
  background:rgba(255,255,255,.026);
  border-color:rgba(230,236,246,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] .hero-facts small{color:#858d99}
html[data-theme="dark"] .hero-facts strong{color:#dfe2e7;font-weight:620}

html[data-theme="dark"] .portrait-orbit{border-color:rgba(228,235,245,.075)}
html[data-theme="dark"] .orbit-a{box-shadow:inset 0 0 90px rgba(40,76,130,.055)}
html[data-theme="dark"] .orbit-b{border-color:rgba(66,126,113,.075)}
html[data-theme="dark"] .portrait-card{
  border-color:rgba(235,240,247,.14);
  background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
  box-shadow:0 58px 128px rgba(0,0,0,.52),0 20px 54px rgba(15,31,53,.14),0 0 0 8px rgba(255,255,255,.012);
}
html[data-theme="dark"] .portrait-empty{
  background:radial-gradient(circle at 36% 28%,rgba(48,84,137,.17),transparent 38%),linear-gradient(150deg,#10151d,#080b10 74%,#111014);
}
html[data-theme="dark"] .portrait-glass{background:linear-gradient(160deg,rgba(255,255,255,.105),transparent 24%,transparent 72%,rgba(39,99,87,.045))}
html[data-theme="dark"] .portrait-badge,
html[data-theme="dark"] .spectra-card{
  background:rgba(7,10,15,.78);
  border-color:rgba(232,237,245,.11);
  box-shadow:0 20px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-theme="dark"] .public-card,
html[data-theme="dark"] .access-zone{
  background:linear-gradient(150deg,rgba(13,18,25,.91),rgba(8,11,16,.88));
  border-color:rgba(233,238,246,.095);
  box-shadow:0 28px 82px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .public-card:hover{
  border-color:rgba(111,145,190,.20);
  transform:translateY(-2px);
  box-shadow:0 34px 92px rgba(0,0,0,.40),0 16px 46px rgba(25,46,76,.10),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .public-card h3{color:#f0eee9}
html[data-theme="dark"] .public-card p,
html[data-theme="dark"] .public-card .value{color:#cfd3da}

html[data-theme="dark"] .vault{
  background:
    radial-gradient(68% 90% at 0% 0%,rgba(39,72,123,.12),transparent 72%),
    radial-gradient(52% 72% at 100% 6%,rgba(23,79,70,.075),transparent 76%),
    radial-gradient(44% 58% at 78% 100%,rgba(98,33,52,.055),transparent 78%),
    linear-gradient(150deg,#0b0f15,#070a0e 72%);
  border-color:rgba(235,240,247,.105);
  box-shadow:0 48px 132px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="dark"] .vault-state{
  background:rgba(255,255,255,.026);
  border-color:rgba(232,238,247,.095);
}
html[data-theme="dark"] .vault-state.closed .vault-state-icon{background:rgba(54,84,128,.15);color:#8facd0}
html[data-theme="dark"] .vault-state.open .vault-state-icon{background:rgba(35,100,88,.15);color:#91bdb3}
html[data-theme="dark"] .secret-card{
  background:linear-gradient(150deg,rgba(16,21,29,.94),rgba(9,12,17,.92));
  border-color:rgba(235,240,247,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-theme="dark"] .secret-card.masked:hover,
html[data-theme="dark"] .secret-card.masked:focus-visible{
  border-color:rgba(104,139,184,.24);
  background:linear-gradient(150deg,rgba(18,25,35,.97),rgba(10,15,21,.94));
  box-shadow:0 22px 58px rgba(0,0,0,.30),0 0 0 1px rgba(69,116,102,.04);
}
html[data-theme="dark"] .secret-card h3{color:#eceae5}
html[data-theme="dark"] .masked-value{color:#aeb4bd;letter-spacing:.08em}
html[data-theme="dark"] .tap-hint{color:#818a97}

html[data-theme="dark"] .access-panel{
  background:linear-gradient(155deg,rgba(14,19,26,.95),rgba(8,11,16,.93));
  border-color:rgba(233,239,247,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] .access-panel:before{background:linear-gradient(135deg,#4e73a8,#2e7065);opacity:.10}
html[data-theme="dark"] .access-panel.active{
  border-color:rgba(103,139,184,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 0 1px rgba(85,119,163,.05);
}
html[data-theme="dark"] .flow-number{color:#7e8997}
html[data-theme="dark"] .access-form input{
  background:rgba(4,7,11,.62);
  border-color:rgba(231,237,246,.10);
  color:#f2f0eb;
}
html[data-theme="dark"] .access-form input::placeholder{color:#626a76}
html[data-theme="dark"] .access-form input:focus{
  border-color:rgba(102,137,182,.42);
  box-shadow:0 0 0 4px rgba(55,88,133,.095);
  background:rgba(5,8,12,.88);
}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(112deg,#355b90 0%,#2d5f80 52%,#2f6c61 100%);
  box-shadow:0 15px 34px rgba(9,24,42,.30),inset 0 1px 0 rgba(255,255,255,.10);
  border:1px solid rgba(197,215,235,.10);
}
html[data-theme="dark"] .action-btn.gradient:hover,
html[data-theme="dark"] .modal-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
html[data-theme="dark"] .action-btn.dark{
  background:#11161e;
  color:#e9e7e2;
  border:1px solid rgba(232,238,246,.11);
}

html[data-theme="dark"] .modal-card{
  background:
    radial-gradient(70% 60% at 100% 0%,rgba(42,76,128,.11),transparent 72%),
    radial-gradient(54% 50% at 0% 100%,rgba(25,78,69,.065),transparent 75%),
    linear-gradient(150deg,#10151c,#080b10 74%);
  border-color:rgba(235,240,247,.12);
  box-shadow:0 58px 170px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .modal-card:before{background:linear-gradient(90deg,#496f9f,#397a6e,#7b3a50);opacity:.14}
html[data-theme="dark"] .modal-card h2{color:#f2f0eb}
html[data-theme="dark"] .modal-card>p{color:#9aa2ad}
html[data-theme="dark"] .modal-steps span{background:rgba(255,255,255,.028);border-color:rgba(233,238,246,.075);color:#949ca7}
html[data-theme="dark"] .modal-steps b{background:rgba(62,94,137,.16);color:#a8bdd7}
html[data-theme="dark"] .site-footer{color:#808894;border-color:rgba(233,238,246,.07)}
html[data-theme="dark"] ::selection{background:rgba(69,105,153,.42);color:#fff}

/* =========================================================
   V17 PRISM LUXE — colorful premium dark mode refinement
   ========================================================= */
html[data-theme="dark"]{
  --bg:#050814;
  --bg2:#09101f;
  --surface:rgba(11,18,34,.74);
  --surface-strong:rgba(13,22,40,.92);
  --surface-soft:rgba(255,255,255,.050);
  --glass:rgba(11,18,34,.68);
  --glass2:rgba(14,23,42,.86);
  --text:#f7fbff;
  --text2:#d9e6f5;
  --muted:#8fa4bf;
  --line:rgba(200,228,255,.11);
  --line2:rgba(218,236,255,.18);
  --cyan:#7de7ff;
  --blue:#53a4ff;
  --indigo:#6f7bff;
  --violet:#a06bff;
  --pink:#ff63a8;
  --coral:#ff7f7f;
  --amber:#ffd07a;
  --mint:#3be0b6;
  --shadow-xl:0 56px 160px rgba(0,0,0,.56),0 18px 60px rgba(52,111,255,.16),0 0 120px rgba(59,224,182,.07);
  --shadow-lg:0 26px 84px rgba(0,0,0,.38),0 10px 36px rgba(42,98,225,.10);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(58% 54% at -6% -8%,rgba(83,164,255,.25),transparent 66%),
    radial-gradient(44% 42% at 108% 2%,rgba(255,99,168,.16),transparent 68%),
    radial-gradient(45% 45% at 88% 96%,rgba(59,224,182,.14),transparent 72%),
    radial-gradient(38% 34% at 38% 14%,rgba(160,107,255,.12),transparent 70%),
    linear-gradient(180deg,#060a16 0%,#081122 52%,#060a15 100%);
}
html[data-theme="dark"] .scene{
  background:
    radial-gradient(circle at 14% 4%,rgba(83,164,255,.18),transparent 28%),
    radial-gradient(circle at 96% 10%,rgba(255,99,168,.10),transparent 24%),
    radial-gradient(circle at 82% 94%,rgba(59,224,182,.12),transparent 26%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
html[data-theme="dark"] .mesh{opacity:.48;mix-blend-mode:screen;filter:blur(120px)}
html[data-theme="dark"] .m1{background:conic-gradient(from 165deg,#7de7ff,#53a4ff,#7b67ff,#ff63a8,#ffc770,#7de7ff)}
html[data-theme="dark"] .m2{background:conic-gradient(from 30deg,#ff72af,#ff9271,#ffd07a,#3be0b6,#53a4ff,#ff72af);opacity:.22}
html[data-theme="dark"] .m3{background:linear-gradient(90deg,rgba(125,231,255,.70),rgba(83,164,255,.75),rgba(59,224,182,.66),rgba(255,99,168,.62));opacity:.16}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .page-shell{width:min(1600px,calc(100% - 56px))}
html[data-theme="dark"] .identity-copy strong{font-size:13px;color:#f8fbff}
html[data-theme="dark"] .identity-copy small{color:#a8bed9}
html[data-theme="dark"] .aura-mark{filter:drop-shadow(0 18px 34px rgba(64,105,214,.22))}
html[data-theme="dark"] .aura-mark i{
  background:conic-gradient(from 200deg,#7de7ff,#53a4ff,#6f7bff,#a06bff,#ff63a8,#ffd07a,#3be0b6,#7de7ff);
}
html[data-theme="dark"] .aura-mark b{background:linear-gradient(135deg,#ffd07a,#3be0b6)}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:linear-gradient(180deg,rgba(15,23,41,.78),rgba(10,16,31,.92));
  border-color:rgba(213,233,255,.13);
  box-shadow:0 14px 40px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .theme-toggle{color:#e1ecfb}
html[data-theme="dark"] .language-switch a{color:#9fb5cf}
html[data-theme="dark"] .language-switch a.active{background:linear-gradient(135deg,#f8fbff,#d9ebff);color:#08111f;box-shadow:0 14px 30px rgba(78,137,233,.22)}
html[data-theme="dark"] .verified-chip{
  background:linear-gradient(135deg,rgba(59,224,182,.14),rgba(83,164,255,.12));
  border-color:rgba(130,224,255,.24);
  color:#b7fff0;
}
html[data-theme="dark"] .hero-stage{
  min-height:760px;
  padding:86px 88px;
  border-radius:58px;
  border:1px solid rgba(214,232,255,.12);
  background:
    radial-gradient(52% 60% at 0% 0%,rgba(83,164,255,.12),transparent 72%),
    radial-gradient(42% 42% at 100% 0%,rgba(255,99,168,.09),transparent 72%),
    radial-gradient(36% 44% at 80% 100%,rgba(59,224,182,.09),transparent 74%),
    linear-gradient(145deg,rgba(15,25,46,.80),rgba(10,18,36,.92) 48%,rgba(12,23,43,.88));
  box-shadow:0 50px 170px rgba(0,0,0,.48),0 16px 60px rgba(52,111,255,.14),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .hero-stage:before{
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 28%,transparent 72%,rgba(255,255,255,.04));
}
html[data-theme="dark"] .hero-stage:after{
  width:660px;height:660px;right:-120px;top:-180px;
  background:conic-gradient(from 55deg,rgba(125,231,255,.20),rgba(83,164,255,.24),rgba(160,107,255,.20),rgba(255,99,168,.18),rgba(59,224,182,.15),rgba(125,231,255,.20));
  filter:blur(72px);
  opacity:.95;
}
html[data-theme="dark"] .hero-copy h1{
  background:linear-gradient(112deg,#ffffff 0%,#d7e9ff 22%,#7de7ff 44%,#7b7dff 64%,#ff79ba 84%,#ffd07a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;
}
html[data-theme="dark"] .hero-role{color:#e5effd;text-shadow:0 3px 18px rgba(39,90,181,.12)}
html[data-theme="dark"] .hero-summary{color:#abc0d8;font-size:16px;max-width:720px}
html[data-theme="dark"] .hero-facts div{
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-color:rgba(218,236,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 34px rgba(0,0,0,.14);
}
html[data-theme="dark"] .hero-facts strong{color:#f7fbff}
html[data-theme="dark"] .portrait-card{
  border-color:rgba(230,240,255,.18);
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  box-shadow:0 54px 120px rgba(0,0,0,.42),0 18px 55px rgba(43,95,211,.15),0 0 90px rgba(59,224,182,.08);
}
html[data-theme="dark"] .portrait-empty{
  background:radial-gradient(circle at 52% 24%,rgba(125,231,255,.22),transparent 24%),radial-gradient(circle at 72% 72%,rgba(255,99,168,.16),transparent 22%),linear-gradient(150deg,#101a31,#081121 68%,#0a1222)
}
html[data-theme="dark"] .portrait-badge{background:rgba(8,12,22,.76);border-color:rgba(231,240,255,.16)}
html[data-theme="dark"] .spectra-card{
  background:linear-gradient(150deg,rgba(16,25,46,.82),rgba(10,18,33,.92));
  border-color:rgba(218,236,255,.14);
  box-shadow:0 20px 44px rgba(0,0,0,.26),0 0 40px rgba(43,95,211,.10);
}
html[data-theme="dark"] .section-tag{color:#b4c7de}
html[data-theme="dark"] .section-intro h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="dark"] .access-head h2,
html[data-theme="dark"] .modal-card h2{color:#f7fbff}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .vault-head p,
html[data-theme="dark"] .access-head p,
html[data-theme="dark"] .modal-card p{color:#9fb4cd}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .vault,
html[data-theme="dark"] .flash{
  border-color:rgba(219,237,255,.12);
  box-shadow:0 28px 80px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .public-card{
  background:linear-gradient(160deg,rgba(15,24,43,.92),rgba(11,19,35,.96));
}
html[data-theme="dark"] .public-card-wide{
  background:
    radial-gradient(40% 70% at 100% 0%,rgba(125,231,255,.10),transparent 72%),
    radial-gradient(44% 66% at 0% 100%,rgba(255,99,168,.09),transparent 72%),
    linear-gradient(150deg,rgba(15,24,43,.95),rgba(10,17,32,.98));
}
html[data-theme="dark"] .public-card span,
html[data-theme="dark"] .public-card p{color:#9fb4cd}
html[data-theme="dark"] .public-card h3,
html[data-theme="dark"] .public-card-wide h3{color:#f7fbff}
html[data-theme="dark"] .card-spectrum{background:linear-gradient(90deg,rgba(83,164,255,.85),rgba(125,231,255,.85),rgba(255,99,168,.70),rgba(255,208,122,.65))}
html[data-theme="dark"] .mini-orb.cyan{background:radial-gradient(circle at 35% 30%,#cfffff,#7de7ff 38%,#53a4ff 78%)}
html[data-theme="dark"] .mini-orb.violet{background:radial-gradient(circle at 35% 30%,#efe7ff,#a06bff 40%,#6f7bff 80%)}
html[data-theme="dark"] .mini-orb.amber{background:radial-gradient(circle at 35% 30%,#fff7da,#ffd07a 40%,#ff9b79 82%)}
html[data-theme="dark"] .vault{
  background:
    radial-gradient(36% 48% at 0% 0%,rgba(83,164,255,.12),transparent 74%),
    radial-gradient(34% 40% at 100% 0%,rgba(255,99,168,.10),transparent 72%),
    radial-gradient(36% 44% at 100% 100%,rgba(59,224,182,.10),transparent 74%),
    linear-gradient(150deg,rgba(12,20,37,.96),rgba(8,15,29,.98));
}
html[data-theme="dark"] .vault-state{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border-color:rgba(219,237,255,.14);
}
html[data-theme="dark"] .vault-state.open{box-shadow:0 0 0 1px rgba(59,224,182,.14),0 18px 42px rgba(0,0,0,.16),0 0 40px rgba(59,224,182,.08)}
html[data-theme="dark"] .secret-card{
  background:linear-gradient(160deg,rgba(16,25,46,.90),rgba(11,19,36,.98));
}
html[data-theme="dark"] .secret-card.masked{cursor:pointer}
html[data-theme="dark"] .secret-card:hover{transform:translateY(-4px);box-shadow:0 32px 90px rgba(0,0,0,.30),0 0 42px rgba(83,164,255,.10)}
html[data-theme="dark"] .secret-type{color:#8cb7de}
html[data-theme="dark"] .secret-card h3,
html[data-theme="dark"] .masked-value{color:#f7fbff}
html[data-theme="dark"] .privacy-pill{background:linear-gradient(135deg,rgba(83,164,255,.18),rgba(160,107,255,.15));border:1px solid rgba(177,211,255,.18);color:#cfe3ff}
html[data-theme="dark"] .tap-hint{color:#9fc8ff}
html[data-theme="dark"] .vault-footer a,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer span,
html[data-theme="dark"] .vault-footnote{color:#9eb6d1}
html[data-theme="dark"] .access-zone{}
html[data-theme="dark"] .access-panel{
  background:
    radial-gradient(32% 42% at 100% 0%,rgba(83,164,255,.10),transparent 72%),
    linear-gradient(155deg,rgba(15,24,43,.95),rgba(9,16,31,.98));
}
html[data-theme="dark"] .flow-number{background:linear-gradient(135deg,#53a4ff,#7b67ff 52%,#ff63a8);color:#fff;box-shadow:0 16px 36px rgba(58,103,224,.22)}
html[data-theme="dark"] .flow-copy small{color:#91b9db}
html[data-theme="dark"] .flow-copy h3{color:#f7fbff}
html[data-theme="dark"] .flow-copy p{color:#9cb3cb}
html[data-theme="dark"] .access-form label span{color:#dce8f5}
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .otp-input{
  background:rgba(8,15,28,.78);
  border-color:rgba(217,236,255,.13);
  color:#f7fbff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="dark"] .access-form input:focus,
html[data-theme="dark"] .otp-input:focus{
  border-color:rgba(102,169,255,.62);
  box-shadow:0 0 0 4px rgba(83,164,255,.11),0 0 34px rgba(59,224,182,.08);
}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(115deg,#4c8dff 0%,#6e79ff 36%,#ff63a8 72%,#ffc770 110%);
  box-shadow:0 20px 44px rgba(50,92,213,.24),0 10px 28px rgba(255,99,168,.10);
}
html[data-theme="dark"] .action-btn.dark{
  background:linear-gradient(160deg,#0f1830,#16274b);
  border:1px solid rgba(219,237,255,.12);
  color:#eff6ff;
}
html[data-theme="dark"] .site-footer{border-top-color:rgba(219,237,255,.08)}
html[data-theme="dark"] .modal-card{
  background:
    radial-gradient(40% 50% at 100% 0%,rgba(83,164,255,.12),transparent 72%),
    radial-gradient(36% 40% at 0% 100%,rgba(255,99,168,.10),transparent 70%),
    linear-gradient(160deg,rgba(17,25,46,.96),rgba(9,16,31,.98));
}
html[data-theme="dark"] .modal-kicker,
html[data-theme="dark"] .modal-steps span{color:#a6bad1}
html[data-theme="dark"] .modal-icon{background:linear-gradient(135deg,#53a4ff,#6e79ff 52%,#ff63a8);box-shadow:0 18px 36px rgba(50,92,213,.24)}
html[data-theme="dark"] .modal-close{background:rgba(255,255,255,.06);border-color:rgba(218,236,255,.12);color:#eff6ff}
html[data-theme="dark"] .modal-steps b{background:#f8fbff;color:#091120}
html[data-theme="dark"] ::selection{background:rgba(83,164,255,.34);color:#fff}

@media (max-width: 980px){
  html[data-theme="dark"] .hero-stage{padding:52px 28px;border-radius:34px}
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .page-shell{width:min(100%,calc(100% - 24px))}
}

/* =========================================================
   V18 FLUX SPECTRUM — multi-theme luxury color system
   Inspired by AI FLUX LIFE's varied service/theme language:
   Ocean / Emerald / Violet / Ruby / Amber / Cyan / Magenta.
   ========================================================= */
html[data-theme="dark"]{
  --flux-ocean:#35b7ff;
  --flux-ocean-deep:#1759ff;
  --flux-emerald:#35e1a0;
  --flux-emerald-deep:#0fa66f;
  --flux-violet:#8f6cff;
  --flux-purple:#bb63ff;
  --flux-ruby:#ff4f7d;
  --flux-magenta:#ff56c7;
  --flux-amber:#ffca63;
  --flux-orange:#ff8a5c;
  --flux-cyan:#73efff;
  --flux-ink:#050816;
  --flux-panel:#0b1226;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(72% 64% at -10% -10%,rgba(53,183,255,.23),transparent 66%),
    radial-gradient(54% 48% at 110% -2%,rgba(143,108,255,.18),transparent 68%),
    radial-gradient(46% 42% at 100% 92%,rgba(53,225,160,.15),transparent 72%),
    radial-gradient(36% 30% at 6% 100%,rgba(255,79,125,.10),transparent 74%),
    linear-gradient(180deg,#050816 0%,#081127 45%,#07101e 75%,#050816 100%);
}

/* HERO — OCEAN ORBIT + violet/ruby spectrum */
html[data-theme="dark"] .hero-stage{
  background:
    radial-gradient(46% 68% at 4% 8%,rgba(53,183,255,.16),transparent 70%),
    radial-gradient(34% 56% at 96% 2%,rgba(143,108,255,.16),transparent 72%),
    radial-gradient(34% 48% at 88% 94%,rgba(255,79,125,.12),transparent 74%),
    linear-gradient(145deg,rgba(12,22,44,.96),rgba(8,17,35,.98) 50%,rgba(11,19,39,.96));
  border-color:rgba(126,208,255,.16);
}
html[data-theme="dark"] .hero-stage:after{
  background:conic-gradient(from 15deg,
    rgba(115,239,255,.30),
    rgba(53,183,255,.32),
    rgba(23,89,255,.24),
    rgba(143,108,255,.27),
    rgba(255,86,199,.22),
    rgba(255,79,125,.20),
    rgba(255,202,99,.17),
    rgba(53,225,160,.18),
    rgba(115,239,255,.30));
}
html[data-theme="dark"] .hero-copy h1{
  background:linear-gradient(108deg,#ffffff 0%,#d8f4ff 15%,#73efff 29%,#35b7ff 43%,#8f6cff 58%,#ff56c7 74%,#ff7d96 88%,#ffd78a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .eyebrow span{
  background:linear-gradient(135deg,var(--flux-cyan),var(--flux-violet));
  box-shadow:0 0 0 6px rgba(53,183,255,.10),0 0 30px rgba(143,108,255,.20);
}

/* PUBLIC PROFILE — each card gets a different premium service theme */
html[data-theme="dark"] .public-grid .public-card:nth-child(1){
  background:
    radial-gradient(48% 80% at 100% 0%,rgba(53,183,255,.15),transparent 74%),
    radial-gradient(42% 68% at 0% 100%,rgba(143,108,255,.13),transparent 75%),
    linear-gradient(150deg,#0c1732,#0a1226 68%,#0b1328);
  border-color:rgba(81,183,255,.17);
}
html[data-theme="dark"] .public-grid .public-card:nth-child(2){
  background:
    radial-gradient(76% 82% at 100% 0%,rgba(53,225,160,.17),transparent 72%),
    linear-gradient(150deg,#0b1d25,#091722 65%,#0a1420);
  border-color:rgba(74,225,173,.17);
}
html[data-theme="dark"] .public-grid .public-card:nth-child(3){
  background:
    radial-gradient(70% 74% at 100% 0%,rgba(255,86,199,.15),transparent 72%),
    radial-gradient(48% 54% at 0% 100%,rgba(143,108,255,.12),transparent 72%),
    linear-gradient(150deg,#18142d,#0f1225 70%);
  border-color:rgba(194,113,255,.17);
}
html[data-theme="dark"] .public-grid .public-card:nth-child(4){
  background:
    radial-gradient(72% 78% at 100% 0%,rgba(255,202,99,.16),transparent 72%),
    radial-gradient(42% 58% at 0% 100%,rgba(255,138,92,.10),transparent 74%),
    linear-gradient(150deg,#211a20,#111522 70%);
  border-color:rgba(255,202,99,.17);
}
html[data-theme="dark"] .public-card:hover{
  transform:translateY(-5px);
  box-shadow:0 36px 110px rgba(0,0,0,.34),0 0 46px rgba(53,183,255,.08);
}
html[data-theme="dark"] .public-grid .public-card:nth-child(2):hover{box-shadow:0 36px 110px rgba(0,0,0,.34),0 0 46px rgba(53,225,160,.10)}
html[data-theme="dark"] .public-grid .public-card:nth-child(3):hover{box-shadow:0 36px 110px rgba(0,0,0,.34),0 0 46px rgba(255,86,199,.09)}
html[data-theme="dark"] .public-grid .public-card:nth-child(4):hover{box-shadow:0 36px 110px rgba(0,0,0,.34),0 0 46px rgba(255,202,99,.09)}

/* VAULT — Ruby + Emerald + Sapphire, title visible / value masked */
html[data-theme="dark"] .vault{
  background:
    radial-gradient(34% 48% at 0% 0%,rgba(255,79,125,.14),transparent 74%),
    radial-gradient(34% 50% at 100% 0%,rgba(53,183,255,.13),transparent 72%),
    radial-gradient(38% 48% at 100% 100%,rgba(53,225,160,.12),transparent 74%),
    linear-gradient(150deg,#0d1328,#091224 62%,#091526);
  border-color:rgba(164,201,255,.16);
}
html[data-theme="dark"] .vault:before{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 30%,transparent 66%,rgba(255,255,255,.025));
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(1){
  background:linear-gradient(155deg,rgba(19,31,57,.96),rgba(10,20,39,.98));
  border-color:rgba(53,183,255,.19);
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(2){
  background:linear-gradient(155deg,rgba(23,25,55,.96),rgba(12,18,39,.98));
  border-color:rgba(143,108,255,.19);
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(3){
  background:linear-gradient(155deg,rgba(27,19,45,.96),rgba(14,17,36,.98));
  border-color:rgba(255,86,199,.18);
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(4){
  background:linear-gradient(155deg,rgba(36,18,28,.96),rgba(18,17,31,.98));
  border-color:rgba(255,79,125,.19);
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(5){
  background:linear-gradient(155deg,rgba(14,34,33,.96),rgba(10,22,31,.98));
  border-color:rgba(53,225,160,.19);
}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(1) .privacy-pill{background:rgba(53,183,255,.12);color:#bce8ff}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(2) .privacy-pill{background:rgba(143,108,255,.12);color:#d7c9ff}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(3) .privacy-pill{background:rgba(255,86,199,.11);color:#ffc5ed}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(4) .privacy-pill{background:rgba(255,79,125,.12);color:#ffc0cf}
html[data-theme="dark"] .secret-grid .secret-card:nth-child(5) .privacy-pill{background:rgba(53,225,160,.11);color:#b9ffe7}

/* AUTHORIZED ACCESS — three distinct stages */
html[data-theme="dark"] .access-flow .access-panel:nth-child(1){
  background:
    radial-gradient(58% 58% at 100% 0%,rgba(53,183,255,.14),transparent 72%),
    linear-gradient(155deg,#0c1732,#0a1328 70%);
  border-color:rgba(53,183,255,.17);
}
html[data-theme="dark"] .access-flow .access-panel:nth-child(2){
  background:
    radial-gradient(58% 58% at 100% 0%,rgba(143,108,255,.14),transparent 72%),
    linear-gradient(155deg,#17132d,#0e1226 70%);
  border-color:rgba(143,108,255,.17);
}
html[data-theme="dark"] .access-flow .access-panel:nth-child(3){
  background:
    radial-gradient(58% 58% at 100% 0%,rgba(53,225,160,.14),transparent 72%),
    linear-gradient(155deg,#0b1d25,#091722 70%);
  border-color:rgba(53,225,160,.17);
}
html[data-theme="dark"] .access-flow .access-panel:nth-child(1) .flow-number{background:linear-gradient(135deg,#35b7ff,#1759ff)}
html[data-theme="dark"] .access-flow .access-panel:nth-child(2) .flow-number{background:linear-gradient(135deg,#8f6cff,#ff56c7)}
html[data-theme="dark"] .access-flow .access-panel:nth-child(3) .flow-number{background:linear-gradient(135deg,#35e1a0,#35b7ff)}

/* Buttons — full Flux spectrum, controlled saturation */
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(105deg,#35b7ff 0%,#1759ff 24%,#8f6cff 45%,#ff56c7 67%,#ff6a77 83%,#ffca63 100%);
  box-shadow:0 20px 46px rgba(23,89,255,.20),0 12px 30px rgba(255,86,199,.12),inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme="dark"] .action-btn.gradient:hover,
html[data-theme="dark"] .modal-cta:hover{filter:saturate(1.08) brightness(1.06);transform:translateY(-2px)}

/* Modal — multi-theme spectrum */
html[data-theme="dark"] .modal-card{
  background:
    radial-gradient(48% 54% at 100% 0%,rgba(53,183,255,.15),transparent 74%),
    radial-gradient(40% 48% at 0% 100%,rgba(255,86,199,.12),transparent 74%),
    radial-gradient(34% 42% at 80% 100%,rgba(53,225,160,.08),transparent 72%),
    linear-gradient(155deg,#101a34,#0b1429 72%);
  border-color:rgba(166,213,255,.17);
}
html[data-theme="dark"] .modal-icon{background:conic-gradient(from 210deg,#35b7ff,#8f6cff,#ff56c7,#ffca63,#35e1a0,#35b7ff)}

/* more colorful but readable micro-accents */
html[data-theme="dark"] .card-index{color:rgba(125,231,255,.68)}
html[data-theme="dark"] .public-grid .public-card:nth-child(3) .card-index{color:rgba(255,86,199,.68)}
html[data-theme="dark"] .secret-card .masked-value{letter-spacing:.09em}
html[data-theme="dark"] .secret-card.masked .masked-value{color:#eef7ff;text-shadow:0 0 26px rgba(99,162,255,.12)}
html[data-theme="dark"] .site-footer{background:linear-gradient(90deg,rgba(53,183,255,.025),rgba(143,108,255,.03),rgba(255,86,199,.02),rgba(53,225,160,.025))}

/* LIGHT MODE keeps the same multi-theme identity, much softer */
html[data-theme="light"] body{
  background:
    radial-gradient(52% 42% at 0% 0%,rgba(53,183,255,.10),transparent 70%),
    radial-gradient(42% 38% at 100% 4%,rgba(143,108,255,.08),transparent 72%),
    radial-gradient(36% 34% at 100% 100%,rgba(53,225,160,.07),transparent 74%),
    #f7f9fd;
}
html[data-theme="light"] .hero-stage{
  background:
    radial-gradient(45% 55% at 100% 0%,rgba(53,183,255,.10),transparent 72%),
    radial-gradient(40% 48% at 0% 100%,rgba(255,86,199,.06),transparent 72%),
    rgba(255,255,255,.78);
}

/* =========================================================
   V18 DIGITAL CLARITY — sharper, more digital, less painterly
   ========================================================= */
html[data-theme="dark"]{
  --bg:#040815;
  --bg2:#071024;
  --surface:rgba(10,18,38,.78);
  --surface-strong:rgba(11,22,46,.94);
  --surface-soft:rgba(255,255,255,.05);
  --glass:rgba(10,18,38,.74);
  --glass2:rgba(11,22,46,.88);
  --text:#f7fbff;
  --text2:#d8e5f6;
  --muted:#96aace;
  --line:rgba(206,228,255,.12);
  --line2:rgba(226,238,255,.20);
  --cyan:#79ecff;
  --blue:#4fa0ff;
  --indigo:#6978ff;
  --violet:#9568ff;
  --pink:#ff5ead;
  --coral:#ff7a84;
  --amber:#ffc86d;
  --mint:#35e2bd;
  --shadow-xl:0 54px 160px rgba(0,0,0,.56),0 18px 72px rgba(50,118,255,.18);
  --shadow-lg:0 24px 78px rgba(0,0,0,.42),0 12px 42px rgba(35,96,214,.13);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(48% 50% at 10% 0%,rgba(79,160,255,.22),transparent 56%),
    radial-gradient(36% 40% at 92% 8%,rgba(255,94,173,.14),transparent 50%),
    radial-gradient(34% 36% at 86% 92%,rgba(53,226,189,.12),transparent 46%),
    linear-gradient(180deg,#040816 0%,#081127 55%,#050918 100%);
}
html[data-theme="dark"] .scene{
  background:
    linear-gradient(125deg,rgba(79,160,255,.08) 0%,transparent 24%,transparent 76%,rgba(255,94,173,.06) 100%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
html[data-theme="dark"] .scene:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.03) 48%,transparent 52%,transparent 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 120px);
  opacity:.26;
}
html[data-theme="dark"] .mesh{filter:blur(78px);opacity:.34}
html[data-theme="dark"] .m1{width:780px;height:520px;left:-220px;top:-170px;background:linear-gradient(115deg,rgba(121,236,255,.85),rgba(79,160,255,.75),rgba(105,120,255,.72),rgba(255,94,173,.54));border-radius:38% 62% 58% 42%/42% 46% 54% 58%}
html[data-theme="dark"] .m2{width:620px;height:480px;right:-160px;top:40px;background:linear-gradient(140deg,rgba(255,94,173,.55),rgba(149,104,255,.55),rgba(79,160,255,.62));border-radius:42% 58% 36% 64%/50% 44% 56% 50%;opacity:.20}
html[data-theme="dark"] .m3{width:760px;height:300px;left:36%;bottom:-170px;background:linear-gradient(90deg,rgba(53,226,189,.50),rgba(79,160,255,.56),rgba(255,94,173,.38));border-radius:50%;opacity:.12}
html[data-theme="dark"] .grain{opacity:.012}
html[data-theme="dark"] .hero-stage{
  min-height:760px;
  background:
    linear-gradient(118deg,rgba(255,255,255,.06),transparent 20%,transparent 68%,rgba(255,255,255,.04) 100%),
    radial-gradient(40% 56% at 76% 48%,rgba(79,160,255,.16),transparent 54%),
    radial-gradient(24% 26% at 70% 78%,rgba(255,94,173,.12),transparent 50%),
    linear-gradient(145deg,#0b1630 0%,#071227 48%,#0a1a35 100%);
  border:1px solid rgba(215,233,255,.12);
  box-shadow:0 58px 170px rgba(0,0,0,.52),0 20px 74px rgba(43,105,224,.16),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
html[data-theme="dark"] .hero-stage:before{
  background:
    linear-gradient(115deg,rgba(255,255,255,.10),transparent 18%,transparent 72%,rgba(255,255,255,.03) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 140px);
  opacity:.85;
}
html[data-theme="dark"] .hero-stage:after{
  width:700px;height:700px;right:-160px;top:-180px;
  background:radial-gradient(circle,rgba(79,160,255,.22) 0%,rgba(121,236,255,.16) 22%,rgba(149,104,255,.12) 44%,rgba(255,94,173,.08) 62%,transparent 74%);
  filter:blur(46px);opacity:1;
}
html[data-theme="dark"] .hero-copy h1{
  background:linear-gradient(90deg,#f6fbff 0%,#b8f7ff 16%,#64d2ff 34%,#5895ff 52%,#8c6fff 70%,#ff67bb 86%,#ffd06e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .hero-role{color:#f0f6ff}
html[data-theme="dark"] .hero-summary{color:#a8bbd7}
html[data-theme="dark"] .hero-facts div{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-color:rgba(220,236,255,.14);
  backdrop-filter:blur(20px) saturate(150%);
}
html[data-theme="dark"] .portrait-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    linear-gradient(145deg,#0b1630,#081226 52%,#0b1731 100%);
  border-color:rgba(227,239,255,.18);
  box-shadow:0 54px 120px rgba(0,0,0,.46),0 18px 60px rgba(45,108,229,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .portrait-empty{background:radial-gradient(circle at 55% 34%,rgba(121,236,255,.24),transparent 18%),radial-gradient(circle at 62% 68%,rgba(255,94,173,.16),transparent 20%),linear-gradient(145deg,#0e1a36,#071126 58%,#0c1730)}
html[data-theme="dark"] .portrait-glass{background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 20%,transparent 72%,rgba(79,160,255,.08))}
html[data-theme="dark"] .spectra-card,
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .vault{
  background:linear-gradient(155deg,rgba(12,21,42,.94),rgba(8,15,31,.98));
  border-color:rgba(219,236,255,.12);
  box-shadow:0 26px 78px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .public-card-wide{
  background:
    linear-gradient(115deg,rgba(79,160,255,.10),transparent 36%,transparent 70%,rgba(255,94,173,.06) 100%),
    linear-gradient(155deg,rgba(12,21,42,.95),rgba(8,15,31,.98));
}
html[data-theme="dark"] .vault{
  background:
    linear-gradient(115deg,rgba(79,160,255,.08),transparent 28%,transparent 72%,rgba(53,226,189,.05) 100%),
    linear-gradient(155deg,rgba(12,21,42,.97),rgba(8,15,31,.99));
}
html[data-theme="dark"] .secret-card:hover,
html[data-theme="dark"] .public-card:hover,
html[data-theme="dark"] .access-panel:hover{box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 0 1px rgba(220,236,255,.04),0 0 44px rgba(79,160,255,.10)}
html[data-theme="dark"] .privacy-pill{background:linear-gradient(135deg,rgba(79,160,255,.18),rgba(149,104,255,.15));color:#d8e8ff}
html[data-theme="dark"] .flow-number,
html[data-theme="dark"] .modal-icon{background:linear-gradient(135deg,#4fa0ff,#6978ff 56%,#ff5ead);box-shadow:0 18px 40px rgba(49,105,225,.26)}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(90deg,#4fa0ff 0%,#6978ff 38%,#ff5ead 78%,#ffc86d 100%);
  box-shadow:0 18px 40px rgba(49,105,225,.24),0 10px 26px rgba(255,94,173,.10);
}
html[data-theme="dark"] .action-btn.dark{background:linear-gradient(180deg,#101a33,#122041);border-color:rgba(219,236,255,.14)}
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .otp-input{
  background:linear-gradient(180deg,rgba(8,14,28,.92),rgba(10,17,32,.98));
  border-color:rgba(218,236,255,.14);
}
html[data-theme="dark"] .access-form input:focus,
html[data-theme="dark"] .otp-input:focus{box-shadow:0 0 0 4px rgba(79,160,255,.12),0 0 24px rgba(79,160,255,.16)}
html[data-theme="dark"] .modal-card{
  background:
    linear-gradient(115deg,rgba(79,160,255,.10),transparent 34%,transparent 74%,rgba(255,94,173,.07) 100%),
    linear-gradient(155deg,rgba(12,21,42,.97),rgba(8,15,31,.99));
}
html[data-theme="dark"] .site-footer{border-top:1px solid rgba(219,236,255,.08)}

/* =========================================================
   V19 CHROMA SIGNATURE — high-end colorful digital system
   ========================================================= */
html[data-theme="dark"]{
  --ink-0:#030611;
  --ink-1:#071127;
  --ink-2:#0b1732;
  --electric:#4ca8ff;
  --aqua:#68efff;
  --emerald:#32e1b5;
  --iris:#776cff;
  --violet2:#a85fff;
  --magenta:#ff56b2;
  --ruby:#ff536b;
  --sun:#ffc75e;
  --ice:#eef8ff;
}
html[data-theme="dark"] body{
  background:
    linear-gradient(125deg,rgba(76,168,255,.075),transparent 22%,transparent 78%,rgba(255,86,178,.055)),
    linear-gradient(180deg,var(--ink-0) 0%,#061026 45%,#040914 100%);
}
html[data-theme="dark"] .scene{background:linear-gradient(180deg,var(--ink-0),#061027 62%,#050916)}
html[data-theme="dark"] .scene:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(104,239,255,.055) 7.05%,transparent 7.1% 92%,rgba(255,86,178,.045) 92.05%,transparent 92.1%),
    repeating-linear-gradient(90deg,rgba(180,217,255,.018) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(180deg,rgba(180,217,255,.014) 0 1px,transparent 1px 132px);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 85%);mask-image:linear-gradient(to bottom,black,transparent 85%);
}
html[data-theme="dark"] .scene:after{
  content:"";position:absolute;left:7%;right:7%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#68efff 12%,#4ca8ff 29%,#776cff 47%,#ff56b2 66%,#ffc75e 82%,transparent);
  opacity:.82;box-shadow:0 0 28px rgba(76,168,255,.38);
}
html[data-theme="dark"] .mesh{filter:blur(70px);opacity:.25}
html[data-theme="dark"] .m1{width:640px;height:360px;left:-190px;top:30px;background:linear-gradient(110deg,#68efff,#4ca8ff 45%,#776cff);border-radius:42% 58% 55% 45%/48% 46% 54% 52%}
html[data-theme="dark"] .m2{width:560px;height:360px;right:-160px;top:120px;background:linear-gradient(110deg,#a85fff,#ff56b2 55%,#ffc75e);border-radius:50%;opacity:.15}
html[data-theme="dark"] .m3{width:650px;height:220px;left:38%;bottom:-80px;background:linear-gradient(90deg,#32e1b5,#4ca8ff,#ff56b2);opacity:.08}
html[data-theme="dark"] .grain{opacity:.006}

html[data-theme="dark"] .topbar{padding-top:29px;padding-bottom:18px}
html[data-theme="dark"] .identity{gap:15px}
html[data-theme="dark"] .identity-copy strong{font-size:14px;letter-spacing:-.035em}
html[data-theme="dark"] .identity-copy small{font-size:8px;letter-spacing:.22em;color:#92acd1}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:#0b142a;
  border:1px solid rgba(210,232,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 34px rgba(0,0,0,.25);
}

html[data-theme="dark"] .hero-stage{
  --mx:72%;--my:38%;
  min-height:720px;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.82fr);
  gap:68px;
  padding:78px 84px;
  border-radius:42px;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(104,239,255,.115),transparent 52%),
    linear-gradient(115deg,rgba(76,168,255,.075),transparent 24%,transparent 76%,rgba(255,86,178,.055)),
    linear-gradient(145deg,#0b1731 0%,#071126 48%,#0a1730 100%);
  border:1px solid rgba(211,232,255,.13);
  box-shadow:0 60px 180px rgba(0,0,0,.52),0 20px 70px rgba(31,89,203,.16),inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] .hero-stage:before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;opacity:1;
  background:linear-gradient(90deg,#68efff 0%,#4ca8ff 21%,#776cff 42%,#ff56b2 64%,#ff536b 79%,#ffc75e 100%);
  box-shadow:0 0 32px rgba(76,168,255,.22);
}
html[data-theme="dark"] .hero-stage:after{
  width:460px;height:460px;right:-90px;top:-120px;
  background:linear-gradient(135deg,rgba(104,239,255,.18),rgba(76,168,255,.12) 35%,rgba(119,108,255,.10) 58%,rgba(255,86,178,.08));
  border-radius:44% 56% 52% 48%;filter:blur(48px);opacity:.85;
}
html[data-theme="dark"] .eyebrow{color:#a9c0de;letter-spacing:.205em}
html[data-theme="dark"] .eyebrow span{background:linear-gradient(135deg,#68efff,#776cff);box-shadow:0 0 0 6px rgba(76,168,255,.10),0 0 18px rgba(104,239,255,.30)}
html[data-theme="dark"] .hero-copy h1{
  font-size:clamp(74px,7vw,122px);line-height:.88;letter-spacing:-.083em;font-weight:780;
  background:linear-gradient(92deg,#f7fbff 0%,#c9f7ff 15%,#67e9ff 29%,#4ba4ff 45%,#7c70ff 61%,#ff5db7 78%,#ffce69 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 16px 36px rgba(38,89,190,.10));
}
html[data-theme="dark"] .hero-role{font-size:clamp(23px,2vw,35px);font-weight:670;color:#edf5ff}
html[data-theme="dark"] .hero-summary{font-size:15.5px;line-height:1.86;color:#a9bdd8;max-width:680px}
html[data-theme="dark"] .hero-facts{gap:11px}
html[data-theme="dark"] .hero-facts div{min-width:145px;border-radius:16px;padding:15px 17px;background:#0c1933;border:1px solid rgba(212,234,255,.12)}
html[data-theme="dark"] .hero-facts div:nth-child(1){box-shadow:inset 0 2px 0 rgba(104,239,255,.62)}
html[data-theme="dark"] .hero-facts div:nth-child(2){box-shadow:inset 0 2px 0 rgba(50,225,181,.62)}
html[data-theme="dark"] .hero-facts div:nth-child(3){box-shadow:inset 0 2px 0 rgba(255,199,94,.62)}
html[data-theme="dark"] .hero-facts small{color:#8ba4c5}
html[data-theme="dark"] .hero-facts strong{color:#f7fbff}

html[data-theme="dark"] .hero-art{min-height:540px}
html[data-theme="dark"] .orbit-a{border-color:rgba(104,239,255,.11);box-shadow:inset 0 0 80px rgba(76,168,255,.055)}
html[data-theme="dark"] .orbit-b{border-color:rgba(255,86,178,.09)}
html[data-theme="dark"] .portrait-card{
  width:min(400px,88%);height:505px;border-radius:38px;transform:rotate(.7deg);
  background:linear-gradient(145deg,#0d1a36,#071126 55%,#0d1934);
  border:1px solid rgba(218,236,255,.16);
  box-shadow:0 48px 110px rgba(0,0,0,.44),0 16px 54px rgba(42,99,217,.14),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .portrait-card:before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(104,239,255,.62),rgba(76,168,255,.08) 25%,rgba(119,108,255,.05) 52%,rgba(255,86,178,.42) 78%,rgba(255,199,94,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
html[data-theme="dark"] .portrait-empty{background:linear-gradient(145deg,#0d1b38,#08122a)}
html[data-theme="dark"] .portrait-badge{background:#091326;border-color:rgba(218,236,255,.12);border-radius:15px}
html[data-theme="dark"] .spectra-card{background:#0a1429;border-color:rgba(213,233,255,.13);border-radius:16px}
html[data-theme="dark"] .spectra-one{box-shadow:inset 2px 0 0 #ff5db7,0 18px 44px rgba(0,0,0,.24)}
html[data-theme="dark"] .spectra-two{box-shadow:inset 2px 0 0 #32e1b5,0 18px 44px rgba(0,0,0,.24)}

html[data-theme="dark"] .section-intro{padding-top:95px}
html[data-theme="dark"] .section-tag{color:#91aaca;letter-spacing:.22em}
html[data-theme="dark"] .section-intro h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="dark"] .access-head h2{font-weight:730;letter-spacing:-.058em;color:#f7fbff}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .vault-head p,
html[data-theme="dark"] .access-head p{color:#9fb3ce}

html[data-theme="dark"] .public-grid{gap:18px}
html[data-theme="dark"] .public-card{
  position:relative;overflow:hidden;border-radius:26px;background:#0a152c;border:1px solid rgba(213,233,255,.105);
  box-shadow:0 24px 64px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
html[data-theme="dark"] .public-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-accent,#4ca8ff)}
html[data-theme="dark"] .public-card:nth-child(1){--card-accent:linear-gradient(#68efff,#4ca8ff,#776cff)}
html[data-theme="dark"] .public-card:nth-child(2){--card-accent:linear-gradient(#32e1b5,#68efff)}
html[data-theme="dark"] .public-card:nth-child(3){--card-accent:linear-gradient(#a85fff,#ff56b2)}
html[data-theme="dark"] .public-card:nth-child(4){--card-accent:linear-gradient(#ffc75e,#ff7a84)}
html[data-theme="dark"] .public-card:hover{transform:translateY(-5px);border-color:rgba(220,238,255,.17);box-shadow:0 32px 82px rgba(0,0,0,.30),0 0 42px rgba(76,168,255,.07)}
html[data-theme="dark"] .public-card-wide{background:linear-gradient(120deg,rgba(76,168,255,.055),transparent 36%),#0a152c}
html[data-theme="dark"] .card-spectrum{height:3px;background:linear-gradient(90deg,#68efff,#4ca8ff,#776cff,#ff56b2,#ffc75e)}

html[data-theme="dark"] .vault{
  position:relative;overflow:hidden;border-radius:34px;padding:52px;
  background:#081329;border:1px solid rgba(213,233,255,.11);
  box-shadow:0 32px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .vault:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#4ca8ff,#776cff,#ff56b2,#ff536b,#ffc75e,#32e1b5)}
html[data-theme="dark"] .vault-aurora{filter:blur(60px);opacity:.10}
html[data-theme="dark"] .secret-grid{gap:16px}
html[data-theme="dark"] .secret-card{
  --secret:#4ca8ff;position:relative;border-radius:22px;background:#0c1730;border:1px solid rgba(213,233,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
html[data-theme="dark"] .secret-card:after{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:var(--secret);box-shadow:0 0 18px color-mix(in srgb,var(--secret) 34%,transparent)}
html[data-theme="dark"] .secret-card:nth-child(1){--secret:#4ca8ff}
html[data-theme="dark"] .secret-card:nth-child(2){--secret:#9568ff}
html[data-theme="dark"] .secret-card:nth-child(3){--secret:#ff56b2}
html[data-theme="dark"] .secret-card:nth-child(4){--secret:#ff536b}
html[data-theme="dark"] .secret-card:nth-child(5){--secret:#32e1b5}
html[data-theme="dark"] .secret-card:hover{transform:translateY(-4px);border-color:rgba(221,239,255,.16);box-shadow:0 28px 70px rgba(0,0,0,.28)}
html[data-theme="dark"] .secret-type{color:#92adcc}
html[data-theme="dark"] .privacy-pill{background:#111f3e;border:1px solid rgba(213,233,255,.10);color:#bed1e9}
html[data-theme="dark"] .tap-hint{color:#80bfff}

html[data-theme="dark"] .access-zone{padding-top:88px}
html[data-theme="dark"] .access-flow{gap:18px}
html[data-theme="dark"] .access-panel{
  position:relative;overflow:hidden;border-radius:26px;background:#0a152c;border:1px solid rgba(213,233,255,.105);
  box-shadow:0 24px 68px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .access-panel:nth-child(1){box-shadow:inset 0 3px 0 #4ca8ff,0 24px 68px rgba(0,0,0,.25)}
html[data-theme="dark"] .access-panel:nth-child(2){box-shadow:inset 0 3px 0 #776cff,0 24px 68px rgba(0,0,0,.25)}
html[data-theme="dark"] .access-panel:nth-child(3){box-shadow:inset 0 3px 0 #32e1b5,0 24px 68px rgba(0,0,0,.25)}
html[data-theme="dark"] .flow-number{width:50px;height:50px;border-radius:15px;background:#10213f;border:1px solid rgba(220,238,255,.11);color:#f7fbff;box-shadow:none}
html[data-theme="dark"] .access-panel:nth-child(1) .flow-number{color:#68efff}
html[data-theme="dark"] .access-panel:nth-child(2) .flow-number{color:#9f90ff}
html[data-theme="dark"] .access-panel:nth-child(3) .flow-number{color:#58efc8}
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .otp-input{background:#071126;border:1px solid rgba(213,233,255,.12);border-radius:13px}
html[data-theme="dark"] .access-form input:focus,
html[data-theme="dark"] .otp-input:focus{border-color:#4ca8ff;box-shadow:0 0 0 4px rgba(76,168,255,.10)}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{background:linear-gradient(90deg,#4ca8ff,#776cff 42%,#ff56b2 78%,#ffc75e);box-shadow:0 18px 38px rgba(47,95,215,.20)}
html[data-theme="dark"] .action-btn.dark{background:#101e3a;border:1px solid rgba(213,233,255,.11)}

html[data-theme="dark"] .modal-card{border-radius:28px;background:#09142b;border:1px solid rgba(216,235,255,.13);box-shadow:0 56px 160px rgba(0,0,0,.60)}
html[data-theme="dark"] .modal-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#4ca8ff,#776cff,#ff56b2,#ffc75e)}
html[data-theme="dark"] .modal-icon{background:linear-gradient(135deg,#4ca8ff,#776cff 58%,#ff56b2);box-shadow:0 18px 38px rgba(48,92,205,.22)}
html[data-theme="dark"] .site-footer{margin-top:92px;padding-top:27px;border-top:1px solid rgba(213,233,255,.08)}

/* motion layer: crisp, restrained */
@media (prefers-reduced-motion:no-preference){
  .lux-reveal{opacity:0;transform:translateY(18px);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1)}
  .lux-reveal.is-visible{opacity:1;transform:none}
}

@media(max-width:1180px){
  html[data-theme="dark"] .hero-stage{grid-template-columns:1fr;padding:60px;border-radius:34px}
}
@media(max-width:760px){
  html[data-theme="dark"] .hero-stage{padding:34px 22px;border-radius:26px}
  html[data-theme="dark"] .hero-copy h1{font-size:60px}
  html[data-theme="dark"] .vault{padding:28px 20px;border-radius:28px}
}

/* =========================================================
   V20 RUBY EMERALD SAPPHIRE — sharp web-magazine look
   ========================================================= */
html[data-theme="dark"]{
  --bg:#040814;
  --bg2:#070d1d;
  --surface:rgba(10,15,31,.78);
  --surface-strong:rgba(10,17,34,.94);
  --surface-soft:rgba(255,255,255,.048);
  --glass:rgba(10,15,31,.74);
  --glass2:rgba(10,17,34,.88);
  --text:#f8fbff;
  --text2:#dfe8f7;
  --muted:#9fb0c8;
  --line:rgba(223,235,255,.12);
  --line2:rgba(233,241,255,.20);
  --cyan:#74e9ff;
  --blue:#2e6dff;
  --indigo:#4b57ff;
  --violet:#875fff;
  --pink:#ff4f8f;
  --coral:#ff5b6e;
  --amber:#ffc968;
  --mint:#18d79b;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(48% 44% at 6% 0%,rgba(46,109,255,.20),transparent 52%),
    radial-gradient(34% 28% at 100% 8%,rgba(255,79,143,.16),transparent 48%),
    radial-gradient(32% 30% at 88% 100%,rgba(24,215,155,.12),transparent 46%),
    linear-gradient(180deg,#050916 0%,#071022 56%,#040813 100%);
}
html[data-theme="dark"] .scene{
  background:
    linear-gradient(120deg,rgba(46,109,255,.08),transparent 28%,transparent 72%,rgba(255,79,143,.06)),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
html[data-theme="dark"] .scene:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 96px),
    linear-gradient(180deg,transparent,rgba(255,255,255,.025));
}
html[data-theme="dark"] .mesh{filter:blur(64px);opacity:.28}
html[data-theme="dark"] .m1{width:760px;height:360px;left:-170px;top:-70px;border-radius:999px;background:linear-gradient(90deg,rgba(46,109,255,.72),rgba(24,215,155,.52));}
html[data-theme="dark"] .m2{width:540px;height:300px;right:-120px;top:40px;border-radius:999px;background:linear-gradient(90deg,rgba(255,79,143,.56),rgba(46,109,255,.42));opacity:.18}
html[data-theme="dark"] .m3{width:680px;height:220px;left:40%;bottom:-60px;border-radius:999px;background:linear-gradient(90deg,rgba(24,215,155,.28),rgba(46,109,255,.34),rgba(255,79,143,.24));opacity:.10}
html[data-theme="dark"] .grain{opacity:.008}

html[data-theme="dark"] .topbar{padding-top:28px}
html[data-theme="dark"] .identity-copy strong{font-weight:800;letter-spacing:-.03em}
html[data-theme="dark"] .identity-copy small{letter-spacing:.22em;color:#b7c5d9}
html[data-theme="dark"] .aura-mark i{background:conic-gradient(from 210deg,#2e6dff,#18d79b,#74e9ff,#ff4f8f,#ffc968,#2e6dff)}
html[data-theme="dark"] .aura-mark b{background:linear-gradient(135deg,#18d79b,#ffc968)}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:linear-gradient(180deg,rgba(10,16,31,.76),rgba(10,17,34,.92));
  border-color:rgba(233,241,255,.12);
  box-shadow:0 12px 32px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .language-switch a.active{background:linear-gradient(135deg,#f9fcff,#dce9ff);color:#08101e}
html[data-theme="dark"] .verified-chip{background:linear-gradient(135deg,rgba(24,215,155,.12),rgba(46,109,255,.10));border-color:rgba(24,215,155,.28);color:#b1ffea}

html[data-theme="dark"] .hero-stage{
  min-height:770px;
  padding:88px 88px 80px;
  border-radius:52px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    linear-gradient(145deg,#0c1630 0%,#081122 50%,#0c1631 100%);
  border:1px solid rgba(226,238,255,.12);
  box-shadow:0 56px 160px rgba(0,0,0,.52),0 16px 60px rgba(25,83,198,.18);
}
html[data-theme="dark"] .hero-stage:before{
  background:
    linear-gradient(90deg,transparent 0,rgba(255,255,255,.030) 50%,transparent 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 110px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.010) 0 1px,transparent 1px 110px);
  opacity:.9;
}
html[data-theme="dark"] .hero-stage:after{
  width:700px;height:700px;right:-140px;top:-170px;
  background:
    radial-gradient(circle at 30% 30%,rgba(46,109,255,.22),transparent 25%),
    radial-gradient(circle at 58% 52%,rgba(24,215,155,.15),transparent 18%),
    radial-gradient(circle at 62% 70%,rgba(255,79,143,.14),transparent 16%),
    radial-gradient(circle at center,rgba(255,255,255,.05),transparent 40%);
  filter:blur(28px);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-tag{color:#bfd0e4;letter-spacing:.20em}
html[data-theme="dark"] .eyebrow span{background:linear-gradient(135deg,#2e6dff,#18d79b);box-shadow:0 0 0 6px rgba(46,109,255,.12)}
html[data-theme="dark"] .hero-copy h1{
  font-weight:820;
  letter-spacing:-.085em;
  background:linear-gradient(90deg,#ffffff 0%,#c8f4ff 14%,#63d8ff 28%,#2e6dff 48%,#18d79b 68%,#ff4f8f 86%,#ffc968 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .hero-role{font-size:clamp(24px,2vw,40px);font-weight:650;color:#f2f7ff}
html[data-theme="dark"] .hero-summary{font-size:16px;line-height:1.85;color:#afbed2;max-width:680px}
html[data-theme="dark"] .hero-facts div{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(230,240,255,.14)}
html[data-theme="dark"] .hero-facts small{color:#aebfd6}
html[data-theme="dark"] .hero-facts strong{color:#f7fbff}

html[data-theme="dark"] .portrait-card{
  border-radius:46px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    linear-gradient(150deg,#0b1530,#081121 54%,#0d1732 100%);
  border-color:rgba(230,240,255,.18);
}
html[data-theme="dark"] .portrait-empty{background:linear-gradient(150deg,#0d1732,#081121 56%,#0b1530 100%)}
html[data-theme="dark"] .portrait-badge{background:rgba(8,13,25,.80);border-color:rgba(231,240,255,.16)}
html[data-theme="dark"] .spectra-card{background:linear-gradient(155deg,rgba(11,19,37,.88),rgba(9,15,29,.95));border-color:rgba(226,238,255,.13)}

html[data-theme="dark"] .section-intro{align-items:end}
html[data-theme="dark"] .section-intro h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="dark"] .access-head h2,
html[data-theme="dark"] .modal-card h2{font-weight:760;letter-spacing:-.045em;color:#f9fcff}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .vault-head p,
html[data-theme="dark"] .access-head p,
html[data-theme="dark"] .modal-card p{color:#a6b7cc}

html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .vault,
html[data-theme="dark"] .flash{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(11,18,35,.95),rgba(8,14,28,.98));
  border-color:rgba(226,238,255,.12);
  box-shadow:0 24px 72px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .public-card:before,
html[data-theme="dark"] .secret-card:before,
html[data-theme="dark"] .access-panel:before,
html[data-theme="dark"] .vault:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#2e6dff 0%,#18d79b 46%,#ff4f8f 82%,#ffc968 100%);
  opacity:.9;
}
html[data-theme="dark"] .public-card-wide{background:linear-gradient(160deg,rgba(11,18,35,.96),rgba(8,14,28,.98))}
html[data-theme="dark"] .public-card-wide .card-content{max-width:760px}
html[data-theme="dark"] .card-index{color:#89a0be}
html[data-theme="dark"] .public-card span,
html[data-theme="dark"] .public-card p{color:#9fb0c8}
html[data-theme="dark"] .public-card h3{color:#f7fbff}
html[data-theme="dark"] .public-card:nth-child(2){box-shadow:0 22px 64px rgba(0,0,0,.26),0 0 0 1px rgba(46,109,255,.08)}
html[data-theme="dark"] .public-card:nth-child(3){box-shadow:0 22px 64px rgba(0,0,0,.26),0 0 0 1px rgba(255,79,143,.08)}
html[data-theme="dark"] .public-card:nth-child(4){box-shadow:0 22px 64px rgba(0,0,0,.26),0 0 0 1px rgba(255,201,104,.08)}
html[data-theme="dark"] .public-card:nth-child(5){box-shadow:0 22px 64px rgba(0,0,0,.26),0 0 0 1px rgba(24,215,155,.08)}
html[data-theme="dark"] .card-spectrum{background:linear-gradient(90deg,#2e6dff,#18d79b,#ff4f8f,#ffc968)}
html[data-theme="dark"] .mini-orb.cyan{background:radial-gradient(circle at 35% 30%,#d9fcff,#74e9ff 34%,#2e6dff 80%)}
html[data-theme="dark"] .mini-orb.violet{background:radial-gradient(circle at 35% 30%,#ffe0f0,#ff4f8f 38%,#875fff 80%)}
html[data-theme="dark"] .mini-orb.amber{background:radial-gradient(circle at 35% 30%,#fff4cf,#ffc968 38%,#ff7c57 80%)}

html[data-theme="dark"] .vault{background:linear-gradient(160deg,rgba(11,18,35,.97),rgba(8,14,28,.99))}
html[data-theme="dark"] .vault-state{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(226,238,255,.12)}
html[data-theme="dark"] .vault-state.open{box-shadow:0 0 0 1px rgba(24,215,155,.14),0 16px 38px rgba(0,0,0,.16)}
html[data-theme="dark"] .secret-card:hover{transform:translateY(-4px);box-shadow:0 30px 84px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03)}
html[data-theme="dark"] .secret-type{color:#9ec3ea}
html[data-theme="dark"] .secret-card h3{font-weight:730;color:#f8fbff}
html[data-theme="dark"] .masked-value{color:#f2f7ff;letter-spacing:-.02em}
html[data-theme="dark"] .privacy-pill{background:linear-gradient(135deg,rgba(46,109,255,.18),rgba(255,79,143,.14));border:1px solid rgba(198,221,255,.16);color:#d8e6ff}
html[data-theme="dark"] .tap-hint{color:#b3d3ff}

html[data-theme="dark"] .access-panel{background:linear-gradient(160deg,rgba(11,18,35,.95),rgba(8,14,28,.98))}
html[data-theme="dark"] .flow-number{background:linear-gradient(135deg,#2e6dff,#18d79b 46%,#ff4f8f 78%,#ffc968);box-shadow:0 16px 38px rgba(33,86,198,.26)}
html[data-theme="dark"] .flow-copy small{color:#9cbce0}
html[data-theme="dark"] .flow-copy h3{color:#f8fbff}
html[data-theme="dark"] .flow-copy p{color:#a0b3cb}
html[data-theme="dark"] .access-form label span{color:#dfe9f8}
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .otp-input{background:linear-gradient(180deg,rgba(8,13,25,.94),rgba(10,16,30,.99));border-color:rgba(229,240,255,.14);color:#f7fbff}
html[data-theme="dark"] .access-form input:focus,
html[data-theme="dark"] .otp-input:focus{border-color:rgba(46,109,255,.54);box-shadow:0 0 0 4px rgba(46,109,255,.10),0 0 24px rgba(46,109,255,.16)}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{background:linear-gradient(90deg,#2e6dff 0%,#18d79b 42%,#ff4f8f 78%,#ffc968 100%);box-shadow:0 18px 38px rgba(35,85,194,.24),0 8px 20px rgba(255,79,143,.12)}
html[data-theme="dark"] .action-btn.dark{background:linear-gradient(180deg,#101b34,#10192d);border-color:rgba(233,241,255,.12);color:#eef6ff}

html[data-theme="dark"] .modal-card{background:linear-gradient(160deg,rgba(11,18,35,.98),rgba(8,14,28,.99))}
html[data-theme="dark"] .modal-icon{background:linear-gradient(135deg,#2e6dff,#18d79b 42%,#ff4f8f 78%,#ffc968)}
html[data-theme="dark"] .modal-close{background:rgba(255,255,255,.06);border-color:rgba(233,241,255,.12);color:#f4f8ff}
html[data-theme="dark"] .modal-kicker,
html[data-theme="dark"] .modal-steps span{color:#afc0d6}
html[data-theme="dark"] .modal-steps b{background:#f9fcff;color:#08101e}
html[data-theme="dark"] .site-footer{border-top-color:rgba(233,241,255,.08)}

@media (max-width: 980px){
  html[data-theme="dark"] .hero-stage{padding:54px 28px 44px;border-radius:30px}
}

/* =========================================================
   V21 AMERICAN SIGNATURE — American editorial x Apple-inspired luxury
   ========================================================= */
html[data-theme="dark"]{
  --bg:#020611;
  --bg2:#061022;
  --surface:rgba(7,14,29,.82);
  --surface-strong:rgba(8,17,35,.96);
  --surface-soft:rgba(255,255,255,.048);
  --glass:rgba(7,14,29,.76);
  --glass2:rgba(8,17,35,.90);
  --text:#fbfdff;
  --text2:#e3edf9;
  --muted:#98aac2;
  --line:rgba(224,237,255,.12);
  --line2:rgba(238,245,255,.22);
  --cyan:#7ee9ff;
  --blue:#2b67ff;       /* sapphire */
  --indigo:#4d54ff;
  --violet:#8b63ff;
  --pink:#ff4d83;       /* ruby */
  --coral:#ff6b72;
  --amber:#f7c968;
  --mint:#19d49a;       /* emerald */
  --shadow-xl:0 60px 180px rgba(0,0,0,.58),0 20px 70px rgba(25,76,190,.18);
  --shadow-lg:0 28px 88px rgba(0,0,0,.38),0 12px 36px rgba(29,81,190,.10);
}
html[data-theme="dark"] body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter","Aptos","Segoe UI Variable","Segoe UI","Pretendard Variable","Pretendard",sans-serif;
  background:
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 18%),
    radial-gradient(42% 42% at 0% 0%,rgba(43,103,255,.22),transparent 50%),
    radial-gradient(30% 30% at 100% 4%,rgba(255,77,131,.15),transparent 46%),
    radial-gradient(28% 26% at 84% 100%,rgba(25,212,154,.11),transparent 44%),
    linear-gradient(180deg,#030713 0%,#061022 48%,#030711 100%);
  letter-spacing:-.025em;
}
html[data-theme="dark"] .scene{
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.010) 1px,transparent 1px),
    linear-gradient(180deg,#030713,#061022);
  background-size:120px 120px,120px 120px,auto;
}
html[data-theme="dark"] .scene:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(43,103,255,.10) 18.2% 18.5%,transparent 18.7% 62%,rgba(255,77,131,.08) 62.2% 62.5%,transparent 62.7%),
    radial-gradient(34% 32% at 20% 20%,rgba(43,103,255,.12),transparent 72%),
    radial-gradient(28% 26% at 84% 82%,rgba(25,212,154,.08),transparent 72%);
}
html[data-theme="dark"] .mesh{filter:blur(52px);opacity:.20}
html[data-theme="dark"] .m1{width:620px;height:220px;left:-130px;top:40px;background:linear-gradient(90deg,#2b67ff,#19d49a);border-radius:999px}
html[data-theme="dark"] .m2{width:460px;height:190px;right:-100px;top:80px;background:linear-gradient(90deg,#ff4d83,#4d54ff);border-radius:999px;opacity:.14}
html[data-theme="dark"] .m3{width:560px;height:160px;left:46%;bottom:10px;background:linear-gradient(90deg,#19d49a,#2b67ff,#ff4d83);border-radius:999px;opacity:.075}
html[data-theme="dark"] .grain{opacity:.006}

html[data-theme="dark"] .topbar{padding:30px 4px 18px}
html[data-theme="dark"] .identity{gap:15px}
html[data-theme="dark"] .identity-copy strong{font-size:14px;font-weight:820;letter-spacing:-.035em;color:#fbfdff}
html[data-theme="dark"] .identity-copy small{font-size:8px;letter-spacing:.24em;color:#aabbd0}
html[data-theme="dark"] .aura-mark{filter:drop-shadow(0 16px 34px rgba(43,103,255,.24))}
html[data-theme="dark"] .aura-mark i{background:conic-gradient(from 215deg,#2b67ff,#19d49a,#7ee9ff,#ff4d83,#f7c968,#2b67ff)}
html[data-theme="dark"] .aura-mark b{background:linear-gradient(135deg,#19d49a,#f7c968)}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:rgba(8,15,30,.88);
  border-color:rgba(232,242,255,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(22px) saturate(160%);
}
html[data-theme="dark"] .language-switch a.active{background:#f8fbff;color:#071020;box-shadow:0 8px 22px rgba(43,103,255,.16)}
html[data-theme="dark"] .verified-chip{background:rgba(25,212,154,.09);border-color:rgba(25,212,154,.24);color:#b5ffe9}

html[data-theme="dark"] .page-shell{width:min(1620px,calc(100% - 56px))}
html[data-theme="dark"] .hero-stage{
  min-height:790px;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  gap:70px;
  padding:92px 94px;
  border-radius:48px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05),transparent 20%,transparent 80%,rgba(255,255,255,.025)),
    linear-gradient(145deg,#0a1530 0%,#071022 49%,#09152d 100%);
  border:1px solid rgba(229,240,255,.13);
  box-shadow:0 64px 180px rgba(0,0,0,.55),0 20px 76px rgba(23,74,177,.17),inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] .hero-stage:before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(116deg,rgba(255,255,255,.09),transparent 18%,transparent 82%,rgba(255,255,255,.025));
  background-size:96px 96px,96px 96px,auto;
  opacity:.72;
}
html[data-theme="dark"] .hero-stage:after{
  width:780px;height:780px;right:-190px;top:-190px;filter:blur(30px);opacity:.9;
  background:
    radial-gradient(circle at 32% 24%,rgba(43,103,255,.26),transparent 22%),
    radial-gradient(circle at 60% 46%,rgba(25,212,154,.15),transparent 17%),
    radial-gradient(circle at 66% 70%,rgba(255,77,131,.15),transparent 18%),
    radial-gradient(circle at center,rgba(255,255,255,.04),transparent 46%);
}
html[data-theme="dark"] .hero-copy{max-width:820px}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-tag{font-size:9px;font-weight:900;letter-spacing:.23em;color:#bdcbe0}
html[data-theme="dark"] .eyebrow span{background:linear-gradient(135deg,#2b67ff,#19d49a);box-shadow:0 0 0 6px rgba(43,103,255,.10)}
html[data-theme="dark"] .hero-copy h1{
  font-size:clamp(82px,7.8vw,138px);
  line-height:.86;
  letter-spacing:-.09em;
  font-weight:820;
  margin:28px 0 24px;
  background:linear-gradient(92deg,#ffffff 0%,#eaf6ff 16%,#7ee9ff 30%,#2b67ff 50%,#19d49a 68%,#ff4d83 86%,#f7c968 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .hero-role{font-size:clamp(26px,2.25vw,42px);font-weight:670;letter-spacing:-.055em;color:#f4f8ff}
html[data-theme="dark"] .hero-summary{font-size:16px;line-height:1.9;color:#adbed3;max-width:720px}
html[data-theme="dark"] .hero-facts{gap:12px;margin-top:38px}
html[data-theme="dark"] .hero-facts div{min-width:148px;padding:15px 17px;border-radius:18px;background:rgba(255,255,255,.045);border-color:rgba(233,242,255,.13)}
html[data-theme="dark"] .hero-facts small{letter-spacing:.18em;color:#9fb2ca}
html[data-theme="dark"] .hero-facts strong{color:#f9fcff;font-size:13px}

html[data-theme="dark"] .hero-art{min-height:590px}
html[data-theme="dark"] .portrait-card{
  width:min(445px,90%);height:555px;border-radius:44px;transform:rotate(.35deg);
  background:linear-gradient(160deg,#0c1733,#071021 54%,#0b1730);
  border:1px solid rgba(236,244,255,.20);
  box-shadow:0 58px 130px rgba(0,0,0,.46),0 20px 64px rgba(35,88,203,.17),inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] .portrait-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);pointer-events:none}
html[data-theme="dark"] .portrait-empty{background:linear-gradient(160deg,#0c1733,#071021 54%,#0b1730)}
html[data-theme="dark"] .portrait-glass{background:linear-gradient(155deg,rgba(255,255,255,.12),transparent 22%,transparent 75%,rgba(43,103,255,.08))}
html[data-theme="dark"] .portrait-badge{border-radius:17px;background:rgba(5,10,22,.84);border-color:rgba(235,244,255,.14)}
html[data-theme="dark"] .orbit-a{width:530px;height:530px;border-color:rgba(43,103,255,.15);box-shadow:inset 0 0 70px rgba(43,103,255,.05)}
html[data-theme="dark"] .orbit-b{width:450px;height:450px;border-color:rgba(25,212,154,.11)}
html[data-theme="dark"] .spectra-card{border-radius:16px;background:rgba(7,14,29,.86);border-color:rgba(232,242,255,.13);box-shadow:0 18px 42px rgba(0,0,0,.25)}

html[data-theme="dark"] .section-intro{padding:105px 28px 38px;border-bottom:1px solid rgba(231,241,255,.08);margin-bottom:22px}
html[data-theme="dark"] .section-intro h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="dark"] .access-head h2{font-size:clamp(46px,4.9vw,78px);font-weight:790;letter-spacing:-.07em}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .vault-head p,
html[data-theme="dark"] .access-head p{font-size:13px;color:#a4b5ca}

html[data-theme="dark"] .public-grid{grid-template-columns:1.45fr .62fr .62fr;gap:18px}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .vault,
html[data-theme="dark"] .flash{
  background:linear-gradient(160deg,rgba(10,17,34,.97),rgba(7,13,27,.99));
  border-color:rgba(231,241,255,.12);
  box-shadow:0 28px 84px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card{border-radius:26px}
html[data-theme="dark"] .public-card:before,
html[data-theme="dark"] .secret-card:before,
html[data-theme="dark"] .access-panel:before,
html[data-theme="dark"] .vault:before{height:3px;background:linear-gradient(90deg,#2b67ff 0%,#19d49a 46%,#ff4d83 80%,#f7c968 100%)}
html[data-theme="dark"] .public-card h3{font-weight:740;letter-spacing:-.055em}
html[data-theme="dark"] .public-card p{color:#9fb1c9}
html[data-theme="dark"] .card-spectrum{background:linear-gradient(90deg,#2b67ff,#19d49a,#ff4d83,#f7c968)}

html[data-theme="dark"] .vault{margin-top:94px;border-radius:42px;padding:52px}
html[data-theme="dark"] .vault-state{border-radius:18px;background:rgba(255,255,255,.04);border-color:rgba(234,243,255,.12)}
html[data-theme="dark"] .secret-grid{gap:16px}
html[data-theme="dark"] .secret-card{min-height:220px}
html[data-theme="dark"] .secret-card h3{font-size:20px;font-weight:740}
html[data-theme="dark"] .masked-value{font-size:17px;color:#eff5ff}
html[data-theme="dark"] .privacy-pill{background:rgba(43,103,255,.10);border-color:rgba(43,103,255,.18);color:#cfe0ff}
html[data-theme="dark"] .secret-card:hover{transform:translateY(-5px);border-color:rgba(235,244,255,.18);box-shadow:0 34px 94px rgba(0,0,0,.34),0 12px 36px rgba(32,85,197,.10)}

html[data-theme="dark"] .access-zone{margin-top:100px;padding:54px;border-radius:42px;background:linear-gradient(160deg,rgba(10,17,34,.97),rgba(7,13,27,.99));border-color:rgba(231,241,255,.12)}
html[data-theme="dark"] .access-flow{gap:16px}
html[data-theme="dark"] .access-panel{border-radius:24px;min-height:500px}
html[data-theme="dark"] .flow-number{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,#2b67ff,#19d49a 48%,#ff4d83);box-shadow:0 14px 34px rgba(35,85,194,.22)}
html[data-theme="dark"] .flow-copy h3{font-size:30px;font-weight:740}
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .otp-input{border-radius:13px;background:#081225;border-color:rgba(234,243,255,.13)}
html[data-theme="dark"] .action-btn{border-radius:13px}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{background:linear-gradient(90deg,#2b67ff 0%,#19d49a 45%,#ff4d83 82%,#f7c968 100%);box-shadow:0 18px 42px rgba(31,78,181,.24),0 8px 22px rgba(255,77,131,.10)}
html[data-theme="dark"] .action-btn.dark{background:#111d37}

html[data-theme="dark"] .modal-card{border-radius:30px;background:linear-gradient(160deg,#0b1730,#071020 100%)}
html[data-theme="dark"] .modal-icon{background:linear-gradient(135deg,#2b67ff,#19d49a 46%,#ff4d83);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .site-footer{margin-top:56px;padding-top:34px;color:#98aac2}

@media(max-width:1180px){
  html[data-theme="dark"] .hero-stage{grid-template-columns:1fr;padding:64px 58px}
  html[data-theme="dark"] .public-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  html[data-theme="dark"] .page-shell{width:calc(100% - 22px)}
  html[data-theme="dark"] .hero-stage{padding:42px 24px 34px;border-radius:28px}
  html[data-theme="dark"] .hero-copy h1{font-size:68px}
  html[data-theme="dark"] .vault,
  html[data-theme="dark"] .access-zone{padding:28px 20px;border-radius:28px}
}

/* =========================================================
   V22 PEARL SPECTRUM — premium light mode
   ========================================================= */
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#eef3f8;
  --surface:rgba(255,255,255,.82);
  --surface-strong:rgba(255,255,255,.96);
  --surface-soft:rgba(13,28,55,.045);
  --glass:rgba(255,255,255,.78);
  --glass2:rgba(255,255,255,.94);
  --text:#08111f;
  --text2:#26364c;
  --muted:#6b7c94;
  --line:rgba(23,50,89,.10);
  --line2:rgba(23,50,89,.16);
  --cyan:#1ab9e8;
  --blue:#2e6dff;
  --indigo:#4f5bff;
  --violet:#7a56ec;
  --pink:#d93c7c;
  --coral:#e75969;
  --amber:#d79524;
  --mint:#119b70;
  --shadow-xl:0 52px 140px rgba(28,52,92,.18),0 16px 48px rgba(55,92,170,.10);
  --shadow-lg:0 24px 70px rgba(40,64,104,.13),0 8px 28px rgba(48,93,180,.07);
}
html[data-theme="light"] body{
  background:
    radial-gradient(46% 42% at 4% 0%,rgba(46,109,255,.10),transparent 58%),
    radial-gradient(30% 30% at 100% 6%,rgba(217,60,124,.08),transparent 52%),
    radial-gradient(28% 28% at 88% 100%,rgba(17,155,112,.08),transparent 50%),
    linear-gradient(180deg,#f8fbff 0%,#f2f6fb 50%,#edf2f8 100%);
}
html[data-theme="light"] .scene{
  background:
    linear-gradient(120deg,rgba(46,109,255,.04),transparent 34%,transparent 70%,rgba(217,60,124,.035)),
    linear-gradient(180deg,#f8fbff,#eef3f8);
}
html[data-theme="light"] .scene:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:
    repeating-linear-gradient(90deg,rgba(31,54,88,.025) 0 1px,transparent 1px 108px),
    repeating-linear-gradient(180deg,rgba(31,54,88,.018) 0 1px,transparent 1px 108px);
}
html[data-theme="light"] .mesh{filter:blur(72px);mix-blend-mode:multiply;opacity:.14}
html[data-theme="light"] .m1{background:linear-gradient(100deg,#2e6dff,#19b7e6,#119b70);border-radius:999px}
html[data-theme="light"] .m2{background:linear-gradient(100deg,#d93c7c,#7a56ec,#2e6dff);border-radius:999px;opacity:.10}
html[data-theme="light"] .m3{background:linear-gradient(90deg,#119b70,#2e6dff,#d93c7c);border-radius:999px;opacity:.06}
html[data-theme="light"] .grain{opacity:.004}

html[data-theme="light"] .identity-copy strong{color:#08111f}
html[data-theme="light"] .identity-copy small{color:#7789a3}
html[data-theme="light"] .aura-mark{filter:drop-shadow(0 12px 24px rgba(42,83,164,.16))}
html[data-theme="light"] .aura-mark i{background:conic-gradient(from 210deg,#2e6dff,#119b70,#20c9f2,#d93c7c,#d79524,#2e6dff)}
html[data-theme="light"] .aura-mark i:after{background:#f4f7fb}
html[data-theme="light"] .aura-mark b{background:linear-gradient(135deg,#119b70,#d79524)}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-switch{
  background:rgba(255,255,255,.84);
  border-color:rgba(32,59,98,.11);
  box-shadow:0 12px 34px rgba(39,69,111,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .theme-toggle{color:#334760}
html[data-theme="light"] .language-switch a{color:#7689a4}
html[data-theme="light"] .language-switch a.active{background:linear-gradient(135deg,#0c1b30,#203b63);color:#fff;box-shadow:0 9px 20px rgba(26,53,94,.18)}
html[data-theme="light"] .verified-chip{background:linear-gradient(135deg,rgba(17,155,112,.09),rgba(46,109,255,.07));border-color:rgba(17,155,112,.18);color:#0e805f}

html[data-theme="light"] .hero-stage{
  min-height:770px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.96) 56%,rgba(243,248,255,.96)),
    linear-gradient(180deg,#fff,#f6f9fd);
  border-color:rgba(27,54,91,.10);
  box-shadow:0 58px 150px rgba(37,64,105,.14),0 18px 50px rgba(40,79,148,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .hero-stage:before{
  background:
    linear-gradient(115deg,rgba(46,109,255,.045),transparent 26%,transparent 70%,rgba(217,60,124,.04)),
    repeating-linear-gradient(90deg,rgba(28,49,79,.015) 0 1px,transparent 1px 120px);
}
html[data-theme="light"] .hero-stage:after{
  width:650px;height:650px;right:-130px;top:-160px;
  background:
    radial-gradient(circle at 34% 34%,rgba(46,109,255,.12),transparent 24%),
    radial-gradient(circle at 60% 52%,rgba(17,155,112,.09),transparent 18%),
    radial-gradient(circle at 64% 72%,rgba(217,60,124,.08),transparent 18%),
    radial-gradient(circle at center,rgba(255,255,255,.9),transparent 46%);
  filter:blur(24px);
}
html[data-theme="light"] .hero-copy h1{
  background:linear-gradient(90deg,#091524 0%,#18345c 18%,#2e6dff 42%,#119b70 66%,#c73770 84%,#b77b18 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .hero-role{color:#1b2e48}
html[data-theme="light"] .hero-summary{color:#63768e}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-tag{color:#6a7d97}
html[data-theme="light"] .eyebrow span{background:linear-gradient(135deg,#2e6dff,#119b70);box-shadow:0 0 0 6px rgba(46,109,255,.08)}
html[data-theme="light"] .hero-facts div{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,249,254,.92));
  border-color:rgba(29,58,97,.10);
  box-shadow:0 12px 30px rgba(41,68,107,.07),inset 0 1px 0 #fff;
}
html[data-theme="light"] .hero-facts small{color:#7b8ca2}
html[data-theme="light"] .hero-facts strong{color:#1c314c}
html[data-theme="light"] .portrait-card{
  background:linear-gradient(150deg,#f7fbff,#eaf1fb 52%,#f8fbff);
  border-color:rgba(25,55,96,.11);
  box-shadow:0 48px 110px rgba(34,61,101,.17),0 14px 44px rgba(43,88,162,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .portrait-empty{background:linear-gradient(145deg,#eff5fd,#dfeaf7 58%,#f4f8fd)}
html[data-theme="light"] .portrait-glass{background:linear-gradient(160deg,rgba(255,255,255,.48),transparent 24%,transparent 72%,rgba(46,109,255,.05))}
html[data-theme="light"] .portrait-badge{background:rgba(255,255,255,.82);border-color:rgba(30,58,96,.11);box-shadow:0 14px 34px rgba(34,60,99,.10)}
html[data-theme="light"] .portrait-badge small{color:#7b8da6}
html[data-theme="light"] .portrait-badge strong{color:#162a45}
html[data-theme="light"] .spectra-card{background:rgba(255,255,255,.86);border-color:rgba(30,58,96,.11);box-shadow:0 16px 38px rgba(33,60,101,.10)}

html[data-theme="light"] .section-intro h2,
html[data-theme="light"] .vault-head h2,
html[data-theme="light"] .access-head h2,
html[data-theme="light"] .modal-card h2{color:#0c1829}
html[data-theme="light"] .section-intro p,
html[data-theme="light"] .vault-head p,
html[data-theme="light"] .access-head p,
html[data-theme="light"] .modal-card p{color:#687b94}

html[data-theme="light"] .public-card,
html[data-theme="light"] .secret-card,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .vault,
html[data-theme="light"] .flash{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,249,253,.98));
  border-color:rgba(26,56,96,.09);
  box-shadow:0 24px 68px rgba(38,63,101,.10),inset 0 1px 0 #fff;
}
html[data-theme="light"] .public-card:before,
html[data-theme="light"] .secret-card:before,
html[data-theme="light"] .access-panel:before,
html[data-theme="light"] .vault:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#2e6dff,#119b70,#d93c7c,#d79524);
  opacity:.9;
}
html[data-theme="light"] .public-card span,
html[data-theme="light"] .public-card p{color:#75879f}
html[data-theme="light"] .public-card h3{color:#12253f}
html[data-theme="light"] .card-spectrum{background:linear-gradient(90deg,#2e6dff,#119b70,#d93c7c,#d79524)}
html[data-theme="light"] .public-card:hover,
html[data-theme="light"] .secret-card:hover,
html[data-theme="light"] .access-panel:hover{box-shadow:0 30px 78px rgba(38,63,101,.13),0 0 0 1px rgba(46,109,255,.04)}

html[data-theme="light"] .vault{
  background:
    radial-gradient(34% 44% at 0% 0%,rgba(46,109,255,.055),transparent 70%),
    radial-gradient(30% 40% at 100% 100%,rgba(17,155,112,.045),transparent 72%),
    linear-gradient(160deg,#ffffff,#f6f9fd 100%);
}
html[data-theme="light"] .vault-state{background:linear-gradient(160deg,#fff,#f1f6fb);border-color:rgba(30,58,96,.10);box-shadow:0 12px 28px rgba(37,62,98,.07)}
html[data-theme="light"] .secret-type{color:#5b7ea7}
html[data-theme="light"] .secret-card h3,
html[data-theme="light"] .masked-value{color:#142742}
html[data-theme="light"] .privacy-pill{background:linear-gradient(135deg,rgba(46,109,255,.08),rgba(217,60,124,.07));border:1px solid rgba(46,109,255,.10);color:#46658c}
html[data-theme="light"] .tap-hint{color:#2e6dff}
html[data-theme="light"] .vault-footnote,
html[data-theme="light"] .vault-footer,
html[data-theme="light"] .vault-footer a{color:#657991}

html[data-theme="light"] .flow-number{background:linear-gradient(135deg,#2e6dff,#119b70 48%,#d93c7c);color:#fff;box-shadow:0 14px 32px rgba(44,83,156,.16)}
html[data-theme="light"] .flow-copy small{color:#6d86a3}
html[data-theme="light"] .flow-copy h3{color:#12253f}
html[data-theme="light"] .flow-copy p{color:#71839a}
html[data-theme="light"] .access-form label span{color:#344a67}
html[data-theme="light"] .access-form input,
html[data-theme="light"] .otp-input{background:#fff;border-color:rgba(28,56,96,.11);color:#12253f;box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(35,62,103,.04)}
html[data-theme="light"] .access-form input:focus,
html[data-theme="light"] .otp-input:focus{border-color:rgba(46,109,255,.40);box-shadow:0 0 0 4px rgba(46,109,255,.07),0 12px 28px rgba(46,109,255,.06)}
html[data-theme="light"] .action-btn.gradient,
html[data-theme="light"] .modal-cta{background:linear-gradient(90deg,#2e6dff,#119b70 44%,#d93c7c 82%,#d79524);box-shadow:0 14px 30px rgba(43,83,156,.18)}
html[data-theme="light"] .action-btn.dark{background:linear-gradient(160deg,#0f2038,#1c385d);border:1px solid rgba(13,32,57,.08);color:#fff}
html[data-theme="light"] .modal-card{background:linear-gradient(160deg,#fff,#f5f8fc)}
html[data-theme="light"] .modal-icon{background:linear-gradient(135deg,#2e6dff,#119b70 46%,#d93c7c);box-shadow:0 14px 30px rgba(42,82,154,.16)}
html[data-theme="light"] .modal-close{background:#f3f6fa;border-color:rgba(27,55,94,.10);color:#18304f}
html[data-theme="light"] .modal-kicker,
html[data-theme="light"] .modal-steps span{color:#6f8198}
html[data-theme="light"] .modal-steps b{background:#132944;color:#fff}
html[data-theme="light"] .site-footer{border-top-color:rgba(27,55,94,.08)}
html[data-theme="light"] .site-footer p,
html[data-theme="light"] .site-footer span{color:#74869d}
html[data-theme="light"] ::selection{background:rgba(46,109,255,.18);color:#08111f}

/* =========================================================
   V23 LIGHT COUTURE — cleaner, brighter, refined light mode
   ========================================================= */
html[data-theme="light"]{
  --bg:#f5f7fb;
  --bg2:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.92);
  --surface-soft:rgba(10,20,40,.035);
  --glass:rgba(255,255,255,.76);
  --glass2:rgba(255,255,255,.92);
  --text:#101723;
  --text2:#2b3444;
  --muted:#718098;
  --line:rgba(15,25,44,.08);
  --line2:rgba(15,25,44,.14);
  --cyan:#66cfff;
  --blue:#2f6fff;
  --indigo:#5e61ff;
  --violet:#8459ff;
  --pink:#ef4a87;
  --coral:#ff6b6b;
  --amber:#f3b64d;
  --mint:#20c99b;
  --shadow-xl:0 38px 100px rgba(28,48,82,.12),0 8px 26px rgba(45,92,190,.08);
  --shadow-lg:0 24px 64px rgba(32,52,88,.10),0 8px 22px rgba(40,84,176,.05);
}
html[data-theme="light"] body{
  background:
    radial-gradient(44% 34% at 0% 0%,rgba(47,111,255,.08),transparent 52%),
    radial-gradient(32% 26% at 100% 0%,rgba(32,201,155,.06),transparent 46%),
    radial-gradient(26% 24% at 92% 100%,rgba(239,74,135,.05),transparent 42%),
    linear-gradient(180deg,#f6f8fc 0%,#fbfcff 48%,#f4f7fb 100%);
}
html[data-theme="light"] .scene{
  background:
    linear-gradient(135deg,rgba(47,111,255,.028),transparent 26%,transparent 74%,rgba(239,74,135,.024) 100%),
    linear-gradient(180deg,#f6f8fc,#ffffff);
}
html[data-theme="light"] .scene:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:
    repeating-linear-gradient(90deg,rgba(12,20,40,.018) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(180deg,rgba(12,20,40,.012) 0 1px,transparent 1px 120px);
}
html[data-theme="light"] .mesh{filter:blur(80px);opacity:.22;mix-blend-mode:normal}
html[data-theme="light"] .m1{background:linear-gradient(90deg,rgba(47,111,255,.36),rgba(102,207,255,.26));border-radius:999px}
html[data-theme="light"] .m2{background:linear-gradient(90deg,rgba(239,74,135,.22),rgba(132,89,255,.18));border-radius:999px;opacity:.16}
html[data-theme="light"] .m3{background:linear-gradient(90deg,rgba(32,201,155,.16),rgba(47,111,255,.16),rgba(239,74,135,.10));border-radius:999px;opacity:.10}
html[data-theme="light"] .grain{opacity:.004}

html[data-theme="light"] .identity-copy strong{color:#0f1723}
html[data-theme="light"] .identity-copy small{color:#708099}
html[data-theme="light"] .aura-mark{filter:drop-shadow(0 12px 22px rgba(47,111,255,.10))}
html[data-theme="light"] .aura-mark i{background:conic-gradient(from 210deg,#2f6fff,#20c99b,#66cfff,#ef4a87,#f3b64d,#2f6fff)}
html[data-theme="light"] .aura-mark b{background:linear-gradient(135deg,#20c99b,#f3b64d)}

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-switch{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,25,44,.08);
  box-shadow:0 12px 28px rgba(32,52,88,.08),inset 0 1px 0 rgba(255,255,255,.75);
}
html[data-theme="light"] .theme-toggle{color:#314156}
html[data-theme="light"] .language-switch a{color:#708099}
html[data-theme="light"] .language-switch a.active{background:linear-gradient(135deg,#2f6fff,#66cfff);color:#fff;box-shadow:0 14px 30px rgba(47,111,255,.18)}
html[data-theme="light"] .verified-chip{background:linear-gradient(135deg,rgba(32,201,155,.10),rgba(47,111,255,.08));border-color:rgba(32,201,155,.18);color:#177d63}

html[data-theme="light"] .hero-stage{
  min-height:760px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.76)),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 48%,#f6f9ff 100%);
  border:1px solid rgba(15,25,44,.07);
  border-radius:48px;
  box-shadow:0 42px 110px rgba(29,49,82,.13),0 10px 28px rgba(43,87,177,.06),inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
}
html[data-theme="light"] .hero-stage:before{
  background:
    linear-gradient(125deg,rgba(255,255,255,.72),transparent 22%,transparent 76%,rgba(255,255,255,.38) 100%),
    repeating-linear-gradient(90deg,rgba(12,20,40,.016) 0 1px,transparent 1px 128px);
  opacity:.92;
}
html[data-theme="light"] .hero-stage:after{
  width:680px;height:680px;right:-120px;top:-160px;
  background:
    radial-gradient(circle at 28% 28%,rgba(47,111,255,.10),transparent 24%),
    radial-gradient(circle at 54% 54%,rgba(32,201,155,.08),transparent 18%),
    radial-gradient(circle at 66% 72%,rgba(239,74,135,.08),transparent 16%),
    radial-gradient(circle at center,rgba(255,255,255,.52),transparent 42%);
  filter:blur(26px);
}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-tag{color:#677992}
html[data-theme="light"] .eyebrow span{background:linear-gradient(135deg,#2f6fff,#20c99b);box-shadow:0 0 0 6px rgba(47,111,255,.08)}
html[data-theme="light"] .hero-copy h1{
  font-weight:820;
  background:linear-gradient(90deg,#111723 0%,#233a6f 18%,#2f6fff 40%,#20c99b 62%,#ef4a87 84%,#f3b64d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .hero-role{color:#243144;font-weight:650}
html[data-theme="light"] .hero-summary{color:#697993;font-size:16px}
html[data-theme="light"] .hero-facts div{background:rgba(255,255,255,.70);border-color:rgba(15,25,44,.08);backdrop-filter:blur(20px)}
html[data-theme="light"] .hero-facts small{color:#7c8ca6}
html[data-theme="light"] .hero-facts strong{color:#162131}
html[data-theme="light"] .portrait-card{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.74));
  border-color:rgba(15,25,44,.08);
  box-shadow:0 38px 90px rgba(31,50,83,.14),0 8px 24px rgba(43,86,176,.06),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .portrait-empty{background:linear-gradient(145deg,#ffffff,#f6faff 60%,#f0f6ff)}
html[data-theme="light"] .portrait-badge{background:rgba(255,255,255,.74);border-color:rgba(15,25,44,.08)}
html[data-theme="light"] .portrait-badge small{color:#71809a}
html[data-theme="light"] .portrait-badge strong{color:#142031}
html[data-theme="light"] .spectra-card{background:rgba(255,255,255,.82);border-color:rgba(15,25,44,.08);box-shadow:0 16px 36px rgba(32,52,88,.10)}
html[data-theme="light"] .spectra-card small{color:#74849d}
html[data-theme="light"] .spectra-card b{color:#162132}

html[data-theme="light"] .section-intro h2,
html[data-theme="light"] .vault-head h2,
html[data-theme="light"] .access-head h2,
html[data-theme="light"] .modal-card h2{color:#121b29}
html[data-theme="light"] .section-intro p,
html[data-theme="light"] .vault-head p,
html[data-theme="light"] .access-head p,
html[data-theme="light"] .modal-card p{color:#6f7f97}

html[data-theme="light"] .public-card,
html[data-theme="light"] .secret-card,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .vault,
html[data-theme="light"] .flash{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));
  border-color:rgba(15,25,44,.08);
  box-shadow:0 22px 58px rgba(31,50,83,.10),0 6px 20px rgba(43,87,177,.05),inset 0 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .public-card:before,
html[data-theme="light"] .secret-card:before,
html[data-theme="light"] .access-panel:before,
html[data-theme="light"] .vault:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#2f6fff 0%,#20c99b 46%,#ef4a87 82%,#f3b64d 100%);
  opacity:.88;
}
html[data-theme="light"] .public-card span,
html[data-theme="light"] .public-card p{color:#718099}
html[data-theme="light"] .public-card h3,
html[data-theme="light"] .public-card-wide h3{color:#131d2b}
html[data-theme="light"] .card-index{color:#91a0b8}
html[data-theme="light"] .card-spectrum{background:linear-gradient(90deg,#2f6fff,#20c99b,#ef4a87,#f3b64d)}
html[data-theme="light"] .mini-orb.cyan{background:radial-gradient(circle at 35% 30%,#ffffff,#66cfff 34%,#2f6fff 82%)}
html[data-theme="light"] .mini-orb.violet{background:radial-gradient(circle at 35% 30%,#fff2f8,#ef4a87 38%,#8459ff 82%)}
html[data-theme="light"] .mini-orb.amber{background:radial-gradient(circle at 35% 30%,#fff9e8,#f3b64d 40%,#ff856a 82%)}

html[data-theme="light"] .vault-state{background:rgba(255,255,255,.72);border-color:rgba(15,25,44,.08)}
html[data-theme="light"] .vault-state.open{box-shadow:0 0 0 1px rgba(32,201,155,.10),0 14px 28px rgba(31,50,83,.08)}
html[data-theme="light"] .secret-type{color:#5e7ca7}
html[data-theme="light"] .secret-card h3,
html[data-theme="light"] .masked-value{color:#131d2b}
html[data-theme="light"] .privacy-pill{background:linear-gradient(135deg,rgba(47,111,255,.12),rgba(239,74,135,.10));border:1px solid rgba(128,152,190,.16);color:#39517c}
html[data-theme="light"] .tap-hint{color:#5179bd}
html[data-theme="light"] .secret-card:hover,
html[data-theme="light"] .public-card:hover,
html[data-theme="light"] .access-panel:hover{transform:translateY(-3px);box-shadow:0 28px 72px rgba(31,50,83,.12),0 10px 24px rgba(43,87,177,.06)}

html[data-theme="light"] .flow-number,
html[data-theme="light"] .modal-icon{background:linear-gradient(135deg,#2f6fff,#20c99b 46%,#ef4a87 78%,#f3b64d);box-shadow:0 12px 28px rgba(47,111,255,.18)}
html[data-theme="light"] .flow-copy small{color:#607895}
html[data-theme="light"] .flow-copy h3{color:#131d2b}
html[data-theme="light"] .flow-copy p{color:#718099}
html[data-theme="light"] .access-form label span{color:#273346}
html[data-theme="light"] .access-form input,
html[data-theme="light"] .otp-input{background:rgba(255,255,255,.88);border-color:rgba(15,25,44,.10);color:#131d2b;box-shadow:inset 0 1px 0 rgba(255,255,255,.86)}
html[data-theme="light"] .access-form input:focus,
html[data-theme="light"] .otp-input:focus{border-color:rgba(47,111,255,.42);box-shadow:0 0 0 4px rgba(47,111,255,.10),0 0 18px rgba(47,111,255,.10)}
html[data-theme="light"] .action-btn.gradient,
html[data-theme="light"] .modal-cta{background:linear-gradient(90deg,#2f6fff 0%,#20c99b 42%,#ef4a87 78%,#f3b64d 100%);box-shadow:0 16px 34px rgba(47,111,255,.18),0 8px 18px rgba(239,74,135,.08)}
html[data-theme="light"] .action-btn.dark{background:linear-gradient(180deg,#eff4fb,#e8eef8);border-color:rgba(15,25,44,.08);color:#223145}
html[data-theme="light"] .modal-close{background:rgba(255,255,255,.78);border-color:rgba(15,25,44,.08);color:#243245}
html[data-theme="light"] .modal-kicker,
html[data-theme="light"] .modal-steps span,
html[data-theme="light"] .vault-footnote,
html[data-theme="light"] .site-footer p,
html[data-theme="light"] .site-footer span{color:#718099}
html[data-theme="light"] .modal-steps b{background:#182338;color:#fff}
html[data-theme="light"] .site-footer{border-top-color:rgba(15,25,44,.08)}
html[data-theme="light"] ::selection{background:rgba(47,111,255,.16);color:#10203c}

/* =========================================================
   V24 LIGHT SIGNATURE — cleaner, more dimensional, more refined
   ========================================================= */
html[data-theme="light"]{
  --bg:#f6f8fb;
  --bg2:#ffffff;
  --surface:rgba(255,255,255,.82);
  --surface-strong:rgba(255,255,255,.96);
  --surface-soft:rgba(8,18,38,.03);
  --glass:rgba(255,255,255,.80);
  --glass2:rgba(255,255,255,.95);
  --text:#0f1722;
  --text2:#253142;
  --muted:#748198;
  --line:rgba(17,26,42,.075);
  --line2:rgba(17,26,42,.13);
  --shadow-xl:0 44px 120px rgba(26,43,75,.10),0 14px 38px rgba(40,86,178,.05),inset 0 1px 0 rgba(255,255,255,.96);
  --shadow-lg:0 28px 72px rgba(26,43,75,.08),0 10px 24px rgba(40,86,178,.04),inset 0 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] body{
  background:
    radial-gradient(34% 24% at 0% 0%,rgba(47,111,255,.05),transparent 48%),
    radial-gradient(22% 18% at 100% 0%,rgba(32,201,155,.04),transparent 36%),
    radial-gradient(20% 16% at 92% 100%,rgba(239,74,135,.035),transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%,#fcfdff 44%,#f5f7fb 100%);
}
html[data-theme="light"] .scene{
  background:
    linear-gradient(180deg,#f7f9fc,#ffffff);
}
html[data-theme="light"] .scene:before{
  opacity:.11;
  background:
    repeating-linear-gradient(90deg,rgba(12,20,40,.014) 0 1px,transparent 1px 144px),
    repeating-linear-gradient(180deg,rgba(12,20,40,.010) 0 1px,transparent 1px 144px);
}
html[data-theme="light"] .mesh{filter:blur(96px);opacity:.14}
html[data-theme="light"] .topbar,
html[data-theme="light"] .page-shell{width:min(1600px,calc(100% - 54px))}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-switch{
  background:rgba(255,255,255,.86);
  border-color:rgba(17,26,42,.075);
  box-shadow:0 14px 32px rgba(27,45,77,.06),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(22px) saturate(140%);
}
html[data-theme="light"] .language-switch a.active{
  background:linear-gradient(135deg,#2f6fff,#61d4ff);
  color:#fff;
  box-shadow:0 12px 24px rgba(47,111,255,.18);
}
html[data-theme="light"] .hero-stage{
  min-height:780px;
  border-radius:46px;
  padding:92px 92px 84px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.84)),
    linear-gradient(145deg,#ffffff 0%,#fafcff 52%,#f7faff 100%);
  border:1px solid rgba(17,26,42,.07);
  box-shadow:0 54px 140px rgba(26,43,75,.12),0 16px 36px rgba(39,83,171,.05),inset 0 1px 0 rgba(255,255,255,.98);
}
html[data-theme="light"] .hero-stage:before{
  background:
    linear-gradient(130deg,rgba(255,255,255,.70),transparent 24%,transparent 78%,rgba(255,255,255,.30) 100%),
    linear-gradient(90deg,transparent 0%,rgba(17,26,42,.016) 50%,transparent 100%);
  opacity:.92;
}
html[data-theme="light"] .hero-stage:after{
  width:720px;height:720px;right:-130px;top:-180px;
  background:
    radial-gradient(circle at 26% 24%,rgba(47,111,255,.08),transparent 22%),
    radial-gradient(circle at 54% 48%,rgba(32,201,155,.065),transparent 17%),
    radial-gradient(circle at 66% 70%,rgba(239,74,135,.055),transparent 15%),
    radial-gradient(circle at center,rgba(255,255,255,.65),transparent 42%);
  filter:blur(30px);
}
html[data-theme="light"] .hero-copy h1{
  font-size:clamp(78px,7.2vw,130px);
  line-height:.88;
  letter-spacing:-.092em;
  background:linear-gradient(92deg,#101723 0%,#223765 20%,#2f6fff 38%,#20c99b 62%,#ef4a87 84%,#f3b64d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .hero-role{font-size:clamp(25px,2vw,40px);color:#243143;letter-spacing:-.055em}
html[data-theme="light"] .hero-summary{max-width:700px;font-size:16px;line-height:1.86;color:#6f7f96}
html[data-theme="light"] .hero-facts{gap:12px;margin-top:36px}
html[data-theme="light"] .hero-facts div{
  border-radius:20px;
  padding:15px 18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(17,26,42,.075);
  box-shadow:0 14px 30px rgba(26,43,75,.06),inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .portrait-card{
  width:min(436px,88%);
  height:548px;
  border-radius:44px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  border:1px solid rgba(17,26,42,.075);
  box-shadow:0 42px 100px rgba(29,47,80,.14),0 14px 36px rgba(39,83,171,.05),inset 0 1px 0 rgba(255,255,255,.98);
  transform:rotate(.6deg);
}
html[data-theme="light"] .portrait-glass{background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 20%,transparent 72%,rgba(47,111,255,.05))}
html[data-theme="light"] .portrait-badge{
  background:rgba(255,255,255,.78);
  border-color:rgba(17,26,42,.075);
  box-shadow:0 10px 24px rgba(25,42,72,.08);
}
html[data-theme="light"] .spectra-card{
  border-radius:18px;
  background:rgba(255,255,255,.84);
  border-color:rgba(17,26,42,.075);
  box-shadow:0 16px 34px rgba(28,46,78,.08),inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] .section-intro{margin-top:26px;margin-bottom:16px}
html[data-theme="light"] .section-intro h2,
html[data-theme="light"] .vault-head h2,
html[data-theme="light"] .access-head h2,
html[data-theme="light"] .modal-card h2{
  font-weight:780;
  letter-spacing:-.05em;
}
html[data-theme="light"] .public-grid{gap:22px}
html[data-theme="light"] .public-card,
html[data-theme="light"] .secret-card,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .vault,
html[data-theme="light"] .flash{
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.84));
  border:1px solid rgba(17,26,42,.075);
  box-shadow:0 24px 62px rgba(26,43,75,.09),0 8px 22px rgba(39,83,171,.04),inset 0 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] .public-card:before,
html[data-theme="light"] .secret-card:before,
html[data-theme="light"] .access-panel:before,
html[data-theme="light"] .vault:before{height:3px;opacity:.92}
html[data-theme="light"] .public-card{padding:28px 26px}
html[data-theme="light"] .public-card-wide{padding:34px 32px}
html[data-theme="light"] .public-card h3,
html[data-theme="light"] .public-card-wide h3{font-size:28px;letter-spacing:-.045em}
html[data-theme="light"] .public-card p{line-height:1.8}
html[data-theme="light"] .vault{padding:34px 34px 30px}
html[data-theme="light"] .vault-head{margin-bottom:24px}
html[data-theme="light"] .vault-state{background:rgba(255,255,255,.76);box-shadow:0 14px 32px rgba(26,43,75,.06)}
html[data-theme="light"] .secret-grid{gap:18px}
html[data-theme="light"] .secret-card{padding:24px 22px;min-height:230px}
html[data-theme="light"] .secret-card h3{font-size:25px;line-height:1.08;letter-spacing:-.04em}
html[data-theme="light"] .masked-value{font-size:22px;letter-spacing:-.02em}
html[data-theme="light"] .access-zone{margin-top:30px}
html[data-theme="light"] .access-flow{gap:20px}
html[data-theme="light"] .access-panel{padding:28px 24px}
html[data-theme="light"] .flow-number{width:54px;height:54px;box-shadow:0 14px 30px rgba(47,111,255,.16)}
html[data-theme="light"] .access-form{gap:14px}
html[data-theme="light"] .access-form input,
html[data-theme="light"] .otp-input{
  border-radius:16px;
  min-height:54px;
  background:rgba(255,255,255,.92);
  border-color:rgba(17,26,42,.09);
}
html[data-theme="light"] .action-btn.gradient,
html[data-theme="light"] .modal-cta{
  min-height:54px;
  border-radius:999px;
  background:linear-gradient(92deg,#2f6fff 0%,#20c99b 42%,#ef4a87 78%,#f3b64d 100%);
  box-shadow:0 18px 36px rgba(47,111,255,.18),0 8px 18px rgba(239,74,135,.08);
}
html[data-theme="light"] .action-btn.dark{min-height:54px;border-radius:999px}
html[data-theme="light"] .modal-card{
  border-radius:34px;
  padding:34px 32px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
}
html[data-theme="light"] .modal-icon{width:72px;height:72px;box-shadow:0 14px 30px rgba(47,111,255,.16)}
html[data-theme="light"] .site-footer{margin-top:34px;padding-top:22px}

@media (max-width: 980px){
  html[data-theme="light"] .topbar,
  html[data-theme="light"] .page-shell{width:min(100%,calc(100% - 24px))}
  html[data-theme="light"] .hero-stage{padding:54px 28px 44px;border-radius:28px}
}

/* =========================================================
   V25 SIGNATURE ULTRA — final premium light + dark refinement
   ========================================================= */
:root{
  --premium-ease:cubic-bezier(.2,.72,.25,1);
}
body,.hero-stage,.public-card,.secret-card,.access-panel,.vault,.modal-card,.theme-toggle,.language-switch,.portrait-card,.spectra-card{
  transition:background .38s var(--premium-ease),border-color .38s var(--premium-ease),box-shadow .38s var(--premium-ease),color .28s ease,transform .28s var(--premium-ease);
}

/* DARK — obsidian, sapphire, emerald, ruby */
html[data-theme="dark"]{
  --bg:#040711;
  --bg2:#07101f;
  --surface:rgba(9,16,32,.80);
  --surface-strong:rgba(10,18,36,.96);
  --text:#f8fbff;
  --text2:#dbe7f6;
  --muted:#95a8c0;
  --line:rgba(222,237,255,.105);
  --line2:rgba(229,240,255,.17);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(40% 30% at 4% 0%,rgba(45,103,255,.16),transparent 50%),
    radial-gradient(24% 20% at 100% 8%,rgba(226,48,101,.11),transparent 44%),
    radial-gradient(26% 22% at 92% 100%,rgba(20,190,137,.09),transparent 44%),
    linear-gradient(180deg,#040711 0%,#08101f 52%,#040711 100%);
}
html[data-theme="dark"] .scene{background:linear-gradient(180deg,#040711,#07101f)}
html[data-theme="dark"] .scene:before{
  opacity:.23;
  background:
    linear-gradient(90deg,transparent 0 49.9%,rgba(255,255,255,.016) 50%,transparent 50.1%),
    repeating-linear-gradient(90deg,rgba(220,236,255,.012) 0 1px,transparent 1px 160px),
    repeating-linear-gradient(180deg,rgba(220,236,255,.009) 0 1px,transparent 1px 160px);
}
html[data-theme="dark"] .mesh{filter:blur(74px);opacity:.20}
html[data-theme="dark"] .hero-stage{
  border-radius:48px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    linear-gradient(145deg,#0b1530 0%,#071022 52%,#0b1530 100%);
  border-color:rgba(226,239,255,.11);
  box-shadow:0 62px 170px rgba(0,0,0,.52),0 20px 64px rgba(37,83,180,.14),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .hero-stage:before{opacity:.72}
html[data-theme="dark"] .hero-stage:after{
  filter:blur(34px);opacity:.78;
  background:
    radial-gradient(circle at 28% 26%,rgba(45,103,255,.18),transparent 22%),
    radial-gradient(circle at 56% 50%,rgba(20,190,137,.11),transparent 17%),
    radial-gradient(circle at 68% 70%,rgba(226,48,101,.10),transparent 15%),
    radial-gradient(circle at center,rgba(255,255,255,.035),transparent 44%);
}
html[data-theme="dark"] .hero-copy h1{
  background:linear-gradient(94deg,#ffffff 0%,#d7ecff 16%,#5bbdff 32%,#2d67ff 48%,#14be89 67%,#e63065 84%,#f3c667 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="dark"] .portrait-card{
  border-color:rgba(230,240,255,.15);
  box-shadow:0 50px 120px rgba(0,0,0,.43),0 16px 48px rgba(36,82,180,.13),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .secret-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .vault,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .flash{
  background:linear-gradient(160deg,rgba(11,19,38,.96),rgba(7,13,27,.985));
  border-color:rgba(226,239,255,.105);
  box-shadow:0 28px 82px rgba(0,0,0,.30),0 8px 28px rgba(33,78,171,.055),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .public-card:before,
html[data-theme="dark"] .secret-card:before,
html[data-theme="dark"] .access-panel:before,
html[data-theme="dark"] .vault:before{
  height:2px;
  background:linear-gradient(90deg,#2d67ff 0%,#14be89 46%,#e63065 80%,#f3c667 100%);
  opacity:.88;
}
html[data-theme="dark"] .public-card:hover,
html[data-theme="dark"] .secret-card:hover,
html[data-theme="dark"] .access-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(227,240,255,.16);
  box-shadow:0 34px 96px rgba(0,0,0,.34),0 12px 34px rgba(34,79,173,.08),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .action-btn.gradient,
html[data-theme="dark"] .modal-cta{
  background:linear-gradient(94deg,#2d67ff 0%,#14be89 44%,#e63065 80%,#f3c667 100%);
  box-shadow:0 18px 42px rgba(33,78,177,.22),0 8px 22px rgba(226,48,101,.08),inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:rgba(9,16,31,.82);
  border-color:rgba(226,239,255,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
}

/* LIGHT — porcelain white, platinum, controlled jewel accents */
html[data-theme="light"]{
  --bg:#f7f9fc;
  --bg2:#ffffff;
  --surface:rgba(255,255,255,.86);
  --surface-strong:rgba(255,255,255,.97);
  --text:#0e1622;
  --text2:#273344;
  --muted:#748198;
  --line:rgba(17,26,42,.070);
  --line2:rgba(17,26,42,.12);
}
html[data-theme="light"] body{
  background:
    radial-gradient(30% 20% at 0% 0%,rgba(47,111,255,.045),transparent 44%),
    radial-gradient(18% 16% at 100% 0%,rgba(32,201,155,.032),transparent 34%),
    radial-gradient(16% 14% at 92% 100%,rgba(239,74,135,.028),transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 47%,#f6f8fb 100%);
}
html[data-theme="light"] .scene{background:linear-gradient(180deg,#f8fafc,#ffffff)}
html[data-theme="light"] .scene:before{opacity:.075}
html[data-theme="light"] .mesh{filter:blur(105px);opacity:.10}
html[data-theme="light"] .hero-stage{
  border-radius:46px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.88)),
    linear-gradient(145deg,#ffffff 0%,#fbfdff 52%,#f8faff 100%);
  border-color:rgba(17,26,42,.065);
  box-shadow:0 58px 150px rgba(26,43,75,.095),0 16px 40px rgba(39,83,171,.04),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .hero-stage:before{opacity:.78}
html[data-theme="light"] .hero-stage:after{
  filter:blur(34px);opacity:.62;
  background:
    radial-gradient(circle at 28% 26%,rgba(47,111,255,.065),transparent 22%),
    radial-gradient(circle at 56% 50%,rgba(32,201,155,.05),transparent 17%),
    radial-gradient(circle at 68% 70%,rgba(239,74,135,.045),transparent 15%),
    radial-gradient(circle at center,rgba(255,255,255,.72),transparent 44%);
}
html[data-theme="light"] .hero-copy h1{
  background:linear-gradient(94deg,#0f1722 0%,#22365f 18%,#2f6fff 39%,#20c99b 62%,#ef4a87 83%,#e5ad3f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .portrait-card{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.83));
  border-color:rgba(17,26,42,.070);
  box-shadow:0 44px 110px rgba(27,45,77,.105),0 12px 34px rgba(39,83,171,.035),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .public-card,
html[data-theme="light"] .secret-card,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .vault,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .flash{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.89));
  border-color:rgba(17,26,42,.070);
  box-shadow:0 26px 68px rgba(26,43,75,.075),0 8px 24px rgba(39,83,171,.035),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .public-card:before,
html[data-theme="light"] .secret-card:before,
html[data-theme="light"] .access-panel:before,
html[data-theme="light"] .vault:before{
  height:2px;
  background:linear-gradient(90deg,#2f6fff 0%,#20c99b 46%,#ef4a87 80%,#e5ad3f 100%);
  opacity:.84;
}
html[data-theme="light"] .public-card:hover,
html[data-theme="light"] .secret-card:hover,
html[data-theme="light"] .access-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(17,26,42,.10);
  box-shadow:0 34px 84px rgba(26,43,75,.095),0 10px 28px rgba(39,83,171,.045),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .action-btn.gradient,
html[data-theme="light"] .modal-cta{
  background:linear-gradient(94deg,#2f6fff 0%,#20c99b 44%,#ef4a87 80%,#e5ad3f 100%);
  box-shadow:0 18px 38px rgba(47,111,255,.15),0 8px 20px rgba(239,74,135,.055),inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-switch{
  background:rgba(255,255,255,.90);
  border-color:rgba(17,26,42,.070);
  box-shadow:0 14px 34px rgba(27,45,77,.055),inset 0 1px 0 rgba(255,255,255,1);
}

@media (prefers-reduced-motion: reduce){
  body,.hero-stage,.public-card,.secret-card,.access-panel,.vault,.modal-card,.theme-toggle,.language-switch,.portrait-card,.spectra-card{transition:none!important}
}


/* =========================================================
   V29 MOBILE ULTRA — full-site mobile optimization
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%;height:auto}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px}

@media(max-width:900px){
  .topbar,.page-shell{width:calc(100% - 28px)}
  .topbar{padding-top:max(16px,env(safe-area-inset-top));align-items:center}
  .page-shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .hero-stage{grid-template-columns:1fr;padding:54px 34px 42px;gap:26px;min-height:auto;border-radius:34px}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:clamp(58px,13vw,90px);line-height:.91;margin:20px 0 16px}
  .hero-role{font-size:clamp(23px,5.6vw,32px)}
  .hero-summary{font-size:15px;line-height:1.72}
  .hero-art{min-height:470px}
  .portrait-card{width:min(360px,88vw);height:min(460px,112vw);max-height:500px}
  .portrait-orbit.orbit-a{width:410px;height:410px}
  .portrait-orbit.orbit-b{width:355px;height:355px}
  .section-intro,.access-head,.vault-head{grid-template-columns:1fr;gap:18px}
  .section-intro{padding-left:4px;padding-right:4px}
  .section-intro h2,.access-head h2,.vault-head h2{font-size:clamp(37px,8vw,54px);line-height:.98}
  .public-grid{grid-template-columns:1fr 1fr;gap:14px}
  .public-card-wide{grid-column:1/-1;min-height:330px}
  .secret-grid{grid-template-columns:1fr 1fr;gap:14px}
  .access-flow{grid-template-columns:1fr;gap:14px}
  .access-panel{min-height:0}
  .site-footer{gap:14px}
}

@media(max-width:640px){
  body{letter-spacing:-.014em}
  .topbar,.page-shell{width:calc(100% - 20px)}
  .topbar{padding:14px 2px 10px;gap:10px}
  .identity{gap:9px;min-width:0}
  .identity-copy strong{font-size:12px}
  .identity-copy small{display:none}
  .aura-mark{transform:scale(.82);transform-origin:left center;margin-right:-5px}
  .top-actions{gap:5px;flex:0 0 auto}
  .verified-chip,.theme-label{display:none}
  .theme-toggle{width:42px;padding:0;justify-content:center}
  .language-switch{height:42px}
  .language-switch a{min-width:38px;padding:0 7px;font-size:9px}
  .page-shell{padding-top:8px}
  .flash{padding:12px 13px;border-radius:15px}
  .flash p{font-size:12px;line-height:1.55}

  .hero-stage{padding:36px 20px 28px;border-radius:26px;gap:14px}
  .eyebrow{font-size:8px;letter-spacing:.14em}
  .hero-copy h1{font-size:clamp(47px,14vw,70px);line-height:.92;letter-spacing:-.075em;margin:18px 0 14px;overflow-wrap:anywhere}
  .hero-role{font-size:22px;line-height:1.12}
  .hero-summary{font-size:13px;line-height:1.68;margin-top:18px}
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
  .hero-facts div{min-width:0;padding:12px 13px;border-radius:15px}
  .hero-facts small{font-size:7px}
  .hero-facts strong{font-size:11px;overflow-wrap:anywhere}
  .hero-art{min-height:365px}
  .portrait-card{width:min(278px,80vw);height:min(352px,101vw);border-radius:32px}
  .portrait-orbit.orbit-a{width:320px;height:320px}
  .portrait-orbit.orbit-b{width:282px;height:282px}
  .portrait-badge{left:11px;right:11px;bottom:11px;padding:11px 12px;border-radius:15px}
  .spectra-card{padding:9px 10px;border-radius:14px}
  .spectra-one{right:0;top:42px}
  .spectra-two{left:0;bottom:45px}

  .section-intro{padding:54px 2px 20px}
  .section-intro h2,.access-head h2,.vault-head h2{font-size:36px;line-height:1.02;letter-spacing:-.055em}
  .section-intro p,.access-head p,.vault-head p{font-size:13px;line-height:1.68}

  .public-grid,.secret-grid{grid-template-columns:1fr;gap:12px}
  .public-card,.public-card-wide{min-height:0;padding:22px 20px;border-radius:23px}
  .public-card-wide{grid-column:auto}
  .public-card h3,.public-card-wide h3{font-size:24px;line-height:1.08}
  .public-card p{font-size:13px;line-height:1.68}
  .card-index{font-size:11px}

  .vault,.access-zone{margin-top:54px;padding:24px 16px;border-radius:26px}
  .vault-head{margin-bottom:18px}
  .vault-state{width:100%;max-width:none;padding:14px;border-radius:18px}
  .secret-card{min-height:178px;padding:20px 18px;border-radius:21px}
  .secret-card h3{font-size:23px}
  .masked-value{font-size:20px;overflow-wrap:anywhere}
  .secret-card-top{gap:8px}
  .privacy-pill{font-size:7px}
  .tap-hint{font-size:10px}
  .vault-footer{align-items:flex-start;flex-direction:column;gap:12px}
  .vault-footer a{width:100%;justify-content:center}

  .access-head{margin-bottom:18px}
  .access-panel{padding:21px 17px;border-radius:22px}
  .flow-number{width:48px;height:48px}
  .flow-copy h3{font-size:24px}
  .flow-copy p{font-size:12px;line-height:1.6}
  .access-form{gap:12px}
  .access-form label span{font-size:9px}
  .access-form input,.otp-input{min-height:52px;padding:13px 14px;border-radius:15px;font-size:16px}
  .otp-input{letter-spacing:.30em;text-align:center;font-size:22px}
  .action-btn{width:100%;min-height:52px;border-radius:999px;font-size:12px}

  .site-footer{flex-direction:column;align-items:flex-start;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .site-footer p{max-width:none}

  .access-modal{padding:14px}
  .modal-card{width:min(100%,520px);max-height:calc(100svh - 28px);overflow:auto;padding:28px 19px 22px;border-radius:24px}
  .modal-close{top:12px;right:12px;width:40px;height:40px}
  .modal-icon{width:58px;height:58px}
  .modal-card h2{font-size:30px;line-height:1.05}
  .modal-card p{font-size:13px;line-height:1.68}
  .modal-steps{flex-direction:column;gap:8px}
  .modal-steps span{width:100%}
  .modal-cta{width:100%;min-height:52px}

  .masked-value,.hero-summary,.public-card p,.secret-card h3,.flow-copy p,.modal-card p{overflow-wrap:anywhere;word-break:keep-all}
}

@media(max-width:420px){
  .topbar,.page-shell{width:calc(100% - 14px)}
  .topbar{padding-left:0;padding-right:0}
  .identity-copy strong{font-size:11px}
  .language-switch a{min-width:35px}
  .hero-stage{padding:30px 16px 24px;border-radius:22px}
  .hero-copy h1{font-size:44px}
  .hero-role{font-size:20px}
  .hero-facts{grid-template-columns:1fr}
  .hero-art{min-height:330px}
  .portrait-card{width:250px;height:318px;border-radius:28px}
  .portrait-orbit.orbit-a{width:288px;height:288px}
  .portrait-orbit.orbit-b{width:252px;height:252px}
  .spectra-card{display:none}
  .section-intro h2,.access-head h2,.vault-head h2{font-size:32px}
  .vault,.access-zone{padding:20px 13px;border-radius:22px}
  .public-card,.public-card-wide,.secret-card,.access-panel{padding-left:16px;padding-right:16px}
}

@media(hover:none) and (pointer:coarse){
  .public-card:hover,.secret-card:hover,.access-panel:hover{transform:none}
  .secret-card,.action-btn,.theme-toggle,.language-switch a,.modal-cta{touch-action:manipulation}
}


/* =========================================================
   V31 VERIFIED SECURE MAIL — premium profile mail composer
   ========================================================= */
.secure-mail-zone{
  position:relative;overflow:hidden;margin-top:34px;padding:38px;border:1px solid var(--line);
  border-radius:34px;background:linear-gradient(145deg,var(--surface-strong),var(--surface));
  box-shadow:var(--shadow-xl);
}
.secure-mail-zone:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2f6fff 0%,#20c99b 44%,#ef4a87 78%,#f3b64d 100%)}
.secure-mail-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(58px);opacity:.15}
.mail-g1{width:330px;height:330px;right:-100px;top:-160px;background:#2f6fff}
.mail-g2{width:280px;height:280px;left:-100px;bottom:-170px;background:#ef4a87}
.secure-mail-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:26px}
.secure-mail-head h2{margin:8px 0 11px;font-size:clamp(38px,4.8vw,70px);line-height:.98;letter-spacing:-.065em}
.secure-mail-head p{max-width:790px;margin:0;color:var(--muted);font-size:13px;line-height:1.72}
.mail-state{display:flex;align-items:center;gap:11px;min-width:220px;padding:13px 15px;border:1px solid var(--line);border-radius:18px;background:var(--glass)}
.mail-state>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2f6fff,#20c99b);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(47,111,255,.18)}
.mail-state.locked>span{background:linear-gradient(135deg,#66748d,#38475f);box-shadow:none}
.mail-state small{display:block;font-size:7px;letter-spacing:.14em;color:var(--muted);font-weight:900}.mail-state strong{display:block;margin-top:3px;font-size:11px}
.secure-mail-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);gap:18px}
.verified-sender-card,.secure-mail-composer,.secure-mail-lock{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,var(--glass2),var(--glass));box-shadow:0 24px 58px rgba(0,0,0,.09)}
.verified-sender-card{padding:25px}
.sender-shield{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,#2f6fff,#20c99b 58%,#71e9ff);color:#fff;font-size:20px;font-weight:900;box-shadow:0 18px 36px rgba(47,111,255,.18);margin-bottom:25px}
.verified-sender-card>small{font-size:7px;letter-spacing:.16em;color:var(--muted);font-weight:900}.verified-sender-card h3{margin:7px 0 3px;font-size:28px;letter-spacing:-.045em}.verified-sender-card>p{margin:0;color:var(--muted);font-size:11px}
.sender-email{margin-top:18px;padding:12px 13px;border-radius:14px;background:var(--surface-soft);border:1px solid var(--line);font-size:10px;color:var(--text2);overflow-wrap:anywhere}
.mail-security-list{display:grid;gap:9px;margin-top:19px;padding-top:17px;border-top:1px solid var(--line)}
.mail-security-list span{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.mail-security-list i{width:6px;height:6px;border-radius:50%;background:#20c99b;box-shadow:0 0 0 4px rgba(32,201,155,.08)}
.secure-mail-composer{padding:25px}
.composer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.composer-top small{display:block;font-size:7px;letter-spacing:.15em;color:var(--muted);font-weight:900}.composer-top strong{display:block;margin-top:5px;font-size:11px;overflow-wrap:anywhere}.composer-top>span{padding:7px 9px;border-radius:999px;background:rgba(47,111,255,.08);color:#7da3ff;border:1px solid rgba(47,111,255,.12);font-size:7px;font-weight:850;white-space:nowrap}
.composer-field{display:grid;gap:7px;margin-bottom:14px}.composer-field>span{font-size:8px;font-weight:850;color:var(--text2)}
.composer-field input,.composer-field textarea{width:100%;border:1px solid var(--line2);border-radius:16px;background:var(--surface-soft);color:var(--text);font:inherit;outline:none;transition:.18s}
.composer-field input{min-height:54px;padding:13px 15px;font-size:14px}.composer-field textarea{min-height:210px;padding:15px;resize:vertical;font-size:14px;line-height:1.7}
.composer-field input:focus,.composer-field textarea:focus{border-color:rgba(47,111,255,.44);box-shadow:0 0 0 4px rgba(47,111,255,.09),0 12px 30px rgba(47,111,255,.07)}
.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.composer-footer p{margin:0;max-width:540px;color:var(--muted);font-size:9px;line-height:1.55}.composer-footer p span{color:#20c99b;margin-right:5px}
.secure-send-btn{min-height:52px;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(90deg,#2f6fff,#20c99b 48%,#ef4a87 100%);color:#fff;font-weight:850;font-size:11px;cursor:pointer;box-shadow:0 16px 34px rgba(47,111,255,.18),0 7px 18px rgba(239,74,135,.08);white-space:nowrap}.secure-send-btn b{margin-left:8px}
.secure-mail-lock{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:23px}
.mail-lock-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(47,111,255,.15),rgba(239,74,135,.10));border:1px solid var(--line);font-size:18px}
.secure-mail-lock small{font-size:7px;letter-spacing:.15em;color:var(--muted);font-weight:900}.secure-mail-lock h3{margin:5px 0 6px;font-size:23px;letter-spacing:-.04em}.secure-mail-lock p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}.secure-mail-lock>a{display:inline-flex;align-items:center;gap:8px;padding:12px 15px;border-radius:999px;background:var(--text);color:var(--bg);text-decoration:none;font-size:9px;font-weight:850;white-space:nowrap}

html[data-theme="light"] .secure-mail-zone{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.84));border-color:rgba(17,26,42,.075)}
html[data-theme="light"] .verified-sender-card,html[data-theme="light"] .secure-mail-composer,html[data-theme="light"] .secure-mail-lock{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.86));border-color:rgba(17,26,42,.075);box-shadow:0 22px 58px rgba(26,43,75,.08),0 8px 20px rgba(39,83,171,.04)}
html[data-theme="light"] .composer-field input,html[data-theme="light"] .composer-field textarea{background:rgba(248,250,253,.92);border-color:rgba(17,26,42,.09)}

@media(max-width:900px){
  .secure-mail-head{grid-template-columns:1fr;align-items:start}.mail-state{width:100%;min-width:0}
  .secure-mail-layout{grid-template-columns:1fr}.verified-sender-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}.sender-shield{grid-row:1/4}.verified-sender-card>.sender-email,.verified-sender-card>.mail-security-list{grid-column:1/-1}
}
@media(max-width:640px){
  .secure-mail-zone{padding:24px 16px;border-radius:26px;margin-top:54px}
  .secure-mail-head h2{font-size:35px}.secure-mail-head p{font-size:12px}
  .verified-sender-card,.secure-mail-composer,.secure-mail-lock{border-radius:22px}
  .secure-mail-composer{padding:18px 15px}.verified-sender-card{padding:20px 17px}
  .composer-top{flex-direction:column}.composer-top>span{align-self:flex-start}
  .composer-field input,.composer-field textarea{font-size:16px}
  .composer-field textarea{min-height:190px}
  .composer-footer{align-items:stretch;flex-direction:column}.secure-send-btn{width:100%;min-height:54px}
  .secure-mail-lock{grid-template-columns:auto minmax(0,1fr);padding:20px 17px}.secure-mail-lock>a{grid-column:1/-1;justify-content:center}
}
@media(max-width:420px){
  .secure-mail-zone{padding:20px 13px;border-radius:22px}.secure-mail-head h2{font-size:31px}
  .verified-sender-card{grid-template-columns:1fr}.sender-shield{grid-row:auto}.verified-sender-card>.sender-email,.verified-sender-card>.mail-security-list{grid-column:auto}
  .secure-mail-lock{grid-template-columns:1fr}.mail-lock-icon{width:52px;height:52px}
}


/* =========================================================
   V32 PROFILE DATES — birth date, international age, tenure
   ========================================================= */
.mini-orb.ruby{background:linear-gradient(135deg,#ff5f88,#ef4a87 48%,#8b61ff)}
.mini-orb.emerald{background:linear-gradient(135deg,#20c99b,#65e5c6 48%,#2f6fff)}
.profile-date-card h3{font-size:clamp(22px,2vw,29px);line-height:1.12}
.profile-age-card h3{font-size:42px}
.profile-tenure-card{grid-column:2/-1;min-height:220px}
.profile-tenure-card h3{font-size:34px}
@media(max-width:900px){
  .profile-tenure-card{grid-column:auto}
}
@media(max-width:640px){
  .profile-date-card h3,.profile-tenure-card h3{font-size:24px}
  .profile-age-card h3{font-size:34px}
}


/* =========================================================
   V33 HERO REFINEMENT — single-line name, smaller photo,
   stronger Department / Position emphasis
   ========================================================= */
.hero-stage{
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  gap:42px;
}
.hero-copy{
  max-width:920px;
}
.hero-copy h1{
  max-width:none;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  font-size:clamp(64px,6.25vw,116px);
  letter-spacing:-.082em;
  margin:18px 0 16px;
}
.hero-role{
  display:inline-flex;
  align-items:center;
  padding:16px 22px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(75,124,255,.12),rgba(69,231,255,.09) 44%,rgba(82,228,176,.09));
  border:1px solid var(--line2);
  box-shadow:0 18px 40px rgba(43,71,140,.08);
  font-size:clamp(26px,2.5vw,40px);
  line-height:1.06;
  color:var(--text);
  font-weight:760;
  letter-spacing:-.055em;
}
.hero-summary{
  max-width:720px;
  margin-top:24px;
}
.hero-facts{
  margin-top:26px;
}
.hero-facts div:first-child{
  min-width:360px;
  box-shadow:0 16px 34px rgba(43,71,140,.08);
}
.hero-facts div:first-child small{color:var(--blue)}
.hero-facts div:first-child strong{
  font-size:15px;
  color:var(--text);
}
.hero-art{
  min-height:470px;
}
.orbit-a{width:410px;height:410px}
.orbit-b{width:350px;height:350px}
.portrait-card{
  width:min(340px,76%);
  height:430px;
  border-radius:42px;
  transform:rotate(.65deg);
}
.portrait-badge{
  left:16px; right:16px; bottom:16px;
}
.portrait-badge strong{font-size:12px}
.portrait-badge small{font-size:8px}

html[data-theme="light"] .hero-role{
  background:linear-gradient(135deg,rgba(75,124,255,.09),rgba(69,231,255,.07) 42%,rgba(82,228,176,.08));
  border-color:rgba(16,20,34,.10);
  box-shadow:0 20px 42px rgba(62,56,96,.08);
}
html[data-theme="light"] .hero-facts div:first-child{
  background:rgba(255,255,255,.88);
}
html[data-theme="dark"] .hero-role{
  background:linear-gradient(135deg,rgba(49,92,226,.22),rgba(35,115,255,.16) 34%,rgba(25,179,130,.14));
  border-color:rgba(205,238,255,.15);
  box-shadow:0 24px 54px rgba(0,0,0,.22),0 12px 30px rgba(37,83,198,.10);
}

@media(max-width:1260px){
  .hero-stage{grid-template-columns:minmax(0,1.14fr) minmax(280px,.86fr);padding:66px 64px;gap:34px}
  .hero-copy h1{font-size:clamp(58px,5.9vw,100px)}
  .hero-role{font-size:clamp(24px,2.3vw,34px)}
  .portrait-card{width:min(320px,82%);height:405px}
  .orbit-a{width:380px;height:380px}.orbit-b{width:320px;height:320px}
}
@media(max-width:1024px){
  .hero-copy h1{white-space:normal;font-size:clamp(54px,8vw,88px)}
  .hero-role{font-size:clamp(22px,3.2vw,30px);padding:14px 18px}
  .hero-facts div:first-child{min-width:300px}
  .hero-art{min-height:400px}
  .portrait-card{width:min(290px,78%);height:372px}
  .orbit-a{width:340px;height:340px}.orbit-b{width:285px;height:285px}
}
@media(max-width:900px){
  .hero-stage{grid-template-columns:1fr;padding:54px 34px 42px;gap:24px}
  .hero-copy h1{white-space:normal}
  .hero-role{display:inline-flex}
  .hero-art{min-height:360px}
  .portrait-card{width:min(300px,74vw);height:min(390px,92vw)}
  .orbit-a{width:320px;height:320px}.orbit-b{width:270px;height:270px}
}
@media(max-width:640px){
  .hero-copy h1{font-size:clamp(46px,13vw,72px);line-height:.92}
  .hero-role{font-size:clamp(20px,5.2vw,28px);padding:12px 15px;border-radius:18px}
  .hero-facts div:first-child{min-width:100%}
  .portrait-card{width:min(270px,76vw);height:min(340px,96vw);border-radius:34px}
  .orbit-a{width:285px;height:285px}.orbit-b{width:236px;height:236px}
}


/* =========================================================
   V34 PROFILE BACKGROUND IMAGE — full-page optimized cover
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-30;
  background:
    linear-gradient(115deg, rgba(7,12,20,.54) 0%, rgba(7,12,20,.28) 28%, rgba(6,14,20,.16) 46%, rgba(8,12,18,.38) 100%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.08), transparent 24%),
    url('/static/profile-background-v34.png') center center / cover no-repeat;
  transform:translateZ(0);
}
.scene{
  background:
    linear-gradient(180deg, rgba(4,8,16,.22), rgba(4,8,16,.52)),
    radial-gradient(circle at 22% 10%, rgba(73,132,255,.12), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(35,198,143,.10), transparent 22%),
    radial-gradient(circle at 78% 84%, rgba(228,70,119,.08), transparent 20%);
}
.mesh{opacity:.20}
.grain{opacity:.016}
.page-shell,.topbar{position:relative;z-index:2}
.hero-stage{
  background:linear-gradient(130deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 44%,rgba(111,81,255,.07));
  backdrop-filter:blur(24px) saturate(150%);
}
html[data-theme="light"] body::before{
  background:
    linear-gradient(115deg, rgba(247,249,253,.56) 0%, rgba(247,249,253,.30) 24%, rgba(248,250,254,.18) 44%, rgba(245,247,252,.42) 100%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.26), transparent 24%),
    url('/static/profile-background-v34.png') center center / cover no-repeat;
}
html[data-theme="light"] .scene{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(247,249,253,.44)),
    radial-gradient(circle at 22% 10%, rgba(73,132,255,.08), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(35,198,143,.06), transparent 22%),
    radial-gradient(circle at 78% 84%, rgba(228,70,119,.05), transparent 20%);
}
html[data-theme="dark"] body::before{
  background:
    linear-gradient(115deg, rgba(5,10,16,.64) 0%, rgba(5,10,16,.34) 28%, rgba(5,11,18,.20) 46%, rgba(7,10,16,.52) 100%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.09), transparent 24%),
    url('/static/profile-background-v34.png') center center / cover no-repeat;
}
html[data-theme="dark"] .hero-stage{
  background:linear-gradient(130deg,rgba(7,17,26,.52),rgba(9,18,28,.28) 42%,rgba(49,92,226,.12));
  border-color:rgba(220,240,255,.16);
}
@media (max-width:900px){
  body::before,html[data-theme="light"] body::before,html[data-theme="dark"] body::before{
    background-position:72% center;
  }
}
@media (max-width:640px){
  body::before,html[data-theme="light"] body::before,html[data-theme="dark"] body::before{
    background-position:76% center;
  }
}


/* =========================================================
   V35 HERO + WELCOME RIBBON
   ========================================================= */
.welcome-ribbon{
  position:relative;
  z-index:4;
  margin:18px 24px 0;
  padding:0 16px;
}
.welcome-ribbon-track{
  display:flex;
  align-items:center;
  gap:22px;
  min-height:52px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(195,224,255,.18);
  background:linear-gradient(90deg,rgba(6,16,28,.74),rgba(9,23,36,.52) 34%,rgba(19,17,49,.60) 66%,rgba(6,16,28,.74));
  box-shadow:0 14px 40px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.welcome-ribbon-track::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-120%);
  animation:ribbonSweep 5.4s linear infinite;
}
.welcome-ribbon-text{
  position:relative;
  display:inline-block;
  font-size:13px;
  font-weight:820;
  letter-spacing:.03em;
  white-space:nowrap;
  background:linear-gradient(90deg,#dff2ff 0%, #74bbff 12%, #3d71ff 24%, #1ec6d2 38%, #44dfb0 50%, #ffd26f 63%, #ff8f8f 76%, #fd5eb1 88%, #dff2ff 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:ribbonColor 9s linear infinite;
}
.welcome-ribbon-text.alt{animation-duration:11s}
.welcome-ribbon-dot{
  position:relative;
  font-size:13px;
  color:#86e4ff;
  opacity:.85;
  animation:ribbonPulse 2.8s ease-in-out infinite;
}
.topbar{margin-top:14px}
.hero-stage{
  grid-template-columns:minmax(0,1.38fr) minmax(220px,.62fr);
  gap:24px;
}
.hero-copy{max-width:none;min-width:0}
.hero-copy h1{
  max-width:none;
  font-size:clamp(50px,5vw,92px);
  line-height:.92;
  letter-spacing:-.10em;
  white-space:nowrap;
}
.hero-role{
  margin-top:10px;
  max-width:640px;
  font-size:clamp(24px,2.1vw,36px);
  padding:14px 18px;
  line-height:1.03;
  box-shadow:0 16px 34px rgba(20,43,92,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-summary{max-width:780px}
.hero-facts{margin-top:28px}
.hero-art{min-height:370px;align-items:center}
.portrait-card{
  width:min(232px,64%);
  height:306px;
  border-radius:34px;
}
.portrait-card img{object-fit:cover}
.orbit-a{width:312px;height:312px}
.orbit-b{width:268px;height:268px}
.spectra-one{top:36px;right:-18px}
.spectra-two{left:-12px;bottom:88px}
.portrait-badge{left:12px;right:12px;bottom:12px;padding:14px 15px}
.portrait-badge strong{font-size:11px}
.portrait-badge small{font-size:7px}

html[data-theme="light"] .welcome-ribbon-track{
  background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(249,251,255,.68) 34%,rgba(246,247,255,.78) 66%,rgba(255,255,255,.82));
  border-color:rgba(22,32,58,.09);
  box-shadow:0 16px 36px rgba(70,86,133,.08), inset 0 1px 0 rgba(255,255,255,.72);
}

@keyframes ribbonColor{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
@keyframes ribbonSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}
@keyframes ribbonPulse{
  0%,100%{transform:scale(1);opacity:.82}
  50%{transform:scale(1.22);opacity:1}
}

@media(max-width:1260px){
  .hero-stage{grid-template-columns:minmax(0,1.34fr) minmax(210px,.66fr);gap:20px;padding:64px 48px}
  .hero-copy h1{font-size:clamp(46px,4.7vw,82px)}
  .hero-role{font-size:clamp(22px,2vw,31px);max-width:600px}
}
@media(max-width:1100px){
  .hero-copy h1{font-size:clamp(42px,4.4vw,72px)}
  .hero-role{max-width:560px}
}
@media(max-width:960px){
  .hero-stage{grid-template-columns:1fr;padding:52px 32px 40px;gap:20px}
  .hero-copy h1{white-space:normal;font-size:clamp(44px,8.6vw,76px)}
  .hero-role{max-width:100%;font-size:clamp(22px,4vw,30px)}
  .hero-art{min-height:320px}
  .portrait-card{width:min(228px,60vw);height:min(300px,82vw)}
  .spectra-one{right:6px}.spectra-two{left:6px;bottom:78px}
}
@media(max-width:640px){
  .welcome-ribbon{margin:14px 12px 0;padding:0}
  .welcome-ribbon-track{min-height:48px;padding:0 14px;gap:14px;border-radius:18px}
  .welcome-ribbon-text{font-size:11px}
  .hero-copy h1{font-size:clamp(38px,13.2vw,58px);letter-spacing:-.08em}
  .hero-role{font-size:clamp(20px,6vw,25px);padding:12px 14px;border-radius:18px}
  .portrait-card{width:min(214px,66vw);height:min(284px,84vw)}
  .orbit-a{width:258px;height:258px}.orbit-b{width:220px;height:220px}
}


/* =========================================================
   V37 PHOTO/NAMING FIX — square source-photo fit + guaranteed name visibility
   ========================================================= */
.hero-stage{
  grid-template-columns:minmax(0,1.48fr) minmax(250px,.52fr);
  gap:20px;
}
.hero-copy{
  min-width:0;
  max-width:none;
  padding-right:4px;
}
.hero-name{
  display:block;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  font-size:clamp(54px,4.65vw,88px);
  line-height:.92;
  letter-spacing:-.075em;
  margin:18px 0 18px;
}
.hero-role{
  max-width:690px;
  font-size:clamp(25px,2.15vw,36px);
}
.hero-art{
  min-height:355px;
  padding:8px 0 34px;
}
.portrait-card{
  width:258px;
  height:258px;
  aspect-ratio:1/1;
  border-radius:34px;
  overflow:visible;
  transform:none;
  background:transparent;
  border:0;
  box-shadow:none;
}
.portrait-card>img,.portrait-empty{
  width:258px;
  height:258px;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(210,235,255,.20);
  box-shadow:0 28px 72px rgba(0,0,0,.24),0 0 0 7px rgba(255,255,255,.025);
}
.portrait-glass{
  width:258px;
  height:258px;
  border-radius:34px;
  overflow:hidden;
}
.portrait-badge{
  left:12px;
  right:12px;
  top:272px;
  bottom:auto;
  min-height:62px;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}
.orbit-a{width:318px;height:318px}
.orbit-b{width:278px;height:278px}
.spectra-one{top:36px;right:-14px}
.spectra-two{left:-20px;bottom:62px}

html[data-theme="light"] .portrait-card>img,
html[data-theme="light"] .portrait-empty{
  border-color:rgba(17,26,42,.08);
  box-shadow:0 28px 72px rgba(40,64,102,.13),0 0 0 7px rgba(255,255,255,.38);
}
html[data-theme="light"] .portrait-badge{
  background:rgba(255,255,255,.86);
  border-color:rgba(17,26,42,.08);
}

@media(max-width:1260px){
  .hero-stage{grid-template-columns:minmax(0,1.44fr) minmax(240px,.56fr);gap:16px}
  .hero-name{font-size:clamp(50px,4.35vw,80px)}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:242px;height:242px}
  .portrait-badge{top:256px}
  .orbit-a{width:298px;height:298px}.orbit-b{width:260px;height:260px}
}
@media(max-width:1050px){
  .hero-stage{grid-template-columns:minmax(0,1.40fr) minmax(220px,.60fr);padding-left:44px;padding-right:44px}
  .hero-name{font-size:clamp(46px,4.15vw,70px)}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:224px;height:224px}
  .portrait-badge{top:238px;left:8px;right:8px}
  .orbit-a{width:274px;height:274px}.orbit-b{width:242px;height:242px}
}
@media(max-width:960px){
  .hero-stage{grid-template-columns:1fr;gap:26px}
  .hero-name{white-space:normal;font-size:clamp(46px,9vw,76px)}
  .hero-art{min-height:360px}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:242px;height:242px}
  .portrait-badge{top:256px}
  .orbit-a{width:296px;height:296px}.orbit-b{width:258px;height:258px}
}
@media(max-width:640px){
  .hero-name{font-size:clamp(40px,13vw,58px);line-height:.93}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:218px;height:218px;border-radius:28px}
  .portrait-badge{top:232px;left:6px;right:6px}
  .orbit-a{width:262px;height:262px}.orbit-b{width:228px;height:228px}
}


/* =========================================================
   V38 TRUE FULL-PAGE BACKGROUND — direct body background
   ========================================================= */
html{
  background:#08111e;
}
body,
html[data-theme="dark"] body{
  background:
    linear-gradient(115deg,rgba(4,10,18,.66) 0%,rgba(4,10,18,.42) 27%,rgba(6,12,20,.26) 51%,rgba(5,10,18,.52) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat !important;
  background-attachment:fixed,fixed !important;
  min-height:100vh;
}
html[data-theme="light"] body{
  background:
    linear-gradient(115deg,rgba(250,252,255,.76) 0%,rgba(250,252,255,.52) 28%,rgba(247,250,254,.36) 53%,rgba(249,251,255,.62) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat !important;
  background-attachment:fixed,fixed !important;
}
body::before{display:none!important}
.scene{
  background:transparent!important;
  opacity:.58;
}
html[data-theme="light"] .scene,
html[data-theme="dark"] .scene{background:transparent!important}
.mesh{opacity:.11!important}
.grain{opacity:.010!important}

/* keep the image visible through the full page */
.hero-stage,
.public-card,
.vault,
.access-zone,
.access-panel,
.secure-mail-zone,
.verified-sender-card,
.secure-mail-composer,
.secure-mail-lock,
.flash,
.modal-card{
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
html[data-theme="dark"] .hero-stage{
  background:linear-gradient(135deg,rgba(5,14,24,.64),rgba(6,18,27,.48) 52%,rgba(9,18,28,.56))!important;
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .access-zone,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .secure-mail-zone,
html[data-theme="dark"] .verified-sender-card,
html[data-theme="dark"] .secure-mail-composer,
html[data-theme="dark"] .secure-mail-lock{
  background:linear-gradient(145deg,rgba(7,19,28,.76),rgba(7,16,24,.60))!important;
}
html[data-theme="dark"] .vault{
  background:
    linear-gradient(145deg,rgba(4,13,21,.82),rgba(5,20,20,.72) 62%,rgba(18,8,14,.68))!important;
}
html[data-theme="light"] .hero-stage{
  background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(255,255,255,.62) 52%,rgba(249,252,255,.72))!important;
}
html[data-theme="light"] .public-card,
html[data-theme="light"] .access-zone,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .secure-mail-zone,
html[data-theme="light"] .verified-sender-card,
html[data-theme="light"] .secure-mail-composer,
html[data-theme="light"] .secure-mail-lock{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.67))!important;
}
html[data-theme="light"] .vault{
  background:linear-gradient(145deg,rgba(19,23,35,.91),rgba(16,29,31,.88),rgba(28,15,25,.84))!important;
}

/* exact welcome message ribbon */
.welcome-ribbon{margin-top:14px}
.welcome-ribbon-track{
  min-height:54px;
  justify-content:center;
  background:linear-gradient(90deg,rgba(5,17,29,.82),rgba(9,27,42,.68) 33%,rgba(18,18,50,.70) 67%,rgba(5,17,29,.82));
}
.welcome-ribbon-text{
  font-size:13px;
  font-weight:850;
  letter-spacing:.01em;
}
html[data-theme="light"] .welcome-ribbon-track{
  background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(245,250,255,.79) 34%,rgba(249,246,255,.82) 68%,rgba(255,255,255,.88));
}

@media(max-width:900px){
  body,html[data-theme="dark"] body,html[data-theme="light"] body{
    background-position:70% center!important;
    background-attachment:scroll,scroll!important;
  }
}
@media(max-width:640px){
  body,html[data-theme="dark"] body,html[data-theme="light"] body{
    background-position:74% center!important;
  }
  .welcome-ribbon-track{justify-content:flex-start;overflow:hidden}
  .welcome-ribbon-text{font-size:10.5px}
}

/* =========================================================
   V39 HERO BALANCE — corrected desktop proportions
   ========================================================= */
@media (min-width: 961px){
  .hero-stage{
    min-height:650px;
    padding:64px 72px;
    grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
    column-gap:44px;
    align-items:center;
  }
  .hero-copy{
    max-width:820px;
    min-width:0;
    padding-right:0;
  }
  .hero-name{
    width:100%;
    max-width:820px;
    margin:18px 0 18px;
    font-size:clamp(58px,4.35vw,78px);
    line-height:.94;
    letter-spacing:-.074em;
    white-space:nowrap;
    overflow:visible;
  }
  .hero-role{
    display:inline-flex;
    width:auto;
    max-width:720px;
    margin-top:4px;
    padding:15px 20px;
    font-size:clamp(24px,1.85vw,31px);
    line-height:1.08;
    border-radius:22px;
  }
  .hero-summary{
    max-width:760px;
    margin-top:26px;
    font-size:14px;
    line-height:1.78;
  }
  .hero-facts{
    margin-top:28px;
  }
  .hero-facts div:first-child{
    min-width:330px;
  }

  .hero-art{
    width:100%;
    max-width:470px;
    min-height:430px;
    justify-self:center;
    place-items:center;
    transform:translateX(-30px);
    padding:0 0 42px;
  }
  .portrait-card{
    width:280px;
    height:280px;
    aspect-ratio:1/1;
    margin:0 auto;
  }
  .portrait-card>img,
  .portrait-empty,
  .portrait-glass{
    width:280px;
    height:280px;
    aspect-ratio:1/1;
    border-radius:34px;
    object-fit:cover;
    object-position:center center;
  }
  .portrait-badge{
    top:294px;
    left:10px;
    right:10px;
    bottom:auto;
    min-height:64px;
  }
  .orbit-a{width:350px;height:350px}
  .orbit-b{width:306px;height:306px}
  .spectra-one{top:36px;right:-2px}
  .spectra-two{left:0;bottom:86px}
}

@media (min-width: 1400px){
  .hero-stage{
    grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);
    column-gap:52px;
    padding-left:76px;
    padding-right:76px;
  }
  .hero-copy{max-width:860px}
  .hero-name{
    max-width:860px;
    font-size:clamp(62px,4.15vw,80px);
  }
  .hero-art{
    max-width:500px;
    transform:translateX(-42px);
  }
}

@media (min-width: 961px) and (max-width: 1180px){
  .hero-stage{
    padding-left:46px;
    padding-right:46px;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    column-gap:28px;
  }
  .hero-name{font-size:clamp(52px,4.6vw,68px)}
  .hero-art{transform:translateX(-12px)}
  .portrait-card,
  .portrait-card>img,
  .portrait-empty,
  .portrait-glass{width:252px;height:252px}
  .portrait-badge{top:266px}
  .orbit-a{width:316px;height:316px}
  .orbit-b{width:278px;height:278px}
}


/* =========================================================
   V40 IMAGE HARMONY — Dark default + refined light/dark glass
   ========================================================= */

/* The generated landscape remains visible throughout the page. */
body,
html[data-theme="dark"] body{
  background:
    linear-gradient(118deg,rgba(4,10,18,.54) 0%,rgba(5,13,22,.36) 30%,rgba(5,13,21,.22) 55%,rgba(5,10,18,.43) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat !important;
}
html[data-theme="light"] body{
  background:
    linear-gradient(118deg,rgba(248,251,255,.64) 0%,rgba(247,250,254,.46) 29%,rgba(246,250,253,.27) 54%,rgba(248,250,253,.48) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat !important;
}
.scene{opacity:.34!important}
.mesh{opacity:.07!important}
.grain{opacity:.006!important}

/* Shared elevated surfaces */
.hero-stage,
.public-card,
.access-zone,
.access-panel,
.secure-mail-zone,
.verified-sender-card,
.secure-mail-composer,
.secure-mail-lock{
  border-color:rgba(189,218,241,.13);
}

/* ================= DARK — cinematic image glass ================= */
html[data-theme="dark"]{
  --bg:#07101a;
  --bg2:#0a131e;
  --surface:rgba(8,19,29,.67);
  --surface-strong:rgba(7,17,27,.84);
  --surface-soft:rgba(222,239,255,.052);
  --text:#f6f9fc;
  --text2:#d8e1ea;
  --muted:#9cadbd;
  --line:rgba(203,227,246,.12);
  --line2:rgba(210,233,249,.20);
}
html[data-theme="dark"] .hero-stage{
  background:
    linear-gradient(132deg,rgba(6,15,25,.73),rgba(8,22,31,.53) 50%,rgba(9,22,28,.61))!important;
  border-color:rgba(210,233,249,.14);
  box-shadow:0 42px 120px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .access-zone,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .secure-mail-zone,
html[data-theme="dark"] .verified-sender-card,
html[data-theme="dark"] .secure-mail-composer,
html[data-theme="dark"] .secure-mail-lock{
  background:
    linear-gradient(145deg,rgba(7,20,30,.76),rgba(7,18,27,.58))!important;
  border-color:rgba(199,225,245,.13);
  box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}

/* Dark Vault becomes a deep sapphire/emerald glass, not a black slab. */
html[data-theme="dark"] .vault{
  color:#f4f8fb;
  background:
    radial-gradient(650px 420px at 0% 0%,rgba(50,94,183,.18),transparent 66%),
    radial-gradient(620px 420px at 100% 18%,rgba(31,150,124,.14),transparent 64%),
    radial-gradient(520px 320px at 78% 100%,rgba(176,57,92,.09),transparent 68%),
    linear-gradient(142deg,rgba(5,15,24,.82),rgba(7,25,30,.75) 58%,rgba(16,13,22,.72))!important;
  border:1px solid rgba(214,235,250,.15);
  box-shadow:0 44px 120px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .vault-head h2{color:#f5f8fb}
html[data-theme="dark"] .vault-head p{color:#a8bac8}
html[data-theme="dark"] .vault-state{
  background:linear-gradient(145deg,rgba(12,28,38,.82),rgba(9,23,31,.67));
  border-color:rgba(201,227,245,.14);
  box-shadow:0 20px 52px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .vault-state strong{color:#eef6fb}
html[data-theme="dark"] .vault-state small{color:#8fa6ba}
html[data-theme="dark"] .secret-card{
  color:#f4f8fb;
  background:
    linear-gradient(150deg,rgba(13,31,41,.72),rgba(8,22,29,.63))!important;
  border:1px solid rgba(204,230,247,.13)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .secret-card:before{
  background:linear-gradient(90deg,#4e83ff 0%,#31c89b 48%,#d85c88 82%,#d7b76b 100%);
  opacity:.72;
}
html[data-theme="dark"] .secret-card h3{color:#f5f8fb}
html[data-theme="dark"] .secret-type{color:#7fa2c6}
html[data-theme="dark"] .masked-value{color:#d0dae3}
html[data-theme="dark"] .privacy-pill{
  color:#a8c1dc;
  border-color:rgba(126,163,202,.16);
  background:linear-gradient(135deg,rgba(74,123,232,.12),rgba(46,184,143,.08));
}
html[data-theme="dark"] .tap-hint{color:#83a9d3}

/* ================= LIGHT — pearl/sapphire image glass ================= */
html[data-theme="light"]{
  --bg:#edf3f8;
  --bg2:#f7fafc;
  --surface:rgba(250,252,255,.73);
  --surface-strong:rgba(251,253,255,.88);
  --surface-soft:rgba(31,57,85,.035);
  --text:#142033;
  --text2:#2d3b4f;
  --muted:#6c8097;
  --line:rgba(31,57,85,.085);
  --line2:rgba(31,57,85,.14);
}
html[data-theme="light"] .hero-stage{
  background:
    linear-gradient(133deg,rgba(255,255,255,.78),rgba(247,251,254,.61) 50%,rgba(246,250,252,.68))!important;
  border-color:rgba(43,73,105,.09);
  box-shadow:0 42px 100px rgba(45,69,96,.10),inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .public-card,
html[data-theme="light"] .access-zone,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .secure-mail-zone,
html[data-theme="light"] .verified-sender-card,
html[data-theme="light"] .secure-mail-composer,
html[data-theme="light"] .secure-mail-lock{
  background:
    linear-gradient(145deg,rgba(255,255,255,.78),rgba(247,251,253,.60))!important;
  border-color:rgba(43,73,105,.09);
  box-shadow:0 24px 64px rgba(47,70,95,.09),inset 0 1px 0 rgba(255,255,255,.92);
}

/* Light Vault is now a coherent pearl glass surface that lets the landscape breathe. */
html[data-theme="light"] .vault{
  color:#172337;
  background:
    radial-gradient(650px 400px at 0% 0%,rgba(72,120,217,.105),transparent 66%),
    radial-gradient(620px 400px at 100% 18%,rgba(46,181,145,.09),transparent 64%),
    radial-gradient(480px 300px at 78% 100%,rgba(207,91,127,.06),transparent 68%),
    linear-gradient(142deg,rgba(244,249,252,.81),rgba(238,247,248,.74) 57%,rgba(246,242,247,.72))!important;
  border:1px solid rgba(48,78,108,.11);
  box-shadow:0 38px 100px rgba(45,68,93,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .vault-head h2{
  color:#18263b!important;
  text-shadow:none!important;
}
html[data-theme="light"] .vault-head p{color:#6c7f94!important}
html[data-theme="light"] .section-tag.inverted{color:#58718f!important}
html[data-theme="light"] .vault-state{
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(245,250,252,.60))!important;
  border:1px solid rgba(48,78,108,.10)!important;
  box-shadow:0 18px 42px rgba(46,69,94,.08),inset 0 1px 0 rgba(255,255,255,.90);
}
html[data-theme="light"] .vault-state-icon{
  background:linear-gradient(135deg,rgba(72,122,233,.15),rgba(42,196,154,.12))!important;
  color:#3870d7!important;
}
html[data-theme="light"] .vault-state small{color:#70839a!important}
html[data-theme="light"] .vault-state strong{color:#26364b!important}

/* Remove the stark white cards seen in the previous light mode. */
html[data-theme="light"] .secret-card{
  color:#172337;
  background:
    linear-gradient(150deg,rgba(255,255,255,.74),rgba(245,249,252,.61))!important;
  border:1px solid rgba(54,83,112,.095)!important;
  box-shadow:
    0 20px 54px rgba(48,70,94,.085),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-theme="light"] .secret-card:before{
  height:2px;
  background:linear-gradient(90deg,#4f82ee 0%,#35c29b 48%,#d36d93 82%,#d4ae60 100%);
  opacity:.62;
}
html[data-theme="light"] .secret-card h3{color:#172337!important}
html[data-theme="light"] .secret-type{color:#55769b!important}
html[data-theme="light"] .masked-value{color:#25364c!important}
html[data-theme="light"] .privacy-pill{
  color:#4e6683!important;
  border:1px solid rgba(80,108,140,.11)!important;
  background:linear-gradient(135deg,rgba(79,130,238,.08),rgba(211,109,147,.055))!important;
}
html[data-theme="light"] .tap-hint{color:#4777bd!important}
html[data-theme="light"] .vault-footnote{color:#728397!important}

/* Theme controls harmonize with the full-page landscape */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-switch{
  background:rgba(7,18,28,.68);
  border-color:rgba(203,227,246,.13);
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-switch{
  background:rgba(255,255,255,.70);
  border-color:rgba(47,75,105,.09);
  box-shadow:0 14px 32px rgba(49,73,100,.07),inset 0 1px 0 rgba(255,255,255,.92);
}

/* More refined transitions when users manually switch modes. */
.hero-stage,.public-card,.vault,.secret-card,.vault-state,.access-zone,.access-panel,
.secure-mail-zone,.verified-sender-card,.secure-mail-composer,.theme-toggle,.language-switch{
  transition:background .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease;
}

@media(max-width:900px){
  body,html[data-theme="dark"] body,html[data-theme="light"] body{
    background-attachment:scroll!important;
  }
}


/* =========================================================
   V41 HERO REFINEMENT — full Jung visibility + centered portrait composition
   ========================================================= */
.hero-stage{
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr) !important;
  gap:36px !important;
  align-items:center;
}
.hero-copy{
  max-width:none !important;
  min-width:0;
  padding-right:10px;
}
.hero-name{
  display:block;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  font-size:clamp(54px,4.02vw,76px) !important;
  line-height:.90 !important;
  letter-spacing:-.086em !important;
  margin:18px 0 16px !important;
}
.hero-role{
  max-width:720px;
  font-size:clamp(22px,2vw,31px) !important;
  line-height:1.06;
}
.hero-summary{max-width:760px}
.hero-art{
  position:relative;
  width:100%;
  max-width:440px !important;
  min-height:480px !important;
  justify-self:center;
  align-self:center;
  place-items:center;
  transform:none !important;
  padding:26px 0 22px !important;
  z-index:2;
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:8px 6px 8px 6px;
  border-radius:42px;
  z-index:0;
  backdrop-filter:blur(16px) saturate(132%);
  -webkit-backdrop-filter:blur(16px) saturate(132%);
}
.hero-art::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:28px;
  height:116px;
  border-radius:28px;
  z-index:1;
}
html[data-theme="dark"] .hero-art::before{
  background:linear-gradient(145deg,rgba(8,19,30,.46),rgba(9,18,28,.27));
  border:1px solid rgba(210,233,249,.13);
  box-shadow:0 30px 85px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .hero-art::after{
  background:linear-gradient(145deg,rgba(10,20,30,.74),rgba(8,16,24,.56));
  border:1px solid rgba(210,233,249,.11);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}
html[data-theme="light"] .hero-art::before{
  background:linear-gradient(145deg,rgba(255,255,255,.50),rgba(247,251,254,.34));
  border:1px solid rgba(48,78,108,.08);
  box-shadow:0 26px 72px rgba(44,68,95,.10), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .hero-art::after{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(247,251,254,.62));
  border:1px solid rgba(48,78,108,.08);
  box-shadow:0 18px 40px rgba(44,68,95,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.portrait-orbit{z-index:0}
.portrait-card{
  position:relative;
  z-index:2;
  width:286px !important;
  height:286px !important;
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:36px !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.portrait-card>img,
.portrait-empty,
.portrait-glass{
  width:286px !important;
  height:286px !important;
  border-radius:36px !important;
  object-fit:cover;
  object-position:center center;
}
.portrait-card>img,
.portrait-empty{
  box-shadow:0 26px 70px rgba(0,0,0,.20),0 0 0 8px rgba(255,255,255,.03);
}
html[data-theme="light"] .portrait-card>img,
html[data-theme="light"] .portrait-empty{
  box-shadow:0 26px 68px rgba(48,71,99,.12),0 0 0 8px rgba(255,255,255,.30);
}
.portrait-badge{
  position:absolute;
  z-index:3;
  top:315px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%);
  width:min(340px,calc(100% + 48px));
  min-height:78px;
  border-radius:24px !important;
  padding:16px 18px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}
.portrait-badge small{font-size:8px !important;letter-spacing:.18em}
.portrait-badge strong{font-size:13px !important;line-height:1.12}
.spectra-card{z-index:3}
.spectra-one{
  top:58px !important;
  right:12px !important;
}
.spectra-two{
  left:18px !important;
  bottom:54px !important;
}
.orbit-a{width:340px !important;height:340px !important}
.orbit-b{width:300px !important;height:300px !important}

@media (min-width: 1400px){
  .hero-stage{
    grid-template-columns:minmax(0,1.20fr) minmax(390px,.80fr) !important;
    gap:42px !important;
  }
  .hero-name{font-size:clamp(56px,3.88vw,74px) !important}
  .hero-art{max-width:454px !important}
}
@media (min-width: 961px) and (max-width: 1200px){
  .hero-stage{
    grid-template-columns:minmax(0,1.14fr) minmax(330px,.86fr) !important;
    gap:24px !important;
    padding-left:42px !important;
    padding-right:42px !important;
  }
  .hero-name{font-size:clamp(48px,4.15vw,64px) !important}
  .hero-art{max-width:390px !important;min-height:454px !important}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:258px !important;height:258px !important}
  .portrait-badge{top:285px !important;width:min(320px,calc(100% + 42px))}
  .orbit-a{width:314px !important;height:314px !important}
  .orbit-b{width:276px !important;height:276px !important}
}
@media (max-width: 960px){
  .hero-name{white-space:normal}
  .hero-art{min-height:390px !important;max-width:400px !important}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:244px !important;height:244px !important}
  .portrait-badge{top:270px !important;width:min(310px,calc(100% + 36px))}
  .orbit-a{width:300px !important;height:300px !important}
  .orbit-b{width:262px !important;height:262px !important}
}
@media (max-width: 640px){
  .hero-art{min-height:360px !important}
  .portrait-card,.portrait-card>img,.portrait-empty,.portrait-glass{width:220px !important;height:220px !important;border-radius:30px !important}
  .portrait-badge{top:244px !important;width:min(286px,calc(100% + 24px));padding:14px 15px !important}
  .spectra-one{right:6px !important}
  .spectra-two{left:8px !important;bottom:42px !important}
}


/* =========================================================
   V42 BANNER + BEIGE/SKY READABILITY REFINEMENT
   ========================================================= */
.welcome-ribbon{
  margin-top:14px;
  padding:0 6px;
}
.welcome-ribbon-track{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center !important;
  text-align:center;
  min-height:64px;
  padding:0 26px;
  gap:0 !important;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(87,120,153,.16);
  background:linear-gradient(90deg, rgba(245,236,222,.93) 0%, rgba(239,240,234,.92) 36%, rgba(227,243,255,.94) 100%) !important;
  box-shadow:0 18px 46px rgba(36,57,82,.10), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(136%);
  -webkit-backdrop-filter:blur(18px) saturate(136%);
}
.welcome-ribbon-track::before,
.welcome-ribbon-dot,
.welcome-ribbon-text.alt{display:none !important}
.welcome-ribbon-text,
.welcome-ribbon-text.single{
  display:block;
  max-width:min(1280px,100%);
  margin:0 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(14px,1.2vw,22px);
  line-height:1.25;
  font-weight:760;
  letter-spacing:-.02em;
  color:#22324a !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  animation:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.68);
}
html[data-theme="dark"] .welcome-ribbon-track{
  background:linear-gradient(90deg, rgba(230,219,201,.20) 0%, rgba(20,31,46,.68) 22%, rgba(24,41,58,.70) 74%, rgba(194,224,248,.18) 100%) !important;
  border-color:rgba(198,218,238,.16);
  box-shadow:0 22px 54px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .welcome-ribbon-text,
html[data-theme="dark"] .welcome-ribbon-text.single{
  color:#f2e4d2 !important;
  text-shadow:0 1px 0 rgba(7,14,24,.42);
}
html[data-theme="light"] .welcome-ribbon-track{
  background:linear-gradient(90deg, rgba(247,238,224,.94) 0%, rgba(241,243,236,.92) 38%, rgba(228,244,255,.95) 100%) !important;
  border-color:rgba(87,120,153,.14);
}
html[data-theme="light"] .welcome-ribbon-text,
html[data-theme="light"] .welcome-ribbon-text.single{
  color:#22324a !important;
}

/* Public info cards and the first wide section: beige + sky premium readability */
.public-card,
.public-card-wide{
  position:relative;
  background:linear-gradient(115deg, rgba(246,237,223,.90) 0%, rgba(243,241,235,.88) 42%, rgba(228,244,255,.92) 100%) !important;
  border:1px solid rgba(95,123,153,.13) !important;
  box-shadow:0 22px 58px rgba(45,66,92,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.public-card:before,
.public-card-wide:before,
.card-spectrum{
  opacity:.82 !important;
}
.public-card span,
.public-card p,
.public-card-wide span,
.public-card-wide p,
.card-index{
  color:#5e7591 !important;
}
.public-card h3,
.public-card-wide h3{
  color:#1a273b !important;
}
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .public-card-wide{
  background:linear-gradient(115deg, rgba(239,226,208,.15) 0%, rgba(18,31,45,.76) 16%, rgba(20,35,48,.78) 58%, rgba(198,225,244,.13) 100%) !important;
  border-color:rgba(207,227,245,.14) !important;
  box-shadow:0 28px 72px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
html[data-theme="dark"] .public-card span,
html[data-theme="dark"] .public-card p,
html[data-theme="dark"] .public-card-wide span,
html[data-theme="dark"] .public-card-wide p,
html[data-theme="dark"] .card-index{
  color:#cdd9e4 !important;
}
html[data-theme="dark"] .public-card h3,
html[data-theme="dark"] .public-card-wide h3{
  color:#f8fbff !important;
}
html[data-theme="light"] .public-card,
html[data-theme="light"] .public-card-wide{
  background:linear-gradient(115deg, rgba(247,239,226,.94) 0%, rgba(243,242,237,.91) 44%, rgba(230,245,255,.94) 100%) !important;
}

@media (max-width: 900px){
  .welcome-ribbon-track{
    min-height:58px;
    border-radius:24px;
    padding:0 18px;
  }
  .welcome-ribbon-text,
  .welcome-ribbon-text.single{
    white-space:normal;
    text-overflow:clip;
    font-size:13px;
  }
}


/* =========================================================
   V43 TRUE BEIGE + SKY — unmistakable two-tone readability
   ========================================================= */
:root{
  --true-beige:#F2E1C8;
  --true-beige-2:#F8ECDD;
  --true-sky:#BFE9FF;
  --true-sky-2:#93D8FF;
  --true-ink:#17243A;
  --true-ink-soft:#526A86;
}

/* Welcome ribbon: actual beige on the left, actual sky on the right */
.welcome-ribbon-track,
html[data-theme="dark"] .welcome-ribbon-track,
html[data-theme="light"] .welcome-ribbon-track{
  background:linear-gradient(90deg,
    #F2E1C8 0%,
    #F8ECDD 32%,
    #EAF1F4 50%,
    #BFE9FF 72%,
    #93D8FF 100%) !important;
  border:1px solid rgba(75,111,148,.20) !important;
  box-shadow:0 18px 44px rgba(36,67,98,.14), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.welcome-ribbon-text,
.welcome-ribbon-text.single,
html[data-theme="dark"] .welcome-ribbon-text,
html[data-theme="dark"] .welcome-ribbon-text.single,
html[data-theme="light"] .welcome-ribbon-text,
html[data-theme="light"] .welcome-ribbon-text.single{
  color:#17243A !important;
  text-shadow:none !important;
  background:none !important;
  -webkit-text-fill-color:#17243A !important;
}

/* Public-profile cards: fixed true beige→sky surfaces in BOTH themes */
.public-card,
.public-card-wide,
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .public-card-wide,
html[data-theme="light"] .public-card,
html[data-theme="light"] .public-card-wide{
  background:linear-gradient(128deg,
    #F2E1C8 0%,
    #F8ECDD 36%,
    #ECF3F5 53%,
    #C9EDFF 76%,
    #A9DFFF 100%) !important;
  border:1px solid rgba(67,105,143,.18) !important;
  box-shadow:0 22px 58px rgba(46,75,104,.14), inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:#17243A !important;
}
.public-card h3,
.public-card-wide h3,
html[data-theme="dark"] .public-card h3,
html[data-theme="dark"] .public-card-wide h3,
html[data-theme="light"] .public-card h3,
html[data-theme="light"] .public-card-wide h3{
  color:#17243A !important;
}
.public-card span,
.public-card p,
.public-card-wide span,
.public-card-wide p,
.card-index,
html[data-theme="dark"] .public-card span,
html[data-theme="dark"] .public-card p,
html[data-theme="dark"] .public-card-wide span,
html[data-theme="dark"] .public-card-wide p,
html[data-theme="dark"] .card-index,
html[data-theme="light"] .public-card span,
html[data-theme="light"] .public-card p,
html[data-theme="light"] .public-card-wide span,
html[data-theme="light"] .public-card-wide p,
html[data-theme="light"] .card-index{
  color:#526A86 !important;
}
.public-card:before,
.public-card-wide:before,
.card-spectrum{
  background:linear-gradient(90deg,#D3B88F 0%,#EACCA5 28%,#93D8FF 68%,#57BFFF 100%) !important;
  opacity:1 !important;
}

/* Vault and masked cards: same beige/sky family instead of grey/navy */
.vault,
html[data-theme="dark"] .vault,
html[data-theme="light"] .vault{
  color:#17243A !important;
  background:
    radial-gradient(580px 360px at 2% 0%,rgba(255,255,255,.62),transparent 68%),
    linear-gradient(128deg,#EEDDC2 0%,#F6E9D7 33%,#E7F1F4 54%,#BDE7FB 78%,#98D8F7 100%) !important;
  border:1px solid rgba(69,106,142,.20) !important;
  box-shadow:0 34px 92px rgba(38,68,98,.16),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.vault-head h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="light"] .vault-head h2{
  color:#17243A !important;
}
.vault-head p,
html[data-theme="dark"] .vault-head p,
html[data-theme="light"] .vault-head p,
.section-tag.inverted,
html[data-theme="dark"] .section-tag.inverted,
html[data-theme="light"] .section-tag.inverted{
  color:#526A86 !important;
}
.vault-state,
html[data-theme="dark"] .vault-state,
html[data-theme="light"] .vault-state{
  background:linear-gradient(120deg,#F6E7D2 0%,#DDF2FD 100%) !important;
  border:1px solid rgba(69,106,142,.16) !important;
  box-shadow:0 16px 38px rgba(43,72,100,.11),inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.vault-state small,
.vault-state strong,
html[data-theme="dark"] .vault-state small,
html[data-theme="dark"] .vault-state strong,
html[data-theme="light"] .vault-state small,
html[data-theme="light"] .vault-state strong{
  color:#24364E !important;
}
.secret-card,
html[data-theme="dark"] .secret-card,
html[data-theme="light"] .secret-card{
  background:linear-gradient(132deg,#F5E6D0 0%,#F9EEDF 38%,#E5F4FB 62%,#BDE7FB 100%) !important;
  border:1px solid rgba(69,106,142,.17) !important;
  box-shadow:0 20px 48px rgba(43,72,100,.13),inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:#17243A !important;
}
.secret-card h3,
.secret-type,
.masked-value,
html[data-theme="dark"] .secret-card h3,
html[data-theme="dark"] .secret-type,
html[data-theme="dark"] .masked-value,
html[data-theme="light"] .secret-card h3,
html[data-theme="light"] .secret-type,
html[data-theme="light"] .masked-value{
  color:#17243A !important;
}
.secret-type{color:#4B6C91 !important}
.tap-hint{color:#2D6FB3 !important}
.privacy-pill{
  color:#405B78 !important;
  background:linear-gradient(90deg,rgba(234,205,168,.78),rgba(176,225,250,.82)) !important;
  border-color:rgba(69,106,142,.16) !important;
}

/* Access/content panels receive matching soft beige/sky glass */
.access-panel,
.secure-mail-zone,
.verified-sender-card,
.secure-mail-composer,
.secure-mail-lock,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .secure-mail-zone,
html[data-theme="dark"] .verified-sender-card,
html[data-theme="dark"] .secure-mail-composer,
html[data-theme="dark"] .secure-mail-lock,
html[data-theme="light"] .access-panel,
html[data-theme="light"] .secure-mail-zone,
html[data-theme="light"] .verified-sender-card,
html[data-theme="light"] .secure-mail-composer,
html[data-theme="light"] .secure-mail-lock{
  background:linear-gradient(130deg,rgba(245,230,208,.94) 0%,rgba(246,238,225,.92) 40%,rgba(207,237,252,.94) 100%) !important;
  border-color:rgba(69,106,142,.16) !important;
  color:#17243A !important;
}

@media(max-width:640px){
  .welcome-ribbon-track{border-radius:20px}
}


/* =========================================================
   V44 CERTIFICATE STREAM + FINAL NAME FIT
   ========================================================= */
.hero-stage{
  grid-template-columns:minmax(0,1.28fr) minmax(350px,.72fr)!important;
  gap:30px!important;
}
.hero-copy{min-width:0!important;max-width:none!important;padding-right:18px!important}
.hero-name{
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  padding-right:.22em!important;
  font-size:clamp(50px,3.7vw,72px)!important;
  letter-spacing:-.06em!important;
  line-height:.92!important;
}
@media(min-width:1400px){
  .hero-stage{grid-template-columns:minmax(0,1.31fr) minmax(390px,.69fr)!important}
  .hero-name{font-size:clamp(54px,3.55vw,70px)!important}
}
@media(max-width:960px){
  .hero-name{display:block!important;width:100%!important;white-space:normal!important;padding-right:0!important}
}

.certificate-showcase{
  position:relative;
  overflow:hidden;
  margin-top:24px;
  padding:34px 0 28px;
  border-top:1px solid rgba(186,218,239,.15);
  border-bottom:1px solid rgba(186,218,239,.12);
}
.certificate-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 10% 20%,rgba(242,225,200,.12),transparent 65%),
    radial-gradient(580px 230px at 90% 55%,rgba(147,216,255,.13),transparent 68%);
}
.certificate-showcase-head{
  position:relative;z-index:2;
  display:flex;align-items:end;justify-content:space-between;gap:28px;
  padding:0 28px 24px;
}
.certificate-showcase-head h2{
  margin:10px 0 0;
  max-width:850px;
  font-size:clamp(34px,3.6vw,58px);
  line-height:1;
  letter-spacing:-.055em;
}
.certificate-protection-badge{
  display:flex;align-items:center;gap:10px;
  min-width:210px;padding:12px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--glass);
  backdrop-filter:blur(18px);
}
.certificate-protection-badge>span{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#F2E1C8,#93D8FF);
  color:#1d3855;font-weight:900;
}
.certificate-protection-badge small{display:block;font-size:7px;letter-spacing:.14em;color:var(--muted);font-weight:900}
.certificate-protection-badge strong{display:block;margin-top:3px;font-size:10px}

.certificate-stream{
  position:relative;
  z-index:2;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  padding:8px 0 12px;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.certificate-track{
  display:flex;
  width:max-content;
  gap:22px;
  padding:0 14px;
  animation:certificateFlow 58s linear infinite;
  will-change:transform;
}
.certificate-stream:hover .certificate-track{animation-play-state:paused}
.certificate-card{
  flex:0 0 310px;
  display:grid;
  gap:13px;
}
.certificate-frame{
  position:relative;
  height:438px;
  padding:13px;
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(242,225,200,.94),rgba(250,244,234,.90) 44%,rgba(191,233,255,.92));
  border:1px solid rgba(92,124,156,.18);
  box-shadow:0 24px 66px rgba(18,40,64,.16),inset 0 1px 0 rgba(255,255,255,.88);
}
.certificate-frame::before{
  content:"";
  position:absolute;inset:6px;
  border:1px solid rgba(27,54,82,.10);
  border-radius:22px;
  pointer-events:none;
}
.certificate-sheet{
  position:absolute;
  inset:13px;
  border-radius:19px;
  background-image:var(--certificate-image);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-color:#f8f6ef;
  box-shadow:0 14px 34px rgba(25,45,67,.12);
  pointer-events:none;
  -webkit-user-drag:none;
}
.certificate-shield{
  position:absolute;
  inset:13px;
  border-radius:19px;
  z-index:4;
  pointer-events:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:14px 15px;
  background:
    linear-gradient(180deg,transparent 0%,transparent 72%,rgba(12,24,38,.34) 100%);
}
.certificate-shield span,
.certificate-shield b{
  color:rgba(255,255,255,.80);
  text-shadow:0 1px 4px rgba(0,0,0,.38);
  font-size:7px;
  letter-spacing:.14em;
  font-weight:900;
}
.certificate-corner{
  position:absolute;width:34px;height:34px;z-index:5;pointer-events:none;
}
.certificate-corner.c1{left:7px;top:7px;border-left:2px solid #d1b787;border-top:2px solid #d1b787;border-radius:16px 0 0}
.certificate-corner.c2{right:7px;bottom:7px;border-right:2px solid #78c9ef;border-bottom:2px solid #78c9ef;border-radius:0 0 16px}
.certificate-caption{
  min-height:76px;
  padding:0 7px;
}
.certificate-caption small{
  display:block;
  color:#78a5cb;
  font-size:7px;
  letter-spacing:.15em;
  font-weight:900;
}
.certificate-caption strong{
  display:block;
  margin-top:5px;
  font-size:14px;
  line-height:1.25;
  color:var(--text);
}
.certificate-caption span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}
.certificate-protection-note{
  position:relative;z-index:2;
  margin:15px 28px 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}
html[data-theme="dark"] .certificate-frame{
  background:linear-gradient(135deg,rgba(242,225,200,.22),rgba(15,28,41,.92) 38%,rgba(147,216,255,.18));
  border-color:rgba(203,226,244,.14);
}
html[data-theme="dark"] .certificate-caption strong{color:#f4f8fb}
html[data-theme="light"] .certificate-showcase{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
}

@keyframes certificateFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media(max-width:800px){
  .certificate-showcase-head{align-items:flex-start;flex-direction:column;padding-left:16px;padding-right:16px}
  .certificate-protection-badge{width:100%;min-width:0}
  .certificate-card{flex-basis:248px}
  .certificate-frame{height:350px;border-radius:23px}
  .certificate-track{gap:15px}
  .certificate-protection-note{margin-left:16px;margin-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .certificate-track{animation:none;overflow-x:auto}
}
@media print{
  .certificate-showcase{display:none!important}
}


/* =========================================================
   V45 DUAL SIGNATURE THEME
   Theme-specific typography, hierarchy, patterns and contrast.
   Public page alternates Dark / Light on each full page access.
   ========================================================= */

/* ---------- Shared precision typography ---------- */
html{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Pretendard Variable","Pretendard","Noto Sans KR","Segoe UI",sans-serif;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{font-weight:430;line-height:1.55}
.hero-name,.section-intro h2,.vault-head h2,.access-head h2,.secure-mail-head h2,.certificate-showcase-head h2{
  font-weight:760!important;
  font-feature-settings:"kern" 1,"ss01" 1;
}
.hero-role,.public-card h3,.secret-card h3,.flow-copy h3,.certificate-caption strong{
  font-weight:690!important;
  font-feature-settings:"kern" 1;
}
.eyebrow,.section-tag,.public-card>span,.secret-type,.certificate-caption small,.hero-facts small,
.composer-field>span,.identity-copy small{
  font-weight:820!important;
  letter-spacing:.145em!important;
  text-transform:uppercase;
}
.hero-summary,.section-intro p,.vault-head p,.access-head p,.secure-mail-head p,.public-card p,.flow-copy p{
  font-weight:440;
  letter-spacing:-.018em;
}

/* ---------- DARK: cinematic navy + warm beige + clear sky ---------- */
html[data-theme="dark"]{
  --text:#F7FAFD;
  --text2:#DDE7F0;
  --muted:#A8BACB;
  --line:rgba(204,227,244,.14);
  --line2:rgba(212,233,248,.22);
  --surface:rgba(7,18,29,.72);
  --surface-strong:rgba(5,15,25,.88);
  --surface-soft:rgba(205,229,247,.055);
  --glass:rgba(8,21,32,.70);
  --glass2:rgba(6,18,29,.86);
}
html[data-theme="dark"] body{
  color:#F7FAFD;
  background:
    linear-gradient(118deg,rgba(3,9,16,.70) 0%,rgba(5,15,25,.48) 32%,rgba(6,17,27,.30) 57%,rgba(4,10,17,.58) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat!important;
}
html[data-theme="dark"] .identity-copy strong{color:#F5F9FD;font-size:13px;font-weight:720;letter-spacing:-.025em}
html[data-theme="dark"] .identity-copy small{color:#A5B8C9;font-size:8px}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .section-tag{color:#9EB6CC}
html[data-theme="dark"] .hero-name{
  color:#F7FAFE;
  text-shadow:0 1px 0 rgba(255,255,255,.04),0 18px 52px rgba(0,0,0,.22);
}
html[data-theme="dark"] .hero-role{
  color:#F7FAFD!important;
  background:linear-gradient(118deg,rgba(242,225,200,.13),rgba(13,31,46,.72) 28%,rgba(45,115,157,.28) 100%)!important;
  border-color:rgba(191,224,246,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)!important;
  font-size:clamp(23px,2vw,32px)!important;
  letter-spacing:-.045em!important;
}
html[data-theme="dark"] .hero-summary{
  color:#B8C7D5!important;
  font-size:16px!important;
  line-height:1.82!important;
}
html[data-theme="dark"] .hero-facts div{
  background:linear-gradient(135deg,rgba(9,23,35,.78),rgba(12,27,39,.62))!important;
  border-color:rgba(204,227,244,.13)!important;
}
html[data-theme="dark"] .hero-facts small{color:#84B9E0!important;font-size:8px!important}
html[data-theme="dark"] .hero-facts strong{color:#F0F5FA!important;font-size:12px!important;font-weight:670}

html[data-theme="dark"] .welcome-ribbon-track{
  background:linear-gradient(90deg,rgba(232,217,195,.18) 0%,rgba(8,22,35,.84) 26%,rgba(12,32,47,.84) 70%,rgba(147,216,255,.18) 100%)!important;
  border-color:rgba(204,227,244,.15)!important;
}
html[data-theme="dark"] .welcome-ribbon-text.single{
  color:#F2E5D2!important;
  -webkit-text-fill-color:#F2E5D2!important;
  font-size:clamp(14px,1.15vw,19px)!important;
  font-weight:650!important;
  letter-spacing:-.015em!important;
}

html[data-theme="dark"] .section-intro h2,
html[data-theme="dark"] .vault-head h2,
html[data-theme="dark"] .access-head h2,
html[data-theme="dark"] .secure-mail-head h2,
html[data-theme="dark"] .certificate-showcase-head h2{
  color:#F8FBFD!important;
  letter-spacing:-.058em!important;
  line-height:.98!important;
  text-shadow:0 14px 38px rgba(0,0,0,.18);
}
html[data-theme="dark"] .section-intro p,
html[data-theme="dark"] .vault-head p,
html[data-theme="dark"] .access-head p,
html[data-theme="dark"] .secure-mail-head p{
  color:#AEC0D0!important;
  font-size:14px!important;
  line-height:1.76!important;
}

/* Dark public cards: real dark surfaces, beige/sky accents */
html[data-theme="dark"] .public-card,
html[data-theme="dark"] .public-card-wide{
  color:#F7FAFD!important;
  background:
    linear-gradient(125deg,rgba(242,225,200,.10) 0%,rgba(8,22,34,.90) 18%,rgba(9,28,40,.88) 66%,rgba(147,216,255,.12) 100%)!important;
  border-color:rgba(203,227,245,.14)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] .public-card h3,html[data-theme="dark"] .public-card-wide h3{
  color:#F8FBFD!important;
  font-size:clamp(24px,2vw,31px)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}
html[data-theme="dark"] .public-card>span,html[data-theme="dark"] .public-card-wide span,html[data-theme="dark"] .card-index{
  color:#91C6EB!important;
  font-size:8px!important;
}
html[data-theme="dark"] .public-card p,html[data-theme="dark"] .public-card-wide p{
  color:#B4C4D2!important;
  font-size:13px!important;
  line-height:1.72!important;
}
html[data-theme="dark"] .card-spectrum,
html[data-theme="dark"] .public-card:before,
html[data-theme="dark"] .public-card-wide:before{
  background:linear-gradient(90deg,#D2B88F 0%,#E8D1AE 26%,#76C7EF 66%,#38AEEB 100%)!important;
}

/* Dark vault */
html[data-theme="dark"] .vault{
  color:#F7FAFD!important;
  background:
    radial-gradient(700px 430px at 0% 0%,rgba(57,100,181,.20),transparent 66%),
    radial-gradient(620px 400px at 100% 20%,rgba(34,151,124,.14),transparent 65%),
    linear-gradient(142deg,rgba(5,15,24,.90),rgba(8,25,33,.84) 58%,rgba(12,17,25,.86))!important;
  border-color:rgba(211,233,248,.16)!important;
}
html[data-theme="dark"] .vault-state{
  background:linear-gradient(132deg,rgba(13,29,40,.88),rgba(9,24,33,.75))!important;
}
html[data-theme="dark"] .vault-state small{color:#90B7D1!important;font-size:7px!important}
html[data-theme="dark"] .vault-state strong{color:#F5F9FC!important;font-size:11px!important}
html[data-theme="dark"] .secret-card{
  color:#F7FAFD!important;
  background:linear-gradient(138deg,rgba(12,29,39,.86),rgba(8,23,31,.76))!important;
  border-color:rgba(204,229,246,.14)!important;
}
html[data-theme="dark"] .secret-card h3{color:#F7FAFD!important;font-size:clamp(23px,1.85vw,29px)!important;letter-spacing:-.04em!important}
html[data-theme="dark"] .secret-type{color:#89B7D7!important;font-size:8px!important}
html[data-theme="dark"] .masked-value{color:#D8E3EC!important;font-size:22px!important;letter-spacing:.05em!important}
html[data-theme="dark"] .privacy-pill{color:#D8E6F1!important;background:linear-gradient(90deg,rgba(215,185,141,.13),rgba(111,195,237,.12))!important}
html[data-theme="dark"] .tap-hint{color:#91C8ED!important;font-size:10px!important}

/* Dark access / secure mail */
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .secure-mail-zone,
html[data-theme="dark"] .verified-sender-card,
html[data-theme="dark"] .secure-mail-composer,
html[data-theme="dark"] .secure-mail-lock{
  color:#F6F9FC!important;
  background:linear-gradient(138deg,rgba(8,22,33,.86),rgba(9,26,37,.74))!important;
  border-color:rgba(203,228,246,.14)!important;
}
html[data-theme="dark"] .flow-copy h3{color:#F7FAFD!important;font-size:26px!important;letter-spacing:-.04em!important}
html[data-theme="dark"] .flow-copy p{color:#AFC0CF!important;font-size:13px!important;line-height:1.68!important}
html[data-theme="dark"] .access-form label span,html[data-theme="dark"] .composer-field>span{color:#A4C1D7!important;font-size:8px!important}
html[data-theme="dark"] .access-form input,html[data-theme="dark"] .otp-input,
html[data-theme="dark"] .composer-field input,html[data-theme="dark"] .composer-field textarea{
  color:#F7FAFD!important;
  background:rgba(5,16,26,.72)!important;
  border-color:rgba(204,227,244,.15)!important;
}

/* Dark certificates */
html[data-theme="dark"] .certificate-showcase{
  background:linear-gradient(180deg,rgba(5,16,26,.30),rgba(7,19,29,.12))!important;
}
html[data-theme="dark"] .certificate-caption small{color:#8BC6EA!important;font-size:7px!important}
html[data-theme="dark"] .certificate-caption strong{color:#F6F9FC!important;font-size:15px!important;letter-spacing:-.025em!important}
html[data-theme="dark"] .certificate-caption span{color:#A8BBCB!important;font-size:10px!important}
html[data-theme="dark"] .certificate-protection-note{color:#9EB0C0!important}

/* ---------- LIGHT: pearl beige + sky + deep ink ---------- */
html[data-theme="light"]{
  --text:#142137;
  --text2:#293B52;
  --muted:#657D96;
  --line:rgba(53,84,113,.10);
  --line2:rgba(53,84,113,.17);
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.89);
  --surface-soft:rgba(34,63,91,.035);
  --glass:rgba(255,255,255,.70);
  --glass2:rgba(255,255,255,.88);
}
html[data-theme="light"] body{
  color:#142137;
  background:
    linear-gradient(118deg,rgba(250,246,239,.68) 0%,rgba(247,251,253,.50) 37%,rgba(235,247,254,.34) 62%,rgba(249,247,242,.48) 100%),
    url('/static/profile-background-v34.png') center center / cover fixed no-repeat!important;
}
html[data-theme="light"] .identity-copy strong{color:#17263B;font-size:13px;font-weight:720}
html[data-theme="light"] .identity-copy small{color:#668099;font-size:8px}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .section-tag{color:#587A9B}
html[data-theme="light"] .hero-name{
  color:#12213A;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 20px 44px rgba(50,76,105,.09);
}
html[data-theme="light"] .hero-role{
  color:#17283F!important;
  background:linear-gradient(118deg,rgba(242,225,200,.84),rgba(247,243,234,.80) 38%,rgba(191,233,255,.80) 100%)!important;
  border-color:rgba(60,96,128,.13)!important;
  box-shadow:0 18px 42px rgba(48,72,98,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
  font-size:clamp(23px,2vw,32px)!important;
  letter-spacing:-.045em!important;
}
html[data-theme="light"] .hero-summary{
  color:#617A94!important;
  font-size:16px!important;
  line-height:1.82!important;
}
html[data-theme="light"] .hero-facts div{
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(239,248,253,.72))!important;
  border-color:rgba(52,83,112,.10)!important;
}
html[data-theme="light"] .hero-facts small{color:#3E77AB!important;font-size:8px!important}
html[data-theme="light"] .hero-facts strong{color:#1B2C43!important;font-size:12px!important;font-weight:680}

html[data-theme="light"] .welcome-ribbon-track{
  background:linear-gradient(90deg,#F2E1C8 0%,#F8ECDD 34%,#EAF3F6 54%,#BFE9FF 78%,#93D8FF 100%)!important;
  border-color:rgba(67,104,139,.16)!important;
}
html[data-theme="light"] .welcome-ribbon-text.single{
  color:#19314B!important;
  -webkit-text-fill-color:#19314B!important;
  font-size:clamp(14px,1.15vw,19px)!important;
  font-weight:650!important;
  letter-spacing:-.015em!important;
}

html[data-theme="light"] .section-intro h2,
html[data-theme="light"] .vault-head h2,
html[data-theme="light"] .access-head h2,
html[data-theme="light"] .secure-mail-head h2,
html[data-theme="light"] .certificate-showcase-head h2{
  color:#14233A!important;
  letter-spacing:-.058em!important;
  line-height:.98!important;
  text-shadow:0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .section-intro p,
html[data-theme="light"] .vault-head p,
html[data-theme="light"] .access-head p,
html[data-theme="light"] .secure-mail-head p{
  color:#627A92!important;
  font-size:14px!important;
  line-height:1.76!important;
}

/* Light cards retain the requested true beige + sky, but with cleaner hierarchy */
html[data-theme="light"] .public-card,
html[data-theme="light"] .public-card-wide{
  color:#15253B!important;
  background:linear-gradient(128deg,#F2E1C8 0%,#F8ECDD 36%,#ECF4F6 55%,#C7EDFF 78%,#A8DFFF 100%)!important;
  border-color:rgba(67,104,139,.16)!important;
  box-shadow:0 22px 58px rgba(46,75,104,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-theme="light"] .public-card h3,html[data-theme="light"] .public-card-wide h3{
  color:#15253B!important;
  font-size:clamp(24px,2vw,31px)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}
html[data-theme="light"] .public-card>span,html[data-theme="light"] .public-card-wide span,html[data-theme="light"] .card-index{
  color:#426C94!important;
  font-size:8px!important;
}
html[data-theme="light"] .public-card p,html[data-theme="light"] .public-card-wide p{
  color:#536C86!important;
  font-size:13px!important;
  line-height:1.72!important;
}

/* Light vault: bright but not washed out */
html[data-theme="light"] .vault{
  color:#15253B!important;
  background:
    radial-gradient(650px 380px at 0% 0%,rgba(255,255,255,.62),transparent 68%),
    linear-gradient(128deg,#EEDDC2 0%,#F6E9D7 34%,#E7F2F5 55%,#BDE7FB 80%,#98D8F7 100%)!important;
  border-color:rgba(67,104,139,.18)!important;
  box-shadow:0 32px 86px rgba(42,69,96,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
html[data-theme="light"] .vault-state{
  background:linear-gradient(120deg,rgba(249,237,220,.92),rgba(219,241,252,.92))!important;
}
html[data-theme="light"] .vault-state small{color:#587594!important;font-size:7px!important}
html[data-theme="light"] .vault-state strong{color:#1B2D44!important;font-size:11px!important}
html[data-theme="light"] .secret-card{
  color:#15253B!important;
  background:linear-gradient(132deg,#F5E6D0 0%,#F9EEDF 38%,#E5F4FB 62%,#BDE7FB 100%)!important;
  border-color:rgba(67,104,139,.15)!important;
}
html[data-theme="light"] .secret-card h3{color:#15253B!important;font-size:clamp(23px,1.85vw,29px)!important;letter-spacing:-.04em!important}
html[data-theme="light"] .secret-type{color:#466C91!important;font-size:8px!important}
html[data-theme="light"] .masked-value{color:#21354E!important;font-size:22px!important;letter-spacing:.05em!important}
html[data-theme="light"] .privacy-pill{color:#405D79!important;background:linear-gradient(90deg,rgba(234,205,168,.75),rgba(176,225,250,.82))!important}
html[data-theme="light"] .tap-hint{color:#2F72B4!important;font-size:10px!important}

/* Light access / secure mail */
html[data-theme="light"] .access-panel,
html[data-theme="light"] .secure-mail-zone,
html[data-theme="light"] .verified-sender-card,
html[data-theme="light"] .secure-mail-composer,
html[data-theme="light"] .secure-mail-lock{
  color:#15253B!important;
  background:linear-gradient(130deg,rgba(248,235,216,.92) 0%,rgba(249,244,235,.91) 42%,rgba(211,239,252,.93) 100%)!important;
  border-color:rgba(67,104,139,.14)!important;
}
html[data-theme="light"] .flow-copy h3{color:#17283F!important;font-size:26px!important;letter-spacing:-.04em!important}
html[data-theme="light"] .flow-copy p{color:#607991!important;font-size:13px!important;line-height:1.68!important}
html[data-theme="light"] .access-form label span,html[data-theme="light"] .composer-field>span{color:#506E8C!important;font-size:8px!important}
html[data-theme="light"] .access-form input,html[data-theme="light"] .otp-input,
html[data-theme="light"] .composer-field input,html[data-theme="light"] .composer-field textarea{
  color:#17283F!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(61,93,123,.14)!important;
}

/* Light certificates */
html[data-theme="light"] .certificate-showcase{
  background:linear-gradient(180deg,rgba(248,239,225,.20),rgba(219,242,254,.16))!important;
}
html[data-theme="light"] .certificate-caption small{color:#4A82AC!important;font-size:7px!important}
html[data-theme="light"] .certificate-caption strong{color:#17283F!important;font-size:15px!important;letter-spacing:-.025em!important}
html[data-theme="light"] .certificate-caption span{color:#647C93!important;font-size:10px!important}
html[data-theme="light"] .certificate-protection-note{color:#667C91!important}

/* Buttons / language / theme control typography */
.theme-toggle,.language-switch,.verified-chip,.action-btn,.secure-send-btn,.modal-cta{
  font-weight:720!important;
  letter-spacing:-.01em;
}
html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .language-switch{
  color:#E6EEF6!important;background:rgba(7,18,29,.76)!important;border-color:rgba(204,227,244,.14)!important;
}
html[data-theme="light"] .theme-toggle,html[data-theme="light"] .language-switch{
  color:#21354D!important;background:rgba(255,255,255,.78)!important;border-color:rgba(54,85,114,.11)!important;
}

/* Footer and microcopy */
html[data-theme="dark"] .site-footer,html[data-theme="dark"] .site-footer p,html[data-theme="dark"] .site-footer span{color:#9FB1C1!important}
html[data-theme="light"] .site-footer,html[data-theme="light"] .site-footer p,html[data-theme="light"] .site-footer span{color:#617991!important}

/* Make mode changes feel intentional, not abrupt. */
body,.hero-stage,.hero-role,.public-card,.public-card-wide,.vault,.vault-state,.secret-card,
.access-zone,.access-panel,.secure-mail-zone,.secure-mail-composer,.verified-sender-card,
.theme-toggle,.language-switch,.certificate-showcase{
  transition:background-color .34s ease,background .34s ease,color .28s ease,border-color .28s ease,box-shadow .34s ease!important;
}

@media(max-width:900px){
  html[data-theme="dark"] body,html[data-theme="light"] body{background-attachment:scroll!important}
  .hero-summary{font-size:14px!important;line-height:1.72!important}
  .section-intro p,.vault-head p,.access-head p,.secure-mail-head p{font-size:13px!important}
}
@media(max-width:640px){
  .hero-role{font-size:21px!important;line-height:1.10!important}
  .public-card h3,.public-card-wide h3{font-size:23px!important}
  .secret-card h3{font-size:22px!important}
  .certificate-caption strong{font-size:14px!important}
}


/* =========================================================
   V46 MULTI-UPLOAD CERTIFICATES + HIGHLIGHT CAROUSEL
   ========================================================= */
.hero-stage{grid-template-columns:minmax(0,1.42fr) minmax(340px,.58fr)!important;gap:34px!important}
.hero-copy{padding-right:26px!important}
.hero-name{
  max-width:none!important;
  font-size:clamp(42px,3.25vw,64px)!important;
  letter-spacing:-.048em!important;
  line-height:.94!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-wrap:balance;
}
@media(min-width:1500px){.hero-stage{grid-template-columns:minmax(0,1.48fr) minmax(350px,.52fr)!important}.hero-name{font-size:clamp(44px,3.15vw,62px)!important}}
@media(max-width:960px){.hero-stage{grid-template-columns:1fr!important}.hero-copy{padding-right:0!important}.hero-name{white-space:normal!important;font-size:clamp(44px,10vw,66px)!important}}

.certificate-showcase{padding:34px 0 26px!important}
.certificate-intro-copy{max-width:860px;margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.certificate-carousel-shell{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 72px;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.certificate-nav{
  width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(128,180,220,.22);
  background:linear-gradient(135deg,rgba(242,225,200,.30),rgba(147,216,255,.22));
  color:var(--text);font-size:28px;font-weight:700;cursor:pointer;
  box-shadow:0 14px 36px rgba(20,39,61,.16), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.certificate-nav:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 18px 40px rgba(20,39,61,.22)}
.certificate-viewport{
  overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:18px 0 26px;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.certificate-viewport::-webkit-scrollbar{display:none}
.certificate-track{
  display:flex!important;
  gap:26px;
  padding:10px calc(50% - 155px) 18px;
  width:max-content;
  animation:none!important;
}
.certificate-card{
  flex:0 0 310px!important;
  scroll-snap-align:center;
  transition:transform .55s cubic-bezier(.2,.7,.15,1), opacity .42s ease, filter .42s ease;
  transform:scale(.88) translateY(18px);
  opacity:.55;filter:saturate(.85);
}
.certificate-card.is-near{transform:scale(.94) translateY(8px);opacity:.84;filter:saturate(.96)}
.certificate-card.is-active{transform:scale(1) translateY(0);opacity:1;filter:none}
.certificate-frame{
  position:relative;height:440px;border-radius:34px;overflow:hidden;
  background:linear-gradient(135deg,rgba(242,225,200,.97),rgba(249,244,235,.94) 46%,rgba(191,233,255,.96));
  border:1px solid rgba(89,122,156,.18);box-shadow:0 26px 76px rgba(17,37,58,.18), inset 0 1px 0 rgba(255,255,255,.92);
}
.certificate-card.is-active .certificate-frame{box-shadow:0 34px 90px rgba(16,35,58,.26), inset 0 1px 0 rgba(255,255,255,.96)}
.certificate-frame::after{
  content:'';position:absolute;left:18px;right:18px;bottom:14px;height:28px;border-radius:999px;
  background:radial-gradient(circle at center,rgba(75,123,167,.22),transparent 70%);pointer-events:none;
}
.certificate-sheet{inset:14px!important;border-radius:24px!important;background-size:cover!important;box-shadow:0 18px 40px rgba(22,40,61,.14)!important}
.certificate-card-index{
  position:absolute;left:16px;bottom:16px;z-index:5;
  min-width:46px;height:34px;padding:0 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,18,29,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.14em;
}
html[data-theme='light'] .certificate-card-index{background:rgba(255,255,255,.82);color:#1b2a3f;border-color:rgba(91,121,151,.14)}
.certificate-progress{position:relative;z-index:2;height:5px;margin:4px 108px 0;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.certificate-progress-bar{display:block;height:100%;width:10%;border-radius:inherit;background:linear-gradient(90deg,#F2E1C8,#93D8FF,#4da5ff);transition:width .45s ease}
html[data-theme='dark'] .certificate-frame{background:linear-gradient(135deg,rgba(242,225,200,.22),rgba(16,29,44,.95) 36%,rgba(147,216,255,.18))}
html[data-theme='dark'] .certificate-nav{background:linear-gradient(135deg,rgba(242,225,200,.20),rgba(13,29,46,.92) 46%,rgba(147,216,255,.18));color:#f4f8fd}
html[data-theme='dark'] .certificate-progress{background:rgba(255,255,255,.06)}
html[data-theme='light'] .certificate-nav{background:linear-gradient(135deg,rgba(252,247,238,.96),rgba(191,233,255,.92));color:#24354c}
html[data-theme='light'] .certificate-progress{background:rgba(36,61,90,.08)}
html[data-theme='light'] .certificate-frame{background:linear-gradient(135deg,rgba(251,246,238,.98),rgba(255,255,255,.95) 38%,rgba(207,239,255,.96))}
@media(max-width:900px){
  .certificate-carousel-shell{grid-template-columns:56px minmax(0,1fr) 56px;gap:4px}
  .certificate-nav{width:46px;height:46px;font-size:24px}
  .certificate-track{gap:16px;padding:6px calc(50% - 120px) 14px}
  .certificate-card{flex-basis:240px!important}
  .certificate-frame{height:342px;border-radius:24px}
  .certificate-progress{margin:4px 58px 0}
}
@media(max-width:640px){
  .certificate-showcase-head{padding-left:16px;padding-right:16px}
  .certificate-intro-copy{font-size:13px}
}


/* =========================================================
   V47 FINAL THEME READABILITY OPTIMIZATION
   Dark / Light each independently tuned for readability
   ========================================================= */
:root{
  --v47-light-base:#f7f3ec;
  --v47-light-ink:#16283d;
  --v47-light-sub:#5d748d;
  --v47-light-line:rgba(78,109,140,.14);
  --v47-light-panel:rgba(255,255,255,.72);
  --v47-dark-base:#081523;
  --v47-dark-ink:#f3f8ff;
  --v47-dark-sub:#a9bed6;
  --v47-dark-line:rgba(190,224,255,.12);
  --v47-dark-panel:rgba(8,22,36,.74);
}

/* Shared text hierarchy tightening */
.hero-copy{position:relative;z-index:2}
.hero-kicker,.section-tag,.public-card span,.secret-type,.flow-copy h3,.certificate-caption small{
  letter-spacing:.16em!important;
}
.hero-name{
  display:block!important;
  width:100%!important;
  font-weight:780!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
  text-wrap:balance!important;
  overflow:visible!important;
}
.hero-role{
  display:inline-flex!important;
  align-items:center!important;
  min-height:84px!important;
  padding:18px 30px!important;
  border-radius:28px!important;
  font-weight:760!important;
  letter-spacing:-.045em!important;
  line-height:1.08!important;
  box-shadow:0 18px 42px rgba(26,47,72,.10), inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.hero-summary{font-weight:510!important;max-width:760px!important}
.hero-facts div,.public-card,.public-card-wide,.vault,.access-panel,.secure-mail-zone,.verified-sender-card,.secure-mail-composer{
  backdrop-filter:blur(18px);
}

/* -------------------- DARK MODE -------------------- */
html[data-theme='dark'] body{
  color:var(--v47-dark-ink)!important;
}
html[data-theme='dark'] .hero-stage{
  background:
    linear-gradient(135deg,rgba(10,28,46,.94) 0%,rgba(11,26,41,.92) 36%,rgba(8,22,36,.90) 68%,rgba(10,34,49,.94) 100%)!important;
  border:1px solid rgba(162,203,235,.12)!important;
  box-shadow:0 32px 90px rgba(4,12,22,.34), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-theme='dark'] .hero-stage::before{
  background:radial-gradient(circle at 28% 26%,rgba(114,180,255,.16),transparent 46%),radial-gradient(circle at 78% 18%,rgba(59,226,193,.12),transparent 34%),radial-gradient(circle at 84% 88%,rgba(255,184,98,.10),transparent 26%)!important;
  opacity:1!important;
}
html[data-theme='dark'] .hero-stage::after{
  background:linear-gradient(90deg,rgba(242,225,200,.10),rgba(147,216,255,.04),transparent 72%)!important;
  opacity:1!important;
}
html[data-theme='dark'] .hero-name{
  color:#f6fbff!important;
  background:linear-gradient(90deg,#F6FBFF 0%,#D8EEFF 20%,#7BC6FF 44%,#4AB5FF 58%,#43D1C3 78%,#AEE8E1 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 10px 32px rgba(19,96,175,.20)!important;
  filter:drop-shadow(0 2px 0 rgba(4,10,18,.26));
}
html[data-theme='dark'] .hero-role{
  color:#F7FBFF!important;
  background:linear-gradient(90deg,rgba(55,86,142,.60) 0%,rgba(33,74,117,.72) 30%,rgba(20,89,122,.76) 66%,rgba(25,120,121,.68) 100%)!important;
  border:1px solid rgba(130,196,232,.28)!important;
}
html[data-theme='dark'] .hero-summary{color:var(--v47-dark-sub)!important;font-size:16px!important;line-height:1.9!important}
html[data-theme='dark'] .hero-kicker,html[data-theme='dark'] .section-tag{color:#9CC7EA!important}
html[data-theme='dark'] .public-card,
html[data-theme='dark'] .public-card-wide,
html[data-theme='dark'] .vault,
html[data-theme='dark'] .access-panel,
html[data-theme='dark'] .secure-mail-zone,
html[data-theme='dark'] .verified-sender-card,
html[data-theme='dark'] .secure-mail-composer{
  color:#EBF4FF!important;
  background:linear-gradient(145deg,rgba(10,22,36,.82),rgba(8,20,33,.74))!important;
  border-color:var(--v47-dark-line)!important;
  box-shadow:0 26px 64px rgba(2,10,18,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-theme='dark'] .public-card p,
html[data-theme='dark'] .public-card-wide p,
html[data-theme='dark'] .vault-head p,
html[data-theme='dark'] .flow-copy p,
html[data-theme='dark'] .secure-mail-head p,
html[data-theme='dark'] .certificate-intro-copy,
html[data-theme='dark'] .certificate-protection-note{color:#AFC2D8!important}
html[data-theme='dark'] .public-card h3,
html[data-theme='dark'] .public-card-wide h3,
html[data-theme='dark'] .vault-head h2,
html[data-theme='dark'] .access-head h2,
html[data-theme='dark'] .secure-mail-head h2,
html[data-theme='dark'] .certificate-showcase-head h2{color:#F5FAFF!important}
html[data-theme='dark'] .theme-toggle,
html[data-theme='dark'] .language-switch{
  color:#EEF5FF!important;
  background:rgba(8,20,34,.76)!important;
  border:1px solid rgba(205,228,245,.15)!important;
  box-shadow:0 16px 38px rgba(4,11,19,.24)!important;
}

/* -------------------- LIGHT MODE -------------------- */
html[data-theme='light'] body{color:var(--v47-light-ink)!important}
html[data-theme='light'] .hero-stage{
  background:
    linear-gradient(135deg,rgba(255,251,246,.90) 0%,rgba(248,242,234,.84) 18%,rgba(243,247,250,.82) 45%,rgba(230,242,250,.86) 76%,rgba(219,238,250,.92) 100%)!important;
  border:1px solid rgba(111,143,171,.16)!important;
  box-shadow:0 28px 72px rgba(30,57,83,.12), inset 0 1px 0 rgba(255,255,255,.88)!important;
}
html[data-theme='light'] .hero-stage::before{
  background:radial-gradient(circle at 24% 22%,rgba(242,225,200,.38),transparent 34%),radial-gradient(circle at 72% 22%,rgba(183,227,250,.30),transparent 34%),radial-gradient(circle at 85% 86%,rgba(163,214,245,.20),transparent 24%)!important;
  opacity:1!important;
}
html[data-theme='light'] .hero-stage::after{
  background:linear-gradient(92deg,rgba(255,255,255,.08),rgba(255,255,255,.42),rgba(147,216,255,.12))!important;
  opacity:1!important;
}
html[data-theme='light'] .hero-name{
  color:#1B3048!important;
  background:linear-gradient(90deg,#10233A 0%,#244A80 18%,#356EE6 42%,#2EA8D8 62%,#2EC8AE 82%,#F0A44E 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.85)) drop-shadow(0 10px 26px rgba(63,115,165,.16));
}
html[data-theme='light'] .hero-role{
  color:#17304A!important;
  background:linear-gradient(90deg,rgba(244,226,198,.95) 0%,rgba(239,235,223,.96) 24%,rgba(212,236,248,.95) 62%,rgba(181,229,251,.98) 100%)!important;
  border:1px solid rgba(102,145,176,.18)!important;
}
html[data-theme='light'] .hero-summary{color:#5B738C!important;font-size:16px!important;line-height:1.88!important}
html[data-theme='light'] .hero-kicker,html[data-theme='light'] .section-tag{color:#557EA7!important}
html[data-theme='light'] .public-card,
html[data-theme='light'] .public-card-wide,
html[data-theme='light'] .vault,
html[data-theme='light'] .access-panel,
html[data-theme='light'] .secure-mail-zone,
html[data-theme='light'] .verified-sender-card,
html[data-theme='light'] .secure-mail-composer{
  color:var(--v47-light-ink)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(248,244,238,.76) 38%,rgba(234,245,251,.78))!important;
  border-color:var(--v47-light-line)!important;
  box-shadow:0 24px 58px rgba(39,71,101,.10), inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-theme='light'] .public-card p,
html[data-theme='light'] .public-card-wide p,
html[data-theme='light'] .vault-head p,
html[data-theme='light'] .flow-copy p,
html[data-theme='light'] .secure-mail-head p,
html[data-theme='light'] .certificate-intro-copy,
html[data-theme='light'] .certificate-protection-note{color:#5F758D!important}
html[data-theme='light'] .public-card h3,
html[data-theme='light'] .public-card-wide h3,
html[data-theme='light'] .vault-head h2,
html[data-theme='light'] .access-head h2,
html[data-theme='light'] .secure-mail-head h2,
html[data-theme='light'] .certificate-showcase-head h2{color:#172C45!important}
html[data-theme='light'] .theme-toggle,
html[data-theme='light'] .language-switch{
  color:#21364E!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(85,116,147,.12)!important;
  box-shadow:0 16px 38px rgba(44,76,104,.10)!important;
}
html[data-theme='light'] .public-card span,
html[data-theme='light'] .secret-type,
html[data-theme='light'] .certificate-caption small,
html[data-theme='light'] .vault-state small,
html[data-theme='light'] .flow-copy h3{color:#5682A7!important}
html[data-theme='light'] .public-card-wide span,
html[data-theme='light'] .masked-value,
html[data-theme='light'] .hero-facts strong,
html[data-theme='light'] .certificate-caption strong{color:#162A42!important}

/* Name and composition safety */
.hero-stage{overflow:hidden!important}
.hero-copy{min-width:0!important}
.hero-name{padding-right:.15em!important}
.hero-art{align-self:center!important}
.hero-photo-card{overflow:visible!important}

/* Better readability for compact screens too */
@media (max-width:1280px){
  .hero-name{font-size:clamp(42px,4.3vw,58px)!important}
  .hero-role{font-size:clamp(23px,2.3vw,34px)!important;padding:16px 24px!important}
}
@media (max-width:960px){
  .hero-name{font-size:clamp(42px,8vw,62px)!important;white-space:normal!important}
  .hero-role{min-height:unset!important;border-radius:24px!important}
  html[data-theme='dark'] .hero-stage,
  html[data-theme='light'] .hero-stage{padding:38px 22px 30px!important}
}
@media (max-width:640px){
  .hero-name{font-size:clamp(38px,11vw,54px)!important;line-height:.96!important}
  .hero-role{font-size:clamp(20px,6.6vw,28px)!important;padding:14px 18px!important}
  .hero-summary{font-size:14px!important;line-height:1.75!important}
}


/* =========================================================
   V48 HERO NAME DESCENDER CLIP FIX
   ========================================================= */
.hero-copy{
  overflow:visible!important;
}
.hero-name-wrap,
.hero-name-row,
.hero-heading,
.hero-heading-block{
  overflow:visible!important;
}
.hero-name{
  line-height:1.12!important;
  padding-top:.02em!important;
  padding-bottom:.16em!important;
  margin-bottom:.06em!important;
  overflow:visible!important;
  display:block!important;
}
.hero-kicker + .hero-name,
.hero-heading .hero-name,
.hero-name + .hero-role{
  position:relative;
}
@media (max-width:1280px){
  .hero-name{
    line-height:1.10!important;
    padding-bottom:.14em!important;
  }
}
@media (max-width:960px){
  .hero-name{
    line-height:1.08!important;
    padding-bottom:.12em!important;
  }
}
html[data-theme='dark'] .hero-name,
html[data-theme='light'] .hero-name{
  filter:drop-shadow(0 0 0 transparent)!important;
}
html[data-theme='dark'] .hero-name{
  text-shadow:0 10px 28px rgba(16,86,155,.18)!important;
}
html[data-theme='light'] .hero-name{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.82)) drop-shadow(0 8px 22px rgba(71,119,168,.14))!important;
}


/* =========================================================
   V49 WELCOME RIBBON — live color motion + premium emphasis
   Final override: intentionally supersedes earlier fixed ribbon colors
   ========================================================= */
.welcome-ribbon{
  position:relative;
  isolation:isolate;
}
.welcome-ribbon-track,
html[data-theme='dark'] .welcome-ribbon-track,
html[data-theme='light'] .welcome-ribbon-track{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:66px!important;
  border-radius:999px!important;
  background:
    linear-gradient(105deg,
      rgba(242,225,200,.92) 0%,
      rgba(248,236,221,.88) 19%,
      rgba(234,243,247,.86) 43%,
      rgba(191,233,255,.90) 66%,
      rgba(147,216,255,.92) 82%,
      rgba(242,225,200,.90) 100%)!important;
  background-size:240% 100%!important;
  border:1px solid rgba(111,158,196,.30)!important;
  box-shadow:
    0 18px 50px rgba(33,67,98,.16),
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 1px 0 rgba(255,255,255,.78) inset!important;
  animation:v49RibbonSurface 10s linear infinite, v49RibbonFloat 4.8s ease-in-out infinite!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
}
.welcome-ribbon-track::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-2px!important;
  z-index:-1!important;
  border-radius:inherit!important;
  padding:1px!important;
  background:conic-gradient(from 0deg,
    #F2D6B3,
    #7CD7FF,
    #4D8FFF,
    #46D5C0,
    #FFD082,
    #EF7D9E,
    #F2D6B3)!important;
  animation:v49BorderSpin 8s linear infinite!important;
  opacity:.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;
  pointer-events:none!important;
}
.welcome-ribbon-track::after{
  content:"";
  position:absolute;
  top:-32%;
  bottom:-32%;
  left:-30%;
  width:24%;
  z-index:0;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),rgba(255,255,255,.72),rgba(255,255,255,.16),transparent);
  filter:blur(1px);
  animation:v49Shine 6.4s cubic-bezier(.3,.7,.2,1) infinite;
  pointer-events:none;
}
.welcome-ribbon-text,
.welcome-ribbon-text.single,
html[data-theme='dark'] .welcome-ribbon-text,
html[data-theme='dark'] .welcome-ribbon-text.single,
html[data-theme='light'] .welcome-ribbon-text,
html[data-theme='light'] .welcome-ribbon-text.single{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  max-width:min(1420px,calc(100% - 48px))!important;
  margin:0 auto!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:clamp(14px,1.18vw,20px)!important;
  line-height:1.25!important;
  font-weight:760!important;
  letter-spacing:-.014em!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(90deg,
      #0F315B 0%,
      #2467D8 13%,
      #1CA8D7 27%,
      #20BEA5 41%,
      #D6A64F 55%,
      #E36E87 69%,
      #825FD8 83%,
      #0F315B 100%)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
  filter:drop-shadow(0 4px 12px rgba(41,95,145,.12))!important;
  animation:v49TextColor 8.5s linear infinite, v49TextPulse 4.6s ease-in-out infinite!important;
}
html[data-theme='dark'] .welcome-ribbon-track{
  background:
    linear-gradient(105deg,
      rgba(51,43,36,.92) 0%,
      rgba(19,33,48,.94) 22%,
      rgba(18,45,61,.94) 48%,
      rgba(22,65,81,.94) 72%,
      rgba(40,42,50,.94) 100%)!important;
  background-size:220% 100%!important;
  border-color:rgba(171,211,240,.26)!important;
  box-shadow:
    0 20px 54px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.05) inset!important;
}
html[data-theme='dark'] .welcome-ribbon-text,
html[data-theme='dark'] .welcome-ribbon-text.single{
  background:
    linear-gradient(90deg,
      #F6E8D7 0%,
      #9BDFFF 14%,
      #6CA8FF 28%,
      #64DFC7 43%,
      #FFE09A 58%,
      #FF9CB4 72%,
      #BDA6FF 86%,
      #F6E8D7 100%)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  filter:drop-shadow(0 4px 18px rgba(73,155,224,.16))!important;
}
html[data-theme='light'] .welcome-ribbon-track{
  background:
    linear-gradient(105deg,
      rgba(249,239,224,.96) 0%,
      rgba(249,244,236,.94) 25%,
      rgba(234,244,249,.94) 52%,
      rgba(199,235,252,.96) 78%,
      rgba(240,228,211,.94) 100%)!important;
  background-size:220% 100%!important;
}
html[data-theme='light'] .welcome-ribbon-text,
html[data-theme='light'] .welcome-ribbon-text.single{
  background:
    linear-gradient(90deg,
      #132F52 0%,
      #2A67D8 14%,
      #168EC5 28%,
      #1FAF92 43%,
      #B78632 58%,
      #D9607C 72%,
      #7359C9 86%,
      #132F52 100%)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}
@keyframes v49TextColor{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
@keyframes v49TextPulse{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 4px 12px rgba(41,95,145,.10))}
  50%{transform:translateY(-1px) scale(1.006);filter:drop-shadow(0 6px 18px rgba(41,125,177,.20))}
}
@keyframes v49RibbonSurface{
  0%{background-position:0% 50%}
  100%{background-position:240% 50%}
}
@keyframes v49RibbonFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}
@keyframes v49BorderSpin{
  to{transform:rotate(360deg)}
}
@keyframes v49Shine{
  0%,12%{left:-32%;opacity:0}
  18%{opacity:1}
  52%{left:112%;opacity:.9}
  60%,100%{left:112%;opacity:0}
}
@media(max-width:900px){
  .welcome-ribbon-track,
  html[data-theme='dark'] .welcome-ribbon-track,
  html[data-theme='light'] .welcome-ribbon-track{
    min-height:58px!important;
    border-radius:24px!important;
    padding:0 18px!important;
  }
  .welcome-ribbon-text,
  .welcome-ribbon-text.single,
  html[data-theme='dark'] .welcome-ribbon-text.single,
  html[data-theme='light'] .welcome-ribbon-text.single{
    max-width:100%!important;
    white-space:normal!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .welcome-ribbon-track,
  .welcome-ribbon-text,
  .welcome-ribbon-text.single{
    animation:none!important;
  }
  .welcome-ribbon-track::before,
  .welcome-ribbon-track::after{animation:none!important}
}


/* =========================================================
   V50 · TOP SLOGAN + HERO NAME LIVE SPECTRUM (PURPLE/ORANGE/GREEN)
   ========================================================= */
.welcome-ribbon-text,
.welcome-ribbon-text.single,
html[data-theme='dark'] .welcome-ribbon-text,
html[data-theme='dark'] .welcome-ribbon-text.single,
html[data-theme='light'] .welcome-ribbon-text,
html[data-theme='light'] .welcome-ribbon-text.single{
  background:
    linear-gradient(90deg,
      #7A5CFF 0%,   /* purple */
      #2E8BFF 14%,
      #20D6A1 30%, /* green */
      #9FE870 40%,
      #FFB14A 56%, /* orange */
      #FF6B7A 70%,
      #8B63FF 84%, /* purple */
      #20D6A1 100% /* green */
    ) !important;
  background-size:320% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:v50SpectrumFlow 7.8s linear infinite, v50TextLift 3.8s ease-in-out infinite !important;
}

.hero-name,
html[data-theme='dark'] .hero-name,
html[data-theme='light'] .hero-name{
  background:
    linear-gradient(90deg,
      #F7FBFF 0%,
      #A9CCFF 8%,
      #7A5CFF 18%,   /* purple */
      #2E8BFF 32%,
      #26C9AE 46%,
      #3AE374 56%,   /* green */
      #FFD166 70%,
      #FF9A3C 80%,   /* orange */
      #FF667E 90%,
      #7A5CFF 100%   /* purple */
    ) !important;
  background-size:340% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
  animation:v50SpectrumFlow 8.6s linear infinite, v50NameGlow 4.4s ease-in-out infinite !important;
}

html[data-theme='dark'] .hero-name{
  filter:drop-shadow(0 8px 24px rgba(65,120,210,.18)) !important;
}
html[data-theme='light'] .hero-name{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.82)) drop-shadow(0 8px 22px rgba(76,126,178,.18)) !important;
}

html[data-theme='dark'] .welcome-ribbon-track{
  background:
    linear-gradient(100deg,
      rgba(47,35,63,.92) 0%,
      rgba(12,27,45,.94) 22%,
      rgba(12,47,58,.94) 48%,
      rgba(28,59,37,.92) 70%,
      rgba(67,46,26,.92) 100%) !important;
  background-size:240% 100% !important;
  animation:v49RibbonSurface 14s linear infinite, v49RibbonFloat 5.2s ease-in-out infinite !important;
}
html[data-theme='light'] .welcome-ribbon-track{
  background:
    linear-gradient(100deg,
      rgba(245,237,249,.96) 0%,
      rgba(247,242,235,.96) 22%,
      rgba(231,246,241,.96) 50%,
      rgba(255,241,221,.96) 76%,
      rgba(228,241,252,.96) 100%) !important;
  background-size:240% 100% !important;
  animation:v49RibbonSurface 14s linear infinite, v49RibbonFloat 5.2s ease-in-out infinite !important;
}

@keyframes v50SpectrumFlow{
  0%{background-position:0% 50%}
  100%{background-position:340% 50%}
}
@keyframes v50NameGlow{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 8px 24px rgba(65,120,210,.12))}
  50%{transform:translateY(-1px) scale(1.01);filter:drop-shadow(0 12px 28px rgba(122,92,255,.20)) drop-shadow(0 0 26px rgba(58,227,116,.10))}
}
@keyframes v50TextLift{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1px) scale(1.008)}
}
@media (prefers-reduced-motion:reduce){
  .hero-name,
  .welcome-ribbon-text,
  .welcome-ribbon-text.single{animation:none !important}
}


/* =========================================================
   V51 · HERO PROFESSIONAL EXPERIENCE & BACKGROUND SUMMARY
   ========================================================= */
.hero-stage.has-professional-summary{position:relative!important}
.hero-professional-summary{
  position:relative;
  z-index:4;
  grid-column:1/-1;
  align-self:start;
  width:100%;
  margin:0 0 34px;
  padding:0 0 24px;
  border-bottom:1px solid rgba(147,216,255,.18);
}
.hero-professional-summary::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:min(360px,36%);
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#7A5CFF,#2E8BFF,#20D6A1,#FFB14A);
  box-shadow:0 0 24px rgba(74,171,255,.24);
}
.hero-professional-summary-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8FC9EE;
}
.hero-professional-summary-label span{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,#7A5CFF,#20D6A1 58%,#FFB14A);
  box-shadow:0 0 0 6px rgba(74,171,255,.08),0 0 22px rgba(122,92,255,.30);
}
.hero-professional-summary-text{
  max-width:1480px;
  margin:15px 0 0!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Pretendard Variable","Pretendard","Noto Sans KR","Segoe UI",sans-serif;
  font-size:clamp(17px,1.08vw,21px)!important;
  line-height:1.52!important;
  font-weight:730!important;
  letter-spacing:-.025em!important;
  text-wrap:pretty;
}
html[data-theme='dark'] .hero-professional-summary-text{
  color:#EAF4FF!important;
  text-shadow:0 6px 24px rgba(25,87,147,.12);
}
html[data-theme='light'] .hero-professional-summary{
  border-bottom-color:rgba(65,111,151,.16);
}
html[data-theme='light'] .hero-professional-summary-label{color:#3975A5!important}
html[data-theme='light'] .hero-professional-summary-text{
  color:#17304A!important;
  text-shadow:0 1px 0 rgba(255,255,255,.78);
}

/* On wide desktop the summary occupies the intentionally empty top zone
   without pushing the existing hero composition down. */
@media(min-width:1501px){
  .hero-stage.has-professional-summary .hero-professional-summary{
    position:absolute;
    top:48px;
    left:82px;
    right:82px;
    width:auto;
    margin:0;
    padding-bottom:20px;
  }
}
@media(min-width:1181px) and (max-width:1500px){
  .hero-stage.has-professional-summary{
    align-items:start!important;
    padding-top:48px!important;
  }
  .hero-stage.has-professional-summary .hero-copy,
  .hero-stage.has-professional-summary .hero-art{align-self:center!important}
}
@media(max-width:1180px){
  .hero-stage.has-professional-summary{align-items:start!important}
  .hero-professional-summary{margin-bottom:12px;padding-bottom:22px}
  .hero-professional-summary-text{font-size:clamp(16px,1.75vw,19px)!important;line-height:1.56!important}
}
@media(max-width:760px){
  .hero-professional-summary{margin-bottom:6px;padding-bottom:18px}
  .hero-professional-summary-label{font-size:8px;letter-spacing:.14em}
  .hero-professional-summary-text{font-size:15px!important;line-height:1.58!important;font-weight:700!important}
}


/* =========================================================
   V52 · TEXT CERTIFICATIONS / QUALIFICATIONS SECTION
   ========================================================= */
.public-certifications-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:420px!important;
  background:
    radial-gradient(circle at 86% 10%,rgba(118,92,255,.11),transparent 28%),
    radial-gradient(circle at 8% 88%,rgba(49,211,166,.10),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.018))!important;
}
.public-certifications-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.055) 38%,transparent 58%);
  transform:translateX(-55%);
  animation:v52CredentialSheen 9s ease-in-out infinite;
}
.certification-card-content{position:relative;z-index:2;width:100%}
.certification-card-content>span{font-size:9px!important;font-weight:900!important;letter-spacing:.19em!important}
.certification-card-content>h3{
  margin:12px 0 26px!important;
  font-size:clamp(32px,3vw,48px)!important;
  line-height:1.02!important;
  font-weight:820!important;
  letter-spacing:-.055em!important;
}
.credential-list{display:grid;gap:12px;width:100%}
.credential-line{
  position:relative;
  display:grid;
  grid-template-columns:minmax(108px,142px) minmax(0,1fr);
  align-items:center;
  gap:20px;
  min-height:62px;
  padding:13px 18px;
  border-radius:18px;
  border:1px solid rgba(130,177,215,.13);
  background:linear-gradient(115deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}
.credential-line::before{
  content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;
  background:linear-gradient(180deg,#765CFF,#2ED19D,#FFA44B);
  opacity:.9;
}
.credential-line:nth-child(3n+2)::before{background:linear-gradient(180deg,#2F8CFF,#4BE38B,#FFD166)}
.credential-line:nth-child(3n)::before{background:linear-gradient(180deg,#FF7B5C,#A46BFF,#38D6C2)}
.credential-line:hover{
  transform:translateX(5px);
  border-color:rgba(116,196,239,.26);
  background:linear-gradient(115deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  box-shadow:0 15px 34px rgba(8,23,38,.10),inset 0 1px 0 rgba(255,255,255,.07);
}
.credential-date{
  display:inline-flex;align-items:center;
  font-size:clamp(15px,1.25vw,20px)!important;
  line-height:1.15!important;
  font-weight:860!important;
  letter-spacing:-.035em!important;
  white-space:nowrap;
}
.credential-copy{
  font-size:clamp(17px,1.3vw,22px)!important;
  line-height:1.42!important;
  font-weight:690!important;
  letter-spacing:-.032em!important;
}
.credential-line.no-date{grid-template-columns:1fr}
.credential-line.no-date .credential-copy{font-weight:760!important}
html[data-theme='dark'] .public-certifications-card{
  background:
    radial-gradient(circle at 84% 10%,rgba(120,92,255,.12),transparent 30%),
    radial-gradient(circle at 10% 90%,rgba(35,206,160,.10),transparent 28%),
    linear-gradient(145deg,rgba(10,24,39,.91),rgba(7,18,31,.84))!important;
  border-color:rgba(168,207,239,.12)!important;
}
html[data-theme='dark'] .certification-card-content>h3{color:#F6FAFF!important}
html[data-theme='dark'] .certification-card-content>span{color:#8DC7EC!important}
html[data-theme='dark'] .credential-date{
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,#9FC7FF,#8D73FF,#4EE2B6,#FFBC69)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
html[data-theme='dark'] .credential-copy{color:#DDEAF5!important}
html[data-theme='light'] .public-certifications-card{
  background:
    radial-gradient(circle at 86% 8%,rgba(125,101,255,.08),transparent 27%),
    radial-gradient(circle at 8% 90%,rgba(30,191,144,.08),transparent 30%),
    linear-gradient(145deg,rgba(255,252,247,.97),rgba(239,248,252,.94))!important;
  border-color:rgba(75,113,150,.12)!important;
  box-shadow:0 30px 76px rgba(36,72,104,.11),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-theme='light'] .certification-card-content>h3{color:#162B43!important}
html[data-theme='light'] .certification-card-content>span{color:#4C7EAA!important}
html[data-theme='light'] .credential-line{
  background:linear-gradient(115deg,rgba(255,255,255,.86),rgba(227,242,250,.58));
  border-color:rgba(76,112,146,.12);
  box-shadow:0 10px 26px rgba(42,74,103,.055),inset 0 1px 0 #fff;
}
html[data-theme='light'] .credential-date{
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,#365FAD,#7257D7,#168F73,#D77D28)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
html[data-theme='light'] .credential-copy{color:#263E58!important}
@keyframes v52CredentialSheen{
  0%,15%{transform:translateX(-65%);opacity:0}
  28%{opacity:1}
  58%{transform:translateX(85%);opacity:.8}
  70%,100%{transform:translateX(85%);opacity:0}
}
@media(max-width:760px){
  .public-certifications-card{min-height:unset!important}
  .certification-card-content>h3{font-size:32px!important;margin-bottom:20px!important}
  .credential-line{grid-template-columns:1fr;gap:5px;padding:14px 16px 14px 20px}
  .credential-date{font-size:14px!important}
  .credential-copy{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){.public-certifications-card::before{animation:none!important}}


/* =========================================================
   V53 · LIGHT MODE PUBLIC PROFILE NAME — DEEP BLUE
   ========================================================= */
html[data-theme='light'] .hero-name{
  color:#0B2D55!important;
  -webkit-text-fill-color:#0B2D55!important;
  background:none!important;
  background-image:none!important;
  animation:none!important;
  font-weight:820!important;
  text-shadow:0 1px 0 rgba(255,255,255,.86), 0 10px 26px rgba(31,73,117,.12)!important;
  filter:none!important;
}


/* =========================================================
   V54 · Protected Bank Account Image
   ========================================================= */
.bank-secure-image{
  position:relative;
  margin-top:18px;
  padding:10px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(116,205,166,.20);
  box-shadow:0 18px 38px rgba(4,14,22,.16),inset 0 1px 0 rgba(255,255,255,.06);
}
.bank-secure-image::after{
  content:'PRIVATE · VERIFIED';
  position:absolute;
  right:18px;bottom:17px;
  z-index:2;
  font-size:8px;font-weight:850;letter-spacing:.16em;
  color:rgba(255,255,255,.86);
  padding:7px 10px;border-radius:999px;
  background:rgba(4,17,27,.68);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.bank-secure-image-head{display:flex;align-items:center;gap:8px;padding:3px 5px 9px;color:#8CE0B7}
.bank-secure-image-head span{font-size:12px}
.bank-secure-image-head small{font-size:8px;font-weight:850;letter-spacing:.14em}
.bank-secure-image img{
  display:block;width:100%;height:auto;max-height:360px;object-fit:contain;
  border-radius:14px;user-select:none;-webkit-user-drag:none;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
html[data-theme='light'] .bank-secure-image{
  background:linear-gradient(145deg,rgba(247,241,230,.92),rgba(221,242,250,.94));
  border-color:rgba(57,137,108,.18);
  box-shadow:0 16px 34px rgba(38,71,90,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme='light'] .bank-secure-image-head{color:#16765B}
html[data-theme='light'] .bank-secure-image::after{background:rgba(20,57,73,.76)}


/* =========================================================
   V55 · FINAL HERO PHOTO + PUBLIC PROFILE LAYOUT REBUILD
   - clean photo composition
   - stacked full-width experience / certifications
   - dark/light independently tuned
   ========================================================= */

/* ---------- HERO / PHOTO COMPOSITION ---------- */
.hero-stage.has-professional-summary{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.22fr) minmax(390px,.78fr)!important;
  grid-template-areas:
    "copy art"
    "summary summary"!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:56px!important;
  row-gap:42px!important;
  min-height:0!important;
  padding:54px 64px 68px!important;
  overflow:hidden!important;
}
.hero-stage.has-professional-summary .hero-professional-summary{
  grid-area:summary!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  margin:0!important;
  padding:0 0 26px!important;
  align-self:start!important;
}
.hero-stage.has-professional-summary .hero-copy{
  grid-area:copy!important;
  align-self:center!important;
  min-width:0!important;
  padding-right:0!important;
}
.hero-stage.has-professional-summary .hero-art{
  grid-area:art!important;
  align-self:center!important;
}
.hero-professional-summary-text{
  max-width:1450px!important;
  margin-top:16px!important;
  font-size:clamp(16px,1.02vw,20px)!important;
  line-height:1.68!important;
  font-weight:690!important;
  letter-spacing:-.022em!important;
}
.hero-art{
  position:relative!important;
  width:100%!important;
  min-height:470px!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate;
  transform:none!important;
}
.hero-art::before{
  content:""!important;
  position:absolute!important;
  width:390px!important;
  height:390px!important;
  border-radius:50%!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  filter:blur(1px)!important;
  pointer-events:none!important;
  z-index:-2!important;
}
.hero-art::after{
  content:""!important;
  position:absolute!important;
  width:315px!important;
  height:315px!important;
  border-radius:50%!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  z-index:-1!important;
}
.orbit-a{
  width:420px!important;
  height:420px!important;
  transform:translate(-50%,-50%) rotate(12deg)!important;
  left:50%!important;
  top:50%!important;
}
.orbit-b{
  width:350px!important;
  height:350px!important;
  transform:translate(-50%,-50%) rotate(-18deg)!important;
  left:50%!important;
  top:50%!important;
}
.portrait-card{
  width:340px!important;
  height:340px!important;
  border-radius:42px!important;
  overflow:visible!important;
  transform:none!important;
  position:relative!important;
  z-index:3!important;
}
.portrait-card>img,.portrait-empty,.portrait-glass{
  width:100%!important;
  height:100%!important;
  border-radius:42px!important;
}
.portrait-card>img{
  display:block!important;
  object-fit:cover!important;
  object-position:50% 42%!important;
}
.portrait-glass{
  inset:0!important;
  overflow:hidden!important;
}
.portrait-badge{
  left:22px!important;
  right:auto!important;
  bottom:-26px!important;
  min-width:214px!important;
  padding:12px 15px!important;
  border-radius:17px!important;
  box-shadow:0 18px 38px rgba(5,20,34,.18)!important;
}
.spectra-card{
  z-index:5!important;
  min-width:154px!important;
  padding:13px 15px!important;
  border-radius:17px!important;
}
.spectra-one{right:-6px!important;top:58px!important}
.spectra-two{left:-8px!important;bottom:70px!important}

/* ---------- PUBLIC PROFILE GRID: STACK THE TWO TEXT SECTIONS ---------- */
.public-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
.public-grid>.public-card-wide{
  grid-column:1/-1!important;
  grid-row:auto!important;
  min-height:0!important;
  height:auto!important;
  padding:38px 42px!important;
  display:block!important;
  justify-content:initial!important;
  overflow:hidden!important;
}
.public-grid>.public-card-wide .card-content{
  width:100%!important;
  max-width:none!important;
  margin-top:24px!important;
}
.public-grid>.public-card-wide .card-index{
  display:block!important;
  margin:0 0 2px!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
}
.public-grid>.public-card-wide .card-content>span{
  display:block!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  margin-bottom:12px!important;
}
.public-grid>.public-card-wide .card-content>h3{
  margin:0 0 22px!important;
  font-size:clamp(34px,2.8vw,48px)!important;
  line-height:1.03!important;
  font-weight:830!important;
  letter-spacing:-.055em!important;
}
.public-grid>.public-card-wide .card-content>p{
  margin:0!important;
  max-width:1420px!important;
  font-size:clamp(16px,1.16vw,20px)!important;
  line-height:1.86!important;
  font-weight:560!important;
  letter-spacing:-.018em!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:keep-all!important;
}
.public-grid>.public-card:not(.public-card-wide){
  min-height:286px!important;
  padding:30px 28px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
}
.public-grid>.public-card:not(.public-card-wide)>span{
  margin-top:auto!important;
  font-size:8px!important;
}
.public-grid>.public-card:not(.public-card-wide)>h3{
  margin:18px 0 12px!important;
  font-size:clamp(22px,1.65vw,30px)!important;
  line-height:1.12!important;
  font-weight:800!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
}
.public-grid>.public-card:not(.public-card-wide)>p{
  margin:0!important;
  font-size:12px!important;
  line-height:1.62!important;
}

/* Certifications should read like a premium dossier, not a narrow side card. */
.public-certifications-card{
  min-height:0!important;
}
.certification-card-content{width:100%!important}
.credential-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
}
.credential-line{
  grid-template-columns:minmax(110px,138px) minmax(0,1fr)!important;
  gap:18px!important;
  min-height:72px!important;
  padding:15px 19px 15px 22px!important;
  border-radius:19px!important;
}
.credential-date{
  font-size:clamp(15px,1.02vw,18px)!important;
  white-space:nowrap!important;
}
.credential-copy{
  min-width:0!important;
  font-size:clamp(15px,1.02vw,18px)!important;
  line-height:1.48!important;
  font-weight:680!important;
  letter-spacing:-.022em!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}

/* ---------- DARK: crisp navy / cyan / jewel accents ---------- */
html[data-theme='dark'] .hero-stage.has-professional-summary{
  background:
    radial-gradient(650px 430px at 86% 65%,rgba(42,139,188,.13),transparent 64%),
    radial-gradient(600px 350px at 8% 12%,rgba(111,85,255,.08),transparent 62%),
    linear-gradient(135deg,#0B1B2D 0%,#091827 45%,#0A2030 100%)!important;
  border-color:rgba(170,211,239,.13)!important;
  box-shadow:0 38px 100px rgba(1,9,17,.38),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
html[data-theme='dark'] .hero-art::before{
  background:radial-gradient(circle,rgba(55,190,205,.12),rgba(70,93,194,.055) 52%,transparent 72%)!important;
  border:1px solid rgba(116,206,235,.10)!important;
}
html[data-theme='dark'] .hero-art::after{
  background:linear-gradient(145deg,rgba(26,59,82,.22),rgba(63,47,112,.08))!important;
  border:1px solid rgba(159,215,245,.08)!important;
}
html[data-theme='dark'] .portrait-card{
  background:#0B1828!important;
  border:1px solid rgba(139,215,244,.22)!important;
  box-shadow:0 34px 86px rgba(0,0,0,.42),0 0 0 7px rgba(75,179,226,.025)!important;
}
html[data-theme='dark'] .portrait-card>img{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
html[data-theme='dark'] .portrait-badge,
html[data-theme='dark'] .spectra-card{
  background:rgba(7,18,31,.88)!important;
  border-color:rgba(185,222,245,.14)!important;
  color:#F2F7FC!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
}
html[data-theme='dark'] .public-grid>.public-card-wide{
  color:#F3F8FD!important;
  background:
    radial-gradient(580px 240px at 100% 0%,rgba(50,150,197,.10),transparent 66%),
    linear-gradient(135deg,rgba(9,24,39,.94),rgba(7,19,32,.92))!important;
  border-color:rgba(174,214,239,.12)!important;
  box-shadow:0 26px 68px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-theme='dark'] .public-grid>.public-card-wide .card-content>h3{color:#F7FBFF!important}
html[data-theme='dark'] .public-grid>.public-card-wide .card-content>p{color:#B8CADB!important}
html[data-theme='dark'] .public-grid>.public-card:not(.public-card-wide){
  background:linear-gradient(145deg,rgba(10,26,42,.94),rgba(8,21,34,.90))!important;
  border-color:rgba(173,214,240,.11)!important;
}
html[data-theme='dark'] .public-grid>.public-card:not(.public-card-wide)>h3{color:#F2F7FC!important}
html[data-theme='dark'] .public-grid>.public-card:not(.public-card-wide)>p{color:#9FB7CB!important}
html[data-theme='dark'] .credential-line{
  background:linear-gradient(118deg,rgba(17,37,57,.90),rgba(11,28,44,.74))!important;
  border-color:rgba(145,198,229,.12)!important;
}

/* ---------- LIGHT: deep-blue text / warm ivory + sky glass ---------- */
html[data-theme='light'] .hero-stage.has-professional-summary{
  background:
    radial-gradient(720px 430px at 87% 62%,rgba(157,218,248,.25),transparent 64%),
    radial-gradient(620px 300px at 7% 8%,rgba(240,215,178,.22),transparent 62%),
    linear-gradient(135deg,rgba(255,252,247,.97),rgba(247,248,246,.95) 44%,rgba(229,244,252,.96) 100%)!important;
  border-color:rgba(67,108,145,.14)!important;
  box-shadow:0 34px 88px rgba(37,70,100,.12),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-theme='light'] .hero-art::before{
  background:radial-gradient(circle,rgba(164,222,249,.32),rgba(239,221,193,.13) 54%,transparent 72%)!important;
  border:1px solid rgba(75,134,173,.10)!important;
}
html[data-theme='light'] .hero-art::after{
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(198,232,248,.25))!important;
  border:1px solid rgba(77,119,153,.10)!important;
}
html[data-theme='light'] .portrait-card{
  background:#F8FBFD!important;
  border:1px solid rgba(64,124,161,.20)!important;
  box-shadow:0 32px 78px rgba(42,75,104,.18),0 0 0 7px rgba(255,255,255,.48)!important;
}
html[data-theme='light'] .portrait-badge,
html[data-theme='light'] .spectra-card{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(75,109,139,.13)!important;
  color:#17304A!important;
  box-shadow:0 16px 38px rgba(40,72,102,.11)!important;
}
html[data-theme='light'] .public-grid>.public-card-wide{
  color:#152B44!important;
  background:
    radial-gradient(580px 230px at 100% 0%,rgba(164,222,249,.22),transparent 66%),
    linear-gradient(135deg,rgba(255,252,247,.98),rgba(249,245,238,.96) 36%,rgba(235,247,253,.96) 100%)!important;
  border-color:rgba(74,111,145,.13)!important;
  box-shadow:0 25px 65px rgba(38,72,101,.10),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
html[data-theme='light'] .public-grid>.public-card-wide .card-content>h3{color:#102B49!important}
html[data-theme='light'] .public-grid>.public-card-wide .card-content>p{color:#526E89!important}
html[data-theme='light'] .public-grid>.public-card:not(.public-card-wide){
  background:linear-gradient(145deg,rgba(255,252,247,.97),rgba(236,247,252,.95))!important;
  border-color:rgba(73,110,143,.12)!important;
  box-shadow:0 22px 54px rgba(40,72,102,.09),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-theme='light'] .public-grid>.public-card:not(.public-card-wide)>h3{color:#102B49!important}
html[data-theme='light'] .public-grid>.public-card:not(.public-card-wide)>p{color:#627C95!important}
html[data-theme='light'] .credential-line{
  background:linear-gradient(118deg,rgba(255,255,255,.92),rgba(226,242,249,.72))!important;
  border-color:rgba(72,109,142,.12)!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1320px){
  .hero-stage.has-professional-summary{
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr)!important;
    column-gap:36px!important;
    padding:48px 44px 58px!important;
  }
  .portrait-card{width:300px!important;height:300px!important;border-radius:36px!important}
  .portrait-card>img,.portrait-empty,.portrait-glass{border-radius:36px!important}
  .orbit-a{width:372px!important;height:372px!important}
  .orbit-b{width:320px!important;height:320px!important}
  .hero-art{min-height:410px!important}
  .public-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .public-grid>.public-card-wide{grid-column:1/-1!important}
  .credential-list{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  .hero-stage.has-professional-summary{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "art" "summary"!important;
    row-gap:28px!important;
    padding:34px 24px 46px!important;
  }
  .hero-art{min-height:390px!important}
  .portrait-card{width:278px!important;height:278px!important;border-radius:32px!important}
  .portrait-card>img,.portrait-empty,.portrait-glass{border-radius:32px!important}
  .orbit-a{width:336px!important;height:336px!important}
  .orbit-b{width:300px!important;height:300px!important}
  .spectra-one{right:3%!important;top:60px!important}
  .spectra-two{left:3%!important;bottom:62px!important}
  .public-grid{grid-template-columns:1fr!important;gap:14px!important}
  .public-grid>.public-card-wide{grid-column:auto!important;padding:28px 24px!important}
  .public-grid>.public-card:not(.public-card-wide){min-height:220px!important}
}
@media(max-width:600px){
  .hero-stage.has-professional-summary{padding:28px 18px 38px!important;border-radius:28px!important}
  .hero-professional-summary-text{font-size:14px!important;line-height:1.68!important}
  .hero-art{min-height:330px!important}
  .portrait-card{width:232px!important;height:232px!important;border-radius:28px!important}
  .portrait-card>img,.portrait-empty,.portrait-glass{border-radius:28px!important}
  .orbit-a{width:280px!important;height:280px!important}
  .orbit-b{width:250px!important;height:250px!important}
  .portrait-badge{left:12px!important;bottom:-24px!important;min-width:190px!important}
  .spectra-card{min-width:132px!important;padding:10px 12px!important}
  .spectra-one{right:0!important;top:38px!important}
  .spectra-two{left:0!important;bottom:52px!important}
  .public-grid>.public-card-wide{padding:24px 20px!important;border-radius:24px!important}
  .public-grid>.public-card-wide .card-content>h3{font-size:30px!important}
  .public-grid>.public-card-wide .card-content>p{font-size:14px!important;line-height:1.75!important}
  .credential-line{grid-template-columns:1fr!important;gap:6px!important}
  .credential-copy{font-size:15px!important}
}


/* V55 public intro readability */
.public-intro{
  align-items:center!important;
}
.public-intro>p{
  max-width:520px!important;
  justify-self:end!important;
  padding:18px 22px!important;
  border-radius:22px!important;
  font-size:14px!important;
  line-height:1.72!important;
  font-weight:590!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}
html[data-theme='dark'] .public-intro>p{
  color:#B8CADC!important;
  background:rgba(7,20,33,.72)!important;
  border:1px solid rgba(170,213,239,.11)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.18)!important;
}
html[data-theme='light'] .public-intro>p{
  color:#496783!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(73,111,144,.11)!important;
  box-shadow:0 16px 38px rgba(43,76,103,.08)!important;
}
@media(max-width:900px){
  .public-intro>p{justify-self:start!important;max-width:none!important}
}


/* =========================================================
   V56 · PROFILE FIRST / PROFESSIONAL SUMMARY SECOND
   ========================================================= */
.hero-stage.has-professional-summary{
  grid-template-areas:
    "copy art"
    "summary summary"!important;
}
.hero-stage.has-professional-summary .hero-professional-summary{
  grid-area:summary!important;
  margin-top:8px!important;
  padding:30px 0 0!important;
  border-top:1px solid rgba(147,216,255,.18)!important;
  border-bottom:0!important;
}
.hero-stage.has-professional-summary .hero-professional-summary::after{
  top:-1px!important;
  bottom:auto!important;
}
@media(max-width:900px){
  .hero-stage.has-professional-summary{
    grid-template-areas:"copy" "art" "summary"!important;
  }
  .hero-stage.has-professional-summary .hero-professional-summary{
    margin-top:6px!important;
    padding-top:24px!important;
  }
}

/* =========================================================
   V57 · CERTIFICATIONS TEXT — LARGE TYPE READABILITY BOOST
   ========================================================= */
.public-certifications-card{
  min-height:unset!important;
}
.certification-card-content>span{
  font-size:12px!important;
  letter-spacing:.22em!important;
}
.certification-card-content>h3{
  font-size:clamp(44px,4vw,64px)!important;
  line-height:1.02!important;
  margin:14px 0 30px!important;
}
.credential-list{
  grid-template-columns:1fr!important;
  gap:18px!important;
}
.credential-line{
  grid-template-columns:minmax(150px,210px) minmax(0,1fr)!important;
  gap:28px!important;
  min-height:94px!important;
  padding:22px 26px 22px 28px!important;
  border-radius:24px!important;
}
.credential-line::before{
  width:5px!important;
  top:16px!important;
  bottom:16px!important;
}
.credential-date{
  font-size:clamp(28px,2vw,34px)!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}
.credential-copy{
  font-size:clamp(24px,1.55vw,30px)!important;
  line-height:1.4!important;
  font-weight:760!important;
  letter-spacing:-.03em!important;
}
.credential-line.no-date .credential-copy{
  font-size:clamp(24px,1.6vw,31px)!important;
}
html[data-theme='dark'] .credential-line{
  background:linear-gradient(115deg,rgba(16,33,52,.92),rgba(10,24,39,.82))!important;
  border-color:rgba(120,182,228,.16)!important;
  box-shadow:0 16px 38px rgba(2,10,18,.24), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html[data-theme='light'] .credential-line{
  background:linear-gradient(115deg,rgba(255,255,255,.96),rgba(235,246,252,.86))!important;
  border-color:rgba(76,112,146,.16)!important;
  box-shadow:0 14px 34px rgba(42,74,103,.08),inset 0 1px 0 #fff!important;
}
@media(max-width:1024px){
  .certification-card-content>h3{font-size:clamp(38px,5vw,52px)!important}
  .credential-line{
    grid-template-columns:minmax(128px,170px) minmax(0,1fr)!important;
    gap:20px!important;
    padding:18px 20px 18px 22px!important;
    min-height:82px!important;
  }
  .credential-date{font-size:clamp(22px,3vw,28px)!important}
  .credential-copy{font-size:clamp(19px,2.1vw,24px)!important}
}
@media(max-width:760px){
  .certification-card-content>span{font-size:11px!important}
  .certification-card-content>h3{font-size:32px!important;margin-bottom:20px!important}
  .credential-line{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:16px 16px 16px 20px!important;
    min-height:unset!important;
  }
  .credential-date{font-size:20px!important}
  .credential-copy{font-size:17px!important;line-height:1.5!important}
}


/* =========================================================
   V58 · CERTIFICATIONS — ENLARGE THE ACTUAL SMALL TEXT
   Keep dates restrained; make certificate names/issuers readable.
   ========================================================= */
.certification-card-content>span{
  font-size:11px!important;
  letter-spacing:.18em!important;
}
.certification-card-content>h3{
  font-size:clamp(42px,3.4vw,58px)!important;
  margin:12px 0 28px!important;
}
.credential-list{
  grid-template-columns:1fr!important;
  gap:16px!important;
}
.credential-line{
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:30px!important;
  min-height:82px!important;
  padding:18px 26px 18px 28px!important;
  border-radius:22px!important;
}
.credential-date{
  font-size:clamp(20px,1.35vw,24px)!important;
  line-height:1.08!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
}
.credential-copy{
  font-size:clamp(23px,1.55vw,28px)!important;
  line-height:1.34!important;
  font-weight:760!important;
  letter-spacing:-.025em!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.credential-line.no-date{
  grid-template-columns:1fr!important;
  min-height:68px!important;
  padding:16px 24px 16px 28px!important;
}
.credential-line.no-date .credential-copy{
  font-size:clamp(18px,1.25vw,22px)!important;
  line-height:1.35!important;
  font-weight:760!important;
  letter-spacing:.08em!important;
}
@media(max-width:1024px){
  .credential-line{
    grid-template-columns:125px minmax(0,1fr)!important;
    gap:20px!important;
    padding:17px 20px 17px 22px!important;
  }
  .credential-date{font-size:20px!important}
  .credential-copy{font-size:21px!important}
  .credential-line.no-date .credential-copy{font-size:17px!important}
}
@media(max-width:760px){
  .credential-line{
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:16px 17px 16px 20px!important;
  }
  .credential-date{font-size:18px!important}
  .credential-copy{font-size:18px!important;line-height:1.45!important}
  .credential-line.no-date .credential-copy{font-size:16px!important;letter-spacing:.06em!important}
}


/* =========================================================
   V59 · CREDENTIALS FINAL READABILITY / PARSER-SAFE LAYOUT
   - certificate name + issuer is the visual priority
   - date is secondary
   ========================================================= */
.public-certifications-card .credential-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
}
.public-certifications-card .credential-line{
  display:grid!important;
  grid-template-columns:145px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:28px!important;
  min-height:94px!important;
  padding:20px 28px 20px 30px!important;
  overflow:hidden!important;
}
.public-certifications-card .credential-date{
  display:block!important;
  min-width:0!important;
  font-size:clamp(20px,1.35vw,24px)!important;
  line-height:1.12!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
}
.public-certifications-card .credential-copy{
  display:block!important;
  min-width:0!important;
  font-size:clamp(22px,1.55vw,27px)!important;
  line-height:1.34!important;
  font-weight:760!important;
  letter-spacing:-.02em!important;
  word-spacing:normal!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  text-transform:none!important;
}
html[data-theme='dark'] .public-certifications-card .credential-copy{
  color:#F0F6FC!important;
}
html[data-theme='light'] .public-certifications-card .credential-copy{
  color:#172F4A!important;
}
.public-certifications-card .credential-line.no-date{
  grid-template-columns:1fr!important;
}
.public-certifications-card .credential-line.no-date .credential-copy{
  font-size:clamp(20px,1.4vw,24px)!important;
  letter-spacing:-.015em!important;
}
@media(max-width:1024px){
  .public-certifications-card .credential-line{
    grid-template-columns:118px minmax(0,1fr)!important;
    column-gap:18px!important;
    min-height:86px!important;
    padding:18px 22px!important;
  }
  .public-certifications-card .credential-date{font-size:19px!important}
  .public-certifications-card .credential-copy{font-size:20px!important}
}
@media(max-width:760px){
  .public-certifications-card .credential-line{
    grid-template-columns:1fr!important;
    row-gap:7px!important;
    min-height:0!important;
    padding:16px 18px 16px 21px!important;
  }
  .public-certifications-card .credential-date{font-size:18px!important}
  .public-certifications-card .credential-copy{font-size:17px!important;line-height:1.48!important}
}

/* =========================================================
   V60 · PUBLIC CERTIFICATIONS — MAKE THE SMALL BLACK COPY BIG
   ========================================================= */
.public-certifications-card .credential-line{
  grid-template-columns:160px minmax(0,1fr)!important;
  column-gap:32px!important;
  min-height:112px!important;
  padding:24px 30px 24px 32px!important;
  align-items:center!important;
}
.public-certifications-card .credential-date{
  font-size:clamp(18px,1.1vw,22px)!important;
  line-height:1.15!important;
  font-weight:840!important;
}
.public-certifications-card .credential-copy{
  font-size:clamp(30px,2.05vw,38px)!important;
  line-height:1.28!important;
  font-weight:820!important;
  letter-spacing:-.03em!important;
}
.public-certifications-card .credential-line.no-date .credential-copy{
  font-size:clamp(28px,1.95vw,34px)!important;
  line-height:1.3!important;
}
html[data-theme='light'] .public-certifications-card .credential-copy{
  color:#152B44!important;
}
html[data-theme='dark'] .public-certifications-card .credential-copy{
  color:#F4F8FD!important;
}
@media(max-width:1024px){
  .public-certifications-card .credential-line{
    grid-template-columns:128px minmax(0,1fr)!important;
    column-gap:20px!important;
    min-height:98px!important;
    padding:20px 22px 20px 24px!important;
  }
  .public-certifications-card .credential-date{font-size:18px!important}
  .public-certifications-card .credential-copy{font-size:26px!important;line-height:1.34!important}
  .public-certifications-card .credential-line.no-date .credential-copy{font-size:24px!important}
}
@media(max-width:760px){
  .public-certifications-card .credential-line{
    grid-template-columns:1fr!important;
    row-gap:9px!important;
    min-height:0!important;
    padding:18px 18px 18px 22px!important;
  }
  .public-certifications-card .credential-date{font-size:17px!important}
  .public-certifications-card .credential-copy{font-size:22px!important;line-height:1.42!important}
  .public-certifications-card .credential-line.no-date .credential-copy{font-size:20px!important}
}

/* =========================================================
   V61 · CERTIFICATION COPY ULTRA LARGE
   User request: make the small black credential text much larger
   ========================================================= */
.public-certifications-card .credential-list{
  gap:20px!important;
}
.public-certifications-card .credential-line{
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr)!important;
  column-gap:36px!important;
  align-items:center!important;
  min-height:132px!important;
  padding:26px 34px 26px 34px!important;
}
.public-certifications-card .credential-date{
  font-size:clamp(18px,1.05vw,22px)!important;
  line-height:1.12!important;
  font-weight:840!important;
  letter-spacing:-.03em!important;
}
.public-certifications-card .credential-copy,
.credential-copy{
  font-size:clamp(42px,2.8vw,56px)!important;
  line-height:1.22!important;
  font-weight:820!important;
  letter-spacing:-.03em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}
.public-certifications-card .credential-line.no-date .credential-copy,
.credential-line.no-date .credential-copy{
  font-size:clamp(40px,2.6vw,52px)!important;
  line-height:1.24!important;
}
html[data-theme='dark'] .public-certifications-card .credential-copy,
html[data-theme='dark'] .credential-copy{
  color:#F7FAFE!important;
}
html[data-theme='light'] .public-certifications-card .credential-copy,
html[data-theme='light'] .credential-copy{
  color:#152C45!important;
}
@media(max-width:1280px){
  .public-certifications-card .credential-line{
    grid-template-columns:148px minmax(0,1fr)!important;
    column-gap:26px!important;
    min-height:116px!important;
    padding:24px 28px!important;
  }
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:34px!important;line-height:1.28!important}
  .public-certifications-card .credential-line.no-date .credential-copy,
  .credential-line.no-date .credential-copy{font-size:32px!important}
}
@media(max-width:900px){
  .public-certifications-card .credential-line{
    grid-template-columns:128px minmax(0,1fr)!important;
    column-gap:20px!important;
    min-height:104px!important;
    padding:20px 22px!important;
  }
  .public-certifications-card .credential-date{font-size:18px!important}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:26px!important;line-height:1.34!important}
  .public-certifications-card .credential-line.no-date .credential-copy,
  .credential-line.no-date .credential-copy{font-size:24px!important}
}
@media(max-width:760px){
  .public-certifications-card .credential-line{
    grid-template-columns:1fr!important;
    row-gap:10px!important;
    min-height:0!important;
    padding:18px 18px 18px 22px!important;
  }
  .public-certifications-card .credential-date{font-size:17px!important}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:22px!important;line-height:1.4!important}
  .public-certifications-card .credential-line.no-date .credential-copy,
  .credential-line.no-date .credential-copy{font-size:20px!important}
}

/* =========================================================
   V62 · CERTIFICATIONS 2-UP GRID + MUCH LARGER COPY
   User request:
   - reduce width so two items fit per row
   - make the small body copy clearly bigger
   ========================================================= */
.public-certifications-card .credential-list,
.credential-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}

.public-certifications-card .credential-line,
.credential-line{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:14px!important;
  min-height:168px!important;
  padding:28px 30px 28px 42px!important;
  border-radius:28px!important;
}

.public-certifications-card .credential-line::before,
.credential-line::before{
  width:6px!important;
  top:18px!important;
  bottom:18px!important;
  left:10px!important;
}

.public-certifications-card .credential-date,
.credential-date{
  display:block!important;
  font-size:clamp(30px,2vw,38px)!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
}

.public-certifications-card .credential-copy,
.credential-copy{
  display:block!important;
  max-width:100%!important;
  font-size:clamp(27px,1.62vw,34px)!important;
  line-height:1.34!important;
  font-weight:820!important;
  letter-spacing:-.028em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}

.public-certifications-card .credential-line.no-date,
.credential-line.no-date{
  grid-column:1 / -1!important;
  min-height:110px!important;
}

.public-certifications-card .credential-line.no-date .credential-copy,
.credential-line.no-date .credential-copy{
  font-size:clamp(30px,1.8vw,36px)!important;
  line-height:1.28!important;
}

html[data-theme='light'] .public-certifications-card .credential-copy,
html[data-theme='light'] .credential-copy{
  color:#122842!important;
}
html[data-theme='dark'] .public-certifications-card .credential-copy,
html[data-theme='dark'] .credential-copy{
  color:#F7FAFE!important;
}

@media (max-width:1400px){
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:154px!important;
    padding:24px 24px 24px 38px!important;
    gap:12px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:30px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:24px!important;line-height:1.36!important;}
}

@media (max-width:1080px){
  .public-certifications-card .credential-list,
  .credential-list{grid-template-columns:1fr!important;}
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:138px!important;
    padding:22px 22px 22px 34px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:28px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:22px!important;line-height:1.4!important;}
  .public-certifications-card .credential-line.no-date .credential-copy,
  .credential-line.no-date .credential-copy{font-size:24px!important;}
}

@media (max-width:760px){
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:0!important;
    padding:18px 18px 18px 28px!important;
    gap:10px!important;
    border-radius:22px!important;
  }
  .public-certifications-card .credential-line::before,
  .credential-line::before{
    left:8px!important;
    top:14px!important;
    bottom:14px!important;
    width:5px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:24px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:19px!important;line-height:1.42!important;}
}

/* =========================================================
   V63 · CERTIFICATION COPY ULTRA READABLE
   Stronger typography per user request: body text still too small.
   ========================================================= */
.public-certifications-card .credential-list,
.credential-list{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:26px!important;
}

.public-certifications-card .credential-line,
.credential-line{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:16px!important;
  min-height:220px!important;
  padding:34px 38px 34px 52px!important;
  border-radius:34px!important;
}

.public-certifications-card .credential-line::before,
.credential-line::before{
  left:16px!important;
  top:26px!important;
  bottom:26px!important;
  width:8px!important;
  border-radius:999px!important;
}

.public-certifications-card .credential-date,
.credential-date{
  font-size:clamp(42px,2.2vw,56px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.05em!important;
  white-space:nowrap!important;
}

.public-certifications-card .credential-copy,
.credential-copy{
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(25px,1.35vw,32px)!important;
  line-height:1.45!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
  text-wrap:pretty!important;
}

.public-certifications-card .credential-line.no-date,
.credential-line.no-date{
  min-height:140px!important;
}

.public-certifications-card .credential-line.no-date .credential-copy,
.credential-line.no-date .credential-copy{
  font-size:clamp(28px,1.55vw,36px)!important;
  line-height:1.42!important;
}

@media (max-width:1600px){
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:205px!important;
    padding:30px 34px 30px 48px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:44px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:24px!important;line-height:1.42!important;}
}

@media (max-width:1280px){
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:188px!important;
    padding:26px 28px 26px 44px!important;
    gap:14px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:38px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:21px!important;line-height:1.4!important;}
}

@media (max-width:1080px){
  .public-certifications-card .credential-list,
  .credential-list{grid-template-columns:1fr!important;}
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:170px!important;
    padding:24px 24px 24px 38px!important;
  }
  .public-certifications-card .credential-line::before,
  .credential-line::before{
    left:12px!important;
    top:20px!important;
    bottom:20px!important;
    width:7px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:34px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:20px!important;line-height:1.42!important;}
}

@media (max-width:760px){
  .public-certifications-card .credential-line,
  .credential-line{
    min-height:0!important;
    padding:20px 18px 20px 30px!important;
    border-radius:24px!important;
    gap:10px!important;
  }
  .public-certifications-card .credential-line::before,
  .credential-line::before{
    left:8px!important;
    top:14px!important;
    bottom:14px!important;
    width:5px!important;
  }
  .public-certifications-card .credential-date,
  .credential-date{font-size:28px!important;}
  .public-certifications-card .credential-copy,
  .credential-copy{font-size:18px!important;line-height:1.4!important;}
}


/* =========================================================
   V64 · CERTIFICATION READABILITY FINAL OVERRIDE
   Fixes:
   1) body copy was visually subordinate to the oversized date
   2) desktop media queries kept shrinking the copy
   3) force a single canonical end-of-file rule set
   ========================================================= */

html body .public-certifications-card .credential-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
}

html body .public-certifications-card .credential-line{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:16px!important;
  min-height:220px!important;
  padding:32px 34px 32px 48px!important;
  border-radius:30px!important;
}

html body .public-certifications-card .credential-date{
  font-size:36px!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}

html body .public-certifications-card .credential-copy{
  width:100%!important;
  max-width:100%!important;
  font-size:30px!important;
  line-height:1.34!important;
  font-weight:840!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}

html[data-theme='light'] body .public-certifications-card .credential-copy{
  color:#102941!important;
}
html[data-theme='dark'] body .public-certifications-card .credential-copy{
  color:#F4F8FC!important;
}

html body .public-certifications-card .credential-line.no-date{
  grid-column:1 / -1!important;
  min-height:130px!important;
}
html body .public-certifications-card .credential-line.no-date .credential-copy{
  font-size:31px!important;
}

/* Keep desktop copy large. Do not shrink at 1600 / 1280 widths. */
@media (max-width:1180px){
  html body .public-certifications-card .credential-list{
    grid-template-columns:1fr!important;
  }
  html body .public-certifications-card .credential-line{
    min-height:165px!important;
    padding:26px 28px 26px 40px!important;
  }
  html body .public-certifications-card .credential-date{
    font-size:32px!important;
  }
  html body .public-certifications-card .credential-copy{
    font-size:27px!important;
  }
}

@media (max-width:760px){
  html body .public-certifications-card .credential-line{
    min-height:0!important;
    padding:20px 18px 20px 30px!important;
    gap:10px!important;
    border-radius:22px!important;
  }
  html body .public-certifications-card .credential-date{
    font-size:26px!important;
  }
  html body .public-certifications-card .credential-copy{
    font-size:20px!important;
    line-height:1.42!important;
  }
}