/* Nano Masters AI — Fictional Company Profile (nm_fc_) */
/* Clean, scoped CSS for the refactored template (no .btn collisions) */

:root{
    /* Core */
    --bg:#070b18;
    --bg2:#0a1024;
    --surface:rgba(255,255,255,.04);
    --surface2:rgba(255,255,255,.06);
    --stroke:rgba(233,238,255,.12);
    --stroke2:rgba(233,238,255,.18);
    --text:#ecf1ff;
    --muted:rgba(236,241,255,.74);
    --muted2:rgba(236,241,255,.62);

    /* Brand */
    --brand1:#667eea;
    --brand2:#764ba2;

    /* Layout */
    --max:1180px;
    --radius:16px;
    --radius2:22px;
    --shadow:0 14px 38px rgba(0,0,0,.42);
    --shadow2:0 10px 22px rgba(0,0,0,.25);
    --border:1px solid var(--stroke);

    /* Type */
    --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --h1:clamp(2.05rem, 1.45rem + 2.2vw, 3.05rem);
    --h2:clamp(1.25rem, 1.05rem + 1vw, 1.55rem);
    --h3:1.02rem;
    --p:1rem;
    --small:.875rem;

    /* Anchor offset for sticky header */
    scroll-padding-top:90px;

    color-scheme:dark;
}

/* Base */
html{ scroll-behavior:smooth; }
html,body{
    margin:0;
    color:var(--text);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    /* fallback first */
    background:
            radial-gradient(1100px 700px at 12% -10%, rgba(102,126,234,.28), transparent 55%),
            radial-gradient(900px 650px at 88% 8%, rgba(118,75,162,.22), transparent 58%),
            radial-gradient(900px 700px at 50% 120%, rgba(45,212,191,.10), transparent 55%),
            linear-gradient(180deg, var(--bg), var(--bg2));
}
@supports (background: color-mix(in oklab, white, black)){
    html,body{
        background:
                radial-gradient(1100px 700px at 12% -10%, color-mix(in oklab, var(--brand1) 40%, transparent), transparent 55%),
                radial-gradient(900px 650px at 88% 8%, color-mix(in oklab, var(--brand2) 34%, transparent), transparent 58%),
                radial-gradient(900px 700px at 50% 120%, rgba(45,212,191,.10), transparent 55%),
                linear-gradient(180deg, var(--bg), var(--bg2));
    }
}

/* Links */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, summary:focus-visible{
    outline:3px solid rgba(102,126,234,.9);
    outline-offset:2px;
    border-radius:12px;
}
@supports (outline-color: color-mix(in oklab, white, black)){
    a:focus-visible, summary:focus-visible{
        outline-color:color-mix(in oklab, var(--brand1) 70%, white);
    }
}

/* Skip link */
.nm_fc_skip{
    position:absolute; left:-999px; top:10px;
    background:rgba(0,0,0,.75);
    border:var(--border);
    padding:10px 12px;
    border-radius:12px;
    z-index:9999;
}
.nm_fc_skip:focus{ left:12px; }

/* Page container */
.nm_fc_wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:24px 18px 80px;
}

/* Topbar */
.nm_fc_topbar{
    position:sticky;
    top:12px;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 12px;
    border:var(--border);
    border-radius:999px;
    background:rgba(12,18,40,.58);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
@supports (background: color-mix(in oklab, white, black)){
    .nm_fc_topbar{
        background:color-mix(in oklab, var(--surface) 70%, rgba(0,0,0,.35));
    }
}
.nm_fc_topbar_left{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.nm_fc_topbar_right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

/* Pills */
.nm_fc_pill{
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--stroke);
    color:var(--muted);
    background:rgba(255,255,255,.03);
    white-space:nowrap;
}

/* Buttons (scoped, no Bootstrap collision) */
.nm_fc_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--stroke2);
    color:var(--text);
    font-weight:650;
    letter-spacing:.2px;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    transition:transform .15s ease, border-color .15s ease, background .15s ease;
    background:linear-gradient(135deg, rgba(102,126,234,.18), rgba(118,75,162,.16));
}
@supports (background: color-mix(in oklab, white, black)){
    .nm_fc_btn{
        background:linear-gradient(135deg,
        color-mix(in oklab, var(--brand1) 26%, transparent),
        color-mix(in oklab, var(--brand2) 22%, transparent)
        );
    }
}
.nm_fc_btn:hover{
    transform:translateY(-1px);
    border-color:rgba(236,241,255,.28);
    text-decoration:none;
    color:var(--text);
}
.nm_fc_btn:active{ transform:translateY(0) scale(.99); }

