:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-25e0758 *//* =========================================================
   COOLTEXTFONTS — PROFESSIONAL HOMEPAGE CSS
   Typography: Poppins
   Style: Premium SaaS / Modern / Clean
   ========================================================= */


/* =========================================================
   GOOGLE FONT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
    --ctf-primary: #7c4dff;
    --ctf-primary-dark: #6338df;
    --ctf-primary-light: #a78bfa;

    --ctf-orange: #ffad1f;
    --ctf-blue: #3b82f6;
    --ctf-pink: #ec4899;
    --ctf-cyan: #06b6d4;
    --ctf-green: #10b981;

    --ctf-heading: #17131f;
    --ctf-text: #403a48;
    --ctf-muted: #746d7d;
    --ctf-light: #9a93a3;

    --ctf-white: #ffffff;
    --ctf-bg: #ffffff;
    --ctf-soft-bg: #faf9fc;

    --ctf-purple-bg: #f6f2ff;
    --ctf-blue-bg: #eff6ff;
    --ctf-pink-bg: #fdf2f8;
    --ctf-cyan-bg: #ecfeff;
    --ctf-orange-bg: #fff8ea;
    --ctf-green-bg: #ecfdf5;

    --ctf-border: #e8e4ee;
    --ctf-border-light: #f0edf4;

    --ctf-container: 1180px;

    --ctf-radius-sm: 10px;
    --ctf-radius: 15px;
    --ctf-radius-lg: 20px;
    --ctf-radius-xl: 28px;

    --ctf-shadow-sm:
        0 4px 18px rgba(31, 23, 45, 0.045);

    --ctf-shadow:
        0 14px 40px rgba(31, 23, 45, 0.075);

    --ctf-shadow-lg:
        0 25px 70px rgba(31, 23, 45, 0.11);
}


/* =========================================================
   RESET
   ========================================================= */

.ctf-home-page,
.ctf-home-page * {
    box-sizing: border-box;
}

.ctf-home-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: var(--ctf-bg);
    color: var(--ctf-text);

    font-family: 'Poppins', sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.ctf-home-page h1,
.ctf-home-page h2,
.ctf-home-page h3,
.ctf-home-page h4,
.ctf-home-page h5,
.ctf-home-page h6,
.ctf-home-page p {
    margin-top: 0;
}

.ctf-home-page img {
    max-width: 100%;
    height: auto;
}

