*{box-sizing:border-box}
:root{--ink:#061a2b;--navy:#03182a;--blue:#06385b;--cyan:#17c5d1;--green:#32d18a;--red:#ff3038;--yellow:#f4c32d;--muted:#a9bbc8;--line:rgba(87,154,190,.22);--white:#f5fbff}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:"DM Sans",system-ui,sans-serif;line-height:1.6}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:linear-gradient(rgba(23,197,209,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(23,197,209,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 75%);z-index:-1}
h1,h2,h3,.brand,.banner-title{font-family:"Space Grotesk",system-ui,sans-serif}
.top-banner{min-height:138px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,#07537d 0,#063656 34%,#03182a 78%);border-bottom:1px solid rgba(23,197,209,.3);display:flex;align-items:center;justify-content:center}
.top-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,24,42,.9),transparent 24%,transparent 76%,rgba(3,24,42,.9))}
.banner-content{position:relative;z-index:2;width:min(1050px,94%);display:flex;align-items:center;justify-content:space-between;gap:20px}
.banner-brand{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;font-weight:800;letter-spacing:.05em;line-height:1}
.red{color:var(--red)}.green{color:var(--green)}
.stack-icon{height:38px;width:42px;position:relative;display:block}
.stack-icon i{position:absolute;left:5px;width:31px;height:17px;border:3px solid var(--red);transform:skewY(-30deg) rotate(0deg);border-radius:3px}
.stack-icon i:nth-child(1){top:0}.stack-icon i:nth-child(2){top:9px}.stack-icon i:nth-child(3){top:18px}
.fabric-icon{font-size:2.7rem;font-weight:700;font-style:italic;color:var(--green);line-height:.8}
.banner-title{text-align:center;display:flex;flex-direction:column;line-height:1;letter-spacing:.03em;font-size:1rem}
.banner-title strong{color:#a9c9db}.banner-title span{font-size:1.25rem;margin-top:5px}.banner-title b{color:#fff}
.bars{display:flex;align-items:end;height:34px;gap:3px}.bars i{display:block;width:9px;background:var(--yellow);border-radius:2px 2px 0 0}.bars i:nth-child(1){height:17px}.bars i:nth-child(2){height:27px}.bars i:nth-child(3){height:34px}
.powerbi{color:#fff}
.circuit-art{position:absolute;z-index:1;width:28%;height:100%;opacity:.55;background-image:linear-gradient(90deg,transparent 0 12%,var(--cyan) 12% 12.5%,transparent 12.5% 32%,var(--cyan) 32% 32.5%,transparent 32.5% 58%,var(--cyan) 58% 58.5%,transparent 58.5%),linear-gradient(0deg,transparent 0 25%,var(--cyan) 25% 25.6%,transparent 25.6% 58%,var(--cyan) 58% 58.6%,transparent 58.6%);background-size:95px 75px}
.circuit-left{left:0}.circuit-right{right:0;transform:scaleX(-1)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(3,24,42,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:.84rem;font-weight:700;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--cyan);color:var(--ink);font-size:1rem}.header-link{color:#dcecf4;text-decoration:none;font-weight:700;font-size:.82rem}.header-link span{color:var(--cyan)}
.hero,.section{max-width:1180px;margin:auto}
.hero{padding:55px 20px 70px;display:grid;gap:42px;position:relative}
.hero-copy{align-self:center}.eyebrow,.section-label{margin-bottom:14px;color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.14em}
h1{font-size:clamp(2.65rem,10vw,6.3rem);line-height:.96;letter-spacing:-.055em;margin:0 0 22px;max-width:900px}
h1 em{font-style:normal;color:var(--cyan)}
.lead{max-width:650px;color:var(--muted);font-size:1.05rem}
.button{display:inline-flex;gap:12px;align-items:center;padding:13px 17px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.9rem;background:var(--cyan);color:var(--ink);margin-top:12px}.button span{font-size:1rem}
.hero-visual{position:relative;max-width:510px;width:100%;margin:auto}.portrait-wrap{overflow:hidden;aspect-ratio:.86/1;background:#d9d4cc;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.35);border:1px solid rgba(23,197,209,.35)}.portrait-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait-label{position:absolute;bottom:13px;left:13px;padding:10px 13px;background:rgba(3,24,42,.9);border-left:3px solid var(--cyan);font-size:.68rem;line-height:1.35;letter-spacing:.08em;color:#b9ccd7}.portrait-label b{color:#fff}
.section{padding:88px 20px}.section h2{font-size:clamp(2rem,7vw,4rem);line-height:1.03;letter-spacing:-.045em;margin-bottom:0}
.intro-grid,.expertise-grid{display:grid;gap:32px}.intro p,.expertise p,.section-heading p{color:var(--muted)}.intro p+p{margin-top:14px}
.service-grid{display:grid;gap:14px;margin-top:36px}.service-card{background:rgba(5,37,58,.72);border:1px solid var(--line);border-radius:15px;padding:25px;min-height:300px}.service-card.featured{background:linear-gradient(145deg,#074b69,#05253a);border-color:rgba(23,197,209,.5)}
.service-number{display:block;color:var(--cyan);font-weight:800;font-size:.75rem;margin-bottom:38px}.service-card h3{font-size:1.45rem;margin-bottom:10px}.service-card p{color:var(--muted);font-size:.9rem}.service-card ul{list-style:none;padding:17px 0 0;margin:25px 0 0;border-top:1px solid var(--line)}.service-card li{font-size:.82rem;margin:7px 0}.service-card li:before{content:"—";margin-right:8px;color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;align-content:start;gap:9px}.chips span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(5,37,58,.7);font-size:.8rem;font-weight:600;color:#d9edf5}
.principles{display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:0;padding-bottom:0}.principle{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:45px 1fr;column-gap:12px}.principle:last-child{border-bottom:0}.principle strong{grid-row:1/span 2;color:var(--cyan);font-size:.75rem}.principle span{font-family:"Space Grotesk";font-weight:700}.principle p{grid-column:2;color:var(--muted);font-size:.87rem;margin:4px 0 0}
.contact{display:grid;gap:34px;background:linear-gradient(135deg,#052e49,#03182a);max-width:none;padding-left:max(20px,calc((100vw - 1140px)/2));padding-right:max(20px,calc((100vw - 1140px)/2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact .eyebrow{color:var(--cyan)}.contact h2{max-width:720px}.contact-lead{color:var(--muted)}
.contact-card{align-self:center;padding:24px;border:1px solid rgba(23,197,209,.3);border-radius:15px;background:rgba(255,255,255,.035)}.contact-card span{display:block;color:var(--cyan);font-size:.7rem;letter-spacing:.14em;font-weight:800;margin-bottom:15px}.contact-card strong{display:block;font-family:"Space Grotesk";font-size:1.3rem;line-height:1.2;margin-bottom:22px}.contact-card a{display:block;color:white;font-weight:700;text-decoration:none}.contact-card small{display:block;margin-top:13px;color:var(--muted);font-size:.74rem}
footer{display:flex;justify-content:space-between;gap:20px;padding:22px 20px;max-width:1180px;margin:auto;color:#718996;font-size:.72rem}
@media(min-width:700px){.site-header{padding:16px 32px}.hero{padding:78px 32px 95px;grid-template-columns:1.05fr .75fr;align-items:center}.section{padding:110px 32px}.intro-grid,.expertise-grid{grid-template-columns:1fr 1fr;align-items:start}.service-grid{grid-template-columns:1fr 1fr}.principles{grid-template-columns:repeat(3,1fr)}.principle{display:block;padding:32px 24px;border-bottom:0;border-right:1px solid var(--line)}.principle:last-child{border-right:0}.principle strong{display:block;margin-bottom:28px}.principle p{margin-top:7px}.contact{grid-template-columns:1.4fr .6fr;align-items:center;padding-top:110px;padding-bottom:110px}footer{padding-left:32px;padding-right:32px}}
@media(min-width:1050px){.site-header{padding-left:max(32px,calc((100vw - 1180px)/2));padding-right:max(32px,calc((100vw - 1180px)/2))}.banner-content{max-width:1100px}.hero{padding-top:90px}}
@media(max-width:560px){.top-banner{min-height:116px}.banner-content{gap:8px}.banner-brand{font-size:.52rem}.stack-icon{transform:scale(.75)}.fabric-icon{font-size:2rem}.banner-title{font-size:.62rem}.banner-title span{font-size:.83rem}.powerbi{display:none}}