:root {
  --ink: #172017;
  --muted: #667066;
  --cream: #f7f6ee;
  --paper: #fffef9;
  --lime: #c8f135;
  --green: #1e4f36;
  --line: #dfe3d9;
  --orange: #ff6b35;
  --shadow: 0 20px 60px rgba(27, 45, 30, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.topbar { height: 76px; padding: 0 max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eceee7; background: rgba(255,254,249,.95); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--lime); border-radius: 9px 9px 9px 2px; font-size: 12px; letter-spacing: -.04em; }
.topnav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.topnav form { margin: 0; }
.link-button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--lime); color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(155, 194, 25, .18); }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding: 0 18px; border-radius: 8px; }
.button-outline { background: transparent; border: 1px solid var(--ink); box-shadow: none; }
.button-dark { background: var(--ink); color: white; box-shadow: none; }
.button-light { background: white; color: var(--green); }
.hero { min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; padding: 78px max(7vw, 28px); overflow: hidden; background: radial-gradient(circle at 90% 10%, #eff8cf 0, transparent 32%), var(--cream); }
.hero-copy { max-width: 650px; }
.eyebrow { display: inline-block; color: #47704d; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin: 20px 0; font: 800 clamp(44px, 5.6vw, 76px)/1.02 Manrope, sans-serif; letter-spacing: -.06em; }
.hero h1 em { color: var(--green); font-style: normal; position: relative; }
.hero h1 em::after { content: ""; position: absolute; height: 8px; left: 2px; right: 0; bottom: -3px; border-radius: 50%; background: var(--lime); transform: rotate(-1deg); z-index: -1; }
.hero-copy > p { max-width: 570px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 32px 0 40px; }
.text-link { font-weight: 700; border-bottom: 1px solid var(--ink); }
.trust-row { display: flex; gap: 38px; }
.trust-row div { display: flex; flex-direction: column; padding-right: 36px; border-right: 1px solid #d5dacf; }
.trust-row div:last-child { border: 0; }
.trust-row strong { font: 800 21px Manrope; }
.trust-row span { color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; perspective: 1000px; }
.browser-card { overflow: hidden; border: 9px solid white; border-radius: 18px; background: white; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.browser-bar { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; background: #f1f2ed; }
.browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c6cac1; }
.browser-bar span { margin: auto; padding: 5px 20px; border-radius: 5px; color: #858b82; background: white; font-size: 7px; }
.preview { min-height: 400px; padding: 25px; color: white; background: linear-gradient(110deg, rgba(8,27,20,.95), rgba(18,50,38,.78)), linear-gradient(30deg,#254936,#8ea491); }
.preview-nav { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.preview-nav b { font: 800 14px Manrope; }.preview-nav b span { color: var(--lime); }.preview-nav small { opacity: .7; }
.preview-content { width: 75%; padding: 78px 22px 30px; }
.preview-content span { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.preview-content h3 { margin: 10px 0; font: 800 clamp(27px, 3vw, 46px)/1.05 Manrope; letter-spacing: -.05em; }
.preview-content p { color: #d9e2dc; font-size: 11px; }
.preview-content b { display: inline-block; margin-top: 15px; padding: 11px 14px; border-radius: 5px; color: var(--ink); background: var(--lime); font-size: 8px; }
.floating-badge { position: absolute; right: -35px; bottom: -24px; display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-radius: 12px; background: white; box-shadow: var(--shadow); transform: rotate(-2deg); }
.floating-badge > span { display: grid; place-items: center; width: 32px; height: 32px; color: white; background: #29a85e; border-radius: 50%; }
.floating-badge div { display: flex; flex-direction: column; }.floating-badge b { font-size: 12px; }.floating-badge small { color: var(--muted); font-size: 9px; }
.logo-strip { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 46px; padding: 20px; color: #60675f; border-bottom: 1px solid #e7e9e2; font-size: 14px; font-weight: 700; }
.logo-strip > span { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.section { padding: 100px max(7vw, 28px); }
.section-heading { max-width: 650px; margin: 0 auto 55px; text-align: center; }
.section-heading h2, .cta-section h2 { margin: 14px 0; font: 800 clamp(34px, 4vw, 52px)/1.1 Manrope; letter-spacing: -.05em; }
.section-heading p { color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin: auto; }
.steps article { position: relative; padding: 12px 50px; text-align: center; border-right: 1px solid var(--line); }.steps article:last-child { border: 0; }
.steps article > span { position: absolute; left: 25px; top: 0; color: #c8cdc5; font: 800 12px Manrope; }
.step-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 16px; background: #eff8d4; font-size: 25px; }
.steps h3 { font: 800 18px Manrope; }.steps p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.templates-section { background: var(--cream); }
.template-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.template-card { min-height: 300px; overflow: hidden; border: 6px solid white; border-radius: 12px; box-shadow: 0 10px 35px rgba(20,35,23,.08); }
.template-card div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 20px; color: white; }
.template-card span { font-size: 9px; letter-spacing: .15em; }.template-card b { font: 800 20px Manrope; }.template-card small { margin-top: 15px; opacity: .7; }
.template-brick { background: linear-gradient(#0001,#000b), #9c4a2c; }.template-electric { background: linear-gradient(#071b23aa,#071b23ee), #146c7e; }.template-electric b { color: #f7dc4b; }
.template-water { background: linear-gradient(#003b6088,#003b60ee), #2196c7; }.template-paint { background: linear-gradient(160deg,#ffbe0b,#fb5607 45%,#8338ec); }.template-wood { background: linear-gradient(#2e1d1288,#2e1d12ed), #a8734e; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: auto; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 35px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.price-card.featured { border: 2px solid var(--green); box-shadow: var(--shadow); transform: translateY(-10px); }
.popular { position: absolute; top: 0; right: 22px; padding: 8px 13px; border-radius: 0 0 7px 7px; background: var(--green); color: white; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.price-card h3 { margin: 0; font: 800 22px Manrope; }.price-card > p { min-height: 45px; color: var(--muted); font-size: 13px; }
.price { margin: 20px 0; }.price strong { font: 800 34px Manrope; letter-spacing: -.05em; }.price span { color: var(--muted); font-size: 12px; }
.price-card ul { flex: 1; margin: 8px 0 28px; padding: 0; list-style: none; }.price-card li { padding: 8px 0; font-size: 14px; }.price-card li::before { content: "✓"; margin-right: 10px; color: var(--green); font-weight: 800; }
.cta-section { padding: 90px 24px; color: white; background: var(--green); text-align: center; }.cta-section .eyebrow { color: var(--lime); }.cta-section p { margin-bottom: 30px; color: #c8d8ce; }
.footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding: 45px max(7vw,28px); color: var(--muted); font-size: 13px; }.footer .brand { color: var(--ink); }
.messages { position: fixed; top: 90px; right: 20px; z-index: 100; }.message { padding: 14px 20px; border-radius: 9px; background: var(--green); color: white; box-shadow: var(--shadow); }
.auth-page { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 60px 20px; background: var(--cream); }
.auth-card { width: min(100%, 470px); padding: 45px; border-radius: 20px; background: white; box-shadow: var(--shadow); }.auth-card-wide { width: min(100%, 560px); }
.auth-card h1 { margin: 10px 0; font: 800 35px Manrope; letter-spacing: -.04em; }.auth-card > p { color: var(--muted); }
.stack-form { display: grid; gap: 4px; margin: 28px 0 20px; }.stack-form p { display: grid; gap: 6px; margin: 5px 0; }.stack-form label { font-size: 13px; font-weight: 700; }
.stack-form input, .stack-form textarea, .stack-form select { width: 100%; padding: 13px 14px; border: 1px solid #d8ddd5; border-radius: 8px; outline: none; }.stack-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e9f3e5; }
.stack-form .helptext { color: var(--muted); font-size: 11px; }.stack-form ul.errorlist { margin: 0; padding: 0; color: #b23b2b; list-style: none; font-size: 12px; }
.stack-form .button { margin-top: 12px; }.form-error { padding: 12px; color: #9f2d21; background: #fff0ed; border-radius: 8px; }
.auth-card > small { display: block; color: var(--muted); text-align: center; }.auth-card > small a { color: var(--green); font-weight: 700; }
.dashboard-shell { min-height: 70vh; padding: 60px max(6vw, 24px); background: var(--cream); }.dashboard-shell h1 { font: 800 38px Manrope; }
.dashboard-layout { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 245px 1fr; background: #f5f6f1; }
.sidebar { padding: 30px 18px; background: var(--ink); color: white; }.sidebar-brand { margin: 0 10px 35px; }.sidebar nav { display: grid; gap: 5px; }.sidebar nav a { padding: 13px 14px; border-radius: 8px; color: #bbc4bb; font-size: 13px; font-weight: 600; }.sidebar nav a:hover,.sidebar nav a.active { color: white; background: #ffffff12; }
.dashboard-content { min-width: 0; padding: 48px max(4vw,30px); }.dashboard-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 30px; }.dashboard-title h1 { margin: 8px 0; font: 800 clamp(30px,4vw,44px) Manrope; letter-spacing: -.05em; }.dashboard-title p { margin: 0; color: var(--muted); }
.card { padding: 32px; border: 1px solid #e0e4dc; border-radius: 15px; background: white; box-shadow: 0 8px 30px rgba(25,40,27,.05); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.field { display: grid; align-content: start; gap: 7px; }.field-wide { grid-column: 1/-1; }.field label { font-size: 13px; font-weight: 700; }.field input:not([type=checkbox]),.field textarea,.field select { width: 100%; padding: 13px 14px; border: 1px solid #d8ddd5; border-radius: 8px; background: white; outline: none; }.field input:focus,.field textarea:focus,.field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e9f3e5; }.field small { color: var(--muted); font-size: 11px; }.field-error { color: #a62d24; font-size: 12px; }
.toggle-field { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 8px; background: #f3f6ef; }.toggle-field input { width: 18px; height: 18px; accent-color: var(--green); }.form-actions { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.template-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 30px; }.template-option { cursor: pointer; }.template-option input { position: absolute; opacity: 0; }.template-preview { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: white; border: 5px solid white; border-radius: 12px; box-shadow: 0 8px 25px #17201718; background: #314d3b; }.template-preview i { color: var(--lime); font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .13em; }.template-preview b { margin: 5px 0; font: 800 22px Manrope; }.template-preview small { opacity: .7; }.template-option > strong { display: flex; align-items: center; gap: 8px; padding: 12px 5px; font-size: 13px; }.template-option > strong i { width: 16px; height: 16px; border: 1px solid #aeb5ac; border-radius: 50%; }.template-option input:checked + .template-preview { outline: 3px solid var(--green); }.template-option input:checked ~ strong i { border: 5px solid var(--green); }
.template-option-energy .template-preview { background: #08313c; }.template-option-flow .template-preview { background: #07547d; border-radius: 25px; }.template-option-color .template-preview { background: linear-gradient(135deg,#8338ec,#ff006e,#ffbe0b); }.template-option-craft .template-preview { background: #38261a; }
.status-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; padding: 18px 22px; border: 1px solid #dfe7d9; border-radius: 12px; background: #f4faed; }.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #3cab65; box-shadow: 0 0 0 5px #dcefe1; }.status-banner div { display: flex; flex: 1; flex-direction: column; }.status-banner b { font-size: 14px; }.status-banner small { color: var(--muted); }.status-banner > a { color: var(--green); font-size: 13px; font-weight: 700; }
.warning-banner { border-color: #f4d6b3; background: #fff7ed; }.warning-dot { background: #ef8b2c; box-shadow: 0 0 0 5px #f8dfbf; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 22px; }.metric-card { display: flex; min-height: 160px; flex-direction: column; padding: 25px; border: 1px solid #e0e4dc; border-radius: 13px; background: white; }.metric-card > span { color: var(--muted); font-size: 12px; }.metric-card strong { flex: 1; margin-top: 14px; font: 800 22px Manrope; }.metric-card strong small { color: #929991; font-size: 14px; }.metric-card a { color: var(--green); font-size: 12px; font-weight: 700; }
.metric-card > small { color: var(--muted); font-size: 11px; }.metric-card strong { font-size: 38px; }
.analytics-card { margin-bottom: 22px; }.analytics-card > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.analytics-card h2 { margin: 6px 0 25px; font: 800 20px Manrope; }.analytics-total { font: 800 24px Manrope; text-align: right; }.analytics-total small { display: block; color: var(--muted); font: 400 10px "DM Sans"; }
.upgrade-card p { max-width: 620px; color: var(--muted); line-height: 1.6; }
.bar-chart { height: 220px; display: grid; grid-template-columns: repeat(14,1fr); align-items: end; gap: 8px; padding-top: 20px; border-bottom: 1px solid #dfe3dc; }.bar-column { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }.bar-column > span { color: #8b9389; font-size: 9px; opacity: 0; }.bar-column:hover > span { opacity: 1; }.bar-column i { width: min(100%,26px); min-height: 4px; display: block; border-radius: 5px 5px 0 0; background: var(--green); transition: .2s; }.bar-column:hover i { background: #79a21d; }.bar-column small { padding: 7px 0; color: #8b9389; font-size: 8px; white-space: nowrap; }
.quick-actions h2 { margin-top: 0; font: 800 19px Manrope; }.quick-actions > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.quick-actions a { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }.quick-actions a > span { grid-row: 1/3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #edf5dc; }.quick-actions b { font-size: 13px; }.quick-actions small { color: var(--muted); font-size: 11px; }
.dashboard-pricing { max-width: none; }.dashboard-pricing .button { width: 100%; }.dashboard-pricing button:disabled { cursor: default; opacity: .7; transform: none; }
.narrow-card { max-width: 680px; }.current-url { display: flex; flex-direction: column; margin-bottom: 28px; padding: 18px; border-radius: 9px; background: #f1f5ec; }.current-url small { color: var(--muted); }.current-url strong { margin-top: 4px; color: var(--green); overflow-wrap: anywhere; }
.dns-card { margin-top: 22px; }.dns-card h2 { margin: 8px 0; font: 800 22px Manrope; }.dns-card p { color: var(--muted); }.dns-list { display: grid; gap: 10px; margin: 22px 0; }.dns-list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafbf8; }.dns-list dt { color: var(--muted); font-size: 12px; font-weight: 700; }.dns-list dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.empty-state { display: grid; justify-items: center; max-width: 650px; margin: 40px auto; padding: 60px 30px; text-align: center; }.empty-state > span { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 18px; background: #edf5dc; font-size: 27px; }.empty-state h2 { margin-bottom: 5px; font: 800 25px Manrope; }.empty-state p { margin-bottom: 25px; color: var(--muted); }
.gallery-admin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.gallery-admin-card { overflow: hidden; border: 1px solid #dfe3dc; border-radius: 13px; background: white; }.gallery-cover { height: 190px; display: grid; place-items: center; color: #818980; background: #e7eae3 center/cover; font-size: 12px; }.gallery-admin-card > div:last-child { padding: 20px; }.gallery-admin-card small { color: var(--muted); }.gallery-admin-card h3 { margin: 6px 0; font: 800 18px Manrope; }.gallery-admin-card p { min-height: 38px; color: var(--muted); font-size: 12px; }.gallery-admin-card > div > div { display: flex; gap: 20px; padding-top: 12px; border-top: 1px solid var(--line); }.gallery-admin-card form { margin: 0; }.gallery-admin-card a,.gallery-admin-card button { padding: 0; border: 0; color: var(--green); background: none; font-size: 12px; font-weight: 700; cursor: pointer; }.gallery-admin-card button { color: #a54438; }
.form-section-title { margin: 35px 0 18px; padding-top: 25px; border-top: 1px solid var(--line); font: 800 19px Manrope; }.photo-formset { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.photo-field { display: grid; gap: 9px; align-content: start; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }.photo-field img { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; }.photo-field label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }.photo-field input[type=file],.photo-field input[type=text] { max-width: 100%; padding: 8px; border: 1px solid #d8ddd5; border-radius: 6px; background: white; }.photo-field label:has(input[type=checkbox]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
@media (max-width: 900px) {
  .topnav > a:not(.button), .topnav form { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 55px; }.hero-visual { max-width: 650px; }.floating-badge { right: -5px; }
  .logo-strip { flex-wrap: wrap; gap: 20px; }.logo-strip > span { width: 100%; text-align: center; }
  .steps, .pricing-grid { grid-template-columns: 1fr; }.steps article { border: 0; border-bottom: 1px solid var(--line); padding: 35px; }
  .template-cards { grid-template-columns: repeat(2, 1fr); }.price-card.featured { transform: none; }
  .footer { grid-template-columns: 1fr; text-align: center; }.footer .brand { justify-content: center; }
  .dashboard-layout { grid-template-columns: 1fr; }.sidebar { display: none; }.template-picker { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid,.quick-actions > div { grid-template-columns: 1fr; }.gallery-admin-grid { grid-template-columns: repeat(2,1fr); }.photo-formset { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero { padding-left: 22px; padding-right: 22px; }.hero h1 { font-size: 43px; }.hero-actions { align-items: stretch; flex-direction: column; }.text-link { align-self: center; }
  .trust-row { gap: 13px; }.trust-row div { padding-right: 13px; }.trust-row strong { font-size: 17px; }
  .preview { min-height: 300px; }.preview-content { width: 95%; padding: 55px 5px; }.preview-nav small { display: none; }
  .template-cards { grid-template-columns: 1fr; }.template-card { min-height: 220px; }
  .auth-card { padding: 30px 22px; }
  .dashboard-content { padding: 32px 18px; }.dashboard-title { align-items: flex-start; flex-direction: column; }.form-grid,.template-picker { grid-template-columns: 1fr; }.card { padding: 22px 17px; }
  .status-banner { align-items: flex-start; flex-wrap: wrap; }.status-banner > a { width: 100%; margin-left: 24px; }.gallery-admin-grid,.photo-formset { grid-template-columns: 1fr; }
  .bar-chart { gap: 3px; }.bar-column small { font-size: 7px; transform: rotate(-45deg); transform-origin: center; margin-bottom: -8px; }.analytics-card { overflow: hidden; }
}