:root {
      --primary: #2E3142;
      --secondary: #FF7700;
      --accent: #24C6DC;
      --bg: #FFFFFF;
      --text-primary: #232323;
      --text-secondary: #555A69;
      --section-radius: 38px;
      --shadow: 0 8px 24px rgba(44,49,66, .10);
    }
    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
      font-size: 1.09rem;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', Arial, sans-serif;
    }
    .navbar-brand img {
      max-width: 56px;
      height: 56px;
    }
    .navbar {
      box-shadow: 0 3px 23px rgba(44,49,66,0.07);
      background: var(--primary) !important;
      transition: background 0.3s;
      z-index: 40;
    }
    .navbar-nav .nav-link {
      color: #fff !important;
      font-weight: 500;
      font-size: 1rem;
      margin: 0 0.2rem;
      letter-spacing: 0.01em;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus {
      color: var(--accent) !important;
    }
    .btn-accent {
      border-radius: 1.2rem;
      background: var(--primary);
      color: #fff;
      font-weight: bold;
      padding: 0.88rem 2.32rem;
      box-shadow: 0 6px 28px rgba(44,49,66,0.1);
      transition: background 0.25s, box-shadow 0.2s;
      border: none;
    }
    .btn-accent:hover {
      background: var(--secondary);
      color: #fff;
      box-shadow: 0 6px 32px rgba(255, 119, 0, 0.15);
    }
    .btn-ghost {
      border-radius: 1.16rem;
      background: none;
      border: 2px solid var(--primary);
      color: var(--primary);
      font-weight: bold;
      padding: 0.88rem 2.32rem;
      transition: background 0.2s, color 0.2s, border 0.2s;
    }
    .btn-ghost:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    .divider-diag {
      position: relative;
      min-height: 32px;
      overflow: hidden;
    }
    .divider-diag svg {
      display: block;
      width: 100%;
      height: auto;
      transform: scaleY(1.6);
      min-height: 38px;
    }
    .section-diag-bg {
      position: relative;
    }
    .section-diag-bg:before {
      content: "";
      display: block;
      position: absolute;
      top: -48px;
      left: -24px;
      right: -24px;
      height: 98px;
      z-index: 0;
      background: linear-gradient(45deg, var(--primary) 50%, transparent 100%);
      opacity: 0.06;
      border-radius: 0 0 150px 0;
      pointer-events: none;
    }
    .floating-particles {
      pointer-events: none;
      position: absolute;
      z-index: 2;
      width: 100%;
      top: 0;
      left: 0;
      height: 110%;
      overflow: visible;
    }
    .section-padding {
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    @media (min-width: 768px) {
      .section-padding { padding-top: 4.5rem; padding-bottom: 4.5rem; padding-left: 3rem; padding-right: 3rem; }
    }
    /* HERO SECTION */
    .hero-title {
      font-size: 2.3rem;
      font-weight: 900;
      line-height: 1.12;
      text-shadow: 0 6px 40px rgba(44,49,66,0.2);
      letter-spacing: -0.015em;
    }
    .hero-sub {
      font-size: 1.21rem;
      font-weight: 500;
      color: var(--accent);
      margin-bottom: 0.6rem;
      text-shadow: 0 2px 18px rgba(44,49,66,0.12);
      letter-spacing: 0.025em;
    }
    .hero-bg {
      background: linear-gradient(135deg, var(--primary) 80%, var(--accent) 100%);
      position: relative;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .hero-title { font-size: 3.2rem; }
    }
    .trust-bar img {
      height: 36px;
      max-width: 120px;
      margin: 0 10px;
      filter: grayscale(1) contrast(1.1) brightness(1.09);
      opacity: 0.88;
      transition: filter 0.12s;
    }
    .trust-bar img:hover { filter: none; opacity: 1; }
    .section-header {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary);
    }
    .gradient-border {
      border: 4px solid;
      border-image: linear-gradient(45deg, var(--secondary) 10%, var(--accent) 89%) 1;
      border-radius: 1.1rem;
      background: #fff;
      box-shadow: 0 8px 38px rgba(44,49,66,0.11);
    }
    /* SERVICES CARDS WITH 3D TILT */
    .service-card {
      border: none;
      border-radius: 1.07rem;
      overflow: visible;
      background: #fff;
      padding: 1.56rem 1rem 1.36rem 1rem;
      box-shadow: 0 12px 30px rgba(44,49,66,0.06);
      position: relative;
      cursor: pointer;
      perspective: 600px;
      transition: transform 0.23s cubic-bezier(.35,.82,.54,1.15), box-shadow 0.17s;
      will-change: transform, box-shadow;
    }
    .service-card:hover {
      transform: scale(1.045) rotateY(3deg) rotateZ(.6deg);
      box-shadow: 0 18px 63px 12px rgba(36,198,220,0.16);
      z-index: 3;
    }
    .service-card .service-icon {
      margin-bottom: 1.12rem;
      width: 96px;
      height: 96px;
      object-fit: cover;
      border-radius: 1.1rem;
      box-shadow: 0 4px 24px rgba(44,49,66,0.17);
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .service-card .service-title {
      color: var(--secondary);
      font-size: 1.23rem;
      font-weight: 700;
      margin-bottom: 0.65rem;
      font-family: 'Montserrat', Arial, sans-serif;
      text-align: center;
    }
    .service-card .service-desc {
      color: var(--text-secondary);
      font-size: 1.03rem;
      text-align: center;
      min-height: 70px;
    }
    /* WORKFLOW STEPS */
    .workflow-step {
      background: linear-gradient(120deg, var(--accent) 21%, #fff 100%);
      color: var(--primary);
      border-radius: 1.15rem;
      box-shadow: 0 4px 28px rgba(44,49,66,0.11);
      padding: 2rem 1.2rem 1.2rem 1.2rem;
      margin-bottom: 2.3rem;
      text-align: center;
      min-height: 210px;
      transition: box-shadow 0.22s;
    }
    .workflow-step .step-num {
      font-size: 2.1rem;
      font-weight: 900;
      color: var(--secondary);
      margin-bottom: 0.5rem;
      line-height: 1;
      display: inline-block;
      border-radius: 100%;
      background: #fff4e7;
      padding: 0.17em 0.6em;
      box-shadow: 0 4px 19px rgba(255,119,0,0.06);
    }
    .workflow-step .step-title {
      font-size: 1.11rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
      font-family: 'Montserrat', Arial, sans-serif;
    }
    .workflow-step .step-desc {
      font-size: 1.02rem;
      color: var(--text-secondary);
      margin-bottom: 0px;
    }
    /* PORTFOLIO - LIGHTBOX GALLERY */
    .portfolio-gallery { display: grid; grid-template-columns: 1fr; gap: 2rem; }
    @media (min-width: 768px) {
      .portfolio-gallery { grid-template-columns: repeat(3,1fr); gap: 2.3rem;}
    }
    .portfolio-item {
      border-radius: 1.2rem;
      overflow: hidden;
      box-shadow: 0 8px 34px rgba(36,198,220,0.13);
      background: #fff;
      position: relative;
      cursor: pointer;
      transition: transform 0.18s, box-shadow 0.18s;
    }
    .portfolio-item:hover {
      transform: scale(1.025);
      box-shadow: 0 12px 48px rgba(255,119,0,0.13);
    }
    .portfolio-item img {
      width: 100%;
      height: 224px;
      object-fit: cover;
      transition: transform 0.9s cubic-bezier(0.25,1,.2,1);
    }
    .portfolio-item:hover img {
      transform: scale(1.08) translateY(-8px);
      filter: brightness(1.11);
    }
    .portfolio-caption {
      background: rgba(44,49,66,0.83);
      color: #fff;
      font-size: 1.12rem;
      font-weight: 600;
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      padding: 1rem 1.2rem 0.7rem 1.2rem;
      border-bottom-right-radius: 1.2rem;
      border-bottom-left-radius: 1.2rem;
      box-shadow: 0 2px 13px rgba(0,0,0,0.13);
      letter-spacing: -.012em;
    }
    /* PLANS PRICING */
    .plan-card {
      border: none;
      border-radius: 1.15rem;
      box-shadow: 0 8px 38px rgba(255, 119, 0, 0.13);
      padding: 2.5rem 1.3rem 2rem 1.3rem;
      background: #fff;
      margin-bottom: 2.8rem;
      position: relative;
      overflow: visible;
      min-height: 440px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .plan-popular {
      border: 4px solid var(--accent);
      background: linear-gradient(115deg, #f9fbff 60%, #e9f9ff 100%);
    }
    .plan-title {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 0.5rem;
    }
    .plan-price {
      font-size: 2.18rem;
      font-weight: 900;
      color: var(--secondary);
      margin-bottom: 0.78rem;
      letter-spacing: -0.03em;
    }
    .plan-features {
      font-size: 1.07rem;
      color: var(--text-secondary);
      margin-bottom: 1.25rem;
      line-height: 1.6;
      list-style: none;
      padding: 0;
    }
    .plan-card .btn { margin-top: auto; }
    /* TESTIMONIALS CAROUSEL */
    .testimonial-outer {
      background: #F1F5F9;
      border-radius: 1.2rem;
      padding: 2.2rem 1.3rem 2rem 1.3rem;
      position: relative;
      margin-bottom: 1.6rem;
      box-shadow: 0 6px 40px rgba(44,49,66,0.06);
      text-align: center;
    }
    .testimonial-outer .testimonial-quote {
      font-size: 1.18rem;
      color: var(--primary);
      line-height: 1.6;
      margin-bottom: 1.05rem;
    }
    .testimonial-person {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 0.35rem;
    }
    .testimonial-avatar {
      width: 96px;
      height: 96px;
      object-fit: cover;
      border-radius: 50%;
      border: 2.5px solid var(--accent);
      background: #fff;
      margin-right: 0.7rem;
    }
    .testimonial-name {
      font-weight: 700;
      font-size: 1rem;
      color: var(--secondary);
      line-height: 1.12;
      padding-top: 0.13rem;
    }
    .testimonial-role {
      font-size: 0.92rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    .testimonial-stars {
      color: var(--secondary);
      font-size: 1.3rem;
      padding-bottom: 0.25rem;
      margin-bottom: 0.6rem;
      letter-spacing: 0.09em;
    }
    /* TEAM SECTION */
    .team-member-card {
      border: none;
      background: #fff;
      border-radius: 1.2rem;
      overflow: hidden;
      text-align: center;
      box-shadow: 0 6px 34px rgba(36,198,220,0.10);
      margin-bottom: 2.8rem;
      min-height: 365px;
      position: relative;
      transition: box-shadow 0.18s, transform 0.15s;
    }
    .team-member-card:hover {
      box-shadow: 0 14px 44px rgba(255,119,0,0.11);
      transform: scale(1.032) translateY(-10px);
      z-index: 12;
    }
    .team-img {
      width: 192px;
      height: 192px;
      margin-top: -35px;
      object-fit: cover;
      border-radius: 50%;
      clip-path: ellipse(90% 70% at 50% 45%);
      border: 6px solid #fff;
      box-shadow: 0 8px 24px rgba(44,49,66,0.13);
      margin-bottom: 1rem;
    }
    .team-member-card .team-name {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 1.13rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.15rem;
    }
    .team-member-card .team-role {
      font-size: 1.01rem;
      font-weight: 500;
      color: var(--secondary);
      margin-bottom: 0.32rem;
      letter-spacing: 0.04em;
    }
    .team-social-icons a {
      color: var(--accent);
      font-size: 1.38rem;
      margin: 0 0.2rem;
      transition: color 0.14s;
    }
    .team-social-icons a:hover { color: var(--secondary); }
    .team-bio {
      font-size: .97rem;
      color: var(--text-secondary);
      margin-bottom: 0.3rem;
    }
    /* FAQ Accordion */
    .faq-accordion .accordion-button {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 1.13rem;
      font-weight: 700;
      color: var(--primary);
      background: #F9FAFB;
      border-radius: 0.9rem !important;
    }
    .faq-accordion .accordion-button:not(.collapsed) {
      color: var(--secondary);
      background: #fff8f2;
      box-shadow: 0 2px 20px 2px rgba(255,119,0,0.03);
    }
    .faq-accordion .accordion-body {
      color: var(--text-secondary);
      font-size: 1.01rem;
      background: #F9FAFB;
      border-radius: 0 0 0.9rem 0.9rem;
    }
    /* Contact Section */
    .contact-section-bg {
      background: var(--primary);
      color: #fff;
      border-radius: 2rem;
      position: relative;
      overflow: visible;
    }
    .contact-form-card {
      background: #fff;
      border-radius: 1.25rem;
      padding: 2.5rem 1.1rem 2rem 1.1rem;
      box-shadow: 0 12px 40px rgba(44,49,66,0.19);
    }
    /* Newsletter */
    .newsletter-section {
      background: var(--secondary);
      color: #fff !important;
      padding: 2.7rem 1.1rem 2.79rem 1.1rem;
      border-radius: 2.1rem;
      position: relative;
      overflow: hidden;
    }
    .newsletter-section .form-control {
      border-radius: 1rem;
      border: none;
      font-size: 1.13rem;
      min-height: 50px;
      margin: 8px 0;
    }
    /* FOOTER */
    .footer-bg {
      background: #232323;
      color: #fff;
      font-size: 0.99rem;
      padding-top: 2.8rem;
      padding-bottom: 1.8rem;
      border-top: 8px solid var(--secondary);
      position: relative;
    }
    .footer-link { color: var(--accent); font-weight: 600; text-decoration: none; margin-right: 1.2rem;}
    .footer-link:hover { color: var(--secondary);}
    .footer-social img {
      width: 38px;
      height: 38px;
      border-radius: 33%;
      background: #fff;
      padding: 5px;
      filter: grayscale(1) brightness(1.13);
      margin-right: 8px;
      margin-bottom: 7px;
      transition: filter 0.12s;
    }
    .footer-social img:hover { filter: none; }
    .footer-newsletter .form-control {
      border: none;
      border-radius: 1.1rem;
      margin-bottom: 1rem;
    }
    .footer-legal {
      font-size: 0.93rem;
      color: #b2b8bf;
      margin-top: 1.58rem;
    }
    #cookieConsentBanner {
      display: none;
      position: fixed;
      z-index: 11111;
      left: 0;
      right: 0;
      bottom: 10px;
      margin: 0 auto;
      width: 100%;
      max-width: 420px;
      border-radius: 1.25rem;
      background: #232323;
      color: #fff;
      padding: 1.2rem 1.6rem;
      box-shadow: 0 6px 44px rgba(44,49,66,0.23);
      font-size: 1.04rem;
    }
    #cookieConsentBanner button {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 0.9rem;
      padding: 0.64em 1.6em;
      font-weight: bold;
      margin-left: 1.2rem;
      margin-top: .5em;
      min-width: 96px;
      box-shadow: 0 2px 14px rgba(36,198,220,.13);
      transition: background 0.19s;
    }
    #cookieConsentBanner button:hover { background: var(--secondary);}
    /* Scroll Animations */
    .scroll-fade-in {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s cubic-bezier(.18,1.08,.8,.77), transform 0.65s cubic-bezier(.18,1.08,.8,.77);
    }
    .scroll-fade-in.visible {
      opacity: 1;
      transform: none;
    }
    /* Misc Utility */
    ::selection { background: var(--accent); color: #fff;}
    /* Custom scrollbar */
    ::-webkit-scrollbar { width: 8px; background: #eceff1;}
    ::-webkit-scrollbar-thumb { background: linear-gradient(120deg, var(--primary), var(--accent)); border-radius: 7px; }
    /* Hide default input spinners */
    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
    input, textarea, select:focus { outline-color: var(--primary);}