:root{--blue:#5393CF;--blue-dark:#4582BD;--blue-soft:#EEF7FD;--navy:#172A5E;--text:#1E293B;--muted:#64748B;--border:#E2E8F0;--bg:#F6F8FB;--white:#fff;--green:#36A56F;--orange:#D8892D;--shadow:0 18px 55px rgba(27,55,92,.09)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Satoshi',sans-serif;color:var(--text);background:#fff;line-height:1.5}a{text-decoration:none;color:inherit}button{font:inherit}img{max-width:100%}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.nav{height:82px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.96);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50}.nav-inner{height:100%;display:flex;align-items:center;gap:30px}.logo{width:190px;height:auto;display:block;flex-shrink:0}.exam-switch{display:flex;align-items:center;gap:27px;margin-left:4px;padding-left:30px;border-left:1px solid #D9E2EA}.exam-switch label{font-size:11px;font-weight:700;color:#94A3B8}.exam-list{display:flex;gap:24px;align-items:center}.exam-btn{border:0;background:transparent;color:#64748B;font-size:12px;font-weight:700;cursor:pointer;padding:6px 0;position:relative}.exam-btn.active{color:var(--navy)}.exam-btn.active:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--blue);border-radius:2px}.nav-spacer{flex:1}.nav-actions{display:flex;align-items:center;gap:9px}.nav-btn{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}.plans-btn{background:#fff;color:var(--navy);gap:7px}.login-btn{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;border-color:transparent}.sparkle{width:14px;height:14px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#F7FBFF 0%,#EEF6FD 44%,#FFFFFF 100%);border-bottom:1px solid #EDF2F6}.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-250px;background:rgba(83,147,207,.14)}.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:-170px;bottom:-260px;background:rgba(119,198,164,.10)}.hero-grid{position:relative;z-index:2;min-height:650px;display:grid;grid-template-columns:1.03fr .97fr;gap:55px;align-items:center;padding:72px 0 78px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid rgba(83,147,207,.18);color:var(--blue-dark);font-size:11px;font-weight:800;box-shadow:0 7px 20px rgba(83,147,207,.08);margin-bottom:18px}.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}.hero h1{font-size:61px;line-height:1.04;letter-spacing:-2.4px;color:var(--navy);max-width:680px;margin-bottom:18px}.hero h1 .accent{color:var(--blue)}.hero p{font-size:16px;line-height:1.8;color:var(--muted);max-width:590px;margin-bottom:28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.primary{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;border-color:transparent;box-shadow:0 9px 24px rgba(83,147,207,.18)}.secondary{background:#fff;color:var(--navy)}.hero-actions .nav-btn{height:46px;padding:0 19px}.hero-visual{position:relative;height:500px}.hero-photo{position:absolute;right:8px;top:8px;width:82%;height:470px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);background:#dfe8ef}.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,32,61,0) 45%,rgba(18,32,61,.42) 100%)}.float{position:absolute;z-index:3;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 17px 35px rgba(27,55,92,.14)}.float.progress{left:0;bottom:55px;width:215px;padding:16px}.float.progress .top{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--muted)}.float.progress strong{display:block;font-size:28px;color:var(--navy);margin:4px 0 8px}.track{height:7px;border-radius:99px;background:#EDF2F7;overflow:hidden}.track span{display:block;width:74%;height:100%;background:var(--blue)}.float.streak{right:-4px;top:62px;padding:14px 15px;width:175px}.streak b{display:block;font-size:12px;color:var(--navy)}.streak span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.facts{border-bottom:1px solid var(--border);background:#fff}.fact-grid{display:grid;grid-template-columns:repeat(4,1fr)}.fact{min-height:122px;display:flex;align-items:center;gap:13px;padding:20px;border-right:1px solid var(--border)}.fact:last-child{border-right:0}.fact-icon{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fact-icon svg{width:22px;height:22px}.fact-icon.blue{background:#EEF7FD;color:#5393CF}.fact-icon.green{background:#EEF8F0;color:#36A56F}.fact-icon.orange{background:#FFF5E9;color:#D8892D}.fact-icon.navy{background:#EEF1F7;color:#586A89}.fact strong{display:block;font-size:15px;color:var(--navy)}.fact span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.section{padding:92px 0}.section.alt{background:var(--bg)}.kicker{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--blue-dark);margin-bottom:9px}.section-head{max-width:760px;margin:0 auto 48px;text-align:center}.section-head h2{font-size:40px;line-height:1.18;letter-spacing:-1.3px;color:var(--navy);margin-bottom:12px}.section-head p{font-size:14px;color:var(--muted);line-height:1.8}
.goal-tabs{display:flex;justify-content:center;margin-bottom:40px}.goal-wrap{display:flex;gap:4px;padding:4px;border:1px solid var(--border);background:#fff;border-radius:13px}.goal-btn{border:0;background:transparent;border-radius:9px;padding:9px 20px;color:var(--muted);font-size:12px;font-weight:800;cursor:pointer}.goal-btn.active{background:var(--blue-soft);color:var(--blue-dark)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 8px 28px rgba(27,55,92,.04)}.feature-card img{height:210px;width:100%;object-fit:cover;display:block}.feature-body{padding:23px}.feature-body h3{font-size:17px;color:var(--navy);margin-bottom:8px}.feature-body p{font-size:12px;color:var(--muted);line-height:1.7}
.product-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}.product-visual{background:linear-gradient(145deg,#EAF4FC,#F6FAFD);border:1px solid #DCE9F2;border-radius:28px;padding:25px;min-height:520px}.mock{width:min(410px,100%);margin:auto;background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.mock-top{height:55px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.mock-title{font-size:11px;font-weight:800;color:var(--navy)}.avatar{width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}.mock-body{padding:16px}.mock-banner{background:linear-gradient(135deg,#F2F9FE,#E9F4FC);border:1px solid rgba(83,147,207,.12);padding:15px;border-radius:14px}.mock-banner small{font-size:8px;color:var(--muted);font-weight:700}.mock-banner b{display:block;color:var(--navy);font-size:18px;margin-top:2px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.mini-stat{border:1px solid var(--border);border-radius:11px;padding:10px}.mini-stat b{display:block;font-size:17px;color:var(--navy)}.mini-stat span{font-size:8px;color:var(--muted)}.mock-progress{margin-top:9px;border:1px solid var(--border);border-radius:11px;padding:12px}.mock-progress .line{display:flex;justify-content:space-between;font-size:8px;color:var(--muted)}.mock-q{margin-top:9px;border:1px solid var(--border);border-radius:11px;padding:12px}.mock-q p{font-size:9px;font-weight:700;color:var(--navy);line-height:1.55}.option{border:1px solid var(--border);padding:7px 8px;border-radius:8px;margin-top:6px;font-size:8px;color:#64748B}.option.ok{background:#EEF8F0;border-color:#D1E8D6;color:#2E7D32;font-weight:700}.product-copy h2{font-size:38px;line-height:1.18;letter-spacing:-1.2px;color:var(--navy);margin-bottom:14px}.product-copy>p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:22px}.checks{display:grid;gap:14px}.check{display:flex;gap:10px}.check-icon{width:22px;height:22px;border-radius:8px;background:var(--blue-soft);color:var(--blue-dark);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check strong{display:block;color:var(--navy);font-size:12px;margin-bottom:2px}.check span{font-size:10.5px;color:var(--muted);line-height:1.55}
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}.cycle:before{content:"";position:absolute;left:8%;right:8%;top:31px;height:1px;background:#CCD9E5}.cycle-item{position:relative;z-index:2;background:#fff;padding-right:10px}.cycle-num{width:62px;height:62px;border-radius:18px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--blue-dark);font-size:15px;font-weight:800;box-shadow:0 8px 22px rgba(27,55,92,.05);margin-bottom:16px}.cycle-item h3{font-size:15px;color:var(--navy);margin-bottom:6px}.cycle-item p{font-size:11px;line-height:1.65;color:var(--muted);max-width:230px}
.stats-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stat-panel{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px}.stat-panel h3{font-size:17px;color:var(--navy);margin-bottom:5px}.stat-panel>p{font-size:11px;color:var(--muted);margin-bottom:18px}.bars{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:100px 1fr 38px;gap:10px;align-items:center;font-size:9px;color:var(--muted)}.bar-line{height:10px;background:#EDF2F7;border-radius:99px;overflow:hidden}.bar-line span{display:block;height:100%;border-radius:99px}.b1{background:#5393CF;width:82%}.b2{background:#6DB2E2;width:70%}.b3{background:#7DC9A4;width:61%}.b4{background:#E5AE67;width:47%}.bar-row strong{color:var(--navy);font-size:10px}.donut-wrap{display:flex;align-items:center;gap:24px}.donut{width:170px;height:170px;border-radius:50%;background:conic-gradient(#5393CF 0 58%,#7DC9A4 58% 79%,#E5AE67 79% 90%,#D9E3ED 90% 100%);position:relative;flex-shrink:0}.donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:#fff}.legend{display:grid;gap:9px}.legend-item{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-item strong{color:var(--navy);margin-left:auto}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.testimonial{background:#fff;border:1px solid var(--border);border-radius:19px;padding:22px}.stars{color:#E4A542;font-size:11px;letter-spacing:2px;margin-bottom:12px}.testimonial p{font-size:12px;line-height:1.75;color:#526176;min-height:120px}.person{display:flex;align-items:center;gap:10px;margin-top:17px}.person img{width:42px;height:42px;border-radius:50%;object-fit:cover}.person strong{display:block;color:var(--navy);font-size:11px}.person span{display:block;font-size:9px;color:var(--muted);margin-top:2px}
.faq{width:min(840px,100%);margin:auto}.faq-item{border:1px solid var(--border);border-radius:13px;background:#fff;margin-bottom:9px;overflow:hidden}.faq-q{width:100%;border:0;background:#fff;padding:17px 18px;display:flex;justify-content:space-between;align-items:center;text-align:left;color:var(--navy);font-size:12px;font-weight:700;cursor:pointer}.plus{font-size:18px;color:var(--blue-dark);transition:.2s}.faq-a{display:none;padding:0 18px 17px;color:var(--muted);font-size:11px;line-height:1.7}.faq-item.open .faq-a{display:block}.faq-item.open .plus{transform:rotate(45deg)}
.cta{padding:92px 0}.cta-card{background:linear-gradient(135deg,#203E73,#2C5B91);border-radius:28px;padding:52px 54px;display:grid;grid-template-columns:1fr .7fr;gap:35px;align-items:center;overflow:hidden;position:relative}.cta-card:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-140px;top:-170px}.cta-card h2{font-size:39px;line-height:1.16;letter-spacing:-1.3px;color:#fff;position:relative;z-index:2;margin-bottom:12px}.cta-card p{font-size:13px;line-height:1.75;color:rgba(255,255,255,.75);position:relative;z-index:2;max-width:550px}.cta-actions{display:flex;justify-content:flex-end;gap:10px;position:relative;z-index:2}.cta-actions .primary{background:#fff;color:var(--navy);box-shadow:none}.cta-actions .secondary{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.2)}
.footer{background:#102345;color:#fff;padding:58px 0 27px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:42px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}.footer-logo{width:190px;height:auto;display:block}.footer-copy{max-width:300px;color:rgba(255,255,255,.58);font-size:10.5px;line-height:1.7;margin-top:14px}.footer h4{font-size:11px;margin-bottom:12px}.footer a{display:block;color:rgba(255,255,255,.62);font-size:10px;margin:8px 0}.footer a:hover{color:#fff}.store-buttons{display:grid;gap:9px;margin-top:8px}.store-btn{height:47px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;padding:0 12px;color:#fff}.store-icon{width:21px;height:21px;flex-shrink:0}.store-small{font-size:7px;color:rgba(255,255,255,.56);display:block;line-height:1}.store-big{font-size:12px;font-weight:700;display:block;line-height:1.15;margin-top:2px}.footer-bottom{padding-top:20px;display:flex;justify-content:space-between;color:rgba(255,255,255,.45);font-size:9px}
@media(max-width:1000px){.exam-switch{gap:16px;padding-left:20px}.exam-list{gap:16px}.hero-grid{grid-template-columns:1fr}.hero-visual{height:430px}.feature-grid,.testimonial-grid{grid-template-columns:1fr 1fr}.product-grid,.stats-layout,.cta-card{grid-template-columns:1fr}.cta-actions{justify-content:flex-start}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(max-width:700px){.container{width:min(100% - 32px,1180px)}.nav{height:74px}.nav-inner{gap:14px}.logo{width:145px}.exam-switch{margin-left:0;padding-left:15px;gap:11px;overflow:hidden}.exam-switch label{display:none}.exam-list{gap:14px}.exam-btn{font-size:10px}.nav-actions .plans-btn{padding:0 11px}.login-btn{padding:0 11px}.hero-grid{padding:45px 0 55px}.hero h1{font-size:43px;letter-spacing:-1.5px}.hero p{font-size:14px}.hero-visual{height:360px}.hero-photo{height:340px;width:85%;right:0}.float.progress{left:0;bottom:24px;width:185px}.float.streak{right:-2px;top:25px;width:150px}.fact-grid{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--border)}.section{padding:70px 0}.section-head h2{font-size:31px}.feature-grid,.testimonial-grid{grid-template-columns:1fr}.cycle{grid-template-columns:1fr 1fr;gap:26px}.cycle:before{display:none}.stats-layout{gap:14px}.donut-wrap{flex-direction:column;align-items:flex-start}.cta-card{padding:35px 26px}.cta-card h2{font-size:30px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:7px}}
@media(max-width:480px){.exam-list{gap:10px}.exam-btn{font-size:9px}.nav-actions .plans-btn{display:none}.logo{width:135px}.hero h1{font-size:37px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .nav-btn{width:100%}.fact{padding:14px 12px}.fact-icon{width:38px;height:38px;border-radius:12px}.fact strong{font-size:13px}.fact span{font-size:9px}}
/* ===== V3 NAV + VISUAL REFINEMENT ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-link{display:flex;align-items:center;flex-shrink:0}.nav-divider{width:1px;height:34px;background:#D8E1E9;margin-left:10px;margin-right:6px}.exam-picker-wrap{position:relative;flex-shrink:0}.exam-picker{height:40px;min-width:142px;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;padding:0 38px 0 14px;appearance:none;cursor:pointer;outline:none;box-shadow:0 4px 12px rgba(27,55,92,.035)}.exam-picker:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(83,147,207,.1)}.exam-picker-wrap:after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid #6B7A8D;border-bottom:1.5px solid #6B7A8D;transform:translateY(-65%) rotate(45deg);pointer-events:none}.nav-actions{gap:10px}.plans-btn{padding:0 15px;background:#fff;color:var(--navy)}.plans-btn:hover{background:var(--blue-soft);border-color:#CFE3F3}.sparkle{width:15px;height:15px}.login-btn{padding:0 18px}
.feature-image-wrap{height:225px;position:relative;overflow:hidden;background:#EAF1F6}.feature-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}.feature-card:hover .feature-image-wrap img{transform:scale(1.035)}.image-chip{position:absolute;left:15px;bottom:14px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.91);backdrop-filter:blur(8px);font-size:8px;font-weight:800;letter-spacing:.5px;color:#58708A}.blue-chip{color:var(--blue-dark)}.green-chip{color:#2D8B61}.feature-card{box-shadow:0 11px 32px rgba(27,55,92,.05);transition:transform .25s ease,box-shadow .25s ease}.feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(27,55,92,.09)}
.testimonials-head{margin-bottom:42px}.testimonial-showcase{display:grid;grid-template-columns:1.07fr .93fr;gap:18px;align-items:stretch}.testimonial{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:22px;padding:27px;box-shadow:0 10px 30px rgba(27,55,92,.045)}.featured-testimonial{background:linear-gradient(145deg,#fff,#F5FAFE);padding:31px}.featured-testimonial:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-95px;top:-95px;background:rgba(83,147,207,.09)}.quote-mark{position:absolute;right:27px;top:12px;font-family:Georgia,serif;font-size:92px;line-height:1;color:rgba(83,147,207,.16)}.stars{position:relative;z-index:2;color:#E0A13A;font-size:12px;letter-spacing:2px;margin-bottom:14px}.testimonial p{position:relative;z-index:2;font-size:14px;line-height:1.8;color:#526176;min-height:auto;margin-bottom:23px;max-width:610px}.featured-testimonial p{font-size:16px;line-height:1.8;color:#33465D;max-width:580px}.testimonial-stack{display:grid;grid-template-rows:1fr 1fr;gap:18px}.compact-testimonial{padding:23px 24px}.compact-testimonial p{font-size:12px;line-height:1.75;margin-bottom:18px}.accent-testimonial{background:linear-gradient(145deg,#EEF7FD,#fff)}.person{position:relative;z-index:2;display:flex;align-items:center;gap:11px;margin-top:auto}.person img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 10px rgba(27,55,92,.1)}.person strong{display:block;color:var(--navy);font-size:11px}.person span{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}.testimonial-tag{position:absolute;left:27px;bottom:20px;padding:6px 9px;border-radius:7px;background:#E9F4FC;color:var(--blue-dark);font-size:8px;font-weight:800;letter-spacing:.6px}
.footer{background:#101F40;padding:62px 0 28px}.footer-grid{grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:48px}.footer-brand-col{min-width:0}.footer-logo-panel{width:max-content;background:#fff;border-radius:12px;padding:10px 14px 9px;box-shadow:0 8px 22px rgba(0,0,0,.15)}.footer-logo{width:182px;height:auto;display:block}.footer-copy{max-width:310px;margin-top:16px;color:rgba(255,255,255,.6);font-size:10.5px;line-height:1.72}.footer h4{font-size:11.5px;letter-spacing:.2px;margin-bottom:16px;color:#fff}.footer a{font-size:10.5px;margin:9px 0;color:rgba(255,255,255,.62)}.footer a:hover{color:#fff}.footer-download p{font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.57);max-width:290px;margin-bottom:11px}.download-note{display:inline-flex;align-items:center;padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.04);font-size:8px;color:rgba(255,255,255,.58);font-weight:700;margin-bottom:11px}.store-buttons{display:flex;gap:8px;margin-top:0;flex-wrap:wrap}.footer-store-buttons{margin-top:18px;max-width:360px}.store-btn{height:45px;min-width:143px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.05);display:flex;align-items:center;gap:9px;padding:0 11px;color:#fff}.store-btn:hover{background:rgba(255,255,255,.09);color:#fff!important}.store-icon{width:21px;height:21px;flex-shrink:0}.store-small{font-size:6.5px;color:rgba(255,255,255,.52);display:block;line-height:1}.store-big{font-size:11.5px;font-weight:700;display:block;line-height:1.15;margin-top:2px}.phone-mark{width:21px;height:21px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff}.social-row{display:flex;gap:9px;margin-top:20px}.social-row a{width:35px;height:35px;border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.62);font-size:15px;font-weight:700;margin:0}.social-row a:hover{border-color:rgba(255,255,255,.22);color:#fff}.footer-bottom{padding-top:21px;margin-top:2px;display:flex;justify-content:space-between;color:rgba(255,255,255,.43);font-size:9px}
@media(max-width:1000px){.nav-divider{margin-left:0}.exam-picker{min-width:125px}.testimonial-showcase{grid-template-columns:1fr}.testimonial-stack{grid-template-rows:auto auto}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-download{grid-column:1/-1}}
@media(max-width:700px){.nav{height:74px}.nav-inner{gap:10px}.logo{width:145px}.nav-divider{height:29px;margin:0}.exam-picker{min-width:105px;height:36px;padding-left:11px;font-size:10px}.exam-picker-wrap:after{right:12px;width:6px;height:6px}.nav-actions{gap:7px}.plans-btn{padding:0 10px}.login-btn{padding:0 11px}.testimonial-showcase{gap:14px}.testimonial-stack{gap:14px}.featured-testimonial{padding:25px}.testimonial-tag{left:25px}.footer-grid{grid-template-columns:1fr;gap:30px}.footer-brand-col,.footer-download{grid-column:1/-1}.footer-logo-panel{padding:8px 12px}.footer-logo{width:170px}.footer-bottom{flex-direction:column;gap:7px}}
@media(max-width:480px){.logo{width:127px}.exam-picker{min-width:91px;font-size:9px}.plans-btn{font-size:10px}.login-btn{font-size:10px}.sparkle{width:13px}.nav-btn{height:37px}.exam-switch{display:none}.testimonial p,.featured-testimonial p{font-size:12px}.footer-grid{grid-template-columns:1fr}.footer-brand-col,.footer-download{grid-column:auto}}
/* =====================================================================
MYTESTCART LANDING — project overrides on top of the approved mockup
---------------------------------------------------------------------
Everything above this line is the mockup stylesheet, ported as-is with
Satoshi swapped in for the mockup's font. Below are the changes the
real site needs:
1. Satoshi fallback stack + icon-font protection
2. Brand lockup (app mark + wordmark) instead of a single logo file
3. Sign In / Sign Up pair, and a mobile nav
4. A full-bleed hero built around the doctors cut-out, on blue with a
glow rising from the bottom — the mockup's two-column hero assumed
a rectangular photo, which this transparent PNG is not.
===================================================================== */
:root{
--font:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--hero-navy:#12305C;
--hero-mid:#2E6DAB;
--hero-light:#63A4DC;
}
body,button,input,select,textarea{font-family:var(--font)}
/* ---------- 1. Brand lockup ---------- */
.brand-link{gap:9px}
.brand-mark{width:38px;height:38px;border-radius:10px;display:block;flex-shrink:0}
.brand-word{width:135px;height:auto;display:block}
.logo{width:auto}
/* ---------- 2. Nav actions: Plans + Sign In + Sign Up ---------- */
.nav-actions{gap:8px}
.signin-btn{background:#fff;color:var(--navy)}
.signin-btn:hover{background:var(--blue-soft);border-color:#CFE3F3}
.signup-btn{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;border-color:transparent;box-shadow:0 7px 17px rgba(83,147,207,.18)}
.signup-btn:hover{filter:brightness(1.04)}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:var(--navy)}
/* Slide-in drawer, from the right, over the page. */
body.mobile-nav-locked{overflow:hidden}
.mobile-nav-backdrop{
position:fixed;inset:0;z-index:98;
background:rgba(9,20,36,.45);
opacity:0;pointer-events:none;
transition:opacity .3s ease;
}
.mobile-nav-backdrop.open{opacity:1;pointer-events:auto}
.mobile-nav{
display:block;position:fixed;top:0;right:0;bottom:0;z-index:99;
width:min(320px,84vw);
background:#fff;
border-left:1px solid var(--border);
box-shadow:-18px 0 45px rgba(8,28,56,.16);
padding:0 0 18px;
transform:translateX(100%);
transition:transform .32s cubic-bezier(.4,0,.2,1);
overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.mobile-nav-title{font-size:14px;font-weight:800;color:var(--navy)}
.mobile-nav-close{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mobile-nav-close:hover{background:var(--blue-soft)}
.mobile-nav .container{width:auto;margin:0;padding:0 20px;display:grid;gap:9px}
.mobile-nav .nav-btn{width:100%;height:44px}
.mobile-nav .exam-picker{width:100%}
/* ---------- 3. Hero: full-bleed doctors on blue with a bottom glow ---------- */
.hero{
position:relative;
overflow:hidden;
border-bottom:0;
padding:0;
background:linear-gradient(180deg,var(--hero-navy) 0%,#1D4C85 30%,var(--hero-mid) 58%,var(--hero-light) 82%,#8CC3EA 100%);
}
.hero:before,.hero:after{content:none}
/* Soft light sources: two wide circles high up, and the main glow that rises
from the bottom edge behind the group photo. */
.hero-aura{position:absolute;border-radius:50%;pointer-events:none}
.hero-aura.one{width:620px;height:620px;left:-200px;top:-260px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)}
.hero-aura.two{width:540px;height:540px;right:-190px;top:-210px;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 62%)}
/* The light source sits ON the bottom edge and rises behind the group, so the
people read as standing in front of it rather than pasted on a flat panel. */
.hero-glow{
position:absolute;
left:50%;
bottom:-60px;
transform:translateX(-50%);
width:min(1150px,120%);
height:540px;
border-radius:50%;
background:radial-gradient(ellipse at 50% 78%,rgba(255,255,255,.95) 0%,rgba(219,240,255,.62) 33%,rgba(160,206,240,.22) 55%,rgba(140,195,234,0) 74%);
filter:blur(22px);
pointer-events:none;
z-index:2;
}
.hero-inner{position:relative;z-index:3;text-align:center;padding:58px 0 0}
.hero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.hero .eyebrow-dot{background:#BFE0FA}
.hero h1{
margin:0 auto 18px;
max-width:900px;
color:#fff;
font-size:58px;
line-height:1.06;
letter-spacing:-2.2px;
text-shadow:0 2px 22px rgba(9,29,58,.2);
}
.hero h1 .accent{color:#CFE7FA}
.hero p{margin:0 auto 26px;max-width:640px;color:rgba(255,255,255,.88);font-size:16px;line-height:1.75}
.hero-actions{justify-content:center;margin-bottom:6px}
.hero-actions .primary{background:#fff;color:var(--navy);box-shadow:0 12px 28px rgba(6,25,53,.22)}
.hero-actions .primary:hover{background:#F2F8FE}
.hero-actions .secondary{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.hero-actions .secondary:hover{background:rgba(255,255,255,.2)}
/* The cut-out is full-bleed and sits ON the bottom edge — no container gutter,
no rounded frame, nothing under it. */
.hero-people-wrap{position:relative;z-index:3;margin-top:6px}
.hero-people{display:block;width:100%;max-width:1560px;margin:0 auto;height:auto;filter:drop-shadow(0 -6px 26px rgba(8,28,56,.16))}
/* The cut-out ends mid-thigh. Without this the crop reads as a mistake where
the hero meets the facts strip; the wash resolves it into the next section. */
.hero-people-wrap:after{
content:"";
position:absolute;
left:0;right:0;bottom:-1px;
height:120px;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(235,247,255,.72) 52%,#fff 100%);
pointer-events:none;
z-index:4;
}
/* Floating stat chips, kept from the mockup but re-anchored over the photo. */
.hero-float{position:absolute;z-index:5;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:0 18px 38px rgba(8,28,56,.2);backdrop-filter:blur(10px)}
.hero-float.progress{left:max(20px,calc(50% - 640px));bottom:150px;width:205px;padding:15px}
.hero-float.progress .top{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--muted)}
.hero-float.progress strong{display:block;font-size:26px;color:var(--navy);margin:3px 0 8px}
.hero-float.progress .track{height:7px;border-radius:99px;background:#EDF2F7;overflow:hidden}
.hero-float.progress .track span{display:block;height:100%;background:var(--blue)}
.hero-float.streak{right:max(20px,calc(50% - 640px));bottom:126px;width:182px;padding:14px 15px}
.hero-float.streak b{display:block;font-size:12px;color:var(--navy)}
.hero-float.streak span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
/* The facts strip sits directly under the hero and closes it off. */
.facts{border-top:0;margin-top:-1px}
@media(max-width:1180px){
.hero-float.progress{left:16px;bottom:140px}
.hero-float.streak{right:16px;bottom:118px}
}
@media(max-width:900px){
.hero-inner{padding-top:48px}
.hero h1{font-size:42px;letter-spacing:-1.5px}
.hero p{font-size:14px}
.hero-float{display:none}
.hero-glow{height:340px;bottom:-30px;opacity:.65}
.hero-people-wrap{margin-top:22px}
.nav-toggle{display:flex}
.nav .exam-picker-wrap,.nav .nav-divider,.nav-actions .plans-btn,.nav-actions .signin-btn,.nav-actions .signup-btn{display:none}
}
@media(max-width:560px){
.hero-inner{padding-top:38px}
.hero h1{font-size:32px;letter-spacing:-1px}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .nav-btn{width:100%}
.brand-word{width:112px}
.brand-mark{width:32px;height:32px}
.hero-glow{height:200px;bottom:-10px;opacity:.5}
.hero-people-wrap{margin-top:18px;overflow:hidden}
.hero-people{width:150%;max-width:none;margin-left:-25%}
}
/* ---------- 4. Misc ---------- */
.fa,[class^="fa-"],[class*=" fa-"]{font-family:FontAwesome!important}
.section-head h2,.hero h1,.cta-card h2,.product-copy h2{font-weight:700}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:12px;z-index:99;background:#fff;color:var(--navy);padding:8px 12px;border-radius:8px}
/* ---------- Footer brand lockup ----------
MTCLOGO is a blue wordmark; on the dark footer it is knocked out to white
rather than shipping a second logo file. */
.footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .brand-mark{width:34px;height:34px;border-radius:9px}
.footer .footer-word{width:140px;filter:brightness(0) invert(1);opacity:.95}
.footer .footer-copy{margin-top:0}
/* ---------- Feature cards without stock photography ----------
The mockup put an Unsplash photo at the top of each card. Hotlinking a
stock library from production is not an option, and the local image
library is all leftovers from the orange theme, so the photo panel is a
tinted gradient carrying the step number and an icon instead.
To use real photography later: drop the files in this folder, add an
![]()
inside .feature-visual, and give it `position:absolute;inset:0;
width:100%;height:100%;object-fit:cover`. Nothing else needs to change. */
.feature-visual{
position:relative;
height:190px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.feature-visual.tone-1{background:linear-gradient(145deg,#E9F3FC,#F7FBFE)}
.feature-visual.tone-2{background:linear-gradient(145deg,#E3F0FA,#F2F9FE)}
.feature-visual.tone-3{background:linear-gradient(145deg,#EAF6F0,#F6FCF8)}
.feature-visual:after{
content:"";
position:absolute;
width:230px;height:230px;border-radius:50%;
right:-90px;top:-95px;
background:rgba(255,255,255,.55);
}
.feature-visual svg{position:relative;z-index:2;width:58px;height:58px;stroke-width:1.5}
.feature-visual.tone-1 svg{color:#4582BD}
.feature-visual.tone-2 svg{color:#3E87C5}
.feature-visual.tone-3 svg{color:#2D8B61}
.feature-visual .image-chip{z-index:3}
/* ---------- Example-data disclosure ----------
The performance panels show illustrative numbers. Saying so, quietly but
clearly, keeps the page honest. */
.example-flag{
display:inline-flex;align-items:center;gap:6px;
margin-bottom:14px;padding:4px 9px;border-radius:20px;
background:#F1F5F9;color:#64748B;
font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.example-flag .dot{width:5px;height:5px;border-radius:50%;background:#94A3B8}
/* =====================================================================
REVISION — bigger type, brighter feature icons
---------------------------------------------------------------------
The ported mockup ran on a very small scale (11–12px for nav and body
copy, 14px for section intros). That reads as cramped at real viewing
distance, so the whole scale moves up roughly 2–3px. Headings are left
alone — they were already right; it is the supporting text that was
undersized.
Font throughout: Satoshi (loaded in the layout head), same as the
dashboard.
===================================================================== */
/* ---------- Header ---------- */
.nav{height:86px}
.nav-btn{height:44px;padding:0 18px;font-size:14px;border-radius:11px}
.hero-actions .nav-btn{height:54px;padding:0 26px;font-size:16px;border-radius:12px}
.exam-picker{height:44px;min-width:158px;font-size:14px;padding:0 40px 0 15px}
.brand-word{width:150px}
.brand-mark{width:42px;height:42px}
.sparkle{width:16px;height:16px}
/* ---------- Hero ---------- */
.eyebrow{font-size:12.5px;padding:8px 14px;letter-spacing:.06em}
.hero p{font-size:18px;line-height:1.75;max-width:700px}
/* ---------- Section headings and intros ---------- */
.kicker{font-size:12px;padding:8px 13px}
.section-head p{font-size:16px;line-height:1.8}
.section-head{margin-bottom:52px}
/* ---------- Feature cards ---------- */
.feature-body{padding:26px}
.feature-body h3{font-size:20px;margin-bottom:10px}
.feature-body p{font-size:14.5px;line-height:1.75}
.image-chip{font-size:9.5px;padding:8px 11px;letter-spacing:.6px}
/* Bright, distinct icon badge per step, using the dashboard's own accent
colours (blue / cyan / green) rather than three shades of the same blue —
the three stages of the loop should be tellable apart at a glance. */
.feature-visual{height:210px}
.feature-visual svg{width:34px;height:34px;color:#fff}
.feature-badge{
position:relative;
z-index:2;
width:78px;height:78px;
border-radius:24px;
display:flex;align-items:center;justify-content:center;
color:#fff;
}
.feature-visual.tone-1 .feature-badge{background:linear-gradient(140deg,#74ABDF,#3B7AB8);box-shadow:0 12px 26px rgba(59,122,184,.34)}
.feature-visual.tone-2 .feature-badge{background:linear-gradient(140deg,#38D3EC,#0E8FB4);box-shadow:0 12px 26px rgba(14,143,180,.32)}
.feature-visual.tone-3 .feature-badge{background:linear-gradient(140deg,#5FD79A,#16A34A);box-shadow:0 12px 26px rgba(22,163,74,.28)}
.feature-visual.tone-2{background:linear-gradient(145deg,#E4F7FC,#F5FCFE)}
.feature-card:hover .feature-badge{transform:translateY(-2px);transition:transform .25s ease}
/* ---------- Platform section ---------- */
.product-copy>p{font-size:16px;line-height:1.8}
.check-icon{width:26px;height:26px;font-size:13px;border-radius:9px}
.check strong{font-size:15px;margin-bottom:3px}
.check span{font-size:13.5px;line-height:1.65}
.checks{gap:17px}
/* ---------- The loop ---------- */
.cycle-item h3{font-size:18px}
.cycle-item p{font-size:14px;line-height:1.7;max-width:250px}
.cycle-num{font-size:17px}
/* ---------- Progress panels ---------- */
.stat-panel h3{font-size:20px}
.stat-panel>p{font-size:13.5px;margin-bottom:22px}
.bar-row{grid-template-columns:118px 1fr 46px;font-size:12.5px}
.bar-row strong{font-size:13px}
.legend-item{font-size:13px}
.example-flag{font-size:10px}
/* ---------- FAQ ---------- */
.faq-q{font-size:15px;padding:19px 20px}
.faq-a{font-size:14px;line-height:1.75;padding:0 20px 19px}
.plus{font-size:21px}
/* ---------- CTA + footer ---------- */
.cta-card p{font-size:15.5px}
.footer h4{font-size:13.5px;margin-bottom:14px}
.footer a{font-size:12.5px;margin:9px 0}
.footer-copy{font-size:12.5px;line-height:1.75}
.footer-bottom{font-size:11px}
/* The floating hero chips are gone — the group photo carries the hero on its
own and the chips only covered it. Rules kept out of the way rather than
deleted piecemeal from the ported mockup block above. */
.hero-float{display:none!important}
@media(max-width:900px){
.hero p{font-size:16px}
.section-head p{font-size:15px}
}
@media(max-width:560px){
.nav{height:78px}
.hero p{font-size:15px}
.feature-visual{height:170px}
.feature-badge{width:66px;height:66px;border-radius:20px}
.feature-visual svg{width:29px;height:29px}
}
/* The earlier tone-* rules coloured the bare SVG when it sat directly on the
tinted panel. The icon lives inside a coloured badge now, so it must be
white — these selectors are more specific than `.feature-visual svg`, hence
the explicit override rather than editing the block above. */
.feature-visual.tone-1 svg,
.feature-visual.tone-2 svg,
.feature-visual.tone-3 svg{color:#fff}
/* With the facts strip gone, the hero's bottom wash runs straight into the
first section. Its default 92px top padding stacked on top of that and left
a dead band, so the opening section sits closer. */
.hero + .section{padding-top:58px}
/* =====================================================================
EXAMPLE ANALYTICS PANEL (.dash)
---------------------------------------------------------------------
Replaces the thin "dashboard" mock in the platform section. It shows
the real shape of what the product reports — accuracy, pace,
per-subject breakdown, trend — because that is the argument the
section is making.
Sized to fit beside the copy on one screen: the original pass sized
each card generously and the panel ran to ~800px tall, taller than the
copy column next to it, which forced scrolling to see the rest of the
section even on a full-height laptop screen. Every dimension below is
deliberately compact — smaller donut, tighter card padding, a shorter
trend chart — so the whole panel fits in the space the two-column grid
actually gives it.
All one blue ramp rather than the rainbow of a generic analytics
screenshot — the only non-blue accents are the ones that carry meaning
(wrong answers, a falling subject).
===================================================================== */
.product-visual{
background:linear-gradient(160deg,#1C4A80 0%,#2E6DAB 55%,#4F93D0 100%);
border:1px solid rgba(255,255,255,.14);
border-radius:24px;
padding:16px;
min-height:0;
box-shadow:0 22px 50px rgba(16,44,80,.22);
}
.dash{display:grid;gap:9px}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dash-card{
background:#fff;
border:1px solid #E6EEF6;
border-radius:15px;
padding:13px 14px;
box-shadow:0 5px 14px rgba(16,44,80,.07);
}
.dash-label{
font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#7C8DA4;
}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dash-pill{
padding:4px 9px;border-radius:20px;background:#EEF6FD;color:#3B7AB8;
font-size:9px;font-weight:800;white-space:nowrap;
}
.dash-pill.up{background:#ECFAF2;color:#17864F}
/* ---------- Accuracy donut ---------- */
.donut-stat{position:relative;width:98px;height:98px;margin:7px auto 10px}
.donut-stat svg{width:100%;height:100%;display:block}
.donut-center{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.donut-center b{display:block;font-size:19px;font-weight:800;color:var(--navy);line-height:1}
.donut-center span{display:block;margin-top:2px;font-size:8.5px;color:var(--muted)}
.dash-chips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dash-chip{border-radius:9px;padding:6px 6px}
.dash-chip b{display:block;font-size:14px;font-weight:800;line-height:1.1}
.dash-chip span{display:block;margin-top:1px;font-size:8.5px;color:var(--muted)}
.dash-chip.good{background:#EDF5FC}
.dash-chip.good b{color:#2E6DAB}
.dash-chip.bad{background:#FDF0F3}
.dash-chip.bad b{color:#C4526E}
/* ---------- Pace ---------- */
.pace{display:flex;align-items:baseline;gap:5px;margin:2px 0 8px}
.pace b{font-size:24px;font-weight:800;color:#2E6DAB;letter-spacing:-.5px;line-height:1}
.pace span{font-size:10.5px;color:var(--muted);font-weight:700}
.pace-note{margin-top:6px;font-size:9.5px;font-weight:700;color:#17864F}
.pace-rows{display:grid;gap:6px;margin-top:11px}
.pace-row{display:grid;grid-template-columns:46px 1fr 26px;gap:7px;align-items:center;font-size:9.5px;color:var(--muted)}
.pace-row b{font-size:9.5px;color:var(--navy);text-align:right;font-weight:700}
/* ---------- Bars ---------- */
.dash-bar{height:7px;border-radius:99px;background:#EDF2F7;overflow:hidden}
.dash-bar.sm{height:5px}
.dash-bar>span{display:block;height:100%;border-radius:99px;background:#5393CF}
/* Subject ramp: strongest subject darkest, weakest lightest, so the row
order and the colour say the same thing. */
.dash-bar>span.s1{background:#1E568F}
.dash-bar>span.s2{background:#2E6DAB}
.dash-bar>span.s3{background:#4589C4}
.dash-bar>span.s4{background:#6EA9D8}
.dash-bar>span.s5{background:#D98BA4}
.dash-bar>span.t1{background:#6EA9D8}
.dash-bar>span.t2{background:#3B7AB8}
.dash-bar>span.t3{background:#1E568F}
/* ---------- Topic breakdown ---------- */
.topics{display:grid;gap:7px}
.topic-row{display:grid;grid-template-columns:minmax(70px,96px) 1fr 32px 10px;gap:8px;align-items:center}
.topic-name{
font-size:10.5px;font-weight:700;color:var(--navy);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topic-row b{font-size:10.5px;font-weight:800;color:#2E6DAB;text-align:right}
.trend{width:0;height:0;display:block;justify-self:center}
.trend.up{border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:5px solid #17864F}
.trend.down{border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid #C4526E}
.trend.flat{width:8px;height:2px;border-radius:2px;background:#A6B3C4}
/* ---------- Trend chart ---------- */
.trend-chart{position:relative;height:74px;margin-top:2px}
.trend-chart svg{width:100%;height:100%;display:block;overflow:visible}
.trend-dots{position:absolute;inset:0;pointer-events:none}
.trend-dots span{
position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
border-radius:50%;background:#fff;border:2px solid #3B7AB8;
}
.trend-dots span.last{background:#3B7AB8;box-shadow:0 0 0 3px rgba(59,122,184,.18)}
.trend-axis{
display:grid;grid-template-columns:repeat(7,1fr);
margin-top:6px;font-size:8.5px;color:var(--muted);text-align:center;
}
.trend-axis span:last-child{color:#2E6DAB;font-weight:800}
.dash-note{
margin:1px 0 0;text-align:center;
font-size:9.5px;color:rgba(255,255,255,.78);
}
@media(max-width:1000px){
.product-visual{padding:16px}
}
@media(max-width:560px){
.dash-row{grid-template-columns:1fr}
.donut-stat{width:110px;height:110px}
.topic-row{grid-template-columns:minmax(66px,88px) 1fr 32px 10px;gap:8px}
}
/* =====================================================================
APP SHOWCASE — scroll-driven card stack (.app-showcase)
---------------------------------------------------------------------
A tall scroll section (.app-scroll) wraps a sticky, full-height stage.
Left column = copy for the active screen; right column = the phone
deck. The screenshots already contain the device and have transparent
backgrounds, so they are shown directly (no fake frame, no panel behind
them). Every transform is written by appShowcase.js from one central
scroll-progress value — the CSS only sets the resting layout.
Tunables the JS reads or that pace the section:
--app-count number of screens (set inline from PHP)
--app-scroll-vh scroll length per section, in vh (bigger = slower)
Motion offsets (stack spread, exit distance, scale step) live in
appShowcase.js so they can respond to the deck's measured width.
===================================================================== */
.app-showcase{
--app-scroll-vh:560; /* total scroll height of the section, in vh */
background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FD 42%,#FFFFFF 100%);
/* overflow-x:clip contains the card that slides off to the left WITHOUT
establishing a scroll container — overflow:hidden here would silently
break the position:sticky pinning the deck depends on. */
overflow-x:clip;
}
/* ---------- Intro ---------- */
.app-intro{max-width:720px;text-align:center;margin:0 auto;padding:92px 0 10px}
.app-intro h2{font-size:40px;line-height:1.14;letter-spacing:-1.3px;color:var(--navy);margin-bottom:14px;font-weight:700}
.app-intro p{font-size:16px;line-height:1.8;color:var(--muted)}
/* ---------- The scroll driver ---------- */
.app-scroll{position:relative;height:calc(var(--app-scroll-vh) * 1vh)}
.app-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.app-stage{
width:min(1180px,calc(100% - 44px));
display:grid;
grid-template-columns:40% 60%;
align-items:center;
gap:24px;
}
/* ---------- Left: copy for the active screen ---------- */
.app-text{position:relative;min-height:340px}
.app-text-panel{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;
opacity:0;transform:translateY(18px);
transition:opacity .5s ease,transform .5s ease;
pointer-events:none;
will-change:opacity,transform;
}
.app-text-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.app-eyebrow{
display:inline-block;width:fit-content;
font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--blue-dark);margin-bottom:14px;
}
.app-text-panel h3{font-size:33px;line-height:1.16;letter-spacing:-1px;color:var(--navy);margin-bottom:16px;font-weight:700;max-width:15ch}
.app-text-panel p{font-size:16px;line-height:1.8;color:var(--muted);max-width:44ch;margin-bottom:22px}
.app-tag{
display:inline-flex;align-items:center;gap:8px;width:fit-content;
padding:9px 15px;border-radius:999px;
background:var(--blue-soft);color:var(--blue-dark);
font-size:12.5px;font-weight:800;
}
.app-tag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* ---------- Right: the phone deck ---------- */
.app-deck{position:relative;height:82vh;max-height:720px}
.app-phone{
position:absolute;top:50%;left:50%;margin:0;
/* JS sets --tx/--ty/--s/--rot/--o each frame; this is the composed transform. */
transform:translate3d(-50%,-50%,0)
translate3d(var(--tx,0px),var(--ty,0px),0)
scale(var(--s,1))
rotate(var(--rot,0deg));
opacity:var(--o,1);
will-change:transform,opacity;
}
.app-phone img{
display:block;height:82vh;max-height:720px;width:auto;
filter:drop-shadow(0 30px 45px rgba(20,50,90,.24));
}
/* Before JS runs, keep the deck from showing all six stacked flat: hide all
but the first. The script removes this the moment it initialises. */
.app-deck:not(.is-ready) .app-phone[data-index]:not([data-index="0"]){opacity:0}
/* ---------- Outro ---------- */
.app-outro{max-width:760px;text-align:center;margin:0 auto;padding:8px 0 96px}
.app-supporting{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:16px}
.app-outro h2{font-size:34px;line-height:1.2;letter-spacing:-1px;color:var(--navy);margin-bottom:26px;font-weight:700}
.app-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.app-btn{
height:52px;padding:0 26px;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
font-size:15px;font-weight:800;text-decoration:none;border:1px solid transparent;
transition:filter .2s ease,background .2s ease,border-color .2s ease;
}
.app-btn.solid{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;box-shadow:0 10px 24px rgba(83,147,207,.22)}
.app-btn.solid:hover{filter:brightness(1.05)}
.app-btn.ghost{background:#fff;color:var(--navy);border-color:var(--border)}
.app-btn.ghost:hover{background:var(--blue-soft);border-color:#CFE3F3}
/* ---------- Reduced motion: no sticky pinning, a plain readable list ------- */
.app-showcase.reduced .app-scroll{height:auto}
.app-showcase.reduced .app-sticky{position:static;height:auto;display:block;overflow:visible;padding:8px 0 24px}
.app-showcase.reduced .app-stage{grid-template-columns:1fr;gap:0}
.app-showcase.reduced .app-text{display:none}
.app-showcase.reduced .app-deck{height:auto;max-height:none;display:grid;gap:40px}
.app-showcase.reduced .app-phone{position:static;transform:none!important;opacity:1!important}
.app-showcase.reduced .app-phone img{height:auto;max-height:640px;margin:0 auto}
/* ---------- Tablet ---------- */
@media(max-width:1024px){
.app-stage{grid-template-columns:42% 58%;gap:18px}
.app-text-panel h3{font-size:27px}
.app-deck,.app-phone img{height:70vh}
}
/* ---------- Mobile: column layout, phone above the copy ------------------- */
@media(max-width:768px){
.app-showcase{--app-scroll-vh:640}
.app-intro{padding:66px 0 4px}
.app-intro h2{font-size:28px}
.app-sticky{align-items:center}
.app-stage{grid-template-columns:1fr;grid-template-rows:auto auto;gap:14px;justify-items:center}
.app-deck{order:1;height:46vh;width:100%}
.app-phone img{height:46vh}
.app-text{order:2;min-height:170px;width:100%;text-align:center}
.app-text-panel{align-items:center}
.app-text-panel h3{font-size:22px;max-width:20ch}
.app-text-panel p{font-size:14px;max-width:36ch;margin-bottom:14px}
.app-eyebrow{margin-bottom:10px}
.app-outro{padding:4px 0 70px}
.app-outro h2{font-size:25px}
}
/* =====================================================================
REVISION 2 — bigger app showcase at 100%, tighter FAQ
---------------------------------------------------------------------
At 100% zoom on a wide screen the showcase read small with a lot of
dead space between the copy and the phones. The phones move a touch
larger, the type steps up, and the deck is pulled left so the front
phone sits nearer the copy instead of stranded at the right edge.
===================================================================== */
/* Larger, closer composition */
.app-intro{padding:80px 0 10px}
.app-intro h2{font-size:46px;letter-spacing:-1.5px}
.app-intro p{font-size:17px}
.app-stage{grid-template-columns:38% 62%;gap:8px}
.app-eyebrow{font-size:12.5px;margin-bottom:16px}
.app-text-panel h3{font-size:39px;letter-spacing:-1.2px;margin-bottom:18px;max-width:14ch}
.app-text-panel p{font-size:17px;line-height:1.85;max-width:42ch;margin-bottom:24px}
.app-tag{font-size:13px;padding:10px 16px}
/* Pull the deck left so the front phone fills the gap; make phones larger. */
.app-phone{left:44%}
.app-deck,.app-phone img{height:88vh;max-height:820px}
@media(max-width:1024px){
.app-intro h2{font-size:38px}
.app-text-panel h3{font-size:30px}
.app-phone{left:46%}
.app-deck,.app-phone img{height:74vh}
}
@media(max-width:768px){
.app-intro{padding:52px 0 4px}
.app-intro h2{font-size:26px}
.app-stage{grid-template-columns:1fr;grid-template-rows:auto auto;gap:14px;justify-items:center}
/* The source screenshots carry a wide transparent margin around the phone
graphic (for the desktop fan-stack effect). Sizing to the phone's own
proportions (~0.47) and cropping the margin with object-fit:cover fills
the screen width with the actual phone, instead of shrinking the mostly
empty canvas. Phones are absolutely positioned (JS animates the stack),
so dimensions live on the ![]()
itself. */
.app-deck{order:1;width:94vw;max-width:460px;aspect-ratio:.47;height:auto;max-height:none}
.app-phone{left:50%}
.app-phone img{width:94vw;max-width:460px;height:auto;max-height:none;aspect-ratio:.47;object-fit:cover;object-position:center}
.app-text{order:2;width:100%;min-height:170px;text-align:center}
.app-text-panel{align-items:center}
.app-text-panel h3{font-size:22px;max-width:20ch;margin-bottom:10px}
.app-text-panel p{font-size:14px;max-width:34ch;margin-bottom:14px}
.app-eyebrow{font-size:11px;margin-bottom:10px}
.app-tag{font-size:12px;padding:8px 13px}
}
/* ---------- FAQ: less dead space at 100% ---------- */
#faq.section{padding:60px 0 72px}
#faq .section-head{margin-bottom:34px}
/* ---------- Hero exam tag (above the headline) ---------- */
.hero-tag{
display:inline-flex;align-items:center;gap:7px;
margin:0 auto 18px;
padding:7px 16px;border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.32);
color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
backdrop-filter:blur(6px);
}
.hero-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:#BFE0FA}
@media(max-width:560px){.hero-tag{font-size:11px;padding:6px 13px;margin-bottom:14px}}
/* =====================================================================
WHY MYTESTCART — premium blue/white feature cards (.why-mt-*)
---------------------------------------------------------------------
Namespaced so it can't collide with the rest of the page. Outline SVG
icons only, thin borders, soft shadows, subtle blue decoration.
===================================================================== */
.why-mt-section{
--mt-primary:#1677E8;
--mt-navy:#102F6B;
--mt-ink:#6C86A8;
--mt-border:#CFE3FA;
position:relative;
background:#fff;
padding:104px 0;
overflow:hidden;
}
/* Very subtle blue decoration, corners only (pseudo-elements, no extra DOM). */
.why-mt-section:before,.why-mt-section:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.why-mt-section:before{width:420px;height:420px;left:-150px;top:-160px;background:radial-gradient(circle,rgba(22,119,232,.07),transparent 68%)}
.why-mt-section:after{width:480px;height:480px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(22,119,232,.06),transparent 68%)}
.why-mt-container{position:relative;z-index:1;width:min(1320px,calc(100% - 48px));margin:0 auto}
/* ---------- Header ---------- */
.why-mt-header{text-align:center;max-width:880px;margin:0 auto 54px}
.why-mt-eyebrow{
display:inline-flex;align-items:center;gap:16px;
font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--mt-primary);margin-bottom:20px;
}
.why-mt-rule{display:block;width:38px;height:1px;background:linear-gradient(90deg,transparent,rgba(22,119,232,.5))}
.why-mt-eyebrow .why-mt-rule:last-child{background:linear-gradient(90deg,rgba(22,119,232,.5),transparent)}
.why-mt-header h2{
font-size:46px;line-height:1.12;letter-spacing:-1.4px;font-weight:750;
color:var(--mt-navy);margin:0 auto 18px;max-width:none;
}
.why-mt-header p{font-size:17px;line-height:1.7;color:var(--mt-ink);max-width:60ch;margin:0 auto}
/* ---------- Card grid ---------- */
.why-mt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-mt-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--mt-border);border-radius:24px;overflow:hidden;
box-shadow:0 10px 35px rgba(24,91,160,.07);
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),border-color .3s ease;
}
.why-mt-card:hover{transform:translateY(-6px);border-color:#B4D4F5;box-shadow:0 20px 46px rgba(24,91,160,.13)}
/* Card top: tinted, holds badge + outline icon */
.why-mt-card__top{
position:relative;height:200px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#CFE4FA 0%,#B4D4F3 100%);
overflow:hidden;
}
/* A crisp translucent bubble arcing in from the top-right corner. */
.why-mt-card__top:before{content:"";position:absolute;width:210px;height:210px;right:-84px;top:-84px;border-radius:50%;background:radial-gradient(circle at 35% 65%,rgba(255,255,255,.85),rgba(255,255,255,.28) 60%,transparent 72%);pointer-events:none}
.why-mt-card__top:after{content:"";position:absolute;width:120px;height:120px;right:14px;top:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);pointer-events:none}
.why-mt-card:hover .why-mt-card__top{background:linear-gradient(135deg,#C4DDF7 0%,#A6CBEF 100%)}
.why-mt-card__badge{
position:absolute;top:16px;left:16px;z-index:2;
font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
color:var(--mt-primary);
background:rgba(255,255,255,.82);border:1px solid rgba(22,119,232,.12);
border-radius:999px;padding:7px 13px;
}
.why-mt-card__icon{
position:relative;z-index:1;
width:104px;height:104px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.75);border:1px solid rgba(22,119,232,.25);
color:var(--mt-primary);
box-shadow:0 8px 22px rgba(22,119,232,.12);
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.why-mt-card:hover .why-mt-card__icon{transform:translateY(-2px) scale(1.03)}
.why-mt-card__icon svg{width:46px;height:46px}
/* Card body */
.why-mt-card__body{padding:30px;display:flex;flex-direction:column;flex:1}
.why-mt-card__body h3{font-size:21px;line-height:1.32;font-weight:700;color:var(--mt-navy);margin:0 0 13px;max-width:18ch}
.why-mt-card__body p{font-size:15.5px;line-height:1.7;color:var(--mt-ink);margin:0 0 22px;flex:1}
.why-mt-card__cta{
display:inline-flex;align-items:center;gap:9px;width:fit-content;
font-size:14px;font-weight:700;color:var(--mt-primary);
transition:color .25s ease;
}
.why-mt-card__arrow{display:inline-flex;transition:transform .25s ease}
.why-mt-card__arrow svg{width:22px;height:22px}
.why-mt-card:hover .why-mt-card__cta{color:#0F5FC0}
.why-mt-card:hover .why-mt-card__arrow{transform:translateX(3px)}
/* ---------- Entrance animation (JS toggles .is-in) ---------- */
.why-mt-section [data-why-anim]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--why-delay,0ms)}
.why-mt-section [data-why-anim].is-in{opacity:1;transform:none}
/* ---------- Responsive ---------- */
@media(max-width:1023px){
.why-mt-cards{grid-template-columns:repeat(2,1fr)}
.why-mt-header h2{font-size:38px}
}
@media(max-width:768px){
.why-mt-section{padding:70px 0}
.why-mt-container{width:calc(100% - 40px)}
.why-mt-cards{grid-template-columns:1fr}
.why-mt-header h2{font-size:33px;letter-spacing:-1px}
.why-mt-header p{font-size:15.5px}
.why-mt-card__top{height:180px}
.why-mt-card__icon{width:88px;height:88px}
.why-mt-card__icon svg{width:40px;height:40px}
}
@media(max-width:480px){
.why-mt-header h2{font-size:30px}
.why-mt-card__body{padding:24px}
.why-mt-card__body h3{font-size:19px}
.why-mt-card__body p{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
.why-mt-section [data-why-anim]{opacity:1;transform:none;transition:none}
.why-mt-card,.why-mt-card__icon,.why-mt-card__arrow{transition:none}
}
/* ---------- Footer Google Play badge ---------- */
.footer .store-btn{
height:48px;width:fit-content;margin-top:16px;
border:1px solid rgba(255,255,255,.2);border-radius:10px;
background:rgba(255,255,255,.06);
display:inline-flex;align-items:center;gap:11px;padding:0 15px;
color:#fff;text-decoration:none;transition:background .2s ease,border-color .2s ease;
}
.footer .store-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.footer .store-icon{width:22px;height:22px;flex-shrink:0}
.footer .store-small{font-size:8px;letter-spacing:.06em;color:rgba(255,255,255,.6);display:block;line-height:1;text-transform:uppercase}
.footer .store-big{font-size:14px;font-weight:700;color:#fff;display:block;line-height:1.15;margin-top:2px}
/* ---------- Landing FAQ: use more of the width at 100% ---------- */
#faq .faq{width:min(1080px,100%)}