/* =====================================================================
   intramind — landing page styles
   ฟอนต์โหลดผ่าน <link> ใน index.html (เร็วกว่า @import ที่นี่)
   ===================================================================== */

/* ============================= TOKENS ============================= */
:root{
  --font-sans:"Inter","IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --font-display:"Space Grotesk","IBM Plex Sans Thai","Inter",sans-serif;
  --font-logo:"Orbitron",sans-serif;
  --font-serif:"Playfair Display",Georgia,serif;

  /* brand — black + violet */
  --brand:#5127B6;
  --brand-light:#B161FD;
  --brand-glow:rgba(177,97,253,0.35);
  --brand-line:rgba(177,97,253,0.22);

  --accent:#E6E6E6;
  --muted:#8E9299;
  --r:16px;

  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-power:cubic-bezier(0.76,0,0.24,1);
}

/* ============================= RESET ============================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar,::-webkit-scrollbar{display:none;width:0;height:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:#000;
  color:#fff;
  font-family:var(--font-sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor:none;
  overflow-x:hidden;
  min-height:100vh;
}
a,button,[role="button"],img,input,textarea,select{cursor:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;}
img{display:block;}
::selection{background:var(--brand-light);color:#0A0414;}
.th{font-family:var(--font-sans);}

/* ============================= LAYERS ============================= */
#halo-mount{
  position:fixed;
  inset:0;
  z-index:0;
  transform-origin:center center;
  will-change:transform;
  background:radial-gradient(60% 50% at 50% 22%, rgba(177,97,253,0.20), rgba(81,39,182,0.07) 40%, transparent 70%);
}
#halo-mount canvas{display:block;width:100%;height:100%;}

#content{
  position:relative;
  z-index:10;
  opacity:0;
  transition:opacity 1s ease-out;
}
#content.loaded{opacity:1;}

/* ============================= MOTION PRIMITIVES ============================= */
.v-item{
  opacity:0;
  transform:perspective(1200px) translateY(100px) rotateX(15deg) scale(0.9);
  filter:blur(10px);
  transition:opacity .8s var(--ease-expo), transform .8s var(--ease-expo), filter .8s var(--ease-expo);
  transition-delay:var(--d,0s);
}
.v-item.in{
  opacity:1;
  transform:perspective(1200px) translateY(0) rotateX(0deg) scale(1);
  filter:blur(0px);
}
.v-card{
  opacity:0;
  transform:perspective(1200px) translateY(100px) rotateX(15deg) scale(0.9);
  filter:blur(10px);
  transition:opacity 1.6s var(--ease-expo), transform 1.6s var(--ease-expo), filter 1.6s var(--ease-expo);
  transition-delay:var(--d,0s);
}
.v-card.in{
  opacity:1;
  transform:perspective(1200px) translateY(0) rotateX(0deg) scale(1);
  filter:blur(0px);
}
.v-x{opacity:0;transform:translateX(-20px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);transition-delay:var(--d,0s);}
.v-x.in{opacity:1;transform:translateX(0);}
.v-y{opacity:0;transform:translateY(-10px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);transition-delay:var(--d,0s);}
.v-y.in{opacity:1;transform:translateY(0);}

/* TextEffect segments */
.te{display:inline-block;}
.te .wgrp{display:inline-block;white-space:nowrap;}
.te .seg{
  display:inline-block;
  white-space:pre;
  opacity:0;
  filter:blur(12px);
  transition:opacity .6s ease-out, filter .6s ease-out;
  transition-delay:var(--sd,0s);
}
.te.in .seg{opacity:1;filter:blur(0px);}

