body{
    background:#0f1115;
    color:#e5e7eb;
    font-family:Arial,sans-serif;
}

* =========================
   CONTAINER SYSTEM
========================= */
.container {
  width: 100%;
  max-width: min(1440px, 92vw);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* =========================
   DARK HEADER THEME
========================= */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;

  background: rgba(18, 18, 18, 0.75); /* dark glass */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  width: 100%;
  max-width: min(1440px, 92vw);
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: clamp(10px, 1.2vw, 18px) clamp(16px, 3vw, 40px);
}

/* LOGO */
.logo {
  display: flex;
  align-items: left;
  max-width: 160px;
  flex-shrink: 0;
}

.logo img {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* NAV */
.nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* NAV BUTTONS */
.nav-btn {
  padding: 12px 20px;
  text-decoration: none;

  color: #ffffff; /* white text */
  font-weight: 600;
  border-radius: 12px;

  transition: all 0.25s ease;
}

/* HOVER: yellow background + black text */
.nav-btn:hover {
  background: #f5c211;
  color: #000000;
}

/* HAMBURGER */
.nav-toggle {
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;

  background: #ffffff; /* white lines for dark theme */
  left: 0;
  transition: all 0.3s ease;
}

.nav-toggle::before { top: 0; }
.nav-toggle span { top: 50%; transform: translateY(-50%); }
.nav-toggle::after { bottom: 0; }

.nav-toggle.active::before {
  transform: rotate(45deg);
  top: 50%;
}

.nav-toggle.active span {
  opacity: 0;
}

.nav-toggle.active::after {
  transform: rotate(-45deg);
  bottom: 50%;
}

/* =========================
   CTA BUTTON (SPECIAL)
========================= */
/* optional: make CTA slightly more prominent */

.nav-cta {
  background: transparent;
  border: 1px solid #f5c211;
  color: #f5c211; /* DEFAULT: yellow text */
  font-weight: 700;
 box-shadow: 0 0 0 rgba(0,0,0,0);
 transition: all 0.25s ease;

	
}

/* hover state (yellow emphasis) */
.nav-cta:hover {
  background: #f5c211;
  color: #000000;
  border-color: #f5c211;
  transform: translateY(-1px);
}


/* pushes ONLY the CTA to the right 
.nav-cta {
  margin-left: auto;
}

.nav-left {
  display: flex;
  gap: 12px;
  align-items: center;
}
*/



/* ===========================
   HERO
=========================== */

.hero{

    background:
    radial-gradient(circle at top right,
    rgba(245,194,17,.08),
    transparent 35%),
    #000;

    color:#fff;

    padding:120px 0;
}

/* Layout */

.hero-inner{

    width:min(1440px,92vw);

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;
}

/* Small title */

.hero-tag{

    display:inline-block;

    color:#f5c211;

    font-size:.9rem;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

/* Heading */

.hero-left h1{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(3rem,5vw,5.4rem);

    line-height:1;

    font-weight:600;

    margin-bottom:28px;
}

.hero-left h1 span{

    color:#f5c211;
}

/* Description */

.hero-left p{

    max-width:620px;

    color:rgba(255,255,255,.78);

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:35px;
}

/* Features */

.hero-points{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:40px;
}

.hero-points span{

    color:#f5c211;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    text-transform:uppercase;

    font-size:.95rem;
}

.hero-points span::before{

    content:"●";

    font-size:10px;
}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.hero-btn{

    padding:16px 28px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.hero-btn-primary{

    background:#f5c211;

    color:#000;
}

.hero-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(245,194,17,.25);
}

.hero-btn-secondary{

    border:1px solid rgba(245,194,17,.4);

    color:#fff;

    background:transparent;
}

.hero-btn-secondary:hover{

    border-color:#f5c211;

    color:#f5c211;
}

/* Right */

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;
}

#matrixCanvas{

    width:100%;

    max-width:850px;

    height:560px;

    display:block;
}

/* Mobile */

@media (max-width:900px){

.hero{

    padding:90px 0;
}

.hero-inner{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;
}

.hero-left p{

    margin-left:auto;
    margin-right:auto;
}

.hero-points{

    justify-content:center;
}

.hero-buttons{

    justify-content:center;
}

#matrixCanvas{

    height:420px;
}

}


/* =========================
   SOLUTIONS SECTION
========================= */
.solutions.section.bg {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #080808 45%,
    #111111 75%,
    #1a1400 100%
  );
	padding-top: 40px;

}

