/* DesignCalc Pro — Warm Interior Theme */
*{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#2c1810;--primary-light:#4a3228;--secondary:#8b5e3c;--accent:#d4a574;--accent-light:#e8c9a0;--light:#faf6f1;--dark:#1a0f0a;--bg:#f5f0ea;--text:#2c1810;--card:#ffffff;--radius:12px;--shadow:0 4px 24px rgba(44,24,16,0.10)}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');
body{font-family:'Source Sans 3',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}
h1,h2,h3,h4,h5,.logo{font-family:'Playfair Display',serif}
a{color:var(--secondary);text-decoration:none}
a:hover{color:var(--primary)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:var(--dark);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.3)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 20px;height:64px}
.logo{color:#fff;font-size:1.4rem;font-weight:700;display:flex;align-items:center;gap:8px}
.logo-icon{font-size:1.8rem}
.main-nav{display:flex;gap:4px}
.main-nav a{color:rgba(255,255,255,0.80);padding:8px 14px;border-radius:8px;font-weight:600;font-size:0.92rem;transition:all .2s}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,0.15);color:#fff}
.mobile-toggle{background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;display:none}
@media(max-width:768px){.main-nav{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--dark);padding:12px}.main-nav.active{display:flex}.mobile-toggle{display:block}}

/* Breadcrumb */
.breadcrumb{background:var(--accent-light);padding:10px 0;border-bottom:1px solid var(--accent)}
.breadcrumb .container{display:flex;align-items:center;gap:8px;font-size:0.88rem}
.breadcrumb span{color:var(--secondary)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--dark) 0%,var(--primary) 50%,var(--primary-light) 100%);color:#fff;padding:90px 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.hero h1{font-size:2.8rem;margin-bottom:16px;position:relative;font-weight:700}
.hero p{font-size:1.15rem;opacity:0.9;max-width:600px;margin:0 auto 28px;position:relative}
.btn-primary{background:var(--accent);color:var(--dark);padding:14px 36px;border-radius:var(--radius);font-weight:700;font-size:1.05rem;border:none;cursor:pointer;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,165,116,0.4)}

/* Sections */
.section{padding:64px 0}
.section-title{text-align:center;margin-bottom:48px}
.section-title h2{font-size:2.2rem;color:var(--primary);margin-bottom:10px}
.section-title p{color:#666;font-size:1.05rem}

/* Tools Grid */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.tool-card{background:var(--card);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;border:1px solid rgba(212,165,116,0.15);display:flex;flex-direction:column}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(44,24,16,0.15)}
.tool-icon{font-size:2.4rem;margin-bottom:12px}
.tool-category{display:inline-block;background:var(--light);color:var(--secondary);padding:3px 10px;border-radius:20px;font-size:0.75rem;font-weight:700;margin-bottom:10px;text-transform:uppercase}
.tool-card h3{font-size:1.1rem;margin-bottom:8px;color:var(--primary)}
.tool-card p{color:#666;font-size:0.9rem;flex:1}
.tool-link{color:var(--secondary);font-weight:700;font-size:0.92rem;margin-top:12px;display:inline-flex;align-items:center;gap:4px}

/* Articles Grid */
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.article-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-4px)}
.article-img{width:100%;height:200px;object-fit:cover;display:block}
.article-body{padding:20px;flex:1;display:flex;flex-direction:column}
.article-category{display:inline-block;background:var(--light);color:var(--secondary);padding:3px 10px;border-radius:20px;font-size:0.72rem;font-weight:700;margin-bottom:8px;text-transform:uppercase}
.article-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--primary);line-height:1.4}
.article-card p{color:#666;font-size:0.88rem;flex:1}
.article-card .tool-link{margin-top:auto;padding-top:12px}

/* Tool Detail */
.tool-detail{background:var(--card);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.tool-header{display:flex;align-items:flex-start;gap:24px;margin-bottom:36px}
.tool-icon-lg{font-size:4rem;flex-shrink:0}
.tool-detail h1{font-size:2rem;color:var(--primary);margin-bottom:8px}
.tool-calc-area{background:var(--light);border-radius:var(--radius);padding:28px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:700;margin-bottom:6px;color:var(--primary);font-size:0.95rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:2px solid var(--accent-light);border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--secondary)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.info-card{background:#fff;border-radius:10px;padding:20px;text-align:center;border:1px solid var(--accent-light)}
.info-card h4{color:var(--secondary);font-size:0.9rem;margin-bottom:6px}
.info-card .value{font-size:1.8rem;font-weight:700;color:var(--primary)}
.result-box{background:#fff;border-left:4px solid var(--secondary);padding:20px;border-radius:8px;margin-top:16px;color:#444;line-height:1.8}

/* Article Detail */
.article-detail{background:var(--card);border-radius:var(--radius);padding:48px;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.article-detail .featured-img{width:100%;height:400px;object-fit:cover;border-radius:var(--radius);margin-bottom:32px}
.article-detail h1{font-size:2.2rem;color:var(--primary);margin-bottom:12px;line-height:1.3}
.article-meta{color:#888;font-size:0.9rem;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--accent-light)}
.article-content{font-size:1.05rem;line-height:1.85;color:#333}
.article-content h2{margin:28px 0 12px;font-size:1.5rem;color:var(--primary)}
.article-content h3{margin:20px 0 10px;font-size:1.2rem;color:var(--primary)}
.article-content p{margin-bottom:16px}
.article-content ul,.article-content ol{margin:16px 0;padding-left:24px}
.article-content li{margin-bottom:8px}
.article-content strong{color:var(--primary)}

/* Footer */
.site-footer{background:var(--dark);color:rgba(255,255,255,0.7);padding:40px 0 0;margin-top:60px}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;max-width:1200px;margin:0 auto;padding:0 20px 32px}
.footer-inner h4{color:#fff;font-size:1rem;margin-bottom:12px}
.footer-inner a{color:rgba(255,255,255,0.6);font-size:0.9rem;display:block;margin-bottom:8px}
.footer-inner a:hover{color:#fff}
.footer-bottom{text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,0.1);font-size:0.88rem}

/* Standard pages */
.page-content{background:var(--card);border-radius:var(--radius);padding:48px;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.page-content h1{font-size:2rem;color:var(--primary);margin-bottom:20px}
.page-content p{margin-bottom:16px;font-size:1.05rem}

/* 404 */
.error-page{text-align:center;padding:100px 20px}
.error-page h1{font-size:6rem;color:var(--accent);margin-bottom:16px}
.error-page p{font-size:1.3rem;margin-bottom:28px}

/* Responsive */
@media(max-width:768px){.hero h1{font-size:2rem}.section{padding:40px 0}.section-title h2{font-size:1.7rem}.tool-detail,.article-detail,.page-content{padding:24px}.article-detail .featured-img{height:240px}.info-grid{grid-template-columns:1fr}.tool-header{flex-direction:column}}
@media(max-width:480px){.header-inner{height:56px}.hero{padding:50px 0}.hero h1{font-size:1.6rem}}