/* =========================================================
   CKS Creator Landing Page
   Dark Creator Premium Visual System
   ---------------------------------------------------------
   Author : CKS
   Version: 1.0.0
========================================================= */

/* =========================================================
   1. Reset
========================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background: var(--color-bg-deep);
    color-scheme: dark;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

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

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

button,
input,
textarea {
    font: inherit;
}

/* =========================================================
   2. Design Tokens
========================================================= */

:root {

    /* ===== Color ===== */

    --color-bg: #0c0811;
    --color-bg-deep: #07050a;
    --color-surface: #15101d;
    --color-surface-elevated: #1d1528;
    --color-text: #f9f5fc;
    --color-text-muted: #cbbfd2;
    --color-border: rgba(235, 211, 246, .15);
    --color-border-strong: rgba(235, 211, 246, .28);
    --color-accent: #a91d5d;
    --color-accent-hover: #861346;
    --color-accent-soft: rgba(218, 55, 147, .18);
    --color-accent-border: rgba(255, 255, 255, .22);
    --color-accent-secondary: #a767dd;
    --color-accent-secondary-soft: rgba(167, 103, 221, .16);
    --color-accent-electric: #65c8ff;
    --color-accent-electric-soft: rgba(101, 200, 255, .1);
    --color-avatar-ring: #f4e7f8;
    --color-avatar-accent: rgba(229, 96, 180, .7);
    --color-hero-label-border: rgba(236, 205, 248, .44);
    --color-membership-border: rgba(226, 94, 176, .46);
    --color-content-border: rgba(218, 140, 215, .24);
    --color-content-icon-bg: rgba(167, 103, 221, .16);
    --color-content-icon-border: rgba(220, 150, 255, .34);
    --color-on-accent: #ffffff;
    --color-focus: #dc96ff;
    --color-focus-soft: rgba(220, 150, 255, .42);
    --color-native-option-bg: #ffffff;
    --color-native-option-text: #201526;
    --color-scrollbar-track: #100b17;
    --color-scrollbar-thumb: #56324f;
    --color-scrollbar-thumb-hover: #7f3a67;

    --gradient-page:
        radial-gradient(80% 48% at 4% -12%, rgba(143, 54, 117, .32), transparent 72%),
        radial-gradient(64% 42% at 98% 18%, rgba(119, 66, 174, .25), transparent 70%),
        radial-gradient(42% 28% at 52% 100%, rgba(101, 200, 255, .06), transparent 72%),
        var(--color-bg);
    --gradient-surface:
        linear-gradient(145deg, rgba(31, 22, 43, .98), rgba(18, 13, 26, .98));
    --gradient-surface-elevated:
        linear-gradient(145deg, rgba(39, 27, 54, .98), rgba(26, 18, 36, .98));
    --gradient-accent:
        linear-gradient(135deg, #b02064 0%, #961959 52%, #70258b 100%);
    --gradient-accent-hover:
        linear-gradient(135deg, #961952 0%, #791143 52%, #5c1d74 100%);
    --gradient-cover-overlay:
        linear-gradient(180deg, transparent 34%, rgba(10, 5, 15, .2) 56%, rgba(28, 7, 30, .72) 100%),
        linear-gradient(118deg, var(--color-accent-electric-soft), transparent 42%);
    --gradient-cover-vignette:
        radial-gradient(88% 96% at 50% 36%, transparent 30%, rgba(3, 1, 7, .64) 100%),
        linear-gradient(90deg, rgba(4, 1, 8, .54), transparent 68%);
    --gradient-hero-surface:
        radial-gradient(84% 72% at 50% 0%, rgba(167, 103, 221, .16), transparent 70%),
        var(--gradient-surface-elevated);
    --gradient-hero-label:
        linear-gradient(135deg, rgba(169, 29, 93, .9), rgba(112, 37, 139, .88));
    --gradient-membership:
        radial-gradient(92% 120% at 0% 0%, rgba(218, 55, 147, .2), transparent 62%),
        radial-gradient(72% 100% at 100% 0%, rgba(167, 103, 221, .17), transparent 68%),
        var(--gradient-surface-elevated);
    --gradient-membership-edge:
        linear-gradient(90deg, transparent, var(--color-accent-electric), var(--color-accent-secondary), transparent);
    --gradient-content-card:
        linear-gradient(145deg, rgba(41, 27, 55, .94), rgba(20, 13, 29, .98));
    --gradient-content-divider:
        linear-gradient(90deg, transparent, rgba(167, 103, 221, .48), rgba(101, 200, 255, .4), transparent);

    /* ===== Typography ===== */

    --font-sans:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans TC",
        "Noto Sans SC",
        "PingFang TC",
        "PingFang SC",
        "Microsoft JhengHei",
        "Microsoft YaHei",
        "Hiragino Sans",
        "Yu Gothic",
        Meiryo,
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        Arial,
        sans-serif;

    --font-size-body: 1rem;
    --font-size-body-lg: clamp(1rem, .95rem + .3vw, 1.1rem);
    --font-size-meta: .875rem;
    --font-size-control: 1rem;
    --font-size-display: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
    --font-size-section: clamp(1.5rem, 1.25rem + .95vw, 1.9rem);
    --font-size-heading-sm: clamp(1.05rem, 1rem + .25vw, 1.2rem);
    --line-height-body: 1.6;
    --line-height-cjk: 1.8;
    --letter-spacing-display: .015em;
    --letter-spacing-heading: .01em;

    /* ===== Radius ===== */

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* ===== Shadow ===== */

    --shadow-sm:
        0 8px 24px rgba(2, 0, 7, .26);

    --shadow-md:
        0 16px 42px rgba(2, 0, 7, .38);

    --shadow-lg:
        0 28px 72px rgba(2, 0, 7, .5);

    --surface-ring:
        0 0 0 1px var(--color-border);
    --surface-ring-strong:
        0 0 0 1px var(--color-border-strong);
    --glow-subtle:
        0 14px 36px rgba(2, 0, 7, .35),
        0 0 30px rgba(167, 103, 221, .08);
    --glow-hero:
        0 0 46px rgba(167, 103, 221, .14);
    --glow-accent:
        0 14px 30px rgba(118, 11, 64, .34),
        0 0 34px rgba(211, 49, 137, .24);
    --glow-avatar:
        0 0 0 1px var(--color-avatar-accent),
        0 18px 44px rgba(2, 0, 7, .48),
        0 0 30px rgba(167, 103, 221, .24);
    --glow-membership:
        0 26px 64px rgba(2, 0, 7, .5),
        0 0 46px rgba(211, 49, 137, .17);
    --glow-telegram:
        0 18px 34px rgba(118, 11, 64, .42),
        0 0 48px rgba(211, 49, 137, .32);
    --text-shadow-display:
        0 3px 18px rgba(2, 0, 7, .62);
    --shadow-focus:
        0 0 0 4px var(--color-focus-soft),
        0 0 24px rgba(220, 150, 255, .24);

    /* ===== Space ===== */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;

    /* ===== Layout ===== */

    --page-max-width: 1100px;
    --page-gutter: clamp(16px, 3vw, 32px);
    --content-max-width: 680px;
    --section-spacing: clamp(48px, 7vw, 88px);
    --hero-radius: var(--radius-md);
    --hero-aspect-mobile: 7 / 4;
    --hero-aspect-tablet: 16 / 9;
    --hero-aspect-desktop: 2 / 1;
    --hero-aspect-ratio: var(--hero-aspect-mobile);
    --avatar-size: clamp(120px, 20vw, 192px);
    --avatar-overlap: calc(var(--avatar-size) / 2);
    --profile-bottom-spacing: clamp(40px, 4vw, 64px);

    /* ===== Transition ===== */

    --transition: .25s ease;

}

/* =========================================================
   3. Base
========================================================= */

body {

    font-family: var(--font-sans);

    min-height: 100vh;

    background: var(--gradient-page);

    color: var(--color-text);

    font-size: var(--font-size-body);

    line-height: var(--line-height-body);

    -webkit-font-smoothing: antialiased;

    overflow-x: clip;

}

/* =========================================================
   Typography
========================================================= */

h1 {

    font-size: var(--font-size-display);

    font-weight: 700;

    line-height: 1.2;

    color: var(--color-text);

}

h2 {

    font-size: var(--font-size-section);

    font-weight: 700;

    margin-bottom: var(--space-lg);

    color: var(--color-text);

}

h3 {

    font-size: var(--font-size-heading-sm);

    font-weight: 600;

}

p {

    color: var(--color-text-muted);

}

html:lang(en) h1,
html:lang(en) h2 {

    letter-spacing: var(--letter-spacing-display);

}

html:lang(en) h3 {

    letter-spacing: var(--letter-spacing-heading);

}

/* =========================================================
   Layout
========================================================= */

.container {

    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-max-width)
    );

    margin: 0 auto;

}

