/* ================================================================
   AGENTIC AI THAILAND — style.css
   Theme: Futuristic Cyberpunk · Electric Emerald · Professional
   Fonts: Orbitron (headlines) · Exo 2 (body) · JetBrains Mono (code/labels)
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  /* greens */
  --g1:#00ff88;
  --g2:#00e676;
  --g3:#00c853;
  --g4:#69ffb4;
  --g5:#b9ffd8;
  --glow:rgba(0,255,136,.22);
  --gdim:rgba(0,255,136,.08);

  /* backgrounds */
  --bg:#020c06;
  --bg2:#040f08;
  --bg3:#06120a;
  --card:#071409;
  --card2:#0b1e0f;

  /* borders */
  --bdr:rgba(0,255,136,.13);
  --bdr2:rgba(0,255,136,.28);
  --bdr3:rgba(0,255,136,.45);

  /* text */
  --t1:#edfff5;
  --t2:#9ecfb5;
  --t3:#4c7860;

  /* accents */
  --cyan:#00e5ff;
  --amber:#ffab00;
  --red:#ff4d4d;

  /* type */
  --fd:'Orbitron',monospace;
  --fb:'Exo 2',sans-serif;
  --fm:'JetBrains Mono',monospace;

  /* layout */
  --r:12px;
  --gutter:clamp(16px,4vw,60px);
  --max:1280px;
  --nav:72px;
}

body{
  background:var(--bg);
  color:var(--t1);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* scanline overlay */
body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent 0px,transparent 3px,
    rgba(0,255,136,.007) 3px,rgba(0,255,136,.007) 4px
  );
  pointer-events:none;z-index:9000;
}

/* noise grain */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:8999;opacity:.5;
}

/* ambient orbs */
.orb{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0;}
.orb-1{width:700px;height:700px;background:rgba(0,255,136,.06);top:-250px;left:-200px;}
.orb-2{width:480px;height:480px;background:rgba(0,229,255,.04);bottom:-100px;right:-150px;}
.orb-3{width:320px;height:320px;background:rgba(0,200,83,.05);top:42%;left:48%;transform:translate(-50%,-50%);}

/* ===================== NAV ===================== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav);
  background:rgba(2,12,6,.92);
  backdrop-filter:blur(28px) saturate(1.4);
  border-bottom:1px solid var(--bdr);
}
nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--g1) 40%,var(--g1) 60%,transparent);
  opacity:.2;
}
.nav-i{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}

/* logo */
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.logo-mark{
  width:40px;height:40px;
  border:1.5px solid var(--g2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,255,136,.07);position:relative;overflow:hidden;
}
.logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,255,136,.18),transparent 60%);
}
.logo-mark span{font-family:var(--fd);font-size:.68rem;font-weight:900;color:var(--g1);letter-spacing:-1px;z-index:1;}
.logo-name{font-family:var(--fd);font-size:.8rem;font-weight:700;color:var(--t1);letter-spacing:.5px;line-height:1.2;}
.logo-sub{font-family:var(--fm);font-size:.55rem;color:var(--g3);letter-spacing:2px;text-transform:uppercase;}

/* links */
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  color:var(--t3);text-decoration:none;
  font-family:var(--fm);font-size:.71rem;font-weight:500;
  padding:6px 11px;border-radius:7px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--g1);background:rgba(0,255,136,.07);}
.nav-cta{background:var(--g3)!important;color:#000!important;font-weight:700!important;border-radius:8px!important;}
.nav-cta:hover{background:var(--g1)!important;box-shadow:0 0 20px rgba(0,255,136,.3)!important;}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--g1);border-radius:2px;transition:.3s;}

/* ===================== MAIN ===================== */
main{position:relative;z-index:1;padding-top:var(--nav);}

