:root{--blue:#1120dc;--cyan:#00cbea;--ink:#10152a;--muted:#697087;--paper:#f7f9fc;--line:#dfe3ed;--sans:'DM Sans',sans-serif;--display:'Plus Jakarta Sans',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:white;font:16px/1.6 var(--sans)}
a{color:inherit}
header{height:86px;padding:0 5vw;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:42px;background:rgba(255,255,255,.94);position:relative;z-index:9}
.brand{display:flex;align-items:center;text-decoration:none;gap:9px;font:700 22px var(--display);letter-spacing:-1.2px}
.brand b span{color:var(--blue)}
.pencil{display:grid;place-items:center;width:37px;height:37px;background:var(--blue);color:white;border-radius:10px;transform:rotate(-4deg)}
nav{margin-left:auto;display:flex;gap:32px}
nav a{text-decoration:none;font-size:14px;font-weight:600;color:#4e566e}
nav a:hover{color:var(--blue)}
.mobile-support-link{display:none}
.header-cta,.primary{background:var(--blue);color:white;text-decoration:none;padding:13px 19px;border-radius:9px;font-weight:700;display:inline-flex;gap:20px;align-items:center;box-shadow:0 8px 20px rgba(17,32,220,.16);transition:.2s}
.header-cta:hover,.primary:hover{transform:translateY(-2px);background:#0714ba}
.menu{display:none}
.hero{padding:88px 5vw 76px;background:linear-gradient(135deg,#fbfcff 50%,#f1f5ff);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:720px;overflow:hidden}
.hero-copy{max-width:730px}
.pill{display:inline-flex;gap:9px;align-items:center;background:#ecf0ff;color:var(--blue);padding:8px 13px;border-radius:30px;font-size:12px;font-weight:700}
.pill i{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 4px rgba(0,203,234,.15)}
h1,h2{font-family:var(--display);letter-spacing:-.055em;line-height:1.03}
h1{font-size:clamp(53px,5.5vw,82px);margin:25px 0}
h1 em,h2 em{font-style:normal;color:var(--blue)}
.hero-copy>p{font-size:19px;color:var(--muted);max-width:620px}
.actions{display:flex;gap:18px;align-items:center;margin-top:34px}
.primary{padding:16px 22px}
.secondary{font-weight:700;text-decoration:none;padding:15px}
.proof{display:flex;margin-top:55px;padding-top:25px;border-top:1px solid var(--line);gap:34px}
.proof>div{display:flex;align-items:center;gap:10px;padding-right:30px;border-right:1px solid var(--line)}
.proof>div:last-child{border:0}
.proof strong{font:700 25px var(--display);color:var(--blue)}
.proof span{font-size:11px;line-height:1.35;color:#777e90}
.hero-art{height:600px;position:relative}
.blue-panel{width:83%;height:82%;background:var(--blue);border-radius:32px;position:absolute;right:-2%;top:0;box-shadow:0 30px 70px rgba(19,33,140,.25);padding:25px;color:white;overflow:hidden}
.blue-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(0,203,234,.18))}
.panel-top,.panel-foot{position:relative;z-index:2;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}
.panel-top span:last-child{color:#86f7d0}
.panel-foot{position:absolute;bottom:25px;left:25px;right:25px;color:#b8c0ff}
.rings{position:absolute;width:430px;height:430px;border:1px solid rgba(255,255,255,.2);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.rings:before,.rings:after{content:'';position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.rings:before{width:320px;height:320px}
.rings:after{width:210px;height:210px}
.core{width:115px;height:115px;border-radius:50%;background:var(--cyan);color:var(--ink);display:grid;place-content:center;text-align:center;font:800 36px var(--display);z-index:3;box-shadow:0 0 50px rgba(0,203,234,.55)}
.core span{display:block;font:700 8px var(--sans);letter-spacing:.12em}
.float-card{position:absolute;left:0;bottom:10px;background:white;border-radius:15px;padding:18px 22px;display:flex;gap:14px;align-items:center;box-shadow:0 20px 50px rgba(20,30,80,.22)}
.float-card>span{width:38px;height:38px;border-radius:10px;background:#e7fbff;color:#00a4c1;display:grid;place-items:center;font-weight:800}
.float-card b,.float-card small{display:block}
.float-card small{color:var(--muted)}
.client-strip{min-height:92px;padding:20px 5vw;display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--line);gap:30px;color:#9197a8}
.client-strip>span{font-size:10px;letter-spacing:.12em;color:#5e667d}
.client-strip div{font:600 13px var(--display)}
.section{padding:110px 5vw}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:70px;margin-bottom:60px}
.section-head h2{font-size:clamp(42px,4.5vw,67px);margin:15px 0 0}
.section-head>p{max-width:480px;color:var(--muted);font-size:17px}
.kicker{font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--blue)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.cards article{background:var(--paper);border:1px solid #e8eaf0;border-radius:18px;padding:26px;min-height:380px;position:relative;transition:.2s}
.cards article:hover{background:white;transform:translateY(-6px);box-shadow:0 20px 45px rgba(26,38,90,.1);border-color:#cad0ef}
.num{font-size:11px;color:#9299aa}
.ico{margin:40px 0 25px;width:54px;height:54px;border-radius:14px;background:#e9edff;color:var(--blue);display:grid;place-items:center;font-size:25px}
.cards h3{font:700 21px var(--display)}
.cards p{font-size:14px;color:var(--muted)}
.cards a{position:absolute;bottom:25px;text-decoration:none;font-size:13px;font-weight:700;color:var(--blue)}
.difference{background:var(--blue);color:white;padding:110px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.difference .kicker{color:var(--cyan)}
.diff-copy h2{font-size:clamp(45px,5vw,72px);margin:18px 0}
.diff-copy h2 em{color:var(--cyan)}
.diff-copy>p{color:#c0c5f2;max-width:580px;font-size:17px}
.light{background:white;color:var(--blue);margin-top:25px}
.benefits>div{border-top:1px solid rgba(255,255,255,.25);padding:28px 0;display:grid;grid-template-columns:50px 1fr;gap:10px}
.benefits b{font-size:11px;color:var(--cyan)}
.benefits h3{font:700 22px var(--display);margin:0}
.benefits p{grid-column:2;color:#c0c5f2;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps>div{padding-right:35px;position:relative}
.steps span{font-size:11px;font-weight:700;color:var(--blue)}
.steps i{display:block;height:2px;background:var(--line);margin:20px 0 35px;position:relative}
.steps i:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--cyan);position:absolute;top:-4px}
.steps h3{font:700 18px var(--display)}
.steps p{font-size:14px;color:var(--muted)}
.contact{text-align:left;padding:120px 5vw;background:#0f1530;color:white;display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;align-items:start}
.contact .kicker{color:var(--cyan)}
.contact h2{font-size:clamp(44px,5vw,72px);margin:20px 0}
.contact p{color:#aeb5cd;font-size:18px}
.contact-form{background:white;color:var(--ink);padding:34px;border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.22)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:block;font-size:13px;font-weight:700;margin-bottom:18px}
.contact-form label>span{float:right;color:#9299aa;font-size:11px;font-weight:500}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:8px;border:1px solid #dce0ea;border-radius:9px;padding:13px 14px;background:#f8f9fc;color:var(--ink);font:15px var(--sans);outline:none;transition:.2s}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 3px rgba(17,32,220,.1)}
.contact-form button{width:100%;border:0;border-radius:9px;background:var(--blue);color:white;padding:16px 20px;font:700 15px var(--sans);display:flex;justify-content:space-between;cursor:pointer;transition:.2s}
.contact-form button:hover{background:#0714ba;transform:translateY(-2px)}
.contact-form .form-note{font-size:11px;color:#858c9f;margin:12px 0 0;text-align:center}
.website-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.turnstile-wrap{min-height:65px;display:flex;align-items:center}
.contact-form .form-note.success{color:#087f5b}
.contact-form .form-note.error{color:#c92a2a}
.contact-form button:disabled{opacity:.65;cursor:wait;transform:none}
footer{height:105px;padding:0 5vw;display:flex;align-items:center;gap:50px}
footer p{margin-left:auto;color:var(--muted);font-size:12px}
footer small{color:#999faf}
.support-page{background:linear-gradient(135deg,#fbfcff 35%,#eff4ff);min-height:calc(100vh - 191px)}
.support-hero{padding:92px 5vw 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.support-copy{max-width:690px}
.support-copy h1{font-size:clamp(52px,5.5vw,82px);margin:20px 0 26px}
.support-copy>p{font-size:19px;color:var(--muted);max-width:650px}
.support-download{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.support-download small{color:var(--muted);font-size:12px}
.support-window{background:white;border:1px solid #e2e6f0;border-radius:24px;box-shadow:0 28px 70px rgba(20,30,80,.16);overflow:hidden}
.support-window-top{height:48px;padding:0 20px;background:#f4f6fb;border-bottom:1px solid #e4e7ef;display:flex;align-items:center;gap:7px}
.support-window-top i{width:9px;height:9px;border-radius:50%;background:#cbd0dc}
.support-window-body{padding:42px}
.support-shield{width:62px;height:62px;border-radius:18px;background:#e8fbff;color:#00a4c1;display:grid;place-items:center;font-size:28px;font-weight:800;margin-bottom:26px}
.support-window h2{font:700 27px var(--display);letter-spacing:-.035em;margin:0 0 10px}
.support-window p{color:var(--muted);margin:0 0 28px}
.session-code{background:var(--blue);color:white;border-radius:15px;padding:22px 24px}
.session-code span{display:block;font-size:10px;letter-spacing:.14em;color:#bfc6ff;margin-bottom:7px}
.session-code strong{font:700 clamp(25px,3vw,38px) var(--display);letter-spacing:.12em}
.support-steps{background:white;padding:85px 5vw 105px}
.support-steps-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:45px}
.support-steps-head h2{font-size:clamp(38px,4vw,58px);margin:12px 0 0}
.support-steps-head p{max-width:470px;color:var(--muted)}
.support-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.support-step{border:1px solid #e5e8f0;border-radius:18px;padding:27px;min-height:230px;background:var(--paper)}
.support-step b{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#e9edff;color:var(--blue);font:700 13px var(--display)}
.support-step h3{font:700 19px var(--display);margin:28px 0 10px}
.support-step p{font-size:14px;color:var(--muted);margin:0}
.security-note{margin-top:28px;border-radius:18px;background:#0f1530;color:white;padding:26px 30px;display:flex;gap:18px;align-items:flex-start}
.security-note>span{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(0,203,234,.14);color:var(--cyan);display:grid;place-items:center;font-weight:800}
.security-note strong{font:700 16px var(--display)}
.security-note p{color:#b8bfd7;margin:5px 0 0;font-size:14px}
@media(max-width:1000px){nav{display:none}
.header-cta{margin-left:auto}
.hero{grid-template-columns:1fr}
.hero-art{margin-top:55px}
.cards{grid-template-columns:1fr 1fr}
.difference{grid-template-columns:1fr}
.contact{grid-template-columns:1fr;gap:45px}
.steps{grid-template-columns:1fr 1fr;gap:35px}
.client-strip{overflow:hidden;justify-content:flex-start}
.support-hero{grid-template-columns:1fr}
.support-window{max-width:650px}
.support-step-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){header{height:76px;padding:0 20px}
.header-cta{display:none}
.menu{display:block;margin-left:auto;background:white;border:1px solid var(--line);border-radius:7px;padding:8px 11px}
.open nav{display:flex;position:absolute;top:76px;left:0;right:0;background:white;padding:25px;flex-direction:column;border-bottom:1px solid var(--line)}
.open nav .mobile-support-link{display:block;color:var(--blue)}
.hero{padding:60px 20px}
.hero h1{font-size:48px}
.actions{flex-direction:column;align-items:flex-start}
.proof{flex-wrap:wrap}
.proof>div{border:0}
.hero-art{height:470px}
.blue-panel{width:96%;height:360px}
.rings{width:320px;height:320px}
.rings:before{width:240px;height:240px}
.rings:after{width:160px;height:160px}
.float-card{bottom:10px}
.section,.difference,.contact{padding:80px 20px}
.section-head{display:block}
.cards{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.client-strip{padding-inline:20px}
.field-row{grid-template-columns:1fr}
.contact-form{padding:24px 18px;border-radius:16px}
footer{height:auto;padding:30px 20px;flex-direction:column;align-items:flex-start;gap:8px}
footer p{margin:0}
.benefits>div{grid-template-columns:35px 1fr}
.support-hero{padding:60px 20px}
.support-copy h1{font-size:46px}
.support-window-body{padding:28px 22px}
.support-steps{padding:70px 20px 80px}
.support-steps-head{display:block}
.support-step-grid{grid-template-columns:1fr}
.support-step{min-height:0}
.security-note{padding:22px 20px}
}
