/* ══════════════════════════════════════════════════════════
   CloudMSD — design system
   Deep-slate dark theme · glass · glow · bento
   ══════════════════════════════════════════════════════════ */

:root {
  --ink: #0B0F19;
  --panel: #0F1523;
  --line: rgba(255,255,255,0.08);
  --text: #cbd5e1;
  --muted: #94a3b8;
  --faint: #64748b;
  --white: #ffffff;
  --cyber: #8B5CF6;
  --cyan: #22D3EE;
  --emerald: #34D399;
  --violet-300: #c4b5fd;
  --grad: linear-gradient(100deg, #22D3EE 0%, #8B5CF6 50%, #34D399 100%);
  --radius: 16px;
  --maxw: 72rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: rgba(139,92,246,.35); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── typography ── */
h1,h2,h3,h4 { color: var(--white); letter-spacing: -0.045em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.lead { font-size: 1.15rem; color: var(--muted); }
.eyebrow {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 600;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; margin-bottom: 1rem;
}
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.small { font-size: .85rem; color: var(--faint); }

/* ── ambient ── */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 75%);
}
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.32; pointer-events:none; }
.orb-purple { background: var(--cyber); }
.orb-cyan { background: var(--cyan); }
.orb-emerald { background: var(--emerald); }

/* ── glass & cards ── */
.glass {
  background: rgba(15,21,35,0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
}
.card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 12px 48px rgba(139,92,246,.14), 0 0 0 1px rgba(139,92,246,.15);
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .92rem; color: var(--muted); }
.inner-panel {
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(11,15,25,0.6);
  border-radius: 12px; padding: 1rem;
}

