@font-face {
  font-family: 'OpenDyslexic';
  src: url('fonts/OpenDyslexic3-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('fonts/OpenDyslexic3-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary:#2563eb;
  --secondary:#06b6d4;
  --dark:#020617;

  /* Updated glass for colorful background */
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.1);
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  scroll-behavior:smooth;
}

/* ✅ NEW BACKGROUND */
body {
  margin:0;
    font-family: 'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent),
    linear-gradient(125.83deg, #392DD1 0%, #A91B78 100%);

  color:white;
  overflow-x:hidden;
}

/* HERO */
header {
  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: flex-start;   /* 🔥 CHANGE THIS */

  padding-top: clamp(40px, 8vh, 80px); /* 🔥 adds controlled top space */
  padding-bottom: 40px;

  text-align: center;
}

header img{
  width:150px;
  margin-bottom:20px;
  filter:drop-shadow(0 0 40px rgba(255,255,255,0.2));
}

/* LOGO */
.logo-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* 🔥 ADD THIS */

  font-size:4rem;
  letter-spacing:2px;
  background:linear-gradient(135deg,#60a5fa,#22d3ee);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  animation:glowText 3s ease-in-out infinite alternate;
}

.logo-text::before,
.logo-text::after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  opacity:0.4;
}

.logo-text::before{
  color:#60a5fa;
  animation:chromaShift 4s infinite;
}

.logo-text::after{
  color:#22d3ee;
  animation:chromaShift 4s infinite reverse;
}

@keyframes glowText{
  0%{
    text-shadow:
      0 0 10px rgba(255,255,255,0.3),
      0 0 20px rgba(96,165,250,0.4);
  }
  100%{
    text-shadow:
      0 0 30px rgba(255,255,255,0.6),
      0 0 60px rgba(96,165,250,0.8),
      0 0 90px rgba(168,85,247,0.6);
  }
}

@keyframes chromaShift{
  0%,100%{transform:translate(0);}
  50%{transform:translate(3px,0);}
}

/* TEXT */
.hero-text{
  max-width:520px;
  padding:0 10px;
  margin:12px auto;
  font-size:1.2rem;
  line-height:1.7;
  color:rgba(255,255,255,0.9);
}

/* BUTTON */
.btn{
  margin-top:30px;
  padding:14px 26px;
  border-radius:12px;

  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:white;

  text-decoration:none;
  font-weight:600;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  position:relative;
  z-index:10;
  cursor:pointer;

  box-shadow:0 8px 30px rgba(0,0,0,0.4);
}

.btn:hover{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 15px 50px rgba(0,0,0,0.6);
}

/* SECTIONS */
section{
  max-width:1100px;
  margin:auto;
  padding:120px 20px;
}

/* GRID */
.about-grid{
  display:grid;
  gap:60px;
  align-items:center;
}

.grid{
  display:grid;
  gap:25px;
}

@media(min-width:768px){
  .about-grid{grid-template-columns:1fr 1fr;}
  .grid{grid-template-columns:1fr 1fr;}
}

/* CARDS */
.card{
  background:var(--glass);
  padding:30px;
  border-radius:20px;
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  transition:all .35s cubic-bezier(.22,1,.36,1);
  min-width:0;
}

.card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(37,99,235,0.25),
    0 0 40px rgba(6,182,212,0.15);
  cursor:pointer;
}

.card:hover h3{
  color:var(--secondary);
}

.card p{
  word-break:break-word;
  overflow-wrap:anywhere;
}

.card h3 {
  white-space: nowrap;
  font-size: clamp(1rem, 4vw, 1.2rem);
  letter-spacing: -0.01em;
}

/* HERO IMAGE */
.hero-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:20px;
}

.hero-image{
  max-width:360px;
  max-height:500px;
  width:100%;
  height:auto;
  object-fit:contain;

  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
  animation:floatBreathe 6s ease-in-out infinite;
}

@keyframes floatBreathe{
  50%{transform:translateY(-20px) scale(1.04);}
}

/* CTA */
.cta-section {
  text-align: center;
}

.center-wrapper{
  display:flex;
  justify-content:center;
}

.center-card{
  max-width:600px;
  width:100%;
  margin:0 auto;
  text-align:center;
  background:var(--glass);
  padding:30px;
  border-radius:20px;
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
}

.contact-text{
  margin-bottom:50px;
  line-height:1.6;
  color:rgba(255,255,255,0.85);
}

/* SCROLL */
.fade{
  opacity:0;
  transform:translateY(50px);
  transition:1.2s cubic-bezier(.22,1,.36,1);
}

.fade.visible{
  opacity:1;
  transform:translateY(0);
}

/* HEADERS */
h2{
  text-align:left;
  margin-bottom:35px;
  color:white;
}

.cta-section h2{
  text-align:center;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 40px;
  opacity: .7;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

footer a{
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  transition:0.3s;
}

footer a:hover{
  color:white;
}

/* MODAL */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  z-index:999;
}

.modal-content{
  background:#020617;
  margin:10% auto;
  padding:30px;
  border-radius:20px;
  max-width:600px;
  border:1px solid var(--border);
}

.modal-content p,
.modal-content h1,
.modal-content h2,
.modal-content h3 {
  display: inline-block;
  text-align: left;
}

/* CLOSE */
.close{
  float:right;
  font-size:24px;
  cursor:pointer;
  opacity:0.7;
}

.close:hover{
  opacity:1;
}

/* SELECTION */
::selection {
  background: #022c22;
  color: #4ade80;
}

::-moz-selection {
  background: #022c22;
  color: #4ade80;
}

/* HERO MODE */
.hero-mode {
  animation: heroPulse 1s ease-in-out;
}

@keyframes heroPulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

.hero-mode .hero-image {
  filter:
    drop-shadow(0 0 40px #60a5fa)
    drop-shadow(0 0 80px #22d3ee);
  transform: scale(1.05);
}

/* HERO MESSAGE */
.hero-message {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);

  background: linear-gradient(135deg,#2563eb,#06b6d4);
  padding: 12px 20px;
  border-radius: 12px;

  font-weight: 600;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 9999;

  /* 🔥 FIXES */
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(0.9rem, 3vw, 1rem);
}

/* 404 PAGE */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  min-height: 100svh;

  padding: clamp(40px, 8vh, 80px) 20px;
}

.error-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.error-image {
  max-width:260px;
  margin-bottom:20px;
  animation:floatBreathe 6s ease-in-out infinite;
}

.error-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 10px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.02em;
}

.error-subtitle {
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
}

.error-nerd {
  font-family:monospace;
  opacity:0.7;
  margin-bottom:30px;
}

.error-actions {
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
}

/* MOBILE */
@media (max-width:768px){

  .about-grid{
    grid-template-columns:1fr;
  }

  .card{
    padding:20px;
  }

  .hero-image{
    max-width:220px;
    max-height:400px;
  }

  .hero-wrapper{
    margin-top:10px;
  }

}