:root{
--ink:#30231b;
--muted:#75665d;
--teal:#ed7417;
--teal2:#ff922e;
--pale:#fff3e8;
--line:#efdfd2;
--white:#fff;
--dark:#542609;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
color:var(--ink);
background:#fff;
line-height:1.6
}

a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,92%);margin:auto}

/* TOP BAR */

.topbar{
background:var(--dark);
color:#ffe6d3;
font-size:12px;
padding:8px 0
}

.topbar .wrap{
display:flex;
justify-content:space-between;
gap:16px
}

/* HEADER */

.header{
position:sticky;
top:0;
z-index:20;
background:#ffffffed;
backdrop-filter:blur(14px);
border-bottom:1px solid #e8eff0
}

.nav{
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px
}

.brand img{
width:155px;
height:auto;
display:block;
object-fit:contain
}

.links{
display:flex;
align-items:center;
gap:25px;
font-size:14px;
font-weight:650
}

.links a{transition:.25s}

.links a:hover,
.links a.active{color:var(--teal)}

.menu{
display:none;
background:none;
border:0;
font-size:26px;
color:var(--ink)
}

/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
gap:9px;
padding:13px 20px;
border-radius:5px;
background:var(--teal);
color:#fff;
font-size:14px;
font-weight:700;
border:1px solid var(--teal);
transition:.25s
}

.btn:hover{
background:var(--dark);
border-color:var(--dark);
transform:translateY(-2px)
}

.btn.outline{
background:transparent;
color:var(--teal)
}

.eyebrow{
color:var(--teal);
font-size:12px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase
}

/* HERO */

.hero{
position:relative;
overflow:hidden;
background:linear-gradient(
115deg,
#542609 0%,
#b84e0c 57%,
#ed7417 100%
);
color:#fff;
padding:92px 0 88px;
min-height:535px
}

.hero:after{
content:"";
position:absolute;
width:560px;
height:560px;
border:1px solid #ffffff24;
border-radius:50%;
right:-100px;
top:-100px;
box-shadow:0 0 0 55px #ffffff09,
0 0 0 110px #ffffff07
}

.hero-grid{
display:grid;
grid-template-columns:1.08fr .92fr;
align-items:center;
gap:50px;
position:relative;
z-index:1
}

.hero h1{
font-size:clamp(42px,5.6vw,70px);
line-height:1.04;
letter-spacing:-2px;
margin:15px 0 22px
}

.hero p{
color:#ffe1ca;
max-width:590px;
font-size:17px
}

.hero .eyebrow{color:#ffd0a5}

.hero-art{
position:relative;
min-height:340px;
display:grid;
place-items:center
}

.hero-art img{
width:100%;
max-width:470px;
max-height:390px;
object-fit:cover;
border-radius:18px;
box-shadow:0 24px 65px #35130580;
transform:rotate(2deg);
animation:float 6s ease-in-out infinite
}

.hero-chip{
position:absolute;
bottom:5px;
left:0;
background:#fff;
color:var(--ink);
padding:13px 17px;
border-radius:8px;
font-size:13px;
font-weight:700;
box-shadow:0 10px 30px #35130544
}

/* SECTIONS */

.section{padding:82px 0}

.section.soft{background:#ffffff}

.section-head{
max-width:700px;
margin-bottom:34px
}

.section-head h2{
font-size:clamp(30px,4vw,44px);
line-height:1.15;
letter-spacing:-1px;
margin:10px 0 13px
}

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

/* PRODUCT GRID */

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px
}

.card{
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
background:#fff;
transition:.3s;
display:flex;
flex-direction:column
}

.card:hover{
transform:translateY(-7px);
box-shadow:0 18px 42px #54260914;
border-color:#f3b17e
}

/* PRODUCT IMAGE - PURE WHITE BACKGROUND */

.card-img{
height:190px;
background:#ffffff;
display:grid;
place-items:center;
padding:12px
}

.card-img img{
width:100%;
height:100%;
object-fit:contain;
mix-blend-mode:normal
}

.card-body{padding:18px}

.card h3{
font-size:17px;
margin:0 0 8px
}

.card p{
font-size:13px;
color:var(--muted);
margin:0 0 15px
}

.more{
font-size:13px;
font-weight:800;
color:var(--teal)
}

/* ABOUT SECTION */

.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:55px;
align-items:center
}

.visual-panel{
border-radius:14px;
overflow:hidden;
background:#ffffff;
min-height:350px
}

.visual-panel img{
width:100%;
height:100%;
min-height:350px;
object-fit:cover;
mix-blend-mode:normal
}

.copy h2{
font-size:clamp(30px,4vw,43px);
line-height:1.15;
margin:10px 0 18px
}

.copy p{color:var(--muted)}

.ticks{
padding:0;
list-style:none;
display:grid;
gap:10px;
margin:22px 0
}

