/* Shared CrossCloud components, lifted out of the homepage's inline <style>.
   It had to become a real stylesheet: these classes (cc-approach-card,
   cc-why-card, cc-role-icon, cc-founder-focus, cc-hero-capabilities ...) are
   used by sections that now live on their own pages, and an inline block
   cannot be shared. It also means 19KB of CSS is now cacheable instead of
   re-downloaded with every homepage view.

   Load this LAST: it collides with cc-fx.css on .cc-stat and .cc-service-card,
   and the inline block used to win those ties by virtue of coming after the
   <link> tags. Keeping it last preserves that cascade exactly. */

/* CrossCloud custom overrides */
.cc-wordmark {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.cc-wordmark:hover,
.cc-wordmark:focus-visible {
    opacity: 0.85;
}

.cc-wordmark .cc-mark {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cc-wordmark .cc-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cc-wordmark .cc-brand-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    background: transparent;
    display: block;
}

.cc-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ---------------- Hero animated background ---------------- */
.cc-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #141a2e 0%, #0b0f1a 55%, #080b14 100%);
}

.cc-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Tech blueprint grid — fades from the centre outward */
.cc-hero-bg::before {
    content: "";
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(rgba(143, 155, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 155, 255, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    animation: ccGridDrift 40s linear infinite;
}

/* Dot particle layer drifting diagonally */
.cc-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(143, 155, 255, 0.28) 1px, transparent 1.2px);
    background-size: 30px 30px;
    opacity: 0.45;
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 10%, transparent 80%);
    animation: ccDotsDrift 45s linear infinite;
}

/* Soft coloured orbs floating behind the copy */
.cc-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
    mix-blend-mode: screen;
}
.cc-hero-orb--a {
    width: 560px; height: 560px;
    background: radial-gradient(circle, #7b6cff 0%, transparent 60%);
    top: -160px; left: -120px;
    animation: ccFloatA 18s ease-in-out infinite;
}
.cc-hero-orb--b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #4aa3ff 0%, transparent 60%);
    top: 5%; right: -140px;
    animation: ccFloatB 22s ease-in-out infinite;
}
.cc-hero-orb--c {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #c35bff 0%, transparent 60%);
    bottom: -160px; left: 35%;
    opacity: 0.42;
    animation: ccFloatC 26s ease-in-out infinite;
}

/* Slowly rotating conic aurora — portal / AI vibe */
.cc-hero-aurora {
    position: absolute;
    top: 50%; left: 50%;
    width: 150%;
    aspect-ratio: 1 / 1;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(123, 108, 255, 0.22) 55deg,
        transparent 120deg,
        rgba(74, 163, 255, 0.22) 200deg,
        transparent 260deg,
        rgba(195, 91, 255, 0.18) 320deg,
        transparent 360deg
    );
    filter: blur(60px);
    mask-image: radial-gradient(circle at center, black 10%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 60%);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: ccAurora 40s linear infinite;
    will-change: transform;
}

@keyframes ccFloatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(70px, 50px) scale(1.1); }
}
@keyframes ccFloatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-60px, 70px) scale(0.9); }
}
@keyframes ccFloatC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(50px, -60px) scale(1.08); }
}
@keyframes ccGridDrift {
    from { background-position: 0 0; }
    to   { background-position: 64px 64px; }
}
@keyframes ccDotsDrift {
    from { background-position: 0 0; }
    to   { background-position: 300px 300px; }
}
@keyframes ccAurora {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-hero-orb,
    .cc-hero-aurora,
    .cc-hero-bg::before,
    .cc-hero-bg::after { animation: none !important; }
}

.cc-hero-capabilities { list-style: none; padding: 0; }
.cc-hero-capabilities li {
    white-space: nowrap;
    font-size: 0.95rem;
}
@media (min-width: 992px) {
    .cc-hero-capabilities li { font-size: 0.95rem; }
}
@media (min-width: 1200px) {
    .cc-hero-capabilities li { font-size: 1rem; }
}

.cc-stat-strip {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
}

.cc-stat-strip .cc-stat h3 {
    color: #fff;
    font-weight: 700;
}

.cc-service-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
    padding: 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cc-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 155, 255, 0.35);
    background: rgba(143, 155, 255, 0.04);
}

.cc-service-card .icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    flex: 0 0 auto;
}

.cc-service-card h5 {
    color: #fff;
    margin-bottom: 0.75rem;
    /* Reserve two lines so 1- and 2-line titles line up across cards */
    min-height: calc(1.35em * 2);
}

/* Description paragraph — reserve the height of the longest copy so
   the first bullet in every card starts on the same horizontal line. */
.cc-service-card > p:not(.cc-eyebrow) {
    margin: 0;
    flex: 0 0 auto;
    min-height: calc(1.55em * 5);
}

.cc-service-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    flex: 0 0 auto;
}

/* "Start with..." eyebrow — pinned to the bottom of the card so the
   baseline of all six cards lines up, and two lines are reserved to
   absorb any wrap. */
.cc-service-card > .cc-eyebrow {
    margin-top: auto;
    padding-top: 1rem;
    min-height: calc(1.6em * 2 + 1rem);
    align-items: flex-start;
}

.cc-service-card ul li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
}

.cc-service-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8f9bff;
}

.cc-approach-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cc-approach-card .step {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(143, 155, 255, 0.12);
    color: #8f9bff;
    font-weight: 700;
    margin-bottom: 1rem;
    flex: 0 0 auto;
}

