@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Orbitron:wght@700&display=swap');

:root {
  --navy-dark: #181a28;
  --navy-deep: #212645;
  --indigo: #2342b0;
  --indigo-mid: #314d77;
  --indigo-bright: #5b81fd;
  --orange: #FF6500;
  --orange-light: #FFB649;
  --white: #fff;
  --glass: rgba(34,51,90,0.60);
}

html, body {
  scroll-behavior: smooth;
  background: var(--navy-dark);
  color: #d4e6fb;
  font-family: 'Space Grotesk', 'Orbitron', Arial, sans-serif;
  min-height: 100%;
}

/* NAV */
nav#navbar {
  position: fixed;
  top: 0; left: 0; width: 100vw; z-index: 99;
  height: 76px; display: flex; align-items: center;
  background: linear-gradient(90deg, var(--navy-dark) 85%, var(--orange) 100%);
  box-shadow: 0 4px 40px 0 #181f4499, 0px 2px 0 var(--orange) inset;
  padding: 0 42px;
  animation: navFadeIn 1.8s cubic-bezier(.6,0,.2,1) 0s;
  will-change: opacity;
  backdrop-filter: blur(10px);
}
@keyframes navFadeIn {
  0% {opacity:0;transform:translateY(-60px);}
  90% {opacity:0.9;}
  100% {opacity:1;transform:translateY(0);}
}
nav .logo-icon { vertical-align: middle; margin: 0 20px 0 0;}
nav .logo {transition: transform .2s cubic-bezier(.4,1.3,.7,1.4);}
nav .logo:hover {transform: scale(1.09) rotate(-5deg);}
nav ul { list-style: none; display: flex; margin: 0 0 0 24px; gap:44px;}
nav li { }
nav li a {
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;font-size:1.1em;
  color:#ebe6fa;text-shadow:0 1px 16px #37335355, 0 0 3px #27224922;
  padding:10px 5px 2px 5px;transition:color .18s cubic-bezier(.4,1.7,.7,1.3),text-shadow .25s;
  position:relative;overflow:hidden;
}
nav li a:after {
  content:'';
  display:block;
  position:absolute; bottom:0; left:50%;transform:translateX(-50%);
  width:26px;height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--orange));
  border-radius:2px;
  opacity:0;transition:opacity .19s;
}
nav li a:hover {
  color:var(--orange); text-shadow:0 1px 10px #b54f0070,0 1px 3px #ff650055;
  letter-spacing:0.12em;
}
nav li a:hover:after { opacity:1; }

