/* TRENDIMPACT FOUNDATION - Transparency Dashboard Dark + Blue */
:root {
  --tf-black: #030408; --tf-gray-900: #11131c; --tf-gray-700: #252a38;
  --tf-gray-500: #5a6274; --tf-gray-400: #8890a3; --tf-white: #f0f2f8;
  --tf-blue: #3b82f6; --tf-blue-glow: rgba(59,130,246,0.4);
  --tf-accent: #00d4aa; --tf-accent-glow: rgba(0,212,170,0.4);
  --glass: rgba(17,19,28,0.8); --border: rgba(59,130,246,0.15);
  --font-h: Outfit,system-ui,sans-serif; --font-b: Inter,system-ui,sans-serif;
  --font-mono: JetBrains Mono,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--tf-black);color:var(--tf-white);font-family:var(--font-b);line-height:1.6;overflow-x:hidden;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem)}
.header{height:90px;display:flex;align-items:center;border-bottom:1px solid var(--border);background:rgba(3,4,8,0.9);backdrop-filter:blur(20px);position:sticky;top:0;z-index:1000}
.header nav{display:flex;gap:2.5rem}
.header nav a{text-decoration:none;color:var(--tf-gray-400);font-weight:700;font-size:0.875rem;text-transform:uppercase;letter-spacing:2px;transition:0.3s ease;position:relative}
.header nav a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--tf-blue);transition:width 0.3s ease;box-shadow:0 0 10px var(--tf-blue-glow)}
.header nav a:hover{color:var(--tf-white)}.header nav a:hover::after{width:100%}
.epic-foundation-logo{position:relative;width:240px;height:240px;margin:0 auto 3rem;display:flex;align-items:center;justify-content:center;z-index:10}
.hero-logo{width:180px;height:auto;z-index:2;filter:drop-shadow(0 0 40px var(--tf-accent-glow));animation:foundationFloat 5s ease-in-out infinite}
@keyframes foundationFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.glow-ring{position:absolute;width:320px;height:320px;border:2px solid rgba(0,212,170,0.15);border-radius:50%;animation:pulseRing 3s ease-in-out infinite}
.glow-ring::before{content:'';position:absolute;inset:20px;border:1px dashed rgba(0,212,170,0.1);border-radius:50%;animation:pulseRing 3s ease-in-out infinite reverse}
@keyframes pulseRing{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.05);opacity:0.6}}
.hero{padding:4rem 0 5rem;text-align:center}
.hero h1{font-family:var(--font-h);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;letter-spacing:-3px;margin-bottom:1.5rem;background:linear-gradient(180deg,var(--tf-white),#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero>.container>p{color:var(--tf-gray-400);max-width:600px;margin:0 auto 3rem;font-size:1.125rem;line-height:1.8}
.lookup-card{background:var(--glass);border:1px solid var(--border);padding:4rem;border-radius:24px;backdrop-filter:blur(40px);max-width:800px;margin:0 auto;box-shadow:0 40px 100px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.05)}
.input-wrapper{display:flex;gap:1rem;margin-bottom:1rem}
.input-wrapper input{flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--border);padding:1.25rem 1.5rem;border-radius:12px;font-size:1.125rem;color:var(--tf-white);font-family:var(--font-mono);font-weight:600;transition:0.3s ease;letter-spacing:1px}
.input-wrapper input::placeholder{color:var(--tf-gray-500)}
.input-wrapper input:focus{outline:none;border-color:var(--tf-blue);background:rgba(255,255,255,0.05);box-shadow:0 0 30px var(--tf-blue-glow)}
.btn-lookup{padding:0 2.5rem;background:linear-gradient(135deg,var(--tf-blue),#2563eb);color:var(--tf-white);border:none;border-radius:12px;font-weight:800;font-family:var(--font-h);cursor:pointer;transition:0.3s ease;text-transform:uppercase;letter-spacing:2px;font-size:0.875rem;box-shadow:0 4px 20px var(--tf-blue-glow)}
.btn-lookup:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--tf-blue-glow)}
.lookup-card>p{color:var(--tf-gray-500);font-size:0.875rem;text-align:left}
.result-feed{margin-top:4rem;display:none;text-align:left;border-top:1px solid var(--border);padding-top:2.5rem;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.result-feed h4{margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;font-family:var(--font-mono);font-size:1rem;color:var(--tf-gray-400);letter-spacing:1px}
#ref-display{color:var(--tf-accent)}
.feed-steps-terminal{display:flex;flex-direction:column;gap:0}
.feed-step{display:flex;gap:1.5rem;position:relative;padding-bottom:2.5rem}
.feed-step::before{content:'';position:absolute;left:20px;top:45px;bottom:0;width:2px;background:var(--border)}
.feed-step.active::before{background:linear-gradient(to bottom,var(--tf-accent),transparent)}
.feed-step:last-child::before{display:none}
.step-marker{width:42px;height:42px;background:var(--tf-gray-900);border:2px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;z-index:10;flex-shrink:0;font-weight:900;font-family:var(--font-h);color:var(--tf-gray-400);transition:0.3s ease}
.feed-step.complete .step-marker{background:var(--tf-accent);border-color:var(--tf-accent);color:var(--tf-black);box-shadow:0 0 20px var(--tf-accent-glow)}
.feed-step.active .step-marker{border-color:var(--tf-accent);color:var(--tf-accent);box-shadow:0 0 15px var(--tf-accent-glow);animation:pulseMarker 2s ease-in-out infinite}
@keyframes pulseMarker{0%,100%{box-shadow:0 0 15px var(--tf-accent-glow)}50%{box-shadow:0 0 25px var(--tf-accent-glow)}}
.step-content h3{font-family:var(--font-h);font-size:1.25rem;margin-bottom:0.5rem;color:var(--tf-white)}
.step-content p{color:var(--tf-gray-500);font-size:0.95rem;line-height:1.6}
.stats{padding:6rem 0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem;text-align:center}
.stat-item h2{font-family:var(--font-h);font-size:4rem;font-weight:900;color:var(--tf-blue);margin-bottom:0.75rem;text-shadow:0 0 40px var(--tf-blue-glow)}
.stat-item p{color:var(--tf-gray-400);text-transform:uppercase;font-weight:700;letter-spacing:3px;font-size:0.875rem}
.stats .container>div:last-child{text-align:center;margin-top:4rem;color:var(--tf-gray-500);font-size:1rem}
footer{padding:4rem 0;border-top:1px solid var(--border);text-align:center;color:var(--tf-gray-500);font-size:0.875rem;letter-spacing:3px;font-weight:700;text-transform:uppercase}
@media(max-width:768px){.header{height:70px}.header nav{gap:1.5rem}.hero{padding-top:3rem}.epic-foundation-logo{width:180px;height:180px}.hero-logo{width:140px}.glow-ring{width:240px;height:240px}.lookup-card{padding:2.5rem}.input-wrapper{flex-direction:column}.btn-lookup{height:56px;width:100%}.stat-grid{grid-template-columns:1fr;gap:2rem}.stat-item h2{font-size:3rem}.feed-step{gap:1rem}.step-content h3{font-size:1.1rem}}
@media(max-width:480px){.hero h1{letter-spacing:-1px}.lookup-card{padding:1.5rem}}