/* IVVI single-page shell — global styles shared by both views.
   View-specific rules live in app-landing.css / app-detail.css (CSS @scope),
   so the two stylesheets never collide. */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#0c1028;
  color:#eaf2ff;
  font-family:'Chakra Petch','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:opacity .24s ease;
}
:root{
  --txt:#eaf2ff; --muted:#9fb0d6;
  --srm:#4f8fff; --pim:#a96bff; --web:#2ee6c6; --crm:#ff5c93; --wms:#ffae42;
}

/* the two view containers; only one shown at a time */
.view{position:relative;min-height:100vh}
.view[hidden]{display:none}

/* per-view scroll: detail scrolls when content exceeds the screen (text passes behind
   the fixed petal band); landing stays a single screen on desktop, scrolls on mobile */
html{scrollbar-gutter:stable}
body[data-view="landing"]{overflow-y:hidden}
@media (max-height:700px){ body[data-view="landing"]{overflow-y:auto} #view-landing .stage{height:auto;min-height:100vh} #view-landing .rail-left{padding-bottom:96px} }
body[data-view="detail"]{overflow-y:auto}
@media (max-width:860px){
  body[data-view="landing"]{overflow-y:auto}
}

/* cross-view fade when navigating */
body.view-fade{opacity:0}

/* spiral-field toggle (kept global so the body[data-bg] ancestor selector is reliable) */
body[data-bg="spiral"] #view-landing .field::after{opacity:0}
body[data-bg="spiral"] #view-landing .spiral-field{opacity:1}

/* ---- mobile sticky contact CTA (replaces the topbar button ≤860px) ---- */
.m-cta{display:none}
@media (max-width:860px){
  /* every view drops its topbar CTA; the sticky bar takes over */
  #view-detail .topbar .contact,
  #view-about  .topbar .contact{display:none}
  body{padding-bottom:74px}

  .m-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(12,16,40,0),rgba(12,16,40,.9) 42%,#0c1028);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid rgba(159,216,255,.14);
    pointer-events:none;              /* transparent top scrim never blocks the flower */
  }
  .m-cta-btn{
    pointer-events:auto;display:flex;align-items:center;justify-content:center;
    text-decoration:none;white-space:nowrap;
    font-family:'Chakra Petch','Segoe UI',sans-serif;font-weight:700;font-size:14px;letter-spacing:.4px;
    color:var(--c,#4f8fff);background:#fff;padding:11px 18px;border-radius:14px;
    /* glow derived from the page accent (--c), like the desktop button;
       on landing --c is unset so it falls back to the default blue */
    box-shadow:0 8px 30px color-mix(in srgb,var(--c,#4f8fff) 60%,transparent), 0 0 22px color-mix(in srgb,var(--c,#4f8fff) 35%,transparent);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .m-cta-btn:active{transform:translateY(1px);box-shadow:0 6px 18px color-mix(in srgb,var(--c,#4f8fff) 45%,transparent), 0 0 16px color-mix(in srgb,var(--c,#4f8fff) 30%,transparent)}
}
@media (prefers-reduced-motion:reduce){.m-cta-btn{transition:none}}

/* ---- language toggle (shared chrome — same size on every page) ---- */
.lang-toggle{display:inline-flex;gap:2px;background:rgba(159,216,255,.06);
  border:1px solid rgba(159,216,255,.2);border-radius:999px;padding:3px}
.lang-toggle button{border:0;background:none;cursor:pointer;font-family:'Chakra Petch',sans-serif;
  font-weight:700;font-size:12.5px;letter-spacing:1px;color:#9fb0d6;padding:8px 14px;border-radius:999px;transition:.18s}
.lang-toggle button.on{background:#9fd8ff;color:#0a0a18}
.lang-toggle button:not(.on):hover{color:#fff}
.top-right{display:flex;align-items:center;gap:12px}