*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:#03060d;color:#f4f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
input,select,textarea{width:100%}
img,canvas{max-width:100%}
:root{
  --bg:#03060d;
  --bg2:#0b1020;
  --panel:rgba(10,16,30,.72);
  --panel-strong:rgba(16,24,42,.88);
  --text:#f4f7fb;
  --muted:#bfd0e3;
  --line:rgba(255,255,255,.10);
  --cyan:#86ddff;
  --blue:#78a8ff;
  --purple:#d5a6ff;
  --glow:0 24px 80px rgba(0,0,0,.35);
  --radius:28px;
}
.skip-link{position:fixed;left:14px;top:14px;z-index:999;background:#fff;color:#070b14;padding:10px 14px;border-radius:14px;font-weight:800;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
#bgCanvas,.ambient,.grid-overlay,.cursor-glow{position:fixed;inset:0;pointer-events:none}
#bgCanvas{z-index:0;opacity:.9}
.ambient{z-index:0;filter:blur(80px)}
.ambient-a{background:radial-gradient(circle at 15% 15%,rgba(120,168,255,.22),transparent 34%)}
.ambient-b{background:radial-gradient(circle at 85% 15%,rgba(213,166,255,.18),transparent 32%)}
.ambient-c{background:radial-gradient(circle at 50% 88%,rgba(134,221,255,.15),transparent 36%)}
.grid-overlay{z-index:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at center,rgba(0,0,0,.9),transparent 88%)}
.cursor-glow{z-index:1;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;background:radial-gradient(circle,rgba(134,221,255,.12),transparent 70%);transition:transform .08s linear}
.site-header,.section,.section-slim,.site-footer{position:relative;z-index:2}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;backdrop-filter:blur(18px);background:rgba(3,6,13,.58);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark-symbol{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,rgba(120,168,255,.22),rgba(213,166,255,.14));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 35px rgba(0,0,0,.25)}
.wordmark-text{font-size:1rem;font-weight:900;letter-spacing:.22em}
.desktop-nav{display:flex;align-items:center;gap:28px}
.desktop-nav a,.footer-links a{color:#d8e6f3;transition:.25s}
.desktop-nav a:hover,.footer-links a:hover,.nav-phone:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-phone{white-space:nowrap;color:#e9f3fb;font-weight:700;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.menu-btn{display:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;width:44px;height:44px;border-radius:14px;cursor:pointer}
.mobile-menu{display:none;padding:0 20px 16px;gap:10px;flex-direction:column}
.mobile-menu.show{display:flex}
.mobile-menu a{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.section{padding:96px 0}
.section-slim{padding:18px 0 8px}
.hero{padding-top:90px;min-height:calc(100svh - 78px);display:flex;align-items:center}
.hero-grid,.contact-grid,.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.hero-copy{max-width:700px}
.eyebrow{display:inline-flex;margin:0 0 16px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#d6e6f8}
.hero h1{margin:0 0 18px;font-size:clamp(3rem,7vw,5.6rem);line-height:.95;letter-spacing:-.05em;max-width:11ch}
.hero-text,.section-head p,.service-card p,.skill-card p,.experience-card p,.story-main p,.contact-copy p,.info-card span{color:var(--muted);line-height:1.74;overflow-wrap:anywhere}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:16px;font-weight:800;transition:.25s transform,.25s box-shadow,.25s background}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,#8fe3ff,#7faeff);color:#08111b;box-shadow:0 18px 40px rgba(120,168,255,.25)}
.btn.secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:#f4f7fb}
.btn.full{width:100%}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px}
.hero-tags span,.label{font-size:.8rem;font-weight:800}
.hero-tags span{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.hero-visual{min-height:500px;display:grid;place-items:center}
.orb{position:relative;width:min(460px,92vw);height:min(460px,92vw);display:grid;place-items:center}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.orb::after{inset:26px;border-color:rgba(134,221,255,.15)}
.orb-core{position:relative;z-index:2;width:132px;height:132px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.orb-core strong{font-size:4rem;line-height:1}
.orb-core small{margin-top:6px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#dce9f9}
.orb-node{position:absolute;z-index:2;border:none;cursor:pointer;padding:10px 13px;border-radius:999px;color:#fff;background:linear-gradient(180deg,rgba(16,24,42,.94),rgba(9,14,28,.9));border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.28);transition:.25s transform,.25s border-color,.25s background}
.orb-node:hover,.orb-node.active{transform:translateY(-3px) scale(1.04);border-color:rgba(134,221,255,.55);background:linear-gradient(180deg,rgba(22,34,58,.98),rgba(10,15,29,.94))}
.n1{top:4%;left:50%;transform:translateX(-50%)}
.n2{top:20%;right:4%}
.n3{top:50%;right:-2%;transform:translateY(-50%)}
.n4{bottom:20%;right:6%}
.n5{bottom:4%;left:50%;transform:translateX(-50%)}
.n6{bottom:20%;left:6%}
.n7{top:50%;left:-2%;transform:translateY(-50%)}
.n8{top:20%;left:4%}
.orbit-line{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.line-a{inset:42px;animation:spin 20s linear infinite}
.line-b{inset:82px;transform:rotateX(72deg);animation:spin-reverse 18s linear infinite}
.line-c{inset:102px;transform:rotateY(72deg);animation:spin 24s linear infinite}
.orb-caption{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);width:min(340px,92vw);padding:12px 14px;border-radius:16px;background:rgba(14,20,34,.88);border:1px solid rgba(255,255,255,.08);text-align:center;color:#d6e6f8;line-height:1.55}
.info-grid,.skills-grid,.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card,.service-card,.skill-card,.experience-card,.story-main,.story-points div,.contact-form{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(13,20,35,.86),rgba(8,12,24,.74));border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);box-shadow:var(--glow)}
.info-card,.experience-card,.story-points div{padding:22px}
.info-card strong{display:block;margin-bottom:8px}
.section-head{max-width:760px;margin-bottom:28px}
.section-head h2,.contact-copy h2,.story-main h2{margin:0 0 12px;font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.02;letter-spacing:-.04em}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{padding:24px;min-height:100%;transition:.25s transform,.25s border-color}
.service-card:hover,.skill-card:hover,.experience-card:hover,.info-card:hover,.story-points div:hover,.contact-form:hover{transform:translateY(-6px);border-color:rgba(134,221,255,.26)}
.featured{grid-column:span 2}
.wide{grid-column:span 2}
.service-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.icon{font-size:1.1rem}
.label{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.service-card h3,.skill-card h3,.experience-card h3{margin:0 0 10px;font-size:1.2rem}
.service-card ul{margin:16px 0 0;padding-left:18px;color:#dce7f4}
.service-card li{margin:7px 0}
.dark-section{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.skills-grid{grid-template-columns:repeat(2,1fr)}
.skill-card{padding:24px;min-height:240px}
.skill-card pre{margin:18px 0 0;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);white-space:pre-wrap;color:#bfe8ff}
.shape-row{display:flex;gap:14px;margin-top:20px}
.shape-row span{display:block;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,rgba(120,168,255,.95),rgba(213,166,255,.8))}
.shape-row span:nth-child(2){border-radius:50%;background:linear-gradient(135deg,rgba(134,221,255,.95),rgba(120,168,255,.8))}
.shape-row span:nth-child(3){clip-path:polygon(50% 0%,0% 100%,100% 100%);background:linear-gradient(135deg,rgba(213,166,255,.95),rgba(134,221,255,.8))}
.qa-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.qa-row span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.chip-art{width:120px;height:120px;margin-top:18px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);position:relative}
.chip-art::before,.chip-art::after{content:"";position:absolute;background:rgba(255,255,255,.14)}
.chip-art::before{inset:18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:none}
.chip-art::after{left:-18px;right:-18px;top:50%;height:1px;transform:translateY(-50%)}
.experience-grid{grid-template-columns:repeat(4,1fr)}
.experience-card span{display:inline-flex;margin-bottom:10px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.78rem;font-weight:800;color:#d7e7f8}
.story-section{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.story-main{padding:28px}
.story-main blockquote{margin:22px 0 0;padding:18px 18px 18px 20px;border-left:3px solid var(--cyan);background:rgba(134,221,255,.06);border-radius:18px;font-weight:700;color:#edf5fc}
.story-points{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.story-points strong{display:block;margin-bottom:8px;color:#f8fbff}
.story-points span{color:var(--muted);line-height:1.6}
.contact-grid{align-items:start}
.contact-list{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.contact-list a,.contact-list span{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow-wrap:anywhere}
.contact-form{padding:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
input,select,textarea{border:none;outline:none;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff}
input::placeholder,textarea::placeholder{color:#aebed2}
textarea{resize:vertical;min-height:160px}
.site-footer{padding:28px 0 102px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18)}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.footer-logo{width:110px;height:110px;object-fit:contain;border-radius:20px;background:#000}
.footer-brand strong{display:block;font-size:1.05rem}
.footer-brand p{margin:8px 0 0;color:var(--muted)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);color:#98abc0}
.mobile-cta{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:5;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;border-radius:20px;background:rgba(6,10,18,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08)}
.mobile-cta a{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-weight:800}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-reverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@media (min-width:1440px){
  .container{width:min(1260px,calc(100% - 60px))}
  .hero h1{font-size:6.2rem}
  .orb{width:500px;height:500px}
}
@media (max-width:1240px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .featured,.wide{grid-column:span 2}
  .experience-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .desktop-nav,.nav-phone{display:none}
  .menu-btn{display:grid;place-items:center}
  .hero-grid,.story-grid,.contact-grid{grid-template-columns:1fr}
  .hero{padding-top:70px;min-height:auto}
  .hero-visual{min-height:430px;margin-top:10px}
  .info-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:auto 1fr}
  .footer-links{grid-column:1/-1}
}
@media (max-width:760px){
  .container{width:min(100% - 24px,1180px)}
  .nav{min-height:68px}
  .wordmark-text{font-size:.92rem;letter-spacing:.14em}
  .wordmark-symbol{width:36px;height:36px}
  .section{padding:76px 0}
  .hero{padding-top:40px}
  .hero h1{font-size:clamp(2.3rem,12vw,3.6rem);max-width:none}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .btn{width:100%}
  .hero-visual{min-height:360px}
  .orb{width:min(320px,94vw);height:min(320px,94vw)}
  .orb-core{width:98px;height:98px;border-radius:28px}
  .orb-core strong{font-size:3rem}
  .orb-core small{font-size:.5rem}
  .orb-node{padding:8px 11px;font-size:.7rem}
  .orb-caption{bottom:-70px;width:min(300px,90vw);font-size:.82rem}
  .services-grid,.skills-grid,.experience-grid,.story-points,.form-row{grid-template-columns:1fr}
  .featured,.wide{grid-column:span 1}
  .service-card,.skill-card,.experience-card,.story-main,.story-points div,.contact-form{padding:20px;border-radius:24px}
  .site-footer{padding-bottom:104px}
  .footer-grid{grid-template-columns:1fr}
  .footer-logo{width:96px;height:96px}
  .mobile-cta{display:grid}
}
@media (max-width:390px){
  .container{width:min(100% - 18px,1180px)}
  .wordmark-text{font-size:.84rem;letter-spacing:.10em}
  .hero h1{font-size:2.08rem}
  .section-head h2,.contact-copy h2,.story-main h2{font-size:1.85rem}
  .orb{width:286px;height:286px}
  .orb-node{font-size:.63rem;padding:6px 9px}
  .mobile-cta{left:8px;right:8px;bottom:8px}
}
@media (max-height:620px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(2rem,6vw,3.1rem)}
  .orb{width:280px;height:280px}
  .orb-caption{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  #bgCanvas,.cursor-glow{display:none}
  .reveal{opacity:1;transform:none}
}


/* =========================================================
   Premium advanced animation layer
   ========================================================= */
#codeCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .22;
  pointer-events: none;
  mix-blend-mode: screen;
}
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.ambient {
  animation: auroraPulse 12s ease-in-out infinite alternate;
}
.ambient-b { animation-delay: -3s; }
.ambient-c { animation-delay: -6s; }
.site-header {
  box-shadow: 0 10px 50px rgba(0,0,0,.25);
}
.wordmark, .btn, .nav-phone {
  will-change: transform;
}
.split-title .line-mask {
  display: block;
  overflow: hidden;
}
.split-title .line-mask > span {
  display: block;
  transform: translateY(110%);
  animation: headlineRise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.split-title .line-mask:nth-child(2) > span { animation-delay: .12s; }
.split-title .line-mask:nth-child(3) > span { animation-delay: .24s; }
.split-title .line-mask:nth-child(4) > span { animation-delay: .36s; }

.service-card,
.skill-card,
.experience-card,
.info-card,
.story-main,
.story-points div,
.contact-form {
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card::after,
.skill-card::after,
.experience-card::after,
.info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(145,231,255,.15), transparent 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.service-card:hover::after,
.skill-card:hover::after,
.experience-card:hover::after,
.info-card:hover::after {
  opacity: 1;
}
.tech-orb {
  animation: orbFloat 6s ease-in-out infinite alternate;
}
.orb-node {
  animation: nodePulse 3s ease-in-out infinite;
}
.orb-node:nth-of-type(2) { animation-delay: .25s; }
.orb-node:nth-of-type(3) { animation-delay: .5s; }
.orb-node:nth-of-type(4) { animation-delay: .75s; }
.orb-node:nth-of-type(5) { animation-delay: 1s; }
.orb-node:nth-of-type(6) { animation-delay: 1.25s; }
.orb-node:nth-of-type(7) { animation-delay: 1.5s; }
.orb-node:nth-of-type(8) { animation-delay: 1.75s; }
.orb-caption {
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #02040a;
  transition: opacity .55s ease, visibility .55s ease;
}
.loader.hide {
  opacity: 0;
  visibility: hidden;
}
.loader-mark {
  font-size: 4rem;
  font-weight: 1000;
  letter-spacing: -.06em;
  background: linear-gradient(90deg, #fff, #91e7ff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.loader-line {
  position: absolute;
  bottom: 18%;
  width: min(320px, 70vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.loader-line span {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #91e7ff, transparent);
  animation: loadSweep 1.05s ease-in-out infinite;
}
@keyframes headlineRise { to { transform: translateY(0); } }
@keyframes auroraPulse {
  to { transform: translate3d(2%, 3%, 0) scale(1.06); filter: blur(92px); }
}
@keyframes orbFloat {
  from { transform: translateY(0) rotateX(0deg); }
  to { transform: translateY(-14px) rotateX(3deg); }
}
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(0,0,0,.30); }
  50% { box-shadow: 0 22px 62px rgba(145,231,255,.16); }
}
@keyframes loadSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .split-title .line-mask > span { transform: none; animation: none; }
  .tech-orb, .orb-node, .ambient { animation: none; }
  #codeCanvas, .noise-overlay { display: none; }
}


/* =========================================================
   Header click fix
   Problem fixed: sections and canvas layers were sharing/competing
   with the header stacking level after scrolling. Header and mobile
   navigation now always stay above page content and remain clickable.
   ========================================================= */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  pointer-events: auto !important;
}

.site-header *,
.mobile-menu,
.mobile-menu * {
  pointer-events: auto !important;
}

.mobile-menu {
  position: relative;
  z-index: 5001 !important;
}

.mobile-cta {
  z-index: 5002 !important;
}

#matrixCanvas,
#networkCanvas,
#bgCanvas,
#codeCanvas,
.noise,
.noise-overlay,
.aurora,
.ambient,
.grid-overlay,
.cursor-glow {
  pointer-events: none !important;
}

.section,
.section-slim,
.site-footer,
main {
  z-index: 1 !important;
}

.loader {
  pointer-events: none;
}

.loader:not(.hide) {
  pointer-events: auto;
}

/* Stronger mobile menu open state */
.mobile-menu.show {
  display: flex !important;
}

/* Keep anchor scrolling from hiding sections under sticky header */
[id] {
  scroll-margin-top: 96px;
}


/* =========================================================
   Contact form dropdown visibility fix
   Fixes white option text on white dropdown backgrounds.
   ========================================================= */
.contact-form select,
.contact-form select:focus {
  color: #f7fbff !important;
  background-color: rgba(255,255,255,.055) !important;
}

.contact-form select option,
.contact-form select optgroup {
  color: #06111f !important;
  background-color: #ffffff !important;
}

.contact-form select option:checked,
.contact-form select option:hover {
  color: #06111f !important;
  background-color: #e8f4ff !important;
}

/* Some browsers render closed select text using option styling;
   force the closed field to stay readable on dark UI. */
select[name="service"] {
  color-scheme: dark;
}


/* =========================================================
   Requested final features:
   - Based in Europe
   - Header CALL button
   - Theme selector: dark / light / digital
   - Slow rotating service orb with popouts
   - Blockchain node visual
   - Cal.com booking button/card
   ========================================================= */
:root,
body[data-theme="dark"] {
  --bg:#02030a;
  --panel:rgba(8,13,26,.72);
  --panel2:rgba(14,22,40,.88);
  --text:#f7fbff;
  --muted:#bed1e5;
  --line:rgba(255,255,255,.10);
  --cyan:#91e7ff;
  --blue:#7aa7ff;
  --purple:#d9a6ff;
  --pink:#ffb7ee;
}

body[data-theme="light"] {
  --bg:#f7f9ff;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --text:#0b1220;
  --muted:#44546a;
  --line:rgba(10,18,32,.13);
  --cyan:#006d9c;
  --blue:#275df4;
  --purple:#7c3aed;
  --pink:#d946ef;
  color:#0b1220;
  background:#f7f9ff;
}
body[data-theme="light"] .site-header,
body[data-theme="light"] .header {
  background:rgba(247,249,255,.76);
}
body[data-theme="light"] .aurora,
body[data-theme="light"] .ambient {
  opacity:.52;
}
body[data-theme="light"] .wordmark-text,
body[data-theme="light"] .desktop-nav a,
body[data-theme="light"] .footer-links a,
body[data-theme="light"] .nav-link,
body[data-theme="light"] .mobile-menu a,
body[data-theme="light"] .hero-tags span,
body[data-theme="light"] .contact-list a,
body[data-theme="light"] .contact-list span {
  color:#0b1220;
}
body[data-theme="light"] .service-card,
body[data-theme="light"] .skill-card,
body[data-theme="light"] .timeline-item,
body[data-theme="light"] .experience-card,
body[data-theme="light"] .info-card,
body[data-theme="light"] .story-main,
body[data-theme="light"] .story-points div,
body[data-theme="light"] .contact-form,
body[data-theme="light"] .cal-meeting-card,
body[data-theme="light"] .blockchain-node,
body[data-theme="light"] .orb-caption {
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
  border-color:rgba(10,18,32,.13);
  color:#0b1220;
}
body[data-theme="light"] .hero-text,
body[data-theme="light"] .section-head p,
body[data-theme="light"] .service-card p,
body[data-theme="light"] .skill-card p,
body[data-theme="light"] .timeline-item p,
body[data-theme="light"] .experience-card p,
body[data-theme="light"] .story-main p,
body[data-theme="light"] .contact-copy p,
body[data-theme="light"] .info-card span,
body[data-theme="light"] .story-points span {
  color:#44546a;
}
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background:rgba(10,18,32,.04);
  color:#0b1220;
  border-color:rgba(10,18,32,.14);
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color:#63738a;
}

body[data-theme="digital"] {
  --bg:#050014;
  --panel:rgba(15,8,35,.76);
  --panel2:rgba(20,12,48,.9);
  --text:#fffaff;
  --muted:#d9c8ff;
  --line:rgba(255,255,255,.13);
  --cyan:#00f5ff;
  --blue:#7c3aed;
  --purple:#ff2bd6;
  --pink:#ffe600;
  background:#050014;
}
body[data-theme="digital"] .aurora,
body[data-theme="digital"] .ambient {
  opacity:.95;
  filter:blur(74px) saturate(1.45);
}
body[data-theme="digital"] .wordmark-text {
  background:linear-gradient(90deg,#00f5ff,#ff2bd6,#ffe600);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body[data-theme="digital"] .btn.primary,
body[data-theme="digital"] .nav-call {
  background:linear-gradient(135deg,#00f5ff,#ff2bd6,#ffe600);
  color:#050014;
  border:none;
}

.theme-switcher {
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:999px;
}
.theme-btn {
  border:0;
  color:var(--text);
  background:transparent;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-size:.76rem;
  font-weight:900;
}
.theme-btn.active {
  color:#06111f;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
}
.nav-call {
  white-space:nowrap;
  padding:11px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#06111f;
  font-weight:1000;
  letter-spacing:.05em;
  border:1px solid transparent;
}
.nav-phone { display:none !important; }

.orb,
.tech-orb,
.premium-orb {
  animation: slowElegantRotate 46s linear infinite, orbFloat 8s ease-in-out infinite alternate;
}
.orb-core,
.orb-node,
.orb-caption,
.orb-popouts {
  animation: counterSlowRotate 46s linear infinite;
}
.orb-popouts {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.pop {
  position:absolute;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(8,13,26,.72);
  color:var(--text);
  font-size:.7rem;
  opacity:.72;
  box-shadow:0 12px 34px rgba(0,0,0,.25);
  animation: popFloat 4s ease-in-out infinite alternate;
}
.web-pop{top:13%;left:23%}
.design-pop{top:11%;right:22%;animation-delay:.3s}
.code-pop{right:2%;top:37%;animation-delay:.6s}
.qa-pop{right:14%;bottom:20%;animation-delay:.9s}
.it-pop{bottom:9%;left:45%;animation-delay:1.2s}
.growth-pop{left:10%;bottom:22%;animation-delay:1.5s}
.docs-pop{left:3%;top:42%;animation-delay:1.8s}
.chain-pop{left:29%;bottom:4%;animation-delay:2.1s}

.blockchain-section {
  padding-top:42px;
}
.blockchain-grid {
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:32px;
  align-items:center;
}
.blockchain-copy h2 {
  font-size:clamp(2rem,4.5vw,3.2rem);
  line-height:1.02;
  margin:0 0 12px;
  letter-spacing:-.045em;
}
.blockchain-copy p {
  color:var(--muted);
  line-height:1.75;
}
.blockchain-node {
  position:relative;
  min-height:420px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:32px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.chain-center,
.chain-node {
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.chain-center {
  left:50%;
  top:50%;
  width:92px;
  height:92px;
  transform:translate(-50%,-50%);
  border-radius:26px;
  font-size:3rem;
  font-weight:1000;
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--purple));
  color:#06111f;
}
.chain-node {
  width:78px;
  height:42px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  animation: chainPulse 3.4s ease-in-out infinite;
}
.c1{left:50%;top:38px;transform:translateX(-50%)}
.c2{right:44px;top:112px;animation-delay:.3s}
.c3{right:44px;bottom:112px;animation-delay:.6s}
.c4{left:50%;bottom:38px;transform:translateX(-50%);animation-delay:.9s}
.c5{left:44px;bottom:112px;animation-delay:1.2s}
.c6{left:44px;top:112px;animation-delay:1.5s}
.chain-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.chain-lines line {
  stroke:rgba(145,231,255,.28);
  stroke-width:2;
  stroke-dasharray:8 10;
  animation: dashFlow 12s linear infinite;
}
.cal-meeting-card {
  padding:22px;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:var(--shadow);
  margin-bottom:16px;
}
.cal-meeting-card span {
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.76rem;
  font-weight:900;
  color:var(--cyan);
}
.cal-meeting-card h3 {
  margin:0 0 8px;
}
.cal-meeting-card p {
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.65;
}
.btn.cal {
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#06111f;
  font-weight:1000;
}

@keyframes slowElegantRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes counterSlowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes popFloat {
  from { transform:translateY(0) scale(.96); opacity:.46; }
  to { transform:translateY(-12px) scale(1); opacity:.9; }
}
@keyframes chainPulse {
  0%,100% { box-shadow:0 18px 44px rgba(0,0,0,.28); border-color:var(--line); }
  50% { box-shadow:0 20px 56px rgba(145,231,255,.20); border-color:rgba(145,231,255,.55); }
}
@keyframes dashFlow {
  to { stroke-dashoffset:-180; }
}
@media (max-width:1080px) {
  .theme-switcher { display:none; }
  .blockchain-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .blockchain-node { min-height:340px; }
  .chain-center { width:78px;height:78px;font-size:2.4rem; }
  .chain-node { width:66px;height:36px;font-size:.68rem; }
  .c2,.c3{right:20px}.c5,.c6{left:20px}
  .pop { font-size:.58rem;padding:6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb,.tech-orb,.premium-orb,.orb-core,.orb-node,.orb-caption,.orb-popouts,.pop,.chain-node,.chain-lines line {
    animation:none !important;
  }
}


/* Dropdown visibility preserved */
.contact-form select option,
.contact-form select optgroup {
  color:#06111f !important;
  background:#ffffff !important;
}
.contact-form select option:checked,
.contact-form select option:hover {
  color:#06111f !important;
  background:#e8f4ff !important;
}


/* =========================================================
   Update patch:
   - centered Book a Meeting button after services
   - orbit labels stay horizontal while orbiting
   - blockchain visual converted into interactive network canvas
   ========================================================= */

.services-book-cta{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.centered-book{
  min-width:220px;
  justify-content:center;
  text-align:center;
}

.orb,
.tech-orb,
.premium-orb{
  animation: orbFloat 8s ease-in-out infinite alternate !important;
}
.orb-core,
.orb-caption{
  animation:none !important;
}
.orb-popouts{
  animation:none !important;
}
.orb-node,
.pop{
  position:absolute;
  transform:none;
  will-change:left, top;
}
.orb-node{
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, scale .25s ease;
}
.orb-node:hover,
.orb-node.active{
  transform:none !important;
  scale:1.05;
  border-color:rgba(134,221,255,.55);
  background:linear-gradient(180deg,rgba(22,34,58,.98),rgba(10,15,29,.94));
}
body[data-theme="light"] .pop{
  background:rgba(255,255,255,.92);
  color:#0b1220;
}
body[data-theme="light"] .orb-node{
  color:#0b1220;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,246,255,.9));
  border-color:rgba(10,18,32,.14);
}

.blockchain-node{
  position:relative;
  min-height:440px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:32px;
  box-shadow:var(--glow, 0 24px 80px rgba(0,0,0,.35));
  overflow:hidden;
}
.blockchain-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.blockchain-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 35%, rgba(0, 238, 255, .18), transparent 18%),
    radial-gradient(circle at 67% 48%, rgba(89, 205, 255, .16), transparent 22%),
    radial-gradient(circle at 85% 40%, rgba(117, 122, 255, .10), transparent 18%);
  pointer-events:none;
}
.chain-hud{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:2;
  max-width:340px;
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(6,11,22,.62);
  backdrop-filter:blur(12px);
}
.chain-hud h3{
  margin:0 0 6px;
  font-size:1.15rem;
}
.chain-hud p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}
.hud-chip{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cyan);
  background:rgba(255,255,255,.04);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
}
.chain-tooltip{
  position:absolute;
  z-index:3;
  left:16px;
  top:16px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(6,11,22,.88);
  border:1px solid rgba(145,231,255,.25);
  color:#f7fbff;
  font-size:.75rem;
  font-weight:800;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.chain-tooltip.show{
  opacity:1;
  transform:translateY(0);
}
body[data-theme="light"] .chain-hud,
body[data-theme="light"] .chain-tooltip{
  background:rgba(255,255,255,.86);
  color:#0b1220;
}
body[data-theme="light"] .chain-hud p{
  color:#44546a;
}
body[data-theme="digital"] .chain-hud{
  background:rgba(18,6,38,.68);
}

@media (max-width:760px){
  .blockchain-node{min-height:360px}
  .chain-hud{
    left:14px;
    right:14px;
    bottom:14px;
    padding:14px;
  }
}


/* =========================================================
   Final polish patch:
   - rotating service labels stay horizontal
   - Book a Meeting appears only as a centered services CTA + contact link
   - contact/bottom sections centered
   - blockchain visual uses hover popups, no instruction box
   - light/dark readability strengthened
   ========================================================= */

/* Orb: only positions orbit; boxes never rotate themselves */
.orb,
.tech-orb,
.premium-orb {
  animation: orbFloat 8s ease-in-out infinite alternate !important;
  transform: none !important;
}
.orb-core,
.orb-caption,
.orb-popouts {
  animation: none !important;
  transform: none !important;
}
.orb-node,
.pop {
  transform: none !important;
  rotate: 0deg !important;
  will-change: left, top;
  text-align: center;
  white-space: nowrap;
}
.orb-node:hover,
.orb-node.active {
  transform: none !important;
  scale: 1.05;
}
.pop {
  animation: softPopPulse 4.8s ease-in-out infinite alternate !important;
}
@keyframes softPopPulse {
  from { opacity: .48; filter: drop-shadow(0 0 0 rgba(134,221,255,0)); }
  to { opacity: .92; filter: drop-shadow(0 0 14px rgba(134,221,255,.22)); }
}

/* Book CTA after services */
.services-book-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 34px auto 0;
  text-align: center;
}
.centered-book {
  min-width: 220px;
  justify-content: center;
}
.cal-meeting-card {
  display: none !important;
}

/* Center contact and bottom */
.contact-grid {
  max-width: 1040px;
  margin: 0 auto;
  align-items: center;
}
.contact-copy {
  text-align: center;
}
.contact-copy .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.contact-list {
  align-items: center;
}
.contact-list a,
.contact-list span {
  width: min(100%, 460px);
  text-align: center;
}
.contact-form {
  width: min(100%, 620px);
  margin: 0 auto;
}
.site-footer,
.footer,
.footer-brand,
.footer-bottom,
.copyright {
  text-align: center;
}
.footer-grid {
  justify-items: center;
}
.footer-links {
  justify-content: center;
}

/* Blockchain network visual: visual only + hover popups */
.blockchain-node {
  min-height: 450px;
  background:
    radial-gradient(circle at 32% 44%, rgba(0, 238, 255, .16), transparent 24%),
    radial-gradient(circle at 68% 47%, rgba(100, 150, 255, .11), transparent 28%),
    linear-gradient(180deg, var(--panel2), var(--panel)) !important;
}
.blockchain-node::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(120deg, transparent 10%, rgba(134,221,255,.06) 35%, transparent 60%),
    linear-gradient(70deg, transparent 20%, rgba(134,221,255,.04) 48%, transparent 72%);
  clip-path: polygon(0 38%, 22% 24%, 45% 34%, 63% 14%, 100% 28%, 100% 72%, 63% 86%, 42% 65%, 15% 76%, 0 62%);
  opacity: .75;
  pointer-events: none;
}
.blockchain-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blockchain-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--chain-x, 50%) var(--chain-y, 50%), rgba(134,221,255,.18), transparent 20%);
  opacity: .85;
}
.chain-live-status {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--cyan);
  background: rgba(6,11,22,.52);
  backdrop-filter: blur(10px);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chain-tooltip {
  z-index: 4;
  max-width: min(320px, 78vw);
  white-space: normal;
  line-height: 1.35;
  border-color: rgba(134,221,255,.45) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.34), 0 0 28px rgba(134,221,255,.12);
}

/* Theme simplification and readability hardening */
.theme-switcher .theme-btn[data-theme="digital"] {
  display: none !important;
}
.theme-switcher {
  padding: 4px !important;
}
.theme-switcher::before {
  content: "☾";
  display: grid;
  place-items: center;
  width: 20px;
  color: var(--muted);
}
body[data-theme="light"] .theme-switcher::before {
  content: "☀";
}
.theme-btn {
  display: none !important;
}
.theme-btn[data-theme="dark"],
.theme-btn[data-theme="light"] {
  display: grid !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  place-items: center;
  font-size: 0 !important;
}
.theme-btn[data-theme="dark"]::after {
  content: "☾";
  font-size: 1rem;
}
.theme-btn[data-theme="light"]::after {
  content: "☀";
  font-size: 1rem;
}
body[data-theme="dark"] .theme-btn[data-theme="dark"],
body[data-theme="light"] .theme-btn[data-theme="light"] {
  display: none !important;
}

/* Light mode full readability */
body[data-theme="light"] {
  background: #f6f8ff !important;
  color: #0b1220 !important;
}
body[data-theme="light"] .site-header,
body[data-theme="light"] .header {
  background: rgba(246,248,255,.84) !important;
  border-color: rgba(10,18,32,.12) !important;
}
body[data-theme="light"] .wordmark-symbol,
body[data-theme="light"] .wordmark-icon {
  color: #ffffff !important;
  background: #0b1220 !important;
}
body[data-theme="light"] .eyebrow,
body[data-theme="light"] .hero-tags span,
body[data-theme="light"] .label,
body[data-theme="light"] .info-card,
body[data-theme="light"] .service-card,
body[data-theme="light"] .skill-card,
body[data-theme="light"] .experience-card,
body[data-theme="light"] .timeline-item,
body[data-theme="light"] .story-main,
body[data-theme="light"] .story-points div,
body[data-theme="light"] .contact-form,
body[data-theme="light"] .blockchain-node,
body[data-theme="light"] .contact-list a,
body[data-theme="light"] .contact-list span {
  background: rgba(255,255,255,.88) !important;
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.14) !important;
}
body[data-theme="light"] .desktop-nav a,
body[data-theme="light"] .nav-link,
body[data-theme="light"] .footer-links a,
body[data-theme="light"] .wordmark-text,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] strong,
body[data-theme="light"] .service-card li,
body[data-theme="light"] .story-main blockquote {
  color: #0b1220 !important;
}
body[data-theme="light"] .hero-text,
body[data-theme="light"] .section-head p,
body[data-theme="light"] .service-card p,
body[data-theme="light"] .skill-card p,
body[data-theme="light"] .experience-card p,
body[data-theme="light"] .timeline-item p,
body[data-theme="light"] .story-main p,
body[data-theme="light"] .contact-copy p,
body[data-theme="light"] .info-card span,
body[data-theme="light"] .story-points span,
body[data-theme="light"] .footer-brand p,
body[data-theme="light"] .footer-bottom,
body[data-theme="light"] .copyright {
  color: #435168 !important;
}
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.18) !important;
}
body[data-theme="light"] .orb-node,
body[data-theme="light"] .pop,
body[data-theme="light"] .orb-caption,
body[data-theme="light"] .chain-live-status,
body[data-theme="light"] .chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.14) !important;
}
body[data-theme="light"] .btn.secondary {
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.18) !important;
}
body[data-theme="light"] .footer,
body[data-theme="light"] .site-footer {
  background: #eef3ff !important;
  border-color: rgba(10,18,32,.12) !important;
}

/* Mobile contact centering */
@media (max-width: 760px) {
  .contact-copy {
    text-align: center;
  }
  .contact-list a,
  .contact-list span {
    width: 100%;
  }
  .services-book-cta {
    margin-top: 24px;
  }
  .chain-live-status {
    left: 14px;
    top: 14px;
  }
}


/* =========================================================
   Single Light/Dark Theme Toggle Fix
   One interactive pill at the far right of the header.
   Dark: moon slide. Light: sun slide.
   ========================================================= */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-switcher,
.theme-btn {
  display: none !important;
}

.theme-toggle {
  order: 99;
  position: relative;
  width: 74px;
  height: 42px;
  flex: 0 0 74px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 48%, rgba(255,255,255,.14), transparent 18%),
    linear-gradient(180deg, #15151a, #05060a);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 12px 32px rgba(0,0,0,.32);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.theme-toggle .toggle-orb {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), background .28s ease;
}

.theme-toggle .moon-shape {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #111217;
  position: relative;
  display: block;
  transition: opacity .2s ease, transform .28s ease;
}

.theme-toggle .moon-shape::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
}

.theme-toggle .sun-shape {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111217;
  opacity: 0;
  transform: scale(.55) rotate(-90deg);
  transition: opacity .2s ease, transform .28s ease;
}

.theme-toggle .sun-shape::before {
  content: "";
  position: absolute;
  inset: -7px;
  background:
    linear-gradient(#111217,#111217) center top/2px 5px no-repeat,
    linear-gradient(#111217,#111217) center bottom/2px 5px no-repeat,
    linear-gradient(90deg,#111217,#111217) left center/5px 2px no-repeat,
    linear-gradient(90deg,#111217,#111217) right center/5px 2px no-repeat;
}

body[data-theme="light"] .theme-toggle {
  border-color: rgba(10,18,32,.18);
  background:
    radial-gradient(circle at 72% 50%, rgba(255,214,90,.35), transparent 20%),
    linear-gradient(180deg, #ffffff, #eff4ff);
  box-shadow:
    inset 0 0 0 1px rgba(10,18,32,.05),
    0 10px 28px rgba(10,18,32,.12);
}

body[data-theme="light"] .theme-toggle .toggle-orb {
  transform: translateX(32px);
  background: #111217;
}

body[data-theme="light"] .theme-toggle .moon-shape {
  opacity: 0;
  transform: scale(.55) rotate(90deg);
}

body[data-theme="light"] .theme-toggle .sun-shape {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  background: #ffffff;
}

body[data-theme="light"] .theme-toggle .sun-shape::before {
  background:
    linear-gradient(#ffffff,#ffffff) center top/2px 5px no-repeat,
    linear-gradient(#ffffff,#ffffff) center bottom/2px 5px no-repeat,
    linear-gradient(90deg,#ffffff,#ffffff) left center/5px 2px no-repeat,
    linear-gradient(90deg,#ffffff,#ffffff) right center/5px 2px no-repeat;
}

/* Stronger light theme readability */
body[data-theme="light"] {
  background: #f6f8ff !important;
  color: #0b1220 !important;
}

body[data-theme="light"] #matrixCanvas,
body[data-theme="light"] #codeCanvas {
  opacity: .08 !important;
}

body[data-theme="light"] #networkCanvas,
body[data-theme="light"] #bgCanvas {
  opacity: .32 !important;
}

body[data-theme="light"] .noise,
body[data-theme="light"] .noise-overlay {
  opacity: .035 !important;
}

body[data-theme="light"] .site-header,
body[data-theme="light"] .header {
  background: rgba(246,248,255,.88) !important;
  border-color: rgba(10,18,32,.12) !important;
}

body[data-theme="light"] .wordmark-text,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] strong,
body[data-theme="light"] .desktop-nav a,
body[data-theme="light"] .nav-link,
body[data-theme="light"] .footer-links a,
body[data-theme="light"] .mobile-menu a,
body[data-theme="light"] .service-card li,
body[data-theme="light"] .contact-list a,
body[data-theme="light"] .contact-list span {
  color: #0b1220 !important;
}

body[data-theme="light"] .hero-text,
body[data-theme="light"] .section-head p,
body[data-theme="light"] .service-card p,
body[data-theme="light"] .skill-card p,
body[data-theme="light"] .timeline-item p,
body[data-theme="light"] .experience-card p,
body[data-theme="light"] .story-main p,
body[data-theme="light"] .contact-copy p,
body[data-theme="light"] .info-card span,
body[data-theme="light"] .story-points span,
body[data-theme="light"] .footer-brand p,
body[data-theme="light"] .footer-bottom,
body[data-theme="light"] .copyright {
  color: #40516a !important;
}

body[data-theme="light"] .eyebrow,
body[data-theme="light"] .hero-tags span,
body[data-theme="light"] .label,
body[data-theme="light"] .info-card,
body[data-theme="light"] .service-card,
body[data-theme="light"] .skill-card,
body[data-theme="light"] .timeline-item,
body[data-theme="light"] .experience-card,
body[data-theme="light"] .story-main,
body[data-theme="light"] .story-points div,
body[data-theme="light"] .contact-form,
body[data-theme="light"] .blockchain-node,
body[data-theme="light"] .contact-list a,
body[data-theme="light"] .contact-list span,
body[data-theme="light"] .orb-caption,
body[data-theme="light"] .orb-node,
body[data-theme="light"] .pop {
  background: rgba(255,255,255,.90) !important;
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.15) !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: rgba(10,18,32,.18) !important;
}

body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: #65758c !important;
}

body[data-theme="light"] .btn.secondary {
  color: #0b1220 !important;
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(10,18,32,.18) !important;
}

body[data-theme="light"] .btn.primary,
body[data-theme="light"] .btn.cal,
body[data-theme="light"] .nav-call {
  color: #06111f !important;
}

body[data-theme="light"] .site-footer,
body[data-theme="light"] .footer {
  background: #edf3ff !important;
  border-color: rgba(10,18,32,.12) !important;
}

@media (max-width: 760px) {
  .theme-toggle {
    width: 64px;
    height: 38px;
    flex-basis: 64px;
  }

  .theme-toggle .toggle-orb {
    width: 28px;
    height: 28px;
  }

  body[data-theme="light"] .theme-toggle .toggle-orb {
    transform: translateX(26px);
  }
}


/* =========================================================
   Final fixes: centered orb caption, visible nodes in light mode,
   bluish light-theme tech background, and news source interactions.
   ========================================================= */

/* Center the top node description bar exactly under the orb */
.hero-visual,
.premium-orb,
.tech-orb,
.orb {
  position: relative;
}

.orb-caption {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: min(360px, 92vw) !important;
  margin-inline: auto !important;
  z-index: 20 !important;
}

/* Make the top node circles/cards visible in white theme */
body[data-theme="light"] .premium-orb::before,
body[data-theme="light"] .tech-orb,
body[data-theme="light"] .orb {
  background:
    radial-gradient(circle at 35% 25%, rgba(0, 119, 255, .20), rgba(74, 144, 226, .08) 48%, rgba(255,255,255,.86)) !important;
  border-color: rgba(0, 80, 180, .22) !important;
  box-shadow:
    inset 0 0 70px rgba(0, 119, 255, .12),
    0 28px 90px rgba(20, 70, 140, .14) !important;
}

body[data-theme="light"] .orb-ring,
body[data-theme="light"] .orbit-line,
body[data-theme="light"] .ring-a,
body[data-theme="light"] .ring-b,
body[data-theme="light"] .ring-c,
body[data-theme="light"] .line-a,
body[data-theme="light"] .line-b,
body[data-theme="light"] .line-c {
  border-color: rgba(0, 94, 200, .24) !important;
}

body[data-theme="light"] .orb-node {
  background: linear-gradient(180deg, #ffffff, #e8f2ff) !important;
  color: #071426 !important;
  border: 1px solid rgba(0, 83, 170, .28) !important;
  box-shadow:
    0 12px 32px rgba(0, 70, 160, .18),
    inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

body[data-theme="light"] .orb-node:hover,
body[data-theme="light"] .orb-node.active {
  background: linear-gradient(180deg, #dff2ff, #ffffff) !important;
  border-color: rgba(0, 119, 255, .65) !important;
  box-shadow:
    0 18px 50px rgba(0, 119, 255, .22),
    inset 0 0 0 1px rgba(255,255,255,.9) !important;
}

body[data-theme="light"] .pop {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0, 83, 170, .24) !important;
  box-shadow: 0 14px 36px rgba(0,70,160,.14) !important;
}

body[data-theme="light"] .orb-core {
  background: linear-gradient(180deg, #ffffff, #e7f2ff) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.22) !important;
  box-shadow: 0 20px 60px rgba(0,70,160,.16) !important;
}

body[data-theme="light"] .orb-caption {
  background: rgba(255,255,255,.94) !important;
  color: #0b1220 !important;
  border-color: rgba(0,83,170,.20) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}

/* Bluish interactive light-theme background */
body[data-theme="light"] {
  background:
    radial-gradient(circle at 12% 16%, rgba(0,150,255,.18), transparent 32%),
    radial-gradient(circle at 84% 12%, rgba(70,110,255,.14), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(0,210,255,.14), transparent 36%),
    linear-gradient(135deg, #f7fbff, #eef6ff 48%, #f8fbff) !important;
}

body[data-theme="light"] .ambient,
body[data-theme="light"] .aurora {
  opacity: .74 !important;
  filter: blur(72px) saturate(1.25) !important;
}

body[data-theme="light"] .ambient-a,
body[data-theme="light"] .a1 {
  background: radial-gradient(circle at 18% 14%, rgba(0,140,255,.28), transparent 35%) !important;
}

body[data-theme="light"] .ambient-b,
body[data-theme="light"] .a2 {
  background: radial-gradient(circle at 84% 18%, rgba(79,120,255,.22), transparent 33%) !important;
}

body[data-theme="light"] .ambient-c,
body[data-theme="light"] .a3 {
  background: radial-gradient(circle at 50% 88%, rgba(0,210,255,.18), transparent 38%) !important;
}

body[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(rgba(0,95,180,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,95,180,.085) 1px, transparent 1px) !important;
  opacity: .8 !important;
}

body[data-theme="light"] #networkCanvas,
body[data-theme="light"] #bgCanvas {
  opacity: .55 !important;
  mix-blend-mode: multiply;
}

body[data-theme="light"] #matrixCanvas,
body[data-theme="light"] #codeCanvas {
  opacity: .13 !important;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle, rgba(0,140,255,.18), rgba(0,200,255,.09) 35%, transparent 68%) !important;
  mix-blend-mode: multiply;
}

/* Latest News Pulse blockchain popup behavior */
.chain-live-status {
  text-transform: uppercase;
  letter-spacing: .07em;
}

.chain-tooltip {
  cursor: pointer;
  max-width: min(360px, 78vw) !important;
}

.chain-tooltip::after {
  content: "  ↗";
  color: var(--cyan);
  font-weight: 1000;
}

body[data-theme="light"] .blockchain-node {
  background:
    radial-gradient(circle at 32% 44%, rgba(0, 140, 255, .16), transparent 24%),
    radial-gradient(circle at 68% 47%, rgba(80, 120, 255, .11), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,246,255,.82)) !important;
}

body[data-theme="light"] .chain-live-status,
body[data-theme="light"] .chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.22) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}

/* Small-screen caption safety */
@media (max-width: 760px) {
  .orb-caption {
    bottom: -76px !important;
    width: min(310px, 92vw) !important;
  }
}


/* =========================================================
   Final news + light-theme visual fixes
   - News nodes now open each node's real source, not always CoinGecko
   - Removed square/box look around top circle in light mode
   - Light theme now mirrors dark tech background using soft blue network/canvas
   ========================================================= */

/* Remove square panel feel around the service orb, especially in light mode */
body[data-theme="light"] .hero-visual,
body[data-theme="light"] .premium-orb,
body[data-theme="light"] .tech-orb,
body[data-theme="light"] .orb {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body[data-theme="light"] .premium-orb::before,
body[data-theme="light"] .tech-orb::before,
body[data-theme="light"] .orb::before,
body[data-theme="light"] .premium-orb::after,
body[data-theme="light"] .tech-orb::after,
body[data-theme="light"] .orb::after {
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(0, 120, 255, .26) !important;
}

/* Keep only the circular rings visible, not a box */
body[data-theme="light"] .orb-ring,
body[data-theme="light"] .orbit-line,
body[data-theme="light"] .ring-a,
body[data-theme="light"] .ring-b,
body[data-theme="light"] .ring-c,
body[data-theme="light"] .line-a,
body[data-theme="light"] .line-b,
body[data-theme="light"] .line-c {
  border-color: rgba(0, 115, 210, .34) !important;
  box-shadow: 0 0 28px rgba(0, 140, 255, .10) !important;
}

/* Light theme: same tech/network feeling as dark, but blue and clean */
body[data-theme="light"] {
  background:
    radial-gradient(circle at 20% 18%, rgba(0, 145, 255, .20), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(90, 130, 255, .16), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(0, 210, 255, .14), transparent 38%),
    linear-gradient(135deg, #f8fbff 0%, #edf6ff 48%, #f9fcff 100%) !important;
}

body[data-theme="light"] .ambient,
body[data-theme="light"] .aurora {
  display: block !important;
  opacity: .76 !important;
  filter: blur(76px) saturate(1.25) !important;
}

body[data-theme="light"] .ambient-a,
body[data-theme="light"] .a1 {
  background: radial-gradient(circle at 18% 14%, rgba(0,140,255,.30), transparent 36%) !important;
}

body[data-theme="light"] .ambient-b,
body[data-theme="light"] .a2 {
  background: radial-gradient(circle at 84% 18%, rgba(80,120,255,.22), transparent 34%) !important;
}

body[data-theme="light"] .ambient-c,
body[data-theme="light"] .a3 {
  background: radial-gradient(circle at 50% 88%, rgba(0,210,255,.19), transparent 40%) !important;
}

body[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(rgba(0,90,190,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,90,190,.085) 1px, transparent 1px) !important;
  opacity: .9 !important;
}

body[data-theme="light"] #networkCanvas,
body[data-theme="light"] #bgCanvas {
  opacity: .60 !important;
  mix-blend-mode: multiply !important;
}

body[data-theme="light"] #matrixCanvas,
body[data-theme="light"] #codeCanvas {
  opacity: .13 !important;
  mix-blend-mode: multiply !important;
}

body[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle, rgba(0,140,255,.18), rgba(0,200,255,.09) 36%, transparent 70%) !important;
  mix-blend-mode: multiply !important;
}

/* Light-theme top orb node readability */
body[data-theme="light"] .orb-node {
  background: linear-gradient(180deg, #ffffff, #e9f4ff) !important;
  color: #06111f !important;
  border: 1px solid rgba(0, 100, 190, .30) !important;
  box-shadow: 0 14px 34px rgba(0, 85, 180, .16) !important;
}

body[data-theme="light"] .orb-node:hover,
body[data-theme="light"] .orb-node.active {
  background: linear-gradient(180deg, #dff4ff, #ffffff) !important;
  border-color: rgba(0, 135, 255, .65) !important;
  box-shadow: 0 18px 52px rgba(0, 135, 255, .22) !important;
}

body[data-theme="light"] .pop,
body[data-theme="light"] .orb-caption,
body[data-theme="light"] .orb-core {
  background: rgba(255,255,255,.94) !important;
  color: #06111f !important;
  border-color: rgba(0, 100, 190, .22) !important;
  box-shadow: 0 18px 45px rgba(0, 85, 180, .13) !important;
}


/* =========================================================
   Simple visible Latest News Pulse blockchain visual
   ========================================================= */
.blockchain-section {
  padding-top: 48px;
  padding-bottom: 82px;
}
.blockchain-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: center;
}
.blockchain-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.blockchain-copy p {
  color: var(--muted);
  line-height: 1.75;
}
.blockchain-node {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 28% 42%, rgba(0, 238, 255, .18), transparent 22%),
    radial-gradient(circle at 68% 48%, rgba(80, 140, 255, .12), transparent 26%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow, 0 24px 80px rgba(0,0,0,.35));
}
.blockchain-node::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    linear-gradient(120deg, transparent 8%, rgba(134,221,255,.06) 38%, transparent 68%),
    linear-gradient(70deg, transparent 18%, rgba(134,221,255,.045) 48%, transparent 76%);
  clip-path: polygon(0 38%, 20% 24%, 45% 34%, 63% 14%, 100% 28%, 100% 72%, 63% 86%, 42% 65%, 15% 76%, 0 62%);
  pointer-events: none;
}
.blockchain-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.blockchain-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--chain-x, 42%) var(--chain-y, 48%), rgba(134,221,255,.22), transparent 22%);
  opacity: .85;
}
.chain-live-status {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--cyan);
  background: rgba(6,11,22,.62);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chain-tooltip {
  position: absolute;
  z-index: 4;
  left: 18px;
  top: 58px;
  max-width: min(380px, 78vw);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(134,221,255,.42);
  color: #f7fbff;
  background: rgba(6,11,22,.88);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 30px rgba(134,221,255,.13);
  backdrop-filter: blur(12px);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.38;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.chain-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
body[data-theme="light"] .blockchain-node {
  background:
    radial-gradient(circle at 28% 42%, rgba(0, 140, 255, .18), transparent 22%),
    radial-gradient(circle at 68% 48%, rgba(80, 120, 255, .13), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,246,255,.82)) !important;
  border-color: rgba(0, 100, 190, .18) !important;
}
body[data-theme="light"] .chain-live-status,
body[data-theme="light"] .chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.22) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}
@media (max-width: 980px) {
  .blockchain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .blockchain-node { min-height: 360px; }
  .chain-live-status { left: 14px; top: 14px; }
  .chain-tooltip { left: 14px; top: 54px; }
}