.ticks li:before{
content:"✓";
color:var(--teal);
font-weight:900;
margin-right:10px
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:28px
}

.stat{
padding:18px;
border:1px solid var(--line);
border-radius:8px
}

.stat b{
display:block;
font-size:23px;
color:var(--teal)
}

.stat span{
font-size:12px;
color:var(--muted)
}

/* CTA BANNER */

.banner{
background:var(--pale);
padding:42px;
border-radius:12px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}

.banner h2{
margin:0 0 6px;
font-size:28px
}

.banner p{
margin:0;
color:var(--muted)
}

/* INNER PAGE HERO */

.page-hero{
padding:70px 0;
background:linear-gradient(
120deg,
#542609,
#d75e10
);
color:#fff
}

.page-hero h1{
font-size:48px;
line-height:1.1;
margin:8px 0
}

.page-hero p{
color:#ffe1ca;
max-width:700px
}

.crumb{
font-size:12px;
color:#ffd0a5
}

/* PRODUCT DETAIL */

.product-detail{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:50px;
align-items:start
}

.product-photo{
background:#ffffff;
border-radius:12px;
padding:25px;
min-height:370px;
display:grid;
place-items:center
}

.product-photo img{
width:100%;
height:330px;
object-fit:contain;
mix-blend-mode:normal
}

.detail h2{
font-size:34px;
line-height:1.15;
margin:8px 0 14px
}

.detail p{color:var(--muted)}

.spec-list{
border-top:1px solid var(--line);
margin:25px 0
}

.spec-list div{
padding:12px 0;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:20px;
font-size:14px
}

.spec-list span:first-child{font-weight:700}

.notice{
background:#fff3e8;
border-left:3px solid var(--teal);
padding:15px 18px;
color:var(--muted);
font-size:13px
}

/* CONTACT */

.contact-grid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:35px
}

.contact-box{
padding:25px;
border:1px solid var(--line);
border-radius:10px
}

.contact-box h3{margin-top:0}

.contact-item{
padding:14px 0;
border-bottom:1px solid var(--line)
}

.contact-item small{
display:block;
color:var(--muted)
}

form{display:grid;gap:13px}

input,textarea{
width:100%;
padding:14px;
border:1px solid #e6d3c4;
border-radius:5px;
font:inherit
}

input:focus,
textarea:focus{
outline:none;
border-color:var(--teal);
box-shadow:0 0 0 3px #ed74171a
}

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

/* FOOTER */

footer{
background:#35190c;
color:#ffe6d3;
padding:55px 0 20px
}

.footgrid{
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:40px
}

.footgrid p,
.footgrid a{
color:#e0bda5;
font-size:13px
}

.footgrid h4{
color:white;
margin-top:0
}

.footlinks{
display:grid;
gap:8px
}

.footgrid a:hover{color:#ff922e}

.copyright{
border-top:1px solid #ffffff1c;
margin-top:35px;
padding-top:18px;
color:#d1a88d;
font-size:12px;
display:flex;
justify-content:space-between;
gap:15px
}

/* ANIMATIONS */

.fade{
opacity:0;
transform:translateY(22px);
transition:opacity .7s ease,
transform .7s ease
}

.fade.show{
opacity:1;
transform:none
}

@keyframes float{
0%,100%{transform:translateY(0) rotate(2deg)}
50%{transform:translateY(-13px) rotate(0deg)}
}

/* TABLET */

@media(max-width:900px){

.grid{grid-template-columns:repeat(2,1fr)}

.hero-grid,
.split,
.product-detail,
.contact-grid{
grid-template-columns:1fr
}

.hero{padding:70px 0}

.hero-art{min-height:260px}

.hero-art img{max-height:300px}

.footgrid{grid-template-columns:1fr 1fr}

}

/* MOBILE */

@media(max-width:650px){

.topbar .wrap{justify-content:center}

.topbar span:last-child{display:none}

.nav{height:70px}

.brand img{width:130px}

.menu{display:block}

.links{
display:none;
position:absolute;
top:70px;
left:0;
right:0;
background:#fff;
padding:20px 5%;
border-bottom:1px solid var(--line);
flex-direction:column;
align-items:flex-start;
gap:16px
}

.links.open{display:flex}

.nav>.btn{display:none}

.hero{
min-height:0;
padding:58px 0
}

.hero h1{font-size:43px}

.section{padding:58px 0}

.grid{
grid-template-columns:1fr 1fr;
gap:12px
}

.card-img{height:145px}

.card-body{padding:13px}

.card h3{font-size:15px}

.page-hero{padding:50px 0}

.page-hero h1{font-size:38px}

.banner{
padding:25px;
align-items:flex-start;
flex-direction:column
}

.stats{grid-template-columns:1fr}

.footgrid{grid-template-columns:1fr}

.copyright{flex-direction:column}

.product-photo{min-height:260px}

.product-photo img{height:240px}

}