/* ZabiTech — FULL 1.1.1.1 COLORS | Cloudflare Inspired Light Theme */
:root{
  --bg:#ffffff;
  --bg2:#f8fafc;
  --bg3:#f1f5f9;
  --text:#0f172a;
  --muted:#64748b;
  --muted2:#94a3b8;
  --border:#e2e8f0;
  --border2:#cbd5e1;
  --black:#0f172a;
  --cf-orange:#f6821f;
  --cf-orange-soft:#fff7ed;
  --cf-orange-border:#fed7aa;
  --cf-blue:#0051c3;
  --cf-blue-soft:#eff6ff;
  --cf-blue-border:#bfdbfe;
  --cf-green:#00ac47;
  --radius:16px;
  --radius-lg:22px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(100% - 32px, var(--max)); margin-inline:auto}
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--cf-orange), var(--cf-blue)); z-index:100}
#bg-particles, .mouse-glow, .cursor-dot, .cursor-ring{display:none}

/* Nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--border)}
.nav-inner{width:min(100% - 32px, var(--max)); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:800; letter-spacing:-0.03em; font-size:15px; display:flex; align-items:center; gap:8px}
.logo:before{content:''; width:8px; height:8px; background:var(--cf-orange); border-radius:50%; box-shadow:0 0 0 4px var(--cf-orange-soft)}
nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; align-items:center}
nav a{padding:8px 14px; border-radius:10px; color:var(--muted); transition:.15s; font-weight:500; font-size:13.5px}
nav a:hover{color:var(--text); background:var(--bg2)}
nav a.active{color:var(--text); background:var(--bg2); font-weight:600}
.nav-toggle{display:none; background:none; border:0; width:40px; height:40px; position:relative; cursor:pointer}
.nav-toggle span{position:absolute; left:10px; right:10px; height:2px; background:var(--black); transition:.3s; border-radius:2px}
.nav-toggle span:first-child{top:14px}.nav-toggle span:last-child{top:24px}
@media (max-width:880px){
  .nav-toggle{display:block}
  nav ul{position:absolute; top:62px; right:16px; flex-direction:column; background:white; border:1px solid var(--border); padding:8px; border-radius:16px; display:none; min-width:200px; box-shadow:0 10px 40px rgba(0,0,0,.12)}
  nav ul.open{display:flex}
}

/* Hero - full 1.1.1.1 coloring */
.hero{position:relative; padding:90px 0 80px; border-bottom:1px solid var(--border); overflow:hidden;
  background:
    radial-gradient(600px 400px at 85% -10%, var(--cf-orange-soft) 0%, transparent 70%),
    radial-gradient(700px 500px at -10% 10%, var(--cf-blue-soft) 0%, transparent 60%),
    var(--bg);
}
.hero-grid{width:min(100% - 32px, var(--max)); margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; margin-bottom:16px; padding:6px 12px; border-radius:100px; background:white; border:1px solid var(--border); box-shadow:0 1px 2px rgba(0,0,0,.04)}
.eyebrow:before{content:''; width:6px; height:6px; background:var(--cf-green); border-radius:50%; box-shadow:0 0 0 3px #dcfce7; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
h1{font-size:clamp(3rem,6vw,4.6rem); line-height:.92; letter-spacing:-0.05em; margin:0 0 14px; font-weight:800}
h1 span{color:var(--cf-blue)}
.titles{font-size:clamp(1.05rem,2vw,1.25rem); color:var(--muted); min-height:1.6em; display:flex; align-items:center; gap:6px; font-weight:500}
.titles #typewriter{color:var(--text); font-weight:600}
.titles #typewriter.orange{color:var(--cf-orange)}
.caret{display:inline-block; width:2px; height:1.1em; background:var(--cf-blue); animation:blink 1s step-end infinite; margin-left:3px}
@keyframes blink{50%{opacity:0}}
.lead{max-width:56ch; color:var(--muted); margin:20px 0 28px; font-size:15.5px; line-height:1.7}
.lead strong{color:var(--text); font-weight:600}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px; border:1px solid var(--border); background:white; color:var(--text); font-weight:600; font-size:14px; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); border-color:var(--border2)}
.btn.primary{background:var(--black); color:white; border-color:var(--black)}
.btn.primary:hover{background:#1e293b}
.btn.orange{background:var(--cf-orange); color:white; border-color:var(--cf-orange); box-shadow:0 4px 14px rgba(246,130,31,.3)}
.btn.orange:hover{background:#e6730f; transform:translateY(-1px)}
.btn.blue{background:var(--cf-blue); color:white; border-color:var(--cf-blue); box-shadow:0 4px 14px rgba(0,81,195,.25)}
.btn.blue:hover{background:#00409e}
.btn.subtle{background:white}
.btn.small{padding:8px 14px; font-size:13px; border-radius:9px}
.hero-meta{display:flex; gap:28px; margin-top:32px; padding-top:22px; border-top:1px solid var(--border); flex-wrap:wrap}
.hero-meta div{font-size:13px}
.hero-meta strong{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); font-weight:700; margin-bottom:4px}
.hero-visual{display:grid; place-items:center}
.avatar-wrap{position:relative; width:min(340px,82vw); aspect-ratio:1}
.avatar-wrap:before{content:''; position:absolute; inset:-20px; background:conic-gradient(from 0deg, var(--cf-orange-soft), var(--cf-blue-soft), var(--cf-orange-soft)); border-radius:32px; filter:blur(20px); opacity:.8; z-index:-1}
.avatar{position:relative; width:100%; height:100%; border-radius:28px; overflow:hidden; background:white; border:1px solid var(--border); box-shadow:0 20px 60px rgba(15,23,42,.12), 0 0 0 1px rgba(255,255,255,.8) inset}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar-fallback{display:none; place-items:center; width:100%; height:100%; font-weight:800; font-size:3rem; background:linear-gradient(135deg, var(--cf-orange-soft), var(--cf-blue-soft)); color:var(--black)}

/* Sections */
.section{padding:80px 0; border-bottom:1px solid var(--border); position:relative}
.section:nth-child(even){background:var(--bg2)}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 28px; letter-spacing:-0.03em; font-weight:800; display:flex; align-items:center; gap:12px}
.section-title:before{content:''; width:4px; height:24px; background:linear-gradient(to bottom, var(--cf-orange), var(--cf-blue)); border-radius:2px; display:inline-block}

/* Cards */
.card{background:white; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03); transition:.2s}
.card:hover{box-shadow:0 8px 24px rgba(15,23,42,.06); border-color:var(--border2)}
.glass{background:white}

