
/* =========================================================
   LAYOUT DIVERSITY — PAGE ARCHETYPES
   Purpose: stop every page from repeating "copy left / visual right".
   Motion stays secondary; composition does the differentiation.
   ========================================================= */

/* ---------- 01 / RESTAURANT = CONVERSION BOARD ---------- */
.restaurant-solution-page .rest-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start;
  gap:0 1.1rem
}
.restaurant-solution-page .rest-hero-copy{
  grid-column:1/9;
  max-width:980px
}
.restaurant-solution-page .rest-hero-copy h1{
  max-width:11.5ch;
  font-size:clamp(3.7rem,6.6vw,7rem)
}
.restaurant-solution-page .rest-hero-copy .lead{max-width:820px}
.restaurant-solution-page .rest-hero-visual{
  grid-column:1/-1;
  min-height:390px;
  margin-top:2.4rem;
  border-top:1px solid rgba(0,245,255,.12);
  border-bottom:1px solid rgba(139,92,246,.1);
  overflow:hidden;
  display:block;
  background:
    linear-gradient(90deg,rgba(0,245,255,.025),transparent 32%,rgba(139,92,246,.035)),
    rgba(255,255,255,.012)
}
.restaurant-solution-page .restaurant-radar{
  left:auto;
  right:7%;
  top:50%;
  transform:translateY(-50%) scale(.82)
}
.restaurant-solution-page .restaurant-phone{
  position:absolute;
  right:15%;
  top:-88px;
  width:260px;
  height:500px;
  transform:rotate(5deg);
  transform-origin:center
}
.restaurant-solution-page .rfc-a{inset:auto;left:4%;top:74px}
.restaurant-solution-page .rfc-b{inset:auto;left:27%;top:176px}
.restaurant-solution-page .rfc-c{inset:auto;left:49%;top:92px}
.restaurant-solution-page .rest-proof-row{
  max-width:760px
}

/* ---------- 02 / HOMESTAY = EDITORIAL STAY BROCHURE ---------- */
.homestay-solution-page .stay-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:center;
  gap:0;
  min-height:690px
}
.homestay-solution-page .stay-hero-visual{
  grid-column:1/9;
  grid-row:1;
  min-height:620px;
  border-radius:30px;
  overflow:hidden;
  justify-self:stretch;
  background:
    radial-gradient(circle at 32% 28%,rgba(0,245,255,.11),transparent 25rem),
    linear-gradient(145deg,rgba(9,22,46,.78),rgba(20,10,55,.72))
}
.homestay-solution-page .stay-location-field{
  left:28%;
  transform:translate(-50%,-50%) scale(1.08)
}
.homestay-solution-page .stay-phone{
  position:absolute;
  left:11%;
  top:50%;
  transform:translateY(-50%) rotate(-4deg);
  width:310px;
  height:580px
}
.homestay-solution-page .stay-hero-copy{
  grid-column:7/13;
  grid-row:1;
  z-index:6;
  padding:clamp(1.7rem,3vw,3rem);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(4,9,22,.93),rgba(15,9,43,.9));
  border:1px solid rgba(142,118,255,.18);
  box-shadow:0 32px 90px rgba(0,0,0,.34);
  backdrop-filter:blur(18px)
}
.homestay-solution-page .stay-hero-copy h1{
  font-size:clamp(3rem,5.1vw,5.4rem);
  max-width:10ch
}
.homestay-solution-page .stay-hero-copy .lead{font-size:1rem}
.homestay-solution-page .stay-proof-row{grid-template-columns:repeat(2,1fr)}
.homestay-solution-page .sfc-a{inset:auto;left:4%;top:9%}
.homestay-solution-page .sfc-b{inset:auto;left:40%;bottom:7%}
.homestay-solution-page .sfc-c{inset:auto;left:3%;bottom:16%}

