@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Dancing+Script:wght@600;700&display=swap');

:root{
  --dark: #333333;
  --dark-2: #3a3a3a;
  --accent: #3fb8e8;
  --accent-dark: #1ba0e0;
  --text: #4a4a4a;
  --text-light: #8a8a8a;
  --bg-light: #f2f2f2;
  --orange-1: #ef6c4d;
  --orange-2: #e2492b;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-script: 'Dancing Script', cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  line-height:1.7;
  background:#fff;
  padding-top:64px;
}
h1,h2,h3,h4{ font-family:var(--font-heading); margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* Chip title used across sections */
.chip{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:2.1rem;
  letter-spacing:1px;
  padding:14px 30px;
  margin-bottom:36px;
}

/* Top navigation */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--dark-2);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
}
.navbar .logo{
  font-family:var(--font-script);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
}
.navbar .nav-toggle{ display:none; }
.nav-links{
  display:flex; gap:28px;
}
.nav-links a{
  color:#fff;
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.5px;
  font-weight:500;
  padding:6px 2px;
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--accent); }

/* HERO */
.hero{
  min-height:calc(100vh - 64px);
  background:linear-gradient(180deg, var(--accent-dark), #1c8fce);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  position:relative;
  padding:60px 20px;
}
.hero-photo{
  width:150px; height:150px; border-radius:50%;
  object-fit:cover;
  border:6px solid rgba(255,255,255,.35);
  margin:0 auto 30px;
  background:#fff;
}
.hero h1{
  font-size:3rem; font-weight:700; letter-spacing:1px;
  margin-bottom:18px;
}
.hero p{
  font-size:1.2rem; font-weight:300; max-width:720px; margin:0 auto;
  opacity:.95;
}
.hero-scroll{
  margin-top:40px;
  width:52px; height:52px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  margin-left:auto; margin-right:auto;
  color:#fff; font-size:1.2rem;
  animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{ transform:translateY(0); }
  40%{ transform:translateY(8px); }
  60%{ transform:translateY(4px); }
}

/* Sections generic */
.section{ padding:90px 0; }
.section.alt{ background:var(--bg-light); }
.section-head{ text-align:center; }
.section-head .sub{
  color:var(--text-light);
  font-size:1.1rem;
  margin-top:-10px;
  margin-bottom:50px;
}

/* ABOUT */
.about-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start;
}
.about-photo img{ width:100%; }
.about-badge{
  background:var(--dark-2); color:#fff;
  font-size:1.05rem; font-weight:500;
  padding:22px 26px; margin-bottom:34px;
}
.about-text p{ margin:0 0 22px; font-size:1.02rem; }
.about-text strong{ color:var(--dark); }
.signature{ max-width:220px; margin:20px 0 30px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--dark-2); color:#fff;
  font-family:var(--font-heading);
  font-size:.85rem; letter-spacing:1px;
  padding:16px 30px; border:none; cursor:pointer;
  transition:background .2s;
}
.btn:hover{ background:var(--accent); }