/* =========================================================
   GUARANTEED visible blockchain-style node visual
   Inspired by uploaded connected-node reference image.
   Canvas + reference background + live news hover popups.
   ========================================================= */

.blockchain-section {
  padding-top: 56px !important;
  padding-bottom: 90px !important;
}

.blockchain-grid {
  display: grid !important;
  grid-template-columns: .85fr 1.15fr !important;
  gap: 34px !important;
  align-items: center !important;
}

.blockchain-copy h2 {
  margin: 0 0 12px !important;
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

.blockchain-copy p {
  color: var(--muted) !important;
  line-height: 1.75 !important;
}

.blockchain-node.blockchain-visible {
  position: relative !important;
  display: block !important;
  min-height: 460px !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid var(--line) !important;
  background:
    radial-gradient(circle at 40% 44%, rgba(0, 238, 255, .14), transparent 26%),
    linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  box-shadow: var(--shadow, 0 24px 80px rgba(0,0,0,.35)) !important;
  isolation: isolate !important;
}

.blockchain-reference {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .44 !important;
  filter: saturate(1.1) contrast(1.05) brightness(.82) !important;
  pointer-events: none !important;
}

.blockchain-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: auto !important;
}

.blockchain-glow {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at var(--chain-x, 42%) var(--chain-y, 46%), rgba(0, 235, 255, .30), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 42%, rgba(0,0,0,.18)) !important;
  pointer-events: none !important;
  opacity: .95 !important;
}

