/* Overrides: top hero + placeholders + header polish */
:root{--top-hero-padding:3.2rem}
.top-hero{background:transparent;padding:var(--top-hero-padding) 0 1.2rem}
.inview{opacity:1;transform:none}
/* Scroll reveal: default hidden state and reveal on `.inview` */
.reveal, .reveal-block, .reveal-item {
  opacity: 0;
  transform: translateY(28px) scale(.995);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.9,.25,1);
  will-change: opacity, transform;
}
.reveal.inview, .reveal-block.inview, .reveal-item.inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-block, .reveal-item { transition: none !important; transform: none !important; }
}

/* Remove decorative shadow/duplicate text behind CTA heading */
.cta-band h3::before,
.cta-band h3::after { display: none !important; }

/* Ensure reveal animates on small screens as well */
@media (max-width: 900px){
  .reveal, .reveal-block, .reveal-item {
    transform: translateY(20px) scale(.995);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.9,.25,1);
  }
  .hero-grid{gap:12px}
  
  /* Center all buttons on small screens */
  .btn, button, a.btn {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Center form action buttons and notes */
  .form-actions { justify-content: center !important; gap: 0.75rem; }
  .form-note { text-align: center; }
}

/* Ensure the demo button in the text column is removed on phones */
@media (max-width:600px){
  .viewer-copy [data-demo]{ display: none !important; }
}
.top-hero-title{font-family:Inter, system-ui, -apple-system, 'Helvetica Neue', Arial; font-size:clamp(1.6rem,6vw,3.25rem);letter-spacing:-0.02em;margin:0;text-align:center;font-weight:800}
.top-hero-sub{color:var(--muted);text-align:center;margin-top:0.6rem;font-weight:600}

/* placeholders */
.media-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#fbfbff);border-radius:16px;padding:32px}
.placeholder-graphic{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.placeholder-graphic.large{padding:48px}
.placeholder-tile{height:220px;border-radius:12px;background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.01));box-shadow:0 6px 18px rgba(13,13,13,0.03)}

/* subtle refinements for a clean Apple-like aesthetic */
.site-header{background:rgba(255,255,255,0.65);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,0.04)}
.brand img.logo{height:68px}
.nav a{color:var(--brand-dark);opacity:0.92}
.site-header .nav a, .site-header .nav .cta { font-weight:400; }
/* Stronger override to ensure identical appearance to main-page nav CTA */
.site-header .header-inner .nav a.cta,
.site-header .header-inner .nav a { 
  font-weight:400 !important;
  font-family: inherit;
  font-size: 1rem;
  line-height:1;
  text-decoration:none;
  color:var(--brand-dark);
}
.btn-primary{border-radius:999px;padding:0.85rem 1.05rem}

/* FORCE: remove any white background on header; keep translucent blur panel only */
.site-header{background:transparent !important;}
.site-header .header-inner::before{ /* ensure panel stays subtle */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
}

@media (max-width:900px){
  .top-hero{padding:2rem 0 0.8rem}
  .placeholder-tile{height:180px}

/* Hide extended hero text on small screens to reduce text amount */

/* Hide AR intro paragraph on small screens */
@media (max-width: 900px){
  .ar-intro{display:none !important}
}
@media (max-width: 900px){
  .hide-mobile{display:none !important}
}
  .brand img.logo{height:56px}
}
@media (max-width:600px){
  .top-hero-title{font-size:1.6rem}
  .placeholder-tile{height:150px}
}

/* Intro split section styles */
.intro-split{padding:3.5rem 0 2.5rem}
.intro-grid{display:grid;grid-template-columns:460px 1fr;gap:48px;align-items:start}
.intro-visual{position:relative}
.intro-shape{width:380px;height:380px;border-radius:36px;background:linear-gradient(135deg, rgba(228,0,1,0.04), rgba(14,30,255,0.03));filter:blur(36px)}
.intro-copy .tiny{font-size:0.85rem;color:var(--brand-red);display:inline-block;margin-bottom:0.6rem}
.intro-copy h2{font-size:clamp(1.4rem,4.5vw,2.6rem);line-height:1.02;margin:0 0 0.8rem}
.intro-copy .lead{color:var(--brand-dark);font-size:1.05rem}
.lead-cta{margin:1.25rem 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.25rem}
.two-col h4{margin:0 0 0.4rem}

