/* ==========================================================================
   Moon Apps Gallery — Global Theme
   --------------------------------------------------------------------------
   THIS IS THE ONE FILE THAT CONTROLS THE LOOK OF THE WHOLE SITE.

   1. Design tokens  – colors, fonts, radius, shadows, spacing
   2. Base           – page-wide defaults
   3. Layout         – header, navigation, footer, page hero
   4. Components     – buttons, cards, chips, app cards, feature cards
   5. Utilities      – small helpers (gradient text, reveal animation)

   Colors are written as "R G B" triplets so Tailwind classes such as
   text-indigo-600 or bg-gray-50 (used inside page content) automatically
   follow these values (see /_dev/tailwind.config.js).
   Change a value here → it changes everywhere. No build step needed.
   ========================================================================== */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
    /* Brand (violet – from the logo) */
    --brand-50: 245 243 255;
    --brand-100: 237 233 254;
    --brand-200: 221 214 254;
    --brand-300: 196 181 253;
    --brand-400: 167 139 250;
    --brand-500: 139 92 246;
    --brand-600: 124 58 237;
    --brand-700: 109 40 217;
    --brand-800: 91 33 182;
    --brand-900: 76 29 149;
    --brand-950: 46 16 101;

    /* Accents (teal + pink – from the logo wordmark) */
    --accent-teal: 45 212 191;
    --accent-pink: 236 72 153;

    /* Neutrals (cool slate) */
    --gray-50: 248 250 252;
    --gray-100: 241 245 249;
    --gray-200: 226 232 240;
    --gray-300: 203 213 225;
    --gray-400: 148 163 184;
    --gray-500: 100 116 139;
    --gray-600: 71 85 105;
    --gray-700: 51 65 85;
    --gray-800: 30 41 59;
    --gray-900: 15 23 42;
    --gray-950: 2 6 23;

    /* Night (hero + footer background, matches the logo badge) */
    --night-900: 9 14 30;
    --night-800: 15 23 46;
    --night-700: 26 36 68;

    /* Semantic */
    --color-bg: var(--gray-50);
    --color-surface: 255 255 255;
    --color-text: var(--gray-700);
    --color-heading: var(--gray-900);
    --color-muted: var(--gray-500);
    --color-border: var(--gray-200);
    --color-link: var(--brand-600);

    /* Gradients */
    --gradient-brand: linear-gradient(90deg, rgb(var(--accent-teal)) 0%, rgb(var(--accent-pink)) 50%, rgb(var(--brand-500)) 100%);
    --gradient-button: linear-gradient(135deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-800)) 100%);
    --gradient-night: radial-gradient(1200px 600px at 85% -10%, rgb(var(--brand-600) / .35), transparent 60%),
                      radial-gradient(900px 500px at 0% 110%, rgb(var(--accent-teal) / .18), transparent 60%),
                      linear-gradient(180deg, rgb(var(--night-800)) 0%, rgb(var(--night-900)) 100%);

    /* Typography */
    --font-sans: "Inter", "Hind Siliguri", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-bangla: "Hind Siliguri", "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Shape & depth */
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgb(var(--gray-900) / .05);
    --shadow-md: 0 4px 16px -4px rgb(var(--gray-900) / .08), 0 2px 4px -2px rgb(var(--gray-900) / .04);
    --shadow-lg: 0 20px 40px -12px rgb(var(--gray-900) / .14);
    --shadow-glow: 0 10px 30px -8px rgb(var(--brand-600) / .45);

    /* Layout */
    --header-height: 4.25rem;
    --container-max: 1200px;
    --transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* 2. BASE ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body {
    font-family: var(--font-sans);
    background-color: rgb(var(--color-bg));
    color: rgb(var(--color-text));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--brand-200)); color: rgb(var(--brand-950)); }
:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; border-radius: 4px; }
[x-cloak], [hidden] { display: none !important; }
img { height: auto; }
.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 100;
    background: rgb(var(--brand-600)); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-sm);
    transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* 3. LAYOUT -------------------------------------------------------------- */

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgb(255 255 255 / .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgb(var(--color-border) / .8);
    transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: rgb(255 255 255 / .94); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; }
.brand__logo { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.brand__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }

/* Desktop navigation */
.main-nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .main-nav { display: flex; } }
.nav-link {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .5rem .625rem; border-radius: var(--radius-sm);
    font-size: .9rem; font-weight: 500; color: rgb(var(--gray-600));
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: rgb(var(--brand-700)); background: rgb(var(--brand-50)); }
.nav-link.is-active { color: rgb(var(--brand-700)); }
.nav-link__chevron { width: 1rem; height: 1rem; transition: transform var(--transition); }
.nav-link[aria-expanded="true"] .nav-link__chevron { transform: rotate(180deg); }
.nav-cta { margin-left: .5rem; }