.chain-live-status {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  z-index: 4 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(134,221,255,.38) !important;
  color: var(--cyan) !important;
  background: rgba(3, 8, 18, .70) !important;
  backdrop-filter: blur(12px) !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.chain-tooltip {
  position: absolute !important;
  z-index: 5 !important;
  left: 18px !important;
  top: 58px !important;
  max-width: min(390px, 78vw) !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(134,221,255,.50) !important;
  color: #f7fbff !important;
  background: rgba(3, 8, 18, .90) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), 0 0 32px rgba(134,221,255,.15) !important;
  backdrop-filter: blur(14px) !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;
}

.chain-tooltip.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body[data-theme="light"] .blockchain-node.blockchain-visible {
  background:
    radial-gradient(circle at 40% 44%, rgba(0, 135, 255, .18), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(236,246,255,.84)) !important;
  border-color: rgba(0, 100, 190, .20) !important;
  box-shadow: 0 28px 80px rgba(0, 70, 150, .12) !important;
}

body[data-theme="light"] .blockchain-reference {
  opacity: .24 !important;
  filter: saturate(1.15) contrast(1.05) brightness(1.22) !important;
  mix-blend-mode: multiply !important;
}

body[data-theme="light"] .blockchain-glow {
  background:
    radial-gradient(circle at var(--chain-x, 42%) var(--chain-y, 46%), rgba(0, 150, 255, .22), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,.62), transparent 42%, rgba(255,255,255,.25)) !important;
}