@media (max-width:1000px){
  .intro-grid{grid-template-columns:1fr;}
  .intro-visual{order:2}
  .intro-copy{order:1}
  .intro-shape{width:260px;height:260px}
  .two-col{grid-template-columns:1fr}
}

/* Make the intro-split section full-bleed (edge-to-edge) and allow a background image via --intro-bg */
.intro-split.container {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  overflow: hidden;
  /* set --intro-bg to "url('...')" on the element to apply an image */
  --intro-bg: none;
  background-image: var(--intro-bg);
  /* increase background scale on desktop so image appears ~35% larger */
  background-size: 135% auto;
  /* default focal point: center center */
  --intro-bg-position: center center;
  background-position: var(--intro-bg-position);
  background-repeat: no-repeat;
}
.intro-split.container::before {
  content: '';
  position: absolute;
  inset: 0;
  /* removed overlay so background image shows with uniform brightness */
  background: none !important;
  pointer-events: none;
  z-index: 0;
}
.intro-split .intro-grid, .intro-split .intro-copy, .intro-split .intro-visual { position: relative; z-index: 1; }

/* Visual adjustments to match provided design: white text, right-aligned, content anchored to bottom */
.intro-split .intro-copy { color: #fff; text-align: right; padding-bottom: 3.6rem; padding-top: 2.4rem; }
.intro-split .intro-copy h2 { color: #fff; font-size: clamp(1.6rem,4.5vw,3.6rem); line-height:1.02; text-shadow:0 10px 30px rgba(0,0,0,0.45); margin-bottom:0.6rem; }
.intro-split .intro-copy .lead, .intro-split .tiny { color: rgba(255,255,255,0.92); }
.intro-split .two-col { display:flex; gap:2rem; justify-content:flex-end; }
.intro-split .two-col h4, .intro-split .two-col p { color: rgba(255,255,255,0.9); }
.intro-split .intro-grid { align-items: end; }

/* Giant watermark title across the hero (large VISUALZ text) */
/* wrapper for giant watermark + subtitle */
.intro-giant-wrap{
  position: absolute;
  left: 2.5%;
  bottom: 6%;
  z-index: 1;
  pointer-events: none;
  -webkit-font-smoothing:antialiased;
  display: inline-block; /* shrink-wrap to content */
  text-align: center;     /* center subtitle under VISUALZ */
}

.intro-giant{
  font-weight: 900;
  color: rgba(255,255,255,0.72);
  font-family: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial;
  font-size: clamp(5.2rem, 18.5vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-shadow: 0 14px 32px rgba(0,0,0,0.32);
  mix-blend-mode: normal;
}

.intro-giant-sub{
  margin-top: 0.35rem;
  color: rgba(255,255,255,0.82);
  font-size: clamp(0.9rem, 1.8vw, 1.25rem);
  font-weight: 600;
  text-shadow: 0 6px 18px rgba(0,0,0,0.28);
  mix-blend-mode: normal;
}

/* position the decorative rounded square (intro-shape) to the right side */
.intro-visual .intro-shape{
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  filter: blur(34px);
  z-index: 0;
}

/* Small white description box anchored bottom-right */
.intro-desc-box{
  display: none !important;
}
.intro-desc-box .tiny{color:var(--brand-red);}
.intro-desc-box h2{color:var(--brand-dark);font-size:1.1rem;line-height:1.05;margin:0 0 0.6rem}
.intro-desc-box .lead{color:var(--muted);margin:0 0 0.6rem}

@media (max-width:1000px){
  .intro-giant{font-size: clamp(3.6rem, 18vw, 10rem)}
  .intro-giant-wrap{left:1rem;bottom:10%}
  .intro-desc-box{max-width:100%;padding:14px;position:static;transform:none;right:auto;bottom:auto}
}

@media (max-width:1000px){
  .intro-split .intro-copy { text-align:left; padding-bottom:1.8rem; padding-top:1rem; }
  .intro-split .intro-grid{align-items:stretch}
}

/* Variant: make the image fully fit inside the section (no cropping) */
.intro-split.fit-image.container,
.intro-split.fit-image.container {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Make hero taller so more of the image is visible by default */
.intro-split.container {
  /* increased height by ~15% for desktop */
  min-height: 45vh;
  display: block;
}

@media (max-width:1000px){
  /* smaller on narrow viewports */
  .intro-split.container{min-height:28vh}
}

/* Remove section labels and red dot decorations rendered from data-label attributes */
section[data-label]{position:relative}
section[data-label]::before,
section[data-label]::after{
  display:none !important;
  content:none !important;
}

/* Intro scroll-down button */
.intro-split{position:relative}
.intro-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;text-decoration:none;z-index:5;backdrop-filter:blur(6px);transition:transform .22s ease,opacity .2s ease}
.intro-scroll svg{display:block}
.intro-scroll:hover{transform:translateX(-50%) translateY(-4px);opacity:0.95}
.intro-scroll:active{transform:translateX(-50%) translateY(-1px) scale(0.98)}
.intro-scroll{box-shadow:0 12px 40px rgba(0,0,0,0.18)}

/* Small visible label next to the intro scroll button */
.intro-scroll::after{
  content: 'Zobacz nasze usługi';
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  color: rgba(255,255,255,0.95);
  font-size: 0.82rem;
  font-weight:600;
  white-space:nowrap;
  text-shadow: 0 6px 14px rgba(0,0,0,0.45);
  pointer-events:none;
}

/* subtle bounce to draw attention */
@keyframes intro-bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-8px)}60%{transform:translateX(-50%) translateY(-4px)}}
.intro-scroll{animation:intro-bounce 4s infinite ease-in-out;animation-delay:1s}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

@media (max-width:900px){
  .intro-scroll{width:48px;height:48px;bottom:18px}
  .intro-scroll svg{width:28px;height:28px}
  .brand img.logo{height:45px}
  .intro-scroll{animation:none}
}

@media (max-width:1100px){
  section[data-label]::before, section[data-label]::after{left:1rem}
}

@media (prefers-reduced-motion: reduce){
  section[data-label]::after{transition:none}
}

/* Extra page depth overlays */
.bg-shapes::before{
  content:"";
  position:absolute;
  inset:-18% -22% -18% -22%;
  /* hide this decorative radial overlay to avoid local darkening on the photo */
  display: none !important;
  z-index:-8;
  pointer-events:none;
}
.bg-shapes::after{
  content:"";
  position:absolute;
  /* cover the area smoothly to avoid a hard horizontal band */
  inset:-10% -10% -10% -10%;
  background: linear-gradient(180deg, rgba(255,250,246,0.12), rgba(246,250,255,0.06));
  mix-blend-mode:overlay;
  z-index:-6;
  pointer-events:none;
  filter:blur(16px);
}

/* angled rounded rectangle ornaments */
.page-ornament{position:fixed;z-index:-7;pointer-events:none}
.page-ornament.o1{left:-6%;top:10%;width:540px;height:420px;border-radius:56px;background:linear-gradient(135deg, rgba(255,240,238,0.6), rgba(255,245,247,0.3));transform:rotate(-12deg);filter:blur(36px)}
.page-ornament.o2{right:-8%;top:40%;width:520px;height:380px;border-radius:46px;background:linear-gradient(135deg, rgba(238,246,255,0.5), rgba(245,250,255,0.35));transform:rotate(14deg);filter:blur(34px)}
.page-ornament.o3{left:8%;bottom:-10%;width:420px;height:300px;border-radius:46px;background:linear-gradient(135deg, rgba(255,248,242,0.35), rgba(250,240,250,0.18));transform:rotate(-6deg);filter:blur(44px)}

@media (max-width:1000px){
  .bg-shapes::before{display:none}
  .page-ornament{display:none}
}

/* Temporary debug: hide svg visuals and background overlay that may create a horizontal band
   If this fixes the issue, we can re-enable them with reduced opacity or adjusted sizes. */
.svg-visuals, .visual { display: none !important; }
.bg-shapes::after { display: none !important; }

