/* =========================================================
   SMART FARM HOME — WELCOME V3
   Elegant Smooth / Vertical Welcome / 3D Feeling
   ========================================================= */

:root{
  --home-bg:#061211;
  --home-panel:#0a1c1a;
  --home-text:#eef0ea;
  --home-muted:#8da098;
  --home-green:#68c49a;
  --home-green-soft:#8dcf77;
  --home-gold:#c6aa6b;
}

body.home-page{
  margin:0;
  background:var(--home-bg);
  color:var(--home-text);
}

.home-page .site-header,
.home-page .main-header{
  position:fixed;
  z-index:50;
  width:100%;
  background:linear-gradient(180deg,rgba(2,12,11,.90),rgba(2,12,11,.60),transparent);
  border-bottom-color:transparent;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.home-main{
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%,rgba(65,139,114,.12),transparent 24rem),
    radial-gradient(circle at 80% 33%,rgba(192,163,91,.08),transparent 25rem),
    linear-gradient(180deg,#071615 0%,#04100f 54%,#020b0a 100%);
}

/* =========================================================
   WELCOME
   ========================================================= */

.welcome-screen{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:90px 0 34px;
  isolation:isolate;
}

.welcome-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),transparent 90%);
}

.welcome-layout{
  position:relative;
  z-index:2;
  width:calc(100% - 24px);
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
}

.welcome-ambient{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.ambient{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(48px);
  opacity:.28;
  animation:ambientDrift 12s ease-in-out infinite alternate;
}

.ambient--1{
  width:240px;
  height:240px;
  left:-90px;
  top:17%;
  background:rgba(77,162,122,.22);
}

.ambient--2{
  width:190px;
  height:190px;
  right:9%;
  top:28%;
  background:rgba(194,163,91,.16);
  animation-duration:15s;
}

.ambient--3{
  width:170px;
  height:170px;
  left:39%;
  bottom:3%;
  background:rgba(77,148,183,.12);
  animation-duration:17s;
}

@keyframes ambientDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(18px,-15px,0) scale(1.08)}
}

/* =========================================================
   HERO VISUAL
   ========================================================= */

.welcome-visual{
  position:relative;
  max-width:590px;
  margin:0 auto;
  transform-style:preserve-3d;
  perspective:1100px;
}

.welcome-visual__frame{
  position:relative;
  width:100%;
  aspect-ratio:0.72;
  overflow:hidden;
  border:1px solid rgba(130,201,177,.58);
  border-radius:28px;
  background:#0c1a19;
  box-shadow:
    0 42px 90px rgba(0,0,0,.35),
    0 0 0 1px rgba(198,170,107,.14),
    0 0 44px rgba(93,176,131,.08);
  transform:translateZ(0);
  animation:heroFloat 6.5s ease-in-out infinite;
  will-change:transform;
}

@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}
  50%{transform:translate3d(0,-9px,0) rotateX(.8deg) rotateY(-.7deg)}
}

.welcome-visual__image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:32% center;
  transform:scale(1.02);
  filter:saturate(.94) contrast(1.02) brightness(.92);
}

.welcome-visual__shine{
  position:absolute;
  z-index:2;
  inset:-35% auto -35% -60%;
  width:44%;
  transform:skewX(-16deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.04),
    rgba(144,228,198,.08),
    transparent
  );
  animation:frameShine 8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes frameShine{
  0%,20%{left:-70%;opacity:0}
  42%{opacity:1}
  62%,100%{left:130%;opacity:0}
}

.welcome-visual__corner{
  position:absolute;
  z-index:3;
  width:38px;
  height:38px;
  pointer-events:none;
}

.welcome-visual__corner--tl{
  top:-1px;
  left:-1px;
  border-left:2px solid var(--home-green);
  border-top:2px solid var(--home-green);
  border-top-left-radius:28px;
}

.welcome-visual__corner--br{
  right:-1px;
  bottom:-1px;
  border-right:2px solid var(--home-gold);
  border-bottom:2px solid var(--home-gold);
  border-bottom-right-radius:28px;
}

.welcome-copy{
  margin-top:22px;
  text-align:center;
}

.welcome-copy>span{
  display:block;
  color:var(--home-gold);
  font-size:11px;
  font-weight:600;
  letter-spacing:7px;
}

.welcome-copy h1{
  margin:8px 0 0;
  color:#f0eee7;
  font-size:31px;
  font-weight:450;
  letter-spacing:-.4px;
}

.welcome-copy h1 em{
  color:var(--home-green-soft);
  font-style:normal;
}

/* =========================================================
   QR STREAM
   ========================================================= */

.qr-stream{
  position:relative;
  width:100%;
  height:500px;
  max-width:540px;
  margin:0 auto;
  overflow:hidden;
  outline:none;
  touch-action:pan-y;
}

.qr-stream:focus-visible{
  box-shadow:0 0 0 1px rgba(198,170,107,.55);
  border-radius:18px;
}

.qr-stream__path{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 5px rgba(198,170,107,.18));
}

.stream-light{
  fill:#ddc679;
  filter:drop-shadow(0 0 7px rgba(221,198,121,.85));
}

.stream-light--2{
  fill:#77d6a8;
  filter:drop-shadow(0 0 7px rgba(119,214,168,.85));
}

.qr-stream__items{
  position:absolute;
  inset:0;
}

