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

/* Layout e tipografia adaptados do RestGo Site; identidade azul do WebRAD. */

:root { --bg:#111111; --panel:#191919; --panel2:#202020; --line:#303030; --line-bright:#414141; --text:#f2f0ed; --muted:#aaa8a5; --dim:#777572; --blue:#007acc; --blue-dark:#10283b; --cyan:#51c9e9; --green:#68dca1; --purple:#a992fa; --amber:#f1b25b; --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.7 var(--sans); } body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(70% 32% at 50% -5%,#17212b 0%,transparent 65%); } a { color:inherit; text-decoration:none } img { max-width:100%; display:block } code,pre { font-family:var(--mono) } code { font-size:.9em; color:#c8e4f5; background:#17232d; padding:.14em .36em; border-radius:4px } em { font-style:normal; color:var(--blue) } ::selection { background:var(--blue); color:#fff }
.site-header { height:80px; max-width:1280px; margin:auto; padding:0 36px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid transparent; position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.6px } .brand img { height:29px; width:29px }
.main-nav { display:flex; align-items:center; gap:30px; color:var(--muted); font-size:13px; font-weight:600 } .main-nav>a:not(.button):hover,.main-nav>a.active { color:var(--text) }
.svg-icon { width:1em; height:1em; display:block; flex:none; fill:none; stroke:currentColor }.button { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:13px; border-radius:7px; background:var(--blue); color:white; font-size:13px; font-weight:800; transition:.2s transform,.2s background; } .button:hover { background:#168de0; transform:translateY(-2px) }.button .svg-icon,.text-link .svg-icon { width:18px; height:18px; transition:transform .2s ease }.button-small .svg-icon { width:16px; height:16px }.button:hover .icon-arrow,.text-link:hover .icon-arrow,.inline-link:hover .icon-arrow { transform:translateX(3px) }.button:hover .icon-arrow-down,.text-link:hover .icon-arrow-down { transform:none }.button-small { min-height:38px; padding:0 15px; font-size:12px }.button-ghost { border:1px solid var(--line-bright); background:transparent }.button-ghost:hover { background:var(--panel2) }
.nav-toggle { display:none; width:40px; height:40px; border:0; background:transparent; padding:10px; cursor:pointer }.nav-toggle span { height:2px; width:20px; display:block; margin:5px; background:var(--text) }
.hero { max-width:1210px; min-height:670px; margin:auto; padding:92px 35px 78px; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:55px; position:relative; }.hero-copy { position:relative; z-index:2 }.eyebrow,.section-kicker { margin:0 0 17px; color:var(--muted); font:500 10px/1 var(--mono); letter-spacing:.17em; text-transform:uppercase }.eyebrow i { display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; vertical-align:middle; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue) }
h1,h2,h3,p { margin-top:0 }.hero h1 { margin-bottom:25px; font-size:clamp(45px,5.4vw,76px); letter-spacing:-.07em; line-height:1.05; font-weight:800 }.hero-text { max-width:485px; color:var(--muted); font-size:16px; line-height:1.8 }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:33px }.text-link { color:#d0cdca; font-size:13px; font-weight:700; }.text-link:hover { color:var(--blue) }.text-link span { margin-left:7px; color:var(--blue) }
.hero-visual { min-height:440px; position:relative; display:grid; place-items:center }.glow { width:250px; aspect-ratio:1; position:absolute; filter:blur(80px); opacity:.25; border-radius:50%; }.glow-cyan { background:var(--cyan); right:8%; top:0 }.glow-blue { background:var(--blue); left:5%; bottom:0 }
.terminal-card { width:min(100%,570px); z-index:1; overflow:hidden; border:1px solid #3e3e3e; border-radius:13px; background:#161616; box-shadow:0 36px 70px #0007; transform:rotate(-2.5deg); }.terminal-top { height:50px; padding:0 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; }.terminal-top>span { width:7px; height:7px; border-radius:50%; background:#5d5b58 }.terminal-top p { margin:0 0 0 8px; color:#96938f; font:10px var(--mono) }.terminal-top b { margin-left:auto; display:inline-flex; align-items:center; gap:4px; color:var(--green); font:10px var(--mono) }.terminal-body { padding:24px 25px; font:13px/2.35 var(--mono) }.terminal-body p { margin:0 }.terminal-body small { width:30px; display:inline-block; color:#555350 }.muted { color:#8a8985 }.request { color:var(--amber) }.success { color:var(--green) }.arrow { color:#aaa }.terminal-line-icon { width:1.1em; height:1.1em; display:inline-block; vertical-align:-.18em; margin-right:2px }.status-icon { width:.9em; height:.9em; display:inline-block; vertical-align:-.08em; color:currentColor }.terminal-rule { margin:13px 0; border-top:1px solid #292929 }.terminal-foot { padding:14px 25px; border-top:1px solid var(--line); color:#797773; font:10px var(--mono) }.terminal-foot>.status-icon { color:var(--green); margin-right:2px }.terminal-foot strong { float:right; color:#95928f; font-weight:400 }
.floating-card { padding:14px 19px; display:flex; align-items:center; gap:11px; position:absolute; z-index:2; border:1px solid #404040; border-radius:9px; background:#1d1d1df0; box-shadow:0 15px 28px #0007; backdrop-filter:blur(10px) }.floating-1 { left:-12px; bottom:20px }.floating-2 { right:-15px; top:22px }.icon { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; background:#232323; font-size:20px }.icon .svg-icon { width:20px; height:20px }.cyan { color:var(--cyan) }.green { color:var(--green) }.floating-card small { display:block; color:#85827e; font:9px var(--mono); letter-spacing:.06em }.floating-card b { font-size:17px }.floating-card em { font-size:11px }
.trusted { max-width:1140px; margin:0 auto; padding:28px 0; display:flex; justify-content:space-between; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#898783; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase }.trusted p { margin:0 }.trusted>div { display:flex; gap:19px; align-items:center }.dot { width:3px; height:3px; border-radius:50%; background:var(--blue) }
.section { max-width:1140px; margin:auto; padding:155px 0 }.section-label { display:flex; align-items:center; gap:12px; color:#898683; font:10px var(--mono); letter-spacing:.15em }.section-label span { color:var(--blue) }.section-label p { margin:0 }.intro-grid { margin-top:35px; display:grid; grid-template-columns:1.35fr .65fr; gap:90px; align-items:end }.intro-grid h2,.feature-heading h2,.automation h2 { margin:0; font-size:clamp(37px,4.6vw,59px); letter-spacing:-.065em; line-height:1.12 }.intro-grid p,.feature-heading p,.automation-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.9 }.intro-grid .text-link { display:block; margin-top:28px }
.route-demo { margin-top:80px; border:1px solid var(--line); border-radius:11px; background:linear-gradient(115deg,#191919,#151515); overflow:hidden }.route-label { min-height:58px; padding:0 22px; display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--line) }.route-label code,.route-bar code { color:#dedbd7; background:none; padding:0 }.route-method,.route-bar>span { padding:4px 7px; border-radius:4px; background:#103552; color:#77c4f6; font:10px var(--mono) }.route-status { margin-left:auto; display:inline-flex; align-items:center; gap:4px; color:var(--green); font:10px var(--mono) }.route-flow { padding:28px 30px; display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; gap:10px; align-items:center }.route-flow small,.route-columns small { display:block; margin-bottom:9px; color:#807e79; font:10px var(--mono); letter-spacing:.1em }.route-flow pre,.route-columns pre { margin:0; color:#bfbdb9; font:11px/1.8 var(--mono) }.response { color:#76d8bd }.flow-arrow { width:22px; height:22px; justify-self:center; color:var(--blue) }
.feature-showcase { padding-top:65px }.feature-heading { margin:34px 0 60px; display:flex; justify-content:space-between; align-items:end }.feature-heading p { width:300px; margin:0 }.product-shot,.workflow-shot,.doc-image { margin:0; overflow:hidden; border:1px solid #3a3a3a; border-radius:12px; background:#181818; box-shadow:0 24px 45px #0004 }.product-shot img,.workflow-shot img,.doc-image img { width:100%; image-rendering:auto; filter:blur(.15px); transform:translateZ(0) }.product-shot figcaption,.workflow-shot figcaption,.doc-image figcaption { padding:12px 17px; display:flex; justify-content:space-between; color:#999691; font:10px var(--mono) }.product-shot figcaption span:first-child { color:var(--cyan) }.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:48px }.feature-list article { padding-top:20px; border-top:1px solid var(--line) }.number { color:var(--blue); font:11px var(--mono) }.feature-list h3 { margin:14px 0 10px; font-size:14px; letter-spacing:.03em }.feature-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.85 }
.automation { max-width:1280px; margin:0 auto; padding:110px 70px; display:grid; grid-template-columns:.76fr 1.24fr; gap:70px; align-items:center; background:radial-gradient(circle at 25% 40%,#13283a 0,transparent 31%) }.automation-copy h2 { margin-bottom:22px }.automation-copy .button { margin-top:22px }.workflow-shot { transform:perspective(1000px) rotateY(-4deg) rotateX(1deg) }.workflow-shot figcaption { color:#aaa }
.connect { padding:132px 0 }.connect-card { padding:64px 67px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; border:1px solid #29485d; border-radius:13px; background:linear-gradient(120deg,#162634,#191919 65%); }.connect-card h2 { margin:0 0 16px; font-size:46px; line-height:1.1; letter-spacing:-.06em }.connect-card p:not(.eyebrow) { max-width:370px; color:var(--muted) }.connect-card .button { margin-top:14px }.install-code { overflow:hidden; border:1px solid #4c4544; border-radius:9px; background:#111 }.code-head { height:34px; padding:0 12px; display:flex; align-items:center; gap:5px; border-bottom:1px solid #303030 }.code-head span { height:6px; width:6px; background:#57534f; border-radius:50% }.code-head small { margin-left:7px; color:#77736f; font:9px var(--mono) }.install-code pre { margin:0; padding:23px; color:#aaa6a3; font:11px/2 var(--mono); white-space:pre-wrap }.install-code b { color:var(--blue) }
.seo-faq { padding-top:0; padding-bottom:132px }.seo-faq-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.65fr); gap:70px; margin:34px 0 54px; align-items:end }.seo-faq-heading h2 { margin:0; font-size:clamp(37px,4.6vw,59px); letter-spacing:-.065em; line-height:1.12 }.seo-faq-heading p { margin:0; color:var(--muted); font-size:15px; line-height:1.9 }.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line) }.faq-grid article { min-height:182px; padding:29px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(135deg,#191919,#151515) }.faq-grid article:nth-child(4n+1),.faq-grid article:nth-child(4n+4) { background:#171c21 }.faq-grid h3 { margin:0 0 11px; font-size:15px; letter-spacing:-.015em }.faq-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.85 }
.site-footer { max-width:1140px; margin:auto; padding:32px 0 45px; display:flex; align-items:center; border-top:1px solid var(--line); color:#85827e; font-size:11px }.site-footer p { margin:0 0 0 28px }.site-footer>div { margin-left:auto; display:flex; gap:22px }.site-footer a:hover { color:var(--text) }

:root { color-scheme:dark; --blue-light:#58b9f5; --muted:#a8aeb5; --text:#f0f2f5; }
body { -webkit-font-smoothing:antialiased; }
[id] { scroll-margin-top:24px; }
button { font:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
.svg-icon { stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
em { color:var(--blue-light); }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 18px; border-radius:6px; background:var(--blue); color:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.brand img { object-fit:contain; }
.text-link { display:inline-flex; align-items:center; gap:8px; }
.text-link:hover { color:var(--blue-light); }
.hero { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); }
.hero h1 { font-size:clamp(45px,5.3vw,72px); }
.hero-note { display:flex; align-items:center; gap:8px; margin:21px 0 0; color:#8f969e; font-size:11px; }
.hero-note .svg-icon { width:13px; height:13px; }
.floating-card em { color:var(--blue-light); }
.floating-card b { font-size:14px; white-space:nowrap; }
.floating-card small { color:#a8aeb5; }
.mini-ide { position:relative; z-index:1; width:100%; overflow:hidden; border:1px solid #454a50; border-radius:11px; background:#1e1e1e; box-shadow:0 32px 75px #0009; transform:rotate(-2.5deg); font-family:var(--sans); }
.ide-title { height:40px; padding:0 13px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #3a3a3a; background:#252526; color:#cccccc; font-size:10px; }
.ide-title small { margin:auto; color:#999; font-size:9px; }
.window-dots { display:flex; gap:7px; }
.window-dots i { width:5px; height:5px; border-radius:50%; background:#686868; }
.mini-tabs { height:38px; display:flex; align-items:center; gap:14px; padding:0 10px; border-bottom:1px solid #3a3a3a; color:#aaa; background:#2b2b2b; font-size:9px; }
.mini-tabs>span { display:flex; align-items:center; gap:5px; }
.mini-tabs .selected { height:100%; color:#e6e6e6; border-bottom:2px solid var(--blue); }
.preview-pill { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:4px 8px; border-radius:4px; background:#007acc; color:#fff; font-size:9px; white-space:nowrap; }
.mini-body { display:grid; grid-template-columns:108px minmax(0,1fr); min-height:266px; }
.mini-builder { background:#252526; border-right:1px solid #3a3a3a; padding:14px 8px; color:#b6b6b6; font-size:9px; }
.mini-builder>span { display:block; padding:4px 7px; }
.mini-builder small,.mini-palette small { display:block; margin-bottom:9px; color:#999; font-size:7px; letter-spacing:.08em; }
.tree-indent { padding-left:18px!important; }
.tree-selected { color:#fff!important; background:#094771; border-radius:3px; }
.mini-palette { margin-top:18px; border-top:1px solid #3a3a3a; padding-top:13px; }
.mini-palette>span { display:flex; justify-content:space-between; padding:5px 7px; }
.mini-palette b { font-weight:400; color:#8e9ba8; }
.mini-canvas { padding:25px 18px; display:grid; place-items:center; background-color:#1e1e1e; background-image:radial-gradient(#5555 1px,transparent 1px); background-size:12px 12px; }
.sample-page { width:100%; padding:15px 19px 20px; background:#eef4fb; color:#172b45; border-radius:3px; }
.sample-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:23px; }
.sample-nav b { font-size:14px; letter-spacing:-.04em; }
.sample-nav b span { color:var(--blue); }
.sample-nav>span { font-size:6px; color:#68788e; }
.sample-page>small { font-size:5.5px; letter-spacing:.13em; color:#617892; }
.selected-label { position:relative; margin:7px -4px 8px; padding:2px 4px; border:1px solid #007acc; font-weight:800; font-size:27px; line-height:1.1; letter-spacing:-.06em; }
.selected-label i { position:absolute; width:4px; height:4px; background:#fff; border:1px solid #007acc; }
.selected-label i:nth-child(1) { top:-3px; left:-3px; }.selected-label i:nth-child(2) { top:-3px; right:-3px; }.selected-label i:nth-child(3) { bottom:-3px; left:-3px; }.selected-label i:nth-child(4) { bottom:-3px; right:-3px; }
.sample-page p { color:#69798c; font-size:7px; margin-bottom:13px; }
.sample-button { display:inline-flex; align-items:center; gap:10px; padding:7px 10px; border-radius:4px; background:#007acc; color:#fff; font-size:7px; font-weight:700; }
.sample-button .svg-icon { width:11px; height:11px; }
.sample-line { margin-top:15px; height:2px; width:30px; background:#b5cde1; }
.ide-status { height:22px; padding:0 10px; display:flex; align-items:center; gap:16px; background:#252526; border-top:1px solid #3a3a3a; color:#aaa; font-size:7px; }
.ide-status span:last-child { margin-left:auto; }
.ide-status i,.code-card-foot i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#66d19e; margin-right:4px; }
.trusted { font-size:10px; letter-spacing:.05em; }
.intro-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:65px; }
.intro-grid h2 { font-size:clamp(36px,4.4vw,55px); }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:65px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.process-grid article { position:relative; padding:30px; background:linear-gradient(140deg,#1b2026,#161616); }
.process-grid article+article { border-left:1px solid var(--line); }
.step-number { display:block; margin-bottom:31px; color:#94a3b3; font:9px var(--mono); letter-spacing:.08em; }
.process-grid .svg-icon { width:25px; height:25px; color:var(--blue-light); margin-bottom:21px; }
.process-grid h3 { font-size:16px; margin:0 0 12px; letter-spacing:-.025em; }
.process-grid p { margin:0; max-width:270px; color:var(--muted); font-size:13px; line-height:1.85; }
.feature-showcase { padding-top:0; }
.feature-heading { gap:30px; }
.designer-figure { margin:0; overflow:hidden; border:1px solid #444; border-radius:11px; background:#1e1e1e; box-shadow:0 25px 70px #0005; }
.designer-figure .ide-title { height:40px; }
.designer-toolbar { height:42px; display:flex; align-items:center; gap:22px; padding:0 14px; border-bottom:1px solid #454545; background:#333333; color:#ccc; font-size:10px; }
.designer-tab { display:flex; align-items:center; gap:8px; align-self:stretch; border-bottom:2px solid #007acc; }
.toolbar-device { display:flex; align-items:center; gap:8px; color:#aaa; margin-left:auto; }
.toolbar-device>span { padding-left:16px; }
.designer-toolbar .preview-pill { margin-left:0; }
kbd { padding-left:5px; color:#cae9ff; font:8px var(--mono); }
.designer-workspace { display:grid; grid-template-columns:42px 164px minmax(0,1fr) 188px; min-height:390px; font-family:var(--sans); }
.activity-rail { display:flex; flex-direction:column; gap:25px; align-items:center; padding-top:18px; border-right:1px solid #454545; background:#333333; color:#a6a6a6; }
.activity-rail .svg-icon { width:20px; height:20px; }
.activity-rail .active { color:#fff; }
.designer-builder,.designer-inspector { padding:0 12px 18px; background:#252526; font-size:9px; color:#aaa; min-width:0; }
.designer-builder { border-right:1px solid #333; }.designer-inspector { border-left:1px solid #333; }
.panel-heading { height:38px; display:flex; justify-content:space-between; align-items:center; color:#ddd; font-size:10px; font-weight:700; }
.builder-search { padding:6px 8px; background:#3c3c3c; border:1px solid #454545; border-radius:3px; color:#aaa; margin-bottom:17px; font-size:8px; }
.designer-builder small,.designer-inspector>small { display:block; margin:12px 0 8px; color:#a6a6a6; font-size:8px; letter-spacing:.05em; }
.tree-row { padding:5px 6px; }
.designer-builder .palette-heading { margin-top:28px; border-top:1px solid #3a3a3a; padding-top:15px; }
.component-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.component-grid span { padding:11px 2px; display:flex; align-items:center; flex-direction:column; gap:6px; border:1px solid #414141; background:#2d2d2d; border-radius:4px; font-size:8px; }
.component-grid .svg-icon { width:17px; height:17px; color:#ccc; }
.designer-canvas { padding:38px 27px; display:grid; place-items:center; background-image:radial-gradient(#5555 1px,transparent 1px); background-size:14px 14px; min-width:0; }
.dashboard-preview { width:100%; background:#f2f5fa; color:#172b45; border:1px solid #b4c0ce; box-shadow:0 12px 26px #0003; font-family:var(--sans); }
.dashboard-nav { min-height:40px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #dce4ee; background:#fff; }
.dashboard-nav>b { font-size:10px; letter-spacing:-.03em; }
.dashboard-nav>b>i { display:inline-block; width:9px; height:9px; background:#007acc; border-radius:3px; margin-right:5px; }
.dashboard-nav>span { display:flex; align-items:center; gap:15px; color:#8290a1; font-size:6px; }
.avatar { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e3edfa; color:#007acc; font-size:6px; }
.dashboard-content { padding:24px 21px; }
.dashboard-kicker { font-size:5.5px; color:#70849c; letter-spacing:.13em; }
.dashboard-content>h3 { position:relative; padding:3px 5px; margin:7px -5px 8px; border:1px solid #007acc; font-size:23px; font-weight:800; letter-spacing:-.06em; line-height:1.2; }
.selection-corner { position:absolute; width:4px; height:4px; right:-3px; bottom:-3px; background:#fff; border:1px solid #007acc; }
.dashboard-content>p { font-size:7px; color:#8390a2; margin-bottom:21px; }
.dashboard-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.dashboard-cards>div { padding:11px; background:#fff; border:1px solid #e0e7ef; border-radius:5px; }
.dashboard-cards small { display:block; font-size:6px; color:#6f7c8e; }
.dashboard-cards b { display:block; margin-top:5px; font-size:22px; letter-spacing:-.07em; }
.dashboard-cards b>span { font-size:5px; color:#8a97a7; font-weight:400; letter-spacing:0; margin-left:5px; }
.mini-bars { height:23px; margin-top:8px; display:flex; gap:5px; align-items:end; }
.mini-bars i { width:8px; height:40%; border-radius:2px 2px 0 0; background:#7fc4f0; }
.mini-bars i:nth-child(2n) { height:70%; }.mini-bars i:nth-child(3n) { height:55%; }.mini-bars i:last-child { height:100%; background:#007acc; }
.avatar-stack { display:flex; margin-top:14px; }
.avatar-stack>span { display:grid; place-items:center; margin-right:-4px; width:19px; height:19px; border:2px solid #fff; border-radius:50%; background:#d6e7fa; color:#3775a3; font-size:5px; }
.avatar-stack>span:nth-child(2) { background:#d8eadf; color:#4a8864; }.avatar-stack>span:nth-child(3) { background:#eadff6; color:#7d599f; }
.progress-track { height:4px; border-radius:3px; background:#e6eef8; margin-top:23px; }.progress-track i { display:block; width:72%; height:100%; border-radius:3px; background:#007acc; }
.dashboard-project { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0 0; margin-top:18px; border-top:1px solid #dce4ee; }
.dashboard-project>div { display:flex; align-items:center; gap:8px; }
.project-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:5px; background:#e0edfa; color:#007acc; }
.project-icon .svg-icon { width:13px; height:13px; }
.dashboard-project b { display:block; font-size:7px; }.dashboard-project small { display:block; font-size:5px; color:#8995a5; }
.dashboard-project .sample-button { padding:6px 7px; font-size:5px; gap:6px; white-space:nowrap; }
.inspector-target { display:flex; align-items:center; gap:7px; padding:10px 0; font-size:10px; color:#ddd; }
.inspector-tabs { display:flex; gap:20px; border-bottom:1px solid #3a3a3a; font-size:9px; margin-bottom:17px; }
.inspector-tabs span { padding:7px 0; }.inspector-tabs span:first-child { color:#fff; border-bottom:2px solid #007acc; }
.property { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; font-size:8px; }
.property b { padding:4px 7px; min-width:70px; border-radius:3px; border:1px solid #454545; background:#3c3c3c; color:#ccc; font-size:8px; font-weight:400; }
.property i { display:inline-block; width:8px; height:8px; background:#172b45; margin-right:3px; }
.designer-figure figcaption { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid #3a3a3a; color:#999; font:9px var(--mono); }
.designer-figure figcaption span:first-child { color:var(--blue-light); }
.resources { padding-top:35px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.resource-grid article { padding:32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(135deg,#1b1d20,#171717); }
.resource-grid article:nth-child(2n) { background:#181a1d; }
.resource-grid .svg-icon { width:25px; height:25px; color:var(--blue-light); margin-bottom:30px; }
.resource-grid h3 { font-size:16px; margin:0 0 12px; letter-spacing:-.02em; }
.resource-grid p { font-size:13px; color:var(--muted); line-height:1.85; margin-bottom:25px; }
.resource-grid article>span { color:#7995ab; font:9px var(--mono); }
.integration { padding-top:45px; }
.integration-grid { margin-top:50px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; align-items:center; }
.integration-copy>h2 { font-size:clamp(37px,4.6vw,59px); line-height:1.12; letter-spacing:-.065em; margin:0 0 24px; }
.integration-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.9; }
.integration-list { margin:26px 0 30px; padding:0; list-style:none; display:grid; gap:13px; color:#c2c8ce; font-size:12px; }
.integration-list li { display:flex; align-items:center; gap:10px; }
.integration-list .svg-icon { color:var(--blue-light); width:15px; height:15px; }
.code-card { border:1px solid #3c4651; border-radius:10px; overflow:hidden; background:#171b20; box-shadow:0 20px 65px #0004; transform:rotate(1deg); }
.code-card-head { display:flex; align-items:center; gap:9px; height:46px; padding:0 18px; border-bottom:1px solid #303842; color:#a7b1bb; font:10px var(--mono); background:#20252b; }
.code-card-head .svg-icon { color:var(--blue-light); width:15px; height:15px; }.code-language { margin-left:auto; color:#63b3e9; }
.code-card pre { margin:0; padding:32px 28px; overflow:auto; font:12px/2 var(--mono); color:#d6dde6; }
.code-card code { padding:0; background:none; color:inherit; font-size:inherit; }
.code-comment { color:#788593; }.code-purple { color:#b8a3eb; }.code-blue { color:#66c0f4; }.code-green { color:#92d6b2; }
.code-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 18px; border-top:1px solid #303842; color:#8995a2; font:9px var(--mono); }
.connect { padding-top:0; }
.connect-card { gap:55px; }
.connect-card h2 em { color:var(--blue-light); }
.download-panel { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:18px; }
.download-panel h3 { font-size:17px; margin:0 0 3px; letter-spacing:-.035em; }
.download-panel>div>p { font-size:11px; margin:0; }
.download-button { grid-column:1/-1; gap:12px; min-height:54px; width:100%; margin-top:6px!important; }
.download-button .svg-icon:first-child { width:17px; height:17px; }
.download-button .svg-icon:last-child { margin-left:auto; }
.download-button[aria-disabled="true"] { background:#233e52; color:#a9c1d3; cursor:default; transform:none; }
.download-panel .download-status { grid-column:1/-1; margin:0; font-size:10px; color:#90a1b0; text-align:center; max-width:none; }
.download-panel noscript { grid-column:1/-1; font-size:11px; color:var(--muted); }
.footer-powered { display:block; margin-top:3px; color:#6f7882; font-size:10px; }.footer-powered a { color:#9aa9b8; }
.footer-top-link { display:inline-flex; align-items:center; gap:5px; }.footer-top-link .svg-icon { width:13px; height:13px; }

@media (max-width:1200px) {
  .trusted,.section,.site-footer { margin-left:36px; margin-right:36px; }
  .hero { gap:35px; }
  .trusted { font-size:9px; }
  .trusted>div { gap:13px; }
  .designer-workspace { grid-template-columns:38px 145px minmax(0,1fr) 164px; }
  .designer-canvas { padding:28px 18px; }
  .dashboard-content { padding:20px 15px; }
  .dashboard-content>h3 { font-size:21px; }
  .integration-grid { gap:60px; }
}
@media (max-width:1000px) {
  .main-nav { gap:18px; font-size:12px; }
  .main-nav .button { padding:0 12px; font-size:11px; }
  .hero { padding-top:70px; padding-bottom:80px; gap:28px; }
  .hero h1 { font-size:53px; }
  .hero-text { font-size:14px; }
  .hero-visual { min-height:375px; }
  .mini-body { grid-template-columns:88px minmax(0,1fr); }
  .mini-canvas { padding:20px 12px; }.sample-page { padding:15px 13px; }.selected-label { font-size:24px; }
  .floating-card { padding:11px 13px; }.floating-card b { font-size:11px; }.floating-card small { font-size:7px; }
  .floating-1 { left:-8px; bottom:0; }.floating-2 { right:-8px; top:0; }
  .trusted { flex-direction:column; align-items:flex-start; gap:17px; }
  .section { padding-top:100px; padding-bottom:100px; }
  .feature-showcase,.connect,.seo-faq { padding-top:0; }
  .designer-workspace { grid-template-columns:36px 130px minmax(0,1fr); }
  .designer-inspector { display:none; }
  .resource-grid article { padding:25px; }
  .resource-grid h3 { font-size:14px; }
  .connect-card { padding:42px; gap:35px; }.connect-card h2 { font-size:40px; }
  .download-panel h3 { font-size:15px; }
}
@media (min-width:751px) and (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:55px; }
  .hero h1 { font-size:66px; }
  .hero-text { max-width:540px; font-size:16px; }
  .hero-visual { width:100%; max-width:600px; min-height:420px; margin:auto; }
  .mini-body { grid-template-columns:108px minmax(0,1fr); }
  .mini-canvas { padding:25px 20px; }.sample-page { padding:17px 20px; }.selected-label { font-size:30px; }
  .floating-card b { font-size:13px; }.floating-card small { font-size:8px; }
}
@media (max-width:750px) {
  .site-header { height:72px; padding:0 24px; }
  .main-nav { display:none; }
  .nav-toggle { display:block; }
  .main-nav.open { display:flex; position:absolute; top:72px; left:0; right:0; padding:20px 24px; flex-direction:column; align-items:stretch; gap:16px; border-bottom:1px solid var(--line); background:#191c20; box-shadow:0 20px 30px #0004; }
  .hero { padding:62px 24px 70px; grid-template-columns:1fr; gap:60px; }
  .hero h1 { font-size:clamp(48px,9vw,66px); }.hero-text { max-width:470px; font-size:15px; }
  .hero-visual { width:100%; max-width:540px; min-height:405px; margin:auto; }
  .mini-body { grid-template-columns:108px minmax(0,1fr); }.mini-canvas { padding:25px 20px; }.sample-page { padding:17px 20px; }.selected-label { font-size:30px; }
  .floating-card b { font-size:13px; }.floating-card small { font-size:8px; }
  .trusted,.section,.site-footer { margin-left:24px; margin-right:24px; }
  .trusted>div { flex-wrap:wrap; gap:12px; }
  .intro-grid,.feature-heading { display:grid; grid-template-columns:1fr; gap:25px; }
  .intro-grid h2,.feature-heading h2,.seo-faq-heading h2 { font-size:clamp(35px,6.5vw,48px); }
  .feature-heading p { width:auto; max-width:430px; }
  .process-grid { grid-template-columns:1fr; margin-top:40px; }
  .process-grid article { padding:28px; }.process-grid article+article { border-left:0; border-top:1px solid var(--line); }
  .step-number { margin-bottom:22px; }.process-grid p { max-width:none; }
  .process-grid .svg-icon { position:absolute; right:28px; top:28px; }
  .designer-workspace { grid-template-columns:32px minmax(0,1fr); min-height:330px; }.designer-builder { display:none; }
  .designer-canvas { padding:25px; }.dashboard-content { padding:21px; }.dashboard-content>h3 { font-size:25px; }
  .toolbar-device { font-size:9px; gap:5px; }.toolbar-device>span { display:none; }.designer-toolbar { gap:10px; font-size:9px; }
  .designer-figure figcaption { font-size:8px; flex-wrap:wrap; }
  .feature-list { grid-template-columns:1fr; gap:22px; margin-top:30px; }
  .feature-list article { padding-top:16px; }.feature-list h3 { margin-top:10px; }
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .integration-grid { grid-template-columns:1fr; gap:35px; margin-top:40px; }
  .integration-copy>h2 { font-size:45px; }
  .code-card { transform:none; }
  .connect-card { grid-template-columns:1fr; padding:38px; gap:35px; }.connect-card>div>p { max-width:100%; }
  .download-panel h3 { font-size:17px; }
  .seo-faq-heading { grid-template-columns:1fr; gap:25px; margin-bottom:35px; }
  .faq-grid { grid-template-columns:1fr; }.faq-grid article { min-height:0; padding:27px; }
  .site-footer { flex-wrap:wrap; gap:20px; padding:30px 0; }.site-footer p { margin:0; }.site-footer>div { width:100%; margin:0; }
}
@media (max-width:420px) {
  .site-header { padding:0 20px; }
  .hero { padding:52px 20px 60px; }.hero h1 { font-size:47px; }.hero-text { font-size:14px; }.eyebrow { font-size:8px; }
  .hero-actions { gap:20px; }.hero-visual { min-height:330px; }.mini-ide { transform:none; }
  .mini-body { grid-template-columns:83px minmax(0,1fr); min-height:230px; }.mini-tabs { gap:11px; font-size:8px; }
  .mini-builder { font-size:8px; padding:12px 5px; }.mini-canvas { padding:20px 12px; }.sample-page { padding:14px 12px; }.selected-label { font-size:23px; }.sample-nav { margin-bottom:18px; }.sample-nav>span { display:none; }
  .floating-card { padding:9px 10px; gap:7px; }.floating-card .icon { width:25px; height:25px; }.floating-card b { font-size:10px; }.floating-card small { font-size:6px; }.floating-1 { left:0; bottom:-4px; }.floating-2 { right:0; top:-8px; }
  .trusted,.section,.site-footer { margin-left:20px; margin-right:20px; }
  .section { padding-top:80px; padding-bottom:80px; }.feature-showcase,.connect,.seo-faq { padding-top:0; }
  .trusted { font-size:8px; }.trusted>div { gap:9px; }
  .intro-grid h2,.feature-heading h2,.seo-faq-heading h2 { font-size:35px; }
  .designer-toolbar { padding:0 9px; }.toolbar-device { display:none; }.designer-toolbar .preview-pill { margin-left:auto; }
  .designer-workspace { grid-template-columns:25px minmax(0,1fr); min-height:300px; }.activity-rail { gap:22px; }.activity-rail .svg-icon { width:15px; height:15px; }.designer-canvas { padding:18px 10px; }
  .dashboard-content { padding:16px 12px; }.dashboard-content>h3 { font-size:22px; }.dashboard-nav { padding:0 11px; }.dashboard-cards { gap:5px; }.dashboard-cards>div { padding:8px 6px; }.dashboard-cards b { font-size:19px; }.dashboard-cards b>span { margin-left:3px; font-size:4px; }.mini-bars { gap:3px; }
  .dashboard-project .sample-button { font-size:4px; gap:3px; padding:6px; }.dashboard-project b { font-size:6px; }.dashboard-project small { font-size:4px; }
  .resource-grid { grid-template-columns:1fr; }.resource-grid article { padding:28px; }.resource-grid .svg-icon { margin-bottom:22px; }.resource-grid p { margin-bottom:17px; }.resource-grid h3 { font-size:16px; }
  .integration-copy>h2 { font-size:42px; }.integration-list { font-size:11px; }
  .code-card pre { padding:25px 17px; font-size:10px; }.code-card-head,.code-card-foot { padding-left:13px; padding-right:13px; font-size:8px; }
  .connect-card { padding:30px 22px; }.connect-card h2 { font-size:37px; }.download-panel { grid-template-columns:48px minmax(0,1fr); gap:14px; }.download-panel>img { width:48px; height:48px; }.download-panel h3 { font-size:15px; }.download-panel>div>p { font-size:10px; }
  .faq-grid article { padding:24px 21px; }.site-footer p { width:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }