/*==================================================
MAGUDALI - FLUENT DESIGN SYSTEM
Design Tokens & Global Utilities
==================================================*/

:root {

    /*=====================================
FLUENT DARK THEME - COLORS
=====================================*/

    /* Backgrounds (Mica) */
    --fluent-bg-base: #131313;
    --fluent-bg-layer1: #1C1C1C;
    --fluent-bg-layer2: #232323;
    --fluent-bg-layer3: #2A2A2A;
    --fluent-bg-layer4: #313131;

    /* Surfaces */
    --fluent-surface-card: rgba(255, 255, 255, 0.0515);
    --fluent-surface-card-hover: rgba(255, 255, 255, 0.0789);
    --fluent-surface-card-active: rgba(255, 255, 255, 0.0337);
    --fluent-surface-subtle: rgba(255, 255, 255, 0.0375);

    /* Text */
    --fluent-text-primary: #FFFFFF;
    --fluent-text-secondary: #CFCFCF;
    --fluent-text-tertiary: #9E9E9E;
    --fluent-text-disabled: #6D6D6D;
    --fluent-text-on-accent: #000000;

    /* Accent (Fluent Blue) */
    --fluent-accent: #60CDFF;
    --fluent-accent-hover: #78D4FF;
    --fluent-accent-pressed: #4CC2F0;
    --fluent-accent-dark: #005A9E;
    --fluent-accent-subtle: rgba(96, 205, 255, 0.08);
    --fluent-accent-subtle-hover: rgba(96, 205, 255, 0.12);

    /* Semantic Colors */
    --fluent-orange: #F7630C;
    --fluent-orange-subtle: rgba(247, 99, 12, 0.08);
    --fluent-purple: #8764B8;
    --fluent-purple-subtle: rgba(135, 100, 184, 0.08);
    --fluent-green: #107C10;
    --fluent-green-subtle: rgba(16, 124, 16, 0.08);
    --fluent-red: #E74856;
    --fluent-red-subtle: rgba(231, 72, 86, 0.08);
    --fluent-teal: #038387;
    --fluent-teal-subtle: rgba(3, 131, 135, 0.08);
    --fluent-gold: #FFB900;
    --fluent-gold-subtle: rgba(255, 185, 0, 0.08);

    /* Borders */
    --fluent-border: rgba(255, 255, 255, 0.0698);
    --fluent-border-subtle: rgba(255, 255, 255, 0.0449);
    --fluent-border-strong: rgba(255, 255, 255, 0.1215);
    --fluent-border-on-accent: rgba(255, 255, 255, 0.3);

    /* Dividers */
    --fluent-divider: rgba(255, 255, 255, 0.0802);

    /*=====================================
FLUENT DEPTH - SHADOWS
=====================================*/

    --fluent-shadow-2:
        0 1px 2px rgba(0, 0, 0, 0.16),
        0 0px 2px rgba(0, 0, 0, 0.12);

    --fluent-shadow-4:
        0 2px 4px rgba(0, 0, 0, 0.14),
        0 0px 2px rgba(0, 0, 0, 0.12);

    --fluent-shadow-8:
        0 4px 8px rgba(0, 0, 0, 0.14),
        0 0px 2px rgba(0, 0, 0, 0.12);

    --fluent-shadow-16:
        0 8px 16px rgba(0, 0, 0, 0.14),
        0 0px 2px rgba(0, 0, 0, 0.12);

    --fluent-shadow-28:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 0px 2px rgba(0, 0, 0, 0.12);

    --fluent-shadow-64:
        0 32px 64px rgba(0, 0, 0, 0.24),
        0 0px 2px rgba(0, 0, 0, 0.12);

    /* Brand glow */
    --fluent-glow:
        0 8px 32px rgba(96, 205, 255, 0.18),
        0 0px 2px rgba(96, 205, 255, 0.12);

    /*=====================================
FLUENT TYPOGRAPHY
=====================================*/

    --font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Type Ramp (Fluent scale) */
    --fluent-type-caption: 12px;
    --fluent-type-body-1: 14px;
    --fluent-type-body-2: 14px;
    --fluent-type-subtitle-1: 16px;
    --fluent-type-subtitle-2: 20px;
    --fluent-type-title-1: 28px;
    --fluent-type-title-2: 32px;
    --fluent-type-title-3: 40px;
    --fluent-type-display: 68px;

    /*=====================================
FLUENT SPACING (4px grid)
=====================================*/

    --fluent-space-xxs: 2px;
    --fluent-space-xs: 4px;
    --fluent-space-s: 8px;
    --fluent-space-m: 12px;
    --fluent-space-l: 16px;
    --fluent-space-xl: 24px;
    --fluent-space-xxl: 32px;
    --fluent-space-xxxl: 40px;
    --fluent-space-xxxxl: 48px;
    --fluent-space-xxxxxl: 64px;

    /*=====================================
FLUENT RADIUS
=====================================*/

    --fluent-radius-sm: 4px;
    --fluent-radius-md: 8px;
    --fluent-radius-lg: 12px;
    --fluent-radius-xl: 16px;
    --fluent-radius-circular: 9999px;

    /*=====================================
FLUENT MOTION
=====================================*/

    --fluent-duration-fast: 83ms;
    --fluent-duration-normal: 150ms;
    --fluent-duration-slow: 250ms;
    --fluent-duration-slower: 400ms;
    --fluent-ease-default: cubic-bezier(0.33, 0, 0.67, 1);
    --fluent-ease-decelerate: cubic-bezier(0, 0, 0, 1);
    --fluent-ease-accelerate: cubic-bezier(1, 0, 1, 1);
    --fluent-ease-standard: cubic-bezier(0.8, 0, 0.2, 1);

    /*=====================================
FLUENT ACRYLIC
=====================================*/

    --fluent-acrylic-bg: rgba(44, 44, 44, 0.96);
    --fluent-acrylic-blur: blur(40px) saturate(125%);

    /*=====================================
LAYOUT
=====================================*/

    --container-max: 1200px;
    --header-height: 56px;

}

