:root {
      --ink: #0b0d0c;
      --surface: #141817;
      --surface-light: #1d2320;
      --surface-soft: #202723;
      --cream: #f4f1e8;
      --muted: #a5ada5;
      --muted-dark: #687067;
      --lime: #d8ff54;
      --lime-dark: #8eaa2b;
      --orange: #ff8057;
      --blue: #82b7ff;
      --purple: #b998ff;
      --border: rgba(244, 241, 232, 0.13);
      --shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
      --radius: 24px;
      --container: 1180px;
      --header-h: 84px;
      --ease: cubic-bezier(.2,.8,.2,1);
      --tap: 44px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--ink);
      color: var(--cream);
      font-family: "Inter", sans-serif;
      line-height: 1.6;
      overflow-x: clip;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body.modal-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    :focus-visible {
      outline: 2px solid var(--lime);
      outline-offset: 4px;
    }

    section[id] {
      scroll-margin-top: calc(var(--header-h) + 20px);
    }

    .skip-link {
      position: fixed;
      left: 16px;
      top: 12px;
      z-index: 1000;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--lime);
      color: var(--ink);
      font-weight: 800;
      transform: translateY(-150%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); }


    button,
    input,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    img {
      max-width: 100%;
      display: block;
    }

    ::selection {
      background: var(--lime);
      color: var(--ink);
    }

    .container {
      width: min(var(--container), 90%);
      margin-inline: auto;
    }

    .eyebrow {
      color: var(--lime);
      font-family: "DM Mono", monospace;
      font-size: 11px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }

    .section {
      padding: clamp(72px, 9vw, 120px) 0;
    }

    .stats-grid-spaced { margin-top: 35px; }
    .section-heading-spaced { margin-top: 18px; }
    .section-title-spaced { margin-top: 18px; }
    .testimonial-quote { margin-top: 25px; }

    .section-heading-row {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 50px;
      margin-bottom: 45px;
    }

    .section-title {
      max-width: 760px;
      color: var(--cream);
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(40px, 6vw, 76px);
      line-height: 0.98;
      letter-spacing: -3.5px;
    }

    .section-title span {
      color: var(--lime);
    }

    .section-intro {
      max-width: 390px;
      color: var(--muted);
      font-size: 15px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: var(--tap);
      padding: 11px 20px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--cream);
      font-size: 13px;
      font-weight: 700;
      transition: 0.25s ease;
    }

    .button:hover {
      border-color: var(--lime);
      color: var(--lime);
      transform: translateY(-2px);
    }

    .button.primary {
      border-color: var(--lime);
      background: var(--lime);
      color: var(--ink);
    }

    .button.primary:hover {
      background: var(--cream);
      border-color: var(--cream);
      color: var(--ink);
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--cream);
      font-size: 13px;
      font-weight: 700;
      transition: 0.25s ease;
    }

    .text-link span {
      color: var(--lime);
      font-size: 18px;
    }

    .text-link:hover {
      color: var(--lime);
    }

    /* Navigation */

    .site-nav {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid transparent;
      transition: 0.3s ease;
    }

    .site-nav.scrolled {
      background: rgba(11, 13, 12, 0.88);
      border-color: var(--border);
      backdrop-filter: blur(18px);
    }

    .nav-inner {
      width: min(var(--container), 90%);
      min-height: var(--header-h);
      margin-inline: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      color: var(--lime);
      font-family: "Space Grotesk", sans-serif;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -1px;
    }

    .logo span {
      color: var(--cream);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: var(--muted);
      font-size: 13px;
    }

    .nav-links a {
      transition: 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--lime);
    }

    .nav-toggle {
      display: none;
      border: 0;
      background: transparent;
      color: var(--cream);
      font-size: 26px;
    }

    /* Hero */

    .hero {
      min-height: min(900px, 100svh);
      padding-top: calc(var(--header-h) + 54px);
      display: grid;
      grid-template-columns: 1.16fr 0.84fr;
      align-items: center;
      gap: 70px;
    }

    .hero-title {
      max-width: 810px;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(52px, 8vw, 105px);
      line-height: 0.93;
      letter-spacing: -5px;
    }

    .hero-title span {
      color: var(--lime);
    }

    .hero-description {
      max-width: 570px;
      margin: 32px 0;
      color: var(--muted);
      font-size: 18px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 38px;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 11px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 16px var(--lime);
    }

    .hero-visual {
      min-height: 500px;
      position: relative;
      border: 1px solid var(--border);
      border-radius: 34px;
      background:
        radial-gradient(circle at 20% 15%, rgba(216, 255, 84, 0.18), transparent 30%),
        radial-gradient(circle at 90% 85%, rgba(130, 183, 255, 0.17), transparent 35%),
        var(--surface);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(244, 241, 232, 0.08);
      border-radius: 25px;
    }

    .profile-shape {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(390px, 72%);
      aspect-ratio: 3 / 4;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(244, 241, 232, 0.12);
      border-radius: 30px;
      background-image: url("../assets/naimurrahman.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
      overflow: hidden;
      z-index: 1;
    }

    .floating-stat {
      position: absolute;
      z-index: 2;
      min-width: 150px;
      padding: 15px 17px;
      border: 1px solid var(--border);
      border-radius: 17px;
      background: rgba(20, 24, 23, 0.86);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      font-family: "DM Mono", monospace;
      font-size: 10px;
      color: var(--muted);
    }

    .floating-stat strong {
      display: block;
      margin-top: 2px;
      color: var(--lime);
      font-family: "Space Grotesk", sans-serif;
      font-size: 28px;
    }

    .stat-top {
      top: 52px;
      left: 30px;
    }

    .stat-bottom {
      right: 27px;
      bottom: 50px;
    }

    .scroll-note {
      position: absolute;
      right: 30px;
      bottom: 30px;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 10px;
      writing-mode: vertical-rl;
      letter-spacing: 1px;
    }

    /* Impact */

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

    .stat-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
    }

    .stat-card strong {
      display: block;
      color: var(--lime);
      font-family: "Space Grotesk", sans-serif;
      font-size: 42px;
      line-height: 1;
    }

    .stat-card span {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
    }

    /* Services */

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

    .service-card {
      min-height: 210px;
      padding: 27px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      transition: 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-7px);
      border-color: var(--lime);
    }

    .service-number {
      color: var(--lime);
      font-family: "DM Mono", monospace;
      font-size: 12px;
    }

    .service-card h3 {
      margin: 38px 0 12px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 21px;
    }

    .service-card p {
      color: var(--muted);
      font-size: 13px;
    }

    /* Case studies */

    .case-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 18px;
    }

    .case-card {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      transition: 0.35s ease;
    }

    .case-card:hover {
      transform: translateY(-8px);
      border-color: var(--lime);
    }

    .case-featured {
      grid-row: span 2;
    }

    .case-visual {
      height: 300px;
      position: relative;
      overflow: hidden;
    }

    .case-featured .case-visual {
      height: 400px;
    }

    .gaming-visual {
      background:
        radial-gradient(circle at 70% 20%, rgba(130, 183, 255, 0.35), transparent 30%),
        linear-gradient(135deg, #192b38, #111716);
    }

    .ecommerce-visual {
      background: linear-gradient(135deg, #3b2422, #201615);
    }

    .ai-visual {
      background: linear-gradient(135deg, #28213d, #141321);
    }

    .visual-tag {
      position: absolute;
      z-index: 2;
      top: 22px;
      left: 22px;
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 30px;
      color: var(--cream);
      font-family: "DM Mono", monospace;
      font-size: 10px;
      letter-spacing: 1.3px;
    }

    .dashboard-preview {
      position: absolute;
      right: 8%;
      bottom: 8%;
      width: 75%;
      height: 62%;
      padding: 25px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 15px;
      background: rgba(10, 15, 17, 0.72);
      transform: rotate(-5deg);
    }

    .chart-line {
      width: 90%;
      height: 90px;
      margin: 15px auto;
      border-bottom: 3px solid var(--lime);
      border-radius: 50%;
      transform: skewY(-10deg);
    }

    .chart-bars {
      height: 70px;
      display: flex;
      align-items: end;
      justify-content: space-around;
    }

    .chart-bars i {
      width: 10%;
      border-radius: 5px 5px 0 0;
      background: var(--blue);
    }

    .chart-bars i:nth-child(1) {
      height: 30%;
    }

    .chart-bars i:nth-child(2) {
      height: 55%;
    }

    .chart-bars i:nth-child(3) {
      height: 40%;
    }

    .chart-bars i:nth-child(4) {
      height: 75%;
    }

    .chart-bars i:nth-child(5) {
      height: 60%;
    }

    .chart-bars i:nth-child(6) {
      height: 92%;
    }

    .product-shape {
      position: absolute;
      left: 50%;
      top: 53%;
      width: 160px;
      height: 210px;
      border-radius: 14px;
      background: linear-gradient(145deg, var(--orange), #803a2d);
      box-shadow: 30px 30px 0 rgba(255, 128, 87, 0.15);
      transform: translate(-50%, -50%) rotate(10deg);
    }

    .ai-orbit {
      position: absolute;
      left: 50%;
      top: 52%;
      width: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      border: 1px solid var(--lime);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(216, 255, 84, 0.28);
      transform: translate(-50%, -50%);
    }

    .ai-orbit::before,
    .ai-orbit::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(216, 255, 84, 0.45);
      border-radius: 50%;
    }

    .ai-orbit::before {
      width: 210px;
      height: 70px;
      transform: rotate(45deg);
    }

    .ai-orbit::after {
      width: 70px;
      height: 210px;
      transform: rotate(45deg);
    }

    .ai-orbit span {
      color: var(--lime);
      font: 700 35px "Space Grotesk";
    }

    .case-content {
      padding: 28px;
    }

    .case-meta,
    .article-meta {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: var(--lime);
      font-family: "DM Mono", monospace;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .case-meta span:last-child,
    .article-meta span:last-child {
      color: var(--muted);
    }

    .case-content h3 {
      max-width: 520px;
      margin: 24px 0 12px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 27px;
      line-height: 1.1;
    }

    .case-content p {
      max-width: 520px;
      color: var(--muted);
      font-size: 14px;
    }

    .result-row {
      display: flex;
      gap: 45px;
      margin: 28px 0;
    }

    .result-row strong {
      display: block;
      color: var(--cream);
      font-family: "Space Grotesk", sans-serif;
      font-size: 27px;
    }

    .result-row small {
      color: var(--muted);
      font-size: 11px;
    }

    /* Career — open editorial roadmap */
    .career-section {
      min-height: 3900px;
      position: relative;
      padding: 0 0 220px;
      overflow: clip;
    }

    .career-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 680px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    .career-header {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
      align-items: end;
      gap: clamp(32px, 6vw, 90px);
      margin-bottom: clamp(44px, 6vh, 72px);
    }

    .career-header p {
      max-width: 430px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
      padding-bottom: 5px;
      position: relative;
    }

    .career-header p::before {
      content: "";
      position: absolute;
      left: -18px;
      top: 2px;
      width: 1px;
      height: 100%;
      background: var(--lime);
      box-shadow: 0 0 18px rgba(216,255,84,.45);
    }

    .career-stage {
      position: relative;
      min-height: 470px;
      isolation: isolate;
      overflow: visible;
    }

    .career-stage::before {
      content: "";
      position: absolute;
      left: 2.5%;
      right: 2.5%;
      top: 46%;
      height: 1px;
      background: rgba(216,255,84,.18);
      box-shadow: 0 0 22px rgba(216,255,84,.06);
      z-index: -1;
    }

    .career-stage::after {
      content: "";
      position: absolute;
      left: 2.5%;
      right: 2.5%;
      top: 46%;
      height: 48%;
      border-bottom: 1px solid rgba(216,255,84,.28);
      border-left: 1px solid rgba(216,255,84,.28);
      border-radius: 0 0 0 80px;
      z-index: -1;
      pointer-events: none;
    }

    .career-line {
      position: absolute;
      left: 2.5%;
      right: 2.5%;
      top: 46%;
      height: 2px;
      overflow: visible;
      z-index: 0;
      background: transparent;
    }

    .career-line-fill {
      width: 0;
      height: 2px;
      background: var(--lime);
      box-shadow: 0 0 18px rgba(216,255,84,.75);
      transition: width .08s linear;
    }

    .career-line::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 8px;
      height: 8px;
      transform: translateY(-3px);
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 18px rgba(216,255,84,.8);
    }

    .career-nodes {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      align-items: stretch;
      gap: 0;
      padding: 0 1%;
      min-width: 0;
    }

    .career-node,
    .career-node:nth-child(n) {
      position: relative;
      left: auto;
      top: auto;
      width: min(168px, 100%);
      margin: 0 auto;
      overflow-wrap: anywhere;
      transform: none;
      opacity: .25;
      transition: opacity .45s ease, transform .45s var(--ease);
    }

    .career-node:nth-child(odd) {
      align-self: end;
      padding-bottom: 28px;
    }

    .career-node:nth-child(even) {
      align-self: start;
      padding-top: 28px;
    }

    .career-node.active {
      opacity: 1;
    }

    .career-node.active:nth-child(odd) {
      transform: translateY(-5px);
    }

    .career-node.active:nth-child(even) {
      transform: translateY(5px);
    }

    .node-point {
      width: 24px;
      height: 24px;
      margin-bottom: 14px;
      border: 4px solid var(--ink);
      border-radius: 50%;
      background: var(--muted-dark);
      box-shadow: 0 0 0 1px rgba(244,241,232,.12);
      transition: .45s ease;
      position: relative;
      z-index: 2;
    }

    .career-node.active .node-point {
      background: var(--lime);
      box-shadow:
        0 0 0 7px rgba(216,255,84,.10),
        0 0 28px rgba(216,255,84,.72);
    }

    .career-node:nth-child(odd) .node-point {
      margin-bottom: 14px;
    }

    .career-node:nth-child(even) .node-point {
      margin-bottom: 14px;
    }

    .node-year {
      color: var(--lime);
      font-family: "DM Mono", monospace;
      font-size: 11px;
      letter-spacing: .5px;
    }

    .node-title,
    .node-company {
      max-width: 168px;
    }

    .node-title {
      margin-top: 7px;
      color: var(--cream);
      font-family: "Space Grotesk", sans-serif;
      font-size: 18px;
      line-height: 1.05;
      letter-spacing: -.3px;
    }

    .node-company {
      margin-top: 9px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .career-node::after {
      content: "";
      display: block;
      width: 28px;
      height: 1px;
      margin-top: 13px;
      background: var(--lime);
      opacity: .75;
      box-shadow: 0 0 12px rgba(216,255,84,.35);
    }

    .career-counter {
      position: absolute;
      right: 2.5%;
      bottom: 0;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 11px;
      letter-spacing: .5px;
    }

    .career-counter strong {
      color: var(--lime);
      font-size: 19px;
    }

    /* Awards */

    .awards-section {
      width: 100%;
      padding: 120px max(5%, calc((100% - var(--container)) / 2));
      background: var(--cream);
      color: var(--ink);
    }

    .dark-eyebrow {
      color: var(--lime-dark);
    }

    .dark-title {
      color: var(--ink);
    }

    .dark-title em {
      color: var(--lime-dark);
      font-style: normal;
    }

    .awards-heading {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 40px;
      margin-bottom: 45px;
    }

    .awards-heading p {
      max-width: 360px;
      color: var(--muted-dark);
      font-size: 14px;
    }

    .award-list {
      border-top: 1px solid rgba(11, 13, 12, 0.2);
    }

    .award-item {
      display: grid;
      grid-template-columns: 100px 1fr 40px;
      align-items: center;
      gap: 25px;
      padding: 27px 0;
      border-bottom: 1px solid rgba(11, 13, 12, 0.2);
      transition: 0.25s ease;
    }

    .award-item:hover {
      padding-left: 15px;
      color: var(--lime-dark);
    }

    .award-year {
      color: var(--muted-dark);
      font-family: "DM Mono", monospace;
      font-size: 11px;
      letter-spacing: 1px;
    }

    .award-item h3 {
      font-family: "Space Grotesk", sans-serif;
      font-size: 21px;
    }

    .award-item p {
      margin-top: 4px;
      color: var(--muted-dark);
      font-size: 13px;
    }

    .award-mark {
      color: var(--lime-dark);
      font-size: 24px;
      text-align: right;
    }

    /* Articles */

    .article-grid {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 18px;
    }

    .article-card {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      transition: 0.3s ease;
    }

    .article-card:hover {
      transform: translateY(-7px);
      border-color: var(--lime);
    }

    .article-featured {
      grid-row: span 2;
    }

    .article-art {
      height: 220px;
      position: relative;
      padding: 25px;
      overflow: hidden;
    }

    .article-featured .article-art {
      height: 300px;
    }

    .article-art span {
      font-family: "DM Mono", monospace;
      font-size: 12px;
    }

    .article-art strong {
      position: absolute;
      right: 25px;
      bottom: 20px;
      text-align: right;
      font-family: "Space Grotesk", sans-serif;
      font-size: 40px;
      line-height: 0.9;
      letter-spacing: -2px;
    }

    .lime-art {
      color: var(--ink);
      background: var(--lime);
    }

    .blue-art {
      color: var(--ink);
      background: var(--blue);
    }

    .orange-art {
      color: var(--ink);
      background: var(--orange);
    }

    .article-info {
      padding: 25px;
    }

    .article-info h3 {
      margin: 24px 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 24px;
      line-height: 1.12;
    }

    .article-info p {
      margin-bottom: 25px;
      color: var(--muted);
      font-size: 14px;
    }

    /* Testimonials */

    .testimonial {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .testimonial blockquote {
      color: var(--cream);
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(28px, 4vw, 52px);
      line-height: 1.1;
      letter-spacing: -1.5px;
    }

    .testimonial cite {
      display: block;
      margin-top: 26px;
      color: var(--muted);
      font-size: 13px;
      font-style: normal;
    }

    /* Contact */

    .contact-box {
      padding: 75px;
      border-radius: 32px;
      background: var(--lime);
      color: var(--ink);
    }

    .contact-box .eyebrow {
      color: #687238;
    }

    .contact-box h2 {
      max-width: 700px;
      margin-top: 15px;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(44px, 7vw, 88px);
      line-height: 0.95;
      letter-spacing: -4px;
    }

    .contact-box p {
      max-width: 500px;
      margin: 25px 0;
      color: #4f5d23;
    }

    .contact-box .button {
      border-color: var(--ink);
      color: var(--ink);
    }

    .contact-box .button:hover {
      background: var(--ink);
      color: var(--lime);
    }

    /* Footer */

    .site-footer {
      padding: 45px 0;
      border-top: 1px solid var(--border);
    }

    .footer-inner {
      width: min(var(--container), 90%);
      margin-inline: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
    }

    .footer-copy {
      color: var(--muted);
      font-size: 12px;
    }

    .footer-links {
      display: flex;
      gap: 20px;
      color: var(--muted);
      font-size: 12px;
    }

    .footer-links a:hover {
      color: var(--lime);
    }

    /* Coffee invite */

    .coffee-invite {
      position: fixed;
      z-index: 80;
      right: 24px;
      bottom: 24px;
      width: min(350px, calc(100% - 32px));
      padding: 23px;
      border: 1px solid rgba(216, 255, 84, 0.35);
      border-radius: 22px;
      background: rgba(20, 24, 23, 0.94);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(25px) scale(0.97);
      transition: 0.35s ease;
    }

    .coffee-invite.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .coffee-icon {
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      margin-bottom: 15px;
      border-radius: 50%;
      background: var(--lime);
      color: var(--ink);
      font-size: 20px;
    }

    .coffee-invite h3 {
      font-family: "Space Grotesk", sans-serif;
      font-size: 22px;
      line-height: 1.1;
    }

    .coffee-invite p {
      margin: 10px 0 18px;
      color: var(--muted);
      font-size: 13px;
    }

    .coffee-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .coffee-close {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
    }

    .coffee-close:hover {
      color: var(--cream);
    }

    /* Modal */

    .modal {
      position: fixed;
      z-index: 200;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.75);
      opacity: 0;
      pointer-events: none;
      transition: 0.25s ease;
    }

    .modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      position: relative;
      width: min(560px, 100%);
      max-height: 92vh;
      overflow-y: auto;
      padding: 35px;
      border: 1px solid var(--border);
      border-radius: 25px;
      background: var(--surface);
      box-shadow: var(--shadow);
      transform: translateY(20px);
      transition: 0.25s ease;
    }

    .modal.open .modal-box {
      transform: translateY(0);
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 20px;
      width: 35px;
      height: 35px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: transparent;
      color: var(--cream);
      font-size: 18px;
    }

    .modal-close:hover {
      border-color: var(--lime);
      color: var(--lime);
    }

    .modal-box h2 {
      margin: 13px 45px 10px 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 35px;
      line-height: 1;
    }

    .modal-box > p {
      margin-bottom: 25px;
      color: var(--muted);
      font-size: 14px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 12px;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 14px 15px;
      border: 1px solid var(--border);
      border-radius: 12px;
      outline: none;
      background: var(--ink);
      color: var(--cream);
      font-size: 14px;
    }

    .form-group textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(216, 255, 84, 0.08);
    }

    .form-submit {
      width: 100%;
      margin-top: 7px;
      border: 0;
    }

    .form-status {
      min-height: 23px;
      margin-top: 12px;
      color: var(--lime);
      font-size: 13px;
    }

    .success-panel {
      display: none;
      padding: 25px 0 10px;
      text-align: center;
    }

    .success-panel.show {
      display: block;
    }

    .success-panel .success-icon {
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: var(--lime);
      color: var(--ink);
      font-size: 28px;
    }

    .success-panel h3 {
      font-family: "Space Grotesk", sans-serif;
      font-size: 27px;
    }

    .success-panel p {
      margin: 10px 0 22px;
      color: var(--muted);
      font-size: 14px;
    }

    .honeypot {
      position: absolute;
      left: -9999px;
      opacity: 0;
      pointer-events: none;
    }

    /* Performance */
    .case-card,
    .service-card,
    .stat-card,
    .article-card {
      content-visibility: auto;
      contain-intrinsic-size: 1px 320px;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Responsive */

    @media (max-width: 950px) {
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 140px;
        padding-bottom: 80px;
      }

      .hero-visual {
        max-width: 580px;
        width: 100%;
      }

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

      .case-grid,
      .article-grid {
        grid-template-columns: 1fr;
      }

      .case-featured,
      .article-featured {
        grid-row: auto;
      }

      .career-section {
        min-height: 3000px;
      }

      .career-stage {
        min-height: 540px;
      }

      .career-nodes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, 1fr);
        padding: 0 4%;
        gap: 0 12px;
      }

      .career-stage::before {
        left: 4%;
        right: 4%;
        top: 12%;
        height: 76%;
        border-top: 1px solid rgba(216, 255, 84, 0.32);
        border-right: 1px solid rgba(216, 255, 84, 0.32);
        border-bottom: 1px solid rgba(216, 255, 84, 0.32);
        border-radius: 0 48px 48px 0;
      }

      .career-stage::after {
        display: none;
      }

      .career-line {
        left: 4%;
        right: 4%;
        top: 12%;
      }

      .career-stage .career-line::after {
        display: none;
      }

      .career-node,
      .career-node:nth-child(n) {
        width: min(155px, 100%);
        align-self: center;
        transform: none;
      }

      .career-node:nth-child(odd),
      .career-node:nth-child(even),
      .career-node.active:nth-child(odd),
      .career-node.active:nth-child(even) {
        transform: none;
      }

      .node-title {
        font-size: 16px;
      }

      .node-company {
        font-size: 10px;
      }
    }

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

      .nav-inner {
        min-height: 72px;
      }

      .nav-toggle {
        display: block;
      }

      .nav-links {
        position: absolute;
        top: var(--header-h);
        left: 5%;
        right: 5%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(20, 24, 23, 0.98);
        box-shadow: var(--shadow);
      }

      .nav-links.open {
        display: flex;
      }

      .nav-links a {
        padding: 13px;
      }

      .hero-title {
        letter-spacing: -3px;
      }

      .hero-visual {
        min-height: 410px;
      }

      .profile-shape {
        width: min(310px, 72%);
        aspect-ratio: 3 / 4;
      }

      .section-heading-row,
      .awards-heading,
      .career-header {
        display: block;
      }

      .section-intro,
      .career-header p {
        margin-top: 22px;
      }

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

      .case-featured .case-visual {
        height: 300px;
      }

      .case-content h3 {
        font-size: 23px;
      }

      .career-section {
        min-height: 2800px;
      }

      .career-sticky {
        min-height: 650px;
      }

      .career-stage {
        min-height: 450px;
        overflow: hidden;
      }

      .career-nodes {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        padding: 28px 18px;
      }

      .career-node,
      .career-node:nth-child(n) {
        width: min(150px, 100%);
        transform: none;
        top: auto;
        align-self: center;
      }

      .career-node:nth-child(odd),
      .career-node:nth-child(even) {
        transform: none;
      }

      .career-line {
        left: 12%;
        right: 12%;
        top: 50%;
      }

      .award-item {
        grid-template-columns: 60px 1fr 25px;
        gap: 13px;
      }

      .award-item h3 {
        font-size: 17px;
      }

      .award-item p {
        font-size: 11px;
      }

      .article-featured .article-art,
      .article-art {
        height: 220px;
      }

      .contact-box {
        padding: 40px 25px;
      }

      .contact-box h2 {
        letter-spacing: -2px;
      }

      .footer-inner {
        display: block;
      }

      .footer-links {
        margin-top: 18px;
        flex-wrap: wrap;
      }

      .coffee-invite {
        right: 16px;
        bottom: 16px;
      }
    }


    /* Career responsive overrides */
    @media (max-width: 980px) {
      .career-section { min-height: 3400px; }
      .career-header { grid-template-columns: 1fr 1fr; }
      .career-stage { min-height: 500px; }
      .career-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
      .career-node { width: min(160px, 92%); }
      .career-node:nth-child(1), .career-node:nth-child(2), .career-node:nth-child(3), .career-node:nth-child(4) { grid-row: 1; }
      .career-node:nth-child(5), .career-node:nth-child(6), .career-node:nth-child(7), .career-node:nth-child(8) { grid-row: 2; }
      .career-stage::after { top: 46%; height: 45%; }
    }

    @media (max-width: 700px) {
      .career-section { min-height: 3000px; }
      .career-sticky { min-height: 760px; justify-content: center; }
      .career-header { display: block; margin-bottom: 30px; }
      .career-header p { margin-top: 22px; max-width: 100%; }
      .career-header p::before { display: none; }
      .career-stage { min-height: 560px; overflow: hidden; }
      .career-nodes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, 1fr);
        padding: 0 8px;
        row-gap: 0;
      }
      .career-node,
      .career-node:nth-child(n) {
        width: min(150px, 90%);
        padding: 0;
        align-self: center;
        transform: none;
      }
      .career-node:nth-child(odd) { grid-column: 1; }
      .career-node:nth-child(even) { grid-column: 2; }
      .career-node:nth-child(1), .career-node:nth-child(2) { grid-row: 1; }
      .career-node:nth-child(3), .career-node:nth-child(4) { grid-row: 2; }
      .career-node:nth-child(5), .career-node:nth-child(6) { grid-row: 3; }
      .career-node:nth-child(7), .career-node:nth-child(8) { grid-row: 4; }
      .career-stage::before { left: 7%; right: 7%; top: 50%; }
      .career-stage::after { left: 7%; right: 7%; top: 50%; height: 43%; border-radius: 0 0 0 50px; }
      .career-line { left: 7%; right: 7%; top: 50%; }
      .career-counter { right: 5%; bottom: 0; }
      .node-title { font-size: 16px; }
      .node-company { font-size: 10px; }
    }
