/* Happy2Office contextual illustration layer
   Frontend-only: decorative CSS illustrations for existing cards/pages. */
:root {
    --h2o-ill-emerald: #00C07F;
    --h2o-ill-teal: #12D6B4;
    --h2o-ill-blue: #3B82F6;
    --h2o-ill-navy: #0A1628;
    --h2o-ill-orange: #FF6B35;
    --h2o-ill-gold: #FFB800;
    --h2o-ill-violet: #A855F7;
}

.featured-card,
.prod-card,
.map-card,
.premium-card,
.roadmap-card,
.faq-item,
.value-card,
.journey-step,
.architecture-card,
.honest-tag,
.dashboard.html .card,
.card.crm,
.card.invoice,
    position: relative;
    overflow: hidden;
}

.featured-card > *,
.prod-card > *,
.map-card > *,
.premium-card > *,
.roadmap-card > *,
.faq-item > *,
.value-card > *,
.journey-step > *,
.architecture-card > *,
.honest-tag > *,
.card > * {
    position: relative;
    z-index: 2;
}

.featured-card::after,
.prod-card::after,
.map-card::after,
.premium-card::after,
.roadmap-card::after,
.faq-item::after,
.value-card::after,
.journey-step::after,
.architecture-card::after,
.honest-tag::after,
.card.crm::after,
.card.invoice::after,
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
    transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.featured-card:hover::after,
.prod-card:hover::after,
.map-card:hover::after,
.premium-card:hover::after,
.roadmap-card:hover::after,
.faq-item:hover::after,
.value-card:hover::after,
.journey-step:hover::after,
.architecture-card:hover::after,
.honest-tag:hover::after,
.card:hover::after {
    transform: translateY(-4px) scale(1.03);
    opacity: 1;
}

/* Product dropdown / featured app cards */
.featured-card::after {
    width: 112px;
    height: 88px;
    right: -18px;
    bottom: -18px;
    opacity: .42;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.18) 0 45%, transparent 45% 55%, rgba(255,255,255,.18) 55% 100%),
        linear-gradient(180deg, rgba(0,192,127,.36), rgba(59,130,246,.2));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.18);
}

/* Homepage product cards */
.prod-card::after {
    width: 150px;
    height: 130px;
    top: 22px;
    right: -38px;
    opacity: .18;
    border-radius: 32px;
    background:
        radial-gradient(circle at 24% 24%, rgba(255,255,255,.85) 0 8px, transparent 9px),
        linear-gradient(90deg, currentColor 0 52%, transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
}
.prod-card.pc-crm::after {
    background:
        radial-gradient(circle at 22% 22%, rgba(0,192,127,.95) 0 9px, transparent 10px),
        linear-gradient(90deg, rgba(0,192,127,.28) 0 42%, transparent 42% 50%, rgba(59,130,246,.22) 50% 100%),
        repeating-linear-gradient(180deg, rgba(10,22,40,.14) 0 9px, transparent 9px 18px);
}
.prod-card.pc-invoice::after {
    background:
        linear-gradient(180deg, rgba(255,107,53,.28), rgba(255,184,0,.12)),
        repeating-linear-gradient(180deg, rgba(10,22,40,.18) 0 5px, transparent 5px 17px);
    clip-path: polygon(0 0, 100% 0, 100% 82%, 88% 74%, 76% 82%, 64% 74%, 52% 82%, 40% 74%, 28% 82%, 16% 74%, 0 82%);
}
    background:
        radial-gradient(circle at 50% 22%, rgba(59,130,246,.42) 0 18px, transparent 19px),
        linear-gradient(135deg, rgba(59,130,246,.32), rgba(168,85,247,.18));
    clip-path: polygon(50% 0, 76% 38%, 100% 46%, 78% 62%, 82% 100%, 50% 78%, 18% 100%, 22% 62%, 0 46%, 24% 38%);
}

