/* ================================================================
     Lokal gehostete Schriften (DSGVO-konform, keine Google-Verbindung)
     Dateien erwartet im Unterordner:  /fonts/
     Lizenz: SIL Open Font License 1.1 – kommerzielle Nutzung erlaubt
     ================================================================ */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/inter-400.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('fonts/inter-500.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('fonts/inter-600.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('fonts/inter-700.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('fonts/poppins-600.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('fonts/poppins-700.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url('fonts/poppins-800.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url('fonts/poppins-900.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Caveat';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('fonts/caveat-600.woff2') format('woff2');
 }

 @font-face {
   font-family: 'Caveat';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('fonts/caveat-700.woff2') format('woff2');
 }

 :root {
   --navy-950: #081521;
   --navy-900: #0d2438;
   --navy-800: #123049;
   --navy-700: #1a4066;
   --orange-600: #e8590c;
   --orange-500: #f2711f;
   --orange-100: #fde6d7;
   --ink: #182430;
   --ink-soft: #4b5a68;
   --paper: #f5f7f9;
   --paper-2: #ffffff;
   --line: #e3e8ec;
   --radius: 14px;
   --shadow-md: 0 12px 30px -12px rgba(8, 21, 33, .25);
   --shadow-lg: 0 24px 60px -20px rgba(8, 21, 33, .35);
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   font-family: 'Inter', sans-serif;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4 {
   font-family: 'Poppins', sans-serif;
   margin: 0;
   letter-spacing: -0.01em;
 }

 p {
   margin: 0;
   line-height: 1.65;
   color: var(--ink-soft);
 }

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

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

 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 section {
   position: relative;
 }

 .wrap {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 32px;
 }

 @media(max-width:640px) {
   .wrap {
     padding: 0 20px;
   }
 }

 /* ---------- Script tagline (brand accent) ---------- */
 .script-tag {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   line-height: 1;
 }

 .script-tag .txt {
   font-family: 'Caveat', cursive;
   font-weight: 700;
   font-size: 1em;
   color: #fff;
   white-space: nowrap;
 }

 .script-tag.orange .txt {
   color: var(--orange-500);
 }

 .script-tag .swoosh {
   width: 100%;
   height: .32em;
   margin-top: .05em;
   display: block;
 }

 .script-tag .swoosh path {
   fill: var(--orange-600);
 }

 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--orange-600);
   margin-bottom: 14px;
 }

 .eyebrow::before {
   content: "";
   width: 22px;
   height: 2px;
   background: var(--orange-600);
   display: inline-block;
 }

 /* ---------- Buttons ---------- */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 15px 26px;
   border-radius: 10px;
   font-weight: 700;
   font-size: 15.5px;
   font-family: 'Inter', sans-serif;
   border: 2px solid transparent;
   cursor: pointer;
   transition: .2s ease;
   white-space: nowrap;
 }

 .btn-primary {
   background: var(--orange-600);
   color: #fff;
   box-shadow: 0 10px 24px -8px rgba(232, 89, 12, .55);
 }

 .btn-primary:hover {
   background: #d14f09;
   transform: translateY(-1px);
 }

 .btn-outline {
   background: transparent;
   border-color: rgba(255, 255, 255, .4);
   color: #fff;
 }

 .btn-outline:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08);
 }

 .btn-outline-dark {
   background: transparent;
   border-color: var(--navy-900);
   color: var(--navy-900);
 }

 .btn-outline-dark:hover {
   background: var(--navy-900);
   color: #fff;
 }

 .btn svg {
   width: 17px;
   height: 17px;
   flex-shrink: 0;
 }

 /* ---------- Header ---------- */
 header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(13, 36, 56, .92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 .nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 32px;
   max-width: 1240px;
   margin: 0 auto;
   gap: 24px;
 }

 .logo-link {
   display: flex;
   flex-direction: column;
   gap: 1px;
 }

 .logo-link img {
   height: 38px;
   width: auto;
 }

 .logo-tagline {
   margin-left: 2px;
 }

 .logo-tagline .txt {
   font-size: 15px;
   color: #e7edf2;
 }

 @media(max-width:560px) {
   .logo-tagline {
     display: none;
   }
 }

 nav.primary-nav ul {
   display: flex;
   gap: 36px;
 }

 nav.primary-nav a {
   color: #dfe6ec;
   font-weight: 600;
   font-size: 15px;
   padding: 6px 2px;
   border-bottom: 2px solid transparent;
   transition: .2s;
 }

 nav.primary-nav a:hover,
 nav.primary-nav a.active {
   color: #fff;
   border-color: var(--orange-600);
 }

 .header-actions {
   display: flex;
   align-items: center;
   gap: 18px;
 }

 .header-call {
   display: flex;
   align-items: center;
   gap: 9px;
   background: var(--orange-600);
   color: #fff;
   padding: 11px 20px;
   border-radius: 9px;
   font-weight: 700;
   font-size: 14.5px;
   box-shadow: 0 8px 18px -6px rgba(232, 89, 12, .6);
 }

 .header-call:hover {
   background: #d14f09;
 }

 .header-call svg {
   width: 16px;
   height: 16px;
 }

 .menu-toggle {
   display: none;
   background: none;
   border: none;
   color: #fff;
   cursor: pointer;
   padding: 6px;
 }

 .menu-toggle svg {
   width: 26px;
   height: 26px;
 }

 @media(max-width:900px) {
   nav.primary-nav {
     position: fixed;
     inset: 0 0 0 30%;
     top: 70px;
     padding: 30px 28px;
     transform: translateX(100%);
     transition: transform .3s ease, background .2s ease, box-shadow .2s ease;
     border-left: 1px solid rgba(255, 255, 255, .08);
   }

   nav.primary-nav.open {
     transform: translateX(0);
   }

   nav.primary-nav ul {
     flex-direction: column;
     gap: 22px;
     width: 100%;
     background: rgba(13, 36, 56, 0.9);
     border-radius: 14px;
     padding: 14px 12px;
     box-sizing: border-box;
   }

   nav.primary-nav.open ul {
     background: rgba(13, 36, 56, 0.97);
   }

   .header-call span {
     display: none;
   }

   .header-call {
     padding: 11px 13px;
   }

   .menu-toggle {
     display: block;
   }
 }

 /* ---------- Hero ---------- */
 .hero {
   background:
     radial-gradient(ellipse 900px 500px at 82% 15%, rgba(232, 89, 12, .16), transparent 60%),
     linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
   padding: 88px 0 110px;
   overflow: hidden;
   position: relative;
 }

 .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 46px 46px;
   mask-image: radial-gradient(ellipse 900px 600px at 70% 20%, black, transparent 70%);
   pointer-events: none;
 }

 .hero-inner {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 40px;
   align-items: center;
   position: relative;
   z-index: 2;
 }

 .hero-tag {
   color: #a9c1d6;
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 18px;
   letter-spacing: .02em;
 }

 .hero h1 {
   font-size: clamp(40px, 5.4vw, 68px);
   line-height: 1.02;
   font-weight: 900;
   color: #fff;
 }

 .hero h1 .accent {
   color: var(--orange-600);
 }

 .hero h1 .sub,
 .hero .sub {
   display: block;
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   font-size: clamp(19px, 2vw, 24px);
   color: #f1f5f8;
   margin-top: 16px;
   letter-spacing: normal;
 }

 .hero p.desc {
   color: #b7c6d4;
   font-size: 16.5px;
   max-width: 480px;
   margin-top: 18px;
 }

 .hero-ctas {
   display: flex;
   gap: 14px;
   margin-top: 34px;
   flex-wrap: wrap;
 }

 .hero-trust {
   display: flex;
   gap: 28px;
   margin-top: 44px;
   flex-wrap: wrap;
 }

 .hero-trust div {
   display: flex;
   flex-direction: column;
 }

 .hero-trust strong {
   font-family: 'Poppins', sans-serif;
   color: #fff;
   font-size: 22px;
 }

 .hero-trust span {
   color: #8fa4b8;
   font-size: 13px;
   margin-top: 2px;
 }

 /* Hero signature graphic */
 .hero-art {
   position: relative;
   height: clamp(340px, 32vw, 460px);
   width: 100%;
   max-width: 620px;
   justify-self: center;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .09);
   box-shadow: var(--shadow-lg);
 }

 .hero-art img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
 }

 .hero-art::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(8, 21, 33, .28) 0%, transparent 42%);
   pointer-events: none;
 }

 @media(max-width:900px) {
   .hero-inner {
     grid-template-columns: 1fr;
   }

   .hero-art {
     max-width: 480px;
     margin-top: 10px;
   }

   .hero {
     padding: 56px 0 76px;
   }
 }

 /* ---------- Section headers ---------- */
 .section-head {
   max-width: 640px;
   margin-bottom: 48px;
 }

 .section-head.center {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }

 .section-head h2 {
   font-size: clamp(28px, 3.4vw, 40px);
   font-weight: 800;
   color: var(--navy-900);
 }

 .section-head p {
   margin-top: 14px;
   font-size: 16.5px;
 }

 .rule-heading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 22px;
   margin-bottom: 14px;
 }

 .rule-heading .line {
   height: 1px;
   width: 64px;
   background: var(--orange-600);
   flex-shrink: 0;
 }

 .rule-heading span {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--navy-900);
   white-space: nowrap;
 }

 /* ---------- Leistungen ---------- */
 .leistungen {
   padding: 100px 0;
   background: var(--paper);
   position: relative;
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
 }

 @media(max-width:900px) {
   .service-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:560px) {
   .service-grid {
     grid-template-columns: 1fr;
   }
 }

 .service-card {
   background: var(--paper-2);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 32px 26px;
   transition: .25s ease;
   position: relative;
   overflow: hidden;
 }

 .service-card::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 3px;
   background: var(--orange-600);
   transform: scaleX(0);
   transform-origin: left;
   transition: .25s ease;
 }

 .service-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-4px);
 }

 .service-card:hover::after {
   transform: scaleX(1);
 }

 .service-icon {
   width: 54px;
   height: 54px;
   border-radius: 12px;
   background: var(--orange-100);
   color: var(--orange-600);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
 }

 .service-icon svg {
   width: 27px;
   height: 27px;
 }

 .service-card h3 {
   font-size: 18.5px;
   font-weight: 700;
   color: var(--navy-900);
   margin-bottom: 8px;
 }

 .service-card p {
   font-size: 14.5px;
   color: var(--ink-soft);
 }

 /* ---------- Über uns ---------- */
 .ueber-uns {
   padding: 110px 0;
   background: var(--navy-900);
   color: #fff;
   position: relative;
   overflow: hidden;
 }

 .ueber-uns::before {
   content: "";
   position: absolute;
   right: -120px;
   top: -120px;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   border: 70px solid rgba(255, 255, 255, .035);
 }

 .ueber-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center;
   position: relative;
   z-index: 2;
 }

 @media(max-width:900px) {
   .ueber-grid {
     grid-template-columns: 1fr;
     gap: 44px;
   }
 }

 .ueber-uns .section-head h2 {
   color: #fff;
 }

 .ueber-uns .section-head p {
   color: #b7c6d4;
 }

 .ueber-copy p {
   color: #c3d1de;
   font-size: 16.5px;
   margin-top: 16px;
 }

 .regional-tag {
   margin-top: 22px;
 }

 .regional-tag .txt {
   font-size: 26px;
 }

 .signature-block {
   margin-top: 24px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, .14);
 }

 .signature-name {
   font-family: 'Poppins', sans-serif;
   font-style: italic;
   color: var(--orange-500);
   font-size: 22px;
   font-weight: 700;
 }

 .signature-role {
   color: #8fa4b8;
   font-size: 13.5px;
   margin-top: 4px;
 }

 .value-list {
   display: flex;
   flex-direction: column;
   gap: 22px;
 }

 .value-item {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: var(--radius);
   padding: 22px 24px;
 }

 .value-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: rgba(232, 89, 12, .18);
   color: var(--orange-500);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .value-icon svg {
   width: 22px;
   height: 22px;
 }

 .value-item h4 {
   font-size: 16.5px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 4px;
 }

 .value-item p {
   color: #a9bccb;
   font-size: 14.5px;
 }

 .stat-strip {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 64px;
   padding-top: 44px;
   border-top: 1px solid rgba(255, 255, 255, .12);
   position: relative;
   z-index: 2;
   gap: 20px;
 }

 @media(max-width:700px) {
   .stat-strip {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 .stat-strip div strong {
   display: block;
   font-family: 'Poppins', sans-serif;
   font-weight: 800;
   font-size: 34px;
   color: #fff;
 }

 .stat-strip div span {
   color: #8fa4b8;
   font-size: 13.5px;
 }

 /* ---------- Ablauf (process) ---------- */
 .ablauf {
   padding: 110px 0;
   background: var(--paper-2);
 }

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

 @media(max-width:900px) {
   .ablauf-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 @media(max-width:560px) {
   .ablauf-grid {
     grid-template-columns: 1fr;
   }
 }

 .ablauf-step {
   position: relative;
   padding-left: 2px;
 }

 .ablauf-step .step-num {
   font-family: 'Poppins', sans-serif;
   font-weight: 900;
   font-size: 15px;
   color: #fff;
   background: var(--navy-900);
   width: 38px;
   height: 38px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px;
 }

 .ablauf-step:nth-child(odd) .step-num {
   background: var(--orange-600);
 }

 .ablauf-step h4 {
   font-size: 17px;
   font-weight: 700;
   color: var(--navy-900);
   margin-bottom: 8px;
 }

 .ablauf-step p {
   font-size: 14.5px;
 }

 .ablauf-connector {
   display: none;
 }

 @media(min-width:901px) {
   .ablauf-step:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 19px;
     left: calc(100% - 8px);
     width: calc(26px + 8px);
     height: 1px;
     background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px);
   }
 }

 /* ---------- Kontakt ---------- */
 .kontakt {
   padding: 110px 0 120px;
   background: var(--paper);
 }

 .kontakt-grid {
   display: grid;
   grid-template-columns: .95fr 1.05fr;
   gap: 0;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
 }

 @media(max-width:900px) {
   .kontakt-grid {
     grid-template-columns: 1fr;
   }
 }

 .kontakt-info {
   background: var(--navy-900);
   color: #fff;
   padding: 56px 46px;
   position: relative;
   overflow: hidden;
 }

 .kontakt-info::before {
   content: "";
   position: absolute;
   left: -80px;
   bottom: -80px;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   border: 40px solid rgba(255, 255, 255, .04);
 }

 .kontakt-info h3 {
   font-size: 25px;
   font-weight: 800;
   margin-bottom: 14px;
   position: relative;
   z-index: 2;
 }

 .kontakt-info>p {
   color: #b7c6d4;
   font-size: 15px;
   margin-bottom: 34px;
   position: relative;
   z-index: 2;
 }

 .kontakt-list {
   display: flex;
   flex-direction: column;
   gap: 22px;
   position: relative;
   z-index: 2;
 }

 .kontakt-list li {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }

 .kontakt-list .ic {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   background: rgba(232, 89, 12, .2);
   color: var(--orange-500);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .kontakt-list .ic svg {
   width: 20px;
   height: 20px;
 }

 .kontakt-list strong {
   display: block;
   font-size: 15px;
   color: #fff;
   font-weight: 600;
 }

 .kontakt-list span,
 .kontakt-list a {
   color: #a9bccb;
   font-size: 14.5px;
 }

 .kontakt-list a:hover {
   color: #fff;
 }

 .hours-table {
   margin-top: 34px;
   position: relative;
   z-index: 2;
   border-top: 1px solid rgba(255, 255, 255, .14);
   padding-top: 24px;
 }

 .hours-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   padding: 5px 0;
   color: #c3d1de;
 }

 .hours-row strong {
   color: #fff;
   font-weight: 600;
 }

 .kontakt-form {
   background: var(--paper-2);
   padding: 56px 46px;
 }

 .kontakt-form h3 {
   font-size: 22px;
   font-weight: 800;
   color: var(--navy-900);
   margin-bottom: 8px;
 }

 .kontakt-form>p {
   font-size: 15px;
   margin-bottom: 28px;
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin-bottom: 18px;
 }

 @media(max-width:520px) {
   .form-row {
     grid-template-columns: 1fr;
   }
 }

 .field {
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin-bottom: 18px;
 }

 .field label {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--navy-900);
 }

 .field input,
 .field select,
 .field textarea {
   border: 1.5px solid var(--line);
   border-radius: 9px;
   padding: 13px 14px;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   color: var(--ink);
   background: #fbfcfd;
   transition: .2s;
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
   outline: none;
   border-color: var(--orange-600);
   box-shadow: 0 0 0 4px rgba(232, 89, 12, .12);
 }

 .field textarea {
   resize: vertical;
   min-height: 110px;
 }

 .form-note {
   font-size: 12.5px;
   color: #8592a0;
   margin-top: 2px;
 }

 .form-note a {
   color: var(--orange-600);
   font-weight: 600;
 }

 .consent {
   display: flex;
   gap: 11px;
   align-items: flex-start;
   margin: 4px 0 20px;
   cursor: pointer;
   font-size: 13px;
   line-height: 1.55;
   color: var(--ink-soft);
 }

 .consent input[type="checkbox"] {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   margin-top: 1px;
   accent-color: var(--orange-600);
   cursor: pointer;
 }

 .consent a {
   color: var(--orange-600);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
 }

 .form-submit {
   width: 100%;
   justify-content: center;
   margin-top: 6px;
 }

 /* ---------- Projekt CTA ---------- */
 .project-cta {
   background: linear-gradient(120deg, var(--orange-600), #d14f09);
 }

 .project-cta-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   padding: 34px 32px;
 }

 .project-cta-left {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .bolt-badge {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .18);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   flex-shrink: 0;
 }

 .bolt-badge svg {
   width: 22px;
   height: 22px;
 }

 .project-cta h3 {
   color: #fff;
   font-size: 19px;
   font-weight: 800;
 }

 .project-cta p {
   color: rgba(255, 255, 255, .88);
   font-size: 14px;
   margin-top: 3px;
 }

 .project-cta-btn {
   border-color: rgba(255, 255, 255, .6);
   flex-shrink: 0;
 }

 .project-cta-btn:hover {
   border-color: #fff;
 }

 /* ---------- Footer ---------- */
 footer {
   background: var(--navy-950);
   color: #8fa4b8;
   padding: 64px 0 0;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
   gap: 44px;
   padding-bottom: 48px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 @media(max-width:900px) {
   .footer-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 @media(max-width:560px) {
   .footer-grid {
     grid-template-columns: 1fr;
   }
 }

 footer .f-logo img {
   height: 38px;
   margin-bottom: 14px;
 }

 footer .f-tag .txt {
   font-size: 22px;
 }

 footer .f-desc {
   margin-top: 14px;
   font-size: 14px;
   line-height: 1.7;
   max-width: 280px;
   color: #7c92a3;
 }

 footer h5 {
   color: #fff;
   font-size: 14.5px;
   font-weight: 700;
   margin-bottom: 18px;
   letter-spacing: .02em;
 }

 footer ul li {
   margin-bottom: 11px;
 }

 footer ul a {
   font-size: 14px;
   color: #8fa4b8;
 }

 footer ul a:hover {
   color: var(--orange-500);
 }

 .footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 26px 0;
   font-size: 13px;
   color: #647688;
   flex-wrap: wrap;
   gap: 12px;
 }

 .footer-bottom a {
   color: #647688;
 }

 .footer-bottom a:hover {
   color: #fff;
 }

 .footer-bottom .legal {
   display: flex;
   gap: 22px;
 }

 .made-with {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: #8093a5;
   white-space: nowrap;
 }

 .made-with svg {
   width: 14px;
   height: 14px;
   color: var(--orange-600);
   flex-shrink: 0;
   animation: heartbeat 2.6s ease-in-out infinite;
 }

 @keyframes heartbeat {

   0%,
   100% {
     transform: scale(1);
   }

   8% {
     transform: scale(1.18);
   }

   16% {
     transform: scale(1);
   }

   24% {
     transform: scale(1.12);
   }

   32% {
     transform: scale(1);
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .made-with svg {
     animation: none;
   }
 }

 /* Skip link + focus */
 .skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   background: var(--orange-600);
   color: #fff;
   padding: 12px 18px;
   border-radius: 8px;
   z-index: 1000;
   font-weight: 700;
 }

 .skip-link:focus {
   left: 16px;
   top: 16px;
 }

 a:focus-visible,
 button:focus-visible,
 input:focus-visible,
 textarea:focus-visible {
   outline: 3px solid var(--orange-500);
   outline-offset: 2px;
 }

 .toast {
   position: fixed;
   bottom: 26px;
   right: 26px;
   background: var(--navy-900);
   color: #fff;
   padding: 16px 22px;
   border-radius: 12px;
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14.5px;
   font-weight: 600;
   transform: translateY(20px);
   opacity: 0;
   pointer-events: none;
   transition: .3s ease;
   z-index: 200;
   border: 1px solid rgba(255, 255, 255, .1);
 }

 .toast.show {
   transform: translateY(0);
   opacity: 1;
 }

 .toast svg {
   width: 20px;
   height: 20px;
   color: var(--orange-500);
   flex-shrink: 0;
 }