:root{

--navy:#0B1F3A;
--emerald:#10B981;
--gold:#F59E0B;

--white:#ffffff;
--background:#F8FAFC;
--gray:#64748B;
--dark:#1E293B;

--radius:18px;

}

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

}

html{

scroll-behavior:smooth;

}

body{
    font-family:'Inter',sans-serif;
    color:var(--dark);
    overflow-x:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(16,185,129,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(11,31,58,.05),
    transparent 40%),

    #F8FAFC;
}

h1,h2,h3{

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

}

a{

text-decoration:none;

}

.navbar{

position:relative;  
width:92%;
max-width:1250px;

margin:30px auto 0;

padding:20px 42px;

display:flex;
justify-content:space-between;
align-items:center;

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

border-radius:22px;

box-shadow:0 12px 40px rgba(0,0,0,.08);

transition:.35s;

}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo img{

width:82px;

height:82px;

object-fit:contain;

transition:.35s;

}

.logo img:hover{
transform:rotate(-8deg) scale(1.08);
filter:drop-shadow(0 10px 20px rgba(16,185,129,.35));
}

.logo span{
    font-family:'Sora',sans-serif;
    font-size:28px;
    font-weight:700;
    color:var(--navy);
}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

color:var(--gray);

font-size:17px;

font-weight:600;

transition:.3s;

}

.nav-links a:hover{

color:var(--emerald);

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

background:linear-gradient(
135deg,
var(--navy),
#123E67
);

color:white;

padding:18px 38px;

border-radius:60px;

font-weight:600;

transition:.35s;

box-shadow:
0 20px 45px rgba(11,31,58,.20);

}

.primary-btn:hover{
    background:var(--emerald);
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(16,185,129,.30);
    
}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:60px;

background:white;

border:1px solid #E5E7EB;

font-weight:600;

transition:.35s;

color:var(--dark);

}

.secondary-btn:hover{
    background:#EEF6FF;
    transform:translateY(-4px);
}

.hero{

max-width:1500px;

margin:auto;

min-height:110vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:100px;

padding:120px 40px 140px;

}

.hero-left{

flex:1.15;

max-width:760px;

}

.tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:50px;

background:white;

border:1px solid rgba(16,185,129,.18);

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

color:var(--emerald);

font-weight:700;

margin-bottom:35px;

}

.hero h1{

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

font-size:102px;

font-weight:800;

line-height:1.02;

letter-spacing:-3px;

color:var(--navy);

margin-bottom:30px;

}

.hero-text{

font-size:24px;

line-height:1.9;

color:#617286;

max-width:640px;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

align-items:center;

}

.trust-badges{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.badge{

display:flex;

align-items:center;

gap:12px;

background:white;

padding:16px 22px;

border-radius:60px;

border:1px solid rgba(0,0,0,.05);

box-shadow:

0 12px 30px rgba(0,0,0,.06);

font-size:15px;

font-weight:600;

transition:.35s;

}

.badge:hover{
    transform:translateY(-5px);
}

.badge i{

color:var(--emerald);

}

.hero-right{

flex:1;

display:flex;

justify-content:flex-end;

align-items:center;

}

.mockup{

width:700px;

background:white;

border-radius:30px;

padding:45px;

border:1px solid #E8EEF5;

box-shadow:

0 60px 120px rgba(0,0,0,.10),

0 15px 40px rgba(0,0,0,.08);

animation:float 5s ease-in-out infinite;

position:relative;

overflow:hidden;

}

.mockup::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(16,185,129,.10);

filter:blur(80px);

right:-120px;

top:-120px;

border-radius:50%;

}

.mockup:hover{
    transform:translateY(-10px);
}

.mockup-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}

.mockup-header span{

color:var(--emerald);

font-weight:700;

font-size:15px;

}

.status{

width:12px;

height:12px;

background:var(--emerald);

border-radius:50%;

}

.goal{

margin-bottom:30px;

}

.goal h4{

margin-bottom:10px;

}

.analysis{

display:grid;

gap:14px;

margin-bottom:30px;

}

.item{

display:flex;

gap:12px;

align-items:center;

}

.item i{

color:var(--emerald);

}

.confidence{

background:linear-gradient(

135deg,

#0B1F3A,

#163B65

);

color:white;

padding:35px;

border-radius:22px;

margin-top:40px;

text-align:center;

}