.ctf-home-page button,
.ctf-home-page input,
.ctf-home-page textarea,
.ctf-home-page select {
    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   LINKS
   ========================================================= */

.ctf-home-page a {
    color: inherit;
    text-decoration: none !important;
    border: 0 !important;
}

.ctf-home-page a:hover,
.ctf-home-page a:focus,
.ctf-home-page a:active,
.ctf-home-page a:visited {
    text-decoration: none !important;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ctf-container {
    width: min(
        calc(100% - 48px),
        var(--ctf-container)
    );

    margin-left: auto;
    margin-right: auto;
}

.ctf-narrow {
    max-width: 860px;
}


/* =========================================================
   HERO
   ========================================================= */

.ctf-hero {
    position: relative;

    padding: 92px 0 100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(124, 77, 255, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 25%,
            rgba(255, 173, 31, 0.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid #f0ecf5;
}

.ctf-hero::before {
    content: '';

    position: absolute;

    width: 480px;
    height: 480px;

    left: -260px;
    top: -270px;

    border-radius: 50%;

    background: rgba(124, 77, 255, 0.055);

    filter: blur(5px);

    pointer-events: none;
}

.ctf-hero::after {
    content: '';

    position: absolute;

    width: 380px;
    height: 380px;

    right: -210px;
    bottom: -250px;

    border-radius: 50%;

    background: rgba(255, 173, 31, 0.065);

    pointer-events: none;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.ctf-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);

    align-items: center;

    gap: 78px;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.ctf-hero-content {
    max-width: 620px;
}

.ctf-eyebrow {
    display: inline-flex;

    align-items: center;

    min-height: 31px;

    margin-bottom: 21px;
    padding: 5px 13px;

    border: 1px solid #e1d8ff;
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f8f5ff,
            #fcfaff
        );

    color: var(--ctf-primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.09em;
}

.ctf-hero-content h1 {
    max-width: 650px;

    margin: 0 0 21px;

    color: var(--ctf-heading);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.07;

    font-weight: 700;

    letter-spacing: -0.047em;
}

.ctf-hero-description {
    max-width: 575px;

    margin: 0;

    color: var(--ctf-muted);

    font-size: 15px;

    line-height: 1.85;

    font-weight: 400;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.ctf-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.ctf-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 49px;

    padding: 13px 21px;

    border-radius: 11px;

    font-size: 12px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
}

.ctf-btn span {
    font-size: 15px;
    line-height: 1;
}


/* PRIMARY BUTTON */

.ctf-btn-primary {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #7c4dff,
            #7042ed
        );

    border: 1px solid #7c4dff !important;

    box-shadow:
        0 9px 25px rgba(124, 77, 255, 0.21);
}

.ctf-btn-primary:hover {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #6338df,
            #5b32cf
        );

    border-color: #6338df !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(124, 77, 255, 0.28);
}


/* SECONDARY BUTTON */

.ctf-btn-secondary {
    color: var(--ctf-heading) !important;

    background: #fff;

    border: 1px solid #ddd8e5 !important;

    box-shadow:
        0 3px 10px rgba(24, 24, 27, 0.025);
}

.ctf-btn-secondary:hover {
    color: #fff !important;

    background: var(--ctf-orange);

    border-color: var(--ctf-orange) !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 27px rgba(245, 158, 11, 0.20);
}


/* =========================================================
   TRUST
   ========================================================= */

.ctf-hero-trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;

    margin-top: 22px;

    color: #8b8593;

    font-size: 10px;

    font-weight: 400;
}

.ctf-hero-trust span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


/* =========================================================
   HERO PREVIEW
   ========================================================= */

.ctf-hero-preview {
    position: relative;

    width: 100%;
    max-width: 505px;

    margin-left: auto;

    background: #fff;

    border: 1px solid #e6e1ed;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 28px 75px rgba(50, 38, 91, 0.13);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ctf-hero-preview:hover {
    transform: translateY(-4px);

    box-shadow:
        0 34px 85px rgba(50, 38, 91, 0.16);
}

.ctf-hero-preview::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c4dff,
            #9b72ff,
            #ffad1f
        );
}


/* =========================================================
   PREVIEW HEADER
   ========================================================= */

.ctf-preview-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 21px;

    border-bottom: 1px solid #f0edf3;
}

.ctf-preview-title {
    display: flex;

    align-items: center;

    gap: 11px;
}

.ctf-preview-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 11px;

    background: #f4f0ff;

    border: 1px solid #e2d8ff;

    color: var(--ctf-primary);

    font-size: 14px;

    font-weight: 700;
}

.ctf-preview-title strong {
    display: block;

    color: var(--ctf-heading);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;
}

.ctf-preview-title small {
    display: block;

    margin-top: 2px;

    color: #a09aa8;

    font-size: 9px;

    font-weight: 400;
}


/* =========================================================
   LIVE BADGE
   ========================================================= */

.ctf-live-badge {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #ecfdf5;

    color: #059669;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.06em;
}

.ctf-live-badge::before {
    content: '';

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #10b981;

    box-shadow:
        0 0 0 3px rgba(16, 185, 129, 0.10);
}


/* =========================================================
   PREVIEW BODY
   ========================================================= */

.ctf-preview-body {
    padding: 23px;
}

.ctf-preview-body label {
    display: block;

    margin-bottom: 7px;

    color: #595360;

    font-size: 10px;

    font-weight: 600;
}

.ctf-preview-input {
    display: flex;

    align-items: center;

    min-height: 47px;

    padding: 10px 13px;

    margin-bottom: 20px;

    color: #57515d;

    background: #fbfafc;

    border: 1px solid #e3e0e8;

    border-radius: 10px;

    font-size: 12px;
}


/* =========================================================
   PREVIEW LABEL ROW
   ========================================================= */

.ctf-preview-label-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;
}