/* Contact form styles */
.form-card{max-width:820px;margin-top:1.5rem;background:linear-gradient(180deg,#ffffff,#fcfcfd);padding:1.6rem;border-radius:14px;box-shadow:0 30px 80px rgba(13,13,13,0.06)}

/* Contact grid: form + aside */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  align-items: stretch;
}

.contact-card dl { margin: 0.35rem 0 0; }
.contact-card dt { font-weight:700; margin-top:0.45rem; color:var(--muted); }
.contact-card dd { margin: 0 0 0.5rem 0; }

/* Ensure both columns stretch equally and form fills the column height */
.contact-grid .form-card{margin-top:0;height:100%;display:flex;flex-direction:column}
.contact-grid .contact-form{flex:1}
.contact-grid .contact-card{height:100%;display:flex;flex-direction:column;justify-content:space-between}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Lift contact block on small screens by reducing section padding */
@media (max-width: 900px) {
  .contact-hero { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
  .contact-hero h1 { margin-top: 0.2rem; }
  .contact-hero .muted { margin-bottom: 0.5rem; }
}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;margin-bottom:0.85rem}
.label-text{font-size:0.86rem;font-weight:700;margin-bottom:0.45rem;color:var(--brand-dark)}
input[type="text"],input[type="email"],textarea{border:1px solid rgba(0,0,0,0.06);padding:0.8rem;border-radius:10px;font-size:1rem;background:white;transition:box-shadow .12s ease,border-color .12s ease}
textarea{min-height:140px}
input:focus,textarea:focus{outline:none;box-shadow:0 8px 30px rgba(228,0,1,0.08);border-color:var(--brand-red)}
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:0.6rem}
.form-note{color:var(--muted);font-size:0.92rem}
.form-success{margin-top:0.9rem;color:green;font-weight:700}
.field-error{color:#ffd7d4;background:rgba(228,0,1,0.04);padding:6px 8px;border-radius:8px;margin-top:8px;font-size:0.9rem;display:none}
.field.invalid .field-error{display:block}
.btn[disabled]{opacity:0.6;pointer-events:none}
.btn.btn-primary{background:linear-gradient(90deg,var(--brand-red),#ff5a44);color:#fff;border:none;padding:0.7rem 1.1rem;border-radius:999px;box-shadow:0 12px 40px rgba(228,0,1,0.14)}

@media (max-width:900px){
  .contact-form .form-row{grid-template-columns:1fr}
  .form-card{padding:1.2rem}
}

/* Sliding fixed header: header remains interactive and moves from top to bottom with scroll */
.site-header{position:fixed;left:0;right:0;top:0;transform:translateY(0);transition:transform 180ms linear;background:rgba(255,255,255,0.72);backdrop-filter:blur(6px);z-index:999}
/* keep content from being hidden under fixed header; JS will set body padding-top to header height */
/* small visual tweak for the nav when fixed */
.site-header .header-inner{padding:0.9rem 0}

/* Blurred translucent panel behind header contents to echo intro arrow blur */
.site-header .header-inner{position:relative}
.site-header .header-inner::before{
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 6px; bottom: 6px;
  border-radius: 12px;
  background: transparent;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 10px 30px rgba(6,10,13,0.06);
  z-index: 0;
  pointer-events: none;
}
.site-header .header-inner > * { position: relative; z-index: 1 }

@media (max-width:900px){
  .site-header .header-inner::before{left:4px;right:4px;top:4px;bottom:4px;border-radius:10px}
}

@media (prefers-reduced-motion: reduce){
  .site-header{transition:none}
}
:root {
  --shadow-xsmall: 0 6px 18px rgba(9,9,11,0.06);
  --shadow-small: 0 10px 30px rgba(8,8,10,0.08);
  --shadow-medium: 0 18px 50px rgba(7,7,9,0.10);
  --shadow-large: 0 40px 100px rgba(6,6,8,0.14);
  --shadow-inset: inset 0 8px 24px rgba(255,255,255,0.02);
}

/* Page vignette to deepen edges */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    radial-gradient(1200px 800px at 50% 40%, rgba(0,0,0,0.06), transparent 25%),
    radial-gradient(600px 400px at 10% 90%, rgba(0,0,0,0.035), transparent 30%);
  mix-blend-mode: multiply;
  opacity: .95;
}

/* Stronger shadows for hero/device frame */
.device-frame {
  box-shadow: var(--shadow-large), var(--shadow-inset);
  transform: translateZ(0);
}

/* Hero photo inside device frame */
.device-frame .hero-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}

/* Ensure hero image fills frame height so it matches hero copy height */
.hero-media{align-self:stretch}
.hero-media .device-frame{height:100%;display:flex;align-items:stretch}
.hero-media .device-frame .hero-photo{border-radius:10px}

/* Cards, contact form, pricing blob */
.card, .form-card, .pricing-blob, .kpi-card {
  box-shadow: var(--shadow-medium);
  transition: box-shadow .28s cubic-bezier(.2,.9,.3,1), transform .28s ease;
  will-change: transform, box-shadow;
}
.card:hover, .form-card:hover, .pricing-blob:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-large);
}

