/* =========================================================
DOCMAKERHUB
AGREEMENT ULTRA PREMIUM CSS v2
ADSENSE + SEO + UX OPTIMIZED
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:
linear-gradient(
180deg,
#eef2f7,
#f8fafc
);

color:#0f172a;

overflow-x:hidden;

}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#e2e8f0;
}

::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
#0f172a,
#d4a017
);

border-radius:20px;

}

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

::selection{

background:#d4a017;

color:#fff;

}

/* =========================================================
PAGE WRAPPER
========================================================= */

.page-wrapper{

padding:45px 0 90px;

position:relative;

}

.page-wrapper .container{

max-width:1320px;

}

/* =========================================================
MAIN CARD
========================================================= */

.article-card{

background:#ffffff;

border-radius:36px;

padding:65px;

position:relative;

overflow:hidden;

border:1px solid #dbe4f0;

box-shadow:
0 20px 60px rgba(15,23,42,.08);

}

.article-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:8px;

background:
linear-gradient(
90deg,
#0f172a,
#1e293b,
#d4a017,
#f59e0b
);

}

.article-card::after{

content:"";

position:absolute;

top:-150px;
right:-150px;

width:320px;
height:320px;

border-radius:50%;

background:
rgba(245,158,11,.05);

}

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

.breadcrumb-box{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:35px;

font-size:14px;

font-weight:700;

color:#64748b;

}

.breadcrumb-box a{

text-decoration:none;

color:#0f172a;

transition:.3s;

}

.breadcrumb-box a:hover{

color:#d4a017;

}

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

.hero-section{

background:
linear-gradient(
135deg,
#0f172a 0%,
#172554 45%,
#1e293b 100%
);

border-radius:36px;

padding:75px;

position:relative;

overflow:hidden;

margin-bottom:90px;

}

.hero-section::before{

content:"";

position:absolute;

top:-130px;
right:-130px;

width:380px;
height:380px;

border-radius:50%;

background:
rgba(255,255,255,.05);

}

.hero-section::after{

content:"";

position:absolute;

bottom:-110px;
left:-110px;

width:260px;
height:260px;

border-radius:50%;

background:
rgba(245,158,11,.08);

}

.hero-content{

position:relative;

z-index:2;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 28px;

border-radius:50px;

background:
rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(12px);

font-size:14px;

font-weight:700;

color:#fff;

margin-bottom:28px;

}

.hero-title{

font-size:68px;

line-height:1.15;

font-weight:900;

color:#fff;

max-width:850px;

margin-bottom:28px;

letter-spacing:-1px;

}

.hero-description{

font-size:20px;

line-height:2.1;

color:#dbeafe;

max-width:760px;

margin-bottom:35px;

}

/* =========================================================
BUTTONS
========================================================= */

.hero-buttons{

display:flex;

align-items:center;

gap:22px;

flex-wrap:wrap;

margin-bottom:22px;

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:20px 42px;

border-radius:18px;

background:
linear-gradient(
135deg,
#d4a017,
#f59e0b
);

color:#fff;

font-size:17px;

font-weight:800;

text-decoration:none;

transition:.35s;

box-shadow:
0 18px 45px rgba(245,158,11,.35);

position:relative;

overflow:hidden;

animation:pulseGlow 2s infinite;

}

.primary-btn::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.8s;

}

.primary-btn:hover::before{

left:100%;

}

.primary-btn:hover{

transform:
translateY(-5px)
scale(1.03);

color:#fff;

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:20px 42px;

border-radius:18px;

background:
rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

backdrop-filter:blur(10px);

color:#fff;

font-size:17px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.secondary-btn:hover{

background:
rgba(255,255,255,.15);

color:#fff;

}

@keyframes pulseGlow{

0%{

box-shadow:
0 0 0 rgba(245,158,11,.3);

}

50%{

box-shadow:
0 0 35px rgba(245,158,11,.7);

}

100%{

box-shadow:
0 0 0 rgba(245,158,11,.3);

}

}

/* =========================================================
TRUST STRIP
========================================================= */

.trust-strip{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:25px;

}

.trust-strip div{

display:flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:50px;

background:
rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(10px);

font-size:14px;

font-weight:700;

color:#fff;

}

/* =========================================================
LAST UPDATED
========================================================= */

.last-updated{

margin-top:22px;

font-size:14px;

font-weight:600;

color:#cbd5e1;

}

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

.hero-image-box{

position:relative;

z-index:2;

}

.hero-image{

background:#fff;

padding:18px;

border-radius:28px;

box-shadow:
0 30px 70px rgba(0,0,0,.25);

position:relative;

overflow:hidden;

}

.hero-image img{

width:100%;

display:block;

border-radius:20px;

}

.floating-badge{

position:absolute;

bottom:-20px;
left:-20px;

background:#fff;

padding:18px 24px;

border-radius:20px;

font-size:15px;

font-weight:800;

color:#0f172a;

box-shadow:
0 15px 40px rgba(0,0,0,.18);

}

/* =========================================================
QUICK INFO
========================================================= */

.quick-info-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-bottom:90px;

}

