:root{
  --navy: #1a237e;
  --navy-light: #3949ab;
  --navy-dark: #0d1642;
  --black: #000000;
  --white: #ffffff;
  --grey: #9e9e9e;
  --grey-light: #e0e0e0;
  --grey-dark: #616161;
  --green: #2e7d32;
  --green-light: #4caf50;
  --red: #c62828;
  --red-light: #ef5350;
  --accent: #1a237e;
  --accent-glow: rgba(26,35,126,0.15);
  --card: #ffffff;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(-45deg, #eeeeee, #ffffff, #bdbdbd, #e0e0e0);
  background-size: 400% 400%;
  animation: gradient-shift 12s ease-in-out infinite;
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  min-height:100vh;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{
  position:sticky;
  top:0;
  background:rgba(26,35,126,0.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  border-bottom:1px solid rgba(255,255,255,0.2);
  z-index:40;
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;font-weight:700;color:var(--white);text-decoration:none}
.logo-text{margin-left:10px;font-weight:600;color:inherit;font-size:0.95rem}
.main-nav{position:relative}
.nav-toggle{display:none;background:none;border:2px solid transparent;padding:8px 10px;border-radius:10px;color:var(--white)}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-list a{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px;border-radius:8px;transition:all .18s}
.nav-list a:hover{background:rgba(255,255,255,0.15);color:var(--white)}

.hero{padding:64px 0 48px;background:linear-gradient(135deg, rgba(26,35,126,0.05), rgba(0,0,0,0));}
.hero-inner{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero-content{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.hero-photo{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--navy);
  box-shadow:0 8px 24px rgba(26,35,126,0.3);
}
.hero-text{flex:1;min-width:300px}
.hero-title{font-size:clamp(2rem,5vw,3.5rem);margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0.25em;color:var(--navy)}
.accent{color:var(--navy);text-shadow:0 4px 12px rgba(26,35,126,0.2)}
.type-text{font-family: inherit;display:inline-block;min-width:0.5ch}
.cursor{
  display:inline-block;
  margin-left:2px;
  color:var(--navy);
  font-weight:400;
  line-height:1;
  vertical-align:baseline;
  animation:blink-smooth 1.2s ease-in-out infinite;
}

.hero-sub{color:var(--grey-dark);max-width:60ch}

.about{padding:36px 0}
.about h2{margin-top:0;font-size:2rem;color:var(--navy)}
.about p{font-size:1.1rem;line-height:1.7;max-width:70ch;color:var(--grey-dark)}

.cards{display:grid;grid-template-columns:1fr;gap:20px}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  overflow:hidden;
  transition:all 0.3s ease;
  position:relative;
  border:1px solid var(--grey-light);
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--navy);
  transform:scaleX(0);
  transition:transform 0.3s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,0.15);
  border-color:var(--navy);
}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0 0 10px;font-size:1.3rem;color:var(--navy)}
.card p{color:var(--grey-dark)}

.card-1::before{background:var(--navy)}
.card-2::before{background:var(--green)}
.card-3::before{background:var(--red)}
.card-4::before{background:var(--navy)}
.card-5::before{background:var(--green)}
.card-6::before{background:var(--red)}