body[data-theme="light"] .chain-live-status,
body[data-theme="light"] .chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.24) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}

@media (max-width: 980px) {
  .blockchain-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .blockchain-node.blockchain-visible {
    min-height: 360px !important;
    border-radius: 24px !important;
  }

  .chain-live-status {
    left: 14px !important;
    top: 14px !important;
  }

  .chain-tooltip {
    left: 14px !important;
    top: 54px !important;
    max-width: calc(100% - 28px) !important;
  }
}


/* =========================================================
   FINAL FIX: guaranteed visible blockchain node graph
   No canvas dependency. No website links. Hover only.
   ========================================================= */
.blockchain-section {
  padding-top: 56px !important;
  padding-bottom: 90px !important;
}
.blockchain-grid {
  display: grid !important;
  grid-template-columns: .85fr 1.15fr !important;
  gap: 34px !important;
  align-items: center !important;
}
.blockchain-copy h2 {
  margin: 0 0 12px !important;
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
.blockchain-copy p {
  color: var(--muted) !important;
  line-height: 1.75 !important;
}
.blockchain-node.blockchain-visible {
  position: relative !important;
  display: block !important;
  min-height: 470px !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid rgba(134,221,255,.22) !important;
  background:
    radial-gradient(circle at 34% 44%, rgba(0, 238, 255, .22), transparent 25%),
    radial-gradient(circle at 70% 45%, rgba(90, 130, 255, .13), transparent 30%),
    linear-gradient(180deg, rgba(3,10,18,.94), rgba(2,5,12,.90)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.42), inset 0 0 80px rgba(0,238,255,.06) !important;
  isolation: isolate !important;
}
.node-bg-shape {
  position: absolute;
  z-index: 0;
  opacity: .48;
  background: rgba(0, 210, 255, .10);
  clip-path: polygon(0 35%, 55% 0, 100% 30%, 76% 100%, 12% 80%);
  filter: blur(.2px);
  pointer-events: none;
}
.node-bg-shape.s1 { left: 8%; top: 25%; width: 320px; height: 170px; transform: rotate(-8deg); }
.node-bg-shape.s2 { right: 8%; top: 18%; width: 300px; height: 210px; opacity: .30; transform: rotate(12deg); }
.node-bg-shape.s3 { left: 38%; bottom: 12%; width: 360px; height: 170px; opacity: .22; transform: rotate(-4deg); }
.visible-network-svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
.network-lines line {
  stroke: rgba(190, 248, 255, .32) !important;
  stroke-width: 1.25 !important;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(134,221,255,.22));
  animation: linePulse 4.8s ease-in-out infinite alternate;
}
.news-node {
  position: absolute !important;
  z-index: 3 !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(134,221,255,.12),
    0 0 18px rgba(134,221,255,.85),
    0 0 36px rgba(134,221,255,.35) !important;
  transform: translate(-50%, -50%) !important;
  animation: nodeBlink 2.8s ease-in-out infinite alternate !important;
}
.news-node:hover,
.news-node:focus {
  outline: none !important;
  width: 22px !important;
  height: 22px !important;
  box-shadow:
    0 0 0 8px rgba(134,221,255,.18),
    0 0 28px rgba(255,255,255,.95),
    0 0 60px rgba(134,221,255,.65) !important;
}
.news-node.n-a { left: 4.5%; top: 55.3%; }
.news-node.n-b { left: 12.2%; top: 43.6%; animation-delay: .1s!important; }
.news-node.n-c { left: 15%; top: 63.8%; animation-delay: .2s!important; }
.news-node.n-d { left: 20%; top: 32%; animation-delay: .3s!important; }
.news-node.n-e { left: 24.5%; top: 49%; animation-delay: .4s!important; }
.news-node.n-f { left: 34.5%; top: 25.5%; animation-delay: .5s!important; }
.news-node.n-g { left: 39%; top: 51%; animation-delay: .6s!important; }
.news-node.n-h { left: 52.3%; top: 11%; animation-delay: .7s!important; }
.news-node.n-i { left: 55.5%; top: 64%; animation-delay: .8s!important; }
.news-node.n-j { left: 65.5%; top: 43.6%; animation-delay: .9s!important; }
.news-node.n-k { left: 81.8%; top: 19%; animation-delay: 1s!important; }
.news-node.n-l { left: 84.5%; top: 53.2%; animation-delay: 1.1s!important; }
.chain-live-status {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  z-index: 5 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(134,221,255,.38) !important;
  color: var(--cyan) !important;
  background: rgba(3, 8, 18, .70) !important;
  backdrop-filter: blur(12px) !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
.chain-tooltip {
  position: absolute !important;
  z-index: 6 !important;
  left: 18px !important;
  top: 58px !important;
  max-width: min(420px, 80vw) !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(134,221,255,.50) !important;
  color: #f7fbff !important;
  background: rgba(3, 8, 18, .92) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), 0 0 32px rgba(134,221,255,.15) !important;
  backdrop-filter: blur(14px) !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;
}
.chain-tooltip.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
body[data-theme="light"] .blockchain-node.blockchain-visible {
  background:
    radial-gradient(circle at 34% 44%, rgba(0, 140, 255, .18), transparent 25%),
    radial-gradient(circle at 70% 45%, rgba(90, 130, 255, .13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,246,255,.88)) !important;
  border-color: rgba(0, 100, 190, .22) !important;
  box-shadow: 0 28px 80px rgba(0, 70, 150, .13), inset 0 0 80px rgba(0,140,255,.08) !important;
}
body[data-theme="light"] .node-bg-shape {
  background: rgba(0, 140, 255, .13) !important;
}
body[data-theme="light"] .network-lines line {
  stroke: rgba(0, 80, 170, .32) !important;
}
body[data-theme="light"] .news-node {
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(0,140,255,.15),
    0 0 18px rgba(0,140,255,.68),
    0 0 36px rgba(0,100,190,.26) !important;
}
body[data-theme="light"] .chain-live-status,
body[data-theme="light"] .chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.24) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}
@keyframes nodeBlink {
  from { opacity: .74; scale: .88; }
  to { opacity: 1; scale: 1.08; }
}
@keyframes linePulse {
  from { opacity: .42; }
  to { opacity: .9; }
}
@media (max-width: 980px) {
  .blockchain-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  .blockchain-node.blockchain-visible {
    min-height: 360px !important;
    border-radius: 24px !important;
  }
  .chain-live-status {
    left: 14px !important;
    top: 14px !important;
  }
  .chain-tooltip {
    left: 14px !important;
    top: 54px !important;
    max-width: calc(100% - 28px) !important;
  }
}