.confidence h2{

font-size:90px;

font-weight:800;

margin:12px 0;

}

.footer-links{

margin:30px 0;

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

}

.footer-links a{

color:var(--gray);

}

.footer-links a:hover{

color:var(--navy);

}

.copyright{

margin-top:20px;

color:var(--gray);

}

@media(max-width:950px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.trust-badges{

justify-content:center;

}

.nav-links{

display:none;

}

}

/* ===========================
   Problem Section
=========================== */

.problem{

padding:90px 8%;

background:white;

}

.section-title{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.section-title span{

color:var(--emerald);

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.section-title h2{

font-size:52px;

margin:18px 0;

color:var(--navy);

}

.section-title p{

font-size:20px;

line-height:1.8;

color:var(--gray);

}

.problem-grid{

display:grid;

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

gap:30px;

}

.problem-card{

background:#F8FAFC;

padding:35px;

border-radius:20px;

transition:.35s;

border:1px solid #E5E7EB;

}

.problem-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.icon{

width:68px;
height:68px;

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

background:#E8F5F0;

border-radius:18px;

font-size:28px;

color:var(--emerald);

margin-bottom:22px;

transition:.3s;

}

.problem-card:hover .icon{

background:var(--emerald);

color:white;

transform:rotate(-8deg);

}

.problem-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--navy);

}