/* ---------- 03 / TOURISM = ROUTE ATLAS ---------- */
.tourism-solution-page .tour-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:stretch;
  gap:0
}
.tourism-solution-page .tour-hero-visual{
  grid-column:1/-1;
  grid-row:1;
  min-height:680px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 34%,rgba(0,245,255,.09),transparent 23rem),
    linear-gradient(135deg,rgba(7,17,39,.82),rgba(20,8,50,.78))
}
.tourism-solution-page .tour-route-field{
  width:100%;
  max-width:none;
  height:100%;
  border-radius:0;
  opacity:.9
}
.tourism-solution-page .tour-phone{
  position:absolute;
  right:8%;
  bottom:-88px;
  width:305px;
  height:570px;
  transform:rotate(4deg)
}
.tourism-solution-page .tour-hero-copy{
  grid-column:1/7;
  grid-row:1;
  align-self:center;
  z-index:6;
  margin-left:clamp(1.2rem,4vw,4rem);
  padding:clamp(1.2rem,2vw,2rem);
  max-width:720px;
  background:linear-gradient(90deg,rgba(3,5,13,.92),rgba(3,5,13,.72) 72%,transparent);
  border-left:2px solid rgba(0,245,255,.32)
}
.tourism-solution-page .tour-hero-copy h1{
  font-size:clamp(3.5rem,5.9vw,6.3rem);
  max-width:9.5ch
}
.tourism-solution-page .tour-hero-copy .lead{max-width:620px;font-size:1rem}
.tourism-solution-page .tour-proof-row{grid-template-columns:repeat(2,1fr);max-width:580px}
.tourism-solution-page .tfc-a{inset:auto;right:34%;top:11%}
.tourism-solution-page .tfc-b{inset:auto;right:32%;bottom:13%}
.tourism-solution-page .tfc-c{inset:auto;right:5%;top:15%}

/* ---------- 04 / GOOGLE MAPS = LOCAL COMMAND CENTER ---------- */
.maps-solution-page .maps-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start;
  gap:1rem
}
.maps-solution-page .maps-hero-copy{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  column-gap:clamp(2.5rem,6vw,7rem);
  align-items:end
}
.maps-solution-page .maps-hero-copy .breadcrumb,
.maps-solution-page .maps-hero-copy .eyebrow{grid-column:1/-1}
.maps-solution-page .maps-hero-copy h1{
  grid-column:1;
  grid-row:3/6;
  max-width:9.8ch;
  margin:0;
  font-size:clamp(3.7rem,6.6vw,7rem)
}
.maps-solution-page .maps-hero-copy .lead{
  grid-column:2;
  grid-row:3;
  align-self:end;
  margin:0
}
.maps-solution-page .maps-hero-actions{
  grid-column:2;
  grid-row:4;
  align-self:start
}
.maps-solution-page .maps-hero-proof{
  grid-column:2;
  grid-row:5;
  max-width:none
}
.maps-solution-page .maps-hero-visual{
  grid-column:1/-1;
  min-height:470px;
  margin-top:2.3rem;
  border-radius:26px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,245,255,.025),rgba(85,114,255,.025) 45%,rgba(139,92,246,.04)),
    rgba(255,255,255,.012);
  border:1px solid rgba(0,245,255,.1)
}
.maps-solution-page .local-radar{
  left:69%;
  width:520px
}
.maps-solution-page .gbp-card{
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  width:min(520px,48vw)
}
.maps-solution-page .maps-float-a{inset:auto;left:52%;top:15%}
.maps-solution-page .maps-float-b{inset:auto;right:8%;bottom:19%}
.maps-solution-page .maps-float-c{inset:auto;right:15%;top:18%}

/* ---------- 05 / QR MENU = PRODUCT LAUNCH STAGE ---------- */
.qr-solution-page .qr-hero-layout{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center
}
.qr-solution-page .qr-hero-copy{
  max-width:1060px
}
.qr-solution-page .qr-hero-copy h1{
  max-width:13ch;
  margin-inline:auto;
  font-size:clamp(3.8rem,6.5vw,7rem)
}
.qr-solution-page .qr-hero-copy .lead{
  margin-inline:auto;
  max-width:820px
}
.qr-solution-page .qr-hero-actions,
.qr-solution-page .qr-capability-row{
  justify-content:center
}
.qr-solution-page .qr-capability-row{
  max-width:900px;
  margin-inline:auto
}
.qr-solution-page .qr-hero-visual{
  width:min(980px,100%);
  min-height:570px;
  margin-top:1.4rem
}
.qr-solution-page .qr-phone{
  height:560px;
  width:300px;
  transform:none
}
.qr-solution-page .qr-demo-code{
  left:8%;
  top:30%
}
.qr-solution-page .qfc-a{inset:auto;left:4%;top:11%}
.qr-solution-page .qfc-b{inset:auto;right:4%;top:18%}
.qr-solution-page .qfc-c{inset:auto;right:8%;bottom:14%}

