/* Product imagery: real browser captures with deliberate, responsive framing. */
.hero-stage { grid-template-columns: 52% 48%; min-height: 590px; gap: 0; }
.hero h1 { font-size: clamp(67px,7.2vw,104px); }
.hero-showcase { position: relative; height: 560px; min-width: 0; margin-left: 20px; }
.showcase-kicker { position:absolute; top:10px; left:20px; display:flex; align-items:center; gap:11px; color:#b9bea9; font-size:8px; letter-spacing:.07em; }
.hero-desktop { position:absolute; z-index:2; top:60px; left:0; width:90%; border:1px solid #7a8066; border-radius:9px; background:#efede5; box-shadow:0 24px 65px #0006; overflow:hidden; transform:rotate(-5deg); transition:transform .5s var(--ease),box-shadow .5s; text-align:left; }
.hero-desktop:hover { transform:rotate(-3deg) translateY(-7px); box-shadow:0 34px 65px #0008; }
.hero-desktop img { width:100%; height:auto; display:block; }
.browser-chrome { padding:11px 14px; display:flex; align-items:center; justify-content:space-between; background:#30332a; color:#b4baa4; font-family:var(--mono); font-size:8px; border-bottom:1px solid #4d5242; }
.browser-dots { color:#899179; font-size:6px; letter-spacing:3px; }
.hero-phone { position:absolute; z-index:4; width:27%; aspect-ratio:382/827; bottom:90px; right:-7px; border:5px solid #292d24; border-radius:22px; background:#eae7dd; overflow:hidden; box-shadow:0 18px 35px #0007,0 0 0 1px #747a65; transform:rotate(7deg); transition:transform .5s var(--ease); }
.hero-phone:hover { transform:rotate(3deg) translateY(-7px); }
.hero-phone img { width:100%; height:100%; object-fit:cover; }
.phone-island { position:absolute; top:5px; left:33%; width:34%; height:9px; border-radius:12px; background:#252822; z-index:2; }
.hero-orbit { position:absolute; top:-3px; right:12px; width:124px; height:124px; opacity:.85; z-index:1; }
.hero-orbit canvas { display:block; width:100%; height:100%; }
.showcase-sticker { position:absolute; bottom:60px; left:-22px; background:var(--purple); color:#2d2545; padding:14px 31px 14px 15px; line-height:1.4; font-size:12px; font-weight:400; letter-spacing:-.3px; transform:rotate(-8deg); box-shadow:2px 3px 0 #0003; z-index:5; }
.showcase-sticker strong { font-weight:800; }
.showcase-sticker>span { position:absolute; right:9px; bottom:9px; font-size:21px; }
.showcase-caption { position:absolute; bottom:0; left:4px; right:0; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.showcase-caption>button:first-child { text-align:left; display:flex; flex-direction:column; gap:8px; padding-block:5px; }
.showcase-caption .mono { font-size:7px; color:var(--lime); letter-spacing:.1em; }
.showcase-caption>button>span+span { font-size:11px; color:#c0c5b1; }
.showcase-caption i { margin-left:15px; font-size:18px; font-style:normal; }
.showcase-caption #motion-toggle { font-family:var(--mono); font-size:7px; color:#b0b69f; min-height:44px; }
.showcase-caption #motion-toggle>span { color:var(--lime); margin-right:4px; }
.visual-cases { background:#c7cec0; }
.visual-travunited { background:#cde0eb; }
.mockup-card { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.mockup-scene-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.project-button:hover .mockup-scene-img { transform:scale(1.035); }

/* AstraVeda CSS Laptop + Mobile Mockup */
.astra-mockup-scene { position:absolute; inset:0; background:radial-gradient(circle at 65% 35%, #2a2245 0%, #151324 70%, #0d0c17 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.astra-mockup-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 45% 45%, #60429433 0%, transparent 60%); pointer-events:none; }
.astra-laptop { position:absolute; left:6%; top:12%; width:66%; aspect-ratio:16/10.5; display:flex; flex-direction:column; align-items:center; z-index:2; filter:drop-shadow(0 20px 30px rgba(0,0,0,0.45)); }
.astra-laptop-screen { width:100%; height:93%; background:#000; border:6px solid #23222d; border-radius:10px 10px 0 0; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:inset 0 0 0 1px #454359; }
.astra-laptop-screen::before { content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#1a1924; z-index:10; }
.astra-laptop-screen .astra-nav { padding:7px 10px; font-size:9px; background:#1b162c; color:#d7d0ed; border-bottom:1px solid #362e52; }
.astra-laptop-screen .astra-nav span { font-size:5px; border-color:#483d6e; color:#bbaee3; }
.astra-laptop-screen .astra-main { flex:1; background:radial-gradient(circle at 50% 35%, #291f42 0%, #141122 100%); color:#eee9fa; padding:8px; }
.astra-laptop-screen .astra-orb { width:52px; height:52px; margin-top:0; }
.astra-laptop-screen .astra-main h4 { font-size:12px; margin-top:8px; }
.astra-laptop-screen .astra-main>p { font-size:5.5px; color:#9c90be; margin-top:3px; }
.astra-laptop-screen .astra-input { width:88%; padding:6px 8px; margin-top:8px; font-size:5px; background:#1e1832; border-color:#3c305c; color:#a296c4; }
.astra-laptop-screen .astra-input span { width:14px; height:14px; font-size:9px; background:#7556a6; }
.astra-laptop-screen .astra-chips { gap:4px; margin-top:6px; font-size:4.5px; }
.astra-laptop-screen .astra-chips span { border-color:#413463; padding:2px 5px; color:#b0a4d4; }
.astra-laptop-base { width:114%; height:7%; background:linear-gradient(to bottom, #454353 0%, #2a2935 35%, #181720 100%); border-radius:0 0 8px 8px; position:relative; box-shadow:0 6px 12px rgba(0,0,0,0.5); }
.astra-laptop-base::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:18%; height:25%; background:#1c1b26; border-radius:0 0 3px 3px; }
.astra-mobile { position:absolute; right:7%; bottom:10%; width:22%; aspect-ratio:9/19; background:#0c0b14; border:4px solid #2d2b38; border-radius:18px; z-index:4; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 1px #4d4a5e; }
.astra-mobile-screen { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, #2f2250 0%, #100e1b 100%); display:flex; flex-direction:column; align-items:center; }
.astra-mobile-notch { width:34%; height:8px; background:#000; border-radius:0 0 6px 6px; margin-bottom:12px; }
.astra-mobile-content { text-align:center; padding:10px 6px; }
.astra-orb-small { width:38px; height:38px; border-radius:50%; margin:0 auto 10px; background:radial-gradient(circle at 35% 25%, #fff 0%, #bd9ee8 50%, #7c55c4 100%); box-shadow:0 0 16px #9476c566; }
.astra-mobile-content h5 { font-size:10px; color:#fff; font-weight:600; margin:0; }
.astra-mobile-content p { font-size:7px; color:#9e92c2; margin-top:4px; font-family:var(--mono); }

.capture-browser { position:absolute; top:18%; left:7%; width:78%; transform:rotate(-5deg); border:1px solid #a4af96; border-radius:5px; overflow:hidden; background:#f4f0e8; box-shadow:10px 17px 25px #59634d33; }
.capture-chrome { display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:5px; padding:8px 10px; background:#ecede5; border-bottom:1px solid #c2c7b7; color:#5e6757; }
.capture-chrome>span:first-child { font-size:4px; letter-spacing:1px; }
.capture-browser img { width:100%; height:auto; }
.capture-mobile { position:absolute; width:22%; aspect-ratio:382/827; right:6%; top:34%; transform:rotate(8deg); border:4px solid #33392d; border-radius:16px; overflow:hidden; box-shadow:7px 14px 25px #384a3f40; background:#eeeae0; }
.capture-mobile img { width:100%; height:100%; object-fit:cover; }
.capture-stamp { position:absolute; left:10%; bottom:13%; font-family:var(--mono); font-size:7px; line-height:1.7; letter-spacing:.05em; color:#5d6953; transform:rotate(-5deg); }
.capture-bottom { position:absolute; bottom:6%; left:7%; right:7%; display:flex; justify-content:space-between; align-items:center; font-size:15px; letter-spacing:-.4px; font-weight:800; }
.capture-bottom>span { font-family:var(--mono); font-size:6px; font-weight:400; letter-spacing:0; color:#59664f; }
.case-visual .capture-browser { top:10%; left:13%; width:68%; }
.case-visual .capture-mobile { width:18%; top:19%; right:10%; }
.case-visual .capture-stamp { left:8%; bottom:19%; }
.case-visual .capture-bottom { bottom:5%; }
.case-visual .capture-chrome { font-size:7px; padding:9px 12px; }
/* Captions are first-class content. All preview controls have touch-sized targets. */
.case-gallery { margin:40px 55px 45px; border-bottom:1px solid var(--line); padding-bottom:28px; }
.gallery-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }
.gallery-heading .eyebrow { margin-bottom:12px; font-size:8px; color:var(--lime); }
.gallery-heading h3 { font-size:32px; letter-spacing:-1.5px; }
.gallery-heading>.mono { color:var(--muted); font-size:8px; padding-bottom:5px; white-space:nowrap; }
.gallery-stage { position:relative; width:100%; aspect-ratio:1.44; border-radius:5px; background:#e4e7db; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #777d69; cursor:zoom-in; touch-action:pan-y pinch-zoom; }
.gallery-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-stage.portrait img { width:auto; height:92%; max-width:90%; border-radius:7px; box-shadow:0 8px 28px #0003; }
.gallery-expand { position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:10px; color:#f1f4e7; background:#252c21e8; border:1px solid #7b8665; backdrop-filter:blur(10px); padding:10px 12px; border-radius:30px; font-family:var(--mono); font-size:8px; }
.gallery-expand>span { font-size:20px; line-height:1; }
.gallery-stage:hover .gallery-expand { background:var(--lime); color:var(--bg); border-color:var(--lime); }
.gallery-description { min-height:126px; padding-top:20px; }
.gallery-type { font-size:8px; color:var(--lime); letter-spacing:.07em; }
.gallery-title { font-size:21px; font-weight:600; letter-spacing:-.6px; margin-top:9px; }
.gallery-caption { font-size:12px; color:var(--muted); line-height:1.8; margin-top:9px; max-width:640px; }
.gallery-navigation { display:flex; align-items:center; gap:14px; margin-top:22px; }
.gallery-prev,.gallery-next { border:1px solid #525943; width:44px; height:44px; flex-shrink:0; border-radius:50%; font-size:22px; transition:background .2s,color .2s; }
.gallery-prev:hover,.gallery-next:hover { background:var(--lime); color:var(--bg); }
.gallery-thumbnails { display:flex; flex:1; gap:9px; overflow:auto; padding:4px; scrollbar-width:thin; scrollbar-color:#6c7653 transparent; }
.gallery-thumbnails>button { position:relative; width:90px; height:65px; border:2px solid transparent; background:#3d4335; border-radius:4px; overflow:hidden; flex-shrink:0; opacity:.55; transition:opacity .2s,border-color .2s; }
.gallery-thumbnails>button[aria-pressed=true] { opacity:1; border-color:var(--lime); }
.gallery-thumbnails>button:hover { opacity:1; }
.gallery-thumbnails img { width:100%; height:100%; object-fit:cover; object-position:top; }
.gallery-thumbnails span { position:absolute; right:3px; bottom:3px; font-family:var(--mono); font-size:7px; padding:3px 4px; color:#f2f1e9; background:#20251ce6; }
.gallery-source { color:#858f77; font-size:9px; line-height:1.7; margin-top:19px; }
/* An enlarged image stacks above the project dialog; native dialog manages focus. */
.image-dialog { width:calc(100% - 48px); max-width:1380px; height:94dvh; max-height:94dvh; border-color:#59614a; }
.image-dialog[open] { display:flex; flex-direction:column; }
.image-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 26px; border-bottom:1px solid var(--line); flex-shrink:0; }
.image-toolbar h2 { font-size:23px; letter-spacing:-.6px; margin-top:7px; }
#image-type { font-size:8px; color:var(--lime); letter-spacing:.08em; }
.image-tools { display:flex; gap:10px; align-items:center; }
.image-tools button { min-height:44px; min-width:85px; padding:8px 13px; border:1px solid #5d654d; border-radius:30px; font-size:11px; }
#image-close { color:var(--bg); background:var(--lime); border-color:var(--lime); }
.image-viewport { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; background:#30352b; padding:20px; }
.image-viewport>img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 10px 35px #0003; }
.image-viewport.is-zoomed { display:block; }
.image-viewport.is-zoomed>img { max-width:none; max-height:none; height:auto; margin:0 auto; }
.image-viewport:focus-visible { outline:2px solid var(--lime); outline-offset:-4px; }
.image-footer { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:16px 26px; border-top:1px solid var(--line); flex-shrink:0; }
.image-footer>div { max-width:800px; text-align:center; }
.image-footer>button { width:44px; height:44px; border:1px solid #5d654d; border-radius:50%; font-size:23px; flex-shrink:0; }
.image-footer>button:disabled { opacity:.25; }
#image-caption { font-size:11px; color:#bdc5ae; line-height:1.6; }
#image-position { font-size:8px; color:#8c967d; margin-top:8px; }
.engineering-note { display:grid; grid-template-columns:1fr 1.6fr; gap:55px; align-items:center; margin-top:70px; padding-top:55px; border-top:1px solid #515445; }
.engineering-copy .eyebrow { font-size:8px; color:var(--lime); margin-bottom:22px; }
.engineering-copy h3 { font-size:31px; line-height:1.2; letter-spacing:-1px; }
.engineering-copy h3 em { font-family:Georgia,serif; font-weight:400; }
.engineering-copy>p:not(.eyebrow) { font-size:12px; color:var(--muted); line-height:1.8; margin-top:20px; }
.engineering-copy .text-link { margin-top:23px; font-size:11px; }
.engineering-diagram { display:block; text-align:left; border:1px solid #566147; border-radius:7px; background:#242820; padding:10px; transition:border-color .2s; }
.engineering-diagram:hover { border-color:var(--lime); }
.engineering-diagram img { width:100%; height:auto; }
.engineering-diagram>.mono { display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#9eab8c; margin:6px 14px 10px; }
.engineering-diagram>.mono>span { font-size:20px; color:var(--lime); }
@media(min-width:1600px) { .hero h1 { font-size:107px; } .hero-showcase { height:580px; } }
@media(max-width:1100px) { .hero-stage { min-height:535px; } .hero h1 { font-size:7.1vw; } .hero-showcase { height:460px; margin-left:10px; } .hero-desktop { top:50px; } .hero-phone { bottom:45px; width:28%; border-width:4px; border-radius:19px; } .hero-orbit { width:110px; height:110px; right:-7px; } .showcase-sticker { left:-12px; bottom:65px; font-size:10px; padding:11px 28px 11px 12px; } .showcase-kicker { left:10px; top:18px; font-size:7px; } .showcase-caption>button>span+span { font-size:9px; } .engineering-note { gap:35px; } }
@media(max-width:800px) { .hero-stage { grid-template-columns:52% 48%; min-height:470px; padding-block:45px; } .hero h1 { font-size:7.1vw; } .hero-showcase { height:370px; margin-left:12px; } .hero-desktop { top:50px; } .hero-phone { bottom:36px; width:28%; border-radius:14px; border-width:3px; } .phone-island { top:3px; height:6px; } .hero-orbit { width:90px; height:90px; top:13px; } .showcase-kicker { top:32px; font-size:6px; left:0; max-width:130px; line-height:1.7; gap:7px; } .showcase-sticker { font-size:8px; bottom:57px; left:-10px; padding:9px 23px 9px 10px; } .showcase-sticker>span { font-size:17px; } .browser-chrome { padding:7px 9px; font-size:6px; } .browser-dots { font-size:4px; } .showcase-caption .mono { font-size:6px; } .showcase-caption>button>span+span { font-size:8px; } .showcase-caption i { font-size:13px; margin-left:5px; } .showcase-caption #motion-toggle { font-size:6px; } .capture-browser { left:6%; width:80%; top:23%; } .capture-mobile { top:38%; right:5%; border-width:3px; border-radius:12px; width:24%; } .capture-stamp { font-size:6px; bottom:16%; } .capture-bottom { font-size:12px; } .capture-bottom>span { font-size:5px; } .capture-chrome { font-size:4px; padding:6px 7px; } .case-visual .capture-browser { top:17%; width:68%; } .case-visual .capture-mobile { top:23%; } .engineering-note { grid-template-columns:1fr 1.3fr; gap:30px; margin-top:48px; padding-top:40px; } .engineering-copy h3 { font-size:25px; } .engineering-copy>p:not(.eyebrow) { font-size:11px; } .image-toolbar h2 { font-size:19px; } }
@media(max-width:600px) {
 .hero-stage { display:flex; padding-top:37px; padding-bottom:21px; }
 .hero h1 { font-size:clamp(43px,11.6vw,69px); }
 .hero-showcase { width:100%; max-width:410px; height:auto; aspect-ratio:1; min-height:350px; margin:24px auto 0; }
 .hero-desktop { top:40px; width:89%; left:4%; }
 .hero-phone { width:26%; bottom:48px; right:2%; border-radius:17px; }
 .hero-orbit { top:2px; right:5%; width:91px; height:91px; }
 .showcase-kicker { top:0; left:5%; font-size:7px; max-width:none; }
 .showcase-sticker { bottom:63px; left:1%; font-size:10px; padding:11px 27px 11px 12px; }
 .showcase-caption { left:4%; right:3%; }
 .showcase-caption .mono { font-size:7px; }
 .showcase-caption>button>span+span { font-size:9px; }
 .showcase-caption #motion-toggle { font-size:6px; }
 .browser-chrome { font-size:6px; padding:8px 10px; }
 .capture-browser { width:81%; left:6%; top:20%; }
 .capture-chrome { font-size:4px; padding:7px 8px; }
 .capture-mobile { width:24%; top:35%; right:6%; border-radius:14px; }
 .capture-bottom { font-size:14px; bottom:6%; }
 .capture-bottom>span { font-size:5px; }
 .capture-stamp { font-size:6px; bottom:15%; }
 .case-visual .capture-browser { width:81%; left:6%; top:20%; }
 .case-visual .capture-mobile { width:24%; top:35%; right:6%; }
 .case-visual .capture-chrome { font-size:4px; padding:7px 8px; }
 .case-visual .capture-stamp { bottom:15%; }
 .case-gallery { margin:30px 22px; padding-bottom:25px; }
 .gallery-heading { margin-bottom:17px; }
 .gallery-heading .eyebrow { font-size:6px; }
 .gallery-heading h3 { font-size:28px; }
 .gallery-heading>.mono { font-size:7px; }
 .gallery-stage { aspect-ratio:1.18; }
 .gallery-stage.portrait { aspect-ratio:.9; }
 .gallery-expand { font-size:6px; padding:8px 10px; right:8px; bottom:8px; gap:6px; }
 .gallery-expand>span { font-size:16px; }
 .gallery-description { min-height:147px; padding-top:17px; }
 .gallery-type { font-size:7px; }
 .gallery-title { font-size:19px; }
 .gallery-caption { font-size:11px; }
 .gallery-navigation { gap:8px; margin-top:12px; }
 .gallery-thumbnails { gap:6px; }
 .gallery-thumbnails>button { width:61px; height:48px; }
 .gallery-source { font-size:8px; }
 .image-dialog { width:calc(100% - 12px); height:96dvh; max-height:96dvh; border-radius:7px; }
 .image-toolbar { padding:15px 14px; align-items:flex-start; flex-direction:column; gap:12px; }
 #image-type { font-size:7px; }
 .image-toolbar h2 { font-size:20px; }
 .image-tools { justify-content:space-between; width:100%; }
 .image-tools button { font-size:10px; min-width:90px; }
 .image-viewport { padding:9px; }
 .image-footer { padding:13px 10px; gap:10px; }
 #image-caption { font-size:9px; }
 #image-position { font-size:7px; }
 .image-footer>button { width:44px; height:44px; }
 .engineering-note { grid-template-columns:1fr; gap:28px; margin-top:44px; padding-top:35px; }
 .engineering-copy h3 { font-size:32px; }
 .engineering-copy>p:not(.eyebrow) { font-size:12px; }
 .engineering-copy .eyebrow { font-size:7px; }
 .engineering-diagram { padding:7px; }
 .engineering-diagram>.mono { font-size:7px; }
}
@media(max-width:360px) { .hero-showcase { min-height:320px; margin-top:28px; } .hero-desktop { top:40px; } .hero-phone { bottom:46px; } .showcase-sticker { font-size:9px; bottom:60px; } .showcase-caption>button>span+span { font-size:8px; } .showcase-kicker { font-size:6px; top:0; } .gallery-thumbnails>button { width:55px; } .gallery-heading .eyebrow { max-width:175px; line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { .hero-desktop:hover { transform:rotate(-5deg); } .hero-phone:hover { transform:rotate(7deg); } }