:root{
  --about-navy:#00234d;
  --about-blue:#0065a3;
  --about-cyan:#0ca8d8;
  --about-orange:#ff6600;
  --about-text:#526b7d;
  --about-light:#f3f8fb;
  --about-border:rgba(0,35,77,.11);
}

.about-page{
  overflow:hidden;
  color:var(--about-navy);
  font-family:Poppins,sans-serif;
}

.about-container{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.about-label{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
}

.about-label-blue{
  color:var(--about-blue);
  background:rgba(0,101,163,.07);
  border-color:rgba(0,101,163,.12);
}

.about-label-light{
  color:#a9e5ff;
  background:rgba(103,209,255,.08);
  border-color:rgba(144,221,255,.16);
}

.about-hero{
  position:relative;
  min-height:720px;
  padding:150px 0 100px;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 25%,rgba(0,139,199,.27),transparent 35%),
    linear-gradient(135deg,#001d3d,#004870);
}

.about-glow{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}

.about-glow-one{
  top:-240px;
  right:-160px;
  width:620px;
  height:620px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 0 0 90px rgba(255,255,255,.018),
    0 0 0 180px rgba(255,255,255,.014);
}

.about-glow-two{
  bottom:-240px;
  left:-200px;
  width:520px;
  height:520px;
  background:rgba(0,135,190,.08);
  filter:blur(20px);
}

.about-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  align-items:center;
  gap:70px;
}

.about-hero-copy h1{
  max-width:620px;
  margin:24px 0 24px;
  color:#fff;
  font-size:clamp(3.25rem,5vw,4.6rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.052em;
}

.about-hero-copy h1 span{
  color:#6fd8f5;
}

.about-hero-copy > p{
  max-width:590px;
  color:rgba(224,239,249,.76);
  font-size:1rem;
  line-height:1.85;
}

.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:32px;
}

.about-button{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 23px;
  border-radius:13px;
  font-size:.76rem;
  font-weight:700;
  text-decoration:none;
  transition:.2s ease;
}

.about-button:hover{
  transform:translateY(-2px);
}

.about-button-orange{
  color:#fff;
  background:linear-gradient(135deg,#ff6600,#ff9147);
  box-shadow:0 14px 28px rgba(255,102,0,.22);
}

.about-button-outline{
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
}

.about-button-blue-outline{
  color:var(--about-blue);
  border:1px solid rgba(0,101,163,.2);
  background:#fff;
}

.about-hero-visual{
  padding:24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.5);
  border-radius:24px;
  box-shadow:0 30px 70px rgba(0,18,42,.28);
}

.about-visual-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:19px;
  border-bottom:1px solid var(--about-border);
}

.about-visual-head > div{
  display:flex;
  align-items:center;
  gap:11px;
}

.about-symbol{
  display:grid;
  width:39px;
  height:39px;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#ff6600,#ff984d);
  border-radius:11px;
  font-weight:700;
}

.about-visual-head strong,
.about-visual-head small{
  display:block;
}

.about-visual-head strong{
  font-size:.76rem;
}

.about-visual-head small{
  margin-top:2px;
  color:#7790a2;
  font-size:.55rem;
}

.about-visual-head > i{
  color:#0b875d;
  background:#edf9f4;
  padding:7px 10px;
  border-radius:999px;
  font-size:.52rem;
  font-style:normal;
  font-weight:600;
}

