:root{
--navy:#071b44;
--navy2:#0b2f73;
--orange:#ff9800;
--cream:#f7f1e8;
--card:#ffffff;
--text:#132238;
--muted:#667085;
--border:#ead8bf;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--cream);color:var(--text)}
.whl-header{height:74px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 38px;position:sticky;top:0;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.whl-brand{color:#fff;text-decoration:none;font-size:24px;font-weight:900}
.whl-brand span{color:var(--orange)}
.whl-nav{display:flex;gap:22px}
.whl-nav a{color:#eaf1ff;text-decoration:none;font-weight:700}
.whl-nav a:hover{color:var(--orange)}
.whl-hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:78px 24px 88px}
.whl-hero-inner{max-width:1180px;margin:auto;text-align:center}
.whl-badge{display:inline-block;background:rgba(255,152,0,.16);border:1px solid rgba(255,152,0,.45);color:#ffd089;padding:9px 16px;border-radius:999px;font-weight:800;margin-bottom:18px}
.whl-hero h1{font-size:52px;line-height:1.05;margin:0 0 16px}
.whl-hero p{font-size:19px;max-width:760px;margin:auto;color:#dbe7ff}
.whl-page{max-width:1180px;margin:-42px auto 70px;padding:0 22px;position:relative;z-index:2}
.whl-upload-card{background:#fff;border:1px solid var(--border);border-radius:26px;padding:34px;display:grid;grid-template-columns:1.5fr .8fr;gap:28px;box-shadow:0 24px 70px rgba(7,27,68,.14)}
.whl-upload-card h2{font-size:30px;margin:0 0 10px;color:var(--navy)}
.whl-upload-card p{color:var(--muted);font-size:16px;line-height:1.7}
.whl-upload-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-top:24px}
.whl-upload-input{border:2px dashed #f0b95f;border-radius:18px;background:#fffaf1;padding:16px}
.whl-upload-input input{width:100%;font-size:15px}
.whl-btn-primary,button{background:var(--orange);color:#fff;border:0;border-radius:16px;padding:17px 30px;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 12px 25px rgba(255,152,0,.28)}
.whl-btn-primary:hover,button:hover{filter:brightness(.96);transform:translateY(-1px)}
.whl-upload-stat{background:linear-gradient(180deg,#071b44,#0b2f73);color:#fff;border-radius:22px;padding:26px;height:100%}
.whl-upload-stat h3{margin-top:0;color:#ffd089}
.whl-upload-stat ul{padding-left:20px;line-height:1.9}
#result{max-width:1180px;margin:30px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card,.whl-kpi,.whl-chart{background:#fff;border-radius:20px;padding:24px;box-shadow:0 14px 40px rgba(7,27,68,.10);border:1px solid #edf0f5}
.success{border-left:7px solid #00b894}.warning{border-left:7px solid #ff9800}.danger{border-left:7px solid #ef4444}.info{border-left:7px solid #2196f3}
.whl-footer{background:var(--navy);color:#dbe7ff;padding:34px 42px;display:flex;justify-content:space-between;gap:22px;align-items:center}
.whl-footer strong{color:#fff;font-size:20px}.whl-footer p{margin:6px 0 0}.whl-footer a{color:var(--orange);font-weight:900;text-decoration:none}
@media(max-width:800px){
.whl-header{padding:0 18px}.whl-nav{display:none}.whl-hero h1{font-size:36px}
.whl-upload-card{grid-template-columns:1fr;padding:24px}.whl-upload-row{grid-template-columns:1fr}
.whl-footer{display:block}.whl-page{margin-top:-28px}
}

.whl-tools-head{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
padding:34px;
box-shadow:0 18px 50px rgba(7,27,68,.10);
margin-bottom:28px;
text-align:center;
}

.whl-tools-head h2{
font-size:38px;
margin:0 0 10px;
color:var(--navy);
}

.whl-tools-head p{
margin:0;
color:var(--muted);
font-size:17px;
}

.whl-tools-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:22px;
}

.whl-tool-card{
background:#fff;
border:1px solid var(--border);
border-radius:22px;
padding:24px;
text-decoration:none;
color:var(--text);
box-shadow:0 16px 42px rgba(7,27,68,.10);
transition:.2s;
position:relative;
overflow:hidden;
}

.whl-tool-card:hover{
transform:translateY(-4px);
box-shadow:0 24px 60px rgba(7,27,68,.16);
}

.whl-tool-card span{
display:inline-block;
background:#fff3df;
color:#b35a00;
border-radius:999px;
padding:7px 12px;
font-size:13px;
font-weight:900;
margin-bottom:15px;
}

.whl-tool-card h3{
margin:0 0 10px;
font-size:22px;
color:var(--navy);
}

.whl-tool-card p{
color:var(--muted);
line-height:1.55;
min-height:74px;
}

.whl-tool-card strong{
color:var(--orange);
font-weight:900;
}

.whl-tool-card.is-live{
border-color:#ffb347;
}

.whl-tool-card.is-live:before{
content:"LIVE";
position:absolute;
top:18px;
right:-34px;
background:var(--orange);
color:#fff;
font-weight:900;
font-size:12px;
padding:6px 42px;
transform:rotate(35deg);
}

.whl-search-panel{
background:#fff;
border:1px solid var(--border);
border-radius:26px;
padding:34px;
box-shadow:0 18px 50px rgba(7,27,68,.10);
margin-bottom:34px;
text-align:center;
}

.whl-search-panel h2{
font-size:34px;
margin:0 0 8px;
color:var(--navy);
}

.whl-search-panel p{
margin:0 0 20px;
color:var(--muted);
}

.whl-search-panel input{
width:100%;
max-width:780px;
border:2px solid #efd3a4;
border-radius:18px;
padding:18px 22px;
font-size:17px;
outline:none;
}

.whl-home-section{
margin:44px 0;
}

.whl-section-title{
text-align:center;
margin-bottom:24px;
}

.whl-section-title h2{
font-size:34px;
color:var(--navy);
margin:0 0 8px;
}

.whl-section-title p{
color:var(--muted);
margin:0;
}

.whl-section-title.small{
text-align:left;
}

.whl-category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:16px;
}

.whl-category-card{
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:20px;
text-decoration:none;
box-shadow:0 12px 30px rgba(7,27,68,.08);
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
}

.whl-category-card strong{
color:var(--navy);
}

.whl-category-card span{
color:var(--orange);
font-weight:900;
}

.whl-ai-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:26px;
margin:54px 0;
}

.whl-ai-features>div{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
padding:32px;
box-shadow:0 16px 42px rgba(7,27,68,.10);
}

.whl-ai-features h2{
color:var(--navy);
font-size:30px;
margin-top:0;
}

.whl-ai-features li{
margin:12px 0;
font-weight:700;
}

.whl-stats-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:18px;
margin:45px 0;
}

.whl-stats-row div{
background:linear-gradient(135deg,var(--navy),var(--navy2));
color:#fff;
border-radius:22px;
padding:28px;
text-align:center;
box-shadow:0 18px 50px rgba(7,27,68,.18);
}

.whl-stats-row strong{
display:block;
font-size:42px;
color:#ffd089;
}

.whl-stats-row span{
font-weight:800;
}

@media(max-width:800px){
.whl-ai-features{grid-template-columns:1fr}
}

.compact-grid{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;
}

.compact-grid .whl-tool-card{
min-height:220px;
padding:22px;
}

.compact-grid .whl-tool-card p{
min-height:52px;
font-size:15px;
}

.whl-home-section{
margin:34px 0;
}

.whl-category-grid{
margin-bottom:20px;
}

.whl-category-card{
min-height:64px;
}

.whl-ai-features{
margin-top:38px;
}

@media(min-width:1100px){
.compact-grid{
grid-template-columns:repeat(4,1fr);
}
}

.whl-home{
max-width:1180px;
margin:-42px auto 70px;
padding:0 22px;
position:relative;
z-index:2;
}

.home-search,
.home-section,
.info-panel{
background:#fff;
border:1px solid var(--border);
border-radius:26px;
box-shadow:0 18px 50px rgba(7,27,68,.10);
}

.home-search{
padding:34px;
text-align:center;
margin-bottom:34px;
}

.home-search h2,
.section-head h2,
.info-panel h2{
color:var(--navy);
font-size:34px;
margin:0 0 10px;
}

.home-search p,
.section-head p,
.info-panel p{
color:var(--muted);
font-size:16px;
line-height:1.7;
}

.home-search input{
width:100%;
max-width:780px;
border:2px solid #efd3a4;
border-radius:18px;
padding:18px 22px;
font-size:17px;
outline:none;
margin-top:16px;
}

.home-section{
padding:32px;
margin:34px 0;
}

.section-head{
text-align:center;
margin-bottom:24px;
}

.featured-grid,
.all-tools-grid{
display:grid;
gap:20px;
}

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

.all-tools-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.tool-card{
background:#fff;
border:1px solid var(--border);
border-radius:22px;
padding:22px;
text-decoration:none;
color:var(--text);
box-shadow:0 10px 26px rgba(7,27,68,.08);
min-height:220px;
display:flex;
flex-direction:column;
justify-content:space-between;
position:relative;
overflow:hidden;
transition:.2s;
}

.tool-card:hover{
transform:translateY(-4px);
box-shadow:0 24px 60px rgba(7,27,68,.16);
}

.tool-card span{
align-self:flex-start;
background:#fff3df;
color:#b35a00;
border-radius:999px;
padding:7px 12px;
font-size:13px;
font-weight:900;
margin-bottom:12px;
}

.tool-card h3{
font-size:22px;
line-height:1.25;
color:var(--navy);
margin:0 0 10px;
}

.tool-card p{
color:var(--muted);
line-height:1.55;
margin:0 0 18px;
}

.tool-card strong{
color:var(--orange);
font-weight:900;
}

.tool-card.live{
border-color:#ff9800;
}

.tool-card.live:before{
content:"LIVE";
position:absolute;
top:18px;
right:-34px;
background:var(--orange);
color:#fff;
font-weight:900;
font-size:12px;
padding:6px 42px;
transform:rotate(35deg);
}

.category-pills{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
}

.category-pills a{
background:#fff7ea;
border:1px solid #f2c77f;
color:var(--navy);
border-radius:999px;
padding:12px 18px;
font-weight:900;
text-decoration:none;
}

.category-pills b{
color:var(--orange);
margin-left:7px;
}

.feature-panels{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
background:transparent;
border:0;
box-shadow:none;
padding:0;
}

.info-panel{
padding:32px;
}

.info-panel li{
margin:12px 0;
font-weight:800;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin:34px 0;
}

.stats-grid div{
background:linear-gradient(135deg,var(--navy),var(--navy2));
color:#fff;
border-radius:24px;
padding:34px;
text-align:center;
box-shadow:0 18px 50px rgba(7,27,68,.18);
}

.stats-grid strong{
display:block;
font-size:44px;
color:#ffd089;
}

.stats-grid span{
font-weight:900;
}

@media(min-width:1100px){
.all-tools-grid{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:800px){
.whl-home{margin-top:-28px}
.feature-panels{grid-template-columns:1fr}
.home-section,.home-search,.info-panel{padding:24px}
}

.tool-card:after{
content:"";
position:absolute;
right:18px;
bottom:18px;
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(135deg,#fff3df,#ffe0a8);
opacity:.8;
}

.tool-card h3,
.tool-card p,
.tool-card strong,
.tool-card span{
position:relative;
z-index:2;
}

.all-tools-grid .tool-card{
min-height:205px;
}

.featured-grid .tool-card{
min-height:190px;
}

.tool-card strong{
display:inline-block;
margin-top:auto;
}

.home-section{
padding:28px;
}

.category-pills a:hover,
.tool-card:hover span{
background:var(--orange);
color:#fff;
}

.home-search{
margin-bottom:28px;
}

@media(min-width:1100px){
.featured-grid{
grid-template-columns:repeat(2,1fr);
}
}