/*==================================================
  ARTICLE PAGE 
==================================================*/

/*========== ROOT ==========*/

:root {

  --article-width: 900px;
  --toc-width: 260px;
  --primary: #0c234e;
  --secondary: #c94f3d;
  --text: #1f2937;
  --text-light: #5f6b7a;
  --background: #ffffff;
  --surface: #f8fafc;
  --border: #e5e7eb;
  --success: #2e7d32;
  --warning: #b45309;
  --danger: #c62828;
  --info: #1565c0;
  --radius: 18px;

  --shadow-sm: 0 6px 16px rgba(0,0,0,.08);
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --shadow-hover: 0 20px 45px rgba(0,0,0,.18);

  --motion-fast: .3s ease;
  --motion-normal: .4s cubic-bezier(.22,.61,.36,1);
  --motion-slow: .55s cubic-bezier(.22,.61,.36,1);

  --lift-small: -3px;
  --lift-medium: -6px;
  --lift-large: -10px;

  --scale-small: 1.03;
  --scale-medium: 1.05;
  --transition: var(--motion-normal);
}

/*========== MOTION SYSTEM ==========*/

.hover-lift{
transition:
transform var(--motion-normal),
box-shadow var(--motion-normal);
will-change:transform;
}

.hover-lift:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

.hover-image{
overflow:hidden;
}

.hover-image img{
transition:transform var(--motion-slow);
will-change:transform;
}

.hover-image:hover img{
transform:scale(var(--scale-small));
}


/*========== RESET ==========*/

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


/*========== BODY ==========*/

.article-page{
  background:#dae3e6;
  color:var(--text);
  font-family:"Inter",sans-serif;
  line-height:1.9;
  overflow-x:hidden;
}

/*========== CONTAINER ==========*/

.article-page .container{
  width:min(92%,var(--article-width));
  margin:auto;
}

/*========== LINKS ==========*/

.article-page a{
color:var(--primary);
text-decoration:none;
transition:
color var(--motion-fast),
transform var(--motion-normal),
opacity var(--motion-fast);
}

.article-page a:hover{
  color:var(--secondary);
}

/*========== IMAGES ==========*/

.article-page img{
display:block;
width:100%;
height:auto;
backface-visibility:hidden;
transform:translateZ(0);
}

/*========== HEADINGS ==========*/

.article-page h1{
  font-size:clamp(2.4rem,4vw,3.8rem);
  line-height:1.15;
  font-weight:800;
  color:var(--primary);
  margin-bottom:24px;
}

.article-page h2{
  font-size:2rem;
  color:var(--primary);
  margin-top:80px;
  margin-bottom:25px;
  line-height:1.25;
}

.article-page h3{
  font-size:1.35rem;
  color:var(--primary);
  margin-bottom:16px;
}

/*========== PARAGRAPHS ==========*/

.article-page p{
  font-size:1.08rem;
  color:var(--text);
  margin-bottom:22px;
}

/*========== LISTS ==========*/

.article-page ul,
.article-page ol{
  margin:25px 0;
  padding-left:30px;
}

.article-page li{
  margin-bottom:14px;
}

/*========== STRONG ==========*/

.article-page strong{
  color:var(--primary);
  font-weight:700;
}

/*========== BLOCKQUOTE ==========*/

.article-page blockquote{
  margin:40px 0;
  padding:30px;
  border-left:5px solid var(--secondary);
  background:var(--surface);
  border-radius:12px;  font-style:italic;
}

/*========== CODE ==========*/

.article-page code{
  background:#eef2f7;
  padding:3px 8px;
  border-radius:6px;
  font-size:.95rem;
}

/*========== HR ==========*/

.article-page hr{
  border:none;
  height:1px;
  background:var(--border);
  margin:60px 0;
}

/*========== SECTIONS ==========*/

.article-page section{
  margin-bottom:56px;
}

/*========== READING PROGRESS ==========*/

.reading-progress{

  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
background: linear-gradient(
    90deg,
    #0c234e 0%,
    #c94f3d 55%,
    #b57b3c 100%
  );

  z-index: 99999;
}

/*========== TEXT SELECTION ==========*/

::selection{
  background:#0c234e;
  color:#fff;
}

/*========== SMOOTH SCROLL ==========*/

html{
  scroll-behavior:smooth;
}