/* ---------- 06 / ABOUT = MANIFESTO ---------- */
.about-page .about-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:center;
  gap:0;
  min-height:620px
}
.about-page .about-hero-copy{
  grid-column:1/10;
  grid-row:1;
  z-index:6
}
.about-page .about-hero-copy h1{
  max-width:12.5ch;
  font-size:clamp(4rem,7.5vw,8rem)
}
.about-page .about-hero-copy .lead{max-width:760px}
.about-page .about-hero-visual{
  grid-column:7/13;
  grid-row:1;
  min-height:600px;
  opacity:.34;
  pointer-events:none
}
.about-page .brand-core{
  width:min(650px,58vw)
}
.about-page .about-float-card{display:none}
.about-page .about-proof-row{
  max-width:760px
}

/* ---------- 07 / PRICING = MATRIX FIRST ---------- */
.pricing-page .pricing-hero-layout{
  display:grid;
  grid-template-columns:1fr;
  align-items:start
}
.pricing-page .pricing-hero-copy{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  column-gap:clamp(2.5rem,6vw,7rem);
  align-items:end
}
.pricing-page .pricing-hero-copy .breadcrumb,
.pricing-page .pricing-hero-copy .eyebrow{grid-column:1/-1}
.pricing-page .pricing-hero-copy h1{
  grid-column:1;
  grid-row:3/6;
  max-width:10ch;
  margin:0;
  font-size:clamp(3.8rem,6.6vw,7rem)
}
.pricing-page .pricing-hero-copy .lead{
  grid-column:2;
  grid-row:3;
  margin:0
}
.pricing-page .pricing-hero-actions{
  grid-column:2;
  grid-row:4
}
.pricing-page .pricing-proof-row{
  grid-column:2;
  grid-row:5;
  max-width:none
}
.pricing-page .pricing-hero-visual{
  min-height:auto;
  margin-top:2.6rem;
  display:block
}
.pricing-page .pricing-radar,
.pricing-page .pricing-float-card{display:none}
.pricing-page .pricing-stack{
  width:100%;
  height:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem
}
.pricing-page .price-chip{
  position:relative;
  inset:auto;
  transform:none;
  width:auto;
  min-height:178px
}
.pricing-page .price-chip strong{font-size:clamp(2rem,3vw,3rem)}

/* ---------- 08 / PROJECTS = VAULT INDEX / GALLERY ENTRY ---------- */
.projects-page .projects-hero-layout{
  display:grid;
  grid-template-columns:1fr;
  align-items:start
}
.projects-page .projects-hero-copy{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  column-gap:clamp(2.5rem,6vw,7rem)
}
.projects-page .projects-hero-copy .breadcrumb,
.projects-page .projects-hero-copy .eyebrow{grid-column:1/-1}
.projects-page .projects-hero-copy h1{
  grid-column:1;
  grid-row:3/7;
  max-width:11ch;
  margin:0;
  font-size:clamp(3.8rem,6.5vw,6.9rem)
}
.projects-page .projects-hero-copy .lead{
  grid-column:2;
  grid-row:3;
  margin:0
}
.projects-page .projects-hero-actions{grid-column:2;grid-row:4}
.projects-page .projects-proof-row{grid-column:2;grid-row:5;max-width:none}
.projects-page .projects-hero-visual{
  min-height:auto;
  margin-top:2.6rem;
  display:block
}
.projects-page .vault-core{
  width:100%;
  aspect-ratio:auto;
  border-radius:0;
  display:grid;
  grid-template-columns:1.15fr repeat(4,1fr);
  gap:.8rem
}
.projects-page .vault-ring,
.projects-page .vault-scan{display:none}
.projects-page .vault-center,
.projects-page .vault-node{
  position:relative;
  inset:auto;
  transform:none
}
.projects-page .vault-center{
  width:auto;
  height:180px;
  border-radius:18px;
  text-align:left;
  place-items:start;
  align-content:end;
  padding:1rem
}
.projects-page .vault-center strong{font-size:3.6rem}
.projects-page .vault-node{
  min-width:0;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:left;
  padding:1rem
}
.projects-page .projects-float-card{display:none}