/* =========================================================
   FINAL MOVING BLOCKCHAIN NODE VISUAL
   Unique IDs/classes. Fully interactive moving canvas.
   No external links. Hover nodes only.
   ========================================================= */
.live-chain-section {
  padding-top: 58px !important;
  padding-bottom: 94px !important;
}
.live-chain-grid {
  display: grid !important;
  grid-template-columns: .84fr 1.16fr !important;
  gap: 36px !important;
  align-items: center !important;
}
.live-chain-copy h2 {
  margin: 0 0 12px !important;
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
.live-chain-copy p {
  color: var(--muted) !important;
  line-height: 1.75 !important;
}
.live-chain-card {
  position: relative !important;
  display: block !important;
  min-height: 470px !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid rgba(134,221,255,.24) !important;
  background:
    radial-gradient(circle at 33% 46%, rgba(0, 238, 255, .20), transparent 24%),
    radial-gradient(circle at 70% 44%, rgba(90, 130, 255, .13), transparent 30%),
    linear-gradient(180deg, rgba(3,10,18,.96), rgba(2,5,12,.92)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.42), inset 0 0 95px rgba(0,238,255,.07) !important;
  isolation: isolate !important;
}
.live-chain-card::before,
.live-chain-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 210, 255, .08);
  filter: blur(.1px);
}
.live-chain-card::before {
  left: 4%;
  top: 25%;
  width: 54%;
  height: 38%;
  clip-path: polygon(0 40%, 22% 12%, 58% 0, 100% 38%, 73% 100%, 20% 78%);
}
.live-chain-card::after {
  right: 5%;
  top: 15%;
  width: 50%;
  height: 56%;
  opacity: .55;
  clip-path: polygon(0 18%, 62% 0, 100% 26%, 78% 100%, 18% 80%);
}
.live-chain-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.live-chain-glow {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--chain-x, 38%) var(--chain-y, 46%), rgba(0,235,255,.32), transparent 23%),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 45%, rgba(0,0,0,.12)) !important;
  opacity: .95 !important;
}
.live-chain-badge {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  z-index: 4 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(134,221,255,.42) !important;
  color: var(--cyan) !important;
  background: rgba(3, 8, 18, .72) !important;
  backdrop-filter: blur(12px) !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
.live-chain-tooltip {
  position: absolute !important;
  z-index: 5 !important;
  left: 18px !important;
  top: 58px !important;
  max-width: min(420px, 80vw) !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(134,221,255,.52) !important;
  color: #f7fbff !important;
  background: rgba(3, 8, 18, .92) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), 0 0 32px rgba(134,221,255,.16) !important;
  backdrop-filter: blur(14px) !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;
}
.live-chain-tooltip.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
body[data-theme="light"] .live-chain-card {
  background:
    radial-gradient(circle at 33% 46%, rgba(0, 145, 255, .20), transparent 24%),
    radial-gradient(circle at 70% 44%, rgba(80, 120, 255, .13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,246,255,.88)) !important;
  border-color: rgba(0,100,190,.22) !important;
  box-shadow: 0 28px 80px rgba(0,70,150,.13), inset 0 0 95px rgba(0,140,255,.08) !important;
}
body[data-theme="light"] .live-chain-card::before,
body[data-theme="light"] .live-chain-card::after {
  background: rgba(0, 140, 255, .12) !important;
}
body[data-theme="light"] .live-chain-glow {
  background:
    radial-gradient(circle at var(--chain-x, 38%) var(--chain-y, 46%), rgba(0,150,255,.24), transparent 23%),
    linear-gradient(90deg, rgba(255,255,255,.58), transparent 45%, rgba(255,255,255,.18)) !important;
}
body[data-theme="light"] .live-chain-badge,
body[data-theme="light"] .live-chain-tooltip {
  background: rgba(255,255,255,.94) !important;
  color: #071426 !important;
  border-color: rgba(0,83,170,.24) !important;
  box-shadow: 0 18px 45px rgba(0,70,160,.14) !important;
}
@media (max-width: 980px) {
  .live-chain-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  .live-chain-card {
    min-height: 370px !important;
    border-radius: 24px !important;
  }
  .live-chain-badge {
    left: 14px !important;
    top: 14px !important;
  }
  .live-chain-tooltip {
    left: 14px !important;
    top: 54px !important;
    max-width: calc(100% - 28px) !important;
  }
}


