/*
 * AppExchange App Development page (page-app-development.php) design system
 * — copied from radical-app-development.html's first <style> block. This
 * page uses its own --emerald/--slate custom-property set (not Tailwind).
 * Shared #r1fh / .r1-nav-menu / .r1-drop* / .r1-toggle / .r1-burger /
 * .r1-backdrop / .r1-pillnav base rules live in assets/css/base.css and are
 * not duplicated here (the source's second <style> block, and the
 * "R1 shared nav menu" rules inside the first block, were identical to
 * base.css and dropped).
 */
:root{--emerald:#183c28;--emerald2:#133020;--emerald50:#ecfdf5;--emerald100:#d1fae5;--slate950:#020617;--slate700:#334155;--slate600:#475569;--slate300:#cbd5e1;--white:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--slate950);background:#fff;line-height:1.5}
a{text-decoration:none;color:inherit}
.container{max-width:1280px;margin:auto;padding:0 24px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fafc 0%,#fff 48%,#ecfdf5 100%)}
.blob{position:absolute;border-radius:999px;filter:blur(60px);opacity:.6}
.blob.one{width:320px;height:320px;background:#a7f3d0;left:-96px;top:96px}
.blob.two{width:384px;height:384px;background:#bae6fd;right:-96px;top:80px}
/* .nav / .brand / .brand-logo are shared in base.css now — .logo is
   unused here (this page renders the SVG logo via .brand-logo). */
.eyebrow{font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em}
.sub{font-size:12px;color:#64748b}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:14px 24px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn.primary{background:var(--emerald);color:#fff}
.btn.primary:hover{background:#133020}
.btn.secondary{background:#fff;border-color:#cbd5e1;color:#0f172a}
.btn.secondary:hover{background:#f8fafc}
.btn.white{background:#fff;color:#133020}
.btn.outline-white{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;padding:48px 0 128px}
.pill{display:inline-flex;border:1px solid #a7f3d0;background:#fff;color:var(--emerald);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 2px 6px rgba(15,23,42,.08)}
h1{font-size:clamp(48px,7vw,80px);line-height:1.02;letter-spacing:-.04em;margin:20px 0 0;font-weight:800}
.lead{font-size:20px;line-height:1.6;color:var(--slate950);max-width:720px}
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:28px;box-shadow:0 20px 50px rgba(6,78,59,.12)}
.card.pad{padding:32px}
.iconbox{width:48px;height:48px;border-radius:16px;background:var(--emerald100);color:var(--emerald);display:flex;align-items:center;justify-content:center}
.icon{width:24px;height:24px}
.checkrow{display:flex;align-items:center;gap:12px;background:#f8fafc;border-radius:16px;padding:16px;margin-top:12px}
.dark{background:var(--slate950);color:#fff}
.section{padding:80px 0}
.section-title{max-width:820px}
.kicker{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.28em;color:var(--emerald)}
.dark .kicker{color:#6ee7b7}
.section h2{font-size:clamp(38px,5vw,56px);line-height:1.08;letter-spacing:-.03em;margin:16px 0 0}
.muted{color:var(--slate600)}
.dark .muted{color:var(--slate300)}
.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.service{padding:28px;border:1px solid #e2e8f0;border-radius:28px;background:#fff;transition:.2s}
.service:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(15,23,42,.1)}
.soft{background:var(--emerald50)}
.soft .service{border-color:#d1fae5}
.num{font-size:14px;font-weight:800;color:var(--emerald)}
.service h3,.card h3{font-size:24px;margin:16px 0 0}
.service p,.card p{color:var(--slate950)}
.dark-card{background:transparent;border:0;color:#fff;padding:0}
.plain-grid .service{background:transparent;border:0;box-shadow:none}
.plain-grid .service:hover{box-shadow:none}
.dark-card p{color:#e2e8f0}
.reason{display:flex;gap:12px;margin-top:16px}
.cta{background:var(--emerald);color:#fff;text-align:center}
.cta-inner{max-width:880px;margin:auto}
.cta h2{font-size:clamp(40px,6vw,64px)}
.fade{opacity:0;transform:translateY(24px);animation:fadeUp .7s ease forwards}
.fade.delay{animation-delay:.12s}
@keyframes fadeUp{to{opacity:1;transform:none}}
svg{display:block}
@media(max-width:960px){.hero-grid,.two-col{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.service-grid,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.container{padding:0 18px}.hero-grid{padding-bottom:80px}.grid-4,.service-grid,.grid-3{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%}.section{padding:64px 0}}

/* Stray utility overrides present in the source's nav-menu style block
   (not part of the shared #r1-nav-menu/.r1-drop rule set in base.css). */
.text-slate-600 { color: #020617 !important; }
.text-sm { font-size: 1rem !important; }