
:root{
  --bg:#FDFDFC;--soft:#F7F7F5;--cream:#F4E9C8;--pink:#E8CFDF;--yellow:#EAD081;--text:#12110D;
  --black:#0B0B0A;--muted:#6B6964;--line:rgba(18,17,13,.1);--wa:#25D366;--meta:#0668E1;
  --shadow:0 40px 120px rgba(18,17,13,.18);--font:Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.scene-svg,svg{display:block;max-width:100%}
.site-header{position:fixed;top:22px;left:22px;right:22px;z-index:100;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.brand-mark{font-weight:850;letter-spacing:-.075em;font-size:clamp(42px,7vw,82px);line-height:.78;pointer-events:auto}.top-pill{position:absolute;left:50%;transform:translateX(-50%);height:46px;background:rgba(255,255,255,.62);border:1px solid var(--line);backdrop-filter:blur(18px);border-radius:999px;display:flex;align-items:center;gap:4px;padding:4px;pointer-events:auto;box-shadow:0 12px 40px rgba(18,17,13,.08)}.top-pill a{font-size:14px;padding:10px 15px;border-radius:999px}.top-pill a:hover{background:white}.menu-trigger{pointer-events:auto;width:54px;height:54px;border:0;border-radius:18px;background:var(--black);display:grid;grid-template-columns:repeat(3,5px);gap:5px;place-content:center;cursor:pointer}.menu-trigger span{width:5px;height:5px;border-radius:99px;background:white}.menu-panel{position:fixed;z-index:110;top:88px;right:22px;width:min(760px,calc(100vw - 44px));display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;background:var(--black);color:white;border-radius:26px;padding:28px;transform:scale(.96) translateY(-10px);opacity:0;pointer-events:none;transition:.32s cubic-bezier(.16,1,.3,1)}.menu-panel.open{opacity:1;transform:none;pointer-events:auto}.menu-panel div{display:grid;gap:10px}.menu-panel small{color:#8c8c8c;margin-bottom:8px}.menu-panel a{font-size:clamp(18px,2.2vw,30px);letter-spacing:-.045em}.menu-panel a:hover{color:#f3e6bd}.btn{min-height:52px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;padding:0 22px;font-weight:750;letter-spacing:-.02em;background:white}.btn.dark{background:var(--black);color:white}.btn.wa{background:var(--black);color:white;gap:10px}.btn.wa span{width:10px;height:10px;border-radius:99px;background:var(--wa);box-shadow:0 0 24px rgba(37,211,102,.5);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.3);box-shadow:0 0 34px rgba(37,211,102,.8)}}
.hero-scene{height:420svh;position:relative;background:var(--pink)}.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden;border-radius:0 0 36px 36px;background:linear-gradient(120deg,#ead7df,#e9d7ca 42%,#e7d7ee)}.hero-sticky::before{content:"Elevate";position:absolute;left:-7vw;top:7vh;font-size:clamp(128px,32vw,520px);font-weight:950;line-height:.72;letter-spacing:-.14em;color:#fff6dc;text-shadow:0 24px 56px rgba(148,116,75,.22),0 -3px 2px rgba(255,255,255,.7);z-index:0;transform:translate3d(var(--word-x,0px),var(--word-y,0px),0) rotate(var(--word-r,0deg));transition:background .4s}.hero-content{position:absolute;left:clamp(22px,5vw,72px);bottom:clamp(96px,10vh,140px);z-index:8;max-width:760px}.hero-content h1{font-size:clamp(58px,11vw,154px);line-height:.82;letter-spacing:-.095em;margin:0 0 22px}.hero-content p{font-size:clamp(20px,3vw,34px);line-height:1.1;letter-spacing:-.05em;margin:0;color:#2c2b28;max-width:680px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.browser-frame{position:absolute;right:clamp(8px,8vw,110px);top:clamp(110px,16vh,160px);width:min(58vw,850px);height:min(50vw,560px);min-height:360px;border-radius:34px;background:#171717;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);transform:perspective(1200px) rotateX(var(--frame-rx,7deg)) rotateY(var(--frame-ry,-13deg)) rotateZ(var(--frame-rz,2deg)) translate3d(var(--frame-x,0px),var(--frame-y,0px),0);transform-style:preserve-3d;transition:background .3s}.browser-top{height:48px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;padding:0 18px}.browser-top span{width:12px;height:12px;border-radius:99px}.browser-top span:nth-child(1){background:#ff5f57}.browser-top span:nth-child(2){background:#ffbd2e}.browser-top span:nth-child(3){background:#28c840}.browser-body{position:absolute;inset:48px 10px 10px;border-radius:24px;background:#fbf7ed;overflow:hidden}.mock-word{position:absolute;left:-26px;top:20px;font-size:clamp(82px,14vw,220px);line-height:.74;font-weight:950;letter-spacing:-.13em;color:#fff0c8}.mock-title{position:absolute;left:34px;bottom:46px;font-size:clamp(28px,5vw,82px);letter-spacing:-.08em;line-height:.9;max-width:520px}.mock-card{position:absolute;border-radius:28px;background:white;box-shadow:0 28px 80px rgba(18,17,13,.18);border:1px solid rgba(18,17,13,.08);transform-style:preserve-3d}.card-map{right:80px;top:120px;width:250px;height:170px;transform:translateZ(90px) rotate(-6deg)}.card-phone{left:52%;top:52%;width:170px;height:250px;transform:translateZ(120px) rotate(7deg);background:#111}.card-whatsapp{right:34px;bottom:56px;width:260px;min-height:86px;padding:18px;transform:translateZ(150px) rotate(4deg)}.card-social{left:44%;top:90px;width:280px;height:130px;padding:18px;transform:translateZ(110px) rotate(-5deg)}.mini-line{height:10px;border-radius:99px;background:#ddd;margin:9px}.fire{position:absolute;font-size:62px;filter:drop-shadow(0 16px 24px rgba(255,90,0,.26));transform:translateZ(190px)}.fire.f1{right:320px;top:190px}.fire.f2{right:120px;bottom:180px}.fire.f3{left:55%;bottom:80px}.steel{position:absolute;width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,#eee,#888,#fff);right:420px;bottom:90px;transform:rotate(22deg) translateZ(160px);filter:drop-shadow(0 20px 35px rgba(0,0,0,.18))}.scroll-progress{position:absolute;left:clamp(22px,5vw,72px);bottom:44px;width:min(360px,42vw);height:2px;background:rgba(18,17,13,.18);z-index:9}.scroll-progress span{display:block;height:100%;width:calc(var(--progress,0)*100%);background:var(--black)}.scene-kicker{position:absolute;right:32px;bottom:36px;z-index:10;background:var(--black);color:white;border-radius:999px;padding:14px 18px;font-weight:800}.section{padding:120px 22px;max-width:1260px;margin:auto}.page-main{padding:150px 22px 70px;max-width:1260px;margin:auto}.page-hero{min-height:48vh;display:grid;align-items:end;padding-bottom:54px}.eyebrow{color:var(--muted);font-size:15px}.page-title{font-size:clamp(58px,11vw,146px);line-height:.85;letter-spacing:-.09em;margin:18px 0}.lead{font-size:clamp(21px,3vw,34px);line-height:1.13;letter-spacing:-.045em;color:var(--muted);max-width:860px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card{background:white;border:1px solid var(--line);border-radius:34px;padding:28px;box-shadow:0 18px 70px rgba(18,17,13,.06)}.card h3{font-size:clamp(30px,4vw,54px);letter-spacing:-.075em;line-height:.95;margin:0 0 14px}.card p,.card li{color:var(--muted);line-height:1.65}.service-card{min-height:520px;position:relative;overflow:hidden}.service-visual{border-radius:30px;overflow:hidden;border:1px solid var(--line);margin-bottom:22px;background:var(--soft)}.tag{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--muted);background:white;font-size:12px}.plan-card{min-height:560px;display:flex;flex-direction:column}.plan-card.featured{background:#0B0B0A;color:white}.plan-card.featured p,.plan-card.featured li{color:#cfcfcf}.price{font-size:clamp(52px,8vw,86px);font-weight:900;letter-spacing:-.095em;line-height:.9;margin:22px 0 4px}.retainer{color:var(--muted)}.visual-hero{border-radius:42px;overflow:hidden;background:var(--soft);border:1px solid var(--line);margin:30px 0}.visual-hero .scene-svg{width:100%;height:min(58vw,600px)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.cta-band{margin:90px 22px 30px;border-radius:42px;background:var(--black);color:white;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:28px}.cta-band h2{font-size:clamp(44px,7vw,96px);line-height:.88;letter-spacing:-.09em;margin:10px 0}.cta-band p{color:#c9c9c9}.cta-actions{display:flex;gap:12px;flex-wrap:wrap}.cta-band .btn.dark{background:white;color:var(--black)}.site-footer{margin-top:90px;padding:60px 22px;border-top:1px solid var(--line);display:grid;gap:26px}.footer-logo{font-size:clamp(58px,9vw,140px);font-weight:900;letter-spacing:-.1em;line-height:.8}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.footer-grid div{display:grid;gap:8px}.footer-grid small,.copyright{color:var(--muted)}.footer-grid a{color:var(--muted)}.form{display:grid;gap:14px;max-width:760px}.form label{display:grid;gap:8px;color:var(--muted)}input,select,textarea{border:1px solid var(--line);border-radius:18px;padding:16px;background:white;color:var(--text);width:100%}textarea{min-height:150px}.success{display:none;padding:18px;background:#effaf3;border:1px solid rgba(37,211,102,.25);border-radius:20px}.success.show{display:block}.blog-list a{display:grid;grid-template-columns:1fr auto;padding:24px 0;border-bottom:1px solid var(--line);font-size:clamp(28px,5vw,64px);letter-spacing:-.08em}.reveal{opacity:0;transform:translateY(24px);transition:.8s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:none}.page-fade{opacity:0;transform:translateY(8px);transition:.28s ease}
@media(max-width:980px){.top-pill{display:none}.menu-panel{grid-template-columns:1fr;max-height:80svh;overflow:auto}.hero-scene{height:360svh}.hero-sticky::before{left:-12vw;top:18vh;font-size:38vw}.browser-frame{width:92vw;right:4vw;top:18vh;height:52vh;min-height:380px;transform:perspective(900px) rotateX(var(--frame-rx,6deg)) rotateY(var(--frame-ry,-7deg)) rotateZ(var(--frame-rz,1deg)) translate3d(var(--frame-x,0px),var(--frame-y,0px),0)}.hero-content{left:20px;right:20px;bottom:92px}.hero-content h1{font-size:clamp(52px,16vw,94px)}.hero-content p{font-size:20px}.mock-title{font-size:42px}.mock-word{font-size:120px}.card-map{right:28px;top:100px;width:180px;height:130px}.card-phone{display:none}.card-social{left:22px;top:70px;width:210px}.card-whatsapp{right:22px;bottom:52px;width:220px}.fire{font-size:46px}.grid.two,.grid.three,.info-grid{grid-template-columns:1fr}.cta-band{display:grid}.footer-grid{grid-template-columns:1fr}}
@media(max-width:560px){.site-header{top:14px;left:14px;right:14px}.brand-mark{font-size:46px}.menu-trigger{width:48px;height:48px}.hero-actions .btn{width:100%}.scene-kicker{display:none}.scroll-progress{width:calc(100vw - 40px);bottom:30px}.page-main{padding-top:118px}.section{padding:80px 16px}.card{border-radius:26px;padding:22px}.browser-frame{top:17vh;height:48vh}.hero-content{bottom:82px}.card-social{transform:scale(.75) rotate(-7deg);transform-origin:left top}.card-map{transform:scale(.78) rotate(-5deg);transform-origin:right top}.card-whatsapp{transform:scale(.82) rotate(5deg);transform-origin:right bottom}.hero-sticky{border-radius:0 0 28px 28px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.browser-frame{transform:none!important}}


/* =========================================================
   SOFT SUGAR FIX — final homepage direction
   Cleaner, softer, less messy, no foreground text overlap.
   ========================================================= */

.hero-scene{
  height: 340svh;
  position: relative;
  background:
    linear-gradient(180deg, #ead8df 0%, #efd8c5 42%, #f1d982 72%, #f7f0dd 100%);
}

.hero-sticky{
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  border-radius: 0 0 42px 42px;
  background:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.78), transparent 31%),
    linear-gradient(128deg, #ead8df 0%, #ead6ca 48%, #ead27c 100%) !important;
}

/* The background word is now background only, soft and behind everything. */
.hero-sticky::before{
  content:"Elevate";
  position:absolute;
  left: clamp(-80px, -5vw, -30px);
  top: clamp(100px, 14vh, 160px);
  z-index: 0;
  font-size: clamp(126px, 30vw, 430px);
  line-height: .74;
  font-weight: 950;
  letter-spacing: -.145em;
  color: rgba(255, 246, 220, .84);
  text-shadow:
    0 26px 68px rgba(92, 62, 35, .16),
    inset 0 2px 0 rgba(255,255,255,.8);
  pointer-events:none;
  white-space:nowrap;
  transform:
    translate3d(var(--word-x,0px), var(--word-y,0px), 0)
    rotate(var(--word-r,0deg));
}

/* Remove the previous oversized/chaotic hero text feel. */
.hero-content{
  position:absolute;
  z-index: 9;
  left: clamp(22px, 5vw, 76px);
  bottom: clamp(104px, 12vh, 154px);
  max-width: 540px;
}

.hero-content h1{
  font-size: clamp(44px, 7.6vw, 106px);
  line-height: .88;
  letter-spacing: -.09em;
  margin:0 0 18px;
  max-width: 560px;
}

.hero-content p{
  font-size: clamp(18px, 2.15vw, 28px);
  line-height:1.16;
  letter-spacing:-.045em;
  margin:0;
  max-width: 520px;
  color: rgba(18,17,13,.78);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* The browser visual is now a clean website mockup, not a text collision. */
.browser-frame{
  position:absolute;
  z-index: 5;
  right: clamp(14px, 5vw, 90px);
  top: clamp(118px, 14vh, 150px);
  width: min(54vw, 760px);
  height: min(48vw, 520px);
  min-height: 380px;
  border-radius: 34px;
  background: rgba(19,19,18,.96);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 42px 120px rgba(18,17,13,.21);
  transform:
    perspective(1200px)
    rotateX(var(--frame-rx, 6deg))
    rotateY(var(--frame-ry, -10deg))
    rotateZ(var(--frame-rz, 1deg))
    translate3d(var(--frame-x,0px), var(--frame-y,0px), 0);
  transform-style: preserve-3d;
}

.browser-body{
  position:absolute;
  inset:48px 10px 10px;
  border-radius:24px;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(135deg,#fff7e6 0%,#f9edd8 52%,#f0d57c 100%);
  overflow:hidden;
}

.mock-word{
  position:absolute;
  left: -18px;
  top: 10px;
  font-size: clamp(78px, 11vw, 168px);
  line-height: .78;
  font-weight: 950;
  letter-spacing: -.13em;
  color: rgba(255,245,205,.62);
  pointer-events:none;
}

.mock-title{
  position:absolute;
  left:34px;
  bottom:42px;
  font-size: clamp(28px, 4.1vw, 64px);
  line-height:.92;
  letter-spacing:-.075em;
  max-width: 390px;
  color:#14130f;
}

/* Replace chaotic cards with real web-creation cards. */
.mock-card{
  position:absolute;
  border-radius:26px;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(18,17,13,.16);
  border:1px solid rgba(18,17,13,.09);
  transform-style:preserve-3d;
}

.card-social{
  left: 48%;
  top: 68px;
  width: 246px;
  min-height: 118px;
  padding: 18px;
  transform: translateZ(120px) rotate(-5deg);
}

.card-map{
  right: 48px;
  top: 150px;
  width: 245px;
  height: 164px;
  transform: translateZ(95px) rotate(5deg);
  overflow:hidden;
}

.card-phone{
  left: 54%;
  bottom: 42px;
  width: 150px;
  height: 224px;
  transform: translateZ(130px) rotate(7deg);
  background:#101010;
  color:white;
  overflow:hidden;
}

.card-whatsapp{
  right: 54px;
  bottom: 52px;
  width: 252px;
  min-height: 92px;
  padding:18px;
  transform: translateZ(155px) rotate(4deg);
}

.card-social strong,
.card-whatsapp strong{
  font-size: 18px;
  letter-spacing: -.04em;
}

.card-social p,
.card-whatsapp p{
  margin:8px 0 0;
  color:#6B6964;
  line-height:1.35;
}

/* Remove the random emoji fire and metal chaos from visual focus. */
.fire,
.steel{
  display:none !important;
}

.scroll-progress{
  position:absolute;
  z-index:10;
  left: clamp(22px, 5vw, 76px);
  bottom:44px;
  width:min(380px,42vw);
  height:2px;
  background:rgba(18,17,13,.18);
}

.scene-kicker{
  position:absolute;
  z-index:10;
  right:32px;
  bottom:36px;
  border-radius:999px;
  background:#0B0B0A;
  color:white;
  padding:14px 18px;
  font-weight:800;
}

.btn.dark,
.btn.wa{
  box-shadow: 0 16px 44px rgba(18,17,13,.12);
}

@media(max-width:980px){
  .hero-scene{height:300svh;}
  .hero-sticky::before{
    left:-16vw;
    top:18vh;
    font-size: clamp(130px, 45vw, 300px);
  }
  .browser-frame{
    width:92vw;
    right:4vw;
    top:17vh;
    height:48vh;
    min-height:360px;
    transform:
      perspective(900px)
      rotateX(var(--frame-rx,4deg))
      rotateY(var(--frame-ry,-4deg))
      rotateZ(var(--frame-rz,1deg))
      translate3d(var(--frame-x,0px), var(--frame-y,0px), 0);
  }
  .hero-content{
    left:20px;
    right:20px;
    bottom:92px;
    max-width:520px;
  }
  .hero-content h1{
    font-size: clamp(44px, 13vw, 78px);
  }
  .hero-content p{
    font-size:18px;
    max-width:360px;
  }
  .card-map{
    width:180px;
    height:128px;
    right:22px;
    top:122px;
  }
  .card-social{
    width:210px;
    min-height:96px;
    left:22px;
    top:78px;
    transform: scale(.8) rotate(-6deg);
    transform-origin:left top;
  }
  .card-whatsapp{
    width:215px;
    right:22px;
    bottom:42px;
    transform: scale(.86) rotate(4deg);
    transform-origin:right bottom;
  }
  .card-phone{
    display:none;
  }
  .mock-title{
    font-size:38px;
    max-width:280px;
  }
}

@media(max-width:560px){
  .hero-content{
    bottom:84px;
  }
  .hero-actions .btn{
    width:auto;
    min-height:48px;
    padding-inline:16px;
  }
  .scene-kicker{
    display:none;
  }
  .scroll-progress{
    left:20px;
    width:calc(100vw - 40px);
    bottom:30px;
  }
}