.nm_fc_btn_secondary{
    background:rgba(255,255,255,.02);
    box-shadow:none;
}

/* Icon helpers */
.nm_fc_i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.05em;
}
.nm_fc_icon_muted{ color:var(--muted2); }
.nm_fc_btn i{ opacity:.95; }
.nm_fc_pill i, .nm_fc_badge i{ opacity:.95; }
.nm_fc_h2 i, .nm_fc_h3 i{ margin-right:.55rem; color:var(--muted2); }

/* Hero */
.nm_fc_hero{
    margin-top:16px;
    border-radius:var(--radius2);
    border:var(--border);
    background:linear-gradient(135deg, rgba(102,126,234,.16), rgba(118,75,162,.12));
    box-shadow:var(--shadow);
    overflow:hidden;
}
@supports (background: color-mix(in oklab, white, black)){
    .nm_fc_hero{
        background:linear-gradient(135deg,
        color-mix(in oklab, var(--brand1) 24%, rgba(255,255,255,.02)),
        color-mix(in oklab, var(--brand2) 20%, rgba(255,255,255,.02))
        );
    }
}
.nm_fc_hero_inner{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px;
    padding:26px 22px;
}
@media (max-width:920px){
    .nm_fc_hero_inner{ grid-template-columns:1fr; padding:22px 18px; }
}

.nm_fc_logo_row{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.nm_fc_logo_box{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(236,241,255,.14);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    min-height:76px;
}
.nm_fc_logo_box img{
    max-width:260px;
    max-height:120px;
    height:auto;
    width:auto;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    padding:10px;
    box-shadow:0 10px 18px rgba(0,0,0,.25);
}

/* Type */
.nm_fc_h1{
    font-size:var(--h1);
    line-height:1.06;
    margin:0 0 8px;
    letter-spacing:-.02em;
}
.nm_fc_h2{
    font-size:var(--h2);
    margin:0 0 10px;
    letter-spacing:-.01em;
}
.nm_fc_h3{
    font-size:var(--h3);
    margin:18px 0 10px;
    color:rgba(236,241,255,.94);
}
.nm_fc_sub{
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.65;
    max-width:62ch;
}
.nm_fc_note{
    color:var(--muted);
    font-size:var(--p);
    line-height:1.7;
    max-width:75ch;
}
.nm_fc_small{
    font-size:var(--small);
    color:var(--muted2);
    line-height:1.6;
}

/* Badges */
.nm_fc_badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(236,241,255,.14);
    color:var(--muted);
    white-space:nowrap;
}

/* Meta */
.nm_fc_meta_grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
}
@media (max-width:520px){
    .nm_fc_meta_grid{ grid-template-columns:1fr; }
}
.nm_fc_meta_card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(236,241,255,.12);
    border-radius:14px;
    padding:12px;
}
.nm_fc_meta_label{ font-size:12px; color:var(--muted2); }
.nm_fc_meta_val{ font-size:15px; font-weight:750; margin-top:4px; }

