/*==================================================
 IshtiaqAli.com DESIGN SYSTEM
 --------------------------------------------------
 Project  : ishtiaqali.com
 Brand    : IshtiaqAli.com
 Owner    : Ishtiaq Ali

 Version  : 2.0
 Stage    : Foundation

 This file is the ONLY design system.

 Rules

 • No duplicated CSS
 • No hardcoded colors
 • No hardcoded spacing
 • Components consume variables only
 • WCAG 2.2 AA
 • Core Web Vitals Optimized
==================================================*/



/*==================================================
01. DESIGN TOKENS
==================================================*/

:root{

    /*==============================================
    BRAND
    ==============================================*/

    --brand-primary:#5B6CFF;
    --brand-primary-hover:#7080FF;

    --brand-secondary:#7C4DFF;

    --brand-accent:#27C5FF;

    --brand-success:#22C55E;

    --brand-warning:#F59E0B;

    --brand-danger:#EF4444;



    /*==============================================
    SURFACES
    ==============================================*/

    --surface-background:#050816;

    --surface-elevated:#0B1020;

    --surface-card:#111827;

    --surface-card-hover:#182235;

    --surface-overlay:#1B2436;

    --surface-glass:rgba(255,255,255,.04);

    --surface-glass-strong:rgba(255,255,255,.08);



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

    --text-primary:#F8FAFC;

    --text-secondary:#CBD5E1;

    --text-muted:#94A3B8;

    --text-disabled:#64748B;

    --text-on-brand:#FFFFFF;



    /*==============================================
    BORDERS
    ==============================================*/

    --border-subtle:rgba(255,255,255,.05);

    --border-default:rgba(255,255,255,.10);

    --border-strong:rgba(255,255,255,.18);

    --border-focus:var(--brand-primary);



    /*==============================================
    GRADIENTS
    ==============================================*/

    --gradient-primary:
        linear-gradient(
            135deg,
            #5B6CFF 0%,
            #7C4DFF 100%
        );

    --gradient-hero:
        radial-gradient(
            circle at top right,
            rgba(91,108,255,.18),
            transparent 45%
        );

    --gradient-card:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

    --gradient-border:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.03)
        );



    /*==============================================
    GLASS
    ==============================================*/

    --glass-background:rgba(255,255,255,.04);

    --glass-border:rgba(255,255,255,.08);

    --glass-blur:18px;



    /*==============================================
    SHADOWS
    ==============================================*/

    --shadow-xs:
        0 2px 8px rgba(0,0,0,.18);

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.24);

    --shadow-md:
        0 14px 38px rgba(0,0,0,.32);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.42);

    --shadow-glow:
        0 0 45px rgba(91,108,255,.22);



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

    --font-body:
        "Manrope",
        system-ui,
        sans-serif;

    --font-heading:
        "Plus Jakarta Sans",
        system-ui,
        sans-serif;

    --font-mono:
        "JetBrains Mono",
        monospace;



    /*==============================================
    FLUID TYPE SCALE
    ==============================================*/

    --display-xl:
        clamp(4rem,8vw,6.5rem);

    --display-lg:
        clamp(3rem,6vw,5rem);

    --heading-1:
        clamp(2.75rem,4vw,4rem);

    --heading-2:
        clamp(2rem,3vw,3rem);

    --heading-3:
        clamp(1.5rem,2vw,2rem);

    --heading-4:
        clamp(1.25rem,1.5vw,1.5rem);

    --body-lg:1.125rem;

    --body-md:1rem;

    --body-sm:.9375rem;

    --body-xs:.8125rem;



    /*==============================================
    FONT WEIGHTS
    ==============================================*/

    --weight-regular:400;

    --weight-medium:500;

    --weight-semibold:600;

    --weight-bold:700;

    --weight-extra-bold:800;



    /*==============================================
    LINE HEIGHT
    ==============================================*/

    --leading-display:1;

    --leading-heading:1.15;

    --leading-body:1.75;



    /*==============================================
    LETTER SPACING
    ==============================================*/

    --tracking-tight:-.04em;

    --tracking-normal:0;

    --tracking-wide:.08em;



    /*==============================================
    SPACING
    8 POINT SYSTEM
    ==============================================*/

    --space-1:.25rem;

    --space-2:.5rem;

    --space-3:.75rem;

    --space-4:1rem;

    --space-5:1.5rem;

    --space-6:2rem;

    --space-7:3rem;

    --space-8:4rem;

    --space-9:5rem;

    --space-10:6rem;

    --space-11:8rem;

    --space-12:10rem;



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

    --radius-xs:8px;

    --radius-sm:12px;

    --radius-md:16px;

    --radius-lg:20px;

    --radius-xl:28px;

    --radius-round:999px;



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

    --container-xs:720px;

    --container-sm:960px;

    --container:1200px;

    --container-lg:1320px;

    --container-xl:1440px;

    --section-padding:
        clamp(5rem,9vw,8rem);

    --content-gap:
        clamp(1.5rem,2vw,3rem);



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

    --header-height:84px;



    /*==============================================
    TRANSITIONS
    ==============================================*/

    --transition-fast:180ms;

    --transition-base:280ms;

    --transition-slow:500ms;

    --ease:cubic-bezier(.4,0,.2,1);



    /*==============================================
    Z INDEX
    ==============================================*/

    --z-base:1;

    --z-header:100;

    --z-dropdown:200;

    --z-overlay:500;

    --z-modal:1000;

}

