@font-face{
  font-family:"Kanit";
  src:url("../fonts/kanit-webfont/Kanit-Regular.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:"Kanit";
  src:url("../fonts/kanit-webfont/Kanit-Medium.woff") format("woff");
  font-style:normal;
  font-weight:500;
  font-display:swap
}
@font-face{
  font-family:"Kanit";
  src:url("../fonts/kanit-webfont/Kanit-SemiBold.woff") format("woff");
  font-style:normal;
  font-weight:600;
  font-display:swap
}
@font-face{
  font-family:"Kanit";
  src:url("../fonts/kanit-webfont/Kanit-Bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap
}

:root{
  --bg:#141b26;--panel:#1a2230;--text:#f7faff;--muted:rgba(247,250,255,.82);
  --blueDark:#0b396d;--blueMed:#1a5ec1;--blueLight:#04a3e8;
  --border:rgba(233,241,255,.12);--shadow:0 18px 55px rgba(0,0,0,.45);
  --radius:18px;--radius2:26px;--container:1160px
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:"Kanit",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:400;line-height:1.35;color:var(--text);
  background:radial-gradient(1200px 900px at 70% -10%, rgba(4,163,232,.12), transparent 55%),
           radial-gradient(1000px 700px at 10% 0%, rgba(26,94,193,.10), transparent 52%), var(--bg)
}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(20,27,38,.78);
  border-bottom:1px solid rgba(233,241,255,.14);transition:box-shadow .15s ease,background .15s ease;--logo-scale:1.46;--brand-pad:10px;--brand-minh:86px}
.site-header.elevated{box-shadow:0 10px 40px rgba(0,0,0,.18);background:rgba(20,27,38,.92);--logo-scale:1;--brand-pad:6px;--brand-minh:64px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;padding:var(--brand-pad) 0;min-height:var(--brand-minh);transition:padding .22s ease,min-height .22s ease}
.brand-logo{width:260px;max-width:42vw;height:auto;transition:transform .22s ease;transform-origin:left center;will-change:transform;transform:translateZ(0) scale(var(--logo-scale))}
.nav{display:flex;align-items:center}
.nav-toggle{display:none;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);
  padding:10px 12px;border-radius:12px;cursor:pointer;font:inherit}
