:root {
  --primary-color:    #E5FF00;            
  --secondary-color:  #CCFF33;            
  --accent-color:     #00FFFF;            
  --bg-color:         #0A0A0A;            
  --text-color:       #FFFF66;            
  --terminal-bg:      rgba(16,16,16,0.9);
  --btn-hover-bg:     rgba(0,255,255,0.1); 
  --interest-purple:    #c7a4ff
}

#slogan {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'Quicksand', sans-serif;    
  font-size: 1.5rem;                         
  color: var(--accent-color);
  opacity: 0;                              
  z-index: 999;                            
  pointer-events: none;
  animation: sloganIn 1s ease-out 4s forwards; 
}

@keyframes sloganIn {                      
  0% {
    opacity: 0;
    transform: translate(-20px, -20px) scale(0.8);
    text-shadow: 0 0 4px var(--accent-color);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0) scale(1.05);
    text-shadow: 0 0 20px var(--accent-color);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    text-shadow: 0 0 8px var(--accent-color);
  }
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;  
  pointer-events: none;

  
  background-image:
    radial-gradient(circle 20vw at 25% 30%, rgba(229,255,0,0.15), transparent 70%),
    radial-gradient(circle 20vw at 75% 70%, rgba(0,255,255,0.15), transparent 70%),
    radial-gradient(circle 15px, transparent 15px, rgba(255,255,255,0.05) 16px, transparent 17px),
    radial-gradient(circle 15px, transparent 15px, var(--accent-color) 16px, transparent 17px);
  background-size:
    100vw 100vh,
    100vw 100vh,
    120px 120px,
    120px 120px;
  background-blend-mode:
    screen,
    screen,
    normal,
    normal;

  
  animation: blobDrift 30s linear infinite;
}

@keyframes blobDrift {
  from {
    background-position:
      0% 0%,
      0% 0%,
      0 0,
      60px 60px;
  }
  to {
    background-position:
      100% 100%,
      100% 0%,
      60px 60px,
      0 0;
  }
}


#dna-canvas { 
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;           
  pointer-events: none; 
  background: transparent;
}

@keyframes moveBG {
  0%   { background-position: 20% 30%, 80% 70%; }
  100% { background-position: 80% 70%, 20% 30%; }
}
#slogan.slogan-show {
  animation: sloganIn 1s ease-out forwards; 
}

@keyframes sloganIn {                      
  0% {
    opacity: 0;
    transform: translate(-20px, -20px) scale(0.8);
    text-shadow: 0 0 4px var(--accent-color);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0) scale(1.05);
    text-shadow: 0 0 20px var(--accent-color);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    text-shadow: 0 0 8px var(--accent-color);
  }
}


#splash {
  position: fixed; inset: 0;
  display: flex; justify-content: center; align-items: center;
  background: var(--bg-color);
  z-index: 1000;
  animation: splashHide 0.6s ease-out 4s forwards;
}
@keyframes splashHide { 
  to { opacity: 0; visibility: hidden; }
}


.logo-container {
  position: relative;
  display: flex; gap: 1rem;
  align-items: center;
}
.logo-circle {
  position: absolute;
  width: 120px; height: 120px;
  border: 3px solid var(--accent-color);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0.6;
  animation: circlePulse 1s ease-out forwards;
}
@keyframes circlePulse {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.6; }
  60%  { transform: translate(-50%,-50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}


.logo-letter {
  font-size: 6rem;
  color: var(--primary-color);
  opacity: 0;
  animation: letterIn 0.8s forwards;
}
.logo-letter:nth-child(2) { animation-delay: 0.3s; } 
.logo-letter:nth-child(3) { animation-delay: 0.6s; } 
@keyframes letterIn {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}

#splash {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: splashHide 0.6s ease-out 4s forwards;
}

.logo-container {
  animation: containerFade 0.5s ease-out 1.2s forwards;  
}
@keyframes containerFade {                                
  from { opacity:1; } 
  to   { opacity:0; }
}


.logo-tagline {
  position: absolute;                   
  top: 50%; left: 50%;                  
  transform: translate(-50%, -50%);     
  
  font-family: 'Fredoka One', cursive;
  font-size: 3rem;                      
  background: linear-gradient(90deg, #00FF00, #00FFFF); 
  -webkit-background-clip: text;       
  background-clip: text;                
  color: transparent;                   

  opacity: 0;

  animation:
    taglineIn 0.8s ease-out 1.8s forwards, 
    taglineOut 0.8s ease-in 3s forwards;
}

@keyframes taglineIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.8); 
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes taglineOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    transform: translate(-50%, -40%) scale(1.1); 
  }
  60% {
    transform: translate(-50%, -55%) scale(0.95); 
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.8); 
  }
}


@keyframes splashHide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}


#particles-js {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  background-color: var(--bg-color);
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Share Tech Mono', monospace;
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  min-height: 100vh;
}


#progress-bar {
  position: fixed; top: 0; left: 0;
  height: 4px; background: var(--accent-color);
  width: 0%; z-index: 999;
  transition: width 0.2s ease-out;
}


.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


.hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  min-height: 100vh;
}


.glitch {

  font-family: 'Fredoka One', cursive;  
  position: relative;
  font-weight: 250; 
  font-size: 4rem;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-color);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; opacity: 0.8;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--accent-color);
  animation: glitch1 2s infinite linear;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--primary-color);
  animation: glitch2 2s infinite linear;
}
@keyframes glitch1 {
  0%,100% { clip: rect(0,900px,0,0); }
  10%     { clip: rect(10px,900px,80px,0); }
  30%     { clip: rect(80px,900px,120px,0); }
  50%     { clip: rect(30px,900px,60px,0); }
}
@keyframes glitch2 {
  0%,100% { clip: rect(0,900px,0,0); }
  20%     { clip: rect(60px,900px,100px,0); }
  40%     { clip: rect(10px,900px,50px,0); }
  70%     { clip: rect(90px,900px,130px,0); }
}


.typewriter {
  font-size: 1.5rem; margin: 1rem 0;
}
#typewriter::after {
  content: '|'; margin-left: 2px;
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}


.terminal {
  width: 80%; max-width: 600px;
  background: var(--terminal-bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  margin: 1rem 0;
}
.terminal-header {
  background: #222; padding: 0.5rem;
  display: flex; align-items: center;
}
.button {
  width: 12px; height: 12px; border-radius: 50%;
  margin-right: 0.5rem;
}
.button.red    { background: #ff5f56; }
.button.yellow { background: #ffbd2e; }
.button.green  { background: #27c93f; }
.title { color: #ccc; font-size: 0.9rem; }
.terminal-body {
  padding: 1rem; text-align: left;
  font-size: 0.9rem; line-height: 1.4;
}
.line {
  display: flex; align-items: center;
  margin-bottom: 0.5rem;
}
.prompt { color: var(--primary-color); margin-right: 0.5rem; }
.command { color: #fff; }
.output  { color: var(--text-color); margin: 0.5rem 0; }
.blink   { animation: blink 0.7s infinite; }


.nav {
  display: flex; gap: 1rem;
  flex-wrap: wrap; justify-content: center;
}
.btn {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  text-decoration: none; color: var(--primary-color);
  transition: background 0.3s, border-color 0.3s;
}
.btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--accent-color);
}

.contact-section {
  position: relative;       
  overflow: hidden;      
  text-align: center;     
}


.contact-section .section-title {
  display: inline-block;     
  margin: 0 auto 2rem;       
}

.contact-section > * {
  position: relative;
  z-index: 1;
}
.section-title {
  font-size: 3rem; margin-bottom: 2rem;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-color);
}
.contact-form {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
  max-width: 600px; margin: 0 auto 2rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%; background: none; border: none;
  border-bottom: 2px solid var(--primary-color);
  padding: 0.75rem 0; font-size: 1rem;
  color: var(--text-color); outline: none;
  transition: border-color 0.3s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.6);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--accent-color);
}
.submit-btn {
  align-self: flex-end; padding: 0.6rem 1.2rem;
  border: 2px solid var(--primary-color);
  border-radius: 4px; background: transparent;
  color: var(--primary-color); cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.submit-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--accent-color);
}
.contact-social {
  display: flex; justify-content: center; gap: 1.5rem;
}
.contact-social i {
  font-size: 2rem; color: var(--primary-color);
  transition: color 0.2s, transform 0.2s;
}
.contact-social a:hover i {
  color: var(--accent-color); transform: scale(1.1);
}


.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
  gap: 2rem; max-width: 800px; margin: 0 auto;
}
.tech-item {
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-color);
  transition: transform 0.2s, color 0.2s;
}
.tech-item:hover {
  transform: translateY(-5px);
  color: var(--accent-color);
}
.tech-item p {
  margin-top: 0.5rem; font-size: 0.9rem;
}


@media (max-width: 600px) {
  .glitch            { font-size: 2.5rem; }
  .typewriter        { font-size: 1.2rem; }
  .terminal          { width: 95%; }
  .section-title     { font-size: 2.5rem; }
  .contact-form input,
  .contact-form textarea { font-size: 0.9rem; }
  .contact-social i         { font-size: 1.8rem; }
}

.intro-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 1rem;
}

.intro-box {
  background: rgba(0,255,255,0.1);
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 280px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.intro-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,255,255,0.4);
}

.intro-box h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.intro-box p {
  font-size: 0.9rem;
  color: var(--text-color);
}



#intro-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-color);
  z-index: 1000;         
  animation: introFade 1.2s ease-out forwards;
}


@keyframes introFade {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; display: none; }
}


