{} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } @media (max-width: 639px) { .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } } @media (min-width: 1200px) { .gp-component-id-6ifty3EIG0 { min-height: 50px;position: relative;z-index: auto; } }

 :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); --ink:#1E1633; --muted:#6F6590; --bg:#FFFFFF; --soft:#F3EFFB; --line:#E4DCF5; --brand:#5B2FD9; --brand2:#7C4DFF; --brand-soft:#ECE5FF; --plum:#200C3C; --amber:#B45309; --amber-soft:#FEF3E2; --green:#15803D; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#F1ECFF; --muted:#B3A8D1; --bg:#140B22; --soft:#1C1230; --line:#34264F; --brand:#8B66FF; --brand2:#9F82FF; --brand-soft:#2E2150; --amber-soft:#3A2410; } } :root[data-theme="dark"]{ --ink:#F1ECFF; --muted:#B3A8D1; --bg:#140B22; --soft:#1C1230; --line:#34264F; --brand:#8B66FF; --brand2:#9F82FF; --brand-soft:#2E2150; --amber-soft:#3A2410; } *,*::before,*::after{box-sizing:inherit} html,body{margin:0} html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6} a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--brand2);outline-offset:3px} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:12px;padding:14px 26px;background:linear-gradient(90deg,var(--brand2),var(--brand));color:#fff;box-shadow:0 12px 28px -14px rgba(91,47,217,.8)} .btn:hover{filter:brightness(1.07)} section{padding:84px 0} h2{font-size:32px;line-height:1.25;margin:0 0 16px;font-weight:700;letter-spacing:-.01em} .sub{color:var(--muted);font-size:17px;max-width:40em;margin:0} /* Screenshot frame */ .shot{position:relative;border-radius:18px;padding:14px;background:linear-gradient(135deg,#9F82FF,#5B2FD9 60%,#2A1548);box-shadow:0 40px 70px -40px rgba(60,20,140,.6)} .shot .bar{display:flex;gap:6px;padding:2px 4px 10px} .shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)} .shot img{border-radius:10px;width:100%;height:auto} /* Nav */ nav{border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none} .logo{width:36px;height:36px;border-radius:50%;border:2px dotted var(--brand2);display:grid;place-items:center;font-size:13px;color:var(--brand)} .beta{font-size:10.5px;font-weight:600;background:var(--brand-soft);color:var(--brand);padding:2px 8px;border-radius:999px} nav .login{font-weight:500;font-size:14.5px;text-decoration:none;color:var(--brand)} /* Hero */ .hero{padding:64px 0 80px;background:radial-gradient(70% 90% at 100% 0%,var(--brand-soft) 0%,transparent 60%)} .hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center} .for{display:inline-block;font-size:14px;font-weight:500;color:var(--brand);background:var(--brand-soft);padding:6px 14px;border-radius:999px;margin-bottom:20px} .hero h1{font-size:46px;line-height:1.15;margin:0 0 18px;font-weight:700;letter-spacing:-.01em} .hero h1 span{color:var(--brand)} .hero p.lead{font-size:18px;color:var(--muted);margin:0 0 30px;max-width:34em} .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .meta{font-size:14px;color:var(--muted)} .meta b{color:var(--green);font-weight:600} .gauge-card{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 30px 60px -40px rgba(60,20,140,.45)} .label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .label-row .name{font-weight:600} .label-row .status{font-size:12px;color:var(--muted);background:var(--soft);padding:3px 10px;border-radius:999px} .gauge{display:flex;justify-content:center;padding:6px 0 4px} .arc-bg{fill:none;stroke:var(--brand-soft);stroke-width:16;stroke-linecap:round} .arc{fill:none;stroke:url(#g);stroke-width:16;stroke-linecap:round;stroke-dasharray:251.2;stroke-dashoffset:251.2;animation:fill 1.4s ease-out .3s forwards} @keyframes fill{to{stroke-dashoffset:80.4}} .score{font-size:44px;font-weight:700;fill:var(--ink)} .out{font-size:12px;fill:var(--muted)} .bars{display:grid;gap:9px;margin-top:10px} .bar{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:10px;font-size:13px} .bar .t{height:8px;background:var(--soft);border-radius:8px;overflow:hidden} .bar .t i{display:block;height:100%;border-radius:8px;background:var(--brand)} .bar.low .t i{background:var(--amber)} .bar .v{text-align:right;color:var(--muted)} .gap{margin-top:16px;background:var(--amber-soft);border-radius:12px;padding:12px 14px;font-size:13.5px} .gap b{color:var(--amber)} /* Problem */ .problem{background:var(--plum);color:#EDE6FF} .problem h2{color:#fff;max-width:22em} .problem .sub{color:#CFC4EE} .signs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .signs div{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;background:rgba(255,255,255,.04)} .signs b{display:block;color:#fff;margin-bottom:6px} .signs span{font-size:14.5px;color:#CFC4EE} /* Inside the app */ .inside .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center} .ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px} .ticks li{display:grid;grid-template-columns:30px 1fr;gap:12px} .ticks .ic{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center} .ticks svg{width:15px;height:15px} .ticks b{display:block} .ticks span{font-size:14.5px;color:var(--muted)} /* Sample questions */ .samples{background:var(--soft)} .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .qcard{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px} .qcard .tag{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:3px 10px;border-radius:999px} .qcard .q{font-weight:600;font-size:16.5px;line-height:1.45;margin:0} .qcard .reveal{margin-top:auto;border-top:1px dashed var(--line);padding-top:14px;font-size:14px;color:var(--muted)} .qcard .reveal b{color:var(--ink);font-weight:600} /* Pillars */ .steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .steps li{position:relative;padding:22px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)} .steps .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .steps .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff} .steps .ic svg{width:20px;height:20px} .steps .num{font-size:13px;font-weight:600;color:var(--muted)} .steps b{display:block;font-size:17px;margin-bottom:4px} .steps span{font-size:14px;color:var(--muted)} /* Progress */ .progress .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center} .progress .shot{max-width:520px;justify-self:center} /* Get + after */ .get{background:var(--soft)} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .item{background:var(--bg);border-radius:16px;padding:24px;border:1px solid var(--line)} .item .ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:14px} .item .ic svg{width:20px;height:20px} .item b{display:block;font-size:17px;margin-bottom:6px} .item span{font-size:14.5px;color:var(--muted)} /* How */ .how .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center} .how .list{display:grid;gap:24px;margin-top:30px} .how .n{font-size:14px;font-weight:600;color:var(--brand);margin-bottom:2px} .how b{display:block;font-size:17px;margin-bottom:4px} .how span{font-size:14.5px;color:var(--muted)} /* After */ .after .item{background:var(--soft);border:0} /* Why free */ .free{padding:0 0 84px} .free .box{border:1px solid var(--line);border-radius:22px;padding:34px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,var(--brand-soft),transparent 70%)} .photo{position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--brand2),var(--brand));display:grid;place-items:center;color:#fff;font-size:40px;font-weight:600;border:4px solid var(--bg);box-shadow:0 0 0 2px var(--brand2)} .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%} .free h3{margin:0 0 6px;font-size:20px} .free p{margin:0;color:var(--muted)} /* Final */ .final{background:linear-gradient(135deg,#2A1548,var(--plum));color:#fff;text-align:center} .final h2{color:#fff;max-width:18em;margin:0 auto 26px} .final .meta{display:block;margin-top:14px;color:#CFC4EE} footer{padding:28px 0;font-size:13.5px;color:var(--muted)} footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} @media (prefers-reduced-motion: reduce){.arc{animation:none;stroke-dashoffset:80.4}html{scroll-behavior:auto}} @media (max-width:960px){ .hero .wrap,.inside .wrap,.progress .wrap,.how .wrap{grid-template-columns:1fr;gap:40px} .hero h1{font-size:36px} .steps{grid-template-columns:1fr 1fr} .signs,.grid3,.qgrid{grid-template-columns:1fr} } @media (max-width:560px){ .hero{padding:40px 0 56px} .hero h1{font-size:30px} section{padding:60px 0} h2{font-size:25px} .steps{grid-template-columns:1fr} .free .box{grid-template-columns:1fr} .shot{padding:8px} }