/* ============================================================
   page-home.css — page-specific styles for the V2 homepage (/)
   Load AFTER marketing-v2-base.css. Extracted verbatim from the
   homepage's inline <style> block. Do not rename classes here;
   they're referenced directly in the homepage markup.
   ============================================================ */

:root{
  --blue:      #4173db;
  --blue-d:    #2f5cc0;
  --blue-dd:   #1e3f8f;
  --blue-lt:   #eef2fd;
  --blue-xl:   #f4f7fe;
  --green:     #74dd24;
  --green-d:   #5ab81a;
  --green-lt:  #f2fce8;
  --green-xl:  #f7fdf0;
  --ink:       #0d1526;
  --ink-2:     #1b2d4f;
  --ink-3:     #2a3f63;
  --body:      #3d5070;
  --muted:     #647899;
  --subtle:    #8fa4c0;
  --line:      #dde5f0;
  --surf:      #f5f8ff;
  --white:     #ffffff;
  --amber:     #f4a01e;
  --amber-lt:  #fff8ec;
  --teal:      #0ea5a0;
  --teal-lt:   #ecfdf9;
  --violet:    #7c5cbf;
  --violet-lt: #f3f0fc;
  --danger:    #e63946;
  --display:   'Sora', sans-serif;
  --sans:      'Inter', sans-serif;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px;
  --sh-1: 0 1px 3px rgba(13,21,38,.05), 0 4px 14px rgba(13,21,38,.07);
  --sh-2: 0 4px 16px rgba(13,21,38,.08), 0 20px 56px rgba(13,21,38,.1);
  --sh-3: 0 8px 24px rgba(65,115,219,.14), 0 28px 72px rgba(65,115,219,.18);
  --sh-green: 0 0 0 3px rgba(116,221,36,.3);
}

.eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.eyebrow--green { color: var(--green-d); }
.eyebrow--white { color: rgba(255,255,255,.45); }
.eyebrow--amber { color: var(--amber); }
.d1 { font-size: clamp(2.5rem, 5.2vw, 3.8rem); font-weight: 800; }
.d2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 700; }
.d3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; }
.green { color: var(--green) !important; }
.blue  { color: var(--blue) !important; }
.c-green em { font-style: normal; color: var(--green); }
.c-blue  em { font-style: normal; color: var(--blue); }
.lead { font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.8; color: var(--muted); }
.lead--lg { font-size: clamp(1.05rem, 1.55vw, 1.18rem); }
.lead--white { color: rgba(255,255,255,.62); }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mb-4 { margin-bottom: 16px; }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-d); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(65,115,219,.35); color: var(--white); }
.btn--green { background: var(--green); color: var(--ink); }
.btn--green:hover { background: var(--green-d); transform: translateY(-1px); box-shadow: var(--sh-green); color: var(--ink); }
.btn--ghost { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.25); }
.btn--ghost:hover { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); color: var(--white); }
.btn--outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--white); }

.nav-logo-fb { display: none; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--white); align-items: center; gap: 8px; }
.nav-logo-fb .t-mark { background: var(--green); color: var(--ink); padding: 3px 9px; border-radius: 5px; font-size: .82rem; }
.nav-logo-fb .t-dot { color: var(--green); }