/* =========================================================
   Transparent header on scroll + hover reveal
   ========================================================= */
.site-header,
.header {
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, opacity .28s ease, transform .28s ease, backdrop-filter .28s ease !important;
}
body.header-transparent .site-header,
body.header-transparent .header {
  background: rgba(2, 3, 10, .12) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  opacity: .38;
}
body.header-transparent .site-header:hover,
body.header-transparent .header:hover,
body.header-menu-open .site-header,
body.header-menu-open .header {
  background: rgba(2, 3, 10, .78) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 14px 55px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(22px) !important;
  opacity: 1;
}
body[data-theme="light"].header-transparent .site-header,
body[data-theme="light"].header-transparent .header {
  background: rgba(246,248,255,.16) !important;
  border-color: transparent !important;
}
body[data-theme="light"].header-transparent .site-header:hover,
body[data-theme="light"].header-transparent .header:hover,
body[data-theme="light"].header-menu-open .site-header,
body[data-theme="light"].header-menu-open .header {
  background: rgba(246,248,255,.88) !important;
  border-color: rgba(10,18,32,.12) !important;
}

/* Keep header fully clickable even when transparent */
.site-header *,
.header * {
  pointer-events: auto !important;
}

/* =========================================================
   PC Builds Portfolio Slider
   ========================================================= */
