*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  border:none;
  outline:none;
  font-family:'Poppins', sans-serif;
}

:root{
  --red:#b70f1b;
  --red-bright:#e30613;
  --red-dark:#7e0710;
  --black:#121212;
  --charcoal:#202124;
  --soft-black:#2b2b2b;
  --text:#272727;
  --muted:#6f6f6f;
  --light:#f6f6f6;
  --line:#e8e8e8;
  --white:#ffffff;
  --cream:#f3efe7;
  --shadow:0 22px 55px rgba(0,0,0,.10);
  --shadow-strong:0 30px 80px rgba(0,0,0,.18);
}

html{
  font-size:62.5%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--white);
  color:var(--text);
}

img{max-width:100%;display:block;}

section{padding:9rem 8%;}

.topbar{
  min-height:42px;
  padding:.8rem 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  background:var(--black);
  color:var(--white);
  font-size:1.22rem;
  font-weight:600;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
}

.topbar a,.topbar span{color:rgba(255,255,255,.9);}
.topbar i{color:var(--red-bright);margin-right:.5rem;}

header{
  position:sticky;
  top:0;
  width:100%;
  padding:1.35rem 8%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  z-index:1000;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

header.scrolled{box-shadow:0 18px 45px rgba(0,0,0,.12);}

.logo{display:flex;align-items:center;min-width:210px;}
.logo img{height:54px;width:auto;object-fit:contain;}

nav{display:flex;align-items:center;gap:2.8rem;}
nav a{
  color:var(--text);
  font-size:1.36rem;
  font-weight:700;
  position:relative;
  padding:.7rem 0;
  transition:.25s ease;
}
nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--red);
  transition:.25s ease;
}
nav a:hover,nav a.active{color:var(--red);}
nav a:hover::after,nav a.active::after{width:100%;}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  background:var(--black);
  color:var(--white);
  padding:1.25rem 2rem;
  border-radius:999px;
  font-size:1.3rem;
  font-weight:800;
  box-shadow:0 16px 35px rgba(0,0,0,.14);
  transition:.25s ease;
}
.nav-cta:hover{background:var(--red);transform:translateY(-2px);}

.menu-btn{
  display:none;
  width:4.5rem;
  height:4.5rem;
  border-radius:1.2rem;
  background:var(--black);
  color:var(--white);
  font-size:2rem;
  cursor:pointer;
}

.hero{
  min-height:calc(100vh - 42px);
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:5rem;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(183,15,27,.16), transparent 35%),
    linear-gradient(135deg,#ffffff 0%,#f5f5f5 48%,#ececec 100%);
}

.hero::before{
  content:"PRODUCT";
  position:absolute;
  right:-5rem;
  top:8rem;
  font-size:15vw;
  font-weight:900;
  color:rgba(0,0,0,.035);
  letter-spacing:-1rem;
}

.hero-content,.hero-visual{position:relative;z-index:2;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  background:rgba(183,15,27,.09);
  color:var(--red);
  padding:.9rem 1.4rem;
  border-radius:999px;
  font-size:1.3rem;
  font-weight:800;
  margin-bottom:2rem;
}
.eyebrow.dark{background:rgba(255,255,255,.13);color:var(--white);}

.hero h1{
  font-size:clamp(4.2rem,6vw,8rem);
  line-height:.98;
  letter-spacing:-.35rem;
  color:var(--black);
  font-weight:900;
  margin-bottom:2.2rem;
}
.hero h1 span{color:var(--red);}
.hero p{
  color:#545454;
  font-size:1.78rem;
  line-height:1.8;
  max-width:68rem;
  margin-bottom:3rem;
}

.hero-actions{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:3.5rem;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  padding:1.45rem 2.35rem;
  border-radius:999px;
  font-size:1.42rem;
  font-weight:800;
  transition:.25s ease;
}
.btn.primary{background:var(--red);color:var(--white);box-shadow:0 18px 42px rgba(183,15,27,.24);}
.btn.primary:hover{background:var(--red-dark);transform:translateY(-2px);}
.btn.secondary{background:var(--white);color:var(--black);border:1px solid var(--line);}
.btn.secondary:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
  max-width:58rem;
}
.hero-stats div{
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:2rem;
  padding:1.6rem;
  box-shadow:0 15px 35px rgba(0,0,0,.05);
}
.hero-stats strong{display:block;font-size:2.6rem;color:var(--red);line-height:1;}
.hero-stats span{display:block;margin-top:.7rem;font-size:1.18rem;color:var(--muted);font-weight:700;}

