/* ===================================================================
   CrowdHive — "Graphite violet" rebrand for the marketing site.
   Layered OVER final.css. Mirrors the LK (dashboard) skin: a single
   indigo-violet accent on a graphite / cool-neutral base. The brand's
   greens + gold become graphite neutrals; the Swiss-red becomes violet.

   Real country flags stay their true colors (hardcoded in the HTML,
   never touched here).
   =================================================================== */

:root{
  /* ---- primary brand accent (was Swiss red) → indigo violet ---- */
  --red:#4f46e5;
  --red-deep:#4338ca;
  --red-soft:rgba(79,70,229,.08);
  --brand-grad-end:#3730a3;
  --brand-shadow:79,70,229;

  /* ---- secondary accent (was gold) → soft indigo ---- */
  --sun:#6366f1;
  --amber:#4f46e5;
  --accent-light:#a5b4fc;   /* accent on dark grounds */
  --accent-ink:#ffffff;     /* text sitting on an accent fill */

  /* ---- graphite neutrals (were greens) ---- */
  --ink:#1f1f23;            /* near-black graphite, body text + dark grounds */
  --forest:#1f1f23;         /* dark section ground */
  --charcoal:#2c2c31;
  --muted:#6b6b74;
  --muted2:#9b9ba4;
  --line:rgba(28,28,38,.09);
  --stone:#8b8b92;

  /* ---- supporting violets (were meadow / fresh greens) ---- */
  --meadow:#4f46e5;         /* links, accent bars, grade.bbb */
  --fresh:#818cf8;

  /* ---- cool atmospherics (were azure / sky blues) ---- */
  --azure:#8a8a96;
  --glacier-blue:#c7c8d0;
  --sky:#e6e6ec;

  /* ---- light surfaces (cooler, lavender-tinted) ---- */
  --cream:#ECEAF3;
  --glacier:#F7F7FA;

  /* ---- shadows re-keyed off graphite ---- */
  --shadow-soft:0 4px 16px rgba(28,28,40,.06);
  --shadow-medium:0 8px 24px rgba(28,28,40,.10);
  --shadow-hero:0 24px 60px -16px rgba(28,28,40,.18);
  --shadow-button-prim:0 8px 22px rgba(79,70,229,.30);
}

/* ================= brand-driven overrides ================= */

/* heritage Swiss cross in the logo stays RED — the brand accent went violet,
   but the red Swiss cross is a fixed identity element. */
