/* DataEarners public site + sign-in. Brand kit: Deep Navy #092849, Data Teal #009D8D, Bright Cyan #08BEC8,
   Link Blue #0874C9, Off White #F4F8FB; Inter (Bold headings, Regular body). */
:root {
    /* Brand kit (Data_Earners_Brand_Standards.pdf): Deep Navy, Data Teal, Bright Cyan, Link Blue, Off White. */
    --de-navy: #092849; --de-navy-2: #0d3360; --de-navy-3: #12457c;
    --de-teal: #009D8D; --de-teal-2: #00796d; --de-teal-soft: #e2f4f2;
    --de-cyan: #08BEC8; --de-blue: #0874C9; --de-violet: var(--de-blue);
    --de-ink: #06213D; --de-slate: #55677e; --de-line: #dce5ee; --de-bg: #F4F8FB;
    --de-font: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --de-radius: 18px;
}
body.de { font-family: var(--de-font); color: var(--de-ink); background: #fff; -webkit-font-smoothing: antialiased; }
.de h1, .de h2, .de h3, .de h4, .de .de-display { font-family: var(--de-font); font-weight: 700; letter-spacing: -0.025em; }
.de a { color: var(--de-blue); }
.de a:hover { color: var(--de-navy); }
.de-preview-bar { background: var(--de-navy); color: #c9d6ee; font-size: .85rem; text-align: center; padding: .45rem 1rem; }
.de-preview-bar a { color: var(--de-cyan); text-decoration: none; font-weight: 600; }

/* Header */
.de-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--de-line); }
.de-header .navbar { padding: .7rem 0; }
.de-logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--de-font); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.035em; color: var(--de-navy) !important; text-decoration: none; line-height: 1; }
.de-logo-word b { color: var(--de-teal); font-weight: 700; }
.de-logo-mark { width: 48px; height: auto; aspect-ratio: 600 / 470; flex: none; }
/* Reversed lockup on navy: white wallet + "Data", teal stays (brand kit "reversed"). */
.de-logo-reversed, .de-footer .de-logo, .de-auth-side .de-logo { --de-mark-wallet: #fff; --de-mark-hole: var(--de-navy); color: #fff !important; }
.de-footer .de-logo { --de-mark-hole: var(--de-ink); }
.de-header .nav-link { color: var(--de-ink); font-weight: 500; padding: .45rem .85rem !important; border-radius: 999px; }
.de-header .nav-link:hover, .de-header .nav-link.active { background: var(--de-teal-soft); color: var(--de-navy); }

/* Buttons */
.de .btn-teal, .btn-teal { background: var(--de-teal); border: 0; color: var(--de-navy); font-weight: 600; border-radius: 999px; padding: .7rem 1.4rem; }
.de .btn-teal:hover, .de .btn-teal:focus, .btn-teal:hover { background: var(--de-cyan); color: var(--de-navy); box-shadow: 0 8px 26px rgba(0,157,141,.35); }
.de .btn-navy, .btn-navy { background: var(--de-navy); color: #fff; border: 0; font-weight: 600; border-radius: 999px; padding: .7rem 1.4rem; }
.de .btn-navy:hover, .btn-navy:hover { background: var(--de-navy-3); color: #fff; }
.de .btn-ghost, .btn-ghost { background: transparent; border: 1.5px solid currentColor; color: inherit; font-weight: 600; border-radius: 999px; padding: .65rem 1.3rem; }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: inherit; }
.btn-lg.btn-teal, .btn-lg.btn-navy, .btn-lg.btn-ghost { padding: .85rem 1.7rem; font-size: 1.05rem; }

/* Hero */
.de-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 600px at 85% -10%, rgba(0,157,141,.28), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(8,116,201,.25), transparent 60%), var(--de-navy); padding: 5.5rem 0 5rem; }
.de-hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 700; line-height: 1.05; }
.de-hero h1 .hl { color: var(--de-cyan); }
.de-hero .lead { color: #c9d6ee; font-size: 1.18rem; max-width: 36rem; }
.de-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); }
.de-hero-art { position: relative; max-width: 480px; margin-left: auto; }
.de-hero-art svg { width: 100%; height: auto; overflow: visible; }
.de-hero-art .stream rect { fill: var(--de-cyan); opacity: 0; animation: de-stream 4.2s linear infinite; }
.de-hero-art .pixels rect { animation: de-pixel 3.6s ease-in-out infinite; }
.de-hero-art .db path, .de-hero-art .db ellipse { animation: de-tier 3.6s ease-in-out infinite; }
.de-hero-art .db .t1 { animation-delay: .25s; } .de-hero-art .db .t0 { animation-delay: .5s; }
.de-hero-art .glow { animation: de-glow 5s ease-in-out infinite; transform-origin: 380px 300px; }
@keyframes de-stream { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translateX(250px); } }
@keyframes de-pixel { 50% { opacity: .55; } }
@keyframes de-tier { 0%, 60%, 100% { fill: var(--de-teal); } 30% { fill: var(--de-cyan); } }
@keyframes de-glow { 50% { opacity: .55; transform: scale(.94); } }
@keyframes de-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .de-hero-art .stream rect, .de-hero-art .pixels rect, .de-hero-art .db *, .de-hero-art .glow { animation: none; } .de-hero-art .stream { display: none; } }
.de-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--de-teal-2); }
.de-hero .de-kicker { color: var(--de-cyan); }
.de-hero .de-kicker::before, .de-section-head .de-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.de-trust { display: flex; flex-wrap: wrap; gap: 1.2rem; color: #9fb1d1; font-size: .92rem; margin-top: 2rem; }
.de-trust i { color: var(--de-cyan); margin-right: .35rem; }

/* Sections */
.de-section { padding: 5rem 0; }
.de-section.alt { background: var(--de-bg); }
.de-section.dark { background: var(--de-navy); color: #fff; }
.de-section.dark p { color: #c9d6ee; }
.de-section-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.de-section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; margin: .5rem 0 .75rem; }
.de-section-head p { color: var(--de-slate); font-size: 1.08rem; }
.de-section.dark .de-section-head p { color: #c9d6ee; }
.de-card { background: #fff; border: 1px solid var(--de-line); border-radius: var(--de-radius); padding: 1.6rem; height: 100%; transition: transform .2s, box-shadow .2s; }
.de-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(9,40,73,.08); }
.de-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--de-teal-soft); color: var(--de-teal-2); font-size: 1.25rem; margin-bottom: 1rem; }
.de-card h3 { font-size: 1.18rem; font-weight: 700; }
.de-card p { color: var(--de-slate); margin: 0; }
.de-section.dark .de-card { background: var(--de-navy-2); border-color: rgba(255,255,255,.08); color: #fff; }
.de-section.dark .de-card .ic { background: rgba(8,190,200,.14); color: var(--de-cyan); }
.de-section.dark .de-card p { color: #b5c4e0; }
.de-step { position: relative; padding-left: 4rem; margin-bottom: 2rem; }
.de-step-num { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--de-navy); color: var(--de-cyan); font-family: var(--de-font); font-weight: 700; font-size: 1.15rem; }
.de-step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.de-step p { color: var(--de-slate); margin: 0; }
.de-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--de-line); font-size: .9rem; margin: .2rem; }
.de-chip i { color: var(--de-teal-2); }
.de-band { background: linear-gradient(120deg, var(--de-navy) 0%, var(--de-navy-3) 100%); color: #fff; border-radius: 28px; padding: 3rem; position: relative; overflow: hidden; }
.de-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(0,157,141,.45), transparent 70%); }
.de-band p { color: #c9d6ee; }
.de-note { font-size: .85rem; color: var(--de-slate); }
.de-panel { background: #fff; border: 1px solid var(--de-line); border-radius: 24px; padding: 2rem; box-shadow: 0 20px 60px rgba(9,40,73,.06); }
.de-panel .form-control, .de-panel .form-select { border-radius: 12px; padding: .7rem .9rem; border-color: var(--de-line); }
.de-panel .form-control:focus, .de-panel .form-select:focus { border-color: var(--de-teal); box-shadow: 0 0 0 .2rem rgba(0,157,141,.2); }
.de-check { display: block; border: 1px solid var(--de-line); border-radius: 12px; padding: .6rem .8rem; cursor: pointer; height: 100%; }
.de-check:has(input:checked) { border-color: var(--de-teal); background: var(--de-teal-soft); }
.de-check input { margin-right: .45rem; }
.de-rate-table td, .de-rate-table th { padding: .55rem .8rem; }
.de-sponsor { display: flex; align-items: center; gap: .8rem; background: var(--de-teal-soft); border-radius: 14px; padding: .8rem 1rem; }
.de-sponsor .av { width: 42px; height: 42px; border-radius: 50%; background: var(--de-navy); color: var(--de-cyan); display: grid; place-items: center; font-weight: 700; }
.de-faq details { border-bottom: 1px solid var(--de-line); padding: 1rem 0; }
.de-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.de-faq summary::after { content: "+"; color: var(--de-teal-2); font-size: 1.3rem; line-height: 1; }
.de-faq details[open] summary::after { content: "–"; }
.de-faq p { color: var(--de-slate); margin: .6rem 0 0; }

/* Footer */
.de-footer { background: var(--de-ink); color: #9fb1d1; padding: 3.5rem 0 2rem; font-size: .93rem; }
.de-footer h4 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: .9rem; }
.de-footer ul { list-style: none; padding: 0; margin: 0; }
.de-footer li { margin-bottom: .45rem; }
.de-footer a { color: #c9d6ee; text-decoration: none; }
.de-footer a:hover { color: var(--de-cyan); }
.de-legal { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .8rem; color: #7f91b3; }

/* Sign-in */
.de-auth { background: var(--de-bg); }
.de-auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.de-auth-side { position: relative; overflow: hidden; background: radial-gradient(800px 500px at 100% 0%, rgba(0,157,141,.3), transparent 60%), var(--de-navy); color: #fff; padding: 3rem; display: flex; flex-direction: column; }
.de-auth-pitch { margin: auto 0; max-width: 26rem; }
.de-auth-pitch h2 { font-size: 2.1rem; font-weight: 700; margin: .6rem 0 1.4rem; }
.de-auth-pitch ul { list-style: none; padding: 0; }
.de-auth-pitch li { display: flex; gap: .8rem; margin-bottom: .9rem; color: #c9d6ee; }
.de-auth-pitch li i { color: var(--de-cyan); margin-top: .2rem; width: 18px; }
.de-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.de-auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--de-line); border-radius: 24px; padding: 2.2rem; box-shadow: 0 20px 60px rgba(9,40,73,.08); }
.de-auth-card h1 { font-size: 1.7rem; font-weight: 700; }
.de-auth-card .lead-in { color: var(--de-slate); }
.de-auth-card .form-control { border-radius: 12px; padding: .7rem .9rem; }
.de-auth-foot { margin-top: 1.4rem; font-size: .9rem; color: var(--de-slate); }
.de-auth-foot a { color: var(--de-navy); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .de-auth-shell { grid-template-columns: 1fr; } .de-auth-side { padding: 1.5rem; } .de-auth-pitch { display: none; } }
.de-hero .btn-ghost, .de-band .btn-ghost, .de-section.dark .btn-ghost { color: #fff; }
.de-auth-side .de-kicker, .de-section.dark .de-kicker, .de-band .de-kicker { color: var(--de-cyan); }

/* Recruiting website (dataearns.com): "invited by" line in the hero. */
.de-invite { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #e6eef9; font-size: .95rem; }
.de-invite .av { width: 32px; height: 32px; border-radius: 50%; background: var(--de-teal); color: var(--de-navy); display: grid; place-items: center; font-weight: 700; flex: none; }
.de-recruit .de-step { max-width: 46rem; margin-left: auto; margin-right: auto; }
.de-notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }