/* ==========================================================================
   Qlynic Support Page (desktop-first, refined v2)
   ========================================================================== */

:root {
    --bg: #0b1022;
    --text: #e7eaf3;
    --muted: #a6b0c2;
    --muted-2: #91a0ba;
    --line: rgba(148,163,184,.22);
    --primary: #A78BFA;
    --accent: #22D3EE;
    --ok: #34D399;
    --warn: #fbbf24;
    --danger: #F87171;
    --radius: 30px;
    --radius-card: 22px;
    --fast: .24s cubic-bezier(.2,.65,.35,1);
    --glass: linear-gradient(180deg, rgba(20,28,54,.78), rgba(13,19,38,.74));
    --card: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    --band-hero: linear-gradient(180deg, rgba(64,88,150,.55) 0%, rgba(11,16,34,0) 70%);
    --band-soft: linear-gradient(180deg, rgba(48,66,120,.46) 0%, rgba(11,16,34,0) 72%);
    --shadow: 0 28px 90px -22px rgba(0,0,0,.60),0 0 0 1px rgba(255,255,255,.04) inset;
    --field-bg: linear-gradient(180deg,#182536,#141e2d);
    --field-radius: 16px;
    --field-pad-y: 16px;
    --field-pad-x: 18px;
    --focus: #22D3EE;
    --row-gap: 22px;
    --font: Inter,"SF Pro Text",Segoe UI,Roboto,Arial,sans-serif;
    --heading-weight: 800;
    --ui-weight: 600;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-family: var(--font);
}

.m1 {
    margin-top: 15px;
}

i.fa-solid.fa-house {
    margin-right: 10px;
}

select option {
    color: black !important;
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

h1, h2, h3 {
    font-weight: var(--heading-weight);
    letter-spacing: .25px;
    margin: 0 0 14px
}

p {
    margin: 0 0 16px;
    line-height: 1.55
}

.tiny {
    font-size: .72rem
}

.muted {
    color: var(--muted)
}

/* NAV */
.sup-nav {
    position: sticky;
    top: 0;
    z-index: 70;
    background: rgba(10,14,28,.65);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

    .brand .logo {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: url(../Images/CompanyLogo.svg) center/cover no-repeat
    }

    .brand .name {
        font-weight: 900;
        font-size: 1.08rem;
        letter-spacing: .3px
    }

.sup-links {
    display: flex;
    gap: 20px;
    align-items: center
}

    .sup-links a {
        padding: 8px 14px;
        border-radius: 14px;
        font-weight: var(--ui-weight);
        color: #dce5f4;
        transition: background var(--fast),color var(--fast),transform var(--fast);
    }

        .sup-links a.active {
            background: linear-gradient(135deg,#7C3AED,#A78BFA 45%,#22D3EE);
            color: #0d1322;
            font-weight: 800;
            box-shadow: 0 12px 30px -12px rgba(99,102,241,.55);
        }

        .sup-links a:hover:not(.active) {
            background: rgba(255,255,255,.08)
        }

@media (max-width:760px) {
    .nav-inner {
        padding: 10px 14px
    }

    .sup-links {
        gap: 10px
    }

        .sup-links a {
            padding: 6px 10px;
            font-size: .8rem
        }

    .brand .name {
        font-size: 1rem
    }
}

/* Sections */
.section {
    position: relative;
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 0 20px
}

    .section:first-of-type {
        margin-top: 30px
    }

.section-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 40px 34px 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass);
    backdrop-filter: saturate(170%) blur(18px);
    box-shadow: var(--shadow);
}

.section.section-band > .section-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--band-soft);
    z-index: 0;
    pointer-events: none;
}

#sup-hero.section.section-band > .section-inner::before {
    background: var(--band-hero)
}

@media (max-width:860px) {
    .section-inner {
        padding: 34px 24px 32px;
        border-radius: 26px
    }
}

@media (max-width:600px) {
    .section-inner {
        padding: 30px 18px;
        border-radius: 24px
    }
}

/* Hero */
.hero-card {
    display: grid;
    gap: 18px
}

.hero-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.hero-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg,#7C3AED,#22D3EE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0d1322;
    box-shadow: 0 16px 42px -12px rgba(99,102,241,.55);
}

.hero-title {
    margin: 0;
    font-size: clamp(2.2rem,5.8vw,2.9rem);
    line-height: 1.15
}

.hero-sub {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 500;
    max-width: 78ch
}

.badge.urgent {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .07em;
    background: linear-gradient(135deg,#fb923c,#fbbf24);
    color: #0d1322;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: .65rem;
    font-weight: 700;
    background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.15);
}

    .hero-chip .ok {
        color: var(--ok)
    }