.hero { background: var(--ink); position: relative; overflow: hidden; min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 80px 0 70px; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(65,115,219,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(65,115,219,.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 85% at 60% 40%, black 15%, transparent 80%); }
.hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-orb-1 { width: 800px; height: 800px; background: radial-gradient(circle, rgba(65,115,219,.16) 0%, transparent 65%); top: -280px; right: -200px; }
.hero-orb-2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(116,221,36,.1) 0%, transparent 65%); bottom: -80px; left: 5%; }
.hero-content { position: relative; z-index: 2; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
@media(max-width:960px) { .hero-split { grid-template-columns: 1fr; gap: 48px; } }

.pbar { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 4px; gap: 3px; margin-bottom: 28px; flex-wrap: wrap; }
.ptab { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: var(--r-pill); border: none; cursor: pointer; color: rgba(255,255,255,.45); background: transparent; transition: all .22s; white-space: nowrap; }
.ptab.on { background: var(--blue); color: var(--white); box-shadow: 0 2px 12px rgba(65,115,219,.4); }
.ptab.on[data-p="self"] { background: var(--green-d); }
.ptab.on[data-p="nri"]  { background: var(--amber); color: var(--ink); }
.ptab:hover:not(.on) { color: rgba(255,255,255,.8); }
.ph { display: none; }
.ph.on { display: block; animation: fu .3s ease; }
@keyframes fu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pain-hook { display: inline-flex; align-items: center; gap: 8px; background: rgba(230,57,70,.1); border: 1px solid rgba(230,57,70,.22); border-radius: var(--r-sm); padding: 7px 13px; font-size: 12.5px; color: #f87171; margin-bottom: 22px; font-weight: 500; line-height: 1.5; }

.trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-pill); padding: 5px 13px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.5); }
.chip i { color: var(--green); font-size: 12px; }