.ctf-preview-label-row span:first-child {
    color: #595360;

    font-size: 10px;

    font-weight: 600;
}

.ctf-preview-label-row span:last-child {
    color: var(--ctf-primary);

    font-size: 9px;

    font-weight: 500;
}


/* =========================================================
   STYLE OPTIONS
   ========================================================= */

.ctf-style-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.ctf-style-option {
    display: flex;

    align-items: center;

    min-height: 49px;

    padding: 9px 11px;

    background: #fff;

    border: 1px solid #e5e2e9;

    border-radius: 9px;

    color: #403a48;

    font-size: 12px;

    font-weight: 500;

    overflow: hidden;

    white-space: nowrap;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.ctf-style-option:hover {
    border-color: #d2c6ea;

    background: #fcfaff;

    transform: translateY(-1px);
}

.ctf-style-option.active {
    color: var(--ctf-primary);

    background:
        linear-gradient(
            135deg,
            #f8f5ff,
            #fcfaff
        );

    border-color: #d8ccf5;
}


/* =========================================================
   GENERATED RESULT
   ========================================================= */

.ctf-generated-result {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 18px;

    padding: 13px;

    background:
        linear-gradient(
            135deg,
            #f8f5ff,
            #fffdf8
        );

    border: 1px solid #e6dff3;

    border-radius: 11px;
}

.ctf-generated-result small {
    display: block;

    margin-bottom: 4px;

    color: #9d97a5;

    font-size: 8px;

    font-weight: 500;
}

.ctf-generated-result strong {
    display: block;

    color: #302b36;

    font-size: 14px;

    font-weight: 500;
}

.ctf-generated-result button {
    flex-shrink: 0;

    min-height: 34px;

    padding: 7px 12px;

    border: 0;

    border-radius: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c4dff,
            #7042ed
        );

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ctf-generated-result button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(124, 77, 255, 0.22);
}


/* =========================================================
   FEATURES
   ========================================================= */

.ctf-features {
    padding: 28px 0;

    background: #fff;

    border-bottom: 1px solid #f0edf3;
}

.ctf-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.ctf-feature {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;

    padding: 8px 25px;

    border-right: 1px solid #eeeeF1;
}

.ctf-feature:first-child {
    padding-left: 0;
}

.ctf-feature:last-child {
    padding-right: 0;

    border-right: none;
}

.ctf-feature-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;
}

.ctf-feature-icon.purple {
    color: #7c3aed;
    background: #f5f3ff;
}

.ctf-feature-icon.blue {
    color: #2563eb;
    background: #eff6ff;
}

.ctf-feature-icon.orange {
    color: #d97706;
    background: #fff7e6;
}

.ctf-feature-icon.green {
    color: #059669;
    background: #ecfdf5;
}

.ctf-feature h3 {
    margin: 0 0 3px;

    color: var(--ctf-heading);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;
}

