:root { color-scheme: light; --blue:#123b68; --green:#00a651; --muted:#667085; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Poppins,Arial,sans-serif; color:#152238; background:#f4f7fa; }
.header { height:82px; padding:12px clamp(20px,6vw,90px); background:#fff; border-bottom:1px solid #e7ebef; }
.header img { height:58px; max-width:190px; object-fit:contain; }
.layout { width:calc(100% - 32px); max-width:440px; margin:48px auto; display:grid; grid-template-columns:minmax(0,440px) 0fr; gap:0; align-items:start; transition:max-width .8s cubic-bezier(.22,1,.36,1),grid-template-columns .8s cubic-bezier(.22,1,.36,1),gap .8s ease; }
.form-card { grid-column:1; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.layout.has-result { max-width:1180px; grid-template-columns:minmax(320px,440px) minmax(0,1fr); gap:28px; }
.layout.has-result .form-card { grid-column:1; }
.card { background:#fff; border-radius:20px; padding:32px; box-shadow:0 14px 38px rgba(18,59,104,.09); transition:box-shadow .35s ease,transform .35s ease; }
.card:hover { box-shadow:0 20px 48px rgba(18,59,104,.14); }
.eyebrow { margin:0 0 5px; color:var(--green); font-size:12px; font-weight:700; letter-spacing:.12em; }
h1,h2 { color:var(--blue); margin:0 0 10px; } h1 { font-size:32px; } h2 { font-size:25px; }
.intro { margin:0 0 26px; color:var(--muted); }
label,legend { display:block; margin:18px 0 8px; font-weight:600; }
input[type="number"],input[type="text"] { width:100%; padding:13px 14px; font:inherit; border:1px solid #cfd7df; border-radius:10px; outline:none; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,166,81,.12); }
small { display:block; margin-top:6px; color:var(--muted); }
fieldset { border:0; padding:0; margin:0; }
.terms { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.terms label { margin:0; }
.terms input { position:absolute; opacity:0; }
.terms span { display:block; padding:12px 5px; text-align:center; border:1px solid #ccd5de; border-radius:10px; cursor:pointer; transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease; }
.terms span:hover { transform:translateY(-2px); box-shadow:0 7px 16px rgba(18,59,104,.12); }
.terms input:checked + span { color:#fff; background:var(--blue); border-color:var(--blue); }
button,.download { display:block; width:100%; margin-top:26px; border:0; border-radius:10px; padding:14px; font:600 16px Poppins; color:#fff; background:var(--green); cursor:pointer; text-align:center; text-decoration:none; transition:transform .25s ease,box-shadow .25s ease,filter .25s ease; }
button:hover,.download:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,166,81,.28); filter:brightness(1.04); }
button:active,.download:active { transform:translateY(0) scale(.98); }
button:disabled { opacity:.65; cursor:wait; }
.status { min-height:24px; margin:12px 0 0; color:var(--muted); font-size:14px; }
.status.error { color:#b42318; }
.result-card { grid-column:2; opacity:0; transform:translateX(55px); }
.layout.has-result .result-card { animation:showResult .85s .2s cubic-bezier(.22,1,.36,1) forwards; }
.result-heading { display:flex; gap:20px; align-items:center; justify-content:space-between; }
.download { width:auto; margin:0; padding:10px 18px; }
iframe { width:100%; height:650px; margin-top:20px; border:1px solid #e4e9ee; border-radius:10px; }
.loading-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(9,29,49,.52); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; }
.loading-modal.active { opacity:1; visibility:visible; }
.loading-card { width:min(390px,100%); padding:34px 28px; border-radius:20px; text-align:center; background:#fff; box-shadow:0 25px 70px rgba(9,29,49,.25); transform:translateY(18px) scale(.96); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.loading-modal.active .loading-card { transform:translateY(0) scale(1); }
.loading-card h2 { margin-top:20px; font-size:23px; }
.loading-card p { margin:7px 0 0; color:var(--muted); }
.spinner { width:54px; height:54px; margin:auto; border:5px solid #dfeee7; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes showResult { to { opacity:1; transform:translateX(0); } }
@media (max-width:850px) { .layout,.layout.has-result { grid-template-columns:1fr; gap:24px; margin:24px auto; } .form-card,.layout.has-result .form-card,.result-card { grid-column:1; } .layout.has-result .form-card { animation:moveFormMobile .6s ease both; } .layout.has-result .result-card { animation-delay:.1s; } .card { padding:24px; } iframe { height:560px; } }
@media (max-width:430px) { .terms { grid-template-columns:1fr; } .result-heading { align-items:flex-start; flex-direction:column; } .download { width:100%; } }
@keyframes moveFormMobile { from { transform:translateY(18px); opacity:.85; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important; } }