:root {
    --tasmitas-navy: #13283f;
    --tasmitas-teal: #1fb6a6;
    --tasmitas-coral: #f06f61;
    --tasmitas-purple: #7357c8;
    --tasmitas-yellow: #f5c84c;
    --tasmitas-soft: #f5f8fb;
}

html { scroll-behavior: smooth; }
.hero-copy { max-width: 760px; }
.hero-app-card { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.hero-logo { width: 52px; height: 52px; object-fit: contain; }
.mini-stat-card,.task-demo-card,.reward-demo-card { border: 1px solid rgba(19,40,63,.09); border-radius: 1.25rem; background: #fff; padding: 1rem; }
.reward-demo-card { background: linear-gradient(135deg,rgba(31,182,166,.10),rgba(115,87,200,.08)); }
.reward-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 1rem; color: var(--tasmitas-purple); background: rgba(115,87,200,.12); font-size: 1.15rem; }
.section-kicker { display: inline-block; margin-bottom: .75rem; color: var(--tasmitas-teal); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
.process-card { position: relative; height: 100%; padding: 1.75rem; border: 1px solid #e7edf3; border-radius: 1.5rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(18,39,61,.06); }
.process-card p { margin-bottom: 0; color: #6c757d; }
.process-number { position: absolute; top: 1rem; right: 1rem; color: #dce4ec; font-size: 2rem; font-weight: 800; }
.process-icon,.feature-icon-v2,.property-example-icon { display: grid; place-items: center; }
.process-icon { width: 54px; height: 54px; margin-bottom: 1.25rem; border-radius: 1rem; font-size: 1.35rem; }
.property-example-card { display: flex; align-items: center; gap: .75rem; height: 100%; padding: 1rem; border: 1px solid #e1e8ef; border-radius: 1rem; background: rgba(255,255,255,.88); }
.property-example-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: .9rem; }
.browser-mockup { overflow: hidden; border: 1px solid rgba(19,40,63,.10); border-radius: 1.5rem; background: #fff; }
.browser-topbar { display: flex; gap: .4rem; padding: .85rem 1rem; border-bottom: 1px solid #e9eef3; background: #f6f8fa; }
.browser-topbar span { width: 10px; height: 10px; border-radius: 50%; background: #cbd5df; }
.member-row { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; padding: .85rem; border-radius: 1rem; background: var(--tasmitas-soft); }
.member-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--tasmitas-teal),var(--tasmitas-purple)); font-weight: 700; }
.feature-card-v2 { padding: 2rem; border: 1px solid #e7edf3; border-radius: 1.5rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(18,39,61,.06); transition: transform .25s ease,box-shadow .25s ease; }
.feature-card-v2:hover { transform: translateY(-6px); box-shadow: 0 1rem 2.5rem rgba(18,39,61,.12); }
.feature-icon-v2 { width: 58px; height: 58px; margin-bottom: 1.25rem; border-radius: 1.1rem; font-size: 1.4rem; }
.activity-example { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: .9rem 1rem; border-radius: .9rem; background: var(--tasmitas-soft); }
.invitation-mockup { max-width: 620px; margin-inline: auto; padding: 2rem; border: 1px solid #e1e8ef; border-radius: 1.5rem; background: #fff; }
.invitation-logo { width: 48px; height: 48px; object-fit: contain; }
.feature-check-list { display: grid; gap: .9rem; padding: 0; margin: 1.75rem 0 0; list-style: none; }
.feature-check-list i { margin-right: .55rem; color: var(--tasmitas-teal); }
.platform-card { height: 100%; padding: 2rem; border: 1px solid #e7edf3; border-radius: 1.5rem; background: #fff; text-align: center; }
.platform-card > i { display: inline-grid; width: 64px; height: 64px; place-items: center; margin-bottom: 1rem; border-radius: 1.25rem; color: var(--tasmitas-navy); background: var(--tasmitas-soft); font-size: 1.8rem; }
.platform-card p { margin-bottom: 0; color: #6c757d; }
.closing-logo { width: min(260px,70vw); height: auto; }
@media (max-width: 991.98px) { .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hero-parallax { min-height: auto; } }
@media (max-width: 575.98px) { .process-grid { grid-template-columns: 1fr; } .display-2 { font-size: clamp(2.35rem,12vw,3.5rem); } .hero-app-card,.feature-card-v2,.invitation-mockup { border-radius: 1.15rem !important; } }