/* ==========================================================
   DC PLUS INTEGRATION — Home v2 (Framer-inspired premium)
   Loaded ONLY on index.html (body.v2). Overrides style.css.
   Keeps company theme: deep dark + orange/amber gradient.
   ========================================================== */
body.v2{
  --bg:#06080E;
  --surface:#0D111B;
  --surface-2:#141A28;
  --line:#222B40;
  --line-2:#1A2234;
  --primary:#FF3A3A;
  --primary-2:#FF6B35;
  --accent:#FFB546;
  --text:#EEF1F7;
  --text-2:#C3CBDB;
  --muted:#7C879B;
  --grad:linear-gradient(120deg,#FF3A3A 0%,#FF6B35 48%,#FFB546 100%);
  --r-lg:24px;--r-md:18px;--r-sm:12px;
  --font-head:'Space Grotesk','IBM Plex Sans Thai','Inter',system-ui,sans-serif;
  background:var(--bg);
}
/* tech display font for headings (Thai falls back to IBM Plex Sans Thai) */
body.v2 h1,body.v2 h2,body.v2 h3,body.v2 h4,body.v2 h5,
body.v2 .logo-text,body.v2 .hero h1,body.v2 .page-hero h1,
body.v2 .job-title,body.v2 .console-cell h4{
  font-family:var(--font-head);
}
/* Thai headings: nudge weight/spacing so Plex Thai sits well next to Space Grotesk */
html[lang="th"] body.v2 h1,html[lang="th"] body.v2 h2{letter-spacing:-.5px}

/* ---------- ambient aurora + grain (page-wide) ---------- */
body.v2::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -8%,rgba(255,58,58,.20),transparent 60%),
    radial-gradient(50vw 50vw at 10% 8%,rgba(255,181,70,.14),transparent 55%),
    radial-gradient(45vw 45vw at 50% 110%,rgba(255,107,53,.12),transparent 60%);
  filter:saturate(1.05);
}
body.v2::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 75%);
}
body.v2 .topbar,body.v2 .nav,body.v2 main,body.v2 section,
body.v2 .marquee,body.v2 footer,body.v2 .hero{position:relative;z-index:2}

/* ---------- floating glass nav ---------- */
body.v2 .nav{
  position:sticky;top:14px;z-index:100;margin:14px auto 0;max-width:1180px;
  width:calc(100% - 36px);border-radius:999px;
  background:rgba(13,17,27,.66);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 40px rgba(0,0,0,.42);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
body.v2 .nav.scrolled{background:rgba(10,13,21,.86);border-color:rgba(255,107,53,.18)}
body.v2 .nav .container{padding:10px 12px 10px 20px;max-width:100%}
body.v2 .menu a{font-size:13.5px;border-radius:999px;padding:8px 14px}
body.v2 .menu a:hover{background:rgba(255,107,53,.10)}
body.v2 .menu a.active{color:var(--primary-2)}
body.v2 .menu a.active::after{display:none}
body.v2 .nav .btn-primary{border-radius:999px;padding:10px 20px}

/* ---------- buttons ---------- */
body.v2 .btn{border-radius:999px;font-size:14px;padding:13px 24px;font-weight:600}
body.v2 .btn-primary{background:var(--grad);box-shadow:0 8px 26px rgba(255,107,53,.32)}
body.v2 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,107,53,.46)}
body.v2 .btn-outline,body.v2 .btn-ghost{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#fff;
  backdrop-filter:blur(8px);
}
body.v2 .btn-outline:hover,body.v2 .btn-ghost:hover{
  border-color:rgba(255,107,53,.5);background:rgba(255,107,53,.08);color:#fff;transform:translateY(-2px)
}

/* ========================================================
   HERO — centered, bold, Framer-style
   ======================================================== */
