/* ============================================================
   QPS — Quark Professional Services
   Dark cinematic 3D site. Black canvas, blue/cyan glow.
   ============================================================ */

:root{
  --bg:#000307;
  --ink:#eaf2ff;
  --ink-dim:#9fb2cc;
  --ink-faint:#5f7390;
  --cyan:#38d9ff;
  --blue:#2f7bff;
  --line:rgba(120,170,230,.16);
  --line-strong:rgba(140,190,255,.34);
  --glass:rgba(8,16,30,.55);
  /* clean unified panel system — translucent blue glass (no flat black) */
  --panel:linear-gradient(155deg,rgba(76,126,196,.17),rgba(16,30,54,.07));
  --panel-edge:rgba(155,198,255,.17);
  --panel-edge-hi:rgba(150,195,255,.34);
  --hair:rgba(140,180,235,.12);
  --font:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh}

/* ---- fixed 3D layer ---- */
#scene-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; display:block;
}
/* atmospheric aurora behind the nav, like the reference */
.aurora{
  position:fixed; left:0; top:-26vh; width:100vw; height:60vh;
  z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 80% at 22% 30%, rgba(48,140,255,.30), transparent 70%),
    radial-gradient(50% 80% at 78% 18%, rgba(28,210,200,.16), transparent 70%);
  filter:blur(20px); opacity:.9;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,2,7,.6) 100%);
}

/* ============================================================
   HEADER
   ============================================================ */
header.nav{
  position:fixed; top:0; left:0; width:100%; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.nav.solid{
  background:linear-gradient(180deg,rgba(2,6,14,.78),rgba(2,6,14,.36));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; color:inherit}
.brand-logo{height:24px; width:auto; display:block; filter:drop-shadow(0 0 12px rgba(120,200,255,.22)); transition:filter .25s}
.brand:hover .brand-logo{filter:drop-shadow(0 0 16px rgba(120,200,255,.45))}

.menu{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.menu a{
  font-size:13px; letter-spacing:.04em; color:var(--ink-dim);
  text-decoration:none; transition:color .25s; position:relative; padding:4px 0;
}
.menu a:hover{color:var(--ink)}
.menu a.active{color:var(--ink)}
.menu a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--cyan); transition:width .3s ease; box-shadow:0 0 6px var(--cyan);
}
.menu a:hover::after, .menu a.active::after{width:100%}

.nav-right{display:flex; align-items:center; gap:16px}
.lang{
  display:flex; align-items:center; font-family:var(--mono); font-size:11px;
  border:1px solid var(--line-strong); border-radius:999px; overflow:hidden;
}
.lang button{
  background:none; border:none; color:var(--ink-faint); cursor:pointer;
  padding:6px 11px; font-family:inherit; font-size:11px; letter-spacing:.08em;
  transition:.2s;
}
.lang button.on{color:#021018; background:var(--cyan); box-shadow:0 0 16px rgba(56,217,255,.5)}

.cta-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; letter-spacing:.04em; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:9px 17px; text-decoration:none; cursor:pointer;
  background:rgba(20,40,70,.25); transition:.25s; white-space:nowrap;
}
.cta-pill:hover{border-color:var(--cyan); box-shadow:0 0 22px rgba(56,217,255,.28); background:rgba(30,70,120,.35)}

/* ---------- hamburger + mobile menu ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:11px; flex:none;
  background:rgba(20,40,70,.25); border:1px solid var(--line-strong);
  border-radius:11px; cursor:pointer; transition:.25s;
}
.nav-toggle:hover{border-color:var(--cyan)}
.nav-toggle span{display:block; height:1.6px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .25s ease; transform-origin:center}
.nav-toggle.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.mobile-menu{
  position:fixed; inset:0; z-index:39;
  background:linear-gradient(180deg,rgba(2,6,14,.97),rgba(3,8,18,.99));
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px clamp(28px,8vw,60px) 48px;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .35s ease, transform .35s ease;
}
.mobile-menu.open{opacity:1; pointer-events:auto; transform:none}
.mm-links{display:flex; flex-direction:column}
.mm-links a{
  font-size:clamp(24px,7vw,32px); font-weight:500; color:var(--ink);
  text-decoration:none; padding:18px 0; border-bottom:1px solid var(--line);
  letter-spacing:.01em; transition:color .2s, padding-left .25s;
}
.mm-links a:hover, .mm-links a.active{color:var(--cyan); padding-left:8px}
.mm-cta{margin-top:32px; justify-content:center; width:100%}
body.menu-open{overflow:hidden}
.cta-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}

.menu-toggle{display:none; background:none; border:none; color:var(--ink); cursor:pointer}

/* ============================================================
   CONTENT — sections scroll over the fixed canvas
   ============================================================ */
