/* ========================================================================
   HABILIDADES PAGE
   Uses shared design system tokens. Only hab- prefixed classes for
   page-specific layout elements (hero, skills, demos, animations).
   ======================================================================== */


/* ========================================================================
   HEADER — sits on top of the hero
   ======================================================================== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}


/* ========================================================================
   HERO — centered full-viewport
   ======================================================================== */

.hab-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hab-hero .hab-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    position: relative;
    z-index: 2;
    background: radial-gradient(ellipse at center, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
}


/* FLOATING LOGOS — eesier brand marks across three depth layers */

.hab-hero .hab-hero__logos {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    opacity: 0.3;
}

.hab-hero .hab-hero__logos .hab-el {
    position: absolute;
    pointer-events: none;
    background-image: url("https://console.eesier.com.br/img/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1;
}


/* LAYER 1 (nearest) — full size, sharp */

.hab-hero .hab-hero__logos .hab-el:nth-child(1)  { width: 11%; top: 5%;  left: 3%;  z-index: 5; animation: hab-float-near 23s ease-in-out infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(2)  { width: 11%; top: 60%; left: 70%; z-index: 5; animation: hab-float-near 29s ease-in-out 7s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(3)  { width: 11%; top: 75%; left: 20%; z-index: 5; animation: hab-float-near 26s ease-in-out 3s infinite; }


/* LAYER 2 — slightly smaller, light blur */

.hab-hero .hab-hero__logos .hab-el:nth-child(4)  { width: 8%;  top: 2%;  left: 65%; z-index: 4; filter: blur(1px); animation: hab-float-mid-a 19s ease-in-out infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(5)  { width: 8%;  top: 40%; left: 5%;  z-index: 4; filter: blur(1px); animation: hab-float-mid-b 22s ease-in-out 5s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(6)  { width: 8%;  top: 50%; left: 80%; z-index: 4; filter: blur(1px); animation: hab-float-mid-a 17s ease-in-out 9s infinite; }


/* LAYER 3 — medium, moderate blur */

.hab-hero .hab-hero__logos .hab-el:nth-child(7)  { width: 6%;  top: 15%; left: 40%; z-index: 3; filter: blur(2px); animation: hab-float-mid-b 21s ease-in-out 2s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(8)  { width: 6%;  top: 70%; left: 55%; z-index: 3; filter: blur(2px); animation: hab-float-mid-a 18s ease-in-out 8s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(9)  { width: 6%;  top: 85%; left: 90%; z-index: 3; filter: blur(2px); animation: hab-float-mid-b 24s ease-in-out 4s infinite; }


/* LAYER 4 — small, heavy blur */

.hab-hero .hab-hero__logos .hab-el:nth-child(10) { width: 4%;  top: 8%;  left: 88%; z-index: 2; filter: blur(3px); animation: hab-float-far 17s ease-in-out infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(11) { width: 4%;  top: 55%; left: 30%; z-index: 2; filter: blur(3px); animation: hab-float-far 23s ease-in-out 6s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(12) { width: 4%;  top: 30%; left: 12%; z-index: 2; filter: blur(3px); animation: hab-float-far 19s ease-in-out 11s infinite; }


/* LAYER 5 (farthest) — tiny, very blurred */

.hab-hero .hab-hero__logos .hab-el:nth-child(13) { width: 3%;  top: 3%;  left: 50%; z-index: 1; filter: blur(4px); animation: hab-float-far 29s ease-in-out 3s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(14) { width: 3%;  top: 45%; left: 95%; z-index: 1; filter: blur(4px); animation: hab-float-far 21s ease-in-out 9s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(15) { width: 3%;  top: 90%; left: 45%; z-index: 1; filter: blur(4px); animation: hab-float-far 26s ease-in-out 13s infinite; }

.hab-hero .hab-hero__logos .hab-el:nth-child(16) { width: 3%;  top: 65%; left: 8%;  z-index: 1; filter: blur(4px); animation: hab-float-far 18s ease-in-out 7s infinite; }


/* KEYFRAMES — FAR: wide wandering drift, scale breathing */

@keyframes hab-float-far {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    20% { transform: translate(60px, -45px) rotate(8deg) scale(1.06); }
    40% { transform: translate(-40px, -80px) rotate(-5deg) scale(0.94); }
    60% { transform: translate(-70px, 30px) rotate(10deg) scale(1.05); }
    80% { transform: translate(50px, 55px) rotate(-7deg) scale(0.95); }
}


/* KEYFRAMES — MID-A: orbiting drift with rotation */

@keyframes hab-float-mid-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(40px, -35px) rotate(6deg) scale(1.04); }
    50% { transform: translate(-30px, -55px) rotate(-5deg) scale(0.96); }
    75% { transform: translate(-45px, 20px) rotate(3deg) scale(1.03); }
}


/* KEYFRAMES — MID-B: counter-orbit, different rhythm */

@keyframes hab-float-mid-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    30% { transform: translate(-45px, -40px) rotate(-6deg) scale(1.03); }
    60% { transform: translate(35px, -25px) rotate(5deg) scale(0.97); }
    85% { transform: translate(20px, 50px) rotate(-3deg) scale(1.02); }
}


/* KEYFRAMES — NEAR: gentle but visible drift */

@keyframes hab-float-near {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(20px, -18px) rotate(3deg) scale(1.025); }
    66% { transform: translate(-15px, -30px) rotate(-2deg) scale(0.975); }
}

.hab-hero .hab-hero__inner .hab-hero__badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(28, 145, 228, 0.08);
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.hab-hero .hab-hero__inner .hab-hero__headline {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.15;
    margin: 0;
}

.hab-hero .hab-hero__inner .hab-hero__subheadline {
    font-size: 18px;
    color: var(--color-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 650px;
}


/* ========================================================================
   SECTION BACKGROUNDS
   Hero: transparent → Skill 1: #dbeafe → Skill 2: #ffffff → Skill 3: #dbeafe → Skill 4: #ffffff → Email Intel: #dbeafe → Learning: ink → CTA: accent
   ======================================================================== */

.hab-skill--1 {
    background: #dbeafe;
    position: relative;
    z-index: 1;
}

.hab-skill--2 {
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.hab-skill--3 {
    background: #dbeafe;
    position: relative;
    z-index: 1;
}

.hab-skill--4 {
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.hab-email-intel {
    background: #dbeafe;
    position: relative;
    z-index: 1;
}

.hab-learning {
    background: var(--color-ink);
    position: relative;
    z-index: 1;
}

.hab-cta {
    background: var(--color-accent);
    position: relative;
    z-index: 1;
}


/* ========================================================================
   WAVE DIVIDERS
   ======================================================================== */

.hab-skill--1::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-skill--2::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C400,70 1000,10 1440,50 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-skill--3::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C250,75 850,10 1440,65 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-skill--4::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C450,70 1050,10 1440,55 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-email-intel::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C350,70 950,10 1440,60 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-learning::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C500,65 1100,15 1440,55 L1440,80 L0,80 Z' fill='%230f172a'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.hab-cta::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C350,75 950,5 1440,55 L1440,80 L0,80 Z' fill='%23ff6f3c'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}


/* ========================================================================
   SKILL SECTIONS — alternating text/demo layout
   ======================================================================== */

.hab-skill .content-inner.hab-skill__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.hab-skill .content-inner.hab-skill__inner.hab-skill__inner--reversed {
    flex-direction: row-reverse;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(28, 145, 228, 0.08);
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
    margin: 0;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__description {
    font-size: 16px;
    color: var(--color-muted);
    line-height: 1.7;
    margin: 0;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__highlights .hab-skill__highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-ink);
    line-height: 1.5;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__highlights .hab-skill__highlight .hab-skill__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hab-skill .content-inner.hab-skill__inner .hab-skill__demo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================================================================
   GATEKEEPER DEMO — 3-email chain animation
   ======================================================================== */

.hab-skill__demo .hab-demo-gk {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    opacity: 0;
    transform: translateY(25px);
    animation: habGkAppear 0.6s ease-out forwards;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email--1 {
    animation-delay: 0.3s;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email--2 {
    animation-delay: 1.2s;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email--3 {
    animation-delay: 2.1s;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__avatar.hab-demo-gk__avatar--eesier {
    background: var(--color-primary);
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__avatar.hab-demo-gk__avatar--secretary {
    background: #64748b;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__email-meta {
    display: flex;
    flex-direction: column;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__email-meta .hab-demo-gk__from {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-header .hab-demo-gk__email-meta .hab-demo-gk__to {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__email-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.hab-skill__demo .hab-demo-gk .hab-demo-gk__email .hab-demo-gk__tag {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 50px;
    background: rgba(255, 111, 60, 0.15);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
}

@keyframes habGkAppear {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================================================
   DATA UPDATE DEMO — CRM card with morphing fields + chat bubble
   ======================================================================== */

.hab-skill__demo .hab-demo-du {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__chat {
    opacity: 0;
    transform: translateY(25px);
    animation: habDuAppear 0.6s ease-out 0.3s forwards;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__chat .hab-demo-du__bubble {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    font-style: italic;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__chat .hab-demo-du__bubble .hab-demo-du__bubble-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary);
    font-style: normal;
    letter-spacing: 0.5px;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(25px);
    animation: habDuAppear 0.6s ease-out 1.2s forwards;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__card-header .hab-demo-du__card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__card-header .hab-demo-du__card-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field {
    display: flex;
    flex-direction: column;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field .hab-demo-du__field-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.5px;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field .hab-demo-du__field-old {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: line-through;
    animation: habDuFadeOld 2s ease-in-out 2s forwards;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field .hab-demo-du__field-new {
    font-size: 14px;
    color: var(--color-secondary);
    font-weight: 600;
    opacity: 0;
    animation: habDuFadeNew 0.5s ease-out 2.8s forwards;
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field.hab-demo-du__field--static .hab-demo-du__field-value {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__status {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 50px;
    background: rgba(79, 190, 254, 0.12);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    animation: habDuFadeNew 0.5s ease-out 3.3s forwards;
    align-self: flex-start;
}

@keyframes habDuAppear {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes habDuFadeOld {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.15;
    }
}

@keyframes habDuFadeNew {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ========================================================================
   TEAM SHARE DEMO — lead card → share arrow → teammate notification
   ======================================================================== */

.hab-skill__demo .hab-demo-ts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(25px);
    animation: habTsAppear 0.6s ease-out 0.3s forwards;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-header .hab-demo-ts__lead-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-header .hab-demo-ts__lead-info {
    display: flex;
    flex-direction: column;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-header .hab-demo-ts__lead-info .hab-demo-ts__lead-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-header .hab-demo-ts__lead-info .hab-demo-ts__lead-company {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-context {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-context .hab-demo-ts__context-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.5px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__lead .hab-demo-ts__lead-context .hab-demo-ts__context-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    line-height: 1.5;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    opacity: 0;
    animation: habTsFadeIn 0.5s ease-out 1.2s forwards;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__share .hab-demo-ts__share-arrow {
    animation: habTsArrowPulse 1.5s ease-in-out infinite;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__share .hab-demo-ts__share-arrow .hab-demo-ts__arrow-svg {
    width: 28px;
    height: 28px;
    transform: rotate(90deg);
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__share .hab-demo-ts__share-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.5px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(25px);
    animation: habTsAppear 0.6s ease-out 2.1s forwards;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header .hab-demo-ts__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header .hab-demo-ts__avatar.hab-demo-ts__avatar--friend {
    background: #22c55e;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header .hab-demo-ts__notify-meta {
    display: flex;
    flex-direction: column;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header .hab-demo-ts__notify-meta .hab-demo-ts__notify-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-header .hab-demo-ts__notify-meta .hab-demo-ts__notify-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-tag {
    display: inline-block;
    padding: 10px;
    border-radius: 50px;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
    opacity: 0;
    animation: habTsFadeIn 0.5s ease-out 2.8s forwards;
}

@keyframes habTsAppear {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes habTsArrowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes habTsFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* ========================================================================
   GROUP THREAD DEMO — multi-person email chain with CC
   ======================================================================== */

.hab-skill__demo .hab-demo-gt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email {
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(25px);
    animation: habGtAppear 0.6s ease-out forwards;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email--1 {
    animation-delay: 0.3s;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email--2 {
    animation-delay: 1.2s;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email--3 {
    animation-delay: 2.1s;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__avatar.hab-demo-gt__avatar--eesier {
    background: var(--color-primary);
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__avatar.hab-demo-gt__avatar--lead {
    background: #8b5cf6;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__email-meta {
    display: flex;
    flex-direction: column;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__email-meta .hab-demo-gt__from {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-header .hab-demo-gt__email-meta .hab-demo-gt__to {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__cc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__cc .hab-demo-gt__cc-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__email-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__tag {
    display: inline-block;
    padding: 10px;
    border-radius: 50px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
    opacity: 0;
    animation: habGtTagAppear 0.5s ease-out 2.8s forwards;
}

@keyframes habGtTagAppear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes habGtAppear {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================================================
   EMAIL INTELLIGENCE SECTION — data-driven send timing
   ======================================================================== */

.hab-email-intel .content-inner.hab-email-intel__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(28, 145, 228, 0.08);
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
    margin: 0;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__description {
    font-size: 16px;
    color: var(--color-muted);
    line-height: 1.7;
    margin: 0;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__highlights .hab-email-intel__highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-ink);
    line-height: 1.5;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__highlights .hab-email-intel__highlight .hab-email-intel__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__demo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* EMAIL INTELLIGENCE DEMO — dashboard panel */

.hab-email-intel__demo .hab-demo-ei {
    width: 100%;
    max-width: 420px;
    background: var(--color-ink);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__header .hab-demo-ei__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__header .hab-demo-ei__title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__table-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__table-head .hab-demo-ei__th {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__table-head .hab-demo-ei__th--sector {
    flex: 1;
    padding-left: 25px;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__table-head .hab-demo-ei__th--time {
    width: 100px;
    text-align: center;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__table-head .hab-demo-ei__th--wait {
    width: 90px;
    text-align: center;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(10px);
    animation: habEiRowAppear 0.5s ease-out forwards;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row--1 { animation-delay: 0.3s; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row--2 { animation-delay: 0.7s; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row--3 { animation-delay: 1.1s; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row--4 { animation-delay: 1.5s; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row--5 { animation-delay: 1.9s; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__dot--blue { background: var(--color-primary); }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__dot--cyan { background: var(--color-secondary); }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__dot--green { background: #22c55e; }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__dot--orange { background: var(--color-accent); }

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__cell--name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__cell--time {
    width: 100px;
    text-align: center;
    font-size: 13px;
    color: var(--color-secondary);
    font-weight: 600;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row .hab-demo-ei__cell--wait {
    width: 90px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__counter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(79, 190, 254, 0.08);
    align-self: flex-start;
    opacity: 0;
    animation: habEiCounterAppear 0.5s ease-out 2.5s forwards;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__counter .hab-demo-ei__counter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: habEiPulse 1.5s ease-in-out infinite;
}

.hab-email-intel__demo .hab-demo-ei .hab-demo-ei__counter .hab-demo-ei__counter-text {
    font-size: 12px;
    color: var(--color-secondary);
    font-weight: 600;
}

@keyframes habEiRowAppear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes habEiCounterAppear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes habEiPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


/* ========================================================================
   LEARNING SECTION — continuous learning, dark background
   ======================================================================== */

.hab-learning .content-inner.hab-learning__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}


/* TEXT COLUMN */

.hab-learning .content-inner.hab-learning__inner .hab-learning__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(79, 190, 254, 0.1);
    color: var(--color-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__highlights .hab-learning__highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__highlights .hab-learning__highlight .hab-learning__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* VISUAL COLUMN */

.hab-learning .content-inner.hab-learning__inner .hab-learning__visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* LEARNING LOG DEMO */

.hab-learning__visual .hab-demo-learn {
    width: 100%;
    max-width: 420px;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid rgba(28, 145, 228, 0.15);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__header .hab-demo-learn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__header .hab-demo-learn__title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateX(-10px);
    animation: habLearnAppear 0.5s ease-out forwards;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event--1 { animation-delay: 0.3s; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event--2 { animation-delay: 0.9s; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event--3 { animation-delay: 1.5s; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event--4 { animation-delay: 2.1s; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event--5 { animation-delay: 2.7s; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__dot--blue { background: var(--color-primary); }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__dot--cyan { background: var(--color-secondary); }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__dot--green { background: #22c55e; }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__dot--orange { background: var(--color-accent); }

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__event-content {
    display: flex;
    flex-direction: column;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__event-content .hab-demo-learn__event-type {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event .hab-demo-learn__event-content .hab-demo-learn__event-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    line-height: 1.5;
}


/* PULSE INDICATOR */

.hab-learning__visual .hab-demo-learn .hab-demo-learn__pulse {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: habLearnAppear 0.5s ease-out 3.5s forwards;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__pulse .hab-demo-learn__pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: habLearnPulse 1.5s ease-in-out infinite;
}

.hab-learning__visual .hab-demo-learn .hab-demo-learn__pulse .hab-demo-learn__pulse-text {
    font-size: 12px;
    color: var(--color-secondary);
    font-weight: 500;
}

@keyframes habLearnAppear {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes habLearnPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


/* ========================================================================
   CTA SECTION
   ======================================================================== */

.hab-cta .content-inner.hab-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
}

.hab-cta .content-inner.hab-cta__inner .hab-cta__title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.hab-cta .content-inner.hab-cta__inner .hab-cta__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0;
    max-width: 550px;
}

.hab-cta .content-inner.hab-cta__inner .hab-cta__subtext {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


/* ========================================================================
   RESPONSIVE — tablet (768px+)
   ======================================================================== */

@media (min-width: 768px) {

    .hab-hero .hab-hero__inner .hab-hero__headline {
        font-size: 48px;
    }

}


/* ========================================================================
   RESPONSIVE — mobile (max 768px)
   ======================================================================== */

@media (max-width: 768px) {

    .hab-hero .hab-hero__inner {
        padding: 25px;
    }

    .hab-hero .hab-hero__inner .hab-hero__headline {
        font-size: 28px;
    }

    .hab-hero .hab-hero__inner .hab-hero__subheadline {
        font-size: 16px;
    }

    .hab-skill .content-inner.hab-skill__inner {
        flex-direction: column;
        gap: 25px;
    }

    .hab-skill .content-inner.hab-skill__inner.hab-skill__inner--reversed {
        flex-direction: column;
    }

    .hab-skill .content-inner.hab-skill__inner .hab-skill__text .hab-skill__title {
        font-size: 24px;
    }

    .hab-skill--1::before,
    .hab-skill--2::before,
    .hab-skill--3::before,
    .hab-skill--4::before,
    .hab-email-intel::before,
    .hab-learning::before,
    .hab-cta::before {
        height: 50px;
        top: -49px;
    }

    .hab-email-intel .content-inner.hab-email-intel__inner {
        flex-direction: column;
        gap: 25px;
    }

    .hab-email-intel .content-inner.hab-email-intel__inner .hab-email-intel__text .hab-email-intel__title {
        font-size: 24px;
    }

    .hab-email-intel__demo .hab-demo-ei {
        max-width: 100%;
    }

    .hab-learning .content-inner.hab-learning__inner {
        flex-direction: column;
        gap: 25px;
    }

    .hab-learning .content-inner.hab-learning__inner .hab-learning__text .hab-learning__title {
        font-size: 24px;
    }

    .hab-cta .content-inner.hab-cta__inner .hab-cta__title {
        font-size: 24px;
    }

    .hab-skill__demo .hab-demo-gk,
    .hab-skill__demo .hab-demo-du,
    .hab-skill__demo .hab-demo-ts,
    .hab-skill__demo .hab-demo-gt {
        max-width: 100%;
    }

    .hab-learning__visual .hab-demo-learn {
        max-width: 100%;
    }

}


/* ========================================================================
   REDUCED MOTION — show all content immediately
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

    .hab-hero .hab-hero__logos .hab-el {
        animation: none;
    }

    .hab-skill__demo .hab-demo-gk .hab-demo-gk__email,
    .hab-skill__demo .hab-demo-du .hab-demo-du__chat,
    .hab-skill__demo .hab-demo-du .hab-demo-du__card,
    .hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field .hab-demo-du__field-new,
    .hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__status {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hab-skill__demo .hab-demo-du .hab-demo-du__card .hab-demo-du__field .hab-demo-du__field-old {
        animation: none;
        opacity: 0.15;
    }

    .hab-skill__demo .hab-demo-ts .hab-demo-ts__lead,
    .hab-skill__demo .hab-demo-ts .hab-demo-ts__share,
    .hab-skill__demo .hab-demo-ts .hab-demo-ts__notify,
    .hab-skill__demo .hab-demo-ts .hab-demo-ts__notify .hab-demo-ts__notify-tag {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hab-skill__demo .hab-demo-ts .hab-demo-ts__share .hab-demo-ts__share-arrow {
        animation: none;
    }

    .hab-skill__demo .hab-demo-gt .hab-demo-gt__email,
    .hab-skill__demo .hab-demo-gt .hab-demo-gt__email .hab-demo-gt__tag {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hab-learning__visual .hab-demo-learn .hab-demo-learn__feed .hab-demo-learn__event,
    .hab-learning__visual .hab-demo-learn .hab-demo-learn__pulse {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hab-learning__visual .hab-demo-learn .hab-demo-learn__pulse .hab-demo-learn__pulse-dot {
        animation: none;
        opacity: 1;
    }

    .hab-email-intel__demo .hab-demo-ei .hab-demo-ei__rows .hab-demo-ei__row,
    .hab-email-intel__demo .hab-demo-ei .hab-demo-ei__counter {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hab-email-intel__demo .hab-demo-ei .hab-demo-ei__counter .hab-demo-ei__counter-dot {
        animation: none;
        opacity: 1;
    }

}