:root{
  --bg: #0b0f12;
  --panel: rgba(16, 19, 23, 0.65);
  --text: #f2f5f7;
  --muted: rgba(242, 245, 247, 0.72);
  --muted2: rgba(242, 245, 247, 0.55);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --brand: #00ABF3;
  --brand2: #0075AF;
  --max: 1180px;

  --radius: 16px;
  --radius2: 22px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 12px 30px rgba(0,0,0,.35);

  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

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

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

/* Footer */
.site-footer{
  padding: 84px 0 34px;
  color: rgba(255,255,255,.92);
  position: relative;
  overflow:hidden;
  background: url('https://images.unsplash.com/photo-1615873968403-89b6b0b4b5a1?auto=format&fit=crop&w=2200&q=70');
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 680px at 18% 10%, rgba(0, 171, 243, .18), transparent 62%),
    radial-gradient(1200px 680px at 92% 0%, rgba(0, 117, 175, .16), transparent 60%),
    linear-gradient(180deg, rgba(10,12,14,.86), rgba(10,12,14,.96));
  pointer-events:none;
}

.site-footer .container{position: relative;}

.footer__grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.25fr;
  gap: 44px;
}

.footer__brand{
  display:inline-grid;
  place-items:center;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  margin-bottom: 18px;
}

.footer__logo{
  width: 68px;
  height: 68px;
  object-fit: cover;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}

.footer__text{
  margin: 0;
  max-width: 360px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  font-size: 15px;
}

.footer__title{
  margin: 8px 0 16px;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.footer__links{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 14px;
}

.footer__links a{
  color: rgba(255,255,255,.76);
  transition: color 200ms var(--ease), transform 200ms var(--ease);
  display:inline-flex;
}

.footer__links a:hover{
  color: rgba(0, 171, 243, .95);
  transform: translateX(2px);
}

.footer__meta{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 16px;
  color: rgba(255,255,255,.74);
}

.footer__meta li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.footer__meta i{opacity: .92; margin-top: 2px;}
.footer__meta a{color: rgba(255,255,255,.78); transition: color 200ms var(--ease)}
.footer__meta a:hover{color: rgba(0, 171, 243, .95)}

.footer__bottom{margin-top: 54px;}

.footer__rule{
  height: 1px;
  background: rgba(255,255,255,.10);
}

.footer__copy{
  margin: 18px 0 0;
  text-align:center;
  color: rgba(255,255,255,.72);
}

@media (max-width: 980px){
  .site-footer{padding: 70px 0 30px;}
  .footer__grid{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 680px){
  .footer__grid{grid-template-columns: 1fr;}
  .footer__bottom{margin-top: 42px;}
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  color:#111;
  z-index: 9999;
}
.skip-link:focus{left:12px}

.sr-only{
  position:absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Topbar */
.topbar{
  height: 34px;
  background: rgba(10,12,14,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  font-size: 12.5px;
}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar__item{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,.86);
  letter-spacing:.02em;
}
.topbar__item i{font-size:12px;color: rgba(255,255,255,.75)}

.topbar__social{display:flex;align-items:center;gap:10px}
.icon-link{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.icon-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0, 171, 243, .55);
  background: rgba(0, 171, 243, .14);
}

/* Header shell */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
}
.navshell{
  height: 86px;
  display:flex;
  align-items:center;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(12, 14, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(10, 12, 14, 0.10);
  transition: background 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}

.navshell.is-solid{
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(10, 12, 14, 0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.navshell__inner{
  display:grid;
  grid-template-columns: 260px 1fr auto;
  align-items:center;
  gap: 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 0;
  min-width: 0;
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
  transform: scale(2.6);
  transform-origin: left center;
  will-change: transform;
}
.brand__name{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 14px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Desktop nav */
.nav{justify-self:center}
.nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap: 22px}

.nav__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 13px;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 10px 6px;
  opacity: .92;
  cursor: pointer;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.nav__link:hover{opacity:1;transform: translateY(-1px); color: var(--brand2)}

.has-submenu{position: relative}
.has-submenu .fa-chevron-down{font-size: 10px;opacity:.8}

.submenu{
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 210px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(10, 12, 14, 0.10);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  display:none;
}
.submenu a{
  display:flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(10,12,14,.82);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.submenu a:hover{background: rgba(0, 171, 243, .10); color: rgba(10,12,14,.92)}

.has-submenu:hover .submenu,
.has-submenu[data-open='true'] .submenu{display:block}

/* Actions */
.actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap: 12px;
}

.action-btn{
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.action-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.badge{
  position:absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: var(--brand);
  color:#002433;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid rgba(12, 14, 16, 0.8);
}

.burger{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(10,12,14,.16);
  background: rgba(10,12,14,.04);
  place-items:center;
  cursor:pointer;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.burger:hover{
  transform: translateY(-1px);
  border-color: rgba(10,12,14,.26);
  background: rgba(10,12,14,.07);
}

.burger__lines{
  width: 18px;
  height: 2px;
  background: rgba(10,12,14,.92);
  border-radius: 999px;
  position: relative;
}
.burger__lines::before,.burger__lines::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(10,12,14,.92);
  border-radius: 999px;
  transition: transform 220ms var(--ease), top 220ms var(--ease), opacity 220ms var(--ease);
}
.burger__lines::before{top:-6px}
.burger__lines::after{top:6px}

.burger.is-open .burger__lines{background: transparent}
.burger.is-open .burger__lines::before{top:0; transform: rotate(45deg)}
.burger.is-open .burger__lines::after{top:0; transform: rotate(-45deg)}

/* Hero */
.hero{
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display:grid;
  place-items: center;
  position: relative;
  padding-top: calc(34px + 86px);
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(0, 171, 243, .18), transparent 55%),
    radial-gradient(900px 500px at 70% 35%, rgba(0, 117, 175, .18), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.10) 55%, rgba(0,0,0,.35)),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.55));
}

.hero__content{
  position: relative;
  text-align: center;
  padding: 42px 0 60px;
}

.hero__kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  margin-bottom: 18px;
}
.hero__line{
  width: 68px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 171, 243, .95), transparent);
}
.hero__kickerText{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 171, 243, .98);
}

