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

   :root {
       --orange: #F97316;
       --orange-dark: #EA6500;
       --orange-light: #FFF7ED;
       --orange-mid: #FFEDD5;
       --black: #0F0F0F;
       --gray-900: #1A1A1A;
       --gray-700: #374151;
       --gray-500: #6B7280;
       --gray-200: #E5E7EB;
       --gray-100: #F9FAFB;
       --white: #FFFFFF;
       --font-display: 'Fraunces', Georgia, serif;
       --font-body: 'Plus Jakarta Sans', sans-serif;
       --radius-sm: 6px;
       --radius-md: 12px;
       --radius-lg: 20px;
       --radius-xl: 32px;
       --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
       --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
       --shadow-orange: 0 6px 32px rgba(249, 115, 22, .30);
   }

   html {
       scroll-behavior: smooth
   }

   body {
       font-family: var(--font-body);
       font-size: 16px;
       line-height: 1.65;
       color: var(--gray-900);
       background: var(--gray-100);
       -webkit-font-smoothing: antialiased
   }

   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 24px
   }

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

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

   /* ── Nav ── */
   .nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 100;
       background: rgba(255, 255, 255, .92);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--gray-200)
   }

   .nav-inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 64px
   }

   .logo-image {
       height: 32px;
       width: auto;
       display: block
   }

   .nav-logo {
       display: flex;
       align-items: center;
       gap: 10px
   }

   .logo-mark {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       border-radius: 9px;
       background: var(--orange);
       color: var(--white);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 14px
   }

   .logo-text {
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 18px;
       color: var(--black)
   }

   .nav-links {
       display: flex;
       align-items: center;
       gap: 28px
   }

   .nav-links a {
       font-size: 14px;
       font-weight: 500;
       color: var(--gray-700);
       transition: color .2s
   }

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

   .nav-cta {
       background: var(--orange) !important;
       color: var(--white) !important;
       padding: 8px 18px;
       border-radius: var(--radius-sm);
       font-weight: 600 !important;
       font-size: 14px
   }

   @media(max-width:860px) {
       .nav-links {
           display: none
       }
   }

   /* ── Hero ── */
   .contact-hero {
       background: var(--black);
       padding: 112px 0 52px;
       text-align: center;
       position: relative;
       overflow: hidden
   }

   .contact-hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(249, 115, 22, .18) 0%, transparent 70%);
       pointer-events: none
   }

   .hero-badge {
       display: inline-block;
       background: rgba(249, 115, 22, .15);
       border: 1px solid rgba(249, 115, 22, .4);
       color: #fed7aa;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 1px;
       text-transform: uppercase;
       padding: 5px 16px;
       border-radius: 100px;
       margin-bottom: 18px
   }

   .contact-hero h1 {
       font-family: var(--font-display);
       font-size: clamp(30px, 5vw, 50px);
       font-weight: 700;
       color: var(--white);
       line-height: 1.1;
       letter-spacing: -.3px;
       margin-bottom: 12px
   }

   .contact-hero h1 em {
       font-style: italic;
       color: var(--orange)
   }

   .contact-hero p {
       color: #9ca3af;
       font-size: 15px;
       max-width: 420px;
       margin: 0 auto
   }

   /* ── Layout ── */
   .contact-layout {
       max-width: 860px;
       margin: 0 auto;
       padding: 40px 24px 80px;
       display: grid;
       grid-template-columns: 1fr 300px;
       gap: 24px;
       align-items: start
   }

   @media(max-width:720px) {
       .contact-layout {
           grid-template-columns: 1fr
       }
   }

   /* ── Card ── */
   .card {
       background: var(--white);
       border: 1.5px solid var(--gray-200);
       border-radius: var(--radius-xl);
       padding: 32px 28px
   }

   /* ── Form ── */
   .form-group {
       display: flex;
       flex-direction: column;
       gap: 6px;
       margin-bottom: 16px
   }

   .form-group:last-of-type {
       margin-bottom: 0
   }

   .form-group label {
       font-size: 13px;
       font-weight: 600;
       color: var(--gray-700)
   }

   .form-group label span {
       color: var(--orange)
   }

   .form-control {
       font-family: var(--font-body);
       font-size: 14.5px;
       color: var(--black);
       background: var(--gray-100);
       border: 1.5px solid var(--gray-200);
       border-radius: var(--radius-sm);
       padding: 10px 14px;
       outline: none;
       transition: border-color .18s, background .18s;
       width: 100%
   }

   .form-control:focus {
       border-color: var(--orange);
       background: var(--white)
   }

   .form-control::placeholder {
       color: var(--gray-500)
   }

   textarea.form-control {
       resize: vertical;
       min-height: 130px;
       line-height: 1.65
   }

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

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

   /* ── Topic chips ── */
   .topic-group {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 4px
   }

   .topic-chip {
       background: var(--gray-100);
       border: 1.5px solid var(--gray-200);
       color: var(--gray-700);
       font-size: 13px;
       font-weight: 500;
       padding: 6px 14px;
       border-radius: 100px;
       cursor: pointer;
       transition: all .18s;
       user-select: none
   }

   .topic-chip:hover {
       border-color: var(--orange);
       color: var(--orange)
   }

   .topic-chip.selected {
       background: var(--orange-mid);
       border-color: var(--orange);
       color: var(--orange-dark);
       font-weight: 600
   }

   /* ── Submit button ── */
   .submit-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       padding: 13px 20px;
       background: var(--orange);
       color: var(--white);
       border: none;
       border-radius: var(--radius-sm);
       font-family: var(--font-body);
       font-size: 15px;
       font-weight: 700;
       cursor: pointer;
       transition: background .2s, transform .2s, box-shadow .2s;
       margin-top: 20px
   }

   .submit-btn:hover {
       background: var(--orange-dark);
       transform: translateY(-1px);
       box-shadow: var(--shadow-orange)
   }

   .submit-btn:disabled {
       background: var(--gray-200);
       color: var(--gray-500);
       cursor: not-allowed;
       transform: none;
       box-shadow: none
   }

   /* ── Success state ── */
   .success-box {
       display: none;
       background: var(--orange-light);
       border: 1.5px solid var(--orange-mid);
       border-radius: var(--radius-md);
       padding: 20px;
       text-align: center;
       margin-top: 16px
   }

   .success-box.show {
       display: block
   }

   .success-box .s-icon {
       font-size: 32px;
       margin-bottom: 8px
   }

   .success-box h4 {
       font-family: var(--font-display);
       font-size: 17px;
       font-weight: 700;
       color: var(--black);
       margin-bottom: 4px
   }

   .success-box p {
       font-size: 13.5px;
       color: var(--gray-500)
   }

   /* ── Sidebar info ── */
   .info-card {
       background: var(--white);
       border: 1.5px solid var(--gray-200);
       border-radius: var(--radius-xl);
       padding: 28px 24px;
       position: sticky;
       top: 84px
   }

   .info-card-title {
       font-family: var(--font-display);
       font-size: 17px;
       font-weight: 700;
       color: var(--black);
       margin-bottom: 18px
   }

   .info-item {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 14px 0;
       border-bottom: 1px solid var(--gray-200)
   }

   .info-item:last-of-type {
       border-bottom: none
   }

   .info-icon {
       font-size: 20px;
       flex-shrink: 0;
       margin-top: 1px
   }

   .info-item h5 {
       font-size: 13.5px;
       font-weight: 700;
       color: var(--black);
       margin-bottom: 2px
   }

   .info-item p {
       font-size: 12.5px;
       color: var(--gray-500);
       line-height: 1.55
   }

   .info-item a {
       color: var(--orange);
       font-weight: 600
   }

   .info-item a:hover {
       text-decoration: underline
   }

   /* ── Response time badge ── */
   .resp-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: var(--orange-light);
       border: 1px solid var(--orange-mid);
       color: var(--orange-dark);
       font-size: 12px;
       font-weight: 600;
       padding: 5px 12px;
       border-radius: 100px;
       margin-top: 16px
   }

   .resp-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--orange);
       animation: pulse 1.8s ease infinite
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 1
       }

       50% {
           opacity: .4
       }
   }

   /* ── Card label / title ── */
   .card-label {
       font-size: 10.5px;
       font-weight: 700;
       letter-spacing: 1px;
       text-transform: uppercase;
       color: var(--orange);
       margin-bottom: 6px;
       display: block
   }

   .card-title {
       font-family: var(--font-display);
       font-size: 22px;
       font-weight: 700;
       color: var(--black);
       margin-bottom: 22px;
       line-height: 1.2
   }

   /* ── Footer ── */
   .footer {
       background: var(--black);
       padding-top: 60px;
       padding-bottom: 0
   }

   .footer-inner {
       display: grid;
       grid-template-columns: 1.6fr 1fr;
       gap: 60px;
       padding-bottom: 52px;
       border-bottom: 1px solid rgba(255, 255, 255, .08)
   }

   @media(max-width:640px) {
       .footer-inner {
           grid-template-columns: 1fr;
           gap: 32px
       }
   }

   .footer .logo-text {
       color: var(--white)
   }

   .footer-tagline {
       font-family: var(--font-display);
       font-size: 16px;
       font-style: italic;
       color: #9ca3af;
       margin-top: 10px;
       margin-bottom: 14px
   }

   .footer-flagodna {
       font-size: 13px;
       color: #6b7280;
       line-height: 1.65;
       max-width: 380px
   }

   .footer-flagodna a {
       color: var(--orange);
       text-decoration: underline;
       text-underline-offset: 3px
   }

   .footer-links {
       display: flex;
       gap: 40px
   }

   .footer-col {
       display: flex;
       flex-direction: column;
       gap: 10px
   }

   .footer-col h5 {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 1px;
       text-transform: uppercase;
       color: #6b7280;
       margin-bottom: 4px
   }

   .footer-col a {
       font-size: 14px;
       color: #9ca3af;
       transition: color .2s
   }

   .footer-col a:hover {
       color: var(--orange)
   }

   .footer-bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 20px 24px;
       font-size: 12.5px;
       color: #4b5563;
       flex-wrap: wrap;
       gap: 8px
   }

   /* ── Animations ── */
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(16px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   .hero-badge {
       animation: fadeUp .4s ease .1s both
   }

   .contact-hero h1 {
       animation: fadeUp .4s ease .2s both
   }

   .contact-hero p {
       animation: fadeUp .4s ease .3s both
   }

   .contact-layout {
       animation: fadeUp .4s ease .35s both
   }