/* near.org layer: top navigation, hero with sparkle field, CTA sweep + letter wave, section rhythm. */
.app-shell{padding-left:0;padding-top:72px}
.app-shell .app-rail{display:none}

/* ---- nav */
.nn{position:fixed;top:0;left:0;right:0;z-index:60;height:72px;border-bottom:1px solid #ffffff59;background:#000000d9;backdrop-filter:blur(14px);color:#fff;overflow:hidden}
[data-p-theme=light] .nn{background:#ffffffe6;color:#000;border-bottom-color:#00000033}
.nn-in{position:relative;z-index:2;max-width:1365px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.nn-sweep{position:absolute;top:0;bottom:0;width:380px;left:var(--mx,-600px);transform:translateX(-50%);background:radial-gradient(closest-side,#00EC9733,transparent);filter:blur(24px);opacity:0;transition:opacity .4s var(--p-ease);pointer-events:none}
.nn:hover .nn-sweep{opacity:1}
.nn-brand{display:flex;align-items:center;height:100%;color:inherit;text-decoration:none}
.nn-cell{display:grid;place-items:center;width:120px;height:72px;border-right:1px solid #ffffff59}
[data-p-theme=light] .nn-cell{border-right-color:#00000033}
.nn-cell svg{width:30px;height:30px;transition:transform .5s var(--p-ease),color .3s}
.nn-brand:hover .nn-cell svg{transform:rotate(-8deg) scale(1.08);color:var(--near)}
.nn-word{font-family:var(--p-font-display);font-weight:800;font-size:22px;letter-spacing:-.03em;padding-left:26px}
.nn-word i{font-style:normal;color:var(--near)}
.nn-menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.nn-item{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:72px;color:#ffffffcc;font-size:16px;font-weight:500;text-decoration:none;transition:color .3s}
[data-p-theme=light] .nn-item{color:#000000b3}
.nn-item:hover,.nn-item[aria-current=page]{color:inherit;text-decoration:none}
.nn-item::after{content:'';position:absolute;left:16px;right:16px;bottom:22px;height:2px;background:var(--near);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--p-ease)}
.nn-item:hover::after,.nn-item[aria-current=page]::after{transform:scaleX(1)}
.nn-item svg{width:16px;height:16px;transition:transform .3s var(--p-ease)}
.nn-item:hover svg{transform:translateY(2px)}
.nn-right{display:flex;align-items:center;gap:10px;padding:0 24px 0 16px}
.nn-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:transparent;border:1px solid transparent;color:inherit;cursor:pointer;transition:border-color .3s,transform .3s}
.nn-icon:hover{border-color:#ffffff59;transform:rotate(20deg)}
.nn-icon svg{width:18px;height:18px}
.nn-burger{display:none}
@media(max-width:900px){.nn-menu{display:none}.nn-cell{width:72px}.nn-word{padding-left:16px;font-size:19px}}

/* ---- CTA (near.org sweep): white or green block, black bar fills from the left, arrow slides in */
.ncta{--fg:#000;--bg:#fff;position:relative;display:inline-flex;align-items:center;gap:0;height:50px;padding:0 8px;border-radius:4px;background:var(--bg);color:var(--fg);font:500 16px/1 var(--p-font);text-decoration:none;cursor:pointer;border:0;overflow:hidden;isolation:isolate;transition:transform .15s}
.ncta-green{--bg:var(--near)}
.ncta-ghost{--bg:transparent;--fg:#fff;border:1px solid #fff}
[data-p-theme=light] .ncta-ghost{--fg:#000;border-color:#000}
.ncta .bar{position:absolute;top:50%;left:8px;height:32px;width:0;transform:translateY(-50%);border-radius:3px;background:#000;transition:width .25s var(--p-ease);z-index:-1}
.ncta-ghost .bar{background:#fff}
[data-p-theme=light] .ncta-ghost .bar{background:#000}
.ncta:hover .bar{width:calc(100% - 16px)}
.ncta .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:3px;background:#000;color:var(--near);margin-right:12px;flex:none}
.ncta .ic svg{width:18px;height:18px}
.ncta .t{display:inline-block;padding:0 8px 0 0;white-space:nowrap;transition:color .3s .1s,padding .3s var(--p-ease)}
.ncta:hover .t{color:#fff;padding-right:40px}
.ncta-ghost:hover .t{color:#000}
[data-p-theme=light] .ncta-ghost:hover .t{color:#fff}
.ncta .ar{position:absolute;right:8px;top:50%;width:32px;height:32px;transform:translateY(-50%) translateX(12px);display:grid;place-items:center;opacity:0;transition:opacity .25s .1s,transform .3s var(--p-ease)}
.ncta:hover .ar{opacity:1;transform:translateY(-50%)}
.ncta .ar svg{width:16px;height:16px;color:var(--near)}
.ncta:active{transform:scale(.98)}
.wave .ch{display:inline-block;position:relative}
.ncta:hover .wave .ch,.nn-item:hover .wave .ch,.app-trending-link:hover .wave .ch{animation:near-wave 2.4s ease-out infinite;animation-delay:calc(var(--i,0) * .08s)}
@keyframes near-wave{0%,100%{transform:translateY(0)}20%{transform:translateY(-3px);color:var(--near)}40%{transform:translateY(0)}}

/* ---- hero */
.hero{position:relative;overflow:hidden;background:#000;color:#fff;border-bottom:1px solid #ffffff26;min-height:560px;display:flex;align-items:center}
[data-p-theme=light] .hero{background:#000}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 40%,#00EC9714,transparent 70%),radial-gradient(100% 60% at 50% 100%,#000 10%,transparent 70%);pointer-events:none}
.hero-in{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:88px 24px 72px;text-align:center}
.hero-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--p-font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--near);margin-bottom:22px}
.hero-k::before,.hero-k::after{content:'';width:34px;height:1px;background:#00EC9780}
.hero h1{margin:0;font-family:var(--p-font-display);font-weight:800;font-size:clamp(40px,6.2vw,82px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.hero h1 i{font-style:normal;color:var(--near)}
.hero p{margin:22px auto 0;max-width:62ch;font-size:18px;line-height:1.45;color:#ffffffd9}
.hero-cta{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:flex;justify-content:center;gap:0;margin:48px auto 0;border:1px solid #ffffff33;border-radius:6px;overflow:hidden;width:max-content;max-width:100%;backdrop-filter:blur(6px);background:#00000066}
.hero-stats div{padding:14px 28px;border-right:1px solid #ffffff33;text-align:left}.hero-stats div:last-child{border-right:0}
.hero-stats b{display:block;font-family:var(--p-font-mono);font-size:22px;font-weight:600;letter-spacing:-.02em}.hero-stats span{display:block;margin-top:4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff99}

/* ---- board sits on the page below the hero */
.app-main{max-width:1200px;margin:0 auto;padding:48px 24px 80px}
.app-board-search{display:flex;align-items:center;gap:12px}
.app-board-search .p-field-shell{min-width:260px}
.app-board-actions{display:flex;align-items:center;gap:12px}

/* trending cards: sparkle sweep on hover */
.app-trending-art.app-mark{position:relative}
.app-trending-art.app-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff33 48%,#00EC9755 52%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--p-ease)}
.app-trending-link:hover .app-trending-art.app-mark::after{transform:translateX(120%)}

/* near-style section titles + divider + arrow links (used in footer and how-it-works) */
.ntitle{font-family:var(--p-font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;padding-bottom:14px;border-bottom:1px solid #ffffff4d;margin:0 0 18px}
.nlink{position:relative;display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;padding-bottom:3px}
.nlink::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transition:transform .35s var(--p-ease);transform-origin:left}
.nlink:hover::after{transform:scaleX(0);transform-origin:right}
.nlink svg{width:14px;height:14px;transition:transform .3s var(--p-ease)}
.nlink:hover svg{transform:translate(3px,-3px);color:var(--near)}
.app-footer{display:none}
.app-footer-link{position:relative}
.app-footer-link:hover{color:var(--near)}

/* ---- simple footer: mark + wordmark left, X right */
.nf{border-top:1px solid #ffffff26;margin-top:40px}
[data-p-theme=light] .nf{border-top-color:#00000026}
.nf-in{max-width:1200px;margin:0 auto;padding:28px 24px;display:flex;align-items:center;justify-content:space-between}
.nf .nn-brand{height:auto}.nf-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--near);color:#000}.nf-mark svg{width:20px;height:20px}
.nf .nn-word{padding-left:12px;font-size:20px}
.nn-icon{text-decoration:none}.nn-icon:hover{color:var(--near)}
.nf-x{width:40px;height:40px;border:1px solid #ffffff33}.nf-x:hover{transform:none;border-color:var(--near)}
.app-main{padding-top:40px}