/* ===================== PAGE HERO ===================== */
.page-hero{
  padding:68px var(--gutter) 56px;
  border-bottom:1px solid var(--bdr);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,255,136,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,136,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 100% at 30% 0%,black,transparent);
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 80% at 10% 60%,rgba(0,255,136,.05),transparent 70%);
}
.ph-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1;}
.ph-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.67rem;font-weight:600;
  color:var(--g2);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;
}
.ph-eyebrow::before{content:'';display:inline-block;width:28px;height:1px;background:var(--g2);}
.ph-title{
  font-family:var(--fd);
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:900;line-height:1.05;
  margin-bottom:18px;letter-spacing:-1px;
}
.ph-title span{color:var(--g1);text-shadow:0 0 40px rgba(0,255,136,.35);}
.ph-desc{font-size:1.02rem;color:var(--t2);max-width:680px;line-height:1.85;}

/* ===================== SECTIONS ===================== */
.sec{padding:72px var(--gutter);position:relative;z-index:1;}
.sec-inner{max-width:var(--max);margin:0 auto;}
.sec-label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.67rem;font-weight:600;
  color:var(--g2);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;
}
.sec-label::before{content:'';display:inline-block;width:26px;height:1px;background:var(--g2);}
.sec-title{
  font-family:var(--fd);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:800;line-height:1.1;margin-bottom:16px;letter-spacing:-.5px;
}
.sec-title span{color:var(--g1);}
.sec-desc{font-size:.97rem;color:var(--t2);max-width:680px;line-height:1.85;margin-bottom:40px;}

/* ===================== CARDS ===================== */
.card{
  background:var(--card);border:1px solid var(--bdr);
  border-radius:16px;padding:28px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--g1),var(--g4),transparent);
  opacity:0;transition:opacity .3s;
}
.card:hover{
  transform:translateY(-6px);border-color:var(--bdr2);
  box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 30px rgba(0,255,136,.06);
}
.card:hover::before{opacity:1;}
.card-icon{
  width:52px;height:52px;
  background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.18);
  border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:1.45rem;margin-bottom:18px;
}
.card-title{font-family:var(--fd);font-size:.85rem;font-weight:700;margin-bottom:10px;color:var(--t1);letter-spacing:.3px;}
.card-desc{font-size:.88rem;color:var(--t2);line-height:1.75;}

/* grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}

/* ===================== HIGHLIGHT ===================== */
.highlight{
  background:var(--card);border:1px solid var(--bdr);border-left:3px solid var(--g1);
  border-radius:var(--r);padding:22px 28px;margin:20px 0;
}
.highlight.cyan{border-left-color:var(--cyan);}
.highlight.amber{border-left-color:var(--amber);}
.highlight h4{
  font-family:var(--fd);font-size:.72rem;font-weight:700;
  color:var(--g1);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px;
}
.highlight.cyan h4{color:var(--cyan);}
.highlight.amber h4{color:var(--amber);}
.highlight p{color:var(--t2);font-size:.92rem;line-height:1.8;}

