@media (min-width: 1024px){

  /* =========================
     DESKTOP APP-SCREEN LAYOUT
     ========================= */

  .hero-stage{
    min-height:calc(100dvh - 210px);
    padding:10px 0 22px !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .hero-center{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .tech-hero{
    width:min(94vw, calc((100dvh - 210px) * 1.62), 1320px);
    aspect-ratio:16 / 9.5;
    min-height:auto;
    height:auto;
    max-height:calc(100dvh - 210px);
    border-radius:34px;
    contain:layout paint style;
  }

  .mobile-menu-v2{
    display:none !important;
  }

  /* =========================
     TITLE
     ========================= */

  .hero-system-title{
    top:7.9%;
    width:min(86%, 920px);
    z-index:20;
  }

  .hero-system-title-inner{
    position:relative;
    min-height:70px;
    padding:14px 32px;
    border-radius:999px;
    border:1px solid rgba(120,220,255,.32);
    background:
      linear-gradient(180deg, rgba(6,12,26,.95), rgba(4,8,18,.98));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 0 18px rgba(120,220,255,.06),
      0 0 18px rgba(0,180,255,.16),
      0 10px 24px rgba(0,0,0,.28);
    overflow:hidden;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .hero-system-title-inner::before{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-18px;
    height:40px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(0,200,255,.52) 0%, rgba(0,200,255,.16) 40%, transparent 75%);
    filter:blur(16px);
    opacity:.88;
    pointer-events:none;
  }

  .hero-system-title-inner::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
      120deg,
      transparent 0%,
      rgba(120,220,255,.07) 40%,
      rgba(255,255,255,.15) 50%,
      rgba(120,220,255,.07) 60%,
      transparent 100%
    );
    transform:translateX(-120%);
    animation:titleNeonSweep 4.8s linear infinite;
    pointer-events:none;
  }

  .hero-system-title-text{
    position:relative;
    z-index:2;
    font-size:clamp(21px, 1.62vw, 29px);
    line-height:1.1;
    font-weight:900;
    letter-spacing:.95px;
    color:#eaffff;
    text-shadow:
      0 0 8px rgba(120,220,255,.34),
      0 0 18px rgba(0,180,255,.22),
      0 0 30px rgba(0,140,255,.12);
  }

  @keyframes titleNeonSweep{
    0%{ transform:translateX(-120%); opacity:0; }
    10%{ opacity:1; }
    50%{ opacity:1; }
    100%{ transform:translateX(120%); opacity:0; }
  }

  /* =========================
     CENTER
     ========================= */

  .center-glow{
    width:240px;
    height:240px;
    top:50%;
  }

  .center-pulse{
    width:260px;
    height:260px;
  }

  /* =========================
     LOGO
     ========================= */

  .logo-core{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:clamp(138px, 11vw, 190px);
    height:clamp(138px, 11vw, 190px);
    z-index:30;
    pointer-events:auto;
    background:transparent !important;
    border-radius:50%;
    box-shadow:none !important;
    transition:filter .25s ease;
  }

  .logo-core::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50%;
    border:1px solid rgba(120,200,255,.22);
    opacity:.34;
    animation:logoPulse 3.2s ease-in-out infinite;
    pointer-events:none;
  }

  .logo-core:hover{
    animation:logoBounce .42s ease;
  }

  .logo-core:hover::after{
    content:"";
    position:absolute;
    inset:-22px;
    border-radius:50%;
    border:1px solid rgba(120,220,255,.40);
    animation:logoHoverWave .8s ease;
    pointer-events:none;
  }

  .logo-core:active::after{
    content:"";
    position:absolute;
    inset:-28px;
    border-radius:50%;
    border:2px solid rgba(120,220,255,.55);
    animation:logoClickWave .5s ease;
  }

  .logo-core img,
  .tech-hero.open .logo-core img{
    filter:
      drop-shadow(0 0 12px rgba(120,210,255,.20))
      drop-shadow(0 0 24px rgba(120,210,255,.10))
      drop-shadow(0 16px 24px rgba(0,0,0,.20));
  }

  @keyframes logoPulse{
    0%{ transform:scale(1); opacity:.35; }
    50%{ transform:scale(1.08); opacity:.18; }
    100%{ transform:scale(1); opacity:.35; }
  }

  @keyframes logoHoverWave{
    0%{ transform:scale(1); opacity:.6; }
    100%{ transform:scale(1.25); opacity:0; }
  }

  @keyframes logoClickWave{
    0%{ transform:scale(1); opacity:.7; }
    100%{ transform:scale(1.4); opacity:0; }
  }

  @keyframes logoBounce{
    0%{ transform:translate(-50%,-50%) scale(1); }
    35%{ transform:translate(-50%,-50%) scale(1.08); }
    65%{ transform:translate(-50%,-50%) scale(.98); }
    100%{ transform:translate(-50%,-50%) scale(1); }
  }

  /* =========================
     MENU LAYER
     ========================= */

  .menu-layer-v2{
    position:absolute;
    inset:0;
    z-index:14;
    pointer-events:none !important;
  }

  .tech-hero.open .menu-layer-v2{
    pointer-events:auto !important;
  }

  .menu-node,
  .menu-group{
    position:absolute;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      opacity .32s ease,
      transform .32s cubic-bezier(.22,.8,.22,1),
      visibility 0s linear .32s;
  }

  .tech-hero.open .menu-node,
  .tech-hero.open .menu-group{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
      opacity .32s ease,
      transform .32s cubic-bezier(.22,.8,.22,1),
      visibility 0s linear 0s;
  }

  /* =========================
     MAIN MENU BUTTON
     ========================= */

  .node-shell{
    position:relative;
    width:clamp(214px, 15.4vw, 250px);
    min-height:clamp(58px, 4.1vw, 66px);
    padding:11px 18px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    background:
      linear-gradient(180deg, rgba(0,140,255,.25), rgba(0,60,160,.25)),
      radial-gradient(circle at 50% 0%, rgba(120,200,255,.35), transparent 60%);
    border:1px solid rgba(120,200,255,.5);
    box-shadow:
      0 0 12px rgba(0,150,255,.4),
      0 0 28px rgba(0,120,255,.25),
      inset 0 0 12px rgba(120,200,255,.2);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      filter .18s ease;
  }

  .node-shell::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
      120deg,
      transparent 18%,
      rgba(185,235,255,.16) 50%,
      transparent 82%
    );
    opacity:0;
    transition:opacity .22s ease;
  }

  .node-shell:hover{
    transform:translateY(-2px) scale(1.02);
    border-color:rgba(214,244,255,.46);
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.24), transparent 44%),
      linear-gradient(180deg, rgba(182,235,255,.26), rgba(86,150,235,.16) 58%, rgba(24,55,118,.22) 100%);
    box-shadow:
      0 0 20px rgba(0,180,255,.55),
      0 0 40px rgba(0,150,255,.30);
  }

  .node-shell:hover::after{
    opacity:1;
  }

  .node-shell:active{
    transform:scale(.98);
    box-shadow:
      0 0 0 rgba(0,0,0,0),
      0 0 18px rgba(120,200,255,.6),
      0 0 36px rgba(120,200,255,.4),
      0 0 60px rgba(120,200,255,.25);
  }

  .node-shell:active::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:inherit;
    border:1px solid rgba(120,200,255,.6);
    opacity:0;
    animation:menuPulse .5s ease;
  }

  .node-title{
    position:relative;
    z-index:2;
    color:#f7fcff;
    font-size:clamp(15px, 1.1vw, 18px);
    line-height:1.1;
    font-weight:800;
    letter-spacing:.12px;
    pointer-events:none;
    text-shadow:
      0 0 8px rgba(170,230,255,.18),
      0 0 14px rgba(120,190,255,.08);
    white-space:nowrap;
  }

  @keyframes menuPulse{
    0%{
      opacity:1;
      transform:scale(1);
    }
    100%{
      opacity:0;
      transform:scale(1.3);
    }
  }

  /* =========================
     MENU POSITION / SPACING
     ========================= */

  .m1{
    left:19.90%;
    top:37.50%;
    transform:translate(-60%, -50%);
  }

  .g-company{
    left:80%;
    top:35.50%;
    transform:translate(-40%, -50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:24px;
  }

  .g-product{
    left:20%;
    top:66%;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

  .g-agent{
    left:80%;
    top:66%;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:24px;
  }

  .g-company .main-node,
  .g-agent .main-node{
    display:flex;
    justify-content:flex-end;
    width:100%;
  }

  .g-product .main-node{
    display:flex;
    justify-content:flex-start;
    width:100%;
  }

  .g-company .node-shell,
  .g-agent .node-shell{
    text-align:right;
  }

  .g-product .node-shell{
    text-align:left;
  }

  .m5{
    left:50%;
    bottom:8.8%;
    transform:translateX(-50%);
  }

  /* =========================
     CTA BUTTON
     ========================= */

  .m5 .node-shell{
    width:clamp(300px, 21vw, 360px);
    min-height:clamp(68px, 5vw, 80px);
    border-radius:24px;
    position:relative;
    overflow:hidden;
    background-size:200% 200%;
    animation:ctaNeonFlow 4s ease-in-out infinite;
  }

  body:not(.light-mode) .m5 .node-shell{
    border:1px solid rgba(255,90,90,.48);
    background:linear-gradient(135deg,#140000 0%, #3a0000 35%, #b30000 70%, #ff4d4d 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 0 18px rgba(255,80,80,.15),
      0 0 18px rgba(255,80,80,.35),
      0 0 34px rgba(255,60,60,.22),
      0 18px 36px rgba(60,0,0,.35);
  }

  body:not(.light-mode) .m5 .node-shell:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 22px rgba(255,90,90,.18),
      0 0 22px rgba(255,80,80,.40),
      0 0 44px rgba(255,60,60,.28),
      0 20px 42px rgba(60,0,0,.40);
  }

  body:not(.light-mode) .m5 .node-title{
    color:#fff5f5;
    text-shadow:
      0 0 10px rgba(255,120,120,.35),
      0 0 18px rgba(255,60,60,.25);
  }

  body.light-mode .m5 .node-shell{
    border:1px solid rgba(150,215,255,.58);
    background:linear-gradient(135deg,#f3fbff 0%, #dff0ff 35%, #84c5ff 72%, #e8fbff 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      inset 0 0 16px rgba(255,255,255,.22),
      0 0 18px rgba(92,170,255,.24),
      0 0 32px rgba(120,220,255,.14),
      0 16px 30px rgba(70,130,220,.18);
  }

  body.light-mode .m5 .node-shell:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 22px rgba(130,230,255,.14),
      0 0 22px rgba(70,150,255,.34),
      0 0 44px rgba(80,220,255,.24),
      0 20px 42px rgba(8,30,80,.38);
  }

  body.light-mode .m5 .node-title{
    color:#12518f;
    text-shadow:
      0 0 8px rgba(255,255,255,.35),
      0 0 14px rgba(120,190,255,.16);
  }

  .m5 .node-shell::before{
    content:"";
    position:absolute;
    top:-30%;
    left:-35%;
    width:38%;
    height:160%;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 10%,
      rgba(255,255,255,.20) 45%,
      rgba(255,255,255,.88) 50%,
      rgba(255,255,255,.20) 55%,
      rgba(255,255,255,0) 90%,
      transparent 100%
    );
    transform:rotate(18deg);
    animation:ctaLightSweep 2.8s linear infinite;
    pointer-events:none;
    z-index:2;
  }

  .m5 .node-title{
    font-size:clamp(21px, 1.58vw, 27px);
    letter-spacing:.2px;
  }

  @keyframes ctaNeonFlow{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }

  @keyframes ctaLightSweep{
    0%{ left:-35%; opacity:0; }
    10%{ opacity:1; }
    50%{ opacity:1; }
    100%{ left:120%; opacity:0; }
  }

  /* =========================
     SUBMENU
     ========================= */

  .menu-group .main-node{
    position:relative;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .submenu-panel{
    width:214px;
    display:grid;
    gap:10px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    max-height:0;
    overflow:hidden;
    transform:translateY(-6px);
    transition:
      opacity .22s ease,
      visibility .22s ease,
      max-height .22s ease,
      transform .22s ease;
  }

  .menu-group.open .submenu-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:200px;
    transform:translateY(0);
  }

  .g-company .submenu-panel{
    order:1;
    margin-bottom:8px;
  }

  .g-company .main-node{
    order:2;
  }

  .g-product .submenu-panel,
  .g-agent .submenu-panel{
    order:2;
    margin-top:8px;
  }

  .submenu-btn{
    width:100%;
    min-height:38px;
    padding:8px 12px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    color:#eef9ff;
    border:1px solid rgba(180,230,255,.12);
    background:
      linear-gradient(180deg, rgba(120,185,255,.12), rgba(48,98,188,.10));
    box-shadow:
      0 6px 14px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.10);
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease,
      background .18s ease;
  }

  .submenu-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(210,245,255,.28);
    box-shadow:
      0 12px 24px rgba(0,0,0,.22),
      0 0 14px rgba(120,205,255,.16);
  }

  /* =========================
     HINT
     ========================= */

  .hero-menu-hint{
    position:absolute;
    left:50%;
    bottom:3.8%;
    transform:translateX(-50%);
    margin:0;
    font-size:15px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.2px;
    color:rgba(220,240,255,.96);
    text-shadow:
      0 0 10px rgba(120,190,255,.24),
      0 0 16px rgba(110,170,255,.08);
    opacity:1;
    transition:opacity .24s ease, transform .24s ease;
    pointer-events:none !important;
    z-index:16;
    white-space:nowrap;
  }

  .tech-hero.open .hero-menu-hint{
    opacity:0;
    transform:translateX(-50%) translateY(10px);
  }

  /* =========================
     OPEN / CLOSED MOTION
     ========================= */

  .tech-hero:not(.open) .m1{
    transform:translate(-50%, -50%) translate(86px, 18px) scale(.84);
  }

  .tech-hero:not(.open) .g-company{
    transform:translate(-50%, -50%) translate(-86px, 18px) scale(.84);
  }

  .tech-hero:not(.open) .g-product{
    transform:translate(-50%, -50%) translate(86px, -18px) scale(.84);
  }

  .tech-hero:not(.open) .g-agent{
    transform:translate(-50%, -50%) translate(-86px, -18px) scale(.84);
  }

  .tech-hero:not(.open) .m5{
    transform:translateX(-50%) translateY(-40px) scale(.88);
  }

  .tech-hero:not(.open) .m1,
  .tech-hero:not(.open) .g-company,
  .tech-hero:not(.open) .g-product,
  .tech-hero:not(.open) .g-agent,
  .tech-hero:not(.open) .m5{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .tech-hero.open .m1{
    transform:translate(-50%, -50%);
  }

  .tech-hero.open .g-company,
  .tech-hero.open .g-product,
  .tech-hero.open .g-agent{
    transform:translate(-50%, -50%);
  }

  .tech-hero.open .m5{
    transform:translateX(-50%);
  }

  .tech-hero.open .m1,
  .tech-hero.open .g-company,
  .tech-hero.open .g-product,
  .tech-hero.open .g-agent,
  .tech-hero.open .m5{
    opacity:1 !important;
    visibility:visible !important;
  }

  /* =========================
     LIGHT MODE MENU
     ========================= */

  body.light-mode .node-title,
  body.light-mode .submenu-btn{
    color:#21497e;
  }

  body.light-mode .node-shell,
  body.light-mode .submenu-btn{
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
    border-color:rgba(34,73,126,.12);
    box-shadow:0 16px 28px rgba(31,74,140,.10);
  }

  body.light-mode .hero-menu-hint{
    color:rgba(33,73,126,.82);
    text-shadow:none;
  }

  /* =========================
   LIGHT MODE - 10M DESIGN
   ========================= */

body.light-mode .tech-hero{
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
}

/* ===== TITLE ===== */
body.light-mode .hero-system-title-inner{
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(30,107,255,0.15);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9);

  backdrop-filter: blur(12px);
}