section {

    padding:
        var(--section-spacing)
        0;

}

/* =========================================================
   Language Selector
========================================================= */

.language-selector {

    display: flex;

    justify-content: flex-end;

    margin:
        clamp(var(--space-sm), 3vw, var(--space-md))
        0
        var(--space-md);

}

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}

.language-selector select {

    min-width: 144px;

    min-height: 44px;

    padding: 10px 14px;

    border: 1px solid var(--color-border-strong);

    border-radius: var(--radius-pill);

    background: var(--gradient-surface-elevated);

    color: var(--color-text);

    font: inherit;

    font-size: var(--font-size-control);

    box-shadow:
        var(--shadow-sm),
        var(--glow-subtle);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

    cursor: pointer;

}

.language-selector select option {

    background-color: var(--color-native-option-bg);

    color: var(--color-native-option-text);

}

.language-selector select:hover:not(:disabled) {

    border-color: var(--color-accent-secondary);

    box-shadow:
        var(--shadow-md),
        var(--glow-subtle);

}

.language-selector select:focus-visible {

    border-color: var(--color-focus);

    outline-offset: 3px;

    box-shadow: var(--shadow-focus);

}

.language-selector select:disabled {

    cursor: not-allowed;

    opacity: .6;

}

/* =========================================================
   Common Components
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 28px;

    border: 1px solid var(--color-accent-border);

    background: var(--gradient-accent);

    color: var(--color-on-accent);

    font-size: var(--font-size-control);

    font-weight: 600;

    border-radius: var(--radius-pill);

    box-shadow: var(--glow-accent);

    transition: var(--transition);

    cursor: pointer;

}

.button:hover {

    background: var(--gradient-accent-hover);

    transform: translateY(-2px);

    box-shadow: var(--glow-accent);

}

.button:active {

    transform: translateY(0);

}

.card {

    background: var(--gradient-surface-elevated);

    border-radius: var(--radius-lg);

    border: 1px solid var(--color-border);

    box-shadow: var(--shadow-sm);

}

.card:hover {

    box-shadow: var(--shadow-md);

}

/* =========================================================
   Utilities
========================================================= */

