:root{--navy:#11284f;--blue:#2469f3;--blue-deep:#1857db;--text:#566984;--mint:#22b79d;--line:#e4ebf5;--white:#fff;--bg:#fbfcff;--shadow:0 20px 65px rgba(29,70,139,.095);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--navy);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffbd56;outline-offset:3px}img{display:block;width:100%}section{scroll-margin-top:90px}.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}.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}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:none}.i-sm{width:17px;height:17px}.i-lg{width:25px;height:25px}
/* header */
.topbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(212,225,242,.8)}.nav{height:78px;display:flex;align-items:center;gap:34px}.logo{display:flex;align-items:center;gap:11px;white-space:nowrap;font-weight:860;font-size:20px;letter-spacing:-.7px}.logomark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#3b88fc,#2557da);box-shadow:0 8px 20px #4379f632;color:white}.nav-links{margin-left:auto;display:flex;align-items:center;gap:30px}.nav-links a{font-size:13px;font-weight:720;color:#50617b}.nav-links a:hover{color:var(--blue)}.nav-actions{display:flex;gap:10px;align-items:center}.button{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:14px;font-size:14px;font-weight:800;white-space:nowrap;transition:transform .17s,box-shadow .17s}.button:hover{transform:translateY(-2px)}.button.primary{background:linear-gradient(125deg,#3c8cff,#2566ee);color:white;box-shadow:0 12px 25px rgba(30,99,228,.24)}.button.primary:hover{box-shadow:0 15px 27px rgba(30,99,228,.35)}.button.secondary{background:#fff;color:#1e64d7;border:1px solid #bdd4fb}.hamburger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid #d9e5f9;border-radius:12px;background:#fff}
/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 9%,#def8f6 0%,transparent 28%),radial-gradient(circle at 3% 80%,#fff0de 0%,transparent 24%),linear-gradient(145deg,#f7fcff 6%,#fff 50%,#f3f9ff);padding:60px 0 77px}.hero:after,.feature-bg:after{pointer-events:none;content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:56px solid #bee5fa38;right:-135px;bottom:-137px}.hero-grid{display:grid;grid-template-columns:.84fr 1.16fr;align-items:center;gap:38px}.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #d4e8fb;background:#fff;padding:7px 13px;border-radius:100px;color:#3266a9;font-size:11px;font-weight:760}.pill .spark{color:#faad20;font-size:15px}.hero h1{font-size:clamp(45px,4.65vw,64px);font-weight:890;line-height:1.1;letter-spacing:-3.3px;margin:20px 0 21px;max-width:650px}.gradient-text{background:linear-gradient(115deg,#347df8,#438ce7 42%,#37baad);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:16px;line-height:1.78;color:var(--text);max-width:525px;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 20px}.chips{display:flex;gap:9px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;background:#fff;border:1px solid #e6ecf5;border-radius:11px;color:#60718d;font-size:11px;font-weight:720;box-shadow:0 5px 13px #26447109}.chip .tick{color:#0fa77b}.hero-photo{position:relative;min-width:0;padding:14px}.hero-photo:before{content:"";position:absolute;inset:2% -1% -2%;background:linear-gradient(135deg,#dff1ff,#f2fbfa 46%,#fff0dd);border-radius:44px;transform:rotate(-3.3deg)}.hero-photo:after{content:"";position:absolute;inset:0 0 0 0;box-shadow:inset 0 0 55px #ffffff66;border-radius:34px;pointer-events:none}.hero-photo img{position:relative;z-index:1;aspect-ratio:1134/750;height:auto;object-fit:cover;object-position:center;border-radius:30px;box-shadow:var(--shadow)}.floating{position:absolute;z-index:2;box-shadow:0 11px 24px #35619f22;border:1px solid #e4eaf3;border-radius:14px;background:#fff;font-size:12px;font-weight:820;padding:11px 14px;display:flex;align-items:center;gap:8px}.floating .round{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#e8f9f1;color:#12a784}.floating.top{top:-13px;right:7%}.floating.bottom{bottom:-17px;left:-8px}.floating.bottom .round{background:#f6edff;color:#9962dd}
/* sections */
.section{padding:78px 0}.section-title-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:860;color:#3b85e5;margin-bottom:9px}.section h2,.end-card h2{font-size:clamp(28px,3.1vw,41px);font-weight:875;line-height:1.2;letter-spacing:-1.65px;margin:0}.subtext{color:#6c7e97;font-size:14px;max-width:480px;margin:8px 0 0}.decor{color:#ffae3b;font-size:23px;vertical-align:top}.arrow-set{display:flex;gap:9px}.arrowbtn{height:42px;width:42px;border-radius:13px;border:1px solid #dce5f5;background:#fff;color:#2c62bd;display:grid;place-items:center;font-size:22px;box-shadow:0 3px 10px #315a870b}.arrowbtn:disabled{opacity:.3;cursor:not-allowed}
/* audience */
.audience{background:linear-gradient(180deg,#fff,#fafdff)}.audience-rail{display:flex;gap:16px;overflow-x:auto;padding:3px 1px 19px;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}.audience-rail::-webkit-scrollbar{display:none}.person{flex:0 0 210px;scroll-snap-align:start;border:1px solid #e7edf6;border-radius:21px;overflow:hidden;background:white;box-shadow:0 9px 23px #204c7e0e;transition:transform .2s}.person:hover{transform:translateY(-3px)}.person-visual{height:174px;overflow:hidden;background:linear-gradient(145deg,#f5e9ff,#eef9ff)}.person:nth-child(7n+1) .person-visual{background:#fff0e8}.person:nth-child(7n+2) .person-visual{background:#e8faee}.person:nth-child(7n+3) .person-visual{background:#eaf4ff}.person:nth-child(7n+4) .person-visual{background:#f0f6ff}.person:nth-child(7n+5) .person-visual{background:#fff4e7}.person:nth-child(7n+6) .person-visual{background:#eef5ff}.person:nth-child(7n+7) .person-visual{background:#ffeef3}.person-visual img{height:100%;object-fit:cover;object-position:center 31%;mix-blend-mode:multiply}.person-body{padding:16px 15px 19px;min-height:135px}.person h3{font-size:15px;line-height:1.35;margin:0 0 7px;letter-spacing:-.35px}.person p{font-size:12px;line-height:1.63;color:#71819b;margin:0}.person small{display:inline-flex;margin-top:10px;padding:5px 9px;border-radius:100px;color:#4675ba;background:#edf5ff;font-size:10px;font-weight:760}
/* media section */
.feature-bg{position:relative;overflow:hidden;background:linear-gradient(145deg,#eff8ff,#f5fbff 52%,#eefaf7)}.feature-bg .wrap{position:relative;z-index:2}.media-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.tab{display:inline-flex;align-items:center;gap:10px;border:1px solid #dce9f7;background:white;color:#5a6e8e;border-radius:14px;padding:12px 18px;font-size:13px;font-weight:850}.tab[aria-selected=true]{background:#286ff0;color:#fff;border-color:#286ff0;box-shadow:0 8px 20px #326bea29}.tab .circle{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:#e8f1ff}.tab[aria-selected=true] .circle{background:#ffffff2e}
.demo-frame{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;background:#fff;border:1px solid #e5edf7;border-radius:28px;box-shadow:0 18px 58px #22528317;min-height:390px}.demo-visual{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f4f9ff,#eaf8f3);padding:38px;overflow:hidden}.demo-visual:before{content:"";position:absolute;width:360px;height:360px;background:#a9d9ff46;border-radius:50%;right:-90px;bottom:-150px}.demo-visual[data-tone=peach]{background:linear-gradient(135deg,#fff4ee,#fffaf0)}.demo-visual[data-tone=purple]{background:linear-gradient(135deg,#f6f0ff,#eef7ff)}.media-card{position:relative;z-index:1;width:min(100%,430px);padding:17px;background:white;border:1px solid #dce8f7;border-radius:17px;box-shadow:0 15px 35px #2249731e;transform:rotate(-2deg)}.media-card .bar{display:flex;align-items:center;gap:6px;border-bottom:1px solid #e7eef6;padding-bottom:13px;margin-bottom:14px;color:#7490b1;font-size:11px;font-weight:800}.dot{height:8px;width:8px;border-radius:100%;background:#ff8a8a}.dot:nth-child(2){background:#ffd06c}.dot:nth-child(3){background:#6fcfa5}.media-card .bar span:last-child{margin-left:auto}.media-card h4{font-size:17px;margin:0 0 12px}.media-card img{width:100%;height:170px;object-fit:contain;border-radius:10px;background:#f4f9ff}.media-card .answer-line{margin-top:13px;padding:9px 11px;background:#eaf8f0;color:#0c8d64;border-radius:9px;font-size:12px;font-weight:780}.audio-wave{display:flex;align-items:center;gap:4px;height:110px;justify-content:center;background:#f0f6ff;border-radius:12px}.audio-wave span{width:5px;border-radius:6px;background:linear-gradient(#54c8e9,#397af4)}.playcircle{width:56px;height:56px;border-radius:50%;background:#347ef5;display:grid;place-items:center;color:white;font-size:21px;margin-right:7px;box-shadow:0 5px 15px #286afa38}.demo-copy{padding:41px 43px;display:flex;flex-direction:column;justify-content:center}.demo-tag{font-size:12px;font-weight:880;color:#3190d0;margin-bottom:12px}.demo-copy h3{font-size:clamp(25px,2.5vw,35px);line-height:1.23;letter-spacing:-1.1px;margin:0 0 15px}.demo-copy p{color:#64768f;line-height:1.72;margin:0 0 15px;font-size:14px}.demo-bullets{display:grid;gap:9px;padding:0;margin:6px 0 24px;list-style:none}.demo-bullets li{display:flex;align-items:start;gap:8px;font-size:13px;color:#4c6682;font-weight:650}.mini-check{color:#11aa83;font-weight:900}.slidenav{display:flex;align-items:center;gap:9px}.slidenav .page{margin-left:auto;color:#71829d;font-size:12px;font-weight:780}.tiny-control{border:1px solid #dce6f6;background:white;color:#326be0;height:39px;width:39px;border-radius:12px;font-size:20px}.demo-slide[hidden]{display:none}
/* strong benefit */
.value-section{background:#fff}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.benefit{border:1px solid #e7edf6;border-radius:22px;padding:23px;background:#fff;min-height:148px;display:flex;gap:16px;align-items:start;box-shadow:0 9px 25px #204c7e07}.benefit-ico{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;font-size:25px;flex:none}.benefit:nth-child(6n+1) .benefit-ico{background:#e8f3ff}.benefit:nth-child(6n+2) .benefit-ico{background:#e7f8f0}.benefit:nth-child(6n+3) .benefit-ico{background:#fff4dd}.benefit:nth-child(6n+4) .benefit-ico{background:#f2ecff}.benefit:nth-child(6n+5) .benefit-ico{background:#ffedf0}.benefit:nth-child(6n+6) .benefit-ico{background:#e8f9fc}.benefit h3{margin:0 0 5px;font-size:16px;line-height:1.4;letter-spacing:-.25px}.benefit p{color:#71819b;margin:0;font-size:12.5px;line-height:1.65}
/* steps */
.steps-bg{background:linear-gradient(180deg,#fff,#f7faff)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.step{position:relative;background:#fff;border-radius:22px;padding:24px;border:1px solid #e5edf6;box-shadow:0 9px 26px #21477c0b}.step:not(:last-child):after{content:"➜";position:absolute;right:-27px;top:49%;font-size:27px;color:#62a9ff;z-index:2}.stephead{display:flex;align-items:center;gap:12px;margin-bottom:15px}.number{width:36px;height:36px;border-radius:50%;background:#337cf3;color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 5px 12px #2e76eb34}.step:nth-child(2) .number{background:#22ba9b}.step:nth-child(3) .number{background:#ffa768}.step h3{font-size:17px;margin:0}.step p{color:#708098;font-size:12.5px;line-height:1.7;margin:13px 0 0}.step-visual{height:146px;border-radius:16px;background:linear-gradient(135deg,#e7f3ff,#fff8e9);display:grid;place-items:center;overflow:hidden}.step:nth-child(2) .step-visual{background:linear-gradient(135deg,#e8fbf3,#eaf3ff)}.step:nth-child(3) .step-visual{background:linear-gradient(135deg,#fff2ec,#f4edff)}.step-visual img{width:100%;height:100%;object-fit:cover;object-position:center 32%}.mini-step-ui{width:80%;padding:13px 15px;background:white;border:1px solid #d8e8fb;border-radius:12px;box-shadow:0 8px 20px #285a9414;font-size:12px;font-weight:800;color:#3465a9}.mini-step-ui .line{height:7px;border-radius:3px;background:#dbe8f8;margin:8px 0}.mini-step-ui .line:nth-child(2){width:65%}.mini-step-ui .line:nth-child(3){width:85%}
/* scenarios */
.story-bg{background:linear-gradient(180deg,#fff8f4,#fbfdff)}.story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.story{background:white;border:1px solid #e9ecf3;border-radius:22px;overflow:hidden;box-shadow:0 9px 25px #243b680e}.story img{height:177px;object-fit:cover;object-position:top}.story-body{padding:17px 18px 22px}.story .tag{font-size:10px;font-weight:850;color:#3b79d1;background:#eaf3ff;border-radius:20px;padding:5px 10px;display:inline-block}.story h3{font-size:16px;line-height:1.35;margin:12px 0 7px}.story p{font-size:12.5px;line-height:1.66;color:#71819a;margin:0}
/* faq */
.faq-section{background:#f5f8ff}.faq-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:55px;align-items:start}.faq-layout .section-title-row{display:block}.faq-list{display:grid;gap:10px}.faq-item{border-radius:15px;background:#fff;border:1px solid #e3ebf6;box-shadow:0 4px 15px #335c8708}.faq-item summary{cursor:pointer;padding:16px 48px 16px 20px;position:relative;list-style:none;font-weight:750;font-size:14px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";position:absolute;right:18px;top:11px;font-size:24px;color:#4080e3;font-weight:350;line-height:1.2}.faq-item[open] summary:after{content:"−"}.faq-item p{margin:0;padding:0 20px 18px;font-size:13px;color:#687a93;line-height:1.7}
/* ending */
.final-section{padding:42px 0 80px;background:#f5f8ff}.end-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:255px;border-radius:30px;background:radial-gradient(circle at 88% 15%,#ffe3de,transparent 25%),radial-gradient(circle at 5% 50%,#c9eaff,transparent 36%),linear-gradient(115deg,#e6f3ff,#f9f7ff 50%,#effaf8);padding:46px 62px}.end-card h2{max-width:650px}.end-card p{color:#667a97;margin:12px 0 21px}.end-copy{position:relative;z-index:2}.end-art{width:230px;align-self:stretch;position:relative;overflow:hidden;border-radius:27px}.end-art img{position:absolute;width:370px;height:260px;max-width:none;object-fit:cover;object-position:45% 37%;left:-86px;top:0;border-radius:24px;transform:rotate(-2deg)}.end-card:after{content:"✦";font-size:70px;color:#ffbd58;position:absolute;right:28%;bottom:-28px;opacity:.55}.footer{background:white;border-top:1px solid #e7edf5;padding:27px 0}.footer-inner{display:flex;gap:22px;align-items:center;justify-content:space-between}.footer-links{display:flex;gap:20px;color:#62748f;font-size:12px;font-weight:650}.footer .logo{font-size:15px}.footer .logomark{height:30px;width:30px;border-radius:9px}.footer p{font-size:12px;color:#96a2b5}
/* dialog */
dialog{padding:0;border:none;border-radius:19px;background:white;width:min(820px,calc(100% - 28px));box-shadow:0 30px 80px #09233b66}dialog::backdrop{background:#081d37bd;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.dialog-header button{border:0;border-radius:9px;background:#f0f4fa;width:36px;height:36px;font-size:20px}.dialog-header h2{font-size:17px;margin:0}dialog video{width:100%;background:#0e1b32;aspect-ratio:16/9}dialog p{font-size:12px;color:#72839b;margin:9px 20px 18px}
@media(max-width:1100px){.nav-links{gap:15px}.hero-grid{gap:20px}.hero h1{font-size:55px}.person{flex-basis:200px}.benefit-grid{grid-template-columns:repeat(2,1fr)}.story-grid{grid-template-columns:repeat(2,1fr)}.hero-photo{padding:8px}}
@media(max-width:850px){.wrap{width:min(100% - 36px,720px)}.nav{height:68px}.nav-links{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:white;gap:0;padding:12px 20px 18px;border-top:1px solid #e9eef6;box-shadow:0 20px 30px #13294918}.nav-links.open{display:flex}.nav-links a{padding:13px 8px}.hamburger{display:flex}.nav-actions .button{display:none}.hero{padding:40px 0 52px}.hero-grid{grid-template-columns:1fr;gap:33px}.hero h1{max-width:760px;font-size:clamp(42px,6.5vw,62px)}.hero-photo{max-width:690px;width:100%;margin:auto}.hero-photo img{max-height:490px;object-fit:cover}.faq-layout{grid-template-columns:1fr;gap:17px}.steps{gap:15px}.step{padding:18px}.step:not(:last-child):after{right:-20px}.section{padding:62px 0}.demo-copy{padding:30px}}
@media(max-width:620px){.wrap{width:calc(100% - 30px)}.logo{font-size:18px}.logomark{width:39px;height:39px}.hero{padding-top:37px}.hero h1{font-size:clamp(37px,9.2vw,49px);letter-spacing:-2px;margin:15px 0}.hero p{font-size:14px}.hero-actions .button{flex:1;padding:13px 12px;font-size:12px}.hero-photo{padding:4px}.hero-photo img{aspect-ratio:1.28;object-fit:cover;object-position:35% 50%;border-radius:22px}.floating{font-size:10px;padding:7px 9px}.floating.top{right:0;top:-14px}.floating.bottom{left:0;bottom:-12px}.section{padding:52px 0}.section h2{font-size:clamp(26px,7vw,33px);letter-spacing:-.9px}.section-title-row{align-items:center}.subtext{font-size:12px}.person{flex-basis:210px}.person-visual{height:159px}.benefit-grid{grid-template-columns:1fr;gap:10px}.benefit{min-height:0;padding:17px}.media-tabs{flex-wrap:nowrap;overflow:auto;scrollbar-width:none;gap:7px}.media-tabs .tab{white-space:nowrap;padding:8px 12px;font-size:12px}.media-tabs .circle{width:23px;height:23px;font-size:13px}.demo-frame{grid-template-columns:1fr;min-height:auto;border-radius:23px}.demo-visual{padding:22px;min-height:280px}.media-card{width:min(100%,340px)}.media-card img{height:130px}.demo-copy{padding:25px 24px}.demo-copy h3{font-size:25px}.steps{grid-template-columns:1fr;gap:18px}.step:not(:last-child):after{content:"↓";top:auto;bottom:-31px;right:48%;font-size:25px}.step-visual{height:126px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.story img{height:108px}.story-body{padding:13px}.story h3{font-size:13px}.story p{font-size:11px}.end-card{padding:29px 24px;min-height:0;display:block}.end-card h2{font-size:28px}.end-card .button{margin-bottom:0}.end-art{position:absolute;right:-70px;bottom:0;width:170px;height:155px;opacity:.17}.end-copy{max-width:100%}.footer-inner{flex-direction:column;align-items:start}.footer-links{flex-wrap:wrap;gap:11px}.faq-item summary{font-size:13px}}
@media(max-width:360px){.hero-actions{gap:8px}.hero-actions .button{font-size:11px}.chip{font-size:10px}.story-grid{grid-template-columns:1fr 1fr}.story img{height:96px}.floating{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Usage & contribution – transparent before login */
.support-section{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 18%,#d9f7f0 0,transparent 23%),linear-gradient(155deg,#f3f9ff 0%,#fffaf6 55%,#f7f5ff 100%)}
.support-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:stretch}
.support-card{position:relative;overflow:hidden;border:1px solid #dce9f5;border-radius:27px;background:#fff;padding:32px;min-height:318px;box-shadow:0 18px 42px #2e578a0e;display:flex;flex-direction:column}
.support-card:after{content:' ';position:absolute;pointer-events:none;right:-49px;top:-46px;width:210px;height:210px;background:radial-gradient(circle,#e5f3ff 0,#e5f3ffb5 47%,transparent 70%);border-radius:50%}
.support-card.highlight{border:1.5px solid #a8d8cb;background:linear-gradient(153deg,#f0fcf8,#fff 51%,#f8f6ff)}
.support-card.highlight:after{background:radial-gradient(circle,#c6f5e7 0,#c6f5e7b9 47%,transparent 70%)}
.support-card-top,.support-card-title,.support-price,.support-points,.support-card .button{position:relative;z-index:1}
.support-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.support-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:850;letter-spacing:.2px;padding:7px 10px;border-radius:100px;background:#eaf2ff;color:#266dd7}
.highlight .support-kicker{background:#e1f9ee;color:#087e63}
.support-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#eef4ff;font-size:26px}
.highlight .support-symbol{background:#dcf7ed}
.support-card h3{font-size:25px;line-height:1.25;letter-spacing:-.75px;margin:21px 0 4px}
.support-price{font-size:39px;letter-spacing:-1.3px;font-weight:890;line-height:1.26;margin:5px 0 11px;color:#246cf0}
.support-price small{font-size:14px;font-weight:650;letter-spacing:0;color:#6a7e98}
.highlight .support-price{color:#128b71}
.support-card-title{font-size:13px;color:#637690;max-width:400px;margin:0 0 15px;line-height:1.6}
.support-points{list-style:none;padding:0;margin:0 0 23px;display:grid;gap:11px}
.support-points li{display:flex;align-items:start;gap:10px;color:#445f7f;font-size:13px;font-weight:680;line-height:1.45}
.support-points li:before{content:'✓';width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:#e2f5ea;color:#0a9a70;font-size:12px;font-weight:900;flex:none}
.support-card .button{align-self:start;margin-top:auto}
.support-card .button.primary{background:linear-gradient(120deg,#1ba98d,#0e897a);box-shadow:0 12px 25px #1db29c30}
.support-card .button.primary:hover{box-shadow:0 15px 27px #1db29c44}
.support-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:18px 23px;border-radius:17px;background:#fff;border:1px solid #e1eaf5;margin-top:16px;box-shadow:0 10px 30px #18448008}
.support-foot p{margin:0;color:#5c6f88;font-size:13px;line-height:1.6}
.support-foot b{color:#1a345c}
.support-foot a{white-space:nowrap;font-weight:820;font-size:13px;color:#2469e7}
.support-note{color:#78869b;font-size:12px;line-height:1.65;margin:13px 0 0;text-align:center}
@media(max-width:850px){.support-grid{gap:14px}.support-card{padding:24px}.support-card h3{font-size:22px}.support-price{font-size:33px}}
@media(max-width:620px){.support-grid{grid-template-columns:1fr}.support-card{min-height:0;padding:24px;border-radius:22px}.support-card h3{font-size:23px}.support-price{font-size:36px}.support-card .button{width:100%}.support-foot{align-items:flex-start;flex-direction:column;padding:17px}.support-foot a{align-self:flex-start}.support-note{text-align:left}}


/* Multi-platform USP — adaptable without turning the page into a platform catalogue */
.platform-swipe-hint{display:none}
.platform-section{background:linear-gradient(180deg,#f5faff 0%,#fff 100%);padding:34px 0 68px;scroll-margin-top:90px}
.platform-shell{position:relative;overflow:hidden;padding:36px 39px 24px;border-radius:30px;border:1px solid #dfebfa;background:radial-gradient(circle at 96% 10%,#ddf8ed 0,transparent 22%),radial-gradient(circle at 2% 96%,#ffeedb 0,transparent 24%),linear-gradient(127deg,#fff,#f9fcff);box-shadow:0 18px 60px #204c860d}
.platform-head{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:25px}.platform-head h2{font-size:clamp(27px,2.7vw,37px);line-height:1.22;letter-spacing:-1.2px;margin:0 0 9px}.platform-head p{font-size:13.5px;line-height:1.65;color:#64768e;max-width:730px;margin:0}
.platform-stamp{font-size:10px;line-height:1.6;font-weight:900;letter-spacing:1.3px;color:#4782c1;text-align:right;flex:none;transform:rotate(7deg)}.platform-stamp span{color:#ffbb42;font-size:19px}
.platform-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.platform-card{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:18px 8px 17px;background:#fff;border:1px solid #e0e9f5;border-radius:18px;box-shadow:0 9px 20px #295e9510;transition:transform .2s,box-shadow .2s}.platform-card:hover{transform:translateY(-4px);box-shadow:0 13px 28px #295e951a}
.platform-icon{height:52px;width:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:29px;font-weight:850}.platform-icon svg{height:32px;width:32px}.platform-icon.moodle{font-family:Georgia,serif;background:#fff0d8;color:#d87512}.platform-icon.google{color:#7443bd;background:#efe9ff}.platform-icon.microsoft{color:#038c85;background:#dff8f3}.platform-icon.microsoft span{font-size:29px;font-weight:900}.platform-icon.canvas{color:#dd3a45;background:#fff0f0}.platform-icon.canvas span{font-size:36px}.platform-icon.generic{color:#327bf0;background:#eaf2ff}.platform-name{font-size:14px;line-height:1.2;font-weight:860;white-space:nowrap;letter-spacing:-.3px}.platform-kind{font-size:11px;color:#7486a0}
.platform-usp{margin-top:16px;padding:19px 3px 13px;border-top:1px solid #e5edf7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.platform-usp-item{display:flex;gap:11px;align-items:flex-start}.usp-icon{height:34px;width:34px;display:grid;place-items:center;flex:none;border-radius:11px;font-size:20px;font-weight:800}.usp-icon.blue{background:#e6f0ff;color:#3476e8}.usp-icon.mint{background:#e5f9f2;color:#16a487}.usp-icon.peach{background:#fff0e3;color:#f0993d}.platform-usp-item strong{display:block;color:#183d65;font-size:13px;line-height:1.4}.platform-usp-item small{display:block;font-size:11.4px;color:#72839b;line-height:1.55;margin-top:3px}.platform-disclaimer{font-size:10.5px;color:#8a98ac;line-height:1.55;margin:13px 0 0}
@media(max-width:900px){.platform-track{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-usp{gap:9px}.platform-stamp{display:none}}
@media(max-width:620px){.platform-section{padding:18px 0 40px}.platform-shell{padding:25px 16px 20px;border-radius:24px}.platform-head{margin-bottom:18px}.platform-head h2{font-size:27px}.platform-head p{font-size:12px}.platform-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:10px;margin-right:-16px;padding-right:16px}.platform-track::-webkit-scrollbar{display:none}.platform-card{flex:0 0 153px;scroll-snap-align:start;padding:18px 9px}.platform-swipe-hint{display:block;text-align:right;margin:0 1px 0;font-size:10.5px;font-weight:750;color:#407cc9}.platform-usp{grid-template-columns:1fr;gap:13px;padding-top:16px;margin-top:10px}.platform-disclaimer{font-size:10px}.platform-name{font-size:12px}.platform-kind{font-size:10px}}

/* ---- AB Study Buddy server additions (sections editable in /admin) ---- */
.hidden{display:none!important}
.announce{background:var(--navy);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:8px 16px}
.section-title-row .arrow-set{flex:none}
.text-link{color:#276def;text-decoration:underline}
.platform-icon span{line-height:1}
.platform-icon.moodle span{font-family:Georgia,serif}
.platform-icon.microsoft span{font-size:29px;font-weight:900}
.platform-icon.canvas span{font-size:36px}
.card-lines{font-size:12px;color:#587090;display:grid;gap:8px}
.demo-frame{display:block}
.demo-pane{display:grid;grid-template-columns:1fr 1fr;min-height:390px}
.demo-pane[hidden]{display:none}
.mini-step-ui .mock-head{color:#3274df;display:block}
.mini-step-ui .mock-line{display:block;color:#16af86;margin-top:4px;white-space:pre-wrap}
.step:nth-child(2) .mini-step-ui .mock-head{color:#1b549e}
.step:nth-child(3) .mini-step-ui .mock-head{color:#06936a}
.support-price span[data-live]{font:inherit}
dialog iframe{width:100%;aspect-ratio:16/9;border:0;background:#0e1b32}
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vid{margin:0}
.vid video,.vid.yt iframe{width:100%;aspect-ratio:9/16;border:0;border-radius:18px;background:#dfe7f3;display:block;box-shadow:0 10px 26px rgba(46,78,140,.12)}
.vid figcaption{font-size:14px;font-weight:700;margin-top:8px}
.text-block{display:flex;gap:28px;align-items:flex-start;margin-top:18px}
.text-block.align-left{flex-direction:row-reverse}
.text-block.align-top{flex-direction:column-reverse}
.text-block .text-body{flex:1;color:var(--text)}
.text-block img,.image-block img{border-radius:18px;border:1px solid var(--line);height:auto;width:auto;max-width:100%}
.image-block{margin:0;display:flex;flex-direction:column;align-items:center}
.image-block figcaption{margin-top:8px;font-size:13px;color:var(--text)}
.footer-links a:hover{color:var(--blue)}
@media(max-width:850px){.videos{grid-template-columns:repeat(2,1fr)}.text-block{flex-direction:column}}
@media(max-width:620px){.demo-pane{grid-template-columns:1fr;min-height:auto}.section-title-row .arrow-set{display:none}}


/* ---- Layout from /admin ("Bố cục & kích thước"): classes lp-* and variables --lp-* set on each section ---- */
section.lp-bg-white{background:#fff}
section.lp-bg-blue{background:linear-gradient(145deg,#eff8ff,#f5fbff)}
section.lp-bg-mint{background:linear-gradient(145deg,#effbf6,#f6fdfb)}
section.lp-bg-peach{background:linear-gradient(145deg,#fff6ef,#fffaf5)}
section.lp-bg-purple{background:linear-gradient(145deg,#f6f1ff,#f9f7ff)}
section.lp-bg-navy{background:#11284f;color:#fff}
section.lp-bg-navy :is(.section-title-row,.platform-head,.faq-layout>div:first-child) :is(.subtext,p){color:#c9d6ee}
section.lp-bg-navy :is(.person,.benefit,.story,.step,.support-card,.faq-item,.platform-shell,.demo-frame,.end-card,.media-card,.support-foot){color:var(--navy)}
section.lp-space-compact{padding-top:36px;padding-bottom:36px}
section.lp-space-large{padding-top:110px;padding-bottom:110px}
section.lp-space-none{padding-top:0;padding-bottom:0}
section.lp-maxWidth .wrap{width:min(var(--lp-maxw),calc(100% - 32px))}
section.lp-center .section-title-row{justify-content:center;text-align:center}
section.lp-center .section-title-row>div:first-child{margin:0 auto}
section.lp-center .subtext{margin-left:auto;margin-right:auto}
section.lp-center .platform-head{text-align:center;justify-content:center}
section.lp-center .platform-head p{margin:0 auto}
section.lp-radius :is(.person,.benefit,.story,.step,.support-card,.platform-card,.platform-shell,.faq-item,.demo-frame,.end-card,.media-card,.step-visual,.vid video,.text-block img,.image-block img,.hero-photo img){border-radius:var(--lp-r)}
.audience-rail[data-autoplay]{scroll-snap-type:none}
@media(min-width:621px){
  section.lp-cardHeight .person-visual{height:var(--lp-ch)}
  section.lp-cardHeight .story img{height:var(--lp-ch)}
  section.lp-cardHeight .step-visual{height:var(--lp-ch)}
  section.lp-cardHeight .demo-pane{min-height:var(--lp-ch)}
  section.lp-cardHeight .support-card{min-height:var(--lp-ch)}
  section.lp-cardHeight .end-card{min-height:var(--lp-ch)}
}
@media(min-width:851px){
  section.lp-titleSize h1{font-size:var(--lp-h1);letter-spacing:-.05em}
  section.lp-textRatio .hero-grid{grid-template-columns:var(--lp-hero-cols)}
  section.lp-visibleCards .person{flex-basis:calc((100% - 16px * (var(--lp-visible) - 1)) / var(--lp-visible))}
}
@media(min-width:901px){section.lp-cols .platform-track{grid-template-columns:repeat(var(--lp-cols),minmax(0,1fr))}}
@media(min-width:1101px){section.lp-cols :is(.benefit-grid,.story-grid,.steps,.videos){grid-template-columns:repeat(var(--lp-cols),minmax(0,1fr))}}

/* ---- Other pages (2026-10): page header, article, download, price list, app blocks ---- */
.page-head{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 12%,#def8f6 0%,transparent 26%),radial-gradient(circle at 4% 90%,#fff0de 0%,transparent 22%),linear-gradient(145deg,#f7fcff 6%,#fff 50%,#f3f9ff);padding:56px 0 44px}
.page-head-grid{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.page-head h1{font-size:clamp(34px,4vw,54px);font-weight:890;line-height:1.12;letter-spacing:-2px;margin:8px 0 14px;max-width:820px}
.page-head .lead{font-size:16px;line-height:1.75;color:var(--text);max-width:680px;margin:0}
.page-head .page-note{font-size:12px;font-weight:760;color:#7a8ba5;margin:12px 0 0}
.page-head .hero-actions{margin:22px 0 0}
.page-head-art img{width:min(320px,100%);border-radius:24px;box-shadow:var(--shadow)}
.article-section{padding-top:36px}
.article-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 40px #22528310;padding:38px 44px;color:#44586f;font-size:15px;line-height:1.78}
.article-card>h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.8px;color:var(--navy);margin:0 0 14px}
.article-card h3{font-size:20px;letter-spacing:-.4px;color:var(--navy);margin:30px 0 8px;scroll-margin-top:96px}
.article-card h4{font-size:16px;color:var(--navy);margin:22px 0 6px}
.article-card p{margin:0 0 14px}
.article-card ol,.article-card ul{margin:0 0 16px;padding-left:22px;display:grid;gap:6px}
.article-card li::marker{color:var(--blue);font-weight:800}
.article-card b{color:var(--navy)}
.article-card code,.faq-item code{background:#eef4ff;color:#1f4fae;border-radius:6px;padding:1px 6px;font-size:.92em}
.callout{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:#fff6e8;border:1px solid #ffe0b0;color:#6a4a10}
.toc{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:14px 16px;margin:0 0 22px;border-radius:16px;background:#f3f8ff;border:1px solid #dfeaf9;font-size:13px}
.toc b{color:var(--navy);margin-right:4px}
.toc a{padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #d6e4f8;color:#2563d6;font-weight:700}
.download-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 36px;border-radius:26px;border:1.5px solid #bfd8fb;background:linear-gradient(120deg,#eef6ff,#fff 55%,#effaf6);box-shadow:0 14px 40px #22528312}
.download-card h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-1px;margin:0 0 6px}
.download-card p{margin:0;color:var(--text)}
.download-actions{display:grid;gap:8px;justify-items:end;text-align:right;max-width:360px}
.download-actions p{font-size:12px}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.price-grid .support-card{min-height:0}
section.lp-cols .price-grid{grid-template-columns:repeat(var(--lp-cols),minmax(0,1fr))}
.app-section{padding:36px 0 70px;background:linear-gradient(180deg,#f7fbff,#fff)}
@media(max-width:850px){.page-head-grid{grid-template-columns:1fr}.page-head-art{display:none}.download-card{flex-direction:column;align-items:flex-start}.download-actions{justify-items:start;text-align:left}}
@media(max-width:620px){.page-head{padding:36px 0 30px}.article-card{padding:24px 20px;border-radius:20px}section.lp-cols .price-grid{grid-template-columns:1fr}}
@media(max-width:850px){.nav-actions{margin-left:auto}}
.footer-links a{display:inline-block;padding:6px 2px;white-space:nowrap}