@font-face{font-family:'IBM Plex Sans Thai';src:url('../fonts/IBMPlexSansThai-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
  @font-face{font-family:'IBM Plex Sans Thai';src:url('../fonts/IBMPlexSansThai-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
  @font-face{font-family:'IBM Plex Sans Thai';src:url('../fonts/IBMPlexSansThai-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
  @font-face{font-family:'IBM Plex Sans Thai';src:url('../fonts/IBMPlexSansThai-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
  :root{
    --space:#140d28; --space2:#1f1340; --card:#272050; --card2:#322763; --line:#4a3a84;
    --alien:#8ed64a; --uv1:#b07fe0; --uv2:#7c40a5; --pink:#d29bff;
    --text:#ffffff; --muted:#cfc7ea; --good:#8ed64a; --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"IBM Plex Sans Thai","IBM Plex Sans Thai",system-ui,sans-serif;color:var(--text);line-height:1.45;
    background:
      radial-gradient(1000px 600px at 85% -5%, #2a1560 0, transparent 55%),
      radial-gradient(800px 500px at 5% 12%, #14323a 0, transparent 50%),
      var(--space);
    background-attachment:fixed;overflow-x:hidden;
  }
  .display{font-family:"IBM Plex Sans Thai",sans-serif}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
  a{color:inherit;text-decoration:none}
  nav,header,section,footer,.fab{position:relative;z-index:2}
  section{padding:42px 0}
  .label{font-family:"IBM Plex Sans Thai";font-size:12px;letter-spacing:3px;color:var(--alien);text-transform:uppercase;
    margin-bottom:16px;display:flex;align-items:center;gap:10px;justify-content:center}
  .label::before,.label::after{content:"";width:30px;height:2px;background:var(--alien);box-shadow:0 0 10px var(--alien)}
  .sec-title{font-family:"IBM Plex Sans Thai";font-weight:900;font-size:clamp(24px,4vw,38px);text-align:center;margin-bottom:10px}
  .sec-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 22px}
  .holo-text{background:linear-gradient(90deg,var(--alien),var(--uv2),var(--uv1),var(--pink),var(--alien));
    background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shift 6s linear infinite}
  @keyframes shift{to{background-position:300% 0}}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:99px;font-weight:700;
    font-family:"IBM Plex Sans Thai";cursor:pointer;border:none;font-size:15px;transition:.18s;text-align:center}
  .btn-primary{background:var(--alien);color:#0a0614;box-shadow:0 8px 30px rgba(93,255,143,.55)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(93,255,143,.55)}
  .btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--alien);color:var(--alien)}

  /* ===== animated background: UFO + falling stickers ===== */
  .bg-scene{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.13;
    filter:saturate(1.15) contrast(1.05);pointer-events:none}
  #bg{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
  .falling{position:absolute;top:-50px;will-change:transform;animation:fall linear forwards;
    filter:drop-shadow(0 0 6px rgba(93,255,143,.45))}
  @keyframes fall{to{transform:translateY(112vh) rotate(380deg)}}
  .ufo-roam{position:fixed;top:6%;left:0;z-index:1;pointer-events:none;animation:roam 26s linear infinite}
  .ufo-roam .ship{width:130px;display:block;filter:drop-shadow(0 0 22px rgba(142,214,74,.55));animation:bob 3s ease-in-out infinite}
  @keyframes roam{0%{transform:translate(-160px,0)}100%{transform:translate(calc(100vw + 160px),50px)}}
  @keyframes bob{50%{transform:translateY(-12px)}}

  /* NAV */
  nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(10,6,20,.72);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Sans Thai";font-weight:900;font-size:20px;letter-spacing:1px}
  .logo .badge{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--alien),var(--uv1));
    display:grid;place-items:center;font-size:18px;box-shadow:0 0 18px rgba(93,255,143,.4)}
  .nav-links{display:flex;gap:24px;font-size:14px;font-family:"IBM Plex Sans Thai"}
  .nav-links a{color:var(--muted);transition:.15s}
  .nav-links a:hover{color:var(--alien)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .lang-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-radius:99px;
    padding:7px 14px;font-family:"IBM Plex Sans Thai";font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
  .lang-btn:hover{border-color:var(--alien);color:var(--alien)}
  @media(max-width:860px){.nav-links{display:none}}

  /* HERO */
  .hero{text-align:center;padding:74px 0 50px}
  .ufo{font-size:84px;filter:drop-shadow(0 0 30px var(--alien));animation:bob 3.5s ease-in-out infinite;display:inline-block}
  .ufo-hero{width:min(440px,88%);filter:drop-shadow(0 8px 30px rgba(142,214,74,.45));animation:bob 4s ease-in-out infinite;margin-bottom:4px}
  .hero h1{font-family:"IBM Plex Sans Thai";font-weight:900;font-size:clamp(38px,8vw,82px);letter-spacing:3px;margin:14px 0 6px}
  .hero .tagline{font-size:clamp(16px,2.4vw,22px);font-weight:600}
  .hero .tagline-th{color:var(--alien);font-size:clamp(15px,2.2vw,19px);margin-top:8px;font-weight:700}
  .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

  .usp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
  @media(max-width:780px){.usp{grid-template-columns:1fr 1fr}}
  .usp .item{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
  .usp .item .ic{font-size:30px;margin-bottom:8px}
  .usp .item b{display:block;font-family:"IBM Plex Sans Thai";font-size:15px;margin-bottom:4px}
  .usp .item small{color:var(--muted);font-size:12.5px}

  .grid{display:grid;gap:16px}
  .g2{grid-template-columns:1.25fr .9fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:880px){.g2,.g3,.g4{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
  .glass{background:rgba(255,255,255,.05);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius);padding:22px}

  /* CALCULATOR */
  .calc-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:14px;align-items:start}
  @media(max-width:880px){.calc-grid{grid-template-columns:1fr}}
  .card h3.lbl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:14px;font-family:"IBM Plex Sans Thai";display:flex;align-items:center;gap:8px}
  .step{width:22px;height:22px;border-radius:50%;background:var(--uv1);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
  @media(max-width:520px){.row{grid-template-columns:1fr}}
  label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
  input,select{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--text);
    padding:11px 12px;border-radius:10px;font-size:15px;outline:none;transition:.15s;font-family:inherit}
  input:focus,select:focus{border-color:var(--alien);box-shadow:0 0 0 3px rgba(93,255,143,.13)}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{flex:1 1 calc(50% - 9px);min-width:130px;border:1px solid var(--line);background:var(--card2);
    border-radius:12px;padding:9px 11px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:9px}
  .chip .sw2{width:26px;height:26px;border-radius:7px;flex:none;border:1px solid rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .chip .ct{min-width:0}
  .chip:hover{border-color:var(--alien)}
  .chip.active{border-color:var(--alien);background:rgba(93,255,143,.1);box-shadow:0 0 0 1px var(--alien) inset}
  .chip .t{font-size:14px;font-weight:700}
  .chip .p{font-size:12px;color:var(--muted);margin-top:3px}
  .variants{display:flex;flex-wrap:wrap;gap:8px}
  .vlabel{font-size:12px;color:var(--muted);font-weight:700;font-family:"IBM Plex Sans Thai";margin:12px 0 8px}
  .vbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card2);border-radius:99px;
    padding:7px 13px;cursor:pointer;font-size:13px;font-family:"IBM Plex Sans Thai";transition:.15s}
  .vbtn:hover{border-color:var(--alien)}
  .vbtn.active{border-color:var(--alien);background:rgba(142,214,74,.13);color:var(--alien)}
  .vbtn .vd{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.45);flex:none}
  .toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .toggle .t{font-size:14px;font-weight:700}
  .toggle .d{font-size:12px;color:var(--muted)}
  .sw{position:relative;width:46px;height:26px;flex:none}
  .sw input{display:none}
  .sw span{position:absolute;inset:0;background:var(--card2);border:1px solid var(--line);border-radius:30px;transition:.2s;cursor:pointer}
  .sw span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.2s}
  .sw input:checked+span{background:var(--alien);border-color:transparent}
  .sw input:checked+span::before{transform:translateX(20px);background:#fff}
  .why{font-size:12px;color:var(--alien);background:rgba(93,255,143,.08);border:1px solid rgba(93,255,143,.25);
    border-radius:10px;padding:9px 11px;margin-top:10px;line-height:1.5}
  .result{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px}
  .total{font-family:"IBM Plex Sans Thai";font-size:38px;font-weight:900;letter-spacing:-1px;margin:4px 0 2px}
  .perunit{color:var(--good);font-size:14px}
  #perPiece{color:var(--uv1);font-weight:700;margin-bottom:14px}
  .breakdown{font-size:13.5px}
  .breakdown .line{display:flex;justify-content:space-between;gap:10px;padding:5.5px 0;border-bottom:1px dashed var(--line)}
  .breakdown .line.tot{border-bottom:none;border-top:2px solid var(--line);margin-top:6px;padding-top:13px;font-size:16px;font-weight:700}
  .breakdown .k{color:var(--muted)}
  .badge2{display:inline-block;background:rgba(93,255,143,.15);color:var(--good);padding:2px 9px;border-radius:20px;font-size:12px}
  .hint{font-size:12px;color:var(--muted);margin-top:8px}
  @media(max-width:560px){
    .wrap{padding:0 12px}
    .breakdown{font-size:12px}
    .breakdown .line{gap:6px}
    .breakdown .line span:last-child{white-space:normal;text-align:right;word-break:break-word}
    .total{font-size:32px}
    #orderCanvas{max-width:100%}
  }

  /* 3D LAYER STACK */
  .stack-card{text-align:center}
  .stack3d{perspective:1000px;height:400px;display:grid;place-items:center;margin:6px 0 4px}
  .stack-row{display:flex;gap:8px;align-items:center}
  .stack-row .legend{flex:0 0 44%}
  .stack-row .stack3d{flex:1;height:360px;margin:0}
  @media(max-width:560px){.stack-row{flex-direction:column}.stack-row .legend{width:100%;flex:auto}}
  .stack{position:relative;width:150px;height:150px;transform-style:preserve-3d;
    transform:rotateX(45deg) rotateZ(45deg);animation:spin3d 18s linear infinite}
  @keyframes spin3d{from{transform:rotateX(45deg) rotateZ(0)}to{transform:rotateX(45deg) rotateZ(360deg)}}
  .layer{position:absolute;inset:0;border-radius:20px;border:2px solid rgba(255,255,255,.55);opacity:0;
    transition:.45s;box-shadow:0 4px 12px rgba(0,0,0,.28);display:grid;place-items:center}
  .lz{font-family:"IBM Plex Sans Thai";font-weight:900;font-size:38px;color:#241a40;opacity:.9;text-shadow:0 1px 2px rgba(255,255,255,.55)}
  .layer.on{opacity:1}
  .l-material{transform:translateZ(0px);background:linear-gradient(135deg,#cfd2e6,#9aa0c7)}
  .l-white{transform:translateZ(16px)}
  .l-cmyk{transform:translateZ(32px);background:
    radial-gradient(circle at 32% 32%, #00AEEF 0 16%, transparent 17%),
    radial-gradient(circle at 68% 32%, #EC008C 0 16%, transparent 17%),
    radial-gradient(circle at 32% 68%, #FFF200 0 16%, transparent 17%),
    radial-gradient(circle at 68% 68%, #231F20 0 16%, transparent 17%),
    transparent}
  .l-vanish{transform:translateZ(48px);background:transparent}
  .slab.w{background:#ffffff}
  .slab.matt{background:rgba(255,255,255,.16)}
  .slab.glossy{background:linear-gradient(115deg,transparent 41%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.98) 50%,rgba(255,255,255,.5) 52%,transparent 59%);
    background-size:300% 100%;animation:shimmer 2.2s linear infinite}
  @keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}}
  .l-diecut{transform:translateZ(64px);background:transparent;border:2px dashed var(--alien)}
  .l-material.holo{background:linear-gradient(135deg,#5dff8f,#8a5bff,#ff86d8,#28d8e8)}
  .l-material.gold{background:linear-gradient(135deg,#ffe79a,#c79a3a)}
  .l-material.clear{background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.06));border-style:dashed}
  .legend{text-align:left;font-size:13px}
  .legend .li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;opacity:.4;transition:.3s}
  .legend .li.on{opacity:1}
  .legend .dot{width:14px;height:14px;border-radius:4px;flex:none;margin-top:3px;border:1px solid rgba(255,255,255,.3)}
  .legend .nm{font-weight:700;font-family:"IBM Plex Sans Thai";font-size:13px}
  .legend .ds{color:var(--muted);font-size:11.5px}

  /* SERVICES / TERMS */
  .breakdown .line span:last-child{white-space:nowrap}

  /* LIVE PREVIEW */
  .drop{border:2px dashed var(--line);border-radius:12px;padding:12px 14px;text-align:center;cursor:pointer;transition:.18s;background:var(--card2)}
  .drop:hover,.drop.over{border-color:var(--alien);background:rgba(93,255,143,.06)}
  .drop .ic{font-size:24px}
  .drop p{font-size:13px;margin-top:4px!important}
  .drop .hint{font-size:11px}
  .preview-stage{display:grid;place-items:center;min-height:320px;border-radius:var(--radius);position:relative;
    background:radial-gradient(circle at 50% 40%, #241646 0, var(--space2) 70%);border:1px solid var(--line);overflow:hidden}
  .sticker{max-width:74%;max-height:280px;border-radius:8px;transition:.2s;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
  .sticker.diecut{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 14px 26px rgba(0,0,0,.55))}
  .holo-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:.3s;mix-blend-mode:color-dodge;
    background:linear-gradient(115deg,transparent 30%,rgba(93,255,143,.5),rgba(138,91,255,.5),rgba(255,134,216,.5),transparent 70%);
    background-size:300% 100%;animation:shift 4s linear infinite}
  .preview-stage.holo .holo-overlay{opacity:.7}
  .pv-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
  .seg{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
  .seg button{background:transparent;color:var(--muted);border:none;padding:8px 16px;cursor:pointer;font-size:13px;font-family:"IBM Plex Sans Thai"}
  .vseg{width:100%}.vseg button{flex:1;text-align:center;font-weight:700}
  .seg button.on{background:rgba(93,255,143,.15);color:var(--alien)}

  /* 3D STICKER PREVIEW (upload) */
  .stage3d{perspective:1000px}
  .art3d{transform-style:preserve-3d;animation:artspin 9s ease-in-out infinite;display:grid;place-items:center;width:100%;height:100%}
  @keyframes artspin{0%,100%{transform:rotateY(-20deg) rotateX(9deg)}50%{transform:rotateY(20deg) rotateX(5deg)}}
  .art3d img{max-width:78%;max-height:290px;border-radius:6px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
  .art3d img.diecut{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 16px 28px rgba(0,0,0,.6))}
  .l-art{transform:translateZ(80px);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.55)}
  .l-white,.l-vanish{transform-style:preserve-3d;border:none;box-shadow:none}
  .slab{position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.45);box-shadow:0 3px 9px rgba(0,0,0,.2)}

  /* TECH */
  .tech-ic{font-size:32px;margin-bottom:10px}

  /* GALLERY */
  .cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
  .cat{padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:var(--card2);color:var(--muted);
    font-family:"IBM Plex Sans Thai";font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s}
  .cat:hover{border-color:var(--alien);color:var(--text)}
  .cat.active{background:var(--alien);color:#0a0614;border-color:var(--alien)}
  .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .gal .tile.hide{display:none}
  @media(max-width:880px){.gal{grid-template-columns:1fr 1fr}}
  .gal .tile{position:relative;aspect-ratio:1;border-radius:16px;border:1px solid var(--line);overflow:hidden;display:block}
  .gal .tile img{width:100%;height:100%;object-fit:cover;transition:.45s;display:block}
  .gal .tile:hover img{transform:scale(1.07)}
  .gal .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 11px;font-family:"IBM Plex Sans Thai";
    font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(10,6,20,.92));text-align:left}
  .gal .tile .cap span{display:block;color:var(--alien);font-size:11px;font-weight:500;margin-top:2px}

  /* CONTACT */
  .chan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
  @media(max-width:780px){.chan{grid-template-columns:1fr 1fr}}
  .chan a{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 12px;text-align:center;transition:.18s}
  .chan a:hover{border-color:var(--alien);transform:translateY(-3px)}
  .chan a .em{font-size:30px;display:block;margin-bottom:8px}
  .chan a svg.em{width:34px;height:34px;display:block;margin:0 auto 8px}
  .chan a b{font-family:"IBM Plex Sans Thai";font-size:14px;display:block}
  .chan a small{color:var(--muted);font-size:12px}

  .fab{position:fixed;right:18px;bottom:18px;z-index:50}
  .fab .main{background:var(--alien);color:#0a0614;font-weight:800;
    padding:14px 22px;border-radius:99px;box-shadow:0 10px 30px rgba(93,255,143,.4);font-family:"IBM Plex Sans Thai";font-size:15px;display:inline-block}

  footer{text-align:center;color:var(--muted);font-size:13px;padding:40px 20px;border-top:1px solid var(--line);margin-top:30px}