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

:root{
--bg:#f6f8fc;
--bg-soft:#fbfcff;
--card:#ffffff;
--card-2:rgba(255,255,255,0.82);
--text:#0f172a;
--muted:#64748b;
--muted-2:#475569;
--line:rgba(15,23,42,0.08);
--line-strong:rgba(15,23,42,0.12);
--shadow-sm:0 10px 24px rgba(15,23,42,0.06);
--shadow-md:0 18px 45px rgba(15,23,42,0.08);
--shadow-lg:0 28px 70px rgba(15,23,42,0.12);
--radius-sm:14px;
--radius-md:20px;
--radius-lg:28px;
--accent:#2563eb;
--accent-2:#06b6d4;
--accent-violet:#8b5cf6;
--accent-emerald:#10b981;
--accent-amber:#f59e0b;
--accent-red:#ef4444;
}

html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
background:
radial-gradient(circle at top left, rgba(37,99,235,0.10), transparent 24%),
radial-gradient(circle at top right, rgba(139,92,246,0.08), transparent 22%),
linear-gradient(180deg,#fbfcff 0%,#f5f7fb 100%);
color:var(--text);
min-height:100vh;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* LINKS */

a{
color:inherit;
}

/* HEADER */

header{
position:sticky;
top:0;
z-index:100;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
background:rgba(255,255,255,0.78);
border-bottom:1px solid rgba(15,23,42,0.06);
padding:18px 30px;
box-shadow:0 8px 24px rgba(15,23,42,0.04);
}

.header-inner{
max-width:1180px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.brand-link{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
color:var(--text);
}

.brand-mark{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(135deg, rgba(37,99,235,0.16), rgba(6,182,212,0.16)),
#fff;
border:1px solid rgba(37,99,235,0.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 25px rgba(37,99,235,0.10);
}

.brand-mark svg{
width:22px;
height:22px;
color:#1d4ed8;
}

header h2{
font-size:20px;
font-weight:700;
letter-spacing:-0.02em;
}

.header-nav{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.header-nav a{
text-decoration:none;
color:var(--muted-2);
font-size:14px;
font-weight:600;
padding:10px 14px;
border-radius:12px;
transition:all .22s ease;
}

.header-nav a:hover{
background:rgba(15,23,42,0.04);
color:var(--text);
}

/* MAIN */

main{
padding:34px 20px 80px;
max-width:1180px;
margin:auto;
}

/* HERO */

.hero{
position:relative;
overflow:hidden;
text-align:center;
margin-bottom:56px;
padding:62px 24px;
border-radius:32px;
border:1px solid rgba(255,255,255,0.76);
background:
radial-gradient(circle at 14% 18%, rgba(59,130,246,0.17), transparent 28%),
radial-gradient(circle at 85% 25%, rgba(6,182,212,0.14), transparent 26%),
radial-gradient(circle at 58% 88%, rgba(139,92,246,0.12), transparent 20%),
linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.92));
box-shadow:var(--shadow-lg);
}

.hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.02));
}

.hero h1{
font-size:clamp(34px,5vw,58px);
line-height:1.02;
margin-bottom:14px;
letter-spacing:-0.04em;
position:relative;
z-index:1;
}

.hero p{
font-size:18px;
color:var(--muted-2);
max-width:760px;
margin:0 auto;
line-height:1.75;
position:relative;
z-index:1;
}

/* SECTION TITLES */

section h2{
font-size:30px;
letter-spacing:-0.03em;
color:var(--text);
}

/* GRID DE TOOLS */

.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;
margin-top:24px;
}

/* CARDS */

.tool-card{
position:relative;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(255,255,255,0.90));
padding:22px;
border-radius:22px;
border:1px solid rgba(15,23,42,0.08);
box-shadow:var(--shadow-md);
text-decoration:none;
color:var(--text);
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
display:block;
min-height:168px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

.tool-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top right, rgba(37,99,235,0.15), transparent 34%);
pointer-events:none;
opacity:.95;
}

