:root{--bg:#fff;--muted:#666;--accent:#0b69ff;--card:#f8fafc;--max:1200px}
  *{box-sizing:border-box;} html,body{height:100%} body{margin:0;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;line-height:1.45;color:#111;background:var(--bg);} a{color:var(--accent);text-decoration:none}
   header{position: fixed;left:0;top:0;width:100%;line-height:50px;white-space: nowrap; border-bottom :1px solid #eee;background:linear-gradient(0deg,rgba(255,255,255,0.7),rgba(255,255,255,0.7));backdrop-filter:blur(6px);z-index: 9;}
  .main-container{width: 100%;height:100vh;padding-top:60px;}
  .search-pop-da{position: absolute;right: 20%;bottom: -100%;background: #fff;border-radius: 10px;padding: 10px;z-index: 99;display: flex;align-items: center;gap:3px; flex-wrap: nowrap;box-shadow: 0 0 10px rgba(0,0,0,.3);}
  .container{max-width:var(--max);margin:0 auto;padding:10px;}
  .nav{position: relative;width: 100%;max-width: 70%; display:flex;align-items:center;gap:18px;margin: 0 auto;} .nav a{border-bottom: 2px solid transparent;margin-left: 10px;font-size: 14px;} 
  .nav a.active{color: #b10b0b;border-color: #b10b0b;pointer-events: none;}.nav a:hover{color: #b10b0b;opacity: 0.5;}
  .brand{font-weight:700;font-size:1.3rem;color: #b10b0b;}
  .search{margin-left:auto;display: flex;align-items: center;gap: 5px;}.search .input{padding: 5px 10px;border: 1px solid #eee;outline: none;}.search .input:hover, .search .input:focus{border-color: #b10b0b;} .search button{border: 0;padding: 5px;cursor: pointer;} .search button, .search input{border-radius: 4px;}
   main{padding:28px 0}.pop-s-btn{display: none;}

  .da-da-goo-gle-ad-da {margin: 10px auto;text-align: center;display: flex;flex-wrap: nowrap;justify-content: center;gap: 10px;width: 100%;max-height:250px;overflow: hidden;} 
  .da-da-goo-gle-ad-da .adsbygoogle{display: block;flex: 1 1 100%;width: 100%;max-width: 500px;border: 1px solid #eee;border-radius: 10px;background: #ccc;}

  .landing{display: flex;flex-direction: column;align-items: center;padding: 3rem 1rem;animation: fadeIn 1.2s ease;}.landing .card{display: grid;place-items: center;} .landing .card svg{width: 100px;height: auto;}
  .hero{text-align: center;margin-bottom: 3rem;}
  .logo{width: 200px;height: auto;margin-bottom: 1rem;animation: float 3s ease-in-out infinite;}
  .title{font-size: 2.5rem;font-weight: bold;}
  .title span{color: #b10b0b;}
  .subtitle{font-size: 1.2rem;margin: 0.5rem 0 1.5rem;color: #555;}
  .cta-btn{display: inline-block;background: #b10b0b;color: #fff;padding: 0.8rem 1.5rem;border-radius: 8px;text-decoration: none;font-weight: 600;transition: transform 0.2s ease, box-shadow 0.2s ease;}
  .cta-btn:hover {transform: translateY(-3px);box-shadow: 0 8px 16px rgba(0,0,0,0.15);}
  .icon{margin-bottom: 0.8rem;color: #b10b0b;}
  .features {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.5rem;width: 100%;max-width: 100%;}
  .features .card {background: #fff;padding: 1.5rem;border-radius: 12px;transition: transform 0.3s ease, box-shadow 0.3s ease;animation: slideUp 1s ease forwards;opacity: 0;}.features .card:hover{transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
  .card:nth-child(1) { animation-delay: 0.2s; }
  .card:nth-child(2) { animation-delay: 0.4s; }
  .card:nth-child(3) { animation-delay: 0.6s; }
  @keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}
  @keyframes slideUp {to { opacity: 1; transform: translateY(0); }from { opacity: 0; transform: translateY(20px); }}
  @keyframes float {0% { transform: translateY(0); }50% { transform: translateY(-8px); }100% { transform: translateY(0); }}
 
  .grid-container {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:12px;justify-content:center;}
  .card {border:1px solid #f0f3f5;padding:16px;border-radius:10px;background: rgba(255,0,0,0.03); transition:box-shadow .2s ease,transform .2s ease;max-width:380px;width:100%;margin:0 auto;}
  .card:hover {box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-4px);}
  .card .thumb img {width:100%;border-radius:8px;object-fit:cover;max-height:220px;display:block;}
  .card-content {margin-top:10px;}
  .card-content h2 {font-size:1.2rem;margin:6px 0;color:#222;line-height:1.4;}
  .card-content h2:hover {color:#0073e6;}
  .card-content .meta {font-size:.85em;color:#666;margin-bottom:8px;}
  .card-content .lead {font-size:.95rem;color:#444;margin-bottom:12px;line-height:1.5;}
  .card-content .tags {display:flex;flex-wrap:wrap;gap:6px;}
  .card-content .tags span {background:#f2f2f2;padding:4px 10px;border-radius:6px;font-size:.8em;color:#555;transition:background .2s ease;}
  .card-content .tags span:hover {background:#ddd;}
 
   strong{font-size: 20px;}
  .left-right{display: flex;align-items: center;justify-content: center; margin-top: 100px;}
  .left-right img{width: 300px;height: auto;}
    
  .footer {background: rgba(100,0,0,1);color: #e2e8f0;padding: 3rem 1rem 1rem;margin-top: 3rem;position: relative;}
  .footer-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px,1fr));gap: 2rem;max-width: 1100px;margin: 0 auto;}
  .footer-col h3, .footer-col h4 {color: #fff;margin-bottom: 1rem;}
  .footer-col p {font-size: 0.95rem;line-height: 1.6;}
  .footer-col ul {list-style: none;padding: 0;margin: 0;}
  .footer-col ul li {margin-bottom: 0.6rem;}
  .footer-col ul li a {color: #e2e8f0;text-decoration: none;transition: color 0.2s ease;}
  .footer-col ul li a:hover {color: #60a5fa;}
  .socials{display: flex;gap: 0.8rem;}
  .socials a {display: inline-flex;padding: 0.5rem;background: rgba(200,0,0,0.4);border-radius: 50%;transition: background 0.2s ease, transform 0.2s ease;}
  .socials a:hover {background: #b10b0b;transform: translateY(-2px);}
  .footer-bottom {text-align: center;margin-top: 2rem;border-top: 1px solid #1e293b;padding-top: 1rem;font-size: 0.85rem;color: #94a3b8;}

  .btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600}
  .muted{color:var(--muted)}
  .hidden{display:none}
  .breadcrumbs{font-size:0.9rem;margin-bottom:12px;color:var(--muted)}
 
  @media (max-width: 640px) {
      .left-right{flex-wrap: wrap;}::-webkit-scrollbar{display: none;}
      header .brand{font-size: 14px;}h2, .lead{margin: 2px 0;font-size: 14px;}
    .nav{gap: 10px;max-width: 90%;}  .nav a{font-size: 12px;} .container{padding: 0 5px;}.landing{padding: 0;}
   .main-s-btn{display: none;} .pop-s-btn{display: block;}
  } 
   @media (max-width: 500px) {header #q{display: none;}.title{font-size: 1.8rem;}.cta-btn{padding: .5rem  1rem;font-size: 14px;}}
   @media (max-width: 300px) {.nav{gap: 5px;max-width: 95%;}.nav a{font-size: 10px;}.nav a{margin-left: 5px;}}