.dropdown { position: relative; }
.dropdown__panel {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 17rem; z-index: 60;
    background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.dropdown.is-open .dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__item {
    display: block; padding: .625rem .75rem; border-radius: var(--radius-sm);
    font-size: .875rem; font-weight: 500; color: rgb(var(--gray-700)); text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.dropdown__item:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.dropdown__item + .dropdown__item--divider { margin-top: .25rem; border-top: 1px solid rgb(var(--gray-100)); padding-top: .75rem; }

/* Mobile navigation */
.menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface));
    color: rgb(var(--gray-700)); cursor: pointer;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 1.375rem; height: 1.375rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
    border-top: 1px solid rgb(var(--color-border));
    background: rgb(var(--color-surface));
    max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    padding: .75rem 0 1.25rem;
}
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
.mobile-nav__group { padding: .5rem 0; }
.mobile-nav__label {
    display: block; padding: .5rem .75rem .25rem; font-size: .6875rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--gray-400));
}
.mobile-nav__link {
    display: block; padding: .625rem .75rem; border-radius: var(--radius-sm);
    font-weight: 500; color: rgb(var(--gray-700)); text-decoration: none;
}
.mobile-nav__link:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }

/* Page hero (inner pages) */
.page-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--gradient-night); color: #fff;
    padding: 3.5rem 0 6.5rem; text-align: center;
}
@media (min-width: 768px) { .page-hero { padding: 4.5rem 0 8rem; } }
.page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(rgb(255 255 255 / .6) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
}
.page-hero__icon {
    width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; border-radius: var(--radius-lg);
    overflow: hidden; background: #fff; padding: .25rem;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6);
}
.page-hero__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - .25rem); }
.page-hero__title {
    font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
    color: #fff; margin: .75rem 0 .75rem;
}
.page-hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgb(var(--gray-300)); font-weight: 500; max-width: 42rem; margin: 0 auto; }
.page-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.page-hero__meta span {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .8125rem; color: rgb(var(--gray-300));
    background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12);
    padding: .3125rem .75rem; border-radius: var(--radius-full);
}

/* Page body: content lifts over the hero */
.page-body { position: relative; margin-top: -4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .page-body { margin-top: -5rem; padding-bottom: 6rem; } }

/* Footer */
.site-footer { background: rgb(var(--night-900)); color: rgb(var(--gray-400)); margin-top: 0; }
.site-footer a { color: rgb(var(--gray-300)); text-decoration: none; transition: color var(--transition); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: 2.5rem; padding: 3.5rem 0 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.site-footer__list { display: grid; gap: .625rem; font-size: .9375rem; }
.site-footer__bottom {
    display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between;
    border-top: 1px solid rgb(255 255 255 / .08); padding: 1.5rem 0; font-size: .875rem;
}
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; } }
.social { display: flex; gap: .5rem; }
.social a {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: var(--radius-full); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1);
}
.social a:hover { background: rgb(var(--brand-600)); border-color: transparent; }
.social svg { width: 1.125rem; height: 1.125rem; }

/* 4. COMPONENTS ---------------------------------------------------------- */

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
    padding: .875rem 1.5rem; border-radius: var(--radius-md);
    font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn img, .btn svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; border-radius: var(--radius-sm); }
.btn-primary { background: var(--gradient-button); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { box-shadow: 0 14px 34px -8px rgb(var(--brand-600) / .6); color: #fff; }
.btn-light { background: #fff; color: rgb(var(--gray-900)); box-shadow: var(--shadow-md); }
.btn-light:hover { box-shadow: var(--shadow-lg); }
.btn-glass { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .2); }
.btn-glass:hover { background: rgb(255 255 255 / .14); }
.btn-outline { background: #fff; color: rgb(var(--gray-800)); border-color: rgb(var(--color-border)); }
.btn-outline:hover { border-color: rgb(var(--brand-300)); color: rgb(var(--brand-700)); }

/* Chips / eyebrow */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .375rem .875rem; border-radius: var(--radius-full);
    color: rgb(var(--brand-200)); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14);
}
.eyebrow--light { color: rgb(var(--brand-700)); background: rgb(var(--brand-50)); border-color: rgb(var(--brand-100)); }
.eyebrow__dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(var(--accent-teal)); box-shadow: 0 0 0 4px rgb(var(--accent-teal) / .2); }