/*==================================================
02. GLOBAL FOUNDATION
==================================================*/


/*==================================================
RESET
==================================================*/

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


/*==================================================
ROOT
==================================================*/

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

    text-rendering:optimizeLegibility;

}


html:focus-within{

    scroll-behavior:smooth;

}


/*==================================================
BODY
==================================================*/

body{

    min-height:100vh;

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

    color:var(--text-primary);

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

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

    font-weight:var(--weight-regular);

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

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text-primary);

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

    font-weight:var(--weight-extra-bold);

    line-height:var(--leading-heading);

    letter-spacing:var(--tracking-tight);

}


h1{

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

}


h2{

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

}


h3{

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

}


h4{

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

}


h5{

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

}


h6{

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

}


p{

    color:var(--text-secondary);

    max-width:68ch;

}


strong{

    font-weight:var(--weight-bold);

}


small{

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

    color:var(--text-muted);

}


/*==================================================
MEDIA
==================================================*/

img,
picture,
video,
canvas,
svg{

    display:block;

    max-width:100%;

    height:auto;

}


iframe{

    border:0;

}


/*==================================================
LINKS
==================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:

        color var(--transition-base) var(--ease),

        opacity var(--transition-base) var(--ease),

        transform var(--transition-base) var(--ease);

}


a:hover{

    color:var(--brand-primary);

}


a:focus-visible{

    outline:2px solid var(--brand-primary);

    outline-offset:4px;

}


/*==================================================
LISTS
==================================================*/

ul,
ol{

    list-style:none;

}


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

button{

    appearance:none;

    border:none;

    outline:none;

    background:none;

    color:inherit;

    cursor:pointer;

    font:inherit;

}


button:disabled{

    opacity:.45;

    cursor:not-allowed;

}


/*==================================================
FORMS
==================================================*/

input,
textarea,
select{

    appearance:none;

    border:none;

    outline:none;

    background:none;

    color:inherit;

    font:inherit;

}


textarea{

    resize:vertical;

}


/*==================================================
TABLES
==================================================*/

table{

    width:100%;

    border-collapse:collapse;

}


/*==================================================
HORIZONTAL RULE
==================================================*/

hr{

    height:1px;

    border:0;

    background:var(--border-default);

}


/*==================================================
TEXT SELECTION
==================================================*/

::selection{

    background:var(--brand-primary);

    color:#ffffff;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:var(--surface-background);

}


::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.18);

    border-radius:999px;

}


::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.30);

}

/*==================================================
SCROLLBAR — LIGHT THEME
==================================================*/

[data-theme="light"] ::-webkit-scrollbar-track{

    background:#F1F5F9;

}

