/* ===== Home (design: Main) ===== */
body{margin:0;background:#FFFFFF;font-family:Kanit,sans-serif;color:#0B1F2A}
a{color:#0B7F86}a:hover{color:#075E63}
.navlink{color:#3E4F5F;text-decoration:none;font-size:15px;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.navlink:hover{color:#0B7F86}
.card{transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;box-shadow:0 1px 2px rgba(11,40,50,.04)}
.card:hover{border-color:rgba(15,181,186,.6);transform:translateY(-3px);box-shadow:0 12px 32px -12px rgba(11,127,134,.28)}
.dim{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#FFFFFF;border:1px solid rgba(11,127,134,.18);border-radius:12px;padding:14px 18px;min-height:56px;color:#3E4F5F;font-family:Kanit,sans-serif;font-size:16px;cursor:pointer}
.dim:hover{border-color:rgba(15,181,186,.6);color:#0B1F2A}
.dim.on{background:rgba(15,181,186,.09);border-color:#0FB5BA;color:#0B1F2A}
.ghost{color:#0B1F2A;text-decoration:none;border:1px solid rgba(11,127,134,.35);border-radius:999px;padding:14px 26px;font-size:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;background:#FFFFFF}
.ghost:hover{border-color:#0FB5BA;color:#0B7F86}
.grad-text{background-image:linear-gradient(90deg,#1E40AF 0%,#0E7FC0 50%,#0AA6A6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block;padding:.14em 0 .08em}
.solid{color:#FFFFFF;background-image:linear-gradient(110deg,#1E40AF 0%,#0E7FC0 55%,#0B9C9E 100%);box-shadow:0 10px 24px -10px rgba(14,127,192,.55);text-decoration:none;border-radius:999px;padding:14px 28px;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box}
.solid:hover{background-image:linear-gradient(110deg,#172F7A 0%,#0B6AA3 55%,#08888A 100%);color:#FFFFFF}
.more{color:#0B7F86;text-decoration:none;font-size:15px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.more:hover{color:#075E63}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-64}}
.flow{stroke-dasharray:8 24;animation:flow 2.8s linear infinite}
.flow2{stroke-dasharray:4 18;animation:flow 4.2s linear infinite}
@keyframes ring{0%{r:28;opacity:.6}100%{r:60;opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.blades{animation:spin 7s linear infinite}
.blades2{animation:spin 9s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bob{animation:bob 4s ease-in-out infinite}
.bob2{animation:bob 4s ease-in-out 1.2s infinite}
.bob3{animation:bob 4s ease-in-out 2.4s infinite}
.ring{animation:ring 2.6s ease-out infinite}
.ring2{animation:ring 2.6s ease-out 1.3s infinite}
.orbit{position:relative;width:100%;max-width:500px;aspect-ratio:1/1;margin:0 auto}
.orb{position:absolute;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;border:1px solid rgba(11,127,134,.25);background:#FFFFFF;color:#0B7F86;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 8px 20px -10px rgba(14,127,192,.45);transition:transform .25s ease,box-shadow .25s ease}
.orb:hover{transform:translate(-50%,-50%) scale(1.08)}
.orb.on{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent;box-shadow:0 0 0 8px rgba(14,127,192,.12),0 14px 30px -10px rgba(30,64,175,.6)}
.orb-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#3E4F5F;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 6px}
.orb.on .orb-label{color:#0B1F2A;font-weight:500}
.spinslow{transform-origin:50px 50px;animation:spin 60s linear infinite}
.navbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(11,127,134,.25);background:#FFFFFF;color:#0B7F86;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.navbtn:hover{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent}
.val{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.val:hover{border-color:rgba(14,127,192,.45);box-shadow:0 18px 40px -22px rgba(30,64,175,.45);transform:translateY(-2px)}
.pf-art{transition:transform .7s ease}
.pf:hover .pf-art{transform:scale(1.05)}
@media (max-width: 640px){.orb{width:50px;height:50px}.orb svg{width:22px;height:22px}.orb-label{display:none}.hub{width:96px !important;height:96px !important}.hub-t{font-size:8.5px !important}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,-50px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,70px)}}
.aur1{animation:drift1 14s ease-in-out infinite}
.aur2{animation:drift2 18s ease-in-out infinite}
.aur3{animation:drift3 16s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 12px 30px -10px rgba(14,127,192,.6),0 0 0 0 rgba(45,212,191,.45)}50%{box-shadow:0 12px 30px -10px rgba(14,127,192,.6),0 0 0 10px rgba(45,212,191,0)}}
.cta-submit{animation:glowpulse 2.4s ease-out infinite}
.qform .inp:hover{border-color:rgba(14,127,192,.45)}
.hero-wrap h1,.hero-wrap p,.hero-kpis span{text-shadow:0 2px 16px rgba(8,18,52,.75),0 1px 3px rgba(8,18,52,.5)}
.hero-wrap .hero-city{text-shadow:none;filter:drop-shadow(0 2px 12px rgba(8,18,52,.7))}
.lbl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#3E4F5F}
.inp{width:100%;box-sizing:border-box;border:1px solid rgba(11,127,134,.22);border-radius:12px;padding:12px 14px;font-family:Kanit,sans-serif;font-size:15px;color:#0B1F2A;background:#F7FAFE;min-height:48px}
.inp:focus{outline:none;border-color:#0E7FC0;box-shadow:0 0 0 4px rgba(14,127,192,.15);background:#FFFFFF}
.drop{display:flex;align-items:center;gap:12px;border:1.5px dashed rgba(14,127,192,.4);border-radius:14px;padding:14px 16px;cursor:pointer;background:rgba(14,127,192,.04);color:#3E4F5F;font-size:14px;min-height:48px;box-sizing:border-box}
.drop:hover{border-color:#0E7FC0;background:rgba(14,127,192,.08)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flink{color:#CFE0F0;text-decoration:none;font-size:15px;font-weight:300;min-height:40px;display:inline-flex;align-items:center;gap:8px}
.flink:hover{color:#5EEAD4}
.news-item{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.news-item:hover{border-color:rgba(14,127,192,.45);box-shadow:0 18px 40px -24px rgba(30,64,175,.45);transform:translateY(-2px)}
.lang-sw{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(11,127,134,.22);background:#F5F9FF}
.lang-sw button{border:0;background:transparent;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.06em;color:#3E4F5F;min-width:44px;height:38px;border-radius:999px;padding:0 10px}
.lang-sw button:hover{color:#0B7F86}
.lang-sw button.on{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF}
.svc-art{transition:transform .6s ease}
.svc{position:relative}
.svc::after{content:'';position:absolute;left:0;right:0;top:210px;height:4px;background-image:linear-gradient(90deg,#1E40AF,#0E7FC0,#0AA6A6);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.svc:hover::after{transform:scaleX(1)}
.svc:hover{box-shadow:0 0 0 1px rgba(14,127,192,.35),0 34px 60px -30px rgba(30,64,175,.5) !important}
.svc-num{position:absolute;right:20px;top:10px;font-family:'JetBrains Mono',monospace;font-size:64px;font-weight:500;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(14,127,192,.22);transition:-webkit-text-stroke-color .3s ease;pointer-events:none}
.svc:hover .svc-num{-webkit-text-stroke-color:rgba(14,127,192,.55)}
.hl{display:flex;gap:14px;align-items:flex-start}
.svc:hover .svc-art{transform:scale(1.06)}
.svc-link{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:#0B1F2A;font-size:15px;min-height:44px}
.svc-link:hover{color:#0B7F86}
.svc-go{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(11,127,134,.25);color:#0B7F86;transition:background .25s ease,color .25s ease,border-color .25s ease}
.svc:hover .svc-go{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent}
.menu-btn{align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(11,127,134,.25);background:#FFFFFF;color:#0B1F2A;cursor:pointer;padding:0}
.menu-btn:hover{border-color:#0FB5BA;color:#0B7F86}
@media (max-width: 960px){
.mainnav{display:none !important;order:3;width:100%;flex-direction:column;align-items:stretch !important;gap:0 !important;padding:4px 0 8px;border-top:1px solid rgba(11,127,134,.12)}
.mainnav.open{display:flex !important}
.mainnav .navlink{padding:12px 4px;font-size:17px;border-bottom:1px solid rgba(11,127,134,.08)}
.menu-btn{display:inline-flex !important}
.hero-veil{background-image:none !important}
}
@media (max-width: 640px){
section > div{padding-top:64px !important;padding-bottom:64px !important}
.hero-wrap{padding-top:250px !important;padding-bottom:56px !important;gap:24px !important;min-height:0 !important}
.hero-stats{min-height:180px !important}
.hero-lead{font-size:17px !important}
.badge{letter-spacing:.04em !important;font-size:10.5px !important;padding:7px 12px !important}
.vpanel{padding:24px !important}
.dim{flex-wrap:wrap;gap:4px 16px}
.dim .dim-th{width:100%;padding-left:40px}
.hdr-cta{display:none !important}
.cta-box{border-radius:20px !important}
.cta-tel{font-size:18px !important}
.hero-ctas{gap:12px !important}
.hub-logo{width:42px !important;height:42px !important}
.hero-focus{top:170px !important;height:820px !important}
.hero-kpis span:last-child{font-size:12px !important}
.hero-visual{max-width:440px !important}
.hero-city{font-size:clamp(38px, 10.5vw, 46px);line-height:1.05;font-weight:700;letter-spacing:-.01em;padding:.18em 0 .1em !important}
.hero-ctas a{flex:1 1 100%;justify-content:center;padding-top:16px !important;padding-bottom:16px !important;font-size:17px !important}
.hero-veil{background-image:none !important}
.hero-net{inset:auto !important;top:-70px !important;left:50% !important;width:985px !important;height:520px !important;margin-left:-492px}
.hero-stats{min-height:340px !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:end}
.hero-stats > div{position:static !important;padding:10px 12px !important;border-radius:14px !important;background:rgba(255,255,255,.82) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-stats .grad-text{font-size:21px !important}
.hero-stats > div > span:first-child{font-size:9.5px !important;letter-spacing:.05em !important}
}

/* ===== Service pages ===== */
.svc-page .solid{color:#FFFFFF;background-image:linear-gradient(110deg,#1E40AF 0%,#0E7FC0 55%,#0B9C9E 100%);text-decoration:none;border-radius:999px;padding:14px 28px;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;box-shadow:0 10px 24px -10px rgba(14,127,192,.55);border:0;cursor:pointer;font-family:Kanit,sans-serif}
.svc-page .solid:hover{background-image:linear-gradient(110deg,#172F7A 0%,#0B6AA3 55%,#08888A 100%);color:#FFFFFF}
.svc-page .ghost{color:#FFFFFF;text-decoration:none;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06);border-radius:999px;padding:14px 26px;font-size:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box}
.svc-page .ghost:hover{border-color:#5EEAD4;color:#FFFFFF}
.svc-page .crumb{color:#A9C1DB;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.svc-page .crumb:hover{color:#FFFFFF}
.svc-page .card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.svc-page .card:hover{border-color:rgba(14,127,192,.45);transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(30,64,175,.45)}
.svc-page .faq{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:transparent;border:0;padding:22px 0;cursor:pointer;font-family:Kanit,sans-serif;font-size:18px;font-weight:500;color:#0B1F2A;min-height:44px}
.svc-page .faq:hover{color:#0B7F86}
.svc-page .faq-ic{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(11,127,134,.25);color:#0B7F86;transition:transform .25s ease}
.svc-page .faq.open .faq-ic{transform:rotate(45deg);background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent}
.svc-page .grad-text{background-image:linear-gradient(90deg,#1E40AF 0%,#0E7FC0 50%,#0AA6A6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.svc-page .flow{stroke-dasharray:8 24;animation:flow 2.8s linear infinite}
.svc-page .pulse{animation:pulse 2.4s ease-in-out infinite}
@media (max-width: 760px){.svc-page .hide-sm{display:none !important}.svc-page .wh-hero{padding-top:56px !important;padding-bottom:64px !important}.svc-page section > div{padding-top:72px !important;padding-bottom:72px !important}}