:root { --font-body:Arial,Helvetica,sans-serif; --font-display:"Trebuchet MS",Arial,sans-serif; --ink:#10221d; --muted:#66756f; --paper:#f4f7f3; --cream:#e9efe9; --green:#20a875; --green-dark:#087251; --navy:#132a33; --blue:#2f7df6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body),sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { height:82px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dbe2dc; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:19px; font-weight:800; letter-spacing:-.5px; }
.brand img { border-radius:9px; }
nav { display:flex; gap:36px; font-size:14px; color:#3d514a; }
nav a:hover { color:var(--green-dark); }
.header-cta { padding:11px 19px; border:1px solid #b9c7c0; border-radius:7px; font-size:14px; font-weight:700; transition:.2s; }
.header-cta:hover { background:var(--ink); color:white; border-color:var(--ink); }
.hero { min-height:720px; display:grid; grid-template-columns:minmax(370px,.82fr) minmax(540px,1.18fr); align-items:center; gap:40px; padding:70px clamp(24px,5vw,76px) 95px; overflow:hidden; }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-label { color:var(--green-dark); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:2px; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:32px; height:1px; background:var(--green); }
h1,h2,h3 { font-family:var(--font-display); margin:0; }
h1 { font-size:clamp(53px,6vw,88px); line-height:.98; letter-spacing:-5px; margin:27px 0 28px; }
h1 em,.download h2 em { font-style:normal; color:var(--green); }
.hero-lead { font-size:18px; line-height:1.65; color:#52645d; max-width:540px; }
.hero-actions { display:flex; gap:12px; margin:34px 0 30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:7px; font-weight:800; font-size:14px; transition:.2s; }
.button.primary { background:var(--green-dark); color:#fff; box-shadow:0 12px 28px #0872512b; }
.button.primary:hover { background:#075f45; transform:translateY(-2px); }
.button.secondary { border:1px solid #c4d0ca; gap:15px; }
.button.secondary:hover { border-color:var(--ink); }
.trust-line { display:flex; align-items:center; gap:12px; color:#718078; font-size:12px; font-weight:700; }
.trust-line i { width:3px;height:3px;background:#9aaba3;border-radius:50%; }
.product-stage { position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; }
.stage-orbit { position:absolute; border:1px solid #bdd0c6; border-radius:50%; }
.orbit-one { width:650px;height:650px;right:-80px;top:-38px; }
.orbit-two { width:470px;height:470px;right:25px;top:40px;border-color:#d6e0da; }
.app-window { width:min(720px,100%); background:#1c3037; border:1px solid #456068; border-radius:16px; box-shadow:0 35px 80px #1c332e35; overflow:hidden; transform:perspective(1400px) rotateY(-4deg) rotateX(1deg); position:relative; z-index:2; }
.app-topbar { height:48px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; color:#e8f3ee; border-bottom:1px solid #3b5158; }
.window-dots { display:flex; gap:6px; }.window-dots span { width:8px;height:8px;border-radius:50%;background:#566b72; }
.mini-brand { display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700; }.mini-brand img { width:20px;height:20px;border-radius:5px; }
.avatar { justify-self:end;width:25px;height:25px;border-radius:50%;background:#1ea473;color:white;font-size:8px;display:grid;place-items:center;font-weight:800; }
.app-body { display:grid;grid-template-columns:58px 1fr;min-height:405px; }
.app-sidebar { border-right:1px solid #3b5158; display:flex;flex-direction:column;align-items:center;gap:13px;padding:15px 0; }
.side-mark,.app-sidebar span { width:31px;height:31px;border-radius:7px;display:grid;place-items:center;color:#879ba1;font-size:13px; }
.side-mark { background:var(--green);color:white;font-weight:900;margin-bottom:10px; }.app-sidebar span.active { background:#2b494b;color:#5bd0a6; }
.app-content { background:#f3f5f3;padding:25px;color:var(--ink); }
.app-greeting { display:flex;justify-content:space-between;align-items:flex-start; }.app-greeting small { color:#718078;font-size:7px;letter-spacing:1.3px;font-weight:800; }.app-greeting h2 { font-size:21px;letter-spacing:-.7px;margin-top:3px; }
.live-chip { font-size:7px;color:#087251;font-weight:900;letter-spacing:.7px;background:#dff3e9;border:1px solid #b9e5d2;border-radius:20px;padding:7px 9px;display:flex;gap:5px;align-items:center; }.live-chip b { width:5px;height:5px;background:#17a771;border-radius:50%; }
.stats-row { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0; }.stats-row>div { background:white;border:1px solid #dce3de;border-radius:9px;padding:13px;display:grid;grid-template-columns:1fr auto; }.stats-row small { grid-column:1/-1;font-size:8px;color:#75837d; }.stats-row strong { font-family:var(--font-display);font-size:25px;margin-top:8px; }.stats-row span { font-size:7px;color:#88958f;align-self:end;margin-bottom:4px; }.stats-row .good { color:#15956a; }
.dash-grid { display:grid;grid-template-columns:1.45fr .75fr;gap:12px; }.schedule-card,.attendance-card { background:white;border:1px solid #dce3de;border-radius:10px;padding:14px; }.card-heading { display:flex;justify-content:space-between;font-size:9px;margin-bottom:10px; }.card-heading span { color:#168963;font-size:7px; }
.class-row { display:grid;grid-template-columns:34px 6px 1fr auto;gap:8px;align-items:center;border-top:1px solid #edf0ee;padding:10px 0; }.class-row time { font-size:8px;color:#697872; }.class-row i { width:5px;height:5px;background:#b8c5bf;border-radius:50%; }.class-row.current i { background:#20a875;box-shadow:0 0 0 3px #d4f0e5; }.class-row div { display:flex;flex-direction:column;gap:2px; }.class-row b { font-size:8px; }.class-row small { font-size:6px;color:#809089; }.class-row>span { font-size:6px;color:#168963;background:#ddf2e9;padding:4px 6px;border-radius:8px; }
.attendance-card { text-align:center;display:flex;flex-direction:column;align-items:center; }.pulse { width:82px;height:82px;border:7px solid #d7eee5;border-top-color:#23a877;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:1px 0 10px; }.pulse span { font:800 23px var(--font-display); }.pulse small { font-size:6px;color:#75837d; }.attendance-card>b { font-size:10px; }.attendance-card p { font-size:7px;color:#77857f;margin:4px 0 10px; }.attendance-tags { display:flex;gap:4px; }.attendance-tags span { padding:4px 6px;border-radius:4px;background:#edf2ef;font-size:6px;font-weight:800; }.attendance-card button { width:100%;border:0;border-radius:6px;background:#168a64;color:white;font-size:7px;font-weight:800;padding:8px;margin-top:11px; }
.scan-toast { position:absolute;z-index:3;right:-4px;bottom:34px;background:white;border-radius:10px;padding:12px 14px;box-shadow:0 15px 35px #1a3a3040;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-width:285px; }.check { width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#daf2e8;color:#0d9568;font-weight:900; }.scan-toast div { display:flex;flex-direction:column; }.scan-toast b { font-size:9px; }.scan-toast small { color:#7a8982;font-size:7px; }.scan-toast strong { color:#15956a;font-size:7px;letter-spacing:.6px; }
.statement { background:var(--navy);color:white;text-align:center;padding:110px 24px; }.statement p { color:#65d0a8;font-size:11px;letter-spacing:3px;font-weight:900; }.statement h2 { font-size:clamp(38px,5vw,66px);line-height:1.15;letter-spacing:-3px;margin-top:24px; }
.features,.workflow { padding:110px clamp(24px,7vw,110px); }.section-intro { display:grid;grid-template-columns:.45fr 1fr;gap:40px;align-items:start;margin-bottom:65px; }.section-intro h2 { font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-2.5px; }.section-intro>div>p { color:var(--muted);line-height:1.7;max-width:550px;margin-top:20px; }
.feature-grid { display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #cad5cf;border-left:1px solid #cad5cf; }.feature-grid article { min-height:270px;padding:42px;border-right:1px solid #cad5cf;border-bottom:1px solid #cad5cf;transition:.25s;background:#f4f7f3; }.feature-grid article:hover { background:#fff;transform:translateY(-4px);box-shadow:0 15px 35px #1e372d10; }.feature-grid article>span { color:#21a878;font-size:11px;font-weight:900; }.feature-grid h3 { font-size:23px;margin:38px 0 14px;letter-spacing:-.7px; }.feature-grid p { color:var(--muted);line-height:1.65;max-width:430px; }
.local-section { display:grid;grid-template-columns:1fr 1fr;min-height:650px;background:#e7ede8; }.local-visual { position:relative;overflow:hidden;display:grid;place-items:center; }.data-ring { position:absolute;border:1px solid #b6c9bf;border-radius:50%; }.ring-a { width:480px;height:480px; }.ring-b { width:340px;height:340px;border-style:dashed; }.data-core { width:205px;height:205px;border-radius:50%;background:var(--navy);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 25px 55px #243e3440; }.data-core img { width:47px;height:47px;border-radius:12px;margin-bottom:14px; }.data-core span { color:#66d2aa;font-size:8px;letter-spacing:2px;font-weight:900; }.data-core b { font:700 24px var(--font-display);margin-top:5px; }.data-pill { position:absolute;background:white;border:1px solid #cad8d1;border-radius:20px;padding:9px 16px;font-size:10px;font-weight:800;box-shadow:0 8px 22px #243e3414; }.pill-one { top:19%;left:17%; }.pill-two { top:31%;right:13%; }.pill-three { bottom:21%;left:14%; }
.local-copy { padding:100px clamp(40px,7vw,105px);background:#fff; }.local-copy h2 { font-size:clamp(36px,4vw,54px);line-height:1.08;letter-spacing:-2.5px;margin:25px 0; }.local-copy>p { color:var(--muted);line-height:1.75; }.local-copy ul { list-style:none;padding:0;margin:35px 0;display:grid;gap:15px; }.local-copy li { font-size:14px;font-weight:700; }.local-copy li span { display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#dff3ea;color:#0c8c63;margin-right:10px;font-size:11px; }
.section-intro.compact { margin-bottom:45px; }.workflow ol { list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bbc9c2; }.workflow li { padding:30px 25px 20px 0;border-right:1px solid #bbc9c2;min-height:180px;margin-right:25px; }.workflow li:last-child { border:0; }.workflow li>span { color:#18a271;font-size:10px;font-weight:900; }.workflow h3 { font-size:23px;margin:30px 0 10px; }.workflow p { font-size:14px;line-height:1.6;color:var(--muted); }
.download { background:var(--green-dark);color:white;display:grid;grid-template-columns:1fr 450px;gap:80px;align-items:center;padding:100px clamp(24px,8vw,125px); }.section-label.light { color:#8ce0bf; }.download h2 { font-size:clamp(48px,6vw,76px);line-height:1;letter-spacing:-4px;margin:25px 0; }.download h2 em { color:#95e4c4; }.download>div>p { color:#b7d8cb; }.download-card { background:white;color:var(--ink);padding:27px;border-radius:13px;box-shadow:0 25px 60px #034b3530; }.download-card h3 { font-size:18px;margin-bottom:15px; }.download-option { border:1px solid #d7e0dc;border-radius:8px;padding:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin-top:9px;transition:.2s; }.download-option:hover { border-color:var(--green);transform:translateX(3px); }.os-icon { width:34px;height:34px;border-radius:7px;background:#edf5f1;display:grid;place-items:center;font-size:18px; }.download-option div { display:flex;flex-direction:column; }.download-option b { font-size:13px; }.download-option small { color:#77877f;font-size:10px;margin-top:2px; }.download-option strong { color:var(--green-dark); }.download-card>p { text-align:center;color:#87958f;font-size:9px;margin:17px 0 0; }
footer { padding:30px clamp(24px,5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #d8e0dc; }.footer p,footer>span { font-size:11px;color:#718078; }.footer p { text-align:center; }footer>p { font-size:11px;color:#718078;text-align:center; }footer>span { justify-self:end; }
@media(max-width:1000px){.hero{grid-template-columns:1fr;padding-top:60px}.hero-copy{text-align:center}.eyebrow,.hero-actions,.trust-line{justify-content:center}.hero-lead{margin-inline:auto}.product-stage{min-height:530px}.orbit-one{right:50%;transform:translateX(50%)}.section-intro{grid-template-columns:1fr}.local-section{grid-template-columns:1fr}.local-visual{min-height:550px}.download{grid-template-columns:1fr}.download-card{max-width:520px}.workflow ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.site-header{height:70px}.site-header nav{display:none}.header-cta{padding:9px 12px}.brand{font-size:17px}.hero{display:block;padding-top:55px;min-height:auto}.hero h1{font-size:53px;letter-spacing:-3px}.hero-actions{flex-direction:column}.trust-line{flex-wrap:wrap}.product-stage{min-height:430px;margin-top:35px}.app-window{transform:none}.app-content{padding:14px}.stats-row{grid-template-columns:1fr 1fr}.stats-row>div:last-child{display:none}.dash-grid{grid-template-columns:1fr}.attendance-card{display:none}.app-greeting h2{font-size:15px}.scan-toast{right:0;bottom:3px;min-width:255px}.statement,.features,.workflow{padding:75px 22px}.statement h2{letter-spacing:-2px}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:auto;padding:30px}.feature-grid h3{margin-top:25px}.local-visual{min-height:430px}.ring-a{width:390px;height:390px}.ring-b{width:290px;height:290px}.data-core{width:175px;height:175px}.local-copy{padding:70px 25px}.workflow ol{grid-template-columns:1fr}.workflow li{min-height:auto;border-right:0;border-bottom:1px solid #bbc9c2;margin:0}.download{padding:75px 22px}.download h2{font-size:49px;letter-spacing:-3px}.download-card{padding:20px}footer{grid-template-columns:1fr;gap:16px;text-align:center}footer .brand,footer>span{justify-self:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}