.about-section {
  position: relative;
  min-height: 100vh;            
  display: grid;
  place-items: center;         
  padding: 6rem 1rem;
}

.about-wrap {
  width: 100%;
  max-width: 1100px;
}

.about-title {
  position: relative;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: .06em;
  color: var(--primary-color);
  margin: 0 0 2rem 0;
  text-transform: uppercase;
}


.about-section {
  position: relative;              
  padding-top: 6rem;                
  padding-bottom: 6rem;            
}


.about-section::before,
.about-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 26px;                  
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 8px rgba(0,255,255,.25));

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%2300ffff'/%3E%3Cstop offset='100%25' stop-color='%23e5ff00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 13 H50 L70 13 75 2 92 24 110 13 H150 L170 13 175 4 192 22 210 13 H250 L300 13' fill='none' stroke='url(%23g)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 300px 100%;      
  background-repeat: repeat-x;
  animation: ecgScroll 8s linear infinite;
}


.about-section::before { top: 0; }
.about-section::after  { bottom: 0; transform: scaleY(-1); }


@keyframes ecgScroll {
  from { background-position: 0 0; }
  to   { background-position: -300px 0; }
}


@media (max-width: 900px) {
  .about-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .about-section::before,
  .about-section::after {
    height: 22px;
    background-size: 240px 100%;
    animation-duration: 10s;
  }
}


.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 5vw, 3rem);
  align-items: start;
}


.about-lead {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: 0 0 1.25rem;
  color: #e9f0c0;
}
.about-em {
  color: var(--accent-color);
  text-shadow: 0 0 10px rgba(0,255,255,.25);
}

.about-bullets {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.about-bullets li {
  position: relative;
  padding-left: 1.25rem;
  margin: .4rem 0;
  color: var(--text-color);
  opacity: .95;
}
.about-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
}

.about-chip {
  display: inline-block;
  margin-top: .6rem;
  padding: .35rem .8rem;
  border: 1px solid var(--accent-color);
  border-radius: 999px;
  background: rgba(0,255,255,.08);
  font-size: .95rem;
  color: var(--text-color);
}


.about-right p {
  margin: 0 0 1rem;
  color: #e7e7e7;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.7;
}


@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-section::before,
  .about-section::after { left: .75rem; }
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 5vw, 3rem);
  align-items: start;
}


.about-quote {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: end;

  max-width: min(100%, 960px);
  margin-top: clamp(1rem, 2.5vw, 2rem);
  padding: 1rem 1.4rem;
  text-align: center;


  font-style: normal;      
  font-weight: 600;            
  letter-spacing: 0.02em;


  border: 1.5px solid var(--accent-color);
  border-radius: 14px;
  background: linear-gradient(180deg,
              rgba(0,255,255,0.10) 0%,
              rgba(0,255,255,0.06) 100%);
  box-shadow:
    0 0 10px rgba(0,255,255,0.12),
    inset 0 0 0 1px rgba(0,255,255,0.22);
  color: var(--text-color);
  line-height: 1.55;
}


@media (max-width: 900px) {
  .about-quote {
    max-width: 92%;
    border-radius: 12px;
  }
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 12px 1fr; 
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.skills-subtitle {
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-color);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  margin-bottom: .75rem;
}


.interest-list {
  list-style: none;
  padding: 0; margin: 0;
}
.interest-list li {
  position: relative;
  padding-left: 1.25rem;
  margin: .55rem 0;
  color: var(--text-color);
  line-height: 1.6;
}
.interest-list li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--accent-color);
}


.skills-sep {
  width: 12px; height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 0 18px rgba(229,255,0,0.35), 0 0 22px rgba(0,255,255,0.25);
}


.skills-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .65rem;
}
.skills-list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
}
.skills-list li:last-child { border-bottom: none; }

.skill-name {
  color: #e7e7e7;
  display: inline-flex; align-items: center; gap: .5rem;
}


.level { margin-left: auto; display: inline-flex; gap: 8px; }
.level .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.level .dot.on {
  background: var(--primary-color);
  box-shadow: 0 0 6px var(--primary-color);
}


@media (max-width: 900px) {
  .skills-grid { grid-template-columns: 1fr; }
  .skills-sep { display: none; }
  .skills-right { margin-top: .5rem; }
}

#skills .about-title,
#skills .skills-grid {
  max-width: 1100px;         
  margin-left: auto;         
  margin-right: auto;
}


#skills .about-title {
  display: block;
  text-align: center;
  margin-bottom: 1.75rem;
  position: static;         
}

.skills-left  .skills-subtitle,
.skills-right .skills-subtitle {
  text-align: center;
  display: block;
  margin-bottom: .85rem;
}


.interest-list,
.skills-list {
  text-align: left;
}

#skills {
  padding-top: clamp(2.5rem, 6vw, 5rem); 
  scroll-margin-top: 6rem;             
}