/* Layout (desktop: sticky TOC sidebar) */
.nm_fc_layout{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media (min-width:980px){
    .nm_fc_layout{
        grid-template-columns:260px 1fr;
        align-items:start;
        gap:18px;
    }
}

/* Sidebar TOC */
.nm_fc_side{ display:none; }
@media (min-width:980px){
    .nm_fc_side{ display:block; position:sticky; top:86px; }
}
.nm_fc_side_card{
    border:var(--border);
    border-radius:var(--radius);
    background:rgba(255,255,255,.03);
    box-shadow:var(--shadow2);
    padding:14px;
}
.nm_fc_side_title{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* TOC */
.nm_fc_toc{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.nm_fc_toc a{
    font-size:13px;
    color:var(--muted);
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(236,241,255,.10);
    background:rgba(255,255,255,.02);
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.nm_fc_toc a:hover{
    background:rgba(255,255,255,.045);
    border-color:rgba(236,241,255,.18);
    transform:translateX(1px);
    text-decoration:none;
}
.nm_fc_toc_inline{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

/* Sections */
.nm_fc_sections{ display:grid; gap:16px; }
.nm_fc_card{
    border-radius:var(--radius);
    border:var(--border);
    background:rgba(255,255,255,.03);
    box-shadow:var(--shadow2);
    padding:18px;
    content-visibility:auto;
    contain-intrinsic-size:600px;
}
.nm_fc_hr{ height:1px; background:rgba(236,241,255,.10); margin:16px 0; }

/* Grids */
.nm_fc_grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
@media (max-width:920px){
    .nm_fc_grid2{ grid-template-columns:1fr; }
}

/* ABOUT: align media blocks between columns */
.nm_fc_grid2 > div{
    display:flex;
    flex-direction:column;
}
.nm_fc_about_split{
    display:grid;
    grid-template-rows:1fr auto; /* text grows, media pinned */
    gap:12px;
    align-items:start;
    height:100%;
}
.nm_fc_about_split .nm_fc_media{ margin-top:auto; }
/* optional clamp to keep both sides similar */
.nm_fc_about_split .nm_fc_note{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:10;
    overflow:hidden;
}

/* KPI grid */
.nm_fc_kpi_grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
    margin-top:10px;
}
@media (max-width:900px){
    .nm_fc_kpi_grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:520px){
    .nm_fc_kpi_grid{ grid-template-columns:1fr; }
}
.nm_fc_kpi{
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(236,241,255,.12);
    background:rgba(0,0,0,.14);
}
.nm_fc_kpi_name{
    font-weight:800;
    letter-spacing:-.01em;
    margin-bottom:6px;
}
.nm_fc_kpi_why{
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}

/* Scenario */
.nm_fc_scenario{
    border-radius:16px;
    border:1px solid rgba(236,241,255,.12);
    background:rgba(0,0,0,.14);
    padding:14px;
    margin-top:12px;
}
.nm_fc_scenario_title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.nm_fc_scenario_title strong{ font-size:14px; letter-spacing:.2px; }
.nm_fc_options{ margin-top:10px; display:grid; gap:8px; }
.nm_fc_opt{
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(236,241,255,.10);
    background:rgba(255,255,255,.03);
    color:rgba(236,241,255,.92);
    font-size:13px;
    line-height:1.55;
}

/* Details */
.nm_fc_details{
    border-radius:14px;
    border:1px solid rgba(236,241,255,.12);
    background:rgba(255,255,255,.02);
    padding:12px;
    margin-top:10px;
}
.nm_fc_summary{
    cursor:pointer;
    font-weight:750;
    list-style:none;
}
.nm_fc_summary::-webkit-details-marker{ display:none; }
.nm_fc_summary:after{
    content:"▾";
    float:right;
    color:var(--muted2);
    transform:translateY(1px);
}
.nm_fc_details[open] .nm_fc_summary:after{ content:"▴"; }

/* CTA band */
.nm_fc_cta_band{
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:16px;
    border-radius:18px;
    border:1px solid rgba(236,241,255,.14);
    background:linear-gradient(135deg, rgba(45,212,191,.14), rgba(102,126,234,.14));
}
@supports (background: color-mix(in oklab, white, black)){
    .nm_fc_cta_band{
        background:linear-gradient(135deg, rgba(45,212,191,.14), color-mix(in oklab, var(--brand1) 18%, transparent));
    }
}
.nm_fc_cta_title{ font-weight:900; letter-spacing:-.01em; }
.nm_fc_cta_desc{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
    line-height:1.55;
    max-width:70ch;
}
.nm_fc_links{ display:flex; flex-wrap:wrap; gap:10px; }

/* Media blocks */
.nm_fc_media{
    margin:0;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(236,241,255,.12);
    background:rgba(0,0,0,.14);
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.nm_fc_media img{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:16 / 9;
    object-fit:cover;
}
.nm_fc_media_cap{
    padding:10px 12px;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

/* Images grid */
.nm_fc_company_imgs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
    margin-top:12px;
}
@media (max-width:900px){
    .nm_fc_company_imgs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:520px){
    .nm_fc_company_imgs{ grid-template-columns:1fr; }
}

/* Footer */
.nm_fc_foot{
    margin-top:22px;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
    padding-top:16px;
    border-top:1px solid rgba(236,241,255,.10);
}

/* Mobile topbar */
@media (max-width:640px){
    .nm_fc_topbar{
        top:8px;
        border-radius:16px;
        padding:10px;
        gap:10px;
        flex-wrap:wrap;
    }
    .nm_fc_topbar_left, .nm_fc_topbar_right{
        width:100%;
        justify-content:space-between;
    }
    .nm_fc_pill{ padding:5px 8px; font-size:11px; }
    .nm_fc_btn{ padding:9px 12px; font-size:13px; }
}

/* Prevent grid child overflow */
.nm_fc_hero_inner > *,
.nm_fc_grid2 > *,
.nm_fc_meta_grid > *,
.nm_fc_kpi_grid > *,
.nm_fc_company_imgs > *{
    min-width:0;
}

/* Small phones */
@media (max-width:520px){
    .nm_fc_hero_inner{ padding:18px 14px; }
    .nm_fc_h1{ font-size:clamp(1.8rem, 6vw, 2.4rem); }
    .nm_fc_sub{ font-size:.98rem; }
    .nm_fc_logo_box img{ max-width:220px; max-height:96px; }

    .nm_fc_toc{ gap:8px; }
    .nm_fc_toc a{ padding:7px 9px; font-size:12px; border-radius:999px; }
}

/* Hide inline TOC when desktop sidebar TOC is visible */
@media (min-width:980px){
    .nm_fc_toc_inline{ display:none !important; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .nm_fc_btn, .nm_fc_toc a{ transition:none; }
}

/* HERO: harden responsiveness on narrow screens */
@media (max-width: 520px){

    /* Give hero more breathing room */
    .nm_fc_hero_inner{
        padding:16px 14px;
        gap:14px;
    }

    /* Prevent any grid child from forcing overflow */
    .nm_fc_hero_inner > *{
        min-width:0;
    }

    /* Logo box must not force width */
    .nm_fc_logo_box{
        width:100%;
        max-width:100%;
        justify-content:flex-start; /* looks better on mobile */
    }

    /* Logo image scales down reliably */
    .nm_fc_logo_box img{
        max-width:100%;
        height:auto;
        max-height:72px; /* adjust 64–90 */
        padding:8px;
    }

    /* Meta cards: single column always on phones */
    .nm_fc_meta_grid{
        grid-template-columns:1fr !important;
    }

    /* TOC chips wrap nicely */
    .nm_fc_toc_inline{
        gap:8px;
    }
    .nm_fc_toc_inline a{
        flex:0 0 auto;
        white-space:nowrap;
    }
}

/* Also guard against any accidental horizontal scroll */
body{
    overflow-x:hidden;
}

/* 1) Make widths/padding behave predictably (critical on mobile) */
*, *::before, *::after{
    box-sizing: border-box;
}

/* 2) Prevent any accidental horizontal scroll */
html, body{
    max-width: 100%;
    overflow-x: hidden;
}

/* 3) Ensure these grid containers can shrink (grid items default min-width:auto can overflow) */
.nm_fc_layout,
.nm_fc_sections,
.nm_fc_card,
.nm_fc_hero,
.nm_fc_hero_inner{
    min-width: 0;
    max-width: 100%;
}

/* 4) Cards should never be wider than viewport */
.nm_fc_card{
    width: 100%;
}