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

body {
  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
   line-height: 1.75;
	color: #000000;
  background-color: #ffffff;
}

.top-nav {
        position: fixed;
  top: 0;
    left: 0;
	 right: 0;
   background-color: #ffffff;
    border-bottom: 1px solid #000000;
	z-index: 1000;
  height: 50px;
}

.nav-container {
    max-width: 100%;
    height: 100%;
   display: flex;
  align-items  :   center;
   justify-content    :       space-between;
    padding: 0 20px;
}

.nav-left,
.nav-right {
   display: flex;
  align-items: center;
    gap: 20px;
    flex: 1;
}

.nav-right {
    justify-content: flex-end;
}

.nav-left .material-icons {
    font-size: 20px;
   color: #000000;
                    cursor: pointer;
}

.nav-center {
 flex   :  0 0 auto;
}

.logo {


  font-family: 'Old English Text MT', serif;
    font-size: 32px;
	font-weight: 700;
	text-decoration: none;
	color: #000000;
    letter-spacing: 0;


}

.btn-subscribe

{
             padding: 6px 14px;
    background-color: #726464;
   color: #ffffff;
    text-decoration: none;
  font-size: 11px;
    font-weight: 700;
        text-transform: uppercase;
  letter-spacing: 0.5px;
   border-radius: 2px;
    transition: background-color 0.3s;

}

.btn-subscribe:hover {
    background-color  :        #000000;
}

.hero {
   max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px 80px;
} 

.hero-container {
    border-bottom: 1px solid #000000;
    padding-bottom: 80px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
   gap: 80px;
         align-items: center;
   margin-bottom  :        60px;
}

.hero-text {
   max-width: 500px;
}

.hero-meta {
    margin-bottom: 10px;
}

.category {
	font-size: 11px;
   font-weight     :700;
   text-transform     :   uppercase;
   letter-spacing: 1px;
    color: #726464;
}

.hero-title	{
  font-family: 'Cheltenham', 'Times New Roman', serif;
 font-size: 64px;
                    font-weight: 700;
      line-height: 1;
  margin-bottom :   20px;
    color: #000000;
   letter-spacing     : -1px;
}

.hero-byline	{
	   font-size: 22px;
	line-height: 1.4;
    color: #726464;
    margin-bottom: 35px;
   font-style: italic;
	}

.article-body {
  margin-bottom: 40px;
}

.lead-paragraph {
		font-size :       18px;
  line-height: 1.7;
  margin-bottom: 20px;
   color: #000000;
}

.article-body p {
    margin-bottom: 20px;
}



.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}



.btn-primary {
	  display :       inline-flex;
   align-items: center;
  gap: 8px;
    padding   :        16px 32px;
                    background-color: #726464;
  color :       #ffffff;
  text-decoration:     none;
                    font-size:    14px;
    font-weight: 700;
   text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #726464;
    transition: all 0.3s;

}

.btn-primary:hover {
    background-color    :        #000000;
   border-color  :      #000000;
  transform: translateY(-2px); 

}

.btn-primary .material-icons {
	font-size: 20px;
}

.btn-secondary{
	   display: inline-flex;
	 align-items: center;
    padding :     16px 32px;
  background-color: transparent;
   color   :      #726464;
  text-decoration  :      none;
			font-size     : 14px;
		font-weight: 700;
   text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #726464;
    transition: all 0.3s; 

	}

.btn-secondary:hover {
  color: #ffffff;
  transform: translateY(-2px);
   background-color: #72646480;
}

.hero-image {

	  align-items: center;
   justify-content  :center;
  display: flex;}

.hero-image img {
	   max-width    :      100%;
 height   :   auto;
   max-height: 600px;
   display: block;}

.divider


{
   width: 100%;
      height: 1px;
	 background-color: #000000;
    margin: 60px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
   gap: 0;
    border: 1px solid #000000;
}

.feature-box {
   transition: background-color 0.3s;
   padding: 40px 30px;
  text-align    :      center;
	 border-right  :1px solid #000000;

}

.feature-box:hover {
    background-color: #f5f5f5;
}

.feature-box:last-child     {
          border-right: none;
     }

.feature-box .material-icons	{
    font-size: 40px;
  color: #726464;
  margin-bottom: 15px;
}

.feature-box h3 {
         font-size: 14px;
   font-weight: 700;
    text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000000;
  margin-bottom: 8px;}

.feature-box p	{
       font-size: 13px;
    color: #726464;
       line-height: 1.4;
	
}

.footer {
   background-color: #ffffff;
  border-top: 1px solid #000000;
   padding: 50px 20px 30px;
}

.footer-container {
   max-width: 1200px;
         margin: 0 auto;
   text-align  :     center;
}