/*========== section divider ==========*/
.section-divider{
  width:160px;
  height:8px;
  background:linear-gradient(to right, transparent, #b57b3c, transparent);
  margin:60px auto; /* 🔥 FIX */
  border-radius:2px;
}

/*==================================================
  HERO & BREADCRUMB
==================================================*/

/*========== BREADCRUMB ==========*/

.article-breadcrumb{
    margin-right:16px;
}

.article-breadcrumb a{
display:inline-block;
color:var(--text-light);

transition:
transform .45s cubic-bezier(.22,.61,.36,1),
color .35s ease,
opacity .35s ease,
padding-left .45s cubic-bezier(.22,.61,.36,1);

will-change:transform;

}

.article-breadcrumb a:hover{
transform:translateX(-16px);
color:var(--secondary);
opacity:.9;
}


/*========== HERO ==========*/

.article-hero{
    padding-bottom:70px;
}

.article-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;

    margin-top:20px;
    margin-bottom:32px;
}

/*========== CATEGORY ==========*/

.article-category{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    border-radius:999px;
    background:#eef4ff;
    color:var(--primary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

/*========== DATE ==========*/

.article-date{
    display:flex;
    align-items:center;
    color:var(--text-light);
    font-size:.95rem;
}

/*========== READING TIME ==========*/

.article-reading-time{
    display:flex;
    align-items:center;
    color:var(--text-light);
    font-size:.95rem;
}

/*========== SUBTITLE ==========*/

.article-subtitle{    
    max-width:760px;    
    font-size:1.2rem;    
    line-height:1.8;    
    color:var(--text-light);    
    margin-bottom:45px;    
}

/*========== HERO IMAGE ==========*/

.article-hero-image{
overflow:hidden;
border-radius:22px;
margin-top:40px;
box-shadow:var(--shadow);
}


.article-hero-image img{
transition:transform var(--motion-slow);
will-change:transform;
}


.article-hero-image:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

.article-hero-image:hover img{
transform:scale(var(--scale-small));
}

/*========== ARTICLE CONTENT ==========*/

.article-content{
    padding-bottom:80px;
}


.article-content>section:first-child{
    margin-top:10px;
}


.article-content section{
    scroll-margin-top:104px;
}


.article-content section:first-child p:first-of-type{
    font-size:1.18rem;
    color:#374151;
}


.image-caption{
    margin-top:15px;
    text-align:center;
    color:var(--text-light);
    font-size:.92rem;
    font-style:italic;
}

/*========== ARTICLE FADE-IN ==========*/

.article-content section{
    animation:fadeUp .7s ease both;
}

/*========== ANIMATION ==========*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }

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

    }
}

/*==================================================
  TABLE OF CONTENTS & ARTICLE CONTEN
==================================================*/

/*========== TABLE OF CONTENTS ==========*/

.table-of-contents{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:35px;
    margin-bottom:70px;
    box-shadow:var(--shadow-sm);
}

.table-of-contents h2{
   margin:0 0 25px;
   font-size:1.5rem;
}

.table-of-contents ol{
    margin:0;
   padding-left:22px;
}


.table-of-contents li{
    margin-bottom:14px;
}

.table-of-contents li:last-child{
    margin-bottom:0;
}

.table-of-contents a{
    color:var(--text);
    font-weight:500;
    transition:var(--transition);
}

.table-of-contents a:hover{
    color:var(--secondary);
    padding-left:6px;
}

/*========== STICKY TOC (DESKTOP) ==========*/

@media (min-width:1200px){

.table-of-contents{
    position:sticky;
    top:100px;

}
}
/*========== ARTICLE WRAPPER ==========*/

.article-content{
    font-size:1.08rem;
}

/*========== HEADINGS ==========*/

.article-content h2{
    position:relative;
    padding-bottom:15px;
}

.article-content h2::after{
    content:"";
    position:absolute;
    left:0;
  bottom:0;
  width:70px;
   height:4px;
    border-radius:50px;
    background:var(--secondary);
}

.article-content h3{
   margin-top:35px;
}

/*========== PARAGRAPHS ==========*/

.article-content p{

   margin-bottom:24px;
    text-align:justify;
}

/*========== LINKS ==========*/

.article-content a{
    color:var(--secondary);
    font-weight:600;
}

.article-content a:hover{
    text-decoration:underline;
}

/*========== LISTS ==========*/

.article-content ul{
    margin:25px 0;
    padding-left:25px;
}

.article-content ol{
    margin:25px 0;
    padding-left:25px;
}

.article-content li{
    margin-bottom:14px;
    color:var(--text);
    line-height:1.8;
}

/*========== EMPHASIS ==========*/

.article-content strong{
    color:var(--primary);
    font-weight:700;
}

.article-content em{
    font-style:italic;
}

/*========== FIRST PARAGRAPH ==========*/

.article-content section>p:first-of-type{
    font-size:1.12rem;
}

/*========== SPACING ==========*/
.article-content section{
    margin-bottom:70px;
}


/*========== HORIZONTAL RULE ==========*/
.article-content hr{
    margin:70px 0;
}


/*========== SMALL TEXT ==========*/
.article-content small{
    color:var(--text-light);
}


/*========== RESPONSIVE ==========*/
@media (max-width:768px){
.table-of-contents{
    padding:25px;
}
}
.table-of-contents h2{
    font-size:1.3rem;
}

.article-content p{
    text-align:left;
}


/*==================================================
  TABLES, CALLOUTS & CONTENT BOXES
  Part 4/7
==================================================*/

/*========== COMPARISON TABLE ==========*/

.comparison-table{
    overflow-x:auto;
    margin:40px 0;
    border-radius:18px;
    box-shadow:var(--shadow);
}

.comparison-table table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    background:#fff;
}

.comparison-table th{
    background:var(--primary);
    color:#fff;
    padding:18px;
    text-align:left;
    font-size:1rem;
    font-weight:700;
}

.comparison-table td{
    padding:18px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    vertical-align:top;
    line-height:1.7;
}

.comparison-table tbody tr:nth-child(even){
    background:#f9fafb;
}

.comparison-table tbody tr{
transition:
background var(--motion-fast);
}

/*========== COMMON BOXES ==========*/

.article-warning,
.article-tip,
.article-highlight{
    margin:35px 0;
    padding:28px;
    border-radius:18px;
    border-left:6px solid;
    box-shadow:var(--shadow-sm);
    transition:
transform var(--motion-normal),
box-shadow var(--motion-normal);
}

.article-warning:hover,
.article-tip:hover,
.article-highlight:hover{
transform:translateY(var(--lift-small));
box-shadow:var(--shadow);
}

.article-warning p:last-child,
.article-tip p:last-child,
.article-highlight p:last-child{
    margin-bottom:0;
}

/*========== WARNING ==========*/
.article-warning{
    background:#fff8f4;
    border-color:#d97706;
}

.article-warning strong{
 color:#b45309;
}
.article-warning p{
 color:#b45309;
}


/*========== TIP ==========*/

.article-tip{
    background:#f2fbf6;
    border-color:#2e7d32;
}

.article-tip strong{
    color:#2e7d32;
}

/*========== HIGHLIGHT ==========*/

.article-highlight{
    background:#f4f8ff;
    border-color:var(--primary);
}

.article-highlight h3{
    margin-top:0;
    margin-bottom:15px;
}

.article-highlight p:last-child{
    margin-bottom:0;
}

/*========== INLINE NOTE ==========*/

.article-note{
  background:#eef4ff;
  padding:20px 24px;
  border-radius:14px;
  margin:30px 0;
  color:var(--primary);
  font-weight:500;
}

/*========== FACT BOX ==========*/

.fact-box{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:30px;
    margin:40px 0;
    transition:
transform var(--motion-normal),
box-shadow var(--motion-normal);
}

.fact-box:hover{
transform:translateY(var(--lift-small));
box-shadow:var(--shadow);
}

.fact-box h3{
    margin-top:0;
}

.fact-box ul{
    margin-bottom:0;
}

/*========== QUOTE BOX ==========*/

.quote-box{
    margin:40px 0;
    padding:35px;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #f8fafc,
        #eef5ff
    );

    border-left:5px solid var(--secondary);
    font-style:italic;
    font-size:1.08rem;

transition:
transform var(--motion-normal),
box-shadow var(--motion-normal);
}

