/* ============================================================
   DAYWA Design System — global entry point.
   Consumers link THIS file. Imports only; no rules here.
   ============================================================ */
/* ============================================================
   DAYWA — Webfonts
   Brand wordmark is a bold, wide geometric sans. Plus Jakarta
   Sans (UI/body) + Montserrat (display/headings) are the closest
   freely-available matches.
   NOTE: served from Google Fonts CDN — not bundled locally.
   Flag to user if offline/self-hosted binaries are required.
   ============================================================ */




































































































































/* ============================================================
   DAYWA — Color tokens
   Brand orange + warm sand neutrals + flag-bright semantics.
   ============================================================ */
:root {
  /* ---- Brand: DAYWA Orange (sampled from logo #fa5005) ---- */
  --orange-50:  #fff4ee;
  --orange-100: #ffe3d4;
  --orange-200: #ffc2a3;
  --orange-300: #ff9a6b;
  --orange-400: #fd7137;
  --orange-500: #fa5005;  
  --orange-600: #e23f00;
  --orange-700: #b83100;
  --orange-800: #8f2700;
  --orange-900: #5e1a00;

  /* ---- Secondary: Dusk Purple (sampled from the new sunset-Bagan key art —
     scan FAB, "Learn More" pill, headline emphasis, footer band) ---- */
  --purple-50:  #f5eef8;
  --purple-100: #e6d3ec;
  --purple-200: #cba3da;
  --purple-300: #a86fc0;
  --purple-400: #7d3f9c;
  --purple-500: #5b1a6e;  
  --purple-600: #4a1359;
  --purple-700: #3a0f46;
  --purple-800: #310a41;  /* deep dusk — footer bands, full-bleed dark surfaces */
  --purple-900: #200629;

  /* ---- Warm sand / cream neutrals ---- */
  --cream:      #fcf8f5;  
  --sand-50:    #faf4ee;
  --sand-100:   #f5ece3;
  --sand-200:   #ebddd0;
  --sand-300:   #dcc8b6;

  /* ---- Warm ink / gray ramp (slightly warm cast) ---- */
  --ink-900:    #1f1813;  
  --ink-800:    #33271f;
  --ink-700:    #4d3d33;
  --ink-600:    #6b5849;
  --ink-500:    #8a7665;  
  --ink-400:    #ab9a8a;
  --ink-300:    #cdbfb2;
  --ink-200:    #e6ddd3;
  --ink-100:    #f2ece5;
  --white:      #ffffff;

  /* ---- Semantic status ---- */
  --green-500:  #1b9e5a;   /* received / success */
  --green-50:   #e6f6ed;
  --red-500:    #d8392b;   /* sent out / error */
  --red-50:     #fcebe9;
  --amber-500:  #e8a200;   /* pending / warning */
  --amber-50:   #fdf3da;
  --blue-500:   #1f74d6;   
  --blue-50:    #e8f1fc;

  /* ============== Semantic aliases (use these in UI) ============== */
  --brand:            var(--orange-500);
  --brand-strong:     var(--orange-600);
  --brand-pressed:    var(--orange-700);
  --brand-soft:       var(--orange-50);
  --brand-soft-2:     var(--orange-100);
  --on-brand:         var(--white);

  --bg-canvas:        var(--cream);
  --bg-brand:         var(--orange-500);   
  --surface-card:     var(--white);
  --surface-sunken:   var(--sand-50);
  --surface-overlay:  var(--white);

  --text-primary:     var(--ink-900);
  --text-secondary:   var(--ink-600);
  --text-muted:       var(--ink-500);
  --text-on-brand:    var(--white);
  --text-on-brand-dim:#ffd9c1;             
  --text-link:        var(--orange-600);

  --border-subtle:    var(--ink-200);
  --border-default:   var(--ink-300);
  --border-brand:     var(--orange-200);

  --icon-default:     var(--ink-700);
  --icon-brand:       var(--orange-500);
  --icon-on-brand:    var(--white);

  --success:          var(--green-500);
  --success-soft:     var(--green-50);
  --danger:           var(--red-500);
  --danger-soft:      var(--red-50);
  --warning:          var(--amber-500);
  --warning-soft:     var(--amber-50);
  --info:             var(--blue-500);
  --info-soft:        var(--blue-50);

  --focus-ring:       var(--orange-300);

  --accent:           var(--purple-500);
  --accent-strong:    var(--purple-600);
  --accent-soft:      var(--purple-50);
  --on-accent:        var(--white);
  --surface-deep:     var(--purple-800);
  --text-on-deep:     var(--white);
  --text-on-deep-dim: var(--purple-200);
}

/* ============================================================
   DAYWA — Typography tokens
   Display = Montserrat (bold/wide, echoes the wordmark).
   UI/body = Plus Jakarta Sans. Numerals = IBM Plex Mono
   for balances & amounts (tabular).
   ============================================================ */
