:root { --ink:#13231f; --muted:#63716d; --green:#075e54; --lime:#d9ff57; --paper:#f7faf5; --line:#dfe6df; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.container { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:10px 16px; background:var(--lime); color:var(--ink); border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
:focus-visible { outline:3px solid #e2ff72; outline-offset:3px; }
.site-header { position:absolute; z-index:5; width:100%; top:0; border-bottom:1px solid rgba(255,255,255,.12); color:white; }
.header-content { height:82px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; text-decoration:none; }
.brand img { display:block; width:auto; height:36px; max-width:100%; }
nav { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:600; }
nav a { text-decoration:none; }
nav a:not(.nav-cta):hover { color:var(--lime); }
.nav-cta { padding:11px 17px; border:1px solid rgba(255,255,255,.5); border-radius:8px; }
.hero { min-height:760px; padding:154px 0 100px; color:white; background:radial-gradient(circle at 9% 83%, rgba(217,255,87,.1), transparent 28%), linear-gradient(120deg,#063f3a,#075e54 60%,#064b45); position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:530px; height:530px; border:1px solid rgba(255,255,255,.06); border-radius:50%; right:-180px; top:100px; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.02); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 490px; gap:80px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--lime); text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:700; }
.eyebrow span { width:22px; height:2px; background:currentColor; }
.hero h1,.section-intro h2 { font:700 clamp(48px,6vw,76px)/1.03 ui-sans-serif,system-ui,sans-serif; letter-spacing:-4px; margin:22px 0 24px; }
em { color:var(--lime); font-style:normal; }
.hero-description { max-width:580px; margin:0 0 26px; color:#c6d6d1; font-size:18px; line-height:1.65; }
.text-link { display:inline-flex; gap:12px; font-weight:700; text-underline-offset:7px; text-decoration-color:var(--lime); }
.text-link span { color:var(--lime); }
.trust-list { display:flex; flex-wrap:wrap; gap:25px; margin-top:58px; font-size:12px; color:#b6cbc5; }
.trust-list b { display:inline-grid; place-items:center; margin-right:5px; color:var(--ink); background:var(--lime); width:17px; height:17px; border-radius:50%; }
.generator-card { background:white; color:var(--ink); padding:32px; border-radius:18px; box-shadow:0 30px 80px rgba(0,20,16,.28); }
.card-heading { display:flex; gap:15px; align-items:center; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.card-icon { display:grid; place-items:center; background:var(--lime); border-radius:10px; width:43px; height:43px; font-size:22px; }
.card-heading p { margin:0 0 3px; color:var(--green); font-size:10px; letter-spacing:1.7px; font-weight:700; }
.card-heading h2 { margin:0; font:700 25px ui-sans-serif,system-ui,sans-serif; letter-spacing:-1px; }
.field-group { position:relative; margin-bottom:21px; }
label { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
.phone-input,.country-input { display:flex; align-items:center; border:1px solid #ccd6d1; border-radius:9px; overflow:hidden; transition:.2s; }
.phone-input:focus-within,.country-input:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(7,94,84,.12); }
.phone-input span { padding:0 13px; border-right:1px solid var(--line); font-size:13px; white-space:nowrap; }
input,textarea,button { font:inherit; }
.phone-input input,.country-input input { width:100%; padding:14px; border:0; outline:0; color:var(--ink); background:white; }
.country-input>span { padding:0 14px 0 0; color:var(--muted); pointer-events:none; }
textarea { width:100%; padding:13px; border:1px solid #ccd6d1; border-radius:9px; resize:vertical; color:var(--ink); }
textarea:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(7,94,84,.12); }
small { display:block; margin-top:6px; color:#85908d; font-size:11px; }
.label-row { display:flex; justify-content:space-between; }
.label-row span { color:#929c98; font-size:11px; }
.character-count { position:absolute; right:9px; bottom:9px; margin:0; }
.error { color:#b42318; min-height:0; }
.field-group:has([aria-invalid="true"]) .phone-input,.field-group:has([aria-invalid="true"]) .country-input { border-color:#b42318; }
.format-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0; margin:0 0 21px; border:0; }
.format-group legend { margin-bottom:8px; font-size:13px; font-weight:700; }
.format-group label { display:flex; align-items:center; gap:8px; min-width:0; margin:0; padding:11px; border:1px solid #ccd6d1; border-radius:9px; cursor:pointer; }
.format-group label:has(input:checked) { border-color:var(--green); background:#eff8f1; }
.format-group input { accent-color:var(--green); }
.format-group span { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.primary-button,.open-button { width:100%; min-height:50px; display:flex; justify-content:center; align-items:center; gap:9px; border:0; border-radius:9px; color:white; background:var(--green); font-weight:700; cursor:pointer; text-decoration:none; }
.primary-button:hover,.open-button:hover { background:#04483f; }
.result { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.success-title { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.success-title>span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e5f7a9; color:var(--green); font-weight:bold; }
.success-title small { margin-top:2px; }
.result-link { display:flex; margin-bottom:10px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.result-link input { min-width:0; flex:1; border:0; background:#f6f8f6; padding:11px; color:#54615d; }
.result-link button { border:0; border-left:1px solid var(--line); color:var(--green); background:white; padding:0 13px; font-weight:700; cursor:pointer; }
.open-button { min-height:44px; background:#20a967; }
.benefits { padding:110px 0; background:#f8faf7; }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:55px; }
.section-intro .eyebrow { color:var(--green); }
.section-intro h2 { font-size:51px; margin:18px 0 0; }
.section-intro h2 em { color:var(--green); }
.section-intro>p { max-width:370px; color:var(--muted); line-height:1.7; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9e1dc; }
.benefit-grid article { position:relative; padding:42px 50px 48px 0; }
.benefit-grid article+article { padding-left:50px; border-left:1px solid #d9e1dc; }
.benefit-number { position:absolute; right:20px; top:25px; color:#b7c2bc; font-size:10px; font-weight:700; }
.benefit-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:9px; background:#e9f2c8; color:var(--green); font-size:21px; }
.benefit-grid h3 { margin:24px 0 10px; font:700 18px ui-sans-serif,system-ui,sans-serif; }
.benefit-grid p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
.commercial-banner { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:45px; padding:45px 52px; border-radius:15px; color:white; background:linear-gradient(110deg,#064b45,#087467); }
.commercial-banner p { margin:0 0 8px; color:var(--lime); font-size:10px; font-weight:700; letter-spacing:1.8px; }
.commercial-banner h2 { margin:0 0 5px; font:700 28px ui-sans-serif,system-ui,sans-serif; letter-spacing:-1px; }
.commercial-banner div>span { color:#bad0ca; font-size:14px; }
.banner-actions { display:flex; align-items:center; gap:22px; white-space:nowrap; }
.banner-actions>a { font-size:13px; font-weight:700; text-underline-offset:5px; }
.light-button { padding:14px 20px; border-radius:8px; text-decoration:none; color:var(--ink); background:var(--lime); }
footer { background:#0d2420; color:#b8c7c2; }
.footer-content { min-height:115px; display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:12px; }
.brand-light img { height:32px; }
.footer-content>p { flex:1; margin-left:22px; }
.footer-content>div { display:flex; gap:25px; }
.footer-content a { text-underline-offset:4px; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; gap:55px; }.hero-copy { text-align:center; }.eyebrow,.trust-list { justify-content:center; }.hero-description { margin-inline:auto; }.generator-card { width:min(100%,560px); margin:auto; }.section-intro { align-items:start; flex-direction:column; }.commercial-banner { align-items:flex-start; flex-direction:column; }.benefit-grid article { padding-right:25px!important; padding-left:25px!important; } }
@media (max-width:650px) { .container { width:min(100% - 32px,1160px); }.header-content { height:70px; }.brand img { height:32px; }.brand-light img { height:30px; }.site-header nav>a:not(.nav-cta) { display:none; }.nav-cta { padding:9px 11px; }.hero { padding:125px 0 72px; }.hero h1 { font-size:47px; letter-spacing:-3px; }.hero-description { font-size:16px; }.trust-list { gap:12px; margin-top:40px; }.generator-card { padding:23px 20px; }.benefits { padding:75px 0; }.section-intro h2 { font-size:39px; letter-spacing:-2.5px; }.benefit-grid { grid-template-columns:1fr; }.benefit-grid article { padding:32px 12px!important; border-left:0!important; border-bottom:1px solid #d9e1dc; }.commercial-banner { padding:32px 25px; }.banner-actions { align-items:stretch; flex-direction:column; width:100%; text-align:center; }.footer-content { padding:35px 0; align-items:flex-start; flex-direction:column; }.footer-content>p { margin:0; }.footer-content>div { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: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; }
.language-picker select { padding:9px 28px 9px 10px; border:1px solid rgba(255,255,255,.5); border-radius:8px; color:white; background:#075e54; font:600 13px ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.history { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.history-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.history h3 { margin:0; font:700 15px ui-sans-serif,system-ui,sans-serif; }
.history-heading small { max-width:310px; line-height:1.4; }
.history-heading button { padding:4px; border:0; color:var(--green); background:transparent; font-size:12px; cursor:pointer; }
.history>p { margin:10px 0 0; color:var(--muted); font-size:12px; }
.history ul { display:grid; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
.history li { display:grid; gap:7px; min-width:0; padding:9px 10px; border-radius:7px; background:#f3f7f3; font-size:11px; }
.history li a { flex:1; overflow:hidden; color:var(--green); text-overflow:ellipsis; white-space:nowrap; }
.history li button { border:0; color:var(--muted); background:transparent; cursor:pointer; }
.history-actions { display:flex; gap:5px; }
.history-actions button { padding:3px 7px; border:1px solid var(--line)!important; border-radius:5px; background:white!important; font-size:10px; }
.history-actions button:hover { color:var(--green); border-color:var(--green)!important; }
.view-count { white-space:nowrap; }
.privacy-button { padding:0; border:0; color:inherit; background:transparent; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
dialog { width:min(680px,calc(100% - 32px)); max-height:min(760px,calc(100vh - 32px)); padding:28px; border:0; border-radius:14px; color:var(--ink); box-shadow:0 24px 70px rgba(0,20,16,.35); }
dialog::backdrop { background:rgba(5,31,27,.65); }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-heading h2 { margin:0; font:700 22px ui-sans-serif,system-ui,sans-serif; }
.dialog-heading button { padding:0; border:0; color:var(--muted); background:transparent; font-size:25px; cursor:pointer; }
dialog p { color:var(--muted); line-height:1.6; }
.privacy-intro { margin:12px 0 20px; }
.privacy-sections { display:grid; gap:16px; }
.privacy-sections section { padding-left:15px; border-left:3px solid #dce9a9; }
.privacy-sections h3 { margin:0 0 4px; font:700 14px ui-sans-serif,system-ui,sans-serif; }
.privacy-sections p { margin:0; font-size:13px; }
.privacy-actions { display:flex; align-items:center; gap:15px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.privacy-actions button { padding:10px 14px; border:1px solid var(--green); border-radius:8px; color:var(--green); background:white; font-weight:700; cursor:pointer; }
.privacy-actions button:hover { color:white; background:var(--green); }
.privacy-actions span { color:var(--green); font-size:12px; }
@media (max-width:650px) { .site-header nav { gap:8px; }.site-header .nav-cta { display:none; }.language-picker select { max-width:105px; }.footer-content>div { align-items:flex-start; flex-direction:column; gap:14px; } }