.text-center {

    text-align: center;

}

.hidden {

    display: none;

}
/* =========================================================
   4. Hero
========================================================= */

.hero {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background: var(--gradient-hero-surface);

    border-radius: var(--hero-radius);

    box-shadow:
        var(--surface-ring),
        var(--shadow-md),
        var(--glow-hero);

    margin: 0;

}

/* ---------------------------------------------------------
   Cover
--------------------------------------------------------- */

.cover {

    position: relative;

    width: 100%;

    aspect-ratio: var(--hero-aspect-ratio);

    overflow: hidden;

    background: var(--color-surface);

}

.cover img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.cover::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background: var(--gradient-cover-vignette);

    pointer-events: none;

}

.hero-branding {

    position: absolute;

    inset-inline-start: clamp(var(--space-sm), 4vw, var(--space-lg));

    inset-block-end: clamp(var(--space-sm), 4vw, var(--space-lg));

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: var(--space-xs);

    max-width: calc(100% - (var(--page-gutter) * 2));

    padding: 10px 14px;

    border: 1px solid var(--color-hero-label-border);

    border-radius: var(--radius-pill);

    background: var(--gradient-hero-label);

    box-shadow:
        var(--shadow-sm),
        var(--glow-subtle);

    color: var(--color-on-accent);

    font-size: clamp(.78rem, .72rem + .35vw, .95rem);

    font-weight: 700;

    line-height: 1.2;

    overflow-wrap: anywhere;

}

