:root{--navy:#062f52;--blue:#0b69a9;--sky:#36a7d9;--mint:#55d6be;--ink:#102638;--muted:#607487;--soft:#eef6fa;--line:#dce8ef;--white:#fff;--shadow:0 24px 60px rgba(6,47,82,.12);--radius:24px;--font-head:'Kanit',sans-serif;--font-body:'Sarabun',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--font-body);background:#fff;line-height:1.65}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:110px 0}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,232,239,.8)}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font:bold 17px var(--font-head);box-shadow:0 10px 24px rgba(11,105,169,.25)}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font:600 22px var(--font-head)}.brand-copy small{font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}.main-nav{display:flex;align-items:center;gap:28px;font-weight:600;font-size:15px}.main-nav a{transition:.25s}.main-nav a:hover{color:var(--blue)}.nav-cta{padding:12px 18px;border-radius:12px;background:var(--navy);color:#fff!important}.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;background:var(--navy);margin:5px}.hero{min-height:760px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 90% 10%,rgba(54,167,217,.16),transparent 30%),linear-gradient(180deg,#f8fcfe,#fff)}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:60px}.eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 14px var(--font-head);letter-spacing:.6px;color:var(--blue);margin-bottom:18px}.eyebrow:before{content:'';width:28px;height:2px;background:var(--sky)}.eyebrow.light{color:#90e3f1}.hero h1,.section-heading h2,.strength-copy h2,.about-content h2,.contact-copy h2{font-family:var(--font-head);line-height:1.18;margin:0}.hero h1{font-size:clamp(46px,5.3vw,76px);letter-spacing:-1.8px;color:var(--navy)}.hero h1 span{color:var(--blue)}.hero-lead{font-size:19px;color:var(--muted);margin:26px 0 32px;max-width:650px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 24px;border-radius:14px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;box-shadow:0 16px 32px rgba(11,105,169,.25)}.btn-secondary{border-color:var(--line);background:#fff}.btn-light{background:#fff;color:var(--navy);width:100%}.hero-points{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:14px;color:#476176}.hero-visual{position:relative;min-height:520px}.visual-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:linear-gradient(135deg,rgba(54,167,217,.25),rgba(85,214,190,.2));filter:blur(10px);right:0;top:20px}.device{position:absolute;background:#fff;border:1px solid rgba(220,232,239,.9);box-shadow:var(--shadow)}.desktop{width:92%;right:0;top:46px;border-radius:22px;padding:12px}.device-bar{display:flex;gap:6px;padding:4px 3px 11px}.device-bar i{width:8px;height:8px;border-radius:50%;background:#d8e5ec}.image-placeholder{height:100%;min-height:240px;border:1.5px dashed #9cc8db;border-radius:16px;background:linear-gradient(135deg,rgba(238,246,250,.95),rgba(255,255,255,.95));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5f8294;padding:24px}.image-placeholder span{font:600 16px var(--font-head)}.image-placeholder small{margin-top:5px}.hero-placeholder{min-height:355px}.phone{width:178px;height:355px;bottom:18px;left:0;border-radius:31px;padding:12px;z-index:3}.phone-notch{width:62px;height:9px;background:#d9e4ea;border-radius:9px;margin:0 auto 9px}.phone-placeholder{min-height:310px;border-radius:22px;padding:12px}.floating-card{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px rgba(6,47,82,.15);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column}.floating-card strong{font:600 17px var(--font-head);color:var(--blue)}.floating-card span{font-size:12px;color:var(--muted)}.card-one{right:-10px;bottom:85px}.card-two{left:90px;top:15px}.trust-strip{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-strip p{text-align:center;color:var(--muted);font-weight:600;margin:0 0 20px}.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.logo-placeholder{height:72px;border:1px dashed #b8ccd7;border-radius:14px;display:grid;place-items:center;color:#8095a2;font-size:13px;background:#fbfdfe}.section-heading{text-align:center;max-width:760px;margin:0 auto 52px}.section-heading h2,.strength-copy h2,.about-content h2,.contact-copy h2{font-size:clamp(34px,4vw,54px);color:var(--navy)}.section-heading p{font-size:18px;color:var(--muted);margin:16px 0 0}.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.solution-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;min-height:260px;transition:.3s}.solution-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}.solution-card.featured{grid-column:span 2;background:linear-gradient(135deg,var(--navy),#0b5d8e);color:#fff;display:grid;grid-template-columns:auto 1fr;gap:20px}.card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--soft);font:700 16px var(--font-head);color:var(--blue)}.featured .card-icon{background:rgba(255,255,255,.13);color:#fff}.solution-card h3,.strength-item h3,.process-step h3{font:600 22px var(--font-head);margin:18px 0 9px}.featured h3{font-size:29px;margin-top:0}.solution-card p{color:var(--muted);margin:0}.featured p,.featured li{color:rgba(255,255,255,.75)}.featured ul{grid-column:2;margin:0;padding-left:18px;display:flex;gap:30px;flex-wrap:wrap}.section-dark{background:var(--navy);color:#fff;overflow:hidden}.strengths-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}.strength-copy{position:sticky;top:130px}.strength-copy h2{color:#fff}.strength-copy p{color:rgba(255,255,255,.68);font-size:18px}.text-link{color:#90e3f1;font-weight:700}.strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.strength-item{padding:30px;border-radius:22px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11)}.strength-item strong{font:600 14px var(--font-head);color:#90e3f1}.strength-item p{color:rgba(255,255,255,.64);margin-bottom:0}.section-heading.split{max-width:none;display:grid;grid-template-columns:1fr .7fr;text-align:left;align-items:end}.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:20px}.portfolio-item{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}.portfolio-item .image-placeholder{min-height:300px;border:0;border-radius:0}.portfolio-item.large{grid-row:span 2}.portfolio-item.large .image-placeholder{min-height:660px}.portfolio-item.wide{grid-column:span 2}.portfolio-caption{padding:22px}.portfolio-caption span{font-size:13px;color:var(--blue);font-weight:700}.portfolio-caption h3{font:600 21px var(--font-head);margin:4px 0 0}.section-soft{background:var(--soft)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.process-step{padding:28px;background:#fff;border-radius:20px;border:1px solid var(--line)}.process-step span{font:700 34px var(--font-head);color:#b5dce9}.process-step p{color:var(--muted);margin-bottom:0}.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.image-placeholder.tall{min-height:570px}.about-content p{color:var(--muted);font-size:17px}.about-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.about-badges span{padding:9px 13px;border-radius:30px;background:var(--soft);font-size:13px;font-weight:700;color:var(--navy)}.faq-section{padding-top:40px}.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}.section-heading.left{text-align:left;margin:0}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{cursor:pointer;font:600 19px var(--font-head);color:var(--navy);list-style:none;padding-right:32px;position:relative}.faq-list summary:after{content:'+';position:absolute;right:0;font-size:25px;color:var(--blue)}.faq-list details[open] summary:after{content:'−'}.faq-list p{color:var(--muted)}.contact-section{padding:60px 0 110px}.contact-card{background:linear-gradient(135deg,var(--navy),#0a5c8a);border-radius:32px;padding:58px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;color:#fff;box-shadow:var(--shadow)}.contact-copy h2{color:#fff}.contact-copy p{color:rgba(255,255,255,.7);font-size:18px}.contact-info{display:flex;flex-direction:column;gap:8px;margin-top:28px;color:rgba(255,255,255,.82)}.contact-form{padding:28px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:22px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;margin-bottom:14px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);color:#fff;border-radius:11px;padding:12px 13px;outline:none}.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.5)}.contact-form select option{color:#111}.contact-form small{display:block;color:rgba(255,255,255,.55);margin-top:10px}.site-footer{padding:70px 0 24px;background:#041f36;color:#fff}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr;gap:50px}.footer-brand .brand-copy small{color:#91a8b8}.footer-grid p,.footer-grid a,.footer-grid span{color:#91a8b8}.footer-grid h3{font:600 17px var(--font-head);margin:0 0 16px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer-grid>div:first-child{display:block}.footer-grid>div:first-child p{max-width:330px}.footer-bottom{margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#7891a3;font-size:13px}.floating-contact{position:fixed;right:20px;bottom:20px;z-index:40;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-radius:40px;padding:13px 19px;font-weight:700;box-shadow:0 14px 30px rgba(11,105,169,.32)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.main-nav{position:fixed;top:82px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;background:#fff;padding:22px;border-radius:18px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.menu-toggle{display:block}.hero-grid,.strengths-layout,.about-grid,.faq-layout,.contact-card{grid-template-columns:1fr}.hero{padding-top:70px}.hero-visual{min-height:500px}.solutions-grid{grid-template-columns:1fr 1fr}.solution-card.featured{grid-column:span 2}.strength-copy{position:static}.portfolio-grid{grid-template-columns:1fr 1fr}.portfolio-item.large{grid-row:auto;grid-column:span 2}.portfolio-item.large .image-placeholder{min-height:440px}.logo-row{grid-template-columns:repeat(3,1fr)}.section-heading.split{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr 1fr}.contact-card{gap:35px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}}
@media(max-width:680px){.container{width:min(100% - 28px,1180px)}.section{padding:78px 0}.nav-wrap{height:72px}.main-nav{top:72px}.brand-copy small{display:none}.hero{min-height:auto;padding-top:52px}.hero-grid{gap:20px}.hero h1{font-size:43px}.hero-lead{font-size:17px}.hero-actions .btn{width:100%}.hero-points{gap:8px;flex-direction:column}.hero-visual{min-height:390px}.desktop{width:94%;top:25px}.hero-placeholder{min-height:270px}.phone{width:125px;height:260px;padding:8px}.phone-placeholder{min-height:220px}.card-one{right:0;bottom:20px}.card-two{left:60px;top:0}.floating-card{padding:9px 11px}.logo-row{grid-template-columns:1fr 1fr}.logo-placeholder{height:62px}.solutions-grid,.strength-grid,.process-grid,.portfolio-grid{grid-template-columns:1fr}.solution-card.featured{grid-column:auto;display:block}.featured ul{margin-top:18px;display:block}.portfolio-item.large,.portfolio-item.wide{grid-column:auto}.portfolio-item.large .image-placeholder,.portfolio-item .image-placeholder{min-height:280px}.section-heading h2,.strength-copy h2,.about-content h2,.contact-copy h2{font-size:34px}.field-row{grid-template-columns:1fr}.contact-card{padding:28px 20px;border-radius:24px}.contact-form{padding:20px 15px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.floating-contact{right:14px;bottom:14px;padding:11px 15px}.floating-contact span{font-size:13px}}
.brand-logo{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--line);padding:3px;box-shadow:0 8px 20px rgba(6,47,82,.12)}
.footer-brand .brand-logo{background:#fff;width:62px;height:62px}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{display:none;margin-top:12px;padding:11px 13px;border-radius:10px;font-size:14px;font-weight:600}
.form-status.show{display:block}.form-status.success{background:rgba(85,214,190,.18);border:1px solid rgba(85,214,190,.5);color:#d9fff7}.form-status.error{background:rgba(255,110,110,.18);border:1px solid rgba(255,160,160,.45);color:#ffe1e1}
.contact-form button[disabled]{opacity:.65;cursor:not-allowed;transform:none}
@media(max-width:680px){.brand-logo{width:46px;height:46px}.footer-brand .brand-logo{width:54px;height:54px}}

/* Accessibility & SEO usability */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  color: #083b66;
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.contact-info address,
.site-footer address { margin: 0; font-style: normal; line-height: 1.65; }