/* MMHVAULT Landing L1.5 — cinematic image integration.
   Original compressed .webp assets, content-addressed in GitHub,
   only loaded by this independent preview. Fallback remains the
   existing CSS/HTML demonstration if image loading fails. */
.hero{
  min-height:clamp(630px,51vw,755px);
  position:relative;
}
.hero::before{
  background-image:
    linear-gradient(90deg,rgba(2,8,18,.76) 0%,rgba(3,10,22,.68) 21%,rgba(3,10,20,.40) 39%,rgba(4,10,20,.05) 70%,rgba(4,9,17,.04) 100%),
    linear-gradient(180deg,rgba(3,9,19,.34),rgba(4,9,18,.06) 42%,rgba(2,8,18,.22) 75%,#040b15 100%),
    url("./cinematic-lake.webp");
  background-position:center,center,center 53%;
  background-size:cover,cover,cover;
  opacity:1;
}
.hero::after{
  background:radial-gradient(ellipse at 50% 44%,rgba(255,195,112,.20),rgba(193,151,93,.06) 45%,transparent 72%);
  filter:blur(42px);
  opacity:.55;
}
.hero-copy{z-index:3;align-self:center}
.hero-copy::before{
  background:linear-gradient(90deg,rgba(4,12,22,.53),rgba(4,12,23,.2) 67%,transparent);
}
.hero-art{
  min-height:535px;
  position:relative;
  isolation:isolate;
  transform:none;
  align-self:center;
  overflow:visible;
  padding:0;
  margin:0;
}
.hero-device-cinematic{
  display:block;
  position:absolute;
  width:149%;
  max-width:none;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  left:-31%;
  top:50%;
  transform:translateY(-49%);
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.27));
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 14%,#000 35%,#000 95%,rgba(0,0,0,.78) 100%);
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 14%,#000 35%,#000 95%,rgba(0,0,0,.78) 100%);
  transition:opacity .3s ease;
}
.hero-art.is-photo-ready .hero-device-cinematic{opacity:1}
.hero-art.is-photo-ready .desktop-frame,
.hero-art.is-photo-ready .laptop-base,
.hero-art.is-photo-ready .phone-frame{display:none}
.hero-art.is-photo-ready .hero-halo{
  inset:0;
  background:radial-gradient(ellipse at 60% 50%,rgba(243,183,93,.13),transparent 69%);
}
.hero-art .demo-disclaimer{
  position:absolute;z-index:2;
  right:12px;bottom:-4px;
  border:1px solid rgba(246,216,158,.19);
  border-radius:99px;
  padding:7px 11px;
  background:rgba(5,13,23,.70);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#f2dfc3;
}
.hero-art.is-photo-ready .demo-disclaimer{bottom:2px}
.business-section::before{
  background-image:
    linear-gradient(180deg,rgba(4,10,19,.89),rgba(5,15,26,.87) 53%,#050e1a 100%),
    radial-gradient(circle at 72% 48%,rgba(242,166,83,.18),transparent 57%),
    url("./cinematic-lake.webp");
  background-position:center,center,center 38%;
}
.business-stage::after{
  content:"";
  position:absolute;
  pointer-events:none;
  right:-8%;bottom:-20%;width:48%;height:75%;
  z-index:-1;
  background:radial-gradient(ellipse,rgba(245,171,82,.11),transparent 75%);
  filter:blur(40px);
}
.business-visual-strip{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:0;
  overflow:hidden;
  margin:26px 0 21px;
  border:1px solid rgba(241,208,160,.22);
  border-radius:20px;
  background:linear-gradient(140deg,rgba(20,36,53,.96),rgba(8,19,31,.98));
  box-shadow:0 24px 66px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08);
}
.business-visual-text{
  padding:33px 35px;
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}
.business-visual-kicker{
  display:block;color:#efc78b;
  font-size:10px;letter-spacing:.20em;font-weight:750;
}
.business-visual-text h3{
  margin:15px 0 12px;
  color:#fff1d9;font:400 clamp(22px,2.5vw,35px)/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:-.03em;
}
.business-visual-text p{
  color:#adbdca;line-height:1.8;font-size:12px;
  margin:0;max-width:400px;
}
.business-visual-frame{position:relative;overflow:hidden;min-height:255px}
.business-visual-frame img{
  width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover;object-position:72% 48%;
}
.business-visual-frame::after{
  content:"";position:absolute;pointer-events:none;inset:0;
  background:linear-gradient(90deg,#112034 0%,transparent 24%);
}
.business-visual-foot{
  font-size:10px;color:#af9974;letter-spacing:.02em;margin-top:14px;
}
.showcase-card{
  background:linear-gradient(135deg,rgba(30,43,56,.76),rgba(6,15,26,.87));
  border-color:rgba(236,207,165,.40);
}
.showcase-mini{background:linear-gradient(148deg,rgba(11,30,48,.93),rgba(26,44,61,.80));border-color:rgba(241,217,176,.20)}
@media(max-width:1200px){
  .hero{min-height:635px}
  .hero-art{min-height:450px}
  .hero-device-cinematic{width:157%;left:-35%}
}
@media(max-width:840px){
  .hero{min-height:0}
  .hero::before{background-position:center,center,58% 50%}
  .hero-art{min-height:420px;width:min(700px,100%)}
  .hero-device-cinematic{width:126%;left:-14%;top:50%}
  .business-visual-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .hero{padding-bottom:56px}
  .hero::before{
    background-image:
      linear-gradient(180deg,rgba(3,10,21,.82),rgba(4,10,21,.66) 47%,rgba(4,10,21,.12) 66%,rgba(3,10,20,.87) 100%),
      url("./cinematic-lake.webp");
    background-position:center,57% 44%;
    background-size:cover,auto 100%;
  }
  .hero-art{width:100%;min-height:310px;margin-top:0;padding:0}
  .hero-device-cinematic{
    width:145%;left:-24%;top:46%;
  }
  .hero-art .demo-disclaimer{
    bottom:0;right:0;
    font-size:7px;max-width:95%;
    line-height:1.5;text-align:right;
  }
  .business-visual-strip{grid-template-columns:1fr;border-radius:16px}
  .business-visual-text{padding:22px}
  .business-visual-text h3{font-size:26px;margin:11px 0}
  .business-visual-frame{min-height:245px}
  .business-visual-frame::after{background:linear-gradient(180deg,#112034 0%,transparent 24%)}
}
@media(max-width:380px){
  .hero-art{min-height:255px}
  .hero-device-cinematic{width:151%;left:-28%}
  .business-visual-frame{min-height:210px}
}
@media(prefers-reduced-motion:reduce){
  .hero-device-cinematic{transition:none!important}
}


/* L1.6 — isolated editorial polish for the photographic Landing preview.
   Scope: landing-preview.html only. No global app, auth, PWA, or data imports. */
.hero { overflow-x:clip; }
.hero-art.is-photo-ready .hero-device-cinematic {
  filter:drop-shadow(0 30px 48px rgba(0,0,0,.38)) saturate(.95) contrast(1.04);
}
.business-visual-frame img {
  object-position:64% 52%;
  filter:saturate(.96) contrast(1.045);
}
.business-visual-strip {
  border-color:rgba(237,202,145,.32);
  box-shadow:0 30px 78px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,246,225,.08);
}
.business-visual-text {
  background:radial-gradient(ellipse at 0% 2%,rgba(224,180,107,.08),transparent 75%);
}
.business-insight-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.business-insight {
  min-width:0;
  min-height:106px;
  display:flex;
  align-items:flex-start;
  gap:13px;
  position:relative;
  padding:18px 17px;
  border-radius:14px;
  border:1px solid rgba(232,199,148,.2);
  background:linear-gradient(136deg,rgba(28,47,64,.89),rgba(9,26,43,.93));
  box-shadow:inset 0 1px 0 rgba(255,249,232,.05);
}
.business-insight-icon {
  flex:0 0 31px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:10px;
  background:rgba(222,181,112,.12);
  color:#efd4a0;
  font-size:18px;
  border:1px solid rgba(237,206,157,.25);
}
.business-insight-icon.assets { color:#b5d9e5; background:rgba(123,183,209,.1); }
.business-insight-icon.report { color:#d1bc98; }
.business-insight-copy { flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start; }
.business-insight-copy small {
  color:#abc0cd;font-size:9px;font-weight:690;
  letter-spacing:.095em;line-height:1.6;
  overflow-wrap:anywhere;
}
.business-insight-copy strong {
  margin-top:7px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(16px,1.6vw,22px);
  letter-spacing:-.045em;line-height:1.25;
  color:#fff2dd;
  max-width:100%;overflow-wrap:anywhere;
}
.business-insight-copy em {
  display:block;
  font-style:normal;
  font-size:10px;
  line-height:1.6;
  margin-top:6px;
  color:#9cabb8;
  overflow-wrap:anywhere;
}
.report-insight { padding-right:17px; }
.report-insight .business-insight-copy strong {
  font-size:clamp(13px,1.2vw,16px);
  letter-spacing:0;
  line-height:1.45;
}
.insight-soon {
  position:absolute;
  right:12px;top:11px;
  font-size:8px;font-weight:700;letter-spacing:.07em;
  color:#e7c898;
}
.report-insight .business-insight-copy { padding-top:14px; }
.business-stage[data-current-view="business"] .business-insight {
  border-color:rgba(143,192,217,.23);
  background:linear-gradient(136deg,rgba(26,48,68,.92),rgba(9,27,45,.96));
}
.business-stage[data-current-view="business"] .business-insight:first-child .business-insight-icon {
  color:#afd8f0;background:rgba(120,174,217,.13);
}
html[lang="my"] .business-insight-copy small { letter-spacing:0;line-height:1.85;font-size:10px; }
html[lang="my"] .business-insight-copy em {line-height:1.85; }
html[lang="my"] .report-insight .business-insight-copy strong { line-height:1.85; }
@media (max-width:1050px){
  .business-insight { padding:14px 12px;gap:9px; }
  .business-insight-icon {width:28px;height:28px;flex-basis:28px;}
  .business-insight-copy strong {font-size:clamp(14px,1.7vw,20px);}
}
@media (max-width:760px){
  .business-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .business-insight:last-child{grid-column:1/-1;min-height:94px;}
  .business-visual-frame img{object-position:62% 50%;}
}
@media (max-width:620px){
  .hero::before{
    background-image:
      linear-gradient(180deg,rgba(3,10,21,.83) 0%,rgba(4,10,21,.68) 48%,rgba(4,10,21,.24) 70%,#040b15 100%),
      url("./cinematic-lake.webp");
    background-size:cover,cover;
    background-position:center,60% center;
  }
  .hero-art {min-height:clamp(245px,77vw,335px);}
  .hero-device-cinematic {width:140%;left:-20%;top:49%;}
  .business-visual-frame {min-height:228px;}
  .business-visual-frame img {object-position:65% center;}
}
@media (max-width:520px){
  .business-insight-grid {grid-template-columns:1fr;gap:8px;margin-top:9px;}
  .business-insight, .business-insight:last-child {grid-column:auto;min-height:76px;padding:13px 12px;}
  .business-insight-copy strong {font-size:18px;}
  .report-insight .business-insight-copy strong {font-size:14px;}
  .business-insight-copy em {font-size:10px;}
  .business-insight-icon {width:29px;height:29px;flex-basis:29px;}
  .business-ui-heading {flex-wrap:wrap;}
  .business-demo-period {white-space:normal;text-align:right;}
  .business-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .business-activity-row {min-width:0;}
  .business-activity-row [data-business-text]{min-width:0;overflow-wrap:anywhere;}
}
@media (max-width:360px){
  .hero-device-cinematic{width:147%;left:-24%;}
  .business-insight-copy strong{font-size:17px;}
}
@media (prefers-reduced-motion:reduce) {
  .business-insight{transition:none;}
}


/* ==============================================================
   L1.7 — Hero-only image composition (isolated Landing preview)
   Desktop: the original premium photograph is ONE unified scene.
   Small screens: the device shot is an intentional inset photo
   with a visible frame, never an overlapping second landscape.
   This changes no Business, finance, language or auth behavior.
   ============================================================== */
@media (min-width:901px) {
  .hero::before {
    inset:-40px -9vw -70px;
    background-image:
      linear-gradient(90deg,
        rgba(3,10,21,.88) 0%,
        rgba(3,10,21,.81) 21%,
        rgba(5,11,20,.66) 37%,
        rgba(6,13,23,.29) 59%,
        rgba(5,12,22,.08) 81%),
      linear-gradient(180deg,
        rgba(2,7,15,.30) 0%,
        rgba(3,10,19,.02) 34%,
        rgba(3,10,19,.14) 68%,
        rgba(3,10,19,.82) 100%),
      url("./personal-business-concept.webp");
    background-position:center,center,center 52%;
    background-size:cover,cover,cover;
    background-repeat:no-repeat;
    background-blend-mode:normal;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
  }
  .hero::after {
    background:radial-gradient(ellipse at 70% 72%,rgba(236,165,93,.10),transparent 64%);
    opacity:.4;
  }
  .hero-art { min-height:470px; pointer-events:none; }
  /* The same picture already fills the full Hero; never overlay it again. */
  .hero-art.is-photo-ready .hero-device-cinematic {display:none;}
  .hero-art.is-photo-ready .hero-halo {opacity:0;}
  .hero-art.is-photo-ready .demo-disclaimer {
    bottom:14px;
    right:4px;
    max-width:270px;
    padding:8px 13px;
    background:rgba(3,11,20,.73);
    text-align:center;
  }
  .hero-copy::before {
    background:linear-gradient(90deg,rgba(3,11,22,.56),rgba(4,13,23,.17) 73%,transparent);
    border-radius:18px;
  }
}
@media (min-width:901px) and (max-width:1199px) {
  .hero::before {background-position:center,center,58% 50%;}
  .hero-art {min-height:405px;}
  .hero-art.is-photo-ready .demo-disclaimer {right:0;}
}
@media (max-width:900px) {
  .hero::before {
    background-image:
      linear-gradient(180deg,rgba(3,10,20,.85),rgba(4,12,23,.74) 45%,rgba(4,11,21,.86) 83%,#050e19),
      url("./cinematic-lake.webp");
    background-position:center,63% 46%;
    background-size:cover,cover;
    background-repeat:no-repeat;
  }
  .hero-art {
    width:min(700px,100%);
    min-height:clamp(280px,49vw,390px);
    position:relative;
    overflow:hidden;
    padding:0;
    border-radius:19px;
    border:1px solid rgba(237,207,157,.46);
    background:linear-gradient(145deg,#162a3e,#071421 75%);
    box-shadow:0 28px 70px rgba(0,0,0,.37),inset 0 1px 0 rgba(255,243,218,.12);
    margin:14px auto 0;
    isolation:isolate;
  }
  .hero-art.is-photo-ready .hero-device-cinematic {
    display:block;
    position:absolute;
    inset:0;
    left:0;
    top:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:58% 50%;
    transform:none;
    opacity:1;
    filter:saturate(.96) contrast(1.035);
    -webkit-mask-image:none;
    mask-image:none;
  }
  .hero-art.is-photo-ready .hero-halo {opacity:0;}
  .hero-art .demo-disclaimer,
  .hero-art.is-photo-ready .demo-disclaimer {
    bottom:9px;
    right:9px;
    max-width:calc(100% - 18px);
    text-align:right;
    border-color:rgba(248,221,172,.28);
    background:rgba(4,13,24,.84);
    font-size:9px;
    line-height:1.5;
  }
}
@media (max-width:620px) {
  .hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(3,9,19,.88) 0%,
        rgba(3,9,19,.76) 45%,
        rgba(4,11,21,.86) 78%,
        #050e19 100%),
      url("./cinematic-lake.webp");
    background-position:center,59% 50%;
    background-size:cover,cover;
  }
  .hero-art {
    min-height:clamp(196px,57vw,315px);
    width:100%;
    margin-top:4px;
    border-radius:15px;
  }
  .hero-art.is-photo-ready .hero-device-cinematic {object-position:56% center;}
  .hero-art .demo-disclaimer,
  .hero-art.is-photo-ready .demo-disclaimer {font-size:8px;bottom:7px;right:7px;}
  .hero-buttons {gap:10px;}
}
@media (max-width:370px) {
  .hero-art {min-height:190px;}
  .hero-art.is-photo-ready .hero-device-cinematic {object-position:54% center;}
}


/* ======================================================================
   L1.20 — Brighter cinematic surfaces + responsive mobile/tablet polish
   Scope: landing-preview.html only. No production, auth, app or user data.
   This file loads last and safely overrides earlier dark photo overlays.
   ====================================================================== */
:root{
  --bg:#0a1927;
  --bg2:#10263a;
  --panel:rgba(22,48,68,.79);
  --panel-strong:rgba(16,39,59,.94);
  --line:rgba(194,218,228,.23);
  --line-gold:rgba(244,204,141,.38);
  --secondary:#d3dce1;
  --muted:#b0c0ca;
}
body{
  background:
    radial-gradient(ellipse 65% 35% at 82% 0%,rgba(212,159,86,.085),transparent 80%),
    linear-gradient(180deg,#091c2c 0%,#0d2435 43%,#081b2a 74%,#071724 100%);
}
.site-header{
  background:linear-gradient(180deg,rgba(10,27,42,.91),rgba(12,31,47,.83));
  border-bottom-color:rgba(234,201,152,.21);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  backdrop-filter:blur(24px) saturate(130%);
}
.ambient-a{opacity:.82;filter:blur(55px)}
.ambient-b{opacity:.72;filter:blur(58px)}
/* The shared Hero photograph remains a single image; lift shadows
   without losing dark contrast behind the fixed multilingual text. */
.hero::before{
  background-image:
    linear-gradient(90deg,
      rgba(7,20,34,.76) 0%,rgba(7,20,35,.64) 26%,
      rgba(8,21,36,.25) 56%,rgba(8,21,36,.04) 91%),
    linear-gradient(180deg,
      rgba(5,15,26,.19),rgba(7,20,35,.02) 38%,
      rgba(8,22,37,.10) 74%,rgba(8,22,36,.47) 100%),
    url("./cinematic-lake.webp");
  background-size:cover,cover,cover;
  background-position:center,center,center 50%;
}
.hero::after{
  background:radial-gradient(ellipse at 70% 65%,rgba(243,188,113,.21),rgba(138,172,194,.07) 45%,transparent 72%);
  opacity:.65;
}
.hero-copy::before{
  background:linear-gradient(90deg,rgba(8,24,39,.60),rgba(8,24,39,.13) 74%,transparent);
}
.hero-art.is-photo-ready .hero-device-cinematic{
  filter:saturate(1.11) contrast(1.025) brightness(1.095) drop-shadow(0 23px 36px rgba(4,14,25,.28));
}
.hero-art.is-photo-ready .demo-disclaimer{
  background:rgba(10,25,39,.83);
  border-color:rgba(255,220,157,.35);
}
/* Photography should be visible, not covered by a near-black film. */
#business.business-section{
  background:linear-gradient(180deg,#0c2335 0%,#0e293b 47%,#0a2030 100%);
}
#business.business-section::before{
  background-image:
    linear-gradient(180deg,
      rgba(9,23,38,.70) 0%,rgba(9,24,39,.52) 36%,
      rgba(10,26,40,.46) 68%,rgba(9,24,38,.72) 100%),
    radial-gradient(ellipse at 77% 36%,rgba(247,185,98,.18),transparent 62%),
    url("./cinematic-lake.webp");
  background-position:center,center,center 44%;
  background-size:cover,cover,cover;
}
#business .business-visual-strip{
  border-color:rgba(251,212,151,.61);
  background:linear-gradient(139deg,#213e50,#102d41 72%,#0d293d);
  box-shadow:inset 0 1px rgba(255,248,224,.17),0 25px 65px rgba(0,0,0,.23),0 0 27px rgba(241,182,104,.11);
}
#business .business-visual-frame img{
  filter:saturate(1.15) contrast(1.035) brightness(1.14);
}
#business .business-visual-frame::after{
  background:
    linear-gradient(90deg,rgba(15,39,57,.73),rgba(14,39,57,.16) 23%,transparent 58%),
    linear-gradient(0deg,rgba(10,27,41,.24),transparent 42%);
}
#business .business-visual-text{
  background:
    radial-gradient(ellipse at 6% 0,rgba(255,211,139,.17),transparent 78%),
    linear-gradient(105deg,rgba(25,54,73,.63),rgba(14,40,57,.23));
}
#business .business-stage{
  background:
    radial-gradient(ellipse at 100% 0%,rgba(244,188,110,.15),transparent 68%),
    linear-gradient(155deg,#17384e,#0b2438 76%,#091e31);
  border-color:rgba(248,211,150,.60);
}
#business .business-summary{
  background:radial-gradient(ellipse at 95% 0%,rgba(251,202,136,.17),transparent 68%),linear-gradient(130deg,#244b61,#14364d 65%,#0e2c42);
}
#business .business-stat,
#business .business-allocation,
#business .business-activity{
  background:linear-gradient(143deg,#1a3d53,#0e2c43 88%);
  border-color:rgba(177,211,228,.35);
}
/* Lighten section transitions so they feel like one editorial scene. */
.showcase-v2 .showcase-card{
  background:radial-gradient(ellipse at 0 0,rgba(244,190,103,.11),transparent 76%),linear-gradient(148deg,#19384d,#0c2539);
  border-color:rgba(239,202,142,.48);
}
.features-explorer.app-showcase::before{
  background:
    linear-gradient(180deg,rgba(9,25,40,.69),rgba(10,28,44,.56) 46%,rgba(9,26,40,.78)),
    url("./cinematic-lake.webp") center 48%/cover no-repeat;
}
.features-explorer.app-showcase .product-picker{
  background:radial-gradient(ellipse at 0 0,rgba(251,211,148,.14),transparent 77%),linear-gradient(150deg,#1b3c50,#0c283f 68%,#091e31);
  border-color:rgba(248,208,142,.58);
}
.features-explorer.app-showcase .product-stage{
  background:radial-gradient(ellipse at 97% 0,rgba(243,191,119,.16),transparent 72%),linear-gradient(151deg,#173a4f,#09273c);
  border-color:rgba(250,214,158,.78);
}
.features-explorer.app-showcase .app-sim-content{
  background:radial-gradient(ellipse at 93% 0,rgba(242,186,108,.14),transparent 68%),linear-gradient(151deg,#12334a,#0a2539 81%);
}
.features-explorer.app-showcase .app-story{
  background:radial-gradient(ellipse at 10% 0,rgba(245,193,118,.16),transparent 74%),linear-gradient(160deg,#1b3a4d,#0b2639 80%);
  border-color:rgba(247,206,140,.41);
}
#about.why-section{
  background:radial-gradient(ellipse at 0 25%,rgba(248,194,119,.13),transparent 78%),linear-gradient(145deg,#133148,#0c2739 83%);
}
#about .benefit-grid article{
  background:radial-gradient(ellipse at 0 0,rgba(245,190,114,.12),transparent 83%),linear-gradient(150deg,#1b3b50,#112e43 85%);
  border-color:rgba(188,215,228,.35);
}
#security .security-panel{
  background:radial-gradient(ellipse at 0 49%,rgba(242,190,111,.17),transparent 65%),linear-gradient(135deg,#1d3b50,#102e43 66%,#0d2639);
  border-color:rgba(248,208,147,.59);
}
.closing-section .closing-premium-panel{
  background:radial-gradient(ellipse at 50% 15%,rgba(251,206,136,.21),transparent 77%),radial-gradient(ellipse at 100% 100%,rgba(121,170,196,.14),transparent 78%),linear-gradient(150deg,#224357,#123247 65%,#0d2638);
  border-color:rgba(252,218,159,.65);
}
.site-footer{
  background:radial-gradient(ellipse at 0 0,rgba(228,179,102,.09),transparent 77%),linear-gradient(180deg,#10283b,#0a1e2e 85%);
}
/* Responsive containers and safe text wrapping, without clipping
   content or distorting illustrative App screenshots. */
#business .business-shell,
#business .business-intro,
#business .business-visual-strip,
#business .business-visual-text,
#business .business-stage,
#business .business-stage-body,
#business .business-ui,
#business .business-summary,
#business .business-insight-grid,
#business .business-stat-grid,
#business .business-lower,
#business .business-allocation{
  min-width:0;
  max-width:100%;
}
#business .business-heading h2,
#business .business-visual-text h3,
#business .business-visual-text p,
#about .why-intro h2,
#security .security-copy h2{
  overflow-wrap:break-word;
}
#business .business-visual-frame img{
  max-width:none;
}
@media(min-width:901px){
  .hero::before{
    inset:-40px -9vw -70px;
    background-image:
      linear-gradient(90deg,rgba(7,18,31,.77) 0%,rgba(7,18,31,.64) 24%,rgba(7,18,31,.36) 44%,rgba(7,18,31,.08) 72%,rgba(7,18,31,.02) 100%),
      linear-gradient(180deg,rgba(6,16,30,.23),transparent 39%,rgba(6,17,28,.12) 73%,rgba(8,22,36,.55) 100%),
      url("./personal-business-concept.webp");
    background-size:cover,cover,cover;
    background-position:center,center,center 51%;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
  }
}
@media(min-width:621px) and (max-width:1024px){
  .container{width:min(var(--max),calc(100% - 44px))}
  .header-inner{gap:12px}
  .section{padding-block:clamp(60px,7vw,92px)}
  .hero{gap:22px}
  .hero::before{
    background-image:
      linear-gradient(180deg,rgba(8,21,35,.64),rgba(9,24,38,.37) 45%,rgba(9,24,39,.60) 100%),
      url("./cinematic-lake.webp");
    background-size:cover,cover;
    background-position:center,61% 47%;
  }
  .hero-art{
    max-width:100%;min-width:0;
  }
  .showcase-v2 .showcase-card{min-width:0}
  .features-explorer.app-showcase .product-explorer{min-width:0}
  .features-explorer.app-showcase .product-picker,
  .features-explorer.app-showcase .product-stage,
  .features-explorer.app-showcase .app-story{max-width:100%}
  #business .business-visual-frame{min-height:260px}
  #business .business-visual-frame img{object-position:62% 50%}
  #business .business-stage{width:100%}
  #about .why-layout,#security .security-panel{min-width:0}
}
@media(max-width:620px){
  .container{width:calc(100% - 24px)}
  .section{padding-block:clamp(55px,9vw,80px)}
  .site-header .header-inner{width:calc(100% - 24px)}
  .site-header .brand-copy{max-width:clamp(120px,42vw,205px)}
  .site-header .brand-copy strong{font-size:clamp(12px,3.6vw,17px);letter-spacing:.07em}
  .site-header .brand-copy small{font-size:clamp(6px,1.48vw,8px);letter-spacing:.07em}
  .site-header .header-actions{min-width:0;gap:6px}
  .site-header .locale-trigger{min-width:0}
  .site-header .locale-active-name{max-width:60px;overflow:hidden;text-overflow:ellipsis}
  .hero{min-width:0}
  .hero::before{
    background-image:
      linear-gradient(180deg,rgba(8,20,34,.66) 0%,rgba(8,21,35,.49) 43%,rgba(8,23,36,.40) 76%,rgba(8,22,36,.65) 100%),
      url("./cinematic-lake.webp");
    background-size:cover,cover;
    background-position:center,59% 50%;
  }
  .hero-copy::before{
    background:linear-gradient(100deg,rgba(9,23,37,.57),rgba(10,25,39,.12) 89%);
  }
  .hero-art{
    width:100%;min-width:0;
    border-color:rgba(255,219,166,.61);
    box-shadow:0 18px 50px rgba(0,0,0,.22),0 0 25px rgba(247,198,125,.085);
  }
  .hero-art.is-photo-ready .hero-device-cinematic{
    filter:brightness(1.12) saturate(1.12) contrast(1.025);
  }
  #business.business-section::before{
    background-image:
      linear-gradient(180deg,rgba(9,25,40,.62),rgba(10,26,41,.44) 48%,rgba(9,23,39,.68) 100%),
      url("./cinematic-lake.webp");
    background-size:cover,cover;
    background-position:center,57% 50%;
  }
  #business .business-shell{width:calc(100% - 24px)}
  #business .business-intro{grid-template-columns:minmax(0,1fr)}
  #business .business-visual-strip{grid-template-columns:minmax(0,1fr)}
  #business .business-visual-text{padding:clamp(17px,5vw,24px)}
  #business .business-visual-frame{min-width:0;min-height:clamp(220px,58vw,300px)}
  #business .business-visual-frame::after{
    background:linear-gradient(180deg,rgba(15,39,56,.52),transparent 27%),linear-gradient(0deg,rgba(10,27,41,.19),transparent 42%);
  }
  #business .business-photo-caption{max-width:calc(100% - 22px)}
  #business .business-stage{width:100%;max-width:100%;min-width:0}
  #business .business-stage-top,
  #business .business-mode-context,
  #business .business-ui{min-width:0}
  #business .business-visual-text h3{font-size:clamp(23px,6.4vw,29px)}
  .features-explorer.app-showcase .product-explorer{grid-template-columns:minmax(0,1fr)}
  .features-explorer.app-showcase .product-stage{width:100%;max-width:100%}
  .features-explorer.app-showcase .product-panel{min-width:0}
  #about .benefit-grid article{min-width:0}
  #security .security-panel{max-width:100%}
  .closing-section .closing-premium-panel{max-width:100%}
  .closing-section .closing-inner h2{overflow-wrap:break-word}
  .site-footer .footer-links{min-width:0}
}
@media(max-width:360px){
  .container,.site-header .header-inner,#business .business-shell{width:calc(100% - 20px)}
  #business .business-visual-text{padding:16px}
  .hero-art{min-height:210px}
  .closing-section .closing-inner h2{font-size:clamp(28px,8.1vw,32px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-art.is-photo-ready .hero-device-cinematic{transition:none}
}


/* ================================================================
   L1.21 — Prevent horizontal page panning in mobile device mode.
   Verified at 393px: document scrollWidth 573px due to global
   decorative .ambient-a/.ambient-b extending beyond viewport.
   Contain horizontal overflow at root, remove purely decorative
   offscreen absolute glows on handheld/tablet screens.
   ================================================================ */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden; /* Safari fallback for browsers without clip */
  overscroll-behavior-x:none;
}
@supports (overflow:clip){
  html{overflow-x:clip}
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
main{
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
@media(max-width:1024px){
  .ambient-a,.ambient-b{display:none}
  .hero,.showcase-v2,.features-explorer,#business,#about,#security,.closing-section{
    max-width:100%;
  }
}
@media(max-width:620px){
  .business-section .business-shell,
  .features-explorer.app-showcase .product-explorer,
  .features-explorer.app-showcase .product-picker,
  .features-explorer.app-showcase .product-stage,
  .features-explorer.app-showcase .app-story{
    min-width:0;
    max-width:100%;
  }
}