/* ============================================================
   target_grid.css — CyberMDCare Main Page
   4 Target-Solution Grid Cards + Series Investment Data Room CTA
   Monotone, Silicon-Valley enterprise aesthetic
   ============================================================ */

.tg_section {
    --tg-ink:    #0B0B0F;
    --tg-text:   #16161C;
    --tg-muted:  #5B5B66;
    --tg-faint:  #8A8A94;
    --tg-border: #E3E3E8;
    --tg-bg-soft:#FAFAFB;
    --tg-white:  #FFFFFF;
    --tg-gold:   #B8924A;
    --tg-indigo: #5453E8;
    --tg-indigo-light: #6C6BF5;
    background: var(--tg-white);
    padding: 90px 0 100px;
    border-bottom: 1px solid var(--tg-border);
}

.tg_head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.tg_kicker {
    display:inline-flex; align-items:center; gap:8px;
    font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color: var(--tg-indigo); margin-bottom:14px;
}
.tg_kicker::before, .tg_kicker::after { content:''; width:18px; height:1px; background: var(--tg-indigo-light); opacity:.4; }
.tg_head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800; letter-spacing:-.02em;
    color: var(--tg-ink); line-height:1.25; margin-bottom:14px;
}
.tg_head p { font-size:1rem; line-height:1.7; color: var(--tg-muted); }

/* ==========================================
   4-CARD GRID
   ========================================== */
.tg_grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
    max-width:1280px; margin:0 auto; padding:0 20px;
}
.tg_card {
    display:flex; flex-direction:column; align-items:flex-start;
    background: var(--tg-white); border:1px solid var(--tg-border); border-radius:20px;
    padding:32px 26px; text-align:left; cursor:pointer;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position:relative; overflow:hidden; text-decoration:none; color:inherit;
}
.tg_card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--tg-indigo), var(--tg-indigo-light)); transform:scaleX(0); transform-origin:left;
    transition: transform .3s ease;
}
.tg_card:hover {
    border-color: var(--tg-indigo);
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -26px rgba(84,83,232,.35);
}
.tg_card:hover::before { transform:scaleX(1); }
.tg_card_icon {
    width:52px; height:52px; border-radius:14px; margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--tg-indigo), var(--tg-indigo-light)); color: var(--tg-white); flex-shrink:0;
}
.tg_card_icon svg { width:24px; height:24px; }
.tg_card_num {
    font-family: ui-monospace, 'SF Mono', monospace; font-size:.7rem; font-weight:700;
    letter-spacing:.1em; color: var(--tg-faint); margin-bottom:10px;
}
.tg_card h3 {
    font-size:1.02rem; font-weight:800; letter-spacing:.01em;
    color: var(--tg-ink); margin-bottom:10px; text-transform:uppercase;
}
.tg_card p { font-size:.88rem; line-height:1.6; color: var(--tg-muted); margin-bottom:20px; }
.tg_card_action {
    margin-top:auto; display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:.04em; color: var(--tg-ink);
    transition: color .25s ease;
}
.tg_card_action svg { width:15px; height:15px; transition: transform .25s ease; }
.tg_card:hover .tg_card_action { color: var(--tg-indigo); }
.tg_card:hover .tg_card_action svg { transform: translateX(3px); }

/* ==========================================
   MASTER CTA — Series Investment Data Room
   ========================================== */
