*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;
  background:#0a0a0a;
  color:#fff;
  overflow-x:hidden;
  font-weight:300;
  cursor:none;
}

/* ════════ CANVAS LAYERS ════════ */
#canvas-bg{position:fixed;top:0;left:0;z-index:1;pointer-events:none;}
#canvas-shapes{position:fixed;top:0;left:0;z-index:2;pointer-events:none;}
#canvas-cursor{position:fixed;top:0;left:0;z-index:3;pointer-events:none;}

/* ════════ ADVANCED CURSOR WITH TRAIL ════════ */
#cursor-main{
  position:fixed;width:14px;height:14px;background:#E8221A;
  border-radius:50%;z-index:9999;pointer-events:none;
  box-shadow:0 0 25px #E8221A,inset 0 0 10px rgba(255,100,100,0.5);
}
#cursor-ring{
  position:fixed;width:55px;height:55px;border:2px solid #E8221A;
  border-radius:50%;z-index:9998;pointer-events:none;
  opacity:0.5;box-shadow:0 0 30px rgba(232,34,26,0.4);
}
body.hover-element #cursor-main{width:30px;height:30px;box-shadow:0 0 50px #E8221A;}
body.hover-element #cursor-ring{width:90px;height:90px;opacity:1;box-shadow:0 0 60px rgba(232,34,26,0.6);}

/* ════════ PROGRESS ════════ */
#prog{position:fixed;top:0;left:0;height:4px;background:#E8221A;width:0%;z-index:999;box-shadow:0 0 20px #E8221A;}

