*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0c0c0c;--bg-card:#111;--white:#d7e2ea;--white-full:#fff;--accent-1:#18011f;--accent-2:#b600a8;--accent-3:#7621b0;--accent-4:#be4c00;--border:#d7e2ea1f;--radius-xl:40px;--radius-lg:24px;--radius-md:16px}html{scroll-behavior:smooth}html,body,#root{background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Kanit,sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none;transition:opacity .2s}a:hover{opacity:.7}ul{list-style:none}img{max-width:100%;display:block}.hero-heading{background:linear-gradient(#646973 0%,#bbccd7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.btn-contact{outline-offset:-3px;color:#fff;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;background:linear-gradient(123deg,#18011f 7%,#b600a8 37%,#7621b0 72%,#be4c00 100%);border:none;border-radius:100px;outline:2px solid #fff;justify-content:center;align-items:center;padding:12px 32px;font-size:.75rem;font-weight:500;transition:transform .25s,box-shadow .25s;display:inline-flex;box-shadow:0 4px 4px #b501a740,inset 4px 4px 12px #7721b1}.btn-contact:hover{opacity:1;transform:scale(1.04);box-shadow:0 6px 10px #b501a766,inset 4px 4px 18px #7721b1}.btn-ghost{border:2px solid var(--white);color:var(--white);text-transform:uppercase;letter-spacing:.15em;cursor:pointer;background:0 0;border-radius:100px;justify-content:center;align-items:center;padding:12px 32px;font-size:.875rem;font-weight:500;transition:background .3s,transform .25s;display:inline-flex}.btn-ghost:hover{opacity:1;background:#d7e2ea1a;transform:scale(1.04)}.section-white{background:var(--white-full);color:#0c0c0c;border-radius:60px 60px 0 0}.section-dark-overlay{background:var(--bg);z-index:10;border-radius:60px 60px 0 0;margin-top:-14px;position:relative}.marquee-track{will-change:transform;gap:12px;display:flex}.service-item{border-bottom:1px solid #0c0c0c26;align-items:flex-start;gap:2rem;padding:2.5rem 0;display:flex}.service-item:first-child{border-top:1px solid #0c0c0c26}.service-number{color:#0c0c0c;flex-shrink:0;min-width:100px;font-size:clamp(3rem,10vw,140px);font-weight:900;line-height:1}.service-name{text-transform:uppercase;margin-bottom:.5rem;font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500}.service-desc{opacity:.6;max-width:42rem;font-size:clamp(.85rem,1.6vw,1.25rem);font-weight:300;line-height:1.6}.project-card{border-radius:var(--radius-xl);border:2px solid var(--white);background:var(--bg);transform-origin:top;flex-direction:column;gap:1.5rem;padding:2rem;display:flex;position:sticky;top:6rem}.project-card-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.project-number{font-size:clamp(2.5rem,8vw,100px);font-weight:900;line-height:1}.project-meta{flex-direction:column;flex:1;gap:.25rem;min-width:200px;display:flex}.project-category{text-transform:uppercase;letter-spacing:.1em;opacity:.5;font-size:.85rem}.project-name{font-size:clamp(1.4rem,3vw,2.5rem);font-weight:700}.project-achievements{flex-wrap:wrap;gap:.6rem;margin-top:.5rem;display:flex}.project-tag{letter-spacing:.05em;background:#d7e2ea14;border:1px solid #d7e2ea26;border-radius:100px;padding:.4rem 1rem;font-size:.8rem;font-weight:400}.project-tech-row{flex-wrap:wrap;gap:.5rem;display:flex}.project-tech{letter-spacing:.05em;background:linear-gradient(135deg,#7621b033,#b600a826);border:1px solid #7621b04d;border-radius:8px;padding:.35rem .85rem;font-size:.75rem;font-weight:500}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;display:grid}.skill-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:#ffffff08;padding:2rem;transition:transform .35s,border-color .35s}.skill-card:hover{border-color:#7621b066;transform:translateY(-4px)}.skill-card h3{background:linear-gradient(135deg,#b600a8,#7621b0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.2rem;font-size:1.3rem;font-weight:700}.skill-tags{flex-wrap:wrap;gap:.5rem;display:flex}.skill-tag{background:#d7e2ea0f;border:1px solid #d7e2ea1a;border-radius:8px;padding:.4rem .9rem;font-size:.85rem;font-weight:400;transition:background .3s,border-color .3s}.skill-tag:hover{background:#7621b026;border-color:#7621b066}.achievements-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;max-width:900px;margin:0 auto;display:grid}.achievement-item{border-radius:var(--radius-md);border:1px solid var(--border);background:#ffffff05;align-items:center;gap:1rem;padding:1.2rem 1.5rem;transition:transform .3s,border-color .3s;display:flex}.achievement-item:hover{border-color:#b600a866;transform:translate(6px)}.achievement-dot{background:linear-gradient(135deg,#b600a8,#7621b0);border-radius:50%;flex-shrink:0;width:10px;height:10px}.highlights-row{flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem;display:flex}.highlight-pill{background:#d7e2ea0f;border:1px solid #d7e2ea1f;border-radius:100px;padding:.6rem 1.4rem;font-size:.85rem;font-weight:400;transition:all .3s}.highlight-pill:hover{background:#7621b026;border-color:#7621b066;transform:translateY(-2px)}.contact-links{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin:3rem 0;display:flex}.contact-link{border-radius:var(--radius-md);border:1px solid var(--border);background:#ffffff05;align-items:center;gap:.75rem;padding:1rem 1.5rem;transition:all .3s;display:flex}.contact-link:hover{opacity:1;background:#7621b014;border-color:#b600a866;transform:translateY(-3px)}.hero-canvas{z-index:0;pointer-events:none;position:absolute;inset:0}@media (width>=640px){.btn-contact{padding:14px 40px;font-size:.8rem}.btn-ghost{padding:14px 40px}.service-number{min-width:140px}.project-card{padding:2.5rem}}@media (width>=768px){.btn-contact{padding:16px 48px;font-size:.875rem}.service-number{min-width:180px}.project-card{top:8rem}}@media (width<=640px){.service-item{flex-direction:column;gap:.5rem}.service-number{min-width:auto;font-size:2.5rem}.project-card-header{flex-direction:column}.section-white,.section-dark-overlay{border-radius:40px 40px 0 0}}