* {margin:0;padding:0;box-sizing:border-box;}
:root { --primary-color:#ffffff; --accent:#ffffff; --gradient:linear-gradient(90deg,#ffffff,#d8d8d8); }
body {font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#111113;color:#ffffff;margin-inline:15%;overflow-x:hidden;animation:fadeSlideIn .8s cubic-bezier(.23,1,.32,1);} 
header {padding:2rem;display:flex;justify-content:space-between;align-items:center;transition:.3s;} 
.logo {font-size:1.5rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:.3s;} 
.logo:hover {cursor:pointer;transform:scale(1.15);} 
nav a {color:#ffffff;text-decoration:none;margin-left:1rem;font-weight:600;transition:.3s;display:inline-block;position:relative;} 
nav a::after {content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:#ffffff;transition:.3s;} 
nav a:hover::after {width:100%;} 
nav a:hover {transform:translateY(-2px);} 
.hero {display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:4rem 2rem;opacity:0;animation:fadeSlideIn 1s cubic-bezier(.23,1,.32,1) .2s forwards;} 
.little-hero-text h3{margin:0 0 26px;font-size:.75rem;letter-spacing:.55em;font-weight:600;color:#b5b5b5;text-transform:uppercase;opacity:.9;transition:.35s;} 
.little-hero-text h3:hover{color:#fff;}
.h1-class{line-height:1;margin:0 0 8px;}
.h1-class h1{transition:.3s;font-weight:250;font-size:3.1rem;letter-spacing:.5px;line-height:1.05;margin:4px 0;}
.h1-class h1:hover{transform:scale(1.05);cursor:pointer;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-text {max-width:50%;} .hero-text p {margin-top:1rem;font-size:1.15rem;color:#cfcfcf;} 
.hero-text .cta-button {margin-top:2rem;} 
.cta-button {display:inline-block;padding:.8rem 1.6rem;background:#191a1d;color:#fff;border:1px solid #2a2b2f;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.5px;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:.35s;} 
.cta-button:hover {background:#232428;transform:translateY(-3px);box-shadow:0 6px 26px -6px rgba(0,0,0,.55);} 
.hero-3d {width:45%;height:400px;display:flex;align-items:center;justify-content:center;position:relative;} 
.hero-3d::before {content:"Tech Stack";position:absolute;font-size:10rem;font-weight:800;letter-spacing:-4px;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;mix-blend-mode:difference;opacity:.07;pointer-events:none;user-select:none;} 
.stack-section {margin:3rem 0 4rem;background:#15151a;border:1px solid #24252a;border-radius:22px;padding:3rem 2.2rem;box-shadow:0 10px 40px -18px rgba(0,0,0,.6),0 4px 18px -6px rgba(0,0,0,.45);animation:fadeInUp 1s cubic-bezier(.23,1,.32,1);} 
.stack-title {text-align:center;font-size:2.4rem;font-weight:300;letter-spacing:1px;margin-bottom:2.2rem;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:.4s;} .stack-title:hover {transform:scale(1.04);} 
.category-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;} 
.category-card {background:#191a1d;border:1px solid #2b2d33;border-radius:18px;padding:1.3rem 1.2rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;min-height:210px;transition:.45s cubic-bezier(.23,1,.32,1);cursor:pointer;} 
.category-card::before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 60%);opacity:0;transition:.5s;} 
.category-card:hover {transform:translateY(-8px) scale(1.02);box-shadow:0 10px 34px -12px rgba(0,0,0,.6),0 6px 22px -10px rgba(0,0,0,.5);} 
.category-card:hover::before {opacity:1;} 
.category-card h3 {font-size:1.05rem;font-weight:600;letter-spacing:.5px;margin:0;background:linear-gradient(90deg,#fff,#b8b8b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} 
.card-pills {display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem;} 
.card-pills span {background:rgba(255,255,255,0.08);color:#f2f2f2;font-size:.6rem;padding:.4rem .6rem;border-radius:30px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;} 
.card-desc {font-size:.8rem;line-height:1.5;color:#c6c6c9;flex:1;} 
.depth-bar {margin-top:.3rem;height:6px;width:100%;background:linear-gradient(90deg,#9be7ff,#b69bff,#ffcf6e,#ff8a8a,#c85bff);border-radius:50px;position:relative;overflow:hidden;} 
.depth-bar span {--pos:1;position:absolute;top:50%;left:calc(var(--pos)*100%);transform:translate(-50%,-50%);height:14px;width:14px;background:#fff;border:2px solid #111113;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.45);} 
.tools-summary {margin:4rem auto 5rem;max-width:860px;padding:2.4rem 2rem;border-radius:24px;background:#15151a;border:1px solid #24252a;box-shadow:0 10px 40px -18px rgba(0,0,0,.65),0 4px 16px -6px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:1.4rem;animation:fadeInUp 1.1s cubic-bezier(.23,1,.32,1);} .tools-summary h2 {font-size:1.9rem;font-weight:300;letter-spacing:.5px;margin:0;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .tools-summary p {font-size:.95rem;line-height:1.55;color:#cfcfcf;margin:0;} 
.contact {padding:3rem 2rem;background:#15151a;border:1px solid #24252a;border-radius:22px;box-shadow:0 10px 40px -18px rgba(0,0,0,.65),0 4px 18px -6px rgba(0,0,0,.55);animation:fadeInUp 1.2s cubic-bezier(.23,1,.32,1);max-width:600px;margin:0 auto 4rem;} 
.contact-title {font-size:1.5rem;margin-bottom:2rem;text-align:center;font-weight:600;letter-spacing:1px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} 
.contact-links {display:flex;flex-direction:column;gap:1.2rem;align-items:center;margin-top:1rem;} 
.contact-link {color:#ffffff;background:#191a1d;padding:1rem 2rem;border-radius:12px;font-size:1.05rem;text-decoration:none;transition:.35s;box-shadow:0 2px 10px rgba(0,0,0,.45);} 
.contact-link:hover {background:#232428;transform:translateY(-3px);} .contact-label {font-weight:600;color:#ffffff;margin-right:.5rem;} 
footer {padding:2rem;text-align:center;font-size:.9rem;color:#777;opacity:0;animation:fadeSlideIn 1s cubic-bezier(.23,1,.32,1) .8s forwards;} 
.social-sharing {text-align:center;margin:2rem 0;} .social-sharing a {margin:0 1rem;color:#ffffff;text-decoration:none;font-weight:600;position:relative;} .social-sharing a::after {content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:#ffffff;transition:.35s;} .social-sharing a:hover::after {width:100%;} 
@keyframes fadeSlideIn {0% {opacity:0;transform:translateY(40px);}100% {opacity:1;transform:translateY(0);} } @keyframes fadeInUp {0% {opacity:0;transform:translateY(40px);}100% {opacity:1;transform:translateY(0);} } 
@media (max-width:900px){body{margin-inline:8%;}.hero{flex-direction:column;text-align:center;}.hero-text{max-width:100%;}.hero-3d{width:100%;height:260px;margin-top:2.5rem;}.hero-3d::before{font-size:6rem;opacity:.06;}header{padding:1.5rem 1rem;}}
/* Mirror discord mobile adjustments */
@media (max-width:600px){body{margin-inline:5%;}header{width:fit-content;margin:auto;padding:1.25rem .75rem;} .logo{display:none;}nav a{margin-left:.6rem;font-size:.8rem;}img{display:none;}#about{margin-left:0 !important;}.hero{flex-direction:column;align-items:center;text-align:center;padding:3rem 1rem 2.2rem;}.hero-text{max-width:100%;}.hero-3d{display:none;} .stack-title{font-size:1.9rem;} .category-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;} .category-card{min-height:200px;padding:1rem;} .hero-3d::before{font-size:4.5rem;opacity:.05;}}