:root {
  --font-display: 'Montserrat', 'Noto Sans Myanmar', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', 'Noto Sans Myanmar', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (px) — mobile-first product UI */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   60px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* uppercase eyebrows / labels */

  /* ---- Semantic text roles ---- */
  --display-1:  var(--weight-extra) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --display-2:  var(--weight-extra) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --heading-1:  var(--weight-bold)  var(--text-2xl)/var(--leading-snug) var(--font-display);
  --heading-2:  var(--weight-bold)  var(--text-xl)/var(--leading-snug)  var(--font-sans);
  --heading-3:  var(--weight-bold)  var(--text-lg)/var(--leading-snug)  var(--font-sans);
  --body-lg:    var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  --body:       var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --label:      var(--weight-semibold) var(--text-sm)/var(--leading-snug) var(--font-sans);
  --caption:    var(--weight-medium) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --amount-lg:  var(--weight-extra) var(--text-4xl)/var(--leading-tight) var(--font-sans);
}

/* ============================================================
   DAYWA — Spacing, radius, shadow, motion tokens
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Corner radii — DAYWA leans friendly & rounded */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default card / button */
  --radius-lg:   20px;   /* large cards, sheets */
  --radius-xl:   28px;
  --radius-pill: 999px;  /* chips, pills, FAB */

  /* Shadows — soft, warm, low-spread (cards float on cream) */
  --shadow-xs:  0 1px 2px rgba(31, 24, 19, 0.06);
  --shadow-sm:  0 2px 8px rgba(31, 24, 19, 0.06);
  --shadow-md:  0 6px 18px rgba(31, 24, 19, 0.08);
  --shadow-lg:  0 14px 34px rgba(31, 24, 19, 0.12);
  --shadow-brand: 0 8px 20px rgba(250, 80, 5, 0.30);   /* orange glow under primary CTAs/FAB */

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */

  /* Layout */
  --container-app:   430px;   
  --tap-target:      44px;    
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
/* position:relative makes body the containing block for the decorative .glow blobs
   (they use left/right offsets beyond the viewport); without it their overflow
   anchors to the viewport and can't be clipped, causing horizontal scroll on mobile. */
