:root{
  --bg-1:#EEF1F6;
  --bg-2:#E8EBF0;
  --text:#3e4c67;
  --muted:rgba(26,32,44,0.6);
  --card-radius:22px;
  --shadow-light:rgba(255, 255, 255, 0.936);
  --shadow-dark:rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Blinker, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:auto;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:6px}
.site-header{padding:24px 0}
.brand{font-weight:600;color:var(--text);text-decoration:none}
main{flex:1}

.hero{padding:60px 0;text-align:center}
.hero-title{font-size:86px;margin:0;font-weight:600;font-family:'Anta', sans-serif;text-shadow:1px 1px 2px rgba(255,255,255,0.6),-1px -1px 2px rgba(0,0,0,0.2)}
.hero-sub{font-size:20px;margin-top:0px;color:var(--muted);text-shadow:1px 1px 1px rgba(255,255,255,0.6),-0px -0px 1px rgba(0,0,0,0.15)}

.section-meta{font-size:14px;letter-spacing:2px;text-transform:uppercase;opacity:0.6;margin:0;text-align:center;text-shadow:2px 2px 1px rgba(255,255,255,0.6),-0px -0px 1px rgba(0,0,0,0.15)}
.section-title{font-size:32px;margin:2px auto 62px;font-weight:600;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.6),-1px -1px 1px rgba(0,0,0,0.2)}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.card{
  border-radius:12px;
  padding:40px;
  box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 15px var(--shadow-light);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border .3s ease;
  outline: none;
  display:flex;
  flex-direction:column;
  background:var(--bg-1);
  border:1px solid rgba(255,255,255,0.3);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  opacity:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.2) 0 5px, transparent 5px 15px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 5px, transparent 5px 15px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 5px, transparent 5px 15px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.14) 0 5px, transparent 5px 15px);
  background-size:100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position:0 0, 0 100%, 0 0, 100% 0;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  mix-blend-mode:screen;
  transition:opacity 0.4s ease;
}
.card:focus{box-shadow: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);transform:translateY(-6px)}
.card:hover{
  transform:translateY(-4px);
  box-shadow: 12px 12px 28px var(--shadow-dark), -12px -12px 28px var(--shadow-light), inset 0 0 30px rgba(200,180,230,0.4), inset 0 0 60px rgba(255,255,255,0.2);
  border:1px solid rgba(200,180,230,0.7);
}
.card:hover::after{opacity:0.32;animation:edge-spark 1.8s infinite ease-in-out}
.card:has(.card-link:not([href])):hover{
  border:1px solid rgba(255,255,255,0.3);
}
.card:has(.card-link:not([href])):hover,.card:has(.card-link:not([href])):focus{transform:none;box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 15px var(--shadow-light);cursor:default}
.icon-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;background:#d0d3da5d;font-size:30px;color:#3f4752;box-shadow: inset 6px 6px 12px rgba(174,174,204,0.6), inset -6px -6px 12px rgba(255,255,255,0.50);filter:grayscale(100%) contrast(1.2);transition:box-shadow .4s ease, filter .4s ease;position:relative;overflow:visible;background-repeat:no-repeat;background-size:10px 10px;background-position:100% 50%;background-image:none;animation:none}
.icon-circle::after,.icon-circle::before{content:none}
.icon-circle img{width:48px;height:48px;object-fit:contain;filter:grayscale(100%) contrast(1.2);transition:filter .4s ease}
.card:hover .icon-circle{box-shadow: inset 6px 6px 12px rgba(174,174,204,0.6), inset -6px -6px 12px rgba(255,255,255,0.50), 0 0 15px rgba(238, 238, 238, 0.8), 0 0 30px rgba(200,180,230,0.5);filter:grayscale(0%) contrast(1.2) brightness(1.1)}
.card:hover .icon-circle img{filter:grayscale(0%) contrast(1.2) brightness(1.1)}
.card:hover .icon-circle{animation-play-state:paused;background-image:none}
.card:has(.card-link:not([href])):hover .icon-circle{box-shadow: inset 6px 6px 12px rgba(174,174,204,0.6), inset -6px -6px 12px rgba(255,255,255,0.50);filter:grayscale(100%) contrast(1.2)}
.card:has(.card-link:not([href])):hover .icon-circle img{filter:grayscale(100%) contrast(1.2)}
.card:has(.card-link:not([href])) .icon-circle::after,.card:has(.card-link:not([href])) .icon-circle::before{content:none}
.card:has(.card-link:not([href])) .icon-circle{animation-play-state:paused;background-image:none}
.card:has(.card-link:not([href]))::after{opacity:0;animation:none}
.card:has(.card-link:not([href])):focus::after{opacity:0;animation:none}
.card-title{font-size:22px;margin-top:24px;text-align:center;font-weight:600}
.card-desc{font-size:16px;color:var(--muted);line-height:1.6;margin-top:12px;text-align:center}
.card-link{display:block;margin-top:20px;text-align:center;color:var(--text);opacity:0.9;text-decoration:none}
.card-link:not([href]){color:var(--muted);font-style:italic;opacity:0.6;cursor:default}

.contact{margin-top:auto;margin-bottom:10px;padding:20px 0}
.contact-card{max-width:250px;margin:0 auto;background:var(--bg-1);padding:4px 24px;border-radius:20px;box-shadow: 8px 8px 18px var(--shadow-dark), -8px -8px 18px var(--shadow-light);text-align:center}
.contact-card h3{font-size:18px;margin:4px 0}
.contact-card p{font-size:14px;margin:4px 0}
.contact-icon{font-size:36px}
.contact-card a{color:var(--text);text-decoration:underline}

.site-footer{padding:40px 0;text-align:center;color:rgba(26,32,44,0.5);font-size:12px;background:#E8EBF0;position:relative;z-index:10}
.site-footer a{color:#5a7ba8;text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:#3e5c89}

@keyframes comet-orbit{
  0%{transform:rotate(0deg) translateX(38px) rotate(0deg);opacity:1}
  40%{opacity:1}
  50%{opacity:0}
  60%{opacity:0}
  70%{opacity:1}
  100%{transform:rotate(360deg) translateX(38px) rotate(-360deg);opacity:1}
}
@keyframes comet-orbit-b{
  0%{transform:rotate(120deg) translateX(32px) rotate(-120deg);opacity:1}
  35%{opacity:1}
  45%{opacity:0}
  55%{opacity:0}
  65%{opacity:1}
  100%{transform:rotate(480deg) translateX(32px) rotate(-480deg);opacity:1}
}
@keyframes orbit-bg{
  0%{background-position:100% 50%}
  25%{background-position:50% 0%}
  50%{background-position:0% 50%}
  75%{background-position:50% 100%}
  100%{background-position:100% 50%}
}

@keyframes edge-spark{
  0%{opacity:0.08}
  20%{opacity:0.28}
  40%{opacity:0.14}
  60%{opacity:0.32}
  80%{opacity:0.16}
  100%{opacity:0.26}
}

/* Responsive */
@media (max-width:1199px){
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hero{padding:60px 0}
  .hero-title{font-size:40px}
  .projects-grid{grid-template-columns:1fr}
  .card{padding:32px}
}