/* Dark theme for AuraSync — canonical site styles (purple tint) */
*{box-sizing:border-box}
:root{
  --primary:#7c3aed; /* violet */
  --primary-2:#ec4899; /* pink */
  --primary-3:#22d3ee; /* aqua */
  --bg:#0b0c12; /* deep near-black */
  --text:#e5e7eb; /* slate-200 */
  --muted:#a1a7b3; /* slate-400 */
  --card:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.10);
}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
/* Global link styles for readability on dark bg */
a{color:#c7d2fe; text-underline-offset:2px}
a:hover{color:#e0e7ff}
a:focus-visible{outline:2px solid rgba(124,58,237,.6); outline-offset:2px; border-radius:4px}
/* Stronger treatment for email links which tended to appear too dim/blue */
/* Target in prose, cards, main content, and footer explicitly */
.prose a[href^="mailto:"], .card a[href^="mailto:"], main a[href^="mailto:"], footer a[href^="mailto:"]{
  color:#e5e7ff; /* very light indigo for contrast on #0b0c12 */
  text-decoration:underline;
  text-decoration-color: rgba(199,210,254,.8);
  text-underline-offset: 3px;
}
.prose a[href^="mailto:"]:hover,
.card a[href^="mailto:"]:hover,
main a[href^="mailto:"]:hover,
footer a[href^="mailto:"]:hover{
  color:#ffffff;
  text-decoration-color:#ffffff;
}
.prose a[href^="mailto:"]:focus-visible,
.card a[href^="mailto:"]:focus-visible,
main a[href^="mailto:"]:focus-visible,
footer a[href^="mailto:"]:focus-visible{
  outline:2px solid rgba(124,58,237,.7);
  outline-offset:2px;
  border-radius:4px;
}
/* Sticky translucent dark nav with purple tint */
header.nav{position:sticky; top:0; z-index:40; backdrop-filter:saturate(160%) blur(14px); background:linear-gradient(180deg, rgba(24,18,38,.72), rgba(12,10,24,.55)); border-bottom:1px solid rgba(124,58,237,.18)}
header.nav .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem}
header.nav .links a{color:var(--muted); text-decoration:none; font-weight:600}
header.nav .links a:hover{color:#fff}
header.nav .links a.active{color:#fff}
header.nav .links{display:flex; align-items:center; gap:1.25rem}
header.nav .links .btn{margin-left:.5rem}
header.nav .logo{display:flex; align-items:center; gap:.5rem}
header.nav .logo span{font-weight:800}
/* White brand text when not using gradient */
header.nav .logo .brand{color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:.2px}
/* Gradient brand text reusable utility */
.brand-grad{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Stronger header brand appearance */
header.nav .logo .brand-grad{font-weight:800; font-size:1.15rem; letter-spacing:.2px; text-shadow:0 0 10px rgba(124,58,237,.25)}
/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.1rem; border-radius:.75rem; font-weight:700; text-decoration:none; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:#fff}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff; border:none; background-clip:padding-box; box-shadow:0 8px 24px rgba(124,58,237,.28)}
.btn-ghost{background:transparent; color:#fff}
/* Hero */
.hero{position:relative; overflow:visible; z-index:2}
.hero .grid{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; padding:3rem 0}
@media(min-width:900px){.hero .grid{grid-template-columns:1.05fr .95fr; padding:5rem 0}}
.headline{font-size:clamp(2rem,4vw,3.25rem); line-height:1.1; font-weight:800}
.headline .brand{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--muted); margin-top:1rem; max-width:46ch}
.cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem}
/* Subtle hint text for extension easter egg */
.hint-extension{color:#9aa4b2; font-size:.9rem; opacity:.9}
/* Art blobs */
.hero .art{position:relative; height:360px; border-radius:1rem; overflow:visible; border:none; box-shadow:none; background:transparent; margin-bottom:-60px}
.blob{position:absolute; filter:blur(50px); opacity:.75}
.b1{width:380px; height:380px; left:-40px; top:-40px; background:radial-gradient(circle at 30% 30%, rgba(124,58,237,.45), transparent 60%)}
.b2{width:420px; height:420px; right:-30px; top:40px; background:radial-gradient(circle at 60% 40%, rgba(236,72,153,.38), transparent 60%)}
.b3{width:360px; height:360px; right:80px; bottom:-60px; background:radial-gradient(circle at 40% 60%, rgba(34,211,238,.35), transparent 60%)}
/* Gradient border + futuristic overlay */
.hero .art::before{content:none}
.hero .art::after{content:none}
/* Optional hero image when provided */
.hero .art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:1rem}
/* Subtle lift on hover for modern feel */
.hero .art img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero .art:hover img{transform:scale(1.02)}
/* Removed art-hint overlay */

/* --- Isometric cube effect inside hero art --- */
.hero .art .iso-container{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:800px; transform:translateY(-4px); pointer-events:auto; animation:floatCube 10s ease-in-out infinite}
/* Removed caption above cubes */
/* Animated multi-color aura glows behind the cubes */
.hero .art .iso-container::before,.hero .art .iso-container::after{content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; mix-blend-mode:screen}
.hero .art .iso-container::before{width:80%; height:80%; top:2%; left:48%; transform:translate(-50%,0); background:radial-gradient(circle at 50% 50%, rgba(124,58,237,.55), transparent 60%); filter:blur(60px); opacity:.75; animation:glowOne 8s ease-in-out infinite alternate}
.hero .art .iso-container::after{width:64%; height:64%; bottom:8%; left:26%; background:radial-gradient(circle at 50% 50%, rgba(37,99,235,.5), transparent 60%); filter:blur(70px); opacity:.65; animation:glowTwo 10s ease-in-out infinite alternate}
.hero .art .iso-container .iso-mask::after{content:""; position:absolute; width:160%; height:64%; left:-10%; bottom:-12%; background:radial-gradient(60% 80% at 40% 80%, rgba(236,72,153,.45), transparent 72%); filter:blur(72px); opacity:.58; pointer-events:none; z-index:0; animation:glowThree 9s ease-in-out infinite alternate}
@keyframes glowOne{0%{transform:translate(-52%, -4%) scale(1); opacity:.55}100%{transform:translate(-48%, 4%) scale(1.06); opacity:.75}}
@keyframes glowTwo{0%{transform:translate(0, 0) scale(1);}100%{transform:translate(6%, -4%) scale(1.07);}}
@keyframes glowThree{0%{transform:translate(0,0) scale(1)}100%{transform:translate(2%, -4%) scale(1.06)}}
@keyframes floatCube{
  0%{ transform:translateY(-12px) }
  50%{ transform:translateY(0) }
  100%{ transform:translateY(-12px) }
}
.hero .art .iso-container .iso-mask{position:relative; width:min(92%, 440px); height:min(92%, 320px); display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 18px 40px rgba(124,58,237,.25)); --cube-img:url('/profile.png'); isolation:isolate}
/* Remove previous logo mask to avoid visible boxed cropping; let cubes render freely */
.hero .art .iso-container .iso-mask{ -webkit-mask: none; mask: none }
/* Brand tint overlay so the cubes inherit aura colors subtly */
/* Remove overlay that looked like a box */
.hero .art .iso-container .iso-mask::before{content:none}
@keyframes artHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.hero .art .cube{position:relative; transform:skewY(-18deg);}
.hero .art .cube{z-index:2}
.hero .art .cube:nth-child(2){translate:-56px -56px; z-index:1}
.hero .art .cube:nth-child(3){translate:56px 56px; z-index:3}
.hero .art .cube div{position:absolute; display:flex; flex-direction:column; gap:22px; translate:calc(-62px * var(--x)) calc(-52px * var(--y))}
.hero .art .cube div span{position:relative; display:inline-block; width:52px; height:52px; z-index:calc(1 * var(--i)); transition:filter .3s ease, box-shadow .3s ease, transform .3s ease; background:
  linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22)),
  linear-gradient(135deg, rgba(124,58,237,.85), rgba(88,28,135,.75) 55%, rgba(37,99,235,.65)),
  var(--cube-img, url('/profile.png'));
  background-size:cover, cover, cover; background-position:center; background-repeat:no-repeat; background-blend-mode:normal, multiply, normal; filter:brightness(1.25) saturate(1.2) contrast(1.08) drop-shadow(0 0 0 rgba(0,0,0,0));}