.hero__title{
  margin: 0 auto;
  max-width: 920px;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(40px, 6.2vw, 86px);
  text-shadow: 0 14px 44px rgba(0,0,0,.65);
}

.hero__cta{
  margin-top: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
}

.btn{
  height: 52px;
  padding: 0 26px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: .10em;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.btn i{opacity:.9}

.btn--primary{
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  color: #ffffff;
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.50);
}

.btn--ghost{
  background: rgba(235, 238, 241, 0.92);
  color: rgba(10,12,14,.92);
  border-color: rgba(255,255,255,.65);
}
.btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.50);
}

/* Section kicker */
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 171, 243, .98);
}
.section-kicker__line{
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 171, 243, .95));
}

/* About */
.about{
  padding: 84px 0 110px;
  background: #ffffff;
  color: rgba(10,12,14,.92);
  border-top: 1px solid rgba(10,12,14,.08);
}

.about__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:center;
  gap: 48px;
}

.about__media{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(10,12,14,.10);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,1);
}

.about__image{
  width: 100%;
  height: min(520px, 58vh);
  display:block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.02);
}

.about__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.55));
  pointer-events:none;
}

.about__badge{
  position:absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display:flex;
  align-items:flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10, 12, 14, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.about__badgeNum{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: rgba(255,255,255,.96);
}

.about__badgeText{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
}

.about__content{
  max-width: 560px;
}

.about__title{
  margin: 14px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(30px, 3.6vw, 46px);
}

.about__lead{
  margin: 14px 0 0;
  color: rgba(10,12,14,.66);
  font-size: 16px;
  line-height: 1.75;
}

.about__divider{
  margin: 22px 0;
  height: 1px;
  background: rgba(10,12,14,.10);
}

.about__lists{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.about__listTitle{
  margin: 0 0 12px;
  font-family: Montserrat, Manrope, sans-serif;
  font-size: 16px;
  letter-spacing: .02em;
}

.about__bullets{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
  color: rgba(10,12,14,.76);
}

.about__bullets li{
  position: relative;
  padding-left: 18px;
  line-height: 1.55;
}

.about__bullets li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 171, 243, .95);
  box-shadow: 0 0 0 6px rgba(0, 171, 243, .12);
}

.about__actions{
  margin-top: 28px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .about{padding: 66px 0 90px;}
  .about__inner{grid-template-columns: 1fr;}
  .about__content{max-width: 720px;}
}

