*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;min-height:100vh;overflow-x:hidden;background:#05070b;color:#f7fbff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body.modal-open{overflow:hidden}body:before{position:fixed;inset:0;z-index:-4;content:"";background:radial-gradient(circle at 70% 18%,rgba(40,95,150,.32),transparent 28%),radial-gradient(circle at 18% 75%,rgba(13,220,255,.13),transparent 24%),linear-gradient(135deg,#05070b 0%,#0b111b 48%,#030407 100%)}body:after{position:fixed;inset:0;z-index:-3;content:"";pointer-events:none;opacity:.26;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%)}a{color:inherit;text-decoration:none}button,a{cursor:pointer}.atmosphere{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.atmosphere span{position:absolute;width:40vmax;height:40vmax;border-radius:50%;filter:blur(60px);opacity:.18;animation:drift 18s ease-in-out infinite}.atmosphere span:nth-child(1){left:58%;top:8%;background:#5edbff}.atmosphere span:nth-child(2){left:-8%;top:54%;background:#ffffff}.atmosphere span:nth-child(3){right:-10%;bottom:-12%;background:#1b4dff}@keyframes drift{50%{transform:translate3d(-4vw,3vh,0) scale(1.08)}}.site-header{position:fixed;left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center;gap:18px;padding:16px max(24px,calc((100vw - 1320px)/2));border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;background:rgba(6,9,14,.72);box-shadow:0 12px 40px rgba(0,0,0,.22);backdrop-filter:blur(20px)}.site-header>.brand{justify-self:start}.site-header>.nav-actions,.site-header>.nav-toggle{justify-self:end;grid-column:3}.brand,.cta,.site-header nav a,.nav-manage-link,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;border-radius:999px;font-weight:850;letter-spacing:-.01em}
.nav-actions{display:flex;align-items:center;gap:12px}.brand-logo{display:block;width:auto;height:46px;object-fit:contain}.site-header nav{display:flex;gap:6px;justify-self:center}.site-header nav a,.cta,.nav-manage-link{padding:0 15px;color:#d9e6f5;background:rgba(255,255,255,.06)}.site-header nav a:hover,.cta:hover,.nav-manage-link:hover{background:rgba(255,255,255,.13)}.cta{background:rgba(255,255,255,.88);color:#071019}.deck{position:relative;z-index:1}.scene{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(320px,.64fr);gap:56px;align-items:center;padding:96px max(24px,calc((100vw - 1320px)/2)) 56px;scroll-margin-top:88px}.scene>*{opacity:.18;filter:blur(12px);transform:translateY(54px) scale(.97);transition:opacity .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}.scene.is-visible>*{opacity:1;filter:none;transform:none}.scene-copy{position:relative;z-index:3;max-width:760px}.scene-copy.narrow{max-width:680px}.eyebrow,.plan-label{margin:0 0 14px;color:#8edfff;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.16em}h1,h2,h3,p{margin-top:0}h1{max-width:900px;margin-bottom:24px;font-size:clamp(54px,8.2vw,118px);line-height:.86;letter-spacing:-.065em}h2{margin-bottom:20px;font-size:clamp(38px,5.4vw,78px);line-height:.9;letter-spacing:-.052em}h3{letter-spacing:-.025em}p{color:#bdcad8;font-size:clamp(16px,1.35vw,19px);line-height:1.65}.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{min-height:48px;padding:0 20px;border:1px solid rgba(255,255,255,.18);color:#edf7ff;background:rgba(255,255,255,.09);box-shadow:0 16px 44px rgba(0,0,0,.18);transition:transform .3s,background .3s,box-shadow .3s}.button:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);box-shadow:0 22px 54px rgba(0,0,0,.28)}.button.primary{border-color:rgba(178,241,255,.56);color:#061018;background:linear-gradient(135deg,#fff,#a5efff 68%,#68d9ff)}.button.ghost{color:#eaf6ff;background:rgba(255,255,255,.08)}.chapter-card,.glass-card,.price-card,.timeline article,.calendar-shell{position:relative;z-index:3;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 34px 110px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(24px)}.chapter-card{align-self:end;max-width:410px;padding:28px}.chapter-number{display:grid;width:46px;height:46px;place-items:center;margin-bottom:28px;border:1px solid rgba(255,255,255,.16);border-radius:16px;color:#8fe9ff;background:rgba(255,255,255,.08);font-weight:900}.feature-grid{position:relative;z-index:3;display:grid;gap:16px}.glass-card{padding:24px;transform-style:preserve-3d;background:linear-gradient(145deg,rgba(10,18,32,.82),rgba(10,18,32,.68))}.glass-card svg{width:36px;height:36px;margin-bottom:22px;fill:#9deaff;filter:drop-shadow(0 0 22px rgba(113,218,255,.45))}.glass-card .step-num{display:grid;width:36px;height:36px;margin-bottom:22px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#9deaff;font-size:16px;font-weight:900}.metric-stack span svg{width:20px;height:20px;fill:#061018}.glass-card h3,.price-card h3,.timeline span{margin-bottom:10px;font-size:22px}.metric-stack{display:grid;gap:18px}.metric-stack article{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;padding:22px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(10,16,26,.62);backdrop-filter:blur(22px)}.metric-stack span{grid-row:1/3;display:grid;width:42px;height:42px;place-items:center;border-radius:14px;color:#061018;background:#b7f3ff;font-weight:950}.metric-stack h3{margin:0}.metric-stack p{grid-column:2;margin:0}.story-stage{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:1300px;transform-style:preserve-3d}.stage-light{position:absolute;border-radius:50%;filter:blur(44px);opacity:.45}.stage-light.key{right:10%;top:17%;width:28vw;height:28vw;background:rgba(120,221,255,.36)}.stage-light.rim{left:32%;bottom:8%;width:24vw;height:24vw;background:rgba(255,255,255,.18)}.anchor{position:absolute;right:8vw;top:50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .8s,filter .8s}.monitor{width:min(520px,42vw);height:390px;opacity:.98;transform:translate3d(0,-45%,0) rotateX(6deg) rotateY(-12deg)}.monitor-panel{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:#111923;box-shadow:0 50px 130px rgba(0,0,0,.6)}.monitor-top{height:44px;padding:12px;color:#cbd7e3;background:#151f2c;text-align:center;font-weight:900}.monitor-screen{height:285px;padding:42px;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.18)),url(https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=82) center/cover}.monitor-screen span{display:block;height:18px;margin:18px;border-radius:999px;background:rgba(255,255,255,.86)}.monitor-screen span:first-child{width:54%;height:82px;background:rgba(6,12,20,.9)}.monitor-screen span:nth-child(2){width:70%}.monitor-screen span:nth-child(3){width:44%}.monitor-base{width:190px;height:68px;margin:-2px auto 0;background:linear-gradient(180deg,#111923,#05070b);clip-path:polygon(30% 0,70% 0,88% 100%,12% 100%)}.blueprint{right:10vw;width:430px;height:300px;border:1px solid rgba(155,231,255,.34);border-radius:24px;background:linear-gradient(rgba(143,233,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(143,233,255,.16) 1px,transparent 1px),rgba(8,16,28,.54);background-size:34px 34px;opacity:0;transform:translate3d(18vw,-40%,180px) rotateX(62deg) rotateZ(-18deg)}.blueprint i{position:absolute;border:1px solid rgba(180,241,255,.72);border-radius:16px}.blueprint i:nth-child(1){left:11.16%;top:14.67%;width:41.86%;height:28.67%}.blueprint i:nth-child(2){right:11.63%;top:20.67%;width:21.4%;height:48.67%}.blueprint i:nth-child(3){left:12.56%;bottom:16%;width:51.16%;height:14%}.blueprint i:nth-child(4){left:66.28%;bottom:16.67%;width:18.14%;height:26%;border-radius:50%}.components{right:13vw;width:460px;height:360px;opacity:0;transform:translate3d(12vw,-46%,120px) rotateY(-22deg)}.component{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));box-shadow:0 30px 90px rgba(0,0,0,.32);backdrop-filter:blur(20px)}.card-one{left:20px;top:40px;width:210px;height:126px}.card-two{right:18px;top:82px;width:170px;height:210px}.card-three{left:90px;bottom:18px;width:240px;height:86px}.chip{left:228px;top:20px;width:76px;height:76px;border-radius:22px;background:linear-gradient(135deg,#eafcff,#74e3ff)}.analytics{right:11vw;width:460px;height:310px;padding:34px;border:1px solid rgba(255,255,255,.16);border-radius:30px;background:rgba(8,13,22,.62);box-shadow:0 40px 120px rgba(0,0,0,.44);opacity:0;transform:translate3d(14vw,-44%,120px) rotateX(18deg) rotateY(-24deg)}.analytics span{position:absolute;bottom:42px;width:64px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#dffaff,#6edfff)}.analytics span:nth-child(1){left:60px;height:90px}.analytics span:nth-child(2){left:146px;height:142px}.analytics span:nth-child(3){left:232px;height:190px}.analytics strong{position:absolute;right:34px;top:36px;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px}.portal{right:15vw;width:360px;height:360px;opacity:0;transform:translate3d(10vw,-50%,40px) scale(.7)}.portal span{position:absolute;inset:28px;border:1px solid rgba(186,245,255,.62);border-radius:50%;box-shadow:0 0 50px rgba(112,225,255,.34),inset 0 0 70px rgba(112,225,255,.18)}.portal:after{position:absolute;inset:92px;content:"";border-radius:50%;background:radial-gradient(circle,#e8fbff,rgba(95,217,255,.45) 30%,transparent 65%);filter:blur(4px)}.deck[data-camera="blueprint"] .monitor{opacity:.24;filter:blur(5px);transform:translate3d(18vw,-48%,-260px) rotateX(16deg) rotateY(-38deg) scale(.7)}.deck[data-camera="blueprint"] .blueprint{opacity:1;transform:translate3d(0,-48%,0) rotateX(18deg) rotateZ(-8deg)}.deck[data-camera="components"] .monitor,.deck[data-camera="components"] .blueprint{opacity:.1;filter:blur(8px)}.deck[data-camera="components"] .components{opacity:1;transform:translate3d(0,-48%,0) rotateY(-12deg)}.deck[data-camera="showcase"] .components{opacity:.55;transform:translate3d(-6vw,-48%,-140px) rotateY(-48deg) scale(.72)}.deck[data-camera="showcase"] .monitor{opacity:.08}.deck[data-camera="checkout"] .analytics{opacity:1;transform:translate3d(0,-46%,0) rotateX(8deg) rotateY(-12deg)}.deck[data-camera="workflow"] .analytics{opacity:.45;transform:translate3d(-4vw,-48%,-160px) rotateX(18deg) rotateY(24deg) scale(.78)}.deck[data-camera="workflow"] .components{opacity:.35;transform:translate3d(5vw,-48%,-160px) rotateY(42deg) scale(.72)}.deck[data-camera="booking"] .portal{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.deck[data-camera="booking"] .monitor,.deck[data-camera="booking"] .analytics,.deck[data-camera="booking"] .components{opacity:.12;filter:blur(9px)}.examples.scene{display:block;padding-top:96px}.examples .section-heading{position:relative;z-index:3}.examples .section-heading h2{color:#fff}.examples .example-carousel{position:relative;z-index:4;box-shadow:0 48px 130px rgba(0,0,0,.42)}.pricing{grid-template-columns:.72fr 1fr}.pricing-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.price-card{padding:24px;min-height:320px;display:flex;flex-direction:column}.price-card b{display:block;margin:8px 0 18px;font-size:clamp(34px,3.4vw,54px);letter-spacing:-.06em}.price-card .button{margin-top:auto;width:max-content}.price-card.featured{border-color:rgba(151,236,255,.48);box-shadow:0 34px 110px rgba(79,213,255,.12),inset 0 1px 0 rgba(255,255,255,.22)}.timeline{display:grid;gap:16px}.timeline article{padding:26px}.timeline span{display:block;color:#a7efff}.calendar-shell{overflow:hidden;padding:16px;border-radius:32px}.calendar-shell .calendly-inline-widget{border-radius:24px;overflow:hidden;background:#fff}.preview-modal{position:fixed;inset:0;z-index:100;display:none;padding:24px}.preview-modal.is-open{display:grid;place-items:center}.preview-backdrop{position:absolute;inset:0;background:rgba(3,5,8,.78);backdrop-filter:blur(20px)}.preview-dialog{position:relative;z-index:1;width:min(1160px,100%);max-height:min(90vh,960px);overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:32px;background:#f6f8fb;box-shadow:0 34px 120px rgba(0,0,0,.5)}.preview-dialog-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;border-bottom:1px solid rgba(15,23,42,.1);background:rgba(255,255,255,.9);backdrop-filter:blur(18px)}.preview-dialog-header h2{margin:0;color:#071019;font-size:clamp(26px,3vw,42px)}.modal-close{min-height:40px;padding:0 16px;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:#fff;color:#071019;font:inherit;font-weight:800}.preview-dialog-body{padding:26px;background:#f5f7fb}.preview-dialog-body .example-browser{height:auto;min-height:auto;overflow:visible;padding:22px;border-radius:26px}.preview-dialog-body .website-preview{height:auto;min-height:680px;overflow:visible}.preview-dialog-body .veloce-welcome{min-height:680px}.preview-dialog-body .veloce-welcome-copy{min-height:560px}.preview-dialog-body .veloce-menu-grid img{height:245px}.preview-dialog-body .veloce-find{min-height:650px}.preview-dialog-body .veloce-find-copy{min-height:650px}.preview-dialog-body .retail-products img{height:192px}.preview-dialog-body .service-hero img{min-height:420px}@media (max-width:1060px){.site-header nav{display:none}.site-header>.nav-actions{display:none}.scene,.pricing{grid-template-columns:1fr;min-height:auto;padding-top:88px}.story-stage{opacity:.55}.monitor,.blueprint,.components,.analytics,.portal{right:4vw;transform:translate3d(0,-45%,0) scale(.72)}.pricing-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.site-header{padding:14px 16px}.scene{padding:92px 18px 58px;gap:28px}.story-stage{display:none}h1{font-size:clamp(44px,15vw,68px)}h2{font-size:clamp(34px,12vw,54px)}.chapter-card{max-width:none}.pricing-grid{grid-template-columns:1fr}.examples.scene{padding:92px 14px 58px}.example-carousel{padding-left:42px!important;padding-right:42px!important}.preview-dialog{border-radius:22px}.preview-dialog-body{padding:12px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene>*{opacity:1;filter:none;transform:none}.story-stage{display:none}}

/* Restored client example websites from the previous ReImagine build. */
:root{--white:#fff;--line:rgba(226,232,240,.78);--muted:#667085;--blue:#57d8ff}
.section-heading.centered{max-width:760px;margin:0 auto;text-align:center}.section-heading.centered h2{margin:.18em 0}.section-heading.centered p:last-child{max-width:680px;margin:0 auto;color:#c8d2df}.examples.scene{display:block}.examples.scene .example-carousel{color:#111}.examples.scene .example-copy h3,.examples.scene .example-copy p{color:#111}.examples.scene .example-copy .plan-label{color:#407084;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.12em}.examples.scene .website-preview p{font-size:inherit}.examples.scene .website-preview h3,.examples.scene .website-preview h4{color:inherit}.examples.scene .website-preview button{cursor:pointer}.modal-open{overflow:hidden}

.examples {
  padding-bottom: 100px;
}

.example-carousel {
  position: relative;
  width: min(1030px, 100%);
  margin: 44px auto 0;
  padding: 36px 58px 58px;
  border-radius: 8px;
  background: #f7f7f8;
}

.carousel-window {
  overflow: hidden;
  border-radius: 2px;
  background: var(--white);
}

.example-grid {
  display: flex;
  gap: 0;
  margin-top: 0;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.example-card {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
  cursor: zoom-in;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  width: 52px;
  height: 74px;
  place-items: center;
  border: 0;
  color: #ffffff;
  background: transparent;
  cursor: pointer;
  font-size: 76px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
}

.carousel-arrow-prev {
  left: 8px;
}

.carousel-arrow-next {
  right: 8px;
}

.carousel-arrow:focus-visible {
  outline: 3px solid rgba(22, 119, 255, 0.42);
  outline-offset: 2px;
}

.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c8ccd4;
  cursor: pointer;
}

.carousel-dots button.is-active {
  width: 26px;
  background: var(--blue);
}

.preview-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.preview-trigger:focus-visible {
  outline: 3px solid rgba(22, 119, 255, 0.42);
  outline-offset: -8px;
}

.example-browser {
  height: 640px;
  min-height: 0;
  overflow: hidden;
  padding: 18px;
  background: #f5f7fb;
}

.example-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.78);
}

.example-topbar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cdd3de;
}