#skills .about-title {
  display: block;
  max-width: 1100px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.interest-card {
  width: 100%;
  padding: 1rem 1.4rem;
  margin: 0 auto;                      
  border: 1.5px solid var(--accent-color);
  border-radius: 14px;
  background: linear-gradient(180deg,
              rgba(0,255,255,0.10) 0%,
              rgba(0,255,255,0.06) 100%);
  box-shadow:
    0 0 10px rgba(0,255,255,0.12),
    inset 0 0 0 1px rgba(0,255,255,0.22);
}


.interest-card .skills-subtitle {
  text-align: center;
  margin: 0 0 .85rem;
}
.interest-card .interest-list { text-align: left; }


#skills .skills-left .interest-card {
  margin-top: .5rem;
}


@media (max-width: 900px) {
  .interest-card { border-radius: 12px; }
}

.skills-left .skills-subtitle {
  text-align: center;
  margin: 0 0 .85rem;
}


.interest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;  
  text-align: center;         
}

.interest-list li {
  position: relative;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--interest-purple);      
  border-radius: 14px;
  background: linear-gradient(180deg,
              rgba(199,164,255,0.10) 0%,
              rgba(199,164,255,0.06) 100%);
  box-shadow:
    0 0 10px rgba(199,164,255,0.18),
    inset 0 0 0 1px rgba(199,164,255,0.22);
  color: var(--text-color);
  line-height: 1.55;
  text-align: center;
}


.interest-list li::before { content: none; }

:root{
  --icon-python:  #3776AB;   
  --icon-c:       #00599C;   
  --icon-ml:      #C7A4FF;   
  --icon-vision:  #00EAFF;  
  --icon-control: #E5FF00;   
  --icon-web:     #FFD43B;  
  --icon-html:    #E34F26;  
  --icon-css:     #1572B6;  
  --icon-js:      #F7DF1E;  
  --icon-clinical: #3DDC97;  
  --scholar-yellow: #F5FF6A;  
}


.skills-list .skill-name i{
  min-width: 1.15em;
  text-align: center;
  margin-right: .5rem;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.25));
}


.skills-list .fa-python{
  color: var(--icon-python);
  text-shadow: 0 0 6px rgba(55,118,171,.35);
}
.skills-list .fa-c,
.skills-list .fa-cuttlefish{             
  color: var(--icon-c);
  text-shadow: 0 0 6px rgba(0,89,156,.35);
}
.skills-list .fa-brain{
  color: var(--icon-ml);
  text-shadow: 0 0 8px rgba(199,164,255,.45);
}
.skills-list .fa-eye{
  color: var(--icon-vision);
  text-shadow: 0 0 8px rgba(0,234,255,.45);
}

.skills-list .fa-wave-square,
.skills-list .fa-diagram-project,
.skills-list .fa-project-diagram{
  color: var(--icon-control);
  text-shadow: 0 0 8px rgba(229,255,0,.35);
}
.skills-list .fa-code{
  color: var(--icon-web);
  text-shadow: 0 0 6px rgba(255,212,59,.4);
}

.skills-list .fa-html5{  color: var(--icon-html);  text-shadow: 0 0 6px rgba(227,79,38,.4); }
.skills-list .fa-css3-alt{ color: var(--icon-css); text-shadow: 0 0 6px rgba(21,114,182,.4); }
.skills-list .fa-js{     color: var(--icon-js);   text-shadow: 0 0 6px rgba(247,223,30,.4); }


.skills-list .cxx-icon .fa-c{ color: var(--icon-c); }
.skills-list .cxx-icon .fa-plus{ color: var(--icon-c); opacity:.9; margin-left:.1em; }
.skills-list .fa-stethoscope,
.skills-list .fa-user-doctor,
.skills-list .fa-heart-pulse{
  color: var(--icon-clinical);
  text-shadow: 0 0 8px rgba(61,220,151,.45);
}
#skills{
  padding-bottom: clamp(40px, 7vw, 80px);  
}

#scholarships {
  padding-top: clamp(2rem, 5vw, 4rem);
  scroll-margin-top: 6rem; 
}
#scholarships .about-title {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.scholar-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 18px);
}


.scholar-card{

  padding: .85rem 1.1rem;
  border: 1.5px solid var(--scholar-yellow);
  border-radius: 14px;


  background: linear-gradient(
              180deg,
              rgba(245,255,106,0.10) 0%,
              rgba(245,255,106,0.06) 100%);


  box-shadow:
    0 0 10px rgba(245,255,106,.18),
    inset 0 0 0 1px rgba(245,255,106,.22);

  transition: transform .18s ease, box-shadow .18s ease;
}

.scholar-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 14px rgba(245,255,106,.28),
    inset 0 0 0 1px rgba(245,255,106,.28);
}