@media (max-width: 680px){
  .about__lists{grid-template-columns: 1fr;}
  .about__image{height: 320px;}
}

/* Services */
.services{
  padding: 92px 0 110px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(0, 171, 243, .05), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 117, 175, .05), transparent 55%),
    #ffffff;
  color: rgba(10,12,14,.92);
  border-top: 1px solid rgba(10,12,14,.08);
}

.services__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
}

.services__title{
  margin: 10px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(36px, 4.4vw, 66px);
}

.services__cta{
  height: 54px;
  border-radius: 12px;
  border-color: rgba(10,12,14,.12);
  background: rgba(10,12,14,.82);
  color: #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
  align-self: flex-start;
}

.services__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.services__rule{
  margin: 26px 0 42px;
  height: 1px;
  background: rgba(10,12,14,.10);
}

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

.service-card{
  background: #ffffff;
  border: 1px solid rgba(10,12,14,.10);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
  position: relative;
  overflow:hidden;
}

.service-card::before{
  content:"";
  position:absolute;
  inset: -120px -140px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 171, 243, .10), transparent 60%);
  pointer-events:none;
}

.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  border-color: rgba(0, 171, 243, .22);
}

.service-card__icon{
  width: 62px;
  height: 62px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  position: relative;
  color: rgba(10,12,14,.90);
  margin-bottom: 14px;
}

.service-card__icon::before{
  content:"";
  position:absolute;
  left: -10px;
  top: -10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 171, 243, .22);
}

.service-card__icon i{
  font-size: 30px;
  position: relative;
  z-index: 1;
  transition: transform 260ms var(--ease);
}

.service-card:hover .service-card__icon i{transform: translateY(-2px)}

.service-card__title{
  margin: 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.service-card__text{
  margin: 10px 0 0;
  color: rgba(10,12,14,.66);
  line-height: 1.75;
  font-size: 15px;
}

.service-card__divider{
  margin: 22px 0 16px;
  height: 1px;
  background: rgba(10,12,14,.10);
}

.service-card__arrow{
  width: 48px;
  height: 48px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(10,12,14,.14);
  color: rgba(10,12,14,.84);
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.service-card__arrow:hover{
  transform: translateX(3px);
  background: rgba(0, 171, 243, .10);
  border-color: rgba(0, 171, 243, .30);
}

@media (max-width: 980px){
  .services{padding: 70px 0 90px;}
  .services__head{align-items: flex-start;}
  .services__grid{grid-template-columns: 1fr;}
  .services__cta{height: 52px;}
}

/* Projects */
.projects{
  padding: 92px 0 120px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(0, 171, 243, .05), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 117, 175, .05), transparent 55%),
    #ffffff;
  color: rgba(10,12,14,.92);
  border-top: 1px solid rgba(10,12,14,.08);
}

.projects__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
}

.projects__title{
  margin: 10px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(36px, 4.4vw, 66px);
}

.projects__cta{
  height: 54px;
  border-radius: 12px;
  border-color: rgba(10,12,14,.12);
  background: rgba(10,12,14,.82);
  color: #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
  align-self: flex-start;
}

.projects__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.projects__rule{
  margin: 26px 0 42px;
  height: 1px;
  background: rgba(10,12,14,.10);
}

.projects__slider{
  position: relative;
}

.projects__swiper{
  padding-bottom: 26px;
}

.projects__swiper .swiper-slide{
  height: auto;
}

.project-card{
  position: relative;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(10,12,14,.06);
  border: 1px solid rgba(10,12,14,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  height: 420px;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}

.project-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.14);
  border-color: rgba(0, 171, 243, .22);
}

.project-card__img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.03);
}

.project-card__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.project-card__content{
  position:absolute;
  left: 22px;
  top: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  color: #ffffff;
  z-index: 1;
}

.project-card__title{
  margin: 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  text-shadow: 0 18px 40px rgba(0,0,0,.40);
}

.project-card__tag{
  margin: 10px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 171, 243, .98);
}

