:root{
  --bg:#062734;
  --bg2:#05222c;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.12);
  --text:#eaf6fb;
  --muted: rgba(234,246,251,.78);

  --turq:#15c6de;
  --turq2:#0aaac0;

  --orange:#f7931e;
  --orange2:#ffb14c;

  --white:#ffffff;
  --ink:#06212b;

  --radius: 18px;
  --shadow: 0 18px 40px rgba(0,0,0,.25);

  --wrap: min(1140px, calc(100% - 64px));
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(21,198,222,.15), transparent 55%),
              radial-gradient(1000px 600px at 70% 60%, rgba(247,147,30,.10), transparent 60%),
              var(--bg);
  color: var(--text);
}

/* Wrapper */
.wrap{ width: var(--wrap); margin: 0 auto; }

/* Nav */
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(4,28,36,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:18px;
  padding: 16px 0;
}

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo{
  height: 85px;  
  width: auto;
  display:block;
}

.nav__menu{
  display:flex;
  align-items:center;
  gap: 26px;
}
.nav__link{
  color: rgba(234,246,251,.88);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 2px;
  position: relative;
}
.nav__link:hover{ color: var(--white); }
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom: 3px;
  height: 2px;
  background: var(--turq);
  border-radius: 99px;
}

.nav__toggle{
  display:none;
  width: 44px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(234,246,251,.9);
  margin: 4px auto;
  border-radius: 2px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  transition: .15s ease;
  cursor:pointer;
}
.btn--getstarted{ margin-left: 8px; }
.btn--outline{
  color: var(--white);
  border-color: rgba(21,198,222,.35);
  background: rgba(21,198,222,.06);
}
.btn--outline:hover{
  border-color: rgba(247,147,30,.55);
  background: rgba(247,147,30,.10);
}
.btn--ghost{
  color: var(--turq);
  border-color: rgba(21,198,222,.30);
  background: rgba(255,255,255,.04);
}
.btn--ghost:hover{ background: rgba(255,255,255,.08); }
.btn--orange{
  color: #1c0f00;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 28px rgba(247,147,30,.18);
}
.btn--orange:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.btn--full{ width:100%; }

/* Hom */
.hom{
  padding: 72px 0 60px;
}
.hom__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items:center;
}
.hom__title{
  font-size: clamp(42px, 4.3vw, 64px);
  line-height: 1.02;
  margin: 0 0 14px;
  color: var(--turq);
  font-weight: 800;
}
.hom__sub{
  max-width: 60ch;
  margin: 0 0 22px;
  color: rgba(234,246,251,.85);
  font-size: 14px;
}
.hom__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hom__right{
  border-radius: var(--radius);
  min-height: 330px;
  box-shadow: var(--shadow);
  border: 0;
  overflow: hidden;
}

/* Section */
.section{
  position: relative;
  padding: 86px 0; 
}
.section__content{ position: relative; z-index: 2; }

.center{ text-align:center; }
.title{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  color: var(--turq);
  font-weight: 800;
}
.title--left{ text-align:left; }
.lead{
  margin: 0 auto 28px;
  color: rgba(234,246,251,.86);
  max-width: 90ch;
  font-size: 14px;
  line-height: 1.8;
}
.lead--narrow{ max-width: 78ch; }
.lead--left{ margin-left: 0; text-align:left; }
.light{ color: var(--turq); }

.muted{ color: var(--muted); }
.tiny{ font-size: 12px; margin: 10px 0 0; }

/* Background sections */
.section--bg{
  background: url("assets/about-bg.jpg") center/cover no-repeat;
}
.section--why{
  background: url("/images/x13.png") center/cover no-repeat;
}
.section--collab{
  background: url("assets/collaboration.jpg") center/cover no-repeat;
}

/* Overlays */
.overlay{
  position:absolute;
  inset:0;
  z-index: 1;
}
.overlay--dark{
  background: linear-gradient(180deg, rgba(5,22,28,.65), rgba(5,22,28,.70));
}
/*.overlay--turq{
  background: rgba(10,170,192,.45);
}*/
.overlay--soft{
  background: linear-gradient(180deg, rgba(5,22,28,.62), rgba(5,22,28,.62));
}

/* Value grid */
.valueGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.valueCard{
  text-align:left;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.valueCard h3{
  margin: 0 0 8px;
  color: var(--turq);
  font-size: 14px;
}
.valueCard p{
  margin: 0;
  font-size: 13px;
  color: rgba(234,246,251,.82);
}

/* Stats */
.stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.stat__num{ color: var(--turq); font-weight: 800; font-size: 16px; }
.stat__label{ color: rgba(234,246,251,.78); font-size: 12px; margin-top: 6px; }

/* Services */
.section--plain{
  background: radial-gradient(1200px 700px at 30% 20%, rgba(21,198,222,.12), transparent 60%),
              radial-gradient(1200px 700px at 70% 80%, rgba(247,147,30,.10), transparent 62%),
              var(--bg2);
}
.servicesGrid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.svcCard{
  text-align:left;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.svcIcon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  margin-bottom: 12px;
}
.svcTag{
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(234,246,251,.70);
  margin-bottom: 8px;
}
.svcCard h3{
  margin: 0 0 10px;
  color: var(--white);
  font-size: 16px;
}
.svcCard p{
  margin: 0 0 14px;
  color: rgba(234,246,251,.80);
  font-size: 13px;
}
.svcLink{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: var(--orange);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
}
.svcLink:hover{ color: var(--orange2); text-decoration: underline; }

.svcCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,.18);
  border-color: rgba(21,198,222,.22);
}
.whyCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
}


