:root {
          --bg-primary: #07111F;
          /* Deep Navy */
          --bg-secondary: #0C1729;
          /* Dark Blue */
          --glow-purple: rgba(124, 92, 255, 0.18);
          /* #7C5CFF 18% */
          --glow-cyan: rgba(0, 212, 255, 0.14);
          /* #00D4FF 14% */
          --card-bg: rgba(255, 255, 255, 0.08);
          /* Glass card */
          --card-border: rgba(255, 255, 255, 0.12);
          /* Thin translucent white border */
          --muted: rgba(238, 244, 255, 0.72);
          /* Paragraph color */
          --heading: #EEF4FF;
          /* Heading color */
          --accent-start: #7C5CFF;
          /* Button gradient start */
          --accent-end: #5F8CFF;
          /* Button gradient end */
          --shadow: 0 18px 50px rgba(3, 8, 16, 0.6);
          /* Premium shadow */
          --radius: 18px;
          --max: 1200px;
          --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      }

      /* Base */
      * {
          box-sizing: border-box
      }

      html {
          scroll-behavior: smooth
      }

      body {
          margin: 0;
          font-family: var(--font);
          color: var(--heading);
          background:
              radial-gradient(circle at top left, var(--glow-cyan), transparent 22%),
              radial-gradient(circle at top right, var(--glow-purple), transparent 26%),
              linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
          min-height: 100vh;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
      }

      /* Subtle architectural grid */
      .background-grid {
          position: fixed;
          inset: 0;
          background-image:
              linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
          background-size: 70px 70px;
          z-index: -3;
          opacity: 0.6;
      }

      /* Large soft glows */
      .background-glow {
          position: fixed;
          width: 700px;
          height: 700px;
          border-radius: 50%;
          filter: blur(130px);
          opacity: 1;
          z-index: -2;
      }

      /* ==========================================
            FOOTER CSS
   File Name : footer.css
========================================== */

      /* ==========================================
            VARIABLES
========================================== */

      :root {

          --footer-primary: #7c5cff;
          --footer-accent: #00d4ff;

          --footer-bg: #050b18;

          --footer-text: #ffffff;

          --footer-muted: rgba(255, 255, 255, .75);

          --footer-border: rgba(255, 255, 255, .08);

      }

      /* ==========================================
            FOOTER
========================================== */

      .footer {

          width: 100%;

          background: var(--footer-bg);

          border-top: 1px solid var(--footer-border);

          margin-top: 120px;

      }

      /* ==========================================
        FOOTER CONTAINER
========================================== */

      .footer-container {

          width: 100%;

          max-width: 1400px;

          margin: 0 auto;

          padding: 80px 40px 30px;

      }

      /* ==========================================
        FOOTER GRID
========================================== */

      .footer-grid {

          display: grid;

          grid-template-columns: 2fr 1fr 1fr 1.2fr;

          gap: 60px;

      }

      /* ==========================================
        FOOTER COLUMN
========================================== */

      .footer-column {

          display: flex;

          flex-direction: column;

      }

      /* ==========================================
            BRAND
========================================== */

      .footer-brand {

          display: flex;

          align-items: center;

          gap: 14px;

          text-decoration: none;

      }

      .footer-brandmark {

          width: 52px;

          height: 52px;

          display: flex;

          align-items: center;

          justify-content: center;

          border-radius: 16px;

          background: linear-gradient(135deg,
                  var(--footer-primary),
                  var(--footer-accent));

          color: #fff;

          font-size: 22px;

          font-weight: 700;

          box-shadow: 0 10px 25px rgba(0, 212, 255, .22);

      }

      .footer-brandtext {

          color: var(--footer-text);

          font-size: 28px;

          font-weight: 700;

      }

      /* ==========================================
        DESCRIPTION
========================================== */

      .footer-description {

          margin-top: 24px;

          color: var(--footer-muted);

          line-height: 1.9;

          font-size: 15px;

          max-width: 420px;

      }

      /* ==========================================
            TITLES
========================================== */

      .footer-title {

          color: var(--footer-text);

          font-size: 20px;

          margin-bottom: 24px;

      }

      /* ==========================================
            LINKS
========================================== */

      .footer-links {

          list-style: none;

          padding: 0;

          margin: 0;

      }

      .footer-links li {

          margin-bottom: 14px;

      }

      .footer-links a {

          color: var(--footer-muted);

          text-decoration: none;

          transition: .30s;

          font-size: 15px;

      }

      .footer-links a:hover {

          color: #fff;

          padding-left: 8px;

      }

      /* ==========================================
            CONTACT
========================================== */

      .footer-contact {

          list-style: none;

          padding: 0;

          margin: 0;

          color: var(--footer-muted);

      }

      .footer-contact li {

          margin-bottom: 14px;

          line-height: 1.8;

          font-size: 15px;

      }

      /* ==========================================
        SOCIAL ICONS
========================================== */

      .footer-socials {

          display: flex;

          gap: 14px;

          margin-top: 24px;

          flex-wrap: wrap;

      }

      .footer-social {

          width: 48px;

          height: 48px;

          display: flex;

          align-items: center;

          justify-content: center;

          border-radius: 14px;

          text-decoration: none;

          color: #fff;

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

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

          transition: .30s;

      }

      .footer-social:hover {

          transform: translateY(-5px);

          background: linear-gradient(135deg,
                  var(--footer-primary),
                  var(--footer-accent));

      }

      /* ==========================================
        COPYRIGHT
========================================== */

      .footer-copyright {

          margin-top: 60px;

          padding-top: 25px;

          border-top: 1px solid var(--footer-border);

          text-align: center;

      }

      .footer-copyright p {

          color: #94a3b8;

          font-size: 15px;

          margin: 0;

      }

      /* ==========================================
        TABLET
========================================== */

      @media (max-width:1100px) {

          .footer-grid {

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

              gap: 45px;

          }

      }

      /* ==========================================
        MOBILE
========================================== */

      @media (max-width:768px) {

          .footer-container {

              padding: 60px 20px 25px;

          }

          .footer-grid {

              grid-template-columns: 1fr;

              gap: 40px;

              text-align: center;

          }

          .footer-brand {

              justify-content: center;

          }

          .footer-description {

              margin-left: auto;

              margin-right: auto;

          }

          .footer-socials {

              justify-content: center;

          }

      }

      /* Layout tokens */
      .container {
          width: min(100% - 32px, var(--max));
          margin-inline: auto;
      }

      .section {
          padding: 84px 0;
      }

      .section h2 {
          color: var(--heading);
          font-size: clamp(28px, 4vw, 42px);
          margin: 0 0 12px;
      }

      .section-intro {
          max-width: 720px;
          color: var(--muted);
          margin: 0 0 28px;
          line-height: 1.8;
      }

      /* Hero */
      .hero {
          padding: 28px 0 70px;
          position: relative;
          overflow: hidden;
      }

      .hero-inner {
          display: grid;
          grid-template-columns: 1.25fr .9fr;
          gap: 28px;
          align-items: center;
          min-height: 78vh;
      }

      .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 8px 14px;
          border-radius: 999px;
          color: var(--muted);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
          border: 1px solid rgba(255, 255, 255, 0.06);
      }

      .eyebrow::before {
          content: "";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
          box-shadow: 0 0 18px rgba(124, 92, 255, 0.35);
      }

      .hero h1 {
          font-size: clamp(40px, 6vw, 72px);
          line-height: 1.02;
          margin: 0 0 18px;
          color: var(--heading);
          letter-spacing: -0.03em;
      }

      .hero p {
          max-width: 660px;
          color: var(--muted);
          line-height: 1.9;
          font-size: 17px;
          margin: 0 0 28px;
      }

      /* Buttons */
      .hero-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          margin-bottom: 30px;
      }

      .btn {
          padding: 13px 20px;
          border-radius: 999px;
          border: 1px solid transparent;
          font-weight: 700;
          transition: transform .25s ease, box-shadow .25s ease, opacity .15s ease;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: var(--heading);
      }

      /* Primary button — gradient with glow */
      .btn.primary {
          background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
          color: white;
          box-shadow: 0 8px 30px rgba(95, 140, 255, 0.12), 0 6px 18px rgba(124, 92, 255, 0.08);
          position: relative;
          overflow: visible;
      }

      .btn.primary::after {
          content: "";
          position: absolute;
          inset: -6px;
          border-radius: 999px;
          background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(95, 140, 255, 0.08));
          filter: blur(18px);
          z-index: -1;
          opacity: 0.9;
          transition: opacity .25s ease, transform .25s ease;
      }

      .btn.primary:hover {
          transform: translateY(-4px);
          box-shadow: 0 20px 50px rgba(95, 140, 255, 0.16);
      }

      .btn.primary:active {
          transform: translateY(-1px);
      }

      /* Secondary button — glass style */
      .btn.secondary {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: var(--heading);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
      }

      /* Panels & cards (glassmorphism recipe) */

      .hero-panel,
      .info-card,
      .service,
      .case,
      .trust-item,
      .testimonial,
      .contact-box,
      .team-card {
          background: var(--card-bg);
          border: 1px solid var(--card-border);
          border-radius: var(--radius);
          padding: 24px;
          box-shadow: var(--shadow);
          backdrop-filter: blur(16px) saturate(120%);
          -webkit-backdrop-filter: blur(16px) saturate(120%);
      }

      /* Stats and boxes */
      .hero-stats {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
          margin-top: 18px;
      }

      .stat {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
          border-radius: 16px;
          padding: 18px;
          border: 1px solid rgba(255, 255, 255, 0.06);
      }

      .stat strong {
          display: block;
          font-size: 28px;
          margin-bottom: 6px;
          color: #fff;
      }

      .stat span {
          color: var(--muted);
          font-size: 14px;
      }

      /* Mini box */
      .mini-box {
          padding: 16px 18px;
          border-radius: 16px;
          background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), rgba(95, 140, 255, 0.04));
          border: 1px solid rgba(255, 255, 255, 0.06);
          color: var(--muted);
      }

      /* Service cards hover */
      .service {
          padding: 22px;
          position: relative;
          overflow: hidden;
          transition: .35s ease;
      }

      .service::before {
          content: "";
          position: absolute;
          inset: auto auto 0 0;
          width: 100%;
          height: 3px;
          background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
          transform: scaleX(0);
          transform-origin: left;
          transition: .35s ease;
      }

      .service:hover {
          transform: translateY(-6px);
          border-color: rgba(124, 92, 255, .22);
      }

      .service:hover::before {
          transform: scaleX(1);
      }

      /* Team cards */
      .team-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
      }

      .team-card {
          position: relative;
          overflow: hidden;
          border-radius: 22px;
          padding: 24px;
          min-height: 340px;
          transform: translateY(0);
          transition: transform .35s ease, border-color .35s ease, background .35s ease;
      }

      .team-card::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 4px;
          background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
          transform: scaleX(.2);
          transform-origin: left;
          transition: .35s ease;
      }

      .team-card:hover {
          transform: translateY(-10px);
          border-color: rgba(124, 92, 255, 0.22);
      }

      .team-card:hover::after {
          transform: scaleX(1);
      }

      /* Skills pills */
      .skills {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .skills li {
          padding: 8px 11px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .05);
          border: 1px solid rgba(255, 255, 255, .06);
          color: #dce7f5;
          font-size: 13px;
          transition: .3s ease;
      }

      .team-card:hover .skills li {
          background: rgba(124, 92, 255, .10);
          border-color: rgba(124, 92, 255, .18);
          transform: translateY(-1px);
      }

      /* Cases grid */
      .case-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 18px;
      }

      .case {
          padding: 22px;
          min-height: 220px;
          transition: .3s ease;
      }

      .case:hover {
          transform: translateY(-6px);
          border-color: rgba(95, 140, 255, .22);
      }

      .case .tag {
          display: inline-flex;
          margin-top: 14px;
          padding: 7px 10px;
          border-radius: 999px;
          background: rgba(95, 140, 255, .12);
          color: #cae2ff;
          font-size: 12px;
          border: 1px solid rgba(95, 140, 255, .15);
      }

      /* Trust grid */
      .trust-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px;
      }

      .trust-item {
          padding: 18px;
      }

      /* Process list */
      .process-list {
          display: grid;
          gap: 14px;
          margin: 0;
          padding: 0;
          list-style: none;
          counter-reset: step;
      }

      .process-list li {
          counter-increment: step;
          position: relative;
          padding: 18px 18px 18px 64px;
          border-radius: 16px;
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .04);
          color: var(--muted);
      }

      .process-list li::before {
          content: counter(step);
          position: absolute;
          left: 18px;
          top: 18px;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
          color: #04111c;
          font-weight: 800;
      }

      /* Testimonials */
      .testimonials-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 18px;
      }

      .testimonial {
          padding: 22px;
      }

      .testimonial p {
          margin: 0 0 12px;
          color: #dce7f5;
          line-height: 1.8;
          font-size: 15px;
      }

      .testimonial cite {
          color: var(--muted);
          font-style: normal;
          font-size: 13px;
      }

      /* Contact form */
      .contact-form {
          display: grid;
          gap: 14px;
          margin-top: 18px;
      }

      .contact-form label {
          display: grid;
          gap: 8px;
          color: var(--muted);
          font-size: 14px;
      }

      .contact-form input,
      .contact-form textarea {
          width: 100%;
          padding: 14px 15px;
          border-radius: 14px;
          border: 1px solid rgba(255, 255, 255, .08);
          background: rgba(255, 255, 255, .03);
          color: var(--heading);
          outline: none;
          transition: .25s ease;
          font-family: inherit;
      }

      .contact-form input:focus,
      .contact-form textarea:focus {
          border-color: rgba(124, 92, 255, .35);
          box-shadow: 0 0 0 6px rgba(124, 92, 255, .06);
      }

      body {
          background: #07121d;
      }

      /* Grid Background */
      .background-grid {
          position: fixed;
          inset: 0;
          background-image:
              linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
              linear-gradient(90deg,
                  rgba(255, 255, 255, .03) 1px,
                  transparent 1px);
          background-size: 70px 70px;
          z-index: -3;
      }

      /* Glow Effect */
      .background-glow {
          position: fixed;
          width: 600px;
          height: 600px;
          border-radius: 50%;
          filter: blur(130px);
          opacity: .18;
          z-index: -2;
      }

      .glow-one {
          background: #22d3ee;
          left: -150px;
          top: -100px;
      }

      .glow-two {
          background: #7c3aed;
          right: -150px;
          bottom: -120px;
      }

      /* Responsive */
      @media (max-width:900px) {

          .hero-inner,
          .about-grid {
              grid-template-columns: 1fr;
          }

          .hero h1 {
              font-size: clamp(38px, 11vw, 60px);
          }
      }

      @media (max-width:640px) {
          .section {
              padding: 64px 0;
          }

          .hero-stats {
              grid-template-columns: 1fr;
          }

          .hero-actions,
          .form-actions {
              flex-direction: column;
          }

          .btn {
              width: 100%;
          }

          .team-card,
          .info-card,
          .case,
          .trust-item,
          .testimonial,
          .contact-box {
              padding: 20px;
          }

          .process-list li {
              padding-left: 56px;
          }
      }

      /* Accessibility and small polish */
      a:focus,
      button:focus,
      input:focus,
      textarea:focus {
          outline: 2px solid rgba(124, 92, 255, 0.18);
          outline-offset: 2px;
      }

      /* Full JavaScript (save as script.js) This keeps the same behavior but uses a small progressive enhancement: it binds submission handlers to forms with class contact-form and uses a simple alert as before. It also prevents double-binding if included multiple times. function handleSubmit(e) {
        e.preventDefault();
        // Replace this with real submission (fetch/AJAX) in production
        alert("Thank you! Your message has been submitted.");
        e.target.reset();
    }

    document.addEventListener('DOMContentLoaded', function() {
            var forms=document.querySelectorAll('.contact-form');

            forms.forEach(function(f) {
                    f.addEventListener('submit', handleSubmit);
                });
        }); */
      /* ===========================
   HEADER CSS
=========================== */

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html {
          scroll-behavior: smooth;
      }

      :root {
          --primary: #7c5cff;
          --accent: #00d4ff;
          --bg: rgba(7, 12, 24, .92);
          --text: #ffffff;
          --muted: rgba(255, 255, 255, .75);
          --line: rgba(255, 255, 255, .10);
          --shadow: 0 12px 30px rgba(0, 0, 0, .25);
      }

      body {
          padding-top: 84px;
          font-family: Arial, sans-serif;
          background: #08111f;
          color: #fff;
      }

      /* ===========================
   HEADER
=========================== */

      .header {

          position: fixed;
          top: 0;
          left: 0;

          width: 100%;

          z-index: 99999;

          background: var(--bg);

          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);

          border-bottom: 1px solid var(--line);

          box-shadow: var(--shadow);

          transition: .35s;
      }

      .header.scrolled {

          background: rgba(7, 12, 24, .98);

          box-shadow: 0 18px 40px rgba(0, 0, 0, .35);

      }

      /* ===========================
   CONTAINER
=========================== */

      .header-container {

          max-width: 1400px;

          margin: auto;

          height: 84px;

          padding: 0 24px;

          display: flex;

          align-items: center;

          justify-content: space-between;

      }

      /* ===========================
   LOGO
=========================== */

      .brand {

          display: flex;

          align-items: center;

          gap: 12px;

          text-decoration: none;

          color: #fff;

          font-weight: 700;

          flex-shrink: 0;

      }

      .brandmark {

          width: 45px;

          height: 45px;

          border-radius: 14px;

          display: grid;

          place-items: center;

          color: #fff;

          background: linear-gradient(135deg, var(--primary), var(--accent));

          font-size: 18px;

      }

      .brandtext {

          font-size: 22px;

          letter-spacing: .5px;

      }

      /* ===========================
   NAVIGATION
=========================== */

      .navbar {

          flex: 1;

          display: flex;

          justify-content: center;

      }

      .nav-menu {

          list-style: none;

          display: flex;

          gap: 22px;

          align-items: center;

      }

      .nav-menu li {

          transition: .3s;

      }

      .nav-menu a {

          position: relative;

          display: block;

          text-decoration: none;

          color: var(--muted);

          font-size: 15px;

          font-weight: 600;

          padding: 12px 0;

          transition: .30s;

      }

      .nav-menu a::after {

          content: "";

          position: absolute;

          left: 0;

          bottom: 2px;

          width: 100%;

          height: 2px;

          background: linear-gradient(90deg, var(--primary), var(--accent));

          transform: scaleX(0);

          transform-origin: left;

          transition: .30s;

      }

      /* ===========================
   HOVER EFFECT
=========================== */

      .nav-menu li:hover {

          transform: scale(0.9);

      }

      .nav-menu a:hover {

          color: #fff;

      }

      .nav-menu a:hover::after {

          transform: scaleX(1);

      }

      /* ===========================
   BUTTON
=========================== */

      .btn {

          text-decoration: none;

          display: flex;

          align-items: center;

          justify-content: center;

      }

      .btn--small {

          padding: 12px 24px;

          border-radius: 50px;

      }

      .btn--primary {

          color: #fff;

          background: linear-gradient(135deg, var(--primary), #4e7fff);

          transition: .35s;

      }

      .btn--primary:hover {

          transform: translateY(-3px);

          box-shadow: 0 15px 30px rgba(124, 92, 255, .35);

      }

      /* ===========================
   MENU BUTTON
=========================== */

      .nav-toggle {

          width: 48px;

          height: 48px;

          display: none;

          cursor: pointer;

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

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

          border-radius: 12px;

          transition: .30s;

      }

      .nav-toggle:hover {

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

      }

      .nav-toggle span {

          display: block;

          width: 22px;

          height: 2px;

          margin: 5px auto;

          background: #fff;

          transition: .35s;

      }

      /* Hamburger Animation */

      .nav-toggle.active span:nth-child(1) {

          transform: translateY(7px) rotate(45deg);

      }

      .nav-toggle.active span:nth-child(2) {

          opacity: 0;

      }

      .nav-toggle.active span:nth-child(3) {

          transform: translateY(-7px) rotate(-45deg);

      }

      /* ===========================
   MOBILE
=========================== */

      @media(max-width:1100px) {

          body {

              padding-top: 76px;

          }

          .header-container {

              height: 76px;

          }

          .nav-toggle {

              display: block;

          }

          .btn {

              display: none;

          }

          .navbar {

              position: absolute;

              top: 76px;

              left: 0;

              width: 100%;

          }

          .nav-menu {

              position: absolute;

              top: 0;

              left: 0;

              width: 100%;

              background: #091523;

              flex-direction: column;

              align-items: stretch;

              gap: 8px;

              padding: 18px;

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

              transform: translateY(-20px);

              opacity: 0;

              visibility: hidden;

              transition: .35s;

          }

          .nav-menu.open {

              transform: translateY(0);

              opacity: 1;

              visibility: visible;

          }

          .nav-menu li {

              width: 100%;

          }

          .nav-menu a {

              width: 100%;

              padding: 15px 18px;

              border-radius: 12px;

              transition: .30s;

          }

          .nav-menu a::after {

              display: none;

          }

          .nav-menu a:hover {

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

              color: #fff;

              transform: scale(1.09);

              padding-left: 28px;

          }

          .btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 52px;
              padding: 0 22px;
              border-radius: 999px;
              border: 1px solid transparent;
              transition: 0.3s ease;
              cursor: pointer;
              font-weight: 600;
          }

          .btn--small {
              min-height: 44px;
              padding: 0 18px;
              font-size: 0.95rem;
          }

          .btn--primary {
              background: linear-gradient(135deg, var(--primary), #5a8bff);
              color: white;
              box-shadow: 0 12px 28px rgba(124, 92, 255, 0.32);
          }

          .btn--glass {
              background: rgba(255, 255, 255, 0.07);
              border-color: var(--line);
              color: var(--text);
          }

          .btn:hover {
              transform: translateY(-2px);
          }

      }

      /* ==========================================
   SPACING & PADDING IMPROVEMENTS
   (No Design Changes)
========================================== */

      /* More space between sections */
      .section {
          padding: 110px 0;
      }

      /* More breathing room inside cards */
      .hero-panel,
      .info-card,
      .service,
      .case,
      .trust-item,
      .testimonial,
      .contact-box,
      .team-card {
          padding: 34px;
      }

      /* Section headings */
      .section h2 {
          margin-bottom: 18px;
      }

      /* Paragraph spacing */
      .section-intro {
          margin-bottom: 38px;
          line-height: 2;
      }

      /* Hero text */
      .hero p {
          line-height: 2;
          margin-bottom: 36px;
      }

      /* General paragraph spacing */
      p {
          line-height: 2;
          margin-bottom: 18px;
      }

      /* About information list */
      .info-list {
          display: flex;
          flex-direction: column;
          gap: 24px;
      }

      .info-item {
          line-height: 1.9;
          padding: 18px 0;
      }

      /* Services */
      .services-grid {
          gap: 28px;
      }

      .service h3 {
          margin-bottom: 16px;
      }

      .service p {
          line-height: 1.9;
      }

      /* Team Cards */
      .team-card h3 {
          margin-bottom: 12px;
      }

      .team-card .role {
          margin-bottom: 12px;
      }

      .team-card .exp {
          margin-bottom: 18px;
      }

      .team-card .desc {
          line-height: 1.9;
          margin-bottom: 24px;
      }

      .skills {
          gap: 12px;
          margin-top: 22px;
      }

      /* Case Studies */
      .case h3 {
          margin-bottom: 16px;
      }

      .case p {
          line-height: 1.9;
          margin-bottom: 22px;
      }

      /* Trust Section */
      .trust-item h3 {
          margin-bottom: 14px;
      }

      .trust-item p {
          line-height: 1.9;
      }

      /* Process */
      .process-list {
          gap: 22px;
      }

      .process-list li {
          line-height: 1.9;
          padding-top: 22px;
          padding-bottom: 22px;
      }

      /* Testimonials */
      .testimonial {
          padding: 30px;
      }

      .testimonial p {
          line-height: 2;
          margin-bottom: 18px;
      }

      /* Contact Form */
      .contact-form {
          gap: 22px;
      }

      .contact-form label {
          gap: 10px;
      }

      .contact-form input,
      .contact-form textarea {
          padding: 18px;
      }

      /* Hero Statistics */
      .hero-stats {
          gap: 20px;
      }

      .stat {
          padding: 24px;
      }

      .mini-box {
          padding: 20px 22px;
          margin-top: 18px;
      }

      /* Footer */
      .footer-description,
      .footer-contact li,
      .footer-links li {
          line-height: 2;
      }

      .footer-column {
          gap: 10px;
      }

      /* ==========================================
   PREMIUM UI ENHANCEMENTS
   (Safe - Add at End of CSS)
========================================== */

      /* Smooth transitions */
      .hero-panel,
      .info-card,
      .service,
      .case,
      .team-card,
      .trust-item,
      .testimonial,
      .contact-box,
      .stat,
      .mini-box,
      .btn {
          transition: all 0.35s ease;
      }

      /* Better glass effect */
      .hero-panel,
      .info-card,
      .service,
      .case,
      .team-card,
      .trust-item,
      .testimonial,
      .contact-box {
          background: rgba(255, 255, 255, 0.09);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
      }

      /* Better hover on cards */
      .info-card:hover,
      .service:hover,
      .case:hover,
      .team-card:hover,
      .trust-item:hover,
      .testimonial:hover {
          transform: translateY(-8px);
          border-color: rgba(124, 92, 255, .28);
          box-shadow:
              0 22px 55px rgba(0, 0, 0, .28),
              0 0 28px rgba(124, 92, 255, .12);
      }

      /* Better headings */
      .section h2 {
          letter-spacing: -0.5px;
          font-weight: 700;
      }

      .hero h1 {
          letter-spacing: -1.5px;
          text-shadow: 0 6px 25px rgba(0, 0, 0, .18);
      }

      /* Paragraph readability */
      .hero p,
      .section-intro,
      .service p,
      .case p,
      .testimonial p,
      .trust-item p,
      .info-item,
      .desc {
          color: rgba(238, 244, 255, .82);
      }

      /* Better statistics */
      .stat {
          background: rgba(255, 255, 255, .05);
      }

      .stat:hover {
          transform: translateY(-5px);
      }

      /* Better mini boxes */
      .mini-box {
          border-radius: 18px;
      }

      /* Buttons */
      .btn {
          letter-spacing: .3px;
      }

      .btn.primary:hover,
      .btn--primary:hover {
          box-shadow:
              0 18px 40px rgba(124, 92, 255, .28),
              0 0 20px rgba(95, 140, 255, .18);
      }

      /* Better skill tags */
      .skills li {
          transition: .3s;
      }

      .skills li:hover {
          transform: translateY(-2px);
          background: rgba(124, 92, 255, .18);
      }

      /* Process cards */
      .process-list li {
          transition: .35s;
      }

      .process-list li:hover {
          transform: translateX(8px);
          border-color: rgba(124, 92, 255, .20);
      }

      /* Inputs */
      .contact-form input,
      .contact-form textarea {
          transition: .3s;
      }

      .contact-form input:hover,
      .contact-form textarea:hover {
          border-color: rgba(124, 92, 255, .20);
      }

      /* Footer links */
      .footer-links a,
      .footer-social {
          transition: .3s;
      }

      .footer-links a:hover {
          color: #fff;
      }

      .footer-social:hover {
          transform: translateY(-6px) scale(1.08);
      }

      /* Scrollbar */
      ::-webkit-scrollbar {
          width: 10px;
      }

      ::-webkit-scrollbar-track {
          background: #08111f;
      }

      ::-webkit-scrollbar-thumb {
          background: linear-gradient(#7c5cff, #00d4ff);
          border-radius: 50px;
      }

      ::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(#8f73ff, #25dbff);
      }

      /* ==========================================
   ULTRA PREMIUM UI ENHANCEMENTS
   (Add at End of CSS)
========================================== */

      /* Smooth animations everywhere */
      * {
          transition:
              background-color .35s ease,
              border-color .35s ease,
              color .35s ease,
              box-shadow .35s ease,
              transform .35s ease;
      }

      /* Hero heading */
      .hero h1 {
          font-weight: 800;
          text-shadow:
              0 10px 35px rgba(124, 92, 255, .12),
              0 6px 18px rgba(0, 0, 0, .18);
      }

      /* Section headings */
      .section h2 {
          position: relative;
          display: inline-block;
          margin-bottom: 22px;
      }

      .section h2::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -10px;
          width: 70px;
          height: 4px;
          border-radius: 20px;
          background: linear-gradient(90deg, #7c5cff, #00d4ff);
      }

      /* Cards become premium */
      .hero-panel,
      .info-card,
      .service,
      .case,
      .team-card,
      .trust-item,
      .testimonial,
      .contact-box {

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

          background:
              linear-gradient(180deg,
                  rgba(255, 255, 255, .10),
                  rgba(255, 255, 255, .05));

          overflow: hidden;
          position: relative;
      }

      /* Light reflection */
      .hero-panel::before,
      .info-card::before,
      .service::before,
      .case::before,
      .team-card::before,
      .trust-item::before,
      .testimonial::before {

          content: "";

          position: absolute;

          top: -120%;

          left: -50%;

          width: 60%;

          height: 250%;

          background:
              linear-gradient(90deg,
                  transparent,
                  rgba(255, 255, 255, .10),
                  transparent);

          transform: rotate(25deg);

          transition: .9s;
      }

      .hero-panel:hover::before,
      .info-card:hover::before,
      .service:hover::before,
      .case:hover::before,
      .team-card:hover::before,
      .trust-item:hover::before,
      .testimonial:hover::before {

          left: 150%;
      }

      /* Hover effect */
      .hero-panel:hover,
      .info-card:hover,
      .service:hover,
      .case:hover,
      .team-card:hover,
      .trust-item:hover,
      .testimonial:hover {

          transform:
              translateY(-10px) scale(1.01);

          box-shadow:
              0 25px 60px rgba(0, 0, 0, .35),
              0 0 35px rgba(124, 92, 255, .10);
      }

      /* Stats */
      .stat {

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

      .stat strong {

          background: linear-gradient(135deg,
                  #ffffff,
                  #d9e6ff);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

      /* Buttons */
      .btn.primary,
      .btn--primary {

          position: relative;
          overflow: hidden;
      }

      .btn.primary::before,
      .btn--primary::before {

          content: "";

          position: absolute;

          left: -120%;

          top: 0;

          width: 70%;

          height: 100%;

          background:
              linear-gradient(90deg,
                  transparent,
                  rgba(255, 255, 255, .28),
                  transparent);

          transition: .8s;
      }

      .btn.primary:hover::before,
      .btn--primary:hover::before {

          left: 160%;
      }

      /* Team images/cards */
      .team-card {

          border-radius: 24px;
      }

      /* Skill pills */
      .skills li {

          backdrop-filter: blur(10px);
      }

      .skills li:hover {

          box-shadow:
              0 8px 20px rgba(124, 92, 255, .18);
      }

      /* Contact form */
      .contact-form input,
      .contact-form textarea {

          background: rgba(255, 255, 255, .04);
      }

      .contact-form input:focus,
      .contact-form textarea:focus {

          transform: translateY(-2px);
      }

      /* Footer */
      .footer {

          position: relative;
      }

      .footer::before {

          content: "";

          position: absolute;

          left: 0;
          top: 0;

          width: 100%;
          height: 1px;

          background:
              linear-gradient(90deg,
                  transparent,
                  #7c5cff,
                  #00d4ff,
                  transparent);
      }

      /* ==========================================
   TEAM SECTION PREMIUM IMPROVEMENTS
   (No HTML Changes Required)
========================================== */

      /* Team section spacing */
      #team .team-grid {
          gap: 32px;
          margin-top: 40px;
      }

      /* Team card */
      .team-card {
          padding: 34px 30px;
          min-height: 420px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
      }

      /* Name */
      .team-card h3 {
          font-size: 28px;
          font-weight: 700;
          line-height: 1.3;
          margin-bottom: 12px;
          letter-spacing: -0.4px;
          color: #fff;
      }

      /* Job Role */
      .team-card .role {
          font-size: 15px;
          font-weight: 600;
          color: #8fdcff;
          line-height: 1.8;
          margin-bottom: 16px;
          min-height: 54px;
      }

      /* Experience Badge */
      .team-card .exp {
          display: inline-flex;
          align-items: center;
          width: fit-content;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(124, 92, 255, .12);
          border: 1px solid rgba(124, 92, 255, .25);
          color: #eef4ff;
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 22px;
      }

      /* Description */
      .team-card .desc {
          color: rgba(255, 255, 255, .82);
          font-size: 15px;
          line-height: 1.9;
          margin-bottom: 24px;
          text-align: justify;
      }

      /* Skills */
      .skills {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: auto;
          margin-bottom: 24px;
      }

      .skills li {
          padding: 8px 14px;
          border-radius: 30px;
          background: rgba(255, 255, 255, .06);
          border: 1px solid rgba(255, 255, 255, .08);
          font-size: 13px;
          font-weight: 500;
          transition: .3s ease;
      }

      .skills li:hover {
          background: rgba(124, 92, 255, .16);
          border-color: rgba(124, 92, 255, .30);
          transform: translateY(-2px);
      }

      /* Meta Pills */
      .team-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: auto;
      }

      .meta-pill {
          padding: 8px 16px;
          border-radius: 30px;
          background: linear-gradient(135deg,
                  rgba(124, 92, 255, .15),
                  rgba(0, 212, 255, .10));
          border: 1px solid rgba(255, 255, 255, .10);
          color: #eef4ff;
          font-size: 13px;
          font-weight: 600;
      }

      /* Hover */
      .team-card:hover h3 {
          color: #ffffff;
      }

      .team-card:hover .role {
          color: #b9ebff;
      }

      .team-card:hover .exp {
          background: rgba(124, 92, 255, .20);
      }

      .team-card:hover .meta-pill {
          transform: translateY(-2px);
      }

      /* Better spacing between elements */
      .team-card>* {
          margin-left: 0;
          margin-right: 0;
      }

      /* Mobile */
      @media(max-width:768px) {

          .team-card {
              min-height: auto;
              padding: 28px 24px;
          }

          .team-card h3 {
              font-size: 24px;
          }

          .team-card .role {
              min-height: auto;
          }

      }