.problem-card p{

line-height:1.8;

color:var(--gray);

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

/* ===========================
   HOW IT WORKS
=========================== */

.how-it-works{

padding:120px 8%;

background:#F8FAFC;

}

.steps{

display:grid;

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

gap:30px;

margin-top:70px;

}

.step{

background:white;

padding:40px 30px;

border-radius:20px;

text-align:center;

border:1px solid #E5E7EB;

transition:.35s;

}

.step:hover{

transform:translateY(-10px);

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

}

.step-icon{

width:68px;
height:68px;

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

background:#E8F5F0;

border-radius:18px;

font-size:28px;

color:var(--emerald);

margin:0 auto 22px;

transition:.3s;

}

.step:hover .step-icon{

background:var(--emerald);

color:white;

transform:rotate(-8deg);

}

.step h3{

margin-bottom:18px;

font-size:24px;

color:var(--navy);

}

.step p{

line-height:1.8;

color:var(--gray);

}

@media(max-width:1000px){

.steps{

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

}

}

@media(max-width:700px){

.steps{

grid-template-columns:1fr;

}

}

/* ===========================
   FEATURES
=========================== */

.features{

padding:120px 8%;

background:white;

}

.features-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.feature-card{

background:#F8FAFC;

padding:38px;

border-radius:22px;

border:1px solid #E5E7EB;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.feature-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

background:#E8F5F0;

border-radius:18px;

font-size:28px;

color:var(--emerald);

margin-bottom:24px;

transition:.3s;

}

.feature-card:hover .feature-icon{

background:var(--emerald);

color:white;

transform:rotate(-8deg);

}

.feature-card h3{

font-size:24px;

color:var(--navy);

margin-bottom:18px;

}

.feature-card p{

line-height:1.8;

color:var(--gray);

}

/* ===========================
   AI DEMO
=========================== */

.demo{

padding:170px 8%;

background:#F8FAFC;

}

.demo-window{

max-width:1200px;

width:100%;

margin:70px auto 0;

background:white;

border-radius:28px;

border:1px solid #E5E7EB;

overflow:hidden;

box-shadow:
0 40px 90px rgba(0,0,0,.08);

}

.demo-header{

display:flex;

align-items:center;

gap:15px;

padding:22px 30px;

background:#F8FAFC;

border-bottom:1px solid #E5E7EB;

}

/* ===========================
   CHAT INPUT
=========================== */

.chat-input{

display:flex;

align-items:center;

gap:15px;

padding:25px;

background:white;

border-top:1px solid #E5E7EB;
  
max-width:100%;  

}


.chat-input-area{

display:flex;

gap:15px;

width:100%;

}

.chat-input input{

flex:1;

height:62px;

padding:0 24px;

border:1px solid #D9E1EA;

border-radius:16px;

font-size:17px;

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

outline:none;

transition:.3s;

}


.chat-input button{

width:62px;

height:62px;

flex-shrink:0;

border-radius:16px;

font-size:22px;

}

.chat-input input:focus{

border-color:var(--emerald);

box-shadow:0 0 0 4px rgba(16,185,129,.12);

}

.chat-input button{

width:72px;

height:72px;

border:none;

border-radius:15px;

background:var(--navy);

color:white;

font-size:22px;

cursor:pointer;

transition:.3s;

}

.chat-input button:hover{

background:var(--emerald);

transform:translateY(-3px);

}

/* ===========================
   CHAT BOX
=========================== */

.chat-box{

height:720px;

overflow-y:auto;

padding:35px;

background:#FBFCFE;

display:flex;

flex-direction:column;

gap:24px;

}

/* Bot Message */

.bot-message{

max-width:90%;

background:white;

padding:28px;

border-radius:22px;

border:1px solid #E7EDF5;

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

line-height:1.9;

animation:fadeIn .3s;

}

/* User Message */

.user-message{

background:linear-gradient(
135deg,
#0B1F3A,
#143E67
);

color:white;

padding:22px;

border-radius:22px;

margin-left:auto;

max-width:82%;

}

/* Bot Title */

.bot-message h4{

font-size:22px;

color:var(--navy);

margin-bottom:20px;

}

/* Results */

.result{

display:flex;

align-items:center;

gap:14px;

padding:14px 0;

border-bottom:1px solid #E8EDF3;

}

.result:last-child{

border:none;

}

.result i{

width:22px;

color:var(--emerald);

}

/* Scrollbar */

.chat-box::-webkit-scrollbar{

width:8px;

}

.chat-box::-webkit-scrollbar-thumb{

background:#D6DCE5;

border-radius:20px;

}

/* Fade Animation */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ===========================
   TRUST INTELLIGENCE
=========================== */

.trust{

padding:120px 8%;

background:#F8FAFC;

}

.trust-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.trust-card{

background:white;

padding:40px;

border-radius:22px;

border:1px solid #E5E7EB;

transition:.35s;

}

.trust-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.trust-icon{

width:70px;

height:70px;

display:flex;

justify-content:center;

align-items:center;

background:#E8F5F0;

border-radius:18px;

font-size:28px;

color:var(--emerald);

margin-bottom:25px;

transition:.3s;

}

.trust-card:hover .trust-icon{

background:var(--emerald);

color:white;

transform:rotate(-8deg);

}

.trust-card h3{

font-size:24px;

color:var(--navy);

margin-bottom:18px;

}

.trust-card p{

line-height:1.8;

color:var(--gray);

}

/* ===========================
   MARKET INSIGHTS
=========================== */

.market{

padding:120px 8%;

background:white;

}

.market-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.market-card{

background:linear-gradient(135deg,#0B1F3A,#12345A);

padding:40px;

border-radius:22px;

color:white;

text-align:center;

transition:.35s;

}

.market-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(11,31,58,.30);

}

.market-card h3{

font-size:22px;

margin-bottom:20px;

}

.market-number{

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

font-size:64px;

font-weight:700;

color:#10B981;

margin-bottom:15px;

}

.market-card p{

color:#D6E1EC;

line-height:1.8;

}

/* ===========================
   PRICING
=========================== */

.pricing{

padding:120px 8%;

background:#F8FAFC;

}

.pricing-grid{

display:grid;

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

gap:35px;

margin-top:70px;

align-items:stretch;

}

.price-card{

background:white;

padding:45px;

border-radius:24px;

border:1px solid #E5E7EB;

transition:.35s;

position:relative;

display:flex;

flex-direction:column;

}

.price-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(0,0,0,.08);

}

.price-card h3{

font-size:28px;

color:var(--navy);

margin-bottom:15px;

}

.price-card h1{

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

font-size:60px;

margin-bottom:20px;

color:var(--navy);

}

.price-card h1 span{

font-size:20px;

color:var(--gray);

font-weight:500;

}

.price-card p{

color:var(--gray);

line-height:1.8;

margin-bottom:30px;

}

.price-card ul{

list-style:none;

margin-bottom:35px;

flex:1;

}

.price-card li{

display:flex;

align-items:center;

gap:12px;

padding:12px 0;

border-bottom:1px solid #EEF2F6;

}

.price-card li:last-child{

border:none;

}

.price-card li i{

color:var(--emerald);

}

.price-card a{

text-align:center;

}

/* Featured Plan */

