* { box-sizing: border-box; }
:root { color-scheme: dark; --ivory: #e7f5ed; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { background: #10271f; color: var(--ivory); }
.gallery { position: relative; min-height: 680px; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 70% 20%, #5d725344 0%, transparent 50%), linear-gradient(110deg, #10251d 0%, #254535 54%, #162d23 100%); }
.room, .grain { position: absolute; inset: 0; pointer-events: none; }
.wall-lines { position: absolute; inset: 0 0 28%; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #c4d4af0c 25%); border-bottom: 1px solid #b0bf9d26; }
.window-light { position: absolute; width: 92%; height: 160%; left: 40%; top: -65%; transform: rotate(-32deg); background: linear-gradient(90deg, transparent 0 12%, #dfe7bb07 12% 25%, transparent 25% 27%, #dfe7bb0c 27% 44%, transparent 44% 46%, #dfe7bb08 46% 60%, transparent 60%); filter: blur(2px); }
.floor { position: absolute; inset: 72% 0 0; background: linear-gradient(165deg, #61725638, #172f25 70%); }
.floor-line { position: absolute; top: 72%; left: 50%; width: 1px; height: 80%; background: #bec7a414; transform: rotate(-58deg); transform-origin: top; }
.ambient-glow { position: absolute; width: 65vw; height: 65vw; left: -43vw; top: 5%; border-radius: 50%; background: #07150de0; filter: blur(60px); }
.masthead { position: absolute; top: 42px; width: 100%; text-align: center; z-index: 3; }
h1 { margin: 0; font-family: 'Arial Black', 'Segoe UI', Arial, sans-serif; font-size: 42px; font-weight: 900; letter-spacing: -.055em; transform: scaleX(1.08); }

.scene { position: absolute; top: 54%; left: 50%; width: 440px; height: 530px; perspective: 1600px; transform: translate(-50%, -50%); }
.architecture { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, -7deg)) rotateY(var(--ry, -15deg)); will-change: transform; }
.monument { position: absolute; width: 360px; height: 450px; left: 40px; top: 0; transform-style: preserve-3d; transform: translateZ(10px); }
.monument-front { position: absolute; inset: 0; backface-visibility: hidden; background: radial-gradient(ellipse at 0 0, #7f936722, transparent 70%), linear-gradient(120deg, #39543f, #2d4735 65%, #233b2d); border: 1px solid #a4b18b46; box-shadow: inset 1px 1px 1px #c9d4ac29, inset -1px -1px 1px #071b1766; display: flex; flex-direction: column; align-items: center; }
.monument-side { position: absolute; right: 0; top: 0; width: 100px; height: 450px; transform-origin: right center; transform: rotateY(-90deg); background: linear-gradient(90deg, #132c21, #1c3427); border: 1px solid #61735330; }
.monument-top { position: absolute; top: 0; left: 0; width: 360px; height: 100px; transform-origin: top center; transform: rotateX(-90deg); background: linear-gradient(120deg, #6a7a55, #435a3e); border: 1px solid #9aa77c40; }
.engraved-mark { display: flex; align-items: end; gap: 5px; height: 24px; margin-top: 35px; opacity: .55; }
.engraved-mark span { width: 1px; height: 13px; background: #c1c9a7; }
.engraved-mark span:nth-child(2) { height: 23px; }
.engraved-mark span:nth-child(3) { height: 18px; }
.goal { text-align: center; margin-top: 23px; text-shadow: 0 1px 1px #ffffff12, 0 -1px 1px #041c1680; }
.currency { margin: 0; font: 13px/1.3 Arial, sans-serif; letter-spacing: .2em; color: #c8cead; }
.amount { margin: 0; padding-left: 0; font: 800 146px/1 'Segoe UI', Arial, sans-serif; letter-spacing: -.055em; padding-right: .055em; }

h2 { margin: 0; font: 700 26px/1.3 'Segoe UI', Arial, sans-serif; letter-spacing: .18em; padding-left: .18em; }
.revenue { margin: 10px 0 0; font: 14px/1.4 'Courier New', monospace; color: #aac7b5; }
.deadline { position: absolute; bottom: 35px; left: 40px; right: 40px; border-top: 1px solid #c1c9a731; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-family: Arial, sans-serif; }
.deadline span { font-size: 9px; letter-spacing: .18em; color: #b3bea0; }
.deadline time { font-size: 12px; letter-spacing: .14em; }
.corner { position: absolute; width: 8px; height: 8px; border-color: #a6b18c65; border-style: solid; }
.corner-tl { top: 15px; left: 15px; border-width: 1px 0 0 1px; }.corner-tr { top: 15px; right: 15px; border-width: 1px 1px 0 0; }.corner-bl { bottom: 15px; left: 15px; border-width: 0 0 1px 1px; }.corner-br { bottom: 15px; right: 15px; border-width: 0 1px 1px 0; }
.plinth { position: absolute; top: 450px; left: -25px; width: 490px; height: 68px; transform-style: preserve-3d; transform: translateZ(58px); }
.plinth-front { position: absolute; inset: 0; background: linear-gradient(#354b36, #233a2b); border: 1px solid #86957044; box-shadow: inset 0 3px 2px #a7b58a19; }
.plinth-top { position: absolute; left: 0; top: 0; width: 490px; height: 205px; transform-origin: top; transform: rotateX(-90deg); background: linear-gradient(125deg, #6a7b55, #3a523a); border: 1px solid #a8b78c38; }
.plinth-right { position: absolute; top: 0; right: 0; width: 205px; height: 68px; transform-origin: right; transform: rotateY(-90deg); background: #182f22; }
.cast-shadow { position: absolute; left: -150px; top: 455px; width: 750px; height: 260px; border-radius: 50%; background: #06150edf; filter: blur(28px); transform: rotateX(85deg) translateZ(-50px); }
.grain { z-index: 5; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.frame-mark { position: absolute; bottom: 38px; height: 17px; width: 17px; border-bottom: 1px solid #bdc5a654; }.frame-left { left: 42px; border-left: 1px solid #bdc5a654; }.frame-right { right: 42px; border-right: 1px solid #bdc5a654; }
@media (prefers-reduced-motion: no-preference) { .scene { animation: reveal 1.5s cubic-bezier(.2,.7,.2,1) both; }.masthead { animation: wordmark-in 1.4s ease both; } }
@keyframes reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes wordmark-in { from { opacity: 0; } to { opacity: 1; } }


/* Precision surfaces and connected modules reflect Arbone's software portfolio. */
.gallery { background: radial-gradient(ellipse at 53% 37%, #225a413b, transparent 60%), linear-gradient(115deg, #081a14, #142f24 55%, #091c16); }
.wall-lines { background-image: linear-gradient(#89efb507 1px, transparent 1px), linear-gradient(90deg, #89efb507 1px, transparent 1px); background-size: 64px 64px; border-color: #8df5b91c; mask-image: linear-gradient(transparent, #000 35%); }
.window-light { opacity: .3; }
.floor { background: linear-gradient(165deg, #29543a33, #0b2119 75%); }
.monument-front { background: linear-gradient(130deg, #284c3c, #16372a 65%, #10291f); border-color: #82d9a45c; box-shadow: inset 0 1px #c4ffe236, inset 0 -1px #50de941c, 0 0 35px #4dff9010; }
.monument-front::before { content: ''; position: absolute; top: -1px; left: 24%; width: 52%; height: 2px; background: #a4ffbd; box-shadow: 0 0 16px #7dffa999; }
.monument-side { background: repeating-linear-gradient(0deg, transparent 0 16px, #6eaa8420 16px 17px), linear-gradient(90deg, #0a1f17, #173c2a); border-color: #75bf8b40; }
.monument-top { background: linear-gradient(120deg, #436a4e, #254b35); border-color: #83d19b50; }
.engraved-mark { position: relative; width: 52px; height: 24px; align-items: center; justify-content: space-between; opacity: .85; }
.engraved-mark::before { content: ''; position: absolute; left: 4px; right: 4px; height: 1px; background: #82b995; }
.engraved-mark span, .engraved-mark span:nth-child(2), .engraved-mark span:nth-child(3) { position: relative; width: 8px; height: 8px; background: #204331; border: 1px solid #a5d9b4; }
.engraved-mark span:nth-child(2) { width: 12px; height: 12px; background: #b5f9c7; border-color: #b5f9c7; box-shadow: 0 0 12px #80ffac30; }
.currency { font-family: 'Courier New', monospace; color: #b4d5bf; }
.deadline { font-family: 'Courier New', monospace; border-color: #9cf3bc30; }
.deadline span { color: #a8c7b3; }
.corner { border-color: #a1e8b482; }
.plinth-front { background: linear-gradient(#203e2c, #10281d); border-color: #7ac18c55; box-shadow: inset 0 2px #8fffb923; }
.plinth-front::after { content: ''; position: absolute; inset: 17px 24px; border-top: 1px solid #75b68726; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #8abe9630 25%); }
.plinth-top { background: linear-gradient(125deg, #45684c, #23472f); border-color: #88c69766; }
.plinth-right { background: #0d2519; }

/* The brand and scene share the available viewport, including short screens. */
html, body { min-width: 280px; }
body { -webkit-user-select: none; user-select: none; }
.gallery { min-height: 360px; height: 100svh; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); }
.masthead { position: relative; top: auto; flex: 0 0 auto; padding: 0 20px; }
h1 { font-size: clamp(52px, 16vw, 210px); line-height: .94; letter-spacing: -.065em; transform: none; }
.scene-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; margin-top: clamp(16px, 3svh, 36px); }
.scene { top: 50%; width: 440px; height: 390px; transform: translate(-50%, -50%) scale(var(--scene-scale, .8)); }
.monument, .monument-side { height: 330px; }
.engraved-mark { margin-top: 22px; flex-shrink: 0; }
.goal { margin-top: 10px; }
.amount { font-size: 110px; line-height: .97; }
h2 { font-size: 24px; }
.revenue { margin-top: 6px; }
.deadline { bottom: 24px; padding-top: 16px; justify-content: center; gap: 9px; white-space: nowrap; }
.deadline span, .deadline time { font-size: 12px; letter-spacing: .1em; }
.plinth { top: 330px; height: 50px; }
.plinth-right { height: 50px; }
.cast-shadow { top: 335px; }
.frame-mark { bottom: 20px; }
@media (max-width: 650px) {
  .architecture { transform: rotateX(-5deg) rotateY(-10deg); }
  .scene { --scene-scale: .55; }
  .frame-left { left: 18px; }.frame-right { right: 18px; }
  .window-light { left: 5%; width: 160%; }
}
@media (max-height: 500px) and (min-width: 651px) {
  .gallery { padding-top: 16px; padding-bottom: 12px; }
  h1 { font-size: min(12vw, 24svh); }
  .scene-stage { margin-top: 10px; }
}

@media (max-width: 650px), (max-height: 500px) {
  .currency, .revenue { font-size: 19px; }
  .deadline span, .deadline time { font-size: 20px; letter-spacing: .02em; }
  .deadline { left: 28px; right: 28px; gap: 8px; }
  h2 { font-size: 28px; }
}