/* Product ecosystem map */
.map-card::after {
    width: 140px;
    height: 140px;
    right: -36px;
    top: -30px;
    opacity: .18;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 11px, transparent 12px),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 28px, rgba(255,255,255,.22) 29px 30px),
        conic-gradient(from 90deg, rgba(0,192,127,.45), rgba(59,130,246,.35), rgba(255,107,53,.35), rgba(0,192,127,.45));
}
.map-card:nth-child(1)::after { background-color: rgba(0,192,127,.16); }
.map-card:nth-child(3)::after { background-color: rgba(0,192,127,.22); }
.map-card:nth-child(5)::after { background-color: rgba(59,130,246,.2); }
.map-card:nth-child(7)::after { background-color: rgba(255,107,53,.18); }

/* Generic premium content cards: contextual mini-scenes */
.premium-card::after {
    width: 126px;
    height: 94px;
    right: -22px;
    bottom: -20px;
    opacity: .18;
    border-radius: 24px;
    background:
        radial-gradient(circle at 24px 24px, var(--h2o-ill-emerald) 0 9px, transparent 10px),
        linear-gradient(90deg, rgba(0,192,127,.32), rgba(59,130,246,.16)),
        repeating-linear-gradient(180deg, rgba(10,22,40,.22) 0 6px, transparent 6px 17px);
}
.premium-card:nth-child(2n)::after {
    background:
        radial-gradient(circle at 28px 26px, var(--h2o-ill-blue) 0 8px, transparent 9px),
        linear-gradient(135deg, rgba(59,130,246,.25), rgba(168,85,247,.14)),
        repeating-linear-gradient(90deg, rgba(10,22,40,.18) 0 7px, transparent 7px 19px);
}
.premium-card:nth-child(3n)::after {
    background:
        radial-gradient(circle at 28px 28px, var(--h2o-ill-orange) 0 8px, transparent 9px),
        linear-gradient(180deg, rgba(255,107,53,.24), rgba(255,184,0,.12)),
        repeating-linear-gradient(180deg, rgba(10,22,40,.16) 0 5px, transparent 5px 16px);
}

/* Journey steps */
.journey-step::after {
    width: 74px;
    height: 42px;
    right: 18px;
    top: 20px;
    opacity: .16;
    background:
        radial-gradient(circle, var(--h2o-ill-emerald) 0 6px, transparent 7px) 0 50% / 22px 22px no-repeat,
        radial-gradient(circle, var(--h2o-ill-blue) 0 6px, transparent 7px) 100% 50% / 22px 22px no-repeat,
        linear-gradient(90deg, var(--h2o-ill-emerald), var(--h2o-ill-blue)) center / 72% 3px no-repeat;
}

/* Security architecture cards */
.architecture-card::after {
    width: 190px;
    height: 150px;
    right: -42px;
    bottom: -36px;
    opacity: .16;
    border-radius: 38px;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.65) 0 13px, transparent 14px),
        linear-gradient(135deg, rgba(0,192,127,.36), rgba(59,130,246,.2));
    clip-path: polygon(50% 0, 92% 16%, 84% 72%, 50% 100%, 16% 72%, 8% 16%);
}

/* FAQ / Roadmap / Values */
.faq-item::after,
.roadmap-card::after,
.value-card::after,
.honest-tag::after {
    width: 88px;
    height: 88px;
    right: -20px;
    top: -18px;
    opacity: .14;
    border-radius: 28px;
    background:
        radial-gradient(circle at 28px 28px, var(--h2o-ill-emerald) 0 10px, transparent 11px),
        linear-gradient(135deg, rgba(0,192,127,.26), rgba(59,130,246,.14));
}
.roadmap-card::after {
    border-radius: 999px;
    background:
        repeating-radial-gradient(circle at center, transparent 0 18px, rgba(0,192,127,.22) 19px 20px),
        radial-gradient(circle at center, rgba(59,130,246,.22), transparent 60%);
}
.value-card::after {
    top: auto;
    bottom: -26px;
    background:
        radial-gradient(circle at 30% 35%, rgba(0,192,127,.38) 0 11px, transparent 12px),
        radial-gradient(circle at 68% 64%, rgba(255,107,53,.28) 0 8px, transparent 9px),
        linear-gradient(135deg, rgba(59,130,246,.18), transparent);
}

/* Product landing pages */
.mockup-container::after {
    content: '';
    position: absolute;
    right: 34px;
    top: 48px;
    width: 128px;
    height: 128px;
    border-radius: 36px;
    pointer-events: none;
    opacity: .18;
    background:
        radial-gradient(circle at 35% 35%, var(--h2o-ill-emerald) 0 13px, transparent 14px),
        linear-gradient(135deg, rgba(0,192,127,.45), rgba(59,130,246,.18));
    box-shadow: 0 24px 58px rgba(0,192,127,.16);
}