.hero-branding[hidden] {

    display: none;

}

.hero-branding::before {

    content: "";

    flex: 0 0 auto;

    width: clamp(18px, 5vw, 28px);

    height: 2px;

    border-radius: var(--radius-pill);

    background: var(--color-accent-electric);

}

/* ---------------------------------------------------------
   Profile
--------------------------------------------------------- */

.profile {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    position: relative;

    z-index: 1;

    padding:
        0
        var(--page-gutter)
        var(--profile-bottom-spacing);

    margin-top: calc(var(--avatar-overlap) * -1);

}

/* ---------------------------------------------------------
   Avatar
--------------------------------------------------------- */

#avatar-image {

    position: relative;

    z-index: 1;

    width: var(--avatar-size);

    height: var(--avatar-size);

    object-fit: cover;

    border-radius: 50%;

    border: 6px solid var(--color-avatar-ring);

    background: var(--color-surface-elevated);

    box-shadow: var(--glow-avatar);

}

/* ---------------------------------------------------------
   Name
--------------------------------------------------------- */

#creator-name {

    margin-top: var(--space-sm);

    color: var(--color-text);

    max-width: min(100%, var(--content-max-width));

    font-weight: 700;

    line-height: 1.08;

    overflow-wrap: anywhere;

    text-shadow: var(--text-shadow-display);

}

/* ---------------------------------------------------------
   Bio
--------------------------------------------------------- */

#creator-bio {

    margin-top: var(--space-xs);

    max-width: var(--content-max-width);

    color: var(--color-text-muted);

    font-size: var(--font-size-body-lg);

    line-height: var(--line-height-cjk);

    overflow-wrap: anywhere;

}

/* ---------------------------------------------------------
   Hero Spacing
--------------------------------------------------------- */

/* ---------------------------------------------------------
   Optional Cover Overlay
--------------------------------------------------------- */

.cover::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background: var(--gradient-cover-overlay);

    pointer-events: none;

}

/* ---------------------------------------------------------
   Hero Animation
--------------------------------------------------------- */

.hero {

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.hero:hover {

    transform: translateY(-3px);

    box-shadow:
        var(--surface-ring-strong),
        var(--shadow-lg),
        var(--glow-hero);

}

/* ---------------------------------------------------------
   Hero Layout Foundation
---------------------------------------------------------- */

@media (min-width: 576px) {

    :root {

        --hero-aspect-ratio: var(--hero-aspect-tablet);

    }

}

@media (min-width: 992px) {

    :root {

        --hero-radius: var(--radius-lg);
        --hero-aspect-ratio: var(--hero-aspect-desktop);

    }

}

/* =========================================================
   5. Membership
========================================================= */

.membership {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    width: min(100%, var(--content-max-width));

    margin: var(--section-spacing) auto 0;

    padding: clamp(var(--space-md), 4vw, var(--space-lg));

    text-align: center;

    background: var(--gradient-membership);

    border: 1px solid var(--color-membership-border);

    border-radius: var(--radius-lg);

    box-shadow:
        var(--shadow-lg),
        var(--glow-membership);

}

.membership::before {

    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 1px;

    background: var(--gradient-membership-edge);

    pointer-events: none;

}

#membership-title {

    margin-bottom: var(--space-md);

    color: var(--color-text);

    text-shadow: var(--text-shadow-display);

}

