/*
Theme Name: DevLaunch Engineering Studio
Author: DevLaunch
Description: WordPress conversion of the DevLaunch Astro site, preserving desktop/mobile design, content and URL structure.
Version: 1.0.0
Text Domain: devlaunch
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #070b12;
  --bg-soft: #0b1220;
  --card: #0e1726;
  --card-2: #101b2d;
  --line: #1c2a3d;
  --line-soft: rgba(255,255,255,.07);
  --text: #f5f7fb;
  --muted: #94a3b8;
  --muted-2: #6f8096;
  --purple: #8b5cf6;
  --purple-2: #a78bfa;
  --cyan: #16c7e8;
  --green: #20d99a;
  --max: 1180px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 7%, rgba(89,73,255,.14), transparent 28%),
    radial-gradient(circle at 10% 35%, rgba(0,190,230,.06), transparent 25%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(100,130,160,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,130,160,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,11,18,.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.04em; }
.logo-mark {
  width: 45px; height: 45px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  box-shadow: 0 0 30px rgba(111,76,255,.25);
  font-size: 12px;
}
.logo-sub {
  display: block; color: #8492a8; font-size: 8px; letter-spacing: .09em;
  text-transform: uppercase; margin-top: -3px;
}
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 12px; color: #bcc8d8; list-style: none; }
.nav-links a:hover { color: white; }
.menu-toggle { display:none; width:42px; height:42px; padding:9px; border:1px solid #26374d; border-radius:10px; background:#0b1421; cursor:pointer; }
.menu-toggle span { display:block; width:20px; height:2px; margin:4px auto; border-radius:2px; background:#e7edf7; transition:.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu { display:none; border-top:1px solid var(--line-soft); background:rgba(7,11,18,.98); }
.mobile-menu nav { display:grid; gap:4px; padding:12px 20px 20px; }
.mobile-link { display:block; padding:14px 10px; border-radius:9px; color:#c8d2e1; font-size:14px; }
.mobile-link:hover { background:#0e1726; color:#fff; }
.mobile-cta { margin-top:8px; width:100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 9px; font-size: 12px; font-weight: 700;
  border: 1px solid transparent; transition: .2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 12px 35px rgba(92,78,255,.2);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-ghost { border-color: #334155; background: rgba(255,255,255,.02); }
.btn-ghost:hover { background: #111c2d; }

.hero { padding: 104px 0 74px; }
.hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 70px; align-items: center; }
.eyebrow {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 11px;
  border: 1px solid rgba(32,217,154,.25); border-radius: 999px;
  color: #67e8b6; background: rgba(32,217,154,.04);
  font-size: 9px; font-weight: 800; letter-spacing: .09em;
}
h1 { font-size: clamp(48px, 6vw, 76px); line-height: .99; letter-spacing: -.065em; margin: 22px 0; }
h2 { font-size: 38px; line-height: 1.08; letter-spacing: -.045em; margin: 9px 0 30px; }
h3 { line-height: 1.25; }
.gradient-text {
  background: linear-gradient(90deg, #fff 10%, #a98bff 60%, #16c7e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy { max-width: 620px; color: var(--muted); font-size: 17px; }
.section-intro { padding-bottom: 20px; }
.section-intro p { color: var(--muted); font-size: 17px; }
.actions { display: flex; gap: 12px; margin: 30px 0; }
.trust {
  display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center;
  color: #748298; font-size: 10px; border-top: 1px solid var(--line); padding-top: 22px;
}

.pipeline {
  position: relative; padding: 25px; border: 1px solid #1d3047; border-radius: 24px;
  background: linear-gradient(145deg, rgba(16,28,46,.92), rgba(8,14,24,.7));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.25);
}
.pipeline:before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; opacity: .25; pointer-events: none;
  background-image: linear-gradient(rgba(68,105,145,.18) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(68,105,145,.18) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(to bottom,#000,transparent);
}
.node {
  position: relative; width: 170px; margin: 0 auto 14px; padding: 13px 16px;
  border: 1px solid #28415d; border-radius: 11px; background: #0c1727;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.node b { display: block; font-size: 10px; }
.node span { font-size: 9px; color: #74849a; }
.node:after { content: "↓"; position: absolute; left: 50%; bottom: -21px; color: #4b88ad; font-size: 13px; }
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 22px; }
.branches .node { width: auto; margin: 0; }
.branches .node:after { display: none; }
.node.purple { border-color: #59409a; }
.node.green { border-color: #176b54; }
.monitor { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mini { padding: 16px 8px; border: 1px solid #203349; border-radius: 10px; text-align: center; background: #0b1421; font-size: 10px; }
.mini strong { display: block; font-size: 9px; }
.mini span { font-size: 8px; color: #697b91; }

section { padding: 76px 0; border-top: 1px solid rgba(255,255,255,.05); }
.section-kicker { color: #43c9f0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card {
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(17,29,47,.9), rgba(10,17,28,.8));
}
.icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  margin-bottom: 22px; background: rgba(139,92,246,.13); color: #a98bff;
  border: 1px solid rgba(139,92,246,.2);
}
.card h3 { margin: 0 0 9px; font-size: 18px; }
.card p { color: var(--muted); font-size: 13px; margin: 0; }
.card ul { padding: 0; margin: 20px 0 0; list-style: none; color: #aebacc; font-size: 11px; }
.card li { margin: 7px 0; }
.card li:before { content: "•"; color: var(--green); margin-right: 8px; }
.arrow { display: inline-block; margin-top: 22px; color: #c8b8ff; font-size: 11px; font-weight: 700; }

.process { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.step { text-align: center; position: relative; }
.step:not(:last-child):after { content: "→"; position: absolute; right: -8px; top: 22px; color: #3c516a; }
.step-icon {
  width: 48px; height: 48px; margin: 0 auto 10px; border: 1px solid #28415d;
  border-radius: 50%; display: grid; place-items: center; background: #0b1524;
}
.step b { display: block; font-size: 11px; }
.step span { color: #6f8197; font-size: 9px; }

.solutions { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.solution { padding: 22px; border: 1px solid #1c2b3f; border-radius: 14px; background: #0b1421; }
.solution-icon { font-size: 24px; color: #a98bff; margin-bottom: 18px; }
.solution h3 { font-size: 13px; margin: 0 0 7px; }
.solution p { font-size: 10px; color: #7e8da2; margin: 0; }

.project { overflow: hidden; padding: 0; }
.project-image {
  height: 190px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(139,92,246,.2), transparent),
              linear-gradient(90deg,#111d2e 1px,transparent 1px),
              linear-gradient(#111d2e 1px,transparent 1px);
  background-size: auto,24px 24px,24px 24px;
}
.dashboard {
  width: 82%; height: 72%; border: 1px solid #29415e; border-radius: 8px;
  background: #09111e; box-shadow: 0 20px 40px #0008; padding: 12px;
}
.bars { display: flex; align-items: end; height: 70%; gap: 7px; }
.bar { flex: 1; background: linear-gradient(#5e80ff,#6242c9); border-radius: 3px 3px 0 0; }
.code { font: 10px/1.8 monospace; color: #54d6a4; }
.project-content { padding: 20px; }
.project-content h3 { font-size: 14px; margin: 0 0 6px; }
.project-content p { font-size: 10px; color: #7f8da0; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tag { font-size: 8px; border: 1px solid #26374d; padding: 4px 7px; border-radius: 99px; color: #8fa0b6; }

.stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.tech { padding: 11px 16px; border: 1px solid #203149; border-radius: 10px; background: #0b1421; color: #aebbd0; font-size: 11px; }

.why { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.why-icon { font-size: 22px; margin-bottom: 10px; color: var(--purple); }
.why h3 { font-size: 13px; margin: 0 0 7px; }
.why p { font-size: 10px; color: #78879a; margin: 0; }

.cta {
  padding: 55px; border-radius: 20px;
  background: radial-gradient(circle at 10% 20%,rgba(139,92,246,.5),transparent 35%),
              linear-gradient(110deg,#302071,#07566a);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border: 1px solid rgba(255,255,255,.1);
}
.cta h2 { margin: 0 0 10px; }
.cta p { color: #c6d0de; margin: 0; font-size: 13px; }
.consult { margin-top: 8px !important; text-align: center; font-size: 9px !important; }

.page-hero { padding: 90px 0 55px; }
.page-hero p { max-width: 720px; color: var(--muted); font-size: 16px; }
.breadcrumbs { color: #728198; font-size: 10px; margin-bottom: 22px; }
.breadcrumbs a:hover { color: white; }
.content { max-width: 820px; }
.content p, .content li { color: #aeb9c9; font-size: 15px; }
.content h2 { margin-top: 42px; }
.content ul { padding-left: 22px; }
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-box { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #0b1421; }
.detail-box h3 { margin-top: 0; font-size: 14px; }
.detail-box p, .detail-box li { color: var(--muted); font-size: 12px; }

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.contact-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #0b1421; }
.contact-card h2 { margin-top: 0; }
.contact-card p { color: var(--muted); font-size: 13px; }
.form { display: grid; gap: 13px; }
.form label { color: #aebbd0; font-size: 11px; }
.form input, .form textarea, .form select {
  width: 100%; margin-top: 6px; padding: 13px 14px; border: 1px solid #26374d;
  border-radius: 9px; background: #08111d; color: white; outline: none; font: inherit;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #6651b9; }

footer { padding: 55px 0 25px; border-top: 1px solid var(--line); color: #8190a3; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 40px; }
footer h4 { color: #fff; font-size: 12px; margin: 0 0 15px; }
footer a, footer p { font-size: 11px; display: block; margin: 7px 0; }
.footer-desc { max-width: 260px; margin-top: 18px; }
.copyright {
  border-top: 1px solid var(--line); margin-top: 35px; padding-top: 20px;
  font-size: 9px; display: flex; justify-content: space-between; gap: 15px;
}

@media (max-width:950px){
  .container{width:min(calc(100% - 32px),var(--max))}
  .nav-links,.header-cta{display:none}.menu-toggle{display:block}
  .mobile-menu{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease}
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu{max-height:520px;opacity:1}
  .hero-grid,.contact-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}
  .solutions{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(3,1fr)}.why{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:700px){
  .container{width:min(calc(100% - 28px),var(--max))}.nav{min-height:64px}
  .hero{padding:66px 0 54px}h1{font-size:clamp(40px,12vw,58px)}h2{font-size:31px}.hero-copy{font-size:15px}
  .actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}.trust{align-items:flex-start;flex-direction:column;gap:8px}
  .pipeline{padding:18px;border-radius:18px}.branches{gap:8px}.monitor{gap:7px}.mini{padding:12px 5px}
  section{padding:58px 0}.page-hero{padding:60px 0 38px}.page-hero p{font-size:14px}
  .grid-3,.solutions,.process,.why,.service-detail,.footer-grid{grid-template-columns:1fr}
  .card{padding:22px}.project-image{height:175px}.step:not(:last-child):after{display:none}
  .stack{justify-content:flex-start}.tech{padding:9px 12px;font-size:10px}.cta{padding:30px 24px;display:block;border-radius:16px}.cta .btn{width:100%;margin-top:24px}
  .copyright{display:block;line-height:1.7}.copyright span{display:block;margin-top:8px}.contact-card{padding:22px}
}
@media (max-width:390px){
  .container{width:calc(100% - 24px)}h1{font-size:39px}h2{font-size:28px}.hero{padding-top:52px}
  .pipeline{padding:14px}.branches{grid-template-columns:1fr}.branches .node{width:100%}.monitor{grid-template-columns:1fr}
  .card{padding:19px}.mobile-menu nav{padding-left:12px;padding-right:12px}
}

.wp-site-blocks{padding:0!important}.wp-block-post-content{margin:0}.site-main{margin:0}