.project-card__arrow{
  position:absolute;
  left: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(10, 12, 14, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  z-index: 1;
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
  opacity: 0;
}

.project-card:hover .project-card__overlay,
.project-card:hover .project-card__content{opacity: 1}

.project-card:hover .project-card__content{transform: none}

.project-card:hover .project-card__arrow{
  opacity: 1;
  transform: translateX(4px);
  border-color: rgba(0, 171, 243, .38);
  background: rgba(10, 12, 14, 0.34);
}

.project-card--featured .project-card__overlay{opacity: 1; background: rgba(10,12,14,.62)}
.project-card--featured .project-card__content{opacity: 1; transform: none}
.project-card--featured .project-card__arrow{opacity: 1}

.projects__pagination{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
}

.projects__pagination .swiper-pagination-bullet{
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(10,12,14,.16);
  opacity: 1;
  transition: background 220ms var(--ease), width 220ms var(--ease);
}

.projects__pagination .swiper-pagination-bullet-active{
  width: 44px;
  background: rgba(0, 171, 243, .75);
}

@media (max-width: 980px){
  .projects{padding: 70px 0 100px;}
  .project-card{height: 380px;}
}

@media (max-width: 680px){
  .project-card{height: 340px;}
}

/* Testimonials */
.testimonials{
  padding: 92px 0 120px;
  background: #ffffff;
  color: rgba(10,12,14,.92);
  border-top: 1px solid rgba(10,12,14,.08);
}

.testimonials__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
}

.testimonials__title{
  margin: 10px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(44px, 5.2vw, 78px);
}

.testimonials__cta{
  height: 54px;
  border-radius: 12px;
  border-color: rgba(10,12,14,.12);
  background: rgba(10,12,14,.82);
  color: #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
  align-self: flex-start;
}

.testimonials__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.testimonials__rule{
  margin: 26px 0 60px;
  height: 1px;
  background: rgba(10,12,14,.10);
}

.testimonials__slider{
  position: relative;
  display:grid;
  grid-template-columns: 72px 1fr 72px;
  align-items:center;
  gap: 26px;
}

.testimonials__swiper{
  width: 100%;
  padding: 10px 0 26px;
}

.testimonial{
  margin: 0;
  text-align: center;
  padding: 18px 10px 0;
}

.testimonial__quote{
  margin: 0 auto;
  max-width: 860px;
  color: rgba(10,12,14,.60);
  font-size: 18px;
  line-height: 1.85;
}

.testimonial__by{
  margin-top: 34px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}

.testimonial__name{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.testimonial__role{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 171, 243, .98);
}

.testimonials__nav{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,14,.10);
  background: rgba(0, 171, 243, .18);
  color: rgba(10,12,14,.84);
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.testimonials__nav:hover{
  transform: translateY(-2px);
  background: rgba(0, 171, 243, .26);
  border-color: rgba(0, 171, 243, .30);
}

.testimonials__nav:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.testimonials__pagination{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
}

.testimonials__pagination .swiper-pagination-bullet{
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(10,12,14,.16);
  opacity: 1;
  transition: background 220ms var(--ease), width 220ms var(--ease);
}

.testimonials__pagination .swiper-pagination-bullet-active{
  width: 44px;
  background: rgba(0, 171, 243, .75);
}

@media (max-width: 980px){
  .testimonials{padding: 70px 0 100px;}
  .testimonials__slider{grid-template-columns: 60px 1fr 60px; gap: 18px;}
  .testimonial__quote{font-size: 17px;}
}

@media (max-width: 680px){
  .testimonials__slider{grid-template-columns: 1fr; gap: 16px;}
  .testimonials__nav{display:none;}
  .testimonials__rule{margin-bottom: 44px;}
  .testimonials__title{font-size: clamp(36px, 8vw, 52px);}
}

/* Booking / Quote */
.booking{
  padding: 92px 0 120px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(0, 171, 243, .05), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 117, 175, .05), transparent 55%),
    #ffffff;
  border-top: 1px solid rgba(10,12,14,.08);
}

.booking__shell{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(10,12,14,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.14);
  background: #ffffff;
}

.booking__inner{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch;
}

.booking__formWrap{
  background: rgba(45, 52, 59, 1);
  color: rgba(255,255,255,.96);
  position: relative;
  overflow:hidden;
}

.booking__formWrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(0, 171, 243, .16), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(0, 117, 175, .16), transparent 60%);
  opacity: .65;
  pointer-events:none;
}

.booking__pad{
  position: relative;
  padding: 54px 18px 58px;
  padding-left: 46px;
  padding-right: 30px;
  max-width: 600px;
}