.about-visual-core{
  margin:22px 0;
  padding:25px;
  background:linear-gradient(135deg,#00234d,#00618f);
  border-radius:17px;
}

.about-core-icon{
  display:grid;
  width:34px;
  height:34px;
  margin-bottom:18px;
  place-items:center;
  color:#fff;
  background:#ff6600;
  border-radius:10px;
  font-size:.8rem;
  font-weight:700;
}

.about-visual-core small,
.about-visual-core strong{
  display:block;
}

.about-visual-core small{
  color:#71d8f5;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.1em;
}

.about-visual-core strong{
  max-width:400px;
  margin-top:8px;
  color:#fff;
  font-size:1.3rem;
  line-height:1.4;
}

.about-visual-modules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.about-visual-modules article{
  padding:15px;
  background:#f4f8fb;
  border:1px solid var(--about-border);
  border-radius:12px;
}

.about-visual-modules article > span{
  color:var(--about-orange);
  font-size:.55rem;
  font-weight:700;
}

.about-visual-modules small,
.about-visual-modules strong{
  display:block;
}

.about-visual-modules small{
  margin-top:10px;
  color:#7b91a1;
  font-size:.53rem;
}

.about-visual-modules strong{
  margin-top:3px;
  font-size:.66rem;
}

.about-section{
  padding:110px 0;
}

.about-intro{
  background:#fff;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:start;
  gap:95px;
}

.about-section-heading h2,
.about-method-copy h2{
  max-width:540px;
  margin:20px 0 0;
  font-size:clamp(2.4rem,4vw,3.25rem);
  line-height:1.12;
  letter-spacing:-.04em;
}

.about-intro-copy{
  padding-left:35px;
  border-left:1px solid var(--about-border);
}

.about-intro-copy p{
  margin:0 0 21px;
  color:var(--about-text);
  font-size:.94rem;
  line-height:1.9;
}

.about-intro-copy .about-lead{
  color:var(--about-navy);
  font-size:1.16rem;
  font-weight:600;
  line-height:1.7;
}

.about-solutions{
  position:relative;
  background:
    radial-gradient(circle at 88% 16%,rgba(0,143,202,.18),transparent 30%),
    linear-gradient(135deg,#001d3d,#00527d);
}

.about-heading-centered{
  max-width:760px;
  margin:0 auto 55px;
  text-align:center;
}

.about-heading-centered h2{
  margin:19px 0 18px;
  color:#fff;
  font-size:clamp(2.45rem,4vw,3.35rem);
  line-height:1.12;
  letter-spacing:-.04em;
}

.about-heading-centered p{
  color:rgba(222,239,249,.7);
  line-height:1.75;
}

.about-solutions-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.about-solution-card{
  display:flex;
  min-height:370px;
  flex-direction:column;
  padding:28px 24px;
  color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backdrop-filter:blur(8px);
}

.about-solution-main{
  background:linear-gradient(145deg,rgba(0,121,177,.55),rgba(255,255,255,.08));
  border-color:rgba(255,131,49,.4);
}

.about-card-number{
  color:#7adbf6;
  font-size:.57rem;
  font-weight:700;
}

.about-card-icon{
  display:grid;
  width:46px;
  height:46px;
  margin:32px 0 22px;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.1);
  border-radius:13px;
}

.about-card-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.about-solution-card h3{
  min-height:55px;
  margin:0 0 15px;
  font-size:1.05rem;
  line-height:1.45;
}

.about-solution-card p{
  margin:0;
  color:rgba(225,239,248,.72);
  font-size:.78rem;
  line-height:1.75;
}

.about-solution-card a{
  margin-top:auto;
  padding-top:22px;
  color:#ff9857;
  font-size:.67rem;
  font-weight:700;
  text-decoration:none;
}

.about-method{
  background:#f4f8fb;
}

.about-method-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:90px;
}

.about-method-copy > p{
  max-width:520px;
  margin-top:23px;
  color:var(--about-text);
  font-size:.91rem;
  line-height:1.85;
}

.about-text-link{
  display:inline-flex;
  gap:10px;
  margin-top:25px;
  color:var(--about-blue);
  font-size:.74rem;
  font-weight:700;
  text-decoration:none;
}

.about-principles{
  display:grid;
  gap:12px;
}

.about-principles article{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:19px;
  padding:24px;
  background:#fff;
  border:1px solid var(--about-border);
  border-radius:15px;
  box-shadow:0 14px 30px rgba(0,35,77,.055);
}

.about-principles article > span{
  display:grid;
  width:45px;
  height:45px;
  place-items:center;
  color:var(--about-blue);
  background:#edf6fb;
  border-radius:12px;
  font-size:.63rem;
  font-weight:700;
}