/* DiamondStar */
.diamond{
  display:inline-block;
  transform-style:preserve-3d;
  animation:dsSpin 3s linear infinite;
  flex:none;
}
.diamond svg{display:block;width:100%;height:100%;}
@keyframes dsSpin{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes softPulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

/* brand logo mark */
.logo{display:block;fill:currentColor;color:#fff;}

/* ============================= NAV ============================= */
.nav{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:50;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:1.5rem;
  pointer-events:none;
}
.nav > *{pointer-events:auto;}
.nav-left{display:flex;flex-direction:column;gap:1.5rem;}
.nav-logo{display:block;width:124px;color:#fff;}
.nav-logo .logo{width:100%;height:auto;}
.nav-ver{
  display:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:0.5;
}
.nav-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;}
.nav-link{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:0.25rem;
  transition:color .3s ease;
}
.nav-link:hover{color:var(--brand-light);}
.nav-link svg{width:12px;height:12px;transition:transform .3s ease;}
.nav-link:hover svg{transform:translate(0.125rem,-0.125rem);}

/* burger — phone only; the three bars fold into an X while the panel is open */
.nav-burger{
  display:none;
  position:relative;
  z-index:2;                   /* stays above the panel it opens */
  width:2.75rem;height:2.75rem; /* a comfortable tap target around a 22px mark */
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  padding:0;
  cursor:none;
}
.nav-burger span{
  display:block;
  width:22px;height:1.5px;
  background:#fff;
  border-radius:2px;
  transition:transform .45s var(--ease-expo), opacity .3s ease, width .45s var(--ease-expo);
}
.nav-burger span:nth-child(2){width:15px;}
.nav.open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;width:22px;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:767px){
  .nav-burger{display:flex;}
  .nav-logo{width:108px;}

  /* the links become a panel that drops from the top edge, sitting on a black
     alpha fade. selectors are .nav-scoped so they beat the .v-y / .v-y.in
     reveal primitive that also owns opacity + transform on this element */
  .nav .nav-right{
    position:fixed;
    top:0;left:0;right:0;
    flex-direction:column;
    align-items:flex-end;
    gap:1.15rem;
    padding:5.75rem 1.5rem 2.75rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .45s var(--ease-expo), transform .45s var(--ease-expo), visibility .45s;
  }
  /* the scrim lives on a layer behind the links — masking the panel itself would
     fade the bottom links out along with the backdrop */
  .nav .nav-right::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    /* stays solid past the last link (~85% of the panel), then falls away */
    background:linear-gradient(180deg,
      rgba(0,0,0,0.97) 0%,
      rgba(0,0,0,0.95) 60%,
      rgba(0,0,0,0.86) 85%,
      rgba(0,0,0,0) 100%);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    /* stop the blur where the scrim stops, instead of cutting a hard edge mid-screen */
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
    pointer-events:none;
  }
  .nav.open .nav-right{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-link{font-size:13px;letter-spacing:0.12em;}
  .nav-link svg{width:11px;height:11px;}
}
@media (min-width:768px){
  .nav{padding:2rem 2.5rem;}
  .nav-left{gap:2.5rem;}
  .nav-logo{width:158px;}
  .nav-ver{display:block;}
}

/* ============================= HERO ============================= */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:9.5rem 1.5rem 8rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
}
.hero-left{display:flex;flex-direction:column;justify-content:center;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:;#fff;
  margin-bottom:1.5rem;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.25;
  letter-spacing:-0.025em;
  color:#fff;
  font-size:11vw;
}
.hl{display:flex;align-items:center;gap:0.6rem;}
.hl-2{color:var(--accent);}
@media (min-width:768px){
  /* the three headline lines never break — they are stacked lines by design */
  .hl,.hl .te,.m-box2 h3 .te{white-space:nowrap;}
}
.mask-r{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0.15), white 85%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0.15), white 85%);
  display:inline-block;
  color:#fff;
  filter:drop-shadow(0 0 18px rgba(177,97,253,0.35));
}
.mask-l{
  -webkit-mask-image:linear-gradient(to right, white 15%, rgba(0,0,0,0.15));
  mask-image:linear-gradient(to right, white 15%, rgba(0,0,0,0.15));
  display:inline-block;
  color:#fff;
  filter:drop-shadow(0 0 18px rgba(177,97,253,0.35));
}
.glow-strong{display:inline-block;color:#fff;filter:drop-shadow(0 0 22px rgba(177,97,253,0.5));}

.hero-right{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:2rem;
  padding-top:3rem;
  padding-bottom:3rem;
  transform:translateY(58px);
}
.hero-meta{display:flex;align-items:center;justify-content:space-between;}
.hero-meta .a-mark{
  font-size:1.875rem;
  font-weight:300;
  color:var(--accent);
  letter-spacing:-0.05em;
  line-height:1.25;
}
.hero-meta .a-mark span{font-family:var(--font-mono);font-weight:700;color:var(--brand-light);}
.hero-meta .idx{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--accent);
}
.hero-copy{
  max-width:21rem;
  font-size:1rem;
  line-height:1.25;
  color:var(--accent);
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.btn-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  background:rgba(10,4,24,0.6);
  -webkit-backdrop-filter:blur(64px);
  backdrop-filter:blur(64px);
  padding:0.85rem 1.5rem;
  font-weight:500;
  letter-spacing:0.025em;
  color:#fff;
  border:1px solid var(--brand-line);
  transition:background .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.btn-frame:hover{
  background:rgba(81,39,182,0.35);
  border-color:rgba(177,97,253,0.55);
  box-shadow:0 0 32px -6px rgba(177,97,253,0.45);
}
.btn-frame .c-tr,.btn-frame .c-bl{
  position:absolute;
  width:1.1rem;height:1.1rem;
  border-color:var(--brand-light);
  transition:transform .3s ease;
}
.btn-frame .c-tr{top:0;right:0;border-top:2px solid var(--brand-light);border-right:2px solid var(--brand-light);border-top-right-radius:var(--r);}
.btn-frame .c-bl{bottom:0;left:0;border-bottom:2px solid var(--brand-light);border-left:2px solid var(--brand-light);border-bottom-left-radius:var(--r);}
.btn-frame:hover .c-tr,.btn-frame:hover .c-bl{transform:scale(1.1);}
.btn-frame span.lbl{position:relative;z-index:10;letter-spacing:0.08em;}
.btn-text{font-size:18px;font-weight:500;color:#fff;transition:color .3s ease;}
.btn-text:hover{color:var(--brand-light);}

@media (min-width:768px){
  .hero{padding:5rem 2.5rem;}
  .hero h1{font-size:8vw;}
  .eyebrow{font-size:11px;}
  .hl-2{gap:2rem;}
  .hero-right{gap:3rem;padding-bottom:5rem;}
  .hero-meta .a-mark{font-size:2.25rem;}
  .hero-meta .idx{font-size:11px;}
  .hero-copy{font-size:1.3rem;}
  .hero-actions{gap:1.5rem;}
  /* ปุ่มคงขนาดตัวอักษรเท่ามือถือ — เดสก์ท็อปได้เพิ่มแค่ระยะขอบใน ไม่ใช่ขนาดตัวหนังสือ */
  .btn-frame{padding:1.05rem 2rem;font-size:1rem;}
  .btn-text{font-size:18px;}
}
@media (min-width:1024px){
  .hero h1{font-size:7vw;}
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem;}
  .hero-left{grid-column:span 8 / span 8;}
  .hero-right{grid-column:span 4 / span 4;}
}

/* ============================= ABOUT ============================= */
.about{
  background:rgba(6,2,16,0.45);
  -webkit-backdrop-filter:blur(64px);
  backdrop-filter:blur(64px);
  border-top:1px solid rgba(177,97,253,0.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5rem 1.5rem;
}
.about-intro{
  margin-bottom:5rem;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}
.about-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--brand-light);
  opacity:0.7;
  text-transform:uppercase;
}
.about h2{
  font-family:var(--font-display);
  margin-bottom:2rem;
  font-size:2rem;              /* now a tagline, not a paragraph — reads as a statement */
  font-weight:500;
  line-height:1.25;
  color:#fff;
  letter-spacing:0;
}
.about-copy{
  max-width:44rem;
  font-size:1.3rem;
  line-height:1.25;
  color:var(--accent);
  opacity:0.6;
  font-weight:300;
}
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:768px){
  .about{padding:6rem 2.5rem;}
  .about h2{font-size:2.9rem;}
  .about-copy{font-size:1.5rem;}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;}
}
@media (min-width:1024px){
  .about-intro{grid-template-columns:repeat(12,minmax(0,1fr));}
  .about-intro > .col-l{grid-column:span 4 / span 4;}
  .about-intro > .col-r{grid-column:span 8 / span 8;}
  .about h2{max-width:52rem;}
}