.quote-box:hover{
transform:translateY(var(--lift-small));
box-shadow:var(--shadow);
}

/*========== TABLE RESPONSIVE ==========*/

@media (max-width:768px){

.comparison-table{
    margin:30px -10px;
    border-radius:14px;
}

.article-warning,
.article-tip,
.article-highlight,
.fact-box,
.quote-box{

    padding:22px;

}

}

/*==================================================
  FAQ ACCORDION
==================================================*/

.faq-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:var(--shadow-sm);
   transition:var(--motion-normal);
}


.faq-item:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

/*========== QUESTION BUTTON ==========*/

.faq-question{
    width:100%;
    background:#fff;
    border:none;
    outline:none;
    cursor:pointer;
    padding:22px 28px;
    display:flex;
    justify-content:space-between;
  align-items:center;
    gap:20px;
    text-align:left;
    font-size:1.05rem;
    font-weight:700;
    color:var(--primary);
    transition:var(--transition);
}

.faq-question:hover{
    background:#f8fafc;
}

/*========== PLUS ICON ==========*/

.faq-question span{
    width:34px;
    height:34px;
    flex-shrink:0;
    border-radius:50%;
    background:#eef2f7;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:700;
    transition:var(--transition);
}

/*========== ACTIVE ==========*/

.faq-item.active .faq-question{
    background:#f8fafc;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
    background:var(--secondary);
    color:#fff;
}