.card-1:hover{box-shadow:0 12px 24px rgba(26,35,126,0.25)}
.card-2:hover{box-shadow:0 12px 24px rgba(46,125,50,0.25)}
.card-3:hover{box-shadow:0 12px 24px rgba(198,40,40,0.25)}
.card-4:hover{box-shadow:0 12px 24px rgba(26,35,126,0.25)}
.card-5:hover{box-shadow:0 12px 24px rgba(46,125,50,0.25)}
.card-6:hover{box-shadow:0 12px 24px rgba(198,40,40,0.25)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.art-item.placeholder{background:linear-gradient(135deg,#fff5fb,#f5fff6);border-radius:10px;min-height:140px}

.portfolio h2{
  font-size:2.5rem;
  color:var(--navy);
  margin-bottom:10px;
}
.section-sub{color:var(--grey-dark);font-size:1.1rem;margin-bottom:30px}

.contact .socials{display:flex;gap:12px;margin-top:12px}
.contact h2{color:var(--navy)}
.contact p{color:var(--grey-dark)}
.social{padding:8px 12px;border-radius:10px;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 8px 20px rgba(0,0,0,0.08)}

.contact-form{max-width:500px;margin:30px auto 0;}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:6px;color:var(--navy);font-weight:600}
.form-group input,
.form-group textarea{
  width:100%;
  padding:12px;
  border:2px solid var(--grey-light);
  border-radius:8px;
  font-family:inherit;
  font-size:1rem;
  transition:border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--navy);
}
.submit-btn{
  background:var(--navy);
  color:var(--white);
  padding:12px 30px;
  border:none;
  border-radius:8px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
}
.submit-btn:hover{
  background:var(--navy-light);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(26,35,126,0.3);
}
.submit-btn:active{transform:translateY(0)}
.form-status{
  margin-top:15px;
  padding:10px;
  border-radius:6px;
  font-size:0.95rem;
  display:none;
}
.form-status.success{
  display:block;
  background:rgba(46,125,50,0.1);
  color:var(--green);
  border:1px solid var(--green);
}
.ester{
  display:inline-block;
  color:var(--grey-dark);
}
.ester a{
  color:inherit;
  text-decoration:none;
  transition:color 0.3s ease;
}
.form-status.error{
  display:block;
  background:rgba(198,40,40,0.1);
  color:var(--red);
  border:1px solid var(--red);
}

.site-footer{padding:18px 0;margin-top:40px;color:var(--grey-dark)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* 3D Carousel Styles */
.art-gallery{
  padding:60px 0;
  background:linear-gradient(135deg, rgba(26,35,126,0.03), rgba(0,0,0,0.01));
  overflow:hidden;
}
.art-gallery h2{
  font-size:2.5rem;
  color:var(--navy);
  margin-bottom:10px;
  text-align:center;
}
.art-gallery .section-sub{
  text-align:center;
  margin-bottom:50px;
}
.carousel-wrapper{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}
.carousel-container{
  perspective:1200px;
  width:100%;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.carousel{
  position:relative;
  width:280px;
  height:350px;
  transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.carousel-item{
  position:absolute;
  width:280px;
  height:350px;
  left:0;
  top:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 15px 50px rgba(0,0,0,0.3);
  transition:all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  background:var(--white);
  border:3px solid var(--white);
}
.carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.carousel-controls{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:40px;
}
.carousel-btn{
  background:var(--navy);
  color:var(--white);
  border:none;
  width:50px;
  height:50px;
  border-radius:50%;
  font-size:28px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 4px 15px rgba(26,35,126,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.carousel-btn:hover{
  background:var(--navy-light);
  transform:scale(1.1);
  box-shadow:0 6px 20px rgba(26,35,126,0.4);
}
.carousel-btn:active{
  transform:scale(0.95);
}

@media (max-width:768px){
  .carousel-container{height:350px}
  .carousel{
    width:240px;
    height:300px;
  }
  .carousel-item{
    width:240px;
    height:300px;
  }
  .carousel-btn{
    width:45px;
    height:45px;
    font-size:24px;
  }
}

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

@media (min-width:720px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:719px){
  .nav-toggle{display:inline-flex}
  .nav-list{position:absolute;right:8px;top:48px;background:rgba(26,35,126,0.95);backdrop-filter:blur(12px);flex-direction:column;padding:8px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,0.3);display:none}
  .nav-list.show{display:flex}
}

@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

a{color:var(--navy)}
a:hover{color:var(--green)}
@keyframes blink-smooth{
  0%, 49%{opacity:1}
  50%, 100%{opacity:0}
}
@keyframes blink{50%{opacity:0}}
.cursor.blink{animation:blink 1s steps(2,end) infinite}