/* Layered browser mockups: native layout, automatic motion, no media downloads. */
body.homepage .websites-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  align-items: center;
  gap: clamp(25px,5vw,80px);
  padding: 90px 6% 85px;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: radial-gradient(ellipse at 80% 45%,#1b3e7726,transparent 58%),#05050675;
  overflow: clip;
}
.websites-copy { position: relative; z-index: 5; }
body.homepage .websites-kicker { color: var(--navy-radiant,#86aaf2); margin-bottom: 22px; text-shadow: 0 0 20px #2457bd55; }
body.homepage .websites-title { font:700 clamp(2.6rem,4.5vw,4.7rem)/1.07 Arial,Helvetica,sans-serif; letter-spacing:-.05em; margin:0 0 24px; color:#f5f5f6; }
body.homepage .websites-title em { color:var(--navy-radiant,#86aaf2); font-style:normal; text-shadow:0 0 30px #2457bd40; }
body.homepage .websites-intro { max-width:37ch; font-size:1.0625rem; line-height:1.7; color:var(--quiet,#b5b5bc); margin:0 0 25px; }
.websites-options { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.websites-options span { border:1px solid #7598df40; background:#18315c40; padding:8px 12px; border-radius:999px; color:#abc5fc; font-size:.8125rem; line-height:1.4; }
body.homepage .websites-banner .website-contact { gap:28px; background:linear-gradient(110deg,#4266a7,#bdd0f2 27%,#f6f7f9 52%,#c4cad5 77%,#5273af); color:#101b2f; border:1px solid #c4d6f9a6; border-radius:999px; font-weight:600; letter-spacing:0; box-shadow:inset 0 1px 0 #ffffffd9,0 8px 30px #1d4da044,0 0 38px #5b86d92b; }
body.homepage .websites-banner .website-contact:hover { box-shadow:inset 0 1px 0 #fff,0 10px 38px #3166c870,0 0 65px #6e9af03b; }
body.homepage .websites-formats { color:#9298a8; font-size:.75rem; line-height:1.7; margin:20px 0 0; }
.websites-visual { position:relative; min-width:0; margin:0; }
.website-stack { position:relative; aspect-ratio:1.18; width:100%; max-width:660px; margin:auto; perspective:1400px; }
.website-stack-halo { position:absolute; inset:16% -5% 5%; background:radial-gradient(ellipse,#628fe62b,transparent 68%); filter:blur(20px); pointer-events:none; }
.website-folder-tab { position:absolute; top:6%; left:10%; width:39%; height:16%; padding:14px 18px; border:1px solid #7995d14a; border-radius:16px 24px 0 0; background:linear-gradient(140deg,#263c62,#111a2c); transform:rotate(-4deg); box-shadow:0 -5px 35px #3664a518; }
.website-folder-tab span { color:#a8c3f5; font-size:clamp(.5rem,.7vw,.625rem); letter-spacing:.15em; white-space:nowrap; }
.website-window { position:absolute; width:91%; top:18%; left:3%; overflow:hidden; border:1px solid #c3d4f36b; border-radius:13px; background:#17191e; box-shadow:0 26px 50px #0009,0 0 24px #6e99ed12; transform-origin:50% 70%; animation:website-stack-cycle 18s cubic-bezier(.4,0,.2,1) infinite; backface-visibility:hidden; }
.website-window--architecture { animation-delay:0s; }
.website-window--shop { animation-delay:-12s; }
.website-window--landing { animation-delay:-6s; }
.website-browser { height:27px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; font:400 8px/1 Arial,sans-serif; letter-spacing:.04em; background:linear-gradient(#2a2d36,#191c24); color:#afb9cd; border-bottom:1px solid #ffffff12; }
.website-browser-dots { display:flex; gap:4px; }
.website-browser-dots i { width:5px; height:5px; border-radius:50%; background:#8191ab; }
.website-browser-dots i:first-child { background:#d2d9e7; }
.website-browser-expand { color:#d0d9ed; }
.site-sample { position:relative; aspect-ratio:1.58; container-type:inline-size; display:flex; flex-direction:column; overflow:hidden; font-family:Arial,Helvetica,sans-serif; }
.sample-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:3%; padding:4% 6%; font-size:1.7cqw; }
.sample-header b { font-size:2.9cqw; letter-spacing:-.06em; }
.sample-header b>span { font-size:1.1cqw; vertical-align:top; margin-left:2px; }
.sample-header>i { font-size:3cqw; font-style:normal; }
.sample-eyebrow { display:block; font-size:1.5cqw; letter-spacing:.13em; margin-bottom:4%; }
.sample-title { display:block; font-size:7cqw; line-height:1.02; letter-spacing:-.055em; }
.sample-mini-cta { display:inline-block; font-size:1.8cqw; padding:3% 5%; margin-top:8%; border-radius:999px; white-space:nowrap; }
.sample-small-line { display:block; width:85%; height:2px; margin-top:7%; background:currentColor; opacity:.2; }
.sample-small-line--short { width:60%; margin-top:3%; }
.sample-bottom { margin-top:auto; display:flex; justify-content:space-between; gap:10px; padding:3% 6%; border-top:1px solid #00000015; font-size:1.45cqw; letter-spacing:.08em; }
.sample-architecture { color:#26231f; background:#e9e6df; }
.sample-architecture-body { display:grid; grid-template-columns:1fr 1fr; flex:1; padding:1% 6% 5%; gap:6%; }
.sample-architecture-copy { align-self:center; }
.sample-architecture-title { font-family:Georgia,serif; font-weight:400; font-size:8cqw; }
.sample-architecture-cta { background:#2b2a26; color:#f7f5ed; }
.sample-building { position:relative; background:linear-gradient(145deg,#d0cbc0,#b7b6aa); border-radius:48% 48% 3px 3px; overflow:hidden; }
.sample-building-sun { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:#f2eee1; right:-8%; top:8%; box-shadow:0 0 20px #fbf4df66; }
.sample-building-block { position:absolute; bottom:0; left:10%; width:59%; height:75%; background:linear-gradient(90deg,#b6a78c,#e6d9c0 40%,#d3c2a3); box-shadow:20px 10px 0 #79736530; }
.sample-building-arch { position:absolute; bottom:-2%; left:30%; width:32%; height:53%; border-radius:50% 50% 0 0; background:linear-gradient(90deg,#524f44,#8c8775); box-shadow:inset 5px 3px 0 #3c382426; }
.sample-building-shadow { position:absolute; bottom:0; right:0; width:75%; height:24%; background:linear-gradient(140deg,transparent,#393d364d); }
.sample-shop { background:#dfe6d4; color:#243b2c; }
.sample-shop-body { display:grid; grid-template-columns:1fr 1fr; flex:1; gap:1%; padding:2% 6% 5%; }
.sample-shop-copy { align-self:center; position:relative; z-index:2; }
.sample-shop-title { font:400 7.6cqw/1 Georgia,serif; letter-spacing:-.06em; }
.sample-shop-cta { color:#eaf1e1; background:#264334; }
.sample-products { position:relative; }
.sample-product-orbit { position:absolute; width:100%; aspect-ratio:1; border-radius:50%; top:-5%; right:-10%; background:radial-gradient(circle at 40% 35%,#b6c69c,#9caa8940 70%); }
.sample-bottle { position:absolute; width:35%; height:66%; bottom:10%; border-radius:14% 14% 8% 8%; box-shadow:6px 8px 12px #3145323d,inset 4px 0 5px #ffffff35; }
.sample-bottle:before { content:''; position:absolute; top:-15%; height:18%; left:11%; right:11%; border-radius:12% 12% 2% 2%; background:linear-gradient(90deg,#263c30,#5c735f,#263c30); }
.sample-bottle>span { position:absolute; top:38%; width:100%; padding:22% 0; color:#263e2d; background:#d5dec6; text-align:center; font-size:1.1cqw; line-height:1.8; letter-spacing:.04em; }
.sample-bottle--one { left:7%; background:linear-gradient(90deg,#3d654a,#769479 45%,#3a6247); transform:rotate(-7deg); z-index:2; }
.sample-bottle--two { right:10%; height:52%; width:30%; background:linear-gradient(90deg,#a4b58d,#d0d9b9,#95a67f); transform:rotate(9deg); z-index:3; }
.sample-product-podium { position:absolute; bottom:0; left:0; width:100%; height:13%; border-radius:50% 50% 4% 4%; background:linear-gradient(#bcc9a8,#a9b79c); }
.sample-landing { background:#101a35; color:#eef3ff; }
.sample-landing .sample-header { border-bottom:1px solid #ffffff13; }
.sample-landing-body { position:relative; flex:1; padding:5% 6% 6%; isolation:isolate; }
.sample-landing-label { color:#a3bef5; }
.sample-landing-title { position:relative; z-index:2; width:70%; font-size:7.2cqw; }
.sample-landing-cta { position:relative; z-index:2; background:#d2dffc; color:#162749; margin-top:6%; padding:2% 4%; }
.sample-orb { position:absolute; z-index:-1; width:49%; aspect-ratio:1; border-radius:50%; right:-3%; top:0; background:radial-gradient(circle at 32% 25%,#eff6ff,#85aaff 15%,#36569c 45%,#131d3a 70%); box-shadow:-7px 1px 30px #80a1ff30; }
.sample-orb>div { position:absolute; inset:15%; border:1px solid #c1d7ff50; border-radius:50%; transform:rotate(-35deg) scaleY(.38); }
.sample-orbit-line { position:absolute; z-index:-1; right:-10%; top:17%; width:70%; height:45%; border:1px solid #8cabf16b; border-radius:50%; transform:rotate(-32deg); }
.sample-landing .sample-bottom { border-top-color:#ffffff1a; color:#a7b8df; }
body.homepage .websites-caption { text-align:center; color:#9298a8; font-size:.6875rem; line-height:1.6; margin-top:12px; }
@keyframes website-stack-cycle {
  0%,24%,100% { transform:translate3d(-8px,22px,65px) rotateX(3deg) rotateY(-10deg) rotateZ(-2deg); z-index:3; opacity:1; }
  33%,57% { transform:translate3d(26px,-48px,-90px) rotateX(3deg) rotateY(-10deg) rotateZ(5deg); z-index:1; opacity:.78; }
  66%,90% { transform:translate3d(10px,-12px,-20px) rotateX(3deg) rotateY(-10deg) rotateZ(1deg); z-index:2; opacity:.92; }
}
@media(min-width:1600px) { body.homepage .websites-banner { padding-inline:max(6%,calc((100vw - 1400px)/2)); } }
@media(max-width:1000px) { body.homepage .websites-banner { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; padding-block:70px; } body.homepage .websites-title { font-size:clamp(2.5rem,4.8vw,3.5rem); } .website-folder-tab { padding:10px 14px; } }
@media(max-width:760px) { body.homepage .websites-banner { grid-template-columns:1fr; gap:36px; padding:58px 6% 45px; } body.homepage .websites-title { font-size:clamp(2.6rem,9vw,3.8rem); } body.homepage .websites-intro { max-width:39ch; font-size:1rem; } .websites-options { margin-bottom:24px; } .websites-visual { width:100%; max-width:560px; margin:auto; } .website-stack { aspect-ratio:1.12; } .website-window { width:87%; left:4%; top:22%; } .website-folder-tab { top:8%; left:10%; width:43%; height:18%; } .website-browser { height:23px; font-size:7px; padding-inline:9px; } .website-window { border-radius:10px; } body.homepage .websites-formats { font-size:.6875rem; } body.homepage .websites-caption { margin-top:0; } }
@media(prefers-reduced-motion:reduce) {
  .website-window { animation:none; }
  .website-window--architecture { transform:translate(-5px,22px) rotate(-2deg); z-index:3; }
  .website-window--shop { transform:translate(8px,-8px) rotate(1deg); z-index:2; }
  .website-window--landing { transform:translate(18px,-37px) rotate(4deg); z-index:1; }
}