.example-topbar p {
  flex: 1;
  margin: 0;
  color: #78808c;
  font-size: 11px;
  text-align: center;
}

.restaurant-site,
.retail-site,
.service-site {
  overflow: hidden;
  height: 566px;
  min-height: 0;
  padding: 18px;
  border-radius: 0 0 22px 22px;
  transition: transform 240ms ease;
}

.example-card:hover .restaurant-site,
.example-card:hover .retail-site,
.example-card:hover .service-site {
  transform: translateY(-8px);
}

.mini-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 16px;
  font-size: 11px;
}

.mini-nav strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 15px;
}

.mini-nav span {
  opacity: 0.72;
}

.client-logo {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.logo-wordmark > span:last-child {
  line-height: 1;
}

.restaurant-logo {
  color: #2a120d;
  background: #f8c978;
}

.restaurant-wordmark > span:last-child {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 19px;
}

.logo-flame {
  width: 12px;
  height: 17px;
  border-radius: 10px 10px 10px 2px;
  background: linear-gradient(160deg, #fff8ec, #c24b1d);
  transform: rotate(42deg);
}

.retail-logo {
  color: #fff;
  background: #111114;
}

.retail-wordmark > span:last-child {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
}

.logo-stitch {
  position: relative;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.logo-stitch::before,
.logo-stitch::after {
  position: absolute;
  inset: 5px -4px auto;
  height: 2px;
  content: "";
  background: #fff;
}

.logo-stitch::after {
  transform: rotate(90deg);
}

.service-logo {
  color: #fff;
  background: linear-gradient(145deg, #0c5dff, #01b8ff);
}

.service-wordmark > span:last-child {
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.logo-bolt {
  width: 10px;
  height: 18px;
  clip-path: polygon(46% 0, 100% 0, 62% 42%, 100% 42%, 28% 100%, 45% 55%, 0 55%);
  background: #fff;
}

.restaurant-site {
  color: #fff8ec;
  background:
    linear-gradient(140deg, rgba(49, 20, 13, 0.08), rgba(49, 20, 13, 0.68)),
    url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80") center / cover,
    linear-gradient(145deg, #5f2318, #1e1512 58%, #080706);
  font-family: "Playfair Display", Georgia, serif;
}

.restaurant-hero {
  display: grid;
  align-content: end;
  min-height: 244px;
  padding: 24px;
  border: 1px solid rgba(255, 248, 236, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(15, 8, 5, 0.04), rgba(15, 8, 5, 0.84)),
    rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(1px);
}

.restaurant-hero p,
.retail-hero p {
  margin-bottom: 8px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.restaurant-hero h3,
.retail-hero h3,
.service-hero h3 {
  max-width: 360px;
  margin-bottom: 18px;
  font-size: 32px;
  line-height: 1;
}

.restaurant-hero button,
.retail-hero button,
.service-hero button {
  width: max-content;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.restaurant-hero button {
  color: #2a120d;
  background: #f8c978;
}

.restaurant-feature-row,
.restaurant-menu-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.restaurant-feature-row div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 248, 236, 0.12);
}

.restaurant-feature-row span,
.restaurant-feature-row strong {
  display: block;
}

.restaurant-feature-row span {
  color: rgba(255, 248, 236, 0.72);
  font-family: Inter, sans-serif;
  font-size: 11px;
}

.restaurant-feature-row strong {
  margin-top: 4px;
  font-size: 15px;
}

.restaurant-menu-strip img {
  width: 100%;
  height: 94px;
  object-fit: cover;
  border-radius: 16px;
}

.restaurant-menu-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(18, 7, 4, 0.48);
}

.restaurant-menu-board article {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 9px;
  align-items: center;
}

.restaurant-menu-board img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
}

.restaurant-menu-board strong,
.restaurant-menu-board span {
  display: block;
}

.restaurant-menu-board strong {
  font-size: 13px;
}

.restaurant-menu-board span {
  color: rgba(255, 248, 236, 0.66);
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 1.25;
}

.restaurant-menu-board b {
  color: #f8c978;
  font-family: Inter, sans-serif;
  font-size: 12px;
}

.restaurant-proof {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 248, 236, 0.18);
  border-radius: 16px;
  background: rgba(18, 7, 4, 0.38);
}

.restaurant-proof p {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.2;
}

.restaurant-proof span {
  color: rgba(255, 248, 236, 0.7);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.restaurant-site {
  color: #20150f;
  background:
    radial-gradient(circle at 5% 20%, rgba(231, 73, 43, 0.2), transparent 26%),
    radial-gradient(circle at 94% 16%, rgba(244, 177, 83, 0.34), transparent 24%),
    linear-gradient(180deg, #faefe2, #f5e5d2);
  font-family: Inter, sans-serif;
}

.capri-nav {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-bottom: 10px;
  color: #3a2b22;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.capri-brand {
  display: grid;
  justify-items: center;
  margin-bottom: 4px;
}

.capri-seal {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid #2c1c13;
  border-radius: 50%;
  color: #2c1c13;
  background: #f3c27c;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.capri-seal i {
  width: 18px;
  height: 24px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #e44f2f, #732613);
}

.capri-brand h3 {
  margin: 4px 0 0;
  color: #20150f;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(88px, 13vw, 160px);
  font-weight: 400;
  line-height: 0.68;
  text-align: center;
}

.capri-hero {
  display: grid;
  grid-template-columns: 0.74fr 1fr 0.74fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.capri-image-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 12px;
  border: 1px solid rgba(32, 21, 15, 0.16);
  border-radius: 44px;
}

.capri-red {
  background: #e9502e;
}

.capri-gold {
  background: #e8ad45;
}

.capri-image-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 34px;
}

.capri-image-card span {
  display: block;
  margin-top: 9px;
  color: #fff7ec;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.capri-hero div {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.capri-hero p {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 0.96;
}

.capri-hero button,
.capri-menu-feature a {
  width: max-content;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #20150f;
  border-radius: 999px;
  color: #f7eee3;
  background: #20150f;
  font-weight: 900;
}

.capri-about {
  display: grid;
  grid-template-columns: 0.38fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(32, 21, 15, 0.18);
  border-radius: 34px;
  background: rgba(255, 250, 242, 0.48);
}

.capri-about span {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.capri-about p {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.capri-menu-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  gap: 16px;
  margin-top: 20px;
}

.capri-menu-feature article {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  padding: 18px;
  border: 1px solid rgba(32, 21, 15, 0.16);
  border-radius: 38px;
  background: #fff7eb;
}

.capri-menu-feature img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 26px;
}

.capri-menu-feature h4 {
  margin: 16px 0 8px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 34px;
  line-height: 0.95;
}

.capri-menu-feature p {
  color: #6d5a4b;
  font-size: 13px;
  line-height: 1.45;
}

.capri-menu-feature span {
  position: absolute;
  top: 28px;
  left: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff8ef;
  background: #e64e2c;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.capri-menu-feature a {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: #20150f;
  background: transparent;
  font-size: 12px;
}

.capri-menu-feature b {
  display: inline-flex;
  margin-top: 8px;
  color: #e64e2c;
  font-size: 18px;
}

.capri-stockists {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 20px;
  border-radius: 34px;
  color: #f7eee3;
  background: #24140e;
}

.capri-stockists strong,
.capri-stockists span {
  display: block;
}

.capri-stockists strong {
  margin-bottom: 10px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 36px;
  line-height: 0.95;
}

.capri-stockists span {
  color: rgba(247, 238, 227, 0.74);
  line-height: 1.45;
}

.capri-stockists img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 26px;
}

.capri-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(32, 21, 15, 0.18);
  color: #4c3b31;
  font-size: 12px;
  font-weight: 800;
}

.restaurant-site {
  padding: 0;
  color: #080808;
  background: #f8f7f3;
  --ember-font: "Refinery", "Refinery 95", Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
  font-family: var(--ember-font);
}

.restaurant-site * {
  font-family: inherit;
}

.veloce-welcome {
  position: relative;
  display: grid;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.5)),
    url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1600&q=80") center / cover;
}

.veloce-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 28px;
  align-items: start;
  min-height: auto;
  padding: 28px 34px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.56), transparent);
}

.veloce-logo {
  color: #fff;
  font-family: var(--ember-font);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}

.veloce-logo span {
  display: block;
  margin-top: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.veloce-social {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
}

.veloce-social span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

.veloce-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.veloce-header nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 42px);
  align-self: start;
  padding-top: 8px;
  border-top: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.veloce-welcome-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 430px;
  padding: 88px 38px 62px;
  text-align: center;
}

.veloce-welcome-copy p {
  margin: 0 0 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.veloce-welcome-copy h3 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(50px, 8vw, 112px);
  line-height: 0.88;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.42);
}

.veloce-welcome-copy button {
  min-height: 46px;
  margin-top: 28px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: #111;
  background: rgba(255, 255, 255, 0.88);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.veloce-checker {
  height: 34px;
  background:
    linear-gradient(45deg, #111 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, #111 75%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, #111 75%) 12px 12px / 24px 24px,
    linear-gradient(45deg, #111 25%, transparent 25%) 12px 12px / 24px 24px;
}

.veloce-hero {
  display: grid;
  grid-template-columns: 0.74fr 1.08fr;
}

.veloce-hero-copy {
  display: grid;
  align-content: center;
  gap: 58px;
  min-height: 360px;
  padding: 42px;
  background: #d3a262;
}

.veloce-hero h3 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(42px, 5.8vw, 72px);
  line-height: 0.96;
}

.veloce-hero button {
  width: max-content;
  min-height: 62px;
  padding: 0 42px;
  border: 0;
  border-radius: 999px;
  color: #d3a262;
  background: #080808;
  font: inherit;
  font-size: 26px;
}

.veloce-hero img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.veloce-feature {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 48px 24px 58px;
  color: #fff;
  background: #000;
  text-align: center;
}

.veloce-feature img {
  width: min(440px, 70%);
  height: 270px;
  object-fit: cover;
  border-radius: 999px;
  opacity: 0.78;
}

.veloce-feature span {
  margin-top: -66px;
  padding: 4px 10px;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 16px;
  transform: rotate(-8deg);
}

.veloce-feature h3 {
  margin: 2px 0 8px;
  font-size: clamp(52px, 8vw, 100px);
  line-height: 0.86;
}

.veloce-feature p {
  max-width: 520px;
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.veloce-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px;
  background: #fff;
}

.veloce-menu-grid article {
  position: relative;
  min-height: 0;
  padding: 14px 14px 18px;
  border: 1px solid #eeeeec;
  border-radius: 0;
  background: #fff;
}

.veloce-menu-grid h4 {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 34px;
  margin: 0;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.58);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

.veloce-menu-grid img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  display: block;
}

.veloce-menu-grid p,
.veloce-menu-grid b {
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.veloce-menu-grid p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 86%;
  margin: 18px 0 0;
  font-size: 15.5px;
  font-style: normal;
  font-stretch: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #343434;
  text-transform: uppercase;
}

.veloce-menu-grid b {
  display: inline-block;
  margin-top: 24px;
  font-size: 22px;
  font-weight: 900;
}

.veloce-events {
  padding: 42px 38px 44px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: #111;
  background: #fff;
  text-align: center;
}

.veloce-events h3 {
  margin: 0 0 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.veloce-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.veloce-events-grid article {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.veloce-events-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
}

.veloce-events-grid span {
  display: block;
  color: #222;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.veloce-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: 48px 48px 58px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  color: #111;
  background: #fff;
}

.veloce-story > img {
  display: block;
  width: 100%;
  min-height: 360px;
  object-fit: cover;
}

.veloce-story-copy {
  max-width: 520px;
}

.veloce-story-copy h3 {
  margin: 0 0 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
}

.veloce-story-copy p {
  margin: 0 0 14px;
  color: #343434;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.veloce-story-copy button {
  min-height: 42px;
  margin-top: 12px;
  padding: 0 20px;
  border: 0;
  color: #fff;
  background: #102437;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

/* No internal responsive breakpoint here: this embedded example site is
   always rendered at its full desktop layout and shrunk to fit mobile via
   the JS transform: scale() in scaleEmbed() (script.js), so its proportions
   always match the desktop design as intended. A viewport-width media query
   here would fire on real phones regardless of the scale transform and
   collapse this grid before scaling, defeating that. */

.veloce-find {
  position: relative;
  display: grid;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.22) 52%, rgba(0, 0, 0, 0.64)),
    url("https://images.unsplash.com/photo-1470337458703-46ad1756a187?auto=format&fit=crop&w=1600&q=80") center / cover;
}

.veloce-find h3 {
  margin: 0;
  max-width: 850px;
  color: #fff;
  font-size: clamp(58px, 8vw, 118px);
  line-height: 0.88;
  text-shadow: 0 5px 32px rgba(0, 0, 0, 0.48);
}

.veloce-find-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  justify-items: start;
  min-height: 560px;
  gap: 18px;
  padding: 84px 54px 74px;
  color: #fff;
}

