*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}:root{--font-serif:'Prompt','Playfair Display',Georgia,serif;--font-sans:'Prompt','Sarabun',system-ui,sans-serif;--font-thai:'Sarabun',Tahoma,sans-serif;--bg-navy:#0f172a;--bg-deep:#080e1f;--surface:rgba(255,255,255,0.05);--surface-hi:rgba(255,255,255,0.09);--blue:#3b82f6;--blue-light:#60a5fa;--text-primary:#ffffff;--text-body:#f1f5f9;--text-muted:rgba(255,255,255,0.55);}body{font-family:var(--font-sans);font-weight:400;font-size:18px;background:var(--bg-navy);min-height:100vh;color:var(--text-body);overflow-x:hidden;}h1,h2,h3,h4,h5,h6,.title,.headline,[class*="title"],[class*="headline"]{color:var(--text-primary) !important;}h1 span,h2 span,h3 span{color:rgba(255,255,255,0.9) !important;}h2{border-left-color:var(--blue) !important;}[style*="rgba(255,255,255,0.98)"]{color:#0f172a !important;}[style*="rgba(255,255,255,0.98)"] h1,[style*="rgba(255,255,255,0.98)"] h2,[style*="rgba(255,255,255,0.98)"] h3,[style*="rgba(255,255,255,0.98)"] h4,[style*="rgba(255,255,255,0.98)"] h5,[style*="rgba(255,255,255,0.98)"] p,[style*="rgba(255,255,255,0.98)"] span,[style*="rgba(255,255,255,0.98)"] li,[style*="rgba(255,255,255,0.98)"] div{color:#0f172a !important;}.font-serif{font-family:var(--font-serif) !important;}.font-sans{font-family:var(--font-sans) !important;}.font-thai{font-family:var(--font-thai) !important;}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em;line-height:1.05;}h1{font-weight:700;}h2,h3{font-weight:600;}h4,h5,h6{font-weight:600;}p{line-height:1.6;}p:lang(th),span:lang(th),li:lang(th){font-family:var(--font-thai);font-weight:300;line-height:1.85;}.airy{letter-spacing:0.05em;}.section-rule{border-top:1px solid rgba(255,255,255,0.08);}@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes spin{to{transform:rotate(360deg);}}.page-enter{animation:fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both;}::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--bg-navy);}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}.hscroll-strip{overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--blue-light) transparent;}.hscroll-strip::-webkit-scrollbar{height:4px;}.hscroll-strip::-webkit-scrollbar-track{background:transparent;}.hscroll-strip::-webkit-scrollbar-thumb{background:var(--blue-light);border-radius:4px;}.glass{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 30px rgba(0,0,0,0.2);}.glass-md{background:rgba(255,255,255,0.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);}.glass-blue{background:linear-gradient(135deg,rgba(59,130,246,0.1) 0%,rgba(37,99,235,0.05) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(59,130,246,0.2);}.btn-primary{background:var(--blue);color:#ffffff;border:none;border-radius:999px;padding:16px 40px;font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.25s ease;}.btn-primary:hover{background:#2563eb;box-shadow:0 0 0 4px rgba(59,130,246,0.3);}.btn-outline{background:rgba(255,255,255,0.08);color:#ffffff;border:1px solid rgba(255,255,255,0.18);border-radius:999px;padding:16px 40px;font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.25s ease;}.btn-outline:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.3);}.nav-mobile-btn svg{stroke:#ffffff !important;fill:none;}input,textarea,select{background:rgba(255,255,255,0.07) !important;color:#ffffff !important;border:1px solid rgba(255,255,255,0.15) !important;border-radius:14px;}input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.55) !important;}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(59,130,246,0.2);}@media (max-width:768px){body{font-size:16px;}.rs-sec{padding:80px 24px !important;}.rg-hero{grid-template-columns:1fr !important;}.rg-2{grid-template-columns:1fr !important;}}
/* ── Nav: desktop show / mobile hide ─────────────────────────────────── */
.nav-desktop{display:flex;}.nav-mobile-btn{display:flex;}
@media (max-width:1023px){.nav-desktop{display:none !important;}}
@media (min-width:1024px){.nav-mobile-btn{display:none !important;}}

/* ── Mobile menu overlay ─────────────────────────────────────────────── */
.mobile-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,11,26,0.98);backdrop-filter:blur(60px);-webkit-backdrop-filter:blur(60px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;}

/* ── Border utilities ────────────────────────────────────────────────── */
.b-subtle{border:1px solid rgba(255,255,255,0.08);}.b-blue{border:1px solid rgba(59,130,246,0.2);}

/* ── Lift hover ──────────────────────────────────────────────────────── */
.lift{transition:transform 0.3s,box-shadow 0.3s;}.lift:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.4);}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}