body.v2 .hero{
  border-bottom:none;padding:84px 0 40px;text-align:center;overflow:visible;
}
body.v2 .hero .hero-bg,body.v2 .hero .orb{display:none}
body.v2 .hero .container{max-width:1100px}
body.v2 .hero-eyebrow{
  margin:0 auto 26px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);color:var(--text-2);
  padding:8px 16px;backdrop-filter:blur(8px);
}
body.v2 .hero-eyebrow .dot{background:var(--accent);box-shadow:0 0 14px var(--accent)}
body.v2 .hero h1{
  font-size:clamp(40px,7.4vw,88px);line-height:.98;letter-spacing:-2.6px;
  font-weight:800;margin:0 auto 26px;max-width:14ch;
}
body.v2 .hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.v2 .hero p.lead{
  margin:0 auto 38px;max-width:660px;font-size:18.5px;line-height:1.7;color:var(--text-2);
}
body.v2 .hero-cta{justify-content:center}
body.v2 .hero .trust-row{
  display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;
  margin-top:30px;color:var(--muted);font-size:12.5px;font-family:var(--mono);letter-spacing:.5px;
}
body.v2 .hero .trust-row span{display:inline-flex;align-items:center;gap:8px}
body.v2 .hero .trust-row svg{width:15px;height:15px;color:var(--primary-2)}

/* ---------- hero showcase console ---------- */
body.v2 .showcase-console{
  max-width:1080px;margin:64px auto 0;position:relative;
}
body.v2 .showcase-console::before{
  content:"";position:absolute;inset:-1px -1px auto;height:50%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,107,53,.28),transparent 70%);
  filter:blur(8px);z-index:-1;
}
body.v2 .console{
  background:linear-gradient(180deg,rgba(20,26,40,.82),rgba(11,15,24,.9));
  border:1px solid rgba(255,255,255,.09);border-radius:22px;
  box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);overflow:hidden;
}
body.v2 .console-bar{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);
}
body.v2 .console-dots{display:flex;gap:7px}
body.v2 .console-dots i{width:11px;height:11px;border-radius:50%;display:block;background:#2a3247}
body.v2 .console-dots i:nth-child(1){background:#FF5F57}
body.v2 .console-dots i:nth-child(2){background:#FEBC2E}
body.v2 .console-dots i:nth-child(3){background:#28C840}
body.v2 .console-bar .title{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:1px}
body.v2 .console-bar .pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;color:#3ddc84;letter-spacing:1px;
  background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.25);
  padding:5px 12px;border-radius:999px;
}
body.v2 .console-bar .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84;animation:pulse 2s infinite}
body.v2 .console-body{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06);
}
body.v2 .console-cell{
  background:rgba(11,15,24,.6);padding:26px 22px;transition:background .3s;
  position:relative;text-align:left;
}
body.v2 .console-cell:hover{background:rgba(255,107,53,.06)}
body.v2 .console-cell .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(255,58,58,.16),rgba(255,107,53,.08));
  border:1px solid rgba(255,107,53,.22);color:var(--primary-2);
}
body.v2 .console-cell .ico svg{width:23px;height:23px}
body.v2 .console-cell h4{font-size:15px;color:#fff;margin-bottom:6px;font-weight:700}
body.v2 .console-cell span{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.4px}
body.v2 .console-cell .stat{
  margin-top:16px;font-family:var(--mono);font-size:11px;color:#3ddc84;letter-spacing:.5px;
  display:flex;align-items:center;gap:6px;
}
body.v2 .console-cell .stat::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ddc84}

/* ========================================================
   MARQUEE
   ======================================================== */
body.v2 .marquee{background:transparent;border:none;margin-top:30px;padding:30px 0}
body.v2 .marquee-label{background:var(--bg);color:var(--muted)}
body.v2 .marquee-item{font-size:17px;opacity:.7}
body.v2 .marquee-item:hover{opacity:1}

/* ========================================================
   STATS
   ======================================================== */
body.v2 .stats-strip{
  background:linear-gradient(180deg,rgba(20,26,40,.7),rgba(11,15,24,.85));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(16px);margin-top:30px;
}
body.v2 .stat{border-right-color:rgba(255,255,255,.07)}
body.v2 .stat .num{font-family:var(--mono)}
body.v2 .stats-strip{grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){
  body.v2 .stats-strip{grid-template-columns:1fr}
  body.v2 .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:16px 0}
  body.v2 .stat:last-child{border-bottom:none}
}

/* ========================================================
   SECTION HEADS
   ======================================================== */
body.v2 section{padding:90px 0}
body.v2 .eyebrow{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--text-2)}
body.v2 h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-1.6px}
body.v2 .section-head p{font-size:17px}

