/* =====================================================
   MARKI PAGES
===================================================== */

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

.brand-hero{

padding:90px 20px;

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

position:relative;

overflow:hidden;

}

.brand-hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

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

filter:blur(150px);

border-radius:50%;

left:-250px;

top:-250px;

}

.brand-hero::after{

content:"";

position:absolute;

width:600px;

height:600px;

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

filter:blur(120px);

border-radius:50%;

right:-220px;

bottom:-250px;

}

.brand-hero .container{

position:relative;

z-index:2;

max-width:1250px;

margin:auto;

}

.brand-hero-grid{

display:grid;

grid-template-columns:1fr 520px;

align-items:center;

gap:70px;

}

.brand-badge{

display:inline-block;

background:#0099ff;

color:white;

padding:10px 22px;

border-radius:40px;

font-size:14px;

font-weight:600;

margin-bottom:22px;

letter-spacing:.5px;

}

.brand-left h1{

font-size:52px;

color:white;

line-height:1.15;

margin-bottom:25px;

font-weight:700;

}

.brand-left p{

font-size:18px;

line-height:1.9;

color:#d7d7d7;

margin-bottom:35px;

}

.brand-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.call-btn{

background:#0099ff;

color:white;

padding:15px 34px;

border-radius:12px;

text-decoration:none;

font-size:17px;

font-weight:600;

transition:.35s;

}

.call-btn:hover{

background:#0084db;

transform:translateY(-4px);

}

.info-btn{

border:2px solid rgba(255,255,255,.25);

color:white;

padding:15px 34px;

border-radius:12px;

text-decoration:none;

font-size:17px;

transition:.35s;

}

.info-btn:hover{

background:white;

color:#111827;

}

.brand-right img{

width:100%;

display:block;

border-radius:22px;

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

transition:.5s;

}

.brand-right img:hover{

transform:scale(1.02);

}

.section-subtitle{

max-width:760px;

margin:auto;

margin-top:15px;

margin-bottom:45px;

font-size:17px;

line-height:1.8;

color:#777;

text-align:center;

}

/* =====================================================
   SERVICES / PROBLEMS / FAQ CARDS
===================================================== */

.brand-services,
.brand-problems,
.brand-models,
.brand-faq,
.brand-related{

padding:85px 20px;

background:#ffffff;

}

.brand-services .container,
.brand-problems .container,
.brand-models .container,
.brand-faq .container,
.brand-related .container{

max-width:1250px;

margin:auto;

}

.brand-services h2,
.brand-problems h2,
.brand-models h2,
.brand-faq h2,
.brand-related h2{

text-align:center;

font-size:38px;

color:#111827;

margin-bottom:12px;

font-weight:700;

}

.services-grid,
.problems-grid,
.faq-grid,
.related-grid{

display:grid;

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

gap:24px;

margin-top:40px;

}

.service-card,
.problem-card,
.faq-card,
.related-card{

background:#fff;

padding:28px;

border-radius:18px;

border:1px solid #e7e7e7;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.service-card:hover,
.problem-card:hover,
.faq-card:hover,
.related-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,.12);

border-color:#0099ff;

}

.service-icon,
.problem-icon{

width:64px;

height:64px;

border-radius:50%;

background:#0099ff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:20px;

color:#fff;

}

.service-card h3,
.problem-card h3,
.faq-card h3,
.related-card h3{

font-size:22px;

margin-bottom:14px;

color:#111827;

}

.service-card p,
.problem-card p,
.faq-card p,
.related-card p{

font-size:16px;

line-height:1.8;

color:#666;

}

.related-card{

text-decoration:none;

display:block;

}

.related-card:hover h3{

color:#0099ff;

}

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

.brand-image{

padding:20px;

background:#f5f7fb;

}

.brand-image .container{

max-width:750px;

margin:auto;

}

.brand-image img{

width:100%;

display:block;

border-radius:22px;

box-shadow:0 25px 60px rgba(0,0,0,.15);

transition:.4s;

}

