:root {
  --bg: #07111f;
  --bg-soft: #0b192b;
  --panel: rgba(14, 31, 51, .76);
  --panel-solid: #0d1d30;
  --line: rgba(166, 194, 222, .16);
  --text: #f3f7fb;
  --muted: #9db0c4;
  --cyan: #20e6c3;
  --cyan-soft: rgba(32, 230, 195, .12);
  --orange: #ff8a3d;
  --max: 1240px;
  --radius: 26px;
  --shadow: 0 35px 80px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--cyan); color: #031612; }

.page-grid { position: fixed; inset: 0; pointer-events: none; z-index: -2; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0, transparent 80%); }
body::before { content: ""; position: fixed; width: 700px; height: 700px; border-radius: 50%; top: -350px; right: -180px; background: radial-gradient(circle, rgba(32,230,195,.13), transparent 67%); pointer-events: none; z-index: -1; }
.section-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header { width: min(calc(100% - 40px), var(--max)); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--cyan); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; letter-spacing: .04em; }
.brand-copy strong { font-size: 1rem; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: .9rem; color: #c7d3df; }
.main-nav a { transition: color .2s; }
.main-nav a:hover { color: var(--cyan); }
.nav-cta { border: 1px solid var(--line); padding: 11px 18px; border-radius: 999px; background: rgba(255,255,255,.03); }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }
.menu-toggle span { display: block; width: 25px; height: 2px; background: var(--text); margin: 5px 0; transition: .25s; }

