/* ==== Θέματα ==== */
:root{
  --bg:#f6f8fb; --panel:#ffffff; --text:#0c1220; --muted:#4b5565;
  --accent:#2a6df6; --border:#e3e8ef; --radius:16px; --container:1100px;
  --hero-overlay: rgba(255,255,255,0.46);
  --elev:0 10px 26px #00000022;
}
html[data-theme="dark"]{
  --bg:#0b0f14; --panel:#10161d; --text:#e7eef7; --muted:#b7c3d4;
  --accent:#5bb2ff; --border:#1d2631; --hero-overlay: rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #10223522, transparent), var(--bg);
  line-height:1.6;
}

.container{width:min(100% - 32px, var(--container)); margin-inline:auto}
.section{padding:64px 0}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
.lead{color:var(--muted); font-size:1.125rem; max-width:60ch}
.accent{color:var(--accent)}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ==== Header & Nav ==== */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--bg), transparent 20%);
  border-bottom:1px solid var(--border);
  transition:background .2s ease, transform .3s ease;
}
.site-header.scrolled{
  background: color-mix(in srgb, var(--bg), transparent 8%);
  transform:translateY(-2px);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0;
}
.brand{color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.3px}
.nav{display:flex; align-items:center; gap:20px; margin-left:auto}
.nav a{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
  position:relative; transition:color .2s ease;
}
.nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: currentColor; opacity:0; transform:scaleX(0); transform-origin:left;
  transition:opacity .2s ease, transform .2s ease;
}
.nav a:hover{color:var(--text); background:#00000010}
.nav a:hover::after{opacity:.6; transform:scaleX(1)}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background: color-mix(in srgb, var(--panel), transparent 20%);
  color:var(--text); border:1px solid var(--border); cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.icon-btn:hover{transform:translateY(-2px)}
.nav-icon{margin-left:4px}
.menu-toggle{
  display:none; background:transparent; color:var(--text);
  border:1px solid var(--border); padding:6px 10px; border-radius:10px;
}

/* ==== Hero ==== */
.hero{
  padding:96px 0 72px; position:relative;
  background:
    url('assets/img/hero-bg.png') no-repeat center/cover,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<rect width='100%' height='100%' fill='%23080b10'/>\
<g fill='%2309d34f' fill-opacity='0.25' font-family='monospace' font-size='16'>\
<text x='10' y='30'>0101011011001010</text>\
<text x='40' y='60'>1011001110010110</text>\
<text x='20' y='90'>0010110101100101</text>\
<text x='60' y='120'>1100101001011011</text>\
<text x='30' y='150'>0101101001100110</text>\
<text x='80' y='180'>1010010110100101</text>\
</g></svg>"
    ) left top/auto;
  border-radius:20px; overflow:hidden;
}
.hero::before{content:""; position:absolute; inset:0; background:var(--hero-overlay)}
.hero .container{position:relative; z-index:1}
.hero .cta{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; color:var(--text); padding:10px 14px;
  border:1px solid var(--border); border-radius:12px;
  background: color-mix(in srgb, var(--panel), transparent 10%);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.btn:active{transform:translateY(1px) scale(0.98)}
.btn.primary{
  background:linear-gradient(135deg,#2a6df6,#6cc5ff); border-color:transparent; color:#fff; box-shadow:0 8px 24px #2a6df633
}
.btn.primary:hover{filter:brightness(1.06); transform:translateX(4px)}
.btn.small{padding:8px 12px; font-size:.95rem}

/* ==== Grid / Cards ==== */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.card-media{
  height:160px; background: var(--panel);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-bottom:1px solid var(--border);
}
.card-body{padding:16px; display:grid; gap:10px}
.card-actions{margin-top:4px}

/* Micro-interactions */
.hover-lift:hover{ transform: translateY(-4px); box-shadow: var(--elev); }
.hover-pop{ transition:transform .2s ease, box-shadow .2s ease }
.hover-pop:hover{ transform: translateY(-3px) scale(1.01); box-shadow: var(--elev); }

/* About photo */
.about-grid{display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:center}
.about-photo img{
  width:100%; max-width:320px; border-radius:16px; border:2px solid var(--border);
  box-shadow:0 8px 24px #00000022; transition:transform .25s ease;
}
.about-photo img:hover{ transform: rotate(.5deg) scale(1.01); }

/* ===== Skills ===== */
.skills-grid{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.skill{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:16px; display:grid; gap:10px;
}
.skill-head{display:flex; align-items:center; gap:10px}
.skill-head i{font-size:1.2rem; color:var(--accent)}
.tags{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.tags li{
  font-size:.9rem; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background: color-mix(in srgb, var(--panel), transparent 8%);
}

/* Progress bar */
.meter{
  position:relative; height:10px; border-radius:999px; overflow:hidden;
  background: color-mix(in srgb, var(--panel), #000 6%);
  border:1px solid var(--border);
}
.meter span{
  --val: 70%;
  position:absolute; left:0; top:0; bottom:0; width:var(--val);
  background: linear-gradient(90deg, #2a6df6, #6cc5ff);
  box-shadow: inset 0 0 6px #ffffff55;
  transition:width 1s ease .2s; /* γεμίζει όταν γίνει reveal */
}

/* ===== Timeline ===== */
.timeline{ position:relative; list-style:none; padding:0; margin:22px 0 0; }
.timeline::before{ content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background: color-mix(in srgb, var(--border), #000 15%); }
.t-item{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:14px; margin:0 0 22px; }
.t-icon{ position:relative; width:56px; height:56px; display:grid; place-items:center; }
.t-icon::after{ content:""; position:absolute; left:20px; top:56px; bottom:-22px; width:2px; background: color-mix(in srgb, var(--border), #000 15%); }
.t-item:last-child .t-icon::after{display:none}
.t-icon i{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background: color-mix(in srgb, var(--panel), transparent 10%); color:var(--accent); font-size:1rem; }
.t-content{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; display:grid; gap:10px; }
.t-head{display:grid; gap:2px}
.t-date{font-size:.85rem; color:var(--muted)}
.t-sub{color:var(--muted); margin:0}
.t-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}

/* ===== Testimonials ===== */
.testi-grid{margin-top:18px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.testi{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; display:grid; gap:12px; transition:transform .2s ease, box-shadow .2s ease}
.testi:hover{transform:translateY(-3px); box-shadow:0 10px 26px #00000022}
.testi-head{display:flex; align-items:center; gap:12px}
.avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; letter-spacing:.5px; background:linear-gradient(135deg, #2a6df6, #6cc5ff); color:#fff}
.testi-name{margin:0}
.testi-role{margin:0; color:var(--muted); font-size:.95rem}
blockquote{margin:0; padding-left:12px; border-left:3px solid color-mix(in srgb, var(--accent), #000 10%); color:var(--text)}

/* ====== Gallery (screenshots) ====== */
.gallery{margin-top:14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.shot{position:relative; aspect-ratio:16 / 9; border-radius:14px; border:1px solid var(--border); background:#101722; background-size:cover; background-position:center; overflow:hidden}
.shot figcaption{position:absolute; left:0; right:0; bottom:0; padding:8px 10px; background:#00000066; color:#cfe3ff; font-size:.9rem; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease}
.shot:hover figcaption{opacity:1; transform:translateY(0)}

/* ===== Blog ===== */
.blog-grid{margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.post-card{background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.post-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px #00000022}
.post-cover{display:block; height:140px; background:linear-gradient(135deg,#2a6df633,#6cc5ff33)}
.post-body{padding:14px; display:grid; gap:8px}
.post-title{font-weight:700; text-decoration:none; color:var(--text)}
.post-title:hover{color:var(--accent)}
.post-excerpt{margin:0; color:var(--muted)}
.post-meta{font-size:.9rem; color:var(--muted)}
.badge{display:inline-block; padding:3px 8px; border:1px solid var(--border); border-radius:999px; font-size:.8rem; background: color-mix(in srgb, var(--panel), transparent 8%)}

/* ===== Single Post ===== */
.post-header{display:grid; gap:6px; margin-bottom:14px}
.post-header .meta{color:var(--muted); font-size:.95rem}
.prose{max-width:75ch}
.prose p{margin:0 0 12px}
.prose h2{margin:18px 0 8px}
.prose pre{background:#0f1722; color:#e7eef7; padding:12px; border-radius:12px; overflow:auto; border:1px solid var(--border)}
.prose code{background: color-mix(in srgb, var(--panel), transparent 8%); padding:2px 6px; border-radius:6px; border:1px solid var(--border)}

/* Social */
.social{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:12px}
.social a{display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:500; text-decoration:none; transition:.2s ease}
.social a i{font-size:1.2rem; color:var(--accent); transition:transform .2s ease}
.social a:hover{color:var(--accent); transform:translateX(4px)}
.social a:hover i{ transform: rotate(-6deg) scale(1.05); }

/* Contact form */
.contact-form{margin-top:16px; display:grid; gap:10px; max-width:520px}
.contact-form input,.contact-form textarea{background: color-mix(in srgb, var(--panel), transparent 5%); border:1px solid var(--border); border-radius:12px; padding:10px; color:var(--text); font:inherit}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted)}
.hp-field{position:absolute; left:-5000px; opacity:0}
.alert{margin-top:14px; padding:10px 12px; border-radius:10px; border:1px solid var(--border)}
html[data-theme="dark"] .alert.success{background:#0f1a12; color:#b9ffd0; border-color:#214a2e}
html[data-theme="dark"] .alert.error{background:#1a1010; color:#ffc9c9; border-color:#4a2121}
html[data-theme="light"] .alert.success{background:#eafff2; color:#135b2b; border-color:#bfe9cd}
html[data-theme="light"] .alert.error{background:#ffecec; color:#7a1b1b; border-color:#ffd0d0}

/* ===== On-Scroll Reveal (Animations) ===== */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity:0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
  }
  [data-reveal="fade-up"]{ transform: translateY(16px) }
  [data-reveal="fade-down"]{ transform: translateY(-10px) }
  [data-reveal="fade-left"]{ transform: translateX(16px) }
  [data-reveal="fade-right"]{ transform: translateX(-16px) }
  .reveal-in{
    opacity:1 !important; transform:none !important;
  }
}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:18px 0; color:var(--muted)}

/* ===== Consent banner ===== */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:grid; place-items:center; padding:16px;
  background: transparent;
}
.consent-inner{
  width:min(100% - 24px, 960px);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 14px 40px #00000040;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.consent p{ margin:0; color:var(--text) }
.consent-actions{ display:flex; gap:10px; margin-left:auto }

/* ==== Responsive ==== */
@media (max-width:1100px){
  .skills-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){ .grid{grid-template-columns:1fr} }
@media (max-width:900px){
  .gallery{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .about-grid{grid-template-columns:1fr; text-align:center}
  .about-photo img{margin:20px auto 0}
}
@media (max-width:640px){
  .menu-toggle{display:inline-flex}
  .nav{position:absolute; right:16px; top:56px; background:var(--panel); border:1px solid var(--border); padding:12px; border-radius:12px; display:none; flex-direction:column; gap:8px; min-width:200px}
  .nav.open{display:flex}
  .gallery{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .timeline::before{left:16px}
  .t-item{grid-template-columns:48px 1fr}
  .t-icon::after{left:16px}
  .blog-grid{grid-template-columns:1fr}
  .consent-inner{ flex-direction:column; align-items:flex-start }
  .consent-actions{ width:100%; justify-content:flex-end }
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}