/* Collaboration */
.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}
.split__left{ padding-right: 6px; }
.collabCard{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 22px;
}
.collabCard h3{ margin: 0 0 10px; color: var(--white); }
.checkList{
  margin: 0;
  padding: 0 0 0 18px;
  color: rgba(234,246,251,.82);
  font-size: 13px;
  line-height: 1.7;
}
.checkList li{ margin: 8px 0; }
.note{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(234,246,251,.78);
  font-size: 12px;
}
.note__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(247,147,30,.18);
}

.partnerGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 18px;
}
.partner{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.partner h3{ margin:0 0 6px; color: var(--turq); font-size: 14px; }
.partner p{ margin:0; color: rgba(234,246,251,.80); font-size: 13px; }

/* Why cards */
.whyGrid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.whyCard{
  border-radius: 26px;
  padding: 22px;
  border: 1px solid rgba(255, 165, 0, 0.35);
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.18),
    rgba(255, 165, 0, 0.08)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.whyCard h3{
  margin: 0 0 8px;
  color: #15c6de;
  font-size: 15px;
}
.whyCard p{
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 13px;

  /* "writing" reveal effect */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}


/* Card reveal animation (Services + Why) */
.js .svcCard,
.js .whyCard{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .6s ease, transform .6s ease, box-shadow .6s ease;
  will-change: opacity, transform;
}
.js .svcCard.inview,
.js .whyCard.inview{
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .js .svcCard, .js .whyCard{ transition: none; transform: none; opacity: 1; }
}

/* Testimonials */
.testGrid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.whyCard.inview h3,
.whyCard.inview p{
  animation: whyReveal 1.05s ease forwards;
}

.whyCard.inview h3{
  opacity: 0;
  transform: translateY(8px);
  clip-path: inset(0 100% 0 0);
}

.whyCard.inview p{
  animation-duration: 1.25s;
}

.whyCard:nth-child(1).inview h3,
.whyCard:nth-child(1).inview p{ animation-delay: .05s; }
.whyCard:nth-child(2).inview h3,
.whyCard:nth-child(2).inview p{ animation-delay: .18s; }
.whyCard:nth-child(3).inview h3,
.whyCard:nth-child(3).inview p{ animation-delay: .31s; }

@keyframes whyReveal{
  from{ opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
  to{ opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

.testCard{
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 18px;
}
.testHead{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.avatar{
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(247,147,30,.20);
  border: 1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  color: #fff;
}
.name{ font-weight: 700; color: var(--turq); font-size: 13px; }
.role{ color: rgba(234,246,251,.70); font-size: 12px; }
.quote{ margin: 0; color: rgba(234,246,251,.85); font-size: 13px; line-height: 1.8; }

/* Contact */
.section--contact{
  background: var(--bg2);
  padding: 52px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.contactGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  align-items: start;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.contactCard{
  text-align:left;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 16px;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.contactCard--white{
  background: rgba(247,147,30,.14);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  position: relative;
}
.contactCard--white::before{ content:none; }

.contactCard--white .muted{ color: rgba(234,246,251,.78); }
.contactCard--white a{ color: rgba(234,246,251,.92); }
.contactCard--white a:hover{ color: var(--white); }

.contactTitle{
  margin: 0 0 10px;
  font-size: 16px;
}
.contactItem{ margin-top: 12px; }
.label{
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(234,246,251,.60);
  margin-bottom: 6px;
}
.contactCard--white .label{ color: rgba(234,246,251,.70); }
.value a{ text-decoration:none; font-weight: 700; }

.socialRow{ display:flex; gap:10px; margin-top: 10px; }
.socialBtn{
  width: 38px; height: 38px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,246,251,.92);
}
.socialBtn:hover{ filter: brightness(1.06); }
.socialBtn{ font-size: 16px; line-height: 1; }
.socialBtn i{ font-size: 16px; }
.orangeHint{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(234,246,251,.92);
}

/* Form */
.form label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  margin: 10px 0 8px;
  color: rgba(234,246,251,.88);
}
.form input, .form select, .form textarea{
  width: 100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--white);
  outline: none;
  font-family: inherit;
}

.form select option{ color: #06212b; background: #ffffff; }
.form select{ color: var(--white); }
.form textarea{ min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(247,147,30,.55);
  box-shadow: 0 0 0 4px rgba(247,147,30,.16);
}

/* Footer */
.footer{
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(4,28,36,.55);
}
.footer__inner{
  width: var(--wrap);
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
  color: rgba(234,246,251,.75);
  font-size: 12px;
}


/* Hero slider */
.heroSlider{ position: relative; overflow: hidden; border: 0; }
.heroTrack{
  display:flex;
  transition: transform .55s ease;
  will-change: transform;
}
.heroSlide{ min-width: 100%; padding: 0; }
.hom__kicker{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(234,246,251,.78);
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.heroBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(4,28,36,.28);
  color: rgba(234,246,251,.95);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  backdrop-filter: blur(10px);
}
.heroBtn:hover{ background: rgba(4,28,36,.42); }
.heroBtn--prev{ left: 16px; }
.heroBtn--next{ right: 16px; }

.heroBtn:focus{ outline: none; }
.heroBtn:focus-visible{ box-shadow: 0 0 0 4px rgba(21,198,222,.14); }

.heroDots{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
}
.heroDot{
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.heroDot.is-active{
  background: var(--turq);
  border-color: rgba(21,198,222,.55);
  box-shadow: 0 0 0 4px rgba(21,198,222,.14);
}

/* Hero images per slide */
.hom__right{ background: linear-gradient(180deg, rgba(6,39,52,.10), rgba(6,39,52,.35)); }
.hom__right--slide1{
  background:
    linear-gradient(180deg, rgba(6,39,52,.10), rgba(6,39,52,.35)),
    url("/images/lp.jpg");
  background-size: cover;
  background-position: center;
}
.hom__right--slide2{
  background:
    linear-gradient(180deg, rgba(6,39,52,.10), rgba(6,39,52,.38)),
    url("/images/partnership.jpg");
  background-size: cover;
  background-position: center;
}

/* Prefooter */
.section--prefooter{
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 54px 0;
}
.prefooter{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items:start;
}
.brand__logo--sm{ height: 54px; }
.prefooter__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.preCol{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.preTitle{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(234,246,251,.72);
  margin-bottom: 10px;
}
.preCol a{
  display:block;
  color: rgba(234,246,251,.86);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0;
}
.preCol a:hover{ color: var(--white); text-decoration: underline; }
.preCol--newsletter .brand{ margin-bottom: 6px; }
.preCol--newsletter .newsletter{ margin-top: 12px; }


.preText{
  display:block;
  color: rgba(234,246,251,.78);
  font-size: 13px;
  margin-top: 10px;
}
.preSocial{ display:flex; flex-wrap:wrap; gap:10px; }
.socialBtn--sm{ width: 36px; height: 36px; font-size: 13px; }

/* Responsive */
@media (max-width: 980px){
  :root{ --wrap: min(1140px, calc(100% - 36px)); }
  .hom__grid{ grid-template-columns: 1fr; }
  .hom__right{ min-height: 280px; }
  .valueGrid{ grid-template-columns: repeat(2,1fr); }
  .stats{ grid-template-columns: repeat(2,1fr); }
  .servicesGrid{ grid-template-columns: repeat(2,1fr); }
  .partnerGrid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .whyGrid{ grid-template-columns: repeat(2, 1fr); }
  .testGrid{ grid-template-columns: 1fr; }
  .contactGrid{ grid-template-columns: 1fr; }
  .footer__inner{ flex-direction: column; align-items:flex-start; }
}

@media (max-width: 840px){
  .nav__toggle{ display:inline-block; }
  .nav__menu{
    position: absolute;
    top: calc(100% + 10px);
    right: calc((100% - var(--wrap))/2);
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(4,28,36,.92);
    backdrop-filter: blur(10px);
    min-width: 240px;
  }
  .nav__menu.open{ display:flex; }
  .nav__link{ padding: 10px 12px; border-radius: 12px; }
  .nav__link:hover{ background: rgba(255,255,255,.06); }
}

@media (max-width: 520px){
  .heroBtn{ display:none; }

  .hom{ padding-top: 58px; }
  .brand__logo{ height: 48px; }
}
/* Contact (white) details styling */
.contactCard--white .contactItem{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.contactCard--white .contactItem + .contactItem{ margin-top: 10px; }
.contactCard--white .value{ font-weight: 800; }
.contactCard--white .value a{ font-weight: 800; }

/* Newsletter */
.newsletter{ margin-top: 14px; text-align:left; }
.newsletter__label{
  display:block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(234,246,251,.72);
  margin-bottom: 10px;
}
.newsletter__row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.newsletter input{
  flex: 1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--white);
  outline:none;
  font-family: inherit;
}
.newsletter input:focus{
  border-color: rgba(247,147,30,.55);
  box-shadow: 0 0 0 4px rgba(247,147,30,.16);
}
.newsletter__btn{ padding: 12px 16px; }
.newsletter__note{ margin-top: 10px; }

@media (max-width: 640px){
  .servicesGrid{ grid-template-columns: 1fr; }
  .whyGrid{ grid-template-columns: 1fr; }
  .prefooter{ grid-template-columns: 1fr; }
  .prefooter__cols{ grid-template-columns: 1fr; }
  .newsletter__row{ flex-direction: column; align-items: stretch; }
  .newsletter__btn{ width: 100%; }
}

@media (max-width: 640px){
  .section--why{
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--bg);
  }

  .section.section--why{ padding: 64px 0; }
}