/* ========================================================
   BENTO SERVICES
   ======================================================== */
body.v2 .bento{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto);gap:16px;
}
body.v2 .bento-card{
  position:relative;border-radius:var(--r-md);padding:28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,background .4s;
  display:flex;flex-direction:column;
}
body.v2 .bento-card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-md);pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,107,53,.14),transparent 55%);
  opacity:0;transition:opacity .4s;
}
body.v2 .bento-card:hover{transform:translateY(-5px);border-color:rgba(255,107,53,.32)}
body.v2 .bento-card:hover::after{opacity:1}
body.v2 .bento-card .id{font-family:var(--mono);font-size:11px;color:var(--primary-2);letter-spacing:1.5px;margin-bottom:auto}
body.v2 .bento-card .ico{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(255,58,58,.15),rgba(255,107,53,.07));
  border:1px solid rgba(255,107,53,.2);color:var(--primary-2);
}
body.v2 .bento-card .ico svg{width:26px;height:26px}
body.v2 .bento-card h3{font-size:19px;margin-bottom:8px;color:#fff}
body.v2 .bento-card p{color:var(--text-2);font-size:13.5px;line-height:1.65}
body.v2 .bento-card .brands{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.4px}
body.v2 .bento-card .more{margin-top:16px;display:inline-flex;align-items:center;gap:6px;color:var(--primary-2);font-family:var(--mono);font-size:12.5px;font-weight:600;transition:gap .25s}
body.v2 .bento-card .more:hover{gap:12px}
/* spans */
body.v2 .bento-card.wide{grid-column:span 4}
body.v2 .bento-card.tall{grid-column:span 2;grid-row:span 2}
body.v2 .bento-card.std{grid-column:span 2}
body.v2 .bento-card.feature{
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(255,58,58,.32),transparent 55%),
    radial-gradient(120% 120% at 0% 100%,rgba(255,181,70,.22),transparent 55%),
    linear-gradient(160deg,#141A28,#0B0F18);
  border-color:rgba(255,107,53,.28);
}
body.v2 .bento-card.feature::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:34px 34px;
  mask-image:radial-gradient(ellipse 80% 80% at 70% 20%,#000,transparent 75%);
}
body.v2 .bento-card.feature>*{position:relative;z-index:1}
body.v2 .bento-card.feature h3{font-size:24px}
body.v2 .bento-card.feature .tagline{
  margin-top:auto;font-size:22px;font-weight:800;line-height:1.2;color:#fff;max-width:14ch;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ========================================================
   OPEN POSITIONS (jobs)
   ======================================================== */
body.v2 .jobs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
body.v2 .job-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:28px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
body.v2 .job-card:hover{transform:translateY(-4px);border-color:rgba(255,107,53,.32)}
body.v2 .job-card.closed{opacity:.6}
body.v2 .job-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
body.v2 .job-dept{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--primary-2);background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.25);
  padding:4px 11px;border-radius:999px;
}
body.v2 .job-type{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.5px;
}
body.v2 .job-title{font-size:19px;color:#fff;line-height:1.3;margin-bottom:10px}
body.v2 .job-loc{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px;margin-bottom:18px}
body.v2 .job-loc svg{width:16px;height:16px;color:var(--primary-2);flex-shrink:0}
body.v2 .job-quals{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
body.v2 .job-quals li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:13.5px;line-height:1.5}
body.v2 .job-quals li svg{width:17px;height:17px;color:#3ddc84;flex-shrink:0;margin-top:2px}
body.v2 .job-apply{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--primary-2);
  padding:10px 18px;border-radius:999px;border:1px solid rgba(255,107,53,.3);
  background:rgba(255,107,53,.06);transition:all .25s;cursor:pointer;
}
body.v2 .job-apply:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(255,107,53,.32)}
body.v2 .job-closed-badge{
  margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:12px;
  color:var(--muted);padding:8px 14px;border-radius:999px;border:1px dashed var(--line);
}

/* ========================================================
   TECH STACK
   ======================================================== */
body.v2 .tech-pill{
  background:rgba(20,26,40,.5);border-color:rgba(255,255,255,.08);border-radius:14px;
  backdrop-filter:blur(8px);
}
body.v2 .tech-pill:hover{border-color:rgba(255,107,53,.4);background:rgba(255,107,53,.06)}
body.v2 .tech-pill .t-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  color:var(--primary-2);
  background:linear-gradient(135deg,rgba(255,58,58,.15),rgba(255,107,53,.07));
  border:1px solid rgba(255,107,53,.22);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
