/* ===== KOBÄ°NET ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      line-height: 1.6;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    img {
      max-width: 100%;
      display: block;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      letter-spacing: 0.01em;
      background: #fff;
      color: #1e293b;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      border: 1px solid #e2e8f0;
    }
    .btn-primary {
      background: #1a73e8;
      color: #fff;
      border-color: #1a73e8;
      box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
    }
    .btn-primary:hover {
      background: #1557b0;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
    }
    .btn-outline-light {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .btn-outline-light:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.5);
    }
    .btn-success {
      background: #34a853;
      color: #fff;
      border-color: #34a853;
      box-shadow: 0 2px 8px rgba(52, 168, 83, 0.2);
    }
    .btn-success:hover {
      background: #2d9249;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(52, 168, 83, 0.25);
    }
    .btn-white {
      background: #fff;
      color: #0f172a;
      border: 1px solid #e2e8f0;
    }
    .btn-white:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* ===== TOPBAR ===== */
    .topbar {
      background: #0f172a;
      color: #94a3b8;
      font-size: 0.8rem;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .topbar-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .topbar a {
      color: #e2e8f0;
      font-weight: 500;
      transition: color 0.2s;
    }
    .topbar a:hover {
      color: #fff;
    }
    .topbar .wa-link {
      background: #34a853;
      color: #fff;
      padding: 2px 16px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.75rem;
    }
    .topbar .wa-link:hover {
      background: #2d9249;
      color: #fff;
    }

    /* ===== HEADER ===== */
    .header {
      background: rgb(15 23 42);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 100;
      transition: box-shadow 0.3s;
    }
    .header.scrolled {
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }
    .header-inner {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .logo-box {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo-box img {
      height: 40px;
      width: auto;
    }
    .logo-text {
      font-weight: 700;
      font-size: 1.2rem;
      letter-spacing: -0.3px;
      color: #0f172a;
    }
    .logo-text span {
      font-weight: 400;
      color: #1a73e8;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .nav a {
      font-size: 0.85rem;
      font-weight: 500;
      color: #ffffff;
      transition: color 0.2s;
      position: relative;
    }
    .nav a:hover {
      color: #fff;
    }
    .nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: #1a73e8;
      transition: width 0.25s;
    }
    .nav a:hover::after {
      width: 100%;
    }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-actions .btn {
      padding: 8px 20px;
      font-size: 0.8rem;
    }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 6px;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #ffffff;
      border-radius: 2px;
      transition: 0.3s;
    }

    /* ===== HERO ===== */
    .hero {
      padding: 80px 0 72px;
      background: #0f172a;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .hero-content .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(26, 115, 232, 0.15);
      color: #8bb4f0;
      padding: 6px 18px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.3px;
      margin-bottom: 24px;
      border: 1px solid rgba(26, 115, 232, 0.15);
    }
    .hero-content h1 {
      font-size: 3.4rem;
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -1.5px;
      color: #fff;
      margin-bottom: 18px;
    }
    .hero-content h1 span {
      color: #8bb4f0;
    }
    .hero-content p {
      font-size: 1.1rem;
      color: #cbd5e1;
      max-width: 520px;
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .hero-card {
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 28px;
      padding: 36px 32px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 8px 40px rgba(0,0,0,0.2);
      color: #fff;
    }
    .hero-card h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 16px;
    }
    .hero-card ul {
      list-style: none;
      display: grid;
      gap: 12px;
    }
    .hero-card ul li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 450;
      color: #e2e8f0;
      font-size: 0.95rem;
    }
    .hero-card ul li i {
      color: #34a853;
      font-size: 1.1rem;
      width: 22px;
      text-align: center;
    }
    .hero-card .cta-group {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .hero-card .cta-group .btn {
      flex: 1;
      justify-content: center;
      min-width: 140px;
    }

    /* ===== SECTION ===== */
    .section {
      padding: 80px 0;
    }
    .section-light {
      background: #f8fafc;
    }
    .section-white {
      background: #fff;
    }
    .section-title {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px;
    }
    .section-title .eyebrow {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #1a73e8;
      background: #e8f0fe;
      padding: 4px 16px;
      border-radius: 40px;
      margin-bottom: 12px;
    }
    .section-title h2 {
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.8px;
      color: #0f172a;
    }
    .section-title p {
      color: #475569;
      font-size: 1.05rem;
      margin-top: 10px;
    }

    /* ===== SERVICES ===== */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .service-card {
      background: #fff;
      padding: 32px 28px;
      border-radius: 24px;
      border: 1px solid #eef2f6;
      transition: all 0.25s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .service-card:hover {
      transform: translateY(-4px);
      border-color: #1a73e8;
      box-shadow: 0 12px 40px rgba(0,0,0,0.04);
    }
    .service-card .icon {
      width: 56px;
      height: 56px;
      background: #e8f0fe;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: #1a73e8;
      margin-bottom: 18px;
      transition: 0.2s;
    }
    .service-card:hover .icon {
      background: #1a73e8;
      color: #fff;
    }
    .service-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }
    .service-card p {
      color: #475569;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== ABOUT ===== */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .about-image {
      min-height: 360px;
      border-radius: 28px;
      background: linear-gradient(135deg, #e8f0fe 0%, #d2dcec 100%);
      box-shadow: 0 8px 30px rgba(0,0,0,0.02);
      border: 1px solid #eef2f6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      color: #1a73e8;
      position: relative;
    }
    .about-image .sticker {
      position: absolute;
      bottom: -12px;
      right: -12px;
      background: #1a73e8;
      color: #fff;
      padding: 16px 24px;
      border-radius: 18px;
      font-weight: 600;
      font-size: 1rem;
      box-shadow: 0 8px 24px rgba(26, 115, 232, 0.2);
      letter-spacing: 0.3px;
    }
    .about-content h2 {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.2;
      color: #0f172a;
      margin: 10px 0 16px;
      letter-spacing: -0.5px;
    }
    .about-content p {
      color: #475569;
      line-height: 1.8;
      margin-bottom: 14px;
    }
    .features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 20px;
    }
    .feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      color: #0f172a;
      background: #f1f4f9;
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 0.9rem;
      border: 1px solid transparent;
      transition: 0.2s;
    }
    .feature-item i {
      color: #34a853;
      font-size: 1rem;
      width: 20px;
      text-align: center;
    }
    .feature-item:hover {
      border-color: #d2dcec;
      background: #fff;
    }

    /* ===== CTA ===== */
    .cta-section {
      background: #0f172a;
      color: #fff;
      padding: 64px 0;
      border-bottom: 1px solid #1e293b;
    }
    .cta-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
    .cta-inner h2 {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.5px;
    }
    .cta-inner p {
      color: #94a3b8;
      font-size: 1.05rem;
      margin-top: 4px;
    }
    .cta-inner .hero-buttons {
      flex-shrink: 0;
    }
    .cta-inner .btn-white {
      background: #fff;
      color: #0f172a;
      border: none;
    }
    .cta-inner .btn-white:hover {
      background: #f1f5f9;
    }
    .cta-inner .btn-primary {
      background: #1a73e8;
      color: #fff;
      border: none;
    }
    .cta-inner .btn-primary:hover {
      background: #1557b0;
    }

    /* ===== AREAS ===== */
    .area-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .area-item {
      background: #fff;
      padding: 18px 12px;
      border-radius: 16px;
      text-align: center;
      font-weight: 500;
      color: #0f172a;
      border: 1px solid #eef2f6;
      transition: 0.2s;
      font-size: 0.9rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.02);
    }
    .area-item:hover {
      border-color: #1a73e8;
      background: #f8fafc;
      transform: translateY(-2px);
    }

    /* ===== PROBLEMS ===== */
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .problem-item {
      background: #fff;
      padding: 16px 20px;
      border-radius: 14px;
      border-left: 4px solid #1a73e8;
      font-weight: 500;
      color: #0f172a;
      border: 1px solid #eef2f6;
      border-left-width: 4px;
      transition: 0.2s;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.95rem;
    }
    .problem-item i {
      color: #1a73e8;
      font-size: 0.9rem;
      width: 20px;
      text-align: center;
    }
    .problem-item:hover {
      background: #f8fafc;
      border-color: #d2dcec;
    }

    /* ===== STATS ===== */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
    }
    .stat-item h3 {
      font-size: 2.6rem;
      font-weight: 800;
      color: #1a73e8;
      letter-spacing: -1px;
      line-height: 1.1;
    }
    .stat-item p {
      color: #475569;
      font-weight: 500;
      margin-top: 2px;
      font-size: 0.95rem;
    }

    /* ===== PROCESS ===== */
    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .process-item {
      background: #fff;
      padding: 28px 20px;
      border-radius: 24px;
      text-align: center;
      border: 1px solid #eef2f6;
      transition: 0.25s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.01);
    }
    .process-item:hover {
      transform: translateY(-4px);
      border-color: #1a73e8;
      box-shadow: 0 12px 32px rgba(0,0,0,0.04);
    }
    .process-number {
      width: 48px;
      height: 48px;
      background: #e8f0fe;
      color: #1a73e8;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.2rem;
      margin: 0 auto 14px;
    }
    .process-item h3 {
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 6px;
    }
    .process-item p {
      color: #475569;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== REVIEWS ===== */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .review-item {
      background: #fff;
      padding: 28px;
      border-radius: 24px;
      border: 1px solid #eef2f6;
      transition: 0.2s;
    }
    .review-item:hover {
      border-color: #d2dcec;
    }
    .stars {
      color: #fbbc04;
      font-size: 0.95rem;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }
    .review-item h4 {
      font-weight: 600;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .review-item p {
      color: #475569;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== BLOG ===== */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .blog-item {
      background: #fff;
      padding: 28px;
      border-radius: 24px;
      border: 1px solid #eef2f6;
      transition: 0.25s;
    }
    .blog-item:hover {
      transform: translateY(-3px);
      border-color: #1a73e8;
      box-shadow: 0 8px 24px rgba(0,0,0,0.03);
    }
    .blog-item h3 {
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 6px;
      font-size: 1.05rem;
    }
    .blog-item p {
      color: #475569;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== FAQ ===== */
    .faq-list {
      max-width: 780px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    .faq-item {
      background: #fff;
      border: 1px solid #eef2f6;
      border-radius: 18px;
      overflow: hidden;
      transition: 0.2s;
    }
    .faq-item:hover {
      border-color: #d2dcec;
    }
    .faq-item summary {
      padding: 18px 24px;
      font-weight: 600;
      color: #0f172a;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      transition: background 0.2s;
    }
    .faq-item summary:hover {
      background: #f8fafc;
    }
    .faq-item summary::-webkit-details-marker {
      display: none;
    }
    .faq-item summary::after {
      content: '+';
      font-size: 1.4rem;
      font-weight: 300;
      color: #1a73e8;
      transition: transform 0.3s;
      line-height: 1;
    }
    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }
    .faq-item .faq-answer {
      padding: 0 24px 20px;
      color: #475569;
      line-height: 1.8;
    }

    /* ===== CONTACT ===== */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }
    .contact-info {
      background: #fff;
      padding: 36px 32px;
      border-radius: 28px;
      border: 1px solid #eef2f6;
      box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .contact-info h3 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 10px;
    }
    .contact-info p {
      color: #475569;
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .contact-list {
      display: grid;
      gap: 14px;
    }
    .contact-list .contact-item {
      background: #f8fafc;
      padding: 16px 20px;
      border-radius: 16px;
      border: 1px solid #eef2f6;
    }
    .contact-list .contact-item strong {
      display: block;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #1a73e8;
      margin-bottom: 2px;
      font-weight: 600;
    }
    .contact-list .contact-item a {
      color: #0f172a;
      font-weight: 500;
      transition: color 0.2s;
    }
    .contact-list .contact-item a:hover {
      color: #1a73e8;
    }
    .map-wrap {
      margin-top: 32px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid #eef2f6;
      box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .map-wrap iframe {
      width: 100%;
      height: 280px;
      border: 0;
      display: block;
    }

    /* ===== FOOTER ===== */
    .footer {
      background: #0f172a;
      color: #cbd5e1;
      padding: 56px 0 24px;
      border-top: 1px solid #1e293b;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 32px;
      margin-bottom: 32px;
    }
    .footer h4 {
      color: #fff;
      font-weight: 600;
      margin-bottom: 14px;
      font-size: 1rem;
    }
    .footer p,
    .footer a {
      color: #94a3b8;
      font-size: 0.9rem;
      line-height: 1.8;
    }
    .footer a {
      display: block;
      transition: color 0.2s;
    }
    .footer a:hover {
      color: #e2e8f0;
    }
    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 20px;
      text-align: center;
      font-size: 0.8rem;
      color: #64748b;
    }
    .footer-bottom .kobinet {
      margin-top: 8px;
      font-size: 0.7rem;
      color: #475569;
      letter-spacing: 0.5px;
    }
    .footer-bottom .kobinet span {
      color: #8bb4f0;
    }

    /* ===== FLOATING BUTTONS ===== */
    .float-wa,
    .float-call {
      position: fixed;
      right: 20px;
      z-index: 999;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      box-shadow: 0 6px 24px rgba(0,0,0,0.12);
      transition: transform 0.2s;
      border: none;
      cursor: pointer;
      color: #fff;
    }
    .float-wa {
      bottom: 84px;
      background: #34a853;
    }
    .float-call {
      bottom: 20px;
      background: #1a73e8;
    }
    .float-wa:hover,
    .float-call:hover {
      transform: scale(1.06);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .hero-content h1 { font-size: 2.8rem; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .process-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 992px) {
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .about-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .area-grid { grid-template-columns: repeat(2, 1fr); }
      .problem-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .reviews-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
      .cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
      .nav { display: none; }
      .hamburger { display: flex; }
      .header-actions .btn { padding: 6px 14px; font-size: 0.75rem; }
    }
    @media (max-width: 640px) {
      .topbar-inner { flex-direction: column; text-align: center; font-size: 0.7rem; }
      .hero { padding: 56px 0 48px; }
      .hero-content h1 { font-size: 2.2rem; }
      .hero-content p { font-size: 1rem; }
      .hero-buttons .btn { width: 100%; justify-content: center; }
      .section { padding: 56px 0; }
      .section-title h2 { font-size: 1.8rem; }
      .services-grid, .process-grid, .area-grid, .problem-grid,
      .stats-grid, .reviews-grid, .blog-grid, .footer-grid {
        grid-template-columns: 1fr;
      }
      .features-grid { grid-template-columns: 1fr; }
      .about-image .sticker { position: relative; bottom: 0; right: 0; margin-top: 16px; font-size: 0.9rem; padding: 12px 18px; }
      .contact-info { padding: 24px 20px; }
      .hero-card { padding: 24px 20px; }
      .float-wa, .float-call { width: 44px; height: 44px; font-size: 1.2rem; right: 16px; }
      .float-wa { bottom: 72px; }
      .float-call { bottom: 16px; }
      .map-wrap iframe { height: 200px; }
      .header-inner { height: 64px; }
      .logo-box img { height: 32px; }
      .logo-text { font-size: 1rem; }
      .hero-card .cta-group .btn { min-width: 100%; }
    }

    /* ===== MOBILE NAV ===== */
    .mobile-nav {
      display: none;
      flex-direction: column;
      background: #0f172a;
      padding: 20px;
      border-top: 1px solid #0f172a;
      position: absolute;
      top: 72px;
      left: 0;
      right: 0;
      box-shadow: 0 12px 32px rgba(0,0,0,0.04);
      gap: 14px;
      color: #fff;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a {
      font-weight: 500;
      color: #ffffff;
      padding: 6px 0;
      border-bottom: 1px solid #0c121f;
      font-size: 0.95rem;
    }
    .mobile-nav a:last-child { border-bottom: none; }
    @media (max-width: 992px) {
      .mobile-nav { top: 64px; }
    }
    /* ===== FOOTER ===== */
.footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  padding: 56px 0 24px;
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 40px;
}

/* ===== BRAND ===== */
.footer-logo {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.footer-desc {
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 340px;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 1rem;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.social-icons a:hover {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(26, 115, 232, 0.3);
}

/* ===== LINKS ===== */
.footer-links h4,
.footer-contact h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links ul li a {
  color: #cbd5e1;
  font-size: 0.95rem;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-links ul li a:hover {
  color: #ffffff;
}

/* ===== CONTACT ===== */
.footer-contact address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact address p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.footer-contact address p i {
  color: #8bb4f0;
  width: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-contact address a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact address a:hover {
  color: #ffffff;
}

/* ===== FOOTER BOTTOM ===== */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.footer-bottom p {
  margin: 0;
}

.kobinet span {
  color: #8bb4f0;
  font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-desc {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-logo {
    font-size: 1.4rem;
  }
  .social-icons {
    justify-content: flex-start;
  }
  .footer-contact address p {
    font-size: 0.9rem;
  }
}
.cda-areas{
    position:relative;
    padding:110px 20px;
    background:
        radial-gradient(circle at top left, rgba(156,203,75,.18), transparent 35%),
        linear-gradient(135deg,#061f38 0%,#0b2f53 52%,#061f38 100%);
    overflow:hidden;
    font-family:'Montserrat',Arial,sans-serif;
}

.cda-areas::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-160px;
    top:-160px;
    background:rgba(156,203,75,.18);
    border-radius:50%;
    filter:blur(20px);
}

.cda-areas::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.35;
    pointer-events:none;
}

.cda-areas-container{
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.cda-mini-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(156,203,75,.14);
    color:#9ccb4b;
    border:1px solid rgba(156,203,75,.35);
    padding:11px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
    margin-bottom:22px;
}

.cda-areas-content h2{
    color:#fff;
    font-size:48px;
    line-height:1.12;
    letter-spacing:-1.5px;
    margin:0 0 22px;
}

.cda-areas-content h2 span{
    display:block;
    color:#9ccb4b;
}

.cda-areas-content p{
    color:#d5e2ee;
    font-size:17px;
    line-height:1.85;
    max-width:620px;
    margin-bottom:32px;
}

.cda-area-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:34px;
}

.cda-area-grid div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.12);
    padding:16px 18px;
    border-radius:14px;
    font-weight:700;
    transition:.3s ease;
    backdrop-filter:blur(8px);
}

.cda-area-grid div:hover{
    transform:translateY(-4px);
    background:rgba(156,203,75,.16);
    border-color:rgba(156,203,75,.45);
}

.cda-area-grid i{
    width:36px;
    height:36px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#061f38;
    background:#9ccb4b;
    font-size:15px;
    flex-shrink:0;
}

.cda-areas-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.cda-btn-main,
.cda-btn-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 24px;
    border-radius:12px;
    font-weight:800;
    text-decoration:none;
    transition:.3s ease;
}

.cda-btn-main{
    background:#9ccb4b;
    color:#061f38;
}

.cda-btn-whatsapp{
    background:#fff;
    color:#061f38;
}

.cda-btn-main:hover,
.cda-btn-whatsapp:hover{
    transform:translateY(-4px);
}

.cda-areas-visual{
    position:relative;
}

.cda-image-card{
    position:relative;
    border-radius:30px;
    padding:12px;
    background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.cda-image-card img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    border-radius:24px;
}

.cda-floating-service{
    position:absolute;
    top:34px;
    right:34px;
    width:118px;
    height:118px;
    border-radius:50%;
    background:#9ccb4b;
    color:#061f38;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 18px 45px rgba(156,203,75,.35);
    border:6px solid rgba(255,255,255,.35);
}

.cda-floating-service strong{
    font-size:31px;
    line-height:1;
    font-weight:900;
}

.cda-floating-service span{
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    margin-top:5px;
}

.cda-floating-logo{
    position:absolute;
    left:34px;
    bottom:34px;
    background:rgba(6,31,56,.92);
    color:#fff;
    padding:16px 22px;
    border-radius:16px;
    font-size:24px;
    font-weight:900;
    letter-spacing:1px;
    border-left:5px solid #9ccb4b;
}

.cda-floating-logo span{
    display:block;
    color:#9ccb4b;
    font-size:12px;
    letter-spacing:5px;
    margin-top:3px;
}

.cda-stats-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:18px;
}

.cda-stat{
    background:#fff;
    border-radius:20px;
    padding:24px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.cda-stat strong{
    display:block;
    color:#061f38;
    font-size:34px;
    font-weight:900;
    margin-bottom:5px;
}

.cda-stat span{
    color:#667085;
    font-size:14px;
    font-weight:700;
}

@media(max-width:992px){
    .cda-areas-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .cda-areas-content h2{
        font-size:40px;
    }

    .cda-image-card img{
        height:430px;
    }
}

@media(max-width:600px){
    .cda-areas{
        padding:75px 15px;
    }

    .cda-areas-content h2{
        font-size:32px;
    }

    .cda-area-grid,
    .cda-stats-row{
        grid-template-columns:1fr;
    }

    .cda-areas-actions a{
        width:100%;
    }

    .cda-image-card img{
        height:330px;
    }

    .cda-floating-service{
        width:92px;
        height:92px;
        top:24px;
        right:24px;
    }

    .cda-floating-service strong{
        font-size:24px;
    }

    .cda-floating-logo{
        left:24px;
        bottom:24px;
        font-size:20px;
    }
}
.services-clean{
    padding:90px 0;
    background:#ffffff;
    font-family:'Montserrat',Arial,sans-serif;
}

.services-clean .container{
    max-width:1180px;
    margin:auto;
    padding:0 20px;
}

.services-head{
    max-width:720px;
    margin-bottom:50px;
}

.services-head span{
    color:#9ccb4b;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.services-head h2{
    color:#071f38;
    font-size:42px;
    line-height:1.2;
    margin:14px 0 16px;
}

.services-head p{
    color:#6b7280;
    font-size:16px;
    line-height:1.8;
}

.services-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #e6ebf0;
    border-left:1px solid #e6ebf0;
}

.service-item{
    display:flex;
    gap:20px;
    padding:34px 28px;
    background:#fff;
    border-right:1px solid #e6ebf0;
    border-bottom:1px solid #e6ebf0;
    transition:.25s ease;
}

.service-item:hover{
    background:#f8fbfd;
}

.service-item i{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:50%;
    background:#071f38;
    color:#9ccb4b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.service-item h3{
    color:#071f38;
    font-size:18px;
    margin:0 0 10px;
    font-weight:800;
}

.service-item p{
    color:#667085;
    font-size:14px;
    line-height:1.7;
    margin:0;
}

@media(max-width:992px){
    .services-list{
        grid-template-columns:repeat(2,1fr);
    }

    .services-head h2{
        font-size:34px;
    }
}

@media(max-width:600px){
    .services-clean{
        padding:70px 0;
    }

    .services-list{
        grid-template-columns:1fr;
    }

    .services-head h2{
        font-size:30px;
    }

    .service-item{
        padding:26px 22px;
    }
}
.cda-problems-section{
    position:relative;
    padding:100px 0;
    background:#081f36;
    overflow:hidden;
    font-family:'Montserrat',Arial,sans-serif;
}

.cda-problems-section::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-240px;
    top:-180px;
    background:rgba(156,203,75,.14);
    border-radius:50%;
}

