@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root { --ink:#191b24; --muted:#797e8c; --line:#e1e3e9; --purple:#5c5ce9; --green:#176c52; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:#f5f6f8; font-family:'DM Sans',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body::before { position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 10% 0,rgba(92,92,233,.07),transparent 26rem),radial-gradient(circle at 90% 50%,rgba(23,108,82,.055),transparent 25rem); content:''; }
a { color:inherit; text-decoration:none; }
svg { display:block; fill:currentColor; }
.header { display:flex; width:min(1160px,calc(100% - 48px)); height:84px; margin:0 auto; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; }
.brand span { display:grid; width:32px; height:32px; place-items:center; color:white; font:700 15px Manrope,sans-serif; border-radius:10px; background:var(--ink); }
.brand strong { font:700 20px Manrope,sans-serif; letter-spacing:-.8px; }
.header-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; }
.header-note i { width:6px; height:6px; border-radius:50%; background:#4aa384; box-shadow:0 0 0 4px #e2f2ec; }
main { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:68px 0 75px; }
.intro { margin-bottom:34px; }
.eyebrow { display:block; margin-bottom:10px; color:var(--purple); font-size:9px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }
.intro h1 { margin:0; font:600 clamp(30px,4vw,43px)/1.15 Manrope,sans-serif; letter-spacing:-1.8px; }
.intro p { margin:11px 0 0; color:var(--muted); font-size:13px; }
.designs { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.design-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 18px 50px rgba(37,40,57,.06); transition:transform .2s,box-shadow .2s; }
.design-card:hover { transform:translateY(-4px); box-shadow:0 25px 65px rgba(37,40,57,.11); }
.preview { display:grid; height:310px; padding:28px; place-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.airy-preview { background:linear-gradient(145deg,#f4f3fc,#f8f9fb); }
.mini-nav { position:absolute; top:18px; right:22px; left:22px; display:flex; align-items:center; gap:8px; }
.preview { position:relative; }
.mini-nav i { width:18px; height:18px; border-radius:6px; background:#262936; }
.mini-nav span { width:38px; height:5px; border-radius:5px; background:#c7c9d3; }
.mini-nav b { width:48px; height:5px; margin-left:auto; border-radius:5px; background:#d7d9df; }
.airy-body { display:grid; width:88%; grid-template-columns:1.6fr .72fr; gap:9px; transform:translateY(14px); }
.airy-main { display:grid; gap:7px; }
.mini-title { width:37%; height:8px; margin:0 0 4px; border-radius:5px; background:#5c5ce9; opacity:.28; }
.mini-panel { display:grid; min-height:91px; padding:14px; gap:7px; border:1px solid #e2e3eb; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(58,60,83,.08); }
.mini-panel i { display:block; height:8px; border-radius:4px; background:#ecedf2; }
.mini-panel i:nth-child(2) { width:80%; }
.mini-panel i:nth-child(3) { width:65%; }
.mini-panel--short { min-height:52px; }
.airy-aside { padding:16px 13px; border:1px solid #e2e3eb; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(58,60,83,.08); }
.airy-aside i,.airy-aside strong,.airy-aside span,.airy-aside button { display:block; border:0; border-radius:5px; }
.airy-aside i { width:46%; height:5px; background:#c7c9d3; }
.airy-aside strong { width:78%; height:14px; margin-top:10px; background:#292c38; }
.airy-aside span { height:7px; margin-top:27px; background:#e6e7ed; }
.airy-aside button { width:100%; height:27px; margin-top:16px; background:#5c5ce9; }
.invoice-preview { background:linear-gradient(145deg,#e9ede9,#f2f3f1); }
.paper-mini { position:relative; width:69%; min-width:240px; height:275px; padding:22px 24px; background:#fffefb; box-shadow:0 16px 40px rgba(36,48,42,.14); }
.paper-accent { position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(to right,#176c52 72%,#f0a24e 72%); }
.paper-head { display:flex; align-items:center; justify-content:space-between; }
.paper-head i { width:25px; height:25px; border-radius:3px 9px 3px 3px; background:#176c52; }
.paper-head span { width:30%; height:6px; border-radius:3px; background:#2c332f; }
.paper-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:17px; padding:9px 0; border-top:1px solid #e3e7e3; border-bottom:1px solid #e3e7e3; }
.paper-meta i { height:5px; border-radius:2px; background:#d6dbd7; }
.paper-parties { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:17px 0; }
.paper-parties i { height:25px; border-left:2px solid #176c52; background:linear-gradient(#d8ddd9 0 4px,transparent 4px 9px,#eaedea 9px 13px,transparent 13px); }
.paper-parties i:first-child { border-left:0; }
.paper-lines { border-top:2px solid #2a312d; }
.paper-lines i { display:block; height:22px; border-bottom:1px solid #e6e8e5; }
.paper-lines i::after { display:block; width:30%; height:5px; padding-top:8px; background:#dfe3df; content:''; background-clip:content-box; }
.paper-total { display:flex; margin-top:10px; justify-content:flex-end; }
.paper-total span { width:35%; height:14px; border-top:1px solid #3b413e; border-bottom:5px solid #176c52; }
.paper-pay { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:13px; padding:9px; background:#f2f5f2; }
.paper-pay i { height:18px; border:1px solid #d9ded9; border-radius:3px; background:white; }
.paper-pay i:nth-child(3) { border-color:#176c52; }
.card-copy { padding:25px 26px 27px; }
.card-copy > div:first-child { display:flex; align-items:center; justify-content:space-between; }
.number { color:#a5a9b3; font:600 10px Manrope,sans-serif; }
.tag { padding:5px 8px; color:#5757cd; font-size:8px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; border-radius:99px; background:#eeeeff; }
.tag--green { color:#176c52; background:#e8f2ed; }
.tag--coral { color:#cc4d39; background:#fff0ec; }
.card-copy h2 { margin:15px 0 8px; font:600 20px Manrope,sans-serif; letter-spacing:-.6px; }
.card-copy p { min-height:45px; margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.open-link { display:flex; margin-top:20px; align-items:center; gap:7px; color:var(--purple); font-size:10px; font-weight:700; }
.design-card--invoice .open-link { color:var(--green); }
.design-card--modular { display:grid; grid-column:1/-1; grid-template-columns:1.2fr .8fr; }
.design-card--modular .preview { height:360px; border-right:1px solid var(--line); border-bottom:0; }
.design-card--modular .card-copy { display:flex; padding:34px; flex-direction:column; justify-content:center; }
.design-card--modular .open-link { color:#df5b45; }
.modular-preview { background:linear-gradient(145deg,#eef0eb,#f8f8f5); }
.mosaic-mini { display:grid; width:88%; max-width:510px; grid-template-columns:1.6fr .72fr; grid-template-rows:1fr .82fr; gap:8px; transform:rotate(-1deg); }
.mosaic-mini > div { border:1px solid #dfe3dc; border-radius:9px; background:white; box-shadow:0 9px 25px rgba(47,53,46,.08); }
.mosaic-services { grid-row:1/3; padding:14px; }
.mosaic-services span,.mosaic-payment span,.mosaic-payer span,.mosaic-total span { display:block; width:34%; height:6px; margin-bottom:14px; border-radius:4px; background:#ff6d55; }
.mosaic-services i { display:block; height:29px; border-bottom:1px solid #e6e8e4; }
.mosaic-services i::before { display:block; width:68%; height:6px; padding-top:10px; background:#e3e6e2; content:''; background-clip:content-box; }
.mosaic-payer { padding:12px; }
.mosaic-payer span { background:#5575e1; }
.mosaic-payer i { display:block; width:25px; height:25px; border-radius:8px; background:#edf1ff; }
.mosaic-payer b { display:block; width:55%; height:5px; margin-top:8px; background:#d8dcd7; }
.mosaic-total { padding:12px; }
.mosaic-total span { background:#dff35b; }
.mosaic-total strong { display:block; width:62%; height:12px; margin:10px 0; border-radius:3px; background:#242723; }
.mosaic-total button { width:100%; height:20px; border:0; border-radius:5px; background:#242723; }
.mosaic-payment { grid-column:1/-1; display:none; padding:12px; grid-template-columns:repeat(4,1fr); gap:5px; }
.mosaic-payment span { grid-column:1/-1; background:#7556c9; }
.mosaic-payment i { height:24px; border:1px solid #e2e5df; border-radius:4px; }
.open-link svg { width:14px; height:14px; transition:transform .2s; }
.design-card:hover .open-link svg { transform:translateX(3px); }
footer { display:flex; width:min(1160px,calc(100% - 48px)); height:70px; margin:0 auto; align-items:center; justify-content:space-between; color:#999da8; font-size:8px; font-weight:600; letter-spacing:1px; border-top:1px solid var(--line); }
@media(max-width:760px){.designs{grid-template-columns:1fr}.preview{height:280px}.design-card--modular{display:block;grid-column:auto}.design-card--modular .preview{height:280px;border-right:0;border-bottom:1px solid var(--line)}.design-card--modular .card-copy{display:block;padding:25px 26px 27px}.intro{margin-bottom:26px}.header,main,footer{width:calc(100% - 28px)}main{padding:45px 0 55px}.header-note{font-size:0}.header-note::after{font-size:9px;content:'03 CONCEPTS'}.card-copy p{min-height:0}}
@media(max-width:400px){.preview{height:240px;padding:18px}.paper-mini{transform:scale(.82)}.airy-body{width:100%}.mosaic-mini{width:100%}.card-copy{padding:21px}.intro p{line-height:1.5}}