/* ---------- 09 / AUDIT = DIAGNOSTIC CONSOLE ---------- */
.audit-page .audit-hero-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
  align-items:start
}
.audit-page .audit-hero-copy{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  column-gap:clamp(2.5rem,6vw,7rem);
  align-items:end
}
.audit-page .audit-hero-copy .breadcrumb,
.audit-page .audit-hero-copy .eyebrow{grid-column:1/-1}
.audit-page .audit-hero-copy h1{
  grid-column:1;
  grid-row:3/6;
  max-width:10.8ch;
  margin:0;
  font-size:clamp(3.7rem,6.5vw,6.9rem)
}
.audit-page .audit-hero-copy .lead{
  grid-column:2;
  grid-row:3;
  margin:0
}
.audit-page .audit-hero-actions{grid-column:2;grid-row:4}
.audit-page .audit-proof-row{grid-column:2;grid-row:5;max-width:none}
.audit-page .audit-hero-visual{
  grid-column:1/-1;
  min-height:360px;
  margin-top:2.3rem;
  overflow:hidden;
  border-top:1px solid rgba(0,245,255,.12);
  border-bottom:1px solid rgba(139,92,246,.1);
  background:linear-gradient(90deg,rgba(0,245,255,.02),rgba(85,114,255,.03),rgba(139,92,246,.03))
}
.audit-page .diagnostic-core{
  width:760px;
  max-width:86vw;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.78)
}
.audit-page .afc-a{left:4%;top:12%}
.audit-page .afc-b{right:4%;bottom:12%}


/* Floating labels are intrinsic-size annotations, never stretchable panels.
   Explicit sizes make the layout resilient even if a future archetype sets
   opposing inset edges. */
:where(
  .restaurant-solution-page .rest-float-card,
  .homestay-solution-page .stay-float-card,
  .tourism-solution-page .tour-float-card,
  .maps-solution-page .maps-float-card,
  .qr-solution-page .qr-float-card
){
  inline-size:max-content;
  block-size:max-content;
  max-inline-size:min(280px,45%);
  min-inline-size:0;
  min-block-size:0;
}

/* ---------- RESPONSIVE: preserve archetype, simplify safely ---------- */
@media(max-width:1100px){
  .homestay-solution-page .stay-hero-layout,
  .tourism-solution-page .tour-hero-layout,
  .about-page .about-hero-layout{
    min-height:auto
  }

  .homestay-solution-page .stay-hero-visual{
    grid-column:1/9
  }
  .homestay-solution-page .stay-hero-copy{
    grid-column:6/13
  }

  .tourism-solution-page .tour-hero-copy{
    grid-column:1/8
  }

  .maps-solution-page .maps-hero-copy,
  .pricing-page .pricing-hero-copy,
  .projects-page .projects-hero-copy,
  .audit-page .audit-hero-copy{
    grid-template-columns:1fr
  }
  .maps-solution-page .maps-hero-copy h1,
  .maps-solution-page .maps-hero-copy .lead,
  .maps-solution-page .maps-hero-actions,
  .maps-solution-page .maps-hero-proof,
  .pricing-page .pricing-hero-copy h1,
  .pricing-page .pricing-hero-copy .lead,
  .pricing-page .pricing-hero-actions,
  .pricing-page .pricing-proof-row,
  .projects-page .projects-hero-copy h1,
  .projects-page .projects-hero-copy .lead,
  .projects-page .projects-hero-actions,
  .projects-page .projects-proof-row,
  .audit-page .audit-hero-copy h1,
  .audit-page .audit-hero-copy .lead,
  .audit-page .audit-hero-actions,
  .audit-page .audit-proof-row{
    grid-column:1;
    grid-row:auto
  }
  .maps-solution-page .maps-hero-copy h1,
  .pricing-page .pricing-hero-copy h1,
  .projects-page .projects-hero-copy h1,
  .audit-page .audit-hero-copy h1{
    margin-bottom:1.2rem
  }

  .projects-page .vault-core{
    grid-template-columns:repeat(3,1fr)
  }
  .projects-page .vault-center{grid-column:span 3}
}