.qr-node{
  position:absolute;
  left:0;
  top:0;
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  padding:6px;
  border:1px solid rgba(229,216,181,.58);
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(20,29,27,.98),rgba(8,18,17,.98));
  box-shadow:
    0 15px 34px rgba(0,0,0,.31),
    0 0 0 1px rgba(198,170,107,.08),
    0 0 18px rgba(198,170,107,.05);
  text-decoration:none;
  transform-origin:center;
  will-change:transform;
  transition:
    border-color .22s ease,
    box-shadow .22s ease;
}

.qr-node::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(107,208,176,.30),transparent 40%,rgba(198,170,107,.28));
  z-index:-1;
  opacity:.48;
}

.qr-node:hover,
.qr-node:focus-visible{
  border-color:rgba(223,200,127,.88);
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 24px rgba(198,170,107,.16);
  outline:none;
}

.qr-node__inner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  background:#f7f5ec;
}

.qr-node__inner canvas{
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
}

.qr-node.is-focus{
  animation:qrPulse 3.2s ease-in-out infinite;
}

@keyframes qrPulse{
  0%,100%{
    box-shadow:
      0 15px 34px rgba(0,0,0,.31),
      0 0 0 1px rgba(198,170,107,.10),
      0 0 16px rgba(198,170,107,.06);
  }
  50%{
    box-shadow:
      0 18px 36px rgba(0,0,0,.34),
      0 0 0 1px rgba(137,213,159,.23),
      0 0 28px rgba(137,213,159,.18);
  }
}

.qr-stream__mobile-actions{
  position:absolute;
  left:50%;
  bottom:9px;
  display:flex;
  gap:7px;
  transform:translateX(-50%);
}

.qr-stream__mobile-actions a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  background:rgba(6,20,18,.82);
  color:#98aaa3;
  font-size:11px;
  text-decoration:none;
}

/* =========================================================
   WAVES
   ========================================================= */

.welcome-waves{
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-70px;
  height:190px;
  z-index:0;
  pointer-events:none;
}

.welcome-waves span{
  position:absolute;
  left:0;
  width:110%;
  height:130px;
  border-top:1px solid rgba(95,201,162,.35);
  border-radius:50%;
  animation:waveDrift 10s ease-in-out infinite alternate;
}

.welcome-waves span:nth-child(1){
  top:0;
  transform:rotate(-4deg);
}

.welcome-waves span:nth-child(2){
  top:37px;
  border-color:rgba(198,170,107,.25);
  transform:rotate(4deg);
  animation-duration:13s;
}

.welcome-waves span:nth-child(3){
  top:72px;
  border-color:rgba(77,151,183,.25);
  transform:rotate(-2deg);
  animation-duration:16s;
}

@keyframes waveDrift{
  from{translate:-1.5% 0}
  to{translate:1.5% -7px}
}

/* =========================================================
   ABOUT
   ========================================================= */

.home-about{
  padding:68px 0;
  border-top:1px solid rgba(255,255,255,.04);
  background:#020b0a;
  scroll-margin-top:90px;
}

.home-about__inner{
  max-width:760px;
}

.home-about__inner>span{
  color:#7f958c;
  font-size:11px;
  font-weight:600;
  letter-spacing:.7px;
}

.home-about__inner h2{
  margin:8px 0 0;
  color:#e6dec8;
  font-size:27px;
  font-weight:450;
  line-height:1.3;
}

.home-about__inner p{
  margin:10px 0 0;
  color:#879892;
  font-size:14px;
  line-height:1.75;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:640px){
  .welcome-screen{
    padding-top:108px;
  }

  .welcome-layout{
    width:calc(100% - 40px);
  }

  .welcome-visual{
    max-width:630px;
  }

  .welcome-copy h1{
    font-size:36px;
  }

  .qr-stream{
    height:560px;
  }

  .qr-node{
    width:82px;
    height:82px;
  }
}

/* =========================================================
   DESKTOP / VERTICAL DISPLAY
   ========================================================= */

@media (min-width:960px){
  .welcome-screen{
    min-height:100vh;
    padding:112px 0 40px;
  }

  .welcome-layout{
    grid-template-columns:minmax(420px,.92fr) minmax(430px,.78fr);
    align-items:center;
    gap:30px;
  }

  .welcome-visual{
    max-width:520px;
  }

  .welcome-visual__frame{
    aspect-ratio:.72;
  }

  .welcome-copy{
    margin-top:20px;
  }

  .welcome-copy h1{
    font-size:38px;
  }

  .qr-stream{
    height:720px;
    max-width:470px;
  }

  .qr-node{
    width:90px;
    height:90px;
    padding:7px;
    border-radius:19px;
  }

  .qr-stream__mobile-actions{
    display:none;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .ambient,
  .welcome-visual__frame,
  .welcome-visual__shine,
  .qr-node.is-focus,
  .welcome-waves span{
    animation:none !important;
  }
}


/* =========================================================
   V4 — MOBILE FIRST SIDE QR
   QR อยู่ด้านขวาข้างภาพตั้งแต่จอมือถือแนวตั้ง
   ========================================================= */

.welcome-layout{
  display:block;
}

.welcome-stage{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 68%) minmax(0, 32%);
  align-items:stretch;
  gap:0;
  max-width:760px;
  margin:0 auto;
}

.welcome-visual{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  margin:0;
  perspective:1000px;
}

