/* ============================================================
   MYIB — home.css   (หน้าแรก: ทางเข้า Equipment / Software)
   โทนส้ม-ดำ ให้เข้าชุดกับ equipment.html
   ============================================================ */
:root{
  --primary:#F06020; --secondary:#FB7B2E; --deep:#B04810; --ink:#181210;
  --bg:#0f0a08;
  --font:"Noto Sans Thai","Noto Sans",system-ui,-apple-system,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:#f4ece7; line-height:1.6; overflow-x:hidden;
  background:
    radial-gradient(40rem 30rem at 80% -5%,rgba(251,123,46,.20),transparent 60%),
    radial-gradient(38rem 30rem at 0% 30%,rgba(176,72,16,.18),transparent 60%),
    var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{ max-width:1200px; margin:0 auto; padding:0 1.25rem; }
@media(min-width:1024px){ .container{ padding:0 2rem; } }
::selection{ background:rgba(240,96,32,.25); }

/* ---------- PRELOADER ---------- */
#preloader{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:var(--ink); transition:opacity .5s ease,visibility .5s ease; }
#preloader.hide{ opacity:0; visibility:hidden; }
.loader-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; width:44px; }
.loader-grid span{ width:19px; height:19px; border-radius:5px;
  background:linear-gradient(135deg,var(--secondary),var(--deep)); animation:loaderPulse 1.2s ease-in-out infinite; }
.loader-grid span:nth-child(2){ animation-delay:.15s; }
.loader-grid span:nth-child(3){ animation-delay:.3s; }
.loader-grid span:nth-child(4){ animation-delay:.45s; }
@keyframes loaderPulse{ 0%,100%{ transform:scale(.7); opacity:.4; } 50%{ transform:scale(1); opacity:1; } }

/* ---------- NAVBAR ---------- */
#navbar{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s; }
#navbar.scrolled{ background:rgba(15,10,8,.82); backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:4rem; }
@media(min-width:768px){ .nav-inner{ height:5rem; } }
.brand-logo{ height:30px; width:auto; display:block; }
@media(max-width:768px){ .brand-logo{ height:26px; } }
.nav-menu{ display:none; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
@media(min-width:1024px){ .nav-menu{ display:flex; } }
.nav-link{ position:relative; font-size:.95rem; font-weight:500; color:#f5e7df; transition:color .2s ease; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary)); transition:width .25s ease; }
.nav-link:hover{ color:var(--secondary); } .nav-link:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:.75rem; }

/* TH/EN toggle */
.lang-toggle{ display:inline-flex; align-items:center; border-radius:9999px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); padding:3px; }
.lang-btn{ border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.78rem; color:#cdbcb1;
  background:transparent; border-radius:9999px; padding:.3rem .7rem; transition:.2s; }
.lang-btn.active{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;
  box-shadow:0 6px 14px -6px rgba(240,96,32,.7); }

#menuBtn{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem;
  border:none; background:transparent; color:#fff; cursor:pointer; border-radius:.75rem; }