/* HERO & Soundwave */
section#hero {
  min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content:center;
  position: relative; padding-top:100px; z-index:1;
  background: linear-gradient(140deg, #1a2134 0%, #2a3b72 61%, #3c64a4 92%, #FF650022 100%);
  overflow:hidden;
}
.gradient-bg {
  background: linear-gradient(130deg,#212645 0%,#262e4e 18%,#2342b0 75%,#FF650023 100%);
}

.soundwave-parallax {
  position:absolute; left:0; right:0; bottom:0; top:0; pointer-events:none; z-index:2;
  width:100%;height:100%;
  will-change:transform;
  overflow:visible;
  filter:contrast(1.1) brightness(1.1);
}
.svg-soundwave { position: absolute; width: 100vw; min-width:900px; max-width:200vw; top:10vh; left:0; z-index:-1; }
.main-title {
  z-index:3;
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  font-size:3.8em; letter-spacing:0.10em;
  background: linear-gradient(89deg, #FF6500 0%, #fff4d9 22%,#214380 90%, #1880d3 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 16px #05317874, 1px 1px 0 #FFF4;
  margin: 28px 0 6px 0;
  animation: fadePop 1.2s cubic-bezier(.6,-0.1,.20,1.2);
  filter: url(#glitchFilter); /* for glitch-animation */
}
@keyframes fadePop {
  0% {opacity:0;transform:scale(1.29) rotateX(-42deg);}
  100% {opacity:1;transform:scale(1) rotateX(0);}
}
.hero-slogan {
  z-index:3;
  font-size:1.5em; letter-spacing:0.04em;
  color:#ffffffcc;
  margin-top:8px;
  text-shadow:0 3px 30px #16254c, 0 1px 0 #293457;
  font-family: 'Space Grotesk', 'Orbitron', sans-serif;
  animation: sloganUp 1.7s cubic-bezier(.6,0,.19,1) .5s;
}
@keyframes sloganUp {
  0% {opacity:0;transform:translateY(30px);}
  100% {opacity:1;transform:translateY(0);}
}

.glitch {
  position:relative;display:inline-block;
}
.glitch:before,.glitch:after {
  content:attr(class);
  position:absolute;top:0;left:0;width:100%;height:100%;
  color:#fff;z-index:-1;opacity:.6;clip-path:polygon(0 10%,100% 0,100% 100%,0 75%);
  animation:glitchAnim 1.8s infinite linear alternate-reverse;
  mix-blend-mode:color-dodge;
}
.glitch:after {
  color:#FF6500;opacity:0.22;
  clip-path:polygon(0 0,100% 11%,100% 90%,0 100%);
  animation-delay:-1s;
}
@keyframes glitchAnim {
  0% {transform:translate(0,0);}
  23% {transform:translate(-1px,2px);}
  45% {transform:translate(1px,-1px);}
  78% {transform:translate(-2px,1.5px);}
  96% {transform:translate(2px,0);}
  100% {transform:translate(0,0);}
}

/* Sections */
section {
  padding:84px 0 44px 0; width:100%; box-sizing: border-box;
  position:relative;
}
.section-title {
  font-size:2.6em; font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:0.10em;
  margin-bottom:34px; text-align:center;
  background:linear-gradient(90deg,#FF6500 2%,#214380 70%,#fff4d9 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow: 1px 1px 0 #fff1,0 3px 30px #2e3e68b8;
}

/* AWARDS */
#awards {background:linear-gradient(130deg,var(--navy-dark) 90%,rgba(255,101,0,0.07) 100%);}
.awards-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr));
  gap: 32px; justify-items: center; margin: 0 auto; max-width:1120px; width:96vw;
}
.award-card {
  display: flex; align-items: center; gap:24px;
  padding:24px 32px; border-radius:18px;
  background:rgba(50,65,112,0.58);box-shadow:0 4px 30px #17325d64;
  font-size: 1.11em; color:#efe7ff;
  cursor:pointer;
  transition: transform .19s cubic-bezier(.4,1.9,.5,1.1),box-shadow .23s;
  filter:blur(12px) brightness(.6) grayscale(.7);opacity:0;
}
.award-card .trophy-icon svg {vertical-align:middle;}
.award-card:hover, .award-card:focus {
  transform:scale(1.03) rotate(-1deg) skewY(-2deg);
  box-shadow:0 12px 44px 0 #ff810021,0 1.5px 6px #FF650088,0 0 36px #17325d68;
  background:rgba(43,57,123,0.76);
}

.award-card.revealed {
  filter:none;opacity:1;transition:filter .44s cubic-bezier(.4,1.3,.6,1.1),opacity .56s;
}

.award-text {
  line-height:1.7;font-family:'Space Grotesk','Orbitron',sans-serif;
  text-shadow:0 2px 17px #2528628a;
}

/* PORTFOLIO */
#portfolio {background:linear-gradient(120deg,#202647 70%,#101b32 100%);}
.portfolio-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;max-width:1200px;width:96vw;margin:0 auto;
  margin-bottom:38px;
}
.portfolio-item {
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#314d77 32%,#233257 100%);
  border-radius:18px;
  box-shadow:0 4px 24px #2e323c9a,0 0 0 6px #101b32;
  overflow:hidden;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;
  transform:perspective(400px) rotateY(-8deg) translateZ(0);
  will-change:transform,filter;
  z-index:1;
  transition:transform .19s cubic-bezier(.4,1.7,.7,1.3),filter .18s;
  border:2.5px solid #20337444;
  filter:drop-shadow(0 4px 50px #02163377) brightness (.82) grayscale(.14);
}
.portfolio-item:hover,.portfolio-item:focus {
  filter:drop-shadow(0 0 22px #FF650066) drop-shadow(0 0 34px #fff1) saturate(1.22) blur(.3px) brightness(1.12);
  transform:perspective(420px) rotateY(6deg) scale3d(1.11,1.11,1.12) translateZ(12px);
  z-index:2;
}
.portfolio-item img {
  width:100%;height:100%;object-fit:cover; border-radius:16px;
  transition:filter .16s;
  filter:brightness(1.18) contrast(1.08) saturate(1.33);
}
.portfolio-grid .portfolio-item::after {
  /* Glossy highlight SVG on thumb hover */
  content:'';
  position:absolute;left:7%;top:5%;width:86%;height:15%;background:linear-gradient(90deg,#fff5,transparent 80%);opacity:0.44;
  border-radius:90% 95% 15% 20%/32% 31% 60% 66%;
  filter:blur(2px);
  pointer-events:none;z-index:2;
  transition:opacity .2s;
  mix-blend-mode:screen;
}
.portfolio-item:hover::after{opacity:.75;}
.view-more-btn {
  margin:0 auto 12px auto;display:block;
  background:linear-gradient(92deg,var(--orange),#ffb249,var(--indigo));
  color:#fff;font-family:'Orbitron';font-size:1.08em;letter-spacing:.13em;
  padding:14px 44px;border:none;border-radius:30px;
  box-shadow:0 3px 17px 1px #ff880033, 0 1px 0 #fff6;
  cursor:pointer;font-weight:700;transition:filter .18s,box-shadow .16s;
  filter:brightness(1.13) blur(0.2px);
}
.view-more-btn:hover,.view-more-btn:focus{box-shadow:0 1px 22px #FF650088,0 15px 24px #fff1;filter:brightness(1.24) blur(0);}
.glossy-highlight {
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  z-index:0;height:54px;width:300px;pointer-events:none;display:block;
}

/* Portfolio desc */
.portfolio-desc {
  margin-top: 12px; text-align: center; color: #ffe3c8f7;font-size: 1.01em;letter-spacing: .06em;text-shadow:0 1px 24px #2c263177;
}

/* PROJECTS */
#projects {background:linear-gradient(118deg,#181a28 77%,#304b7e 100%);}
.projects-list {display:flex;flex-direction:column;gap:44px;max-width:1180px;margin:0 auto;width:97vw;}
.project-card {
  display:flex;align-items:stretch;gap:2vw;min-height:203px;margin-bottom:0;
  border-radius:20px;background:rgba(35,50,87,0.33);box-shadow:0 4px 40px #14234eb6;
  transition:box-shadow .24s,transform .16s;
  filter:blur(14px) opacity(0.15);
  opacity:0;
}
.project-card.revealed {
  filter:none;opacity:1;transition:filter .45s cubic-bezier(.4,1.3,.6,1.1),opacity .68s;
}
.project-left {
  flex:1 1 34%;display:flex;align-items:center;justify-content:center;background:linear-gradient(126deg,#11112733 72%,#FF650014 100%);
  border-radius:18px 0 0 18px;overflow:hidden;min-width:160px;
}
.project-thumb {
  width:100%;max-width:266px;min-width:120px;border-radius:18px;box-shadow:0 0 34px #314d77cc,0px 2px 0 #ffb24955;
  background:#212645;
  filter:grayscale(.019) brightness(1.15) contrast(1.1) drop-shadow(0 0 8px #5b81fd22);
  transition:filter .13s;
}
.project-thumb:hover,.project-thumb:focus {
  filter:brightness(1.19) saturate(1.22) drop-shadow(0 0 30px #FF6500AA);
}
.project-right {
  flex:2 1 60%;padding:25px 40px 15px 27px;display:flex;flex-direction:column;justify-content:center;
  border-radius:0 18px 18px 0;
  background:rgba(0,0,0,0.08);backdrop-filter:blur(5.5px);
  box-shadow:0 3px 13px #2a4cad4e;
}
.project-info {font-size:1em;color:#ffefcf;margin-bottom:12px;line-height:1.68;}
.glass {
  background:linear-gradient(105deg,#29386e44 42%,rgba(128,139,255,0.09) 100%);
  border:1.7px solid #15308e17;backdrop-filter:blur(7.7px) brightness(1.06);box-shadow:0 0 25px #272d3b26;
}
.project-card h3 {
  font-family:'Orbitron',sans-serif;font-size:1.28em;letter-spacing:0.14em;margin:0 0 10px 0;
  color:#FFB649;text-shadow:0 1px 17px #314d776c, 0 1.1px 0 #fff5;
}

/* SERVICE */
#service {background:linear-gradient(104deg,#181a28 90%,#3b71da 100%);}
.service-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:32px 30px; width:98vw;max-width:1228px; margin:0 auto 5px auto;
}
.service-item {
  background:rgba(39,48,63,0.77);border-radius:15px;box-shadow:0 4px 18px #28457955;
  padding:37px 21px 29px 21px;
  text-align:center;filter:blur(17px) opacity(0.05);opacity:0;
  transition: filter .27s cubic-bezier(.5,1.6,.5,1.1),opacity .24s;
}
.service-item.revealed {
  filter:none;opacity:1;
}
.service-icon { display:flex;justify-content:center;align-items:center;margin-bottom:17px;}
.service-icon svg {filter:drop-shadow(0 3px 25px #00336666);}
.service-item h3 {font-family:'Orbitron',sans-serif;color:var(--orange-light);font-size:1.13em;margin-bottom:10px;text-shadow:0 1px 7px #37569a62;}
.service-item p {color:#fff9;font-size:.98em;letter-spacing:.01em;}
.fractal-bg {
  width:100%;height:80px;position:absolute;bottom:-10px;left:0;overflow:visible;z-index:-1;
  filter:blur(1.2px) brightness(2.2) drop-shadow(0 7px 100px #23325770);
  pointer-events:none;
}

/* SERVICE Rainbow Hover */
.service-item {
  box-shadow:0 0 20px #19304a99,0 1px 0 #fff3;
  border:2.5px solid transparent;transition:border .21s,box-shadow .18s;
}
.service-item:hover,.service-item:focus {
  border:2.5px solid;
  border-image:linear-gradient(90deg,#1880d3,#ff5800,#fdd935,#4879ff,#ff2d99)1;
  box-shadow:0 0 20px #ff880088,0 9px 34px #FFF9;
}

/* FOOTER */
footer {
  background:linear-gradient(90deg,#1c233b 80%,#FF650021 100%);padding:23px 0;
  box-shadow:0 -2px 20px #1e1b2d90 inset;
}
.footer-inner {display:flex;justify-content:center;align-items:center;gap:20px;}
.footer-logo {margin-right:15px;}
.footer-text {font-family:'Orbitron',sans-serif;font-size:1em;color:#caf3ffcf;text-shadow:0 2px 18px #314d77c3;}
.footer-text .divider {color:#FF6500;font-weight:700;margin:0 11px;}

/* SCROLL ANIMATION COMMON */
.reveal {transition:filter .6s cubic-bezier(.31,1.5,.6,1),opacity .69s,transform .5s;}
.revealed {filter:none !important;opacity:1 !important;transform:none !important;}
.fade-in {animation: navFadeIn 1.7s cubic-bezier(.6,0,.3,1) .1s;}
/* UTILS */
::-webkit-scrollbar {width:11px;background:#192c3a;}
::-webkit-scrollbar-thumb {background:linear-gradient(120deg,var(--indigo),var(--navy-dark),#FF650078);}
::-webkit-scrollbar-thumb:hover {background:var(--orange);}
@media (max-width:768px){
  nav#navbar{padding:0 10px;}
  .section-title{font-size:2em;}
  .portfolio-grid, .service-grid, .projects-list{gap:15px;}
  .project-card{flex-direction:column;}
  .project-left,.project-right{border-radius: 18px 18px 0 0 !important;}
  .project-right{padding:19px 14px !important;}
}
@media (max-width:510px){
  nav#navbar ul{gap:10px;}
  .main-title{font-size:2.18em;}
  .awards-grid,.portfolio-grid,.service-grid{grid-template-columns:1fr;}
  .projects-list{gap:10px;}
  section{padding:61px 0 21px 0;}
}