/* =========================================================
   BANGLADESH BRAND SENTIMENT ANALYZER
   Additional CSS
========================================================= */

.bsa-analyzer {
  width: 100%;
  margin-top: 34px;
  padding: 18px;

  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;

  position: relative;
  overflow: hidden;
}


/* subtle background glow */

.bsa-analyzer::before {
  content: "";
  position: absolute;

  width: 260px;
  height: 260px;

  top: -150px;
  right: -100px;

  border-radius: 50%;

  background: rgba(190, 255, 70, 0.045);

  pointer-events: none;
}


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

.bsa-header {
  position: relative;
  z-index: 1;

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

  margin-bottom: 14px;
}


.bsa-eyebrow {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: #baff45;

  font-weight: 700;
}


.bsa-free {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;

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

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

  padding: 5px 8px;

  border-radius: 20px;
}


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

.bsa-title {
  position: relative;
  z-index: 1;

  margin: 0;

  font-size: 22px;
  line-height: 1.15;

  color: #f5f5f2;

  letter-spacing: -0.5px;
}


.bsa-description {
  position: relative;
  z-index: 1;

  max-width: 650px;

  margin: 8px 0 16px;

  font-size: 10px;
  line-height: 1.65;

  color: rgba(255,255,255,.58);
}


/* =========================================================
   SEARCH AREA
========================================================= */

