/* =========================================================
   Montero Nava Adjacent - EXT Modern Clean v1
   Suggested path:
   https://assets.mn-cdn.com/assets/css/apps/ext/modern_clean-v1.css
   ========================================================= */

/* ---------- Root ---------- */
:root{
    --mn-bg-1: #f7f2ff;
    --mn-bg-2: #efe4ff;
    --mn-bg-3: #e6d8ff;
    --mn-bg-4: #ddd1ff;

    --mn-text: #241a33;
    --mn-text-soft: #4d4261;
    --mn-text-muted: #6d6282;

    --mn-accent: #7a5bd6;
    --mn-accent-strong: #6848ca;
    --mn-accent-soft: rgba(122, 91, 214, 0.14);

    --mn-border: rgba(91, 69, 153, 0.18);
    --mn-border-strong: rgba(91, 69, 153, 0.28);

    --mn-card: rgba(255, 255, 255, 0.44);
    --mn-card-strong: rgba(255, 255, 255, 0.58);
    --mn-surface: rgba(255, 255, 255, 0.28);
    --mn-surface-strong: rgba(255, 255, 255, 0.38);

    --mn-shadow-sm: 0 6px 18px rgba(91, 69, 153, 0.08);
    --mn-shadow-md: 0 16px 38px rgba(91, 69, 153, 0.12);
    --mn-shadow-lg: 0 26px 60px rgba(91, 69, 153, 0.16);

    --mn-radius-sm: 12px;
    --mn-radius-md: 18px;
    --mn-radius-lg: 24px;

    --mn-max-width: 1180px;
    --mn-transition: 180ms ease;
}

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    color:var(--mn-text);
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height:1.6;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at top right, rgba(233,220,255,0.65) 0%, rgba(233,220,255,0) 30%),
        linear-gradient(180deg, var(--mn-bg-1) 0%, var(--mn-bg-2) 28%, var(--mn-bg-3) 70%, var(--mn-bg-4) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Optional soft overlay for long pages */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.24), transparent 26%),
        radial-gradient(circle at 80% 10%, rgba(255,255,255,0.18), transparent 24%);
    z-index:0;
}

img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:14px;
}

a{
    color:var(--mn-accent-strong);
    text-decoration:none;
    transition:
        color var(--mn-transition),
        opacity var(--mn-transition),
        filter var(--mn-transition),
        background-color var(--mn-transition),
        border-color var(--mn-transition);
}

a:hover,
a:focus-visible{
    color:#4f2fb7;
    text-decoration:none;
}

p,
ul,
ol{
    margin-top:0;
}

h1,h2,h3,h4,h5,h6{
    margin-top:0;
    line-height:1.2;
    color:#1d1430;
    letter-spacing:-0.02em;
}

h1{ font-size:clamp(2rem, 4vw, 3.25rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2.3rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.6rem); }

small,
.text-muted{
    color:var(--mn-text-muted);
}

/* ---------- Layout ---------- */
.site-shell,
.page-shell,
.wrapper,
.container-shell{
    position:relative;
    z-index:1;
    width:min(100% - 2rem, var(--mn-max-width));
    margin-inline:auto;
}

.section{
    margin-block:1.5rem;
}

.section-lg{
    margin-block:2.5rem;
}