/* ════════ NAV ════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:70px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 80px;background:transparent;transition:all 0.5s;
}
nav.active{
  background:rgba(10,10,10,0.98);backdrop-filter:blur(30px);
  border-bottom:2px solid rgba(232,34,26,0.2);
}
.nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;font-weight:700;
  color:#E8221A;text-decoration:none;
  animation:pulse-logo 2.5s ease-in-out infinite;
  display:flex;align-items:center;gap:12px;
}
.nav-logo .logo-svg{
  height:52px;width:auto;
  filter:drop-shadow(0 0 15px rgba(232,34,26,0.4));
  transition:filter 0.3s;
}
.nav-logo:hover .logo-svg{
  filter:drop-shadow(0 0 25px rgba(232,34,26,0.8));
}
@keyframes pulse-logo{
  0%,100%{text-shadow:0 0 15px rgba(232,34,26,0.4);}
  50%{text-shadow:0 0 30px rgba(232,34,26,0.8);}
}
.nav-links{display:flex;gap:50px;align-items:center;}
.nav-link{color:rgba(255,255,255,0.5);text-decoration:none;font-size:11px;
  text-transform:uppercase;letter-spacing:2.5px;transition:all 0.3s;
  position:relative;cursor:none;}
.nav-link::before{content:'';position:absolute;bottom:-8px;left:0;
  width:0;height:2px;background:#E8221A;transition:width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow:0 0 15px #E8221A;}
.nav-link:hover{color:#E8221A;}
.nav-link:hover::before{width:100%;}

/* ════════ FULLSCREEN TEXT REVEAL ════════ */
.fullscreen-text{
  position:relative;min-height:120vh;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
  padding-top:70px;
}
.text-container{
  position:relative;z-index:10;text-align:center;max-width:1000px;
  padding:100px 60px;
}
.reveal-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,10vw,120px);
  font-weight:300;line-height:1.1;
  letter-spacing:-2px;margin:40px 0;
  color:rgba(255,255,255,0.1);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-text.visible{
  color:#fff;text-shadow:0 0 30px rgba(232,34,26,0.3);
}
.reveal-text em{color:#E8221A;font-style:italic;display:inline-block;}

/* ════════ NOTHING SHOW FIRST ════════ */
.nothing-show{
  position:relative;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:70px 60px;overflow:hidden;
  background:linear-gradient(135deg,#0a0a0a,#1a0500);
}
.nothing-content{
  position:relative;z-index:10;text-align:center;max-width:800px;
}
.nothing-label{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;text-transform:uppercase;letter-spacing:4px;
  color:#E8221A;margin-bottom:40px;opacity:0;
  animation:fade-in-up 1s ease-out 0.2s forwards;
}
.nothing-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,12vw,140px);
  font-weight:300;line-height:0.85;
  letter-spacing:-3px;margin-bottom:30px;
  opacity:0;animation:fade-in-up 1s ease-out 0.4s forwards;
  background:linear-gradient(135deg,#fff,#E8221A);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nothing-subtitle{
  font-size:18px;color:rgba(255,255,255,0.75);
  line-height:1.9;opacity:0;
  animation:fade-in-up 1s ease-out 0.6s forwards;
}
@keyframes fade-in-up{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}

/* ════════ CARDS SLIDING IN ════════ */
.cards-section{
  padding:150px 80px;position:relative;z-index:5;
}
.cards-container{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2px;max-width:1400px;margin:0 auto;
}
.card-item{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(232,34,26,0.2);
  padding:50px 40px;backdrop-filter:blur(20px);
  cursor:none;position:relative;overflow:hidden;
  opacity:0;transform:translateX(-100px);
  animation:slide-in-left 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.card-item:nth-child(even){
  transform:translateX(100px);animation-name:slide-in-right;
}
@keyframes slide-in-left{
  from{opacity:0;transform:translateX(-100px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes slide-in-right{
  from{opacity:0;transform:translateX(100px);}
  to{opacity:1;transform:translateX(0);}
}
.card-item:nth-child(1){animation-delay:0.1s;}
.card-item:nth-child(2){animation-delay:0.2s;}
.card-item:nth-child(3){animation-delay:0.3s;}
.card-item:nth-child(4){animation-delay:0.4s;}
.card-item:nth-child(5){animation-delay:0.5s;}
.card-item:nth-child(6){animation-delay:0.6s;}

.card-item::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(232,34,26,0.3),transparent);
  transition:left 0.6s;
}
.card-item:hover::before{left:100%;}
.card-item:hover{
  background:rgba(232,34,26,0.1);border-color:#E8221A;
  transform:translateY(-10px);box-shadow:0 30px 60px rgba(232,34,26,0.25);
}

.card-icon{font-size:52px;margin-bottom:20px;}
.card-num{font-family:'JetBrains Mono',monospace;font-size:42px;
  color:#E8221A;margin-bottom:10px;line-height:1;}
.card-title{font-family:'Cormorant Garamond',serif;font-size:26px;
  margin-bottom:15px;line-height:1.1;}
.card-title em{color:#E8221A;font-style:italic;}
.card-text{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.8;}

/* ════════ SCROLL REVEAL TEXT ════════ */
.scroll-text{
  font-size:20px;line-height:2;color:rgba(255,255,255,0.4);
  padding:15px 0;transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.scroll-text.active{
  color:#fff;text-shadow:0 0 20px rgba(232,34,26,0.2);
}
.scroll-text em{color:#E8221A;font-weight:500;}

/* ════════ SECTION TITLE REVEAL ════════ */
.section{
  padding:150px 80px;position:relative;z-index:5;
  border-bottom:2px solid rgba(232,34,26,0.1);
}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(42px,10vw,96px);
  font-weight:300;letter-spacing:-2px;
  margin-bottom:60px;line-height:0.9;
  opacity:0;transform:translateY(50px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.section-title.visible{opacity:1;transform:translateY(0);}
.section-title em{color:#E8221A;font-style:italic;}

/* ════════ IMAGE SECTION WITH PARALLAX ════════ */
.image-section{
  position:relative;height:800px;overflow:hidden;
  background:linear-gradient(135deg,rgba(232,34,26,0.1),rgba(232,34,26,0.05));
}
.parallax-image{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(30%) brightness(0.8);
  transition:filter 0.4s;
}
.image-section:hover .parallax-image{
  filter:grayscale(0) brightness(1);
}

/* ════════ COLORS & GRADIENT ════════ */
.bg-gradient{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* ════════ CTA SECTION ════════ */
.cta-section{
  padding:150px 80px;text-align:center;position:relative;z-index:5;
  border-top:3px solid #E8221A;
}
.cta-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(42px,10vw,96px);
  font-weight:300;letter-spacing:-2px;
  margin-bottom:30px;opacity:0;transform:scale(0.95) translateY(40px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cta-title.visible{opacity:1;transform:scale(1) translateY(0);}
.cta-subtitle{
  font-size:18px;color:rgba(255,255,255,0.8);
  max-width:700px;margin:0 auto 50px;line-height:1.9;
}
.cta-buttons{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
}
.btn{
  padding:18px 50px;font-size:12px;text-transform:uppercase;
  letter-spacing:2.5px;border:2px solid #E8221A;
  background:transparent;color:#E8221A;cursor:none;
  transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  position:relative;overflow:hidden;font-weight:500;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:#E8221A;transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index:-1;
}
.btn:hover::before{transform:scaleX(1);}
.btn:hover{color:#0a0a0a;transform:scale(1.05);}

/* ════════ FOOTER ════════ */
footer{
  padding:80px;background:linear-gradient(135deg,#0a0a0a,#1a0500);
  border-top:2px solid rgba(232,34,26,0.1);position:relative;z-index:5;
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:60px;max-width:1400px;margin:0 auto;
}
.footer-block h3{
  font-family:'Cormorant Garamond',serif;font-size:24px;
  margin-bottom:20px;color:#E8221A;
}
.footer-block a{
  display:block;color:rgba(255,255,255,0.6);text-decoration:none;
  margin-bottom:10px;font-size:14px;transition:color 0.3s;cursor:none;
}
.footer-block a:hover{color:#E8221A;}

/* ════════ RESPONSIVE ════════ */
@media(max-width:900px){
  nav{padding:0 40px;}
  .section,.nothing-show,.cards-section,.cta-section{padding:80px 40px;}
  .card-item{grid-column:span 1;}
  footer{padding:60px 40px;}
}

@media(max-width:640px){
  nav{padding:0 20px;}
  .section,.nothing-show,.cards-section,.cta-section{padding:60px 20px;}
  .text-container,.nothing-content{padding:40px 20px;}
  .cta-buttons{flex-direction:column;gap:10px;}
  .btn{width:100%;}
  .nav-logo{font-size:24px;gap:8px;}
  .nav-logo img{height:36px;}
  .nav-links{gap:20px;font-size:9px;}
}