body.v2 .tech-pill .t-ico svg{width:20px;height:20px}
body.v2 .tech-pill .name{font-weight:600;font-size:14px;color:#fff}
body.v2 .tech-pill:hover .t-ico{transform:translateY(-1px) rotate(-4deg) scale(1.08);box-shadow:0 8px 20px rgba(255,107,53,.28)}

/* ========================================================
   FEATURED PROJECTS
   ======================================================== */
body.v2 .project-card{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
}
body.v2 .project-card:hover{border-color:rgba(255,107,53,.32)}
body.v2 .project-card .value{color:var(--primary-2)}

/* ========================================================
   CTA
   ======================================================== */
body.v2 .cta-block{
  border-radius:32px;padding:72px 48px;
  background:linear-gradient(180deg,rgba(20,26,40,.6),rgba(11,15,24,.8));
  border:1px solid rgba(255,255,255,.1);overflow:hidden;
}
body.v2 .cta-block::before{
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(255,107,53,.3),transparent 70%);
}
body.v2 .cta-block h2{font-size:clamp(30px,4.6vw,54px)}

/* ========================================================
   REVEAL — staggered
   ======================================================== */
body.v2 .reveal{opacity:0}
body.v2 .reveal.show{animation:fadeUp .9s cubic-bezier(.22,1,.36,1) forwards}
body.v2 .stagger>*{opacity:0;transform:translateY(24px)}
body.v2 .stagger.show>*{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
body.v2 .stagger.show>*:nth-child(2){animation-delay:.08s}
body.v2 .stagger.show>*:nth-child(3){animation-delay:.16s}
body.v2 .stagger.show>*:nth-child(4){animation-delay:.24s}
body.v2 .stagger.show>*:nth-child(5){animation-delay:.32s}
body.v2 .stagger.show>*:nth-child(6){animation-delay:.4s}

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width:980px){
  body.v2 .console-body{grid-template-columns:repeat(2,1fr)}
  body.v2 .bento{grid-template-columns:repeat(4,1fr)}
  body.v2 .bento-card.wide{grid-column:span 4}
  body.v2 .bento-card.tall{grid-column:span 2;grid-row:span 1}
}
@media (max-width:760px){
  body.v2 .nav{top:0;border-radius:0;width:100%;margin:0;border-left:none;border-right:none}
  body.v2 .hero{padding:56px 0 30px}
  body.v2 .hero h1{letter-spacing:-1.4px}
  body.v2 .console-body{grid-template-columns:1fr}
  body.v2 .console-bar{flex-wrap:wrap}
  body.v2 .console-bar .title{display:none}
  body.v2 .console-bar .pill{margin-left:auto;white-space:nowrap}
  body.v2 .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  body.v2 .bento-card.wide,body.v2 .bento-card.tall,body.v2 .bento-card.std{grid-column:span 1;grid-row:auto}
  body.v2 .cta-block{padding:48px 24px}
  body.v2 .jobs-grid{grid-template-columns:1fr}
}
/* ========================================================
   INNER PAGES — v2 component overrides (about/services/etc)
   ======================================================== */
/* page hero */
body.v2 .page-hero{border-bottom:none;padding:120px 0 70px}
body.v2 .page-hero::before{opacity:.10;filter:contrast(1.1) brightness(.45) saturate(.9)}
body.v2 .page-hero::after{background:linear-gradient(180deg,rgba(6,8,14,.55),rgba(6,8,14,.92))}
body.v2 .page-hero h1{font-size:clamp(36px,5.2vw,62px);letter-spacing:-1.8px}
body.v2 .breadcrumb{color:var(--muted)}

