:root {
     --white: #ffffff;
     --ink: #0b0b0b;
     --graphite: #151515;
     --veil: #fbfbfd;
     --mist: #f6f7f9;
     --silver: #e6e6ea;
     --blue: #0b5fff;
     --deep: #083b99;
     --aura: #9bc7ff;
     --mint: #00b894;
     --mintDeep: #008f73;
     --dark-blue: rgb(15, 21, 31);
     --maxw: 1320px;
     --radius: 32px;
     --rmd: 22px;
     --hx: clamp(56px, 10vw, 110px);
     --h1: clamp(44px, 8vw, 88px);
     --h2: clamp(36px, 6.5vw, 64px);
     --h3: clamp(26px, 5vw, 42px);
     --h4: 26px;
     --lead: 24px;
     --body: 1.25em;
     --small: 15px;
     --space: clamp(96px, 11vw, 180px);
     --space-sm: clamp(15px, 2vw, 15px);
     --nav: 76px;
     --gold-1: #fff4c1;
     --gold-2: #ffd56a;
     --gold-3: #ffb400;
     --ember-1: rgba(255, 120, 0, 0.9);
     --ember-2: rgba(255, 60, 0, 0.7);
     --ember-3: rgba(255, 200, 60, 0.8);
     --glass-1: rgba(255, 200, 210, 0.18);
     --glass-2: rgba(200, 220, 255, 0.18);
     --glass-3: rgba(200, 255, 220, 0.18);
     --glass-4: rgba(255, 230, 200, 0.18);
     --glass-5: rgba(230, 200, 255, 0.18);
     --glass-6: rgba(255, 255, 200, 0.18);
     --glass-7: rgba(255, 220, 230, 0.18);
     --glass-8: rgba(220, 240, 255, 0.18);

     --gap-card: 85px;
 }

 @media (max-width: 720px) {
     :root {
         --nav: 64px;
     }
 }

 /* Base Styles */
 html {
     scroll-behavior: smooth;
 }

 html,
 body {
     height: 100%;
 }

 body {
     margin: 0;
     background: var(--white);
     color: var(--ink);
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }

 p {
     font-size: var(--body);
     line-height: 1.6;
     font-weight: 400;
 }

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

 /* Typography */
 .hx {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: var(--hx);
     letter-spacing: -0.04em;
     line-height: 1.02;
     margin: 0;
 }

 .h1 {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: var(--h1);
     letter-spacing: -0.04em;
     line-height: 1.03;
     margin: 0;
     text-align: left;
 }

 .h2 {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: var(--h2);
     letter-spacing: -0.03em;
     line-height: 1.05;
     margin: 0;
 }

 .h3 {
     font-size: var(--h3);
     letter-spacing: -0.02em;
     line-height: 1.08;
     margin: 0;
 }

 .h4 {
     font-size: var(--h4);
     line-height: 1.12;
     margin: 0;
 }

 .lead {
     font-size: var(--lead);
     max-width: 56ch;
 }

 .small {
     font-size: var(--small);
 }

 .muted {
     color: #56585c;
 }

 .highlight {
     font-weight: bold;
     color: black !important;
 }

 /* Layout Components */
 .section {
     position: relative;
     padding: var(--space) 48px;
     overflow: clip;
 }

 .container {
     max-width: var(--maxw);
     margin-inline: auto;
 }

 .container-pain {
    max-width: 1430px;
     margin-inline: auto;
 }

 .grid {
     display: grid;
     gap: var(--gap-card);
 }

 .band-veil {
     background: var(--veil);
 }

 .band-mist {
     background: var(--mist);
 }

 .band-dark {
     background: var(--graphite);
     color: #fff;
 }

 /* Section Background Variations for Clear Visual Breaks */
 #cmsnotthecure {
     background: #e8ecf1;
 }

 #benefits {
     background: var(--white);
 }

 #capabilities {
     background: #dde2e7;
 }

 #about {
     background: #f4f6f8;
 }

 .rule {
     height: 1px;
     background: var(--silver);
     margin: var(--space-sm) 0;
 }

 /* Grid Layouts */
 @media (min-width: 1080px) {
     .cols-2 {
         grid-template-columns: repeat(2, 1fr);
     }

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

 /* Header and Navigation */
 .top {
     position: sticky;
     top: 0;
     height: var(--nav);
     z-index: 1000;
     background: rgba(255, 255, 255, 0.92);
     -webkit-backdrop-filter: saturate(180%) blur(14px);
     backdrop-filter: saturate(180%) blur(14px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }

 .top .inner {
     height: 100%;
     max-width: var(--maxw);
     margin-inline: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 48px;
 }

 .brand {
     font-family: "Inter Tight", Inter, sans-serif;
     font-weight: 700;
     letter-spacing: -0.02em;
     text-decoration: none;
     color: var(--ink);
 }

 .nav {
     margin-left: 28px;
 }

 .nav a {
     text-decoration: none;
     color: var(--ink);
     padding: 12px 22px;
     border-radius: 999px;
     font-size: var(--small);
 }

 .nav a:hover {
     background: rgba(0, 0, 0, 0.06);
 }

 .nav a[aria-current="page"] {
     background: #0b0b0b;
     color: #fff;
 }

 /* Language Selector */
 .language-selector {
     position: relative;
     display: inline-block;
     margin-left: auto;
 }

 .toggle-button {
     background-color: transparent;
     color: var(--ink);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     font-weight: 600;
     padding: 0.5rem 2rem 0.5rem 1rem;
 }

 .toggle-button img {
     filter: grayscale(1);
 }

 .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     margin: 0;
     padding: 0;
     border-radius: 8px;
     list-style: none;
     background: #ffffff;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     display: none;
     min-width: 100%;
     z-index: 10;
 }

 .language-selector:hover .dropdown {
     display: block;
 }

 .dropdown li {
     white-space: nowrap;
 }

 .dropdown li a,
 .dropdown li {
     display: block;
     padding: 0.5rem 1rem;
     text-decoration: none;
     color: #333333;
 }

 .dropdown li:hover {
     background: #f5f5f5;
 }

 .active-language {
     font-weight: bold;
 }

 /* Buttons */
 .btn {
     appearance: none;
     border: 2px solid var(--ink);
     background: transparent;
     border-radius: 999px;
     color: var(--ink);
     padding: 22px 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: var(--body);
     text-decoration: none;
     transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
 }

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

 .btn.primary {
     background: var(--ink);
     color: #fff;
     border-color: var(--ink);
 }

 .btn.primary:focus-visible {
     box-shadow: 0 0 0 6px rgba(11, 95, 255, 0.22);
 }

 .btn.positive {
     background: var(--mint);
     border-color: var(--mint);
     color: #fff;
 }

 /* Hero Section */
 .hero {
     padding-top: calc(var(--nav) + var(--space));
     padding-bottom: var(--space);
 }

 .horizon {
     position: absolute;
     left: 0;
     right: 0;
     bottom: -10%;
     height: 55%;
     background: linear-gradient(to top, rgba(11, 95, 255, 0.12), transparent 65%);
 }

 .horizon.mint {
     background: linear-gradient(to top, rgba(0, 184, 148, 0.14), transparent 65%);
 }

 .badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     border: 1px solid var(--silver);
     border-radius: 999px;
     padding: 12px 18px;
     font-size: 15px;
 }

 .badge .dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--blue);
 }

 /* Pain Items */
 .pain-item {
     margin-bottom: 136px;
     transition: opacity 0.2s ease-in-out;
     text-align: left;
 }

 .pain-item:nth-of-type(even) {
     margin-left: 30%;
 }

 .dimmed {
     opacity: 0.2 !important;
 }

 .pain-item h3 {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: clamp(32px, 4.5vw, 44px);
     letter-spacing: -0.02em;
     line-height: 1.12;
     margin: 0;
     display: inline;
 }

 .toggle-answer {
     cursor: pointer;
 }

 .toggle-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    transition: transform 0.3s ease;
 }
 .pain-item .answer {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
     margin-top: 12px;
     color: #fff;
     font-size: var(--body);
     text-align: left;
     max-width: 60%;
 }

 .pain-item:nth-of-type(even) .answer {
     /* margin-left: 40%; */
     max-width: 100%;
 }

 .pain-item.open .answer {
     opacity: 1;
 }

 /* CMS Section */
 #cmsnotthecure .nh-card h3 {
     margin-bottom: 20px;
     color: #cc3333;
 }

 #cmsnotthecure .nh-card p {
     margin-top: 0;
     max-width: none;
     margin-inline: 0;
     line-height: 1.6;
 }

 /* NewsHub Section */
 #newshub {
     font-weight: 500;
     line-height: 1.4;
     color: #0a0a0a;
 }

 .hello-brixwire-headline {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-weight: 500;
     font-size: 4rem;
     line-height: 1.4;
     color: #0a0a0a;
     margin-bottom: 24px;
 }

 .nh-grid {
     display: flex;
     flex-direction: column;
     gap: var(--gap-card);
     margin-top: 110px;
     max-width: 900px;
     margin-inline: auto;
     position: relative;
 }

 .nh-card {
     background: var(--white);
     border-radius: var(--radius);
     padding: 72px 64px;
     max-width: 720px;
     width: 100%;
     color: var(--ink);
     box-shadow: 0 40px 120px rgba(0, 0, 0, 0.05);
 }

 .nh-card h3 {
     margin-bottom: 24px;
 }


 #newshub .lead {
     max-width: unset;
 }

 .nh-card:nth-child(odd) {
     align-self: flex-start;
     transform: translateX(-6%);
 }

 .nh-card:nth-child(even) {
     align-self: flex-end;
     transform: translateX(6%);
 }


 /* Benefits Section */
 #benefits {
     background: var(--white);
     color: var(--ink);
     padding: var(--space) 48px;
 }

 #benefits .benefit-list {
     margin-top: 80px;
     display: grid;
     gap: 24px;
     list-style: none;
     padding: 0;
     max-width: 1200px;
     margin-inline: auto;
 }

 .benefit-item {
     background: rgba(255, 255, 255, 0.08);
     border-radius: 20px;
     padding: 48px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     text-align: left;
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     position: relative;
     overflow: hidden;
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 .benefit-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 0.8;
     transition: opacity 0.3s ease;
     z-index: -1;
 }

 .benefit-item:nth-child(1)::before {
     background: var(--glass-1);
 }

 .benefit-item:nth-child(2)::before {
     background: var(--glass-2);
 }

 .benefit-item:nth-child(3)::before {
     background: var(--glass-3);
 }

 .benefit-item:nth-child(4)::before {
     background: var(--glass-4);
 }

 .benefit-item:nth-child(5)::before {
     background: var(--glass-5);
 }

 .benefit-item:nth-child(6)::before {
     background: var(--glass-6);
 }

 .benefit-item:nth-child(7)::before {
     background: var(--glass-7);
 }

 .benefit-item:nth-child(8)::before {
     background: var(--glass-8);
 }

 #benefits .h1 {
     background: var(--ink);
     color: var(--white);
     padding: 20px 40px;
     border-radius: 12px;
     display: inline-block;
     margin-bottom: 40px;
 }

 #benefits .benefit-heading {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: 24px;
     font-weight: 600;
     letter-spacing: -0.02em;
     line-height: 1.3;
     margin: 0 0 16px 0;
     color: var(--ink);
     text-align: left;
 }

 #benefits .benefit-text {
     /* font-size: 17px; */
     line-height: 1.6;
     color: var(--ink);
     margin: 0;
     text-align: left;
     font-weight: 400;
 }

 @media (min-width: 640px) {
     #benefits .benefit-list {
         grid-template-columns: repeat(1, 1fr);
         gap: 20px;
     }

     .benefit-item {
         padding: 40px 48px;
     }
 }

 @media (min-width: 900px) {
     #benefits .benefit-list {
         grid-template-columns: repeat(2, 1fr);
         gap: 48px;
     }
 }

 @media (min-width: 1200px) {
     #benefits .benefit-list {
         grid-template-columns: repeat(2, 1fr);
         gap: 64px;
     }

     .benefit-item {
         padding: 56px;
     }

     #benefits .benefit-heading {
         font-size: 26px;
         margin-bottom: 20px;
     }

 }

 /* Capabilities Section */
 #capabilities {
     background: var(--white);
     color: var(--ink);
     padding: var(--space) 48px;
 }

 #capabilities .h1 {
     background: var(--ink);
     color: var(--white);
     padding: 20px 40px;
     border-radius: 12px;
     display: inline-block;
     margin-bottom: 40px;
 }

 .cap-card {
     background: rgba(255, 255, 255, 0.08);
     border-radius: 20px;
     padding: 48px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     text-align: left;
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     position: relative;
     overflow: hidden;
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 .cap-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 0.8;
     transition: opacity 0.3s ease;
     z-index: -1;
 }

 .cap-card:nth-child(1)::before {
     background: var(--glass-8);
 }

 .cap-card:nth-child(2)::before {
     background: var(--glass-4);
 }

 .cap-card:nth-child(3)::before {
     background: var(--glass-3);
 }

 .cap-card:nth-child(4)::before {
     background: var(--glass-6);
 }

 .cap-card:nth-child(5)::before {
     background: var(--glass-7);
 }

 .cap-card:nth-child(6)::before {
     background: var(--glass-2);
 }

 .cap-card h3 {
     font-family: "Inter Tight", Inter, ui-sans-serif;
     font-size: 24px;
     font-weight: 600;
     letter-spacing: -0.02em;
     line-height: 1.3;
     margin: 0 0 16px 0;
     color: var(--ink);
     text-align: left;
 }

 .cap-card p {
     color: var(--ink);
     margin: 0;
     text-align: left;
 }

 @media (min-width: 640px) {
     .cap-card {
         padding: 40px 48px;
     }
 }

 @media (min-width: 1200px) {
     .cap-card {
         padding: 56px;
     }

     .cap-card h3 {
         font-size: 26px;
         margin-bottom: 20px;
     }
 }

 /* Logos and Proof Section */
 .figure {
     border-radius: var(--radius);
     background: #eef1f6;
     box-shadow: 0 40px 120px rgba(0, 0, 0, 0.07) inset, 0 20px 60px rgba(0, 0, 0, 0.04);
     position: relative;
 }

 .logos-table {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     margin: 40px 20px 40px 20px;
 }

 .logo-row {
     display: flex;
     gap: 50px;
 }

 .logo-row img {
     height: 5vh;
     width: auto;
     object-fit: contain;
     opacity: 0.55;
     flex: 0 1;
     transition: opacity 0.2s ease-in-out;
 }

 .logo-row img.highlight,
 .logo-row img:hover {
     opacity: 1;
 }

 /* Quotes Section */
 .quotes-container {
     display: flex;
     gap: 48px;
     margin-top: 100px;
     margin-inline: auto;
 }

 .customer-quote {
     flex: 1;
     background: var(--white);
     border-radius: var(--radius);
     padding: 48px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 .quote {
     font-family: 'Georgia';
     font-size: clamp(20px, 2.5vw, 26px);
     font-style: italic;
     margin: 0;
     text-align: left;
     color: var(--ink);
 }

 .spiegel-quote .quote-logo {
     margin-top: unset;
 }

 .quote-person {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 20px;
     margin-top: auto;
 }

 .quote-person-text {
     display: flex;
     flex-direction: column;
     gap: 8px;
     text-align: right;
 }

 .quote-person-name {
     font-size: 18px;
     font-weight: 600;
     color: var(--ink);
     line-height: 1.3;
 }

 .quote-person img {
     width: 160px;
     height: 160px;
     border-radius: 50%;
     object-fit: cover;
 }

 .quote-person-info {
     font-size: 16px;
     font-weight: 500;
     color: var(--ink);
     line-height: 1.3;
     opacity: 0.7;
 }

 .quote-logo {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: auto;
     min-height: 60px;
 }

 .quote-logo img {
     max-height: 50px;
     width: auto;
     object-fit: contain;
 }

 /* Responsive behavior for quotes */
 @media (max-width: 900px) {
     .quotes-container {
         flex-direction: column;
         gap: 48px;
         margin-top: 80px;
     }

     .customer-quote {
         padding: 40px 32px;
     }

     .quote {
         font-size: clamp(18px, 3vw, 22px);
     }
 }

 @media (max-width: 600px) {
     .quotes-container {
         gap: 32px;
         margin-top: 60px;
     }

     .customer-quote {
         padding: 32px 24px;
         gap: 24px;
     }

     .quote {
         font-size: 18px;
     }

     .quote-person {
         gap: 16px;
     }

     .quote-person img {
         width: 50px;
         height: 50px;
     }

     .quote-person-info {
         font-size: 14px;
     }

     #newshub .nh-card,
     #newshub .nh-card:nth-child(odd),
     #newshub .nh-card:nth-child(even) {

         padding: 55px 34px;
     }
 }

 /* Tiles */
 .tile {
     border-radius: var(--radius);
     padding: 64px;
     /* background: #fff; */
 }

 .tile.dark {
     background: #101012;
     color: #fff;
     border-color: rgba(255, 255, 255, 0.12);
 }

 /* Specifications Section */
 #specs {
     background: var(--graphite);
     color: #fff;
 }

 #specs .tile {
     margin-inline: auto;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius);
     background: var(--ink);
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
     padding: 0;
 }

 #specs .specs {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--body);
     color: #fff;
 }

 #specs .specs th,
 #specs .specs td {
     padding: 24px 32px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     text-align: left;
 }

 #specs .specs th {
     width: 256px;
     background: var(--graphite);
     font-weight: 500;
     color: #fff;
 }

 #specs .specs tr:last-child th,
 #specs .specs tr:last-child td {
     border-bottom: none;
 }


 .contact-info {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
     gap: 2rem;
     margin-top: 113px;
     font-size: var(--h3);
     margin-left: auto;
     margin-right: auto;
 }

 .contact-info .mail {
     grid-column: 1;
     grid-row: 1;
     justify-self: center;
     padding: 16px 32px;
     border-radius: 12px;
     display: inline-block;
 }

 .contact-info .phone {
     grid-column: 2;
     grid-row: 2;
     justify-self: center;
     padding: 16px 32px;
     border-radius: 12px;
     display: inline-block;
 }

 #about .h1 {
     background: var(--ink);
     color: var(--white);
     padding: 20px 40px;
     border-radius: 12px;
     display: inline-block;
     margin-bottom: 40px;
 }

 /* Team Section */
 .persons {
     display: grid;
     gap: 48px;
     margin-top: 64px;
     grid-template-columns: repeat(2, 1fr);
 }

 @media (min-width: 1080px) {
     .persons {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .person-card {
     background: var(--white);
     border-radius: var(--radius);
     padding: 48px;
     text-align: center;
     transition: transform 0.28s ease, border-color 0.28s ease;
 }

 .person-card img {
     width: 100%;
     object-fit: cover;
     border-radius: 16px;
     margin-bottom: 24px;
 }

 .person-card .info {
     margin-top: 24px;
 }

 /* Footer */
 .footer {
     padding: 120px 48px;
     border-top: 1px solid var(--silver);
     background: #fdfdfd;
 }

 /* Call to Action Stick */
 .cta-stick {
     position: fixed;
     left: 0;
     right: 0;
     bottom: -140px;
     background: rgba(255, 255, 255, 0.94);
     -webkit-backdrop-filter: saturate(180%) blur(10px);
     backdrop-filter: saturate(180%) blur(10px);
     border-top: 1px solid rgba(0, 0, 0, 0.06);
     padding: 24px 48px;
     z-index: 1200;
     transition: transform 0.35s ease, opacity 0.35s ease;
     transform: translateY(140px);
     opacity: 0;
 }

 .cta-stick.show {
     transform: translateY(0);
     opacity: 1;
     bottom: 0;
 }

 .cta-inner {
     max-width: var(--maxw);
     margin-inline: auto;
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 /* Progress Bar */
 .progress {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: var(--blue);
     width: 0;
     z-index: 1400;
 }

 /* Animation and Reveal */
 .reveal,
 .tile,
 .cap-card,
 .benefit-item,
 .cta-stick,
 .top {
     will-change: transform, opacity;
     transform: translateZ(0);
 }

 .reveal {
     opacity: 0;
     transform: translateY(36px);
     transition: opacity 0.66s ease, transform 0.66s ease;
 }

 .reveal.in {
     opacity: 1;
     transform: none;
 }

 /* Responsive Design */
 @media (prefers-reduced-motion: reduce) {
     .reveal {
         opacity: 1;
         transform: none;
         transition: none;
     }

     .btn {
         transition: none;
     }

     .cta-stick {
         transition: none;
     }

     #newshub .nh-card {
         transition: none;
     }
 }

 @media (max-height: 1000px) {
     #stickyBar .btn {
         font-size: var(--small);
         padding: 12px 20px;
     }

     .cta-stick {
         padding: 16px 48px;
     }
 }

 @media (max-width: 1080px) and (min-width: 601px) {

     .btn {
         padding: 14px 18px;
         font-size: calc(var(--body) - 2px);
     }

     .tile {
         padding-top: 25px;
         padding-bottom: 20px;
         padding-left: 15px;
         padding-right: 15px;
     }

     .hello-brixwire-headline {
         font-size: 3rem;
     }

     .nh-card,
     .nh-card:nth-child(odd),
     .nh-card:nth-child(even) {
         align-self: center;
         transform: none !important;

         padding: 62px 48px;
         width: auto;
     }

     .pain-item .answer {
         max-width: 82%;
     }
 }

 @media (max-width: 600px) {
     .nav a:not(:last-child) {
         display: none;
     }

     .btn {
         padding: 12px 18px;
         font-size: var(--small);
     }

     .toggle-button {
         padding: 8px 16px;
     }

     .section {
         padding: 65px 25px 38px 25px;
     }

     .cta-info {
         display: none;
     }

     .logo-row {
         gap: 30px;
     }

     .cap-card {
         padding: 32px 24px;
     }

     .cap-card h3 {
         font-size: 20px;
         margin-bottom: 12px;
     }


     #benefits .benefit-list {
         grid-template-columns: repeat(1, 1fr);
         gap: 36px;
     }

     .benefit-item {
         padding: 32px 24px;
     }

     #benefits .benefit-heading {
         font-size: 20px;
         margin-bottom: 12px;
     }

     #benefits .benefit-text {
         font-size: 16px;
     }

     #specs .specs {
         border: 0;
     }

     #specs .specs tr {
         display: block;
         margin: 20px;
         border: none;
     }

     #specs .specs th {
         display: block;
         background: transparent;
         border: none;
         padding: 0 0 8px 0;
         font-weight: 600;
     }

     #specs .specs td {
         display: block;
         border: none;
         padding: 0;
     }

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

     #contact .contact-info {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
         max-width: none;
     }

     #contact .contact-info .mail,
     #contact .contact-info .phone {
         grid-column: unset;
         grid-row: unset;
         justify-self: unset;
     }



     .nh-card,
     .nh-card:nth-child(odd),
     .nh-card:nth-child(even) {
         align-self: center;
         transform: none !important;
         padding: 36px 27px;
         width: auto;
     }

     /* Remove stairway effect on mobile for better readability */
     .nh-grid {
         align-items: center;
         margin-top: 70px;
         gap: 60px;
     }

     .pain-item .answer {
         max-width: 100%;
     }

     #benefits .benefit-list {
         margin-top: 50px;
     }

     .pain-item:nth-of-type(even) {
         margin-left: 0%;
     }

     #newshub .nh-grid {
         margin-top: 70px;
         gap: 60px;
     }

 }

 /* Overview Section Specific Styles */
 #overview .h1 {
     text-align: left !important;
 }

 #overview .reveal {
     text-align: left !important;
 }

 /* Footer Ring Text Animation */
 .ring-text {
     font-family: "Times New Roman", Georgia, serif;
     font-weight: 700;
     font-style: italic;
     font-size: clamp(28px, 6vw, 56px);
     letter-spacing: 0.5px;
     line-height: 1.25;
     position: relative;
     background-image:
         radial-gradient(120% 180% at 10% 0%, var(--gold-1) 0%, var(--gold-2) 30%, var(--gold-3) 60%, #7a4b00 100%),
         linear-gradient(90deg, var(--gold-1), var(--gold-3), var(--gold-1));
     background-size: 140% 140%, 300% 100%;
     background-position: 50% 50%, 0% 0%;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     filter: saturate(1.1);
     text-shadow: none;
     user-select: none;
     opacity: 0;
     transition: opacity 2s ease;
 }

 .ring-text .char {
     display: inline-block;
     opacity: 0;
     transform: translateY(0.35em) rotate(-6deg) scale(0.98);
     filter: blur(3px) brightness(0.7);
     text-shadow: none;
     will-change: transform, opacity, filter, text-shadow;
 }

 .ring-text.is-visible {
     opacity: 1;
     animation: shimmer 3.5s linear infinite;
 }

 .ring-text.is-visible .char {
     animation: reveal 1s forwards;
     animation-delay: calc(var(--char-index) * 0.055s);
 }

 .ring-text.fade-out {
     opacity: 0;
 }

 @keyframes reveal {
     0% {
         opacity: 0;
         transform: translateY(0.45em) rotate(-10deg) scale(0.96);
         filter: blur(4px) brightness(0.6);
         text-shadow:
             0 0 0 var(--ember-1),
             0 0 0 var(--ember-2),
             0 0 0 var(--ember-3);
     }

     55% {
         opacity: 1;
         transform: translateY(-0.05em) rotate(-2deg) scale(1.02);
         filter: blur(0.5px) brightness(1.15);
         text-shadow:
             0 0 6px var(--ember-1),
             0 0 18px var(--ember-2),
             0 0 36px var(--ember-3);
     }

     100% {
         opacity: 1;
         transform: translateY(0) rotate(0) scale(1);
         filter: blur(0) brightness(1);
         text-shadow:
             0 0 4px var(--ember-1),
             0 0 14px var(--ember-2),
             0 0 28px var(--ember-3),
             0 0 54px rgba(255, 180, 20, 0.55);
     }
 }

 @keyframes shimmer {
     0% {
         background-position: 50% 50%, 0% 0%;
     }

     50% {
         background-position: 50% 50%, 100% 0%;
     }

     100% {
         background-position: 50% 50%, 0% 0%;
     }
 }

 /* Safari Compatibility */
 .safari .top,
 .safari .cta-stick {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
     background: rgba(255, 255, 255, 0.98);
 }

 .safari #benefits .aurora {
     mix-blend-mode: normal;
     filter: blur(36px);
     opacity: 0.12;
 }

 .safari .cap-card {
     contain: paint;
 }

 .benefit-item,
 .cap-card {
     overflow: hidden;
     contain: paint;
 }