/* ---------- Frosted Surfaces ---------- */
.card,
.panel,
.surface,
.frost-card,
.glass-card,
.content-card{
    background:var(--mn-card);
    border:1px solid var(--mn-border);
    border-radius:var(--mn-radius-md);
    box-shadow:var(--mn-shadow-md);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.card,
.panel,
.surface,
.frost-card,
.glass-card,
.content-card{
    padding:1.25rem;
}

.card-strong,
.panel-strong,
.surface-strong{
    background:var(--mn-card-strong);
    border:1px solid var(--mn-border-strong);
}

.subtle-surface,
.soft-panel{
    background:var(--mn-surface);
    border:1px solid rgba(91, 69, 153, 0.12);
    border-radius:var(--mn-radius-sm);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* ---------- Header / Hero ---------- */
.site-header,
.page-header,
.hero{
    position:relative;
    z-index:1;
    padding:2rem 0 1.25rem;
}

.hero-card,
.header-card{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.54),
        rgba(255,255,255,0.34)
    );
    border:1px solid rgba(91, 69, 153, 0.16);
    border-radius:var(--mn-radius-lg);
    padding:1.5rem;
    box-shadow:var(--mn-shadow-lg);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.hero-title,
.page-title{
    margin-bottom:0.5rem;
}

.hero-subtitle,
.page-subtitle,
.lead{
    color:var(--mn-text-soft);
    max-width:70ch;
}

/* ---------- Grid Helpers ---------- */
.grid{
    display:grid;
    gap:1rem;
}

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

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

@media (max-width:900px){
    .grid-2,
    .grid-3{
        grid-template-columns:1fr;
    }
}

/* ---------- Navigation ---------- */
.nav,
.navbar-lite,
.inline-nav{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
    align-items:center;
}

.nav a,
.navbar-lite a,
.inline-nav a{
    display:inline-flex;
    align-items:center;
    padding:0.7rem 1rem;
    border-radius:999px;
    background:rgba(255,255,255,0.32);
    border:1px solid rgba(91, 69, 153, 0.12);
    color:var(--mn-text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav a:hover,
.navbar-lite a:hover,
.inline-nav a:hover,
.nav a:focus-visible,
.navbar-lite a:focus-visible,
.inline-nav a:focus-visible{
    background:rgba(255,255,255,0.54);
    border-color:rgba(91, 69, 153, 0.24);
    color:#1a1130;
}

/* ---------- Buttons ---------- */
button,
.button,
.btn{
    appearance:none;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    border-radius:999px;
    padding:0.85rem 1.15rem;
    font:inherit;
    font-weight:600;
    transition:
        transform var(--mn-transition),
        box-shadow var(--mn-transition),
        background-color var(--mn-transition),
        color var(--mn-transition),
        border-color var(--mn-transition);
}

.btn-primary,
.button-primary{
    background:linear-gradient(180deg, #8b6ceb, #7151d7);
    color:#ffffff;
    box-shadow:0 14px 28px rgba(113, 81, 215, 0.22);
}

.btn-primary:hover,
.button-primary:hover,
.btn-primary:focus-visible,
.button-primary:focus-visible{
    transform:translateY(-1px);
    background:linear-gradient(180deg, #7e5fe2, #6544cb);
    color:#ffffff;
}

.btn-secondary,
.button-secondary{
    background:rgba(255,255,255,0.42);
    color:var(--mn-text);
    border:1px solid rgba(91, 69, 153, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.btn-secondary:hover,
.button-secondary:hover,
.btn-secondary:focus-visible,
.button-secondary:focus-visible{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.58);
    color:#1d1430;
}

/* ---------- Forms ---------- */
label{
    display:block;
    margin-bottom:0.45rem;
    font-weight:600;
    color:#2b2140;
}

input,
select,
textarea{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(91, 69, 153, 0.16);
    background:rgba(255,255,255,0.45);
    color:var(--mn-text);
    padding:0.9rem 1rem;
    font:inherit;
    transition:
        border-color var(--mn-transition),
        box-shadow var(--mn-transition),
        background-color var(--mn-transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

input::placeholder,
textarea::placeholder{
    color:#7c7191;
}

input:hover,
select:hover,
textarea:hover{
    background:rgba(255,255,255,0.58);
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:rgba(104, 72, 202, 0.48);
    box-shadow:0 0 0 4px rgba(122, 91, 214, 0.14);
    background:rgba(255,255,255,0.7);
}

textarea{
    min-height:140px;
    resize:vertical;
}

/* ---------- Lists / Blocks ---------- */
.notice,
.alert,
.info-block,
.callout{
    padding:1rem 1rem;
    border-radius:16px;
    background:rgba(255,255,255,0.34);
    border:1px solid rgba(91, 69, 153, 0.14);
    color:var(--mn-text-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

hr{
    border:none;
    height:1px;
    margin:1.5rem 0;
    background:linear-gradient(
        90deg,
        rgba(91,69,153,0),
        rgba(91,69,153,0.22),
        rgba(91,69,153,0)
    );
}

/* ---------- Tables ---------- */
.table-wrap{
    overflow-x:auto;
    border-radius:18px;
}

table{
    width:100%;
    border-collapse:collapse;
    background:rgba(255,255,255,0.32);
    border:1px solid rgba(91, 69, 153, 0.12);
    border-radius:18px;
    overflow:hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

th,
td{
    padding:0.95rem 1rem;
    text-align:left;
    border-bottom:1px solid rgba(91, 69, 153, 0.08);
}

th{
    background:rgba(255,255,255,0.24);
    color:#261c3b;
    font-weight:700;
}

tr:hover td{
    background:rgba(255,255,255,0.18);
}

/* ---------- Code / Pre ---------- */
code,
pre{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code{
    background:rgba(255,255,255,0.45);
    border:1px solid rgba(91, 69, 153, 0.12);
    padding:0.15rem 0.45rem;
    border-radius:10px;
}

pre{
    margin:0;
    padding:1rem 1.1rem;
    border-radius:18px;
    background:rgba(255,255,255,0.36);
    border:1px solid rgba(91, 69, 153, 0.12);
    overflow:auto;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---------- Footer ---------- */
.site-footer,
footer{
    position:relative;
    z-index:1;
    margin-top:2rem;
    padding:1.5rem 0 2.2rem;
    color:var(--mn-text-soft);
}

.footer-card,
footer .footer-inner{
    background:rgba(255,255,255,0.26);
    border:1px solid rgba(91, 69, 153, 0.12);
    border-radius:20px;
    padding:1rem 1.15rem;
    box-shadow:var(--mn-shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Important: visible before clicked */
.site-footer a,
footer a{
    color:#3f2a7d;
    font-weight:600;
    text-decoration:none;
    opacity:1;
}

/* Hover brightens/darkens naturally */
.site-footer a:hover,
footer a:hover,
.site-footer a:focus-visible,
footer a:focus-visible{
    color:#1f114f;
    filter:brightness(1.08) contrast(1.06);
    text-shadow:0 0 10px rgba(255,255,255,0.18);
}

/* Visited still readable */
.site-footer a:visited,
footer a:visited{
    color:#5636a8;
}

/* ---------- Utility ---------- */
.rounded-lg{ border-radius:var(--mn-radius-lg); }
.rounded-md{ border-radius:var(--mn-radius-md); }
.rounded-sm{ border-radius:var(--mn-radius-sm); }

.shadow-sm{ box-shadow:var(--mn-shadow-sm); }
.shadow-md{ box-shadow:var(--mn-shadow-md); }
.shadow-lg{ box-shadow:var(--mn-shadow-lg); }

.text-soft{ color:var(--mn-text-soft); }
.text-muted{ color:var(--mn-text-muted); }

.center{ text-align:center; }
.right{ text-align:right; }

.mb-0{ margin-bottom:0; }
.mb-1{ margin-bottom:0.5rem; }
.mb-2{ margin-bottom:1rem; }
.mb-3{ margin-bottom:1.5rem; }
.mb-4{ margin-bottom:2rem; }

.mt-0{ margin-top:0; }
.mt-1{ margin-top:0.5rem; }
.mt-2{ margin-top:1rem; }
.mt-3{ margin-top:1.5rem; }
.mt-4{ margin-top:2rem; }

/* ---------- Motion / Accessibility ---------- */
:focus-visible{
    outline:2px solid rgba(104, 72, 202, 0.38);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width:700px){
    body{
        font-size:15px;
    }

    .hero-card,
    .header-card,
    .card,
    .panel,
    .surface,
    .frost-card,
    .glass-card,
    .content-card{
        padding:1rem;
    }

    .site-shell,
    .page-shell,
    .wrapper,
    .container-shell{
        width:min(100% - 1rem, var(--mn-max-width));
    }
}