/* STATS */
.stats{
  position:relative;
  background-size:cover; background-position:center;
  color:#fff; text-align:center;
  padding:80px 20px;
}
.stats::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, var(--orange-1), var(--orange-2));
  opacity:.92; z-index:0;
}
.stats .container{ position:relative; z-index:1; display:flex; justify-content:center; gap:80px; flex-wrap:wrap; }
.stat-item{
  width:190px; height:190px; border-radius:50%;
  border:3px solid rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.stat-item .num{ font-size:2.6rem; font-weight:700; font-family:var(--font-heading); }
.stat-item .label{ font-size:.95rem; margin-top:6px; }

/* SKILLS */
.skills-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid #e6e6e6;
}
.skill-item{ display:flex; align-items:stretch; border:1px solid #e6e6e6; }
.skill-name{
  flex:1; background:var(--dark-2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-heading); font-size:.95rem;
  letter-spacing:.5px; padding:20px; font-weight:500;
}
.skill-ring-wrap{
  width:160px; flex-shrink:0; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.skill-ring{ position:relative; width:90px; height:90px; }
.skill-ring svg{ transform:rotate(-90deg); }
.skill-ring .bg{ fill:none; stroke:#e9e9e9; stroke-width:6; }
.skill-ring .fg{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.22,.9,.3,1); }
.skill-ring .pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:600; font-size:1.1rem; color:var(--dark);
}

/* EXPERIENCE TIMELINE */
.timeline{ position:relative; max-width:900px; margin:0 auto; }
.timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:#dedede; transform:translateX(-50%);
}
.tl-item{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px;
  margin-bottom:56px;
}
.tl-item.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s ease, transform .7s ease;
}
.tl-item.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .tl-item.reveal{ transition:none; opacity:1; transform:none; }
}
.tl-dot{
  position:absolute; left:50%; top:0; transform:translate(-50%,-4px);
  width:34px; height:34px; border-radius:50%;
  background:var(--dark-2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; z-index:2;
}
.tl-item.current .tl-dot{ background:var(--accent); }
.tl-content{ text-align:right; }
.tl-date{
  background:var(--accent); color:#fff; font-family:var(--font-heading);
  font-weight:600; font-size:.85rem; letter-spacing:.5px;
  padding:10px 18px; display:inline-block; margin-top:4px; align-self:start;
}
.tl-item .tl-date-wrap{ display:flex; align-items:flex-start; }
.tl-item:nth-child(odd) .tl-content{ order:1; }
.tl-item:nth-child(odd) .tl-date-wrap{ order:2; justify-content:flex-start; }
.tl-item:nth-child(even) .tl-content{ order:2; text-align:left; }
.tl-item:nth-child(even) .tl-date-wrap{ order:1; justify-content:flex-end; }
.tl-company{ color:var(--accent); font-family:var(--font-heading); font-weight:600; font-size:1.05rem; }
.tl-role{ color:var(--text-light); font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; margin:4px 0 10px; }
.tl-bullets li{ font-size:.95rem; margin-bottom:8px; }

/* EDUCATION */
.edu-list{ max-width:1000px; margin:0 auto; }
.edu-row{
  display:grid; grid-template-columns:1fr 200px 220px; align-items:stretch;
  margin-bottom:18px; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.edu-main{ background:#fff; padding:22px 26px; }
.edu-title{ font-family:var(--font-heading); font-size:1.05rem; font-weight:600; color:var(--dark); }
.edu-inst{ color:var(--text-light); font-size:.85rem; margin-top:4px; }
.edu-date{
  background:var(--dark-2); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:600; font-size:.95rem;
}
.edu-logo{ background:#fff; display:flex; align-items:center; justify-content:center; padding:14px; }
.edu-logo img{ max-height:60px; width:auto; }

/* HOBBIES */
.hobbies-grid{ display:grid; grid-template-columns:1fr 1fr; }
.hobby-item{
  position:relative; height:420px; overflow:hidden; display:block;
  background-size:cover; background-position:center;
}
.hobby-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hobby-label{
  position:absolute; left:30px; bottom:30px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff;
  font-family:var(--font-heading); font-weight:600; letter-spacing:.5px;
  padding:12px 20px; font-size:.95rem;
}
.hobby-item::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.15); }

/* SOCIAL */
.social-icons{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.social-icons a{
  width:56px; height:56px; border-radius:50%;
  background:var(--dark-2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; transition:background .2s, transform .2s;
}
.social-icons a:hover{ background:var(--accent); transform:translateY(-3px); }

/* CONTACT */
.contact-map{ width:100%; height:480px; border:0; filter:grayscale(15%); }
.contact-info{ text-align:center; margin-top:26px; color:var(--text-light); }

footer{
  background:var(--dark-2); color:#bbb; text-align:center;
  padding:26px; font-size:.85rem;
}

/* Responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:1fr; }
  .tl-content, .tl-item:nth-child(even) .tl-content{ text-align:left !important; }
  .timeline::before{ left:16px; }
  .tl-dot{ left:16px; }
  .tl-date-wrap, .tl-item:nth-child(odd) .tl-date-wrap, .tl-item:nth-child(even) .tl-date-wrap{ justify-content:flex-start !important; order:1 !important; padding-left:50px; }
  .tl-content{ order:2 !important; padding-left:50px; }
  .edu-row{ grid-template-columns:1fr; }
  .hobbies-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.1rem; }
  .nav-links{ display:none; }
}