:root{--rose:#ef4444;--rose-600:#dc2626;--orange:#f97316;--bg:#f7f7fb;--text:#111827;--muted:#6b7280}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fff;scroll-behavior:smooth}a{color:inherit;text-decoration:none}.container{max-width:1120px;margin:0 auto;padding:0 16px}.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08)}.header .container{max-width:1200px;margin:0 auto;padding:0.75rem 1rem;display:flex;justify-content:space-between;align-items:center}.logo img {height: 40px;width: auto;display: block;}.nav{display:flex;align-items:center;justify-content:space-between;height:72px}.nav a{margin-left:1.5rem;font-weight:500;color:#374151;transition:color .2s ease}.nav a:hover,.nav-links a:hover{color:#e3342f}.nav-links a{margin:0 12px;font-weight:500;color:#374151}.menu-toggle{display:none;font-size:1.5rem;background:none;border:none}.brand{display:flex;align-items:center;gap:10px}.brand img{height:40px}.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--rose),var(--orange));color:#fff;font-size:12px}.hero-section{position:relative;padding:6rem 1rem;background:#fff;overflow:hidden}.hero-container{max-width:1200px;margin:0 auto;text-align:left}.hero-text h1{font-size:3rem;font-weight:800;color:#111827;margin-bottom:1.5rem}.hero-text p{font-size:1.125rem;color:#4b5563;margin-bottom:2rem}.hero-buttons a{display:inline-block;padding:.75rem 1.5rem;border-radius:50px;font-weight:600;transition:all .2s ease;margin-right:1rem}.btn-primary{background:#ef4444;color:#fff;box-shadow:0 4px 10px rgba(239,68,68,.3)}.btn-primary:hover{background:#dc2626}.btn-outline{border:2px solid #ef4444;color:#ef4444;background:0 0}.btn-outline:hover{background:#fef2f2}.floating-icon{position:absolute;width:50px;height:50px;animation:float 6s ease-in-out infinite}.icon1{top:10%;left:10%}.icon2{bottom:25%;right:15%}.icon3{top:40%;right:5%}.icon4{bottom:10%;left:20%}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}100%{transform:translateY(0)}}.hero-section::before{content:"";position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(239,68,68,.2),transparent);border-radius:50%;z-index:0}.hero-section::after{content:"";position:absolute;bottom:-120px;right:-120px;width:300px;height:300px;background:radial-gradient(circle,rgba(59,130,246,.2),transparent);border-radius:50%;z-index:0}.product-card:nth-child(1),.product-card:nth-child(2){display:none}.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#f9fafb)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:72px 0 48px}.hero h1{font-size:44px;line-height:1.12;margin:8px 0 12px}.hero p{color:var(--muted)}.cta{display:flex;gap:12px;margin-top:22px}.btn{padding:13px 20px;border-radius:14px;font-weight:600;border:1px solid transparent;transition:.2s transform,.2s box-shadow,.2s background}.btn-primary{background:linear-gradient(90deg,var(--rose),var(--orange));color:#fff;box-shadow:0 10px 20px rgba(239,68,68,.25)}.btn-primary:hover{transform:translateY(-2px)}.btn-ghost{border-color:#f1f1f3;color:var(--rose)}.btn-ghost:hover{background:#fff}.hero-card{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.08)}.hero-card img{width:100%;height:100%;object-fit:cover;display:block}.hero-float{position:absolute;right:12px;bottom:12px;background:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.1);font-weight:600}.stats{background:#fff;padding:28px 0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.05)}.stat .num{font-size:28px;font-weight:800;background:linear-gradient(90deg,var(--rose),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}.muted{color:var(--muted);font-size:14px}.section{padding:56px 0}.section h2{text-align:center;font-size:32px;margin:0 0 10px}.section p.lead{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 28px}.features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.feature{background:linear-gradient(135deg,#fff,#fff 60%,#fff0 60.1%),linear-gradient(135deg,#fff0,#ffe8e5);border:1px solid #f1f1f4;border-radius:18px;padding:18px;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.04)}.feature-icon{flex:0 0 56px;height:56px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(90deg,var(--rose),var(--orange));color:#fff;font-weight:800}.feature .arrow{position:absolute;right:16px;top:16px;width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:var(--rose);color:#fff}.feature h3{margin:2px 0 6px;font-size:18px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.card{background:#fff;border:1px solid #eee;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06);position:relative}.card .media{aspect-ratio:16/10;background:#f1f1f3}.card img{width:100%;height:100%;object-fit:cover;display:block}.card .overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;display:grid;place-content:center;gap:10px;transition:.25s opacity}.card:hover .overlay{opacity:1}.overlay .btn{border-radius:999px;padding:10px 18px;font-size:14px}.overlay .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1);backdrop-filter:blur(6px)}.card .body{padding:16px}.card .title{font-weight:700}.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}.tab{padding:8px 14px;border-radius:999px;border:1px solid #eee;background:#fff;font-size:14px}.tab.active{background:linear-gradient(90deg,var(--rose),var(--orange));color:#fff;border-color:transparent}.site-footer{background:#f5f5f5;border-top:1px solid #ddd;padding:40px 20px 20px;font-family:Arial,sans-serif;color:#333}.footer-container{max-width:1200px;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}.footer-left{flex:1;min-width:300px;margin-bottom:20px}.footer-logo{font-size:26px;font-weight:700;color:#000;margin-bottom:10px}.footer-logo span{color:#7d4edb}.footer-desc{font-size:14px;line-height:1.6;color:#333}.footer-note{font-size:13px;margin-top:10px;color:#666;line-height:1.6}.footer-right{flex:1;min-width:250px;margin-bottom:20px}.footer-title{font-size:20px;color:#000;margin-bottom:12px}.contact-box{background:#fff;padding:12px 15px;border-radius:10px;display:flex;align-items:center;gap:12px;margin-bottom:12px;border:1px solid #eee;text-decoration:none;color:inherit;transition:.3s}.contact-box:hover{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(-3px)}.contact-box img{width:28px;height:28px}.contact-box strong{font-size:14px;color:#000}.contact-box span{font-size:13px;color:#444}.footer-bottom{text-align:center;padding:15px 0;border-top:1px solid #ddd;font-size:14px;color:#555}.footer-bottom span{color:#7d4edb;font-weight:700}@media(max-width:768px){.footer-container{flex-direction:column}.footer-left,.footer-right{min-width:100%}}.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}.reveal.show{opacity:1;transform:none}.float{animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}.why-choose{padding:60px 20px;background:#fff;text-align:center}.section-title{font-size:32px;font-weight:700;color:#111827;margin-bottom:12px}.section-subtitle{max-width:650px;margin:0 auto 40px;color:#6b7280;font-size:16px;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.feature-card{border-radius:16px;padding:28px 20px;color:#374151;text-align:center;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.feature-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 16px 32px rgba(0,0,0,.15)}.feature-card .icon{width:72px;height:72px;margin:0 auto 18px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.12))}.feature-card .icon svg{width:100%;height:100%;display:block}.feature-card.purple{background:#f5eaff}.feature-card.blue{background:#eaf4ff}.feature-card.green{background:#e9fbf1}.feature-card.red{background:#ffecec}.feature-card h3{font-size:18px;font-weight:600;margin:8px 0 10px}.feature-card p{font-size:14px;color:#4b5563;line-height:1.6}.feature-card:hover .icon{transform:translateY(-2px);transition:.25s}.reveal{opacity:0;transform:translateY(40px);transition:all .7s ease}.reveal.show{opacity:1;transform:translateY(0)}
#btn-contact {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  border: 2px solid #ef4444;
  color: #ef4444;
  background: transparent;
  text-align: center;
  transition: all 0.3s ease;
}