.quick-info-card{

background:#fff;

padding:40px;

border-radius:28px;

text-align:center;

border:1px solid #e2e8f0;

transition:.35s;

position:relative;

overflow:hidden;

}

.quick-info-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#0f172a,
#d4a017
);

}

.quick-info-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 50px rgba(15,23,42,.08);

}

.quick-info-icon{

width:84px;
height:84px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

font-size:32px;

margin-bottom:24px;

}

.quick-info-card h3{

font-size:24px;

font-weight:800;

margin-bottom:14px;

}

.quick-info-card p{

font-size:15px;

line-height:2;

color:#64748b;

}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title{

font-size:48px;

line-height:1.35;

font-weight:900;

margin-bottom:30px;

position:relative;

padding-left:24px;

letter-spacing:-0.5px;

}

.section-title::before{

content:"";

position:absolute;

top:8px;
left:0;

width:7px;
height:48px;

border-radius:20px;

background:
linear-gradient(
180deg,
#d4a017,
#f59e0b
);

}

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

.content-text{

font-size:20px;

line-height:2.3;

color:#475569;

margin-bottom:28px;

font-weight:500;

}

/* =========================================================
PROCESS GRID
========================================================= */

.process-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:45px;

margin-bottom:90px;

}

.process-card{

background:#fff;

padding:40px 30px;

border-radius:28px;

text-align:center;

border:1px solid #e2e8f0;

transition:.35s;

}

.process-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(15,23,42,.08);

}

.process-number{

width:60px;
height:60px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

font-size:22px;

font-weight:800;

margin-bottom:24px;

}

.process-card h3{

font-size:24px;

font-weight:800;

margin-bottom:14px;

}

.process-card p{

font-size:15px;

line-height:2;

color:#64748b;

}

/* =========================================================
FEATURE TABLE
========================================================= */

.feature-table{

margin-top:35px;

margin-bottom:80px;

overflow:auto;

}

.feature-table table{

width:100%;

border-collapse:collapse;

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:
0 15px 40px rgba(15,23,42,.05);

}

.feature-table th{

background:
linear-gradient(
135deg,
#0f172a,
#172554
);

color:#fff;

padding:20px;

font-size:17px;

font-weight:800;

}

.feature-table td{

padding:20px;

border:1px solid #e2e8f0;

font-size:16px;

font-weight:500;

color:#334155;

}

/* =========================================================
CLAUSE BOX
========================================================= */

.clause-box{

background:#fff;

padding:40px;

border-radius:28px;

border:1px solid #e2e8f0;

margin-bottom:28px;

transition:.35s;

}

.clause-box:hover{

transform:translateY(-5px);

border-color:#d4a017;

box-shadow:
0 18px 45px rgba(15,23,42,.06);

}

.clause-box h3{

font-size:26px;

font-weight:800;

margin-bottom:18px;

}

.clause-box p{

font-size:17px;

line-height:2.1;

color:#64748b;

}

/* =========================================================
USES GRID
========================================================= */

.uses-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:40px;

margin-bottom:90px;

}

.use-card{

background:#fff;

padding:38px;

border-radius:28px;

border:1px solid #e2e8f0;

transition:.35s;

}

.use-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(15,23,42,.08);

}

.use-card i{

font-size:36px;

color:#d4a017;

margin-bottom:22px;

}

.use-card h3{

font-size:25px;

font-weight:800;

margin-bottom:16px;

}

.use-card p{

font-size:16px;

line-height:2;

color:#64748b;

}

/* =========================================================
RELATED GRID
========================================================= */

.related-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:24px;

margin-top:40px;

margin-bottom:70px;

}

.related-card{

background:#fff;

padding:32px;

border-radius:26px;

border:1px solid #e2e8f0;

text-decoration:none;

transition:.35s;

display:block;

}

.related-card:hover{

transform:translateY(-8px);

border-color:#d4a017;

box-shadow:
0 20px 45px rgba(15,23,42,.08);

}

.related-card h3{

font-size:24px;

font-weight:800;

margin-bottom:14px;

color:#0f172a;

}

.related-card p{

font-size:16px;

line-height:2;

color:#64748b;

}

/* =========================================================
LEGAL WARNING
========================================================= */

.legal-warning{

background:
linear-gradient(
135deg,
#0f172a,
#172554
);

padding:55px;

border-radius:34px;

margin-top:70px;

margin-bottom:80px;

position:relative;

overflow:hidden;

}

.legal-warning::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:260px;
height:260px;

border-radius:50%;

background:
rgba(255,255,255,.05);

}

.legal-warning h2{

font-size:42px;

font-weight:900;

color:#fff;

margin-bottom:20px;

position:relative;

z-index:2;

}

.legal-warning p{

font-size:18px;

line-height:2.1;

color:#dbeafe;

position:relative;

z-index:2;

}

/* =========================================================
CTA BOX
========================================================= */

