:root{
      --navy:#07192f;
      --navy-2:#0b2240;
      --navy-3:#102a4e;
      --blue:#2563eb;
      --cyan:#12bde7;
      --violet:#6d4aff;
      --green:#2dd4bf;
      --orange:#f59e0b;
      --ink:#0e1b2c;
      --muted:#667085;
      --line:#e7ecf2;
      --bg:#f7f9fc;
      --white:#fff;
      --shadow:0 18px 50px rgba(16,35,65,.12);
      --radius:18px;
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
    }
    img,svg{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    .container{width:min(calc(100% - 36px),var(--container));margin-inline:auto}
    .section{padding:88px 0}
    .section-sm{padding:64px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--blue);margin-bottom:14px;
    }
    .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:99px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(46px,7vw,78px);line-height:.98;letter-spacing:-.055em;margin-bottom:24px}
    h2{font-size:clamp(34px,4.6vw,54px);line-height:1.05;letter-spacing:-.045em;margin-bottom:18px}
    h3{font-size:20px;line-height:1.3;margin-bottom:10px}
    .lead{font-size:18px;color:var(--muted);max-width:720px}
    .muted{color:var(--muted)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:48px;padding:0 20px;border-radius:9px;border:1px solid transparent;
      font-weight:800;font-size:14px;transition:.25s ease;cursor:pointer;
    }
    .btn-primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 10px 26px rgba(70,78,235,.28)}
    .btn-primary:hover{transform:translateY(-2px)}
    .btn-outline{border-color:#d8e0eb;color:var(--ink);background:#fff}
    .btn-outline:hover{border-color:#b8c5d6;box-shadow:0 8px 22px rgba(13,34,66,.08)}
    .btn-dark{background:#0b1e36;color:#fff}
    .topbar{
      height:34px;background:#f8fafc;border-bottom:1px solid #eef2f7;
      font-size:12px;color:#667085;display:flex;align-items:center;
    }
    .topbar .container{display:flex;justify-content:space-between;gap:16px}
    .topbar-links{display:flex;gap:18px;flex-wrap:wrap}
    .navbar{
      position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,.85);
    }
    .nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.03em}
    .brand-mark{width:34px;height:34px;position:relative}
    .brand-mark span{
      position:absolute;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--cyan));
      transform:skew(-12deg);
    }
    .brand-mark span:nth-child(1){width:15px;height:28px;left:1px;top:4px}
    .brand-mark span:nth-child(2){width:14px;height:20px;right:1px;top:1px;background:linear-gradient(135deg,var(--violet),var(--blue))}
    .brand-mark span:nth-child(3){width:14px;height:12px;right:1px;bottom:1px;background:linear-gradient(135deg,var(--cyan),var(--green))}
    .nav-menu{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:800;color:#3d4a5d;text-transform: uppercase;}
    .nav-menu a{position:relative}
    .nav-menu a::after{content:"";position:absolute;left:0;bottom:-9px;width:0;height:2px;background:var(--blue);transition:.2s}
    .nav-menu a:hover::after{width:100%}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .menu-btn{display:none;border:0;background:#fff;font-size:26px;cursor:pointer}
    .hero{
      position:relative;overflow:hidden;background:
      radial-gradient(circle at 15% 10%,rgba(37,99,235,.23),transparent 30%),
      radial-gradient(circle at 82% 22%,rgba(109,74,255,.22),transparent 28%),
      linear-gradient(135deg,#05162c 0%,#071a34 55%,#0c2443 100%);
      color:#fff;padding:90px 0 100px;
    }
    .hero::before{
      content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
      background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:36px 36px;
      mask-image:linear-gradient(to bottom,#000,transparent 95%);
    }
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
    .hero .eyebrow{color:#57c7ff}
    .hero h1 span{display:block}
    .hero h1 .blue{color:#44b9ff}
    .hero h1 .violet{color:#9c82ff}
    .hero p{font-size:17px;color:#b8c5d7;max-width:620px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
    .hero .btn-outline{color:#fff;border-color:#35506f;background:rgba(255,255,255,.03)}
    .trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:#9cb0c8;font-size:12px}
    .trust-row b{color:#fff}
    .hero-visual{min-height:470px;position:relative}
    .glass-card{
      position:absolute;border:1px solid rgba(255,255,255,.11);
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
      box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(10px);
      border-radius:16px;
    }
    .visual-main{left:7%;right:4%;top:10%;bottom:10%;padding:22px}
    .visual-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
    .dot-row{display:flex;gap:6px}.dot-row span{width:7px;height:7px;border-radius:50%;background:#607896}
    .status{font-size:11px;color:#7ce7d4;background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.18);padding:5px 8px;border-radius:999px}
    .mini-panel{
      border:1px solid rgba(255,255,255,.09);background:rgba(7,23,43,.75);border-radius:12px;padding:18px;margin-bottom:16px;
    }
    .mini-title{font-size:11px;color:#8ba3c1;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
    .mini-logo{height:56px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:#0d2341;font-weight:900}
    .flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center;margin-top:18px}
    .flow-card{padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.09);text-align:center;background:rgba(255,255,255,.035)}
    .flow-card b{display:block;font-size:13px}.flow-card small{color:#7f96b1}
    .float-a{width:170px;padding:14px;left:-4%;bottom:4%}
    .float-b{width:160px;padding:14px;right:-2%;top:2%}
    .metric{font-size:23px;font-weight:900}.metric-label{font-size:11px;color:#8ba3c1}
    .logos{padding:28px 0;border-bottom:1px solid var(--line);background:#fff}
    .logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
    .logo-pill{height:44px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:12px;font-weight:900;background:#fbfcfe}
    .intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
    .engine-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
    .card{
      background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
      box-shadow:0 12px 34px rgba(16,35,65,.06);transition:.25s ease;
    }
    .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .icon{
      width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
      background:#eef5ff;color:var(--blue);font-weight:900;
    }
    .card:nth-child(2) .icon{background:#f1edff;color:var(--violet)}
    .card:nth-child(3) .icon{background:#e9fbf8;color:#0f9f8c}
    .card p{font-size:14px;color:var(--muted);margin-bottom:16px}
    .card a{font-size:13px;color:var(--blue);font-weight:800}
    .capabilities{background:linear-gradient(140deg,#06172e,#09213e 65%,#0b2a4d);color:#fff;position:relative;overflow:hidden}
    .capabilities::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-100px;top:-120px;background:radial-gradient(circle,rgba(37,99,235,.25),transparent 66%)}
    .cap-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center;position:relative;z-index:1}
    .capabilities .lead{color:#9fb0c5}
    .cap-list{display:grid;gap:12px}
    .cap-item{
      display:grid;grid-template-columns:44px 1fr auto;gap:15px;align-items:center;
      border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);padding:16px;border-radius:13px;
    }
    .cap-item .n{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(37,99,235,.16);color:#7ac8ff;font-weight:900}
    .cap-item small{color:#8ca0b8}
    .tag{font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(45,212,191,.1);color:#6ce4cf}
    .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
    .mockup{
      min-height:390px;background:#f6f9fd;border:1px solid #e4ebf4;border-radius:20px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden
    }
    .mockup.dark{background:linear-gradient(150deg,#0b1c33,#102b4c);border-color:#143351}
    .window{height:100%;background:#fff;border:1px solid #e7edf4;border-radius:14px;overflow:hidden}
    .window-top{height:40px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;padding:0 14px;gap:6px}
    .window-top span{width:7px;height:7px;background:#c9d2df;border-radius:50%}
    .window-body{display:grid;grid-template-columns:30% 70%;height:calc(100% - 40px)}
    .side{border-right:1px solid #eef2f7;padding:14px;background:#fafbfc}
    .side-line{height:9px;border-radius:99px;background:#e5eaf1;margin:10px 0}
    .chat{padding:16px}
    .bubble{max-width:72%;padding:10px 12px;border-radius:12px;background:#eef4ff;margin:8px 0;font-size:12px}
    .bubble.me{margin-left:auto;background:#dff9f3}
    .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:24px}
    .stat{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
    .stat b{font-size:26px;display:block}.stat small{color:var(--muted)}
    .contact-card{display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
    .contact-copy{padding:42px;background:#fff}
    .contact-form{padding:34px;background:#0b1f39;color:#fff}
    .contact-form label{display:block;font-size:12px;margin-bottom:6px;color:#b7c4d5}
    .field{width:100%;height:46px;border-radius:9px;border:1px solid #294461;background:#102b4b;color:#fff;padding:0 12px;margin-bottom:14px;outline:none}
    textarea.field{height:92px;padding-top:12px;resize:vertical}
    .industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
    .industry{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff}
    .industry b{display:block;margin-top:10px}.industry small{color:var(--muted)}
    .process{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
    .process .step{padding:24px;border-top:3px solid var(--blue);background:#fff;border-radius:0 0 14px 14px;box-shadow:0 10px 28px rgba(17,37,70,.06)}
    .process .step:nth-child(2){border-color:var(--violet)}.process .step:nth-child(3){border-color:var(--green)}
    .cta{
      background:linear-gradient(150deg,#06172d,#0a2342 62%,#0e2c52);color:#fff;text-align:center;padding:90px 0;position:relative;overflow:hidden
    }
    .cta p{color:#b0bfd1;max-width:680px;margin:0 auto 28px}
    .footer{background:#041224;color:#a7b4c5;padding:46px 0 26px}
    .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,.8fr);gap:34px}
    .footer h4{color:#fff;margin:0 0 14px}.footer a{display:block;font-size:13px;margin:8px 0}
    .footer-bottom{border-top:1px solid #17304c;margin-top:32px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;font-size:12px}
    .reveal{opacity:0;transform:translateY(20px);transition:.65s ease}
    .reveal.visible{opacity:1;transform:none}

    @media(max-width:980px){
      .nav-menu{display:none;position:absolute;left:18px;right:18px;top:82px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}
      .nav-menu.open{display:flex}.nav-actions .btn-outline{display:none}.menu-btn{display:block}
      .hero-grid,.cap-grid,.split,.intro-grid,.contact-card{grid-template-columns:1fr}
      .hero-visual{min-height:410px}
      .engine-cards{grid-template-columns:1fr 1fr}
      .logo-strip{grid-template-columns:repeat(3,1fr)}
      .industry-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:640px){
      .topbar{display:none}.nav-inner{height:66px}.nav-actions>.btn-primary{display:none}
      .hero{padding:72px 0 74px}.hero-grid{gap:28px}.hero-visual{min-height:330px}
      .visual-main{left:0;right:0;top:4%;bottom:4%;padding:14px}.float-a,.float-b{display:none}
      .flow{grid-template-columns:1fr}.flow-card{padding:9px}.section{padding:64px 0}
      .engine-cards,.industry-grid,.process,.stats-grid{grid-template-columns:1fr}
      .logo-strip{grid-template-columns:repeat(2,1fr)}
      .contact-copy,.contact-form{padding:26px}
      .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}
      .nav-menu{top:74px}
    }


/* Screenshot-matched Solutions section */
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
  align-items:stretch;
}
.solution-card{
  min-height:410px;
  display:flex;
  flex-direction:column;
  padding:18px;
  border:1px solid #dce5ef;
  border-radius:11px;
  background:#f8fafc;
  box-shadow:0 8px 22px rgba(15,35,65,.035);
}
.solution-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.solution-label{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:3px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:#087e73;
  background:#e3f8f2;
  border:1px solid #bcecdf;
}
.solution-number{
  color:#a0aec0;
  font-size:9px;
  font-weight:800;
}
.solution-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}
.solution-symbol{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:6px;
  color:#fff;
  background:#062d35;
  font-size:15px;
  font-weight:900;
}
.solution-brand h3{
  margin:0;
  font-size:14px;
  line-height:1.1;
  letter-spacing:.02em;
  color:#09223e;
}
.solution-brand small{
  display:block;
  margin-top:3px;
  font-size:9px;
  color:#087e73;
  letter-spacing:.08em;
  font-weight:900;
}
.solution-subtitle{
  font-size:11px;
  font-weight:900;
  line-height:1.45;
  color:#52647b;
  letter-spacing:.02em;
  margin-bottom:18px;
}
.solution-card p{
  font-size:13px;
  line-height:1.65;
  color:#000;
  margin-bottom:14px;
}
.solution-divider{
  height:1px;
  width:100%;
  background:#dbe4ed;
  margin:3px 0 12px;
}
.solution-cap-title{
  font-size:11px;
  color:#75859a;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.solution-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.solution-list li{
  position:relative;
  padding-left:15px;
  font-size:13px;
  line-height:1.35;
  color:#203b58;
}
.solution-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  color:#27b99c;
  font-weight:900;
}
.solution-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:30px;
  min-height:34px;
  padding:0 12px;
  border-radius:5px;
  background:#061c36;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.solution-button span{font-size:13px;color:#28d4b0}
.solution-builtalent .solution-label{
  color:#245edb;
  background:#eaf0ff;
  border-color:#cfddff;
}
.solution-builtalent .solution-symbol{
  background:#092b65;
}
.solution-builtalent .solution-brand small{color:#416ce0}
.solution-builtalent .solution-list li::before{color:#7b9dff}
.solution-growvia .solution-label{
  color:#b06b08;
  background:#fff2dd;
  border-color:#f8d6a3;
}
.solution-growvia .solution-symbol{
  background:#493100;
}
.solution-growvia .solution-brand small{color:#b06b08}
.solution-growvia .solution-list li::before{color:#f1a238}
.solution-growvia .solution-button span{color:#f5b13e}

@media(max-width:980px){
  .solutions-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .solutions-grid{grid-template-columns:1fr}
  .solution-card{min-height:0}
}

.about-section {
    background: #f7faff;
    padding: 86px 0 30px;
    min-height: 760px;
}

.section-container {
    width: min(1300px, calc(100% - 48px));
    margin: 0 auto;
}

/* About Intro */

.about-intro {
    max-width: 850px;
    margin-bottom: 62px;
}

.section-tag {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #a9c8ff;
    border-radius: 999px;
    color: #075dff;
    background: #edf4ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.about-intro h1 {
    margin-top: 24px;
    margin-bottom: 24px;
    color: #0b2544;
    font-size: clamp(40px, 3.2vw, 65px);
    line-height: 1.08;
    letter-spacing: -2.6px;
    font-weight: 800;
}

.about-intro p {
    max-width: 830px;
    margin-bottom: 14px;
    color: #426284;
    font-size: 18px;
    line-height: 1.65;
}

/* =========================================
   FOUR PRINCIPLE CARDS
========================================= */

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

.principle-card {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: 29px 30px 25px;
    border: 1px solid #dce5f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(17, 39, 69, 0.06);
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

.card-number {
    color: #86a0c3;
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
}

.principle-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
}

.icon-target {
    color: #075dff;
}

.icon-focus {
    color: #00c5e9;
}

.icon-network {
    color: #00b982;
}

.icon-refresh {
    color: #5c25f4;
}

/* Card Heading */

.principle-card h2 {
    margin-bottom: 12px;
    color: #0b203b;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

/* Card Description */

.principle-card p {
    color: #506b8d;
    font-size: 16px;
    line-height: 1.65;
}

/* Card Bottom */

.card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid #e6edf5;
    color: #8199bc;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.card-bottom b {
    color: #c6d5e7;
    font-size: 22px;
    line-height: 1;
}

/* =========================================
   GOVERNANCE BAR
========================================= */

.governance-bar {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 50px;
    padding: 0 25px;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    background: #ffffff;
}

.governance-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: #426284;
    font-size: 13px;
}

.governance-copy strong {
    color: #1c3654;
}

.green-dot {
    width: 9px;
    height: 9px;
    margin-right: 10px;
    border-radius: 50%;
    background: #19bc8c;
}

.governance-bar > a {
    color: #075dff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 1200px) {

    .principles-grid {
        gap: 16px;
    }

    .principle-card {
        padding: 24px;
    }

}

@media (max-width: 980px) {

    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-intro {
        max-width: 100%;
    }

}

@media (max-width: 620px) {

    .section-container {
        width: calc(100% - 30px);
    }

    .about-section {
        padding: 52px 0 24px;
    }

    .about-intro {
        margin-bottom: 38px;
    }

    .about-intro h1 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .about-intro p {
        font-size: 15px;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .principle-card {
        min-height: 280px;
    }

    .governance-bar {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        margin-top: 25px;
    }

    .governance-bar > a {
        white-space: normal;
    }

}


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

.brands-section {

    width: 100%;

    min-height: 100vh;

    padding: 12px 0 100px;

    background-color: #061b35;

    background-image:

        linear-gradient(
            rgba(74, 120, 168, 0.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(74, 120, 168, 0.12) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    color: #ffffff;

}


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

.brands-container {

    width: 1045px;

    max-width: calc(100% - 42px);

    margin: 0 auto;

}


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

.brands-intro {

    max-width: 650px;

    margin-bottom: 56px;

}

.brands-intro p {

    color: #c3d2e7;

    font-size: 14px;

    line-height: 1.75;

    letter-spacing: .1px;

}


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

.brand-card {

    width: 100%;

    min-height: 166px;

    display: grid;

    grid-template-columns: 1.05fr 1.45fr .78fr;

    align-items: center;

    gap: 34px;

    margin-bottom: 22px;

    padding: 39px 35px;

    border: 1px solid #24476e;

    border-radius: 15px;

    background: linear-gradient(
        115deg,
        #0b284c,
        #0d2d58
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

}


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

.brand-info {

    min-width: 0;

}


/* LABEL */

.vertical-label {

    display: inline-block;

    margin-bottom: 12px;

    padding: 5px 9px;

    border: 1px solid;

    border-radius: 3px;

    font-family: "Courier New", monospace;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .6px;

    white-space: nowrap;

}


/* WABOTIX LABEL */

.technology-label {

    color: #0ac99f;

    border-color: #087c78;

    background: rgba(0, 183, 145, .08);

}


/* BUILTALENT LABEL */

.talent-label {

    color: #00b8ff;

    border-color: #0756bc;

    background: rgba(0, 104, 255, .09);

}


/* GROWVIA LABEL */

.growth-label {

    color: #f4a000;

    border-color: #a86d00;

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

}


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

.brand-heading {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* ICON */

.brand-icon {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border: 1px solid;

    border-radius: 6px;

    font-size: 17px;

    font-weight: 900;

    flex-shrink: 0;

}


/* ICON COLORS */

.wabotix-icon {

    color: #00c69c;

    border-color: #087d78;

}

.builtalent-icon {

    color: #1b8cff;

    border-color: #215c99;

}

.growvia-icon {

    color: #ffad00;

    border-color: #a36b00;

}


/* BRAND NAME */

.brand-heading h2 {

    color: #ffffff;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 900;

}


/* CATEGORY */

.brand-heading h4 {

    margin-top: 2px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .25px;

}


/* CATEGORY COLORS */

.wabotix-card h4 {

    color: #00c69c;

}

.builtalent-card h4 {

    color: #3a83e9;

}

.growvia-card h4 {

    color: #ffac00;

}


/* SUBTITLE */

.brand-subtitle {

    margin-top: 7px;

    color: #9eb4d0;

    font-family: "Courier New", monospace;

    font-size: 10px;

    line-height: 1.5;

}


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

.brand-content {

    min-width: 0;

}

.brand-content p {

    margin-bottom: 14px;

    color: #d1deef;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================
   FEATURE TAGS
========================================= */

.brand-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.brand-tags span {

    padding: 5px 9px;

    border: 1px solid #345474;

    border-radius: 3px;

    color: #d0dfef;

    background: rgba(7, 27, 53, .35);

    font-family: "Courier New", monospace;

    font-size: 9px;

    white-space: nowrap;

}


/* =========================================
   ACTION AREA
========================================= */

.brand-action {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

}


/* BUTTON */

.brand-button {

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 8px 12px;

    border-radius: 7px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    white-space: nowrap;

    transition: .25s ease;

}

.brand-button span {

    font-size: 15px;

}


/* BUTTON COLORS */

.wabotix-button {

    background: #10bd91;

}

.builtalent-button {

    background: linear-gradient(
        110deg,
        #0964ff,
        #5627ed
    );

}

.growvia-button {

    background: #f18b00;

}


/* BUTTON HOVER */

.brand-button:hover {

    filter: brightness(1.12);

    transform: translateY(-1px);

}


/* DEEP DIVE LINK */

.deep-dive {

    color: #a7bdd7;

    font-size: 10px;

    text-align: right;

    white-space: nowrap;

}

.deep-dive span {

    color: #00bda1;

    margin-left: 5px;

}


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

.brand-card {

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

}

.brand-card:hover {

    border-color: #3a6592;

    transform: translateY(-2px);

}


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

@media (max-width: 1100px) {

    .brands-container {

        width: calc(100% - 42px);

    }

    .brand-card {

        grid-template-columns: 1fr 1.4fr .8fr;

        gap: 22px;

        padding: 30px;

    }

}


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

@media (max-width: 850px) {

    .brand-card {

        grid-template-columns: 1fr 1fr;

        gap: 22px;

    }

    .brand-action {

        grid-column: 1 / -1;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

    }

    .brand-button {

        padding: 0 18px;

    }

    .deep-dive {

        text-align: left;

    }

}


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

@media (max-width: 580px) {

    .brands-section {

        padding: 40px 0 50px;

    }

    .brands-container {

        width: calc(100% - 30px);

    }

    .brands-intro {

        margin-bottom: 35px;

    }

    .brands-intro p {

        font-size: 13px;

    }

    .brand-card {

        grid-template-columns: 1fr;

        gap: 22px;

        padding: 25px 20px;

    }

    .brand-action {

        grid-column: auto;

        flex-direction: column;

        align-items: stretch;

    }

    .deep-dive {

        text-align: center;

    }

}