#btn-contact:hover {
  background: #e6e3ff;
  color: #1c00ff;
  border-color: #1c00ff;
}

.hero-buttons a {
  margin-bottom: 10px; 
}

@media (min-width: 769px) {
  .hero-buttons a {
    margin-bottom: 0;  
    margin-right: 10px; 
  }
}

.dev-cards {
  max-width: 960px;
  margin: 40px auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .dev-cards { grid-template-columns: 1fr 1fr; }
}

.rgb-wrap {
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(270deg,
    #ff004c, #ff8a00, #ffe600, #36ff00,
    #00ffe7, #0066ff, #7a00ff, #ff00c8, #ff004c);
  background-size: 400%;
  animation: rgbborder 6s linear infinite;
  transition: transform 0.3s ease;
}
.rgb-wrap:hover {
  transform: translateY(-8px);
}

.rgb-inner {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.rgb-inner h3 {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
}

.rgb-inner ul {
  padding-left: 20px;
  color: #4b5563;
  line-height: 1.75;
}

@keyframes rgbborder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 1.9rem;
    line-height: 2.2rem;
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 1.5rem; 
    line-height: 2rem;
  }
}

.client-review-text {
  text-align: center; 
  margin: 30px 0;
  font-size: 18px;
  color: #000; 
}

.client-review-text .review-link {
  color: red;   
  font-weight: bold;
  text-decoration: none;
}

.client-review-text .review-link:hover {
  text-decoration: underline;
}

.client-review-text {
  text-align: center;
  margin: 20px 0;
}
.client-review-text a {
  color: red;
  font-weight: bold;
  cursor: pointer;
}

.review-form {
  display: none;
  max-width: 600px;
  margin: 20px auto;
  padding: 0 15px;
  text-align: center;
}
.review-form input,
.review-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.review-form button {
  background: red;
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 10px;
}

.all-reviews {
  max-width: 1000px;
  margin: 20px auto;
}
.all-reviews h3 {
  text-align: center;
  margin-bottom: 20px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 15px;
}

.single-review {
  padding: 15px;
  border-radius: 14px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  color:#222;
}
.avatar {
  width:60px; 
  height:60px; 
  border-radius:50%; 
  border:3px solid rgb(0,123,255); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin:0 auto 10px auto; 
  background:#fff;
}
.single-review strong {
  font-size:16px;
  display:block;
  margin-bottom:6px;
}
.single-review p {
  font-size:14px;
  margin-bottom:8px;
  line-height:1.4;
}
.single-review small {
  font-size:12px;
  color:#555;
}

@media (max-width: 768px) {
  .mobile-break {
    display: block;
  }
}