/* Sections */
.section { padding: 4.5rem 0; }
@media (min-width: 768px) { .section { padding: 6.5rem 0; } }
.section--alt { background: #fff; border-top: 1px solid rgb(var(--color-border)); border-bottom: 1px solid rgb(var(--color-border)); }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: rgb(var(--color-heading)); margin: .875rem 0 .75rem; }
.section-lead { font-size: 1.0625rem; color: rgb(var(--gray-600)); }

/* Cards */
.card {
    background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 1.5rem;
}
@media (min-width: 768px) { .card { padding: 2rem; } }
.card--compact { padding: 1.5rem; }
.card--accent { background: linear-gradient(180deg, rgb(var(--brand-50)), #fff); border-color: rgb(var(--brand-200)); }
.card-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: rgb(var(--color-heading)); margin-bottom: 1rem; }
@media (min-width: 768px) { .card-title { font-size: 1.5rem; } }

/* App cards (home) */
.app-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgb(var(--brand-200)); }
.app-card__media {
    position: relative; height: 16rem; display: flex; align-items: flex-end; justify-content: center;
    padding: 1.5rem 1.5rem 0; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, rgb(var(--brand-100)), rgb(var(--gray-50)) 70%);
}
.app-card__media img { max-height: 100%; width: auto; object-fit: contain; transition: transform 400ms ease; }
.app-card:hover .app-card__media img { transform: translateY(-6px) scale(1.03); }
.app-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.app-card__head { display: flex; align-items: center; gap: .875rem; margin-bottom: .875rem; }
.app-card__icon { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); flex-shrink: 0; }
.app-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.app-card__title { font-size: 1.25rem; font-weight: 700; color: rgb(var(--color-heading)); line-height: 1.3; }
.app-card__tag { display: inline-block; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: rgb(var(--brand-700)); background: rgb(var(--brand-50)); padding: .125rem .5rem; border-radius: var(--radius-full); }
.app-card__text { color: rgb(var(--gray-600)); margin-bottom: 1.25rem; flex: 1; }
.app-card__links { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Store link pill */
.store-link {
    display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600;
    padding: .4375rem .75rem; border-radius: var(--radius-full); text-decoration: none;
    color: rgb(var(--gray-700)); background: rgb(var(--gray-100)); transition: background var(--transition), color var(--transition);
}
.store-link:hover { background: rgb(var(--brand-600)); color: #fff; }
.store-link img { width: 1rem; height: 1rem; }

/* Feature cards */
.feature-card {
    text-align: center; padding: 2rem 1.5rem; background: #fff; border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-card h3 { font-size: 1.25rem; font-weight: 700; color: rgb(var(--color-heading)); margin-bottom: .5rem; }
.feature-card p { color: rgb(var(--gray-600)); }
.icon-badge {
    display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
    border-radius: var(--radius-lg); margin-bottom: 1.25rem; color: #fff;
    background: var(--gradient-button); box-shadow: var(--shadow-glow);
}
.icon-badge svg { width: 1.75rem; height: 1.75rem; }

/* Contact list */
.contact-list { display: grid; gap: .75rem; }
.contact-item {
    display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: var(--radius-md);
    background: rgb(var(--gray-50)); border: 1px solid rgb(var(--gray-100)); color: rgb(var(--gray-700)); text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
a.contact-item:hover { border-color: rgb(var(--brand-200)); background: rgb(var(--brand-50)); }
.contact-item__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: #fff; color: rgb(var(--brand-600)); box-shadow: var(--shadow-sm); }
.contact-item__icon svg { width: 1.25rem; height: 1.25rem; }
.contact-item__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.contact-item__value { display: block; font-weight: 600; color: rgb(var(--gray-900)); word-break: break-word; }

/* Home hero */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--gradient-night); color: #fff; }
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
    background-image: radial-gradient(rgb(255 255 255 / .7) 1px, transparent 1px); background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 5%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 5%, transparent 65%);
}
.hero__inner { display: grid; gap: 3rem; align-items: center; padding: 4rem 0 4.5rem; }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.1fr .9fr; padding: 6rem 0; } }
.hero__title { font-size: clamp(2.375rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 1.25rem 0 1.25rem; }
.hero__lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: rgb(var(--gray-300)); max-width: 36rem; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .hero__actions { flex-direction: row; } }
.hero__visual { position: relative; height: 22rem; display: none; }
@media (min-width: 640px) { .hero__visual { display: block; } }
@media (min-width: 1024px) { .hero__visual { height: 30rem; } }
.hero__visual::before {
    content: ""; position: absolute; inset: 10% 15%; border-radius: 9999px; filter: blur(60px);
    background: radial-gradient(circle, rgb(var(--brand-500) / .55), rgb(var(--accent-pink) / .25) 50%, transparent 70%);
}
.hero__phone { position: absolute; bottom: 0; height: 88%; width: auto; filter: drop-shadow(0 25px 35px rgb(0 0 0 / .5)); }
.hero__phone--1 { left: 50%; transform: translateX(-118%) rotate(-7deg); z-index: 1; }
.hero__phone--2 { left: 50%; transform: translateX(-50%); height: 100%; z-index: 3; }
.hero__phone--3 { left: 50%; transform: translateX(18%) rotate(7deg); z-index: 2; }

/* 5. UTILITIES ----------------------------------------------------------- */
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.font-bangla { font-family: var(--font-bangla); }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* Standalone (.html) policy pages use a non-sticky header */
.site-header--static { position: relative; }