/* generic cards / grids */
body.v2 .card,body.v2 .value-card,body.v2 .process-step,
body.v2 .service-row,body.v2 .office-card,body.v2 .contact-form,
body.v2 .intro-img,body.v2 .showcase-img{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
}
body.v2 .card,body.v2 .value-card,body.v2 .process-step{border-radius:var(--r-md)}
body.v2 .office-card,body.v2 .contact-form,body.v2 .service-row{border-radius:var(--r-md)}
body.v2 .card:hover,body.v2 .value-card:hover,body.v2 .process-step:hover,
body.v2 .office-card:hover,body.v2 .service-row:hover{border-color:rgba(255,107,53,.32)}
body.v2 .intro-img{border-radius:var(--r-lg)}

/* tags / pills inside cards */
body.v2 .service-row .tag,body.v2 .eyebrow,body.v2 .filter-btn{border-radius:999px}
body.v2 .filter-btn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.v2 .filter-btn.active{background:var(--grad);border-color:transparent}

/* form fields */
body.v2 .form-control{background:rgba(7,9,15,.6);border-color:rgba(255,255,255,.1);border-radius:12px}
body.v2 .form-control:focus{border-color:var(--primary-2);box-shadow:0 0 0 4px rgba(255,107,53,.12)}

/* contact list + social */
body.v2 .contact-list li{border-color:rgba(255,255,255,.07)}
body.v2 .social a{border-radius:12px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}

/* client logo grid */
body.v2 .client-grid{border-color:rgba(255,255,255,.08);background:rgba(13,17,27,.5)}
body.v2 .client-logo{border-color:rgba(255,255,255,.06)}

/* footer */
body.v2 footer{border-top-color:rgba(255,255,255,.08)}
body.v2 .foot-cert span{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
body.v2 .foot-bottom{border-top-color:rgba(255,255,255,.08)}

/* ========================================================
   PROJECTS v2 — name + details + 2 photos (no client/value)
   ======================================================== */
body.v2 .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
body.v2 .work-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.72));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
body.v2 .work-card:hover{transform:translateY(-6px);border-color:rgba(255,107,53,.34);box-shadow:0 24px 60px rgba(0,0,0,.5)}
body.v2 .work-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.06)}
body.v2 .work-imgs .shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
body.v2 .work-imgs img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);opacity:.92}
body.v2 .work-card:hover .work-imgs img{transform:scale(1.06);opacity:1}
body.v2 .work-imgs .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,8,14,.45))}
body.v2 .work-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
body.v2 .work-card .tag{
  display:inline-block;align-self:flex-start;margin-bottom:12px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--primary-2);background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.25);
  padding:5px 12px;border-radius:999px;
}
body.v2 .work-body h4{font-size:20px;color:#fff;line-height:1.3;margin-bottom:12px;font-family:var(--font-head)}
body.v2 .work-desc{color:var(--text-2);font-size:14px;line-height:1.7;margin-bottom:18px}
body.v2 .work-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
body.v2 .work-specs span{
  font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  padding:5px 11px;border-radius:8px;
}
/* featured (home) — 3 across on desktop */
body.v2 .work-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){body.v2 .work-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){body.v2 .work-grid.cols-3{grid-template-columns:1fr}}
@media (max-width:760px){
  body.v2 .work-grid{grid-template-columns:1fr}
}

/* marquee label — centered above track (fix clipping) */
body.v2 .marquee-label{
  position:static;transform:none;display:block;text-align:center;
  top:auto;left:auto;background:transparent;margin-bottom:18px;
}

/* ========================================================
   HERO — entrance animation (fade-up on load)
   ======================================================== */