.veloce-find-kicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.veloce-find p {
  margin: 0;
  max-width: 610px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.58);
}

.veloce-find-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(760px, 100%);
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.veloce-find-details span {
  display: block;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.56);
}

.veloce-find-details strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ember-font);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.veloce-find button {
  min-height: 46px;
  margin-top: 8px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  color: #111;
  background: rgba(255, 255, 255, 0.9);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.veloce-find > .veloce-checker {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
}

.veloce-footer {
  padding: 42px 42px 16px;
  background: #f3f3f1;
}

.veloce-footer-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(128px, 0.84fr)) max-content;
  grid-template-rows: auto minmax(20px, auto);
  gap: 28px 38px;
  align-items: start;
  padding: 0 0 16px;
  border-bottom: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.veloce-footer-logo {
  color: #080808;
  font-family: var(--ember-font);
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.veloce-footer-logo span {
  display: block;
  margin-top: 7px;
  color: #9a6a34;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.veloce-footer-grid nav {
  display: grid;
  gap: 14px;
}

.veloce-footer-grid a {
  color: #111;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.18;
  text-transform: none;
}

.veloce-footer-grid button {
  justify-self: end;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  color: #fff;
  background: #112b43;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
}

.veloce-footer-grid button::after {
  content: "›";
  margin-left: 12px;
  font-size: 28px;
  line-height: 0;
}

.veloce-footer-legal {
  display: grid;
  grid-column: 5;
  grid-row: 2;
  justify-items: end;
  gap: 3px;
  align-self: end;
  color: #555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  text-transform: none;
}

.veloce-footer > .veloce-checker {
  height: 26px;
  margin-top: 0;
}

.retail-site {
  color: #15171b;
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 247, 249, 0.96)),
    linear-gradient(120deg, #f8fafc, #e9edf4);
  font-family: "Space Grotesk", Inter, sans-serif;
}

.retail-site .mini-nav {
  display: grid;
  grid-template-columns: max-content repeat(4, max-content) minmax(120px, 1fr) repeat(3, max-content);
  gap: 16px;
  align-items: center;
  padding: 18px 18px 14px;
  border-top: 3px solid #111;
  color: #111114;
  background: #fff;
  text-transform: uppercase;
}

.retail-site .mini-nav strong {
  margin-right: 12px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  text-transform: none;
}

.retail-site .mini-nav span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.retail-site .mini-nav label {
  justify-self: end;
  width: min(210px, 100%);
}

.retail-site .mini-nav input {
  width: 100%;
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  color: #111114;
  background: #f1f1f1;
  font: inherit;
  font-size: 10px;
}

.retail-hero {
  display: grid;
  min-height: 280px;
  align-items: center;
  justify-items: center;
  padding: 34px 20px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18)),
    url("https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?auto=format&fit=crop&w=1400&q=80") center / cover;
  text-align: center;
}

.retail-hero h3 {
  margin: 0 0 18px;
  color: #fff;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(28px, 6vw, 54px);
  font-weight: 400;
  line-height: 1;
}

.retail-hero button {
  min-height: 34px;
  margin: 0 4px;
  padding: 0 18px;
  border: 0;
  color: #111114;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.retail-shopbar {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}

.retail-shopbar label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  background: #dedede;
}

.retail-shopbar span {
  color: #111114;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.retail-shopbar input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #30343a;
  background: transparent;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-align: right;
}

.retail-shopbar div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.retail-shopbar button {
  min-height: 30px;
  border: 1px solid rgba(17, 17, 20, 0.2);
  color: #3d424a;
  background: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
}

.retail-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.retail-products article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 20, 0.09);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 17, 20, 0.04);
}

.retail-products img {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 192px;
  object-fit: cover;
  object-position: center 18%;
  background: #fff;
}

.retail-products article > span,
.retail-products article > strong {
  display: block;
  padding: 0 10px;
}

.retail-products article > span {
  margin-top: 3px;
  color: #111114;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.retail-products article > strong {
  justify-self: end;
  padding-bottom: 10px;
  color: #111114;
  font-size: 12px;
  white-space: nowrap;
}

.retail-promo {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 17, 20, 0.08);
  border-radius: 18px;
  background: #fff;
}

.retail-promo strong {
  font-size: 14px;
}

.retail-promo span {
  color: #626976;
  font-size: 12px;
  line-height: 1.35;
}

.retail-footer {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.1fr;
  gap: 24px;
  align-items: end;
  margin-top: 14px;
  padding: 38px 26px 18px;
  min-height: 180px;
  border: 1px solid rgba(17, 17, 20, 0.06);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.85), rgba(245, 246, 248, 0.95)),
    repeating-linear-gradient(90deg, rgba(17, 17, 20, 0.025) 0 1px, transparent 1px 42px);
}

.retail-footer div {
  display: grid;
  gap: 6px;
}

.retail-footer span {
  margin-bottom: 12px;
  color: #a2a7b0;
  font-size: 9px;
  text-transform: uppercase;
}

.retail-footer a,
.retail-footer small {
  color: #24272d;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}

.retail-footer strong {
  color: #15171b;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.retail-footer small {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 24px;
  color: #a2a7b0;
  font-size: 9px;
}

.service-site {
  --hvac-navy: #082845;
  --hvac-yellow: #ffc928;
  --hvac-text: #33383f;
  --hvac-muted: #6f7680;
  color: var(--hvac-text);
  background: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
}

.hvac-header {
  background: #fff;
  border-bottom: 1px solid #e7e9ec;
}

.hvac-topbar {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 22px;
  align-items: center;
  padding: 13px 28px;
  color: #6e737a;
  font-size: 12px;
}

.hvac-topbar strong {
  justify-self: start;
  padding: 2px 8px;
  border: 3px solid #33383f;
  color: #33383f;
  font-size: 22px;
  letter-spacing: 0.08em;
}

.hvac-header nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 9px 24px;
  border-top: 1px solid #edf0f2;
  font-size: 10px;
  font-weight: 800;
}

.hvac-header nav a:first-child {
  color: var(--hvac-yellow);
}

.service-hero {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: stretch;
  grid-auto-rows: 1fr;
  min-height: 330px;
  background: var(--hvac-navy);
}

.service-hero > div {
  display: grid;
  align-content: center;
  padding: 42px 58px;
}

.badge {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.service-hero h3 {
  max-width: 450px;
  margin: 18px 0;
  color: #fff;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.08;
}

.service-hero p {
  display: flex;
  gap: 22px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.service-hero p span::before {
  content: "✓";
  margin-right: 6px;
  color: var(--hvac-yellow);
}

.service-hero button,
.hvac-about button,
.hvac-service-bands button,
.hvac-form button,
.hvac-projects button {
  width: max-content;
  min-height: 42px;
  padding: 0 28px;
  border: 0;
  color: #082845;
  background: var(--hvac-yellow);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.service-hero img {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
}

.hvac-brand-strip {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) 1fr;
  gap: 30px;
  align-items: center;
  padding: 42px 120px;
  border-bottom: 1px solid #eef0f2;
  background: #fbfcfd;
}

.hvac-brand-strip div {
  padding-left: 16px;
  border-left: 3px solid var(--hvac-yellow);
}

.hvac-brand-strip div span {
  display: block;
  margin-bottom: 6px;
  color: #33383f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hvac-brand-strip p {
  margin: 0;
  max-width: 270px;
  color: #737a84;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.hvac-brand-strip ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvac-brand-strip li {
  display: grid;
  min-height: 58px;
  place-items: center;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #e5e8ec;
  color: #9aa0a8;
  background: #fff;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

.hvac-about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
  padding: 58px 130px 72px;
  background: #fff;
}

.hvac-about img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  box-shadow: -14px 16px 0 #eef1f2;
}

.hvac-about span,
.service-reviews > span,
.hvac-projects span {
  color: var(--hvac-yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hvac-about h3,
.service-reviews h3,
.hvac-projects h3,
.hvac-form h3 {
  margin: 10px 0 20px;
  color: #33383f;
  font-size: 30px;
  line-height: 1.18;
}

.hvac-about p {
  margin: 0 0 16px;
  color: var(--hvac-muted);
  font-size: 13px;
  line-height: 1.8;
}

.hvac-about button,
.hvac-form button,
.hvac-projects button {
  color: #fff;
  background: var(--hvac-navy);
}

.service-reviews {
  padding: 64px 120px 90px;
  background: #fff;
}

.service-reviews > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin-top: 30px;
}

.service-reviews blockquote {
  margin: 0;
}

.service-reviews p {
  color: var(--hvac-muted);
  font-size: 12px;
  line-height: 1.8;
}

.service-reviews cite {
  display: block;
  margin-top: 16px;
  color: #33383f;
  font-style: normal;
  font-weight: 900;
}

.service-reviews b {
  color: var(--hvac-yellow);
  font-size: 12px;
}

.hvac-service-bands article {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  color: #fff;
  background: var(--hvac-navy);
}

.hvac-service-bands img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
}

.hvac-service-bands article > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 26px;
  align-items: center;
  max-width: 980px;
  min-height: 170px;
  margin: 0 auto;
  padding: 36px 60px;
}

.hvac-service-bands h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 28px;
}

.hvac-service-bands p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.6;
}

.hvac-service-bands button {
  border: 1px solid rgba(255, 255, 255, 0.86);
  color: #fff;
  background: transparent;
}

.hvac-form {
  padding: 82px 130px;
  background: #fff;
  text-align: center;
}

.hvac-form form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 26px auto 0;
}

.hvac-form input,
.hvac-form textarea {
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid #e1e4e8;
  color: #8a8f96;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.hvac-form textarea {
  grid-column: 1 / -1;
  min-height: 130px;
  padding-top: 18px;
}

.hvac-form button {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 12px;
}

.hvac-projects {
  padding: 44px 0 0;
  background: #fff;
}

.hvac-projects > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 14px;
  padding: 0 120px 26px;
}

.hvac-projects h3 {
  grid-row: 1;
  margin: 0 0 14px;
}

.hvac-projects > div:last-child {
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 1.2fr 0.95fr;
  gap: 14px;
}

.hvac-projects img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.example-copy {
  padding: 26px;
  background: #fff;
}

.example-copy p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.58;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  padding: 24px;
}

.preview-modal.is-open {
  display: grid;
  place-items: center;
}

.preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 14, 0.64);
  backdrop-filter: blur(18px);
}

.preview-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(90vh, 960px);
  overflow: auto;
  border-radius: 32px;
  background: var(--white);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.34);
}

.preview-dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.preview-dialog-header h2 {
  margin-bottom: 0;
  font-size: clamp(26px, 3vw, 42px);
}

