/*=========================================
  FIREUPS PREMIUM ARTICLE FRAMEWORK
=========================================*/

.ai-article-wrap{

    --orange:#f58220;
    --orange-light:#ffb25a;
    --black:#111111;
    --text:#444;
    --heading:#181818;
    --border:#ececec;
    --bg:#ffffff;

    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:var(--text);
    background:var(--bg);

    max-width:1280px;
    margin:auto;
    padding:70px 40px 100px;

    font-size:20px;
    line-height:1.8;

}


/****************************
 HERO
****************************/

.ai-article-wrap h1{

    font-size:clamp(3.7rem,7vw,6rem);
    line-height:.93;
    font-weight:900;

    letter-spacing:-.06em;

    color:var(--heading);

    max-width:980px;

    margin:0;

}

.ai-article-wrap h1:before{

content:"FIREUPS MARKETING";

display:inline-block;

margin-bottom:22px;

padding:8px 18px;

border-radius:100px;

background:#111;

color:white;

font-size:.72rem;

font-weight:800;

letter-spacing:.18em;

}


/****************************
 INTRO
****************************/

.ai-article-wrap>p:first-of-type{

font-size:1.45rem;

line-height:1.55;

color:#555;

max-width:900px;

margin:35px 0 70px;

padding-left:28px;

border-left:6px solid var(--orange);

}


/****************************
 HEADINGS
****************************/

.ai-article-wrap h2{

margin-top:90px;

margin-bottom:22px;

font-size:clamp(2rem,4vw,3rem);

font-weight:850;

line-height:1.05;

letter-spacing:-.04em;

color:var(--heading);

position:relative;

}

.ai-article-wrap h2:after{

content:"";

display:block;

width:90px;

height:5px;

margin-top:18px;

border-radius:20px;

background:var(--orange);

}

.ai-article-wrap h3{

font-size:1.5rem;

font-weight:750;

margin:45px 0 15px;

color:#222;

}


/****************************
 PARAGRAPHS
****************************/

.ai-article-wrap p{

max-width:860px;

margin:0 0 24px;

color:#555;

}

.ai-article-wrap strong{

color:#111;

font-weight:700;

}

.ai-article-wrap a{

color:#c95b00;

text-decoration:none;

font-weight:700;

}

.ai-article-wrap a:hover{

color:var(--orange);

}


/****************************
 LISTS
****************************/

.ai-article-wrap ul{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:22px;

padding:0;

margin:45px 0;

list-style:none;

}

.ai-article-wrap li{

position:relative;

padding:28px;

background:white;

border:1px solid #efefef;

border-radius:22px;

box-shadow:

0 12px 35px rgba(0,0,0,.05);

transition:.35s;

}

.ai-article-wrap li:hover{

transform:translateY(-6px);

box-shadow:

0 24px 60px rgba(0,0,0,.12);

}

.ai-article-wrap li:before{

content:"";

width:18px;

height:18px;

border-radius:50%;

background:var(--orange);

position:absolute;

top:26px;

right:26px;

box-shadow:0 0 0 8px rgba(245,130,32,.15);

}


/****************************
 QUOTES
****************************/

.ai-article-wrap blockquote{

position:relative;

margin:70px auto;

max-width:950px;

padding:55px;

background:#121212;

color:white;

border-radius:26px;

font-size:2rem;

font-weight:800;

line-height:1.35;

letter-spacing:-.03em;

box-shadow:

0 30px 80px rgba(0,0,0,.22);

}

.ai-article-wrap blockquote:before{

content:"“";

position:absolute;

top:-35px;

left:35px;

font-size:8rem;

color:var(--orange);

opacity:.25;

}


/****************************
 TABLE
****************************/

.ai-article-wrap table{

width:100%;

margin:60px 0;

border-collapse:collapse;

border-radius:24px;

overflow:hidden;

box-shadow:

0 25px 70px rgba(0,0,0,.08);

}

.ai-article-wrap th{

background:#111;

color:white;

padding:22px;

text-align:left;

font-size:.8rem;

text-transform:uppercase;

letter-spacing:.12em;

}

.ai-article-wrap td{

padding:22px;

border-bottom:1px solid #eee;

background:white;

}

.ai-article-wrap tr:nth-child(even) td{

background:#fafafa;

}


/****************************
 HIGHLIGHT
****************************/

.ai-article-wrap .highlight-box{

margin:70px auto;

padding:38px;

max-width:950px;

border-radius:24px;

background:

linear-gradient(145deg,#fffaf3,#fff3df);

border:1px solid #ffd8aa;

box-shadow:

0 25px 70px rgba(245,130,32,.12);

font-size:1.18rem;

}

.ai-article-wrap .highlight-box strong{

display:block;

font-size:1.4rem;

margin-bottom:12px;

color:#c75d00;

}


/****************************
 CTA
****************************/

.ai-article-wrap .callout{

margin-top:100px;

padding:70px;

text-align:center;

border-radius:34px;

background:

radial-gradient(circle at top left,rgba(245,130,32,.45),transparent 30%),

linear-gradient(145deg,#191919,#090909);

box-shadow:

0 35px 90px rgba(0,0,0,.28);

color:white;

}

.ai-article-wrap .callout h2,
.ai-article-wrap .callout h3{

color:white;

margin:0 0 18px;

}

.ai-article-wrap .callout p{

margin:auto auto 30px;

color:#ddd;

font-size:1.25rem;

}

.ai-article-wrap .callout a{

display:inline-block;

padding:18px 34px;

margin:8px;

background:var(--orange);

color:white;

border-radius:100px;

font-weight:800;

transition:.3s;

}

.ai-article-wrap .callout a:hover{

background:#ff9d35;

transform:translateY(-3px);

}


/****************************
 IMAGES
****************************/

.ai-article-wrap img{

width:100%;

border-radius:24px;

margin:50px 0;

box-shadow:

0 35px 90px rgba(0,0,0,.18);

transition:.4s;

}

.ai-article-wrap img:hover{

transform:scale(1.015);

}


/****************************
 HR
****************************/

.ai-article-wrap hr{

height:1px;

border:0;

background:#eee;

margin:90px 0;

}


/****************************
 MOBILE
****************************/

@media(max-width:900px){

.ai-article-wrap{

padding:30px 20px 60px;

font-size:18px;

}

.ai-article-wrap h1{

font-size:3rem;

}

.ai-article-wrap>p:first-of-type{

font-size:1.15rem;

margin-bottom:50px;

}

.ai-article-wrap ul{

grid-template-columns:1fr;

}

.ai-article-wrap blockquote{

font-size:1.4rem;

padding:35px;

}

.ai-article-wrap .callout{

padding:40px 25px;

}

.ai-article-wrap .callout a{

display:block;

margin:14px 0;

}

.ai-article-wrap table{

display:block;

overflow:auto;

}

}