/* TradeForm Landscaper — main stylesheet */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&family=Epilogue:wght@300;400;500;600;700&display=swap");

:root {
  --navy: oklch(0.22 0.07 260);
  --navy-deep: oklch(0.14 0.05 262);
  --navy-soft: oklch(0.32 0.08 258);
  --accent-blue: oklch(0.62 0.16 250);
  --accent-bright: oklch(0.72 0.16 245);
  --surface: oklch(0.985 0.008 250);
  --bg: oklch(0.99 0.005 250);
  --fg: oklch(0.17 0.04 260);
  --muted: oklch(0.965 0.012 250);
  --muted-fg: oklch(0.48 0.03 255);
  --border: oklch(0.91 0.012 250);
  --destructive: oklch(0.58 0.22 27);

  --gradient-hero: radial-gradient(120% 90% at 80% 0%, oklch(0.32 0.1 258) 0%, oklch(0.18 0.07 262) 45%, oklch(0.11 0.05 262) 100%);
  --gradient-accent: linear-gradient(135deg, oklch(0.68 0.17 248), oklch(0.55 0.18 258));
  --gradient-text: linear-gradient(135deg, oklch(0.98 0.01 250), oklch(0.78 0.08 245));
  --shadow-elegant: 0 30px 80px -30px oklch(0.14 0.05 262 / 0.5);
  --shadow-card: 0 1px 2px 0 oklch(0.14 0.05 262 / 0.05), 0 10px 30px -12px oklch(0.14 0.05 262 / 0.12);

  --font-display: "Urbanist", system-ui, sans-serif;
  --font-body: "Epilogue", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; font-weight: 800; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .container { padding: 0 2rem; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; padding: 0.75rem 1.4rem; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; height: 48px; }
.btn-primary { background: white; color: var(--navy-deep); }
.btn-primary:hover { background: rgba(255,255,255,0.9); }
.btn-dark { background: var(--navy-deep); color: white; }
.btn-dark:hover { background: var(--navy); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.2); color: white; }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* Demo banner */
.demo-banner { background: var(--navy-deep); color: rgba(255,255,255,0.85); text-align: center; font-size: 12px; font-weight: 500; padding: 0.5rem 1rem; letter-spacing: 0.02em; }
.demo-banner .dot { color: var(--accent-bright); }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: rgba(255,255,255,0.8); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 700; color: var(--navy-deep); font-size: 17px; }
.brand-mark { height: 32px; width: 32px; border-radius: 0.375rem; background: var(--navy-deep); display: grid; place-items: center; color: white; }
.nav-links { display: none; gap: 2rem; font-size: 13.5px; color: var(--muted-fg); font-weight: 500; }
.nav-links a:hover { color: var(--navy); }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* Hero */
.hero { position: relative; overflow: hidden; color: white; background: var(--gradient-hero); }
.hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.4; pointer-events: none; }
.hero-blob-1 { position: absolute; top: -8rem; right: -8rem; height: 28rem; width: 28rem; border-radius: 50%; background: oklch(0.62 0.16 250 / 0.25); filter: blur(48px); pointer-events: none; }
.hero-blob-2 { position: absolute; bottom: 0; left: 0; height: 18rem; width: 18rem; border-radius: 50%; background: oklch(0.72 0.16 245 / 0.1); filter: blur(48px); pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding: 3.5rem 0 5rem; }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 7fr 5fr; padding: 6rem 0 8rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); padding: 0.375rem 0.75rem; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); font-weight: 600; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-title { margin-top: 1.5rem; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.hero-title .gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { margin-top: 1.75rem; font-size: 17px; color: rgba(255,255,255,0.65); max-width: 560px; line-height: 1.6; }
.hero-ctas { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }
.hero-checks { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 0.75rem 1.5rem; font-size: 13.5px; color: rgba(255,255,255,0.75); }
@media (min-width: 640px) { .hero-checks { grid-template-columns: repeat(3, 1fr); } }
.hero-checks li { display: flex; align-items: center; gap: 0.5rem; }
.check { color: var(--accent-bright); }

/* Hero image card */
.hero-image-wrap { position: relative; }
.hero-image-card { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow-elegant); }
.hero-image-card img { width: 100%; height: 460px; object-fit: cover; }
.hero-image-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.14 0.05 262 / 0.8), transparent); }
.hero-image-tag { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 11px; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.15); font-weight: 500; z-index: 1; }
.hero-image-tag .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.float-card { position: absolute; bottom: -1.5rem; left: -1.5rem; display: none; align-items: flex-start; gap: 0.75rem; background: white; color: var(--navy-deep); padding: 1rem 1.5rem 1rem 1rem; border-radius: 0.75rem; max-width: 280px; border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-card); }
@media (min-width: 640px) { .float-card { display: flex; } }
.float-card-icon { height: 36px; width: 36px; border-radius: 0.5rem; background: var(--gradient-accent); display: grid; place-items: center; color: white; flex-shrink: 0; }
.float-card-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-blue); }
.float-card-title { font-size: 13px; font-weight: 600; margin-top: 0.125rem; }
.float-card-sub { font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-stat { position: absolute; top: -1.5rem; right: -1rem; display: none; background: var(--navy-deep); color: white; padding: 1rem; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow-card); }
@media (min-width: 1024px) { .float-stat { display: block; } }
.float-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.55); font-weight: 600; }
.float-stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-top: 0.25rem; }
.float-stat-sub { font-size: 11px; color: var(--accent-bright); margin-top: 0.125rem; }