/* About */
.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:18px}
.about-grid .card{padding:26px}
.info-list{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:0}
.info-list li{display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding:12px 0; font-size:13.5px}
.info-list li:last-child{border:0}
.info-list span{color:var(--muted)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.stat{border-radius:14px; padding:16px; text-align:center; border:1px solid var(--border); background:white}
.stat:nth-child(1){background:var(--cf-orange-soft); border-color:var(--cf-orange-border)}
.stat:nth-child(2){background:var(--cf-blue-soft); border-color:var(--cf-blue-border)}
.stat:nth-child(3){background:var(--bg2)}
.stat-num{font-size:1.7rem; font-weight:800; letter-spacing:-0.02em}
.stat:nth-child(1) .stat-num{color:var(--cf-orange)}
.stat:nth-child(2) .stat-num{color:var(--cf-blue)}
.stat-label{color:var(--muted); font-size:10px; margin-top:4px; text-transform:uppercase; letter-spacing:.08em; font-weight:700}

/* Timeline */
.timeline{display:grid; gap:14px}
.timeline-item{display:grid; grid-template-columns:160px 1fr; gap:18px; padding:22px; background:white; border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; overflow:hidden}
.timeline-item:before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border)}
.timeline-item:nth-child(1):before{background:var(--cf-orange)}
.timeline-item:nth-child(2):before{background:var(--cf-blue)}
.timeline-item:nth-child(3):before{background:var(--black)}
.period{font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.period:before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.timeline h3{font-size:15px; font-weight:700}
.timeline ul{list-style:none; display:grid; gap:6px; padding:0; margin:8px 0 0}
.timeline li{font-size:13.5px; color:var(--muted); position:relative; padding-left:16px}
.timeline li:before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--border2); border-radius:50%}
.achieve{color:var(--muted); margin-top:12px; font-size:12px; padding:6px 10px; border-radius:8px; display:inline-flex; background:var(--bg2); border:1px solid var(--border); font-weight:500}