.hero .art .cube div span:hover{filter:
  brightness(1.45)
  saturate(1.25)
  contrast(1.1)
  drop-shadow(0 0 14px rgba(124,58,237,.55))
  drop-shadow(0 0 30px rgba(88,28,135,.45))
  drop-shadow(0 0 48px rgba(37,99,235,.42));
  box-shadow:0 0 22px rgba(124,58,237,.35), 0 0 42px rgba(59,130,246,.28);
  z-index:400;
}
.hero .art .cube div span::before{content:""; position:absolute; left:-38px; width:38px; height:100%; transform-origin:right; transform:skewY(45deg); transition:filter .3s ease; background:
  linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.62)),
  linear-gradient(135deg, rgba(124,58,237,.9), rgba(76,29,149,.8) 55%, rgba(29,78,216,.7)),
  var(--cube-img, url('/profile.png'));
  background-size:cover, cover, cover; background-position:center; background-repeat:no-repeat; background-blend-mode:normal, multiply, normal; filter:brightness(1.25)}
.hero .art .cube div span::after{content:""; position:absolute; top:-38px; left:0; width:100%; height:38px; transform-origin:bottom; transform:skewX(45deg); transition:filter .3s ease; background:
  linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
  linear-gradient(135deg, rgba(139,92,246,.65), rgba(59,7,100,.6) 55%, rgba(29,78,216,.5)),
  var(--cube-img, url('/profile.png'));
  background-size:cover, cover, cover; background-position:center; background-repeat:no-repeat; background-blend-mode:normal, multiply, normal; filter:brightness(1.25)}