.hero-visual { position: relative; }
.mock { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); overflow: hidden; backdrop-filter: blur(10px); }
.mock-bar { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); padding: 11px 18px; display: flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4); margin-left: 6px; letter-spacing: .05em; text-transform: uppercase; }
.mock-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 13px 10px; text-align: center; }
.ms-val { font-family: var(--display); font-size: 1.4rem; font-weight: 700; color: var(--white); line-height: 1; }
.ms-val.g { color: var(--green); }
.ms-val.a { color: var(--amber); }
.ms-lbl { font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.35); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.mock-section-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.25); padding: 2px 0; }
.mock-rows { display: flex; flex-direction: column; gap: 7px; }
.mrow { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-sm); padding: 9px 12px; }
.mav { width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); }
.mrow-info { flex: 1; }
.mrow-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); line-height: 1.2; }
.mrow-sub  { font-size: 10.5px; color: rgba(255,255,255,.32); }
.mbadge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.mb-ok  { background: rgba(116,221,36,.14); color: var(--green); border: 1px solid rgba(116,221,36,.22); }
.mb-due { background: rgba(244,160,30,.14); color: var(--amber); border: 1px solid rgba(244,160,30,.22); }
.mb-exp { background: rgba(230,57,70,.14); color: #f87171; border: 1px solid rgba(230,57,70,.22); }
.mb-rev { background: rgba(65,115,219,.14); color: #93b4f8; border: 1px solid rgba(65,115,219,.22); }

.flt { position: absolute; background: var(--green); color: var(--ink); font-size: 11.5px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 20px rgba(116,221,36,.4); animation: bob 3.2s ease-in-out infinite; white-space: nowrap; }
.flt-2 { background: var(--blue); color: var(--white); box-shadow: 0 6px 20px rgba(65,115,219,.4); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.flt-a { bottom: -14px; right: -12px; }
.flt-b { top: -10px; left: -12px; animation-delay: 1.4s; }

.proof { background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 22px 0; }
.proof-inner { display: flex; flex-wrap: wrap; justify-content: center; }
.pi { display: flex; align-items: center; gap: 10px; padding: 8px 28px; border-right: 1px solid rgba(255,255,255,.07); }
.pi:last-child { border-right: none; }
.pi-num { font-family: var(--display); font-size: 1.55rem; font-weight: 800; color: var(--white); line-height: 1; }
.pi-num.g { color: var(--green); }
.pi-lbl { font-size: 11.5px; color: rgba(255,255,255,.38); line-height: 1.4; max-width: 88px; }
@media(max-width:560px) { .pi { padding: 8px 16px; } .pi-num { font-size: 1.2rem; } }

.section-intro { max-width: 640px; margin: 0 auto 56px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media(max-width:900px) { .pgrid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

.pcard { border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; transition: all .3s; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--blue); }
.pcard-head { padding: 24px 24px 20px; background: var(--ink-2); position: relative; overflow: hidden; }
.pcard-head::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 18px 18px; }
.pcard-head-inner { position: relative; z-index: 1; }
.ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 14px; }
.ptag-r { background: rgba(65,115,219,.2); color: #93b4f8; border: 1px solid rgba(65,115,219,.28); }
.ptag-s { background: rgba(116,221,36,.14); color: var(--green); border: 1px solid rgba(116,221,36,.22); }
.ptag-n { background: rgba(244,160,30,.14); color: var(--amber); border: 1px solid rgba(244,160,30,.22); }
.pcard-head h3 { font-size: 1.1rem; color: var(--white); margin-bottom: 5px; }
.pcard-head p { font-size: 12.5px; color: rgba(255,255,255,.45); font-style: italic; }
.pcard-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ba-col { padding: 14px 16px; }
.ba-col.before { background: #fff8f8; }
.ba-col.after  { background: #f8fff3; }
.ba-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.ba-lbl.b { color: var(--danger); }
.ba-lbl.a { color: var(--green-d); }
.ba-col p { font-size: 12px; line-height: 1.6; color: var(--body); }
.pcard-list { padding: 18px 20px; flex: 1; }
.pcard-list ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pcard-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--body); line-height: 1.5; }
.pcard-list i { color: var(--green-d); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.pcard-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surf); }
.pcard-foot .btn { width: 100%; justify-content: center; font-size: 13.5px; }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media(max-width:900px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 20px; transition: box-shadow .25s; position: relative; overflow: hidden; }
.pain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--danger), #f97316); opacity: 0; transition: opacity .25s; }
.pain-card:hover { box-shadow: var(--sh-2); }
.pain-card:hover::before { opacity: 1; }
.pain-card .emoji { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.pain-card h4 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.pain-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }
.pain-card .owner-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.ot { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 2px 8px; border-radius: var(--r-pill); }
.ot-r { background: var(--blue-lt); color: var(--blue-d); }
.ot-s { background: var(--green-lt); color: var(--green-d); }
.ot-n { background: var(--amber-lt); color: #8a5200; }
.pain-resolve { margin-top: 40px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pain-resolve-icon { width: 48px; height: 48px; background: var(--green-lt); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.pain-resolve p { font-size: 14.5px; color: var(--body); line-height: 1.65; flex: 1; }
.pain-resolve strong { color: var(--ink); }

.hiw-track { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-top: 56px; }
.hiw-track::before { content: ''; position: absolute; top: 35px; left: calc(12.5% + 16px); right: calc(12.5% + 16px); height: 1px; background: linear-gradient(90deg, var(--blue), var(--green)); z-index: 0; }
@media(max-width:768px) { .hiw-track { grid-template-columns: 1fr 1fr; gap: 32px; } .hiw-track::before { display: none; } }
.hiw-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; }
.hiw-icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.4rem; border: 3px solid var(--white); position: relative; }
.hi-blue  { background: var(--blue); color: var(--white); box-shadow: 0 0 0 4px rgba(65,115,219,.18); }
.hi-green { background: var(--green); color: var(--ink); box-shadow: 0 0 0 4px rgba(116,221,36,.18); }
.actor { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 8px; display: inline-block; }
.actor-you  { background: var(--blue-lt); color: var(--blue-d); }
.actor-them { background: var(--green-lt); color: var(--green-d); }
.hiw-step h5 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.hiw-step p  { font-size: 13px; color: var(--muted); line-height: 1.6; }
.hiw-cta { text-align: center; margin-top: 56px; }
.hiw-cta p { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

.self-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media(max-width:900px) { .self-wrap { grid-template-columns: 1fr; gap: 40px; } }
.self-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 16px; transition: all .25s; }
.sf-card:hover { background: var(--white); box-shadow: var(--sh-1); border-color: rgba(65,115,219,.2); }
.sf-icon { width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 12px; }
.sf-i-blue   { background: var(--blue-lt); color: var(--blue); }
.sf-i-green  { background: var(--green-lt); color: var(--green-d); }
.sf-i-amber  { background: var(--amber-lt); color: var(--amber); }
.sf-i-teal   { background: var(--teal-lt); color: var(--teal); }
.sf-i-violet { background: var(--violet-lt); color: var(--violet); }
.sf-i-ink    { background: var(--surf); color: var(--muted); border: 1px solid var(--line); }
.sf-card h5 { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.sf-card p  { font-size: 12px; color: var(--muted); line-height: 1.6; }

.nri-wrap { background: var(--ink-2); border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
@media(max-width:900px) { .nri-wrap { grid-template-columns: 1fr; } }
.nri-l { padding: 52px 44px; position: relative; overflow: hidden; }
.nri-l::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 0% 50%, rgba(65,115,219,.16) 0%, transparent 60%); }
.nri-l > * { position: relative; z-index: 1; }
.nri-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 13px; margin: 24px 0 32px; }
.nri-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.6; }
.nri-list i { color: var(--green); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.nri-list strong { color: var(--white); }
.nri-r { background: rgba(255,255,255,.03); border-left: 1px solid rgba(255,255,255,.07); padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.nri-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: all .25s; }
.nri-stat:hover { background: rgba(255,255,255,.08); border-color: rgba(116,221,36,.28); }
.nri-stat-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; background: rgba(65,115,219,.15); border: 1px solid rgba(65,115,219,.2); }
.nri-stat-ico.g { background: rgba(116,221,36,.1); border-color: rgba(116,221,36,.2); }
.nri-stat-val { font-family: var(--display); font-size: 1.45rem; font-weight: 800; color: var(--white); line-height: 1; }
.nri-stat-val.g { color: var(--green); }
.nri-stat-desc { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 3px; line-height: 1.4; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media(max-width:900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 20px; transition: all .25s; position: relative; overflow: hidden; }
.feat-card:hover { box-shadow: var(--sh-2); transform: translateY(-4px); border-color: rgba(65,115,219,.22); }
.feat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.feat-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.fi-b { background: var(--blue-lt); color: var(--blue); }
.fi-g { background: var(--green-lt); color: var(--green-d); }
.fi-a { background: var(--amber-lt); color: var(--amber); }
.fi-t { background: var(--teal-lt); color: var(--teal); }
.fi-v { background: var(--violet-lt); color: var(--violet); }
.who { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: var(--r-pill); }
.w-all  { background: var(--blue-lt);   color: var(--blue-d); }
.w-nri  { background: var(--amber-lt);  color: #8a5200; }
.w-self { background: var(--green-lt);  color: var(--green-d); }
.w-rent { background: var(--violet-lt); color: var(--violet); }
.feat-card h4 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.feat-card p  { font-size: 13px; color: var(--muted); line-height: 1.65; }
.soon { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; background: var(--amber-lt); color: var(--amber); border: 1px solid rgba(244,160,30,.28); padding: 3px 8px; border-radius: var(--r-pill); }

.eco-section { background: var(--ink); position: relative; overflow: hidden; }
.eco-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 24px 24px; }
.eco-section::after { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, rgba(65,115,219,.12) 0%, transparent 65%); border-radius: 50%; pointer-events: none; }
.eco-inner { position: relative; z-index: 2; }
.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; }
@media(max-width:900px) { .eco-grid { grid-template-columns: 1fr 1fr; } }
.eco-node { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; transition: all .3s; position: relative; }
.eco-node:hover { background: rgba(255,255,255,.08); border-color: rgba(116,221,36,.3); transform: translateY(-4px); }
.eco-node.live { border-color: rgba(116,221,36,.3); }
.eco-node.live::before { content: 'Live'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--ink); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 10px; border-radius: var(--r-pill); }
.eco-node.soon-node::before { content: 'Coming Soon'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--amber); color: var(--ink); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.eco-icon { font-size: 2rem; margin-bottom: 12px; display: block; }
.eco-node h5 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.eco-node p { font-size: 12px; color: rgba(255,255,255,.42); line-height: 1.6; }
.eco-connect { margin-top: 48px; background: rgba(116,221,36,.06); border: 1px solid rgba(116,221,36,.18); border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.eco-connect-icon { font-size: 2rem; flex-shrink: 0; }
.eco-connect p { font-size: 14.5px; color: rgba(255,255,255,.72); line-height: 1.7; flex: 1; }
.eco-connect strong { color: var(--green); }

.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media(max-width:900px) { .tgrid { grid-template-columns: 1fr; } }
.tcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; position: relative; transition: all .25s; }
.tcard:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.tcard-quote { position: absolute; top: 18px; right: 20px; font-size: 3.5rem; color: var(--blue-lt); font-family: Georgia, serif; font-weight: 900; line-height: 1; }
.tcard-type { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 14px; }
.tt-r { background: var(--blue-lt);   color: var(--blue-d); }
.tt-s { background: var(--green-lt);  color: var(--green-d); }
.tt-n { background: var(--amber-lt);  color: #8a5200; }
.tcard-stars { color: #f59e0b; font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
.tcard blockquote { font-size: 14px; color: var(--body); line-height: 1.78; font-style: italic; margin-bottom: 22px; }
.tcard-author { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); padding-top: 18px; }
.tav { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--white); flex-shrink: 0; }
.tav-b { background: linear-gradient(135deg, var(--blue), var(--blue-dd)); }
.tav-g { background: linear-gradient(135deg, var(--green-d), #2f9e12); }
.tav-a { background: linear-gradient(135deg, var(--amber), #c97a08); }
.tav-v { background: linear-gradient(135deg, var(--violet), #5a3f9e); }
.tcard-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tcard-loc  { font-size: 12px; color: var(--muted); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media(max-width:900px) { .price-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }
.price-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; position: relative; display: flex; flex-direction: column; transition: all .3s; }
.price-card:hover { box-shadow: var(--sh-2); }
.price-card.featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--sh-2); }
.price-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: var(--white); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 3px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.price-card h4 { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.price-card .psub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.ptag-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.price-amt { font-family: var(--display); font-size: 2.3rem; font-weight: 800; color: var(--ink); }
.price-per { font-size: 13px; color: var(--muted); }
.price-note { font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.pdivider { height: 1px; background: var(--line); margin: 0 0 18px; }
.price-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--body); line-height: 1.5; }
.price-features i.bi-check-circle-fill { color: var(--green-d); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.price-features i.bi-x-circle { color: var(--line); font-size: 13px; flex-shrink: 0; margin-top: 1px; }

.comp-strip { background: var(--ink); padding: 48px 0; }
.comp-inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.comp-text h3 { font-size: 1.15rem; color: var(--white); margin-bottom: 4px; }
.comp-text p { font-size: 13px; color: rgba(255,255,255,.45); }
.comp-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.cbadge { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: 9px 15px; }
.cbadge i { font-size: 1rem; color: var(--green); }
.cbadge span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }

.fcta { background: var(--ink); padding: 50px 0; position: relative; overflow: hidden; text-align: center; }
.fcta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 75% at 20% 50%, rgba(65,115,219,.14) 0%, transparent 60%), radial-gradient(ellipse 45% 65% at 80% 50%, rgba(116,221,36,.09) 0%, transparent 60%); }
.fcta::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 26px 26px; }
.fcta .container { position: relative; z-index: 2; }
.fcta-sub { font-size: clamp(1rem, 1.4vw, 1.1rem); color: rgba(255,255,255,.5); max-width: 560px; margin: 14px auto 36px; line-height: 1.8; }
.fcta-note { font-size: 12.5px; color: rgba(255,255,255,.25); margin-top: 18px; }

.fbrand-fb { display: none; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--white); margin-bottom: 14px; }
.fbrand-fb span { color: var(--green); }