/* Glow / blur outline + deeper shadow for lift effect on cards */
.card{position:relative;z-index:1;overflow:visible}

/* When hovering a card: blur the page background using an overlay and
   bring the hovered card forward with scale and z-index. Uses CSS :has()
   so it works without JS in modern browsers. The overlay is placed below
   the fixed header (which has higher z-index). */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50; /* below header (site-header z-index is 999) */
  opacity: 0;
  transition: opacity .28s ease, backdrop-filter .28s ease, background-color .28s ease;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  background: transparent;
}

/* Activate overlay when any card is hovered */
body:has(.card:hover)::before{
  opacity: 1;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  background: rgba(255,255,255,0.02);
}

/* Hover state: card scales and is placed above the overlay */
.card:hover{
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 34px 120px rgba(6,10,13,0.14) !important;
  z-index: 60 !important; /* above overlay, below header */
}

/* Slightly subtler effect for smaller cards */
.card.small{ }

@media (prefers-reduced-motion: reduce){
  .card::before, .card{transition:none !important}
}

/* Subtle inner rim for hero panels */
.hero-panel, .intro-split, .cta-panel {
  box-shadow: var(--shadow-small), var(--shadow-inset);
}

/* Floating blurred ornaments feel lifted */
.page-ornament {
  filter: drop-shadow(0 30px 60px rgba(6,6,8,0.12));
  transform: translateZ(0);
}

/* Elevate CTA button with crisp shadow */
.btn-primary {
  box-shadow: 0 18px 40px rgba(228,0,1,0.12), 0 6px 18px rgba(0,0,0,0.06);
}

/* Make floating shapes cast soft shadows */
.bg-shapes > * {
  filter: blur(22px) saturate(1.05);
  mix-blend-mode: screen;
}

/* KPI numbers pop with subtle highlight */
.kpi-number {
  text-shadow: 0 6px 18px rgba(16,16,16,0.06);
}

/* Soften effects on small screens and for reduced motion */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .card, .form-card, .pricing-blob, .kpi-card, .device-frame { box-shadow: var(--shadow-small); }
  .page-ornament { filter: blur(14px); }
}

