/* ==========================================================================
   PROFENAA TECHNOLOGIES
   CONTACT PAGE
   FULL RESPONSIVE CSS
   Desktop → Laptop → Tablet → Mobile
   Clean White Background
   ========================================================================== */


/* ==========================================================================
   ROOT / GLOBAL SAFETY
   ========================================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: #ffffff !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   MAIN PAGE BACKGROUND
   ========================================================================== */

main {
    width: 100%;
    background: #ffffff !important;
}

.contact-section,
.faq-section {
    width: 100%;
    background: #ffffff !important;
}


/* ==========================================================================
   MEDIA SAFETY
   ========================================================================== */

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}


/* ==========================================================================
   PARTICLE FIELD
   ========================================================================== */

#particle-field {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    max-width: 100%;
    max-height: 100%;

    pointer-events: none;

    background: transparent !important;

    /*
       Completely clean white background.
       Change to .10 if you want very subtle particles.
    */
    opacity: 0 !important;

    z-index: -1;
}


/* ==========================================================================
   CURSOR GLOW
   ========================================================================== */

#cursor-glow {
    position: fixed;

    max-width: 100%;

    pointer-events: none;
}


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

.page-hero {
    position: relative;

    width: 100%;

    padding-top:
        calc(
            var(--nav-h, 80px)
            + var(--sp-8, 64px)
        );

    padding-bottom:
        var(--sp-6, 48px);

    background:
        var(--grad-hero,
        linear-gradient(
            135deg,
            #0e1330 0%,
            #161c42 55%,
            #212eae 100%
        ));

    overflow: hidden;
}


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

.page-hero .container {
    position: relative;

    z-index: 2;
}


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

.page-hero .eyebrow {
    display: inline-block;

    margin: 0 0 var(--sp-3, 12px);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(
            --blue-400,
            #4fa3ff
        );
}


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

.page-hero h1 {
    max-width: 22ch;

    margin:
        0 0
        var(--sp-4, 16px);

    font-family:
        'Space Grotesk',
        'Catamaran',
        sans-serif;

    font-size:
        clamp(
            2.1rem,
            4.5vw,
            3.5rem
        );

    font-weight: 700;

    line-height: 1.12;

    color:
        var(
            --white,
            #ffffff
        );
}


/* ==========================================================================
   GRADIENT TEXT
   ========================================================================== */

.text-grad {
    background:
        var(
            --grad-brand,
            linear-gradient(
                100deg,
                #4fa3ff,
                #f5a623
            )
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


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

.page-hero-sub {
    max-width: 60ch;

    margin: 0;

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

    font-size: 1.05rem;

    line-height: 1.7;

    /* color:
        rgba(
            255,
            255,
            255,
            0.88
        ); */
}


/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.contact-section {
    padding:
        var(--sp-8, 80px)
        0;
}


/* ==========================================================================
   CONTACT GRID
   ========================================================================== */

.contact-grid {
    display: grid;

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

    gap:
        var(--sp-7, 56px);

    align-items: start;
}


/* ==========================================================================
   CONTACT HEADINGS
   ========================================================================== */

.contact-form-wrap h2,
.contact-info h2 {
    margin:
        0 0
        var(--sp-5, 32px);

    font-family:
        'Space Grotesk',
        'Catamaran',
        sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.3;

    color:
        #212eae;
}


/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.contact-form {
    display: flex;

    flex-direction: column;

    gap:
        var(--sp-4, 20px);

    width: 100%;

    padding:
        var(--sp-6, 40px);

    background: #ffffff;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        var(--r-lg, 20px);

    box-shadow:
        0 10px 35px
        rgba(
            14,
            19,
            48,
            0.08
        );
}


/* ==========================================================================
   FORM ROW
   ========================================================================== */

.field-row {
    display: grid;

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

    gap:
        var(--sp-4, 20px);
}


/* ==========================================================================
   FORM LABEL
   ========================================================================== */

.contact-form label {
    display: flex;

    flex-direction: column;

    gap: 0.45rem;

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

    font-size: 0.85rem;

    font-weight: 600;

    line-height: 1.4;

    color:
        var(
            --ink-900,
            #16182b
        );
}


/* ==========================================================================
   INPUT / SELECT / TEXTAREA
   ========================================================================== */

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    min-width: 0;

    padding:
        0.78rem
        0.9rem;

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

    font-size: 0.92rem;

    font-weight: 400;

    line-height: 1.5;

    color:
        var(
            --ink-900,
            #16182b
        );

    background:
        #ffffff;

    border:
        1px solid
        #dfe3ea;

    border-radius:
        var(
            --r-md,
            10px
        );

    outline: none;

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


/* ==========================================================================
   PLACEHOLDER
   ========================================================================== */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9ca3af;

    opacity: 1;
}


/* ==========================================================================
   INPUT FOCUS
   ========================================================================== */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;

    background: #ffffff;

    border-color:
        var(
            --blue-400,
            #4fa3ff
        );

    box-shadow:
        0 0 0 3px
        rgba(
            79,
            163,
            255,
            0.14
        );
}