.ch-mark .cross{ fill:#C8102E; }
.on-red .ch-mark .cross{ fill:#fff; }
.on-dark .ch-mark .cross{ fill:#C8102E; }
.wm .ch-cross{ color:#C8102E; }
.ch-cross{ color:#C8102E; }

/* primary button — swap the baked-in gradient + shadow for the violet ramp */
.btn-prim{
  background-image:linear-gradient(110deg, var(--red) 0%, var(--red) 42%, var(--red-deep) 60%, var(--brand-grad-end) 100%);
  box-shadow:0 8px 22px rgba(var(--brand-shadow),.30);
}
.btn-prim:hover{ box-shadow:0 14px 32px rgba(var(--brand-shadow),.44); }

/* live pulse (funded pip / activity dot) — re-key hardcoded red to brand */
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--brand-shadow),.5); }
  50%{ box-shadow:0 0 0 4px rgba(var(--brand-shadow),0); }
}

/* ============= accent-as-FILL elements → white text ============= */
/* (these used gold with dark ink text; violet needs light text) */
.btime,
.hero-sticker, .hero-sticker b,
.editors,
.bonus-badge, .bonus-badge .b1, .bonus-badge .b2,
.grade.a{ color:var(--accent-ink); }
.grade.bbb{ color:var(--accent-ink); }

/* accent text/marks on DARK grounds → lighter violet so it reads */
.promobar a{ color:var(--accent-light); }
.bonus-eyebrow{ color:var(--accent-light); }
.bonus h2 .amt{ color:var(--accent-light); }
.calc-break .row .v.sun{ color:var(--accent-light); }
.fcol a:hover{ color:var(--accent-light); }
.rs-foot a{ color:var(--accent-light); }

/* ============= recolor hardcoded green / gold tints ============= */

/* faint brand washes (were meadow-green) */
.kpi:hover{ background:linear-gradient(180deg, rgba(79,70,229,.06), transparent 80%); }
.gl-row:hover{ background:linear-gradient(90deg, rgba(79,70,229,.05), transparent 70%); }
.proj-opt.active{ background:rgba(79,70,229,.07); }
.audit-badge{ background:rgba(79,70,229,.12); }

/* calculator projection chart (was gold) */
.calc-chart .area{ fill:rgba(79,70,229,.18); }

/* dark photo / section overlays (were forest-green) → graphite */
.bonus-bg::after{
  background:linear-gradient(90deg, rgba(20,20,26,.92) 0%, rgba(20,20,26,.72) 48%, rgba(20,20,26,.32) 100%);
}
.hero-photo::after{
  background:linear-gradient(105deg, rgba(31,31,40,.34) 0%, rgba(31,31,40,.05) 44%, rgba(79,70,229,.16) 100%);
}
.bcover.has-img::after{
  background:linear-gradient(180deg, rgba(20,20,26,.42) 0%, rgba(20,20,26,0) 32%, rgba(20,20,26,0) 70%, rgba(20,20,26,.28) 100%);
}

/* blog cover plates (were green / blue gradients) */
.bcover.c-method{ background:linear-gradient(150deg,#1f1f23 0%,#2c2c3133 100%),linear-gradient(150deg,#1f1f23,#2c2c31); }
.bcover.c-risk{ background:linear-gradient(150deg,#2c2c31,#1f1f23); }
.bcover.c-market{ background:linear-gradient(150deg,#6f6f86,#a9a9c2); }
.bcover.c-portfolio{ background:linear-gradient(150deg,#4f46e5,#818cf8); }
.bcover.has-img{ background:#1f1f23; }

/* empty photo placeholder gradient (was sky/cream/sand) → cool graphite-violet */
.photo{ background:linear-gradient(135deg,#e6e6ec 0%,#ECEAF3 50%,#dcd9ec 100%); }


/* ===================================================================
   Graphite-violet — inner-page overrides (Round 2)
   Projects / Statistics / Blog / FAQ. Catches hardcoded legacy
   greens, reds, golds & blues in projects.css / additions.css /
   faq.css that the :root token remap doesn't reach. Loaded LAST.
   =================================================================== */

/* --- "live/online" dots: green (#6BD08B / meadow) -> brand violet --- */
.livedot, .livedot::after,
.sub-hero .eyebrow .livedot, .sub-hero .eyebrow .livedot::after,
.last-updated-tag .dot, .last-updated-tag .dot::after,
.cmc-meta .online .dot, .cmc-meta .online .dot::after{ background:var(--red); }
.cmc-meta .online{ color:var(--red); }
.nb-done .vk{ color:var(--accent-light); }

/* --- meadow-green washes / focus rings -> violet --- */
.kbox:hover{ background:linear-gradient(180deg, rgba(79,70,229,.06), transparent 85%); }
.pss-item:hover{ background:linear-gradient(180deg, rgba(79,70,229,.07), transparent 85%); }
.pp:hover{ background:rgba(79,70,229,.10); }
.dd-trig.has-val{ background:rgba(79,70,229,.07); }
.report-sub .rs-form input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(79,70,229,.14); }
.nb-done{ background:rgba(79,70,229,.16); border-color:rgba(79,70,229,.40); }

/* --- accent-shadow tints (were red / gold) -> brand violet --- */
.pp.active{ box-shadow:0 4px 14px rgba(var(--brand-shadow),.28); }
.sub-hero .period-pills .pp.active{ box-shadow:0 6px 16px rgba(var(--brand-shadow),.40); }
.cc-repaid{ box-shadow:0 6px 16px rgba(var(--brand-shadow),.34); }

/* --- gold tints -> violet (statistics/how icons, faq mark + search ring) --- */
.hs-icon{ background:rgba(79,70,229,.13); }
.how-step:hover .hs-icon{ background:rgba(79,70,229,.22); }
.hs-icon svg{ stroke:var(--accent-light); }
.faq-result-item mark{ background:rgba(79,70,229,.28); }
.faq-search input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(79,70,229,.18), 0 8px 26px -12px rgba(0,0,0,.4); }

/* --- accents on dark bands -> lighter violet for legibility --- */
.how-head .eyebrow{ color:var(--accent-light); }
.how-foot .btn-link{ color:var(--accent-light); }
.nb-eyebrow{ color:var(--accent-light); }

/* --- keep the Swiss cross RED inside the how-band CTA mark --- */
.how-band .btn-prim .mono-circle .ch-mark .cross{ fill:#C8102E; }

/* --- category pills: retint to a violet family --- */
.cat-methodology, .cat-education,
.fa-photo .cat-methodology, .bcard .cat-methodology,
.fa-photo .cat-education, .bcard .cat-education{ color:var(--red); }
.cat-methodology{ background:rgba(79,70,229,.12); }
.cat-education{ background:rgba(129,140,248,.16); }
.cat-risk{ background:rgba(99,102,241,.14); color:#4338ca; }
.fa-photo .cat-risk, .bcard .cat-risk{ color:#4338ca; }
.cat-market{ background:rgba(165,180,252,.22); color:#4338ca; }
.fa-photo .cat-market, .bcard .cat-market{ color:#4338ca; }

/* --- grade badges -> latest platform primary-market colours (A gold, BBB violet, BB amber) --- */
.grade.a{ background:#f7b500; color:#1a2520; }
.grade.bbb{ background:#6366f1; color:#fff; }
.grade.bb{ background:#b45309; color:#fff; }
.grade.b{ background:#92400e; color:#fff; }

/* --- light-blue "Open across Europe" band -> lavender --- */
.map-band{ background:var(--cream); }
.map-band .deco-bracket{ color:var(--red); }

/* --- dark photo overlays (were forest-green) -> graphite neutral --- */
.ph-photo::after{ background:linear-gradient(96deg, rgba(20,20,26,.88) 0%, rgba(20,20,26,.62) 44%, rgba(20,20,26,.16) 100%); }
.ph-photo::before{ background:linear-gradient(0deg, rgba(20,20,26,.55), transparent); }
.sub-photo::after{ background:linear-gradient(96deg, rgba(20,20,26,.90) 0%, rgba(20,20,26,.64) 44%, rgba(20,20,26,.16) 100%); }
.sub-photo::before{ background:linear-gradient(0deg, rgba(20,20,26,.55), transparent); }
.cc-photo::after{ background:linear-gradient(180deg, rgba(20,20,26,.10), rgba(20,20,26,.30)); }
.faq-overlay-scrim{ background:rgba(20,20,26,.34); }


/* ===================================================================
   Project cards -> LK platform parity (Round 3)
   Bring .pcard (marketing) in line with the dashboard .idea card:
   tighter radius + padding, compact type scale, thin progress bar,
   and a full-width filled violet "Invest now" button. Violet pages only.
   =================================================================== */

/* card shell: 24px -> 14px radius, platform-style soft shadow + hairline */
.pcard{ border-radius:14px; box-shadow:0 1px 2px rgba(28,28,40,.05), 0 10px 26px -14px rgba(28,28,40,.22); }
.pcard:hover{ box-shadow:0 16px 34px -16px rgba(79,70,229,.28), 0 6px 14px rgba(28,28,40,.10); }
.pcard .ph-wrap{ border-radius:14px 14px 0 0; }

/* photo: calmer landscape crop like the platform feed (was 4/5 portrait) */
.pcard.std .ph-wrap .photo{ aspect-ratio:16/10; }
.pcard.feat .ph-wrap .photo{ aspect-ratio:16/9; }

/* body padding: 22/26 -> 16/18 to match .idea .ibody density */
.pbody{ padding:16px 16px 0; }
.pcard.feat .pbody{ padding:18px 18px 0; }

/* name + meta: editorial -> platform scale */
.pcard.std .pname{ font-size:15px; letter-spacing:-.2px; min-height:0; margin-bottom:5px; }
.pcard.feat .pname{ font-size:18px; letter-spacing:-.4px; margin-bottom:5px; }
.pmeta{ font-size:11.5px; margin-bottom:12px; }

/* rate: 34/44 -> compact like the platform .r */
.rate-row{ margin-bottom:12px; }
.pcard.std .rate-big{ font-size:22px; letter-spacing:-.6px; }
.pcard.feat .rate-big{ font-size:26px; letter-spacing:-.8px; }
.rate-big .pct{ font-size:.6em; }
.rate-term .t1{ font-size:13px; }
.rate-term .t2{ font-size:10.5px; }

/* featured extra-stats row: tighten */
.pcard.feat .extra{ gap:20px; margin:2px 0 14px; }
.pcard.feat .extra .k{ font-size:10.5px; margin-bottom:2px; }
.pcard.feat .extra .v{ font-size:14px; }

/* progress bar: thin pill like .idea .ibar */
.progress{ height:5px; margin-top:2px; }
.plabels{ font-size:11px; margin-top:8px; }

/* grid density closer to the platform feed */
.proj-grid{ gap:20px; }
.proj-listing{ gap:22px 20px; }

/* CTA: text link -> full-width filled violet button (platform .invest-sm) */
.pcta{ display:block; border-top:none; padding:14px 0 16px; margin-top:6px; }
.pcta .btn-link,
.pcta .btn-link.red{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--red); color:#fff; border-radius:8px; padding:11px 14px; font-size:13.5px; font-weight:700;
  box-shadow:0 6px 16px -6px rgba(79,70,229,.5); transition:background .15s, box-shadow .15s, transform .15s; }
.pcta .btn-link:hover{ background:var(--red-deep); color:#fff; text-decoration:none; transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(79,70,229,.6); }
.pcta .btn-link .arw{ color:#fff; }

/* editor's pick + activity pills: quieter, platform badge/fomo feel */
.editors{ transform:rotate(0deg); font-size:11px; padding:6px 11px 6px 8px; border-radius:100px;
  box-shadow:0 6px 16px -6px rgba(79,70,229,.5); }
.activity{ font-size:11px; padding:5px 10px; }
.flag-pin{ width:38px; height:38px; }
.flag-pin .flag-c{ width:26px; height:26px; }

/* card meta flag -> platform's small inline emoji flag (matches .flag on the LK card) */
.pcard .pmeta .mflag{ font-size:15px; line-height:1; margin-right:4px; vertical-align:-2px; }