@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* =========================
   MAIN HERO
========================= */
.hero {
  position: relative;
  background-color: #030712;

  background-image:
    radial-gradient(
      circle at 50% 30%,
      rgba(14, 116, 244, 0.2) 0%,
      transparent 65%
    ),
    radial-gradient(
      circle at 50% 90%,
      rgba(6, 182, 212, 0.08) 0%,
      transparent 55%
    );

  color: #ffffff;

  /* 75% center content + 12.5% sides */
  padding: 120px 12.5% 80px;

  overflow: hidden;

  font-family: 'Plus Jakarta Sans', sans-serif;

  min-height: 100vh;

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

  box-sizing: border-box;
}


/* =========================
   BACKGROUND GRID
========================= */
.hero-bg-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size: 50px 50px;

  mask-image:
    radial-gradient(
      circle at center,
      black 45%,
      transparent 80%
    );

  -webkit-mask-image:
    radial-gradient(
      circle at center,
      black 45%,
      transparent 80%
    );

  pointer-events: none;
  z-index: 1;
}


/* =========================
   CONTENT CONTAINER
========================= */
.hero .container {
  position: relative;
  z-index: 10;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================
   BADGE
========================= */
.hero-badge {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding: 10px 24px;

  border-radius: 9999px;

  background: rgba(14, 165, 233, 0.08);

  border: 1px solid
    rgba(56, 189, 248, 0.35);

  box-shadow:
    0 0 25px rgba(
      14,
      165,
      233,
      0.18
    );

  font-size: 0.95rem;

  font-weight: 600;

  color: #e0f2fe;

  margin-bottom: 28px;
}


.badge-icon {
  color: #f59e0b;
}


/* =========================
   MAIN HEADING
========================= */
.hero h1 {
  font-size: clamp(
    2.8rem,
    5vw,
    5rem
  );

  font-weight: 800;

  line-height: 1.12;

  letter-spacing: -0.035em;

  margin: 0 0 26px;
}


/* =========================
   BLUE GRADIENT
========================= */
.grad-blue {
  background:
    linear-gradient(
      135deg,
      #60a5fa 0%,
      #3b82f6 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================
   TEAL GRADIENT
========================= */
.grad-teal {
  background:
    linear-gradient(
      135deg,
      #38bdf8 0%,
      #2dd4bf 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================
   DESCRIPTION
========================= */
.hero-desc {
  font-size: clamp(
    1rem,
    1.4vw,
    1.2rem
  );

  line-height: 1.75;

  color: #94a3b8;

  max-width: 760px;

  margin: 0 auto 38px;
}


/* =========================
   BUTTONS
========================= */
.hero-btns {
  display: flex;

  gap: 18px;

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

  margin-bottom: 55px;
}


.btn {
  text-decoration: none;

  font-weight: 600;

  font-size: 1.05rem;

  padding: 15px 32px;

  border-radius: 13px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  transition:
    all 0.25s ease;
}


/* Blue Button */
.btn-blue {
  background: #2563eb;

  color: #ffffff;

  box-shadow:
    0 0 30px rgba(
      37,
      99,
      235,
      0.55
    );

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


.btn-blue:hover {
  background: #1d4ed8;

  transform: translateY(-3px);
}


/* Dark Button */
.btn-dark {
  background:
    rgba(
      15,
      23,
      42,
      0.7
    );

  color: #f8fafc;

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  backdrop-filter: blur(8px);
}


.btn-dark:hover {
  background:
    rgba(
      30,
      41,
      59,
      0.9
    );

  transform: translateY(-3px);
}


/* =========================
   STATS PANEL
========================= */
.hero-stats-panel {
  width: 100%;

  display: grid;

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

  background:
    rgba(
      8,
      16,
      36,
      0.75
    );

  backdrop-filter: blur(14px);

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

  border: 1.5px solid
    rgba(
      56,
      189,
      248,
      0.25
    );

  border-radius: 22px;

  padding: 30px 15px;

  box-shadow:
    0 15px 40px
    rgba(
      0,
      0,
      0,
      0.5
    );
}


/* =========================
   STAT COLUMN
========================= */
.stat-col {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

  padding: 0 8px;
}


.stat-col:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;

  top: 15%;

  height: 70%;

  width: 1px;

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );
}


/* =========================
   STAT ICON
========================= */
.stat-icon-wrap {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  background:
    rgba(
      14,
      165,
      233,
      0.12
    );

  border: 1px solid
    rgba(
      56,
      189,
      248,
      0.25
    );

  color: #38bdf8;

  display: flex;

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

  font-size: 1rem;

  margin-bottom: 12px;
}


/* =========================
   STAT VALUE
========================= */
.stat-value {
  font-size: 2rem;

  font-weight: 800;

  color: #ffffff;

  margin-bottom: 6px;
}


/* =========================
   STAT LABEL
========================= */
.stat-label {
  font-size: 0.95rem;

  color: #94a3b8;

  font-weight: 500;
}


/* =========================
   COINS
========================= */
.coin {
  position: absolute;

  pointer-events: none;

  z-index: 2;

  filter:
    drop-shadow(
      0 12px 24px
      rgba(0, 0, 0, 0.65)
    );

  animation:
    coinFloat 6s ease-in-out
    infinite alternate;
}


.coin img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* =========================
   LEFT COINS
========================= */
.coin-btc {
  width: 75px;

  top: 18%;

  left:
    calc(12.5% - 40px);

  animation-duration: 7s;
}


.coin-bnb {
  width: 55px;

  top: 52%;

  left:
    calc(12.5% - 25px);

  filter:
    blur(1.5px)
    opacity(0.7);

  animation-duration: 9s;
}


.coin-usdt {
  width: 85px;

  bottom: 12%;

  left:
    calc(12.5% - 35px);

  animation-duration: 8s;

  animation-delay: -2s;
}


/* =========================
   RIGHT COINS
========================= */
.coin-eth {
  width: 70px;

  top: 22%;

  right:
    calc(12.5% - 40px);

  animation-duration: 6s;

  animation-delay: -1s;
}


.coin-usdc {
  width: 60px;

  top: 50%;

  right:
    calc(12.5% - 25px);

  filter:
    blur(1.5px)
    opacity(0.7);

  animation-duration: 7.5s;
}


.coin-sol {
  width: 75px;

  bottom: 15%;

  right:
    calc(12.5% - 35px);

  animation-duration: 6.5s;

  animation-delay: -3s;
}


/* =========================
   COIN FLOAT ANIMATION
========================= */
@keyframes coinFloat {

  0% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  100% {
    transform:
      translateY(-18px)
      rotate(8deg);
  }
}


/* =========================
   TABLET / LAPTOP
========================= */
@media (max-width: 1100px) {

  .hero {
    padding-left: 8%;
    padding-right: 8%;
  }

  .coin {
    opacity: 0.45;
  }

  .coin-btc {
    left: 15px;
    width: 60px;
  }

  .coin-eth {
    right: 15px;
    width: 55px;
  }

  .coin-usdt {
    left: 15px;
    width: 70px;
  }

  .coin-sol {
    right: 15px;
    width: 60px;
  }

  .coin-bnb,
  .coin-usdc {
    display: none;
  }
}


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

  .hero {
    padding:
      100px 16px 50px;

    min-height: auto;

    height: auto;
  }


  .hero .container {
    max-width: 100%;
  }


  .hero h1 {
    font-size: 2.7rem;

    line-height: 1.15;
  }


  .hero-badge {
    font-size: 0.85rem;

    padding: 8px 18px;
  }


  .hero-desc {
    font-size: 1rem;

    line-height: 1.65;

    max-width: 100%;
  }


  .hero-btns {
    margin-bottom: 45px;
  }


  .btn {
    font-size: 1rem;

    padding:
      14px 26px;
  }


  /* Stats 2 columns */
  .hero-stats-panel {
    grid-template-columns:
      repeat(2, 1fr);

    row-gap: 20px;

    padding: 24px 12px;
  }


  .stat-value {
    font-size: 1.7rem;
  }


  .stat-label {
    font-size: 0.85rem;
  }


  .stat-col:nth-child(2)::after {
    display: none;
  }


  /* Mobile coins */
  .coin-btc {
    top: 60px;

    left: -15px;

    width: 50px;

    opacity: 0.25;
  }


  .coin-eth {
    top: 90px;

    right: -15px;

    width: 48px;

    opacity: 0.25;
  }


  .coin-usdt,
  .coin-sol,
  .coin-bnb,
  .coin-usdc {
    display: none;
  }
}


/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {

  .hero {
    padding:
      90px 16px 45px;
  }


  .hero h1 {
    font-size: 2.35rem;

    line-height: 1.18;
  }


  .hero-desc {
    font-size: 0.95rem;

    line-height: 1.65;
  }


  .hero-badge {
    font-size: 0.78rem;

    padding: 7px 16px;
  }


  .hero-btns {
    flex-direction: column;

    width: 100%;
  }


  .btn {
    width: 100%;

    justify-content: center;

    font-size: 0.95rem;

    padding:
      14px 22px;
  }


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

    row-gap: 22px;
  }


  .stat-col::after {
    display: none !important;
  }


  .stat-value {
    font-size: 1.6rem;
  }
}


/* section 02 */

 /* =========================================================
   INDUSTRIES SECTION — 75% SCREEN / PREMIUM VERSION
========================================================= */

:root {
    --bg: #05080f;
    --bg-2: #0a1220;
    --card: #0c1627;
    --card-hover: #101e34;

    --line: #1e2a44;
    --blue: #5b9bff;
    --blue-deep: #3169d6;
    --cyan: #6ee7d8;
    --amber: #f5a623;

    --text: #f6f8fc;
    --muted: #93a1bd;

    font-family: 'Inter', system-ui, sans-serif;
}


/* =========================================================
   RESET
========================================================= */

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

body {
    background: var(--bg);
    color: var(--text);
}


/* =========================================================
   MAIN SECTION
========================================================= */

.industries {

    position: relative;

    width: 100%;

    min-height: 75vh;

    padding:
        clamp(85px, 9vh, 125px)
        4%
        clamp(90px, 10vh, 135px);

    overflow: hidden;

    background:

        radial-gradient(
            700px 350px at 50% 0%,
            rgba(91,155,255,.10),
            transparent 70%
        ),

        radial-gradient(
            500px 300px at 10% 70%,
            rgba(110,231,216,.045),
            transparent 70%
        ),

        radial-gradient(
            500px 300px at 90% 70%,
            rgba(91,155,255,.045),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            #060b15 0%,
            #05080f 100%
        );
}


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

.industries::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            850px 500px at 50% 35%,
            black,
            transparent 85%
        );

    pointer-events: none;

}


