.home-page { height:100vh; overflow:hidden; background:#07110f; }
.home-scene { position:fixed; inset:0; background:url('assets/eco-mascot-hero.png') center 45% / cover no-repeat; transform:scale(1.015); transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s; }
.home-vignette { position:fixed; inset:0; background:linear-gradient(180deg,rgba(3,12,10,.68) 0%,rgba(3,12,10,.12) 31%,rgba(3,12,10,.2) 62%,rgba(3,12,10,.9) 100%),linear-gradient(90deg,rgba(2,11,8,.36),transparent 34%,transparent 67%,rgba(2,11,8,.32)); }
.home-topbar { position:relative; z-index:2; height:82px; width:min(1500px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.22); }
.home-topbar .brand { text-shadow:0 2px 14px rgba(0,0,0,.45); }.home-topbar .brand small{color:rgba(255,255,255,.78)}
.home-status { margin-left:auto; display:flex; align-items:center; gap:10px; padding:9px 13px; color:rgba(255,255,255,.8); font-size:13px; background:rgba(4,20,14,.38); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); }
.home-status i { width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}.home-status strong{color:#fff;font:700 17px ui-monospace}
.home-main { position:relative; z-index:2; height:calc(100vh - 82px); padding:28px 0 24px; display:flex; flex-direction:column; width:min(1500px,calc(100% - 48px)); margin:auto; }
.home-heading { text-align:center; max-width:670px; margin:0 auto; text-shadow:0 2px 22px rgba(0,0,0,.5); }
.home-heading .eyebrow{color:#ecffbd}.home-heading h1{margin:7px 0 5px;font-size:clamp(34px,4vw,58px);line-height:1.08;letter-spacing:-.05em}.home-heading p{font-size:16px;color:rgba(255,255,255,.82);margin:0 auto;max-width:620px}
.portal-stage { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(250px,1fr)); align-items:center; justify-content:center; gap:24px; margin:4px auto 0; width:min(1200px,100%); perspective:1200px; }
.mascot-hit-area { min-width:250px; height:100%; }
.carbon-entry { --carbon:#5ff5c7; position:absolute; z-index:4; left:50%; bottom:12px; width:310px; min-height:76px; transform:translateX(-50%); display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:10px 14px 10px 10px; color:#fff; text-decoration:none; border:1px solid rgba(95,245,199,.48); border-radius:24px; background:linear-gradient(135deg,rgba(7,42,35,.94),rgba(5,23,20,.88)); backdrop-filter:blur(15px); box-shadow:0 10px 0 rgba(2,15,12,.82),0 20px 45px rgba(0,0,0,.34),0 0 28px rgba(95,245,199,.12); transition:transform .3s,border-color .3s,box-shadow .3s; }
.carbon-entry:hover { transform:translate(-50%,-7px); border-color:var(--carbon); box-shadow:0 7px 0 rgba(15,72,59,.8),0 26px 55px rgba(0,0,0,.4),0 0 34px rgba(95,245,199,.25); }
.carbon-entry small { display:block; color:var(--carbon); font:700 10px/1.2 ui-monospace; letter-spacing:.1em; }.carbon-entry b{display:block;font-size:21px;line-height:1.15;margin-top:3px}.carbon-entry strong{font-size:12px;color:#dffff5;white-space:nowrap}.carbon-entry strong i{font-style:normal;font-size:18px;margin-left:4px}
.carbon-orbit { width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 35% 30%,#74ffe0,#159f87 60%,#073d35);box-shadow:0 0 22px rgba(95,245,199,.32);font:800 9px ui-monospace;color:#07352e }.carbon-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#b7f34b;box-shadow:0 0 9px #b7f34b;animation:carbonOrbit 2.6s linear infinite;transform-origin:31px 3px;left:-4px;top:24px}@keyframes carbonOrbit{to{transform:rotate(360deg)}}
.portal-card { --accent:var(--lime); min-height:300px; padding:28px; color:#fff; text-decoration:none; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.34); border-radius:30px; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 34%),linear-gradient(145deg,rgba(9,34,25,.88),rgba(4,18,13,.67)); backdrop-filter:blur(16px); box-shadow:0 18px 0 rgba(3,14,10,.72),0 34px 75px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.22); transform:rotateY(4deg) rotateX(1deg); transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.85,.2,1),border-color .35s,box-shadow .35s; }
.portal-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,transparent),transparent 52%); pointer-events:none; }
.portal-card:hover { transform:translateY(-12px) rotateY(0) rotateX(0) scale(1.025); border-color:var(--accent); box-shadow:0 11px 0 color-mix(in srgb,var(--accent) 22%,#06120e),0 38px 90px rgba(0,0,0,.42),0 0 38px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.3); }
.study-card{--accent:#48c8ff}.mission-card{--accent:#b7f34b}.carbon-card{--accent:#5ff5c7}
.portal-card{height:300px;min-height:300px;transform:rotateX(1deg)}
.carbon-card .portal-icon{font:900 13px/1 ui-monospace;letter-spacing:-.06em;border-radius:50%}
.portal-number { position:absolute;top:13px;right:18px;font:900 54px/1 ui-monospace;color:rgba(255,255,255,.12)}.portal-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent);font-size:24px;color:var(--accent)}
.portal-card h2{font-size:32px;margin:8px 0 5px}.portal-card p{color:rgba(255,255,255,.7);margin:0;font-size:14px}.portal-card strong{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;font-size:15px}.portal-card strong i{font-size:24px;font-style:normal;transition:transform .3s}.portal-card:hover strong i{transform:translateX(7px)}
.home-tip { display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.72);font-size:13px}.home-tip kbd{background:var(--lime);color:#10200f}
body.hover-mission .home-scene{transform:scale(1.035);filter:saturate(1.08)}body.hover-study .home-scene{transform:scale(1.035) translateX(-8px);filter:saturate(1.08)}body.hover-carbon .home-scene{transform:scale(1.035) translateX(8px);filter:saturate(1.12)}
@media(max-width:900px){.home-page{overflow:auto}.home-main{height:auto;min-height:calc(100vh - 82px)}.portal-stage{grid-template-columns:repeat(3,minmax(220px,1fr));overflow-x:auto;align-items:center;padding:250px 0 42px}.portal-card{height:270px;min-height:270px}}
@media(max-width:640px){.home-topbar{width:calc(100% - 24px)}.home-status span{display:none}.home-main{width:calc(100% - 24px);padding-top:22px}.home-heading h1{font-size:34px}.home-heading p{font-size:14px}.portal-stage{width:max-content;min-width:100%;grid-template-columns:repeat(3,240px);padding:300px 4px 38px}.portal-card{height:240px;min-height:240px;padding:22px}.home-scene{background-position:53% top}}