/* Logo strip */
.logo-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.logo-strip-inner { padding: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2.5rem; }
.logo-strip-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: var(--muted-fg); }
.logo-strip-logos { display: flex; align-items: center; gap: 2rem; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: oklch(0.48 0.03 255 / 0.7); flex-wrap: wrap; }

/* Sections */
.section { padding: 6rem 0; }
@media (min-width: 640px) { .section { padding: 8rem 0; } }
.section-surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-blue); }
.section-title { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--navy-deep); line-height: 1.05; max-width: 720px; }
.section-head { max-width: 720px; margin-bottom: 3.5rem; }

/* Before/after */
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-card { border: 1px solid var(--border); background: white; border-radius: 1rem; padding: 2rem; }
.ba-card-dark { color: white; background: var(--gradient-hero); box-shadow: var(--shadow-elegant); position: relative; overflow: hidden; border: none; }
.ba-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.25rem 0.5rem; border-radius: 4px; }
.ba-tag-before { color: var(--destructive); background: oklch(0.58 0.22 27 / 0.1); }
.ba-tag-after { color: var(--navy-deep); background: var(--accent-bright); }
.ba-tag-row { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.75rem; }
.ba-tag-row span:last-child { font-size: 14px; color: var(--muted-fg); }
.ba-card-dark .ba-tag-row span:last-child { color: rgba(255,255,255,0.65); }
.ba-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; }
.ba-list .icon { flex-shrink: 0; margin-top: 0.125rem; }
.ba-list-before .icon { color: var(--destructive); }
.ba-list-after .icon { color: var(--accent-bright); }
.ba-card .ba-list li { color: oklch(0.17 0.04 260 / 0.75); }
.ba-card-dark .ba-list li { color: white; }

/* Services */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.svc-card { background: white; padding: 2rem; position: relative; transition: background 0.2s; }
.svc-card:hover { background: var(--surface); }
.svc-icon { height: 44px; width: 44px; border-radius: 0.5rem; background: var(--navy-deep); display: grid; place-items: center; color: white; transition: background 0.2s; }
.svc-card:hover .svc-icon { background: var(--accent-blue); }
.svc-title { margin-top: 1.5rem; font-weight: 700; color: var(--navy-deep); font-size: 18px; }
.svc-text { margin-top: 0.375rem; font-size: 14px; color: var(--muted-fg); line-height: 1.6; }

/* Showcase */
.show-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .show-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .show-grid { grid-template-columns: repeat(3, 1fr); } }
.show-card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid var(--border); background: white; }
.show-card img { aspect-ratio: 4/3; width: 100%; object-fit: cover; transition: transform 0.7s; }
.show-card:hover img { transform: scale(1.04); }
.show-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.14 0.05 262 / 0.95), oklch(0.14 0.05 262 / 0.2), transparent); }
.show-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; color: white; }
.show-loc { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-bright); font-weight: 600; }
.show-label { margin-top: 0.125rem; font-weight: 600; font-size: 15px; }