/*========== ANSWER ==========*/

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease;
    background:#fff;
}

.faq-answer p{
    padding:0 28px;
    margin-bottom:20px;
    color:var(--text);
}

.faq-answer p:first-child{
    padding-top:5px;
}

.faq-answer p:last-child{
    margin-bottom:28px;
}

/*========== OPEN STATE ==========*/

.faq-item.active .faq-answer{
    max-height:1000px;
}

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

#faq h2{
    margin-bottom:35px;
}

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

@media (max-width:768px){

.faq-question{
 padding:20px;
    font-size:1rem;
}

.faq-question span{
    width:30px;
    height:30px;
    font-size:1.2rem;
}

.faq-answer p{
    padding-left:20px;
    padding-right:20px;
}

}

/*==================================================
    • SHARE • RELATED ARTICLE
==================================================*/


/*========== SHARE ==========*/

/*========== SHARE ==========*/

.article-share{
    margin:80px 0;
    text-align:center;
}

.article-share h3{
    margin-bottom:25px;
}

.share-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.share-btn{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:50%;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    transition:all .3s ease;
    text-decoration:none !important;
    color:#0c234e !important;
    font-size:0;
}

.share-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 10px 20px rgba(0,0,0,.2);
}

.share-btn:nth-child(1):hover{
    background:#25D366;
}

.share-btn:nth-child(2):hover{
    background:#1877F2;
}

.share-btn:nth-child(3):hover{
    background:#0A66C2;
}

.share-btn:nth-child(4):hover{
    background:#c94f3d;
}

.share-btn .icon{
    width:26px;
    height:26px;
    display:block;
}

.share-btn{
    color:#0c234e;
}

.share-btn:hover{
    color:#fff;
}

#copyLink{
    border:none;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
}

#copyLink:focus,
#copyLink:focus-visible{
    outline:none;
    border:none;
}

/*========== RELATED ARTICLES ==========*/

.related-articles{
    margin-top:90px;
    margin-bottom:20px;
}

.related-articles h2{
    margin-bottom:35px;
}

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

.related-card{
    display:block;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--border);
    transition:
        transform var(--motion-normal),
        box-shadow var(--motion-normal);
    transform: scale(1.01);
}


.related-card:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

.related-image{
    overflow:hidden;
border-radius:18px 18px 0 0;
}

.related-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:
transform var(--motion-slow);
}

.related-card:hover img{
   transform:scale(var(--scale-small));
}

.related-content{
    padding:25px;
}

.related-content span{
    display:inline-block;
    margin-bottom:12px;
    color:var(--secondary);
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.related-content h3{
    margin:0;
    font-size:1.2rem;
    line-height:1.45;
}

/*========== back to updates ==========*/

.back-to-updates{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#b57b3c;
    color:#fff !important;
    padding:14px 28px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none !important;
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
        
}

.updates{
    text-align:center;
    margin-bottom:4px !important;
}

.back-to-updates:hover{
    background:#c94f3d;
    color:#fff !important;
    text-decoration:none !important;
    border:none;
    outline:none;
    transform:translateY(-4px) scale(1.03);
}

.update-card.hidden{
  display:none;
}


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

@media (max-width:992px){

.related-grid{
    grid-template-columns:1fr;
}
}


/* ARTICLE FOOTER */

.article-footer{
background:#0c234e;
color:white;
text-align:center;
padding: 24px 16px 32px; /* 🔥 less top, more bottom */
}


.article-footer a{
color:#b57b3c;
text-decoration:none;
}

.article-footer-social{
display:flex;
justify-content:center;
gap:16px;
margin:16px 0;
}

.article-footer-social a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:white;
color:#0c234e;
text-decoration:none;
transition:0.3s;
}