/* =========================================================
   VIP List
========================================================= */

#vip-list {

    display: grid;

    gap: 12px;

    margin-bottom: var(--space-lg);

}

/* =========================================================
   VIP Benefits
========================================================= */

.vip-benefit {

    display: grid;

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

    align-items: center;

    gap: var(--space-sm);

    background: var(--gradient-content-card);

    border: 1px solid var(--color-content-border);

    border-radius: var(--radius-md);

    padding: var(--space-sm) var(--space-md);

    margin: 0;

    text-align: left;

}

.vip-benefit-marker {

    display: inline-grid;

    place-items: center;

    width: 28px;

    height: 28px;

    border: 1px solid var(--color-content-icon-border);

    border-radius: 50%;

    background: var(--color-content-icon-bg);

    color: var(--color-accent-electric);

    font-size: 1rem;

    font-weight: 700;

}

.vip-benefit-marker::before {

    content: "✓";

}

.vip-benefit-text {

    min-width: 0;

    color: var(--color-text);

    font-weight: 500;

    line-height: var(--line-height-cjk);

    overflow-wrap: anywhere;

}

/* =========================================================
   Telegram CTA
========================================================= */

#telegram-button {

    min-width: min(100%, 280px);

    min-height: 56px;

    max-width: 100%;

    padding: 16px 32px;

    font-weight: 700;

    box-shadow: var(--glow-telegram);

    white-space: normal;

    overflow-wrap: anywhere;

}

#telegram-button:hover {

    box-shadow: var(--glow-telegram);

}

#telegram-button:focus-visible {

    box-shadow:
        var(--shadow-focus),
        var(--glow-telegram);

}

/* =========================================================
   6. Social
========================================================= */

.social {

    position: relative;

    text-align: center;

}

.social::before,
.faq::before {

    content: "";

    position: absolute;

    inset: 0 0 auto;

    width: min(100%, var(--content-max-width));

    height: 1px;

    margin-inline: auto;

    background: var(--gradient-content-divider);

    pointer-events: none;

}

.social h2 {

    margin-bottom: var(--space-lg);

}

#social-list {

    display: grid;

    gap: var(--space-md);

}

/* =========================================================
   Social Card
========================================================= */

#social-list > .social-card {

    display: grid;

    align-items: center;

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

    gap: var(--space-md);

    min-height: 64px;

    padding: var(--space-sm) var(--space-md);

    background: var(--gradient-content-card);

    border: 1px solid var(--color-content-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    color: var(--color-text);

    font-weight: 600;

    text-align: left;

    overflow-wrap: anywhere;

    transition:
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}

#social-list > .social-card:hover {

    border-color: var(--color-accent);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}

.social-card:focus-visible {

    border-color: var(--color-focus);

    outline-offset: 3px;

    box-shadow: var(--shadow-focus);

}

.social-card-icon {

    display: grid;

    place-items: center;

    width: 36px;

    height: 36px;

    border: 1px solid var(--color-content-icon-border);

    border-radius: 50%;

    background: var(--color-content-icon-bg);

    color: var(--color-accent-electric);

}

.social-card-svg {

    display: block;

    width: 20px;

    height: 20px;

}

.social-card-title {

    min-width: 0;

    overflow-wrap: anywhere;

}

.social-card-arrow {

    color: var(--color-accent-secondary);

    font-size: 1.2rem;

    line-height: 1;

}

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

.faq {

    position: relative;

    text-align: center;

}

.faq h2 {

    margin-bottom: var(--space-lg);

}

#faq-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    max-width: var(--content-max-width);

    margin: 0 auto;

}

/* FAQ Surface */

#faq-list > .faq-item {

    position: relative;

    background: var(--gradient-content-card);

    border: 1px solid var(--color-content-border);

    border-radius: var(--radius-md);

    padding: var(--space-md);

    text-align: left;

}

