:root{
        --ser-hero-bg-1: #050b17;
        --ser-hero-bg-2: #0a1226;
        --ser-hero-cyan: #35d8f4;
        --ser-hero-purple: #9b6bff;
        --ser-hero-text: #f3f5fa;
        --ser-hero-text-muted: #a7b0c4;
    }

    .ser-hero-section{
        position: relative;
        background: radial-gradient(120% 140% at 80% 20%, #101d3d 0%, var(--ser-hero-bg-2) 45%, var(--ser-hero-bg-1) 100%);
        padding: 90px 0;
        overflow: hidden;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .ser-hero-container{
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
    }

    /* Eyebrow */
    .ser-hero-eyebrow{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
        color: var(--ser-hero-cyan);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .ser-hero-eyebrow-line{
        width: 40px;
        height: 1px;
        background: linear-gradient(90deg, var(--ser-hero-cyan), transparent);
    }

    /* Heading */
    .ser-hero-heading{
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: clamp(34px, 4vw, 50px);
        line-height: 1.18;
        color: var(--ser-hero-text);
        margin: 0 5px 22px;
    }

    .ser-hero-heading-accent{
        background: linear-gradient(90deg, var(--ser-hero-cyan) 0%, var(--ser-hero-purple) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* Description */
    .ser-hero-desc{
        color: var(--ser-hero-text-muted);
        font-size: 16px;
        line-height: 1.7;
        max-width: 460px;
        margin: 0 5px 36px;
    }

    /* Actions */
    .ser-hero-actions{
        display: flex;
        align-items: center;
        gap: 28px;
        flex-wrap: wrap;
    }

    .ser-hero-btn{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(90deg, #2fd3f0 0%, #9b6bff 100%);
        color: #061021;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        padding: 15px 26px;
        border-radius: 999px;
        transition: transform .25s ease, box-shadow .25s ease;
        box-shadow: 0 10px 30px -8px rgba(90, 140, 255, .55);
    }

    .ser-hero-btn:hover{
        transform: translateY(-2px);
        box-shadow: 0 14px 34px -6px rgba(90, 140, 255, .7);
    }

    .ser-hero-watch{
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--ser-hero-text);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
    }

    .ser-hero-play-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.35);
        color: var(--ser-hero-text);
        transition: background .25s ease, border-color .25s ease;
        flex-shrink: 0;
    }

    .ser-hero-watch:hover .ser-hero-play-btn{
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.6);
    }

    /* Media */
    .ser-hero-media{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ser-hero-image{
        width: 100%;
        max-width: 560px;
        height: auto;
        display: block;
        filter: drop-shadow(0 30px 60px rgba(30, 130, 255, .25));
    }

    /* Responsive */
    @media (max-width: 900px){
        .ser-hero-container{
            grid-template-columns: 1fr;
            text-align: left;
        }
        .ser-hero-media{
            order: -1;
            margin-bottom: 20px;
        }
        .ser-hero-desc{
            max-width: 100%;
        }
    }

    @media (max-width: 480px){
        .ser-hero-section{ padding: 60px 0; }
        .ser-hero-actions{ gap: 18px; }
        .ser-hero-btn{ padding: 13px 22px; font-size: 14px; }
    }

    @media (prefers-reduced-motion: reduce){
        .ser-hero-btn{ transition: none; }
    }





    
/* =============================================================
   2 & 3. MARKUP tokens + STYLE
   ============================================================= */
.ombrion-caps {
  --caps-ink: #0f1b2d;
  --caps-slate: #5b6b85;
  --caps-surface: #EAF0FD;
  --caps-surface-tint: #f4f7ff;
  --caps-line: rgba(15, 27, 45, 0.08);
  --caps-electric: #2f6bff;
  --caps-violet: #7c4dff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--caps-surface);
  color: var(--caps-ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  scroll-margin-top: 82px; /* lands cleanly under the sticky header */
}

.ombrion-caps__inner {
  max-width: 1280px; margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ombrion-caps__head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.ombrion-caps__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--caps-electric);
  padding-bottom: 0.4rem;
  position: relative;
}
.ombrion-caps__eyebrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px; width: 42px;
  background: linear-gradient(90deg, var(--caps-electric), var(--caps-violet));
  transform: scaleX(0); transform-origin: left;
  animation: caps-wipe-x 620ms var(--ease) both; animation-delay: 120ms;
}

.ombrion-caps__headline {
  margin: 0.85rem 0 0.9rem;
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.18;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  color: var(--caps-ink);
}

.ombrion-caps__subline {
  margin: 0; font-size: clamp(0.98rem, 1.4vw, 1.05rem);
  line-height: 1.65; color: var(--caps-slate);
}

@keyframes caps-wipe-x { to { transform: scaleX(1); } }

/* ---- Grid ---- */
.ombrion-caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  list-style: none; margin: 0; padding: 0;
}

.ombrion-caps__card {
  position: relative;
  background: var(--caps-surface);
  border: 1px solid var(--caps-line);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  opacity: 0; transform: translateY(22px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease),
              border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.ombrion-caps__card.is-visible { opacity: 1; transform: translateY(0); }

.ombrion-caps__card:hover, .ombrion-caps__card:focus-within {
  border-color: rgba(47, 107, 255, 0.35);
  box-shadow: 0 22px 44px -26px rgba(15, 27, 45, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .ombrion-caps__card { transition: none; opacity: 1; transform: none; }
  .ombrion-caps__eyebrow::after { animation: none; transform: scaleX(1); }
}

.ombrion-caps__icon {
  flex-shrink: 0; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(47,107,255,0.12), rgba(124,77,255,0.12));
  color: var(--caps-electric);
  transition: transform 260ms var(--ease);
}
.ombrion-caps__card:hover .ombrion-caps__icon { transform: scale(1.08) rotate(-4deg); }
.ombrion-caps__icon svg { width: 22px; height: 22px; }

.ombrion-caps__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--caps-ink); }
.ombrion-caps__desc { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--caps-slate); }





 :root{
        --ser-why-bg-1: #050b17;
        --ser-why-bg-2: #0a1226;
        --ser-why-cyan: #35d8f4;
        --ser-why-purple: #9b6bff;
        --ser-why-text: #f3f5fa;
        --ser-why-text-muted: #a7b0c4;
    }

    .ser-why-section{
        position: relative;
        background: linear-gradient(180deg, var(--ser-why-bg-1) 0%, var(--ser-why-bg-2) 100%);
        padding: 90px 0;
        overflow: hidden;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .ser-why-container{
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
    }

    /* Eyebrow */
    .ser-why-eyebrow{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
        color: var(--ser-why-cyan);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .ser-ser-why-eyebrow-line{
        width: 40px;
        height: 1px;
        background: linear-gradient(90deg, var(--ser-why-cyan), transparent);
    }

    /* Heading */
    .ser-why-heading{
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: clamp(30px, 3.6vw, 42px);
        line-height: 1.25;
        color: var(--ser-why-text);
        margin: 0 0 20px;
    }

    /* Description */
    .ser-why-desc{
        color: var(--ser-why-text-muted);
        font-size: 16px;
        line-height: 1.7;
        max-width: 460px;
        margin: 0 0 40px;
    }

    /* Feature grid */
    .ser-why-features{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 40px;
        max-width: 480px;
    }

    .ser-why-feature{
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .ser-why-feature-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
        color: var(--ser-why-cyan);
        background: rgba(53, 216, 244, 0.08);
        border: 1px solid rgba(53, 216, 244, 0.3);
    }

    .ser-why-feature-text{
        color: var(--ser-why-text);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
    }

    /* Media */
    .ser-why-media{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ser-why-image{
        width: 100%;
        max-width: 620px;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    .ser-why-caption{
        position: absolute;
        right: 6%;
        bottom: 6%;
        font-family: 'Caveat', 'Segoe Script', cursive;
        font-size: 26px;
        line-height: 1.15;
        color: var(--ser-why-cyan);
        text-shadow: 0 0 12px rgba(53, 216, 244, .55);
        transform: rotate(-4deg);
        pointer-events: none;
    }

    /* Responsive */
    @media (max-width: 900px){
        .ser-why-container{
            grid-template-columns: 1fr;
        }
        .ser-why-media{
            order: -1;
            margin-bottom: 20px;
        }
        .ser-why-desc{
            max-width: 100%;
        }
        .ser-why-features{
            max-width: 100%;
        }
    }

    @media (max-width: 480px){
        .ser-why-section{ padding: 60px 0; }
        .ser-why-features{
            grid-template-columns: 1fr;
            gap: 22px;
        }
        .ser-why-caption{ font-size: 20px; }
    }

    @media (prefers-reduced-motion: reduce){
        .ser-why-feature-icon{ transition: none; }
    }




     :root{
        --proc-bg: #f7f8fb;
        --proc-navy: #14213d;
        --proc-text-muted: #5b6478;
        --proc-blue: #2f9bff;
        --proc-blue-bg: #dcefff;
        --proc-purple: #7c5cf5;
        --proc-purple-bg: #e8e2fd;
        --proc-teal: #22c99e;
        --proc-teal-bg: #d6f5ea;
        --proc-orange: #f2994a;
        --proc-orange-bg: #fde7d2;
    }

    .process-section{
        background: var(--proc-bg);
        padding: 80px 0;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .process-container{
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
    }

    /* Eyebrow */
    .process-eyebrow{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: var(--proc-blue);
        font-size: 14px;
        font-weight: 600;
    }

    .process-eyebrow-line{
        width: 32px;
        height: 1px;
        background: var(--proc-blue);
    }

    /* Heading */
    .process-heading{
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: clamp(28px, 3.2vw, 38px);
        color: var(--proc-navy);
        margin: 0 0 16px;
    }

    /* Description */
    .process-desc{
        color: var(--proc-text-muted);
        font-size: 16px;
        line-height: 1.65;
        max-width: 480px;
        margin: 0 0 56px;
    }

    /* Steps row */
    .process-steps{
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    .process-step{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 190px;
        flex-shrink: 0;
    }

    .process-arrow{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 24px;
        margin-top: 30px;
        opacity: .8;
    }

    .process-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-bottom: 18px;
    }

    .process-icon--blue{ background: var(--proc-blue-bg); color: var(--proc-blue); }
    .process-icon--purple{ background: var(--proc-purple-bg); color: var(--proc-purple); }
    .process-icon--teal{ background: var(--proc-teal-bg); color: var(--proc-teal); }
    .process-icon--orange{ background: var(--proc-orange-bg); color: var(--proc-orange); }

    .process-number{
        font-size: 13px;
        font-weight: 700;
        color: var(--proc-blue);
        margin-bottom: 4px;
    }

    .process-title{
        font-size: 18px;
        font-weight: 700;
        color: var(--proc-navy);
        margin-bottom: 8px;
    }

    .process-desc-text{
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--proc-text-muted);
    }

    /* Responsive */
    @media (max-width: 1100px){
        .process-steps{ flex-wrap: wrap; row-gap: 40px; }
        .process-arrow{ display: none; }
        .process-step{ width: 45%; }
    }

    @media (max-width: 600px){
        .process-section{ padding: 56px 0; }
        .process-step{ width: 100%; }
        .process-desc{ max-width: 100%; }
    }

      :root{
        --cta-bg-1: #050b17;
        --cta-bg-2: #0a1226;
        --cta-cyan: #35d8f4;
        --cta-purple: #9b6bff;
        --cta-text: #f3f5fa;
        --cta-text-muted: #a7b0c4;
    }

    .cta-section{
        position: relative;
        background: radial-gradient(120% 160% at 70% 30%, #0d1b3d 0%, var(--cta-bg-2) 45%, var(--cta-bg-1) 100%);
        padding: 90px 0;
        overflow: hidden;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .cta-bg-waves{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .cta-wave{
        animation: cta-wave-flow 6s linear infinite;
    }
    .cta-wave--2{ animation-duration: 8s; animation-direction: reverse; }
    .cta-wave--3{ animation-duration: 10s; }

    @keyframes cta-wave-flow{
        to{ stroke-dashoffset: -100; }
    }

    .cta-container{
        position: relative;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 32px;
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 24px;
    }

    /* Eyebrow */
    .cta-eyebrow{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        color: var(--cta-cyan);
        font-size: 14px;
        font-weight: 500;
    }

    .cta-eyebrow-line{
        width: 36px;
        height: 1px;
        background: linear-gradient(90deg, var(--cta-cyan), transparent);
    }

    /* Heading */
    .cta-heading{
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: clamp(28px, 3.2vw, 40px);
        line-height: 1.2;
        color: var(--cta-text);
        margin: 0 0 20px;
    }

    /* Description */
    .cta-desc{
        color: var(--cta-text-muted);
        font-size: 15.5px;
        line-height: 1.7;
        max-width: 420px;
        margin: 0 0 32px;
    }

    /* Button */
    .cta-btn{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(90deg, #2fd3f0 0%, #9b6bff 100%);
        color: #061021;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        padding: 15px 26px;
        border-radius: 999px;
        transition: transform .25s ease, box-shadow .25s ease;
        box-shadow: 0 10px 30px -8px rgba(90, 140, 255, .55);
    }

    .cta-btn:hover{
        transform: translateY(-2px);
        box-shadow: 0 14px 34px -6px rgba(90, 140, 255, .7);
    }

    /* Media: globe + stats */
    .cta-media{
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 20px;
    }

    .cta-globe-wrap{
        position: relative;
        width: 100%;
        max-width: 420px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .cta-globe-glow{
        position: absolute;
        inset: 8%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(95, 217, 255, .35) 0%, rgba(155, 107, 255, .12) 55%, transparent 75%);
        filter: blur(6px);
        animation: cta-pulse 4s ease-in-out infinite;
    }

    /* faint static ring so the sphere reads as fixed in space while the surface spins */
    .cta-globe-ring{
        position: absolute;
        inset: 2%;
        border-radius: 50%;
        border: 1px solid rgba(111, 220, 255, .18);
        box-shadow: 0 0 40px rgba(95, 217, 255, .12) inset;
    }

    .cta-globe-img{
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        object-fit: cover;
        animation: cta-globe-rotate 14s linear infinite;
        will-change: transform;
        filter: drop-shadow(0 0 30px rgba(95, 217, 255, .25));
    }

    /* Flat spin + a horizontal squeeze/unsqueeze pass to fake the sphere turning in 3D */
    @keyframes cta-globe-rotate{
        0%   { transform: rotate(0deg)   scaleX(1); }
        25%  { transform: rotate(90deg)  scaleX(0.94); }
        50%  { transform: rotate(180deg) scaleX(1); }
        75%  { transform: rotate(270deg) scaleX(0.94); }
        100% { transform: rotate(360deg) scaleX(1); }
    }

    @keyframes cta-pulse{
        0%, 100% { opacity: .7; transform: scale(1); }
        50%      { opacity: 1;  transform: scale(1.04); }
    }

    /* Stats */
    .cta-stats{
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding-left: 20px;
        border-left: 1px solid rgba(255,255,255,.12);
    }

    .cta-stat{
        display: flex;
        flex-direction: column;
    }

    .cta-stat-value{
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 700;
        font-size: 26px;
        color: var(--cta-text);
        line-height: 1.2;
    }

    .cta-stat-label{
        font-size: 12.5px;
        color: var(--cta-text-muted);
        white-space: nowrap;
    }

    /* Responsive */
    @media (max-width: 980px){
        .cta-container{
            grid-template-columns: 1fr;
        }
        .cta-media{
            order: -1;
            grid-template-columns: 1fr;
            justify-items: center;
            margin-bottom: 20px;
            gap: 24px;
        }
        .cta-stats{
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            border-left: none;
            border-top: 1px solid rgba(255,255,255,.12);
            padding-left: 0;
            padding-top: 20px;
            gap: 28px;
        }
        .cta-desc{ max-width: 100%; }
    }

    @media (max-width: 480px){
        .cta-section{ padding: 60px 0; }
        .cta-globe-wrap{ max-width: 300px; }
    }

    @media (prefers-reduced-motion: reduce){
        .cta-globe-img,
        .cta-globe-glow,
        .cta-wave{
            animation: none;
        }
    }