.tool-card::after{
content:"";
position:absolute;
left:18px;
right:18px;
top:0;
height:4px;
border-radius:0 0 12px 12px;
background:linear-gradient(90deg,#2563eb,#06b6d4);
}

.tool-card:hover{
transform:translateY(-7px);
box-shadow:0 24px 52px rgba(15,23,42,0.14);
border-color:rgba(15,23,42,0.14);
}

.tool-card h3{
font-size:20px;
margin-bottom:8px;
line-height:1.15;
letter-spacing:-0.02em;
position:relative;
z-index:1;
}

.tool-card p{
font-size:14px;
color:var(--muted);
line-height:1.65;
position:relative;
z-index:1;
max-width:92%;
}

/* TOOL PAGE */

.tool-wrapper{
max-width:860px;
margin:auto;
}

.tool-title{
font-size:clamp(34px,5vw,50px);
line-height:1.04;
letter-spacing:-0.04em;
margin-bottom:10px;
text-align:center;
}

.tool-description{
color:var(--muted-2);
margin:0 auto 32px;
max-width:760px;
text-align:center;
font-size:17px;
line-height:1.75;
}

/* NAV BACK */

.tool-nav{
text-align:left;
margin-bottom:26px;
}

.tool-nav a{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--muted-2);
font-size:14px;
font-weight:600;
padding:11px 14px;
border-radius:12px;
background:rgba(255,255,255,0.72);
border:1px solid rgba(15,23,42,0.08);
box-shadow:0 8px 20px rgba(15,23,42,0.05);
transition:all .24s ease;
}

.tool-nav a:hover{
color:var(--text);
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(15,23,42,0.08);
}

/* TOOL BOX */

.tool-box{
background:
radial-gradient(circle at top right, rgba(99,102,241,0.08), transparent 26%),
linear-gradient(180deg,rgba(255,255,255,0.97),rgba(255,255,255,0.92));
padding:34px;
border-radius:24px;
border:1px solid rgba(15,23,42,0.08);
box-shadow:var(--shadow-lg);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

.tool-box h2,
.tool-box h3{
letter-spacing:-0.02em;
}

.tool-box p{
color:var(--muted-2);
line-height:1.8;
}

/* FORM ELEMENTS */

label{
display:block;
font-size:13px;
font-weight:700;
color:var(--muted-2);
margin-bottom:8px;
letter-spacing:.01em;
}

input,
textarea,
select{
width:100%;
padding:15px 16px;
font-size:16px;
font-family:inherit;
border:1px solid rgba(15,23,42,0.10);
border-radius:14px;
margin-bottom:15px;
background:rgba(255,255,255,0.92);
color:var(--text);
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}

input:focus,
textarea:focus,
select:focus{
border-color:rgba(37,99,235,0.45);
box-shadow:0 0 0 4px rgba(37,99,235,0.10);
transform:translateY(-1px);
}

textarea{
resize:vertical;
min-height:120px;
}

input[type="range"]{
padding:0;
background:transparent;
box-shadow:none;
border:none;
}

/* BUTTON */

button{
width:100%;
padding:15px 18px;
font-size:16px;
font-weight:700;
letter-spacing:-0.01em;
border:none;
background:linear-gradient(135deg,#111827,#1e293b);
color:white;
border-radius:14px;
cursor:pointer;
margin-bottom:15px;
transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
box-shadow:0 16px 30px rgba(15,23,42,0.22);
}

button:hover{
transform:translateY(-2px);
box-shadow:0 22px 36px rgba(15,23,42,0.28);
}

button:disabled{
opacity:.65;
cursor:not-allowed;
transform:none;
}

/* PREVIEW BOX */

.preview-box{
width:100%;
min-height:300px;
max-height:420px;
overflow:hidden;
margin-top:20px;
border-radius:18px;
background:
linear-gradient(135deg, rgba(248,250,252,0.95), rgba(241,245,249,0.95));
border:1px solid rgba(15,23,42,0.08);
display:flex;
align-items:center;
justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}

.preview-box canvas,
.preview-box img{
max-width:100%;
max-height:390px;
height:auto;
display:block;
}

/* DOWNLOAD BUTTON */

.download-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:20px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
color:white;
padding:14px 18px;
border-radius:14px;
text-decoration:none;
font-weight:700;
box-shadow:0 16px 30px rgba(37,99,235,0.22);
transition:transform .22s ease, box-shadow .22s ease;
}

.download-btn:hover{
transform:translateY(-2px);
box-shadow:0 22px 36px rgba(37,99,235,0.28);
}

/* RESULT */

.result-box{
margin-top:30px;
background:rgba(248,250,252,0.9);
padding:22px;
border-radius:18px;
border:1px solid rgba(15,23,42,0.07);
}

.result-box p{
font-size:18px;
margin:6px 0;
line-height:1.6;
}

/* RELATED TOOLS */

.related-tools{
margin-top:60px;
text-align:left;
}

.related-tools h3{
margin-bottom:14px;
font-size:24px;
letter-spacing:-0.02em;
}

/* FOOTER */

footer{
margin-top:70px;
padding:34px 20px 44px;
text-align:center;
color:var(--muted);
font-size:14px;
line-height:1.7;
border-top:1px solid rgba(15,23,42,0.06);
background:rgba(255,255,255,0.45);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

footer a{
color:var(--muted-2);
text-decoration:none;
font-weight:600;
}

footer a:hover{
color:var(--text);
}

/* BADGES / SMALL HELPERS */

.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
font-size:12px;
font-weight:700;
border-radius:999px;
background:rgba(37,99,235,0.08);
color:#1d4ed8;
border:1px solid rgba(37,99,235,0.14);
}

/* ANIMATIONS */

.reveal{
opacity:0;
transform:translateY(24px) scale(.985);
transition:opacity .8s ease, transform .8s ease;
}

.reveal.revealed{
opacity:1;
transform:translateY(0) scale(1);
}

/* MOBILE */

@media (max-width: 900px){
main{
padding:28px 16px 70px;
}
.hero{
padding:48px 18px;
border-radius:26px;
}
.hero h1{
font-size:36px;
}
section h2{
font-size:24px;
}
.tool-box{
padding:24px 18px;
border-radius:20px;
}
header{
padding:16px 18px;
}
.header-inner{
flex-direction:column;
align-items:flex-start;
}
.header-nav{
width:100%;
justify-content:flex-start;
}
}

@media (max-width: 640px){
.tools-grid{
grid-template-columns:1fr;
gap:16px;
}
.tool-card{
padding:18px;
min-height:auto;
}
.tool-title{
font-size:34px;
}
.hero p,
.tool-description{
font-size:16px;
}
button,
input,
select,
textarea{
font-size:16px;
}
.preview-box{
min-height:240px;
}
}
/* ===== TOOL PAGE PREMIUM OVERRIDES ===== */

.tool-page-shell{
max-width:980px;
margin:0 auto;
}

.tool-page-hero{
margin-bottom:26px;
padding:30px 24px 10px;
text-align:center;
}

.tool-title{
font-size:clamp(34px,5vw,50px);
line-height:1.04;
letter-spacing:-0.04em;
margin-bottom:12px;
text-align:center;
max-width:860px;
margin-left:auto;
margin-right:auto;
}

.tool-description{
color:var(--muted-2);
margin:0 auto 10px;
max-width:760px;
text-align:center;
font-size:17px;
line-height:1.75;
}

.tool-nav{
text-align:left;
margin-bottom:24px;
}

.tool-nav a{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--muted-2);
font-size:14px;
font-weight:600;
padding:11px 14px;
border-radius:12px;
background:rgba(255,255,255,0.78);
border:1px solid rgba(15,23,42,0.08);
box-shadow:0 8px 20px rgba(15,23,42,0.05);
transition:all .24s ease;
}