/* ==========================================================================
   TEXTAREA
   ========================================================================== */

.contact-form textarea {
    min-height: 120px;

    resize: vertical;
}


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

.contact-form .btn-block {
    width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    min-height: 48px;
}


/* ==========================================================================
   SEND BUTTON ICON
   ========================================================================== */

.contact-form .btn-block svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;
}


/* ==========================================================================
   FORM SUCCESS
   ========================================================================== */

.form-success {
    display: none;

    margin: 0;

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

    font-size: 0.85rem;

    font-weight: 600;

    line-height: 1.5;

    color: #258a72;

    text-align: center;
}


.form-success.is-visible {
    display: block;
}


/* ==========================================================================
   CONTACT INFORMATION
   ========================================================================== */

.contact-info {
    min-width: 0;
}


/* ==========================================================================
   INFORMATION LIST
   ========================================================================== */

.info-list {
    display: flex;

    flex-direction: column;

    gap:
        var(--sp-4, 20px);

    margin:
        0 0
        var(--sp-5, 32px);

    padding: 0;

    list-style: none;
}


/* ==========================================================================
   INFORMATION ITEM
   ========================================================================== */

.info-list li {
    display: flex;

    align-items: flex-start;

    gap:
        var(--sp-3, 14px);

    min-width: 0;
}


/* ==========================================================================
   INFORMATION ICON
   ========================================================================== */

.info-icon {
    flex:
        0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(
            --grad-brand,
            linear-gradient(
                135deg,
                #212eae,
                #4fa3ff
            )
        );

    color:
        var(
            --white,
            #ffffff
        );
}


.info-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================================
   INFORMATION TEXT
   ========================================================================== */

.info-list li > div {
    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    min-width: 0;
}


.info-list li strong {
    font-family:
        'Inter',
        sans-serif;

    font-size: 0.88rem;

    font-weight: 700;

    color:
        var(
            --ink-900,
            #16182b
        );
}


.info-list li div > span {
    font-family:
        'Inter',
        sans-serif;

    font-size: 0.87rem;

    line-height: 1.55;

    color:
        var(
            --ink-300,
            #626b7d
        );

    overflow-wrap: anywhere;
}


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

.contact-info .btn-amber {
    width: 100%;

    min-height: 48px;

    margin:
        0 0
        var(--sp-5, 32px);

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


/* ==========================================================================
   MAP
   ========================================================================== */

.map-frame {
    width: 100%;

    overflow: hidden;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        var(--r-lg, 20px);

    background: #ffffff;

    box-shadow:
        0 8px 25px
        rgba(
            14,
            19,
            48,
            0.07
        );
}


.map-frame iframe {
    display: block;

    width: 100%;

    max-width: 100%;

    height: 260px;

    border: 0;
}


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

.faq-section {
    padding:
        var(--sp-8, 80px)
        0;
}


/* ==========================================================================
   FAQ SECTION HEAD
   ========================================================================== */

.section-head {
    max-width: 760px;

    margin:
        0 auto
        var(--sp-7, 56px);

    text-align: center;
}


.section-head .eyebrow {
    display: block;

    margin:
        0 0
        var(--sp-3, 12px);

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

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(
            --blue-400,
            #4fa3ff
        );
}


.section-head h2 {
    margin: 0;

    font-family:
        'Space Grotesk',
        'Catamaran',
        sans-serif;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.4rem
        );

    font-weight: 700;

    line-height: 1.25;

    color:
        var(
            --ink-900,
            #16182b
        );
}


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

.faq-list {
    display: flex;

    flex-direction: column;

    gap:
        var(--sp-3, 14px);

    max-width: 760px;

    margin-inline: auto;
}


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