/* Tooltip reveal on hover */
.hero .art .cube div span .tip{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(8px); opacity:0; transition:all .25s ease; background:rgba(16,12,28,.85); border:1px solid rgba(139,92,246,.45); color:#e5e7eb; padding:.25rem .5rem; border-radius:.5rem; font-size:.75rem; white-space:nowrap; pointer-events:none}
.hero .art .cube div span:hover .tip{opacity:1; transform:translate(-50%,-50%) translateY(0)}
.hero .art .cube div span:hover::before,.hero .art .cube div span:hover::after{filter:brightness(1.45)}

/* Responsiveness: scale cube assembly on smaller screens to stay within art bounds */
@media(max-width: 480px){
  .hero .art{height:300px}
  .hero .art .iso-container .iso-mask{width:90%; height:82%}
  .hero .art .cube div{gap:18px; translate:calc(-52px * var(--x)) calc(-44px * var(--y))}
  .hero .art .cube div span{width:44px; height:44px}
  .hero .art .cube div span::before{left:-32px; width:32px}
  .hero .art .cube div span::after{top:-32px; height:32px}
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  /* Keep float animation enabled */
}
/* Features */
.features{padding:3rem 0}
.features{position:relative; z-index:1}
.feat-grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media(min-width:900px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.3); backdrop-filter:blur(10px)}
.card h3{margin:.25rem 0 .25rem; font-size:1.1rem}
.card p{color:var(--muted); margin:.25rem 0 0}
/* Influencers */
.page-hero{padding:2.5rem 0 1rem}
.influencers{padding:1rem 0 3.5rem}
.leaderboard{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; margin-top:1rem}
.lb-card{display:flex; align-items:center; gap:.9rem; background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.1rem; box-shadow:0 10px 30px rgba(0,0,0,.3); position:relative}
.lb-card .rank{position:absolute; top:.6rem; left:.7rem; background:rgba(124,58,237,.18); border:1px solid rgba(124,58,237,.35); color:#c4b5fd; font-weight:800; font-size:.8rem; padding:.1rem .4rem; border-radius:.5rem}
.lb-card .avatar{border-radius:.75rem; border:1px solid var(--border)}
.lb-card .meta{flex:1}
.lb-card .meta .name{margin:.1rem 0; font-size:1rem}
.lb-card .meta .subs{margin:0; color:var(--muted)}
.lb-card.rank-1{background:linear-gradient(180deg, rgba(124,58,237,.18), rgba(255,255,255,0.04)); border-color:rgba(124,58,237,.45)}
.lb-card.rank-2{background:linear-gradient(180deg, rgba(236,72,153,.18), rgba(255,255,255,0.04)); border-color:rgba(236,72,153,.45)}
.lb-card.rank-3{background:linear-gradient(180deg, rgba(37,99,235,.18), rgba(255,255,255,0.04)); border-color:rgba(37,99,235,.45)}
/* Footer */
footer{border-top:1px solid var(--border); color:#9aa4b2}
footer .inner{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1.25rem 0; flex-wrap:wrap}
footer a{color:inherit; text-decoration:none}
/* Keep default dark utility classes from assets/site.css intact (no overrides here) */