/* Circle-chart hero (centered). Loaded after home.css; delete this file + its <link> to undo. */
:root{
  --market:#4A47C9; --market-deep:#33309A;
  --pro:#1F6F6F;    --pro-deep:#154F4F;
}
.hero{ min-height:auto; display:block; padding:36px 0 40px; }
.hero .wrap.hero-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.hero .eyebrow{ justify-content:center; }
.hero h1{ font-size:clamp(28px,3.3vw,44px); line-height:1.1; max-width:22em; margin:6px 0 4px; }
.hero .sub{ font-size:17px; max-width:36em; margin:0 0 8px; }

.circle{ width:100%; max-width:min(540px,max(320px,calc(100vh - 340px))); margin-top:4px; }
.circle svg{ width:100%; height:auto; display:block; overflow:visible; }
.sec{ cursor:pointer; outline:none; }
.sec .shape{ transition:transform .25s ease, filter .25s ease; transform-origin:200px 200px; }
.sec.bite .shape{ fill:url(#gb); } .sec.market .shape{ fill:url(#gm); } .sec.pro .shape{ fill:url(#gp); }
.sec:hover .shape,.sec:focus-visible .shape{ transform:scale(1.04); filter:drop-shadow(0 10px 16px rgba(0,0,0,.28)); }
.sec:focus-visible .shape{ stroke:var(--ink); stroke-width:3; }
.sec .ic{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.sec .nm{ fill:#fff; font:600 18px 'Fraunces',Georgia,serif; pointer-events:none; }
.sec .tg{ color:rgba(255,255,255,.88); font:500 11.5px/1.3 'Space Grotesk',sans-serif; text-align:center; pointer-events:none; }
.hub{ pointer-events:none; }
.hub circle{ fill:var(--paper); }
.hub-name{ text-anchor:middle; font:700 24px 'Fraunces',serif; }
.hub-name .v1{ fill:#1F9A9A; } .hub-name .v2{ fill:var(--bite); }
.hub-sub{ text-anchor:middle; fill:var(--ink); font:500 11px 'Space Grotesk',sans-serif; letter-spacing:.16em; }

.hero{ position:relative; overflow:hidden; }
.hero .wrap.hero-center{ position:relative; z-index:1; }
.hero::before{
  content:""; position:absolute; left:50%; bottom:-8%; width:min(980px,130vw); height:80%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 72% 38%, rgba(194,70,27,.30), transparent 100%),
    radial-gradient(closest-side at 50% 82%, rgba(74,71,201,.26), transparent 100%),
    radial-gradient(closest-side at 28% 38%, rgba(31,111,111,.30), transparent 100%);
  filter:blur(28px);
}
.hero h1 .grad{ background:linear-gradient(90deg,#C2461B 0%,#4A47C9 55%,#1F8A8A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
@media (max-width:860px){ .hero{ padding:28px 0 36px; } .hero .sub{ font-size:16px; } .circle{ max-width:460px; } }
@media (max-width:420px){ .sec .tg{ font-size:11px; } }
@media (prefers-reduced-motion:reduce){ .sec .shape{ transition:none; } }