#scholarships .chip{
  border-color: var(--scholar-yellow);
  background: rgba(245,255,106,.08);
}
#scholarships .chip.alt{
  border-color: var(--scholar-yellow);
  background: rgba(245,255,106,.10);
}


@media (max-width: 820px) {
  .scholar-grid { grid-template-columns: 1fr; }
}

.section-ecg{
  width: 100%;
  height: 26px;                       
  margin: clamp(24px, 5vw, 40px) 0;    
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 8px rgba(0,255,255,.25));

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%2300ffff'/%3E%3Cstop offset='100%25' stop-color='%23e5ff00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 13 H50 L70 13 75 2 92 24 110 13 H150 L170 13 175 4 192 22 210 13 H250 L300 13' fill='none' stroke='url(%23g)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 300px 100%;        
  background-repeat: repeat-x;
  animation: ecgScroll 8s linear infinite;
}


@media (max-width: 900px){
  .section-ecg{
    height: 22px;
    background-size: 240px 100%;
    animation-duration: 10s;
  }
}

.section-ecg--between{
  margin-top: clamp(32px, 6vw, 80px);
  margin-bottom: clamp(22px, 4vw, 36px);
}

.projects-sec{
  padding: clamp(8px, 2vw, 16px) 0 clamp(24px, 5vw, 40px);
}

.projects-title{
  display: block;
  width: fit-content;               
  margin: 0 auto clamp(18px, 3vw, 28px); 
  text-align: center;                
}

.proj-viewport{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  padding-right: 54px;
}

.proj-track{
  display: flex;
  transition: transform .55s ease;
}

.proj-page{
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}


.proj-card{
  border: 1px solid rgba(229,255,0,.22);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(229,255,0,.08);
  padding: clamp(12px, 2vw, 16px);
}

.proj-cover{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(1200px 400px at 20% 20%, rgba(0,255,220,.15), transparent 60%),
              radial-gradient(900px 350px at 80% 80%, rgba(229,255,0,.12), transparent 60%),
              rgba(255,255,255,.03);
  margin-bottom: clamp(12px, 1.6vw, 16px);
}
.proj-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proj-name{
  font-size: clamp(22px, 2.6vw, 32px);
  color: #E5FF00;
  margin: 4px 0 6px;
  letter-spacing: .5px;
}
.proj-tagline{
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,.9);
  margin: 0 0 6px;
}


.proj-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(229,255,0,.7);
  color: #E5FF00;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 2;
}
.proj-nav:hover{
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 0 12px rgba(229,255,0,.35);
}
.proj-nav.prev{ left: -8px; }
.proj-nav.next{ right: 52px; } 


.proj-dots{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}
.proj-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.proj-dot:hover{ transform: scale(1.06); }
.proj-dot.is-active{
  border-color: #E5FF00;
  background: #E5FF00;
}


@media (max-width: 900px){
  .proj-page{
    grid-template-columns: 1fr;
  }
  .proj-nav.prev{ left: 4px; }
  .proj-nav.next{ right: 44px; }
}

.proj-page--feature{

  grid-template-columns: 1fr;
}

.proj-feature{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 58% 42%;
  gap: clamp(18px, 2.8vw, 32px);
  align-items: stretch;

  border: 1px solid rgba(229,255,0,.22);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(229,255,0,.08);
  padding: clamp(12px, 2vw, 16px);
}

.proj-feature-media{
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(1200px 400px at 20% 20%, rgba(0,255,220,.15), transparent 60%),
              radial-gradient(900px 350px at 80% 80%, rgba(229,255,0,.12), transparent 60%),
              rgba(255,255,255,.03);
  aspect-ratio: 16/9;
  min-height: clamp(280px, 34vw, 460px);
}
.proj-feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proj-feature-info{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.6vw, 24px);
  z-index: 1; 
}

.proj-points{
  margin: 4px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.9);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.45;
}
.proj-points li{
  margin: 4px 0;
}

.proj-actions{
  display: flex;
  gap: 12px;
  margin-top: auto;
}
.proj-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #111;
  background: #E5FF00;
  border: 1px solid rgba(0,0,0,.2);
  text-decoration: none;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.proj-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(229,255,0,.25);
}
.proj-btn.ghost{
  color: #E5FF00;
  background: transparent;
  border: 1px solid rgba(229,255,0,.6);
}
.proj-btn.ghost:hover{
  background: rgba(229,255,0,.08);
}


@media (max-width: 900px){
  .proj-feature{
    grid-template-columns: 1fr;
  }
  .proj-actions{
    margin-top: 4px;
  }
}
.proj-feature-meta{
  margin: .35rem 0 1rem;         
  font-family: var(--mono, 'DM Mono', monospace);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-200, #E5FF00); 
  text-transform: uppercase;
  opacity: .9;
}



#proj-ppg .proj-feature-grid {
  display: grid;
  grid-template-columns: 56% 44%;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: center;
}