/* ── Responsive fixes ────────────────────────────────────────────────── */
@media (max-width:768px){
  .rp-page{padding:80px 20px 60px !important;}
  .rt-grid-hero,.rg-hero{grid-template-columns:1fr !important;gap:32px !important;}
  .rt-grid-2,.rg-2{grid-template-columns:1fr !important;gap:16px !important;}
  .rg-3{grid-template-columns:1fr !important;gap:12px !important;}
  .rg-4{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .rhide{display:none !important;}
  .contact-card{padding:32px 24px !important;border-radius:32px !important;}
}

/* ── Mobile perf: kill expensive effects on slow devices ────────────── */
@media (max-width:768px){
  .glass,.glass-md,.glass-blue{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  .rcard-synergy{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}
img{content-visibility:auto;}

/* ── Retirement Planner (rp-*) ───────────────────────────────────────── */
#rp-wrap{max-width:680px;margin:0 auto;padding:24px 20px 80px;}

/* Progress bar */
.rp-progress-section{margin-bottom:32px;padding-top:8px;}
.rp-progress-bar{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:10px;}
.rp-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:14px;font-weight:700;border:2px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.05);flex-shrink:0;transition:all 0.25s;}
.rp-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(59,130,246,0.25);}
.rp-dot.completed{background:rgba(59,130,246,0.2);border-color:var(--blue);color:var(--blue-light);}
.rp-progress-label{text-align:center;font-family:var(--font-sans);font-size:14px;letter-spacing:0.05em;color:rgba(255,255,255,0.6);text-transform:uppercase;}

/* Step content */
.rp-step-title{font-family:var(--font-thai);font-size:22px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.4;}
.rp-step-sub{font-family:var(--font-thai);font-size:15px;color:rgba(255,255,255,0.55);margin-bottom:28px;line-height:1.7;}
.rp-hero-box{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:32px;padding:32px 28px;margin-bottom:24px;}
.rp-emotional{font-family:var(--font-thai);font-size:16px;color:rgba(255,255,255,0.65);line-height:1.85;margin-bottom:28px;}

/* Form elements */
.rp-form-group{margin-bottom:28px;}
.rp-label{font-family:var(--font-thai);font-size:14px;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:12px;}
.rp-input{width:100%;padding:14px 18px;font-family:var(--font-thai);font-size:17px;font-weight:600;color:#fff;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:16px;outline:none;transition:border-color 0.2s;}
.rp-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,0.2);}
.rp-helper{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.6);margin-top:6px;}
.rp-slider-wrap{padding:4px 0;}
.rp-slider-val{font-family:var(--font-sans);font-size:28px;font-weight:700;color:#fff;text-align:center;margin-bottom:12px;}

/* Card grid (dream selection) */
.rp-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rp-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:20px 16px;cursor:pointer;transition:all 0.2s;text-align:center;}
.rp-card:hover{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3);}
.rp-card.rp-selected{background:rgba(59,130,246,0.15);border-color:var(--blue);}
.rp-card-emoji{font-size:28px;margin-bottom:8px;}
.rp-card-text{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.75);line-height:1.5;}
.rp-checked{color:var(--blue-light) !important;}

/* Radio options */
.rp-radio-group{display:flex;flex-direction:column;gap:10px;}
.rp-radio-opt{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;cursor:pointer;transition:all 0.2s;font-family:var(--font-thai);font-size:15px;color:rgba(255,255,255,0.75);}
.rp-radio-opt:hover,.rp-radio-opt.rp-selected{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.35);}
.rp-radio-label{font-family:var(--font-thai);font-size:14px;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:10px;}

/* Pillars */
.rp-pillars-grid{display:flex;flex-direction:column;gap:12px;}
.rp-pillar{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;cursor:pointer;transition:all 0.2s;}
.rp-pillar:hover,.rp-pillar.rp-selected{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.35);}
.rp-pillar-cb{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all 0.2s;}
.rp-pillar.rp-selected .rp-pillar-cb{background:var(--blue);border-color:var(--blue);}
.rp-pillar-hdr{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.rp-pillar-emoji{font-size:20px;}
.rp-pillar-title{font-family:var(--font-thai);font-size:15px;font-weight:700;color:#fff;}
.rp-pillar-text{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.5);line-height:1.55;}

/* Results */
.rp-results{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;}
.rp-result-row{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:18px 20px;}
.rp-result-label{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.45);letter-spacing:0.05em;margin-bottom:4px;}
.rp-result-val{font-family:var(--font-sans);font-size:26px;font-weight:700;color:#fff;}
.rp-result-note{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.6);margin-top:4px;}
.rp-highlight .rp-result-label{color:var(--blue-light);}
.rp-highlight .rp-result-val{color:var(--blue-light);}
.rp-bar{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;margin:12px 0;}
.rp-bar-have{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:4px;transition:width 0.6s;}
.rp-bar-need{height:100%;background:linear-gradient(90deg,#ef4444,#dc2626);border-radius:4px;}

/* Summary */
.rp-summary-box{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:20px 22px;margin-bottom:16px;}
.rp-summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.rp-summary-row:last-child{border-bottom:none;}
.rp-summary-lbl{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.5);}
.rp-summary-val{font-family:var(--font-sans);font-size:14px;font-weight:700;color:#fff;}
.rp-assumptions{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.6);line-height:1.7;margin-top:16px;}

/* Products */
.rp-products-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.rp-product{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:18px 20px;cursor:pointer;transition:all 0.2s;}
.rp-product:hover,.rp-product.rp-selected{border-color:rgba(59,130,246,0.4);background:rgba(59,130,246,0.08);}
.rp-product-cb{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.25);display:inline-flex;align-items:center;justify-content:center;margin-right:10px;vertical-align:middle;transition:all 0.2s;}
.rp-product.rp-selected .rp-product-cb{background:var(--blue);border-color:var(--blue);}
.rp-product-name{font-family:var(--font-thai);font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;}
.rp-product-tagline{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:8px;}
.rp-product-meta{font-family:var(--font-sans);font-size:14px;color:var(--blue-light);letter-spacing:0.05em;}
.rp-product-benefits{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.rp-tag{display:inline-block;padding:3px 10px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--blue-light);border-radius:20px;font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:0.08em;}
.rp-premium{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.6);margin-top:8px;}
.rp-selected-prods{margin-bottom:16px;}

