/* Container */
.ct-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ct-heading {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

/* Hero */
.ct-hero {
    position: relative;
    height: 70vh;
    background: var(--bg-hero-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 5rem;
}

.ct-hero-bg .ct-blob {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    filter: blur(40px);
    opacity: .1;
    width: 120px;
    height: 120px;
    top: 80px;
    left: 80px;
    animation: float 8s infinite;
}

.ct-hero-bg .ct-delay-2 {
    width: 192px;
    height: 192px;
    bottom: 160px;
    right: 128px;
    animation-delay: -2s;
}

.ct-hero-bg .ct-delay-4 {
    width: 96px;
    height: 96px;
    top: 50%;
    left: 33%;
    background: var(--brand-teal);
    opacity: .15;
    animation-delay: -4s;
}

.ct-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
}

.ct-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ct-sub {
    font-size: 1.3rem;
    opacity: .9;
    margin-bottom: 1rem;
}

.ct-desc {
    max-width: 600px;
    margin: 0 auto;
    opacity: .8;
}

/* Methods */
.ct-methods {
    background: var(--bg);
    padding: 4rem 0;
}

.ct-method-grid {
    display: grid;
    grid-template-columns: 1fr; /* mobile: 1 column */
    gap: 2rem;
}

@media (min-width: 768px) {
    .ct-method-grid {
        grid-template-columns: repeat(3, 1fr); /* tablet+ : max 3 columns */
    }
}


.ct-method-card {
    background: var(--bg-soft);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform .2s;
}

    .ct-method-card:hover {
        transform: translateY(-6px);
    }

.ct-method-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
}

.ct-grad-blue {
    background: linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
}

.ct-grad-teal {
    background: linear-gradient(135deg,var(--brand-teal),var(--brand-blue));
}

.ct-grad-purple {
    background: linear-gradient(135deg,var(--brand-purple),var(--brand-teal));
}

/* Form */
.ct-form {
    background: var(--bg-soft);
    padding: 5rem 0;
    position: relative;
}

.ct-form-bg::before, .ct-form-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .08;
}

.ct-form-bg::before {
    width: 160px;
    height: 160px;
    top: 20%;
    right: 20%;
    background: var(--brand-blue);
}

.ct-form-bg::after {
    width: 220px;
    height: 220px;
    bottom: 15%;
    left: 20%;
    background: var(--brand-purple);
}

.ct-form-box {
    background: var(--elev);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}

    .ct-form-box form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .ct-form-box label {
        font-size: .9rem;
        font-weight: 500;
        margin-bottom: .3rem;
        color: var(--text);
        display: block;
    }

    .ct-form-box input, .ct-form-box select, .ct-form-box textarea {
        width: 100%;
        padding: .75rem 1rem;
        border: 1px solid var(--border);
        border-radius: .75rem;
        font-size: .95rem;
    }

        .ct-form-box input:focus, .ct-form-box select:focus, .ct-form-box textarea:focus {
            border-color: var(--brand-purple);
            outline: none;
            box-shadow: 0 0 0 3px rgba(118,75,162,.2);
        }

.ct-grid-2 {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1rem;
}

@media (min-width: 768px) {
    .ct-grid-2 {
        grid-template-columns: repeat(2, 1fr); 
    }
}


.ct-btn {
    background: var(--bg-hero-gradient);
    border: none;
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .2s, box-shadow .2s;
    width: 100%;
}

    .ct-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0,0,0,.2);
    }

/* Social */
.ct-social {
    background: var(--bg);
    padding: 5rem 0;
}

.ct-social-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.ct-social-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform .2s;
}

    .ct-social-icon:hover {
        transform: scale(1.1);
    }

.ct-linkedin {
    background: linear-gradient(135deg,#0a66c2,#004182);
}

.ct-github {
    background: linear-gradient(135deg,#333,#000);
}

.ct-x {
    background: linear-gradient(135deg,#000,#333);
}

.ct-youtube {
    background: linear-gradient(135deg,#ff0000,#cc0000);
}

.ct-direct-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 2rem;
}

@media (min-width: 768px) {
    .ct-direct-grid {
        grid-template-columns: 1fr 1fr; 
    }
}


.ct-direct-card {
    background: var(--bg-soft);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.ct-direct-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0 auto 1rem;
}

.ct-blue {
    background: var(--brand-blue);
}

.ct-purple {
    background: var(--brand-purple);
}

/* Animations */
@keyframes float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}


/* Wrap the dots */
.ct-loader {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

/* Each dot */
.ct-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    animation: ct-pulse 1.4s infinite ease-in-out both;
}

    /* Stagger the animation for each dot */
    .ct-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .ct-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    .ct-dot:nth-child(3) {
        animation-delay: 0s;
    }

@keyframes ct-pulse {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}