:root {
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --text:#e2e8f0;
  --brand:#22d3ee; --brand-2:#60a5fa; --ring:rgba(34,211,238,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#0a0f1c);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.7);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(148,163,184,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700;letter-spacing:.3px}
.logo {width:28px;height:28px;border-radius:8px;background:url("images/Rommel\ B.\ Avelino.jpeg") no-repeat center center/cover;box-shadow:0 0 0 3px rgba(34,211,238,.15);}
.nav a{opacity:.9}
.nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.nav li a{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:12px;color:var(--text)}
.nav li a:hover{background:rgba(148,163,184,.12);}
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b1220;font-weight:700;border:none;border-radius:14px;padding:.6rem .9rem;cursor:pointer}
.cta:focus{outline:3px solid var(--ring);outline-offset:2px}

/* Hero */
.hero{padding:88px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.badge{display:inline-flex;gap:.5rem;align-items:center;border:1px solid rgba(148,163,184,.25);color:var(--muted);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}
.title{font-size:clamp(2rem,3.2vw,3.2rem);line-height:1.05;margin:.75rem 0}
.subtitle{color:var(--muted);font-size:1.05rem;max-width:58ch}
.hero-actions{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}
.ghost{border:1px solid rgba(148,163,184,.35);background:transparent;color:var(--text);border-radius:14px;padding:.6rem .9rem; cursor: pointer;}

.hero-card{background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(96,165,250,.05));border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:1rem;box-shadow:0 10px 40px rgba(2,8,23,.4)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:.5rem}
.stat{background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.15);border-radius:16px;padding:1rem;text-align:center}
.stat .num{font-weight:800;font-size:1.6rem}
.stat .lbl{color:var(--muted);font-size:.85rem}

/* Sections */
section{padding:72px 0;border-top:1px solid rgba(148,163,184,.12)}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.section-hd h2{font-size:1.4rem;margin:0}
.section-hd p{color:var(--muted);margin:0}

/* Skills */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.5rem .7rem;border-radius:999px;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.2);font-size:.9rem}

/* Projects */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.18);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card img{width: 100%;height: auto;object-fit: contain;}
.card-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{margin:0;font-size:1.1rem}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.8rem;padding:.35rem .55rem;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.2);border-radius:999px;color:var(--muted)}
.card a.live{margin-top:auto;display:inline-block}

/* Clamp description to 2 lines */
.desc {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

/* Modal Styling */
.modal {display: none; position: fixed; z-index: 1000;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content:center;}

.modal-content {background: #0b1220;margin: 5% auto;padding: 20px; border-radius: 10px; width: 80%;  max-width: 5000px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);animation: fadeIn 0.3s ease-in-out; font-size: 50px;}

.close {float: right; font-size: 22px; font-weight: bold; cursor: pointer;}

@keyframes fadeIn {  from { opacity: 0; transform: scale(0.95); }  to { opacity:1; transform: scale(1); }
}






/* Experience */
.timeline{position:relative}
.timeline:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:rgba(148,163,184,.3)}
.tl-item{position:relative;padding-left:2.2rem;margin:1rem 0}
.tl-item:before{content:"";position:absolute;left:0;top:.35rem;width:20px;height:20px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.tl-item h4{margin:.1rem 0}
.tl-item p{margin:.2rem 0;color:var(--muted)}

/* Contact */
form{display:grid;gap:.8rem;max-width:540px}
input,textarea{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:#0b1220;color:var(--text)}
textarea{min-height:140px;resize:vertical}
.note{color:var(--muted);font-size:.9rem}

footer{padding:32px 0;color:var(--muted)}
  .social-links a {display: block; margin: 8 10px; margin-bottom: 10px; font-size: 18px; color: #ffffff; text-decoration: none;}
  .social-links a:hover {color: #007bff;}
  .contact {color: white;margin-bottom: 30px;}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid {grid-template-columns: 1fr;}
  .grid {grid-template-columns: 1fr 1fr;}
  .modal-content {width: 80%;margin: 20% auto;padding: 15px;font-size: 18px; /* ✅ smaller font for tablet */
  }
}

@media (max-width: 640px) {
  .nav ul {display: none;}
  .grid {grid-template-columns: 1fr;}
  .hero {padding-top: 64px;}
  .modal-content {width: 90%;margin: 30% auto;padding: 12px;font-size: 16px; /* ✅ smaller font for mobile */
  }
}