.modal-close {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.preview-dialog-body {
  padding: 26px;
  background: #f5f7fb;
}

.preview-dialog-body .example-browser {
  height: auto;
  min-height: auto;
  overflow: visible;
  padding: 22px;
  border-radius: 26px;
}

.preview-dialog-body .website-preview {
  height: auto;
  min-height: 680px;
  overflow: visible;
  padding: 28px;
}

.preview-dialog-body .restaurant-hero {
  min-height: 390px;
}

.preview-dialog-body .capri-brand h3 {
  font-size: clamp(82px, 12vw, 156px);
}

.preview-dialog-body .capri-hero img {
  height: 360px;
}

.preview-dialog-body .capri-menu-feature img {
  height: 240px;
}

.preview-dialog-body .veloce-welcome {
  min-height: 700px;
}

.preview-dialog-body .veloce-welcome-copy {
  min-height: 590px;
}

.preview-dialog-body .veloce-menu-grid img {
  height: 430px;
}

.preview-dialog-body .veloce-find {
  min-height: 680px;
}

.preview-dialog-body .veloce-find-copy {
  min-height: 680px;
}

.preview-dialog-body .restaurant-hero h3,
.preview-dialog-body .retail-hero h3,
.preview-dialog-body .service-hero h3 {
  max-width: 620px;
  font-size: clamp(42px, 6vw, 78px);
}

.preview-dialog-body .service-hero h3 {
  font-size: clamp(38px, 4.5vw, 56px);
}

.preview-dialog-body .service-hero img {
  align-self: stretch;
  height: 100%;
  min-height: 100%;
}

.preview-dialog-body .restaurant-menu-strip img,
.preview-dialog-body .retail-products img {
  height: 260px;
}

/* Final cinematic shell overrides. */
.site-header{border:none;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(6,9,14,.72);box-shadow:0 12px 40px rgba(0,0,0,.22)}
.site-header nav a:first-child{padding:0 15px;border-radius:999px;color:#d9e6f5;background:rgba(255,255,255,.06);box-shadow:none}
.site-header nav a:hover{background:rgba(255,255,255,.13)}
.hero{background:transparent;isolation:auto;position:relative}
.hero:after{display:none}
.hero:before{position:absolute;inset:0 0 auto 0;z-index:1;content:"";height:min(30vh,260px);background:linear-gradient(to bottom,#02060d,rgba(2,6,13,.55) 55%,transparent);pointer-events:none}
h1{max-width:680px;font-size:clamp(48px,6.7vw,92px);line-height:.9;letter-spacing:-.055em}
.hero .scene-copy{max-width:700px}
.hero .scene-copy>p:not(.eyebrow){max-width:620px}
.chapter-card h2{font-size:clamp(34px,4vw,58px)}
.examples.scene{background:transparent}
.pricing-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.price-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:540px;padding:28px 26px 26px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(168deg,rgba(26,44,72,.18) 0%,rgba(12,22,42,.30) 60%,rgba(8,15,32,.38) 100%);box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 8px 32px rgba(0,0,0,.38);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1),border-color .32s ease,background .32s ease}
.price-card.featured{border-color:rgba(120,210,255,.38);box-shadow:0 34px 110px rgba(79,213,255,.14),inset 0 1px 0 rgba(255,255,255,.18);transform:none}
.price-card b{display:block;margin:6px 0 14px;font-size:clamp(32px,3vw,48px);letter-spacing:-.05em;color:#fff}
.price-card .button{margin-top:auto;width:100%;justify-content:center}
.pricing-manage-note{position:relative;z-index:3;display:flex;justify-content:center;margin-top:32px}
.pricing-manage-note .button{min-height:44px;padding:0 22px;font-size:14px}
.process{padding-top:118px}
.calendar-shell{border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 34px 110px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18)}
@media (max-width:1060px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){h1{font-size:clamp(42px,13vw,64px)}.pricing-grid{grid-template-columns:1fr}.process{padding-top:92px}}

/* Keep revealed chapter text crisp once scrolled into view. */
.scene.is-visible .section-heading,
.scene.is-visible .scene-copy,
.scene.is-visible .chapter-card,
.scene.is-visible .example-carousel,
.scene.is-visible .pricing-grid,
.scene.is-visible .timeline,
.scene.is-visible .calendar-shell{filter:none!important;opacity:1!important}
/* Use movement and opacity for transitions; keep typography and previews sharp. */
.scene>*{filter:none!important}

/* Title chapter and final polish pass. */
.site-header{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.deck[data-camera="intro"]~* .site-header,
body:has(.intro.is-active) .site-header{opacity:0;pointer-events:none;transform:translateY(-22px)}
.intro{grid-template-columns:1fr;place-items:center;text-align:center;min-height:83vh}
.intro:before{position:absolute;inset:0;content:"";background:radial-gradient(circle at 50% 50%,rgba(119,226,255,.18),transparent 28%),radial-gradient(circle at 50% 53%,rgba(255,255,255,.08),transparent 42%);opacity:.9}
.title-mark{position:relative;z-index:4;display:grid;justify-items:center;gap:20px;transform-style:preserve-3d}
.title-kicker{color:#8edfff;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.24em}
.title-mark h1{max-width:none;margin:0;font-size:clamp(58px,13vw,196px);line-height:.78;letter-spacing:-.085em;text-shadow:0 0 34px rgba(129,231,255,.18),0 34px 90px rgba(0,0,0,.55)}
.title-mark p{max-width:none;margin:0;color:#c2cfdd;font-size:15px;text-transform:uppercase;letter-spacing:.18em}
.title-orbit{position:absolute;inset:50% auto auto 50%;z-index:2;width:min(58vw,720px);aspect-ratio:1;border:1px solid rgba(172,239,255,.24);border-radius:50%;box-shadow:0 0 80px rgba(103,219,255,.14),inset 0 0 80px rgba(103,219,255,.08);transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg);animation:titleOrbit 9s linear infinite}
.title-orbit span{position:absolute;border-radius:50%;background:linear-gradient(145deg,#f6fdff,#72e1ff);box-shadow:0 0 28px rgba(120,227,255,.45)}
.title-orbit span:nth-child(1){left:12%;top:47%;width:18px;height:18px}
.title-orbit span:nth-child(2){right:18%;top:31%;width:12px;height:12px}
.title-orbit span:nth-child(3){left:47%;bottom:7%;width:9px;height:9px}
@keyframes titleOrbit{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(348deg)}}
.deck[data-camera="intro"] .monitor{opacity:0;filter:blur(18px);transform:translate3d(0,-45%,-520px) rotateX(30deg) scale(.42)}
.deck[data-camera="intro"] .blueprint,
.deck[data-camera="intro"] .components,
.deck[data-camera="intro"] .analytics,
.deck[data-camera="intro"] .portal{opacity:0}
.deck[data-camera="wide"] .monitor{right:8vw;width:min(500px,38vw)}

.monitor-panel{position:relative}
.monitor-screen{position:relative}
.monitor-screen:before{position:absolute;inset:28px;border:1px solid rgba(255,255,255,.36);border-radius:24px;content:"";background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.monitor-screen:after{position:absolute;right:38px;top:42px;width:86px;height:86px;border-radius:24px;content:"";background:linear-gradient(145deg,#effcff,#66ddff);box-shadow:0 24px 60px rgba(92,221,255,.22)}
.monitor-screen:after{background:linear-gradient(#0b1722,#0b1722) 17px 18px/44px 7px no-repeat,linear-gradient(90deg,#bff5ff,#63dcff) 17px 38px/52px 8px no-repeat,linear-gradient(rgba(6,18,28,.22),rgba(6,18,28,.22)) 17px 58px/34px 6px no-repeat,linear-gradient(145deg,#effcff,#66ddff)}
.chapter-card.hero-card{max-width:360px;margin-left:auto;margin-right:52px;align-self:end}
.chapter-card.hero-card h2{font-size:clamp(30px,3.5vw,50px)}
/* ── Pricing: left copy + right 4-column card grid ── */
/* ══════════════════════════════════════════
   Pricing section — centered SaaS layout
   ══════════════════════════════════════════ */

/* Section shell — full-viewport centered column */
.pricing{
  display:flex;flex-direction:column;align-items:center;
  padding:96px max(24px,calc((100vw - 1320px)/2)) 56px;
  gap:0;grid-template-columns:none;
  justify-content:center;
  position:relative;overflow:hidden
}

/* Radial glow behind cards */
.pricing::before{
  content:"";pointer-events:none;
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 72% 46% at 50% 62%,rgba(32,96,200,.22),transparent 68%),
    radial-gradient(ellipse 40% 28% at 26% 70%,rgba(40,140,255,.1),transparent 60%),
    radial-gradient(ellipse 40% 28% at 74% 70%,rgba(40,140,255,.1),transparent 60%)
}

/* ── Heading ── */
.pricing .scene-copy{
  position:static;max-width:none;width:100%;
  text-align:center;margin-bottom:76px;
  position:relative;z-index:2
}
.pricing .scene-copy .eyebrow{
  display:flex;justify-content:center;
  margin-bottom:20px;letter-spacing:.2em;
  font-size:11px;color:#78dcff
}
.pricing h2{
  font-size:clamp(38px,5.4vw,78px);
  line-height:.9;letter-spacing:-.052em;
  color:#fff;margin-bottom:20px
}
.pricing .scene-copy>p:not(.eyebrow){
  max-width:640px;margin:0 auto;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.68;color:#8daac2;text-align:center
}

/* ── Card grid ── */
.pricing-grid{
  position:relative;z-index:2;
  width:100%;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;align-items:stretch;
  max-width:none;margin-left:0
}

/* ── Card shell — true glassmorphism ── */
.price-card{
  position:relative;overflow:hidden;
  height:auto;min-height:540px;
  padding:28px 26px 26px;
  display:flex;flex-direction:column;
  border-radius:22px;
  /* Semi-transparent glass — lets background gradient show through */
  background:linear-gradient(
    168deg,
    rgba(26,44,72,.58) 0%,
    rgba(12,22,42,.72) 60%,
    rgba(8,15,32,.78) 100%
  );
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 8px 32px rgba(0,0,0,.38),
    0 0 0 rgba(80,180,255,0);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    box-shadow .32s cubic-bezier(.16,1,.3,1),
    border-color .32s ease,
    background .32s ease
}

/* Frosted top-edge reflection */
.price-card::before{
  content:"";pointer-events:none;
  position:absolute;inset:0;z-index:0;
  border-radius:22px;
  background:linear-gradient(
    170deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.03) 28%,
    transparent 52%
  )
}

/* All card children above pseudo-element */
.price-card>*{position:relative;z-index:1}

/* Hover lift + glow */
.price-card:hover{
  transform:translateY(-7px) scale(1.005);
  border-color:rgba(100,200,255,.28);
  background:linear-gradient(
    168deg,
    rgba(30,52,88,.62) 0%,
    rgba(14,26,50,.76) 60%,
    rgba(9,18,38,.82) 100%
  );
  box-shadow:
    0 2px 0 rgba(255,255,255,.09) inset,
    0 20px 56px rgba(0,0,0,.52),
    0 0 48px rgba(60,160,255,.12),
    0 0 80px rgba(40,120,255,.06)
}

/* Featured card — brighter border + stronger glow */
.price-card.featured{
  border-color:rgba(100,200,255,.28);
  background:linear-gradient(
    168deg,
    rgba(28,48,80,.64) 0%,
    rgba(12,24,46,.76) 60%,
    rgba(8,15,34,.82) 100%
  );
  box-shadow:
    0 2px 0 rgba(255,255,255,.1) inset,
    0 8px 40px rgba(0,0,0,.44),
    0 0 60px rgba(60,160,255,.13),
    0 0 120px rgba(40,120,255,.07)
}
.price-card.featured:hover{
  transform:translateY(-8px) scale(1.006);
  border-color:rgba(120,210,255,.38);
  box-shadow:
    0 2px 0 rgba(255,255,255,.12) inset,
    0 24px 68px rgba(0,0,0,.56),
    0 0 80px rgba(60,160,255,.18),
    0 0 140px rgba(40,120,255,.1)
}

/* ── Card content ── */
.plan-label{
  margin:0 0 12px;color:#78dcff;
  font-size:11px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px
}
.price-card h3{
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.18;color:#d8eeff;
  margin-bottom:6px;font-weight:700;
  letter-spacing:-.018em
}
.price-card b{
  display:block;margin:10px 0 16px;
  font-size:clamp(36px,3.4vw,52px);
  line-height:.9;letter-spacing:-.058em;
  color:#fff;font-weight:800
}
.price-card-desc{
  font-size:13px;line-height:1.62;
  color:#7a9bb8;margin-bottom:0;flex-shrink:0
}

/* ── Feature list ── */
.price-features{
  list-style:none;
  margin:22px 0 28px;
  padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:13px;flex:1
}
.price-features li{
  display:flex;align-items:flex-start;
  gap:10px;font-size:13.5px;
  color:#a8c8e0;line-height:1.48
}
.price-features li::before{
  content:"";display:block;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#a0e0ff,#58c8ff);
  flex-shrink:0;margin-top:4px;
  box-shadow:0 0 6px rgba(88,200,255,.6),0 0 12px rgba(88,200,255,.3)
}

/* ── CTA buttons ── */
.price-card .button{
  width:100%;min-height:50px;
  text-align:center;margin-top:auto;
  justify-content:center;
  border-radius:999px;
  font-size:15px;font-weight:700;
  letter-spacing:-.01em;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease
}
.price-card .button.primary{
  background:linear-gradient(130deg,#e4f8ff 0%,#9ee4ff 45%,#60d0ff 100%);
  color:#031018;
  border-color:rgba(160,232,255,.35);
  box-shadow:0 6px 24px rgba(70,190,255,.28),0 2px 0 rgba(255,255,255,.22) inset
}
.price-card .button.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(70,190,255,.38),0 2px 0 rgba(255,255,255,.28) inset
}
.price-card .button.ghost{
  color:#b8d8f0;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset
}
.price-card .button.ghost:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.24)
}

/* ── "Most requested" badge ── */
.badge-most-requested{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background:rgba(88,200,255,.14);
  border:1px solid rgba(88,200,255,.26);
  color:#90e0ff;
  font-size:10px;font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 0 10px rgba(88,200,255,.12)
}
.deck[data-camera="checkout"] .monitor,
.deck[data-camera="checkout"] .components,
.deck[data-camera="checkout"] .blueprint,
.deck[data-camera="checkout"] .portal{opacity:0;filter:blur(14px);transform:translate3d(20vw,-48%,-320px) scale(.55)}
.deck[data-camera="checkout"] .analytics{right:5vw;opacity:.22;transform:translate3d(0,-50%,-220px) rotateX(4deg) rotateY(-8deg) scale(.9)}
.deck[data-camera="checkout"] .analytics{opacity:0;filter:blur(18px);transform:translate3d(18vw,-50%,-360px) scale(.6)}
.components .component:before{position:absolute;left:18px;right:18px;top:18px;height:10px;border-radius:99px;content:"";background:rgba(255,255,255,.35);box-shadow:0 24px 0 rgba(255,255,255,.16),0 48px 0 rgba(255,255,255,.1)}
.components .chip:before{inset:18px;left:18px;right:18px;height:auto;border:1px solid rgba(5,18,28,.18);border-radius:12px;background:linear-gradient(90deg,rgba(5,18,28,.18) 1px,transparent 1px),linear-gradient(rgba(5,18,28,.18) 1px,transparent 1px);background-size:8px 8px;box-shadow:none}
@media (max-width:1060px){.pricing{padding:76px max(20px,calc((100vw - 900px)/2))}.pricing-grid{grid-template-columns:repeat(2,1fr);gap:14px}.pricing .scene-copy{margin-bottom:52px}.chapter-card.hero-card{margin-right:0}}
@media (max-width:760px){body:has(.intro.is-active) .site-header{opacity:0}.intro{min-height:85vh;min-height:85dvh}.title-mark h1{font-size:clamp(54px,18vw,86px)}.title-mark p{font-size:11px}.title-orbit{width:92vw}.pricing{padding:68px 18px}.pricing-grid{grid-template-columns:1fr;gap:12px}.price-card{min-height:0;height:auto}.price-card::before{display:none}.pricing .scene-copy{margin-bottom:40px}.chapter-card.hero-card{margin:0}}
.pricing h2{font-size:clamp(38px,5.4vw,78px);line-height:.9;letter-spacing:-.052em}
.pricing .scene-copy>p:not(.eyebrow){max-width:640px;font-size:clamp(15px,1.15vw,18px);color:#8daac2}

/* Mutually exclusive story anchors and chapter-specific transitions. */
.story-stage .anchor{opacity:0!important;visibility:hidden;filter:blur(10px);transition:opacity .22s ease,visibility 0s linear .24s,transform .82s cubic-bezier(.16,1,.3,1),filter .22s ease}
.deck[data-camera="wide"] .monitor,
.deck[data-camera="blueprint"] .blueprint,
.deck[data-camera="components"] .components,
.deck[data-camera="booking"] .portal{opacity:1!important;visibility:visible;filter:none;transition:opacity .42s ease .08s,visibility 0s,transform .92s cubic-bezier(.16,1,.3,1),filter .42s ease}
.deck[data-camera="intro"] .anchor,
.deck[data-camera="showcase"] .anchor,
.deck[data-camera="checkout"] .anchor{opacity:0!important;visibility:hidden;filter:blur(14px)}
.deck[data-camera="workflow"] .components{opacity:.18!important;visibility:visible;filter:blur(3px);transform:translate3d(6vw,-48%,-230px) rotateY(38deg) scale(.62)}
.deck[data-camera="workflow"] .analytics{opacity:.16!important;visibility:visible;filter:blur(3px);transform:translate3d(-5vw,-50%,-250px) rotateX(16deg) rotateY(24deg) scale(.62)}
.deck[data-camera="wide"] .monitor{right:7vw;transform:translate3d(0,-45%,0) rotateX(6deg) rotateY(-12deg)}
.deck[data-camera="blueprint"] .blueprint{transform:translate3d(0,-48%,0) rotateX(18deg) rotateZ(-8deg)}
.deck[data-camera="components"] .components{transform:translate3d(0,-48%,0) rotateY(-12deg)}
.deck[data-camera="booking"] .portal{transform:translate3d(0,-50%,0) scale(1)}
@media (prefers-reduced-motion:reduce){.story-stage .anchor{transition:none!important}}

/* Body camera guard: prevents stale anchors during reverse/backtracking transitions. */
body[data-camera="intro"] .story-stage .anchor,
body[data-camera="showcase"] .story-stage .anchor,
body[data-camera="checkout"] .story-stage .anchor{opacity:0!important;visibility:hidden!important;filter:blur(14px)!important}
body[data-camera="wide"] .story-stage .anchor:not(.monitor),
body[data-camera="blueprint"] .story-stage .anchor:not(.blueprint),
body[data-camera="components"] .story-stage .anchor:not(.components),
body[data-camera="booking"] .story-stage .anchor:not(.portal){opacity:0!important;visibility:hidden!important;filter:blur(14px)!important}
body[data-camera="wide"] .monitor,
body[data-camera="blueprint"] .blueprint,
body[data-camera="components"] .components,
body[data-camera="booking"] .portal{opacity:1!important;visibility:visible!important;filter:none!important}
body[data-camera="workflow"] .monitor,
body[data-camera="workflow"] .blueprint,
body[data-camera="workflow"] .portal{opacity:0!important;visibility:hidden!important}

/* Continuous scroll: sections live in normal document flow and reveal
   their content once scrolled into view (see .scene.is-visible above). */
.story-stage .anchor{will-change:transform,opacity}
body.modal-open{overflow:hidden!important}
.preview-dialog{pointer-events:auto}
.story-stage{background:transparent!important}
.story-stage .anchor{transition:opacity .24s ease,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s!important}

/* Cinematic aerial flyover title sequence. */
.intro {
  isolation: isolate;
  background: #02060d !important;
}

.intro:before {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 45%, rgba(180, 238, 255, .16), transparent 24%),
    radial-gradient(circle at 50% 62%, rgba(3, 8, 14, .12), rgba(3, 8, 14, .7) 66%, rgba(3, 8, 14, .94) 100%) !important;
  mix-blend-mode: screen;
}

.flyover {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #02060d;
  transform: translateZ(0);
}

.flyover:before {
  position: absolute;
  inset: -12%;
  z-index: 3;
  content: "";
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 20% 18%, rgba(128, 220, 255, .26), transparent 24%),
    radial-gradient(circle at 78% 35%, rgba(89, 117, 255, .18), transparent 26%),
    linear-gradient(115deg, rgba(0, 0, 0, .72), transparent 28%, transparent 70%, rgba(0, 0, 0, .74));
  filter: blur(2px);
}

.flyover:after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, transparent 0 32%, rgba(1, 5, 10, .44) 67%, rgba(1, 5, 10, .9) 100%),
    linear-gradient(180deg, rgba(1, 5, 10, .24), rgba(1, 5, 10, .64));
  background-size: 84px 84px, 84px 84px, 100% 100%, 100% 100%;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 0 72%, transparent 100%);
}

.flyover-scene {
  position: absolute;
  inset: -5%;
  opacity: 0;
  background-position: center;
  background-size: cover;
  filter: saturate(.82) contrast(1.1) brightness(.68);
  transform: scale(1.1) translate3d(0, 0, 0);
  transform-origin: center;
  animation: aerialFlyover 48s infinite cubic-bezier(.45, 0, .2, 1);
  will-change: opacity, transform;
}

.flyover-scene:after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 46%, rgba(170, 233, 255, .06), transparent 28%),
    linear-gradient(180deg, rgba(1, 6, 12, .08), rgba(1, 6, 12, .36));
}