#proj-ppg .proj-feature-media {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0;
  min-height: auto;
  overflow: hidden;             
}


#proj-ppg .proj-feature-media::before {
  content: none !important;
  display: none !important;
}


#proj-ppg .proj-feature-media img,
#proj-ppg .proj-feature-media .proj-cover img { 
  display: block;
  margin: 0 auto;
  height: clamp(00px, 40vh, 420px); 
  width: auto;                       
  max-width: 95%;                   
  object-fit: contain;
  transform: none !important;
  border-radius: 10px;              
}


#proj-ppg .proj-feature-desc {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


@media (max-width: 980px) {
  #proj-ppg .proj-feature-grid {
    grid-template-columns: 1fr;
  }
  #proj-ppg .proj-feature-media img,
  #proj-ppg .proj-feature-media .proj-cover img {
    height: clamp(240px, 36vh, 380px);
    max-width: 100%;
  }
}

#proj-ppg .proj-feature-grid {
  display: grid;
  grid-template-columns: clamp(520px, 54vw, 860px) 1fr; 
  column-gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}


#proj-ppg .proj-feature-media,
#proj-ppg .proj-cover {
  position: relative;
  height: clamp(420px, 52vh, 620px); 
  overflow: hidden;                  
  border-radius: 12px;
  margin: 0;                         
  box-shadow: none;
  background: transparent;
}


#proj-ppg .proj-feature-media img,
#proj-ppg .proj-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                 
  object-position: center top;     
  margin: 0;
}


#proj-ppg .proj-feature-desc {
  position: relative;
  z-index: 1;
  min-width: 0;                       
  background: transparent;
  box-shadow: none;
}


@media (max-width: 980px) {
  #proj-ppg .proj-feature-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(16px, 2.6vw, 24px);
  }
  #proj-ppg .proj-feature-media,
  #proj-ppg .proj-cover {
    height: clamp(300px, 42vh, 520px);
  }
}

#proj-ppg .proj-feature {

  grid-template-columns: clamp(520px, 52vw, 760px) 1fr;
  align-items: start;
}


#proj-ppg .proj-feature-media {
  position: relative;
  background: transparent !important;  
  aspect-ratio: auto;                  
  height: clamp(440px, 52vh, 640px);   
  overflow: hidden;                    
  border-radius: 12px;
  margin: 0;
}


#proj-ppg .proj-feature-media::before {
  content: none !important;
  display: none !important;
}


#proj-ppg .proj-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center top;
  margin: 0;
  transform: none !important;
}


#proj-ppg .proj-feature-info {
  position: relative;
  z-index: 1;
  min-width: 0;
}


@media (max-width: 980px) {
  #proj-ppg .proj-feature { grid-template-columns: 1fr; }
  #proj-ppg .proj-feature-media { height: clamp(300px, 42vh, 520px); }
}



#proj-ppg .proj-feature-media {
  height: 100%;          
  min-height: 100%;
  align-self: stretch;  
  overflow: hidden;     
}


#proj-ppg .proj-feature-media img {
  object-position: center 54%; 
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}


#proj-ppg .proj-feature {

  gap: clamp(2px, 0.5vw, 10px);
}


#proj-ppg .proj-feature-info {
  margin-left: -14px;                       
  padding-left: clamp(10px, 1vw, 16px);  
  position: relative;
  z-index: 1;
}


@media (max-width: 980px) {
  #proj-ppg .proj-feature-info { margin-left: 0; }
}



#proj-ppg .proj-feature {
  gap: clamp(1px, 0.3vw, 6px);  
}


#proj-ppg .proj-feature-info {
  margin-left: -22px;                   
  padding-left: clamp(8px, 0.8vw, 12px); 
  position: relative;
  z-index: 1;
  min-width: 0;                         
}


@media (max-width: 980px) {
  #proj-ppg .proj-feature { gap: clamp(8px, 2.2vw, 18px); }
  #proj-ppg .proj-feature-info { margin-left: 0; padding-left: clamp(10px, 1vw, 16px); }
}

#proj-ppg .proj-feature-media .proj-media-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;        
  text-decoration: none;     
}

#proj-ppg .proj-feature-media .proj-media-link:focus-visible {
  outline: 2px solid var(--neon, #EEFE64);
  outline-offset: 2px;
  border-radius: 12px;
}


#proj-ppg .proj-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  display: block;
}

#proj-clay .proj-cover {
  position: relative;
  border-radius: 10px;  
  overflow: hidden;    
}


#proj-clay .proj-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(229,255,0,0);   
  box-shadow: 0 0 0 0 rgba(229,255,0,0);  
  transition: border-color .28s ease, box-shadow .28s ease;
  pointer-events: none;                   
}

#proj-clay .proj-cover:hover::after,
#proj-clay .proj-cover:focus-within::after {
  border-color: rgba(229,255,0,0.9);
  box-shadow: 0 0 18px 2px rgba(229,255,0,0.35);
}