.ctf-feature p {
    margin: 0;

    color: #85808d;

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================================
   INTRO
   ========================================================= */

.ctf-intro {
    padding: 110px 0 82px;

    text-align: center;
}

.ctf-intro .ctf-section-label {
    margin-bottom: 12px;
}

.ctf-intro h2 {
    max-width: 750px;

    margin: 0 auto 19px;

    color: var(--ctf-heading);

    font-size:
        clamp(30px, 4vw, 43px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.038em;
}

.ctf-intro p {
    max-width: 790px;

    margin: 0 auto;

    color: var(--ctf-muted);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.ctf-section-label {
    display: inline-block;

    color: var(--ctf-primary);

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.ctf-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 45px;

    margin-bottom: 37px;
}

.ctf-section-heading h2 {
    margin: 7px 0 0;

    color: var(--ctf-heading);

    font-size:
        clamp(29px, 4vw, 41px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.038em;
}

.ctf-section-heading > p {
    max-width: 400px;

    margin: 0;

    color: var(--ctf-muted);

    font-size: 13px;

    line-height: 1.75;
}

.ctf-section-heading.ctf-centered {
    display: block;

    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.ctf-section-heading.ctf-centered > p {
    max-width: 570px;

    margin: 13px auto 0;
}


/* =========================================================
   TOOLS SECTION
   ========================================================= */

.ctf-tools {
    padding: 27px 0 108px;
}

.ctf-tool-category {
    margin-top: 52px;
}

.ctf-tool-category:first-of-type {
    margin-top: 0;
}

.ctf-category-heading {
    margin-bottom: 19px;
}

.ctf-category-heading h3 {
    margin: 0 0 4px;

    color: var(--ctf-heading);

    font-size: 18px;

    font-weight: 700;

    letter-spacing: -0.015em;
}

.ctf-category-heading p {
    margin: 0;

    color: var(--ctf-muted);

    font-size: 12px;
}


/* =========================================================
   TOOL GRID
   ========================================================= */

.ctf-tool-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 17px;
}


/* =========================================================
   TOOL CARD
   ========================================================= */

.ctf-tool-card {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-height: 258px;

    padding: 24px;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--ctf-border-light);

    border-radius: 17px;

    box-shadow: var(--ctf-shadow-sm);

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.ctf-tool-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--tool-color, #7c4dff),
            #a78bfa
        );

    opacity: 0;

    transition: opacity 0.22s ease;
}

.ctf-tool-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--ctf-shadow);

    border-color: #ddd7e8;
}

.ctf-tool-card:hover::before {
    opacity: 1;
}


/* =========================================================
   TOOL ICON
   ========================================================= */

.ctf-tool-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        var(
            --tool-bg,
            var(--ctf-purple-bg)
        );

    border: 1px solid
        var(
            --tool-border,
            #e4d9ff
        );

    color:
        var(
            --tool-color,
            var(--ctf-primary)
        );

    font-size: 16px;

    font-weight: 600;

    transition:
        transform 0.22s ease;
}

.ctf-tool-card:hover .ctf-tool-icon {
    transform: scale(1.04);
}

.ctf-tool-content {
    flex: 1;
}

.ctf-tool-content h3 {
    margin: 0 0 8px;

    color: var(--ctf-heading);

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}

.ctf-tool-content p {
    margin: 0;

    color: var(--ctf-muted);

    font-size: 12px;

    line-height: 1.7;
}

.ctf-tool-link {
    display: inline-flex;

    align-items: center;

    margin-top: 18px;

    color:
        var(
            --tool-color,
            var(--ctf-primary)
        );

    font-size: 11px;

    font-weight: 600;

    transition:
        transform 0.2s ease;
}

.ctf-tool-card:hover .ctf-tool-link {
    transform: translateX(3px);
}


/* =========================================================
   TOOL COLORS
   ========================================================= */

.ctf-tool-purple {
    --tool-color: #7c3aed;
    --tool-bg: #f5f3ff;
    --tool-border: #ddd6fe;
}

.ctf-tool-blue {
    --tool-color: #2563eb;
    --tool-bg: #eff6ff;
    --tool-border: #bfdbfe;
}

.ctf-tool-pink {
    --tool-color: #db2777;
    --tool-bg: #fdf2f8;
    --tool-border: #fbcfe8;
}

.ctf-tool-cyan {
    --tool-color: #0891b2;
    --tool-bg: #ecfeff;
    --tool-border: #a5f3fc;
}


/* =========================================================
   COMING SOON
   ========================================================= */

.ctf-coming-card {
    --tool-color: #f59e0b;
    --tool-bg: #fff7ed;
    --tool-border: #fed7aa;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf2
        );

    border-color: #f3e3cc;
}

.ctf-coming-label {
    display: inline-flex;

    align-items: center;

    margin-top: 17px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #fff7ed;

    border: 1px solid #fed7aa;

    color: #d97706;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* =========================================================
   WHY SECTION
   ========================================================= */

.ctf-why {
    padding: 100px 0;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(124, 77, 255, 0.07),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f8f6ff,
            #ffffff 70%
        );

    border-top: 1px solid #eeeaf7;

    border-bottom: 1px solid #eeeaf7;
}

.ctf-why-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 82px;
}

.ctf-why-content {
    max-width: 575px;
}

