/* CreatesOnline public experience
   Shared across CMS dynamic-zone pages and legacy base.html pages. */

:root {
  --public-bg: #070a12;
  --public-surface: rgba(14, 19, 34, .72);
  --public-surface-strong: rgba(18, 24, 43, .9);
  --public-line: rgba(148, 163, 184, .16);
  --public-line-strong: rgba(96, 165, 250, .32);
  --public-ink: #f8fafc;
  --public-muted: #a8b3c7;
  --public-blue: #2563eb;
  --public-violet: #7c3aed;
  --public-cyan: #38bdf8;
  --public-gradient: linear-gradient(120deg, var(--public-blue), var(--public-violet) 52%, var(--public-cyan));
  --public-shadow: 0 28px 80px -36px rgba(37, 99, 235, .5);
  --public-ease: cubic-bezier(.2, .75, .25, 1);
}

body.co-public,
body.public-site {
  background-color: var(--public-bg);
  color: var(--public-ink);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

body.co-public::before,
body.public-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px),
    radial-gradient(ellipse 80% 45% at 50% -10%, rgba(37, 99, 235, .22), transparent 65%),
    var(--public-bg);
  background-size: 64px 64px, 64px 64px, auto, auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.72) 46%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.72) 46%, transparent 92%);
}

body.co-public .co-mesh { opacity: .32; }
body.co-public .co-mesh span { filter: blur(110px); }

.co-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  background: var(--public-gradient);
  box-shadow: 0 0 18px rgba(56, 189, 248, .65);
  pointer-events: none;
}

/* Navigation */
body.co-public .site-header,
body.public-site .site-header {
  height: 76px;
  padding: 0 20px;
  background: rgba(7, 10, 18, .68);
  border-bottom: 1px solid var(--public-line);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  transition: height .25s var(--public-ease), background .25s ease, box-shadow .25s ease;
}

body.co-public .site-header.is-scrolled,
body.public-site .site-header.is-scrolled {
  height: 68px;
  background: rgba(7, 10, 18, .9);
  box-shadow: 0 16px 44px -30px rgba(0, 0, 0, .9);
}

body.co-public .site-header .container { width: min(100%, 1320px); margin-inline: auto; }
body.co-public .header-inner,
body.public-site .header-inner { grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); }

body.public-site .site-header .header-inner { height: 100%; }
body.public-site .site-brand { gap: 11px; }
body.public-site .site-brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 0;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, .42));
}
body.public-site .site-brand__wordmark {
  width: auto;
  height: 27px;
  max-width: 156px;
  object-fit: contain;
}
body.public-site .site-brand__name--fallback { display: none; }
body.public-site .primary-nav { justify-self: center; gap: clamp(18px, 2.2vw, 34px); }
body.public-site .primary-nav__link {
  position: relative;
  padding: 10px 0;
  color: var(--public-muted);
  background: transparent !important;
  font-size: .9rem;
  font-weight: 600;
}
body.public-site .primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--public-gradient);
  transform: scaleX(0);
  transition: transform .25s var(--public-ease);
}
body.public-site .primary-nav__link:hover,
body.public-site .primary-nav__link.active { color: var(--public-ink); }
body.public-site .primary-nav__link:hover::after,
body.public-site .primary-nav__link.active::after { transform: scaleX(1); }
body.public-site .header-actions { justify-self: end; }
body.public-site .header-actions select {
  min-height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--public-line);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--public-ink);
}
body.public-site .header-actions .btn--primary {
  border-radius: 9px;
  background: var(--public-gradient);
}

.header-logo__brand,
.footer-brand__lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.header-logo__wordmark {
  width: auto;
  height: 27px !important;
  max-width: 156px;
  object-fit: contain;
}