main{position:relative; z-index:10}
.act{
  min-height:100vh; width:100%;
  display:flex; align-items:center;
  padding:120px clamp(20px,6vw,90px);
  position:relative;
}
.wrap{width:100%; max-width:1240px; margin:0 auto}

/* reveal animation driven by .in class from JS */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.84,.34,1)}
.in .reveal{opacity:1; transform:none}
.in .reveal.d1{transition-delay:.08s}
.in .reveal.d2{transition-delay:.16s}
.in .reveal.d3{transition-delay:.24s}
.in .reveal.d4{transition-delay:.32s}
.in .reveal.d5{transition-delay:.40s}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cyan); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* ---------- HERO ---------- */
#hero{align-items:flex-start; justify-content:center; text-align:center; padding-top:15vh}
#hero .wrap{max-width:1000px; display:flex; flex-direction:column; align-items:center}
.qps-lock{display:flex; align-items:center; gap:22px}
.qps-hero-logo{width:min(82vw,640px); height:auto; display:block; filter:drop-shadow(0 0 44px rgba(56,140,255,.38))}
.hero-title{
  font-size:clamp(58px,11vw,150px); font-weight:600; letter-spacing:.02em;
  line-height:.95; margin:26px 0 0;
  text-shadow:0 0 40px rgba(40,110,255,.32);
}
.hero-sub-h{
  font-size:clamp(20px,2.6vw,34px); font-weight:500; line-height:1.25;
  margin-top:22px; max-width:760px; color:var(--ink);
}
.hero-lede{
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.65; color:var(--ink-dim);
  margin-top:22px; max-width:600px; text-wrap:pretty;
}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; justify-content:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:14px; letter-spacing:.03em; text-decoration:none;
  padding:14px 24px; border-radius:999px; transition:.25s; border:1px solid transparent;
}
.btn-primary{background:linear-gradient(120deg,var(--blue),var(--cyan)); color:#02101e; font-weight:600; box-shadow:0 0 30px rgba(56,217,255,.35)}
.btn-primary:hover{box-shadow:0 0 44px rgba(56,217,255,.6); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan); background:rgba(30,70,120,.3)}

.scroll-hint{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:20;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--ink-faint);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:opacity .5s;
}
.scroll-hint .bar{width:1px; height:38px; background:linear-gradient(var(--cyan),transparent); position:relative; overflow:hidden}
.scroll-hint .bar::after{content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{top:-40%}60%,100%{top:120%}}

/* ---------- VALUE (3 columns) ---------- */
#value .wrap{max-width:1180px}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:54px; max-width:720px}
.sec-head h2{font-size:clamp(30px,4.4vw,52px); font-weight:600; line-height:1.05; letter-spacing:-.01em}
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.vcol{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px;
  padding:36px 30px; min-height:264px; display:flex; flex-direction:column;
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 58px 2px rgba(4,9,20,.62);
  transition:border-color .35s, transform .35s;
}
.vcol:hover{border-color:var(--panel-edge-hi); transform:translateY(-3px)}
.vcol .num{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.12em}
.vcol h3{font-size:21px; font-weight:600; margin:20px 0 13px; line-height:1.2; letter-spacing:-.01em}
.vcol p{font-size:14.5px; line-height:1.62; color:var(--ink-dim); text-wrap:pretty}