.tool-nav a:hover{
color:var(--text);
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(15,23,42,0.08);
}

.tool-wrapper{
max-width:none;
margin:0;
text-align:initial;
}

/* result box cleaner inside tools */
.result-box{
margin-top:20px;
background:linear-gradient(180deg,rgba(248,250,252,0.98),rgba(241,245,249,0.92));
padding:22px;
border-radius:18px;
border:1px solid rgba(15,23,42,0.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}

.result-box p{
font-size:17px;
margin:7px 0;
line-height:1.65;
color:var(--text);
}

/* Related tools section */
.related-tools{
margin-top:54px;
padding-top:8px;
}

.related-head{
margin-bottom:18px;
}

.related-head h3{
font-size:26px;
letter-spacing:-0.02em;
margin-bottom:6px;
}

.related-head p{
color:var(--muted);
font-size:14px;
line-height:1.6;
}

/* remove harsh repeated effects for related cards */
.related-card{
min-height:150px;
padding:20px;
}

.related-card::after{
display:none;
}

.related-card::before{
background:radial-gradient(circle at top right, rgba(99,102,241,0.10), transparent 34%);
}

.related-card h3{
font-size:18px;
margin-bottom:8px;
}

.related-card p{
font-size:14px;
max-width:100%;
}

/* tool box content spacing */
.tool-box > *:first-child{
margin-top:0 !important;
}

.tool-box > *:last-child{
margin-bottom:0 !important;
}

/* improve spacing in tool content */
.tool-box h2{
margin-top:26px;
margin-bottom:10px;
font-size:28px;
letter-spacing:-0.02em;
}

.tool-box h3{
margin-top:22px;
margin-bottom:8px;
font-size:22px;
letter-spacing:-0.02em;
}

.tool-box p{
margin-bottom:14px;
}

/* controls inside tool box */
.tool-box button,
.tool-box .download-btn{
max-width:100%;
}

@media (max-width:768px){
.tool-page-hero{
padding:18px 8px 8px;
}
.related-head h3{
font-size:22px;
}
}