:root{--navy:#002d69;--blue:#006fca;--sky:#35bdf3;--ink:#082747;--muted:#5d7489}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f8fcff;font-family:Arial,"Noto Sans Thai",sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}img{display:block;max-width:100%}.nav-wrap{height:84px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:38px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}.brand span{display:grid;line-height:1}.brand strong{font-size:25px;letter-spacing:.08em;color:var(--navy)}.brand small{font-size:9px;letter-spacing:.18em;color:var(--blue);margin-top:5px}.nav-wrap nav{display:flex;gap:32px;font-weight:700;font-size:14px}.nav-wrap nav a{padding:12px 0;border-bottom:2px solid transparent}.nav-wrap nav a:hover{border-color:var(--sky)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800}.nav-cta{background:var(--navy);color:white;padding:13px 21px;font-size:14px}.hero{min-height:680px;max-width:1440px;margin:auto;display:grid;grid-template-columns:44% 56%;align-items:center;overflow:hidden;background:radial-gradient(circle at 76% 40%,#fff 0 10%,#d5f4ff 35%,transparent 58%),linear-gradient(120deg,#f8fdff 0 50%,#c9f0ff 100%);border-radius:0 0 56px 56px}.hero-copy{padding:72px 6vw 90px 8vw;position:relative;z-index:2}.kicker{margin:0 0 13px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:var(--blue)}.hero h1{font-size:clamp(52px,7vw,94px);line-height:.94;letter-spacing:-.06em;margin:0;color:var(--navy)}.hero h1 em{font-style:normal;color:var(--blue)}.hero-text{font-size:18px;line-height:1.8;color:var(--muted);max-width:570px;margin:28px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{padding:16px 24px}.button.primary{background:linear-gradient(135deg,var(--blue),#00a7ef);color:white;box-shadow:0 10px 28px #0079c94a}.button.secondary{border:1px solid #9fc8e0;background:#ffffffb8;color:var(--navy)}.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:13px;font-weight:700;color:#37657d}.hero-art{height:100%;min-height:620px;position:relative;display:flex;align-items:center;justify-content:center;padding:40px}.hero-art>img{width:min(610px,92%);max-height:585px;object-fit:contain;border-radius:28px;box-shadow:0 35px 80px #004b8054;transform:rotate(1.5deg);position:relative;z-index:2}.water-ring{position:absolute;width:540px;height:540px;border-radius:50%;border:35px solid #ffffff80;box-shadow:0 0 0 1px #22aee04d,0 0 80px #22aee055}.float-note{position:absolute;right:7%;bottom:12%;z-index:3;background:white;border-radius:18px;padding:14px 18px;box-shadow:0 15px 35px #003c6c29;display:grid;color:var(--navy)}.float-note b{font-size:24px}.float-note small{font-weight:700;color:var(--blue)}.section{max-width:1240px;margin:auto;padding:112px 28px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}.section-heading h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;margin:0;color:var(--navy)}.section-heading>p{max-width:430px;color:var(--muted);line-height:1.7;margin:0}.slider{background:white;border-radius:34px;display:grid;grid-template-columns:56% 44%;min-height:580px;overflow:hidden;position:relative;box-shadow:0 20px 70px #06355c15;border:1px solid #caeafa;outline:none}.slide-media{background:linear-gradient(145deg,#e4f8ff,#aee9ff);display:flex;align-items:center;justify-content:center;padding:34px}.slide-media img{width:100%;height:510px;object-fit:contain;border-radius:20px;animation:fade .45s ease}.slide-copy{padding:70px 58px;display:flex;flex-direction:column;justify-content:center}.slide-copy>span{font-size:13px;letter-spacing:.14em;color:#85a5b6;margin-bottom:40px}.slide-copy h3{font-size:44px;line-height:1.08;letter-spacing:-.04em;margin:0 0 22px;color:var(--navy)}.slide-copy>p:not(.kicker){line-height:1.8;color:var(--muted);font-size:16px}.slide-copy a{margin-top:24px;color:var(--blue);font-weight:900}.arrow{position:absolute;bottom:24px;width:48px;height:48px;border-radius:50%;border:1px solid #b9dbed;background:white;color:var(--navy);font-size:28px;cursor:pointer}.arrow:hover{background:var(--navy);color:white}.prev{right:78px}.next{right:24px}.dots{display:flex;justify-content:center;gap:8px;margin-top:24px}.dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#acd4e7;cursor:pointer;transition:.25s}.dots button.active{width:34px;background:var(--blue)}.portfolio{max-width:none;background:linear-gradient(145deg,#002653,#00529a);color:white}.portfolio>.section-heading,.portfolio-grid{max-width:1184px;margin-left:auto;margin-right:auto}.section-heading.light h2,.section-heading.light .kicker{color:white}.section-heading.light>p{color:#c5e6f5}.portfolio-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:360px 300px;gap:18px}.work,.oem-card{border-radius:28px;overflow:hidden;position:relative;margin:0}.work-large{grid-row:1/3}.work img{width:100%;height:100%;object-fit:cover}.work:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#001b3be6)}.work figcaption{position:absolute;z-index:2;bottom:24px;left:26px;display:grid;gap:5px}.work figcaption b{font-size:21px}.work figcaption span{color:#c8e7f6;font-size:14px}.oem-card{background:linear-gradient(145deg,#18b9ee,#0071c5);padding:34px}.oem-card>span{display:inline-grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff69;border-radius:50%;font-weight:900}.oem-card h3{font-size:30px;line-height:1.15;margin:22px 0 10px}.oem-card p{color:#e7f8ff;line-height:1.6}.oem-card a{display:inline-block;margin-top:12px;font-weight:900;border-bottom:1px solid white}.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.team-grid article{background:white;border:1px solid #d5ecf7;border-radius:28px;padding:28px;position:relative;min-height:350px;transition:.25s}.team-grid article:hover{transform:translateY(-8px);box-shadow:0 20px 45px #0c56821a}.team-grid article>span{position:absolute;right:24px;top:24px;color:#9dbdcd;font-weight:800}.team-avatar{height:132px;border-radius:20px;background:radial-gradient(circle at 50% 25%,#39c4f6,#0063ad);display:grid;place-items:center;color:white;font-size:38px;font-weight:900;letter-spacing:.08em;margin-bottom:28px}.team-grid h3{font-size:24px;color:var(--navy);margin:0 0 12px}.team-grid p{line-height:1.75;color:var(--muted);margin:0}.order{max-width:1184px;margin-bottom:90px;border-radius:38px;background:linear-gradient(135deg,#e6f8ff,#c3efff);display:grid;grid-template-columns:1fr .65fr .75fr;gap:28px;align-items:center;padding:60px}.order-copy h2{font-size:46px;line-height:1.08;letter-spacing:-.04em;color:var(--navy);margin:0 0 18px}.order-copy>p:not(.kicker){line-height:1.7;color:var(--muted)}.qr-card,.payment-card{background:white;padding:18px;border-radius:25px;box-shadow:0 18px 38px #064b7617}.qr-card img{border-radius:15px}.qr-card div{display:grid;text-align:center;padding-top:14px}.qr-card small{color:var(--muted)}.qr-card strong{font-size:22px;color:var(--navy)}.qr-card span{font-size:12px;color:var(--blue)}.payment-card img{height:260px;width:100%;object-fit:cover;object-position:top;border-radius:16px}.payment-card p{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 0}footer{max-width:1184px;margin:auto;padding:28px 0 44px;border-top:1px solid #cce4ef;display:flex;align-items:center;gap:30px;color:var(--muted);font-size:13px}.footer-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.footer-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover}.footer-brand span{display:grid}.footer-brand b{color:var(--navy)}.footer-brand small{font-size:10px}.floating-line{position:fixed;right:22px;bottom:22px;z-index:30;background:#06c755;color:white;border:4px solid white;border-radius:999px;padding:10px 18px;box-shadow:0 12px 35px #063a6250;display:flex;gap:8px;align-items:center}.floating-line span{font-size:11px;font-weight:900}.floating-line b{font-size:14px}@keyframes fade{from{opacity:.25;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(max-width:900px){.nav-wrap nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:58px 28px 34px}.hero-art{min-height:480px}.hero-art>img{max-height:430px}.section{padding:80px 20px}.section-heading{align-items:start;flex-direction:column;gap:14px}.slider{grid-template-columns:1fr}.slide-media img{height:410px}.slide-copy{padding:42px 28px 90px}.portfolio-grid{grid-template-columns:1fr;grid-template-rows:500px 400px auto}.work-large{grid-row:auto}.team-grid{grid-template-columns:1fr}.order{margin:20px;border-radius:28px;grid-template-columns:1fr 1fr;padding:38px}.order-copy{grid-column:1/3}footer{margin:0 20px}}
@media(max-width:560px){.nav-wrap{height:72px;padding:0 16px}.nav-cta{padding:11px 14px;font-size:12px}.brand span{display:none}.hero{border-radius:0 0 28px 28px}.hero h1{font-size:52px}.hero-art{min-height:360px;padding:12px}.hero-art>img{max-height:340px;border-radius:20px}.water-ring{width:320px;height:320px}.float-note{display:none}.hero-text{font-size:16px}.trust-row{gap:10px;font-size:11px}.slide-media{padding:15px}.slide-media img{height:350px}.slide-copy h3{font-size:34px}.portfolio-grid{grid-template-rows:430px 380px auto}.team-grid article{min-height:auto}.order{grid-template-columns:1fr;margin:12px;padding:28px 20px}.order-copy{grid-column:auto}.order-copy h2{font-size:38px}.payment-card img{height:320px}footer{align-items:flex-start;flex-direction:column}.floating-line{right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}