.scene-glacier {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .08), rgba(2, 6, 13, .3)),
    url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 0s;
}

.scene-aurora {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .04), rgba(2, 6, 13, .34)),
    url("https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 8s;
}

.scene-coast {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .12), rgba(2, 6, 13, .42)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 16s;
}

.scene-city {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .18), rgba(2, 6, 13, .48)),
    url("https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 24s;
}

.scene-mountain {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .06), rgba(2, 6, 13, .34)),
    url("https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 32s;
}

.scene-ocean {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 13, .1), rgba(2, 6, 13, .44)),
    url("https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=2400&q=86");
  animation-delay: 40s;
}

@keyframes aerialFlyover {
  0% {
    opacity: 0;
    transform: scale(1.1) translate3d(-1.8%, 1.2%, 0) rotate(.35deg);
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  22% {
    opacity: 0;
    transform: scale(1.21) translate3d(2.2%, -1.6%, 0) rotate(-.45deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.21) translate3d(2.2%, -1.6%, 0) rotate(-.45deg);
  }
}

.intro .title-mark {
  z-index: 6;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(18px, 3vw, 34px);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.intro .title-mark h1 {
  color: rgba(248, 253, 255, .98);
  font-size: clamp(62px, 14vw, 210px);
  letter-spacing: -.095em;
  text-transform: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .26),
    0 0 34px rgba(128, 226, 255, .24),
    0 46px 110px rgba(0, 0, 0, .82);
}

.intro .title-mark p {
  color: rgba(226, 241, 249, .84);
  text-shadow: 0 16px 46px rgba(0, 0, 0, .72);
}

.intro .title-mark p:empty,
.intro .title-kicker:empty {
  display: none;
}

.intro .title-orbit {
  z-index: 5;
  width: min(68vw, 920px);
  opacity: .34;
  border-color: rgba(205, 247, 255, .18);
  box-shadow:
    0 0 110px rgba(107, 218, 255, .12),
    inset 0 0 120px rgba(107, 218, 255, .08);
}

.intro .title-orbit span {
  opacity: .72;
}

body:has(.intro.is-active) .atmosphere {
  opacity: .18;
}

@media (max-width: 760px) {
  .flyover-scene {
    inset: -10%;
  }

  .intro .title-mark {
    width: min(94vw, 560px);
    padding-inline: 12px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .intro .title-mark h1 {
    font-size: clamp(58px, 20vw, 92px);
    letter-spacing: -.08em;
  }

  .intro .title-mark p {
    max-width: 300px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flyover-scene {
    animation: none !important;
    opacity: 0;
    transform: none;
  }

  .scene-glacier {
    opacity: 1;
  }
}

/* Final polish: realistic computer anchor, meaningful UI objects, and dark example frame. */
.monitor {
  width: min(590px, 42vw);
  height: 430px;
}

.monitor-panel {
  overflow: visible;
  border-color: rgba(164, 223, 245, .24);
  background: linear-gradient(145deg, #162130, #07111c 64%, #04070c);
  box-shadow:
    0 58px 150px rgba(0, 0, 0, .68),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.monitor-screen {
  position: relative;
  height: 300px;
  overflow: visible;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .2)),
    url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=82") center/cover;
  border-radius: 0 0 24px 24px;
}

.monitor-screen:before {
  inset: 24px;
  border-color: rgba(255, 255, 255, .34);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(10, 19, 30, .84), rgba(10, 19, 30, .38) 52%, rgba(255, 255, 255, .14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 24px 70px rgba(0, 0, 0, .24);
}

.monitor-screen:after {
  right: -18px;
  top: 48px;
  width: 118px;
  height: 112px;
  border: 1px solid rgba(179, 239, 255, .52);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(9, 21, 34, .86), rgba(9, 21, 34, .86)) 24px 28px/58px 9px no-repeat,
    linear-gradient(90deg, rgba(126, 230, 255, .82), rgba(196, 250, 255, .92)) 24px 54px/70px 9px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .24)) 24px 78px/52px 7px no-repeat,
    linear-gradient(145deg, rgba(226, 252, 255, .94), rgba(88, 215, 255, .84));
  box-shadow: 0 28px 80px rgba(91, 222, 255, .26);
  animation: computerPopFloat 6s ease-in-out infinite;
}

.monitor-screen span {
  position: absolute;
  display: block;
  margin: 0;
  border-radius: 24px;
  transform-style: preserve-3d;
}

.monitor-hero-browser {
  left: 118px;
  top: 72px;
  z-index: 2;
  width: 275px;
  height: 122px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)) 24px 82px/222px 11px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)) 24px 104px/190px 9px no-repeat,
    linear-gradient(135deg, rgba(4, 11, 18, .9), rgba(9, 25, 38, .78));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  animation: computerPopFloat 6.8s ease-in-out infinite;
}

.monitor-hero-browser:before {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 122px;
  height: 36px;
  border-radius: 999px;
  content: "";
  background: rgba(255, 255, 255, .12);
  box-shadow: 144px 2px 0 -12px rgba(121, 226, 255, .82);
}

.monitor-float-photo {
  left: -18px;
  top: 66px;
  z-index: 8;
  width: 184px;
  height: 146px;
  border: 1px solid rgba(255, 255, 255, .3);
  background:
    linear-gradient(180deg, rgba(5, 9, 14, .08), rgba(5, 9, 14, .18)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=700&q=82") center/cover;
  box-shadow:
    0 42px 96px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: translate3d(-34px, -8px, 120px) rotate(-9deg);
  animation: computerPhotoFloat 7.4s ease-in-out infinite;
}

.monitor-float-checkout {
  right: -22px;
  bottom: -54px;
  z-index: 9;
  width: 198px;
  height: 132px;
  border: 1px solid rgba(255, 255, 255, .26);
  background:
    linear-gradient(90deg, rgba(9, 22, 34, .86), rgba(9, 22, 34, .86)) 24px 26px/98px 12px no-repeat,
    linear-gradient(90deg, rgba(76, 213, 255, .96), rgba(196, 250, 255, .96)) 24px 58px/118px 16px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .28)) 24px 90px/72px 8px no-repeat,
    url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=700&q=80") center/cover;
  box-shadow:
    0 46px 104px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: translate3d(28px, 10px, 128px) rotate(8deg);
  animation: computerCheckoutFloat 7.2s ease-in-out infinite;
}

.monitor-float-lines {
  left: 154px;
  bottom: 50px;
  z-index: 6;
  width: 265px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .58)) 20px 14px/218px 8px no-repeat,
    linear-gradient(90deg, rgba(180, 243, 255, .7), rgba(255, 255, 255, .34)) 20px 28px/188px 6px no-repeat,
    rgba(255, 255, 255, .16);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
  transform: translate3d(0, 0, 110px);
  animation: computerLineFloat 6.4s ease-in-out infinite;
}

@keyframes computerPopFloat {
  50% { transform: translate3d(0, -9px, 32px); }
}

@keyframes computerPhotoFloat {
  50% { transform: translate3d(-48px, -22px, 146px) rotate(-5deg); }
}

@keyframes computerCheckoutFloat {
  50% { transform: translate3d(44px, -4px, 152px) rotate(5deg); }
}

@keyframes computerLineFloat {
  50% { transform: translate3d(8px, -8px, 118px); }
}

.components .component {
  border-color: rgba(166, 229, 255, .26);
  background: linear-gradient(145deg, rgba(23, 39, 56, .84), rgba(11, 20, 33, .58));
  box-shadow:
    0 34px 95px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.components .component:before {
  display: none;
}

.components .component:after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.components .card-one {
  width: 220px;
  height: 145px;
  background:
    linear-gradient(180deg, rgba(5, 10, 18, .08), rgba(5, 10, 18, .4)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=700&q=80") center/cover;
}

.components .card-one:after {
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 40px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .56)) 14px 12px/120px 7px no-repeat,
    linear-gradient(90deg, rgba(127, 226, 255, .74), rgba(255, 255, 255, .34)) 14px 26px/86px 5px no-repeat,
    rgba(7, 16, 27, .74);
}

.components .card-two {
  width: 176px;
  height: 218px;
  background:
    linear-gradient(90deg, rgba(129, 229, 255, .9), rgba(214, 251, 255, .92)) 24px 34px/84px 12px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18)) 24px 70px/116px 8px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .16)) 24px 96px/96px 8px no-repeat,
    linear-gradient(145deg, rgba(22, 40, 58, .9), rgba(8, 17, 29, .72));
}

.components .card-two:after {
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 50px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 76% 50%, rgba(190, 248, 255, .9) 0 10px, transparent 11px),
    linear-gradient(90deg, rgba(4, 13, 22, .72), rgba(4, 13, 22, .72)) 15px 18px/62px 9px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
}

.components .card-three {
  width: 260px;
  height: 94px;
  background:
    linear-gradient(90deg, rgba(139, 230, 255, .92), rgba(139, 230, 255, .92)) 22px 20px/42px 42px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .28)) 82px 24px/130px 8px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .18)) 82px 48px/96px 7px no-repeat,
    linear-gradient(145deg, rgba(20, 36, 54, .9), rgba(8, 17, 29, .72));
}

.components .card-three:after {
  left: 33px;
  top: 30px;
  width: 20px;
  height: 16px;
  border: 2px solid rgba(5, 17, 28, .72);
  border-top-width: 5px;
  border-radius: 5px;
}

.components .chip {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(5, 18, 28, .28) 1px, transparent 1px),
    linear-gradient(rgba(5, 18, 28, .28) 1px, transparent 1px),
    linear-gradient(145deg, #eafcff, #65dcff);
  background-size: 12px 12px, 12px 12px, 100% 100%;
}