body.co-public .nav-list { gap: clamp(18px, 2.2vw, 34px); }
body.co-public .nav-link {
  padding: 10px 0;
  color: var(--public-muted);
  font-size: .9rem;
  font-weight: 600;
}
body.co-public .nav-link::after {
  bottom: 3px;
  height: 2px;
  background: var(--public-gradient);
  transform-origin: center;
}
body.co-public .nav-link:hover,
body.co-public .nav-link.active { color: var(--public-ink); }

body.co-public .header-cta {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 10px;
  white-space: nowrap;
}

body.co-public .header-mobile-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
body.co-public .header-mobile-toggle span {
  position: absolute;
  width: 19px;
  transition: transform .22s ease, opacity .18s ease;
}
body.co-public .header-mobile-toggle span:nth-child(1) { transform: translateY(-6px); }
body.co-public .header-mobile-toggle span:nth-child(3) { transform: translateY(6px); }
body.co-public .site-header.menu-open .header-mobile-toggle span:nth-child(1) { transform: rotate(45deg); }
body.co-public .site-header.menu-open .header-mobile-toggle span:nth-child(2) { opacity: 0; }
body.co-public .site-header.menu-open .header-mobile-toggle span:nth-child(3) { transform: rotate(-45deg); }

/* Atmospheric hero; content remains fully CMS-driven. */
body.co-public .co-hero {
  min-height: min(780px, calc(100vh - 76px));
  display: grid;
  place-items: center;
  padding: clamp(76px, 11vh, 126px) 24px clamp(70px, 10vh, 112px);
  overflow: hidden;
}

body.co-public .co-hero::before {
  content: "";
  position: absolute;
  inset: 8% 5% auto;
  height: 72%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(37, 99, 235, .18), transparent 54%),
    conic-gradient(from 220deg at 50% 52%, transparent, rgba(124, 58, 237, .11), transparent 35%);
  filter: blur(14px);
}

body.co-public .co-hero__content { position: relative; z-index: 1; }
body.co-public .co-hero__eyebrow {
  border-color: rgba(96, 165, 250, .28);
  background: rgba(15, 23, 42, .55);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.co-public .co-hero__headline {
  max-width: 14ch;
  font-size: clamp(2.75rem, 7vw, 6.15rem);
  line-height: .98;
  letter-spacing: 0;
}
body.co-public .co-hero__description { max-width: 62ch; color: var(--public-muted); }
body.co-public .co-hero__actions { margin-top: 32px; }

/* Legacy CMS single-page hero uses the same visual language. */
body.public-site .breadcrumbs {
  position: relative;
  z-index: 2;
  border-color: var(--public-line);
  background: rgba(10, 14, 27, .7);
  color: var(--public-muted);
}
body.public-site .hero {
  position: relative;
  min-height: min(720px, calc(100vh - 132px));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(72px, 10vh, 116px) 24px;
  background:
    radial-gradient(ellipse 72% 58% at 50% 40%, rgba(37, 99, 235, .2), transparent 62%),
    linear-gradient(180deg, rgba(7,10,18,.2), rgba(7,10,18,.92)) !important;
  color: var(--public-ink);
}
body.public-site .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  pointer-events: none;
}
body.public-site .hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  justify-content: center;
  text-align: center;
}
body.public-site .hero__content { max-width: 920px; margin-inline: auto; }
body.public-site .hero__title {
  max-width: 15ch;
  margin-inline: auto;
  color: var(--public-ink);
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: .99;
  letter-spacing: 0;
}
body.public-site .hero__subtitle {
  max-width: 62ch;
  margin: 24px auto 0;
  color: var(--public-muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}
body.public-site .hero__actions { justify-content: center; margin-top: 34px; }
body.public-site .hero__actions--center { justify-content: center; }
body.public-site .hero__actions .btn { min-height: 50px; padding-inline: 24px; }
body.public-site .hero__actions .btn--primary { background: var(--public-gradient); }

/* Sections and headings */
body.co-public .co-page > section:not(.co-hero),
body.co-public .co-page > article,
body.co-public .features-section,
body.co-public .featured-posts-section,
body.co-public .featured-products-section {
  position: relative;
  padding-block: clamp(72px, 9vw, 118px);
}

body.co-public .section-title,
body.co-public .co-services__heading,
body.co-public .co-pricing__title,
body.co-public .co-contact__heading,
body.co-public .co-richcontent__title {
  color: var(--public-ink);
  font-size: clamp(2rem, 4.4vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: 0;
}

body.co-public .section-subtitle,
body.co-public .co-services__subheading,
body.co-public .co-pricing__subtitle,
body.co-public .co-contact__subheading { color: var(--public-muted); }

/* Unified cards */
body.co-public :is(.feature-card, .post-card, .product-card, .co-service-card, .co-pricing__card) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--public-line);
  border-radius: 8px;
  background:
    radial-gradient(420px circle at var(--pointer-x, 50%) var(--pointer-y, -10%), rgba(56, 189, 248, .12), transparent 44%),
    linear-gradient(155deg, rgba(21, 29, 50, .82), rgba(10, 14, 27, .76));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 28px 70px -52px rgba(37, 99, 235, .8);
  transition: transform .35s var(--public-ease), border-color .3s ease, box-shadow .35s ease;
}
body.co-public :is(.feature-card, .post-card, .product-card, .co-service-card, .co-pricing__card)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  z-index: -1;
  background: var(--public-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--public-ease);
}
body.co-public :is(.feature-card, .post-card, .product-card, .co-service-card, .co-pricing__card):hover {
  transform: translateY(-8px);
  border-color: var(--public-line-strong);
  box-shadow: var(--public-shadow);
}
body.co-public :is(.feature-card, .post-card, .product-card, .co-service-card, .co-pricing__card):hover::after { transform: scaleX(1); }