/* card */
.card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r);
  background:rgba(12,4,28,0.35);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(177,97,253,0.14);
  cursor:none;
  transition:border-color .5s ease, box-shadow .5s ease;
}
.card:hover{border-color:rgba(177,97,253,0.4);box-shadow:0 0 60px -20px rgba(177,97,253,0.5);}
.card .c-tr,.card .c-bl{position:absolute;width:1.35rem;height:1.35rem;z-index:40;pointer-events:none;}
.card .c-tr{top:0.9rem;right:0.9rem;border-top:2px solid var(--brand-light);border-right:2px solid var(--brand-light);border-top-right-radius:12px;opacity:0.55;}
.card .c-bl{bottom:0.9rem;left:0.9rem;border-bottom:2px solid var(--brand-light);border-left:2px solid var(--brand-light);border-bottom-left-radius:12px;opacity:0.55;}
.card .cidx{
  position:absolute;top:1rem;left:1rem;z-index:40;
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
  letter-spacing:0.1em;
  pointer-events:none;
}
.card-img-wrap{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.card-img{
  position:relative;
  height:100%;width:100%;
  border-radius:var(--r);
  overflow:hidden;
  will-change:transform;
  /* the artwork is a cut-out render on transparency — this violet field is the
     opaque backdrop the .tint blend needs, and the plate the object sits on */
  isolation:isolate;
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(177,97,253,0.40), transparent 70%),
    linear-gradient(165deg, #2A1064, #150735 55%, #0B0320);
}
.card-img img{
  height:100%;width:100%;
  object-fit:contain;          /* never crop the object the way a photo could be cropped */
  padding:12% 16% 30%;         /* keeps it clear of the caption gradient below */
  opacity:0.75;
  transition:opacity .7s ease;
}
.card:hover .card-img img{opacity:1;}
/* the parallax spring in main.js normally writes this transform every frame; it
   is skipped without a pointer, so the resting pose has to come from here — and
   an element that no longer animates should not be asking for a GPU layer */
@media (hover:none){
  .card-img{transform:scale(0.65);will-change:auto;}
}
.card-img .tint{
  position:absolute;inset:0;
  background:linear-gradient(155deg, rgba(81,39,182,0.85), rgba(177,97,253,0.45) 55%, rgba(81,39,182,0.9));
  mix-blend-mode:color;
  pointer-events:none;
}
.card-img .sheen{
  position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(177,97,253,0.30), transparent 65%);
  pointer-events:none;
}
/* each card owns its artwork, but the violet grade and light source still vary per
   card so the six read as a set rather than six copies of one treatment */
