/* Base Layout */
body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  background: #f6f8fa;
  color: #222;
  min-height: 100vh;
}
.container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 0 0;
}

/* Navigation */
header {
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,26,64,0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 10px 0;
}
.logo {
  color: #0066FF;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #c1e1ff33;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}
nav a {
  color: #222;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
nav a.active,
nav a:hover {
  color: #0066FF;
}

/* Hero */
.hero {
  background: linear-gradient(101deg, #e6f0ff 50%, #d6e9ff 100%);
  padding: 100px 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.hero-content {
  max-width: 600px;
  z-index: 2;
}
.hero h1 {
  font-size: 2.7rem;
  font-weight: 900;
  color: #0b2a55;
  margin: 0 0 16px 0;
}
.hero p {
  font-size: 1.2rem;
  color: #325578;
  padding: 0 20px;
  margin-bottom: 32px;
}
.cta-buttons {
  display: flex;
  gap: 1.5rem;
}
.cta-primary {
  background: #0066FF;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 32px;
  padding: 12px 32px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 26px #57aeff30;
  transition: background 0.2s, transform 0.1s;
  text-decoration: none;
}
.cta-primary:hover {
  background: #000a23;
  transform: translateY(-2px) scale(1.03);
}
.cta-secondary {
  background: #fff;
  color: #0066FF;
  font-weight: 700;
  border: 2px solid #0066FF;
  border-radius: 32px;
  padding: 12px 32px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.cta-secondary:hover {
  background: #e7f1ff;
}
.hero-animation {
  width: 340px;
  height: 220px;
  background: none;
  z-index: 1;
}

/* About */
.about-main, .about {
  padding: 64px 0 48px 0;
}
.about h2 { color: #0066FF; }

/* Hierarchy Diagram */
.hierarchy {
  background: #f2f6fa;
  padding: 64px 0 56px 0;
}
.chain {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-size: 1.14rem;
}
.chain-node {
  background: #fff;
  color: #0050d0;
  border: 2px solid #0066FF;
  border-radius: 18px;
  padding: 10px 24px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  box-shadow: 0 5px 20px #83c3ff2a;
  transition: background 0.16s, box-shadow 0.19s;
}
.chain-node:hover {
  background: #0066FF;
  color: #fff;
  box-shadow: 0 5px 30px #1666b933;
}
.chain-arrow {
  font-size: 1.6rem;
  color: #0066FF;
}
.tooltip {
  position: absolute;
  min-width: 260px;
  background: #fff;
  color: #004489;
  padding: 17px;
  border-radius: 12px;
  box-shadow: 0 7px 40px #156ed217;
  font-size: 1rem;
  display: none;
  z-index: 20;
}

/* Features */
.features {
  background: #fff;
  padding: 62px 0 50px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 2.3em;
  margin-top: 16px;
}
.feature-card {
  padding: 36px 22px 28px 22px;
  border-radius: 24px;
  background: linear-gradient(103deg, #ecf9ffcc 87%, #d5f5ffe6 100%);
  box-shadow: 0 7px 30px #49bbff19, 0 3.5px 16px #30ecff15;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.18s, background 0.17s;
  z-index: 2;
  margin-bottom: 0;
}
.feature-card:hover {
  background: linear-gradient(100deg, #e3f5ff 61%, #bbf3ff 100%);
  box-shadow: 0 12px 41px #0ae6ff20, 0 3.5px 19px #74e5ff1a;
}
.feature-icon {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon img {
  width: 50px;
  height: 50px;
  background: #fafdffcb;
  border-radius: 13px;
  box-shadow: 0 3px 12px #14d3ff1e;
  padding: 8px;
}
.feature-title {font-size:1.11rem;font-weight:900;color:#0069c5;margin-bottom:10px;}
.feature-desc {font-size:.99rem;color:#10709c;font-weight:600;}
@media (max-width: 560px) {
  .features-grid { grid-template-columns:1fr; gap:21px; }
  .feature-card { padding:29px 9vw 18px 9vw; }
}

/* Benefits by Role */
.benefits {
  background: #f7faff;
  padding: 57px 0 48px 0;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 1.6em;
}
.role-card {
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 2px 17px #aedcff20;
  padding: 22px 14px 17px 18px;
  border-top: 4px solid #0066FF;
}

/* How Techomart Works */
.how-it-works {
  background: #fff;
  padding: 62px 0 50px 0;
}
.steps {
  margin: 0;
  padding-left: 18px;
  font-size: 1.1rem;
}
.steps li {
  margin-bottom: 16px;
}

/* Testimonials Slider */
.testimonials {
  background: #e6f1fc;
  padding: 62px 0 40px 0;
  min-height: 270px;
}
.testimonial-slider {
  position: relative;
  max-width: 670px;
  margin: 0 auto;
}
.testimonial-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 18px #52a8ff27;
  padding: 34px 28px;
  min-height: 120px;
  display: none;
}
.testimonial-card.active {
  display: block;
  animation: fadeIn 0.7s;
}
.testimonial-info {
  font-size: 0.98rem;
  color: #2277cc;
  margin-top: 18px;
}
@keyframes fadeIn {
  from {opacity: 0;transform:translateY(20px);}
  to {opacity: 1;transform:translateY(0);}
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(92deg, #0066FF 60%, #0ae); 
  color: #fff;
  text-align: center;
  padding: 76px 0 66px 0;
  border-radius: 0 0 24px 24px;
}
.cta-banner .cta-buttons {justify-content: center;}
.cta-banner h2 {font-size: 2.1rem; color: #fff; margin-bottom: 16px;}
.cta-banner p {font-size: 1.13rem; margin-bottom: 28px;}

/* Footer */
footer {
  background: #003570;
  color: #fff;
  padding: 30px 0 28px 0;
  font-size: 1rem;
  border-radius: 20px 20px 0 0;
  margin-top: 52px;
}
.footer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-links {
  display: flex;
  gap: 2rem;
  margin-bottom: 13px;
}
.footer-links a {
  color: #77bcff;
  text-decoration: none;
  transition: color 0.13s;
}
.footer-links a:hover {
  color: #fff;
}
.footer-socials {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 10px;
}
.footer-socials img {
  filter: brightness(1.35);
  width: 24px;height: 24px;
}
.footer-tagline {
  color: #d0e8ff;
  font-size: 1.01rem;
  margin-top: 11px;
}

/* Forms */
.contact-form {
  background: #fff;
  border-radius: 21px;
  box-shadow: 0 4px 18px #3bb2ff15;
  padding: 32px 28px;
  max-width: 400px;
}
.contact-form label {
  display: block;
  font-weight: 600;
  margin: 13px 0 6px 0;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-size: 1em;
  margin-bottom: 12px;
  border-radius: 7px;
  border: 1.6px solid #b6d5ff;
  padding: 9px 11px;
  background: #f4f9ff;
  resize: vertical;
}
.contact-form button {
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .container {max-width:98vw;}
  .hero {flex-direction:column;padding-top:66px;}
}
@media (max-width: 650px) {
  .nav-wrapper {flex-direction:column; gap:12px;}
  .footer-wrapper {font-size:0.93em;}
  .hero h1 {font-size:2rem;}
  .cta-banner {padding:44px 0 38px 0;}
  .features-grid,.roles-grid {grid-template-columns:1fr;}
  .testimonial-slider {padding:0 2.4em;}
}

/* Utility */
ul, ol {padding-left: 1.7em;}
main {padding-bottom: 60px;}

/* Glassmorphism Hero Overlay */
.hero-glass {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(98deg, #ffffffea 45%, #e6f0ffb8 85%, #a8d6ff66 100%);
  backdrop-filter: blur(7px);
  border-radius: 0 0 70px 70px / 0 0 110px 110px;
  box-shadow: 0 15px 50px 0 #0066ff22;
  opacity: 0.97;
}

.hero {
  overflow: hidden;
  position: relative;
}
.hero h1 {
  font-size: 2.95rem;
  letter-spacing: 0.03em;
  line-height: 1.17;
  background: linear-gradient(80deg,#0066FF,#189be3 52%,#b4daff 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-stats {
  display: flex; gap: 2.5rem; margin: 34px 0 24px 0;
  font-size: 1.18rem; font-weight: 700; color: #154184; letter-spacing: 0.06em;
  justify-content: flex-start; flex-wrap: wrap;
}
.hero-stats .count {
  color: #0066FF;font-size: 2.01rem; font-weight: 900; margin-right: 6px;transition:color 0.26s;
  text-shadow: 0 2px 8px #8accff22;
}

/* Animated Brand Slider */
.trusted-by {
  background: #f7faff;
  text-align: center;
  padding: 38px 0 22px 0;
  position: relative;
}
.trusted-by h3 {
  color: #2277cc; font-weight: 700; margin-bottom: 18px;
}
.brand-slider {
  display: flex;
  overflow: hidden;
  gap: 38px;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  animation: slideBrands 16s linear infinite;
}
.brand-slider img {
  width: 95px; height: 44px; object-fit: contain; opacity: 0.89; filter: drop-shadow(0 2px 9px #b0edff18);
  background: #fff; border-radius: 12px; padding: 9px 17px;
  box-shadow: 0 4px 26px #0164ff12;
  transition: transform 0.2s;
}
.brand-slider img:hover { transform: scale(1.10) translateY(-6px) rotate(-1.5deg); }
@keyframes slideBrands {
  0% {transform: translateX(0);}
  100% {transform: translateX(-23%);}
}

/* Vision & Milestones */
.vision-milestones {
  background: #f2f8ff;
  padding: 66px 0 46px 0;
  border-top: none;
}
.vision-statement {
  font-size: 1.23rem; color: #124399; background: #fff; border-radius: 14px; box-shadow: 0 4px 18px #a3ceff10; padding: 18px 24px; margin-bottom: 30px; }
.milestone-timeline {
  border-left: 5px solid #0066FF33;
  margin:0 0 0 17px; padding-left: 25px;
  display: flex; flex-direction: column; gap: 26px;
}
.milestone {
  position: relative; font-size: 1.03rem; color: #144181; padding-bottom: 3px;
}
.milestone-dot {
  background: #0066FF; width: 12px; height: 12px; border-radius: 50%; position: absolute; left: -37px; top: 2px; border: 2.5px solid #e6f0ff;
  box-shadow: 0 0 0 4px #0066ff17;
}
.milestone.future .milestone-dot {background: #fff; border: 2.5px solid #0066FF;}

/* Press Carousel */
.press-carousel {
  display: flex; flex-direction:row; justify-content:center; gap: 0; margin: 36px 0 0 0; min-height: 50px;
}
.press-quote {display:none; min-width:180px; max-width:700px; color:#0066FF;font-size:1rem; font-weight:600; background:#fff; border-radius:11px; box-shadow:0 1px 13px #aacaff1d;line-height:1.7; padding:18px 24px; text-align:center; align-self:center; margin:0 10px; transition: opacity .4s;opacity:0; }
.press-quote.active{display:block;opacity:1;}

/* Section Divider SVGs */
.section-divider {
  display: block;
  width: 100%;
  height: 56px;
  margin: -26px 0 0 0;
  position: relative;
  z-index: 2;
}

/* Timeline dots animation */
@keyframes milestonePulse {
  0%{box-shadow:0 0 0 6px #0066ff23;}
  70%{box-shadow:0 0 0 17px #0066ff00;}
  100%{box-shadow:0 0 0 6px #0066ff22;}
}
.milestone-dot {animation:milestonePulse 2.4s infinite;}

/* Micro-interactions */
.btn-glow:hover,.cta-primary:hover {
  box-shadow:0 0 20px #339cff80,0 4px 26px #57aeff30;
  background: linear-gradient(90deg, #0066FF 75%, #1ab2ff 100%);
  color:#fff!important;
}

/* Extra responsive/premium upgrades */
@media (max-width: 700px) {
  .hero-stats {gap: 1rem;flex-direction:column;align-items:flex-start;}
  .milestone-timeline{margin-left:0;}
  .brand-slider img{width:68px;height:31px;padding:6px 7px;}
}

/* Premium Glass Cards */
.glass-card {
  background: linear-gradient(120deg, #fffdfefa 91%, #e6f0ffa2 100%);
  box-shadow: 0 4px 32px #0066ff18;
  border-radius: 25px;
  backdrop-filter: blur(6px);
  padding: 32px 28px 24px 28px;
  margin-bottom: 34px;
}

/* About page grids */
.about-milestones,.milestone-grid,.stat-card {margin-top:48px;}
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px,1fr));
  gap: 2.2em;
}
.stat-card {background:#f5faffee;border-radius:16px;box-shadow:0 5px 24px #aedaed11;text-align:center;padding:32px 10px;}
.stat-number {color:#0066FF;font-size:2rem;font-weight:900;margin-bottom:5px;}
.stat-card.future{border:2px dashed #0066FF33;opacity:.8;}

/* About Team */
.team-grid{display:flex;gap:2.5em;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.team-card{display:flex;flex-direction:column;align-items:center;background:#f3f9ff;box-shadow:0 2px 14px #b4d8ff12;border-radius:16px;padding:22px 16px 12px 16px;min-width:117px;}
.team-title{margin-top:8px;color:#2277cc;font-weight:700;font-size:1.05rem;}
.team-title span{display:block;color:#155aa4;font-weight:500;font-size:.93em;}

/* About Awards */
.about-awards{margin-top:52px;}
.about-awards .trusted-by{background:transparent;padding:0;}
.about-awards .brand-slider{margin-bottom:21px;}
.about-awards .press-quote{margin-top:16px;}

html {
  scroll-behavior: smooth;
}
.section-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.37,.98,.37,.98), transform 0.7s cubic-bezier(.37,.98,.37,.98);
}
.section-fade.active {
  opacity: 1;
  transform: none;
}
.section-divider {
  display: block; width: 100%; height: 64px; position: relative; z-index: 3; margin: -32px 0 0 0;
}
@media (max-width:700px) {.section-divider{height:33px;}}

.fade-in-up {
  opacity: 0; transform: translateY(32px);
  animation: fadeInUp 1.1s cubic-bezier(.43,0,.17,1.02) forwards;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}
.parallax-bg {
  background-attachment: fixed; background-size: cover; background-repeat: no-repeat;
}
.premium-shadow {
  box-shadow: 0 8px 36px 0 #0269ee22, 0 1.5px 13px #aacaff33;
  transition: box-shadow 0.23s;
}
.premium-shadow:hover { box-shadow: 0 14px 54px 0 #0269ee34, 0 2.5px 20px #aacaff50; }

.cta-primary, .cta-secondary {
  font-family: 'Inter', Arial, sans-serif;
  letter-spacing: .04em;
}

.hierarchy-flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 0px;
}
.hierarchy-level {
  width: 330px;
  margin: 0 auto 0 auto;
  text-align: center;
  box-shadow: 0 4px 30px #0066ff21, 0 1.5px 12px #4fd0ff12;
  padding: 34px 22px 14px 22px;
  margin-bottom: 0px;
  position: relative;
  z-index: 2;
  border-left: none;
  animation: fadeInUp 1.2s cubic-bezier(.43,0,.17,1.02);
}
.hierarchy-icon {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hierarchy-icon img {
  width: 52px; height: 52px; border-radius: 16px; object-fit:contain;
  box-shadow: 0 3px 12px #0074ff21;
  background: #f6fcffcf;
  padding: 8px;
}
.hierarchy-title {
  font-size: 1.19rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: #0065d8;
  letter-spacing:0.01em;
}
.hierarchy-desc {
  font-size: 1.04rem;
  color: #155a8b;
  margin-bottom: 9px;
  font-weight: 600;
}
.hierarchy-benefit {
  font-size: .97rem;
  color: #5199e2;
  background: linear-gradient(90deg,#daf5ff 60%,#eff7ff 100%);
  border-radius: 9px;
  margin: 13px auto 0 auto; padding: 6px 13px 5px 13px;
  display: inline-block;
}
.hierarchy-arrow {
  display: block;
  margin: -7px 0 -7px 0;
}

@media (max-width: 500px) {
  .hierarchy-flowchart {gap:0;}
  .hierarchy-level {width:92vw;padding:22px 9vw 13px 9vw;}
  .hierarchy-icon img{width:32px;height:32px;}
}

.premium-brands {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin: 36px auto 12px auto; 
  padding-bottom: 10px;
}
.brand-glass {
  background: linear-gradient(110deg,#fafcffb2,#e8f7fdea 90%,#defbffb4 100%);
  border-radius: 18px;
  box-shadow: 0 4px 28px #8ecbff29,0 1.5px 12px #84e2ff13;
  padding: 13px 24px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .2s,transform .21s;
  animation: fadeInUp 1.1s cubic-bezier(.43,0,.17,1.02);
}
.brand-glass img{width:90px;height:40px;object-fit:contain;opacity:0.98;}
.brand-glass:hover{box-shadow:0 7px 32px #2196f390,0 2.5px 22px #95f0ff2a;transform:scale(1.1) translateY(-7px);}
.brand-gradient-line{
  width:100%; height:5px; border-radius:9px; margin-top:18px;background:linear-gradient(90deg,#76aae1 7%,#2ab9fd 54%,#b0ebff 100%);opacity:0.7;
}
@media(max-width:700px){.premium-brands{gap:8px;}.brand-glass{padding:9px 8px;}.brand-glass img{width:56px;height:26px;}}

.timeline-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 32px auto 0 auto; gap:0;
}
.timeline-glass-block {
  background: linear-gradient(120deg,#fafdfffd 91%, #e7f7ffc9 100%);
  box-shadow: 0 4px 22px #8dd0ff2b, 0 1.5px 9px #84e2ff12;
  border-radius: 19px;
  padding: 32px 24px 12px 24px;
  margin-bottom: 0px;
  width: 355px;
  text-align: left;
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.13s cubic-bezier(.43,0,.17,1.02);
}
.timeline-glass-block.future {opacity:0.88;border:2px dashed #80e9ff73;}
.milestone-dot-glass {
  width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(100deg,#2196f388,#fff 80%); border:2.5px solid #beeaffb0; box-shadow: 0 2px 14px #32beff1c;
  position: absolute; left: -27px; top: 31px;
  animation: milestonePulse 2.4s infinite;
}
.milestone-year {
  font-size: 1.1rem;
  font-weight: 900;
  color: #1b6cdf;
  margin-bottom: 8px;
}
.milestone-content {
  font-size: 1.03rem;
  color: #166c9c;
  font-weight: 600;
}
.timeline-gradient-line {
  display:block;
  margin:-2px 0 -2px 0;
}
@media (max-width:500px){
  .timeline-glass-block {width:92vw;padding: 25px 6vw 7px 8vw;}
  .milestone-dot-glass {left: -12px; top: 23px;}
}

.about-cards {
  display: flex;
  gap: 38px;
  align-items: stretch;
  justify-content: center;
  margin-top: 36px;
  position:relative;
}
.about-col {flex:1 1 0; min-width:235px;}
.about-text {display: flex; flex-direction: column; justify-content:center;}
.glass-info-card {
  background: linear-gradient(117deg,#fbfcffff 75%,#e0f7ffbb 100%);
  box-shadow: 0 4px 24px #8dd0ff2a, 0 1.5px 12px #71e2ff13;
  border-radius: 20px;
  padding: 36px 27px 28px 27px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-width: 249px;
  animation: fadeInUp 1.0s cubic-bezier(.43,0,.17,1.02);
  opacity:0.98;
}
.about-card-title {
  font-size: 1.12rem; font-weight: 900; color: #096ed8; letter-spacing:0.03em; margin-bottom: 15px;
}
.about-card-list {
  list-style: disc; color:#1b4b90; padding-left:30px; font-size:1.01rem;
}
@media (max-width: 900px) {
  .about-cards{flex-direction:column;gap:19px;}
  .glass-info-card{min-width:0;width:100%;}
}

.features-glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 32px;
  margin-top: 37px;
}
.feature-tile-glass {
  background: linear-gradient(112deg,#fafdfffe 82%, #eafaffbf 100%);
  border-radius: 18px;
  box-shadow: 0 4px 24px #83d1ff20, 0 1.5px 8px #dafbff09;
  padding: 34px 20px 19px 20px;
  text-align: center;
  min-height: 260px;
  display: flex; flex-direction: column; align-items:center; justify-content: flex-start;
  position: relative;
  transition: box-shadow .24s,transform .17s;
  animation: fadeInUp 1.04s cubic-bezier(.43,0,.17,1.02);
}
.feature-tile-glass:hover {
  box-shadow: 0 13px 44px #2196f338,0 2.5px 22px #95f0ff14;
  transform: scale(1.048) translateY(-8px);
}
.feature-icon {margin-bottom: 19px;}
.feature-icon img {width:62px; height:62px; border-radius:18px; background:#f5fbffcc;box-shadow:0 2px 11px #87c4fc21; padding: 10px;}
.feature-title {font-size:1.11rem;font-weight:900;color:#0069c5;margin-bottom:10px;}
.feature-desc {font-size:.99rem;color:#10709c;font-weight:600;}
@media(max-width:650px){.features-glass-grid{gap:18px;}}

.roles-glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  margin-top: 36px;
}
.role-glass-card {
  background: linear-gradient(112deg,#fafdfffd 91%, #ecfbffb4 100%);
  border-radius: 19px;
  box-shadow: 0 4px 24px #7dceff21, 0 1.5px 8px #bcf6ff09;
  padding: 36px 18px 23px 18px;
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  position: relative;
  animation: fadeInUp 1.08s cubic-bezier(.43,0,.17,1.02);
  transition: box-shadow .22s,transform .18s;
}
.role-icon {margin-bottom: 17px;}
.role-icon img {width:42px; height:42px; border-radius:13px; background:#f5fbffcb; box-shadow:0 2px 8px #87c4fc18; padding:8px;}
.role-g-title {font-size:1.03rem;font-weight:900;color:#0084c5;margin-bottom:8px;letter-spacing:0.01em;}
.role-glass-card ul {margin:0;padding-left:18px; font-size:.98rem; color:#157799;}
.role-glass-card:hover{box-shadow: 0 13px 44px #29a6fa38,0 2.5px 15px #63f0fb18; transform:scale(1.049) translateY(-7px);}
@media(max-width:650px){.roles-glass-grid{gap:13px;}}

.stepper-glass-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 35px;
}
.stepper-glass-card {
  background: linear-gradient(120deg,#fafdfffd 90%, #e8f7ffb4 100%);
  box-shadow: 0 4px 22px #62d0ff24, 0 1.5px 8px #d1f5ff10;
  border-radius: 19px;
  padding: 33px 24px 16px 24px;
  margin-bottom: 0px;
  min-width: 322px;
  width:100%;
  text-align: left;
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.14s cubic-bezier(.43,0,.17,1.02);
}
.stepper-icon {
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: flex-start;
}
.stepper-icon img {
  width: 42px; height: 42px; border-radius: 12px; object-fit:contain;
  background: #f6fcffcf;
  padding: 5px;
  box-shadow: 0 2px 7px #52e1ff21;
}
.stepper-num {
  position: absolute;
  top: 18px; left: -33px;
  background: linear-gradient(100deg,#22b9ff88,#fff 80%);
  color:#0c5ea6; border-radius:50%; width: 28px; height: 28px; display: flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1rem; box-shadow:0 1px 5px #29b9bf18; border:2px solid #beeaffb0;
  animation: milestonePulse 2.2s infinite;
}
.stepper-title {font-size:1.09rem;font-weight:900;color:#006f95;margin-bottom:7px;}
.stepper-desc {font-size:.95rem;color:#157099;font-weight:600;}
.stepper-glass-line {display: block; margin:-9px 0 -9px 0;}
@media(max-width:500px){.stepper-glass-card{min-width:0;width:90vw;padding: 18px 5vw 18px 10vw;}.stepper-num{left:-8vw;}}

.trusted-slider {
  width: 100%;
  background: linear-gradient(118deg, #eef7ffcc 93%, #fff4 100%);
  backdrop-filter: blur(7px);
  border-radius: 22px;
  padding: 18px 0;
  box-shadow: 0 3px 24px #30a2ff23, 0 2.5px 9px #93d2ff17;
  overflow: hidden;
  margin-bottom: 14px;
  margin-top: 11px;
}
.trusted-track {
  display: flex;
  gap: 58px;
  align-items: center;
  animation: trustedScroll 26s linear infinite;
}
.trusted-slider img {
  width: 108px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 2.5px 12px #0066ff10);
  opacity: 1;
  background: #fff; border-radius: 14px; padding: 13px 10px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.trusted-slider img:hover {
  transform: scale(1.10) translateY(-8px) rotate(-2deg);
  box-shadow: 0 12px 32px #0066ff17;
}
@keyframes trustedScroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}
@media (max-width: 650px) {
  .trusted-track { gap: 22px; }
  .trusted-slider img { width: 64px; height: 33px; padding: 7px 3px; }
}

.vision-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  gap: 0px;
  position: relative;
}
.vision-milestone {
  width: 320px; text-align:center;
  margin-bottom: 0px; padding: 28px 16px 15px 16px;
  background: linear-gradient(103deg,#e5f7fffc 79%,#f5fbffbb 100%);
  border-left: none; border-top: 5px solid #20a4ff44;
  z-index:2; position:relative;
  transition: box-shadow .18s, background .29s;
  box-shadow: 0 5px 30px #67cfff12, 0 2.5px 12px #44d8ff13;
}
.vision-milestone.future-highlight {
  border-top: 5.5px solid #24e6ff;
  background: linear-gradient(99deg,#e4fffffb 66%,#d7feff 100%);
  box-shadow: 0 7px 48px #00f1ff33, 0 2.5px 18px #00d6ff4b;
  animation: glowFuture 1.6s infinite alternate;
}
@keyframes glowFuture {
  from { box-shadow: 0 7px 44px #00f1ff61, 0 2.5px 19px #7cf5f44b; }
  to { box-shadow: 0 7px 56px #0ff  , 0 2.5px 22px #45e9ff8a; }
}
.vision-milestone .milestone-icon {
  margin-bottom: 13px;
}
.vision-milestone .milestone-icon img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fafdfffb;
  padding: 6px;
  box-shadow: 0 2.5px 10px #00b0ff10;
}
.vision-milestone .milestone-year {
  font-size: 1.12rem;
  font-weight: 900;
  color: #1291e1;
  margin-bottom: 5px;
}
.vision-milestone .milestone-desc {
  font-size: 1.04rem;
  color: #176da3;
  font-weight: 600;
}
.vision-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -10px 0 -10px 0;
}
@media (max-width: 560px) {
  .vision-milestone { width:92vw; }
  .vision-timeline { gap: 0; }
}

.about-split {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.about-text {
  flex: 1 1 320px;
  min-width: 270px;
  max-width: 500px;
  padding: 32px 26px;
}
.about-visual {
  flex: 1 1 340px;
  min-width: 220px;
  max-width: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 10px 19px 10px;
}
.about-visual img.about-illustration {
  width: 98%; max-width: 360px; border-radius: 16px; box-shadow: 0 9px 30px #a6e4ff22;
  background: linear-gradient(111deg,#fafdff 80%,#e8f7ff5c 100%);
  margin: 0 auto;
}
.about-mission {
  font-size: 1.14rem;
  font-weight: 700;
  color: #0a4196;
  margin-top: 11px;
  line-height: 1.65;
  letter-spacing: .001em;
}
@media (max-width: 900px) {
  .about-split { flex-direction: column; gap: 16px; }
  .about-text, .about-visual { width: 100%; max-width: 99vw; }
  .about-visual img.about-illustration { max-width: 99vw;height:170px;}
}