:root {
  --navy:#0c1724;
  --navy2:#132437;
  --blue:#1687f8;
  --blue2:#65b4ff;
  --ink:#152538;
  --muted:#5e7185;
  --pale:#f3f7fb;
  --line:#dce6ef;
  --white:#fff;
  --radius:18px;
  --max:1160px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:84px
}

body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.6
}

a {
  color:inherit;
  text-decoration:none
}

img {
  max-width:100%;
  display:block
}

.wrap {
  width:min(var(--max),calc(100% - 40px));
  margin:auto
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  font-size:.76rem;
  color:var(--blue)
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font-size:clamp(2.7rem,6vw,4.8rem);
  line-height:1.02;
  letter-spacing:-.055em;
  margin-bottom:22px
}

h2 {
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  letter-spacing:-.04em;
  margin-bottom:14px
}

h3 {
  line-height:1.2;
  margin-bottom:9px
}

p {
  color:var(--muted)
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 19px;
  border-radius:9px;
  font-weight:750;
  border:1px solid transparent;
  transition:.2s
}

.btn-primary {
  background:var(--blue);
  color:white;
  box-shadow:0 8px 24px #1687f833
}

.btn-primary:hover {
  background:#0873df;
  transform:translateY(-1px)
}

.btn-outline {
  border-color:#7890a7;
  color:white
}

.btn-outline:hover {
  background:#ffffff12
}

.btn-light {
  background:white;
  color:var(--navy);
  border-color:var(--line)
}

.site-header {
  height:76px;
  background:#0b1623f5;
  color:white;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #ffffff12;
  backdrop-filter:blur(14px)
}

.nav {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:850;
  letter-spacing:.07em;
  line-height:1.1
}

.brand small {
  display:block;
  font-size:.61rem;
  font-weight:650;
  letter-spacing:.15em;
  color:#b9c9d8;
  margin-top:5px
}

.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:white;
  background:linear-gradient(145deg,#48b5ff,#0875ed);
  border-radius:11px;
  font-size:1.15rem;
  font-weight:900
}

.nav-links {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:.88rem;
  color:#d5e1ec
}

.nav-links a:hover {
  color:var(--blue2)
}

.menu-toggle {
  display:none;
  background:none;
  border:1px solid #ffffff44;
  color:white;
  border-radius:8px;
  padding:8px 11px;
  font-size:1rem
}

.hero {
  background:var(--navy);
  color:white;
  position:relative;
  overflow:hidden
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#09131ff5 0%,#09131fdf 42%,#09131f50 100%),url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?auto=format&fit=crop&w=2000&q=85') center/cover;
  opacity:.9
}

.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:50px;
  min-height:590px;
  padding-top:72px;
  padding-bottom:72px
}

.hero h1 span {
  color:var(--blue2)
}

.hero-copy>p {
  font-size:1.12rem;
  max-width:590px;
  color:#c8d5e2
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:28px 0 34px
}

.benefits {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  color:#dce7f0;
  font-size:.83rem
}

.benefits span:before {
  content:'✓';
  color:var(--blue2);
  font-weight:900;
  margin-right:8px
}

.hero-panel {
  background:#102238b8;
  border:1px solid #ffffff2a;
  padding:25px;
  border-radius:20px;
  backdrop-filter:blur(12px);
  box-shadow:0 24px 80px #0005
}

.panel-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:18px
}

.status {
  font-size:.72rem;
  color:#a6e8c0;
  background:#1a6d4a55;
  border:1px solid #4da67a66;
  border-radius:99px;
  padding:5px 9px
}

.hero-panel h3 {
  font-size:1.25rem
}

.panel-item {
  display:flex;
  gap:14px;
  padding:14px 0;
  border-top:1px solid #ffffff1c
}

.panel-icon {
  width:39px;
  height:39px;
  border-radius:11px;
  background:#1687f826;
  color:#83c7ff;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:1.15rem
}

.panel-item strong {
  display:block;
  font-size:.93rem
}

.panel-item small {
  display:block;
  color:#b6c6d5;
  font-size:.8rem;
  line-height:1.45;
  margin-top:3px
}

.section {
  padding:88px 0
}

.section-head {
  max-width:720px;
  margin-bottom:35px
}

.section-head p {
  font-size:1.04rem
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}

.service-card {
  padding:25px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:white;
  transition:.2s
}

.service-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 45px #13243710;
  border-color:#b5d8f8
}

.service-icon {
  height:45px;
  width:45px;
  border-radius:13px;
  background:#e8f4ff;
  color:#0879e8;
  display:grid;
  place-items:center;
  font-size:1.25rem;
  margin-bottom:20px
}

.service-card p {
  font-size:.92rem;
  margin-bottom:0
}

.tagline {
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--blue);
  text-transform:uppercase
}

.dark-section {
  background:var(--navy);
  color:white
}

.dark-section p {
  color:#c1cfdd
}

.consult-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:54px;
  align-items:center
}

.consult-visual {
  min-height:430px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#0d1a2750,#0d1a27a8),url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=1000&q=85') center/cover;
  position:relative;
  overflow:hidden
}

.visual-note {
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  padding:17px 19px;
  background:#0c1724dd;
  border:1px solid #ffffff2a;
  border-radius:12px
}

.visual-note strong {
  display:block
}

.visual-note span {
  color:#c5d3e0;
  font-size:.84rem
}

.check-list {
  list-style:none;
  padding:0;
  margin:24px 0
}