#proj-clay .proj-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    filter .35s ease;
  will-change: transform;
}

#proj-clay .proj-cover:hover img,
#proj-clay .proj-cover:focus-within img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

#proj-clay .proj-cover:active img {
  transform: scale(1.01);
  transition-duration: .18s;
}


@media (prefers-reduced-motion: reduce) {
  #proj-clay .proj-cover::after { transition: none; }
  #proj-clay .proj-cover img    { transition: none; transform: none; }
}

#proj-clay .proj-cover-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
  cursor: pointer;
}


#proj-clay .proj-cover-link:focus-visible {
  outline: 2px solid var(--neon, #EEFE64);
  outline-offset: 3px;
  border-radius: inherit;
}

.ecg-divider {
  width: 100%;
  display: block;
  pointer-events: none;        
}

.ecg-divider canvas {
  width: 100%;
  height: 56px;                  
  display: block;
}


.ecg-after-projects {
  margin: 56px 0 40px;           
}


@media (max-width: 900px) {
  .ecg-divider canvas { height: 44px; }
  .ecg-after-projects { margin: 40px 0 28px; }
}

.exp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.exp-title {
  text-align: center;
  font-size: clamp(32px, 4.6vw, 64px);
  letter-spacing: 0.06em;
  color: #e7ff60;
  text-shadow: 0 0 20px rgba(195, 255, 100, 0.35);
  margin: 6px 0 24px;
}


.exp-timeline {
  position: relative;
  margin: 32px auto 8px;
  padding-left: 36px;             
  max-width: 980px;
}

.exp-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #baff4e 0%, #37ffd9 100%);
  box-shadow: 0 0 12px rgba(160, 255, 120, 0.35);
  opacity: 0.75;
}

.exp-item {
  position: relative;
  margin: 22px 0 28px;
}

.exp-dot {
  position: absolute;
  left: 8px;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #eaff7a, #baff4e 55%, #39ffd9 100%);
  box-shadow: 0 0 16px rgba(180,255,120,0.7), 0 0 28px rgba(55,255,217,0.35);
}

.exp-card {
  background: rgba(10, 16, 14, 0.38);
  border: 1px solid rgba(210, 255, 120, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(100, 255, 180, 0.12),
    0 6px 28px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(150, 255, 120, 0.10);
  border-radius: 14px;
  padding: 16px 18px 14px;
  color: #d9f6e9;
}

.exp-head {
  margin-bottom: 8px;
}

.exp-when {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #9df3bc;
  opacity: 0.9;
  margin-bottom: 4px;
}

.exp-role {
  font-size: clamp(18px, 2.4vw, 26px);
  color: #f1ffe0;
  margin: 2px 0;
  text-shadow: 0 0 10px rgba(190, 255, 120, 0.15);
}

.exp-org {
  font-size: 14.5px;
  color: #bfead6;
  opacity: 0.95;
}

.exp-body {
  margin: 10px 0 8px;
  line-height: 1.48;
  color: #cfeee2;
}

.exp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.exp-tags span {
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 120, 0.3);
  color: #e8ffe2;
  background: rgba(20, 30, 26, 0.4);
  box-shadow: 0 0 8px rgba(160, 255, 140, 0.12);
}

@media (max-width: 720px) {
  .exp-timeline { padding-left: 28px; }
  .exp-timeline::before { left: 12px; }
  .exp-dot { left: 3px; }
}

#experience .about-title {
  display: block;
  max-width: 1200px;      
  margin: 0 auto 1.25rem;  
  text-align: center;     
}

#experience .exp-card {

  padding-left: 34px;
  position: relative; 
  z-index: 1;          
}

#experience .exp-dot {
  z-index: 0;          
}


@media (max-width: 720px) {
  #experience .exp-card { padding-left: 28px; }
}


.course-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.25rem 4rem;
}

.course-section .section-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: 0.08em;
  margin-bottom: 2.5rem;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}


.course-card {
  display: grid;
  grid-template-rows: auto auto auto auto; 
  gap: .65rem;
  background: rgba(10, 14, 12, 0.65);
  border: 1px solid rgba(210, 255, 120, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(240, 255, 160, 0.12),
    0 8px 28px rgba(168, 255, 72, 0.06);
  border-radius: 18px;
  padding: 1.15rem 1.15rem .9rem;
  backdrop-filter: blur(2px);
  overflow: hidden;                  
}

.course-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}

.course-name {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .02em;
}

.course-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cw-tag {
  font-size: .8rem;
  border: 1px solid rgba(210,255,120,.35);
  padding: .15rem .5rem;
  border-radius: 999px;
  color: #dfff70;
  background: rgba(210,255,120,.06);
  white-space: nowrap;
}

.course-desc {
  margin: 0;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  overflow-wrap: anywhere;
}