.solutions-header {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto 60px;
}

.solutions-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  color: #f5c211;
  letter-spacing: 2px;
}

.solutions-header p {
  color: #c7c7c7;
  margin-top: 10px;
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: center;
}

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

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
	 width: min(1440px, calc(100% - 60px));
    margin-left: auto;
    margin-right: auto;
  
}

/* =========================
   CARD
========================= */

.solution-card {
  background: linear-gradient(
    180deg,
    #141414 0%,
    #090909 100%
  );

  border-radius: 18px;
  padding: 35px 24px;

  text-align: center;

  border: 1px solid rgba(245,194,17,.15);

  transition: all .35s ease;

  box-shadow:
      0 10px 30px rgba(0,0,0,.35);
}

.solution-card:hover {

    transform: translateY(-8px);

    border-color: rgba(245,194,17,.55);

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 25px rgba(245,194,17,.20);
}

/* =========================
   ICON
========================= */

.solution-icon {

    width:72px;
    height:72px;

    margin:0 auto 22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(245,194,17,.18),
            rgba(245,194,17,.05)
        );

    border:1px solid rgba(245,194,17,.25);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 25px rgba(245,194,17,.12);

    position:relative;

    transition:all .35s ease;
}

.solution-icon img{

    width:34px;
    height:34px;
    object-fit:contain;
}

/* Gold glow */

.solution-icon::after{

    content:"";

    position:absolute;
    inset:-8px;

    border-radius:22px;

    background:
        radial-gradient(
            circle,
            rgba(245,194,17,.35),
            transparent 70%
        );

    opacity:0;

    transition:.35s ease;

    z-index:-1;
}

.solution-card:hover .solution-icon{

    transform:translateY(-2px) scale(1.06);

    box-shadow:
        0 0 22px rgba(245,194,17,.30),
        0 10px 35px rgba(245,194,17,.15);
}

.solution-card:hover .solution-icon::after{

    opacity:1;
}

/* =========================
   TEXT
========================= */

.solution-card h3{

    color:#ffffff;

    margin-bottom:12px;

    font-size:1.25rem;
}

.solution-card p{

    color:#bdbdbd;

    line-height:1.7;

    font-size:.98rem;
}

.solution-card:hover h3{

    color:#f5c211;
}

/* =========================
   PROCESS SECTION
========================= */

.process {
  padding: 120px 0;
  background: #000;
}

.process-header {
  text-align: center;
  margin-bottom: 70px;
}

.process-header h2 {
  color: #f5c211;
  letter-spacing: 2px;
  font-size: 28px;
}

/* GRID */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

/* STEP CARD */
.process-step {
  text-align: center;
  padding: 20px;
  position: relative;
}

/* TOP ROW */
.step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* NUMBER */
.step-number {
  color: #f5c211;
  font-weight: bold;
  border: 1px solid rgba(245, 194, 17, 0.4);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 14px;
}

/* ICON */
.step-icon {
  font-size: 22px;
  color: #f5c211;
}
.step-icon img{

    width:34px;
    height:34px;
    object-fit:contain;
}
/* TEXT */
.process-step h3 {
  margin: 10px 0;
  letter-spacing: 1px;
}
.process-step h2 {
font-size: clamp(28px, 4vw, 42px);
  color: #f5c211;
  letter-spacing: 2px;
}

.process-step p {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* OPTIONAL CONNECTOR LINE (like your image vibe) */
.process-grid::before {
  content: "";
  position: absolute;
  top: 35px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f5c211, transparent);
  opacity: 0.3;
}




/* =========================
   FOOTER BASE (DARK THEME)
========================= */
.footer {
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding: 60px 0;
  color: #ffffff;
}
/* THIS IS THE KEY WRAPPER */
.footer-inner {
  width: 100%;
  max-width: min(1440px, 92vw);
  margin: 0 auto;

  padding: 0 clamp(16px, 3vw, 40px);
}

/* MAIN CONTAINER */
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* =========================
   LEFT SIDE
========================= */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* LOGOS */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-logos img {
  height: 30px;
  opacity: 0.85;
  transition: 0.3s;
}

.footer-logos img:hover {
  opacity: 1;
}

/* COPYRIGHT */
.footer-copy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

/* =========================
   RIGHT SIDE
========================= */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* TITLE */
.footer-title {
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
}

/* =========================
   SOCIAL (ONE ROW)
========================= */