/* Education */
.edu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.edu-card{padding:22px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.edu-icon{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:1.2rem; border:1px solid var(--border)}
.edu-card:nth-child(1) .edu-icon{background:var(--cf-orange-soft); border-color:var(--cf-orange-border)}
.edu-card:nth-child(2) .edu-icon{background:var(--cf-blue-soft); border-color:var(--cf-blue-border)}
.edu-card .meta{color:var(--muted); margin-top:2px; font-size:12.5px}

/* Skills - full color */
.skills-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.subhead{margin:0 0 14px; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.skill-cards{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.skill{background:white; border:1px solid var(--border); border-radius:14px; padding:16px 10px; text-align:center; transition:.15s}
.skill:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06)}
.skill svg{width:52px; height:52px; transform:rotate(-90deg)}
.skill .bg{fill:none; stroke:#f1f5f9; stroke-width:4}
.skill .fg{fill:none; stroke-width:4; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.2s ease; stroke-linecap:round}
.skill:nth-child(1) .fg{stroke:var(--cf-orange)}
.skill:nth-child(2) .fg{stroke:var(--cf-blue)}
.skill:nth-child(3) .fg{stroke:#f59e0b}
.skill:nth-child(4) .fg{stroke:#0ea5e9}
.skill:nth-child(5) .fg{stroke:var(--black)}
.skill span{display:block; margin-top:10px; font-weight:600; font-size:12.5px}
.tools{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:8px 12px; border-radius:9px; background:white; border:1px solid var(--border); color:var(--text); font-weight:500; font-size:12.5px; transition:.15s}
.chip:hover{border-color:var(--cf-blue-border); background:var(--cf-blue-soft); color:var(--cf-blue)}
.chip.orange:hover{border-color:var(--cf-orange-border); background:var(--cf-orange-soft); color:var(--cf-orange)}

/* Projects - full color */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.project{overflow:hidden; display:grid; grid-template-rows:auto 1fr; border-radius:var(--radius-lg); border:1px solid var(--border)}
.project:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(15,23,42,.08)}
.project-media{aspect-ratio:16/9; display:grid; place-items:center; border-bottom:1px solid var(--border); position:relative; overflow:hidden}
.project:nth-child(1) .project-media{background:linear-gradient(135deg, var(--cf-orange-soft), #fef3c7)}
.project:nth-child(2) .project-media{background:linear-gradient(135deg, var(--cf-blue-soft), #dbeafe)}
.project:nth-child(3) .project-media{background:linear-gradient(135deg, #f0fdf4, #dcfce7)}
.project:nth-child(4) .project-media{background:linear-gradient(135deg, #f8fafc, #e2e8f0)}
.ph{font-weight:800; letter-spacing:-0.02em; color:var(--text); font-size:1.15rem}
.project-body{padding:20px; background:white}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0}
.tags span{font-size:11px; padding:5px 9px; border-radius:7px; font-weight:600; border:1px solid var(--border)}
.tags span:nth-child(1){background:var(--cf-orange-soft); color:var(--cf-orange); border-color:var(--cf-orange-border)}
.tags span:nth-child(2){background:var(--cf-blue-soft); color:var(--cf-blue); border-color:var(--cf-blue-border)}
.tags span:nth-child(3){background:var(--bg2); color:var(--muted)}
.project-actions{display:flex; gap:8px; margin-top:14px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px}
.contact-cards{display:grid; gap:10px}
.contact-card{padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:white; border:1px solid var(--border); border-radius:12px; transition:.15s}
.contact-card:hover{border-color:var(--cf-blue-border); background:var(--cf-blue-soft)}
.contact-card:nth-child(2):hover{border-color:var(--cf-orange-border); background:var(--cf-orange-soft)}
.contact-card strong{font-size:13px}
.contact-card span{color:var(--muted); font-size:12.5px; word-break:break-all}
.form{padding:22px; background:white}
.form-row{display:grid; gap:6px; margin-bottom:14px}
label{font-weight:700; color:var(--text); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
input,textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:white; color:var(--text); outline:none; transition:.15s; font-family:Inter,sans-serif; font-size:14px}
input:focus,textarea:focus{border-color:var(--cf-blue); box-shadow:0 0 0 3px var(--cf-blue-soft)}
.error{color:#ef4444; min-height:1em; font-size:11px}
.form-status{margin-top:10px; color:var(--cf-green); font-size:13px; font-weight:500}

/* Footer */
.footer{padding:36px 0; border-top:1px solid var(--border); background:white}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.social{display:flex; gap:18px; flex-wrap:wrap}
.social a{color:var(--muted); font-weight:500}
.social a:hover{color:var(--cf-blue)}

.to-top{position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:white; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.08); opacity:0; pointer-events:none; transition:.2s; z-index:40; cursor:pointer; font-weight:700}
.to-top.show{opacity:1; pointer-events:auto}
.to-top:hover{background:var(--black); color:white; border-color:var(--black)}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .about-grid,.skills-grid,.contact-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .edu-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .skill-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .skill-cards{grid-template-columns:repeat(2,1fr)}
  .hero{padding:60px 0 56px}
  .section{padding:56px 0}
}


/* FIXED - Second pic in place of ZU - 1.1.1.1 style */
.hero-photo-card{
  position:relative;
  width:min(380px, 85vw);
  aspect-ratio:4/5;
  border-radius:28px;
  overflow:hidden;
  background:white;
  border:1px solid #e2e8f0;
  box-shadow:0 20px 60px rgba(15,23,42,.15), 0 0 0 1px rgba(255,255,255,.8) inset;
}
.hero-photo-card img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
}
.hero-photo-badge{
  position:absolute; bottom:14px; left:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border:1px solid #e2e8f0;
  padding:8px 12px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; display:flex; align-items:center; gap:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.hero-photo-badge .dot{
  width:6px; height:6px; background:#f6821f;
  border-radius:50%; box-shadow:0 0 0 3px #fff7ed;
}