.cw-assignments, .cw-tests {
  border: 1px dashed rgba(210,255,120,.22);
  background: rgba(210,255,120,.03);
  border-radius: 12px;
  padding: .7rem .85rem;
}


.cw-assignments h4,
.cw-tests h4 {
  font-size: .9rem;
  letter-spacing: .06em;
  margin: 0 0 .5rem;
  color: #eaff7a;
}

.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
}


.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  border-radius: 12px;
  border: 1px solid rgba(210,255,120,.5);
  background: rgba(210,255,120,.08);
  color: #eaff7a;
  text-decoration: none;
  font-weight: 700;
  font-size: .87rem;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn-chip:hover {
  transform: translateY(-1px);
  background: rgba(210,255,120,.12);
  box-shadow: 0 6px 14px rgba(168,255,72,.12), inset 0 0 0 1px rgba(255,255,255,.05);
}


.btn-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(210,255,120,.4);
  background: rgba(210,255,120,.06);
  color: #eaff7a;
  font-size: .78rem;
  font-weight: 700;
}


.course-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: .2rem;
}

.cw-btn.small {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(210,255,120,.5);
  background: rgba(210,255,120,.08);
  color: #eaff7a;
  text-decoration: none;
  font-weight: 800;
  font-size: .85rem;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.cw-btn.small:hover {
  transform: translateY(-1px);
  background: rgba(210,255,120,.12);
  box-shadow: 0 6px 14px rgba(168,255,72,.12), inset 0 0 0 1px rgba(255,255,255,.05);
}


@media (max-width: 460px) {
  .course-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}



.contact-section {
  position: relative;
  padding: clamp(56px, 8vw, 90px) 1rem;
  overflow: hidden;                 
  scroll-margin-top: 6rem;
}



.contact-section::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -18vh; bottom: -18vh;
  background:
    linear-gradient(to bottom, var(--bg-color) 0%, rgba(0,0,0,0) 36%),
    linear-gradient(to top,    var(--bg-color) 0%, rgba(0,0,0,0) 36%);
  pointer-events: none;
  z-index: -1;
}


.contact-wrap { max-width: 1120px; margin: 0 auto; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr; 
  gap: clamp(18px, 3vw, 30px);
  align-items: center;                 
}


.contact-card {
  justify-self: start;
  align-self: center;
  max-width: 640px;
  border: 1.5px solid rgba(0,255,255,.45);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,255,255,.10), rgba(0,255,255,.06));
  box-shadow: 0 0 10px rgba(0,255,255,.14), inset 0 0 0 1px rgba(0,255,255,.25);
  padding: 1.1rem 1.25rem;
  text-align: left;
  color: var(--text-color);
}
.contact-lead   { font-size: clamp(1rem, 1.55vw, 1.15rem); margin: 0 0 .5rem; }
.contact-points { margin: 0; padding-left: 1.1rem; line-height: 1.6; }


.contact-form {
  width: 100%;
  max-width: none;
  border: 1.5px solid var(--primary-color);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(229,255,0,.08), rgba(229,255,0,.04));
  box-shadow: 0 0 10px rgba(229,255,0,.14), inset 0 0 0 1px rgba(229,255,0,.22);
  padding: 1.35rem 1.6rem;
  display: grid;
  gap: 1rem;
}

.contact-form label { display: grid; gap: .35rem; }
.contact-form label span {
  color: var(--primary-color);
  text-shadow: 0 0 6px var(--primary-color);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 2px solid var(--primary-color);
  color: var(--text-color);
  padding: .6rem .1rem;
  font-size: 1rem;
  outline: none;
  transition: border-color .25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--accent-color); }

.submit-btn {
  justify-self: end;                 
  padding: .55rem 1.1rem;
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .12s;
}
.submit-btn:hover { background: rgba(229,255,0,.12); border-color: var(--accent-color); }
.submit-btn:active { transform: translateY(1px); }


.contact-social { margin-top: 1.1rem; display: flex; gap: 1.3rem; justify-content: center; }
.contact-social i { font-size: 1.8rem; color: var(--primary-color); transition: color .2s, transform .2s; }
.contact-social a:hover i { color: var(--accent-color); transform: translateY(-2px) scale(1.06); }


@media (max-width: 900px){
  .contact-grid   { grid-template-columns: 1fr; }
  .contact-card   { max-width: none; }
  .submit-btn     { justify-self: stretch; text-align: center; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}

.contact-left {
  display: flex;
  flex-direction: column;
  align-items: center;                
}

.contact-title {                        
  margin: 0 0 0.85rem;
  text-align: center;
}

.contact-card {
  justify-self: center;              
  max-width: 640px;
}


.contact-social i { font-size: 2.2rem; } 
.contact-social { gap: 1.6rem; }


@media (max-width: 900px){
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { max-width: none; }
  .submit-btn   { justify-self: stretch; text-align: center; }
}