.featured{

background:linear-gradient(180deg,#0B1F3A,#112E52);

color:white;

transform:scale(1.05);

}

.featured:hover{

transform:scale(1.05) translateY(-12px);

}

.featured h3,
.featured h1,
.featured h1 span{

color:white;

}

.featured p{

color:#D8E3EF;

}

.featured li{

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

}

.featured li i{

color:#10B981;

}

.featured .primary-btn{

background:#10B981;

}

.featured .primary-btn:hover{

background:white;

color:var(--navy);

}

.popular{

position:absolute;

top:-16px;

left:50%;

transform:translateX(-50%);

background:var(--gold);

color:white;

padding:8px 22px;

border-radius:40px;

font-size:14px;

font-weight:700;

letter-spacing:.5px;

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

}

/* ===========================
   ABOUT
=========================== */

.about{

padding:120px 8%;

background:#F8FAFC;

}

.about-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-left span{

color:var(--emerald);

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.about-left h2{

font-size:52px;

margin:20px 0;

color:var(--navy);

}

.about-left p{

font-size:18px;

line-height:1.9;

color:var(--gray);

margin-bottom:25px;

}

.about-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:35px;

}

.about-list div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.about-list i{

color:var(--emerald);

}

.about-card{

background:white;

padding:45px;

border-radius:24px;

border:1px solid #E5E7EB;

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

}

.about-card h3{

font-size:28px;

color:var(--navy);

margin-bottom:35px;

}

.graph-item{

display:flex;

align-items:center;

gap:15px;

padding:18px 0;

border-bottom:1px solid #E8EDF3;

}

.graph-item:last-of-type{

border-bottom:none;

}

.graph-item i{

width:26px;

font-size:22px;

color:var(--emerald);

}

.graph-score{

margin-top:40px;

background:var(--navy);

color:white;

padding:35px;

border-radius:20px;

text-align:center;

}

.graph-score h2{

font-size:70px;

margin-top:10px;

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

}

@media(max-width:950px){

.about-container{

grid-template-columns:1fr;

}

}

/* ===========================
   CONTACT
=========================== */

.contact{

padding:120px 8%;

background:white;

}

.contact-container{

max-width:1200px;

margin:70px auto 0;

display:grid;

grid-template-columns:380px 1fr;

gap:60px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.contact-card{

background:#F8FAFC;

padding:35px;

border-radius:22px;

border:1px solid #E5E7EB;

transition:.3s;

}

.contact-card:hover{

transform:translateY(-8px);

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

}

.contact-card i{

font-size:30px;

color:var(--emerald);

margin-bottom:20px;

}

.contact-card h3{

font-size:24px;

margin-bottom:10px;

color:var(--navy);

}

.contact-card p{

color:var(--gray);

line-height:1.8;

}

.contact-form{

background:#F8FAFC;

padding:40px;

border-radius:24px;

border:1px solid #E5E7EB;

display:flex;

flex-direction:column;

gap:22px;

}

.contact-form input,

.contact-form textarea{

padding:18px 20px;

border-radius:15px;

border:1px solid #D8DEE8;

font-size:16px;

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

outline:none;

transition:.3s;

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--emerald);

box-shadow:0 0 0 4px rgba(16,185,129,.12);

}

.contact-form button{

align-self:flex-start;

}

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

}

}

/* ===========================
   PREMIUM FOOTER
=========================== */

footer{

background:#081727;

color:white;

padding:90px 8% 40px;

margin-top:0;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footer-brand img{

width:75px;

margin-bottom:20px;

}

.footer-brand h2{

font-size:34px;

margin-bottom:18px;

}

.footer-brand p{

color:#C5D1DD;

line-height:1.9;

max-width:420px;

}

.footer-links-column h3{

margin-bottom:25px;

font-size:20px;

}

.footer-links-column{

display:flex;

flex-direction:column;

gap:16px;

}

.footer-links-column a{

color:#C5D1DD;

transition:.3s;

}

.footer-links-column a:hover{

color:var(--emerald);

transform:translateX(6px);

}

footer hr{

margin:60px 0 30px;

border:none;

height:1px;

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

}

.copyright{

text-align:center;

color:#9FB2C6;

}

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-brand p{

margin:auto;

}

}

/* ===========================
   STATS
=========================== */

.stats{

padding:70px 8%;

background:white;

}

.stats-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;

}

.stat-card{

background:#F8FAFC;

padding:40px;

text-align:center;

border-radius:22px;

border:1px solid #E5E7EB;

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

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

}