.faq-item {
    background: #ffffff;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        var(--r-lg, 20px);

    padding:
        var(--sp-4, 20px)
        var(--sp-5, 28px);

    box-shadow:
        0 6px 20px
        rgba(
            14,
            19,
            48,
            0.05
        );

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


.faq-item:hover {
    border-color:
        rgba(
            33,
            46,
            174,
            0.25
        );

    box-shadow:
        0 10px 28px
        rgba(
            14,
            19,
            48,
            0.08
        );
}


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

.faq-item summary {
    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    list-style: none;

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

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.5;

    color:
        var(
            --ink-900,
            #16182b
        );
}


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


/* ==========================================================================
   FAQ PLUS ICON
   ========================================================================== */

.faq-item summary::after {
    content: "+";

    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    font-size: 1.3rem;

    font-weight: 400;

    line-height: 1;

    color:
        var(
            --pf-navy-700,
            #212eae
        );

    transition:
        transform 0.25s ease;
}


.faq-item[open] summary::after {
    transform: rotate(45deg);
}


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

.faq-item p {
    margin:
        var(--sp-3, 14px)
        0
        0;

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

    font-size: 0.88rem;

    line-height: 1.65;

    color:
        var(
            --ink-300,
            #626b7d
        );
}


/* ==========================================================================
   TABLET — 900px
   ========================================================================== */

@media (max-width: 900px) {

    .contact-grid {
        grid-template-columns: 1fr;

        gap:
            var(--sp-7, 48px);
    }


    .contact-info {
        width: 100%;
    }


    .contact-form-wrap,
    .contact-info {
        max-width: 850px;

        margin-inline: auto;

        width: 100%;
    }


    .page-hero h1 {
        max-width: 24ch;
    }
}


/* ==========================================================================
   TABLET — 768px
   ========================================================================== */

@media (max-width: 768px) {

    .page-hero {
        padding-top:
            calc(
                var(--nav-h, 80px)
                + 48px
            );

        padding-bottom: 48px;
    }


    .page-hero h1 {
        font-size:
            clamp(
                2rem,
                6vw,
                2.8rem
            );
    }


    .page-hero-sub {
        font-size: 1rem;
    }


    .contact-section,
    .faq-section {
        padding-top: 56px;

        padding-bottom: 56px;
    }


    .section-head {
        margin-bottom: 36px;
    }


    .contact-form {
        padding: 30px;
    }
}


/* ==========================================================================
   MOBILE — 560px
   ========================================================================== */

@media (max-width: 560px) {

    :root {
        --pf-gutter: 18px;
    }


    .page-hero {
        padding-top:
            calc(
                var(--nav-h, 76px)
                + 42px
            );

        padding-bottom: 42px;
    }


    .page-hero .eyebrow {
        font-size: 0.72rem;
    }


    .page-hero h1 {
        max-width: none;

        font-size: 1.85rem;

        line-height: 1.18;
    }


    .page-hero-sub {
        font-size: 0.94rem;

        line-height: 1.6;
    }


    .contact-section,
    .faq-section {
        padding-top: 48px;

        padding-bottom: 48px;
    }


    .contact-form-wrap h2,
    .contact-info h2 {
        font-size: 1.3rem;

        margin-bottom: 22px;
    }


    .field-row {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .contact-form {
        padding: 22px 18px;

        border-radius: 16px;
    }


    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 0.9rem;
    }


    .info-list {
        gap: 18px;
    }


    .info-icon {
        width: 40px;
        height: 40px;
    }


    .info-list li div > span {
        font-size: 0.84rem;
    }


    .map-frame iframe {
        height: 240px;
    }


    .section-head h2 {
        font-size: 1.75rem;
    }


    .faq-item {
        padding:
            17px
            18px;

        border-radius: 16px;
    }


    .faq-item summary {
        font-size: 0.9rem;

        gap: 12px;
    }


    .faq-item p {
        font-size: 0.84rem;
    }
}


/* ==========================================================================
   SMALL MOBILE — 400px
   ========================================================================== */

@media (max-width: 400px) {

    .page-hero {
        padding-top:
            calc(
                var(--nav-h, 72px)
                + 34px
            );

        padding-bottom: 36px;
    }


    .page-hero h1 {
        font-size: 1.65rem;
    }


    .page-hero-sub {
        font-size: 0.88rem;
    }


    .contact-form {
        padding:
            20px
            15px;
    }


    .contact-form .btn-block {
        min-height: 46px;

        font-size: 0.9rem;
    }


    .info-list li {
        gap: 10px;
    }


    .info-icon {
        width: 36px;
        height: 36px;
    }


    .info-icon svg {
        width: 16px;
        height: 16px;
    }


    .info-list li strong {
        font-size: 0.82rem;
    }


    .info-list li div > span {
        font-size: 0.8rem;
    }


    .map-frame iframe {
        height: 220px;
    }


    .faq-item {
        padding:
            15px;
    }


    .faq-item summary {
        font-size: 0.86rem;
    }


    .faq-item summary::after {
        width: 24px;
        height: 24px;

        font-size: 1.1rem;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE — 360px
   ========================================================================== */

@media (max-width: 360px) {

    .page-hero h1 {
        font-size: 1.5rem;
    }


    .contact-section,
    .faq-section {
        padding-top: 40px;

        padding-bottom: 40px;
    }


    .contact-form {
        padding:
            18px
            13px;
    }


    .contact-form label {
        font-size: 0.8rem;
    }


    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding:
            0.7rem
            0.75rem;

        font-size: 0.86rem;
    }


    .faq-item p {
        font-size: 0.8rem;
    }
}


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

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.btn:focus-visible,
.faq-item summary:focus-visible {

    outline:
        3px solid
        rgba(
            79,
            163,
            255,
            0.45
        );

    outline-offset: 2px;
}


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

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

    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .faq-item,
    .faq-item summary::after {
        transition: none !important;
    }
}