:root { --navy:#062957; --navy-deep:#031d45; --blue:#066fdc; --teal:#178f87; --ink:#102a51; --muted:#415b7a; --line:#d7e3ef; --soft:#eff7ff; --white:#fff; }
* { box-sizing:border-box; }
.top-wave { position:absolute; z-index:0; top:0; left:0; width:100%; height:285px; overflow:hidden; background:var(--navy-deep); clip-path:ellipse(78% 79% at 48% 0%); }
body { position:relative; margin:0; min-height:100vh; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; background:linear-gradient(150deg,#f9fcff 0%,#eef7ff 100%); }
.shell { position:relative; z-index:1; width:min(1430px,calc(100% - 72px)); margin:0 auto; padding:48px 0 24px; }
.hero { position:relative; display:flex; align-items:center; gap:22px; min-height:138px; margin-bottom:4px; color:white; }
.hero-mark { display:flex; width:108px; height:108px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #2694ff; border-radius:26px; color:var(--white); background:linear-gradient(145deg,#168df4,#064aa5); box-shadow:0 10px 28px #001c4d55; }
.hero-mark svg { width:58px; fill:var(--white); stroke:var(--white); stroke-width:2; }
.hero-mark strong { font-size:28px; line-height:1; }
.hero-divider { width:2px; height:102px; margin:0 18px; background:#fff; opacity:.9; }
.eyebrow { margin:0 0 4px; color:#0789ff; font-size:17px; font-weight:800; letter-spacing:.03em; }
h1 { margin:0; color:var(--white); font-size:clamp(32px,4.2vw,53px); line-height:1.05; }
.subtitle { max-width:1000px; margin:10px 0 0; color:#e7f0ff; font-size:19px; line-height:1.45; }
.hero-people { position:absolute; right:22px; bottom:11px; width:190px; height:105px; opacity:.18; }
.hero-people:before,.hero-people:after,.hero-people span { position:absolute; display:block; border-radius:50%; background:#d8e9ff; content:""; }
.hero-people:before { top:0; left:73px; width:47px; height:47px; }.hero-people:after { top:20px; left:16px; width:38px; height:38px; }.hero-people span { top:20px; right:8px; width:38px; height:38px; }
.hero-people i { position:absolute; left:50px; bottom:0; width:94px; height:69px; border-radius:52px 52px 0 0; background:#d8e9ff; }.hero-people b { position:absolute; left:0; bottom:0; width:50px; height:48px; border-radius:28px 28px 0 0; background:#d8e9ff; }.hero-people b:after { position:absolute; right:-142px; width:50px; height:48px; border-radius:28px 28px 0 0; background:#d8e9ff; content:""; }
.panel { position:relative; z-index:1; padding:32px 38px 28px; border:1px solid #ccd9e9; border-radius:20px; background:linear-gradient(145deg,#fff,#fbfdff); box-shadow:0 16px 38px #05326c25; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.heading-title { display:flex; align-items:center; gap:22px; }.heading-icon { display:grid; width:78px; height:78px; place-items:center; border-radius:50%; background:#e4f2ff; }.heading-icon svg { width:48px; fill:#0879dd; stroke:#0879dd; stroke-width:1.5; }
h2 { margin:0; color:var(--ink); font-size:31px; }.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:18px; }
.format-badge { display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:24px; color:#075ab9; background:#e9f5ff; font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; }.format-badge span{font-size:24px;line-height:0;}
.dropzone { display:flex; min-height:182px; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:28px; border:2px dashed #3190ed; border-radius:15px; color:var(--ink); background:#f3faff; text-align:center; cursor:pointer; transition:.2s ease; }
.dropzone:hover,.dropzone.dragging { border-color:#005fc7; background:#eaf6ff; transform:translateY(-1px); }
.dropzone input { display:none; }
.upload-icon { width:74px; height:74px; fill:none; stroke:#0879dd; stroke-width:6; }.dropzone strong { max-width:90%; font-size:21px; }.dropzone small { color:var(--muted); font-size:16px; }
.privacy-note { display:flex; align-items:center; gap:14px; margin:18px 0; padding:12px 16px; border-radius:10px; color:#074d9f; background:#dceeff; font-size:15px; line-height:1.45; }.privacy-note span { color:white; font-size:16px; line-height:1; }
.info-icon { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:#0879dd; font-weight:800; }
.privacy-note p { margin:0; }
button { display:flex; width:100%; min-height:64px; align-items:center; justify-content:center; gap:28px; border:0; border-radius:13px; color:var(--white); background:linear-gradient(100deg,#0660ca,#064895); font:inherit; font-size:22px; font-weight:700; cursor:pointer; transition:.2s ease; }
button:not(:disabled):hover { background:linear-gradient(100deg,#0877e8,#0755a8); transform:translateY(-1px); box-shadow:0 8px 18px #15324b2b; }
button:disabled { cursor:not-allowed; opacity:.42; }
.spinner { display:none; width:17px; height:17px; border:2px solid #ffffff66; border-top-color:var(--white); border-radius:50%; animation:spin .7s linear infinite; }
button.loading .spinner { display:inline-block; }
button.loading .button-label { opacity:.75; }
@keyframes spin { to { transform:rotate(360deg); } }
.status { min-height:22px; margin-top:16px; text-align:center; font-size:14px; }
.status.success { color:#187b69; } .status.error { color:#b04444; }
.pdf-icon { display:grid; width:35px; height:36px; place-items:center; border:2px solid white; border-radius:3px; font-size:12px; line-height:1; }.arrow { font-size:40px; font-weight:300; line-height:0; }.features { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:22px; }.features article { display:flex; align-items:center; gap:18px; min-height:155px; padding:22px 28px; border:1px solid var(--line); border-bottom:5px solid var(--blue); border-radius:18px; background:#fff; box-shadow:0 7px 18px #15324b16; }.features article.feature-green{border-bottom-color:#0bb66c}.features article.feature-purple{border-bottom-color:#6f22c9}.feature-icon { display:grid; flex:none; width:62px; height:62px; place-items:center; border-radius:50%; color:white; background:#086dd5; font-size:34px; }.people-icon svg{width:42px;fill:white;stroke:white;stroke-width:2}.feature-green .feature-icon{background:#09a96b}.feature-purple .feature-icon{background:#6921bd}.features b { color:var(--blue); font-size:20px; letter-spacing:.02em; }.feature-green b{color:#079b62}.feature-purple b{color:#6921bd}.features h3 { margin:4px 0 5px; color:var(--ink); font-size:18px; }.features p { margin:0; color:var(--muted); font-size:15px; line-height:1.45; }footer { display:flex; align-items:center; gap:9px; min-height:78px; padding:0 calc((100% - min(1430px,calc(100% - 72px)))/2); color:#dceaff; background:var(--navy-deep); font-size:15px; }footer span{color:white}footer i{flex:1;height:1px;background:#a6c1e844}.bottom-wave{height:42px;margin-top:-1px;background:var(--navy-deep);clip-path:ellipse(78% 85% at 52% 100%);}
@media (max-width:900px) { .hero-people{display:none}.features{grid-template-columns:1fr}.shell{width:min(720px,calc(100% - 32px));}.hero-divider{margin:0 5px}.panel-heading p{font-size:15px}.heading-title{gap:12px} }
@media (max-width:600px) { .shell{padding-top:24px}.hero{gap:10px;min-height:180px}.hero-mark{width:75px;height:75px;border-radius:18px}.hero-mark svg{width:42px}.hero-mark strong{font-size:20px}.hero-divider{height:76px;margin:0 3px}.eyebrow{font-size:12px}h1{font-size:26px}.subtitle{font-size:14px}.panel{padding:20px}.panel-heading{flex-direction:column}.heading-icon{width:55px;height:55px}.heading-icon svg{width:34px}h2{font-size:24px}.dropzone strong{font-size:16px}.dropzone small{font-size:13px}button{font-size:17px}.features article{padding:16px}.format-badge{align-self:flex-end}footer{padding:0 16px;font-size:12px}}