.components .chip:before {
  display: block;
  inset: 22px;
  border: 2px solid rgba(5, 18, 28, .24);
  border-radius: 12px;
  background: transparent;
}

.example-carousel {
  border: 1px solid rgba(132, 209, 239, .24);
  background:
    radial-gradient(circle at 70% 10%, rgba(60, 140, 188, .26), transparent 32%),
    linear-gradient(145deg, rgba(12, 26, 43, .96), rgba(4, 10, 18, .94));
  box-shadow:
    0 48px 130px rgba(0, 0, 0, .56),
    inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.carousel-window {
  border: 1px solid rgba(126, 202, 233, .28);
  background: #07111d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.example-card {
  border-color: rgba(126, 202, 233, .24);
  background: #091522;
}

.example-browser {
  background: linear-gradient(180deg, #101f31, #07111d);
}

.example-topbar {
  background: rgba(9, 20, 33, .88);
  border: 1px solid rgba(126, 202, 233, .18);
  border-bottom: 0;
}

.example-topbar p {
  color: #b8c9d9;
}

.example-copy {
  display: none;
}

.hero .chapter-card.hero-card {
  display: none;
}

.monitor-hero-browser {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
    linear-gradient(90deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)),
    linear-gradient(135deg, rgba(4, 11, 18, .92), rgba(9, 25, 38, .78)) !important;
  background-position: 24px 82px, 24px 104px, 0 0 !important;
  background-size: 222px 11px, 190px 9px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

.monitor-float-photo {
  background-image:
    linear-gradient(180deg, rgba(5, 9, 14, .04), rgba(5, 9, 14, .18)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=700&q=82") !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
}

.monitor-float-checkout {
  background-image:
    linear-gradient(90deg, rgba(9, 22, 34, .9), rgba(9, 22, 34, .9)),
    linear-gradient(90deg, rgba(76, 213, 255, .96), rgba(196, 250, 255, .96)),
    linear-gradient(90deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .32)),
    url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=700&q=80") !important;
  background-position: 24px 26px, 24px 58px, 24px 90px, center !important;
  background-size: 98px 12px, 118px 16px, 72px 8px, cover !important;
  background-repeat: no-repeat !important;
}

.monitor-float-lines {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .58)),
    linear-gradient(90deg, rgba(180, 243, 255, .7), rgba(255, 255, 255, .34)),
    linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
  background-position: 20px 14px, 20px 28px, 0 0 !important;
  background-size: 218px 8px, 188px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* Premium online-home section layout and floating isometric house motion. */
.work {
  grid-template-columns: minmax(360px, .8fr) minmax(420px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: center;
  row-gap: clamp(26px, 4vh, 44px);
}

.work .scene-copy {
  align-self: center;
  max-width: 700px;
}

.work .feature-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-self: end;
  max-width: min(1320px, calc(100vw - 170px));
  margin: 0 auto;
}

.work .glass-card {
  min-height: 190px;
  padding: clamp(22px, 2vw, 28px);
}

.work .glass-card svg {
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
}

.blueprint {
  overflow: visible;
}

.blueprint > i {
  opacity: .3;
}

.floating-house {
  position: absolute;
  left: 54%;
  top: 38%;
  z-index: 4;
  width: min(360px, 25vw);
  aspect-ratio: 1.18;
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(-50%, calc(-50% + 30px), 80px) scale(.95);
  transform-origin: 50% 58%;
  will-change: transform, opacity;
}

.floating-house img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 56px rgba(0, 0, 0, .42))
    saturate(1.06)
    contrast(1.03);
  transform: translate3d(0, 0, 0) rotate(-.35deg) scale(1);
  transform-origin: 50% 58%;
  will-change: transform;
}

.floating-house-shadow {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 5%;
  z-index: 1;
  height: 18%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .44), rgba(0, 0, 0, .16) 46%, transparent 72%);
  filter: blur(16px);
  opacity: .45;
  transform: translate3d(0, 16px, -1px) scaleX(1);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.deck[data-camera="blueprint"] .floating-house {
  animation: houseReveal .95s cubic-bezier(.16, 1, .3, 1) both;
}

.deck[data-camera="blueprint"] .floating-house img {
  animation: houseFloat 8.6s ease-in-out .95s infinite;
}

.deck[data-camera="blueprint"] .floating-house-shadow {
  animation: houseShadowFloat 8.6s ease-in-out .95s infinite;
}

.floating-house:hover img {
  animation-play-state: paused;
  transform: translate3d(0, -18px, 0) rotate(.5deg) scale(1.02);
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
}

.floating-house:hover .floating-house-shadow {
  animation-play-state: paused;
  opacity: .32;
  filter: blur(22px);
  transform: translate3d(0, 20px, -1px) scaleX(.9);
  transition:
    transform 300ms cubic-bezier(.16, 1, .3, 1),
    opacity 300ms ease,
    filter 300ms ease;
}

@keyframes houseReveal {
  0% {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% + 30px), 80px) scale(.95);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 80px) scale(1);
  }
}

@keyframes houseFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-.45deg) scale(1);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(.65deg) scale(1.01);
  }
}

@keyframes houseShadowFloat {
  0%, 100% {
    opacity: .46;
    filter: blur(14px);
    transform: translate3d(0, 16px, -1px) scaleX(1);
  }
  50% {
    opacity: .28;
    filter: blur(22px);
    transform: translate3d(0, 20px, -1px) scaleX(.88);
  }
}

