/* ========================================
   GMH Theme — Global Styles
   ======================================== */

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

/* ---------- Root Variables (Teal Default Theme) ---------- */
:root{
    --bn:#1C3A5A;--bt:#3BA99C;--btd:#2C887D;
    --bg:#0D1117;--bs:#141920;--be:#161B22;--bc:#1A1F2A;--bcd:#161B22;
    --bd:#21262D;
    --tp:#F0F6FC;--ts:#8B949E;--tm:#6B7280;--ti:#0D1117;
    --ac:#3BA99C;--ach:#4BC4B6;
    --cc:#F0F6FC;--ck:#FF7B72;--cs:#A5D6FF;--cb:#D2A8FF;
    --r-teal:#3BA99C;--r-blue:#6BB8E8;--r-amber:#D4A84B;--r-rose:#D47B8A;
    --accent:#3BA99C;
    --diagonal:repeating-linear-gradient(-45deg,transparent,transparent 19px,rgba(255,255,255,0.035) 19px,rgba(255,255,255,0.035) 20px);
    --diagonal-r:repeating-linear-gradient(45deg,transparent,transparent 19px,rgba(255,255,255,0.025) 19px,rgba(255,255,255,0.025) 20px);
}

/* ---------- Theme Presets ---------- */
[data-theme="navy"]{
    --bn:#0D1B2A;--bt:#1B3A5C;--btd:#152D48;
    --r-teal:#4A7CA0;--r-blue:#6BB8E8;--r-amber:#C4A35A;--r-rose:#C4707A;
    --ac:#4A7CA0;--ach:#5A8DB0;
    --accent:#4A7CA0;
    --diagonal:repeating-linear-gradient(-45deg,transparent,transparent 19px,rgba(255,255,255,0.035) 19px,rgba(255,255,255,0.035) 20px);
}
[data-theme="crimson"]{
    --bn:#2D1A1A;--bt:#B84A4A;--btd:#9A3A3A;
    --r-teal:#B84A4A;--r-blue:#D47B7B;--r-amber:#E8B84B;--r-rose:#E88080;
    --ac:#B84A4A;--ach:#CC5E5E;
    --accent:#B84A4A;
    --diagonal:repeating-linear-gradient(-45deg,transparent,transparent 19px,rgba(255,255,255,0.035) 19px,rgba(255,255,255,0.035) 20px);
}
[data-theme="forest"]{
    --bn:#1A2D1A;--bt:#4A9A5A;--btd:#3A8048;
    --r-teal:#4A9A5A;--r-blue:#6BB88E;--r-amber:#C4A35A;--r-rose:#7AB87A;
    --ac:#4A9A5A;--ach:#5AAE6A;
    --accent:#4A9A5A;
    --diagonal:repeating-linear-gradient(-45deg,transparent,transparent 19px,rgba(255,255,255,0.035) 19px,rgba(255,255,255,0.035) 20px);
}

/* ---------- Light Mode ---------- */
body.light{
    --bg:#FAFBFC;--bs:#F3F4F6;--be:#fff;--bc:#fff;--bcd:#F1F2F3;
    --bd:#E5E7EB;--tp:#111;--ts:#5A5A5A;--tm:#8B8B8B;--ti:#fff;
    --ac:#1C3A5A;--ach:#244F7A;--cc:#111;--ck:#D73A49;--cs:#032F62;--cb:#6F42C1;
    --accent:#A0D4C8;
    --diagonal:repeating-linear-gradient(-45deg,transparent,transparent 19px,rgba(0,0,0,0.04) 19px,rgba(0,0,0,0.04) 20px);
    --diagonal-r:repeating-linear-gradient(45deg,transparent,transparent 19px,rgba(0,0,0,0.02) 19px,rgba(0,0,0,0.02) 20px);
}
[data-theme="navy"] body.light{
    --ac:#1B3A5C;--ach:#254F7A;--accent:#6BA0C8;
}
[data-theme="crimson"] body.light{
    --ac:#8A3A3A;--ach:#A04A4A;--accent:#D48080;
}
[data-theme="forest"] body.light{
    --ac:#3A7A4A;--ach:#4A8E5A;--accent:#80C090;
}

/* ---------- Base Body ---------- */
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tp);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;overflow-x:hidden}

/* ---------- Layout Containers ---------- */
.c{max-width:1600px;margin:0 auto;padding:0 52px}
.cx{max-width:1100px;margin:0 auto}
.wrap{max-width:1100px;margin:0 auto}
@media(max-width:780px){.c{padding:0 20px}}