.welcome-visual__frame{
  width:100%;
  height:100%;
  min-height:clamp(430px, 128vw, 610px);
  aspect-ratio:auto;
  border-radius:24px;
}

.welcome-visual__image{
  object-position:28% center;
}

.qr-stream{
  position:relative;
  z-index:3;
  width:100%;
  height:auto;
  min-height:clamp(430px, 128vw, 610px);
  max-width:none;
  margin:0;
  overflow:visible;
  transform:none;
}

.qr-stream__path{
  left:-19%;
  width:124%;
  height:100%;
}

.qr-node{
  width:clamp(50px, 15vw, 72px);
  height:clamp(50px, 15vw, 72px);
  padding:5px;
  border-radius:14px;
}

.welcome-copy{
  margin-top:18px;
  text-align:center;
}

.qr-stream__mobile-actions{
  display:none;
}

/* ให้ QR ดูเป็นส่วนหนึ่งของภาพ ไม่แยกเป็นกล่องคนละ section */
.welcome-stage::after{
  content:"";
  position:absolute;
  z-index:1;
  top:5%;
  bottom:5%;
  left:64%;
  width:28%;
  background:
    radial-gradient(circle at 45% 50%,rgba(198,170,107,.055),transparent 64%);
  pointer-events:none;
}

/* จอเล็กมากยังคงวางข้างกัน */
@media (max-width:359px){
  .welcome-stage{
    grid-template-columns:minmax(0, 70%) minmax(0, 30%);
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:410px;
  }

  .qr-node{
    width:46px;
    height:46px;
    padding:4px;
    border-radius:12px;
  }

  .welcome-copy h1{
    font-size:27px;
  }
}

/* Tablet: ขยายช่อง QR เล็กน้อย */
@media (min-width:640px){
  .welcome-stage{
    grid-template-columns:minmax(0, 70%) minmax(0, 30%);
    max-width:820px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:680px;
  }

  .qr-node{
    width:78px;
    height:78px;
  }

  .welcome-copy{
    margin-top:22px;
  }
}

/* Desktop และจอแนวตั้งขนาดใหญ่ก็ยังอยู่ข้างภาพ ไม่แยกสองคอลัมน์ใหญ่ */
@media (min-width:960px){
  .welcome-layout{
    width:calc(100% - 48px);
    max-width:1180px;
  }

  .welcome-stage{
    grid-template-columns:minmax(0, 72%) minmax(0, 28%);
    max-width:880px;
  }

  .welcome-visual{
    max-width:none;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:760px;
  }

  .qr-node{
    width:88px;
    height:88px;
    padding:7px;
    border-radius:18px;
  }

  .welcome-copy{
    margin-top:24px;
  }

  .welcome-copy h1{
    font-size:40px;
  }
}

/* Portrait display เช่น 1080x1920 */
@media (min-width:900px) and (orientation:portrait){
  .welcome-stage{
    max-width:920px;
    grid-template-columns:minmax(0, 73%) minmax(0, 27%);
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:min(70vh, 980px);
  }
}


/* =========================================================
   V5 — 60 / 40 + LABELED QR
   ภาพหลัก 60% / QR 40%
   QR ต่อท้ายด้วยชื่อปลายทาง
   ========================================================= */

/* Mobile First */
.welcome-stage{
  grid-template-columns:minmax(0, 60%) minmax(0, 40%) !important;
  max-width:760px;
}

.welcome-visual__frame{
  min-height:clamp(390px, 112vw, 555px);
  border-radius:22px;
}

.qr-stream{
  min-height:clamp(390px, 112vw, 555px);
}

.welcome-stage::after{
  left:56%;
  width:38%;
}

/* QR card = QR + destination label */
.qr-node{
  width:auto !important;
  height:auto !important;
  min-width:clamp(112px, 33vw, 150px);
  min-height:54px;
  display:flex !important;
  align-items:center;
  gap:7px;
  padding:5px 8px 5px 5px !important;
  border-radius:14px;
  background:rgba(7,18,17,.94);
}

.qr-node__inner{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:8px;
}