.hero { min-height: 720px; padding: 70px 0 95px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; }
.eyebrow, .section-kicker { color: var(--cyan); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; background: var(--cyan-soft); border: 1px solid rgba(32,230,195,.18); border-radius: 999px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(32,230,195,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(32,230,195,0); } 100% { box-shadow: 0 0 0 0 rgba(32,230,195,0); } }
.hero h1 { font-size: clamp(3.2rem, 6.5vw, 6.5rem); line-height: .94; letter-spacing: -.065em; margin: 28px 0; max-width: 760px; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--cyan); text-shadow: 0 0 35px rgba(32,230,195,.1); }
.hero-lead { max-width: 650px; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.23rem); }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.button { min-height: 52px; padding: 0 23px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border-radius: 13px; border: 1px solid transparent; font-weight: 750; transition: transform .2s, box-shadow .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #03201a; background: var(--cyan); box-shadow: 0 14px 35px rgba(32,230,195,.18); }
.button-primary:hover { box-shadow: 0 18px 42px rgba(32,230,195,.28); }
.button-ghost { background: rgba(255,255,255,.035); border-color: var(--line); }
.button-ghost:hover { border-color: rgba(32,230,195,.4); }
.hero-metrics { margin-top: 45px; display: flex; align-items: stretch; gap: 0; }
.hero-metrics div { padding: 0 27px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.hero-metrics div:first-child { padding-left: 0; border-left: 0; }
.hero-metrics strong { color: var(--cyan); letter-spacing: .08em; font-size: .85rem; }
.hero-metrics span { color: var(--muted); font-size: .74rem; white-space: nowrap; }

.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; perspective: 1200px; }
.pcb-card { width: min(92%, 520px); aspect-ratio: 1.38; position: relative; border: 1px solid rgba(32,230,195,.26); border-radius: 28px; background: linear-gradient(145deg, rgba(18,46,55,.96), rgba(5,22,31,.98)); box-shadow: var(--shadow), inset 0 0 50px rgba(32,230,195,.035); transform: rotateX(57deg) rotateZ(-30deg); overflow: hidden; animation: cardFloat 6s ease-in-out infinite; }
@keyframes cardFloat { 50% { transform: rotateX(54deg) rotateZ(-27deg) translateY(-8px); } }
.pcb-card::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(32,230,195,.13); border-radius: 20px; }
.pcb-topline { position: absolute; top: 27px; left: 31px; right: 31px; display: flex; justify-content: space-between; color: rgba(144,255,234,.54); font: 700 .58rem/1 monospace; letter-spacing: .12em; }
.chip { position: absolute; left: 50%; top: 50%; width: 150px; height: 120px; transform: translate(-50%,-50%); border-radius: 12px; background: linear-gradient(145deg,#152a34,#07131b); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 15px 25px rgba(0,0,0,.42), inset 0 0 20px rgba(255,255,255,.025); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chip small { font: 600 .64rem monospace; color: var(--muted); }
.chip strong { margin-top: 6px; font: 700 .9rem monospace; letter-spacing: .11em; color: #cceee8; }
.chip i { position: absolute; width: 6px; height: 14px; background: #a3adac; top: -10px; box-shadow: 18px 0 #a3adac,36px 0 #a3adac,54px 0 #a3adac,72px 0 #a3adac,90px 0 #a3adac,108px 0 #a3adac,126px 0 #a3adac; }
.chip i:nth-of-type(2) { top: auto; bottom: -10px; }
.chip i:nth-of-type(3) { top: 14px; left: -10px; transform: rotate(90deg); box-shadow: 18px 0 #a3adac,36px 0 #a3adac,54px 0 #a3adac,72px 0 #a3adac,90px 0 #a3adac; }
.chip i:nth-of-type(4) { top: 14px; left: auto; right: -10px; transform: rotate(90deg); box-shadow: 18px 0 #a3adac,36px 0 #a3adac,54px 0 #a3adac,72px 0 #a3adac,90px 0 #a3adac; }
.power-stage { position: absolute; right: 35px; top: 65px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.power-stage b { width: 34px; height: 24px; border-radius: 4px; display: grid; place-items: center; background: #111d24; color: #71838c; font: 600 .5rem monospace; border: 1px solid rgba(255,255,255,.08); }
.terminals { position: absolute; bottom: 33px; left: 35px; display: flex; gap: 9px; }
.terminals i { width: 18px; height: 28px; border-radius: 3px; background: linear-gradient(90deg,#486e6b,#8fbcad,#375b5a); border: 1px solid rgba(255,255,255,.12); }
.traces { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--cyan); stroke: rgba(32,230,195,.42); stroke-width: 2; fill-opacity: .75; }
.signal { position: absolute; border-radius: 50%; width: 8px; height: 8px; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: blink 1.8s infinite alternate; }
.signal-a { top: 75px; left: 65px; }.signal-b { bottom: 58px; right: 78px; animation-delay: .5s; }.signal-c { top: 155px; right: 45px; animation-delay: 1s; }
@keyframes blink { to { opacity: .15; } }
.orbit { position: absolute; border: 1px solid rgba(32,230,195,.14); border-radius: 50%; transform: rotateX(68deg); }
.orbit-one { width: 600px; height: 300px; }.orbit-two { width: 460px; height: 220px; border-style: dashed; }
.floating-tag { position: absolute; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(6,17,30,.82); backdrop-filter: blur(12px); color: var(--muted); font-size: .7rem; box-shadow: 0 15px 35px rgba(0,0,0,.25); animation: tagFloat 4s ease-in-out infinite; }
.floating-tag span { color: var(--cyan); font-weight: 800; margin-right: 7px; }
.tag-one { top: 90px; right: 0; }.tag-two { bottom: 95px; left: 0; animation-delay: -2s; }
@keyframes tagFloat { 50% { transform: translateY(-8px); } }

.trust-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.015); overflow: hidden; }
.marquee { width: min(calc(100% - 40px), var(--max)); margin: auto; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #8295a8; font-size: .72rem; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.marquee i { width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; opacity: .6; }

.expertise { padding: 130px 0; }
.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; margin-bottom: 55px; }
.section-heading h2, .approach h2, .contact h2 { margin: 12px 0 0; font-size: clamp(2.2rem,4.8vw,4.5rem); line-height: 1.04; letter-spacing: -.045em; }
.section-heading p, .approach-copy > p { color: var(--muted); margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.service-card { position: relative; min-height: 350px; padding: 38px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(16,35,56,.78), rgba(8,21,37,.88)); overflow: hidden; transition: border-color .3s, transform .3s; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(32,230,195,.38); }
.service-card::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: -80px; bottom: -90px; background: radial-gradient(circle, rgba(32,230,195,.15), transparent 70%); }
.service-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan); }
.service-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-no { position: absolute; top: 38px; right: 38px; color: #466074; font: 700 .7rem monospace; }
.service-card h3 { margin: 28px 0 12px; font-size: 1.6rem; letter-spacing: -.02em; }
.service-card p { color: var(--muted); margin: 0; max-width: 570px; }
.service-card ul { margin: 23px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.service-card li { font-size: .72rem; color: #aec0d1; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 999px; padding: 6px 10px; }
.featured-card { border-color: rgba(32,230,195,.27); background: linear-gradient(145deg, rgba(15,48,55,.9), rgba(7,28,39,.92)); }

.approach { padding: 115px 0; background: linear-gradient(180deg, rgba(12,29,48,.85), rgba(7,17,31,.85)); border-block: 1px solid var(--line); }
.approach-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
.approach-copy { position: sticky; top: 60px; }
.approach-copy h2 { font-size: clamp(2.4rem,4.5vw,4.2rem); }
.approach-copy > p { max-width: 520px; margin-top: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); font-weight: 800; margin-top: 30px; }
.text-link span { font-size: 1.3rem; }
.process-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--cyan); font: 700 .72rem monospace; }
.process-list strong { font-size: 1.25rem; }
.process-list p { color: var(--muted); margin: 7px 0 0; }

.solutions { padding: 130px 0; }
.solution-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.solution-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-solid); transition: transform .3s, border-color .3s; }
.solution-card:hover { transform: translateY(-6px); border-color: rgba(32,230,195,.33); }
.solution-art { height: 280px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(32,230,195,.14), transparent 55%), linear-gradient(145deg,#0d2333,#07131f); }
.solution-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 24px 24px; }
.motor-ring { position: absolute; left: 50%; top: 50%; width: 155px; height: 155px; transform: translate(-50%,-50%); border-radius: 50%; border: 25px solid #173d47; box-shadow: 0 0 0 2px rgba(32,230,195,.2), inset 0 0 25px rgba(0,0,0,.5); }
.motor-ring::before { content:""; position:absolute; inset:-19px; border:3px dashed rgba(32,230,195,.42); border-radius:50%; animation:spin 18s linear infinite; }
.motor-core { position:absolute; left:50%; top:50%; width:55px; height:55px; transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(145deg,#ff9a52,#9d4217); box-shadow:0 0 35px rgba(255,138,61,.25); }
.wave { position:absolute; left:10%; right:10%; bottom:32px; height:35px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cpath d='M0 20 C50 -10 70 50 120 20 S190 -10 240 20 310 50 400 15' fill='none' stroke='%2320e6c3' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat; opacity:.55; }
@keyframes spin { to { transform:rotate(360deg); } }
.io-board { position:absolute; width:220px; height:150px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg); background:#123840; border:1px solid rgba(32,230,195,.35); border-radius:14px; box-shadow:0 25px 50px rgba(0,0,0,.38); }
.io-board b { position:absolute; width:42px; height:42px; border-radius:6px; background:#0a1a23; border:1px solid rgba(255,255,255,.12); top:25px; left:25px; box-shadow:60px 0 #0a1a23,120px 0 #0a1a23; }
.io-board b:nth-child(4) { top:88px; box-shadow:60px 0 #0a1a23,120px 0 #0a1a23; }
.io-board span { position:absolute; left:25px; right:25px; bottom:14px; height:6px; background:repeating-linear-gradient(90deg,#b4d2c8 0 7px,transparent 7px 14px); }
.power-coil { position:absolute; left:50%; top:48%; width:120px; height:120px; transform:translate(-50%,-50%); border:14px solid rgba(164,87,42,.45); border-radius:50%; background:repeating-radial-gradient(circle,#d77a38 0 4px,#552d16 5px 8px); box-shadow:0 0 40px rgba(255,138,61,.18); }
.power-coil::after { content:""; position:absolute; inset:35px; border-radius:50%; background:#07131f; box-shadow:inset 0 0 20px #000; }
.power-bars { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); display:flex; gap:9px; align-items:end; }
.power-bars i { width:9px; height:16px; background:var(--cyan); opacity:.65; }.power-bars i:nth-child(2){height:28px}.power-bars i:nth-child(3){height:38px}.power-bars i:nth-child(4){height:23px}
.solution-copy { padding: 27px; }
.solution-copy > span { color: var(--cyan); font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.solution-copy h3 { margin: 9px 0; font-size: 1.35rem; }
.solution-copy p { color: var(--muted); font-size: .9rem; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.chips i { font-style: normal; font: 700 .6rem monospace; color: #a9bccd; border: 1px solid var(--line); padding: 5px 8px; border-radius: 7px; }

.contact { padding: 25px 0 100px; }
.contact-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.03fr .97fr; gap: 70px; padding: clamp(35px,6vw,78px); border-radius: 36px; border: 1px solid rgba(32,230,195,.23); background: linear-gradient(135deg, rgba(16,47,57,.96), rgba(8,24,42,.98)); box-shadow: var(--shadow); }
.contact-panel::after { content:""; position:absolute; width:470px; height:470px; right:-220px; top:-230px; border:1px solid rgba(32,230,195,.13); border-radius:50%; box-shadow:0 0 0 55px rgba(32,230,195,.025),0 0 0 110px rgba(32,230,195,.018); }
.contact h2 { font-size: clamp(2.5rem,4.5vw,4.6rem); }
.contact-copy > p { color: var(--muted); max-width: 590px; }
.contact-links { margin-top: 35px; display: grid; gap: 14px; }
.contact-links a { display: flex; flex-direction: column; width: fit-content; }
.contact-links small { color: var(--muted); font-size: .62rem; letter-spacing: .12em; }
.contact-links strong { font-size: 1.05rem; margin-top: 3px; }
.contact-form { padding: 30px; border-radius: 24px; border: 1px solid var(--line); background: rgba(4,15,27,.5); backdrop-filter: blur(10px); position: relative; z-index: 2; }
.contact-form label { display: block; color: #b8c7d6; font-size: .74rem; font-weight: 700; margin-bottom: 17px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.045); color: var(--text); padding: 14px 15px; outline: none; transition: border-color .2s, background .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(32,230,195,.55); background: rgba(255,255,255,.065); }
.contact-form select option { color: #111; }
.contact-form textarea { resize: vertical; }
.contact-form .button { width: 100%; border: 0; }

.site-footer { min-height: 130px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--muted); font-size: .76rem; }
.footer-brand .brand-mark { width: 38px; height: 38px; }
.back-top { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font-size: 1.2rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 50px; }
  .hero-copy { max-width: 850px; }
  .hero-visual { min-height: 500px; }
  .approach-inner { grid-template-columns: 1fr; gap: 60px; }
  .approach-copy { position: static; }
  .solution-grid { grid-template-columns: 1fr 1fr; }
  .solution-card:last-child { grid-column: span 2; }
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { height: 76px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-copy strong { font-size: .86rem; }
  .menu-toggle { display: block; position: relative; z-index: 22; }
  .main-nav { position: fixed; inset: 0; background: rgba(5,14,25,.97); backdrop-filter: blur(15px); flex-direction: column; justify-content: center; font-size: 1.4rem; opacity: 0; visibility: hidden; transform: translateY(-15px); transition: .3s; }
  .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: auto; padding: 75px 0 60px; gap: 25px; }
  .hero h1 { font-size: clamp(3.15rem, 16vw, 5rem); }
  .hero-lead { font-size: 1rem; }
  .hero-metrics { display: grid; grid-template-columns: repeat(3,1fr); }
  .hero-metrics div { padding: 0 9px; }
  .hero-metrics span { white-space: normal; font-size: .62rem; }
  .hero-visual { min-height: 390px; }
  .pcb-card { width: 90%; }
  .orbit-one { width: 420px; height: 210px; }.orbit-two { width: 330px; height: 165px; }
  .floating-tag { font-size: .62rem; }.tag-one { top: 28px; right: 4px; }.tag-two { bottom: 35px; }
  .marquee { overflow-x: auto; justify-content: flex-start; }
  .expertise, .solutions { padding: 90px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 330px; padding: 28px; }
  .approach { padding: 85px 0; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card:last-child { grid-column: auto; }
  .contact-panel { border-radius: 25px; padding: 30px 20px; }
  .contact-form { padding: 22px 16px; }
  .site-footer { padding: 35px 0; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}