@media(min-width:1024px){ #menuBtn{ display:none; } }
#menuBtn svg{ width:1.5rem; height:1.5rem; }
#mobileMenu{ display:none; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(15,10,8,.96); backdrop-filter:blur(14px); }
#mobileMenu.open{ display:block; }
.mobile-link{ display:block; border-radius:.75rem; padding:.85rem 1rem; font-weight:500; color:#f0e2d9; transition:.2s; }
.mobile-link:hover{ background:rgba(240,96,32,.14); color:var(--secondary); }

/* ---------- HERO / GATEWAY ---------- */
.hero{ position:relative; min-height:100vh; padding-top:7rem; padding-bottom:4rem; overflow:hidden;
  display:flex; flex-direction:column; }
.hero-mesh{ position:absolute; inset:0; pointer-events:none; animation:meshDrift 22s ease-in-out infinite alternate;
  background:
    radial-gradient(40rem 30rem at 80% 0%,rgba(251,123,46,.30),transparent 60%),
    radial-gradient(35rem 30rem at 10% 90%,rgba(176,72,16,.26),transparent 60%),
    radial-gradient(45rem 35rem at 50% 45%,rgba(240,96,32,.22),transparent 65%);
  filter:saturate(115%); }
@keyframes meshDrift{ from{ transform:scale(1);} to{ transform:scale(1.1);} }
.hero-grid{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(75% 75% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(75% 75% at 50% 40%,#000 40%,transparent 100%); }
.hero-inner{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; justify-content:center; }

/* การ์ดทางเข้า 2 ทาง */
.gateways{ display:grid; grid-template-columns:1fr; gap:2.4rem; margin-top:1rem; }
@media(min-width:860px){ .gateways{ grid-template-columns:1fr 1fr; gap:2rem; } }

.gateway{ position:relative; display:block; padding-top:1.6rem; }
.gw-label{ position:absolute; top:0; left:1.1rem; z-index:3;
  font-family:var(--font); font-weight:800; font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1; color:#fff;
  padding:.35rem .7rem; border-radius:.5rem;
  background:linear-gradient(135deg,rgba(240,96,32,.92),rgba(251,123,46,.78));
  box-shadow:0 12px 26px -12px rgba(240,96,32,.8); transform:translateY(0); transition:transform .3s ease; }
.gw-body{ position:relative; border-radius:1.4rem; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(38,27,21,.9),rgba(20,14,11,.92));
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7); overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .35s; }
.gw-art{ position:relative; aspect-ratio:16/11; width:100%; overflow:hidden;
  background:radial-gradient(70% 80% at 72% 18%,rgba(240,96,32,.28),transparent 60%),#160f0c; }
.gw-art svg{ width:100%; height:100%; }
.gw-meta{ padding:1.1rem 1.4rem 1.5rem; }
.gw-kicker{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); }
.gw-title{ margin:.35rem 0 .35rem; font-size:1.3rem; font-weight:800; color:#fff; }
.gw-desc{ margin:0; font-size:.92rem; color:rgba(244,236,231,.62); }
.gw-cta{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-weight:700; color:var(--secondary); font-size:.95rem; transition:gap .2s ease; }
.gw-cta svg{ width:1.05rem; height:1.05rem; transition:transform .2s ease; }
.gateway:hover .gw-body{ transform:translateY(-8px); border-color:rgba(240,96,32,.45);
  box-shadow:0 40px 90px -30px rgba(240,96,32,.45); }
.gateway:hover .gw-label{ transform:translateY(-4px); }
.gateway:hover .gw-cta{ gap:.75rem; }
.gateway:hover .gw-cta svg{ transform:translateX(3px); }
.gateway:focus-visible{ outline:3px solid var(--secondary); outline-offset:4px; border-radius:1.4rem; }

/* ข้อความ hero ใต้การ์ด */
.hero-copy{ margin-top:3rem; max-width:46rem; }
.hero-eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--secondary); }
.hero-title{ margin:.7rem 0 0; font-family:var(--font); font-weight:800; line-height:1.12;
  font-size:clamp(2rem,5.2vw,3.4rem); color:#fff; }
.hero-title .hl{ background:linear-gradient(120deg,var(--secondary),#ffd0a8,var(--secondary));
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite; }
@keyframes shimmer{ to{ background-position:220% center; } }
.hero-text{ margin:1.1rem 0 0; font-size:1.02rem; color:rgba(244,236,231,.68); max-width:40rem; }

.scroll-cue{ display:flex; justify-content:center; margin-top:2.6rem; }
.scroll-cue a{ display:inline-flex; width:2.6rem; height:2.6rem; align-items:center; justify-content:center;
  border-radius:9999px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7);
  animation:bob 2.2s ease-in-out infinite; }
.scroll-cue svg{ width:1.3rem; height:1.3rem; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* ---------- REVEAL ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); padding:4rem 0 2rem; margin-top:1rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer-logo{ height:34px; width:auto; }
.footer-about{ margin:1rem 0 0; max-width:24rem; font-size:.9rem; color:rgba(255,237,224,.5); }
.socials{ margin-top:1.25rem; display:flex; gap:.75rem; }
.social-btn{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem;
  border-radius:.75rem; background:rgba(255,255,255,.06); color:#f0e2d9; transition:.2s; }
.social-btn svg{ width:1.1rem; height:1.1rem; }
.social-btn:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); }
.footer-head{ margin:0 0 1rem; font-size:.95rem; font-weight:600; color:#fff; }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; }
.footer-link{ color:rgba(255,237,224,.55); transition:color .2s ease; }
.footer-link:hover{ color:var(--secondary); }
.footer-bottom{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:.75rem; align-items:center; justify-content:space-between;
  font-size:.85rem; color:rgba(255,237,224,.4); }
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}
.line-contact{
    margin-top:12px;
}

.line-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:260px;
    padding:12px 16px;
    border-radius:12px;
    background:#06C755;
    color:#fff;
    font-weight:700;
    transition:.25s;
}

.line-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(6,199,85,.35);
}