@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root{
  --blue:#1769ff;
  --blue2:#0755e7;
  --electric:#0f67ff;
  --navy:#061329;
  --navy2:#091d3f;
  --ink:#0b1220;
  --muted:#66758b;
  --green:#16b96d;
  --white:#fff;
  --soft:#f4f7fb;
  --line:#e2e8f0;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:74px;
}

body{
  margin:0;
  font-family:Montserrat,Arial,sans-serif;
}

a{
  text-decoration:none;
  color:inherit;
}

.ma-home{
  background:#fff;
  color:var(--ink);
  overflow-x:hidden;
}

.ma-home .wrap{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ma-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(4,13,29,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.ma-nav{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.ma-header .brand,
.ma-footer .brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.5px;
}

.ma-header .brand{
  color:#fff;
}

.ma-header .brand img,
.ma-footer .brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.ma-menu{
  display:flex;
  align-items:center;
  gap:25px;
}

.ma-menu a{
  color:#b9c8dc;
  font-size:13px;
  font-weight:700;
  transition:.25s;
}

.ma-menu a:hover{
  color:#fff;
}

.ma-login{
  padding:11px 17px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-size:13px;
  font-weight:750;
  transition:.25s;
}

.ma-login:hover{
  background:#fff;
  color:#0a1a35;
  transform:translateY(-1px);
}


/* =========================================================
   HERO
========================================================= */

.ma-hero{
  position:relative;
  min-height:calc(100vh - 74px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;

  background:
    radial-gradient(
      circle at 77% 24%,
      rgba(38,116,255,.38),
      transparent 26%
    ),
    radial-gradient(
      circle at 15% 75%,
      rgba(15,103,255,.16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #030a16 0%,
      #07152d 50%,
      #081c3c 100%
    );
}

.ma-hero:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;

  background-image:
    linear-gradient(
      rgba(255,255,255,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.09) 1px,
      transparent 1px
    );

  background-size:64px 64px;

  mask-image:
    linear-gradient(to bottom,#000,transparent 90%);
}

.ma-hero:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:105px;
  background:linear-gradient(to bottom,transparent,#071b42);
  pointer-events:none;
}

.ma-hero-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;

  gap:78px;
  padding:82px 0 108px;
}

.ma-eyebrow,
.ma-kicker{
  display:inline-block;

  color:#1769ff;

  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.ma-hero .ma-eyebrow{
  color:#7facff;
}

.ma-hero h1{
  max-width:760px;

  margin:18px 0 24px;

  font-size:clamp(52px,6vw,86px);
  line-height:.96;
  letter-spacing:-4.5px;

  color:#fff;
}

.ma-hero h1 span{
  display:block;
  color:#69a1ff;
}

.ma-hero-text{
  max-width:650px;

  margin:0;

  color:#b7c6da;

  font-size:18px;
  line-height:1.75;
}

.ma-course-meta{
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;

  margin-top:24px;
}

.ma-course-meta span{
  padding:8px 12px;

  border:1px solid rgba(117,169,255,.25);
  border-radius:999px;

  background:rgba(23,105,255,.12);

  color:#8eb7ff;

  font-size:11px;
  font-weight:900;
}

.ma-course-meta strong{
  color:#fff;
  font-size:15px;
}

.ma-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;

  margin-top:31px;
}


/* =========================================================
   BUTTONS
========================================================= */

.ma-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;

  padding:0 25px;

  border-radius:13px;

  font-size:14px;
  font-weight:800;

  transition:
    transform .25s,
    box-shadow .25s,
    background .25s;
}

.ma-btn:hover{
  transform:translateY(-3px);
}

.ma-btn-primary{
  color:#fff;

  background:
    linear-gradient(135deg,#2478ff,#0755e7);

  box-shadow:
    0 16px 38px rgba(23,105,255,.28);
}

.ma-btn-primary:hover{
  box-shadow:
    0 21px 45px rgba(23,105,255,.4);
}

.ma-btn-secondary{
  color:#fff;

  background:rgba(255,255,255,.07);

  border:1px solid rgba(255,255,255,.18);
}

.ma-btn-green{
  color:#fff;

  background:
    linear-gradient(135deg,#18bd70,#079653);

  box-shadow:
    0 15px 32px rgba(10,160,88,.2);
}

.ma-btn-light{
  color:#0c51c7;

  background:#fff;

  box-shadow:
    0 15px 35px rgba(0,0,0,.12);
}

.ma-btn-full{
  width:100%;
}

.ma-trust{
  display:flex;
  flex-wrap:wrap;

  gap:18px;

  margin-top:27px;

  color:#8fa3bd;

  font-size:12px;
  font-weight:650;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.ma-hero-visual{
  position:relative;

  perspective:1200px;

  --hero-y:0px;
  --hero-scale:1;
  --hero-rotate:1.5deg;

  --tilt-x:0deg;
  --tilt-y:0deg;

  transform:
    translateY(var(--hero-y))
    scale(var(--hero-scale))
    rotate(var(--hero-rotate));

  transition:transform .08s linear;
}

.ma-dashboard-card{
  position:relative;

  padding:27px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.055)
    );

  box-shadow:
    0 40px 100px rgba(0,0,0,.38);

  backdrop-filter:blur(22px);

  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));

  transition:transform .18s ease;
}

.ma-dashboard-card:before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  box-shadow:
    inset 0 1px rgba(255,255,255,.14);

  pointer-events:none;
}