.cda-problems-section .container{
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.cda-problems-title{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.cda-problems-title span{
    display:inline-block;
    color:#9ccb4b;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.cda-problems-title h2{
    color:#ffffff;
    font-size:42px;
    line-height:1.2;
    margin:0 0 16px;
    font-weight:800;
}

.cda-problems-title p{
    color:#d5dce4;
    font-size:16px;
    line-height:1.8;
    margin:0;
}

.cda-problems-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:55px;
}

.cda-problem-card{
    display:flex;
    align-items:center;
    gap:22px;
    padding:28px;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
    text-decoration:none;
    transition:.35s ease;
}

.cda-problem-card:hover{
    background:#9ccb4b;
    transform:translateY(-7px);
}

.cda-problem-icon{
    width:68px;
    height:68px;
    min-width:68px;
    border-radius:18px;
    background:#9ccb4b;
    color:#081f36;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    transition:.35s ease;
}

.cda-problem-text h3{
    color:#ffffff;
    font-size:21px;
    font-weight:800;
    margin:0 0 8px;
    transition:.35s ease;
}

.cda-problem-text p{
    color:#c8d3dd;
    font-size:15px;
    line-height:1.7;
    margin:0;
    transition:.35s ease;
}

.cda-problem-card:hover .cda-problem-icon{
    background:#081f36;
    color:#9ccb4b;
}

.cda-problem-card:hover h3,
.cda-problem-card:hover p{
    color:#081f36;
}

@media(max-width:768px){
    .cda-problems-section{
        padding:75px 0;
    }

    .cda-problems-title h2{
        font-size:31px;
    }

    .cda-problems-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:40px;
    }

    .cda-problem-card{
        padding:22px;
        gap:18px;
    }

    .cda-problem-icon{
        width:56px;
        height:56px;
        min-width:56px;
        font-size:22px;
    }

    .cda-problem-text h3{
        font-size:18px;
    }
}
.cda-counter-section{

    padding:100px 0;

    background:
    linear-gradient(135deg,#061f38,#0b3155);

    position:relative;

    overflow:hidden;

}

.cda-counter-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(156,203,75,.12);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.cda-counter-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.cda-counter-item{

    position:relative;

    text-align:center;

    padding:45px 30px;

    border-radius:22px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.cda-counter-item:hover{

    transform:translateY(-10px);

    background:#9ccb4b;

}

.counter-icon{

    width:75px;

    height:75px;

    margin:auto;

    border-radius:50%;

    background:#9ccb4b;

    color:#061f38;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.cda-counter-item h2{

    font-size:46px;

    color:#ffffff;

    margin:0;

    font-weight:800;

    transition:.35s;

}

.cda-counter-item span{

    display:block;

    color:#9ccb4b;

    font-size:18px;

    font-weight:700;

    margin-top:8px;

    transition:.35s;

}

.cda-counter-item p{

    margin-top:16px;

    color:#d4dde6;

    line-height:1.7;

    font-size:15px;

    transition:.35s;

}

.cda-counter-item:hover h2,

.cda-counter-item:hover span,

.cda-counter-item:hover p{

    color:#061f38;

}

.cda-counter-item:hover .counter-icon{

    background:#061f38;

    color:#9ccb4b;

}

@media(max-width:992px){

.cda-counter-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.cda-counter-section{

padding:70px 0;

}

.cda-counter-grid{

grid-template-columns:1fr;

}

.cda-counter-item{

padding:35px 25px;

}

}

/* ===== INNER PAGES ===== */
.page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  color: #fff;
  padding: 48px 0 56px;
  margin-top: 0;
}

.page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.page-hero p {
  color: #94a3b8;
  font-size: 1.05rem;
  max-width: 600px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  color: #64748b;
}

.breadcrumb a {
  color: #8bb4f0;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #fff;
}

.nav a.active,
.mobile-nav a.active {
  color: #8bb4f0;
  font-weight: 600;
}

.nav a.active::after {
  width: 100%;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 28px 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.value-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.value-icon {
  width: 48px;
  height: 48px;
  background: #e8f0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a73e8;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.value-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

.value-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

.contact-cta-box {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  color: #0f172a;
}

.contact-cta-box h3 {
  color: #0f172a;
}

.contact-cta-box p {
  color: #475569;
}

.contact-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.contact-cta-buttons .btn {
  justify-content: center;
  width: 100%;
}

.service-areas {
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
}

.service-areas h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

.service-areas p {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 14px;
}

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.area-tags li {
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 40px;
}

.services-list-page .service-item h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #0f172a;
}

.cda-area-grid-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cda-area-grid-page > div {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
}

.cda-area-grid-page > div i {
  display: block;
  font-size: 1.4rem;
  color: #1a73e8;
  margin-bottom: 8px;
}

@media (max-width: 992px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .cda-area-grid-page { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .values-grid { grid-template-columns: 1fr; }
  .cda-area-grid-page { grid-template-columns: 1fr 1fr; }
  .page-hero { padding: 36px 0 44px; }
}