/* ---------- Typography ---------- */
h1{font-size:49px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px}
h2{font-size:31px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:18px}
h3{font-size:20px;font-weight:600;margin-bottom:6px}
.sub{font-size:20px;line-height:1.6;color:var(--ts)}
.tag{font-size:14px;font-weight:600;color:var(--ac);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}

/* ---------- Section ---------- */
section{padding:78px 0}
main section{position:relative}
main section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;z-index:-1;pointer-events:none}
main section:nth-of-type(even)::before{background:var(--bs);width:100vw;left:50%;transform:translateX(-50%)}
main section:not(:first-of-type):nth-of-type(odd)::before{background:var(--diagonal);width:100vw;left:50%;transform:translateX(-50%)}

/* Section color roles */
section[data-color] .tag{transition:color .3s}
section[data-color="teal"] .tag{color:var(--r-teal)}
section[data-color="blue"] .tag{color:var(--r-blue)}
section[data-color="amber"] .tag{color:var(--r-amber)}
section[data-color="rose"] .tag{color:var(--r-rose)}
section[data-color="teal"]:nth-of-type(even)::before{background:color-mix(in srgb,var(--bs) 96%,var(--r-teal));width:100vw;left:50%;transform:translateX(-50%)}
section[data-color="amber"]:nth-of-type(even)::before{background:color-mix(in srgb,var(--bs) 96%,var(--r-amber));width:100vw;left:50%;transform:translateX(-50%)}

hr{border:none;border-top:1px solid var(--bd);margin:0}