[data-theme="light"] ::-webkit-scrollbar-thumb{

    background:#94A3B8;

    border:2px solid #F1F5F9;

    border-radius:999px;

}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover{

    background:#64748B;

}

[data-theme="light"]{

    scrollbar-color:#94A3B8 #F1F5F9;

}

/*==================================================
FOCUS
==================================================*/

:focus-visible{

    outline:2px solid var(--brand-primary);

    outline-offset:4px;

}


/*==================================================
TRANSITIONS
==================================================*/

button,
a,
input,
textarea,
select{

    transition:all var(--transition-base) var(--ease);

}


/*==================================================
ACCESSIBILITY
==================================================*/

[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;

}


/*==================================================
REDUCED MOTION
==================================================*/

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

    html{

        scroll-behavior:auto;

    }

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
03. LAYOUT SYSTEM
==================================================*/


/*==================================================
CONTAINERS
==================================================*/

.container{

    width:min(var(--container), calc(100% - 3rem));

    margin-inline:auto;

}

.container-sm{

    width:min(var(--container-sm), calc(100% - 3rem));

    margin-inline:auto;

}

.container-lg{

    width:min(var(--container-lg), calc(100% - 3rem));

    margin-inline:auto;

}

.container-xl{

    width:min(var(--container-xl), calc(100% - 3rem));

    margin-inline:auto;

}

.container-fluid{

    width:min(100%, calc(100% - 3rem));

    margin-inline:auto;

}


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

.section{

    position:relative;

    padding-block:var(--section-padding);

}

.section-sm{

    padding-block:var(--space-10);

}

.section-lg{

    padding-block:calc(var(--section-padding) * 1.4);

}

.section:first-of-type{

    padding-top:calc(var(--header-height) + var(--space-11));

}


/*==================================================
CONTENT WIDTH
==================================================*/

.content-xs{

    max-width:42rem;

}

.content-sm{

    max-width:52rem;

}

.content-md{

    max-width:68rem;

}

.content-lg{

    max-width:84rem;

}


/*==================================================
GRID
==================================================*/

.grid{

    display:grid;

    gap:var(--content-gap);

}

.grid-2{

    display:grid;

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

    gap:var(--content-gap);

}

.grid-3{

    display:grid;

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

    gap:var(--content-gap);

}

.grid-4{

    display:grid;

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

    gap:var(--content-gap);

}

.grid-auto{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:var(--content-gap);

}


/*==================================================
FLEX
==================================================*/

