:root{
--navy:#022067;
--deep:#021f67;
--blue:#015de7;
--blue-dark:#004fc9;
--cyan:#1396f9;
--orange:#f9a003;
--ink:#121a33;
--muted:#67728a;
--line:#e5ebf4;
--paper:#f8fbff;
--white:#fff;
--font-body:"DM Sans",sans-serif;
--font-head:"Manrope",sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:82px}
body{
margin:0;
color:var(--ink);
background:var(--paper);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased}
a{
color:inherit;
text-decoration:none}
.page-wrap{
width:min(1160px,calc(100% - 64px));
margin:0 auto}
.site-header{
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 max(32px,calc((100vw - 1160px)/2));
background:rgba(248,251,255,.91);
backdrop-filter:blur(16px);
position:sticky;
top:0;
z-index:20;
border-bottom:1px solid rgba(224,232,244,.7)}
.brand{
display:inline-flex;
align-items:center;
gap:10px;
font-family:var(--font-head);
font-size:18px;
font-weight:700;
color:var(--navy);
letter-spacing:-.7px}
.brand img{
border-radius:12px;
object-fit:cover}
.brand b{
font-weight:800;
color:var(--blue)}
.main-nav{
display:flex;
align-items:center;
gap:35px;
margin-left:auto;
margin-right:40px}
.main-nav a{
font-size:13px;
color:#59647a;
font-weight:600;
transition:color .2s}
.main-nav a:hover,.site-footer>a:hover{
color:var(--blue)}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
padding:14px 20px;
border-radius:8px;
font-size:13px;
font-weight:700;
transition:transform .2s,box-shadow .2s,background .2s}
.button:hover{
transform:translateY(-2px)}
.button-dark{
background:var(--navy);
color:#fff}
.button-dark:hover{
box-shadow:0 8px 20px rgba(16,27,67,.18)}
.button-blue{
background:var(--blue);
color:#fff;
box-shadow:0 8px 20px rgba(18,101,238,.18)}
.button-blue:hover{
background:var(--blue-dark);
box-shadow:0 12px 25px rgba(18,101,238,.23)}
.button-light{
background:#fff;
color:var(--navy);
margin-top:13px}
.button-light:hover{
box-shadow:0 10px 22px rgba(1,15,67,.2)}
.menu-toggle{
display:none;
background:none;
border:0}
.hero{
min-height:640px;
display:grid;
grid-template-columns:.91fr 1.09fr;
align-items:center;
position:relative;
padding-top:16px;
padding-bottom:70px}
.hero-copy{
padding:37px 0 28px;
position:relative;
z-index:2}
.eyebrow,.section-kicker{
font-size:10px;
font-weight:700;
letter-spacing:1.7px;
color:#547095}
.eyebrow{
display:flex;
align-items:center;
gap:9px;
margin-bottom:23px;
text-transform:uppercase}
.eyebrow-dot{
height:8px;
width:8px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 0 5px rgba(0,185,223,.11)}
h1,h2,h3,p{
margin-top:0}
.hero h1{
font:800 clamp(55px,6.9vw,88px)/.99 var(--font-head);
letter-spacing:-6.8px;
margin:0 0 24px;
color:var(--navy)}
.blue-text{
background:linear-gradient(100deg,#1467f4 8%,#00aadf 93%);
color:transparent;
background-clip:text;
-webkit-background-clip:text}
.hero-intro{
font-size:15px;
line-height:1.8;
color:#63718a;
max-width:420px;
margin:0 0 27px}
.hero-actions{
display:flex;
align-items:center;
gap:19px;
flex-wrap:wrap}
.hero-note{
font-size:10px;
color:#738096;
display:flex;
align-items:center;
gap:7px}
.signal-icon{
font-size:16px;
color:var(--cyan)}
.hero-proof{
display:flex;
align-items:center;
gap:13px;
margin-top:47px}
.proof-avatars{
display:flex}
.proof-avatars span{
width:28px;
height:28px;
border-radius:50%;
border:2px solid var(--paper);
display:grid;
place-items:center;
font-size:11px;
font-weight:700;
margin-left:-5px;
background:#dfeaff;
color:#2468d5}
.proof-avatars span:first-child{
margin-left:0;
background:#e5f8fb;
color:#009cba}
.proof-avatars span:last-child{
background:#fff0d6;
color:#b77700}
.hero-proof p{
font-size:10px;
line-height:1.55;
color:#77839a;
margin:0}
.hero-visual{
height:570px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
isolation:isolate}
.visual-wash{
position:absolute;
z-index:-1;
border-radius:50%;
filter:blur(1px)}
.wash-one{
width:410px;
height:410px;
background:radial-gradient(circle at 44% 43%,#f2fbff,#dcebff 48%,rgba(218,232,255,0) 72%);
top:92px;
left:50%;
transform:translateX(-50%)}
.wash-two{
height:95px;
width:310px;
background:rgba(25,89,202,.09);
filter:blur(29px);
bottom:47px;
left:50%;
transform:translateX(-50%)}
.phone-shadow{
width:235px;
height:33px;
border-radius:50%;
background:rgba(12,33,90,.22);
filter:blur(20px);
position:absolute;
bottom:42px}
.phone{
width:267px;
height:508px;
background:linear-gradient(155deg,#18264d,#07122e 45%,#0c1740);
border-radius:39px;
padding:12px;
box-shadow:0 32px 50px rgba(22,49,103,.28),inset 0 0 0 1px rgba(255,255,255,.4);
position:relative;
transform:rotate(-4deg);
z-index:2}
.phone:before{
content:"";
position:absolute;
inset:5px;
border:1px solid rgba(255,255,255,.15);
border-radius:35px;
pointer-events:none}
.phone:after{
content:"";
position:absolute;
width:77px;
height:16px;
border-radius:12px;
background:#050b1b;
top:14px;
left:calc(50% - 38px);
z-index:3}
.phone-top{
height:25px;
padding:1px 8px;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
font-size:9px;
position:relative;
z-index:4}
.phone-status{
display:flex;
gap:3px;
align-items:flex-end}
.phone-status i{
display:block;
width:3px;
background:#fff;
border-radius:1px;
height:6px}
.phone-status i:nth-child(2){
height:8px}
.phone-status i:nth-child(3){
height:10px}
.phone-greeting{
padding:20px 13px 13px;
color:white}
.phone-greeting>span{
font-size:7px;
letter-spacing:1.1px;
color:#9fc4ff;
font-weight:700}
.phone-greeting b{
font:700 22px/1.16 var(--font-head);
display:block;
letter-spacing:-.7px;
margin:7px 0}
.phone-greeting small{
font-size:8px;
color:#b8c4df}
.study-progress{
background:#fff;
border-radius:13px;
margin:0 10px 14px;
padding:12px;
color:#1b2747;
box-shadow:0 7px 15px rgba(1,12,40,.13)}
.progress-top,.progress-bottom{
display:flex;
justify-content:space-between;
align-items:center}
.progress-top{
font-size:8px;
color:#64718c}
.progress-top b{
color:#1b2747}
.progress-track{
height:5px;
border-radius:5px;
background:#e9f0fa;
margin:9px 0 6px}
.progress-track i{
display:block;
width:62%;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--blue),var(--cyan))}
.progress-bottom{
font-size:7px;
color:#8390a5}
.lesson-label{
font-size:7px;
letter-spacing:1px;
font-weight:700;
color:#8ea0bf;
margin:15px 13px 8px}
.lesson-card{
height:56px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.09);
border-radius:11px;
margin:0 10px 8px;
display:flex;
align-items:center;
padding:8px;
gap:9px;
color:#fff}
.lesson-icon{
width:34px;
height:34px;
border-radius:9px;
display:grid;
place-items:center;
font-size:18px;
font-weight:700}
.math-icon{
background:#fff0d4;
color:#dc9200}
.science-icon{
background:#dbf7fa;
color:#009bb8}
.lesson-copy{
display:flex;
flex-direction:column;
gap:3px;
flex:1}
.lesson-copy b{
font-size:9px}
.lesson-copy span{
font-size:7px;
color:#a8b5d0}
.lesson-arrow{
color:#94b8ff;
font-size:17px}
.offline-bar{
margin:14px 10px 8px;
padding:8px 9px;
border-radius:8px;
background:rgba(0,208,184,.1);
color:#79ebd9;
font-size:8px;
display:flex;
align-items:center;
gap:7px}
.offline-pulse{
width:6px;
height:6px;
display:inline-block;
border-radius:50%;
background:#00c9a5;
box-shadow:0 0 0 4px rgba(0,201,165,.14)}
.offline-signal{
margin-left:auto;
color:#fff;
font-size:14px}
.phone-nav{
position:absolute;
bottom:16px;
left:15px;
right:15px;
display:flex;
justify-content:space-around;
text-align:center;
color:#7586a9}
.phone-nav>span{
font-size:15px}
.phone-nav small{
display:block;
font:6px var(--font-body);
margin-top:2px}
.phone-nav .nav-active{
color:#79adff}
.float-card{
position:absolute;
z-index:4;
background:rgba(255,255,255,.96);
border:1px solid #edf1f8;
border-radius:12px;
box-shadow:0 12px 32px rgba(14,39,95,.13);
padding:11px 13px;
display:flex;
align-items:center;
gap:9px}
.float-card b,.float-card small{
display:block}
.float-card b{
font-size:9px;
color:var(--navy)}
.float-card small{
font-size:8px;
color:#8692a8;
margin-top:3px}
.sync-card{
right:4px;
top:117px}
.focus-card{
left:7px;
bottom:100px}
.sync-check,.focus-icon{
height:28px;
width:28px;
border-radius:8px;
display:grid;
place-items:center;
font-size:16px;
background:#e1f9fa;
color:#02aabb}
.focus-icon{
background:#fff3dc;
color:#efa700}
.sparkle{
position:absolute;
color:#2386f4}
.sparkle-a{
font-size:27px;
top:106px;
left:80px}
.sparkle-b{
font-size:20px;
right:33px;
bottom:145px;
color:#ffb72b}
.visual-caption{
position:absolute;
bottom:17px;
right:29px;
display:flex;
align-items:center;
gap:8px;
color:#8290a7;
font-size:9px;
letter-spacing:.2px}
.caption-line{
width:25px;
height:1px;
background:#9cb4d7}
.scroll-cue{
position:absolute;
bottom:26px;
left:0;
font-size:8px;
letter-spacing:1.4px;
color:#9aa5b8;
display:flex;
align-items:center;
gap:9px}
.scroll-cue span{
height:24px;
width:15px;
border:1px solid #b9c7db;
border-radius:9px;
position:relative}
.scroll-cue span:after{
content:"";
position:absolute;
width:2px;
height:5px;
left:5px;
top:4px;
border-radius:2px;
background:var(--blue);
animation:scroll 1.6s ease-in-out infinite}
.signal-strip{
height:auto;
min-height:76px;
background:#eef5ff;
border-block:1px solid #e8effb}
.strip-inner{
width:min(1160px,calc(100% - 64px));
margin:auto;
min-height:76px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px}
.strip-inner span{
font-size:11px;
color:#596780;
font-weight:600;
display:flex;
align-items:center;
gap:9px}
.strip-inner i{
font-style:normal;
color:var(--blue);
font-size:17px}
.section{
padding-top:104px;
padding-bottom:100px}
.section-heading{
display:grid;
grid-template-columns:1fr 370px;
align-items:end;
gap:50px;
margin-bottom:49px}
.section-kicker{
display:inline-block;
margin-bottom:15px}
.section-heading h2,.companion-copy h2,.principles-title h2{
font:800 clamp(38px,4.8vw,57px)/1.09 var(--font-head);
letter-spacing:-2.7px;
color:var(--navy);
margin:0}
.section-heading>p{
font-size:13px;
line-height:1.8;
color:#6b7890;
margin:0 0 4px}
.journey{
display:grid;
grid-template-columns:1fr 70px 1fr 70px 1fr;
align-items:start;
padding:20px 0 25px}
.journey-step{
position:relative;
padding:0 19px 0 0}
.step-index{
font-size:10px;
font-weight:700;
color:#a5b1c5;
letter-spacing:1px}
.journey-icon{
height:90px;
width:90px;
margin:18px 0 18px;
display:grid;
place-items:center;
border-radius:24px;
position:relative;
overflow:hidden}
.download-icon{
background:#e7efff;
color:#1767ee}
.download-icon span{
font-size:37px;
font-weight:400;
z-index:2}
.download-icon i{
position:absolute;
bottom:-11px;
width:50px;
height:22px;
border-radius:50%;
background:#c9dcff}
.offline-icon{
background:#e3f9fb;
color:#04aabc}
.offline-icon>span{
font-size:34px;
font-weight:700;
z-index:2}
.orbit{
position:absolute;
border:1px solid rgba(4,170,188,.28);
border-radius:50%;
transform:rotate(-25deg)}
.orbit-one{
height:46px;
width:104px}
.orbit-two{
height:74px;
width:120px;
transform:rotate(33deg)}
.sync-icon{
background:#fff2da;
color:#e5a000}
.sync-icon>span{
font-size:38px;
z-index:2}
.sync-icon i{
position:absolute;
border:1px dashed #edc96d;
width:70px;
height:70px;
border-radius:50%}
.journey-step h3{
font:700 17px var(--font-head);
color:var(--navy);
margin:0 0 9px}
.journey-step p{
font-size:11px;
line-height:1.75;
max-width:255px;
color:#77839a;
margin:0 0 16px;
min-height:41px}
.step-meta{
font-size:9px;
color:#687790;
display:flex;
align-items:center;
gap:7px}
.step-dot{
height:6px;
width:6px;
border-radius:50%}
.dot-blue{
background:#3479ef}
.dot-cyan{
background:#09bbca}
.dot-orange{
background:#f6b62e}
.journey-connector{
height:90px;
margin-top:50px;
display:flex;
align-items:center;
position:relative}
.journey-connector i{
height:1px;
width:100%;
background:linear-gradient(90deg,#c7d7f4,#dce5f2)}
.journey-connector span{
color:#6d9df1;
background:var(--paper);
z-index:1;
position:absolute;
left:calc(50% - 8px);
font-size:17px;
padding:0 4px}
.honesty-note{
display:flex;
align-items:flex-start;
gap:12px;
padding:17px 20px;
background:#f0f6ff;
border-radius:9px;
margin-top:27px}
.honesty-note>span{
color:#2570ec;
font-size:16px}
.honesty-note p{
font-size:10px;
color:#66758e;
margin:1px 0;
line-height:1.6}
.honesty-note b{
color:#2e3c59}
.tools-section{
background:#f0f5fc;
padding-top:96px;
padding-bottom:92px}
.tools-heading{
margin-bottom:38px}
.tools-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.tool-feature{
position:relative;
min-height:352px;
border-radius:14px;
padding:25px 25px 23px;
overflow:hidden;
background:#fff}
.tool-feature h3{
font:700 20px/1.24 var(--font-head);
letter-spacing:-.6px;
color:var(--navy);
margin:17px 0 9px}
.tool-feature>p{
max-width:355px;
font-size:10px;
line-height:1.7;
color:#768197;
margin:0}
.tool-qa{
background:linear-gradient(145deg,#e3f8fc,#f7fbff 68%)}
.tool-topline{
display:flex;
align-items:center;
gap:9px;
position:relative;
z-index:2}
.tool-icon{
height:31px;
width:31px;
display:grid;
place-items:center;
border-radius:9px;
background:#d7ebff;
color:#1b68e7;
font-size:16px}
.orange-icon{
background:#fff0d4;
color:#db9500}
.cyan-icon{
background:#e0f8f8;
color:#06aab6}
.navy-icon{
background:#e5ebfb;
color:#25366f}
.tool-tag{
font-size:8px;
font-weight:700;
letter-spacing:1.15px;
color:#7b89a1}
.chat-illustration{
position:absolute;
right:20px;
top:51px;
width:47%;
max-width:270px;
background:rgba(255,255,255,.88);
border:1px solid rgba(217,232,248,.9);
border-radius:13px;
padding:12px 11px;
box-shadow:0 12px 22px rgba(23,84,140,.08);
transform:rotate(2deg)}
.chat-question,.chat-answer{
display:flex;
gap:6px;
align-items:flex-start;
font-size:8px;
line-height:1.45;
color:#55637b}
.chat-question{
align-items:center;
margin-bottom:11px;
justify-content:flex-end}
.chat-question>span:last-child{
background:#edf3ff;
border-radius:8px 8px 2px 8px;
padding:7px 8px}
.chat-avatar{
width:20px;
height:20px;
flex:0 0 20px;
border-radius:7px;
display:grid;
place-items:center;
font-size:9px;
font-weight:700}
.learner-avatar{
background:#e8efff;
color:#3978dc}
.ai-avatar{
background:#def8fb;
color:#00a2b5}
.chat-answer>span:last-child{
background:#f6f9fd;
border-radius:2px 8px 8px 8px;
padding:8px;
color:#68758b}
.chat-answer b{
color:#3a4a68;
display:block;
margin-bottom:3px}
.chat-input{
margin:9px 0 0 25px;
border:1px solid #e9edf5;
border-radius:7px;
color:#a3afbf;
padding:6px 8px;
font-size:7px}
.chat-input span{
float:right;
background:#1767ec;
color:white;
width:15px;
height:15px;
border-radius:5px;
text-align:center;
font-size:10px;
margin-top:-3px}
.chat-status{
font-size:6px;
margin:8px 0 0 25px;
color:#98a3b4}
.chat-status i{
display:inline-block;
height:5px;
width:5px;
border-radius:50%;
background:#00b69b;
margin-right:3px}
.tool-math{
background:linear-gradient(140deg,#fffaf0,#fff 68%)}
.math-art{
height:125px;
width:190px;
position:absolute;
right:25px;
top:37px}
.math-orbit{
position:absolute;
border:1px solid rgba(225,171,42,.21);
height:112px;
width:168px;
border-radius:50%;
left:10px;
top:9px;
transform:rotate(-32deg)}
.orbit-b{
height:82px;
width:183px;
top:21px;
left:5px;
transform:rotate(31deg)}
.math-number{
position:absolute;
display:grid;
place-items:center;
box-shadow:0 4px 13px rgba(181,135,38,.13);
width:30px;
height:30px;
background:#fff;
border-radius:10px;
color:#dc990c;
font-size:12px;
font-weight:700}
.number-a{
top:4px;
left:22px}
.number-b{
top:74px;
left:14px;
font-size:18px}
.number-c{
right:10px;
top:39px;
font-style:italic}
.math-equation{
position:absolute;
right:25px;
bottom:4px;
font:700 11px var(--font-head);
color:#a17c2b;
background:#fff4da;
border-radius:8px;
padding:6px 9px;
transform:rotate(-5deg)}
.math-scribble{
position:absolute;
top:11px;
right:33px;
font-size:8px;
color:#d48f00;
transform:rotate(8deg)}
.tool-math h3{
margin-top:25px}
.tool-practice{
background:linear-gradient(142deg,#eafcff,#fff 68%)}
.practice-art{
position:absolute;
right:27px;
top:35px;
width:190px;
height:177px}
.practice-sheet{
position:absolute;
inset:0 0 0 17px;
transform:rotate(3deg);
border-radius:10px;
background:#fff;
box-shadow:0 8px 23px rgba(20,119,152,.1);
padding:12px}
.sheet-head{
display:flex;
justify-content:space-between;
font-size:6px;
letter-spacing:.65px;
color:#92a0b2;
font-weight:700}
.sheet-question{
font:600 9px/1.45 var(--font-head);
color:#3b4963;
margin:12px 0 9px}
.answer-option{
height:21px;
padding:0 7px;
border:1px solid #edf0f5;
border-radius:5px;
margin-bottom:5px;
display:flex;
align-items:center;
gap:6px;
font-size:6px;
color:#818ca0}
.answer-option>span{
width:12px;
height:12px;
display:grid;
place-items:center;
background:#f1f5fb;
border-radius:4px;
font-size:6px}
.selected-option{
border-color:#98e6e6;
background:#f1fdfd;
color:#267985}
.selected-option>span{
background:#00b4bd;
color:#fff}
.selected-option i{
font-style:normal;
margin-left:auto;
color:#04a8a7}
.answer-feedback{
margin-top:8px;
font-size:6px;
color:#459998}
.answer-feedback span{
float:right;
color:#f0b02b}
.practice-spark{
position:absolute;
right:-3px;
top:-11px;
color:#efad28;
font-size:20px}
.tool-practice h3{
margin-top:25px}
.tool-teacher{
background:linear-gradient(142deg,#eef2ff,#fff 72%)}
.teacher-art{
position:absolute;
right:28px;
top:33px;
width:190px;
height:167px}
.teacher-note{
position:absolute;
z-index:2;
width:144px;
height:153px;
top:3px;
right:11px;
border-radius:11px;
background:white;
box-shadow:0 10px 23px rgba(45,62,126,.1);
padding:14px 12px;
transform:rotate(4deg)}
.teacher-note>span{
font-size:6px;
letter-spacing:.7px;
color:#8c9ab2;
font-weight:700}
.teacher-note>b{
display:block;
font:700 15px/1.18 var(--font-head);
letter-spacing:-.4px;
color:#253260;
margin:12px 0}
.teacher-people{
border-top:1px solid #edf0f6;
padding-top:8px;
display:flex;
align-items:center;
margin-top:9px}
.teacher-people i{
font-style:normal;
display:grid;
place-items:center;
width:16px;
height:16px;
border-radius:50%;
margin-right:-4px;
background:#d6e4ff;
color:#547acd;
font-size:9px;
border:1px solid white}
.teacher-people i:nth-child(2){
background:#fff0d3;
color:#db9a10}
.teacher-people i:nth-child(3){
background:#d9f7f4;
color:#02aa99}
.teacher-people small{
font-size:5px;
color:#8e99aa;
margin-left:8px}
.teacher-orb{
position:absolute;
border-radius:50%;
filter:blur(0);
opacity:.9}
.orb-blue{
height:80px;
width:80px;
background:radial-gradient(circle at 34% 32%,#b6d1ff,#5d8ae9);
left:4px;
top:31px}
.orb-yellow{
height:43px;
width:43px;
background:radial-gradient(circle at 34% 32%,#fff0bb,#ffc547);
right:0;
bottom:6px}
.tool-teacher h3{
margin-top:23px}
.tools-footnote{
font-size:9px;
line-height:1.65;
color:#8a95a8;
margin:17px 0 0}
.tools-footnote span{
color:#2471ec}
.companion-section{
padding-top:115px;
padding-bottom:110px;
display:grid;
grid-template-columns:1.05fr .95fr;
align-items:center;
gap:80px}
.companion-visual{
height:370px;
position:relative;
display:grid;
place-items:center;
isolation:isolate}
.companion-glow{
position:absolute;
z-index:-2;
width:320px;
height:320px;
border-radius:50%;
background:radial-gradient(circle,#d7f2ff 0,#e8f1ff 56%,transparent 72%)}
.companion-orbit{
position:absolute;
border:1px solid rgba(42,119,231,.15);
border-radius:50%;
width:360px;
height:155px;
transform:rotate(-26deg)}
.orbit-right{
transform:rotate(43deg);
width:310px;
height:133px;
border-color:rgba(0,186,206,.2)}
.companion-logo{
height:189px;
width:189px;
border-radius:44px;
overflow:hidden;
box-shadow:0 22px 36px rgba(8,51,150,.2);
position:relative;
z-index:1;
transform:rotate(-5deg)}
.companion-logo img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 16%;
transform:scale(1.05)}
.companion-float{
position:absolute;
z-index:2;
padding:10px 13px;
border-radius:10px;
background:rgba(255,255,255,.95);
box-shadow:0 9px 22px rgba(24,65,131,.12);
font-size:9px;
color:#68768e}
.float-one{
top:56px;
right:6px}
.float-one span{
color:var(--blue);
font-size:13px;
margin-left:9px}
.float-two{
bottom:60px;
left:10px;
display:flex;
align-items:center;
gap:8px}
.typing{
display:flex;
gap:2px}
.typing i{
height:4px;
width:4px;
border-radius:50%;
background:#26afd1}
.typing i:nth-child(2){
opacity:.65}
.typing i:nth-child(3){
opacity:.36}
.companion-mini-label{
position:absolute;
bottom:13px;
right:36px;
font-size:7px;
color:#7c91ad;
letter-spacing:1.1px;
display:flex;
align-items:center;
gap:7px}
.companion-mini-label .offline-pulse{
height:5px;
width:5px}
.companion-copy .section-kicker{
margin-bottom:16px}
.companion-copy h2{
font-size:60px;
margin-bottom:17px}
.companion-lead{
font-size:15px;
line-height:1.7;
color:#50617d;
margin-bottom:12px;
max-width:390px}
.companion-copy>p:not(.companion-lead){
font-size:11px;
color:#7a879c;
line-height:1.8;
max-width:380px;
margin-bottom:20px}
.text-link{
font-size:11px;
font-weight:700;
color:#1768e9}
.text-link span{
margin-left:8px}
.promise-section{
background:linear-gradient(120deg,#101a48,#102a6b 60%,#07457f);
color:#fff;
overflow:hidden}
.promise-inner{
min-height:460px;
padding-top:78px;
padding-bottom:78px;
display:grid;
grid-template-columns:.9fr 1.1fr;
align-items:center;
gap:55px}
.promise-copy{
position:relative;
z-index:2}
.promise-copy .section-kicker{
color:#89b1ff}
.promise-copy h2{
font:800 clamp(35px,4.2vw,52px)/1.13 var(--font-head);
letter-spacing:-2.4px;
color:#fff;
margin:0 0 15px}
.promise-copy h2 span{
color:#63cafd}
.promise-copy p{
font-size:11px;
line-height:1.85;
color:#c1cce2;
max-width:405px;
margin-bottom:15px}
.promise-map{
height:330px;
position:relative;
display:grid;
place-items:center}
.map-ring{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(144,186,255,.15);
border-radius:50%}
.ring-outer{
width:328px;
height:328px}
.ring-inner{
width:222px;
height:222px;
border-style:dashed}
.map-lines{
position:absolute;
width:min(100%,440px);
height:auto;
overflow:visible}
.map-lines path{
fill:none;
stroke:rgba(111,183,255,.42);
stroke-width:1.1}
.map-lines .path-dash{
stroke:rgba(35,213,232,.46);
stroke-dasharray:4 7}
.map-node{
position:absolute;
z-index:2;
width:72px;
height:72px;
border-radius:50%;
background:rgba(31,64,127,.8);
border:1px solid rgba(156,198,255,.28);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
box-shadow:0 0 21px rgba(52,127,235,.16)}
.map-node i{
font-style:normal;
font-size:18px;
color:#79caff}
.map-node b{
font-size:7px;
color:#d8eaff;
font-weight:600}
.node-one{
left:9%;
top:12%}
.node-two{
right:8%;
top:21%}
.node-three{
right:18%;
bottom:6%}
.node-four{
left:7%;
bottom:17%}
.node-center{
width:37px;
height:37px;
left:calc(50% - 18px);
top:calc(50% - 18px);
background:#1765d5;
border-color:#53c7ff;
box-shadow:0 0 28px rgba(42,183,255,.35)}
.node-center i{
font-size:19px;
color:#fff}
.map-label{
position:absolute;
font-size:7px;
color:#91afd6;
letter-spacing:1.5px}
.label-top{
top:0;
left:48%}
.label-side{
right:-15px;
top:54%;
transform:rotate(90deg)}
.label-bottom{
bottom:0;
left:41%}
.principles-section{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:95px;
padding-top:100px;
padding-bottom:96px}
.principles-title h2{
font-size:39px;
letter-spacing:-1.8px}
.principles-list>div{
display:grid;
grid-template-columns:35px 1fr;
column-gap:12px;
border-bottom:1px solid var(--line);
padding:14px 0}
.principles-list>div:first-child{
padding-top:4px}
.principles-list>div>span{
grid-row:span 2;
color:#3680ef;
font-size:9px;
font-weight:700;
padding-top:2px}
.principles-list b{
font:700 12px var(--font-head);
color:#273451}
.principles-list p{
font-size:10px;
line-height:1.6;
color:#7e899c;
margin:5px 0 0}
.contact-section{
padding-top:23px;
padding-bottom:70px}
.contact-card{
min-height:350px;
position:relative;
overflow:hidden;
border-radius:18px;
padding:51px 60px;
background:#edf5ff;
display:flex;
align-items:center;
justify-content:space-between}
.contact-copy{
max-width:480px;
position:relative;
z-index:2}
.contact-copy .section-kicker{
color:#6081b4}
.contact-copy h2{
font:800 43px/1.12 var(--font-head);
letter-spacing:-2px;
color:var(--navy);
margin:0 0 11px}
.contact-copy h2 span{
color:var(--blue)}
.contact-copy p{
max-width:430px;
font-size:11px;
line-height:1.7;
color:#6f7d95;
margin-bottom:17px}
.contact-mark{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-right:75px}
.contact-mark img{
width:142px;
height:142px;
object-fit:cover;
object-position:center 16%;
border-radius:32px;
box-shadow:0 16px 30px rgba(18,67,148,.18)}
.contact-mark span{
font-size:8px;
letter-spacing:.3px;
color:#7285a2}
.contact-mark i{
position:absolute;
top:-23px;
right:-28px;
color:#24b5e0;
font-style:normal;
font-size:22px}
.contact-decoration{
position:absolute;
border-radius:50%;
pointer-events:none}
.dec-one{
height:390px;
width:390px;
border:1px solid rgba(30,106,232,.08);
right:31px;
top:-157px}
.dec-two{
height:260px;
width:260px;
border:1px dashed rgba(30,106,232,.12);
right:97px;
top:-92px}
.site-footer{
display:flex;
align-items:center;
gap:24px;
padding:0 0 29px;
min-height:92px}
.footer-brand{
font-size:14px}
.site-footer p{
font-size:8px;
line-height:1.65;
color:#8390a5;
margin:0 auto 0 0}
.site-footer p b{
color:#55647e}
.site-footer>a:not(.brand){
font-size:9px;
font-weight:700;
color:#52627d}
.site-footer>a span{
color:var(--blue);
margin-left:4px}
.copyright{
font-size:8px;
color:#9aa5b6;
margin-left:auto}
@keyframes scroll{
0%,100%{
transform:translateY(0);
opacity:.6}
50%{
transform:translateY(7px);
opacity:1}
}
@media(min-width:1400px){
.hero{
min-height:680px}
.hero-visual{
height:610px}
.phone{
transform:rotate(-4deg) scale(1.04)}
}
@media(max-width:900px){
.page-wrap{
width:calc(100% - 48px)}
.site-header{
padding:0 24px}
.main-nav{
gap:20px;
margin-right:22px}
.hero{
grid-template-columns:.94fr 1.06fr;
min-height:600px}
.hero h1{
font-size:69px;
letter-spacing:-5px}
.hero-visual{
transform:scale(.91);
transform-origin:center}
.section-heading{
grid-template-columns:1fr 300px;
gap:30px}
.companion-section{
gap:35px}
.promise-inner{
gap:22px}
.principles-section{
gap:42px}
.contact-card{
padding:45px}
.contact-mark{
margin-right:30px}
}
@media(max-width:680px){
html{
scroll-padding-top:70px}
.page-wrap{
width:calc(100% - 38px)}
.site-header{
height:70px;
padding:0 19px}
.brand{
font-size:16px;
gap:8px}
.brand img{
width:37px;
height:37px}
.header-cta{
display:none}
.menu-toggle{
display:flex;
flex-direction:column;
gap:5px;
padding:12px;
margin-right:-10px;
z-index:3}
.menu-toggle span{
display:block;
height:2px;
width:19px;
border-radius:2px;
background:var(--navy);
transition:transform .2s}
.menu-toggle[aria-expanded="true"] span:first-child{
transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{
transform:translateY(-3.5px) rotate(-45deg)}
.main-nav{
position:absolute;
display:none;
top:69px;
left:0;
right:0;
background:rgba(248,251,255,.98);
padding:13px 21px 20px;
margin:0;
border-bottom:1px solid var(--line);
box-shadow:0 12px 20px rgba(21,43,83,.06);
gap:0}
.main-nav.open{
display:flex;
flex-direction:column;
align-items:stretch}
.main-nav a{
padding:13px 3px;
border-bottom:1px solid #edf1f7}
.main-nav a:last-child{
border:0}
.hero{
grid-template-columns:1fr;
min-height:unset;
padding-top:29px;
padding-bottom:45px}
.hero-copy{
padding:22px 2px 0}
.eyebrow{
font-size:9px;
margin-bottom:18px}
.hero h1{
font-size:62px;
letter-spacing:-4.6px;
margin-bottom:17px}
.hero-intro{
font-size:13px;
line-height:1.75;
max-width:430px;
margin-bottom:21px}
.hero-actions{
gap:13px}
.hero-proof{
margin-top:26px}
.hero-visual{
height:507px;
margin-top:-3px;
transform:scale(.9);
transform-origin:top center;
width:111%;
margin-left:-5.5%;
margin-bottom:-50px}
.phone{
transform:rotate(-4deg) scale(.93)}
.sync-card{
right:0;
top:100px}
.focus-card{
left:0;
bottom:87px}
.scroll-cue{
display:none}
.signal-strip{
min-height:auto}
.strip-inner{
width:calc(100% - 38px);
padding:17px 0;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.strip-inner span{
font-size:9px;
line-height:1.35}
.strip-inner i{
font-size:15px}
.section{
padding-top:70px;
padding-bottom:70px}
.section-heading{
grid-template-columns:1fr;
gap:15px;
margin-bottom:30px}
.section-heading h2,.companion-copy h2{
font-size:43px;
letter-spacing:-2px}
.section-heading>p{
font-size:11px;
max-width:450px}
.journey{
grid-template-columns:1fr;
gap:0;
padding:5px 0}
.journey-step{
padding:16px 5px 20px 0;
display:grid;
grid-template-columns:60px 1fr;
column-gap:14px}
.step-index{
grid-column:1;
grid-row:1;
padding-top:5px}
.journey-icon{
height:60px;
width:60px;
border-radius:17px;
margin:0;
grid-column:1;
grid-row:2/span 3}
.download-icon span,.sync-icon>span,.offline-icon>span{
font-size:26px}
.orbit-one{
width:70px;
height:36px}
.orbit-two{
width:78px;
height:50px}
.journey-step h3{
grid-column:2;
margin:3px 0 5px;
font-size:15px}
.journey-step p{
grid-column:2;
margin:0 0 7px;
min-height:unset;
max-width:370px;
font-size:10px}
.step-meta{
grid-column:2;
font-size:8px}
.journey-connector{
display:none}
.honesty-note{
padding:13px 14px;
margin-top:13px}
.honesty-note p{
font-size:9px}
.tools-section{
padding-top:72px;
padding-bottom:66px}
.tools-grid{
grid-template-columns:1fr;
gap:12px}
.tool-feature{
min-height:330px;
padding:20px}
.tool-feature h3{
font-size:19px}
.tool-qa{
min-height:344px}
.chat-illustration{
right:15px;
top:73px;
width:53%;
padding:10px}
.tool-math{
min-height:330px}
.tool-practice,.tool-teacher{
min-height:330px}
.tools-footnote{
font-size:8px}
.companion-section{
grid-template-columns:1fr;
gap:17px;
padding-top:62px;
padding-bottom:72px}
.companion-visual{
height:320px;
order:1}
.companion-copy{
order:2}
.companion-copy h2{
font-size:53px}
.companion-lead{
font-size:13px}
.companion-copy>p:not(.companion-lead){
font-size:10px}
.companion-logo{
height:160px;
width:160px;
border-radius:37px}
.companion-glow{
width:270px;
height:270px}
.companion-orbit{
width:300px;
height:125px}
.orbit-right{
width:265px;
height:110px}
.float-one{
right:0;
top:42px}
.float-two{
left:0;
bottom:48px}
.promise-inner{
grid-template-columns:1fr;
gap:5px;
padding-top:64px;
padding-bottom:54px}
.promise-copy h2{
font-size:40px}
.promise-copy p{
font-size:10px}
.promise-map{
height:300px}
.ring-outer{
height:270px;
width:270px}
.ring-inner{
height:190px;
width:190px}
.map-node{
width:65px;
height:65px}
.node-one{
left:3%}
.node-four{
left:3%}
.node-two{
right:3%}
.node-three{
right:9%}
.label-side{
right:-11px}
.principles-section{
grid-template-columns:1fr;
gap:24px;
padding-top:70px;
padding-bottom:66px}
.principles-title h2{
font-size:31px}
.principles-list b{
font-size:11px}
.principles-list p{
font-size:9px}
.contact-section{
padding-top:9px;
padding-bottom:40px}
.contact-card{
min-height:unset;
padding:31px 23px 29px;
align-items:flex-start}
.contact-copy{
max-width:100%}
.contact-copy h2{
font-size:38px}
.contact-copy p{
font-size:10px;
max-width:95%}
.contact-mark{
display:none}
.dec-one{
right:-177px;
top:-64px}
.dec-two{
right:-85px;
top:-31px}
.site-footer{
width:calc(100% - 38px);
padding-bottom:22px;
display:grid;
grid-template-columns:1fr auto;
gap:11px 12px}
.footer-brand{
grid-column:1;
grid-row:1}
.site-footer p{
grid-column:1;
grid-row:2}
.site-footer>a:not(.brand){
grid-column:2;
grid-row:1;
align-self:center}
.copyright{
grid-column:2;
grid-row:2;
margin:0;
white-space:nowrap;
font-size:7px}
}
@media(max-width:380px){
.hero h1{
font-size:55px}
.hero-visual{
transform:scale(.8);
margin-bottom:-90px}
.strip-inner{
grid-template-columns:1fr}
.strip-inner span{
font-size:10px}
.section-heading h2{
font-size:38px}
.chat-illustration{
width:51%;
right:12px}
.tool-feature>p{
max-width:310px}
.math-art,.practice-art,.teacher-art{
right:13px;
transform:scale(.88);
transform-origin:right top}
.promise-copy h2{
font-size:36px}
.contact-copy h2{
font-size:34px}
.copyright{
font-size:6px}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:.01ms!important}
}