/* Viewer section styles */
.viewer-section{padding:3rem 0}
.viewer-grid{display:flex;gap:28px;align-items:center}
.viewer-grid{display:flex;gap:28px;align-items:center}
.viewer-copy{flex:0 1 56%;max-width:720px;display:flex;flex-direction:column;justify-content:flex-start;padding-top:0.4rem;min-height:460px}
.viewer-copy h2{font-size:1.6rem;margin-bottom:0.35rem}
.viewer-copy ul{margin:0.75rem 0 1rem;padding-left:1.1rem}
.viewer-qr{flex:1 1 44%;display:flex;flex-direction:column;align-items:center;gap:8px}
.qr-placeholder{border-radius:12px;border:1px dashed rgba(0,0,0,0.06);background:#fff}
.muted.small{font-size:0.88rem;color:var(--muted);text-align:center;margin-top:0.45rem}

/* Center demo button under model */
.viewer-copy [data-demo]{display:block;margin:0.75rem 0 0 0}
.viewer-qr [data-demo]{display:none}

@media (max-width:900px){
  .viewer-copy [data-demo]{display:none}
  .viewer-qr [data-demo]{display:block;margin:0.75rem auto 0 auto;width:100%;max-width:420px}
  .viewer-qr [data-demo].btn{width:100%;box-sizing:border-box}
}

@media (max-width:900px){
  .viewer-grid{flex-direction:column;align-items:flex-start}
  .viewer-qr{width:100%}
  .viewer-copy h2{font-size:1.35rem}
}

/* Mobile-first responsive adjustments */
@media (max-width:900px){
  .viewer-grid{flex-direction:column;gap:18px;padding:0 1rem}
  /* Put model above the text on narrow screens */
  .viewer-copy{order:2;flex:1 1 auto;max-width:100%;min-height:unset;align-items:flex-start;justify-content:flex-start}
  .viewer-copy h2{font-size:1.4rem}
  .viewer-copy p, .viewer-copy ul{font-size:0.98rem}
  .viewer-qr{order:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;width:100%}
  .viewer-qr .muted.small{text-align:left}
  .ar-model{height:360px;border-radius:10px}
}

@media (max-width:600px){
  .container{padding-left:1rem;padding-right:1rem}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .intro-grid{grid-template-columns:1fr}
  .viewer-grid{gap:14px}

@media (max-width:600px){
  /* hide the adjacent label on very small screens to avoid overlap */
  .intro-scroll::after{display:none}
}
  .viewer-copy h2{font-size:1.25rem}
  .viewer-copy p, .viewer-copy ul{font-size:0.96rem}
  .ar-model{height:320px}
  /* Header: center logo and hide nav on very small screens */
  .site-header .header-inner{justify-content:center;padding:0.6rem 0}
  .site-header .nav{display:none}
  .site-header .brand{margin:0 auto}
  /* ensure no horizontal overflow on smallest devices */
  html,body{overflow-x:hidden}
  /* Ensure model-viewer is full-width and centered on small screens */
  .viewer-qr{display:block;width:100%;text-align:center}
  .viewer-qr model-viewer, .viewer-qr .ar-model{max-width:100% !important;width:100% !important;height:320px !important;margin:0 auto;border-radius:10px}
  html,body{overflow-x:hidden}
  .kpi-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .device-frame,.placeholder-tile{height:auto}

  /* Reduce vertical spacing between intro image and hero on phones */
  .intro-split.container{padding-bottom:0.6rem}
  /* Enlarge intro background image on small screens to better fill area (increased) */
  .intro-split.container{background-size:280% auto;background-position:center center}
  .hero{padding-top:1.2rem}
  /* Slightly tighten hero grid gap on very small screens */
  .hero-grid{gap:12px}

/* Services grid: 2x2 layout on desktop, single column on small screens */
#services .grid.grid-3{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  align-items:start;
}
#services .grid.grid-3 .card{padding:1.25rem;min-height:160px}

@media (max-width:900px){
  #services .grid.grid-3{grid-template-columns:1fr;}
}

/* Raise the services section on small screens so it's closer to the hero image */
@media (max-width:900px){
  #services { margin-top: -1.2rem; padding-top: 0.6rem; }
  /* slightly reduce gap inside services cards for compact layout */
  #services .grid .card{ padding:1rem; }
}

/* QR modal styles (used by demo button) */
.qr-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000;padding:28px}
.qr-modal.active{display:flex}
.qr-modal-backdrop{position:absolute;inset:0;background:rgba(6,6,8,0.6);backdrop-filter:blur(2px)}
.qr-modal-content{position:relative;z-index:1;background:linear-gradient(180deg,#ffffff,#fbfbff);padding:20px;border-radius:12px;box-shadow:0 30px 80px rgba(13,13,13,0.12);max-width:420px;width:100%;text-align:center}
.qr-close{position:absolute;right:10px;top:8px;background:transparent;border:none;font-size:22px;line-height:1;color:rgba(0,0,0,0.6);cursor:pointer}
.qr-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-box{background:#fff;padding:6px;border-radius:10px}
.qr-caption{color:var(--muted);font-size:0.95rem}
.qr-image{display:block;width:220px;height:220px;object-fit:contain;border-radius:8px;border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-small)}

@media (max-width:600px){
  .qr-modal-content{max-width:92%;padding:14px}
  .qr-image{width:180px;height:180px}
}

/* Link style inside QR caption */
.qr-caption a, .qr-caption a:visited { color: var(--brand-red); font-weight:700; text-decoration:underline; }
.qr-caption a:hover { color: #ff6a53; }
}

/* Better touch affordance: reduce hover transforms on small devices */
@media (pointer:coarse){
  button, .btn { transform: none !important; }
}

/* Screenshot image for viewer */
.qr-image{display:block;width:160px;height:auto;border-radius:12px;object-fit:cover;border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-small);}
@media (max-width:900px){
  .qr-image{width:100%;max-width:320px}
}

/* Header visual: remove any visible white/translucent panel and keep only
   a soft outer shadow. The pseudo-element will be transparent so no white
   rounded rectangle appears under header contents. */
.site-header{
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  /* outer soft lift shadow */
  box-shadow: 0 28px 96px rgba(6,10,13,0.12) !important;
}
.site-header .header-inner{
  background: transparent !important;
  position:relative;
}
.site-header .header-inner::before{
  /* keep transparent so only the shadow shows; no white fill */
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}
.site-header .header-inner > * { position: relative; z-index: 1 }


/* Blender screenshot in AR section */
.ar-screenshot-figure{display:block;width:100%;text-align:center;margin:0 0 1rem}
.ar-screenshot{display:block;width:100%;max-width:1400px;height:520px;margin:0 auto;border-radius:12px;border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-small);object-fit:contain;background-color:#2f2f2f}
.ar-screenshot-figure{display:block;width:100%;text-align:center;margin:0 0 1rem}
.ar-screenshot-figure figcaption{font-size:0.95rem;color:var(--muted);text-align:center;max-width:1400px;margin:0.6rem auto}

/* Styles for <model-viewer> in AR section */
.ar-model{display:block;width:100%;max-width:1100px;height:460px;margin:0 auto;border-radius:12px;overflow:hidden;background:#2f2f2f;border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-small)}
.ar-model::part(controls) { border-radius: 8px; }
.ar-caption{font-size:0.95rem;color:var(--muted);text-align:center;max-width:1400px;margin:0.6rem auto}
@media (max-width:900px){
  .ar-screenshot{max-width:100%;height:auto;margin:0}
  .ar-screenshot-figure{align-items:flex-start;text-align:left}
  .ar-screenshot-figure figcaption{text-align:left}
  .ar-model{height:auto}
  .ar-caption{text-align:left}
}

/* QR modal styles */
.qr-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000;padding:32px}
.qr-modal.active{display:flex}
.qr-modal-backdrop{position:absolute;inset:0;background:rgba(6,6,8,0.6);backdrop-filter:blur(2px)}
.qr-modal-content{position:relative;z-index:1;background:linear-gradient(180deg,#ffffff,#fbfbff);padding:24px;border-radius:12px;box-shadow:0 30px 80px rgba(13,13,13,0.12);max-width:460px;width:100%;text-align:center}
.qr-close{position:absolute;right:10px;top:8px;background:transparent;border:none;font-size:22px;line-height:1;color:rgba(0,0,0,0.6);cursor:pointer}
.qr-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-box{background:#fff;padding:8px;border-radius:8px}
.qr-caption{color:var(--muted);font-size:0.95rem}

@media (prefers-reduced-motion: reduce){
  .qr-modal, .qr-modal-content{transition:none}
}

/* Button hover/interaction: subtle scale + color change (no jump) */
button, .btn {
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .12s ease;
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
}

/* Apply hover scaling only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  button:hover, .btn:hover { transform: scale(1.035); }
  .btn-primary:hover { background: linear-gradient(90deg,var(--brand-red),#ff6a53); color:#fff; }
  .btn-secondary:hover { background: rgba(228,0,1,0.06); color:var(--brand-dark); }
}

/* Active / pressed state */
button:active, .btn:active { transform: scale(0.995); }

button:focus, .btn:focus {
  outline: none;
  box-shadow: 0 20px 60px rgba(34,34,34,0.12), 0 6px 18px rgba(0,0,0,0.06);
}

/* Ensure anchor-based buttons also show pointer */
a.btn { cursor: pointer; }

/* Avoid transform on coarse pointers to prevent issues on touch devices */
@media (pointer: coarse) {
  button, .btn { transition: box-shadow .18s ease, opacity .12s ease; transform: none !important; }
}

/* Footer logo sizing — enlarged per request */
.footer-logo{height:96px;width:auto;display:block}
/* slightly smaller on tablet */
@media (max-width:900px){.footer-logo{height:72px}}
/* mobile */
@media (max-width:600px){.footer-logo{height:56px}}

/* --- Desktop header: white full-width with shadow --- */
@media (hover: hover) and (pointer: fine) {
  .site-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 36px rgba(6,10,13,0.12) !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    left: 0; right: 0; width: 100%;
  }
  .site-header .header-inner::before{ display:none !important; }
  /* ensure overlay on card hover doesn't reintroduce page blur */
  body:has(.card:hover)::before { opacity: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* --- Disable card hover zoom on touch (coarse pointers) --- */
@media (pointer: coarse) {
  .card:hover, .card:active {
    transform: none !important;
    box-shadow: var(--shadow-medium) !important;
    z-index: auto !important;
  }
  /* ensure the body's overlay doesn't activate on touch */
  body:has(.card:hover)::before { opacity: 0 !important; backdrop-filter: none !important; }
}