.cards .card:nth-child(2) .tint{background:linear-gradient(35deg, rgba(81,39,182,0.9), rgba(177,97,253,0.35) 60%, rgba(52,20,132,0.9));}
.cards .card:nth-child(2) .sheen{background:radial-gradient(110% 75% at 15% 10%, rgba(177,97,253,0.34), transparent 62%);}
.cards .card:nth-child(3) .tint{background:linear-gradient(215deg, rgba(52,20,132,0.95), rgba(177,97,253,0.5) 50%, rgba(81,39,182,0.85));}
.cards .card:nth-child(3) .sheen{background:radial-gradient(115% 80% at 85% 5%, rgba(177,97,253,0.30), transparent 60%);}
.cards .card:nth-child(4) .tint{background:linear-gradient(120deg, rgba(177,97,253,0.55), rgba(52,20,132,0.95) 55%, rgba(81,39,182,0.8));}
.cards .card:nth-child(4) .sheen{background:radial-gradient(120% 85% at 50% 100%, rgba(177,97,253,0.28), transparent 58%);}
.cards .card:nth-child(5) .tint{background:linear-gradient(300deg, rgba(81,39,182,0.95), rgba(177,97,253,0.4) 45%, rgba(52,20,132,0.9));}
.cards .card:nth-child(5) .sheen{background:radial-gradient(105% 70% at 20% 90%, rgba(177,97,253,0.32), transparent 60%);}
.cards .card:nth-child(6) .tint{background:linear-gradient(70deg, rgba(52,20,132,0.95), rgba(177,97,253,0.42) 65%, rgba(81,39,182,0.9));}
.cards .card:nth-child(6) .sheen{background:radial-gradient(125% 90% at 80% 95%, rgba(177,97,253,0.26), transparent 62%);}
.card-hit{position:absolute;inset:0;z-index:30;}
.card-caption{
  position:absolute;left:0;right:0;bottom:0;
  height:auto;                 /* grows with the copy instead of clipping it */
  min-height:56%;
  max-height:100%;
  z-index:10;
  background:linear-gradient(to top, rgba(4,1,12,0.96), rgba(4,1,12,0.55) 45%, transparent);
  padding:3rem 1.75rem 1.75rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
}
.card-caption h3{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:500;
  color:#fff;
  letter-spacing:-0.02em;
}
.card-caption p{
  margin-top:0.7rem;
  font-size:1rem;
  line-height:1.25;
  color:var(--accent);
  opacity:0.72;
  font-weight:300;
}
.chip{
  position:absolute;
  top:0;left:0;
  z-index:9999;
  padding:0.4rem 0.8rem;
  border-radius:9999px;
  background:var(--brand-light);
  color:#12042C;
  font-size:15px;
  font-family:var(--font-sans);
  font-weight:500;
  letter-spacing:0.02em;
  box-shadow:0 18px 40px -12px rgba(177,97,253,0.75);
  display:flex;
  align-items:center;
  gap:0.375rem;
  border:1px solid rgba(255,255,255,0.25);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  will-change:transform;
}
.chip svg{width:13px;height:13px;stroke-width:2.5;}
@media (min-width:768px){
  .card-caption{padding:3.5rem 2rem 2rem;}
  .card-caption h3{font-size:1.8rem;}
}
/* three columns get genuinely narrow between 768 and 1023 — step the card copy
   down there so it still fits the frame at the larger body scale */