body{margin:0;position:relative;background:#08060a;color:#fff;font-family:var(--font-sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
section{scroll-margin-top:92px}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--orange-300)}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.1)}}
@keyframes pulseGlow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(1deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.glass{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(16px)}
.btn-glow{transition:box-shadow .3s}
.btn-glow:hover{box-shadow:0 0 40px 4px rgba(250,80,5,0.55)}
.grad-text{background:linear-gradient(92deg,#fff 0%,#ffb98a 45%,var(--brand) 65%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.card-hover{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,background .45s}
.card-hover:hover{transform:translateY(-6px);border-color:rgba(250,80,5,0.4);background:rgba(255,255,255,0.06)}
nav a.navlink{color:#c9c1ba;font:600 14px/1 var(--font-sans);transition:color .2s}
.navlinks{display:flex;align-items:center;gap:28px}
nav a.navlink:hover{color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0d0a0e}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--brand),var(--purple-500));border-radius:6px}
[data-lang="en"] .my{display:none}
[data-lang="mm"] .en{display:none}
[data-lang="mm"] body,[data-lang="mm"] h1,[data-lang="mm"] h2,[data-lang="mm"] h3,[data-lang="mm"] p,[data-lang="mm"] span,[data-lang="mm"] a,[data-lang="mm"] div{font-family:'Noto Sans Myanmar',var(--font-sans)}
.lang-toggle{display:flex;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:4px;gap:2px}
.lang-btn{border:none;background:transparent;color:#9a9088;font:700 12px/1 var(--font-sans);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.lang-btn.active{background:var(--brand);color:#fff}

/* ================= Section primitives ================= */
.section{position:relative;z-index:1;padding:104px 0}
.section-head{max-width:780px}
.section-head.center{margin:0 auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:rgba(250,80,5,0.11);border:1px solid rgba(250,80,5,0.3);font:700 11px/1 var(--font-sans);letter-spacing:0.17em;text-transform:uppercase;color:var(--orange-300)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px 2px var(--brand)}
h2.h2{margin:20px 0 0;font:400 clamp(30px,4.4vw,52px)/1.04 'Anton',var(--font-display);text-transform:uppercase;letter-spacing:0.4px}
[data-lang="mm"] h2.h2{font:700 clamp(24px,3.4vw,38px)/1.35 var(--font-sans);text-transform:none}
.lede{margin:16px 0 0;font:400 17px/1.65 var(--font-sans);color:#a89e94;max-width:640px}
.section-head.center .lede{margin-left:auto;margin-right:auto}
.grid{display:grid;gap:20px;margin-top:52px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;border-radius:var(--radius-lg);padding:28px;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.08)}
.card h3{margin:18px 0 0;font:700 19px/1.35 var(--font-sans);color:#fff}
.card p{margin:9px 0 0;font:400 15px/1.65 var(--font-sans);color:#a89e94}
.ico{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,rgba(250,80,5,0.95),rgba(91,26,110,0.95));box-shadow:0 10px 24px rgba(250,80,5,0.25)}
.ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= Buttons ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:999px;font:700 16px/1 var(--font-sans);padding:16px 28px;cursor:pointer;transition:transform .25s var(--ease-out),box-shadow .3s,background .25s,color .25s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 40px 4px rgba(250,80,5,0.5)}
.btn-ghost{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.18);color:#fff}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,0.1)}
.btn-block{width:100%}

/* ================= Trust strip ================= */
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:center;padding:18px 0;border-top:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.07)}
.trust span{display:inline-flex;align-items:center;gap:9px;font:600 13px/1.4 var(--font-sans);color:#8d8279}
.trust svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ================= Rate calculator ================= */
.calc{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));box-shadow:0 30px 80px rgba(0,0,0,0.45)}
.calc-pane{padding:34px;min-width:0}
.calc-pane+.calc-pane{border-left:1px solid rgba(255,255,255,0.08);background:linear-gradient(160deg,rgba(91,26,110,0.28),rgba(250,80,5,0.07))}
.calc-label{font:700 11px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;color:#8d8279}
[data-lang="mm"] .calc-label{letter-spacing:normal;text-transform:none;font-size:12px;line-height:1.4}
.field{margin-top:12px;min-width:0;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius-md);background:rgba(0,0,0,0.32);border:1px solid rgba(255,255,255,0.1);transition:border-color .25s,box-shadow .25s}
.field:focus-within{border-color:rgba(250,80,5,0.6);box-shadow:0 0 0 4px rgba(250,80,5,0.14)}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:400 32px/1.15 'Anton',var(--font-display);letter-spacing:0.5px}
.field .out{flex:1;min-width:0;font:400 32px/1.15 'Anton',var(--font-display);letter-spacing:0.5px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.field .cur{flex:none;font:700 14px/1 var(--font-sans);color:#c9c1ba;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#c9c1ba;font:700 13px/1 var(--font-sans);padding:10px 15px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{color:#fff;border-color:rgba(250,80,5,0.55)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.calc-rows{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.calc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font:500 14px/1.5 var(--font-sans);color:#a89e94}
.calc-row b{font-weight:700;color:#fff;text-align:right}
.calc-row b.free{color:#4ade80}
.calc-note{margin-top:18px;font:400 12px/1.6 var(--font-sans);color:#6f645c}

/* ================= Steps ================= */
.step{position:relative}
.step-num{font:400 44px/1 'Anton',var(--font-display);color:transparent;-webkit-text-stroke:1.5px rgba(250,80,5,0.8)}
.step-line{position:absolute;top:22px;left:calc(50% + 46px);right:calc(-50% + 46px);height:1px;background:linear-gradient(90deg,rgba(250,80,5,0.5),rgba(250,80,5,0.05));pointer-events:none}

/* ================= Marquee ================= */
.marquee{overflow:hidden;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.pill{white-space:nowrap;padding:13px 24px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);font:700 15px/1 var(--font-sans);color:#d9d2cc}

/* ================= Quote / testimonials ================= */
.quote{margin:0;font:400 clamp(21px,2.5vw,32px)/1.42 var(--font-sans);color:#fff;letter-spacing:-0.2px}
.avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--font-sans);color:#fff;background:linear-gradient(140deg,var(--brand),var(--purple-500))}
.stars{display:flex;gap:3px}
.stars svg{width:15px;height:15px;fill:var(--orange-300);stroke:none}

/* ================= FAQ ================= */
.faq{margin-top:44px;border-top:1px solid rgba(255,255,255,0.09)}
.faq details{border-bottom:1px solid rgba(255,255,255,0.09)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font:700 17px/1.5 var(--font-sans);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange-300)}
.faq .sign{flex:none;width:26px;height:26px;margin-top:2px;border-radius:50%;border:1px solid rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center;color:#fff;font:400 18px/1 var(--font-sans);transition:transform .3s var(--ease-out),background .25s,border-color .25s}
.faq details[open] .sign{transform:rotate(45deg);background:var(--brand);border-color:var(--brand)}
.faq .ans{padding:0 0 24px;font:400 15px/1.75 var(--font-sans);color:#a89e94;max-width:860px}

/* ================= CTA band ================= */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:72px 40px;text-align:center;border:1px solid rgba(250,80,5,0.3);background:linear-gradient(140deg,rgba(250,80,5,0.2),rgba(91,26,110,0.32))}

/* ================= Footer ================= */
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot-grid h4{margin:0 0 16px;font:700 12px/1 var(--font-sans);letter-spacing:0.15em;text-transform:uppercase;color:#8d8279}
[data-lang="mm"] .foot-grid h4{letter-spacing:normal;text-transform:none;font-size:13px;line-height:1.4}
.foot-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-grid a{font:500 14px/1.5 var(--font-sans);color:#a89e94}
.foot-grid a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);transition:background .25s,border-color .25s}
.social a:hover{background:rgba(250,80,5,0.18);border-color:rgba(250,80,5,0.5)}
.social svg{width:17px;height:17px;fill:#c9c1ba}
.social a:hover svg{fill:#fff}

/* ================= Sticky mobile CTA + to-top ================= */
.mobile-cta{display:none}
#toTop{position:fixed;right:22px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);background:rgba(20,15,24,0.85);backdrop-filter:blur(10px);color:#fff;cursor:pointer;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
#toTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#toTop svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ================= Responsive ================= */
@media (max-width:1180px){
  .navlinks{display:none}
}
@media (max-width:1000px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:1fr}
  .calc-pane+.calc-pane{border-left:0;border-top:1px solid rgba(255,255,255,0.08)}
  .step-line{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
  body{padding-bottom:84px}
  .section{padding:60px 0}
  .grid{margin-top:34px;gap:14px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .card{padding:22px}
  .calc-pane{padding:24px}
  .cta-band{padding:44px 22px}
  .foot-grid{grid-template-columns:1fr;gap:28px;text-align:left}

  /* --- header: keep it to logo + language toggle; drop the redundant CTA (sticky bar covers it) --- */
  #cta-nav{display:none!important}

  /* The page-level .glow blobs sit with their bright cores just off the right edge
     (right:-300px etc). On a narrow phone that bright core hugs the viewport edge and
     shows as an orange/purple vertical band. Hide those and use a soft, horizontally
     centred ambient wash instead — centred, so it can never form an edge line.
     (The halo behind the hero photo is a nested .glow inside .hero, so it stays.) */
  body > .glow{display:none!important}
  body{
    background:
      radial-gradient(100% 40% at 50% 0%, rgba(250,80,5,0.20), transparent 60%),
      radial-gradient(120% 45% at 50% 100%, rgba(91,26,110,0.22), transparent 62%),
      #08060a;
    background-attachment:fixed;
  }

  /* --- hero: stack cleanly, stretch children to viewport width so nothing overflows --- */
  .hero{min-height:0!important;padding:20px 0 28px!important}
  .hero > div.wrap{flex-direction:column-reverse!important;align-items:stretch!important;gap:24px!important;text-align:center}
  .hero > div.wrap > div:first-child{flex:1 1 auto!important;min-width:0!important;width:100%!important}
  .hero > div.wrap > div:nth-child(2){flex:none!important;width:100%!important;max-width:300px!important;margin:0 auto!important}
  .hero img{max-height:52vh!important}
  h1{font-size:clamp(30px,8.5vw,46px)!important}
  .hero .my h1,.hero h1.my{line-height:1.28!important}
  .hero-badge{margin:0 auto}
  .hero p{margin-left:auto!important;margin-right:auto!important}
  .hero-cta{justify-content:center!important}
  .hero-cta > a{flex:1 1 auto;justify-content:center;min-height:50px}
  .hero-stats{justify-content:center!important;gap:22px!important;margin-top:22px!important;margin-bottom:8px!important;flex-wrap:wrap}

  footer .wrap{text-align:left}
  .foot-bottom{flex-direction:column;text-align:center;gap:10px}
  .mobile-cta{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:60;gap:10px}
  .mobile-cta .btn{flex:1;min-height:52px;box-shadow:0 12px 34px rgba(0,0,0,0.5)}
  #toTop{display:none}
}

/* Long unbroken Burmese / English strings must never force horizontal scroll */
h1,h2,h3,h4,p,a,span,.h2,.field .out{overflow-wrap:break-word;word-break:normal}

/* --- small phones --- */
@media (max-width:420px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  .section{padding:48px 0}
  h1{font-size:clamp(27px,8vw,40px)!important}
  .card{padding:18px}
  .calc-pane{padding:20px}
  .cta-band{padding:36px 18px}
  .hero-stats{gap:16px!important}
  .hero-stats > div{flex:1 1 40%}
  .mobile-cta{left:12px;right:12px;bottom:12px;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{padding-left:20px!important;padding-right:20px!important}
  /* comfortable tap targets for every primary/ghost button */
  .btn,.btn-glow,.btn-ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
}