.qr-node__label{
  min-width:0;
  display:block;
  overflow:hidden;
  color:#d9ddd8;
  font-size:10px;
  font-weight:500;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.qr-node.is-focus .qr-node__label{
  color:#e7d39e;
}

.qr-stream__path{
  left:-10%;
  width:112%;
}

/* Small phone */
@media (max-width:359px){
  .welcome-stage{
    grid-template-columns:minmax(0, 60%) minmax(0, 40%) !important;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:375px;
  }

  .qr-node{
    min-width:102px;
    min-height:49px;
    gap:6px;
    padding:4px 7px 4px 4px !important;
  }

  .qr-node__inner{
    width:39px;
    height:39px;
  }

  .qr-node__label{
    font-size:9px;
  }
}

/* Tablet */
@media (min-width:640px){
  .welcome-stage{
    grid-template-columns:minmax(0, 62%) minmax(0, 38%) !important;
    max-width:820px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:620px;
  }

  .qr-node{
    min-width:165px;
    min-height:66px;
    gap:9px;
    padding:6px 10px 6px 6px !important;
  }

  .qr-node__inner{
    width:54px;
    height:54px;
  }

  .qr-node__label{
    font-size:12px;
  }
}

/* Desktop / vertical large display */
@media (min-width:960px){
  .welcome-stage{
    grid-template-columns:minmax(0, 60%) minmax(0, 40%) !important;
    max-width:900px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:700px;
  }

  .qr-node{
    min-width:185px;
    min-height:72px;
    gap:10px;
    padding:7px 12px 7px 7px !important;
    border-radius:17px;
  }

  .qr-node__inner{
    width:58px;
    height:58px;
  }

  .qr-node__label{
    font-size:13px;
  }
}

@media (min-width:900px) and (orientation:portrait){
  .welcome-stage{
    grid-template-columns:minmax(0, 60%) minmax(0, 40%) !important;
    max-width:940px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:min(64vh, 900px);
  }
}


/* =========================================================
   V6 — 55 / 45 + LARGE SCANNABLE QR
   ลดภาพหลักลงอีก และเพิ่ม QR ให้สแกนง่ายขึ้น
   ========================================================= */

.welcome-stage{
  grid-template-columns:minmax(0, 55%) minmax(0, 45%) !important;
  max-width:760px;
}

.welcome-visual__frame{
  min-height:clamp(370px, 104vw, 520px);
}

.qr-stream{
  min-height:clamp(370px, 104vw, 520px);
}

.welcome-stage::after{
  left:51%;
  width:44%;
}

.qr-node{
  min-width:clamp(128px, 38vw, 168px) !important;
  min-height:66px !important;
  gap:9px !important;
  padding:6px 10px 6px 6px !important;
  border-radius:15px !important;
}

.qr-node__inner{
  width:56px !important;
  height:56px !important;
  border-radius:9px !important;
}

.qr-node__label{
  font-size:11px !important;
  line-height:1.25;
}

.qr-stream__path{
  left:-6%;
  width:106%;
}

@media (max-width:359px){
  .welcome-stage{
    grid-template-columns:minmax(0, 54%) minmax(0, 46%) !important;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:350px;
  }

  .qr-node{
    min-width:116px !important;
    min-height:58px !important;
    gap:7px !important;
    padding:5px 8px 5px 5px !important;
  }

  .qr-node__inner{
    width:49px !important;
    height:49px !important;
  }

  .qr-node__label{
    font-size:10px !important;
  }
}

@media (min-width:640px){
  .welcome-stage{
    grid-template-columns:minmax(0, 56%) minmax(0, 44%) !important;
    max-width:840px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:590px;
  }

  .qr-node{
    min-width:184px !important;
    min-height:78px !important;
    gap:11px !important;
    padding:7px 12px 7px 7px !important;
  }

  .qr-node__inner{
    width:66px !important;
    height:66px !important;
  }

  .qr-node__label{
    font-size:13px !important;
  }
}

@media (min-width:960px){
  .welcome-stage{
    grid-template-columns:minmax(0, 55%) minmax(0, 45%) !important;
    max-width:920px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:660px;
  }

  .qr-node{
    min-width:205px !important;
    min-height:88px !important;
    gap:12px !important;
    padding:8px 14px 8px 8px !important;
    border-radius:18px !important;
  }

  .qr-node__inner{
    width:74px !important;
    height:74px !important;
    border-radius:11px !important;
  }

  .qr-node__label{
    font-size:14px !important;
  }
}

@media (min-width:900px) and (orientation:portrait){
  .welcome-stage{
    grid-template-columns:minmax(0, 55%) minmax(0, 45%) !important;
    max-width:960px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:min(61vh, 840px);
  }

  .qr-node__inner{
    width:78px !important;
    height:78px !important;
  }
}


/* =========================================================
   V7 — EXTRA LARGE QR
   เพิ่มขนาด QR เข้าไปอีกเพื่อสแกนง่ายขึ้น
   ========================================================= */

/* Mobile First */
.qr-node{
  min-width:clamp(142px, 41vw, 178px) !important;
  min-height:74px !important;
  gap:10px !important;
  padding:7px 11px 7px 7px !important;
  border-radius:16px !important;
}

.qr-node__inner{
  width:64px !important;
  height:64px !important;
  border-radius:10px !important;
}

.qr-node__label{
  font-size:11px !important;
  line-height:1.25;
}

/* Small phone */
@media (max-width:359px){
  .qr-node{
    min-width:126px !important;
    min-height:64px !important;
    gap:8px !important;
    padding:6px 9px 6px 6px !important;
  }

  .qr-node__inner{
    width:54px !important;
    height:54px !important;
  }

  .qr-node__label{
    font-size:10px !important;
  }
}

/* Tablet */
@media (min-width:640px){
  .qr-node{
    min-width:198px !important;
    min-height:88px !important;
    gap:12px !important;
    padding:8px 13px 8px 8px !important;
  }

  .qr-node__inner{
    width:76px !important;
    height:76px !important;
    border-radius:11px !important;
  }

  .qr-node__label{
    font-size:13px !important;
  }
}

/* Desktop */
@media (min-width:960px){
  .qr-node{
    min-width:220px !important;
    min-height:100px !important;
    gap:13px !important;
    padding:9px 15px 9px 9px !important;
    border-radius:18px !important;
  }

  .qr-node__inner{
    width:88px !important;
    height:88px !important;
    border-radius:12px !important;
  }

  .qr-node__label{
    font-size:14px !important;
  }
}

/* Large portrait screens */
@media (min-width:900px) and (orientation:portrait){
  .qr-node__inner{
    width:92px !important;
    height:92px !important;
  }
}


/* =========================================================
   V8 — BOUNCE QR MOTION
   QR เคลื่อนขึ้นลงระหว่างขอบบนและล่าง
   ========================================================= */
.qr-stream{
  overflow:hidden;
}


/* =========================================================
   V9 — MORE SPACING + DOWN FIRST
   เว้นระยะ QR มากขึ้น และเริ่มเลื่อนลงก่อน
   ========================================================= */
.qr-stream{
  overflow:hidden;
}

@media (min-width:960px){
  .qr-node{
    margin-block:2px;
  }
}


/* =========================================================
   V10 — HOME MENU = 5 MAIN SECTIONS ONLY
   หน้าแรก / E-Learning / IoT Lab / แบบทดสอบ / เกี่ยวกับ
   ========================================================= */
.qr-stream__mobile-actions{
  flex-wrap:wrap;
  justify-content:center;
  width:min(94%, 360px);
}


/* =========================================================
   V11 — BALANCED PORTRAIT SAFE AREA
   หน้าแรกอยู่บนสุด / 5 QR พอดีจอ / ไม่ตัดข้อความ
   ========================================================= */

/*
 * 55/45 ยังเหมาะกับ QR ขนาด 64px:
 * - รูปยังเป็นพระเอก
 * - ฝั่ง QR มีพื้นที่สำหรับข้อความภาษาไทย
 */
.welcome-stage{
  grid-template-columns:minmax(0, 55%) minmax(0, 45%) !important;
  max-width:740px;
}

/*
 * ลดความสูง Hero จาก V10 เล็กน้อย
 * เพื่อให้ชุดภาพ + WELCOME เห็นครบในจอแนวตั้งมือถือ
 */
.welcome-visual__frame,
.qr-stream{
  min-height:clamp(350px, 96vw, 485px) !important;
}

/*
 * QR stream ใช้ clipping ได้ แต่ node ทุกตัวถูกคำนวณให้อยู่ใน safe area
 * จึงไม่มีข้อความหายตอนเลื่อนลง
 */
.qr-stream{
  overflow:hidden !important;
}

/*
 * Card ไม่ควรกว้างเกินพื้นที่ 45% ของจอ
 * แต่ QR จริงยังคง 64x64 เพื่อสแกนง่าย
 */
.qr-node{
  min-width:clamp(132px, 39vw, 168px) !important;
  max-width:96% !important;
  min-height:74px !important;
  gap:9px !important;
  padding:6px 9px 6px 6px !important;
}

.qr-node__inner{
  width:64px !important;
  height:64px !important;
  flex:0 0 64px !important;
}

/* ป้องกันข้อความยาวเบียด QR */
.qr-node__label{
  min-width:0 !important;
  max-width:78px;
  overflow:hidden;
  font-size:11px !important;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ปรับ path ให้อยู่กลางคอลัมน์มากขึ้น */
.qr-stream__path{
  left:-2% !important;
  width:102% !important;
}

/* Small phone 320–359px */
@media (max-width:359px){
  .welcome-stage{
    grid-template-columns:minmax(0, 53%) minmax(0, 47%) !important;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:335px !important;
  }

  .qr-node{
    min-width:122px !important;
    min-height:66px !important;
    gap:7px !important;
    padding:5px 7px 5px 5px !important;
  }

  .qr-node__inner{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
  }

  .qr-node__label{
    max-width:58px;
    font-size:10px !important;
  }
}

/* Tablet */
@media (min-width:640px){
  .welcome-stage{
    grid-template-columns:minmax(0, 56%) minmax(0, 44%) !important;
    max-width:820px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:560px !important;
  }

  .qr-node{
    min-width:190px !important;
    min-height:86px !important;
  }

  .qr-node__inner{
    width:74px !important;
    height:74px !important;
    flex-basis:74px !important;
  }

  .qr-node__label{
    max-width:90px;
    font-size:13px !important;
  }
}

/* Desktop / large portrait */
@media (min-width:960px){
  .welcome-stage{
    grid-template-columns:minmax(0, 56%) minmax(0, 44%) !important;
    max-width:900px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:650px !important;
  }

  .qr-node{
    min-width:210px !important;
    min-height:98px !important;
  }

  .qr-node__inner{
    width:86px !important;
    height:86px !important;
    flex-basis:86px !important;
  }

  .qr-node__label{
    max-width:100px;
    font-size:14px !important;
  }
}

/* Portrait display เช่น Tablet แนวตั้ง / Kiosk */
@media (min-width:900px) and (orientation:portrait){
  .welcome-stage{
    max-width:920px;
  }

  .welcome-visual__frame,
  .qr-stream{
    min-height:min(58vh, 780px) !important;
  }
}


/* ===== Phase 68: smooth splash -> Home transition ===== */
.home-entry-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:1;
  background:
    radial-gradient(circle at 50% 42%,rgba(93,152,108,.16),transparent 34%),
    linear-gradient(145deg,#04120d 0%,#071d15 48%,#06150f 100%);
  transition:
    opacity .90s cubic-bezier(.22,.61,.36,1),
    filter .90s ease,
    transform .90s cubic-bezier(.22,.61,.36,1);
}

.home-entry-overlay__glow{
  position:absolute;
  left:50%;
  top:42%;
  width:min(68vw,430px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(163,202,119,.10),rgba(74,126,86,.04) 42%,transparent 72%);
  filter:blur(20px);
}

body.splash-entry .site-header,
body.splash-entry .home-main{
  opacity:0;
  transform:translateY(10px);
}

body.splash-entry.home-entry-ready .site-header,
body.splash-entry.home-entry-ready .home-main{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .88s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1);
}

body.splash-entry.home-entry-ready .site-header{
  transition-delay:.05s;
}

.home-entry-overlay.is-hidden{
  opacity:0;
  filter:blur(4px);
  transform:scale(1.012);
}

@media (prefers-reduced-motion:reduce){
  .home-entry-overlay,
  body.splash-entry .site-header,
  body.splash-entry .home-main{
    transition-duration:.01ms!important;
    transform:none!important;
  }
}


/* Homepage enhancement: preserve the Beforupdate composition. */
body.home-page{font-family:var(--font-ui,"Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,sans-serif);font-weight:400}
body.home-page .site-header{background:linear-gradient(180deg,rgba(2,12,11,.90),rgba(2,12,11,.60),transparent);border-bottom-color:transparent}
body.home-page .welcome-layout{display:block;max-width:1180px}
body.home-page .welcome-stage{gap:14px;grid-template-columns:minmax(0,55fr) minmax(0,45fr)!important}
body.home-page .welcome-visual__frame{animation-duration:9s}
body.home-page .qr-stream{display:flex;align-items:center;overflow:visible!important}
body.home-page .qr-stream__path{opacity:.38;pointer-events:none}
body.home-page .stream-light{display:none}
body.home-page .qr-stream__items{position:relative;inset:auto;width:100%;display:flex;flex-direction:column;gap:10px;padding:4px}
body.home-page .qr-node{position:relative;left:auto;top:auto;width:100%!important;height:auto!important;min-width:0!important;max-width:100%!important;min-height:76px!important;display:flex!important;gap:10px!important;padding:7px!important;margin:0;transform:none;will-change:auto;border-radius:14px;background:rgba(7,18,17,.94)}
body.home-page .qr-node--main{border-color:#d7bb75;background:linear-gradient(145deg,#173128,#0a1c18)}
body.home-page .qr-node__inner{width:clamp(52px,15vw,86px)!important;height:clamp(52px,15vw,86px)!important;flex:0 0 clamp(52px,15vw,86px)!important;border-radius:2px!important;background:#fff}
body.home-page .qr-node__inner svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
body.home-page .qr-node__label{max-width:none;min-width:0!important;overflow:visible!important;font-size:clamp(14px,2vw,20px)!important;line-height:1.65;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;font-weight:500;color:#e3ece5}
body.home-page .qr-node:focus-visible{outline:3px solid #e6d198;outline-offset:3px}
body.home-page .qr-node.is-unavailable .qr-node__inner{padding:4px;font-size:.75rem;line-height:1.5;color:#102019;text-align:center}
body.home-page .welcome-copy>span{font-size:14px;line-height:1.6;letter-spacing:.28em}
body.home-page .welcome-copy h1{line-height:1.5;font-weight:500}
.welcome-scan-note{margin:10px 0 0;color:#bacfc3;font-size:1rem;line-height:1.8}
.welcome-site-address{margin:5px 0 0;color:#9bb9ab;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}
body.home-page .home-about__inner>span{font-size:.875rem;line-height:1.7}
body.home-page .home-about__inner h2{line-height:1.6}
body.home-page .home-about__inner p{font-size:1rem;line-height:1.85;color:#adbfB6}
@media(min-width:640px){body.home-page .qr-stream__items{gap:14px;padding:8px}body.home-page .qr-node{padding:12px!important;gap:16px!important;min-height:100px!important}body.home-page .qr-node__inner{width:96px!important;height:96px!important;flex-basis:96px!important}body.home-page .qr-node__label{font-size:20px!important}}
/* CG light layers stay inside the illustration, away from all QR codes. */
.welcome-visual--cg{position:relative;isolation:isolate;perspective:1000px;background:radial-gradient(ellipse at 50% 35%,#123c2d,#071b13 75%);border-color:#477465;box-shadow:inset 0 0 28px #7be8b512,0 0 30px #56dca610}
.welcome-visual--cg .cg-artwork{position:absolute;z-index:1;inset:0;width:100%;height:100%;min-width:0;overflow:hidden;border-radius:inherit;transform-origin:50% 55%;animation:none}
.welcome-visual--cg .welcome-visual__image{filter:saturate(1.02) contrast(1.03) brightness(.98)}
.welcome-visual--cg .cg-ambient,.welcome-visual--cg .cg-grid,.welcome-visual--cg .cg-scan,.welcome-visual--cg .cg-corners,.welcome-visual--cg .cg-particles{pointer-events:none}
.welcome-visual--cg .cg-ambient{position:absolute;inset:-15%;z-index:0;background:radial-gradient(ellipse at 20% 25%,#59e8bf38,transparent 45%),radial-gradient(ellipse at 80% 80%,#e9c66e26,transparent 42%);opacity:.55;animation:cg-ambient-glow 10s ease-in-out infinite}
.welcome-visual--cg .cg-grid{position:absolute;inset:0;z-index:2;opacity:.13;background-image:linear-gradient(#98e8d6 1px,transparent 1px),linear-gradient(90deg,#98e8d6 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(180deg,#000,transparent 32%,transparent 68%,#000)}
.welcome-visual--cg .cg-scan{position:absolute;z-index:3;inset:0 0 auto;height:22%;background:linear-gradient(180deg,transparent,#80fbd816,transparent);opacity:0;animation:cg-light-scan 8s ease-in-out infinite}
.welcome-visual--cg .cg-scan::after{content:"";position:absolute;top:50%;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,#a3ffe9aa,transparent);box-shadow:0 0 12px 2px #63e6c34d}
.welcome-visual--cg .cg-corners{position:absolute;inset:17px;z-index:4}
.welcome-visual--cg .cg-corners i{position:absolute;width:23px;height:23px;border-color:#94dcc3;opacity:.7}
.welcome-visual--cg .cg-corners i:nth-child(1){top:0;left:0;border-top:1px solid;border-left:1px solid}
.welcome-visual--cg .cg-corners i:nth-child(2){top:0;right:0;border-top:1px solid;border-right:1px solid}
.welcome-visual--cg .cg-corners i:nth-child(3){bottom:0;left:0;border-bottom:1px solid;border-left:1px solid}
.welcome-visual--cg .cg-corners i:nth-child(4){bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}
.welcome-visual--cg .cg-particles{position:absolute;inset:12px;z-index:3;overflow:hidden}
.welcome-visual--cg .cg-particles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#b5ffe6;box-shadow:0 0 8px 2px #62deb973;opacity:0;animation:cg-spark-rise 7s ease-in-out infinite}
.welcome-visual--cg .cg-particles i:nth-child(1){left:12%;top:28%;animation-delay:-1s}
.welcome-visual--cg .cg-particles i:nth-child(2){left:80%;top:17%;animation-delay:-4s}
.welcome-visual--cg .cg-particles i:nth-child(3){left:23%;top:72%;animation-delay:-2.5s}
.welcome-visual--cg .cg-particles i:nth-child(4){left:86%;top:60%;animation-delay:-5.8s}
.welcome-visual--cg .cg-particles i:nth-child(5){left:52%;top:88%;animation-delay:-.2s;background:#f7dc9f;box-shadow:0 0 8px 2px #e5c87955}
.welcome-visual--cg .cg-particles i:nth-child(6){left:65%;top:42%;animation-delay:-3.5s}
@keyframes cg-ambient-glow{0%,100%{opacity:.4}50%{opacity:.75}}
@keyframes cg-light-scan{0%,12%{transform:translateY(-120%);opacity:0}20%{opacity:.65}75%{opacity:.65}88%,100%{transform:translateY(560%);opacity:0}}
@keyframes cg-spark-rise{0%,100%{transform:translateY(8px) scale(.65);opacity:0}30%{opacity:.65}70%{opacity:.3}90%{transform:translateY(-26px) scale(1.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.welcome-visual--cg .cg-artwork,.welcome-visual--cg .cg-ambient,.welcome-visual--cg .cg-scan,.welcome-visual--cg .cg-particles i{animation:none;transform:none}.welcome-visual--cg .cg-scan,.welcome-visual--cg .cg-particles{display:none}.welcome-visual--cg .cg-ambient{opacity:.4}}

@media(orientation:portrait) and (min-width:700px){
  body.original-home .site-header,body.original-home .main-header,body.original-home .footer-content,body.original-home .home-about{display:none}
  body.original-home .welcome-screen{padding:clamp(24px,3vh,56px) 0 clamp(24px,2.5vh,48px);min-height:100svh}
  body.original-home .container.welcome-layout{width:calc(100% - clamp(40px,7vw,110px));max-width:1320px}
  body.original-home .welcome-stage{max-width:1120px;gap:clamp(18px,2.2vw,32px);grid-template-columns:minmax(0,55fr) minmax(0,45fr)!important}
  body.original-home .welcome-visual__frame,body.original-home .qr-stream{min-height:min(58svh,1120px)!important}
  body.original-home .qr-stream__items{gap:clamp(16px,1.25svh,26px);padding:8px}
  body.original-home .qr-node{min-height:0!important;padding:clamp(12px,1.4vw,22px)!important;gap:clamp(12px,1.6vw,24px)!important;border-radius:18px!important}
  body.original-home .qr-node__inner{width:min(14vw,9svh,220px)!important;height:min(14vw,9svh,220px)!important;flex-basis:min(14vw,9svh,220px)!important}
  body.original-home .qr-node__label{font-size:clamp(22px,2.6vw,38px)!important;line-height:1.6}
  body.original-home .welcome-copy{margin-top:clamp(28px,2.7svh,50px)}
  body.original-home .welcome-copy>span{font-size:clamp(22px,2.6vw,38px);letter-spacing:.28em}
  body.original-home .welcome-copy h1{font-size:clamp(38px,5.4vw,76px);margin-top:8px;line-height:1.5}
  body.original-home .welcome-scan-note{font-size:clamp(22px,2.6vw,38px);line-height:1.8;margin-top:12px}
  body.original-home .welcome-site-address{font-size:clamp(18px,2vw,30px);margin-top:8px}
}


  body.original-home.is-tv .site-header,body.original-home.is-tv .main-header,body.original-home.is-tv .footer-content,body.original-home.is-tv .home-about{display:none}
  body.original-home.is-tv .welcome-screen{padding:clamp(24px,3vh,56px) 0 clamp(24px,2.5vh,48px);min-height:100svh}
  body.original-home.is-tv .container.welcome-layout{width:calc(100% - clamp(40px,7vw,110px));max-width:1320px}
  body.original-home.is-tv .welcome-stage{max-width:1120px;gap:clamp(18px,2.2vw,32px);grid-template-columns:minmax(0,55fr) minmax(0,45fr)!important}
  body.original-home.is-tv .welcome-visual__frame,body.original-home.is-tv .qr-stream{min-height:min(58svh,1120px)!important}
  body.original-home.is-tv .qr-stream__items{gap:clamp(16px,1.25svh,26px);padding:8px}
  body.original-home.is-tv .qr-node{min-height:0!important;padding:clamp(12px,1.4vw,22px)!important;gap:clamp(12px,1.6vw,24px)!important;border-radius:18px!important}
  body.original-home.is-tv .qr-node__inner{width:min(14vw,9svh,220px)!important;height:min(14vw,9svh,220px)!important;flex-basis:min(14vw,9svh,220px)!important}
  body.original-home.is-tv .qr-node__label{font-size:clamp(22px,2.6vw,38px)!important;line-height:1.6}
  body.original-home.is-tv .welcome-copy{margin-top:clamp(28px,2.7svh,50px)}
  body.original-home.is-tv .welcome-copy>span{font-size:clamp(22px,2.6vw,38px);letter-spacing:.28em}
  body.original-home.is-tv .welcome-copy h1{font-size:clamp(38px,5.4vw,76px);margin-top:8px;line-height:1.5}
  body.original-home.is-tv .welcome-scan-note{font-size:clamp(22px,2.6vw,38px);line-height:1.8;margin-top:12px}
  body.original-home.is-tv .welcome-site-address{font-size:clamp(18px,2vw,30px);margin-top:8px}

@media(prefers-reduced-motion:reduce){body.home-page .welcome-visual__frame{transform:none;animation:none}body.splash-entry .home-entry-overlay{display:none}body.splash-entry .home-main,body.splash-entry .site-header{opacity:1;transform:none}}

/* IoT energy rail: motion belongs to the connectors and card rims. */
body.home-page .qr-stream{isolation:isolate}
body.home-page .qr-stream__items{z-index:2}
body.home-page .qr-stream__path{z-index:0;opacity:.4}
body.home-page .qr-stream__path #streamPath{stroke-dasharray:18 14;animation:qr-thread-flow 8s linear infinite}
.qr-energy-rail{display:none}
body.home-page .qr-node{--qr-fx-delay:0s;isolation:isolate}
body.home-page .qr-node:nth-child(2){--qr-fx-delay:-16s}
body.home-page .qr-node:nth-child(3){--qr-fx-delay:-12s}
body.home-page .qr-node:nth-child(4){--qr-fx-delay:-8s}
body.home-page .qr-node:nth-child(5){--qr-fx-delay:-4s}
body.home-page .qr-node::after{content:"";position:absolute;inset:-1px;border:2px solid #9fe9c4;border-radius:inherit;background:none;box-shadow:0 0 18px #7ddcb32e;opacity:0;pointer-events:none;animation:qr-rim-light 20s ease-in-out infinite;animation-delay:var(--qr-fx-delay)}
body.home-page .qr-node__label{animation:qr-menu-light 20s ease-in-out infinite;animation-delay:var(--qr-fx-delay)}
body.home-page .qr-node:hover::after,body.home-page .qr-node:focus-visible::after{animation:none;opacity:.95;border-color:#e4cd91}
body.home-page .qr-node:hover .qr-node__label,body.home-page .qr-node:focus-visible .qr-node__label{animation:none;color:#e8d6a4}
@media(min-width:640px){
  body.home-page .qr-stream__items,body.original-home.is-tv .qr-stream__items{padding-left:24px}
  body.home-page .qr-energy-rail{display:block;position:absolute;z-index:1;left:5px;top:7%;bottom:7%;width:8px;overflow:hidden;pointer-events:none}
  body.home-page .qr-energy-rail::before{content:"";position:absolute;inset:0 auto 0 3px;width:1px;background:linear-gradient(180deg,transparent,#82cbaa80 15%,#c7ae7666 80%,transparent)}
  body.home-page .qr-energy-rail i{position:absolute;top:-24%;left:1px;width:5px;height:24%;border-radius:50%;background:linear-gradient(180deg,transparent,#c7f8db,#d8c28c,transparent);opacity:.65;animation:qr-energy-flow 10s linear infinite}
  body.home-page .qr-node::before{position:absolute;inset:auto auto auto -20px;top:50%;width:20px;height:1px;border-radius:0;background:linear-gradient(90deg,#a3d4b973,#739a8080);opacity:.8;z-index:0;pointer-events:none}
}
@keyframes qr-thread-flow{to{stroke-dashoffset:-128}}
@keyframes qr-energy-flow{0%{transform:translateY(0)}100%{transform:translateY(520%)}}
@keyframes qr-rim-light{0%,20%,100%{opacity:0}5%,14%{opacity:.8}}
@keyframes qr-menu-light{0%,20%,100%{color:#e3ece5}5%,14%{color:#e8d6a4}}
@media(prefers-reduced-motion:reduce){body.home-page .qr-stream__path #streamPath{animation:none;stroke-dasharray:none}body.home-page .qr-energy-rail i{animation:none;display:none}body.home-page .qr-node::after{animation:none;opacity:.15}body.home-page .qr-node__label{animation:none;color:#e3ece5}}