@media (min-width:768px) and (max-width:1023px){
  .card-caption{padding:2rem 1.25rem 1.25rem;}
  .card-caption h3{font-size:1.3rem;}
  .card-caption p{line-height:1.25;margin-top:0.5rem;}
}

/* ============================= HOW IT WORKS / MISSION ============================= */
.mission{
  position:relative;
  z-index:10;
  border-top:1px solid rgba(177,97,253,0.12);
  background:#000;
  font-family:var(--font-sans);
}
.m-top{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.m-box1{
  min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.m-box1 .brand{width:112px;color:#fff;opacity:0.85;}
.m-box1 .brand .logo{width:100%;height:auto;}
.m-box1 .est{
  font-family:var(--font-mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:#fff;
  opacity:0.4;
}
.m-box2{
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.m-box2 .m-label{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.4em;
  color:var(--brand-light);
  opacity:0.55;
  margin-bottom:1rem;
}
.m-box2 h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:-0.025em;
  color:#fff;
  font-size:12vw;
}
.m-box2 h3 > span.row{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1rem;
}
.m-bottom{display:grid;grid-template-columns:1fr;}
.m-box3{display:none;}
.m-box4{
  display:flex;flex-direction:column;gap:1.5rem;
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.m-dotbox{
  width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);
  border:1px solid rgba(177,97,253,0.28);
  background:rgba(81,39,182,0.18);
}
.m-dot{width:0.3rem;height:0.3rem;border-radius:9999px;background:var(--brand-light);box-shadow:0 0 12px 2px rgba(177,97,253,0.8);animation:softPulse 2s ease-in-out infinite;}
.m-box4 p{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:#fff;
  opacity:0.4;
}
.m-box5{
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem;
}
.m-box5 p{
  max-width:38rem;
  font-size:1.3rem;
  font-weight:300;
  line-height:1.25;
  color:#fff;
  opacity:0.6;
}
.m-cta{
  margin-top:2rem;
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:18px;font-weight:500;
  color:#fff;
  transition:color .3s ease;
}
.m-cta:hover{color:var(--brand-light);}
.m-cta svg{width:12px;height:12px;transition:transform .3s ease;}
.m-cta:hover svg{transform:translate(0.125rem,-0.125rem);}

@media (min-width:768px){
  .m-top{grid-template-columns:repeat(4,minmax(0,1fr));}
  .m-box1{border-bottom:none;}
  .m-box2{grid-column:span 3 / span 3;}
  .m-box2 h3{font-size:8vw;}
  .m-bottom{grid-template-columns:repeat(4,minmax(0,1fr));}
  .m-box3{display:block;}
  .m-box4{border-bottom:none;}
  .m-box5{grid-column:span 2 / span 2;}
  .m-box5 p{font-size:1.5rem;}
}
@media (min-width:1024px){
  .m-box2{padding:3rem;}
  .m-box5{padding:3rem;}
  .m-box2 h3{font-size:7vw;}
}

/* marquee */
.marquee{
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(177,97,253,0.12);
  padding:3rem 0;
}
.marquee-track{
  display:inline-flex;
  white-space:nowrap;
  animation:marquee 40s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  margin:0 2rem;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:rgba(177,97,253,0.28);
  transition:all .3s ease;
  cursor:default;
  display:inline-block;
}
.marquee-item:hover{transform:scale(1.1);color:var(--brand-light);}
@media (min-width:768px){
  .marquee{padding:5rem 0;}
  .marquee-item{margin:0 3.5rem;font-size:42px;}
}

/* ============================= FAQ ============================= */
.faq{
  position:relative;
  z-index:10;
  background:#000;
  border-top:1px solid rgba(177,97,253,0.12);
}
/* หัวข้อประจำ section — สเกลและทรงเดียวกับ .m-box2 h3 ของ how-it-works
   ต่างกันแค่กินเต็มความกว้าง ไม่ได้อยู่ในกริดสี่คอลัมน์แบบ .faq-top */
.faq-title{
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.faq-big{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:-0.025em;
  color:#fff;
  font-size:12vw;
}
.faq-big > span.row{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1rem;
}
.faq-top{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.faq-side{
  min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.faq-side .k{
  font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:0.4em;
  color:var(--brand-light);opacity:0.55;
}
.faq-side .n{
  font-family:var(--font-mono);
  font-size:9px;text-transform:uppercase;letter-spacing:0.3em;
  color:#fff;opacity:0.4;
}
.faq-head{
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.faq-head h2{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:500;line-height:1.25;
  color:#fff;max-width:46rem;
}
.faq-head p{
  margin-top:1.5rem;max-width:36rem;
  font-size:1.3rem;font-weight:300;line-height:1.25;
  color:#fff;opacity:0.5;
}
.faq-item{border-bottom:1px solid rgba(177,97,253,0.12);}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  width:100%;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:1.6rem 2rem;
  transition:background .4s ease;
}
.faq-q:hover{background:rgba(81,39,182,0.12);}
.faq-i{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  color:rgba(177,97,253,0.6);
}
.faq-t{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:500;line-height:1.25;
  color:rgba(255,255,255,0.72);
  transition:color .3s ease;
}
.faq-item.open .faq-t,.faq-q:hover .faq-t{color:#fff;}
.faq-plus{
  position:relative;width:14px;height:14px;flex:none;
  transition:transform .5s var(--ease-expo);
}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:#fff;opacity:0.55;transition:opacity .3s ease, background .3s ease;}
.faq-plus::before{left:0;top:6.5px;width:14px;height:1px;}
.faq-plus::after{top:0;left:6.5px;height:14px;width:1px;}
.faq-item.open .faq-plus{transform:rotate(135deg);}
.faq-item.open .faq-plus::before,.faq-item.open .faq-plus::after{opacity:1;background:var(--brand-light);}
.faq-a{
  height:0;overflow:hidden;opacity:0;
  transition:height .6s var(--ease-expo), opacity .45s ease;
}
.faq-item.open .faq-a{opacity:1;}
.faq-a-inner{padding:0 2rem 2rem;}
.faq-a-inner p{
  max-width:46rem;
  font-size:1rem;font-weight:300;line-height:1.25;
  color:#fff;opacity:0.55;
}
@media (min-width:768px){
  .faq-big{font-size:8vw;}
  .faq-top{grid-template-columns:repeat(4,minmax(0,1fr));}
  .faq-side{border-bottom:none;}
  .faq-head{grid-column:span 3 / span 3;}
  .faq-head h2{font-size:2rem;}
  .faq-q{grid-template-columns:1fr 2fr 1fr;column-gap:2rem;align-items:start;padding:2rem;}
  .faq-i{padding-top:0.45rem;}
  .faq-plus{justify-self:end;margin-top:0.5rem;}
  .faq-t{font-size:1.7rem;}
  .faq-a-inner{display:grid;grid-template-columns:1fr 2fr 1fr;column-gap:2rem;padding:0 2rem 2.5rem;}
  .faq-a-inner p{grid-column:2 / 3;}
}
@media (min-width:1024px){
  .faq-title{padding:3rem;}
  .faq-big{font-size:7vw;}
  .faq-head{padding:3rem;}
  .faq-head h2{font-size:2.35rem;}
}

/* ============================= CONTACT ============================= */
.contact{
  position:relative;
  z-index:10;
  background:rgba(6,2,16,0.55);
  -webkit-backdrop-filter:blur(64px);
  backdrop-filter:blur(64px);
  border-top:1px solid rgba(177,97,253,0.12);
  padding:5rem 1.5rem;
}
.contact-grid{display:grid;grid-template-columns:1fr;gap:3.5rem;}
/* บล็อกนำ — คอลัมน์เดียว ข้อความและปุ่มจัดกึ่งกลางทั้งหมด */
.contact-head{
  display:flex;flex-direction:column;align-items:center;
  max-width:46rem;margin:0 auto;
  text-align:center;
}
.contact-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.7;
  margin-bottom:2rem;
}
.contact h2{
  font-family:var(--font-display);
  font-size:1.75rem;font-weight:500;line-height:1.25;
  color:#fff;
}
.contact-copy{
  margin-top:1.75rem;max-width:34rem;
  font-size:1.3rem;font-weight:300;line-height:1.25;
  color:var(--accent);opacity:0.6;
}
/* รายละเอียดติดต่อ — แยกสองคอลัมน์ [ direct ] / [ bangkok office ]
   ระยะห่างจากบล็อกนำมาจาก gap ของ .contact-grid ไม่ต้องมี margin-top ซ้ำ */
.contact-details{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-top:3rem;
  border-top:1px solid rgba(177,97,253,0.12);
  text-align:center;
}
.detail .dk{
  font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:0.3em;
  color:var(--brand-light);opacity:0.5;margin-bottom:0.7rem;
}
.detail .dv{font-size:1rem;font-weight:300;color:#fff;opacity:0.85;line-height:1.25;display:block;transition:opacity .3s ease,color .3s ease;}
a.dv:hover{opacity:1;color:var(--brand-light);}
.socials{display:flex;gap:1.5rem;flex-wrap:wrap;}
.socials a{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.15em;
  color:var(--muted);display:flex;align-items:center;gap:0.25rem;
  transition:color .3s ease;
}
.socials a:hover{color:var(--brand-light);}
.socials svg{width:11px;height:11px;transition:transform .3s ease;}
.socials a:hover svg{transform:translate(0.125rem,-0.125rem);}

/* หน้าแรกไม่มีฟอร์มแล้ว — ชวนให้ทัก LINE OA แทน ป้าย mono วางเหนือปุ่ม ทั้งคู่จัดกึ่งกลาง
   (.form-row / .field / .err ด้านล่างยังอยู่ เพราะหน้า register ใช้ต่อ) */
.contact-cta{
  margin-top:2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.contact-cta .ck{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.85;
  display:flex;align-items:center;gap:0.75rem;
}

.form-row{display:grid;grid-template-columns:1fr;gap:2.25rem;}
.field{display:flex;flex-direction:column;gap:0.65rem;}
.field label{
  font-family:var(--font-sans);
  font-size:1.17rem;font-weight:400;letter-spacing:0.01em;
  color:#fff;opacity:0.45;
  transition:opacity .3s ease;
}
.field label .ln{font-family:var(--font-mono);font-size:13px;letter-spacing:0.15em;color:var(--brand-light);opacity:0.85;margin-right:0.4rem;}
.field:focus-within label{opacity:0.95;}
.field input,.field textarea{
  width:100%;
  background:transparent;
  border:none;border-bottom:1px solid rgba(177,97,253,0.25);
  padding:0.6rem 0 0.85rem;
  color:#fff;
  font-family:var(--font-sans);font-size:1.42rem;font-weight:300;
  outline:none;resize:none;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.22);}
.field input:focus,.field textarea:focus{border-bottom-color:var(--brand-light);box-shadow:0 8px 22px -18px rgba(177,97,253,0.9);}
.field.invalid input,.field.invalid textarea{border-bottom-color:rgba(255,120,120,0.85);}
.field .err{
  font-family:var(--font-sans);
  font-size:1.08rem;letter-spacing:0.01em;
  color:rgba(255,140,140,0.9);
  height:0;opacity:0;overflow:hidden;
  transition:opacity .3s ease;
}
.field.invalid .err{height:auto;opacity:1;}
.form-sent{
  display:none;flex-direction:column;align-items:flex-start;gap:1.25rem;
  border:1px solid rgba(177,97,253,0.28);
  border-radius:var(--r);
  background:rgba(81,39,182,0.12);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 0 70px -30px rgba(177,97,253,0.8);
  padding:2.5rem;
}
.form-sent.show{display:flex;animation:sentIn .9s var(--ease-expo) both;}
@keyframes sentIn{from{opacity:0;transform:translateY(20px);filter:blur(10px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
.form-sent .sk{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.85;
  display:flex;align-items:center;gap:0.75rem;
}
.form-sent h4{
  font-family:var(--font-display);
  font-size:1.7rem;font-weight:500;line-height:1.25;color:#fff;
}
.form-sent p{
  font-size:1.3rem;font-weight:300;line-height:1.25;
  color:var(--accent);opacity:0.65;max-width:34rem;
}
@media (min-width:768px){
  .contact{padding:6rem 2.5rem 7rem;}
  .contact h2{font-size:2.5rem;}
  .contact-details{grid-template-columns:1fr 1fr;gap:3rem;}
  .form-row{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media (min-width:1024px){
  .contact-grid{gap:4rem;}
  .contact h2{font-size:2.75rem;}
}

/* ============================= FOOTER ============================= */
.footer{
  position:relative;
  z-index:10;
  width:100%;
  padding:4.5rem 1.5rem 11rem;
  /* black horizon fading up into the brand violets at the very bottom of the page.
     the top starts transparent so the contact section blends in instead of showing a seam */
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.9) 14%,
    #000 30%,
    #000 48%,
    #240F5E 64%,
    #5127B6 79%,
    #B161FD 91%,
    #C6BDF6 100%);
}
.progressive-blur{
  position:absolute;
  left:0;right:0;top:0;
  height:10rem;
  z-index:-10;
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.footer-logo{width:118px;color:#fff;opacity:0.7;}
.footer-logo .logo{width:100%;height:auto;}
.footer-note{
  font-family:var(--font-mono);
  font-size:9px;text-transform:uppercase;letter-spacing:0.25em;
  color:#fff;opacity:0.3;line-height:1.9;
  text-align:right;
}
.footer-note a{
  font-family:var(--font-sans);
  font-size:11px;letter-spacing:0.06em;text-transform:none;
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding-bottom:1px;
  transition:color .3s ease, border-color .3s ease;
}
.footer-note a:hover{color:var(--brand-light);border-bottom-color:var(--brand-light);}
@media (min-width:768px){
  .footer{padding:6rem 2.5rem 13rem;}
}

/* ============================= GLOBAL CURSOR ============================= */
#cursor-layer{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:300;
}
#cursor-dot{
  position:absolute;
  top:0;left:0;
  width:10px;height:10px;
  border-radius:9999px;
  background:#fff;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  will-change:transform;
}
#cursor-ring{
  position:absolute;
  top:0;left:0;
  width:40px;height:40px;
  border-radius:9999px;
  border:1px solid rgba(177,97,253,0.45);
  transform:translate(-50%,-50%);
  transition:width .3s ease, height .3s ease, border-color .3s ease;
  will-change:transform;
}
#cursor-ring.hovering{width:80px;height:80px;border-color:rgba(177,97,253,0.8);}
@media (hover:none){#cursor-layer{display:none;}}

/* ============================= PRELOADER ============================= */
#preloader{
  position:fixed;
  inset:0;
  z-index:200;
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:2.5rem;
  cursor:none;
  opacity:1;
  transform:scale(1);
  filter:blur(0px);
}
#preloader.exit{
  opacity:0;
  transform:scale(1.05);
  filter:blur(40px);
  transition:opacity .6s var(--ease-power), transform .6s var(--ease-power), filter .6s var(--ease-power);
}
.pre-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.4em;
  color:rgba(255,255,255,0.4);
  opacity:0;
  transform:translateY(-20px);
  transition:opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
}
.pre-top.in{opacity:1;transform:translateY(0);}
.pre-top .pct{color:var(--brand-light);}
.pre-center{
  position:relative;
  flex:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#pre-canvas{width:100%;height:100%;display:block;}
.pre-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
#pre-tag{
  font-family:var(--font-mono);
  font-size:0.875rem;
  letter-spacing:0.5em;
  color:#fff;
  text-align:center;
}
#pre-tag.tag-out{animation:tagOut .15s ease both;}
#pre-tag.tag-in{animation:tagIn .25s var(--ease-expo) both;}
@keyframes tagIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes tagOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-10px);}}
.pre-note{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:rgba(255,255,255,0.2);
  text-align:center;
}