.article-footer-social svg{
width:24px;
height:24px;
}

.article-footer-social a:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

.article-footer-social a:nth-child(1):hover{
background:#E4405F;
color:white;
}

.article-footer-social a:nth-child(2):hover{
background:#1877F2;
color:white;
}




/*==================================================
  RESPONSIVE DESIGN
==================================================*/

/*========== TABLETS ==========*/

@media (max-width:992px){
  .article-page .container{
    width:min(94%,900px);
  }

  .article-page h1{
    font-size:2.8rem;
  }

  .article-page h2{
    font-size:1.8rem;
  }

  .article-subtitle{
    font-size:1.08rem;
  }

}


/*========== TABLETS ==========*/

@media (max-width:768px){
  .article-page .container{
    width:92%;
  }

  .article-meta{
    gap:10px;
  }

  .article-category,
  .article-date,
  .article-reading-time{
    font-size:.82rem;
  }

  .article-page h1{
   font-size:2.2rem;
    line-height:1.25;
  }

  .article-page h2{
    font-size:1.55rem;
    margin-top:55px;
  }

  .article-page h3{
    font-size:1.2rem;
  }

  .article-page p{
    font-size:1rem;
    line-height:1.8;
  }

  .article-subtitle{
    font-size:1rem;
  }

  .article-hero-image{
    border-radius:16px;
  }

}

/*========== PHONES ==========*/

@media (max-width:576px){

  .reading-progress{
    height:3px;
  }

  .article-page h1{
    font-size:1.9rem;
  }

  .article-page h2{
    font-size:1.4rem;
  }

  .article-page h3{
    font-size:1.1rem;
  }

  .article-page p{
    font-size:.98rem;
  }

.article-meta{
    display:grid;
    grid-template-columns:auto auto;
    justify-content:start;
    align-items:center;
    column-gap:14px;
    row-gap:14px;
}

.article-breadcrumb{
    margin-right:0;
}

.article-date{
    grid-column:1;
}

.article-reading-time{
    grid-column:2;
}

  .table-of-contents{
    display:inline-block;
  }

  .table-of-contents a:hover{
transform:translateX(6px);
}

  .comparison-table table{
   min-width:620px;
  }

  .related-content{
    padding:20px;
  }

  .related-image img{
    height:190px;
  }

  .share-buttons{
    flex-direction:column;
  }

  .share-btn{
    width:100%;
  }

  .back-to-updates{
    width:100%;
    justify-content:center;
  }

}

/*========== SMALL PHONES ==========*/

@media (max-width:380px){

  .article-page h1{
    font-size:1.65rem;
  }

  .article-page h2{
    font-size:1.3rem;
  }
  

  .table-of-contents{
    padding:18px
  }

}

/*========== IMAGE RESPONSIVENESS ==========*/

.article-content img{
max-width:100%;
height:auto;
display:block;
border-radius:18px;
box-shadow:var(--shadow);
transition:
transform var(--motion-slow),
box-shadow var(--motion-normal);
will-change:transform;
}

.article-content img:hover{

transform:
translateY(var(--lift-medium))
scale(var(--scale-small));

box-shadow:var(--shadow-hover);

}


/*========== PRINT ==========*/

@media print{

  .reading-progress,
  .article-share,
  .related-articles,
  .article-breadcrumb,
  .back-to-updates{

    display:none !important;

  }

  body{
    background:#fff;
  }

  .article-page{
    color:#000;

  }
}


/* Emergency repair flow */

.repair-card{
background:#f6f7fb;
border-radius:18px;
overflow:hidden;
margin:32px 0;
border-left:6px solid var(--primary-color);
box-shadow:var(--shadow-sm);
transition:var(--motion-normal);
}

.repair-card:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

.repair-toggle{
width:100%;
background:none;
border:none;
cursor:pointer;
display:flex;

justify-content:space-between;
align-items:center;
padding:16px 32px;
font-size:24px;
font-weight:700;
color:var(--primary-color);
}

.repair-toggle span:first-child{
font-size:24px;
}

.repair-icon{
font-size:34px;
transition:.3s;
}

.repair-card.active .repair-icon{
transform:rotate(45deg);
}

