/*==================================================
  ANAY MAKWANA
  BASE STYLES
==================================================*/

/*==================================================
  DESIGN TOKENS
==================================================*/

:root{

    /* Layout */

    --container:1280px;

    --space-xs:16px;
    --space-sm:32px;
    --space-md:60px;
    --space-lg:90px;
    --space-xl:120px;
    --space-2xl:140px;

    /* Radius */

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:28px;
    --radius-xl:36px;
    --radius-pill:999px;

    /* Colours */

    --background:#08111f;

    --surface:#101827;

    --surface-light:#182132;

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

    --text:#f8fafc;

    --text-light:#cbd5e1;

    --text-muted:#94a3b8;

    --primary:#4f9cff;

    --secondary:#38bdf8;

    --primary-dark:#2563eb;

    --gradient:linear-gradient(
        135deg,
        #4f9cff,
        #38bdf8
    );

    /* Effects */

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --transition:.35s ease;

}

/*==================================================
  LIGHT MODE
==================================================*/

[data-theme="light"]{

    --background:#f7fafc;

    --surface:#ffffff;

    --surface-light:#eef3f8;

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

    --text:#08111f;

    --text-light:#475569;

    --text-muted:#64748b;

    --primary:#2563eb;

    --secondary:#38bdf8;

    --primary-dark:#1d4ed8;

    --gradient:linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );

    --shadow:0 18px 45px rgba(15,23,42,.10);

}

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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;

    transition:
        background .35s ease,
        color .35s ease;

}

/*==================================================
  GLOBAL TEXT
==================================================*/

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

    color:var(--text);

    font-weight:700;

}

p{

    color:var(--text-light);

}

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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:#243247;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/*==================================================
  GLOBAL ELEMENTS
==================================================*/

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    background:none;

    font:inherit;

    cursor:pointer;

}

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

.container{

    width:min(var(--container),90%);

    margin:0 auto;

}

section{

    position:relative;

    padding:var(--space-2xl) 0;

}

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

h1{

    font-size:clamp(3rem,6vw,5.8rem);

    line-height:1;

    letter-spacing:-3px;

    font-weight:800;

}

h2{

    font-size:clamp(2.4rem,4vw,4rem);

    line-height:1.1;

    margin-bottom:22px;

}

h3{

    font-size:1.45rem;

}

h4{

    font-size:1rem;

    font-weight:600;

}

p{

    font-size:1.05rem;

    line-height:1.8;

}

/*==================================================
  SECTION HEADINGS
==================================================*/

.section-heading{

    margin-bottom:80px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:var(--primary);

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

}

.section-tag::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--primary);

}

.section-intro{

    max-width:760px;

    color:var(--text-muted);

    line-height:1.8;

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

.btn-primary,
.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:16px 34px;

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

    font-weight:600;

    transition:var(--transition);

    white-space:nowrap;

}

.btn-primary{

    background:var(--gradient);

    color:#ffffff;

    box-shadow:0 12px 30px rgba(79,156,255,.25);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(79,156,255,.35);

}

.btn-secondary{

    background:var(--surface);

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

    color:var(--text);

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-3px);

}

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

.glass{

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

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

    backdrop-filter:blur(18px);

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

}

[data-theme="light"] .glass{

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

}

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

.text-gradient{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.shadow{

    box-shadow:var(--shadow);

}

.text-center{

    text-align:center;

}

.hidden{

    display:none !important;

}

.fade-in{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.fade-in.show{

    opacity:1;

    transform:translateY(0);

}