.pc-portfolio-section {
  padding-top: 88px;
  padding-bottom: 96px;
}
.pc-portfolio-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  align-items: center;
}
.pc-portfolio-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.pc-portfolio-copy p {
  color: var(--muted);
  line-height: 1.75;
}
.pc-slider-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  min-height: 360px;
  background:
    radial-gradient(circle at 28% 35%, rgba(134,221,255,.12), transparent 28%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow, 0 24px 80px rgba(0,0,0,.35));
}
.pc-slider {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.pc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12%) scale(.96);
  transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
}
.pc-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}
.pc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.04) brightness(.88);
}
.pc-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.64), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,.58), transparent 55%);
  pointer-events: none;
}
.pc-slide-caption {
  position: absolute;
  left: 22px;
  right: 96px;
  bottom: 22px;
  z-index: 3;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(4, 8, 18, .66);
  backdrop-filter: blur(14px);
}
.pc-slide-caption strong {
  display: block;
  color: #fff;
  font-size: 1.08rem;
  margin-bottom: 5px;
}
.pc-slide-caption span {
  color: #d7e8f8;
  line-height: 1.55;
  font-size: .92rem;
}
.pc-slider-btn {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(4, 8, 18, .62);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform .2s ease, background .2s ease;
}
.pc-slider-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: rgba(134,221,255,.18);
}
.pc-slider-btn.prev { left: 16px; }
.pc-slider-btn.next { right: 16px; }
.pc-slider-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.pc-slider-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255,255,255,.36);
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
}
.pc-slider-dots button.active {
  width: 26px;
  background: var(--cyan);
}
body[data-theme="light"] .pc-slider-wrap {
  background:
    radial-gradient(circle at 28% 35%, rgba(0,140,255,.14), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(236,246,255,.82)) !important;
  border-color: rgba(0,100,190,.16) !important;
  box-shadow: 0 28px 80px rgba(0,70,150,.12) !important;
}
body[data-theme="light"] .pc-slide-caption {
  background: rgba(255,255,255,.74);
  border-color: rgba(0,100,190,.16);
}
body[data-theme="light"] .pc-slide-caption strong {
  color: #06111f !important;
}
body[data-theme="light"] .pc-slide-caption span {
  color: #40516a !important;
}
@media (max-width: 980px) {
  .pc-portfolio-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .pc-slider {
    height: 330px;
  }
  .pc-slide-caption {
    left: 14px;
    right: 14px;
    bottom: 48px;
    padding: 13px 14px;
  }
  .pc-slider-btn {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
}


/* =========================================================
   Restore hero/orb position + Founder card ONLY at bottom
   ========================================================= */
.hero-grid {
  align-items: center !important;
}
.hero-visual {
  align-self: center !important;
  margin-top: 0 !important;
}
.orb-caption {
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

/* Founder card at bottom only */
.founder-bottom-section {
  padding-top: 22px !important;
  padding-bottom: 34px !important;
}
.founder-bottom-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.founder-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
  max-width: min(100%, 360px);
}
.founder-photo-wrap {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  overflow: hidden;
  flex: 0 0 84px;
  border: 2px solid rgba(120, 220, 255, 0.30);
  box-shadow: 0 0 0 4px rgba(120,220,255,0.08), 0 10px 24px rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.12);
}
.founder-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 72% 28%;
}
.founder-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.founder-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  margin-bottom: 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(120,220,255,0.10);
  border: 1px solid rgba(120,220,255,0.18);
}
.founder-copy strong {
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--text);
}
.founder-role {
  margin-top: 5px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
}
body[data-theme="light"] .founder-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(239,247,255,0.90));
  border-color: rgba(0,100,190,0.12);
  box-shadow: 0 16px 32px rgba(17, 76, 135, 0.12);
}
body[data-theme="light"] .founder-photo-wrap {
  border-color: rgba(0,100,190,0.18);
  box-shadow: 0 0 0 4px rgba(0,140,255,0.06), 0 10px 24px rgba(17,76,135,0.14);
}
@media (max-width: 980px) {
  .hero-grid {
    align-items: center !important;
  }
}
@media (max-width: 640px) {
  .founder-card {
    gap: 12px;
    padding: 10px;
    border-radius: 20px;
    max-width: 100%;
  }
  .founder-photo-wrap {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
    border-radius: 18px;
  }
  .founder-copy strong {
    font-size: 0.96rem;
  }
  .founder-role {
    font-size: 0.79rem;
  }
}