#sup-hero .section-inner::after {
    content: "";
    position: absolute;
    inset: -14% -10% -22% -10%;
    background: radial-gradient(560px 260px at 18% 10%, rgba(167,139,250,.22), transparent 70%), radial-gradient(620px 300px at 85% 12%, rgba(34,211,238,.18), transparent 72%), radial-gradient(700px 380px at 50% 100%, rgba(99,102,241,.14), transparent 78%);
    filter: blur(40px) saturate(120%);
    opacity: .85;
    animation: glowFloat 28s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes glowFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3%)
    }
}

@media (prefers-reduced-motion:reduce) {
    #sup-hero .section-inner::after {
        animation: none
    }
}

@media (max-width:760px) {
    .hero-icon {
        width: 60px;
        height: 60px;
        font-size: 1.7rem
    }

    .hero-title {
        font-size: clamp(2rem,8vw,2.5rem)
    }

    .hero-sub {
        font-size: .98rem
    }
}

/* Split layout */
.split {
    padding: 36px 34px 38px
}

.sup-grid {
    display: grid;
    gap: 34px;
    grid-template-columns: 380px 1fr
}

@media (max-width:1100px) {
    .sup-grid {
        grid-template-columns: 340px 1fr
    }
}

@media (max-width:960px) {
    .sup-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .split {
        padding: 34px 26px 36px
    }
}

/* Aside */
.sup-aside .sticky {
    position: sticky;
    top: calc(64px + 20px)
}

.a-card {
    border: 1px solid rgba(148,163,184,.28);
    border-radius: var(--radius-card);
    background: var(--card);
    padding: 20px 20px 22px;
    display: grid;
    gap: 16px;
    box-shadow: 0 20px 60px -16px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
}

    .a-card:not(:last-child) {
        margin-bottom: 26px
    }

.a-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px
}

    .a-title i {
        color: #A78BFA
    }

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    font-size: .92rem
}

    .contact-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start
    }

.ci {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg,#203047,#162234);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #22D3EE;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05) inset;
}

.mini {
    margin-top: 4px;
    font-size: .63rem;
    letter-spacing: .05em;
    font-weight: 600
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 14px;
    font-size: .66rem;
    font-weight: 700;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b
}

    .status-dot.ok {
        background: var(--ok)
    }

.check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-size: .86rem
}

    .check li {
        display: flex;
        gap: 10px;
        line-height: 1.35
    }

        .check li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--ok);
            font-size: .75rem;
            margin-top: 2px;
        }

@media (max-width:960px) {
    .sup-aside .sticky {
        position: static
    }

    .a-card {
        margin-bottom: 20px
    }
}

/* Ticket Form Wrapper */
.sup-content .ticket {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(148,163,184,.30);
    border-radius: var(--radius-card);
    background: var(--glass);
    padding: 30px 30px 34px;
    box-shadow: 0 24px 76px -18px rgba(0,0,0,.60),0 0 0 1px rgba(255,255,255,.04) inset;
}