/* ── buttons ── */
.btn { display:inline-block; border-radius: 12px; padding: .9rem 1.8rem; font-weight: 600; font-size: .95rem; transition: all .2s ease; }
.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, #22D3EE, #8B5CF6 60%, #7C3AED);
  box-shadow: 0 0 24px rgba(139,92,246,.45), 0 0 60px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(139,92,246,.65), 0 0 90px rgba(34,211,238,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost { color: #e2e8f0; border: 1px solid rgba(255,255,255,.12); }
.btn-ghost:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; border-radius: 10px; }

/* ── nav ── */
.nav-fix { position: fixed; top: 1rem; left: 0; right: 0; z-index: 50; display:flex; justify-content:center; padding: 0 1rem; }
.nav {
  width: 100%; max-width: 64rem; border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .75rem .75rem 1.25rem;
}
.nav .logo { display:flex; align-items:center; gap:.65rem; font-weight:700; color:#fff; font-size:.95rem; letter-spacing:-.02em; }
.logo-mark {
  height:28px; width:28px; border-radius:9px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--cyan), var(--cyber));
  color: var(--ink); font-weight: 900; font-size: .8rem;
  box-shadow: 0 0 18px rgba(139,92,246,.6);
}
.nav-links { display:flex; gap:2rem; font-size:.85rem; font-weight:500; color:var(--muted); }
.nav-links a:hover { color:#fff; }
.nav-links a.active { color:#fff; }
@media (max-width: 820px) { .nav-links { display:none; } }

/* ── sections ── */
section { position: relative; }
.section { padding: 6.5rem 0; }
.section-tint { background: rgba(15,21,35,.4); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
.hero { padding: 11rem 0 6rem; overflow:hidden; }
.hero .lead { max-width: 42rem; margin: 1.75rem auto 0; font-size: 1.2rem; }
.center { text-align: center; }
.section-head { max-width: 42rem; margin-bottom: 3.5rem; }
.section-head.center { margin-left:auto; margin-right:auto; }

/* ── pills / badges ── */
.pill {
  display:inline-flex; align-items:center; gap:.55rem;
  border-radius:999px; padding:.4rem 1rem; font-size:.78rem; font-weight:500; color:var(--text);
}
.dot-live { height:6px; width:6px; border-radius:50%; background:var(--emerald); position:relative; }
.dot-live::before { content:''; position:absolute; inset:-4px; border-radius:50%; background:rgba(52,211,153,.4); animation:pulse 2s infinite; }
@keyframes pulse { 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(1.8);opacity:0} }

/* ── grids ── */
.grid { display:grid; gap:1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* bento spans */
.bento { display:grid; gap:1.1rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
.span-2 { grid-column: span 2; }
.row-2 { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } }

/* ── metric strip ── */
.metric p.value { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; }
.metric p.label { font-size: .78rem; color: var(--faint); margin-top:.3rem; line-height:1.45; }

/* ── pricing ── */
.price { font-size: 2.3rem; font-weight: 900; color: #fff; letter-spacing: -0.03em; }
.price small { font-size: .85rem; color: var(--faint); font-weight: 500; letter-spacing: 0; }
.card-featured {
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 0 50px rgba(139,92,246,.15);
  position: relative; overflow: hidden;
}
.card-featured::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyber), transparent);
}

/* rate table */
.rate-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.rate-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--faint); font-weight:600; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.rate-table td { padding: .95rem 1rem; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top; }
.rate-table td:first-child { color:#fff; font-weight:600; }
.rate-table td.rate { color:var(--cyan); font-weight:700; white-space:nowrap; }
.rate-table tr:hover td { background: rgba(255,255,255,.02); }

/* ── mock widgets ── */
.mock-bar { height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.mock-bar i { display:block; height:100%; border-radius:99px; }
.fill-grad { background: linear-gradient(90deg, var(--emerald), var(--cyan)); }
.fill-cyan { background: linear-gradient(90deg, var(--cyan), var(--cyber)); }
.fill-purple { background: var(--cyber); }

.bars { display:flex; align-items:flex-end; gap:.45rem; height:5.5rem; }
.bars i { flex:1; border-radius:6px 6px 0 0; background:rgba(255,255,255,.15); transform-origin:bottom; animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both; }
.bars i.c { background: linear-gradient(180deg, var(--cyan), rgba(34,211,238,.5)); }
.bars i.e { background: linear-gradient(180deg, var(--emerald), rgba(52,211,153,.5)); }
@keyframes grow { from { transform: scaleY(0); } }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.74rem; line-height:1.7; }
.mono .c-purple { color: var(--cyber); } .mono .c-cyan { color: var(--cyan); } .mono .c-green { color: var(--emerald); } .mono .c-dim { color: var(--faint); }
.caret::after { content:'▍'; animation: blink 1s infinite; color: var(--cyan); }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

.chat-in, .chat-out { border-radius:16px; padding:.65rem 1rem; font-size:.82rem; max-width:78%; }
.chat-in { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.05); border-bottom-left-radius:4px; align-self:flex-start; }
.chat-out { background:linear-gradient(135deg, rgba(139,92,246,.3), rgba(34,211,238,.2)); border:1px solid rgba(139,92,246,.3); border-bottom-right-radius:4px; align-self:flex-end; color:#e2e8f0; }
.chat-col { display:flex; flex-direction:column; gap:.7rem; }
.tdots { display:flex; gap:.35rem; padding:.8rem 1rem; }
.tdots i { height:6px; width:6px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.tdots i:nth-child(2){animation-delay:.2s} .tdots i:nth-child(3){animation-delay:.4s}

.ticks { display:flex; justify-content:space-between; align-items:center; }
.tick { height:34px; width:34px; border-radius:50%; display:grid; place-items:center; font-size:.68rem; font-weight:700; animation:tickin .5s ease both; }
.tick:nth-child(1){animation-delay:.1s}.tick:nth-child(2){animation-delay:.3s}.tick:nth-child(3){animation-delay:.5s}
.tick:nth-child(4){animation-delay:.7s}.tick:nth-child(5){animation-delay:.9s}.tick:nth-child(6){animation-delay:1.1s}
.tick.done { background:rgba(52,211,153,.2); color:var(--emerald); border:1px solid rgba(52,211,153,.4); }
.tick.now { background:rgba(34,211,238,.2); color:var(--cyan); border:1px solid rgba(34,211,238,.4); }
.tick.next { background:rgba(139,92,246,.2); color:var(--violet-300); border:1px solid rgba(139,92,246,.4); }
.tick.launch { background:linear-gradient(135deg,var(--cyan),var(--cyber)); color:#fff; border:1px solid var(--cyber); box-shadow:0 0 14px rgba(139,92,246,.6); }
@keyframes tickin { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }

.cells { display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; align-content:center; }
.cells i { height:16px; border-radius:3px; }
.cell-old { background:rgba(255,255,255,.2); animation:fadeOld 3s ease-in-out infinite alternate; }
.cell-c { background:rgba(34,211,238,.7); animation:fadeNew 3s ease-in-out infinite alternate; }
.cell-p { background:rgba(139,92,246,.7); animation:fadeNew 3s ease-in-out infinite alternate .4s; }
.cell-e { background:rgba(52,211,153,.7); animation:fadeNew 3s ease-in-out infinite alternate .8s; }
.c-span-3 { grid-column:span 3; } .c-span-2 { grid-column:span 2; }
@keyframes fadeOld { from{opacity:1} to{opacity:.15} }
@keyframes fadeNew { from{opacity:.15} to{opacity:1} }

.status-row { display:flex; justify-content:space-between; font-size:.78rem; color:var(--faint); padding:.3rem 0; }
.status-row b { font-weight:600; }
.t-green { color: var(--emerald); } .t-cyan { color: var(--cyan); } .t-violet { color: var(--violet-300); }

/* ── steps (how we work) ── */
.step-num {
  height:40px; width:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg, rgba(34,211,238,.2), rgba(139,92,246,.2));
  border:1px solid rgba(139,92,246,.35); color:#fff; font-weight:800; font-size:.95rem;
}
.step { display:flex; gap:1.25rem; }
.steps { display:flex; flex-direction:column; gap:2rem; }

/* ── prose (legal pages, long copy) ── */
.prose { color: var(--muted); font-size:.98rem; }
.prose h2 { font-size:1.5rem; margin:2.5rem 0 1rem; }
.prose h3 { margin:1.8rem 0 .6rem; }
.prose p { margin-bottom:1rem; }
.prose ul { margin:0 0 1rem 1.2rem; }
.prose li { margin-bottom:.4rem; }
.prose strong { color:#e2e8f0; }
.prose a { color:var(--cyan); }
.prose a:hover { text-decoration:underline; }

/* ── forms ── */
.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:.8rem; font-weight:600; color:#e2e8f0; margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  color:#fff; padding:.75rem .9rem; font-size:.92rem; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:rgba(139,92,246,.6); box-shadow:0 0 0 3px rgba(139,92,246,.15); }
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; }

/* ── CTA banner ── */
.cta-banner {
  border-radius: 24px; position:relative; overflow:hidden; text-align:center;
  padding: 5rem 1.5rem;
  background: radial-gradient(120% 160% at 50% 0%, rgba(139,92,246,.35) 0%, rgba(34,211,238,.12) 40%, var(--ink) 75%);
}

/* ── footer ── */
footer { padding: 2.5rem 0 2rem; }
.foot-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--faint); }
.foot-links { display:flex; gap:1.5rem; }
.foot-links a:hover { color:var(--text); }
.legal { text-align:center; font-size:.72rem; color:#475569; margin-top:1.5rem; line-height:1.7; }

/* ── reveal ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ── v26.08.1 visual layer ── */
.cicon { display:block; margin-bottom:.7rem; }

.hero2 { padding: 9.5rem 0 4.5rem; }
.hero2-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:3rem; align-items:center; text-align:left; }
.hero2-grid .lead { margin-left:0; }
.hero-widget { border-radius:18px; padding:1.4rem; box-shadow:0 24px 70px rgba(0,0,0,.45); }
@media (max-width: 900px){ .hero2-grid { grid-template-columns:1fr; text-align:center; } .hero2-grid .cicon{margin:0 auto .7rem} }