/*=====================================
GLOBAL CONTAINER
=====================================*/

.container {

    width: min(92%, var(--container-max));

    margin: 0 auto;

}

/*=====================================
SECTIONS
=====================================*/

section {

    padding: 120px 0;

    position: relative;

}

/*=====================================
SECTION HEADER
=====================================*/

.section-header {

    text-align: center;

    margin-bottom: 64px;

    position: relative;

}

.section-header-deco {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-bottom: 20px;

}

.deco-line {

    display: block;

    height: 1px;

    width: 0;

    background: linear-gradient(90deg, transparent, rgba(96, 205, 255, 0.5), transparent);

    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);

}

.section-header.revealed .deco-line {

    width: 80px;

}

.deco-line-left {

    background: linear-gradient(90deg, transparent, rgba(96, 205, 255, 0.5));

}

.deco-line-right {

    background: linear-gradient(90deg, rgba(96, 205, 255, 0.5), transparent);

}

.section-badge {

    display: inline-block;

    padding: 8px 20px;

    border-radius: var(--fluent-radius-circular);

    background: var(--fluent-accent-subtle);

    color: var(--fluent-accent);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: var(--fluent-type-caption);

    font-weight: 700;

    border: 1px solid rgba(96, 205, 255, 0.2);

    position: relative;

    overflow: hidden;

    box-shadow: 0 0 20px rgba(96, 205, 255, 0.1);

}

.section-badge::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: conic-gradient(from 0deg, transparent, rgba(96, 205, 255, 0.15), transparent 30%);

    animation: badgeRotate 4s linear infinite;

    opacity: 0;

    transition: opacity 0.3s;

}

.section-header.revealed .section-badge::before {

    opacity: 1;

}

@keyframes badgeRotate {

    100% { transform: rotate(360deg); }

}

.section-header h2 {

    font-size: clamp(2.2rem, 5vw, 3.5rem);

    font-weight: 800;

    line-height: 1.1;

    color: var(--fluent-text-primary);

    letter-spacing: -1px;

    margin-bottom: 8px;

}