@media (max-width: 1060px) {
  .work {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .work .feature-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .floating-house {
    width: min(330px, 48vw);
    top: 37%;
  }
}

@media (max-width: 760px) {
  .work .feature-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .work .glass-card {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck[data-camera="blueprint"] .floating-house {
    animation: houseRevealReduced .55s ease both;
  }

  .deck[data-camera="blueprint"] .floating-house img,
  .deck[data-camera="blueprint"] .floating-house-shadow {
    animation: none !important;
  }

  .floating-house:hover img,
  .floating-house:hover .floating-house-shadow {
    transform: none;
    transition: none;
  }
}

@keyframes houseRevealReduced {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Online-home chapter correction: horizontal tiles plus a self-contained 3D home icon. */
.work .feature-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  width: min(1320px, calc(100vw - 180px));
  max-width: none !important;
  margin: 0 auto !important;
}

.work .glass-card {
  min-width: 0;
  min-height: 190px;
}

.deck[data-camera="blueprint"] .blueprint {
  z-index: 2;
  width: min(520px, 35vw);
  height: min(390px, 30vw);
  border-color: rgba(143, 233, 255, .2);
  background:
    linear-gradient(rgba(143, 233, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 233, 255, .12) 1px, transparent 1px),
    rgba(8, 16, 28, .28);
  background-size: 34px 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 100px rgba(0, 0, 0, .2);
}

.floating-house {
  left: 52%;
  top: 43%;
  z-index: 12;
  width: min(360px, 25vw);
  aspect-ratio: 1.18;
  isolation: isolate;
  perspective: 900px;
}

.floating-house img {
  display: none !important;
}

.floating-house span:not(.floating-house-shadow) {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

.home-icon-base {
  left: 14%;
  right: 8%;
  bottom: 17%;
  height: 30%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(233, 214, 173, .95), rgba(132, 104, 70, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 34px 70px rgba(0, 0, 0, .34);
  transform: rotateX(58deg) rotateZ(-23deg) skewX(-9deg);
}

.home-icon-browser {
  left: 4%;
  right: 4%;
  top: 3%;
  height: 78%;
  border: 1px solid rgba(176, 236, 255, .22);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(151, 230, 255, .24), rgba(255, 255, 255, .08)) 42px 42px / 72% 12px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) 42px 72px / 58% 9px no-repeat,
    linear-gradient(145deg, rgba(23, 44, 63, .62), rgba(8, 19, 33, .34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 28px 90px rgba(0, 0, 0, .24);
  transform: rotateX(58deg) rotateZ(-8deg) translate3d(8px, -26px, -30px);
}

.home-icon-roof {
  left: 27%;
  top: 21%;
  width: 48%;
  height: 31%;
  clip-path: polygon(50% 0, 100% 72%, 82% 100%, 50% 42%, 18% 100%, 0 72%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 205, 126, .38) 0 7px, transparent 7px 15px),
    linear-gradient(145deg, #d27a48, #7b2f25 68%, #421b18);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .28));
  transform: rotateZ(-12deg) skewX(-10deg);
}

.home-icon-body {
  left: 31%;
  top: 40%;
  width: 42%;
  height: 34%;
  border-radius: 12px 12px 18px 18px;
  background:
    linear-gradient(90deg, rgba(71, 120, 76, .9), rgba(71, 120, 76, .9)) 0 0 / 32% 100% no-repeat,
    linear-gradient(135deg, #f3d39a, #a66845 78%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 20px 40px rgba(0, 0, 0, .24);
  transform: rotateZ(-12deg) skewX(-10deg);
}

.home-icon-door {
  left: 42%;
  top: 55%;
  width: 12%;
  height: 21%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #674133, #2a1d1b);
  box-shadow: inset 0 0 0 2px rgba(238, 185, 118, .74);
  transform: rotateZ(-12deg) skewX(-10deg);
}

.home-icon-window {
  width: 12%;
  height: 12%;
  border-radius: 6px;
  background: linear-gradient(135deg, #f8fdff, #8fdfff);
  box-shadow: inset 0 0 0 3px rgba(244, 205, 137, .8), 0 0 24px rgba(122, 224, 255, .2);
  transform: rotateZ(-12deg) skewX(-10deg);
}

.home-icon-window-one {
  left: 56%;
  top: 48%;
}

.home-icon-window-two {
  left: 63%;
  top: 61%;
}

.home-icon-tree {
  width: 18%;
  height: 30%;
  border-radius: 999px 999px 24px 24px;
  background:
    radial-gradient(circle at 50% 24%, #74b75f 0 28%, transparent 29%),
    linear-gradient(180deg, #3f7b41, #17371f);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .28));
}

.home-icon-tree-one {
  right: 9%;
  top: 35%;
  transform: rotateZ(8deg);
}

.home-icon-tree-two {
  left: 20%;
  top: 45%;
  width: 13%;
  height: 22%;
  transform: rotateZ(-10deg);
}

.floating-house-shadow {
  left: 20%;
  right: 14%;
  bottom: 8%;
  z-index: -1;
  height: 15%;
}

.deck[data-camera="blueprint"] .floating-house {
  animation: houseReveal .9s cubic-bezier(.16, 1, .3, 1) both;
}

.deck[data-camera="blueprint"] .floating-house > span:not(.floating-house-shadow) {
  animation: homeIconFloat 8.4s ease-in-out .9s infinite;
}

.deck[data-camera="blueprint"] .floating-house-shadow {
  animation: houseShadowFloat 8.4s ease-in-out .9s infinite;
}

.floating-house:hover > span:not(.floating-house-shadow) {
  animation-play-state: paused;
  translate: 0 -18px;
  scale: 1.02;
  rotate: .5deg;
  transition:
    translate 300ms cubic-bezier(.16, 1, .3, 1),
    scale 300ms cubic-bezier(.16, 1, .3, 1),
    rotate 300ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes homeIconFloat {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    rotate: -.4deg;
  }
  50% {
    translate: 0 -14px;
    scale: 1.01;
    rotate: .6deg;
  }
}

@media (max-width: 1060px) {
  .work .feature-grid {
    width: calc(100vw - 48px);
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .floating-house {
    width: min(310px, 42vw);
    top: 39%;
  }
}

@media (max-width: 760px) {
  .work .feature-grid {
    width: auto;
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck[data-camera="blueprint"] .floating-house > span:not(.floating-house-shadow) {
    animation: none !important;
  }
}

/* Realistic icon refinement: replace cartoon home with a premium live-website object. */
.deck[data-camera="blueprint"] .blueprint {
  background:
    linear-gradient(rgba(143, 233, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 233, 255, .1) 1px, transparent 1px),
    radial-gradient(circle at 52% 45%, rgba(89, 207, 255, .1), transparent 38%),
    rgba(8, 16, 28, .2);
}

.floating-house {
  width: min(430px, 30vw);
  top: 42%;
  left: 54%;
}

.home-icon-browser {
  left: 2%;
  right: 2%;
  top: 4%;
  height: 76%;
  overflow: hidden;
  border: 1px solid rgba(185, 238, 255, .34);
  border-radius: 28px;
  background-image:
    linear-gradient(180deg, rgba(12, 24, 38, .78), rgba(12, 24, 38, .08) 22%, rgba(12, 24, 38, .18)),
    url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=84");
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 36px 90px rgba(0, 0, 0, .44);
  transform: rotateX(58deg) rotateZ(-8deg) translate3d(0, -24px, 12px);
}

.home-icon-browser:before {
  position: absolute;
  inset: 0 0 auto;
  height: 42px;
  content: "";
  background:
    radial-gradient(circle, #dfe7ef 0 4px, transparent 5px) 18px 18px / 18px 18px no-repeat,
    radial-gradient(circle, #93a4b5 0 4px, transparent 5px) 42px 18px / 18px 18px no-repeat,
    radial-gradient(circle, #93a4b5 0 4px, transparent 5px) 66px 18px / 18px 18px no-repeat,
    linear-gradient(90deg, rgba(217, 236, 246, .86), rgba(217, 236, 246, .5)) center / 150px 9px no-repeat,
    rgba(7, 16, 28, .9);
}

.home-icon-browser:after {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .64)) 18px 16px / 158px 9px no-repeat,
    linear-gradient(90deg, rgba(129, 226, 255, .86), rgba(255, 255, 255, .42)) 18px 36px / 110px 8px no-repeat,
    linear-gradient(135deg, rgba(4, 13, 22, .78), rgba(4, 13, 22, .34));
  backdrop-filter: blur(10px);
}

.home-icon-roof {
  left: 58%;
  top: 29%;
  width: 34%;
  height: 17%;
  clip-path: none;
  border: 1px solid rgba(182, 240, 255, .28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 50%, rgba(136, 232, 255, .95) 0 9px, transparent 10px),
    linear-gradient(90deg, rgba(4, 13, 22, .86), rgba(4, 13, 22, .58));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .32);
  transform: rotateZ(-8deg) translate3d(0, 0, 80px);
}

.home-icon-body {
  left: 4%;
  top: 42%;
  width: 34%;
  height: 31%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(4, 13, 22, .08), rgba(4, 13, 22, .24)),
    url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=700&q=82") center / cover;
  box-shadow: 0 34px 78px rgba(0, 0, 0, .4);
  transform: rotateZ(-12deg) translate3d(-20px, 0, 95px);
}

.home-icon-door {
  left: 39%;
  top: 66%;
  width: 35%;
  height: 12%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(136, 232, 255, .95), rgba(213, 251, 255, .92));
  box-shadow: 0 24px 60px rgba(71, 218, 255, .22);
  transform: rotateZ(-8deg) translate3d(0, 0, 100px);
}

.home-icon-window {
  width: 23%;
  height: 18%;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .35)) 16px 18px / 70% 7px no-repeat,
    linear-gradient(90deg, rgba(149, 231, 255, .78), rgba(255, 255, 255, .26)) 16px 36px / 52% 6px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  transform: rotateZ(-8deg) translate3d(0, 0, 110px);
}

.home-icon-window-one {
  left: 61%;
  top: 52%;
}

.home-icon-window-two {
  left: 51%;
  top: 75%;
  width: 30%;
  height: 13%;
}

.home-icon-base {
  left: 12%;
  right: 8%;
  bottom: 16%;
  height: 21%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(214, 233, 241, .72), rgba(60, 90, 106, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 32px 76px rgba(0, 0, 0, .3);
  transform: rotateX(58deg) rotateZ(-18deg) skewX(-8deg);
}

.home-icon-tree {
  display: none !important;
}

.floating-house-shadow {
  bottom: 6%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 42%, transparent 72%);
}

/* Workstation icon refinement: replace stray filler bars with purposeful UI panels. */
.monitor-float-photo {
  left: -22px;
  top: 92px;
  width: 142px;
  height: 54px;
  border-radius: 999px;
  background-image:
    radial-gradient(circle at 24px 50%, rgba(137, 230, 255, .95) 0 8px, transparent 9px),
    linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)),
    linear-gradient(135deg, rgba(8, 20, 33, .86), rgba(8, 20, 33, .56)) !important;
  background-position: 0 0, 46px 20px, 0 0 !important;
  background-size: 100% 100%, 68px 8px, 100% 100% !important;
  background-repeat: no-repeat !important;
  transform: translate3d(-48px, -8px, 120px) rotate(-3deg);
}

.monitor-float-photo:before {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 8px;
  border-radius: 999px;
  content: "";
  background: rgba(135, 229, 255, .62);
}

.monitor-float-lines {
  left: auto;
  right: -20px;
  bottom: -18px;
  width: 230px;
  height: 92px;
  border-radius: 24px;
  background-image:
    radial-gradient(circle at 30px 28px, rgba(136, 232, 255, .95) 0 10px, transparent 11px),
    linear-gradient(90deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .54)),
    linear-gradient(90deg, rgba(137, 230, 255, .82), rgba(255, 255, 255, .28)),
    linear-gradient(135deg, rgba(6, 17, 30, .86), rgba(255, 255, 255, .14)) !important;
  background-position: 0 0, 56px 24px, 56px 52px, 0 0 !important;
  background-size: 100% 100%, 124px 9px, 90px 8px, 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 30px 84px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translate3d(30px, 8px, 118px) rotate(7deg);
}

.monitor-float-lines:before {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 64px;
  height: 26px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, rgba(131, 230, 255, .96), rgba(211, 251, 255, .92));
}

.monitor-float-lines:after {
  position: absolute;
  left: 58px;
  bottom: 21px;
  width: 74px;
  height: 7px;
  border-radius: 999px;
  content: "";
  background: rgba(255, 255, 255, .34);
}

/* Requested section pass: navbar on title, placed 3D icons, cleaner workstation, and removed-launch flow. */
body:has(.intro.is-active) .site-header {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.deck[data-camera="wide"] .monitor-float-photo,
.deck[data-camera="wide"] .monitor-float-lines,
.deck[data-camera="wide"] .monitor-float-checkout {
  display: none !important;
}

.floating-3d-icon {
  position: absolute;
  z-index: 8;
  width: clamp(96px, 10vw, 168px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 34px 52px rgba(0, 0, 0, .38));
  transform-origin: 50% 62%;
  translate: 0 0;
  rotate: -1.5deg;
  scale: 1;
  animation: premiumIconRock 7.8s ease-in-out infinite;
  will-change: translate, rotate, scale;
}

.rocket-icon {
  right: max(130px, 18vw);
  top: 10%;
  width: clamp(106px, 10vw, 158px);
  rotate: 7deg;
  animation-duration: 8.2s;
}

.shield-icon {
  right: max(118px, 12vw);
  top: 20%;
  width: clamp(104px, 8.8vw, 150px);
  animation-duration: 8.9s;
}

.chat-icon {
  left: clamp(560px, 41vw, 760px);
  top: 68%;
  width: clamp(112px, 9.6vw, 166px);
  animation-duration: 8.4s;
}

@keyframes premiumIconRock {
  0%, 100% {
    translate: 0 0;
    rotate: -1.5deg;
    scale: 1;
  }
  50% {
    translate: 0 -10px;
    rotate: 2deg;
    scale: 1.012;
  }
}

.deck[data-camera="blueprint"] .blueprint {
  transform: translate3d(-13vw, -91%, 0) rotateX(18deg) rotateZ(-8deg) !important;
}

.work .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  .floating-3d-icon {
    opacity: .34;
    right: 18px;
    width: 104px;
  }

  .work .scene-copy {
    margin-top: 0;
  }

  body:has(.intro.is-active) .site-header {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-3d-icon {
    animation: none !important;
  }
}

/* Scroll responsiveness pass: keep fixed chapters compositor-friendly. */
.scene,
.scene.is-active,
.story-stage .anchor {
  will-change: opacity, transform;
}

/* Section 02 workstation upgrade: clearer brand/build screen with meaningful satellite previews. */
.deck[data-camera="wide"] .monitor {
  width: min(620px, 45vw);
  height: 430px;
  right: 6vw;
}

.deck[data-camera="wide"] .monitor-panel {
  overflow: visible;
  border-color: rgba(190, 244, 255, .28);
  box-shadow: 0 58px 150px rgba(0, 0, 0, .62), 0 0 80px rgba(76, 206, 255, .12);
}

.deck[data-camera="wide"] .monitor-screen {
  position: relative;
  height: 315px;
  overflow: visible;
  padding: 0;
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(115deg, rgba(5, 12, 20, .1), rgba(5, 12, 20, .12)),
    url("assets/reimagine-illustrations/website-screen.png") center/cover no-repeat,
    linear-gradient(145deg, #dff8ff, #7ce7ff 42%, #172435);
}

.deck[data-camera="wide"] .monitor-screen:before {
  position: absolute;
  inset: 28px 34px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  content: "";
  background:
    linear-gradient(90deg, rgba(8, 17, 27, .9) 0 44%, rgba(255, 255, 255, .2) 44% 100%),
    radial-gradient(circle at 79% 28%, rgba(134, 235, 255, .45), transparent 22%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.deck[data-camera="wide"] .monitor-screen:after {
  position: absolute;
  right: 42px;
  top: 38px;
  z-index: 2;
  width: 128px;
  height: 78px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 20px;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 14px, rgba(169, 240, 255, .78) 14px 20px, transparent 20px 34px, rgba(169, 240, 255, .72) 34px 40px, transparent 40px 54px, rgba(169, 240, 255, .62) 54px 60px, transparent 60px),
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(133, 231, 255, .58));
  background-position: 30px 36px, 0 0;
  background-size: 74px 26px, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 22px 50px rgba(76, 219, 255, .2);
}

.deck[data-camera="wide"] .monitor-screen span {
  position: absolute;
  z-index: 4;
  display: block !important;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  background-repeat: no-repeat;
  box-shadow: 0 28px 78px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
}

.deck[data-camera="wide"] .monitor-hero-browser {
  left: 56px;
  top: 70px;
  width: 210px !important;
  height: 112px !important;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)) 24px 26px/110px 12px,
    linear-gradient(90deg, #8cecff, #fff) 24px 52px/150px 10px,
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 24px 78px/82px 9px,
    linear-gradient(145deg, rgba(7, 18, 30, .88), rgba(18, 58, 78, .72));
  transform: translate3d(-34px, -18px, 92px) rotate(-8deg);
}

.deck[data-camera="wide"] .monitor-float-photo {
  left: auto;
  right: 238px;
  top: 154px;
  width: 148px;
  height: 110px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(7, 13, 22, .28)),
    url("assets/retail/model-heavy-black-tee.png") center/cover no-repeat;
  transform: translate3d(-18px, 10px, 126px) rotate(5deg);
}

.deck[data-camera="wide"] .monitor-float-checkout {
  left: auto;
  right: 14px;
  bottom: 28px;
  width: 176px;
  height: 104px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) 20px 22px/62px 10px,
    linear-gradient(90deg, rgba(138, 234, 255, .94), rgba(255, 255, 255, .86)) 20px 50px/104px 12px,
    linear-gradient(rgba(255, 255, 255, .46), rgba(255, 255, 255, .46)) 20px 76px/58px 8px,
    linear-gradient(145deg, rgba(8, 18, 30, .88), rgba(48, 93, 106, .74));
  background-repeat: no-repeat;
  transform: translate3d(42px, 12px, 132px) rotate(-7deg);
}

.deck[data-camera="wide"] .monitor-float-lines {
  left: 190px;
  right: auto;
  bottom: -32px;
  width: 150px;
  height: 84px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 110px 24px, rgba(255, 255, 255, .98) 0 13px, transparent 14px),
    linear-gradient(180deg, #dffaff 0 10px, transparent 11px) 34px 50px/16px 28px,
    linear-gradient(180deg, #8eeeff 0 22px, transparent 23px) 62px 38px/16px 40px,
    linear-gradient(180deg, #fff 0 34px, transparent 35px) 90px 26px/16px 52px,
    linear-gradient(145deg, rgba(255, 255, 255, .3), rgba(122, 227, 255, .12));
  background-repeat: no-repeat;
  transform: translate3d(6px, 18px, 142px) rotate(3deg);
}

.deck[data-camera="wide"] .monitor-float-lines:before,
.deck[data-camera="wide"] .monitor-float-lines:after,
.deck[data-camera="wide"] .monitor-float-photo:before {
  display: none;
}

.deck[data-camera="wide"] .monitor-top {
  position: relative;
  z-index: 5;
  color: #f4fbff;
  background: linear-gradient(180deg, rgba(17, 29, 43, .98), rgba(11, 17, 26, .96));
}

.monitor-screen:before,
.monitor-screen:after {
  display: none !important;
  content: none !important;
}

.floating-3d-icon {
  animation-name: premiumIconRockAlive;
}

@keyframes premiumIconRockAlive {
  0%, 100% {
    translate: 0 0;
    rotate: -2.4deg;
    scale: 1;
  }
  35% {
    translate: 0 -7px;
    rotate: 2.8deg;
    scale: 1.008;
  }
  68% {
    translate: 0 -12px;
    rotate: -1deg;
    scale: 1.014;
  }
}

/* Section 02 workstation refit: make the reference image the hero object. */
.deck[data-camera="wide"] .monitor {
  width: min(720px, 50vw);
  height: auto;
  right: 4vw;
  transform: translate3d(0, -46%, 0) rotateX(6deg) rotateY(-10deg);
}

.deck[data-camera="wide"] .monitor-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.deck[data-camera="wide"] .monitor-screen {
  position: relative;
  height: auto;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.deck[data-camera="wide"] .monitor-artwork {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 24px;
  filter: drop-shadow(0 42px 90px rgba(0, 0, 0, .38)) saturate(.98) contrast(1.03) brightness(.99);
  animation: workstationFloat 8.8s ease-in-out infinite;
}

.deck[data-camera="wide"] .monitor-top,
.deck[data-camera="wide"] .monitor-base {
  display: none;
}

.monitor-screen:before,
.monitor-screen:after {
  display: none !important;
  content: none !important;
}

@keyframes workstationFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(1deg) scale(1.01);
  }
}

/* ═══════════════════════════════════════════
   HERO MONITOR  –  clean version (no icons)
   Dark bezel · URL bar · photo screen
   floating sub-card · orb · neck + stand
═══════════════════════════════════════════ */

.hero-monitor-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  animation: hmFloat 7s ease-in-out infinite;

  left: 50px;
}

@keyframes hmFloat {
  0%,100% { transform: translateY(0) rotateX(3deg) rotateY(-4deg); }
  50%      { transform: translateY(-12px) rotateX(2deg) rotateY(-3deg); }
}

/* monitor outer shell */
.hm-monitor {
  position: relative;
  width: 110%;
  max-width: 1050px;

  transform: scale(1.05);

  border-radius: 14px;
  background: #0d1520;
  border: 2px solid rgba(255,255,255,.13);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 40px 100px rgba(0,0,0,.72),
    0 8px 24px rgba(0,0,0,.5);
  overflow: visible;
}

/* bezel inner */
.hm-bezel {
  overflow: hidden;
  border-radius: 12px;
  background: #0d1520;
}

/* URL / chrome bar */
.hm-urlbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: #141e2e;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.hm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hm-dot-r { background: #ff5f57; }
.hm-dot-y { background: #febc2e; }
.hm-dot-g { background: #28c840; }

.hm-urltext {
  flex: 1;
  height: 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
  margin: 0 8px;
}

/* screen photo */
.hm-screen {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: #111;
}

.hm-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .9;
}

/* horizontal content-line strips */
.hm-overlay-lines {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.hm-overlay-lines span {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.hm-overlay-lines span:first-child { width: 68%; }
.hm-overlay-lines span:last-child  { width: 44%; }

/* monitor neck */
.hm-neck {
  width: 34px;
  height: 20px;
  background: linear-gradient(180deg, #141e2e 0%, #090f18 100%);
  margin: 0 auto;
  clip-path: polygon(28% 0, 72% 0, 82% 100%, 18% 100%);
}

/* monitor stand */
.hm-stand {
  width: 130px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0c1118 0%, #1c2736 45%, #0c1118 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  margin: 0 auto;
}

/* hero two-column layout */
.scene.hero {
  grid-template-columns: minmax(0,1fr) minmax(0,.68fr);
  align-items: center;
  gap: 40px;
}

@media (max-width: 1060px) {
  .scene.hero { grid-template-columns: 1fr; }
  .hero-monitor-wrap { max-width: 360px; margin: 0 auto; left: 0; }
}
@media (max-width: 760px) {
  .hero-monitor-wrap { max-width: 220px; margin: 24px auto 0; left: 0; }
}

/* Zoom-stable 3D icon anchors.
   Keep the decorative icons tied to their slide instead of viewport math. */
.scene > .floating-3d-icon {
  position: absolute !important;
  z-index: 9;
  pointer-events: none;
  height: auto;
  transform-origin: 50% 62%;
  filter: drop-shadow(0 34px 52px rgba(0, 0, 0, .38));
  will-change: translate, rotate, scale;
}

.scene.work > .rocket-icon {
  left: 82.4% !important;
  right: auto !important;
  top: 13.8% !important;
  width: clamp(102px, 8.8vw, 154px) !important;
}

.scene.transformation > .shield-icon {
  left: 82.8% !important;
  right: auto !important;
  top: 13.8% !important;
  width: clamp(102px, 8vw, 148px) !important;
}

.scene.consult > .chat-icon {
  left: 82.5% !important;
  right: auto !important;
  top: 17.4% !important;
  width: clamp(112px, 8.8vw, 164px) !important;
}

@media (min-width: 1500px) {
  .scene.work > .rocket-icon,
  .scene.transformation > .shield-icon,
  .scene.consult > .chat-icon {
    left: calc(50% + 520px) !important;
  }
}

@media (max-width: 1060px) {
  .scene.work > .rocket-icon,
  .scene.transformation > .shield-icon,
  .scene.consult > .chat-icon {
    left: auto !important;
    right: 28px !important;
    top: 112px !important;
    width: 108px !important;
    opacity: .72;
  }
}

@media (max-width: 760px) {
  .scene.work > .rocket-icon,
  .scene.transformation > .shield-icon,
  .scene.consult > .chat-icon {
    right: 18px !important;
    top: 92px !important;
    width: 82px !important;
    opacity: .42;
  }
}

/* Container-locked icon pass.
   These rules intentionally anchor each 3D icon to the element it decorates,
   so browser zoom scales the icon and its target together instead of drifting. */
.hero-monitor-wrap,
.work .feature-grid,
.work-blueprint-wrap,
.transformation .metric-stack,
.consult .calendar-shell {
  position: relative !important;
  overflow: visible !important;
}

.hero-monitor-wrap > .floating-3d-icon,
.work-blueprint-wrap > .floating-3d-icon,
.transformation .metric-stack > .floating-3d-icon,
.consult .calendar-shell > .floating-3d-icon {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 12;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 62%;
  filter: drop-shadow(0 34px 52px rgba(0, 0, 0, .38));
  will-change: translate, rotate, scale;
}

.work-blueprint-wrap > .rocket-icon {
  top: -46px !important;
  right: -46px !important;
  width: clamp(96px, 16%, 140px) !important;
  rotate: -18deg;
}

.transformation .metric-stack > .shield-icon {
  top: -122px !important;
  right: -82px !important;
  width: clamp(104px, 18%, 150px) !important;
}

.consult .calendar-shell > .chat-icon {
  top: 510px !important;
  left: -320px !important;
  right: auto !important;
  width: clamp(126px, 24%, 174px) !important;
}

@media (max-width: 1060px) {
  .transformation .metric-stack > .shield-icon {
    top: -78px !important;
    right: 12px !important;
    width: 100px !important;
  }

  .work-blueprint-wrap > .rocket-icon {
    top: -34px !important;
    right: -30px !important;
    width: 92px !important;
  }

  .consult .calendar-shell > .chat-icon {
    top: 360px !important;
    left: -94px !important;
    right: auto !important;
    width: 112px !important;
  }
}

@media (max-width: 760px) {
  .work-blueprint-wrap > .rocket-icon,
  .transformation .metric-stack > .shield-icon,
  .consult .calendar-shell > .chat-icon {
    opacity: 1;
    width: 82px !important;
  }

  /* Small badges on phones, moved fully into the blank margin beside
     their target instead of overlapping it. */
  .transformation .metric-stack > .shield-icon {
    top: -8px !important;
    right: -10px !important;
    width: 54px !important;
  }

  .consult .calendar-shell > .chat-icon {
    top: -70px !important;
    left: auto !important;
    right: 69px !important;
    width: 48px !important;
  }
}

/* ── Pricing feature list cleanup (superseded by block above) ── */
.badge-most-requested{display:inline-block;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,rgba(165,239,255,.22),rgba(104,217,255,.18));border:1px solid rgba(120,220,255,.3);color:#a5efff;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:6px}
.plan-label{display:flex;align-items:center;gap:0}

/* ── Mobile responsiveness ── */
@media (max-width: 760px) {
  /* Smooth momentum scrolling on iOS for all scenes */
  .scene {
    -webkit-overflow-scrolling: touch;
    align-content: start;
    align-items: start;
  }

  /* Hero title stays vertically centered in its viewport-height section
     instead of inheriting the top-aligned rule above. */
  .intro {
    align-content: center;
    align-items: center;
  }

  /* Work scene: stack cards vertically — overrides bare 3-col rule at line 3780 */
  .work {
    align-content: start;
    row-gap: 24px;
  }

  .work .scene-copy {
    max-width: none;
  }

  .work .feature-grid {
    grid-template-columns: 1fr !important;
    width: auto !important;
    padding-bottom: 8px;
  }

  /* Transformation scene: start from top so metric cards are fully reachable */
  .scene.transformation {
    align-content: start;
  }

  .transformation .metric-stack {
    padding-bottom: 8px;
  }

  /* Pricing scene: start from top, tighten layout */
  .pricing {
    align-content: start;
  }

  .pricing .scene-copy {
    margin-bottom: 28px;
  }

  .pricing-grid {
    padding-bottom: 12px;
  }

  /* 3D icons stay visible on mobile (same container-locked treatment as
     desktop/tablet, see the sizing rules a few blocks up) instead of being
     hidden entirely. */

  /* Consult scene: let calendar shell fill width */
  .calendar-shell {
    padding: 10px;
    border-radius: 20px;
  }

  /* Hero: ensure CTA row wraps cleanly */
  .action-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-row .button {
    width: 100%;
    justify-content: center;
  }

  /* ── Section 05: Example carousel thumbnails ── */
  /* Reduce side padding so cards are wider on small screens */
  .example-carousel {
    padding: 20px 36px 24px;
    margin-top: 16px;
  }

  /* ── Section 05: scaled-down desktop previews (replaces `zoom`) ──
     The example websites keep their full desktop layout (no reflow).
     script.js wraps each .website-preview in an .embed-screen and applies
     a measured transform: scale() at a fixed reference width, so the whole
     design fits the phone proportionally. transform is GPU-composited and
     renders reliably on iOS Safari — unlike the previous `zoom` approach,
     which caused the partial, clipped, and laggy previews. The scale is
     computed from the live container width, so it adapts to every phone. */
  .embed-screen {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  .embed-screen > .website-preview {
    transform-origin: top left;
    transition: none !important;
    flex: none;
    max-width: none;
  }

  /* Carousel monitor hugs the scaled screen so it stays centered, no crop gap */
  .example-card .example-browser {
    height: auto;
    padding: 12px;
  }

  /* Full-screen modal: scaled desktop layout with native vertical scroll */
  .preview-dialog-body {
    padding: 8px;
  }

  .preview-dialog-body .example-browser {
    padding: 8px;
    border-radius: 14px;
    overflow: hidden;
    height: auto;
    min-height: 0;
  }
}

/* ── Mobile navigation: hamburger toggle + dropdown panel ── */
.nav-toggle {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: #edf7ff;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 25px; }

.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-mobile-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 49;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: rgba(8, 12, 18, .94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .28s;
}

.nav-mobile-panel a {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  color: #d9e6f5;
  font-weight: 800;
}

.nav-mobile-panel a:hover { background: rgba(255, 255, 255, .08); }

.nav-mobile-panel a.cta {
  justify-content: center;
  margin-top: 6px;
  color: #071019;
  background: rgba(255, 255, 255, .88);
}

@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .nav-mobile-panel { display: flex; }
  .site-header.nav-open .nav-mobile-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
}

/* ── Footer: solid, minimal, no glass ── */
.site-footer {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 40px max(24px, calc((100vw - 1320px) / 2)) 22px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: #071019;
  box-shadow: none;
  backdrop-filter: none;
}

.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-brand { min-height: auto; }

.footer-statement {
  max-width: 420px;
  margin: 0;
  color: #8daac2;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}

.site-footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0;
}

.footer-contact a {
  display: inline-block;
  margin-top: 4px;
  color: #d9e6f5;
  font-weight: 700;
}

.footer-contact a:hover { color: #9deaff; }

.footer-nav { display: flex; flex-direction: column; gap: 4px; }
.footer-nav a { padding: 2px 0; color: #bdcad8; font-size: 14px; }
.footer-nav a:hover { color: #fff; }

.site-footer-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #6f84a0;
  font-size: 12px;
}

@media (max-width: 760px) {
  .site-footer { margin: 0; padding: 28px 18px 18px; border-radius: 0; }
  .site-footer-top { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
  .footer-statement { max-width: none; text-align: left; }
  .site-footer-grid { flex-direction: column; gap: 20px; padding: 20px 0; }
}

/* ── Mobile density pass: sections no longer need to fill a full page,
   so trim vertical padding/gaps for a denser, less "one slide at a time"
   feel while keeping typography and spacing legible. ── */
@media (max-width: 760px) {
  .scene { padding: 68px 18px 32px; gap: 18px; }
  .examples.scene { padding: 68px 14px 32px; }
  .process { padding-top: 68px; }
  .action-row { margin-top: 20px; }
  .feature-grid { gap: 12px; }
  .metric-stack { gap: 12px; }
  .metric-stack article { padding: 18px; }
  .glass-card { padding: 20px; }
  h1 { font-size: clamp(40px, 13.5vw, 60px); margin-bottom: 16px; }
  h2 { font-size: clamp(30px, 10.5vw, 46px); margin-bottom: 14px; }
  .scene-copy p { font-size: 15px; }

  /* Slightly smaller text/button sizing across the board on phones —
     the clamp() minimums above were tuned for tablet, not phone width. */
  p.eyebrow, p.plan-label { font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; }
  h3 { font-size: 19px; }
  .button { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .price-card b { font-size: clamp(28px, 9vw, 40px); margin: 6px 0 14px; }
  .price-card { padding: 20px; min-height: 0; }
  .glass-card h3, .price-card h3, .timeline span { font-size: 19px; }
  .chapter-number, .step-num { width: 40px; height: 40px; }
}

/* ── Work section blueprint icon: lives in-flow with the section now
   instead of the fixed .story-stage layer, so it no longer fades in/out
   via data-camera as the user scrolls past — it just stays put and floats
   gently, the same way the hero's monitor mockup behaves. ── */
.work-blueprint-wrap {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  width: min(520px, 35vw);
  height: min(390px, 30vw);
  animation: workBlueprintFloat 6.5s ease-in-out infinite;
}

/* ── Section 03 column swap: copy moves to the right, the
   blueprint/house/rocket graphic moves to the left. ── */
@media (min-width: 1061px) {
  .work .scene-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .work-blueprint-wrap {
    grid-row: 1;
  }
}

.work-blueprint-wrap .anchor.blueprint {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transition: none !important;
  transform: rotateX(18deg) rotateZ(-8deg) !important;
  border-color: rgba(143, 233, 255, .2);
  background:
    linear-gradient(rgba(143, 233, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 233, 255, .1) 1px, transparent 1px),
    radial-gradient(circle at 52% 45%, rgba(89, 207, 255, .1), transparent 38%),
    rgba(8, 16, 28, .2) !important;
  background-size: 34px 34px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 100px rgba(0, 0, 0, .2) !important;
}

@keyframes workBlueprintFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}

.work-blueprint-wrap > .rocket-icon {
  animation: premiumIconRock 7.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .work-blueprint-wrap { animation: none; }
}

@media (max-width: 1060px) {
  .work-blueprint-wrap {
    grid-column: 1;
    justify-self: center;
    order: -1;
    margin: 0 auto 24px;
    width: min(420px, 70vw);
    height: min(310px, 52vw);
  }

  /* Keep the house graphic filling roughly the same share of its wrapper
     as it does on desktop (30vw of a 35vw-wide wrapper) — the wrapper's
     own vw-basis roughly doubles below this breakpoint, so double the
     house's vw-basis too instead of it shrinking relative to the frame. */
  .floating-house {
    width: min(360px, 60vw);
  }
}

/* ── Floating house fix: the house graphic used to fade in/out with
   .deck[data-camera="blueprint"] (an animation that only plays while that
   camera state is active), so scrolling just past the section's entry/exit
   threshold snapped it back to its hidden, pre-reveal transform. It now
   holds its revealed position and opacity permanently, independent of
   data-camera, while the internal float/shadow motion keeps looping. ── */
.work-blueprint-wrap .floating-house {
  opacity: 1 !important;
  transform: translate3d(-50%, -50%, 80px) scale(1) !important;
  animation: none !important;
}

.work-blueprint-wrap .floating-house > span:not(.floating-house-shadow) {
  animation: homeIconFloat 8.4s ease-in-out infinite !important;
}

.work-blueprint-wrap .floating-house-shadow {
  animation: houseShadowFloat 8.4s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .work-blueprint-wrap .floating-house > span:not(.floating-house-shadow),
  .work-blueprint-wrap .floating-house-shadow {
    animation: none !important;
  }
}

/* ── ReImagine logo: a single generated PNG (the R mark fused with
   "eImagine" set in the site's own Inter 700 headline font) used as the
   logo across the nav, hero title, and footer. ── */
.title-mark h1 {
  display: flex;
  justify-content: center;
}

.hero-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(77px, 16.9vw, 265px);
  filter: drop-shadow(0 0 34px rgba(128, 226, 255, .24)) drop-shadow(0 30px 70px rgba(0, 0, 0, .6));
}

@media (max-width: 760px) {
  .hero-logo {
    max-width: 100%;
    height: clamp(48px, 20.4vw, 85px);
  }
}