.hero-visual{
  min-height:58rem;
  display:grid;
  place-items:center;
}
.hero-board-frame{
  width:min(100%, 72rem);
  border-radius:3.2rem;
  overflow:hidden;
  box-shadow:var(--shadow-strong);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.7);
}
.hero-board-frame img{
  width:100%;
  height:auto;
  display:block;
}
.board{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-strong);
  border-radius:3.2rem;
  overflow:hidden;
}
.board-main{
  width:min(100%,55rem);
  padding:2.4rem;
  transform:rotate(-1deg);
}
.board-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:1.5rem;
  margin-bottom:2rem;
}
.board-head span{font-size:1.9rem;font-weight:900;color:var(--black);}
.board-head small{font-size:1.15rem;color:var(--muted);font-weight:700;}
.product-card{
  display:grid;
  grid-template-columns:18rem 1fr;
  gap:2rem;
  align-items:center;
  background:linear-gradient(135deg,#f9f9f9,#eeeeee);
  border-radius:2.6rem;
  padding:2.2rem;
  margin-bottom:1.8rem;
}
.product-shape{
  height:17rem;
  border-radius:4rem 4rem 2rem 2rem;
  background:linear-gradient(135deg,var(--black),#303030);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.product-shape::before{
  content:"";
  position:absolute;
  left:2.8rem;
  top:3rem;
  width:9rem;
  height:5rem;
  background:var(--cream);
  border-radius:0 0 5rem 5rem;
}
.product-shape::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:5.8rem;
  height:100%;
  background:var(--red);
  border-radius:2.5rem 0 0 0;
}
.product-shape span{
  position:absolute;
  left:2rem;
  bottom:1.4rem;
  width:14rem;
  height:1.7rem;
  border:4px solid var(--black);
  border-radius:50%;
  background:transparent;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.12));
}
.product-card h3{font-size:2.4rem;color:var(--black);line-height:1.2;margin-bottom:1rem;}
.product-card p{font-size:1.34rem;line-height:1.7;color:var(--muted);}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.mini-grid div{
  border:1px solid var(--line);
  border-radius:1.8rem;
  padding:1.5rem;
  text-align:center;
  background:#fafafa;
}
.mini-grid i{font-size:2.2rem;color:var(--red);margin-bottom:.8rem;}
.mini-grid span{display:block;font-size:1.2rem;font-weight:800;color:var(--text);}
.floating-card{
  position:absolute;
  background:var(--black);
  color:var(--white);
  border-radius:1.8rem;
  padding:1.5rem 1.7rem;
  box-shadow:var(--shadow);
  max-width:25rem;
}
.floating-card small{display:block;color:#ffb1b7;font-size:1.05rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;}
.floating-card span{font-size:1.25rem;font-weight:700;line-height:1.5;}
.fc-1{left:0;top:13rem;}
.fc-2{right:0;bottom:9rem;background:var(--red);}
.fc-2 small{color:#fff;opacity:.75;}

.section-heading{text-align:center;max-width:82rem;margin:0 auto 5rem;}
.section-heading.left{text-align:left;margin-left:0;}
.section-heading span{
  display:inline-block;
  color:var(--red);
  font-size:1.25rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:1.2rem;
}
.section-heading h2{
  font-size:clamp(3rem,4.6vw,5.2rem);
  line-height:1.08;
  color:var(--black);
  letter-spacing:-.15rem;
  margin-bottom:1.7rem;
}
.section-heading p{font-size:1.62rem;line-height:1.8;color:var(--muted);}

.about{background:var(--white);}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start;}
.about-text{
  background:var(--light);
  border:1px solid var(--line);
  border-radius:3rem;
  padding:3rem;
}
.about-text p{font-size:1.62rem;line-height:1.9;color:#525252;margin-bottom:1.4rem;}
.about-text p:last-child{margin-bottom:0;}
.about-points{display:grid;gap:1.4rem;}
.about-points div{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2rem;
  padding:1.8rem;
  box-shadow:0 13px 35px rgba(0,0,0,.05);
  font-size:1.46rem;
  font-weight:700;
  line-height:1.55;
}
.about-points i{color:var(--red);margin-top:.2rem;}

.services{background:linear-gradient(180deg,#fafafa 0%,#fff 100%);}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2.6rem;
  padding:2.6rem;
  box-shadow:0 18px 45px rgba(0,0,0,.05);
  transition:.25s ease;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:4px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}
.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);}
.service-card:hover::before{transform:scaleX(1);}
.icon{
  width:6.2rem;
  height:6.2rem;
  display:grid;
  place-items:center;
  background:rgba(183,15,27,.08);
  color:var(--red);
  border-radius:1.8rem;
  font-size:2.6rem;
  margin-bottom:2rem;
}
.service-card h3{font-size:1.9rem;line-height:1.25;color:var(--black);margin-bottom:1.1rem;}
.service-card p{font-size:1.34rem;line-height:1.75;color:var(--muted);}

.process{background:var(--black);color:var(--white);position:relative;overflow:hidden;}
.process::before{
  content:"SYSTEM";
  position:absolute;
  left:-3rem;
  top:4rem;
  font-size:14vw;
  line-height:1;
  font-weight:900;
  color:rgba(255,255,255,.035);
}
.process .section-heading h2{color:var(--white);}
.process .section-heading p{color:rgba(255,255,255,.65);}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;z-index:2;}
.process-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:2.6rem;
  padding:2.6rem;
  min-height:27rem;
}
.process-item strong{display:block;font-size:4rem;line-height:1;color:var(--red-bright);margin-bottom:5rem;}
.process-item h3{font-size:2rem;margin-bottom:1rem;}
.process-item p{font-size:1.34rem;line-height:1.75;color:rgba(255,255,255,.72);}