.section-header-underline {

    width: 0;

    height: 3px;

    margin: 0 auto 20px;

    background: linear-gradient(90deg, #60CDFF, #8764B8, #60CDFF);

    border-radius: 2px;

    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;

}

.section-header.revealed .section-header-underline {

    width: 60px;

}

.accent-text {

    background: linear-gradient(135deg, #60CDFF, #005A9E);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}

.section-header p {

    margin-top: 16px;

    color: var(--fluent-text-secondary);

    font-size: var(--fluent-type-subtitle-1);

    max-width: 560px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.6;

}

/*=====================================
FLUENT CARD (Acrylic Material)
=====================================*/

.fluent-card {

    background: var(--fluent-surface-card);

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

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

    backdrop-filter: blur(40px) saturate(125%);

    -webkit-backdrop-filter: blur(40px) saturate(125%);

    position: relative;

    overflow: hidden;

    transition:

        transform var(--fluent-duration-slow) var(--fluent-ease-default),

        border-color var(--fluent-duration-slow) var(--fluent-ease-default),

        background var(--fluent-duration-slow) var(--fluent-ease-default),

        box-shadow var(--fluent-duration-slow) var(--fluent-ease-default);

}

/* Reveal Border Effect */
.fluent-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: radial-gradient(

        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),

        rgba(96, 205, 255, 0.1),

        transparent 40%

    );

    z-index: 0;

    pointer-events: none;

    opacity: 0;

    transition: opacity var(--fluent-duration-slow) var(--fluent-ease-default);

}

.fluent-card:hover::before {

    opacity: 1;

}

.fluent-card > * {

    position: relative;

    z-index: 1;

}

/* Depth variants */
.depth-1 {

    box-shadow: var(--fluent-shadow-4);

}

.depth-1:hover {

    box-shadow: var(--fluent-shadow-8);

    transform: translateY(-2px);

}

.depth-2 {

    box-shadow: var(--fluent-shadow-16);

}

.depth-2:hover {

    box-shadow: var(--fluent-shadow-28);

}

.accent-glow:hover {

    box-shadow:

        var(--fluent-shadow-16),

        0 0 40px rgba(96, 205, 255, 0.1);

}

/*=====================================
BUTTONS
=====================================*/

.btn-accent {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 32px;

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

    background: var(--fluent-accent);

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

    font-weight: 600;

    font-size: var(--fluent-type-body-2);

    transition:

        background var(--fluent-duration-normal) var(--fluent-ease-default),

        transform var(--fluent-duration-normal) var(--fluent-ease-default),

        box-shadow var(--fluent-duration-normal) var(--fluent-ease-default);

    box-shadow: var(--fluent-shadow-4);

    cursor: pointer;

}

.btn-accent:hover {

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

    transform: translateY(-1px);

    box-shadow: var(--fluent-shadow-8);

}

.btn-accent:active {

    background: var(--fluent-accent-pressed);

    transform: translateY(0);

    box-shadow: var(--fluent-shadow-2);

}

.btn-subtle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 32px;

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

    background: transparent;

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

    color: var(--fluent-text-primary);

    font-weight: 600;

    font-size: var(--fluent-type-body-2);

    transition:

        background var(--fluent-duration-normal) var(--fluent-ease-default),

        border-color var(--fluent-duration-normal) var(--fluent-ease-default),

        transform var(--fluent-duration-normal) var(--fluent-ease-default);

    cursor: pointer;

}

.btn-subtle:hover {

    background: var(--fluent-surface-card-hover);

    border-color: var(--fluent-text-tertiary);

    transform: translateY(-1px);

}

.btn-subtle:active {

    background: var(--fluent-surface-card-active);

    transform: translateY(0);

}

.btn-full {

    width: 100%;

    padding: 16px 32px;

}

/*=====================================
FLUENT TAGS
=====================================*/

.fluent-tag {

    display: inline-block;

    padding: 4px 10px;

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

    font-size: var(--fluent-type-caption);

    font-weight: 600;

    letter-spacing: 0.2px;

}

.fluent-tag.orange {

    background: var(--fluent-orange-subtle);

    color: var(--fluent-orange);

}

.fluent-tag.purple {

    background: var(--fluent-purple-subtle);

    color: var(--fluent-purple);

}

.fluent-tag.green {

    background: var(--fluent-green-subtle);

    color: var(--fluent-green);

}

.fluent-tag.red {

    background: var(--fluent-red-subtle);

    color: var(--fluent-red);

}

.fluent-tag.teal {

    background: var(--fluent-teal-subtle);

    color: var(--fluent-teal);

}

.fluent-tag.gold {

    background: var(--fluent-gold-subtle);

    color: var(--fluent-gold);

}

/*=====================================
REVEAL ANIMATION
=====================================*/

.reveal-fade {

    opacity: 0;

    transform: translateY(20px);

}

.reveal-fade.revealed {

    opacity: 1;

    transform: translateY(0);

    transition:

        opacity 0.5s var(--fluent-ease-decelerate),

        transform 0.5s var(--fluent-ease-decelerate);

}