.about-principles h3{
  margin:0 0 5px;
  font-size:.91rem;
}

.about-principles p{
  margin:0;
  color:var(--about-text);
  font-size:.75rem;
  line-height:1.7;
}

.about-location{
  padding:90px 0;
  background:#fff;
}

.about-location-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:70px;
  padding:55px 60px;
  background:linear-gradient(135deg,#00234d,#00618e);
  border-radius:24px;
  box-shadow:0 25px 55px rgba(0,35,77,.18);
}

.about-location-card h2{
  max-width:650px;
  margin:18px 0 15px;
  color:#fff;
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.035em;
}

.about-location-card p{
  max-width:680px;
  margin:0;
  color:rgba(224,239,249,.72);
  font-size:.87rem;
  line-height:1.8;
}

.about-location-detail{
  display:flex;
  min-width:275px;
  align-items:center;
  gap:14px;
  padding:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
}

.about-location-pin{
  display:grid;
  width:45px;
  height:45px;
  place-items:center;
  color:#fff;
  background:#ff6600;
  border-radius:12px;
}

.about-location-pin svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}

.about-location-detail small,
.about-location-detail strong{
  display:block;
}

.about-location-detail small{
  color:#79daf5;
  font-size:.53rem;
  font-weight:700;
  letter-spacing:.1em;
}

.about-location-detail strong{
  max-width:170px;
  margin-top:4px;
  color:#fff;
  font-size:.7rem;
  line-height:1.45;
}

.about-final{
  padding:110px 0;
  background:
    radial-gradient(circle at 50% 0,rgba(0,101,163,.1),transparent 35%),
    #f4f8fb;
}

.about-final-content{
  max-width:820px;
  text-align:center;
}

.about-final h2{
  margin:19px auto 17px;
  color:var(--about-navy);
  font-size:clamp(2.4rem,4vw,3.3rem);
  line-height:1.12;
  letter-spacing:-.04em;
}

.about-final p{
  color:var(--about-text);
}

.about-actions-center{
  justify-content:center;
}

@media(max-width:1050px){
  .about-hero-grid,
  .about-intro-grid,
  .about-method-grid{
    grid-template-columns:1fr;
  }

  .about-hero-copy{
    max-width:760px;
  }

  .about-hero-visual{
    max-width:780px;
  }

  .about-solutions-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-intro-copy{
    padding-left:0;
    border-left:0;
  }

  .about-location-card{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .about-container{
    width:min(100% - 32px,1180px);
  }

  .about-hero{
    min-height:0;
    padding:120px 0 75px;
  }

  .about-hero-grid{
    gap:45px;
  }

  .about-hero-copy h1{
    margin-top:18px;
    font-size:2.55rem;
    line-height:1.08;
  }

  .about-hero-copy > p{
    font-size:.87rem;
    line-height:1.75;
  }

  .about-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .about-button{
    width:100%;
  }

  .about-hero-visual{
    padding:15px;
    border-radius:18px;
  }

  .about-visual-head > i{
    display:none;
  }

  .about-visual-core{
    padding:20px;
  }

  .about-visual-modules{
    grid-template-columns:1fr;
  }

  .about-section{
    padding:78px 0;
  }

  .about-section-heading h2,
  .about-method-copy h2,
  .about-heading-centered h2,
  .about-final h2{
    font-size:2.05rem;
  }

  .about-intro-grid,
  .about-method-grid{
    gap:40px;
  }

  .about-solutions-grid{
    grid-template-columns:1fr;
  }

  .about-solution-card{
    min-height:320px;
  }

  .about-location{
    padding:62px 0;
  }

  .about-location-card{
    gap:35px;
    padding:34px 24px;
    border-radius:19px;
  }

  .about-location-card h2{
    font-size:2rem;
  }

  .about-location-detail{
    min-width:0;
  }

  .about-final{
    padding:80px 0;
  }
}