/* ---------- SERVICES constellation ---------- */
#services{display:block; padding:0; min-height:auto}
.svc-stage{min-height:100vh; display:flex; align-items:flex-start; padding:24vh clamp(20px,6vw,90px) 0}
.svc-stage .wrap{max-width:1240px; margin:0 auto}
.svc-intro{max-width:560px}
.svc-list-wrap{min-height:100vh; display:flex; align-items:center; padding:80px clamp(20px,6vw,90px) 120px}
.svc-list-wrap .wrap{max-width:1240px; margin:0 auto}
/* ---------- SERVICE PILLARS (one 3D beat each) ---------- */
.svc-pillars{position:relative}
.pillar{min-height:100vh; display:flex; align-items:center; padding:80px clamp(20px,6vw,90px)}
.pillar .wrap{max-width:1240px; margin:0 auto; display:flex; width:100%}
.pillar-inner.left{justify-content:flex-start}
.pillar-inner.right{justify-content:flex-end}
.pillar-text{
  max-width:438px; padding:34px 34px; border-radius:18px;
  background:linear-gradient(155deg,rgba(38,66,112,.34),rgba(10,20,40,.20));
  border:1px solid var(--panel-edge); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 66px 4px rgba(4,9,20,.6), 0 24px 60px -34px rgba(0,4,12,.7);
}
.pillar-text .p-idx{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.2em; margin-bottom:16px}
.pillar-text h3{font-size:clamp(25px,3vw,38px); font-weight:600; line-height:1.06; letter-spacing:-.015em}
.pillar-text .p-sum{font-size:15.5px; color:var(--ink-dim); line-height:1.6; margin-top:15px; text-wrap:pretty}
.pillar-text .p-scope-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:28px 0 14px; display:flex; align-items:center; gap:10px}
.pillar-text .p-scope-label::before{content:""; width:18px; height:1px; background:var(--panel-edge-hi)}
.pillar-text .p-scope{list-style:none; display:flex; flex-direction:column; gap:11px}
.pillar-text .p-scope li{font-size:13.5px; color:var(--ink); line-height:1.45; padding-left:20px; position:relative}
.pillar-text .p-scope li::before{content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* floating node labels projected from 3D */
#labels{position:fixed; inset:0; z-index:9; pointer-events:none}
.node-label{
  position:absolute; transform:translate(-50%,-50%); opacity:0; transition:opacity .4s;
  font-family:var(--mono); white-space:nowrap; text-align:center;
}
.node-label.show{opacity:1}
.node-label .ring{width:10px; height:10px; border:1px solid var(--cyan); border-radius:50%; margin:0 auto 8px; box-shadow:0 0 12px var(--cyan); position:relative}
.node-label .ring::after{content:""; position:absolute; inset:3px; background:var(--cyan); border-radius:50%}
.node-label .lbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 8px #000, 0 0 12px rgba(0,4,10,.9)}
.node-label .sub{font-size:9px; letter-spacing:.1em; color:var(--cyan); margin-top:3px; text-shadow:0 1px 6px #000}
.node-label.core .ring{width:16px; height:16px; border-color:#fff; box-shadow:0 0 22px #8fdcff}
.node-label.core .lbl{color:var(--cyan); font-size:12px}
.node-label.core .core-mark{width:clamp(74px,9vw,130px); height:auto; display:block; filter:drop-shadow(0 0 18px rgba(120,200,255,.7)) drop-shadow(0 0 42px rgba(56,140,255,.42))}

/* ---------- APPROACH ---------- */
#approach .wrap{max-width:1080px}
.steps{display:flex; flex-direction:column; gap:0; margin-top:50px; position:relative}
.step{
  display:grid; grid-template-columns:90px 1fr; gap:30px; padding:30px 0;
  border-top:1px solid var(--line); position:relative;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step .st-num{font-family:var(--mono); font-size:clamp(34px,5vw,60px); font-weight:400; color:transparent; -webkit-text-stroke:1px var(--line-strong); line-height:1; transition:.4s}
.step:hover .st-num{-webkit-text-stroke:1px var(--cyan); text-shadow:0 0 30px rgba(56,217,255,.4)}
.step .st-body h3{font-size:clamp(20px,2.3vw,28px); font-weight:600}
.step .st-body p{font-size:15px; color:var(--ink-dim); margin-top:10px; line-height:1.6; max-width:620px; text-wrap:pretty}

/* ---------- ABOUT ---------- */
#about .wrap{max-width:1180px}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start}
.about-copy p{font-size:16px; line-height:1.7; color:var(--ink-dim); margin-top:18px; text-wrap:pretty}
.about-copy p.lead{font-size:clamp(19px,2.1vw,24px); color:var(--ink); line-height:1.45}
.values{display:flex; flex-direction:column; gap:14px}
.value-card{border:1px solid var(--panel-edge); border-radius:14px; padding:22px 24px; background:var(--panel); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 50px 2px rgba(4,9,20,.58); transition:border-color .3s, transform .3s}
.value-card:hover{border-color:var(--panel-edge-hi); transform:translateY(-2px)}
.value-card h4{font-size:17px; font-weight:600; display:flex; align-items:center; gap:10px}
.value-card h4 i{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); font-style:normal}
.value-card p{font-size:14px; color:var(--ink-dim); margin-top:9px; line-height:1.55}

/* ---------- CONTACT ---------- */
#contact{min-height:100vh}
#contact .wrap{max-width:1080px}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.contact-lede{font-size:16px; line-height:1.7; color:var(--ink-dim); margin-top:20px; text-wrap:pretty}
.contact-meta{margin-top:34px; display:flex; flex-direction:column; gap:16px}
.contact-meta a, .contact-meta div{font-family:var(--mono); font-size:13px; color:var(--ink-dim); text-decoration:none; display:flex; align-items:center; gap:12px}
.contact-meta a:hover{color:var(--cyan)}
.contact-meta .k{color:var(--cyan); width:64px; flex:none}
form{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.field input, .field textarea{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px;
  padding:13px 14px; color:var(--ink); font-family:var(--font); font-size:14px; transition:.25s;
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,217,255,.12)}
.field textarea{resize:vertical; min-height:120px}

/* ---------- FOOTER ---------- */
footer{
  position:relative; z-index:10; padding:60px clamp(20px,6vw,90px) 50px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,transparent,rgba(2,6,14,.7));
}
footer .f-logo{height:32px; width:auto; display:block; opacity:.95}
footer .f-att{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan); text-transform:uppercase}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transition:opacity 1s ease; 
}
#loader.done{opacity:0; pointer-events:none}
.load-ring{width:120px; height:120px; position:relative}
.load-ring svg{transform:rotate(-90deg); filter:drop-shadow(0 0 10px rgba(56,217,255,.9))}
.load-ring .lr-bg{fill:none; stroke:rgba(56,217,255,.12); stroke-width:1.5}
.load-ring .lr-fg{fill:none; stroke:var(--cyan); stroke-width:1.5; stroke-linecap:round; transition:stroke-dashoffset .2s linear}
.load-ring .lr-core{position:absolute; inset:0; display:grid; place-items:center}
.load-ring .lr-core b{font-family:var(--mono); font-size:13px; color:var(--cyan); letter-spacing:.1em}
.load-word{font-size:13px; letter-spacing:.4em; color:var(--ink-faint); font-family:var(--mono); text-transform:uppercase}
.load-word b{color:var(--ink); letter-spacing:.5em; font-weight:600}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .menu{display:none}
  .nav-toggle{display:flex}
  .nav-right .cta-pill{display:none}
  .cols3{grid-template-columns:1fr}
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:40px}
  form{grid-template-columns:1fr}
  .pillar-inner.left, .pillar-inner.right{justify-content:center}
  .pillar-text{max-width:560px; background:linear-gradient(155deg,rgba(38,66,112,.40),rgba(10,20,40,.26))}
  header.nav{padding:16px clamp(18px,5vw,32px)}
  footer .f-logo{height:26px}
}
@media (max-width:560px){
  .act{padding:100px 22px}
  .step{grid-template-columns:60px 1fr; gap:18px}
  .lang{order:-1}
  footer{padding:44px 22px 40px; gap:16px}
}