.complex-ui::before {
    content: '';
    position: absolute;
    inset: 14px 14px auto auto;
    width: 82px;
    height: 64px;
    border-radius: 18px;
    opacity: .13;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--h2o-ill-emerald) 0 46%, transparent 46% 54%, var(--h2o-ill-blue) 54% 100%),
        repeating-linear-gradient(180deg, rgba(10,22,40,.22) 0 5px, transparent 5px 15px);
}

.fb-visual::after {
    content: '';
    position: absolute;
    left: -24px;
    bottom: -24px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: .12;
    pointer-events: none;
    background: conic-gradient(from 90deg, var(--h2o-ill-emerald), var(--h2o-ill-blue), var(--h2o-ill-orange), var(--h2o-ill-emerald));
    filter: blur(.2px);
}

/* Product hub dashboard cards */
.card.crm::after,
.card.invoice::after,
    width: 150px;
    height: 118px;
    right: -34px;
    bottom: -26px;
    opacity: .2;
    border-radius: 28px;
}
.card.crm::after {
    background:
        radial-gradient(circle at 22% 24%, var(--h2o-ill-emerald) 0 9px, transparent 10px),
        linear-gradient(90deg, rgba(0,192,127,.38), rgba(59,130,246,.16)),
        repeating-linear-gradient(180deg, rgba(10,22,40,.18) 0 7px, transparent 7px 18px);
}
.card.invoice::after {
    background:
        linear-gradient(180deg, rgba(255,107,53,.32), rgba(255,184,0,.12)),
        repeating-linear-gradient(180deg, rgba(10,22,40,.16) 0 5px, transparent 5px 16px);
    clip-path: polygon(0 0, 100% 0, 100% 82%, 88% 74%, 76% 82%, 64% 74%, 52% 82%, 40% 74%, 28% 82%, 16% 74%, 0 82%);
}
    background: linear-gradient(135deg, rgba(59,130,246,.34), rgba(168,85,247,.18));
    clip-path: polygon(50% 0, 76% 38%, 100% 46%, 78% 62%, 82% 100%, 50% 78%, 18% 100%, 22% 62%, 0 46%, 24% 38%);
}

/* Auth pages: decorative, non-functional */
.brand-panel .product-preview-card::after,
.goal-card::after,
.next-card::after,
.p-card::after {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    opacity: .16;
    pointer-events: none;
    background: linear-gradient(135deg, var(--h2o-ill-emerald), var(--h2o-ill-blue));
}
.brand-panel .product-preview-card,
.goal-card,
.next-card,
.p-card { position: relative; overflow: hidden; }

@media (max-width: 768px) {
    .prod-card::after,
    .premium-card::after,
    .map-card::after,
    .roadmap-card::after,
    .faq-item::after,
    .value-card::after,
    .honest-tag::after {
        opacity: .1;
        transform: scale(.82);
    }
    .mockup-container::after,
    .complex-ui::before,
    .fb-visual::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .featured-card::after,
    .prod-card::after,
    .map-card::after,
    .premium-card::after,
    .roadmap-card::after,
    .faq-item::after,
    .value-card::after,
    .journey-step::after,
    .architecture-card::after,
    .honest-tag::after,
    .card::after {
        transition: none;
    }
}


/* Password and account form pages */
.form-container,
main.card {
    position: relative;
    overflow: hidden;
}
.form-container::after,
main.card::after {
    content: '';
    position: absolute;
    right: -44px;
    top: -42px;
    width: 126px;
    height: 126px;
    border-radius: 34px;
    pointer-events: none;
    opacity: .08;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 35%, var(--h2o-ill-emerald) 0 13px, transparent 14px),
        linear-gradient(135deg, var(--h2o-ill-emerald), var(--h2o-ill-blue));
    clip-path: polygon(50% 0, 92% 16%, 84% 72%, 50% 100%, 16% 72%, 8% 16%);
}
.form-container > *,
main.card > * {
    position: relative;
    z-index: 1;
}