/* =========================================================
   TOP GLOW
========================================================= */

.industries::after {

    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(91,155,255,.5),
            rgba(110,231,216,.45),
            transparent
        );

    box-shadow:
        0 0 25px
        rgba(91,155,255,.3);

}


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

.industries .container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.sec-head {

    text-align: center;

    margin-bottom:
        clamp(42px, 5vh, 65px);
}


.sec-head h2 {

    font-family:
        'Space Grotesk',
        sans-serif;

    font-weight: 700;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.65rem
        );

    line-height: 1.25;

    letter-spacing: -.025em;

    color: var(--text);

}


/* =========================================================
   HEADING TAG
========================================================= */

.sec-head .tag {

    position: relative;

    display: inline-block;

    margin-left: 5px;

    padding:
        5px 16px;

    color: #061024;

    border-radius: 9px;

    background:

        linear-gradient(
            100deg,
            var(--cyan),
            var(--blue)
        );

    white-space: nowrap;

    box-shadow:

        0 8px 25px
        rgba(91,155,255,.18),

        inset 0 1px 0
        rgba(255,255,255,.5);

}


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

.grid {

    display: grid;

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

    gap:
        clamp(18px, 2vw, 26px);

    margin-bottom: 28px;
}


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

.card {

    position: relative;

    min-height: 235px;

    padding:
        42px 25px 38px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        ),

        var(--card);

    border:
        1px solid
        rgba(30,42,68,.95);

    border-radius: 20px;

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/* top shine */