/* ============================================================
   MANAGED SERVICES — GLASS SUPPORT ASSISTANT
   ============================================================ */
.ms-section{position:relative; overflow:hidden}
.ms-grid{position:relative; z-index:2; display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,64px); align-items:center; max-width:1180px}
.ms-head{max-width:480px}
.ms-head h2{font-size:clamp(30px,4.2vw,50px); font-weight:600; line-height:1.04; letter-spacing:-.015em; margin-top:18px}
.ms-head p{font-size:16px; line-height:1.65; color:var(--ink-dim); margin-top:18px; text-wrap:pretty}
.ms-points{list-style:none; display:flex; flex-direction:column; gap:13px; margin-top:26px}
.ms-points li{font-size:14px; color:var(--ink); line-height:1.45; padding-left:22px; position:relative}
.ms-points li::before{content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 9px var(--cyan)}

/* glass card */
.ms-section .glass-card{position:relative; overflow:hidden; width:100%; max-width:540px; justify-self:end;
  border-radius:28px; padding:24px;
  background:linear-gradient(155deg,rgba(60,104,168,.26),rgba(12,22,42,.18));
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(160,200,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 70px 8px rgba(6,12,26,.5), 0 50px 110px -40px rgba(0,4,14,.92)}
.ms-section .glass-card::before{content:""; position:absolute; left:0; right:0; top:0; height:52%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}

.ms-section .chat-head{display:flex; align-items:center; gap:14px; padding:2px 2px 18px}
.ms-section .avatar{width:52px; height:52px; flex:none; border-radius:50%; position:relative; display:grid; place-items:center}
.ms-section .avatar .halo{position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg,#38d9ff,#2f7bff,#38d9ff); filter:blur(6px); opacity:.9; animation:msSpin 7s linear infinite}
@keyframes msSpin{to{transform:rotate(360deg)}}
.ms-section .avatar .disc{position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#0f2e52,#061427 70%); border:1px solid rgba(120,200,255,.5);
  box-shadow:inset 0 0 16px rgba(56,217,255,.45), 0 0 22px rgba(47,123,255,.45)}
.ms-section .avatar img{position:relative; width:28px; height:auto; z-index:2; filter:drop-shadow(0 0 6px rgba(120,210,255,.7))}
.ms-section .who{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.ms-section .who b{font-size:17px; font-weight:600; letter-spacing:-.01em}
.ms-section .who .stat{font-size:12px; color:var(--ink-dim); display:flex; align-items:center; gap:8px}
.ms-section .who .stat .live{width:7px; height:7px; flex:none; border-radius:50%; background:#3fe0a8;
  box-shadow:0 0 8px #3fe0a8; animation:msPulse 1.8s ease-in-out infinite}
@keyframes msPulse{0%,100%{opacity:.4; transform:scale(.85)}50%{opacity:1; transform:scale(1)}}
.ms-section .badge{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--cyan); white-space:nowrap;
  border:1px solid rgba(150,190,250,.16); border-radius:999px; padding:6px 10px; background:rgba(40,90,160,.18)}

.ms-section .convo{border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:13px;
  background:linear-gradient(155deg,rgba(120,165,225,.15),rgba(20,34,58,.06));
  border:1px solid rgba(150,190,250,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  max-height:312px; overflow-y:auto; scroll-behavior:smooth}
.ms-section .convo::-webkit-scrollbar{width:6px}
.ms-section .convo::-webkit-scrollbar-thumb{background:rgba(150,190,250,.22); border-radius:3px}
.ms-section .msg{max-width:84%; font-size:14px; line-height:1.5; padding:12px 15px; border-radius:18px; text-wrap:pretty}
.ms-section .msg.anim{animation:msRise .45s cubic-bezier(.16,.84,.34,1) both}
@keyframes msRise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.ms-section .msg.bot{align-self:flex-start; color:#eef5ff; border-bottom-left-radius:7px;
  background:linear-gradient(160deg,rgba(150,190,245,.20),rgba(40,70,120,.12));
  border:1px solid rgba(160,200,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ms-section .msg.user{align-self:flex-end; color:#04121f; font-weight:500; border-bottom-right-radius:7px;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); box-shadow:0 8px 24px -10px rgba(56,217,255,.6)}

.ms-section .status-card{align-self:flex-start; max-width:92%; border-radius:15px; padding:13px 15px;
  background:linear-gradient(155deg,rgba(60,110,180,.18),rgba(16,30,54,.10));
  border:1px solid rgba(160,200,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ms-section .status-card.anim{animation:msRise .45s cubic-bezier(.16,.84,.34,1) both}
.ms-section .sc-head{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:11px}
.ms-section .sc-row{display:flex; align-items:center; gap:10px; padding:6px 0}
.ms-section .sc-row:not(:last-child){border-bottom:1px solid rgba(150,190,250,.10)}
.ms-section .sc-row .dot{width:7px; height:7px; flex:none; border-radius:50%}
.ms-section .sc-row .dot.ok{background:#3fe0a8; box-shadow:0 0 8px #3fe0a8}
.ms-section .sc-row .dot.warn{background:#ffbf5c; box-shadow:0 0 8px #ffbf5c}
.ms-section .sc-row .lbl{font-size:12.5px; color:var(--ink); flex:1}
.ms-section .sc-row .val{font-family:var(--mono); font-size:12px; color:var(--cyan); white-space:nowrap; text-align:right}

.ms-section .typing{align-self:flex-start; display:none; gap:5px; padding:13px 15px; border-radius:18px; border-bottom-left-radius:7px;
  background:linear-gradient(160deg,rgba(150,190,245,.18),rgba(40,70,120,.10)); border:1px solid rgba(160,200,255,.14); margin-top:13px}
.ms-section .typing.on{display:flex}
.ms-section .typing span{width:7px; height:7px; border-radius:50%; background:var(--ink-dim); animation:msBlink 1.3s ease-in-out infinite}
.ms-section .typing span:nth-child(2){animation-delay:.18s}
.ms-section .typing span:nth-child(3){animation-delay:.36s}
@keyframes msBlink{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

.ms-section .quick{display:flex; flex-wrap:wrap; gap:8px; padding:15px 2px 2px}
.ms-section .chip{font-size:12px; color:var(--ink); cursor:pointer; padding:8px 13px; border-radius:999px; white-space:nowrap;
  background:rgba(120,165,225,.12); border:1px solid rgba(150,190,250,.12); font-family:var(--font); transition:.22s}
.ms-section .chip:hover{border-color:var(--cyan); background:rgba(56,217,255,.16); color:#fff; transform:translateY(-1px)}

.ms-section .composer{display:flex; gap:11px; align-items:center; margin-top:16px}
.ms-section .composer .input{flex:1; display:flex; align-items:center; border-radius:16px; padding:0 6px 0 16px;
  background:linear-gradient(155deg,rgba(120,165,225,.14),rgba(20,34,58,.06));
  border:1px solid rgba(150,190,250,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); transition:.22s}
.ms-section .composer .input:focus-within{border-color:rgba(56,217,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 3px rgba(56,217,255,.12)}
.ms-section .composer input{flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--font); font-size:14px; padding:14px 0}
.ms-section .composer input::placeholder{color:var(--ink-faint)}
.ms-section .send{width:50px; height:50px; flex:none; border:none; cursor:pointer; border-radius:15px; display:grid; place-items:center; color:#04121f;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 10px 28px -12px rgba(56,217,255,.7), inset 0 1px 0 rgba(255,255,255,.4); transition:.22s}
.ms-section .send:hover{transform:translateY(-1px); box-shadow:0 14px 34px -12px rgba(56,217,255,.9)}
.ms-section .send:active{transform:translateY(0) scale(.96)}
.ms-section .send svg{width:20px; height:20px}

@media (max-width:900px){
  .ms-grid{grid-template-columns:1fr; gap:34px}
  .ms-section .glass-card{justify-self:center; max-width:540px}
  .ms-head{max-width:none}
}
@media (max-width:560px){
  .ms-section .glass-card{padding:18px; border-radius:22px}
  .ms-section .convo{max-height:44vh}
}