/* ════════════════════════════════════════════
   style.css — ReadyOnWeb
   ════════════════════════════════════════════ */

:root{
  --blue:#01a4e5; --navy:#0d3159;
  --blue-dark:#0189c5; --blue-light:#e6f6fd;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Sarabun',sans-serif;background:#f0f9ff;color:#0d3159;overflow-x:hidden;}

/* ── CURSOR GLOW ── */
#cg{width:340px;height:340px;background:radial-gradient(circle,rgba(1,164,229,.1) 0%,transparent 70%);
    border-radius:50%;position:fixed;pointer-events:none;z-index:1;
    transform:translate(-50%,-50%);transition:left .05s,top .05s;}

/* ── OFFCANVAS NAV ── */
#nav-bar{position:fixed;top:0;left:0;right:0;z-index:200;
         background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
         border-bottom:1px solid rgba(1,164,229,.15);transition:box-shadow .3s;}
#nav-bar.scrolled{box-shadow:0 2px 20px rgba(13,49,89,.1);}

/* Offcanvas drawer */
#oc-overlay{position:fixed;inset:0;background:rgba(13,49,89,.45);z-index:300;
            opacity:0;pointer-events:none;transition:opacity .3s;}
#oc-overlay.open{opacity:1;pointer-events:auto;}
#oc-drawer{position:fixed;top:0;right:0;bottom:0;width:290px;max-width:85vw;
           background:#fff;z-index:400;transform:translateX(100%);
           transition:transform .35s cubic-bezier(.4,0,.2,1);
           display:flex;flex-direction:column;overflow-y:auto;}
#oc-drawer.open{transform:translateX(0);}
.oc-link{display:flex;align-items:center;gap:12px;padding:14px 24px;
         color:rgba(13,49,89,.7);font-size:1rem;font-weight:500;
         border-bottom:1px solid rgba(1,164,229,.08);transition:all .2s;}
.oc-link:hover,.oc-link.active-link{color:var(--blue);background:rgba(1,164,229,.05);}
.oc-link svg{flex-shrink:0;opacity:.6;}
.oc-link:hover svg,.oc-link.active-link svg{opacity:1;}

/* Hamburger → X morph */
.hb-line{display:block;width:22px;height:2px;background:var(--navy);
         border-radius:2px;transition:all .3s ease;transform-origin:center;}
#hb-btn.open .hb-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
#hb-btn.open .hb-line:nth-child(2){opacity:0;transform:scaleX(0);}
#hb-btn.open .hb-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Nav link desktop */
.nav-link{color:rgba(13,49,89,.6);font-size:.9rem;transition:color .2s;position:relative;padding-bottom:2px;}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
                 background:var(--blue);transition:width .25s;}
.nav-link:hover{color:var(--navy);}
.nav-link:hover::after{width:100%;}

/* ── HERO ── */
.hero-bg{
  background:
    radial-gradient(ellipse 70% 55% at 5% 10%,rgba(1,164,229,.18) 0%,transparent 55%),
    radial-gradient(ellipse 50% 45% at 95% 85%,rgba(13,49,89,.14) 0%,transparent 55%),
    linear-gradient(160deg,#0d3159 0%,#0f3d72 50%,#0d3159 100%);
}

/* ── GLASS ── */
.card-glass{background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);}

/* ── WHITE CARD ── */
.card-white{background:#fff;border:1px solid rgba(1,164,229,.18);transition:transform .3s,box-shadow .3s,border-color .3s;}
.card-white:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(1,164,229,.13);border-color:var(--blue);}

/* ── BUTTONS ── */
.btn-p{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
       box-shadow:0 4px 20px rgba(1,164,229,.4);transition:all .3s;display:inline-block;}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(1,164,229,.6);}
.btn-p:active{transform:translateY(0);}
.btn-ow{border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.9);transition:all .3s;}
.btn-ow:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff;}

/* ── PILLS ── */
.pill-b{background:rgba(1,164,229,.12);border:1px solid rgba(1,164,229,.3);color:var(--blue-dark);}
.pill-w{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9);}