.footer-logo {
  margin-bottom: 30px;
  padding-bottom: 30px;
    border-bottom: 1px solid #000000;
}

.footer-logo h2
{
  font-family: 'Old English Text MT', serif;
    font-size: 36px;
                    color: #000000;
}

.footer-links {
    display: flex;
  justify-content :     center;
  gap :     40px;
    margin-bottom: 30px;
  flex-wrap  :wrap;
}

.footer-links a {
         color: #726464;
   text-decoration  :   none;
   font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
   letter-spacing: 0.5px;
      transition: color 0.3s;
}

.footer-links a:hover  {
	 color: #000000;
}

.footer-bottom {
   padding-top: 30px;
   border-top: 1px solid #000000;
}

.footer-bottom p		{
   font-size: 12px;
  color: #726464;
}@media (max-width: 968px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .hero-text {
        max-width: 100%;
    }
    
    .hero-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .logo {
        font-size: 24px;
    }
    
    .hero-title {
        font-size: 42px;
    }
    
    .hero-byline {
        font-size: 18px;
    }
    
    .lead-paragraph {
        font-size: 16px;
    }
    
    .hero-image img {
        max-height: 450px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-box {
        border-right: none;
        border-bottom: 1px solid #000000;
    }
    
    .feature-box:last-child {
        border-bottom: none;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 32px;
    }
    
    .btn-subscribe {
        display: none;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}.about-section {
    max-width: 1200px; 
    margin  :0 auto; 
   padding  :    80px 20px; 
	 border-bottom : 1px solid #000000;
}

.about-container {
   width   :  100%;
}

.section-header


{
  text-align: center;
   margin-bottom: 60px;
}

.section-category {
   	font-size: 11px;
   font-weight     :      700;
  text-transform:        uppercase;
   letter-spacing: 1px;
  color: #726464;
    display: block;
   margin-bottom: 15px; 
}

.section-title {


    font-size:       48px;
	    font-weight: 700;
	  font-family: 'Cheltenham', 'Times New Roman', serif;
	    color: #000000;
		letter-spacing   : -0.5px;
		line-height: 1.1;


}

.about-content {

	    display: grid;
	    grid-template-columns: 1fr 1fr;
	   gap: 80px;
	   align-items: center;


}

.about-text   {
   max-width: 550px;
}

.about-lead 
 {
   font-size: 20px;
    line-height: 1.7;
    margin-bottom: 25px;
  color: #000000;
   font-weight   :     600;
}

.about-text p {

   font-size :        16px;
  line-height: 1.75;
				 margin-bottom: 20px;
  color: #000000;

}

.about-image {

	display: flex;
       justify-content: center;
    align-items: center;}

.about-image img    {


  max-width: 100%;
   height: auto;
    display: block;
  border: 1px solid #000000;


}

.who-needs-section {
  max-width: 1200px;
   margin: 0 auto;
   padding: 80px 20px;
}

.who-needs-container {
  width: 100%;
}

.who-needs-grid {

	  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
    border: 1px solid #000000;
  margin-bottom: 60px; 

}

.who-needs-card {
	    padding: 40px 30px;
                    text-align: center;
  border-right: 1px solid #000000;
   -moz-transition: background-color 0.3s;
	border-bottom: 1px solid #000000;
   transition: background-color 0.3s;
}

.who-needs-card:hover {
	 background-color     :       #f5f5f5;
}

.who-needs-card:nth-child(3n) {
        border-right: none;
}

.who-needs-card:nth-child(n + 4) {
    border-bottom: none; 

}

.who-needs-card .material-icons {
	font-size: 48px;
   color: #726464;
   margin-bottom: 20px;
}

.who-needs-card h3 {
	 font-size: 18px;
  font-weight: 700;
  color:        #000000;
  margin-bottom: 15px;
   letter-spacing: 0.3px;
	
}  

.who-needs-card p {
    font-size: 14px;
    line-height: 1.6;
  color: #726464;
}

.who-needs-cta {
	    padding-top: 40px;
    text-align: center;
	 border-top: 1px solid #000000;



}

.cta-text	{
    font-size: 20px;
    line-height: 1.5;
   color: #726464;
       margin-bottom: 30px;
   font-style: italic;
	}@media (max-width: 968px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .about-text {
        max-width: 100%;
    }
    
    .who-needs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .who-needs-card:nth-child(3n) {
        border-right: 1px solid #000000;
    }
    
    .who-needs-card:nth-child(2n) {
        border-right: none;
    }
    
    .who-needs-card:nth-child(n + 5) {
        border-bottom: none;
    }
    
    .who-needs-card:nth-child(3),
    .who-needs-card:nth-child(4) {
        border-bottom: 1px solid #000000;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 36px;
    }
    
    .about-lead {
        font-size: 18px;
    }
    
    .who-needs-grid {
        grid-template-columns: 1fr;
    }
    
    .who-needs-card {
        border-right: none;
        border-bottom: 1px solid #000000;
    }
    
    .who-needs-card:last-child {
        border-bottom: none;
    }
    
    .cta-text {
        font-size: 18px;
    }
}.screenshots-section {
       max-width: 1400px;
	 margin: 0 auto;
    padding: 80px 20px;
   border-bottom: 1px solid #000000;
}

.screenshots-container {
  width: 100%;
}

.section-subtitle {
  font-size  :    18px;
   line-height: 1.5;
   color: #726464;
    margin-top: 15px;
  font-style: italic;
}

.screenshots-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap   :      30px;
         margin-top: 50px;

}

.screenshot-item {
   display: flex;
  justify-content: center;
	align-items: center;
  border: 1px solid #000000;
	background-color: #f9f9f9;
   padding: 20px;
}

.screenshot-item img {
        max-width: 100%;
   height: auto;
               display: block;
}@media (max-width: 1024px) {
    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .screenshots-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .screenshot-item {
        padding: 15px;
    }
}.contact-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 20px;
   border-bottom  :1px solid #000000;
}