/* ===================== CODE BLOCK ===================== */
.code-block{
  background:#010a04;border:1px solid var(--bdr);
  border-radius:var(--r);padding:20px 24px;
  font-family:var(--fm);font-size:.81rem;
  color:#c4f0d4;line-height:1.85;overflow-x:auto;margin:16px 0;
  position:relative;
}
.code-block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--g3),transparent 60%);
}
.kw{color:var(--g1);font-weight:600;}
.str{color:#ffd54f;}
.cmt{color:#3e6b4e;font-style:italic;}
.fn{color:var(--cyan);}
.num{color:#ff8a65;}

/* ===================== TERMINAL ===================== */
.terminal{
  background:#010804;border:1px solid var(--bdr2);
  border-radius:14px;overflow:hidden;
}
.t-bar{
  background:var(--card2);padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--bdr);
}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.dot.r{background:#ff5f57;}.dot.y{background:#febc2e;}.dot.g{background:var(--g3);}
.t-label{font-family:var(--fm);font-size:.7rem;color:var(--t3);margin-left:auto;letter-spacing:1px;}
.t-body{padding:20px 24px;font-family:var(--fm);font-size:.82rem;color:#a8ddb5;line-height:2;}
.t-prompt{color:var(--g1);}.t-cmd{color:var(--t1);}.t-out{color:var(--t3);}.t-ok{color:var(--g1);}.t-warn{color:var(--amber);}

/* ===================== TAGS ===================== */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.tag{
  background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.2);
  color:var(--g4);font-family:var(--fm);font-size:.68rem;
  padding:4px 12px;border-radius:100px;font-weight:500;
}
.tag.cyan{background:rgba(0,229,255,.07);border-color:rgba(0,229,255,.2);color:var(--cyan);}
.tag.amber{background:rgba(255,171,0,.07);border-color:rgba(255,171,0,.2);color:var(--amber);}

/* ===================== BUTTONS ===================== */
.btn-p{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--g3);color:#000;
  font-family:var(--fd);font-weight:700;font-size:.8rem;
  padding:13px 28px;border-radius:var(--r);
  text-decoration:none;letter-spacing:.5px;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-p:hover{background:var(--g1);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,255,136,.35);}
.btn-s{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--g1);
  font-family:var(--fd);font-weight:600;font-size:.8rem;
  padding:12px 28px;border-radius:var(--r);
  border:1px solid var(--bdr2);text-decoration:none;letter-spacing:.5px;
  transition:background .2s,border-color .2s;
}
.btn-s:hover{background:rgba(0,255,136,.07);border-color:var(--g1);}

/* ===================== CTA STRIP ===================== */
.cta-strip{
  background:var(--card);border:1px solid var(--bdr2);border-radius:20px;
  padding:44px 52px;display:grid;grid-template-columns:1fr auto;
  gap:36px;align-items:center;margin-top:56px;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(0,255,136,.07),transparent 70%);
}
.cta-title{font-family:var(--fd);font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;margin-bottom:8px;letter-spacing:-.3px;}
.cta-title span{color:var(--g1);}
.cta-desc{color:var(--t2);font-size:.95rem;}
.cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap;}

/* ===================== STATS ===================== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0;}
.stat-box{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:24px 18px;text-align:center;position:relative;overflow:hidden;
}
.stat-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
}
.stat-num{font-family:var(--fd);font-size:2.2rem;font-weight:900;color:var(--g1);line-height:1;letter-spacing:-1px;}
.stat-lbl{font-size:.74rem;color:var(--t3);margin-top:8px;line-height:1.5;font-family:var(--fm);}

/* ===================== TABLE ===================== */
.data-table{width:100%;border-collapse:collapse;font-size:.87rem;margin:16px 0;}
.data-table th{
  background:rgba(0,255,136,.07);color:var(--g1);
  font-family:var(--fd);font-weight:700;font-size:.7rem;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:13px 16px;text-align:left;border-bottom:1px solid var(--bdr2);
}
.data-table td{
  padding:12px 16px;border-bottom:1px solid rgba(0,255,136,.05);
  color:var(--t2);line-height:1.6;vertical-align:top;
}
.data-table tr:hover td{background:rgba(0,255,136,.025);}
.yes{color:var(--g1);font-weight:700;}
.no{color:var(--red);font-weight:700;}
.partial{color:var(--amber);font-weight:700;}

/* ===================== PROSE ===================== */
.prose{color:var(--t2);line-height:1.9;font-size:.97rem;}
.prose p{margin-bottom:16px;}
.prose strong{color:var(--t1);}
.prose h3{font-family:var(--fd);font-size:.95rem;font-weight:700;color:var(--t1);margin:28px 0 10px;letter-spacing:.3px;}
.prose ul,.prose ol{padding-left:20px;margin-bottom:16px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--g1);text-decoration:none;}
.prose a:hover{text-decoration:underline;}

