/* ===== Dark (night) theme — applied when <html data-theme="dark"> ===== */
html[data-theme="dark"]{color-scheme:dark;--bg:#0A1D31;--bg2:#0F2A44;--ink:#F3EFE8;--mut:#A9C3D1;--line:#24405F;--teal:#5E8DBF;--sandd:#D9BF94;--gold:linear-gradient(120deg,#C8A97E,#F0E2C2);--dn2:#F3EFE8;--dn5:#3A5578}
html[data-theme="dark"] .tg .i-moon{display:none}
html[data-theme="dark"] .tg .i-sun{display:block}
html[data-theme="dark"] .tg{border-color:rgba(255,255,255,.28)}
html[data-theme="dark"] .tg:hover{background:rgba(255,255,255,.12)}

/* Nav */
html[data-theme="dark"] nav{color:#fff}
html[data-theme="dark"] nav .logo,html[data-theme="dark"] nav.sc .logo{color:#fff;--mk-bg:#FAF7F2;--mk-w:#0F2A44}
html[data-theme="dark"] nav .logo small,html[data-theme="dark"] nav.sc .logo small{color:#E3CFA6}
html[data-theme="dark"] nav .l a:not(.btn){color:#fff;opacity:.92}
html[data-theme="dark"] nav.sc{background:rgba(10,29,49,.88);color:var(--ink);border-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] nav.sc .l a:not(.btn){color:var(--mut);opacity:1}
html[data-theme="dark"] nav.sc .l a:not(.btn):hover{color:#fff}

/* Hero */
html[data-theme="dark"] #hero{background:#0F2A44;color:#fff}
html[data-theme="dark"] .hbg div{background:
  linear-gradient(90deg,rgba(9,26,46,.88) 0%,rgba(9,26,46,.66) 40%,rgba(9,26,46,.18) 80%),
  linear-gradient(180deg,rgba(9,26,46,.55) 0%,rgba(9,26,46,0) 28%,rgba(9,26,46,.25) 100%),
  url(../assets/images/hero-blue-hour.webp) center 56%/cover}
html[data-theme="dark"] #hero h1{color:#fff;text-shadow:0 4px 40px rgba(9,26,46,.35)}
html[data-theme="dark"] #hero em,html[data-theme="dark"] .band h2 em{background:linear-gradient(120deg,#C8A97E,#F0E2C2);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] #hero .tag{color:#E3CFA6}
html[data-theme="dark"] #hero .hp{color:#EEF2F7;text-shadow:0 2px 20px rgba(9,26,46,.4)}
html[data-theme="dark"] .btn.o{border-color:rgba(255,255,255,.85);color:#fff}
html[data-theme="dark"] .btn.o:hover{background:#fff;color:#0F2A44}
html[data-theme="dark"] .gl{background:rgba(15,42,68,.46);border-color:rgba(255,255,255,.26);box-shadow:0 24px 60px rgba(5,15,28,.35)}
html[data-theme="dark"] .gl b{background:linear-gradient(120deg,#D9BF94,#F0E2C2);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .gl span{color:#EEF2F7}
html[data-theme="dark"] .wv:not(.b):not(.wc) path{fill:#0F2A44;opacity:.35}
@media(max-width:900px){html[data-theme="dark"] .hbg div{background:linear-gradient(180deg,rgba(9,26,46,.8),rgba(9,26,46,.58) 55%,rgba(9,26,46,.72)),url(../assets/images/hero-blue-hour.webp) center 56%/cover}}

/* Ticker */
html[data-theme="dark"] .tick{background:#0F2A44;color:#F3EFE8;border-color:rgba(200,169,126,.35)}

/* Opportunity */
html[data-theme="dark"] #why{background:radial-gradient(900px 420px at 50% 0,rgba(31,78,121,.38),transparent),radial-gradient(700px 420px at 95% 100%,rgba(200,169,126,.3),transparent),#0F2A44;color:#fff}
html[data-theme="dark"] #why .sub,html[data-theme="dark"] #why .c p{color:#D5DEE8}
html[data-theme="dark"] #why .k{color:#D9BF94}
html[data-theme="dark"] #why .c{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);box-shadow:none}
html[data-theme="dark"] #why .n{background:var(--sunset);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] #why .w>p:last-child{color:#A9B8CA!important}
html[data-theme="dark"] h2 em,html[data-theme="dark"] #why h2 em,html[data-theme="dark"] .dk h2 em{background:var(--sunset);-webkit-background-clip:text;background-clip:text}

/* Sections / cards */
html[data-theme="dark"] .tag{color:#D9BF94}
html[data-theme="dark"] .c{box-shadow:none}
html[data-theme="dark"] .bc{background:#12304D}
html[data-theme="dark"] .bc.a{background:linear-gradient(145deg,#1F4E79,#2B5F8F)}
html[data-theme="dark"] .bc.b{background:var(--sunset)}
html[data-theme="dark"] .bc .bn{color:#8FB4DE}
html[data-theme="dark"] .bc.a .bn{background:var(--sunset);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .bc.b .bn{color:#0F2A44}
html[data-theme="dark"] .bars span{background:linear-gradient(180deg,#5E8DBF,#1F4E79)}
html[data-theme="dark"] .cmp .nl,html[data-theme="dark"] .cmp td:last-child,html[data-theme="dark"] .cmp tr td:last-child{background:#17385A}
html[data-theme="dark"] .cmp th.nl{background:linear-gradient(135deg,#1F4E79,#2B5F8F)}
html[data-theme="dark"] .js .rv.done.c:hover,html[data-theme="dark"] .js .rv.done.bc:hover{box-shadow:0 26px 50px rgba(0,0,0,.4)}

/* Dark sections inside dark mode (slightly different shade from the page) */
html[data-theme="dark"] .dk{--bg:#0F2A44;--bg2:#17385A;--ink:#F3EFE8;--mut:#A9C3D1;--line:#24405F;
  background:radial-gradient(800px 380px at 8% 0,rgba(31,78,121,.25),transparent),radial-gradient(600px 360px at 100% 100%,rgba(200,169,126,.18),transparent),#0F2A44;color:var(--ink)}
html[data-theme="dark"] .dk .k,html[data-theme="dark"] .dk .tag{color:#D9BF94}
html[data-theme="dark"] .dk .ph b{color:#E3CFA6}
html[data-theme="dark"] .dk td:last-child{color:#D9BF94}
html[data-theme="dark"] .dk .big{background:linear-gradient(135deg,#1F4E79,#2B5F8F)}

/* Band, CTA, footer */
html[data-theme="dark"] .band{color:#fff;background:linear-gradient(rgba(15,42,68,.62),rgba(15,42,68,.78)),url(../assets/images/hero.jpg) center 78%/cover fixed,linear-gradient(135deg,#1F4E79,#0F2A44)}
@media(max-width:900px){html[data-theme="dark"] .band{background-attachment:scroll}}
html[data-theme="dark"] .band .mk.bigmk{--mk-bg:#FAF7F2;--mk-w:#0F2A44}
html[data-theme="dark"] .band p{color:#D9BF94}
html[data-theme="dark"] #cta{background:radial-gradient(700px 360px at 90% 0,rgba(200,169,126,.18),transparent 70%),linear-gradient(135deg,#0F2A44,#1F4E79);color:#fff}
html[data-theme="dark"] .logo.xl{--mk-bg:#FAF7F2;--mk-w:#0F2A44;color:#fff}
html[data-theme="dark"] .logo.xl .wm small{color:var(--coral)}
html[data-theme="dark"] footer{background:#071626;color:#8FA2B8;border-top-color:var(--line)}
html[data-theme="dark"] footer .logo{--mk-bg:#FAF7F2;--mk-w:#0F2A44;color:#fff}
html[data-theme="dark"] footer .wm small{color:var(--coral)}

/* ===== Logo: identical in light and dark ===== */
html[data-theme] nav .logo,html[data-theme] nav.sc .logo,html[data-theme] footer .logo,html[data-theme] .logo.xl{
  --mk-bg:#0F2A44;--mk-w:#FAF7F2;color:#0F2A44;background:#FAF7F2;border-radius:99px;padding:6px 20px 6px 6px;box-shadow:0 4px 18px rgba(15,42,68,.14)}
html[data-theme] nav .logo .wm small,html[data-theme] nav.sc .logo .wm small,html[data-theme] footer .logo .wm small,html[data-theme] .logo.xl .wm small{color:#8A6D43}
html[data-theme] .logo.xl{padding:12px 44px 12px 12px;box-shadow:0 14px 40px rgba(15,42,68,.18)}
html[data-theme] .band .mk.bigmk{--mk-bg:#0F2A44;--mk-w:#FAF7F2;border-radius:50%;box-shadow:0 0 0 4px #FAF7F2,0 10px 30px rgba(15,42,68,.2)}
html[data-theme] .badge .mk{--mk-bg:#0F2A44;--mk-w:#FAF7F2}
@media(max-width:620px){html[data-theme] nav .logo,html[data-theme] nav.sc .logo{padding-right:14px}html[data-theme] .logo.xl{padding-right:28px}}
html[data-theme="dark"] #solution:before{background:linear-gradient(90deg,rgba(9,26,46,.94) 0%,rgba(9,26,46,.84) 38%,rgba(9,26,46,.4) 68%,rgba(9,26,46,.1) 100%)}
html[data-theme="dark"] #solution .c{background:rgba(15,42,68,.62);border-color:rgba(255,255,255,.18)}
@media(max-width:900px){html[data-theme="dark"] #solution:before{background:rgba(9,26,46,.86)}}

/* ===== "Our solution": identical in light & dark. White text over a navy tint, no white boxes ===== */
html[data-theme] #solution:before{background:linear-gradient(90deg,rgba(9,26,46,.8) 0%,rgba(9,26,46,.6) 36%,rgba(9,26,46,.16) 66%,rgba(9,26,46,0) 90%)}
html[data-theme] #solution h2{color:#fff;filter:drop-shadow(0 4px 22px rgba(9,26,46,.5))}
html[data-theme] #solution h2 em{background:linear-gradient(120deg,#E3CFA6,#F6E9CB);-webkit-background-clip:text;background-clip:text}
html[data-theme] #solution .k{color:#EBD8B0;text-shadow:0 2px 12px rgba(9,26,46,.6)}
html[data-theme] #solution .sub{color:#fff;text-shadow:0 2px 16px rgba(9,26,46,.6)}
html[data-theme] #solution .c{background:rgba(9,26,46,.46);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}
html[data-theme] #solution .c h3{color:#fff}
html[data-theme] #solution .c p{color:#E3EAF2}
@media(max-width:900px){html[data-theme] #solution:before{background:linear-gradient(180deg,rgba(9,26,46,.78),rgba(9,26,46,.6))}}

/* ===== Investment: night photo background (same in light & dark) ===== */
html[data-theme] #investment{position:relative;isolation:isolate;color:#fff;--ink:#fff;--mut:#D5DEE8;--line:rgba(255,255,255,.24);--dn2:#F3EFE8;--dn5:#3A5578;
  background:url(../assets/images/investment.jpg) center/cover no-repeat,#0A1D31}
html[data-theme] #investment:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,20,36,.62) 0%,rgba(7,20,36,.46) 50%,rgba(7,20,36,.5) 100%)}
html[data-theme] #investment h2{color:#fff;filter:drop-shadow(0 4px 22px rgba(7,20,36,.5))}
html[data-theme] #investment h2 em{background:linear-gradient(120deg,#E3CFA6,#F6E9CB);-webkit-background-clip:text;background-clip:text}
html[data-theme] #investment .k{color:#EBD8B0}
html[data-theme] #investment .lg li,html[data-theme] #investment .ph{color:#fff;text-shadow:0 2px 14px rgba(7,20,36,.6)}
html[data-theme] #investment .ph b{color:#EBD8B0}
html[data-theme] #investment .w>p:last-child{color:#D5DEE8!important;text-shadow:0 2px 12px rgba(7,20,36,.6)}
html[data-theme] #investment .donut{filter:drop-shadow(0 12px 30px rgba(7,20,36,.45))}
@media(max-width:900px){html[data-theme] #investment:before{background:rgba(7,20,36,.62)}}

/* ===== Logo v2: one logo (cream mark + white wordmark), always on a dark surface, identical in light & dark ===== */
html[data-theme] nav .logo,html[data-theme] nav.sc .logo,html[data-theme] footer .logo,html[data-theme] .logo.xl{
  --mk-bg:#FAF7F2;--mk-w:#0F2A44;color:#fff;background:none;border-radius:0;padding:0;box-shadow:none}
html[data-theme] nav .logo .wm small,html[data-theme] nav.sc .logo .wm small,html[data-theme] footer .logo .wm small,html[data-theme] .logo.xl .wm small{color:#E3CFA6}
html[data-theme] .logo.xl{padding:0}
@media(max-width:620px){html[data-theme] nav .logo,html[data-theme] nav.sc .logo,html[data-theme] .logo.xl{padding:0}}
/* nav bar after scrolling: dark glass in both modes */
html[data-theme] nav.sc{background:rgba(9,26,46,.9);color:#fff;border-color:rgba(255,255,255,.12);box-shadow:0 8px 30px rgba(0,0,0,.3)}
html[data-theme] nav.sc .l a:not(.btn){color:#D5DEE8;opacity:1}
html[data-theme] nav.sc .l a:not(.btn):hover{color:#fff}
html[data-theme] nav .tg{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
html[data-theme] nav .tg:hover{background:rgba(255,255,255,.14)}
/* CTA + footer: dark in both modes so the logo never changes */
html[data-theme] #cta{background:radial-gradient(700px 360px at 90% 0,rgba(200,169,126,.2),transparent 70%),linear-gradient(135deg,#0F2A44,#1F4E79);color:#fff}
html[data-theme] footer{background:#071626;color:#8FA2B8;border-top:1px solid #24405F}

/* Hero: stat boxes removed; keep the rotating badge on the photo's lower right */
html[data-theme] #hero .badge{left:auto;right:6%;bottom:2%}
@media(max-width:900px){html[data-theme] #hero .hr{height:150px}html[data-theme] #hero .badge{right:4%;bottom:-2%}}

/* Final phone hero tuning */
@media(max-width:620px){
  html[data-theme] #hero{min-height:100svh;align-items:flex-start}
  html[data-theme] .hbg{inset:0}
  html[data-theme] .hbg div{
    background:
      linear-gradient(180deg,rgba(7,20,36,.88) 0%,rgba(7,20,36,.68) 42%,rgba(7,20,36,.54) 100%),
      linear-gradient(90deg,rgba(7,20,36,.8) 0%,rgba(7,20,36,.38) 58%,rgba(7,20,36,.18) 100%),
      url(../assets/images/hero-blue-hour.webp) 72% 50%/cover}
  html[data-theme] #hero .w{padding-top:118px;padding-bottom:110px}
  html[data-theme] #hero h1{font-size:clamp(40px,13vw,56px);line-height:.96;max-width:8.5ch}
  html[data-theme] #hero .tag{font-size:11px;line-height:1.45;letter-spacing:.1em;max-width:280px;margin-bottom:16px}
  html[data-theme] #hero .hp{font-size:16.5px;line-height:1.55;max-width:310px;margin:18px 0 24px}
  html[data-theme] #hero .hr{height:110px}
  html[data-theme] #hero .badge{right:4%;bottom:0}
}