.booking .section-kicker{
  font-size: 11px;
  letter-spacing: .16em;
}

.booking__kicker{color: rgba(255,255,255,.76)}
.booking__kicker .section-kicker__line{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
}

.booking__title{
  margin: 14px 0 0;
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(32px, 3.9vw, 54px);
}

.booking__form{margin-top: 18px;}

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

.field{position: relative}
.field--full{grid-column: 1 / -1}

.booking input,
.booking textarea{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.98);
  color: rgba(10,12,14,.88);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14.5px;
  outline: none;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.booking input{height: 46px;}

.booking textarea{
  min-height: 104px;
  resize: vertical;
  padding-top: 16px;
}

.booking input::placeholder,
.booking textarea::placeholder{color: rgba(10,12,14,.50)}

.booking input:focus,
.booking textarea:focus{
  transform: translateY(-1px);
  border-color: rgba(0, 171, 243, .55);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.booking__submit{
  margin-top: 20px;
  height: 46px;
  border-radius: 10px;
  padding-inline: 26px;
}

.booking__media{
  position: relative;
  overflow:hidden;
}

.booking__image{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

.booking__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,0));
  pointer-events:none;
}

@media (max-width: 980px){
  .booking__inner{grid-template-columns: 1fr;}
  .booking{padding: 70px 0 100px;}
  .booking__pad{padding-inline: 20px; max-width: 820px;}
  .booking__media{min-height: 260px;}
}

@media (max-width: 680px){
  .booking__grid{grid-template-columns: 1fr;}
}

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal--left{transform: translateX(-22px)}
.reveal--right{transform: translateX(22px)}

.reveal--d1{--reveal-delay: 90ms}
.reveal--d2{--reveal-delay: 180ms}
.reveal--d3{--reveal-delay: 270ms}

.reveal.is-revealed{
  opacity: 1;
  transform: none;
}

/* Mobile panel */
.mobile-panel{position: fixed; inset: 0; pointer-events: none;}
.mobile-panel.is-open{pointer-events: auto;}
.backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  border:0;
  transition: opacity 240ms var(--ease);
}
.mobile-panel.is-open .backdrop{opacity: 1}

.mobile-panel__inner{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 92vw);
  background: rgba(10, 12, 14, 0.96);
  border-left: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: -18px 0 60px rgba(0,0,0,.55);
  transform: translateX(102%);
  transition: transform 260ms var(--ease);
  padding: 16px;
}
.mobile-panel.is-open .mobile-panel__inner{transform: translateX(0)}

.mobile-panel__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 6px 2px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.mobile-panel__title{
  font-family: Montserrat, Manrope, sans-serif;
  font-weight: 700;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
}

.mobile-nav__list{list-style:none;margin: 14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mobile-nav__link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.94);
  cursor:pointer;
  letter-spacing:.06em;
  font-family: Montserrat, Manrope, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 10px 24px rgba(0,0,0,.40);
  transition: transform 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
.mobile-nav__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(0, 171, 243, .45);
}

.mobile-nav__link:focus-visible{
  outline: 2px solid rgba(0, 171, 243, .65);
  outline-offset: 3px;
}

.mobile-nav__item > a.mobile-nav__link{
  justify-content: flex-start;
}

.mobile-submenu{display:none;padding: 8px 10px 6px}
.mobile-submenu a{
  display:flex;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.mobile-submenu a:hover{
  background: rgba(0, 171, 243, .12);
  border-color: rgba(0, 171, 243, .22);
}
.mobile-nav__item.is-open .mobile-submenu{display:block}

/* Responsive */
@media (max-width: 980px){
  .navshell__inner{grid-template-columns: 1fr auto;}
  .nav{display:none}
  .actions{gap: 10px}
  .brand__name{display:none}
  .burger{display:grid}
}
@media (max-width: 680px){
  .topbar{height:auto}
  .topbar__inner{height:auto;padding: 8px 0;row-gap: 8px;justify-content:center}
  .topbar__left,.topbar__right{justify-content:center}
  .hero__line{width: 42px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .icon-link,.action-btn,.burger,.btn{transition:none !important}
  .mobile-panel__inner,.backdrop{transition:none !important}
  .hero__bg{transform:none}
  .reveal{opacity: 1 !important; transform: none !important; transition: none !important}
}