.contact-container {
     width: 100%;
}

.section-subtitle a {
    color: #726464;
    text-decoration: underline;
   transition: color 0.3s;
}

.section-subtitle a:hover		{
  color: #000000;
}

.contact-form-wrapper {
    margin-top: 50px;
}

.contact-form
{
    border: 1px solid #000000;
     padding: 50px;
    background-color    :      #f9f9f9;
}

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

.form-group label {
   display   :  block;
   font-size:  14px;
	 font-weight    :  700;
    text-transform: uppercase;
  letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: #000000;
}

.form-group input,
.form-group textarea {
   width: 100%;
    padding: 12px 15px;
   font-size: 16px;
  font-family: 'Libre Franklin', sans-serif;
   border: 2px solid #000000;
    background-color: #ffffff;
   color: #000000;
    transition :        border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
    border-color: #726464;
}

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

.error-message {
  display: block;
   font-size:    13px;
    color: #d32f2f;
          margin-top: 8px;
  min-height: 18px;
}

.btn-send {
    border: 2px solid #726464;
  color: #ffffff;
  text-transform: uppercase;
	cursor: pointer;
    font-weight: 700;
      padding: 16px 32px;
   transition: all 0.3s;
   background-color: #726464;
   letter-spacing  :1px;
  font-size: 14px;
   width: 100%;
}

.btn-send:hover {
   background-color: #000000;
	border-color  :    #000000;
  transform: translateY(-2px);
}

.popup-overlay  
  {

   position: fixed;
  top: 0;
   left: 0;
    right: 0;
   bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
    justify-content: center;
  align-items    :       center;
    z-index: 9999;
   opacity   :  0;
  visibility: hidden;
   transition     :  all 0.3s;

}

.popup-overlay.active {
  opacity: 1;
   visibility: visible;
}

.popup-content{
    background-color: #ffffff;
  border: 2px solid #000000;
 padding: 60px 50px;
    max-width: 500px;
	width: 90%;
  text-align  :  center;
    position: relative;
  transform: scale(0.8);
   transition: transform 0.3s;
}

.popup-overlay.active .popup-content {
  transform: scale(1);
}

.popup-icon {
  margin-bottom: 25px;


}

.popup-icon .material-icons {
 font-size: 80px;
		color:    #726464;
}

.popup-content h3 {
  font-family: 'Cheltenham', 'Times New Roman', serif;
	font-size: 36px;
         font-weight : 700;
	color: #000000;
    margin-bottom: 20px;
}

.popup-content p
	{
    font-size: 16px;
   line-height: 1.6;
    color: #726464;
  margin-bottom: 35px;
}

.btn-close-popup {
   padding: 14px 40px;
          background-color: #726464;
    color: #ffffff;
      border :      2px solid #726464;
	font-size: 13px;
   font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor     :pointer;
  transition  :all 0.3s;
}

.btn-close-popup:hover {
         background-color: #000000;
	 border-color: #000000;
}@media (max-width: 768px) {
    .contact-form {
        padding: 30px 25px;
    }
    
    .popup-content {
        padding: 40px 30px;
    }
    
    .popup-content h3 {
        font-size: 28px;
    }
    
    .popup-icon .material-icons {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 25px 20px;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 14px;
    }
}.nav-container {
    max-width: 100%;
  height: 100%;
   display: flex;
   align-items: center;
  justify-content   : center;
    padding: 0 20px;
  position: relative;
}

.nav-center {
    flex: 0 0 auto;
}



.nav-right {
   position    :     absolute;
  right   :       20px;
}