/* Art direction: a paper window, a lakeside world, and a continuous journey. */
:root { --paper: #f8f5ef; --ink: #292d38; --rose: #ad3e65; --muted: #6f737b; }
body { background: var(--paper); }
h2 { font-weight: 550; letter-spacing: -.055em; }
.site-header { background: rgba(248,245,239,.8); border-bottom-color: transparent; }
.site-header.is-scrolled { background: rgba(248,245,239,.94); border-bottom-color: #e5ddd4; }
.site-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #ad3e65; transform-origin: left; transform: scaleX(var(--page-progress,0)); }
.brand { font-weight: 650; }
.button:not(.hero-actions .button) { border-radius: 3px; }
.button-primary:not(.hero-actions .button) { box-shadow: none; }
.button-header { border-radius: 3px; background: transparent; }
.eyebrow { font-weight: 500; letter-spacing: .18em; }

/* The opening is a pinned stage. All movement is driven by its scroll position. */
.hero { padding-top: 0; min-height: 0; overflow: visible; background: var(--paper); }
.hero-camera { position: relative; min-height: 900px; padding-top: var(--nav-height); overflow: clip; isolation: isolate; background: var(--paper); }
.has-camera .hero { height: 240svh; }
.has-camera .hero-camera { position: sticky; top: 0; height: 100svh; min-height: 0; }
.hero-inner { height: calc(100svh - 144px); min-height: 0; grid-template-columns: 44% 56%; }
.hero-copy { padding: 0 0 35px; transform: translate3d(var(--copy-x,0px),var(--copy-y,0px),0); opacity: var(--copy-opacity,1); }
.hero-copy > .eyebrow { margin-bottom: 26px; color: #82747b; font-size: 10px; }
.hero h1 { font-size: clamp(68px,6.2vw,92px); font-weight: 500; line-height: 1.06; letter-spacing: -.07em; }
.hero h1 > span { margin-top: 6px; }
.hero-script { color: #ac6a7a; font: italic 29px/1.3 Georgia,"Times New Roman",serif; margin-top: 14px; letter-spacing: -.04em; padding-left: 3px; }
.hero-lead { font-size: 18px; font-weight: 500; margin-top: 27px; }
.hero-description { font-size: 13px; color: #74717a; }
.hero-actions { margin-top: 28px; }
/* .hero-actions .button handled in liquid glass */
.start-methods { font-size: 10px; margin-top: 20px; }
.hero-license { font-size: 10px; }
.hero-scenery { z-index: 1; inset: auto; left: 45%; top: 9%; width: 68%; height: 88%; border-radius: 48% 48% 4% 46%; background: #e1d5cf; transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0) rotate(var(--scene-rotation,-8deg)); opacity: var(--scene-opacity,1); }
.hero-landscape { left: 0; top: 0; width: 100%; height: 100%; opacity: 1; object-position: 55% 50%; transform: translate3d(var(--landscape-x,0px),var(--landscape-y,0px),0) scale(var(--landscape-scale,1.08)); }
.landscape-wash { background: linear-gradient(120deg,#e9cfc20a,#fbf7f133 70%,#f6eee36b); }
.hero-art-type { position: absolute; z-index: 0; left: -18px; bottom: 32px; font: 600 clamp(170px,27vw,420px)/.8 "Segoe UI",sans-serif; letter-spacing: -.085em; color: transparent; -webkit-text-stroke: 1px #c8b8b17a; user-select: none; transform: translate3d(var(--type-x,0px),var(--type-y,0px),0); }
.hero-orbit { position: absolute; z-index: 0; left: 38%; top: 0; width: 68%; aspect-ratio: 1; color: #c1a2a8; opacity: .64; transform: translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0) rotate(var(--orbit-angle,-15deg)); pointer-events: none; }
.hero-orbit svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .65; }
.hero-orbit svg circle { fill: var(--rose); stroke: none; }
.hero-orbit > span { position: absolute; top: 12%; left: 18%; font: 8px/1.5 ui-monospace,monospace; letter-spacing: .2em; transform: rotate(-30deg); }
.hero-visual { height: min(620px,76svh); perspective: 1400px; z-index: 3; }
.hero-console { top: 65px; left: 6%; right: -28px; border-radius: 12px; background: #fffffff0; box-shadow: 0 35px 75px -22px #383e5b44,0 0 0 8px #ffffff24; transform: translate3d(var(--console-x,36px),var(--console-y,80px),0) rotateX(var(--console-rx,8deg)) rotateY(var(--console-ry,-14deg)) rotateZ(var(--console-rz,-7deg)) scale(var(--console-scale,.78)); transform-origin: 55% 50%; }
.hero-saki { right: auto; left: -1%; bottom: 15px; height: min(36svh,330px); transform: translate3d(var(--saki-x,0px),var(--saki-y,0px),0) rotate(var(--saki-angle,0deg)) scale(var(--saki-scale,1)); opacity: var(--saki-opacity,1); }
.hero-note { left: auto; right: -4px; bottom: 25px; font: italic 12px/1.8 Georgia,serif; color: #765365; opacity: var(--copy-opacity,1); }
.hero-bottom { position: absolute; bottom: 66px; left: 0; right: 0; padding: 0; border: 0; opacity: var(--bottom-opacity,1); }
.supported { gap: 23px; color: #6f727c; font-size: 10px; }
.supported-label { display: none; }
.scroll-cue { font: 8px/1.5 ui-monospace,monospace; letter-spacing: .17em; color: #4c4654; }
.scroll-cue-line { height: 1px; width: 45px; background: #ad7b8e; }
.hero-explore { position: absolute; z-index: 8; left: 50%; bottom: 34px; transform: translateX(-50%); display: grid; place-items: center; min-width: 140px; min-height: 48px; padding: 5px 12px; color: #8e6b79; text-decoration: none; opacity: var(--bottom-opacity,1); border-radius: 4px; }
.hero-explore-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 10px/1.6 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing: .18em; white-space: nowrap; animation: hero-explore-breathe 3.8s ease-in-out infinite; }
.hero-explore svg { width: 15px; height: 18px; stroke: currentColor; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.hero-explore:hover .hero-explore-inner,.hero-explore:focus-visible .hero-explore-inner { animation-play-state: paused; opacity: 1; }
.hero-explore:focus-visible { outline: 1px solid #ad708d; outline-offset: 3px; }
.hero-explore[inert] { pointer-events: none; }
@keyframes hero-explore-breathe { 0%,100% { opacity: .46; transform: translateY(0); } 50% { opacity: .82; transform: translateY(3px); } }
.camera-caption { position: absolute; z-index: 7; left: 80px; right: 80px; bottom: 23px; display: flex; gap: 22px; align-items: center; color: #92858b; font: 8px/1.5 ui-monospace,monospace; letter-spacing: .13em; opacity: var(--opening-caption-opacity,1); }
.camera-caption > span:first-child { min-width: 150px; }
.camera-caption > span:last-child { white-space: nowrap; }
.camera-progress { display: block; flex: 1; height: 1px; background: #cbbcb685; }
.camera-progress i { display: block; height: 100%; width: var(--camera-progress,0%); background: #ad3e65; }
.hero-interlude { position: absolute; z-index: 6; left: 0; right: 0; top: 26%; pointer-events: none; opacity: var(--interlude-opacity,0); transform: translate3d(0,var(--interlude-y,70px),0); }
.hero-interlude .eyebrow { font-size: 8px; letter-spacing: .17em; margin-bottom: 25px; color: #998188; }
.interlude-title { font-size: clamp(42px,4.4vw,65px); line-height: 1.25; letter-spacing: -.055em; font-weight: 500; }
.interlude-title em { color: var(--rose); font-style: normal; }
.interlude-caption { font-size: 13px; color: #8c7b82; margin-top: 25px; }
.petals { z-index: 5; }
.petal { transform: translate3d(calc(var(--petal-x,0px) * var(--speed,1)),calc(var(--petal-y,0px) * var(--speed,1)),0) rotate(calc(var(--rotation,0deg) + var(--petal-rotation,0deg))); opacity: .48; }
.p1 { left: 34%; top: 20%; width: 22px; --speed: .7; filter: blur(2px); }
.p2 { right: 17%; top: 19%; width: 15px; --speed: .35; }
.p3 { left: 43%; bottom: 10%; width: 44px; --speed: 1.3; filter: blur(3px); }
.p4 { right: 3%; bottom: 19%; width: 50px; --speed: 1.6; filter: blur(4px); }
/* Fade the moving planes as a group{
  --deck-bleed-left: 56px;
  --deck-bleed-right: 32px;
  --deck-bleed-y: 64px;
  position: relative;
  margin: calc(-1 * var(--deck-bleed-y)) calc(-1 * var(--deck-bleed-right)) calc(-1 * var(--deck-bleed-y)) calc(-1 * var(--deck-bleed-left));
  padding: var(--deck-bleed-y) var(--deck-bleed-right) var(--deck-bleed-y) var(--deck-bleed-left);
  overflow: clip;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.pane-top { letter-spacing: .01em; }
.preview-label { border-radius: 2px; }

/* Wide typographic intermissions move on a different plane from the product. */
.services-section { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg,var(--paper) 0%,#eaf0ee 220px); padding-top: 150px; padding-bottom: 110px; }
.services-section::before { content: "one workspace."; position: absolute; z-index: -1; left: -5%; top: 43%; white-space: nowrap; font: italic 17vw/1 Georgia,serif; letter-spacing: -.06em; color: #dce6e1; transform: translate3d(var(--service-type-x,0px),var(--service-type-y,0px),0); pointer-events: none; }
.services-section .section-heading { transform: translate3d(0,var(--service-heading-y,0px),0); }
.services-section .section-heading h2 { font-size: clamp(35px,3.7vw,54px); font-weight: 500; }
.service-map { transform: translate3d(0,var(--map-y,0px),0); }
.map-core { border-radius: 30px; background: #fdfdfbe8; box-shadow: 0 20px 45px #4961570a; }
.service-node { border-radius: 5px; background: #fafcf7dc; }
.architecture-note { position: relative; transform: translate3d(0,var(--architecture-y,0px),0); }
.architecture-tags > span { background: #eff3ee; }
.extensions-section { position: relative; isolation: isolate; overflow: clip; padding-top: 180px; padding-bottom: 160px; }
.extensions-section::before { content: "Make it yours."; position: absolute; z-index: -1; left: 1%; top: 5%; white-space: nowrap; font: italic 12vw/1 Georgia,serif; color: #eae0da; letter-spacing: -.06em; transform: translateX(var(--personal-type-x,0px)); }
.theme-preview { border-radius: 7px; transform: translate3d(0,var(--theme-y,0px),0) rotate(var(--theme-angle,-7deg)); }
.personal-art > img { transform: translate3d(var(--personal-saki-x,0px),var(--personal-saki-y,0px),0) rotate(var(--personal-saki-angle,0deg)); }
.personal-tag { border-radius: 3px; transform: translate3d(0,var(--personal-tag-y,0px),0) rotate(3deg); }
.personal-backdrop { border: 1px solid #d9bec24d; border-radius: 50%; background: #f1e5de66; transform: rotate(-15deg); inset: -15px 0 0 10px; }
.extensions-copy { transform: translate3d(0,var(--personal-copy-y,0px),0); }
.extensions-copy h2 { font-size: clamp(38px,3.7vw,55px); font-weight: 500; line-height: 1.23; }
.get-started-section { padding-top: 135px; background: #e9eeec; overflow: clip; }
.get-started-section::before { background-position: center; opacity: .11; transform: translateY(var(--closing-y,0px)) scale(1.15); }
.get-started-section .section-heading h2 { font-size: clamp(40px,4.3vw,62px); font-weight: 500; }
.services-section [data-reveal], .extensions-section [data-reveal] { transition: opacity .65s var(--ease); }
.start-card { border-radius: 7px; box-shadow: 0 30px 70px #5a667211; }
.site-footer { background: var(--paper); }

@media (min-width:1000px) and (min-height:700px) and (max-height:799px) {
  .hero h1 { font-size: 68px; }
  .hero-script { font-size: 24px; margin-top: 9px; }
  .hero-copy > .eyebrow { margin-bottom: 20px; }
  .hero-lead { margin-top: 20px; }
  .hero-actions { margin-top: 23px; }
  .hero-copy { padding-bottom: 0; }
}
@media (max-width:1200px) {
  .hero h1 { font-size: 72px; }
  .camera-caption { left: 48px; right: 48px; }
  .hero-note { font-size: 10px; }
  .hero-scenery { left: 43%; width: 78%; }
  .hero-console { left: 3%; right: -22px; }
}
@media (max-width:999px) {
  .hero-camera { min-height: 820px; }
  .has-camera .hero-camera { min-height: 0; }
  .hero-inner { grid-template-columns: 44% 56%; }
  .hero h1 { font-size: 62px; }
  .hero-script { font-size: 25px; }
  .hero-copy > .eyebrow { font-size: 8px; }
  .hero-lead { font-size: 16px; }
  .hero-description { font-size: 12px; }
  .hero-actions { gap: 9px; }
  .hero-actions > .button { min-width: 120px; padding-inline: 14px; font-size: 12px; }
  .hero-console { top: 70px; }
  .hero-saki { height: 265px; bottom: 40px; }
  .hero-interlude { top: 28%; }
  .interlude-title { font-size: 43px; }
  .interlude-caption { font-size: 11px; }
  .services-section { padding-top: 110px; padding-bottom: 85px; }
  .extensions-section { padding-top: 140px; padding-bottom: 110px; }
  .extensions-copy h2 { font-size: 37px; }
}
@media (max-width:719px) {
  .has-camera .hero { height: 180svh; }
  .hero-camera { min-height: 800px; }
  .has-camera .hero-camera { height: 100svh; min-height: 0; }
  .hero-inner { display: block; height: 100%; padding-top: 28px; }
  .hero-copy { padding: 0; z-index: 5; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 18px; }
  .hero h1 { font-size: 52px; font-weight: 500; line-height: 1.04; }
  .hero h1 > span { margin-top: 0; }
  .hero-script { font-size: 23px; margin-top: 8px; }
  .hero-lead { font-size: 15px; margin-top: 16px; }
  .hero-description { font-size: 12px; margin-top: 2px; }
  .hero-actions { margin-top: 19px; gap: 12px; }
  .hero-actions > .button { flex: 1; min-width: 0; min-height: 45px; font-size: 12px; }
  .hero-license { font-size: 9px; margin-top: 11px; }
  .hero-art-type { font-size: min(47vw, 150px); bottom: 55px; left: -6px; max-width: 100vw; }
  .hero-orbit { left: -28%; top: 31%; width: 150%; }
  .hero-orbit > span { font-size: 6px; }
  .hero-scenery { left: -18%; top: 40%; width: 138%; height: 66%; border-radius: 48% 48% 8% 30%; }
  .landscape-wash { background: linear-gradient(180deg,#f8f5ef0a,#f8f5ef00 65%,#f8f5ef6b); }
  .hero-visual { position: absolute; inset: 51% 0 auto; height: 39%; margin: 0; width: 100%; }
  .hero-console { top: 0; left: 2%; right: 2%; border-radius: 8px; box-shadow: 0 15px 35px -12px #383e5b55,0 0 0 5px #ffffff24; }
  .hero-saki { left: auto; right: 5px; height: 158px; bottom: -18px; }
  .hero-note { display: none; }
  .hero-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 8px 16px;
    opacity: var(--bottom-opacity, 1);
    border-top: 1px solid rgba(210, 204, 207, 0.4);
    background: rgba(251, 249, 246, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .hero-bottom .supported {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    font-size: 10px;
    color: #68717d;
    white-space: nowrap;
    width: 100%;
    scrollbar-width: none;
  }
  .hero-bottom .supported::-webkit-scrollbar { display: none; }
  .hero-bottom .supported-label {
    display: inline;
    font-size: 9px;
    color: #8a8790;
    flex-shrink: 0;
  }
  .hero-interlude { top: 17%; }
  .hero-interlude .eyebrow { font-size: 6px; margin-bottom: 18px; max-width: 220px; }
  .interlude-title { font-size: 38px; line-height: 1.17; }
  .interlude-title br:nth-child(2) { display: none; }
  .interlude-caption { font-size: 11px; margin-top: 16px; }
  .camera-caption { left: 24px; right: 24px; bottom: 38px; gap: 13px; font-size: 6px; }
  .camera-caption > span:first-child { min-width: 0; }
  .camera-caption > span:last-child { font-size: 5px; letter-spacing: .06em; }
  .petals { display: block; }
  .p1 { left: 86%; top: 34%; width: 14px; }
  .p2 { right: 7%; top: 49%; width: 9px; }
  .p3 { left: 46%; bottom: 5%; width: 30px; }
  .p4 { display: none; }
  .services-section { padding-top: 90px; padding-bottom: 65px; }
  .services-section::before { font-size: 31vw; top: 42%; }
  .services-section .section-heading h2 { font-size: 31px; }
  .service-map { margin-top: 48px; }
  .service-node { border-radius: 4px; }
  .map-core { border-radius: 28px; }
  .extensions-section { padding-top: 100px; padding-bottom: 85px; }
  .extensions-section::before { top: 3%; font-size: 19vw; }
  .extensions-copy h2 { font-size: 35px; }
  .get-started-section { padding-top: 90px; }
  .get-started-section .section-heading h2 { font-size: 34px; }
  .motion-reduced .hero-camera { min-height: 820px; }
}
@media (max-width:719px) and (max-height:699px) {
  .hero-inner { padding-top: 20px; }
  .hero h1 { font-size: 43px; }
  .hero-copy > .eyebrow { margin-bottom: 13px; font-size: 7px; }
  .hero-script { font-size: 20px; margin-top: 6px; }
  .hero-lead { font-size: 14px; margin-top: 10px; }
  .hero-description { font-size: 11px; }
  .hero-actions { margin-top: 14px; }
  .hero-actions > .button { min-height: 41px; }
  .hero-license { margin-top: 8px; }
  .hero-visual { top: 57%; height: 35%; }
  .hero-saki { height: 125px; bottom: -6px; }
  .hero-interlude { top: 19%; }
  .interlude-title { font-size: 32px; }
}
@media (max-width:349px) {
  .hero-actions { flex-direction: row; gap: 8px; }
  .hero-actions > .button { width: auto; font-size: 10px; padding-inline: 11px; gap: 10px; }
  .hero h1 { font-size: 43px; }
  .hero-art-type { font-size: min(38vw, 110px); }
  .hero-lead { font-size: 13px; }
  .hero-description { font-size: 11px; }
  .hero-interlude .interlude-title { font-size: 31px; }
  .hero-visual { top: 56%; }
  .camera-caption { left: 20px; right: 20px; }
}
/* Short-screen (<560px) entrance animation when not pinned */
html:not(.has-camera) .hero-console.reveal-ready {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.16, 1, .3, 1);
}
html:not(.has-camera) .hero-console.is-visible {
  opacity: 1;
  transform: none;
}
.service-node p {
  font-size: clamp(9px, 2.4vw, 12px) !important;
}
/* A complete static presentation remains available for reduced motion. */
.motion-reduced .hero-copy, .motion-reduced .hero-console, .motion-reduced .hero-saki,
.motion-reduced .hero-art-type, .motion-reduced .hero-orbit, .motion-reduced .hero-scenery,
.motion-reduced .theme-preview, .motion-reduced .personal-art > img,
.motion-reduced .personal-tag, .motion-reduced .extensions-copy,
.motion-reduced .service-map, .motion-reduced .architecture-note,
.motion-reduced .services-section .section-heading { transform: none; }
.motion-reduced .hero-console { transform: rotate(-3deg) scale(.87); }
.motion-reduced .hero-copy, .motion-reduced .hero-saki, .motion-reduced .hero-bottom, .motion-reduced .hero-note { opacity: 1; }
.motion-reduced .hero-interlude, .motion-reduced .camera-caption { display: none; }
.motion-reduced .hero-landscape { transform: scale(1.08); }
.motion-reduced .services-section::before, .motion-reduced .extensions-section::before, .motion-reduced .get-started-section::before { transform: none; }
.motion-reduced .hero-explore-inner { animation: none; opacity: .7; }
@media (max-width:719px) { .hero-explore { bottom: 31px; color: #fff7f1; text-shadow: 0 1px 5px #3f3149cc; } .hero-explore-inner { font-size: 10px; } .hero-explore svg { filter: drop-shadow(0 1px 2px #3f3149aa); } }
@media (prefers-reduced-motion:reduce) { html:not(.motion-standard) .hero-explore-inner { animation: none; opacity: .7; } }