* { -webkit-font-smoothing: antialiased; }
  html { scroll-behavior: smooth; background: #F5F2EC; }
  body { font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; color: #0A0A0A; background: #F5F2EC; }
  .serif { font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; font-style: normal; }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .container-x { max-width: 1360px; margin-inline: auto; padding-inline: 32px; }
  @media (max-width: 768px) { .container-x { padding-inline: 20px; } }
  .label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
  .arrow-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 22px; border-radius: 999px; font-weight: 500; font-size: 14px; transition: all .25s ease; }
  .arrow-btn .dot { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: transform .25s ease; }
  .arrow-btn:hover .dot { transform: rotate(45deg); }
  .ua { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s ease; }
  .ua:hover { background-size: 100% 1px; }
  .grain { position: relative; }
  .grain::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 3px 3px; pointer-events: none; }
  .pulse { width: 8px; height: 8px; border-radius: 999px; background: #FF3D00; box-shadow: 0 0 0 0 rgba(255,61,0,0.6); animation: pulse 2s infinite; display: inline-block; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,61,0,0.6); } 70% { box-shadow: 0 0 0 10px rgba(255,61,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,61,0,0); } }
  .num { font-variant-numeric: tabular-nums; }
  .blueprint { background-image: linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px); background-size: 32px 32px; }
  .nav-link { font-size: 14px; color: #0A0A0A; transition: color .2s; }
  .nav-link:hover { color: #FF3D00; }
  details.mobile-menu summary::-webkit-details-marker { display: none; }
  details.mobile-menu[open] summary svg { transform: rotate(90deg); }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 16px; top: 16px; background: #0A0A0A; color: #F5F2EC; padding: 12px 16px; z-index: 100; border-radius: 8px; }
  .lift { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .lift:hover { transform: translateY(-3px); }
  .codewin { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.7; }
  .codewin .k { color: #FF8A65; }
  .codewin .s { color: #80CBC4; }
  .codewin .c { color: #757575; }
  .codewin .v { color: #B39DDB; }
  .node-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .88;
    pointer-events: none;
  }
  .web-card-video,
  .hero-idea-art {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .hero-idea-art {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(10,10,10,.10);
    box-shadow:
      0 2px 4px rgba(10,10,10,.04),
      0 18px 40px rgba(10,10,10,.16),
      0 40px 80px rgba(255,61,0,.10);
    transform: rotate(-1.4deg) translateZ(0);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .hero-idea-art:hover { transform: rotate(0deg) translateY(-4px) translateZ(0); }
  .hero-idea-art img { display: block; }
  .hero-idea-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: rgba(10,10,10,.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    white-space: nowrap;
  }
  .hero-idea-glow {
    background:
      radial-gradient(circle at 60% 50%, rgba(255,61,0,.22), transparent 42%),
      radial-gradient(circle at 40% 66%, rgba(0,217,192,.12), transparent 40%);
    filter: blur(40px);
    opacity: .7;
  }
  .hero-copy { overflow-wrap: anywhere; word-break: break-word; }
  @media (max-width: 640px) { .hero-copy { word-break: break-all; } }
  .bar-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
  .bar-fill { height: 100%; background: linear-gradient(90deg, #FF3D00, #00D9C0); }
  .tech-rail-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .tech-rail-track { width: max-content; animation: tech-rail 34s linear infinite; }
  .tech-rail-track.reverse { animation-direction: reverse; animation-duration: 42s; }
  .tech-rail-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(10,10,10,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    color: #404040;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  .tech-rail-item img { width: 20px; height: 20px; object-fit: contain; opacity: .82; }
  .tech-rail-mask:hover .tech-rail-track { animation-play-state: paused; }
  @keyframes tech-rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .stack-card { --stack-rgb: 255,61,0; transition: background-color .25s ease; }
  .stack-card .mono.bg-paperD {
    background: rgba(var(--stack-rgb), .08);
    border: 1px solid rgba(var(--stack-rgb), .14);
    color: rgba(10,10,10,.62);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .stack-card:hover .mono.bg-paperD {
    background: rgba(var(--stack-rgb), .18);
    border-color: rgba(var(--stack-rgb), .34);
    color: #0A0A0A;
    transform: translateY(-1px);
  }
  .stack-red { --stack-rgb: 255,61,0; }
  .stack-blue { --stack-rgb: 34,112,255; }
  .stack-green { --stack-rgb: 42,155,101; }
  .stack-cyan { --stack-rgb: 0,153,184; }
  .stack-violet { --stack-rgb: 126,87,194; }
  .stack-gold { --stack-rgb: 217,136,38; }
  .web-card-motion {
    background:
      radial-gradient(circle at 18% 24%, rgba(255,61,0,0.34), transparent 24%),
      radial-gradient(circle at 78% 18%, rgba(0,217,192,0.24), transparent 26%),
      radial-gradient(circle at 52% 78%, rgba(255,255,255,0.14), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,0.08), transparent 38%, rgba(255,61,0,0.18));
    filter: blur(2px);
    opacity: .72;
    transform: scale(1.08);
    animation: web-card-drift 16s ease-in-out infinite alternate;
  }
  .web-card-lines {
    background-image:
      linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.18) 42% 43%, transparent 43% 100%),
      linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 220px 220px, 42px 42px, 42px 42px;
    opacity: .35;
    animation: web-card-pan 22s linear infinite;
  }
  .web-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
    filter: saturate(.85) contrast(1.08);
    transform: translateZ(0) scaleX(-1) scale(1.03) !important;
  }
  @keyframes web-card-drift {
    from { transform: scale(1.08) translate3d(-3%, -2%, 0) rotate(0deg); }
    to { transform: scale(1.16) translate3d(4%, 3%, 0) rotate(8deg); }
  }
  @keyframes web-card-pan {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 260px 180px, 84px 42px, 42px 84px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pulse,
    .web-card-motion,
    .web-card-lines,
    .tech-rail-track { animation: none; }
    .lift,
    .arrow-btn,
    .arrow-btn .dot,
    .ua,
    .stack-card .mono.bg-paperD { transition: none; }
  }
  @supports (content-visibility: auto) {
    section:not(#hero),
    footer {
      content-visibility: auto;
      contain-intrinsic-size: 1px 900px;
    }
  }