body.co-public :is(.feature-icon, .co-service-card__icon) {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border-color: rgba(96, 165, 250, .24);
  background: linear-gradient(145deg, rgba(37, 99, 235, .2), rgba(124, 58, 237, .16));
}

body.co-public :is(.feature-link, .co-service-card__link, .post-title a, .product-name a, .co-article__back) {
  color: var(--public-cyan);
  text-underline-offset: 4px;
}

/* Media is inspectable and stable */
body.co-public :is(.post-image, .product-image, .co-article__media, .co-hero__media) img {
  display: block;
  width: 100%;
  object-fit: cover;
}
body.co-public :is(.post-image, .product-image) { background: linear-gradient(145deg, rgba(37,99,235,.2), rgba(124,58,237,.16)); }
body.co-public :is(.post-image, .product-image) img { transition: transform .6s var(--public-ease), filter .4s ease; }
body.co-public :is(.post-card, .product-card):hover img { transform: scale(1.045); }

/* Pricing and forms */
body.co-public .co-pricing__card--featured {
  border-color: rgba(96, 165, 250, .44);
  box-shadow: 0 26px 80px -42px rgba(37, 99, 235, .8);
}
body.co-public .co-contact__form-wrap {
  border-radius: 8px;
  border-color: var(--public-line);
  background: var(--public-surface);
  box-shadow: var(--public-shadow);
}
body.co-public .co-contact__form :is(input, textarea) {
  min-height: 48px;
  border-radius: 7px;
  border-color: var(--public-line);
  background: rgba(5, 8, 16, .68);
}
body.co-public .co-contact__form :is(input, textarea):focus {
  border-color: var(--public-cyan);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .12);
}

/* Long-form pages */
body.co-public :is(.co-article__inner, .co-richcontent__inner) { max-width: 820px; }
body.co-public :is(.co-article__body, .co-richcontent__body) {
  color: #c5cedd;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.85;
}
body.co-public :is(.co-article__body, .co-richcontent__body) :is(h2, h3) {
  color: var(--public-ink);
  letter-spacing: 0;
  margin-top: 2.4em;
}
body.co-public :is(.co-article__body, .co-richcontent__body) a { color: var(--public-cyan); }