.nav-menu{display:flex;align-items:center;gap:18px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{opacity:.9;letter-spacing:.2px;background:transparent;border:none;padding:0;font:inherit;cursor:pointer;color:#fff}
.linklike{opacity:.9;letter-spacing:.2px;background:transparent;border:none;padding:0;font:inherit;cursor:pointer;color:#fff}
.nav-links a:hover,.linklike:hover{opacity:1}.nav-links .active{opacity:1;color:#fff}
.nav-ctas{display:flex;align-items:center;gap:10px}
.dropdown{position:relative}.dropdown-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;color:inherit;
  font:inherit;cursor:pointer;opacity:.86}.dropdown-toggle:hover{opacity:1}
.dropdown-toggle.active{opacity:1;color:#fff}
.caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(233,241,255,.75)}
.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:rgba(7,10,15,.92);
  border:1px solid rgba(233,241,255,.12);border-radius:16px;box-shadow:var(--shadow);padding:10px;display:none}
.dropdown-menu a{display:block;padding:10px 10px;border-radius:12px;color:rgba(233,241,255,.90)}
.dropdown-menu a:hover{background:rgba(255,255,255,.06)}
.dropdown-menu a.active{background:rgba(4,163,232,.16);border:1px solid rgba(4,163,232,.28);color:#fff}
.dropdown.open .dropdown-menu{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid transparent;
  font-weight:600;letter-spacing:.2px;transition:transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.22)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn:active{transform:translateY(0)}
.btn-primary{background:#04a3e8;border-color:rgba(4,163,232,.35)}
.btn-secondary{background:#0b396d;color:#fff;border-color:rgba(255,255,255,.16)}
.btn-alt-primary{background:#0b396d;color:#fff;border-color:rgba(11,57,109,.35)}
.btn-alt-secondary{background:#fff;color:#0b396d;border-color:rgba(11,57,109,.35)}
.section{padding:64px 0}.section-alt{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04));
  border-top:1px solid rgba(233,241,255,.12);border-bottom:1px solid rgba(233,241,255,.12)}
.section-tone-1{background:#162233}
.section-tone-2{background:#1d2a3c}
.section-tone-3{background:#223247}
.section-tone-4{background:#2a3c54}
.section-tone-5{background:#2f4360}
.section-tone-green-1{background:#1f3a2d}
.section-tone-green-2{background:#245041}
.section-tone-light{background:#f2f6fb;color:#0b111a}
.section-tone-light .section-head h2,.section-tone-light .card h3{color:#243548}
.section-tone-light .section-head p,.section-tone-light .card p,.section-tone-light .card-foot,.section-tone-light .footer-note{color:rgba(11,17,26,.7)}
.section-tone-light .card{background:#ffffff;border-color:rgba(11,17,26,.12)}
.section-head{margin-bottom:18px}.section-head h2{margin:0 0 6px;font-size:clamp(26px,3vw,38px);letter-spacing:.6px}
.section-head p{margin:0;color:var(--muted);max-width:80ch}
.grid{display:grid;gap:14px}.cards-3{grid-template-columns:repeat(3,1fr)}
.card{border-radius:var(--radius);border:1px solid rgba(233,241,255,.16);background:rgba(255,255,255,.08);padding:16px 16px;
  box-shadow:0 14px 50px rgba(0,0,0,.14);min-height:148px}
.card h3{margin:0 0 6px;font-weight:600}.card p{margin:0;color:var(--muted)}.card-foot{margin-top:12px;font-size:13px;color:rgba(233,241,255,.62)}
.card-highlight{background:linear-gradient(135deg,rgba(26,94,193,.28),rgba(4,163,232,.18));border-color:rgba(4,163,232,.38)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}.reveal.in{opacity:1;transform:translateY(0)}
.hero{position:relative;padding:44px 0 18px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(4,163,232,.22);background:rgba(4,163,232,.08);
  color:rgba(233,241,255,.9);letter-spacing:.3px;margin-bottom:10px}
.hero h1{margin:6px 0 10px;font-size:clamp(34px,4.2vw,54px);line-height:1.03}
.lead{margin:0 0 18px;color:var(--muted);font-size:18px;max-width:60ch}
.lead strong{font-weight:500}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid rgba(233,241,255,.14);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:999px;font-size:14px;opacity:.92}
.media-frame{border-radius:var(--radius2);overflow:hidden;border:1px solid rgba(233,241,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow)}
.video-embed{position:relative;aspect-ratio:16/9;background:rgba(0,0,0,.35)}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.hero-video-panel{display:grid;gap:0}
.hero-video-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid rgba(233,241,255,.12);
  border-bottom:0;border-radius:20px 20px 0 0;overflow:hidden;background:rgba(7,10,15,.92)}
.hero-video-tab{appearance:none;border:0;background:transparent;color:rgba(247,250,255,.84);font:inherit;font-weight:600;
  padding:11px 10px;cursor:pointer;letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  border-right:1px solid rgba(233,241,255,.10);transition:background .15s ease,color .15s ease}
.hero-video-tab:last-child{border-right:0}
.hero-video-tab:hover{background:rgba(255,255,255,.07);color:#fff}
.hero-video-tab.is-active{background:rgba(4,163,232,.22);color:#fff}
.hero-video-frame{border-top-left-radius:0;border-top-right-radius:0}
.showcase-grid{display:grid;gap:14px;margin-top:18px}
.showcase-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.showcase-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.showcase-card{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(233,241,255,.14);background:rgba(255,255,255,.05);box-shadow:0 14px 50px rgba(0,0,0,.14)}
.showcase-card img{width:100%;height:auto;display:block;background:#0f1520}
.showcase-card figcaption{padding:12px 14px;color:var(--muted);font-size:14px;line-height:1.45}
.section-tone-light .showcase-card{background:#fff;border-color:rgba(11,17,26,.12)}
.section-tone-light .showcase-card figcaption{color:rgba(11,17,26,.75)}
.section-split{display:grid;grid-template-columns:1.02fr .98fr;gap:22px;align-items:center;margin-top:22px}
.section-split.reverse{grid-template-columns:.98fr 1.02fr}
.section-copy{display:grid;gap:12px}
.section-copy p{margin:0;color:var(--muted)}
.section-kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(4,163,232,.82);font-weight:600}
.feature-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.feature-list li{padding-left:18px;position:relative;color:var(--muted)}
.feature-list li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:999px;background:rgba(4,163,232,.85)}
.section-media{display:grid;gap:10px}
.section-media img{width:100%;height:auto;display:block}
.section-media-caption{margin:0;color:rgba(233,241,255,.68);font-size:14px;line-height:1.45}
.section-tone-light .section-copy p,.section-tone-light .feature-list li,.section-tone-light .section-media-caption{color:rgba(11,17,26,.75)}
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid rgba(233,241,255,.16);border-radius:14px;background:rgba(255,255,255,.06);padding:10px 12px}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none;padding-right:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{margin:8px 0 0;color:var(--muted)}
.section-tone-light .faq-item{background:#fff;border-color:rgba(11,17,26,.12)}
.section-tone-light .faq-item p{color:rgba(11,17,26,.75)}
.final-cta{padding:54px 0;background:radial-gradient(700px 300px at 20% 0%, rgba(4,163,232,.18), transparent 55%),
           radial-gradient(700px 300px at 80% 0%, rgba(26,94,193,.16), transparent 55%);
  border-top:1px solid rgba(233,241,255,.06)}
.final-cta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.final-cta h2{margin:0 0 6px;font-size:34px}.final-cta p{margin:0;color:var(--muted);max-width:68ch}
.site-footer{padding:26px 0;border-top:1px solid rgba(233,241,255,.12);background:rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.footer-brand{font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.footer-sub{color:rgba(233,241,255,.65);font-size:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px;color:rgba(233,241,255,.76)}
.footer-links a:hover,.footer-links .linklike:hover{color:rgba(233,241,255,1)}
.footer-note{color:rgba(233,241,255,.55);font-size:14px;margin-top:10px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;transition:opacity .18s ease}
.modal-backdrop[hidden]{display:none !important}
.modal-backdrop.show{opacity:1}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;padding:22px;overflow-y:auto}
.modal[hidden]{display:none !important}
.modal:not(.show){pointer-events:none}
.modal-card{width:min(720px,100%);background:rgba(7,10,15,.985);border:1px solid rgba(233,241,255,.14);border-radius:20px;box-shadow:var(--shadow);
  overflow:auto;transform:translateY(6px);opacity:0;transition:transform .18s ease,opacity .18s ease;max-height:calc(100vh - 44px)}
.modal-card-wide{width:min(980px,100%)}.modal.show .modal-card{transform:translateY(0);opacity:1}
.modal.show-success .modal-head{display:none}
.modal.show-success .demo-step > .muted{display:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(233,241,255,.08)}
.modal-title{margin:0;font-size:20px}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(233,241,255,.14);background:rgba(255,255,255,.04);
  color:rgba(233,241,255,.9);cursor:pointer;font-size:20px;line-height:1}
.form{padding:16px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form.fade-out{opacity:0;transition:opacity .3s ease;pointer-events:none}
.field{display:grid;gap:6px}.field span{color:rgba(233,241,255,.85);font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(233,241,255,.14);
  background:rgba(255,255,255,.08);color:var(--text);font:inherit;outline:none;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:rgba(233,241,255,.6)}
.field select option{color:#0b111a}
.field input:-webkit-autofill,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.08) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.field-full{grid-column:1/-1}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.form-hint{margin:10px 0 0;color:rgba(233,241,255,.70);min-height:20px}
.form-hint.ok{color:rgba(140,255,195,.9)}.form-hint.bad{color:rgba(255,170,170,.9)}
.contact-panel{background:rgba(7,10,15,.98);border:1px solid rgba(233,241,255,.14);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.contact-panel-head{padding:18px 18px 0}
.contact-panel .form{padding:18px}
.contact-direct{display:grid;gap:12px;margin-top:8px}
.contact-direct-item{display:grid;gap:4px;padding:14px 16px;border-radius:16px;border:1px solid rgba(11,17,26,.12);background:rgba(255,255,255,.7)}
.contact-direct-item strong{color:#243548}
.contact-direct-item span,.contact-direct-item a{color:rgba(11,17,26,.76)}
.contact-mini-grid{margin-top:6px}
.muted{color:var(--muted);margin:0 16px 0}
.calendly-wrap{padding:0 16px 16px}.calendly-wrap iframe{width:100%;height:580px;border:1px solid rgba(233,241,255,.10);
  border-radius:16px;background:rgba(255,255,255,.03)}
@media (max-width:980px){
  .site-header{--logo-scale:1.15;--brand-pad:6px;--brand-minh:58px}
  .header-row{gap:12px}
  .brand{min-height:var(--brand-minh)}
  .brand-logo{width:200px;max-width:52vw}
  .btn{font-size:14px;font-weight:600}
  .btn-primary{color:#fff}
  .hero-grid{grid-template-columns:1fr}.cards-3{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none;position:absolute;right:24px;top:64px;width:min(560px,calc(100vw - 48px));flex-direction:column;align-items:stretch;gap:14px;
    padding:14px;border-radius:18px;border:1px solid rgba(233,241,255,.12);background:rgba(7,10,15,.92);box-shadow:var(--shadow)}
  .nav-menu.open{display:flex}
  .nav-links{flex-direction:column;align-items:flex-start;gap:10px}
  .dropdown-menu{position:static;display:none;min-width:unset;width:100%}
  .dropdown.open .dropdown-menu{display:block}
  .form-grid{grid-template-columns:1fr}
  .hero-video-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-split,.section-split.reverse{grid-template-columns:1fr}
  .showcase-grid-2,.showcase-grid-3{grid-template-columns:1fr}
}

@media (max-width:560px){
  .hero-video-nav{grid-template-columns:1fr}
  .hero-video-tab{padding:10px 12px;text-align:left}
}