/* process diagram */
.proc { display:flex; align-items:flex-start; gap:.6rem; }
.pnode { flex:0 0 auto; text-align:center; width:8.5rem; }
.pnode span { display:grid; place-items:center; margin:0 auto; height:52px; width:52px; border-radius:50%;
  font-weight:800; color:#fff; background:linear-gradient(135deg, rgba(34,211,238,.25), rgba(139,92,246,.25));
  border:1px solid rgba(139,92,246,.45); box-shadow:0 0 18px rgba(139,92,246,.25); }
.pnode p { margin-top:.6rem; font-size:.78rem; color:var(--muted); line-height:1.4; }
.pline { flex:1; height:2px; margin-top:26px; background:linear-gradient(90deg, rgba(34,211,238,.5), rgba(139,92,246,.5)); border-radius:2px; }
@media (max-width:700px){ .proc{flex-direction:column;align-items:center} .pline{width:2px;height:26px;margin:0;background:linear-gradient(180deg, rgba(34,211,238,.5), rgba(139,92,246,.5))} }

/* delivery model */
.dmodel { display:flex; align-items:stretch; gap:.6rem; margin-top:2rem; }
.dnode { flex:1; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); }
.dnode-hi { border-color:rgba(139,92,246,.45); box-shadow:0 0 34px rgba(139,92,246,.15); }
.dtag { font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dt { color:#fff; font-weight:700; margin-top:.25rem; }
.dd { font-size:.8rem; color:var(--faint); margin-top:.3rem; line-height:1.45; }
.dlink { width:1.6rem; align-self:center; height:2px; background:linear-gradient(90deg, rgba(34,211,238,.6), rgba(139,92,246,.6)); flex:0 0 auto; }
@media (max-width:800px){ .dmodel{flex-direction:column} .dlink{width:2px;height:1.2rem;margin:0 auto;background:linear-gradient(180deg, rgba(34,211,238,.6), rgba(139,92,246,.6))} }

/* about timeline + badges */
.tline { display:flex; gap:0; margin:2.5rem 0 1.4rem; position:relative; }
.tline::before { content:''; position:absolute; top:5px; left:2%; right:2%; height:2px;
  background:linear-gradient(90deg, rgba(34,211,238,.45), rgba(139,92,246,.45), rgba(52,211,153,.45)); }
.tl-item { flex:1; position:relative; padding-right:.8rem; }
.tl-dot { display:block; height:12px; width:12px; border-radius:50%; background:var(--ink);
  border:2px solid var(--cyan); position:relative; z-index:1; }
.tl-dot-hi { border-color:var(--emerald); box-shadow:0 0 12px rgba(52,211,153,.6); }
.tl-y { font-weight:800; color:#fff; font-size:.85rem; margin-top:.55rem; }
.tl-t { font-size:.72rem; color:var(--faint); line-height:1.4; margin-top:.15rem; }
@media (max-width:800px){ .tline{flex-direction:column;gap:1rem} .tline::before{top:0;bottom:0;left:5px;right:auto;width:2px;height:auto;background:linear-gradient(180deg, rgba(34,211,238,.45), rgba(139,92,246,.45))} .tl-item{padding-left:1.6rem} .tl-dot{position:absolute;left:0;top:2px} .tl-y{margin-top:0} }
.badges { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 2rem; }
.badge { font-size:.75rem; font-weight:600; color:var(--text); border:1px solid rgba(139,92,246,.35);
  border-radius:999px; padding:.42rem 1rem; background:rgba(139,92,246,.08); }

/* work stat glyphs + screenshot frame */
.statg { font-size:2rem; font-weight:900; letter-spacing:-.03em; margin-bottom:.5rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shot-frame { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(11,15,25,.7); }
.shot-bar { display:flex; align-items:center; gap:.35rem; padding:.6rem .9rem; border-bottom:1px solid rgba(255,255,255,.05); }
.shot-bar span { height:9px; width:9px; border-radius:50%; background:rgba(255,255,255,.15); }
.shot-bar em { font-style:normal; font-size:.66rem; color:var(--faint); margin-left:.5rem; }
.shot-frame img { display:block; width:100%; height:auto; }

/* rates comparison */
.cmp { padding:.4rem 2rem 1.8rem; }
.cmp-row { display:grid; grid-template-columns: 11rem 1fr 8.5rem; gap:1rem; align-items:center; margin-top:.9rem; }
.cmp-l { font-size:.82rem; color:var(--muted); }
.cmp-track { height:14px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; }
.cmp-fill { height:100%; border-radius:99px; }
.cmp-grey { background:rgba(255,255,255,.22); }
.cmp-grad { background:linear-gradient(90deg, var(--cyan), var(--cyber)); box-shadow:0 0 14px rgba(139,92,246,.5); }
.cmp-v { font-weight:800; color:#fff; font-size:.95rem; white-space:nowrap; }
.cmp-v span { color:var(--faint); font-weight:500; font-size:.75rem; }
@media (max-width:700px){ .cmp{padding:.4rem 1.2rem 1.6rem} .cmp-row{grid-template-columns:1fr; gap:.3rem} }