.packages{background:var(--white);}
.package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.package-card{
  border:1px solid var(--line);
  border-radius:2.8rem;
  padding:2.5rem;
  background:var(--white);
  box-shadow:0 16px 40px rgba(0,0,0,.05);
  transition:.25s ease;
}
.package-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.package-card.featured{background:var(--black);color:var(--white);border-color:var(--black);}
.package-card .tag{
  display:inline-block;
  padding:.65rem 1.15rem;
  border-radius:999px;
  background:rgba(183,15,27,.09);
  color:var(--red);
  font-size:1.08rem;
  font-weight:900;
  margin-bottom:1.7rem;
}
.package-card.featured .tag{background:var(--red);color:var(--white);}
.package-card h3{font-size:2.2rem;margin-bottom:1rem;color:var(--black);}
.package-card.featured h3{color:var(--white);}
.package-card p{font-size:1.34rem;line-height:1.7;color:var(--muted);margin-bottom:1.8rem;}
.package-card.featured p{color:rgba(255,255,255,.72);}
.package-card ul{list-style:none;display:grid;gap:1rem;}
.package-card li{font-size:1.3rem;color:#555;display:flex;gap:.8rem;align-items:flex-start;}
.package-card li::before{content:"✓";font-weight:900;color:var(--red);}
.package-card.featured li{color:rgba(255,255,255,.82);}
.package-card.featured li::before{color:#ff7c86;}

.portfolio{background:var(--light);}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.portfolio-card{
  min-height:24rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:3rem;
  padding:2.4rem;
  color:var(--white);
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--black),#3b3b3b);
  box-shadow:var(--shadow);
}
.portfolio-card:nth-child(even){background:linear-gradient(135deg,var(--red-dark),var(--red));}
.portfolio-card::before{
  content:"";
  position:absolute;
  right:-4rem;
  top:-4rem;
  width:13rem;
  height:13rem;
  border-radius:50%;
  background:rgba(255,255,255,.09);
}
.portfolio-card h3{font-size:2rem;margin-bottom:1rem;position:relative;z-index:2;}
.portfolio-card p{font-size:1.34rem;line-height:1.7;color:rgba(255,255,255,.78);position:relative;z-index:2;}

.note-section{padding-top:0;background:var(--light);}
.note-box{
  display:flex;
  align-items:flex-start;
  gap:2rem;
  background:var(--white);
  border:1px solid var(--line);
  border-left:6px solid var(--red);
  border-radius:2.6rem;
  padding:2.6rem;
  box-shadow:0 18px 45px rgba(0,0,0,.06);
}
.note-box i{font-size:2.6rem;color:var(--red);margin-top:.2rem;}
.note-box h3{font-size:2rem;color:var(--black);margin-bottom:.8rem;}
.note-box p{font-size:1.45rem;line-height:1.8;color:var(--muted);}

.contact{background:var(--white);}
.contact-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:3rem;
  background:linear-gradient(135deg,var(--black) 0%,#202020 48%,var(--red-dark) 100%);
  border-radius:3.4rem;
  padding:5rem;
  color:var(--white);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
  position:relative;
}
.contact-card::after{
  content:"CYI";
  position:absolute;
  right:2rem;
  bottom:-4rem;
  font-size:16rem;
  font-weight:900;
  color:rgba(255,255,255,.045);
  letter-spacing:-.8rem;
}
.contact-card h2{font-size:clamp(3rem,4.5vw,5rem);line-height:1.08;letter-spacing:-.15rem;margin-bottom:1.5rem;position:relative;z-index:2;}
.contact-card p{font-size:1.55rem;line-height:1.8;color:rgba(255,255,255,.74);max-width:74rem;position:relative;z-index:2;}
.contact-actions{display:flex;gap:1.3rem;flex-wrap:wrap;position:relative;z-index:2;}
.white-btn{background:var(--white)!important;color:var(--red)!important;box-shadow:none!important;}
.outline-white{background:transparent!important;color:var(--white)!important;border:1px solid rgba(255,255,255,.28)!important;}

footer{
  background:#0d0d0d;
  color:var(--white);
  padding:6rem 8% 2.4rem;
}
.footer-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:3rem;margin-bottom:4rem;}
.footer-logo{height:68px;width:auto;background:#fff;border-radius:1.2rem;padding:.7rem;margin-bottom:1.5rem;}
.footer-grid h3{font-size:1.7rem;margin-bottom:1.4rem;}
.footer-grid p,.footer-grid a{display:block;font-size:1.35rem;line-height:1.8;color:rgba(255,255,255,.65);margin-bottom:.7rem;}
.footer-grid a:hover{color:#fff;}
.footer-grid i{color:var(--red-bright);margin-right:.7rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.footer-bottom p{font-size:1.25rem;color:rgba(255,255,255,.58);}
.footer-bottom div{display:flex;gap:1rem;}
.footer-bottom a{
  width:3.8rem;
  height:3.8rem;
  display:grid;
  place-items:center;
  color:var(--white);
  background:rgba(255,255,255,.08);
  border-radius:50%;
  transition:.25s ease;
}
.footer-bottom a:hover{background:var(--red);transform:translateY(-2px);}

@media(max-width:1180px){
  html{font-size:58%;}
  .services-grid,.package-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .process-line{grid-template-columns:repeat(2,1fr);}
  nav{gap:1.8rem;}
}

@media(max-width:940px){
  .topbar{display:none;}
  header{padding:1.2rem 5%;}
  section{padding:7rem 5%;}
  .nav-cta{display:none;}
  .menu-btn{display:grid;place-items:center;}
  nav{
    position:absolute;
    top:100%;
    left:5%;
    right:5%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:2rem;
    padding:1.2rem;
    box-shadow:var(--shadow);
  }
  nav.show{display:flex;}
  nav a{width:100%;padding:1.3rem 1.2rem;border-radius:1.2rem;}
  nav a:hover{background:var(--light);}
  nav a::after{display:none;}
  .hero{grid-template-columns:1fr;padding-top:8rem;}
  .hero-visual{min-height:auto;}
  .hero-board-frame{width:100%;}
  .about-grid,.contact-card{grid-template-columns:1fr;}
  .contact-actions{justify-content:flex-start;}
}

@media(max-width:680px){
  .logo{min-width:150px;}
  .logo img{height:45px;}
  .hero h1{letter-spacing:-.18rem;}
  .hero-stats{grid-template-columns:1fr;}
  .product-card{grid-template-columns:1fr;}
  .product-shape{height:14rem;}
  .floating-card{display:none;}
  .services-grid,.package-grid,.portfolio-grid,.process-line{grid-template-columns:1fr;}
  .contact-card{padding:3rem 2.2rem;}
  .footer-grid{grid-template-columns:1fr;}
}