.ctf-why-content h2 {
    margin: 9px 0 18px;

    color: var(--ctf-heading);

    font-size:
        clamp(30px, 4vw, 41px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.038em;
}

.ctf-why-content p {
    margin: 0 0 14px;

    color: var(--ctf-muted);

    font-size: 13px;

    line-height: 1.88;
}

.ctf-why-content .ctf-btn {
    margin-top: 12px;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.ctf-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.ctf-benefit-card {
    padding: 22px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid var(--ctf-border-light);

    border-radius: 15px;

    box-shadow: var(--ctf-shadow-sm);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.ctf-benefit-card:hover {
    transform: translateY(-3px);

    border-color: #ddd5ea;

    box-shadow: var(--ctf-shadow);
}

.ctf-benefit-number {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--ctf-primary);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.09em;
}

.ctf-benefit-card h3 {
    margin: 0 0 7px;

    color: var(--ctf-heading);

    font-size: 14px;

    line-height: 1.45;

    font-weight: 700;
}

.ctf-benefit-card p {
    margin: 0;

    color: var(--ctf-muted);

    font-size: 11px;

    line-height: 1.68;
}


/* =========================================================
   ABOUT SECTION
   ========================================================= */

.ctf-about {
    padding: 105px 0;

    background: #fff;
}

.ctf-about h2 {
    margin: 8px 0 25px;

    color: var(--ctf-heading);

    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.035em;
}

.ctf-about h3 {
    margin: 38px 0 12px;

    color: var(--ctf-heading);

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;
}

.ctf-about p {
    margin: 0 0 18px;

    color: #625d68;

    font-size: 13px;

    line-height: 1.92;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.ctf-how {
    padding: 108px 0;
}

.ctf-steps {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.ctf-step {
    position: relative;

    padding: 30px;

    background: #fff;

    border: 1px solid var(--ctf-border-light);

    border-radius: 17px;

    box-shadow: var(--ctf-shadow-sm);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.ctf-step:hover {
    transform: translateY(-4px);

    box-shadow: var(--ctf-shadow);
}

.ctf-step-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f5f1ff,
            #faf8ff
        );

    border: 1px solid #ded3f7;

    color: var(--ctf-primary);

    font-size: 10px;

    font-weight: 700;
}

.ctf-step h3 {
    margin: 0 0 8px;

    color: var(--ctf-heading);

    font-size: 16px;

    font-weight: 700;
}

.ctf-step p {
    margin: 0;

    color: var(--ctf-muted);

    font-size: 12px;

    line-height: 1.78;
}


/* =========================================================
   USE CASES
   ========================================================= */

.ctf-use-cases {
    padding: 102px 0 108px;

    background:
        linear-gradient(
            180deg,
            #fafafc,
            #f8f7fa
        );

    border-top: 1px solid #f0edf3;

    border-bottom: 1px solid #f0edf3;
}

.ctf-use-cases > .ctf-container {
    max-width: 950px;
}

.ctf-use-cases h2 {
    margin: 8px 0 27px;

    color: var(--ctf-heading);

    font-size:
        clamp(30px, 4vw, 41px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.038em;
}

.ctf-use-cases h3 {
    margin: 39px 0 11px;

    color: var(--ctf-heading);

    font-size: 19px;

    line-height: 1.4;

    font-weight: 700;
}

.ctf-use-cases p {
    margin: 0 0 16px;

    color: #625d68;

    font-size: 13px;

    line-height: 1.92;
}


/* =========================================================
   FAQ
   ========================================================= */

.ctf-faq {
    padding: 108px 0;
}

.ctf-faq-container {
    max-width: 900px;
}

.ctf-faq-list {
    margin-top: 41px;
}

.ctf-faq details {
    margin-bottom: 10px;

    background: #fff;

    border: 1px solid var(--ctf-border-light);

    border-radius: 13px;

    overflow: hidden;

    box-shadow: var(--ctf-shadow-sm);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ctf-faq details:hover {
    border-color: #ddd6e8;
}

.ctf-faq details[open] {
    border-color: #d8cdf0;

    box-shadow:
        0 9px 27px rgba(24, 24, 27, 0.065);
}

.ctf-faq summary {
    position: relative;

    display: block;

    padding: 20px 57px 20px 22px;

    color: var(--ctf-heading);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.5;

    cursor: pointer;

    list-style: none;
}

.ctf-faq summary::-webkit-details-marker {
    display: none;
}

.ctf-faq summary::after {
    content: '+';

    position: absolute;

    right: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--ctf-primary);

    font-size: 20px;

    font-weight: 400;
}

.ctf-faq details[open] summary::after {
    content: '−';
}

.ctf-faq details p {
    margin: 0;

    padding: 0 22px 22px;

    color: var(--ctf-muted);

    font-size: 12px;

    line-height: 1.82;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.ctf-final-cta {
    padding: 0 0 90px;
}

.ctf-final-box {
    position: relative;

    overflow: hidden;

    padding: 70px 35px;

    text-align: center;

    background:
        radial-gradient(
            circle at 12% 100%,
            rgba(124, 77, 255, 0.14),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 0%,
            rgba(255, 173, 31, 0.15),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #f5f1ff,
            #fff9ec
        );

    border: 1px solid #e6dff0;

    border-radius: 26px;

    box-shadow:
        0 18px 50px rgba(61, 42, 91, 0.055);
}

.ctf-final-box::before {
    content: '';

    position: absolute;

    width: 240px;
    height: 240px;

    top: -150px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(124, 77, 255, 0.06);

    filter: blur(4px);

    pointer-events: none;
}

.ctf-final-box h2 {
    position: relative;
    z-index: 1;

    max-width: 670px;

    margin: 10px auto 14px;

    color: var(--ctf-heading);

    font-size:
        clamp(30px, 4vw, 44px);

    line-height: 1.17;

    font-weight: 700;

    letter-spacing: -0.038em;
}

.ctf-final-box p {
    position: relative;
    z-index: 1;

    max-width: 610px;

    margin: 0 auto 27px;

    color: var(--ctf-muted);

    font-size: 13px;

    line-height: 1.82;
}

.ctf-final-box .ctf-btn {
    position: relative;
    z-index: 1;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ctf-home-page a:focus-visible,
.ctf-home-page button:focus-visible,
.ctf-home-page summary:focus-visible {
    outline:
        3px solid rgba(124, 77, 255, 0.20);

    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .ctf-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        gap: 45px;
    }

    .ctf-tool-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ctf-feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 22px;
    }

    .ctf-feature {
        padding: 7px 20px;
    }

    .ctf-feature:nth-child(2) {
        border-right: none;
    }

    .ctf-feature:nth-child(3) {
        padding-left: 0;
    }

    .ctf-why-grid {
        gap: 50px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 820px) {

    .ctf-container {
        width:
            min(
                calc(100% - 34px),
                700px
            );
    }

    .ctf-hero {
        padding: 65px 0 75px;
    }

    .ctf-hero-grid {
        grid-template-columns: 1fr;

        gap: 47px;
    }

    .ctf-hero-content {
        max-width: 680px;

        margin: 0 auto;

        text-align: center;
    }

    .ctf-hero-content h1,
    .ctf-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .ctf-hero-actions {
        justify-content: center;
    }

    .ctf-hero-trust {
        justify-content: center;
    }

    .ctf-hero-preview {
        max-width: 520px;

        margin: 0 auto;
    }

    .ctf-section-heading {
        display: block;
    }

    .ctf-section-heading > p {
        max-width: 600px;

        margin-top: 13px;
    }

    .ctf-why-grid {
        grid-template-columns: 1fr;

        gap: 43px;
    }

    .ctf-why-content {
        max-width: 700px;
    }

    .ctf-steps {
        grid-template-columns: 1fr;
    }

    .ctf-intro {
        padding: 82px 0 67px;
    }

    .ctf-tools {
        padding-bottom: 82px;
    }

    .ctf-how,
    .ctf-faq {
        padding: 83px 0;
    }

    .ctf-about {
        padding: 83px 0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ctf-container {
        width: calc(100% - 28px);
    }


    /* HERO */

    .ctf-hero {
        padding: 45px 0 57px;
    }

    .ctf-hero-grid {
        gap: 36px;
    }

    .ctf-eyebrow {
        margin-bottom: 16px;

        font-size: 9px;
    }

    .ctf-hero-content h1 {
        font-size: 36px;

        line-height: 1.09;

        letter-spacing: -0.042em;
    }

    .ctf-hero-description {
        font-size: 13px;

        line-height: 1.78;
    }

    .ctf-hero-actions {
        flex-direction: column;

        width: 100%;

        margin-top: 26px;
    }

    .ctf-hero-actions .ctf-btn {
        width: 100%;
    }

    .ctf-hero-trust {
        gap: 10px 14px;

        font-size: 9px;
    }


    /* PREVIEW */

    .ctf-hero-preview {
        border-radius: 18px;
    }

    .ctf-preview-header {
        padding: 16px;
    }

    .ctf-preview-body {
        padding: 17px;
    }

    .ctf-style-options {
        grid-template-columns: 1fr;
    }

    .ctf-style-option {
        min-height: 44px;
    }


    /* FEATURES */

    .ctf-features {
        padding: 21px 0;
    }

    .ctf-feature-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .ctf-feature,
    .ctf-feature:nth-child(3) {
        padding: 0;

        border-right: none;
    }

    .ctf-feature {
        align-items: center;
    }


    /* INTRO */

    .ctf-intro {
        padding: 72px 0 57px;
    }

    .ctf-intro h2 {
        font-size: 29px;
    }

    .ctf-intro p {
        font-size: 13px;
    }


    /* SECTION */

    .ctf-section-heading h2 {
        font-size: 29px;
    }


    /* TOOLS */

    .ctf-tools {
        padding: 17px 0 72px;
    }

    .ctf-tool-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .ctf-tool-category {
        margin-top: 41px;
    }

    .ctf-tool-card {
        min-height: 228px;

        padding: 21px;
    }


    /* WHY */

    .ctf-why {
        padding: 72px 0;
    }

    .ctf-why-content h2 {
        font-size: 29px;
    }

    .ctf-benefit-grid {
        grid-template-columns: 1fr;
    }


    /* ABOUT */

    .ctf-about {
        padding: 72px 0;
    }

    .ctf-about h2 {
        font-size: 29px;
    }

    .ctf-about h3 {
        font-size: 18px;

        margin-top: 33px;
    }

    .ctf-about p {
        font-size: 13px;

        line-height: 1.87;
    }


    /* HOW */

    .ctf-how {
        padding: 72px 0;
    }

    .ctf-step {
        padding: 25px;
    }


    /* USE CASES */

    .ctf-use-cases {
        padding: 72px 0;
    }

    .ctf-use-cases h2 {
        font-size: 29px;
    }

    .ctf-use-cases h3 {
        margin-top: 33px;

        font-size: 18px;
    }

    .ctf-use-cases p {
        font-size: 13px;

        line-height: 1.87;
    }


    /* FAQ */

    .ctf-faq {
        padding: 72px 0;
    }

    .ctf-faq-list {
        margin-top: 31px;
    }

    .ctf-faq summary {
        padding: 17px 48px 17px 18px;

        font-size: 12px;
    }

    .ctf-faq details p {
        padding: 0 18px 18px;

        font-size: 11px;
    }


    /* CTA */

    .ctf-final-cta {
        padding-bottom: 57px;
    }

    .ctf-final-box {
        padding: 47px 20px;

        border-radius: 20px;
    }

    .ctf-final-box h2 {
        font-size: 29px;
    }

    .ctf-final-box p {
        font-size: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .ctf-container {
        width: calc(100% - 22px);
    }

    .ctf-hero-content h1 {
        font-size: 33px;
    }

    .ctf-preview-title strong {
        font-size: 11px;
    }

    .ctf-generated-result strong {
        font-size: 13px;
    }

    .ctf-tool-card {
        min-height: 217px;

        padding: 19px;
    }

    .ctf-final-box {
        padding: 41px 17px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .ctf-home-page *,
    .ctf-home-page *::before,
    .ctf-home-page *::after {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}/* End custom CSS */