@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --ink:#15212a;
  --muted:#66727b;
  --paper:#f6f5f1;
  --edge:rgba(20,35,40,.14)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:'DM Sans',Arial,sans-serif;
  line-height:1.6
}
a {
  text-decoration:none;
  color:inherit
}
img {
  max-width:100%;
  display:block
}
button,input,textarea {
  font:inherit
}
button {
  cursor:pointer
}
.container {
  width:min(1180px,calc(100% - 44px));
  margin:auto
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:84px
}
.logo {
  font-family:Manrope,Arial,sans-serif;
  letter-spacing:.08em;
  font-weight:800;
  font-size:17px
}
.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:13px;
  font-weight:700
}
.nav-links a:hover,.link:hover {
  opacity:.65
}
.nav-toggle {
  display:none;
  background:none;
  border:1px solid currentColor;
  border-radius:10px;
  padding:9px 12px;
  color:inherit
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 25px;
  border-radius:5px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border:0;
  font-size:13px;
  transition:transform .2s,opacity .2s
}
.btn:hover {
  transform:translateY(-2px);
  opacity:.92
}
.btn-outline {
  border:1px solid currentColor;
  background:transparent;
  color:inherit
}
.eyebrow {
  font-size:11px;
  letter-spacing:.22em;
  font-weight:800;
  text-transform:uppercase
}
.section {
  padding:110px 0
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:38px
}
.section h2 {
  font:800 clamp(32px,4vw,58px)/1.13 Manrope,sans-serif;
  letter-spacing:-.05em;
  margin:12px 0
}
.muted {
  color:var(--muted)
}
.card-img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.image-wrap {
  overflow:hidden
}
.image-wrap:hover .card-img {
  transform:scale(1.035)
}
.footer {
  padding:55px 0;
  border-top:1px solid var(--edge)
}
.footer-grid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s,transform .6s
}
.reveal.visible {
  opacity:1;
  transform:none
}
.demo-label {
  position:fixed;
  bottom:14px;
  right:14px;
  z-index:20;
  background:#142029;
  color:white;
  font:700 10px DM Sans,sans-serif;
  letter-spacing:.08em;
  padding:9px 12px;
  border-radius:5px;
  box-shadow:0 8px 20px #0002
}
@media(max-width:720px) {
  .nav {
    height:72px
  }
  .nav-toggle {
    display:block
  }
  .nav-links {
    display:none;
    position:absolute;
    z-index:10;
    top:70px;
    left:0;
    right:0;
    padding:22px;
    background:var(--nav-bg,#fff);
    color:var(--nav-color,#15212a);
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 12px 30px #0002
  }
  .nav-links.open {
    display:flex
  }
  .section {
    padding:68px 0
  }
  .section-head {
    display:block
  }
  .container {
    width:min(100% - 32px,1180px)
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}
body {
  background:#0b1520;
  color:#eaf4f6;
  --accent:#29c9dc;
  --muted:#aabac2;
  --edge:#ffffff24;
  --nav-bg:#0a1721;
  --nav-color:#fff
}
.site-head {
  position:absolute;
  z-index:10;
  left:0;
  right:0;
  top:0
}
.logo {
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.08em
}
.logo-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:linear-gradient(135deg,#43eddd,#2188cb);
  color:#071725;
  border-radius:9px;
  font-size:21px;
  font-weight:900
}
.thin {
  font-weight:500;
  font-size:9px;
  letter-spacing:.17em;
  margin-left:-5px;
  align-self:end;
  margin-bottom:8px
}
.nav-cta {
  border:1px solid #57d9e6;
  padding:10px 17px;
  border-radius:4px
}
.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 70% 42%,#15344a 0,#0b1520 52%);
  min-height:730px;
  display:flex;
  align-items:center
}
.hero-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 50%,#22b9db1f,transparent 54%)
}
.hero-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(90deg,transparent,#000 70%)
}
.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  min-height:730px;
  padding-top:90px
}
.hero-text {
  position:relative;
  z-index:2
}
.status {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#74dce4;
  letter-spacing:.16em;
  font-weight:800;
  font-size:10px
}
.dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#50f3c8;
  box-shadow:0 0 12px #50f3c8
}
.hero h1 {
  font:800 clamp(49px,6.5vw,95px)/1.08 Manrope,sans-serif;
  letter-spacing:-.07em;
  margin:28px 0
}
.hero h1 span {
  color:#4ad8e5
}
.period {
  color:#fff!important
}
.hero-text>p {
  max-width:570px;
  font-size:17px;
  color:#aec2cb;
  line-height:1.8
}
.hero-actions {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:32px
}
.hero-bottom {
  display:flex;
  gap:20px;
  margin-top:80px;
  color:#9bb0bd;
  font-size:10px;
  letter-spacing:.2em;
  font-weight:800
}
.hero-visual {
  position:relative;
  min-height:480px
}
.orb {
  position:absolute;
  border-radius:50%;
  filter:drop-shadow(0 0 45px #20d3d344)
}
.orb-a {
  width:350px;
  height:350px;
  top:30px;
  right:12px;
  background:radial-gradient(circle at 30% 30%,#6ef6fc,#2292b9 35%,#12344d 70%);
  box-shadow:inset -30px -30px 60px #071725a8,0 0 90px #20d3d333
}
.orb-b {
  width:250px;
  height:250px;
  top:175px;
  right:150px;
  border:1px solid #65ddeb78;
  background:linear-gradient(145deg,#3de4f525,#071725bb);
  backdrop-filter:blur(3px)
}
.hero-visual-label {
  position:absolute;
  bottom:0;
  right:0;
  display:grid;
  gap:12px;
  color:#b1d7de
}
.hero-visual-label span {
  font-size:10px;
  letter-spacing:.2em
}
.hero-visual-label strong {
  font:800 17px/1.5 Manrope,sans-serif;
  letter-spacing:.08em
}
.proof {
  border-bottom:1px solid #ffffff1c;
  background:#0f1b26
}
.proof-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr)
}
.proof-grid>div {
  padding:35px 20px;
  border-right:1px solid #ffffff1c;
  display:flex;
  align-items:center;
  gap:18px
}
.proof strong {
  font:700 25px Manrope,sans-serif;
  color:#52d7e7
}
.proof span {
  font-size:10px;
  letter-spacing:.13em;
  font-weight:800
}
.cyan {
  color:#58d5e3
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px
}
.about {
  background:#f5f7f6;
  color:#162631
}
.about h2 em {
  color:#159cad;
  font-style:normal
}
.about p:not(.eyebrow) {
  font-size:17px;
  color:#4c5e67
}
.text-link {
  display:inline-block;
  margin-top:15px;
  font-weight:800;
  font-size:13px;
  color:#0b8fa1
}
.expertise {
  background:#eaf0f1;
  color:#152a32
}
.expertise .cyan {
  color:#0b91a2
}
.expertise-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.expertise-item {
  padding:30px;
  background:#fff;
  min-height:295px;
  display:flex;
  flex-direction:column
}
.expertise-item>span {
  font-size:11px;
  font-weight:800;
  color:#27a5b5
}
.exp-icon {
  font-size:40px;
  color:#1e9cae;
  margin:27px 0 8px
}
.expertise h3 {
  font:800 20px/1.3 Manrope,sans-serif
}
.expertise-item p {
  font-size:14px;
  color:#697a80
}
.work {
  background:#0e1c27
}
.work .section-head .muted {
  max-width:360px
}
.portfolio-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.work-card {
  display:block;
  background:#142936;
  transition:transform .2s
}
.work-card:hover {
  transform:translateY(-4px)
}
.work-image {
  height:300px;
  overflow:hidden
}
.work-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.work-card:hover img {
  transform:scale(1.05)
}
.work-detail {
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.work-detail .eyebrow {
  color:#6dbfcc;
  font-size:10px
}
.work-detail h3 {
  font:800 23px Manrope,sans-serif;
  margin:7px 0
}
.arrow {
  font-size:25px;
  color:#62e0e6
}
.statement {
  text-align:center;
  background:radial-gradient(circle at 50% 50%,#1a4a60,#0b1823);
  padding:115px 0
}
.statement h2 {
  font:800 clamp(43px,6vw,80px)/1.18 Manrope,sans-serif;
  letter-spacing:-.07em
}
.statement em {
  color:#5de2e5;
  font-style:normal
}
.contact {
  background:#edf3f3;
  color:#132932
}
.contact-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:center
}
.contact h2 em {
  color:#159eab;
  font-style:normal
}
.contact p {
  color:#5f7178
}
.contact-panel {
  background:#fff;
  padding:42px;
  box-shadow:0 20px 70px #10334115
}
.contact-panel h3 {
  font:800 24px Manrope,sans-serif
}
.contact-panel small {
  display:block;
  font-size:11px;
  color:#62757c;
  margin-top:22px
}
.footer {
  background:#0b1520
}
.footer span,.footer a:not(.logo) {
  font-size:11px;
  color:#aac0c7
}
@media(max-width:850px) {
  .hero-inner {
    grid-template-columns:1fr
  }
  .hero-visual {
    display:none
  }
  .hero {
    min-height:700px
  }
  .hero-inner {
    min-height:700px
  }
  .split,.contact-row {
    gap:35px
  }
  .portfolio-grid {
    gap:13px
  }
}
@media(max-width:720px) {
  .hero h1 {
    font-size:clamp(42px,10vw,66px)
  }
  .hero-bottom {
    margin-top:50px;
    display:grid;
    gap:5px
  }
  .proof-grid {
    grid-template-columns:1fr
  }
  .proof-grid>div {
    border-bottom:1px solid #ffffff1c;
    padding:17px
  }
  .split,.contact-row,.expertise-grid,.portfolio-grid {
    grid-template-columns:1fr
  }
  .work-image {
    height:230px
  }
  .contact-panel {
    padding:24px
  }
  .thin {
    font-size:8px
  }
}