.brand-image img:hover{

transform:scale(1.01);

}

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

.brand-content{

padding:85px 20px;

background:white;

}

.brand-content .container{

max-width:1050px;

margin:auto;

}

.brand-content h2{

font-size:38px;

margin-bottom:30px;

text-align:center;

color:#111827;

}

.brand-content p{

font-size:18px;

line-height:2;

color:#555;

margin-bottom:22px;

}

/* =====================================================
   MODELS
===================================================== */

.models-grid{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:16px;

margin-top:45px;

}

.models-grid span{

padding:14px 24px;

background:#f4f6fa;

border:1px solid #dfe5ec;

border-radius:50px;

font-size:16px;

font-weight:600;

color:#111827;

transition:.35s;

cursor:default;

}

.models-grid span:hover{

background:#0099ff;

border-color:#0099ff;

color:white;

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,153,255,.25);

}

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

.brand-cta{

padding:100px 20px;

background:
linear-gradient(135deg,#0f172a 0%,#1f2937 50%,#111827 100%);

text-align:center;

position:relative;

overflow:hidden;

}

.brand-cta::before{

content:"";

position:absolute;

width:700px;

height:700px;

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

filter:blur(140px);

border-radius:50%;

top:-300px;

left:-250px;

}

.brand-cta .container{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

}

.brand-cta h2{

font-size:42px;

color:white;

margin-bottom:25px;

}

.brand-cta p{

font-size:18px;

line-height:1.9;

color:#d6d6d6;

margin-bottom:40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

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

@media(max-width:992px){

.brand-hero-grid{

grid-template-columns:1fr;

gap:45px;

text-align:center;

}

.brand-buttons{

justify-content:center;

}

.brand-left h1{

font-size:42px;

}

}

@media(max-width:768px){

.brand-hero{

padding:70px 20px;

}

.brand-left h1{

font-size:34px;

}

.brand-left p{

font-size:17px;

}

.brand-services h2,
.brand-problems h2,
.brand-models h2,
.brand-content h2,
.brand-faq h2,
.brand-related h2,
.brand-cta h2{

font-size:30px;

}

.services-grid,
.problems-grid,
.faq-grid,
.related-grid{

grid-template-columns:1fr;

}

.brand-content p{

font-size:17px;

}

.models-grid{

gap:12px;

}

.models-grid span{

font-size:15px;

padding:12px 18px;

}

.call-btn,
.info-btn{

width:100%;

text-align:center;

}

.cta-buttons{

flex-direction:column;

}

}

html{

scroll-behavior:smooth;

}




/* ==========================================
   BRAND INFO
========================================== */

.brand-info{

padding:80px 20px;

background:#f8fafc;

}

.brand-info .container{

max-width:950px;

margin:auto;

}

.brand-info h2{

font-size:34px;

color:#0f172a;

text-align:center;

margin-bottom:25px;

font-weight:700;

position:relative;

}

.brand-info h2::after{

content:"";

display:block;

width:80px;

height:4px;

background:#00a8ff;

margin:15px auto 0;

border-radius:20px;

}

.brand-info p{

font-size:17px;

line-height:1.9;

color:#4b5563;

margin-bottom:22px;

text-align:justify;

}

.brand-info p:last-child{

margin-bottom:0;

}

.brand-info{

position:relative;

overflow:hidden;

}

.brand-info::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

background:rgba(0,168,255,.06);

border-radius:50%;

}

.brand-info::after{

content:"";

position:absolute;

bottom:-140px;

left:-140px;

width:300px;

height:300px;

background:rgba(15,23,42,.03);

border-radius:50%;

}

.brand-info .container{

position:relative;

z-index:2;

}

@media(max-width:768px){

.brand-info{

padding:60px 18px;

}

.brand-info h2{

font-size:28px;

}

.brand-info p{

font-size:16px;

line-height:1.8;

text-align:left;

}

}