@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
            --frly-p: #5b4df5;
            --frly-p2: #8b5cf6;
            --frly-b: #2563eb;
            --frly-c: #06b6d4;
            --frly-h: #101828;
            --frly-t: #344054;
            --frly-m: #667085;
            --frly-border: rgba(72, 83, 140, .08);
            --frly-shadow: 0 24px 64px rgba(45, 57, 115, .08)
        }
.frly-page,
        .frly-page * {
            box-sizing: border-box
        }

        .frly-page {
            width: 100%;
            overflow: hidden;
            background: #fff;
            color: var(--frly-t);
            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif
        }

        .frly-container {
            width: min(100% - 48px, 1320px);
            margin-inline: auto;
            position: relative;
            z-index: 2
        }

        .frly-heading {
            max-width: 880px;
            margin: 0 auto clamp(36px, 5vw, 58px);
            text-align: center
        }

        .frly-heading h2 {
            margin: 14px 0 0;
            color: var(--frly-h);
            font-size: clamp(31px, 3.6vw, 46px);
            line-height: 1.13;
            letter-spacing: -1.25px;
            font-weight: 820
        }

        .frly-heading h2 span {
            background: linear-gradient(100deg, #5b4df5, #3478f6 55%, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .frly-heading p {
            max-width: 800px;
            margin: 18px auto 0;
            color: var(--frly-m);
            font-size: 15.8px;
            line-height: 1.78
        }

        .frly-eyebrow,
        .frly-type-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 13px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .84);
            border: 1px solid rgba(91, 77, 245, .10);
            box-shadow: 0 10px 24px rgba(49, 60, 115, .045);
            color: #4f5b70;
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .035em;
            text-transform: uppercase
        }

        .frly-eyebrow i,
        .frly-type-eyebrow i {
            width: 23px;
            height: 23px;
            display: grid;
            place-items: center;
            border-radius: 8px;
            background: linear-gradient(135deg, #efedff, #eaf5ff);
            color: var(--frly-p)
        }

        .frly-reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .65s ease, transform .65s ease
        }

        .frly-reveal.frly-visible {
            opacity: 1;
            transform: none
        }

        .frly-hero {
            position: relative;
            overflow: hidden;
            padding: clamp(64px, 7vw, 92px) 0 clamp(86px, 8vw, 118px);
            background: radial-gradient(circle at 5% 4%, rgba(139, 92, 246, .17), transparent 27%), radial-gradient(circle at 95% 15%, rgba(6, 182, 212, .15), transparent 27%), radial-gradient(circle at 72% 90%, rgba(37, 99, 235, .12), transparent 32%), linear-gradient(135deg, #fcfdff 0%, #f6f3ff 48%, #f2fbff 100%)
        }

        .frly-hero:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(91, 77, 245, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 77, 245, .04) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent);
            pointer-events: none
        }

        .frly-hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
            gap: clamp(44px, 6vw, 80px);
            align-items: center
        }

        .frly-hero-copy h1 {
            margin: 0;
            max-width: 720px;
            color: var(--frly-h);
            font-size: clamp(38px, 4vw, 50px);
            line-height: 1.09;
            letter-spacing: -1.8px;
            font-weight: 820
        }

        .frly-hero-copy h1 span {
            background: linear-gradient(100deg, #5b4df5, #3267e8 55%, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .frly-hero-copy h2 {
            margin: 24px 0 0;
            max-width: 690px;
            color: #26344d;
            font-size: clamp(19px, 1.7vw, 23px);
            line-height: 1.45;
            letter-spacing: -.35px;
            font-weight: 700
        }

        .frly-hero-lead {
            position: relative;
            max-width: 700px;
            margin-top: 28px;
            padding: 3px 0 3px 21px;
            color: var(--frly-m);
            font-size: 16.5px;
            line-height: 1.8
        }

        .frly-hero-lead:before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 4px;
            border-radius: 20px;
            background: linear-gradient(180deg, var(--frly-p2), var(--frly-b), var(--frly-c))
        }

        .frly-hero-art {
            position: relative;
            min-height: 505px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .frly-hero-glow {
            position: absolute;
            width: 92%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(91, 77, 245, .20), rgba(6, 182, 212, .09) 50%, transparent 73%);
            filter: blur(12px)
        }

        .frly-shipping-panel {
            position: relative;
            z-index: 4;
            width: min(100%, 480px);
            padding: 24px;
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, .92);
            background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
            box-shadow: 0 35px 85px rgba(43, 54, 112, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
            backdrop-filter: blur(22px)
        }

        .frly-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 6px
        }

        .frly-dots {
            display: flex;
            gap: 7px
        }

        .frly-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%
        }

        .frly-dots span:nth-child(1) {
            background: #8b5cf6
        }

        .frly-dots span:nth-child(2) {
            background: #3b82f6
        }

        .frly-dots span:nth-child(3) {
            background: #06b6d4
        }

        .frly-connected {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #667085;
            font-size: 11px;
            font-weight: 750
        }

        .frly-connected span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 5px rgba(34, 197, 94, .1)
        }

        .frly-hero-orbit {
            position: relative;
            height: 258px;
            display: grid;
            place-items: center
        }

        .frly-ring {
            position: absolute;
            border-radius: 50%;
            background: conic-gradient(from 0deg, rgba(91, 77, 245, .08), rgba(91, 77, 245, .52), rgba(6, 182, 212, .14), rgba(6, 182, 212, .48), rgba(91, 77, 245, .08));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0)
        }

        .frly-ring-one {
            width: 250px;
            height: 250px;
            animation: frlySpin 22s linear infinite
        }

        .frly-ring-two {
            width: 190px;
            height: 190px;
            animation: frlySpinReverse 16s linear infinite;
            background: conic-gradient(from 100deg, rgba(6, 182, 212, .10), rgba(6, 182, 212, .60), rgba(59, 130, 246, .12), rgba(91, 77, 245, .48), rgba(6, 182, 212, .10))
        }

        .frly-ring-three {
            width: 140px;
            height: 140px;
            animation: frlySpin 12s linear infinite;
            opacity: .75
        }

        .frly-hero-center {
            position: relative;
            z-index: 4;
            width: 132px;
            height: 132px;
            padding: 16px;
            border-radius: 38px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .94));
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 28px 58px rgba(63, 74, 190, .18)
        }

        .frly-hero-center:before {
            content: "";
            position: absolute;
            inset: -12px;
            border: 1px solid rgba(91, 77, 245, .15);
            border-radius: 48px;
            z-index: -1
        }

        .frly-hero-center img {
            max-width: 80px;
            max-height: 45px;
            object-fit: contain
        }

        .frly-hero-center small {
            color: #5b4df5;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase
        }

        .frly-panel-features {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 9px
        }

        .frly-panel-features div {
            min-height: 78px;
            border-radius: 17px;
            background: rgba(255, 255, 255, .78);
            border: 1px solid rgba(78, 88, 140, .07);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #667085;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em
        }

        .frly-panel-features i {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #efedff;
            color: #5b4df5;
            font-size: 16px
        }

        .frly-panel-features div:nth-child(2) i {
            background: #eaf3ff;
            color: #2563eb
        }

        .frly-panel-features div:nth-child(3) i {
            background: #e7fbfd;
            color: #0891b2
        }

        .frly-float-card {
            position: absolute;
            z-index: 6;
            width: 62px;
            height: 62px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 16px 34px rgba(45, 55, 100, .13);
            font-size: 26px;
            animation: frlyFloat 5s ease-in-out infinite
        }

        .frly-float-a {
            top: 72px;
            left: 0;
            color: #5b4df5
        }

        .frly-float-b {
            top: 182px;
            right: 0;
            color: #0891b2;
            animation-delay: -1.3s
        }

        .frly-float-c {
            bottom: 60px;
            left: 6px;
            color: #2563eb;
            animation-delay: -2.4s
        }

        .frly-intro {
            padding: 76px 0 clamp(68px, 8vw, 105px);
            background: linear-gradient(5deg, #f1f1f1, #fff)
        }

        .frly-intro-card {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 68px minmax(0, 1fr);
            gap: 28px;
            padding: clamp(30px, 4vw, 46px);
            border-radius: 30px;
            border: 1px solid var(--frly-border);
            background: linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(246, 248, 255, .95));
            box-shadow: 0 25px 70px rgba(44, 56, 110, .075)
        }

        .frly-intro-card:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: linear-gradient(90deg, #8b5cf6, #2563eb, #06b6d4)
        }

        .frly-intro-icon {
            width: 62px;
            height: 62px;
            border-radius: 19px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #6d5cf5, #3267e8, #159ec5);
            box-shadow: 0 16px 32px rgba(67, 75, 190, .23);
            font-size: 27px
        }

        .frly-intro-copy {
            display: grid;
            gap: 17px
        }

        .frly-intro-copy p {
            margin: 0;
            color: var(--frly-m);
            font-size: 16px;
            line-height: 1.8
        }

        .frly-intro-highlight {
            padding: 17px 19px;
            border-radius: 16px;
            color: #344054 !important;
            border: 1px solid rgba(91, 77, 245, .08);
            background: linear-gradient(100deg, rgba(91, 77, 245, .055), rgba(6, 182, 212, .045))
        }

        .frly-carriers {
            position: relative;
            padding: clamp(82px, 8vw, 112px) 0;
            background: radial-gradient(circle at 5% 10%, rgba(139, 92, 246, .12), transparent 26%), radial-gradient(circle at 95% 16%, rgba(6, 182, 212, .11), transparent 25%), linear-gradient(180deg, #fff, #fafbff 52%, #f6f9ff)
        }

        .frly-carriers:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(83, 70, 200, .06) 1.2px, transparent 1.2px);
            background-size: 30px 30px;
            mask-image: linear-gradient(180deg, transparent, #000 18%, rgba(0, 0, 0, .45) 72%, transparent);
            pointer-events: none
        }

        .frly-logo-shell {
            position: relative;
            margin-bottom: 34px;
            padding: clamp(24px, 3vw, 34px);
            border-radius: 30px;
            border: 1px solid rgba(91, 77, 245, .10);
            background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 249, 255, .95));
            box-shadow: 0 25px 70px rgba(47, 58, 118, .08), inset 0 1px 0 rgba(255, 255, 255, .8)
        }

        .frly-logo-shell-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 21px
        }

        .frly-logo-shell-head p {
            margin: 0;
            color: #4d5870;
            font-size: 14px;
            line-height: 1.6;
            font-weight: 650
        }

        .frly-logo-shell-head>span {
            padding: 7px 12px;
            border-radius: 999px;
            color: #5b4df5;
            background: #f0edff;
            font-size: 11px;
            font-weight: 800
        }

        .frly-logo-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 10px
        }

        .frly-logo-card,
        .frly-logo-more {
            height: 92px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .frly-logo-card {
            position: relative;
            padding: 14px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, .93));
            border: 1px solid rgba(91, 77, 245, .11);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
            transition: .25s ease
        }

        .frly-logo-card:before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(91, 77, 245, .04), transparent 36%, rgba(6, 182, 212, .03));
            pointer-events: none
        }

        .frly-logo-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 34px rgba(47, 58, 110, .10)
        }

        .frly-logo-card img {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 115px;
            max-height: 50px;
            object-fit: contain
        }

        .frly-logo-card.frly-ups img {
            max-width: 50px;
            max-height: 57px
        }

        .frly-logo-more {
            gap: 9px;
            color: #fff;
            background: linear-gradient(135deg, #6855ec, #3478f6 55%, #0aa8c5);
            box-shadow: 0 14px 30px rgba(69, 76, 190, .22);
            font-size: 13px;
            font-weight: 800;
            cursor: default
        }

        .frly-logo-more i {
            width: 29px;
            height: 29px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .17)
        }

        .frly-carrier-details {
            display: grid;
            grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
            gap: 28px;
            padding: clamp(28px, 4vw, 44px);
            border-radius: 30px;
            border: 1px solid var(--frly-border);
            background: linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 249, 255, .95));
            box-shadow: 0 25px 65px rgba(47, 58, 118, .075)
        }

        .frly-summary-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 20px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #6d5cf5, #3478f6 58%, #08a8c7);
            box-shadow: 0 16px 32px rgba(68, 75, 194, .22);
            font-size: 25px
        }

        .frly-carrier-summary p {
            margin: 0;
            color: var(--frly-m);
            font-size: 15px;
            line-height: 1.72
        }

        .frly-carrier-summary strong {
            display: block;
            margin-top: 20px;
            color: #303b50;
            font-size: 13px;
            line-height: 1.6
        }

        .frly-carrier-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px
        }

        .frly-carrier-list div {
            padding: 17px;
            border-radius: 16px;
            border: 1px solid rgba(73, 84, 137, .06);
            background: rgba(255, 255, 255, .8)
        }

        .frly-carrier-list b {
            display: block;
            color: #101828;
            font-size: 14px
        }

        .frly-carrier-list span {
            display: block;
            margin-top: 8px;
            color: var(--frly-m);
            font-size: 12.4px;
            line-height: 1.58
        }

        .frly-notice {
            margin-top: 20px;
            padding: 18px 21px;
            border-radius: 17px;
            color: #59657b;
            font-size: 13.5px;
            line-height: 1.7;
            background: linear-gradient(100deg, rgba(91, 77, 245, .055), rgba(37, 99, 235, .04), rgba(6, 182, 212, .045));
            border: 1px solid rgba(91, 77, 245, .07)
        }

        .frly-account {
            position: relative;
            padding: clamp(84px, 8vw, 114px) 0;
            background: radial-gradient(circle at 0% 20%, rgba(139, 92, 246, .15), transparent 28%), radial-gradient(circle at 100% 75%, rgba(6, 182, 212, .13), transparent 25%), linear-gradient(135deg, #f7f4ff, #eff6ff 48%, #eefbfd)
        }

        .frly-account-grid {
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            gap: clamp(42px, 6vw, 76px);
            align-items: center
        }

        .frly-account-copy h2 {
            margin: 16px 0 0;
            max-width: 570px;
            font-size: clamp(31px, 3.6vw, 44px);
            line-height: 1.14;
            letter-spacing: -1.2px;
            font-weight: 820;
            background: linear-gradient(100deg, #4f46e5, #2563eb 55%, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .frly-account-copy>p {
            margin: 18px 0 0;
            max-width: 590px;
            color: var(--frly-m);
            font-size: 15.5px;
            line-height: 1.78
        }

        .frly-account-visual {
            position: relative;
            width: 100%;
            max-width: 450px;
            height: 205px;
            margin-top: 28px;
            display: grid;
            place-items: center
        }

        .frly-account-path {
            position: absolute;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, rgba(91, 77, 245, .08), rgba(91, 77, 245, .42), rgba(6, 182, 212, .25), transparent);
            transform-origin: left center
        }

        .frly-account-path.p1 {
            width: 145px;
            left: 54%;
            top: 43%;
            transform: rotate(-28deg)
        }

        .frly-account-path.p2 {
            width: 150px;
            left: 20%;
            top: 55%;
            transform: rotate(8deg)
        }

        .frly-account-path.p3 {
            width: 132px;
            left: 53%;
            top: 60%;
            transform: rotate(28deg)
        }

        .frly-account-core {
            position: relative;
            z-index: 3;
            width: 104px;
            height: 104px;
            border-radius: 31px;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 248, 255, .92));
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 22px 44px rgba(65, 76, 195, .16)
        }

        .frly-account-core img {
            max-width: 68px;
            max-height: 40px;
            object-fit: contain
        }

        .frly-account-node {
            position: absolute;
            z-index: 4;
            width: 48px;
            height: 48px;
            border-radius: 15px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 12px 28px rgba(54, 65, 120, .10);
            font-size: 19px
        }

        .frly-account-node.n1 {
            left: 8%;
            top: 25%;
            color: #5b4df5
        }

        .frly-account-node.n2 {
            right: 8%;
            top: 14%;
            color: #2563eb
        }

        .frly-account-node.n3 {
            right: 12%;
            bottom: 12%;
            color: #0891b2
        }

        .frly-account-benefits {
            padding: clamp(28px, 4vw, 42px);
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, .9);
            background: rgba(255, 255, 255, .75);
            box-shadow: 0 28px 70px rgba(49, 60, 115, .08);
            backdrop-filter: blur(16px)
        }

        .frly-account-benefits h3 {
            margin: 0 0 18px;
            color: #101828;
            font-size: 15px
        }

        .frly-check-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px
        }

        .frly-check-grid div {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 14px;
            border-radius: 15px;
            border: 1px solid rgba(72, 83, 135, .055);
            background: rgba(255, 255, 255, .72);
            color: #526076;
            font-size: 12.8px;
            line-height: 1.52;
            font-weight: 550
        }

        .frly-check-grid i {
            width: 27px;
            height: 27px;
            flex: 0 0 auto;
            border-radius: 9px;
            display: grid;
            place-items: center;
            color: #5b4df5;
            background: linear-gradient(135deg, #f0edff, #eaf5ff);
            font-size: 12px
        }

        .frly-account-benefits>p {
            margin: 20px 0 0;
            padding-top: 19px;
            border-top: 1px solid rgba(72, 83, 130, .08);
            color: var(--frly-m);
            font-size: 13.5px;
            line-height: 1.68
        }

        .frly-odoo {
            position: relative;
            padding: clamp(88px, 9vw, 120px) 0;
            background: radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .10), transparent 27%), radial-gradient(circle at 94% 16%, rgba(6, 182, 212, .10), transparent 25%), linear-gradient(180deg, #fff, #f9fbff)
        }

        .frly-odoo-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 17px;
            max-width: 1160px;
            margin: auto
        }

        .frly-odoo-card {
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid var(--frly-border);
            background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 250, 255, .95));
            box-shadow: 0 18px 48px rgba(45, 57, 115, .06)
        }

        .frly-odoo-toggle {
            width: 100%;
            padding: 24px;
            border: 0;
            background: transparent;
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) 28px;
            align-items: center;
            gap: 13px;
            text-align: left;
            color: #101828;
            font: inherit;
            font-size: 19px;
            font-weight: 780
        }

        .frly-step-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #f0edff, #eaf5ff);
            color: #5b4df5;
            font-size: 22px
        }

        .frly-odoo-toggle>i {
            display: none;
            color: #5b4df5
        }

        .frly-odoo-body {
            padding: 0 24px 24px
        }

        .frly-odoo-body p {
            margin: 0;
            color: var(--frly-m);
            font-size: 13.7px;
            line-height: 1.68
        }

        .frly-odoo-body p+p {
            margin-top: 10px
        }

        .frly-data-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px 12px;
            margin: 16px 0;
            padding: 16px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 77, 245, .045), rgba(37, 99, 235, .03), rgba(6, 182, 212, .035));
            border: 1px solid rgba(91, 77, 245, .055)
        }

        .frly-data-grid span {
            position: relative;
            padding-left: 13px;
            color: #5d687e;
            font-size: 11.8px;
            line-height: 1.45
        }

        .frly-data-grid span:before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, #735cf3, #12aacb)
        }

        .frly-shipping-types {
            position: relative;
            padding: clamp(86px, 8vw, 116px) 0;
            background: radial-gradient(circle at 5% 6%, rgba(139, 92, 246, .11), transparent 27%), radial-gradient(circle at 95% 18%, rgba(6, 182, 212, .11), transparent 25%), linear-gradient(180deg, #fff, #f8faff)
        }

        .frly-type-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px
        }

        .frly-type-card {
            overflow: hidden;
            border: 1px solid var(--frly-border);
            border-radius: 30px;
            background: linear-gradient(145deg, #fff, #f7f9ff);
            box-shadow: 0 22px 58px rgba(45, 57, 115, .065)
        }

        .frly-type-top {
            position: relative;
            min-height: 215px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
            overflow: hidden
        }

        .frly-parcel-top {
            background: linear-gradient(135deg, #6a56ea, #3478f6 60%, #08a8c7)
        }

        .frly-ltl-top {
            background: linear-gradient(135deg, #2563eb, #0b7ca7 55%, #06b6d4)
        }

        .frly-type-top:before,
        .frly-type-top:after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .18)
        }

        .frly-type-top:before {
            width: 260px;
            height: 260px;
            right: -70px;
            top: -130px
        }

        .frly-type-top:after {
            width: 140px;
            height: 140px;
            right: 52px;
            top: -42px
        }

        .frly-type-eyebrow {
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .18);
            color: #fff;
            box-shadow: none
        }

        .frly-type-eyebrow i {
            background: rgba(255, 255, 255, .14);
            color: #fff
        }

        .frly-type-float {
            position: absolute;
            right: 26px;
            top: 26px;
            width: 90px;
            height: 90px;
            border-radius: 28px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .20);
            backdrop-filter: blur(10px);
            color: #fff;
            font-size: 40px;
            animation: frlyFloat 5.2s ease-in-out infinite
        }

        .frly-type-top h2 {
            position: relative;
            z-index: 2;
            margin: 18px 0 0;
            max-width: 380px;
            color: #fff;
            font-size: clamp(25px, 2.5vw, 32px);
            line-height: 1.15;
            letter-spacing: -.7px;
            font-weight: 800
        }

        .frly-type-top>p {
            position: relative;
            z-index: 2;
            margin: 10px 0 0;
            max-width: 430px;
            color: rgba(255, 255, 255, .82);
            font-size: 14px;
            line-height: 1.65
        }

        .frly-type-body {
            padding: 28px
        }

        .frly-type-body>p {
            margin: 0;
            color: var(--frly-m);
            font-size: 14.5px;
            line-height: 1.72
        }

        .frly-type-body>p+p {
            margin-top: 14px
        }

        .frly-type-body h3 {
            margin: 21px 0 12px;
            color: #303b50;
            font-size: 13px
        }

        .frly-use-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px
        }

        .frly-use-grid span {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 10px 11px;
            border-radius: 12px;
            color: #566277;
            background: linear-gradient(135deg, rgba(91, 77, 245, .05), rgba(37, 99, 235, .035));
            font-size: 12.4px;
            line-height: 1.45
        }

        .frly-use-grid i {
            width: 18px;
            flex: 0 0 auto;
            margin-top: 2px;
            color: #6e5cf2
        }

        .frly-soft-note {
            margin-top: 18px !important;
            padding: 15px 16px;
            border-radius: 15px;
            color: #475469 !important;
            background: linear-gradient(100deg, rgba(91, 77, 245, .06), rgba(37, 99, 235, .045), rgba(6, 182, 212, .05));
            border: 1px solid rgba(91, 77, 245, .065)
        }

        .frly-accessorial {
            position: relative;
            padding: clamp(92px, 8vw, 122px) 0;
            background: radial-gradient(circle at 3% 15%, rgba(139, 92, 246, .18), transparent 30%), radial-gradient(circle at 98% 82%, rgba(6, 182, 212, .15), transparent 29%), linear-gradient(135deg, #f6f3ff, #eef6ff 50%, #edfbfd)
        }

        .frly-access-grid {
            display: grid;
            grid-template-columns: minmax(0, .74fr) minmax(510px, 1.26fr);
            gap: 48px;
            align-items: center
        }

        .frly-access-copy h2 {
            margin: 16px 0 0;
            font-size: clamp(30px, 3.3vw, 43px);
            line-height: 1.15;
            letter-spacing: -1.1px;
            font-weight: 800;
            background: linear-gradient(100deg, #4f46e5, #2563eb 55%, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .frly-access-copy h3 {
            margin: 14px 0 0;
            color: #435068;
            font-size: 16px;
            line-height: 1.65;
            font-weight: 650
        }

        .frly-access-copy p {
            margin: 18px 0 0;
            color: var(--frly-m);
            font-size: 15px;
            line-height: 1.76
        }

        .frly-access-note {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid rgba(75, 84, 135, .09);
            color: var(--frly-m);
            font-size: 13px;
            line-height: 1.65
        }

        .frly-access-art {
            position: relative;
            min-height: 570px
        }

        .frly-access-orbit-wrap {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center
        }

        .frly-access-glow {
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(91, 77, 245, .15), rgba(37, 99, 235, .08) 43%, rgba(6, 182, 212, .05) 62%, transparent 72%);
            filter: blur(8px)
        }

        .frly-access-ring {
            position: absolute;
            border-radius: 50%;
            background: conic-gradient(from 0deg, rgba(91, 77, 245, .10), rgba(91, 77, 245, .55), rgba(6, 182, 212, .18), rgba(6, 182, 212, .55), rgba(91, 77, 245, .10));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0)
        }

        .frly-access-ring.ar1 {
            width: 520px;
            height: 520px;
            animation: frlySpin 24s linear infinite
        }

        .frly-access-ring.ar2 {
            width: 390px;
            height: 390px;
            animation: frlySpinReverse 18s linear infinite;
            background: conic-gradient(from 120deg, rgba(6, 182, 212, .08), rgba(6, 182, 212, .65), rgba(59, 130, 246, .16), rgba(91, 77, 245, .50), rgba(6, 182, 212, .08))
        }

        .frly-access-ring.ar3 {
            width: 280px;
            height: 280px;
            animation: frlySpin 12s linear infinite;
            opacity: .85
        }

        .frly-access-core {
            position: relative;
            z-index: 4;
            width: 138px;
            height: 138px;
            border-radius: 40px;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(245, 248, 255, .93));
            border: 1px solid rgba(255, 255, 255, .96);
            box-shadow: 0 28px 58px rgba(63, 74, 190, .18)
        }

        .frly-access-core:before {
            content: "";
            position: absolute;
            inset: -13px;
            border-radius: 49px;
            border: 1px solid rgba(91, 77, 245, .15);
            z-index: -1
        }

        .frly-access-core img {
            max-width: 84px;
            max-height: 50px;
            object-fit: contain
        }

        .frly-access-point {
            position: absolute;
            z-index: 3;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #fff;
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 12px 30px rgba(49, 60, 115, .08);
            color: #5b4df5
        }

        .frly-access-point.ap1 {
            transform: translate(170px, -176px)
        }

        .frly-access-point.ap2 {
            transform: translate(-185px, 94px);
            color: #0891b2
        }

        .frly-access-point.ap3 {
            transform: translate(116px, 130px);
            color: #2563eb
        }

        .frly-access-tags {
            position: absolute;
            inset: 0;
            z-index: 5
        }

        .frly-access-tags span {
            position: absolute;
            padding: 11px 14px;
            border-radius: 14px;
            color: #4f5b70;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 14px 32px rgba(49, 60, 115, .08);
            backdrop-filter: blur(12px);
            font-size: 11.8px;
            font-weight: 650;
            white-space: nowrap
        }

        .frly-access-tags span:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            display: inline-grid;
            place-items: center;
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 7px;
            color: #5b4df5;
            background: #efedff;
            font-size: 9px
        }

        .frly-access-tags span:nth-child(1) {
            left: 0;
            top: 7%
        }

        .frly-access-tags span:nth-child(2) {
            right: 2%;
            top: 5%
        }

        .frly-access-tags span:nth-child(3) {
            left: 3%;
            top: 28%
        }

        .frly-access-tags span:nth-child(4) {
            right: 0;
            top: 27%
        }

        .frly-access-tags span:nth-child(5) {
            left: 0;
            top: 51%
        }

        .frly-access-tags span:nth-child(6) {
            right: 2%;
            top: 50%
        }

        .frly-access-tags span:nth-child(7) {
            left: 3%;
            bottom: 22%
        }

        .frly-access-tags span:nth-child(8) {
            right: 0;
            bottom: 23%
        }

        .frly-access-tags span:nth-child(9) {
            left: 1%;
            bottom: 3%
        }

        .frly-access-tags span:nth-child(10) {
            left: 40%;
            bottom: -1%
        }

        .frly-access-tags span:nth-child(11) {
            right: 0;
            bottom: 4%
        }

        .frly-industries {
            position: relative;
            padding: clamp(96px, 9vw, 132px) 0;
            background: radial-gradient(circle at 4% 10%, rgba(139, 92, 246, .13), transparent 27%), radial-gradient(circle at 96% 84%, rgba(6, 182, 212, .12), transparent 27%), linear-gradient(180deg, #fff, #f8faff)
        }

        .frly-industries:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(91, 77, 245, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 77, 245, .026) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, transparent, #000 20%, transparent);
            pointer-events: none
        }

        .frly-industry-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
            gap: 20px;
            align-items: center
        }

        .frly-industry-main,
        .frly-industry-side {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--frly-border);
            border-radius: 30px;
            box-shadow: 0 22px 58px rgba(45, 57, 115, .065)
        }

        .frly-industry-main {
            padding: 36px;
            min-height: 470px;
            background: radial-gradient(circle at 85% 10%, rgba(139, 92, 246, .15), transparent 30%), radial-gradient(circle at 8% 92%, rgba(6, 182, 212, .10), transparent 32%), linear-gradient(145deg, #fbfaff, #f4f7ff 52%, #f2fbfd)
        }

        .frly-industry-main:before {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            right: -120px;
            top: -130px;
            border-radius: 50%;
            border: 48px solid rgba(91, 77, 245, .045)
        }

        .frly-industry-label {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid rgba(91, 77, 245, .10);
            color: #4f5b70;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase
        }

        .frly-industry-label i {
            color: #5b4df5
        }

        .frly-industry-main-icon,
        .frly-side-icon {
            position: relative;
            z-index: 2;
            width: 62px;
            height: 62px;
            margin: 24px 0 22px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #efedff, #eaf5ff);
            border: 1px solid rgba(91, 77, 245, .08);
            box-shadow: 0 15px 30px rgba(69, 76, 190, .08);
            color: #5b4df5;
            font-size: 28px
        }

        .frly-industry-main h3 {
            position: relative;
            z-index: 2;
            margin: 0;
            color: #101828;
            font-size: clamp(28px, 3vw, 38px);
            line-height: 1.17;
            letter-spacing: -.8px;
            font-weight: 790
        }

        .frly-industry-main p {
            position: relative;
            z-index: 2;
            margin: 16px 0 0;
            color: #667085;
            font-size: 14px;
            line-height: 1.76
        }

        .frly-industry-art {
            position: relative;
            min-height: 520px;
            display: grid;
            place-items: center
        }

        .frly-diamond {
            position: absolute;
            border-radius: 38px;
            background: linear-gradient(135deg, rgba(91, 77, 245, .12), rgba(6, 182, 212, .08));
            border: 1px solid rgba(91, 77, 245, .12);
            transform: rotate(45deg)
        }

        .frly-diamond.d1 {
            width: 160px;
            height: 160px
        }

        .frly-diamond.d2 {
            width: 200px;
            height: 200px;
            opacity: .55;
            animation: frlyDiamond 10s ease-in-out infinite
        }

        .frly-diamond.d3 {
            width: 252px;
            height: 252px;
            opacity: .27;
            animation: frlyDiamond 14s ease-in-out infinite reverse
        }

        .frly-industry-core {
            position: relative;
            z-index: 4;
            width: 132px;
            height: 132px;
            border-radius: 34px;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, #735af1, #3478f6 58%, #09abc9);
            box-shadow: 0 28px 58px rgba(67, 77, 195, .24)
        }

        .frly-industry-core:before {
            content: "";
            position: absolute;
            inset: 16px;
            border-radius: 25px;
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(255, 255, 255, .2)
        }

        .frly-industry-core img {
            position: relative;
            z-index: 2;
            max-width: 76px;
            max-height: 44px;
            object-fit: contain
        }

        .frly-line {
            position: absolute;
            background: linear-gradient(90deg, transparent, rgba(91, 77, 245, .18), rgba(6, 182, 212, .18), transparent)
        }

        .frly-line.il1,
        .frly-line.il2 {
            width: 100px;
            height: 2px
        }

        .frly-line.il3,
        .frly-line.il4 {
            width: 2px;
            height: 100px;
            background: linear-gradient(180deg, transparent, rgba(91, 77, 245, .18), rgba(6, 182, 212, .18), transparent)
        }

        .frly-line.il1 {
            left: 0;
            top: 50%
        }

        .frly-line.il2 {
            right: 0;
            top: 50%
        }

        .frly-line.il3 {
            top: 0;
            left: 50%
        }

        .frly-line.il4 {
            bottom: 0;
            left: 50%
        }

        .frly-industry-float {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .88);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 14px 28px rgba(49, 60, 115, .08);
            color: #5b4df5;
            font-size: 22px
        }

        .frly-industry-float.if1 {
            top: 40px;
            left: 50%;
            transform: translateX(-50%)
        }

        .frly-industry-float.if2 {
            right: 26px;
            top: 50%;
            transform: translateY(-50%);
            color: #0891b2
        }

        .frly-industry-float.if3 {
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            color: #2563eb
        }

        .frly-industry-float.if4 {
            left: 26px;
            top: 50%;
            transform: translateY(-50%);
            color: #7c5cf3
        }

        .frly-industry-side-stack {
            display: grid;
            gap: 20px
        }

        .frly-industry-side {
            padding: 29px;
            background: radial-gradient(circle at 90% 10%, rgba(91, 77, 245, .08), transparent 32%), linear-gradient(145deg, #fff, #f7f9ff)
        }

        .frly-industry-side:last-child {
            background: radial-gradient(circle at 90% 10%, rgba(6, 182, 212, .09), transparent 32%), linear-gradient(145deg, #fff, #f3fbfd)
        }

        .frly-side-icon {
            width: 52px;
            height: 52px;
            margin: 0 0 18px;
            border-radius: 16px;
            font-size: 22px
        }

        .frly-industry-side:last-child .frly-side-icon {
            color: #0891b2
        }

        .frly-industry-side h3 {
            margin: 0;
            color: #101828;
            font-size: 20px;
            line-height: 1.3;
            font-weight: 780
        }

        .frly-industry-side p {
            margin: 12px 0 0;
            color: #667085;
            font-size: 13.4px;
            line-height: 1.68
        }

        .frly-benefits {
            position: relative;
            padding: clamp(96px, 9vw, 132px) 0;
            background: radial-gradient(circle at 4% 5%, rgba(139, 92, 246, .20), transparent 28%), radial-gradient(circle at 96% 95%, rgba(6, 182, 212, .16), transparent 27%), linear-gradient(135deg, #f6f2ff, #eef6ff 50%, #edfbfd)
        }

        .frly-benefits:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(91, 77, 245, .07) 1.1px, transparent 1.1px);
            background-size: 29px 29px;
            mask-image: linear-gradient(to bottom, #000, transparent 92%);
            pointer-events: none
        }

        .frly-benefit-stage {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr);
            gap: 24px;
            align-items: center
        }

        .frly-benefit-column {
            display: grid;
            gap: 12px
        }

        .frly-benefit-card {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 14px;
            align-items: start;
            padding: 19px;
            border: 1px solid rgba(255, 255, 255, .9);
            border-radius: 19px;
            background: rgba(255, 255, 255, .78);
            box-shadow: 0 15px 38px rgba(49, 60, 115, .055);
            backdrop-filter: blur(14px);
            transition: .25s ease
        }

        .frly-benefit-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 23px 50px rgba(49, 60, 115, .10)
        }

        .frly-benefit-icon {
            width: 48px;
            height: 48px;
            border-radius: 15px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #efedff, #eaf5ff);
            color: #5b4df5;
            font-size: 21px
        }

        .frly-benefit-column:last-child .frly-benefit-icon {
            color: #0891b2;
            background: linear-gradient(135deg, #e9faff, #edf7ff)
        }

        .frly-benefit-card h3 {
            margin: 1px 0 0;
            color: #101828;
            font-size: 15px;
            line-height: 1.35;
            font-weight: 760
        }

        .frly-benefit-card p {
            margin: 7px 0 0;
            color: #667085;
            font-size: 12.3px;
            line-height: 1.58
        }

        .frly-benefit-core {
            position: relative;
            min-height: 540px;
            display: grid;
            place-items: center
        }

        .frly-benefit-board-shadow {
            position: absolute;
            width: 210px;
            height: 270px;
            border-radius: 34px;
            background: linear-gradient(145deg, rgba(91, 77, 245, .10), rgba(6, 182, 212, .08));
            border: 1px solid rgba(91, 77, 245, .10)
        }

        .frly-benefit-board-shadow.s1 {
            transform: rotate(-8deg) translate(-20px, 12px);
            opacity: .55
        }

        .frly-benefit-board-shadow.s2 {
            transform: rotate(7deg) translate(24px, -10px);
            opacity: .34
        }

        .frly-benefit-board {
            position: relative;
            z-index: 3;
            width: 210px;
            animation: frlyBoardFloat 6s ease-in-out infinite;
            min-height: 288px;
            padding: 18px;
            border-radius: 34px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(245, 248, 255, .94));
            border: 1px solid rgba(255, 255, 255, .96);
            box-shadow: 0 28px 58px rgba(63, 74, 190, .18);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center
        }

        .frly-benefit-board-top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #667085;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase
        }

        .frly-benefit-board-top span {
            display: flex;
            align-items: center;
            gap: 6px
        }

        .frly-benefit-board-top span i {
            color: #5b4df5
        }

        .frly-benefit-logo {
            width: 78px;
            height: 78px;
            margin: 28px 0 16px;
            border-radius: 24px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #7458ef, #3478f6 57%, #0aa7c5);
            box-shadow: 0 16px 34px rgba(67, 77, 195, .22)
        }

        .frly-benefit-logo img {
            max-width: 50px;
            max-height: 30px;
            object-fit: contain;
            filter: brightness(0) invert(1)
        }

        .frly-benefit-board strong {
            color: #1e293b;
            font-size: 18px;
            line-height: 1.3
        }

        .frly-benefit-mini-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 7px;
            width: 100%;
            margin-top: 22px
        }

        .frly-benefit-mini-grid span {
            height: 42px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #f3f5ff;
            color: #5b4df5
        }

        .frly-benefit-mini-grid span:nth-child(2) {
            color: #2563eb
        }

        .frly-benefit-mini-grid span:nth-child(3) {
            color: #0891b2
        }

        .frly-benefit-mini-grid span:nth-child(4) {
            color: #7c5cf3
        }

        @keyframes frlySpin {
            from {
                transform: rotate(0)
            }

            to {
                transform: rotate(360deg)
            }
        }

        @keyframes frlySpinReverse {
            from {
                transform: rotate(360deg)
            }

            to {
                transform: rotate(0)
            }
        }

        @keyframes frlyFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        @keyframes frlyDiamond {

            0%,
            100% {
                transform: rotate(45deg) translateY(0)
            }

            50% {
                transform: rotate(49deg) translateY(-8px)
            }
        }

        @keyframes frlyBoardFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-7px)
            }
        }

        @media(max-width:1120px) {
            .frly-logo-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr))
            }

            .frly-access-grid {
                grid-template-columns: minmax(0, .68fr) minmax(470px, 1.32fr);
                gap: 34px
            }

            .frly-industry-grid {
                grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr)
            }

            .frly-benefit-stage {
                grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
                gap: 16px
            }
        }

        @media(max-width:900px) {
            .frly-container {
                width: min(100% - 44px, 1240px)
            }

            .frly-hero-grid {
                grid-template-columns: 1fr;
                gap: 48px
            }

            .frly-hero-copy {
                text-align: center;
                max-width: 760px;
                margin: auto
            }

            .frly-hero-copy h1,
            .frly-hero-copy h2 {
                margin-left: auto;
                margin-right: auto
            }

            .frly-hero-lead {
                text-align: left;
                margin-left: auto;
                margin-right: auto
            }

            .frly-hero-art {
                max-width: 540px;
                width: 100%;
                margin: auto;
                min-height: 465px
            }

            .frly-carrier-details {
                grid-template-columns: 1fr
            }

            .frly-account-grid {
                grid-template-columns: 1fr
            }

            .frly-account-copy {
                max-width: 760px;
                margin: auto
            }

            .frly-account-benefits {
                max-width: 760px;
                margin: auto
            }

            .frly-odoo-grid {
                grid-template-columns: 1fr;
                max-width: 760px
            }

            .frly-type-grid {
                grid-template-columns: 1fr
            }

            .frly-access-grid {
                grid-template-columns: 1fr
            }

            .frly-access-copy {
                max-width: 760px
            }

            .frly-access-art {
                max-width: 720px;
                width: 100%;
                margin: auto
            }

            .frly-industry-grid,
            .frly-benefit-stage {
                grid-template-columns: 1fr
            }

            .frly-industry-side-stack,
            .frly-benefit-column {
                grid-template-columns: repeat(2, minmax(0, 1fr))
            }

            .frly-industry-art {
                min-height: 330px
            }

            .frly-benefit-core {
                order: -1;
                min-height: 360px
            }
        }

        @media(max-width:700px) {
            .frly-container {
                width: min(100% - 32px, 1240px)
            }

            .frly-heading {
                margin-bottom: 32px
            }

            .frly-heading h2 {
                font-size: 28px;
                letter-spacing: -.7px
            }

            .frly-heading p {
                font-size: 15px;
                line-height: 1.68
            }

            .frly-hero {
                padding-top: 50px
            }

            .frly-hero-copy h1 {
                font-size: 34px;
                line-height: 1.1;
                letter-spacing: -1.1px
            }

            .frly-hero-copy h2 {
                font-size: 18px
            }

            .frly-hero-lead {
                font-size: 15px;
                line-height: 1.7
            }

            .frly-hero-art {
                min-height: auto;
                padding: 18px 0
            }

            .frly-shipping-panel {
                padding: 18px;
                border-radius: 25px
            }

            .frly-hero-orbit {
                height: 210px
            }

            .frly-ring-one {
                width: 195px;
                height: 195px
            }

            .frly-ring-two {
                width: 145px;
                height: 145px
            }

            .frly-ring-three {
                width: 105px;
                height: 105px
            }

            .frly-hero-center {
                width: 108px;
                height: 108px;
                border-radius: 30px
            }

            .frly-hero-center img {
                max-width: 64px
            }

            .frly-float-card {
                display: none
            }

            .frly-panel-features div {
                min-height: 72px
            }

            .frly-intro {
                padding: 58px 0
            }

            .frly-intro-card {
                display: block;
                padding: 24px 19px;
                border-radius: 23px
            }

            .frly-intro-icon {
                width: 50px;
                height: 50px;
                margin-bottom: 19px;
                border-radius: 15px
            }

            .frly-intro-copy p {
                font-size: 15px;
                line-height: 1.7
            }

            .frly-logo-shell {
                padding: 19px 15px;
                border-radius: 23px
            }

            .frly-logo-shell-head {
                display: block
            }

            .frly-logo-shell-head>span {
                display: inline-block;
                margin-top: 10px
            }

            .frly-logo-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px
            }

            .frly-logo-card,
            .frly-logo-more {
                height: 76px;
                border-radius: 14px
            }

            .frly-logo-card img {
                max-width: 95px;
                max-height: 42px
            }

            .frly-carrier-list {
                grid-template-columns: 1fr
            }

            .frly-carrier-details {
                padding: 22px 18px;
                border-radius: 23px
            }

            .frly-account-copy h2 {
                font-size: 28px
            }

            .frly-account-visual {
                height: 180px;
                max-width: 330px;
                margin-inline: auto
            }

            .frly-account-core {
                width: 90px;
                height: 90px
            }

            .frly-account-node {
                width: 44px;
                height: 44px
            }

            .frly-check-grid {
                grid-template-columns: 1fr
            }

            .frly-account-benefits {
                padding: 22px 18px;
                border-radius: 23px
            }

            .frly-odoo-toggle {
                cursor: pointer;
                padding: 17px;
                grid-template-columns: 45px minmax(0, 1fr) 28px;
                font-size: 17px
            }

            .frly-step-icon {
                width: 45px;
                height: 45px;
                border-radius: 14px
            }

            .frly-odoo-toggle>i {
                display: block;
                transition: transform .25s ease
            }

            .frly-odoo-body {
                display: none;
                padding: 0 17px 18px
            }

            .frly-odoo-card.frly-open .frly-odoo-body {
                display: block
            }

            .frly-odoo-card.frly-open .frly-odoo-toggle>i {
                transform: rotate(180deg)
            }

            .frly-data-grid {
                grid-template-columns: 1fr
            }

            .frly-type-card {
                border-radius: 24px
            }

            .frly-type-top {
                min-height: 185px;
                padding: 22px
            }

            .frly-type-float {
                width: 74px;
                height: 74px;
                right: 18px;
                top: 18px;
                border-radius: 22px;
                font-size: 32px
            }

            .frly-type-top h2 {
                font-size: 24px;
                max-width: 240px
            }

            .frly-type-top>p {
                font-size: 13px;
                max-width: 280px
            }

            .frly-type-body {
                padding: 21px 18px
            }

            .frly-use-grid {
                grid-template-columns: 1fr
            }

            .frly-access-copy h2 {
                font-size: 28px
            }

            .frly-access-art {
                min-height: 0
            }

            .frly-access-orbit-wrap {
                position: relative;
                inset: auto;
                min-height: 340px
            }

            .frly-access-ring.ar1 {
                width: 310px;
                height: 310px
            }

            .frly-access-ring.ar2 {
                width: 235px;
                height: 235px
            }

            .frly-access-ring.ar3 {
                width: 170px;
                height: 170px
            }

            .frly-access-core {
                width: 108px;
                height: 108px;
                border-radius: 30px
            }

            .frly-access-core img {
                max-width: 64px
            }

            .frly-access-point {
                display: none
            }

            .frly-access-tags {
                position: relative;
                inset: auto;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                margin-top: 10px
            }

            .frly-access-tags span {
                position: static !important;
                white-space: normal;
                font-size: 11px;
                padding: 9px 10px;
                line-height: 1.35
            }

            .frly-access-tags span:before {
                width: 18px;
                height: 18px;
                margin-right: 6px
            }

            .frly-industry-main {
                min-height: auto;
                padding: 25px 20px;
                border-radius: 24px
            }

            .frly-industry-side-stack,
            .frly-benefit-column {
                grid-template-columns: 1fr
            }

            .frly-industry-side {
                padding: 22px 19px;
                border-radius: 21px
            }

            .frly-industry-art {
                min-height: 260px
            }

            .frly-diamond.d1 {
                width: 130px;
                height: 130px
            }

            .frly-diamond.d2 {
                width: 160px;
                height: 160px
            }

            .frly-diamond.d3 {
                width: 200px;
                height: 200px
            }

            .frly-industry-core {
                width: 104px;
                height: 104px;
                border-radius: 28px
            }

            .frly-industry-float {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                font-size: 18px
            }

            .frly-line {
                display: none
            }

            .frly-benefit-core {
                min-height: 310px
            }

            .frly-benefit-board {
                width: 190px;
                min-height: 260px
            }

            .frly-benefit-board-shadow {
                width: 190px;
                height: 250px
            }
        }

        @media(max-width:390px) {
            .frly-container {
                width: min(100% - 28px, 1240px)
            }

            .frly-hero-copy h1 {
                font-size: 31px
            }

            .frly-heading h2,
            .frly-account-copy h2,
            .frly-access-copy h2 {
                font-size: 25px
            }

            .frly-access-tags {
                grid-template-columns: 1fr
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .frly-reveal {
                opacity: 1;
                transform: none;
                transition: none
            }

            .frly-ring,
            .frly-type-float,
            .frly-access-ring,
            .frly-diamond,
            .frly-float-card,
            .frly-benefit-board {
                animation: none !important
            }
        }


        .frly-process {
            position: relative;
            padding: clamp(92px, 9vw, 128px) 0;
            background: radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .14), transparent 27%), radial-gradient(circle at 92% 82%, rgba(6, 182, 212, .12), transparent 26%), linear-gradient(180deg, #fff, #f8faff)
        }

        .frly-process:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(91, 77, 245, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 77, 245, .026) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, transparent, #000 18%, transparent);
            pointer-events: none
        }

        .frly-process-shell {
            position: relative;
            max-width: 1120px;
            margin: auto
        }

        .frly-process-track {
            position: absolute;
            left: 48px;
            top: 58px;
            bottom: 58px;
            width: 3px;
            border-radius: 3px;
            background: rgba(91, 77, 245, .08);
            overflow: hidden
        }

        .frly-process-track span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #8b5cf6, #2563eb, #06b6d4);
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 1.8s cubic-bezier(.2, .8, .2, 1)
        }

        .frly-process-shell.frly-process-active .frly-process-track span {
            transform: scaleY(1)
        }

        .frly-process-grid {
            display: grid;
            gap: 14px
        }

        .frly-process-step {
            position: relative;
            display: grid;
            grid-template-columns: 96px 64px minmax(0, 1fr);
            gap: 18px;
            align-items: center;
            padding: 20px 22px;
            border-radius: 22px;
            border: 1px solid rgba(72, 83, 140, .07);
            background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(247, 249, 255, .92));
            box-shadow: 0 16px 42px rgba(45, 57, 115, .055);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
        }

        .frly-process-step:hover {
            transform: translateX(6px);
            border-color: rgba(91, 77, 245, .12);
            box-shadow: 0 22px 52px rgba(45, 57, 115, .09)
        }

        .frly-process-number {
            position: relative;
            z-index: 2;
            width: 58px;
            height: 58px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #f1edff, #eaf4ff);
            color: #5b4df5;
            font-size: 12px;
            font-weight: 850;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8)
        }

        .frly-process-icon {
            width: 56px;
            height: 56px;
            border-radius: 17px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #7458ef, #3478f6 57%, #0aa7c5);
            box-shadow: 0 13px 28px rgba(67, 77, 195, .18);
            font-size: 22px
        }

        .frly-process-step:nth-child(2n) .frly-process-icon {
            background: linear-gradient(135deg, #2563eb, #06b6d4)
        }

        .frly-process-step h3 {
            margin: 0;
            color: #101828;
            font-size: 17px;
            line-height: 1.35;
            font-weight: 780
        }

        .frly-process-step p {
            margin: 7px 0 0;
            color: #667085;
            font-size: 13.3px;
            line-height: 1.65
        }

        .frly-subscription {
            position: relative;
            padding: clamp(94px, 9vw, 130px) 0;
            background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .19), transparent 28%), radial-gradient(circle at 100% 100%, rgba(6, 182, 212, .15), transparent 28%), linear-gradient(135deg, #f6f2ff, #eef6ff 50%, #edfbfd)
        }

        .frly-subscription-grid {
            display: grid;
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: 20px;
            align-items: stretch
        }

        .frly-price-panel,
        .frly-free-panel,
        .frly-included-panel {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, .9);
            background: rgba(255, 255, 255, .78);
            box-shadow: 0 24px 60px rgba(49, 60, 115, .07);
            backdrop-filter: blur(14px)
        }

        .frly-price-panel {
            padding: 32px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(245, 247, 255, .88))
        }

        .frly-price-glow {
            position: absolute;
            width: 280px;
            height: 280px;
            right: -150px;
            top: -155px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(91, 77, 245, .18), transparent 70%)
        }

        .frly-price-top {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 64px 1fr;
            gap: 18px;
            align-items: center
        }

        .frly-price-icon {
            width: 64px;
            height: 64px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #7458ef, #3478f6 57%, #0aa7c5);
            box-shadow: 0 15px 32px rgba(67, 77, 195, .2);
            font-size: 25px
        }

        .frly-price-top h3,
        .frly-free-panel h3,
        .frly-included-panel h3 {
            margin: 0;
            color: #101828;
            font-size: 21px;
            line-height: 1.3;
            font-weight: 790
        }

        .frly-price-top p,
        .frly-price-panel>p,
        .frly-free-panel p,
        .frly-included-panel>p {
            margin: 9px 0 0;
            color: #667085;
            font-size: 13.5px;
            line-height: 1.68
        }

        .frly-price-value {
            position: relative;
            z-index: 2;
            margin: 28px 0 20px;
            padding: 20px;
            border-radius: 21px;
            display: flex;
            align-items: end;
            justify-content: space-between;
            background: linear-gradient(135deg, #5b4df5, #3478f6 55%, #0aa7c5);
            color: #fff;
            box-shadow: 0 18px 38px rgba(68, 75, 194, .2)
        }

        .frly-price-value span {
            font-size: 12px;
            font-weight: 750;
            text-transform: uppercase;
            letter-spacing: .05em;
            opacity: .85
        }

        .frly-price-value strong {
            font-size: 46px;
            line-height: 1;
            font-weight: 850;
            letter-spacing: -2px
        }

        .frly-price-factors {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin: 16px 0 0
        }

        .frly-price-factors span {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 11px;
            border-radius: 12px;
            background: rgba(91, 77, 245, .045);
            color: #566277;
            font-size: 12.3px;
            font-weight: 600
        }

        .frly-price-factors i {
            width: 26px;
            height: 26px;
            border-radius: 9px;
            display: grid;
            place-items: center;
            color: #5b4df5;
            background: #efedff
        }

        .frly-price-note {
            margin-top: 18px !important;
            padding: 15px 16px;
            border-radius: 15px;
            background: linear-gradient(100deg, rgba(91, 77, 245, .06), rgba(37, 99, 235, .045), rgba(6, 182, 212, .05));
            border: 1px solid rgba(91, 77, 245, .065);
            color: #475469 !important
        }

        .frly-subscription-side {
            display: grid;
            gap: 20px
        }

        .frly-free-panel {
            padding: 28px;
            display: grid;
            grid-template-columns: 62px minmax(0, 1fr);
            gap: 18px;
            align-items: start
        }

        .frly-free-icon {
            width: 62px;
            height: 62px;
            border-radius: 19px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #eafaff, #edf7ff);
            color: #0891b2;
            font-size: 25px;
            border: 1px solid rgba(6, 182, 212, .08)
        }

        .frly-included-panel {
            padding: 28px
        }

        .frly-included-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px
        }

        .frly-included-head>div {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .frly-included-head i {
            color: #10b981
        }

        .frly-included-head>span {
            padding: 7px 11px;
            border-radius: 999px;
            color: #059669;
            background: #ecfdf3;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase
        }

        .frly-included-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin: 18px 0
        }

        .frly-included-grid span {
            position: relative;
            padding: 11px 12px 11px 37px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(72, 83, 140, .055);
            color: #566277;
            font-size: 12px;
            line-height: 1.5
        }

        .frly-included-grid span:before {
            content: "\f00c";
            position: absolute;
            left: 11px;
            top: 11px;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: #5b4df5
        }

        .frly-partner {
            position: relative;
            padding: clamp(96px, 9vw, 132px) 0;
            background: radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .12), transparent 27%), radial-gradient(circle at 92% 85%, rgba(6, 182, 212, .11), transparent 27%), linear-gradient(180deg, #fff, #f8faff)
        }

        .frly-partner-shell {
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
            gap: 46px;
            align-items: center
        }

        .frly-partner-copy h2 {
            margin: 16px 0 0;
            color: #101828;
            font-size: clamp(31px, 3.6vw, 46px);
            line-height: 1.14;
            letter-spacing: -1.2px;
            font-weight: 800
        }

        .frly-partner-copy h2 span {
            background: linear-gradient(100deg, #5b4df5, #3478f6 55%, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .frly-partner-copy p {
            margin: 17px 0 0;
            color: #667085;
            font-size: 15px;
            line-height: 1.78
        }

        .frly-partner-art {
            position: relative;
            min-height: 430px;
            display: grid;
            place-items: center
        }

        .frly-partner-center {
            position: relative;
            z-index: 4;
            width: 150px;
            height: 150px;
            border-radius: 38px;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, #735af1, #3478f6 58%, #09abc9);
            box-shadow: 0 28px 58px rgba(67, 77, 195, .24)
        }

        .frly-partner-center:before {
            content: "";
            position: absolute;
            inset: -14px;
            border-radius: 48px;
            border: 1px solid rgba(91, 77, 245, .15)
        }

        .frly-partner-center img {
            max-width: 86px;
            max-height: 48px;
            object-fit: contain
        }

        .frly-partner-card {
            position: absolute;
            z-index: 3;
            width: 72px;
            height: 72px;
            border-radius: 22px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 16px 34px rgba(45, 55, 100, .12);
            font-size: 27px;
            animation: frlyFloat 5s ease-in-out infinite
        }

        .frly-partner-card.pc1 {
            left: 12%;
            top: 10%;
            color: #5b4df5
        }

        .frly-partner-card.pc2 {
            right: 12%;
            top: 13%;
            color: #2563eb;
            animation-delay: -1s
        }

        .frly-partner-card.pc3 {
            left: 14%;
            bottom: 9%;
            color: #0891b2;
            animation-delay: -2s
        }

        .frly-partner-card.pc4 {
            right: 14%;
            bottom: 12%;
            color: #7c5cf3;
            animation-delay: -3s
        }

        .frly-partner-beam {
            position: absolute;
            width: 155px;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(91, 77, 245, .22), rgba(6, 182, 212, .2), transparent);
            transform-origin: center
        }

        .frly-partner-beam.b1 {
            transform: rotate(35deg) translateX(-90px)
        }

        .frly-partner-beam.b2 {
            transform: rotate(-35deg) translateX(90px)
        }

        .frly-partner-beam.b3 {
            transform: rotate(-35deg) translateX(-90px)
        }

        .frly-partner-beam.b4 {
            transform: rotate(35deg) translateX(90px)
        }

        .frly-help-panel {
            margin-top: 28px;
            padding: 30px;
            border-radius: 30px;
            background: linear-gradient(145deg, #fff, #f7f9ff);
            border: 1px solid rgba(72, 83, 140, .07);
            box-shadow: 0 22px 58px rgba(45, 57, 115, .065)
        }

        .frly-help-head {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .frly-help-head>i {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #efedff, #eaf5ff);
            color: #5b4df5;
            font-size: 22px
        }

        .frly-help-head h3 {
            margin: 0;
            color: #101828;
            font-size: 18px;
            line-height: 1.4;
            font-weight: 780
        }

        .frly-help-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 20px
        }

        .frly-help-grid span {
            position: relative;
            padding: 11px 12px 11px 36px;
            border-radius: 12px;
            background: rgba(91, 77, 245, .04);
            color: #566277;
            font-size: 12px;
            line-height: 1.45
        }

        .frly-help-grid span:before {
            content: "\f058";
            position: absolute;
            left: 11px;
            top: 11px;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: #5b4df5
        }

        .frly-help-bottom {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 20px
        }

        .frly-help-bottom p {
            margin: 0;
            padding: 16px;
            border-radius: 15px;
            background: linear-gradient(100deg, rgba(91, 77, 245, .045), rgba(6, 182, 212, .035));
            color: #667085;
            font-size: 13px;
            line-height: 1.68
        }

        .frly-faq {
            position: relative;
            padding: clamp(96px, 9vw, 132px) 0;
            background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .18), transparent 28%), radial-gradient(circle at 100% 100%, rgba(6, 182, 212, .14), transparent 27%), linear-gradient(135deg, #f6f2ff, #eef6ff 50%, #edfbfd)
        }

        .frly-faq-layout {
            display: grid;
            grid-template-columns: 360px minmax(0, 1fr);
            gap: 36px;
            align-items: start
        }

        .frly-faq-visual {
            position: sticky;
            top: 28px;
            min-height: 430px;
            display: grid;
            place-items: center
        }

        .frly-faq-orb {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(91, 77, 245, .15), rgba(37, 99, 235, .05) 55%, transparent 72%)
        }

        .frly-faq-center {
            position: relative;
            z-index: 3;
            width: 128px;
            height: 128px;
            border-radius: 36px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #7458ef, #3478f6 57%, #0aa7c5);
            box-shadow: 0 28px 58px rgba(67, 77, 195, .24);
            font-size: 46px
        }

        .frly-faq-center:before {
            content: "";
            position: absolute;
            inset: -14px;
            border-radius: 46px;
            border: 1px solid rgba(91, 77, 245, .15)
        }

        .frly-faq-chat {
            position: absolute;
            z-index: 2;
            width: 58px;
            height: 58px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: #fff;
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 14px 30px rgba(49, 60, 115, .08);
            font-size: 22px;
            animation: frlyFloat 5s ease-in-out infinite
        }

        .frly-faq-chat.c1 {
            top: 55px;
            left: 55px;
            color: #5b4df5
        }

        .frly-faq-chat.c2 {
            top: 70px;
            right: 45px;
            color: #2563eb;
            animation-delay: -1s
        }

        .frly-faq-chat.c3 {
            bottom: 55px;
            left: 55px;
            color: #0891b2;
            animation-delay: -2s
        }

        .frly-faq-chat.c4 {
            bottom: 70px;
            right: 45px;
            color: #7c5cf3;
            animation-delay: -3s
        }

        .frly-faq-list {
            display: grid;
            gap: 10px
        }

        .frly-faq-item {
            overflow: hidden;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, .9);
            background: rgba(255, 255, 255, .76);
            box-shadow: 0 12px 32px rgba(49, 60, 115, .045);
            backdrop-filter: blur(12px)
        }

        .frly-faq-item button {
            width: 100%;
            border: 0;
            background: transparent;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            text-align: left;
            color: #101828;
            font: inherit;
            font-size: 14px;
            font-weight: 750;
            cursor: pointer
        }

        .frly-faq-item button>i {
            width: 30px;
            height: 30px;
            flex: 0 0 auto;
            border-radius: 10px;
            display: grid;
            place-items: center;
            color: #5b4df5;
            background: #efedff;
            transition: transform .25s ease
        }

        .frly-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease
        }

        .frly-faq-answer p {
            margin: 0;
            padding: 0 20px;
            color: #667085;
            font-size: 13.4px;
            line-height: 1.68
        }

        .frly-faq-answer p+p {
            padding-top: 8px
        }

        .frly-faq-item.frly-open .frly-faq-answer {
            max-height: 320px
        }

        .frly-faq-item.frly-open .frly-faq-answer p:last-child {
            padding-bottom: 18px
        }

        .frly-faq-item.frly-open button>i {
            transform: rotate(45deg)
        }

        .frly-final-cta {
            position: relative;
            padding: clamp(86px, 8vw, 116px) 0;
            background: #fff
        }

        .frly-cta-shell {
            position: relative;
            overflow: hidden;
            padding: clamp(44px, 6vw, 74px);
            border-radius: 38px;
            background: linear-gradient(135deg, #5b4df5 0%, #3478f6 52%, #0891b2 100%);
            box-shadow: 0 30px 80px rgba(58, 68, 180, .24);
            text-align: center;
            color: #fff
        }

        .frly-cta-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(4px)
        }

        .frly-cta-glow.g1 {
            width: 360px;
            height: 360px;
            left: -140px;
            top: -190px;
            background: rgba(255, 255, 255, .12)
        }

        .frly-cta-glow.g2 {
            width: 300px;
            height: 300px;
            right: -120px;
            bottom: -170px;
            background: rgba(6, 182, 212, .28)
        }

        .frly-cta-content {
            position: relative;
            z-index: 3;
            max-width: 850px;
            margin: auto
        }

        .frly-cta-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 22px;
            border-radius: 22px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .2);
            font-size: 28px
        }

        .frly-cta-content h2 {
            margin: 0;
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.1;
            letter-spacing: -1.5px;
            font-weight: 820
        }

        .frly-cta-content p {
            max-width: 760px;
            margin: 17px auto 0;
            color: rgba(255, 255, 255, .82);
            font-size: 15.5px;
            line-height: 1.72
        }

        .frly-cta-content strong {
            display: block;
            max-width: 780px;
            margin: 22px auto 0;
            font-size: 15px;
            line-height: 1.6
        }

        .frly-cta-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 28px
        }

        .frly-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 12px 18px;
            border-radius: 14px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 800;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .frly-btn:hover {
            transform: translateY(-2px)
        }

        .frly-btn-primary {
            background: #fff;
            color: #4f46e5;
            box-shadow: 0 12px 30px rgba(20, 30, 90, .14)
        }

        .frly-btn-secondary {
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .25);
            background: rgba(255, 255, 255, .10)
        }

        .frly-cta-float {
            position: absolute;
            z-index: 2;
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .13);
            border: 1px solid rgba(255, 255, 255, .18);
            color: #fff;
            font-size: 21px;
            animation: frlyFloat 5s ease-in-out infinite
        }

        .frly-cta-float.cf1 {
            left: 7%;
            top: 18%
        }

        .frly-cta-float.cf2 {
            right: 7%;
            top: 22%;
            animation-delay: -1.5s
        }

        .frly-cta-float.cf3 {
            right: 12%;
            bottom: 14%;
            animation-delay: -3s
        }

        @media(max-width:1050px) {
            .frly-subscription-grid {
                grid-template-columns: 1fr
            }

            .frly-partner-shell {
                grid-template-columns: 1fr
            }

            .frly-partner-art {
                max-width: 650px;
                width: 100%;
                margin: auto
            }

            .frly-help-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr))
            }

            .frly-faq-layout {
                grid-template-columns: 300px minmax(0, 1fr)
            }
        }

        @media(max-width:800px) {
            .frly-process-track {
                display: none
            }

            .frly-process-step {
                grid-template-columns: 58px minmax(0, 1fr);
                gap: 14px
            }

            .frly-process-icon {
                grid-column: 1
            }

            .frly-process-step>div:last-child {
                grid-column: 2;
                grid-row: 1/3;
                align-self: center
            }

            .frly-process-number {
                width: 48px;
                height: 48px;
                border-radius: 15px
            }

            .frly-process-icon {
                width: 48px;
                height: 48px;
                border-radius: 15px;
                font-size: 19px
            }

            .frly-faq-layout {
                grid-template-columns: 1fr
            }

            .frly-faq-visual {
                position: relative;
                top: auto;
                min-height: 270px
            }

            .frly-faq-orb {
                width: 230px;
                height: 230px
            }

            .frly-faq-center {
                width: 100px;
                height: 100px;
                border-radius: 29px;
                font-size: 36px
            }

            .frly-faq-chat {
                width: 48px;
                height: 48px;
                border-radius: 15px;
                font-size: 18px
            }

            .frly-faq-chat.c1 {
                top: 28px;
                left: 20%
            }

            .frly-faq-chat.c2 {
                top: 35px;
                right: 18%
            }

            .frly-faq-chat.c3 {
                bottom: 25px;
                left: 22%
            }

            .frly-faq-chat.c4 {
                bottom: 32px;
                right: 20%
            }
        }

        @media(max-width:700px) {

            .frly-price-panel,
            .frly-free-panel,
            .frly-included-panel,
            .frly-help-panel {
                padding: 21px 18px;
                border-radius: 23px
            }

            .frly-price-top {
                grid-template-columns: 52px 1fr
            }

            .frly-price-icon,
            .frly-free-icon {
                width: 52px;
                height: 52px;
                border-radius: 16px;
                font-size: 21px
            }

            .frly-price-value {
                padding: 17px
            }

            .frly-price-value strong {
                font-size: 40px
            }

            .frly-price-factors,
            .frly-included-grid,
            .frly-help-grid,
            .frly-help-bottom {
                grid-template-columns: 1fr
            }

            .frly-free-panel {
                grid-template-columns: 52px minmax(0, 1fr)
            }

            .frly-partner-copy h2 {
                font-size: 28px
            }

            .frly-partner-art {
                min-height: 320px
            }

            .frly-partner-center {
                width: 118px;
                height: 118px;
                border-radius: 31px
            }

            .frly-partner-card {
                width: 54px;
                height: 54px;
                border-radius: 17px;
                font-size: 21px
            }

            .frly-partner-card.pc1 {
                left: 8%;
                top: 10%
            }

            .frly-partner-card.pc2 {
                right: 8%;
                top: 12%
            }

            .frly-partner-card.pc3 {
                left: 10%;
                bottom: 8%
            }

            .frly-partner-card.pc4 {
                right: 10%;
                bottom: 10%
            }

            .frly-partner-beam {
                width: 110px
            }

            .frly-cta-shell {
                padding: 38px 20px;
                border-radius: 28px
            }

            .frly-cta-float {
                display: none
            }

            .frly-cta-content h2 {
                font-size: 32px
            }

            .frly-cta-actions {
                display: grid
            }

            .frly-btn {
                width: 100%
            }

            .frly-faq-item button {
                padding: 16px
            }

            .frly-faq-answer p {
                padding-left: 16px;
                padding-right: 16px
            }

            .frly-faq-item.frly-open .frly-faq-answer p:last-child {
                padding-bottom: 16px
            }
        }

        @media(max-width:420px) {
            .frly-process-step {
                padding: 16px
            }

            .frly-process-step h3 {
                font-size: 15px
            }

            .frly-process-step p {
                font-size: 12.8px
            }

            .frly-free-panel {
                grid-template-columns: 1fr
            }

            .frly-help-head {
                align-items: flex-start
            }

            .frly-faq-chat.c1 {
                left: 9%
            }

            .frly-faq-chat.c2 {
                right: 8%
            }

            .frly-faq-chat.c3 {
                left: 12%
            }

            .frly-faq-chat.c4 {
                right: 10%
            }
        }


        /* ===== Compact Multicolor Modern Refresh ===== */
        :root {
            --frly-violet: #7c3aed;
            --frly-indigo: #4f46e5;
            --frly-blue: #2563eb;
            --frly-sky: #0ea5e9;
            --frly-cyan: #06b6d4;
            --frly-teal: #14b8a6;
            --frly-green: #10b981;
            --frly-lime: #84cc16;
            --frly-amber: #f59e0b;
            --frly-orange: #f97316;
            --frly-rose: #f43f5e;
            --frly-pink: #ec4899;
        }

        .frly-page {
            background: #fff;
            isolation: isolate
        }

        .frly-container {
            width: min(100% - 40px, 1320px)
        }

        .frly-heading {
            margin-bottom: clamp(26px, 3.2vw, 40px)
        }

        .frly-heading h2 {
            font-size: clamp(29px, 3.25vw, 43px)
        }

        .frly-heading p {
            margin-top: 13px;
            line-height: 1.68
        }
        .frly-cta-content h2 {
             color: white !important;
        }

        .frly-heading h2 span,
        .frly-hero-copy h1 span,
        .frly-account-copy h2,
        .frly-access-copy h2,
        .frly-partner-copy h2 span {
            background: linear-gradient(100deg, #7c3aed 0%, #2563eb 18%, #06b6d4 36%, #10b981 52%, #f59e0b 68%, #f97316 82%, #ec4899 100%);
            background-size: 220% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: frlySpectrumText 10s ease-in-out infinite alternate;
        }

        .frly-eyebrow,
        .frly-type-eyebrow {
            padding: 7px 12px;
            box-shadow: 0 8px 18px rgba(49, 60, 115, .04)
        }

        .frly-eyebrow i,
        .frly-type-eyebrow i {
            background: linear-gradient(135deg, rgba(124, 58, 237, .13), rgba(14, 165, 233, .12), rgba(16, 185, 129, .11));
            color: #6d28d9
        }

        .frly-hero {
            padding: clamp(52px, 5.5vw, 72px) 0 clamp(64px, 6.5vw, 86px);
            background:
                radial-gradient(circle at 6% 8%, rgba(236, 72, 153, .13), transparent 25%),
                radial-gradient(circle at 28% 88%, rgba(245, 158, 11, .11), transparent 25%),
                radial-gradient(circle at 75% 12%, rgba(124, 58, 237, .14), transparent 26%),
                radial-gradient(circle at 96% 72%, rgba(6, 182, 212, .14), transparent 26%),
                linear-gradient(135deg, #fffaff 0%, #f8f7ff 31%, #f3fbff 62%, #f5fff9 100%)
        }

        .frly-hero:before {
            background-image: linear-gradient(rgba(99, 102, 241, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, .035) 1px, transparent 1px);
            background-size: 38px 38px
        }

        .frly-hero-grid {
            gap: clamp(36px, 5vw, 62px)
        }

        .frly-hero-copy h1 {
            font-size: clamp(36px, 3.8vw, 54px)
        }

        .frly-hero-copy h2 {
            margin-top: 18px
        }

        .frly-hero-lead {
            margin-top: 21px;
            line-height: 1.7
        }

        .frly-hero-lead:before {
            background: linear-gradient(180deg, #ec4899, #8b5cf6, #0ea5e9, #10b981, #f59e0b)
        }

        .frly-hero-art {
            min-height: 445px
        }

        .frly-shipping-panel {
            padding: 20px;
            border-radius: 28px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .74));
            box-shadow: 0 28px 68px rgba(43, 54, 112, .13), 0 0 0 1px rgba(255, 255, 255, .75) inset
        }

        .frly-hero-orbit {
            height: 228px
        }

        .frly-ring {
            background: conic-gradient(from 0deg, rgba(236, 72, 153, .2), rgba(124, 58, 237, .58), rgba(14, 165, 233, .42), rgba(16, 185, 129, .5), rgba(245, 158, 11, .46), rgba(249, 115, 22, .38), rgba(236, 72, 153, .2))
        }

        .frly-ring-one {
            width: 222px;
            height: 222px
        }

        .frly-ring-two {
            width: 168px;
            height: 168px;
            background: conic-gradient(from 90deg, rgba(6, 182, 212, .15), rgba(16, 185, 129, .62), rgba(245, 158, 11, .38), rgba(236, 72, 153, .52), rgba(124, 58, 237, .36), rgba(6, 182, 212, .15))
        }

        .frly-ring-three {
            width: 124px;
            height: 124px
        }

        .frly-hero-center {
            width: 118px;
            height: 118px;
            border-radius: 33px;
            box-shadow: 0 22px 45px rgba(67, 77, 195, .15)
        }

        .frly-panel-features div {
            min-height: 68px
        }

        .frly-panel-features div:nth-child(1) i {
            background: #fff0f7;
            color: #db2777
        }

        .frly-panel-features div:nth-child(2) i {
            background: #ecfeff;
            color: #0891b2
        }

        .frly-panel-features div:nth-child(3) i {
            background: #ecfdf5;
            color: #059669
        }

        .frly-float-a {
            color: #db2777;
            background: #fff7fb
        }

        .frly-float-b {
            color: #0891b2;
            background: #f0fdff
        }

        .frly-float-c {
            color: #059669;
            background: #f0fdf7
        }

        .frly-intro {
            padding: 46px 0 58px;
            background: linear-gradient(180deg, #fff, #fbfbff)
        }

        .frly-intro-card {
            gap: 22px;
            padding: clamp(24px, 3vw, 36px);
            border-radius: 26px;
            background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(251, 248, 255, .95) 30%, rgba(244, 252, 255, .95) 66%, rgba(247, 255, 249, .95));
            box-shadow: 0 18px 48px rgba(44, 56, 110, .06)
        }

        .frly-intro-card:after {
            height: 4px;
            background: linear-gradient(90deg, #ec4899, #8b5cf6, #0ea5e9, #10b981, #f59e0b, #f97316)
        }

        .frly-intro-icon {
            background: linear-gradient(135deg, #ec4899, #8b5cf6 35%, #0ea5e9 67%, #10b981);
            box-shadow: 0 13px 28px rgba(99, 102, 241, .18)
        }

        .frly-intro-copy {
            gap: 13px
        }

        .frly-intro-copy p {
            line-height: 1.68
        }

        .frly-intro-highlight {
            padding: 14px 16px;
            background: linear-gradient(100deg, rgba(236, 72, 153, .045), rgba(124, 58, 237, .045), rgba(14, 165, 233, .045), rgba(16, 185, 129, .045))
        }

        .frly-carriers,
        .frly-account,
        .frly-odoo,
        .frly-shipping-types,
        .frly-accessorial,
        .frly-industries,
        .frly-benefits,
        .frly-process,
        .frly-subscription,
        .frly-partner,
        .frly-faq,
        .frly-final-cta {
            padding-top: clamp(58px, 6vw, 76px);
            padding-bottom: clamp(58px, 6vw, 76px)
        }

        .frly-carriers {
            background: radial-gradient(circle at 5% 12%, rgba(236, 72, 153, .10), transparent 25%), radial-gradient(circle at 94% 16%, rgba(14, 165, 233, .11), transparent 25%), linear-gradient(180deg, #fff, #fbfbff)
        }

        .frly-logo-shell {
            margin-bottom: 24px;
            padding: clamp(20px, 2.5vw, 28px);
            border-radius: 25px;
            background: linear-gradient(145deg, #fff, rgba(250, 248, 255, .96) 35%, rgba(244, 252, 255, .96) 70%, rgba(247, 255, 249, .96));
            box-shadow: 0 18px 48px rgba(47, 58, 118, .065)
        }

        .frly-logo-card,
        .frly-logo-more {
            height: 80px;
            border-radius: 16px
        }

        .frly-logo-card {
            border: 1px solid rgba(99, 102, 241, .10);
            background: linear-gradient(145deg, #fff, #fbfbff);
            box-shadow: 0 6px 18px rgba(48, 58, 110, .035);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
        }

        .frly-logo-card:nth-child(4n+1) {
            border-color: rgba(236, 72, 153, .14)
        }

        .frly-logo-card:nth-child(4n+2) {
            border-color: rgba(14, 165, 233, .14)
        }

        .frly-logo-card:nth-child(4n+3) {
            border-color: rgba(16, 185, 129, .14)
        }

        .frly-logo-card:nth-child(4n) {
            border-color: rgba(245, 158, 11, .15)
        }

        .frly-logo-card:hover {
            transform: translateY(-4px) scale(1.015);
            box-shadow: 0 14px 30px rgba(47, 58, 118, .09)
        }

        .frly-logo-more {
            background: linear-gradient(135deg, #7c3aed, #2563eb 28%, #06b6d4 48%, #10b981 68%, #f59e0b 84%, #ec4899);
            background-size: 200% 200%;
            animation: frlyGradientShift 9s ease infinite
        }

        .frly-account {
            background: radial-gradient(circle at 2% 15%, rgba(245, 158, 11, .11), transparent 28%), radial-gradient(circle at 96% 74%, rgba(20, 184, 166, .12), transparent 28%), linear-gradient(135deg, #fffaf2, #f8fbff 48%, #f2fffb)
        }

        .frly-account-grid {
            gap: clamp(30px, 4vw, 52px)
        }

        .frly-account-node.n1 {
            color: #db2777
        }

        .frly-account-node.n2 {
            color: #f59e0b
        }

        .frly-account-node.n3 {
            color: #10b981
        }

        .frly-account-path {
            background: linear-gradient(90deg, rgba(236, 72, 153, .08), rgba(245, 158, 11, .38), rgba(16, 185, 129, .35), transparent)
        }

        .frly-account-benefits {
            padding: clamp(22px, 3vw, 32px);
            border-radius: 24px;
            background: rgba(255, 255, 255, .78);
            box-shadow: 0 18px 45px rgba(49, 60, 115, .06)
        }

        .frly-check-grid {
            gap: 7px
        }

        .frly-check-grid div {
            padding: 11px;
            border-radius: 13px
        }

        .frly-check-grid div:nth-child(3n+1) i {
            background: #fff0f7;
            color: #db2777
        }

        .frly-check-grid div:nth-child(3n+2) i {
            background: #fffbeb;
            color: #d97706
        }

        .frly-check-grid div:nth-child(3n) i {
            background: #ecfdf5;
            color: #059669
        }

        .frly-odoo {
            background: radial-gradient(circle at 8% 8%, rgba(124, 58, 237, .09), transparent 25%), radial-gradient(circle at 94% 18%, rgba(16, 185, 129, .09), transparent 25%), linear-gradient(180deg, #fff, #fbfdff)
        }

        .frly-odoo-grid {
            gap: 14px
        }

        .frly-odoo-card {
            border-radius: 21px;
            box-shadow: 0 14px 38px rgba(45, 57, 115, .05);
            transition: transform .25s ease, box-shadow .25s ease
        }

        .frly-odoo-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 45px rgba(45, 57, 115, .08)
        }

        .frly-odoo-toggle {
            padding: 20px
        }

        .frly-odoo-body {
            padding: 0 20px 20px
        }

        .frly-data-grid {
            margin: 13px 0;
            padding: 13px
        }

        .frly-odoo-card:nth-child(1) .frly-step-icon {
            background: #fff0f7;
            color: #db2777
        }

        .frly-odoo-card:nth-child(2) .frly-step-icon {
            background: #eff6ff;
            color: #2563eb
        }

        .frly-odoo-card:nth-child(3) .frly-step-icon {
            background: #ecfdf5;
            color: #059669
        }

        .frly-odoo-card:nth-child(4) .frly-step-icon {
            background: #fff7ed;
            color: #ea580c
        }

        .frly-odoo-card:nth-child(1) .frly-data-grid {
            background: linear-gradient(135deg, rgba(236, 72, 153, .045), rgba(124, 58, 237, .025))
        }

        .frly-odoo-card:nth-child(2) .frly-data-grid {
            background: linear-gradient(135deg, rgba(37, 99, 235, .045), rgba(14, 165, 233, .03))
        }

        .frly-odoo-card:nth-child(3) .frly-data-grid {
            background: linear-gradient(135deg, rgba(16, 185, 129, .05), rgba(132, 204, 22, .025))
        }

        .frly-odoo-card:nth-child(4) .frly-data-grid {
            background: linear-gradient(135deg, rgba(249, 115, 22, .05), rgba(245, 158, 11, .03))
        }

        .frly-shipping-types {
            background: radial-gradient(circle at 4% 8%, rgba(236, 72, 153, .09), transparent 25%), radial-gradient(circle at 96% 18%, rgba(245, 158, 11, .09), transparent 25%), linear-gradient(180deg, #fff, #fffdf9)
        }

        .frly-type-grid {
            gap: 16px
        }

        .frly-type-card {
            border-radius: 25px;
            box-shadow: 0 16px 46px rgba(45, 57, 115, .055)
        }

        .frly-type-top {
            min-height: 188px;
            padding: 23px
        }

        .frly-parcel-top {
            background: linear-gradient(135deg, #ec4899, #8b5cf6 38%, #3b82f6 70%, #06b6d4)
        }

        .frly-ltl-top {
            background: linear-gradient(135deg, #0ea5e9, #14b8a6 40%, #10b981 72%, #84cc16)
        }

        .frly-type-float {
            width: 78px;
            height: 78px;
            border-radius: 23px;
            font-size: 34px
        }

        .frly-type-body {
            padding: 23px
        }

        .frly-type-body>p {
            line-height: 1.65
        }

        .frly-use-grid {
            gap: 7px
        }

        .frly-use-grid span {
            padding: 9px 10px
        }

        .frly-type-card:first-child .frly-use-grid i {
            color: #db2777
        }

        .frly-type-card:last-child .frly-use-grid i {
            color: #059669
        }

        .frly-accessorial {
            background: radial-gradient(circle at 2% 12%, rgba(249, 115, 22, .13), transparent 27%), radial-gradient(circle at 96% 82%, rgba(6, 182, 212, .13), transparent 27%), linear-gradient(135deg, #fff9f3, #f8fbff 48%, #f1fffd)
        }

        .frly-access-grid {
            gap: 36px
        }

        .frly-access-copy p {
            margin-top: 14px;
            line-height: 1.68
        }

        .frly-access-note {
            margin-top: 17px;
            padding-top: 14px
        }

        .frly-access-art {
            min-height: 500px
        }

        .frly-access-glow {
            background: radial-gradient(circle, rgba(249, 115, 22, .12), rgba(236, 72, 153, .07) 30%, rgba(124, 58, 237, .06) 48%, rgba(6, 182, 212, .05) 64%, transparent 75%)
        }

        .frly-access-ring {
            background: conic-gradient(from 0deg, rgba(249, 115, 22, .12), rgba(245, 158, 11, .58), rgba(236, 72, 153, .35), rgba(124, 58, 237, .50), rgba(6, 182, 212, .48), rgba(16, 185, 129, .42), rgba(249, 115, 22, .12))
        }

        .frly-access-chip:nth-child(4n+1) {
            border-color: rgba(236, 72, 153, .12)
        }

        .frly-access-chip:nth-child(4n+2) {
            border-color: rgba(245, 158, 11, .13)
        }

        .frly-access-chip:nth-child(4n+3) {
            border-color: rgba(16, 185, 129, .12)
        }

        .frly-access-chip:nth-child(4n) {
            border-color: rgba(14, 165, 233, .12)
        }

        .frly-industries {
            background: radial-gradient(circle at 5% 10%, rgba(16, 185, 129, .09), transparent 26%), radial-gradient(circle at 95% 82%, rgba(236, 72, 153, .09), transparent 26%), linear-gradient(180deg, #fff, #fbfdfc)
        }

        .frly-industry-main {
            min-height: 420px;
            background: radial-gradient(circle at 86% 10%, rgba(124, 58, 237, .11), transparent 30%), radial-gradient(circle at 8% 92%, rgba(16, 185, 129, .10), transparent 30%), linear-gradient(145deg, #fff, #faf8ff 48%, #f2fff9)
        }

        .frly-industry-card,
        .frly-industry-side {
            box-shadow: 0 16px 46px rgba(45, 57, 115, .05)
        }

        .frly-industry-side:nth-child(1) {
            background: linear-gradient(145deg, #fff, #fff8f1)
        }

        .frly-industry-side:nth-child(2) {
            background: linear-gradient(145deg, #fff, #f2fbff)
        }

        .frly-benefits {
            background: radial-gradient(circle at 4% 5%, rgba(236, 72, 153, .12), transparent 28%), radial-gradient(circle at 96% 95%, rgba(245, 158, 11, .11), transparent 28%), linear-gradient(135deg, #fff7fb, #f7f8ff 42%, #f2fffb 72%, #fffaf1)
        }

        .frly-benefit-layout {
            gap: 18px
        }

        .frly-benefit-col {
            gap: 9px
        }

        .frly-benefit-card {
            padding: 16px;
            border-radius: 17px;
            box-shadow: 0 12px 30px rgba(49, 60, 115, .045)
        }

        .frly-benefit-col:first-child .frly-benefit-card:nth-child(1) .frly-benefit-icon {
            background: #fff0f7;
            color: #db2777
        }

        .frly-benefit-col:first-child .frly-benefit-card:nth-child(2) .frly-benefit-icon {
            background: #eef2ff;
            color: #4f46e5
        }

        .frly-benefit-col:first-child .frly-benefit-card:nth-child(3) .frly-benefit-icon {
            background: #fffbeb;
            color: #d97706
        }

        .frly-benefit-col:first-child .frly-benefit-card:nth-child(4) .frly-benefit-icon {
            background: #ecfeff;
            color: #0891b2
        }

        .frly-benefit-col:last-child .frly-benefit-card:nth-child(1) .frly-benefit-icon {
            background: #ecfdf5;
            color: #059669
        }

        .frly-benefit-col:last-child .frly-benefit-card:nth-child(2) .frly-benefit-icon {
            background: #f7fee7;
            color: #65a30d
        }

        .frly-benefit-col:last-child .frly-benefit-card:nth-child(3) .frly-benefit-icon {
            background: #fff7ed;
            color: #ea580c
        }

        .frly-benefit-col:last-child .frly-benefit-card:nth-child(4) .frly-benefit-icon {
            background: #fdf2f8;
            color: #db2777
        }

        .frly-benefit-hub {
            min-height: 500px
        }

        .frly-benefit-core,
        .frly-benefit-hub-center {
            background:
                radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.10), transparent 65%),
                radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.09), transparent 75%),
                radial-gradient(circle at 50% 90%, rgba(14, 165, 233, 0.08), transparent 80%),
                rgba(255, 255, 255, 0.95);
            border-radius: 50px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(24px);
        }

        .frly-process {
            background: radial-gradient(circle at 5% 5%, rgba(14, 165, 233, .10), transparent 28%), radial-gradient(circle at 96% 90%, rgba(132, 204, 22, .10), transparent 28%), linear-gradient(180deg, #fff, #f8fdff)
        }

        .frly-process-shell {
            gap: 10px
        }

        .frly-process-step {
            padding: 16px;
            border-radius: 18px
        }

        .frly-process-step:hover {
            transform: translateX(4px)
        }

        .frly-process-step:nth-child(1) .frly-process-icon {
            background: linear-gradient(135deg, #ec4899, #f43f5e)
        }

        .frly-process-step:nth-child(2) .frly-process-icon {
            background: linear-gradient(135deg, #8b5cf6, #6366f1)
        }

        .frly-process-step:nth-child(3) .frly-process-icon {
            background: linear-gradient(135deg, #2563eb, #0ea5e9)
        }

        .frly-process-step:nth-child(4) .frly-process-icon {
            background: linear-gradient(135deg, #06b6d4, #14b8a6)
        }

        .frly-process-step:nth-child(5) .frly-process-icon {
            background: linear-gradient(135deg, #10b981, #84cc16)
        }

        .frly-process-step:nth-child(6) .frly-process-icon {
            background: linear-gradient(135deg, #f59e0b, #f97316)
        }

        .frly-process-step:nth-child(7) .frly-process-icon {
            background: linear-gradient(135deg, #f97316, #ec4899)
        }

        .frly-process-step:nth-child(1) .frly-process-number {
            color: #db2777;
            background: #fff0f7
        }

        .frly-process-step:nth-child(2) .frly-process-number {
            color: #7c3aed;
            background: #f5f3ff
        }

        .frly-process-step:nth-child(3) .frly-process-number {
            color: #2563eb;
            background: #eff6ff
        }

        .frly-process-step:nth-child(4) .frly-process-number {
            color: #0891b2;
            background: #ecfeff
        }

        .frly-process-step:nth-child(5) .frly-process-number {
            color: #059669;
            background: #ecfdf5
        }

        .frly-process-step:nth-child(6) .frly-process-number {
            color: #d97706;
            background: #fffbeb
        }

        .frly-process-step:nth-child(7) .frly-process-number {
            color: #ea580c;
            background: #fff7ed
        }

        .frly-subscription {
            background: radial-gradient(circle at 0% 0%, rgba(236, 72, 153, .12), transparent 27%), radial-gradient(circle at 100% 100%, rgba(16, 185, 129, .12), transparent 27%), linear-gradient(135deg, #fff7fb, #f7f8ff 38%, #f0fffb 72%, #fffaf2)
        }

        .frly-subscription-grid {
            gap: 16px
        }

        .frly-price-panel,
        .frly-free-panel,
        .frly-included-panel {
            border-radius: 24px;
            box-shadow: 0 16px 44px rgba(49, 60, 115, .055)
        }

        .frly-price-panel {
            padding: 26px
        }

        .frly-price-icon {
            background: linear-gradient(135deg, #ec4899, #8b5cf6 35%, #0ea5e9 68%, #10b981)
        }

        .frly-price-value {
            margin: 20px 0 16px;
            background: linear-gradient(110deg, #ec4899, #8b5cf6 25%, #2563eb 43%, #06b6d4 59%, #10b981 74%, #f59e0b 88%, #f97316);
            background-size: 220% 220%;
            animation: frlyGradientShift 10s ease infinite
        }

        .frly-subscription-side {
            gap: 16px
        }

        .frly-price-factors span:nth-child(4n+1) i {
            background: #fff0f7;
            color: #db2777
        }

        .frly-price-factors span:nth-child(4n+2) i {
            background: #eff6ff;
            color: #2563eb
        }

        .frly-price-factors span:nth-child(4n+3) i {
            background: #ecfdf5;
            color: #059669
        }

        .frly-price-factors span:nth-child(4n) i {
            background: #fffbeb;
            color: #d97706
        }

        .frly-partner {
            background: radial-gradient(circle at 8% 8%, rgba(245, 158, 11, .10), transparent 26%), radial-gradient(circle at 92% 85%, rgba(236, 72, 153, .10), transparent 26%), linear-gradient(180deg, #fff, #fffaf6)
        }

        .frly-partner-shell {
            gap: 34px
        }

        .frly-partner-art {
            min-height: 370px
        }

        .frly-partner-center {
            background: linear-gradient(135deg, #ec4899, #8b5cf6 28%, #0ea5e9 54%, #10b981 76%, #f59e0b)
        }

        .frly-partner-card.pc1 {
            color: #db2777
        }

        .frly-partner-card.pc2 {
            color: #d97706
        }

        .frly-partner-card.pc3 {
            color: #059669
        }

        .frly-partner-card.pc4 {
            color: #0891b2
        }

        .frly-help-panel {
            margin-top: 20px;
            padding: 24px;
            border-radius: 24px
        }

        .frly-faq {
            background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, .10), transparent 27%), radial-gradient(circle at 100% 100%, rgba(249, 115, 22, .11), transparent 27%), linear-gradient(135deg, #faf7ff, #f7fbff 50%, #fff9f4)
        }

        .frly-faq-layout {
            gap: 28px
        }

        .frly-faq-visual {
            min-height: 360px
        }

        .frly-faq-orb {
            background: radial-gradient(circle, rgba(236, 72, 153, .11), rgba(124, 58, 237, .08) 32%, rgba(14, 165, 233, .07) 55%, rgba(245, 158, 11, .05) 70%, transparent 78%)
        }

        .frly-faq-center {
            background: linear-gradient(135deg, #ec4899, #8b5cf6 28%, #0ea5e9 55%, #10b981 78%, #f59e0b)
        }

        .frly-faq-chat.c1 {
            color: #db2777
        }

        .frly-faq-chat.c2 {
            color: #d97706
        }

        .frly-faq-chat.c3 {
            color: #059669
        }

        .frly-faq-chat.c4 {
            color: #0891b2
        }

        .frly-faq-list {
            gap: 8px
        }

        .frly-faq-item {
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(49, 60, 115, .04)
        }

        .frly-faq-item button {
            padding: 15px 18px
        }

        .frly-faq-item:nth-child(4n+1) button>i {
            background: #fff0f7;
            color: #db2777
        }

        .frly-faq-item:nth-child(4n+2) button>i {
            background: #eff6ff;
            color: #2563eb
        }

        .frly-faq-item:nth-child(4n+3) button>i {
            background: #ecfdf5;
            color: #059669
        }

        .frly-faq-item:nth-child(4n) button>i {
            background: #fff7ed;
            color: #ea580c
        }

        .frly-final-cta {
            background: linear-gradient(180deg, #fff, #fffaf6)
        }

        .frly-cta-shell {
            padding: clamp(36px, 5vw, 56px);
            border-radius: 30px;
            background: linear-gradient(120deg, #ec4899 0%, #8b5cf6 19%, #2563eb 38%, #06b6d4 55%, #10b981 70%, #f59e0b 85%, #f97316 100%);
            background-size: 220% 220%;
            animation: frlyGradientShift 12s ease infinite;
            box-shadow: 0 26px 68px rgba(88, 66, 180, .20)
        }

        .frly-cta-content p {
            margin-top: 13px
        }

        .frly-cta-content strong {
            margin-top: 17px
        }

        .frly-cta-actions {
            margin-top: 22px
        }

        .frly-cta-float.cf1 {
            background: rgba(255, 255, 255, .14);
            color: #fff
        }

        .frly-cta-float.cf2 {
            background: rgba(255, 255, 255, .14);
            color: #fff
        }

        .frly-cta-float.cf3 {
            background: rgba(255, 255, 255, .14);
            color: #fff
        }

        .frly-odoo-card,
        .frly-type-card,
        .frly-benefit-card,
        .frly-process-step,
        .frly-price-panel,
        .frly-free-panel,
        .frly-included-panel,
        .frly-help-panel,
        .frly-faq-item,
        .frly-logo-card,
        .frly-account-benefits,
        .frly-intro-card {
            will-change: transform
        }

        .frly-reveal {
            transform: translateY(18px) scale(.99);
            transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1)
        }

        .frly-reveal.frly-visible {
            transform: none
        }

        @keyframes frlySpectrumText {
            0% {
                background-position: 0% 50%
            }

            100% {
                background-position: 100% 50%
            }
        }

        @keyframes frlyGradientShift {

            0%,
            100% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }
        }

        @media(max-width:900px) {
            .frly-container {
                width: min(100% - 34px, 1240px)
            }

            .frly-carriers,
            .frly-account,
            .frly-odoo,
            .frly-shipping-types,
            .frly-accessorial,
            .frly-industries,
            .frly-benefits,
            .frly-process,
            .frly-subscription,
            .frly-partner,
            .frly-faq,
            .frly-final-cta {
                padding-top: 52px;
                padding-bottom: 52px
            }

            .frly-intro {
                padding: 42px 0 48px
            }

            .frly-hero {
                padding-top: 48px;
                padding-bottom: 58px
            }
        }

        @media(max-width:700px) {
            .frly-container {
                width: min(100% - 28px, 1240px)
            }

            .frly-heading {
                margin-bottom: 26px
            }

            .frly-heading h2 {
                font-size: 27px
            }

            .frly-heading p {
                font-size: 14.7px
            }

            .frly-carriers,
            .frly-account,
            .frly-odoo,
            .frly-shipping-types,
            .frly-accessorial,
            .frly-industries,
            .frly-benefits,
            .frly-process,
            .frly-subscription,
            .frly-partner,
            .frly-faq,
            .frly-final-cta {
                padding-top: 44px;
                padding-bottom: 44px
            }

            .frly-intro {
                padding: 34px 0 40px
            }

            .frly-intro-card {
                padding: 21px 17px;
                border-radius: 21px
            }

            .frly-hero {
                padding-top: 42px;
                padding-bottom: 48px
            }

            .frly-hero-art {
                min-height: auto
            }

            .frly-shipping-panel {
                padding: 16px;
                border-radius: 24px
            }

            .frly-hero-orbit {
                height: 194px
            }

            .frly-ring-one {
                width: 188px;
                height: 188px
            }

            .frly-ring-two {
                width: 142px;
                height: 142px
            }

            .frly-ring-three {
                width: 104px;
                height: 104px
            }

            .frly-hero-center {
                width: 102px;
                height: 102px;
                border-radius: 28px
            }

            .frly-logo-shell {
                padding: 17px
            }

            .frly-logo-card,
            .frly-logo-more {
                height: 72px
            }

            .frly-account-benefits {
                padding: 18px
            }

            .frly-odoo-toggle {
                padding: 17px
            }

            .frly-odoo-body {
                padding: 0 17px 18px
            }

            .frly-type-top {
                min-height: 168px;
                padding: 20px
            }

            .frly-type-body {
                padding: 19px 17px
            }

            .frly-access-art {
                min-height: 470px
            }

            .frly-benefit-hub {
                min-height: 420px
            }

            .frly-faq-visual {
                min-height: 260px
            }

            .frly-cta-shell {
                padding: 32px 18px;
                border-radius: 24px
            }
        }

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

            .frly-heading h2 span,
            .frly-hero-copy h1 span,
            .frly-account-copy h2,
            .frly-access-copy h2,
            .frly-partner-copy h2 span,
            .frly-logo-more,
            .frly-price-value,
            .frly-cta-shell {
                animation: none !important
            }
        }


        /* ===== Master Purple Visual System ===== */
        :root {
            --frly-master-purple: #6d28d9;
            --frly-master-purple-2: #7c3aed;
            --frly-master-purple-3: #8b5cf6;
            --frly-master-indigo: #4f46e5;
            --frly-master-soft: #f7f3ff;
            --frly-master-soft-2: #fbf9ff;
        }

        .frly-heading h2 span,
        .frly-hero-copy h1 span,
        .frly-account-copy h2,
        .frly-access-copy h2,
        .frly-partner-copy h2 span {
            background: linear-gradient(100deg, #4c1d95 0%, #6d28d9 42%, #8b5cf6 76%, #6d28d9 100%);
            background-size: 100% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: none !important;
        }

        .frly-heading h2 {
            color: #16132a
        }

        .frly-eyebrow,
        .frly-type-eyebrow {
            color: #554a6f;
            border-color: rgba(109, 40, 217, .11);
            background: rgba(255, 255, 255, .88)
        }

        .frly-eyebrow i,
        .frly-type-eyebrow i {
            background: linear-gradient(135deg, #f2eaff, #ebe6ff);
            color: #6d28d9
        }

        .frly-hero {
            background:
                radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .15), transparent 27%),
                radial-gradient(circle at 92% 16%, rgba(109, 40, 217, .10), transparent 26%),
                radial-gradient(circle at 72% 92%, rgba(79, 70, 229, .08), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #faf7ff 48%, #f5f2ff 100%);
        }

        .frly-hero-lead:before {
            background: linear-gradient(180deg, #a78bfa, #7c3aed, #4f46e5)
        }

        .frly-ring {
            background: conic-gradient(from 0deg, rgba(109, 40, 217, .12), rgba(139, 92, 246, .58), rgba(79, 70, 229, .22), rgba(109, 40, 217, .48), rgba(109, 40, 217, .12))
        }

        .frly-ring-two {
            background: conic-gradient(from 90deg, rgba(139, 92, 246, .12), rgba(109, 40, 217, .56), rgba(79, 70, 229, .24), rgba(167, 139, 250, .45), rgba(139, 92, 246, .12))
        }

        .frly-hero-center {
            color: #fff;
            background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 55%, #4f46e5 100%);
            border: 1px solid rgba(255, 255, 255, .30);
            box-shadow: 0 24px 50px rgba(91, 55, 175, .23), inset 0 1px 0 rgba(255, 255, 255, .20);
        }

        .frly-hero-center:before {
            border-color: rgba(109, 40, 217, .18);
            background: rgba(124, 58, 237, .035)
        }

        .frly-hero-center img {
            filter: brightness(0) invert(1)
        }

        .frly-hero-center small {
            color: rgba(255, 255, 255, .90)
        }

        .frly-panel-features div:nth-child(1) i,
        .frly-panel-features div:nth-child(2) i,
        .frly-panel-features div:nth-child(3) i {
            background: #f2eaff;
            color: #6d28d9
        }

        .frly-float-a,
        .frly-float-b,
        .frly-float-c {
            color: #6d28d9;
            background: #fbf8ff
        }

        .frly-carriers {
            background: radial-gradient(circle at 8% 12%, rgba(139, 92, 246, .09), transparent 25%), radial-gradient(circle at 94% 18%, rgba(109, 40, 217, .07), transparent 25%), linear-gradient(180deg, #fff, #fbf9ff);
        }

        .frly-logo-more {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9 56%, #4f46e5);
            background-size: 100% 100%;
            animation: none !important
        }

        .frly-logo-shell-head>span {
            color: #6d28d9;
            background: #f2eaff
        }

        .frly-account {
            background: radial-gradient(circle at 2% 15%, rgba(139, 92, 246, .10), transparent 28%), radial-gradient(circle at 96% 74%, rgba(109, 40, 217, .07), transparent 28%), linear-gradient(135deg, #fbf9ff, #ffffff 48%, #f8f5ff);
        }

        .frly-account-path {
            background: linear-gradient(90deg, rgba(109, 40, 217, .05), rgba(139, 92, 246, .38), rgba(79, 70, 229, .24), transparent)
        }

        .frly-account-node.n1,
        .frly-account-node.n2,
        .frly-account-node.n3 {
            color: #6d28d9
        }

        .frly-account-core {
            background: linear-gradient(145deg, #ffffff, #f7f3ff);
            border: 1px solid rgba(109, 40, 217, .10);
            box-shadow: 0 20px 42px rgba(72, 44, 130, .10)
        }

        .frly-account-core:before {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 38px;
            border: 1px solid rgba(109, 40, 217, .09);
            pointer-events: none
        }

        .frly-check-grid div:nth-child(n) i {
            background: #f2eaff;
            color: #6d28d9
        }

        .frly-odoo {
            background: radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .08), transparent 25%), linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-odoo-card:nth-child(n) .frly-step-icon {
            background: linear-gradient(135deg, #f3edff, #ece8ff);
            color: #6d28d9
        }

        .frly-data-grid {
            background: linear-gradient(135deg, rgba(139, 92, 246, .045), rgba(109, 40, 217, .025));
            border-color: rgba(109, 40, 217, .06)
        }

        .frly-data-grid span:before {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9)
        }

        .frly-shipping-types {
            background: linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-type-card {
            border-color: rgba(109, 40, 217, .08);
            background: linear-gradient(145deg, #fff, #fcfbff)
        }

        .frly-type-top {
            min-height: 196px;
            border-bottom: 1px solid rgba(109, 40, 217, .08)
        }

        .frly-parcel-top {
            background:
                radial-gradient(circle at 88% 22%, rgba(139, 92, 246, .16), transparent 26%),
                linear-gradient(135deg, #fbf8ff 0%, #f4edff 54%, #f9f7ff 100%);
        }

        .frly-ltl-top {
            background:
                radial-gradient(circle at 88% 22%, rgba(79, 70, 229, .12), transparent 26%),
                linear-gradient(135deg, #fbf9ff 0%, #f1efff 54%, #faf9ff 100%);
        }

        .frly-type-top:before,
        .frly-type-top:after {
            border-color: rgba(109, 40, 217, .10)
        }

        .frly-type-eyebrow {
            background: rgba(255, 255, 255, .78);
            border-color: rgba(109, 40, 217, .10);
            color: #5f4f78
        }

        .frly-type-eyebrow i {
            background: #f0e8ff;
            color: #6d28d9
        }

        .frly-type-float {
            color: #6d28d9;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(109, 40, 217, .10);
            box-shadow: 0 14px 30px rgba(72, 44, 130, .08);
        }

        .frly-type-top h2 {
            color: #211936
        }

        .frly-type-top>p {
            color: #6b617e
        }

        .frly-use-grid i {
            color: #6d28d9
        }

        .frly-soft-note {
            background: linear-gradient(100deg, rgba(139, 92, 246, .06), rgba(109, 40, 217, .035));
            border-color: rgba(109, 40, 217, .07)
        }

        .frly-accessorial {
            background: radial-gradient(circle at 4% 15%, rgba(139, 92, 246, .10), transparent 28%), linear-gradient(135deg, #fbf9ff, #ffffff 55%, #f8f5ff)
        }

        .frly-access-ring {
            background: conic-gradient(from 0deg, rgba(109, 40, 217, .10), rgba(139, 92, 246, .52), rgba(79, 70, 229, .20), rgba(109, 40, 217, .48), rgba(109, 40, 217, .10))
        }

        .frly-access-core {
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5);
            box-shadow: 0 24px 50px rgba(91, 55, 175, .22)
        }

        .frly-access-core img {
            filter: brightness(0) invert(1)
        }

        .frly-access-point {
            color: #6d28d9;
            background: #fff
        }

        .frly-access-chip:nth-child(n) {
            border-color: rgba(109, 40, 217, .10)
        }

        .frly-industries {
            background: radial-gradient(circle at 5% 10%, rgba(139, 92, 246, .08), transparent 26%), linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-industry-main {
            background: radial-gradient(circle at 86% 10%, rgba(139, 92, 246, .10), transparent 30%), linear-gradient(145deg, #fff, #f8f4ff 62%, #fbf9ff);
            min-height: 405px
        }

        .frly-industry-art {
            position: relative;
            min-height: 470px;
            display: grid;
            place-items: center;
            overflow: visible
        }

        .frly-industry-map {
            position: absolute;
            width: 100%;
            height: 100%;
            max-width: 330px;
            max-height: 430px;
            overflow: visible
        }

        .frly-industry-route-base {
            fill: none;
            stroke: rgba(109, 40, 217, .10);
            stroke-width: 7;
            stroke-linecap: round
        }

        .frly-industry-route-live {
            fill: none;
            stroke: url(#frlyIndustryRoute);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 8 12;
            animation: frlyIndustryFlow 10s linear infinite;
            filter: url(#frlyIndustryGlow)
        }

        .frly-industry-route-live-alt {
            animation-direction: reverse;
            animation-duration: 12s
        }

        .frly-industry-core {
            width: 124px;
            height: 124px;
            border-radius: 34px;
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5);
            box-shadow: 0 24px 50px rgba(91, 55, 175, .22)
        }

        .frly-industry-core:before {
            background: rgba(255, 255, 255, .15);
            border-color: rgba(255, 255, 255, .18)
        }

        .frly-industry-core img {
            filter: brightness(0) invert(1)
        }

        .frly-industry-float {
            width: 52px;
            height: 52px;
            border-radius: 17px;
            color: #6d28d9 !important;
            background: rgba(255, 255, 255, .92);
            border-color: rgba(109, 40, 217, .09);
            box-shadow: 0 14px 30px rgba(72, 44, 130, .08);
            animation: frlySoftFloat 5.5s ease-in-out infinite
        }

        .frly-industry-float.if1 {
            top: 56px;
            left: 13%;
            transform: none
        }

        .frly-industry-float.if2 {
            top: 60px;
            right: 12%;
            left: auto;
            transform: none;
            animation-delay: -1.2s
        }

        .frly-industry-float.if3 {
            bottom: 52px;
            left: 13%;
            top: auto;
            transform: none;
            animation-delay: -2.2s
        }

        .frly-industry-float.if4 {
            bottom: 54px;
            right: 12%;
            left: auto;
            top: auto;
            transform: none;
            animation-delay: -3.1s
        }

        .frly-industry-moving-box {
            position: absolute;
            z-index: 5;
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #fff;
            color: #6d28d9;
            border: 1px solid rgba(109, 40, 217, .12);
            box-shadow: 0 10px 24px rgba(72, 44, 130, .12);
            animation: frlyIndustryParcel 7s ease-in-out infinite
        }

        .frly-industry-side:nth-child(1),
        .frly-industry-side:nth-child(2) {
            background: linear-gradient(145deg, #fff, #faf7ff)
        }

        .frly-side-icon {
            color: #6d28d9 !important;
            background: #f2eaff
        }

        .frly-benefits {
            background: radial-gradient(circle at 5% 5%, rgba(139, 92, 246, .09), transparent 27%), linear-gradient(135deg, #fbf9ff, #ffffff 52%, #f7f3ff)
        }

        .frly-benefit-board-shadow {
            display: none !important
        }

        .frly-benefit-core {
            min-height: 470px
        }

        .frly-benefit-board {
            width: 218px;
            min-height: 292px;
            border-radius: 30px;
            background: linear-gradient(155deg, #ffffff 0%, #faf7ff 54%, #f3edff 100%);
            border: 1px solid rgba(109, 40, 217, .11);
            box-shadow: 0 24px 55px rgba(72, 44, 130, .13);
        }

        .frly-benefit-board:before {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 38px;
            border: 1px solid rgba(109, 40, 217, .07);
            pointer-events: none
        }

        .frly-benefit-logo {
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5);
            box-shadow: 0 16px 34px rgba(91, 55, 175, .20)
        }

        .frly-benefit-mini-grid span:nth-child(n) {
            background: #f2eaff;
            color: #6d28d9
        }

        .frly-benefit-icon {
            background: #f2eaff !important;
            color: #6d28d9 !important
        }

        .frly-process {
            background: radial-gradient(circle at 7% 5%, rgba(139, 92, 246, .08), transparent 26%), linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-process-shell {
            max-width: 1180px
        }

        .frly-process-track {
            display: none
        }

        .frly-process-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px
        }

        .frly-process-step {
            min-height: 174px;
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            grid-template-rows: auto 1fr;
            gap: 12px;
            align-items: start;
            padding: 18px;
            border-radius: 18px;
            background: linear-gradient(145deg, #fff, #faf8ff);
            border-color: rgba(109, 40, 217, .07);
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        .frly-process-step:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #8b5cf6, #6d28d9, #4f46e5);
            transform: scaleX(.16);
            transform-origin: left;
            transition: transform .55s ease
        }

        .frly-process-step.frly-visible:before,
        .frly-process-step:hover:before {
            transform: scaleX(1)
        }

        .frly-process-step:hover {
            transform: translateY(-4px);
            border-color: rgba(109, 40, 217, .14)
        }

        .frly-process-number {
            position: absolute;
            right: 14px;
            top: 14px;
            width: auto;
            height: auto;
            padding: 5px 7px;
            border-radius: 9px;
            background: #f2eaff !important;
            color: #6d28d9 !important;
            font-size: 10px
        }

        .frly-process-icon {
            grid-column: 1;
            grid-row: 1;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5) !important;
            color: #fff;
            font-size: 18px;
            box-shadow: 0 11px 22px rgba(91, 55, 175, .16)
        }

        .frly-process-step>div:last-child {
            grid-column: 1/3;
            grid-row: 2
        }

        .frly-process-step h3 {
            font-size: 15.5px;
            line-height: 1.32;
            padding-right: 28px
        }

        .frly-process-step p {
            font-size: 12.7px;
            line-height: 1.55;
            margin-top: 6px
        }

        .frly-process-step:nth-child(5) {
            grid-column: 1
        }

        .frly-process-step:nth-child(6) {
            grid-column: 2
        }

        .frly-process-step:nth-child(7) {
            grid-column: 3
        }

        .frly-subscription {
            background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .10), transparent 27%), linear-gradient(135deg, #fbf9ff, #ffffff 50%, #f7f3ff)
        }

        .frly-price-icon {
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5)
        }

        .frly-price-value {
            background: linear-gradient(110deg, #8b5cf6, #6d28d9 52%, #4f46e5);
            background-size: 100% 100%;
            animation: none !important
        }

        .frly-price-factors span:nth-child(n) i {
            background: #f2eaff;
            color: #6d28d9
        }

        .frly-partner {
            background: radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .08), transparent 27%), linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-partner-art {
            min-height: 360px;
            border-radius: 34px;
            background: radial-gradient(circle at center, rgba(139, 92, 246, .09), transparent 48%)
        }

        .frly-partner-center {
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5);
            box-shadow: 0 24px 50px rgba(91, 55, 175, .20)
        }

        .frly-partner-center img {
            filter: brightness(0) invert(1)
        }

        .frly-partner-card {
            width: 66px;
            height: 66px;
            border-radius: 20px;
            color: #6d28d9 !important;
            background: rgba(255, 255, 255, .92);
            border-color: rgba(109, 40, 217, .08);
            box-shadow: 0 13px 28px rgba(72, 44, 130, .08)
        }

        .frly-partner-beam {
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .22), rgba(109, 40, 217, .18), transparent)
        }

        .frly-help-head>i,
        .frly-help-grid span:before {
            color: #6d28d9
        }

        .frly-help-head>i {
            background: #f2eaff
        }

        .frly-help-grid span {
            background: rgba(109, 40, 217, .035)
        }

        .frly-help-bottom p {
            background: linear-gradient(100deg, rgba(139, 92, 246, .045), rgba(109, 40, 217, .025))
        }

        .frly-faq {
            background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .08), transparent 26%), linear-gradient(135deg, #fbf9ff, #ffffff 50%, #f7f3ff)
        }

        .frly-faq-orb {
            background: radial-gradient(circle, rgba(139, 92, 246, .11), rgba(109, 40, 217, .06) 45%, transparent 76%)
        }

        .frly-faq-center {
            background: linear-gradient(145deg, #8b5cf6, #6d28d9 58%, #4f46e5)
        }

        .frly-faq-chat.c1,
        .frly-faq-chat.c2,
        .frly-faq-chat.c3,
        .frly-faq-chat.c4 {
            color: #6d28d9
        }

        .frly-faq-item:nth-child(n) button>i {
            background: #f2eaff;
            color: #6d28d9
        }

        .frly-final-cta {
            background: linear-gradient(180deg, #fff, #fbf9ff)
        }

        .frly-cta-shell {
            background:
                radial-gradient(circle at 12% 14%, rgba(255, 255, 255, .14), transparent 28%),
                radial-gradient(circle at 88% 84%, rgba(167, 139, 250, .18), transparent 30%),
                linear-gradient(135deg, #6d28d9 0%, #7c3aed 48%, #4f46e5 100%);
            background-size: 100% 100%;
            animation: none !important;
            box-shadow: 0 26px 68px rgba(91, 55, 175, .22);
        }

        .frly-cta-glow.g2 {
            background: rgba(167, 139, 250, .20)
        }

        .frly-logo-card,
        .frly-odoo-card,
        .frly-type-card,
        .frly-benefit-card,
        .frly-process-step,
        .frly-price-panel,
        .frly-free-panel,
        .frly-included-panel,
        .frly-help-panel,
        .frly-faq-item,
        .frly-account-benefits,
        .frly-industry-main,
        .frly-industry-side {
            transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
        }

        .frly-logo-card:hover,
        .frly-odoo-card:hover,
        .frly-type-card:hover,
        .frly-benefit-card:hover,
        .frly-price-panel:hover,
        .frly-free-panel:hover,
        .frly-included-panel:hover,
        .frly-help-panel:hover,
        .frly-faq-item:hover,
        .frly-account-benefits:hover,
        .frly-industry-main:hover,
        .frly-industry-side:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 44px rgba(72, 44, 130, .09);
            border-color: rgba(109, 40, 217, .11);
        }

        @keyframes frlyIndustryFlow {
            to {
                stroke-dashoffset: -80
            }
        }

        @keyframes frlyIndustryParcel {

            0%,
            100% {
                transform: translate(-108px, -130px) rotate(-4deg)
            }

            32% {
                transform: translate(0, -18px) rotate(2deg)
            }

            68% {
                transform: translate(105px, 128px) rotate(5deg)
            }
        }

        @keyframes frlySoftFloat {

            0%,
            100% {
                translate: 0 0
            }

            50% {
                translate: 0 -7px
            }
        }

        @media(max-width:1120px) {
            .frly-process-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr))
            }

            .frly-process-step:nth-child(5),
            .frly-process-step:nth-child(6),
            .frly-process-step:nth-child(7) {
                grid-column: auto
            }

            .frly-industry-art {
                min-height: 430px
            }
        }

        @media(max-width:900px) {
            .frly-process-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr))
            }

            .frly-industry-art {
                min-height: 360px;
                max-width: 520px;
                width: 100%;
                margin-inline: auto
            }

            .frly-partner-art {
                max-width: 620px;
                width: 100%;
                margin-inline: auto
            }
        }

        @media(max-width:700px) {
            .frly-type-top {
                min-height: 160px;
                padding: 20px
            }

            .frly-type-float {
                width: 68px;
                height: 68px;
                border-radius: 21px;
                font-size: 30px;
                right: 18px;
                top: 18px
            }

            .frly-type-top h2 {
                font-size: 23px;
                max-width: 240px
            }

            .frly-type-top>p {
                font-size: 13px;
                max-width: 280px
            }

            .frly-industry-art {
                min-height: 330px
            }

            .frly-industry-map {
                max-height: 310px
            }

            .frly-industry-core {
                width: 104px;
                height: 104px;
                border-radius: 29px
            }

            .frly-industry-float {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                font-size: 18px
            }

            .frly-industry-float.if1 {
                top: 38px;
                left: 10%
            }

            .frly-industry-float.if2 {
                top: 40px;
                right: 9%
            }

            .frly-industry-float.if3 {
                bottom: 36px;
                left: 10%
            }

            .frly-industry-float.if4 {
                bottom: 38px;
                right: 9%
            }

            .frly-industry-moving-box {
                width: 32px;
                height: 32px
            }

            .frly-process-grid {
                grid-template-columns: 1fr
            }

            .frly-process-step {
                min-height: auto;
                grid-template-columns: 44px 1fr;
                padding: 16px
            }

            .frly-process-step>div:last-child {
                grid-column: 2;
                grid-row: 1;
                align-self: center
            }

            .frly-process-number {
                right: 12px;
                top: 12px
            }

            .frly-process-step h3 {
                padding-right: 34px;
                font-size: 15px
            }

            .frly-benefit-core {
                min-height: 400px
            }

            .frly-benefit-board {
                width: 200px;
                min-height: 270px
            }

            .frly-partner-art {
                min-height: 300px
            }
        }

        @media(max-width:420px) {
            .frly-industry-art {
                min-height: 300px
            }

            .frly-industry-map {
                max-width: 280px;
                max-height: 285px
            }

            .frly-industry-float.if1 {
                left: 6%
            }

            .frly-industry-float.if2 {
                right: 6%
            }

            .frly-industry-float.if3 {
                left: 6%
            }

            .frly-industry-float.if4 {
                right: 6%
            }
        }

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

            .frly-industry-route-live,
            .frly-industry-moving-box,
            .frly-industry-float,
            .frly-type-float,
            .frly-partner-card,
            .frly-benefit-board,
            .frly-cta-float {
                animation: none !important
            }
        }


        /* ===== Colorful Master Balance ===== */
        :root {
            --frly-coral: #f97316;
            --frly-amber: #f59e0b;
            --frly-pink: #ec4899;
            --frly-rose: #f43f5e;
            --frly-blue: #2563eb;
            --frly-sky: #0ea5e9;
            --frly-cyan: #06b6d4;
            --frly-teal: #14b8a6;
            --frly-green: #10b981;
        }

        /* Headings remain one consistent purple family only */
        .frly-heading h2 span,
        .frly-hero-copy h1 span,
        .frly-account-copy h2,
        .frly-access-copy h2,
        .frly-partner-copy h2 span {
            background: linear-gradient(100deg, #4c1d95 0%, #6d28d9 48%, #8b5cf6 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            color: transparent !important;
            animation: none !important;
        }

        /* Hero keeps the classic Freytly purple visual, but surrounding accents are colorful */
        .frly-hero {
            background:
                radial-gradient(circle at 8% 7%, rgba(139, 92, 246, .14), transparent 26%),
                radial-gradient(circle at 94% 14%, rgba(14, 165, 233, .12), transparent 25%),
                radial-gradient(circle at 74% 92%, rgba(236, 72, 153, .07), transparent 28%),
                linear-gradient(135deg, #ffffff 0%, #faf7ff 48%, #f3fbff 100%) !important;
        }

        .frly-hero-lead:before {
            background: linear-gradient(180deg, #8b5cf6, #06b6d4, #10b981) !important
        }

        .frly-panel-features div:nth-child(1) i {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-panel-features div:nth-child(2) i {
            background: #e9f7ff !important;
            color: #0284c7 !important
        }

        .frly-panel-features div:nth-child(3) i {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-float-a {
            color: #7c3aed !important;
            background: #fbf8ff !important
        }

        .frly-float-b {
            color: #0284c7 !important;
            background: #f3fbff !important
        }

        .frly-float-c {
            color: #059669 !important;
            background: #f1fcf8 !important
        }

        /* Carrier section */
        .frly-carriers {
            background:
                radial-gradient(circle at 5% 10%, rgba(139, 92, 246, .09), transparent 26%),
                radial-gradient(circle at 95% 16%, rgba(6, 182, 212, .10), transparent 25%),
                radial-gradient(circle at 62% 100%, rgba(16, 185, 129, .05), transparent 24%),
                linear-gradient(180deg, #fff, #f9fcff) !important;
        }

        .frly-logo-shell {
            border-color: rgba(37, 99, 235, .09) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n+1) {
            border-color: rgba(139, 92, 246, .18) !important;
            background: linear-gradient(145deg, #fff, #fbf8ff) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n+2) {
            border-color: rgba(14, 165, 233, .18) !important;
            background: linear-gradient(145deg, #fff, #f5fbff) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n+3) {
            border-color: rgba(16, 185, 129, .18) !important;
            background: linear-gradient(145deg, #fff, #f3fcf8) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n+4) {
            border-color: rgba(245, 158, 11, .18) !important;
            background: linear-gradient(145deg, #fff, #fffaf0) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n+5) {
            border-color: rgba(236, 72, 153, .17) !important;
            background: linear-gradient(145deg, #fff, #fff7fb) !important
        }

        .frly-logo-grid .frly-logo-card:nth-child(6n) {
            border-color: rgba(20, 184, 166, .18) !important;
            background: linear-gradient(145deg, #fff, #f3fcfb) !important
        }

        .frly-logo-more {
            background: linear-gradient(135deg, #7c3aed, #2563eb 48%, #06b6d4) !important
        }

        .frly-summary-icon {
            background: linear-gradient(135deg, #7c3aed, #2563eb 55%, #06b6d4) !important
        }

        .frly-carrier-cards article:nth-child(1) {
            border-top: 3px solid #8b5cf6
        }

        .frly-carrier-cards article:nth-child(2) {
            border-top: 3px solid #0ea5e9
        }

        .frly-carrier-cards article:nth-child(3) {
            border-top: 3px solid #10b981
        }

        .frly-carrier-cards article:nth-child(4) {
            border-top: 3px solid #f59e0b
        }

        .frly-carrier-cards article:nth-child(5) {
            border-top: 3px solid #ec4899
        }

        .frly-carrier-cards article:nth-child(6) {
            border-top: 3px solid #14b8a6
        }

        /* Account section uses purple + cyan + green + amber accents */
        .frly-account {
            background:
                radial-gradient(circle at 0% 20%, rgba(139, 92, 246, .12), transparent 28%),
                radial-gradient(circle at 100% 76%, rgba(16, 185, 129, .09), transparent 27%),
                radial-gradient(circle at 82% 8%, rgba(14, 165, 233, .06), transparent 22%),
                linear-gradient(135deg, #fbf9ff, #ffffff 48%, #f4fcf8) !important;
        }

        .frly-account-node.n1 {
            color: #7c3aed !important
        }

        .frly-account-node.n2 {
            color: #0284c7 !important
        }

        .frly-account-node.n3 {
            color: #059669 !important
        }

        .frly-account-path.p1 {
            background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .35), rgba(14, 165, 233, .28), transparent) !important
        }

        .frly-account-path.p2 {
            background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .28), rgba(16, 185, 129, .32), transparent) !important
        }

        .frly-account-path.p3 {
            background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .22), rgba(236, 72, 153, .24), transparent) !important
        }

        .frly-check-grid div:nth-child(4n+1) i {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-check-grid div:nth-child(4n+2) i {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        .frly-check-grid div:nth-child(4n+3) i {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-check-grid div:nth-child(4n) i {
            background: #fff6df !important;
            color: #d97706 !important
        }

        /* Odoo cards each get their own accent color */
        .frly-odoo {
            background:
                radial-gradient(circle at 10% 7%, rgba(14, 165, 233, .08), transparent 25%),
                radial-gradient(circle at 92% 14%, rgba(139, 92, 246, .08), transparent 24%),
                linear-gradient(180deg, #fff, #f8fcff) !important;
        }

        .frly-odoo-card:nth-child(1) {
            border-top: 3px solid #8b5cf6
        }

        .frly-odoo-card:nth-child(2) {
            border-top: 3px solid #0ea5e9
        }

        .frly-odoo-card:nth-child(3) {
            border-top: 3px solid #10b981
        }

        .frly-odoo-card:nth-child(4) {
            border-top: 3px solid #f59e0b
        }

        .frly-odoo-card:nth-child(1) .frly-step-icon {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-odoo-card:nth-child(2) .frly-step-icon {
            background: #e9f7ff !important;
            color: #0284c7 !important
        }

        .frly-odoo-card:nth-child(3) .frly-step-icon {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-odoo-card:nth-child(4) .frly-step-icon {
            background: #fff6df !important;
            color: #d97706 !important
        }

        .frly-data-grid span:nth-child(4n+1):before {
            background: #8b5cf6 !important
        }

        .frly-data-grid span:nth-child(4n+2):before {
            background: #0ea5e9 !important
        }

        .frly-data-grid span:nth-child(4n+3):before {
            background: #10b981 !important
        }

        .frly-data-grid span:nth-child(4n):before {
            background: #f59e0b !important
        }

        /* Small Parcel and LTL remain soft, not loud */
        .frly-shipping-types {
            background:
                radial-gradient(circle at 8% 10%, rgba(236, 72, 153, .06), transparent 25%),
                radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .08), transparent 25%),
                linear-gradient(180deg, #fff, #fbfcff) !important;
        }

        .frly-parcel-top {
            background:
                radial-gradient(circle at 88% 18%, rgba(236, 72, 153, .10), transparent 26%),
                radial-gradient(circle at 70% 100%, rgba(139, 92, 246, .08), transparent 30%),
                linear-gradient(135deg, #fff9fd 0%, #f8f1ff 54%, #fff 100%) !important;
        }

        .frly-ltl-top {
            background:
                radial-gradient(circle at 88% 18%, rgba(6, 182, 212, .12), transparent 27%),
                radial-gradient(circle at 68% 100%, rgba(16, 185, 129, .07), transparent 30%),
                linear-gradient(135deg, #f7fdff 0%, #eefbf9 54%, #fff 100%) !important;
        }

        .frly-parcel-top .frly-type-eyebrow i,
        .frly-parcel-top .frly-type-float {
            color: #db2777 !important
        }

        .frly-parcel-top .frly-type-eyebrow i {
            background: #fff0f7 !important
        }

        .frly-ltl-top .frly-type-eyebrow i,
        .frly-ltl-top .frly-type-float {
            color: #0891b2 !important
        }

        .frly-ltl-top .frly-type-eyebrow i {
            background: #e9fbfd !important
        }

        .frly-parcel-top .frly-type-float {
            border-color: rgba(236, 72, 153, .12) !important;
            background: #fffafd !important
        }

        .frly-ltl-top .frly-type-float {
            border-color: rgba(6, 182, 212, .14) !important;
            background: #f7feff !important
        }

        .frly-use-grid span:nth-child(4n+1) i {
            color: #7c3aed !important
        }

        .frly-use-grid span:nth-child(4n+2) i {
            color: #0284c7 !important
        }

        .frly-use-grid span:nth-child(4n+3) i {
            color: #059669 !important
        }

        .frly-use-grid span:nth-child(4n) i {
            color: #d97706 !important
        }

        /* Accessorial uses warm/cool mix */
        .frly-accessorial {
            background:
                radial-gradient(circle at 3% 16%, rgba(245, 158, 11, .07), transparent 28%),
                radial-gradient(circle at 98% 82%, rgba(6, 182, 212, .10), transparent 29%),
                radial-gradient(circle at 72% 6%, rgba(236, 72, 153, .05), transparent 22%),
                linear-gradient(135deg, #fffdf8, #ffffff 48%, #f4fcfc) !important;
        }

        .frly-access-ring {
            background: conic-gradient(from 0deg, rgba(124, 58, 237, .12), rgba(14, 165, 233, .56), rgba(16, 185, 129, .28), rgba(245, 158, 11, .40), rgba(236, 72, 153, .22), rgba(124, 58, 237, .12)) !important
        }

        .frly-access-point.ap1 {
            color: #7c3aed !important
        }

        .frly-access-point.ap2 {
            color: #0891b2 !important
        }

        .frly-access-point.ap3 {
            color: #d97706 !important
        }

        .frly-access-chip:nth-child(5n+1) {
            border-color: rgba(139, 92, 246, .15) !important;
            background: #fbf8ff !important
        }

        .frly-access-chip:nth-child(5n+2) {
            border-color: rgba(14, 165, 233, .15) !important;
            background: #f5fbff !important
        }

        .frly-access-chip:nth-child(5n+3) {
            border-color: rgba(16, 185, 129, .15) !important;
            background: #f4fcf8 !important
        }

        .frly-access-chip:nth-child(5n+4) {
            border-color: rgba(245, 158, 11, .16) !important;
            background: #fffaf0 !important
        }

        .frly-access-chip:nth-child(5n) {
            border-color: rgba(236, 72, 153, .14) !important;
            background: #fff8fb !important
        }

        /* Industry section is a colorful route/network, not another purple-only object */
        .frly-industries {
            background:
                radial-gradient(circle at 5% 10%, rgba(139, 92, 246, .07), transparent 26%),
                radial-gradient(circle at 96% 84%, rgba(16, 185, 129, .07), transparent 27%),
                linear-gradient(180deg, #fff, #fbfcfa) !important;
        }

        .frly-industry-main {
            background: radial-gradient(circle at 86% 10%, rgba(245, 158, 11, .08), transparent 30%), radial-gradient(circle at 8% 92%, rgba(139, 92, 246, .08), transparent 32%), linear-gradient(145deg, #fff, #fffaf3 58%, #fbf8ff) !important
        }

        .frly-industry-main-icon {
            background: #fff4df !important;
            color: #d97706 !important;
            border-color: rgba(245, 158, 11, .14) !important
        }

        .frly-industry-label i {
            color: #d97706 !important
        }

        .frly-industry-core {
            background: linear-gradient(145deg, #7c3aed, #2563eb 56%, #06b6d4) !important
        }

        .frly-industry-float.if1 {
            color: #7c3aed !important
        }

        .frly-industry-float.if2 {
            color: #0284c7 !important
        }

        .frly-industry-float.if3 {
            color: #059669 !important
        }

        .frly-industry-float.if4 {
            color: #d97706 !important
        }

        .frly-industry-moving-box {
            color: #ec4899 !important;
            border-color: rgba(236, 72, 153, .16) !important
        }

        .frly-industry-side-stack .frly-industry-side:first-child {
            background: linear-gradient(145deg, #fff, #f4fcf8) !important
        }

        .frly-industry-side-stack .frly-industry-side:first-child .frly-side-icon {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-industry-side-stack .frly-industry-side:last-child {
            background: linear-gradient(145deg, #fff, #f4fbff) !important
        }

        .frly-industry-side-stack .frly-industry-side:last-child .frly-side-icon {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        /* Benefits use eight distinct soft accents */
        .frly-benefits {
            background:
                radial-gradient(circle at 5% 5%, rgba(139, 92, 246, .07), transparent 27%),
                radial-gradient(circle at 95% 92%, rgba(14, 165, 233, .07), transparent 27%),
                linear-gradient(135deg, #fbf9ff, #fff 52%, #f4fbff) !important;
        }

        .frly-benefit-card:nth-child(4n+1) .frly-benefit-icon {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-benefit-card:nth-child(4n+2) .frly-benefit-icon {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        .frly-benefit-card:nth-child(4n+3) .frly-benefit-icon {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-benefit-card:nth-child(4n) .frly-benefit-icon {
            background: #fff6df !important;
            color: #d97706 !important
        }

        .frly-benefit-board {
            background: linear-gradient(155deg, #fff 0%, #faf8ff 48%, #f4fbff 100%) !important;
            border-color: rgba(37, 99, 235, .09) !important
        }

        .frly-benefit-logo {
            background: linear-gradient(145deg, #7c3aed, #2563eb 55%, #06b6d4) !important
        }

        .frly-benefit-mini-grid span:nth-child(1) {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-benefit-mini-grid span:nth-child(2) {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        .frly-benefit-mini-grid span:nth-child(3) {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-benefit-mini-grid span:nth-child(4) {
            background: #fff6df !important;
            color: #d97706 !important
        }

        /* Compact workflow keeps all content, each step gets a different accent */
        .frly-process {
            background:
                radial-gradient(circle at 7% 5%, rgba(14, 165, 233, .06), transparent 26%),
                radial-gradient(circle at 94% 88%, rgba(245, 158, 11, .05), transparent 24%),
                linear-gradient(180deg, #fff, #f9fbfd) !important;
        }

        .frly-process-step:nth-child(1):before {
            background: #8b5cf6 !important
        }

        .frly-process-step:nth-child(2):before {
            background: #2563eb !important
        }

        .frly-process-step:nth-child(3):before {
            background: #06b6d4 !important
        }

        .frly-process-step:nth-child(4):before {
            background: #10b981 !important
        }

        .frly-process-step:nth-child(5):before {
            background: #f59e0b !important
        }

        .frly-process-step:nth-child(6):before {
            background: #f97316 !important
        }

        .frly-process-step:nth-child(7):before {
            background: #ec4899 !important
        }

        .frly-process-step:nth-child(1) .frly-process-icon {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important
        }

        .frly-process-step:nth-child(2) .frly-process-icon {
            background: linear-gradient(135deg, #3b82f6, #2563eb) !important
        }

        .frly-process-step:nth-child(3) .frly-process-icon {
            background: linear-gradient(135deg, #22d3ee, #0891b2) !important
        }

        .frly-process-step:nth-child(4) .frly-process-icon {
            background: linear-gradient(135deg, #34d399, #059669) !important
        }

        .frly-process-step:nth-child(5) .frly-process-icon {
            background: linear-gradient(135deg, #fbbf24, #d97706) !important
        }

        .frly-process-step:nth-child(6) .frly-process-icon {
            background: linear-gradient(135deg, #fb923c, #ea580c) !important
        }

        .frly-process-step:nth-child(7) .frly-process-icon {
            background: linear-gradient(135deg, #f472b6, #db2777) !important
        }

        .frly-process-step:nth-child(1) .frly-process-number {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-process-step:nth-child(2) .frly-process-number {
            background: #eaf2ff !important;
            color: #2563eb !important
        }

        .frly-process-step:nth-child(3) .frly-process-number {
            background: #e9fbfd !important;
            color: #0891b2 !important
        }

        .frly-process-step:nth-child(4) .frly-process-number {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-process-step:nth-child(5) .frly-process-number {
            background: #fff6df !important;
            color: #d97706 !important
        }

        .frly-process-step:nth-child(6) .frly-process-number {
            background: #fff0e7 !important;
            color: #ea580c !important
        }

        .frly-process-step:nth-child(7) .frly-process-number {
            background: #fff0f7 !important;
            color: #db2777 !important
        }

        /* Subscription / pricing becomes colorful but controlled */
        .frly-subscription {
            background:
                radial-gradient(circle at 0% 0%, rgba(139, 92, 246, .09), transparent 27%),
                radial-gradient(circle at 100% 100%, rgba(16, 185, 129, .08), transparent 28%),
                linear-gradient(135deg, #fbf9ff, #fff 50%, #f4fcf8) !important;
        }

        .frly-price-icon {
            background: linear-gradient(145deg, #7c3aed, #2563eb 58%, #06b6d4) !important
        }

        .frly-price-value {
            background: linear-gradient(110deg, #7c3aed, #2563eb 50%, #06b6d4) !important
        }

        .frly-price-factors span:nth-child(5n+1) i {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-price-factors span:nth-child(5n+2) i {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        .frly-price-factors span:nth-child(5n+3) i {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-price-factors span:nth-child(5n+4) i {
            background: #fff6df !important;
            color: #d97706 !important
        }

        .frly-price-factors span:nth-child(5n) i {
            background: #fff0f7 !important;
            color: #db2777 !important
        }

        .frly-free-panel {
            background: linear-gradient(145deg, #fff, #f3fcf8) !important
        }

        .frly-included-panel {
            background: linear-gradient(145deg, #fff, #f4fbff) !important
        }

        /* Vraja partner visual stays soft, with distinct colored nodes */
        .frly-partner {
            background:
                radial-gradient(circle at 8% 8%, rgba(139, 92, 246, .07), transparent 27%),
                radial-gradient(circle at 94% 78%, rgba(14, 165, 233, .06), transparent 26%),
                linear-gradient(180deg, #fff, #fbfcff) !important;
        }

        .frly-partner-art {
            background: radial-gradient(circle at center, rgba(139, 92, 246, .07), rgba(14, 165, 233, .025) 46%, transparent 70%) !important
        }

        .frly-partner-center {
            background: linear-gradient(145deg, #7c3aed, #2563eb 58%, #06b6d4) !important
        }

        .frly-partner-card.pc1 {
            color: #7c3aed !important;
            background: #fbf8ff !important
        }

        .frly-partner-card.pc2 {
            color: #0284c7 !important;
            background: #f4fbff !important
        }

        .frly-partner-card.pc3 {
            color: #059669 !important;
            background: #f4fcf8 !important
        }

        .frly-partner-card.pc4 {
            color: #d97706 !important;
            background: #fffaf0 !important
        }

        .frly-partner-beam.b1 {
            background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .22), transparent) !important
        }

        .frly-partner-beam.b2 {
            background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .22), transparent) !important
        }

        .frly-partner-beam.b3 {
            background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .22), transparent) !important
        }

        .frly-partner-beam.b4 {
            background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .20), transparent) !important
        }

        .frly-help-grid span:nth-child(4n+1):before {
            color: #7c3aed !important
        }

        .frly-help-grid span:nth-child(4n+2):before {
            color: #0284c7 !important
        }

        .frly-help-grid span:nth-child(4n+3):before {
            color: #059669 !important
        }

        .frly-help-grid span:nth-child(4n):before {
            color: #d97706 !important
        }

        /* FAQ has colorful floating cues, heading still purple */
        .frly-faq {
            background:
                radial-gradient(circle at 0% 0%, rgba(236, 72, 153, .05), transparent 26%),
                radial-gradient(circle at 100% 100%, rgba(14, 165, 233, .07), transparent 27%),
                linear-gradient(135deg, #fffafd, #fff 50%, #f4fbff) !important;
        }

        .frly-faq-chat.c1 {
            color: #7c3aed !important
        }

        .frly-faq-chat.c2 {
            color: #0284c7 !important
        }

        .frly-faq-chat.c3 {
            color: #059669 !important
        }

        .frly-faq-chat.c4 {
            color: #d97706 !important
        }

        .frly-faq-item:nth-child(4n+1) button>i {
            background: #f2eaff !important;
            color: #7c3aed !important
        }

        .frly-faq-item:nth-child(4n+2) button>i {
            background: #eaf8ff !important;
            color: #0284c7 !important
        }

        .frly-faq-item:nth-child(4n+3) button>i {
            background: #eafbf5 !important;
            color: #059669 !important
        }

        .frly-faq-item:nth-child(4n) button>i {
            background: #fff6df !important;
            color: #d97706 !important
        }

        /* Final CTA intentionally remains a soft purple family, not rainbow */
        .frly-final-cta {
            background: linear-gradient(180deg, #fff, #faf8ff) !important
        }

        .frly-cta-shell {
            background:
                radial-gradient(circle at 12% 14%, rgba(255, 255, 255, .15), transparent 28%),
                radial-gradient(circle at 88% 84%, rgba(196, 181, 253, .18), transparent 30%),
                linear-gradient(135deg, #6d28d9 0%, #7c3aed 48%, #4f46e5 100%) !important;
            animation: none !important;
        }

        @media(max-width:700px) {
            .frly-logo-grid .frly-logo-card {
                background: #fff !important
            }

            .frly-partner-card.pc1,
            .frly-partner-card.pc2,
            .frly-partner-card.pc3,
            .frly-partner-card.pc4 {
                background: rgba(255, 255, 255, .94) !important
            }
        }
        
        .frly-btn-primary:hover {
    background: #f8f8ff;
    color: #4f46e5;
}

/* ===============================
   FIX CARRIER LOGO VISIBILITY
================================ */

.frly-logo-card {
    background: #ffffff !important;
    min-height: 90px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.frly-logo-card img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 120px !important;
    max-height: 52px !important;
    object-fit: contain;
    
    /* Keep original logo colors */
    filter: none !important;

    position: relative;
    z-index: 2;
}

/* UPS logo */
.frly-logo-card.frly-ups img {
    max-width: 55px !important;
    max-height: 60px !important;
}

/* Use this class ONLY for white logos */
.frly-logo-card.frly-white-logo {
    background: linear-gradient(
        135deg,
        #312e81 0%,
        #4f46e5 50%,
        #2563eb 100%
    ) !important;
}

.frly-logo-card.frly-white-logo img {
    filter: none !important;
    max-width: 120px !important;
    opacity: 1 !important;
}

/* Mobile */
@media (max-width: 700px) {
    .frly-logo-card {
        min-height: 76px;
        padding: 13px 15px;
    }

    .frly-logo-card img {
        max-width: 100px !important;
        max-height: 43px !important;
    }

    .frly-logo-card.frly-white-logo {
        background: linear-gradient(
            135deg,
            #312e81,
            #4f46e5,
            #2563eb
        ) !important;
    }
    
}


.frly-logo-card.frly-white-logo img {
    background: #243b64;
    padding: 10px 16px;
    border-radius: 10px;
    max-width: 135px !important;
    max-height: 58px !important;
}