@media(max-width:820px){
  .restaurant-solution-page .rest-hero-copy{
    grid-column:1/-1
  }
  .restaurant-solution-page .rest-hero-visual{
    min-height:500px
  }
  .restaurant-solution-page .restaurant-phone{
    right:50%;
    top:0;
    transform:translateX(50%) rotate(2deg)
  }
  .restaurant-solution-page .rest-float-card{display:none}

  .homestay-solution-page .stay-hero-layout{
    display:flex;
    flex-direction:column
  }
  .homestay-solution-page .stay-hero-visual{
    width:100%;
    min-height:510px;
    order:2;
    border-radius:22px
  }
  .homestay-solution-page .stay-hero-copy{
    width:100%;
    order:1;
    margin-bottom:1.2rem;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none
  }
  .homestay-solution-page .stay-phone{
    left:50%;
    transform:translate(-50%,-50%);
    height:500px
  }

  .tourism-solution-page .tour-hero-layout{
    display:flex;
    flex-direction:column
  }
  .tourism-solution-page .tour-hero-copy{
    margin:0 0 1rem;
    padding:0;
    background:none;
    border-left:0
  }
  .tourism-solution-page .tour-hero-visual{
    min-height:560px
  }
  .tourism-solution-page .tour-phone{
    right:50%;
    transform:translateX(50%) rotate(2deg)
  }
  .tourism-solution-page .tour-float-card{display:none}

  .maps-solution-page .maps-hero-visual{
    min-height:560px
  }
  .maps-solution-page .gbp-card{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(430px,86vw)
  }
  .maps-solution-page .local-radar{
    left:50%;
    width:430px
  }
  .maps-solution-page .maps-float-card{display:none}

  .qr-solution-page .qr-hero-copy{text-align:left}
  .qr-solution-page .qr-hero-copy h1,
  .qr-solution-page .qr-hero-copy .lead{margin-inline:0}
  .qr-solution-page .qr-hero-actions,
  .qr-solution-page .qr-capability-row{justify-content:flex-start}

  .about-page .about-hero-copy{
    grid-column:1/-1
  }
  .about-page .about-hero-visual{
    grid-column:6/13;
    opacity:.18
  }

  .pricing-page .pricing-stack{
    grid-template-columns:repeat(2,1fr)
  }
  .projects-page .vault-core{
    grid-template-columns:repeat(2,1fr)
  }
  .projects-page .vault-center{grid-column:span 2}
  .audit-page .audit-hero-visual{min-height:420px}
}

@media(max-width:560px){
  .restaurant-solution-page .rest-hero-visual,
  .homestay-solution-page .stay-hero-visual,
  .tourism-solution-page .tour-hero-visual,
  .maps-solution-page .maps-hero-visual,
  .qr-solution-page .qr-hero-visual,
  .audit-page .audit-hero-visual{
    min-height:460px
  }

  .restaurant-solution-page .restaurant-phone,
  .homestay-solution-page .stay-phone,
  .tourism-solution-page .tour-phone,
  .qr-solution-page .qr-phone{
    width:min(270px,78vw);
    height:500px
  }

  .pricing-page .pricing-stack,
  .projects-page .vault-core{
    grid-template-columns:1fr
  }
  .projects-page .vault-center{grid-column:auto}
  .projects-page .vault-center,
  .projects-page .vault-node{min-height:130px;height:auto}

  .about-page .about-hero-visual{display:none}
  .about-page .about-hero-copy h1{
    font-size:clamp(3rem,14vw,4.7rem)
  }
}
