/*
 * monetise.css — Camiforex "Monetise" design layer (loaded last)
 * Built by NgallaFX (ngallabrian@gmail.com)
 *
 * Same pages, same order, same words — only the look changes:
 *   • near-black page, cool navy-black cards with a soft corner light and a hairline edge
 *   • Inter for everything: bold, tightly tracked headings; quiet grey body copy
 *   • the green of the "Send WhatsApp message" button (#3AF27F → #1F9D4E, edge #3BF581)
 *     for buttons, highlights and accents; buttons are uppercase with black text
 *   • badges glow from inside; highlighted cards and the closing banner carry a green tint
 * Remove the <link> in includes/header.php to go back to the previous look.
 */

/* ---------- 1 · Tokens ---------- */
:root{
  --bg:#000;--bg-2:#000;--panel:#0a0a0e;--panel-2:#0c0c11;
  --white:#fff;--text:#b7bcc6;--muted:#8d929c;--dim:#6c717b;
  --mint:#3af27f;--mint-2:#3af27f;--mint-3:#7ef7a8;--mint-deep:#1f9d4e;--mint-dot:#3bf581;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.12);--line-3:rgba(59,245,129,.55);--divider:rgba(255,255,255,.07);

  --g-top:#3af27f;--g-bot:#1f9d4e;--g-edge:#3bf581;
  --m-card:radial-gradient(95% 95% at 6% 5%,#161824 0%,#0a090d 100%);
  --m-card-soft:radial-gradient(120% 120% at 0 0,#121420 0%,#08080b 100%);
  --m-card-green:linear-gradient(160deg,#0f2a19 0%,#08130c 45%,#030504 100%);
  --m-edge:rgba(255,255,255,.08);
  --m-edge-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --m-shadow:0 4px 33px rgba(0,0,0,.35);
  --m-tile:rgba(255,255,255,.05);
  --m-r-xl:28px;--m-r-lg:20px;--m-r-md:14px;--m-r-sm:10px;
  --btn-grad:linear-gradient(180deg,var(--g-top) 0%,#2bc465 52%,var(--g-bot) 100%);
  --btn-glow:0 10px 26px -10px rgba(58,242,127,.6),inset 0 1px 0 rgba(255,255,255,.4);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[data-theme="light"]{
  --bg:#f6f7f9;--bg-2:#f6f7f9;--panel:#fff;--panel-2:#fff;
  --white:#0b0c10;--text:#40444d;--muted:#6a6f79;--dim:#8a8f99;
  --mint:#1f9d4e;--mint-2:#17a24c;--mint-3:#138a40;
  --line:#e4e6eb;--line-2:#d9dce2;--line-3:#3bd577;--divider:#e6e8ec;
  --m-card:linear-gradient(180deg,#fff 0%,#fbfbfc 100%);
  --m-card-soft:#fff;
  --m-card-green:linear-gradient(160deg,#eafbf0 0%,#fff 70%);
  --m-edge:#e4e6eb;--m-edge-hi:inset 0 1px 0 #fff;
  --m-shadow:0 10px 30px -18px rgba(15,23,42,.18);
  --m-tile:#f3f4f6;
}

/* Inter (served from this website) */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2 · Page and type ---------- */
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);letter-spacing:-.011em}
p,li,td,th,label,input,select,textarea,button,.menu a,.mm-label{font-family:var(--font)}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--white);font-weight:700;letter-spacing:-.035em}
h3,h4,h5{letter-spacing:-.022em}
.hl,.sec-head h2 .hl,.cta h2 .hl{color:var(--mint)}

.hero h1{font-size:clamp(40px,5.6vw,76px);line-height:1.04;font-weight:800;letter-spacing:-.045em}
.page-hero h1,.course-hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.04em}
.sec-head h2,h2.big{font-size:clamp(30px,3.6vw,48px);line-height:1.12;font-weight:700;letter-spacing:-.035em}
.sec-head p,.page-hero p,.hero .lead{color:var(--text);font-size:clamp(15px,1.25vw,17px);line-height:1.65}
.cta h2{font-size:clamp(32px,4.2vw,56px);line-height:1.1;font-weight:700;letter-spacing:-.04em}
.gcard h3,.box h3{font-size:22px;line-height:1.25}
.gcard p,.box p{color:var(--muted)}

/* the dotted grids and light beams of the old look are not part of this design */
.dots,.plan::before{display:none!important}
.beam{opacity:.35;filter:blur(60px)}

/* ---------- 3 · Buttons ---------- */
.btn{height:54px;padding:0 26px;border-radius:var(--m-r-sm);font:700 14px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--white);box-shadow:var(--m-edge-hi)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost:hover,.btn-dark:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.btn-dark{background:rgba(255,255,255,.04);border-color:var(--line-2)}
.btn-mint{background:var(--btn-grad);border:1px solid var(--g-edge);color:#000;text-shadow:none;box-shadow:var(--btn-glow)}
.btn-mint svg{color:#000}
.btn-mint:hover{background:linear-gradient(180deg,#5cf595 0%,#33d06f 52%,#22a754 100%);box-shadow:0 14px 34px -10px rgba(58,242,127,.75),inset 0 1px 0 rgba(255,255,255,.5);border-color:#7ef7a8}
.btn-mint:active{transform:translateY(0);box-shadow:0 6px 16px -8px rgba(58,242,127,.6),inset 0 2px 6px rgba(0,0,0,.18)}
.nav .btn{height:48px;padding:0 20px;font-size:13px}
.news .btn{height:50px;font-size:13px}
html[data-theme="light"] .btn{background:#fff;border-color:var(--line-2);color:var(--white);box-shadow:0 1px 2px rgba(15,23,42,.06)}
html[data-theme="light"] .btn-mint{background:var(--btn-grad);border-color:#2bd36b;color:#000;box-shadow:0 10px 24px -12px rgba(31,157,78,.6),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- 4 · Navigation ---------- */
.nav{border-radius:16px;border:1px solid var(--m-edge);background:rgba(10,10,14,.72);box-shadow:var(--m-edge-hi),0 20px 40px -24px rgba(0,0,0,.9)}
.menu a.active{color:var(--white)}
.menu a.active::after{background:var(--mint);box-shadow:0 0 12px rgba(58,242,127,.8)}
.mega-in{border-radius:var(--m-r-lg);border:1px solid var(--m-edge);background:var(--m-card);box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
html[data-theme="light"] .nav{background:rgba(255,255,255,.82);box-shadow:0 12px 30px -20px rgba(15,23,42,.25)}

/* ---------- 5 · Cards ---------- */
.gcard,.box,.info,.crs-card,.nw-card,.ev-card,.ccard,.hpanel,.fcard,.ctable,.map,.media,.auth-card,
.tool-form,.tool-out,.ec-list,.ec-filters,.plan{
  border-radius:var(--m-r-lg);border:1px solid var(--m-edge);background:var(--m-card);box-shadow:var(--m-edge-hi),var(--m-shadow)}
.gcard,.box,.info{padding:28px}
.gcard:hover,.crs-card:hover,.nw-card:hover,.ev-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14);box-shadow:var(--m-edge-hi),0 24px 50px -26px rgba(0,0,0,.9)}
.gcard .ico{border-radius:14px;color:var(--mint);background:rgba(58,242,127,.08);box-shadow:inset 0 0 12px rgba(58,242,127,.35)}
.gcard .num{background:linear-gradient(180deg,rgba(58,242,127,.75),rgba(58,242,127,0) 90%);-webkit-background-clip:text;background-clip:text}
.hcard{border-radius:var(--m-r-md);border:1px solid var(--m-edge);background:var(--m-tile)}
.crs-card,.nw-card,.ev-card{overflow:hidden}
.disc.box{background:var(--m-card-soft)}

/* plans: the featured one carries the green tint, the others stay navy */
.plan{padding:26px 22px 26px;border-radius:var(--m-r-xl);transition:transform .35s,box-shadow .35s}
.plan::after{display:none}
.plan:hover{transform:translateY(-4px);box-shadow:var(--m-edge-hi),0 28px 60px -30px rgba(58,242,127,.45)}
.plan.feat{background:var(--m-card-green);border-color:rgba(59,245,129,.45);box-shadow:inset 0 0 0 1px rgba(59,245,129,.12),0 30px 70px -30px rgba(58,242,127,.55)}
.plan hr{background:var(--divider)}
.plan .btn{border-radius:var(--m-r-sm)}

/* program switch (Academy / Signals / Mentorship) and other segmented tabs */
.tabs{border-radius:14px;border:1px solid var(--m-edge);background:#08080b;padding:5px}
.tabs button{border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font:600 15px var(--font);height:48px}
.tabs button.on{background:var(--m-card);border-color:rgba(255,255,255,.12);color:var(--white);box-shadow:inset 0 0 12px rgba(58,242,127,.18),var(--m-edge-hi)}
.tabs .seg-thumb{border-radius:10px}
html[data-theme="light"] .tabs{background:#eef0f3}
html[data-theme="light"] .tabs button.on{background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.08)}

/* comparison table */
.ctable{overflow:hidden}

/* FAQ */
.faq details{border-radius:var(--m-r-md);border:1px solid var(--m-edge);background:var(--m-card-soft);box-shadow:var(--m-edge-hi)}
.faq details::after{display:none}
.faq details[open]{border-color:rgba(59,245,129,.28)}

/* closing banner ("Buckle up…") */
.cta{border-radius:var(--m-r-xl);border:1px solid rgba(59,245,129,.22);background:linear-gradient(180deg,#0d2416 0%,#050a07 55%,#000 100%)}
.cta::before{display:none}
.cta .lb{background:linear-gradient(180deg,rgba(58,242,127,.32),rgba(58,242,127,.05) 60%,transparent)}
.fcard{border-radius:var(--m-r-lg);background:var(--m-card)}
html[data-theme="light"] .cta{background:linear-gradient(180deg,#e9fbef 0%,#fff 70%);border-color:#c6efd5}

/* ---------- 6 · Badges, pills, tags ---------- */
.tag,.cs-pill,.pill{border-radius:999px}
.tag{border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 10px rgba(58,242,127,.55);font-weight:600;color:var(--white)}
.cs-pill{background:rgba(0,0,0,.35);border:0;color:#fff;box-shadow:inset 0 0 12px rgba(58,242,127,.75)}
.cs-pill i{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.plan.cs .cs-over .cs-pill{background:rgba(0,0,0,.6);box-shadow:inset 0 0 14px rgba(58,242,127,.8),0 0 30px rgba(58,242,127,.25)}
html[data-theme="light"] .tag,html[data-theme="light"] .cs-pill{background:#fff;color:#0b0c10;box-shadow:inset 0 0 0 1px #bfeccf,inset 0 0 10px rgba(58,242,127,.35)}

/* ---------- 7 · Forms ---------- */
.field input,.field select,.field textarea{border-radius:var(--m-r-sm);border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g-edge);box-shadow:0 0 0 3px rgba(58,242,127,.18)}
.news{border-radius:var(--m-r-md);border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.news input::placeholder{color:var(--muted)}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea,html[data-theme="light"] .news{background:#fff}

/* ---------- 8 · Footer ---------- */
.footer{background:var(--bg)}
.copy{border-top-color:var(--divider)}

/* ---------- 9 · Phones ---------- */
@media (max-width:700px){
  .btn{height:52px;padding:0 18px;font-size:13px;letter-spacing:.01em}
  /* uppercase labels are wider: two buttons side by side share the row, a long one takes its own row */
  .hero-btns,.cta .btns{gap:10px}
  .hero-btns .btn,.cta .btns .btn{flex:1 1 auto;min-width:0!important}
  .hero-btns .btn-ghost,.cta .btns .btn-mint{flex-basis:100%}
  .gcard,.box,.info{padding:22px}
  .plan{border-radius:var(--m-r-lg)}
  .cta{border-radius:var(--m-r-lg)}
}

/* ---------- 10 · Comparison table ---------- */
.ctable{background:var(--m-card-soft)}
.ctable::before{background:linear-gradient(180deg,rgba(58,242,127,.06),rgba(58,242,127,0) 70%);border-color:var(--divider)}
.crow{border-top-color:var(--divider)}
.crow.h>div{font-weight:700;letter-spacing:-.02em}
.crow.h>div:nth-child(2){color:#000;text-shadow:none;background:var(--btn-grad);box-shadow:inset 0 -1px 0 var(--g-edge),inset 0 1px 0 rgba(255,255,255,.4)}
.crow.h>div:nth-child(2)::before{display:none}
.crow>div:nth-child(2),.crow .ok{color:var(--mint)}
html[data-theme="light"] .crow.h>div:nth-child(2){color:#000;text-shadow:none;background:var(--btn-grad)}