/* System (dark) */
.system { position: relative; padding: 6rem 0; color: white; overflow: hidden; background: var(--gradient-hero); }
@media (min-width: 640px) { .system { padding: 8rem 0; } }
.system-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.3; pointer-events: none; }
.system-head-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .system-head-grid { grid-template-columns: 7fr 5fr; } }
.system-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin-top: 1rem; }
.system-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-bright); }
.system-lede { color: rgba(255,255,255,0.7); align-self: end; }
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; overflow: hidden; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.feat-card { background: oklch(0.14 0.05 262 / 0.6); backdrop-filter: blur(8px); padding: 1.75rem; }
.feat-icon { height: 40px; width: 40px; border-radius: 0.5rem; background: var(--gradient-accent); display: grid; place-items: center; color: white; }
.feat-title { margin-top: 1.25rem; font-weight: 700; font-size: 17px; }
.feat-text { margin-top: 0.375rem; font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.6; }

/* Quote form */
.quote-block { margin-top: 5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; scroll-margin-top: 6rem; }
@media (min-width: 1024px) { .quote-block { grid-template-columns: 5fr 7fr; } }
.quote-title { margin-top: 1rem; font-size: clamp(1.875rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
.quote-lede { margin-top: 1rem; color: rgba(255,255,255,0.65); max-width: 480px; }
.quote-pill { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 1rem; border-radius: 999px; font-size: 14px; font-weight: 500; }
.form-card { background: white; padding: 2rem; border-radius: 1rem; color: var(--fg); box-shadow: var(--shadow-elegant); border: 1px solid rgba(0,0,0,0.05); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field-full { grid-column: 1 / -1; }
.field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(0.14 0.05 262 / 0.7); margin-bottom: 0.375rem; display: block; }
.input, .textarea, .select { width: 100%; height: 40px; border: 1px solid var(--border); background: var(--bg); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font: inherit; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.textarea { height: auto; min-height: 100px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px oklch(0.62 0.16 250 / 0.2); }
.form-submit { margin-top: 1.5rem; width: 100%; }
.form-note { margin-top: 0.75rem; font-size: 11px; color: var(--muted-fg); text-align: center; }

/* Testimonials */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card { border: 1px solid var(--border); background: white; padding: 1.75rem; border-radius: 1rem; }
.testi-stars { color: var(--accent-blue); display: flex; gap: 0.125rem; margin-bottom: 1rem; }
.testi-quote { color: oklch(0.17 0.04 260 / 0.85); line-height: 1.6; font-size: 15px; }
.testi-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 14px; }
.testi-name { font-weight: 700; color: var(--navy-deep); }
.testi-role { color: var(--muted-fg); font-size: 13px; margin-top: 0.125rem; }

/* Final CTA */
.final-wrap { padding-bottom: 7rem; }
.final-card { position: relative; border-radius: 1.5rem; padding: 2.5rem; text-align: center; color: white; overflow: hidden; background: var(--gradient-hero); box-shadow: var(--shadow-elegant); }
@media (min-width: 640px) { .final-card { padding: 5rem; } }
.final-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin-top: 1rem; }
.final-title .gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-lede { margin: 1.5rem auto 0; color: rgba(255,255,255,0.7); max-width: 540px; line-height: 1.6; }
.final-ctas { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; }
@media (min-width: 640px) { .final-ctas { flex-direction: row; } }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-bottom: 7rem; }
@media (min-width: 768px) { .site-footer { padding-bottom: 2.5rem; } }
.footer-grid { padding: 3rem 0; display: grid; grid-template-columns: 1fr; gap: 2rem; font-size: 14px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-blurb { color: var(--muted-fg); margin-top: 0.75rem; max-width: 360px; line-height: 1.6; }
.footer-meta { text-align: left; color: var(--muted-fg); }
@media (min-width: 640px) { .footer-meta { text-align: right; } }
.footer-meta .email { font-weight: 500; color: oklch(0.17 0.04 260 / 0.8); }
.footer-disclaim { font-size: 11px; opacity: 0.7; margin-top: 1rem; max-width: 360px; }
@media (min-width: 640px) { .footer-disclaim { margin-left: auto; } }

/* Mobile sticky bar */
.mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; border-top: 1px solid var(--border); background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (min-width: 768px) { .mobile-bar { display: none; } }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; padding: 0.75rem 0; color: var(--navy-deep); font-size: 11px; font-weight: 600; }
.mobile-bar a.primary { background: var(--navy-deep); color: white; }

/* Submitted message */
.form-success { background: oklch(0.62 0.16 250 / 0.1); border: 1px solid var(--accent-blue); color: var(--navy-deep); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 14px; }