.check-list li {
  padding:9px 0 9px 31px;
  position:relative;
  color:#e1e9f1
}

.check-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  top:9px;
  color:#79c1ff;
  font-weight:900
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:35px
}

.step {
  padding:23px;
  border:1px solid var(--line);
  border-radius:15px
}

.step-num {
  font-size:.8rem;
  font-weight:850;
  color:var(--blue);
  letter-spacing:.12em;
  margin-bottom:17px
}

.step p {
  font-size:.9rem;
  margin-bottom:0
}

.docs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center
}

.doc-preview {
  background:#fff;
  color:var(--ink);
  padding:27px;
  border-radius:14px;
  box-shadow:0 20px 65px #0003;
  transform:rotate(1.5deg)
}

.doc-bar {
  height:8px;
  width:75px;
  background:var(--blue);
  border-radius:10px;
  margin-bottom:22px
}

.doc-line {
  height:8px;
  background:#e5ebf1;
  border-radius:5px;
  margin:12px 0
}

.doc-line.short {
  width:62%
}

.doc-check {
  padding:12px 0;
  border-top:1px solid #e5ebf1;
  font-size:.85rem;
  color:#42566a
}

.doc-check:before {
  content:'□';
  color:var(--blue);
  font-size:1.1rem;
  margin-right:10px
}

.portfolio-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px
}

.project-card {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:white
}

.project-image {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:230px;
  background:linear-gradient(135deg,#122c45,#1e5a86);
  display:grid;
  place-items:center;
  color:white;
  font-size:3rem
}

.project-image::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(12,23,36,.35), rgba(12,23,36,.35)),
    var(--img) center/cover;
  filter:blur(3px);
  transform:scale(1.05)
}

.project-image.alt {
  background:linear-gradient(135deg,#182536,#526e87)
}

.project-copy {
  padding:24px
}

.project-copy p {
  margin-bottom:0;
  font-size:.92rem
}

.placeholder-note {
  font-size:.76rem!important;
  color:#8a6a2d!important;
  background:#fff7e5;
  border-radius:7px;
  padding:8px 10px;
  margin-top:12px!important
}

.cta {
  padding:64px 0;
  background:linear-gradient(120deg,#0c1724,#143b60);
  color:white
}

.cta-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.cta h2 {
  max-width:720px
}

.cta p {
  color:#c5d5e5;
  max-width:650px;
  margin-bottom:0
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px
}

.contact-details {
  display:grid;
  gap:15px;
  margin-top:25px
}

.contact-method {
  display:flex;
  gap:13px;
  align-items:flex-start
}

.contact-method .service-icon {
  margin:0;
  width:40px;
  height:40px;
  flex-shrink:0
}

.contact-method strong {
  display:block
}

.contact-method small {
  color:var(--muted)
}

form {
  display:grid;
  gap:15px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

label {
  display:block;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:6px
}

input,select,textarea {
  font:inherit;
  width:100%;
  padding:12px 13px;
  border:1px solid #cbd7e2;
  border-radius:9px;
  background:white;
  color:var(--ink)
}

textarea {
  min-height:130px;
  resize:vertical
}

input:focus,select:focus,textarea:focus {
  outline:3px solid #1687f82c;
  border-color:var(--blue)
}

.form-note {
  font-size:.78rem;
  color:var(--muted);
  margin:0
}

.site-footer {
  background:#07111c;
  color:#d7e1ea;
  padding:30px 0
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}

.footer-inner p {
  font-size:.8rem;
  color:#91a4b6;
  margin:7px 0 0
}

.footer-links {
  display:flex;
  gap:17px;
  flex-wrap:wrap;
  font-size:.84rem
}

.footer-links a:hover {
  color:var(--blue2)
}

@media(max-width:850px) {
  .nav-links {
  gap:14px
}

.nav-links a:not(.btn) {
  display:none
}

.hero-inner {
  grid-template-columns:1fr;
  gap:28px;
  min-height:auto
}

.hero-panel {
  max-width:600px
}

.services-grid {
  grid-template-columns:repeat(2,1fr)
}

.consult-grid,.docs-grid,.contact-grid {
  grid-template-columns:1fr;
  gap:30px
}

.consult-visual {
  min-height:330px
}

.process-grid {
  grid-template-columns:repeat(2,1fr)
}

.portfolio-grid {
  grid-template-columns:1fr 1fr
}

.cta-inner {
  align-items:flex-start;
  flex-direction:column
}

}

@media(max-width:560px) {
  .wrap {
  width:min(var(--max),calc(100% - 30px))
}

.site-header {
  height:68px
}

.nav-links {
  display:none;
  position:absolute;
  top:67px;
  left:0;
  right:0;
  padding:18px 22px 22px;
  background:#0b1623;
  flex-direction:column;
  align-items:stretch;
  border-top:1px solid #ffffff18
}

.nav-links.open {
  display:flex
}

.nav-links a:not(.btn) {
  display:block;
  padding:7px 0
}

.menu-toggle {
  display:block
}

.nav-links .btn {
  margin-top:8px
}

.hero-inner {
  padding-top:57px;
  padding-bottom:55px
}

.hero-panel {
  padding:19px
}

.section {
  padding:65px 0
}

.services-grid,.process-grid,.portfolio-grid {
  grid-template-columns:1fr
}

.service-card {
  padding:22px
}

.form-row {
  grid-template-columns:1fr
}

.benefits {
  gap:10px 16px
}

.footer-inner {
  align-items:flex-start;
  flex-direction:column
}

}