:root { --navy:#071b39; --blue:#0d6efd; --sky:#2998ff; --coral:#ff7e6e; --green:#1f8a5b; --muted:#66748a; --line:#dce5f1; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--navy); background:#f5f7fb; }
* { box-sizing:border-box; }
html { min-width:320px; overflow-x:clip; scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:radial-gradient(circle at 95% 2%,rgba(41,152,255,.12),transparent 31rem),#f5f7fb; }
a { color:inherit; }
.widgets-header,main,.widgets-footer { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.widgets-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.widgets-brand { display:flex; }.widgets-brand img { width:150px; height:auto; display:block; }
.widgets-header nav { display:flex; gap:24px; align-items:center; }.widgets-header nav a { color:#627086; font-size:14px; font-weight:500; text-decoration:none; }
.widgets-header .header-cta { padding:12px 17px; color:#fff; background:var(--navy); border-radius:999px; }
main { padding:18px 0 72px; }
.widgets-hero { min-height:540px; padding:58px 62px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:70px; align-items:center; overflow:hidden; background:linear-gradient(125deg,#fff6f2,#f3f8ff 63%,#e3f1ff); border:1px solid rgba(7,27,57,.08); border-radius:38px; box-shadow:0 24px 68px rgba(7,27,57,.08); }
.eyebrow { margin:0; color:#0867ee; font-size:12px; font-weight:750; letter-spacing:.12em; }
h1 { max-width:620px; margin:16px 0 0; font-size:clamp(48px,5.4vw,72px); line-height:.98; letter-spacing:-.055em; }
.hero-copy { max-width:590px; margin:24px 0 0; color:#5c6a7f; font-size:18px; line-height:1.55; }
.hero-actions { margin-top:28px; display:flex; gap:11px; flex-wrap:wrap; }.primary-button,.secondary-button { min-height:50px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:14px; font-weight:650; text-decoration:none; }.primary-button { color:#fff; background:var(--blue); box-shadow:0 12px 27px rgba(13,110,253,.22); }.secondary-button { background:rgba(255,255,255,.7); border:1px solid rgba(7,27,57,.14); }
.hero-points { margin:25px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:13px; list-style:none; color:#67758a; font-size:12px; }.hero-points li::before { content:"✓"; margin-right:6px; color:var(--blue); }
.widget-preview { padding:18px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8); border-radius:28px; box-shadow:0 23px 55px rgba(7,27,57,.14); transform:rotate(1deg); }.widget-preview__top { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px; }.widget-preview__top img { width:128px; }.widget-preview__top span { color:var(--green); font-size:12px; font-weight:650; }.widget-preview__screen { padding:26px; color:#fff; background:linear-gradient(145deg,#082342,#0c4e88); border-radius:21px; }.preview-kicker { display:block; color:#95b9da; font-size:10px; letter-spacing:.1em; }.widget-preview__screen strong { display:block; margin-top:12px; font-size:39px; }.widget-preview__screen small { color:#aec2d5; }.preview-input { height:54px; margin-top:24px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; color:var(--navy); background:#fff; border-radius:14px; }.preview-range { height:5px; margin-top:15px; background:#62748a; border-radius:999px; }.preview-range i { display:block; width:42%; height:100%; background:var(--sky); border-radius:inherit; }.widget-preview>p { margin:14px 5px 2px; color:#68758a; font-size:12px; line-height:1.45; }
.section-heading { grid-column:1/-1; }.section-heading h2,.catalog-head h2,.how-it-works h2,.license-note h2 { margin:8px 0 0; font-size:clamp(34px,4vw,50px); letter-spacing:-.045em; }
.plans { margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }.plan-card { padding:34px; border:1px solid var(--line); border-radius:28px; background:#fff; }.plan-card--paid { color:#fff; background:linear-gradient(145deg,#071b39,#0d4679); border-color:transparent; }.plan-badge { display:inline-flex; padding:7px 11px; color:#0875e8; background:#e7f2ff; border-radius:999px; font-size:11px; font-weight:650; }.plan-card--paid .plan-badge { color:#071b39; background:var(--coral); }.plan-card h3 { margin:19px 0 0; font-size:27px; }.plan-card p { color:#627086; line-height:1.55; }.plan-card--paid p { color:#b8c7d9; }.plan-card ul { margin:22px 0; padding:0; display:grid; gap:10px; list-style:none; }.plan-card li::before { content:"✓"; margin-right:9px; color:var(--green); }.plan-card--paid li::before { color:#7bc2ff; }.plan-card>a { min-height:47px; padding:0 18px; display:inline-flex; align-items:center; color:#fff; background:var(--blue); border-radius:999px; font-size:14px; font-weight:650; text-decoration:none; }.plan-card--paid>a { color:var(--navy); background:var(--coral); }
.how-it-works { margin-top:34px; padding:38px; display:grid; grid-template-columns:.75fr 1.25fr; gap:48px; background:#fff; border:1px solid var(--line); border-radius:28px; }.how-it-works ol { margin:0; padding:0; display:grid; gap:18px; list-style:none; }.how-it-works li { display:grid; grid-template-columns:42px 1fr; gap:13px; }.how-it-works li>span { width:42px; height:42px; display:grid; place-items:center; color:#0875e8; background:#e8f3ff; border-radius:13px; font-weight:700; }.how-it-works strong { font-size:16px; }.how-it-works li p { margin:4px 0 0; color:#69768a; font-size:14px; line-height:1.45; }
.widget-catalog { margin-top:60px; }.catalog-head { display:flex; align-items:end; justify-content:space-between; gap:20px; }.widget-search input { width:min(330px,42vw); height:48px; padding:0 18px; border:1px solid var(--line); border-radius:999px; outline:none; font:inherit; background:#fff; }.widget-search input:focus { border-color:#7ab9ff; box-shadow:0 0 0 4px rgba(13,110,253,.1); }.category-filter { margin-top:25px; display:flex; gap:8px; flex-wrap:wrap; }.category-filter button { min-height:39px; padding:0 14px; color:#5f6d82; background:#fff; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13px; cursor:pointer; }.category-filter button.is-active { color:#fff; background:var(--navy); border-color:var(--navy); }.widget-grid { margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.widget-card { min-height:210px; padding:23px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; transition:transform .18s ease,box-shadow .18s ease; }.widget-card:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(7,27,57,.08); }.widget-card small { color:#0875e8; font-size:11px; letter-spacing:.07em; }.widget-card h3 { margin:12px 0 0; font-size:20px; line-height:1.15; }.widget-card p { margin:10px 0 20px; color:#6a778b; font-size:13px; line-height:1.45; }.widget-card button { min-height:43px; margin-top:auto; color:#fff; background:var(--blue); border:0; border-radius:13px; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }.empty-state { padding:30px; text-align:center; color:#6a778b; background:#fff; border-radius:20px; }
.license-note { margin-top:42px; padding:35px 38px; display:grid; grid-template-columns:1fr 1.2fr; gap:42px; align-items:center; color:#fff; background:linear-gradient(135deg,#0a2c51,#0c5796); border-radius:28px; }.license-note .eyebrow { color:#86c7ff; }.license-note h2 { font-size:33px; }.license-note>p { margin:0; color:#c1d0df; line-height:1.6; }
.widgets-footer { margin-bottom:24px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:28px; }.widgets-footer__main { padding:30px 34px; display:grid; grid-template-columns:180px 1fr auto; gap:35px; align-items:center; }.widgets-footer img { width:150px; }.widgets-footer nav { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }.widgets-footer a { color:#59677c; font-size:13px; font-weight:450; text-decoration:none; }.widgets-footer__contacts { display:grid; gap:8px; }.widgets-footer>p { margin:0; padding:15px 34px 18px; color:#7b8698; font-size:12px; line-height:1.55; border-top:1px solid var(--line); }.widgets-footer>p a { text-decoration:underline; text-underline-offset:2px; }
.code-modal[hidden] { display:none!important; }.code-modal { position:fixed; inset:0; z-index:1000; padding:20px; display:grid; place-items:center; background:rgba(7,27,57,.58); }.code-modal>section { position:relative; width:min(650px,100%); padding:30px; background:#fff; border-radius:26px; box-shadow:0 24px 80px rgba(7,27,57,.3); }.modal-close { position:absolute; top:14px; right:14px; width:40px; height:40px; border:0; border-radius:50%; color:#68758a; background:#edf2f7; font-size:27px; cursor:pointer; }.code-modal h2 { margin:9px 45px 0 0; font-size:29px; }.modal-copy { color:#68758a; }.code-modal textarea { width:100%; height:235px; padding:16px; resize:none; color:#dcecff; background:#081e39; border:0; border-radius:16px; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.modal-actions { margin-top:14px; display:flex; gap:10px; }.modal-actions button,.modal-actions a { min-height:46px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:13px; font:inherit; font-size:13px; font-weight:650; text-decoration:none; cursor:pointer; }.copy-code { color:#fff; background:var(--blue); }.modal-actions a { color:var(--navy); background:#edf3f9; }.copy-status { min-height:19px; margin:10px 0 0; color:var(--green); font-size:13px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.embed-format-tabs{display:flex;gap:6px;margin-top:18px;padding:5px;border-radius:14px;background:#edf3f9}.embed-format-tabs button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;color:#5f6d82;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.embed-format-tabs button[aria-pressed="true"]{background:#fff;color:#075dcb;box-shadow:0 3px 12px rgba(7,27,57,.1)}
@media(max-width:900px){.widgets-hero{grid-template-columns:1fr;padding:42px}.widget-preview{max-width:560px}.widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.widgets-footer__main{grid-template-columns:1fr 1fr}.widgets-footer__contacts{grid-column:1/-1}.license-note{grid-template-columns:1fr}.how-it-works{grid-template-columns:1fr}}
@media(max-width:640px){.widgets-header,main,.widgets-footer{width:calc(100% - 24px)}.widgets-header{min-height:66px}.widgets-brand img{width:112px}.widgets-header nav a:not(.header-cta){display:none}.widgets-header .header-cta{font-size:12px}.widgets-hero{min-height:0;padding:30px 21px;border-radius:26px;gap:35px}h1{font-size:43px}.hero-copy{font-size:16px}.hero-actions>a{width:100%}.widget-preview{padding:13px;border-radius:22px;transform:none}.widget-preview__screen{padding:21px}.plans{grid-template-columns:1fr}.section-heading{grid-column:auto}.plan-card{padding:25px 21px}.how-it-works{padding:27px 21px}.catalog-head{align-items:stretch;flex-direction:column}.widget-search input{width:100%}.widget-grid{grid-template-columns:1fr}.license-note{padding:28px 22px}.license-note h2{font-size:28px}.widgets-footer__main{grid-template-columns:1fr;padding:27px 22px}.widgets-footer nav{grid-template-columns:1fr 1fr}.widgets-footer>p{padding:15px 22px 20px}.code-modal{align-items:end;padding:0}.code-modal>section{padding:26px 18px 20px;border-radius:24px 24px 0 0}.modal-actions{flex-direction:column}.modal-actions>*{width:100%}}