/* ============================================================
   home.css — homepage-specific sections (hero, value tiles,
   principles, participating DPGs, engagement doors).
   ============================================================ */

/* ---- Hero ---- */
.hero{background:radial-gradient(900px 500px at 78% -10%, rgba(15,163,163,.16), transparent 60%),linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);color:#fff;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none;}
.hero .wrap{position:relative;z-index:2;padding:100px 32px 92px}
.hero h1{font-size:clamp(34px,5vw,58px);max-width:18ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:#5fd6d6}
.lede{font-size:clamp(16px,1.6vw,19px);color:#bcd0e2;max-width:64ch;margin-bottom:34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Value tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tile{border:1px solid var(--line);border-radius:12px;padding:30px 28px;background:var(--white);transition:.18s;}
.tile:hover{border-color:var(--teal);box-shadow:0 8px 30px -18px rgba(11,31,51,.4)}
.tile .ic{width:38px;height:38px;border-radius:9px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tile .ic svg{width:20px;height:20px;stroke:var(--teal-deep);fill:none}
.tile h3{font-size:17px;margin-bottom:9px}
.tile p{font-size:14px;color:var(--muted)}
@media(max-width:820px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---- Principles ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:44px}
.pcell{background:var(--white);padding:30px 26px}
.pcell .pn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-deep);margin-bottom:14px}
.pcell h3{font-size:16.5px;margin-bottom:8px}
.pcell p{font-size:14px;color:var(--muted)}
@media(max-width:820px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}

/* ---- Participating DPGs ---- */
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.mchip{border:1px solid var(--line);border-radius:12px;background:var(--white);padding:26px 28px;text-align:left;transition:.18s;display:flex;flex-direction:column;gap:16px;}
.mchip:hover{border-color:var(--teal);box-shadow:0 6px 24px -12px rgba(11,31,51,.2)}
.mchip .logo-area{height:44px;display:flex;align-items:center}
.mchip .logo-area img{height:40px;width:auto;display:block;object-fit:contain}
.mchip small{font-size:13px;color:var(--muted);display:block}
@media(max-width:820px){.mrow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mrow{grid-template-columns:1fr}}

/* ---- Doors ---- */
.doors{background:var(--navy);color:#fff}
.doors h2{color:#fff}
.doors .section-lede{color:#9fb4c8}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.door{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:32px 28px;transition:.18s;display:flex;flex-direction:column;gap:11px;}
.door:hover{background:rgba(255,255,255,.05);border-color:rgba(95,214,214,.5)}
.door .dlabel{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5fd6d6;letter-spacing:.04em}
.door h3{font-size:20px;color:#fff}
.door p{font-size:14px;color:#9fb4c8}
.door .go{margin-top:auto;padding-top:14px;font-size:13.5px;color:#fff;font-weight:500;display:flex;align-items:center;gap:7px}
.door .go svg{width:14px;height:14px}
@media(max-width:780px){.dgrid{grid-template-columns:1fr}}