.card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 76%;

    height: 1px;

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

}


/* hover glow */

.card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: 50%;
    top: 25%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(91,155,255,.10),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity .3s ease;

    pointer-events: none;
}


.card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(91,155,255,.5);

    background:
        linear-gradient(
            145deg,
            rgba(91,155,255,.06),
            rgba(255,255,255,.012)
        ),

        var(--card-hover);

    box-shadow:

        0 25px 55px
        rgba(0,0,0,.35),

        0 0 35px
        rgba(91,155,255,.08);

}


.card:hover::after {
    opacity: 1;
}


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

.card.featured {

    border-color:
        rgba(110,231,216,.7);

    background:

        linear-gradient(
            145deg,
            rgba(110,231,216,.065),
            rgba(91,155,255,.035)
        ),

        var(--card);

    box-shadow:

        0 0 0 1px
        rgba(110,231,216,.08),

        0 22px 50px -20px
        rgba(110,231,216,.28);
}


.card.featured::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110,231,216,.8),
            transparent
        );

}


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

.icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;

    border-radius: 50%;
    border: 1px solid rgba(91, 155, 255, 0.25);

    background:
        radial-gradient(circle at 35% 30%,
            rgba(110, 231, 216, 0.18),
            transparent 45%),
        rgba(13, 23, 40, 0.85);

    box-shadow:
        0 0 30px rgba(91, 155, 255, 0.10),
        inset 0 0 25px rgba(110, 231, 216, 0.05);
}