/* Footer: real brand lockup */
body.co-public .site-footer {
  position: relative;
  padding: clamp(68px, 8vw, 96px) 24px 30px;
  background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, .5));
  border-top-color: var(--public-line);
}
body.co-public .site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(1120px, 88vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--public-blue), var(--public-cyan), transparent);
}
body.co-public .footer-logo-wordmark { width: min(180px, 48vw); height: auto; }
body.public-site .footer-logo-wordmark { width: min(180px, 48vw); height: auto; }
body.co-public .footer-description { max-width: 36ch; color: var(--public-muted); }
body.co-public .footer-links-list a { display: inline-block; transition: color .2s ease, transform .2s ease; }
body.co-public .footer-links-list a:hover { color: var(--public-cyan); transform: translateX(3px); }

/* Progressive reveal */
.co-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s var(--public-ease), transform .72s var(--public-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.co-animate.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  body.co-public .site-header { padding-inline: 16px; }
  body.co-public .header-inner { grid-template-columns: 1fr auto; gap: 12px; }
  body.co-public .header-actions { grid-column: 2; }
  body.co-public .header-mobile-toggle { display: flex; }
  body.co-public .header-cta { display: none; }
  body.co-public .header-nav {
    position: fixed;
    top: 76px;
    left: 14px;
    right: 14px;
    width: calc(100vw - 28px);
    max-width: none;
    display: block;
    padding: 12px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: rgba(8, 12, 23, .97);
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .2s ease, visibility .2s ease, transform .25s var(--public-ease);
  }
  body.co-public .site-header.menu-open .header-nav { opacity: 1; visibility: visible; transform: none; }
  body.co-public .nav-list { display: grid; gap: 2px; }
  body.co-public .nav-link { display: block; padding: 13px 14px; border-radius: 6px; }
  body.co-public .nav-link:hover { background: rgba(255,255,255,.05); }
  body.co-public .nav-link::after { display: none; }
  body.co-public .co-hero { min-height: 0; }
  body.public-site .site-header { height: 68px; }
  body.public-site .header-inner { display: grid; grid-template-columns: 1fr auto; }
  body.public-site .primary-nav { justify-self: stretch; }
  body.public-site .site-brand__wordmark { max-width: 132px; height: 23px; }
  body.public-site .header-actions form,
  body.public-site .header-actions > .btn { display: none !important; }
  body.public-site .header-actions { gap: 0; }
  body.public-site .primary-nav {
    position: fixed;
    top: 68px;
    left: 14px;
    right: 14px;
    z-index: 1002;
    width: calc(100vw - 28px);
    max-width: none;
    display: none;
    padding: 12px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: rgba(8, 12, 23, .97);
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
  body.public-site.mobile-nav-open .primary-nav { display: grid; gap: 2px; }
  body.public-site .primary-nav__link {
    display: block;
    padding: 13px 14px;
    border-radius: 6px;
  }
  body.public-site .primary-nav__link:hover { background: rgba(255,255,255,.05) !important; }
  body.public-site .primary-nav__link::after { display: none; }
  body.public-site .hero { min-height: 650px; }
}

@media (max-width: 600px) {
  .header-logo__wordmark { max-width: 128px; height: 23px !important; }
  body.co-public .co-hero { padding-inline: 18px; }
  body.co-public .co-hero__headline { font-size: clamp(2.6rem, 14vw, 4.35rem); }
  body.co-public .co-hero__actions { width: 100%; }
  body.co-public .co-hero__actions .btn { width: 100%; justify-content: center; }
  body.co-public .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .co-animate { opacity: 1; transform: none; transition: none; }
}
/* ---------------------------------------------------------------------------
   Newsletter signup popup
   --------------------------------------------------------------------------- */
.co-newsletter-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 8, 15, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.co-newsletter-popup--open {
  opacity: 1;
  visibility: visible;
}
.co-newsletter-popup__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  border: 1px solid var(--co-glass-brd, rgba(255,255,255,.09));
  background: #0d0d16;
  padding: 2.25rem 2rem;
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform .3s ease;
}
.co-newsletter-popup--open .co-newsletter-popup__card {
  transform: translateY(0) scale(1);
}
.co-newsletter-popup__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--co-glass, rgba(255,255,255,.045));
  color: var(--co-mut, #9a9ac0);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.co-newsletter-popup__close:hover { color: var(--co-ink, #f5f5fb); }
.co-newsletter-popup__title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  color: var(--co-ink, #f5f5fb);
}
.co-newsletter-popup__subtitle {
  color: var(--co-mut, #9a9ac0);
  font-size: .95rem;
  margin: 0 0 1.5rem;
}
.co-newsletter-popup__form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.co-newsletter-popup__form input[type="email"] {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--co-glass-brd, rgba(255,255,255,.09));
  border-radius: 10px;
  padding: .75rem .9rem;
  color: var(--co-ink, #f5f5fb);
  font-family: inherit;
  font-size: .95rem;
}
.co-newsletter-popup__form input[type="email"]:focus {
  outline: none;
  border-color: var(--co-v, #7c3aed);
}
.co-newsletter-popup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.co-newsletter-popup__status {
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--co-c, #22d3ee);
}
.co-newsletter-popup--success .co-newsletter-popup__form { display: none; }

/* ---------------------------------------------------------------------------
   Monochrome systems theme — a neutral, editorial layer over CMS-driven pages.
   Colour is reserved for state only; motion describes connection and activity.
   --------------------------------------------------------------------------- */
:root {
  --public-bg: #080808;
  --public-surface: rgba(255, 255, 255, .045);
  --public-surface-strong: rgba(255, 255, 255, .08);
  --public-line: rgba(255, 255, 255, .14);
  --public-line-strong: rgba(255, 255, 255, .42);
  --public-ink: #f7f7f2;
  --public-muted: #a4a49d;
  --public-blue: #f7f7f2;
  --public-violet: #b9b9b0;
  --public-cyan: #deded6;
  --public-gradient: linear-gradient(110deg, #fff 0%, #b7b7af 48%, #fff 100%);
  --public-shadow: 0 28px 80px -38px rgba(0, 0, 0, .95);
}

body.co-public,
body.public-site { background: #080808; color: #f7f7f2; font-family: Inter, "Segoe UI", sans-serif; }
body.co-public::before,
body.public-site::before {
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(ellipse 70% 45% at 50% -12%, rgba(255,255,255,.10), transparent 66%),
    #080808;
}
body.co-public .co-mesh { opacity: .16; filter: grayscale(1); }
body.co-public .co-mesh span { background: #fff !important; mix-blend-mode: screen; }
.co-scroll-progress { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.6); }

body.co-public .site-header,
body.public-site .site-header { background: rgba(8,8,8,.76); border-color: rgba(255,255,255,.12); }
body.co-public .site-header.is-scrolled,
body.public-site .site-header.is-scrolled { background: rgba(8,8,8,.94); }
body.public-site .primary-nav__link::after,
body.co-public .nav-link::after { background: #fff; }
body.public-site .header-actions .btn--primary,
body.public-site .hero__actions .btn--primary,
body.co-public .btn--primary { background: #f7f7f2; border-color: #f7f7f2; color: #0b0b0b; box-shadow: none; }
body.public-site .header-actions .btn--primary:hover,
body.public-site .hero__actions .btn--primary:hover,
body.co-public .btn--primary:hover { background: #bdbdb6; border-color: #bdbdb6; color: #050505; }
body.co-public .btn--secondary,
body.co-public .btn--ghost { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.025); }

body.public-site .hero,
body.co-public .co-hero { background: transparent !important; }
body.public-site .hero { min-height: min(760px, calc(100vh - 76px)); }
body.public-site .hero::before { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
body.public-site .hero__title,
body.co-public .co-hero__headline { color: #f7f7f2; letter-spacing: -.065em; }
body.public-site .hero__subtitle,
body.co-public .co-hero__description { color: #aaa9a2; }
body.co-public .co-grad-text { background: none; -webkit-text-fill-color: currentColor; }
body.co-public .co-hero { display: grid; align-items: center; min-height: min(760px, calc(100vh - 40px)); padding-block: clamp(80px, 12vh, 145px); }
body.co-public .co-hero__inner { align-items: center; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr); max-width: 1240px; text-align: left; }
body.co-public .co-hero--default .co-hero__inner,
body.co-public .co-hero--centered .co-hero__inner { flex-direction: initial; }
body.co-public .co-hero--default .co-hero__headline,
body.co-public .co-hero--centered .co-hero__headline,
body.co-public .co-hero--default .co-hero__description,
body.co-public .co-hero--centered .co-hero__description { margin-left: 0; margin-right: 0; }
body.co-public .co-hero--default .co-hero__actions,
body.co-public .co-hero--centered .co-hero__actions { justify-content: flex-start; }
body.co-public .co-hero__eyebrow { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.035); color: #bebeb6; }
body.co-public .co-hero__pulse { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.9); }
body.public-site .hero--system .hero__inner { align-items:center; display:grid; gap:clamp(2.5rem, 7vw, 7rem); grid-template-columns:minmax(0, .9fr) minmax(320px, .7fr); text-align:left; }
body.public-site .hero--system .hero__content { margin:0; max-width:640px; }
body.public-site .hero--system .hero__title { margin-left:0; text-align:left; }
body.public-site .hero--system .hero__subtitle { margin-left:0; text-align:left; }
body.public-site .hero--system .hero__actions { justify-content:flex-start; }

/* Animated systems map: CSS-only, accessible, and independent of CMS copy. */
.co-system-orbit { --tilt-x: 0px; --tilt-y: 0px; aspect-ratio: 1; margin-inline: auto; max-width: 480px; position: relative; transform: perspective(900px) rotateX(calc(var(--tilt-y) * -.018)) rotateY(calc(var(--tilt-x) * .018)); transition: transform .35s ease-out; width: min(100%, 480px); }
.co-system-orbit::before { border: 1px solid rgba(255,255,255,.23); border-radius: 50%; content: ""; inset: 20%; position: absolute; box-shadow: 0 0 0 26px rgba(255,255,255,.02), 0 0 60px rgba(255,255,255,.08); }
.co-system-orbit__rings { inset: 0; position:absolute; animation: co-orbit-spin 36s linear infinite; }
.co-system-orbit__rings i { border: 1px solid rgba(255,255,255,.13); border-radius: 50%; inset: 3%; position:absolute; }.co-system-orbit__rings i:nth-child(2) { inset: 15%; transform: rotateX(68deg); }.co-system-orbit__rings i:nth-child(3) { inset: 16%; transform: rotateY(68deg); }
.co-system-orbit__core { align-items:center; background:#f5f5ef; border-radius:50%; box-shadow: 0 0 0 10px rgba(255,255,255,.07), 0 16px 45px rgba(0,0,0,.55); color:#090909; display:flex; height:104px; justify-content:center; left:50%; letter-spacing:-.08em; overflow:hidden; position:absolute; top:50%; transform:translate(-50%,-50%); width:104px; }.co-system-orbit__core b { font-size:1.5rem; position:relative; z-index:1; }.co-system-orbit__core span { background:linear-gradient(90deg, transparent, rgba(0,0,0,.13), transparent); height:100%; left:-100%; position:absolute; top:0; transform:skewX(-20deg); width:55%; animation:co-core-scan 3.2s ease-in-out infinite; }
.co-system-orbit__node { align-items:center; background:#101010; border:1px solid rgba(255,255,255,.22); border-radius:999px; box-shadow:0 10px 22px rgba(0,0,0,.38); display:flex; gap:.55rem; padding:.48rem .7rem .48rem .48rem; position:absolute; z-index:1; animation: co-node-float 5s ease-in-out infinite; }.co-system-orbit__node i { align-items:center; background:#f2f2ec; border-radius:50%; color:#0b0b0b; display:flex; font-size:.7rem; font-style:normal; height:25px; justify-content:center; width:25px; }.co-system-orbit__node span { color:#e9e9e2; font-size:.72rem; font-weight:750; letter-spacing:.02em; white-space:nowrap; }.co-system-orbit__node--cms { left:4%; top:18%; }.co-system-orbit__node--erp { right:2%; top:13%; animation-delay:-1.4s; }.co-system-orbit__node--commerce { right:-1%; top:53%; animation-delay:-2.6s; }.co-system-orbit__node--manufacturing { bottom:12%; left:10%; animation-delay:-.7s; }.co-system-orbit__node--agents { left:37%; bottom:0; animation-delay:-3.5s; }
.co-system-orbit__status { align-items:center; bottom:-1.7rem; color:#9f9f98; display:flex; font-size:.7rem; gap:.45rem; left:50%; letter-spacing:.08em; margin:0; position:absolute; text-transform:uppercase; transform:translateX(-50%); white-space:nowrap; }.co-system-orbit__status span { background:#fff; border-radius:50%; box-shadow:0 0 10px rgba(255,255,255,.9); height:6px; width:6px; animation:co-status-pulse 2s ease-in-out infinite; }

body.co-public :is(.feature-card, .post-card, .product-card, .co-service-card, .co-pricing__card) { background: rgba(255,255,255,.035); border-color:rgba(255,255,255,.14); border-radius: 4px; box-shadow:none; }.co-service-card:hover, .feature-card:hover { border-color:rgba(255,255,255,.54)!important; box-shadow:0 22px 55px -40px rgba(255,255,255,.34)!important; }.co-service-card::after, .feature-card::after { background:#fff!important; }.co-service-card__icon, .feature-icon { background:#f7f7f2!important; border-color:#f7f7f2!important; color:#0b0b0b!important; border-radius:50%!important; }.co-service-card__link, .feature-link { color:#f7f7f2!important; }.co-newsletter-popup__card { background:#111; border-color:rgba(255,255,255,.18); }.co-newsletter-popup__status { color:#fff; }

@keyframes co-orbit-spin { to { transform: rotate(360deg); } } @keyframes co-node-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes co-core-scan { 0%,35% { left:-80%; } 70%,100% { left:130%; } } @keyframes co-status-pulse { 50% { box-shadow:0 0 2px rgba(255,255,255,.4); opacity:.4; } }
@media (max-width: 860px) { body.co-public .co-hero__inner, body.public-site .hero--system .hero__inner { grid-template-columns:1fr; text-align:center; }.co-system-orbit { margin-top:1rem; max-width:390px; }.co-system-orbit__node { transform:scale(.9); }.co-system-orbit__node--commerce { right:-5%; }.co-system-orbit__node--cms { left:-3%; } body.co-public .co-hero--default .co-hero__headline, body.co-public .co-hero--centered .co-hero__headline, body.co-public .co-hero--default .co-hero__description, body.co-public .co-hero--centered .co-hero__description { margin-left:auto; margin-right:auto; } body.co-public .co-hero--default .co-hero__actions, body.co-public .co-hero--centered .co-hero__actions, body.public-site .hero--system .hero__actions { justify-content:center; } body.public-site .hero--system .hero__content, body.public-site .hero--system .hero__title, body.public-site .hero--system .hero__subtitle { margin-left:auto; margin-right:auto; text-align:center; } }
@media (prefers-reduced-motion: reduce) { .co-system-orbit, .co-system-orbit__rings, .co-system-orbit__core span, .co-system-orbit__node, .co-system-orbit__status span { animation:none!important; transform:none!important; transition:none!important; } .co-system-orbit__core { transform:translate(-50%,-50%)!important; } }