@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Poppins:wght@300;500&display=swap');

:root {
  --bg: #050505;
  --glass-bg: rgba(255,255,255,0.08);
  --text: #e0e0e0;
  --accent: #3d8bfd;
  --accent-hover: #62aaff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body.dark {
  font-family: 'Poppins', sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-y:auto;
  scroll-behavior:smooth;
  will-change:transform,opacity;
}

body::-webkit-scrollbar { width:8px; }
body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:10px; backdrop-filter:blur(4px); }
body::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.15); }

a { color:var(--accent); transition:color .3s; }
a:hover { color:var(--accent-hover); }

.gradient-background { position:fixed;inset:0;z-index:1;pointer-events:none; }
.gradient-sphere { position:absolute;border-radius:50%;filter:blur(60px);transform:translateZ(0);will-change:transform; transition:transform 1s ease-in-out; }
.sphere-1{width:40vw;height:40vw;background:linear-gradient(40deg,rgba(255,0,128,0.7),rgba(255,102,0,0.4));top:-10%;left:-10%;animation:float1 18s ease-in-out infinite alternate;}
.sphere-2{width:45vw;height:45vw;background:linear-gradient(240deg,rgba(72,0,255,0.6),rgba(0,183,255,0.3));bottom:-20%;right:-10%;animation:float2 22s ease-in-out infinite alternate;}
.sphere-3{width:30vw;height:30vw;background:linear-gradient(120deg,rgba(133,89,255,0.5),rgba(98,216,249,0.3));top:60%;left:20%;animation:float3 20s ease-in-out infinite alternate;}
.glow{position:absolute;width:40vw;height:40vh;background:radial-gradient(circle,rgba(72,0,255,0.15),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;animation:pulse 8s infinite alternate;filter:blur(30px);}
.grid-overlay{position:absolute;inset:0;background-size:40px 40px;background-image:linear-gradient(to right, rgba(255,255,255,0.03)1px,transparent 1px),linear-gradient(to bottom, rgba(255,255,255,0.03)1px,transparent 1px);z-index:2;}
.noise-overlay{position:absolute;inset:0;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");z-index:3;}

.content-container { position:relative;z-index:10;padding:2rem;max-width:900px;margin:auto; }

header { text-align:center; margin-bottom:2rem; }
h1 { font-family:'Inter', sans-serif; font-size:2.8rem; font-weight:800; background:linear-gradient(90deg,#fff,#acacac);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.subtitle { font-size:1.2rem; color:rgba(255,255,255,0.8); }

.card-grid { display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-bottom:2rem; }
.card { background:var(--glass-bg);padding:20px;border-radius:15px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.4);text-align:center;transition:transform .3s ease,box-shadow .3s ease;will-change:transform; }
.card:hover { transform:translateY(-8px) scale(1.03);box-shadow:0 12px 48px rgba(0,0,0,0.6); }
.label { font-weight:600; margin:10px 0 5px; }
.value { color:#ccc; }

.contact-wrapper { display:flex;justify-content:center;margin-bottom:2rem; }
.contact-wrapper .card { max-width:400px;width:100%; }

.about-section { margin-bottom:40px;text-align:center; }
.about-section h2 { font-size:1.5rem;margin-bottom:15px; }
.about-content { max-width:700px;margin:0 auto;padding:20px;font-size:1rem;line-height:1.6;color:#ccc;border-radius:12px;backdrop-filter:blur(10px);background:var(--glass-bg);box-shadow:0 4px 20px rgba(0,0,0,0.3); }

.timeline-section { margin-top:50px; }
.timeline-section h2 { text-align:center;font-size:1.5rem;margin-bottom:20px; }
.timeline-container { position:relative;margin:0 auto; max-width:700px; padding-left:30px; }
.timeline-line { position:absolute;left:14px;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--accent),transparent); }
.timeline-item { position:relative;margin-bottom:50px;opacity:0;transform:translateY(30px);transition:transform .6s ease-out,opacity .6s ease-out;will-change:transform,opacity; }
.timeline-item .dot { position:absolute;left:-4px;top:0;width:16px;height:16px;background:var(--bg);border:4px solid var(--accent);border-radius:50%; }
.timeline-item .content { margin-left:30px;background:var(--glass-bg);padding:15px 20px;border-radius:10px;backdrop-filter:blur(10px);color:#ddd;box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.glass { background:var(--glass-bg);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1); }

footer { text-align:center;margin:2rem 0; }
#scrollTopBtn { background:var(--accent); color:#fff; padding:.8rem 1.5rem; border:none;border-radius:50px;cursor:pointer;font-size:1rem;transition: transform .3s ease, background .3s ease; }
#scrollTopBtn:hover { transform:translateY(-3px); background:var(--accent-hover); }

@keyframes float1 { 100% { transform:translate(10%,10%) scale(1.1); } }
@keyframes float2 { 100% { transform:translate(-10%,-5%) scale(1.15); } }
@keyframes float3 { 100% { transform:translate(-5%,10%) scale(1.05); opacity:.6; } }
@keyframes pulse { 0% { opacity:.3; transform:translate(-50%,-50%) scale(.9); } 100% { opacity:.7; transform:translate(-50%,-50%) scale(1.1); } }