/* ---------- Navigation ---------- */
.tb{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--bd);transition:background .3s}
.tb .i{max-width:1600px;margin:0 auto;padding:13px 52px;display:flex;justify-content:space-between;align-items:center}
.tb .l{font-weight:600;font-size:20px}
.tb .l em{font-style:normal;color:var(--ac)}
.tb nav{display:flex;gap:31px;font-size:17px;font-weight:500;color:var(--ts)}
.tb nav a{cursor:default;text-decoration:none;color:var(--ts);transition:color .2s}
.tb nav a:hover{color:var(--ac)}
.tb .r{display:flex;align-items:center;gap:12px}
.tb.scrolled{background:rgba(13,17,23,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.light .tb.scrolled{background:rgba(250,251,252,.85)}
@media(max-width:780px){
    .tb .i{padding:13px 20px}
    .tb nav{gap:16px;font-size:15px}
}

/* Theme toggle button */
.tbtn{background:var(--bs);border:1px solid var(--bd);border-radius:5px;padding:5px 13px;font-size:16px;font-family:'Inter',sans-serif;color:var(--ts);cursor:pointer;transition:.2s;line-height:1}
.tbtn:hover{border-color:var(--tm);color:var(--tp)}

/* Primary button (small) */
.bsm{display:inline-block;padding:7px 18px;border-radius:5px;font-weight:600;font-size:16px;background:var(--ac);color:var(--ti);border:1px solid var(--ac);cursor:pointer;transition:.2s}
.bsm:hover{background:var(--ach);border-color:var(--ach)}

/* ---------- Buttons ---------- */
.bts{display:flex;gap:10px}
.bp{padding:10px 23px;border-radius:6px;font-weight:600;font-size:17px;cursor:pointer;transition:.2s;border:1px solid transparent;display:inline-block;text-decoration:none}
.bp.pri{background:var(--ac);color:var(--ti);border-color:var(--ac)}
.bp.pri:hover{background:var(--ach);border-color:var(--ach)}
.bp.sec{background:transparent;color:var(--tp);border-color:var(--bd)}
.bp.sec:hover{background:var(--bs)}

/* ---------- Code Block ---------- */
.cd{background:var(--bcd);border:1px solid var(--bd);border-radius:6px;padding:18px 26px;font-family:'JetBrains Mono',monospace;font-size:16px;line-height:1.6;color:var(--cc);overflow-x:auto;margin:16px 0;white-space:pre}
.kw{color:var(--ck)}.str{color:var(--cs)}.blt{color:var(--cb)}

/* ---------- Cards ---------- */
.ca{background:color-mix(in srgb,var(--bc) 70%,transparent);border:1px solid var(--bd);border-radius:8px;padding:26px 31px;transition:background .3s,transform .3s,border-color .3s;display:flex;flex-direction:column;cursor:pointer;border-left:3px solid var(--r-teal)}
.ca:hover{transform:translateY(-4px);border-top-color:var(--ac);border-right-color:var(--ac);border-bottom-color:var(--ac);background:color-mix(in srgb,var(--bc) 85%,transparent)}
.ca[data-color="blue"]{border-left-color:var(--r-blue)}
.ca[data-color="amber"]{border-left-color:var(--r-amber)}
.ca h3{color:var(--ac);font-size:20px;font-weight:600;margin-bottom:8px;padding-bottom:8px;border-bottom:1.5px solid var(--ac);transition:border-color .3s}
.ca:hover h3{border-bottom-color:var(--ach)}
.ca p{font-size:17px;line-height:1.55;color:var(--ts)}
.ca .dgm{margin:14px 0 10px;width:100%;line-height:0}
.ca .dgm svg{display:block;width:100%;height:auto;max-height:44px}
.ca .sep{border:none;border-top:1px solid var(--tm);margin:10px 0 6px;opacity:.3}
.ca .t{color:var(--tm);font-size:14px;margin-top:auto}

/* At-a-glance cards */
.agc{background:var(--bc);border:1px solid var(--bd);border-radius:8px;padding:20px 24px;transition:background .3s,transform .3s,border-color .3s;cursor:pointer;border-left:3px solid var(--r-teal)}
.agc[data-color="blue"]{border-left-color:var(--r-blue)}
.agc[data-color="amber"]{border-left-color:var(--r-amber)}
.agc[data-color="rose"]{border-left-color:var(--r-rose)}
.agc:hover{transform:translateY(-3px);border-top-color:var(--ac);border-right-color:var(--ac);border-bottom-color:var(--ac)}
.agc h3{color:var(--ac);font-size:17px;font-weight:600;margin-bottom:6px;padding-bottom:6px;border-bottom:1.5px solid var(--ac);transition:border-color .3s}
.agc:hover h3{border-bottom-color:var(--ach)}

/* ---------- Grids ---------- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.qg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qg2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:780px){
    .g3{grid-template-columns:1fr}
    .g4{grid-template-columns:repeat(2,1fr)}
    .qg{grid-template-columns:repeat(2,1fr)}
    h1{font-size:26px!important}
}
@media(max-width:500px){
    .qg{grid-template-columns:1fr}
    .qg2{grid-template-columns:1fr}
}

/* ---------- Quick stat cards ---------- */
.qcc{background:var(--bc);border:1px solid var(--bd);border-radius:8px;padding:21px 16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.qct{font-weight:600;font-size:17px;margin-bottom:4px}
.qcs{font-size:14px;color:var(--tm);line-height:1.4;margin-bottom:10px}
.qcc .ch{height:72px;width:100%}
.qcc .ch canvas{max-width:100%!important}
.qc{background:var(--bc);border:1px solid var(--bd);border-radius:8px;padding:21px 16px;text-align:center}
.qc .ch{height:62px;width:100%;margin-bottom:8px}
.qc .ch canvas{max-width:100%!important}
.qc .ql{font-weight:600;font-size:17px;margin-bottom:2px}
.qc .qs{font-size:14px;color:var(--tm);line-height:1.3}

/* ---------- Table ---------- */
.tb2{border:1px solid var(--bd);border-radius:6px;overflow:hidden;margin:16px 0}
.tb2 table{width:100%;border-collapse:collapse}
.tb2 th,.tb2 td{padding:17px 27px;text-align:left;border-bottom:1px solid var(--bd);font-size:17px;color:var(--tp)}
.tb2 th{background:var(--bs);font-weight:600;color:var(--ts);font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.tb2 tr:last-child td{border-bottom:none}
.hl{color:var(--ac)!important;font-weight:600}

/* ---------- FAQ Accordion ---------- */
.fi{border-bottom:1px solid var(--bd);padding:16px 0;cursor:pointer}
.fi:first-child{border-top:1px solid var(--bd)}
.fq{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:18px}
.fa{padding-top:8px;color:var(--ts);font-size:17px;line-height:1.6}

/* ---------- CTA ---------- */
.ct{text-align:center;padding:62px 0}
.ct .bts{justify-content:center;margin-top:20px}

/* ---------- Footer ---------- */
.ft{padding:26px 0;font-size:16px;color:var(--tm)}
.ft a{color:var(--tm);text-decoration:none;transition:color .2s}
.ft a:hover{color:var(--ac)}

/* ---------- Flow Diagram Canvas ---------- */
.flow-wrap{background:transparent;margin:24px 0}
.flow-canvas{display:block;width:100%;height:340px;border-radius:8px}
@media(max-width:600px){.flow-canvas{height:220px}}

/* ---------- Animation ---------- */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.blink{animation:blink .8s step-end infinite;color:var(--ac)}