/* Hero section: premium dark developer workspace, inspired by the approved reference. */
.hero-section-scope{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 42px;background:#05080e;color:#fff;min-height:760px}
.hero-section-scope:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 45%,rgba(30,82,180,.24),transparent 34%),radial-gradient(circle at 20% 35%,rgba(15,54,120,.20),transparent 32%),linear-gradient(135deg,#04070b 0%,#07111f 52%,#03070c 100%);z-index:-3}
.hero-section-scope:after{content:"";position:absolute;inset:0;opacity:.35;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1}.hero-glow-one{width:420px;height:420px;background:rgba(28,86,255,.12);right:8%;top:14%}.hero-glow-two{width:320px;height:320px;background:rgba(0,184,255,.08);left:10%;bottom:12%}
.hero-section-scope .hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);gap:62px;align-items:center;position:relative;z-index:2}
.hero-copy-col{padding-top:22px}.hero-eyebrow{display:flex;align-items:center;gap:11px;color:#d9e2f1;letter-spacing:2px;font-size:12px;font-weight:800;text-transform:uppercase}.hero-eyebrow span{width:8px;height:8px;border-radius:50%;background:#2e7bff;box-shadow:0 0 14px rgba(46,123,255,.9)}
.hero-section-scope h1{font-size:clamp(48px,5vw,78px);line-height:1.04;letter-spacing:-3.5px;margin:20px 0 10px;color:#fff;max-width:720px}.hero-section-scope h1 span{color:#2d78ff;background:linear-gradient(90deg,#2f7bff,#6ea7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-role{font-size:30px;line-height:1.1;font-weight:800;color:#f7f9fc;margin-bottom:18px}.hero-section-scope .hero-copy{font-size:18px;line-height:1.6;color:#aeb9ca;max-width:620px;margin:0}.hero-section-scope .hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.hero-section-scope .hero-btn-light{background:#fff;color:#101827;border:1px solid #fff;padding:15px 25px}.hero-section-scope .hero-btn-light:hover{background:#eaf1ff;color:#0d55d9}.hero-section-scope .hero-btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34);padding:15px 25px}.hero-section-scope .hero-btn-outline:hover{background:rgba(255,255,255,.08);border-color:#4c88ff}
.hero-tech-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.hero-tech-mini span{display:inline-flex;align-items:center;gap:7px;color:#91a0b5;font-size:12px;font-weight:700}.hero-tech-mini i{color:#4c8dff}
.hero-code-col{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center}
.hero-image-wrap{width:min(600px,100%);border-radius:24px;overflow:hidden;border:1px solid rgba(104,134,180,.28);box-shadow:0 28px 80px rgba(0,0,0,.52);aspect-ratio:4/3;background:#0c1119}
.hero-image-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.code-window{width:min(650px,100%);border:1px solid rgba(104,134,180,.28);border-radius:18px;background:#0c1119;box-shadow:0 28px 80px rgba(0,0,0,.52),0 0 45px rgba(26,84,180,.13);overflow:hidden;transform:perspective(1200px) rotateY(-4deg);transition:transform .45s ease,box-shadow .45s ease}.code-window:hover{transform:perspective(1200px) rotateY(0deg) translateY(-4px);box-shadow:0 34px 95px rgba(0,0,0,.58),0 0 55px rgba(26,84,180,.20)}
.code-window-top{height:54px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #1c2634;background:#111720}.window-dots{display:flex;gap:7px;margin-right:10px}.window-dots b{width:11px;height:11px;border-radius:50%;display:block;background:#ff5f56}.window-dots b:nth-child(2){background:#ffbd2e}.window-dots b:nth-child(3){background:#27c93f}.code-tab{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;border-radius:8px;color:#7e899a;font-size:11px;font-weight:700}.code-tab.active{background:#182130;color:#e5ebf5}.code-tab.active i{color:#6d9fff}.code-tools{margin-left:auto;display:flex;align-items:center;gap:14px;color:#738096;font-size:12px}.code-tools strong{color:#d9e1ed;font-size:11px;border:1px solid #293546;padding:5px 8px;border-radius:6px}
.code-editor{display:grid;grid-template-columns:52px 1fr;min-height:380px;background:#0b1017}.code-lines{padding:20px 10px 20px 0;text-align:right;border-right:1px solid #1b2532;color:#455268;font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.code-editor pre{margin:0;padding:20px 20px 18px;color:#cdd7e6;font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre-wrap;overflow:auto}.syntax-purple{color:#c792ea}.syntax-blue{color:#82aaff}.syntax-string{color:#c3e88d}.syntax-variable{color:#f78c6c}.syntax-comment{color:#697588}.typing-cursor{display:inline-block;width:7px;height:15px;background:#4e8bff;vertical-align:-2px;animation:blink .9s steps(1) infinite}.code-window-bottom{height:40px;padding:0 14px;display:flex;align-items:center;gap:18px;border-top:1px solid #1c2634;color:#7c889a;font-size:10px}.code-window-bottom .code-success{color:#49d98b}.code-window-bottom strong{margin-left:auto;color:#b5c0d1;font-size:10px}
.hero-float-badge {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  z-index: 5;
  transition: transform 0.3s ease;
}
.hero-float-wp {
  left: -22px;
  top: 45%;
  width: 52px;
  height: 52px;
  background: #1173eb;
  color: #fff;
  font-size: 26px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.hero-float-cloud {
  right: -16px;
  top: 18%;
  width: 44px;
  height: 44px;
  background: #0f62fe;
  color: #fff;
  font-size: 18px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.hero-float-woo {
  right: -24px;
  bottom: 22%;
  width: 54px;
  height: 54px;
  background: #7f54b3;
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.hero-stats {
  position: relative;
  z-index: 4;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(100, 132, 180, 0.28);
  border-radius: 20px;
  background: rgba(8, 15, 25, 0.68);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.hero-stat {
  padding: 20px 24px;
  border-right: 1px solid rgba(100, 132, 180, 0.2);
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-stat:last-child {
  border-right: 0;
}
.hero-stat-icon {
  font-size: 26px;
  color: #60a5fa;
  flex: 0 0 auto;
}
.hero-stat strong {
  display: block;
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
}
.hero-stat span {
  display: block;
  margin-top: 3px;
  color: #8da2bd;
  font-size: 12.5px;
}
@keyframes blink{0%,45%{opacity:1}46%,100%{opacity:0}}
@media(max-width:1100px){.hero-section-scope .hero-grid{grid-template-columns:1fr;gap:42px}.hero-copy-col{max-width:760px}.hero-code-col{min-height:auto;padding-right:0}.hero-code-note{right:5%}.hero-skill-stack{right:0}.hero-section-scope{padding-top:120px}.hero-stats{margin-top:38px}}
@media(max-width:900px){.hero-section-scope{padding:108px 0 28px;min-height:auto}.hero-section-scope .hero-grid{gap:34px}.hero-section-scope h1{font-size:clamp(42px,10vw,62px);letter-spacing:-2.5px}.hero-role{font-size:24px}.hero-section-scope .hero-copy{font-size:16px}.hero-code-col{padding-right:0}.code-window{transform:none}.hero-skill-stack{position:relative;right:auto;top:auto;display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px}.hero-skill{width:calc(50% - 6px)}.hero-code-note{right:8px;top:-28px}.hero-stats{grid-template-columns:repeat(2,1fr)}.hero-stat:nth-child(2){border-right:0}.hero-stat:nth-child(-n+2){border-bottom:1px solid rgba(100,132,180,.2)}}
@media(max-width:600px){.hero-section-scope{padding-top:92px}.hero-section-scope h1{font-size:42px;line-height:1.02}.hero-role{font-size:21px}.hero-section-scope .hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-section-scope .hero-btn-light,.hero-section-scope .hero-btn-outline{padding:13px 12px;font-size:12px}.hero-tech-mini{gap:12px}.hero-tech-mini span{font-size:10px}.code-window-top{height:48px;padding:0 9px}.code-tab{font-size:9px;padding:0 8px}.code-tab:nth-of-type(3),.code-tools i{display:none}.code-editor{grid-template-columns:38px 1fr;min-height:320px}.code-lines{font-size:9px}.code-editor pre{padding:14px 12px;font-size:9px;line-height:1.85}.code-window-bottom{gap:8px;font-size:8px}.code-window-bottom span:nth-child(3),.code-window-bottom strong{display:none}.hero-skill{width:calc(50% - 6px);padding:10px}.hero-skill strong{font-size:10px}.hero-skill small{font-size:8px}.hero-skill i{width:32px;height:32px;font-size:15px}.hero-stats{grid-template-columns:1fr 1fr}.hero-stat{padding:15px 12px}.hero-stat strong{font-size:21px}.hero-stat span{font-size:9px}}

/* Live coding animation */
.hero-section-scope .code-editor pre{position:relative;min-height:380px;max-height:380px;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.hero-section-scope .code-editor pre code{display:block;min-height:100%;white-space:pre-wrap}
.hero-section-scope .typing-cursor{position:absolute;display:inline-block;width:7px;height:17px;margin-left:2px;background:#4e8bff;box-shadow:0 0 12px rgba(78,139,255,.8);animation:heroCursorBlink .85s steps(1) infinite}
.hero-section-scope .code-lines{overflow:hidden}
.hero-section-scope .code-lines span{display:block;height:22.8px}
@keyframes heroCursorBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(max-width:600px){.hero-section-scope .code-editor pre{min-height:320px;max-height:320px}.hero-section-scope .typing-cursor{height:13px;width:5px}.hero-section-scope .code-lines span{height:16.65px}}