/* hidden until hero enters viewport (re-plays every time it re-enters) */
body.v2 .hero .hero-eyebrow,
body.v2 .hero h1,
body.v2 .hero p.lead,
body.v2 .hero .hero-cta,
body.v2 .hero .trust-row{opacity:0}
body.v2 .hero.in-view .hero-eyebrow,
body.v2 .hero.in-view h1,
body.v2 .hero.in-view p.lead,
body.v2 .hero.in-view .hero-cta,
body.v2 .hero.in-view .trust-row{
  animation:heroUp 1.15s cubic-bezier(.16,1,.3,1) both;
}
body.v2 .hero.in-view .hero-eyebrow{animation-delay:.06s}
body.v2 .hero.in-view h1{animation-delay:.20s}
body.v2 .hero.in-view p.lead{animation-delay:.36s}
body.v2 .hero.in-view .hero-cta{animation-delay:.52s}
body.v2 .hero.in-view .trust-row{animation-delay:.68s}
@keyframes heroUp{
  0%{opacity:0;transform:translateY(54px);filter:blur(8px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
/* inner page hero — same staggered fade-up (re-plays on re-enter) */
body.v2 .page-hero .breadcrumb,
body.v2 .page-hero h1,
body.v2 .page-hero p{opacity:0}
body.v2 .page-hero.in-view .breadcrumb,
body.v2 .page-hero.in-view h1,
body.v2 .page-hero.in-view p{animation:heroUp 1.1s cubic-bezier(.16,1,.3,1) both}
body.v2 .page-hero.in-view .breadcrumb{animation-delay:.06s}
body.v2 .page-hero.in-view h1{animation-delay:.20s}
body.v2 .page-hero.in-view p{animation-delay:.38s}

/* ========================================================
   ABOUT — Company facts + revenue chart (left column)
   ======================================================== */
body.v2 .intro-grid{align-items:start}
body.v2 .company-left{display:flex;flex-direction:column;gap:16px}
body.v2 .company-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.v2 .fact{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:22px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
body.v2 .fact:hover{border-color:rgba(255,107,53,.3);transform:translateY(-2px)}
body.v2 .fact.wide{grid-column:1 / -1}
body.v2 .fact .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
body.v2 .fact .v{font-family:var(--font-head);font-weight:700;font-size:32px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.v2 .fact .vsub{margin-left:8px;font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--text-2)}
body.v2 .fact .note{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
/* revenue chart card */
body.v2 .rev-card{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:22px 24px;
}
body.v2 .rev-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
body.v2 .rev-head .t{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
body.v2 .rev-head .u{font-family:var(--mono);font-size:10.5px;color:var(--primary-2)}
body.v2 .rev-chart{width:100%;height:auto;display:block;overflow:visible}
body.v2 .rev-chart .val{font-family:var(--mono);font-size:11px;font-weight:700;fill:#fff}
body.v2 .rev-chart .yr{font-family:var(--mono);font-size:10px;fill:var(--muted)}

/* ========================================================
   ABOUT — Vision / Mission / Values
   ======================================================== */
body.v2 .vmv-vision{
  max-width:880px;margin:0 auto 48px;text-align:center;position:relative;
  background:linear-gradient(180deg,rgba(20,26,40,.5),rgba(13,17,27,.66));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);padding:44px 40px;
  overflow:hidden;
}
body.v2 .vmv-vision::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,107,53,.16),transparent 70%);pointer-events:none;
}
body.v2 .vmv-vision .lbl{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--primary-2);display:block;margin-bottom:14px}
body.v2 .vmv-vision p{font-size:21px;line-height:1.55;color:#fff;font-family:var(--font-head);font-weight:500;position:relative}
body.v2 .vmv-sub{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
body.v2 .core-values{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
body.v2 .core-values .cv{
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,107,53,.25);
  font-weight:600;color:#fff;font-size:15px;transition:all .25s;
}
body.v2 .core-values .cv:hover{background:rgba(255,107,53,.08);transform:translateY(-2px)}
body.v2 .core-values .cv svg{width:20px;height:20px;color:var(--primary-2)}

/* ========================================================
   ABOUT — Management Organization
   ======================================================== */
body.v2 .org-chart{display:flex;flex-direction:column;align-items:center;gap:0}
body.v2 .org-tier{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;position:relative}
body.v2 .org-tier.org-top{margin-bottom:34px}
body.v2 .org-tier.org-top::after{content:"";position:absolute;left:50%;bottom:-34px;width:2px;height:34px;background:linear-gradient(var(--primary-2),transparent)}
body.v2 .org-mgrs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%;margin-top:34px;position:relative}
body.v2 .org-mgrs::before{content:"";position:absolute;top:-34px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,107,53,.4),transparent)}
body.v2 .org-card{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:24px 20px;text-align:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;width:230px;
}
body.v2 .org-mgrs .org-card{width:auto}
body.v2 .org-card:hover{transform:translateY(-4px);border-color:rgba(255,107,53,.34)}
body.v2 .org-card.lead{border-color:rgba(255,107,53,.3);background:linear-gradient(180deg,rgba(255,107,53,.08),rgba(13,17,27,.7))}
body.v2 .org-photo{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;overflow:hidden;border:2px solid rgba(255,107,53,.35);background:var(--surface-2)}
body.v2 .org-card.lead .org-photo{width:104px;height:104px}
body.v2 .org-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
body.v2 .org-name{font-family:var(--font-head);font-weight:600;font-size:16.5px;color:#fff;margin-bottom:5px}
body.v2 .org-role{font-size:12.5px;color:var(--text-2);line-height:1.45;font-family:var(--mono);letter-spacing:.3px}

/* ========================================================
   ABOUT — Certifications (cert cards)
   ======================================================== */
body.v2 .cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
body.v2 .cert-card{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:18px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
body.v2 .cert-card:hover{transform:translateY(-5px);border-color:rgba(255,107,53,.34);box-shadow:0 24px 60px rgba(0,0,0,.5)}
body.v2 .cert-card .doc{background:#fff;border-radius:10px;padding:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
body.v2 .cert-card .doc img{width:100%;display:block;border-radius:4px;transition:transform .5s}
body.v2 .cert-card:hover .doc img{transform:scale(1.02)}
body.v2 .cert-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:0 6px}
body.v2 .cert-meta .badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.5px;
  color:#fff;background:var(--grad);padding:8px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(255,107,53,.3);
}
body.v2 .cert-meta .desc{font-size:12.5px;color:var(--text-2);text-align:right;line-height:1.4}
@media (max-width:680px){
  body.v2 .cert-grid{grid-template-columns:1fr;max-width:420px}
}

/* ========================================================
   TECHNOLOGY — brand partners by category (translucent blocks)
   ======================================================== */
body.v2 .brand-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.v2 .brand-block{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:14px;
  backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
  display:flex;align-items:center;justify-content:center;
}
body.v2 .brand-block:hover{transform:translateY(-4px);border-color:rgba(255,107,53,.34);box-shadow:0 18px 44px rgba(0,0,0,.4)}
body.v2 .brand-block .bb-tile{background:rgba(255,255,255,.94);border-radius:10px;padding:14px;width:100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
body.v2 .brand-block .bb-tile img{width:100%;display:block;border-radius:3px}
@media (max-width:900px){body.v2 .brand-cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){body.v2 .brand-cats{grid-template-columns:1fr}}

/* ========================================================
   ABOUT — Locations (Google Maps + copyable coords)
   ======================================================== */
body.v2 .map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
body.v2 .map-card{
  background:linear-gradient(180deg,rgba(20,26,40,.55),rgba(13,17,27,.7));
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
}
body.v2 .map-card .map-embed{position:relative;aspect-ratio:16/10;background:var(--surface-2);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
body.v2 .map-card .map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;background:transparent;filter:grayscale(.2) contrast(1.05)}
body.v2 .map-fallback{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);
  background:
    radial-gradient(circle at 50% 42%,rgba(255,107,53,.14),transparent 62%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,30px 30px,30px 30px;
}
body.v2 .map-fallback svg{width:36px;height:36px;color:var(--primary-2)}
body.v2 .map-fallback span{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
body.v2 .map-card .map-body{padding:24px}
body.v2 .map-card .label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--primary-2);margin-bottom:8px}
body.v2 .map-card h4{font-size:19px;color:#fff;margin-bottom:8px;font-family:var(--font-head)}
body.v2 .map-card p{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:16px}
body.v2 .coord{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.v2 .coord code{
  font-family:var(--mono);font-size:13px;color:#fff;background:rgba(7,9,15,.6);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 12px;letter-spacing:.3px;
}
body.v2 .coord .copy-btn{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--primary-2);background:rgba(255,107,53,.08);border:1px solid rgba(255,107,53,.3);
  border-radius:8px;padding:8px 12px;cursor:pointer;transition:all .2s;
}
body.v2 .coord .copy-btn:hover{background:var(--grad);color:#fff;border-color:transparent}
body.v2 .coord .copy-btn svg{width:14px;height:14px}
body.v2 .coord .copy-btn.copied{background:rgba(61,220,132,.15);border-color:rgba(61,220,132,.4);color:#3ddc84}
body.v2 .map-card .map-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--primary-2)}
@media (max-width:760px){
  body.v2 .org-mgrs{grid-template-columns:repeat(2,1fr)}
  body.v2 .org-mgrs::before{display:none}
  body.v2 .map-grid{grid-template-columns:1fr}
}

/* ========================================================
   CAREERS — apply form (Formspree)
   ======================================================== */
body.v2 .apply-form{max-width:760px;margin:0 auto}
body.v2 input[type=file].form-control{padding:9px 12px;cursor:pointer;color:var(--text-2)}
body.v2 input[type=file].form-control::file-selector-button{
  background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.3);color:var(--primary-2);
  border-radius:8px;padding:7px 14px;margin-right:14px;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.5px;transition:all .2s;
}
body.v2 input[type=file].form-control::file-selector-button:hover{background:var(--grad);color:#fff;border-color:transparent}
body.v2 .form-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
body.v2 .apply-fallback{text-align:center;margin-top:22px;font-size:13.5px;color:var(--text-2)}
body.v2 .apply-fallback a{color:var(--primary-2);font-weight:600}

/* ========================================================
   MOTION — richer, tasteful animations (site-wide)
   ======================================================== */
/* animated gradient shimmer on accent words */
body.v2 .accent{
  background-size:200% auto;animation:shimmer 6s linear infinite;
  padding-bottom:.12em;   /* room for descenders (g, y) — avoids clip on gradient text */
}
body.v2 .hero h1 .accent{display:inline-block;margin-bottom:-.12em}
@keyframes shimmer{to{background-position:200% center}}

/* nav link sliding underline */
body.v2 .menu a{position:relative}
body.v2 .menu a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1);
}
body.v2 .menu a:hover::after,body.v2 .menu a.active::after{transform:scaleX(1)}

/* hero console gentle float */
body.v2 .showcase-console{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* directional + scaled reveals (opt-in via class) */
body.v2 .reveal-l{opacity:0;transform:translateX(-40px)}
body.v2 .reveal-r{opacity:0;transform:translateX(40px)}
body.v2 .reveal-l.show{animation:slideInL .9s cubic-bezier(.22,1,.36,1) forwards}
body.v2 .reveal-r.show{animation:slideInR .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes slideInL{to{opacity:1;transform:translateX(0)}}
@keyframes slideInR{to{opacity:1;transform:translateX(0)}}

/* icon pop on card hover */
body.v2 .card .icon,body.v2 .value-card .icon,body.v2 .process-step .icon,
body.v2 .bento-card .ico,body.v2 .console-cell .ico{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
body.v2 .card:hover .icon,body.v2 .value-card:hover .icon,body.v2 .process-step:hover .icon,
body.v2 .bento-card:hover .ico{
  transform:translateY(-2px) rotate(-4deg) scale(1.06);
  box-shadow:0 10px 26px rgba(255,107,53,.28);
}

/* CTA button arrow nudge */
body.v2 .btn svg{transition:transform .25s}
body.v2 .btn:hover svg{transform:translateX(4px)}

/* better Thai readability */
html[lang="th"] body.v2{letter-spacing:0}
html[lang="th"] body.v2 p,html[lang="th"] body.v2 .lead{line-height:1.85}

@media (prefers-reduced-motion:reduce){
  body.v2 .reveal,body.v2 .stagger>*,body.v2 .reveal-l,body.v2 .reveal-r,
  body.v2 .hero .hero-eyebrow,body.v2 .hero h1,body.v2 .hero p.lead,body.v2 .hero .hero-cta,body.v2 .hero .trust-row,
  body.v2 .page-hero .breadcrumb,body.v2 .page-hero h1,body.v2 .page-hero p{opacity:1!important;transform:none!important;animation:none!important}
  body.v2 .console-bar .pill::before,body.v2 .accent,body.v2 .showcase-console{animation:none}
}

/* ===== Form success message (AJAX submit) ===== */
.form-success{text-align:center;padding:48px 24px;animation:fsIn .5s ease both}
.form-success .fs-check{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;
  color:#07090F;background:linear-gradient(135deg,#FF7A1A,#ff9a4d);
  box-shadow:0 8px 30px rgba(255,122,26,.35)}
.form-success h3{font-size:1.5rem;margin:0 0 10px;color:#fff}
.form-success p{color:rgba(255,255,255,.7);max-width:30ch;margin:0 auto;line-height:1.6}
@keyframes fsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}