:root {
  --ink: #07102f;
  --muted: #5d6785;
  --line: #e7e9f6;
  --blue: #0787f4;
  --indigo: #274dff;
  --violet: #9d20f4;
  --lavender: #f4f1ff;
  --white: #ffffff;
  --shadow: 0 24px 65px rgba(61, 53, 171, 0.13);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff;
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section-anchor { scroll-margin-top: 96px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.page-glow--one { width: 520px; height: 520px; top: -80px; right: -180px; background: rgba(107, 83, 255, .13); }
.page-glow--two { width: 360px; height: 360px; top: 520px; left: 34%; background: rgba(160, 58, 255, .07); }

.site-header { height: 94px; display: flex; align-items: center; position: relative; z-index: 50; }
.nav-shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark { width: 54px; height: 54px; display: block; flex: 0 0 auto; object-fit: contain; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font: 800 25px/1 "Manrope", sans-serif; letter-spacing: -.8px; }
.brand-copy small { margin-top: 5px; font: 700 8px/1 "Manrope", sans-serif; letter-spacing: 5.5px; }
.main-nav { display: flex; gap: 44px; align-items: center; }
.main-nav a { color: #3f4967; font-size: 15px; transition: color .2s ease; }
.main-nav a:hover { color: var(--indigo); }
.header-cta { justify-self: end; }
.menu-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.menu-toggle span:not(.sr-only) { width: 24px; height: 2px; display: block; background: var(--ink); margin: 5px 0; transition: .2s ease; }

.button { min-height: 52px; padding: 0 24px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 700; font-size: 15px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button--small { min-height: 46px; padding-inline: 22px; border-radius: 999px; }
.button--gradient { color: #fff; background: linear-gradient(110deg, #078bf2 0%, #2554ff 48%, #a61ff1 100%); box-shadow: 0 12px 30px rgba(67, 74, 239, .22); }
.button--gradient:hover { box-shadow: 0 16px 36px rgba(67, 74, 239, .33); }
.button--outline { color: #2048ee; box-shadow: inset 0 0 0 1.5px #725dfb; background: rgba(255,255,255,.78); }

.hero { padding: 50px 0 0; position: relative; isolation: isolate; }
.hero::after { content: ""; position: absolute; z-index: -2; inset: -110px 0 10px; opacity: .58; background-image: linear-gradient(rgba(74,73,226,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(74,73,226,.055) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 72% 35%, black, transparent 65%); }
.hero-grid { display: grid; grid-template-columns: .88fr 1.22fr; align-items: center; min-height: 590px; gap: 26px; }
.eyebrow { color: #5b63a4; font-size: 12px; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.eyebrow span { width: 26px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.hero h1 { margin: 0; max-width: 610px; font: 800 clamp(43px, 4.45vw, 66px)/1.05 "Manrope", sans-serif; letter-spacing: -3.5px; }
.gradient-text { color: transparent; background: linear-gradient(90deg, #078ef3, #244fff 48%, #9a25ef); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { max-width: 565px; margin: 27px 0 0; color: var(--muted); font-size: 19px; line-height: 1.5; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-proof { display: flex; gap: 24px; margin-top: 25px; color: #606a88; font-size: 13px; }
.hero-proof i { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 7px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); font-style: normal; font-size: 11px; }

.hero-visual { position: relative; min-height: 570px; perspective: 1000px; }
.hero-visual::before { content: ""; position: absolute; width: 520px; height: 420px; top: 30px; left: 42px; border-radius: 45%; background: radial-gradient(circle, rgba(135,91,255,.22), rgba(52,107,255,.06) 45%, transparent 72%); filter: blur(4px); }
.visual-orbit { position: absolute; border: 1px solid rgba(87,77,241,.1); border-radius: 50%; }
.visual-orbit--one { width: 430px; height: 430px; top: 45px; left: 76px; }
.visual-orbit--two { width: 560px; height: 290px; top: 120px; left: 10px; transform: rotate(-20deg); }
.glass-card { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.86); background: rgba(255,255,255,.86); box-shadow: var(--shadow), 0 0 0 1px rgba(113,105,244,.08); backdrop-filter: blur(15px); }
.dashboard-window { width: 560px; height: 355px; right: -10px; top: 8px; border-radius: 19px; transform: rotate(-3deg); }
.window-bar { height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #eef0fb; }
.mini-brand { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; }
.brand-mark--mini { width: 22px; height: 22px; }
.search-pill { margin-left: auto; width: 145px; height: 27px; padding: 7px 12px; border: 1px solid #e8ebf6; border-radius: 7px; color: #818aa2; font-size: 7px; }
.avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#09a5e7,#3454dd); font-size: 7px; font-weight: 700; }
.dashboard-body { display: grid; grid-template-columns: 105px 1fr; height: calc(100% - 46px); }
.dash-sidebar { padding: 15px 11px; background: #f8f9ff; display: flex; flex-direction: column; gap: 7px; }
.side-logo { display: block; height: 4px; width: 22px; background: linear-gradient(90deg, var(--blue), var(--violet)); border-radius: 10px; margin: 0 0 2px 8px; }
.dash-sidebar b { padding: 7px 8px; display: flex; gap: 8px; align-items: center; border-radius: 5px; font-size: 7px; color: #707892; font-weight: 500; }
.dash-sidebar .active { color: #fff; background: linear-gradient(90deg, #3556fa, #9b56ff); }
.dash-content { padding: 19px; }
.dash-content h3 { margin: 0 0 15px; font: 700 15px "Manrope", sans-serif; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.metric-row > div { position: relative; padding: 11px; border: 1px solid #eef0f8; border-radius: 8px; background: #fff; }
.metric-row small { display: block; color: #8a91a8; font-size: 7px; }
.metric-row strong { display: block; margin-top: 7px; font-size: 10px; }
.metric-row em { position: absolute; right: 8px; top: 9px; color: #10bb83; font-size: 6px; font-style: normal; }
.chart-card { margin-top: 10px; padding: 11px 12px; border: 1px solid #eef0f8; border-radius: 8px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 7px; }
.chart-head span { color: #7c859d; border: 1px solid #e6e9f3; border-radius: 4px; padding: 4px 7px; }
.chart-area { height: 135px; position: relative; overflow: hidden; margin-top: 3px; }
.grid-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 32px, #eff1f9 33px); }
.chart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.bars { position: absolute; inset: 25px 25px 0; display: flex; align-items: end; justify-content: space-around; z-index: 1; }
.bars i { width: 18px; border-radius: 3px 3px 0 0; background: linear-gradient(#765cff, #bfc2ff); opacity: .8; }
.bars i:nth-child(1){height:23%}.bars i:nth-child(2){height:36%}.bars i:nth-child(3){height:49%}.bars i:nth-child(4){height:42%}.bars i:nth-child(5){height:65%}.bars i:nth-child(6){height:84%}

.agenda-window { width: 440px; height: 245px; left: 2px; bottom: 0; z-index: 3; border-radius: 16px; transform: rotate(2deg); }
.agenda-head { height: 35px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef0f8; font-size: 9px; }
.agenda-layout { height: calc(100% - 35px); display: grid; grid-template-columns: 42% 58%; }
.calendar-mini { padding: 14px; border-right: 1px solid #eef0f8; font-size: 8px; }
.week,.days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 6px; margin-top: 14px; }
.week { color: #8991a9; font-size: 6px; gap: 8px; }
.days i { display: grid; place-items: center; height: 17px; color: #66708b; font-size: 6px; font-style: normal; }
.days .selected { color: #fff; background: #3857f6; border-radius: 4px; }
.schedule-list { padding: 12px; }
.schedule-date { display: flex; justify-content: space-between; align-items: center; font-size: 8px; }
.schedule-date span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: #1958f6; font-size: 15px; }
.schedule-list p { height: 34px; margin: 6px 0; padding: 7px 8px; display: flex; gap: 9px; align-items: center; border-radius: 5px; background: #e5e8ff; font-size: 6px; }
.schedule-list p:nth-of-type(2){background:#def5f2}.schedule-list p:nth-of-type(3){background:#e4f4fb}.schedule-list p:nth-of-type(4){background:#f2e5fd}
.schedule-list time { color: #64708d; }

.store-window { width: 205px; height: 286px; right: -34px; bottom: -5px; z-index: 4; border-radius: 17px; transform: rotate(-1deg); }
.store-top { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 9px; }
.store-hero { height: 142px; display: grid; grid-template-columns: 55% 45%; align-items: center; padding: 13px; margin: 0 8px; border-radius: 8px; background: #e9e1d6; overflow: hidden; }
.store-hero strong { font: 600 16px/1.15 "Manrope",sans-serif; }
.store-hero button { margin-top: 14px; padding: 7px 8px; border: 0; border-radius: 4px; color: #fff; background: #111; font-size: 6px; }
.vase { align-self: end; justify-self: center; width: 47px; height: 70px; border-radius: 46% 46% 35% 35%; background: linear-gradient(90deg,#b79062,#e0c79b,#a87e4d); position: relative; box-shadow: 0 14px 17px rgba(84,53,18,.2); }
.vase i,.vase b { position: absolute; width: 6px; height: 50px; bottom: 56px; left: 22px; background: #496329; transform-origin: bottom; transform: rotate(-18deg); }
.vase b { transform: rotate(24deg); height: 61px; }
.vase i::before,.vase i::after,.vase b::before,.vase b::after { content:""; position:absolute; width:23px; height:10px; border-radius:100% 0 100% 0; background:#698639; }
.vase i::before,.vase b::before { left:-20px; top:8px; transform:rotate(18deg); }.vase i::after,.vase b::after { left:3px; top:22px; transform:rotate(-14deg); }
.store-products { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px; }
.store-products span { display: grid; padding: 5px; background: #f0e9df; border-radius: 6px; text-align: center; font-size: 6px; }
.store-products i { height: 42px; display: block; margin-bottom: 4px; position: relative; }
.store-products i::before { content:""; position:absolute; width:17px;height:31px;bottom:2px;left:50%;transform:translateX(-50%);border-radius:4px 4px 7px 7px;background:linear-gradient(90deg,#d7c3a2,#f8f1e6);box-shadow:0 5px 10px rgba(62,43,20,.13)}
.store-products span:first-child i::after { content:""; position:absolute;width:2px;height:24px;bottom:29px;left:50%;background:#9b795c;box-shadow:4px 1px #9b795c,-4px 2px #9b795c; }

.hero-kicker { height: 90px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #666cdd; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.hero-kicker span { width: 125px; height: 1px; background: linear-gradient(90deg, transparent, #7890ee); }
.hero-kicker span:last-child { transform: rotate(180deg); }

.services { padding: 56px 0 64px; background: linear-gradient(110deg, #f9f8ff 0%, #f1f0ff 52%, #fbfaff 100%); border-block: 1px solid #f2f0fb; }
.section-heading { margin-bottom: 26px; }
.section-label { margin: 0 0 11px; color: #5567e8; font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.section-heading h2 { margin: 0; font: 800 clamp(30px, 3.1vw, 43px)/1.15 "Manrope",sans-serif; letter-spacing: -1.9px; }
.section-heading h2 span { color: #4b55a1; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.service-card { min-height: 126px; padding: 24px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.86); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(81,68,163,.05); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(81,68,163,.11); }
.service-icon { flex: 0 0 auto; width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; color: #3548ff; background: linear-gradient(145deg,#edf0ff,#f8f5ff); box-shadow: inset 0 0 0 1px rgba(83, 77, 255, .025); }
.service-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 0 0 6px; font: 700 17px "Manrope",sans-serif; }
.service-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.portfolio { padding: 78px 0 68px; position: relative; background: linear-gradient(180deg,#fff 0%,#fefeff 72%,#fafbff 100%); }
.section-heading--row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-note { width: 310px; margin: 0 0 2px; color: #8188a0; font-size: 13px; line-height: 1.45; text-align: right; }
.portfolio .section-heading h2 span { color: transparent; background: linear-gradient(90deg,#354ef0,#a528eb); background-clip: text; -webkit-background-clip: text; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card { position: relative; overflow: hidden; border: 1px solid #eceef7; border-radius: 16px; background: #fff; box-shadow: 0 13px 34px rgba(37,39,88,.075); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.project-card::after { content:""; position:absolute; inset:0 0 auto; height:2px; opacity:0; background:linear-gradient(90deg,var(--blue),var(--violet)); transition:opacity .28s ease; }
.project-card:hover { transform: translateY(-6px); border-color:#dfe3f6; box-shadow: 0 25px 52px rgba(37,39,88,.13); }
.project-card:hover::after { opacity:1; }
.project-shot { height: 238px; position: relative; overflow: hidden; transition:transform .35s ease; transform-origin:center; }
.project-card:hover .project-shot { transform:scale(1.012); }
.project-shot--agenda { background: linear-gradient(135deg,#efeaff 0%,#d6d7ff 48%,#c5d8ff 100%); }
.agenda-board { position: absolute; width: 88%; height: 78%; top: 27px; left: 22px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 14px 26px rgba(75,67,164,.18); transform: rotate(-1.5deg); }
.project-appbar { height: 31px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eceef8; color: #434b66; font-size: 6px; }
.project-appbar strong { display: flex; align-items: center; gap: 5px; }
.project-appbar > span { color: #56607b; }.project-appbar > span b { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; color: #fff; background: #284ef5; font-size: 13px; }
.app-spark { width: 12px; height: 12px; display: block; flex: 0 0 auto; object-fit: contain; }
.agenda-desktop { height: calc(100% - 31px); display: grid; grid-template-columns: 42% 58%; }
.agenda-calendar { padding: 14px 12px; border-right: 1px solid #eceef8; color: #37405b; font-size: 7px; }
.calendar-week,.calendar-dates { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-top: 13px; text-align: center; }
.calendar-week { color: #969db2; font-size: 5px; }.calendar-dates { gap: 9px 7px; }.calendar-dates i { width: 7px; height: 7px; justify-self: center; border-radius: 2px; background: #dce0ed; }.calendar-dates .today { background: #3855f5; box-shadow: 0 0 0 3px #e6e9ff; }
.agenda-timeline { padding: 13px 12px; font-size: 7px; }.agenda-timeline > strong { color: #3b435d; }.agenda-timeline p { height: 24px; margin: 6px 0 0; display: grid; grid-template-columns: 30px 1fr; align-items: center; border-radius: 4px; background: #e2e4ff; color: #56617d; font-size: 5.5px; }.agenda-timeline p:nth-child(3){background:#e1f4f0}.agenda-timeline p:nth-child(4){background:#dff1f8}.agenda-timeline p:nth-child(5){background:#f1e3fa}.agenda-timeline time{padding-left:6px}.agenda-timeline span{font-weight:600}
.agenda-phone { position: absolute; width: 76px; height: 158px; right: 8px; bottom: -18px; z-index: 3; padding: 20px 8px 8px; border: 5px solid #18213c; border-radius: 18px; color: #3f4864; background: #fff; box-shadow: 0 14px 24px rgba(31,24,78,.22); transform: rotate(-6deg); font-size: 6px; }
.agenda-phone .phone-notch { position: absolute; top: 4px; left: 23px; width: 21px; height: 4px; border-radius: 4px; background: #18213c; }.agenda-phone small{display:block;margin:5px 0 8px;color:#9aa0b1;font-size:5px}.agenda-phone i{display:block;height:22px;margin-top:5px;border-radius:4px;background:#e2e5ff}.agenda-phone i:nth-of-type(2){background:#e0f3ee}.agenda-phone i:nth-of-type(3){background:#e2f0f7}.agenda-phone i:nth-of-type(4){background:#f0e2f8}
.project-shot--dashboard { background: linear-gradient(145deg,#eef2ff,#cbd6ff); }
.core-board { position: absolute; inset: 18px 18px 0; display: grid; grid-template-columns: 23% 77%; overflow: hidden; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 16px 28px rgba(42,55,137,.2); }
.core-sidebar { padding: 12px 8px; display: flex; flex-direction: column; gap: 8px; color: #778198; background: #111d39; font-size: 5px; }.core-sidebar strong{display:flex;align-items:center;gap:5px;margin-bottom:9px;color:#fff;font-size:6px}.core-sidebar span{padding:5px 6px;border-radius:3px}.core-sidebar .selected{color:#fff;background:#2c467c}
.core-main { position: relative; padding: 36px 11px 10px; background: #f9faff; }
.core-topbar { position:absolute;inset:0 0 auto;height:27px;padding:0 9px;display:flex;align-items:center;justify-content:flex-end;gap:9px;border-bottom:1px solid #eceef5;background:#fff;color:#98a0b5;font-size:5px}.core-topbar>i{margin-right:auto;width:20px;height:3px;border-radius:5px;background:#ebedf5}.core-topbar>span{width:71px;padding:4px 6px;border:1px solid #eceef6;border-radius:4px}.core-topbar>b{display:grid;width:16px;height:16px;place-items:center;border-radius:50%;color:#fff;background:#2471d6;font-size:5px}
.core-title { display:block;margin-bottom:9px;color:#252d46;font-size:9px}.core-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.core-stats span{padding:7px;border:1px solid #edf0f7;border-radius:5px;background:#fff}.core-stats small{display:block;color:#9aa1b4;font-size:4.5px}.core-stats b{display:block;margin-top:5px;color:#242d45;font-size:7px}
.core-data{display:grid;grid-template-columns:1.7fr 1fr;gap:6px;margin-top:6px}.core-chart,.core-donut{height:76px;padding:7px;border:1px solid #edf0f7;border-radius:5px;background:#fff}.core-data small{color:#626c86;font-size:4.5px}.core-chart>div{height:51px;padding-top:9px;display:flex;align-items:end;justify-content:space-around;background:repeating-linear-gradient(to bottom,transparent 0 12px,#f1f2f8 13px)}.core-chart i{width:9px;border-radius:2px 2px 0 0;background:linear-gradient(#6557fb,#9ea7ff)}.core-chart i:nth-child(1){height:22%}.core-chart i:nth-child(2){height:34%}.core-chart i:nth-child(3){height:50%}.core-chart i:nth-child(4){height:43%}.core-chart i:nth-child(5){height:69%}.core-chart i:nth-child(6){height:86%}
.core-donut i{display:block;width:43px;height:43px;margin:8px auto 0;border:8px solid #695cf9;border-right-color:#dfe2ff;border-radius:50%}.core-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}.core-bottom i{height:21px;border:1px solid #edf0f7;border-radius:4px;background:linear-gradient(90deg,#fff,#f1f3ff)}
.project-shot--store { background: #eee5d9; }
.store-board{position:absolute;inset:12px 12px 0;overflow:hidden;border-radius:8px 8px 0 0;background:#fff;box-shadow:0 14px 26px rgba(83,56,27,.17)}
.store-nav{height:31px;padding:0 10px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:#4f4a44;background:rgba(255,255,255,.96);font-size:5px}.store-nav strong{font:700 9px "Manrope",sans-serif}.store-nav span{text-align:center}.store-nav i{font-style:normal}
.store-scene{position:relative;height:145px;overflow:hidden;background:linear-gradient(110deg,#f1e9dc,#d7c6ab)}.shop-copy{position:absolute;z-index:4;top:24px;left:23px;display:grid;justify-items:start;gap:7px}.shop-copy strong{font:600 17px/1.12 "Manrope",sans-serif}.shop-copy small{color:#6f675f;font-size:5.5px;line-height:1.45}.shop-copy button{border:0;border-radius:3px;padding:6px 8px;color:#fff;background:#151515;font-size:5px}
.bottle{position:absolute;z-index:3;width:59px;height:94px;right:54px;bottom:8px;border-radius:7px 7px 13px 13px;background:linear-gradient(90deg,#c5a47a,#f5ead6,#aa875f);box-shadow:0 16px 22px rgba(64,44,17,.23)}.bottle::before{content:"";position:absolute;width:36px;height:16px;top:-14px;left:11px;border-radius:2px;background:#151515}.bottle::after{content:"";position:absolute;width:50px;height:6px;top:-20px;left:18px;border-radius:3px;background:#151515}.bottle>i{position:absolute;width:7px;height:14px;top:-29px;left:25px;background:#151515}.bottle>b{position:absolute;width:41px;height:33px;top:35px;left:9px;display:grid;place-items:center;border:1px solid rgba(85,58,31,.16);background:#f5ead8}.bottle>b small{font:500 5px "Manrope",sans-serif;color:#76664f}
.leaf{position:absolute;z-index:2;width:56px;height:23px;border-radius:100% 0 100% 0;background:#657842;right:6px;bottom:35px;transform:rotate(-31deg)}.leaf::after{content:"";position:absolute;width:48px;height:2px;top:11px;left:-34px;background:#6d7650;transform:rotate(-17deg)}.leaf--two{right:4px;bottom:77px;transform:rotate(25deg);background:#899052}.leaf--three{right:34px;bottom:103px;transform:rotate(-48deg);background:#768342}
.soap-stone{position:absolute;z-index:2;width:43px;height:17px;right:108px;bottom:12px;border-radius:50%;background:#b68d5e;transform:rotate(-12deg);box-shadow:0 5px 10px rgba(66,44,24,.14)}.soap-stone--two{right:90px;bottom:5px;width:38px;background:#d8b88d;transform:rotate(8deg)}
.store-categories{height:38px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;color:#73685a;background:#fff;font-size:9px;text-align:center}.store-categories span{display:grid;gap:2px}.store-categories b{font-size:5px}
.project-info { min-height: 84px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-top:1px solid rgba(232,234,245,.75); background:rgba(255,255,255,.97); }
.project-info h3 { margin:0 0 3px;font:700 16px "Manrope",sans-serif}.project-info p{margin:0;color:#747d98;font-size:12px}.project-info a{width:41px;height:41px;display:grid;place-items:center;border:1px solid #edf0f7;border-radius:50%;color:#1c2949;background:#f7f8fc;font-size:20px;box-shadow:0 5px 13px rgba(34,39,87,.05);transition:.22s ease}.project-info a:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 8px 18px rgba(80,60,230,.25);transform:translateX(2px)}.project-info a:focus-visible{outline:3px solid rgba(58,82,245,.25);outline-offset:3px}

.process { padding: 52px 0 75px; }
.process-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-list li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 13px; }
.process-list li:not(:last-child)::after { content:""; position:absolute; top:28px; left:56px; width:calc(100% - 42px); border-top:2px dotted #c4caeb; z-index:-1; }
.process-list li > span { width:58px; height:58px; display:grid;place-items:center;border-radius:50%;color:#3152f5;background:linear-gradient(145deg,#f0f2ff,#f8f5ff);font:700 20px "Manrope",sans-serif;box-shadow:0 0 0 9px #fff}
.process-list div { padding-top: 8px; }
.process-list h3 { margin:0 0 8px;font:700 16px "Manrope",sans-serif}.process-list p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.contact { padding: 0 0 42px; }
.cta-panel { min-height: 166px; padding: 35px 52px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 35px; border-radius: 24px; color:#fff; background:linear-gradient(110deg,#098aed 0%,#244efb 48%,#a920ed 100%);box-shadow:0 24px 52px rgba(56,69,229,.24)}
.cta-panel h2 { position:relative;z-index:2;margin:0;font:700 clamp(28px,3vw,39px)/1.13 "Manrope",sans-serif;letter-spacing:-1.5px}.section-label--light{position:relative;z-index:2;color:#dce6ff}.cta-shape{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.cta-shape--one{width:320px;height:320px;left:-80px;top:-100px;box-shadow:0 0 0 50px rgba(255,255,255,.03)}.cta-shape--two{width:260px;height:260px;right:-50px;bottom:-170px;box-shadow:0 0 0 70px rgba(255,255,255,.04)}
.button--whatsapp { position:relative;z-index:2;min-width:310px;color:#10162f;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(24,21,105,.22)}.button--whatsapp > .whatsapp-icon{display:grid;place-items:center;width:27px;height:27px;border:2px solid #13ba57;border-radius:50%;color:#13ba57}.whatsapp-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.whatsapp-icon svg path:last-child{fill:currentColor;stroke:none}.button--whatsapp b{font-size:18px}

.site-footer { padding: 13px 0 24px; }
.footer-grid { min-height: 100px; display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:30px}.footer-grid > p{padding-left:32px;border-left:1px solid #dde1ef;color:#69728e;font-size:12px;line-height:1.5}.footer-grid nav{justify-self:end;display:flex;gap:30px;color:#58617c;font-size:12px}.social-links{display:flex;gap:11px}.social-links a{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;color:#fff;background:#10162f;font-size:11px;font-weight:700}.copyright{padding-top:18px;border-top:1px solid #eceef5;display:flex;justify-content:space-between;color:#9ba1b3;font-size:10px}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay { transition-delay: .13s; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 20px; }
  .hero-copy { max-width: 720px; text-align:center; margin-inline:auto; }
  .eyebrow,.hero-actions,.hero-proof { justify-content:center; }
  .hero-visual { width:min(700px,100%);margin-inline:auto; }
  .service-grid { grid-template-columns: repeat(2,1fr); }
  .project-shot { height:220px; }
  .process-list { grid-template-columns: repeat(2,1fr); gap:32px; }
  .process-list li:nth-child(2)::after { display:none; }
  .cta-panel { padding-inline:38px; }
  .button--whatsapp { min-width:270px; }
}

@media (max-width: 820px) {
  .container { width:min(100% - 34px, 680px); }
  .site-header { height:78px; }
  .nav-shell { grid-template-columns:1fr auto; }
  .brand-mark{width:45px;height:45px}.brand-copy strong{font-size:21px}.brand-copy small{font-size:7px;letter-spacing:4px}
  .menu-toggle { display:block;z-index:3; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav { display:flex;position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px;background:rgba(255,255,255,.97);font:700 24px "Manrope",sans-serif;opacity:0;visibility:hidden;transform:translateY(-15px);transition:.25s ease;backdrop-filter:blur(10px)}
  .main-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .header-cta { display:none; }
  .hero { padding-top:35px; }
  .hero h1 { letter-spacing:-2.5px; }
  .hero-visual { transform:scale(.9); transform-origin:top center; margin-bottom:-55px; }
  .dashboard-window{right:50%;transform:translateX(50%) rotate(-3deg)}
  .agenda-window{left:4%}.store-window{right:0}
  .hero-kicker { font-size:10px;letter-spacing:1.5px; }.hero-kicker span{width:60px}
  .section-heading--row{display:block}.section-note{width:auto;margin-top:14px;text-align:left}
  .project-grid { grid-template-columns:1fr; }
  .project-shot { height:280px; }
  .cta-panel { flex-direction:column;text-align:center;padding-block:42px; }
  .section-label--light{display:none}.button--whatsapp{min-width:0;width:min(100%,330px)}
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-grid nav{grid-column:1/-1;justify-self:start}.social-links{justify-self:end}
}

@media (max-width: 620px) {
  .container { width: min(100% - 28px, 520px); }
  .hero { padding-top:20px; }
  .eyebrow { justify-content:flex-start;font-size:10px; }
  .hero-copy { text-align:left; }
  .hero h1 { font-size:clamp(39px,12vw,53px);letter-spacing:-2.3px; }
  .hero-copy > p { font-size:17px;margin-top:21px; }
  .hero-actions { justify-content:flex-start;flex-direction:column; }.hero-actions .button{width:100%}
  .hero-proof { justify-content:flex-start;flex-direction:column;gap:10px; }
  .hero-visual { width:700px;left:50%;margin-left:-350px;transform:scale(.63);margin-bottom:-170px; }
  .hero-kicker { margin-top:10px;line-height:1.4;text-align:center; }.hero-kicker span{width:28px;flex:0 0 auto}
  .services{padding:48px 0}.section-heading h2{font-size:32px}.service-grid{grid-template-columns:1fr}.service-card{min-height:112px;padding:20px}.service-icon{width:50px;height:50px}
  .portfolio{padding:58px 0 45px}.project-shot{height:235px}.project-info{min-height:82px}
  .process{padding:42px 0 58px}.process-list{grid-template-columns:1fr}.process-list li::after{display:none}.process-list li{grid-template-columns:54px 1fr}.process-list li>span{width:54px;height:54px}
  .cta-panel{padding:38px 22px;border-radius:20px}.cta-panel h2{font-size:28px}.button--whatsapp{font-size:13px;padding-inline:16px}
  .footer-grid{grid-template-columns:1fr;gap:20px;padding-block:18px}.footer-grid>p{padding-left:0;border-left:0}.footer-grid nav{grid-column:auto;flex-wrap:wrap;gap:18px}.social-links{justify-self:start}.copyright{gap:15px;flex-direction:column}
}

@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;transform:none; }
}