/* ===================== PIPELINE ===================== */
.pipeline{display:flex;align-items:stretch;gap:0;margin:32px 0;overflow-x:auto;}
.pipe-node{
  flex:1;min-width:120px;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:12px;padding:18px 16px;text-align:center;
}
.pipe-arrow{
  display:flex;align-items:center;padding:0 6px;
  color:var(--g1);font-size:1.1rem;flex-shrink:0;
}
.pipe-n{font-family:var(--fd);font-size:.58rem;color:var(--g3);letter-spacing:1px;margin-bottom:6px;}
.pipe-t{font-family:var(--fd);font-size:.75rem;font-weight:700;color:var(--t1);margin-bottom:4px;}
.pipe-d{font-size:.72rem;color:var(--t3);line-height:1.4;}

/* ===================== STEP LIST ===================== */
.step-list{list-style:none;padding:0;margin:0;}
.step-list li{
  display:flex;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--bdr);
}
.step-list li:last-child{border-bottom:none;}
.step-badge{
  width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g3),var(--g1));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:.72rem;font-weight:800;color:#000;margin-top:2px;
}
.step-body h4{font-family:var(--fd);font-weight:700;color:var(--t1);font-size:.88rem;margin-bottom:6px;letter-spacing:.2px;}
.step-body p{color:var(--t2);font-size:.9rem;line-height:1.7;margin:0;}

/* ===================== CONTACT CARDS ===================== */
.contact-link{
  display:flex;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--bdr);border-radius:14px;
  padding:22px 26px;text-decoration:none;color:inherit;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.contact-link::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
  opacity:0;transition:opacity .25s;
}
.contact-link:hover{transform:translateY(-3px);border-color:var(--bdr2);box-shadow:0 12px 32px rgba(0,0,0,.35);}
.contact-link:hover::before{opacity:1;}
.cl-icon{
  width:50px;height:50px;background:rgba(0,255,136,.07);
  border:1px solid rgba(0,255,136,.2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;
}
.cl-body{flex:1;min-width:0;}
.cl-type{font-family:var(--fm);font-size:.67rem;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.cl-value{font-family:var(--fm);font-size:.95rem;font-weight:600;color:var(--g2);margin-bottom:3px;word-break:break-all;}
.cl-note{font-size:.82rem;color:var(--t3);font-style:italic;}
.cl-arrow{color:var(--g1);font-size:1.2rem;font-weight:700;flex-shrink:0;transition:transform .2s;}
.contact-link:hover .cl-arrow{transform:translateX(5px);}

/* ===================== FADE ANIMATION ===================== */
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}

/* ===================== FOOTER ===================== */
footer{
  position:relative;z-index:1;background:rgba(0,0,0,.55);
  border-top:1px solid var(--bdr);padding:48px var(--gutter);
}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);opacity:.18;
}
.foot-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);
  gap:48px;margin-bottom:40px;
}
.foot-brand-name{font-family:var(--fd);font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:12px;display:block;}
.foot-desc{font-size:.8rem;color:var(--t3);line-height:1.8;font-family:var(--fm);}
.foot-col h5{
  font-family:var(--fd);font-size:.67rem;font-weight:700;color:var(--g2);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;
}
.foot-col a{
  display:block;font-size:.8rem;color:var(--t3);
  text-decoration:none;font-family:var(--fm);padding:4px 0;transition:color .2s;
}
.foot-col a:hover{color:var(--g1);}
.foot-bottom{
  max-width:var(--max);margin:0 auto;padding-top:28px;
  border-top:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot-copy{font-size:.75rem;color:var(--t3);font-family:var(--fm);}
.foot-copy a{color:var(--g2);text-decoration:none;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media(max-width:900px){
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:var(--nav);left:0;right:0;
    background:rgba(2,12,6,.98);backdrop-filter:blur(28px);
    padding:16px var(--gutter);border-bottom:1px solid var(--bdr);gap:2px;
  }
  .nav-links.open{display:flex;}
  .hamburger{display:flex;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .cta-strip{grid-template-columns:1fr;padding:32px 28px;}
  .pipeline{flex-direction:column;}
}
@media(max-width:640px){
  .grid-4,.stat-strip{grid-template-columns:1fr;}
  .grid-auto{grid-template-columns:1fr;}
  .cta-btns{flex-direction:column;}
  .foot-grid{grid-template-columns:1fr;gap:28px;}
}