/* =====================================================
   style.css — GFLAI Design Lightstick Landing Page
   Static CSS: Tailwind Utilities + Custom Styles
   Generated: 2026-06-15 | No CDN dependency
   ===================================================== */

/* =====================================================
   SECTION 1: BASE RESET & BODY STYLES
   (migrated from original <style> block)
   ===================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    font-family: 'Montserrat', sans-serif;
    background: #030303;
    color: #f1f5f9;
    overflow-x: hidden;
    scroll-behavior: smooth;
    letter-spacing: 0.02em;
}

/* =====================================================
   SECTION 2: CUSTOM COMPONENT CLASSES
   (migrated from original <style> block)
   ===================================================== */

.serif-display {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}

.nav-blur {
    background: rgba(3, 3, 3, 0.85);
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.hero-gradient {
    background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.12) 0%, rgba(3, 3, 3, 0) 70%);
}

.premium-border {
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0.002) 100%);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-border:hover {
    border-color: rgba(99, 102, 241, 0.25);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    transform: translateY(-2px);
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 30%, #c7d2fe 70%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =====================================================
   SECTION 3: HUBSPOT ADVANCED ADAPTIVE STYLES
   (migrated from original <style> block)
   ===================================================== */

#hubspot-form-container .hs-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

@media (max-width: 1024px) {
    #hubspot-form-container .hs-form {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
}

#hubspot-form-container .hs-form .hs-form-field {
    grid-column: span 1;
}

#hubspot-form-container .hs-form .hs-form-field.hs-fieldtype-textarea {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    #hubspot-form-container .hs-form .hs-form-field.hs-fieldtype-textarea {
        grid-column: span 1;
    }
}

#hubspot-form-container .hs-form label {
    color: #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.8rem;
    display: block;
    font-weight: 500;
}

#hubspot-form-container .hs-form input,
#hubspot-form-container .hs-form textarea,
#hubspot-form-container .hs-form select {
    background: #0a0a0d;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.3rem;
    color: #fff;
    font-size: 0.95rem;
    width: 100% !important;
    outline: none;
    transition: all 0.4s ease;
}

#hubspot-form-container .hs-form input:focus,
#hubspot-form-container .hs-form textarea:focus {
    border-color: #6366f1;
    background: #111116;
}

#hubspot-form-container .hs-form .hs-submit {
    grid-column: span 2;
    margin-top: 1.5rem;
}

@media (max-width: 1024px) {
    #hubspot-form-container .hs-form .hs-submit {
        grid-column: span 1;
    }
}

#hubspot-form-container .hs-form .hs-button {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 1.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    width: 100%;
}

#hubspot-form-container .hs-form .hs-button:hover {
    background: #6366f1;
    color: #ffffff;
}

#hubspot-form-container .hs-form .hs-error-msgs {
    color: #f87171;
    font-size: 0.8rem;
    list-style: none;
    margin-top: 0.6rem;
    letter-spacing: 0.02em;
}

/* =====================================================
   SECTION 4: KEYFRAME ANIMATIONS
   ===================================================== */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* =====================================================
   SECTION 5: CSS CUSTOM PROPERTIES (Gradient System)
   ===================================================== */

