/* Dark graphite, electric blue light, and the existing red BullDev identity. */
.header-band,.hero-band{background:#080b12;color:#f5f7ff}
.header-band{position:relative;z-index:2}
.header-band .brand{color:#f5f7ff}
.header-band .site-header nav{color:#c8d2e5}
.header-band .site-header nav a:hover{color:#8dbaff}
.header-band .header-note{color:#95a5bf}
.header-cta{display:inline-flex;align-items:center;gap:12px;padding-block:12px;white-space:nowrap}
.header-cta .icon{width:18px;height:18px}
.header-cta:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.header-cta{display:none}}
.header-band a:focus-visible,.hero-band a:focus-visible{outline-color:#8dbaff}
.hero-band{position:relative;isolation:isolate;overflow:hidden}
.hero-band::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 48% 65% at 50% 27%,#080b12 0%,#080b12cc 48%,#080b1200 100%);pointer-events:none}
.hero-band::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#162746,#3b6abb 65%,#101b2d);pointer-events:none}
.hero-band .hero{position:relative;z-index:2;display:block;min-height:620px;padding-block:95px 100px;gap:0;margin-block:0;align-items:start;text-align:center}
.hero-band .hero h1{font-size:clamp(62px,5.5vw,88px);line-height:1.04;letter-spacing:-.04em;max-width:1060px;color:#f5f7ff;margin-inline:auto}
.hero-band .hero-copy{display:flex;justify-content:center;justify-self:center;align-items:center;gap:38px;width:100%;max-width:750px;margin:34px auto 0;padding:0;text-align:left}
.hero-band .hero-copy>p{font-size:18px;line-height:1.65;color:#b8c5dc;letter-spacing:-.2px}
.hero-band .hero .button{margin:0;flex-shrink:0;min-height:56px;gap:30px;background:#d92b21;color:#fff}
.hero-band .hero .button:hover{background:#bd2019}
/* Keep the sculpture inside a feathered stage, clear of the navigation. */
.hero-art{position:absolute;inset:0;z-index:0;opacity:.86;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 20px,#000 112px,#000 calc(100% - 112px),transparent 100%)}
.hero-art img{position:absolute;left:50%;top:24px;display:block;width:clamp(1120px,94vw,1240px);max-width:none;height:auto;transform:translateX(-50%);mix-blend-mode:screen;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.hero-circuits{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.circuit-rail{stroke:#263a59;stroke-width:1;opacity:.7}
.circuit-lit{stroke:url(#circuit-blue);stroke-width:1.5;filter:drop-shadow(0 0 5px #3579ff80)}
.circuit-warm{stroke:url(#circuit-red);stroke-width:1.5}
.circuit-ports{stroke:#77b7ff;stroke-width:1.5;fill:#0b1424}
.work-section{padding-top:65px}
/* The four service groups keep their reading order on a dark surface. */
.services-section{position:relative;isolation:isolate;overflow:hidden;background:#0a0e18;color:#f3f6ff}
.services-section::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 0%,#15346b66,transparent 68%);pointer-events:none}
.services-intro>p{color:#c4cee0}
.services-intro>.services-experience{color:#96a8c6}
.services-list article{border-top-color:#29364c}
.services-list p{color:#b9c6dd}
.services-list .web3-service{position:relative;background:#141e33;border:1px solid #324b76;border-radius:14px;padding:25px 24px;margin-top:1px}
.services-list .web3-service::after{content:'';position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,#80adff,transparent);box-shadow:0 2px 16px #3c80ff66;pointer-events:none}
.services-list .web3-service h3{color:#a7c7ff}
/* A connecting joint and a real diagram carry the integration idea beyond the hero. */
.services-art{width:100%;max-width:560px;margin:25px 0 0}
.systems-visual{position:relative;width:100%;margin:32px 0 0;isolation:isolate}
.systems-sculpture{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 73% 62% at 50% 50%,#000 48%,transparent 100%)}
.systems-map{position:relative;height:120px;margin-top:0}
.systems-map>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1}
.systems-track{stroke:#2d4264}
.systems-signal{stroke:#518efe;filter:drop-shadow(0 0 4px #367aff70)}
.system-node{position:absolute;display:grid;place-items:center;font-size:12px;font-weight:500;line-height:1.25;white-space:nowrap;color:#c3d2ea;background:#0a0e18;padding:8px 12px;border:1px solid #2e456b;border-radius:6px}
.node-app{left:0;top:11px}.node-web3{left:0;top:75px}.node-crm{right:0;top:11px}.node-services{right:0;top:75px}
.node-api{left:41.5%;top:43px;transform:translateX(-50%);padding:10px 15px;border-color:#689dff;color:#eef5ff;background:#13213a;box-shadow:0 0 22px #397eff26}
.systems-visual figcaption{font-size:14px;color:#95a9ca;line-height:1.5;margin-top:10px}
/* The glowing rail communicates the actual sequence: understand, build, evolve. */
.about-section{--ink:#f2f5ff;--secondary:#b5c3dc;--paper:#111a2b;--accent:#8ab9ff;background:#080d17;color:var(--ink);position:relative;isolation:isolate;overflow:hidden}
.about-section::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 0%,#183d7955,transparent 65%);pointer-events:none}
.about-proof{border:1px solid #2b3c5b}
.about-products>div+div{border-color:#2b3c5b}
.about-products>div:first-child h4{color:#ff977c}
.about-products>div:last-child h4{color:#9cc1ff}
.about-proof-heading>a:focus-visible{outline-color:#8ab9ff}
.about-steps{position:relative}
.about-steps::before{content:'';position:absolute;top:0;left:10px;right:0;height:1px;background:linear-gradient(90deg,#2660cd,#8cbcff 52%,#3e76d8);box-shadow:0 2px 15px #2872ff88;pointer-events:none}
.about-steps>li{position:relative;border-top:0;padding-top:27px}
.about-steps>li::before{content:'';position:absolute;top:-3px;left:9px;width:7px;height:7px;border-radius:50%;background:#9ccfff;box-shadow:0 0 13px #529cffcc}
.about-steps ul>li::marker{color:#8cafec}
.about-step-number{color:#8dbaff}
@media(min-width:1600px){.hero-band .hero{min-height:640px;padding-top:105px}}
@media(max-width:1200px){
  .hero-band .hero{min-height:590px;padding-block:85px 100px}
  .hero-band .hero h1{font-size:clamp(58px,6vw,72px);max-width:820px}
  .hero-band .hero-copy{gap:30px;margin:33px auto 0;max-width:660px}
  .hero-band .hero-copy>p{font-size:16px}
  .hero-band .hero .button{min-height:53px;gap:23px;font-size:14px}
  .services-list .web3-service{padding:24px}
}
@media(max-width:900px){
  .hero-band .hero{min-height:560px;padding-block:60px 95px}
  .hero-band .hero h1{font-size:clamp(52px,7.8vw,70px);max-width:none}
  .hero-band .hero-copy{justify-content:center;gap:30px;margin:30px auto 0;max-width:none}
  .hero-art{opacity:.8}
  .hero-art img{width:1120px;top:24px}
  .hero-circuits{opacity:.6}
  .services-art{margin-top:20px}
  .systems-visual{margin-top:25px}
  .systems-sculpture{max-height:210px}
  .system-node{font-size:10px;padding:7px 8px}
  .work-section{padding-top:52px}
}
@media(max-width:620px){
  .hero-band .hero{min-height:530px;padding-block:58px 85px}
  .hero-band .hero h1{font-size:clamp(34px,9.65vw,54px);line-height:1.08}
  .hero-band .hero-copy{display:block;margin:24px auto 0;text-align:center}
  .hero-band .hero-copy>p{font-size:16px;line-height:1.65;text-align:center}
  .hero-band .hero .button{margin-top:23px;min-height:53px;gap:28px}
  .hero-art{mask-image:linear-gradient(to bottom,transparent 28px,#000 128px,#000 calc(100% - 96px),transparent 100%)}
  .hero-art img{width:900px;top:40px}
  .hero-circuits{display:none}
  .work-section{padding-top:44px}
  .services-list .web3-service{padding:23px 21px;margin-top:0}
  .services-art{max-width:440px;margin:18px auto 0}
  .systems-visual{max-width:440px;margin:28px auto 0}
  .systems-sculpture{max-height:210px}
  .systems-map{margin-top:0;height:108px}
  .node-app,.node-crm{top:9px}.node-web3,.node-services{top:67px}.node-api{top:39px}
  .systems-visual figcaption{font-size:12px;margin-top:8px}
  .about-steps::before{top:0;bottom:0;left:12px;right:auto;width:1px;height:auto;background:linear-gradient(#67a0ff,#284b82);box-shadow:1px 0 12px #2872ff55}
  .about-steps>li{padding-top:0}
  .about-steps>li::before{display:none}
  .about-step-number{position:relative;z-index:1;align-self:start;background:#080d17;padding-block:2px}
}
@media(max-width:360px){.hero-band .hero{min-height:510px}.hero-band .hero h1{font-size:9.65vw}.hero-art img{width:840px;top:40px}.hero-band .hero-copy>p{font-size:15px}}