/* DSN Solution — Main stylesheet
   Structure: tokens → base → components → sections → responsive */


/* Design tokens */
:root {
  --orange: #ff5a0a;
  --orange-2: #ff7a15;
  --orange-soft: #fff2e9;
  --ink: #111827;
  --navy: #0d2538;
  --muted: #65707e;
  --line: #e8ebef;
  --green: #17a461;
  --blue: #2378de;
  --purple: #7d38d3;
  --white: #fff;
  --shadow: 0 14px 38px rgba(26, 35, 48, .10);
  --soft-shadow: 0 8px 24px rgba(26, 35, 48, .07);
  --radius: 18px;
}

/* Base and shared layout */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Noto Sans Lao", "Phetsarath OT", "Leelawadee UI", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.container { width: min(1420px, calc(100% - 48px)); margin-inline: auto; }
[id] { scroll-margin-top: 92px; }
:focus-visible { outline: 3px solid rgba(255, 90, 10, .38); outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; color: #fff; background: var(--navy); border-radius: 8px; transition: top .2s ease; }
.skip-link:focus { top: 12px; }

/* Header and navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #f0d9cc;
  backdrop-filter: blur(16px);
}
.nav { height: 74px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 320px; }
.brand-mark { color: var(--orange); font-weight: 950; font-size: 34px; letter-spacing: -3px; line-height: .8; }
.brand-mark small { display: block; color: var(--ink); font-size: 12px; letter-spacing: .8px; margin-left: 4px; margin-top: 8px; }
.brand-divider { width: 1px; height: 44px; background: #d8dce2; }
.brand-name { font-weight: 800; line-height: 1.25; font-size: 17px; }
.brand-name span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .8px; }
.navlinks { display: flex; align-self: stretch; align-items: center; gap: 28px; margin: 0 auto; }
.navlinks a { position: relative; font-size: 14px; font-weight: 700; white-space: nowrap; }
.navlinks a.active { color: var(--orange); }
.navlinks a.active::after { content:""; position:absolute; left:0; right:0; bottom:-25px; height:2px; background:var(--orange); }
.nav-actions { display:flex; gap:12px; align-items:center; white-space:nowrap; }
.phone { display:flex; gap:10px; align-items:center; border:1px solid #d8dde4; border-radius:12px; padding:10px 17px; font-weight:700; font-size:14px; }
.primary-btn, .secondary-btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-btn { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color:#fff; box-shadow: 0 10px 22px rgba(255,90,10,.22); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); }
.secondary-btn { background:#fff; border:1px solid #d9dee6; color:var(--ink); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 24px;
  background:
    radial-gradient(circle at 84% 42%, rgba(255,119,31,.12), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fffdfb 100%);
}
.hero::after { content:""; position:absolute; width:520px; height:260px; border:1px solid rgba(255,120,31,.18); border-radius:50%; right:-90px; top:118px; transform:rotate(-13deg); }
.hero-grid { display:grid; grid-template-columns: .92fr 1.28fr; gap:54px; align-items:center; position:relative; z-index:1; }
.eyebrow { display:inline-flex; color:var(--orange); background:var(--orange-soft); border:1px solid #ffd8c1; border-radius:999px; padding:7px 16px; font-size:13px; font-weight:800; }
h1 { margin:18px 0 6px; font-size:clamp(46px,5.1vw,78px); line-height:1.04; letter-spacing:-3px; }
h1 em { color:var(--orange); font-style:normal; }
.latin-title { color:var(--orange); font-size:30px; font-weight:950; letter-spacing:2.2px; margin-bottom:10px; }
.hero-copy { max-width:620px; color:#333b47; font-size:19px; font-weight:650; }
.hero-actions { display:flex; gap:14px; margin-top:25px; }
.hero-actions .primary-btn, .hero-actions .secondary-btn { min-width:180px; padding-block:14px; }

/* Dashboard preview */
.dashboard {
  background:#f9fafc;
  border:1px solid #d8dee6;
  border-radius:22px;
  box-shadow: 0 24px 60px rgba(31,40,54,.15), 0 0 0 7px rgba(255,255,255,.72);
  min-height:360px;
  overflow:hidden;
  transform: perspective(1100px) rotateY(-2deg);
}
.dash-top { height:52px; display:flex; align-items:center; padding:0 20px; gap:8px; background:#fff; border-bottom:1px solid var(--line); }
.dash-logo { color:var(--orange); font-size:19px; font-weight:950; letter-spacing:-1.5px; }
.dash-logo small { color:var(--ink); font-size:7px; letter-spacing:0; }
.window-dots { margin-left:auto; display:flex; gap:9px; color:#73808e; font-size:12px; }
.dash-body { display:grid; grid-template-columns:124px 1fr; min-height:308px; }
.dash-side { background:#fff; border-right:1px solid var(--line); padding:12px 10px; }
.dash-side div { display:flex; align-items:center; gap:9px; padding:9px 10px; margin-bottom:3px; font-size:9px; color:#4b5563; border-radius:8px; }
.dash-side div:first-child { color:var(--orange); background:#fff0e8; }
.dash-side b { width:15px; text-align:center; }
.dash-main { padding:17px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px; min-height:65px; box-shadow:0 3px 9px rgba(16,24,40,.03); }
.stat span { display:block; color:#7b8490; font-size:8px; }
.stat strong { font-size:13px; white-space:nowrap; }
.stat i { color:var(--green); font-style:normal; font-size:7px; margin-left:4px; }
.charts { display:grid; grid-template-columns:1.55fr .95fr; gap:12px; margin-top:12px; }
.chart-box { height:176px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; position:relative; }
.chart-title { font-size:9px; font-weight:800; margin-bottom:11px; }
.bars { height:122px; display:flex; align-items:flex-end; justify-content:space-around; border-bottom:1px solid #cfd5dd; background:repeating-linear-gradient(to bottom,#f0f2f5 0,#f0f2f5 1px,transparent 1px,transparent 30px); padding:0 10px; }
.bars span { width:14px; background:linear-gradient(#ff7c21,#ff5608); border-radius:4px 4px 0 0; box-shadow:0 4px 10px rgba(255,90,10,.18); }
.bars span:nth-child(1){height:45%}.bars span:nth-child(2){height:58%}.bars span:nth-child(3){height:78%}.bars span:nth-child(4){height:64%}.bars span:nth-child(5){height:79%}.bars span:nth-child(6){height:94%}
.donut { width:92px; height:92px; border-radius:50%; margin:15px auto 0; background:conic-gradient(var(--orange) 0 58%,var(--green) 58% 85%,#f59b2f 85%); position:relative; }
.donut::after { content:"₭ 258.45M"; position:absolute; inset:18px; background:#fff; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:9px; font-weight:900; }

/* Product cards */
.products { position:relative; z-index:3; margin-top:30px; }
.product-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.product-card { background:#fff; border:1px solid #f0dfd5; border-radius:15px; padding:19px 15px; box-shadow:var(--soft-shadow); display:grid; grid-template-columns:65px 1fr; gap:13px; min-height:110px; transition:transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
a.product-card { cursor:pointer; }
a.product-card:focus-visible, a.screen-wrap:focus-visible { outline:3px solid rgba(255,90,10,.35); outline-offset:4px; }
.product-icon { width:65px; height:65px; display:grid; place-items:center; border-radius:16px; background:#fff1e9; font-size:34px; }
.product-card:nth-child(2) .product-icon { background:#edf6ff; }
.product-card:nth-child(3) .product-icon { background:#f5edff; }
.product-card:nth-child(4) .product-icon { background:#ebfaf1; }
.product-card h3 { margin:0 0 7px; font-size:14px; color:var(--orange); line-height:1.4; }
.product-card:nth-child(2) h3 { color:var(--blue); }.product-card:nth-child(3) h3 { color:var(--purple); }.product-card:nth-child(4) h3 { color:var(--green); }
.product-card p { margin:0; color:#626b77; font-size:11px; line-height:1.6; }

/* Search-friendly business content */
.seo-content { padding:76px 0 68px; background:linear-gradient(180deg,#fff 0%,#fffaf7 100%); border-top:1px solid #f5ebe4; }
.seo-heading { max-width:970px; margin:0 auto 36px; text-align:center; }
.seo-heading h2,.faq h2 { margin:14px 0 16px; color:var(--navy); font-size:clamp(28px,3vw,42px); line-height:1.28; letter-spacing:-.7px; }
.seo-heading p { margin:0; color:#56616e; font-size:16px; line-height:1.9; }
.seo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.seo-card { position:relative; padding:30px; background:#fff; border:1px solid #f0dfd5; border-radius:18px; box-shadow:var(--soft-shadow); }
.seo-number { display:inline-grid; place-items:center; width:42px; height:42px; margin-bottom:18px; color:var(--orange); background:var(--orange-soft); border-radius:12px; font-size:13px; font-weight:900; }
.seo-card h3 { min-height:62px; margin:0 0 13px; color:var(--navy); font-size:18px; line-height:1.55; }
.seo-card p { margin:0 0 18px; color:#606b78; font-size:13px; line-height:1.85; }
.seo-card a { color:var(--orange); font-size:13px; font-weight:900; }
.search-terms { margin:28px 0 0; padding:18px 22px; color:#596574; background:#fff; border:1px solid #f0e5dd; border-radius:14px; font-size:13px; line-height:1.8; text-align:center; }
.faq { display:grid; grid-template-columns:.72fr 1.28fr; gap:56px; margin-top:68px; padding-top:58px; border-top:1px solid #eadfd8; }
.faq-intro p { color:#687381; font-size:14px; }
.faq-list { display:grid; gap:12px; }
.faq-list details { background:#fff; border:1px solid #eadfd8; border-radius:14px; overflow:hidden; }
.faq-list summary { position:relative; padding:18px 50px 18px 20px; color:var(--navy); cursor:pointer; font-size:14px; font-weight:850; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:20px; top:15px; color:var(--orange); font-size:22px; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { margin:0; padding:0 20px 19px; color:#64707d; font-size:13px; line-height:1.8; }

/* Product showcase */
.showcase { padding:20px 0 10px; }
.section-title { display:flex; align-items:center; gap:22px; font-size:18px; font-weight:900; margin:0 0 14px; }
.section-title::before,.section-title::after { content:""; height:1px; background:#d9dde3; flex:1; }
.screen-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.screen-wrap { text-align:center; }
.mini-screen { height:116px; border:5px solid #18202a; border-radius:10px; background:#f7f9fb; box-shadow:0 6px 12px rgba(0,0,0,.13); overflow:hidden; padding:8px; text-align:left; }
.mini-head { height:8px; width:100%; background:linear-gradient(90deg,#ff6614 0 18%,#e9edf1 18%); border-radius:3px; margin-bottom:8px; }
.mini-layout { display:grid; grid-template-columns:24px 1fr; height:80px; gap:7px; }
.mini-side { background:repeating-linear-gradient(to bottom,#e4e8ed 0,#e4e8ed 4px,transparent 4px,transparent 11px); }
.mini-content { background:linear-gradient(#fff,#fff), repeating-linear-gradient(to right,#eef2f6 0,#eef2f6 35px,transparent 35px,transparent 42px); border:1px solid #edf0f4; position:relative; }
.mini-content::before { content:""; position:absolute; left:8px; right:8px; top:10px; height:24px; background:linear-gradient(90deg,#fff1e7 0 30%,#edf7ff 30% 62%,#ecfaf3 62%); }
.mini-content::after { content:""; position:absolute; left:8px; right:8px; bottom:8px; height:25px; background:repeating-linear-gradient(to right,#e9edf1 0,#e9edf1 2px,transparent 2px,transparent 18px); border-bottom:1px solid #d9dfe6; }
.screen-wrap p { margin:8px 0 0; font-size:12px; color:#3d4854; }
.screen-wrap p::before { content:""; display:inline-block; width:10px; height:10px; background:var(--orange); border-radius:50%; margin-right:7px; }
.screen-wrap:nth-child(2) p::before{background:var(--blue)}.screen-wrap:nth-child(3) p::before{background:var(--purple)}.screen-wrap:nth-child(4) p::before{background:var(--green)}

/* Trust metrics and CTA */
.trust { margin-top:8px; border:1px solid #ffd4bf; border-radius:15px; display:grid; grid-template-columns:repeat(6,1fr); padding:14px 18px; }
.trust-item { display:flex; align-items:center; justify-content:center; gap:12px; padding:0 16px; border-right:1px solid #e1e5ea; min-height:46px; }
.trust-item:last-child { border:0; }
.trust-icon { font-size:26px; color:var(--orange); }
.trust-item strong { display:block; font-size:20px; line-height:1.1; }.trust-item small{color:#687280;font-size:10px}.trust-item:nth-child(2) .trust-icon,.trust-item:nth-child(3) .trust-icon{color:var(--green)}.trust-item:nth-child(4) .trust-icon{color:var(--purple)}

.cta { margin:10px auto 12px; border-radius:16px; background:linear-gradient(120deg,#ff5908,#ff7812); color:#fff; min-height:72px; padding:12px 36px; display:grid; grid-template-columns:1.2fr .7fr; align-items:center; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; width:480px; height:480px; border:1px solid rgba(255,255,255,.13); border-radius:50%; left:-180px; top:-210px; box-shadow:0 0 0 30px rgba(255,255,255,.025),0 0 0 60px rgba(255,255,255,.025); }
.cta-copy { display:flex; align-items:center; gap:20px; position:relative; }.cta-rocket{font-size:36px}.cta h2{font-size:22px;margin:0;line-height:1.3}.cta p{margin:0;font-size:12px;opacity:.9}.cta-actions{display:flex;gap:14px;position:relative}.cta .secondary-btn{flex:1;border-color:#fff;color:var(--orange);padding-block:12px}.cta .ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75)}

/* Footer */
footer { background:var(--navy); color:#fff; padding:28px 0 14px; }
.footer-grid { display:grid; grid-template-columns:1.1fr 1fr .9fr .8fr; gap:30px; align-items:center; }
.footer-brand { display:flex; align-items:center; gap:18px; }.footer-brand .brand-mark{font-size:45px}.footer-brand .brand-mark small{color:#fff}.footer-brand .brand-name{font-size:20px}.footer-brand .brand-name span{font-size:16px;margin-top:6px}
.footer-note,.contact { color:#d6dee5; font-size:12px; border-left:1px solid rgba(255,255,255,.2); padding-left:28px; }
.contact div{margin:8px 0;font-size:14px;font-weight:700}.socials{display:flex;justify-content:flex-end;gap:12px}.socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:#2168c9;border:2px solid rgba(255,255,255,.25)}.socials a:nth-child(2){background:#ec1c24}.socials a:nth-child(3){background:#20bf43}.socials a:nth-child(4){background:#273340}
.copyright { text-align:center; border-top:1px solid rgba(255,255,255,.12); margin-top:20px; padding-top:12px; color:#98a7b4; font-size:11px; }
.mobile-toggle { display:none; border:0; background:#fff2e9; color:var(--orange); width:42px; height:42px; border-radius:10px; font-size:21px; }
.back-to-top { position:fixed; right:22px; bottom:22px; z-index:40; width:46px; height:46px; border:0; border-radius:50%; color:#fff; background:var(--orange); box-shadow:0 10px 24px rgba(255,90,10,.28); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease; }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.contact { font-style:normal; }

/* Responsive */
@media (max-width: 1180px) {
  .navlinks { display:none; }.mobile-toggle{display:block}.nav{gap:18px}.brand{min-width:0;margin-right:auto}.hero-grid{grid-template-columns:1fr 1.15fr;gap:30px}.product-grid{grid-template-columns:repeat(2,1fr)}.product-card:last-child{grid-column:span 2}.seo-grid{grid-template-columns:1fr}.seo-card h3{min-height:auto}.faq{grid-template-columns:1fr;gap:24px}.screen-grid{gap:10px}.trust{grid-template-columns:repeat(3,1fr)}.trust-item:nth-child(3){border-right:0}.trust-item:nth-child(-n+3){border-bottom:1px solid #e1e5ea;padding-bottom:10px;margin-bottom:10px}.footer-grid{grid-template-columns:1fr 1fr}.socials{justify-content:flex-start}.stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px) {
  .container{width:min(100% - 28px,1420px)}.nav{height:66px}.brand-divider,.brand-name,.phone{display:none}.brand-mark{font-size:30px}.nav-actions .primary-btn{padding:10px 13px;font-size:12px}.hero{padding-top:42px}.hero-grid{grid-template-columns:1fr}.hero-copy{font-size:16px}h1{font-size:48px}.latin-title{font-size:23px}.hero-actions{flex-direction:column}.hero-actions>*{width:100%}.dashboard{min-height:315px;transform:none}.dash-body{grid-template-columns:84px 1fr}.dash-side div{font-size:0;padding:8px}.dash-side div b{font-size:11px}.dash-main{padding:9px}.stat{padding:7px}.stat strong{font-size:10px}.charts{grid-template-columns:1fr}.charts .chart-box:last-child{display:none}.product-grid{grid-template-columns:1fr}.product-card:last-child{grid-column:auto}.seo-content{padding:54px 0 48px}.seo-heading{text-align:left}.seo-heading p{font-size:14px}.seo-card{padding:23px}.faq{margin-top:48px;padding-top:42px}.screen-grid{display:flex;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}.screen-wrap{min-width:235px;scroll-snap-align:start}.trust{grid-template-columns:repeat(2,1fr);padding:12px}.trust-item{border-bottom:1px solid #e1e5ea!important;border-right:1px solid #e1e5ea!important;padding:8px}.trust-item:nth-child(even){border-right:0!important}.trust-item:nth-last-child(-n+2){border-bottom:0!important}.cta{grid-template-columns:1fr;padding:20px}.cta-actions{margin-top:15px;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-note,.contact{border-left:0;padding-left:0}.socials{justify-content:flex-start}.footer-brand .brand-mark{font-size:36px}.footer-brand .brand-name{display:block}.hero::after{display:none}
}
.no-js .mobile-toggle { display:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*{transition:none!important} }
  

@media (max-width:1180px){.navlinks.open{display:flex;position:absolute;top:66px;left:14px;right:14px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:14px;padding:18px;flex-direction:column;align-items:flex-start;gap:17px}.navlinks.open a.active::after{display:none}}