@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@600;700;800&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{--bg:#0b0b0b;--surface:#151515;--text:#eef0f3;--muted:#687386;--line:#292929;--accent:#39ff14;--orange:#39ff14;--max:1110px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{height:58px;display:flex;align-items:center;padding:0 max(20px,calc((100vw - var(--max))/2));border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font-weight:600}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:4px;background:var(--accent);color:#071008;font:600 11px 'Space Grotesk'}.desktop-nav{display:flex;gap:27px;margin-left:105px;color:#687078;font-size:12px}.header-actions{display:flex;align-items:center;gap:25px;margin-left:auto;color:#687078;font-size:12px}.button{height:48px;display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:0 25px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:600;transition:.2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--accent);border-color:var(--accent);color:#061006;box-shadow:0 0 22px rgba(57,255,20,.18)}.button-secondary{background:transparent;color:var(--text)}.button-header{height:42px;min-width:115px}.menu-button,.mobile-nav{display:none}
.hero{min-height:500px;padding:72px 20px 40px;text-align:center;border-bottom:1px solid #161616}.availability{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #242424;border-radius:999px;color:#687386;font:12px 'Space Grotesk'}.availability span{width:7px;height:7px;border-radius:50%;background:#32bc16}.hero h1{max-width:900px;margin:38px 0 23px;font:600 clamp(2.7rem,5vw,4.2rem)/1.08 'Space Grotesk';letter-spacing:-.06em}.hero h1 em,h2 em{color:var(--accent);font-style:normal}.hero>p{max-width:680px;margin:auto;color:#687386;font-size:15px;line-height:1.55}.hero-actions{display:flex;justify-content:center;gap:14px;margin-top:35px}.hero-actions .button{min-width:192px}.command{display:flex;align-items:center;gap:13px;width:max-content;margin:42px auto 0;padding:10px 14px;border:1px solid #292929;border-radius:6px;color:#89929e;font:12px 'Space Grotesk',monospace}.command>span{color:#6d7890}.copy-button{margin-left:12px;padding:0;border:0;background:transparent;color:#c4c7cb;cursor:pointer}.stats{display:flex;justify-content:center;gap:80px;padding:32px 20px 38px;border-bottom:1px solid #191919}.stats div{display:flex;align-items:flex-start;gap:10px}.stats strong{color:var(--accent);font:600 22px 'Space Grotesk'}.stats span{color:#687386;font-size:11px;line-height:1.35}
.section{max-width:var(--max);margin:auto;padding:96px 0}.capabilities{max-width:none;padding:78px max(32px,calc((100vw - 1150px)/2));background:#151515;text-align:center}.kicker{margin:0 0 17px;color:var(--accent);font:600 11px 'Space Grotesk';letter-spacing:.14em}.section h2,.contact h2{margin:0;font:600 clamp(2.35rem,4.3vw,3.7rem)/.98 'Manrope','Space Grotesk',sans-serif;letter-spacing:-.065em}.capabilities h2{font-size:clamp(1.9rem,3vw,2.75rem);letter-spacing:-.045em}.intro{max-width:470px;margin:20px 0 44px;color:#8692a3;font-size:14px;line-height:1.6}.capabilities>.intro{margin:20px auto 46px}.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1150px;margin:auto;text-align:left}.capability-grid article{min-height:190px;padding:24px;border:1px solid #292929;border-radius:12px;background:#151515;transition:border-color .2s,transform .2s}.capability-grid article:hover{border-color:rgba(57,255,20,.55);transform:translateY(-3px)}.icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border:0;border-radius:7px;background:rgba(57,255,20,.1);color:var(--accent)}.icon svg{width:24px;height:24px;stroke-width:1.8}.capability-grid h3{margin:0 0 10px;font:600 17px 'Space Grotesk'}.capability-grid p{max-width:280px;margin:0;color:#687386;font-size:13px;line-height:1.55}
.preview{max-width:none;padding:103px max(32px,calc((100vw - var(--max))/2));background:#0b0b0b}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.code-card{border:1px solid #292929;border-radius:7px;overflow:hidden;background:#151515;grid-column:2;grid-row:1}.preview-grid>.check-list{grid-column:1;grid-row:1}.window-bar{height:45px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid #292929;color:#687386;font:12px 'Space Grotesk'}.window-bar span{width:12px;height:12px;border-radius:50%;background:#ff3040}.window-bar span:nth-child(2){background:#ffbd22}.window-bar span:nth-child(3){background:#12c95a}.window-bar b{margin-left:12px;font-weight:400}.code-card pre{min-height:272px;margin:0;padding:16px;color:#e4e8eb;font:14px/1.72 'Space Grotesk'}.code-card i{color:#f36cbb;font-style:normal}.code-card em{color:var(--accent);font-style:normal}.code-card mark{padding:0;background:transparent;color:#f5ef5b}.code-card .comment{color:#60759c}.check-list{display:grid;gap:19px;padding:0;margin:0;list-style:none;color:#f0f2f4;font-size:13px}
.integrations{max-width:none;padding:94px max(32px,calc((100vw - var(--max))/2));background:#151515;text-align:center}.integrations .intro{margin:20px auto 46px}.integration-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}.integration-list span{display:grid;justify-items:center;gap:15px;padding:24px;border:1px solid #292929;border-radius:11px}.integration-list span:first-child{border-color:var(--accent)}.integration-list i{display:grid;place-items:center;width:48px;height:48px;border-radius:7px;background:#202020;color:var(--text);font:600 16px 'Space Grotesk';font-style:normal}.integration-list span:first-child i{background:#163514;color:var(--accent)}.integration-list b{font:600 13px 'Space Grotesk'}.integrations-more{display:block;margin-top:38px;color:#687386;font-size:13px}.process{padding-bottom:105px}.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:62px;border-block:1px solid var(--line)}.steps div{display:grid;gap:9px;padding:26px 0}.steps div+div{padding-left:35px;border-left:1px solid var(--line)}.steps b{color:var(--orange);font:14px 'Space Grotesk'}.steps strong{font:17px 'Space Grotesk'}.steps span{color:var(--muted);font-size:12px}.contact{margin:0 auto;padding:72px 25px;text-align:center;border:1px solid var(--accent);border-radius:8px;max-width:795px;background:linear-gradient(140deg,#111d15,#151515)}.contact p{max-width:450px;margin:18px auto 28px;color:#687386;font-size:14px;line-height:1.5}.contact>div{display:flex;justify-content:center;gap:14px}.contact small{display:block;margin-top:28px;color:#687386;font-size:11px}footer{max-width:var(--max);margin:70px auto 0;padding:42px 0 25px;border-top:1px solid var(--line)}.footer-main{display:flex;justify-content:space-between;gap:50px}.footer-main p{max-width:250px;color:#687386;font-size:12px;line-height:1.6}.footer-links{display:flex;gap:75px}.footer-links span{display:grid;gap:11px;min-width:100px;color:#687386;font-size:12px}.footer-links b{color:var(--text);font-weight:600}.footer-bottom{display:flex;justify-content:space-between;margin-top:42px;padding-top:20px;border-top:1px solid #202020;color:#687386;font-size:11px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:none}@media(max-width:800px){.site-header{padding:0 20px}.desktop-nav,.header-actions{display:none}.menu-button{display:block;margin-left:auto;border:0;background:transparent;color:var(--text);font-size:12px}.mobile-nav{padding:18px 20px;border-bottom:1px solid var(--line);background:var(--bg)}.mobile-nav.is-open{display:grid;gap:17px}.mobile-nav a{color:#687386;font-size:13px}.hero{min-height:620px;padding-top:75px}.hero h1{font-size:clamp(2.6rem,11vw,3.7rem)}.hero>p{font-size:14px}.hero-actions,.contact>div{flex-direction:column;width:min(100%,280px);margin-inline:auto}.button{width:100%;min-width:0}.stats{gap:24px;justify-content:space-around}.stats strong{font-size:20px}.stats span{font-size:9px}.section,.capabilities,.preview,.integrations{padding:78px 20px}.capability-grid{grid-template-columns:1fr}.capability-grid article,.capability-grid article:nth-child(n){border-right:0;border-bottom:1px solid #40505a}.capability-grid article:last-child{border-bottom:0}.preview-grid{grid-template-columns:1fr;gap:35px}.code-card,.preview-grid>.check-list{grid-column:auto;grid-row:auto}.integration-list{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;margin-top:45px}.steps div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}footer{margin-inline:20px}.footer-main{display:block}.footer-links{gap:24px;margin-top:40px}.footer-bottom{display:grid;gap:10px;margin-top:42px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}}

/* Typography and motion refinement only: layout and visual styling remain unchanged. */
body{font-family:'DM Sans',sans-serif;font-size:15px}
.brand{font-family:'Manrope','DM Sans',sans-serif;font-size:19px;font-weight:700}
.desktop-nav,.header-actions,.mobile-nav a{font-size:13px}
.hero h1{font-family:'Manrope','Space Grotesk',sans-serif;font-size:clamp(2.55rem,4.8vw,3.9rem);font-weight:700;line-height:1.04}
.hero>p{font-size:16px;line-height:1.6}
.availability,.command,.window-bar{font-size:12px}
.button{font-size:14px;transition:transform .25s ease,box-shadow .25s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(24,50,65,.12)}
.button-primary:hover{box-shadow:0 10px 24px rgba(24,50,65,.2)}
.stats strong{font-size:21px}
.stats span{font-size:12px}
.kicker{font-size:12px}
.section h2,.contact h2{font-family:'Manrope','Space Grotesk',sans-serif;font-size:clamp(2.15rem,4vw,3.45rem);font-weight:700;line-height:1}
.capabilities h2{font-size:clamp(1.85rem,2.8vw,2.6rem)}
.intro{font-size:15px;line-height:1.65}
.capability-grid h3{font-size:18px}
.capability-grid p,.check-list{font-size:14px;line-height:1.6}
.code-card pre{font-size:13px;line-height:1.8}
.integration-list b{font-size:14px}
.integrations-more{font-size:14px}
.steps b{font-size:13px}
.steps strong{font-size:18px}
.steps span,.contact small{font-size:13px}
.contact p{font-size:15px;line-height:1.6}
.footer-main p,.footer-links span{font-size:13px}
.footer-bottom{font-size:12px}
.reveal{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
@media(max-width:800px){
  .hero h1{font-size:clamp(2.45rem,10.5vw,3.6rem)}
  .hero>p{font-size:15px}
  .section h2,.contact h2{font-size:clamp(2.1rem,10vw,3.2rem)}
  .button{font-size:13px}
}
.brand-mark svg{width:23px;height:23px}.button svg,.integrations-more svg{width:15px;height:15px}.copy-button svg{width:15px;height:15px}.stats strong svg{width:24px;height:24px;stroke-width:2.5}.check-list li{display:flex;align-items:center;gap:12px}.check-list li svg{width:15px;height:15px;flex:none;color:var(--accent);stroke-width:2.5}.integration-list i svg{width:23px;height:23px;stroke-width:1.8}
/* SonorApp brand system: petroleum, sand and oxide. */
:root{--bg:#f7f6f2;--surface:#eef1ef;--text:#183241;--muted:#687982;--line:#d8dfdc;--accent:#b65f45;--orange:#b65f45;--brand-rust:#b65f45;--brand-ink:#183241}
body{background:var(--bg);color:var(--text)}
.site-header{background:rgba(247,246,242,.95);border-bottom-color:var(--line)}
.brand{color:var(--brand-ink)}
.brand{display:inline-block;font:700 20px/1 'Manrope','DM Sans',sans-serif;letter-spacing:-.065em}
.brand span{color:var(--brand-rust)}
.desktop-nav,.header-actions{color:#607277}
.desktop-nav a:hover,.header-link:hover,.footer-links a:hover{color:var(--brand-rust)}
.button{border-color:var(--line)}
.button-primary{background:var(--brand-ink);border-color:var(--brand-ink);color:#f3eee6;box-shadow:0 8px 20px rgba(30,52,64,.16)}
.button-secondary{color:var(--brand-ink);background:transparent}
.button-secondary:hover{border-color:var(--brand-ink)}
.menu-button{color:var(--brand-ink)}
.mobile-nav{background:var(--bg);border-bottom-color:var(--line)}
.mobile-nav a{color:var(--muted)}
.hero{background:var(--bg);border-bottom-color:var(--line)}
.availability{border-color:var(--line);color:var(--muted)}
.availability span{background:var(--brand-rust)}
.hero h1{color:var(--brand-ink);font-size:clamp(2.35rem,4.6vw,3.7rem)}
.hero h1 em,h2 em,.kicker,.stats strong,.steps b{color:var(--brand-rust)}
.hero>p,.intro,.capability-grid p,.contact p{color:var(--muted)}
.command{border-color:var(--line);color:var(--muted);background:#eee8df}
.command>span{color:var(--brand-rust)}
.copy-button{color:var(--brand-ink)}
.stats{background:#f0f2ef;border-bottom-color:var(--line)}
.stats span{color:var(--muted)}
.capabilities,.integrations{background:var(--surface)}
.capability-grid article{background:#f7f6f2;border-color:var(--line)}
.capability-grid article:hover{border-color:var(--brand-rust)}
.icon{background:rgba(183,93,61,.12);color:var(--brand-rust)}
.preview{background:#203b46}
.preview h2,.preview .kicker{color:#f3eee6}
.preview .intro{color:#c4d0d0}
.code-card{background:#122b34;border-color:#46616a}
.window-bar{border-bottom-color:#46616a;color:#b5c2c4}
.code-card pre{color:#e8e1d6}
.code-card i{color:#e0a56e}
.code-card em{color:#df9a55}
.code-card mark{color:#e8c875}
.code-card .comment{color:#86a0a0}
.check-list{color:#f3eee6}
.check-list li svg{color:#df9a55}
.integration-list span{border-color:#c9c1b5;background:#f3eee6}
.integration-list span:first-child{border-color:var(--brand-rust)}
.integration-list i{background:#e8e1d6;color:var(--brand-ink)}
.integration-list span:first-child i{background:#f0d6c9;color:var(--brand-rust)}
.integration-list b{color:var(--brand-ink)}
.integrations-more{color:var(--muted)}
.steps{border-color:var(--line)}
.steps div+div{border-left-color:var(--line)}
.steps strong{color:var(--brand-ink)}
.steps span{color:var(--muted)}
.contact{border-color:var(--brand-rust);background:linear-gradient(140deg,#f1e3dc,#f7f6f2)}
.contact small{color:var(--muted)}
footer{border-top-color:var(--line)}
.footer-main p,.footer-links span,.footer-bottom{color:var(--muted)}
.footer-links b{color:var(--brand-ink)}
.footer-bottom{border-top-color:var(--line)}