/* Description paragraph — reserve uniform height so the "Sample
   outputs" eyebrow starts on the same horizontal line across all
   four approach cards. */
.cc-approach-card > p:not(.cc-eyebrow) {
    flex: 0 0 auto;
    min-height: calc(1.55em * 4);
}

.cc-approach-card > .cc-eyebrow {
    align-items: flex-start;
}

.cc-industry-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cc-industry-card .icon {
    width: 44px;
    height: 44px;
    color: #8f9bff;
    margin-bottom: 1rem;
}

.cc-industry-card h6 {
    color: #fff;
    margin-bottom: 0.5rem;
    /* Reserve two lines so one- and two-line titles line up across cards */
    min-height: calc(1.4em * 2);
}

.cc-industry-card p {
    font-size: 0.92rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    flex: 1 1 auto;
}

/* Link-line at the bottom of each card — pinned via margin-top: auto so
   all six cards' purple lines align on the same baseline. */
.cc-industry-card .cc-linkline-wrap {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.cc-industry-card .cc-linkline-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.cc-industry-card .cc-linkline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #8f9bff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(143, 155, 255, 0.35);
    padding-bottom: 0.15rem;
    white-space: nowrap;
    max-width: 100%;
}

.cc-industry-card .cc-linkline:hover {
    color: #b7bdff;
    border-bottom-color: #b7bdff;
}

.cc-why-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem;
    height: 100%;
    background: rgba(255, 255, 255, 0.015);
}

.cc-why-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(123, 108, 255, 0.25), rgba(74, 163, 255, 0.25));
    color: #8f9bff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cc-why-card .icon svg {
    width: 24px;
    height: 24px;
}

.cc-why-card h5 {
    color: #fff;
    margin-bottom: 0.6rem;
}

.cc-why-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.cc-contact-wrap {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    padding: 2rem;
}

@media (min-width: 992px) {
    .cc-contact-wrap {
        padding: 3rem;
    }
}

.cc-cta-panel {
    border-radius: 22px;
    border: 1px solid rgba(143, 155, 255, 0.25);
    background:
        radial-gradient(circle at 85% 15%, rgba(123, 108, 255, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(74, 163, 255, 0.14) 0%, transparent 55%),
        linear-gradient(160deg, rgba(123, 108, 255, 0.12), rgba(74, 163, 255, 0.04));
    padding: 2rem;
}

@media (min-width: 992px) {
    .cc-cta-panel {
        padding: 3rem 3.5rem;
    }
}

.cc-cta-panel h3 {
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
}

.cc-cta-panel p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 60ch;
}

.cc-cta-panel .btn {
    white-space: nowrap;
}

.cc-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    padding-bottom: 0.25rem;
}

.cc-contact-email:hover {
    color: #8f9bff;
    border-bottom-color: #8f9bff;
}

.cc-footer-minimal {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cc-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: #fff;
}

.cc-footer-brand:hover,
.cc-footer-brand:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    color: #fff;
}

.cc-footer-mark {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.cc-footer-wordmark-img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    background: transparent;
}

@media (min-width: 992px) {
    .cc-footer-mark { width: 72px; height: 72px; }
    .cc-footer-wordmark-img { height: 40px; }
}

.navbar .nav-link {
    font-weight: 500;
    /* "How we work" and "Why CrossCloud" were breaking across two lines and
       taking the height of the bar with them. The row is allowed to be tight;
       it is not allowed to hyphenate itself. */
    white-space: nowrap;
}

.navbar .navbar-content-inner .btn {
    white-space: nowrap;
}

/* The template's dark theme marks the active nav item in its own lime
   (#e6f85e). Every other accent on this site is the periwinkle below, which
   left the current page as the one off-brand element in the bar. */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus {
    color: #8f9bff;
}

/* The bar is fixed on every page. Pages that open with a hero reserve its
   height in their own top padding; pages that open straight into content
   need this instead, or the bar sits over the first heading. 90px matches
   the scroll-margin-top already used for in-page anchors below. */
:root {
    --cc-nav-h: 90px;
}

.cc-nav-offset {
    padding-top: var(--cc-nav-h);
}

/* Smooth anchor scrolling */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 90px;
}

.cc-founder-card {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 2rem;
    height: 100%;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.cc-founder-card:hover {
    border-color: rgba(143, 155, 255, 0.35);
    transform: translateY(-3px);
}

.cc-founder-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7b6cff 0%, #4aa3ff 100%);
    opacity: 0.8;
}

.cc-founder-card .cc-role-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(123, 108, 255, 0.18), rgba(74, 163, 255, 0.14));
    color: #8f9bff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.cc-founder-card .cc-role-icon svg {
    width: 22px;
    height: 22px;
}

.cc-founder-card h5 {
    color: #fff;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.cc-founder-card .cc-founder-focus {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8f9bff;
    margin-bottom: 1.1rem;
}

.cc-founder-card p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.cc-founder-card .cc-founder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.cc-founder-card .cc-founder-tags span {
    font-size: 0.74rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(143, 155, 255, 0.08);
    border: 1px solid rgba(143, 155, 255, 0.18);
    color: #c7cdff;
}

/* Honeypot — visually hidden, readable by bots, ignored by humans */
.cc-hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ---------- footer navigation ---------- */

.cc-footer-links li {
  margin-bottom: 8px;
}

.cc-footer-links a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cc-footer-links a:hover,
.cc-footer-links a:focus-visible {
  color: #fff;
}