#faq-list > .faq-item::before {

    content: "";

    position: absolute;

    inset: var(--space-md) auto var(--space-md) 0;

    width: 3px;

    border-radius: var(--radius-pill);

    background: linear-gradient(var(--color-accent), var(--color-accent-secondary));

}

/* Question */

#faq-list h3 {

    color: var(--color-text);

    margin-bottom: var(--space-xs);

}

/* Answer */

#faq-list p {

    color: var(--color-text-muted);

    line-height: var(--line-height-cjk);

    overflow-wrap: anywhere;

}

/* =========================================================
   Footer
========================================================= */

footer.site-footer {

    position: relative;

    margin-top: 0;

    padding: clamp(24px, 5vw, 40px) var(--page-gutter);

    background:
        linear-gradient(180deg, rgba(61, 25, 57, .2), transparent 72%),
        var(--color-bg-deep);

    border-top: 1px solid var(--color-border);

}

footer.site-footer::before {

    content: "";

    position: absolute;

    inset: -1px 0 auto;

    width: min(100%, var(--content-max-width));

    height: 1px;

    margin-inline: auto;

    background: var(--gradient-content-divider);

    pointer-events: none;

}

.footer-content {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: var(--space-xs) var(--space-sm);

    width: min(100%, var(--page-max-width));

    margin: 0 auto;

    text-align: center;

}

.footer-content p {

    color: var(--color-text-muted);

    font-size: var(--font-size-meta);

    line-height: var(--line-height-body);

    overflow-wrap: anywhere;

}

.footer-links {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 4px;

}

.footer-links a {

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    padding: 8px 10px;

    border-radius: var(--radius-sm);

    color: var(--color-text-muted);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition:
        color var(--transition),
        background-color var(--transition);

}

.footer-links a:hover {

    background: var(--color-accent-secondary-soft);

    color: var(--color-text);

}

.footer-links a:focus-visible {

    outline: 2px solid var(--color-focus);

    outline-offset: 2px;

    background: var(--color-accent-secondary-soft);

    color: var(--color-text);

}

/* =========================================================
   Desktop Layout
========================================================= */

@media (min-width:576px){

    .footer-content{

        justify-content:space-between;

        text-align:left;

    }

    .footer-links{

        justify-content:flex-end;

    }

    #social-list{

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

    }

}

@media (min-width:1200px){

    #social-list{

        grid-template-columns:repeat(3,1fr);

    }

}

/* =========================================================
   7. Responsive
   Mobile First
========================================================= */

/* ---------------------------------------------------------
   Small Mobile (<576px)
--------------------------------------------------------- */

@media (max-width:575px){

    .language-selector{

        margin:
            var(--space-sm)
            0
            var(--space-md);

    }

    .language-selector select{

        width:100%;

    }

    #telegram-button{

        width:100%;

    }

}

/* ---------------------------------------------------------
   Tablet (576~991px)
--------------------------------------------------------- */

/* =========================================================
   Responsive Utilities
========================================================= */

.responsive-image{

    width:100%;
    height:auto;
}

.full-width{

    width:100%;
}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.gap-sm{

    gap:var(--space-sm);

}

.gap-md{

    gap:var(--space-md);

}

.gap-lg{

    gap:var(--space-lg);

}

/* =========================================================
   8. Accessibility
========================================================= */

:focus-visible {

    outline: 3px solid var(--color-focus);

    outline-offset: 4px;

    box-shadow: var(--shadow-focus);

}

/* =========================================================
   Selection
========================================================= */

::selection {

    background: var(--color-accent-soft);

    color: var(--color-text);

}

/* =========================================================
   Smooth Transition
========================================================= */

a,
button,
.card,
.hero{

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

/* =========================================================
   Scrollbar
========================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-scrollbar-track);

}

::-webkit-scrollbar-thumb{

    background:var(--color-scrollbar-thumb);

    border-radius:var(--radius-pill);

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-scrollbar-thumb-hover);

}

/* =========================================================
   Reduce Motion
========================================================= */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* =========================================================
   End of File
========================================================= */