/* =====================================================================
   SLACKROID — "classic" skin (2025 brand look) layered over app.css.
   Violet → pink gradient, floating glass header pill, gradient pill buttons,
   animated gradient CTA panel, bold system type. Animations and content come
   from app.css / app.js unchanged. Remove the <link> in head.php to roll back.
   ===================================================================== */

:root {
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --pink: #ec4899;
  --lav: #a78bfa;
  --lav-2: #ddd6fe;
  --grad-text: linear-gradient(90deg, #8b5cf6, #ec4899);
  --grad-btn: linear-gradient(90deg, rgba(139, 92, 246, .85), rgba(236, 72, 153, .85));
  --grad-btn-h: linear-gradient(90deg, #8b5cf6, #ec4899);
  --grad-flow: linear-gradient(-45deg, #5727b0, #8b5cf6, #ec4899, #3b82f6);
  --card-bg: linear-gradient(180deg, rgba(17, 24, 39, .72), rgba(11, 15, 26, .72));
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --f-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-display: var(--f-body);
  --header-h: 92px;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em; }
.title, .h-xxl, .h-xl, .title-md, .title-sm { font-weight: 700; letter-spacing: -.03em; }
.hero__title { font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.hero__sub { color: var(--ink-2); }

/* violet → pink gradient text (static, like the 2025 site) */
.shine, .gradient-text {
  background: var(--grad-text); background-size: 100% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: none;
}
/* split headings: each character paints its own slice of one shared gradient (vars set in classic.js) */
.split .shine .c, .split .gradient-text .c {
  background: var(--grad-text); background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* section labels: plain violet text, like "TECH SOLUTIONS FOR THE FUTURE" */
.pill, .eyebrow {
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  color: #9d7cfa; font-size: .95rem; font-weight: 500; letter-spacing: .01em;
}
.hero__eyebrow { display: inline-block; margin-bottom: 18px; color: #9d7cfa; font-size: clamp(.8rem, 1.1vw, 1rem); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 999px; }
.btn-light, .btn-primary {
  color: #fff; background: var(--grad-btn);
  box-shadow: 0 0 20px rgba(139, 92, 246, .3);
  transition: transform .5s var(--ease), scale .3s ease, box-shadow .3s, background .3s;
}
.btn-light:hover, .btn-primary:hover { background: var(--grad-btn-h); box-shadow: 0 0 25px rgba(139, 92, 246, .45); scale: 1.05; }
.btn-light::after, .btn-primary::after { background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); }
.btn-dark, .btn-ghost {
  color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none;
}
.btn-dark:hover, .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
.orb-btn { border-radius: 999px; color: #7c3aed; background: #fff; transition: scale .3s ease, box-shadow .3s; }
.orb-btn:hover { scale: 1.05; box-shadow: 0 20px 40px -12px rgba(255, 255, 255, .25); }

/* ---------------------------------------------------------------- surfaces */
.card { background: var(--card-bg); border-color: var(--line); }
.card-hover:hover { box-shadow: 0 25px 60px -25px rgba(139, 92, 246, .45); }
.icon-chip { color: #c4b5fd; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .28); box-shadow: none; }
.tag { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.scroll-progress { background: var(--grad-text); }

/* closing CTA: the 2025 animated gradient panel */
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.cta-x { border: 0; background: var(--grad-flow); background-size: 400% 400%; animation: gradientFlow 15s ease infinite; border-radius: 32px; }
.cta-x::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
.cta-x > * { position: relative; }
.cta-x__orb { display: none; }
.cta-x .pill, .cta-x .eyebrow { color: rgba(255, 255, 255, .85); }
.cta-x .shine, .cta-x .gradient-text { background: linear-gradient(90deg, #fff, #d1d5db); -webkit-background-clip: text; background-clip: text; }
.cta-x .split .shine .c, .cta-x .split .gradient-text .c { background: linear-gradient(90deg, #fff, #d1d5db); background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; -webkit-background-clip: text; background-clip: text; }
.cta-x .lead { color: rgba(255, 255, 255, .85); }
.cta-x .btn-light { color: #7c3aed; background: #fff; box-shadow: 0 10px 30px -10px rgba(255, 255, 255, .35); }
.cta-x .btn-light:hover { background: #fff; }

/* ---------------------------------------------------------------- floating glass header */
.hdr, .hdr.scrolled, .menu-open .hdr {
  height: auto; padding: 16px 24px; background: transparent; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hdr__bar {
  width: 100%; max-width: 1152px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -4px rgba(0, 0, 0, .05);
  transition: background .4s;
}
.hdr.scrolled .hdr__bar { background: rgba(20, 20, 24, .55); }
.hdr .brand__mark { width: 30px; height: 30px; }
.hdr .brand img { height: 30px; }
.hdr__pill { display: none !important; }
.hdr__nav { display: none; }
.hdr__right { gap: 8px; }
.hdr__cta {
  display: inline-flex; align-items: center; padding: 10px 26px; border-radius: 999px; color: #fff; font-weight: 500; font-size: .95rem; white-space: nowrap;
  background: var(--grad-btn); box-shadow: 0 0 20px rgba(139, 92, 246, .3); transition: background .3s, box-shadow .3s, scale .3s ease;
}
.hdr__cta:hover { background: var(--grad-btn-h); box-shadow: 0 0 25px rgba(139, 92, 246, .4); scale: 1.05; }
.menu-btn { width: 40px; height: 40px; border-radius: 999px; }
.menu-btn span { left: 10px; right: 10px; }
.menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 23px; }
.menu-btn.open span:nth-child(1), .menu-btn.open span:nth-child(2) { top: 19.5px; }

@media (min-width: 1024px) {
  .hdr__nav { position: static; transform: none; display: flex; flex: 1; justify-content: center; gap: 32px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hdr__link { position: relative; padding: 4px 0; border-radius: 0; color: #fff; background: none !important; font-size: .98rem; transition: color .3s; }
  .hdr__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--violet); transition: width .3s; }
  .hdr__link:hover, .hdr__link.is-active { color: var(--violet-2); }
  .hdr__link:hover::after, .hdr__link.is-active::after { width: 100%; }
  .hdr__link.is-active { color: var(--violet-2) !important; }
  .hdr .menu-btn { display: none; }
}
@media (max-width: 1023px) {
  .hdr__cta { display: none; }
}
@media (max-width: 960px) {
  :root { --header-h: 80px; }
  .hdr { padding: 12px 14px; }
  .hdr__bar { padding: 8px 8px 8px 18px; }
}

/* ---------------------------------------------------------------- plain black canvas (no galaxy) */
body { background: #000; }
#scene, .bg-fx, .orb-labels { display: none !important; }

/* hero: full-screen, content centred — like the 2025 site */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: calc(var(--header-h) + 24px) 0 96px; }
.hero__copy { width: 100%; }
.hero__eyebrow { margin-bottom: 16px; }
.hero__title { font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1.06; }
.hero__sub { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: #e5e7eb; max-width: 44ch; }
.hero__cta { margin-top: 36px; }
.hero__scroll { top: auto; bottom: 32px; }

/* ---------------------------------------------------------------- vertical rhythm */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--tight { padding: clamp(44px, 5.5vw, 72px) 0; }
.page-hero-x { padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(28px, 4vw, 48px); }
.page-hero-x .h-xxl, .page-hero-x .lead { margin-top: 16px; }
.head .title, .head .h-xl, .section-head .h-xl, .section-head .h-xxl { margin-top: 10px; }
.head .lead, .section-head .lead, .iot__lead { margin-top: 14px; }
.mt-lg { margin-top: clamp(32px, 4vw, 52px); }
.site-footer { padding-top: clamp(56px, 7vw, 88px); }

/* active filter = gradient pill */
.filter-tab.is-active { color: #fff; background: var(--grad-btn-h); border-color: transparent; }

/* header: wordmark only, nav aligned right (no marketplace button) */
.hdr__bar { padding: 14px 28px; }
.hdr .brand__word { font-size: 1.08rem; letter-spacing: .28em; }
@media (min-width: 1024px) { .hdr__nav { flex: none; margin-left: auto; } }
@media (max-width: 1023px) { .hdr__bar { padding: 8px 8px 8px 22px; } }

/* shorter pinned scroll sections on desktop (same steps, less empty scrolling) */
.arch { height: calc(var(--n) * 55vh + 100vh); }
.eco { height: calc(var(--n) * 55vh + 100vh); }
@media (max-width: 960px) { .arch, .eco { height: calc(var(--n) * 50vh + 100vh); } }

/* no diamond mark next to the wordmark anywhere */
.brand__mark { display: none !important; }

/* =====================================================================
   Cinematic 3D motion (cinema.js sets --hp, --mx, --my on the hero and --se on section blocks)
   ===================================================================== */

/* hero: perspective grid floor receding to a glowing horizon */
.hero { overflow: hidden; perspective: 1200px; }
.hero__stage { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 0; pointer-events: none; perspective: 520px; perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.hero__floor { position: absolute; left: -60%; right: -60%; top: 0; height: 260%; transform-origin: 50% 0;
  transform: rotateX(calc(74deg + var(--hp, 0) * 8deg)) translateX(calc(var(--mx, 0) * -30px));
  background-image: linear-gradient(rgba(139, 92, 246, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .26) 1px, transparent 1px);
  background-size: 64px 64px; animation: cineFloor 2.6s linear infinite; }
@keyframes cineFloor { to { background-position: 0 64px; } }
.hero__horizon { position: absolute; left: 8%; right: 8%; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #8b5cf6 25%, #ec4899 75%, transparent);
  box-shadow: 0 0 24px 4px rgba(168, 85, 247, .45), 0 0 80px 18px rgba(236, 72, 153, .14); opacity: calc(.9 - var(--hp, 0) * .6); }
.hero__copy { position: relative; z-index: 2; transform-style: preserve-3d; will-change: transform;
  transform: translate3d(0, calc(var(--hp, 0) * -70px), 0) scale(calc(1 + var(--hp, 0) * .14)) rotateX(calc(var(--my, 0) * -3deg)) rotateY(calc(var(--mx, 0) * 4deg));
  opacity: calc(1 - var(--hp, 0) * 1.25); filter: blur(calc(var(--hp, 0) * 6px)); }

/* headings: letters flip up out of depth */
.cine .split .w { perspective: 700px; overflow: visible; }
.cine .split .c { transform-origin: 50% 100%; transform: translate3d(0, .45em, -60px) rotateX(-85deg); filter: blur(6px); }
.cine .split.in .c { transform: none; filter: none; }

/* reveals: rise in from a tilted, deeper plane */
.cine.js [data-reveal] { transform: perspective(1100px) translate3d(0, 46px, -90px) rotateX(14deg); transform-origin: 50% 100%; }
.cine.js [data-reveal="left"] { transform: perspective(1100px) translate3d(-50px, 0, -80px) rotateY(12deg); }
.cine.js [data-reveal="right"] { transform: perspective(1100px) translate3d(50px, 0, -80px) rotateY(-12deg); }
.cine.js [data-reveal="zoom"] { transform: perspective(1100px) translate3d(0, 30px, -160px) rotateX(8deg); }
.cine.js [data-reveal].in { transform: none; }

/* section blocks tilt up into place as they scroll in (camera dolly feel) */
.cine main .section > .container, .cine main .section--tight > .container, .cine .page-hero-x > .container {
  transform: perspective(1600px) translate3d(0, calc(var(--se, 0) * 56px), 0) rotateX(calc(var(--se, 0) * 9deg)) scale(calc(1 - var(--se, 0) * .035));
  transform-origin: 50% 0; }

/* =====================================================================
   Top nav: sliding glass indicator + Contact CTA
   ===================================================================== */
@media (min-width: 1024px) {
  .hdr__nav { position: relative; gap: 4px; padding: 4px; border-radius: 999px; }
  .hdr__link { z-index: 1; padding: 9px 16px; font-size: .94rem; font-weight: 500; color: rgba(255, 255, 255, .72); }
  .hdr__link::after { display: none; }
  .hdr__link:hover, .hdr__link.is-lit, .hdr__link.is-active { color: #fff !important; }
  .hdr__ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; z-index: 0; border-radius: 999px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(167, 139, 250, .28), 0 6px 20px -6px rgba(139, 92, 246, .55);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s; }
  .hdr__ind::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
  .hdr__right { margin-left: 14px; }
}
.hdr__contact { display: none; }
@media (min-width: 1024px) {
  .hdr__contact { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px; color: #fff; font-weight: 600; font-size: .92rem;
    background: var(--grad-btn); box-shadow: 0 0 20px rgba(139, 92, 246, .3); transition: background .3s, box-shadow .3s, scale .3s ease; }
  .hdr__contact svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .hdr__contact:hover { background: var(--grad-btn-h); box-shadow: 0 0 26px rgba(139, 92, 246, .45); scale: 1.04; }
  .hdr__contact:hover svg { transform: translate(2px, -2px); }
  .hdr__contact.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 26px rgba(139, 92, 246, .45); }
}
.hdr__link:focus-visible, .hdr__contact:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .hero__floor { animation: none; }
  .hero__copy { transform: none; opacity: 1; filter: none; }
}

/* fixes: nav stays in the bar (cancel app.css centring offsets); floor fades at both ends */
@media (min-width: 1024px) { .hdr__nav { left: auto; top: auto; transform: none; } }
.hero__stage { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 78%, transparent 100%); }
.hero__floor { background-image: linear-gradient(rgba(139, 92, 246, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .2) 1px, transparent 1px); }
@media (max-width: 680px) {
  .hero__stage { height: 30%; }
  .hero__floor { background-size: 48px 48px; }
}
@media (min-width: 1024px) {
  .hdr__bar { padding: 7px 8px 7px 28px; }
  .hdr__nav { padding: 2px; }
  .hdr__link { padding: 8px 15px; }
  .hdr__ind { top: 2px; bottom: 2px; }
  .hdr__contact { padding: 10px 20px; }
}