.repair-content{
max-height:0;
overflow:hidden;
transition:max-height .45s ease;

padding:0 30px;
}

.repair-card.active .repair-content{
max-height:1200px;
padding-bottom:30px;
}

.repair-step{
text-align:center;
margin:0;
}

.repair-step h4{
margin:10px 0;
font-size:24px;
}

.repair-step p{
text-align:center;
margin:0;
line-height:1.7;
}

.flow-arrow{
display:flex;
justify-content:center;
margin:8px 0;
color:var(--primary-color);
}

.flow-branch{
margin-top:10px;
}

.branch-line{
width:240px;
height:2px;
background:currentColor;
margin:0 auto;
position:relative;
}

.branch-line::before{
content:"";
position:absolute;
left:50%;
top:-24px;
width:2px;
height:24px;
background:currentColor;
transform:translateX(-50%);
}

.branch-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
margin-top:20px;
}

.branch-column{
text-align:center;
}

.branch-column h4{
margin:10px 0;
}

@media(max-width:768px){

.branch-columns{
grid-template-columns:1fr;
gap:40px;
}

.branch-line{
display:none;
}
}

/* ==================================================
   ENGINEERING STACK DIAGRAM
================================================== */

.engineering-stack{
max-width:700px;
margin:40px auto;
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

.stack-layer{
width:100%;
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:22px 26px;
text-align:center;
box-shadow:0 8px 22px rgba(0,0,0,.08);
transition:.3s ease;
}

.stack-layer:hover{
transform:translateY(-4px);
box-shadow:0 14px 30px rgba(0,0,0,.12);
}

.stack-layer h4{
margin:8px 0 10px;
font-size:20px;
font-weight:700;
color:#1e3a5f;
}

.stack-layer p{
margin:0;
font-size:15px;
line-height:1.7;
color:#555;
}

.stack-icon{
font-size:34px;
line-height:1;
}

.stack-arrow{
font-size:34px;
font-weight:700;
color:#c94f3d;
line-height:1;
}

.stack-final{
background:linear-gradient(135deg,#eef8f2,#ffffff);
border:2px solid #1d8f55;
}

@media (max-width:768px){

.stack-layer{
padding:18px;
}

.stack-layer h4{
font-size:18px;
}

.stack-arrow{
font-size:28px;
}

.stack-icon{
font-size:30px;
}
}


/*==================================================
  PRODUCT SHOWCASE
==================================================*/

.product-showcase{
display:grid;
grid-template-columns:1fr 1.2fr;
align-items:center;
gap:60px;

margin:80px 0;
}

.product-showcase:first-child{
margin-top:40px;
}

/*========== IMAGE ==========*/

.product-showcase-image{
position:relative;
overflow:hidden;
border-radius:28px;
box-shadow:var(--shadow);

transition:
transform var(--motion-normal),
box-shadow var(--motion-normal);
}

.product-showcase-image:hover{
transform:translateY(var(--lift-medium));
box-shadow:var(--shadow-hover);
}

.product-showcase-image img{
display:block;
width:100%;
height:420px;
object-fit:cover;

transition:
transform var(--motion-slow);

will-change:transform;
}

.product-showcase-image:hover img{
transform:scale(var(--scale-small));
}

/*========== CONTENT ==========*/

.product-showcase-content{
margin-top:28px;
max-width:520px;

}

.product-showcase-content h2{
margin:0 0 20px;
font-size:2.4rem;
}

.product-showcase-content p{
margin:0;
font-size:1.08rem;
line-height:1.9;
color:var(--text);
}

/*========== section reverse ==========*/
section
.product-showcase.reverse{
grid-template-columns:1.2fr 1fr;
}

.product-showcase.reverse
.product-showcase-content{
order:2;
}

.product-showcase.reverse
.product-showcase-image{
order:1;
}
/*========== OPTIONAL LABEL ==========*/

.product-label{
display:inline-flex;
align-items:center;
justify-content:center;

margin-bottom:18px;
padding:8px 16px;

background:#eef4ff;
color:var(--primary);

border-radius:999px;

font-size:.82rem;
font-weight:700;
letter-spacing:.4px;
text-transform:uppercase;
}

@media (max-width:768px){

.product-showcase{
grid-template-columns:1fr;
gap:28px;
}

.product-showcase.reverse
.product-showcase-image,
.product-showcase.reverse
.product-showcase-content{
order:unset;
}

.product-showcase-image img{
height:auto;
}
}