.stat-card h2{

font-size:56px;

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

color:var(--emerald);

margin-bottom:10px;

}

.stat-card p{

font-size:17px;

color:var(--gray);

line-height:1.6;

}

@media(max-width:900px){

.stats-grid{

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

}

}

@media(max-width:600px){

.stats-grid{

grid-template-columns:1fr;

}

}

.quick-btn:hover{

background:#10B981;

color:white;

transform:translateY(-4px);

}

/* ==========================
 PREMIUM AI QUICK ACTIONS
========================== */

.quick-btn i{

color:var(--emerald);

font-size:16px;

}



.quick-btn:hover{

background:var(--navy);

color:white;

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(11,31,58,.15);

}


.quick-btn:hover i{

color:white;

}

.quick-actions{

display:flex;
gap:12px;
padding:20px;
flex-wrap:wrap;
background:white;

}


.quick-btn{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border-radius:50px;

background:white;

border:1px solid #E5E7EB;

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

font-weight:600;

color:var(--dark);

transition:.3s;

cursor:pointer;

}F

.ai-card{

background:#F8FAFC;

border:1px solid #E5E7EB;

padding:22px;

border-radius:20px;

margin-top:18px;

}

.ai-card h3{

margin-bottom:15px;

color:#0B1F3A;

}

.ai-card p{

color:#64748B;

}

.supplier-card{

background:white;

padding:22px;

border-radius:18px;

margin:18px 0;

border:1px solid #E5E7EB;

transition:.3s;

}

.supplier-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.freight-card{

background:#F8FAFC;

padding:22px;

border-radius:18px;

margin:20px 0;

}

.confidence-box{

background:linear-gradient(
135deg,
#0B1F3A,
#123E67
);

color:white;

padding:35px;

border-radius:22px;

text-align:center;

margin:25px 0;

}

.confidence-box h1{

font-size:64px;

margin:15px 0;

}

.actions{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:25px;

}

.actions button{

background:#10B981;

border:none;

padding:14px 22px;

border-radius:14px;

color:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.actions button:hover{

background:#0B1F3A;

transform:translateY(-4px);

}

.chat-box{

scroll-behavior:smooth;

}

.chat-box::-webkit-scrollbar{

width:10px;

}

.chat-box::-webkit-scrollbar-thumb{

background:#C8D3E2;

border-radius:20px;

}

.assistant-container{

background:white;

border-radius:24px;

overflow:hidden;

}

.mockup-header{

padding:20px 25px;

border-bottom:1px solid #E8EEF5;

display:flex;

align-items:center;

gap:12px;

background:#FAFBFC;

}

.business-report{

background:white;

border-radius:18px;

padding:20px;

margin-top:15px;

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

}



.business-report h2{

color:#0B1F3A;

}



.report-card{

background:#F8FAFC;

padding:15px;

border-radius:12px;

margin-top:15px;

}



.report-card h3{

color:#10B981;

}

.business-report p{
color:#64748B;
line-height:1.8;
}

.business-report h3{
margin-top:20px;
color:#0B1F3A;
}

.business-report hr{
margin:25px 0;
border:none;
border-top:1px solid #E5E7EB;
}



.country-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

}


.country-buttons button{

background:white;
color:#0B1F3A;
border:1px solid #E5E7EB;
padding:12px 18px;
border-radius:30px;
cursor:pointer;
font-weight:600;
transition:.3s;

}


.country-buttons button:hover{

background:#10B981;
color:white;
border-color:#10B981;
transform:translateY(-3px);

}

/* ==========================
 TRUST GRAPH
========================== */


.trust-graph{

margin-top:25px;

padding:20px;

background:#0B1F3A;

color:white;

border-radius:18px;

}



.trust-item{

margin-top:18px;

}



.bar{

height:10px;

background:#334155;

border-radius:20px;

overflow:hidden;

}



.bar div{

height:100%;

background:#10B981;

}



.risk div{

background:#F59E0B;

}


.trust-graph h3{

margin-top:25px;

color:#F59E0B;

}

@media(max-width:700px){

.hero h1{
font-size:48px;
}

.hero-text{
font-size:18px;
}

.mockup{
width:100%;
padding:25px;
}

.chat-box{
height:550px;
}

.navbar{
width:95%;
padding:15px 20px;
}

.logo span{
font-size:22px;
}

}