.ticket.glow::after {
    content: "";
    position: absolute;
    inset: -14% -10% -22% -10%;
    background: radial-gradient(560px 260px at 20% 8%, rgba(167,139,250,.20), transparent 70%), radial-gradient(620px 300px at 87% 14%, rgba(34,211,238,.16), transparent 72%), radial-gradient(700px 400px at 50% 100%, rgba(99,102,241,.13), transparent 78%);
    filter: blur(42px) saturate(120%);
    opacity: .75;
    animation: glowFloat 30s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@media (max-width:600px) {
    .sup-content .ticket {
        padding: 26px 18px 30px;
    }
}

.form-title {
    margin: 0 0 4px;
    font-size: 1.55rem;
    display: flex;
    align-items: center;
    gap: 12px
}

    .form-title i {
        color: #A78BFA
    }

.form-sub {
    margin: 0 0 var(--row-gap);
    font-size: .92rem;
    max-width: 72ch;
    color: var(--muted-2)
}

.ticket-form {
    display: block;
    position: relative;
    z-index: 1
}

/* Row flex line: name/email & category/priority */
.rowflex-line {
    display: flex;
    gap: 22px;
}

    .rowflex-line .field {
        flex: 1 1 320px;
        min-width: 280px;
        margin: 0;
    }

        /* IMPORTANT: fields in pair rows should not get extra bottom margin from
   .ticket-form > .field; we control spacing via row layout instead. */
        .rowflex-line .field + .field {
            margin-top: 0;
        }

@media (max-width:700px) {
    .rowflex-line {
        flex-direction: column;
        gap: var(--row-gap); /* consistent spacing between stacked fields */
    }

        .rowflex-line .field {
            flex: 1 1 auto;
            min-width: 0;
        }
}

/* Top-level single-row fields */
.ticket-form > .field {
    margin: 0 0 var(--row-gap);
}

    .ticket-form > .field:last-child {
        margin-bottom: 0
    }

/* Honeypot */
#hpWebsite {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Field styling */
.field {
    position: relative;
}

    .field label {
        display: block;
        margin: 0 0 8px 2px;
        font-size: .70rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #cfd7ea;
    }

    .field.required > label::after {
        content: "*";
        color: var(--accent);
        margin-left: 6px;
        font-weight: 900;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: var(--field-radius);
        background: var(--field-bg);
        color: var(--text);
        padding: var(--field-pad-y) var(--field-pad-x);
        font-size: .96rem;
        letter-spacing: .2px;
        font-weight: 500;
        line-height: 1.45;
        transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
    }

    .field textarea {
        min-height: 220px;
        resize: vertical
    }

        .field input::placeholder,
        .field textarea::placeholder {
            color: #95a3bd
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: 2px solid var(--focus);
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(34,211,238,.25);
        }

    .field.has-error input,
    .field.has-error select,
    .field.has-error textarea {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(248,113,113,.22);
    }

.f-hint {
    margin: 6px 0 0 2px;
    font-size: .62rem;
    letter-spacing: .05em;
    color: #8fa2c0;
    font-weight: 600;
}

.f-err {
    display: none;
    margin: 8px 0 0;
    background: rgba(248,113,113,.15);
    border: 1px solid rgba(248,113,113,.35);
    color: #fee2e2;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
}

.char {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: .62rem;
    color: #7f8aa1;
    letter-spacing: .05em;
    font-weight: 700;
}

/* Select arrow */
.field select {
    appearance: none;
    background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a6b0c2' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;
}

/* Buttons */
.actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    padding: 14px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .28px;
    background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
    color: #e9eef9;
    transition: transform var(--fast),filter var(--fast),background var(--fast),box-shadow var(--fast);
}

    .btn.pri {
        border: 0;
        background: linear-gradient(135deg,#7C3AED 0%,#A78BFA 45%,#22D3EE 100%);
        box-shadow: 0 20px 46px -14px rgba(99,102,241,.55),0 0 0 1px rgba(255,255,255,.05) inset;
    }

        .btn.pri:hover {
            transform: translateY(-3px);
            filter: saturate(1.15)
        }

    .btn.ghost {
        background: transparent
    }

        .btn.ghost:hover {
            background: rgba(255,255,255,.07)
        }

    .btn.sm {
        padding: 8px 14px;
        font-size: .72rem
    }

    .btn:active {
        transform: translateY(1px)
    }

    .btn:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px
    }

/* General (top) error */
.err {
    background: rgba(248,113,113,.20);
    border: 1px solid rgba(248,113,113,.40);
    padding: 14px 18px;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px -10px rgba(248,113,113,.35);
    margin-top: var(--row-gap);
}

/* Footer */
.sup-foot {
    margin: 80px 0 0;
    padding: 40px 22px 58px;
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
}

    .sup-foot a {
        color: #d0d9e8;
        font-weight: 600
    }

        .sup-foot a:hover {
            text-decoration: underline
        }

/* Result Modal */
.rmodal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none
}

    .rmodal.show {
        display: block
    }

.r-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6,10,20,.70);
    backdrop-filter: saturate(160%) blur(20px);
    animation: fadeIn .4s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.r-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.86);
    width: min(560px,94vw);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg,rgba(32,44,70,.94),rgba(20,28,48,.92));
    box-shadow: 0 34px 110px -26px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06) inset;
    overflow: hidden;
    animation: popIn .55s var(--fast) forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translate(-50%,-40%) scale(.9) rotateX(-20deg)
    }

    60% {
        opacity: 1;
        transform: translate(-50%,-54%) scale(1.03) rotateX(6deg)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1) rotateX(0)
    }
}

.r-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px 14px
}

.r-title {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 800
}

.r-body {
    padding: 0 26px 20px;
    font-size: .95rem;
    line-height: 1.55
}

.r-foot {
    padding: 16px 26px;
    border-top: 1px solid rgba(148,163,184,.20);
    display: flex;
    justify-content: flex-end
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 8px
}

@media (prefers-reduced-motion:reduce) {
    .hero-card::after, .ticket.glow::after, #sup-hero .section-inner::after {
        animation: none
    }

    .btn, .r-card, .a-card {
        transition: none
    }
}

/* Print */
@media print {
    .sup-nav, .sup-foot, .hero-meta, .hero-icon, .sup-aside, .actions, .policy, .rmodal {
        display: none !important
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt
    }

    .section, .section-inner {
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        background: #fff
    }

    a {
        color: #000;
        text-decoration: underline
    }
}