:root {
  --forest: #1F5A45;
  --terracotta: #D96C4A;
  --teal: #39AFA9;
  --sky: #A9DDE3;
  --cream: #F7F3EA;
  --ink: #183238;
  --sage: #B8C5B8;
  --white: #fffdf8;
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow: 0 24px 80px rgba(24, 50, 56, .10);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.section-pad { padding: 112px 0; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: -.04em; line-height: 1.04; }
h1 { font-size: clamp(3.25rem, 7vw, 6.5rem); margin-bottom: 28px; font-weight: 800; }
h2 { font-size: clamp(2.55rem, 5vw, 4.8rem); margin-bottom: 28px; font-weight: 800; }
h3 { font-size: 1.45rem; margin-bottom: 12px; }
p { color: rgba(24,50,56,.75); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow.light { color: var(--sky); }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 12px 0 0 var(--terracotta); margin-right: 12px; }
.accent-text { color: var(--terracotta); }
.accent-underline { position: relative; z-index: 1; white-space: nowrap; }
.accent-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .18em; background: var(--terracotta); z-index: -1; transform: rotate(-1deg); opacity: .9; }
.highlight-sky { background: linear-gradient(transparent 62%, var(--sky) 62%); }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--terracotta); color: var(--white); box-shadow: 0 10px 24px rgba(217,108,74,.2); }
.button-primary:hover { box-shadow: 0 14px 34px rgba(217,108,74,.28); }
.button-secondary { border-color: var(--forest); color: var(--forest); background: rgba(247,243,234,.62); }
.button-secondary:hover { background: var(--forest); color: var(--cream); }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 10px; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color .28s ease, box-shadow .28s ease;
}
.site-header.scrolled {
  background: rgba(247,243,234,.97);
  box-shadow: 0 1px 0 rgba(31,90,69,.12), 0 8px 26px rgba(24,50,56,.05);
}
.nav-wrap {
  height:148px;
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:height .3s cubic-bezier(.22,.61,.36,1), padding .3s cubic-bezier(.22,.61,.36,1);
}
.site-header.scrolled .nav-wrap { height:76px; padding:6px 0; }
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:80px;
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1.1rem;
  transition:min-height .3s cubic-bezier(.22,.61,.36,1), gap .3s ease;
}
.brand-logo {
  display:block;
  width:112px;
  height:112px;
  aspect-ratio:1;
  object-fit:contain;
  flex:0 0 auto;
  border-radius:0;
  transition:width .3s cubic-bezier(.22,.61,.36,1), height .3s cubic-bezier(.22,.61,.36,1);
}
.site-header.scrolled .brand { min-height:58px; gap:10px; }
.site-header.scrolled .brand-logo { width:54px; height:54px; border-radius:0; }
.brand-logo-shell { width: 68px; height: 68px; display:grid; place-items:center; border-radius:14px; background:var(--cream); overflow:hidden; flex:0 0 auto; }
.brand-logo-shell .brand-logo { width:64px; height:64px; border-radius:12px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; font-size: .9rem; font-weight: 700; }
.desktop-nav > a:not(.button) { position: relative; }
.desktop-nav > a:not(.button)::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--terracotta); transition:right .2s; }
.desktop-nav > a:not(.button):hover::after { right:0; }
.menu-button { display:none; width:42px; height:42px; border:1px solid rgba(31,90,69,.22); background:transparent; border-radius:10px; align-items:center; justify-content:center; flex-direction:column; gap:7px; }
.menu-button span { width:19px; height:2px; background:var(--ink); transition:.2s; }
.mobile-nav { display:none; }

