:root{--navy:#061029;--blue:#0a6cff;--sky:#7eaaff;--grey:#e1e7f0;--yellow:#f5c518;--ink:#141414;--green:#07a040}


button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,h5{font-family:"Space Grotesk",sans-serif;font-weight:600}
em{font-style:normal;color:var(--blue)}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
h2{font-size:clamp(28px,3.6vw,38px);line-height:1.2}
h2.light{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:40px;font:500 13px Poppins,sans-serif;font-size:16px;}
.btn i{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
.btn i.w{background:#fff;color:var(--blue)}
.btn-white{background:#fff;color:#222 !important;border:1px solid #fff;}
.btn-blue{background:var(--blue);color:#fff; border:1px solid var(--blue);}
.btn-green{background:var(--green);color:#fff; border:1px solid var(--green);}
.btn-white:hover,.btn-blue:hover,.btn-green:hover,.btn-green:focus,.btn-white:focus,.btn-blue:focus {border-color:#fff;color:#fff !important;}
.btn-green span {line-height:1;}
/* nav */
/* hero */
.hero {
    background: var(--navy);
    color: #fff;
    padding: 60px 0 70px
}
.hero-in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.02;font-weight:500;margin-bottom:40px;color: #fff;}
.hero p{font-size:17px;margin-bottom:40px}
.btns{display:flex;gap:24px;flex-wrap:wrap}
.hero-img{width:100%;max-width:500px;height:550px;object-fit:cover;border-radius:24px;justify-self:end}

/* build */
.build{margin-top:50px}
.build-box{background:var(--grey);border-radius:0 40px 40px 0;margin-left:calc(50% - 50vw);padding:60px 40px 60px calc(50vw - 600px);display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;position:relative;overflow:hidden}
.build-imgs{position:relative;min-height:520px;margin-left:-20px}
.ring{position:absolute;top:0px;right:20px;width:150px;height:150px;border-radius:50%;background:#fff;padding:14px;z-index:2}
.ring img,.blob img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.blob{position:absolute;left:-20px;bottom:0px;width:440px;height:440px;border-radius:50%;background:#fff;padding:14px}
.build-txt h2{margin-bottom:26px}
.build-txt p{font-size:17px;color:#333;margin-bottom:0px;}

/* steps */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-top:70px;padding-bottom:70px;align-items:start}
.steps h2{font-size:clamp(28px,3.4vw,36px);margin-bottom:18px}
.checks{display:grid;gap:5px}
.checks li{position:relative;padding-left:40px}
.checks li::before{content:"\f153";font-family: flaticon !important;position:absolute;left:0;top:-4px;color: var(--blue);font-size: 22px;}
.checks h4{font-size:19px;margin-bottom:6px}
.checks p{color:#333;}
.video{position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 110px) 0,100% 110px,100% 100%,0 100%)}
.video>img{width:100%;height:100%;object-fit:cover}
.vcard{position:absolute;left:35px;bottom:35px;width:64%;padding:30px;text-align:left;color:#fff;background:rgba(150,160,180,.45);backdrop-filter:blur(8px);border-radius:4px 4px 0 0;transition:background .2s}
.vcard:hover{background:rgba(150,160,180,.6)}
.play{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:rgba(40,50,70,.75);font-size:38px;margin-bottom:20px}
.vcard small{display:block;font-size:16px;opacity:.85}
.vcard strong{font:500 24px "Space Grotesk",sans-serif}

/* challenges */
.dark{background:var(--navy);padding:60px 0 80px}
.dark h2{max-width:560px;margin-bottom:60px}
.cb-head,.cb-grid{display:block;margin-bottom:25px;}
.cb-head>div{height:64px;display:flex;align-items:center;gap:20px;padding-left:10px;font:500 26px "Space Grotesk",sans-serif;color:#222;border-radius: 4px;}
.ch{background:#f88b7b}.bh{background:#84d695}
.ic{width:50px;height:50px;background:#fff;padding:5px;border-radius:4px;}
.ic img{width:100%;}
.cb-grid{margin-top:26px;row-gap:26px}
.card{background:#fff;padding:26px 30px 26px 33px;position:relative;font-family:Poppins,sans-serif;height:190px;margin-bottom: 25px;}
.card::before{content:"";position:absolute;left:33px;top:26px;bottom:26px;width:2px;background:var(--yellow)}
.card h3{font:500 20px Poppins,sans-serif;padding-left:16px;margin-bottom:8px}
.card p{font-size:16px;line-height:1.5;padding-left:16px;color:#2a2a2a;max-width:460px}

/* modules */
.modules{padding-top:80px;padding-bottom:80px}
.modules h2{max-width:640px;margin-bottom:46px}
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.mod-list{display:grid;gap:5px;align-content:start}
.mod-list button{width:100%;text-align:left;padding:16px 18px;border:1px solid #5c9bff;background:#fff;font:500 20px "Space Grotesk",sans-serif;position:relative;transition:background .2s,color .2s}
.mod-list button:hover{background:#eef4ff}
.mod-list button[aria-selected=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
.mod-list button[aria-selected=true]::after{content:"";position:absolute;right:-18px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:18px solid var(--blue);border-right:0}
.mod-detail{border:1px solid #5c9bff;padding:34px 34px 34px 34px;min-height:300px;position:relative;}
.mod-detail h3{font-size:22px;line-height:1.2;margin-bottom:15px}
.mod-detail p{font-family:Inter;font-size:17px;line-height:1.8;color:#333;letter-spacing:.02em;margin-bottom: 15px;}

/* features */
.features{background:var(--grey);padding:60px 0 70px}
.features h2{max-width:640px;margin-bottom:40px}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.f-card{background:#fff;border-top:5px solid var(--blue);border-radius:12px 12px 12px 12px;padding:30px 24px}
.f-card h3{font:600 22px/1.15 "Space Grotesk",sans-serif;margin-bottom:22px}
.f-card p{font-size:16px;line-height:2;color:#333}

/* case study */
.case{padding-top:70px;padding-bottom:70px}
.case-box{background:var(--navy);border-radius:40px;padding:50px 48px;color:#fff}
.case-box h2{margin-bottom:36px}
.case-in{display:grid;grid-template-columns:370px 1fr;gap:50px;align-items:center}
.case-in img{width:100%;height:380px;object-fit:cover;border-radius:30px;}
.q{display:block;font:700 110px/.7 Georgia,serif;color:var(--blue);margin-bottom:20px;height:50px}
.case-in h3 {color:#fff;margin-bottom:20px;}
.case-in p{font-size:17px;line-height:2;margin-bottom:20px}
.cut{height:30px;border-top:1px solid #5a6478;border-right:1px solid transparent;margin:0 0 8px;position:relative}

/* testimonials */
.testi{padding-top:40px;padding-bottom:70px}
.testi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.arrows{display:flex;gap:14px}
.arrows button{width:56px;height:56px;border:2px solid #111;border-radius:50%;font-size:32px;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.arrows button:hover{background:#111;color:#fff}
.track-wrap{overflow:hidden}
.track{display:flex;gap:22px;transition:transform .45s ease}
.t-card{flex:0 0 calc((100% - 44px)/2);background:var(--grey);border-radius:8px;padding:20px}
.t-card .q{font-size:80px;height:40px;margin-bottom:0;}
.t-card p{font-size:17px;line-height:1.6;margin-bottom:20px;min-height:217px;text-overflow:ellipsis;-webkit-line-clamp:8;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;}
.t-by{border-top:1px solid #444;padding-top:14px;display:flex;align-items:center;gap:8px;position:relative;font:500 14px Poppins,sans-serif}
.t-by .av{height:45px;border-radius:4px;border:1px solid #d8dde5;}
.stars{letter-spacing:2px;font-size:18px;line-height:1.1;}

.faqs-section .accordion-item.is-active,.faqs-section .accordion-item:hover {border-color:var(--blue);}
.faqs-section .accordion-item.is-active .accordion-thumb,.faqs-section .accordion-item:hover .accordion-thumb,.faqs-section .accordion-panel {background:var(--blue);}
.module-thumbnail {width:100%;position: absolute;bottom:15px;left:0;z-index: 9;text-align:center;}
.module-thumbnail img {height:275px;}
/* responsive */
@media(max-width:1000px){
  .card{height:290px;}
  .hero-in,.steps,.mod-grid,.case-in{grid-template-columns:1fr}
  .hero-img{justify-self:start;height:380px}
  .build-box{grid-template-columns:1fr;padding:40px 20px;margin:0 -20px;border-radius:0 30px 30px 0}
  .build-imgs{min-height:340px;margin:0}
  .blob{width:300px;height:300px;left:-10px;bottom:0}
  .f-grid{grid-template-columns:1fr 1fr}
  .t-card{flex-basis:calc((100% - 22px)/2)} 
  .f-cols{border:0;padding:20px 24px}
  .mod-list button[aria-selected=true]::after{display:none}
  .module-thumbnail {position:inherit}
}
@media(max-width:767px){
  .card{height:auto;}
}
@media(max-width:640px){
  .cb-head,.cb-grid,.f-grid{grid-template-columns:1fr}
  .cb-head>div{font-size:20px;gap:20px}
  .t-card{flex-basis:100%}
  .case-box{padding:30px 20px;border-radius:24px}
  .video{height:460px}
  .vcard{width:80%;left:10%;padding:20px}
  .play{width:60px;height:60px;margin-bottom:20px}
  .module-thumbnail {display:none;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}