.cta-box{

background:
linear-gradient(
135deg,
#d4a017,
#f59e0b
);

padding:75px 40px;

border-radius:36px;

text-align:center;

margin-bottom:80px;

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(245,158,11,.25);

}

.cta-box::before{

content:"";

position:absolute;

top:-100px;
right:-100px;

width:280px;
height:280px;

border-radius:50%;

background:
rgba(255,255,255,.12);

}

.cta-box h2{

font-size:50px;

font-weight:900;

color:#fff;

margin-bottom:20px;

position:relative;

z-index:2;

}

.cta-box p{

font-size:19px;

line-height:2;

color:#fff;

margin-bottom:30px;

position:relative;

z-index:2;

}

.cta-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:20px 42px;

border-radius:18px;

background:#fff;

color:#0f172a;

font-size:18px;

font-weight:800;

text-decoration:none;

transition:.35s;

position:relative;

z-index:2;

overflow:hidden;

}

.cta-btn::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.8s;

}

.cta-btn:hover::before{

left:100%;

}

.cta-btn:hover{

transform:
translateY(-5px)
scale(1.03);

color:#0f172a;

}

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

.important-links-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:35px;

margin-bottom:80px;

}

.important-links-grid a{

background:#fff;

padding:22px;

border-radius:18px;

border:1px solid #e2e8f0;

text-decoration:none;

font-weight:700;

color:#0f172a;

display:flex;

align-items:center;

gap:10px;

transition:.35s;

}

.important-links-grid a:hover{

transform:translateY(-5px);

border-color:#d4a017;

color:#d4a017;

}

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

.faq-box{

background:#fff;

padding:35px;

border-radius:28px;

border:1px solid #e2e8f0;

margin-bottom:24px;

transition:.35s;

}

.faq-box:hover{

transform:translateY(-5px);

border-color:#d4a017;

box-shadow:
0 15px 35px rgba(15,23,42,.05);

}

.faq-box h3{

font-size:24px;

font-weight:800;

margin-bottom:14px;

}

.faq-box p{

font-size:17px;

line-height:2;

color:#64748b;

}

/* =========================================================
AUTHOR
========================================================= */

.author-box{

margin-top:70px;

padding-top:35px;

border-top:1px solid #e2e8f0;

}

.author-box h4{

font-size:26px;

font-weight:800;

margin-bottom:12px;

}

.author-box p{

font-size:16px;

line-height:2;

color:#64748b;

}

/* =========================================================
STICKY BUTTONS
========================================================= */

.desktop-sticky-btn{

position:fixed;

right:25px;
bottom:25px;

z-index:9999;

}

.desktop-sticky-btn a{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 28px;

border-radius:18px;

background:
linear-gradient(
135deg,
#d4a017,
#f59e0b
);

color:#fff;

font-size:16px;

font-weight:800;

text-decoration:none;

box-shadow:
0 18px 40px rgba(245,158,11,.35);

transition:.35s;

}

.desktop-sticky-btn a:hover{

transform:
translateY(-5px)
scale(1.03);

color:#fff;

}

.mobile-sticky-btn{

display:none;

}

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

@media(max-width:992px){

.quick-info-grid,
.process-grid,
.uses-grid,
.related-grid,
.important-links-grid{

grid-template-columns:1fr 1fr;

}

.hero-title{

font-size:50px;

}

.article-card{

padding:40px;

}

}

@media(max-width:768px){

.page-wrapper{

padding:20px 0 70px;

}

.article-card{

padding:22px;

border-radius:24px;

}

.hero-section{

padding:34px;

border-radius:28px;

}

.hero-title{

font-size:38px;

line-height:1.35;

}

.hero-description{

font-size:16px;

line-height:2;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn,
.cta-btn{

width:100%;

}

.quick-info-grid,
.process-grid,
.uses-grid,
.related-grid,
.important-links-grid{

grid-template-columns:1fr;

}

.section-title{

font-size:34px;

line-height:1.45;

}

.content-text{

font-size:16px;

line-height:2.1;

}

.process-card,
.quick-info-card,
.use-card{

padding:30px 24px;

}

.cta-box{

padding:40px 24px;

border-radius:24px;

}

.cta-box h2{

font-size:36px;

}

.legal-warning{

padding:35px 24px;

}

.legal-warning h2{

font-size:30px;

}

.trust-strip{

gap:10px;

}

.trust-strip div{

width:100%;

justify-content:center;

}

.floating-badge{

position:static;

margin-top:20px;

display:inline-block;

}

.desktop-sticky-btn{

display:none;

}

.mobile-sticky-btn{

display:flex;

position:fixed;

left:15px;
right:15px;
bottom:15px;

z-index:9999;

}

.mobile-sticky-btn a{

width:100%;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px;

border-radius:18px;

background:
linear-gradient(
135deg,
#d4a017,
#f59e0b
);

color:#fff;

font-size:17px;

font-weight:800;

text-decoration:none;

box-shadow:
0 15px 35px rgba(245,158,11,.35);

}

}