:root{--deep:#0b2f8f;--blue:#1450dc;--sky:#25b5ff;--cyan:#6fe0ff;--ink:#0f2354;--text:#2a3b66}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:"Prompt","Noto Sans Thai",Tahoma,system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.9;background:#eaf4ff;position:relative;overflow-x:hidden}
/* aurora background */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#e8f3ff,#f4f9ff)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.b1{width:520px;height:520px;left:-120px;top:10%;background:#7fd3ff}
.b2{width:560px;height:560px;right:-160px;top:35%;background:#9fb4ff}
.b3{width:480px;height:480px;left:25%;bottom:-160px;background:#6ee7f5}
/* HERO */
.hero{position:relative;padding:38px 18px 70px;background:radial-gradient(500px 300px at 15% 10%,rgba(111,224,255,.55),transparent 70%),radial-gradient(520px 320px at 90% 80%,rgba(130,120,255,.45),transparent 70%),linear-gradient(140deg,#0a2a86,#1450dc 55%,#1f8ff0);border-radius:0 0 46px 46px}
.hero-card{max-width:900px;margin:0 auto;padding:34px 38px 38px;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);border-radius:30px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(5,20,90,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.hero-logo{display:inline-block;margin-bottom:22px}
.hero-logo img{display:block;height:52px;width:auto;filter:drop-shadow(0 4px 14px rgba(111,224,255,.7))}
.hero h1{font-weight:600;font-size:clamp(1.55rem,4.2vw,2.5rem);line-height:1.4;margin:0 0 16px;text-shadow:0 3px 14px rgba(0,20,100,.35)}
.lead{margin:0 0 22px;color:#e8f2ff;font-weight:300;font-size:1.04rem}
.lead a{color:#bff0ff}.lead strong{color:#fff;font-weight:500}
.cta-wrap{margin:0}
.btn-img{display:inline-block;margin-left:-14px;transition:transform .25s,filter .25s}
.btn-img img{display:block;width:300px;max-width:82vw;height:auto}
.btn-img:hover,.btn-img:focus{transform:translateY(-3px) scale(1.03);filter:brightness(1.08)}
/* GLASS PANELS – staggered */
.wrap{max-width:980px;margin:0 auto;padding:44px 18px 30px}
.glass{position:relative;width:88%;margin:0 0 30px;padding:30px 34px 14px;background:rgba(255,255,255,.58);border:1.5px solid rgba(255,255,255,.9);border-radius:26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(20,80,220,.16),inset 0 1px 0 #fff}
.glass.intro,.glass.faq{width:100%}
.glass.r{margin-left:auto}
h2{display:flex;gap:14px;align-items:center;margin:0 0 16px;font-weight:600;font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.45;background:linear-gradient(90deg,var(--deep),var(--blue) 55%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
h2 .ico{flex:none;display:grid;place-items:center;width:52px;height:52px;font-size:1.5rem;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#cfeeff 65%,#9fdcff);box-shadow:0 0 0 3px rgba(255,255,255,.8),0 6px 18px rgba(37,181,255,.55);-webkit-text-fill-color:initial}
h2::after{content:none}
h3{display:flex;gap:10px;align-items:center;font-weight:500;font-size:1.14rem;line-height:1.5;color:var(--blue);margin:24px 0 8px}
h3::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(37,181,255,.25),0 0 12px var(--sky)}
h3 .ico{flex:none}
h3.q{color:var(--ink);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);border-radius:14px;padding:8px 14px;box-shadow:0 4px 14px rgba(20,80,220,.1)}
h3.q::before{display:none}
p{margin:0 0 15px}
strong{color:var(--ink);font-weight:500}
a{color:var(--blue)}
/* numbered glass tiles */
ul{list-style:none;counter-reset:n;margin:8px 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
li{counter-increment:n;position:relative;padding:10px 14px 10px 58px;background:rgba(255,255,255,.7);border:1px solid #fff;border-radius:16px;line-height:1.65;box-shadow:0 6px 16px rgba(20,80,220,.09)}
li::before{content:counter(n,decimal-leading-zero);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;font-weight:500;font-size:.82rem;box-shadow:0 4px 10px rgba(20,80,220,.35)}
.fig{margin:20px 0 26px}
.fig img{display:block;width:100%;height:auto;border-radius:20px;border:3px solid rgba(255,255,255,.95);box-shadow:0 16px 36px rgba(20,80,220,.3)}
/* FOOTER */
.foot{margin-top:20px;padding:50px 18px 28px;color:#e2eeff;background:linear-gradient(150deg,#0a2a86,#1450dc 60%,#1f8ff0);border-radius:46px 46px 0 0;text-align:center}
.foot-in{max-width:900px;margin:0 auto}
.foot-logo{height:48px;width:auto;margin-bottom:22px;filter:drop-shadow(0 4px 12px rgba(111,224,255,.6))}
.contact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.contact li{counter-increment:none;background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.35);border-radius:18px;padding:12px 16px;display:flex;gap:12px;align-items:center;line-height:1.5;word-break:break-word;backdrop-filter:blur(10px);box-shadow:none}
.contact li::before{display:none}
.contact b{font-weight:400;font-size:1.35rem}
.contact a{color:#bff0ff}
.copy{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);font-size:.92rem;color:#c3dcff}
@media(max-width:760px){body{font-size:16px}.hero{padding:26px 12px 54px;border-radius:0 0 30px 30px}.hero-card{padding:24px 20px 28px;border-radius:24px}.hero-logo img{height:44px}.glass{width:100%;padding:24px 18px 10px;border-radius:22px}ul{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.foot{border-radius:30px 30px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn-img{transition:none}}
@supports not (backdrop-filter:blur(1px)){.glass{background:rgba(255,255,255,.9)}.hero-card{background:rgba(255,255,255,.18)}}