:root{--bg:#f4f1ea;--paper:#fbf9f4;--ink:#0b0d10;--muted:#64686f;--line:rgba(11,13,16,.15);--dark:#101319;--lime:#d8ff55;--violet:#bca9ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit}
.shell{width:min(1120px,calc(100% - 44px));margin:auto}
.section{padding:88px 0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:1000}

.site-header{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(11,13,16,.08)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;text-decoration:none;font-size:14px;letter-spacing:-.04em}
.brand span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:900;margin-right:7px}
.brand i{font-style:normal;color:#aaa;margin-left:2px}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:12px;font-weight:750;text-decoration:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:14px 18px;text-decoration:none;font-size:12px;font-weight:850;cursor:pointer;transition:.2s}
.button:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--lime)}
.button-small{padding:9px 13px}
.button-wide{width:100%}
.text-link{display:inline-block;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:12px;font-weight:800}
.menu-button{display:none;border:0;background:none;font-weight:800}
.mobile-nav{display:none}

.eyebrow{margin:0 0 14px;font-size:9px;font-weight:900;letter-spacing:.1em;color:#6e7279}
.eyebrow.light{color:#aab0ba}
.eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px}

.hero{padding:74px 0 82px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}
.hero h1,.section-heading h2,.faq-grid h2,.contact-section h2{font-size:clamp(45px,6.1vw,80px);line-height:.96;letter-spacing:-.064em;margin:0;font-weight:900}
.hero h1 em{font-family:Georgia,serif;font-weight:400}
.hero-copy{font-size:17px;color:#595d64;max-width:610px;margin:25px 0}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.trust-row span{border:1px solid var(--line);padding:6px 8px;font-size:9px;font-weight:800}

.website-showcase{position:relative;min-height:440px}
.browser{position:absolute;inset:14px 28px 28px 0;background:#fff;border:1px solid #cbc5ba;box-shadow:20px 20px 0 #dcd6cb;overflow:hidden}
.browser-bar{height:35px;background:#efebe3;border-bottom:1px solid #d8d2c7;display:flex;align-items:center;gap:5px;padding:0 10px}
.browser-bar i{width:6px;height:6px;border-radius:50%;background:#a4a09a}
.browser-bar span{font-size:8px;color:#888;margin-left:5px}
.demo-site{height:calc(100% - 35px);background:#f9f7f2}
.demo-nav{height:47px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:7px;border-bottom:1px solid #e2ddd4}
.demo-nav span{color:#777}
.demo-hero{padding:34px 24px}
.demo-hero small{font-size:7px;color:#7a7d82;letter-spacing:.08em}
.demo-hero strong{display:block;font-size:40px;line-height:.88;letter-spacing:-.06em;margin-top:27px}
.demo-hero em{font-family:Georgia,serif;font-weight:400}
.demo-hero p{font-size:9px;color:#666;max-width:250px;margin:18px 0}
.demo-hero button,.phone button,.mini-body button,.landscape-card button{border:0;background:#111;color:#fff;padding:9px 11px;font-size:7px;font-weight:800}
.demo-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ded8ce;margin-top:4px}
.demo-strip span{padding:13px;text-align:center;font-size:7px}
.demo-strip span+span{border-left:1px solid #ded8ce}
.phone{position:absolute;right:0;bottom:0;width:115px;height:220px;border:5px solid #111;border-radius:20px;background:#111;box-shadow:8px 8px 0 var(--lime)}
.phone-screen{height:100%;border-radius:14px;background:#f5f2eb;padding:17px 12px;color:#111}
.phone-screen b{font-size:8px}
.phone-screen strong{display:block;font-size:20px;line-height:1;margin:40px 0 25px;letter-spacing:-.04em}
.phone-screen button{font-size:6px}
.demo-label{position:absolute;left:-8px;bottom:2px;background:var(--lime);padding:6px 8px;font-size:7px;font-weight:900;letter-spacing:.08em}
.mobile-prices{display:none}

.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:42px}
.section-heading>div{max-width:760px}
.section-heading h2,.faq-grid h2,.contact-section h2{font-size:clamp(36px,4.5vw,58px)}
.section-heading>p{max-width:470px;color:var(--muted);font-size:14px}

.packages-section{background:#e8e3da}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.package-card{background:var(--paper);border:1px solid var(--line);padding:27px;display:flex;flex-direction:column;min-height:520px}
.package-card.featured{background:var(--dark);color:#fff;border-color:var(--dark)}
.badge{font-size:8px;font-weight:900;letter-spacing:.1em}
.package-card h3{font-size:25px;letter-spacing:-.04em;margin:8px 0}
.package-card>div:first-child p{font-size:12px;color:#666a70;min-height:58px}
.featured>div:first-child p{color:#adb2bb}
.price{margin:24px 0}
.price small{display:block;font-size:10px;color:#777b82}
.price strong{font-size:41px;letter-spacing:-.06em}
.package-card ul{list-style:none;margin:0 0 25px;padding:0;border-top:1px solid var(--line)}
.featured ul{border-color:#343943}
.package-card li{padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}
.featured li{border-color:#343943;color:#c5c8ce}
.package-card .button{margin-top:auto}
.custom-note{margin-top:18px;border:1px solid var(--line);padding:19px 21px;display:flex;justify-content:space-between;gap:30px;align-items:center}
.custom-note p{margin:0;font-size:12px}
.custom-note a{font-size:12px;font-weight:850;text-decoration:none}

.work-section{background:#fff}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work-preview{height:300px;position:relative;overflow:hidden;padding:36px}
.concept-badge{position:absolute;z-index:2;top:12px;left:12px;background:#fff;padding:5px 7px;font-size:7px;font-weight:900;letter-spacing:.08em}
.contractor{background:#c9c0b4}
.mini-browser{height:100%;background:#15191e;color:#fff;box-shadow:14px 14px 0 rgba(0,0,0,.12)}
.mini-top{height:30px;border-bottom:1px solid #323740;padding:10px;font-size:6px}
.mini-body{padding:24px 18px}
.mini-body small{font-size:6px;color:#999}
.mini-body strong{display:block;font-size:27px;line-height:.9;letter-spacing:-.05em;margin:36px 0 25px}
.restaurant{background:var(--lime);display:grid;place-items:center}
.restaurant-card{background:#17191d;color:#fff;padding:28px;width:80%;transform:rotate(-4deg)}
.restaurant-card small{font-size:6px;color:#aaa}
.restaurant-card strong{display:block;font-size:31px;line-height:.86;letter-spacing:-.055em;margin:25px 0}
.restaurant-card em{font-family:Georgia,serif;font-weight:400}
.restaurant-card div{display:flex;justify-content:space-between;font-size:6px;color:var(--lime)}
.landscaping{background:#9dbeb0}
.landscape-card{height:100%;background:#f5f2eb;padding:24px}
.landscape-card small{font-size:6px;color:#777}
.landscape-card strong{display:block;font-size:28px;line-height:.9;letter-spacing:-.05em;margin:40px 0 26px}
.work-meta{display:flex;justify-content:space-between;align-items:flex-start;padding:13px 0}
.work-meta small{font-size:7px;letter-spacing:.08em;color:#7e8288}
.work-meta h3{margin:4px 0;font-size:17px}
.work-meta>span{font-size:10px;color:#888}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.services-grid article{padding:25px;border-right:1px solid var(--line);min-height:265px}
.services-grid article:first-child{border-left:1px solid var(--line)}
.services-grid span,.process-grid span{font-size:9px;font-weight:850;color:#777b82}
.services-grid h3,.process-grid h3{font-size:22px;letter-spacing:-.04em;margin:45px 0 8px}
.services-grid p,.process-grid p{font-size:12px;color:#656970}
.services-grid a{display:inline-block;margin-top:20px;font-size:11px;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor}

.process-section{background:#f7f5f0}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.process-grid article{padding:25px;border-right:1px solid var(--line);min-height:220px}
.process-grid article:first-child{border-left:1px solid var(--line)}

.faq-section{background:#fff}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:75px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{padding:20px 0;border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:16px;font-weight:850}
.faq-list p{font-size:12px;color:#656970;max-width:650px;margin:12px 0 0}

.contact-section{background:var(--dark);color:#fff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.contact-copy{color:#b0b5be}
.contact-benefits{display:grid;gap:8px;margin-top:26px;color:#d7d9de;font-size:11px}
.contact-form{background:var(--paper);color:var(--ink);padding:28px;box-shadow:10px 10px 0 var(--lime)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:block;font-size:9px;font-weight:900;letter-spacing:.05em;margin-bottom:15px}
input,select,textarea{display:block;width:100%;border:0;border-bottom:1px solid #c4beb4;background:transparent;padding:10px 0;border-radius:0;color:var(--ink);outline:none}
.form-note{font-size:10px;color:#74777d;margin:12px 0 0}

footer{background:#080a0e;color:#f7f4ed;padding-top:55px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px}
.footer-grid>div:first-child p{font-size:12px;color:#8d929b;max-width:340px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:7px}
.footer-grid b{font-size:8px;letter-spacing:.1em;color:#727781;margin-bottom:8px}
.footer-grid a{font-size:11px;color:#d4d6db;text-decoration:none}
.footer-brand{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;padding:17px 0;margin-top:45px;border-top:1px solid #272a31;color:#747982;font-size:9px}

@media(max-width:850px){
  .nav-links,.desktop-cta{display:none}
  .menu-button{display:block}
  .mobile-nav.open{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--bg);padding:22px;flex-direction:column;gap:16px;border-bottom:1px solid var(--line)}
  .mobile-nav a{text-decoration:none;font-weight:800}
  .hero-grid,.contact-grid,.faq-grid{grid-template-columns:1fr}
  .section-heading{align-items:flex-start;flex-direction:column}
  .package-grid,.work-grid{grid-template-columns:1fr}
  .services-grid,.process-grid{grid-template-columns:1fr}
  .services-grid article,.process-grid article{border-left:1px solid var(--line);border-bottom:1px solid var(--line);min-height:auto}
  .section{padding:72px 0}
  .website-showcase{min-height:400px}
  .work-preview{height:340px}
}
@media(max-width:540px){
  .shell{width:min(100% - 28px,1120px)}
  .hero{padding-top:50px;padding-bottom:42px}
  .hero h1{font-size:50px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .trust-row{margin-top:28px}
  .website-showcase{display:none}
  .mobile-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:30px}
  .mobile-prices a{background:#fff;border:1px solid var(--line);padding:11px 10px;text-decoration:none}
  .mobile-prices span{display:block;font-size:7px;font-weight:900;letter-spacing:.06em;color:#777}
  .mobile-prices strong{display:block;font-size:20px;letter-spacing:-.05em}
  .custom-note{align-items:flex-start;flex-direction:column}
  .form-row,.footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px}
  .work-preview{height:300px}
}

.legal-page{max-width:800px}.legal-page h1{font-size:clamp(44px,6vw,72px);line-height:.98;letter-spacing:-.05em}.legal-page p{color:#5f636a}.legal-page .brand{margin-bottom:55px}.legal-note{border-left:3px solid var(--lime);padding-left:15px;margin:30px 0}