.ma-dashboard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.ma-dashboard-top div{
  display:flex;
  flex-direction:column;

  gap:5px;
}

.ma-dashboard-top small{
  color:#7f96b5;

  font-size:11px;
  letter-spacing:1.5px;
}

.ma-dashboard-top strong{
  color:#fff;
  font-size:20px;
}

.ma-live-dot{
  padding:8px 12px;

  border-radius:999px;

  color:#6ce7a8;

  background:rgba(22,185,109,.12);

  border:1px solid rgba(108,231,168,.18);

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;
}

.ma-progress{
  height:7px;

  margin:25px 0;

  overflow:hidden;

  border-radius:999px;

  background:rgba(255,255,255,.1);
}

.ma-progress-bar{
  width:66%;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(90deg,#2478ff,#5aa0ff);

  box-shadow:
    0 0 20px rgba(36,120,255,.65);
}

.ma-dashboard-items{
  display:grid;
  gap:11px;
}

.ma-dash-item{
  display:grid;

  grid-template-columns:42px 1fr 25px;

  align-items:center;

  gap:13px;

  padding:15px;

  border:1px solid rgba(255,255,255,.08);

  border-radius:16px;

  background:rgba(4,14,31,.5);
}

.ma-dash-item>span{
  display:grid;
  place-items:center;

  width:42px;
  height:42px;

  border-radius:12px;

  background:rgba(255,255,255,.07);

  color:#8da1bc;

  font-size:11px;
  font-weight:900;
}

.ma-dash-item div{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.ma-dash-item b{
  color:#eaf2ff;
  font-size:13px;
}

.ma-dash-item small{
  color:#748aa7;
}

.ma-dash-item>strong{
  color:#57d99a;
}

.ma-dash-item.active{
  border-color:rgba(65,137,255,.42);

  background:rgba(23,105,255,.13);
}

.ma-dash-item.active>span{
  color:#fff;

  background:#1769ff;
}

.ma-dash-item.active>strong{
  color:#6da7ff;
}


/* FLOATING CARDS */

.ma-float-card{
  position:absolute;

  z-index:5;

  padding:13px 16px;

  border:1px solid rgba(255,255,255,.16);

  border-radius:15px;

  background:rgba(6,18,39,.82);

  box-shadow:
    0 18px 45px rgba(0,0,0,.25);

  backdrop-filter:blur(12px);

  animation:
    maFloat 4.5s ease-in-out infinite;
}

.ma-float-card small{
  display:block;

  color:#6f91c2;

  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
}

.ma-float-card strong{
  display:block;

  margin-top:5px;

  color:#fff;

  font-size:11px;
}

.ma-float-one{
  left:-55px;
  bottom:52px;
}

.ma-float-two{
  right:-28px;
  top:78px;

  animation-delay:-2s;
}

@keyframes maFloat{
  50%{
    transform:translateY(-10px);
  }
}

.ma-scroll-hint{
  position:absolute;

  z-index:4;

  left:50%;
  bottom:22px;

  transform:translateX(-50%);

  display:flex;
  align-items:center;

  gap:9px;

  color:#6f86a5;

  font-size:10px;
  font-weight:800;
  letter-spacing:1px;

  text-transform:uppercase;
}

.ma-scroll-hint span{
  width:1px;
  height:26px;

  background:
    linear-gradient(#6c9fff,transparent);
}

.ma-orb{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.ma-orb-one{
  width:380px;
  height:380px;

  right:-180px;
  top:40px;

  background:rgba(34,112,255,.12);

  filter:blur(2px);
}

.ma-orb-two{
  width:280px;
  height:280px;

  left:-160px;
  bottom:0;

  background:rgba(24,96,220,.1);
}


/* =========================================================
   BENEFIT STRIP
========================================================= */

.ma-strip{
  position:relative;

  z-index:5;

  background:
    linear-gradient(
      90deg,
      #071b42,
      #092c64,
      #071b42
    );

  color:#fff;

  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ma-strip-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  padding:27px 0;
}

.ma-strip-grid>div{
  display:flex;

  flex-direction:column;

  align-items:center;

  gap:4px;

  padding:5px 20px;

  text-align:center;

  border-right:
    1px solid rgba(255,255,255,.09);
}

.ma-strip-grid>div:last-child{
  border:0;
}

.ma-strip-grid strong{
  color:#fff;
  font-size:14px;
}

.ma-strip-grid span{
  color:#8fa6c7;
  font-size:11px;
}


/* =========================================================
   GLOBAL SECTIONS
========================================================= */

.ma-section{
  padding:105px 0;
}

.ma-section-heading{
  position:relative;

  z-index:2;

  max-width:790px;

  margin:0 auto 52px;

  text-align:center;
}

.ma-section-heading h2,
.ma-final-cta h2{
  margin:12px 0 18px;

  color:#101827;

  font-size:clamp(35px,4.5vw,56px);

  line-height:1.06;

  letter-spacing:-2.5px;
}

.ma-section-heading p{
  max-width:690px;

  margin-left:auto;
  margin-right:auto;

  color:#66758b;

  font-size:16px;

  line-height:1.75;
}


/* =========================================================
   PRICING
========================================================= */

.ma-pricing-section{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  padding:100px 0 105px;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(23,105,255,.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 78%,
      rgba(22,185,109,.09),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #eef5ff 0%,
      #f8fbff 40%,
      #ffffff 100%
    );
}

.ma-pricing-section:before{
  content:"";

  position:absolute;

  z-index:-1;

  width:650px;
  height:650px;

  left:-300px;
  top:100px;

  border-radius:50%;

  background:rgba(23,105,255,.08);

  filter:blur(60px);
}

.ma-pricing-section:after{
  content:"";

  position:absolute;

  z-index:-1;

  width:500px;
  height:500px;

  right:-270px;
  bottom:20px;

  border-radius:50%;

  background:rgba(22,185,109,.07);

  filter:blur(60px);
}

.ma-pricing-section .ma-kicker{
  padding:8px 14px;

  border-radius:999px;

  color:#1769ff;

  background:#e5efff;

  border:1px solid #d3e3ff;
}

.ma-pricing-grid{
  position:relative;

  z-index:2;

  max-width:930px;

  margin:0 auto;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:24px;

  align-items:stretch;
}

.ma-price-card{
  position:relative;

  display:flex;

  flex-direction:column;

  overflow:hidden;

  padding:38px;

  border:1px solid rgba(23,105,255,.12);

  border-radius:26px;

  background:#fff;

  box-shadow:
    0 25px 70px rgba(15,23,42,.09),
    0 2px 8px rgba(15,23,42,.03);

  transition:
    transform .3s,
    box-shadow .3s,
    border-color .3s;
}

.ma-price-card:hover{
  transform:translateY(-7px);

  box-shadow:
    0 32px 80px rgba(15,23,42,.13);
}

.ma-price-card:after{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  right:-100px;
  bottom:-100px;

  border-radius:50%;

  background:rgba(23,105,255,.06);

  pointer-events:none;
}


/* PLAN PRINCIPAL */

.ma-price-main{
  border:2px solid #1769ff;

  background:
    linear-gradient(
      145deg,
      rgba(23,105,255,.055),
      #fff 42%
    );

  box-shadow:
    0 28px 70px rgba(23,105,255,.15);
}

.ma-price-main:before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:5px;

  background:
    linear-gradient(
      90deg,
      #0755e7,
      #2478ff,
      #69a1ff
    );
}

.ma-popular{
  position:absolute;

  z-index:3;

  top:13px;
  right:16px;

  padding:7px 13px;

  white-space:nowrap;

  border-radius:999px;

  color:#fff;

  background:#1769ff;

  box-shadow:
    0 8px 20px rgba(23,105,255,.22);

  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.ma-price-main .ma-price strong{
  color:#1769ff;
}


/* ASESORÍA */

.ma-price-card:not(.ma-price-main){
  background:
    linear-gradient(
      145deg,
      rgba(22,185,109,.05),
      #fff 42%
    );
}

.ma-price-card:not(.ma-price-main):before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:5px;

  background:
    linear-gradient(
      90deg,
      #079653,
      #16b96d,
      #66daa4
    );
}

.ma-advisory-label{
  position:absolute;

  z-index:3;

  top:13px;
  right:16px;

  padding:7px 13px;

  white-space:nowrap;

  border-radius:999px;

  color:#087d49;

  background:#e9faf2;

  border:1px solid #ccefe0;

  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.ma-price-card:not(.ma-price-main) .ma-price strong{
  color:#109c5b;
}

.ma-plan-name{
  color:#65748a;

  font-size:11px;
  font-weight:900;
  letter-spacing:1.3px;
}

.ma-price{
  display:flex;

  align-items:flex-start;

  margin:19px 0;

  color:#0f172a;
}

.ma-price small{
  margin-top:12px;
  margin-right:5px;

  font-size:15px;
  font-weight:800;
}

.ma-price strong{
  font-size:72px;

  line-height:.9;

  letter-spacing:-4px;
}

.ma-price-card>p{
  min-height:68px;

  margin-top:0;

  color:#718096;

  font-size:14px;

  line-height:1.65;
}

.ma-price-card ul{
  flex:1;

  list-style:none;

  padding:20px 0;

  margin:20px 0 26px;

  border-top:1px solid #edf0f4;
  border-bottom:1px solid #edf0f4;
}

.ma-price-card li{
  margin:13px 0;

  color:#3f4d62;

  font-size:13px;
}


/* PAYMENT */

.ma-payment-methods{
  position:relative;

  z-index:2;

  max-width:930px;

  margin:35px auto 0;

  padding:22px;

  text-align:center;

  border:1px solid rgba(23,105,255,.12);

  border-radius:17px;

  background:rgba(255,255,255,.84);

  box-shadow:
    0 15px 45px rgba(15,23,42,.06);

  backdrop-filter:blur(15px);
}

.ma-payment-methods>span{
  display:block;

  margin-bottom:14px;

  color:#8490a3;

  font-size:11px;
}

.ma-payment-methods>div{
  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:10px;
}

.ma-payment-methods b{
  padding:8px 14px;

  border-radius:999px;

  background:#fff;

  border:1px solid #e4e9ef;

  color:#3d4b61;

  font-size:11px;

  transition:.25s;
}

.ma-payment-methods b:hover{
  transform:translateY(-2px);

  color:#1769ff;

  border-color:#bfd5ff;

  box-shadow:
    0 8px 20px rgba(23,105,255,.09);
}

.ma-bcv-inline{
  margin:17px 0 0;

  padding-top:16px;

  border-top:1px solid #e4e9ef;

  color:#718096;

  font-size:11px;

  line-height:1.6;
}

.ma-bcv-inline strong{
  color:#0d9254;
}


/* =========================================================
   WHAT YOU LEARN
========================================================= */

.ma-learning-section{
  position:relative;

  overflow:hidden;

  background:#fff;
}

.ma-learning-section:before{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  right:-300px;
  top:100px;

  border-radius:50%;

  background:rgba(23,105,255,.07);

  filter:blur(30px);
}

.ma-learning-section .ma-section-heading h2{
  background:
    linear-gradient(
      135deg,
      #101827 25%,
      #1769ff
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.ma-learning-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.ma-feature{
  position:relative;

  min-height:240px;

  padding:28px;

  overflow:hidden;

  border:1px solid #e6ebf2;

  border-radius:22px;

  background:#fff;

  box-shadow:
    0 10px 35px rgba(15,23,42,.045);

  transition:.35s;
}

.ma-feature:nth-child(1),
.ma-feature:nth-child(4){
  background:
    linear-gradient(
      145deg,
      #eef5ff,
      #fff 65%
    );
}

.ma-feature:nth-child(2),
.ma-feature:nth-child(5){
  background:
    linear-gradient(
      145deg,
      #effbf5,
      #fff 65%
    );
}

.ma-feature:nth-child(3),
.ma-feature:nth-child(6){
  background:
    linear-gradient(
      145deg,
      #f3f1ff,
      #fff 65%
    );
}

.ma-feature:hover{
  transform:translateY(-9px);

  border-color:rgba(23,105,255,.3);

  box-shadow:
    0 25px 60px rgba(28,69,130,.12);
}

.ma-feature:after{
  content:"";

  position:absolute;

  width:110px;
  height:110px;

  right:-60px;
  bottom:-60px;

  border-radius:50%;

  background:rgba(23,105,255,.07);

  transition:.35s;
}

.ma-feature:hover:after{
  transform:scale(1.8);
}

.ma-feature-icon{
  display:grid;

  place-items:center;

  width:46px;
  height:46px;

  margin-bottom:24px;

  border-radius:13px;

  color:#fff;

  font-size:12px;
  font-weight:900;
}

.ma-feature:nth-child(1) .ma-feature-icon,
.ma-feature:nth-child(4) .ma-feature-icon{
  background:
    linear-gradient(135deg,#2478ff,#0755e7);

  box-shadow:
    0 10px 25px rgba(23,105,255,.22);
}

.ma-feature:nth-child(2) .ma-feature-icon,
.ma-feature:nth-child(5) .ma-feature-icon{
  background:
    linear-gradient(135deg,#1bc477,#079653);

  box-shadow:
    0 10px 25px rgba(22,185,109,.19);
}

.ma-feature:nth-child(3) .ma-feature-icon,
.ma-feature:nth-child(6) .ma-feature-icon{
  background:
    linear-gradient(135deg,#6e63ff,#4538d5);

  box-shadow:
    0 10px 25px rgba(82,69,220,.18);
}

.ma-feature h3{
  margin:0 0 11px;

  color:#172033;

  font-size:18px;
}

.ma-feature p{
  margin:0;

  color:#6b778b;

  font-size:13px;

  line-height:1.72;
}


/* =========================================================
   PROGRAM — DARK BLUE
========================================================= */

.ma-program-section{
  position:relative;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(23,105,255,.38),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(0,119,255,.18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #020814 0%,
      #06152f 47%,
      #082654 100%
    );
}

.ma-program-section:before{
  content:"";

  position:absolute;

  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent
    );
}

.ma-program-section:after{
  content:"";

  position:absolute;

  width:550px;
  height:550px;

  right:-260px;
  top:-250px;

  border-radius:50%;

  background:rgba(45,126,255,.17);

  filter:blur(35px);
}

.ma-program-section .ma-section-heading{
  position:relative;

  z-index:2;
}

.ma-program-section .ma-kicker{
  color:#77aaff;
}

.ma-program-section .ma-section-heading h2{
  color:#fff;
}

.ma-program-section .ma-section-heading p{
  color:#a9bad1;
}

.ma-modules{
  position:relative;

  z-index:2;

  max-width:930px;

  margin:0 auto;

  display:grid;

  gap:14px;
}

.ma-module{
  position:relative;

  display:grid;

  grid-template-columns:135px 1fr;

  gap:30px;

  align-items:center;

  overflow:hidden;

  padding:25px 29px;

  border:1px solid rgba(255,255,255,.1);

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.13);

  backdrop-filter:blur(12px);

  transition:.3s;
}

.ma-module:before{
  content:"";

  position:absolute;

  left:0;
  top:18%;
  bottom:18%;

  width:3px;

  border-radius:0 5px 5px 0;

  background:
    linear-gradient(
      #5da0ff,
      #1769ff
    );

  opacity:.6;

  transition:.3s;
}

.ma-module:hover{
  transform:translateX(9px);

  border-color:rgba(89,155,255,.38);

  background:
    linear-gradient(
      135deg,
      rgba(23,105,255,.18),
      rgba(255,255,255,.055)
    );

  box-shadow:
    0 22px 55px rgba(0,0,0,.22);
}

.ma-module:hover:before{
  opacity:1;

  box-shadow:
    0 0 18px #1769ff;
}

.ma-module>span{
  color:#68a3ff;

  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.ma-module h3{
  margin:0 0 6px;

  color:#fff;

  font-size:17px;
}

.ma-module p{
  margin:0;

  color:#9dafc7;

  font-size:13px;

  line-height:1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.ma-process-section{
  position:relative;

  overflow:hidden;

  padding:105px 0;

  color:#fff;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.18),
      transparent 22%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(105,161,255,.3),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #1265ed 0%,
      #0758d8 50%,
      #063b9d 100%
    );
}

.ma-process-section:before{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  top:-350px;
  right:10%;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:50%;
}

.ma-process-section:after{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  bottom:-220px;
  left:7%;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:50%;
}

.ma-process-section .wrap{
  position:relative;
  z-index:2;
}

.ma-process-section .ma-section-heading h2{
  color:#fff;
}

.ma-process-section .ma-kicker{
  color:#c9dcff;
}

.ma-process-intro{
  color:#d9e7ff !important;
}

.ma-process-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;
}

.ma-process{
  position:relative;

  overflow:hidden;

  padding:28px;

  border:1px solid rgba(255,255,255,.16);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.15),
      rgba(255,255,255,.075)
    );

  box-shadow:
    0 20px 45px rgba(0,38,105,.13);

  backdrop-filter:blur(10px);

  transition:.3s;
}

.ma-process:hover{
  transform:translateY(-8px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.11)
    );

  border-color:rgba(255,255,255,.3);
}

.ma-process>span{
  display:grid;

  place-items:center;

  width:42px;
  height:42px;

  border-radius:50%;

  color:#0d59d1;

  background:#fff;

  box-shadow:
    0 10px 25px rgba(0,39,110,.18);

  font-weight:900;
}

.ma-process h3{
  margin:24px 0 9px;

  color:#fff;
}

.ma-process p{
  margin:0;

  color:#d7e6ff;

  font-size:13px;

  line-height:1.65;
}


/* =========================================================
   FAQ
========================================================= */

.ma-faq-section{
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(23,105,255,.09),
      transparent 25%
    ),
    #f5f8fc;
}

.ma-faq-section .ma-kicker{
  padding:7px 13px;

  border-radius:999px;

  background:#e6efff;
}

.ma-faq{
  max-width:850px;

  margin:0 auto;

  display:grid;

  gap:12px;
}

.ma-faq details{
  padding:0 24px;

  overflow:hidden;

  border:1px solid #e3e8ef;

  border-radius:17px;

  background:#fff;

  box-shadow:
    0 7px 25px rgba(15,23,42,.035);

  transition:.25s;
}

.ma-faq details[open]{
  border-color:rgba(23,105,255,.32);

  box-shadow:
    0 15px 40px rgba(23,105,255,.08);
}

.ma-faq summary{
  position:relative;

  padding:21px 35px 21px 0;

  cursor:pointer;

  list-style:none;

  color:#172033;

  font-weight:800;
}

.ma-faq summary::-webkit-details-marker{
  display:none;
}

.ma-faq summary:after{
  content:"+";

  position:absolute;

  right:0;
  top:17px;

  color:#1769ff;

  font-size:25px;
  font-weight:400;
}

.ma-faq details[open] summary:after{
  content:"−";
}

.ma-faq details p{
  margin:0;

  padding:0 0 22px;

  color:#718096;

  font-size:14px;

  line-height:1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.ma-final-cta{
  position:relative;

  overflow:hidden;

  padding:105px 0;

  text-align:center;

  color:#fff;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(100,165,255,.75),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(23,105,255,.5),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #074fc9 0%,
      #075ee8 48%,
      #06286d 100%
    );
}

.ma-final-cta:before{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  left:-280px;
  bottom:-350px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.15);
}

.ma-final-cta:after{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  right:-120px;
  top:-190px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.13);
}

.ma-final-cta .wrap{
  position:relative;

  z-index:2;

  max-width:850px;
}

.ma-final-cta>.wrap>span{
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;

  color:#bed4ff;
}

.ma-final-cta h2{
  color:#fff;

  margin-top:16px;
}

.ma-final-cta p{
  max-width:650px;

  margin:0 auto 30px;

  color:#dbe8ff;

  font-size:16px;

  line-height:1.7;
}


/* =========================================================
   FOOTER
========================================================= */

.ma-footer{
  padding:70px 0 25px;

  color:#aeb9c9;

  background:#030914;
}

.ma-footer-grid{
  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:60px;
}

.ma-footer .brand{
  color:#fff;
}

.ma-footer-grid>div{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:11px;
}

.ma-footer-grid p{
  max-width:300px;

  line-height:1.7;
}

.ma-footer-grid strong{
  margin-bottom:8px;

  color:#fff;
}

.ma-footer-grid a:not(.brand){
  color:#aeb9c9;

  font-size:13px;
}

.ma-footer-grid a:not(.brand):hover{
  color:#fff;
}

.ma-footer-bottom{
  display:flex;

  justify-content:space-between;

  gap:20px;

  margin-top:55px;

  padding-top:22px;

  border-top:
    1px solid rgba(255,255,255,.09);

  font-size:11px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.ma-whatsapp{
  position:fixed;

  z-index:1200;

  right:24px;
  bottom:24px;

  display:grid;

  place-items:center;

  width:62px;
  height:62px;

  border-radius:50%;

  color:#fff;

  background:#25d366;

  box-shadow:
    0 14px 35px rgba(37,211,102,.38);

  transition:.25s;
}

.ma-whatsapp:hover{
  transform:
    translateY(-4px)
    scale(1.04);
}

.ma-whatsapp svg{
  width:33px;
  height:33px;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible{
  opacity:1;

  transform:translateY(0);
}

.ma-learning-grid .reveal:nth-child(3n+2),
.ma-process-grid .reveal:nth-child(2){
  transition-delay:.08s;
}

.ma-learning-grid .reveal:nth-child(3n+3),
.ma-process-grid .reveal:nth-child(3){
  transition-delay:.16s;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#061329;
}

::-webkit-scrollbar-thumb{
  background:#1769ff;

  border-radius:20px;

  border:2px solid #061329;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

  .ma-menu{
    display:none;
  }

  .ma-hero{
    min-height:auto;
  }

  .ma-hero-grid{
    grid-template-columns:1fr;

    gap:60px;

    padding:80px 0 115px;
  }

  .ma-hero-copy{
    max-width:780px;
  }

  .ma-hero-visual{
    max-width:650px;

    width:100%;

    margin:auto;
  }

  .ma-float-one{
    left:-15px;
  }

  .ma-float-two{
    right:-8px;
  }

  .ma-learning-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ma-process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ma-footer-grid{
    grid-template-columns:2fr 1fr 1fr;
  }

  .ma-footer-grid>div:last-child{
    grid-column:2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

  html{
    scroll-padding-top:68px;
  }

  .ma-home .wrap{
    width:min(calc(100% - 28px),1180px);
  }

  .ma-nav{
    min-height:68px;
  }

  .ma-header .brand span{
    font-size:16px;
  }

  .ma-header .brand img{
    width:35px;
    height:35px;
  }

  .ma-login{
    padding:9px 11px;

    font-size:11px;
  }


  /* HERO */

  .ma-hero-grid{
    padding:62px 0 100px;

    gap:48px;
  }

  .ma-hero h1{
    font-size:clamp(42px,13vw,59px);

    letter-spacing:-2.8px;
  }

  .ma-hero-text{
    font-size:15px;
  }

  .ma-course-meta{
    align-items:flex-start;

    flex-direction:column;
  }

  .ma-hero-actions{
    flex-direction:column;
  }

  .ma-btn{
    width:100%;
  }

  .ma-trust{
    display:grid;

    gap:8px;
  }

  .ma-dashboard-card{
    padding:17px;

    border-radius:22px;
  }

  .ma-float-card{
    display:none;
  }

  .ma-scroll-hint{
    bottom:18px;
  }


  /* STRIP */

  .ma-strip-grid{
    grid-template-columns:1fr 1fr;
  }

  .ma-strip-grid>div{
    border-right:0;

    border-bottom:
      1px solid rgba(255,255,255,.08);

    padding:17px 8px;
  }

  .ma-strip-grid>div:nth-last-child(-n+2){
    border-bottom:0;
  }


  /* SECTIONS */

  .ma-section,
  .ma-process-section,
  .ma-pricing-section,
  .ma-final-cta{
    padding-top:78px;
    padding-bottom:78px;
  }

  .ma-section-heading{
    margin-bottom:40px;
  }

  .ma-section-heading h2,
  .ma-final-cta h2{
    font-size:35px;

    letter-spacing:-1.6px;
  }


  /* PRICING */

  .ma-pricing-grid{
    grid-template-columns:1fr;

    gap:35px;
  }

  .ma-price-card{
    padding:30px 24px;
  }

  .ma-price-card>p{
    min-height:0;
  }

  .ma-price strong{
    font-size:62px;
  }

  .ma-popular,
  .ma-advisory-label{
    top:12px;
    right:12px;

    font-size:7px;

    padding:6px 9px;
  }

  .ma-payment-methods{
    margin-top:28px;
  }


  /* LEARNING */

  .ma-learning-grid{
    grid-template-columns:1fr;
  }

  .ma-feature{
    min-height:auto;
  }


  /* PROGRAM */

  .ma-module{
    grid-template-columns:1fr;

    gap:9px;

    padding:21px 21px 21px 24px;
  }

  .ma-module:hover{
    transform:translateY(-3px);
  }


  /* PROCESS */

  .ma-process-grid{
    grid-template-columns:1fr;
  }

  .ma-process:hover{
    transform:translateY(-3px);
  }

  .ma-price-card:hover{
    transform:translateY(-3px);
  }


  /* FOOTER */

  .ma-footer-grid{
    grid-template-columns:1fr 1fr;

    gap:40px 25px;
  }

  .ma-footer-grid>div:first-child{
    grid-column:1/-1;
  }

  .ma-footer-grid>div:last-child{
    grid-column:auto;
  }

  .ma-footer-bottom{
    flex-direction:column;
  }


  /* WHATSAPP */

  .ma-whatsapp{
    width:56px;
    height:56px;

    right:17px;
    bottom:17px;
  }

  .ma-whatsapp svg{
    width:29px;
    height:29px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;

    transform:none;

    transition:none;
  }

  .ma-btn,
  .ma-feature,
  .ma-module,
  .ma-whatsapp,
  .ma-price-card,
  .ma-process{
    transition:none;
  }

  .ma-float-card{
    animation:none;
  }

  .ma-hero-visual{
    transform:none !important;
  }

}