/* ── STAT CARD ── */
.stat-card{background:rgba(1,164,229,.1);border:1px solid rgba(1,164,229,.22);}

/* ── GRADIENT TEXT ── */
.tg-b{background:linear-gradient(135deg,#01a4e5,#0d3159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tg-l{background:linear-gradient(135deg,#fff 20%,#b3e3f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── ORB ── */
.orb{background:radial-gradient(circle,rgba(1,164,229,.22) 0%,transparent 70%);
     border-radius:50%;filter:blur(50px);pointer-events:none;position:absolute;}

/* ── ANIMATIONS ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.af{animation:float 6s ease-in-out infinite;}
@keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.pulse-dot{animation:pdot 2.5s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.tw-cursor{display:inline-block;width:3px;height:1em;background:var(--blue);
           margin-left:3px;vertical-align:middle;animation:blink .9s step-end infinite;}
@keyframes scrollb{0%,100%{transform:translateY(0)}60%{transform:translateY(8px)}}
.scroll-dot{animation:scrollb 1.6s ease-in-out infinite;}
@keyframes fShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.shake{animation:fShake .3s ease;}

/* ── REVEAL ── */
.will-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.will-reveal.visible{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;} .d4{transition-delay:.4s;}

/* ── CHECKLIST ── */
.ci{position:relative;padding-left:1.4rem;}
.ci::before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:700;}

/* ── FAQ ── */
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-body.open{max-height:240px;}
.faq-icon{transition:transform .3s;}
.faq-icon.open{transform:rotate(45deg);}

/* ── SERVICE CARD ── */
.svc-card{cursor:pointer;transition:all .3s;}
.svc-card.active{background:var(--navy)!important;border-color:var(--navy)!important;}
.svc-card.active .svc-t{color:#fff!important;}
.svc-card.active .svc-d{color:rgba(255,255,255,.65)!important;}
.svc-card.active .icon-bg{background:rgba(1,164,229,.22)!important;border-color:rgba(1,164,229,.4)!important;}
.svc-card.active .ci{color:rgba(255,255,255,.75)!important;}
.svc-card.active .ci::before{color:var(--blue)!important;}
.svc-card.active .svc-hint{color:rgba(1,164,229,.7)!important;}

/* ── FORM ── */
.fi{background:#f8fcff;border:1.5px solid rgba(1,164,229,.2);border-radius:12px;
    padding:12px 16px;width:100%;color:var(--navy);
    transition:border-color .2s,box-shadow .2s,background .2s;
    font-family:'Sarabun',sans-serif;font-size:1rem;}
.fi:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,164,229,.12);}
.fi::placeholder{color:rgba(13,49,89,.3);}
.fi.is-error{border-color:#e53e3e!important;background:#fff8f8!important;box-shadow:0 0 0 3px rgba(229,62,62,.1)!important;}
.fi.is-ok{border-color:#16a34a!important;background:#f0fdf4!important;box-shadow:0 0 0 3px rgba(22,163,74,.08)!important;}
.field-err{font-size:.78rem;margin-top:.35rem;color:#e53e3e;display:flex;align-items:center;gap:.3rem;}
.field-err::before{content:"⚠";font-size:.8rem;}
.field-err.hidden{display:none!important;}
.optional-tag{display:inline-block;font-size:.68rem;font-weight:500;padding:1px 7px;
              border-radius:999px;margin-left:6px;vertical-align:middle;
              background:rgba(13,49,89,.07);color:rgba(13,49,89,.45);}
.fi-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);
         font-size:.9rem;pointer-events:none;}

/* ── BACK TO TOP ── */
#btt{position:fixed;bottom:28px;right:28px;z-index:100;width:44px;height:44px;
     border-radius:50%;background:var(--blue);color:#fff;
     display:flex;align-items:center;justify-content:center;
     box-shadow:0 4px 16px rgba(1,164,229,.45);opacity:0;pointer-events:none;
     transition:opacity .3s,transform .3s;cursor:pointer;}
#btt.show{opacity:1;pointer-events:auto;}
#btt:hover{transform:translateY(-3px);}