body.light-mode .hero-system-title-text{
  color: #0A3D91;
  text-shadow: none;
}

/* ===== LOGO ===== */
body.light-mode .logo-core img{
  filter:
    drop-shadow(0 0 20px rgba(30,107,255,0.25))
    drop-shadow(0 0 40px rgba(30,107,255,0.15));
}

/* ===== MAIN BUTTON (เมนูหลัก) ===== */
body.light-mode .node-shell{
  background: linear-gradient(180deg, #2F80FF 0%, #1E6BFF 100%);
  color:#fff;

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 10px 25px rgba(30,107,255,0.35),
    inset 0 2px 6px rgba(255,255,255,0.3),
    inset 0 -4px 10px rgba(0,0,0,0.15);

  backdrop-filter:none;
}

/* ===== TEXT ===== */
body.light-mode .node-title{
  color:#FFFFFF;
  text-shadow:none;
}

/* ===== HOVER ===== */
body.light-mode .node-shell:hover{
  transform:translateY(-2px);

  box-shadow:
    0 14px 30px rgba(30,107,255,0.45);
}

/* ===== CLICK ===== */
body.light-mode .node-shell:active{
  transform:translateY(1px);

  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.25);
}

/* ===== SUBMENU ===== */
body.light-mode .submenu-btn{
  background: rgba(255,255,255,0.95);
  color:#1E3A8A;

  border:1px solid rgba(30,107,255,0.2);

  box-shadow:
    0 6px 15px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

body.light-mode .submenu-btn:hover{
  box-shadow:
    0 10px 20px rgba(30,107,255,0.15);
}

/* ===== CTA (ปุ่มล่างใหญ่) ===== */
body.light-mode .m5 .node-shell{
  background: linear-gradient(180deg, #2F80FF 0%, #1E6BFF 100%);
  border:1px solid rgba(255,255,255,0.5);

  box-shadow:
    0 15px 40px rgba(30,107,255,0.4),
    inset 0 2px 8px rgba(255,255,255,0.3),
    inset 0 -6px 14px rgba(0,0,0,0.2);
}

body.light-mode .m5 .node-title{
  color:#FFFFFF;
}

/* ===== HINT TEXT ===== */
body.light-mode .hero-menu-hint{
  color:rgba(10,61,145,0.6);
  text-shadow:none;
}

  /* ===== SIMPLE LIGHT MODE FIX (ไม่ต้องยุ่งของเดิม) ===== */

body.light-mode{
  background: linear-gradient(180deg,#ffffff,#f7faff);
}

/* ปุ่มทั้งหมด */
body.light-mode .node-shell{
  background: linear-gradient(180deg,#2F80FF,#1E6BFF);
  color:#fff;

  box-shadow: 0 8px 20px rgba(30,107,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
}

/* ปุ่มสั่งซื้อ */
body.light-mode .m5 .node-shell{
  box-shadow: 0 15px 40px rgba(30,107,255,0.35);
}

/* กล่องหัวข้อ */
body.light-mode .hero-system-title-inner{
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* โลโก้ */
body.light-mode .logo-core img{
  filter: drop-shadow(0 0 25px rgba(30,107,255,0.25));
}

@media (min-width: 1024px){

  /* ===== LIGHT MODE SIMPLE FINAL (DESKTOP ONLY) ===== */

  body.light-mode{
    background: linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  }

  body.light-mode .hero-system-title-inner{
    background: rgba(255,255,255,0.85);
    border:1px solid rgba(255,255,255,0.7);
    box-shadow:
      0 10px 30px rgba(0,0,0,0.05),
      inset 0 1px 0 rgba(255,255,255,0.9);
  }

  body.light-mode .node-shell{
    background: linear-gradient(180deg,#2F80FF 0%,#1E6BFF 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:
      0 8px 20px rgba(30,107,255,0.25),
      inset 0 2px 4px rgba(255,255,255,0.25),
      inset 0 -3px 8px rgba(0,0,0,0.15);
  }

  body.light-mode .node-shell:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(30,107,255,0.35);
  }

  body.light-mode .m5 .node-shell{
    box-shadow:
      0 15px 40px rgba(30,107,255,0.35),
      inset 0 2px 6px rgba(255,255,255,0.3),
      inset 0 -5px 12px rgba(0,0,0,0.2);
  }

  body.light-mode .logo-core img{
    filter:
      drop-shadow(0 0 25px rgba(30,107,255,0.25))
      drop-shadow(0 0 60px rgba(30,107,255,0.15));
  }

  /* =========================
   PREMIUM UPGRADE - DESKTOP
   ========================= */

.tech-hero{
  background:
    radial-gradient(circle at 50% 0%, rgba(0,140,255,.18), transparent 40%),
    linear-gradient(180deg,#020817 0%, #06142e 40%, #020817 100%);
}

/* ===== LOGO LUXURY ===== */
.logo-core img{
  filter:
    drop-shadow(0 0 20px rgba(120,220,255,.35))
    drop-shadow(0 0 40px rgba(0,180,255,.25))
    drop-shadow(0 20px 40px rgba(0,0,0,.45));
}

/* ===== TITLE PREMIUM ===== */
.hero-system-title-inner{
  background:
    linear-gradient(180deg, rgba(10,20,40,.92), rgba(5,10,20,.96));

  border:1px solid rgba(120,220,255,.25);

  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    0 0 40px rgba(0,140,255,.18),
    inset 0 0 20px rgba(120,220,255,.08);
}

/* ===== BUTTON UPGRADE ===== */
.node-shell{
  backdrop-filter: blur(14px);

  box-shadow:
    0 0 20px rgba(0,140,255,.35),
    0 0 60px rgba(0,140,255,.15),
    inset 0 0 20px rgba(120,200,255,.15);
}

/* ===== HOVER ลื่นขึ้น ===== */
.node-shell:hover{
  transform: translateY(-4px) scale(1.03);

  box-shadow:
    0 0 30px rgba(0,180,255,.55),
    0 0 80px rgba(0,140,255,.30);
}

/* ===== CTA ปุ่มแดงให้โหดขึ้น ===== */
.m5 .node-shell{
  background:
    linear-gradient(135deg,#3a0000 0%, #a80000 50%, #ff3d3d 100%);

  box-shadow:
    0 0 30px rgba(255,60,60,.55),
    0 0 80px rgba(255,0,0,.25),
    inset 0 0 30px rgba(255,120,120,.2);
}

/* ===== เพิ่ม glow รอบ scene ===== */
.tech-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,140,255,.08), transparent 60%);
  pointer-events:none;
}