.icon-wrap::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

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

}


.icon-wrap::after {

    content: "";

    position: absolute;

    width: 35px;
    height: 35px;

    top: 6px;
    left: 16px;

    border-radius: 50%;

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

    filter:
        blur(10px);

}


.card:hover .icon-wrap {

    transform:
        translateY(-3px)
        scale(1.04);

    border-color:
        rgba(91,155,255,.65);

    box-shadow:

        0 0 25px
        rgba(91,155,255,.16),

        inset 0 0 25px
        rgba(91,155,255,.06);
}


.icon-wrap svg {

    position: relative;

    z-index: 2;

    width: 100px;
    height: 100px;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(0,0,0,.25)
        );

}


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

.card h3 {

    position: relative;

    z-index: 2;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-weight: 600;

    font-size:
        clamp(16px, 1.4vw, 18px);

    letter-spacing:
        -.01em;

    color: var(--text);
}


/* =========================================================
   PILLS
========================================================= */

.pills {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap:
        13px;

    margin-top:
        34px;

    max-width:
        1100px;

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


.pill {

    position: relative;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 25px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        ),

        var(--card);

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

    border-radius:
        13px;

    font-size:
        14px;

    font-weight:
        500;

    color:
        var(--text);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.pill:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(91,155,255,.5);

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

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.22);
}


/* =========================================================
   MORE PILL
========================================================= */

.pill-more {

    color:
        var(--cyan);

    font-weight:
        650;

    padding:
        14px 31px;

    background:

        linear-gradient(
            180deg,
            rgba(110,231,216,.055),
            rgba(91,155,255,.025)
        );

    border-color:
        rgba(110,231,216,.35);

    box-shadow:
        0 0 20px
        rgba(110,231,216,.06);
}


.pill-more:hover {

    border-color:
        rgba(110,231,216,.75);

    box-shadow:
        0 12px 30px
        rgba(110,231,216,.12);
}


.pill-more svg {

    position: absolute;

    inset:
        -10px -14px;

    width:
        calc(100% + 28px);

    height:
        calc(100% + 20px);

    pointer-events:
        none;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .industries {

        padding-top:
            115px;

        padding-bottom:
            135px;

    }

    .grid {

        gap: 28px;

    }

    .card {

        min-height:
            255px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .industries {

        padding-left:
            28px;

        padding-right:
            28px;

    }

    .grid {

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

    }

    .card {

        min-height:
            220px;

    }

}


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

@media (max-width: 700px) {

    .industries {

        min-height:
            auto;

        padding:
            75px 20px 85px;

    }

    .sec-head {

        margin-bottom:
            38px;

    }

    .sec-head h2 {

        font-size:
            1.75rem;

    }

    .grid {

        gap:
            15px;

    }

    .card {

        min-height:
            205px;

        padding:
            32px 18px;

    }

    .pills {

        gap:
            10px;

        margin-top:
            28px;

    }

}


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

@media (max-width: 560px) {

    .industries {

        padding:
            65px 16px 75px;

    }

    .grid {

        grid-template-columns:
            1fr;

    }

    .card {

        min-height:
            190px;

    }

    .icon-wrap {

        width:
            78px;

        height:
            78px;

        margin-bottom:
            20px;

    }

    .icon-wrap svg {

        width:
            42px;

        height:
            42px;

    }

    .sec-head .tag {

        display:
            inline-block;

        margin-top:
            8px;

        margin-left:
            0;

    }

    .pill {

        min-height:
            48px;

        padding:
            12px 18px;

        font-size:
            13px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .card,
    .pill,
    .icon-wrap {

        transition:
            none;

    }

}

/* section 03 */
:root {
    --bg: #030712;
    --text-main: #f8fafc;
    font-family: 'Inter', system-ui, sans-serif;
}

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

body {
    background: var(--bg);
    color: var(--text-main);
}

/* =========================
   SOLUTIONS SECTION
========================= */

.solutions {
    width: 75vw;
    max-width: none;
    margin: 0 auto;
    padding: 100px 0;
}

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

.sol-head {
    text-align: center;
    margin-bottom: 60px;
}

.sol-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 16px;
    border: 2px solid rgba(148, 163, 184, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sol-head h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.1;
    background: linear-gradient(
        135deg,
        #ffffff 30%,
        #94a3b8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sol-head p {
    max-width: 720px;
    margin: 18px auto 0;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.7;
}

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

.solutions-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

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

.solution-card {
    position: relative;
    min-width: 0;
    min-height: 72px;

    display: flex;
    align-items: center;

    padding: 22px 18px 22px 62px;

    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.95),
            rgba(30, 27, 75, 0.85)
        );

    border: 1px solid rgba(148, 163, 184, 0.08);

    border-radius: 10px;

    clip-path: polygon(
        0 0,
        calc(100% - 15px) 0,
        100% 50%,
        calc(100% - 15px) 100%,
        0 100%,
        15px 50%
    );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.solution-card:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.98),
            rgba(79, 70, 229, 0.42)
        );

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.75),
        0 0 25px rgba(56, 189, 248, 0.25);
}