/* Select items */
.rp-select{display:flex;flex-direction:column;gap:8px;}
.rp-sel-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:16px;}
.rp-sel-icon{font-size:22px;flex-shrink:0;}
.rp-sel-name{font-family:var(--font-thai);font-size:14px;font-weight:700;color:#fff;}
.rp-sel-tag{font-family:var(--font-sans);font-size:14px;color:var(--blue-light);letter-spacing:0.08em;}

/* CTA & buttons */
.rp-cta-box{background:rgba(59,130,246,0.07);border:1px solid rgba(59,130,246,0.2);border-radius:28px;padding:28px 24px;margin-bottom:24px;text-align:center;}
.rp-cta-btn{background:var(--blue);color:#fff;border:none;border-radius:999px;padding:14px 32px;font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;}
.rp-cta-btn:hover{background:#2563eb;box-shadow:0 0 0 4px rgba(59,130,246,0.3);}
.rp-suggest-btn{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.15);border-radius:999px;padding:12px 24px;font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;margin-top:10px;}
.rp-suggest-btn:hover{background:rgba(255,255,255,0.1);}
.rp-btn-group{display:flex;gap:12px;margin-top:32px;}
.rp-btn{flex:1;padding:15px;border-radius:999px;font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;border:none;}
.rp-btn-back{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15);}
.rp-btn-back:hover{background:rgba(255,255,255,0.12);}
.rp-btn-next{background:var(--blue);color:#fff;}
.rp-btn-next:hover{background:#2563eb;box-shadow:0 0 0 4px rgba(59,130,246,0.3);}

/* PDPA */
.rp-pdpa-box{display:flex;align-items:flex-start;gap:12px;padding:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;cursor:pointer;margin-bottom:20px;}
.rp-pdpa-label{font-family:var(--font-thai);font-size:14px;color:rgba(255,255,255,0.55);line-height:1.65;}

@media (max-width:480px){
  .rp-card-grid{grid-template-columns:1fr !important;}
  .rp-dot{width:30px;height:30px;font-size:14px;}
  .rp-progress-bar{gap:4px;}
}

/* ── Additional responsive patches ──────────────────────────────────── */
@media (max-width:768px){
  /* Page-wrap: collapse horizontal padding on all pages */
  .page-wrap{padding-left:20px !important;padding-right:20px !important;}
  /* Hero sections with large side padding (synergy, blue-star hero banners) */
  [style*="padding: 140px 72px"]{padding:80px 20px 48px !important;}
  [style*="padding: 80px 40px"]{padding:48px 20px !important;}
  [style*="padding: 56px 60px"]{padding:28px 20px !important;}
  [style*="padding: 64px 72px"]{padding:32px 20px !important;}
  [style*="padding: 72px 40px"]{padding:48px 20px !important;}
  /* Sidebar sticky → normal flow on mobile */
  [style*="position: sticky"]{position:relative !important;top:auto !important;}
  /* Inline grids: 1fr 300px sidebar → single column */
  [style*="grid-template-columns: 1fr 300px"]{grid-template-columns:1fr !important;}
  /* 4-col stats grids without class → 2 col */
  [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:1fr 1fr !important;}
  /* 3-col grids without class → 1 col */
  [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr !important;}
  /* comparison table: horizontal scroll */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Blue Star Universe cards in synergy (rg-2) already handled, but extra safety */
  .rg-2[style*="gap: 16px"]{gap:12px !important;}
  /* Reduce borderRadius on large cards for mobile feel */
  [style*="border-radius: 72px"]{border-radius:32px !important;}
}

@media (max-width:480px){
  /* Extra small: 4-col → 1 col */
  [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:1fr 1fr !important;}
  /* Blue star X comparison table text */
  .rg-2{gap:12px !important;}
}

/* Coffee Talk home section responsive */
@media (max-width:768px){
  .rg-coffee-home{grid-template-columns:1fr !important;}
  .rg-coffee-home > div:last-child{display:none !important;}
}