.tg_master_wrap { max-width:1280px; margin:28px auto 0; padding:0 20px; }
.tg_master_btn {
    display:flex; align-items:center; justify-content:center; gap:16px;
    width:100%; background: linear-gradient(135deg, #1A1240 0%, #0B0B0F 62%);
    border: 1px solid rgba(108,107,245,.4);
    color:#fff; border-radius:20px; padding:30px 32px; cursor:pointer;
    position:relative; overflow:hidden; transition: box-shadow .3s ease, transform .2s ease, border-color .3s ease;
}
.tg_master_btn::before {
    content:''; position:absolute; inset:0; opacity:.7;
    background: radial-gradient(85% 140% at 0% 0%, rgba(84,83,232,.4), transparent 60%);
}
.tg_master_btn::after {
    content:''; position:absolute; inset:0; opacity:0; transition: opacity .3s ease;
    background: radial-gradient(120% 160% at 100% 100%, rgba(255,255,255,.18), transparent 60%);
}
.tg_master_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 60px -24px rgba(84,83,232,.45);
    border-color: rgba(255,255,255,.5);
}
.tg_master_btn:hover::after { opacity:1; }
.tg_master_inner { position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.tg_master_icon {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    background: linear-gradient(135deg, rgba(84,83,232,.35), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.5);
    display:flex; align-items:center; justify-content:center; color: #fff;
}
.tg_master_icon svg { width:22px; height:22px; }
.tg_master_text { text-align:left; }
.tg_master_text .label {
    display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color: #fff; margin-bottom:4px;
}
.tg_master_text .title {
    display:block; font-size:1.15rem; font-weight:800; letter-spacing:.02em; color:#fff;
}
.tg_master_arrow { position:relative; z-index:1; margin-left:auto; color: #fff; flex-shrink:0; }
.tg_master_arrow svg { width:22px; height:22px; }

/* ==========================================
   MODAL — shared frame for all 4 popups
   ========================================== */
.tg_modal_overlay {
    display:none; position:fixed; inset:0; z-index:10000;
    background: rgba(11,11,15,.62); backdrop-filter: blur(6px);
    align-items:center; justify-content:center; padding:28px;
}
.tg_modal_overlay.is-open { display:flex; }
.tg_modal {
    background:#fff; border-radius:24px; width:100%; max-width:760px; max-height:86vh;
    overflow-y:auto; position:relative; box-shadow:0 60px 120px -40px rgba(0,0,0,.5);
}
.tg_modal_head {
    position:sticky; top:0; z-index:2; background:#fff;
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding:32px 40px 20px; border-bottom:1px solid var(--tg-border, #E3E3E8);
}
.tg_modal_head .eyebrow {
    font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8A8A94;
    margin-bottom:8px; display:block;
}
.tg_modal_head h2 { font-size:1.4rem; font-weight:800; color:#0B0B0F; letter-spacing:-.01em; line-height:1.3; }
.tg_modal_head .tagline { font-size:.92rem; color:#5B5B66; margin-top:8px; line-height:1.6; }
.tg_modal_close {
    flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid #E3E3E8;
    background:#fff; color:#5B5B66; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tg_modal_close:hover { background:#F5F5F7; color:#0B0B0F; }
.tg_modal_body { padding:28px 40px 44px; }
.tg_modal_body p { font-size:.95rem; line-height:1.75; color:#3A3A42; margin-bottom:18px; }
.tg_modal_body h3 {
    font-size:1.02rem; font-weight:800; color:#0B0B0F; margin:32px 0 14px;
    padding-top:20px; border-top:1px solid #EEEEF1;
}
.tg_modal_body h3:first-of-type { border-top:none; padding-top:0; margin-top:8px; }
.tg_modal_body ul { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:14px; }
.tg_modal_body ul ul { margin:10px 0 0; padding-left:22px; gap:10px; }
.tg_modal_body li { font-size:.94rem; line-height:1.7; color:#3A3A42; padding-left:18px; position:relative; }
.tg_modal_body li::before {
    content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:#0B0B0F;
}
.tg_modal_body li b, .tg_modal_body p b { color:#0B0B0F; font-weight:700; }
.tg_modal_stage { margin-bottom:16px; }
.tg_modal_stage .stage_label {
    display:inline-block; font-family: ui-monospace, monospace; font-size:.7rem; font-weight:700;
    letter-spacing:.08em; color:#fff; background:#0B0B0F; padding:4px 10px; border-radius:6px; margin-bottom:8px;
}
.tg_verified {
    margin-top:28px; padding:16px 20px; background: var(--tg-bg-soft, #FAFAFB);
    border-left:3px solid #14B8A6; border-radius:0 12px 12px 0;
}
.tg_verified p { margin:0; font-size:.85rem; font-style:italic; color:#5B5B66; }

/* Investor Data Room modal — distinct, weightier styling */
.tg_modal--invest .tg_modal_head { background: linear-gradient(160deg,#101014,#0B0B0F); border-bottom-color:#26262E; }
.tg_modal--invest .tg_modal_head h2 { color:#fff; }
.tg_modal_head .eyebrow.gold { color: var(--tg-gold, #B8924A); }
.tg_modal--invest .tg_modal_head .tagline { color:rgba(255,255,255,.68); }
.tg_modal--invest .tg_modal_close { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }
.tg_modal--invest .tg_modal_close:hover { background:rgba(255,255,255,.16); }
.tg_invest_form { display:flex; flex-direction:column; gap:16px; max-width:420px; margin:8px auto 0; }
.tg_invest_form label { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B5B66; }
.tg_invest_form input {
    width:100%; padding:14px 16px; border:1px solid #E3E3E8; border-radius:12px; font-size:.95rem;
    font-family:inherit; margin-top:6px; box-sizing:border-box;
}
.tg_invest_form input:focus { outline:2px solid #0B0B0F; outline-offset:1px; }
.tg_invest_submit {
    margin-top:8px; width:100%; padding:15px; border:0; border-radius:12px; cursor:pointer;
    background: var(--tg-ink, #0B0B0F); color:#fff; font-size:.92rem; font-weight:700; letter-spacing:.04em;
}
.tg_invest_submit:hover { background:#000; }
.tg_invest_error { display:none; font-size:.85rem; color:#D33A3A; margin:-4px 0 0; }
.tg_invest_error.is-shown { display:block; }
.tg_invest_note { font-size:.82rem; color:#8A8A94; line-height:1.6; text-align:center; margin-top:16px; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1023px) {
    .tg_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tg_section { padding:64px 0 72px; }
    .tg_grid { grid-template-columns: 1fr; }
    .tg_master_btn { flex-direction:column; align-items:flex-start; padding:26px 22px; }
    .tg_master_inner { width:100%; }
    .tg_master_arrow { margin-left:0; align-self:flex-end; margin-top:-40px; }
    .tg_modal_head, .tg_modal_body { padding-left:24px; padding-right:24px; }
}