:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#d9e1ec;
    --brand:#1d4ed8;
    --brand-dark:#1e40af;
    --alt:#eef4ff;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Segoe UI, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1140px, calc(100% - 2rem));margin:0 auto}
.site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
}
.nav-shell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 0;
}
.brand{display:flex;gap:.85rem;align-items:center;color:var(--text)}
.brand img{width:52px;height:52px;object-fit:contain}
.brand strong{display:block;font-size:1.1rem}
.brand span{display:block;color:var(--muted);font-size:.92rem}
.main-nav{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    align-items:center;
}
.main-nav a{color:var(--text);font-weight:600}
.button{
    display:inline-block;
    background:var(--brand);
    color:#fff;
    padding:.75rem 1.15rem;
    border-radius:10px;
    font-weight:600;
    border:none;
    cursor:pointer;
}
.button:hover{background:var(--brand-dark)}
.button-secondary{
    background:#fff;
    color:var(--brand);
    border:1px solid var(--line);
}
.button-small{padding:.6rem .95rem}
.hero,.page-hero,.section{padding:3rem 0}
.hero-grid,.split,.planner-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:1.5rem;
    align-items:center;
}
h1,h2,h3{line-height:1.2;margin:0 0 .75rem}
h1{font-size:2.7rem}
h2{font-size:2rem}
h3{font-size:1.15rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:68ch}
.eyebrow{
    display:inline-block;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--brand);
    font-weight:700;
    margin-bottom:.6rem;
}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin:1.3rem 0}
.hero-image-card,.feature-card,.product-card,.checklist-card,.feature-panel,.support-card,.form-shell,.planner-controls,.drawing-panel,.cta-band,.download-card,.placeholder-box,.stat-card,.gallery-figure{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
}
.hero-image-card,.product-card,.feature-card,.feature-panel,.support-card,.planner-controls,.drawing-panel,.checklist-card,.form-shell,.gallery-figure{padding:1rem}
.hero-image-card img,.gallery-figure img{border-radius:10px}
.stats-grid,.card-grid,.product-grid,.feature-columns,.support-grid,.footer-grid{
    display:grid;
    gap:1rem;
}
.stats-grid{grid-template-columns:repeat(4,1fr);margin-top:1.5rem}
.stat-card strong{display:block;font-size:1.6rem}
.stat-card span{color:var(--muted)}
.card-grid{grid-template-columns:repeat(4,1fr)}
.product-grid{grid-template-columns:repeat(3,1fr)}
.feature-columns{grid-template-columns:repeat(3,1fr)}
.support-grid{grid-template-columns:repeat(2,1fr)}
.section-alt{background:var(--alt)}
.cta-band{
    padding:1.2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}
.checklist,.detail-list,.ordered-list{padding-left:1.1rem;margin:0}
.checklist li,.detail-list li,.ordered-list li{margin:.35rem 0}
.product-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}
.toggle-inline{display:flex;align-items:center;gap:.5rem}
.model-frame{
    width:100%;
    height:360px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:12px;
    margin:1rem 0;
}
.gallery-stack{display:grid;gap:1rem}
.gallery-figure{margin:0}
.gallery-figure img{
    width:100%;
    height:auto;
    object-fit:contain;
}
.planner-downloads,.download-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
    margin-top:1rem;
}
.download-card{
    padding:1rem;
    font-weight:600;
    color:var(--text);
}
.field-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.field.full,.field-grid.two-col .full{grid-column:1 / -1}
.field label{
    display:block;
    font-weight:600;
    margin-bottom:.4rem;
}
select,input,textarea{
    width:100%;
    padding:.8rem .9rem;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    font:inherit;
}
.validation-summary, .field span{color:#b91c1c;font-size:.92rem}
.success-banner{
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    padding:1rem;
    border-radius:10px;
    margin-bottom:1rem;
}
.placeholder-box{
    padding:1.5rem;
    text-align:center;
    color:var(--muted);
}
.accordion details{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:1rem;
    margin-bottom:.75rem;
}
.accordion summary{cursor:pointer;font-weight:600}
.drawing-panel img{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
}
.site-footer{
    padding:2rem 0;
    border-top:1px solid var(--line);
    background:#fff;
    margin-top:2rem;
}
.footer-grid{grid-template-columns:repeat(3,1fr)}
code{
    background:#eef2f7;
    padding:.15rem .35rem;
    border-radius:6px;
}
@media (max-width: 980px){
    .hero-grid,.split,.planner-grid,.product-grid,.card-grid,.feature-columns,.support-grid,.footer-grid,.stats-grid,.planner-downloads,.download-grid,.field-grid{
        grid-template-columns:1fr;
    }
    .nav-shell{
        flex-direction:column;
        align-items:flex-start;
    }
    h1{font-size:2.2rem}
}

.model-shell{
    position:relative;
}
.model-poster{
    position:absolute;
    inset:1rem 1rem auto 1rem;
    height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg,#f8fafc,#eef2f7);
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    z-index:1;
    transition:opacity .25s ease;
}
.model-poster.is-hidden{
    opacity:0;
    pointer-events:none;
}
.model-frame{
    opacity:.01;
    transition:opacity .3s ease;
}
.model-frame.is-ready{
    opacity:1;
}
.model-help{
    color:var(--muted);
    font-size:.92rem;
    margin-top:-.35rem;
    margin-bottom:.75rem;
}
.training-video{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:#000;
    margin:.5rem 0 .75rem 0;
}