.flex{

    display:flex;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.items-start{

    align-items:flex-start;

}

.items-center{

    align-items:center;

}

.items-end{

    align-items:flex-end;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-end{

    justify-content:flex-end;

}

.gap-xs{

    gap:var(--space-2);

}

.gap-sm{

    gap:var(--space-4);

}

.gap{

    gap:var(--space-6);

}

.gap-lg{

    gap:var(--space-8);

}


/*==================================================
STACK
==================================================*/

.stack{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.stack-sm{

    gap:var(--space-4);

}

.stack-lg{

    gap:var(--space-8);

}


/*==================================================
FLOW
==================================================*/

.flow > * + *{

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

}

.flow-lg > * + *{

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

}

.flow-xl > * + *{

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

}


/*==================================================
TEXT ALIGNMENT
==================================================*/

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/*==================================================
DISPLAY
==================================================*/

.block{

    display:block;

}

.inline{

    display:inline;

}

.inline-flex{

    display:inline-flex;

}

.hidden{

    display:none !important;

}


/*==================================================
WIDTH
==================================================*/

.w-full{

    width:100%;

}

.h-full{

    height:100%;

}


/*==================================================
POSITION
==================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.sticky{

    position:sticky;

}


/*==================================================
OVERFLOW
==================================================*/

.overflow-hidden{

    overflow:hidden;

}


/*==================================================
MARGIN AUTO
==================================================*/

.mx-auto{

    margin-inline:auto;

}

.ml-auto{

    margin-left:auto;

}

.mr-auto{

    margin-right:auto;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1024px){

    .grid-4{

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

    }

}

@media (max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

    .container,

    .container-sm,

    .container-lg,

    .container-xl,

    .container-fluid{

        width:min(100%, calc(100% - 2rem));

    }

}

/*==================================================
04. UI COMPONENTS
==================================================*/


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    min-height:56px;

    padding:0 2rem;

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

    border:1px solid transparent;

    cursor:pointer;

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

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

    font-weight:var(--weight-semibold);

    white-space:nowrap;

    transition:
        all var(--transition-base) var(--ease);

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:active{

    transform:translateY(0);

}



/* Primary */

.btn-primary{

    color:var(--text-on-brand);

    background:var(--gradient-primary);

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

}

.btn-primary:hover{

    filter:brightness(1.08);

}



/* Secondary */

.btn-secondary{

    background:var(--surface-card);

    color:var(--text-primary);

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

}

.btn-secondary:hover{

    border-color:var(--brand-primary);

}



/* Ghost */

.btn-ghost{

    color:var(--text-primary);

}

.btn-ghost:hover{

    background:var(--surface-glass);

}



/* Outline */

.btn-outline{

    border:1px solid var(--brand-primary);

    color:var(--brand-primary);

}

.btn-outline:hover{

    background:rgba(91,108,255,.10);

}



/* Small */

.btn-sm{

    min-height:44px;

    padding:0 1.25rem;

}



/* Large */

.btn-lg{

    min-height:64px;

    padding:0 2.75rem;

}



/* Full Width */

.btn-block{

    width:100%;

}



/*==================================================
CARDS
==================================================*/

.card{

    position:relative;

    overflow:hidden;

    padding:var(--space-7);

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

    background:var(--gradient-card);

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

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

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

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(91,108,255,.35);

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

}



/*==================================================
GLASS
==================================================*/

.glass{

    background:var(--glass-background);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

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

}



/*==================================================
BADGES
==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.55rem 1rem;

    border-radius:999px;

    background:rgba(91,108,255,.12);

    color:var(--brand-primary);

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

    font-weight:var(--weight-semibold);

    letter-spacing:.04em;

    text-transform:uppercase;

}



/*==================================================
EYEBROW
==================================================*/

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    color:var(--brand-accent);

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

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.eyebrow::before{

    content:"";

    width:36px;

    height:2px;

    background:var(--brand-primary);

}



/*==================================================
ICON BOX
==================================================*/

.icon-box{

    display:grid;

    place-items:center;

    width:64px;

    height:64px;

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

    background:rgba(91,108,255,.10);

    color:var(--brand-primary);

}



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

.section-header{

    display:flex;

    flex-direction:column;

    gap:var(--space-5);

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

}

/*
.section-title{

    max-width:14ch;

}
*/
.section-description{

    max-width:62ch;

}



/*==================================================
TEXT UTILITIES
==================================================*/

.text-gradient{

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.text-muted{

    color:var(--text-muted);

}

.text-secondary{

    color:var(--text-secondary);

}



/*==================================================
DIVIDER
==================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border-default);

}



/*==================================================
SURFACE HELPERS
==================================================*/

.surface{

    background:var(--surface-card);

}

.surface-elevated{

    background:var(--surface-elevated);

}



/*==================================================
HOVER GLOW
==================================================*/

.hover-glow{

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

}

.hover-glow:hover{

    transform:translateY(-6px);

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

}



/*==================================================
ANIMATED BORDER
==================================================*/

.gradient-border{

    position:relative;

}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:inherit;

    background:var(--gradient-border);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}



/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:768px){

    .card{

        padding:var(--space-6);

    }

    .section-header{

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

    }

    .btn{

        width:100%;

    }

}

/*==================================================
05. THEME SYSTEM
==================================================*/


/*==================================================
LIGHT THEME
==================================================*/

[data-theme="light"]{

    --surface-background:#F8FAFC;

    --surface-elevated:#FFFFFF;

    --surface-card:#FFFFFF;

    --surface-card-hover:#F1F5F9;

    --surface-overlay:#E2E8F0;

    --surface-glass:rgba(255,255,255,.80);

    --surface-glass-strong:rgba(255,255,255,.92);

    --text-primary:#0F172A;

    --text-secondary:#334155;

    --text-muted:#64748B;

    --text-disabled:#94A3B8;

    --border-subtle:rgba(15,23,42,.05);

    --border-default:rgba(15,23,42,.10);

    --border-strong:rgba(15,23,42,.18);

    --glass-background:rgba(255,255,255,.75);

    --glass-border:rgba(15,23,42,.08);

}


/*==================================================
DARK THEME
==================================================*/

[data-theme="dark"]{

    color-scheme:dark;

}


/*==================================================
SPACING UTILITIES
==================================================*/

.mt-auto{margin-top:auto;}

.mb-auto{margin-bottom:auto;}

.mx-auto{margin-inline:auto;}

.my-auto{margin-block:auto;}

.mt-0{margin-top:0;}

.mt-1{margin-top:var(--space-1);}

.mt-2{margin-top:var(--space-2);}

.mt-3{margin-top:var(--space-3);}

.mt-4{margin-top:var(--space-4);}

.mt-5{margin-top:var(--space-5);}

.mt-6{margin-top:var(--space-6);}

.mt-7{margin-top:var(--space-7);}

.mt-8{margin-top:var(--space-8);}

.mb-4{margin-bottom:var(--space-4);}

.mb-6{margin-bottom:var(--space-6);}

.mb-8{margin-bottom:var(--space-8);}

.p-4{padding:var(--space-4);}

.p-5{padding:var(--space-5);}

.p-6{padding:var(--space-6);}

.p-7{padding:var(--space-7);}

.p-8{padding:var(--space-8);}


/*==================================================
DISPLAY UTILITIES
==================================================*/

.d-none{

    display:none !important;

}

.d-block{

    display:block;

}

.d-inline{

    display:inline;

}

.d-inline-block{

    display:inline-block;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}


/*==================================================
ALIGNMENT
==================================================*/

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.text-balance{

    text-wrap:balance;

}


/*==================================================
OBJECT FIT
==================================================*/

.object-cover{

    object-fit:cover;

}

.object-contain{

    object-fit:contain;

}


/*==================================================
BORDER RADIUS
==================================================*/

.rounded-sm{

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

}

.rounded{

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

}

.rounded-lg{

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

}

.rounded-xl{

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

}

.rounded-full{

    border-radius:999px;

}


/*==================================================
SHADOW UTILITIES
==================================================*/

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}

.shadow-glow{

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

}


/*==================================================
ANIMATION UTILITIES
==================================================*/

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.float{

    animation:float 6s ease-in-out infinite;

}

.pulse{

    animation:pulse 2.8s infinite;

}


/*==================================================
KEYFRAMES
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


@keyframes pulse{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.75;

    }

}


/*==================================================
RESPONSIVE HELPERS
==================================================*/

@media (max-width:1024px){

    .hide-tablet{

        display:none !important;

    }

}

@media (max-width:768px){

    .hide-mobile{

        display:none !important;

    }

    .text-center-mobile{

        text-align:center;

    }

    .stack-mobile{

        display:flex;

        flex-direction:column;

    }

}

@media (min-width:769px){

    .hide-desktop{

        display:none !important;

    }

}


/*==================================================
PRINT
==================================================*/

@media print{

    *{

        background:transparent !important;

        color:#000 !important;

        box-shadow:none !important;

        text-shadow:none !important;

    }

    a{

        text-decoration:underline;

    }

}

/*==================================================
IshtiaqAli.com — LIGHT THEME SECTION SYSTEM
==================================================*/

[data-theme="light"]{

    --section-surface-primary:#F8FAFC;
    --section-surface-secondary:#F1F5F9;
    --section-surface-deep:#EAF0F8;

    --section-panel:#FFFFFF;
    --section-panel-soft:rgba(255,255,255,.72);

    --section-border:rgba(15,23,42,.09);

    --section-shadow:
        0 24px 60px rgba(15,23,42,.08);

}


/*==================================================
END OF DESIGN SYSTEM
==================================================*/

/*

IshtiaqAli.com Design System v2.0

Single Source of Truth

Build Once.
Use Everywhere.

*/