/* =========================
   NUMBER
========================= */

.solution-number {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 48px;

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

    background:
        linear-gradient(
            135deg,
            #030f14 0%,
            #2b2b56 50%,
            #3e3c41 100%
        );

    font-size: 13px;
    font-weight: 900;
    color: #fff;

    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 10px) 50%,
        100% 100%,
        0 100%
    );

    box-shadow:
        2px 0 10px rgba(99, 102, 241, 0.4);
}

/* =========================
   TITLE
========================= */

.solution-card h3 {
    width: 100%;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    color: #fff;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    letter-spacing: 0.2px;
}

/* =========================
   LARGE LAPTOP
========================= */

@media (max-width: 1400px) {

    .solutions {
        width: 80vw;
    }

    .solutions-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

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

@media (max-width: 1100px) {

    .solutions {
        width: 88vw;
        padding: 80px 0;
    }

    .solutions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 800px) {

    .solutions {
        width: 90vw;
        padding: 70px 0;
    }

    .solutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .solution-card {
        min-height: 68px;
        padding-left: 58px;
    }

    .solution-card h3 {
        font-size: 13px;
    }
}

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

@media (max-width: 600px) {

    .solutions {
        width: 92vw;
        padding: 60px 0;
    }

    .sol-head {
        margin-bottom: 40px;
    }

    .sol-head h2 {
        font-size: 2rem;
    }

    .sol-head p {
        font-size: 14px;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .solution-card {
        min-height: 64px;
    }

    .solution-card h3 {
        font-size: 14px;
    }
}


/* section 04 */
:root {
    --bg: #1b1e23;
    --card: #252b34;
    --card-hover: #2b323d;
    --text: #f6f8fc;

    font-family: 'Inter', system-ui, sans-serif;
}

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

body {
    background: var(--bg);
    color: var(--text);
}


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

.wallets {
    width: 100%;
    min-height: 75vh;

    padding: 75px 0 85px;

    background: #1b1e23;

    overflow: hidden;
}


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

.wallets .container {
    width: 94%;
    max-width: 1800px;

    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.wallets h2 {
    margin: 0 0 65px;

    text-align: center;

    color: #f7f8fa;

    font-family: 'Space Grotesk', sans-serif;

    font-size: clamp(42px, 4.2vw, 72px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -2px;
}


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

.wallets .grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 36px;
}


/* =========================================
   ONLY RECTANGLE BOX
========================================= */

.wallets .card {
    width: 100%;
    height: 123px;

    background: #252b34;

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 11px;

    padding: 18px 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: 
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   SECOND ROW - CENTER
========================================= */

.wallets .card:nth-child(6) {
    grid-column: 2;
}

.wallets .card:nth-child(7) {
    grid-column: 3;
}


/* =========================================
   IMPORTANT
   MARK WILL NOT CREATE ANY BOX
========================================= */

.wallets .mark {
    display: contents;
}


/* =========================================
   YOUR ORIGINAL SVG
   LOGO ONLY
========================================= */

.wallets .mark svg {
    display: block;

    width: auto;
    height: auto;

    max-width: 190px;
    max-height: 60px;

    object-fit: contain;

    flex-shrink: 0;
}


/* =========================================
   IF SVG ALREADY HAS LOGO + NAME
   HIDE HTML TEXT
========================================= */

.wallets .wname {
    display: none;
}


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

.wallets .card:hover {
    background: #2b323d;

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1600px) {

    .wallets .container {
        width: 94%;
        max-width: 1800px;
    }

    .wallets .grid {
        gap: 36px;
    }

    .wallets .card {
        height: 123px;
        padding: 18px 30px;
    }

    .wallets .mark svg {
        max-width: 190px;
        max-height: 60px;
    }
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1400px) {

    .wallets .grid {
        gap: 25px;
    }

    .wallets .card {
        height: 115px;
        padding: 16px 22px;
    }

    .wallets .mark svg {
        max-width: 165px;
        max-height: 52px;
    }
}


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

@media (max-width: 1050px) {

    .wallets {
        padding: 60px 0 70px;
    }

    .wallets .container {
        width: 92%;
    }

    .wallets h2 {
        font-size: 46px;
        margin-bottom: 45px;
    }

    .wallets .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .wallets .card:nth-child(6),
    .wallets .card:nth-child(7) {
        grid-column: auto;
    }

    .wallets .card {
        height: 105px;
        padding: 14px 18px;
    }

    .wallets .mark svg {
        max-width: 145px;
        max-height: 48px;
    }
}


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

@media (max-width: 700px) {

    .wallets {
        min-height: auto;
        padding: 50px 0 60px;
    }

    .wallets .container {
        width: 92%;
    }

    .wallets h2 {
        font-size: 34px;
        line-height: 1.12;
        letter-spacing: -1px;
        margin-bottom: 32px;
    }

    .wallets .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .wallets .card:nth-child(6),
    .wallets .card:nth-child(7) {
        grid-column: auto;
    }

    .wallets .card {
        height: 92px;
        padding: 8px;
        border-radius: 10px;
    }

    .wallets .mark svg {
        max-width: 120px;
        max-height: 43px;
    }
}


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

@media (max-width: 430px) {

    .wallets {
        padding: 42px 0 50px;
    }

    .wallets .container {
        width: 94%;
    }

    .wallets h2 {
        font-size: 29px;
        margin-bottom: 27px;
    }

    .wallets .grid {
        gap: 9px;
    }

    .wallets .card {
        height: 82px;
        padding: 6px;
        border-radius: 9px;
    }

    .wallets .mark svg {
        max-width: 105px;
        max-height: 38px;
    }
}

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

.wallets .grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 36px;
}


/* =========================================
   RECTANGLE CARD
   IMPORTANT: NOT SQUARE
========================================= */

.wallets .grid .card {
    width: 100% !important;

    height: 123px !important;

    min-height: 123px !important;
    max-height: 123px !important;

    aspect-ratio: auto !important;

    background: #252b34 !important;

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 11px;

    padding: 18px 25px;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden;

    flex: none !important;

    box-shadow: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   REMOVE SQUARE FROM MARK
========================================= */

.wallets .grid .card .mark {
    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    overflow: visible !important;
}


/* =========================================
   YOUR ORIGINAL SVG
========================================= */

.wallets .grid .card .mark svg {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 190px;
    max-height: 60px;

    flex-shrink: 0;

    object-fit: contain;
}


/* =========================================
   SECOND ROW - CENTER
========================================= */

.wallets .grid .card:nth-child(6) {
    grid-column: 2;
}

.wallets .grid .card:nth-child(7) {
    grid-column: 3;
}


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

.wallets .grid .card:hover {
    background: #2b323d !important;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.16);
}


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

@media (max-width: 1050px) {

    .wallets .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .wallets .grid .card:nth-child(6),
    .wallets .grid .card:nth-child(7) {
        grid-column: auto;
    }

    .wallets .grid .card {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
    }

    .wallets .grid .card .mark svg {
        max-width: 145px;
        max-height: 48px;
    }
}


/* =========================================
   MOBILE 2 COLUMNS
========================================= */

@media (max-width: 700px) {

    .wallets .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .wallets .grid .card {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;

        padding: 8px;
    }

    .wallets .grid .card .mark svg {
        max-width: 120px;
        max-height: 43px;
    }
}


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

@media (max-width: 430px) {

    .wallets .grid {
        gap: 9px;
    }

    .wallets .grid .card {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;

        padding: 6px;
    }

    .wallets .grid .card .mark svg {
        max-width: 105px;
        max-height: 38px;
    }
}