:root {
    --tw-gradient-from: transparent;
    --tw-gradient-to: rgba(0, 0, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* =====================================================
   SECTION 6: TAILWIND UTILITY CLASSES
   Position & Layout
   ===================================================== */

.fixed    { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }

.top-0     { top: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }
.bottom-6  { bottom: 1.5rem; }
.left-6    { left: 1.5rem; }
.bottom-10 { bottom: 2.5rem; }
.right-10  { right: 2.5rem; }
.inset-0   { inset: 0; }

.z-\[100\] { z-index: 100; }
.z-50      { z-index: 50; }
.z-20      { z-index: 20; }
.z-10      { z-index: 10; }

/* =====================================================
   SECTION 7: TAILWIND UTILITY CLASSES
   Display
   ===================================================== */

.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.block        { display: block; }
.hidden       { display: none; }
.grid         { display: grid; }

.overflow-hidden { overflow: hidden; }

/* =====================================================
   SECTION 8: TAILWIND UTILITY CLASSES
   Flex & Grid
   ===================================================== */

.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

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

.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Divide (table/FAQ separator) */
.divide-y > * + * {
    border-top-width: 1px;
    border-top-style: solid;
}
.divide-white\/5 > * + * {
    border-color: rgba(255, 255, 255, 0.05);
}

/* Space-Y */
.space-y-2  > * + * { margin-top: 0.5rem; }
.space-y-3  > * + * { margin-top: 0.75rem; }
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-16 > * + * { margin-top: 4rem; }
.space-y-20 > * + * { margin-top: 5rem; }

/* =====================================================
   SECTION 9: TAILWIND UTILITY CLASSES
   Sizing
   ===================================================== */

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-1\.5  { width: 0.375rem; }
.w-7     { width: 1.75rem; }

.h-1\.5          { height: 0.375rem; }
.h-7             { height: 1.75rem; }
.h-8             { height: 2rem; }
.h-28            { height: 7rem; }
.h-72            { height: 18rem; }
.h-\[650px\]     { height: 650px; }
.h-\[350px\]     { height: 350px; }

.max-w-\[1600px\] { max-width: 1600px; }
.max-w-\[1440px\] { max-width: 1440px; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-\[1000px\] { max-width: 1000px; }
.max-w-7xl { max-width: 80rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }

/* =====================================================
   SECTION 10: TAILWIND UTILITY CLASSES
   Spacing — Margin
   ===================================================== */

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-3    { margin-left: 0.75rem; margin-right: 0.75rem; }
.mr-2    { margin-right: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-20   { margin-bottom: 5rem; }
.mb-24   { margin-bottom: 6rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-12   { margin-top: 3rem; }

/* =====================================================
   SECTION 11: TAILWIND UTILITY CLASSES
   Spacing — Padding
   ===================================================== */

.p-4   { padding: 1rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }

.px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4    { padding-left: 1rem;     padding-right: 1rem; }
.px-8    { padding-left: 2rem;     padding-right: 2rem; }
.px-10   { padding-left: 2.5rem;   padding-right: 2.5rem; }

.py-1    { padding-top: 0.25rem;   padding-bottom: 0.25rem; }
.py-2    { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-3\.5 { padding-top: 0.875rem;  padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem;      padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem;   padding-bottom: 1.25rem; }
.py-24   { padding-top: 6rem;      padding-bottom: 6rem; }

.pt-4    { padding-top: 1rem; }
.pt-12   { padding-top: 3rem; }
.pt-24   { padding-top: 6rem; }
.pt-40   { padding-top: 10rem; }

/* =====================================================
   SECTION 12: TAILWIND UTILITY CLASSES
   Typography
   ===================================================== */

/* Font Size */
.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;      line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }
.text-3xl  { font-size: 1.875rem;  line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;   line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;      line-height: 1; }

.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* Font Weight */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Text Transform & Align */
.uppercase   { text-transform: uppercase; }
.text-left   { text-align: left; }
.text-center { text-align: center; }

/* Letter Spacing */
.tracking-tight           { letter-spacing: -0.025em; }
.tracking-wide            { letter-spacing: 0.025em; }
.tracking-wider           { letter-spacing: 0.05em; }
.tracking-widest          { letter-spacing: 0.1em; }
.tracking-\[0\.2em\]     { letter-spacing: 0.2em; }
.tracking-\[0\.25em\]    { letter-spacing: 0.25em; }
.tracking-\[0\.3em\]     { letter-spacing: 0.3em; }
.tracking-\[0\.35em\]    { letter-spacing: 0.35em; }
.tracking-\[0\.4em\]     { letter-spacing: 0.4em; }

/* Line Height */
.leading-relaxed  { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

/* First-child variant */
.first\:pt-0:first-child { padding-top: 0; }

/* =====================================================
   SECTION 13: TAILWIND UTILITY CLASSES
   Colors — Text
   ===================================================== */

.text-white      { color: #ffffff; }
.text-black      { color: #000000; }
.text-slate-200  { color: rgb(226, 232, 240); }
.text-slate-300  { color: rgb(203, 213, 225); }
.text-slate-400  { color: rgb(148, 163, 184); }
.text-slate-500  { color: rgb(100, 116, 139); }
.text-slate-600  { color: rgb(71, 85, 105); }
.text-slate-700  { color: rgb(51, 65, 85); }
.text-indigo-400 { color: rgb(129, 140, 248); }

/* =====================================================
   SECTION 14: TAILWIND UTILITY CLASSES
   Colors — Background
   ===================================================== */

.bg-white          { background-color: #ffffff; }
.bg-black          { background-color: #000000; }
.bg-transparent    { background-color: transparent; }
.bg-white\/5       { background-color: rgba(255, 255, 255, 0.05); }
.bg-indigo-500     { background-color: rgb(99, 102, 241); }
.bg-indigo-600     { background-color: rgb(79, 70, 229); }
.bg-indigo-700     { background-color: rgb(67, 56, 202); }
.bg-indigo-500\/5  { background-color: rgba(99, 102, 241, 0.05); }
.bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-neutral-900    { background-color: rgb(23, 23, 23); }
.bg-\[\#25D366\]   { background-color: #25D366; }
.bg-\[\#060608\]   { background-color: #060608; }
.bg-\[\#0a0a0d\]   { background-color: #0a0a0d; }

/* =====================================================
   SECTION 15: TAILWIND UTILITY CLASSES
   Gradient System (CSS Custom Properties)
   ===================================================== */

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-\[\#030303\] {
    --tw-gradient-from: #030303;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(3, 3, 3, 0));
}

.via-transparent {
    --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.to-transparent {
    --tw-gradient-to: transparent;
}

/* =====================================================
   SECTION 16: TAILWIND UTILITY CLASSES
   Border & Ring
   ===================================================== */

.border        { border-width: 1px; border-style: solid; }
.border-t      { border-top-width: 1px; border-top-style: solid; }
.border-b      { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y      { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }
.border-l-2    { border-left-width: 2px; border-left-style: solid; }

.border-white\/5       { border-color: rgba(255, 255, 255, 0.05); }
.border-white\/10      { border-color: rgba(255, 255, 255, 0.1); }
.border-indigo-500\/10 { border-color: rgba(99, 102, 241, 0.1); }
.border-indigo-600\/20 { border-color: rgba(79, 70, 229, 0.2); }

.rounded-sm   { border-radius: 0.125rem; }
.rounded-full { border-radius: 9999px; }

/* =====================================================
   SECTION 17: TAILWIND UTILITY CLASSES
   Effects
   ===================================================== */

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.opacity-40 { opacity: 0.4; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.grayscale  { filter: grayscale(100%); }
.object-cover { object-fit: cover; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* =====================================================
   SECTION 18: TAILWIND UTILITY CLASSES
   Transitions & Duration
   ===================================================== */

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Duration overrides — placed after transition-* for cascade */
.duration-300 { transition-duration: 300ms; }
.duration-700 { transition-duration: 700ms; }

/* =====================================================
   SECTION 19: TAILWIND UTILITY CLASSES
   Hover States
   ===================================================== */

.hover\:text-white:hover      { color: #ffffff; }
.hover\:text-indigo-400:hover { color: rgb(129, 140, 248); }
.hover\:text-slate-200:hover  { color: rgb(226, 232, 240); }
.hover\:bg-indigo-600:hover   { background-color: rgb(79, 70, 229); }
.hover\:bg-indigo-700:hover   { background-color: rgb(67, 56, 202); }
.hover\:border-white:hover    { border-color: #ffffff; }
.hover\:opacity-90:hover      { opacity: 0.9; }
.hover\:opacity-100:hover     { opacity: 1; }
.hover\:scale-105:hover       { transform: scale(1.05); }
.hover\:scale-110:hover       { transform: scale(1.1); }

/* =====================================================
   SECTION 20: TAILWIND UTILITY CLASSES
   Group Hover States
   ===================================================== */

.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105   { transform: scale(1.05); }

/* =====================================================
   SECTION 21: RESPONSIVE BREAKPOINTS
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ===================================================== */

/* ---- sm: 640px ---- */
@media (min-width: 640px) {
    .sm\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-5xl     { font-size: 3rem;    line-height: 1; }
    .sm\:text-base    { font-size: 1rem;    line-height: 1.5rem; }
    .sm\:text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
    .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- md: 768px ---- */
@media (min-width: 768px) {
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-lg      { font-size: 1.125rem; line-height: 1.75rem; }
    .md\:text-right   { text-align: right; }
    .md\:mt-0         { margin-top: 0; }
}

/* ---- lg: 1024px ---- */
@media (min-width: 1024px) {
    .lg\:inline      { display: inline; }
    .lg\:block       { display: block; }
    .lg\:flex        { display: flex; }

    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .lg\:col-span-1  { grid-column: span 1 / span 1; }
    .lg\:col-span-4  { grid-column: span 4 / span 4; }
    .lg\:col-span-5  { grid-column: span 5 / span 5; }
    .lg\:col-span-7  { grid-column: span 7 / span 7; }
    .lg\:col-span-8  { grid-column: span 8 / span 8; }

    .lg\:text-5xl    { font-size: 3rem;    line-height: 1; }
    .lg\:text-base   { font-size: 1rem;    line-height: 1.5rem; }

    .lg\:py-24       { padding-top: 6rem;  padding-bottom: 6rem; }
    .lg\:py-36       { padding-top: 9rem;  padding-bottom: 9rem; }
    .lg\:py-40       { padding-top: 10rem; padding-bottom: 10rem; }

    .lg\:px-16       { padding-left: 4rem;  padding-right: 4rem; }
    .lg\:pl-10       { padding-left: 2.5rem; }
    .lg\:p-16        { padding: 4rem; }

    .lg\:sticky      { position: sticky; }
    .lg\:top-36      { top: 9rem; }
}

/* ---- xl: 1280px ---- */
@media (min-width: 1280px) {
    .xl\:flex        { display: flex; }
    .xl\:text-7xl    { font-size: 4.5rem; line-height: 1; }
    .xl\:gap-12      { gap: 3rem; }
    .xl\:gap-24      { gap: 6rem; }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}