:root{
  --color-brand-navy-900:#002344;
  --color-brand-navy-800:#00335A;
  --color-brand-blue-700:#0069A8;
  --color-brand-cyan-500:#00A9E8;
  --color-brand-cyan-400:#21C5F3;
  --color-brand-green-500:#08C86A;
  --color-brand-green-400:#25E27F;

  --color-text:#071827;
  --color-text-secondary:#40566A;
  --color-text-muted:#718397;
  --color-border:#DFE8EF;
  --color-surface-subtle:#F7FBFD;
  --color-surface:#FFFFFF;

  --color-success:#078A4B;   --color-success-bg:#E8F8F0;
  --color-info:#087CBF;      --color-info-bg:#E8F5FC;
  --color-warning:#B76A00;   --color-warning-bg:#FFF4DF;
  --color-danger:#C23B46;    --color-danger-bg:#FDECEE;

  --gradient-brand: linear-gradient(135deg, #0069A8 0%, #00A9E8 52%, #08C86A 100%);
  --gradient-hero:  linear-gradient(135deg, #002344 0%, #004E7C 55%, #007FB6 100%);
  --gradient-soft:  linear-gradient(135deg, #EEF9FD 0%, #F2FCF7 100%);

  --font-sans: "Noto Sans Thai", "Inter", Arial, Tahoma, sans-serif;
  --container-max: 1200px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,35,68,.06);
  --shadow-md: 0 12px 32px rgba(0,35,68,.10);
  --shadow-lg: 0 24px 64px rgba(0,35,68,.14);
}

html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.7;
}
.container{ max-width: var(--container-max); }

h1,h2,h3,h4{ color: var(--color-brand-navy-900); font-weight:700; }
p{ color: var(--color-text-secondary); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--color-info-bg); color: var(--color-brand-blue-700);
  font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:.4rem .9rem; border-radius: var(--radius-pill);
}
.text-gradient{
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.hero-title{ font-size: clamp(2.1rem, 4.5vw, 3.5rem); line-height:1.16; }
.section-title{ font-size: clamp(1.6rem, 3vw, 2.375rem); line-height:1.25; }
@media (min-width: 768px){ .text-nowrap-lg{ white-space:nowrap; } }
.section-lead{ max-width:680px; }
.section-pad{ padding-block: clamp(56px, 8vw, 112px); }

/* ===== Navigation ===== */
.navbar-waya{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  min-height:76px;
  transition: box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.navbar-waya.is-scrolled{ box-shadow: var(--shadow-sm); border-bottom-color: var(--color-border); }
.navbar-brand-waya{ font-weight:700; font-size:1.35rem; color: var(--color-brand-navy-900) !important; }

.brand-mark-nav{
  display:inline-flex; align-items:center; height:44px; flex:none;
}
.brand-mark-nav img{ height:100%; width:auto; object-fit:contain; }

.brand-mark-footer{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  height:56px; padding:8px 12px; background:#fff; border-radius:12px; box-shadow: var(--shadow-sm);
}
.brand-mark-footer img{ height:100%; width:auto; object-fit:contain; }
.nav-link-waya{ color: var(--color-text-secondary) !important; font-weight:600; font-size:15px; }
.nav-link-waya:hover, .nav-link-waya.active{ color: var(--color-brand-blue-700) !important; }

.lang-switch{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--color-border); border-radius: var(--radius-pill); background:#fff;
}
.lang-btn{
  border:none; background:transparent; font-size:13px; font-weight:700; color: var(--color-text-secondary);
  padding:.3rem .7rem; border-radius: var(--radius-pill); line-height:1; transition: background-color .18s ease, color .18s ease;
}
.lang-btn.active{ background: var(--gradient-brand); color:#fff; }

/* ===== Buttons ===== */
.btn-waya-primary{
  background: var(--gradient-brand); border:none; color:#fff; font-weight:600; font-size:16px;
  padding: .75rem 1.5rem; border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-waya-primary:hover{ color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-waya-secondary{
  background:#fff; color: var(--color-brand-blue-700); font-weight:600; font-size:16px;
  padding: .75rem 1.5rem; border-radius:12px; border:1px solid #9CCFE5;
  transition: background-color .18s ease;
}
.btn-waya-secondary:hover{ background: #EEF9FD; color: var(--color-brand-blue-700); }
.btn-waya-light{
  background:#fff; color: var(--color-brand-navy-900); font-weight:600; font-size:16px;
  padding: .75rem 1.5rem; border-radius:12px; border:1px solid #fff;
}
.btn-waya-light:hover{ background:#EEF5F9; color: var(--color-brand-navy-900); }
.btn-waya-outline-light{
  background:transparent; color:#fff; font-weight:600; font-size:16px;
  padding: .75rem 1.5rem; border-radius:12px; border:1px solid rgba(255,255,255,.5);
  transition: background-color .18s ease, border-color .18s ease;
}
.btn-waya-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.link-waya{ color: var(--color-brand-blue-700); font-weight:600; text-decoration:none; }
.link-waya:hover{ text-decoration:underline; }

/* ===== Hero ===== */
.hero-section{ background: var(--gradient-soft); overflow:hidden; }
.device-cue{ color: var(--color-text-muted); font-size:14px; font-weight:500; }
.device-cue i{ color: var(--color-brand-blue-700); margin-inline-end:4px; }

.hero-visual{ position:relative; padding: 24px; }
.mock-window{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border:1px solid var(--color-border); overflow:hidden;
}
.mock-window-bar{
  display:flex; gap:6px; padding:12px 16px; background:var(--color-surface-subtle);
  border-bottom:1px solid var(--color-border);
}
.mock-window-bar span{ width:10px; height:10px; border-radius:50%; background:var(--color-border); }
.mock-card{
  border:1px solid var(--color-border); border-radius: var(--radius-md); padding:16px;
  background:#fff; height:100%;
}
.mock-card .icon-chip{
  width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--color-info-bg); color: var(--color-brand-blue-700); font-size:18px;
}
.status-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:.25rem .6rem; border-radius: var(--radius-pill);
}
.status-pill.success{ background: var(--color-success-bg); color: var(--color-success); }
.status-pill.warning{ background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill.info{ background: var(--color-info-bg); color: var(--color-info); }

.mock-flow{ display:flex; align-items:center; gap:6px; margin-top:14px; }
.mock-flow .dot{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; flex:none; }
.mock-flow .dot.done{ background: var(--color-brand-green-500); }
.mock-flow .dot.current{ background: var(--color-brand-cyan-500); }
.mock-flow .dot.next{ background: var(--color-border); color: var(--color-text-muted); }
.mock-flow .bar{ height:2px; flex:1; background: var(--color-border); }
.mock-flow .bar.done{ background: var(--color-brand-green-400); }

.mock-mobile{
  position:absolute; width:150px; right:-6px; bottom:-24px;
  background:#fff; border-radius: 18px; box-shadow: var(--shadow-lg); border:1px solid var(--color-border);
  padding:10px; display:none;
}
.mock-badge-float{
  position:absolute; top:-16px; left:18px; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding:8px 14px; display:none;
}
@media (min-width: 768px){
  .mock-mobile{ display:block; }
  .mock-badge-float{ display:flex; align-items:center; gap:6px; }
}

/* ===== Sections ===== */
.bg-subtle{ background: var(--color-surface-subtle); }

.icon-circle{
  width:52px; height:52px; border-radius: var(--radius-md); display:inline-flex; align-items:center; justify-content:center;
  background: var(--color-info-bg); color: var(--color-brand-blue-700); font-size:22px; flex:none;
}
.icon-circle.warn{ background: var(--color-warning-bg); color: var(--color-warning); }

.card-waya{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; height:100%; transition: border-color .18s ease, transform .18s ease;
}
.card-waya:hover{ border-color: var(--color-brand-cyan-500); transform: translateY(-4px); }
.card-waya ul, .feature-visual ul{
  color: var(--color-text-secondary); padding-left:1.1rem; margin-bottom:0;
}
.card-waya ul li, .feature-visual ul li{ margin-bottom:4px; }
.card-waya ul li:last-child, .feature-visual ul li:last-child{ margin-bottom:0; }

.tag-chip{
  display:inline-block; font-size:13px; font-weight:600; color: var(--color-brand-blue-700);
  background: var(--color-info-bg); border-radius: var(--radius-pill); padding:.3rem .7rem; margin:.15rem;
}

.feature-visual{
  background: var(--gradient-soft); border-radius: var(--radius-xl); border:1px solid var(--color-border);
  padding: 32px; height:100%; display:flex; flex-direction:column; justify-content:center; min-height:220px;
}
.feature-visual .icon-circle{ background:#fff; box-shadow: var(--shadow-sm); }

/* Policy Control demo screens */
.demo-screen-card{
  background: var(--gradient-soft); border:1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 32px;
}
.demo-screen-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.demo-tab-btn{
  border:1px solid var(--color-border); background:#fff; color: var(--color-text-secondary);
  font-size:13px; font-weight:600; padding:.45rem .9rem; border-radius: var(--radius-pill); cursor:pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.demo-tab-btn:hover{ border-color: var(--color-brand-cyan-500); color: var(--color-brand-blue-700); }
.demo-tab-btn.active{ background: var(--color-brand-blue-700); border-color: var(--color-brand-blue-700); color:#fff; }

/* Dot indicators (instead of labelled tabs) */
.demo-screen-dots{ justify-content:center; gap:10px; margin-top:16px; }
.demo-screen-dots .demo-tab-btn{
  width:10px; height:10px; padding:0; border-radius:50%;
  font-size:0; line-height:0; overflow:hidden;
  border:1px solid var(--color-border); background:#fff;
}
.demo-screen-dots .demo-tab-btn:hover{ border-color: var(--color-brand-cyan-500); background: var(--color-brand-cyan-500); }
.demo-screen-dots .demo-tab-btn.active{ background: var(--color-brand-blue-700); border-color: var(--color-brand-blue-700); }

.demo-screen-card .mock-window{ border-radius: var(--radius-lg); position:relative; }
.demo-screen-card .carousel-item img{ display:block; width:100%; height:auto; }
.demo-screen-card .mock-window img{ cursor: zoom-in; }

/* Zoom affordance on the demo window */
.demo-zoom-btn{
  position:absolute; top:12px; right:12px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  border:none; border-radius: var(--radius-pill);
  background: rgba(15,32,51,.6); color:#fff;
  font-size:12px; font-weight:600; line-height:1; padding:.45rem .75rem;
  cursor:pointer; opacity:0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.demo-screen-card .mock-window:hover .demo-zoom-btn,
.demo-zoom-btn:focus-visible{ opacity:1; transform: translateY(0); }
.demo-zoom-btn:hover{ background: rgba(15,32,51,.85); }
@media (hover: none){ .demo-zoom-btn{ opacity:1; transform:none; } }

/* ===== Lightbox / image preview ===== */
.lightbox{
  position:fixed; inset:0; z-index:1080;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(12px, 4vw, 56px);
  background: rgba(3,14,26,.88); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-stage{
  max-width:1400px; width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox.is-zoomed .lightbox-stage{ display:block; width:100%; height:100%; max-width:none; overflow:auto; }
.lightbox-img{
  display:block; margin:auto;
  max-width:100%; max-height: calc(100vh - clamp(24px, 8vw, 112px));
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  background:#fff; cursor: zoom-in; touch-action:none; user-select:none; -webkit-user-drag:none;
}
.lightbox.is-zoomed .lightbox-img{ max-width:none; max-height:none; cursor: grab; }
.lightbox.is-zoomed .lightbox-img:active{ cursor: grabbing; }
.lightbox-close, .lightbox-nav{
  position:absolute; z-index:2; border:none; cursor:pointer;
  background: rgba(255,255,255,.92); color: var(--color-brand-navy-900);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
}
.lightbox-close{ top:16px; right:16px; width:40px; height:40px; border-radius:50%; font-size:22px; }
.lightbox-nav{ top:50%; transform: translateY(-50%); width:48px; height:48px; border-radius:50%; font-size:24px; }
.lightbox-nav.prev{ left:16px; } .lightbox-nav.next{ right:16px; }
.lightbox-close:hover, .lightbox-nav:hover{ background:#fff; }
.lightbox-nav[hidden]{ display:none; }
.lightbox-caption{
  position:absolute; left:0; right:0; bottom:16px; text-align:center;
  color:#D7E6F0; font-size:13px; font-weight:500; padding-inline:64px; pointer-events:none;
}
@media (max-width: 575px){
  .lightbox-close{ top:8px; right:8px; }
  .lightbox-nav.prev{ left:4px; } .lightbox-nav.next{ right:4px; }
  .lightbox-caption{ padding-inline:16px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-img, .demo-zoom-btn{ transition:none; }
}
.demo-screen-card .carousel-control-prev, .demo-screen-card .carousel-control-next{ width:44px; opacity:0; transition:opacity .18s ease; }
.demo-screen-card .mock-window:hover .carousel-control-prev,
.demo-screen-card .mock-window:hover .carousel-control-next{ opacity:1; }
.demo-screen-card .carousel-control-prev-icon, .demo-screen-card .carousel-control-next-icon{
  background-color: rgba(15,32,51,.55); border-radius:50%; padding:10px; background-size:50%;
}

/* Steps / How it works */
.steps-row{ position:relative; }
.steps-row::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px; background: var(--color-border);
  display:none;
}
@media (min-width: 992px){ .steps-row::before{ display:block; } }
.step-num{
  width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--color-brand-cyan-500);
  color: var(--color-brand-blue-700); font-weight:700; font-size:18px;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1; margin-inline:auto;
}

/* Benefits tabs */
.nav-tabs-waya .nav-link{
  border:none; color: var(--color-text-secondary); font-weight:600; padding:.85rem 1.25rem; border-radius:0;
  border-bottom: 3px solid transparent;
}
.nav-tabs-waya .nav-link.active{ color: var(--color-brand-navy-900); border-bottom-color: var(--color-brand-cyan-500); background:transparent; }
.accordion-waya .accordion-button{ font-weight:600; color: var(--color-brand-navy-900); }
.accordion-waya .accordion-button:not(.collapsed){ background: var(--color-info-bg); color: var(--color-brand-blue-700); box-shadow:none; }
.accordion-waya .accordion-button:focus{ box-shadow:none; }

/* Reports (dark) */
.section-navy{ background: var(--color-brand-navy-900); color:#fff; }
.section-navy p{ color:#C7D8E5; }
.section-navy h2, .section-navy h3{ color:#fff; }
.report-list li{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.report-list li i{ color: var(--color-brand-cyan-400); font-size:20px; margin-top:2px; }

.chart-mock{ background:#00335A; border-radius: var(--radius-lg); padding:24px; border:1px solid rgba(255,255,255,.12); }
.chart-bars{ display:flex; align-items:flex-end; gap:10px; height:140px; }
.chart-bars .bar{ flex:1; border-radius:6px 6px 0 0; background: linear-gradient(180deg, var(--color-brand-cyan-400), var(--color-brand-blue-700)); }

/* Trust checklist */
.check-list li{ display:flex; gap:10px; padding:10px 0; }
.check-list li i{ color: var(--color-success); font-size:18px; margin-top:3px; }

/* Final CTA */
.cta-section{ background: var(--gradient-hero); color:#fff; position:relative; overflow:hidden; }
.cta-section::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(0,169,232,.18), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(8,200,106,.14), transparent 45%);
}
.cta-section .container{ position:relative; }
.cta-section p{ color:#D7E6F0; }

/* Footer */
.footer-waya{ background: var(--color-brand-navy-900); color:#C7D8E5; }
.footer-waya a{ color:#C7D8E5; text-decoration:none; }
.footer-waya a:hover{ color: var(--color-brand-cyan-400); }
.footer-waya h6{ color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }
.line-qr{ width:88px; height:88px; border-radius: var(--radius-md); background:#fff; padding:6px; box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card-waya, .btn-waya-primary{ transition:none; }
}