:root {
  --ink: #251c2e;
  --muted: #6e6575;
  --cream: #fffaf4;
  --pink: #ed2787;
  --pink-soft: #ffe4f1;
  --purple: #7655b7;
  --yellow: #f7bc37;
  --teal: #43b9ae;
  --blue: #416b9f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 78px; display: grid;
  grid-template-columns: 190px 1fr 190px; align-items: center; padding: 0 5vw;
  background: rgba(255,250,244,.92); border-bottom: 1px solid rgba(37,28,46,.08);
  backdrop-filter: blur(18px);
}
.brand img { display: block; width: 142px; height: auto; }
.site-header nav { display: flex; align-items: center; justify-content: center; gap: 32px; font-size: 14px; font-weight: 700; }
.site-header nav a { transition: color .2s ease; }
.site-header nav a:hover { color: var(--pink); }
.header-login { justify-self: end; padding: 11px 18px; border: 1px solid rgba(37,28,46,.18); border-radius: 999px; font-size: 13px; font-weight: 800; }

.hero { position: relative; min-height: 760px; overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 3vw; padding: 78px 5vw 96px; background: #251c2e; color: white; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(to bottom right, transparent 49%, var(--cream) 50%); }
.hero-content { position: relative; z-index: 3; max-width: 660px; padding-bottom: 35px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; color: #f7dff0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px rgba(237,39,135,.16); }
.hero h1 { margin: 0; max-width: 640px; font-size: clamp(46px, 5.5vw, 78px); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { color: #f6bd39; font-family: Georgia, serif; font-weight: 500; }
.hero-copy { max-width: 620px; margin: 28px 0 34px; color: #ded5e5; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 23px; border-radius: 15px; font-size: 14px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--pink); color: white; box-shadow: 0 13px 30px rgba(237,39,135,.28); }
.button-primary:hover { box-shadow: 0 16px 34px rgba(237,39,135,.38); }
.button-ghost { border: 1px solid rgba(255,255,255,.24); color: white; }
.button-ghost:hover { background: rgba(255,255,255,.07); }
.play { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 9px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 24px 0 0; color: #bfb2c7; font-size: 12px; font-weight: 700; }
.hero-note span { color: #6fd1c7; }

.orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .8; animation: drift 8s ease-in-out infinite; will-change: transform; }
.orb-one { width: 330px; height: 330px; right: -120px; top: -110px; background: radial-gradient(circle at 35% 35%, #fb79b7, #e22986 52%, transparent 55%); }
.orb-two { width: 130px; height: 130px; left: 46%; bottom: 85px; border: 27px solid #45bdb2; animation-delay: -3s; }
.orb-three { width: 85px; height: 85px; left: 38%; top: 60px; background: #f7bc37; animation-delay: -5s; opacity: .35; }
.orb-four { width: 46px; height: 46px; left: 6%; bottom: 88px; border: 10px solid #ec4e99; animation: roam 11s ease-in-out infinite; opacity: .55; }
.sparkle { position: absolute; z-index: 2; color: white; font-size: 18px; opacity: .45; animation: twinkle 3.6s ease-in-out infinite; }
.sparkle-one { top: 18%; left: 48%; }.sparkle-two { right: 6%; bottom: 25%; animation-delay: -1.1s; }.sparkle-three { left: 31%; bottom: 18%; color: #f7bc37; animation-delay: -2.2s; }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(8px,-25px,0) rotate(12deg); } }
@keyframes roam { 0%,100% { transform: translate3d(0,0,0) scale(1); } 35% { transform: translate3d(40px,-35px,0) scale(.82); } 70% { transform: translate3d(85px,8px,0) scale(1.08); } }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: .85; transform: scale(1.2) rotate(55deg); } }

.product-stage { position: relative; z-index: 4; width: min(760px, 100%); justify-self: end; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); animation: stageFloat 7s ease-in-out infinite; }
.app-window { overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 35px 80px rgba(0,0,0,.38); }
.app-topbar { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #eee8f0; }
.app-topbar img { width: 32px; height: 32px; object-fit: contain; }
.app-topbar strong { font-size: 14px; }
.app-search { margin-left: auto; width: 35%; padding: 9px 13px; border-radius: 9px; background: #f7f3f8; color: #afa5b2; font-size: 10px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: white; font-size: 9px; font-weight: 900; }
.app-body { display: grid; grid-template-columns: 128px 1fr; min-height: 410px; }
.app-body aside { display: flex; flex-direction: column; gap: 8px; padding: 21px 11px; background: #faf7fb; border-right: 1px solid #eee8f0; }
.app-body aside span { display: flex; align-items: center; gap: 8px; padding: 10px 9px; border-radius: 8px; color: #887e8b; font-size: 9px; font-weight: 700; }
.app-body aside i { width: 6px; height: 6px; border-radius: 50%; background: #d6ced9; }
.app-body aside .active { background: #ffe5f1; color: #c91e70; }
.app-body aside .active i { background: var(--pink); }
.app-main { padding: 26px 24px; background: #fff; }
.app-heading { display: flex; justify-content: space-between; align-items: end; }
.app-heading small { color: #9b919e; font-size: 9px; }
.app-heading h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.04em; }
.app-heading button { padding: 9px 12px; border: 0; border-radius: 9px; background: var(--pink); color: white; font-size: 9px; font-weight: 800; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 15px; }
.stat-row article { display: flex; flex-direction: column; min-height: 92px; padding: 13px; border: 1px solid #eee8f0; border-radius: 13px; }
.stat-row span { color: #918795; font-size: 8px; font-weight: 700; }
.stat-row strong { margin: 5px 0; font-size: 20px; }
.stat-row small { color: #35a99d; font-size: 7px; }
.agenda-card { padding: 15px; border: 1px solid #eee8f0; border-radius: 14px; }
.agenda-title { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 10px; }
.agenda-title span { color: var(--pink); font-size: 8px; font-weight: 800; }
.event-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f3eef4; }
.event-row time { width: 34px; height: 36px; display: grid; place-items: center; align-content: center; border-radius: 8px; background: #f8f3f9; color: #5a4b60; font-size: 12px; font-weight: 900; line-height: 1; }
.event-row time small { margin-top: 3px; color: #a59aa8; font-size: 6px; }
.event-row div { display: flex; flex-direction: column; gap: 4px; }
.event-row div strong { font-size: 9px; }
.event-row div span { color: #9e94a1; font-size: 7px; }
.status { padding: 6px 8px; border-radius: 999px; font-size: 6px; }
.confirmed { background: #def6f2; color: #218f84; }.pending { background: #fff0c9; color: #ac7311; }.design { background: #eee7fb; color: #6d4ab0; }
.mini-tag { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 4px; min-width: 115px; padding: 13px 16px; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.22); color: var(--ink); font-size: 9px; font-weight: 700; }
.mini-tag b { font-size: 13px; }.tag-pink { right: -22px; top: 35px; background: #ffdcec; }.tag-yellow { left: -28px; bottom: 42px; background: #ffdb6b; }
@keyframes stageFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.mini-tag { animation: tagFloat 5s ease-in-out infinite; }.tag-yellow { animation-delay: -2.4s; }
@keyframes tagFloat { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: 1.5deg; } }

.audience-strip { padding: 50px 5vw 20px; text-align: center; }
.audience-strip p { margin: 0 0 24px; color: #938998; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.audience-strip div { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.audience-strip span { padding: 10px 16px; border: 1px solid #e8dfe9; border-radius: 999px; background: white; color: #5f5365; font-size: 12px; font-weight: 750; }

.product-tour { position: relative; overflow: hidden; background: #fff; }
.product-tour::before { content: ""; position: absolute; width: 360px; height: 360px; top: 17%; right: -230px; border: 55px solid #fee1ef; border-radius: 50%; }
.screen-showcase { position: relative; z-index: 2; display: grid; grid-template-columns: .72fr 1.28fr; gap: 6vw; align-items: center; max-width: 1240px; margin: 0 auto 110px; }
.screen-showcase:last-child { margin-bottom: 0; }.agenda-showcase { grid-template-columns: 1.3fr .7fr; }
.screen-copy .screen-number { display: inline-block; margin-bottom: 18px; color: var(--pink); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.screen-copy h3 { margin: 0; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.screen-copy > p { margin: 22px 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.screen-copy ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; color: #594d5f; font-size: 13px; font-weight: 750; }.screen-copy li { display: flex; align-items: center; gap: 10px; }.screen-copy li b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #def6f2; color: #218f84; }
.product-screen { overflow: hidden; border: 1px solid #e4dce7; border-radius: 24px; background: white; box-shadow: 0 30px 75px rgba(52,33,61,.14); }
.screen-bar { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #ece6ee; color: #6f6473; font-size: 9px; font-weight: 800; }.screen-bar > span { margin: auto; }.screen-bar > b { color: #2d9b90; font-size: 8px; }.traffic { display: flex; gap: 5px; }.traffic i { width: 7px; height: 7px; border-radius: 50%; background: #ef6989; }.traffic i:nth-child(2) { background: #f7bc37; }.traffic i:nth-child(3) { background: #43b9ae; }
.quote-workspace { position: relative; padding: 17px 22px 25px; background: #f4eff6; }
.quote-tools { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }.quote-tools button, .quote-actions span, .quote-actions b { padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #827686; font-size: 7px; font-weight: 800; }.quote-tools button.selected { background: white; color: var(--pink); box-shadow: 0 2px 8px rgba(45,28,54,.08); }.quote-actions { display: flex; gap: 7px; margin-left: auto; }.quote-actions span { background: white; }.quote-actions b { background: var(--pink); color: white; }
.quote-paper { position: relative; max-width: 560px; min-height: 510px; margin: 0 auto; padding: 34px 36px 26px; background: white; box-shadow: 0 8px 22px rgba(41,25,48,.1); }
.sample-brand { display: flex; align-items: center; gap: 9px; }.sample-brand > div:last-child { display: flex; flex-direction: column; }.sample-brand strong { color: #34233e; font-family: Georgia, serif; font-size: 17px; letter-spacing: .12em; }.sample-brand span { color: #aa819d; font-size: 5px; font-weight: 900; letter-spacing: .2em; }.sample-mark { position: relative; width: 34px; height: 34px; }.sample-mark i { position: absolute; width: 19px; height: 25px; border-radius: 50% 50% 45% 45%; background: #df337f; transform: rotate(-25deg); }.sample-mark i:nth-child(2) { left: 12px; top: 2px; background: #efb83c; transform: rotate(18deg); }.sample-mark i:nth-child(3) { left: 8px; top: 13px; background: #7757b3; transform: rotate(5deg); }
.quote-meta { position: absolute; top: 33px; right: 36px; display: flex; flex-direction: column; align-items: end; gap: 4px; }.quote-meta span { color: #ca2670; font-size: 6px; font-weight: 900; letter-spacing: .15em; }.quote-meta strong { font-size: 12px; }.quote-meta small { color: #a89eab; font-size: 6px; }
.client-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 38px; padding: 17px 0; border-top: 1px solid #f0e9f1; border-bottom: 1px solid #f0e9f1; }.client-info div { display: flex; flex-direction: column; gap: 4px; }.client-info small { color: #b52b70; font-size: 5px; font-weight: 900; letter-spacing: .1em; }.client-info strong { font-size: 9px; }.client-info span { color: #9c929f; font-size: 6px; }
.quote-table { margin-top: 22px; }.quote-table > div { display: grid; grid-template-columns: 1fr 45px 65px; align-items: center; padding: 11px 8px; border-bottom: 1px solid #f1ebf2; font-size: 7px; }.quote-table .q-head { padding-top: 7px; background: #33273b; color: white; font-size: 5px; font-weight: 900; letter-spacing: .08em; }.quote-table .q-head span:last-child { text-align: right; }.quote-table > div > span { display: flex; flex-direction: column; gap: 3px; font-weight: 800; }.quote-table small { color: #a097a3; font-size: 5px; font-weight: 500; }.quote-table div > b { color: #8f8493; font-size: 6px; }.quote-table div > strong { text-align: right; }
.quote-bottom { display: grid; grid-template-columns: 1fr 1.1fr; gap: 25px; align-items: end; margin-top: 20px; }.quote-bottom p { display: flex; flex-direction: column; gap: 5px; margin: 0; color: #8e8491; font-size: 6px; }.quote-bottom p b { color: #c52872; font-size: 8px; }.quote-bottom > div { display: grid; gap: 6px; }.quote-bottom > div span, .quote-bottom > div strong { display: flex; justify-content: space-between; font-size: 6px; }.quote-bottom > div > strong { margin-top: 2px; padding-top: 8px; border-top: 1px solid #ded5e0; color: #c52872; font-size: 8px; }
.floating-confirm { position: absolute; right: 7px; bottom: 41px; display: flex; align-items: center; gap: 9px; min-width: 145px; padding: 12px; border-radius: 12px; background: white; box-shadow: 0 13px 30px rgba(43,27,52,.2); animation: confirmBounce 4s ease-in-out infinite; }.floating-confirm > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #daf5ef; color: #268d83; font-size: 11px; font-weight: 900; }.floating-confirm div { display: flex; flex-direction: column; gap: 3px; }.floating-confirm b { font-size: 8px; }.floating-confirm small { color: #978c9a; font-size: 6px; }
@keyframes confirmBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.agenda-workspace { padding: 27px; background: #fff; }.agenda-app-heading { display: flex; align-items: center; justify-content: space-between; }.agenda-app-heading small { color: var(--pink); font-size: 6px; font-weight: 900; letter-spacing: .15em; }.agenda-app-heading h3 { margin: 4px 0 0; font-size: 17px; letter-spacing: -.03em; }.agenda-app-heading button { padding: 9px 11px; border: 0; border-radius: 8px; background: var(--pink); color: white; font-size: 7px; font-weight: 900; }
.calendar-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin: 22px 0; }.calendar-week > div { position: relative; min-height: 88px; display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border: 1px solid #eee7ef; border-radius: 11px; background: #fcfafc; }.calendar-week small { color: #aaa0ad; font-size: 5px; font-weight: 900; }.calendar-week strong { margin: 8px 0 10px; font-size: 14px; }.calendar-week span { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }.calendar-week i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }.calendar-week i:nth-child(2) { background: var(--teal); }.calendar-week i:nth-child(3) { background: var(--yellow); }.calendar-week .active { border-color: var(--pink); background: #fff0f7; color: #bc236b; transform: translateY(-4px); box-shadow: 0 8px 18px rgba(237,39,135,.13); }
.day-events { border: 1px solid #eee7ef; border-radius: 14px; overflow: hidden; }.day-label { display: flex; justify-content: space-between; padding: 12px 15px; background: #f8f4f9; font-size: 8px; }.day-label span { color: #928797; }.day-events article { display: grid; grid-template-columns: 38px 5px 1fr auto; align-items: center; gap: 10px; padding: 13px 15px; border-top: 1px solid #f0eaf1; }.day-events time { color: #766b7a; font-size: 7px; font-weight: 800; }.event-color { width: 4px; height: 30px; border-radius: 4px; }.pink-event { background: var(--pink); }.teal-event { background: var(--teal); }.day-events article div { display: flex; flex-direction: column; gap: 4px; }.day-events article div strong { font-size: 8px; }.day-events article div span { color: #9c929f; font-size: 6px; }.day-events article > b { padding: 6px 7px; border-radius: 999px; background: #e0f6f2; color: #268d83; font-size: 5px; }
.agenda-summary { display: flex; align-items: center; gap: 16px; margin-top: 17px; color: #8a7f8e; font-size: 6px; }.agenda-summary span { display: flex; align-items: center; gap: 5px; }.agenda-summary i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }.agenda-summary span:nth-child(2) i { background: var(--yellow); }.agenda-summary strong { margin-left: auto; color: #2a978c; }

.section { padding: 110px 6vw; }
.section-heading { max-width: 720px; margin: 0 auto 55px; text-align: center; }
.kicker { margin: 0 0 14px; color: var(--pink); font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.section-heading h2 { margin: 0; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -.05em; }
.section-heading > p:last-child { max-width: 630px; margin: 23px auto 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto; }
.feature-card { min-height: 230px; padding: 28px; border: 1px solid #ebe3eb; border-radius: 24px; background: rgba(255,255,255,.75); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(62,40,70,.08); }
.feature-card h3 { margin: 23px 0 10px; font-size: 18px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; }
.feature-icon svg { width: 22px; height: 22px; }.pink { background: #ffe2ef; color: #d51f75; }.yellow { background: #fff0c3; color: #a9750d; }.teal { background: #dcf5f1; color: #278f86; }.blue { background: #e0eaf6; color: #3f699b; }.purple { background: #eee7fa; color: #7252af; }.orange { background: #ffe6d7; color: #bf5b27; }
.team-highlight { display: grid; grid-template-columns: 72px 1fr 1.1fr; gap: 24px; align-items: center; max-width: 1180px; margin: 22px auto 0; padding: 28px; border-radius: 24px; background: #251c2e; color: white; }.team-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: rgba(237,39,135,.18); color: #ff72b4; }.team-icon svg { width: 29px; height: 29px; }.team-highlight .kicker { margin-bottom: 7px; color: #f7bc37; font-size: 8px; }.team-highlight h3 { margin: 0 0 7px; font-size: 22px; }.team-highlight p:not(.kicker) { margin: 0; color: #c9bdce; font-size: 11px; line-height: 1.55; }.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.role-cards > span { display: grid; grid-template-columns: 31px 1fr; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.06); }.role-cards i { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--pink); font-size: 8px; font-style: normal; font-weight: 900; }.role-cards > span:nth-child(2) i { background: var(--teal); }.role-cards b { font-size: 9px; }.role-cards small { margin-top: 4px; color: #aa9daf; font-size: 6px; }
.workflow { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: center; background: white; }
.workflow-copy h2, .ecosystem-copy h2, .faq-heading h2 { margin: 0; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -.05em; }
.workflow-copy > p:not(.kicker), .ecosystem-copy > p:not(.kicker), .faq-heading > p:not(.kicker) { color: var(--muted); font-size: 16px; line-height: 1.75; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--pink); font-size: 14px; font-weight: 850; }
.step-list { position: relative; }
.step-list::before { content: ""; position: absolute; top: 36px; bottom: 36px; left: 31px; width: 1px; background: #e7dce8; }
.step-list article { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; gap: 21px; align-items: start; padding: 21px 0; }
.step-list article > span { width: 63px; height: 63px; display: grid; place-items: center; border: 7px solid white; border-radius: 50%; background: var(--ink); color: white; font-size: 11px; font-weight: 900; }
.step-list article:nth-child(2) > span { background: var(--pink); }.step-list article:nth-child(3) > span { background: var(--teal); }.step-list article:nth-child(4) > span { background: var(--purple); }
.step-list h3 { margin: 5px 0 7px; font-size: 18px; }.step-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.ecosystem { display: grid; grid-template-columns: 1.12fr .88fr; gap: 7vw; align-items: center; background: #f2ecfa; }
.ecosystem-visual { position: relative; }
.canvas-card { overflow: hidden; max-width: 670px; border: 1px solid #ded3e9; border-radius: 25px; background: white; box-shadow: 0 26px 60px rgba(78,53,101,.16); }
.designer-top { display: flex; align-items: center; gap: 14px; padding: 13px 17px; border-bottom: 1px solid #eee8f0; }.designer-top img { display: block; width: 138px; height: auto; }.designer-top span { margin-left: auto; color: #8f8493; font-size: 7px; font-weight: 700; }.designer-top b { padding: 6px 8px; border-radius: 7px; background: #def6f2; color: #278f86; font-size: 6px; }
.designer-workspace { display: grid; grid-template-columns: 92px 1fr 96px; }
.designer-tools, .designer-properties { display: flex; flex-direction: column; gap: 9px; padding: 15px 10px; background: #fbf9fc; color: #837788; }.designer-tools { border-right: 1px solid #eee7ef; }.designer-properties { border-left: 1px solid #eee7ef; }.designer-tools strong, .designer-properties strong { color: #4f4255; font-size: 7px; }.designer-tools span, .designer-properties span { font-size: 6px; }.designer-tools div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 3px; }.designer-tools i { height: 28px; border-radius: 6px; background: #f3d2e2; }.designer-tools i:nth-child(2) { background: #e8dcf5; }.designer-tools i:nth-child(3) { background: #f8e3a6; }.designer-tools i:nth-child(4) { background: #d8efeb; }.designer-properties small { padding: 6px; border-radius: 5px; background: white; font-size: 5px; }.color-picks { display: flex; gap: 5px; }.color-picks i { width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 1px #ddd3df; }.color-picks i:nth-child(2) { background: var(--yellow); }.color-picks i:nth-child(3) { background: var(--purple); }.slider { height: 4px; border-radius: 4px; background: #e2dae5; }.slider i { display: block; width: 65%; height: 100%; border-radius: inherit; background: var(--purple); }
.designer-tools .tool-active { margin: 0 -4px; padding: 6px 4px; border-radius: 5px; background: #eee7fa; color: #6d4ab0; font-weight: 900; }
.canvas-scene { position: relative; height: 370px; overflow: hidden; background: linear-gradient(#fff9f5 0 73%, #e7d4bd 73%); }
.canvas-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 26%; height: 2px; background: rgba(89,62,47,.12); }
.backdrop { position: absolute; bottom: 27%; width: 122px; border-radius: 65px 65px 4px 4px; box-shadow: 0 8px 16px rgba(62,42,74,.12); }
.b-one { left: 24%; height: 210px; background: #f3b6cd; }.b-two { left: 45%; height: 260px; background: #8b72c1; }
.balloons { position: absolute; z-index: 2; width: 76px; height: 96px; border-radius: 50%; box-shadow: 34px 4px 0 -6px currentColor, 14px 39px 0 -8px currentColor, 47px 46px 0 -10px currentColor; }
.pink-balloons { top: 46px; left: 16%; background: #ec388d; color: #f492bd; transform: rotate(-12deg); }.gold-balloons { top: 58px; right: 20%; background: #f6be3f; color: #f0793c; transform: rotate(16deg); }
.lilac-balloons { width: 48px; height: 62px; top: 124px; right: 10%; background: #8061ba; color: #b69add; transform: rotate(10deg) scale(.8); }
.pedestal { position: absolute; z-index: 3; bottom: 27%; width: 58px; border-radius: 30px 30px 7px 7px; }.pedestal-one { left: 56%; height: 120px; background: #fff; box-shadow: 0 4px 14px rgba(50,35,58,.14); }.pedestal-two { left: 66%; height: 85px; background: #f4c54d; }
.canvas-scene strong { position: absolute; z-index: 3; top: 110px; left: 32%; color: white; font-family: Georgia, serif; font-size: 34px; font-style: italic; text-shadow: 0 3px 8px rgba(67,40,77,.22); }
.rug { position: absolute; z-index: 1; left: 29%; bottom: 12%; width: 48%; height: 42px; border: 8px double rgba(119,75,41,.28); border-radius: 50%; background: #d3aa72; transform: perspective(90px) rotateX(55deg); }.selection-box { position: absolute; z-index: 5; left: 30%; top: 96px; width: 154px; height: 55px; border: 1px dashed #7252af; }.selection-box i { position: absolute; width: 7px; height: 7px; border: 1px solid #7252af; background: white; }.selection-box i:nth-child(1) { left: -4px; top: -4px; }.selection-box i:nth-child(2) { right: -4px; top: -4px; }.selection-box i:nth-child(3) { left: -4px; bottom: -4px; }.selection-box i:nth-child(4) { right: -4px; bottom: -4px; }
.background-removed { position: absolute; z-index: 7; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(52,35,62,.16); color: #278f86; font-size: 6px; font-weight: 900; animation: tagFloat 5s ease-in-out infinite; }.background-removed b { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #def6f2; }
.canvas-toolbar { display: flex; align-items: center; gap: 11px; padding: 14px 18px; color: #7a6d80; font-size: 9px; font-weight: 800; }
.canvas-toolbar span { padding: 7px 10px; border-radius: 8px; background: #f6f1f8; }.canvas-toolbar b { margin-left: auto; padding: 8px 11px; border-radius: 8px; background: var(--purple); color: white; }
.ecosystem-copy > p:not(.kicker) { margin: 24px 0; }
.ecosystem-points { display: grid; gap: 12px; margin: 26px 0; color: #584b60; font-size: 14px; font-weight: 750; }.ecosystem-points b { color: var(--teal); margin-right: 9px; }
.party-ia-badge { display: flex; align-items: center; gap: 13px; margin-top: 31px; padding: 16px 17px; border: 1px solid rgba(118,85,183,.2); border-radius: 16px; background: rgba(255,255,255,.65); }
.party-ia-badge i { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--purple); border-radius: 50%; color: var(--purple); font-style: normal; }
.party-ia-badge div { display: flex; flex-direction: column; gap: 4px; }.party-ia-badge strong { font-size: 17px; }.party-ia-badge em { color: var(--purple); font-style: normal; }.party-ia-badge span { color: #8c8092; font-size: 11px; }

.support-band { position: relative; display: grid; grid-template-columns: 170px 1fr auto; gap: 42px; align-items: center; overflow: hidden; padding-top: 80px; padding-bottom: 80px; background: #251c2e; color: white; }.support-band h2 { max-width: 720px; margin: 0; font-size: clamp(31px, 3.5vw, 49px); line-height: 1.05; letter-spacing: -.045em; }.support-band p:not(.kicker) { max-width: 720px; margin: 17px 0 0; color: #cfc5d4; font-size: 14px; line-height: 1.7; }.support-band .button { white-space: nowrap; }.support-orbit { position: relative; width: 145px; height: 145px; display: flex; align-items: baseline; justify-content: center; padding-top: 43px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: radial-gradient(circle,rgba(237,39,135,.3),rgba(118,85,183,.12)); }.support-orbit span { font-size: 49px; font-weight: 900; letter-spacing: -.07em; }.support-orbit b { color: #f7bc37; font-size: 22px; }.support-orbit i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--pink); animation: orbit 7s linear infinite; }.support-orbit i:nth-of-type(2) { width: 9px; height: 9px; background: var(--teal); animation-delay: -2.3s; }.support-orbit i:nth-of-type(3) { width: 7px; height: 7px; background: var(--yellow); animation-delay: -4.7s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(83px) rotate(0deg); } to { transform: rotate(360deg) translateX(83px) rotate(-360deg); } }

.pricing { background: var(--cream); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1240px; margin: 0 auto; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 480px; padding: 29px 24px 24px; border: 1px solid #e8dfe8; border-radius: 24px; background: white; }
.plan-card.featured { border: 2px solid var(--pink); box-shadow: 0 22px 48px rgba(237,39,135,.14); transform: translateY(-9px); }
.popular { position: absolute; top: -13px; right: 20px; padding: 7px 12px; border-radius: 999px; background: var(--pink); color: white; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-name { margin: 0 0 17px; color: #6f6375; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.plan-price { display: flex; align-items: center; gap: 9px; }.plan-price strong { font-size: 39px; letter-spacing: -.05em; }.plan-price span { color: #9b919e; font-size: 8px; font-weight: 800; line-height: 1.3; }
.plan-description { min-height: 64px; margin: 16px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.plan-card ul { display: grid; gap: 12px; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid #eee7ee; list-style: none; }
.plan-card li { display: flex; gap: 8px; color: #5f5365; font-size: 12px; line-height: 1.45; }.plan-card li span { color: var(--teal); font-weight: 900; }
.plan-card > a { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 13px 15px; border-radius: 11px; background: #f3eef4; font-size: 12px; font-weight: 900; }
.plan-card.purple > a { background: #eee8f9; color: #6849a5; }.plan-card.pink > a { background: var(--pink); color: white; }.plan-card.gold > a { background: #fff0c4; color: #98690d; }
.pricing-note { margin: 31px auto 0; color: #887d8c; font-size: 12px; text-align: center; }

.faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8vw; background: white; }
.faq-heading > p:not(.kicker) { max-width: 420px; }.faq-list { border-top: 1px solid #e8e0e9; }
.faq-list details { border-bottom: 1px solid #e8e0e9; }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 24px 3px; cursor: pointer; font-size: 15px; font-weight: 850; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--pink); font-size: 21px; transition: transform .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -6px 0 24px; padding-right: 45px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.final-cta { position: relative; overflow: hidden; padding: 105px 20px; background: var(--ink); color: white; text-align: center; }
.final-cta > * { position: relative; z-index: 2; }.final-cta > img { width: 68px; height: 68px; object-fit: contain; }.final-cta .kicker { margin-top: 12px; color: #f5bb38; }
.final-cta h2 { max-width: 820px; margin: 16px auto; font-size: clamp(37px, 4.5vw, 61px); line-height: 1.04; letter-spacing: -.05em; }.final-cta > p:not(.kicker) { color: #cfc4d4; }.final-cta .button { margin-top: 20px; }
.cta-confetti { position: absolute; z-index: 1; width: 210px; height: 210px; border: 38px solid; border-radius: 50%; opacity: .55; }.confetti-one { left: -80px; top: -70px; border-color: var(--teal); }.confetti-two { right: -75px; bottom: -85px; border-color: var(--pink); }

footer { display: grid; grid-template-columns: 1fr auto minmax(260px,370px); gap: 54px; align-items: start; padding: 52px 6vw 25px; background: #fff; }
.footer-brand img { width: 138px; }.footer-brand p { margin: 10px 0 0; color: #8a7f8e; font-size: 11px; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; font-size: 11px; font-weight: 800; }.footer-contact { display: flex; flex-direction: column; gap: 8px; }.footer-contact > span { color: #9d929f; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.footer-contact .location-label { margin-top: 13px; }.footer-contact a { max-width: 350px; font-size: 11px; font-weight: 800; line-height: 1.55; }.footer-contact a:hover { color: var(--pink); }
.footer-map { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr .65fr; min-height: 280px; overflow: hidden; margin-top: 4px; border: 1px solid #e9e1ea; border-radius: 22px; background: #f5eff8; }.footer-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; filter: saturate(.82) contrast(.96); }.footer-map > div { display: flex; flex-direction: column; justify-content: center; padding: 34px; }.footer-map span { color: var(--pink); font-size: 8px; font-weight: 900; letter-spacing: .14em; }.footer-map h3 { margin: 10px 0 12px; font-size: 28px; letter-spacing: -.04em; }.footer-map p { margin: 0; color: #766b7a; font-size: 12px; line-height: 1.7; }.footer-map a { display: inline-flex; gap: 8px; align-items: center; align-self: flex-start; margin-top: 20px; color: var(--purple); font-size: 11px; font-weight: 900; }
.copyright { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; margin: 0; padding-top: 22px; border-top: 1px solid #eee7ee; color: #aaa0ad; font-size: 9px; }.copyright a { color: #6f6375; font-weight: 900; }.copyright a:hover { color: var(--pink); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 24px; }.site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding: 70px 24px 115px; }.hero-content { max-width: 740px; }
  .product-stage { max-width: 760px; justify-self: center; transform: none; }.feature-grid { grid-template-columns: repeat(2, 1fr); }
  .team-highlight { grid-template-columns: 62px 1fr; }.role-cards { grid-column: 1 / -1; }
  .screen-showcase, .agenda-showcase { grid-template-columns: 1fr; gap: 45px; }.agenda-showcase .screen-copy { grid-row: 1; }.product-screen { max-width: 780px; width: 100%; margin: 0 auto; }
  .workflow, .ecosystem, .faq { grid-template-columns: 1fr; }.pricing-grid { grid-template-columns: repeat(2, 1fr); }.plan-card.featured { transform: none; }
  .support-band { grid-template-columns: 145px 1fr; }.support-band .button { grid-column: 2; justify-self: start; }
  footer { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }.footer-map { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: 68px; padding: 0 16px; }.brand img { width: 116px; }.header-login { padding: 9px 13px; font-size: 11px; }
  .hero { min-height: auto; padding: 56px 18px 95px; }.hero h1 { font-size: 46px; }.hero-copy { font-size: 16px; }
  .hero-actions { display: grid; }.button { width: 100%; }.hero-note { font-size: 10px; }
  .product-stage { margin-top: 25px; }.app-window { border-radius: 17px; }.app-topbar { height: 48px; }.app-search { display: none; }
  .app-body { grid-template-columns: 1fr; min-height: 360px; }.app-body aside { display: none; }.app-main { padding: 18px 14px; }.stat-row { gap: 6px; }.stat-row article { min-height: 76px; padding: 9px; }.stat-row strong { font-size: 15px; }.event-row { grid-template-columns: 34px 1fr; }.status { display: none; }
  .mini-tag { display: none; }.audience-strip { padding-top: 34px; }.section { padding: 80px 18px; }.feature-grid, .pricing-grid { grid-template-columns: 1fr; }.feature-card { min-height: auto; }
  .team-highlight { grid-template-columns: 1fr; padding: 23px; }.team-icon { width: 54px; height: 54px; }.role-cards { grid-template-columns: 1fr; }
  .screen-showcase { margin-bottom: 80px; }.screen-copy h3 { font-size: 34px; }.product-screen { border-radius: 16px; }.quote-workspace { padding: 11px 8px 17px; }.quote-tools button:nth-child(2), .quote-tools button:nth-child(3), .quote-actions span { display: none; }.quote-paper { min-height: 430px; padding: 26px 20px 20px; }.quote-meta { top: 26px; right: 20px; }.client-info { gap: 10px; margin-top: 28px; }.quote-table > div { grid-template-columns: 1fr 32px 55px; }.quote-bottom { grid-template-columns: 1fr; gap: 12px; }.quote-bottom p { display: none; }.floating-confirm { right: 2px; bottom: 24px; }.agenda-workspace { padding: 18px 10px; }.agenda-app-heading h3 { font-size: 14px; }.calendar-week { gap: 3px; }.calendar-week > div { min-height: 72px; padding: 9px 1px; }.calendar-week > div:nth-child(5) { display: none; }.calendar-week { grid-template-columns: repeat(6,1fr); }.day-events article { grid-template-columns: 34px 4px 1fr; gap: 7px; padding: 12px 9px; }.day-events article > b { display: none; }.agenda-summary { gap: 8px; }.agenda-summary strong { display: none; }
  .workflow { gap: 35px; }.step-list article { grid-template-columns: 56px 1fr; gap: 15px; }.step-list article > span { width: 55px; height: 55px; }.step-list::before { left: 27px; }
  .ecosystem { gap: 50px; }.designer-top span { display: none; }.designer-workspace { grid-template-columns: 1fr; }.designer-tools, .designer-properties { display: none; }.canvas-scene { height: 285px; }.b-one { left: 18%; height: 170px; }.b-two { left: 44%; height: 210px; }.pink-balloons { left: 7%; }.gold-balloons { right: 12%; }.canvas-scene strong { left: 27%; font-size: 27px; }.canvas-toolbar span:nth-child(2), .canvas-toolbar span:nth-child(3) { display: none; }
  .support-band { grid-template-columns: 1fr; gap: 30px; text-align: center; }.support-orbit { margin: 0 auto; }.support-band .button { grid-column: auto; justify-self: stretch; }.support-band .kicker { text-align: center; }
  .plan-card { min-height: 430px; }.faq { gap: 40px; }.faq-list details p { padding-right: 8px; }.final-cta { padding: 85px 18px; }
  footer { grid-template-columns: 1fr; gap: 28px; }.footer-brand { grid-column: auto; }.footer-links { max-width: 250px; }.footer-map { grid-column: auto; grid-template-columns: 1fr; }.footer-map iframe { min-height: 240px; }.footer-map > div { padding: 27px 22px; }.copyright { grid-column: auto; flex-direction: column; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .orb, .sparkle, .product-stage, .mini-tag, .floating-confirm, .background-removed, .support-orbit i { animation: none; } * { transition-duration: .01ms !important; } }