.social-grid {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-grid a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 10px;

  background: #f5c211; /* YELLOW BACKGROUND */
  color: #000000; /* icon stays visible */

  border: 1px solid #f5c211;

  transition: 0.3s;
}

/* hover uses your brand yellow */
.social-grid a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f5c211;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* =========================
   DIVIDER SECTION
========================= */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-links {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  margin: 0 5px;
  transition: 0.2s;
}

/* yellow hover accent */
.footer-links a:hover {
  color: #f5c211;
}

/* separator */
.separator {
  margin: 0 5px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.4);
}


/* ===================================
   ABOUT SECTION
=================================== */

.about-section{
    background:linear-gradient(
        180deg,
        #000 0%,
        #080808 45%,
        #111111 75%,
        #1a1400 100%
    );

    padding:80px 0;
}

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

.about-header{

    width:min(900px,90%);
    margin:0 auto 60px;
    text-align:center;
}

.about-header h2{

    color:#f5c211;

    font-size:clamp(2rem,4vw,2.8rem);

    letter-spacing:2px;

    margin-bottom:15px;
}

.about-header p{

    color:#c9c9c9;

    font-size:1.1rem;

    line-height:1.8;

    margin:0;
}

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

.about-grid{

    width:min(1440px,calc(100% - 60px));

    margin:auto;

    display:grid;

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

    gap:25px;
}

/* ===================================
   CARD
=================================== */

.about-card{

    background:linear-gradient(
        180deg,
        #141414,
        #090909
    );

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    border:1px solid rgba(245,194,17,.15);

    transition:.35s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}

.about-card:hover{

    transform:translateY(-8px);

    border-color:rgba(245,194,17,.55);

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 25px rgba(245,194,17,.2);
}

/* ===================================
   ICON
=================================== */

.about-icon{

    width:56px;
    height:56px;

    margin:0 auto 22px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:18px;

    position:relative;

    background:linear-gradient(
        145deg,
        rgba(245,194,17,.18),
        rgba(245,194,17,.05)
    );

    border:1px solid rgba(245,194,17,.25);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 25px rgba(245,194,17,.12);

    transition:.35s ease;
}

.about-icon img{

    width:26px;
    height:26px;
    object-fit:contain;
    display:block;
}

.about-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:22px;

    background:radial-gradient(
        circle,
        rgba(245,194,17,.35),
        transparent 70%
    );

    opacity:0;

    transition:.35s ease;

    z-index:-1;
}

.about-card:hover .about-icon{

    transform:translateY(-2px) scale(1.06);

    box-shadow:
        0 0 22px rgba(245,194,17,.30),
        0 10px 35px rgba(245,194,17,.15);
}

.about-card:hover .about-icon::after{

    opacity:1;
}

/* ===================================
   TEXT
=================================== */

.about-card h3{

    color:#fff;

    font-size:1.25rem;

    margin:0 0 15px;

    transition:.3s;
}

.about-card p{

    color:#bdbdbd;

    line-height:1.75;

    margin:0;

    font-size:.98rem;
}

.about-card:hover h3{

    color:#f5c211;
}


/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background:  rgba(28, 28, 30, 0.92);
    flex-direction: column;
    padding: 20px;

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-toggle {
    display: block;
  }
  
  .container {
     width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* Sections */
  .solutions,
  .process {
    padding: 70px 0;
  }

  /* Headers */
  .solutions-header,
  .process-header {
    margin-bottom: 40px;
  }

  .solutions-header h2,
  .process-header h2 {
    font-size: 28px;
  }

  /* Solutions */
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .solution-card {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
  }
	
    /* Process */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .process-step {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
  }

  /* Remove the horizontal connector line */
  .process-grid::before {
    display: none;
  }

  /* Centre the icon and number */
  .step-top {
    justify-content: center;
  }
 /* Make main footer layout vertical */
.footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.footer-left,
.footer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logos */
.footer-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Social icons */
.social-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
	margin-bottom: 20px;
}

/* Add space between social icons and footer links */
.footer-bottom {
    margin-top: 0;   /* Increase to 40px if you want a larger gap */
    text-align: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
	margin-top: 20px;
}

.separator {
    display: none;
}
	
.about-section{
        padding:60px 0;
    }

  .about-grid{

        width:min(100%,calc(100% - 40px));

        grid-template-columns:1fr;

        gap:20px;
    }

    .about-header{

        width:min(95%,700px);

        margin-bottom:40px;
    }

    .about-card{

        padding:30px 22px;
    }
}