.bsa-search-panel {
  position: relative;
  z-index: 2;

  padding: 10px;

  background: rgba(0,0,0,.18);

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

  border-radius: 13px;
}


.bsa-controls {
  display: grid;

  grid-template-columns: 130px minmax(0, 1fr) 82px;

  gap: 8px;

  align-items: center;
}


/* =========================================================
   COUNTRY
========================================================= */

.bsa-country {
  height: 38px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 0 10px;

  border-radius: 9px;

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

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

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

  font-size: 10px;
  font-weight: 600;
}


.bsa-flag {
  font-size: 15px;
}


.bsa-chevron {
  margin-left: auto;

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

  font-size: 10px;
}


/* =========================================================
   SEARCH BOX
========================================================= */

.bsa-search-box {
  height: 38px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 0 11px;

  border-radius: 9px;

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

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


.bsa-search-icon {
  color: rgba(255,255,255,.40);

  font-size: 15px;

  flex: none;
}


.bsa-input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font-family: inherit;

  font-size: 10px;
}


.bsa-input::placeholder {
  color: rgba(255,255,255,.34);
}


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

.bsa-analyze-btn {
  height: 38px;

  border: 0;

  border-radius: 9px;

  background: #baff45;

  color: #0b0d0c;

  font-family: inherit;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;

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


.bsa-analyze-btn:hover {
  background: #c8ff62;

  box-shadow:
    0 8px 20px rgba(186,255,69,.15);

  transform: translateY(-1px);
}


.bsa-analyze-btn:active {
  transform: translateY(0);
}


/* =========================================================
   EXAMPLES
========================================================= */

.bsa-example {
  margin-top: 7px;

  padding-left: 4px;

  font-size: 8px;

  color: rgba(255,255,255,.32);
}


/* =========================================================
   DASHBOARD
========================================================= */

.bsa-dashboard {
  position: relative;
  z-index: 1;

  margin-top: 10px;

  display: grid;

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

  gap: 7px;
}


/* =========================================================
   STAT CARDS
========================================================= */

.bsa-card {
  min-height: 75px;

  padding: 11px;

  border-radius: 11px;

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

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


.bsa-card-top {
  display: flex;

  align-items: center;

  gap: 8px;
}


.bsa-icon {
  width: 25px;
  height: 25px;

  border-radius: 7px;

  display: grid;
  place-items: center;

  font-size: 12px;

  flex: none;
}


.bsa-purple {
  background: rgba(154,115,255,.14);
  color: #a987ff;
}


.bsa-green {
  background: rgba(80,210,125,.13);
  color: #5de18b;
}


.bsa-yellow {
  background: rgba(255,194,67,.13);
  color: #ffc84d;
}


.bsa-red {
  background: rgba(255,91,91,.13);
  color: #ff7777;
}


.bsa-blue {
  background: rgba(83,145,255,.13);
  color: #75aaff;
}


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

.bsa-label {
  font-size: 7px;

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

  margin-bottom: 3px;
}


.bsa-value {
  font-size: 17px;

  line-height: 1;

  color: #f5f5f2;

  font-weight: 750;

  letter-spacing: -.4px;
}


.bsa-outof {
  font-size: 7px;

  color: rgba(255,255,255,.35);
}


.bsa-scoreline {
  display: flex;

  align-items: flex-end;

  gap: 2px;
}


.bsa-sub {
  margin-top: 4px;

  font-size: 7px;

  color: rgba(255,255,255,.32);
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.bsa-bar {
  width: 100%;

  height: 4px;

  margin-top: 7px;

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

  border-radius: 10px;

  overflow: hidden;
}


.bsa-fill {
  width: 72%;

  height: 100%;

  background: #baff45;

  border-radius: 10px;

  transition: width .5s ease;
}


/* =========================================================
   TRENDS
========================================================= */

.bsa-trend {
  margin-top: 6px;

  font-size: 7px;

  font-weight: 700;
}


.bsa-up {
  color: #5de18b;
}


.bsa-down {
  color: #ff7777;
}


/* =========================================================
   STATUS
========================================================= */

.bsa-status {
  position: relative;
  z-index: 1;

  min-height: 13px;

  margin-top: 9px;

  text-align: center;

  font-size: 8px;

  color: rgba(255,255,255,.36);
}


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

@media (max-width: 900px) {

  .bsa-dashboard {
    grid-template-columns: 1fr 1fr;
  }

  .bsa-score {
    grid-column: 1 / -1;
  }

}


@media (max-width: 650px) {

  .bsa-controls {
    grid-template-columns: 1fr 1fr;
  }

  .bsa-country {
    grid-column: 1;
  }

  .bsa-analyze-btn {
    grid-column: 2;
  }

  .bsa-search-box {
    grid-column: 1 / -1;
    grid-row: 1;
  }

}


@media (max-width: 480px) {

  .bsa-analyzer {
    padding: 13px;
  }

  .bsa-title {
    font-size: 19px;
  }

  .bsa-controls {
    grid-template-columns: 1fr;
  }

  .bsa-country,
  .bsa-search-box,
  .bsa-analyze-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .bsa-dashboard {
    grid-template-columns: 1fr;
  }

  .bsa-score {
    grid-column: auto;
  }

}
/* =========================================================
   BSA REDESIGN — COMPACT INTELLIGENCE CARD
   Keeps all existing IDs/classes and JS hooks intact.
========================================================= */
.bsa-analyzer{
  --bsa-bg:#101514;
  --bsa-panel:#141a18;
  --bsa-panel-2:#18201d;
  --bsa-line:rgba(244,241,232,.11);
  --bsa-text:#f4f1e8;
  --bsa-muted:rgba(244,241,232,.56);
  --bsa-soft:rgba(244,241,232,.34);
  --bsa-lime:#d8ff54;
  --bsa-blue:#82b7ff;
  --bsa-green:#5de18b;
  --bsa-yellow:#ffc84d;
  --bsa-red:#ff7777;

  margin-top:30px;
  padding:0;
  border:1px solid var(--bsa-line);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 8%,rgba(130,183,255,.10),transparent 24%),
    linear-gradient(180deg,#151c1a 0%,#101514 100%);
  box-shadow:0 18px 55px rgba(0,0,0,.24);
  overflow:hidden;
}

.bsa-analyzer::before{
  width:220px;
  height:220px;
  top:-145px;
  right:-90px;
  background:rgba(130,183,255,.08);
  filter:blur(2px);
}

.bsa-header{
  min-height:48px;
  margin:0;
  padding:13px 16px;
  border-bottom:1px solid var(--bsa-line);
  background:rgba(255,255,255,.018);
}

.bsa-eyebrow{
  font-size:8px;
  letter-spacing:1.45px;
  color:var(--bsa-lime);
}

.bsa-free{
  padding:4px 7px;
  font-size:7px;
  letter-spacing:.8px;
  color:var(--bsa-soft);
  border-color:rgba(244,241,232,.14);
}

.bsa-title{
  padding:18px 16px 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.45px;
}

.bsa-description{
  margin:6px 16px 14px;
  max-width:510px;
  font-size:9px;
  line-height:1.55;
  color:var(--bsa-muted);
}

.bsa-search-panel{
  margin:0 16px;
  padding:9px;
  border:1px solid var(--bsa-line);
  border-radius:13px;
  background:rgba(0,0,0,.20);
}

.bsa-controls{
  grid-template-columns:112px minmax(0,1fr) 70px;
  gap:6px;
}

.bsa-country,
.bsa-search-box,
.bsa-analyze-btn{
  height:36px;
  border-radius:8px;
}

.bsa-country{
  padding:0 9px;
  gap:6px;
  font-size:9px;
}

.bsa-flag{font-size:13px}
.bsa-chevron{font-size:9px}

.bsa-search-box{
  padding:0 10px;
  gap:7px;
}

.bsa-search-icon{font-size:14px}
.bsa-input{font-size:9px}

.bsa-analyze-btn{
  font-size:9px;
  font-weight:800;
}

.bsa-example{
  margin:6px 2px 0;
  padding:0;
  font-size:7px;
  line-height:1.45;
  color:var(--bsa-soft);
}

.bsa-dashboard{
  margin:14px 16px 0;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));
  gap:6px;
}

.bsa-card{
  min-height:70px;
  padding:10px;
  border:1px solid var(--bsa-line);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}

.bsa-card:hover{
  border-color:rgba(216,255,84,.28);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}

.bsa-card-top{gap:7px}

.bsa-icon{
  width:23px;
  height:23px;
  border-radius:6px;
  font-size:10px;
}

.bsa-label{
  margin-bottom:2px;
  font-size:7px;
  line-height:1.2;
  color:var(--bsa-soft);
}

.bsa-value{
  font-family:"Space Grotesk",sans-serif;
  font-size:16px;
  line-height:1;
}

.bsa-outof,
.bsa-sub,
.bsa-trend{font-size:7px}

.bsa-sub{margin-top:4px;color:var(--bsa-soft)}
.bsa-bar{height:3px;margin-top:6px}

.bsa-status{
  margin:9px 16px 0;
  padding:0 0 14px;
  min-height:12px;
  text-align:left;
  font-size:7px;
  color:var(--bsa-soft);
}

/* Medium screens: keep the card readable without horizontal compression. */
@media (max-width:1100px){
  .bsa-dashboard{grid-template-columns:1.25fr repeat(2,minmax(0,1fr));}
  .bsa-score{grid-column:1 / -1;}
}

@media (max-width:700px){
  .bsa-analyzer{margin-top:24px;border-radius:17px}
  .bsa-header{padding:12px 13px}
  .bsa-title{padding:15px 13px 0;font-size:19px}
  .bsa-description{margin:6px 13px 12px;font-size:9px}
  .bsa-search-panel{margin:0 13px;padding:8px}
  .bsa-controls{grid-template-columns:1fr 72px;gap:6px}
  .bsa-country{grid-column:1 / -1}
  .bsa-search-box{grid-column:1}
  .bsa-analyze-btn{grid-column:2}
  .bsa-example{font-size:7px}
  .bsa-dashboard{margin:12px 13px 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .bsa-score{grid-column:1 / -1}
  .bsa-card{min-height:67px}
  .bsa-status{margin-inline:13px;padding-bottom:13px}
}

@media (max-width:430px){
  .bsa-title{font-size:18px}
  .bsa-controls{grid-template-columns:1fr}
  .bsa-country,.bsa-search-box,.bsa-analyze-btn{grid-column:auto}
  .bsa-dashboard{grid-template-columns:1fr 1fr}
  .bsa-score{grid-column:1 / -1}
  .bsa-card{padding:9px}
  .bsa-card-top{gap:6px}
  .bsa-icon{width:21px;height:21px;font-size:9px}
  .bsa-value{font-size:15px}
}

@media (max-width:340px){
  .bsa-dashboard{grid-template-columns:1fr}
  .bsa-score{grid-column:auto}
}