/* Live Pulse update fix */
.pulse-refresh-btn{position:absolute;top:18px;right:18px;z-index:8;width:36px;height:36px;border-radius:999px;border:1px solid rgba(134,221,255,.35);background:rgba(3,8,18,.70);color:var(--cyan);cursor:pointer;font-weight:1000;font-size:1rem;backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease}
.pulse-refresh-btn:hover{transform:rotate(90deg) scale(1.05);background:rgba(134,221,255,.12)}
.pulse-updated-at{position:absolute;top:60px;right:18px;z-index:8;padding:6px 9px;border-radius:999px;border:1px solid rgba(134,221,255,.22);background:rgba(3,8,18,.60);color:var(--muted);font-size:.68rem;font-weight:800;backdrop-filter:blur(12px)}
body[data-theme="light"] .pulse-refresh-btn,body[data-theme="light"] .pulse-updated-at{background:rgba(255,255,255,.92)!important;color:#071426!important;border-color:rgba(0,83,170,.22)!important}
@media (max-width:760px){.pulse-refresh-btn{top:14px;right:14px}.pulse-updated-at{top:54px;right:14px}}


/* Founder popup modal */
.founder-card-bottom {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  appearance: none;
}
.founder-card-bottom:hover {
  transform: translateY(-3px);
  border-color: rgba(134,221,255,.35);
  box-shadow: 0 18px 46px rgba(0,0,0,.24), 0 0 34px rgba(134,221,255,.08);
}
.founder-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.founder-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.founder-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, .62);
  backdrop-filter: blur(16px);
}
.founder-modal-card {
  position: relative;
  width: min(92vw, 460px);
  border-radius: 34px;
  border: 1px solid rgba(134,221,255,.25);
  background: linear-gradient(180deg, rgba(13, 22, 40, .96), rgba(5, 9, 20, .96));
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 50px rgba(134,221,255,.12);
  overflow: hidden;
  transform: scale(.84) translateY(28px);
  opacity: 0;
  transition: transform .34s cubic-bezier(.2,.9,.2,1), opacity .26s ease;
}
.founder-modal.is-open .founder-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.founder-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: white;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.founder-modal-close:hover {
  background: rgba(134,221,255,.16);
}
.founder-modal-image-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}
.founder-modal-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 72% 28%;
}
.founder-modal-copy {
  padding: 20px 22px 24px;
}
.founder-modal-copy span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(134,221,255,.22);
  background: rgba(134,221,255,.10);
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.founder-modal-copy h3 {
  margin: 12px 0 4px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--text);
}
.founder-modal-copy p {
  margin: 0;
  color: var(--muted);
}
body.founder-modal-open {
  overflow: hidden;
}
body[data-theme="light"] .founder-modal-backdrop {
  background: rgba(238, 246, 255, .58);
}
body[data-theme="light"] .founder-modal-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,246,255,.98));
  border-color: rgba(0,100,190,.16);
  box-shadow: 0 28px 90px rgba(17,76,135,.20), 0 0 50px rgba(0,130,255,.10);
}
body[data-theme="light"] .founder-modal-close {
  background: rgba(255,255,255,.78);
  color: #071426;
  border-color: rgba(0,83,170,.16);
}
@media (max-width: 520px) {
  .founder-modal {
    padding: 14px;
  }
  .founder-modal-card {
    width: min(94vw, 390px);
    border-radius: 26px;
  }
  .founder-modal-close {
    width: 36px;
    height: 36px;
  }
}


/* Larger founder popup override */
.founder-modal-card {
  width: min(94vw, 780px) !important;
  max-height: 92vh !important;
  border-radius: 36px !important;
}
.founder-modal-image-wrap {
  width: 100% !important;
  height: min(72vh, 720px) !important;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at 50% 20%, rgba(134,221,255,.10), rgba(0,0,0,.26)) !important;
}
.founder-modal-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 10px !important;
}
.founder-modal-copy {
  padding: 18px 26px 24px !important;
}
@media (max-width: 760px) {
  .founder-modal-card {
    width: min(96vw, 560px) !important;
    max-height: 92vh !important;
    border-radius: 28px !important;
  }
  .founder-modal-image-wrap {
    height: min(68vh, 560px) !important;
  }
  .founder-modal-image {
    padding: 7px !important;
  }
}
@media (max-width: 420px) {
  .founder-modal {
    padding: 10px !important;
  }
  .founder-modal-image-wrap {
    height: 64vh !important;
  }
}