.hero { padding-top: 200px; min-height: 820px; display: flex; align-items: center; position: relative; overflow: hidden; overflow: clip; }
.hero::before { content:""; position:absolute; width:540px; height:540px; background:var(--sky); border-radius:50%; filter:blur(0); opacity:.22; top:-170px; right:-150px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:70px; }
.hero-copy { position:relative; z-index:2; }
.hero-text { font-size: 1.14rem; max-width: 690px; margin-bottom: 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.micro-trust { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:.78rem; font-weight:700; margin-top:28px; color:rgba(24,50,56,.62); }
.micro-trust i { width:4px; height:4px; background:var(--teal); border-radius:50%; }
.hero-visual { height: 610px; position:relative; }
.geo-grid { position:absolute; inset:6% -16% 8% 5%; background-image: linear-gradient(rgba(31,90,69,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(31,90,69,.08) 1px,transparent 1px); background-size:35px 35px; border-radius:40px; mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent); }
.orbit { position:absolute; border:1px solid rgba(57,175,169,.35); border-radius:50%; }
.orbit-one { width:370px; height:370px; right:-55px; top:-20px; }
.orbit-two { width:240px; height:240px; right:10px; top:45px; border-style:dashed; }
.browser-mockup { position:absolute; width:560px; max-width:100%; height:392px; right:-5px; top:104px; border:1px solid rgba(31,90,69,.18); border-radius:20px; background:var(--white); overflow:hidden; box-shadow:var(--shadow); transform:rotate(2.8deg); }
.browser-bar { height:37px; background:#edf0e9; display:flex; align-items:center; gap:6px; padding:0 13px; }
.browser-bar > span, .project-bar span { width:7px; height:7px; border-radius:50%; background:var(--sage); }
.browser-bar > span:nth-child(1), .project-bar span:nth-child(1){ background:var(--terracotta); }
.browser-bar > span:nth-child(2), .project-bar span:nth-child(2){ background:#E0AE55; }
.browser-bar > span:nth-child(3), .project-bar span:nth-child(3){ background:var(--teal); }
.browser-address { height:14px; width:38%; background:rgba(184,197,184,.35); border-radius:999px; margin-left:9px; }
.mockup-body { padding:22px 25px; }
.mockup-nav { display:flex; justify-content:space-between; align-items:center; }
.mock-logo { width:70px; height:10px; background:var(--forest); border-radius:5px; }
.mock-links { display:flex; gap:8px; }
.mock-links b { width:28px; height:5px; background:rgba(24,50,56,.2); border-radius:3px; }
.mock-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; padding:46px 0 36px; }
.mini-label { display:block; width:58px; height:7px; border-radius:4px; background:var(--teal); margin-bottom:15px; }
.mock-copy strong { display:block; width:90%; height:17px; background:var(--ink); border-radius:5px; margin-bottom:8px; }
.mock-copy strong.short { width:67%; }
.mock-copy p { width:88%; height:7px; background:rgba(24,50,56,.18); border-radius:4px; margin:17px 0 7px; }
.mock-copy p.shorter { width:65%; margin-top:0; }
.mock-button { width:86px; height:27px; border-radius:7px; background:var(--terracotta); margin-top:19px; }
.mock-card-stack { position:relative; min-height:170px; }
.shape { position:absolute; border-radius:18px; box-shadow:0 16px 30px rgba(24,50,56,.08); }
.shape.teal { width:112px; height:120px; background:var(--teal); right:15px; top:4px; transform:rotate(8deg); }
.shape.green { width:124px; height:132px; background:var(--forest); right:58px; top:28px; transform:rotate(-5deg); }
.shape.terracotta { width:78px; height:78px; background:var(--terracotta); left:9px; bottom:2px; border-radius:50%; }
.mock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid rgba(184,197,184,.35); padding-top:18px; }
.mock-stats em { display:block; font-style:normal; font-size:.7rem; font-weight:800; color:var(--forest); }
.mock-stats span { font-size:.49rem; color:rgba(24,50,56,.55); }
.phone-mockup { position:absolute; width:173px; height:348px; right:-31px; bottom:-2px; border:5px solid var(--ink); border-radius:29px; background:var(--white); overflow:hidden; box-shadow:0 24px 60px rgba(24,50,56,.22); transform:rotate(-5deg); }
.phone-notch { position:absolute; width:72px; height:17px; background:var(--ink); left:50%; transform:translateX(-50%); border-radius:0 0 12px 12px; z-index:2; }
.phone-screen { padding:34px 16px 16px; }
.phone-logo { width:48px; height:6px; border-radius:3px; background:var(--forest); }
.phone-hero-shape { height:114px; border-radius:16px; background:linear-gradient(145deg,var(--sky),var(--teal)); margin:19px 0; position:relative; overflow:hidden; }
.phone-hero-shape::before { content:""; position:absolute; width:80px; height:80px; border-radius:50%; background:var(--terracotta); right:-16px; bottom:-22px; }
.phone-screen strong { display:block; width:92%; height:10px; border-radius:4px; background:var(--ink); margin-bottom:6px; }
.phone-screen strong.short { width:62%; }
.phone-screen p { height:5px; margin:14px 0 6px; border-radius:3px; background:rgba(24,50,56,.16); }
.phone-screen p + p { margin-top:0; width:73%; }
.phone-button { width:68px; height:22px; background:var(--terracotta); border-radius:6px; margin-top:16px; }
.float-chip { position:absolute; z-index:3; font-size:.7rem; font-weight:800; background:var(--white); padding:10px 14px; border-radius:10px; box-shadow:0 12px 30px rgba(24,50,56,.12); border:1px solid rgba(184,197,184,.35); }
.chip-one { left:-10px; top:78px; transform:rotate(-4deg); color:var(--forest); }
.chip-two { left:58px; bottom:19px; transform:rotate(3deg); color:var(--terracotta); }

.trust-strip { background:var(--forest); color:var(--cream); padding:34px 0; }
.trust-grid { display:grid; grid-template-columns:.85fr 1.6fr; align-items:center; gap:50px; }
.trust-intro { font-size:.94rem; font-weight:700; max-width:420px; }
.trust-points { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-points span { display:flex; flex-direction:column; gap:3px; font-size:.79rem; font-weight:700; color:rgba(247,243,234,.82); }
.trust-points b { color:var(--teal); font-size:.62rem; letter-spacing:.1em; }

.split-heading { display:grid; grid-template-columns:1.4fr .6fr; align-items:end; gap:70px; margin-bottom:54px; }
.split-heading p { margin-bottom:9px; font-size:1.04rem; }
.problem { position:relative; }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.problem-card { min-height:240px; padding:30px; background:var(--white); border:1px solid rgba(184,197,184,.55); border-radius:var(--radius-md); display:flex; flex-direction:column; justify-content:flex-end; position:relative; transition:transform .25s; }
.problem-card:hover { transform:translateY(-5px); }
.problem-card > span { position:absolute; top:23px; left:28px; font-size:.67rem; letter-spacing:.12em; font-weight:800; color:var(--terracotta); }
.problem-card.sky { background:#DCEFF1; }
.problem-card.green { background:var(--forest); color:var(--cream); }
.problem-card.green p { color:rgba(247,243,234,.72); }
.problem-card.green > span { color:var(--sky); }
.problem-card p { margin-bottom:0; font-size:.91rem; }

.services { background:#f1eee6; }
.section-heading { max-width:820px; margin-bottom:54px; }
.section-heading p { font-size:1.05rem; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.service-card { padding:22px 22px 30px; border-radius:var(--radius-md); border:1px solid rgba(184,197,184,.55); background:var(--cream); }
.service-card.feature { background:var(--white); transform:translateY(-14px); box-shadow:0 24px 60px rgba(24,50,56,.07); }
.service-visual { height:210px; border-radius:16px; margin-bottom:28px; position:relative; overflow:hidden; }
.visual-one { background:var(--sky); }
.visual-two { background:var(--forest); }
.visual-three { background:#E9D6CC; }
.mini-browser { position:absolute; width:75%; height:65%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-3deg); border-radius:9px; background:var(--white); box-shadow:0 15px 30px rgba(24,50,56,.12); }
.mini-browser::before { content:""; position:absolute; inset:12px 12px auto; height:7px; width:35%; background:var(--forest); border-radius:4px; }
.mini-browser::after { content:""; position:absolute; left:12px; top:38px; width:55%; height:45%; border-radius:8px; background:linear-gradient(135deg,var(--terracotta),#F6C0A7); box-shadow:75px 0 0 -10px var(--sky); }
.visual-two .mini-browser { transform:translate(-50%,-50%) rotate(4deg); }
.visual-two .mini-browser::after { background:linear-gradient(135deg,var(--teal),var(--sky)); box-shadow:75px 0 0 -10px var(--terracotta); }
.visual-three .mini-browser::after { background:linear-gradient(135deg,var(--forest),#6A9A83); box-shadow:75px 0 0 -10px var(--teal); }
.service-number { display:inline-block; margin-bottom:24px; font-size:.68rem; font-weight:800; letter-spacing:.12em; color:var(--terracotta); }
.service-card p { font-size:.93rem; min-height:90px; }
.service-card a { display:flex; justify-content:space-between; border-top:1px solid rgba(184,197,184,.55); padding-top:18px; font-size:.86rem; font-weight:800; color:var(--forest); }
.service-card a span { color:var(--terracotta); }

.templates-section { background:var(--ink); color:var(--cream); }
.split-heading.light p { color:rgba(247,243,234,.67); }
.template-list { display:flex; flex-direction:column; gap:80px; }
.project-card { display:grid; grid-template-columns:1.55fr .45fr; gap:44px; align-items:end; }
.project-visual { min-height:525px; border-radius:var(--radius-lg); position:relative; overflow:hidden; }
.project-one { background:#E9CFC1; }
.project-two { background:#B9D2C5; }
.project-three { background:#BDE5E4; }
.project-browser { position:absolute; width:78%; height:74%; left:7%; top:12%; background:var(--white); border-radius:16px; overflow:hidden; box-shadow:0 32px 80px rgba(24,50,56,.24); }
.project-bar { height:29px; display:flex; gap:5px; align-items:center; padding:0 10px; background:#eef0ea; }
.project-bar span { width:6px; height:6px; }
.project-site { height:calc(100% - 29px); position:relative; overflow:hidden; padding:20px 25px; color:var(--ink); }
.project-brand { font-weight:800; font-size:.7rem; letter-spacing:.11em; }
.project-menu { position:absolute; top:23px; right:23px; width:90px; height:5px; border-radius:3px; background:rgba(24,50,56,.17); }
.salon-site { background:#FFF8F1; }
.salon-copy, .contractor-copy, .clinic-copy { position:absolute; left:7%; top:25%; z-index:2; width:46%; }
.project-site small { font-size:.45rem; font-weight:800; letter-spacing:.16em; color:var(--terracotta); }
.project-site h4 { font-size:2rem; margin:10px 0 20px; }
.mini-cta { width:82px; height:25px; border-radius:5px; background:var(--terracotta); }
.abstract-photo { position:absolute; right:4%; top:17%; width:42%; height:68%; background:linear-gradient(145deg,#C28F78,#F2DDCF); border-radius:50% 50% 8% 8%; }
.abstract-photo::before { content:""; position:absolute; width:54%; height:62%; background:#663F35; border-radius:50% 50% 42% 42%; left:23%; top:16%; opacity:.72; }
.contractor-site { background:#F5F4ED; }
.contractor-copy { width:53%; }
.contractor-grid { position:absolute; right:0; bottom:0; width:40%; height:72%; display:grid; grid-template-columns:1fr 1fr; gap:7px; transform:rotate(4deg) translate(8%,9%); }
.contractor-grid span:nth-child(1){ background:#40554E; }.contractor-grid span:nth-child(2){background:#D79070}.contractor-grid span:nth-child(3){background:#AFC6BA}.contractor-grid span:nth-child(4){background:#273B36}
.clinic-site { background:#F8FAF5; }
.clinic-shape { position:absolute; width:47%; height:76%; right:4%; top:15%; border-radius:46% 46% 8% 8%; background:linear-gradient(145deg,#7ACAC4,#C8EEEB); }
.clinic-shape::after { content:""; position:absolute; width:42%; height:42%; border-radius:50%; background:var(--terracotta); right:9%; bottom:10%; opacity:.82; }
.project-phone { position:absolute; width:135px; height:270px; right:6%; bottom:3%; border:5px solid var(--ink); border-radius:24px; background:var(--white); overflow:hidden; transform:rotate(4deg); box-shadow:0 24px 55px rgba(24,50,56,.25); }
.phone-site { padding:24px 10px 10px; height:100%; color:var(--ink); }
.phone-site > span { font-size:.43rem; letter-spacing:.1em; font-weight:800; }
.phone-site > div { height:110px; border-radius:9px; margin:14px 0; }
.phone-site b, .phone-site i { display:block; height:8px; border-radius:4px; background:var(--ink); width:90%; margin-top:8px; }
.phone-site i { width:65%; height:5px; background:rgba(24,50,56,.2); }
.salon-mobile > div { background:#E8C4B4; }.contractor-mobile > div { background:#789587; }.clinic-mobile > div { background:#7ACAC4; }
.project-info { padding-bottom:20px; }
.project-info > div { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.project-info > div span { padding:6px 10px; border:1px solid rgba(247,243,234,.2); border-radius:7px; font-size:.64rem; color:rgba(247,243,234,.66); }
.project-info h3 { font-size:2rem; margin-bottom:14px; color:var(--cream); }
.project-info p { color:rgba(247,243,234,.72); font-size:.91rem; }
.template-link { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:var(--sky); font-size:.86rem; font-weight:800; }
.template-link:hover { color:var(--cream); }
.template-note { grid-column:1 / -1; margin:18px 0 0; padding:12px 14px; border:1px solid rgba(169,221,227,.18); border-radius:10px; color:rgba(247,243,234,.7) !important; font-size:.78rem !important; }
.template-note strong { color:var(--sky); }

.process { background:var(--cream); }
.process-wrap { display:grid; grid-template-columns:.78fr 1.22fr; gap:80px; align-items:start; }
.process-heading { position:sticky; top:130px; }
.process-heading p { max-width:460px; }
.process-steps { position:relative; padding-left:70px; }
.latitude-line { position:absolute; width:2px; top:24px; bottom:24px; left:24px; background:linear-gradient(var(--teal),var(--terracotta)); opacity:.7; }
.process-step { min-height:175px; border-bottom:1px solid rgba(184,197,184,.6); padding:18px 0 36px; position:relative; }
.step-dot { position:absolute; left:-70px; top:12px; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:var(--forest); color:var(--cream); font-size:.68rem; font-weight:800; box-shadow:0 0 0 10px var(--cream); }
.process-step:nth-of-type(3) .step-dot { background:var(--teal); }.process-step:nth-of-type(4) .step-dot { background:var(--terracotta); }
.process-step h3 { font-size:2rem; margin-bottom:10px; }
.process-step p { max-width:480px; }

.why { background:var(--forest); color:var(--cream); }
.why-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.coordinate-card { aspect-ratio:1 / 1; border-radius:var(--radius-lg); background:#174D3B; position:relative; overflow:hidden; border:1px solid rgba(169,221,227,.2); }
.coordinate-label { position:absolute; left:25px; top:22px; font-size:.65rem; color:var(--sky); letter-spacing:.08em; }
.coordinate-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(169,221,227,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(169,221,227,.08) 1px,transparent 1px); background-size:38px 38px; }
.coordinate-axis { position:absolute; background:rgba(169,221,227,.4); }.coordinate-axis.x{left:0;right:0;height:1px;top:58%;}.coordinate-axis.y{top:0;bottom:0;width:1px;left:44%;}
.coordinate-point { position:absolute; width:17px; height:17px; border-radius:50%; box-shadow:0 0 0 7px rgba(255,255,255,.07); }
.coordinate-point.p1 { left:31%; top:33%; background:var(--teal); }.coordinate-point.p2 { left:62%; top:47%; background:var(--terracotta); }.coordinate-point.p3 { left:51%; top:70%; background:var(--sky); }
.coordinate-message { position:absolute; bottom:32px; left:30px; right:30px; padding:18px; background:rgba(247,243,234,.08); border:1px solid rgba(247,243,234,.12); border-radius:14px; font-weight:800; font-size:1.08rem; }
.why-copy h2 { max-width:680px; }
.why-copy p { color:rgba(247,243,234,.7); font-size:1.03rem; }
.why-points { display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px; margin-top:36px; }
.why-points span { padding:15px 0; border-top:1px solid rgba(247,243,234,.16); font-size:.9rem; font-weight:700; }

.philippines { background:#F0EEE5; }
.phil-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.local-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.local-card { min-height:230px; padding:25px; border-radius:var(--radius-md); background:var(--cream); border:1px solid rgba(184,197,184,.6); }
.local-card:nth-child(2) { background:var(--sky); }.local-card:nth-child(3) { background:var(--forest); color:var(--cream); }.local-card:nth-child(3) p { color:rgba(247,243,234,.7); }
.local-card span { display:inline-block; color:var(--terracotta); font-weight:800; font-size:.68rem; letter-spacing:.12em; margin-bottom:55px; }
.local-card h3 { font-size:1.3rem; }
.local-card p { font-size:.88rem; margin-bottom:0; }

.testimonials { background:var(--cream); }
.testimonial-grid,.faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.faq-card { border:1px solid rgba(184,197,184,.62); border-radius:var(--radius-md); padding:28px; background:rgba(255,253,248,.64); }
.faq-card h3 { font-size:1.15rem; line-height:1.25; }
.faq-card p { margin-bottom:0; font-size:.93rem; }
.testimonial { margin:0; min-height:370px; padding:28px; background:var(--white); border:1px solid rgba(184,197,184,.55); border-radius:var(--radius-md); display:flex; flex-direction:column; justify-content:space-between; }
.testimonial:nth-child(2) { background:#DCEFF1; }
.quote-mark { font-size:4.6rem; line-height:.8; color:var(--terracotta); font-weight:800; }
.testimonial > p { font-size:1.03rem; color:var(--ink); line-height:1.7; }
.testimonial footer { display:flex; align-items:center; gap:13px; border-top:1px solid rgba(184,197,184,.45); padding-top:20px; }
.avatar { width:43px; height:43px; border-radius:50%; display:grid; place-items:center; background:var(--forest); color:var(--cream); font-weight:800; font-size:.75rem; }
.testimonial footer div:last-child { display:flex; flex-direction:column; }
.testimonial footer strong { font-size:.84rem; }.testimonial footer span { font-size:.72rem; color:rgba(24,50,56,.58); }

.final-cta { padding-top:40px; }
.cta-shell { min-height:520px; border-radius:38px; background:var(--forest); padding:84px 7%; color:var(--cream); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.cta-shell h2 { max-width:920px; position:relative; z-index:2; }.cta-shell h2 span { color:var(--sky); }
.cta-shell p { max-width:660px; color:rgba(247,243,234,.7); position:relative; z-index:2; }
.cta-shell .button { margin-top:15px; position:relative; z-index:2; }
.cta-grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(169,221,227,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(169,221,227,.06) 1px,transparent 1px); background-size:46px 46px; }
.cta-orb { position:absolute; width:380px; height:380px; border-radius:50%; border:1px solid rgba(169,221,227,.24); right:-80px; top:-120px; box-shadow:0 0 0 60px rgba(169,221,227,.03),0 0 0 120px rgba(169,221,227,.025); }

.footer { background:var(--ink); color:var(--cream); padding:72px 0 28px; margin-top:110px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-bottom:60px; }
.footer-brand .brand { min-height:0; gap:12px; }
/* .footer-brand .footer-logo { width:88px; height:88px; border-radius:0; } */
.footer-brand .footer-logo { width:112px; height:112px; border-radius:0; }
.footer-brand p { color:rgba(247,243,234,.58); max-width:430px; margin-top:18px; }
.footer-links { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.footer-links div { display:flex; flex-direction:column; gap:10px; }.footer-links div > span { font-size:.67rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sky); font-weight:800; margin-bottom:9px; }.footer-links a { font-size:.9rem; color:rgba(247,243,234,.73); }
.footer-bottom { border-top:1px solid rgba(247,243,234,.1); padding-top:24px; display:flex; justify-content:space-between; color:rgba(247,243,234,.42); font-size:.72rem; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .nav-wrap { height:96px; padding:8px 0; }
  .nav-wrap .brand { min-height:72px; gap:10px; }
  .nav-wrap .brand-logo { width:72px; height:72px; }
  .site-header.scrolled .nav-wrap { height:68px; padding:4px 0; }
  .site-header.scrolled .brand { min-height:52px; gap:8px; }
  .site-header.scrolled .brand-logo { width:50px; height:50px; }
  .desktop-nav { display:none; }
  .menu-button { display:flex; }
  .mobile-nav { position:absolute; top:calc(100% + 8px); left:20px; right:20px; padding:18px; background:var(--cream); border:1px solid rgba(184,197,184,.6); border-radius:18px; box-shadow:var(--shadow); flex-direction:column; gap:8px; }
  .mobile-nav.open { display:flex; }
  .mobile-nav a { padding:10px 8px; font-weight:700; }
  .mobile-nav .button { margin-top:8px; }
  .hero-grid { grid-template-columns:1fr; gap:30px; }
  .hero { padding-top:140px; }
  .hero-copy { max-width:820px; }
  .hero-visual { width:min(720px,100%); margin:0 auto; }
  .trust-grid { grid-template-columns:1fr; gap:25px; }
  .process-wrap,.why-grid,.phil-grid { grid-template-columns:1fr; }
  .process-heading { position:static; }
  .why-visual { max-width:650px; width:100%; margin:auto; }
  .project-card { grid-template-columns:1fr; gap:22px; }
  .project-info { max-width:700px; }
}

@media (max-width: 780px) {
  .container { width:min(calc(100% - 28px), var(--container)); }
  .section-pad { padding:82px 0; }
  .nav-wrap { height:84px; }
  .nav-wrap .brand-logo { width:62px; height:62px; border-radius:0; }
  .nav-wrap .brand { gap:9px; min-height:62px; font-size:1rem; }
  .site-header.scrolled .nav-wrap { height:62px; padding:4px 0; }
  .site-header.scrolled .brand { min-height:46px; }
  .site-header.scrolled .brand-logo { width:46px; height:46px; }
  h1 { font-size:clamp(2.75rem,12vw,4.7rem); }
  h2 { font-size:clamp(2.25rem,10vw,3.8rem); }
  .hero { padding-top:120px; }
  .hero-text { font-size:1rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .button { width:100%; }
  .hero-visual { height:430px; margin-top:20px; }
  .browser-mockup { width:92%; height:290px; top:70px; right:4%; }
  .mockup-body { padding:16px; }
  .mock-hero { padding:28px 0 18px; }
  .mock-card-stack { min-height:120px; }
  .shape.teal { width:82px; height:92px; }.shape.green { width:90px; height:98px; right:45px; }.shape.terracotta{width:55px;height:55px;}
  .mock-stats { display:none; }
  .phone-mockup { width:126px; height:255px; right:-4px; bottom:0; }
  .phone-hero-shape { height:78px; }.phone-screen { padding:31px 11px 11px; }
  .float-chip { font-size:.58rem; }.chip-one{left:0;top:44px}.chip-two{left:10px;bottom:5px}
  .trust-points { grid-template-columns:repeat(2,1fr); }
  .split-heading { grid-template-columns:1fr; gap:8px; margin-bottom:36px; }
  .problem-grid,.service-grid,.testimonial-grid,.faq-grid { grid-template-columns:1fr; }
  .service-card.feature { transform:none; }
  .project-visual { min-height:360px; border-radius:24px; }
  .project-browser { width:86%; left:5%; height:78%; top:8%; }
  .project-phone { width:95px; height:195px; right:3%; bottom:2%; }
  .project-site { padding:14px; }
  .project-menu { right:14px; top:18px; width:55px; }
  .project-site h4 { font-size:1.3rem; }.salon-copy,.contractor-copy,.clinic-copy{width:52%;top:28%;}.contractor-grid{width:43%;}
  .template-list { gap:55px; }
  .process-wrap,.why-grid,.phil-grid { gap:45px; }
  .process-steps { padding-left:58px; }.step-dot { left:-58px; width:42px; height:42px; }.latitude-line{left:20px;}
  .local-cards { grid-template-columns:1fr; }
  .why-points { grid-template-columns:1fr; }
  .cta-shell { min-height:460px; padding:66px 24px; border-radius:26px; }.cta-shell .button{width:auto;}
  .footer { margin-top:70px; }.footer-grid { grid-template-columns:1fr; gap:35px; }.footer-bottom{flex-direction:column;gap:8px}.footer-links{gap:25px;}
}

/* Performance and accessibility */
.templates-section, .process, .why, .philippines, .testimonials, .final-cta { content-visibility:auto; contain-intrinsic-size:1px 900px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* Mobile layout hardening */
html, body { max-width:100%; }
.hero-grid > *, .split-heading > *, .trust-grid > *, .project-card > *, .process-wrap > *, .why-grid > *, .phil-grid > *, .footer-grid > * { min-width:0; }
section[id] { scroll-margin-top:92px; }

@media (max-width: 780px) {
  .accent-underline { white-space:normal; }
  h1, h2, h3, h4, p, a, span { overflow-wrap:break-word; }
  .hero { min-height:auto; padding-bottom:54px; }
  .hero::before { width:min(320px, 78vw); height:auto; aspect-ratio:1; top:-90px; right:0; }
  .hero-copy { width:100%; }
  .eyebrow { max-width:100%; line-height:1.45; }
  .mobile-nav { top:calc(100% + 8px); left:14px; right:14px; max-height:calc(100dvh - 96px); overflow:auto; overscroll-behavior:contain; }
  .project-info h3, .process-step h3 { line-height:1.12; }
  .service-card p { min-height:0; }
  .templates-section, .process, .why, .philippines, .testimonials, .final-cta { content-visibility:visible; contain-intrinsic-size:auto; }
}

@media (max-width: 520px) {
  .container { width:calc(100% - 32px); }
  .section-pad { padding:68px 0; }
  .nav-wrap { height:72px; padding:6px 0; }
  .nav-wrap .brand { min-width:0; min-height:50px; gap:8px; font-size:.96rem; }
  .nav-wrap .brand-logo { width:50px; height:50px; border-radius:0; }
  .site-header.scrolled .nav-wrap { height:58px; padding:3px 0; }
  .site-header.scrolled .brand { min-height:42px; gap:7px; }
  .site-header.scrolled .brand-logo { width:42px; height:42px; border-radius:0; }
  .menu-button { width:40px; height:40px; flex:0 0 auto; }
  .mobile-nav { top:calc(100% + 8px); }

  h1 { font-size:clamp(2.35rem,11vw,3.15rem); line-height:1.01; letter-spacing:-.045em; margin-bottom:22px; }
  h2 { font-size:clamp(2rem,9.6vw,2.75rem); line-height:1.05; margin-bottom:22px; }
  h3 { font-size:1.3rem; }
  .hero { padding-top:104px; }
  .hero-grid { gap:20px; }
  .hero-text { font-size:.98rem; line-height:1.65; margin-bottom:24px; }
  .hero-actions { gap:10px; }
  .button { min-height:52px; padding-inline:18px; }
  .micro-trust { margin-top:20px; gap:8px 10px; font-size:.72rem; }

  .hero-visual { height:350px; margin-top:6px; }
  .geo-grid { inset:4% -10% 8% 0; background-size:28px 28px; }
  .orbit-one { width:280px; height:280px; right:-65px; top:0; }
  .orbit-two { width:180px; height:180px; right:-5px; top:48px; }
  .browser-mockup { width:94%; height:244px; top:52px; right:3%; border-radius:16px; transform:rotate(1.5deg); }
  .browser-bar { height:30px; padding-inline:10px; }
  .browser-address { height:10px; }
  .mockup-body { padding:13px; }
  .mock-hero { gap:12px; padding:22px 0 14px; }
  .mock-copy strong { height:12px; margin-bottom:6px; }
  .mock-copy p { margin-top:12px; }
  .mock-button { width:70px; height:23px; margin-top:13px; }
  .mock-card-stack { min-height:96px; }
  .shape.teal { width:66px; height:74px; right:8px; }
  .shape.green { width:72px; height:80px; right:36px; top:20px; }
  .shape.terracotta { width:44px; height:44px; }
  .phone-mockup { width:106px; height:214px; right:0; bottom:2px; border-width:4px; border-radius:23px; transform:rotate(-3deg); }
  .phone-notch { width:58px; height:14px; }
  .phone-screen { padding:27px 9px 9px; }
  .phone-hero-shape { height:63px; margin:14px 0; }
  .phone-screen strong { height:7px; }
  .phone-screen p { height:4px; margin-top:10px; }
  .phone-button { width:54px; height:18px; margin-top:11px; }
  .float-chip { padding:7px 9px; font-size:.53rem; }
  .chip-one { left:0; top:30px; }
  .chip-two { left:4px; bottom:5px; }

  .trust-strip { padding:28px 0; }
  .trust-intro { font-size:.9rem; }
  .trust-points { gap:14px 10px; }
  .trust-points span { font-size:.74rem; }

  .split-heading, .section-heading { margin-bottom:32px; }
  .problem-grid, .service-grid, .testimonial-grid, .faq-grid { gap:14px; }
  .problem-card { min-height:190px; padding:25px 22px 22px; }
  .problem-card > span { top:20px; left:22px; }
  .service-card { padding:18px 18px 24px; }
  .service-visual { height:170px; margin-bottom:22px; }
  .service-number { margin-bottom:17px; }

  .template-list { gap:46px; }
  .project-card { gap:18px; }
  .project-visual { min-height:300px; border-radius:20px; }
  .project-browser { width:88%; height:78%; left:4%; top:7%; border-radius:12px; }
  .project-bar { height:24px; }
  .project-site { height:calc(100% - 24px); padding:13px 14px; }
  .project-menu { top:16px; right:13px; width:48px; height:4px; }
  .salon-copy, .contractor-copy, .clinic-copy { left:6%; top:27%; width:55%; }
  .project-site h4 { font-size:1.12rem; line-height:1.1; margin:8px 0 14px; }
  .project-phone { width:82px; height:168px; right:2%; bottom:2%; border-width:4px; border-radius:18px; }
  .phone-site { padding:19px 7px 7px; }
  .phone-site > div { height:64px; margin:10px 0; }
  .project-info { padding-bottom:0; }
  .project-info > div { margin-bottom:14px; }
  .project-info h3 { font-size:1.55rem; margin-bottom:11px; }
  .project-info p { font-size:.9rem; line-height:1.65; }
  .template-note { padding:11px 12px; }

  .process-wrap, .why-grid, .phil-grid { gap:36px; }
  .process-steps { padding-left:50px; }
  .latitude-line { left:17px; }
  .step-dot { left:-50px; width:36px; height:36px; box-shadow:0 0 0 7px var(--cream); }
  .process-step { min-height:0; padding:12px 0 28px; }
  .process-step h3 { font-size:1.55rem; }

  .coordinate-card { border-radius:22px; }
  .coordinate-label { left:18px; top:16px; font-size:.57rem; }
  .coordinate-message { left:18px; right:18px; bottom:18px; padding:14px; font-size:.9rem; }
  .why-points { margin-top:26px; }
  .local-card { min-height:0; padding:22px; }
  .local-card span { margin-bottom:34px; }
  .faq-card { padding:22px; }

  .final-cta { padding-top:24px; }
  .cta-shell { min-height:auto; padding:54px 20px; border-radius:22px; }
  .cta-shell .button { width:100%; }
  .cta-orb { width:260px; height:260px; right:-120px; top:-90px; }

  .footer { padding-top:58px; margin-top:58px; }
  .footer-brand .footer-logo { width:72px; height:72px; }
  .footer-brand .brand-logo-shell { width:60px; height:60px; border-radius:12px; }
  .footer-brand .brand-logo-shell .brand-logo { width:56px; height:56px; border-radius:10px; }
  .footer-grid { padding-bottom:42px; }
  .footer-links { grid-template-columns:1fr; gap:28px; }
  .footer-links a { overflow-wrap:anywhere; }
}

@media (max-width: 360px) {
  .container { width:calc(100% - 24px); }
  .footer-brand .footer-logo { width:64px; height:64px; }
  .brand span:last-child { font-size:.88rem; }
  .nav-wrap { height:66px; }
  .nav-wrap .brand-logo { width:44px; height:44px; }
  .site-header.scrolled .nav-wrap { height:54px; }
  .site-header.scrolled .brand-logo { width:38px; height:38px; }
  .brand-logo-shell { width:56px; height:56px; border-radius:12px; }
  .brand-logo-shell .brand-logo { width:52px; height:52px; border-radius:10px; }
  h1 { font-size:2.25rem; }
  h2 { font-size:1.95rem; }
  .eyebrow { font-size:.69rem; letter-spacing:.09em; }
  .hero-visual { height:320px; }
  .browser-mockup { height:220px; top:48px; }
  .phone-mockup { width:94px; height:190px; }
  .float-chip { display:none; }
  .trust-points { grid-template-columns:1fr 1fr; }
  .project-visual { min-height:270px; }
  .project-phone { width:72px; height:148px; }
  .project-info h3 { font-size:1.4rem; }
  .cta-shell { padding-inline:16px; }
}

.email-icon-link {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(247,243,234,.2);
  border-radius: 10px;
  color: var(--cream) !important;
  background: rgba(247,243,234,.04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.email-icon-link:hover {
  transform: translateY(-2px);
  background: rgba(247,243,234,.09);
  border-color: rgba(247,243,234,.34);
}
.email-icon-link svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}