/* ===================================
   POLYGON FOX — CORE CSS ENTRY
   Imports all design system layers
   =================================== */

@import url('../APP/main.css');
@import url('../APP/nav.css');
@import url('../APP/components.css');
@import url('../APP/functions.css');
@import url('../APP/profile.css');
@import url('../APP/responsive.css');

/* ===================================
   GRADIENT SYSTEM
   Works on backgrounds AND text (via -webkit-background-clip).
   Usage on text: add .gradient--* to the element directly,
   or nest a <span class="gradient--*"> inside headings.
   =================================== */

.gradient--purple {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient--cyan {
    background: linear-gradient(135deg, #00f2ff 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient--gold {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Background-only variants (no text-clip) — for divs, cards, buttons */
.bg-gradient--purple { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); }
.bg-gradient--cyan   { background: linear-gradient(135deg, #00f2ff 0%, #0ea5e9 100%); }
.bg-gradient--gold   { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%); }

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Text utilities */
.text-cyan    { color: var(--fox-cyan); }
.text-white   { color: #fff; }
.text-muted   { color: rgba(255,255,255,0.4); }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-upper   { text-transform: uppercase; letter-spacing: 0.1em; }
.text-mono    { font-family: var(--font-mono); }
.text-tech    { font-family: var(--font-tech); }

/* Display */
.d-flex       { display: flex; }
.d-grid       { display: grid; }
.d-none       { display: none; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1  { gap: 0.5rem; }
.gap-2  { gap: 1rem; }
.gap-3  { gap: 1.5rem; }
.gap-4  { gap: 2rem; }

/* Spacing */
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.py-section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

/* Visibility */
.hidden   { display: none !important; }
.sr-only  {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Cyan accent tag/badge */
.tag-cyan {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.14);
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fox-cyan);
}

/* Cyan dot separator */
.dot-cyan {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fox-cyan);
    box-shadow: 0 0 6px var(--fox-cyan);
    vertical-align: middle;
}

/* Section padding */
section { position: relative; }

/* Warp drive / CTA gradient strip (kept from index) */
.warp-drive-section { padding: clamp(4rem, 8vw, 7rem) 0; }

/* Pricing intro */
#pricing-intro { padding: clamp(4rem, 8vw, 7rem) 0; }

/* Transmissions / testimonials */
.transmissions-section { padding: clamp(4rem, 8vw, 7rem) 0; }